UNPKG

@fidely-ui/react

Version:

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

25 lines (24 loc) 1.54 kB
'use client'; import { jsx as _jsx } from "react/jsx-runtime"; import * as React from 'react'; import { Clipboard as ArkClipboard } from '@ark-ui/react/clipboard'; import { clipboard, } from '@fidely-ui/styled-system/recipes'; import { FiCheck } from '../icons/FiCheck'; import { FiCopy } from '../icons/FiCopy'; import { makeStyleContext } from '../../system/make-style-context'; const { withSlotProvider, withSlotContext } = makeStyleContext(clipboard); export const ClipboardRootProvider = withSlotProvider(ArkClipboard.RootProvider, 'root'); export const ClipboardRoot = withSlotProvider(ArkClipboard.Root, 'root'); export const ClipboardControl = withSlotContext(ArkClipboard.Control, 'control'); export const ClipboardTrigger = withSlotContext(ArkClipboard.Trigger, 'trigger'); export const ClipboardIndicator = withSlotContext((props) => { const { copiedIcon = _jsx(FiCheck, {}), idleIcon = _jsx(FiCopy, {}), children, ...rest } = props; return (_jsx(ArkClipboard.Indicator, { ...rest, copied: props.copied ?? copiedIcon, children: children ?? idleIcon })); }, 'indicator'); export const ClipboardInput = withSlotContext(ArkClipboard.Input, 'input'); export const ClipboardLabel = withSlotContext(ArkClipboard.Label, 'label'); export const ClipboardContext = ArkClipboard.Context; // -------------------- CopyText -------------------- export const ClipboardStatus = React.forwardRef(function ClipboardStatus(props, ref) { return (_jsx(ClipboardIndicator, { copied: "Copied", ref: ref, ...props, children: "Copy" })); });