@ark-ui/solid 0.11.0 → 1.0.0-beta.0

package/color-picker/color-picker.mjs

@@ -1,17 +1,29 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, spread, template } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { ColorPickerProvider } from './color-picker-context.mjs';
 import { useColorPicker } from './use-color-picker.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const ColorPicker = props => {
-  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);
+  const [colorPickerProps, localProps] = createSplitProps()(props, ['autoFocus', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const api = useColorPicker(colorPickerProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(ColorPickerProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return [createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      })), (() => {
+        const _el$ = _tmpl$();
+        spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };

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

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

package/color-picker/index.cjs

@@ -4,52 +4,65 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const colorPicker = require('./color-picker.cjs');
 const colorPickerArea = require('./color-picker-area.cjs');
+const colorPickerAreaBackground = require('./color-picker-area-background.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');
-const colorPickerChannelSliderBackground = require('./color-picker-channel-slider-background.cjs');
+const colorPickerChannelSlider = require('./color-picker-channel-slider.cjs');
+const colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 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 colorPickerControl = require('./color-picker-control.cjs');
 const colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
+const colorPickerLabel = require('./color-picker-label.cjs');
+const colorPickerPositioner = require('./color-picker-positioner.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 colorPickerSwatchTrigger = require('./color-picker-swatch-trigger.cjs');
+const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cjs');
+const colorPickerTrigger = require('./color-picker-trigger.cjs');
 
 const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Root: colorPicker.ColorPicker,
   Area: colorPickerArea.ColorPickerArea,
-  AreaGradient: colorPickerAreaGradient.ColorPickerAreaGradient,
+  AreaBackground: colorPickerAreaBackground.ColorPickerAreaBackground,
   AreaThumb: colorPickerAreaThumb.ColorPickerAreaThumb,
   ChannelInput: colorPickerChannelInput.ColorPickerChannelInput,
-  ChannelSliderBackground: colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground,
+  ChannelSlider: colorPickerChannelSlider.ColorPickerChannelSlider,
   ChannelSliderThumb: colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb,
   ChannelSliderTrack: colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack,
   Content: colorPickerContent.ColorPickerContent,
+  Control: colorPickerControl.ColorPickerControl,
   EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
+  Label: colorPickerLabel.ColorPickerLabel,
+  Positioner: colorPickerPositioner.ColorPickerPositioner,
   Swatch: colorPickerSwatch.ColorPickerSwatch,
-  SwatchBackground: colorPickerSwatchBackground.ColorPickerSwatchBackground,
-  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup
+  SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup,
+  SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
+  TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
+  Trigger: colorPickerTrigger.ColorPickerTrigger
 });
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
+exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBackground;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
-exports.ColorPickerAreaGradient = colorPickerAreaGradient.ColorPickerAreaGradient;
 exports.ColorPickerAreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
-exports.ColorPickerChannelSliderBackground = colorPickerChannelSliderBackground.ColorPickerChannelSliderBackground;
+exports.ColorPickerChannelSlider = colorPickerChannelSlider.ColorPickerChannelSlider;
+exports.useColorPickerChannelSliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext;
 exports.ColorPickerChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
 exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
 exports.useColorPickerContext = colorPickerContext.useColorPickerContext;
+exports.ColorPickerControl = colorPickerControl.ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
+exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
+exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
-exports.ColorPickerSwatchBackground = colorPickerSwatchBackground.ColorPickerSwatchBackground;
-exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwatchContext;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
-exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
+exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
+exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
+exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
 exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -1,35 +1,44 @@
 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 { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
+import { useColorPickerAreaContext, type ColorPickerAreaContext } from './color-picker-area-context';
 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 { ColorPickerChannelSlider, type ColorPickerChannelSliderProps } from './color-picker-channel-slider';
+import { useColorPickerChannelSliderContext, type ColorPickerChannelSliderContext } from './color-picker-channel-slider-context';
 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 { useColorPickerContext, type ColorPickerContext } from './color-picker-context';
+import { ColorPickerControl, type ColorPickerControlProps } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
+import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 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';
+import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
+import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridPrps } from './color-picker-transparency-grid';
+import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 declare const ColorPicker: ((props: ColorPickerProps) => JSX.Element) & {
     Root: (props: ColorPickerProps) => JSX.Element;
     Area: (props: ColorPickerAreaProps) => JSX.Element;
-    AreaGradient: (props: ColorPickerAreaGradientProps) => JSX.Element;
+    AreaBackground: (props: ColorPickerAreaBackgroundProps) => JSX.Element;
     AreaThumb: (props: ColorPickerAreaThumbProps) => JSX.Element;
     ChannelInput: (props: ColorPickerChannelInputProps) => JSX.Element;
-    ChannelSliderBackground: (props: ColorPickerChannelSliderBackgroundProps) => JSX.Element;
+    ChannelSlider: (props: ColorPickerChannelSliderProps) => JSX.Element;
     ChannelSliderThumb: (props: ColorPickerChannelSliderThumbProps) => JSX.Element;
     ChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => JSX.Element;
     Content: (props: ColorPickerContentProps) => JSX.Element;
+    Control: (props: ColorPickerControlProps) => JSX.Element;
     EyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => JSX.Element;
+    Label: (props: ColorPickerLabelProps) => JSX.Element;
+    Positioner: (props: ColorPickerPositionerProps) => JSX.Element;
     Swatch: (props: ColorPickerSwatchProps) => JSX.Element;
-    SwatchBackground: (props: ColorPickerSwatchBackgroundProps) => JSX.Element;
     SwatchGroup: (props: ColorPickerSwatchGroupProps) => JSX.Element;
+    SwatchTrigger: (props: ColorPickerSwatchTriggerProps) => JSX.Element;
+    TransparencyGrid: (props: ColorPickerTransparencyGridPrps) => JSX.Element;
+    Trigger: (props: ColorPickerTriggerProps) => 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, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridPrps, ColorPickerTriggerProps, };

package/color-picker/index.mjs

@@ -1,35 +1,44 @@
 import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
 import { ColorPickerArea } from './color-picker-area.mjs';
+import { ColorPickerAreaBackground } from './color-picker-area-background.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 { ColorPickerChannelSlider } from './color-picker-channel-slider.mjs';
+export { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.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 { ColorPickerControl } from './color-picker-control.mjs';
 import { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
+import { ColorPickerLabel } from './color-picker-label.mjs';
+import { ColorPickerPositioner } from './color-picker-positioner.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';
+import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
+import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
+import { ColorPickerTrigger } from './color-picker-trigger.mjs';
 
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
   Area: ColorPickerArea,
-  AreaGradient: ColorPickerAreaGradient,
+  AreaBackground: ColorPickerAreaBackground,
   AreaThumb: ColorPickerAreaThumb,
   ChannelInput: ColorPickerChannelInput,
-  ChannelSliderBackground: ColorPickerChannelSliderBackground,
+  ChannelSlider: ColorPickerChannelSlider,
   ChannelSliderThumb: ColorPickerChannelSliderThumb,
   ChannelSliderTrack: ColorPickerChannelSliderTrack,
   Content: ColorPickerContent,
+  Control: ColorPickerControl,
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+  Label: ColorPickerLabel,
+  Positioner: ColorPickerPositioner,
   Swatch: ColorPickerSwatch,
-  SwatchBackground: ColorPickerSwatchBackground,
-  SwatchGroup: ColorPickerSwatchGroup
+  SwatchGroup: ColorPickerSwatchGroup,
+  SwatchTrigger: ColorPickerSwatchTrigger,
+  TransparencyGrid: ColorPickerTransparencyGrid,
+  Trigger: ColorPickerTrigger
 });
 
-export { ColorPicker, ColorPickerArea, ColorPickerAreaGradient, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSliderBackground, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSwatch, ColorPickerSwatchBackground, ColorPickerSwatchGroup };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger };

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

@@ -28,8 +28,16 @@ function _interopNamespaceDefault(e) {
 const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker);
 
 const useColorPicker = (props) => {
+  const [local, rest] = solidJs.splitProps(props, ["value"]);
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps(
+    () => ({
+      id: solidJs.createUniqueId(),
+      getRootNode,
+      value: local.value ? colorPicker__namespace.parse(local.value) : void 0
+    }),
+    rest
+  );
   const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), { context });
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };

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

