@logicplanes/kaeso-ui 0.2.2 → 0.3.1

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;

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

@@ -32,6 +32,7 @@ export declare const docs: {
             copy: string;
             redacted: string;
             state: string;
+            stateBadge: string;
         };
     };
     LimitMeter: {
@@ -52,19 +53,28 @@ export declare const docs: {
         description: string;
         props: {
             capabilities: string;
+            mark: string;
             model: string;
             name: string;
             provider: string;
+            providerName: string;
         };
     };
     ProviderBadge: {
         description: string;
         props: {
+            name: string;
             provider: string;
             size: string;
             withName: string;
         };
     };
+    CapabilityIcons: {
+        description: string;
+        props: {
+            capabilities: string;
+        };
+    };
     ProviderCard: {
         description: string;
         props: {
@@ -72,10 +82,34 @@ export declare const docs: {
             connected: string;
             detail: string;
             keyLabel: string;
+            name: string;
             provider: string;
             status: string;
         };
     };
+    ProviderPicker: {
+        description: string;
+        props: {
+            description: string;
+            label: string;
+            layout: string;
+            optional: string;
+            required: string;
+            allLabel: string;
+            appearance: string;
+            "aria-label": string;
+            autoFocus: string;
+            disabled: string;
+            onValueChange: string;
+            placeholder: string;
+            providers: string;
+            size: string;
+            value: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
     RequestTimeline: {
         description: string;
         props: {

package/dist/types/components/kaeso/identity.d.ts

@@ -22,9 +22,10 @@ export declare const KAESO_IDENTITY_VARIANTS: {
 export declare const KAESO_IDENTITY_DEFAULT_VARIANTS: {
     readonly provider: "md";
 };
-export declare const providerName: (id: string) => string;
+export declare const providerName: (id: string, name?: string | undefined) => string;
 export declare const ProviderBadge: import("react").ForwardRefExoticComponent<{
     provider: string;
+    name?: string | undefined;
     size?: keyof typeof KAESO_IDENTITY_VARIANTS.provider | undefined;
     withName?: boolean | undefined;
     className?: string | undefined;
@@ -32,12 +33,18 @@ export declare const ProviderBadge: import("react").ForwardRefExoticComponent<{
 export type Capability = "tools" | "reasoning" | "vision" | "pdf" | "structuredOutput";
 export interface ModelLabelProps {
     provider: string;
+    providerName?: string | undefined;
     model: string;
     name?: string | undefined;
     capabilities?: Capability[] | undefined;
+    mark?: boolean | undefined;
     className?: string | undefined;
 }
 export declare const ModelLabel: import("react").ForwardRefExoticComponent<ModelLabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const CapabilityIcons: import("react").ForwardRefExoticComponent<{
+    capabilities: Capability[];
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;
 export type KeyState = "active" | "disabled" | "expired" | "archived";
 export interface KeyDisplayProps {
     redacted: string;
@@ -45,6 +52,7 @@ export interface KeyDisplayProps {
     access?: "inference" | "platform" | "both" | undefined;
     copy?: boolean | undefined;
     className?: string | undefined;
+    stateBadge?: boolean | undefined;
 }
 export declare const KeyDisplay: import("react").ForwardRefExoticComponent<KeyDisplayProps & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const StatusCode: import("react").ForwardRefExoticComponent<{
@@ -60,6 +68,7 @@ export declare const RequestTimeline: import("react").ForwardRefExoticComponent<
 } & import("react").RefAttributes<HTMLDivElement>>;
 export interface ProviderCardProps {
     provider: string;
+    name?: string | undefined;
     connected: boolean;
     status: ReactNode;
     keyLabel?: ReactNode | undefined;

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

@@ -6,3 +6,4 @@ export * from "./rights.js";
 export * from "./rights-logic.js";
 export * from "./role-picker.js";
 export * from "./effective-access.js";
+export * from "./provider-picker.js";

package/dist/types/components/kaeso/provider-marks.d.ts

@@ -1 +1,5 @@
-export declare const PROVIDER_MARKS: Record<string, string>;
+export interface ProviderMark {
+    d: string;
+    color: string;
+}
+export declare const PROVIDER_MARKS: Record<string, ProviderMark>;