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

package/date-picker/date-picker.mjs

@@ -1,15 +1,56 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import 'react';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { DatePickerProvider } from './date-picker-context.mjs';
 import { useDatePicker } from './use-date-picker.mjs';
 
-const DatePicker = (props) => {
-  const { children, ...useDatePickerProps } = props;
-  const datePicker = useDatePicker(useDatePickerProps);
-  const view = runIfFn(children, datePicker);
-  return /* @__PURE__ */ jsx(DatePickerProvider, { value: datePicker, children: view });
-};
+const DatePicker = forwardRef((props, ref) => {
+  const [datePickerProps, { children, ...localProps }] = createSplitProps()(
+    props,
+    [
+      "defaultValue",
+      "dir",
+      "disabled",
+      "fixedWeeks",
+      "focusedValue",
+      "format",
+      "getRootNode",
+      "id",
+      "ids",
+      "inline",
+      "isDateUnavailable",
+      "isDateUnavailable",
+      "locale",
+      "max",
+      "messages",
+      "min",
+      "modal",
+      "name",
+      "numOfMonths",
+      "onFocusChange",
+      "onOpenChange",
+      "onValueChange",
+      "onViewChange",
+      "open",
+      "parse",
+      "positioning",
+      "readOnly",
+      "selectionMode",
+      "startOfWeek",
+      "timeZone",
+      "value",
+      "view"
+    ]
+  );
+  const api = useDatePicker(datePickerProps);
+  const view = runIfFn(children, api);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(DatePickerProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+DatePicker.displayName = "DatePicker";
 
 export { DatePicker };

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

@@ -5,5 +5,3 @@ 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

@@ -4,83 +4,83 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const datePicker = require('./date-picker.cjs');
-const datePickerCellContext = require('./date-picker-cell-context.cjs');
 const datePickerClearTrigger = require('./date-picker-clear-trigger.cjs');
-const datePickerColumnHeader = require('./date-picker-column-header.cjs');
 const datePickerContent = require('./date-picker-content.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 const datePickerControl = require('./date-picker-control.cjs');
-const datePickerDayCell = require('./date-picker-day-cell.cjs');
-const datePickerDayCellContext = require('./date-picker-day-cell-context.cjs');
-const datePickerDayCellTrigger = require('./date-picker-day-cell-trigger.cjs');
-const datePickerGrid = require('./date-picker-grid.cjs');
 const datePickerInput = require('./date-picker-input.cjs');
-const datePickerMonthCell = require('./date-picker-month-cell.cjs');
-const datePickerMonthCellTrigger = require('./date-picker-month-cell-trigger.cjs');
+const datePickerLabel = require('./date-picker-label.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');
-const datePickerRowHeader = require('./date-picker-row-header.cjs');
+const datePickerRangeText = require('./date-picker-range-text.cjs');
+const datePickerTable = require('./date-picker-table.cjs');
+const datePickerTableBody = require('./date-picker-table-body.cjs');
+const datePickerTableCell = require('./date-picker-table-cell.cjs');
+const datePickerTableCellContext = require('./date-picker-table-cell-context.cjs');
+const datePickerTableCellTrigger = require('./date-picker-table-cell-trigger.cjs');
+const datePickerTableContext = require('./date-picker-table-context.cjs');
+const datePickerTableHead = require('./date-picker-table-head.cjs');
+const datePickerTableHeader = require('./date-picker-table-header.cjs');
+const datePickerTableRow = require('./date-picker-table-row.cjs');
 const datePickerTrigger = require('./date-picker-trigger.cjs');
+const datePickerView = require('./date-picker-view.cjs');
+const datePickerViewContext = require('./date-picker-view-context.cjs');
+const datePickerViewControl = require('./date-picker-view-control.cjs');
 const datePickerViewTrigger = require('./date-picker-view-trigger.cjs');
-const datePickerYearCell = require('./date-picker-year-cell.cjs');
-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,
+  Label: datePickerLabel.DatePickerLabel,
   MonthSelect: datePickerMonthSelect.DatePickerMonthSelect,
   NextTrigger: datePickerNextTrigger.DatePickerNextTrigger,
   Positioner: datePickerPositioner.DatePickerPositioner,
   PrevTrigger: datePickerPrevTrigger.DatePickerPrevTrigger,
-  Row: datePickerRow.DatePickerRow,
-  RowGroup: datePickerRowGroup.DatePickerRowGroup,
-  RowHeader: datePickerRowHeader.DatePickerRowHeader,
+  RangeText: datePickerRangeText.DatePickerRangeText,
+  Table: datePickerTable.DatePickerTable,
+  TableBody: datePickerTableBody.DatePickerTableBody,
+  TableCell: datePickerTableCell.DatePickerTableCell,
+  TableCellTrigger: datePickerTableCellTrigger.DatePickerTableCellTrigger,
+  TableHead: datePickerTableHead.DatePickerTableHead,
+  TableHeader: datePickerTableHeader.DatePickerTableHeader,
+  TableRow: datePickerTableRow.DatePickerTableRow,
   Trigger: datePickerTrigger.DatePickerTrigger,
+  View: datePickerView.DatePickerView,
+  ViewControl: datePickerViewControl.DatePickerViewControl,
   ViewTrigger: datePickerViewTrigger.DatePickerViewTrigger,
-  YearCell: datePickerYearCell.DatePickerYearCell,
-  YearCellTrigger: datePickerYearCellTrigger.DatePickerYearCellTrigger,
   YearSelect: datePickerYearSelect.DatePickerYearSelect
 });
 
-exports.useDatePickerCellContext = datePickerCellContext.useDatePickerCellContext;
 exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
-exports.DatePickerColumnHeader = datePickerColumnHeader.DatePickerColumnHeader;
 exports.DatePickerContent = datePickerContent.DatePickerContent;
 exports.useDatePickerContext = datePickerContext.useDatePickerContext;
 exports.DatePickerControl = datePickerControl.DatePickerControl;
-exports.DatePickerDayCell = datePickerDayCell.DatePickerDayCell;
-exports.useDatePickerDayCellContext = datePickerDayCellContext.useDatePickerDayCellContext;
-exports.DatePickerDayCellTrigger = datePickerDayCellTrigger.DatePickerDayCellTrigger;
-exports.DatePickerGrid = datePickerGrid.DatePickerGrid;
 exports.DatePickerInput = datePickerInput.DatePickerInput;
-exports.DatePickerMonthCell = datePickerMonthCell.DatePickerMonthCell;
-exports.DatePickerMonthCellTrigger = datePickerMonthCellTrigger.DatePickerMonthCellTrigger;
+exports.DatePickerLabel = datePickerLabel.DatePickerLabel;
 exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
 exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
 exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
 exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
-exports.DatePickerRow = datePickerRow.DatePickerRow;
-exports.DatePickerRowGroup = datePickerRowGroup.DatePickerRowGroup;
-exports.DatePickerRowHeader = datePickerRowHeader.DatePickerRowHeader;
+exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
+exports.DatePickerTable = datePickerTable.DatePickerTable;
+exports.DatePickerTableBody = datePickerTableBody.DatePickerTableBody;
+exports.DatePickerTableCell = datePickerTableCell.DatePickerTableCell;
+exports.useDatePickerTableCellContext = datePickerTableCellContext.useDatePickerTableCellContext;
+exports.DatePickerTableCellTrigger = datePickerTableCellTrigger.DatePickerTableCellTrigger;
+exports.useDatePickerTableContext = datePickerTableContext.useDatePickerTableContext;
+exports.DatePickerTableHead = datePickerTableHead.DatePickerTableHead;
+exports.DatePickerTableHeader = datePickerTableHeader.DatePickerTableHeader;
+exports.DatePickerTableRow = datePickerTableRow.DatePickerTableRow;
 exports.DatePickerTrigger = datePickerTrigger.DatePickerTrigger;
+exports.DatePickerView = datePickerView.DatePickerView;
+exports.useDatePickerViewContext = datePickerViewContext.useDatePickerViewContext;
+exports.DatePickerViewControl = datePickerViewControl.DatePickerViewControl;
 exports.DatePickerViewTrigger = datePickerViewTrigger.DatePickerViewTrigger;
-exports.DatePickerYearCell = datePickerYearCell.DatePickerYearCell;
-exports.DatePickerYearCellTrigger = datePickerYearCellTrigger.DatePickerYearCellTrigger;
 exports.DatePickerYearSelect = datePickerYearSelect.DatePickerYearSelect;
-exports.datePickerAnatomy = datePicker_anatomy.datePickerAnatomy;
 exports.DatePicker = DatePicker;

package/date-picker/index.d.ts

@@ -1,91 +1,56 @@
-import { DayCellProps, GridProps, CellProps, ViewProps } from '@zag-js/date-picker';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type DatePickerProps } from './date-picker';
-import { useDatePickerCellContext } from './date-picker-cell-context';
 import { DatePickerClearTrigger, type DatePickerClearTriggerProps } from './date-picker-clear-trigger';
-import { DatePickerColumnHeader, type DatePickerColumnHeaderProps } from './date-picker-column-header';
 import { DatePickerContent, type DatePickerContentProps } from './date-picker-content';
-import { useDatePickerContext } from './date-picker-context';
+import { useDatePickerContext, type DatePickerContext } from './date-picker-context';
 import { DatePickerControl, type DatePickerControlProps } from './date-picker-control';
-import { DatePickerDayCell, type DatePickerDayCellProps } from './date-picker-day-cell';
-import { useDatePickerDayCellContext } from './date-picker-day-cell-context';
-import { DatePickerDayCellTrigger, type DatePickerDayCellTriggerProps } from './date-picker-day-cell-trigger';
-import { DatePickerGrid, type DatePickerGridProps } from './date-picker-grid';
 import { DatePickerInput, type DatePickerInputProps } from './date-picker-input';
-import { DatePickerMonthCell, type DatePickerMonthCellProps } from './date-picker-month-cell';
-import { DatePickerMonthCellTrigger, type DatePickerMonthCellTriggerProps } from './date-picker-month-cell-trigger';
+import { DatePickerLabel, type DatePickerLabelProps } from './date-picker-label';
 import { DatePickerMonthSelect, type DatePickerMonthSelectProps } from './date-picker-month-select';
 import { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-picker-next-trigger';
 import { DatePickerPositioner, type DatePickerPositionerProps } from './date-picker-positioner';
 import { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
-import { DatePickerRow, type DatePickerRowProps } from './date-picker-row';
-import { DatePickerRowGroup, type DatePickerRowGroupProps } from './date-picker-row-group';
-import { DatePickerRowHeader, type DatePickerRowHeaderProps } from './date-picker-row-header';
+import { DatePickerRangeText, type DatePickerRangeTextProps } from './date-picker-range-text';
+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';
+import { useDatePickerTableCellContext, type DatePickerTableCellContext } from './date-picker-table-cell-context';
+import { DatePickerTableCellTrigger, type DatePickerTableCellTriggerProps } from './date-picker-table-cell-trigger';
+import { useDatePickerTableContext, type DatePickerTableContext } from './date-picker-table-context';
+import { DatePickerTableHead, type DatePickerTableHeadProps } from './date-picker-table-head';
+import { DatePickerTableHeader, type DatePickerTableHeaderProps } from './date-picker-table-header';
+import { DatePickerTableRow, type DatePickerTableRowProps } from './date-picker-table-row';
 import { DatePickerTrigger, type DatePickerTriggerProps } from './date-picker-trigger';
+import { DatePickerView, type DatePickerViewProps } from './date-picker-view';
+import { useDatePickerViewContext, type DatePickerViewContext } from './date-picker-view-context';
+import { DatePickerViewControl, type DatePickerViewControlProps } from './date-picker-view-control';
 import { DatePickerViewTrigger, type DatePickerViewTriggerProps } from './date-picker-view-trigger';
-import { DatePickerYearCell, type DatePickerYearCellProps } from './date-picker-year-cell';
-import { DatePickerYearCellTrigger, type DatePickerYearCellTriggerProps } from './date-picker-year-cell-trigger';
 import { DatePickerYearSelect, type DatePickerYearSelectProps } from './date-picker-year-select';
-import { datePickerAnatomy } from './date-picker.anatomy';
-declare const DatePicker: ((props: DatePickerProps) => JSX.Element) & {
-    Root: (props: DatePickerProps) => JSX.Element;
-    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    ColumnHeader: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    DayCell: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof DayCellProps> & DayCellProps & RefAttributes<HTMLDivElement>>;
-    DayCellTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Grid: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof GridProps> & GridProps & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLInputElement>>;
-    MonthCell: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof CellProps> & CellProps & RefAttributes<HTMLDivElement>>;
-    MonthCellTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    MonthSelect: ForwardRefExoticComponent<Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSelectElement>>;
-    NextTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    PrevTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, "view"> & ViewProps & RefAttributes<HTMLButtonElement>>;
-    Row: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    RowGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    RowHeader: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    ViewTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, "view"> & ViewProps & RefAttributes<HTMLButtonElement>>;
-    YearCell: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof CellProps> & CellProps & RefAttributes<HTMLDivElement>>;
-    YearCellTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    YearSelect: ForwardRefExoticComponent<Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSelectElement>>;
+declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+    ClearTrigger: ForwardRefExoticComponent<DatePickerClearTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<DatePickerContentProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<DatePickerControlProps & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<DatePickerInputProps & RefAttributes<HTMLInputElement>>;
+    Label: ForwardRefExoticComponent<DatePickerLabelProps & RefAttributes<HTMLLabelElement>>;
+    MonthSelect: ForwardRefExoticComponent<DatePickerMonthSelectProps & RefAttributes<HTMLSelectElement>>;
+    NextTrigger: ForwardRefExoticComponent<DatePickerNextTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Positioner: ForwardRefExoticComponent<DatePickerPositionerProps & RefAttributes<HTMLDivElement>>;
+    PrevTrigger: ForwardRefExoticComponent<DatePickerPrevTriggerProps & RefAttributes<HTMLButtonElement>>;
+    RangeText: ForwardRefExoticComponent<DatePickerRangeTextProps & RefAttributes<HTMLDivElement>>;
+    Table: ForwardRefExoticComponent<DatePickerTableProps & RefAttributes<HTMLTableElement>>;
+    TableBody: ForwardRefExoticComponent<DatePickerTableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+    TableCell: ForwardRefExoticComponent<DatePickerTableCellProps & RefAttributes<HTMLTableCellElement>>;
+    TableCellTrigger: ForwardRefExoticComponent<DatePickerTableCellTriggerProps & RefAttributes<HTMLButtonElement>>;
+    TableHead: ForwardRefExoticComponent<DatePickerTableHeadProps & RefAttributes<HTMLTableSectionElement>>;
+    TableHeader: ForwardRefExoticComponent<DatePickerTableHeaderProps & RefAttributes<HTMLTableCellElement>>;
+    TableRow: ForwardRefExoticComponent<DatePickerTableRowProps & RefAttributes<HTMLTableRowElement>>;
+    Trigger: ForwardRefExoticComponent<DatePickerTriggerProps & RefAttributes<HTMLButtonElement>>;
+    View: ForwardRefExoticComponent<DatePickerViewProps & RefAttributes<HTMLDivElement>>;
+    ViewControl: ForwardRefExoticComponent<DatePickerViewControlProps & RefAttributes<HTMLDivElement>>;
+    ViewTrigger: ForwardRefExoticComponent<DatePickerViewTriggerProps & RefAttributes<HTMLButtonElement>>;
+    YearSelect: ForwardRefExoticComponent<DatePickerYearSelectProps & RefAttributes<HTMLSelectElement>>;
 };
-export { DatePicker, DatePickerClearTrigger, DatePickerColumnHeader, DatePickerContent, DatePickerControl, DatePickerDayCell, DatePickerDayCellTrigger, DatePickerGrid, DatePickerInput, DatePickerMonthCell, DatePickerMonthCellTrigger, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRow, DatePickerRowGroup, DatePickerRowHeader, DatePickerTrigger, DatePickerViewTrigger, DatePickerYearCell, DatePickerYearCellTrigger, DatePickerYearSelect, datePickerAnatomy, useDatePickerCellContext, useDatePickerContext, useDatePickerDayCellContext, };
-export type { DatePickerClearTriggerProps, DatePickerColumnHeaderProps, DatePickerContentProps, DatePickerControlProps, DatePickerDayCellProps, DatePickerDayCellTriggerProps, DatePickerGridProps, DatePickerInputProps, DatePickerMonthCellProps, DatePickerMonthCellTriggerProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerProps, DatePickerRowGroupProps, DatePickerRowHeaderProps, DatePickerRowProps, DatePickerTriggerProps, DatePickerViewTriggerProps, DatePickerYearCellProps, DatePickerYearCellTriggerProps, DatePickerYearSelectProps, };
+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, };

package/date-picker/index.mjs

@@ -1,56 +1,56 @@
 'use client';
 import { DatePicker as DatePicker$1 } from './date-picker.mjs';
-export { useDatePickerCellContext } from './date-picker-cell-context.mjs';
 import { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
-import { DatePickerColumnHeader } from './date-picker-column-header.mjs';
 import { DatePickerContent } from './date-picker-content.mjs';
 export { useDatePickerContext } from './date-picker-context.mjs';
 import { DatePickerControl } from './date-picker-control.mjs';
-import { DatePickerDayCell } from './date-picker-day-cell.mjs';
-export { useDatePickerDayCellContext } from './date-picker-day-cell-context.mjs';
-import { DatePickerDayCellTrigger } from './date-picker-day-cell-trigger.mjs';
-import { DatePickerGrid } from './date-picker-grid.mjs';
 import { DatePickerInput } from './date-picker-input.mjs';
-import { DatePickerMonthCell } from './date-picker-month-cell.mjs';
-import { DatePickerMonthCellTrigger } from './date-picker-month-cell-trigger.mjs';
+import { DatePickerLabel } from './date-picker-label.mjs';
 import { DatePickerMonthSelect } from './date-picker-month-select.mjs';
 import { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
 import { DatePickerPositioner } from './date-picker-positioner.mjs';
 import { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
-import { DatePickerRow } from './date-picker-row.mjs';
-import { DatePickerRowGroup } from './date-picker-row-group.mjs';
-import { DatePickerRowHeader } from './date-picker-row-header.mjs';
+import { DatePickerRangeText } from './date-picker-range-text.mjs';
+import { DatePickerTable } from './date-picker-table.mjs';
+import { DatePickerTableBody } from './date-picker-table-body.mjs';
+import { DatePickerTableCell } from './date-picker-table-cell.mjs';
+export { useDatePickerTableCellContext } from './date-picker-table-cell-context.mjs';
+import { DatePickerTableCellTrigger } from './date-picker-table-cell-trigger.mjs';
+export { useDatePickerTableContext } from './date-picker-table-context.mjs';
+import { DatePickerTableHead } from './date-picker-table-head.mjs';
+import { DatePickerTableHeader } from './date-picker-table-header.mjs';
+import { DatePickerTableRow } from './date-picker-table-row.mjs';
 import { DatePickerTrigger } from './date-picker-trigger.mjs';
+import { DatePickerView } from './date-picker-view.mjs';
+export { useDatePickerViewContext } from './date-picker-view-context.mjs';
+import { DatePickerViewControl } from './date-picker-view-control.mjs';
 import { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
-import { DatePickerYearCell } from './date-picker-year-cell.mjs';
-import { DatePickerYearCellTrigger } from './date-picker-year-cell-trigger.mjs';
 import { DatePickerYearSelect } from './date-picker-year-select.mjs';
-export { datePickerAnatomy } from './date-picker.anatomy.mjs';
 
 const DatePicker = Object.assign(DatePicker$1, {
   Root: DatePicker$1,
   ClearTrigger: DatePickerClearTrigger,
-  ColumnHeader: DatePickerColumnHeader,
   Content: DatePickerContent,
   Control: DatePickerControl,
-  DayCell: DatePickerDayCell,
-  DayCellTrigger: DatePickerDayCellTrigger,
-  Grid: DatePickerGrid,
   Input: DatePickerInput,
-  MonthCell: DatePickerMonthCell,
-  MonthCellTrigger: DatePickerMonthCellTrigger,
+  Label: DatePickerLabel,
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
   PrevTrigger: DatePickerPrevTrigger,
-  Row: DatePickerRow,
-  RowGroup: DatePickerRowGroup,
-  RowHeader: DatePickerRowHeader,
+  RangeText: DatePickerRangeText,
+  Table: DatePickerTable,
+  TableBody: DatePickerTableBody,
+  TableCell: DatePickerTableCell,
+  TableCellTrigger: DatePickerTableCellTrigger,
+  TableHead: DatePickerTableHead,
+  TableHeader: DatePickerTableHeader,
+  TableRow: DatePickerTableRow,
   Trigger: DatePickerTrigger,
+  View: DatePickerView,
+  ViewControl: DatePickerViewControl,
   ViewTrigger: DatePickerViewTrigger,
-  YearCell: DatePickerYearCell,
-  YearCellTrigger: DatePickerYearCellTrigger,
   YearSelect: DatePickerYearSelect
 });
 
-export { DatePicker, DatePickerClearTrigger, DatePickerColumnHeader, DatePickerContent, DatePickerControl, DatePickerDayCell, DatePickerDayCellTrigger, DatePickerGrid, DatePickerInput, DatePickerMonthCell, DatePickerMonthCellTrigger, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRow, DatePickerRowGroup, DatePickerRowHeader, DatePickerTrigger, DatePickerViewTrigger, DatePickerYearCell, DatePickerYearCellTrigger, 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 };

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

@@ -7,6 +7,7 @@ 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');
 
 function _interopNamespaceDefault(e) {
@@ -28,14 +29,22 @@ function _interopNamespaceDefault(e) {
 
 const datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker);
 
-const useDatePicker = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
-  const context = {
+const useDatePicker = (props = {}) => {
+  const initialContext = {
     id: react.useId(),
-    getRootNode,
-    ...props
+    getRootNode: environmentContext.useEnvironmentContext(),
+    ...props,
+    value: props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : void 0
+  };
+  const context = {
+    ...initialContext,
+    value: props.value ? datePicker__namespace.parse(props.value) : void 0,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onFocusChange: useEvent.useEvent(props.onFocusChange),
+    onViewChange: useEvent.useEvent(props.onViewChange),
+    onOpenChange: useEvent.useEvent(props.onOpenChange)
   };
-  const [state, send] = react$1.useMachine(datePicker__namespace.machine(context), { context });
+  const [state, send] = react$1.useMachine(datePicker__namespace.machine(initialContext), { context });
   return datePicker__namespace.connect(state, send, react$1.normalizeProps);
 };
 

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

@@ -1,6 +1,16 @@
 import * as datePicker from '@zag-js/date-picker';
+import { type PropTypes } from '@zag-js/react';
 import type { Optional } from '../types';
-export interface UseDatePickerProps extends Optional<datePicker.Context, 'id'> {
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value'>, 'id'> {
+    /**
+     * The initial value of the date picker
+     */
+    defaultValue?: string[];
+    /**
+     * The value of the date picker
+     */
+    value?: string[];
 }
-export type UseDatePickerReturn = datePicker.Api;
-export declare const useDatePicker: (props: UseDatePickerProps) => UseDatePickerReturn;
+export interface UseDatePickerReturn extends datePicker.Api<PropTypes> {
+}
+export declare const useDatePicker: (props?: UseDatePickerProps) => UseDatePickerReturn;

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

@@ -3,16 +3,25 @@ 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';
 
-const useDatePicker = (props) => {
-  const getRootNode = useEnvironmentContext();
-  const context = {
+const useDatePicker = (props = {}) => {
+  const initialContext = {
     id: useId(),
-    getRootNode,
-    ...props
+    getRootNode: useEnvironmentContext(),
+    ...props,
+    value: props.defaultValue ? datePicker.parse(props.defaultValue) : void 0
+  };
+  const context = {
+    ...initialContext,
+    value: props.value ? datePicker.parse(props.value) : void 0,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onFocusChange: useEvent(props.onFocusChange),
+    onViewChange: useEvent(props.onViewChange),
+    onOpenChange: useEvent(props.onOpenChange)
   };
-  const [state, send] = useMachine(datePicker.machine(context), { context });
+  const [state, send] = useMachine(datePicker.machine(initialContext), { context });
   return datePicker.connect(state, send, normalizeProps);
 };
 

package/dialog/dialog-backdrop.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export type DialogBackdropProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
-export declare const DialogBackdrop: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+export interface DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+}
+export declare const DialogBackdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-close-trigger.cjs

@@ -11,8 +11,8 @@ const dialogContext = require('./dialog-context.cjs');
 
 const DialogCloseTrigger = react.forwardRef(
   (props, ref) => {
-    const { closeTriggerProps } = dialogContext.useDialogContext();
-    const mergedProps = react$1.mergeProps(closeTriggerProps, props);
+    const api = dialogContext.useDialogContext();
+    const mergedProps = react$1.mergeProps(api.closeTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/dialog/dialog-close-trigger.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type DialogCloseTriggerProps = HTMLArkProps<'button'>;
-export declare const DialogCloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface DialogCloseTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const DialogCloseTrigger: ForwardRefExoticComponent<DialogCloseTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dialog/dialog-close-trigger.mjs

@@ -7,8 +7,8 @@ import { useDialogContext } from './dialog-context.mjs';
 
 const DialogCloseTrigger = forwardRef(
   (props, ref) => {
-    const { closeTriggerProps } = useDialogContext();
-    const mergedProps = mergeProps(closeTriggerProps, props);
+    const api = useDialogContext();
+    const mergedProps = mergeProps(api.closeTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/dialog/dialog-content.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export type DialogContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
-export declare const DialogContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+export interface DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+}
+export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseDialogReturn } from './use-dialog';
-export type DialogContext = UseDialogReturn;
-export declare const DialogProvider: Provider<UseDialogReturn>, useDialogContext: () => UseDialogReturn;
+export interface DialogContext extends UseDialogReturn {
+}
+export declare const DialogProvider: Provider<DialogContext>, useDialogContext: () => DialogContext;

package/dialog/dialog-description.cjs

@@ -11,8 +11,8 @@ const dialogContext = require('./dialog-context.cjs');
 
 const DialogDescription = react.forwardRef(
   (props, ref) => {
-    const { descriptionProps } = dialogContext.useDialogContext();
-    const mergedProps = react$1.mergeProps(descriptionProps, props);
+    const api = dialogContext.useDialogContext();
+    const mergedProps = react$1.mergeProps(api.descriptionProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.p, { ...mergedProps, ref });
   }
 );

package/dialog/dialog-description.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type DialogDescriptionProps = HTMLArkProps<'p'>;
-export declare const DialogDescription: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLParagraphElement>>;
+export interface DialogDescriptionProps extends HTMLArkProps<'p'> {
+}
+export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;

package/dialog/dialog-description.mjs

@@ -7,8 +7,8 @@ import { useDialogContext } from './dialog-context.mjs';
 
 const DialogDescription = forwardRef(
   (props, ref) => {
-    const { descriptionProps } = useDialogContext();
-    const mergedProps = mergeProps(descriptionProps, props);
+    const api = useDialogContext();
+    const mergedProps = mergeProps(api.descriptionProps, props);
     return /* @__PURE__ */ jsx(ark.p, { ...mergedProps, ref });
   }
 );