@nepdatejs/react 0.0.0-bootstrap → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,245 @@
+import { _ as useCalendarBindings, a as DateTimePickerBindings, c as PanelProps, d as useDateRangePicker, f as useDateTimePicker, g as GridProps, h as CalendarBindings, i as DateRangePickerBindings, l as useCalendar, m as ButtonProps, n as useStore, o as InputProps, p as useMultiDatePicker, r as DatePickerBindings, s as MultiDatePickerBindings, t as deepEqual, u as useDatePicker } from "./headless-CFZ06zLn.js";
+import { a as shortDate, i as bothDates, n as DateTextProps, r as ShortDate, t as DateText } from "./date-text-Dipetpbp.js";
+import { ReactElement } from "react";
+import { CalendarDate, CalendarSystem, DateFormatPattern, LocaleCode, Weekday } from "@nepdatejs/core";
+import { CalendarOptions, CalendarSelection, EventMarker, HolidayInput, HolidayLookup } from "@nepdatejs/calendar";
+import { DateDetail, DateTimeDetail, RangeDetail, RangePreset, RangeValue, SinglePreset, TimeCell } from "@nepdatejs/datepicker";
+import { PanelLayout } from "@nepdatejs/dom";
+//#region src/calendar.d.ts
+interface CalendarProps extends Omit<CalendarOptions, "onSelect" | "visibleMonth" | "onVisibleMonthChange"> {
+  /** Show this month (any day in it); pair with onMonthChange to control it. */
+  month?: CalendarDate | undefined;
+  onMonthChange?: ((month: CalendarDate) => void) | undefined;
+  onSelect?: ((selection: CalendarSelection) => void) | undefined;
+  className?: string | undefined;
+  theme?: "light" | "dark" | "auto" | undefined;
+}
+/** A standalone BS/AD month view with keyboard support. */
+export declare function Calendar({ month, onMonthChange, className, theme, ...options }: CalendarProps): ReactElement;
+//#endregion
+//#region src/date-picker.d.ts
+interface DatePickerProps {
+  /** The AD date as "YYYY-MM-DD", or "": the same value a native date input uses. */
+  value?: string | undefined;
+  /** The starting value when the field keeps its own state, as in a plain form with `name`. */
+  defaultValue?: string | undefined;
+  onChange?: ((value: string, date: DateDetail | null) => void) | undefined;
+  /** Show and type dates in this calendar only, and hide the BS/AD switch. */
+  calendar?: CalendarSystem | undefined;
+  /** The calendar shown first when the viewer has not chosen one. */
+  defaultCalendar?: CalendarSystem | undefined;
+  /** Called when the viewer switches BS/AD. */
+  onCalendarChange?: ((calendar: CalendarSystem) => void) | undefined;
+  /** Earliest and latest allowed days, as AD "YYYY-MM-DD". */
+  min?: string | undefined;
+  max?: string | undefined;
+  isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+  /** Names, digits and messages; defaults to the page language (ne when <html lang="ne">). */
+  locale?: LocaleCode | undefined;
+  /** Submit the AD value with a plain form under this name. */
+  name?: string | undefined;
+  id?: string | undefined;
+  placeholder?: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  clearable?: boolean | undefined;
+  /** Show the same day in the other calendar under the field. */
+  showEquivalent?: boolean | undefined;
+  holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  events?: ((date: CalendarDate) => readonly EventMarker[]) | undefined;
+  weekStartsOn?: Weekday | undefined;
+  weekendDays?: readonly Weekday[] | undefined;
+  /** Show the other calendar's day number under each day. Default true. */
+  showOtherCalendar?: boolean | undefined;
+  displayFormat?: DateFormatPattern | undefined;
+  closeOnSelect?: boolean | undefined;
+  /** Shortcuts beside the calendar: 'today', 'yesterday', 'tomorrow' or { id, label, resolve }. */
+  presets?: readonly SinglePreset[] | undefined;
+  /** Remember the viewer's BS/AD choice in localStorage under this key. */
+  persistCalendar?: string | undefined;
+  /** Override "today" (tests, server rendering). */
+  today?: CalendarDate | undefined;
+  /** Add the dashes of YYYY-MM-DD while the user types digits. Default true. */
+  mask?: boolean | undefined;
+  /** Show the calendar in the page, always open, instead of in a popover. */
+  inline?: boolean | undefined;
+  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
+  panelLayout?: PanelLayout | undefined;
+  theme?: "light" | "dark" | "auto" | undefined;
+  className?: string | undefined;
+  "aria-label"?: string | undefined;
+  "aria-invalid"?: boolean | undefined;
+  "aria-describedby"?: string | undefined;
+}
+/**
+ * A BS/AD date field: type a date or pick it from a calendar. The value is
+ * always the AD day as "YYYY-MM-DD", so forms, validation and storage are
+ * unchanged and a BS date can never be sent as if it were AD.
+ */
+export declare function DatePicker(props: DatePickerProps): ReactElement;
+//#endregion
+//#region src/date-range-picker.d.ts
+interface DateRangePickerProps {
+  value?: RangeValue | undefined;
+  defaultValue?: RangeValue | undefined;
+  onChange?: ((value: RangeValue, detail: RangeDetail) => void) | undefined;
+  calendar?: CalendarSystem | undefined;
+  defaultCalendar?: CalendarSystem | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
+  minDays?: number | undefined;
+  maxDays?: number | undefined;
+  /** Shortcuts beside the calendar: 'last7Days', 'thisMonth', 'thisFiscalYear', … or { id, label, resolve }. */
+  presets?: readonly RangePreset[] | undefined;
+  isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+  holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  locale?: LocaleCode | undefined;
+  weekStartsOn?: Weekday | undefined;
+  weekendDays?: readonly Weekday[] | undefined;
+  showOtherCalendar?: boolean | undefined;
+  today?: CalendarDate | undefined;
+  /** Field names for plain form posts. */
+  startName?: string | undefined;
+  endName?: string | undefined;
+  startLabel?: string | undefined;
+  endLabel?: string | undefined;
+  /** Show a "Fiscal year" button that switches the panel to fiscal-year tiles. */
+  fiscalYearView?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Add the dashes of YYYY-MM-DD while the user types digits. Default true. */
+  mask?: boolean | undefined;
+  /** Show the calendar in the page, always open, instead of in a popover. */
+  inline?: boolean | undefined;
+  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
+  panelLayout?: PanelLayout | undefined;
+  theme?: "light" | "dark" | "auto" | undefined;
+  className?: string | undefined;
+}
+/** Two BS/AD date fields sharing one calendar panel in range mode. */
+export declare function DateRangePicker({ startName, endName, startLabel, endLabel, fiscalYearView, disabled, panelLayout, theme, className, ...options }: DateRangePickerProps): ReactElement;
+//#endregion
+//#region src/date-time-picker.d.ts
+interface DateTimePickerProps {
+  /** ISO timestamp with offset ("2026-10-18T14:30:00+05:45") or "". */
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onChange?: ((value: string, detail: DateTimeDetail | null) => void) | undefined;
+  /** The zone the picker shows and the value's offset. Default Asia/Kathmandu (core config). */
+  timeZone?: string | undefined;
+  hour12?: boolean | undefined;
+  /** Minutes in the column (1–30). Default 5. */
+  minuteStep?: number | undefined;
+  /** Time used when a day is picked first. Default "00:00". */
+  defaultTime?: string | undefined;
+  calendar?: CalendarSystem | undefined;
+  defaultCalendar?: CalendarSystem | undefined;
+  /** Earliest and latest days, AD "YYYY-MM-DD". */
+  min?: string | undefined;
+  max?: string | undefined;
+  isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+  holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  presets?: readonly SinglePreset[] | undefined;
+  locale?: LocaleCode | undefined;
+  weekStartsOn?: Weekday | undefined;
+  today?: CalendarDate | undefined;
+  /** Submit the ISO value with a plain form. */
+  name?: string | undefined;
+  id?: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Add the dashes of YYYY-MM-DD while the user types digits. Default true. */
+  mask?: boolean | undefined;
+  /** Show the calendar in the page, always open, instead of in a popover. */
+  inline?: boolean | undefined;
+  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
+  panelLayout?: PanelLayout | undefined;
+  theme?: "light" | "dark" | "auto" | undefined;
+  className?: string | undefined;
+  /** Accessible names for the two inputs. */
+  "aria-label"?: string | undefined;
+  timeLabel?: string | undefined;
+}
+/** A BS/AD date and time field. The value is one instant, with the zone's offset. */
+export declare function DateTimePicker({ name, required, disabled, panelLayout, theme, className, "aria-label": ariaLabel, timeLabel, ...options }: DateTimePickerProps): ReactElement;
+//#endregion
+//#region src/multi-date-picker.d.ts
+interface MultiDatePickerProps {
+  /** AD "YYYY-MM-DD" days. */
+  value?: readonly string[] | undefined;
+  defaultValue?: readonly string[] | undefined;
+  onChange?: ((value: readonly string[], dates: readonly DateDetail[]) => void) | undefined;
+  calendar?: CalendarSystem | undefined;
+  defaultCalendar?: CalendarSystem | undefined;
+  onCalendarChange?: ((calendar: CalendarSystem) => void) | undefined;
+  /** Earliest and latest allowed days, as AD "YYYY-MM-DD". */
+  min?: string | undefined;
+  max?: string | undefined;
+  /** The most days that may be chosen. */
+  maxDates?: number | undefined;
+  isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+  holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  events?: ((date: CalendarDate) => readonly EventMarker[]) | undefined;
+  locale?: LocaleCode | undefined;
+  weekStartsOn?: Weekday | undefined;
+  weekendDays?: readonly Weekday[] | undefined;
+  showOtherCalendar?: boolean | undefined;
+  /** Close the panel after each click. Default false. */
+  closeOnSelect?: boolean | undefined;
+  /** Add the dashes of YYYY-MM-DD while the user types digits. Default true. */
+  mask?: boolean | undefined;
+  /** Show the calendar in the page, always open, instead of in a popover. */
+  inline?: boolean | undefined;
+  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
+  panelLayout?: PanelLayout | undefined;
+  /** Submit each day under this name, one hidden input per day. */
+  name?: string | undefined;
+  id?: string | undefined;
+  placeholder?: string | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  clearable?: boolean | undefined;
+  today?: CalendarDate | undefined;
+  theme?: "light" | "dark" | "auto" | undefined;
+  className?: string | undefined;
+  "aria-label"?: string | undefined;
+}
+/**
+ * Several separate BS/AD days in one field (PICK-001): click days in the
+ * panel to add or remove them, or type them separated by commas. The value is
+ * the sorted AD days as "YYYY-MM-DD" strings.
+ */
+export declare function MultiDatePicker({ name, placeholder, required, disabled, clearable, panelLayout, theme, className, "aria-label": ariaLabel, ...options }: MultiDatePickerProps): ReactElement;
+//#endregion
+//#region src/time-columns.d.ts
+/** Hour and minute columns (Figma "Time Item"); the selected items scroll into view. */
+export declare function TimeColumns({ hours, minutes, locale, onHour, onMinute }: {
+  hours: readonly TimeCell[];
+  minutes: readonly TimeCell[];
+  locale?: LocaleCode | undefined;
+  onHour: (hour: number) => void;
+  onMinute: (minute: number) => void;
+}): ReactElement;
+//#endregion
+//#region src/calendar-body.d.ts
+/** The calendar markup (@nepdatejs/styles contract) for any set of bindings. */
+export declare function CalendarBody({ bindings, className, theme }: {
+  bindings: CalendarBindings;
+  className?: string | undefined;
+  theme?: string | undefined;
+}): ReactElement;
+//#endregion
+//#region src/icons.d.ts
+declare const PATHS: {
+  readonly "chevron-left": readonly ["M10 3.5 5.5 8l4.5 4.5"];
+  readonly "chevron-right": readonly ["M6 3.5 10.5 8 6 12.5"];
+  readonly calendar: readonly ["M2 6.5h12", "M5.5 1.5v3", "M10.5 1.5v3", "M4 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"];
+  readonly close: readonly ["M4 4l8 8", "M12 4l-8 8"];
+};
+type IconName = keyof typeof PATHS;
+/** The Figma icon set, 16px, stroked with currentColor. */
+export declare function Icon({ name }: {
+  name: IconName;
+}): ReactElement;
+//#endregion
+export { type ButtonProps, type CalendarBindings, type CalendarProps, type DatePickerBindings, type DatePickerProps, type DateRangePickerBindings, type DateRangePickerProps, DateText, type DateTextProps, type DateTimePickerBindings, type DateTimePickerProps, type GridProps, type IconName, type InputProps, type MultiDatePickerBindings, type MultiDatePickerProps, type PanelProps, ShortDate, bothDates, deepEqual, shortDate, useCalendar, useCalendarBindings, useDatePicker, useDateRangePicker, useDateTimePicker, useMultiDatePicker, useStore };
+//# sourceMappingURL=index.d.ts.map