@ark-ui/react 0.10.0-beta.0 → 0.10.0

package/rating-group/rating-group.cjs

@@ -4,14 +4,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
-const RatingGroup = forwardRef.forwardRef((props, ref) => {
+const RatingGroup = react.forwardRef((props, ref) => {
   const [useRatingProps, inputProps] = createSplitProps.createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
@@ -31,11 +31,12 @@ const RatingGroup = forwardRef.forwardRef((props, ref) => {
     "value"
   ]);
   const ratingGroup = useRatingGroup.useRatingGroup(useRatingProps);
-  const mergedProps = react.mergeProps(ratingGroup.rootProps, inputProps);
+  const mergedProps = react$1.mergeProps(ratingGroup.rootProps, inputProps);
   return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...ratingGroup.hiddenInputProps, ref }),
     props.children
   ] }) });
 });
+RatingGroup.displayName = "RatingGroup";
 
 exports.RatingGroup = RatingGroup;

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

@@ -1,6 +1,13 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/rating-group';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseRatingGroupProps } from './use-rating-group';
-export type RatingGroupProps = Assign<HTMLArkProps<'input'>, UseRatingGroupProps>;
-export declare const RatingGroup: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, RatingGroupProps>>;
+export type RatingGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, UseRatingGroupProps>;
+export declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "name" | "value" | "form" | "id" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "disabled" | "readOnly" | "getRootNode" | "ids" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: number | undefined;
+} & RefAttributes<HTMLInputElement>>;

package/rating-group/rating-group.mjs

@@ -1,9 +1,9 @@
 'use client';
 import { jsx, jsxs } 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 { forwardRef } from '../forward-ref.mjs';
 import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
@@ -33,5 +33,6 @@ const RatingGroup = forwardRef((props, ref) => {
     props.children
   ] }) });
 });
+RatingGroup.displayName = "RatingGroup";
 
 export { RatingGroup };

package/rating-group/rating.cjs

@@ -4,21 +4,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const ratingContext = require('./rating-context.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
-const Rating = forwardRef.forwardRef((props, ref) => {
+const Rating = react.forwardRef((props, ref) => {
   const { children, index, ...divProps } = props;
   const { getRatingState, getRatingProps } = ratingGroupContext.useRatingGroupContext();
   const ratingState = getRatingState({ index });
-  const mergedProps = react.mergeProps(getRatingProps({ index }), divProps);
+  const mergedProps = react$1.mergeProps(getRatingProps({ index }), divProps);
   const view = runIfFn.runIfFn(children, ratingState);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(ratingContext.RatingProvider, { value: ratingState, children: view }) });
 });
+Rating.displayName = "Rating";
 
 exports.Rating = Rating;

package/rating-group/rating.d.ts

@@ -1,9 +1,15 @@
 import type { ItemProps } from '@zag-js/rating-group';
-import type { ForwardRefExoticComponent, type ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
 import { type RatingContext } from './rating-context';
-export type RatingProps = Assign<HTMLArkProps<'span'>, ItemProps & {
+export type RatingProps = Assign<ComponentPropsWithoutRef<typeof ark.span>, ItemProps & {
     children: (state: RatingContext) => ReactNode | ReactNode;
 }>;
-export declare const Rating: ForwardRefExoticComponent<Assign<AsChildComponentProps<"span">, RatingProps>>;
+export declare const Rating: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "children" | "index"> & ItemProps & {
+    children: (state: RatingContext) => ReactNode | ReactNode;
+} & RefAttributes<HTMLSpanElement>>;

package/rating-group/rating.mjs

@@ -1,9 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { RatingProvider } from './rating-context.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
@@ -16,5 +15,6 @@ const Rating = forwardRef((props, ref) => {
   const view = runIfFn(children, ratingState);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: /* @__PURE__ */ jsx(RatingProvider, { value: ratingState, children: view }) });
 });
+Rating.displayName = "Rating";
 
 export { Rating };

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

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const ratingGroup = require('@zag-js/rating-group');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,7 +30,7 @@ const ratingGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ratingGroup
 const useRatingGroup = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     value: props.defaultValue
@@ -39,10 +39,10 @@ const useRatingGroup = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = react.useMachine(ratingGroup__namespace.machine(initialContext), {
+  const [state, send] = react$1.useMachine(ratingGroup__namespace.machine(initialContext), {
     context
   });
-  return ratingGroup__namespace.connect(state, send, react.normalizeProps);
+  return ratingGroup__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useRatingGroup = useRatingGroup;

package/segment-group/segment-control.cjs

@@ -4,18 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentContext = require('./segment-context.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentControl = forwardRef.forwardRef((props, ref) => {
+const SegmentControl = react.forwardRef((props, ref) => {
   const { getRadioControlProps } = segmentGroupContext.useSegmentGroupContext();
   const context = segmentContext.useSegmentContext();
-  const mergedProps = react.mergeProps(getRadioControlProps(context), props);
+  const mergedProps = react$1.mergeProps(getRadioControlProps(context), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...segmentGroup_anatomy.parts.radioControl.attrs, ref });
 });
+SegmentControl.displayName = "SegmentControl";
 
 exports.SegmentControl = SegmentControl;

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

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

package/segment-group/segment-control.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSegmentContext } from './segment-context.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
@@ -13,5 +13,6 @@ const SegmentControl = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getRadioControlProps(context), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...parts.radioControl.attrs, ref });
 });
+SegmentControl.displayName = "SegmentControl";
 
 export { SegmentControl };

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

@@ -4,16 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentGroupLabel = forwardRef.forwardRef((props, ref) => {
-  const { labelProps } = segmentGroupContext.useSegmentGroupContext();
-  const mergedProps = react.mergeProps(labelProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ...segmentGroup_anatomy.parts.label.attrs, ref });
-});
+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 });
+  }
+);
+SegmentGroupLabel.displayName = "SegmentGroupLabel";
 
 exports.SegmentGroupLabel = SegmentGroupLabel;

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

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

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

@@ -1,15 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 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 SegmentGroupLabel = forwardRef(
+  (props, ref) => {
+    const { labelProps } = useSegmentGroupContext();
+    const mergedProps = mergeProps(labelProps, props);
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ...parts.label.attrs, ref });
+  }
+);
+SegmentGroupLabel.displayName = "SegmentGroupLabel";
 
 export { SegmentGroupLabel };

package/segment-group/segment-group.cjs

@@ -4,15 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 
-const SegmentGroup = forwardRef.forwardRef((props, ref) => {
+const SegmentGroup = react.forwardRef((props, ref) => {
   const [useSegmentGroupProps, divProps] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
     "dir",
@@ -28,8 +28,9 @@ const SegmentGroup = forwardRef.forwardRef((props, ref) => {
     "value"
   ]);
   const segmentGroup = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = react.mergeProps(segmentGroup.rootProps, divProps);
+  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 }) });
 });
+SegmentGroup.displayName = "SegmentGroup";
 
 exports.SegmentGroup = SegmentGroup;

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

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

package/segment-group/segment-group.mjs

@@ -1,9 +1,9 @@
 '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 { forwardRef } from '../forward-ref.mjs';
 import { SegmentGroupProvider } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 import { useSegmentGroup } from './use-segment-group.mjs';
@@ -27,5 +27,6 @@ const SegmentGroup = forwardRef((props, ref) => {
   const mergedProps = mergeProps(segmentGroup.rootProps, divProps);
   return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...parts.root.attrs, ref }) });
 });
+SegmentGroup.displayName = "SegmentGroup";
 
 export { SegmentGroup };

package/segment-group/segment-indicator.cjs

@@ -4,16 +4,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentIndicator = forwardRef.forwardRef((props, ref) => {
+const SegmentIndicator = react.forwardRef((props, ref) => {
   const { indicatorProps } = segmentGroupContext.useSegmentGroupContext();
-  const mergedProps = react.mergeProps(indicatorProps, props);
+  const mergedProps = react$1.mergeProps(indicatorProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...segmentGroup_anatomy.parts.indicator.attrs, ref });
 });
+SegmentIndicator.displayName = "SegmentIndicator";
 
 exports.SegmentIndicator = SegmentIndicator;

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

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

package/segment-group/segment-indicator.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 
@@ -11,5 +11,6 @@ const SegmentIndicator = forwardRef((props, ref) => {
   const mergedProps = mergeProps(indicatorProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...parts.indicator.attrs, ref });
 });
