@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
26 lines (25 loc) • 1.76 kB
JavaScript
'use client';
import { Select as ArkSelect } from '@ark-ui/react/select';
import { select, } from '@fidely-ui/styled-system/recipes';
import { makeStyleContext } from '../../system/make-style-context';
const { withSlotProvider, withSlotContext } = makeStyleContext(select);
export const SelectRootProvider = withSlotProvider(ArkSelect.RootProvider, 'root');
export const SelectRoot = withSlotProvider(ArkSelect.Root, 'root');
export const SelectControl = withSlotContext(ArkSelect.Control, 'control');
export const SelectContent = withSlotContext(ArkSelect.Content, 'content');
export const SelectClearTrigger = withSlotContext(ArkSelect.ClearTrigger, 'clearTrigger');
export const SelectTrigger = withSlotContext(ArkSelect.Trigger, 'trigger');
export const SelectIndicator = withSlotContext(ArkSelect.Indicator, 'indicator');
export const SelectLabel = withSlotContext(ArkSelect.Label, 'label');
export const SelectItem = withSlotContext(ArkSelect.Item, 'item');
export const SelectItemText = withSlotContext(ArkSelect.ItemText, 'itemText');
export const SelectItemGroup = withSlotContext(ArkSelect.ItemGroup, 'itemGroup');
export const SelectItemGroupLabel = withSlotContext(ArkSelect.ItemGroupLabel, 'itemGroupLabel');
export const SelectItemIndicator = withSlotContext(ArkSelect.ItemIndicator, 'itemIndicator');
export const SelectList = withSlotContext(ArkSelect.List, 'list');
export const SelectPositioner = withSlotContext(ArkSelect.Positioner, 'positioner');
export const SelectValueText = withSlotContext(ArkSelect.ValueText, 'valueText');
// -------------------- Context --------------------
export const SelectContext = ArkSelect.Context;
export const SelectItemContext = ArkSelect.ItemContext;
export const SelectHiddenSelect = ArkSelect.HiddenSelect;