@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/segment-group/segment-group-item-context.mjs

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

package/segment-group/segment-group-item-control.cjs

@@ -0,0 +1,31 @@
+'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 segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentGroupItemControl = react.forwardRef(
+  (props, ref) => {
+    const api = segmentGroupContext.useSegmentGroupContext();
+    const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
+    const mergedProps = react$1.mergeProps(
+      api.getItemControlProps(itemProps),
+      segmentGroup_anatomy.parts.itemControl.attrs,
+      props
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.getItemHiddenInputProps(itemProps) })
+    ] });
+  }
+);
+SegmentGroupItemControl.displayName = "SegmentGroupItemControl";
+
+exports.SegmentGroupItemControl = SegmentGroupItemControl;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface SegmentGroupItemControlProps extends HTMLArkProps<'div'> {
+}
+export declare const SegmentGroupItemControl: ForwardRefExoticComponent<SegmentGroupItemControlProps & RefAttributes<HTMLDivElement>>;

package/segment-group/segment-group-item-control.mjs

@@ -0,0 +1,27 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentGroupItemControl = forwardRef(
+  (props, ref) => {
+    const api = useSegmentGroupContext();
+    const itemProps = useSegmentGroupItemContext();
+    const mergedProps = mergeProps(
+      api.getItemControlProps(itemProps),
+      parts.itemControl.attrs,
+      props
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+      /* @__PURE__ */ jsx("input", { ...api.getItemHiddenInputProps(itemProps) })
+    ] });
+  }
+);
+SegmentGroupItemControl.displayName = "SegmentGroupItemControl";
+
+export { SegmentGroupItemControl };

package/segment-group/segment-group-item-text.cjs

@@ -0,0 +1,28 @@
+'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 segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentGroupItemText = react.forwardRef(
+  (props, ref) => {
+    const api = segmentGroupContext.useSegmentGroupContext();
+    const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
+    const mergedProps = react$1.mergeProps(
+      api.getItemTextProps(itemProps),
+      segmentGroup_anatomy.parts.itemText.attrs,
+      props
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+  }
+);
+SegmentGroupItemText.displayName = "SegmentGroupItemText";
+
+exports.SegmentGroupItemText = SegmentGroupItemText;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface SegmentGroupItemTextProps extends HTMLArkProps<'span'> {
+}
+export declare const SegmentGroupItemText: ForwardRefExoticComponent<SegmentGroupItemTextProps & RefAttributes<HTMLSpanElement>>;

package/segment-group/segment-group-item-text.mjs

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentGroupItemText = forwardRef(
+  (props, ref) => {
+    const api = useSegmentGroupContext();
+    const itemProps = useSegmentGroupItemContext();
+    const mergedProps = mergeProps(
+      api.getItemTextProps(itemProps),
+      parts.itemText.attrs,
+      props
+    );
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  }
+);
+SegmentGroupItemText.displayName = "SegmentGroupItemText";
+
+export { SegmentGroupItemText };

package/segment-group/segment-group-item.cjs

@@ -0,0 +1,35 @@
+'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 segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentGroupItem = react.forwardRef(
+  (props, ref) => {
+    const [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+      props,
+      ["value", "disabled", "invalid"]
+    );
+    const api = segmentGroupContext.useSegmentGroupContext();
+    const mergedProps = react$1.mergeProps(
+      api.getItemProps(itemProps),
+      segmentGroup_anatomy.parts.item.attrs,
+      localProps
+    );
+    const itemState = api.getItemState(itemProps);
+    const view = runIfFn.runIfFn(children, itemState);
+    return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupItemContext.SegmentGroupItemProvider, { value: props, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+  }
+);
+SegmentGroupItem.displayName = "SegmentGroupItem";
+
+exports.SegmentGroupItem = SegmentGroupItem;

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

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type ItemState, type SegmentGroupItemContext } from './segment-group-item-context';
+export interface SegmentGroupItemProps extends Assign<HTMLArkProps<'label'>, {
+    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+}>, SegmentGroupItemContext {
+}
+export declare const SegmentGroupItem: ForwardRefExoticComponent<SegmentGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/segment-group/segment-group-item.mjs

