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

package/rating-group/index.d.ts

@@ -1,26 +1,16 @@
-import { ItemProps, ItemState } from '@zag-js/rating-group';
-import { UseRatingGroupProps, UseRatingGroupReturn } from './use-rating-group';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, ReactNode, DetailedHTMLProps, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { Rating, type RatingProps } from './rating';
-import { useRatingContext } from './rating-context';
 import { type RatingGroupProps } from './rating-group';
-import { useRatingGroupContext } from './rating-group-context';
+import { useRatingGroupContext, type RatingGroupContext } from './rating-group-context';
 import { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
+import { RatingGroupItem, type RatingGroupItemProps } from './rating-group-item';
+import { useRatingGroupItemContext, type RatingGroupItemContext } from './rating-group-item-context';
 import { RatingGroupLabel, type RatingGroupLabelProps } from './rating-group-label';
-import { ratingGroupAnatomy } from './rating-group.anatomy';
-declare const RatingGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRatingGroupProps> & UseRatingGroupProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseRatingGroupProps> & UseRatingGroupProps & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
-        children?: ReactNode | ((context: UseRatingGroupReturn) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLabelElement>>;
-    Rating: ForwardRefExoticComponent<Omit<HTMLArkProps<"span">, "children" | "index"> & ItemProps & {
-        children: (state: ItemState) => ReactNode;
-    } & RefAttributes<HTMLSpanElement>>;
+declare const RatingGroup: ForwardRefExoticComponent<RatingGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<RatingGroupProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<RatingGroupControlProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<RatingGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+    Item: ForwardRefExoticComponent<RatingGroupItemProps & RefAttributes<HTMLSpanElement>>;
 };
-export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel, ratingGroupAnatomy, useRatingContext, useRatingGroupContext, };
-export type { RatingGroupControlProps, RatingGroupLabelProps, RatingGroupProps, RatingProps };
+export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, useRatingGroupContext, useRatingGroupItemContext, };
+export type { RatingGroupContext, RatingGroupControlProps, RatingGroupItemContext, RatingGroupItemProps, RatingGroupLabelProps, RatingGroupProps, };

package/rating-group/index.mjs

@@ -1,17 +1,16 @@
 'use client';
-import { Rating } from './rating.mjs';
-export { useRatingContext } from './rating-context.mjs';
 import { RatingGroup as RatingGroup$1 } from './rating-group.mjs';
 export { useRatingGroupContext } from './rating-group-context.mjs';
 import { RatingGroupControl } from './rating-group-control.mjs';
+import { RatingGroupItem } from './rating-group-item.mjs';
+export { useRatingGroupItemContext } from './rating-group-item-context.mjs';
 import { RatingGroupLabel } from './rating-group-label.mjs';
-export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
 
 const RatingGroup = Object.assign(RatingGroup$1, {
   Root: RatingGroup$1,
   Control: RatingGroupControl,
   Label: RatingGroupLabel,
-  Rating
+  Item: RatingGroupItem
 });
 
-export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel };
+export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel };

package/rating-group/rating-group-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseRatingGroupReturn } from './use-rating-group';
-export type RatingGroupContext = UseRatingGroupReturn;
-export declare const RatingGroupProvider: Provider<UseRatingGroupReturn>, useRatingGroupContext: () => UseRatingGroupReturn;
+export interface RatingGroupContext extends UseRatingGroupReturn {
+}
+export declare const RatingGroupProvider: Provider<RatingGroupContext>, useRatingGroupContext: () => RatingGroupContext;

package/rating-group/rating-group-control.cjs

@@ -16,7 +16,10 @@ const RatingGroupControl = react.forwardRef(
     const api = ratingGroupContext.useRatingGroupContext();
     const mergedProps = react$1.mergeProps(api.controlProps, divProps);
     const view = runIfFn.runIfFn(children, api);
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+    ] });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

package/rating-group/rating-group-control.d.ts

