@ark-ui/solid 1.0.0-beta.1 → 1.0.0-beta.3

package/source/carousel/index.js

@@ -0,0 +1,22 @@
+import { Carousel as CarouselRoot } from './carousel';
+import { useCarouselContext } from './carousel-context';
+import { CarouselControl } from './carousel-control';
+import { CarouselIndicator } from './carousel-indicator';
+import { CarouselIndicatorGroup, } from './carousel-indicator-group';
+import { CarouselNextTrigger } from './carousel-next-trigger';
+import { CarouselPrevTrigger } from './carousel-prev-trigger';
+import { CarouselItem } from './carousel-slide';
+import { CarouselItemGroup } from './carousel-slide-group';
+import { CarouselViewport } from './carousel-viewport';
+const Carousel = Object.assign(CarouselRoot, {
+    Root: CarouselRoot,
+    Control: CarouselControl,
+    Indicator: CarouselIndicator,
+    IndicatorGroup: CarouselIndicatorGroup,
+    NextTrigger: CarouselNextTrigger,
+    PrevTrigger: CarouselPrevTrigger,
+    Item: CarouselItem,
+    ItemGroup: CarouselItemGroup,
+    Viewport: CarouselViewport,
+});
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };

package/source/carousel/use-carousel.js

@@ -0,0 +1,10 @@
+import * as carousel from '@zag-js/carousel';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useCarousel = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(carousel.machine(context), { context });
+    return createMemo(() => carousel.connect(state, send, normalizeProps));
+};

package/source/checkbox/checkbox-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [CheckboxProvider, useCheckboxContext] = createContext({
+    hookName: 'useCheckboxContext',
+    providerName: '<CheckboxProvider />',
+});

package/source/checkbox/checkbox-control.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCheckboxContext } from './checkbox-context';
+export const CheckboxControl = (props) => {
+    const api = useCheckboxContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/checkbox/checkbox-indicator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCheckboxContext } from './checkbox-context';
+export const CheckboxIndicator = (props) => {
+    const api = useCheckboxContext();
+    const mergedProps = mergeProps(() => api().indicatorProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/checkbox/checkbox-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCheckboxContext } from './checkbox-context';
+export const CheckboxLabel = (props) => {
+    const checkbox = useCheckboxContext();
+    const labelProps = mergeProps(() => checkbox().labelProps, props);
+    return <ark.span {...labelProps}/>;
+};

package/source/checkbox/checkbox.jsx

@@ -0,0 +1,28 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { CheckboxProvider } from './checkbox-context';
+import { useCheckbox } from './use-checkbox';
+export const Checkbox = (props) => {
+    const [useCheckboxProps, labelprops] = createSplitProps()(props, [
+        'checked',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'invalid',
+        'name',
+        'onCheckedChange',
+        'required',
+        'value',
+    ]);
+    const api = useCheckbox(useCheckboxProps);
+    const mergedProps = mergeProps(() => api().rootProps, labelprops);
+    const getChildren = () => runIfFn(props.children, api);
+    return (<CheckboxProvider value={api}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </CheckboxProvider>);
+};

package/source/checkbox/index.js

@@ -0,0 +1,12 @@
+import { Checkbox as CheckboxRoot } from './checkbox';
+import { useCheckboxContext } from './checkbox-context';
+import { CheckboxControl } from './checkbox-control';
+import { CheckboxIndicator } from './checkbox-indicator';
+import { CheckboxLabel } from './checkbox-label';
+const Checkbox = Object.assign(CheckboxRoot, {
+    Root: CheckboxRoot,
+    Control: CheckboxControl,
+    Label: CheckboxLabel,
+    Indicator: CheckboxIndicator,
+});
+export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };

package/source/checkbox/use-checkbox.js

@@ -0,0 +1,10 @@
+import * as checkbox from '@zag-js/checkbox';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useCheckbox = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(checkbox.machine(context), { context });
+    return createMemo(() => checkbox.connect(state, send, normalizeProps));
+};

package/source/color-picker/color-picker-area-background.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerAreaContext } from './color-picker-area-context';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerAreaBackground = (props) => {
+    const colorAreaProps = useColorPickerAreaContext();
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getAreaBackgroundProps(colorAreaProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-area-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
+    hookName: 'useColorPickerAreaContext',
+    providerName: '<ColorPickerAreaProvider />',
+});

