@ark-ui/solid 3.2.2 → 3.4.0

package/dist/source/components/accordion/accordion.js

@@ -1,8 +1,8 @@
 export { AccordionContext as Context, } from './accordion-context';
-export { AccordionItem as Item } from './accordion-item';
+export { AccordionItem as Item, } from './accordion-item';
 export { AccordionItemContent as ItemContent, } from './accordion-item-content';
 export { AccordionItemContext as ItemContext, } from './accordion-item-context';
 export { AccordionItemIndicator as ItemIndicator, } from './accordion-item-indicator';
 export { AccordionItemTrigger as ItemTrigger, } from './accordion-item-trigger';
-export { AccordionRoot as Root } from './accordion-root';
+export { AccordionRoot as Root, } from './accordion-root';
 export { AccordionRootProvider as RootProvider, } from './accordion-root-provider';

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

@@ -1,11 +1,11 @@
-export { AccordionContext } from './accordion-context';
-export { AccordionItem } from './accordion-item';
-export { AccordionItemContent } from './accordion-item-content';
-export { AccordionItemContext } from './accordion-item-context';
+export { AccordionContext, } from './accordion-context';
+export { AccordionItem, } from './accordion-item';
+export { AccordionItemContent, } from './accordion-item-content';
+export { AccordionItemContext, } from './accordion-item-context';
 export { AccordionItemIndicator, } from './accordion-item-indicator';
-export { AccordionItemTrigger } from './accordion-item-trigger';
-export { AccordionRoot } from './accordion-root';
-export { AccordionRootProvider } from './accordion-root-provider';
+export { AccordionItemTrigger, } from './accordion-item-trigger';
+export { AccordionRoot, } from './accordion-root';
+export { AccordionRootProvider, } from './accordion-root-provider';
 export { useAccordion } from './use-accordion';
 export { useAccordionContext } from './use-accordion-context';
 export { useAccordionItemContext } from './use-accordion-item-context';

package/dist/source/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 export { AvatarContext as Context } from './avatar-context';
 export { AvatarFallback as Fallback, } from './avatar-fallback';
-export { AvatarImage as Image } from './avatar-image';
-export { AvatarRoot as Root } from './avatar-root';
+export { AvatarImage as Image, } from './avatar-image';
+export { AvatarRoot as Root, } from './avatar-root';
 export { AvatarRootProvider as RootProvider, } from './avatar-root-provider';

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

@@ -1,8 +1,8 @@
-export { AvatarContext } from './avatar-context';
-export { AvatarFallback } from './avatar-fallback';
-export { AvatarImage } from './avatar-image';
-export { AvatarRoot } from './avatar-root';
-export { AvatarRootProvider } from './avatar-root-provider';
+export { AvatarContext, } from './avatar-context';
+export { AvatarFallback, } from './avatar-fallback';
+export { AvatarImage, } from './avatar-image';
+export { AvatarRoot, } from './avatar-root';
+export { AvatarRootProvider, } from './avatar-root-provider';
 export { useAvatar } from './use-avatar';
 export { useAvatarContext } from './use-avatar-context';
 export * as Avatar from './avatar';

package/dist/source/components/carousel/carousel.js

@@ -2,10 +2,10 @@ export { CarouselContext as Context, } from './carousel-context';
 export { CarouselControl as Control, } from './carousel-control';
 export { CarouselIndicator as Indicator, } from './carousel-indicator';
 export { CarouselIndicatorGroup as IndicatorGroup, } from './carousel-indicator-group';
-export { CarouselItem as Item } from './carousel-item';
+export { CarouselItem as Item, } from './carousel-item';
 export { CarouselItemGroup as ItemGroup, } from './carousel-item-group';
 export { CarouselNextTrigger as NextTrigger, } from './carousel-next-trigger';
 export { CarouselPrevTrigger as PrevTrigger, } from './carousel-prev-trigger';
-export { CarouselRoot as Root } from './carousel-root';
+export { CarouselRoot as Root, } from './carousel-root';
 export { CarouselRootProvider as RootProvider, } from './carousel-root-provider';
 export { CarouselViewport as Viewport, } from './carousel-viewport';

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

