@ark-ui/react 4.9.2 → 5.0.1

package/dist/components/segment-group/segment-group-root-provider.cjs

@@ -11,19 +11,11 @@ const factory = require('../factory.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
-const SegmentGroupRootProvider = react.forwardRef(
-  (props, ref) => {
-    const [{ value: segmentGroup }, localProps] = createSplitProps.createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = react$1.mergeProps(
-      segmentGroup.getRootProps(),
-      segmentGroup_anatomy.parts.root.attrs,
-      localProps
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(useSegmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
-  }
-);
+const SegmentGroupRootProvider = react.forwardRef((props, ref) => {
+  const [{ value: segmentGroup }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const mergedProps = react$1.mergeProps(segmentGroup.getRootProps(), segmentGroup_anatomy.parts.root.attrs, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useSegmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
 SegmentGroupRootProvider.displayName = "SegmentGroupRootProvider";
 
 exports.SegmentGroupRootProvider = SegmentGroupRootProvider;

package/dist/components/segment-group/segment-group-root-provider.js

@@ -7,19 +7,11 @@ import { ark } from '../factory.js';
 import { parts } from './segment-group.anatomy.js';
 import { SegmentGroupProvider } from './use-segment-group-context.js';
 
-const SegmentGroupRootProvider = forwardRef(
-  (props, ref) => {
-    const [{ value: segmentGroup }, localProps] = createSplitProps()(props, [
-      "value"
-    ]);
-    const mergedProps = mergeProps(
-      segmentGroup.getRootProps(),
-      parts.root.attrs,
-      localProps
-    );
-    return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
-  }
-);
+const SegmentGroupRootProvider = forwardRef((props, ref) => {
+  const [{ value: segmentGroup }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(segmentGroup.getRootProps(), parts.root.attrs, localProps);
+  return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
 SegmentGroupRootProvider.displayName = "SegmentGroupRootProvider";
 
 export { SegmentGroupRootProvider };

package/dist/components/segment-group/segment-group-root.cjs

@@ -26,11 +26,7 @@ const SegmentGroupRoot = react.forwardRef((props, ref) => {
     "value"
   ]);
   const segmentGroup = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = react$1.mergeProps(
-    segmentGroup.getRootProps(),
-    segmentGroup_anatomy.parts.root.attrs,
-    localProps
-  );
+  const mergedProps = react$1.mergeProps(segmentGroup.getRootProps(), segmentGroup_anatomy.parts.root.attrs, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useSegmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 SegmentGroupRoot.displayName = "SegmentGroupRoot";

package/dist/components/segment-group/segment-group-root.js

@@ -22,11 +22,7 @@ const SegmentGroupRoot = forwardRef((props, ref) => {
     "value"
   ]);
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = mergeProps(
-    segmentGroup.getRootProps(),
-    parts.root.attrs,
-    localProps
-  );
+  const mergedProps = mergeProps(segmentGroup.getRootProps(), parts.root.attrs, localProps);
   return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 SegmentGroupRoot.displayName = "SegmentGroupRoot";

package/dist/components/segment-group/segment-group.anatomy.d.cts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText", AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.d.ts

@@ -1,3 +1,3 @@
 import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl">;
-export declare const parts: Record<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl", AnatomyPart>;
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemControl" | "itemText", AnatomyPart>;

package/dist/components/segment-group/segment-group.d.cts

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails } from '@zag-js/radio-group';
-export { SegmentGroupContext as Context, type SegmentGroupContextProps as ContextProps, } from './segment-group-context';
+export { SegmentGroupContext as Context, type SegmentGroupContextProps as ContextProps } from './segment-group-context';
 export { SegmentGroupIndicator as Indicator, type SegmentGroupIndicatorBaseProps as IndicatorBaseProps, type SegmentGroupIndicatorProps as IndicatorProps, } from './segment-group-indicator';
 export { SegmentGroupItem as Item, type SegmentGroupItemBaseProps as ItemBaseProps, type SegmentGroupItemProps as ItemProps, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, type SegmentGroupItemContextProps as ItemContextProps, } from './segment-group-item-context';

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

@@ -1,5 +1,5 @@
 export type { ValueChangeDetails } from '@zag-js/radio-group';
-export { SegmentGroupContext as Context, type SegmentGroupContextProps as ContextProps, } from './segment-group-context';
+export { SegmentGroupContext as Context, type SegmentGroupContextProps as ContextProps } from './segment-group-context';
 export { SegmentGroupIndicator as Indicator, type SegmentGroupIndicatorBaseProps as IndicatorBaseProps, type SegmentGroupIndicatorProps as IndicatorProps, } from './segment-group-indicator';
 export { SegmentGroupItem as Item, type SegmentGroupItemBaseProps as ItemBaseProps, type SegmentGroupItemProps as ItemProps, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, type SegmentGroupItemContextProps as ItemContextProps, } from './segment-group-item-context';

package/dist/components/segment-group/use-segment-group-context.cjs

@@ -5,13 +5,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createContext = require('../../utils/create-context.cjs');
 
-const [SegmentGroupProvider, useSegmentGroupContext] = createContext.createContext(
-  {
-    name: "SegmentGroupContext",
-    hookName: "useSegmentGroupContext",
-    providerName: "<SegmentGroupProvider />"
-  }
-);
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext.createContext({
+  name: "SegmentGroupContext",
+  hookName: "useSegmentGroupContext",
+  providerName: "<SegmentGroupProvider />"
+});
 
 exports.SegmentGroupProvider = SegmentGroupProvider;
 exports.useSegmentGroupContext = useSegmentGroupContext;

package/dist/components/segment-group/use-segment-group-context.js

@@ -1,12 +1,10 @@
 'use client';
 import { createContext } from '../../utils/create-context.js';
 
-const [SegmentGroupProvider, useSegmentGroupContext] = createContext(
-  {
-    name: "SegmentGroupContext",
-    hookName: "useSegmentGroupContext",
-    providerName: "<SegmentGroupProvider />"
-  }
-);
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  name: "SegmentGroupContext",
+  hookName: "useSegmentGroupContext",
+  providerName: "<SegmentGroupProvider />"
+});
 
 export { SegmentGroupProvider, useSegmentGroupContext };

package/dist/components/segment-group/use-segment-group.cjs

@@ -8,7 +8,6 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
-const useEvent = require('../../utils/use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,25 +28,18 @@ function _interopNamespaceDefault(e) {
 
 const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
-const useSegmentGroup = (props = {}) => {
+const useSegmentGroup = (props) => {
+  const id = react.useId();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
-  const initialContext = {
-    id: react.useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
-  };
-  const [state, send] = react$1.useMachine(radio__namespace.machine(initialContext), {
-    context
-  });
-  return radio__namespace.connect(state, send, react$1.normalizeProps);
+  const service = react$1.useMachine(radio__namespace.machine, machineProps);
+  return radio__namespace.connect(service, react$1.normalizeProps);
 };
 
 exports.useSegmentGroup = useSegmentGroup;

package/dist/components/segment-group/use-segment-group.d.cts

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as segmentGroup from '@zag-js/radio-group';
-export interface UseSegmentGroupProps extends Optional<Omit<segmentGroup.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the segment group when it is first rendered.
-     * Use when you do not need to control the state of the segment group.
-     */
-    defaultValue?: segmentGroup.Context['value'];
+export interface UseSegmentGroupProps extends Optional<Omit<segmentGroup.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSegmentGroupReturn extends segmentGroup.Api<PropTypes> {
 }

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

@@ -1,12 +1,7 @@
 import { PropTypes } from '@zag-js/react';
 import { Optional } from '../../types';
 import * as segmentGroup from '@zag-js/radio-group';
-export interface UseSegmentGroupProps extends Optional<Omit<segmentGroup.Context, 'dir' | 'getRootNode'>, 'id'> {
-    /**
-     * The initial value of the segment group when it is first rendered.
-     * Use when you do not need to control the state of the segment group.
-     */
-    defaultValue?: segmentGroup.Context['value'];
+export interface UseSegmentGroupProps extends Optional<Omit<segmentGroup.Props, 'dir' | 'getRootNode'>, 'id'> {
 }
 export interface UseSegmentGroupReturn extends segmentGroup.Api<PropTypes> {
 }

package/dist/components/segment-group/use-segment-group.js

@@ -4,27 +4,19 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
-import { useEvent } from '../../utils/use-event.js';
 
-const useSegmentGroup = (props = {}) => {
+const useSegmentGroup = (props) => {
+  const id = useId();
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
-  const initialContext = {
-    id: useId(),
+  const machineProps = {
+    id,
     dir,
     getRootNode,
-    value: props.defaultValue,
     ...props
   };
-  const context = {
-    ...initialContext,
-    value: props.value,
-    onValueChange: useEvent(props.onValueChange, { sync: true })
-  };
-  const [state, send] = useMachine(radio.machine(initialContext), {
-    context
-  });
-  return radio.connect(state, send, normalizeProps);
+  const service = useMachine(radio.machine, machineProps);
+  return radio.connect(service, normalizeProps);
 };
 
 export { useSegmentGroup };

package/dist/components/select/index.d.cts

@@ -1,24 +1,24 @@
 export type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { SelectClearTrigger, type SelectClearTriggerBaseProps, type SelectClearTriggerProps, } from './select-clear-trigger';
-export { SelectContent, type SelectContentBaseProps, type SelectContentProps, } from './select-content';
+export { SelectContent, type SelectContentBaseProps, type SelectContentProps } from './select-content';
 export { SelectContext, type SelectContextProps } from './select-context';
-export { SelectControl, type SelectControlBaseProps, type SelectControlProps, } from './select-control';
+export { SelectControl, type SelectControlBaseProps, type SelectControlProps } from './select-control';
 export { SelectHiddenSelect, type SelectHiddenSelectBaseProps, type SelectHiddenSelectProps, } from './select-hidden-select';
-export { SelectIndicator, type SelectIndicatorBaseProps, type SelectIndicatorProps, } from './select-indicator';
+export { SelectIndicator, type SelectIndicatorBaseProps, type SelectIndicatorProps } from './select-indicator';
 export { SelectItem, type SelectItemBaseProps, type SelectItemProps } from './select-item';
 export { SelectItemContext, type SelectItemContextProps } from './select-item-context';
-export { SelectItemGroup, type SelectItemGroupBaseProps, type SelectItemGroupProps, } from './select-item-group';
+export { SelectItemGroup, type SelectItemGroupBaseProps, type SelectItemGroupProps } from './select-item-group';
 export { SelectItemGroupLabel, type SelectItemGroupLabelBaseProps, type SelectItemGroupLabelProps, } from './select-item-group-label';
 export { SelectItemIndicator, type SelectItemIndicatorBaseProps, type SelectItemIndicatorProps, } from './select-item-indicator';
-export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps, } from './select-item-text';
+export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps } from './select-item-text';
 export { SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label';
 export { SelectList, type SelectListBaseProps, type SelectListProps } from './select-list';
-export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps, } from './select-positioner';
+export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps } from './select-positioner';
 export { SelectRoot, type SelectRootBaseProps, type SelectRootProps } from './select-root';
 export { SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, } from './select-root-provider';
-export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps, } from './select-trigger';
-export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps, } from './select-value-text';
+export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger';
+export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps } from './select-value-text';
 export { selectAnatomy } from './select.anatomy';
 export { useSelect, type UseSelectProps, type UseSelectReturn } from './use-select';
 export { useSelectContext, type UseSelectContext } from './use-select-context';

package/dist/components/select/index.d.ts

@@ -1,24 +1,24 @@
 export type { HighlightChangeDetails as SelectHighlightChangeDetails, OpenChangeDetails as SelectOpenChangeDetails, ValueChangeDetails as SelectValueChangeDetails, } from '@zag-js/select';
 export { createListCollection, type CollectionItem, type ListCollection } from '../collection';
 export { SelectClearTrigger, type SelectClearTriggerBaseProps, type SelectClearTriggerProps, } from './select-clear-trigger';
-export { SelectContent, type SelectContentBaseProps, type SelectContentProps, } from './select-content';
+export { SelectContent, type SelectContentBaseProps, type SelectContentProps } from './select-content';
 export { SelectContext, type SelectContextProps } from './select-context';
-export { SelectControl, type SelectControlBaseProps, type SelectControlProps, } from './select-control';
+export { SelectControl, type SelectControlBaseProps, type SelectControlProps } from './select-control';
 export { SelectHiddenSelect, type SelectHiddenSelectBaseProps, type SelectHiddenSelectProps, } from './select-hidden-select';
-export { SelectIndicator, type SelectIndicatorBaseProps, type SelectIndicatorProps, } from './select-indicator';
+export { SelectIndicator, type SelectIndicatorBaseProps, type SelectIndicatorProps } from './select-indicator';
 export { SelectItem, type SelectItemBaseProps, type SelectItemProps } from './select-item';
 export { SelectItemContext, type SelectItemContextProps } from './select-item-context';
-export { SelectItemGroup, type SelectItemGroupBaseProps, type SelectItemGroupProps, } from './select-item-group';
+export { SelectItemGroup, type SelectItemGroupBaseProps, type SelectItemGroupProps } from './select-item-group';
 export { SelectItemGroupLabel, type SelectItemGroupLabelBaseProps, type SelectItemGroupLabelProps, } from './select-item-group-label';
 export { SelectItemIndicator, type SelectItemIndicatorBaseProps, type SelectItemIndicatorProps, } from './select-item-indicator';
-export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps, } from './select-item-text';
+export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps } from './select-item-text';
 export { SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label';
 export { SelectList, type SelectListBaseProps, type SelectListProps } from './select-list';
-export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps, } from './select-positioner';
+export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps } from './select-positioner';
 export { SelectRoot, type SelectRootBaseProps, type SelectRootProps } from './select-root';
 export { SelectRootProvider, type SelectRootProviderBaseProps, type SelectRootProviderProps, } from './select-root-provider';
-export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps, } from './select-trigger';
-export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps, } from './select-value-text';
+export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger';
+export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps } from './select-value-text';
 export { selectAnatomy } from './select.anatomy';
 export { useSelect, type UseSelectProps, type UseSelectReturn } from './use-select';
 export { useSelectContext, type UseSelectContext } from './use-select-context';

package/dist/components/select/select-clear-trigger.cjs

@@ -9,13 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useSelectContext = require('./use-select-context.cjs');
 
-const SelectClearTrigger = react.forwardRef(
-  (props, ref) => {
-    const select = useSelectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(select.getClearTriggerProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-  }
-);
+const SelectClearTrigger = react.forwardRef((props, ref) => {
+  const select = useSelectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(select.getClearTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
 SelectClearTrigger.displayName = "SelectClearTrigger";
 
 exports.SelectClearTrigger = SelectClearTrigger;

package/dist/components/select/select-clear-trigger.js

@@ -5,13 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSelectContext } from './use-select-context.js';
 
-const SelectClearTrigger = forwardRef(
-  (props, ref) => {
-    const select = useSelectContext();
-    const mergedProps = mergeProps(select.getClearTriggerProps(), props);
-    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-  }
-);
+const SelectClearTrigger = forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps(select.getClearTriggerProps(), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
 SelectClearTrigger.displayName = "SelectClearTrigger";
 
 export { SelectClearTrigger };

package/dist/components/select/select-context.d.cts

@@ -4,4 +4,4 @@ import { UseSelectContext } from './use-select-context';
 export interface SelectContextProps<T extends CollectionItem> {
     children: (context: UseSelectContext<T>) => ReactNode;
 }
-export declare const SelectContext: <T extends unknown>(props: SelectContextProps<T>) => ReactNode;
+export declare const SelectContext: <T extends CollectionItem>(props: SelectContextProps<T>) => ReactNode;

package/dist/components/select/select-context.d.ts

@@ -4,4 +4,4 @@ import { UseSelectContext } from './use-select-context';
 export interface SelectContextProps<T extends CollectionItem> {
     children: (context: UseSelectContext<T>) => ReactNode;
 }
-export declare const SelectContext: <T extends unknown>(props: SelectContextProps<T>) => ReactNode;
+export declare const SelectContext: <T extends CollectionItem>(props: SelectContextProps<T>) => ReactNode;

package/dist/components/select/select-hidden-select.cjs

@@ -10,26 +10,24 @@ const factory = require('../factory.cjs');
 const useFieldContext = require('../field/use-field-context.cjs');
 const useSelectContext = require('./use-select-context.cjs');
 
-const SelectHiddenSelect = react.forwardRef(
-  (props, ref) => {
-    const select = useSelectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(select.getHiddenSelectProps(), props);
-    const isValueEmpty = select.value.length === 0;
-    const field = useFieldContext.useFieldContext();
-    return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.select, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref, children: [
-      isValueEmpty && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
-      select.collection.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "option",
-        {
-          value: select.collection.getItemValue(item) ?? "",
-          disabled: select.collection.getItemDisabled(item),
-          children: select.collection.stringifyItem(item)
-        },
-        index
-      ))
-    ] });
-  }
-);
+const SelectHiddenSelect = react.forwardRef((props, ref) => {
+  const select = useSelectContext.useSelectContext();
+  const mergedProps = react$1.mergeProps(select.getHiddenSelectProps(), props);
+  const isValueEmpty = select.value.length === 0;
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.select, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref, children: [
+    isValueEmpty && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
+    select.collection.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "option",
+      {
+        value: select.collection.getItemValue(item) ?? "",
+        disabled: select.collection.getItemDisabled(item),
+        children: select.collection.stringifyItem(item)
+      },
+      index
+    ))
+  ] });
+});
 SelectHiddenSelect.displayName = "SelectHiddenSelect";
 
 exports.SelectHiddenSelect = SelectHiddenSelect;

