@ark-ui/react 1.2.1 → 2.0.0

package/combobox/combobox-positioner.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const comboboxContext = require('./combobox-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const comboboxContext = require('./combobox-context.cjs');
 
 const ComboboxPositioner = react.forwardRef(
   (props, ref) => {

package/combobox/combobox-positioner.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useComboboxContext } from './combobox-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxPositioner = forwardRef(
   (props, ref) => {

package/combobox/{combobox.cjs → combobox-root.cjs}

@@ -8,13 +8,12 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const useCombobox = require('./use-combobox.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
 const ComboboxImpl = (props, ref) => {
   const [presenceProps, comboboxProps] = splitPresenceProps.splitPresenceProps(props);
@@ -66,6 +65,6 @@ const ComboboxImpl = (props, ref) => {
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(comboboxContext.ComboboxProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 };
-const Combobox = react.forwardRef(ComboboxImpl);
+const ComboboxRoot = react.forwardRef(ComboboxImpl);
 
-exports.Combobox = Combobox;
+exports.ComboboxRoot = ComboboxRoot;

package/combobox/{combobox.d.ts → combobox-root.d.ts}

@@ -3,11 +3,11 @@ import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';
 import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
-export interface ComboboxProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface ComboboxRootProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseComboboxReturn<T>) => ReactNode);
 }>, UseComboboxProps<T>>, UsePresenceProps {
 }
 export interface ComboboxComponent {
-    <T extends CollectionItem>(props: ComboboxProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+    <T extends CollectionItem>(props: ComboboxRootProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;
 }
-export declare const Combobox: ComboboxComponent;
+export declare const ComboboxRoot: ComboboxComponent;

package/combobox/{combobox.mjs → combobox-root.mjs}

@@ -4,13 +4,12 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { ComboboxProvider } from './combobox-context.mjs';
 import { useCombobox } from './use-combobox.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const ComboboxImpl = (props, ref) => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
@@ -62,6 +61,6 @@ const ComboboxImpl = (props, ref) => {
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(ComboboxProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 };
-const Combobox = forwardRef(ComboboxImpl);
+const ComboboxRoot = forwardRef(ComboboxImpl);
 
-export { Combobox };
+export { ComboboxRoot };

package/combobox/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox = require('./combobox.cjs');
 const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
@@ -16,10 +15,11 @@ const comboboxItemIndicator = require('./combobox-item-indicator.cjs');
 const comboboxItemText = require('./combobox-item-text.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
+const comboboxRoot = require('./combobox-root.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
 
-const Combobox = Object.assign(combobox.Combobox, {
-  Root: combobox.Combobox,
+const Combobox = {
+  Root: comboboxRoot.ComboboxRoot,
   ClearTrigger: comboboxClearTrigger.ComboboxClearTrigger,
   Content: comboboxContent.ComboboxContent,
   Control: comboboxControl.ComboboxControl,
@@ -32,7 +32,7 @@ const Combobox = Object.assign(combobox.Combobox, {
   Label: comboboxLabel.ComboboxLabel,
   Positioner: comboboxPositioner.ComboboxPositioner,
   Trigger: comboboxTrigger.ComboboxTrigger
-});
+};
 
 exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
@@ -46,5 +46,6 @@ exports.ComboboxItemIndicator = comboboxItemIndicator.ComboboxItemIndicator;
 exports.ComboboxItemText = comboboxItemText.ComboboxItemText;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
+exports.ComboboxRoot = comboboxRoot.ComboboxRoot;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 exports.Combobox = Combobox;

package/combobox/index.d.ts

@@ -1,7 +1,7 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails } from '@zag-js/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, type ComboboxContext } from './combobox-context';
@@ -14,8 +14,9 @@ import { ComboboxItemIndicator, type ComboboxItemIndicatorProps } from './combob
 import { ComboboxItemText, type ComboboxItemTextProps } from './combobox-item-text';
 import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
 import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
+import { ComboboxComponent, ComboboxRoot, type ComboboxRootProps } from './combobox-root';
 import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
-declare const Combobox: ComboboxComponent & {
+export declare const Combobox: {
     Root: ComboboxComponent;
     ClearTrigger: ForwardRefExoticComponent<ComboboxClearTriggerProps & RefAttributes<HTMLButtonElement>>;
     Content: ForwardRefExoticComponent<ComboboxContentProps & RefAttributes<HTMLDivElement>>;
@@ -30,5 +31,5 @@ declare const Combobox: ComboboxComponent & {
     Positioner: ForwardRefExoticComponent<ComboboxPositionerProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ComboboxTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, useComboboxContext, };
-export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };
+export { ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, useComboboxContext, };
+export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxHighlightChangeDetails, ComboboxInputProps, ComboboxInputValueChangeDetails, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxOpenChangeDetails, ComboboxPositionerProps, ComboboxRootProps, ComboboxTriggerProps, ComboboxValueChangeDetails, };

package/combobox/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-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';
@@ -12,10 +11,11 @@ import { ComboboxItemIndicator } from './combobox-item-indicator.mjs';
 import { ComboboxItemText } from './combobox-item-text.mjs';
 import { ComboboxLabel } from './combobox-label.mjs';
 import { ComboboxPositioner } from './combobox-positioner.mjs';
+import { ComboboxRoot } from './combobox-root.mjs';
 import { ComboboxTrigger } from './combobox-trigger.mjs';
 
-const Combobox = Object.assign(Combobox$1, {
-  Root: Combobox$1,
+const Combobox = {
+  Root: ComboboxRoot,
   ClearTrigger: ComboboxClearTrigger,
   Content: ComboboxContent,
   Control: ComboboxControl,
@@ -28,6 +28,6 @@ const Combobox = Object.assign(Combobox$1, {
   Label: ComboboxLabel,
   Positioner: ComboboxPositioner,
   Trigger: ComboboxTrigger
-});
+};
 
-export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger };
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger };

package/combobox/{combobox.stories.d.ts → stories/combobox.stories.d.ts}

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

package/combobox/tests/basic.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react/jsx-runtime';
+import { type ComboboxRootProps } from '../';
+import type { Optional } from '../../types';
+interface Item {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export declare const ComponentUnderTest: (props: Optional<ComboboxRootProps<Item>, 'items'>) => JSX.Element;
+export {};

package/combobox/use-combobox.cjs

@@ -7,9 +7,8 @@ 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 useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/combobox/use-combobox.mjs

@@ -3,9 +3,8 @@ import * as combobox from '@zag-js/combobox';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useMemo, useId } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useCombobox = (props) => {
   const [collectionOptions, comboboxProps] = createSplitProps()(props, [

package/date-picker/date-picker-content.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const datePickerContext = require('./date-picker-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerContent = react.forwardRef(
   (props, ref) => {

package/date-picker/date-picker-content.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useDatePickerContext } from './date-picker-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerContent = forwardRef(
   (props, ref) => {

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

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const datePickerContext = require('./date-picker-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerPositioner = react.forwardRef(
   (props, ref) => {

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

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useDatePickerContext } from './date-picker-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerPositioner = forwardRef(
   (props, ref) => {

package/date-picker/{date-picker.cjs → date-picker-root.cjs}

@@ -8,15 +8,14 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 const useDatePicker = require('./use-date-picker.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
 
-const DatePicker = react.forwardRef((props, ref) => {
+const DatePickerRoot = react.forwardRef((props, ref) => {
   const [presenceProps, datePickerProps] = splitPresenceProps.splitPresenceProps(props);
   const [useDatePickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     datePickerProps,
@@ -61,6 +60,6 @@ const DatePicker = react.forwardRef((props, ref) => {
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(datePickerContext.DatePickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 });
-DatePicker.displayName = "DatePicker";
+DatePickerRoot.displayName = "DatePickerRoot";
 
-exports.DatePicker = DatePicker;
+exports.DatePickerRoot = DatePickerRoot;

package/date-picker/{date-picker.d.ts → date-picker-root.d.ts}

@@ -3,8 +3,8 @@ import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import { type Assign } from '../types';
 import { type UseDatePickerProps, type UseDatePickerReturn } from './use-date-picker';
-export interface DatePickerProps extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface DatePickerRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseDatePickerReturn) => ReactNode);
 }>, UseDatePickerProps>, UsePresenceProps {
 }
-export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+export declare const DatePickerRoot: ForwardRefExoticComponent<DatePickerRootProps & RefAttributes<HTMLDivElement>>;

package/date-picker/{date-picker.mjs → date-picker-root.mjs}

@@ -4,15 +4,14 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { DatePickerProvider } from './date-picker-context.mjs';
 import { useDatePicker } from './use-date-picker.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
 
-const DatePicker = forwardRef((props, ref) => {
+const DatePickerRoot = forwardRef((props, ref) => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
   const [useDatePickerProps, { children, ...localProps }] = createSplitProps()(
     datePickerProps,
@@ -57,6 +56,6 @@ const DatePicker = forwardRef((props, ref) => {
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(DatePickerProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 });
-DatePicker.displayName = "DatePicker";
+DatePickerRoot.displayName = "DatePickerRoot";
 
-export { DatePicker };
+export { DatePickerRoot };

package/date-picker/index.cjs

@@ -3,7 +3,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const datePicker = require('./date-picker.cjs');
 const datePickerClearTrigger = require('./date-picker-clear-trigger.cjs');
 const datePickerContent = require('./date-picker-content.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
@@ -15,6 +14,7 @@ const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
 const datePickerPositioner = require('./date-picker-positioner.cjs');
 const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
 const datePickerRangeText = require('./date-picker-range-text.cjs');
+const datePickerRoot = require('./date-picker-root.cjs');
 const datePickerTable = require('./date-picker-table.cjs');
 const datePickerTableBody = require('./date-picker-table-body.cjs');
 const datePickerTableCell = require('./date-picker-table-cell.cjs');
@@ -31,8 +31,8 @@ const datePickerViewControl = require('./date-picker-view-control.cjs');
 const datePickerViewTrigger = require('./date-picker-view-trigger.cjs');
 const datePickerYearSelect = require('./date-picker-year-select.cjs');
 
-const DatePicker = Object.assign(datePicker.DatePicker, {
-  Root: datePicker.DatePicker,
+const DatePicker = {
+  Root: datePickerRoot.DatePickerRoot,
   ClearTrigger: datePickerClearTrigger.DatePickerClearTrigger,
   Content: datePickerContent.DatePickerContent,
   Control: datePickerControl.DatePickerControl,
@@ -55,7 +55,7 @@ const DatePicker = Object.assign(datePicker.DatePicker, {
   ViewControl: datePickerViewControl.DatePickerViewControl,
   ViewTrigger: datePickerViewTrigger.DatePickerViewTrigger,
   YearSelect: datePickerYearSelect.DatePickerYearSelect
-});
+};
 
 exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
 exports.DatePickerContent = datePickerContent.DatePickerContent;
@@ -68,6 +68,7 @@ exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
 exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
 exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
 exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
+exports.DatePickerRoot = datePickerRoot.DatePickerRoot;
 exports.DatePickerTable = datePickerTable.DatePickerTable;
 exports.DatePickerTableBody = datePickerTableBody.DatePickerTableBody;
 exports.DatePickerTableCell = datePickerTableCell.DatePickerTableCell;

package/date-picker/index.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type DatePickerProps } from './date-picker';
+import type { FocusChangeDetails as DatePickerFocusChangeDetails, OpenChangeDetails as DatePickerOpenChangeDetails, ValueChangeDetails as DatePickerValueChangeDetails, ViewChangeDetails as DatePickerViewChangeDetails } from '@zag-js/date-picker';
 import { DatePickerClearTrigger, type DatePickerClearTriggerProps } from './date-picker-clear-trigger';
 import { DatePickerContent, type DatePickerContentProps } from './date-picker-content';
 import { useDatePickerContext, type DatePickerContext } from './date-picker-context';
@@ -12,6 +12,7 @@ import { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-p
 import { DatePickerPositioner, type DatePickerPositionerProps } from './date-picker-positioner';
 import { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
 import { DatePickerRangeText, type DatePickerRangeTextProps } from './date-picker-range-text';
+import { DatePickerRoot, type DatePickerRootProps } from './date-picker-root';
 import { DatePickerTable, type DatePickerTableProps } from './date-picker-table';
 import { DatePickerTableBody, type DatePickerTableBodyProps } from './date-picker-table-body';
 import { DatePickerTableCell, type DatePickerTableCellProps } from './date-picker-table-cell';
@@ -27,8 +28,8 @@ import { useDatePickerViewContext, type DatePickerViewContext } from './date-pic
 import { DatePickerViewControl, type DatePickerViewControlProps } from './date-picker-view-control';
 import { DatePickerViewTrigger, type DatePickerViewTriggerProps } from './date-picker-view-trigger';
 import { DatePickerYearSelect, type DatePickerYearSelectProps } from './date-picker-year-select';
-declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: {
+    Root: ForwardRefExoticComponent<DatePickerRootProps & RefAttributes<HTMLDivElement>>;
     ClearTrigger: ForwardRefExoticComponent<DatePickerClearTriggerProps & RefAttributes<HTMLButtonElement>>;
     Content: ForwardRefExoticComponent<DatePickerContentProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<DatePickerControlProps & RefAttributes<HTMLDivElement>>;
@@ -52,5 +53,5 @@ declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttribu
     ViewTrigger: ForwardRefExoticComponent<DatePickerViewTriggerProps & RefAttributes<HTMLButtonElement>>;
     YearSelect: ForwardRefExoticComponent<DatePickerYearSelectProps & RefAttributes<HTMLSelectElement>>;
 };
-export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
-export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerProps, DatePickerRangeTextProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };
+export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
+export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerFocusChangeDetails, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerOpenChangeDetails, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerRangeTextProps, DatePickerRootProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };

package/date-picker/index.mjs

@@ -1,5 +1,4 @@
 'use client';
-import { DatePicker as DatePicker$1 } from './date-picker.mjs';
 import { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
 import { DatePickerContent } from './date-picker-content.mjs';
 export { useDatePickerContext } from './date-picker-context.mjs';
@@ -11,6 +10,7 @@ import { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
 import { DatePickerPositioner } from './date-picker-positioner.mjs';
 import { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
 import { DatePickerRangeText } from './date-picker-range-text.mjs';
+import { DatePickerRoot } from './date-picker-root.mjs';
 import { DatePickerTable } from './date-picker-table.mjs';
 import { DatePickerTableBody } from './date-picker-table-body.mjs';
 import { DatePickerTableCell } from './date-picker-table-cell.mjs';
@@ -27,8 +27,8 @@ import { DatePickerViewControl } from './date-picker-view-control.mjs';
 import { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
 import { DatePickerYearSelect } from './date-picker-year-select.mjs';
 
-const DatePicker = Object.assign(DatePicker$1, {
-  Root: DatePicker$1,
+const DatePicker = {
+  Root: DatePickerRoot,
   ClearTrigger: DatePickerClearTrigger,
   Content: DatePickerContent,
   Control: DatePickerControl,
@@ -51,6 +51,6 @@ const DatePicker = Object.assign(DatePicker$1, {
   ViewControl: DatePickerViewControl,
   ViewTrigger: DatePickerViewTrigger,
   YearSelect: DatePickerYearSelect
-});
+};
 
-export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect };
+export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect };

package/date-picker/{date-picker.stories.d.ts → stories/date-picker.stories.d.ts}

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

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

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

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type DatePickerRootProps } from '../';
+export declare const ComponentUnderTest: (props: DatePickerRootProps) => JSX.Element;

package/date-picker/use-date-picker.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const datePicker = require('@zag-js/date-picker');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-require('../environment/index.cjs');
-const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/date-picker/use-date-picker.mjs

@@ -2,9 +2,8 @@
 import * as datePicker from '@zag-js/date-picker';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
-import '../environment/index.mjs';
-import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
+import { useEvent } from '../use-event.mjs';
 
 const useDatePicker = (props = {}) => {
   const initialContext = {

package/dialog/dialog-backdrop.cjs

@@ -7,10 +7,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const dialogContext = require('./dialog-context.cjs');
 const presencePropsContext = require('../presence/presence-props-context.cjs');
 const usePresence = require('../presence/use-presence.cjs');
+const dialogContext = require('./dialog-context.cjs');
 
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-backdrop.mjs

@@ -3,10 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useDialogContext } from './dialog-context.mjs';
 import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
+import { useDialogContext } from './dialog-context.mjs';
 
 const DialogBackdrop = forwardRef((props, ref) => {
   const api = useDialogContext();

package/dialog/dialog-content.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const dialogContext = require('./dialog-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const dialogContext = require('./dialog-context.cjs');
 
 const DialogContent = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-content.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useDialogContext } from './dialog-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useDialogContext } from './dialog-context.mjs';
 
 const DialogContent = forwardRef((props, ref) => {
   const api = useDialogContext();

package/dialog/dialog-positioner.cjs

@@ -7,9 +7,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const dialogContext = require('./dialog-context.cjs');
 const presenceContext = require('../presence/presence-context.cjs');
+const dialogContext = require('./dialog-context.cjs');
 
 const DialogPositioner = react.forwardRef((props, ref) => {
   const api = dialogContext.useDialogContext();

package/dialog/dialog-positioner.mjs

@@ -3,9 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useDialogContext } from './dialog-context.mjs';
 import { usePresenceContext } from '../presence/presence-context.mjs';
+import { useDialogContext } from './dialog-context.mjs';
 
 const DialogPositioner = forwardRef((props, ref) => {
   const api = useDialogContext();