@@ -1,14 +1,14 @@
-export { CarouselContext } from './carousel-context';
-export { CarouselControl } from './carousel-control';
-export { CarouselIndicator } from './carousel-indicator';
+export { CarouselContext, } from './carousel-context';
+export { CarouselControl, } from './carousel-control';
+export { CarouselIndicator, } from './carousel-indicator';
 export { CarouselIndicatorGroup, } from './carousel-indicator-group';
-export { CarouselItem } from './carousel-item';
-export { CarouselItemGroup } from './carousel-item-group';
-export { CarouselNextTrigger } from './carousel-next-trigger';
-export { CarouselPrevTrigger } from './carousel-prev-trigger';
-export { CarouselRoot } from './carousel-root';
-export { CarouselRootProvider } from './carousel-root-provider';
-export { CarouselViewport } from './carousel-viewport';
+export { CarouselItem, } from './carousel-item';
+export { CarouselItemGroup, } from './carousel-item-group';
+export { CarouselNextTrigger, } from './carousel-next-trigger';
+export { CarouselPrevTrigger, } from './carousel-prev-trigger';
+export { CarouselRoot, } from './carousel-root';
+export { CarouselRootProvider, } from './carousel-root-provider';
+export { CarouselViewport, } from './carousel-viewport';
 export { useCarousel } from './use-carousel';
 export { useCarouselContext } from './use-carousel-context';
 export * as Carousel from './carousel';

package/dist/source/components/checkbox/checkbox-group.jsx

@@ -0,0 +1,18 @@
+import { checkboxAnatomy } from '@ark-ui/anatomy';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useCheckboxGroup } from './use-checkbox-group';
+import { CheckboxGroupContextProvider } from './use-checkbox-group-context';
+export const CheckboxGroup = (props) => {
+    const [checkboxGroupProps, localProps] = createSplitProps()(props, [
+        'defaultValue',
+        'value',
+        'onValueChange',
+        'disabled',
+        'readOnly',
+    ]);
+    const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
+    return (<CheckboxGroupContextProvider value={checkboxGroup}>
+      <ark.div role="group" {...localProps} {...checkboxAnatomy.build().group.attrs}/>
+    </CheckboxGroupContextProvider>);
+};

package/dist/source/components/checkbox/checkbox-hidden-input.jsx

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { useFieldContext } from '../field';
 import { useCheckboxContext } from './use-checkbox-context';
 export const CheckboxHiddenInput = (props) => {
     const checkbox = useCheckboxContext();
     const mergedProps = mergeProps(() => checkbox().getHiddenInputProps(), props);
-    return <ark.input {...mergedProps}/>;
+    const field = useFieldContext();
+    return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps}/>;
 };

package/dist/source/components/checkbox/checkbox.js

@@ -1,7 +1,8 @@
 export { CheckboxContext as Context, } from './checkbox-context';
 export { CheckboxControl as Control, } from './checkbox-control';
+export { CheckboxGroup as Group, } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, } from './checkbox-indicator';
-export { CheckboxLabel as Label } from './checkbox-label';
-export { CheckboxRoot as Root } from './checkbox-root';
+export { CheckboxLabel as Label, } from './checkbox-label';
+export { CheckboxRoot as Root, } from './checkbox-root';
 export { CheckboxRootProvider as RootProvider, } from './checkbox-root-provider';

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

@@ -1,10 +1,13 @@
-export { CheckboxContext } from './checkbox-context';
-export { CheckboxControl } from './checkbox-control';
-export { CheckboxHiddenInput } from './checkbox-hidden-input';
-export { CheckboxIndicator } from './checkbox-indicator';
-export { CheckboxLabel } from './checkbox-label';
-export { CheckboxRoot } from './checkbox-root';
-export { CheckboxRootProvider } from './checkbox-root-provider';
+export { CheckboxContext, } from './checkbox-context';
+export { CheckboxControl, } from './checkbox-control';
+export { CheckboxGroup, } from './checkbox-group';
+export { CheckboxHiddenInput, } from './checkbox-hidden-input';
+export { CheckboxIndicator, } from './checkbox-indicator';
+export { CheckboxLabel, } from './checkbox-label';
+export { CheckboxRoot, } from './checkbox-root';
+export { CheckboxRootProvider, } from './checkbox-root-provider';
 export { useCheckbox } from './use-checkbox';
 export { useCheckboxContext } from './use-checkbox-context';
