@ark-ui/react 0.10.0 → 0.11.0-beta.1

package/combobox/combobox.d.ts

@@ -1,5 +1,5 @@
-import type { Context } from '@zag-js/combobox';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { Context } from '@zag-js/combobox';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
@@ -10,6 +10,6 @@ export declare const Combobox: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Det
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "children">, "name" | "form" | "id" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "disabled" | "onClose" | "readOnly" | "getRootNode" | "ids" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "positioning" | "onInputChange" | "onHighlight" | "onOpen" | "onInteractOutside" | "translations"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "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: UseComboboxReturn) => React.ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/combobox/combobox.mjs

@@ -30,11 +30,13 @@ const Combobox = forwardRef((props, ref) => {
       "loop",
       "name",
       "onClose",
+      "onFocusOutside",
       "onHighlight",
       "onInputChange",
       "onInputChange",
       "onInteractOutside",
       "onOpen",
+      "onPointerDownOutside",
       "onSelect",
       "openOnClick",
       "placeholder",

package/combobox/combobox.stories.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { Combobox } from './';
+type ComboboxType = typeof Combobox;
+declare const meta: Meta<ComboboxType>;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/combobox/combobox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/combobox/index.cjs

@@ -2,29 +2,47 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox = require('./combobox.cjs');
+const combobox$1 = require('./combobox.cjs');
+const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const comboboxControl = require('./combobox-control.cjs');
 const comboboxInput = require('./combobox-input.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
 const comboboxOption = require('./combobox-option.cjs');
+const comboboxOptionGroup = require('./combobox-option-group.cjs');
+const comboboxOptionGroupLabel = require('./combobox-option-group-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
-const combobox$1 = require('@zag-js/combobox');
-
+const combobox = require('@zag-js/combobox');
 
+const Combobox = Object.assign(combobox$1.Combobox, {
+  Root: combobox$1.Combobox,
+  ClearTrigger: comboboxClearTrigger.ComboboxClearTrigger,
+  Content: comboboxContent.ComboboxContent,
+  Control: comboboxControl.ComboboxControl,
+  Input: comboboxInput.ComboboxInput,
+  Label: comboboxLabel.ComboboxLabel,
+  Option: comboboxOption.ComboboxOption,
+  OptionGroup: comboboxOptionGroup.ComboboxOptionGroup,
+  OptionGroupLabel: comboboxOptionGroupLabel.ComboboxOptionGroupLabel,
+  Positioner: comboboxPositioner.ComboboxPositioner,
+  Trigger: comboboxTrigger.ComboboxTrigger
+});
 
-exports.Combobox = combobox.Combobox;
+exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
 exports.useComboboxContext = comboboxContext.useComboboxContext;
 exports.ComboboxControl = comboboxControl.ComboboxControl;
 exports.ComboboxInput = comboboxInput.ComboboxInput;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
 exports.ComboboxOption = comboboxOption.ComboboxOption;
+exports.ComboboxOptionGroup = comboboxOptionGroup.ComboboxOptionGroup;
+exports.ComboboxOptionGroupLabel = comboboxOptionGroupLabel.ComboboxOptionGroupLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 Object.defineProperty(exports, 'comboboxAnatomy', {
-	enumerable: true,
-	get: () => combobox$1.anatomy
+  enumerable: true,
+  get: () => combobox.anatomy
 });
+exports.Combobox = Combobox;

package/combobox/index.d.ts

@@ -1,10 +1,94 @@
-export { Combobox, type ComboboxProps } from './combobox';
-export { ComboboxContent, type ComboboxContentProps } from './combobox-content';
-export { useComboboxContext } from './combobox-context';
-export { ComboboxControl, type ComboboxControlProps } from './combobox-control';
-export { ComboboxInput, type ComboboxInputProps } from './combobox-input';
-export { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
-export { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
-export { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
-export { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
-export { comboboxAnatomy } from './combobox.anatomy';
+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';
+/// <reference types="react" />
+import { 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 { ComboboxControl, type ComboboxControlProps } from './combobox-control';
+import { ComboboxInput, type ComboboxInputProps } from './combobox-input';
+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;
+    } & {
+        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;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & Omit<PresenceProps, "children"> & 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>>;
+    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;
+    } & {
+        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;
+    } & {
+        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;
+    } & {
+        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;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & 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, };

package/combobox/index.mjs

@@ -1,10 +1,29 @@
-export { Combobox } from './combobox.mjs';
-export { ComboboxContent } from './combobox-content.mjs';
+import { Combobox as Combobox$1 } from './combobox.mjs';
+import { ComboboxClearTrigger } from './combobox-clear-trigger.mjs';
+import { ComboboxContent } from './combobox-content.mjs';
 export { useComboboxContext } from './combobox-context.mjs';
-export { ComboboxControl } from './combobox-control.mjs';
-export { ComboboxInput } from './combobox-input.mjs';
-export { ComboboxLabel } from './combobox-label.mjs';
-export { ComboboxOption } from './combobox-option.mjs';
-export { ComboboxPositioner } from './combobox-positioner.mjs';
-export { ComboboxTrigger } from './combobox-trigger.mjs';
+import { ComboboxControl } from './combobox-control.mjs';
+import { ComboboxInput } from './combobox-input.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';
+
+const Combobox = Object.assign(Combobox$1, {
+  Root: Combobox$1,
+  ClearTrigger: ComboboxClearTrigger,
+  Content: ComboboxContent,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Label: ComboboxLabel,
+  Option: ComboboxOption,
+  OptionGroup: ComboboxOptionGroup,
+  OptionGroupLabel: ComboboxOptionGroupLabel,
+  Positioner: ComboboxPositioner,
+  Trigger: ComboboxTrigger
+});
+
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger };

package/combobox/use-combobox.d.ts

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as combobox from '@zag-js/combobox';
 import { type Optional } from '../types';
 export type UseComboboxProps = Optional<combobox.Context, 'id'>;

package/compose-refs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type PossibleRef<T> = React.Ref<T> | undefined;
 export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
 export {};

package/create-context.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface CreateContextOptions<T> {
     strict?: boolean;
     hookName?: string;

package/create-split-props.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
-import type { Provider } from 'react';
+import { Provider } from 'react';
+/// <reference types="react" />
 import type { CellProps } from '@zag-js/date-picker';
 export declare const DatePickerCellProvider: Provider<CellProps>, useDatePickerCellContext: () => CellProps;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

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

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,3 +1,4 @@
-import type { Provider } from 'react';
+import { Provider } from 'react';
+/// <reference types="react" />
 import type { DayCellProps } from '@zag-js/date-picker';
 export declare const DatePickerDayCellProvider: Provider<DayCellProps>, useDatePickerDayCellContext: () => DayCellProps;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,5 +1,5 @@
 import type { DayCellProps } from '@zag-js/date-picker';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerDayCellProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, DayCellProps>;

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

@@ -1,5 +1,5 @@
 import type { GridProps } from '@zag-js/date-picker';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerGridProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, GridProps>;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,5 +1,5 @@
 import type { CellProps } from '@zag-js/date-picker';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerMonthCellProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, CellProps>;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, SelectHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

package/date-picker/date-picker-positioner.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerPositioner = react.forwardRef(
+  (props, ref) => {
+    const { positionerProps } = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(positionerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+DatePickerPositioner.displayName = "DatePickerPositioner";
+
+exports.DatePickerPositioner = DatePickerPositioner;

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

@@ -0,0 +1,8 @@
+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;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker-positioner.mjs

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

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

@@ -1,5 +1,5 @@
 import type { ViewProps } from '@zag-js/date-picker';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerPrevTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, ViewProps>;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+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"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type DatePickerRowProps = ComponentPropsWithoutRef<typeof ark.div>;
 export declare const DatePickerRow: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type DatePickerTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
 export declare const DatePickerTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {

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

@@ -1,5 +1,5 @@
 import type { ViewProps } from '@zag-js/date-picker';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerViewTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, ViewProps>;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type DatePickerYearCellTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
 export declare const DatePickerYearCellTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {

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

@@ -1,5 +1,5 @@
 import type { CellProps } from '@zag-js/date-picker';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerYearCellProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, CellProps>;

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, SelectHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, SelectHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type DatePickerYearSelectProps = ComponentPropsWithoutRef<typeof ark.select>;
 export declare const DatePickerYearSelect: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {

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

@@ -1,3 +1,3 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"header" | "input" | "label" | "content" | "grid" | "row" | "nextTrigger" | "control" | "trigger" | "viewTrigger" | "cellTrigger" | "prevTrigger" | "clearTrigger" | "monthSelect" | "yearSelect" | "rowGroup" | "columnHeader">;
-export declare const parts: Record<"header" | "input" | "label" | "content" | "grid" | "row" | "nextTrigger" | "control" | "trigger" | "viewTrigger" | "cellTrigger" | "prevTrigger" | "clearTrigger" | "monthSelect" | "yearSelect" | "rowGroup" | "columnHeader", AnatomyPart>;
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "content" | "grid" | "row" | "trigger" | "positioner" | "control" | "clearTrigger" | "cellTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rowHeader" | "viewTrigger" | "yearSelect" | "rowGroup" | "columnHeader">;
+export declare const parts: Record<"input" | "content" | "grid" | "row" | "trigger" | "positioner" | "control" | "clearTrigger" | "cellTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rowHeader" | "viewTrigger" | "yearSelect" | "rowGroup" | "columnHeader", AnatomyPart>;

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { type PropsWithChildren, type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type DatePickerContext } from './date-picker-context';

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

@@ -0,0 +1,9 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { DatePicker } from './';
+type DatePickerType = typeof DatePicker;
+declare const meta: Meta<DatePickerType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const RangeWithSingleGrid: () => JSX.Element;
+export declare const RangeWithTwoGrids: () => JSX.Element;

package/date-picker/index.cjs

@@ -18,6 +18,7 @@ const datePickerMonthCell = require('./date-picker-month-cell.cjs');
 const datePickerMonthCellTrigger = require('./date-picker-month-cell-trigger.cjs');
 const datePickerMonthSelect = require('./date-picker-month-select.cjs');
 const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
+const datePickerPositioner = require('./date-picker-positioner.cjs');
 const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
 const datePickerRow = require('./date-picker-row.cjs');
 const datePickerRowGroup = require('./date-picker-row-group.cjs');
@@ -29,9 +30,32 @@ const datePickerYearCellTrigger = require('./date-picker-year-cell-trigger.cjs')
 const datePickerYearSelect = require('./date-picker-year-select.cjs');
 const datePicker_anatomy = require('./date-picker.anatomy.cjs');
 
+const DatePicker = Object.assign(datePicker.DatePicker, {
+  Root: datePicker.DatePicker,
+  ClearTrigger: datePickerClearTrigger.DatePickerClearTrigger,
+  ColumnHeader: datePickerColumnHeader.DatePickerColumnHeader,
+  Content: datePickerContent.DatePickerContent,
+  Control: datePickerControl.DatePickerControl,
+  DayCell: datePickerDayCell.DatePickerDayCell,
+  DayCellTrigger: datePickerDayCellTrigger.DatePickerDayCellTrigger,
+  Grid: datePickerGrid.DatePickerGrid,
+  Input: datePickerInput.DatePickerInput,
+  MonthCell: datePickerMonthCell.DatePickerMonthCell,
+  MonthCellTrigger: datePickerMonthCellTrigger.DatePickerMonthCellTrigger,
+  MonthSelect: datePickerMonthSelect.DatePickerMonthSelect,
+  NextTrigger: datePickerNextTrigger.DatePickerNextTrigger,
+  Positioner: datePickerPositioner.DatePickerPositioner,
+  PrevTrigger: datePickerPrevTrigger.DatePickerPrevTrigger,
+  Row: datePickerRow.DatePickerRow,
+  RowGroup: datePickerRowGroup.DatePickerRowGroup,
+  RowHeader: datePickerRowHeader.DatePickerRowHeader,
+  Trigger: datePickerTrigger.DatePickerTrigger,
+  ViewTrigger: datePickerViewTrigger.DatePickerViewTrigger,
+  YearCell: datePickerYearCell.DatePickerYearCell,
+  YearCellTrigger: datePickerYearCellTrigger.DatePickerYearCellTrigger,
+  YearSelect: datePickerYearSelect.DatePickerYearSelect
+});
 
-
-exports.DatePicker = datePicker.DatePicker;
 exports.useDatePickerCellContext = datePickerCellContext.useDatePickerCellContext;
 exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
 exports.DatePickerColumnHeader = datePickerColumnHeader.DatePickerColumnHeader;
@@ -47,6 +71,7 @@ exports.DatePickerMonthCell = datePickerMonthCell.DatePickerMonthCell;
 exports.DatePickerMonthCellTrigger = datePickerMonthCellTrigger.DatePickerMonthCellTrigger;
 exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
 exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
+exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
 exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
 exports.DatePickerRow = datePickerRow.DatePickerRow;
 exports.DatePickerRowGroup = datePickerRowGroup.DatePickerRowGroup;
@@ -57,3 +82,4 @@ exports.DatePickerYearCell = datePickerYearCell.DatePickerYearCell;
 exports.DatePickerYearCellTrigger = datePickerYearCellTrigger.DatePickerYearCellTrigger;
 exports.DatePickerYearSelect = datePickerYearSelect.DatePickerYearSelect;
 exports.datePickerAnatomy = datePicker_anatomy.datePickerAnatomy;
+exports.DatePicker = DatePicker;