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

package/date-picker/date-picker-control.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 DatePickerControlProps = HTMLArkProps<'div'>;
-export declare const DatePickerControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface DatePickerControlProps extends HTMLArkProps<'div'> {
+}
+export declare const DatePickerControl: ForwardRefExoticComponent<DatePickerControlProps & RefAttributes<HTMLDivElement>>;

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

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

package/date-picker/date-picker-input.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerInput = react.forwardRef((props, ref) => {
-  const { inputProps } = datePickerContext.useDatePickerContext();
-  const mergedProps = react$1.mergeProps(inputProps, props);
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = react$1.mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
 DatePickerInput.displayName = "DatePickerInput";

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

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

package/date-picker/date-picker-input.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerInput = forwardRef((props, ref) => {
-  const { inputProps } = useDatePickerContext();
-  const mergedProps = mergeProps(inputProps, props);
+  const api = useDatePickerContext();
+  const mergedProps = mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
 DatePickerInput.displayName = "DatePickerInput";

package/date-picker/date-picker-label.cjs

@@ -0,0 +1,19 @@
+'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 DatePickerLabel = react.forwardRef((props, ref) => {
+  const api = datePickerContext.useDatePickerContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+DatePickerLabel.displayName = "DatePickerLabel";
+
+exports.DatePickerLabel = DatePickerLabel;

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

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

package/date-picker/date-picker-label.mjs

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

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

@@ -11,9 +11,9 @@ const datePickerContext = require('./date-picker-context.cjs');
 
 const DatePickerMonthSelect = react.forwardRef(
   (props, ref) => {
-    const { monthSelectProps, getMonths } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(monthSelectProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref, children: getMonths().map((month, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: month.value, children: month.label }, i)) });
+    const api = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(api.monthSelectProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref, children: api.getMonths().map((month, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: month.value, children: month.label }, i)) });
   }
 );
 DatePickerMonthSelect.displayName = "DatePickerMonthSelect";

package/date-picker/date-picker-month-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 DatePickerMonthSelectProps = HTMLArkProps<'select'>;
-export declare const DatePickerMonthSelect: ForwardRefExoticComponent<Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLSelectElement>>;
+export interface DatePickerMonthSelectProps extends HTMLArkProps<'select'> {
+}
+export declare const DatePickerMonthSelect: ForwardRefExoticComponent<DatePickerMonthSelectProps & RefAttributes<HTMLSelectElement>>;

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

@@ -7,9 +7,9 @@ import { useDatePickerContext } from './date-picker-context.mjs';
 
 const DatePickerMonthSelect = forwardRef(
   (props, ref) => {
-    const { monthSelectProps, getMonths } = useDatePickerContext();
-    const mergedProps = mergeProps(monthSelectProps, props);
-    return /* @__PURE__ */ jsx(ark.select, { ...mergedProps, ref, children: getMonths().map((month, i) => /* @__PURE__ */ jsx("option", { value: month.value, children: month.label }, i)) });
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(api.monthSelectProps, props);
+    return /* @__PURE__ */ jsx(ark.select, { ...mergedProps, ref, children: api.getMonths().map((month, i) => /* @__PURE__ */ jsx("option", { value: month.value, children: month.label }, i)) });
   }
 );
 DatePickerMonthSelect.displayName = "DatePickerMonthSelect";

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

