@logicplanes/kaeso-ui 0.1.0

package/dist/types/components/data-table/columns.d.ts

@@ -0,0 +1,47 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import { type StatusDotProps } from "../status-dot/status-dot.js";
+import type { StatusTone } from "../../utils/tone.js";
+type Base<T = never> = {
+    id: string;
+    header: ReactNode;
+    size?: number | undefined;
+    priority?: number | undefined;
+    grow?: boolean | undefined;
+    minWidth?: number | undefined;
+    tone?: ((row: T) => StatusTone | undefined) | undefined;
+};
+type Accessor<T, V> = (row: T) => V;
+export declare const col: {
+    text: <T>(b: Base<T>, get: Accessor<T, string>) => ColumnDef<T, string>;
+    mono: <T>(b: Base<T>, get: Accessor<T, string>) => ColumnDef<T, string>;
+    number: <T>(b: Base<T>, get: Accessor<T, number>) => ColumnDef<T, number>;
+    money: <T>(b: Base<T>, get: Accessor<T, string>, options?: {
+        decimals?: number | undefined;
+    }) => ColumnDef<T, string>;
+    tokens: <T>(b: Base<T>, get: Accessor<T, number>) => ColumnDef<T, number>;
+    duration: <T>(b: Base<T>, get: Accessor<T, number>) => ColumnDef<T, number>;
+    date: <T>(b: Base<T>, get: Accessor<T, string | Date>) => ColumnDef<T, string | Date>;
+    relative: <T>(b: Base<T>, get: Accessor<T, string | Date>, options?: {
+        now?: Date | number | undefined;
+    }) => ColumnDef<T, string | Date>;
+    status: <T>(b: Base<T>, get: Accessor<T, {
+        tone: NonNullable<StatusDotProps["tone"]>;
+        label: string;
+    }>) => ColumnDef<T, {
+        tone: NonNullable<StatusDotProps["tone"]>;
+        label: string;
+    }>;
+    avatar: <T>(b: Base<T>, get: Accessor<T, {
+        name: string;
+        src?: string | undefined;
+    }>) => ColumnDef<T, {
+        name: string;
+        src?: string | undefined;
+    }>;
+    custom: <T, V>(b: Base<T>, get: Accessor<T, V>, cell: (v: V, row: T) => ReactNode, meta?: {
+        align?: "start" | "end" | undefined;
+        mono?: boolean | undefined;
+    }) => ColumnDef<T, V>;
+};
+export {};

package/dist/types/components/data-table/data-table.d.ts