@@ -1,9 +1,7 @@
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type RatingGroupContext } from './rating-group-context';
-export type RatingGroupControlProps = Omit<HTMLArkProps<'div'>, 'children'> & {
+export interface RatingGroupControlProps extends Omit<HTMLArkProps<'div'>, 'children'> {
     children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
-};
-export declare const RatingGroupControl: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children"> & {
-    children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
-} & RefAttributes<HTMLDivElement>>;
+}
+export declare const RatingGroupControl: ForwardRefExoticComponent<RatingGroupControlProps & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -12,7 +12,10 @@ const RatingGroupControl = forwardRef(
     const api = useRatingGroupContext();
     const mergedProps = mergeProps(api.controlProps, divProps);
     const view = runIfFn(children, api);
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+      /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+    ] });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

package/rating-group/rating-group-item-context.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('@zag-js/rating-group');
+const createContext = require('../create-context.cjs');
+
+const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext.createContext({
+  name: "RatingGroupItemContext",
+  hookName: "useRatingGroupItemContext",
+  providerName: "<RatingGroupItemProvider />"
+});
+
+exports.RatingGroupItemProvider = RatingGroupItemProvider;
+exports.useRatingGroupItemContext = useRatingGroupItemContext;

package/rating-group/rating-group-item-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import { type ItemState } from '@zag-js/rating-group';
+export interface RatingGroupItemContext extends ItemState {
+}
+export declare const RatingGroupItemProvider: Provider<RatingGroupItemContext>, useRatingGroupItemContext: () => RatingGroupItemContext;

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

@@ -0,0 +1,11 @@
+'use client';
+import '@zag-js/rating-group';
+import { createContext } from '../create-context.mjs';
+
+const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
+  name: "RatingGroupItemContext",
+  hookName: "useRatingGroupItemContext",
+  providerName: "<RatingGroupItemProvider />"
+});
+
+export { RatingGroupItemProvider, useRatingGroupItemContext };

package/rating-group/rating-group-item.cjs

@@ -0,0 +1,24 @@
+'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 runIfFn = require('../run-if-fn.cjs');
+const ratingGroupContext = require('./rating-group-context.cjs');
+const ratingGroupItemContext = require('./rating-group-item-context.cjs');
+
+const RatingGroupItem = react.forwardRef((props, ref) => {
+  const { children, index, ...divProps } = props;
+  const api = ratingGroupContext.useRatingGroupContext();
+  const itemState = api.getItemState({ index });
+  const mergedProps = react$1.mergeProps(api.getItemProps({ index }), divProps);
+  const view = runIfFn.runIfFn(children, itemState);
+  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupItemContext.RatingGroupItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: view }) });
+});
+RatingGroupItem.displayName = "RatingGroupItem";
+
+exports.RatingGroupItem = RatingGroupItem;

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

@@ -0,0 +1,10 @@
+import type { ItemProps } from '@zag-js/rating-group';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type RatingGroupItemContext } from './rating-group-item-context';
+export interface RatingGroupItemProps extends Assign<HTMLArkProps<'span'>, ItemProps & {
+    children: (state: RatingGroupItemContext) => ReactNode | ReactNode;
+}> {
+}
+export declare const RatingGroupItem: ForwardRefExoticComponent<RatingGroupItemProps & RefAttributes<HTMLSpanElement>>;

package/rating-group/rating-group-item.mjs

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useRatingGroupContext } from './rating-group-context.mjs';
+import { RatingGroupItemProvider } from './rating-group-item-context.mjs';
+
+const RatingGroupItem = forwardRef((props, ref) => {
+  const { children, index, ...divProps } = props;
+  const api = useRatingGroupContext();
+  const itemState = api.getItemState({ index });
+  const mergedProps = mergeProps(api.getItemProps({ index }), divProps);
+  const view = runIfFn(children, itemState);
+  return /* @__PURE__ */ jsx(RatingGroupItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: view }) });
+});
+RatingGroupItem.displayName = "RatingGroupItem";
+
+export { RatingGroupItem };

