@ark-ui/react 1.3.0 → 2.0.1

package/avatar/index.d.ts

@@ -1,14 +1,8 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar';
-import { type AvatarProps } from './avatar';
 import { useAvatarContext, type AvatarContext } from './avatar-context';
 import { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 import { AvatarImage, type AvatarImageProps } from './avatar-image';
-declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLDivElement>>;
-    Fallback: ForwardRefExoticComponent<AvatarFallbackProps & RefAttributes<HTMLSpanElement>>;
-    Image: ForwardRefExoticComponent<AvatarImageProps & RefAttributes<HTMLImageElement>>;
-};
-export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
-export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps, AvatarStatusChangeDetails, };
+import { AvatarRoot, type AvatarRootProps } from './avatar-root';
+export * as Avatar from './avatar';
+export { AvatarFallback, AvatarImage, AvatarRoot, useAvatarContext };
+export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarRootProps, AvatarStatusChangeDetails, };

package/avatar/index.mjs

@@ -1,13 +1,6 @@
-'use client';
-import { Avatar as Avatar$1 } from './avatar.mjs';
 export { useAvatarContext } from './avatar-context.mjs';
-import { AvatarFallback } from './avatar-fallback.mjs';
-import { AvatarImage } from './avatar-image.mjs';
-
-const Avatar = Object.assign(Avatar$1, {
-  Root: Avatar$1,
-  Fallback: AvatarFallback,
-  Image: AvatarImage
-});
-
-export { Avatar, AvatarFallback, AvatarImage };
+export { AvatarFallback } from './avatar-fallback.mjs';
+export { AvatarImage } from './avatar-image.mjs';
+export { AvatarRoot } from './avatar-root.mjs';
+import * as avatar from './avatar.mjs';
+export { avatar as Avatar };

package/avatar/use-avatar.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const avatar = require('@zag-js/avatar');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/avatar/use-avatar.mjs

