@ark-ui/solid 0.9.0 → 0.10.0

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

@@ -8,7 +8,7 @@ const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
-const _tmpl$ = ["<option", ">", "</option>"];
+const _tmpl$ = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const datePicker = datePickerContext.useDatePickerContext();
   const mergedProps = solid.mergeProps(() => datePicker().monthSelectProps, props);
@@ -18,7 +18,12 @@ const DatePickerMonthSelect = props => {
         get each() {
           return datePicker().getMonths();
         },
-        children: month => web.ssr(_tmpl$, web.ssrHydrationKey() + web.ssrAttribute("value", web.escape(month.value, true), false), web.escape(month.label))
+        children: month => (() => {
+          const _el$ = _tmpl$();
+          web.insert(_el$, () => month.label);
+          web.effect(() => _el$.value = month.value);
+          return _el$;
+        })()
       });
     }
   }));

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

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

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

@@ -1,10 +1,10 @@
-import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+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$ = ["<option", ">", "</option>"];
+const _tmpl$ = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const datePicker = useDatePickerContext();
   const mergedProps = mergeProps(() => datePicker().monthSelectProps, props);
@@ -14,7 +14,12 @@ const DatePickerMonthSelect = props => {
         get each() {
           return datePicker().getMonths();
         },
-        children: month => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("value", escape(month.value, true), false), escape(month.label))
+        children: month => (() => {
+          const _el$ = _tmpl$();
+          insert(_el$, () => month.label);
+          effect(() => _el$.value = month.value);
+          return _el$;
+        })()
       });
     }
   }));

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

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

package/date-picker/date-picker-positioner.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 DatePickerPositioner = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().positionerProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.DatePickerPositioner = DatePickerPositioner;

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

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

package/date-picker/date-picker-positioner.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 DatePickerPositioner = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { DatePickerPositioner };

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { ViewProps } from '@zag-js/date-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

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

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

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import type { CellProps } from '@zag-js/date-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';

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

@@ -8,7 +8,7 @@ const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
-const _tmpl$ = ["<option", ">", "</option>"];
+const _tmpl$ = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const datePicker = datePickerContext.useDatePickerContext();
   const mergedProps = solid.mergeProps(() => datePicker().yearSelectProps, props);
@@ -21,7 +21,12 @@ const DatePickerYearSelect = props => {
             to: 4_000
           });
         },
-        children: year => web.ssr(_tmpl$, web.ssrHydrationKey() + web.ssrAttribute("value", web.escape(year, true), false), web.escape(year))
+        children: year => (() => {
+          const _el$ = _tmpl$();
+          _el$.value = year;
+          web.insert(_el$, year);
+          return _el$;
+        })()
       });
     }
   }));

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

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

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

@@ -1,10 +1,10 @@
-import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, insert, 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$ = ["<option", ">", "</option>"];
+const _tmpl$ = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const datePicker = useDatePickerContext();
   const mergedProps = mergeProps(() => datePicker().yearSelectProps, props);
@@ -17,7 +17,12 @@ const DatePickerYearSelect = props => {
             to: 4_000
           });
         },
-        children: year => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("value", escape(year, true), false), escape(year))
+        children: year => (() => {
+          const _el$ = _tmpl$();
+          _el$.value = year;
+          insert(_el$, year);
+          return _el$;
+        })()
       });
     }
   }));

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

