@ark-ui/solid 0.8.1 → 0.9.0

package/color-picker/index.d.ts

@@ -1,5 +1,6 @@
 export { ColorPicker, type ColorPickerProps } from './color-picker';
 export { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
+export { useColorPickerAreaContext } from './color-picker-area-context';
 export { ColorPickerAreaGradient, type ColorPickerAreaGradientProps, } from './color-picker-area-gradient';
 export { ColorPickerAreaThumb, type ColorPickerAreaThumbProps } from './color-picker-area-thumb';
 export { ColorPickerChannelInput, type ColorPickerChannelInputProps, } from './color-picker-channel-input';
@@ -7,8 +8,10 @@ export { ColorPickerChannelSliderBackground, type ColorPickerChannelSliderBackgr
 export { ColorPickerChannelSliderThumb, type ColorPickerChannelSliderThumbProps, } from './color-picker-channel-slider-thumb';
 export { ColorPickerChannelSliderTrack, type ColorPickerChannelSliderTrackProps, } from './color-picker-channel-slider-track';
 export { ColorPickerContent, type ColorPickerContentProps } from './color-picker-content';
+export { useColorPickerContext } from './color-picker-context';
 export { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger';
 export { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 export { ColorPickerSwatchBackground, type ColorPickerSwatchBackgroundProps, } from './color-picker-swatch-background';
+export { useColorPickerSwatchContext } from './color-picker-swatch-context';
 export { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps, } from './color-picker-swatch-group';
 export { colorPickerAnatomy } from './color-picker.anatomy';

package/color-picker/index.mjs

@@ -1,5 +1,6 @@
 export { ColorPicker } from './color-picker.mjs';
 export { ColorPickerArea } from './color-picker-area.mjs';
+export { useColorPickerAreaContext } from './color-picker-area-context.mjs';
 export { ColorPickerAreaGradient } from './color-picker-area-gradient.mjs';
 export { ColorPickerAreaThumb } from './color-picker-area-thumb.mjs';
 export { ColorPickerChannelInput } from './color-picker-channel-input.mjs';
@@ -7,8 +8,10 @@ export { ColorPickerChannelSliderBackground } from './color-picker-channel-slide
 export { ColorPickerChannelSliderThumb } from './color-picker-channel-slider-thumb.mjs';
 export { ColorPickerChannelSliderTrack } from './color-picker-channel-slider-track.mjs';
 export { ColorPickerContent } from './color-picker-content.mjs';
+export { useColorPickerContext } from './color-picker-context.mjs';
 export { ColorPickerEyeDropperTrigger } from './color-picker-eye-dropper-trigger.mjs';
 export { ColorPickerSwatch } from './color-picker-swatch.mjs';
 export { ColorPickerSwatchBackground } from './color-picker-swatch-background.mjs';
+export { useColorPickerSwatchContext } from './color-picker-swatch-context.mjs';
 export { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
 export { colorPickerAnatomy } from './color-picker.anatomy.mjs';

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

@@ -1,26 +1,7 @@
-import type { ColorFormat, ColorChannelInputProps } from '@zag-js/color-picker/dist/color-picker.types';
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { Accessor } from 'solid-js';
 import * as colorPicker from '@zag-js/color-picker';
 import { type Optional } from '../types';
 export type UseColorPickerProps = Optional<colorPicker.Context, 'id'>;
 export type UseColorPickerReturn = ReturnType<typeof useColorPicker>;
-export declare const useColorPicker: (props: UseColorPickerProps) => Accessor<{
-    isDragging: boolean;
-    value: string;
-    valueAsColor: colorPicker.Color;
-    channels: [colorPicker.ColorChannel, colorPicker.ColorChannel, colorPicker.ColorChannel];
-    setColor(value: string | colorPicker.Color): void;
-    setChannelValue(channel: colorPicker.ColorChannel, value: number): void;
-    setFormat(format: ColorFormat): void;
-    contentProps: JSX.HTMLAttributes<any>;
-    getAreaProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaGradientProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
-    getAreaThumbProps(props: colorPicker.ColorAreaProps): JSX.HTMLAttributes<any>;
-    getChannelSliderTrackProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderBackgroundProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelSliderThumbProps(props: colorPicker.ColorChannelProps): JSX.HTMLAttributes<any>;
-    getChannelInputProps(props: ColorChannelInputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    eyeDropperTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getSwatchBackgroundProps(props: colorPicker.ColorSwatchProps): JSX.HTMLAttributes<any>;
-    getSwatchProps(props: colorPicker.ColorSwatchProps): JSX.HTMLAttributes<any>;
-}>;
+export declare const useColorPicker: (props: UseColorPickerProps) => Accessor<colorPicker.PublicApi<PropTypes>>;

package/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxClearTrigger = props => {
+  const combobox = comboboxContext.useComboboxContext();
+  const clearTriggerProps = solid.mergeProps(() => combobox().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, clearTriggerProps);
+};
+
+exports.ComboboxClearTrigger = ComboboxClearTrigger;

package/combobox/combobox-clear-trigger.d.ts

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

package/combobox/combobox-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 { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxClearTrigger = props => {
+  const combobox = useComboboxContext();
+  const clearTriggerProps = mergeProps(() => combobox().clearTriggerProps, props);
+  return createComponent(ark.button, clearTriggerProps);
+};
+
+export { ComboboxClearTrigger };

package/combobox/combobox-context.d.ts

@@ -1,58 +1,7 @@
-import type { OptionData, OptionProps, OptionGroupProps } from '@zag-js/combobox';
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { PublicApi } from '@zag-js/combobox';
+import type { Accessor } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 import { type UseComboboxReturn } from './use-combobox';
 export type ComboboxContext = UseComboboxReturn;
-export declare const ComboboxProvider: ContextProviderComponent<Accessor<{
-    isFocused: boolean;
-    isOpen: boolean;
-    isInputValueEmpty: boolean;
-    inputValue: string;
-    focusedOption: OptionData | null;
-    selectedValue: string | undefined;
-    setValue(value: string | 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: OptionProps): {
-        disabled: boolean | undefined;
-        focused: boolean;
-        checked: boolean;
-    };
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
-}>>, useComboboxContext: () => Accessor<{
-    isFocused: boolean;
-    isOpen: boolean;
-    isInputValueEmpty: boolean;
-    inputValue: string;
-    focusedOption: OptionData | null;
-    selectedValue: string | undefined;
-    setValue(value: string | 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: OptionProps): {
-        disabled: boolean | undefined;
-        focused: boolean;
-        checked: boolean;
-    };
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
-}>;
+export declare const ComboboxProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useComboboxContext: () => Accessor<PublicApi<PropTypes>>;

package/combobox/combobox-option-group.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 comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroup = props => {
+  const combobox = comboboxContext.useComboboxContext();
+  const contentProps = solid.mergeProps(() => combobox().contentProps, props);
+  return web.createComponent(factory.ark.ul, contentProps);
+};
+
+exports.ComboboxOptionGroup = ComboboxOptionGroup;

package/combobox/combobox-option-group.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { OptionGroupProps } from '@zag-js/combobox';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ComboboxOptionGroupProps = Assign<HTMLArkProps<'ul'>, OptionGroupProps>;
+export declare const ComboboxOptionGroup: (props: ComboboxOptionGroupProps) => JSX.Element;

package/combobox/combobox-option-group.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroup = props => {
+  const combobox = useComboboxContext();
+  const contentProps = mergeProps(() => combobox().contentProps, props);
+  return createComponent(ark.ul, contentProps);
+};
+
+export { ComboboxOptionGroup };

package/combobox/index.cjs

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const combobox = 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 comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
 const combobox$1 = require('@zag-js/combobox');
@@ -15,11 +18,14 @@ const combobox$1 = require('@zag-js/combobox');
 
 
 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.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 Object.defineProperty(exports, 'comboboxAnatomy', {

package/combobox/index.d.ts

@@ -1,9 +1,12 @@
 export { Combobox, type ComboboxProps } from './combobox';
+export { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
 export { ComboboxContent, type ComboboxContentProps } from './combobox-content';
+export { useComboboxContext } from './combobox-context';
 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 { ComboboxOptionGroup, type ComboboxOptionGroupProps } from './combobox-option-group';
 export { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
 export { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
 export { comboboxAnatomy } from './combobox.anatomy';

package/combobox/index.mjs

@@ -1,9 +1,12 @@
 export { Combobox } from './combobox.mjs';
+export { ComboboxClearTrigger } from './combobox-clear-trigger.mjs';
 export { ComboboxContent } from './combobox-content.mjs';
+export { useComboboxContext } from './combobox-context.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 { ComboboxOptionGroup } from './combobox-option-group.mjs';
 export { ComboboxPositioner } from './combobox-positioner.mjs';
 export { ComboboxTrigger } from './combobox-trigger.mjs';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/combobox/use-combobox.d.ts

@@ -1,32 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
+import type { PropTypes } from '@zag-js/solid';
+import type { Accessor } from 'solid-js';
 import * as combobox from '@zag-js/combobox';
 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 declare const useCombobox: (props: UseComboboxProps) => Accessor<combobox.PublicApi<PropTypes>>;

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

@@ -1,257 +1,7 @@
-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 { PropTypes } from '@zag-js/solid';
+import type { PublicApi } from '@zag-js/date-picker';
+import type { Accessor } from 'solid-js';
 import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
 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<Accessor<PublicApi<PropTypes>>>, useDatePickerContext: () => Accessor<PublicApi<PropTypes>>;

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 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-view-trigger.d.ts

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

package/date-picker/index.cjs

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const datePicker = require('./date-picker.cjs');
+const datePickerCellContext = require('./date-picker-cell-context.cjs');
 const datePickerClearTrigger = require('./date-picker-clear-trigger.cjs');
 const datePickerColumnHeader = require('./date-picker-column-header.cjs');
 const datePickerContent = require('./date-picker-content.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
 const datePickerControl = require('./date-picker-control.cjs');
 const datePickerDayCell = require('./date-picker-day-cell.cjs');
+const datePickerDayCellContext = require('./date-picker-day-cell-context.cjs');
 const datePickerDayCellTrigger = require('./date-picker-day-cell-trigger.cjs');
 const datePickerGrid = require('./date-picker-grid.cjs');
 const datePickerInput = require('./date-picker-input.cjs');
@@ -29,11 +32,14 @@ const datePicker_anatomy = require('./date-picker.anatomy.cjs');
 
 
 exports.DatePicker = datePicker.DatePicker;
+exports.useDatePickerCellContext = datePickerCellContext.useDatePickerCellContext;
 exports.DatePickerClearTrigger = datePickerClearTrigger.DatePickerClearTrigger;
 exports.DatePickerColumnHeader = datePickerColumnHeader.DatePickerColumnHeader;
 exports.DatePickerContent = datePickerContent.DatePickerContent;
+exports.useDatePickerContext = datePickerContext.useDatePickerContext;
 exports.DatePickerControl = datePickerControl.DatePickerControl;
 exports.DatePickerDayCell = datePickerDayCell.DatePickerDayCell;
+exports.useDatePickerDayCellContext = datePickerDayCellContext.useDatePickerDayCellContext;
 exports.DatePickerDayCellTrigger = datePickerDayCellTrigger.DatePickerDayCellTrigger;
 exports.DatePickerGrid = datePickerGrid.DatePickerGrid;
 exports.DatePickerInput = datePickerInput.DatePickerInput;

package/date-picker/index.d.ts

@@ -1,9 +1,12 @@
 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';

package/date-picker/index.mjs

@@ -1,9 +1,12 @@
 export { DatePicker } 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';
+export { useDatePickerContext } from './date-picker-context.mjs';
 export { DatePickerControl } from './date-picker-control.mjs';
 export { 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';