@ark-ui/solid 3.0.0-0 → 3.0.0-2

package/dist/source/components/collapsible/collapsible-content.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useCollapsibleContext } from './use-collapsible-context';
+export const CollapsibleContent = (props) => {
+    const api = useCollapsibleContext();
+    const mergedProps = mergeProps(() => api().contentProps, props);
+    return (<Show when={!api().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/collapsible/collapsible-context.jsx

@@ -0,0 +1,2 @@
+import { useCollapsibleContext } from './use-collapsible-context';
+export const CollapsibleContext = (props) => props.children(useCollapsibleContext());

package/dist/source/components/collapsible/collapsible-root.jsx

@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useCollapsible } from './use-collapsible';
+import { CollapsibleProvider } from './use-collapsible-context';
+export const CollapsibleRoot = (props) => {
+    const [useCollapsibleProps, localProps] = createSplitProps()(props, [
+        'disabled',
+        'id',
+        'ids',
+        'lazyMount',
+        'onExitComplete',
+        'onOpenChange',
+        'open',
+        'unmountOnExit',
+    ]);
+    const api = useCollapsible(useCollapsibleProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<CollapsibleProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </CollapsibleProvider>);
+};

package/dist/source/components/collapsible/collapsible-trigger.jsx

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

package/dist/source/components/collapsible/collapsible.js

@@ -0,0 +1,4 @@
+export { CollapsibleContent as Content, } from './collapsible-content';
+export { CollapsibleContext as Context, } from './collapsible-context';
+export { CollapsibleRoot as Root } from './collapsible-root';
+export { CollapsibleTrigger as Trigger, } from './collapsible-trigger';

package/dist/source/components/collapsible/index.js

@@ -0,0 +1,6 @@
+export { CollapsibleContent } from './collapsible-content';
+export { CollapsibleContext } from './collapsible-context';
+export { CollapsibleRoot } from './collapsible-root';
+export { CollapsibleTrigger } from './collapsible-trigger';
+export { useCollapsibleContext } from './use-collapsible-context';
+export * as Collapsible from './collapsible';

package/dist/source/components/collapsible/use-collapsible-context.js

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

package/dist/source/components/collapsible/use-collapsible.js

@@ -0,0 +1,29 @@
+import * as collapsible from '@zag-js/collapsible';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createEffect, createMemo, createSignal, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { splitRenderStrategyProps } from '../../utils/render-strategy';
+export const useCollapsible = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+    const context = mergeProps({
+        id: createUniqueId(),
+        dir: locale().dir,
+        getRootNode,
+        'open.controlled': props.open !== undefined,
+    }, collapsibleProps);
+    const [state, send] = useMachine(collapsible.machine(context), { context });
+    const [wasVisible, setWasVisible] = createSignal(false);
+    createEffect(() => {
+        const isPresent = api().visible;
+        if (isPresent)
+            setWasVisible(true);
+    });
+    const api = createMemo(() => collapsible.connect(state, send, normalizeProps));
+    return createMemo(() => ({
+        ...api(),
+        unmounted: (!api().visible && !wasVisible() && renderStrategyProps.lazyMount) ||
+            (renderStrategyProps.unmountOnExit && !api().visible && wasVisible()),
+    }));
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { ColorPickerAreaPropsProvider } from './use-color-picker-area-props-context';
+import { useColorPickerContext } from './use-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 (<ColorPickerAreaPropsProvider value={channelProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerAreaPropsProvider>);
+};

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useColorPickerContext } from './use-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/dist/source/components/color-picker/color-picker-channel-slider-thumb.jsx

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

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

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

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

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { ColorPickerChannelPropsProvider } from './use-color-picker-channel-props-context';
+import { useColorPickerContext } from './use-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 (<ColorPickerChannelPropsProvider value={channelProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerChannelPropsProvider>);
+};

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerContent = (props) => {
+    const api = useColorPickerContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/color-picker/color-picker-context.jsx

@@ -0,0 +1,2 @@
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerContext = (props) => props.children(useColorPickerContext());

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

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

package/dist/source/components/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 './use-color-picker-context';
+export const ColorPickerEyeDropperTrigger = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().eyeDropperTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/color-picker/color-picker-format-select.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Index } from 'solid-js';
+import { ark } from '../factory';
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerFormatSelect = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().formatSelectProps, props);
+    return (<ark.select {...mergedProps}>
+      <Index each={['rgba', 'hsla', 'hsba']}>
+        {(format) => <ark.option value={format()}>{format()}</ark.option>}
+      </Index>
+    </ark.select>);
+};

