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

package/date-picker/date-picker-table-head.cjs

@@ -0,0 +1,23 @@
+'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 datePickerTableContext = require('./date-picker-table-context.cjs');
+
+const DatePickerTableHead = react.forwardRef(
+  (props, ref) => {
+    const api = datePickerContext.useDatePickerContext();
+    const tableProps = datePickerTableContext.useDatePickerTableContext();
+    const mergedProps = react$1.mergeProps(api.getTableHeadProps(tableProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.thead, { ...mergedProps, ref });
+  }
+);
+DatePickerTableHead.displayName = "DatePickerTableHead";
+
+exports.DatePickerTableHead = DatePickerTableHead;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface DatePickerTableHeadProps extends HTMLArkProps<'thead'> {
+}
+export declare const DatePickerTableHead: ForwardRefExoticComponent<DatePickerTableHeadProps & RefAttributes<HTMLTableSectionElement>>;

package/date-picker/date-picker-table-head.mjs

@@ -0,0 +1,19 @@
+'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';
+import { useDatePickerTableContext } from './date-picker-table-context.mjs';
+
+const DatePickerTableHead = forwardRef(
+  (props, ref) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(api.getTableHeadProps(tableProps), props);
+    return /* @__PURE__ */ jsx(ark.thead, { ...mergedProps, ref });
+  }
+);
+DatePickerTableHead.displayName = "DatePickerTableHead";
+
+export { DatePickerTableHead };

package/date-picker/date-picker-table-header.cjs

@@ -0,0 +1,23 @@
+'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 datePickerTableContext = require('./date-picker-table-context.cjs');
+
+const DatePickerTableHeader = react.forwardRef(
+  (props, ref) => {
+    const api = datePickerContext.useDatePickerContext();
+    const tableProps = datePickerTableContext.useDatePickerTableContext();
+    const mergedProps = react$1.mergeProps(api.getTableHeaderProps(tableProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.th, { ...mergedProps, ref });
+  }
+);
+DatePickerTableHeader.displayName = "DatePickerTableHeader";
+
+exports.DatePickerTableHeader = DatePickerTableHeader;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface DatePickerTableHeaderProps extends HTMLArkProps<'th'> {
+}
+export declare const DatePickerTableHeader: ForwardRefExoticComponent<DatePickerTableHeaderProps & RefAttributes<HTMLTableCellElement>>;

package/date-picker/date-picker-table-header.mjs

@@ -0,0 +1,19 @@
+'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';
+import { useDatePickerTableContext } from './date-picker-table-context.mjs';
+
+const DatePickerTableHeader = forwardRef(
+  (props, ref) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(api.getTableHeaderProps(tableProps), props);
+    return /* @__PURE__ */ jsx(ark.th, { ...mergedProps, ref });
+  }
+);
+DatePickerTableHeader.displayName = "DatePickerTableHeader";
+
+export { DatePickerTableHeader };

package/date-picker/date-picker-table-row.cjs

@@ -0,0 +1,23 @@
+'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 datePickerTableContext = require('./date-picker-table-context.cjs');
+
+const DatePickerTableRow = react.forwardRef(
+  (props, ref) => {
+    const api = datePickerContext.useDatePickerContext();
+    const tableProps = datePickerTableContext.useDatePickerTableContext();
+    const mergedProps = react$1.mergeProps(api.getTableRowProps(tableProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.tr, { ...mergedProps, ref });
+  }
+);
+DatePickerTableRow.displayName = "DatePickerTableRow";
+
+exports.DatePickerTableRow = DatePickerTableRow;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface DatePickerTableRowProps extends HTMLArkProps<'tr'> {
+}
+export declare const DatePickerTableRow: ForwardRefExoticComponent<DatePickerTableRowProps & RefAttributes<HTMLTableRowElement>>;

package/date-picker/date-picker-table-row.mjs

@@ -0,0 +1,19 @@
+'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';
+import { useDatePickerTableContext } from './date-picker-table-context.mjs';
+
+const DatePickerTableRow = forwardRef(
+  (props, ref) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(api.getTableRowProps(tableProps), props);
+    return /* @__PURE__ */ jsx(ark.tr, { ...mergedProps, ref });
+  }
+);
+DatePickerTableRow.displayName = "DatePickerTableRow";
+
+export { DatePickerTableRow };

package/date-picker/date-picker-table.cjs

@@ -0,0 +1,27 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+const datePickerTableContext = require('./date-picker-table-context.cjs');
+const datePickerViewContext = require('./date-picker-view-context.cjs');
+
+const DatePickerTable = react.forwardRef((props, ref) => {
+  const [{ columns }, localProps] = createSplitProps.createSplitProps()(props, [
+    "columns"
+  ]);
+  const api = datePickerContext.useDatePickerContext();
+  const viewProps = datePickerViewContext.useDatePickerViewContext();
+  const tableProps = { columns, id: react.useId(), ...viewProps };
+  const mergedProps = react$1.mergeProps(api.getTableProps(tableProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(datePickerTableContext.DatePickerTableProvider, { value: tableProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.table, { ...mergedProps, ref }) });
+});
+DatePickerTable.displayName = "DatePickerTable";
+
+exports.DatePickerTable = DatePickerTable;

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

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { TableProps } from '@zag-js/date-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface DatePickerTableProps extends Assign<HTMLArkProps<'table'>, Pick<TableProps, 'columns'>> {
+}
+export declare const DatePickerTable: ForwardRefExoticComponent<DatePickerTableProps & RefAttributes<HTMLTableElement>>;