@@ -0,0 +1,80 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type ColumnDef, type RowSelectionState, type SortingState } from "@tanstack/react-table";
+import { type StatusTone } from "../../utils/tone.js";
+export declare const KAESO_DATA_TABLE_VARIANTS: {
+    readonly density: {
+        readonly compact: {
+            readonly classes: "h-36";
+            readonly description: "36px rows";
+        };
+        readonly default: {
+            readonly classes: "h-40";
+            readonly description: "40px rows (default)";
+        };
+        readonly comfortable: {
+            readonly classes: "h-48";
+            readonly description: "48px rows";
+        };
+    };
+};
+export declare const KAESO_DATA_TABLE_DEFAULT_VARIANTS: {
+    readonly density: "default";
+};
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData, TValue> {
+        align?: "start" | "end" | undefined;
+        priority?: number | undefined;
+        grow?: boolean | undefined;
+        minWidth?: number | undefined;
+        mono?: boolean | undefined;
+        text?: ((row: TData) => string) | undefined;
+        tone?: ((row: TData) => StatusTone | undefined) | undefined;
+    }
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDef<T, any>[];
+    getRowId?: ((row: T) => string) | undefined;
+    density?: keyof typeof KAESO_DATA_TABLE_VARIANTS.density | undefined;
+    onRowClick?: ((row: T) => void) | undefined;
+    rowMenu?: ((row: T) => ReactNode) | undefined;
+    selectable?: boolean | undefined;
+    selection?: RowSelectionState | undefined;
+    onSelectionChange?: ((selection: RowSelectionState) => void) | undefined;
+    sorting?: SortingState | undefined;
+    onSortingChange?: ((sorting: SortingState) => void) | undefined;
+    manualSorting?: boolean | undefined;
+    loading?: boolean | undefined;
+    error?: ReactNode | undefined;
+    onRetry?: (() => void) | undefined;
+    empty?: ReactNode | undefined;
+    hasMore?: boolean | undefined;
+    loadingMore?: boolean | undefined;
+    onLoadMore?: (() => void) | undefined;
+    stickyFirstColumn?: boolean | undefined;
+    virtualizeAbove?: number | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+    activeRowId?: string | undefined;
+    freshRowIds?: ReadonlySet<string> | undefined;
+}
+export declare const DATA_TABLE_GROW_MIN = 136;
+type FitColumn = {
+    id: string;
+    size: number;
+    priority: number;
+    grow: boolean;
+    minWidth: number | undefined;
+    fixed?: boolean | undefined;
+};
+export declare function fitColumns(columns: FitColumn[], width: number): {
+    hidden: string[];
+    tight: boolean;
+    overflow: boolean;
+};
+declare function DataTableInner<T>({ data, columns: userColumns, getRowId, density, onRowClick, rowMenu, selectable, selection, onSelectionChange, sorting: sortingProp, onSortingChange, manualSorting, loading, error, onRetry, empty, hasMore, loadingMore, onLoadMore, stickyFirstColumn, virtualizeAbove, className, activeRowId, freshRowIds, "aria-label": ariaLabel, }: DataTableProps<T>, ref: React.Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>(p: DataTableProps<T> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => ReturnType<typeof DataTableInner>;
+export {};

package/dist/types/components/data-table/docs.d.ts

@@ -0,0 +1,32 @@
+export declare const docs: {
+    DataTable: {
+        description: string;
+        props: {
+            activeRowId: string;
+            "aria-label": string;
+            columns: string;
+            data: string;
+            density: string;
+            empty: string;
+            error: string;
+            freshRowIds: string;
+            getRowId: string;
+            hasMore: string;
+            loading: string;
+            loadingMore: string;
+            manualSorting: string;
+            onLoadMore: string;
+            onRetry: string;
+            onRowClick: string;
+            onSelectionChange: string;
+            onSortingChange: string;
+            ref: string;
+            rowMenu: string;
+            selectable: string;
+            selection: string;
+            sorting: string;
+            stickyFirstColumn: string;
+            virtualizeAbove: string;
+        };
+    };
+};

package/dist/types/components/data-table/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./data-table.js";
+export * from "./columns.js";
+export type { ColumnDef, SortingState, RowSelectionState } from "@tanstack/react-table";

package/dist/types/components/date-picker/date-picker.d.ts

@@ -0,0 +1,55 @@
+import type { DateRange } from "react-day-picker";
+import type { CalendarProps } from "../calendar/calendar.js";
+import { type FieldWrapProps } from "../field/field.js";
+export declare const KAESO_DATE_PICKER_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "h-32 pl-10 pr-12 gap-6 text-body";
+            readonly description: "32px";
+        };
+        readonly md: {
+            readonly classes: "h-36 pl-14 pr-16 gap-8 text-body";
+            readonly description: "36px (default)";
+        };
+        readonly lg: {
+            readonly classes: "h-40 pl-16 pr-18 gap-8 text-body";
+            readonly description: "40px";
+        };
+    };
+};
+export declare const KAESO_DATE_PICKER_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface DatePickerProps extends FieldWrapProps {
+    value?: Date | null | undefined;
+    defaultValue?: Date | null | undefined;
+    onValueChange?: ((value: Date | null) => void) | undefined;
+    placeholder?: string | undefined;
+    size?: keyof typeof KAESO_DATE_PICKER_VARIANTS.size | undefined;
+    weekStartsOn?: CalendarProps["weekStartsOn"] | undefined;
+    disabledDays?: ((date: Date) => boolean) | undefined;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DateRangePreset {
+    id?: string | undefined;
+    label: string;
+    range: () => DateRange;
+}
+export declare const DEFAULT_RANGE_PRESETS: DateRangePreset[];
+export interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange"> {
+    value?: DateRange | null | undefined;
+    defaultValue?: DateRange | null | undefined;
+    onValueChange?: ((value: DateRange | null, details: {
+        preset: string | null;
+    }) => void) | undefined;
+    presets?: DateRangePreset[] | undefined;
+    preset?: string | null | undefined;
+}
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { DateRange };