@@ -8,11 +8,13 @@ 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 DatePickerNextTrigger = react.forwardRef(
   (props, ref) => {
-    const { getNextTriggerProps, view } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(getNextTriggerProps({ view }), props);
+    const api = datePickerContext.useDatePickerContext();
+    const viewProps = datePickerViewContext.useDatePickerViewContext();
+    const mergedProps = react$1.mergeProps(api.getNextTriggerProps(viewProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

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

@@ -4,11 +4,13 @@ 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 DatePickerNextTrigger = forwardRef(
   (props, ref) => {
-    const { getNextTriggerProps, view } = useDatePickerContext();
-    const mergedProps = mergeProps(getNextTriggerProps({ view }), props);
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(api.getNextTriggerProps(viewProps), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

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

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

package/date-picker/date-picker-positioner.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 DatePickerPositionerProps = HTMLArkProps<'div'>;
-export declare const DatePickerPositioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface DatePickerPositionerProps extends HTMLArkProps<'div'> {
+}
+export declare const DatePickerPositioner: ForwardRefExoticComponent<DatePickerPositionerProps & RefAttributes<HTMLDivElement>>;

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

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

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

@@ -8,11 +8,13 @@ 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 DatePickerPrevTrigger = react.forwardRef(
   (props, ref) => {
-    const { getPrevTriggerProps, view } = datePickerContext.useDatePickerContext();
-    const mergedProps = react$1.mergeProps(getPrevTriggerProps({ view }), props);
+    const api = datePickerContext.useDatePickerContext();
+    const viewProps = datePickerViewContext.useDatePickerViewContext();
+    const mergedProps = react$1.mergeProps(api.getPrevTriggerProps(viewProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-prev-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 DatePickerPrevTriggerProps = Assign<HTMLArkProps<'button'>, ViewProps>;
-export declare const DatePickerPrevTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, "view"> & ViewProps & RefAttributes<HTMLButtonElement>>;
+export interface DatePickerPrevTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const DatePickerPrevTrigger: ForwardRefExoticComponent<DatePickerPrevTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -4,11 +4,13 @@ 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 DatePickerPrevTrigger = forwardRef(
   (props, ref) => {
-    const { getPrevTriggerProps, view } = useDatePickerContext();
-    const mergedProps = mergeProps(getPrevTriggerProps({ view }), props);
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(api.getPrevTriggerProps(viewProps), props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

package/date-picker/date-picker-range-text.cjs

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

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

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

package/date-picker/date-picker-range-text.mjs

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

package/date-picker/date-picker-table-body.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 DatePickerTableBody = react.forwardRef(
+  (props, ref) => {
+    const api = datePickerContext.useDatePickerContext();
+    const tableProps = datePickerTableContext.useDatePickerTableContext();
+    const mergedProps = react$1.mergeProps(api.getTableBodyProps(tableProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.tbody, { ...mergedProps, ref });
+  }
+);
+DatePickerTableBody.displayName = "DatePickerTableBody";
+
+exports.DatePickerTableBody = DatePickerTableBody;

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

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

package/date-picker/date-picker-table-body.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 DatePickerTableBody = forwardRef(
+  (props, ref) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(api.getTableBodyProps(tableProps), props);
+    return /* @__PURE__ */ jsx(ark.tbody, { ...mergedProps, ref });
+  }
+);
+DatePickerTableBody.displayName = "DatePickerTableBody";
+
+export { DatePickerTableBody };

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

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

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

@@ -0,0 +1,11 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { DayTableCellProps, TableCellProps } from '@zag-js/date-picker';
+type Union<T, U> = {
+    [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K];
+} & Omit<U, keyof T>;
+type CellProps = Union<DayTableCellProps, TableCellProps>;
+export interface DatePickerTableCellContext extends CellProps {
+}
+export declare const DatePickerTableCellProvider: Provider<DatePickerTableCellContext>, useDatePickerTableCellContext: () => DatePickerTableCellContext;
+export {};

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

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

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

@@ -0,0 +1,29 @@
+'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 datePickerTableCellContext = require('./date-picker-table-cell-context.cjs');
+const datePickerViewContext = require('./date-picker-view-context.cjs');
+
+const DatePickerTableCellTrigger = react.forwardRef((props, ref) => {
+  const api = datePickerContext.useDatePickerContext();
+  const cellProps = datePickerTableCellContext.useDatePickerTableCellContext();
+  const viewProps = datePickerViewContext.useDatePickerViewContext();
+  const triggerProps = {
+    day: api.getDayTableCellTriggerProps,
+    month: api.getMonthTableCellTriggerProps,
+    year: api.getYearTableCellTriggerProps
+    // @ts-expect-error value is number filter
+  }[viewProps.view](cellProps);
+  const mergedProps = react$1.mergeProps(triggerProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ref, ...mergedProps });
+});
+DatePickerTableCellTrigger.displayName = "DatePickerTableCellTrigger";
+
+exports.DatePickerTableCellTrigger = DatePickerTableCellTrigger;

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

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

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

@@ -0,0 +1,25 @@
+'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 { useDatePickerTableCellContext } from './date-picker-table-cell-context.mjs';
+import { useDatePickerViewContext } from './date-picker-view-context.mjs';
+
+const DatePickerTableCellTrigger = forwardRef((props, ref) => {
+  const api = useDatePickerContext();
+  const cellProps = useDatePickerTableCellContext();
+  const viewProps = useDatePickerViewContext();
+  const triggerProps = {
+    day: api.getDayTableCellTriggerProps,
+    month: api.getMonthTableCellTriggerProps,
+    year: api.getYearTableCellTriggerProps
+    // @ts-expect-error value is number filter
+  }[viewProps.view](cellProps);
+  const mergedProps = mergeProps(triggerProps, props);
+  return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
+});
+DatePickerTableCellTrigger.displayName = "DatePickerTableCellTrigger";
+
+export { DatePickerTableCellTrigger };

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

@@ -0,0 +1,37 @@
+'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 datePickerTableCellContext = require('./date-picker-table-cell-context.cjs');
+const datePickerViewContext = require('./date-picker-view-context.cjs');
+
+const DatePickerTableCell = react.forwardRef(
+  (props, ref) => {
+    const [cellProps, localProps] = createSplitProps.createSplitProps()(props, [
+      "disabled",
+      "value",
+      "visibleRange",
+      "columns"
+    ]);
+    const api = datePickerContext.useDatePickerContext();
+    const viewProps = datePickerViewContext.useDatePickerViewContext();
+    const tableCellProps = {
+      day: api.getDayTableCellProps,
+      month: api.getMonthTableCellProps,
+      year: api.getYearTableCellProps
+      // @ts-expect-error use filter guard
+    }[viewProps.view](cellProps);
+    const mergedProps = react$1.mergeProps(tableCellProps, localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(datePickerTableCellContext.DatePickerTableCellProvider, { value: cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.td, { ref, ...mergedProps }) });
+  }
+);
+DatePickerTableCell.displayName = "DatePickerTableCell";
+
+exports.DatePickerTableCell = DatePickerTableCell;

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

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type DatePickerTableCellContext } from './date-picker-table-cell-context';
+export interface DatePickerTableCellProps extends HTMLArkProps<'td'>, DatePickerTableCellContext {
+}
+export declare const DatePickerTableCell: ForwardRefExoticComponent<DatePickerTableCellProps & RefAttributes<HTMLTableCellElement>>;

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

@@ -0,0 +1,33 @@
+'use client';
+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 { DatePickerTableCellProvider } from './date-picker-table-cell-context.mjs';
+import { useDatePickerViewContext } from './date-picker-view-context.mjs';
+
+const DatePickerTableCell = forwardRef(
+  (props, ref) => {
+    const [cellProps, localProps] = createSplitProps()(props, [
+      "disabled",
+      "value",
+      "visibleRange",
+      "columns"
+    ]);
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const tableCellProps = {
+      day: api.getDayTableCellProps,
+      month: api.getMonthTableCellProps,
+      year: api.getYearTableCellProps
+      // @ts-expect-error use filter guard
+    }[viewProps.view](cellProps);
+    const mergedProps = mergeProps(tableCellProps, localProps);
+    return /* @__PURE__ */ jsx(DatePickerTableCellProvider, { value: cellProps, children: /* @__PURE__ */ jsx(ark.td, { ref, ...mergedProps }) });
+  }
+);
+DatePickerTableCell.displayName = "DatePickerTableCell";
+
+export { DatePickerTableCell };

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

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

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

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { TableProps } from '@zag-js/date-picker';
+export interface DatePickerTableContext extends TableProps {
+}
+export declare const DatePickerTableProvider: Provider<DatePickerTableContext>, useDatePickerTableContext: () => DatePickerTableContext;

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

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