package/rating-group/rating-group-label.cjs

@@ -11,8 +11,8 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupLabel = react.forwardRef(
   (props, ref) => {
-    const { labelProps } = ratingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(labelProps, props);
+    const api = ratingGroupContext.useRatingGroupContext();
+    const mergedProps = react$1.mergeProps(api.labelProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
   }
 );

package/rating-group/rating-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 RatingGroupLabelProps = HTMLArkProps<'label'>;
-export declare const RatingGroupLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLLabelElement>>;
+export interface RatingGroupLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const RatingGroupLabel: ForwardRefExoticComponent<RatingGroupLabelProps & RefAttributes<HTMLLabelElement>>;

package/rating-group/rating-group-label.mjs

@@ -7,8 +7,8 @@ import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupLabel = forwardRef(
   (props, ref) => {
-    const { labelProps } = useRatingGroupContext();
-    const mergedProps = mergeProps(labelProps, props);
+    const api = useRatingGroupContext();
+    const mergedProps = mergeProps(api.labelProps, props);
     return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
   }
 );

package/rating-group/rating-group.cjs

@@ -15,6 +15,7 @@ const RatingGroup = react.forwardRef((props, ref) => {
   const [useRatingProps, inputProps] = createSplitProps.createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
+    "count",
     "defaultValue",
     "dir",
     "disabled",
@@ -22,20 +23,16 @@ const RatingGroup = react.forwardRef((props, ref) => {
     "getRootNode",
     "id",
     "ids",
-    "max",
     "name",
-    "onChange",
-    "onHover",
+    "onHoverChange",
+    "onValueChange",
     "readOnly",
     "translations",
     "value"
   ]);
   const api = useRatingGroup.useRatingGroup(useRatingProps);
   const mergedProps = react$1.mergeProps(api.rootProps, inputProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ratingGroupContext.RatingGroupProvider, { value: api, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 RatingGroup.displayName = "RatingGroup";
 

package/rating-group/rating-group.d.ts

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

package/rating-group/rating-group.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -11,6 +11,7 @@ const RatingGroup = forwardRef((props, ref) => {
   const [useRatingProps, inputProps] = createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
+    "count",
     "defaultValue",
     "dir",
     "disabled",
@@ -18,20 +19,16 @@ const RatingGroup = forwardRef((props, ref) => {
     "getRootNode",
     "id",
     "ids",
-    "max",
     "name",
-    "onChange",
-    "onHover",
+    "onHoverChange",
+    "onValueChange",
     "readOnly",
     "translations",
     "value"
   ]);
   const api = useRatingGroup(useRatingProps);
   const mergedProps = mergeProps(api.rootProps, inputProps);
-  return /* @__PURE__ */ jsxs(RatingGroupProvider, { value: api, children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 RatingGroup.displayName = "RatingGroup";
 

package/rating-group/use-rating-group.cjs

@@ -7,6 +7,7 @@ const ratingGroup = require('@zag-js/rating-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,17 @@ function _interopNamespaceDefault(e) {
 const ratingGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ratingGroup);
 
 const useRatingGroup = (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 }),
+    onHoverChange: useEvent.useEvent(props.onHoverChange)
   };
   const [state, send] = react$1.useMachine(ratingGroup__namespace.machine(initialContext), {
     context

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

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

package/rating-group/use-rating-group.mjs

@@ -3,19 +3,21 @@ import * as ratingGroup from '@zag-js/rating-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 useRatingGroup = (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 }),
+    onHoverChange: useEvent(props.onHoverChange)
   };
   const [state, send] = useMachine(ratingGroup.machine(initialContext), {
     context

package/segment-group/index.cjs

@@ -3,31 +3,29 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const segment = require('./segment.cjs');
-const segmentContext = require('./segment-context.cjs');
-const segmentControl = require('./segment-control.cjs');
 const segmentGroup = require('./segment-group.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroupIndicator = require('./segment-group-indicator.cjs');
+const segmentGroupItem = require('./segment-group-item.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+const segmentGroupItemControl = require('./segment-group-item-control.cjs');
+const segmentGroupItemText = require('./segment-group-item-text.cjs');
 const segmentGroupLabel = require('./segment-group-label.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
-const segmentLabel = require('./segment-label.cjs');
 
 const SegmentGroup = Object.assign(segmentGroup.SegmentGroup, {
   Root: segmentGroup.SegmentGroup,
-  Label: segmentGroupLabel.SegmentGroupLabel,
   Indicator: segmentGroupIndicator.SegmentGroupIndicator,
-  Segment: segment.Segment,
-  SegmentLabel: segmentLabel.SegmentLabel,
-  SegmentControl: segmentControl.SegmentControl
+  Item: segmentGroupItem.SegmentGroupItem,
+  ItemControl: segmentGroupItemControl.SegmentGroupItemControl,
+  ItemText: segmentGroupItemText.SegmentGroupItemText,
+  Label: segmentGroupLabel.SegmentGroupLabel
 });
 
-exports.Segment = segment.Segment;
-exports.useSegmentContext = segmentContext.useSegmentContext;
-exports.SegmentControl = segmentControl.SegmentControl;
 exports.useSegmentGroupContext = segmentGroupContext.useSegmentGroupContext;
 exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
+exports.SegmentGroupItem = segmentGroupItem.SegmentGroupItem;
+exports.useSegmentGroupItemContext = segmentGroupItemContext.useSegmentGroupItemContext;
+exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
+exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
-exports.segmentGroupAnatomy = segmentGroup_anatomy.segmentGroupAnatomy;
-exports.SegmentLabel = segmentLabel.SegmentLabel;
 exports.SegmentGroup = SegmentGroup;

package/segment-group/index.d.ts

@@ -1,32 +1,20 @@
-import { RadioProps } from '@zag-js/radio-group';
-import { UseSegmentGroupProps } from './use-segment-group';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, LabelHTMLAttributes, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { Segment, type SegmentProps } from './segment';
-import { useSegmentContext, type SegmentContext } from './segment-context';
-import { SegmentControl, type SegmentControlProps } from './segment-control';
 import { type SegmentGroupProps } from './segment-group';
 import { useSegmentGroupContext, type SegmentGroupContext } from './segment-group-context';
 import { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segment-group-indicator';
+import { SegmentGroupItem, type SegmentGroupItemProps } from './segment-group-item';
+import { useSegmentGroupItemContext, type SegmentGroupItemContext } from './segment-group-item-context';
+import { SegmentGroupItemControl, type SegmentGroupItemControlProps } from './segment-group-item-control';
+import { SegmentGroupItemText, type SegmentGroupItemTextProps } from './segment-group-item-text';
 import { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
-import { segmentGroupAnatomy } from './segment-group.anatomy';
-import { SegmentLabel, type SegmentLabelProps } from './segment-label';
-declare const SegmentGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseSegmentGroupProps> & UseSegmentGroupProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseSegmentGroupProps> & UseSegmentGroupProps & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLabelElement>>;
-    Indicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Segment: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, keyof RadioProps> & RadioProps & RefAttributes<HTMLLabelElement>>;
-    SegmentLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
-    SegmentControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
+declare const SegmentGroup: ForwardRefExoticComponent<SegmentGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<SegmentGroupProps & RefAttributes<HTMLDivElement>>;
+    Indicator: ForwardRefExoticComponent<SegmentGroupIndicatorProps & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<SegmentGroupItemProps & RefAttributes<HTMLLabelElement>>;
+    ItemControl: ForwardRefExoticComponent<SegmentGroupItemControlProps & RefAttributes<HTMLDivElement>>;
+    ItemText: ForwardRefExoticComponent<SegmentGroupItemTextProps & RefAttributes<HTMLSpanElement>>;
+    Label: ForwardRefExoticComponent<SegmentGroupLabelProps & RefAttributes<HTMLLabelElement>>;
 };
-export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel, segmentGroupAnatomy, useSegmentContext, useSegmentGroupContext, };
-export type { SegmentContext, SegmentControlProps, SegmentGroupContext, SegmentGroupIndicatorProps, SegmentGroupLabelProps, SegmentGroupProps, SegmentLabelProps, SegmentProps, };
+export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, useSegmentGroupContext, useSegmentGroupItemContext, };
+export type { SegmentGroupContext, SegmentGroupIndicatorProps, SegmentGroupItemContext, SegmentGroupItemControlProps, SegmentGroupItemProps, SegmentGroupItemTextProps, SegmentGroupLabelProps, SegmentGroupProps, };

package/segment-group/index.mjs

@@ -1,21 +1,20 @@
 'use client';
-import { Segment } from './segment.mjs';
-export { useSegmentContext } from './segment-context.mjs';
-import { SegmentControl } from './segment-control.mjs';
 import { SegmentGroup as SegmentGroup$1 } from './segment-group.mjs';
 export { useSegmentGroupContext } from './segment-group-context.mjs';
 import { SegmentGroupIndicator } from './segment-group-indicator.mjs';
+import { SegmentGroupItem } from './segment-group-item.mjs';
+export { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
+import { SegmentGroupItemControl } from './segment-group-item-control.mjs';
+import { SegmentGroupItemText } from './segment-group-item-text.mjs';
 import { SegmentGroupLabel } from './segment-group-label.mjs';
-export { segmentGroupAnatomy } from './segment-group.anatomy.mjs';
-import { SegmentLabel } from './segment-label.mjs';
 
 const SegmentGroup = Object.assign(SegmentGroup$1, {
   Root: SegmentGroup$1,
-  Label: SegmentGroupLabel,
   Indicator: SegmentGroupIndicator,
-  Segment,
-  SegmentLabel,
-  SegmentControl
+  Item: SegmentGroupItem,
+  ItemControl: SegmentGroupItemControl,
+  ItemText: SegmentGroupItemText,
+  Label: SegmentGroupLabel
 });
 
-export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel };
+export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel };

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

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseSegmentGroupReturn } from './use-segment-group';
-export type SegmentGroupContext = UseSegmentGroupReturn;
-export declare const SegmentGroupProvider: Provider<UseSegmentGroupReturn>, useSegmentGroupContext: () => UseSegmentGroupReturn;
+export interface SegmentGroupContext extends UseSegmentGroupReturn {
+}
+export declare const SegmentGroupProvider: Provider<SegmentGroupContext>, useSegmentGroupContext: () => SegmentGroupContext;

package/segment-group/segment-group-indicator.cjs

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

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

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

package/segment-group/segment-group-indicator.mjs

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

package/segment-group/segment-group-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 [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext.createContext({
+  name: "SegmentGroupItemContext",
+  hookName: "useSegmentGroupItemContext",
+  providerName: "<SegmentGroupItemProvider />"
+});
+
+exports.SegmentGroupItemProvider = SegmentGroupItemProvider;
+exports.useSegmentGroupItemContext = useSegmentGroupItemContext;

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

@@ -0,0 +1,18 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+export interface ItemProps {
+    value: string;
+    disabled?: boolean;
+    invalid?: boolean;
+}
+export interface ItemState {
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isChecked: boolean;
+    isFocused: boolean;
+    isHovered: boolean;
+    isActive: boolean;
+}
+export interface SegmentGroupItemContext extends ItemProps {
+}
+export declare const SegmentGroupItemProvider: Provider<SegmentGroupItemContext>, useSegmentGroupItemContext: () => SegmentGroupItemContext;