package/dist/components/select/select-hidden-select.js

@@ -6,26 +6,24 @@ import { ark } from '../factory.js';
 import { useFieldContext } from '../field/use-field-context.js';
 import { useSelectContext } from './use-select-context.js';
 
-const SelectHiddenSelect = forwardRef(
-  (props, ref) => {
-    const select = useSelectContext();
-    const mergedProps = mergeProps(select.getHiddenSelectProps(), props);
-    const isValueEmpty = select.value.length === 0;
-    const field = useFieldContext();
-    return /* @__PURE__ */ jsxs(ark.select, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref, children: [
-      isValueEmpty && /* @__PURE__ */ jsx("option", { value: "" }),
-      select.collection.items.map((item, index) => /* @__PURE__ */ jsx(
-        "option",
-        {
-          value: select.collection.getItemValue(item) ?? "",
-          disabled: select.collection.getItemDisabled(item),
-          children: select.collection.stringifyItem(item)
-        },
-        index
-      ))
-    ] });
-  }
-);
+const SelectHiddenSelect = forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps(select.getHiddenSelectProps(), props);
+  const isValueEmpty = select.value.length === 0;
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsxs(ark.select, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref, children: [
+    isValueEmpty && /* @__PURE__ */ jsx("option", { value: "" }),
+    select.collection.items.map((item, index) => /* @__PURE__ */ jsx(
+      "option",
+      {
+        value: select.collection.getItemValue(item) ?? "",
+        disabled: select.collection.getItemDisabled(item),
+        children: select.collection.stringifyItem(item)
+      },
+      index
+    ))
+  ] });
+});
 SelectHiddenSelect.displayName = "SelectHiddenSelect";
 
 export { SelectHiddenSelect };

