@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
20 lines (19 loc) • 1.18 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { Checkbox as ArkCheckbox } from '@ark-ui/react/checkbox';
import { checkbox, } from '@fidely-ui/styled-system/recipes';
import { makeStyleContext } from '../../system/make-style-context';
import { FiCheck } from '../icons/FiCheck';
const { withSlotProvider, withSlotContext } = makeStyleContext(checkbox);
export const CheckboxRootProvider = withSlotProvider(ArkCheckbox.RootProvider, 'root');
export const CheckboxRoot = withSlotProvider(ArkCheckbox.Root, 'root');
export const CheckboxGroup = withSlotContext(ArkCheckbox.Group, 'group');
export const CheckboxControl = withSlotContext(ArkCheckbox.Control, 'control');
export const CheckboxLabel = withSlotContext(ArkCheckbox.Label, 'label');
export const CheckboxIndicator = withSlotContext((props) => {
const { idleIcon = _jsx(FiCheck, {}), children, ...rest } = props;
return (_jsx(ArkCheckbox.Indicator, { ...rest, children: children ?? idleIcon }));
}, 'indicator');
// -------------------- Context + Hidden Input --------------------
export const CheckboxContext = ArkCheckbox.Context;
export const CheckboxHiddenInput = ArkCheckbox.HiddenInput;