@ark-ui/solid 0.8.1 → 0.10.0

package/combobox/combobox.cjs

@@ -11,7 +11,7 @@ const comboboxContext = require('./combobox-context.cjs');
 const useCombobox = require('./use-combobox.cjs');
 
 const Combobox = props => {
-  const [useComboboxProps, localProps] = createSplitProps.createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onOpen', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectInputOnFocus', 'selectOnTab', 'selectionBehavior', 'selectionData', 'translations']);
+  const [useComboboxProps, localProps] = createSplitProps.createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onFocusOutside', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectionData', 'selectOnTab', 'translations']);
   const combobox = useCombobox.useCombobox(useComboboxProps);
   const rootProps = solid.mergeProps(() => combobox().rootProps, localProps);
   const getChildren = () => runIfFn.runIfFn(localProps.children, combobox);

package/combobox/combobox.mjs

@@ -7,7 +7,7 @@ import { ComboboxProvider } from './combobox-context.mjs';
 import { useCombobox } from './use-combobox.mjs';
 
 const Combobox = props => {
-  const [useComboboxProps, localProps] = createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onOpen', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectInputOnFocus', 'selectOnTab', 'selectionBehavior', 'selectionData', 'translations']);
+  const [useComboboxProps, localProps] = createSplitProps()(props, ['allowCustomValue', 'ariaHidden', 'autoFocus', 'blurOnSelect', 'dir', 'disabled', 'focusOnClear', 'form', 'getRootNode', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isCustomValue', 'loop', 'name', 'onClose', 'onFocusOutside', 'onHighlight', 'onInputChange', 'onInputChange', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'onSelect', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectionData', 'selectOnTab', 'translations']);
   const combobox = useCombobox(useComboboxProps);
   const rootProps = mergeProps(() => combobox().rootProps, localProps);
   const getChildren = () => runIfFn(localProps.children, combobox);

package/combobox/combobox.stories.d.ts

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

package/combobox/combobox.test.d.ts

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

package/combobox/index.cjs