package/dist/components/select/select-item-group-label.cjs

@@ -10,17 +10,12 @@ const factory = require('../factory.cjs');
 const useSelectContext = require('./use-select-context.cjs');
 const useSelectItemGroupProps = require('./use-select-item-group-props.cjs');
 
-const SelectItemGroupLabel = react.forwardRef(
-  (props, ref) => {
-    const select = useSelectContext.useSelectContext();
-    const itemGroupProps = useSelectItemGroupProps.useSelectItemGroupPropsContext();
-    const mergedProps = react$1.mergeProps(
-      select.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }),
-      props
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SelectItemGroupLabel = react.forwardRef((props, ref) => {
+  const select = useSelectContext.useSelectContext();
+  const itemGroupProps = useSelectItemGroupProps.useSelectItemGroupPropsContext();
+  const mergedProps = react$1.mergeProps(select.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SelectItemGroupLabel.displayName = "SelectItemGroupLabel";
 
 exports.SelectItemGroupLabel = SelectItemGroupLabel;

package/dist/components/select/select-item-group-label.js

@@ -6,17 +6,12 @@ import { ark } from '../factory.js';
 import { useSelectContext } from './use-select-context.js';
 import { useSelectItemGroupPropsContext } from './use-select-item-group-props.js';
 
-const SelectItemGroupLabel = forwardRef(
-  (props, ref) => {
-    const select = useSelectContext();
-    const itemGroupProps = useSelectItemGroupPropsContext();
-    const mergedProps = mergeProps(
-      select.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }),
-      props
-    );
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const SelectItemGroupLabel = forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const itemGroupProps = useSelectItemGroupPropsContext();
+  const mergedProps = mergeProps(select.getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 SelectItemGroupLabel.displayName = "SelectItemGroupLabel";
 
 export { SelectItemGroupLabel };

package/dist/components/select/select-item-indicator.cjs

@@ -10,14 +10,12 @@ const factory = require('../factory.cjs');
 const useSelectContext = require('./use-select-context.cjs');
 const useSelectItemPropsContext = require('./use-select-item-props-context.cjs');
 
-const SelectItemIndicator = react.forwardRef(
-  (props, ref) => {
-    const select = useSelectContext.useSelectContext();
-    const itemProps = useSelectItemPropsContext.useSelectItemPropsContext();
-    const mergedProps = react$1.mergeProps(select.getItemIndicatorProps(itemProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
+const SelectItemIndicator = react.forwardRef((props, ref) => {
+  const select = useSelectContext.useSelectContext();
+  const itemProps = useSelectItemPropsContext.useSelectItemPropsContext();
+  const mergedProps = react$1.mergeProps(select.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
 SelectItemIndicator.displayName = "SelectItemIndicator";
 
 exports.SelectItemIndicator = SelectItemIndicator;

package/dist/components/select/select-item-indicator.js

@@ -6,14 +6,12 @@ import { ark } from '../factory.js';
 import { useSelectContext } from './use-select-context.js';
 import { useSelectItemPropsContext } from './use-select-item-props-context.js';
 
-const SelectItemIndicator = forwardRef(
-  (props, ref) => {
-    const select = useSelectContext();
-    const itemProps = useSelectItemPropsContext();
-    const mergedProps = mergeProps(select.getItemIndicatorProps(itemProps), props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
+const SelectItemIndicator = forwardRef((props, ref) => {
+  const select = useSelectContext();
+  const itemProps = useSelectItemPropsContext();
+  const mergedProps = mergeProps(select.getItemIndicatorProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
 SelectItemIndicator.displayName = "SelectItemIndicator";
 
 export { SelectItemIndicator };

package/dist/components/select/select-root-provider.cjs

@@ -15,9 +15,7 @@ const useSelectContext = require('./use-select-context.cjs');
 
 const SelectImpl = (props, ref) => {
   const [presenceProps, selectProps] = splitPresenceProps.splitPresenceProps(props);
-  const [{ value: select }, localProps] = createSplitProps.createSplitProps()(selectProps, [
-    "value"
-  ]);
+  const [{ value: select }, localProps] = createSplitProps.createSplitProps()(selectProps, ["value"]);
   const presence = usePresence.usePresence(react$1.mergeProps({ present: select.open }, presenceProps));
   const mergedProps = react$1.mergeProps(select.getRootProps(), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(useSelectContext.SelectProvider, { value: select, children: /* @__PURE__ */ jsxRuntime.jsx(usePresenceContext.PresenceProvider, { value: presence, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });

package/dist/components/select/select-root-provider.js

@@ -11,9 +11,7 @@ import { SelectProvider } from './use-select-context.js';
 
 const SelectImpl = (props, ref) => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [{ value: select }, localProps] = createSplitProps()(selectProps, [
-    "value"
-  ]);
+  const [{ value: select }, localProps] = createSplitProps()(selectProps, ["value"]);
   const presence = usePresence(mergeProps({ present: select.open }, presenceProps));
   const mergedProps = mergeProps(select.getRootProps(), localProps);
   return /* @__PURE__ */ jsx(SelectProvider, { value: select, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presence, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });

package/dist/components/select/select-root.cjs

@@ -20,6 +20,7 @@ const SelectImpl = (props, ref) => {
     "closeOnSelect",
     "collection",
     "composite",
+    "defaultHighlightedValue",
     "defaultOpen",
     "defaultValue",
     "deselectable",

package/dist/components/select/select-root.js

@@ -16,6 +16,7 @@ const SelectImpl = (props, ref) => {
     "closeOnSelect",
     "collection",
     "composite",
+    "defaultHighlightedValue",
     "defaultOpen",
     "defaultValue",
     "deselectable",