@logicplanes/kaeso-ui 0.1.0

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

@@ -0,0 +1,33 @@
+export declare const KAESO_PAGINATION_VARIANTS: {
+    readonly variant: {
+        readonly "load-more": {
+            readonly classes: "";
+            readonly description: "A “Load more” pill while more rows exist, nothing once all are shown (cursor APIs, default)";
+        };
+        readonly cursor: {
+            readonly classes: "";
+            readonly description: "Previous and next circles, without a count";
+        };
+        readonly pages: {
+            readonly classes: "";
+            readonly description: "Page numbers, for lists with a known number of pages";
+        };
+    };
+};
+export declare const KAESO_PAGINATION_DEFAULT_VARIANTS: {
+    readonly variant: "load-more";
+};
+export interface PaginationProps {
+    variant?: keyof typeof KAESO_PAGINATION_VARIANTS.variant | undefined;
+    hasMore?: boolean | undefined;
+    hasPrevious?: boolean | undefined;
+    loading?: boolean | undefined;
+    onLoadMore?: (() => void) | undefined;
+    onNext?: (() => void) | undefined;
+    onPrevious?: (() => void) | undefined;
+    page?: number | undefined;
+    pageCount?: number | undefined;
+    onPageChange?: ((page: number) => void) | undefined;
+    className?: string | undefined;
+}
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/types/components/playground/compare-grid.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+export declare const KAESO_COMPARE_GRID_VARIANTS: {
+    readonly divider: {
+        readonly hairline: {
+            readonly classes: "hairline-l";
+            readonly description: "Columns separated by a hairline, edge to edge (default)";
+        };
+        readonly none: {
+            readonly classes: "";
+            readonly description: "No line between columns: columns that sit in panels of their own";
+        };
+    };
+};
+export declare const KAESO_COMPARE_GRID_DEFAULT_VARIANTS: {
+    readonly divider: "hairline";
+};
+export interface CompareGridProps {
+    children: ReactNode;
+    "aria-label": string;
+    onAdd?: (() => void) | undefined;
+    addLabel?: string | undefined;
+    max?: number | undefined;
+    active?: number | undefined;
+    onActiveChange?: ((index: number) => void) | undefined;
+    divider?: keyof typeof KAESO_COMPARE_GRID_VARIANTS.divider | undefined;
+    className?: string | undefined;
+}
+export interface CompareColumnProps {
+    label: string;
+    header: ReactNode;
+    actions?: ReactNode | undefined;
+    children?: ReactNode | undefined;
+    footer?: ReactNode | undefined;
+    onRemove?: (() => void) | undefined;
+    removeLabel?: string | undefined;
+    stickToEnd?: boolean | undefined;
+    className?: string | undefined;
+}
+export declare const CompareGrid: import("react").ForwardRefExoticComponent<CompareGridProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Column: import("react").ForwardRefExoticComponent<CompareColumnProps & import("react").RefAttributes<HTMLElement>>;
+};

