@kalyx/react 1.0.0-rc.0 → 1.0.0-rc.10

package/dist/index.d.cts

@@ -2,7 +2,7 @@ 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, DatePickerLabels, DateRange, RangePickerLabels, TimePickerLabels, DateTimePickerLabels, CalendarGrid, TimeValue } from '@kalyx/core';
-export { CalendarDay, DateAdapter, DateFnsAdapter, DateRange, DisabledRule, ISODateString, TimeValue } from '@kalyx/core';
+export { CalendarDay, CalendarGrid, CalendarOptions, CalendarWeek, DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, DateAdapter, DateFnsAdapter, DatePickerLabels, DateRange, DateTimePickerLabels, DisabledRule, ISODateString, RangePickerLabels, TimePickerLabels, TimeValue, WeekStartsOn, WeekdayInfo } from '@kalyx/core';
 
 /**
  * Props for the DatePicker Root component.
@@ -82,13 +82,28 @@ interface DatePickerCalendarClassNames {
     dayDisabled?: string;
     dayOutsideMonth?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: 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;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows. Useful for
+     * popover layouts that need a fixed height across month navigation.
+     */
+    fixedWeeks?: boolean;
 }
-declare function DatePickerCalendar({ classNames, onTitleClick, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerCalendar({ classNames, onTitleClick, showWeekNumber, fixedWeeks, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerMonthGridClassNames {
     root?: string;
@@ -198,6 +213,12 @@ declare function DatePickerPreset({ value: presetKey, date: directDate, children
 interface DatePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
     /** Date display format (defaults to parent's displayFormat) */
     format?: string;
+    /**
+     * Form field name. When set, a hidden `<input type="hidden" name={name} value={ISO}>`
+     * is rendered alongside the visible input so the value participates in native form
+     * submission (and integrates with `react-hook-form` Controller-less flows).
+     */
+    name?: string;
 }
 
 interface DatePickerTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
@@ -316,6 +337,10 @@ interface RangePickerCalendarClassNames {
     dayRangeEnd?: string;
     dayInRange?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: string;
 }
 /**
  * Selection mode for the calendar grid.
@@ -327,8 +352,18 @@ interface RangePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>,
     classNames?: RangePickerCalendarClassNames;
     /** @default 'range' */
     selectionMode?: RangePickerCalendarSelectionMode;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows.
+     */
+    fixedWeeks?: boolean;
 }
-declare function RangePickerCalendar({ classNames, selectionMode, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function RangePickerCalendar({ classNames, selectionMode, showWeekNumber, fixedWeeks, ...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';
@@ -460,12 +495,20 @@ interface TimePickerRootProps {
     disabled?: boolean;
     /** Read-only */
     readOnly?: boolean;
+    /**
+     * Programmatic per-slot disable predicate. Returns `true` for any `(hours, minutes)` pair
+     * that should be unselectable — same polarity as MUI X's `shouldDisableTime`, and the
+     * **inverse** of react-datepicker's `filterTime` (which returns `true` to *keep* a slot).
+     * Use cases: business hours, lunch breaks, blackout slots. Hours are disabled only when the
+     * predicate returns `true` for every step within the hour. Always receives 24-hour values.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Override ARIA labels (defaults to English) */
     labels?: Partial<TimePickerLabels>;
     /** Child components */
     children: ReactNode;
 }
-declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerHourListClassNames {
     root?: string;
@@ -509,6 +552,9 @@ interface TimePickerAmPmToggleProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * TimePicker.AmPmToggle — AM/PM toggle shown only in 12-hour mode.
  * Returns null in 24-hour mode.
+ *
+ * Implements the WAI-ARIA radiogroup pattern: only the checked radio is in the
+ * tab order; ArrowLeft/Right/Up/Down + Home/End move selection between radios.
  */
 declare function TimePickerAmPmToggle({ classNames, ...props }: TimePickerAmPmToggleProps): react_jsx_runtime.JSX.Element | null;
 
@@ -571,6 +617,15 @@ interface DateTimePickerRootProps {
     format?: TimePickerFormat;
     /** Minute step (e.g., 1, 5, 15, 30) */
     step?: number;
+    /** Whether to display seconds in the time controls */
+    withSeconds?: boolean;
+    /**
+     * Programmatic per-slot disable predicate for the time controls. Returns `true` for any
+     * `(hours, minutes)` pair that should be unselectable — same polarity as MUI X's
+     * `shouldDisableTime`, and the **inverse** of react-datepicker's `filterTime`. Always
+     * receives 24-hour values.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Disabled rules (applied to dates) */
     disabled?: DisabledRule[] | boolean;
     /** Read-only */
@@ -606,7 +661,7 @@ interface DateTimePickerRootProps {
  * - 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, onOpenChange, onCalendarNavigate, format, step, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, format, step, withSeconds, filterTime, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface DateTimePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
 }
@@ -674,7 +729,7 @@ interface MonthPickerGridClassNames {
     monthCurrent?: string;
     monthDisabled?: string;
 }
-interface MonthPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+interface MonthPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
     classNames?: MonthPickerGridClassNames;
 }
 /**
@@ -683,9 +738,18 @@ interface MonthPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "rol
  * Unlike `DatePicker.MonthGrid` (drilldown), this component commits the month selection
  * via `ctx.selectDate`, emitting the month-start ISO string.
  *
+ * Disabled state: a month is marked unselectable when every day in it is
+ * excluded by a `before`/`after` rule on the `disabled` prop. The cell is
+ * rendered with `disabled` + `aria-disabled` + the `monthDisabled` className,
+ * and keyboard navigation skips it.
+ *
  * @example
  * ```tsx
- * <MonthPicker value={month} onChange={setMonth} displayFormat="yyyy-MM">
+ * <MonthPicker
+ *   value={month}
+ *   onChange={setMonth}
+ *   disabled={[{ before: '2026-04-01T00:00:00.000Z' }]}
+ * >
  *   <MonthPicker.Input />
  *   <MonthPicker.Popover>
  *     <MonthPicker.Grid />
@@ -747,9 +811,18 @@ interface YearPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role
  * Unlike `DatePicker.YearGrid` (drilldown), this component commits the year selection via
  * `ctx.selectDate`, emitting the year-start ISO string (Jan 1 at UTC midnight).
  *
+ * Disabled state: a year is marked unselectable when every day in it is
+ * excluded by a `before`/`after` rule on the `disabled` prop. The cell is
+ * rendered with `disabled` + `aria-disabled` + the `yearDisabled` className,
+ * and keyboard navigation skips it.
+ *
  * @example
  * ```tsx
- * <YearPicker value={year} onChange={setYear}>
+ * <YearPicker
+ *   value={year}
+ *   onChange={setYear}
+ *   disabled={[{ before: '2024-01-01T00:00:00.000Z' }]}
+ * >
  *   <YearPicker.Input />
  *   <YearPicker.Popover>
  *     <YearPicker.Grid />

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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, DatePickerLabels, DateRange, RangePickerLabels, TimePickerLabels, DateTimePickerLabels, CalendarGrid, TimeValue } from '@kalyx/core';
-export { CalendarDay, DateAdapter, DateFnsAdapter, DateRange, DisabledRule, ISODateString, TimeValue } from '@kalyx/core';
+export { CalendarDay, CalendarGrid, CalendarOptions, CalendarWeek, DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, DateAdapter, DateFnsAdapter, DatePickerLabels, DateRange, DateTimePickerLabels, DisabledRule, ISODateString, RangePickerLabels, TimePickerLabels, TimeValue, WeekStartsOn, WeekdayInfo } from '@kalyx/core';
 
 /**
  * Props for the DatePicker Root component.
@@ -82,13 +82,28 @@ interface DatePickerCalendarClassNames {
     dayDisabled?: string;
     dayOutsideMonth?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: 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;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows. Useful for
+     * popover layouts that need a fixed height across month navigation.
+     */
+    fixedWeeks?: boolean;
 }
-declare function DatePickerCalendar({ classNames, onTitleClick, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerCalendar({ classNames, onTitleClick, showWeekNumber, fixedWeeks, ...props }: DatePickerCalendarProps): react_jsx_runtime.JSX.Element;
 
 interface DatePickerMonthGridClassNames {
     root?: string;
@@ -198,6 +213,12 @@ declare function DatePickerPreset({ value: presetKey, date: directDate, children
 interface DatePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
     /** Date display format (defaults to parent's displayFormat) */
     format?: string;
+    /**
+     * Form field name. When set, a hidden `<input type="hidden" name={name} value={ISO}>`
+     * is rendered alongside the visible input so the value participates in native form
+     * submission (and integrates with `react-hook-form` Controller-less flows).
+     */
+    name?: string;
 }
 
 interface DatePickerTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
@@ -316,6 +337,10 @@ interface RangePickerCalendarClassNames {
     dayRangeEnd?: string;
     dayInRange?: string;
     weekdayHeader?: string;
+    /** Header cell at the top of the week-number column. Rendered only when `showWeekNumber` is set. */
+    weekNumberHeader?: string;
+    /** Each row's week-number cell. Rendered only when `showWeekNumber` is set. */
+    weekNumber?: string;
 }
 /**
  * Selection mode for the calendar grid.
@@ -327,8 +352,18 @@ interface RangePickerCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>,
     classNames?: RangePickerCalendarClassNames;
     /** @default 'range' */
     selectionMode?: RangePickerCalendarSelectionMode;
+    /**
+     * Render an ISO 8601 week-number column on the left of the grid (1–53).
+     * The column is a `<th scope="row">`; it doesn't participate in the WAI-ARIA grid
+     * data region, so keyboard navigation across the date cells is unaffected.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Always render 6 weeks (42 cells), even when the month fits in 4 or 5 rows.
+     */
+    fixedWeeks?: boolean;
 }
-declare function RangePickerCalendar({ classNames, selectionMode, ...props }: RangePickerCalendarProps): react_jsx_runtime.JSX.Element;
+declare function RangePickerCalendar({ classNames, selectionMode, showWeekNumber, fixedWeeks, ...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';
@@ -460,12 +495,20 @@ interface TimePickerRootProps {
     disabled?: boolean;
     /** Read-only */
     readOnly?: boolean;
+    /**
+     * Programmatic per-slot disable predicate. Returns `true` for any `(hours, minutes)` pair
+     * that should be unselectable — same polarity as MUI X's `shouldDisableTime`, and the
+     * **inverse** of react-datepicker's `filterTime` (which returns `true` to *keep* a slot).
+     * Use cases: business hours, lunch breaks, blackout slots. Hours are disabled only when the
+     * predicate returns `true` for every step within the hour. Always receives 24-hour values.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Override ARIA labels (defaults to English) */
     labels?: Partial<TimePickerLabels>;
     /** Child components */
     children: ReactNode;
 }
-declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerHourListClassNames {
     root?: string;
@@ -509,6 +552,9 @@ interface TimePickerAmPmToggleProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * TimePicker.AmPmToggle — AM/PM toggle shown only in 12-hour mode.
  * Returns null in 24-hour mode.
+ *
+ * Implements the WAI-ARIA radiogroup pattern: only the checked radio is in the
+ * tab order; ArrowLeft/Right/Up/Down + Home/End move selection between radios.
  */
 declare function TimePickerAmPmToggle({ classNames, ...props }: TimePickerAmPmToggleProps): react_jsx_runtime.JSX.Element | null;
 
@@ -571,6 +617,15 @@ interface DateTimePickerRootProps {
     format?: TimePickerFormat;
     /** Minute step (e.g., 1, 5, 15, 30) */
     step?: number;
+    /** Whether to display seconds in the time controls */
+    withSeconds?: boolean;
+    /**
+     * Programmatic per-slot disable predicate for the time controls. Returns `true` for any
+     * `(hours, minutes)` pair that should be unselectable — same polarity as MUI X's
+     * `shouldDisableTime`, and the **inverse** of react-datepicker's `filterTime`. Always
+     * receives 24-hour values.
+     */
+    filterTime?: (hours: number, minutes: number) => boolean;
     /** Disabled rules (applied to dates) */
     disabled?: DisabledRule[] | boolean;
     /** Read-only */
@@ -606,7 +661,7 @@ interface DateTimePickerRootProps {
  * - 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, onOpenChange, onCalendarNavigate, format, step, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
+declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, format, step, withSeconds, filterTime, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
 
 interface DateTimePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
 }
@@ -674,7 +729,7 @@ interface MonthPickerGridClassNames {
     monthCurrent?: string;
     monthDisabled?: string;
 }
-interface MonthPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+interface MonthPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
     classNames?: MonthPickerGridClassNames;
 }
 /**
@@ -683,9 +738,18 @@ interface MonthPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "rol
  * Unlike `DatePicker.MonthGrid` (drilldown), this component commits the month selection
  * via `ctx.selectDate`, emitting the month-start ISO string.
  *
+ * Disabled state: a month is marked unselectable when every day in it is
+ * excluded by a `before`/`after` rule on the `disabled` prop. The cell is
+ * rendered with `disabled` + `aria-disabled` + the `monthDisabled` className,
+ * and keyboard navigation skips it.
+ *
  * @example
  * ```tsx
- * <MonthPicker value={month} onChange={setMonth} displayFormat="yyyy-MM">
+ * <MonthPicker
+ *   value={month}
+ *   onChange={setMonth}
+ *   disabled={[{ before: '2026-04-01T00:00:00.000Z' }]}
+ * >
  *   <MonthPicker.Input />
  *   <MonthPicker.Popover>
  *     <MonthPicker.Grid />
@@ -747,9 +811,18 @@ interface YearPickerGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role
  * Unlike `DatePicker.YearGrid` (drilldown), this component commits the year selection via
  * `ctx.selectDate`, emitting the year-start ISO string (Jan 1 at UTC midnight).
  *
+ * Disabled state: a year is marked unselectable when every day in it is
+ * excluded by a `before`/`after` rule on the `disabled` prop. The cell is
+ * rendered with `disabled` + `aria-disabled` + the `yearDisabled` className,
+ * and keyboard navigation skips it.
+ *
  * @example
  * ```tsx
- * <YearPicker value={year} onChange={setYear}>
+ * <YearPicker
+ *   value={year}
+ *   onChange={setYear}
+ *   disabled={[{ before: '2024-01-01T00:00:00.000Z' }]}
+ * >
  *   <YearPicker.Input />
  *   <YearPicker.Popover>
  *     <YearPicker.Grid />