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

package/dist/source/clipboard/use-clipboard.jsx

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

package/dist/source/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().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

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

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

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../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, [
+        'dir',
+        'disabled',
+        'getRootNode',
+        '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/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/collapsible/collapsible.jsx

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

package/dist/source/collapsible/index.js

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

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

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

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

@@ -0,0 +1,23 @@
+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 } from '../environment';
+import { splitRenderStrategyProps } from '../render-strategy';
+export const useCollapsible = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, collapsibleProps);
+    const [state, send] = useMachine(collapsible.machine(context), { context });
+    const [wasVisible, setWasVisible] = createSignal(false);
+    createEffect(() => {
+        const isPresent = api().isVisible;
+        if (isPresent)
+            setWasVisible(true);
+    });
+    const api = createMemo(() => collapsible.connect(state, send, normalizeProps));
+    return createMemo(() => ({
+        ...api(),
+        isUnmounted: (!api().isVisible && !wasVisible() && renderStrategyProps.lazyMount) ||
+            (renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()),
+    }));
+};

package/dist/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 './use-color-picker-area-context';
+import { useColorPickerContext } from './use-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/dist/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 './use-color-picker-area-context';
+import { useColorPickerContext } from './use-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/dist/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 './use-color-picker-area-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 (<ColorPickerAreaProvider value={channelProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerAreaProvider>);
+};

package/dist/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 './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/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 './use-color-picker-channel-slider-context';
+import { useColorPickerContext } from './use-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/dist/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 './use-color-picker-channel-slider-context';
+import { useColorPickerContext } from './use-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/dist/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 './use-color-picker-channel-slider-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 (<ColorPickerChannelSliderProvider value={channelProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerChannelSliderProvider>);
+};

package/dist/source/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().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/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/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/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/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/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/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/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().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

@@ -0,0 +1,41 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../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',
+        'dir',
+        'disabled',
+        'format',
+        'getRootNode',
+        '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().isOpen })));
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<ColorPickerProvider value={api}>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+      <input {...api().hiddenInputProps}/>
+    </ColorPickerProvider>);
+};

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

package/dist/source/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 { useColorPickerSwatchContext } from './use-color-picker-swatch-context';
+export const ColorPickerSwatchIndicator = (props) => {
+    const api = useColorPickerContext();
+    const swatchProps = useColorPickerSwatchContext();
+    const mergedProps = mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../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/color-picker/color-picker-swatch.jsx

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

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

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

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

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

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

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

package/dist/source/color-picker/use-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/dist/source/color-picker/use-color-picker-context.js

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

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

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

package/dist/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/dist/source/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/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().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

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

package/dist/source/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/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/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/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 './use-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/dist/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 './use-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}/>;
+};