package/dist/types/components/playground/composer.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+export declare const KAESO_COMPOSER_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "rounded-frame";
+            readonly description: "Text 14/20, 8px around the buttons; the outline concentric with them (16 + 8) (default)";
+        };
+        readonly sm: {
+            readonly classes: "rounded-frame";
+            readonly description: "The same box starting one line tall: a follow-up field under a thread";
+        };
+    };
+};
+export declare const KAESO_COMPOSER_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface ComposerProps {
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    onSubmit?: ((value: string) => void) | undefined;
+    submitOn?: "enter" | "mod-enter" | undefined;
+    onStop?: (() => void) | undefined;
+    streaming?: boolean | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    clearOnSubmit?: boolean | undefined;
+    placeholder?: string | undefined;
+    "aria-label"?: string | undefined;
+    maxRows?: number | undefined;
+    size?: keyof typeof KAESO_COMPOSER_VARIANTS.size | undefined;
+    actions?: ReactNode | undefined;
+    submitLabel?: string | undefined;
+    stopLabel?: string | undefined;
+    autoFocus?: boolean | undefined;
+    name?: string | undefined;
+    "data-force"?: string | undefined;
+    className?: string | undefined;
+}
+export declare const Composer: import("react").ForwardRefExoticComponent<ComposerProps & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,141 @@
+export declare const docs: {
+    CompareGrid: {
+        description: string;
+        props: {
+            active: string;
+            addLabel: string;
+            "aria-label": string;
+            children: string;
+            divider: string;
+            max: string;
+            onActiveChange: string;
+            onAdd: string;
+        };
+    };
+    Composer: {
+        description: string;
+        props: {
+            actions: string;
+            "aria-label": string;
+            autoFocus: string;
+            clearOnSubmit: string;
+            defaultValue: string;
+            disabled: string;
+            loading: string;
+            maxRows: string;
+            name: string;
+            onStop: string;
+            onSubmit: string;
+            onValueChange: string;
+            placeholder: string;
+            size: string;
+            stopLabel: string;
+            streaming: string;
+            submitLabel: string;
+            submitOn: string;
+            value: string;
+        };
+    };
+    ModelPicker: {
+        description: string;
+        props: {
+            appearance: string;
+            "aria-label": string;
+            defaultValue: string;
+            disabled: string;
+            groupByProvider: string;
+            onValueChange: string;
+            options: string;
+            placeholder: string;
+            size: string;
+            value: string;
+        };
+    };
+    ParameterPanel: {
+        description: string;
+        props: {
+            defaults: string;
+            disabled: string;
+            instructions: string;
+            layout: string;
+            maxOutputTokensLimit: string;
+            onValueChange: string;
+            reasoning: string;
+            sampling: string;
+            value: string;
+        };
+    };
+    ParameterPopover: {
+        description: string;
+        props: {
+            align: string;
+            defaultOpen: string;
+            defaults: string;
+            disabled: string;
+            instructions: string;
+            maxOutputTokensLimit: string;
+            onOpenChange: string;
+            onValueChange: string;
+            open: string;
+            reasoning: string;
+            sampling: string;
+            side: string;
+            title: string;
+            trigger: string;
+            value: string;
+        };
+    };
+    PromptSuggestions: {
+        description: string;
+        props: {
+            align: string;
+            "aria-label": string;
+            onSelect: string;
+            suggestions: string;
+        };
+    };
+    ResponseMetrics: {
+        description: string;
+        props: {
+            cost: string;
+            duration: string;
+            inputTokens: string;
+            live: string;
+            outputTokens: string;
+            reasoning: string;
+            reasoningTokens: string;
+            size: string;
+            startedAt: string;
+            timeToFirstToken: string;
+        };
+    };
+    ResponseView: {
+        description: string;
+        props: {
+            "aria-label": string;
+            defaultReasoningOpen: string;
+            footer: string;
+            onReasoningOpenChange: string;
+            onRetry: string;
+            reasoning: string;
+            reasoningDuration: string;
+            reasoningOpen: string;
+            status: string;
+            text: string;
+        };
+    };
+    Thread: {
+        description: string;
+        props: {
+            children: string;
+        };
+    };
+    UserMessage: {
+        description: string;
+        props: {
+            "aria-label": string;
+            children: string;
+            maxLines: string;
+        };
+    };
+};

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

@@ -0,0 +1,7 @@
+export * from "./composer.js";
+export * from "./compare-grid.js";
+export * from "./response-view.js";
+export * from "./response-metrics.js";
+export * from "./parameter-panel.js";
+export * from "./model-picker.js";
+export * from "./prompt-suggestions.js";

package/dist/types/components/playground/model-picker.d.ts

