@logicplanes/kaeso-ui 0.1.0

package/dist/types/components/charts/core.d.ts

@@ -0,0 +1,167 @@
+import type * as React from "react";
+import { type ReactNode, type RefObject } from "react";
+import { tokenKindSeries } from "@logicplanes/kaeso-tokens";
+import { type UiText } from "../../i18n/context.js";
+export declare function wholeTicks(ticks: number[], values: number[]): number[];
+export declare const VIZ: readonly ["var(--k-viz-1)", "var(--k-viz-2)", "var(--k-viz-3)", "var(--k-viz-4)", "var(--k-viz-5)", "var(--k-viz-6)", "var(--k-viz-7)", "var(--k-viz-8)"];
+export declare const VIZ_THIN: readonly ["var(--k-viz-thin-1)", "var(--k-viz-thin-2)", "var(--k-viz-thin-3)", "var(--k-viz-thin-4)", "var(--k-viz-thin-5)", "var(--k-viz-thin-6)", "var(--k-viz-thin-7)", "var(--k-viz-thin-8)"];
+export declare function seriesIndex(id: string): number;
+export declare function assignSeries(ids: string[]): Map<string, number>;
+export declare function seriesColors(ids: string[], thin?: boolean): Map<string, string>;
+export declare const seriesColor: (id: string, thin?: boolean) => "var(--k-viz-1)" | "var(--k-viz-2)" | "var(--k-viz-3)" | "var(--k-viz-4)" | "var(--k-viz-5)" | "var(--k-viz-6)" | "var(--k-viz-7)" | "var(--k-viz-8)" | "var(--k-viz-thin-1)" | "var(--k-viz-thin-2)" | "var(--k-viz-thin-3)" | "var(--k-viz-thin-4)" | "var(--k-viz-thin-5)" | "var(--k-viz-thin-6)" | "var(--k-viz-thin-7)" | "var(--k-viz-thin-8)";
+export type TokenKind = keyof typeof tokenKindSeries;
+export declare const tokenKindColor: (k: TokenKind, thin?: boolean) => "var(--k-viz-1)" | "var(--k-viz-2)" | "var(--k-viz-3)" | "var(--k-viz-4)" | "var(--k-viz-5)" | "var(--k-viz-6)" | "var(--k-viz-7)" | "var(--k-viz-8)" | "var(--k-viz-thin-1)" | "var(--k-viz-thin-2)" | "var(--k-viz-thin-3)" | "var(--k-viz-thin-4)" | "var(--k-viz-thin-5)" | "var(--k-viz-thin-6)" | "var(--k-viz-thin-7)" | "var(--k-viz-thin-8)" | "var(--k-viz-1-soft)";
+export declare const TOKEN_KIND_ORDER: TokenKind[];
+export declare function tokenKindLabel(kind: TokenKind, t?: UiText): string;
+export declare function useSize<T extends HTMLElement>(): [RefObject<T | null>, {
+    width: number;
+    height: number;
+}];
+export declare function tweens(from: number[], to: number[]): boolean;
+export declare function useTweened(values: number[], still?: boolean): number[];
+export declare function useTweenedScale(values: number[], top: number, still?: boolean): {
+    values: number[];
+    top: number;
+};
+export interface ChartState {
+    loading?: boolean | undefined;
+    error?: ReactNode | undefined;
+    onRetry?: (() => void) | undefined;
+    empty?: boolean | undefined;
+    emptyText?: ReactNode | undefined;
+}
+export interface TableData {
+    columns: string[];
+    rows: (string | number)[][];
+}
+export declare function ChartFrame({ label, height, children, table, legend, state, className, toggle, }: {
+    label: string;
+    height: number;
+    children: ReactNode;
+    table?: TableData | undefined;
+    legend?: ReactNode | undefined;
+    state?: ChartState | undefined;
+    className?: string | undefined;
+    toggle?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export interface LegendItem {
+    id: string;
+    label: ReactNode;
+    color: string;
+    value?: ReactNode | undefined;
+}
+export declare function Swatch({ color, shape, off }: {
+    color: string;
+    shape?: "square" | "line" | undefined;
+    off?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Swatch {
+    var displayName: string;
+}
+export declare const tickLabel: (format: (v: number) => string) => (v: number) => string;
+export declare function readableTicks(scale: {
+    ticks: (count: number) => number[];
+    domain: () => number[];
+}, label: (v: number) => string, count?: number): number[];
+export type AxisDate = Date | string;
+export declare function yearStarts(dates: readonly AxisDate[]): number[];
+export declare function labelWidth(label: string): number;
+export declare function placeTimeLabels(ticks: {
+    key: number;
+    at: number;
+    label: string;
+}[], right: number): {
+    key: number;
+    x: number;
+    anchor: "start" | "middle" | "end";
+    label: string;
+}[];
+export declare function axisLabelIndexes(labels: string[], step: number, edges?: {
+    start: number;
+    end: number;
+}, dates?: readonly AxisDate[] | undefined): number[];
+export declare function Legend({ items, hidden, onToggle, onHover, shape, }: {
+    items: LegendItem[];
+    hidden?: Set<string> | undefined;
+    onToggle?: ((id: string) => void) | undefined;
+    onHover?: ((id: string | null) => void) | undefined;
+    shape?: "square" | "line" | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Legend {
+    var displayName: string;
+}
+export interface TooltipRow {
+    id: string;
+    label: ReactNode;
+    color: string;
+    value: ReactNode;
+    share?: ReactNode | undefined;
+}
+export declare function ChartTooltip({ x, xLeft, y, width, heading, rows, visible, }: {
+    x: number;
+    xLeft?: number | undefined;
+    y: number;
+    width: number;
+    heading: ReactNode;
+    rows: TooltipRow[];
+    visible: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartTooltip {
+    var displayName: string;
+}
+export declare const AXIS: {
+    grid: {
+        stroke: string;
+        strokeDasharray: string;
+        strokeWidth: number;
+    };
+    baseline: {
+        stroke: string;
+        strokeWidth: number;
+    };
+    label: {
+        fill: string;
+        fontSize: number;
+        fontWeight: number;
+        style: {
+            fontVariantNumeric: "tabular-nums";
+        };
+    };
+};
+export declare const KAESO_CHARTS_VARIANTS: {
+    readonly chrome: {
+        readonly default: {
+            readonly classes: "";
+            readonly description: "Dashed 3 3 grid, tertiary 12px labels, a strong baseline; no frame";
+        };
+    };
+};
+export declare const KAESO_CHARTS_DEFAULT_VARIANTS: {
+    readonly chrome: "default";
+};
+export declare function chartKeyIndex(key: string, index: number | null, count: number, { vertical, start }?: {
+    vertical?: boolean | undefined;
+    start?: number | undefined;
+}): number | null | undefined;
+export declare function useChartKeys(count: number, options?: {
+    vertical?: boolean | undefined;
+    start?: number | undefined;
+}): {
+    index: number | null;
+    props: {
+        tabIndex: number;
+        onFocus: (e: React.FocusEvent<HTMLElement>) => void;
+        onBlur: () => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    };
+};
+export declare function ChartLive({ children }: {
+    children?: ReactNode | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartLive {
+    var displayName: string;
+}
+export declare const liveLine: (heading: ReactNode, rows: {
+    label: ReactNode;
+    value: ReactNode;
+}[], t?: UiText) => string;

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

@@ -0,0 +1,174 @@
+export declare const docs: {
+    BarChart: {
+        description: string;
+        props: {
+            "aria-label": string;
+            axisLabels: string;
+            categories: string;
+            dates: string;
+            empty: string;
+            emptyText: string;
+            error: string;
+            formatValue: string;
+            height: string;
+            highlight: string;
+            layout: string;
+            loading: string;
+            onRetry: string;
+            series: string;
+        };
+    };
+    ChartFrame: {
+        description: string;
+        props: {
+            children: string;
+            height: string;
+            label: string;
+            legend: string;
+            state: string;
+            table: string;
+            toggle: string;
+        };
+    };
+    ChartLive: {
+        description: string;
+        props: {
+            children: string;
+        };
+    };
+    ChartTooltip: {
+        description: string;
+        props: {
+            heading: string;
+            rows: string;
+            visible: string;
+            width: string;
+            x: string;
+            xLeft: string;
+            y: string;
+        };
+    };
+    Donut: {
+        description: string;
+        props: {
+            "aria-label": string;
+            empty: string;
+            emptyText: string;
+            error: string;
+            formatValue: string;
+            loading: string;
+            onRetry: string;
+            size: string;
+            slices: string;
+            total: string;
+            totalLabel: string;
+        };
+    };
+    Gauge: {
+        description: string;
+        props: {
+            "aria-label": string;
+            label: string;
+            thresholds: string;
+            value: string;
+            valueLabel: string;
+        };
+    };
+    Heatmap: {
+        description: string;
+        props: {
+            "aria-label": string;
+            columnLabelEvery: string;
+            columns: string;
+            formatValue: string;
+            rows: string;
+            values: string;
+        };
+    };
+    Legend: {
+        description: string;
+        props: {
+            hidden: string;
+            items: string;
+            onHover: string;
+            onToggle: string;
+            shape: string;
+        };
+    };
+    Ring: {
+        description: string;
+        props: {
+            "aria-label": string;
+            empty: string;
+            emptyText: string;
+            error: string;
+            formatValue: string;
+            loading: string;
+            onRetry: string;
+            size: string;
+            slices: string;
+            total: string;
+            totalLabel: string;
+        };
+    };
+    Sankey: {
+        description: string;
+        props: {
+            "aria-label": string;
+            empty: string;
+            emptyText: string;
+            error: string;
+            formatValue: string;
+            height: string;
+            links: string;
+            loading: string;
+            nodes: string;
+            onRetry: string;
+        };
+    };
+    ShareBar: {
+        description: string;
+        props: {
+            "aria-label": string;
+            formatValue: string;
+            legend: string;
+            slices: string;
+        };
+    };
+    Sparkline: {
+        description: string;
+        props: {
+            "aria-label": string;
+            color: string;
+            fluid: string;
+            values: string;
+        };
+    };
+    Swatch: {
+        description: string;
+        props: {
+            color: string;
+            off: string;
+            shape: string;
+        };
+    };
+    TimeseriesChart: {
+        description: string;
+        props: {
+            "aria-label": string;
+            empty: string;
+            emptyText: string;
+            error: string;
+            formatTime: string;
+            formatValue: string;
+            height: string;
+            hideLegend: string;
+            highlight: string;
+            kind: string;
+            loading: string;
+            onRetry: string;
+            series: string;
+            threshold: string;
+        };
+    };
+};

package/dist/types/components/charts/donut.d.ts

@@ -0,0 +1,67 @@
+import { type ReactNode } from "react";
+import { type UiText } from "../../i18n/context.js";
+import { type ChartState } from "./core.js";
+export interface Slice {
+    id: string;
+    label: string;
+    value: number;
+    color?: string | undefined;
+}
+export declare const KAESO_DONUT_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "size-160";
+            readonly description: "160px (default)";
+        };
+        readonly sm: {
+            readonly classes: "size-140";
+            readonly description: "140px";
+        };
+        readonly lg: {
+            readonly classes: "size-180";
+            readonly description: "180px";
+        };
+    };
+};
+export declare const KAESO_DONUT_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export declare function groupSmall(slices: Slice[], min?: number, t?: UiText): Slice[];
+export declare function shareLabel(value: number, sum: number, t?: UiText): string;
+export declare function wholeShares(values: number[], t?: UiText): string[];
+export declare const Donut: import("react").ForwardRefExoticComponent<{
+    slices: Slice[];
+    size?: keyof typeof KAESO_DONUT_VARIANTS.size | undefined;
+    total?: ReactNode | undefined;
+    totalLabel?: ReactNode | undefined;
+    formatValue?: ((v: number) => string) | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+} & ChartState & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Ring: import("react").ForwardRefExoticComponent<{
+    slices: Slice[];
+    size?: keyof typeof KAESO_DONUT_VARIANTS.size | undefined;
+    total?: ReactNode | undefined;
+    totalLabel?: ReactNode | undefined;
+    formatValue?: ((v: number) => string) | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+} & ChartState & import("react").RefAttributes<HTMLDivElement>>;
+export declare const KAESO_SHARE_BAR_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "h-8";
+            readonly description: "One 8px pill (default)";
+        };
+    };
+};
+export declare const KAESO_SHARE_BAR_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export declare const ShareBar: import("react").ForwardRefExoticComponent<{
+    slices: Slice[];
+    formatValue?: ((v: number) => string) | undefined;
+    legend?: boolean | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/charts/gauge.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+export declare const KAESO_GAUGE_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "w-180";
+            readonly description: "180px (default)";
+        };
+    };
+};
+export declare const KAESO_GAUGE_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export declare const Gauge: import("react").ForwardRefExoticComponent<{
+    value: number;
+    thresholds?: number[] | undefined;
+    label?: ReactNode | undefined;
+    valueLabel?: ReactNode | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/charts/heatmap.d.ts

@@ -0,0 +1,24 @@
+export declare const KAESO_HEATMAP_VARIANTS: {
+    readonly layout: {
+        readonly week: {
+            readonly classes: "";
+            readonly description: "Hour × weekday (default)";
+        };
+        readonly year: {
+            readonly classes: "";
+            readonly description: "Day × week";
+        };
+    };
+};
+export declare const KAESO_HEATMAP_DEFAULT_VARIANTS: {
+    readonly layout: "week";
+};
+export declare const Heatmap: import("react").ForwardRefExoticComponent<{
+    rows: string[];
+    columns: string[];
+    values: number[][];
+    formatValue?: ((v: number) => string) | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+    columnLabelEvery?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+export * from "./core.js";
+export * from "./timeseries.js";
+export * from "./bar.js";
+export * from "./sparkline.js";
+export * from "./donut.js";
+export * from "./heatmap.js";
+export * from "./gauge.js";
+export * from "./sankey.js";

package/dist/types/components/charts/sankey.d.ts

@@ -0,0 +1,29 @@
+import { type ChartState } from "./core.js";
+export declare const KAESO_SANKEY_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "";
+            readonly description: "Fills its width; 320px tall by default";
+        };
+    };
+};
+export declare const KAESO_SANKEY_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface SankeyNodeIn {
+    id: string;
+    label: string;
+}
+export interface SankeyLinkIn {
+    source: string;
+    target: string;
+    value: number;
+}
+export declare const Sankey: import("react").ForwardRefExoticComponent<{
+    nodes: SankeyNodeIn[];
+    links: SankeyLinkIn[];
+    height?: number | undefined;
+    formatValue?: ((v: number) => string) | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+} & ChartState & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/charts/sparkline.d.ts

@@ -0,0 +1,18 @@
+export declare const KAESO_SPARKLINE_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "w-80 h-24";
+            readonly description: "80×24 inline (default)";
+        };
+    };
+};
+export declare const KAESO_SPARKLINE_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export declare const Sparkline: import("react").ForwardRefExoticComponent<{
+    values: number[];
+    color?: string | undefined;
+    fluid?: boolean | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+} & import("react").RefAttributes<SVGSVGElement>>;