package/dist/types/components/date-picker/date-popup.d.ts

@@ -0,0 +1,9 @@
+import { type CalendarProps } from "../calendar/calendar.js";
+export interface DatePopupProps {
+    date: Date | null;
+    onDateChange: (date: Date | null) => void;
+    onClose: () => void;
+    weekStartsOn: CalendarProps["weekStartsOn"];
+    disabledDays: ((date: Date) => boolean) | undefined;
+}
+export declare function DatePopup({ date, onDateChange, onClose, weekStartsOn, disabledDays }: DatePopupProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/date-picker/docs.d.ts

@@ -0,0 +1,73 @@
+export declare const docs: {
+    DatePicker: {
+        description: string;
+        props: {
+            "aria-label": string;
+            "aria-labelledby": string;
+            defaultValue: string;
+            description: string;
+            disabled: string;
+            disabledDays: string;
+            id: string;
+            label: string;
+            layout: string;
+            onValueChange: string;
+            optional: string;
+            placeholder: string;
+            required: string;
+            size: string;
+            value: string;
+            weekStartsOn: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    DateRangePicker: {
+        description: string;
+        props: {
+            "aria-label": string;
+            "aria-labelledby": string;
+            defaultValue: string;
+            description: string;
+            disabled: string;
+            disabledDays: string;
+            id: string;
+            label: string;
+            layout: string;
+            onValueChange: string;
+            optional: string;
+            placeholder: string;
+            preset: string;
+            presets: string;
+            required: string;
+            size: string;
+            value: string;
+            weekStartsOn: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    TimeInput: {
+        description: string;
+        props: {
+            "aria-label": string;
+            defaultValue: string;
+            description: string;
+            disabled: string;
+            id: string;
+            label: string;
+            layout: string;
+            onValueChange: string;
+            optional: string;
+            required: string;
+            size: string;
+            utc: string;
+            value: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+};

package/dist/types/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./date-picker.js";
+export * from "./time-input.js";

package/dist/types/components/date-picker/iso-field.d.ts

@@ -0,0 +1,5 @@
+export declare function IsoField({ label, value, onCommit }: {
+    label: string;
+    value: Date | undefined;
+    onCommit: (d: Date) => boolean | void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/date-picker/range-popup.d.ts

@@ -0,0 +1,13 @@
+import type { DateRange } from "react-day-picker";
+import { type CalendarProps } from "../calendar/calendar.js";
+import type { DateRangePreset } from "./date-picker.js";
+export interface RangePopupProps {
+    range: DateRange | null;
+    preset: string | null;
+    presets: DateRangePreset[];
+    onPick: (range: DateRange, preset: string | null) => void;
+    onClose: () => void;
+    weekStartsOn: CalendarProps["weekStartsOn"];
+    disabledDays: ((date: Date) => boolean) | undefined;
+}
+export declare function RangePopup({ range, preset, presets, onPick, onClose, weekStartsOn, disabledDays }: RangePopupProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/date-picker/time-input.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+import { type FieldWrapProps } from "../field/field.js";
+import { type InputSize } from "../input/input-group.js";
+export declare const KAESO_TIME_INPUT_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "h-32 px-12 gap-6 text-body";
+            readonly description: "32px: toolbars and compact forms";
+        };
+        readonly md: {
+            readonly classes: "h-36 px-16 gap-8 text-body";
+            readonly description: "36px: the default";
+        };
+        readonly lg: {
+            readonly classes: "h-40 px-18 gap-8 text-body";
+            readonly description: "40px";
+        };
+        readonly xl: {
+            readonly classes: "h-48 px-22 gap-8 text-body-lg";
+            readonly description: "48px: sign-in and setup forms";
+        };
+    };
+};
+export declare const KAESO_TIME_INPUT_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface TimeInputProps extends FieldWrapProps {
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    size?: InputSize | undefined;
+    disabled?: boolean | undefined;
+    utc?: boolean | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    "aria-label"?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/dialog/dialog.d.ts

@@ -0,0 +1,118 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare const KAESO_DIALOG_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "w-440";
+            readonly description: "440px: confirmations, short forms";
+        };
+        readonly md: {
+            readonly classes: "w-560";
+            readonly description: "560px: forms (default)";
+        };
+        readonly lg: {
+            readonly classes: "w-720";
+            readonly description: "720px: two columns, previews";
+        };
+    };
+};
+export declare const KAESO_DIALOG_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface DialogProps {
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    trigger?: ReactElement | undefined;
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;
+    children?: ReactNode | undefined;
+    footer?: ReactNode | undefined;
+    onSubmit?: (() => void) | undefined;
+    hideClose?: boolean | undefined;
+    headerStart?: ReactNode | undefined;
+    className?: string | undefined;
+    inline?: boolean | undefined;
+}
+declare function Close({ children }: {
+    children: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Close {
+    var displayName: string;
+}
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Close: typeof Close;
+};
+export declare const KAESO_ALERT_DIALOG_VARIANTS: {
+    readonly tone: {
+        readonly danger: {
+            readonly classes: "bg-danger-tint text-danger-text";
+            readonly description: "Destructive (default)";
+        };
+        readonly warning: {
+            readonly classes: "bg-warning-tint text-warning-text";
+            readonly description: "Risky but reversible";
+        };
+        readonly info: {
+            readonly classes: "bg-info-tint text-info-text";
+            readonly description: "Neutral confirmation";
+        };
+    };
+};
+export declare const KAESO_ALERT_DIALOG_DEFAULT_VARIANTS: {
+    readonly tone: "danger";
+};
+export interface AlertDialogProps {
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    trigger?: ReactElement | undefined;
+    title: ReactNode;
+    description: ReactNode;
+    confirmLabel: string;
+    cancelLabel?: string | undefined;
+    onConfirm: () => void | Promise<void>;
+    tone?: keyof typeof KAESO_ALERT_DIALOG_VARIANTS.tone | undefined;
+    confirmText?: string | undefined;
+    loading?: boolean | undefined;
+    inline?: boolean | undefined;
+}
+export declare function AlertDialog(props: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AlertDialog {
+    var displayName: string;
+}
+export declare const KAESO_LAYER_DIALOG_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "w-440";
+            readonly description: "440px: confirmations, short forms";
+        };
+        readonly md: {
+            readonly classes: "w-560";
+            readonly description: "560px: forms (default)";
+        };
+        readonly lg: {
+            readonly classes: "w-720";
+            readonly description: "720px: two columns, previews";
+        };
+    };
+};
+export declare const KAESO_LAYER_DIALOG_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface DialogLayer {
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    content: ReactNode;
+    footer?: ReactNode | undefined;
+}
+export interface LayerDialogProps extends Omit<DialogProps, "title" | "description" | "children" | "footer" | "headerStart"> {
+    layers: DialogLayer[];
+    layer?: number | undefined;
+    onLayerChange?: ((layer: number) => void) | undefined;
+}
+export declare function LayerDialog({ layers, layer, onLayerChange, ...props }: LayerDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace LayerDialog {
+    var displayName: string;
+}
+export {};

package/dist/types/components/dialog/docs.d.ts

@@ -0,0 +1,70 @@
+export declare const docs: {
+    AlertDialog: {
+        description: string;
+        props: {
+            cancelLabel: string;
+            confirmLabel: string;
+            confirmText: string;
+            defaultOpen: string;
+            description: string;
+            inline: string;
+            loading: string;
+            onConfirm: string;
+            onOpenChange: string;
+            open: string;
+            title: string;
+            tone: string;
+            trigger: string;
+        };
+    };
+    Dialog: {
+        description: string;
+        props: {
+            children: string;
+            defaultOpen: string;
+            description: string;
+            footer: string;
+            headerStart: string;
+            hideClose: string;
+            inline: string;
+            onOpenChange: string;
+            onSubmit: string;
+            open: string;
+            size: string;
+            title: string;
+            trigger: string;
+        };
+    };
+    LayerDialog: {
+        description: string;
+        props: {
+            defaultOpen: string;
+            hideClose: string;
+            inline: string;
+            layer: string;
+            layers: string;
+            onLayerChange: string;
+            onOpenChange: string;
+            onSubmit: string;
+            open: string;
+            size: string;
+            trigger: string;
+        };
+    };
+    StepDialog: {
+        description: string;
+        props: {
+            defaultStep: string;
+            inline: string;
+            onOpenChange: string;
+            onSubmit: string;
+            open: string;
+            size: string;
+            steps: string;
+            submitLabel: string;
+            submitting: string;
+            title: string;
+            tone: string;
+        };
+    };
+};

package/dist/types/components/dialog/focus.d.ts

@@ -0,0 +1,2 @@
+export declare function initialDialogControl(frame: HTMLElement, scope?: HTMLElement | undefined): HTMLElement | null;
+export declare function focusDialogSection(section: HTMLElement | null | undefined, previous?: HTMLElement | null | undefined): void;

package/dist/types/components/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./dialog.js";
+export * from "./step-dialog.js";

package/dist/types/components/dialog/step-dialog.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { KAESO_DIALOG_VARIANTS } from "./dialog.js";
+export interface DialogStep {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode | undefined;
+    content: ReactNode;
+    blockedReason?: string | undefined;
+}
+export interface StepDialogProps {
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    title: ReactNode;
+    steps: DialogStep[];
+    submitLabel: string;
+    onSubmit: () => void;
+    submitting?: boolean | undefined;
+    tone?: "default" | "danger" | undefined;
+    size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;
+    inline?: boolean | undefined;
+    defaultStep?: number | undefined;
+}
+export declare function StepDialog({ open, onOpenChange, title, steps, submitLabel, onSubmit, submitting, tone, size, inline, defaultStep, }: StepDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace StepDialog {
+    var displayName: string;
+}

package/dist/types/components/display-options/display-options.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { type SegmentedOption } from "../segmented/segmented.js";
+import { type SelectOption } from "../select/select.js";
+import type { IconData } from "../icon/icon.js";
+export declare const KAESO_DISPLAY_OPTIONS_VARIANTS: {
+    readonly trigger: {
+        readonly secondary: {
+            readonly classes: "";
+            readonly description: "A raised circle with a ring, like page-header buttons (default)";
+        };
+        readonly ghost: {
+            readonly classes: "";
+            readonly description: "A ghost circle";
+        };
+    };
+};
+export declare const KAESO_DISPLAY_OPTIONS_DEFAULT_VARIANTS: {
+    readonly trigger: "secondary";
+};
+export interface DisplayOptionsRow {
+    label: string;
+    icon?: IconData | undefined;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+}
+export interface DisplayOptionsToggle {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+export interface DisplayOptionsProps {
+    view?: {
+        value: string;
+        options: SegmentedOption[];
+        onChange: (v: string) => void;
+    } | undefined;
+    rows?: DisplayOptionsRow[] | undefined;
+    toggles?: DisplayOptionsToggle[] | undefined;
+    properties?: {
+        options: {
+            value: string;
+            label: string;
+        }[];
+        value: string[];
+        onChange: (v: string[]) => void;
+    } | undefined;
+    trigger?: keyof typeof KAESO_DISPLAY_OPTIONS_VARIANTS.trigger | undefined;
+    inline?: boolean | undefined;
+    footer?: ReactNode | undefined;
+}
+export declare function DisplayOptions({ trigger, inline, ...props }: DisplayOptionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DisplayOptions {
+    var displayName: string;
+}

package/dist/types/components/display-options/docs.d.ts

@@ -0,0 +1,14 @@
+export declare const docs: {
+    DisplayOptions: {
+        description: string;
+        props: {
+            footer: string;
+            inline: string;
+            properties: string;
+            rows: string;
+            toggles: string;
+            trigger: string;
+            view: string;
+        };
+    };
+};

package/dist/types/components/display-options/index.d.ts

@@ -0,0 +1 @@
+export * from "./display-options.js";