@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/DateInput.d.ts

@@ -1,34 +1,181 @@
-import { InputSize, InputVariant } from "./Input";
-export interface DateInputProps {
+import { type AriaAttributes, type CSSProperties } from "react";
+/** Canonical rungs; DateInput supports all five (the Input rung table). */
+export declare enum DateInputSize {
+    /** 20px field, caption text, 12px icon. */
+    X_SMALL = "X_SMALL",
+    /** 24px field, body_sm text, 12px icon. */
+    SMALL = "SMALL",
+    /** 32px field, body_md text, 14px icon. The default (1.x `MEDIUM` was 28px). */
+    MEDIUM = "MEDIUM",
+    /** 36px field, body_lg text, 14px icon. */
+    LARGE = "LARGE",
+    /** 40px field, body_lg text, 16px icon. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+export declare enum DateInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+/** A closed date range. `end` is never before `start`. */
+export interface DateRange {
+    /** First day (or instant, with `hasTime`) of the range. */
+    start: Date;
+    /** Last day (or instant, with `hasTime`) of the range, inclusive. */
+    end: Date;
+}
+/** One named value in the presets column. */
+export interface DateInputPreset<TValue extends Date | DateRange = Date | DateRange> {
+    /** Text of the preset row ("Last 7 days"). */
+    label: string;
+    /** The value the preset sets. Build relative presets at render time. */
+    value: TValue;
+}
+/** Every DateInput prop except the value triple, `isRange` and `presets`. */
+interface DateInputBaseProps extends AriaAttributes {
+    /**
+     * Also pick an hour and minute (24-hour). Without it, every date is midnight of the chosen day.
+     * @default false
+     */
+    hasTime?: boolean;
+    /** Earliest selectable day. Earlier days are disabled; with `hasTime`, earlier times on that day clamp to it. */
+    min?: Date;
+    /** Latest selectable day. Later days are disabled; with `hasTime`, later times on that day clamp to it. */
+    max?: Date;
+    /**
+     * IANA zone (`"UTC"`, `"America/New_York"`) the calendar and time are read in. When set, its short name is shown after the value.
+     * @default the runtime's zone
+     */
+    timeZone?: string;
+    /**
+     * How a date reads in the field. With `isRange` it formats each end.
+     * @default Oct 3, 2026 (Oct 3, 2026, 14:30 with hasTime)
+     */
+    format?: (date: Date) => string;
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall. The calendar panel is the same size at every rung.
+     * @default DateInputSize.MEDIUM
+     */
+    size?: DateInputSize;
+    /**
+     * Resting fill of the field, from the surface set. Ignored with `isGhost`.
+     * @default DateInputVariant.PRIMARY
+     */
+    variant?: DateInputVariant;
+    /**
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover, focus and open (1.x
+     * `TRANSPARENT`). For dates set into a toolbar or a table cell. The panel is `PopoverVariant.BASE`.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
     label?: string;
-    /** Trigger surface color. @default InputVariant.PRIMARY */
-    variant?: InputVariant;
-    /** @default InputSize.MEDIUM */
-    size?: InputSize;
-    /** Controlled value. `null` shows the placeholder. */
-    value?: Date | null;
+    /**
+     * Shown in the field while there is no value. Never the label.
+     * @default Select date… (Select dates… with isRange)
+     */
     placeholder?: string;
-    /** Called with `null` when the selection is cleared. */
-    onChange?: (value: Date | null) => void;
-    /** A number is px. */
-    width?: number | string;
-    fillWidth?: boolean;
+    /** Message from the app, shown under the field through `Field`. Also turns the border red and sets `aria-invalid`. */
+    error?: string;
+    /**
+     * Error border and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Shows a clear button while there is a value and the field is editable. It calls `onChange(null)`.
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Not focusable, never opens. Shows the disabled look.
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Focusable and announced, shows the value, but never opens and has no clear button.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required`. No validation.
+     * @default false
+     */
     isRequired?: boolean;
-    /** Message under the field; also switches the border to the error color. */
-    error?: string;
-    /** Dates before this are not selectable. */
-    minDate?: Date;
-    /** Dates after this are not selectable. */
-    maxDate?: Date;
-    /** Override how the selected date reads in the trigger. */
-    format?: (date: Date) => string;
+    /**
+     * Stretch to the parent's width. Without it, the field is 240px wide (320px with `isRange`).
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name when there is no visible label (no `label` and no wrapping `Field`). */
+    ariaLabel?: string;
+    /** Controlled open state of the calendar panel. When set, DateInput calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested state on click, the keyboard, a choice, Escape, an outside press and focus leaving the panel. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * DOM id of the combobox element. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the combobox element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when DateInput renders one, otherwise the field wrapper. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A single date. */
+interface DateInputSingleProps {
+    /**
+     * Pick a start and an end. Changes the type of `value`, `defaultValue`, `onChange` and `presets` to `DateRange`.
+     * @default false
+     */
+    isRange?: false;
+    /** Controlled value. `null` shows the placeholder. Pass it with `onChange`. */
+    value?: Date | null;
+    /**
+     * Initial value while uncontrolled.
+     * @default null
+     */
+    defaultValue?: Date | null;
+    /** Called with the new date when the user picks one, and with `null` when the clear button is pressed. */
+    onChange?: (value: Date | null) => void;
+    /** Named values shown in a column beside the calendar ("Today"). Choosing one sets the value and closes the panel. */
+    presets?: DateInputPreset<Date>[];
+}
+/** A range of dates. */
+interface DateInputRangeProps {
+    /**
+     * Pick a start and an end. Changes the type of `value`, `defaultValue`, `onChange` and `presets` to `DateRange`.
+     * @default false
+     */
+    isRange: true;
+    /** Controlled value. `null` shows the placeholder. Pass it with `onChange`. */
+    value?: DateRange | null;
+    /**
+     * Initial value while uncontrolled.
+     * @default null
+     */
+    defaultValue?: DateRange | null;
+    /** Called with the complete range when the user picks its end, and with `null` when the clear button is pressed. */
+    onChange?: (value: DateRange | null) => void;
+    /** Named ranges shown in a column beside the calendar ("Last 7 days"). Choosing one sets the value and closes the panel. */
+    presets?: DateInputPreset<DateRange>[];
 }
-export declare function defaultDateFormat(date: Date): string;
-/**
- * A date field with a calendar popover. Fully controlled — you own `value`.
- *
- * Works in `Date` objects throughout; there is no string parsing to get wrong.
- */
-declare const DateInput: ({ label, variant, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
+/** DateInput props: the value type follows `isRange`. */
+export type DateInputProps = DateInputBaseProps & (DateInputSingleProps | DateInputRangeProps);
+/** Choose a date, a date and time, or a range of either, in a field that opens a calendar. */
+declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLDivElement>>;
 export default DateInput;