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

package/combobox/combobox-item.cjs

@@ -0,0 +1,30 @@
+'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 runIfFn = require('../run-if-fn.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+const comboboxItemContext = require('./combobox-item-context.cjs');
+
+const ComboboxItem = props => {
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ['item']);
+  const api = comboboxContext.useComboboxContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(comboboxItemContext.ComboboxItemProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+exports.ComboboxItem = ComboboxItem;

package/combobox/combobox-item.d.ts

@@ -0,0 +1,8 @@
+import type { ItemProps, ItemState } from '@zag-js/combobox';
+import { type JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ComboboxItemProps = Assign<HTMLArkProps<'div'>, ItemProps & {
+    children?: JSX.Element | ((state: () => ItemState) => JSX.Element);
+}>;
+export declare const ComboboxItem: (props: ComboboxItemProps) => JSX.Element;

package/combobox/combobox-item.mjs

@@ -0,0 +1,26 @@
+import { createComponent, mergeProps as mergeProps$1 } 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 { useComboboxContext } from './combobox-context.mjs';
+import { ComboboxItemProvider } from './combobox-item-context.mjs';
+
+const ComboboxItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const api = useComboboxContext();
+  const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(ComboboxItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+export { ComboboxItem };

package/combobox/combobox-label.cjs

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

package/combobox/combobox-label.mjs

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

package/combobox/combobox-positioner.cjs

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

package/combobox/combobox-positioner.mjs

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

package/combobox/combobox-trigger.cjs

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

package/combobox/combobox-trigger.mjs

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

package/combobox/combobox.cjs

@@ -11,14 +11,14 @@ const comboboxContext = require('./combobox-context.cjs');
 const useCombobox = require('./use-combobox.cjs');
 
 const Combobox = props => {
-  const [useComboboxProps, localProps] = createSplitProps.createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onFocusOutside', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectionData', 'selectOnTab', 'translations']);
-  const combobox = useCombobox.useCombobox(useComboboxProps);
-  const rootProps = solid.mergeProps(() => combobox().rootProps, localProps);
-  const getChildren = () => runIfFn.runIfFn(localProps.children, combobox);
+  const [selectProps, localProps] = createSplitProps.createSplitProps()(props, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const api = useCombobox.useCombobox(selectProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(comboboxContext.ComboboxProvider, {
-    value: combobox,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }

package/combobox/combobox.d.ts

@@ -1,9 +1,9 @@
-import { type JSX } from 'solid-js';
+import { type JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
+import type { Assign, CollectionItem } from '../types';
 import { type ComboboxContext } from './combobox-context';
 import { type UseComboboxProps } from './use-combobox';
-export type ComboboxProps = Assign<HTMLArkProps<'div'>, UseComboboxProps & {
-    children: JSX.Element | ((context: ComboboxContext) => JSX.Element);
-}>;
-export declare const Combobox: (props: ComboboxProps) => JSX.Element;
+export type ComboboxProps<T extends CollectionItem> = Assign<HTMLArkProps<'div'>, UseComboboxProps<T>> & {
+    children?: JSX.Element | ((context: ComboboxContext<T>) => JSX.Element);
+};
+export declare const Combobox: <T extends CollectionItem>(props: ComboboxProps<T>) => JSX.Element;

package/combobox/combobox.mjs

@@ -7,14 +7,14 @@ import { ComboboxProvider } from './combobox-context.mjs';
 import { useCombobox } from './use-combobox.mjs';
 
 const Combobox = props => {
-  const [useComboboxProps, localProps] = createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onFocusOutside', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectionData', 'selectOnTab', 'translations']);
-  const combobox = useCombobox(useComboboxProps);
-  const rootProps = mergeProps(() => combobox().rootProps, localProps);
-  const getChildren = () => runIfFn(localProps.children, combobox);
+  const [selectProps, localProps] = createSplitProps()(props, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const api = useCombobox(selectProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(ComboboxProvider, {
-    value: combobox,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(rootProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }

package/combobox/index.cjs

@@ -2,30 +2,33 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox$1 = require('./combobox.cjs');
+const combobox = require('./combobox.cjs');
 const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const comboboxControl = require('./combobox-control.cjs');
 const comboboxInput = require('./combobox-input.cjs');
+const comboboxItem = require('./combobox-item.cjs');
+const comboboxItemGroup = require('./combobox-item-group.cjs');
+const comboboxItemGroupLabel = require('./combobox-item-group-label.cjs');
+const comboboxItemIndicator = require('./combobox-item-indicator.cjs');
+const comboboxItemText = require('./combobox-item-text.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
-const comboboxOption = require('./combobox-option.cjs');
-const comboboxOptionGroup = require('./combobox-option-group.cjs');
-const comboboxOptionGroupLabel = require('./combobox-option-group-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
-const combobox = require('@zag-js/combobox');
 
-const Combobox = Object.assign(combobox$1.Combobox, {
-  Root: combobox$1.Combobox,
+const Combobox = Object.assign(combobox.Combobox, {
+  Root: combobox.Combobox,
   ClearTrigger: comboboxClearTrigger.ComboboxClearTrigger,
   Content: comboboxContent.ComboboxContent,
   Control: comboboxControl.ComboboxControl,
   Input: comboboxInput.ComboboxInput,
+  Item: comboboxItem.ComboboxItem,
+  ItemGroup: comboboxItemGroup.ComboboxItemGroup,
+  ItemGroupLabel: comboboxItemGroupLabel.ComboboxItemGroupLabel,
+  ItemIndicator: comboboxItemIndicator.ComboboxItemIndicator,
+  ItemText: comboboxItemText.ComboboxItemText,
   Label: comboboxLabel.ComboboxLabel,
-  Option: comboboxOption.ComboboxOption,
-  OptionGroup: comboboxOptionGroup.ComboboxOptionGroup,
-  OptionGroupLabel: comboboxOptionGroupLabel.ComboboxOptionGroupLabel,
   Positioner: comboboxPositioner.ComboboxPositioner,
   Trigger: comboboxTrigger.ComboboxTrigger
 });
@@ -35,14 +38,12 @@ exports.ComboboxContent = comboboxContent.ComboboxContent;
 exports.useComboboxContext = comboboxContext.useComboboxContext;
 exports.ComboboxControl = comboboxControl.ComboboxControl;
 exports.ComboboxInput = comboboxInput.ComboboxInput;
+exports.ComboboxItem = comboboxItem.ComboboxItem;
+exports.ComboboxItemGroup = comboboxItemGroup.ComboboxItemGroup;
+exports.ComboboxItemGroupLabel = comboboxItemGroupLabel.ComboboxItemGroupLabel;
+exports.ComboboxItemIndicator = comboboxItemIndicator.ComboboxItemIndicator;
+exports.ComboboxItemText = comboboxItemText.ComboboxItemText;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
-exports.ComboboxOption = comboboxOption.ComboboxOption;
-exports.ComboboxOptionGroup = comboboxOptionGroup.ComboboxOptionGroup;
-exports.ComboboxOptionGroupLabel = comboboxOptionGroupLabel.ComboboxOptionGroupLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
-Object.defineProperty(exports, 'comboboxAnatomy', {
-  enumerable: true,
-  get: () => combobox.anatomy
-});
 exports.Combobox = Combobox;

package/combobox/index.d.ts

@@ -1,29 +1,33 @@
 import { JSX } from 'solid-js';
+import type { CollectionItem } from '../types';
 import { type ComboboxProps } from './combobox';
 import { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
 import { ComboboxContent, type ComboboxContentProps } from './combobox-content';
-import { useComboboxContext } from './combobox-context';
+import { useComboboxContext, type ComboboxContext } from './combobox-context';
 import { ComboboxControl, type ComboboxControlProps } from './combobox-control';
 import { ComboboxInput, type ComboboxInputProps } from './combobox-input';
+import { ComboboxItem, type ComboboxItemProps } from './combobox-item';
+import { ComboboxItemGroup, type ComboboxItemGroupProps } from './combobox-item-group';
+import { ComboboxItemGroupLabel, type ComboboxItemGroupLabelProps } from './combobox-item-group-label';
+import { ComboboxItemIndicator, type ComboboxItemIndicatorProps } from './combobox-item-indicator';
+import { ComboboxItemText, type ComboboxItemTextProps } from './combobox-item-text';
 import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
-import { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
-import { ComboboxOptionGroup, type ComboboxOptionGroupProps } from './combobox-option-group';
-import { ComboboxOptionGroupLabel, type ComboboxOptionGroupLabelProps } from './combobox-option-group-label';
 import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
 import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
-import { comboboxAnatomy } from './combobox.anatomy';
-declare const Combobox: ((props: ComboboxProps) => JSX.Element) & {
-    Root: (props: ComboboxProps) => JSX.Element;
+declare const Combobox: (<T extends CollectionItem>(props: ComboboxProps<T>) => JSX.Element) & {
+    Root: <T extends CollectionItem>(props: ComboboxProps<T>) => JSX.Element;
     ClearTrigger: (props: ComboboxClearTriggerProps) => JSX.Element;
     Content: (props: ComboboxContentProps) => JSX.Element;
     Control: (props: ComboboxControlProps) => JSX.Element;
     Input: (props: ComboboxInputProps) => JSX.Element;
+    Item: (props: ComboboxItemProps) => JSX.Element;
+    ItemGroup: (props: ComboboxItemGroupProps) => JSX.Element;
+    ItemGroupLabel: (props: ComboboxItemGroupLabelProps) => JSX.Element;
+    ItemIndicator: (props: ComboboxItemIndicatorProps) => JSX.Element;
+    ItemText: (props: ComboboxItemTextProps) => JSX.Element;
     Label: (props: ComboboxLabelProps) => JSX.Element;
-    Option: (props: ComboboxOptionProps) => JSX.Element;
-    OptionGroup: (props: ComboboxOptionGroupProps) => JSX.Element;
-    OptionGroupLabel: (props: ComboboxOptionGroupLabelProps) => JSX.Element;
     Positioner: (props: ComboboxPositionerProps) => JSX.Element;
     Trigger: (props: ComboboxTriggerProps) => JSX.Element;
 };
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
-export type { ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxLabelProps, ComboboxOptionGroupLabelProps, ComboboxOptionGroupProps, ComboboxOptionProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, useComboboxContext, };
+export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };

package/combobox/index.mjs

@@ -4,13 +4,14 @@ import { ComboboxContent } from './combobox-content.mjs';
 export { useComboboxContext } from './combobox-context.mjs';
 import { ComboboxControl } from './combobox-control.mjs';
 import { ComboboxInput } from './combobox-input.mjs';
+import { ComboboxItem } from './combobox-item.mjs';
+import { ComboboxItemGroup } from './combobox-item-group.mjs';
+import { ComboboxItemGroupLabel } from './combobox-item-group-label.mjs';
+import { ComboboxItemIndicator } from './combobox-item-indicator.mjs';
+import { ComboboxItemText } from './combobox-item-text.mjs';
 import { ComboboxLabel } from './combobox-label.mjs';
-import { ComboboxOption } from './combobox-option.mjs';
-import { ComboboxOptionGroup } from './combobox-option-group.mjs';
-import { ComboboxOptionGroupLabel } from './combobox-option-group-label.mjs';
 import { ComboboxPositioner } from './combobox-positioner.mjs';
 import { ComboboxTrigger } from './combobox-trigger.mjs';
-export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
 
 const Combobox = Object.assign(Combobox$1, {
   Root: Combobox$1,
@@ -18,12 +19,14 @@ const Combobox = Object.assign(Combobox$1, {
   Content: ComboboxContent,
   Control: ComboboxControl,
   Input: ComboboxInput,
+  Item: ComboboxItem,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  ItemIndicator: ComboboxItemIndicator,
+  ItemText: ComboboxItemText,
   Label: ComboboxLabel,
-  Option: ComboboxOption,
-  OptionGroup: ComboboxOptionGroup,
-  OptionGroupLabel: ComboboxOptionGroupLabel,
   Positioner: ComboboxPositioner,
   Trigger: ComboboxTrigger
 });
 
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger };

package/combobox/use-combobox.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const combobox = require('@zag-js/combobox');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
 require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
@@ -28,9 +29,18 @@ function _interopNamespaceDefault(e) {
 const combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
 
 const useCombobox = (props) => {
+  const [collectionOptions, rest] = createSplitProps.createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = combobox__namespace.collection(collectionOptions);
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
-  const [state, send] = solid.useMachine(combobox__namespace.machine(context), { context });
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode, collection }, rest);
+  const [state, send] = solid.useMachine(combobox__namespace.machine(context), {
+    context
+  });
   return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.normalizeProps));
 };
 

package/combobox/use-combobox.d.ts

@@ -1,7 +1,9 @@
+import type { CollectionOptions } from '@zag-js/combobox';
 import * as combobox from '@zag-js/combobox';
 import { type PropTypes } from '@zag-js/solid';
 import { type Accessor } from 'solid-js';
-import { type Optional } from '../types';
-export type UseComboboxProps = Optional<combobox.Context, 'id'>;
-export type UseComboboxReturn = Accessor<combobox.Api<PropTypes>>;
-export declare const useCombobox: (props: UseComboboxProps) => UseComboboxReturn;
+import { type CollectionItem, type Optional } from '../types';
+export interface UseComboboxProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<combobox.Context<T>, 'id'>, 'collection'> {
+}
+export type UseComboboxReturn<T extends CollectionItem> = Accessor<combobox.Api<PropTypes, T>>;
+export declare const useCombobox: <T extends CollectionItem>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;

package/combobox/use-combobox.mjs

@@ -1,13 +1,23 @@
 import * as combobox from '@zag-js/combobox';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
 import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useCombobox = (props) => {
+  const [collectionOptions, rest] = createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = combobox.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
-  const [state, send] = useMachine(combobox.machine(context), { context });
+  const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
+  const [state, send] = useMachine(combobox.machine(context), {
+    context
+  });
   return createMemo(() => combobox.connect(state, send, normalizeProps));
 };
 

package/date-picker/date-picker-clear-trigger.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerClearTrigger = props => {
-  const datePicker = datePickerContext.useDatePickerContext();
-  const triggerProps = solid.mergeProps(() => datePicker().clearTriggerProps, props);
-  return web.createComponent(factory.ark.button, triggerProps);
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.DatePickerClearTrigger = DatePickerClearTrigger;

package/date-picker/date-picker-clear-trigger.d.ts

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

package/date-picker/date-picker-clear-trigger.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerClearTrigger = props => {
-  const datePicker = useDatePickerContext();
-  const triggerProps = mergeProps(() => datePicker().clearTriggerProps, props);
-  return createComponent(ark.button, triggerProps);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 export { DatePickerClearTrigger };

package/date-picker/date-picker-content.cjs

@@ -8,8 +8,8 @@ const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerContent = props => {
-  const datePicker = datePickerContext.useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => datePicker().contentProps, props);
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, props);
   return web.createComponent(factory.ark.div, mergedProps);
 };
 

package/date-picker/date-picker-content.d.ts

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

package/date-picker/date-picker-content.mjs

@@ -4,8 +4,8 @@ import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerContent = props => {
-  const datePicker = useDatePickerContext();
-  const mergedProps = mergeProps(() => datePicker().contentProps, props);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps(() => api().contentProps, props);
   return createComponent(ark.div, mergedProps);
 };
 

package/date-picker/date-picker-control.cjs

@@ -8,8 +8,8 @@ const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerControl = props => {
-  const datePicker = datePickerContext.useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => datePicker().controlProps, props);
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return web.createComponent(factory.ark.div, mergedProps);
 };
 

package/date-picker/date-picker-control.d.ts

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

package/date-picker/date-picker-control.mjs

@@ -4,8 +4,8 @@ import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerControl = props => {
-  const datePicker = useDatePickerContext();
-  const mergedProps = mergeProps(() => datePicker().controlProps, props);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps(() => api().controlProps, props);
   return createComponent(ark.div, mergedProps);
 };
 

package/date-picker/date-picker-input.cjs

@@ -8,8 +8,8 @@ const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerInput = props => {
-  const datePicker = datePickerContext.useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => datePicker().inputProps, props);
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
   return web.createComponent(factory.ark.input, mergedProps);
 };
 

package/date-picker/date-picker-input.d.ts

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

package/date-picker/date-picker-input.mjs

@@ -4,8 +4,8 @@ import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerInput = props => {
-  const datePicker = useDatePickerContext();
-  const mergedProps = mergeProps(() => datePicker().inputProps, props);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps(() => api().inputProps, props);
   return createComponent(ark.input, mergedProps);
 };
 

package/date-picker/date-picker-label.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 datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerLabel = props => {
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
+};
+
+exports.DatePickerLabel = DatePickerLabel;

package/date-picker/date-picker-label.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export interface DatePickerLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const DatePickerLabel: (props: DatePickerLabelProps) => JSX.Element;

package/date-picker/date-picker-label.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerLabel = props => {
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+export { DatePickerLabel };