@@ -2,27 +2,47 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox = require('./combobox.cjs');
+const combobox$1 = require('./combobox.cjs');
+const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
+const comboboxContext = require('./combobox-context.cjs');
 const comboboxControl = require('./combobox-control.cjs');
 const comboboxInput = require('./combobox-input.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
 const comboboxOption = require('./combobox-option.cjs');
+const comboboxOptionGroup = require('./combobox-option-group.cjs');
+const comboboxOptionGroupLabel = require('./combobox-option-group-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
-const combobox$1 = require('@zag-js/combobox');
-
+const combobox = require('@zag-js/combobox');
 
+const Combobox = Object.assign(combobox$1.Combobox, {
+  Root: combobox$1.Combobox,
+  ClearTrigger: comboboxClearTrigger.ComboboxClearTrigger,
+  Content: comboboxContent.ComboboxContent,
+  Control: comboboxControl.ComboboxControl,
+  Input: comboboxInput.ComboboxInput,
+  Label: comboboxLabel.ComboboxLabel,
+  Option: comboboxOption.ComboboxOption,
+  OptionGroup: comboboxOptionGroup.ComboboxOptionGroup,
+  OptionGroupLabel: comboboxOptionGroupLabel.ComboboxOptionGroupLabel,
+  Positioner: comboboxPositioner.ComboboxPositioner,
+  Trigger: comboboxTrigger.ComboboxTrigger
+});
 
-exports.Combobox = combobox.Combobox;
+exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
+exports.useComboboxContext = comboboxContext.useComboboxContext;
 exports.ComboboxControl = comboboxControl.ComboboxControl;
 exports.ComboboxInput = comboboxInput.ComboboxInput;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
 exports.ComboboxOption = comboboxOption.ComboboxOption;
+exports.ComboboxOptionGroup = comboboxOptionGroup.ComboboxOptionGroup;
+exports.ComboboxOptionGroupLabel = comboboxOptionGroupLabel.ComboboxOptionGroupLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 Object.defineProperty(exports, 'comboboxAnatomy', {
-	enumerable: true,
-	get: () => combobox$1.anatomy
+  enumerable: true,
+  get: () => combobox.anatomy
 });
+exports.Combobox = Combobox;

package/combobox/index.d.ts

@@ -1,9 +1,29 @@
-export { Combobox, type ComboboxProps } from './combobox';
-export { ComboboxContent, type ComboboxContentProps } from './combobox-content';
-export { ComboboxControl, type ComboboxControlProps } from './combobox-control';
-export { ComboboxInput, type ComboboxInputProps } from './combobox-input';
-export { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
-export { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
-export { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
-export { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
-export { comboboxAnatomy } from './combobox.anatomy';
+import { JSX } from 'solid-js';
+import { type ComboboxProps } from './combobox';
+import { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
+import { ComboboxContent, type ComboboxContentProps } from './combobox-content';
+import { useComboboxContext } from './combobox-context';
+import { ComboboxControl, type ComboboxControlProps } from './combobox-control';
+import { ComboboxInput, type ComboboxInputProps } from './combobox-input';
+import { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
+import { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
+import { ComboboxOptionGroup, type ComboboxOptionGroupProps } from './combobox-option-group';
+import { ComboboxOptionGroupLabel, type ComboboxOptionGroupLabelProps } from './combobox-option-group-label';
+import { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
+import { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
+import { comboboxAnatomy } from './combobox.anatomy';
+declare const Combobox: ((props: ComboboxProps) => JSX.Element) & {
+    Root: (props: ComboboxProps) => JSX.Element;
+    ClearTrigger: (props: ComboboxClearTriggerProps) => JSX.Element;
+    Content: (props: ComboboxContentProps) => JSX.Element;
+    Control: (props: ComboboxControlProps) => JSX.Element;
+    Input: (props: ComboboxInputProps) => JSX.Element;
+    Label: (props: ComboboxLabelProps) => JSX.Element;
+    Option: (props: ComboboxOptionProps) => JSX.Element;
+    OptionGroup: (props: ComboboxOptionGroupProps) => JSX.Element;
+    OptionGroupLabel: (props: ComboboxOptionGroupLabelProps) => JSX.Element;
+    Positioner: (props: ComboboxPositionerProps) => JSX.Element;
+    Trigger: (props: ComboboxTriggerProps) => JSX.Element;
+};
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger, comboboxAnatomy, useComboboxContext, };
+export type { ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxLabelProps, ComboboxOptionGroupLabelProps, ComboboxOptionGroupProps, ComboboxOptionProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };

package/combobox/index.mjs

@@ -1,9 +1,29 @@
-export { Combobox } from './combobox.mjs';
-export { ComboboxContent } from './combobox-content.mjs';
-export { ComboboxControl } from './combobox-control.mjs';
-export { ComboboxInput } from './combobox-input.mjs';
-export { ComboboxLabel } from './combobox-label.mjs';
-export { ComboboxOption } from './combobox-option.mjs';
-export { ComboboxPositioner } from './combobox-positioner.mjs';
-export { ComboboxTrigger } from './combobox-trigger.mjs';
+import { Combobox as Combobox$1 } from './combobox.mjs';
+import { ComboboxClearTrigger } from './combobox-clear-trigger.mjs';
+import { ComboboxContent } from './combobox-content.mjs';
+export { useComboboxContext } from './combobox-context.mjs';
+import { ComboboxControl } from './combobox-control.mjs';
+import { ComboboxInput } from './combobox-input.mjs';
+import { ComboboxLabel } from './combobox-label.mjs';
+import { ComboboxOption } from './combobox-option.mjs';
+import { ComboboxOptionGroup } from './combobox-option-group.mjs';
+import { ComboboxOptionGroupLabel } from './combobox-option-group-label.mjs';
+import { ComboboxPositioner } from './combobox-positioner.mjs';
+import { ComboboxTrigger } from './combobox-trigger.mjs';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
+
+const Combobox = Object.assign(Combobox$1, {
+  Root: Combobox$1,
+  ClearTrigger: ComboboxClearTrigger,
+  Content: ComboboxContent,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Label: ComboboxLabel,
+  Option: ComboboxOption,
+  OptionGroup: ComboboxOptionGroup,
+  OptionGroupLabel: ComboboxOptionGroupLabel,
+  Positioner: ComboboxPositioner,
+  Trigger: ComboboxTrigger
+});
+
+export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptionGroup, ComboboxOptionGroupLabel, ComboboxPositioner, ComboboxTrigger };

package/combobox/use-combobox.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const combobox = require('@zag-js/combobox');
 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/combobox/use-combobox.d.ts

@@ -1,32 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as combobox from '@zag-js/combobox';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseComboboxProps = Optional<combobox.Context, 'id'>;
-export type UseComboboxReturn = ReturnType<typeof useCombobox>;
-export declare const useCombobox: (props: UseComboboxProps) => Accessor<{
-    isFocused: boolean;
-    isOpen: boolean;
-    isInputValueEmpty: boolean;
-    inputValue: string;
-    focusedOption: combobox.OptionData | null;
-    selectedValue: string | undefined;
-    setValue(value: string | combobox.OptionData): void;
-    setInputValue(value: string): void;
-    clearValue(): void;
-    focus(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    controlProps: JSX.HTMLAttributes<any>;
-    positionerProps: JSX.HTMLAttributes<any>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    contentProps: JSX.HTMLAttributes<any>;
-    clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionState(props: combobox.OptionProps): {
-        disabled: boolean | undefined;
-        focused: boolean;
-        checked: boolean;
-    };
-    getOptionProps(props: combobox.OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: combobox.OptionGroupProps): JSX.HTMLAttributes<any>;
-}>;
+export type UseComboboxReturn = Accessor<combobox.Api<PropTypes>>;
+export declare const useCombobox: (props: UseComboboxProps) => UseComboboxReturn;

package/combobox/use-combobox.mjs

@@ -1,6 +1,7 @@
 import * as combobox from '@zag-js/combobox';
 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 useCombobox = (props) => {

package/create-split-props.test.d.ts

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

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

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

package/date-picker/date-picker-clear-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 DatePickerClearTriggerProps = HTMLArkProps<'button'>;
 export declare const DatePickerClearTrigger: (props: DatePickerClearTriggerProps) => JSX.Element;

package/date-picker/date-picker-column-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 DatePickerColumnHeaderProps = HTMLArkProps<'div'>;
 export declare const DatePickerColumnHeader: (props: DatePickerColumnHeaderProps) => JSX.Element;

package/date-picker/date-picker-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 DatePickerContentProps = HTMLArkProps<'div'>;
 export declare const DatePickerContent: (props: DatePickerContentProps) => JSX.Element;

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

@@ -1,257 +1,4 @@
-import type { matchView } from '@zag-js/date-picker/dist/date-picker.utils';
-import type { DateView, DateValue, CalendarDate, CalendarDateTime, ZonedDateTime, GridProps, DayCellProps, CellProps, ViewProps } from '@zag-js/date-picker';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseDatePickerReturn } from './use-date-picker';
 export type DatePickerContext = UseDatePickerReturn;
-export declare const DatePickerProvider: ContextProviderComponent<Accessor<{
-    isFocused: boolean;
-    isOpen: boolean | undefined;
-    view: DateView;
-    matchView: typeof matchView;
-    getDaysInWeek(weekIndex: number, from?: DateValue | undefined): DateValue[];
-    getOffset(months: number): {
-        amount: number;
-        visibleRange: {
-            start: CalendarDate | CalendarDateTime | ZonedDateTime;
-            end: CalendarDate | CalendarDateTime | ZonedDateTime;
-        };
-        weeks: DateValue[][];
-    };
-    getMonthDays(from?: DateValue | undefined): DateValue[][];
-    isUnavailable(date: DateValue): boolean;
-    readonly weeks: DateValue[][];
-    weekDays: {
-        value: CalendarDate | CalendarDateTime | ZonedDateTime;
-        short: string;
-        long: string;
-        narrow: string;
-    }[];
-    visibleRangeText: {
-        start: string;
-        end: string;
-        formatted: string;
-    };
-    value: DateValue[];
-    valueAsDate: Date[];
-    valueAsString: string[];
-    focusedValue: DateValue;
-    focusedValueAsDate: Date;
-    focusedValueAsString: string;
-    selectToday(): void;
-    setValue(values: CalendarDate[]): void;
-    setFocusedValue(value: CalendarDate): void;
-    clearValue(): void;
-    open(): void;
-    close(): void;
-    focusMonth(month: number): void;
-    focusYear(year: number): void;
-    visibleRange: {
-        start: DateValue;
-        end: DateValue;
-    };
-    getYears(): {
-        label: string;
-        value: number;
-    }[];
-    getYearsGrid(props?: {
-        columns?: number | undefined;
-    } | undefined): {
-        label: string;
-        value: number;
-    }[][];
-    getDecade(): {
-        start: number | undefined;
-        end: number | undefined;
-    };
-    getMonths(props?: {
-        format?: "short" | "long" | undefined;
-    } | undefined): {
-        label: string;
-        value: number;
-    }[];
-    getMonthsGrid(props?: {
-        columns?: number | undefined;
-        format?: "short" | "long" | undefined;
-    } | undefined): {
-        label: string;
-        value: number;
-    }[][];
-    format(value: CalendarDate, opts?: Intl.DateTimeFormatOptions | undefined): string;
-    setView(view: DateView): void;
-    goToNext(): void;
-    goToPrev(): void;
-    controlProps: JSX.HTMLAttributes<any>;
-    contentProps: JSX.HTMLAttributes<any>;
-    getGridProps(props?: GridProps | undefined): JSX.HTMLAttributes<any>;
-    getDayCellState(props: DayCellProps): {
-        isInvalid: boolean;
-        isDisabled: boolean;
-        isSelected: boolean;
-        isUnavailable: boolean;
-        isOutsideRange: boolean;
-        isInRange: boolean;
-        isFirstInRange: boolean;
-        isLastInRange: boolean;
-        isToday: boolean;
-        isWeekend: boolean;
-        formattedDate: string;
-        readonly isFocused: boolean;
-        readonly ariaLabel: string;
-        readonly isSelectable: boolean;
-    };
-    getDayCellProps(props: DayCellProps): JSX.HTMLAttributes<any>;
-    getDayCellTriggerProps(props: DayCellProps): JSX.HTMLAttributes<any>;
-    getMonthCellState(props: CellProps): {
-        isFocused: boolean;
-        isSelectable: boolean;
-        isSelected: boolean;
-        valueText: string;
-        readonly isDisabled: boolean;
-    };
-    getMonthCellProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getMonthCellTriggerProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getYearCellState(props: CellProps): {
-        isFocused: boolean;
-        isSelectable: boolean;
-        isSelected: boolean;
-        valueText: string;
-        readonly isDisabled: boolean;
-    };
-    getYearCellProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getYearCellTriggerProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getNextTriggerProps(props?: ViewProps | undefined): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getPrevTriggerProps(props?: ViewProps | undefined): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getHeaderProps(props?: ViewProps | undefined): JSX.HTMLAttributes<any>;
-    clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getViewTriggerProps(props?: ViewProps | undefined): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    monthSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-    yearSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-}>>, useDatePickerContext: () => Accessor<{
-    isFocused: boolean;
-    isOpen: boolean | undefined;
-    view: DateView;
-    matchView: typeof matchView;
-    getDaysInWeek(weekIndex: number, from?: DateValue | undefined): DateValue[];
-    getOffset(months: number): {
-        amount: number;
-        visibleRange: {
-            start: CalendarDate | CalendarDateTime | ZonedDateTime;
-            end: CalendarDate | CalendarDateTime | ZonedDateTime;
-        };
-        weeks: DateValue[][];
-    };
-    getMonthDays(from?: DateValue | undefined): DateValue[][];
-    isUnavailable(date: DateValue): boolean;
-    readonly weeks: DateValue[][];
-    weekDays: {
-        value: CalendarDate | CalendarDateTime | ZonedDateTime;
-        short: string;
-        long: string;
-        narrow: string;
-    }[];
-    visibleRangeText: {
-        start: string;
-        end: string;
-        formatted: string;
-    };
-    value: DateValue[];
-    valueAsDate: Date[];
-    valueAsString: string[];
-    focusedValue: DateValue;
-    focusedValueAsDate: Date;
-    focusedValueAsString: string;
-    selectToday(): void;
-    setValue(values: CalendarDate[]): void;
-    setFocusedValue(value: CalendarDate): void;
-    clearValue(): void;
-    open(): void;
-    close(): void;
-    focusMonth(month: number): void;
-    focusYear(year: number): void;
-    visibleRange: {
-        start: DateValue;
-        end: DateValue;
-    };
-    getYears(): {
-        label: string;
-        value: number;
-    }[];
-    getYearsGrid(props?: {
-        columns?: number | undefined;
-    } | undefined): {
-        label: string;
-        value: number;
-    }[][];
-    getDecade(): {
-        start: number | undefined;
-        end: number | undefined;
-    };
-    getMonths(props?: {
-        format?: "short" | "long" | undefined;
-    } | undefined): {
-        label: string;
-        value: number;
-    }[];
-    getMonthsGrid(props?: {
-        columns?: number | undefined;
-        format?: "short" | "long" | undefined;
-    } | undefined): {
-        label: string;
-        value: number;
-    }[][];
-    format(value: CalendarDate, opts?: Intl.DateTimeFormatOptions | undefined): string;
-    setView(view: DateView): void;
-    goToNext(): void;
-    goToPrev(): void;
-    controlProps: JSX.HTMLAttributes<any>;
-    contentProps: JSX.HTMLAttributes<any>;
-    getGridProps(props?: GridProps | undefined): JSX.HTMLAttributes<any>;
-    getDayCellState(props: DayCellProps): {
-        isInvalid: boolean;
-        isDisabled: boolean;
-        isSelected: boolean;
-        isUnavailable: boolean;
-        isOutsideRange: boolean;
-        isInRange: boolean;
-        isFirstInRange: boolean;
-        isLastInRange: boolean;
-        isToday: boolean;
-        isWeekend: boolean;
-        formattedDate: string;
-        readonly isFocused: boolean;
-        readonly ariaLabel: string;
-        readonly isSelectable: boolean;
-    };
-    getDayCellProps(props: DayCellProps): JSX.HTMLAttributes<any>;
-    getDayCellTriggerProps(props: DayCellProps): JSX.HTMLAttributes<any>;
-    getMonthCellState(props: CellProps): {
-        isFocused: boolean;
-        isSelectable: boolean;
-        isSelected: boolean;
-        valueText: string;
-        readonly isDisabled: boolean;
-    };
-    getMonthCellProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getMonthCellTriggerProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getYearCellState(props: CellProps): {
-        isFocused: boolean;
-        isSelectable: boolean;
-        isSelected: boolean;
-        valueText: string;
-        readonly isDisabled: boolean;
-    };
-    getYearCellProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getYearCellTriggerProps(props: CellProps): JSX.HTMLAttributes<any>;
-    getNextTriggerProps(props?: ViewProps | undefined): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getPrevTriggerProps(props?: ViewProps | undefined): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getHeaderProps(props?: ViewProps | undefined): JSX.HTMLAttributes<any>;
-    clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getViewTriggerProps(props?: ViewProps | undefined): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    monthSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-    yearSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-}>;
+export declare const DatePickerProvider: ContextProviderComponent<UseDatePickerReturn>, useDatePickerContext: () => UseDatePickerReturn;

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

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

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

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

package/date-picker/date-picker-day-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 DatePickerDayCellTriggerProps = HTMLArkProps<'button'>;
 export declare const DatePickerDayCellTrigger: (props: DatePickerDayCellTriggerProps) => JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
-import type { JSX } from 'solid-js';
-import type { GridProps } from '@zag-js/date-picker/dist/date-picker.types';
+import { JSX } from 'solid-js';
+import type { GridProps } from '@zag-js/date-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export type DatePickerGridProps = Assign<HTMLArkProps<'div'>, GridProps>;

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

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

package/date-picker/date-picker-month-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 DatePickerMonthCellTriggerProps = HTMLArkProps<'button'>;
 export declare const DatePickerMonthCellTrigger: (props: DatePickerMonthCellTriggerProps) => JSX.Element;

package/date-picker/date-picker-month-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-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;