@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
JavaScript
'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" }));
});