+export { useCheckboxGroup, } from './use-checkbox-group';
+export { useCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

package/dist/source/components/checkbox/use-checkbox-group-context.jsx

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
+    hookName: 'useCheckboxGroupContext',
+    providerName: '<CheckboxGroupProvider />',
+    strict: false,
+});

package/dist/source/components/checkbox/use-checkbox-group.js

@@ -0,0 +1,52 @@
+import { createMemo } from 'solid-js';
+import { useControllableState } from '../../utils/use-controllable-state';
+export function useCheckboxGroup(props = {}) {
+    const interative = createMemo(() => !(props.disabled || props.readOnly));
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue || [],
+        onChange: props.onValueChange,
+    });
+    return createMemo(() => {
+        const isChecked = (val) => {
+            return value().some((v) => String(v) === String(val));
+        };
+        const toggleValue = (val) => {
+            isChecked(val) ? removeValue(val) : addValue(val);
+        };
+        const addValue = (val) => {
+            if (!interative())
+                return;
+            if (isChecked(val))
+                return;
+            setValue(value().concat(val));
+        };
+        const removeValue = (val) => {
+            if (!interative())
+                return;
+            setValue(value().filter((v) => String(v) !== String(val)));
+        };
+        const getItemProps = (itemProps) => {
+            return {
+                checked: itemProps.value != null ? isChecked(itemProps.value) : undefined,
+                onCheckedChange() {
+                    if (itemProps.value != null) {
+                        toggleValue(itemProps.value);
+                    }
+                },
+                disabled: props.disabled,
+                readOnly: props.readOnly,
+            };
+        };
+        return {
+            isChecked,
+            value,
+            disabled: props.disabled,
+            readOnly: props.readOnly,
+            setValue,
+            addValue,
+            toggleValue,
+            getItemProps,
+        };
+    });
+}

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

@@ -1,17 +1,32 @@
 import * as checkbox from '@zag-js/checkbox';
