@overdoser/react-toolkit 0.1.0 → 0.5.0

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithRef } from 'react';
+export interface PaginationClasses {
+    root: string;
+    list: string;
+    item: string;
+    active: string;
+    ellipsis: string;
+    control: string;
+}
+export interface PaginationProps extends Omit<ComponentPropsWithRef<'nav'>, 'onChange'> {
+    /** Total number of pages. Provide this, or `total` + `pageSize`. */
+    count?: number;
+    /** Total item count — used with `pageSize` to derive `count`. */
+    total?: number;
+    /** Items per page — used with `total` to derive `count`. @default 10 */
+    pageSize?: number;
+    /** Controlled current page (1-based). */
+    page?: number;
+    /** Uncontrolled initial page (1-based). @default 1 */
+    defaultPage?: number;
+    /** Called with the new page number. */
+    onChange?: (page: number) => void;
+    /** Pages always shown at the start and end. @default 1 */
+    boundaryCount?: number;
+    /** Pages shown on each side of the current page. @default 2 (→ up to 9 chips) */
+    siblingCount?: number;
+    /** Show the previous/next arrow controls. @default true */
+    showPrevNext?: boolean;
+    /** Show the jump-to-first/last controls. @default false */
+    showFirstLast?: boolean;
+    /** Control size. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disable all controls. @default false */
+    disabled?: boolean;
+    /** Accessible label for the nav landmark. @default 'Pagination' */
+    label?: string;
+    /** Override class names on internal elements. */
+    classes?: Partial<PaginationClasses>;
+}
+/**
+ * Page navigation with a windowed range and ellipses (e.g. `1 … 6 7 8 9 10 … 99`).
+ * With the default `siblingCount={2}` it shows at most 9 page chips.
+ *
+ * @example
+ * <Pagination count={99} page={page} onChange={setPage} />
+ * <Pagination total={480} pageSize={20} page={page} onChange={setPage} showFirstLast />
+ */
+export declare const Pagination: import('react').ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/components/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationClasses } from './Pagination';
+export { paginationRange } from './paginationRange';
+export type { PaginationItem } from './paginationRange';

package/components/Pagination/paginationRange.d.ts

@@ -0,0 +1,8 @@
+export type PaginationItem = number | 'ellipsis';
+/**
+ * Builds the windowed page list with ellipses — e.g. with `count=99`, `page=8`,
+ * `boundaryCount=1`, `siblingCount=2` → `[1, 'ellipsis', 6, 7, 8, 9, 10, 'ellipsis', 99]`.
+ * Mirrors MUI's `usePagination` range logic. The widest output is
+ * `boundaryCount*2 + siblingCount*2 + 3` items (two ellipses + current).
+ */
+export declare function paginationRange(page: number, count: number, boundaryCount?: number, siblingCount?: number): PaginationItem[];

