@ark-ui/react 0.14.0 → 0.15.0

package/select/select-item-context.mjs

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

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

@@ -10,14 +10,16 @@ const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
-const SelectOptionGroup = react.forwardRef(
+const SelectItemGroupLabel = react.forwardRef(
   (props, ref) => {
-    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
-    const { getOptionGroupProps } = selectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(getOptionGroupProps(optionProps), localProps);
+    const [itemGroupLabelProps, localProps] = createSplitProps.createSplitProps()(props, [
+      "htmlFor"
+    ]);
+    const api = selectContext.useSelectContext();
+    const mergedProps = react$1.mergeProps(api.getItemGroupLabelProps(itemGroupLabelProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-SelectOptionGroup.displayName = "SelectOptionGroup";
+SelectItemGroupLabel.displayName = "SelectItemGroupLabel";
 
-exports.SelectOptionGroup = SelectOptionGroup;
+exports.SelectItemGroupLabel = SelectItemGroupLabel;

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

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+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: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "htmlFor"> & ItemGroupLabelProps & RefAttributes<HTMLDivElement>>;

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

@@ -6,14 +6,16 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
-const SelectOptionGroup = forwardRef(
+const SelectItemGroupLabel = forwardRef(
   (props, ref) => {
-    const [optionProps, localProps] = createSplitProps()(props, ["id"]);
-    const { getOptionGroupProps } = useSelectContext();
-    const mergedProps = mergeProps(getOptionGroupProps(optionProps), localProps);
+    const [itemGroupLabelProps, localProps] = createSplitProps()(props, [
+      "htmlFor"
+    ]);
+    const api = useSelectContext();
+    const mergedProps = mergeProps(api.getItemGroupLabelProps(itemGroupLabelProps), localProps);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-SelectOptionGroup.displayName = "SelectOptionGroup";
+SelectItemGroupLabel.displayName = "SelectItemGroupLabel";
 
-export { SelectOptionGroup };
+export { SelectItemGroupLabel };

package/select/select-item-group.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const selectContext = require('./select-context.cjs');
+
+const SelectItemGroup = react.forwardRef((props, ref) => {
+  const [itemPropsProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.getItemGroupProps(itemPropsProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+SelectItemGroup.displayName = "SelectItemGroup";
+
+exports.SelectItemGroup = SelectItemGroup;

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

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+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: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & ItemGroupProps & RefAttributes<HTMLDivElement>>;

package/select/select-item-group.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectItemGroup = forwardRef((props, ref) => {
+  const [itemPropsProps, localProps] = createSplitProps()(props, ["id"]);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(api.getItemGroupProps(itemPropsProps), localProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+SelectItemGroup.displayName = "SelectItemGroup";
+
+export { SelectItemGroup };

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

@@ -8,15 +8,16 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
+const selectItemContext = require('./select-item-context.cjs');
 
-const SelectOptionGroupLabel = react.forwardRef(
+const SelectItemIndicator = react.forwardRef(
   (props, ref) => {
-    const { htmlFor, ...labelProps } = props;
-    const { getOptionGroupLabelProps } = selectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(getOptionGroupLabelProps({ htmlFor }), labelProps);
+    const api = selectContext.useSelectContext();
+    const itemProps = selectItemContext.useSelectItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemIndicatorProps(itemProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-SelectOptionGroupLabel.displayName = "SelectOptionGroupLabel";
+SelectItemIndicator.displayName = "SelectItemIndicator";
 
-exports.SelectOptionGroupLabel = SelectOptionGroupLabel;
+exports.SelectItemIndicator = SelectItemIndicator;

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

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SelectItemIndicatorProps = HTMLArkProps<'div'>;
+export declare const SelectItemIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & RefAttributes<HTMLDivElement>>;

package/select/select-item-indicator.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+import { useSelectItemContext } from './select-item-context.mjs';
+
+const SelectItemIndicator = forwardRef(
+  (props, ref) => {
+    const api = useSelectContext();
+    const itemProps = useSelectItemContext();
+    const mergedProps = mergeProps(api.getItemIndicatorProps(itemProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+SelectItemIndicator.displayName = "SelectItemIndicator";
+
+export { SelectItemIndicator };

package/select/select-item-text.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const selectContext = require('./select-context.cjs');
+const selectItemContext = require('./select-item-context.cjs');
+
+const SelectItemText = react.forwardRef((props, ref) => {
+  const api = selectContext.useSelectContext();
+  const itemProps = selectItemContext.useSelectItemContext();
+  const mergedProps = react$1.mergeProps(api.getItemTextProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+});
+SelectItemText.displayName = "SelectItemText";
+
+exports.SelectItemText = SelectItemText;

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

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SelectItemTextProps = HTMLArkProps<'span'>;
+export declare const SelectItemText: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & RefAttributes<HTMLDivElement>>;

package/select/select-item-text.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+import { useSelectItemContext } from './select-item-context.mjs';
+
+const SelectItemText = forwardRef((props, ref) => {
+  const api = useSelectContext();
+  const itemProps = useSelectItemContext();
+  const mergedProps = mergeProps(api.getItemTextProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+});
+SelectItemText.displayName = "SelectItemText";
+
+export { SelectItemText };

package/select/select-item.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+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 = react.forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, ["item"]);
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn.runIfFn(children, itemState);
+  return /* @__PURE__ */ jsxRuntime.jsx(selectItemContext.SelectItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+SelectItem.displayName = "SelectItem";
+
+exports.SelectItem = SelectItem;

package/select/select-item.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { ItemProps, ItemState } from '@zag-js/select';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type SelectItemProps = Assign<HTMLArkProps<'div'>, {
+    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+}> & ItemProps;
+export declare const SelectItem: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
+    children?: ReactNode | ((props: ItemState) => React.ReactNode);
+} & ItemProps & RefAttributes<HTMLDivElement>>;

package/select/select-item.mjs

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+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 = forwardRef((props, ref) => {
+  const [itemProps, { children, ...localProps }] = createSplitProps()(props, ["item"]);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
+  const view = runIfFn(children, itemState);
+  return /* @__PURE__ */ jsx(SelectItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+SelectItem.displayName = "SelectItem";
+
+export { SelectItem };

package/select/select-label.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = selectContext.useSelectContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
 SelectLabel.displayName = "SelectLabel";

package/select/select-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SelectLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const SelectLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SelectLabelProps = HTMLArkProps<'label'>;
+export declare const SelectLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/select/select-label.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
 const SelectLabel = forwardRef((props, ref) => {
-  const { labelProps } = useSelectContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
 SelectLabel.displayName = "SelectLabel";

package/select/select-positioner.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectPositioner = react.forwardRef((props, ref) => {
-  const { positionerProps } = selectContext.useSelectContext();
-  const mergedProps = react$1.mergeProps(positionerProps, props);
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.positionerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SelectPositioner.displayName = "SelectPositioner";

package/select/select-positioner.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SelectPositionerProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const SelectPositioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SelectPositionerProps = HTMLArkProps<'div'>;
+export declare const SelectPositioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/select/select-positioner.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
 const SelectPositioner = forwardRef((props, ref) => {
-  const { positionerProps } = useSelectContext();
-  const mergedProps = mergeProps(positionerProps, props);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(api.positionerProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SelectPositioner.displayName = "SelectPositioner";

package/select/select-trigger.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectTrigger = react.forwardRef((props, ref) => {
-  const { triggerProps } = selectContext.useSelectContext();
-  const mergedProps = react$1.mergeProps(triggerProps, props);
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.triggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 SelectTrigger.displayName = "SelectTrigger";

package/select/select-trigger.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SelectTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const SelectTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SelectTriggerProps = HTMLArkProps<'button'>;
+export declare const SelectTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/select/select-trigger.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
 const SelectTrigger = forwardRef((props, ref) => {
-  const { triggerProps } = useSelectContext();
-  const mergedProps = mergeProps(triggerProps, props);
+  const api = useSelectContext();
+  const mergedProps = mergeProps(api.triggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 SelectTrigger.displayName = "SelectTrigger";

package/select/select-value.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const factory = require('../factory.cjs');
+const selectContext = require('./select-context.cjs');
+const select_anatomy = require('./select.anatomy.cjs');
+
+const SelectValue = react.forwardRef((props, ref) => {
+  const { children, placeholder, ...rest } = props;
+  const api = selectContext.useSelectContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...select_anatomy.parts.value.attrs, ...rest, ref, children: children || api.valueAsString || placeholder });
+});
+SelectValue.displayName = "SelectValue";
+
+exports.SelectValue = SelectValue;

package/select/select-value.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type SelectValueProps = HTMLArkProps<'span'>;
+export declare const SelectValue: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & RefAttributes<HTMLSpanElement>>;

package/select/select-value.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+import { parts } from './select.anatomy.mjs';
+
+const SelectValue = forwardRef((props, ref) => {
+  const { children, placeholder, ...rest } = props;
+  const api = useSelectContext();
+  return /* @__PURE__ */ jsx(ark.span, { ...parts.value.attrs, ...rest, ref, children: children || api.valueAsString || placeholder });
+});
+SelectValue.displayName = "SelectValue";
+
+export { SelectValue };

package/select/select.anatomy.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const select = require('@zag-js/select');
+
+const selectAnatomy = select.anatomy.extendWith("value");
+const parts = selectAnatomy.build();
+
+exports.parts = parts;
+exports.selectAnatomy = selectAnatomy;

package/select/select.anatomy.d.ts

@@ -1 +1,3 @@
-export { anatomy as selectAnatomy } from '@zag-js/select';
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const selectAnatomy: AnatomyInstance<"value" | "label" | "content" | "trigger" | "positioner" | "root" | "item" | "control" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel">;
+export declare const parts: Record<"value" | "label" | "content" | "trigger" | "positioner" | "root" | "item" | "control" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel", AnatomyPart>;

package/select/select.anatomy.mjs

@@ -0,0 +1,7 @@
+'use client';
+import { anatomy } from '@zag-js/select';
+
+const selectAnatomy = anatomy.extendWith("value");
+const parts = selectAnatomy.build();
+
+export { parts, selectAnatomy };

package/select/select.cjs

@@ -4,41 +4,54 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 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 [useSelectProps, { children }] = createSplitProps.createSplitProps()(props, [
-    "closeOnSelect",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "highlightedOption",
-    "id",
-    "ids",
-    "invalid",
-    "loop",
-    "name",
-    "onChange",
-    "onClose",
-    "onFocusOutside",
-    "onHighlight",
-    "onInteractOutside",
-    "onOpen",
-    "onPointerDownOutside",
-    "positioning",
-    "readOnly",
-    "selectedOption",
-    "selectOnTab"
-  ]);
-  const select = useSelect.useSelect(useSelectProps);
-  const view = runIfFn.runIfFn(children, select);
-  return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: select, children: view });
+const SelectImpl = (props, ref) => {
+  const [useSelectProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "closeOnSelect",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "highlightedValue",
+      "id",
+      "ids",
+      "invalid",
+      "isItemDisabled",
+      "items",
+      "itemToString",
+      "itemToValue",
+      "loop",
+      "multiple",
+      "name",
+      "onChange",
+      "onClose",
+      "onFocusOutside",
+      "onHighlight",
+      "onInteractOutside",
+      "onOpen",
+      "onPointerDownOutside",
+      "open",
+      "positioning",
+      "readOnly",
+      "selectOnBlur",
+      "value"
+    ]
+  );
+  const api = useSelect.useSelect(useSelectProps);
+  const view = runIfFn.runIfFn(children, api);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 };
+const Select = react.forwardRef(SelectImpl);
 
 exports.Select = Select;

package/select/select.d.ts

@@ -1,8 +1,11 @@
-import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
-import { type Assign } from '../types';
+import { type HTMLArkProps } from '../factory';
+import { type Assign, type CollectionItem } from '../types';
 import { type UseSelectProps, type UseSelectReturn } from './use-select';
-export type SelectProps = Assign<UseSelectProps, {
-    children?: ReactNode | ((state: UseSelectReturn) => ReactNode);
-}>;
-export declare const Select: (props: SelectProps) => JSX.Element;
+export type SelectProps<T extends CollectionItem> = Assign<HTMLArkProps<'div'>, UseSelectProps<T>> & {
+    children?: ReactNode | ((state: UseSelectReturn<T>) => ReactNode);
+};
+export interface SelectComponent {
+    <T extends CollectionItem>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+}
+export declare const Select: SelectComponent;