@logicplanes/kaeso-ui 0.1.0

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

@@ -0,0 +1,178 @@
+import type * as React from "react";
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import { type IconData } from "../icon/icon.js";
+export declare const KAESO_SIDEBAR_VARIANTS: {
+    readonly mode: {
+        readonly expanded: {
+            readonly classes: "w-(--k-sidebar-width)";
+            readonly description: "248px by default, resizable between 232 and 280";
+        };
+        readonly rail: {
+            readonly classes: "w-60";
+            readonly description: "60px: icons only, labels in tooltips";
+        };
+    };
+    readonly item: {
+        readonly default: {
+            readonly classes: "text-fg hover:bg-fill-2 active:bg-fill-3";
+            readonly description: "A navigation item";
+        };
+        readonly active: {
+            readonly classes: "bg-fill-3 text-fg";
+            readonly description: "The current page";
+        };
+    };
+    readonly caption: {
+        readonly secondary: {
+            readonly classes: "text-fg-secondary";
+            readonly description: "A quiet second line under the switcher's label (default)";
+        };
+        readonly danger: {
+            readonly classes: "text-danger-text";
+            readonly description: "A second line that warns: the organization is scheduled for deletion";
+        };
+    };
+};
+export declare const KAESO_SIDEBAR_DEFAULT_VARIANTS: {
+    readonly mode: "expanded";
+    readonly item: "default";
+    readonly caption: "secondary";
+};
+interface SidebarCtx {
+    rail: boolean;
+    setRail: (v: boolean) => void;
+    collapsed: boolean;
+    setCollapsed: (v: boolean) => void;
+    peeking: boolean;
+    setPeeking: (v: boolean) => void;
+    width: number;
+    setWidth: (v: number) => void;
+    storageKey: string | undefined;
+}
+export declare const useSidebar: () => SidebarCtx;
+export declare const SidebarFloatingContext: React.Context<boolean>;
+export declare const SidebarSheetContext: React.Context<{
+    close: () => void;
+    peek: boolean;
+} | null>;
+export interface SidebarProviderProps {
+    children: ReactNode;
+    storageKey?: string | undefined;
+    defaultRail?: boolean | undefined;
+    shortcut?: boolean | undefined;
+}
+declare function Provider({ children, storageKey, defaultRail, shortcut }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Provider {
+    var displayName: string;
+}
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    resizable?: boolean | undefined;
+    "aria-label"?: string | undefined;
+}
+export declare const SIDEBAR_MIN = 232;
+export declare const SIDEBAR_MAX = 280;
+export interface SidebarBrandProps {
+    href?: string | undefined;
+    label?: string | undefined;
+    children?: ReactNode | undefined;
+    className?: string | undefined;
+}
+export declare function BrandWordmark({ href, label }: {
+    href?: string | undefined;
+    label?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace BrandWordmark {
+    var displayName: string;
+}
+export interface SidebarSwitcherProps {
+    avatar: ReactNode;
+    label: ReactNode;
+    trailing?: ReactNode | undefined;
+    caption?: ReactNode | undefined;
+    captionTone?: keyof typeof KAESO_SIDEBAR_VARIANTS.caption | undefined;
+    children: ReactNode;
+    header?: ReactNode | undefined;
+    footer?: ReactNode | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+declare function Switcher({ avatar, label, trailing, caption, captionTone, children, header, footer, "aria-label": ariaLabel, className, "data-force": force, }: SidebarSwitcherProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Switcher {
+    var displayName: string;
+}
+export interface SidebarPlaceProps {
+    avatar: ReactNode;
+    label: string;
+    children?: ReactNode | undefined;
+    href?: string | undefined;
+    header?: ReactNode | undefined;
+    footer?: ReactNode | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+declare function Place({ avatar, label, children, href, header, footer, "aria-label": ariaLabel, className, "data-force": force }: SidebarPlaceProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Place {
+    var displayName: string;
+}
+export interface SidebarGroupProps {
+    label?: ReactNode | undefined;
+    id?: string | undefined;
+    defaultOpen?: boolean | undefined;
+    collapsible?: boolean | undefined;
+    children: ReactNode;
+    className?: string | undefined;
+}
+export interface SidebarItemProps {
+    children: ReactNode;
+    icon?: IconData | undefined;
+    leading?: ReactNode | undefined;
+    href?: string | undefined;
+    onClick?: ((e: MouseEvent<HTMLElement>) => void) | undefined;
+    active?: boolean | undefined;
+    count?: number | undefined;
+    trailing?: ReactNode | undefined;
+    depth?: 0 | 1 | 2 | undefined;
+    shortcut?: string[] | string[][] | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+declare function Loading({ rows }: {
+    rows?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Loading {
+    var displayName: string;
+}
+declare function CollapseToggle({ className }: {
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace CollapseToggle {
+    var displayName: string;
+}
+declare function RailToggle({ className }: {
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace RailToggle {
+    var displayName: string;
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>> & {
+    Provider: typeof Provider;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Brand: React.ForwardRefExoticComponent<SidebarBrandProps & React.RefAttributes<HTMLDivElement>>;
+    Switcher: typeof Switcher;
+    Place: typeof Place;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLElement>>;
+    BackLink: React.ForwardRefExoticComponent<{
+        href: string;
+        children?: ReactNode | undefined;
+        className?: string | undefined;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    Loading: typeof Loading;
+    RailToggle: typeof RailToggle;
+    CollapseToggle: typeof CollapseToggle;
+};
+export {};

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

@@ -0,0 +1,14 @@
+export declare const docs: {
+    Skeleton: {
+        description: string;
+        props: {
+            shape: string;
+        };
+    };
+    SkeletonLine: {
+        description: string;
+        props: {
+            lines: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,31 @@
+import { type HTMLAttributes } from "react";
+export declare const KAESO_SKELETON_VARIANTS: {
+    readonly shape: {
+        readonly block: {
+            readonly classes: "rounded-well";
+            readonly description: "Rounded blocks for charts and wells (default)";
+        };
+        readonly line: {
+            readonly classes: "h-12 rounded-pill";
+            readonly description: "A pill line for text";
+        };
+        readonly circle: {
+            readonly classes: "rounded-pill";
+            readonly description: "Avatars and icons";
+        };
+        readonly control: {
+            readonly classes: "h-36 rounded-pill";
+            readonly description: "The shape of a 36px control";
+        };
+    };
+};
+export declare const KAESO_SKELETON_DEFAULT_VARIANTS: {
+    readonly shape: "block";
+};
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    shape?: keyof typeof KAESO_SKELETON_VARIANTS.shape | undefined;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SkeletonLine: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    lines?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+export declare const docs: {
+    Slider: {
+        description: string;
+        props: {
+            "aria-label": string;
+            defaultValue: string;
+            disabled: string;
+            formatValue: string;
+            getAriaLabel: string;
+            max: string;
+            min: string;
+            name: string;
+            onValueChange: string;
+            onValueCommitted: string;
+            step: string;
+            ticks: string;
+            value: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,29 @@
+export declare const KAESO_SLIDER_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "h-20";
+            readonly description: "A 4px track in a 20px hit area (default)";
+        };
+    };
+};
+export declare const KAESO_SLIDER_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface SliderProps {
+    value?: number | number[] | undefined;
+    defaultValue?: number | number[] | undefined;
+    onValueChange?: ((value: number | number[]) => void) | undefined;
+    onValueCommitted?: ((value: number | number[]) => void) | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    ticks?: boolean | number[] | undefined;
+    formatValue?: ((value: number) => string) | undefined;
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    "aria-label"?: string | undefined;
+    getAriaLabel?: ((index: number) => string) | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,35 @@
+export declare const docs: {
+    MetricRow: {
+        description: string;
+        props: {
+            children: string;
+        };
+    };
+    Stat: {
+        description: string;
+        props: {
+            delta: string;
+            size: string;
+            unit: string;
+            value: string;
+        };
+    };
+    StatGrid: {
+        description: string;
+        props: {
+            "aria-label": string;
+            children: string;
+        };
+    };
+    StatTile: {
+        description: string;
+        props: {
+            change: string;
+            detail: string;
+            label: string;
+            trend: string;
+            trendColor: string;
+            value: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,68 @@
+import { type ReactNode } from "react";
+export declare const KAESO_STAT_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "text-metric";
+            readonly description: "28/32 metric (default)";
+        };
+        readonly sm: {
+            readonly classes: "text-title";
+            readonly description: "20/28 for dense rows";
+        };
+    };
+};
+export declare const KAESO_STAT_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface StatProps {
+    value: ReactNode;
+    unit?: ReactNode | undefined;
+    delta?: {
+        label: string;
+        tone?: "success" | "danger" | "neutral" | undefined;
+    } | undefined;
+    size?: keyof typeof KAESO_STAT_VARIANTS.size | undefined;
+    className?: string | undefined;
+}
+export declare const Stat: import("react").ForwardRefExoticComponent<StatProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MetricRow: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export interface StatTileProps {
+    label: ReactNode;
+    value: ReactNode;
+    change?: {
+        value: number;
+        better?: "up" | "down" | undefined;
+    } | undefined;
+    detail?: ReactNode | undefined;
+    trend?: number[] | undefined;
+    trendColor?: string | undefined;
+    className?: string | undefined;
+}
+export declare const STAT_VALUE_STEPS: readonly [{
+    readonly classes: "text-title-lg";
+    readonly px: 28;
+}, {
+    readonly classes: "text-title";
+    readonly px: 20;
+}, {
+    readonly classes: "text-title-sm";
+    readonly px: 17;
+}];
+export declare const StatTile: import("react").ForwardRefExoticComponent<StatTileProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function statGridLayout(n: number, wide: boolean): {
+    cols: number;
+    spans: number[];
+};
+export declare function statGridFit(needs: number[], width: number, wide: boolean): {
+    step: number;
+    single: boolean;
+    two: boolean;
+};
+export declare const StatGrid: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/status-dot/docs.d.ts

@@ -0,0 +1,18 @@
+export declare const docs: {
+    Status: {
+        description: string;
+        props: {
+            children: string;
+            size: string;
+            tone: string;
+        };
+    };
+    StatusDot: {
+        description: string;
+        props: {
+            children: string;
+            size: string;
+            tone: string;
+        };
+    };
+};

package/dist/types/components/status-dot/index.d.ts

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

package/dist/types/components/status-dot/status-dot.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export declare const KAESO_STATUS_DOT_VARIANTS: {
+    readonly tone: {
+        readonly success: {
+            readonly classes: "text-success-text";
+            readonly description: "Healthy, active, succeeded";
+        };
+        readonly warning: {
+            readonly classes: "text-warning-text";
+            readonly description: "Degraded, expiring";
+        };
+        readonly danger: {
+            readonly classes: "text-danger-text";
+            readonly description: "Failed, disabled, down";
+        };
+        readonly info: {
+            readonly classes: "text-info-text";
+            readonly description: "Informational";
+        };
+        readonly neutral: {
+            readonly classes: "text-fg-secondary";
+            readonly description: "Inactive, archived (default)";
+        };
+    };
+};
+export declare const KAESO_STATUS_DOT_DEFAULT_VARIANTS: {
+    readonly tone: "neutral";
+};
+export interface StatusDotProps {
+    tone?: keyof typeof KAESO_STATUS_DOT_VARIANTS.tone | undefined;
+    children?: ReactNode | undefined;
+    size?: "sm" | "md" | undefined;
+    className?: string | undefined;
+}
+export declare const StatusDot: import("react").ForwardRefExoticComponent<StatusDotProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Status: import("react").ForwardRefExoticComponent<StatusDotProps & import("react").RefAttributes<HTMLSpanElement>>;

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

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

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

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

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

@@ -0,0 +1,44 @@
+import { type HTMLAttributes } from "react";
+export declare const KAESO_SURFACE_VARIANTS: {
+    readonly kind: {
+        readonly panel: {
+            readonly classes: "bg-panel rounded-panel shadow-panel";
+            readonly description: "The content panel: radius 12, hairline ring";
+        };
+        readonly menu: {
+            readonly classes: "bg-raised rounded-menu shadow-raised";
+            readonly description: "Menus, select and combobox lists: radius 16";
+        };
+        readonly popover: {
+            readonly classes: "bg-raised rounded-popover shadow-raised";
+            readonly description: "Popovers and hover cards: radius 16";
+        };
+        readonly dialog: {
+            readonly classes: "bg-raised rounded-dialog shadow-dialog";
+            readonly description: "Dialogs and the command palette: radius 20";
+        };
+        readonly sheet: {
+            readonly classes: "bg-raised rounded-sheet shadow-dialog";
+            readonly description: "Sheets: radius 16 on exposed corners";
+        };
+        readonly group: {
+            readonly classes: "bg-raised rounded-group shadow-xs";
+            readonly description: "Settings groups: radius 14, ring and a whisper of shadow";
+        };
+        readonly well: {
+            readonly classes: "bg-fill-1 rounded-well";
+            readonly description: "Code, the key reveal, the JSON inspector: fill, no ring";
+        };
+        readonly tooltip: {
+            readonly classes: "bg-raised rounded-tooltip shadow-raised";
+            readonly description: "Chart tooltips and rich tooltips: radius 12";
+        };
+    };
+};
+export declare const KAESO_SURFACE_DEFAULT_VARIANTS: {
+    readonly kind: "panel";
+};
+export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    kind: keyof typeof KAESO_SURFACE_VARIANTS.kind;
+}
+export declare const Surface: import("react").ForwardRefExoticComponent<SurfaceProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/swap-text/docs.d.ts

@@ -0,0 +1,10 @@
+export declare const docs: {
+    SwapText: {
+        description: string;
+        props: {
+            align: string;
+            children: string;
+            reserve: string;
+        };
+    };
+};

package/dist/types/components/swap-text/index.d.ts

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

package/dist/types/components/swap-text/swap-text.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export declare const KAESO_SWAP_TEXT_VARIANTS: {
+    readonly align: {
+        readonly center: {
+            readonly classes: "justify-items-center";
+            readonly description: "Centered in the reserved width (default)";
+        };
+        readonly start: {
+            readonly classes: "justify-items-start";
+            readonly description: "Aligned to the start";
+        };
+    };
+};
+export declare const KAESO_SWAP_TEXT_DEFAULT_VARIANTS: {
+    readonly align: "center";
+};
+export interface SwapTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    children: ReactNode;
+    reserve: ReactNode[];
+    align?: keyof typeof KAESO_SWAP_TEXT_VARIANTS.align | undefined;
+}
+export declare const SwapText: import("react").ForwardRefExoticComponent<SwapTextProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,21 @@
+export declare const docs: {
+    Switch: {
+        description: string;
+        props: {
+            "aria-label": string;
+            "aria-labelledby": string;
+            checked: string;
+            defaultChecked: string;
+            description: string;
+            disabled: string;
+            disabledReason: string;
+            id: string;
+            label: string;
+            loading: string;
+            name: string;
+            onCheckedChange: string;
+            readOnly: string;
+            size: string;
+        };
+    };
+};

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

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

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export declare const KAESO_SWITCH_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "h-16 w-28 p-2";
+            readonly description: "28×16, 12px thumb";
+        };
+        readonly md: {
+            readonly classes: "h-20 w-36 p-2";
+            readonly description: "36×20, 16px thumb (default)";
+        };
+        readonly lg: {
+            readonly classes: "h-24 w-44 p-2";
+            readonly description: "44×24, 20px thumb";
+        };
+    };
+};
+export declare const KAESO_SWITCH_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface SwitchProps {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    disabled?: boolean | undefined;
+    disabledReason?: string | undefined;
+    readOnly?: boolean | undefined;
+    loading?: boolean | undefined;
+    name?: string | undefined;
+    size?: keyof typeof KAESO_SWITCH_VARIANTS.size | undefined;
+    label?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    id?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,6 @@
+export declare const docs: {
+    Table: {
+        description: string;
+        props: {};
+    };
+};

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

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

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

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
+import { type StatusTone } from "../../utils/tone.js";
+export declare const KAESO_TABLE_VARIANTS: {
+    readonly align: {
+        readonly start: {
+            readonly classes: "text-left";
+            readonly description: "Text (default)";
+        };
+        readonly end: {
+            readonly classes: "text-right tabular";
+            readonly description: "Numbers";
+        };
+    };
+};
+export declare const KAESO_TABLE_DEFAULT_VARIANTS: {
+    readonly align: "start";
+};
+export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> {
+    align?: "start" | "end" | undefined;
+    tone?: StatusTone | undefined;
+}
+export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
+    Head: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> & {
+        align?: "start" | "end" | undefined;
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+};