@ark-ui/solid 0.4.0 → 0.6.0

package/README.md

@@ -19,6 +19,7 @@ At the moment, `@ark-ui/solid`offers the following components:
 - [Checkbox](https://ark-ui.com/docs/solid/components/checkbox)
 - [Color Picker](https://ark-ui.com/docs/solid/components/color-picker)
 - [Combobox](https://ark-ui.com/docs/solid/components/combobox)
+- [Date Picker](https://ark-ui.com/docs/solid/components/date-picker)
 - [Dialog](https://ark-ui.com/docs/solid/components/dialog)
 - [Editable](https://ark-ui.com/docs/solid/components/editable)
 - [Hover Card](https://ark-ui.com/docs/solid/components/hover-card)

package/dist/accordion/index.d.ts

@@ -1,6 +1,5 @@
 export { Accordion, type AccordionProps } from './accordion';
 export { AccordionContent, type AccordionContentProps } from './accordion-content';
-export { AccordionIcon, type AccordionIconProps } from './accordion-icon';
 export { AccordionItem, type AccordionItemProps } from './accordion-item';
 export { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
 export { accordionAnatomy } from './accordion.anatomy';

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

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

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

@@ -0,0 +1,3 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import type { CellProps } from '@zag-js/date-picker';
+export declare const DatePickerCellProvider: ContextProviderComponent<CellProps>, useDatePickerCellContext: () => CellProps;

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

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [DatePickerCellProvider, useDatePickerCellContext] = createContext({
+  hookName: "useDatePickerCellContext",
+  providerName: "<DatePickerCellProvider />"
+});
+
+export { DatePickerCellProvider, useDatePickerCellContext };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerClearTrigger = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const triggerProps = solid.mergeProps(() => datePicker().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
+};
+
+exports.DatePickerClearTrigger = DatePickerClearTrigger;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerClearTriggerProps = HTMLArkProps<'button'>;
+export declare const DatePickerClearTrigger: (props: DatePickerClearTriggerProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerClearTrigger = props => {
+  const datePicker = useDatePickerContext();
+  const triggerProps = mergeProps(() => datePicker().clearTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+export { DatePickerClearTrigger };

package/dist/date-picker/date-picker-column-header.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const datePicker_anatomy = require('./date-picker.anatomy.cjs');
+
+const DatePickerColumnHeader = props => web.createComponent(factory.ark.div, web.mergeProps({
+  role: "columnheader"
+}, () => datePicker_anatomy.parts.columnHeader.attrs, props));
+
+exports.DatePickerColumnHeader = DatePickerColumnHeader;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerColumnHeaderProps = HTMLArkProps<'div'>;
+export declare const DatePickerColumnHeader: (props: DatePickerColumnHeaderProps) => JSX.Element;

package/dist/date-picker/date-picker-column-header.mjs

@@ -0,0 +1,9 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { parts } from './date-picker.anatomy.mjs';
+
+const DatePickerColumnHeader = props => createComponent(ark.div, mergeProps({
+  role: "columnheader"
+}, () => parts.columnHeader.attrs, props));
+
+export { DatePickerColumnHeader };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerContent = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().contentProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.DatePickerContent = DatePickerContent;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerContentProps = HTMLArkProps<'div'>;
+export declare const DatePickerContent: (props: DatePickerContentProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerContent = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().contentProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { DatePickerContent };

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

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

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

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [DatePickerProvider, useDatePickerContext] = createContext({
+  hookName: "useDatePickerContext",
+  providerName: "<DatePickerProvider />"
+});
+
+export { DatePickerProvider, useDatePickerContext };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerControl = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.DatePickerControl = DatePickerControl;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerControlProps = HTMLArkProps<'div'>;
+export declare const DatePickerControl: (props: DatePickerControlProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerControl = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { DatePickerControl };

package/dist/date-picker/date-picker-day-cell-context.cjs

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

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

@@ -0,0 +1,3 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import type { DayCellProps } from '@zag-js/date-picker';
+export declare const DatePickerDayCellProvider: ContextProviderComponent<DayCellProps>, useDatePickerDayCellContext: () => DayCellProps;

package/dist/date-picker/date-picker-day-cell-context.mjs

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

package/dist/date-picker/date-picker-day-cell-trigger.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+const datePickerDayCellContext = require('./date-picker-day-cell-context.cjs');
+
+const DatePickerDayCellTrigger = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const cellProps = datePickerDayCellContext.useDatePickerDayCellContext();
+  const mergedProps = solid.mergeProps(() => datePicker().getDayCellTriggerProps(cellProps), props);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.DatePickerDayCellTrigger = DatePickerDayCellTrigger;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerDayCellTriggerProps = HTMLArkProps<'button'>;
+export declare const DatePickerDayCellTrigger: (props: DatePickerDayCellTriggerProps) => JSX.Element;

package/dist/date-picker/date-picker-day-cell-trigger.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+import { useDatePickerDayCellContext } from './date-picker-day-cell-context.mjs';
+
+const DatePickerDayCellTrigger = props => {
+  const datePicker = useDatePickerContext();
+  const cellProps = useDatePickerDayCellContext();
+  const mergedProps = mergeProps(() => datePicker().getDayCellTriggerProps(cellProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { DatePickerDayCellTrigger };

package/dist/date-picker/date-picker-day-cell.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+const datePickerDayCellContext = require('./date-picker-day-cell-context.cjs');
+
+const DatePickerDayCell = props => {
+  const [cellProps, localProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'offset']);
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().getDayCellProps(cellProps), localProps);
+  return web.createComponent(datePickerDayCellContext.DatePickerDayCellProvider, {
+    value: cellProps,
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  });
+};
+
+exports.DatePickerDayCell = DatePickerDayCell;

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { DayCellProps } from '@zag-js/date-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type DatePickerDayCellProps = Assign<HTMLArkProps<'div'>, DayCellProps>;
+export declare const DatePickerDayCell: (props: DatePickerDayCellProps) => JSX.Element;

package/dist/date-picker/date-picker-day-cell.mjs

@@ -0,0 +1,20 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+import { DatePickerDayCellProvider } from './date-picker-day-cell-context.mjs';
+
+const DatePickerDayCell = props => {
+  const [cellProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'offset']);
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().getDayCellProps(cellProps), localProps);
+  return createComponent(DatePickerDayCellProvider, {
+    value: cellProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+export { DatePickerDayCell };

package/dist/date-picker/date-picker-grid.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerGrid = props => {
+  const [gridProps, localProps] = createSplitProps.createSplitProps()(props, ['view', 'columns', 'id']);
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().getGridProps({
+    view: datePicker().view,
+    id: solidJs.createUniqueId(),
+    ...gridProps
+  }), localProps);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.DatePickerGrid = DatePickerGrid;

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { GridProps } from '@zag-js/date-picker/dist/date-picker.types';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type DatePickerGridProps = Assign<HTMLArkProps<'div'>, GridProps>;
+export declare const DatePickerGrid: (props: DatePickerGridProps) => JSX.Element;

package/dist/date-picker/date-picker-grid.mjs

@@ -0,0 +1,19 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createUniqueId } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerGrid = props => {
+  const [gridProps, localProps] = createSplitProps()(props, ['view', 'columns', 'id']);
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().getGridProps({
+    view: datePicker().view,
+    id: createUniqueId(),
+    ...gridProps
+  }), localProps);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { DatePickerGrid };

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerInput = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().inputProps, props);
+  return web.createComponent(factory.ark.input, mergedProps);
+};
+
+exports.DatePickerInput = DatePickerInput;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerInputProps = HTMLArkProps<'input'>;
+export declare const DatePickerInput: (props: DatePickerInputProps) => JSX.Element;

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

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerInput = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().inputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
+export { DatePickerInput };

package/dist/date-picker/date-picker-month-cell-trigger.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerCellContext = require('./date-picker-cell-context.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerMonthCellTrigger = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const cellProps = datePickerCellContext.useDatePickerCellContext();
+  const mergedProps = solid.mergeProps(() => datePicker().getMonthCellTriggerProps(cellProps), props);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.DatePickerMonthCellTrigger = DatePickerMonthCellTrigger;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerMonthCellTriggerProps = HTMLArkProps<'button'>;
+export declare const DatePickerMonthCellTrigger: (props: DatePickerMonthCellTriggerProps) => JSX.Element;

package/dist/date-picker/date-picker-month-cell-trigger.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerCellContext } from './date-picker-cell-context.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerMonthCellTrigger = props => {
+  const datePicker = useDatePickerContext();
+  const cellProps = useDatePickerCellContext();
+  const mergedProps = mergeProps(() => datePicker().getMonthCellTriggerProps(cellProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { DatePickerMonthCellTrigger };

package/dist/date-picker/date-picker-month-cell.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const datePickerCellContext = require('./date-picker-cell-context.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerMonthCell = props => {
+  const [cellProps, localProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled']);
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().getMonthCellProps(cellProps), localProps);
+  return web.createComponent(datePickerCellContext.DatePickerCellProvider, {
+    value: cellProps,
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  });
+};
+
+exports.DatePickerMonthCell = DatePickerMonthCell;

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { CellProps } from '@zag-js/date-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type DatePickerMonthCellProps = Assign<HTMLArkProps<'div'>, CellProps>;
+export declare const DatePickerMonthCell: (props: DatePickerMonthCellProps) => JSX.Element;

package/dist/date-picker/date-picker-month-cell.mjs

@@ -0,0 +1,20 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { DatePickerCellProvider } from './date-picker-cell-context.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerMonthCell = props => {
+  const [cellProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().getMonthCellProps(cellProps), localProps);
+  return createComponent(DatePickerCellProvider, {
+    value: cellProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+export { DatePickerMonthCell };

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const _tmpl$ = /*#__PURE__*/web.template(`<option>`);
+const DatePickerMonthSelect = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().monthSelectProps, props);
+  return web.createComponent(factory.ark.select, web.mergeProps(mergedProps, {
+    get children() {
+      return web.createComponent(solidJs.For, {
+        get each() {
+          return datePicker().getMonths();
+        },
+        children: month => (() => {
+          const _el$ = _tmpl$();
+          web.insert(_el$, () => month.label);
+          web.effect(() => _el$.value = month.value);
+          return _el$;
+        })()
+      });
+    }
+  }));
+};
+
+exports.DatePickerMonthSelect = DatePickerMonthSelect;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerMonthSelectProps = HTMLArkProps<'select'>;
+export declare const DatePickerMonthSelect: (props: DatePickerMonthSelectProps) => JSX.Element;

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

@@ -0,0 +1,28 @@
+import { createComponent, mergeProps as mergeProps$1, insert, effect, template } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { For } from 'solid-js';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const _tmpl$ = /*#__PURE__*/template(`<option>`);
+const DatePickerMonthSelect = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().monthSelectProps, props);
+  return createComponent(ark.select, mergeProps$1(mergedProps, {
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return datePicker().getMonths();
+        },
+        children: month => (() => {
+          const _el$ = _tmpl$();
+          insert(_el$, () => month.label);
+          effect(() => _el$.value = month.value);
+          return _el$;
+        })()
+      });
+    }
+  }));
+};
+
+export { DatePickerMonthSelect };

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerNextTrigger = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(datePicker().getNextTriggerProps({
+    view: datePicker().view
+  }), props);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.DatePickerNextTrigger = DatePickerNextTrigger;

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerNextTriggerProps = HTMLArkProps<'button'>;
+export declare const DatePickerNextTrigger: (props: DatePickerNextTriggerProps) => JSX.Element;