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

package/carousel/index.d.ts

@@ -1,6 +1,7 @@
-import { Context, SlideIndicatorProps, SlideProps } from '@zag-js/carousel';
-import { UseCarouselReturn } from './use-carousel';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, 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';
@@ -13,60 +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: UseCarouselReturn) => ReactNode);
-}, "getRootNode" | "id" | "ids" | "dir" | "orientation" | "spacing" | "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: UseCarouselReturn) => ReactNode);
-    }, "getRootNode" | "id" | "ids" | "dir" | "orientation" | "spacing" | "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;
-    } & {
+}, 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,5 +1,6 @@
 import * as carousel from '@zag-js/carousel';
 import { type Optional } from '../types';
-export type UseCarouselProps = Optional<carousel.Context, 'id'>;
+export interface UseCarouselProps extends Optional<carousel.Context, 'id'> {
+}
 export type UseCarouselReturn = carousel.Api;
 export declare const useCarousel: (props: UseCarouselProps) => UseCarouselReturn;

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, {
+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" | "defaultChecked" | "dir" | "onChange" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+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,5 +1,6 @@
 import { UseCheckboxProps, UseCheckboxReturn } from './use-checkbox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, RefAttributes, HTMLAttributes } from 'react';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
 /// <reference types="react" />
 import type { CheckedState } from '@zag-js/checkbox';
 import { type CheckboxProps } from './checkbox';
@@ -7,30 +8,18 @@ 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" | "defaultChecked" | "dir" | "onChange" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+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" | "defaultChecked" | "dir" | "onChange" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+    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,7 +1,7 @@
 import * as checkbox from '@zag-js/checkbox';
 import { type Optional } from '../types';
-export type UseCheckboxProps = Optional<checkbox.Context, 'id'> & {
-    defaultChecked?: boolean;
-};
+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-eye-dropper-trigger.d.ts

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

package/color-picker/color-picker-swatch-background.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerSwatchBackgroundProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerSwatchBackground: 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 ColorPickerSwatchBackgroundProps = HTMLArkProps<'div'>;
+export declare const ColorPickerSwatchBackground: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-swatch-group.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ColorPickerSwatchGroupProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const ColorPickerSwatchGroup: 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 ColorPickerSwatchGroupProps = HTMLArkProps<'div'>;
+export declare const ColorPickerSwatchGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

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

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