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

package/select/select-content.d.ts

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

package/select/select-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { SelectContent };

package/select/select-context.d.ts

@@ -1,4 +1,5 @@
 import { ContextProviderComponent } from 'solid-js';
+import type { CollectionItem } from '../types';
 import { type UseSelectReturn } from './use-select';
-export type SelectContext = UseSelectReturn;
-export declare const SelectProvider: ContextProviderComponent<UseSelectReturn>, useSelectContext: () => UseSelectReturn;
+export type SelectContext<T extends CollectionItem> = UseSelectReturn<T>;
+export declare const SelectProvider: ContextProviderComponent<SelectContext<any>>, useSelectContext: () => SelectContext<any>;

package/select/select-control.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 selectContext = require('./select-context.cjs');
+
+const SelectControl = props => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.SelectControl = SelectControl;

package/select/select-control.d.ts

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

package/select/select-control.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectControl = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { SelectControl };

package/select/select-indicator.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 selectContext = require('./select-context.cjs');
+
+const SelectIndicator = props => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.SelectIndicator = SelectIndicator;

package/select/select-indicator.d.ts

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

package/select/select-indicator.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectIndicator = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { SelectIndicator };

package/select/select-item-context.cjs

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

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

@@ -0,0 +1,4 @@
+import { ContextProviderComponent } from 'solid-js';
+import type { ItemProps } from '@zag-js/select';
+export type SelectItemContext = ItemProps;
+export declare const SelectItemProvider: ContextProviderComponent<SelectItemContext>, useSelectItemContext: () => SelectItemContext;

package/select/select-item-context.mjs

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

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

