@ark-ui/react 0.15.0 → 1.0.0-beta.0

package/carousel/index.cjs

@@ -8,22 +8,21 @@ const carouselContext = require('./carousel-context.cjs');
 const carouselControl = require('./carousel-control.cjs');
 const carouselIndicator = require('./carousel-indicator.cjs');
 const carouselIndicatorGroup = require('./carousel-indicator-group.cjs');
-const carouselNextSlideTrigger = require('./carousel-next-slide-trigger.cjs');
-const carouselPrevSlideTrigger = require('./carousel-prev-slide-trigger.cjs');
-const carouselSlide = require('./carousel-slide.cjs');
-const carouselSlideGroup = require('./carousel-slide-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 carouselViewport = require('./carousel-viewport.cjs');
-const carousel_anatomy = require('./carousel.anatomy.cjs');
 
 const Carousel = Object.assign(carousel.Carousel, {
   Root: carousel.Carousel,
   Control: carouselControl.CarouselControl,
   Indicator: carouselIndicator.CarouselIndicator,
   IndicatorGroup: carouselIndicatorGroup.CarouselIndicatorGroup,
-  NextSlideTrigger: carouselNextSlideTrigger.CarouselNextSlideTrigger,
-  PrevSlideTrigger: carouselPrevSlideTrigger.CarouselPrevSlideTrigger,
-  Slide: carouselSlide.CarouselSlide,
-  SlideGroup: carouselSlideGroup.CarouselSlideGroup,
+  NextTrigger: carouselNextTrigger.CarouselNextTrigger,
+  PrevTrigger: carouselPrevTrigger.CarouselPrevTrigger,
+  Item: carouselItem.CarouselItem,
+  ItemGroup: carouselItemGroup.CarouselItemGroup,
   Viewport: carouselViewport.CarouselViewport
 });
 
@@ -31,10 +30,9 @@ exports.useCarouselContext = carouselContext.useCarouselContext;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselIndicator = carouselIndicator.CarouselIndicator;
 exports.CarouselIndicatorGroup = carouselIndicatorGroup.CarouselIndicatorGroup;
-exports.CarouselNextSlideTrigger = carouselNextSlideTrigger.CarouselNextSlideTrigger;
-exports.CarouselPrevSlideTrigger = carouselPrevSlideTrigger.CarouselPrevSlideTrigger;
-exports.CarouselSlide = carouselSlide.CarouselSlide;
-exports.CarouselSlideGroup = carouselSlideGroup.CarouselSlideGroup;
+exports.CarouselItem = carouselItem.CarouselItem;
+exports.CarouselItemGroup = carouselItemGroup.CarouselItemGroup;
+exports.CarouselNextTrigger = carouselNextTrigger.CarouselNextTrigger;
+exports.CarouselPrevTrigger = carouselPrevTrigger.CarouselPrevTrigger;
 exports.CarouselViewport = carouselViewport.CarouselViewport;
-exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.Carousel = Carousel;

package/carousel/index.d.ts

@@ -1,49 +1,25 @@
-import { SlideIndicatorProps, SlideProps } from '@zag-js/carousel';
-import { HTMLArkProps } from '..';
-import { UseCarouselReturn, UseCarouselProps } from './use-carousel';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, ReactNode, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type CarouselProps } from './carousel';
-import { useCarouselContext } from './carousel-context';
+import { useCarouselContext, type CarouselContext } from './carousel-context';
 import { CarouselControl, type CarouselControlProps } from './carousel-control';
 import { CarouselIndicator, type CarouselIndicatorProps } from './carousel-indicator';
 import { CarouselIndicatorGroup, type CarouselIndicatorGroupProps } from './carousel-indicator-group';
-import { CarouselNextSlideTrigger, type CarouselNextSlideTriggerProps } from './carousel-next-slide-trigger';
-import { CarouselPrevSlideTrigger, type CarouselPrevSlideTriggerProps } from './carousel-prev-slide-trigger';
-import { CarouselSlide, type CarouselSlideProps } from './carousel-slide';
-import { CarouselSlideGroup, type CarouselSlideGroupProps } from './carousel-slide-group';
+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 { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
-import { carouselAnatomy } from './carousel.anatomy';
-declare const Carousel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & {
-    children?: ReactNode | ((pages: UseCarouselReturn) => ReactNode);
-}, keyof UseCarouselProps> & UseCarouselProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & {
-        children?: ReactNode | ((pages: UseCarouselReturn) => ReactNode);
-    }, keyof UseCarouselProps> & UseCarouselProps & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Indicator: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof SlideIndicatorProps> & SlideIndicatorProps & RefAttributes<HTMLButtonElement>>;
-    IndicatorGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    NextSlideTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    PrevSlideTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Slide: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & SlideProps & RefAttributes<HTMLDivElement>>;
-    SlideGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Viewport: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
+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, CarouselNextSlideTrigger, CarouselPrevSlideTrigger, CarouselSlide, CarouselSlideGroup, CarouselViewport, carouselAnatomy, useCarouselContext, };
-export type { CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselNextSlideTriggerProps, CarouselPrevSlideTriggerProps, CarouselProps, CarouselSlideGroupProps, CarouselSlideProps, CarouselViewportProps, };
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
+export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselProps, CarouselViewportProps, };

package/carousel/index.mjs

@@ -4,23 +4,22 @@ 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 { CarouselNextSlideTrigger } from './carousel-next-slide-trigger.mjs';
-import { CarouselPrevSlideTrigger } from './carousel-prev-slide-trigger.mjs';
-import { CarouselSlide } from './carousel-slide.mjs';
-import { CarouselSlideGroup } from './carousel-slide-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';
-export { carouselAnatomy } from './carousel.anatomy.mjs';
 
 const Carousel = Object.assign(Carousel$1, {
   Root: Carousel$1,
   Control: CarouselControl,
   Indicator: CarouselIndicator,
   IndicatorGroup: CarouselIndicatorGroup,
-  NextSlideTrigger: CarouselNextSlideTrigger,
-  PrevSlideTrigger: CarouselPrevSlideTrigger,
-  Slide: CarouselSlide,
-  SlideGroup: CarouselSlideGroup,
+  NextTrigger: CarouselNextTrigger,
+  PrevTrigger: CarouselPrevTrigger,
+  Item: CarouselItem,
+  ItemGroup: CarouselItemGroup,
   Viewport: CarouselViewport
 });
 
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselNextSlideTrigger, CarouselPrevSlideTrigger, CarouselSlide, CarouselSlideGroup, CarouselViewport };
+export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport };

package/carousel/use-carousel.cjs

@@ -7,6 +7,7 @@ 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');
 
 function _interopNamespaceDefault(e) {
@@ -28,14 +29,19 @@ function _interopNamespaceDefault(e) {
 
 const carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel);
 
-const useCarousel = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
-  const context = {
+const useCarousel = (props = {}) => {
+  const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
+    index: props.defaultIndex,
     ...props
   };
-  const [state, send] = react$1.useMachine(carousel__namespace.machine(context), { context });
+  const context = {
+    ...initialContext,
+    index: props.index,
+    onIndexChange: useEvent.useEvent(props.onIndexChange, { sync: true })
+  };
+  const [state, send] = react$1.useMachine(carousel__namespace.machine(initialContext), { context });
   return carousel__namespace.connect(state, send, react$1.normalizeProps);
 };
 

package/carousel/use-carousel.d.ts

@@ -1,6 +1,12 @@
 import * as carousel from '@zag-js/carousel';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UseCarouselProps extends Optional<carousel.Context, 'id'> {
+    /**
+     * The initial selected index of the carousel.
+     */
+    defaultIndex?: carousel.Context['index'];
 }
-export type UseCarouselReturn = carousel.Api;
-export declare const useCarousel: (props: UseCarouselProps) => UseCarouselReturn;
+export interface UseCarouselReturn extends carousel.Api<PropTypes> {
+}
+export declare const useCarousel: (props?: UseCarouselProps) => UseCarouselReturn;

package/carousel/use-carousel.mjs

@@ -3,16 +3,22 @@ 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';
 
-const useCarousel = (props) => {
-  const getRootNode = useEnvironmentContext();
-  const context = {
+const useCarousel = (props = {}) => {
+  const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
+    index: props.defaultIndex,
     ...props
   };
-  const [state, send] = useMachine(carousel.machine(context), { context });
+  const context = {
+    ...initialContext,
+    index: props.index,
+    onIndexChange: useEvent(props.onIndexChange, { sync: true })
+  };
+  const [state, send] = useMachine(carousel.machine(initialContext), { context });
   return carousel.connect(state, send, normalizeProps);
 };
 

package/checkbox/checkbox-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseCheckboxReturn } from './use-checkbox';
-export type CheckboxContext = UseCheckboxReturn;
-export declare const CheckboxProvider: Provider<UseCheckboxReturn>, useCheckboxContext: () => UseCheckboxReturn;
+export interface CheckboxContext extends UseCheckboxReturn {
+}
+export declare const CheckboxProvider: Provider<CheckboxContext>, useCheckboxContext: () => CheckboxContext;

package/checkbox/checkbox-control.cjs

@@ -12,7 +12,10 @@ const checkboxContext = require('./checkbox-context.cjs');
 const CheckboxControl = react.forwardRef((props, ref) => {
   const api = checkboxContext.useCheckboxContext();
   const mergedProps = react$1.mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 CheckboxControl.displayName = "CheckboxControl";
 

package/checkbox/checkbox-control.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type CheckboxControlProps = HTMLArkProps<'div'>;
-export declare const CheckboxControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface CheckboxControlProps extends HTMLArkProps<'div'> {
+}
+export declare const CheckboxControl: ForwardRefExoticComponent<CheckboxControlProps & RefAttributes<HTMLDivElement>>;

package/checkbox/checkbox-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -8,7 +8,10 @@ import { useCheckboxContext } from './checkbox-context.mjs';
 const CheckboxControl = forwardRef((props, ref) => {
   const api = useCheckboxContext();
   const mergedProps = mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 CheckboxControl.displayName = "CheckboxControl";
 

package/checkbox/checkbox-indicator.cjs

@@ -0,0 +1,21 @@
+'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 factory = require('../factory.cjs');
+const checkboxContext = require('./checkbox-context.cjs');
+
+const CheckboxIndicator = react.forwardRef(
+  (props, ref) => {
+    const api = checkboxContext.useCheckboxContext();
+    const mergedProps = react$1.mergeProps(api.indicatorProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
+exports.CheckboxIndicator = CheckboxIndicator;

package/checkbox/checkbox-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface CheckboxIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const CheckboxIndicator: ForwardRefExoticComponent<CheckboxIndicatorProps & RefAttributes<HTMLDivElement>>;

package/checkbox/checkbox-indicator.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useCheckboxContext } from './checkbox-context.mjs';
+
+const CheckboxIndicator = forwardRef(
+  (props, ref) => {
+    const api = useCheckboxContext();
+    const mergedProps = mergeProps(api.indicatorProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
+export { CheckboxIndicator };

package/checkbox/checkbox-label.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
 const CheckboxLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = checkboxContext.useCheckboxContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = checkboxContext.useCheckboxContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 CheckboxLabel.displayName = "CheckboxLabel";

package/checkbox/checkbox-label.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type CheckboxLabelProps = HTMLArkProps<'span'>;
-export declare const CheckboxLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLSpanElement>>;
+export interface CheckboxLabelProps extends HTMLArkProps<'span'> {
+}
+export declare const CheckboxLabel: ForwardRefExoticComponent<CheckboxLabelProps & RefAttributes<HTMLSpanElement>>;

package/checkbox/checkbox-label.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxLabel = forwardRef((props, ref) => {
-  const { labelProps } = useCheckboxContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 CheckboxLabel.displayName = "CheckboxLabel";

package/checkbox/checkbox.cjs

@@ -26,7 +26,7 @@ const Checkbox = react.forwardRef((props, ref) => {
       "ids",
       "invalid",
       "name",
-      "onChange",
+      "onCheckedChange",
       "required",
       "value"
     ]
@@ -34,10 +34,7 @@ const Checkbox = react.forwardRef((props, ref) => {
   const api = useCheckbox.useCheckbox(useCheckboxProps);
   const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsxs(checkboxContext.CheckboxProvider, { value: api, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
 Checkbox.displayName = "Checkbox";
 

package/checkbox/checkbox.d.ts

@@ -3,9 +3,8 @@ import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type CheckboxContext } from './checkbox-context';
 import { type UseCheckboxProps } from './use-checkbox';
-export type CheckboxProps = Assign<HTMLArkProps<'label'>, Assign<UseCheckboxProps, {
+export interface CheckboxProps extends Assign<HTMLArkProps<'label'>, Assign<UseCheckboxProps, {
     children?: ReactNode | ((pages: CheckboxContext) => ReactNode);
-}>>;
-export declare const Checkbox: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "children" | keyof UseCheckboxProps> & Omit<UseCheckboxProps, "children"> & {
-    children?: ReactNode | ((pages: CheckboxContext) => ReactNode);
-} & RefAttributes<HTMLLabelElement>>;
+}>> {
+}
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;

package/checkbox/checkbox.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -22,7 +22,7 @@ const Checkbox = forwardRef((props, ref) => {
       "ids",
       "invalid",
       "name",
-      "onChange",
+      "onCheckedChange",
       "required",
       "value"
     ]
@@ -30,10 +30,7 @@ const Checkbox = forwardRef((props, ref) => {
   const api = useCheckbox(useCheckboxProps);
   const mergedProps = mergeProps(api.rootProps, labelProps);
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsxs(CheckboxProvider, { value: api, children: [
-    /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsx(CheckboxProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
 Checkbox.displayName = "Checkbox";
 

package/checkbox/index.cjs

@@ -3,23 +3,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const checkbox$1 = require('./checkbox.cjs');
+const checkbox = require('./checkbox.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
+const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
-const checkbox = require('@zag-js/checkbox');
 
-const Checkbox = Object.assign(checkbox$1.Checkbox, {
-  Root: checkbox$1.Checkbox,
+const Checkbox = Object.assign(checkbox.Checkbox, {
+  Root: checkbox.Checkbox,
   Control: checkboxControl.CheckboxControl,
-  Label: checkboxLabel.CheckboxLabel
+  Label: checkboxLabel.CheckboxLabel,
+  Indicator: checkboxIndicator.CheckboxIndicator
 });
 
 exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
+exports.CheckboxIndicator = checkboxIndicator.CheckboxIndicator;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
-Object.defineProperty(exports, 'checkboxAnatomy', {
-  enumerable: true,
-  get: () => checkbox.anatomy
-});
 exports.Checkbox = Checkbox;

package/checkbox/index.d.ts

@@ -1,25 +1,16 @@
-import { UseCheckboxProps, UseCheckboxReturn } from './use-checkbox';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { CheckedState } from '@zag-js/checkbox';
 import { type CheckboxProps } from './checkbox';
-import { useCheckboxContext } from './checkbox-context';
+import { useCheckboxContext, type CheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
+import { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 import { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
-import { checkboxAnatomy } from './checkbox.anatomy';
-declare const Checkbox: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "children" | keyof UseCheckboxProps> & Omit<UseCheckboxProps, "children"> & {
-    children?: ReactNode | ((pages: UseCheckboxReturn) => ReactNode);
-} & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "children" | keyof UseCheckboxProps> & Omit<UseCheckboxProps, "children"> & {
-        children?: ReactNode | ((pages: UseCheckboxReturn) => ReactNode);
-    } & RefAttributes<HTMLLabelElement>>;
-    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
+declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>> & {
+    Root: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLLabelElement>>;
+    Control: ForwardRefExoticComponent<CheckboxControlProps & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<CheckboxLabelProps & RefAttributes<HTMLSpanElement>>;
+    Indicator: ForwardRefExoticComponent<CheckboxIndicatorProps & RefAttributes<HTMLDivElement>>;
 };
-export { Checkbox, CheckboxControl, CheckboxLabel, checkboxAnatomy, useCheckboxContext };
-export type { CheckboxControlProps, CheckboxLabelProps, CheckboxProps, CheckedState };
+export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
+export type { CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };

package/checkbox/index.mjs

@@ -2,13 +2,14 @@
 import { Checkbox as Checkbox$1 } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
 import { CheckboxControl } from './checkbox-control.mjs';
+import { CheckboxIndicator } from './checkbox-indicator.mjs';
 import { CheckboxLabel } from './checkbox-label.mjs';
-export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 
 const Checkbox = Object.assign(Checkbox$1, {
   Root: Checkbox$1,
   Control: CheckboxControl,
-  Label: CheckboxLabel
+  Label: CheckboxLabel,
+  Indicator: CheckboxIndicator
 });
 
-export { Checkbox, CheckboxControl, CheckboxLabel };
+export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel };

package/checkbox/use-checkbox.cjs

@@ -7,6 +7,7 @@ const checkbox = require('@zag-js/checkbox');
 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');
 
 function _interopNamespaceDefault(e) {
@@ -28,17 +29,17 @@ function _interopNamespaceDefault(e) {
 
 const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 
-const useCheckbox = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
+const useCheckbox = (props = {}) => {
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     checked: props.defaultChecked
   };
   const context = {
     ...initialContext,
-    checked: props.checked
+    checked: props.checked,
+    onCheckedChange: useEvent.useEvent(props.onCheckedChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(checkbox__namespace.machine(initialContext), { context });
   return checkbox__namespace.connect(state, send, react$1.normalizeProps);

package/checkbox/use-checkbox.d.ts

@@ -1,7 +1,12 @@
 import * as checkbox from '@zag-js/checkbox';
+import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
 export interface UseCheckboxProps extends Optional<checkbox.Context, 'id'> {
+    /**
+     * The initial checked state of the checkbox.
+     */
     defaultChecked?: checkbox.Context['checked'];
 }
-export type UseCheckboxReturn = checkbox.Api;
-export declare const useCheckbox: (props: UseCheckboxProps) => UseCheckboxReturn;
+export interface UseCheckboxReturn extends checkbox.Api<PropTypes> {
+}
+export declare const useCheckbox: (props?: UseCheckboxProps) => UseCheckboxReturn;

package/checkbox/use-checkbox.mjs

@@ -3,19 +3,20 @@ import * as checkbox from '@zag-js/checkbox';
 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';
 
-const useCheckbox = (props) => {
-  const getRootNode = useEnvironmentContext();
+const useCheckbox = (props = {}) => {
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     checked: props.defaultChecked
   };
   const context = {
     ...initialContext,
-    checked: props.checked
+    checked: props.checked,
+    onCheckedChange: useEvent(props.onCheckedChange, { sync: true })
   };
   const [state, send] = useMachine(checkbox.machine(initialContext), { context });
   return checkbox.connect(state, send, normalizeProps);

package/color-picker/{color-picker-area-gradient.cjs → color-picker-area-background.cjs}

@@ -10,14 +10,14 @@ const factory = require('../factory.cjs');
 const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerAreaGradient = react.forwardRef(
+const ColorPickerAreaBackground = react.forwardRef(
   (props, ref) => {
     const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
-    const { getAreaGradientProps } = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(getAreaGradientProps(colorAreaProps), props);
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.getAreaBackgroundProps(colorAreaProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-ColorPickerAreaGradient.displayName = "ColorPickerAreaGradient";
+ColorPickerAreaBackground.displayName = "ColorPickerAreaBackground";
 
-exports.ColorPickerAreaGradient = ColorPickerAreaGradient;
+exports.ColorPickerAreaBackground = ColorPickerAreaBackground;