package/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef } from 'react';
+export interface SkeletonClasses {
+    root: string;
+    line: string;
+}
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /** Shape of the placeholder. @default 'text' */
+    variant?: 'text' | 'circle' | 'rect';
+    /** Explicit width (number → px). Defaults to `100%`. */
+    width?: number | string;
+    /** Explicit height (number → px). Defaults per variant. */
+    height?: number | string;
+    /** Shimmer style. @default 'pulse' */
+    animation?: 'pulse' | 'wave' | 'none';
+    /** For `variant="text"`, render this many stacked lines (the last is shorter). @default 1 */
+    lines?: number;
+    /** Override class names on internal elements. */
+    classes?: Partial<SkeletonClasses>;
+}
+/**
+ * Loading placeholder that mimics content while it's fetching. Decorative
+ * (`aria-hidden`) — pair the surrounding region with its own loading status.
+ *
+ * @example
+ * <Skeleton variant="text" lines={3} />
+ * <Skeleton variant="circle" width={40} height={40} />
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonClasses } from './Skeleton';

package/components/Spinner/Spinner.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef } from 'react';
+export interface SpinnerClasses {
+    root: string;
+    circle: string;
+    label: string;
+}
+export interface SpinnerProps extends ComponentPropsWithRef<'span'> {
+    /** Spinner size. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Stroke color. Defaults to `currentColor`, so it inherits the surrounding text color. */
+    color?: string;
+    /**
+     * Accessible label announced to screen readers (visually hidden). Set to an
+     * empty string only when an adjacent visible element already labels the busy
+     * state. @default 'Loading'
+     */
+    label?: string;
+    /** Override class names on internal elements. */
+    classes?: Partial<SpinnerClasses>;
+}
+/**
+ * Indeterminate loading spinner. Inherits `currentColor` by default, so it works
+ * on any surface (including inside a `Button`).
+ *
+ * @example
+ * <Spinner size="lg" />
+ * <Button disabled><Spinner size="sm" label="" /> Saving…</Button>
+ */
+export declare const Spinner: import('react').ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerClasses } from './Spinner';

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,66 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsVariant = 'line' | 'solid' | 'pill';
+export type TabsSize = 'sm' | 'md' | 'lg';
+export interface TabsClasses {
+    root: string;
+    list: string;
+    tab: string;
+    panel: string;
+}
+export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    /** Controlled active tab value. */
+    value?: string;
+    /** Uncontrolled initial active tab value. */
+    defaultValue?: string;
+    /** Called with the new value when the active tab changes. */
+    onValueChange?: (value: string) => void;
+    /** Layout direction. @default 'horizontal' */
+    orientation?: TabsOrientation;
+    /** Visual style of the tab list. @default 'line' */
+    variant?: TabsVariant;
+    /** Tab sizing. @default 'md' */
+    size?: TabsSize;
+    /** Override class names on internal elements. */
+    classes?: Partial<TabsClasses>;
+}
+export interface TabsListProps extends ComponentPropsWithRef<'div'> {
+    children?: ReactNode;
+}
+export interface TabsTabProps extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
+    /** Identifier linking this tab to its panel. */
+    value: string;
+    /** Disable selection of this tab. @default false */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+export interface TabsPanelProps extends ComponentPropsWithRef<'div'> {
+    /** Identifier linking this panel to its tab. */
+    value: string;
+    /**
+     * Keep the panel mounted (but hidden) when inactive. Useful to preserve
+     * scroll/input state across tab switches. @default false
+     */
+    keepMounted?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Accessible tabs. Compose with `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.
+ * Arrow keys (plus Home/End) move between tabs and activate them; activation is
+ * automatic on focus.
+ *
+ * @example
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="overview">Overview</Tabs.Tab>
+ *     <Tabs.Tab value="activity">Activity</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">…</Tabs.Panel>
+ *   <Tabs.Panel value="activity">…</Tabs.Panel>
+ * </Tabs>
+ */
+export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
+    List: import('react').ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Tab: import('react').ForwardRefExoticComponent<Omit<TabsTabProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Panel: import('react').ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};

package/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabsListProps, TabsTabProps, TabsPanelProps, TabsClasses, TabsOrientation, TabsVariant, TabsSize, } from './Tabs';

package/components/Timer/Timer.d.ts

@@ -0,0 +1,103 @@
+import { CSSProperties, ReactNode } from 'react';
+export type TimerMode = 'countdown' | 'stopwatch';
+export type TimerVariant = 'digital' | 'ring' | 'segments';
+export type TimerLabelPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TimerUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+/** One unit cell of the segmented display. */
+export interface TimerSegment {
+    /** Which unit this segment represents. */
+    unit: TimerUnit;
+    /** Numeric value for the unit. */
+    value: number;
+    /** Display text (zero-padded except the leading unit). */
+    text: string;
+    /** Resolved unit label (e.g. `'h'`, `'hours'`). */
+    label: ReactNode;
+}
+export interface TimerHandle {
+    /** Start (or resume) ticking. */
+    start: () => void;
+    /** Pause, preserving elapsed time. */
+    pause: () => void;
+    /** Stop and reset to the initial value. */
+    reset: () => void;
+    /** Reset then start again. */
+    restart: () => void;
+    /** Current displayed time, in seconds. */
+    getTime: () => number;
+    /** Whether the timer is currently running. */
+    readonly isRunning: boolean;
+}
+export interface TimerClasses {
+    root: string;
+    display: string;
+    label: string;
+    ringTrack: string;
+    ringProgress: string;
+    segments: string;
+    segment: string;
+    segmentValue: string;
+    segmentLabel: string;
+}
+export interface TimerProps {
+    /** Count down to zero, or up from zero. @default 'countdown' */
+    mode?: TimerMode;
+    /** Countdown length / stopwatch cap, in seconds. Drives ring progress. */
+    duration?: number;
+    /** Absolute countdown target (`Date` or epoch ms). Overrides `duration`/pause; always counts down. */
+    to?: Date | number;
+    /** Controlled display time in seconds — makes the timer display-only (no internal clock). */
+    value?: number;
+    /** Start ticking on mount (uncontrolled). @default true */
+    autoStart?: boolean;
+    /** Controlled run state. When set, start/pause follow this prop. */
+    running?: boolean;
+    /** Tick interval in milliseconds. @default 1000 */
+    interval?: number;
+    /** Visual style: `'digital'` digits, `'ring'` progress circle, or `'segments'` (one boxed cell per unit). @default 'digital' */
+    variant?: TimerVariant;
+    /** Size of the digits / ring / segments. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Format the time for display (digital/ring only). Receives whole seconds. */
+    format?: (seconds: number) => ReactNode;
+    /** Which segments to show (segments variant). Defaults to the smallest set that fits the duration. */
+    units?: TimerUnit[];
+    /** Default unit-label style for the segments variant. `'short'` → `d/h/m/s`, `'long'` → `days/hours/minutes/seconds` (fixed — no singular/plural switching). @default 'short' */
+    unitFormat?: 'long' | 'short';
+    /** Override unit labels — a node, or a function of the unit's value (for custom pluralization). */
+    unitLabels?: Partial<Record<TimerUnit, ReactNode | ((value: number) => ReactNode)>>;
+    /** Built-in segment style. `'boxed'` is a square with the number and the unit below. @default 'boxed' */
+    segmentVariant?: 'boxed' | 'plain';
+    /** Fully custom segment renderer (segments variant). Overrides `segmentVariant`. */
+    renderSegment?: (segment: TimerSegment, index: number) => ReactNode;
+    /** Content rendered between segments (e.g. `':'`). */
+    segmentSeparator?: ReactNode;
+    /** Content shown alongside the timer (e.g. a caption). */
+    label?: ReactNode;
+    /** Where `label` sits relative to the timer. @default 'bottom' */
+    labelPlacement?: TimerLabelPlacement;
+    /** Fired once when a countdown reaches zero. */
+    onComplete?: () => void;
+    /** Fired each tick with the current seconds. */
+    onTick?: (seconds: number) => void;
+    /** Override class names on internal elements. */
+    classes?: Partial<TimerClasses>;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A flexible timer: countdown or stopwatch, shown as digits or a progress ring,
+ * with an optional attached label. Uncontrolled with `autoStart` + an imperative
+ * ref (`start`/`pause`/`reset`/`restart`), or display-only via `value`.
+ *
+ * @example
+ * // Countdown with a caption underneath
+ * <Timer mode="countdown" duration={90} label="Time left" onComplete={onDone} />
+ *
+ * @example
+ * // Ring stopwatch driven by a ref
+ * const t = useRef<TimerHandle>(null);
+ * <Timer ref={t} mode="stopwatch" duration={60} variant="ring" autoStart={false} />
+ */
+export declare const Timer: import('react').ForwardRefExoticComponent<TimerProps & import('react').RefAttributes<TimerHandle>>;

package/components/Timer/index.d.ts

@@ -0,0 +1,2 @@
+export { Timer } from './Timer';
+export type { TimerProps, TimerHandle, TimerClasses, TimerMode, TimerVariant, TimerLabelPlacement, TimerUnit, TimerSegment, } from './Timer';

package/components/Toast/Toast.d.ts

@@ -0,0 +1,82 @@
+import { ReactNode } from 'react';
+export type ToastVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastClasses {
+    viewport: string;
+    toast: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    close: string;
+}
+export interface ToastOptions {
+    /** Bold heading line. */
+    title?: ReactNode;
+    /** Secondary line beneath the title. */
+    description?: ReactNode;
+    /** Color/semantics. @default 'neutral' */
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in ms. `0` or `Infinity` keeps it until dismissed. Defaults to the provider's `duration`. */
+    duration?: number;
+}
+/** Callable toast trigger with `.dismiss` / `.dismissAll` helpers attached. */
+export interface ToastFn {
+    /** Show a toast; returns its id. */
+    (options: ToastOptions): string;
+    /** Dismiss a specific toast by id. */
+    dismiss: (id: string) => void;
+    /** Dismiss every visible toast. */
+    dismissAll: () => void;
+}
+export interface ToastApi {
+    /** Show a toast; returns its id. */
+    toast: ToastFn;
+    /** Dismiss a specific toast by id. */
+    dismiss: (id: string) => void;
+    /** Dismiss every visible toast. */
+    dismissAll: () => void;
+}
+/**
+ * Show a toast from anywhere — no hook or context required, as long as a
+ * `<ToastProvider>` is mounted somewhere to render the queue. Returns the new
+ * toast's id. Also callable as `toast.dismiss(id)` and `toast.dismissAll()`.
+ *
+ * @example
+ * import { toast } from '@overdoser/react-toolkit';
+ * toast({ variant: 'success', title: 'Saved' });
+ * const id = toast({ title: 'Uploading…', duration: 0 });
+ * toast.dismiss(id);
+ */
+export declare const toast: ToastFn;
+/**
+ * Returns the same imperative API as the standalone {@link toast}, for callers
+ * who prefer a hook. Works anywhere — a `<ToastProvider>` only needs to be
+ * mounted somewhere to render the toasts.
+ *
+ * @example
+ * const { toast } = useToast();
+ * toast({ variant: 'success', title: 'Saved', description: 'All set.' });
+ */
+export declare function useToast(): ToastApi;
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Where toasts stack on screen. @default 'top-right' */
+    position?: ToastPosition;
+    /** Default auto-dismiss delay in ms. @default 5000 */
+    duration?: number;
+    /** Maximum simultaneously-visible toasts; older ones are dropped. @default 5 */
+    max?: number;
+    /** Override class names on internal elements. */
+    classes?: Partial<ToastClasses>;
+}
+/**
+ * Provides the toast queue and renders the viewport (portaled to `document.body`).
+ * Wrap your app once, then call {@link useToast} anywhere beneath it.
+ *
+ * @example
+ * <ToastProvider position="bottom-right">
+ *   <App />
+ * </ToastProvider>
+ */
+export declare function ToastProvider({ children, position, duration, max, classes, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;

package/components/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast, toast } from './Toast';
+export type { ToastProviderProps, ToastOptions, ToastApi, ToastFn, ToastClasses, ToastVariant, ToastPosition, } from './Toast';

package/components/Toast/toastStore.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ToastOptions, ToastVariant } from './Toast';
+/** A live toast in the store. Resolved (`duration`) and renderable. */
+export interface ToastRecord {
+    id: string;
+    variant: ToastVariant;
+    title?: ReactNode;
+    description?: ReactNode;
+    duration: number;
+    exiting: boolean;
+}
+declare let config: {
+    duration: number;
+    max: number;
+};
+export declare function subscribeToasts(listener: () => void): () => void;
+export declare function getToasts(): ToastRecord[];
+export declare function getServerToasts(): ToastRecord[];
+/** A mounted provider sets the active defaults (duration/max). */
+export declare function configureToasts(next: Partial<typeof config>): void;
+/** Track provider lifecycle so we can warn when toasts fire with nothing rendering them. */
+export declare function registerProvider(): () => void;
+export declare function addToast(options: ToastOptions): string;
+export declare function dismissToast(id: string): void;
+export declare function dismissAllToasts(): void;
+/** Test-only: wipe state and pending timers back to defaults. */
+export declare function resetToastStore(): void;
+export {};

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipClasses {
+    wrapper: string;
+    tooltip: string;
+    arrow: string;
+}
+export interface TooltipProps {
+    /** The tooltip text/content. If empty/nullish, the tooltip never shows. */
+    content: ReactNode;
+    /** The trigger element(s). Wrapped in an inline span that owns hover/focus. */
+    children: ReactNode;
+    /** Preferred side. Flips to the opposite side if it would overflow. @default 'top' */
+    placement?: TooltipPlacement;
+    /** Delay before showing, in ms. @default 300 */
+    delay?: number;
+    /** Delay before hiding, in ms. @default 0 */
+    closeDelay?: number;
+    /** Disable the tooltip entirely. @default false */
+    disabled?: boolean;
+    /** Hide the little arrow. @default false */
+    hideArrow?: boolean;
+    /** Override class names on internal elements. */
+    classes?: Partial<TooltipClasses>;
+}
+/**
+ * Lightweight text tooltip shown on hover/focus after a short delay. For rich,
+ * interactive, click-triggered content use `Popover` instead.
+ *
+ * @example
+ * <Tooltip content="Copy to clipboard">
+ *   <button aria-label="Copy">⧉</button>
+ * </Tooltip>
+ */
+export declare function Tooltip({ content, children, placement, delay, closeDelay, disabled, hideArrow, classes, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}

package/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipClasses, TooltipPlacement } from './Tooltip';

package/components/inputs/Checkbox/Checkbox.d.ts

@@ -7,7 +7,13 @@ export interface CheckboxClasses {
 export interface CheckboxProps extends ComponentPropsWithRef<'input'> {
     /** Visible label rendered next to the box. */
     label?: ReactNode;
-    /** Sets the DOM `indeterminate` property; visually distinct from checked/unchecked. @default false */
+    /**
+     * Visual style of the control. `'switch'` renders a sliding toggle instead of
+     * a box; the underlying `<input type="checkbox">` (and its a11y/form behavior)
+     * is identical. `indeterminate` only applies to `'checkbox'`. @default 'checkbox'
+     */
+    variant?: 'checkbox' | 'switch';
+    /** Sets the DOM `indeterminate` property; visually distinct from checked/unchecked. Ignored when `variant="switch"`. @default false */
     indeterminate?: boolean;
     /** Override class names on internal elements. */
     classes?: Partial<CheckboxClasses>;
@@ -22,5 +28,9 @@ export interface CheckboxProps extends ComponentPropsWithRef<'input'> {
  *   checked={remember}
  *   onChange={(e) => setRemember(e.target.checked)}
  * />
+ *
+ * @example
+ * // Toggle-switch style
+ * <Checkbox variant="switch" label="Notifications" defaultChecked />
  */
 export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/components/inputs/DatePicker/DatePicker.d.ts

@@ -0,0 +1,58 @@
+import { CSSProperties } from 'react';
+export interface DatePickerClasses {
+    root: string;
+    input: string;
+    icon: string;
+    popover: string;
+    header: string;
+    nav: string;
+    grid: string;
+    day: string;
+    daySelected: string;
+    dayToday: string;
+    dayOutside: string;
+}
+export interface DatePickerProps {
+    /** Controlled selected date (`null` for empty). */
+    value?: Date | null;
+    /** Uncontrolled initial date. */
+    defaultValue?: Date | null;
+    /** Called with the newly selected date. */
+    onChange?: (date: Date | null) => void;
+    /** Earliest selectable date (inclusive). */
+    min?: Date;
+    /** Latest selectable date (inclusive). */
+    max?: Date;
+    /** Predicate to disable arbitrary days. */
+    disabledDate?: (date: Date) => boolean;
+    /** First day of the week (0 = Sunday). @default 0 */
+    weekStartsOn?: number;
+    /** BCP-47 locale for month/weekday names and default formatting. */
+    locale?: string;
+    /** Format the selected date for the input. Defaults to a localized medium date. */
+    format?: (date: Date) => string;
+    /** Placeholder when no date is selected. @default 'Select date' */
+    placeholder?: string;
+    /** Toolkit size scale. @default 'md' */
+    inputSize?: 'sm' | 'md' | 'lg';
+    /** Apply error styling. @default false */
+    error?: boolean;
+    /** Disable the field. @default false */
+    disabled?: boolean;
+    /** Render the calendar in a portal at `document.body` (escapes overflow). @default true */
+    portal?: boolean;
+    /** Override class names on internal elements. */
+    classes?: Partial<DatePickerClasses>;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Date input with a pop-up calendar. Single date selection with full keyboard
+ * support (arrows move days, PageUp/Down change month, Enter selects, Esc
+ * closes). Binds inside `FormField` (`value: Date | null` / `onChange`).
+ *
+ * @example
+ * <DatePicker value={date} onChange={setDate} min={new Date()} />
+ */
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/inputs/DatePicker/dateUtils.d.ts

@@ -0,0 +1,16 @@
+/** Date helpers for the calendar. All operate on local time, day granularity. */
+export declare function startOfDay(d: Date): Date;
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+export declare function addDays(d: Date, n: number): Date;
+export declare function addMonths(d: Date, n: number): Date;
+export declare function startOfMonth(d: Date): Date;
+/** ISO `YYYY-MM-DD` of the local date — stable key/identifier for a day. */
+export declare function toISODate(d: Date): string;
+/**
+ * The 6×7 grid of days covering the month of `viewDate`, starting each week on
+ * `weekStartsOn` (0 = Sunday). Always 42 cells so the calendar height is stable.
+ */
+export declare function buildCalendarDays(viewDate: Date, weekStartsOn: number): Date[];
+/** Short weekday labels ordered from `weekStartsOn`, localized. */
+export declare function weekdayLabels(locale: string | undefined, weekStartsOn: number): string[];

package/components/inputs/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerClasses } from './DatePicker';

package/components/inputs/NumberInput/NumberInput.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef } from 'react';
+export interface NumberInputClasses {
+    root: string;
+    input: string;
+    controls: string;
+    increment: string;
+    decrement: string;
+}
+export interface NumberInputProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step' | 'prefix'> {
+    /** Controlled numeric value (`null` when empty). */
+    value?: number | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: number | null;
+    /** Called with the parsed value (`null` when the field is empty). */
+    onChange?: (value: number | null) => void;
+    /** Minimum allowed value. */
+    min?: number;
+    /** Maximum allowed value. */
+    max?: number;
+    /** Increment/decrement step. @default 1 */
+    step?: number;
+    /** Decimal places to round to on commit. */
+    precision?: number;
+    /** Toolkit size scale. @default 'md' */
+    inputSize?: 'sm' | 'md' | 'lg';
+    /** Apply error styling. @default false */
+    error?: boolean;
+    /** Hide the stepper buttons. @default false */
+    hideControls?: boolean;
+    /** Override class names on internal elements. */
+    classes?: Partial<NumberInputClasses>;
+}
+/**
+ * Numeric input with stepper buttons, min/max clamping, and keyboard
+ * arrow-key stepping. Emits `onChange(value: number | null)`, so it binds
+ * directly inside `FormField`.
+ *
+ * @example
+ * <NumberInput value={qty} onChange={setQty} min={0} max={99} />
+ */
+export declare const NumberInput: import('react').ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/components/inputs/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInput } from './NumberInput';
+export type { NumberInputProps, NumberInputClasses } from './NumberInput';