package/dist/source/components/color-picker/color-picker-format-trigger.jsx

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

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

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

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerPositioner = (props) => {
+    const api = useColorPickerContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/color-picker/color-picker-root.jsx

@@ -0,0 +1,39 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { useColorPicker } from './use-color-picker';
+import { ColorPickerProvider } from './use-color-picker-context';
+export const ColorPickerRoot = (props) => {
+    const [presenceProps, colorPickerProps] = splitPresenceProps(props);
+    const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
+        'closeOnSelect',
+        'disabled',
+        'format',
+        'id',
+        'ids',
+        'initialFocusEl',
+        'name',
+        'name',
+        'onFocusOutside',
+        'onFormatChange',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onValueChange',
+        'onValueChangeEnd',
+        'open',
+        'positioning',
+        'readOnly',
+        'value',
+    ]);
+    const api = useColorPicker(useColorPickerProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<ColorPickerProvider value={api}>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+      <input {...api().hiddenInputProps}/>
+    </ColorPickerProvider>);
+};

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

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

package/dist/source/components/color-picker/color-picker-swatch-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './use-color-picker-context';
+import { useColorPickerSwatchPropsContext } from './use-color-picker-swatch-props-context';
+export const ColorPickerSwatchIndicator = (props) => {
+    const api = useColorPickerContext();
+    const swatchProps = useColorPickerSwatchPropsContext();
+    const mergedProps = mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
+    return <ark.div {...mergedProps}/>;
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useColorPickerContext } from './use-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/dist/source/components/color-picker/color-picker-trigger.jsx

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

package/dist/source/components/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 './use-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/dist/source/components/color-picker/color-picker-view.jsx