package/source/color-picker/color-picker-area-thumb.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerAreaContext } from './color-picker-area-context';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerAreaThumb = (props) => {
+    const colorAreaProps = useColorPickerAreaContext();
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getAreaThumbProps(colorAreaProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-area.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { ColorPickerAreaProvider } from './color-picker-area-context';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerArea = (props) => {
+    const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getAreaProps(channelProps), divprops);
+    return (<ColorPickerAreaProvider value={channelProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerAreaProvider>);
+};

package/source/color-picker/color-picker-channel-input.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerChannelInput = (props) => {
+    const [channelProps, inputProps] = createSplitProps()(props, [
+        'channel',
+        'orientation',
+    ]);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getChannelInputProps(channelProps), inputProps);
+    return <ark.input {...mergedProps}/>;
+};

package/source/color-picker/color-picker-channel-slider-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext({
+    hookName: 'useColorPickerChannelSliderContext',
+    providerName: '<ColorPickerChannelSliderProvider />',
+});

package/source/color-picker/color-picker-channel-slider-thumb.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerChannelSliderThumb = (props) => {
+    const sliderContext = useColorPickerChannelSliderContext();
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getChannelSliderThumbProps(sliderContext), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-channel-slider-track.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerChannelSliderTrack = (props) => {
+    const sliderContext = useColorPickerChannelSliderContext();
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(sliderContext), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-channel-slider.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerChannelSlider = (props) => {
+    const [channelProps, localProps] = createSplitProps()(props, [
+        'channel',
+        'orientation',
+    ]);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+    return (<ColorPickerChannelSliderProvider value={channelProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerChannelSliderProvider>);
+};

package/source/color-picker/color-picker-content.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
+};

package/source/color-picker/color-picker-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ColorPickerProvider, useColorPickerContext] = createContext({
+    hookName: 'useColorPickerContext',
+    providerName: '<ColorPickerProvider />',
+});

package/source/color-picker/color-picker-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerControl = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-eye-dropper-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerEyeDropperTrigger = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().eyeDropperTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/color-picker/color-picker-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerLabel = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/color-picker/color-picker-positioner.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerPositioner = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch-group.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerSwatchGroup = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().swatchGroupProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerSwatchTrigger = (props) => {
+    const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
+    return <ark.button {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerSwatch = (props) => {
+    const [colorSwatchProps, localProps] = createSplitProps()(props, [
+        'respectAlpha',
+        'value',
+    ]);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-transparency-grid.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerTransparencyGrid = (props) => {
+    const [gridProps, localProps] = createSplitProps()(props, ['size']);
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().getTransparencyGridProps(gridProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerTrigger = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/color-picker/color-picker-value-text.jsx

@@ -0,0 +1,9 @@
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerValueText = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => colorPickerAnatomy.build().valueText.attrs, props);
+    return <ark.span {...mergedProps}>{api().valueAsString || props.children}</ark.span>;
+};

package/source/color-picker/color-picker.jsx

@@ -0,0 +1,36 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { ColorPickerProvider } from './color-picker-context';
+import { useColorPicker, } from './use-color-picker';
+export const ColorPicker = (props) => {
+    const [colorPickerProps, localProps] = createSplitProps()(props, [
+        'autoFocus',
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'initialFocusEl',
+        'name',
+        'name',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onValueChange',
+        'onValueChangeEnd',
+        'open',
+        'positioning',
+        'readOnly',
+        'value',
+    ]);
+    const api = useColorPicker(colorPickerProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ColorPickerProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <input {...api().hiddenInputProps}/>
+    </ColorPickerProvider>);
+};

package/source/color-picker/index.js

@@ -0,0 +1,44 @@
+import { ColorPicker as ColorPickerRoot } from './color-picker';
+import { ColorPickerArea } from './color-picker-area';
+import { ColorPickerAreaBackground, } from './color-picker-area-background';
+import { useColorPickerAreaContext } from './color-picker-area-context';
+import { ColorPickerAreaThumb } from './color-picker-area-thumb';
+import { ColorPickerChannelInput, } from './color-picker-channel-input';
+import { ColorPickerChannelSlider, } from './color-picker-channel-slider';
+import { useColorPickerChannelSliderContext, } from './color-picker-channel-slider-context';
+import { ColorPickerChannelSliderThumb, } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack, } from './color-picker-channel-slider-track';
+import { ColorPickerContent } from './color-picker-content';
+import { useColorPickerContext } from './color-picker-context';
+import { ColorPickerControl } from './color-picker-control';
+import { ColorPickerEyeDropperTrigger, } from './color-picker-eye-dropper-trigger';
+import { ColorPickerLabel } from './color-picker-label';
+import { ColorPickerPositioner } from './color-picker-positioner';
+import { ColorPickerSwatch } from './color-picker-swatch';
+import { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
+import { ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger';
+import { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
+import { ColorPickerTrigger } from './color-picker-trigger';
+import { ColorPickerValueText } from './color-picker-value-text';
+const ColorPicker = Object.assign(ColorPickerRoot, {
+    Root: ColorPickerRoot,
+    Area: ColorPickerArea,
+    AreaBackground: ColorPickerAreaBackground,
+    AreaThumb: ColorPickerAreaThumb,
+    ChannelInput: ColorPickerChannelInput,
+    ChannelSlider: ColorPickerChannelSlider,
+    ChannelSliderThumb: ColorPickerChannelSliderThumb,
+    ChannelSliderTrack: ColorPickerChannelSliderTrack,
+    Content: ColorPickerContent,
+    Control: ColorPickerControl,
+    EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+    Label: ColorPickerLabel,
+    Positioner: ColorPickerPositioner,
+    Swatch: ColorPickerSwatch,
+    SwatchGroup: ColorPickerSwatchGroup,
+    SwatchTrigger: ColorPickerSwatchTrigger,
+    TransparencyGrid: ColorPickerTransparencyGrid,
+    Trigger: ColorPickerTrigger,
+    ValueText: ColorPickerValueText,
+});
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };

package/source/color-picker/use-color-picker.js

@@ -0,0 +1,15 @@
+import * as colorPicker from '@zag-js/color-picker';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId, splitProps } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useColorPicker = (props) => {
+    const [local, rest] = splitProps(props, ['value']);
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps(() => ({
+        id: createUniqueId(),
+        getRootNode,
+        value: local.value ? colorPicker.parse(local.value) : undefined,
+    }), rest);
+    const [state, send] = useMachine(colorPicker.machine(context), { context });
+    return createMemo(() => colorPicker.connect(state, send, normalizeProps));
+};

package/source/combobox/combobox-clear-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxClearTrigger = (props) => {
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().clearTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/combobox/combobox-content.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
+};

package/source/combobox/combobox-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../create-context';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const [ComboboxProvider, useComboboxContext] = createContext({
+    hookName: 'useComboboxContext',
+    providerName: '<ComboboxProvider />',
+});

package/source/combobox/combobox-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxControl = (props) => {
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/combobox/combobox-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxInput = (props) => {
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().inputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/source/combobox/combobox-item-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ComboboxItemProvider, useComboboxItemContext] = createContext({
+    hookName: 'useComboboxItemContext',
+    providerName: '<ComboboxItemProvider />',
+});

package/source/combobox/combobox-item-group-label.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxItemGroupLabel = (props) => {
+    const [labelProps, localProps] = createSplitProps()(props, ['for']);
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(() => api().getItemGroupLabelProps({ htmlFor: labelProps.for }), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/combobox/combobox-item-group.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxItemGroup = (props) => {
+    const [groupProps, localProps] = createSplitProps()(props, ['id']);
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().getItemGroupProps(groupProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/combobox/combobox-item-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+import { useComboboxItemContext } from './combobox-item-context';
+export const ComboboxItemIndicator = (props) => {
+    const combobox = useComboboxContext();
+    const itemProps = useComboboxItemContext();
+    const mergedProps = mergeProps(() => combobox().getItemIndicatorProps(itemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/combobox/combobox-item-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+import { useComboboxItemContext } from './combobox-item-context';
+export const ComboboxItemText = (props) => {
+    const api = useComboboxContext();
+    const itemProps = useComboboxItemContext();
+    const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
+    return <ark.span {...mergedProps}/>;
+};

package/source/combobox/combobox-item.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useComboboxContext } from './combobox-context';
+import { ComboboxItemProvider } from './combobox-item-context';
+export const ComboboxItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['item']);
+    const api = useComboboxContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+    return (<ComboboxItemProvider value={itemProps}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </ComboboxItemProvider>);
+};

package/source/combobox/combobox-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxLabel = (props) => {
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/combobox/combobox-positioner.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxPositioner = (props) => {
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().positionerProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/combobox/combobox-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './combobox-context';
+export const ComboboxTrigger = (props) => {
+    const combobox = useComboboxContext();
+    const mergedProps = mergeProps(() => combobox().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};