@fidely-ui/react/dist/components/combobox/combobox.js

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

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { Combobox as ArkCombobox } from '@ark-ui/react/combobox';
import { combobox, } from '@fidely-ui/styled-system/recipes';
import { makeStyleContext } from '../../system/make-style-context';
import { FiClose } from '../icons/FiClose';
import { FiCaretDownIcon } from '../icons/FiCaretDownIcon';
const { withSlotProvider, withSlotContext } = makeStyleContext(combobox);
export const ComboboxRootProvider = withSlotProvider(ArkCombobox.RootProvider, 'root');
export const ComboboxRoot = withSlotProvider(ArkCombobox.Root, 'root');
export const ComboboxLabel = withSlotContext(ArkCombobox.Label, 'label');
export const ComboboxControl = withSlotContext(ArkCombobox.Control, 'control');
export const ComboboxInput = withSlotContext(ArkCombobox.Input, 'input');
export const ComboboxTrigger = withSlotContext((props) => {
    const { idleIcon = _jsx(FiCaretDownIcon, { size: 18 }), children, ...rest } = props;
    return (_jsx(ArkCombobox.Trigger, { ...rest, children: children ?? idleIcon }));
}, 'trigger');
export const ComboboxClearTrigger = withSlotContext((props) => {
    const { idleIcon = _jsx(FiClose, { size: 18 }), children, ...rest } = props;
    return (_jsx(ArkCombobox.ClearTrigger, { ...rest, children: children ?? idleIcon }));
}, 'clearTrigger');
export const ComboboxPositioner = withSlotContext(ArkCombobox.Positioner, 'positioner');
export const ComboboxContent = withSlotContext(ArkCombobox.Content, 'content');
export const ComboboxItemGroup = withSlotContext(ArkCombobox.ItemGroup, 'itemGroup');
export const ComboboxItemGroupLabel = withSlotContext(ArkCombobox.ItemGroupLabel, 'itemGroupLabel');
export const ComboboxItem = withSlotContext(ArkCombobox.Item, 'item');
export const ComboboxItemText = withSlotContext(ArkCombobox.ItemText, 'itemText');
export const ComboboxItemIndicator = withSlotContext(ArkCombobox.ItemIndicator, 'itemIndicator');
export const ComboboxIndicatorGroup = withSlotContext('div', 'indicatorGroup');
export const ComboboxEmpty = withSlotContext(ArkCombobox.Empty, 'empty');
export const ComboboxList = withSlotContext(ArkCombobox.List, 'list');
// -------------------- Context --------------------
export const ComboboxContext = ArkCombobox.Context;
export const ComboboxItemContext = ArkCombobox.ItemContext;