@ark-ui/react 0.14.0 → 0.15.0

package/segment-group/segment-group-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type SegmentGroupLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const SegmentGroupLabel: 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 SegmentGroupLabelProps = HTMLArkProps<'label'>;
+export declare const SegmentGroupLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/segment-group/segment-group.cjs

@@ -24,7 +24,6 @@ const SegmentGroup = react.forwardRef((props, ref) => {
     "name",
     "onChange",
     "orientation",
-    "readOnly",
     "value"
   ]);
   const segmentGroup = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);

package/segment-group/segment-group.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/radio-group';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSegmentGroupProps } from './use-segment-group';
-export type SegmentGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseSegmentGroupProps>;
-export declare const SegmentGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | null | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type SegmentGroupProps = Assign<HTMLArkProps<'div'>, UseSegmentGroupProps>;
+export declare const SegmentGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseSegmentGroupProps> & UseSegmentGroupProps & RefAttributes<HTMLDivElement>>;

package/segment-group/segment-group.mjs

@@ -20,7 +20,6 @@ const SegmentGroup = forwardRef((props, ref) => {
     "name",
     "onChange",
     "orientation",
-    "readOnly",
     "value"
   ]);
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);

package/segment-group/segment-label.d.ts

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

package/segment-group/segment.cjs

@@ -6,16 +6,24 @@ 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 segmentContext = require('./segment-context.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const Segment = react.forwardRef((props, ref) => {
-  const { value, disabled, invalid, readOnly, ...divProps } = props;
-  const { getRadioProps } = segmentGroupContext.useSegmentGroupContext();
-  const mergedProps = react$1.mergeProps(getRadioProps({ value, disabled }), divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(segmentContext.SegmentProvider, { value: { value, disabled, invalid, readOnly }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ...segmentGroup_anatomy.parts.radio.attrs, ref }) });
+  const [segmentProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "value",
+    "disabled",
+    "invalid"
+  ]);
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const mergedProps = react$1.mergeProps(api.getRadioProps(segmentProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(segmentContext.SegmentProvider, { value: segmentProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ...segmentGroup_anatomy.parts.radio.attrs, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.getRadioHiddenInputProps(segmentProps) })
+  ] });
 });
 Segment.displayName = "Segment";
 

package/segment-group/segment.d.ts

@@ -1,20 +1,8 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { RadioProps } from '@zag-js/radio-group';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type SegmentContext } from './segment-context';
-export type SegmentProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, SegmentContext>;
-export declare const Segment: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof {
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-}> & {
-    value: string;
-    disabled?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    invalid?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export type SegmentProps = Assign<HTMLArkProps<'label'>, SegmentContext>;
+export declare const Segment: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, keyof RadioProps> & RadioProps & RefAttributes<HTMLLabelElement>>;

package/segment-group/segment.mjs

@@ -1,17 +1,25 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, 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 { SegmentProvider } from './segment-context.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 
 const Segment = forwardRef((props, ref) => {
-  const { value, disabled, invalid, readOnly, ...divProps } = props;
-  const { getRadioProps } = useSegmentGroupContext();
-  const mergedProps = mergeProps(getRadioProps({ value, disabled }), divProps);
-  return /* @__PURE__ */ jsx(SegmentProvider, { value: { value, disabled, invalid, readOnly }, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ...parts.radio.attrs, ref }) });
+  const [segmentProps, localProps] = createSplitProps()(props, [
+    "value",
+    "disabled",
+    "invalid"
+  ]);
+  const api = useSegmentGroupContext();
+  const mergedProps = mergeProps(api.getRadioProps(segmentProps), localProps);
+  return /* @__PURE__ */ jsxs(SegmentProvider, { value: segmentProps, children: [
+    /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ...parts.radio.attrs, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.getRadioHiddenInputProps(segmentProps) })
+  ] });
 });
 Segment.displayName = "Segment";
 

package/segment-group/use-segment-group.d.ts

@@ -1,7 +1,7 @@
 import * as segmentGroup from '@zag-js/radio-group';
 import { type Optional } from '../types';
