@ark-ui/react 3.4.0-1 → 3.5.0

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

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

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

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

package/dist/components/accordion/index.cjs

@@ -13,7 +13,8 @@ const accordionRootProvider = require('./accordion-root-provider.cjs');
 const useAccordion = require('./use-accordion.cjs');
 const useAccordionContext = require('./use-accordion-context.cjs');
 const useAccordionItemContext = require('./use-accordion-item-context.cjs');
-const accordion = require('./accordion.cjs');
+const accordion$1 = require('./accordion.cjs');
+const accordion = require('@zag-js/accordion');
 
 
 
@@ -28,4 +29,8 @@ exports.AccordionRootProvider = accordionRootProvider.AccordionRootProvider;
 exports.useAccordion = useAccordion.useAccordion;
 exports.useAccordionContext = useAccordionContext.useAccordionContext;
 exports.useAccordionItemContext = useAccordionItemContext.useAccordionItemContext;
-exports.Accordion = accordion;
+exports.Accordion = accordion$1;
+Object.defineProperty(exports, "accordionAnatomy", {
+  enumerable: true,
+  get: () => accordion.anatomy
+});

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

@@ -1,13 +1,14 @@
 export type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails, } from '@zag-js/accordion';
 export { AccordionContext, type AccordionContextProps, } from './accordion-context';
-export { AccordionItem, type AccordionItemProps, type AccordionItemBaseProps, } from './accordion-item';
-export { AccordionItemContent, type AccordionItemContentProps, type AccordionItemContentBaseProps, } from './accordion-item-content';
+export { AccordionItem, type AccordionItemBaseProps, type AccordionItemProps, } from './accordion-item';
+export { AccordionItemContent, type AccordionItemContentBaseProps, type AccordionItemContentProps, } from './accordion-item-content';
 export { AccordionItemContext, type AccordionItemContextProps, } from './accordion-item-context';
-export { AccordionItemIndicator, type AccordionItemIndicatorProps, type AccordionItemIndicatorBaseProps, } from './accordion-item-indicator';
-export { AccordionItemTrigger, type AccordionItemTriggerProps, type AccordionItemTriggerBaseProps, } from './accordion-item-trigger';
-export { AccordionRoot, type AccordionRootProps, type AccordionRootBaseProps, } from './accordion-root';
-export { AccordionRootProvider, type AccordionRootProviderProps, type AccordionRootProviderBaseProps, } from './accordion-root-provider';
+export { AccordionItemIndicator, type AccordionItemIndicatorBaseProps, type AccordionItemIndicatorProps, } from './accordion-item-indicator';
+export { AccordionItemTrigger, type AccordionItemTriggerBaseProps, type AccordionItemTriggerProps, } from './accordion-item-trigger';
+export { AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps, } from './accordion-root';
+export { AccordionRootProvider, type AccordionRootProviderBaseProps, type AccordionRootProviderProps, } from './accordion-root-provider';
 export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion';
 export { useAccordionContext, type UseAccordionContext } from './use-accordion-context';
 export { useAccordionItemContext, type UseAccordionItemContext } from './use-accordion-item-context';
+export { accordionAnatomy } from './accordion.anatomy';
 export * as Accordion from './accordion';

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

@@ -1,13 +1,14 @@
 export type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails, } from '@zag-js/accordion';
 export { AccordionContext, type AccordionContextProps, } from './accordion-context';
-export { AccordionItem, type AccordionItemProps, type AccordionItemBaseProps, } from './accordion-item';
-export { AccordionItemContent, type AccordionItemContentProps, type AccordionItemContentBaseProps, } from './accordion-item-content';
+export { AccordionItem, type AccordionItemBaseProps, type AccordionItemProps, } from './accordion-item';
+export { AccordionItemContent, type AccordionItemContentBaseProps, type AccordionItemContentProps, } from './accordion-item-content';
 export { AccordionItemContext, type AccordionItemContextProps, } from './accordion-item-context';