@@ -2,6 +2,9 @@ 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 = Accessor<colorPicker.Api<PropTypes>>;
+export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'value'>, 'id'> {
+    value?: string;
+}
+export interface UseColorPickerReturn extends Accessor<colorPicker.Api<PropTypes>> {
+}
 export declare const useColorPicker: (props: UseColorPickerProps) => UseColorPickerReturn;

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

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

package/combobox/combobox-clear-trigger.cjs

@@ -9,8 +9,8 @@ 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);
+  const mergedProps = solid.mergeProps(() => combobox().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.ComboboxClearTrigger = ComboboxClearTrigger;

package/combobox/combobox-clear-trigger.mjs

@@ -5,8 +5,8 @@ import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxClearTrigger = props => {
   const combobox = useComboboxContext();
-  const clearTriggerProps = mergeProps(() => combobox().clearTriggerProps, props);
-  return createComponent(ark.button, clearTriggerProps);
+  const mergedProps = mergeProps(() => combobox().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { ComboboxClearTrigger };

package/combobox/combobox-content.cjs

@@ -12,14 +12,14 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const ComboboxContent = props => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = comboboxContext.useComboboxContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, localProps);
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
   return web.createComponent(index.Presence, web.mergeProps({
     get present() {
       return api().isOpen;
     }
   }, presenceProps, {
     get children() {
-      return web.createComponent(factory.ark.div, contentProps);
+      return web.createComponent(factory.ark.div, mergedProps);
     }
   }));
 };

package/combobox/combobox-content.mjs

@@ -8,14 +8,14 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const ComboboxContent = props => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useComboboxContext();
-  const contentProps = mergeProps(() => api().contentProps, localProps);
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
   return createComponent(Presence, mergeProps$1({
     get present() {
       return api().isOpen;
     }
   }, presenceProps, {
     get children() {
-      return createComponent(ark.div, contentProps);
+      return createComponent(ark.div, mergedProps);
     }
   }));
 };