@@ -0,0 +1,13 @@
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerView = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => colorPickerAnatomy.build().view.attrs, props);
+    // TODO @segunadebayo
+    return (<Show when={api().format === props.format}>
+      <ark.div data-format={props.format} {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/color-picker/color-picker.js

@@ -0,0 +1,24 @@
+export { ColorPickerArea as Area, } from './color-picker-area';
+export { ColorPickerAreaBackground as AreaBackground, } from './color-picker-area-background';
+export { ColorPickerAreaThumb as AreaThumb, } from './color-picker-area-thumb';
+export { ColorPickerChannelInput as ChannelInput, } from './color-picker-channel-input';
+export { ColorPickerChannelSlider as ChannelSlider, } from './color-picker-channel-slider';
+export { ColorPickerChannelSliderThumb as ChannelSliderThumb, } from './color-picker-channel-slider-thumb';
+export { ColorPickerChannelSliderTrack as ChannelSliderTrack, } from './color-picker-channel-slider-track';
+export { ColorPickerContent as Content, } from './color-picker-content';
+export { ColorPickerContext as Context, } from './color-picker-context';
+export { ColorPickerControl as Control, } from './color-picker-control';
+export { ColorPickerEyeDropperTrigger as EyeDropperTrigger, } from './color-picker-eye-dropper-trigger';
+export { ColorPickerFormatSelect as FormatSelect, } from './color-picker-format-select';
+export { ColorPickerFormatTrigger as FormatTrigger, } from './color-picker-format-trigger';
+export { ColorPickerLabel as Label, } from './color-picker-label';
+export { ColorPickerPositioner as Positioner, } from './color-picker-positioner';
+export { ColorPickerRoot as Root, } from './color-picker-root';
+export { ColorPickerSwatch as Swatch, } from './color-picker-swatch';
+export { ColorPickerSwatchGroup as SwatchGroup, } from './color-picker-swatch-group';
+export { ColorPickerSwatchIndicator as SwatchIndicator, } from './color-picker-swatch-indicator';
+export { ColorPickerSwatchTrigger as SwatchTrigger, } from './color-picker-swatch-trigger';
+export { ColorPickerTransparencyGrid as TransparencyGrid, } from './color-picker-transparency-grid';
+export { ColorPickerTrigger as Trigger, } from './color-picker-trigger';
+export { ColorPickerValueText as ValueText, } from './color-picker-value-text';
+export { ColorPickerView as View, } from './color-picker-view';

package/dist/source/components/color-picker/index.js

@@ -0,0 +1,26 @@
+export { ColorPickerArea } from './color-picker-area';
+export { ColorPickerAreaBackground, } from './color-picker-area-background';
+export { ColorPickerAreaThumb } from './color-picker-area-thumb';
+export { ColorPickerChannelInput, } from './color-picker-channel-input';
+export { ColorPickerChannelSlider, } from './color-picker-channel-slider';
+export { ColorPickerChannelSliderThumb, } from './color-picker-channel-slider-thumb';
+export { ColorPickerChannelSliderTrack, } from './color-picker-channel-slider-track';
+export { ColorPickerContent } from './color-picker-content';
+export { ColorPickerContext } from './color-picker-context';
+export { ColorPickerControl } from './color-picker-control';
+export { ColorPickerEyeDropperTrigger, } from './color-picker-eye-dropper-trigger';
+export { ColorPickerFormatSelect, } from './color-picker-format-select';
+export { ColorPickerFormatTrigger, } from './color-picker-format-trigger';
+export { ColorPickerLabel } from './color-picker-label';
+export { ColorPickerPositioner } from './color-picker-positioner';
+export { ColorPickerRoot } from './color-picker-root';
+export { ColorPickerSwatch } from './color-picker-swatch';
+export { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
+export { ColorPickerSwatchIndicator, } from './color-picker-swatch-indicator';
+export { ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger';
+export { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
+export { ColorPickerTrigger } from './color-picker-trigger';
+export { ColorPickerValueText } from './color-picker-value-text';
+export { ColorPickerView } from './color-picker-view';
+export { useColorPickerContext } from './use-color-picker-context';
+export * as ColorPicker from './color-picker';

package/dist/source/components/color-picker/use-color-picker-area-props-context.js

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

package/dist/source/components/color-picker/use-color-picker-channel-props-context.js

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

package/dist/source/components/color-picker/use-color-picker-context.js

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

package/dist/source/components/color-picker/use-color-picker-swatch-props-context.js

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

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

@@ -0,0 +1,18 @@
+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, useLocaleContext } from '../../providers';
+export const useColorPicker = (props) => {
+    const [local, rest] = splitProps(props, ['value']);
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps(() => ({
+        id: createUniqueId(),
+        dir: locale().dir,
+        getRootNode,
+        'open.controlled': props.open !== undefined,
+        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/dist/source/components/combobox/combobox-clear-trigger.jsx

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

package/dist/source/components/combobox/combobox-content.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useComboboxContext } from './use-combobox-context';
+export const ComboboxContent = (props) => {
+    const api = useComboboxContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/combobox/combobox-context.jsx

@@ -0,0 +1,2 @@
+import { useComboboxContext } from './use-combobox-context';
+export const ComboboxContext = (props) => props.children(useComboboxContext());

package/dist/source/components/combobox/combobox-control.jsx

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

package/dist/source/components/combobox/combobox-input.jsx

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

package/dist/source/components/combobox/combobox-item-context.jsx

@@ -0,0 +1,2 @@
+import { useComboboxItemContext } from './use-combobox-item-context';
+export const ComboboxItemContext = (props) => props.children(useComboboxItemContext());

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useComboboxContext } from './use-combobox-context';
+import { useComboboxItemGroupPropsContext } from './use-combobox-item-group-props-context';
+export const ComboboxItemGroupLabel = (props) => {
+    const combobox = useComboboxContext();
+    const itemGroupProps = useComboboxItemGroupPropsContext();
+    const mergedProps = mergeProps(() => combobox().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createUniqueId } from 'solid-js';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useComboboxContext } from './use-combobox-context';
+import { ComboboxItemGroupPropsProvider } from './use-combobox-item-group-props-context';
+export const ComboboxItemGroup = (props) => {
+    const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+    const combobox = useComboboxContext();
+    const itemGroupProps = mergeProps({ id: createUniqueId() }, _itemGroupProps);
+    const mergedProps = mergeProps(() => combobox().getItemGroupProps(itemGroupProps), localProps);
+    return (<ComboboxItemGroupPropsProvider value={itemGroupProps}>
+      <ark.div {...mergedProps}/>
+    </ComboboxItemGroupPropsProvider>);
+};

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

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