@@ -1,3 +1,3 @@
-import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"header" | "input" | "label" | "content" | "grid" | "row" | "nextTrigger" | "control" | "trigger" | "viewTrigger" | "cellTrigger" | "prevTrigger" | "clearTrigger" | "monthSelect" | "yearSelect" | "rowGroup" | "columnHeader">;
-export declare const parts: Record<"header" | "input" | "label" | "content" | "grid" | "row" | "nextTrigger" | "control" | "trigger" | "viewTrigger" | "cellTrigger" | "prevTrigger" | "clearTrigger" | "monthSelect" | "yearSelect" | "rowGroup" | "columnHeader", AnatomyPart>;
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "content" | "grid" | "row" | "trigger" | "positioner" | "control" | "clearTrigger" | "cellTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rowHeader" | "viewTrigger" | "yearSelect" | "rowGroup" | "columnHeader">;
+export declare const parts: Record<"input" | "content" | "grid" | "row" | "trigger" | "positioner" | "control" | "clearTrigger" | "cellTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rowHeader" | "viewTrigger" | "yearSelect" | "rowGroup" | "columnHeader", AnatomyPart>;

package/date-picker/date-picker.cjs

@@ -9,7 +9,7 @@ const datePickerContext = require('./date-picker-context.cjs');
 const useDatePicker = require('./use-date-picker.cjs');
 
 const DatePicker = props => {
-  const [useDatePickerProps, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onChange', 'onFocusChange', 'onViewChange', 'parse', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
+  const [useDatePickerProps, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onChange', 'onFocusChange', 'onViewChange', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
   const api = useDatePicker.useDatePicker(useDatePickerProps);
   const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(datePickerContext.DatePickerProvider, {

package/date-picker/date-picker.mjs

@@ -5,7 +5,7 @@ import { DatePickerProvider } from './date-picker-context.mjs';
 import { useDatePicker } from './use-date-picker.mjs';
 
 const DatePicker = props => {
-  const [useDatePickerProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onChange', 'onFocusChange', 'onViewChange', 'parse', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
+  const [useDatePickerProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'inline', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'messages', 'min', 'modal', 'name', 'numOfMonths', 'onChange', 'onFocusChange', 'onViewChange', 'parse', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'value', 'view']);
   const api = useDatePicker(useDatePickerProps);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(DatePickerProvider, {

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

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+import { DatePicker } from './';
+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

@@ -18,6 +18,7 @@ const datePickerMonthCell = require('./date-picker-month-cell.cjs');
 const datePickerMonthCellTrigger = require('./date-picker-month-cell-trigger.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');
@@ -29,9 +30,32 @@ 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,
+  MonthSelect: datePickerMonthSelect.DatePickerMonthSelect,
+  NextTrigger: datePickerNextTrigger.DatePickerNextTrigger,
+  Positioner: datePickerPositioner.DatePickerPositioner,
+  PrevTrigger: datePickerPrevTrigger.DatePickerPrevTrigger,
+  Row: datePickerRow.DatePickerRow,
+  RowGroup: datePickerRowGroup.DatePickerRowGroup,
+  RowHeader: datePickerRowHeader.DatePickerRowHeader,
+  Trigger: datePickerTrigger.DatePickerTrigger,
+  ViewTrigger: datePickerViewTrigger.DatePickerViewTrigger,
+  YearCell: datePickerYearCell.DatePickerYearCell,
+  YearCellTrigger: datePickerYearCellTrigger.DatePickerYearCellTrigger,
+  YearSelect: datePickerYearSelect.DatePickerYearSelect
+});
 
-
-exports.DatePicker = datePicker.DatePicker;
 exports.useDatePickerCellContext = datePickerCellContext.useDatePickerCellContext;
 exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
 exports.DatePickerColumnHeader = datePickerColumnHeader.DatePickerColumnHeader;
@@ -47,6 +71,7 @@ exports.DatePickerMonthCell = datePickerMonthCell.DatePickerMonthCell;
 exports.DatePickerMonthCellTrigger = datePickerMonthCellTrigger.DatePickerMonthCellTrigger;
 exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
 exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
+exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
 exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
 exports.DatePickerRow = datePickerRow.DatePickerRow;
 exports.DatePickerRowGroup = datePickerRowGroup.DatePickerRowGroup;
@@ -57,3 +82,4 @@ 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,26 +1,55 @@
-export { DatePicker, type DatePickerProps } from './date-picker';
-export { useDatePickerCellContext } from './date-picker-cell-context';
-export { DatePickerClearTrigger, type DatePickerClearTriggerProps, } from './date-picker-clear-trigger';
-export { DatePickerColumnHeader, type DatePickerColumnHeaderProps, } from './date-picker-column-header';
-export { DatePickerContent, type DatePickerContentProps } from './date-picker-content';
-export { useDatePickerContext } from './date-picker-context';
-export { DatePickerControl, type DatePickerControlProps } from './date-picker-control';
-export { DatePickerDayCell, type DatePickerDayCellProps } from './date-picker-day-cell';
-export { useDatePickerDayCellContext } from './date-picker-day-cell-context';
-export { DatePickerDayCellTrigger, type DatePickerDayCellTriggerProps, } from './date-picker-day-cell-trigger';
-export { DatePickerGrid, type DatePickerGridProps } from './date-picker-grid';
-export { DatePickerInput, type DatePickerInputProps } from './date-picker-input';
-export { DatePickerMonthCell, type DatePickerMonthCellProps } from './date-picker-month-cell';
-export { DatePickerMonthCellTrigger, type DatePickerMonthCellTriggerProps, } from './date-picker-month-cell-trigger';
-export { DatePickerMonthSelect, type DatePickerMonthSelectProps } from './date-picker-month-select';
-export { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-picker-next-trigger';
-export { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
-export { DatePickerRow, type DatePickerRowProps } from './date-picker-row';
-export { DatePickerRowGroup, type DatePickerRowGroupProps } from './date-picker-row-group';
-export { DatePickerRowHeader, type DatePickerRowHeaderProps } from './date-picker-row-header';
-export { DatePickerTrigger, type DatePickerTriggerProps } from './date-picker-trigger';
-export { DatePickerViewTrigger, type DatePickerViewTriggerProps } from './date-picker-view-trigger';
-export { DatePickerYearCell, type DatePickerYearCellProps } from './date-picker-year-cell';
-export { DatePickerYearCellTrigger, type DatePickerYearCellTriggerProps, } from './date-picker-year-cell-trigger';
-export { DatePickerYearSelect, type DatePickerYearSelectProps } from './date-picker-year-select';
-export { datePickerAnatomy } from './date-picker.anatomy';
+import { JSX } from 'solid-js';
+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 { 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 { 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 { DatePickerTrigger, type DatePickerTriggerProps } from './date-picker-trigger';
+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: (props: DatePickerClearTriggerProps) => JSX.Element;
+    ColumnHeader: (props: DatePickerColumnHeaderProps) => JSX.Element;
+    Content: (props: DatePickerContentProps) => JSX.Element;
+    Control: (props: DatePickerControlProps) => JSX.Element;
+    DayCell: (props: DatePickerDayCellProps) => JSX.Element;
+    DayCellTrigger: (props: DatePickerDayCellTriggerProps) => JSX.Element;
+    Grid: (props: DatePickerGridProps) => JSX.Element;
+    Input: (props: DatePickerInputProps) => JSX.Element;
+    MonthCell: (props: DatePickerMonthCellProps) => JSX.Element;
+    MonthCellTrigger: (props: DatePickerMonthCellTriggerProps) => JSX.Element;
+    MonthSelect: (props: DatePickerMonthSelectProps) => JSX.Element;
+    NextTrigger: (props: DatePickerNextTriggerProps) => JSX.Element;
+    Positioner: (props: DatePickerPositionerProps) => JSX.Element;
+    PrevTrigger: (props: DatePickerPrevTriggerProps) => JSX.Element;
+    Row: (props: DatePickerRowProps) => JSX.Element;
+    RowGroup: (props: DatePickerRowGroupProps) => JSX.Element;
+    RowHeader: (props: DatePickerRowHeaderProps) => JSX.Element;
+    Trigger: (props: DatePickerTriggerProps) => JSX.Element;
+    ViewTrigger: (props: DatePickerViewTriggerProps) => JSX.Element;
+    YearCell: (props: DatePickerYearCellProps) => JSX.Element;
+    YearCellTrigger: (props: DatePickerYearCellTriggerProps) => JSX.Element;
+    YearSelect: (props: DatePickerYearSelectProps) => JSX.Element;
+};
+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, };

package/date-picker/index.mjs

@@ -1,26 +1,55 @@
-export { DatePicker } from './date-picker.mjs';
+import { DatePicker as DatePicker$1 } from './date-picker.mjs';
 export { useDatePickerCellContext } from './date-picker-cell-context.mjs';
-export { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
-export { DatePickerColumnHeader } from './date-picker-column-header.mjs';
-export { DatePickerContent } from './date-picker-content.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';
-export { DatePickerControl } from './date-picker-control.mjs';
-export { DatePickerDayCell } from './date-picker-day-cell.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';
-export { DatePickerDayCellTrigger } from './date-picker-day-cell-trigger.mjs';
-export { DatePickerGrid } from './date-picker-grid.mjs';
-export { DatePickerInput } from './date-picker-input.mjs';
-export { DatePickerMonthCell } from './date-picker-month-cell.mjs';
-export { DatePickerMonthCellTrigger } from './date-picker-month-cell-trigger.mjs';
-export { DatePickerMonthSelect } from './date-picker-month-select.mjs';
-export { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
-export { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
-export { DatePickerRow } from './date-picker-row.mjs';
-export { DatePickerRowGroup } from './date-picker-row-group.mjs';
-export { DatePickerRowHeader } from './date-picker-row-header.mjs';
-export { DatePickerTrigger } from './date-picker-trigger.mjs';
-export { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
-export { DatePickerYearCell } from './date-picker-year-cell.mjs';
-export { DatePickerYearCellTrigger } from './date-picker-year-cell-trigger.mjs';
-export { DatePickerYearSelect } from './date-picker-year-select.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 { 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 { DatePickerTrigger } from './date-picker-trigger.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,
+  MonthSelect: DatePickerMonthSelect,
+  NextTrigger: DatePickerNextTrigger,
+  Positioner: DatePickerPositioner,
+  PrevTrigger: DatePickerPrevTrigger,
+  Row: DatePickerRow,
+  RowGroup: DatePickerRowGroup,
+  RowHeader: DatePickerRowHeader,
+  Trigger: DatePickerTrigger,
+  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 };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const datePicker = require('@zag-js/date-picker');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

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

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
 import * as datePicker from '@zag-js/date-picker';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseDatePickerProps = Optional<datePicker.Context, 'id'>;
-export type UseDatePickerReturn = ReturnType<typeof useDatePicker>;
-export declare const useDatePicker: (props: UseDatePickerProps) => Accessor<datePicker.PublicApi<PropTypes>>;
+export type UseDatePickerReturn = Accessor<datePicker.Api<PropTypes>>;
+export declare const useDatePicker: (props: UseDatePickerProps) => UseDatePickerReturn;

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

@@ -1,6 +1,7 @@
 import * as datePicker from '@zag-js/date-picker';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useDatePicker = props => {

package/dialog/dialog-backdrop.d.ts

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

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

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

package/dialog/dialog-container.d.ts

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

package/dialog/dialog-content.d.ts

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

package/dialog/dialog-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/dialog';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseDialogReturn } from './use-dialog';
 export type DialogContext = UseDialogReturn;
-export declare const DialogProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useDialogContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const DialogProvider: ContextProviderComponent<UseDialogReturn>, useDialogContext: () => UseDialogReturn;

package/dialog/dialog-description.d.ts

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

package/dialog/dialog-title.d.ts

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

package/dialog/dialog-trigger.d.ts

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

package/dialog/dialog.stories.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const DialogWithRenderFn: () => JSX.Element;

package/dialog/dialog.test.d.ts

@@ -0,0 +1 @@
+export {};