@logicplanes/kaeso-ui 0.1.0

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export declare const KAESO_CODE_VARIANTS: {
+    readonly shape: {
+        readonly auto: {
+            readonly classes: "";
+            readonly description: "Pill for a single word, radius 6 for anything longer (default)";
+        };
+        readonly pill: {
+            readonly classes: "rounded-pill";
+            readonly description: "Always a pill";
+        };
+        readonly rounded: {
+            readonly classes: "rounded-code";
+            readonly description: "Always radius 6";
+        };
+    };
+};
+export declare const KAESO_CODE_DEFAULT_VARIANTS: {
+    readonly shape: "auto";
+};
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+    shape?: keyof typeof KAESO_CODE_VARIANTS.shape | undefined;
+}
+export declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,8 @@
+export declare const docs: {
+    Code: {
+        description: string;
+        props: {
+            shape: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import { type CodeLang } from "./highlighter.js";
+export declare const KAESO_CODE_BLOCK_VARIANTS: {
+    readonly surface: {
+        readonly well: {
+            readonly classes: "rounded-well bg-fill-1";
+            readonly description: "A well: radius 14, fill, no ring (default)";
+        };
+        readonly plain: {
+            readonly classes: "bg-transparent";
+            readonly description: "No surface, inside another well";
+        };
+    };
+};
+export declare const KAESO_CODE_BLOCK_DEFAULT_VARIANTS: {
+    readonly surface: "well";
+};
+export interface CodeTab {
+    label: string;
+    code: string;
+    lang?: CodeLang | undefined;
+}
+export interface CodeBlockProps {
+    code?: string | undefined;
+    lang?: CodeLang | undefined;
+    tabs?: CodeTab[] | undefined;
+    title?: ReactNode | undefined;
+    lineNumbers?: boolean | undefined;
+    highlightLines?: number[] | undefined;
+    collapseAfter?: number | undefined;
+    surface?: keyof typeof KAESO_CODE_BLOCK_VARIANTS.surface | undefined;
+    copy?: boolean | undefined;
+    wrap?: boolean | undefined;
+    className?: string | undefined;
+}
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CodeHighlighted: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,41 @@
+export declare const docs: {
+    CodeBlock: {
+        description: string;
+        props: {
+            code: string;
+            collapseAfter: string;
+            copy: string;
+            highlightLines: string;
+            lang: string;
+            lineNumbers: string;
+            surface: string;
+            tabs: string;
+            title: string;
+            wrap: string;
+        };
+    };
+    CodeHighlighted: {
+        description: string;
+        props: {
+            code: string;
+            collapseAfter: string;
+            copy: string;
+            highlightLines: string;
+            lang: string;
+            lineNumbers: string;
+            surface: string;
+            tabs: string;
+            title: string;
+            wrap: string;
+        };
+    };
+    JsonView: {
+        description: string;
+        props: {
+            defaultDepth: string;
+            query: string;
+            surface: string;
+            value: string;
+        };
+    };
+};

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

@@ -0,0 +1,23 @@
+type Highlighter = {
+    codeToTokens: (code: string, o: {
+        lang: string;
+        theme: string;
+    }) => {
+        tokens: {
+            content: string;
+            color?: string | undefined;
+            fontStyle?: number | undefined;
+        }[][];
+    };
+    getLoadedLanguages: () => string[];
+    loadLanguage: (...l: unknown[]) => Promise<void>;
+};
+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>;
+export interface CodeToken {
+    content: string;
+    className: string;
+}
+export declare function highlight(code: string, lang: CodeLang): Promise<CodeToken[][] | null>;
+export {};

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

@@ -0,0 +1,4 @@
+export * from "./code-block.js";
+export * from "./json-view.js";
+export { kaesoShikiTheme } from "./kaeso-theme.js";
+export { highlight, CODE_LANGS, type CodeLang } from "./highlighter.js";

package/dist/types/components/code-block/json-view.d.ts

@@ -0,0 +1,23 @@
+export declare const KAESO_JSON_VIEW_VARIANTS: {
+    readonly surface: {
+        readonly well: {
+            readonly classes: "rounded-well bg-fill-1 p-16";
+            readonly description: "On a well (default)";
+        };
+        readonly plain: {
+            readonly classes: "";
+            readonly description: "No surface";
+        };
+    };
+};
+export declare const KAESO_JSON_VIEW_DEFAULT_VARIANTS: {
+    readonly surface: "well";
+};
+export interface JsonViewProps {
+    value: unknown;
+    defaultDepth?: number | undefined;
+    query?: string | undefined;
+    surface?: keyof typeof KAESO_JSON_VIEW_VARIANTS.surface | undefined;
+    className?: string | undefined;
+}
+export declare const JsonView: import("react").ForwardRefExoticComponent<JsonViewProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/code-block/kaeso-theme.d.ts

@@ -0,0 +1,66 @@
+export declare function codeTokenClass(color: string | undefined, fontStyle: number | undefined): string;
+export declare const kaesoShikiTheme: {
+    name: string;
+    type: "light";
+    colors: {
+        "editor.background": string;
+        "editor.foreground": "var(--k-text)";
+    };
+    settings: ({
+        settings: {
+            foreground: "var(--k-text)";
+            background: string;
+            fontStyle?: never;
+        };
+        scope?: never;
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-text-tertiary)";
+            fontStyle: string;
+            background?: never;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-info-text)";
+            background?: never;
+            fontStyle?: never;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-warning-text)";
+            background?: never;
+            fontStyle?: never;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-text)";
+            fontStyle: string;
+            background?: never;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-text-tertiary)";
+            background?: never;
+            fontStyle?: never;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-text)";
+            background?: never;
+            fontStyle?: never;
+        };
+    } | {
+        scope: string[];
+        settings: {
+            foreground: "var(--k-text-secondary)";
+            background?: never;
+            fontStyle?: never;
+        };
+    })[];
+};

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export declare const KAESO_COLLAPSIBLE_VARIANTS: {
+    readonly state: {
+        readonly closed: {
+            readonly classes: "";
+            readonly description: "Closed: the chevron points to the row (default)";
+        };
+        readonly open: {
+            readonly classes: "group-data-panel-open/dt:rotate-90";
+            readonly description: "Open: the chevron turns down and the content shows";
+        };
+    };
+};
+export declare const KAESO_COLLAPSIBLE_DEFAULT_VARIANTS: {
+    readonly state: "closed";
+};
+export interface CollapsibleProps {
+    title: ReactNode;
+    children: ReactNode;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    hint?: ReactNode | undefined;
+    className?: string | undefined;
+}
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionItem {
+    value: string;
+    title: ReactNode;
+    content: ReactNode;
+    hint?: ReactNode | undefined;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    multiple?: boolean | undefined;
+    defaultValue?: string[] | undefined;
+    className?: string | undefined;
+}
+export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,21 @@
+export declare const docs: {
+    Accordion: {
+        description: string;
+        props: {
+            defaultValue: string;
+            items: string;
+            multiple: string;
+        };
+    };
+    Collapsible: {
+        description: string;
+        props: {
+            children: string;
+            defaultOpen: string;
+            hint: string;
+            onOpenChange: string;
+            open: string;
+            title: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,86 @@
+import { type ReactNode } from "react";
+import { type FieldWrapProps } from "../field/field.js";
+import { type IconData } from "../icon/icon.js";
+import { type InputSize } from "../input/input-group.js";
+export declare const KAESO_COMBOBOX_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "h-32 px-12 gap-6 text-body";
+            readonly description: "32px";
+        };
+        readonly md: {
+            readonly classes: "h-36 px-16 gap-8 text-body";
+            readonly description: "36px (default)";
+        };
+        readonly lg: {
+            readonly classes: "h-40 px-18 gap-8 text-body";
+            readonly description: "40px";
+        };
+        readonly xl: {
+            readonly classes: "h-48 px-22 gap-8 text-body-lg";
+            readonly description: "48px";
+        };
+    };
+};
+export declare const KAESO_COMBOBOX_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: ReactNode | undefined;
+    icon?: IconData | undefined;
+    leading?: ReactNode | undefined;
+    disabled?: boolean | undefined;
+}
+export declare function Highlight({ text, query }: {
+    text: string;
+    query: string;
+}): import("react/jsx-runtime").JSX.Element;
+interface BaseProps extends FieldWrapProps {
+    options: ComboboxOption[];
+    placeholder?: string | undefined;
+    size?: InputSize | undefined;
+    emptyText?: ReactNode | undefined;
+    loading?: boolean | undefined;
+    onInputValueChange?: ((value: string) => void) | undefined;
+    onCreate?: ((label: string) => void) | undefined;
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export interface SingleComboboxProps extends BaseProps {
+    multiple?: false | undefined;
+    value?: string | null | undefined;
+    defaultValue?: string | null | undefined;
+    onValueChange?: ((value: string | null) => void) | undefined;
+}
+export interface MultiComboboxProps extends BaseProps {
+    multiple: true;
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    onValueChange?: ((value: string[]) => void) | undefined;
+}
+export type ComboboxProps = SingleComboboxProps | MultiComboboxProps;
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface AutocompleteProps extends FieldWrapProps {
+    suggestions: string[];
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    placeholder?: string | undefined;
+    size?: InputSize | undefined;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    leadingIcon?: IconData | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,62 @@
+export declare const docs: {
+    Autocomplete: {
+        description: string;
+        props: {
+            "aria-label": string;
+            defaultValue: string;
+            description: string;
+            disabled: string;
+            id: string;
+            label: string;
+            layout: string;
+            leadingIcon: string;
+            name: string;
+            onValueChange: string;
+            optional: string;
+            placeholder: string;
+            required: string;
+            size: string;
+            suggestions: string;
+            value: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    Combobox: {
+        description: string;
+        props: {
+            "aria-label": string;
+            defaultValue: string;
+            description: string;
+            disabled: string;
+            emptyText: string;
+            id: string;
+            invalid: string;
+            label: string;
+            layout: string;
+            loading: string;
+            multiple: string;
+            name: string;
+            onCreate: string;
+            onInputValueChange: string;
+            onValueChange: string;
+            optional: string;
+            options: string;
+            placeholder: string;
+            required: string;
+            size: string;
+            value: string;
+        };
+        deprecated: {
+            error: string;
+        };
+    };
+    Highlight: {
+        description: string;
+        props: {
+            query: string;
+            text: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+export declare const KAESO_COMMAND_PALETTE_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "w-640";
+            readonly description: "640px, 20vh from the top (default)";
+        };
+    };
+};
+export declare const KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface CommandItem {
+    id: string;
+    label: string;
+    icon?: IconData | undefined;
+    hint?: string | undefined;
+    shortcut?: string[] | string[][] | undefined;
+    keywords?: string[] | undefined;
+    onSelect?: (() => void) | undefined;
+    children?: CommandGroup[] | undefined;
+}
+export interface CommandGroup {
+    label?: string | undefined;
+    items: CommandItem[];
+    loading?: boolean | undefined;
+}
+export interface CommandPaletteProps {
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    groups: CommandGroup[];
+    placeholder?: string | undefined;
+    emptyText?: ReactNode | undefined;
+    onQueryChange?: ((query: string) => void) | undefined;
+    hotkey?: boolean | undefined;
+    keyHints?: boolean | undefined;
+    inline?: boolean | undefined;
+    defaultQuery?: string | undefined;
+}
+export declare function CommandPalette(props: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CommandPalette {
+    var displayName: string;
+}

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

@@ -0,0 +1,17 @@
+export declare const docs: {
+    CommandPalette: {
+        description: string;
+        props: {
+            defaultQuery: string;
+            emptyText: string;
+            groups: string;
+            hotkey: string;
+            inline: string;
+            keyHints: string;
+            onOpenChange: string;
+            onQueryChange: string;
+            open: string;
+            placeholder: string;
+        };
+    };
+};

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

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

package/dist/types/components/copy-button/copy-button.d.ts

@@ -0,0 +1,85 @@
+import type * as React from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ButtonSize } from "../button/button.js";
+export declare const KAESO_COPY_BUTTON_VARIANTS: {
+    readonly variant: {
+        readonly ghost: {
+            readonly classes: "material-ghost";
+            readonly description: "Inside fields and wells (default)";
+        };
+        readonly secondary: {
+            readonly classes: "material-secondary";
+            readonly description: "On its own";
+        };
+    };
+    readonly size: {
+        readonly xs: {
+            readonly classes: "size-24";
+            readonly description: "24px circle: inside rows and chips";
+        };
+        readonly sm: {
+            readonly classes: "size-32";
+            readonly description: "32px circle: toolbars and headers (default)";
+        };
+        readonly md: {
+            readonly classes: "size-36";
+            readonly description: "36px circle: beside md controls";
+        };
+        readonly lg: {
+            readonly classes: "size-40";
+            readonly description: "40px circle";
+        };
+        readonly xl: {
+            readonly classes: "size-48";
+            readonly description: "48px circle";
+        };
+    };
+};
+export declare const KAESO_COPY_BUTTON_DEFAULT_VARIANTS: {
+    readonly variant: "ghost";
+    readonly size: "sm";
+};
+export interface CopyButtonProps {
+    value: string;
+    label?: string | undefined;
+    size?: ButtonSize | undefined;
+    variant?: keyof typeof KAESO_COPY_BUTTON_VARIANTS.variant | undefined;
+    onCopy?: ((value: string) => void) | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const KAESO_CLIPBOARD_TEXT_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "h-32 pl-12 pr-0 text-small";
+            readonly description: "32px";
+        };
+        readonly md: {
+            readonly classes: "h-36 pl-16 pr-2 text-small";
+            readonly description: "36px (default)";
+        };
+        readonly lg: {
+            readonly classes: "h-40 pl-18 pr-4 text-small";
+            readonly description: "40px";
+        };
+    };
+};
+export declare const KAESO_CLIPBOARD_TEXT_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface ClipboardTextProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    value: string;
+    display?: ReactNode | undefined;
+    label?: string | undefined;
+    size?: keyof typeof KAESO_CLIPBOARD_TEXT_VARIANTS.size | undefined;
+}
+export declare const ClipboardText: React.ForwardRefExoticComponent<ClipboardTextProps & React.RefAttributes<HTMLDivElement>>;
+export interface InlineCopyTextProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children" | "onCopy"> {
+    value: string;
+    children?: ReactNode | undefined;
+    label?: string | undefined;
+    onCopy?: ((value: string) => void) | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const InlineCopyText: React.ForwardRefExoticComponent<InlineCopyTextProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/copy-button/docs.d.ts

@@ -0,0 +1,30 @@
+export declare const docs: {
+    ClipboardText: {
+        description: string;
+        props: {
+            display: string;
+            label: string;
+            size: string;
+            value: string;
+        };
+    };
+    CopyButton: {
+        description: string;
+        props: {
+            label: string;
+            onCopy: string;
+            size: string;
+            value: string;
+            variant: string;
+        };
+    };
+    InlineCopyText: {
+        description: string;
+        props: {
+            children: string;
+            label: string;
+            onCopy: string;
+            value: string;
+        };
+    };
+};

package/dist/types/components/copy-button/index.d.ts

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