@ark-ui/react 3.4.0-1 → 3.5.0

package/dist/components/pagination/pagination.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as paginationAnatomy } from '@zag-js/pagination';

package/dist/components/pin-input/index.cjs

@@ -11,7 +11,8 @@ const pinInputRoot = require('./pin-input-root.cjs');
 const pinInputRootProvider = require('./pin-input-root-provider.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
-const pinInput = require('./pin-input.cjs');
+const pinInput$1 = require('./pin-input.cjs');
+const pinInput = require('@zag-js/pin-input');
 
 
 
@@ -24,4 +25,8 @@ exports.PinInputRoot = pinInputRoot.PinInputRoot;
 exports.PinInputRootProvider = pinInputRootProvider.PinInputRootProvider;
 exports.usePinInput = usePinInput.usePinInput;
 exports.usePinInputContext = usePinInputContext.usePinInputContext;
-exports.PinInput = pinInput;
+exports.PinInput = pinInput$1;
+Object.defineProperty(exports, "pinInputAnatomy", {
+  enumerable: true,
+  get: () => pinInput.anatomy
+});

package/dist/components/pin-input/index.d.cts

@@ -8,4 +8,5 @@ export { PinInputRoot, type PinInputRootProps, type PinInputRootBaseProps, } fro
 export { PinInputRootProvider, type PinInputRootProviderProps, type PinInputRootProviderBaseProps, } from './pin-input-root-provider';
 export { usePinInput, type UsePinInputProps, type UsePinInputReturn } from './use-pin-input';
 export { usePinInputContext, type UsePinInputContext } from './use-pin-input-context';
+export { pinInputAnatomy } from './pin-input.anatomy';
 export * as PinInput from './pin-input';

package/dist/components/pin-input/index.d.ts

@@ -8,4 +8,5 @@ export { PinInputRoot, type PinInputRootProps, type PinInputRootBaseProps, } fro
 export { PinInputRootProvider, type PinInputRootProviderProps, type PinInputRootProviderBaseProps, } from './pin-input-root-provider';
 export { usePinInput, type UsePinInputProps, type UsePinInputReturn } from './use-pin-input';
 export { usePinInputContext, type UsePinInputContext } from './use-pin-input-context';
+export { pinInputAnatomy } from './pin-input.anatomy';
 export * as PinInput from './pin-input';

package/dist/components/pin-input/index.js

@@ -9,3 +9,4 @@ export { usePinInput } from './use-pin-input.js';
 export { usePinInputContext } from './use-pin-input-context.js';
 import * as pinInput from './pin-input.js';
 export { pinInput as PinInput };
+export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';

package/dist/components/pin-input/pin-input-hidden-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const usePinInputContext = require('./use-pin-input-context.cjs');
 
 const PinInputHiddenInput = react.forwardRef(
   (props, ref) => {
     const pinInput = usePinInputContext.usePinInputContext();
     const mergedProps = react$1.mergeProps(pinInput.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 PinInputHiddenInput.displayName = "PinInputHiddenInput";

package/dist/components/pin-input/pin-input-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { usePinInputContext } from './use-pin-input-context.js';
 
 const PinInputHiddenInput = forwardRef(
   (props, ref) => {
     const pinInput = usePinInputContext();
     const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 PinInputHiddenInput.displayName = "PinInputHiddenInput";

package/dist/components/pin-input/pin-input-root.cjs

@@ -29,6 +29,8 @@ const PinInputRoot = react.forwardRef((props, ref) => {
     "otp",
     "pattern",
     "placeholder",
+    "readOnly",
+    "required",
     "selectOnFocus",
     "translations",
     "type",

package/dist/components/pin-input/pin-input-root.js

@@ -25,6 +25,8 @@ const PinInputRoot = forwardRef((props, ref) => {
     "otp",
     "pattern",
     "placeholder",
+    "readOnly",
+    "required",
     "selectOnFocus",
     "translations",
     "type",

package/dist/components/pin-input/pin-input.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';

package/dist/components/pin-input/pin-input.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';

package/dist/components/pin-input/use-pin-input.cjs

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,8 +33,17 @@ const pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 const usePinInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

package/dist/components/pin-input/use-pin-input.js

@@ -5,12 +5,22 @@ import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const usePinInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

package/dist/components/popover/index.cjs

@@ -17,7 +17,8 @@ const popoverTitle = require('./popover-title.cjs');
 const popoverTrigger = require('./popover-trigger.cjs');
 const usePopover = require('./use-popover.cjs');
 const usePopoverContext = require('./use-popover-context.cjs');
-const popover = require('./popover.cjs');
+const popover$1 = require('./popover.cjs');
+const popover = require('@zag-js/popover');
 
 
 
@@ -36,4 +37,8 @@ exports.PopoverTitle = popoverTitle.PopoverTitle;
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
 exports.usePopover = usePopover.usePopover;
 exports.usePopoverContext = usePopoverContext.usePopoverContext;
-exports.Popover = popover;
+exports.Popover = popover$1;
+Object.defineProperty(exports, "popoverAnatomy", {
+  enumerable: true,
+  get: () => popover.anatomy
+});

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

@@ -14,4 +14,5 @@ export { PopoverTitle, type PopoverTitleProps, type PopoverTitleBaseProps, } fro
 export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerBaseProps, } from './popover-trigger';
 export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
 export { usePopoverContext, type UsePopoverContext } from './use-popover-context';
+export { popoverAnatomy } from './popover.anatomy';
 export * as Popover from './popover';

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

@@ -14,4 +14,5 @@ export { PopoverTitle, type PopoverTitleProps, type PopoverTitleBaseProps, } fro
 export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerBaseProps, } from './popover-trigger';
 export { usePopover, type UsePopoverProps, type UsePopoverReturn } from './use-popover';
 export { usePopoverContext, type UsePopoverContext } from './use-popover-context';
+export { popoverAnatomy } from './popover.anatomy';
 export * as Popover from './popover';

package/dist/components/popover/index.js

@@ -15,3 +15,4 @@ export { usePopover } from './use-popover.js';
 export { usePopoverContext } from './use-popover-context.js';
 import * as popover from './popover.js';
 export { popover as Popover };
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/components/popover/popover-description.d.cts

@@ -5,4 +5,4 @@ export interface PopoverDescriptionBaseProps extends PolymorphicProps {
 }
 export interface PopoverDescriptionProps extends HTMLProps<'div'>, PopoverDescriptionBaseProps {
 }
-export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/popover/popover-description.d.ts

@@ -5,4 +5,4 @@ export interface PopoverDescriptionBaseProps extends PolymorphicProps {
 }
 export interface PopoverDescriptionProps extends HTMLProps<'div'>, PopoverDescriptionBaseProps {
 }
-export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export declare const PopoverDescription: ForwardRefExoticComponent<PopoverDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/popover/popover.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/components/popover/popover.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/components/portal/portal.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const domQuery = require('@zag-js/dom-query');
 const react = require('react');
 const reactDom = require('react-dom');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
@@ -14,9 +15,14 @@ const Portal = (props) => {
   const isServer = useIsServer.useIsServer();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   if (isServer || disabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  const doc = getRootNode?.().ownerDocument ?? document;
-  const mountNode = container?.current ?? doc.body;
+  const mountNode = container?.current ?? getPortalNode(getRootNode);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.Children.map(children, (child) => reactDom.createPortal(child, mountNode)) });
 };
+function getPortalNode(cb) {
+  const node = cb?.();
+  const rootNode = node.getRootNode();
+  if (domQuery.isShadowRoot(rootNode)) return rootNode;
+  return domQuery.getDocument(node).body;
+}
 
 exports.Portal = Portal;

package/dist/components/portal/portal.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { isShadowRoot, getDocument } from '@zag-js/dom-query';
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
@@ -10,9 +11,14 @@ const Portal = (props) => {
   const isServer = useIsServer();
   const { getRootNode } = useEnvironmentContext();
   if (isServer || disabled) return /* @__PURE__ */ jsx(Fragment, { children });
-  const doc = getRootNode?.().ownerDocument ?? document;
-  const mountNode = container?.current ?? doc.body;
+  const mountNode = container?.current ?? getPortalNode(getRootNode);
   return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child) => createPortal(child, mountNode)) });
 };
+function getPortalNode(cb) {
+  const node = cb?.();
+  const rootNode = node.getRootNode();
+  if (isShadowRoot(rootNode)) return rootNode;
+  return getDocument(node).body;
+}
 
 export { Portal };

package/dist/components/progress/index.cjs

@@ -15,7 +15,8 @@ const progressValueText = require('./progress-value-text.cjs');
 const progressView = require('./progress-view.cjs');
 const useProgress = require('./use-progress.cjs');
 const useProgressContext = require('./use-progress-context.cjs');
-const progress = require('./progress.cjs');
+const progress$1 = require('./progress.cjs');
+const progress = require('@zag-js/progress');
 
 
 
@@ -32,4 +33,8 @@ exports.ProgressValueText = progressValueText.ProgressValueText;
 exports.ProgressView = progressView.ProgressView;
 exports.useProgress = useProgress.useProgress;
 exports.useProgressContext = useProgressContext.useProgressContext;
-exports.Progress = progress;
+exports.Progress = progress$1;
+Object.defineProperty(exports, "progressAnatomy", {
+  enumerable: true,
+  get: () => progress.anatomy
+});

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

@@ -11,4 +11,5 @@ export { ProgressValueText, type ProgressValueTextProps, type ProgressValueTextB
 export { ProgressView, type ProgressViewProps, type ProgressViewBaseProps, } from './progress-view';
 export { useProgress, type UseProgressProps, type UseProgressReturn } from './use-progress';
 export { useProgressContext, type UseProgressContext } from './use-progress-context';
+export { progressAnatomy } from './progress.anatomy';
 export * as Progress from './progress';

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

@@ -11,4 +11,5 @@ export { ProgressValueText, type ProgressValueTextProps, type ProgressValueTextB
 export { ProgressView, type ProgressViewProps, type ProgressViewBaseProps, } from './progress-view';
 export { useProgress, type UseProgressProps, type UseProgressReturn } from './use-progress';
 export { useProgressContext, type UseProgressContext } from './use-progress-context';
+export { progressAnatomy } from './progress.anatomy';
 export * as Progress from './progress';

package/dist/components/progress/index.js

@@ -13,3 +13,4 @@ export { useProgress } from './use-progress.js';
 export { useProgressContext } from './use-progress-context.js';
 import * as progress from './progress.js';
 export { progress as Progress };
+export { anatomy as progressAnatomy } from '@zag-js/progress';

package/dist/components/progress/progress.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as progressAnatomy } from '@zag-js/progress';

package/dist/components/progress/progress.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as progressAnatomy } from '@zag-js/progress';

package/dist/components/qr-code/index.cjs

@@ -11,6 +11,7 @@ const qrCodeRootProvider = require('./qr-code-root-provider.cjs');
 const useQrCode = require('./use-qr-code.cjs');
 const useQrCodeContext = require('./use-qr-code-context.cjs');
 const qrCode = require('./qr-code.cjs');
+const qrcode = require('@zag-js/qr-code');
 
 
 
@@ -23,3 +24,7 @@ exports.QrCodeRootProvider = qrCodeRootProvider.QrCodeRootProvider;
 exports.useQrCode = useQrCode.useQrCode;
 exports.useQrCodeContext = useQrCodeContext.useQrCodeContext;
 exports.QrCode = qrCode;
+Object.defineProperty(exports, "qrCodeAnatomy", {
+  enumerable: true,
+  get: () => qrcode.anatomy
+});

package/dist/components/qr-code/index.d.cts

@@ -7,4 +7,5 @@ export { QrCodeRoot, type QrCodeRootProps, type QrCodeRootBaseProps, } from './q
 export { QrCodeRootProvider, type QrCodeRootProviderProps, type QrCodeRootProviderBaseProps, } from './qr-code-root-provider';
 export { useQrCode, type UseQrCodeProps, type UseQrCodeReturn } from './use-qr-code';
 export { useQrCodeContext, type UseQrCodeContext } from './use-qr-code-context';
+export { qrCodeAnatomy } from './qr-code.anatomy';
 export * as QrCode from './qr-code';

package/dist/components/qr-code/index.d.ts

@@ -7,4 +7,5 @@ export { QrCodeRoot, type QrCodeRootProps, type QrCodeRootBaseProps, } from './q
 export { QrCodeRootProvider, type QrCodeRootProviderProps, type QrCodeRootProviderBaseProps, } from './qr-code-root-provider';
 export { useQrCode, type UseQrCodeProps, type UseQrCodeReturn } from './use-qr-code';
 export { useQrCodeContext, type UseQrCodeContext } from './use-qr-code-context';
+export { qrCodeAnatomy } from './qr-code.anatomy';
 export * as QrCode from './qr-code';

package/dist/components/qr-code/index.js

@@ -8,3 +8,4 @@ export { useQrCode } from './use-qr-code.js';
 export { useQrCodeContext } from './use-qr-code-context.js';
 import * as qrCode from './qr-code.js';
 export { qrCode as QrCode };
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

package/dist/components/qr-code/qr-code.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

package/dist/components/qr-code/qr-code.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

package/dist/components/radio-group/index.cjs

@@ -16,6 +16,7 @@ const useRadioGroup = require('./use-radio-group.cjs');
 const useRadioGroupContext = require('./use-radio-group-context.cjs');
 const useRadioGroupItemContext = require('./use-radio-group-item-context.cjs');
 const radioGroup = require('./radio-group.cjs');
+const radio = require('@zag-js/radio-group');
 
 
 
@@ -33,3 +34,7 @@ exports.useRadioGroup = useRadioGroup.useRadioGroup;
 exports.useRadioGroupContext = useRadioGroupContext.useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext.useRadioGroupItemContext;
 exports.RadioGroup = radioGroup;
+Object.defineProperty(exports, "radioGroupAnatomy", {
+  enumerable: true,
+  get: () => radio.anatomy
+});

package/dist/components/radio-group/index.d.cts

@@ -12,4 +12,5 @@ export { RadioGroupRootProvider, type RadioGroupRootProviderProps, type RadioGro
 export { useRadioGroup, type UseRadioGroupProps, type UseRadioGroupReturn } from './use-radio-group';
 export { useRadioGroupContext, type UseRadioGroupContext } from './use-radio-group-context';
 export { useRadioGroupItemContext, type UseRadioGroupItemContext, } from './use-radio-group-item-context';
+export { radioGroupAnatomy } from './radio-group.anatomy';
 export * as RadioGroup from './radio-group';

package/dist/components/radio-group/index.d.ts

@@ -12,4 +12,5 @@ export { RadioGroupRootProvider, type RadioGroupRootProviderProps, type RadioGro
 export { useRadioGroup, type UseRadioGroupProps, type UseRadioGroupReturn } from './use-radio-group';
 export { useRadioGroupContext, type UseRadioGroupContext } from './use-radio-group-context';
 export { useRadioGroupItemContext, type UseRadioGroupItemContext, } from './use-radio-group-item-context';
+export { radioGroupAnatomy } from './radio-group.anatomy';
 export * as RadioGroup from './radio-group';

package/dist/components/radio-group/index.js

@@ -13,3 +13,4 @@ export { useRadioGroupContext } from './use-radio-group-context.js';
 export { useRadioGroupItemContext } from './use-radio-group-item-context.js';
 import * as radioGroup from './radio-group.js';
 export { radioGroup as RadioGroup };
+export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';

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

@@ -0,0 +1 @@
+export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';

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

@@ -0,0 +1 @@
+export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';

package/dist/components/rating-group/index.cjs

@@ -14,6 +14,7 @@ const useRatingGroup = require('./use-rating-group.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 const useRatingGroupItemContext = require('./use-rating-group-item-context.cjs');
 const ratingGroup = require('./rating-group.cjs');
+const rating = require('@zag-js/rating-group');
 
 
 
@@ -29,3 +30,7 @@ exports.useRatingGroup = useRatingGroup.useRatingGroup;
 exports.useRatingGroupContext = useRatingGroupContext.useRatingGroupContext;
 exports.useRatingGroupItemContext = useRatingGroupItemContext.useRatingGroupItemContext;
 exports.RatingGroup = ratingGroup;
+Object.defineProperty(exports, "ratingGroupAnatomy", {
+  enumerable: true,
+  get: () => rating.anatomy
+});

package/dist/components/rating-group/index.d.cts

@@ -10,4 +10,5 @@ export { RatingGroupRootProvider, type RatingGroupRootProviderProps, type Rating
 export { useRatingGroup, type UseRatingGroupProps, type UseRatingGroupReturn, } from './use-rating-group';
 export { useRatingGroupContext, type UseRatingGroupContext } from './use-rating-group-context';
 export { useRatingGroupItemContext, type UseRatingGroupItemContext, } from './use-rating-group-item-context';
+export { ratingGroupAnatomy } from './rating-group.anatomy';
 export * as RatingGroup from './rating-group';

package/dist/components/rating-group/index.d.ts

@@ -10,4 +10,5 @@ export { RatingGroupRootProvider, type RatingGroupRootProviderProps, type Rating
 export { useRatingGroup, type UseRatingGroupProps, type UseRatingGroupReturn, } from './use-rating-group';
 export { useRatingGroupContext, type UseRatingGroupContext } from './use-rating-group-context';
 export { useRatingGroupItemContext, type UseRatingGroupItemContext, } from './use-rating-group-item-context';
+export { ratingGroupAnatomy } from './rating-group.anatomy';
 export * as RatingGroup from './rating-group';

package/dist/components/rating-group/index.js

@@ -11,3 +11,4 @@ export { useRatingGroupContext } from './use-rating-group-context.js';
 export { useRatingGroupItemContext } from './use-rating-group-item-context.js';
 import * as ratingGroup from './rating-group.js';
 export { ratingGroup as RatingGroup };
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

package/dist/components/rating-group/rating-group-hidden-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useRatingGroupContext = require('./use-rating-group-context.cjs');
 
 const RatingGroupHiddenInput = react.forwardRef(
   (props, ref) => {
     const ratingGroup = useRatingGroupContext.useRatingGroupContext();
     const mergedProps = react$1.mergeProps(ratingGroup.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 RatingGroupHiddenInput.displayName = "RatingGroupHiddenInput";

package/dist/components/rating-group/rating-group-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useRatingGroupContext } from './use-rating-group-context.js';
 
 const RatingGroupHiddenInput = forwardRef(
   (props, ref) => {
     const ratingGroup = useRatingGroupContext();
     const mergedProps = mergeProps(ratingGroup.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 RatingGroupHiddenInput.displayName = "RatingGroupHiddenInput";

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

@@ -25,6 +25,7 @@ const RatingGroupRoot = react.forwardRef((props, ref) => {
     "onHoverChange",
     "onValueChange",
     "readOnly",
+    "required",
     "translations",
     "value"
   ]);

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

@@ -21,6 +21,7 @@ const RatingGroupRoot = forwardRef((props, ref) => {
     "onHoverChange",
     "onValueChange",
     "readOnly",
+    "required",
     "translations",
     "value"
   ]);

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

@@ -0,0 +1 @@
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

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

@@ -0,0 +1 @@
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

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

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,9 +33,17 @@ const rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 const useRatingGroup = (props) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

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

@@ -5,13 +5,22 @@ import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useRatingGroup = (props) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

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

@@ -15,6 +15,7 @@ const segmentGroupRootProvider = require('./segment-group-root-provider.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const useSegmentGroupItemContext = require('./use-segment-group-item-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const segmentGroup = require('./segment-group.cjs');
 
 
@@ -32,4 +33,5 @@ exports.SegmentGroupRootProvider = segmentGroupRootProvider.SegmentGroupRootProv
 exports.useSegmentGroup = useSegmentGroup.useSegmentGroup;
 exports.useSegmentGroupContext = useSegmentGroupContext.useSegmentGroupContext;
 exports.useSegmentGroupItemContext = useSegmentGroupItemContext.useSegmentGroupItemContext;
+exports.segmentGroupAnatomy = segmentGroup_anatomy.segmentGroupAnatomy;
 exports.SegmentGroup = segmentGroup;

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

@@ -12,4 +12,5 @@ export { SegmentGroupRootProvider, type SegmentGroupRootProviderProps, type Segm
 export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn, } from './use-segment-group';
 export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
 export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { segmentGroupAnatomy } from './segment-group.anatomy';
 export * as SegmentGroup from './segment-group';

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

@@ -12,4 +12,5 @@ export { SegmentGroupRootProvider, type SegmentGroupRootProviderProps, type Segm
 export { useSegmentGroup, type UseSegmentGroupProps, type UseSegmentGroupReturn, } from './use-segment-group';
 export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
 export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { segmentGroupAnatomy } from './segment-group.anatomy';
 export * as SegmentGroup from './segment-group';

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

@@ -11,5 +11,6 @@ export { SegmentGroupRootProvider } from './segment-group-root-provider.js';
 export { useSegmentGroup } from './use-segment-group.js';
 export { useSegmentGroupContext } from './use-segment-group-context.js';
 export { useSegmentGroupItemContext } from './use-segment-group-item-context.js';
+export { segmentGroupAnatomy } from './segment-group.anatomy.js';
 import * as segmentGroup from './segment-group.js';
 export { segmentGroup as SegmentGroup };

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

@@ -4,10 +4,10 @@
 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 segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
 const SegmentGroupIndicator = react.forwardRef(
@@ -15,7 +15,7 @@ const SegmentGroupIndicator = react.forwardRef(
     const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       segmentGroup.getIndicatorProps(),
-      anatomy.segmentGroupAnatomy.build().indicator.attrs,
+      segmentGroup_anatomy.parts.indicator.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });