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

package/carousel/carousel-slide.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { SlideProps } from '@zag-js/carousel';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type CarouselSlideProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, SlideProps>;
-export declare const CarouselSlide: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "index"> & SlideProps & RefAttributes<HTMLDivElement>>;
+export type CarouselSlideProps = Assign<HTMLArkProps<'div'>, SlideProps>;
+export declare const CarouselSlide: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & SlideProps & RefAttributes<HTMLDivElement>>;

package/carousel/carousel-viewport.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type CarouselViewportProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const CarouselViewport: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type CarouselViewportProps = HTMLArkProps<'div'>;
+export declare const CarouselViewport: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/carousel/carousel.d.ts

@@ -1,16 +1,13 @@
-import { Context } from '@zag-js/carousel';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type CarouselContext } from './carousel-context';
 import { type UseCarouselProps } from './use-carousel';
-export type CarouselProps = Assign<ComponentPropsWithoutRef<typeof ark.div> & {
-    children: ReactNode | ((pages: CarouselContext) => ReactNode);
+export type CarouselProps = Assign<HTMLArkProps<'div'> & {
+    children?: ReactNode | ((pages: CarouselContext) => ReactNode);
 }, UseCarouselProps>;
-export declare const Carousel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+export declare const Carousel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & {
-    children: ReactNode | ((pages: CarouselContext) => ReactNode);
-}, "getRootNode" | "id" | "ids" | "orientation" | "spacing" | "dir" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
+} & {
+    children?: ReactNode | ((pages: CarouselContext) => ReactNode);
+}, keyof UseCarouselProps> & UseCarouselProps & RefAttributes<HTMLDivElement>>;

package/carousel/index.d.ts

@@ -1,5 +1,7 @@
-import { PublicApi, Context, SlideIndicatorProps, SlideProps } from '@zag-js/carousel';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes } from 'react';
+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';
 /// <reference types="react" />
 import { type CarouselProps } from './carousel';
 import { useCarouselContext } from './carousel-context';
@@ -12,66 +14,36 @@ import { CarouselSlide, type CarouselSlideProps } from './carousel-slide';
 import { CarouselSlideGroup, type CarouselSlideGroupProps } from './carousel-slide-group';
 import { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
 import { carouselAnatomy } from './carousel.anatomy';
-declare const Carousel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+declare const Carousel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
-}, "getRootNode" | "id" | "ids" | "orientation" | "spacing" | "dir" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & {
-        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
-    }, "getRootNode" | "id" | "ids" | "orientation" | "spacing" | "dir" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Indicator: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+} & {
+    children?: ReactNode | ((pages: UseCarouselReturn) => ReactNode);
+}, keyof UseCarouselProps> & UseCarouselProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof SlideIndicatorProps> & SlideIndicatorProps & RefAttributes<HTMLButtonElement>>;
-    IndicatorGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
+        children?: ReactNode | ((pages: UseCarouselReturn) => ReactNode);
+    }, keyof UseCarouselProps> & UseCarouselProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    NextSlideTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Indicator: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof SlideIndicatorProps> & SlideIndicatorProps & RefAttributes<HTMLButtonElement>>;
+    IndicatorGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    PrevSlideTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    NextSlideTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Slide: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    PrevSlideTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "index"> & SlideProps & RefAttributes<HTMLDivElement>>;
-    SlideGroup: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Slide: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & SlideProps & RefAttributes<HTMLDivElement>>;
+    SlideGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Viewport: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Viewport: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & 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, };

package/carousel/use-carousel.d.ts

@@ -1,10 +1,6 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as carousel from '@zag-js/carousel';
 import { type Optional } from '../types';
-export type UseCarouselProps = Optional<carousel.Context, 'id'>;
-export type UseCarouselReturn = ReturnType<typeof useCarousel>;
-export declare const useCarousel: (props: UseCarouselProps) => carousel.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export interface UseCarouselProps extends Optional<carousel.Context, 'id'> {
+}
+export type UseCarouselReturn = carousel.Api;
+export declare const useCarousel: (props: UseCarouselProps) => UseCarouselReturn;

package/checkbox/checkbox-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/checkbox';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseCheckboxReturn } from './use-checkbox';
 export type CheckboxContext = UseCheckboxReturn;
-export declare const CheckboxProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useCheckboxContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const CheckboxProvider: Provider<UseCheckboxReturn>, useCheckboxContext: () => UseCheckboxReturn;

package/checkbox/checkbox-control.cjs

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

package/checkbox/checkbox-control.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type CheckboxControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const CheckboxControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/checkbox/checkbox-control.mjs

@@ -1,17 +1,14 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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 CheckboxControl = forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = useCheckboxContext();
-  const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = useCheckboxContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 CheckboxControl.displayName = "CheckboxControl";
 

package/checkbox/checkbox-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type CheckboxLabelProps = ComponentPropsWithoutRef<typeof ark.span>;
-export declare const CheckboxLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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;
-}, "ref"> & RefAttributes<HTMLSpanElement>>;
+} & RefAttributes<HTMLSpanElement>>;

package/checkbox/checkbox.cjs

@@ -31,10 +31,13 @@ const Checkbox = react.forwardRef((props, ref) => {
       "value"
     ]
   );
-  const checkbox = useCheckbox.useCheckbox(useCheckboxProps);
-  const mergedProps = react$1.mergeProps(checkbox.rootProps, labelProps);
-  const view = runIfFn.runIfFn(children, checkbox);
-  return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+  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 })
+  ] });
 });
 Checkbox.displayName = "Checkbox";
 

package/checkbox/checkbox.d.ts

@@ -1,15 +1,11 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+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<ComponentPropsWithoutRef<typeof ark.label>, Assign<UseCheckboxProps, {
-    children: ReactNode | ((pages: CheckboxContext) => ReactNode);
+export type CheckboxProps = Assign<HTMLArkProps<'label'>, Assign<UseCheckboxProps, {
+    children?: ReactNode | ((pages: CheckboxContext) => ReactNode);
 }>>;
-export declare const Checkbox: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "defaultChecked" | "dir" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
-    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>>;

package/checkbox/checkbox.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -27,10 +27,13 @@ const Checkbox = forwardRef((props, ref) => {
       "value"
     ]
   );
-  const checkbox = useCheckbox(useCheckboxProps);
-  const mergedProps = mergeProps(checkbox.rootProps, labelProps);
-  const view = runIfFn(children, checkbox);
-  return /* @__PURE__ */ jsx(CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+  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 })
+  ] });
 });
 Checkbox.displayName = "Checkbox";
 

package/checkbox/checkbox.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Checkbox } from '.';
+import { Checkbox } from './';
 type CheckboxType = typeof Checkbox;
 declare const meta: Meta<CheckboxType>;
 export default meta;

package/checkbox/index.d.ts

@@ -1,42 +1,25 @@
-import { UseCheckboxProps } from './use-checkbox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, HTMLAttributes, CSSProperties, RefAttributes } from 'react';
+import { UseCheckboxProps, UseCheckboxReturn } from './use-checkbox';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
 /// <reference types="react" />
-import { PublicApi, CheckedState } from '@zag-js/checkbox';
+import type { CheckedState } from '@zag-js/checkbox';
 import { type CheckboxProps } from './checkbox';
 import { useCheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
 import { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
 import { checkboxAnatomy } from './checkbox.anatomy';
-declare const Checkbox: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "defaultChecked" | "dir" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+declare const Checkbox: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "children" | keyof UseCheckboxProps> & Omit<UseCheckboxProps, "children"> & {
+    children?: ReactNode | ((pages: UseCheckboxReturn) => ReactNode);
 } & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "defaultChecked" | "dir" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
-        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "children" | keyof UseCheckboxProps> & Omit<UseCheckboxProps, "children"> & {
+        children?: ReactNode | ((pages: UseCheckboxReturn) => ReactNode);
     } & RefAttributes<HTMLLabelElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
+    } & RefAttributes<HTMLSpanElement>>;
 };
 export { Checkbox, CheckboxControl, CheckboxLabel, checkboxAnatomy, useCheckboxContext };
 export type { CheckboxControlProps, CheckboxLabelProps, CheckboxProps, CheckedState };

package/checkbox/use-checkbox.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as checkbox from '@zag-js/checkbox';
 import { type Optional } from '../types';
-export type UseCheckboxProps = Optional<checkbox.Context, 'id'> & {
-    defaultChecked?: boolean;
-};
-export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
-export declare const useCheckbox: (props: UseCheckboxProps) => checkbox.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export interface UseCheckboxProps extends Optional<checkbox.Context, 'id'> {
+    defaultChecked?: checkbox.Context['checked'];
+}
+export type UseCheckboxReturn = checkbox.Api;
+export declare const useCheckbox: (props: UseCheckboxProps) => UseCheckboxReturn;

package/color-picker/color-picker-area-gradient.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerAreaGradientProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerAreaGradient: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ColorPickerAreaGradientProps = HTMLArkProps<'div'>;
+export declare const ColorPickerAreaGradient: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area-thumb.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerAreaThumbProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerAreaThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ColorPickerAreaThumbProps = HTMLArkProps<'div'>;
+export declare const ColorPickerAreaThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ColorAreaProps } from '@zag-js/color-picker';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerAreaProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, ColorAreaProps>;
-export declare const ColorPickerArea: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;
+export type ColorPickerAreaProps = Assign<HTMLArkProps<'div'>, ColorAreaProps>;
+export declare const ColorPickerArea: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-input.d.ts

@@ -1,10 +1,9 @@
+import { ForwardRefExoticComponent, InputHTMLAttributes, DetailedHTMLProps, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ColorChannelInputProps } from '@zag-js/color-picker';
-import { ForwardRefExoticComponent, InputHTMLAttributes, DetailedHTMLProps, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerChannelInputProps = Assign<ColorChannelInputProps, ComponentPropsWithoutRef<typeof ark.input>>;
-export declare const ColorPickerChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
+export type ColorPickerChannelInputProps = Assign<ColorChannelInputProps, HTMLArkProps<'input'>>;
+export declare const ColorPickerChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLInputElement>>;
+} & RefAttributes<HTMLInputElement>>;

package/color-picker/color-picker-channel-slider-background.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerChannelSliderBackgroundProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerChannelSliderBackground: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ColorPickerChannelSliderBackgroundProps = HTMLArkProps<'div'>;
+export declare const ColorPickerChannelSliderBackground: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider-thumb.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerChannelSliderThumbProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerChannelSliderThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ColorPickerChannelSliderThumbProps = HTMLArkProps<'div'>;
+export declare const ColorPickerChannelSliderThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider-track.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ColorChannelProps } from '@zag-js/color-picker';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerChannelSliderTrackProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, ColorChannelProps>;
-export declare const ColorPickerChannelSliderTrack: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;
+export type ColorPickerChannelSliderTrackProps = Assign<HTMLArkProps<'div'>, ColorChannelProps>;
+export declare const ColorPickerChannelSliderTrack: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-content.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerContentProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ColorPickerContentProps = HTMLArkProps<'div'>;
+export declare const ColorPickerContent: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/color-picker';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseColorPickerReturn } from './use-color-picker';
 export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useColorPickerContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const ColorPickerProvider: Provider<UseColorPickerReturn>, useColorPickerContext: () => UseColorPickerReturn;