package/date-picker/date-picker-table.mjs

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef, useId } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+import { DatePickerTableProvider } from './date-picker-table-context.mjs';
+import { useDatePickerViewContext } from './date-picker-view-context.mjs';
+
+const DatePickerTable = forwardRef((props, ref) => {
+  const [{ columns }, localProps] = createSplitProps()(props, [
+    "columns"
+  ]);
+  const api = useDatePickerContext();
+  const viewProps = useDatePickerViewContext();
+  const tableProps = { columns, id: useId(), ...viewProps };
+  const mergedProps = mergeProps(api.getTableProps(tableProps), localProps);
+  return /* @__PURE__ */ jsx(DatePickerTableProvider, { value: tableProps, children: /* @__PURE__ */ jsx(ark.table, { ...mergedProps, ref }) });
+});
+DatePickerTable.displayName = "DatePickerTable";
+
+export { DatePickerTable };

package/date-picker/date-picker-trigger.cjs

@@ -11,8 +11,8 @@ const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerTrigger = react.forwardRef(
   (props, ref) => {
-    const { triggerProps } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(triggerProps, props);
+    const api = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(api.triggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-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 DatePickerTriggerProps = HTMLArkProps<'button'>;
-export declare const DatePickerTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+export interface DatePickerTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const DatePickerTrigger: ForwardRefExoticComponent<DatePickerTriggerProps & RefAttributes<HTMLButtonElement>>;

package/date-picker/date-picker-trigger.mjs

@@ -7,8 +7,8 @@ import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerTrigger = forwardRef(
   (props, ref) => {
-    const { triggerProps } = useDatePickerContext();
-    const mergedProps = mergeProps(triggerProps, props);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(api.triggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-view-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [DatePickerViewProvider, useDatePickerViewContext] = createContext.createContext({
+  name: "DatePickerViewContext",
+  hookName: "useDatePickerViewContext",
+  providerName: "<DatePickerViewProvider />"
+});
+
+exports.DatePickerViewProvider = DatePickerViewProvider;
+exports.useDatePickerViewContext = useDatePickerViewContext;

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

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ViewProps } from '@zag-js/date-picker';
+export interface DatePickerViewContext extends Required<ViewProps> {
+}
+export declare const DatePickerViewProvider: Provider<DatePickerViewContext>, useDatePickerViewContext: () => DatePickerViewContext;

package/date-picker/date-picker-view-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [DatePickerViewProvider, useDatePickerViewContext] = createContext({
+  name: "DatePickerViewContext",
+  hookName: "useDatePickerViewContext",
+  providerName: "<DatePickerViewProvider />"
+});
+
+export { DatePickerViewProvider, useDatePickerViewContext };

package/date-picker/date-picker-view-control.cjs

@@ -0,0 +1,23 @@
+'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 datePickerViewContext = require('./date-picker-view-context.cjs');
+
+const DatePickerViewControl = react.forwardRef(
+  (props, ref) => {
+    const api = datePickerContext.useDatePickerContext();
+    const viewProps = datePickerViewContext.useDatePickerViewContext();
+    const mergedProps = react$1.mergeProps(api.getViewControlProps(viewProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+DatePickerViewControl.displayName = "DatePickerViewControl";
+
+exports.DatePickerViewControl = DatePickerViewControl;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface DatePickerViewControlProps extends HTMLArkProps<'div'> {
+}
+export declare const DatePickerViewControl: ForwardRefExoticComponent<DatePickerViewControlProps & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker-view-control.mjs

@@ -0,0 +1,19 @@
+'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';
+import { useDatePickerViewContext } from './date-picker-view-context.mjs';
+
+const DatePickerViewControl = forwardRef(
+  (props, ref) => {
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(api.getViewControlProps(viewProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+DatePickerViewControl.displayName = "DatePickerViewControl";
+
+export { DatePickerViewControl };

package/date-picker/date-picker-view-trigger.cjs

@@ -6,18 +6,15 @@ 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 createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
+const datePickerViewContext = require('./date-picker-view-context.cjs');
 
 const DatePickerViewTrigger = react.forwardRef(
   (props, ref) => {
-    const [viewProps, localProps] = createSplitProps.createSplitProps()(props, ["view"]);
-    const { getViewTriggerProps, view } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(
-      getViewTriggerProps({ view: viewProps.view ?? view }),
-      localProps
-    );
+    const api = datePickerContext.useDatePickerContext();
+    const viewProps = datePickerViewContext.useDatePickerViewContext();
+    const mergedProps = react$1.mergeProps(api.getViewTriggerProps(viewProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -1,7 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { ViewProps } from '@zag-js/date-picker';
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-export type DatePickerViewTriggerProps = Assign<HTMLArkProps<'button'>, ViewProps>;
-export declare const DatePickerViewTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, "view"> & ViewProps & RefAttributes<HTMLButtonElement>>;
+export interface DatePickerViewTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const DatePickerViewTrigger: ForwardRefExoticComponent<DatePickerViewTriggerProps & RefAttributes<HTMLButtonElement>>;

package/date-picker/date-picker-view-trigger.mjs

@@ -2,18 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
+import { useDatePickerViewContext } from './date-picker-view-context.mjs';
 
 const DatePickerViewTrigger = forwardRef(
   (props, ref) => {
-    const [viewProps, localProps] = createSplitProps()(props, ["view"]);
-    const { getViewTriggerProps, view } = useDatePickerContext();
-    const mergedProps = mergeProps(
-      getViewTriggerProps({ view: viewProps.view ?? view }),
-      localProps
-    );
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(api.getViewTriggerProps(viewProps), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-view.cjs

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+const datePickerViewContext = require('./date-picker-view-context.cjs');
+
+const DatePickerView = react.forwardRef((props, ref) => {
+  const [viewProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "view"
+  ]);
+  const api = datePickerContext.useDatePickerContext();
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(datePickerViewContext.DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...localProps, ref, hidden: api.view !== viewProps.view, children: view }) });
+});
+DatePickerView.displayName = "DatePickerView";
+
+exports.DatePickerView = DatePickerView;

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

@@ -0,0 +1,10 @@
+import type { ViewProps } from '@zag-js/date-picker';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import type { UseDatePickerReturn } from './use-date-picker';
+export interface DatePickerViewProps extends Required<ViewProps>, Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((props: UseDatePickerReturn) => ReactNode);
+}> {
+}
+export declare const DatePickerView: ForwardRefExoticComponent<DatePickerViewProps & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker-view.mjs

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+import { DatePickerViewProvider } from './date-picker-view-context.mjs';
+
+const DatePickerView = forwardRef((props, ref) => {
+  const [viewProps, { children, ...localProps }] = createSplitProps()(props, [
+    "view"
+  ]);
+  const api = useDatePickerContext();
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsx(ark.div, { ...localProps, ref, hidden: api.view !== viewProps.view, children: view }) });
+});
+DatePickerView.displayName = "DatePickerView";
+
+export { DatePickerView };

package/date-picker/date-picker-year-select.cjs

@@ -11,8 +11,8 @@ const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerYearSelect = react.forwardRef(
   (props, ref) => {
-    const { yearSelectProps } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(yearSelectProps, props);
+    const api = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(api.yearSelectProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref, children: getYearsRange({ from: 1e3, to: 4e3 }).map((year, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: year, children: year }, i)) });
   }
 );

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

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

package/date-picker/date-picker-year-select.mjs

@@ -7,8 +7,8 @@ import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerYearSelect = forwardRef(
   (props, ref) => {
-    const { yearSelectProps } = useDatePickerContext();
-    const mergedProps = mergeProps(yearSelectProps, props);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(api.yearSelectProps, props);
     return /* @__PURE__ */ jsx(ark.select, { ...mergedProps, ref, children: getYearsRange({ from: 1e3, to: 4e3 }).map((year, i) => /* @__PURE__ */ jsx("option", { value: year, children: year }, i)) });
   }
 );

package/date-picker/date-picker.cjs

@@ -4,16 +4,57 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 const useDatePicker = require('./use-date-picker.cjs');
 
-const DatePicker = (props) => {
-  const { children, ...useDatePickerProps } = props;
-  const datePicker = useDatePicker.useDatePicker(useDatePickerProps);
-  const view = runIfFn.runIfFn(children, datePicker);
-  return /* @__PURE__ */ jsxRuntime.jsx(datePickerContext.DatePickerProvider, { value: datePicker, children: view });
-};
+const DatePicker = react.forwardRef((props, ref) => {
+  const [datePickerProps, { children, ...localProps }] = createSplitProps.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.useDatePicker(datePickerProps);
+  const view = runIfFn.runIfFn(children, api);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(datePickerContext.DatePickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+});
+DatePicker.displayName = "DatePicker";
 
 exports.DatePicker = DatePicker;

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

@@ -1,9 +1,9 @@
-import { JSX } from 'react/jsx-runtime';
-import { type PropsWithChildren, type ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type DatePickerContext } from './date-picker-context';
 import { type UseDatePickerProps } from './use-date-picker';
-export type DatePickerProps = Assign<PropsWithChildren<UseDatePickerProps>, {
+export interface DatePickerProps extends Assign<UseDatePickerProps, {
     children?: ReactNode | ((props: DatePickerContext) => ReactNode);
-}>;
-export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
+}> {
+}
+export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;