@logicplanes/kaeso-ui 0.1.0

package/dist/types/components/kaeso/role-picker.d.ts

@@ -0,0 +1,38 @@
+export declare const KAESO_ROLE_PICKER_VARIANTS: {
+    readonly appearance: {
+        readonly list: {
+            readonly classes: "flex flex-col gap-16";
+            readonly description: "Every role as a row with its description, built-in then custom (default): invites and role changes";
+        };
+        readonly select: {
+            readonly classes: "";
+            readonly description: "A pill that opens the roles: filters, table rows and tight forms";
+        };
+    };
+};
+export declare const KAESO_ROLE_PICKER_DEFAULT_VARIANTS: {
+    readonly appearance: "list";
+};
+export interface RoleOption {
+    value: string;
+    label: string;
+    description?: string | undefined;
+    custom?: boolean | undefined;
+    hint?: string | undefined;
+    disabled?: boolean | undefined;
+    disabledReason?: string | undefined;
+}
+export interface RolePickerProps {
+    roles: RoleOption[];
+    value?: string | null | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    appearance?: keyof typeof KAESO_ROLE_PICKER_VARIANTS.appearance | undefined;
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    "aria-label"?: string | undefined;
+    fullWidth?: boolean | undefined;
+    size?: "sm" | "md" | undefined;
+    className?: string | undefined;
+}
+export declare const RolePicker: import("react").ForwardRefExoticComponent<RolePickerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type TokenKind } from "../charts/core.js";
+export declare const KAESO_USAGE_VARIANTS: {
+    readonly limit: {
+        readonly hard: {
+            readonly classes: "";
+            readonly description: "Requests over the limit are refused";
+        };
+        readonly soft: {
+            readonly classes: "";
+            readonly description: "Over the limit only alerts";
+        };
+    };
+};
+export declare const KAESO_USAGE_DEFAULT_VARIANTS: {
+    readonly limit: "hard";
+};
+export declare const UsageBreakdown: import("react").ForwardRefExoticComponent<{
+    tokens: Partial<Record<TokenKind, number>>;
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type LimitKind = "requests" | "tokens" | "spend";
+export interface LimitMeterProps {
+    kind: LimitKind;
+    scope: ReactNode;
+    window: ReactNode;
+    used: number;
+    limit: number;
+    valueLabel: ReactNode;
+    hard?: boolean | undefined;
+    alerts?: number[] | undefined;
+    resets?: ReactNode | undefined;
+    className?: string | undefined;
+}
+export declare const LimitMeter: import("react").ForwardRefExoticComponent<LimitMeterProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+export declare const docs: {
+    Kbd: {
+        description: string;
+        props: {
+            children: string;
+            tone: string;
+        };
+    };
+    KbdSequence: {
+        description: string;
+        props: {
+            keys: string;
+            tone: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type UiText } from "../../i18n/context.js";
+export declare const KAESO_KBD_VARIANTS: {
+    readonly tone: {
+        readonly default: {
+            readonly classes: "bg-fill-1 text-fg-secondary shadow-ring";
+            readonly description: "On panels and raised surfaces";
+        };
+        readonly onInk: {
+            readonly classes: "bg-on-ink/15 text-on-ink/80 shadow-none";
+            readonly description: "Inside ink surfaces (toasts, the selection bar)";
+        };
+    };
+};
+export declare const KAESO_KBD_DEFAULT_VARIANTS: {
+    readonly tone: "default";
+};
+export declare function keyLabel(key: string, t?: UiText, mac?: boolean): {
+    visual: string;
+    spoken: string;
+};
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    tone?: keyof typeof KAESO_KBD_VARIANTS.tone | undefined;
+}
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+export interface KbdSequenceProps extends HTMLAttributes<HTMLSpanElement> {
+    keys: string[][] | string[];
+    tone?: keyof typeof KAESO_KBD_VARIANTS.tone | undefined;
+}
+export declare const KbdSequence: import("react").ForwardRefExoticComponent<KbdSequenceProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/types/components/key-value/docs.d.ts

@@ -0,0 +1,10 @@
+export declare const docs: {
+    KeyValue: {
+        description: string;
+        props: {
+            columns: string;
+            items: string;
+            layout: string;
+        };
+    };
+};

package/dist/types/components/key-value/index.d.ts

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

package/dist/types/components/key-value/key-value.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+export declare const KAESO_KEY_VALUE_VARIANTS: {
+    readonly layout: {
+        readonly columns: {
+            readonly classes: "grid grid-cols-kv gap-x-24";
+            readonly description: "Label and value side by side (default)";
+        };
+        readonly stacked: {
+            readonly classes: "flex flex-col";
+            readonly description: "Label above value, for narrow sheets";
+        };
+        readonly grid: {
+            readonly classes: "grid gap-x-32";
+            readonly description: "Label above value, in columns: a wide sheet's details, two or more to a row";
+        };
+    };
+    readonly columns: {
+        readonly 2: {
+            readonly classes: "grid-cols-1 @kv:grid-cols-2";
+            readonly description: "Two to a row from 480px; one below (default)";
+        };
+        readonly 3: {
+            readonly classes: "grid-cols-2 @kv:grid-cols-3";
+            readonly description: "Three to a row from 480px; two below";
+        };
+        readonly 4: {
+            readonly classes: "grid-cols-2 @kv:grid-cols-4";
+            readonly description: "Four to a row from 480px, for short values (counts, sizes); two below";
+        };
+    };
+};
+export declare const KAESO_KEY_VALUE_DEFAULT_VARIANTS: {
+    readonly layout: "columns";
+    readonly columns: 2;
+};
+export interface KeyValueItem {
+    label: ReactNode;
+    value: ReactNode;
+    copy?: string | undefined;
+    mono?: boolean | undefined;
+    wrap?: boolean | undefined;
+    span?: "row" | undefined;
+}
+export interface KeyValueProps {
+    items: KeyValueItem[];
+    layout?: keyof typeof KAESO_KEY_VALUE_VARIANTS.layout | undefined;
+    columns?: keyof typeof KAESO_KEY_VALUE_VARIANTS.columns | undefined;
+    className?: string | undefined;
+}
+export declare const KeyValue: import("react").ForwardRefExoticComponent<KeyValueProps & import("react").RefAttributes<HTMLDListElement>>;

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

@@ -0,0 +1,10 @@
+export declare const docs: {
+    Label: {
+        description: string;
+        props: {
+            children: string;
+            optional: string;
+            size: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,22 @@
+import { type LabelHTMLAttributes, type ReactNode } from "react";
+export declare const KAESO_LABEL_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "text-body font-medium";
+            readonly description: "14/500: field labels";
+        };
+        readonly sm: {
+            readonly classes: "text-small font-medium";
+            readonly description: "13/500: compact forms";
+        };
+    };
+};
+export declare const KAESO_LABEL_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    size?: keyof typeof KAESO_LABEL_VARIANTS.size | undefined;
+    optional?: boolean | undefined;
+    children: ReactNode;
+}
+export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,30 @@
+export declare const docs: {
+    Grid: {
+        description: string;
+        props: {
+            align: string;
+            as: string;
+            columns: string;
+            gap: string;
+        };
+    };
+    Inline: {
+        description: string;
+        props: {
+            align: string;
+            as: string;
+            gap: string;
+            justify: string;
+            wrap: string;
+        };
+    };
+    Stack: {
+        description: string;
+        props: {
+            align: string;
+            as: string;
+            gap: string;
+            justify: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,100 @@
+import { type ElementType, type HTMLAttributes } from "react";
+declare const GAP: {
+    readonly 0: "gap-0";
+    readonly 2: "gap-2";
+    readonly 4: "gap-4";
+    readonly 6: "gap-6";
+    readonly 8: "gap-8";
+    readonly 12: "gap-12";
+    readonly 16: "gap-16";
+    readonly 20: "gap-20";
+    readonly 24: "gap-24";
+    readonly 32: "gap-32";
+    readonly 40: "gap-40";
+    readonly 48: "gap-48";
+    readonly 64: "gap-64";
+};
+export type Gap = keyof typeof GAP;
+export declare const KAESO_LAYOUT_VARIANTS: {
+    readonly align: {
+        readonly start: {
+            readonly classes: "items-start";
+            readonly description: "Align to the start";
+        };
+        readonly center: {
+            readonly classes: "items-center";
+            readonly description: "Center on the cross axis";
+        };
+        readonly end: {
+            readonly classes: "items-end";
+            readonly description: "Align to the end";
+        };
+        readonly baseline: {
+            readonly classes: "items-baseline";
+            readonly description: "Align text baselines";
+        };
+        readonly stretch: {
+            readonly classes: "items-stretch";
+            readonly description: "Stretch";
+        };
+    };
+    readonly justify: {
+        readonly start: {
+            readonly classes: "justify-start";
+            readonly description: "Pack to the start";
+        };
+        readonly center: {
+            readonly classes: "justify-center";
+            readonly description: "Center";
+        };
+        readonly end: {
+            readonly classes: "justify-end";
+            readonly description: "Pack to the end";
+        };
+        readonly between: {
+            readonly classes: "justify-between";
+            readonly description: "Space between";
+        };
+    };
+    readonly columns: {
+        readonly 1: {
+            readonly classes: "grid-cols-1";
+            readonly description: "One column";
+        };
+        readonly 2: {
+            readonly classes: "grid-cols-1 md:grid-cols-2";
+            readonly description: "Two columns from 768px";
+        };
+        readonly 3: {
+            readonly classes: "grid-cols-1 md:grid-cols-3";
+            readonly description: "Three columns from 768px";
+        };
+        readonly 4: {
+            readonly classes: "grid-cols-2 lg:grid-cols-4";
+            readonly description: "Two, then four from 1024px";
+        };
+        readonly 6: {
+            readonly classes: "grid-cols-3 lg:grid-cols-6";
+            readonly description: "Three, then six from 1024px";
+        };
+    };
+};
+export declare const KAESO_LAYOUT_DEFAULT_VARIANTS: {
+    readonly align: "stretch";
+    readonly justify: "start";
+    readonly columns: 2;
+};
+interface BaseProps extends HTMLAttributes<HTMLElement> {
+    gap?: Gap | undefined;
+    align?: keyof typeof KAESO_LAYOUT_VARIANTS.align | undefined;
+    justify?: keyof typeof KAESO_LAYOUT_VARIANTS.justify | undefined;
+    as?: ElementType | undefined;
+}
+export declare const Stack: import("react").ForwardRefExoticComponent<BaseProps & import("react").RefAttributes<HTMLElement>>;
+export declare const Inline: import("react").ForwardRefExoticComponent<BaseProps & {
+    wrap?: boolean | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<BaseProps, "justify"> & {
+    columns?: keyof typeof KAESO_LAYOUT_VARIANTS.columns | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,11 @@
+export declare const docs: {
+    Link: {
+        description: string;
+        props: {
+            children: string;
+            external: string;
+            href: string;
+            variant: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,27 @@
+import { type AnchorHTMLAttributes, type ReactNode } from "react";
+export declare const KAESO_LINK_VARIANTS: {
+    readonly variant: {
+        readonly inline: {
+            readonly classes: "text-inherit underline decoration-line-strong decoration-1 underline-offset-3 hover:decoration-current";
+            readonly description: "Inside prose: text color with a quiet underline that turns solid on hover";
+        };
+        readonly quiet: {
+            readonly classes: "text-fg-secondary no-underline hover:text-fg";
+            readonly description: "Navigation-style links in footers and metadata; no underline until hover";
+        };
+        readonly standalone: {
+            readonly classes: "font-medium text-fg no-underline hover:underline hover:decoration-line-strong hover:underline-offset-3";
+            readonly description: "A link on its own line (“Team overview ›”)";
+        };
+    };
+};
+export declare const KAESO_LINK_DEFAULT_VARIANTS: {
+    readonly variant: "inline";
+};
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href: string;
+    variant?: keyof typeof KAESO_LINK_VARIANTS.variant | undefined;
+    external?: boolean | undefined;
+    children: ReactNode;
+}
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -0,0 +1,75 @@
+export declare const docs: {
+    GroupHeader: {
+        description: string;
+        props: {
+            active: string;
+            addLabel: string;
+            collapsed: string;
+            count: string;
+            first: string;
+            glyph: string;
+            indent: string;
+            index: string;
+            onAdd: string;
+            onFocus: string;
+            onToggle: string;
+            title: string;
+        };
+    };
+    List: {
+        description: string;
+        props: {
+            "aria-label": string;
+            "data-force-row": string;
+            density: string;
+            empty: string;
+            groups: string;
+            idWidth: string;
+            items: string;
+            loading: string;
+            onOpen: string;
+            onSelectedChange: string;
+            selectable: string;
+            selected: string;
+            selectionActions: string;
+            selectionBar: string;
+            virtualizeAbove: string;
+        };
+    };
+    ListRow: {
+        description: string;
+        props: {
+            active: string;
+            density: string;
+            depth: string;
+            idWidth: string;
+            index: string;
+            item: string;
+            lastChild: string;
+            narrow: string;
+            onFocus: string;
+            onOpen: string;
+            onSelect: string;
+            selectable: string;
+            selected: string;
+            selecting: string;
+        };
+    };
+    SelectionAction: {
+        description: string;
+        props: {
+            children: string;
+            danger: string;
+            icon: string;
+            onClick: string;
+        };
+    };
+    SelectionBar: {
+        description: string;
+        props: {
+            children: string;
+            count: string;
+            onClear: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,119 @@
+import { type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+export declare const KAESO_LIST_VARIANTS: {
+    readonly density: {
+        readonly default: {
+            readonly classes: "h-44";
+            readonly description: "44px rows (default)";
+        };
+        readonly compact: {
+            readonly classes: "h-36";
+            readonly description: "36px rows";
+        };
+    };
+};
+export declare const KAESO_LIST_DEFAULT_VARIANTS: {
+    readonly density: "default";
+};
+export interface ListItemData {
+    id: string;
+    title: ReactNode;
+    textValue?: string | undefined;
+    subtitle?: ReactNode | undefined;
+    glyph?: ReactNode | undefined;
+    leading?: ReactNode | undefined;
+    displayId?: string | undefined;
+    meta?: ReactNode | undefined;
+    date?: ReactNode | undefined;
+    avatar?: ReactNode | undefined;
+    actions?: ReactNode | undefined;
+    children?: ListItemData[] | undefined;
+    disabled?: boolean | undefined;
+}
+export interface ListGroup {
+    id: string;
+    title: ReactNode;
+    glyph?: ReactNode | undefined;
+    count?: number | undefined;
+    items: ListItemData[];
+    onAdd?: (() => void) | undefined;
+    addLabel?: string | undefined;
+    defaultCollapsed?: boolean | undefined;
+}
+export interface ListProps {
+    items?: ListItemData[] | undefined;
+    groups?: ListGroup[] | undefined;
+    onOpen?: ((item: ListItemData) => void) | undefined;
+    selectable?: boolean | undefined;
+    selected?: Set<string> | undefined;
+    onSelectedChange?: ((selected: Set<string>) => void) | undefined;
+    idWidth?: 48 | 64 | 80 | 96 | 120 | undefined;
+    density?: keyof typeof KAESO_LIST_VARIANTS.density | undefined;
+    virtualizeAbove?: number | undefined;
+    selectionActions?: ReactNode | undefined;
+    selectionBar?: boolean | undefined;
+    loading?: boolean | undefined;
+    empty?: ReactNode | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+    "data-force-row"?: string | undefined;
+}
+declare const ID_W: {
+    readonly 48: "w-48";
+    readonly 64: "w-64";
+    readonly 80: "w-80";
+    readonly 96: "w-96";
+    readonly 120: "w-120";
+};
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ListRowProps {
+    item: ListItemData;
+    index?: number | undefined;
+    depth?: 0 | 1 | undefined;
+    lastChild?: boolean | undefined;
+    idWidth?: keyof typeof ID_W | undefined;
+    density?: keyof typeof KAESO_LIST_VARIANTS.density | undefined;
+    narrow?: boolean | undefined;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
+    selectable?: boolean | undefined;
+    selecting?: boolean | undefined;
+    onSelect?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    onFocus?: (() => void) | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const ListRow: import("react").ForwardRefExoticComponent<ListRowProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface GroupHeaderProps {
+    title: ReactNode;
+    glyph?: ReactNode | undefined;
+    count?: number | undefined;
+    collapsed?: boolean | undefined;
+    onToggle?: (() => void) | undefined;
+    onAdd?: (() => void) | undefined;
+    addLabel?: string | undefined;
+    indent?: boolean | undefined;
+    first?: boolean | undefined;
+    index?: number | undefined;
+    active?: boolean | undefined;
+    onFocus?: (() => void) | undefined;
+}
+export declare const GroupHeader: import("react").ForwardRefExoticComponent<GroupHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SelectionBar({ count, onClear, children }: {
+    count: number;
+    onClear: () => void;
+    children?: ReactNode | undefined;
+}): import("react").ReactPortal | null;
+export declare namespace SelectionBar {
+    var displayName: string;
+}
+export declare function SelectionAction({ children, onClick, icon, danger, }: {
+    children: ReactNode;
+    onClick?: (() => void) | undefined;
+    icon?: IconData | undefined;
+    danger?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectionAction {
+    var displayName: string;
+}
+export {};

package/dist/types/components/list/row-checkbox.d.ts

@@ -0,0 +1,5 @@
+export declare function RowCheckbox({ checked, onToggle, "aria-label": ariaLabel }: {
+    checked: boolean;
+    onToggle: () => void;
+    "aria-label": string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/list/virtual-rows.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode, type RefObject } from "react";
+export interface VirtualRowsProps {
+    count: number;
+    estimateSize: (index: number) => number;
+    getScrollElement: () => HTMLElement | null;
+    scrollTo: RefObject<((index: number) => void) | null>;
+    row: (index: number) => ReactNode;
+    measure?: boolean | undefined;
+}
+export declare function VirtualRows({ count, estimateSize, getScrollElement, scrollTo, row, measure }: VirtualRowsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+export declare const docs: {
+    Loader: {
+        description: string;
+        props: {
+            delay: string;
+            hideLabel: string;
+            label: string;
+            loading: string;
+            minDuration: string;
+            size: string;
+            tone: string;
+        };
+    };
+    Spinner: {
+        description: string;
+        props: {
+            label: string;
+            size: string;
+        };
+    };
+};

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

@@ -0,0 +1,2 @@
+export * from "./loader.js";
+export * from "./status.js";