-export type UseSegmentGroupProps = Optional<segmentGroup.Context, 'id'> & {
+export interface UseSegmentGroupProps extends Optional<segmentGroup.Context, 'id'> {
     defaultValue?: segmentGroup.Context['value'];
-};
+}
 export type UseSegmentGroupReturn = segmentGroup.Api;
 export declare const useSegmentGroup: (props: UseSegmentGroupProps) => UseSegmentGroupReturn;

package/select/index.cjs

@@ -3,38 +3,50 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select$1 = require('./select.cjs');
+const select = require('./select.cjs');
+const selectClearTrigger = require('./select-clear-trigger.cjs');
 const selectContent = require('./select-content.cjs');
 const selectContext = require('./select-context.cjs');
+const selectControl = require('./select-control.cjs');
+const selectItem = require('./select-item.cjs');
+const selectItemGroup = require('./select-item-group.cjs');
+const selectItemGroupLabel = require('./select-item-group-label.cjs');
+const selectItemIndicator = require('./select-item-indicator.cjs');
+const selectItemText = require('./select-item-text.cjs');
 const selectLabel = require('./select-label.cjs');
-const selectOption = require('./select-option.cjs');
-const selectOptionGroup = require('./select-option-group.cjs');
-const selectOptionGroupLabel = require('./select-option-group-label.cjs');
 const selectPositioner = require('./select-positioner.cjs');
 const selectTrigger = require('./select-trigger.cjs');
-const select = require('@zag-js/select');
+const selectValue = require('./select-value.cjs');
+const select_anatomy = require('./select.anatomy.cjs');
 
-const Select = Object.assign(select$1.Select, {
-  Root: select$1.Select,
+const Select = Object.assign(select.Select, {
+  Root: select.Select,
+  ClearTrigger: selectClearTrigger.SelectClearTrigger,
   Content: selectContent.SelectContent,
+  Control: selectControl.SelectControl,
+  Item: selectItem.SelectItem,
+  ItemGroup: selectItemGroup.SelectItemGroup,
+  ItemGroupLabel: selectItemGroupLabel.SelectItemGroupLabel,
+  ItemIndicator: selectItemIndicator.SelectItemIndicator,
+  ItemText: selectItemText.SelectItemText,
   Label: selectLabel.SelectLabel,
-  Option: selectOption.SelectOption,
-  OptionGroup: selectOptionGroup.SelectOptionGroup,
-  OptionGroupLabel: selectOptionGroupLabel.SelectOptionGroupLabel,
   Positioner: selectPositioner.SelectPositioner,
-  Trigger: selectTrigger.SelectTrigger
+  Trigger: selectTrigger.SelectTrigger,
+  Value: selectValue.SelectValue
 });
 
+exports.SelectClearTrigger = selectClearTrigger.SelectClearTrigger;
 exports.SelectContent = selectContent.SelectContent;
 exports.useSelectContext = selectContext.useSelectContext;
+exports.SelectControl = selectControl.SelectControl;
+exports.SelectItem = selectItem.SelectItem;
+exports.SelectItemGroup = selectItemGroup.SelectItemGroup;
+exports.SelectItemGroupLabel = selectItemGroupLabel.SelectItemGroupLabel;
+exports.SelectItemIndicator = selectItemIndicator.SelectItemIndicator;
+exports.SelectItemText = selectItemText.SelectItemText;
 exports.SelectLabel = selectLabel.SelectLabel;
-exports.SelectOption = selectOption.SelectOption;
-exports.SelectOptionGroup = selectOptionGroup.SelectOptionGroup;
-exports.SelectOptionGroupLabel = selectOptionGroupLabel.SelectOptionGroupLabel;
 exports.SelectPositioner = selectPositioner.SelectPositioner;
 exports.SelectTrigger = selectTrigger.SelectTrigger;
-Object.defineProperty(exports, 'selectAnatomy', {
-  enumerable: true,
-  get: () => select.anatomy
-});
+exports.SelectValue = selectValue.SelectValue;
+exports.selectAnatomy = select_anatomy.selectAnatomy;
 exports.Select = Select;

package/select/index.d.ts

@@ -1,57 +1,55 @@
-import { OptionProps, OptionGroupProps } from '@zag-js/select';
-import { PresenceProps } from '..';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, LabelHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
+import { ItemState, ItemProps, ItemGroupProps, ItemGroupLabelProps } from '@zag-js/select';
+import { HTMLArkProps, PresenceProps } from '..';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, ReactNode, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
-import { type SelectProps } from './select';
+import type { CollectionItem } from '../types';
+import { SelectComponent, type SelectProps } from './select';
+import { SelectClearTrigger, type SelectClearTriggerProps } from './select-clear-trigger';
 import { SelectContent, type SelectContentProps } from './select-content';
 import { useSelectContext } from './select-context';
+import { SelectControl, type SelectControlProps } from './select-control';
+import { SelectItem, type SelectItemProps } from './select-item';
+import { SelectItemGroup, type SelectItemGroupProps } from './select-item-group';
+import { SelectItemGroupLabel, type SelectItemGroupLabelProps } from './select-item-group-label';
+import { SelectItemIndicator, type SelectItemIndicatorProps } from './select-item-indicator';
+import { SelectItemText, type SelectItemTextProps } from './select-item-text';
 import { SelectLabel, type SelectLabelProps } from './select-label';
-import { SelectOption, type SelectOptionProps } from './select-option';
-import { SelectOptionGroup, type SelectOptionGroupProps } from './select-option-group';
-import { SelectOptionGroupLabel, type SelectOptionGroupLabelProps } from './select-option-group-label';
 import { SelectPositioner, type SelectPositionerProps } from './select-positioner';
 import { SelectTrigger, type SelectTriggerProps } from './select-trigger';
+import { SelectValue, type SelectValueProps } from './select-value';
 import { selectAnatomy } from './select.anatomy';
-declare const Select: ((props: SelectProps) => JSX.Element) & {
-    Root: (props: SelectProps) => JSX.Element;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Option: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof OptionProps> & OptionProps & RefAttributes<HTMLDivElement>>;
-    OptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;
-    OptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "htmlFor"> & {
-        htmlFor: string;
+declare const Select: SelectComponent & {
+    Root: SelectComponent;
+    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
+        children?: ReactNode | ((props: ItemState) => ReactNode);
+    } & ItemProps & RefAttributes<HTMLDivElement>>;
+    ItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & ItemGroupProps & RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "htmlFor"> & ItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
+    ItemIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & RefAttributes<HTMLDivElement>>;
+    ItemText: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        asChild?: boolean | undefined;
+    } & RefAttributes<HTMLLabelElement>>;
+    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        asChild?: boolean | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Value: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLSpanElement>>;
 };
-export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger, selectAnatomy, useSelectContext, };
-export type { SelectContentProps, SelectLabelProps, SelectOptionGroupLabelProps, SelectOptionGroupProps, SelectOptionProps, SelectPositionerProps, SelectProps, SelectTriggerProps, };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValue, selectAnatomy, useSelectContext, };
+export type { CollectionItem, SelectClearTriggerProps, SelectContentProps, SelectControlProps, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueProps, };