@@ -0,0 +1,31 @@
+'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 { useSegmentGroupContext } from './segment-group-context.mjs';
+import { SegmentGroupItemProvider } from './segment-group-item-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentGroupItem = forwardRef(
+  (props, ref) => {
+    const [itemProps, { children, ...localProps }] = createSplitProps()(
+      props,
+      ["value", "disabled", "invalid"]
+    );
+    const api = useSegmentGroupContext();
+    const mergedProps = mergeProps(
+      api.getItemProps(itemProps),
+      parts.item.attrs,
+      localProps
+    );
+    const itemState = api.getItemState(itemProps);
+    const view = runIfFn(children, itemState);
+    return /* @__PURE__ */ jsx(SegmentGroupItemProvider, { value: props, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+  }
+);
+SegmentGroupItem.displayName = "SegmentGroupItem";
+
+export { SegmentGroupItem };

package/segment-group/segment-group-label.cjs

@@ -12,9 +12,13 @@ const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupLabel = react.forwardRef(
   (props, ref) => {
-    const { labelProps } = segmentGroupContext.useSegmentGroupContext();
-    const mergedProps = react$1.mergeProps(labelProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ...segmentGroup_anatomy.parts.label.attrs, ref });
+    const api = segmentGroupContext.useSegmentGroupContext();
+    const mergedProps = react$1.mergeProps(
+      api.labelProps,
+      segmentGroup_anatomy.parts.label.attrs,
+      props
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
   }
 );
 SegmentGroupLabel.displayName = "SegmentGroupLabel";

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLLabelElement>>;
+export interface SegmentGroupLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const SegmentGroupLabel: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLLabelElement>>;

package/segment-group/segment-group-label.mjs

@@ -8,9 +8,13 @@ import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupLabel = forwardRef(
   (props, ref) => {
-    const { labelProps } = useSegmentGroupContext();
-    const mergedProps = mergeProps(labelProps, props);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ...parts.label.attrs, ref });
+    const api = useSegmentGroupContext();
+    const mergedProps = mergeProps(
+      api.labelProps,
+      parts.label.attrs,
+      props
+    );
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
   }
 );
 SegmentGroupLabel.displayName = "SegmentGroupLabel";

package/segment-group/segment-group.anatomy.cjs

@@ -3,10 +3,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const radio = require('@zag-js/radio-group');
+const anatomy = require('@ark-ui/anatomy');
 
-const segmentGroupAnatomy = radio.anatomy.rename("segment-group");
-const parts = segmentGroupAnatomy.build();
+const parts = anatomy.segmentGroupAnatomy.build();
 
 exports.parts = parts;
-exports.segmentGroupAnatomy = segmentGroupAnatomy;

package/segment-group/segment-group.anatomy.mjs

@@ -1,7 +1,6 @@
 'use client';
-import { anatomy } from '@zag-js/radio-group';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 
-const segmentGroupAnatomy = anatomy.rename("segment-group");
 const parts = segmentGroupAnatomy.build();
 
-export { parts, segmentGroupAnatomy };
+export { parts };

package/segment-group/segment-group.cjs

@@ -22,13 +22,17 @@ const SegmentGroup = react.forwardRef((props, ref) => {
     "id",
     "ids",
     "name",
-    "onChange",
+    "onValueChange",
     "orientation",
     "value"
   ]);
-  const segmentGroup = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = react$1.mergeProps(segmentGroup.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...segmentGroup_anatomy.parts.root.attrs, ref }) });
+  const api = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = react$1.mergeProps(
+    api.rootProps,
+    segmentGroup_anatomy.parts.root.attrs,
+    divProps
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupContext.SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 SegmentGroup.displayName = "SegmentGroup";
 

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

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSegmentGroupProps } from './use-segment-group';
-export type SegmentGroupProps = Assign<HTMLArkProps<'div'>, UseSegmentGroupProps>;
-export declare const SegmentGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseSegmentGroupProps> & UseSegmentGroupProps & RefAttributes<HTMLDivElement>>;
+export interface SegmentGroupProps extends Assign<HTMLArkProps<'div'>, UseSegmentGroupProps> {
+}
+export declare const SegmentGroup: ForwardRefExoticComponent<SegmentGroupProps & RefAttributes<HTMLDivElement>>;

