@ark-ui/react 3.4.0 → 3.6.0

package/README.md

@@ -31,6 +31,8 @@ Ark UI is available for the following JavaScript frameworks:
 - [Date Picker](https://ark-ui.com/react/docs/components/date-picker)
 - [Dialog](https://ark-ui.com/react/docs/components/dialog)
 - [Editable](https://ark-ui.com/react/docs/components/editable)
+- [Field](https://ark-ui.com/react/docs/components/field)
+- [Fieldset](https://ark-ui.com/react/docs/components/fieldset)
 - [File Upload](https://ark-ui.com/react/docs/components/file-upload)
 - [Hover Card](https://ark-ui.com/react/docs/components/hover-card)
 - [Menu](https://ark-ui.com/react/docs/components/menu)
@@ -51,6 +53,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Switch](https://ark-ui.com/react/docs/components/switch)
 - [Tabs](https://ark-ui.com/react/docs/components/tabs)
 - [Tags Input](https://ark-ui.com/react/docs/components/tags-input)
+- [Time Picker](https://ark-ui.com/react/docs/components/time-picker)
 - [Toast](https://ark-ui.com/react/docs/components/toast)
 - [Toggle Group](https://ark-ui.com/react/docs/components/toggle-group)
 - [Tooltip](https://ark-ui.com/react/docs/components/tooltip)

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.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/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';

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

@@ -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';

package/dist/components/collapsible/index.js

@@ -7,3 +7,4 @@ export { useCollapsible } from './use-collapsible.js';
 export { useCollapsibleContext } from './use-collapsible-context.js';
 import * as collapsible from './collapsible.js';
 export { collapsible as Collapsible };
+export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';

package/dist/components/color-picker/color-picker-value-text.cjs

@@ -4,15 +4,17 @@
 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 useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerValueText = react.forwardRef(
   (props, ref) => {
+    const { children, ...localprops } = props;
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...anatomy.colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || colorPicker.valueAsString });
+    const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
   }
 );
 ColorPickerValueText.displayName = "ColorPickerValueText";

package/dist/components/color-picker/color-picker-value-text.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerValueText = forwardRef(
   (props, ref) => {
+    const { children, ...localprops } = props;
     const colorPicker = useColorPickerContext();
-    return /* @__PURE__ */ jsx(ark.span, { ...colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || colorPicker.valueAsString });
+    const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
   }
 );
 ColorPickerValueText.displayName = "ColorPickerValueText";