@logicplanes/kaeso-ui 0.2.1 → 0.3.0

package/dist/types/components/charts/bar.d.ts

@@ -33,6 +33,12 @@ export interface BarChartProps extends ChartState {
     highlight?: number | undefined;
     axisLabels?: string[] | undefined;
     dates?: readonly AxisDate[] | undefined;
+    shares?: boolean | undefined;
+    partial?: {
+        first?: boolean | undefined;
+        last?: boolean | undefined;
+        ongoing?: boolean | undefined;
+    } | undefined;
     "aria-label": string;
     className?: string | undefined;
 }

package/dist/types/components/charts/core.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import { type ReactNode, type RefObject } from "react";
+import { type ReactNode } from "react";
 import { tokenKindSeries } from "@logicplanes/kaeso-tokens";
 import { type UiText } from "../../i18n/context.js";
 export declare function wholeTicks(ticks: number[], values: number[]): number[];
@@ -13,7 +13,7 @@ export type TokenKind = keyof typeof tokenKindSeries;
 export declare const tokenKindColor: (k: TokenKind, thin?: boolean) => "var(--k-viz-1)" | "var(--k-viz-2)" | "var(--k-viz-3)" | "var(--k-viz-4)" | "var(--k-viz-5)" | "var(--k-viz-6)" | "var(--k-viz-7)" | "var(--k-viz-8)" | "var(--k-viz-thin-1)" | "var(--k-viz-thin-2)" | "var(--k-viz-thin-3)" | "var(--k-viz-thin-4)" | "var(--k-viz-thin-5)" | "var(--k-viz-thin-6)" | "var(--k-viz-thin-7)" | "var(--k-viz-thin-8)" | "var(--k-viz-1-soft)";
 export declare const TOKEN_KIND_ORDER: TokenKind[];
 export declare function tokenKindLabel(kind: TokenKind, t?: UiText): string;