package/segment-group/segment-group.mjs

@@ -18,13 +18,17 @@ const SegmentGroup = forwardRef((props, ref) => {
     "id",
     "ids",
     "name",
-    "onChange",
+    "onValueChange",
     "orientation",
     "value"
   ]);
-  const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = mergeProps(segmentGroup.rootProps, divProps);
-  return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...parts.root.attrs, ref }) });
+  const api = useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = mergeProps(
+    api.rootProps,
+    parts.root.attrs,
+    divProps
+  );
+  return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 SegmentGroup.displayName = "SegmentGroup";
 

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

@@ -1,10 +1,7 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { SegmentGroup } from './index';
+import { SegmentGroup } from './';
 type SegmentGroupType = typeof SegmentGroup;
 declare const meta: Meta<SegmentGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const InitialValue: () => JSX.Element;
-export declare const Controlled: () => JSX.Element;
-export declare const Disabled: () => JSX.Element;

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

@@ -7,6 +7,7 @@ const radio = require('@zag-js/radio-group');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +30,16 @@ function _interopNamespaceDefault(e) {
 const radio__namespace = /*#__PURE__*/_interopNamespaceDefault(radio);
 
 const useSegmentGroup = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(radio__namespace.machine(initialContext), {
     context

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

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

package/segment-group/use-segment-group.mjs

@@ -3,19 +3,20 @@ import * as radio from '@zag-js/radio-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSegmentGroup = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true })
   };
   const [state, send] = useMachine(radio.machine(initialContext), {
     context

package/select/index.cjs

@@ -8,7 +8,9 @@ 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 selectIndicator = require('./select-indicator.cjs');
 const selectItem = require('./select-item.cjs');
+const selectItemContext = require('./select-item-context.cjs');
 const selectItemGroup = require('./select-item-group.cjs');
 const selectItemGroupLabel = require('./select-item-group-label.cjs');
 const selectItemIndicator = require('./select-item-indicator.cjs');
@@ -16,14 +18,14 @@ const selectItemText = require('./select-item-text.cjs');
 const selectLabel = require('./select-label.cjs');
 const selectPositioner = require('./select-positioner.cjs');
 const selectTrigger = require('./select-trigger.cjs');
-const selectValue = require('./select-value.cjs');
-const select_anatomy = require('./select.anatomy.cjs');
+const selectValueText = require('./select-value-text.cjs');
 
 const Select = Object.assign(select.Select, {
   Root: select.Select,
   ClearTrigger: selectClearTrigger.SelectClearTrigger,
   Content: selectContent.SelectContent,
   Control: selectControl.SelectControl,
+  Indicator: selectIndicator.SelectIndicator,
   Item: selectItem.SelectItem,
   ItemGroup: selectItemGroup.SelectItemGroup,
   ItemGroupLabel: selectItemGroupLabel.SelectItemGroupLabel,
@@ -32,14 +34,16 @@ const Select = Object.assign(select.Select, {
   Label: selectLabel.SelectLabel,
   Positioner: selectPositioner.SelectPositioner,
   Trigger: selectTrigger.SelectTrigger,
-  Value: selectValue.SelectValue
+  ValueText: selectValueText.SelectValueText
 });
 
 exports.SelectClearTrigger = selectClearTrigger.SelectClearTrigger;
 exports.SelectContent = selectContent.SelectContent;
 exports.useSelectContext = selectContext.useSelectContext;
 exports.SelectControl = selectControl.SelectControl;
+exports.SelectIndicator = selectIndicator.SelectIndicator;
 exports.SelectItem = selectItem.SelectItem;
+exports.useSelectItemContext = selectItemContext.useSelectItemContext;
 exports.SelectItemGroup = selectItemGroup.SelectItemGroup;
 exports.SelectItemGroupLabel = selectItemGroupLabel.SelectItemGroupLabel;
 exports.SelectItemIndicator = selectItemIndicator.SelectItemIndicator;
@@ -47,6 +51,5 @@ exports.SelectItemText = selectItemText.SelectItemText;
 exports.SelectLabel = selectLabel.SelectLabel;
 exports.SelectPositioner = selectPositioner.SelectPositioner;
 exports.SelectTrigger = selectTrigger.SelectTrigger;
-exports.SelectValue = selectValue.SelectValue;
-exports.selectAnatomy = select_anatomy.selectAnatomy;
+exports.SelectValueText = selectValueText.SelectValueText;
 exports.Select = Select;

package/select/index.d.ts

@@ -1,14 +1,14 @@
-import { ItemState, ItemProps, ItemGroupProps, ItemGroupLabelProps } from '@zag-js/select';
-import { HTMLArkProps, PresenceProps } from '..';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, ReactNode, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 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 { useSelectContext, type SelectContext } from './select-context';
 import { SelectControl, type SelectControlProps } from './select-control';
+import { SelectIndicator, type SelectIndicatorProps } from './select-indicator';
 import { SelectItem, type SelectItemProps } from './select-item';
+import { useSelectItemContext, type SelectItemContext } from './select-item-context';
 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';
@@ -16,40 +16,22 @@ import { SelectItemText, type SelectItemTextProps } from './select-item-text';
 import { SelectLabel, type SelectLabelProps } from './select-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';
+import { SelectValueText, type SelectValueTextProps } from './select-value-text';
 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>>;
-    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Value: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
+    ClearTrigger: ForwardRefExoticComponent<SelectClearTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<SelectContentProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<SelectControlProps & RefAttributes<HTMLDivElement>>;
+    Indicator: ForwardRefExoticComponent<SelectIndicatorProps & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLDivElement>>;
+    ItemGroup: ForwardRefExoticComponent<SelectItemGroupProps & RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<SelectItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
+    ItemIndicator: ForwardRefExoticComponent<SelectItemIndicatorProps & RefAttributes<HTMLDivElement>>;
+    ItemText: ForwardRefExoticComponent<SelectItemTextProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<SelectLabelProps & RefAttributes<HTMLLabelElement>>;
+    Positioner: ForwardRefExoticComponent<SelectPositionerProps & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<SelectTriggerProps & RefAttributes<HTMLButtonElement>>;
+    ValueText: ForwardRefExoticComponent<SelectValueTextProps & RefAttributes<HTMLSpanElement>>;
 };
-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, };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };
+export type { CollectionItem, SelectClearTriggerProps, SelectContentProps, SelectContext, SelectControlProps, SelectIndicatorProps, SelectItemContext, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueTextProps, };

package/select/index.mjs

@@ -4,7 +4,9 @@ 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 { SelectIndicator } from './select-indicator.mjs';
 import { SelectItem } from './select-item.mjs';
+export { useSelectItemContext } from './select-item-context.mjs';
 import { SelectItemGroup } from './select-item-group.mjs';
 import { SelectItemGroupLabel } from './select-item-group-label.mjs';
 import { SelectItemIndicator } from './select-item-indicator.mjs';
@@ -12,14 +14,14 @@ import { SelectItemText } from './select-item-text.mjs';
 import { SelectLabel } from './select-label.mjs';
 import { SelectPositioner } from './select-positioner.mjs';
 import { SelectTrigger } from './select-trigger.mjs';
-import { SelectValue } from './select-value.mjs';
-export { selectAnatomy } from './select.anatomy.mjs';
+import { SelectValueText } from './select-value-text.mjs';
 
 const Select = Object.assign(Select$1, {
   Root: Select$1,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Control: SelectControl,
+  Indicator: SelectIndicator,
   Item: SelectItem,
   ItemGroup: SelectItemGroup,
   ItemGroupLabel: SelectItemGroupLabel,
@@ -28,7 +30,7 @@ const Select = Object.assign(Select$1, {
   Label: SelectLabel,
   Positioner: SelectPositioner,
   Trigger: SelectTrigger,
-  Value: SelectValue
+  ValueText: SelectValueText
 });
 
-export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValue };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText };

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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>>;
+export interface SelectClearTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const SelectClearTrigger: ForwardRefExoticComponent<SelectClearTriggerProps & RefAttributes<HTMLButtonElement>>;

package/select/select-content.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from '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>>;
+export interface SelectContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+}
+export declare const SelectContent: ForwardRefExoticComponent<SelectContentProps & RefAttributes<HTMLDivElement>>;