package/combobox/combobox-context.d.ts

@@ -1,4 +1,5 @@
 import { ContextProviderComponent } from 'solid-js';
+import type { CollectionItem } from '../types';
 import { type UseComboboxReturn } from './use-combobox';
-export type ComboboxContext = UseComboboxReturn;
-export declare const ComboboxProvider: ContextProviderComponent<UseComboboxReturn>, useComboboxContext: () => UseComboboxReturn;
+export type ComboboxContext<T extends CollectionItem> = UseComboboxReturn<T>;
+export declare const ComboboxProvider: ContextProviderComponent<ComboboxContext<any>>, useComboboxContext: () => ComboboxContext<any>;

package/combobox/combobox-control.cjs

@@ -9,8 +9,8 @@ const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxControl = props => {
   const combobox = comboboxContext.useComboboxContext();
-  const controlProps = solid.mergeProps(() => combobox().controlProps, props);
-  return web.createComponent(factory.ark.div, controlProps);
+  const mergedProps = solid.mergeProps(() => combobox().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.ComboboxControl = ComboboxControl;

package/combobox/combobox-control.mjs

@@ -5,8 +5,8 @@ import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxControl = props => {
   const combobox = useComboboxContext();
-  const controlProps = mergeProps(() => combobox().controlProps, props);
-  return createComponent(ark.div, controlProps);
+  const mergedProps = mergeProps(() => combobox().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { ComboboxControl };

package/combobox/combobox-input.cjs

@@ -9,8 +9,8 @@ const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxInput = props => {
   const combobox = comboboxContext.useComboboxContext();
-  const inputProps = solid.mergeProps(() => combobox().inputProps, props);
-  return web.createComponent(factory.ark.input, inputProps);
+  const mergedProps = solid.mergeProps(() => combobox().inputProps, props);
+  return web.createComponent(factory.ark.input, mergedProps);
 };
 
 exports.ComboboxInput = ComboboxInput;

package/combobox/combobox-input.mjs

@@ -5,8 +5,8 @@ import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxInput = props => {
   const combobox = useComboboxContext();
-  const inputProps = mergeProps(() => combobox().inputProps, props);
-  return createComponent(ark.input, inputProps);
+  const mergedProps = mergeProps(() => combobox().inputProps, props);
+  return createComponent(ark.input, mergedProps);
 };
 
 export { ComboboxInput };

package/combobox/combobox-item-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [ComboboxItemProvider, useComboboxItemContext] = createContext.createContext({
+  hookName: "useComboboxItemContext",
+  providerName: "<ComboboxItemProvider />"
+});
+
+exports.ComboboxItemProvider = ComboboxItemProvider;
+exports.useComboboxItemContext = useComboboxItemContext;

package/combobox/combobox-item-context.d.ts

@@ -0,0 +1,4 @@
+import { ContextProviderComponent } from 'solid-js';
+import type { ItemProps } from '@zag-js/combobox';
+export type ComboboxItemContext = ItemProps;
+export declare const ComboboxItemProvider: ContextProviderComponent<ItemProps>, useComboboxItemContext: () => ItemProps;

package/combobox/combobox-item-context.mjs

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

package/combobox/{combobox-option-group-label.cjs → combobox-item-group-label.cjs}

@@ -8,11 +8,11 @@ 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 ComboboxItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
   const api = comboboxContext.useComboboxContext();
-  const groupLabelProps = solid.mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
-  return web.createComponent(factory.ark.div, groupLabelProps);
+  const mergedProps = solid.mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.ComboboxOptionGroupLabel = ComboboxOptionGroupLabel;
+exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;

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

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

package/combobox/{combobox-option-group-label.mjs → combobox-item-group-label.mjs}

@@ -4,11 +4,11 @@ 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 ComboboxItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
   const api = useComboboxContext();
-  const groupLabelProps = mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
-  return createComponent(ark.div, groupLabelProps);
+  const mergedProps = mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
-export { ComboboxOptionGroupLabel };
+export { ComboboxItemGroupLabel };

package/combobox/{combobox-option-group.cjs → combobox-item-group.cjs}

@@ -8,11 +8,11 @@ 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 ComboboxItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps.createSplitProps()(props, ['id']);
   const combobox = comboboxContext.useComboboxContext();
-  const mergedProps = solid.mergeProps(() => combobox().getOptionGroupProps(optionGroupProps), localProps);
+  const mergedProps = solid.mergeProps(() => combobox().getItemGroupProps(groupProps), localProps);
   return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.ComboboxOptionGroup = ComboboxOptionGroup;
+exports.ComboboxItemGroup = ComboboxItemGroup;

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

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

package/combobox/{combobox-option-group.mjs → combobox-item-group.mjs}

@@ -4,11 +4,11 @@ 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 ComboboxItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps(() => combobox().getOptionGroupProps(optionGroupProps), localProps);
+  const mergedProps = mergeProps(() => combobox().getItemGroupProps(groupProps), localProps);
   return createComponent(ark.div, mergedProps);
 };
 
-export { ComboboxOptionGroup };
+export { ComboboxItemGroup };

package/combobox/combobox-item-indicator.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 factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const comboboxItemContext = require('./combobox-item-context.cjs');
+
+const ComboboxItemIndicator = props => {
+  const combobox = comboboxContext.useComboboxContext();
+  const itemProps = comboboxItemContext.useComboboxItemContext();
+  const mergedProps = solid.mergeProps(() => combobox().getItemIndicatorProps(itemProps), props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.ComboboxItemIndicator = ComboboxItemIndicator;

package/combobox/combobox-item-indicator.d.ts

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

package/combobox/combobox-item-indicator.mjs

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

package/combobox/combobox-item-text.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 factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const comboboxItemContext = require('./combobox-item-context.cjs');
+
+const ComboboxItemText = props => {
+  const api = comboboxContext.useComboboxContext();
+  const itemProps = comboboxItemContext.useComboboxItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(factory.ark.span, mergedProps);
+};
+
+exports.ComboboxItemText = ComboboxItemText;

package/combobox/combobox-item-text.d.ts

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

package/combobox/combobox-item-text.mjs

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