@@ -8,11 +8,11 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
-const SelectOptionGroupLabel = props => {
-  const [labelParams, restProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
+const SelectItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
   const api = selectContext.useSelectContext();
-  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.SelectOptionGroupLabel = SelectOptionGroupLabel;
+exports.SelectItemGroupLabel = SelectItemGroupLabel;

package/select/select-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 SelectItemGroupLabelProps = Assign<HTMLArkProps<'div'>, ItemGroupLabelProps>;
+export declare const SelectItemGroupLabel: (props: SelectItemGroupLabelProps) => JSX.Element;

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

@@ -4,11 +4,11 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
-const SelectOptionGroupLabel = props => {
-  const [labelParams, restProps] = createSplitProps()(props, ['htmlFor']);
+const SelectItemGroupLabel = props => {
+  const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
   const api = useSelectContext();
-  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 { SelectOptionGroupLabel };
+export { SelectItemGroupLabel };

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

@@ -8,11 +8,11 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
-const SelectOptionGroup = props => {
-  const [optionGroupParams, restProps] = createSplitProps.createSplitProps()(props, ['id']);
+const SelectItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps.createSplitProps()(props, ['id']);
   const api = selectContext.useSelectContext();
-  const groupProps = solid.mergeProps(() => api().getOptionGroupProps(optionGroupParams), restProps);
-  return web.createComponent(factory.ark.div, groupProps);
+  const mergedProps = solid.mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.SelectOptionGroup = SelectOptionGroup;
+exports.SelectItemGroup = SelectItemGroup;

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

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

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

@@ -4,11 +4,11 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
-const SelectOptionGroup = props => {
-  const [optionGroupParams, restProps] = createSplitProps()(props, ['id']);
+const SelectItemGroup = props => {
+  const [groupProps, localProps] = createSplitProps()(props, ['id']);
   const api = useSelectContext();
-  const groupProps = mergeProps(() => api().getOptionGroupProps(optionGroupParams), restProps);
-  return createComponent(ark.div, groupProps);
+  const mergedProps = mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+  return createComponent(ark.div, mergedProps);
 };
 
-export { SelectOptionGroup };
+export { SelectItemGroup };

package/select/select-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 selectContext = require('./select-context.cjs');
+const selectItemContext = require('./select-item-context.cjs');
+
+const SelectItemIndicator = props => {
+  const api = selectContext.useSelectContext();
+  const itemProps = selectItemContext.useSelectItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.SelectItemIndicator = SelectItemIndicator;

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

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

package/select/select-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 { useSelectContext } from './select-context.mjs';
+import { useSelectItemContext } from './select-item-context.mjs';
+
+const SelectItemIndicator = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { SelectItemIndicator };

package/select/select-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 selectContext = require('./select-context.cjs');
+const selectItemContext = require('./select-item-context.cjs');
+
+const SelectItemText = props => {
+  const api = selectContext.useSelectContext();
+  const itemProps = selectItemContext.useSelectItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(factory.ark.span, mergedProps);
+};
+
+exports.SelectItemText = SelectItemText;

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

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

package/select/select-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 { useSelectContext } from './select-context.mjs';
+import { useSelectItemContext } from './select-item-context.mjs';
+
+const SelectItemText = props => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
+  return createComponent(ark.span, mergedProps);
+};
+
+export { SelectItemText };

package/select/select-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 selectContext = require('./select-context.cjs');
+const selectItemContext = require('./select-item-context.cjs');
+
+const SelectItem = props => {
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ['item']);
+  const api = selectContext.useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return web.createComponent(selectItemContext.SelectItemProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+exports.SelectItem = SelectItem;

package/select/select-item.d.ts

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

package/select/select-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 { useSelectContext } from './select-context.mjs';
+import { SelectItemProvider } from './select-item-context.mjs';
+
+const SelectItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+  return createComponent(SelectItemProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+export { SelectItem };

package/select/select-label.cjs

@@ -9,8 +9,8 @@ const selectContext = require('./select-context.cjs');
 
 const SelectLabel = props => {
   const api = selectContext.useSelectContext();
-  const labelProps = solid.mergeProps(() => api().labelProps, props);
-  return web.createComponent(factory.ark.label, labelProps);
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
 };
 
 exports.SelectLabel = SelectLabel;

package/select/select-label.mjs

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

package/select/select-positioner.cjs

@@ -9,8 +9,8 @@ const selectContext = require('./select-context.cjs');
 
 const SelectPositioner = props => {
   const api = selectContext.useSelectContext();
-  const positionerProps = solid.mergeProps(() => api().positionerProps, props);
-  return web.createComponent(factory.ark.div, positionerProps);
+  const mergedProps = solid.mergeProps(() => api().positionerProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SelectPositioner = SelectPositioner;

package/select/select-positioner.mjs

@@ -5,8 +5,8 @@ import { useSelectContext } from './select-context.mjs';
 
 const SelectPositioner = props => {
   const api = useSelectContext();
-  const positionerProps = mergeProps(() => api().positionerProps, props);
-  return createComponent(ark.div, positionerProps);
+  const mergedProps = mergeProps(() => api().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SelectPositioner };

package/select/select-trigger.cjs

@@ -9,8 +9,8 @@ const selectContext = require('./select-context.cjs');
 
 const SelectTrigger = props => {
   const api = selectContext.useSelectContext();
-  const triggerProps = solid.mergeProps(() => api().triggerProps, props);
-  return web.createComponent(factory.ark.button, triggerProps);
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
 exports.SelectTrigger = SelectTrigger;

package/select/select-trigger.mjs

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

package/select/select-value-text.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const selectContext = require('./select-context.cjs');
+
+const SelectValueText = props => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
+  return web.createComponent(factory.ark.span, web.mergeProps(mergedProps, {
+    get children() {
+      return api().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+exports.SelectValueText = SelectValueText;

package/select/select-value-text.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export interface SelectValueTextProps extends HTMLArkProps<'span'> {
+    placeholder?: string;
+}
+export declare const SelectValueText: (props: SelectValueTextProps) => JSX.Element;

package/select/select-value-text.mjs

@@ -0,0 +1,17 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { selectAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectValueText = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => selectAnatomy.build().valueText.attrs, props);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    get children() {
+      return api().valueAsString || props.placeholder;
+    }
+  }));
+};
+
+export { SelectValueText };

package/select/select.cjs

@@ -3,19 +3,26 @@
 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 selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
 
 const Select = props => {
-  const [selectParams, restProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onFocusOutside', 'onHighlight', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'positioning', 'readOnly', 'selectedOption', 'selectOnTab']);
-  const api = useSelect.useSelect(selectParams);
-  const getChildren = () => runIfFn.runIfFn(restProps.children, api);
+  const [selectProps, localProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
+  const api = useSelect.useSelect(selectProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(selectContext.SelectProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };

package/select/select.d.ts

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

package/select/select.mjs

@@ -1,17 +1,24 @@
-import { createComponent } from 'solid-js/web';
+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 { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
 
 const Select = props => {
-  const [selectParams, restProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onFocusOutside', 'onHighlight', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'positioning', 'readOnly', 'selectedOption', 'selectOnTab']);
-  const api = useSelect(selectParams);
-  const getChildren = () => runIfFn(restProps.children, api);
+  const [selectProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'selectOnBlur', 'value']);
+  const api = useSelect(selectProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(SelectProvider, {
     value: api,
     get children() {
-      return getChildren();
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
   });
 };

package/select/select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/select/use-select.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const select = require('@zag-js/select');
 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,8 +29,15 @@ function _interopNamespaceDefault(e) {
 const select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
 
 const useSelect = (props) => {
+  const [collectionOptions, rest] = createSplitProps.createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = select__namespace.collection(collectionOptions);
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode, collection }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context), {
     context
   });