-export declare function useSize<T extends HTMLElement>(): [RefObject<T | null>, {
+export declare function useSize<T extends HTMLElement>(): [(el: T | null) => void, {
     width: number;
     height: number;
 }];

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

@@ -15,7 +15,9 @@ export declare const docs: {
             layout: string;
             loading: string;
             onRetry: string;
+            partial: string;
             series: string;
+            shares: string;
         };
     };
     ChartFrame: {
@@ -159,6 +161,7 @@ export declare const docs: {
             empty: string;
             emptyText: string;
             error: string;
+            formatTick: string;
             formatTime: string;
             formatValue: string;
             height: string;
@@ -167,8 +170,12 @@ export declare const docs: {
             kind: string;
             loading: string;
             onRetry: string;
+            partial: string;
             series: string;
+            shares: string;
             threshold: string;
+            tickAt: string;
+            timeZone: string;
         };
     };
 };

package/dist/types/components/charts/time-axis.d.ts

@@ -0,0 +1,5 @@
+export type WallClock = (d: Date) => number;
+export declare function wallClock(timeZone: string | undefined): WallClock;
+export declare function fromWall(wall: number, clock: WallClock): Date;
+export declare function zoneTicks(from: Date, to: Date, count: number, clock: WallClock): Date[];
+export declare const wallDay: (d: Date, clock: WallClock) => string;

package/dist/types/components/charts/timeseries.d.ts

@@ -41,6 +41,15 @@ export interface TimeseriesChartProps extends ChartState {
     hideLegend?: boolean | undefined;
     highlight?: number | undefined;
     formatTime?: ((t: Date) => string) | undefined;
+    formatTick?: ((t: Date) => string) | undefined;
+    tickAt?: "time" | "points" | undefined;
+    timeZone?: string | undefined;
+    shares?: boolean | undefined;
+    partial?: {
+        first?: boolean | undefined;
+        last?: boolean | undefined;
+        ongoing?: boolean | undefined;
+    } | undefined;
     "aria-label": string;
     className?: string | undefined;
 }

package/dist/types/components/code-block/highlighter.d.ts

@@ -2,6 +2,7 @@ type Highlighter = {
     codeToTokens: (code: string, o: {
         lang: string;
         theme: string;
+        tokenizeMaxLineLength?: number | undefined;
     }) => {
         tokens: {
             content: string;
@@ -12,6 +13,7 @@ type Highlighter = {
     getLoadedLanguages: () => string[];
     loadLanguage: (...l: unknown[]) => Promise<void>;
 };
+export declare const HIGHLIGHT_MAX_CHARS = 200000;
 export declare const CODE_LANGS: readonly ["ts", "tsx", "js", "json", "bash", "python", "yaml", "diff"];
 export type CodeLang = (typeof CODE_LANGS)[number] | "text";
 export declare function getHighlighter(): Promise<Highlighter>;

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

@@ -44,7 +44,9 @@ interface BaseProps extends FieldWrapProps {
     emptyText?: ReactNode | undefined;
     loading?: boolean | undefined;
     onInputValueChange?: ((value: string) => void) | undefined;
+    searchDelay?: number | undefined;
     onCreate?: ((label: string) => void) | undefined;
+    createLabel?: ((label: string) => string) | undefined;
     disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     id?: string | undefined;

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

@@ -18,8 +18,6 @@ export declare const docs: {
             size: string;
             suggestions: string;
             value: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -38,17 +36,17 @@ export declare const docs: {
             loading: string;
             multiple: string;
             name: string;
+            createLabel: string;
             onCreate: string;
             onInputValueChange: string;
             onValueChange: string;
+            searchDelay: string;
             optional: string;
             options: string;
             placeholder: string;
             required: string;
             size: string;
             value: string;
-        };
-        deprecated: {
             error: string;
         };
     };

package/dist/types/components/command-list/command-list.d.ts

@@ -0,0 +1,84 @@
+import { type KeyboardEvent, type ReactNode } from "react";
+export declare const KAESO_COMMAND_LIST_VARIANTS: {
+    readonly height: {
+        readonly popover: {
+            readonly classes: "picker-limits";
+            readonly description: "At most 480px or 70% of the window, shrinking to its rows: a popover (default)";
+        };
+        readonly inline: {
+            readonly classes: "max-h-360 rounded-group bg-raised shadow-xs";
+            readonly description: "Its rows' height up to 360px in a raised frame, kept while searching: a dialog step";
+        };
+        readonly fill: {
+            readonly classes: "min-h-0 flex-1";
+            readonly description: "Fills its parent: a phone sheet or a command palette";
+        };
+    };
+    readonly size: {
+        readonly md: {
+            readonly classes: "";
+            readonly description: "A 44px search over 34px rows (default)";
+        };
+        readonly lg: {
+            readonly classes: "";
+            readonly description: "A 56px search over 40px rows: the command palette";
+        };
+    };
+};
+export declare const KAESO_COMMAND_LIST_DEFAULT_VARIANTS: {
+    readonly height: "popover";
+    readonly size: "md";
+};
+export type CommandListHeight = keyof typeof KAESO_COMMAND_LIST_VARIANTS.height;
+export interface CommandListRowState {
+    query: string;
+    active: boolean;
+    selected: boolean;
+}
+export interface CommandListItem {
+    value: string;
+    label: string;
+    keywords?: readonly string[] | undefined;
+    leading?: ReactNode | undefined;
+    meta?: ReactNode | undefined;
+    render?: ((state: CommandListRowState) => ReactNode) | undefined;
+    disabled?: boolean | undefined;
+}
+export interface CommandListGroup {
+    id: string;
+    label?: string | undefined;
+    leading?: ReactNode | undefined;
+    count?: ReactNode | undefined;
+    loading?: boolean | undefined;
+    items: CommandListItem[];
+}
+export interface CommandListProps {
+    groups: CommandListGroup[];
+    "aria-label": string;
+    value?: string | readonly string[] | null | undefined;
+    multiple?: boolean | undefined;
+    onSelect?: ((value: string) => void) | undefined;
+    query?: string | undefined;
+    defaultQuery?: string | undefined;
+    onQueryChange?: ((query: string) => void) | undefined;
+    placeholder?: string | undefined;
+    emptyText?: ReactNode | undefined;
+    toolbar?: ReactNode | undefined;
+    footer?: ReactNode | undefined;
+    searchPrefix?: ReactNode | undefined;
+    loading?: boolean | undefined;
+    onInputKeyDown?: ((event: KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    size?: keyof typeof KAESO_COMMAND_LIST_VARIANTS.size | undefined;
+    height?: CommandListHeight | undefined;
+    autoFocus?: boolean | undefined;
+    onEscape?: (() => void) | undefined;
+    escapeClears?: boolean | undefined;
+    match?: ((item: CommandListItem, query: string) => number) | undefined;
+    inputProps?: {
+        [attribute: `data-${string}`]: string;
+    } | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const CommandListHeightContext: import("react").Context<"inline" | "fill" | "popover" | null>;
+export declare const CommandList: import("react").ForwardRefExoticComponent<CommandListProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/command-list/docs.d.ts

@@ -0,0 +1,52 @@
+export declare const docs: {
+    CommandList: {
+        description: string;
+        props: {
+            "aria-label": string;
+            autoFocus: string;
+            defaultQuery: string;
+            escapeClears: string;
+            emptyText: string;
+            footer: string;
+            groups: string;
+            loading: string;
+            height: string;
+            inputProps: string;
+            match: string;
+            multiple: string;
+            onEscape: string;
+            onQueryChange: string;
+            onInputKeyDown: string;
+            onSelect: string;
+            placeholder: string;
+            query: string;
+            searchPrefix: string;
+            size: string;
+            toolbar: string;
+            value: string;
+        };
+    };
+    PickerPopover: {
+        description: string;
+        props: {
+            align: string;
+            children: string;
+            onOpenChange: string;
+            open: string;
+            title: string;
+            trigger: string;
+            width: string;
+        };
+    };
+    PickerTrigger: {
+        description: string;
+        props: {
+            appearance: string;
+            children: string;
+            fullWidth: string;
+            invalid: string;
+            placeholder: string;
+            size: string;
+        };
+    };
+};

package/dist/types/components/command-list/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./command-list.js";
+export * from "./picker-popover.js";
+export { commandMatch } from "./match.js";

package/dist/types/components/command-list/match.d.ts

@@ -0,0 +1 @@
+export declare function commandMatch(query: string, fields: readonly string[]): number;

package/dist/types/components/command-list/picker-popover.d.ts

@@ -0,0 +1,44 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { KAESO_SELECT_VARIANTS } from "../select/select.js";
+export declare const KAESO_PICKER_POPOVER_VARIANTS: {
+    readonly width: {
+        readonly sm: {
+            readonly classes: "w-320";
+            readonly description: "320px: providers and short lists";
+        };
+        readonly md: {
+            readonly classes: "w-400";
+            readonly description: "400px (default)";
+        };
+        readonly lg: {
+            readonly classes: "w-560";
+            readonly description: "560px: models with their details";
+        };
+    };
+};
+export declare const KAESO_PICKER_POPOVER_DEFAULT_VARIANTS: {
+    readonly width: "md";
+};
+export interface PickerPopoverProps {
+    trigger: ReactElement;
+    title: string;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    width?: keyof typeof KAESO_PICKER_POPOVER_VARIANTS.width | undefined;
+    align?: "start" | "end" | undefined;
+    children: ReactNode;
+}
+export declare function PickerPopover({ trigger, title, open, onOpenChange, width, align, children }: PickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PickerPopover {
+    var displayName: string;
+}
+export interface PickerTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    appearance?: keyof typeof KAESO_SELECT_VARIANTS.appearance | undefined;
+    size?: keyof typeof KAESO_SELECT_VARIANTS.size | undefined;
+    fullWidth?: boolean | undefined;
+    invalid?: boolean | undefined;
+    placeholder?: ReactNode | undefined;
+    children?: ReactNode | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const PickerTrigger: import("react").ForwardRefExoticComponent<PickerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -58,6 +58,7 @@ export interface DataTableProps<T> {
     className?: string | undefined;
     activeRowId?: string | undefined;
     freshRowIds?: ReadonlySet<string> | undefined;
+    onHiddenColumnsChange?: ((ids: string[]) => void) | undefined;
 }
 export declare const DATA_TABLE_GROW_MIN = 136;
 type FitColumn = {
@@ -68,12 +69,12 @@ type FitColumn = {
     minWidth: number | undefined;
     fixed?: boolean | undefined;
 };
-export declare function fitColumns(columns: FitColumn[], width: number): {
+export declare function fitColumns(columns: FitColumn[], width: number, reserve?: 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;
+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, onHiddenColumnsChange, "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>;

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

@@ -15,6 +15,7 @@ export declare const docs: {
             loading: string;
             loadingMore: string;
             manualSorting: string;
+            onHiddenColumnsChange: string;
             onLoadMore: string;
             onRetry: string;
             onRowClick: string;

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

@@ -18,8 +18,6 @@ export declare const docs: {
             size: string;
             value: string;
             weekStartsOn: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -44,8 +42,6 @@ export declare const docs: {
             size: string;
             value: string;
             weekStartsOn: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -65,8 +61,6 @@ export declare const docs: {
             size: string;
             utc: string;
             value: string;
-        };
-        deprecated: {
             error: string;
         };
     };

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

@@ -14,9 +14,20 @@ export declare const KAESO_DIALOG_VARIANTS: {
             readonly description: "720px: two columns, previews";
         };
     };
+    readonly anchor: {
+        readonly center: {
+            readonly classes: "items-center";
+            readonly description: "Centered on the screen (default)";
+        };
+        readonly top: {
+            readonly classes: "items-start pt-dialog-top";
+            readonly description: "A fixed top edge, for content that changes height, such as the steps of a StepDialog";
+        };
+    };
 };
 export declare const KAESO_DIALOG_DEFAULT_VARIANTS: {
     readonly size: "md";
+    readonly anchor: "center";
 };
 export interface DialogProps {
     open?: boolean | undefined;
@@ -27,6 +38,7 @@ export interface DialogProps {
     description?: ReactNode | undefined;
     busy?: boolean | undefined;
     size?: keyof typeof KAESO_DIALOG_VARIANTS.size | undefined;
+    anchor?: keyof typeof KAESO_DIALOG_VARIANTS.anchor | undefined;
     children?: ReactNode | undefined;
     footer?: ReactNode | undefined;
     onSubmit?: (() => void) | undefined;
@@ -34,6 +46,7 @@ export interface DialogProps {
     headerStart?: ReactNode | undefined;
     className?: string | undefined;
     inline?: boolean | undefined;
+    persistent?: boolean | undefined;
 }
 declare function Close({ children }: {
     children: ReactElement<{
@@ -99,9 +112,20 @@ export declare const KAESO_LAYER_DIALOG_VARIANTS: {
             readonly description: "720px: two columns, previews";
         };
     };
+    readonly anchor: {
+        readonly center: {
+            readonly classes: "items-center";
+            readonly description: "Centered on the screen (default)";
+        };
+        readonly top: {
+            readonly classes: "items-start pt-dialog-top";
+            readonly description: "A fixed top edge, for content that changes height, such as the steps of a StepDialog";
+        };
+    };
 };
 export declare const KAESO_LAYER_DIALOG_DEFAULT_VARIANTS: {
     readonly size: "md";
+    readonly anchor: "center";
 };
 export interface DialogLayer {
     title: ReactNode;

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

@@ -20,6 +20,7 @@ export declare const docs: {
     Dialog: {
         description: string;
         props: {
+            anchor: string;
             busy: string;
             children: string;
             defaultOpen: string;
@@ -31,6 +32,7 @@ export declare const docs: {
             onOpenChange: string;
             onSubmit: string;
             open: string;
+            persistent: string;
             size: string;
             title: string;
             trigger: string;
@@ -46,6 +48,7 @@ export declare const docs: {
     LayerDialog: {
         description: string;
         props: {
+            anchor: string;
             busy: string;
             defaultOpen: string;
             hideClose: string;
@@ -56,6 +59,7 @@ export declare const docs: {
             onOpenChange: string;
             onSubmit: string;
             open: string;
+            persistent: string;
             size: string;
             trigger: string;
         };

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

@@ -44,6 +44,7 @@ export interface DisplayOptionsProps {
         }[];
         value: string[];
         onChange: (v: string[]) => void;
+        hidden?: string[] | undefined;
     } | undefined;
     trigger?: keyof typeof KAESO_DISPLAY_OPTIONS_VARIANTS.trigger | undefined;
     inline?: boolean | undefined;

package/dist/types/components/filter-chip/docs.d.ts

@@ -3,16 +3,20 @@ export declare const docs: {
         description: string;
         props: {
             defaultValuesOpen: string;
+            groups: string;
             multiple: string;
             onOperatorChange: string;
             onRemove: string;
             onSelectedChange: string;
+            onValuesOpenChange: string;
             operator: string;
             operators: string;
             property: string;
             propertyIcon: string;
+            searchable: string;
             selected: string;
             value: string;
+            width: string;
             values: string;
         };
     };

package/dist/types/components/filter-chip/filter-chip.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
 import { type IconData } from "../icon/icon.js";
+import { type CommandListGroup } from "../command-list/command-list.js";
+import { type PickerPopoverProps } from "../command-list/picker-popover.js";
 export declare const KAESO_FILTER_CHIP_VARIANTS: {
     readonly size: {
         readonly sm: {
@@ -17,6 +19,7 @@ export interface FilterChipChoice {
     icon?: IconData | undefined;
     leading?: ReactNode | undefined;
     textValue?: string | undefined;
+    group?: string | undefined;
 }
 export interface FilterChipProps {
     property: ReactNode;
@@ -26,11 +29,15 @@ export interface FilterChipProps {
     onOperatorChange?: ((operator: string) => void) | undefined;
     value: ReactNode;
     values?: FilterChipChoice[] | undefined;
+    groups?: CommandListGroup[] | undefined;
+    searchable?: boolean | undefined;
+    width?: PickerPopoverProps["width"] | undefined;
     selected?: string[] | undefined;
     multiple?: boolean | undefined;
     onSelectedChange?: ((selected: string[]) => void) | undefined;
     onRemove?: (() => void) | undefined;
     defaultValuesOpen?: boolean | undefined;
+    onValuesOpenChange?: ((open: boolean) => void) | undefined;
     className?: string | undefined;
     "data-force"?: string | undefined;
 }

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

@@ -13,8 +13,6 @@ export declare const docs: {
             size: string;
             suffix: string;
             trailing: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -36,6 +34,7 @@ export declare const docs: {
             defaultValue: string;
             description: string;
             hideStepper: string;
+            integer: string;
             invalid: string;
             label: string;
             layout: string;
@@ -51,8 +50,6 @@ export declare const docs: {
             trailing: string;
             unit: string;
             value: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -82,8 +79,6 @@ export declare const docs: {
             shortcut: string;
             size: string;
             trailing: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -102,8 +97,6 @@ export declare const docs: {
             prefix: string;
             size: string;
             suffix: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -118,6 +111,7 @@ export declare const docs: {
             label: string;
             layout: string;
             name: string;
+            onInputValueChange: string;
             onValueChange: string;
             optional: string;
             placeholder: string;
@@ -125,8 +119,6 @@ export declare const docs: {
             separators: string;
             validate: string;
             value: string;
-        };
-        deprecated: {
             error: string;
         };
     };
@@ -141,8 +133,6 @@ export declare const docs: {
             mono: string;
             optional: string;
             resize: string;
-        };
-        deprecated: {
             error: string;
         };
     };

package/dist/types/components/input/number-input.d.ts

@@ -23,6 +23,7 @@ export interface NumberInputProps extends Omit<InputProps, "type" | "value" | "d
     min?: string | undefined;
     max?: string | undefined;
     hideStepper?: boolean | undefined;
+    integer?: boolean | undefined;
     align?: keyof typeof KAESO_NUMBER_INPUT_VARIANTS.align | undefined;
 }
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/input/tag-input.d.ts

@@ -14,6 +14,7 @@ export interface TagInputProps extends FieldWrapProps {
     value?: string[] | undefined;
     defaultValue?: string[] | undefined;
     onValueChange?: ((value: string[]) => void) | undefined;
+    onInputValueChange?: ((draft: string) => void) | undefined;
     placeholder?: string | undefined;
     validate?: ((tag: string) => true | string) | undefined;
     separators?: string[] | undefined;