-export { AccordionItemIndicator, type AccordionItemIndicatorProps, type AccordionItemIndicatorBaseProps, } from './accordion-item-indicator';
-export { AccordionItemTrigger, type AccordionItemTriggerProps, type AccordionItemTriggerBaseProps, } from './accordion-item-trigger';
-export { AccordionRoot, type AccordionRootProps, type AccordionRootBaseProps, } from './accordion-root';
-export { AccordionRootProvider, type AccordionRootProviderProps, type AccordionRootProviderBaseProps, } from './accordion-root-provider';
+export { AccordionItemIndicator, type AccordionItemIndicatorBaseProps, type AccordionItemIndicatorProps, } from './accordion-item-indicator';
+export { AccordionItemTrigger, type AccordionItemTriggerBaseProps, type AccordionItemTriggerProps, } from './accordion-item-trigger';
+export { AccordionRoot, type AccordionRootBaseProps, type AccordionRootProps, } from './accordion-root';
+export { AccordionRootProvider, type AccordionRootProviderBaseProps, type AccordionRootProviderProps, } from './accordion-root-provider';
 export { useAccordion, type UseAccordionProps, type UseAccordionReturn } from './use-accordion';
 export { useAccordionContext, type UseAccordionContext } from './use-accordion-context';
 export { useAccordionItemContext, type UseAccordionItemContext } from './use-accordion-item-context';
+export { accordionAnatomy } from './accordion.anatomy';
 export * as Accordion from './accordion';

package/dist/components/accordion/index.js

@@ -11,3 +11,4 @@ export { useAccordionContext } from './use-accordion-context.js';
 export { useAccordionItemContext } from './use-accordion-item-context.js';
 import * as accordion from './accordion.js';
 export { accordion as Accordion };
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

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

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

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

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

package/dist/components/avatar/index.cjs

@@ -9,7 +9,8 @@ const avatarRoot = require('./avatar-root.cjs');
 const avatarRootProvider = require('./avatar-root-provider.cjs');
 const useAvatar = require('./use-avatar.cjs');
 const useAvatarContext = require('./use-avatar-context.cjs');
-const avatar = require('./avatar.cjs');
+const avatar$1 = require('./avatar.cjs');
+const avatar = require('@zag-js/avatar');
 
 
 
@@ -20,4 +21,8 @@ exports.AvatarRoot = avatarRoot.AvatarRoot;
 exports.AvatarRootProvider = avatarRootProvider.AvatarRootProvider;
 exports.useAvatar = useAvatar.useAvatar;
 exports.useAvatarContext = useAvatarContext.useAvatarContext;
-exports.Avatar = avatar;
+exports.Avatar = avatar$1;
+Object.defineProperty(exports, "avatarAnatomy", {
+  enumerable: true,
+  get: () => avatar.anatomy
+});

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

@@ -6,4 +6,5 @@ export { AvatarRoot, type AvatarRootProps, type AvatarRootBaseProps, } from './a
 export { AvatarRootProvider, type AvatarRootProviderProps, type AvatarRootProviderBaseProps, } from './avatar-root-provider';
 export { useAvatar, type UseAvatarProps, type UseAvatarReturn } from './use-avatar';
 export { useAvatarContext, type UseAvatarContext } from './use-avatar-context';
+export { avatarAnatomy } from './avatar.anatomy';
 export * as Avatar from './avatar';

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

@@ -6,4 +6,5 @@ export { AvatarRoot, type AvatarRootProps, type AvatarRootBaseProps, } from './a
 export { AvatarRootProvider, type AvatarRootProviderProps, type AvatarRootProviderBaseProps, } from './avatar-root-provider';
 export { useAvatar, type UseAvatarProps, type UseAvatarReturn } from './use-avatar';
 export { useAvatarContext, type UseAvatarContext } from './use-avatar-context';
+export { avatarAnatomy } from './avatar.anatomy';
 export * as Avatar from './avatar';

package/dist/components/avatar/index.js

@@ -7,3 +7,4 @@ export { useAvatar } from './use-avatar.js';
 export { useAvatarContext } from './use-avatar-context.js';
 import * as avatar from './avatar.js';
 export { avatar as Avatar };
+export { anatomy as avatarAnatomy } from '@zag-js/avatar';

package/dist/components/carousel/carousel-control.cjs

@@ -4,11 +4,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
 const factory = require('../factory.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
 
-const CarouselControl = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...anatomy.carouselAnatomy.build().control.attrs, ...props, ref }));
+const CarouselControl = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...carousel_anatomy.carouselAnatomy.build().control.attrs, ...props, ref }));
 CarouselControl.displayName = "CarouselControl";
 
 exports.CarouselControl = CarouselControl;

