@ark-ui/react 1.1.0 → 1.2.0

package/pin-input/pin-input.cjs

@@ -12,7 +12,7 @@ const pinInputContext = require('./pin-input-context.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 
 const PinInput = react.forwardRef((props, ref) => {
-  const [usePinInputProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [usePinInputProps, localProps] = createSplitProps.createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
     "defaultValue",
@@ -37,7 +37,7 @@ const PinInput = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = usePinInput.usePinInput(usePinInputProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(pinInputContext.PinInputProvider, { value: api, children: [
     /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })

package/pin-input/pin-input.mjs

@@ -8,7 +8,7 @@ import { PinInputProvider } from './pin-input-context.mjs';
 import { usePinInput } from './use-pin-input.mjs';
 
 const PinInput = forwardRef((props, ref) => {
-  const [usePinInputProps, divProps] = createSplitProps()(props, [
+  const [usePinInputProps, localProps] = createSplitProps()(props, [
     "autoFocus",
     "blurOnComplete",
     "defaultValue",
@@ -33,7 +33,7 @@ const PinInput = forwardRef((props, ref) => {
     "value"
   ]);
   const api = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxs(PinInputProvider, { value: api, children: [
     /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
     /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })

package/popover/popover.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
 require('react');
 require('../presence/index.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
@@ -16,7 +17,7 @@ const presenceContext = require('../presence/presence-context.cjs');
 const Popover = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = usePopover.usePopover(localProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(popoverContext.PopoverProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };

package/popover/popover.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import 'react';
 import '../presence/index.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
@@ -12,7 +13,7 @@ import { PresenceProvider } from '../presence/presence-context.mjs';
 const Popover = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = usePopover(localProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(PopoverProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };

package/portal.cjs

@@ -6,11 +6,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react = require('react');
 const reactDom = require('react-dom');
 require('./environment/index.cjs');
+const useIsServer = require('./use-is-server.cjs');
 const environmentContext = require('./environment/environment-context.cjs');
 
-const isServer = typeof window === "undefined";
 const Portal = (props) => {
   const { children, container, disabled } = props;
+  const isServer = useIsServer.useIsServer();
   const getRootNode = environmentContext.useEnvironmentContext();
   if (isServer || disabled)
     return children;

package/portal.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, type PropsWithChildren, type RefObject } from 'react';
+import { type PropsWithChildren, type ReactNode, type ReactPortal, type RefObject } from 'react';
 export interface PortalProps {
     disabled?: boolean;
     container?: RefObject<HTMLElement>;
 }
-export declare const Portal: (props: PropsWithChildren<PortalProps>) => ReactNode;
+export declare const Portal: (props: PropsWithChildren<PortalProps>) => ReactPortal[] | ReactNode | null | undefined;

package/portal.mjs

@@ -2,11 +2,12 @@
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
 import './environment/index.mjs';
+import { useIsServer } from './use-is-server.mjs';
 import { useEnvironmentContext } from './environment/environment-context.mjs';
 
-const isServer = typeof window === "undefined";
 const Portal = (props) => {
   const { children, container, disabled } = props;
+  const isServer = useIsServer();
   const getRootNode = useEnvironmentContext();
   if (isServer || disabled)
     return children;

package/radio-group/radio-group-indicator.cjs

@@ -4,7 +4,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
@@ -14,7 +13,7 @@ const RadioGroupIndicator = react.forwardRef(
   (props, ref) => {
     const api = radioGroupContext.useRadioGroupContext();
     const mergedProps = react$1.mergeProps(api.indicatorProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ...anatomy.radioGroupAnatomy.build().indicator.attrs, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 RadioGroupIndicator.displayName = "RadioGroupIndicator";

package/radio-group/radio-group-indicator.mjs

@@ -1,6 +1,5 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { radioGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -10,7 +9,7 @@ const RadioGroupIndicator = forwardRef(
   (props, ref) => {
     const api = useRadioGroupContext();
     const mergedProps = mergeProps(api.indicatorProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ...radioGroupAnatomy.build().indicator.attrs, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 RadioGroupIndicator.displayName = "RadioGroupIndicator";

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

@@ -3,7 +3,7 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface RadioGroupItemProps extends Assign<HTMLArkProps<'label'>, {
-    children?: ReactNode | ((state: ItemState) => ReactNode);
+    children?: ((state: ItemState) => ReactNode) | ReactNode;
 }>, ItemProps {
 }
 export declare const RadioGroupItem: ForwardRefExoticComponent<RadioGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group.cjs

@@ -12,7 +12,7 @@ const radioGroupContext = require('./radio-group-context.cjs');
 const useRadioGroup = require('./use-radio-group.cjs');
 
 const RadioGroup = react.forwardRef((props, ref) => {
-  const [useRadioGroupProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [useRadioGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
     "dir",
     "disabled",
@@ -26,7 +26,7 @@ const RadioGroup = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRadioGroup.useRadioGroup(useRadioGroupProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(radioGroupContext.RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 RadioGroup.displayName = "RadioGroup";

package/radio-group/radio-group.mjs

@@ -8,7 +8,7 @@ import { RadioGroupProvider } from './radio-group-context.mjs';
 import { useRadioGroup } from './use-radio-group.mjs';
 
 const RadioGroup = forwardRef((props, ref) => {
-  const [useRadioGroupProps, divProps] = createSplitProps()(props, [
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, [
     "defaultValue",
     "dir",
     "disabled",
@@ -22,7 +22,7 @@ const RadioGroup = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(RadioGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 RadioGroup.displayName = "RadioGroup";

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

@@ -12,9 +12,9 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupControl = react.forwardRef(
   (props, ref) => {
-    const { children, ...divProps } = props;
+    const { children, ...localProps } = props;
     const api = ratingGroupContext.useRatingGroupContext();
-    const mergedProps = react$1.mergeProps(api.controlProps, divProps);
+    const mergedProps = react$1.mergeProps(api.controlProps, localProps);
     const view = runIfFn.runIfFn(children, api);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),

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

@@ -8,9 +8,9 @@ import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupControl = forwardRef(
   (props, ref) => {
-    const { children, ...divProps } = props;
+    const { children, ...localProps } = props;
     const api = useRatingGroupContext();
-    const mergedProps = mergeProps(api.controlProps, divProps);
+    const mergedProps = mergeProps(api.controlProps, localProps);
     const view = runIfFn(children, api);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),

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

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

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

@@ -6,18 +6,19 @@ 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 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 [itemProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, ["index"]);
   const api = ratingGroupContext.useRatingGroupContext();
-  const itemState = api.getItemState({ index });
-  const mergedProps = react$1.mergeProps(api.getItemProps({ index }), divProps);
+  const mergedProps = react$1.mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
   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 }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupItemContext.RatingGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: view }) });
 });
 RatingGroupItem.displayName = "RatingGroupItem";
 

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

@@ -2,18 +2,19 @@
 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 { 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 [itemProps, { children, ...localProps }] = createSplitProps()(props, ["index"]);
   const api = useRatingGroupContext();
-  const itemState = api.getItemState({ index });
-  const mergedProps = mergeProps(api.getItemProps({ index }), divProps);
+  const mergedProps = mergeProps(api.getItemProps(itemProps), localProps);
+  const itemState = api.getItemState(itemProps);
   const view = runIfFn(children, itemState);
-  return /* @__PURE__ */ jsx(RatingGroupItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(RatingGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: view }) });
 });
 RatingGroupItem.displayName = "RatingGroupItem";
 

package/rating-group/rating-group.cjs

@@ -12,7 +12,7 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
 const RatingGroup = react.forwardRef((props, ref) => {
-  const [useRatingProps, inputProps] = createSplitProps.createSplitProps()(props, [
+  const [useRatingProps, localProps] = createSplitProps.createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
     "count",
@@ -31,7 +31,7 @@ const RatingGroup = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRatingGroup.useRatingGroup(useRatingProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, inputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   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.mjs

@@ -8,7 +8,7 @@ import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
 const RatingGroup = forwardRef((props, ref) => {
-  const [useRatingProps, inputProps] = createSplitProps()(props, [
+  const [useRatingProps, localProps] = createSplitProps()(props, [
     "allowHalf",
     "autoFocus",
     "count",
@@ -27,7 +27,7 @@ const RatingGroup = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useRatingGroup(useRatingProps);
-  const mergedProps = mergeProps(api.rootProps, inputProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(RatingGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 RatingGroup.displayName = "RatingGroup";

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

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const ratingGroup = require('@zag-js/rating-group');
+const rating = require('@zag-js/rating-group');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 require('../environment/index.cjs');
@@ -27,7 +27,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-const ratingGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ratingGroup);
+const rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 
 const useRatingGroup = (props) => {
   const initialContext = {
@@ -42,10 +42,10 @@ const useRatingGroup = (props) => {
     onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
     onHoverChange: useEvent.useEvent(props.onHoverChange)
   };
-  const [state, send] = react$1.useMachine(ratingGroup__namespace.machine(initialContext), {
+  const [state, send] = react$1.useMachine(rating__namespace.machine(initialContext), {
     context
   });
-  return ratingGroup__namespace.connect(state, send, react$1.normalizeProps);
+  return rating__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useRatingGroup = useRatingGroup;

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

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

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

@@ -1,5 +1,5 @@
 'use client';
-import * as ratingGroup from '@zag-js/rating-group';
+import * as rating from '@zag-js/rating-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import '../environment/index.mjs';
@@ -19,10 +19,10 @@ const useRatingGroup = (props) => {
     onValueChange: useEvent(props.onValueChange, { sync: true }),
     onHoverChange: useEvent(props.onHoverChange)
   };
-  const [state, send] = useMachine(ratingGroup.machine(initialContext), {
+  const [state, send] = useMachine(rating.machine(initialContext), {
     context
   });
-  return ratingGroup.connect(state, send, normalizeProps);
+  return rating.connect(state, send, normalizeProps);
 };
 
 export { useRatingGroup };

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

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

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

@@ -1,17 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupIndicator = forwardRef(
   (props, ref) => {
     const api = useSegmentGroupContext();
     const mergedProps = mergeProps(
       api.indicatorProps,
-      parts.indicator.attrs,
+      segmentGroupAnatomy.build().indicator.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

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

@@ -1,18 +1,6 @@
 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;
-}
+import type { ItemProps } from '@zag-js/radio-group';
 export interface SegmentGroupItemContext extends ItemProps {
 }
 export declare const SegmentGroupItemProvider: Provider<SegmentGroupItemContext>, useSegmentGroupItemContext: () => SegmentGroupItemContext;

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

@@ -4,12 +4,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 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) => {
@@ -17,7 +17,7 @@ const SegmentGroupItemControl = react.forwardRef(
     const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
     const mergedProps = react$1.mergeProps(
       api.getItemControlProps(itemProps),
-      segmentGroup_anatomy.parts.itemControl.attrs,
+      anatomy.segmentGroupAnatomy.build().itemControl.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 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) => {
@@ -13,7 +13,7 @@ const SegmentGroupItemControl = forwardRef(
     const itemProps = useSegmentGroupItemContext();
     const mergedProps = mergeProps(
       api.getItemControlProps(itemProps),
-      parts.itemControl.attrs,
+      segmentGroupAnatomy.build().itemControl.attrs,
       props
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -4,12 +4,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 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) => {
@@ -17,7 +17,7 @@ const SegmentGroupItemText = react.forwardRef(
     const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
     const mergedProps = react$1.mergeProps(
       api.getItemTextProps(itemProps),
-      segmentGroup_anatomy.parts.itemText.attrs,
+      anatomy.segmentGroupAnatomy.build().itemText.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 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) => {
@@ -13,7 +13,7 @@ const SegmentGroupItemText = forwardRef(
     const itemProps = useSegmentGroupItemContext();
     const mergedProps = mergeProps(
       api.getItemTextProps(itemProps),
-      parts.itemText.attrs,
+      segmentGroupAnatomy.build().itemText.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });

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

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
@@ -11,7 +12,6 @@ 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) => {
@@ -22,12 +22,12 @@ const SegmentGroupItem = react.forwardRef(
     const api = segmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       api.getItemProps(itemProps),
-      segmentGroup_anatomy.parts.item.attrs,
+      anatomy.segmentGroupAnatomy.build().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 }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupItemContext.SegmentGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
   }
 );
 SegmentGroupItem.displayName = "SegmentGroupItem";

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

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

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -7,7 +8,6 @@ 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) => {
@@ -18,12 +18,12 @@ const SegmentGroupItem = forwardRef(
     const api = useSegmentGroupContext();
     const mergedProps = mergeProps(
       api.getItemProps(itemProps),
-      parts.item.attrs,
+      segmentGroupAnatomy.build().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 }) });
+    return /* @__PURE__ */ jsx(SegmentGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
   }
 );
 SegmentGroupItem.displayName = "SegmentGroupItem";