@@ -0,0 +1,37 @@
+export declare const KAESO_MODEL_PICKER_VARIANTS: {
+    readonly appearance: {
+        readonly ghost: {
+            readonly classes: "material-ghost text-fg";
+            readonly description: "Transparent until hovered: a column header (default)";
+        };
+        readonly default: {
+            readonly classes: "material-secondary";
+            readonly description: "A raised pill with a ring: a form or toolbar";
+        };
+    };
+};
+export declare const KAESO_MODEL_PICKER_DEFAULT_VARIANTS: {
+    readonly appearance: "ghost";
+};
+export interface ModelPickerOption {
+    value: string;
+    provider: string;
+    model?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+}
+export interface ModelPickerProps {
+    options: ModelPickerOption[];
+    value?: string | null | undefined;
+    defaultValue?: string | null | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    groupByProvider?: boolean | undefined;
+    placeholder?: string | undefined;
+    "aria-label"?: string | undefined;
+    appearance?: keyof typeof KAESO_MODEL_PICKER_VARIANTS.appearance | undefined;
+    size?: "sm" | "md" | undefined;
+    disabled?: boolean | undefined;
+    "data-force"?: string | undefined;
+    className?: string | undefined;
+}
+export declare const ModelPicker: import("react").ForwardRefExoticComponent<ModelPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/playground/parameter-panel.d.ts

@@ -0,0 +1,52 @@
+import { type ReactElement } from "react";
+export declare const KAESO_PARAMETER_PANEL_VARIANTS: {
+    readonly layout: {
+        readonly popover: {
+            readonly classes: "w-full gap-20";
+            readonly description: "Inside a 320px popover (ParameterPopover) (default)";
+        };
+        readonly panel: {
+            readonly classes: "w-full gap-24";
+            readonly description: "A side panel or sheet: a little more room between groups";
+        };
+    };
+};
+export declare const KAESO_PARAMETER_PANEL_DEFAULT_VARIANTS: {
+    readonly layout: "popover";
+};
+export type ReasoningEffort = "none" | "minimal" | "low" | "medium" | "high" | "xhigh" | "max";
+export type ReasoningSummary = "auto" | "concise" | "detailed" | "off";
+export interface PlaygroundParameters {
+    instructions?: string | undefined;
+    temperature?: number | undefined;
+    topP?: number | undefined;
+    maxOutputTokens?: number | undefined;
+    reasoningEffort?: ReasoningEffort | undefined;
+    reasoningSummary?: ReasoningSummary | undefined;
+}
+export interface ParameterPanelProps {
+    value: PlaygroundParameters;
+    onValueChange: (next: PlaygroundParameters) => void;
+    defaults?: Pick<PlaygroundParameters, "temperature" | "topP"> | undefined;
+    instructions?: boolean | undefined;
+    sampling?: boolean | undefined;
+    reasoning?: ReasoningEffort[] | boolean | undefined;
+    maxOutputTokensLimit?: number | undefined;
+    disabled?: boolean | undefined;
+    layout?: keyof typeof KAESO_PARAMETER_PANEL_VARIANTS.layout | undefined;
+    className?: string | undefined;
+}
+export declare const ParameterPanel: import("react").ForwardRefExoticComponent<ParameterPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ParameterPopoverProps extends Omit<ParameterPanelProps, "layout" | "className"> {
+    trigger?: ReactElement | undefined;
+    title?: string | undefined;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    side?: "top" | "bottom" | "left" | "right" | undefined;
+    align?: "start" | "center" | "end" | undefined;
+}
+export declare function ParameterPopover({ trigger, title: titleProp, open, defaultOpen, onOpenChange, side, align, ...panel }: ParameterPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ParameterPopover {
+    var displayName: string;
+}

package/dist/types/components/playground/prompt-suggestions.d.ts

@@ -0,0 +1,23 @@
+export declare const KAESO_PROMPT_SUGGESTIONS_VARIANTS: {
+    readonly align: {
+        readonly start: {
+            readonly classes: "items-stretch";
+            readonly description: "Rows the composer's width, their text on its text (default)";
+        };
+        readonly center: {
+            readonly classes: "items-center text-center";
+            readonly description: "Centered under an empty thread's title";
+        };
+    };
+};
+export declare const KAESO_PROMPT_SUGGESTIONS_DEFAULT_VARIANTS: {
+    readonly align: "start";
+};
+export interface PromptSuggestionsProps {
+    suggestions: string[];
+    onSelect: (prompt: string) => void;
+    "aria-label"?: string | undefined;
+    align?: keyof typeof KAESO_PROMPT_SUGGESTIONS_VARIANTS.align | undefined;
+    className?: string | undefined;
+}
+export declare const PromptSuggestions: import("react").ForwardRefExoticComponent<PromptSuggestionsProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/types/components/playground/response-metrics.d.ts

@@ -0,0 +1,30 @@
+export declare const KAESO_RESPONSE_METRICS_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "text-caption gap-x-12 gap-y-2";
+            readonly description: "12/16: a column footer or under a turn (default)";
+        };
+        readonly md: {
+            readonly classes: "text-small gap-x-16 gap-y-4";
+            readonly description: "13/18: a response on its own";
+        };
+    };
+};
+export declare const KAESO_RESPONSE_METRICS_DEFAULT_VARIANTS: {
+    readonly size: "sm";
+};
+export interface ResponseMetricsProps {
+    timeToFirstToken?: number | null | undefined;
+    duration?: number | null | undefined;
+    inputTokens?: number | null | undefined;
+    outputTokens?: number | null | undefined;
+    reasoningTokens?: number | null | undefined;
+    reasoning?: boolean | undefined;
+    live?: boolean | undefined;
+    startedAt?: number | undefined;
+    cost?: string | null | undefined;
+    size?: keyof typeof KAESO_RESPONSE_METRICS_VARIANTS.size | undefined;
+    className?: string | undefined;
+}
+export declare function formatLatency(ms: number): string;
+export declare const ResponseMetrics: import("react").ForwardRefExoticComponent<ResponseMetricsProps & import("react").RefAttributes<HTMLDListElement>>;

