@kalyx/react 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -1,17 +1,742 @@
-export { DatePicker } from './components/DatePicker/index.js';
-export { RangePicker } from './components/RangePicker/index.js';
-export { TimePicker } from './components/TimePicker/index.js';
-export { DateTimePicker } from './components/DateTimePicker/index.js';
-export { useDatePicker } from './hooks/useDatePicker.js';
-export { useRangePicker } from './hooks/useRangePicker.js';
-export { useTimePicker } from './hooks/useTimePicker.js';
-export type { DatePickerRootProps, DatePickerInputProps, DatePickerTriggerProps, DatePickerPopoverProps, DatePickerCalendarProps, DatePickerCalendarClassNames, DatePickerMonthGridProps, DatePickerMonthGridClassNames, DatePickerYearGridProps, DatePickerYearGridClassNames, } from './components/DatePicker/index.js';
-export type { RangePickerRootProps, RangePickerInputProps, RangeInputPart, RangePickerPopoverProps, RangePickerCalendarProps, RangePickerPresetsProps, RangePickerPresetsClassNames, RangePickerPresetProps, PresetKey, RangePickerCalendarClassNames, } from './components/RangePicker/index.js';
-export type { TimePickerRootProps, TimePickerInputProps, TimePickerHourListProps, TimePickerHourListClassNames, TimePickerMinuteListProps, TimePickerMinuteListClassNames, TimePickerAmPmToggleProps, TimePickerAmPmToggleClassNames, } from './components/TimePicker/index.js';
-export type { DateTimePickerRootProps, DateTimePickerInputProps, } from './components/DateTimePicker/index.js';
-export type { UseDatePickerOptions, UseDatePickerReturn } from './hooks/useDatePicker.js';
-export type { UseRangePickerOptions, UseRangePickerReturn } from './hooks/useRangePicker.js';
-export type { UseTimePickerOptions, UseTimePickerReturn } from './hooks/useTimePicker.js';
-export { DateFnsAdapter } from '@kalyx/core';
-export type { ISODateString, DateRange, DisabledRule, DateAdapter, CalendarDay, TimeValue, } from '@kalyx/core';
-//# sourceMappingURL=index.d.ts.map
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ISODateString, DisabledRule, WeekStartsOn, DateAdapter, DateRange, CalendarGrid, TimeValue } from '@kalyx/core';
+export { CalendarDay, DateAdapter, DateFnsAdapter, DateRange, DisabledRule, ISODateString, TimeValue } from '@kalyx/core';
+
+/**
+ * Props for the DatePicker Root component.
+ *
+ * @example Controlled
+ * ```tsx
+ * <DatePicker value={date} onChange={setDate}>
+ *   <DatePicker.Input />
+ *   <DatePicker.Popover>
+ *     <DatePicker.Calendar />
+ *   </DatePicker.Popover>
+ * </DatePicker>
+ * ```
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <DatePicker defaultValue="2026-01-15T00:00:00.000Z">
+ *   <DatePicker.Input />
+ * </DatePicker>
+ * ```
+ */
+interface DatePickerRootProps {
+    /** Selected date (controlled, ISO 8601 UTC). `null` means empty. */
+    value?: ISODateString | null;
+    /** Initial date (uncontrolled) */
+    defaultValue?: ISODateString;
+    /** Callback fired when the date changes */
+    onChange?: (value: ISODateString | null) => void;
+    /** Disabled rules */
+    disabled?: DisabledRule[] | boolean;
+    /** Read-only */
+    readOnly?: boolean;
+    /** Week start day */
+    weekStartsOn?: WeekStartsOn;
+    /** Date display format */
+    displayFormat?: string;
+    /** BCP 47 locale (e.g., "en-US", "ko-KR", "ja-JP") */
+    locale?: string;
+    /** Date adapter */
+    adapter?: DateAdapter;
+    /** Child components */
+    children: ReactNode;
+}
+declare function DatePickerRoot({ value: controlledValue, defaultValue, onChange, disabled, readOnly, weekStartsOn, displayFormat, locale, adapter, children, }: DatePickerRootProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    children?: ReactNode;
+}
+declare function DatePickerPopover({ children, ...props }: DatePickerPopoverProps): react_jsx_runtime.JSX.Element | null;
+
+interface DatePickerCalendarClassNames {
+    root?: string;
+    header?: string;
+    title?: string;
+    navButton?: string;
+    grid?: string;
+    gridRow?: string;
+    gridCell?: string;
+    day?: string;
+    daySelected?: string;
+    dayToday?: string;
+    dayDisabled?: string;
+    dayOutsideMonth?: string;
+    weekdayHeader?: string;
+}
+interface DatePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    classNames?: DatePickerCalendarClassNames;
+    /** Called when the title ("January 2026") is clicked. Useful for switching to Month/Year views. */
+    onTitleClick?: () => void;
+}
+declare function DatePickerCalendar({ classNames, onTitleClick, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerMonthGridClassNames {
+    root?: string;
+    header?: string;
+    title?: string;
+    navButton?: string;
+    grid?: string;
+    month?: string;
+    monthSelected?: string;
+    monthCurrent?: string;
+}
+interface DatePickerMonthGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    classNames?: DatePickerMonthGridClassNames;
+    /** Called when a month is selected. Typically used to switch back to the day view. */
+    onSelect?: () => void;
+    /** Called when the title (year) is clicked. Useful for switching to the year view. */
+    onTitleClick?: () => void;
+}
+/**
+ * DatePicker.MonthGrid — Quickly pick a month from a 12-month grid.
+ * Click Calendar title -> MonthGrid -> click a month -> back to Calendar.
+ *
+ * @example
+ * ```tsx
+ * {view === 'months' && (
+ *   <DatePicker.MonthGrid
+ *     onSelect={() => setView('days')}
+ *     onTitleClick={() => setView('years')}
+ *   />
+ * )}
+ * ```
+ */
+declare function DatePickerMonthGrid({ classNames, onSelect, onTitleClick, ...props }: DatePickerMonthGridProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerYearGridClassNames {
+    root?: string;
+    header?: string;
+    title?: string;
+    navButton?: string;
+    grid?: string;
+    year?: string;
+    yearSelected?: string;
+    yearCurrent?: string;
+}
+interface DatePickerYearGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    classNames?: DatePickerYearGridClassNames;
+    /** Called when a year is selected. Typically used to switch back to the month view. */
+    onSelect?: () => void;
+}
+/**
+ * DatePicker.YearGrid — Quickly pick a year from a 12-year grid.
+ * Click MonthGrid title -> YearGrid -> click a year -> back to MonthGrid.
+ *
+ * @example
+ * ```tsx
+ * {view === 'years' && (
+ *   <DatePicker.YearGrid onSelect={() => setView('months')} />
+ * )}
+ * ```
+ */
+declare function DatePickerYearGrid({ classNames, onSelect, ...props }: DatePickerYearGridProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    /** Date display format (defaults to parent's displayFormat) */
+    format?: string;
+}
+
+interface DatePickerTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children?: ReactNode;
+}
+
+/**
+ * DatePicker — Headless, SSR-safe React DatePicker
+ *
+ * @example Basic
+ * ```tsx
+ * <DatePicker value={date} onChange={setDate}>
+ *   <DatePicker.Input placeholder="날짜 선택" />
+ *   <DatePicker.Popover>
+ *     <DatePicker.Calendar />
+ *   </DatePicker.Popover>
+ * </DatePicker>
+ * ```
+ *
+ * @example Month/Year quick navigation
+ * ```tsx
+ * const [view, setView] = useState('days');
+ * <DatePicker value={date} onChange={setDate}>
+ *   <DatePicker.Input />
+ *   <DatePicker.Popover>
+ *     {view === 'days' && <DatePicker.Calendar onTitleClick={() => setView('months')} />}
+ *     {view === 'months' && <DatePicker.MonthGrid onSelect={() => setView('days')} onTitleClick={() => setView('years')} />}
+ *     {view === 'years' && <DatePicker.YearGrid onSelect={() => setView('months')} />}
+ *   </DatePicker.Popover>
+ * </DatePicker>
+ * ```
+ */
+declare const DatePicker: typeof DatePickerRoot & {
+    Input: react.ForwardRefExoticComponent<DatePickerInputProps & react.RefAttributes<HTMLInputElement>>;
+    Trigger: react.ForwardRefExoticComponent<DatePickerTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Popover: typeof DatePickerPopover;
+    Calendar: typeof DatePickerCalendar;
+    MonthGrid: typeof DatePickerMonthGrid;
+    YearGrid: typeof DatePickerYearGrid;
+};
+
+/**
+ * Props for the RangePicker Root component.
+ *
+ * @example
+ * ```tsx
+ * <RangePicker value={range} onChange={setRange}>
+ *   <RangePicker.Input part="start" />
+ *   <RangePicker.Input part="end" />
+ *   <RangePicker.Popover>
+ *     <RangePicker.Calendar />
+ *   </RangePicker.Popover>
+ * </RangePicker>
+ * ```
+ */
+interface RangePickerRootProps {
+    /** Selected range (controlled). `{ start, end }` with ISO strings or null. */
+    value?: DateRange;
+    /** Initial range (uncontrolled) */
+    defaultValue?: DateRange;
+    /** Callback fired when the range changes */
+    onChange?: (range: DateRange) => void;
+    /** Disabled rules */
+    disabled?: DisabledRule[] | boolean;
+    /** Read-only */
+    readOnly?: boolean;
+    /** Week start day */
+    weekStartsOn?: WeekStartsOn;
+    /** Date display format */
+    displayFormat?: string;
+    /** BCP 47 locale */
+    locale?: string;
+    /** Date adapter */
+    adapter?: DateAdapter;
+    /** Child components */
+    children: ReactNode;
+}
+declare function RangePickerRoot({ value: controlledValue, defaultValue, onChange, disabled, readOnly, weekStartsOn, displayFormat, locale, adapter, children, }: RangePickerRootProps): react_jsx_runtime.JSX.Element;
+
+interface RangePickerPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    children?: ReactNode;
+}
+declare function RangePickerPopover({ children, ...props }: RangePickerPopoverProps): react_jsx_runtime.JSX.Element | null;
+
+interface RangePickerCalendarClassNames {
+    root?: string;
+    header?: string;
+    title?: string;
+    navButton?: string;
+    grid?: string;
+    gridRow?: string;
+    gridCell?: string;
+    day?: string;
+    daySelected?: string;
+    dayToday?: string;
+    dayDisabled?: string;
+    dayOutsideMonth?: string;
+    dayRangeStart?: string;
+    dayRangeEnd?: string;
+    dayInRange?: string;
+    weekdayHeader?: string;
+}
+interface RangePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    classNames?: RangePickerCalendarClassNames;
+}
+declare function RangePickerCalendar({ classNames, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
+
+/** Predefined preset keys. Custom ranges are also supported. */
+type PresetKey = 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'thisYear';
+interface RangePickerPresetsClassNames {
+    root?: string;
+    preset?: string;
+    presetActive?: string;
+}
+interface RangePickerPresetsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    classNames?: RangePickerPresetsClassNames;
+    children?: ReactNode;
+}
+/**
+ * RangePicker.Presets — Container that wraps preset buttons.
+ * Place `RangePicker.Preset` buttons inside.
+ *
+ * @example
+ * ```tsx
+ * <RangePicker.Presets>
+ *   <RangePicker.Preset value="last7days">Last 7 days</RangePicker.Preset>
+ *   <RangePicker.Preset value="thisMonth">This month</RangePicker.Preset>
+ * </RangePicker.Presets>
+ * ```
+ */
+declare function RangePickerPresets({ classNames, children, ...props }: RangePickerPresetsProps): react_jsx_runtime.JSX.Element;
+interface RangePickerPresetProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Predefined preset key; omit when passing `range` directly */
+    value?: PresetKey;
+    /** Pass a range directly (alternative to `value`) */
+    range?: DateRange;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * RangePicker.Preset — One-click preset button to select a date range.
+ *
+ * Pass either `value` (a preset key) or `range` (a direct range).
+ *
+ * @example
+ * ```tsx
+ * <RangePicker.Preset value="last7days">Last 7 days</RangePicker.Preset>
+ * <RangePicker.Preset range={{ start: "2026-01-01T...", end: "2026-03-31T..." }}>
+ *   Q1 2026
+ * </RangePicker.Preset>
+ * ```
+ */
+declare function RangePickerPreset({ value: presetKey, range: directRange, children, onClick, ...props }: RangePickerPresetProps): react_jsx_runtime.JSX.Element;
+
+type RangeInputPart = 'start' | 'end';
+interface RangePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    /** Which part this input represents (start | end) */
+    part: RangeInputPart;
+    /** Date display format (defaults to parent's displayFormat) */
+    format?: string;
+}
+
+/**
+ * RangePicker — Headless date-range picker component
+ *
+ * @example Basic
+ * ```tsx
+ * <RangePicker value={range} onChange={setRange}>
+ *   <RangePicker.Input part="start" />
+ *   <RangePicker.Input part="end" />
+ *   <RangePicker.Popover>
+ *     <RangePicker.Calendar />
+ *   </RangePicker.Popover>
+ * </RangePicker>
+ * ```
+ *
+ * @example Presets (dashboard)
+ * ```tsx
+ * <RangePicker value={range} onChange={setRange}>
+ *   <RangePicker.Input part="start" />
+ *   <RangePicker.Input part="end" />
+ *   <RangePicker.Popover>
+ *     <RangePicker.Presets>
+ *       <RangePicker.Preset value="last7days">Last 7 days</RangePicker.Preset>
+ *       <RangePicker.Preset value="last30days">Last 30 days</RangePicker.Preset>
+ *       <RangePicker.Preset value="thisMonth">This month</RangePicker.Preset>
+ *     </RangePicker.Presets>
+ *     <RangePicker.Calendar />
+ *   </RangePicker.Popover>
+ * </RangePicker>
+ * ```
+ */
+declare const RangePicker: typeof RangePickerRoot & {
+    Input: react.ForwardRefExoticComponent<RangePickerInputProps & react.RefAttributes<HTMLInputElement>>;
+    Popover: typeof RangePickerPopover;
+    Calendar: typeof RangePickerCalendar;
+    Presets: typeof RangePickerPresets;
+    Preset: typeof RangePickerPreset;
+};
+
+type TimePickerFormat = '12h' | '24h';
+
+/**
+ * Props for the TimePicker Root component.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker value={time} onChange={setTime} format="24h" step={15}>
+ *   <TimePicker.Input />
+ *   <TimePicker.HourList />
+ *   <TimePicker.MinuteList />
+ *   <TimePicker.AmPmToggle />
+ * </TimePicker>
+ * ```
+ */
+interface TimePickerRootProps {
+    /** Selected time (controlled, ISO 8601 UTC). The date portion is ignored; only the time is used. */
+    value?: ISODateString | null;
+    /** Initial time (uncontrolled) */
+    defaultValue?: ISODateString;
+    /** Callback fired when the time changes */
+    onChange?: (value: ISODateString | null) => void;
+    /** 12-hour or 24-hour mode */
+    format?: TimePickerFormat;
+    /** Minute step (e.g., 1, 5, 10, 15, 30) */
+    step?: number;
+    /** Whether to display seconds */
+    withSeconds?: boolean;
+    /** Whether entire picker is disabled */
+    disabled?: boolean;
+    /** Read-only */
+    readOnly?: boolean;
+    /** Child components */
+    children: ReactNode;
+}
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, disabled, readOnly, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerHourListClassNames {
+    root?: string;
+    option?: string;
+    optionSelected?: string;
+}
+interface TimePickerHourListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'role' | 'children'> {
+    classNames?: TimePickerHourListClassNames;
+}
+/**
+ * TimePicker.HourList — `role="listbox"` pattern for hour selection.
+ * Renders differently depending on 12h/24h mode.
+ *
+ * ARIA-standard listbox: the <li role="option"> element itself is interactive.
+ * Keyboard: ArrowUp/ArrowDown to navigate, Enter/Space to select.
+ */
+declare function TimePickerHourList({ classNames, ...props }: TimePickerHourListProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerMinuteListClassNames {
+    root?: string;
+    option?: string;
+    optionSelected?: string;
+}
+interface TimePickerMinuteListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'role' | 'children'> {
+    classNames?: TimePickerMinuteListClassNames;
+}
+/**
+ * TimePicker.MinuteList — `role="listbox"` pattern for minute selection.
+ * The displayed minutes depend on the `step` prop (e.g., step=15 -> [0, 15, 30, 45]).
+ */
+declare function TimePickerMinuteList({ classNames, ...props }: TimePickerMinuteListProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerAmPmToggleClassNames {
+    root?: string;
+    option?: string;
+    optionSelected?: string;
+}
+interface TimePickerAmPmToggleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    classNames?: TimePickerAmPmToggleClassNames;
+}
+/**
+ * TimePicker.AmPmToggle — AM/PM toggle shown only in 12-hour mode.
+ * Returns null in 24-hour mode.
+ */
+declare function TimePickerAmPmToggle({ classNames, ...props }: TimePickerAmPmToggleProps): react_jsx_runtime.JSX.Element | null;
+
+interface TimePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+}
+
+/**
+ * TimePicker — Headless time-picker component
+ *
+ * @example
+ * ```tsx
+ * <TimePicker value={time} onChange={setTime} format="24h" step={15}>
+ *   <TimePicker.Input />
+ *   <div>
+ *     <TimePicker.HourList />
+ *     <TimePicker.MinuteList />
+ *     <TimePicker.AmPmToggle />
+ *   </div>
+ * </TimePicker>
+ * ```
+ */
+declare const TimePicker: typeof TimePickerRoot & {
+    Input: react.ForwardRefExoticComponent<TimePickerInputProps & react.RefAttributes<HTMLInputElement>>;
+    HourList: typeof TimePickerHourList;
+    MinuteList: typeof TimePickerMinuteList;
+    AmPmToggle: typeof TimePickerAmPmToggle;
+};
+
+/**
+ * Props for the DateTimePicker Root component.
+ * Internally provides both DatePickerContext and TimePickerContext (context bridging).
+ *
+ * @example
+ * ```tsx
+ * <DateTimePicker value={dt} onChange={setDt} format="24h" step={15}>
+ *   <DateTimePicker.Input />
+ *   <DateTimePicker.Popover>
+ *     <DateTimePicker.Calendar />
+ *     <DateTimePicker.HourList />
+ *     <DateTimePicker.MinuteList />
+ *   </DateTimePicker.Popover>
+ * </DateTimePicker>
+ * ```
+ */
+interface DateTimePickerRootProps {
+    /** Selected datetime (controlled, ISO 8601 UTC). Includes both date and time. */
+    value?: ISODateString | null;
+    /** Initial datetime (uncontrolled) */
+    defaultValue?: ISODateString;
+    /** Callback fired when the datetime changes */
+    onChange?: (value: ISODateString | null) => void;
+    /** 12-hour or 24-hour mode */
+    format?: TimePickerFormat;
+    /** Minute step (e.g., 1, 5, 15, 30) */
+    step?: number;
+    /** Disabled rules (applied to dates) */
+    disabled?: DisabledRule[] | boolean;
+    /** Read-only */
+    readOnly?: boolean;
+    /** Week start day */
+    weekStartsOn?: WeekStartsOn;
+    /** Date+time display format (for Input) */
+    displayFormat?: string;
+    /** BCP 47 locale */
+    locale?: string;
+    /** Date adapter */
+    adapter?: DateAdapter;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * DateTimePicker.Root — Combined DatePicker + TimePicker component.
+ *
+ * Manages a single ISO datetime as the source of truth while providing both
+ * DatePickerContext and TimePickerContext internally. This lets existing
+ * components such as DatePicker.Calendar and TimePicker.HourList be reused as-is.
+ *
+ * Key behavior:
+ * - Clicking a day in Calendar -> changes only the date, preserves the time, keeps popover open
+ * - Changing time in TimePicker -> changes only the time, preserves the date
+ * - Escape / outside click -> close the popover (commit)
+ */
+declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, disabled, readOnly, weekStartsOn, displayFormat, locale, adapter, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
+
+interface DateTimePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+}
+
+/**
+ * DateTimePicker — Combined component for selecting both date and time.
+ *
+ * Manages a single ISO datetime as the source of truth while providing both
+ * DatePickerContext and TimePickerContext internally. This lets existing
+ * components such as DatePicker.Calendar and TimePicker.HourList work as-is.
+ *
+ * @example
+ * ```tsx
+ * <DateTimePicker value={dt} onChange={setDt} format="24h" step={15}>
+ *   <DateTimePicker.Input />
+ *   <DateTimePicker.Popover>
+ *     <DateTimePicker.Calendar />
+ *     <DateTimePicker.HourList />
+ *     <DateTimePicker.MinuteList />
+ *   </DateTimePicker.Popover>
+ * </DateTimePicker>
+ * ```
+ *
+ * @example 12-hour mode
+ * ```tsx
+ * <DateTimePicker value={dt} onChange={setDt} format="12h" step={15}>
+ *   <DateTimePicker.Input />
+ *   <DateTimePicker.Popover>
+ *     <DateTimePicker.Calendar />
+ *     <DateTimePicker.HourList />
+ *     <DateTimePicker.MinuteList />
+ *     <DateTimePicker.AmPmToggle />
+ *   </DateTimePicker.Popover>
+ * </DateTimePicker>
+ * ```
+ */
+declare const DateTimePicker: typeof DateTimePickerRoot & {
+    Input: react.ForwardRefExoticComponent<DateTimePickerInputProps & react.RefAttributes<HTMLInputElement>>;
+    Popover: typeof DatePickerPopover;
+    Calendar: typeof DatePickerCalendar;
+    MonthGrid: typeof DatePickerMonthGrid;
+    YearGrid: typeof DatePickerYearGrid;
+    HourList: typeof TimePickerHourList;
+    MinuteList: typeof TimePickerMinuteList;
+    AmPmToggle: typeof TimePickerAmPmToggle;
+};
+
+interface UseDatePickerOptions {
+    /** Selected date (controlled mode) */
+    value?: ISODateString | null;
+    /** Initial date (uncontrolled mode) */
+    defaultValue?: ISODateString;
+    /** Callback fired when the date changes */
+    onChange?: (value: ISODateString | null) => void;
+    /** Rules that mark days as disabled */
+    disabled?: DisabledRule[];
+    /** Day the week starts on */
+    weekStartsOn?: WeekStartsOn;
+    /** Date adapter */
+    adapter?: DateAdapter;
+}
+interface UseDatePickerReturn {
+    /** Currently selected date (ISO string) */
+    value: ISODateString | null;
+    /** Whether the popover is open */
+    isOpen: boolean;
+    /** Open the popover */
+    open: () => void;
+    /** Close the popover */
+    close: () => void;
+    /** Toggle the popover */
+    toggle: () => void;
+    /** Select a date */
+    selectDate: (iso: ISODateString | null) => void;
+    /** Month currently displayed (ISO string) */
+    viewMonth: ISODateString;
+    /** Change the displayed month */
+    setViewMonth: (iso: ISODateString) => void;
+    /** Calendar grid data */
+    calendar: CalendarGrid;
+    /** Currently focused date */
+    focusedDate: ISODateString;
+    /** Update the focused date */
+    setFocusedDate: (iso: ISODateString) => void;
+    /** Move to the previous month */
+    previousMonth: () => void;
+    /** Move to the next month */
+    nextMonth: () => void;
+    /** Unique ID */
+    pickerId: string;
+    /** Date adapter */
+    adapter: DateAdapter;
+}
+/**
+ * Hook that manages DatePicker state.
+ * Use this when you want to implement a fully custom UI without the built-in components.
+ *
+ * @example
+ * ```tsx
+ * function MyDatePicker() {
+ *   const { value, isOpen, calendar, open, selectDate } = useDatePicker({
+ *     onChange: (iso) => console.log(iso),
+ *   });
+ *   // ... custom rendering
+ * }
+ * ```
+ */
+declare function useDatePicker(options?: UseDatePickerOptions): UseDatePickerReturn;
+
+/** Which part to select next (start | end) */
+type RangeSelectingTarget = 'start' | 'end';
+
+interface UseRangePickerOptions {
+    /** Selected range (controlled mode) */
+    value?: DateRange;
+    /** Initial range (uncontrolled mode) */
+    defaultValue?: DateRange;
+    /** Callback fired when the range changes */
+    onChange?: (range: DateRange) => void;
+    /** Rules that mark days as disabled */
+    disabled?: DisabledRule[];
+    /** Day the week starts on */
+    weekStartsOn?: WeekStartsOn;
+    /** Date adapter */
+    adapter?: DateAdapter;
+}
+interface UseRangePickerReturn {
+    /** Currently selected range */
+    value: DateRange;
+    /** Which endpoint will be selected next */
+    selectingTarget: RangeSelectingTarget;
+    /** Handler for clicking a single date */
+    selectDate: (iso: ISODateString) => void;
+    /** Set the range directly */
+    setRange: (range: DateRange) => void;
+    /** Whether the popover is open */
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Hovered date (for range preview) */
+    hoverDate: ISODateString | null;
+    setHoverDate: (iso: ISODateString | null) => void;
+    /** Month currently displayed */
+    viewMonth: ISODateString;
+    setViewMonth: (iso: ISODateString) => void;
+    /** Calendar grid */
+    calendar: CalendarGrid;
+    /** Currently focused date */
+    focusedDate: ISODateString;
+    setFocusedDate: (iso: ISODateString) => void;
+    /** Move to the previous month */
+    previousMonth: () => void;
+    /** Move to the next month */
+    nextMonth: () => void;
+    /** Unique ID */
+    pickerId: string;
+    /** Date adapter */
+    adapter: DateAdapter;
+}
+/**
+ * Hook that manages RangePicker state.
+ * Use this when you want to build a fully custom UI without the built-in components.
+ *
+ * @example
+ * ```tsx
+ * function MyRangePicker() {
+ *   const { value, calendar, selectDate, selectingTarget } = useRangePicker({
+ *     onChange: (range) => console.log(range.start, range.end),
+ *   });
+ *   // selectingTarget === 'start' -> waiting for start date
+ *   // selectingTarget === 'end'   -> waiting for end date
+ * }
+ * ```
+ */
+declare function useRangePicker(options?: UseRangePickerOptions): UseRangePickerReturn;
+
+interface UseTimePickerOptions {
+    /** Selected time (controlled mode) */
+    value?: ISODateString | null;
+    /** Initial time (uncontrolled mode) */
+    defaultValue?: ISODateString;
+    /** Callback fired when the time changes */
+    onChange?: (value: ISODateString | null) => void;
+    /** 12h or 24h format */
+    format?: TimePickerFormat;
+    /** Minute step */
+    step?: number;
+    /** Whether seconds are shown */
+    withSeconds?: boolean;
+}
+interface UseTimePickerReturn {
+    /** Current ISO datetime value */
+    value: ISODateString | null;
+    /** Current time (TimeValue) */
+    currentTime: TimeValue;
+    /** Update part of the time */
+    setTime: (partial: Partial<TimeValue>) => void;
+    /** Set the hour directly (1-12 in 12h mode, 0-23 in 24h mode) */
+    setHour: (hour: number) => void;
+    /** Set the minute */
+    setMinute: (minute: number) => void;
+    /** Set the second */
+    setSecond: (second: number) => void;
+    /** Change AM/PM (12h mode only) */
+    setPeriod: (period: 'AM' | 'PM') => void;
+    /** Available hour list */
+    availableHours: number[];
+    /** Available minute list (respects step) */
+    availableMinutes: number[];
+    /** 12h or 24h mode */
+    format: TimePickerFormat;
+    /** Hour value for display (1-12 in 12h mode) */
+    displayHour: number;
+    /** Current AM/PM (12h mode only, null in 24h) */
+    period: 'AM' | 'PM' | null;
+    /** Unique ID */
+    pickerId: string;
+}
+/**
+ * Hook that manages TimePicker state.
+ * Use this when you want to build a fully custom UI without the built-in components.
+ *
+ * @example
+ * ```tsx
+ * function MyTimePicker() {
+ *   const {
+ *     currentTime, displayHour, period,
+ *     availableHours, availableMinutes,
+ *     setHour, setMinute, setPeriod,
+ *   } = useTimePicker({ format: '12h', step: 15 });
+ *   // displayHour = 1-12, period = "AM" | "PM"
+ *   // availableMinutes = [0, 15, 30, 45]
+ * }
+ * ```
+ */
+declare function useTimePicker(options?: UseTimePickerOptions): UseTimePickerReturn;
+
+export { DatePicker, type DatePickerCalendarClassNames, type DatePickerCalendarProps, type DatePickerInputProps, type DatePickerMonthGridClassNames, type DatePickerMonthGridProps, type DatePickerPopoverProps, type DatePickerRootProps, type DatePickerTriggerProps, type DatePickerYearGridClassNames, type DatePickerYearGridProps, DateTimePicker, type DateTimePickerInputProps, type DateTimePickerRootProps, type PresetKey, type RangeInputPart, RangePicker, type RangePickerCalendarClassNames, type RangePickerCalendarProps, type RangePickerInputProps, type RangePickerPopoverProps, type RangePickerPresetProps, type RangePickerPresetsClassNames, type RangePickerPresetsProps, type RangePickerRootProps, TimePicker, type TimePickerAmPmToggleClassNames, type TimePickerAmPmToggleProps, type TimePickerHourListClassNames, type TimePickerHourListProps, type TimePickerInputProps, type TimePickerMinuteListClassNames, type TimePickerMinuteListProps, type TimePickerRootProps, type UseDatePickerOptions, type UseDatePickerReturn, type UseRangePickerOptions, type UseRangePickerReturn, type UseTimePickerOptions, type UseTimePickerReturn, useDatePicker, useRangePicker, useTimePicker };