@ark-ui/solid 0.8.1 → 0.10.0

package/color-picker/color-picker-context.d.ts

@@ -1,45 +1,4 @@
-import type { ColorFormat, ColorChannelInputProps } from '@zag-js/color-picker/dist/color-picker.types';
-import type { Color, ColorChannel, ColorAreaProps, ColorChannelProps, ColorSwatchProps } from '@zag-js/color-picker';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseColorPickerReturn } from './use-color-picker';
 export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: ContextProviderComponent<Accessor<{
-    isDragging: boolean;
-    value: string;
-    valueAsColor: Color;
-    channels: [ColorChannel, ColorChannel, ColorChannel];
-    setColor(value: string | Color): void;
-    setChannelValue(channel: ColorChannel, value: number): void;
-    setFormat(format: ColorFormat): void;
-    contentProps: JSX.HTMLAttributes<any>;
-    getAreaProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaGradientProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaThumbProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getChannelSliderTrackProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderBackgroundProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderThumbProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getSwatchBackgroundProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-    getSwatchProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-}>>, useColorPickerContext: () => Accessor<{
-    isDragging: boolean;
-    value: string;
-    valueAsColor: Color;
-    channels: [ColorChannel, ColorChannel, ColorChannel];
-    setColor(value: string | Color): void;
-    setChannelValue(channel: ColorChannel, value: number): void;
-    setFormat(format: ColorFormat): void;
-    contentProps: JSX.HTMLAttributes<any>;
-    getAreaProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaGradientProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaThumbProps(props: ColorAreaProps): JSX.HTMLAttributes<any>;
-    getChannelSliderTrackProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderBackgroundProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderThumbProps(props: ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getSwatchBackgroundProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-    getSwatchProps(props: ColorSwatchProps): JSX.HTMLAttributes<any>;
-}>;
+export declare const ColorPickerProvider: ContextProviderComponent<UseColorPickerReturn>, useColorPickerContext: () => UseColorPickerReturn;

package/color-picker/color-picker-eye-dropper-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerEyeDropperTriggerProps = HTMLArkProps<'button'>;
 export declare const ColorPickerEyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => JSX.Element;

package/color-picker/color-picker-swatch-background.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerSwatchBackgroundProps = HTMLArkProps<'div'>;
 export declare const ColorPickerSwatchBackground: (props: ColorPickerSwatchBackgroundProps) => JSX.Element;

package/color-picker/color-picker-swatch-context.d.ts

@@ -1,3 +1,3 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import type { ColorSwatchProps } from '@zag-js/color-picker';
 export declare const ColorPickerSwatchProvider: ContextProviderComponent<ColorSwatchProps>, useColorPickerSwatchContext: () => ColorSwatchProps;

package/color-picker/color-picker-swatch-group.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ColorPickerSwatchGroupProps = HTMLArkProps<'div'>;
 export declare const ColorPickerSwatchGroup: (props: ColorPickerSwatchGroupProps) => JSX.Element;

package/color-picker/color-picker-swatch.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { ColorSwatchProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

package/color-picker/color-picker.anatomy.d.ts

@@ -1,3 +1,3 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup">;
-export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup", AnatomyPart>;
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const colorPickerAnatomy: AnatomyInstance<"label" | "area" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup">;
+export declare const parts: Record<"label" | "area" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup", AnatomyPart>;

package/color-picker/color-picker.cjs

@@ -9,7 +9,7 @@ const colorPickerContext = require('./color-picker-context.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 
 const ColorPicker = props => {
-  const [useColorPickerProps, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
+  const [useColorPickerProps, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
   const api = useColorPicker.useColorPicker(useColorPickerProps);
   const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(colorPickerContext.ColorPickerProvider, {

package/color-picker/color-picker.mjs

@@ -5,7 +5,7 @@ import { ColorPickerProvider } from './color-picker-context.mjs';
 import { useColorPicker } from './use-color-picker.mjs';
 
 const ColorPicker = props => {
-  const [useColorPickerProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
+  const [useColorPickerProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'onChangeEnd', 'readOnly', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(ColorPickerProvider, {

package/color-picker/color-picker.stories.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/color-picker/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const colorPicker = require('./color-picker.cjs');
 const colorPickerArea = require('./color-picker-area.cjs');
+const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerAreaGradient = require('./color-picker-area-gradient.cjs');
 const colorPickerAreaThumb = require('./color-picker-area-thumb.cjs');
 const colorPickerChannelInput = require('./color-picker-channel-input.cjs');
@@ -11,16 +12,32 @@ const colorPickerChannelSliderBackground = require('./color-picker-channel-slide
 const colorPickerChannelSliderThumb = require('./color-picker-channel-slider-thumb.cjs');
 const colorPickerChannelSliderTrack = require('./color-picker-channel-slider-track.cjs');
 const colorPickerContent = require('./color-picker-content.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
 const colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
 const colorPickerSwatchBackground = require('./color-picker-swatch-background.cjs');
+const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 
+const ColorPicker = Object.assign(colorPicker.ColorPicker, {
+  Root: colorPicker.ColorPicker,
+  Area: colorPickerArea.ColorPickerArea,
+  AreaGradient: colorPickerAreaGradient.ColorPickerAreaGradient,
+  AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
+  ChannelInput: colorPickerChannelInput.ColorPickerChannelInput,
+  ChannelSliderBackground: colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground,
+  ChannelSliderThumb: colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack,
+  Content: colorPickerContent.ColorPickerContent,
+  EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
+  Swatch: colorPickerSwatch.ColorPickerSwatch,
+  SwatchBackground: colorPickerSwatchBackground.ColorPickerSwatchBackground,
+  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup
+});
 
-
-exports.ColorPicker = colorPicker.ColorPicker;
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
+exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
 exports.ColorPickerAreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
@@ -28,8 +45,11 @@ exports.ColorPickerChannelSliderBackground = colorPickerChannelSliderBackground.
 exports.ColorPickerChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
 exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
+exports.useColorPickerContext = colorPickerContext.useColorPickerContext;
 exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwatchBackground;
+exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwatchContext;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
+exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -1,14 +1,35 @@
-export { ColorPicker, type ColorPickerProps } from './color-picker';
-export { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
-export { ColorPickerAreaGradient, type ColorPickerAreaGradientProps, } from './color-picker-area-gradient';
-export { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
-export { ColorPickerChannelInput, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
-export { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps, } from './color-picker-channel-slider-background';
-export { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps, } from './color-picker-channel-slider-thumb';
-export { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps, } from './color-picker-channel-slider-track';
-export { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
-export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
-export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
-export { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps, } from './color-picker-swatch-background';
-export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
-export { colorPickerAnatomy } from './color-picker.anatomy';
+import { JSX } from 'solid-js';
+import { type ColorPickerProps } from './color-picker';
+import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
+import { useColorPickerAreaContext } from './color-picker-area-context';
+import { ColorPickerAreaGradient, type ColorPickerAreaGradientProps } from './color-picker-area-gradient';
+import { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
+import { ColorPickerChannelInput, type ColorPickerChannelInputProps } from './color-picker-channel-input';
+import { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgroundProps } from './color-picker-channel-slider-background';
+import { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps } from './color-picker-channel-slider-track';
+import { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
+import { useColorPickerContext } from './color-picker-context';
+import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
+import { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps } from './color-picker-swatch-background';
+import { useColorPickerSwatchContext } from './color-picker-swatch-context';
+import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
+import { colorPickerAnatomy } from './color-picker.anatomy';
+declare const ColorPicker: ((props: ColorPickerProps) => JSX.Element) & {
+    Root: (props: ColorPickerProps) => JSX.Element;
+    Area: (props: ColorPickerAreaProps) => JSX.Element;
+    AreaGradient: (props: ColorPickerAreaGradientProps) => JSX.Element;
+    AreaThumb: (props: ColorPickerAreaThumbProps) => JSX.Element;
+    ChannelInput: (props: ColorPickerChannelInputProps) => JSX.Element;
+    ChannelSliderBackground: (props: ColorPickerChannelSliderBackgroundProps) => JSX.Element;
+    ChannelSliderThumb: (props: ColorPickerChannelSliderThumbProps) => JSX.Element;
+    ChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => JSX.Element;
+    Content: (props: ColorPickerContentProps) => JSX.Element;
+    EyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => JSX.Element;
+    Swatch: (props: ColorPickerSwatchProps) => JSX.Element;
+    SwatchBackground: (props: ColorPickerSwatchBackgroundProps) => JSX.Element;
+    SwatchGroup: (props: ColorPickerSwatchGroupProps) => JSX.Element;
+};
+export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup, colorPickerAnatomy, useColorPickerAreaContext, useColorPickerContext, useColorPickerSwatchContext, };
+export type { ColorPickerAreaGradientProps, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderBackgroundProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerEyeDropperTriggerProps, ColorPickerProps, ColorPickerSwatchBackgroundProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, };

package/color-picker/index.mjs

@@ -1,14 +1,35 @@
-export { ColorPicker } from './color-picker.mjs';
-export { ColorPickerArea } from './color-picker-area.mjs';
-export { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
-export { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
-export { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
-export { ColorPickerChannelSliderBackground } from './color-picker-channel-slider-background.mjs';
-export { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
-export { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
-export { ColorPickerContent } from './color-picker-content.mjs';
-export { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
-export { ColorPickerSwatch } from './color-picker-swatch.mjs';
-export { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
-export { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
+import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
+import { ColorPickerArea } from './color-picker-area.mjs';
+export { useColorPickerAreaContext } from './color-picker-area-context.mjs';
+import { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
+import { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
+import { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
+import { ColorPickerChannelSliderBackground } from './color-picker-channel-slider-background.mjs';
+import { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
+import { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
+import { ColorPickerContent } from './color-picker-content.mjs';
+export { useColorPickerContext } from './color-picker-context.mjs';
+import { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+import { ColorPickerSwatch } from './color-picker-swatch.mjs';
+import { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
+export { useColorPickerSwatchContext } from './color-picker-swatch-context.mjs';
+import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
 export { colorPickerAnatomy } from './color-picker.anatomy.mjs';
+
+const ColorPicker = Object.assign(ColorPicker$1, {
+  Root: ColorPicker$1,
+  Area: ColorPickerArea,
+  AreaGradient: ColorPickerAreaGradient,
+  AreaThumb: ColorPickerAreaThumb,
+  ChannelInput: ColorPickerChannelInput,
+  ChannelSliderBackground: ColorPickerChannelSliderBackground,
+  ChannelSliderThumb: ColorPickerChannelSliderThumb,
+  ChannelSliderTrack: ColorPickerChannelSliderTrack,
+  Content: ColorPickerContent,
+  EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  Swatch: ColorPickerSwatch,
+  SwatchBackground: ColorPickerSwatchBackground,
+  SwatchGroup: ColorPickerSwatchGroup
+});
+
+export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup };

package/color-picker/use-color-picker.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const colorPicker = require('@zag-js/color-picker');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/color-picker/use-color-picker.d.ts

@@ -1,26 +1,7 @@
-import type { ColorFormat, ColorChannelInputProps } from '@zag-js/color-picker/dist/color-picker.types';
-import type { Accessor, JSX } from 'solid-js';
 import * as colorPicker from '@zag-js/color-picker';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseColorPickerProps = Optional<colorPicker.Context, 'id'>;
-export type UseColorPickerReturn = ReturnType<typeof useColorPicker>;
-export declare const useColorPicker: (props: UseColorPickerProps) => Accessor<{
-    isDragging: boolean;
-    value: string;
-    valueAsColor: colorPicker.Color;
-    channels: [colorPicker.ColorChannel, colorPicker.ColorChannel, colorPicker.ColorChannel];
-    setColor(value: string | colorPicker.Color): void;
-    setChannelValue(channel: colorPicker.ColorChannel, value: number): void;
-    setFormat(format: ColorFormat): void;
-    contentProps: JSX.HTMLAttributes<any>;
-    getAreaProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaGradientProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaThumbProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
-    getChannelSliderTrackProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderBackgroundProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderThumbProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getSwatchBackgroundProps(props: colorPicker.ColorSwatchProps): JSX.HTMLAttributes<any>;
-    getSwatchProps(props: colorPicker.ColorSwatchProps): JSX.HTMLAttributes<any>;
-}>;
+export type UseColorPickerReturn = Accessor<colorPicker.Api<PropTypes>>;
+export declare const useColorPicker: (props: UseColorPickerProps) => UseColorPickerReturn;

package/color-picker/use-color-picker.mjs

@@ -1,6 +1,7 @@
 import * as colorPicker from '@zag-js/color-picker';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useColorPicker = (props) => {

package/combobox/combobox-clear-trigger.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxClearTrigger = props => {
+  const combobox = comboboxContext.useComboboxContext();
+  const clearTriggerProps = solid.mergeProps(() => combobox().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, clearTriggerProps);
+};
+
+exports.ComboboxClearTrigger = ComboboxClearTrigger;

package/combobox/combobox-clear-trigger.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type ComboboxClearTriggerProps = HTMLArkProps<'button'>;
+export declare const ComboboxClearTrigger: (props: ComboboxClearTriggerProps) => JSX.Element;

package/combobox/combobox-clear-trigger.mjs

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

package/combobox/combobox-content.cjs

@@ -10,7 +10,7 @@ const comboboxContext = require('./combobox-context.cjs');
 const ComboboxContent = props => {
   const combobox = comboboxContext.useComboboxContext();
   const contentProps = solid.mergeProps(() => combobox().contentProps, props);
-  return web.createComponent(factory.ark.ul, contentProps);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.ComboboxContent = ComboboxContent;

package/combobox/combobox-content.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type ComboboxContentProps = HTMLArkProps<'ul'>;
+export type ComboboxContentProps = HTMLArkProps<'div'>;
 export declare const ComboboxContent: (props: ComboboxContentProps) => JSX.Element;

package/combobox/combobox-content.mjs

@@ -6,7 +6,7 @@ import { useComboboxContext } from './combobox-context.mjs';
 const ComboboxContent = props => {
   const combobox = useComboboxContext();
   const contentProps = mergeProps(() => combobox().contentProps, props);
-  return createComponent(ark.ul, contentProps);
+  return createComponent(ark.div, contentProps);
 };
 
 export { ComboboxContent };

package/combobox/combobox-context.d.ts

@@ -1,58 +1,4 @@
-import type { OptionData, OptionProps, OptionGroupProps } from '@zag-js/combobox';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseComboboxReturn } from './use-combobox';
 export type ComboboxContext = UseComboboxReturn;
-export declare const ComboboxProvider: ContextProviderComponent<Accessor<{
-    isFocused: boolean;
-    isOpen: boolean;
-    isInputValueEmpty: boolean;
-    inputValue: string;
-    focusedOption: OptionData | null;
-    selectedValue: string | undefined;
-    setValue(value: string | OptionData): void;
-    setInputValue(value: string): void;
-    clearValue(): void;
-    focus(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    controlProps: JSX.HTMLAttributes<any>;
-    positionerProps: JSX.HTMLAttributes<any>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    contentProps: JSX.HTMLAttributes<any>;
-    clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionState(props: OptionProps): {
-        disabled: boolean | undefined;
-        focused: boolean;
-        checked: boolean;
-    };
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
-}>>, useComboboxContext: () => Accessor<{
-    isFocused: boolean;
-    isOpen: boolean;
-    isInputValueEmpty: boolean;
-    inputValue: string;
-    focusedOption: OptionData | null;
-    selectedValue: string | undefined;
-    setValue(value: string | OptionData): void;
-    setInputValue(value: string): void;
-    clearValue(): void;
-    focus(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    controlProps: JSX.HTMLAttributes<any>;
-    positionerProps: JSX.HTMLAttributes<any>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    contentProps: JSX.HTMLAttributes<any>;
-    clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionState(props: OptionProps): {
-        disabled: boolean | undefined;
-        focused: boolean;
-        checked: boolean;
-    };
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
-}>;
+export declare const ComboboxProvider: ContextProviderComponent<UseComboboxReturn>, useComboboxContext: () => UseComboboxReturn;

package/combobox/combobox-control.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ComboboxControlProps = HTMLArkProps<'div'>;
 export declare const ComboboxControl: (props: ComboboxControlProps) => JSX.Element;

package/combobox/combobox-input.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ComboboxInputProps = HTMLArkProps<'input'>;
 export declare const ComboboxInput: (props: ComboboxInputProps) => JSX.Element;

package/combobox/combobox-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ComboboxLabelProps = HTMLArkProps<'label'>;
 export declare const ComboboxLabel: (props: ComboboxLabelProps) => JSX.Element;

package/combobox/combobox-option-group-label.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroupLabel = props => {
+  const [labelParams, restProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
+  const api = comboboxContext.useComboboxContext();
+  const groupLabelProps = solid.mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
+  return web.createComponent(factory.ark.div, groupLabelProps);
+};
+
+exports.ComboboxOptionGroupLabel = ComboboxOptionGroupLabel;

package/combobox/combobox-option-group-label.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { OptionGroupLabelProps } from '@zag-js/select';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ComboboxOptionGroupLabelProps = Assign<HTMLArkProps<'div'>, OptionGroupLabelProps>;
+export declare const ComboboxOptionGroupLabel: (props: ComboboxOptionGroupLabelProps) => JSX.Element;

package/combobox/combobox-option-group-label.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroupLabel = props => {
+  const [labelParams, restProps] = createSplitProps()(props, ['htmlFor']);
+  const api = useComboboxContext();
+  const groupLabelProps = mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
+  return createComponent(ark.div, groupLabelProps);
+};
+
+export { ComboboxOptionGroupLabel };

package/combobox/combobox-option-group.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroup = props => {
+  const [optionGroupProps, localProps] = createSplitProps.createSplitProps()(props, ['id']);
+  const combobox = comboboxContext.useComboboxContext();
+  const mergedProps = solid.mergeProps(() => combobox().getOptionGroupProps(optionGroupProps), localProps);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.ComboboxOptionGroup = ComboboxOptionGroup;

package/combobox/combobox-option-group.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { OptionGroupProps } from '@zag-js/combobox';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ComboboxOptionGroupProps = Assign<HTMLArkProps<'div'>, OptionGroupProps>;
+export declare const ComboboxOptionGroup: (props: ComboboxOptionGroupProps) => JSX.Element;

package/combobox/combobox-option-group.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroup = props => {
+  const [optionGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps(() => combobox().getOptionGroupProps(optionGroupProps), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { ComboboxOptionGroup };

package/combobox/combobox-option.cjs

@@ -14,7 +14,7 @@ const ComboboxOption = props => {
   const [childrenProps, restProps] = solidJs.splitProps(localProps, ['children']);
   const combobox = comboboxContext.useComboboxContext();
   const mergedProps = solid.mergeProps(() => combobox().getOptionProps(optionProps), restProps);
-  return web.createComponent(factory.ark.li, web.mergeProps(mergedProps, {
+  return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
     get children() {
       return childrenProps.children || optionProps.label;
     }

package/combobox/combobox-option.d.ts

@@ -1,8 +1,6 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
+import type { OptionProps } from '@zag-js/combobox';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { useComboboxContext } from './combobox-context';
-type OptionProps = Parameters<ReturnType<ReturnType<typeof useComboboxContext>>['getOptionProps']>[0];
-export type ComboboxOptionProps = Assign<HTMLArkProps<'li'>, OptionProps>;
+export type ComboboxOptionProps = Assign<HTMLArkProps<'div'>, OptionProps>;
 export declare const ComboboxOption: (props: ComboboxOptionProps) => JSX.Element;
-export {};

package/combobox/combobox-option.mjs

@@ -10,7 +10,7 @@ const ComboboxOption = props => {
   const [childrenProps, restProps] = splitProps(localProps, ['children']);
   const combobox = useComboboxContext();
   const mergedProps = mergeProps(() => combobox().getOptionProps(optionProps), restProps);
-  return createComponent(ark.li, mergeProps$1(mergedProps, {
+  return createComponent(ark.div, mergeProps$1(mergedProps, {
     get children() {
       return childrenProps.children || optionProps.label;
     }

package/combobox/combobox-positioner.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ComboboxPositionerProps = HTMLArkProps<'div'>;
 export declare const ComboboxPositioner: (props: ComboboxPositionerProps) => JSX.Element;

package/combobox/combobox-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type ComboboxTriggerProps = HTMLArkProps<'button'>;
 export declare const ComboboxTrigger: (props: ComboboxTriggerProps) => JSX.Element;