@@ -2,9 +2,8 @@
 import * as avatar from '@zag-js/avatar';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useAvatar = (props = {}) => {
   const initialContext = {

package/carousel/carousel-root.cjs

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const carouselContext = require('./carousel-context.cjs');
+const useCarousel = require('./use-carousel.cjs');
+
+const CarouselRoot = react.forwardRef((props, ref) => {
+  const [useCarouselProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "align",
+      "defaultIndex",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "index",
+      "loop",
+      "onIndexChange",
+      "orientation",
+      "slidesPerView",
+      "spacing"
+    ]
+  );
+  const api = useCarousel.useCarousel(useCarouselProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(carouselContext.CarouselProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+CarouselRoot.displayName = "CarouselRoot";
+
+exports.CarouselRoot = CarouselRoot;

package/carousel/carousel-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
+export interface CarouselRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseCarouselReturn) => ReactNode);
+}>, UseCarouselProps> {
+}
+export declare const CarouselRoot: ForwardRefExoticComponent<CarouselRootProps & RefAttributes<HTMLDivElement>>;

package/carousel/carousel-root.mjs

@@ -0,0 +1,36 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { CarouselProvider } from './carousel-context.mjs';
+import { useCarousel } from './use-carousel.mjs';
+
+const CarouselRoot = forwardRef((props, ref) => {
+  const [useCarouselProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    [
+      "align",
+      "defaultIndex",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "index",
+      "loop",
+      "onIndexChange",
+      "orientation",
+      "slidesPerView",
+      "spacing"
+    ]
+  );
+  const api = useCarousel(useCarouselProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(CarouselProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+CarouselRoot.displayName = "CarouselRoot";
+
+export { CarouselRoot };

package/carousel/carousel.cjs

@@ -1,40 +1,25 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const carouselContext = require('./carousel-context.cjs');
-const useCarousel = require('./use-carousel.cjs');
+const carouselControl = require('./carousel-control.cjs');
+const carouselIndicator = require('./carousel-indicator.cjs');
+const carouselIndicatorGroup = require('./carousel-indicator-group.cjs');
+const carouselItem = require('./carousel-item.cjs');
+const carouselItemGroup = require('./carousel-item-group.cjs');
+const carouselNextTrigger = require('./carousel-next-trigger.cjs');
+const carouselPrevTrigger = require('./carousel-prev-trigger.cjs');
+const carouselRoot = require('./carousel-root.cjs');
+const carouselViewport = require('./carousel-viewport.cjs');
 
-const Carousel = react.forwardRef((props, ref) => {
-  const [useCarouselProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "align",
-      "defaultIndex",
-      "dir",
-      "getRootNode",
-      "id",
-      "ids",
-      "index",
-      "loop",
-      "onIndexChange",
-      "orientation",
-      "slidesPerView",
-      "spacing"
-    ]
-  );
-  const api = useCarousel.useCarousel(useCarouselProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(carouselContext.CarouselProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
-});
-Carousel.displayName = "Carousel";
 
-exports.Carousel = Carousel;
+
+exports.Control = carouselControl.CarouselControl;
+exports.Indicator = carouselIndicator.CarouselIndicator;
+exports.IndicatorGroup = carouselIndicatorGroup.CarouselIndicatorGroup;
+exports.Item = carouselItem.CarouselItem;
+exports.ItemGroup = carouselItemGroup.CarouselItemGroup;
+exports.NextTrigger = carouselNextTrigger.CarouselNextTrigger;
+exports.PrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
+exports.Root = carouselRoot.CarouselRoot;
+exports.Viewport = carouselViewport.CarouselViewport;

package/carousel/carousel.d.ts

@@ -1,9 +1,10 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
-export interface CarouselProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseCarouselReturn) => ReactNode);
-}>, UseCarouselProps> {
-}
-export declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>>;
+import { CarouselControl as Control } from './carousel-control';
+import { CarouselIndicator as Indicator } from './carousel-indicator';
+import { CarouselIndicatorGroup as IndicatorGroup } from './carousel-indicator-group';
+import { CarouselItem as Item } from './carousel-item';
+import { CarouselItemGroup as ItemGroup } from './carousel-item-group';
+import { CarouselNextTrigger as NextTrigger } from './carousel-next-trigger';
+import { CarouselPrevTrigger as PrevTrigger } from './carousel-prev-trigger';
+import { CarouselRoot as Root } from './carousel-root';
+import { CarouselViewport as Viewport } from './carousel-viewport';
+export { Control, Indicator, IndicatorGroup, Item, ItemGroup, NextTrigger, PrevTrigger, Root, Viewport, };

package/carousel/carousel.mjs

@@ -1,36 +1,9 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { CarouselProvider } from './carousel-context.mjs';
-import { useCarousel } from './use-carousel.mjs';
-
-const Carousel = forwardRef((props, ref) => {
-  const [useCarouselProps, { children, ...divProps }] = createSplitProps()(
-    props,
-    [
-      "align",
-      "defaultIndex",
-      "dir",
-      "getRootNode",
-      "id",
-      "ids",
-      "index",
-      "loop",
-      "onIndexChange",
-      "orientation",
-      "slidesPerView",
-      "spacing"
-    ]
-  );
-  const api = useCarousel(useCarouselProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(CarouselProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
-});
-Carousel.displayName = "Carousel";
-
-export { Carousel };
+export { CarouselControl as Control } from './carousel-control.mjs';
+export { CarouselIndicator as Indicator } from './carousel-indicator.mjs';
+export { CarouselIndicatorGroup as IndicatorGroup } from './carousel-indicator-group.mjs';
+export { CarouselItem as Item } from './carousel-item.mjs';
+export { CarouselItemGroup as ItemGroup } from './carousel-item-group.mjs';
+export { CarouselNextTrigger as NextTrigger } from './carousel-next-trigger.mjs';
+export { CarouselPrevTrigger as PrevTrigger } from './carousel-prev-trigger.mjs';
+export { CarouselRoot as Root } from './carousel-root.mjs';
+export { CarouselViewport as Viewport } from './carousel-viewport.mjs';

package/carousel/index.cjs

@@ -1,9 +1,7 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const carousel = require('./carousel.cjs');
 const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
 const carouselIndicator = require('./carousel-indicator.cjs');
@@ -12,19 +10,11 @@ const carouselItem = require('./carousel-item.cjs');
 const carouselItemGroup = require('./carousel-item-group.cjs');
 const carouselNextTrigger = require('./carousel-next-trigger.cjs');
 const carouselPrevTrigger = require('./carousel-prev-trigger.cjs');
+const carouselRoot = require('./carousel-root.cjs');
 const carouselViewport = require('./carousel-viewport.cjs');
+const carousel = require('./carousel.cjs');
+
 
-const Carousel = Object.assign(carousel.Carousel, {
-  Root: carousel.Carousel,
-  Control: carouselControl.CarouselControl,
-  Indicator: carouselIndicator.CarouselIndicator,
-  IndicatorGroup: carouselIndicatorGroup.CarouselIndicatorGroup,
-  NextTrigger: carouselNextTrigger.CarouselNextTrigger,
-  PrevTrigger: carouselPrevTrigger.CarouselPrevTrigger,
-  Item: carouselItem.CarouselItem,
-  ItemGroup: carouselItemGroup.CarouselItemGroup,
-  Viewport: carouselViewport.CarouselViewport
-});
 
 exports.useCarouselContext = carouselContext.useCarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
@@ -34,5 +24,6 @@ exports.CarouselItem = carouselItem.CarouselItem;
 exports.CarouselItemGroup = carouselItemGroup.CarouselItemGroup;
 exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
 exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
+exports.CarouselRoot = carouselRoot.CarouselRoot;
 exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.Carousel = Carousel;
+exports.Carousel = carousel;

package/carousel/index.d.ts

@@ -1,7 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { SlideChangeDetails as CarouselSlideChangeDetails } from '@zag-js/carousel';
-import { type CarouselProps } from './carousel';
 import { useCarouselContext, type CarouselContext } from './carousel-context';
 import { CarouselControl, type CarouselControlProps } from './carousel-control';
 import { CarouselIndicator, type CarouselIndicatorProps } from './carousel-indicator';
@@ -10,17 +7,8 @@ import { CarouselItem, type CarouselItemProps } from './carousel-item';
 import { CarouselItemGroup, type CarouselItemGroupProps } from './carousel-item-group';
 import { CarouselNextTrigger, type CarouselNextTriggerProps } from './carousel-next-trigger';
 import { CarouselPrevTrigger, type CarouselPrevTriggerProps } from './carousel-prev-trigger';
+import { CarouselRoot, type CarouselRootProps } from './carousel-root';
 import { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
-declare const Carousel: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLDivElement>>;
-    Indicator: ForwardRefExoticComponent<CarouselIndicatorProps & RefAttributes<HTMLButtonElement>>;
-    IndicatorGroup: ForwardRefExoticComponent<CarouselIndicatorGroupProps & RefAttributes<HTMLDivElement>>;
-    NextTrigger: ForwardRefExoticComponent<CarouselNextTriggerProps & RefAttributes<HTMLButtonElement>>;
-    PrevTrigger: ForwardRefExoticComponent<CarouselPrevTriggerProps & RefAttributes<HTMLButtonElement>>;
-    Item: ForwardRefExoticComponent<CarouselItemProps & RefAttributes<HTMLDivElement>>;
-    ItemGroup: ForwardRefExoticComponent<CarouselItemGroupProps & RefAttributes<HTMLDivElement>>;
-    Viewport: ForwardRefExoticComponent<CarouselViewportProps & RefAttributes<HTMLDivElement>>;
-};
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
-export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselProps, CarouselSlideChangeDetails, CarouselViewportProps, };
+export * as Carousel from './carousel';
+export { CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, useCarouselContext, };
+export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselRootProps, CarouselSlideChangeDetails, CarouselViewportProps, };

package/carousel/index.mjs

@@ -1,25 +1,12 @@
-'use client';
-import { Carousel as Carousel$1 } from './carousel.mjs';
 export { useCarouselContext } from './carousel-context.mjs';
-import { CarouselControl } from './carousel-control.mjs';
-import { CarouselIndicator } from './carousel-indicator.mjs';
-import { CarouselIndicatorGroup } from './carousel-indicator-group.mjs';
-import { CarouselItem } from './carousel-item.mjs';
-import { CarouselItemGroup } from './carousel-item-group.mjs';
-import { CarouselNextTrigger } from './carousel-next-trigger.mjs';
-import { CarouselPrevTrigger } from './carousel-prev-trigger.mjs';
-import { CarouselViewport } from './carousel-viewport.mjs';
-
-const Carousel = Object.assign(Carousel$1, {
-  Root: Carousel$1,
-  Control: CarouselControl,
-  Indicator: CarouselIndicator,
-  IndicatorGroup: CarouselIndicatorGroup,
-  NextTrigger: CarouselNextTrigger,
-  PrevTrigger: CarouselPrevTrigger,
-  Item: CarouselItem,
-  ItemGroup: CarouselItemGroup,
-  Viewport: CarouselViewport
-});
-
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport };
+export { CarouselControl } from './carousel-control.mjs';
+export { CarouselIndicator } from './carousel-indicator.mjs';
+export { CarouselIndicatorGroup } from './carousel-indicator-group.mjs';
+export { CarouselItem } from './carousel-item.mjs';
+export { CarouselItemGroup } from './carousel-item-group.mjs';
+export { CarouselNextTrigger } from './carousel-next-trigger.mjs';
+export { CarouselPrevTrigger } from './carousel-prev-trigger.mjs';
+export { CarouselRoot } from './carousel-root.mjs';
+export { CarouselViewport } from './carousel-viewport.mjs';
+import * as carousel from './carousel.mjs';
+export { carousel as Carousel };

package/carousel/use-carousel.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const carousel = require('@zag-js/carousel');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/carousel/use-carousel.mjs

@@ -2,9 +2,8 @@
 import * as carousel from '@zag-js/carousel';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useCarousel = (props = {}) => {
   const initialContext = {

package/checkbox/checkbox-root.cjs

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const checkboxContext = require('./checkbox-context.cjs');
+const useCheckbox = require('./use-checkbox.cjs');
+
+const CheckboxRoot = react.forwardRef((props, ref) => {
+  const [useCheckboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "checked",
+      "defaultChecked",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "id",
+      "ids",
+      "invalid",
+      "name",
+      "onCheckedChange",
+      "required",
+      "value"
+    ]
+  );
+  const api = useCheckbox.useCheckbox(useCheckboxProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+
+exports.CheckboxRoot = CheckboxRoot;

package/checkbox/checkbox-root.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
+export interface CheckboxRootProps extends Assign<Assign<HTMLArkProps<'label'>, {
+    children?: ReactNode | ((api: UseCheckboxReturn) => ReactNode);
+}>, UseCheckboxProps> {
+}
+export declare const CheckboxRoot: ForwardRefExoticComponent<CheckboxRootProps & RefAttributes<HTMLLabelElement>>;

package/checkbox/checkbox-root.mjs

@@ -0,0 +1,37 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { CheckboxProvider } from './checkbox-context.mjs';
+import { useCheckbox } from './use-checkbox.mjs';
+
+const CheckboxRoot = forwardRef((props, ref) => {
+  const [useCheckboxProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    [
+      "checked",
+      "defaultChecked",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "id",
+      "ids",
+      "invalid",
+      "name",
+      "onCheckedChange",
+      "required",
+      "value"
+    ]
+  );
+  const api = useCheckbox(useCheckboxProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(CheckboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+
+export { CheckboxRoot };

package/checkbox/checkbox.cjs

@@ -1,41 +1,15 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const jsxRuntime = require('react/jsx-runtime');
-const react$1 = require('@zag-js/react');
-const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const checkboxContext = require('./checkbox-context.cjs');
-const useCheckbox = require('./use-checkbox.cjs');
+const checkboxControl = require('./checkbox-control.cjs');
+const checkboxIndicator = require('./checkbox-indicator.cjs');
+const checkboxLabel = require('./checkbox-label.cjs');
+const checkboxRoot = require('./checkbox-root.cjs');
 
-const Checkbox = react.forwardRef((props, ref) => {
-  const [useCheckboxProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "checked",
-      "defaultChecked",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "id",
-      "ids",
-      "invalid",
-      "name",
-      "onCheckedChange",
-      "required",
-      "value"
-    ]
-  );
-  const api = useCheckbox.useCheckbox(useCheckboxProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
-});
-Checkbox.displayName = "Checkbox";
 
-exports.Checkbox = Checkbox;
+
+exports.Control = checkboxControl.CheckboxControl;
+exports.Indicator = checkboxIndicator.CheckboxIndicator;
+exports.Label = checkboxLabel.CheckboxLabel;
+exports.Root = checkboxRoot.CheckboxRoot;

package/checkbox/checkbox.d.ts

@@ -1,9 +1,5 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
-export interface CheckboxProps extends Assign<Assign<HTMLArkProps<'label'>, {
-    children?: ReactNode | ((api: UseCheckboxReturn) => ReactNode);
-}>, UseCheckboxProps> {
-}
-export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;
+import { CheckboxControl as Control } from './checkbox-control';
+import { CheckboxIndicator as Indicator } from './checkbox-indicator';
+import { CheckboxLabel as Label } from './checkbox-label';
+import { CheckboxRoot as Root } from './checkbox-root';
+export { Control, Indicator, Label, Root };

package/checkbox/checkbox.mjs

@@ -1,37 +1,4 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { CheckboxProvider } from './checkbox-context.mjs';
-import { useCheckbox } from './use-checkbox.mjs';
-
-const Checkbox = forwardRef((props, ref) => {
-  const [useCheckboxProps, { children, ...localProps }] = createSplitProps()(
-    props,
-    [
-      "checked",
-      "defaultChecked",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "id",
-      "ids",
-      "invalid",
-      "name",
-      "onCheckedChange",
-      "required",
-      "value"
-    ]
-  );
-  const api = useCheckbox(useCheckboxProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(CheckboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
-});
-Checkbox.displayName = "Checkbox";
-
-export { Checkbox };
+export { CheckboxControl as Control } from './checkbox-control.mjs';
+export { CheckboxIndicator as Indicator } from './checkbox-indicator.mjs';
+export { CheckboxLabel as Label } from './checkbox-label.mjs';
+export { CheckboxRoot as Root } from './checkbox-root.mjs';