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

package/combobox/index.d.ts

@@ -1,94 +1,57 @@
-import { PresenceProps } from '..';
-import { Context, PublicApi, OptionData, OptionGroupProps, OptionGroupLabelProps } from '@zag-js/combobox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ItemProps, ItemGroupProps, ItemGroupLabelProps } from '@zag-js/combobox';
+import { HTMLArkProps, PresenceProps } from '..';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, InputHTMLAttributes, RefObject, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
-import { type ComboboxProps } from './combobox';
+import type { CollectionItem } from '../types';
+import { ComboboxComponent, type ComboboxProps } from './combobox';
 import { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
 import { ComboboxContent, type ComboboxContentProps } from './combobox-content';
-import { useComboboxContext } from './combobox-context';
+import { useComboboxContext, type ComboboxContext } from './combobox-context';
 import { ComboboxControl, type ComboboxControlProps } from './combobox-control';
 import { ComboboxInput, type ComboboxInputProps } from './combobox-input';
+import { ComboboxItem, type ComboboxItemProps } from './combobox-item';
+import { ComboboxItemGroup, type ComboboxItemGroupProps } from './combobox-item-group';
+import { ComboboxItemGroupLabel, type ComboboxItemGroupLabelProps } from './combobox-item-group-label';
+import { ComboboxItemIndicator, type ComboboxItemIndicatorProps } from './combobox-item-indicator';
+import { ComboboxItemText, type ComboboxItemTextProps } from './combobox-item-text';
 import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
-import { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
-import { ComboboxOptionGroup, type ComboboxOptionGroupProps } from './combobox-option-group';
-import { ComboboxOptionGroupLabel, type ComboboxOptionGroupLabelProps } from './combobox-option-group-label';
 import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
 import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
 import { comboboxAnatomy } from './combobox.anatomy';
-declare const Combobox: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "readOnly" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    children?: ReactNode | ((props: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const Combobox: ComboboxComponent & {
+    Root: ComboboxComponent;
+    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "readOnly" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        children?: ReactNode | ((props: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
-    } & RefAttributes<HTMLDivElement>>;
-    ClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    } & RefAttributes<HTMLInputElement>>;
+    Item: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Option: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    }, "ref">, "item"> & ItemProps & RefAttributes<HTMLDivElement>>;
+    ItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & ItemGroupProps & RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "htmlFor"> & ItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
+    ItemIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "disabled" | "index" | keyof OptionData | "count"> & OptionData & {
-        index?: number | undefined;
-        count?: number | undefined;
-        disabled?: boolean | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    OptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    ItemText: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;
-    OptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "htmlFor"> & OptionGroupLabelProps & RefAttributes<HTMLDivElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLLabelElement>>;
+    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
 };
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
-export type { ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxLabelProps, ComboboxOptionGroupLabelProps, ComboboxOptionGroupProps, ComboboxOptionProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
+export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };

package/combobox/index.mjs

@@ -5,10 +5,12 @@ import { ComboboxContent } from './combobox-content.mjs';
 export { useComboboxContext } from './combobox-context.mjs';
 import { ComboboxControl } from './combobox-control.mjs';
 import { ComboboxInput } from './combobox-input.mjs';
+import { ComboboxItem } from './combobox-item.mjs';
+import { ComboboxItemGroup } from './combobox-item-group.mjs';
+import { ComboboxItemGroupLabel } from './combobox-item-group-label.mjs';
+import { ComboboxItemIndicator } from './combobox-item-indicator.mjs';
+import { ComboboxItemText } from './combobox-item-text.mjs';
 import { ComboboxLabel } from './combobox-label.mjs';
-import { ComboboxOption } from './combobox-option.mjs';
-import { ComboboxOptionGroup } from './combobox-option-group.mjs';
-import { ComboboxOptionGroupLabel } from './combobox-option-group-label.mjs';
 import { ComboboxPositioner } from './combobox-positioner.mjs';
 import { ComboboxTrigger } from './combobox-trigger.mjs';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
@@ -19,12 +21,14 @@ const Combobox = Object.assign(Combobox$1, {
   Content: ComboboxContent,
   Control: ComboboxControl,
   Input: ComboboxInput,
+  Item: ComboboxItem,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  ItemIndicator: ComboboxItemIndicator,
+  ItemText: ComboboxItemText,
   Label: ComboboxLabel,
-  Option: ComboboxOption,
-  OptionGroup: ComboboxOptionGroup,
-  OptionGroupLabel: ComboboxOptionGroupLabel,
   Positioner: ComboboxPositioner,
   Trigger: ComboboxTrigger
 });
 
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger };

package/combobox/use-combobox.cjs

@@ -6,6 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const combobox = require('@zag-js/combobox');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+require('../environment/index.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -27,11 +30,29 @@ function _interopNamespaceDefault(e) {
 const combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
 
 const useCombobox = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const [collectionOptions, rest] = createSplitProps.createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = combobox__namespace.collection(collectionOptions);
+  const initialContext = {
+    id: react.useId(),
+    getRootNode,
+    collection,
+    ...rest,
+    value: props.defaultValue
+  };
   const context = {
-    ...props,
-    id: react.useId()
+    ...initialContext,
+    collection,
+    value: props.value
   };
-  const [state, send] = react$1.useMachine(combobox__namespace.machine(context), { context });
+  const [state, send] = react$1.useMachine(combobox__namespace.machine(initialContext), {
+    context
+  });
   return combobox__namespace.connect(state, send, react$1.normalizeProps);
 };
 

package/combobox/use-combobox.d.ts

@@ -1,10 +1,9 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
+import type { CollectionOptions } from '@zag-js/combobox';
 import * as combobox from '@zag-js/combobox';
-import { type Optional } from '../types';
-export type UseComboboxProps = Optional<combobox.Context, 'id'>;
-export declare const useCombobox: (props: UseComboboxProps) => combobox.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UseComboboxReturn = ReturnType<typeof useCombobox>;
+import { type PropTypes } from '@zag-js/react';
+import { type CollectionItem, type Optional } from '../types';
+export interface UseComboboxProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<combobox.Context<T>, 'id'>, 'collection'> {
+    defaultValue?: combobox.Context<T>['value'];
+}
+export type UseComboboxReturn<T extends CollectionItem> = combobox.Api<PropTypes, T>;
+export declare const useCombobox: <T extends CollectionItem>(props: UseComboboxProps<T>) => UseComboboxReturn<T>;

package/combobox/use-combobox.mjs

@@ -2,13 +2,34 @@
 import * as combobox from '@zag-js/combobox';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import '../environment/index.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useCombobox = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const [collectionOptions, rest] = createSplitProps()(props, [
+    "isItemDisabled",
+    "itemToValue",
+    "itemToString",
+    "items"
+  ]);
+  const collection = combobox.collection(collectionOptions);
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    collection,
+    ...rest,
+    value: props.defaultValue
+  };
   const context = {
-    ...props,
-    id: useId()
+    ...initialContext,
+    collection,
+    value: props.value
   };
-  const [state, send] = useMachine(combobox.machine(context), { context });
+  const [state, send] = useMachine(combobox.machine(initialContext), {
+    context
+  });
   return combobox.connect(state, send, normalizeProps);
 };
 

package/compose-refs.cjs

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/compose-refs.mjs

@@ -1,4 +1,3 @@
-'use client';
 function setRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);

package/create-context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface CreateContextOptions<T> {
+interface CreateContextOptions<T> {
     strict?: boolean;
     hookName?: string;
     providerName?: string;
@@ -7,5 +7,6 @@ export interface CreateContextOptions<T> {
     name?: string;
     defaultValue?: T;
 }
-export type CreateContextReturn<T> = [React.Provider<T>, () => T, React.Context<T>];
+type CreateContextReturn<T> = [React.Provider<T>, () => T, React.Context<T>];
 export declare function createContext<T>(options?: CreateContextOptions<T>): CreateContextReturn<T>;
+export {};

package/date-picker/date-picker-clear-trigger.d.ts

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

package/date-picker/date-picker-column-header.d.ts

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

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

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

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

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

package/date-picker/date-picker-control.d.ts

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

package/date-picker/date-picker-day-cell-trigger.d.ts

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

package/date-picker/date-picker-day-cell.d.ts

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

package/date-picker/date-picker-grid.d.ts

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

package/date-picker/date-picker-input.d.ts

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

package/date-picker/date-picker-month-cell-trigger.d.ts

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

package/date-picker/date-picker-month-cell.d.ts

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

package/date-picker/date-picker-month-select.d.ts

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

package/date-picker/date-picker-next-trigger.d.ts

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

package/date-picker/date-picker-positioner.d.ts

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

package/date-picker/date-picker-prev-trigger.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ViewProps } from '@zag-js/date-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 DatePickerPrevTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, ViewProps>;
-export declare const DatePickerPrevTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "view"> & ViewProps & RefAttributes<HTMLButtonElement>>;
+export type DatePickerPrevTriggerProps = Assign<HTMLArkProps<'button'>, ViewProps>;
+export declare const DatePickerPrevTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, "view"> & ViewProps & RefAttributes<HTMLButtonElement>>;

package/date-picker/date-picker-row-group.d.ts

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

package/date-picker/date-picker-row-header.d.ts

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