package/dist/types/components/charts/timeseries.d.ts

@@ -0,0 +1,47 @@
+import type * as React from "react";
+import { type ChartState } from "./core.js";
+export declare const KAESO_TIMESERIES_CHART_VARIANTS: {
+    readonly kind: {
+        readonly line: {
+            readonly classes: "";
+            readonly description: "2px lines, hover dots only (default)";
+        };
+        readonly area: {
+            readonly classes: "";
+            readonly description: "Lines with a 10% fill (16% in dark mode)";
+        };
+        readonly stacked: {
+            readonly classes: "";
+            readonly description: "Stacked areas";
+        };
+    };
+};
+export declare const KAESO_TIMESERIES_CHART_DEFAULT_VARIANTS: {
+    readonly kind: "line";
+};
+export interface TimePoint {
+    t: Date | number | string;
+    v: number;
+}
+export interface TimeSeries {
+    id: string;
+    label: string;
+    points: TimePoint[];
+    color?: string | undefined;
+}
+export interface TimeseriesChartProps extends ChartState {
+    series: TimeSeries[];
+    kind?: keyof typeof KAESO_TIMESERIES_CHART_VARIANTS.kind | undefined;
+    height?: number | undefined;
+    formatValue?: ((v: number) => string) | undefined;
+    threshold?: {
+        value: number;
+        label: string;
+    } | undefined;
+    hideLegend?: boolean | undefined;
+    highlight?: number | undefined;
+    formatTime?: ((t: Date) => string) | undefined;
+    "aria-label": string;
+    className?: string | undefined;
+}
+export declare const TimeseriesChart: React.ForwardRefExoticComponent<TimeseriesChartProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+export declare const KAESO_CHECKBOX_VARIANTS: {
+    readonly size: {
+        readonly md: {
+            readonly classes: "size-18 rounded-checkbox";
+            readonly description: "18px, radius 5 (default)";
+        };
+    };
+};
+export declare const KAESO_CHECKBOX_DEFAULT_VARIANTS: {
+    readonly size: "md";
+};
+export interface CheckboxProps {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    indeterminate?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    invalid?: boolean | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+    label?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    id?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    className?: string | undefined;
+    "data-force"?: string | undefined;
+}
+export declare const CheckboxBox: import("react").ForwardRefExoticComponent<CheckboxProps & {
+    parent?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export interface CheckboxGroupProps {
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    onValueChange?: ((value: string[]) => void) | undefined;
+    allValues?: string[] | undefined;
+    disabled?: boolean | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    Box: import("react").ForwardRefExoticComponent<CheckboxProps & {
+        parent?: boolean | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Group: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,58 @@
+export declare const docs: {
+    Checkbox: {
+        description: string;
+        props: {
+            "aria-describedby": string;
+            "aria-label": string;
+            "aria-labelledby": string;
+            checked: string;
+            defaultChecked: string;
+            description: string;
+            disabled: string;
+            id: string;
+            indeterminate: string;
+            invalid: string;
+            label: string;
+            name: string;
+            onCheckedChange: string;
+            readOnly: string;
+            required: string;
+            value: string;
+        };
+    };
+    "Checkbox.Box": {
+        description: string;
+        props: {
+            "aria-describedby": string;
+            "aria-label": string;
+            "aria-labelledby": string;
+            checked: string;
+            defaultChecked: string;
+            description: string;
+            disabled: string;
+            id: string;
+            indeterminate: string;
+            invalid: string;
+            label: string;
+            name: string;
+            onCheckedChange: string;
+            parent: string;
+            readOnly: string;
+            required: string;
+            value: string;
+        };
+    };
+    CheckboxGroup: {
+        description: string;
+        props: {
+            allValues: string;
+            "aria-label": string;
+            "aria-labelledby": string;
+            children: string;
+            defaultValue: string;
+            disabled: string;
+            onValueChange: string;
+            value: string;
+        };
+    };
+};

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

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