package/dist/types/components/playground/response-view.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+export declare const KAESO_RESPONSE_VIEW_VARIANTS: {
+    readonly status: {
+        readonly pending: {
+            readonly classes: "";
+            readonly description: "Sent, nothing back yet: an empty line where the text will start, nothing drawn";
+        };
+        readonly streaming: {
+            readonly classes: "";
+            readonly description: "Arriving: the text grows, earlier lines never re-wrap; Thinking is live";
+        };
+        readonly done: {
+            readonly classes: "";
+            readonly description: "Complete (default)";
+        };
+        readonly stopped: {
+            readonly classes: "";
+            readonly description: "Stopped by the person: the text so far and “Stopped”";
+        };
+        readonly error: {
+            readonly classes: "";
+            readonly description: "Failed: “No response” and Retry. The error itself is a toast";
+        };
+    };
+};
+export declare const KAESO_RESPONSE_VIEW_DEFAULT_VARIANTS: {
+    readonly status: "done";
+};
+export type ResponseStatus = keyof typeof KAESO_RESPONSE_VIEW_VARIANTS.status;
+export interface ResponseViewProps {
+    text?: string | undefined;
+    reasoning?: string | undefined;
+    status?: ResponseStatus | undefined;
+    reasoningDuration?: number | undefined;
+    reasoningOpen?: boolean | undefined;
+    defaultReasoningOpen?: boolean | undefined;
+    onReasoningOpenChange?: ((open: boolean) => void) | undefined;
+    onRetry?: (() => void) | undefined;
+    footer?: ReactNode | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+}
+export declare const ResponseView: import("react").ForwardRefExoticComponent<ResponseViewProps & import("react").RefAttributes<HTMLElement>>;
+export interface UserMessageProps {
+    children: ReactNode;
+    maxLines?: 0 | 2 | 3 | 4 | 6 | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+}
+export declare const UserMessage: import("react").ForwardRefExoticComponent<UserMessageProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ThreadProps {
+    children: ReactNode;
+    className?: string | undefined;
+}
+export declare const Thread: import("react").ForwardRefExoticComponent<ThreadProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+export declare const docs: {
+    Popover: {
+        description: string;
+        props: {
+            children: string;
+            defaultOpen: string;
+            onOpenChange: string;
+            open: string;
+            trapFocus: string;
+        };
+    };
+    HoverCard: {
+        description: string;
+        props: {
+            children: string;
+            defaultOpen: string;
+            onOpenChange: string;
+            open: string;
+        };
+    };
+};

package/dist/types/components/popover/hover-card.d.ts

