@nepdatejs/react 0.0.0-bootstrap → 0.1.0

package/dist/headless-CFZ06zLn.d.ts

@@ -0,0 +1,194 @@
+import { ChangeEvent, KeyboardEvent, Ref, useEffect } from "react";
+import { CalendarDate, CalendarSystem, LocaleCode } from "@nepdatejs/core";
+import { CalendarActions, CalendarOptions, CalendarState, CalendarStore, DayCell, PickerCell } from "@nepdatejs/calendar";
+import { DatePickerOptions, DatePickerState, DatePickerStore, DateRangePickerOptions, DateRangePickerState, DateRangePickerStore, DateTimePickerOptions, DateTimePickerState, DateTimePickerStore, MultiDatePickerOptions, MultiDatePickerState, MultiDatePickerStore, PresetState, RangeField } from "@nepdatejs/datepicker";
+//#region src/bindings.d.ts
+type DataAttrs = Record<`data-${string}`, string | boolean | undefined>;
+interface ButtonProps extends DataAttrs {
+  type: "button";
+  tabIndex?: number;
+  disabled?: boolean;
+  "aria-label"?: string;
+  "aria-pressed"?: boolean;
+  "aria-current"?: "date";
+  onClick: () => void;
+  onFocus?: () => void;
+  onMouseEnter?: () => void;
+}
+interface GridProps {
+  role: "grid";
+  "aria-label": string;
+  ref: Ref<HTMLTableElement>;
+  onKeyDown: (event: KeyboardEvent) => void;
+  onMouseLeave: () => void;
+}
+/** Prop getters that turn a calendar store into accessible markup. */
+interface CalendarBindings {
+  readonly state: CalendarState;
+  readonly actions: CalendarActions;
+  readonly getGridProps: () => GridProps;
+  readonly getDayProps: (cell: DayCell) => ButtonProps;
+  readonly getPrevProps: () => ButtonProps;
+  readonly getNextProps: () => ButtonProps;
+  /** The title buttons: month and year in the day view, the year (or page) otherwise. */
+  readonly getTitleButtons: () => {
+    key: string;
+    label: string;
+    props: ButtonProps;
+  }[];
+  readonly getOptionProps: (tile: PickerCell, index: number, tiles: readonly PickerCell[]) => ButtonProps;
+  /** Move focus into the grid (e.g. when a panel opens). */
+  readonly focusGrid: () => void;
+}
+declare function useCalendarBindings(state: CalendarState, actions: CalendarActions, locale: LocaleCode | undefined, options: {
+  /** The store's latest snapshot, to tell whether a key press changed anything. */
+  readonly getSnapshot: () => CalendarState;
+  readonly onDayActivate?: ((date: CalendarDate) => void) | undefined;
+}): CalendarBindings;
+//#endregion
+//#region src/hooks.d.ts
+/** A standalone calendar: state, actions and prop getters. */
+declare function useCalendar(options?: CalendarOptions): CalendarBindings & {
+  store: CalendarStore;
+};
+interface InputProps {
+  id: string;
+  /** Left out for an inline picker, whose calendar is always in the page. */
+  role?: "combobox";
+  type: "text";
+  inputMode: "numeric";
+  autoComplete: "off";
+  value: string;
+  placeholder: string;
+  "aria-haspopup"?: "dialog";
+  "aria-expanded"?: boolean;
+  "aria-controls": string;
+  "aria-invalid"?: true;
+  "aria-describedby"?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+interface PanelProps {
+  id: string;
+  /** 'group' for an inline picker. */
+  role: "dialog" | "group";
+  "aria-label": string;
+}
+interface DatePickerBindings {
+  readonly state: DatePickerState;
+  readonly actions: DatePickerStore["actions"];
+  readonly store: DatePickerStore;
+  /** Prop getters for the panel's calendar. */
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    input: string;
+    panel: string;
+    hint: string;
+  };
+  getInputProps(extra?: {
+    id?: string | undefined;
+  }): InputProps;
+  getToggleProps(): ButtonProps & {
+    "aria-expanded": boolean;
+    "aria-controls": string;
+  };
+  getClearProps(): ButtonProps;
+  /** The BS/AD switch inside the input. */
+  getSwitchProps(): ButtonProps;
+  /** One button of the BS/AD segment in the panel footer. */
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getTodayProps(): ButtonProps;
+  getPanelProps(): PanelProps;
+  /** A shortcut button (see state.presets). */
+  getPresetProps(preset: PresetState): ButtonProps;
+}
+/** A BS/AD date picker without markup: wire the getters to your own elements. */
+declare function useDatePicker(options?: DatePickerOptions & {
+  id?: string | undefined;
+}): DatePickerBindings;
+interface DateRangePickerBindings {
+  readonly state: DateRangePickerState;
+  readonly actions: DateRangePickerStore["actions"];
+  readonly store: DateRangePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    start: string;
+    end: string;
+    panel: string;
+    hint: string;
+  };
+  getInputProps(field: RangeField): Omit<InputProps, "onChange" | "onBlur"> & {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+  };
+  getToggleProps(): ButtonProps & {
+    "aria-expanded": boolean;
+    "aria-controls": string;
+  };
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getPanelProps(): PanelProps;
+  getPresetProps(preset: PresetState): ButtonProps;
+}
+/** A BS/AD date range picker without markup. */
+declare function useDateRangePicker(options?: DateRangePickerOptions): DateRangePickerBindings;
+interface DateTimePickerBindings {
+  readonly state: DateTimePickerState;
+  readonly actions: DateTimePickerStore["actions"];
+  readonly store: DateTimePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    date: string;
+    time: string;
+    panel: string;
+    hint: string;
+  };
+}
+/** A BS/AD date + time picker without markup. The value is a zoned ISO timestamp. */
+declare function useDateTimePicker(options?: DateTimePickerOptions & {
+  id?: string | undefined;
+}): DateTimePickerBindings;
+interface MultiDatePickerBindings {
+  readonly state: MultiDatePickerState;
+  readonly actions: MultiDatePickerStore["actions"];
+  readonly store: MultiDatePickerStore;
+  readonly calendar: CalendarBindings;
+  readonly ids: {
+    input: string;
+    panel: string;
+    hint: string;
+  };
+  getInputProps(): InputProps;
+  getToggleProps(): ButtonProps & {
+    "aria-expanded": boolean;
+    "aria-controls": string;
+  };
+  getClearProps(): ButtonProps;
+  getCalendarOptionProps(calendar: CalendarSystem): ButtonProps;
+  getPanelProps(): PanelProps;
+}
+/** A picker for several separate BS/AD days, without markup (PICK-001). */
+declare function useMultiDatePicker(options?: MultiDatePickerOptions & {
+  id?: string | undefined;
+}): MultiDatePickerBindings;
+//#endregion
+//#region src/use-store.d.ts
+interface StoreLike<O, S> {
+  getState(): S;
+  subscribe(listener: () => void): () => void;
+  setOptions(changes: Partial<O>): void;
+}
+/**
+ * Create a store once and keep its options in step with props, without
+ * loops: functions are wrapped once so their identity never changes, and data
+ * options are compared by value, so inline objects and arrays are fine.
+ */
+declare function useStore<O extends object, S, T extends StoreLike<O, S>>(create: (options: O) => T, options: O): {
+  store: T;
+  state: S;
+};
+/** Structural equality for plain data (dates, ranges, lists); identity for everything else. */
+declare function deepEqual(a: unknown, b: unknown): boolean;
+//#endregion
+export { useCalendarBindings as _, DateTimePickerBindings as a, PanelProps as c, useDateRangePicker as d, useDateTimePicker as f, GridProps as g, CalendarBindings as h, DateRangePickerBindings as i, useCalendar as l, ButtonProps as m, useStore as n, InputProps as o, useMultiDatePicker as p, DatePickerBindings as r, MultiDatePickerBindings as s, deepEqual as t, useDatePicker as u };
+//# sourceMappingURL=headless-CFZ06zLn.d.ts.map