package/select/index.mjs

@@ -1,24 +1,34 @@
 'use client';
 import { Select as Select$1 } from './select.mjs';
+import { SelectClearTrigger } from './select-clear-trigger.mjs';
 import { SelectContent } from './select-content.mjs';
 export { useSelectContext } from './select-context.mjs';
+import { SelectControl } from './select-control.mjs';
+import { SelectItem } from './select-item.mjs';
+import { SelectItemGroup } from './select-item-group.mjs';
+import { SelectItemGroupLabel } from './select-item-group-label.mjs';
+import { SelectItemIndicator } from './select-item-indicator.mjs';
+import { SelectItemText } from './select-item-text.mjs';
 import { SelectLabel } from './select-label.mjs';
-import { SelectOption } from './select-option.mjs';
-import { SelectOptionGroup } from './select-option-group.mjs';
-import { SelectOptionGroupLabel } from './select-option-group-label.mjs';
 import { SelectPositioner } from './select-positioner.mjs';
 import { SelectTrigger } from './select-trigger.mjs';
-export { anatomy as selectAnatomy } from '@zag-js/select';
+import { SelectValue } from './select-value.mjs';
+export { selectAnatomy } from './select.anatomy.mjs';
 
 const Select = Object.assign(Select$1, {
   Root: Select$1,
+  ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
+  Control: SelectControl,
+  Item: SelectItem,
+  ItemGroup: SelectItemGroup,
+  ItemGroupLabel: SelectItemGroupLabel,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: SelectItemText,
   Label: SelectLabel,
-  Option: SelectOption,
-  OptionGroup: SelectOptionGroup,
-  OptionGroupLabel: SelectOptionGroupLabel,
   Positioner: SelectPositioner,
-  Trigger: SelectTrigger
+  Trigger: SelectTrigger,
+  Value: SelectValue
 });
 