@@ -0,0 +1,24 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type PopoverContentProps } from "./popover.js";
+export interface HoverCardProps {
+    children: ReactNode;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+}
+declare function HoverRoot({ children, open, defaultOpen, onOpenChange }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace HoverRoot {
+    var displayName: string;
+}
+declare function HoverTrigger({ children, delay }: {
+    children: ReactElement;
+    delay?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace HoverTrigger {
+    var displayName: string;
+}
+export declare const HoverCard: typeof HoverRoot & {
+    Trigger: typeof HoverTrigger;
+    Content: import("react").ForwardRefExoticComponent<Omit<PopoverContentProps, "title" | "aria-label" | "padding"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./popover.js";
+export * from "./hover-card.js";

package/dist/types/components/popover/popover-root.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement, ReactNode } from "react";
+export interface PopoverProps {
+    children: ReactNode;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    trapFocus?: boolean | undefined;
+}
+export declare function PopoverRoot({ open, defaultOpen, onOpenChange, trapFocus, children }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PopoverRoot {
+    var displayName: string;
+}
+export declare function PopoverTrigger({ children }: {
+    children: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace PopoverTrigger {
+    var displayName: string;
+}
+export declare function PopoverClose({ children }: {
+    children: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace PopoverClose {
+    var displayName: string;
+}

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

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import { PopoverClose, PopoverRoot, PopoverTrigger } from "./popover-root.js";
+export type { PopoverProps } from "./popover-root.js";
+export declare const KAESO_POPOVER_VARIANTS: {
+    readonly padding: {
+        readonly form: {
+            readonly classes: "p-12";
+            readonly description: "12px: forms and free content (default)";
+        };
+        readonly list: {
+            readonly classes: "p-6";
+            readonly description: "6px: lists of rows, concentric with 10px items";
+        };
+        readonly none: {
+            readonly classes: "p-0";
+            readonly description: "No padding: calendars and custom layouts";
+        };
+    };
+};
+export declare const KAESO_POPOVER_DEFAULT_VARIANTS: {
+    readonly padding: "form";
+};
+type Side = "top" | "bottom" | "left" | "right";
+type Align = "start" | "center" | "end";
+export declare const POPOVER_POPUP = "z-50 rounded-popover bg-raised text-body text-fg shadow-raised outline-none popup-motion max-h-(--available-height) overflow-auto scrollbar-quiet";
+export interface PopoverContentProps {
+    children: ReactNode;
+    side?: Side | undefined;
+    align?: Align | undefined;
+    sideOffset?: number | undefined;
+    padding?: keyof typeof KAESO_POPOVER_VARIANTS.padding | undefined;
+    title?: ReactNode | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+}
+export declare const Popover: typeof PopoverRoot & {
+    Trigger: typeof PopoverTrigger;
+    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: typeof PopoverClose;
+};

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

@@ -0,0 +1,9 @@
+export declare const docs: {
+    Portal: {
+        description: string;
+        props: {
+            children: string;
+            container: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export declare const KAESO_PORTAL_VARIANTS: {};
+export declare const KAESO_PORTAL_DEFAULT_VARIANTS: {};
+export interface PortalProps {
+    children: ReactNode;
+    container?: HTMLElement | null | undefined;
+}
+export declare function Portal({ children, container }: PortalProps): import("react").ReactPortal | null;
+export declare namespace Portal {
+    var displayName: string;
+}

package/dist/types/components/qr-code/docs.d.ts

@@ -0,0 +1,10 @@
+export declare const docs: {
+    QRCode: {
+        description: string;
+        props: {
+            label: string;
+            size: string;
+            value: string;
+        };
+    };
+};

package/dist/types/components/qr-code/index.d.ts

@@ -0,0 +1 @@
+export * from "./qr-code.js";

package/dist/types/components/qr-code/qr-code.d.ts

@@ -0,0 +1,22 @@
+export declare const KAESO_QR_CODE_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "size-160";
+            readonly description: "160px: setup dialogs (default)";
+        };
+        readonly lg: {
+            readonly classes: "size-200";
+            readonly description: "200px: a page of its own";
+        };
+    };
+};
+export declare const KAESO_QR_CODE_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface QRCodeProps {
+    value: string;
+    label: string;
+    size?: keyof typeof KAESO_QR_CODE_VARIANTS.size | undefined;
+    className?: string | undefined;
+}
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;