package/dist/components/carousel/carousel-control.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { carouselAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { carouselAnatomy } from './carousel.anatomy.js';
 
 const CarouselControl = forwardRef((props, ref) => /* @__PURE__ */ jsx(ark.div, { ...carouselAnatomy.build().control.attrs, ...props, ref }));
 CarouselControl.displayName = "CarouselControl";

package/dist/components/carousel/carousel.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const carousel = require('@zag-js/carousel');
+
+const carouselAnatomy = carousel.anatomy.extendWith("control");
+
+exports.carouselAnatomy = carouselAnatomy;

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

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const carouselAnatomy: AnatomyInstance<"root" | "viewport" | "itemGroup" | "item" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "control">;

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

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const carouselAnatomy: AnatomyInstance<"root" | "viewport" | "itemGroup" | "item" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "control">;

package/dist/components/carousel/carousel.anatomy.js

@@ -0,0 +1,6 @@
+'use client';
+import { anatomy } from '@zag-js/carousel';
+
+const carouselAnatomy = anatomy.extendWith("control");
+
+export { carouselAnatomy };

package/dist/components/carousel/index.cjs

@@ -15,6 +15,7 @@ const carouselRootProvider = require('./carousel-root-provider.cjs');
 const carouselViewport = require('./carousel-viewport.cjs');
 const useCarousel = require('./use-carousel.cjs');
 const useCarouselContext = require('./use-carousel-context.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
 const carousel = require('./carousel.cjs');
 
 
@@ -32,4 +33,5 @@ exports.CarouselRootProvider = carouselRootProvider.CarouselRootProvider;
 exports.CarouselViewport = carouselViewport.CarouselViewport;
 exports.useCarousel = useCarousel.useCarousel;
 exports.useCarouselContext = useCarouselContext.useCarouselContext;
+exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.Carousel = carousel;

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

@@ -12,4 +12,5 @@ export { CarouselRootProvider, type CarouselRootProviderProps, type CarouselRoot
 export { CarouselViewport, type CarouselViewportProps, type CarouselViewportBaseProps, } from './carousel-viewport';
 export { useCarousel, type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
 export { useCarouselContext, type UseCarouselContext } from './use-carousel-context';
+export { carouselAnatomy } from './carousel.anatomy';
 export * as Carousel from './carousel';

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

@@ -12,4 +12,5 @@ export { CarouselRootProvider, type CarouselRootProviderProps, type CarouselRoot
 export { CarouselViewport, type CarouselViewportProps, type CarouselViewportBaseProps, } from './carousel-viewport';
 export { useCarousel, type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
 export { useCarouselContext, type UseCarouselContext } from './use-carousel-context';
+export { carouselAnatomy } from './carousel.anatomy';
 export * as Carousel from './carousel';

package/dist/components/carousel/index.js

@@ -11,5 +11,6 @@ export { CarouselRootProvider } from './carousel-root-provider.js';
 export { CarouselViewport } from './carousel-viewport.js';
 export { useCarousel } from './use-carousel.js';
 export { useCarouselContext } from './use-carousel-context.js';
+export { carouselAnatomy } from './carousel.anatomy.js';
 import * as carousel from './carousel.js';
 export { carousel as Carousel };

package/dist/components/checkbox/checkbox-group.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 = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
+const checkbox_anatomy = require('./checkbox.anatomy.cjs');
 const useCheckboxGroup = require('./use-checkbox-group.cjs');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
@@ -17,10 +17,11 @@ const CheckboxGroup = react.forwardRef((props, ref) => {
     "value",
     "onValueChange",
     "disabled",
-    "readOnly"
+    "readOnly",
+    "name"
   ]);
   const checkboxGroup = useCheckboxGroup.useCheckboxGroup(checkboxGroupProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxGroupContext.CheckboxGroupContextProvider, { value: checkboxGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, role: "group", ...localProps, ...anatomy.checkboxAnatomy.build().group.attrs }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxGroupContext.CheckboxGroupContextProvider, { value: checkboxGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, role: "group", ...localProps, ...checkbox_anatomy.checkboxAnatomy.build().group.attrs }) });
 });
 CheckboxGroup.displayName = "CheckboxGroup";
 

package/dist/components/checkbox/checkbox-group.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { checkboxAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
+import { checkboxAnatomy } from './checkbox.anatomy.js';
 import { useCheckboxGroup } from './use-checkbox-group.js';
 import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
 
@@ -13,7 +13,8 @@ const CheckboxGroup = forwardRef((props, ref) => {
     "value",
     "onValueChange",
     "disabled",
-    "readOnly"
+    "readOnly",
+    "name"
   ]);
   const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
   return /* @__PURE__ */ jsx(CheckboxGroupContextProvider, { value: checkboxGroup, children: /* @__PURE__ */ jsx(ark.div, { ref, role: "group", ...localProps, ...checkboxAnatomy.build().group.attrs }) });

package/dist/components/checkbox/checkbox-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 useCheckboxContext = require('./use-checkbox-context.cjs');
 
 const CheckboxHiddenInput = react.forwardRef(
   (props, ref) => {
     const checkbox = useCheckboxContext.useCheckboxContext();
     const mergedProps = react$1.mergeProps(checkbox.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 });
   }
 );
 CheckboxHiddenInput.displayName = "CheckboxHiddenInput";

package/dist/components/checkbox/checkbox-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 { useCheckboxContext } from './use-checkbox-context.js';
 
 const CheckboxHiddenInput = forwardRef(
   (props, ref) => {
     const checkbox = useCheckboxContext();
     const mergedProps = mergeProps(checkbox.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 CheckboxHiddenInput.displayName = "CheckboxHiddenInput";

package/dist/components/checkbox/checkbox.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const checkbox = require('@zag-js/checkbox');
+
+const checkboxAnatomy = checkbox.anatomy.extendWith("group");
+
+exports.checkboxAnatomy = checkboxAnatomy;

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

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const checkboxAnatomy: AnatomyInstance<"label" | "group" | "root" | "indicator" | "control">;

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

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const checkboxAnatomy: AnatomyInstance<"label" | "group" | "root" | "indicator" | "control">;

package/dist/components/checkbox/checkbox.anatomy.js

@@ -0,0 +1,6 @@
+'use client';
+import { anatomy } from '@zag-js/checkbox';
+
+const checkboxAnatomy = anatomy.extendWith("group");
+
+export { checkboxAnatomy };

package/dist/components/checkbox/index.cjs

@@ -14,6 +14,7 @@ const useCheckbox = require('./use-checkbox.cjs');
 const useCheckboxContext = require('./use-checkbox-context.cjs');
 const useCheckboxGroup = require('./use-checkbox-group.cjs');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
+const checkbox_anatomy = require('./checkbox.anatomy.cjs');
 const checkbox = require('./checkbox.cjs');
 
 
@@ -30,4 +31,5 @@ exports.useCheckbox = useCheckbox.useCheckbox;
 exports.useCheckboxContext = useCheckboxContext.useCheckboxContext;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useCheckboxGroupContext = useCheckboxGroupContext.useCheckboxGroupContext;
+exports.checkboxAnatomy = checkbox_anatomy.checkboxAnatomy;
 exports.Checkbox = checkbox;

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

@@ -11,4 +11,5 @@ export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './us
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
 export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
 export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
+export { checkboxAnatomy } from './checkbox.anatomy';
 export * as Checkbox from './checkbox';

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

@@ -11,4 +11,5 @@ export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './us
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
 export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
 export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
+export { checkboxAnatomy } from './checkbox.anatomy';
 export * as Checkbox from './checkbox';

package/dist/components/checkbox/index.js

@@ -10,5 +10,6 @@ export { useCheckbox } from './use-checkbox.js';
 export { useCheckboxContext } from './use-checkbox-context.js';
 export { useCheckboxGroup } from './use-checkbox-group.js';
 export { useCheckboxGroupContext } from './use-checkbox-group-context.js';
+export { checkboxAnatomy } from './checkbox.anatomy.js';
 import * as checkbox from './checkbox.js';
 export { checkbox as Checkbox };

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

@@ -7,7 +7,7 @@ const useControllableState = require('../../utils/use-controllable-state.cjs');
 const useEvent = require('../../utils/use-event.cjs');
 
 function useCheckboxGroup(props = {}) {
-  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly } = props;
+  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly, name } = props;
   const interative = !(disabled || readOnly);
   const onChangeProp = useEvent.useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState.useControllableState({
@@ -38,6 +38,7 @@ function useCheckboxGroup(props = {}) {
           toggleValue(props2.value);
         }
       },
+      name,
       disabled,
       readOnly
     };
@@ -45,6 +46,7 @@ function useCheckboxGroup(props = {}) {
   return {
     isChecked,
     value,
+    name,
     disabled,
     readOnly,
     setValue,

package/dist/components/checkbox/use-checkbox-group.d.cts

@@ -7,6 +7,11 @@ export interface UseCheckboxGroupProps {
      * The controlled value of the checkbox group
      */
     value?: string[];
+    /**
+     * The name of the input fields in the checkbox group
+     * (Useful for form submission).
+     */
+    name?: string;
     /**
      * The callback to call when the value changes
      */
@@ -26,6 +31,7 @@ export interface CheckboxGroupItemProps {
 export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
     isChecked: (val: string | undefined) => boolean;
     value: string[];
+    name: string | undefined;
     disabled: boolean | undefined;
     readOnly: boolean | undefined;
     setValue: (value: string[]) => void | undefined;
@@ -34,6 +40,7 @@ export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
     getItemProps: (props: CheckboxGroupItemProps) => {
         checked: boolean | undefined;
         onCheckedChange(): void;
+        name: string | undefined;
         disabled: boolean | undefined;
         readOnly: boolean | undefined;
     };

package/dist/components/checkbox/use-checkbox-group.d.ts

@@ -7,6 +7,11 @@ export interface UseCheckboxGroupProps {
      * The controlled value of the checkbox group
      */
     value?: string[];
+    /**
+     * The name of the input fields in the checkbox group
+     * (Useful for form submission).
+     */
+    name?: string;
     /**
      * The callback to call when the value changes
      */
@@ -26,6 +31,7 @@ export interface CheckboxGroupItemProps {
 export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
     isChecked: (val: string | undefined) => boolean;
     value: string[];
+    name: string | undefined;
     disabled: boolean | undefined;
     readOnly: boolean | undefined;
     setValue: (value: string[]) => void | undefined;
@@ -34,6 +40,7 @@ export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
     getItemProps: (props: CheckboxGroupItemProps) => {
         checked: boolean | undefined;
         onCheckedChange(): void;
+        name: string | undefined;
         disabled: boolean | undefined;
         readOnly: boolean | undefined;
     };

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

@@ -3,7 +3,7 @@ import { useControllableState } from '../../utils/use-controllable-state.js';
 import { useEvent } from '../../utils/use-event.js';
 
 function useCheckboxGroup(props = {}) {
-  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly } = props;
+  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly, name } = props;
   const interative = !(disabled || readOnly);
   const onChangeProp = useEvent(onValueChange, { sync: true });
   const [value, setValue] = useControllableState({
@@ -34,6 +34,7 @@ function useCheckboxGroup(props = {}) {
           toggleValue(props2.value);
         }
       },
+      name,
       disabled,
       readOnly
     };
@@ -41,6 +42,7 @@ function useCheckboxGroup(props = {}) {
   return {
     isChecked,
     value,
+    name,
     disabled,
     readOnly,
     setValue,

package/dist/components/checkbox/use-checkbox.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');
 const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -32,6 +33,7 @@ const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 
 const useCheckbox = (ownProps = {}) => {
   const checkboxGroup = useCheckboxGroupContext.useCheckboxGroupContext();
+  const field = useFieldContext.useFieldContext();
   const props = react.useMemo(() => {
     return react$1.mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
@@ -39,7 +41,15 @@ const useCheckbox = (ownProps = {}) => {
   const { dir } = useLocaleContext.useLocaleContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     getRootNode,
     checked: props.defaultChecked,
     ...props

package/dist/components/checkbox/use-checkbox.js

@@ -5,10 +5,12 @@ import { useMemo, 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';
 import { useCheckboxGroupContext } from './use-checkbox-group-context.js';
 
 const useCheckbox = (ownProps = {}) => {
   const checkboxGroup = useCheckboxGroupContext();
+  const field = useFieldContext();
   const props = useMemo(() => {
     return mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
   }, [ownProps, checkboxGroup]);
@@ -16,7 +18,15 @@ const useCheckbox = (ownProps = {}) => {
   const { dir } = useLocaleContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     getRootNode,
     checked: props.defaultChecked,
     ...props

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

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

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

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

package/dist/components/clipboard/index.cjs

@@ -12,7 +12,8 @@ const clipboardRootProvider = require('./clipboard-root-provider.cjs');
 const clipboardTrigger = require('./clipboard-trigger.cjs');
 const useClipboard = require('./use-clipboard.cjs');
 const useClipboardContext = require('./use-clipboard-context.cjs');
-const clipboard = require('./clipboard.cjs');
+const clipboard$1 = require('./clipboard.cjs');
+const clipboard = require('@zag-js/clipboard');
 
 
 
@@ -26,4 +27,8 @@ exports.ClipboardRootProvider = clipboardRootProvider.ClipboardRootProvider;
 exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
 exports.useClipboard = useClipboard.useClipboard;
 exports.useClipboardContext = useClipboardContext.useClipboardContext;
-exports.Clipboard = clipboard;
+exports.Clipboard = clipboard$1;
+Object.defineProperty(exports, "clipboardAnatomy", {
+  enumerable: true,
+  get: () => clipboard.anatomy
+});

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

@@ -9,4 +9,5 @@ export { ClipboardRootProvider, type ClipboardRootProviderProps, type ClipboardR
 export { ClipboardTrigger, type ClipboardTriggerProps, type ClipboardTriggerBaseProps, } from './clipboard-trigger';
 export { useClipboard, type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
 export { useClipboardContext, type UseClipboardContext } from './use-clipboard-context';
+export { clipboardAnatomy } from './clipboard.anatomy';
 export * as Clipboard from './clipboard';

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

@@ -9,4 +9,5 @@ export { ClipboardRootProvider, type ClipboardRootProviderProps, type ClipboardR
 export { ClipboardTrigger, type ClipboardTriggerProps, type ClipboardTriggerBaseProps, } from './clipboard-trigger';
 export { useClipboard, type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
 export { useClipboardContext, type UseClipboardContext } from './use-clipboard-context';
+export { clipboardAnatomy } from './clipboard.anatomy';
 export * as Clipboard from './clipboard';

package/dist/components/clipboard/index.js

@@ -10,3 +10,4 @@ export { useClipboard } from './use-clipboard.js';
 export { useClipboardContext } from './use-clipboard-context.js';
 import * as clipboard from './clipboard.js';
 export { clipboard as Clipboard };
+export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';

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

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

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

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

package/dist/components/collapsible/index.cjs

@@ -9,7 +9,8 @@ const collapsibleRootProvider = require('./collapsible-root-provider.cjs');
 const collapsibleTrigger = require('./collapsible-trigger.cjs');
 const useCollapsible = require('./use-collapsible.cjs');
 const useCollapsibleContext = require('./use-collapsible-context.cjs');
-const collapsible = require('./collapsible.cjs');
+const collapsible$1 = require('./collapsible.cjs');
+const collapsible = require('@zag-js/collapsible');
 
 
 
@@ -20,4 +21,8 @@ exports.CollapsibleRootProvider = collapsibleRootProvider.CollapsibleRootProvide
 exports.CollapsibleTrigger = collapsibleTrigger.CollapsibleTrigger;
 exports.useCollapsible = useCollapsible.useCollapsible;
 exports.useCollapsibleContext = useCollapsibleContext.useCollapsibleContext;
-exports.Collapsible = collapsible;
+exports.Collapsible = collapsible$1;
+Object.defineProperty(exports, "collapsibleAnatomy", {
+  enumerable: true,
+  get: () => collapsible.anatomy
+});

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

@@ -6,4 +6,5 @@ export { CollapsibleRootProvider, type CollapsibleRootProviderProps, type Collap
 export { CollapsibleTrigger, type CollapsibleTriggerProps, type CollapsibleTriggerBaseProps, } from './collapsible-trigger';
 export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn, } from './use-collapsible';
 export { useCollapsibleContext, type UseCollapsibleContext } from './use-collapsible-context';
+export { collapsibleAnatomy } from './collapsible.anatomy';
 export * as Collapsible from './collapsible';