-export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValue };

package/select/select-clear-trigger.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 SelectClearTrigger = react.forwardRef(
+  (props, ref) => {
+    const api = selectContext.useSelectContext();
+    const mergedProps = react$1.mergeProps(api.clearTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+SelectClearTrigger.displayName = "SelectClearTrigger";
+
+exports.SelectClearTrigger = SelectClearTrigger;

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

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

package/select/select-clear-trigger.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';
+
+const SelectClearTrigger = forwardRef(
+  (props, ref) => {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(api.clearTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+SelectClearTrigger.displayName = "SelectClearTrigger";
+
+export { SelectClearTrigger };

package/select/select-content.cjs

@@ -7,23 +7,22 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const index = require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
-const selectPresence = require('./select-presence.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const SelectContent = react.forwardRef((props, ref) => {
-  const [presenceProps, selectContentProps] = splitPresenceProps.splitPresenceProps(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(selectPresence.SelectPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerSelectContent, { ref, ...selectContentProps }) });
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = selectContext.useSelectContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(SelectInnerContent, { ref, ...localProps }) });
 });
 SelectContent.displayName = "SelectContent";
-const InnerSelectContent = react.forwardRef(
-  (props, ref) => {
-    const { contentProps } = selectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(contentProps, props);
+const SelectInnerContent = react.forwardRef(
+  function SelectInnerContent2(props, ref) {
+    const api = selectContext.useSelectContext();
+    const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-InnerSelectContent.displayName = "InnerSelectContent";
 
 exports.SelectContent = SelectContent;

package/select/select-content.d.ts

@@ -1,10 +1,7 @@
-import { PresenceProps } from '../presence';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-import { type SelectPresenceProps } from './select-presence';
-export type SelectContentProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<SelectPresenceProps, 'children'>;
-export declare const SelectContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export type SelectContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
+export declare const SelectContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/select/select-content.mjs

@@ -3,23 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
-import { SelectPresence } from './select-presence.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const SelectContent = forwardRef((props, ref) => {
-  const [presenceProps, selectContentProps] = splitPresenceProps(props);
-  return /* @__PURE__ */ jsx(SelectPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerSelectContent, { ref, ...selectContentProps }) });
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useSelectContext();
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(SelectInnerContent, { ref, ...localProps }) });
 });
 SelectContent.displayName = "SelectContent";
-const InnerSelectContent = forwardRef(
-  (props, ref) => {
-    const { contentProps } = useSelectContext();
-    const mergedProps = mergeProps(contentProps, props);
+const SelectInnerContent = forwardRef(
+  function SelectInnerContent2(props, ref) {
+    const api = useSelectContext();
+    const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-InnerSelectContent.displayName = "InnerSelectContent";
 
 export { SelectContent };

package/select/select-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
+import type { CollectionItem } from '../types';
 import { type UseSelectReturn } from './use-select';
-export type SelectContext = UseSelectReturn;
-export declare const SelectProvider: Provider<UseSelectReturn>, useSelectContext: () => UseSelectReturn;
+export type SelectContext<T extends CollectionItem> = UseSelectReturn<T>;
+export declare const SelectProvider: Provider<SelectContext<any>>, useSelectContext: () => SelectContext<any>;

package/select/select-control.cjs

@@ -0,0 +1,19 @@
+'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 SelectControl = react.forwardRef((props, ref) => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+SelectControl.displayName = "SelectControl";
+
+exports.SelectControl = SelectControl;

package/select/select-control.d.ts

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

package/select/select-control.mjs

@@ -0,0 +1,15 @@
+'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';
+
+const SelectControl = forwardRef((props, ref) => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+SelectControl.displayName = "SelectControl";
+
+export { SelectControl };

package/select/select-item-context.cjs

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

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

@@ -0,0 +1,5 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/select';
+export type SelectItemContext = ItemProps;
+export declare const SelectItemProvider: Provider<SelectItemContext>, useSelectItemContext: () => SelectItemContext;