+SegmentIndicator.displayName = "SegmentIndicator";
 
 export { SegmentIndicator };

package/segment-group/segment-input.cjs

@@ -4,18 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentContext = require('./segment-context.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentInput = forwardRef.forwardRef((props, ref) => {
+const SegmentInput = react.forwardRef((props, ref) => {
   const { getRadioInputProps } = segmentGroupContext.useSegmentGroupContext();
   const context = segmentContext.useSegmentContext();
-  const mergedProps = react.mergeProps(getRadioInputProps(context), props);
+  const mergedProps = react$1.mergeProps(getRadioInputProps(context), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ...segmentGroup_anatomy.parts.radioInput.attrs, ref });
 });
+SegmentInput.displayName = "SegmentInput";
 
 exports.SegmentInput = SegmentInput;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type SegmentInputProps = HTMLArkProps<'input'>;
-export declare const SegmentInput: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type SegmentInputProps = ComponentPropsWithoutRef<typeof ark.input>;
+export declare const SegmentInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLInputElement>>;

package/segment-group/segment-input.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSegmentContext } from './segment-context.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
@@ -13,5 +13,6 @@ const SegmentInput = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getRadioInputProps(context), props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ...parts.radioInput.attrs, ref });
 });
+SegmentInput.displayName = "SegmentInput";
 
 export { SegmentInput };

package/segment-group/segment-label.cjs

@@ -4,18 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentContext = require('./segment-context.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentLabel = forwardRef.forwardRef((props, ref) => {
+const SegmentLabel = react.forwardRef((props, ref) => {
   const { getRadioLabelProps } = segmentGroupContext.useSegmentGroupContext();
   const context = segmentContext.useSegmentContext();
-  const mergedProps = react.mergeProps(getRadioLabelProps(context), props);
+  const mergedProps = react$1.mergeProps(getRadioLabelProps(context), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ...segmentGroup_anatomy.parts.radioLabel.attrs, ref });
 });
+SegmentLabel.displayName = "SegmentLabel";
 
 exports.SegmentLabel = SegmentLabel;

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

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

package/segment-group/segment-label.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSegmentContext } from './segment-context.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
@@ -13,5 +13,6 @@ const SegmentLabel = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getRadioLabelProps(context), props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ...parts.radioLabel.attrs, ref });
 });
+SegmentLabel.displayName = "SegmentLabel";
 
 export { SegmentLabel };

package/segment-group/segment.cjs

@@ -4,18 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const segmentContext = require('./segment-context.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const Segment = forwardRef.forwardRef((props, ref) => {
+const Segment = react.forwardRef((props, ref) => {
   const { value, disabled, invalid, readOnly, ...divProps } = props;
   const { getRadioProps } = segmentGroupContext.useSegmentGroupContext();
-  const mergedProps = react.mergeProps(getRadioProps({ value, disabled }), divProps);
+  const mergedProps = react$1.mergeProps(getRadioProps({ value, disabled }), divProps);
   return /* @__PURE__ */ jsxRuntime.jsx(segmentContext.SegmentProvider, { value: { value, disabled, invalid, readOnly }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ...segmentGroup_anatomy.parts.radio.attrs, ref }) });
 });
+Segment.displayName = "Segment";
 
 exports.Segment = Segment;

package/segment-group/segment.d.ts

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

package/segment-group/segment.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { SegmentProvider } from './segment-context.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
@@ -13,5 +13,6 @@ const Segment = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getRadioProps({ value, disabled }), divProps);
   return /* @__PURE__ */ jsx(SegmentProvider, { value: { value, disabled, invalid, readOnly }, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ...parts.radio.attrs, ref }) });
 });
+Segment.displayName = "Segment";
 
 export { Segment };