-import { normalizeProps, useMachine } from '@zag-js/solid';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
-export const useCheckbox = (props) => {
+import { useFieldContext } from '../field';
+import { useCheckboxGroupContext } from './use-checkbox-group-context';
+export const useCheckbox = (ownProps) => {
+    const checkboxGroup = useCheckboxGroupContext();
+    const props = createMemo(() => {
+        return mergeProps(ownProps, checkboxGroup?.().getItemProps({ value: ownProps.value }) ?? {});
+    }, [ownProps, checkboxGroup]);
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
+    const field = useFieldContext();
     const context = createMemo(() => ({
         id,
+        ids: {
+            label: field?.().ids.label,
+            hiddenInput: field?.().ids.control,
+        },
+        disabled: field?.().disabled,
+        readOnly: field?.().readOnly,
+        invalid: field?.().invalid,
+        required: field?.().required,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
-        checked: props.defaultChecked,
-        ...props,
+        checked: props().defaultChecked,
+        ...props(),
     }));
     const [state, send] = useMachine(checkbox.machine(context()), { context });
     return createMemo(() => checkbox.connect(state, send, normalizeProps));

package/dist/source/components/clipboard/clipboard.js

@@ -1,8 +1,8 @@
 export { ClipboardContext as Context, } from './clipboard-context';
 export { ClipboardControl as Control, } from './clipboard-control';
 export { ClipboardIndicator as Indicator, } from './clipboard-indicator';
-export { ClipboardInput as Input } from './clipboard-input';
-export { ClipboardLabel as Label } from './clipboard-label';
-export { ClipboardRoot as Root } from './clipboard-root';
+export { ClipboardInput as Input, } from './clipboard-input';
+export { ClipboardLabel as Label, } from './clipboard-label';
+export { ClipboardRoot as Root, } from './clipboard-root';
 export { ClipboardRootProvider as RootProvider, } from './clipboard-root-provider';
 export { ClipboardTrigger as Trigger, } from './clipboard-trigger';

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

@@ -1,11 +1,11 @@
-export { ClipboardContext } from './clipboard-context';
-export { ClipboardControl } from './clipboard-control';
-export { ClipboardIndicator } from './clipboard-indicator';
-export { ClipboardInput } from './clipboard-input';
-export { ClipboardLabel } from './clipboard-label';
-export { ClipboardRoot } from './clipboard-root';
-export { ClipboardRootProvider } from './clipboard-root-provider';
-export { ClipboardTrigger } from './clipboard-trigger';
+export { ClipboardContext, } from './clipboard-context';
+export { ClipboardControl, } from './clipboard-control';
+export { ClipboardIndicator, } from './clipboard-indicator';
+export { ClipboardInput, } from './clipboard-input';
+export { ClipboardLabel, } from './clipboard-label';
+export { ClipboardRoot, } from './clipboard-root';
+export { ClipboardRootProvider, } from './clipboard-root-provider';
+export { ClipboardTrigger, } from './clipboard-trigger';
 export { useClipboard } from './use-clipboard';
 export { useClipboardContext } from './use-clipboard-context';
 export * as Clipboard from './clipboard';

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

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

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

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

package/dist/source/components/color-picker/color-picker-channel-slider-label.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 ColorPickerChannelSliderLabel = (props) => {
+    const colorPicker = useColorPickerContext();
+    const channelProps = useColorPickerChannelPropsContext();
+    const mergedProps = mergeProps(() => colorPicker().getChannelSliderLabelProps(channelProps), props);
+    return <ark.label {...mergedProps}/>;
+};

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

@@ -2,9 +2,12 @@ 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';
+import { useColorPickerFormatPropsContext } from './use-color-picker-format-context';
 export const ColorPickerChannelSliderThumb = (props) => {
     const api = useColorPickerContext();
+    const formatProps = useColorPickerFormatPropsContext();
     const channelProps = useColorPickerChannelPropsContext();
-    const mergedProps = mergeProps(() => api().getChannelSliderThumbProps(channelProps), props);
+    const channelSliderProps = mergeProps(channelProps, formatProps);
+    const mergedProps = mergeProps(() => api().getChannelSliderThumbProps(channelSliderProps), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -2,9 +2,12 @@ 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';
+import { useColorPickerFormatPropsContext } from './use-color-picker-format-context';
 export const ColorPickerChannelSliderTrack = (props) => {
     const api = useColorPickerContext();
+    const formatProps = useColorPickerFormatPropsContext();
     const channelProps = useColorPickerChannelPropsContext();
-    const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(channelProps), props);
+    const channelSliderProps = mergeProps(channelProps, formatProps);
+    const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(channelSliderProps), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { useLocaleContext } from '../../providers';
+import { ark } from '../factory';
+import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context';
+import { useColorPickerContext } from './use-color-picker-context';
+export const ColorPickerChannelSliderValueText = (props) => {
+    const colorPicker = useColorPickerContext();
+    const localeContext = useLocaleContext();
+    const channelProps = useColorPickerChannelPropsContext();
+    const mergedProps = mergeProps(() => colorPicker().getChannelSliderValueTextProps(channelProps), props);
+    return (<ark.span {...mergedProps}>
+      {props.children ||
+            colorPicker().getChannelValueText(channelProps.channel, localeContext().locale)}
+    </ark.span>);
+};

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

@@ -3,13 +3,16 @@ 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';
+import { useColorPickerFormatPropsContext } from './use-color-picker-format-context';
 export const ColorPickerChannelSlider = (props) => {
     const [channelProps, localProps] = createSplitProps()(props, [
         'channel',
         'orientation',
     ]);
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().getChannelSliderProps(channelProps), localProps);
+    const formatProps = useColorPickerFormatPropsContext();
+    const channelSliderProps = mergeProps(channelProps, formatProps);
+    const mergedProps = mergeProps(() => api().getChannelSliderProps(channelSliderProps), localProps);
     return (<ColorPickerChannelPropsProvider value={channelProps}>
       <ark.div {...mergedProps}/>
     </ColorPickerChannelPropsProvider>);

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

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { useFieldContext } from '../field';
 import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerHiddenInput = (props) => {
     const colorPicker = useColorPickerContext();
     const mergedProps = mergeProps(() => colorPicker().getHiddenInputProps(), props);
-    return <ark.input {...mergedProps}/>;
+    const field = useFieldContext();
+    return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps}/>;
 };

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

@@ -27,6 +27,7 @@ export const ColorPickerRoot = (props) => {
         'open',
         'positioning',
         'readOnly',
+        'required',
         'value',
     ]);
     const api = useColorPicker(useColorPickerProps);

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

@@ -0,0 +1,20 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+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 ColorPickerValueSwatch = (props) => {
+    const [{ respectAlpha }, localProps] = createSplitProps()(props, [
+        'respectAlpha',
+    ]);
+    const colorPicker = useColorPickerContext();
+    const swatchProps = createMemo(() => ({
+        respectAlpha,
+        value: colorPicker().value,
+    }));
+    const mergedProps = mergeProps(() => colorPicker().getSwatchProps(swatchProps()), localProps);
+    return (<ColorPickerSwatchPropsProvider value={swatchProps()}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerSwatchPropsProvider>);
+};

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

@@ -1,12 +1,17 @@
 import { colorPickerAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
+import { createSplitProps } from '../../utils/create-split-props';
 import { ark } from '../factory';
 import { useColorPickerContext } from './use-color-picker-context';
+import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context';
 export const ColorPickerView = (props) => {
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => colorPickerAnatomy.build().view.attrs, props);
-    return (<Show when={api().format === props.format}>
-      <ark.div data-format={props.format} {...mergedProps}/>
-    </Show>);
+    const [formatProps, localProps] = createSplitProps()(props, ['format']);
+    const mergedProps = mergeProps(() => colorPickerAnatomy.build().view.attrs, localProps);
+    return (<ColorPickerFormatPropsProvider value={formatProps}>
+      <Show when={api().format === props.format}>
+        <ark.div data-format={props.format} {...mergedProps}/>
+      </Show>
+    </ColorPickerFormatPropsProvider>);
 };

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

@@ -3,23 +3,27 @@ export { ColorPickerAreaBackground as AreaBackground, } from './color-picker-are
 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 { ColorPickerChannelSliderLabel as ChannelSliderLabel, } from './color-picker-channel-slider-label';
 export { ColorPickerChannelSliderThumb as ChannelSliderThumb, } from './color-picker-channel-slider-thumb';
 export { ColorPickerChannelSliderTrack as ChannelSliderTrack, } from './color-picker-channel-slider-track';
+export { ColorPickerChannelSliderValueText as ChannelSliderValueText, } from './color-picker-channel-slider-value-text';
 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 { ColorPickerHiddenInput as HiddenInput, } from './color-picker-hidden-input';
 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 { ColorPickerRootProvider as RootProvider, } from './color-picker-root-provider';
 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 { ColorPickerValueSwatch as ValueSwatch, } from './color-picker-value-swatch';
 export { ColorPickerValueText as ValueText, } from './color-picker-value-text';
 export { ColorPickerView as View, } from './color-picker-view';
-export { ColorPickerHiddenInput as HiddenInput, } from './color-picker-hidden-input';

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

@@ -1,29 +1,32 @@
-export { ColorPickerArea } from './color-picker-area';
+export { ColorPickerArea, } from './color-picker-area';
 export { ColorPickerAreaBackground, } from './color-picker-area-background';
-export { ColorPickerAreaThumb } from './color-picker-area-thumb';
+export { ColorPickerAreaThumb, } from './color-picker-area-thumb';
 export { ColorPickerChannelInput, } from './color-picker-channel-input';
 export { ColorPickerChannelSlider, } from './color-picker-channel-slider';
+export { ColorPickerChannelSliderLabel, } from './color-picker-channel-slider-label';
 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 { ColorPickerChannelSliderValueText, } from './color-picker-channel-slider-value-text';
+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 { ColorPickerHiddenInput, } from './color-picker-hidden-input';
-export { ColorPickerLabel } from './color-picker-label';
-export { ColorPickerPositioner } from './color-picker-positioner';
-export { ColorPickerRoot } from './color-picker-root';
+export { ColorPickerLabel, } from './color-picker-label';
+export { ColorPickerPositioner, } from './color-picker-positioner';
+export { ColorPickerRoot, } from './color-picker-root';
 export { ColorPickerRootProvider, } from './color-picker-root-provider';
-export { ColorPickerSwatch } from './color-picker-swatch';
+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 { ColorPickerTrigger, } from './color-picker-trigger';
+export { ColorPickerValueSwatch, } from './color-picker-value-swatch';
+export { ColorPickerValueText, } from './color-picker-value-text';
+export { ColorPickerView, } from './color-picker-view';
 export { useColorPicker, } from './use-color-picker';
 export { useColorPickerContext } from './use-color-picker-context';
 export * as ColorPicker from './color-picker';

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

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [ColorPickerFormatPropsProvider, useColorPickerFormatPropsContext] = createContext({
+    hookName: 'useColorPickerFormatPropsContext',
+    providerName: '<ColorPickerFormatPropsProvider />',
+    strict: false,
+});

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

@@ -2,13 +2,22 @@ import * as colorPicker from '@zag-js/color-picker';
 import { normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
+import { useFieldContext } from '../field';
 export const useColorPicker = (props) => {
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
+    const field = useFieldContext();
     const id = createUniqueId();
     const context = createMemo(() => ({
         id,
+        ids: {
+            label: field?.().ids.label,
+            input: field?.().ids.control,
+        },
         dir: locale().dir,
+        disabled: field?.().disabled,
+        readOnly: field?.().readOnly,
+        required: field?.().required,
         getRootNode: environment().getRootNode,
         open: props.defaultOpen,
         'open.controlled': props.open !== undefined,

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

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { useFieldContext } from '../field';
 import { useComboboxContext } from './use-combobox-context';
 export const ComboboxInput = (props) => {
     const combobox = useComboboxContext();
     const mergedProps = mergeProps(() => combobox().getInputProps(), props);
-    return <ark.input {...mergedProps}/>;
+    const field = useFieldContext();
+    return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps}/>;
 };

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

@@ -45,6 +45,7 @@ export const ComboboxRoot = (props) => {
         'placeholder',
         'positioning',
         'readOnly',
+        'required',
         'scrollToIndexFn',
         'selectionBehavior',
         'translations',

package/dist/source/components/combobox/combobox.js

@@ -2,16 +2,16 @@ export { ComboboxClearTrigger as ClearTrigger, } from './combobox-clear-trigger'
 export { ComboboxContent as Content, } from './combobox-content';
 export { ComboboxContext as Context, } from './combobox-context';
 export { ComboboxControl as Control, } from './combobox-control';
-export { ComboboxInput as Input } from './combobox-input';
-export { ComboboxItem as Item } from './combobox-item';
+export { ComboboxInput as Input, } from './combobox-input';
+export { ComboboxItem as Item, } from './combobox-item';
 export { ComboboxItemContext as ItemContext, } from './combobox-item-context';
 export { ComboboxItemGroup as ItemGroup, } from './combobox-item-group';
 export { ComboboxItemGroupLabel as ItemGroupLabel, } from './combobox-item-group-label';
 export { ComboboxItemIndicator as ItemIndicator, } from './combobox-item-indicator';
 export { ComboboxItemText as ItemText, } from './combobox-item-text';
-export { ComboboxLabel as Label } from './combobox-label';
-export { ComboboxList as List } from './combobox-list';
+export { ComboboxLabel as Label, } from './combobox-label';
+export { ComboboxList as List, } from './combobox-list';
 export { ComboboxPositioner as Positioner, } from './combobox-positioner';
-export { ComboboxRoot as Root } from './combobox-root';
+export { ComboboxRoot as Root, } from './combobox-root';
 export { ComboboxRootProvider as RootProvider, } from './combobox-root-provider';
 export { ComboboxTrigger as Trigger, } from './combobox-trigger';