klun-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2701 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, TimeHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes, FormHTMLAttributes, ReactElement, ChangeEvent, TextareaHTMLAttributes, ElementType } from 'react';
+
+type ClassValue = string | number | false | null | undefined;
+/** Tiny classnames joiner — filters falsy values and joins with a space. */
+declare function cx(...args: ClassValue[]): string;
+
+type MoneyPeriod = "month" | "quarter" | "half" | "year";
+interface MoneyOptions {
+    currency?: string;
+    /** When true, `amount` is in minor units (cents): 1250 → $12.50. */
+    cents?: boolean;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    period?: MoneyPeriod;
+    periodLabels?: Partial<Record<MoneyPeriod, string>>;
+    signDisplay?: "auto" | "never" | "always" | "exceptZero";
+}
+interface MoneyResult {
+    text: string;
+    value: number;
+    period: string | null;
+}
+interface SizeOptions {
+    si?: boolean;
+    locale?: string;
+    digits?: number;
+}
+interface PctOptions {
+    digits?: number;
+    fraction?: boolean;
+    locale?: string;
+    signDisplay?: "auto" | "never" | "always" | "exceptZero";
+}
+interface RelTimeOptions {
+    locale?: string;
+    now?: number;
+    numeric?: "always" | "auto";
+}
+interface CountdownResult {
+    expired: boolean;
+    total: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+type DateInput = Date | number | string;
+interface FormatApi {
+    setLocale(locale: string): void;
+    getLocale(locale?: string): string;
+    money(amount: number, opts?: MoneyOptions): MoneyResult;
+    number(n: number, opts?: Intl.NumberFormatOptions & {
+        locale?: string;
+    }): string;
+    humanSize(bytes: number, opts?: SizeOptions): string;
+    humanBps(bps: number, opts?: SizeOptions): string;
+    pct(n: number, opts?: PctOptions): string;
+    relTime(date: DateInput, opts?: RelTimeOptions): string;
+    absTime(date: DateInput, opts?: Intl.DateTimeFormatOptions & {
+        locale?: string;
+    }): string;
+    countdown(target: DateInput, opts?: {
+        now?: number;
+    }): CountdownResult;
+}
+/** Locale-aware formatting utilities. See individual method docs. */
+declare const Format: FormatApi;
+
+/** Which visual family the button belongs to. */
+type ButtonKind = "default" | "fancy" | "compact" | "link";
+type ButtonVariant = "primary" | "neutral" | "error";
+type ButtonAppearance = "filled" | "stroke" | "lighter" | "ghost";
+type ButtonSize = "xsmall" | "small" | "medium" | "large";
+type FancyButtonVariant = "accent" | "dark" | "feature" | "glass";
+type FancyButtonSize = "small" | "medium" | "large";
+type CompactButtonAppearance = "stroke" | "ghost" | "white" | "filled";
+type CompactButtonSize = "small" | "medium";
+type LinkButtonVariant = "gray" | "primary" | "error";
+type LinkButtonSize = "small" | "medium";
+interface CommonButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** Native button type. Default `"button"`. */
+    type?: "button" | "submit" | "reset";
+    /** Show a spinner, hide icons and make the button non-interactive. */
+    loading?: boolean;
+}
+/**
+ * The standard button — a labelled action, or a square icon-only control via
+ * `iconOnly`. Pick a `variant` (color intent), an `appearance` (surface) and a
+ * `size`.
+ */
+interface DefaultButtonProps extends CommonButtonProps {
+    kind?: "default";
+    /** Color intent. Default `"primary"`. */
+    variant?: ButtonVariant;
+    /** Surface style. Default `"filled"`. */
+    appearance?: ButtonAppearance;
+    /** Default `"medium"`. */
+    size?: ButtonSize;
+    /** Icon node before the label. */
+    leadingIcon?: ReactNode;
+    /** Icon node after the label. */
+    trailingIcon?: ReactNode;
+    /** Render as a square icon-only button. */
+    iconOnly?: boolean;
+    /** Icon node for `iconOnly` (falls back to `leadingIcon`, then `children`). */
+    icon?: ReactNode;
+    /** Stretch to the full width of the container. */
+    fullWidth?: boolean;
+}
+/** Elevated, sheened CTA — for hero / marketing actions. */
+interface FancyButtonProps extends CommonButtonProps {
+    kind: "fancy";
+    /** Visual treatment. Default `"accent"`. */
+    variant?: FancyButtonVariant;
+    /** Default `"medium"`. */
+    size?: FancyButtonSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    fullWidth?: boolean;
+}
+/** Small square/full-radius icon-or-text control for dense toolbars. */
+interface CompactButtonProps extends CommonButtonProps {
+    kind: "compact";
+    /** Surface style. Default `"stroke"`. */
+    appearance?: CompactButtonAppearance;
+    /** Default `"medium"`. */
+    size?: CompactButtonSize;
+    /** Use a pill radius instead of the default small radius. */
+    fullRadius?: boolean;
+    /** Icon node (compact is icon-first). */
+    icon?: ReactNode;
+}
+/** Text-only link styled as an inline action. */
+interface LinkButtonProps extends CommonButtonProps {
+    kind: "link";
+    /** Color intent. Default `"gray"`. */
+    variant?: LinkButtonVariant;
+    /** Default `"medium"`. */
+    size?: LinkButtonSize;
+    /** Underline the label. */
+    underline?: boolean;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+type ButtonProps = DefaultButtonProps | FancyButtonProps | CompactButtonProps | LinkButtonProps;
+/**
+ * Button — the single action control for the whole button family. The `kind`
+ * prop selects the visual family and which other props apply:
+ *
+ * - `kind="default"` (omit): standard button. `variant` × `appearance` × `size`;
+ *   set `iconOnly` for a square icon button.
+ * - `kind="fancy"`: elevated sheened CTA. `variant` = accent | dark | feature | glass.
+ * - `kind="compact"`: dense toolbar control. `appearance`, `fullRadius`, `icon`.
+ * - `kind="link"`: inline text link. `variant` = gray | primary | error, `underline`.
+ *
+ * For connected segmented buttons, see `ButtonGroup`.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type ButtonGroupSize = "small" | "medium" | "large";
+interface ButtonGroupItem {
+    value: string;
+    label?: ReactNode;
+    icon?: ReactNode;
+}
+interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Segments to render. */
+    items: ButtonGroupItem[];
+    /** Currently selected segment value. */
+    value?: string;
+    /** Fired with the value of the clicked segment. */
+    onChange?: (value: string) => void;
+    /** Default `"medium"`. */
+    size?: ButtonGroupSize;
+    /** Stretch segments to fill the container. */
+    fullWidth?: boolean;
+}
+/**
+ * ButtonGroup — connected segmented buttons sharing a single border.
+ * Pick a `size`, pass `items`, and track the active `value`.
+ */
+declare const ButtonGroup: react.ForwardRefExoticComponent<ButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Box size of the control. */
+type CopyButtonSize = "sm" | "md" | "lg";
+/** Surface style. */
+type CopyButtonVariant = "ghost" | "stroke";
+interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** The value copied to the clipboard. */
+    value: string;
+    /** Optional label — turns the icon-only square into a labelled pill. */
+    children?: ReactNode;
+    /** Fired after a successful copy — use to show a toast. */
+    onCopied?: (value: string) => void;
+    size?: CopyButtonSize;
+    variant?: CopyButtonVariant;
+    copyIcon?: string;
+    doneIcon?: string;
+}
+/**
+ * CopyButton — copies `value` to the clipboard and flips to a transient success
+ * state for 1400ms. Icon-only square by default; pass `children` for a labelled
+ * pill. Fire `onCopied` to show a toast.
+ */
+declare const CopyButton: react.ForwardRefExoticComponent<CopyButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface Locale {
+    /** BCP-47 language tag, e.g. `"en-US"`. */
+    locale: string;
+    datePicker: {
+        /** 12 month names (or numeric forms), January-first — as shown in the header. */
+        months: string[];
+        /** 7 short weekday labels, Monday-first. */
+        weekdaysShort: string[];
+        /** Calendar header template with `{month}` and `{year}` placeholders. */
+        title: string;
+    };
+    timePicker: {
+        am: string;
+        pm: string;
+    };
+    pagination: {
+        previous: string;
+        next: string;
+    };
+    modal: {
+        close: string;
+    };
+    drawer: {
+        close: string;
+    };
+    alert: {
+        dismiss: string;
+    };
+    banner: {
+        dismiss: string;
+    };
+    toast: {
+        dismiss: string;
+    };
+    fileUpload: {
+        clickToUpload: string;
+        orDragAndDrop: string;
+    };
+    imageUpload: {
+        label: string;
+        remove: string;
+    };
+    passwordStrength: {
+        weak: string;
+        fair: string;
+        good: string;
+        strong: string;
+    };
+    /** `noResults` contains a `{query}` placeholder. */
+    commandMenu: {
+        placeholder: string;
+        esc: string;
+        noResults: string;
+    };
+    selectMenu: {
+        placeholder: string;
+    };
+    chip: {
+        remove: string;
+    };
+    tag: {
+        remove: string;
+    };
+    /** `star` contains a `{count}` placeholder. */
+    rating: {
+        star: string;
+    };
+    spinner: {
+        loading: string;
+    };
+    richEditorToolbar: {
+        bold: string;
+        italic: string;
+        underline: string;
+        strike: string;
+        h1: string;
+        h2: string;
+        quote: string;
+        code: string;
+        ul: string;
+        ol: string;
+        link: string;
+        image: string;
+    };
+    list: {
+        noData: string;
+        loading: string;
+    };
+    autoComplete: {
+        noResults: string;
+    };
+    cascader: {
+        placeholder: string;
+    };
+    popconfirm: {
+        title: string;
+        confirm: string;
+        cancel: string;
+    };
+    /** `goToSlide` has an `{n}` placeholder. */
+    carousel: {
+        previous: string;
+        next: string;
+        goToSlide: string;
+    };
+    input: {
+        clear: string;
+    };
+    notification: {
+        close: string;
+    };
+    /** `minChars`/`maxChars` have `{min}`/`{max}`; `exactChars` has `{len}`; `oneOf` has `{values}`; `min`/`max` have `{min}`/`{max}`. */
+    form: {
+        required: string;
+        empty: string;
+        minChars: string;
+        maxChars: string;
+        exactChars: string;
+        oneOf: string;
+        invalidFormat: string;
+        email: string;
+        url: string;
+        number: string;
+        integer: string;
+        min: string;
+        max: string;
+    };
+    /** `pageRange` has `{from}`/`{to}`/`{total}`; `perPage` has `{size}`. */
+    table: {
+        noData: string;
+        columns: string;
+        copy: string;
+        copyRow: string;
+        exportCsv: string;
+        filter: string;
+        expand: string;
+        collapse: string;
+        dragToReorder: string;
+        dragToResize: string;
+        editHint: string;
+        previous: string;
+        next: string;
+        pageRange: string;
+        perPage: string;
+    };
+}
+/** Fill a `{placeholder}` template, e.g. `fmt(locale.rating.star, { count: 3 })`. */
+declare function fmt(template: string, vars: Record<string, string | number>): string;
+/** English (US) — the default locale used when no ConfigProvider is present. */
+declare const enUS: Locale;
+/** 简体中文 (Simplified Chinese). */
+declare const zhCN: Locale;
+/** 繁體中文 (Traditional Chinese). */
+declare const zhTW: Locale;
+/** 日本語 (Japanese). */
+declare const jaJP: Locale;
+/** 한국어 (Korean). */
+declare const koKR: Locale;
+/** Français (French). */
+declare const frFR: Locale;
+/** Deutsch (German). */
+declare const deDE: Locale;
+/** Español (Spanish). */
+declare const esES: Locale;
+/** Português (Brasil) (Brazilian Portuguese). */
+declare const ptBR: Locale;
+/** Русский (Russian). */
+declare const ruRU: Locale;
+/** العربية (Arabic). Pairs with `dir="rtl"` on the ConfigProvider. */
+declare const arSA: Locale;
+/** Italiano (Italian). */
+declare const itIT: Locale;
+/** Nederlands (Dutch). */
+declare const nlNL: Locale;
+/** Polski (Polish). */
+declare const plPL: Locale;
+/** Türkçe (Turkish). */
+declare const trTR: Locale;
+/** Tiếng Việt (Vietnamese). */
+declare const viVN: Locale;
+/** Bahasa Indonesia (Indonesian). */
+declare const idID: Locale;
+/** All built-in locales, keyed by their export name. */
+declare const locales: {
+    enUS: Locale;
+    zhCN: Locale;
+    zhTW: Locale;
+    jaJP: Locale;
+    koKR: Locale;
+    frFR: Locale;
+    deDE: Locale;
+    esES: Locale;
+    ptBR: Locale;
+    ruRU: Locale;
+    arSA: Locale;
+    itIT: Locale;
+    nlNL: Locale;
+    plPL: Locale;
+    trTR: Locale;
+    viVN: Locale;
+    idID: Locale;
+};
+
+/** Global default size for components whose scale includes these values. */
+type ComponentSize = "small" | "medium" | "large";
+/** Text direction. */
+type Direction = "ltr" | "rtl";
+/** Color scheme. */
+type Theme = "light" | "dark";
+/**
+ * Accent / primary color ramp (maps to the design system's `data-mode`).
+ * `"metronic"` is a full Metronic 9.0 skin — it re-points the whole semantic
+ * palette (surfaces, text, strokes, intents, radii) onto Metronic colors, not
+ * just the primary ramp. Orthogonal to `theme`, so it works in light and dark.
+ */
+type Accent = "blue" | "purple" | "orange" | "green" | "slate" | "metronic";
+/**
+ * Global corner-radius scale (maps to `data-radius`). `"square"` = 0-radius
+ * (sharp) corners, `"sharp"` = tight, `"rounded"` = soft. The functional pill
+ * radius (round avatars / switches / pill badges) is always preserved.
+ */
+type Radius = "default" | "sharp" | "square" | "rounded";
+interface KlunConfig {
+    /** Active locale dictionary. */
+    locale: Locale;
+    /** Default size applied to components that receive no explicit `size` prop. */
+    size?: ComponentSize;
+    /** Text direction. */
+    dir: Direction;
+    /** Color scheme. `undefined` inherits the document/default (light) theme. */
+    theme?: Theme;
+    /** Accent (primary) color ramp. `undefined` inherits the default (blue). */
+    accent?: Accent;
+    /** Global corner-radius scale. `undefined` inherits the default. */
+    radius?: Radius;
+    /** Custom primary color (e.g. a hex). Overrides `accent`; a shade/tint ramp is derived. */
+    primaryColor?: string;
+}
+/**
+ * Derive the `--klun-primary-*` token ramp from a single base color. A hex input
+ * produces the full shade/tint ramp + alpha tints; any other CSS color sets just
+ * the base. Used by ConfigProvider's `primaryColor`, exported for manual use.
+ */
+declare function primaryColorVars(color: string): Record<string, string>;
+interface ConfigProviderProps {
+    /** Locale dictionary. Defaults to `enUS` (or the nearest parent provider's). */
+    locale?: Locale;
+    /** Global default component size. */
+    size?: ComponentSize;
+    /** Text direction. Default `"ltr"`. */
+    dir?: Direction;
+    /** Color scheme applied to the subtree (`light` | `dark`). */
+    theme?: Theme;
+    /** Accent (primary) color ramp applied to the subtree. */
+    accent?: Accent;
+    /** Global corner-radius scale applied to the subtree. */
+    radius?: Radius;
+    /** Custom primary color (e.g. a hex). Overrides `accent`; a ramp is derived. */
+    primaryColor?: string;
+    children?: ReactNode;
+}
+/**
+ * ConfigProvider — supplies a global locale, default size, text direction and
+ * theme/accent to the klun-ui components rendered below it. Values are inherited
+ * from a parent provider when present, so providers can be nested to scope
+ * overrides. `theme`/`accent` set `data-theme`/`data-mode` on the wrapper, which
+ * re-points the design tokens for the whole subtree; `primaryColor` overrides the
+ * accent with a ramp derived from any hex. Without any provider, components fall
+ * back to en-US / ltr / default theme, so usage is fully optional.
+ */
+declare function ConfigProvider({ locale, size, dir, theme, accent, radius, primaryColor, children, }: ConfigProviderProps): react.JSX.Element;
+declare namespace ConfigProvider {
+    var displayName: string;
+}
+/** Read the full klun-ui config from the nearest provider (or built-in defaults). */
+declare function useConfig(): KlunConfig;
+/** Read the active locale dictionary. */
+declare function useLocale(): Locale;
+/**
+ * Resolve a component's size: explicit prop wins, then the provider's global
+ * `size`, then `"medium"`. Returns the explicit prop's own size type.
+ */
+declare function useSize<S extends string = ComponentSize>(explicit?: S): S;
+/**
+ * Resolve a size for a component whose own scale differs from the global one —
+ * it lacks a tier (e.g. no `large`) or uses different names (`sm`/`md`/`lg`).
+ * `explicit` wins; otherwise the provider's global size is translated through
+ * `map` (which clamps/renames each global tier to a value this component
+ * supports); with no provider size it returns `fallback`.
+ */
+declare function useMappedSize<S extends string>(explicit: S | undefined, map: Record<ComponentSize, S>, fallback: S): S;
+
+type AvatarSize = "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80";
+type AvatarStatus = "online" | "busy" | "away" | "offline";
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    initials?: string;
+    color?: "gray" | "blue" | "purple" | "green" | "orange" | "yellow";
+    status?: AvatarStatus;
+    icon?: ReactNode;
+}
+/**
+ * Avatar — user image, initials, or icon with optional status dot.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    avatars?: AvatarProps[];
+    size?: "24" | "32" | "40" | "48";
+    max?: number;
+    /** Container chrome around the stack. Default `"none"`. */
+    variant?: "none" | "stroke" | "filled";
+}
+/**
+ * AvatarGroup — overlapping avatar stack with optional +N overflow.
+ */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+type BadgeColor = "gray" | "blue" | "orange" | "red" | "green" | "yellow" | "purple" | "sky" | "pink" | "teal";
+type BadgeVariant = "filled" | "light" | "lighter" | "stroke";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: BadgeColor;
+    variant?: BadgeVariant;
+    size?: "small" | "medium";
+    leadingIcon?: ReactNode;
+    dot?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Badge — compact status / category marker. 10 colors × 4 variants × 2 sizes.
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {
+    count?: number;
+    /** Force visibility (defaults to `count > 0`). */
+    open?: boolean;
+    onClear?: () => void;
+    label?: ReactNode;
+    position?: "top" | "bottom";
+    /** CSS position: "fixed" (viewport) or "sticky"/"absolute". */
+    sticky?: "fixed" | "sticky" | "absolute";
+}
+/**
+ * Klun UI BulkActionBar — floating pill toolbar that appears when table rows are selected.
+ * Renders a selection count chip, a label, a divider, your action buttons and an optional
+ * clear control. Mounts/unmounts with a slide+fade driven by `count > 0` (or the `open` prop).
+ */
+declare const BulkActionBar: react.ForwardRefExoticComponent<BulkActionBarProps & react.RefAttributes<HTMLDivElement>>;
+interface BulkActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    tone?: "default" | "danger";
+}
+/** Button styled for use inside a BulkActionBar (on the dark pill). */
+declare const BulkAction: react.ForwardRefExoticComponent<BulkActionProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    children?: ReactNode;
+    /** Controlled active index. */
+    index?: number;
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    autoplay?: boolean;
+    /** Autoplay interval in ms. */
+    interval?: number;
+    dots?: boolean;
+    arrows?: boolean;
+    loop?: boolean;
+    height?: number | string;
+}
+/**
+ * Klun UI Carousel — sliding content rotator with optional dots, arrows and
+ * autoplay. Each direct child is one slide. Controlled or uncontrolled.
+ */
+declare const Carousel: react.ForwardRefExoticComponent<CarouselProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ChartLegendItem {
+    label: string;
+    /** Any CSS color or token var() for the series swatch. */
+    color: string;
+    /** Optional trailing value, e.g. "$24,500" or "42%". */
+    value?: string;
+}
+interface ChartLegendProps extends HTMLAttributes<HTMLDivElement> {
+    items: ChartLegendItem[];
+    direction?: "row" | "column";
+    dot?: "round" | "line";
+    size?: "sm" | "md";
+}
+/** Klun UI ChartLegend — keyed list of series with color dots and optional values. */
+declare const ChartLegend: react.ForwardRefExoticComponent<ChartLegendProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ChartTooltipRow {
+    label: ReactNode;
+    value: ReactNode;
+    color?: string;
+}
+interface ChartTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    rows: ChartTooltipRow[];
+    /** Optional pointer arrow side. */
+    arrow?: "none" | "top" | "bottom";
+}
+/** Klun UI ChartTooltip — floating chart readout with title + keyed series rows. */
+declare const ChartTooltip: react.ForwardRefExoticComponent<ChartTooltipProps & react.RefAttributes<HTMLDivElement>>;
+
+type ChipColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: ChipColor;
+    selected?: boolean;
+    /** Show a leading color dot. */
+    dot?: boolean;
+    /** Show a dismiss (×) button; receives the click handler. */
+    onDismiss?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Klun UI Chip — compact, optionally-selectable color category pill. */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface CodeViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    code: string;
+    title?: ReactNode;
+    language?: string;
+    lineNumbers?: boolean;
+    wrap?: boolean;
+    maxHeight?: number;
+    dark?: boolean;
+    onCopied?: (value: string) => void;
+}
+/**
+ * Klun UI CodeViewer — read-only monospace block for error stacks, config, snippets.
+ * Dark surface, horizontal scroll, optional line numbers, copy button, max-height inner scroll.
+ */
+declare const CodeViewer: react.ForwardRefExoticComponent<CodeViewerProps & react.RefAttributes<HTMLDivElement>>;
+type LogLevel = "error" | "warn" | "warning" | "info" | "debug" | "success";
+interface LogLine {
+    ts?: string;
+    level?: LogLevel | string;
+    text: string;
+}
+interface LogViewerProps extends HTMLAttributes<HTMLDivElement> {
+    lines: (string | LogLine)[];
+    maxHeight?: number;
+    showTimestamp?: boolean;
+    dark?: boolean;
+    onCopied?: (value: string) => void;
+}
+/**
+ * Klun UI LogViewer — read-only log stream with optional per-line level coloring + timestamps.
+ * `lines`: string[] OR [{ ts?, level?, text }]. Monospace, dark, inner-scroll.
+ */
+declare const LogViewer: react.ForwardRefExoticComponent<LogViewerProps & react.RefAttributes<HTMLDivElement>>;
+
+type ContentLabelColor = "gray" | "blue" | "green" | "orange" | "purple";
+interface ContentLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    icon?: ReactNode;
+    color?: ContentLabelColor;
+    size?: "sm" | "md";
+    children?: ReactNode;
+}
+/** Klun UI ContentLabel — tracked uppercase section overline with optional icon. */
+declare const ContentLabel: react.ForwardRefExoticComponent<ContentLabelProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface DescriptionItem {
+    label: ReactNode;
+    children: ReactNode;
+    /** How many columns this item spans. */
+    span?: number;
+}
+type DescriptionsVariant = "plain" | "bordered";
+type DescriptionsSize = "small" | "medium" | "large";
+type DescriptionsLayout = "horizontal" | "vertical";
+interface DescriptionsProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    extra?: ReactNode;
+    items: DescriptionItem[];
+    column?: number;
+    variant?: DescriptionsVariant;
+    size?: DescriptionsSize;
+    colon?: boolean;
+    layout?: DescriptionsLayout;
+}
+/**
+ * Descriptions — key/value detail list for entity/detail pages.
+ * `items`: [{ label, children, span? }]. `column` sets grid columns.
+ * variant: "plain" (rows) or "bordered" (boxed cells).
+ */
+declare const Descriptions: react.ForwardRefExoticComponent<DescriptionsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/**
+ * Kbd — keyboard key cap.
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+type KeyIconColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+type KeyIconAppearance = "light" | "filled" | "stroke";
+type KeyIconSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface KeyIconProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+    icon: ReactNode;
+    /** Color ramp. Default `"blue"`. */
+    color?: KeyIconColor;
+    /** Surface style. Default `"light"`. */
+    appearance?: KeyIconAppearance;
+    /** Default `"md"`. */
+    size?: KeyIconSize;
+    /** Extra inline style for the tile. */
+    css?: CSSProperties;
+}
+/** Klun UI KeyIcon — featured icon tile in a themed rounded container. */
+declare const KeyIcon: react.ForwardRefExoticComponent<KeyIconProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ListProps<T = any> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    dataSource?: T[];
+    renderItem?: (item: T, index: number) => ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    bordered?: boolean;
+    split?: boolean;
+    loading?: boolean;
+    empty?: ReactNode;
+    size?: "small" | "medium" | "large";
+    /** Node rendered in a centered footer band, e.g. a "Load more" button. */
+    loadMore?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Klun UI List — vertical list of items with optional header/footer, dividers,
+ * loading and "load more". Use `dataSource` + `renderItem`, or compose <ListItem>.
+ */
+declare function List<T = any>({ dataSource, renderItem, header, footer, bordered, split, loading, empty, size: sizeProp, loadMore, className, children, ...props }: ListProps<T>): react.JSX.Element;
+declare namespace List {
+    var displayName: string;
+}
+interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    avatar?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    extra?: ReactNode;
+    actions?: ReactNode[];
+    align?: CSSProperties["alignItems"];
+    children?: ReactNode;
+}
+/**
+ * Klun UI ListItem — a single row: optional avatar/media, title, description,
+ * and trailing actions. Use inside List's renderItem.
+ */
+declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLDivElement>>;
+
+type MoneyTone = "default" | "muted" | "increase" | "refund";
+type MoneySize = "sm" | "md" | "lg" | "big";
+interface MoneyProps extends Omit<HTMLAttributes<HTMLSpanElement>, "prefix"> {
+    /** Amount in major units, or minor units when `cents` is true. */
+    value: number;
+    cents?: boolean;
+    currency?: string;
+    locale?: string;
+    period?: MoneyPeriod;
+    periodLabels?: Partial<Record<MoneyPeriod, string>>;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    signDisplay?: "auto" | "never" | "always" | "exceptZero";
+    tone?: MoneyTone;
+    size?: MoneySize;
+    strikethrough?: boolean;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+}
+/**
+ * Klun UI Money — formatted currency amount with optional period suffix and tone.
+ * One place to change currency / locale across a product. Pass `cents` for minor units.
+ */
+declare const Money: react.ForwardRefExoticComponent<MoneyProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    /** Current rating. Default `0`. */
+    value?: number;
+    /** Number of stars. Default `5`. */
+    max?: number;
+    onChange?: (value: number) => void;
+    /** Disable interaction. Default `false`. */
+    readOnly?: boolean;
+    /** Star size in px. Default `20`. */
+    size?: number;
+    style?: CSSProperties;
+}
+/** Klun UI Rating — star rating, interactive or read-only. */
+declare const Rating: react.ForwardRefExoticComponent<RatingProps & react.RefAttributes<HTMLDivElement>>;
+
+interface RelativeTimeProps extends TimeHTMLAttributes<HTMLTimeElement> {
+    date: Date | number | string;
+    locale?: string;
+    /** Re-render on an interval (default true). */
+    live?: boolean;
+    every?: number;
+    /** Show the absolute time as the label instead of the relative one. */
+    absolute?: boolean;
+}
+/**
+ * Klun UI RelativeTime — locale relative time ("2 hours ago") that re-renders on an interval.
+ * Shows the absolute time in a native tooltip. Set `live={false}` to render once.
+ */
+declare const RelativeTime: react.ForwardRefExoticComponent<RelativeTimeProps & react.RefAttributes<HTMLTimeElement>>;
+interface ExpiryCountdownProps extends HTMLAttributes<HTMLSpanElement> {
+    date: Date | number | string;
+    /** Days remaining at/under which the tone turns amber. */
+    warnDays?: number;
+    every?: number;
+    showIcon?: boolean;
+    /** Custom label formatter (for i18n). */
+    format?: (c: CountdownResult) => ReactNode;
+}
+/**
+ * Klun UI ExpiryCountdown — counts down to an expiry date. Goes amber within `warnDays`
+ * and red once expired. Language-neutral: pass a `format` fn for copy, or use the default
+ * compact "5d 3h" / "expired".
+ */
+declare const ExpiryCountdown: react.ForwardRefExoticComponent<ExpiryCountdownProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix"> {
+    label?: ReactNode;
+    value: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    /** Decimal places when value is a number. */
+    precision?: number;
+    trend?: "up" | "down" | "flat";
+    trendValue?: ReactNode;
+    icon?: ReactNode;
+    size?: "small" | "medium" | "large";
+}
+/**
+ * Klun UI Statistic — a single metric: label, big value (prefix/suffix) and an
+ * optional trend delta. Compose several with `Space` for a stat row.
+ */
+declare const Statistic: react.ForwardRefExoticComponent<StatisticProps & react.RefAttributes<HTMLDivElement>>;
+
+type StatusTone = "ok" | "warn" | "err" | "info" | "neutral" | "busy";
+interface StatusBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+    status: string;
+    /** Display text override (defaults to a humanized `status`). */
+    label?: ReactNode;
+    /** Force a tone instead of using the lookup table. */
+    tone?: StatusTone;
+    /** Extra/override status→tone entries, e.g. { custom: "ok" }. */
+    map?: Record<string, StatusTone>;
+    dot?: boolean;
+    pulse?: boolean;
+    variant?: BadgeVariant;
+    size?: "small" | "medium";
+}
+/**
+ * Klun UI StatusBadge — maps a domain status string to a tone-consistent Badge.
+ * Centralizes status→color so every list/detail page reads identically.
+ * Override or extend with the `map` prop ({ statusKey: tone }) or pass an explicit `tone`.
+ */
+declare function StatusBadge({ status, label, tone, map, dot, variant, size, pulse, className, ...props }: StatusBadgeProps): react.JSX.Element;
+declare namespace StatusBadge {
+    var displayName: string;
+    var STATUS_TONE: Record<string, StatusTone>;
+    var TONE_COLOR: Record<StatusTone, BadgeColor>;
+}
+
+type DotTone = "ok" | "warn" | "err" | "info" | "neutral";
+interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+    tone?: DotTone;
+    size?: "xs" | "sm" | "md" | "lg";
+    pulse?: boolean;
+    label?: ReactNode;
+}
+/**
+ * StatusDot — small colored dot for resource/system state, with optional pulse
+ * ring and trailing label.
+ */
+declare const StatusDot: react.ForwardRefExoticComponent<StatusDotProps & react.RefAttributes<HTMLSpanElement>>;
+interface LiveDotProps extends Omit<StatusDotProps, "pulse"> {
+}
+/** A StatusDot preset that always pulses (for "live"/"running" indicators). */
+declare const LiveDot: react.ForwardRefExoticComponent<LiveDotProps & react.RefAttributes<HTMLSpanElement>>;
+
+type SortDir = "asc" | "desc";
+interface TableSort {
+    key: string;
+    dir: SortDir;
+}
+interface TableMenuItem {
+    label?: ReactNode;
+    icon?: string;
+    onClick?: () => void;
+    danger?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+    shortcut?: ReactNode;
+}
+interface TableColumn<Row = any> {
+    key: string;
+    header: ReactNode;
+    width?: number | string;
+    align?: "left" | "center" | "right";
+    /** Make this column sortable (or force off with false while `sortable` is on). */
+    sortable?: boolean;
+    /** Value used for sorting; defaults to row[key]. */
+    sortAccessor?: (row: Row) => string | number | null | undefined;
+    /** Filter options shown in the header dropdown. */
+    filters?: Array<{
+        label: ReactNode;
+        value: any;
+    }>;
+    /** Predicate for a filter value against a row; defaults to row[key] === value. */
+    onFilter?: (value: any, row: Row) => boolean;
+    /** Allow selecting multiple filter values. Default true. */
+    filterMultiple?: boolean;
+    /** Pin this column to the left or right edge while scrolling horizontally. */
+    fixed?: "left" | "right";
+    /** Truncate overflow with an ellipsis (and native title tooltip for strings). */
+    ellipsis?: boolean;
+    /** Show a hover copy button in the cell; copies copyValue(row) or row[key]. */
+    copyable?: boolean;
+    /** Value used for copy (cell and row). Defaults to row[key]. */
+    copyValue?: (row: Row) => string | number | null | undefined;
+    /** Allow drag-resizing this column (or force off with false while `resizable` is on). */
+    resizable?: boolean;
+    /** Min width in px when resizing. Default 64. */
+    minWidth?: number;
+    /** Exclude this column from CSV export. */
+    exportable?: boolean;
+    /** Hidden by default (toggle via the column-settings menu). */
+    hidden?: boolean;
+    /** Allow inline editing of this cell (double-click to edit). */
+    editable?: boolean;
+    /** Editor control used when editable. Default "text". */
+    editor?: "text" | "number" | "select";
+    /** Options for the select editor: values or { label, value }. */
+    options?: Array<string | number | {
+        label: ReactNode;
+        value: any;
+    }>;
+    /** Custom cell renderer; defaults to row[key]. */
+    render?: (row: Row) => ReactNode;
+    /** Custom header renderer. */
+    headerRender?: () => ReactNode;
+    /** Prevent the cell text from wrapping. */
+    nowrap?: boolean;
+}
+interface TableProps<Row = any> extends Omit<HTMLAttributes<HTMLDivElement>, "style" | "contextMenu" | "title" | "onCopy"> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    getRowId?: (row: Row, index: number) => string | number;
+    /** Row selection. */
+    selectable?: boolean;
+    selected?: Array<string | number>;
+    onSelectRow?: (id: string | number) => void;
+    /** Receives the full id list (or []) when the header box is toggled. */
+    onSelectAll?: (ids: Array<string | number>) => void;
+    /** Enable sorting on all columns (per-column `sortable` still wins). */
+    sortable?: boolean;
+    /** Controlled sort state; omit for built-in uncontrolled sorting. */
+    sort?: TableSort | null;
+    onSortChange?: (sort: TableSort | null) => void;
+    /** Initial sort for uncontrolled mode. */
+    defaultSort?: TableSort | null;
+    /** Controlled column filters: { [columnKey]: selectedValues[] }. Omit for built-in. */
+    filters?: Record<string, any[]>;
+    onFiltersChange?: (filters: Record<string, any[]>) => void;
+    /** Built-in pagination. `true` for defaults, or configure it. */
+    pagination?: boolean | {
+        page?: number;
+        pageSize?: number;
+        defaultPageSize?: number;
+        total?: number;
+        pageSizeOptions?: number[];
+        onChange?: (page: number, pageSize: number) => void;
+    };
+    /** Expandable rows with a per-row detail panel. */
+    expandable?: {
+        render: (row: Row) => ReactNode;
+        rowExpandable?: (row: Row) => boolean;
+        defaultExpandedKeys?: Array<string | number>;
+        onExpand?: (row: Row, expanded: boolean) => void;
+    };
+    /** Row height / padding scale. */
+    density?: "compact" | "comfortable" | "spacious";
+    /** Striped alternate rows. */
+    zebra?: boolean;
+    /** Sticky header for scrolling bodies. */
+    stickyHeader?: boolean;
+    /** Row hover highlight. Default true. */
+    hover?: boolean;
+    /** Draw vertical cell dividers (grid look). */
+    bordered?: boolean;
+    /** Selection control style. */
+    selectionType?: "checkbox" | "radio";
+    /** Tint a row by status, with a colored left accent bar. */
+    rowStatus?: (row: Row) => "success" | "warning" | "error" | "info" | null | undefined;
+    /** Summary/total row: receives the current page rows, returns one node per column. */
+    summary?: (rows: Row[]) => ReactNode[];
+    /** Right-click menu items for a row. Receives clipboard helpers; return [] to suppress. */
+    contextMenu?: (row: Row, helpers: {
+        copyRow: (row: Row) => void;
+        copyText: (text: any) => void;
+    }) => TableMenuItem[];
+    /** Enable the built-in right-click "Copy row" (tab-separated) when no contextMenu is given. */
+    copyable?: boolean;
+    /** Notified after any copy. kind is "row" or "cell". */
+    onCopy?: (kind: "row" | "cell", row: Row, columnKey?: string) => void;
+    /** Enable drag-to-resize on all columns (per-column `resizable` still wins). */
+    resizable?: boolean;
+    /** Hierarchical rows: each row may carry a children array (see childrenKey). */
+    tree?: boolean;
+    /** Property holding child rows. Default "children". */
+    childrenKey?: string;
+    /** Indent per depth level in px. Default 22. */
+    indentSize?: number;
+    /** Row ids expanded by default in tree mode. */
+    defaultExpandedRowKeys?: Array<string | number>;
+    /** Show a toolbar "Columns" menu to toggle column visibility. */
+    columnSettings?: boolean;
+    /** Enable drag-to-reorder rows (native HTML5 DnD; disabled in tree mode). */
+    rowDraggable?: boolean;
+    /** Called with the reordered rows after a drop. */
+    onReorder?: (rows: Row[], from: number, to: number) => void;
+    /** Commit handler for inline cell edits (enable per column with `editable`). */
+    onCellEdit?: (row: Row, columnKey: string, value: any) => void;
+    /** Optional toolbar title (left side). */
+    title?: ReactNode;
+    /** Custom toolbar content (right side, before Export). */
+    toolbar?: ReactNode;
+    /** Show an "Export CSV" button. Pass { filename, selectedOnly } to configure. */
+    exportable?: boolean | {
+        filename?: string;
+        selectedOnly?: boolean;
+    };
+    /** Render bulk actions in a bar shown while rows are selected. */
+    selectionActions?: (selectedRows: Row[], clear: () => void) => ReactNode;
+    /** Make rows clickable. */
+    onRowClick?: (row: Row) => void;
+    /** Make rows navigate to a URL. */
+    rowHref?: (row: Row) => string;
+    /** Shimmer skeleton rows. */
+    loading?: boolean;
+    loadingRows?: number;
+    /** Custom empty-state node. */
+    empty?: ReactNode;
+    /** Caption above the table. */
+    caption?: ReactNode;
+    /** Footer row content (spans all columns). */
+    footer?: ReactNode;
+    style?: CSSProperties;
+}
+/**
+ * Klun UI Table — full data-grid: sortable/filterable columns, selection,
+ * pagination, expandable & tree rows, density/zebra/sticky, fixed columns,
+ * inline editing, drag resize/reorder, CSV export, copy & context menu.
+ */
+declare function Table<Row = any>({ columns, rows, getRowId, selectable, selected, onSelectRow, onSelectAll, sortable, sort, onSortChange, defaultSort, filters, onFiltersChange, pagination, expandable, density, zebra, stickyHeader, hover, bordered, selectionType, rowStatus, summary, contextMenu, copyable, onCopy, resizable, tree, childrenKey, indentSize, defaultExpandedRowKeys, columnSettings, rowDraggable, onReorder, onCellEdit, title, toolbar, exportable, selectionActions, onRowClick, rowHref, loading, loadingRows, empty, caption, footer, className, style, ...props }: TableProps<Row>): react.JSX.Element;
+
+interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    leadingIcon?: ReactNode;
+    /** Show a dismiss (×) button; receives the click handler. */
+    onDismiss?: () => void;
+    variant?: "stroke" | "gray";
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Tag — rounded-rectangle label, optionally dismissible.
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface TimelineItem {
+    /** Token color name or any CSS color for the node. */
+    color?: "primary" | "gray" | "success" | "error" | "warning" | "information" | (string & {});
+    /** Custom dot node (e.g. an icon) replacing the ring. */
+    dot?: ReactNode;
+    label?: ReactNode;
+    time?: ReactNode;
+    children: ReactNode;
+}
+interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+    items: TimelineItem[];
+    mode?: "left" | "alternate";
+}
+/**
+ * Timeline — vertical sequence of events with colored nodes. Each item carries a
+ * `color` (token name or any CSS color), an optional custom `dot`, a `label`,
+ * a `time`, and body `children`. `mode="alternate"` flips odd rows to the right.
+ */
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TooltipProps {
+    content: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    /** Hover-in delay in ms before showing. Default 200. */
+    delay?: number;
+    /** Suppress the tooltip entirely. */
+    disabled?: boolean;
+    children: ReactNode;
+    /** Style applied to the tooltip bubble. */
+    style?: CSSProperties;
+    /** Class applied to the wrapper. */
+    className?: string;
+}
+/**
+ * Tooltip — hover label wrapping a single trigger child. `style` targets the
+ * tooltip bubble; `side` chooses placement. `ref` forwards to the wrapper.
+ */
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface TreeNode {
+    key: string;
+    title: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+interface TreeProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    treeData: TreeNode[];
+    expandedKeys?: string[];
+    defaultExpandedKeys?: string[];
+    onExpand?: (keys: string[]) => void;
+    selectedKey?: string;
+    onSelect?: (key: string, node: TreeNode) => void;
+    checkable?: boolean;
+    checkedKeys?: string[];
+    onCheck?: (keys: string[]) => void;
+    showLine?: boolean;
+    /** Make the whole row the click target. Default true. */
+    blockNode?: boolean;
+}
+/**
+ * Klun UI Tree — hierarchical list with expand/collapse, single-select and
+ * optional checkboxes (with parent/child cascade). Controlled via
+ * expandedKeys / selectedKey / checkedKeys + their onChange callbacks.
+ * `treeData`: [{ key, title, icon?, disabled?, children? }]
+ */
+declare const Tree: react.ForwardRefExoticComponent<TreeProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    icon?: ReactNode;
+}
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    items: AccordionItem[];
+    defaultOpen?: string;
+    /** Allow multiple panels open at once. */
+    multiple?: boolean;
+}
+/** Klun UI Accordion — stacked expandable panels. */
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+
+type AlertStatus = "information" | "success" | "warning" | "error" | "feature";
+type AlertVariant = "filled" | "light" | "lighter" | "stroke";
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Status color. Default `"information"`. */
+    status?: AlertStatus;
+    /** Surface style. Default `"lighter"`. */
+    variant?: AlertVariant;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    /** Title line. */
+    title?: ReactNode;
+    /** Action row rendered below the body. */
+    action?: ReactNode;
+    /** Renders a dismiss button when provided. */
+    onClose?: () => void;
+    children?: ReactNode;
+}
+/**
+ * Alert — inline message block. Pick a `status` (color) and a `variant`
+ * (filled / light / lighter / stroke surface).
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+type BannerStatus = "information" | "success" | "warning" | "error" | "feature";
+type BannerVariant = "filled" | "lighter";
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Status color. Default `"information"`. */
+    status?: BannerStatus;
+    /** Surface style. Default `"filled"`. */
+    variant?: BannerVariant;
+    /** Leading icon node. */
+    icon?: ReactNode;
+    /** Trailing action node. */
+    action?: ReactNode;
+    /** Renders a dismiss button when provided. */
+    onClose?: () => void;
+    children?: ReactNode;
+}
+/** Banner — full-width page-level announcement bar. */
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+
+type CircularProgressColor = "primary" | "success" | "warning" | "error";
+interface CircularProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
+    value?: number;
+    max?: number;
+    size?: number;
+    stroke?: number;
+    color?: CircularProgressColor;
+    label?: ReactNode;
+    style?: CSSProperties;
+}
+/** Klun UI CircularProgress — ring progress with optional center label. */
+declare const CircularProgress: react.ForwardRefExoticComponent<CircularProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+type GaugeBarColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+type GaugeBarSize = "sm" | "md" | "lg";
+interface GaugeBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    value?: number;
+    max?: number;
+    label?: ReactNode;
+    /** Override the auto "value / max" caption; pass false-y string to customize. */
+    caption?: ReactNode;
+    color?: GaugeBarColor;
+    size?: GaugeBarSize;
+    showValue?: boolean;
+}
+/** Klun UI GaugeBar — labeled usage meter (used / total) with a value caption. */
+declare const GaugeBar: react.ForwardRefExoticComponent<GaugeBarProps & react.RefAttributes<HTMLDivElement>>;
+
+type MessageStatus = "info" | "success" | "warning" | "error" | "loading";
+interface MessageProps extends HTMLAttributes<HTMLDivElement> {
+    status?: MessageStatus;
+    /** Override the status icon (Remix icon class). */
+    icon?: string;
+    children?: ReactNode;
+}
+interface MessageOptions {
+    content?: ReactNode;
+    status?: MessageStatus;
+    icon?: string;
+    /** ms before auto-close; null (or loading) keeps it open. Default 3000. */
+    duration?: number | null;
+    /** Stable key — re-opening updates the existing message (loading → done). */
+    key?: string | number;
+}
+interface MessageApi {
+    open: (opts: MessageOptions | string) => string | number;
+    close: (key: string | number) => void;
+    info: (opts: MessageOptions | string) => string | number;
+    success: (opts: MessageOptions | string) => string | number;
+    warning: (opts: MessageOptions | string) => string | number;
+    error: (opts: MessageOptions | string) => string | number;
+    loading: (opts: MessageOptions | string) => string | number;
+}
+interface UseMessageDefaults {
+    top?: number;
+    duration?: number;
+    max?: number;
+}
+/**
+ * Message — compact single-line status pill (presentational). Pick a `status`
+ * (info / success / warning / error / loading) for the icon + tint. Pair with
+ * `useMessage` for the top-center transient message system.
+ */
+declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * useMessage — antd-style top-center transient messages. Returns `[api, holder]`;
+ * render `{holder}` once, then call `api.success("Saved")` etc. Each option may be
+ * a string or `{ content, status?, icon?, duration?, key? }`.
+ */
+declare function useMessage(defaults?: UseMessageDefaults): [MessageApi, ReactNode];
+
+type NotificationStatus = "default" | "information" | "success" | "warning" | "error" | "loading";
+interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    status?: NotificationStatus;
+    /** Override the status icon (Remix icon class). */
+    icon?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Action buttons row. */
+    actions?: ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    /** When set (ms), shows an auto-dismiss progress bar. */
+    duration?: number;
+}
+/**
+ * Klun UI Notification — corner notification card (presentational). Pair with
+ * `useNotification` for the stacked, auto-dismissing system, or render alone.
+ */
+declare const Notification: react.ForwardRefExoticComponent<NotificationProps & react.RefAttributes<HTMLDivElement>>;
+type NotificationPlacement = "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "top" | "bottom";
+interface NotificationOptions {
+    title?: ReactNode;
+    description?: ReactNode;
+    status?: NotificationStatus;
+    icon?: string;
+    /** ms before auto-close; null to keep open. Defaults to the hook duration. */
+    duration?: number | null;
+    actions?: ReactNode;
+    closable?: boolean;
+    /** Stable key — re-opening with the same key updates the existing toast. */
+    key?: string | number;
+    onClose?: () => void;
+}
+interface NotificationApi {
+    open: (opts: NotificationOptions) => string | number;
+    close: (key: string | number) => void;
+    success: (opts: NotificationOptions | string) => string | number;
+    error: (opts: NotificationOptions | string) => string | number;
+    warning: (opts: NotificationOptions | string) => string | number;
+    info: (opts: NotificationOptions | string) => string | number;
+    loading: (opts: NotificationOptions | string) => string | number;
+}
+interface UseNotificationDefaults {
+    placement?: NotificationPlacement;
+    /** Default auto-dismiss in ms. Default 4500. */
+    duration?: number;
+    /** Max concurrent toasts before the oldest is dropped. Default 5. */
+    max?: number;
+}
+/**
+ * Klun UI useNotification — antd-style imperative API.
+ * Returns [api, holder]; render {holder} once, then call api.success(opts) etc.
+ * Each opts: { title, description, status?, icon?, duration?, actions?, closable?, key?, onClose? }.
+ */
+declare function useNotification(defaults?: UseNotificationDefaults): [NotificationApi, ReactNode];
+
+type ProgressColor = "primary" | "success" | "warning" | "error";
+interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    color?: ProgressColor;
+}
+/** Klun UI ProgressBar — horizontal determinate progress track. */
+declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<HTMLDivElement>>;
+
+type SegmentedProgressColor = "primary" | "success" | "warning" | "error";
+interface SegmentedProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of filled segments. */
+    value?: number;
+    segments?: number;
+    color?: SegmentedProgressColor;
+}
+/** Klun UI SegmentedProgress — multi-segment bar (strength meters, steps). */
+declare const SegmentedProgress: react.ForwardRefExoticComponent<SegmentedProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, "style"> {
+    width?: number | string;
+    height?: number | string;
+    circle?: boolean;
+    style?: CSSProperties;
+}
+/** Klun UI Skeleton — shimmering loading placeholder. */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>;
+
+type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+    /** Named size or pixel number. */
+    size?: SpinnerSize | number;
+    /** Stroke width override. */
+    thickness?: number;
+    /** Arc color (defaults to currentColor). */
+    color?: string;
+    /** Track ring color behind the arc. */
+    track?: string;
+    /** Accessible label. */
+    label?: string;
+}
+/**
+ * Spinner — indeterminate loading indicator. Inherits `currentColor` by default
+ * so it tints to its surrounding text/button color.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+type ToastStatus = "information" | "success" | "warning" | "error";
+interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Status color of the icon badge. Default `"success"`. */
+    status?: ToastStatus;
+    /** Icon node rendered in the badge. */
+    icon?: ReactNode;
+    /** Title line. */
+    title?: ReactNode;
+    /** Action row rendered below the body. */
+    action?: ReactNode;
+    /** Renders a dismiss button when provided. */
+    onClose?: () => void;
+    /** Tint the whole card by status (not just the icon badge). */
+    rich?: boolean;
+    children?: ReactNode;
+}
+/** Toast — transient notification card (presentational). */
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** Convenience action — rendered as a button that runs `onClick` and dismisses. */
+interface ToastAction {
+    label: ReactNode;
+    onClick?: () => void;
+    /** Dismiss the toast after the action runs. Default `true`. */
+    dismiss?: boolean;
+}
+interface ToastOptions {
+    /** Stable id. Calling `toast` again with the same id updates that toast. */
+    id?: string | number;
+    /** Title line shown above the message. */
+    title?: ReactNode;
+    /** Status color + default icon. Default `"information"`. */
+    status?: ToastStatus;
+    /** Override the default status icon. */
+    icon?: ReactNode;
+    /** ms before auto-dismiss. `0` / `Infinity` keep it until dismissed. */
+    duration?: number;
+    /** Action row — a node, or `{ label, onClick }` rendered as a button that dismisses on click. */
+    action?: ReactNode | ToastAction;
+    /** Tint the whole card by status. Overrides the Toaster's `richColors`. */
+    rich?: boolean;
+}
+interface ToastPromiseMessages<T> {
+    loading: ReactNode;
+    success: ReactNode | ((data: T) => ReactNode);
+    error: ReactNode | ((err: unknown) => ReactNode);
+}
+type ToastFn = (message: ReactNode, opts?: ToastOptions) => string | number;
+/**
+ * Imperative toast API — call from anywhere (`toast("Saved")`,
+ * `toast.success(...)`, `toast.dismiss(id)`). Render a single `<Toaster />`
+ * near the app root to display them.
+ */
+declare const toast: ToastFn & {
+    success: ToastFn;
+    error: ToastFn;
+    warning: ToastFn;
+    info: ToastFn;
+    /** Dismiss one toast by id, or all when called with no argument. */
+    dismiss: (id?: string | number) => void;
+    /** Show a loading toast that updates to success/error when the promise settles. */
+    promise: <T>(p: Promise<T>, msgs: ToastPromiseMessages<T>, opts?: ToastOptions) => Promise<T>;
+};
+interface ToasterProps {
+    /** Corner the stack is anchored to. Default `"bottom-right"`. */
+    position?: ToastPosition;
+    /** Default auto-dismiss duration (ms) for toasts that don't set their own. Default `4000`. */
+    duration?: number;
+    /** Max toasts shown at once; extras queue and appear as visible ones leave. */
+    max?: number;
+    /** Tint every toast card by status (per-toast `rich` overrides this). */
+    richColors?: boolean;
+    /** Space between stacked toasts, px. Default `12`. */
+    gap?: number;
+    /** Distance from the viewport edge, px. Default `16`. */
+    offset?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Toaster — renders the active toasts in a fixed, portaled stack. Mount it once
+ * (inside your ConfigProvider, so toasts inherit its locale/theme/dir). Toasts
+ * auto-dismiss after their `duration` and pause while the pointer is over the stack.
+ */
+declare function Toaster({ position, duration, max, richColors, gap, offset, className, style, }: ToasterProps): react.ReactPortal | null;
+declare namespace Toaster {
+    var displayName: string;
+}
+
+interface AutoCompleteOption {
+    value: string;
+    label?: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+}
+interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect"> {
+    options: (AutoCompleteOption | string)[];
+    value?: string;
+    onChange?: (value: string) => void;
+    onSelect?: (value: string, option: AutoCompleteOption) => void;
+    placeholder?: string;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    /** Filter options by the typed text (default true). Set false for async lists. */
+    filter?: boolean;
+    leadingIcon?: ReactNode;
+    emptyText?: ReactNode;
+    maxVisible?: number;
+}
+/**
+ * AutoComplete — text input with a filtered suggestion dropdown + keyboard nav.
+ * `className`/`style` target the root wrapper; `ref` forwards to the `<input>`.
+ */
+declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
+
+interface CascaderOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    children?: CascaderOption[];
+}
+interface CascaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    options: CascaderOption[];
+    value?: string[];
+    onChange?: (path: string[]) => void;
+    placeholder?: string;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    error?: boolean;
+    /** Joins the label path in the trigger. */
+    separator?: string;
+    /** Emit onChange on every level, not just leaves. */
+    changeOnSelect?: boolean;
+}
+/**
+ * Cascader — multi-column drill-down selector for hierarchical data
+ * (region, category…). Controlled via `value` (array of keys) / `onChange`.
+ * `options`: [{ value, label, disabled?, children? }]. `ref` forwards to the root.
+ */
+declare const Cascader: react.ForwardRefExoticComponent<CascaderProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CharacterCounterProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Current character count. Default `0`. */
+    value?: number;
+    /** Maximum allowed count. Default `100`. */
+    max?: number;
+}
+/**
+ * CharacterCounter — "current / max" count that turns into an error tone once
+ * the limit is exceeded. Pair under an Input or Textarea.
+ */
+declare const CharacterCounter: react.ForwardRefExoticComponent<CharacterCounterProps & react.RefAttributes<HTMLSpanElement>>;
+
+type CheckboxSize = "small" | "medium" | "large";
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** Red error ring. */
+    error?: boolean;
+    size?: CheckboxSize;
+    onChange?: (checked: boolean) => void;
+    style?: CSSProperties;
+}
+/** Klun UI Checkbox — square boolean control with checked / indeterminate states. */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type CheckboxCardAlign = "start" | "center";
+interface CheckboxCardProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, "onChange" | "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    /** Vertical alignment of the row. Default `"start"`. */
+    align?: CheckboxCardAlign;
+    children?: ReactNode;
+}
+/**
+ * CheckboxCard — selectable bordered card wrapping a checkbox, title,
+ * description and optional leading icon. Use in checkbox-group choice grids.
+ * `ref` forwards to the `<input>`.
+ */
+declare const CheckboxCard: react.ForwardRefExoticComponent<CheckboxCardProps & react.RefAttributes<HTMLInputElement>>;
+
+type ColorDotSize = "sm" | "md" | "lg";
+interface ColorDotProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /** Any CSS color or token var() for the swatch fill. Default `var(--klun-primary-base)`. */
+    color?: string;
+    selected?: boolean;
+    size?: ColorDotSize;
+    disabled?: boolean;
+    /** Show a white check when selected. Default `true`. */
+    showCheck?: boolean;
+}
+/** ColorDot — selectable color swatch with a selected ring + check. */
+declare const ColorDot: react.ForwardRefExoticComponent<ColorDotProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    /** Currently selected hex color. Default `"#335CFF"`. */
+    value?: string;
+    /** Called with the newly chosen hex color. */
+    onChange?: (hex: string) => void;
+    /** Swatch colors to render. */
+    swatches?: string[];
+    /** Style applied to the picker root. */
+    style?: CSSProperties;
+}
+/** ColorPicker — swatch grid + hex input. */
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+type ColorSliderSize = "small" | "medium" | "large";
+interface ColorSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Position 0–100. Default `50`. */
+    value?: number;
+    onChange?: (value: number) => void;
+    /** "hue", "alpha", or a custom CSS gradient string for the track. Default `"hue"`. */
+    track?: "hue" | "alpha" | string;
+    /** Base color used by the alpha track. Default `var(--klun-primary-base)`. */
+    color?: string;
+    disabled?: boolean;
+    /** Track size. Default `"medium"`. */
+    size?: ColorSliderSize;
+}
+/**
+ * ColorSlider — single-channel slider (hue, alpha or a custom gradient) with a
+ * draggable thumb. Controlled via `value` (0–100) / `onChange`. `ref` forwards
+ * to the track element.
+ */
+declare const ColorSlider: react.ForwardRefExoticComponent<ColorSliderProps & react.RefAttributes<HTMLDivElement>>;
+
+type CompactSelectSize = "xsmall" | "small" | "medium";
+/** Visual chrome: bordered (stroke), borderless (ghost) or weak gray fill. */
+type CompactSelectAppearance = "stroke" | "ghost" | "weak";
+interface CompactSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "style"> {
+    size?: CompactSelectSize;
+    /** Visual chrome: bordered (stroke), borderless (ghost) or weak gray fill. */
+    appearance?: CompactSelectAppearance;
+    leadingIcon?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    /** <option> elements. */
+    children?: ReactNode;
+    /** Style applied to the outer wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * CompactSelect — small toolbar/filter dropdown with a fully custom, themed
+ * dropdown (not the native OS menu). Use for sort, period, density pickers.
+ * Keeps the familiar `<option>` children API and native form semantics: a
+ * visually-hidden `<select>` carries the value for form submission, receives
+ * `name`/native `onChange`, and is what `ref` forwards to. Controlled via
+ * `value` or uncontrolled via `defaultValue`. `className`/`style` target the
+ * wrapper.
+ */
+declare const CompactSelect: react.ForwardRefExoticComponent<CompactSelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+type CompactSelectForInputSide = "leading" | "trailing";
+type CompactSelectForInputSize = "small" | "medium" | "large";
+interface CompactSelectForInputProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "style"> {
+    /** Which edge it attaches to — decides which side draws the divider. */
+    side?: CompactSelectForInputSide;
+    size?: CompactSelectForInputSize;
+    leadingIcon?: ReactNode;
+    disabled?: boolean;
+    /** <option> elements. */
+    children?: ReactNode;
+    /** Style applied to the outer wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * CompactSelectForInput — borderless inline unit selector designed to butt up
+ * against an Input on the left or right (currency, country code, unit). Render
+ * it inside an Input's leading/trailing slot; it draws its own divider. Uses a
+ * fully custom, themed dropdown (not the native OS menu): a visually-hidden
+ * `<select>` carries the value for form submission, receives `name`/native
+ * `onChange`, and is what `ref` forwards to. The trigger always shows a value
+ * (no placeholder) — the current selection or the first option.
+ */
+declare const CompactSelectForInput: react.ForwardRefExoticComponent<CompactSelectForInputProps & react.RefAttributes<HTMLSelectElement>>;
+
+type CounterInputSize = "small" | "medium" | "large";
+interface CounterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: CounterInputSize;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    /** Optional unit shown after the value, e.g. "kg". */
+    suffix?: ReactNode;
+}
+/**
+ * CounterInput — numeric stepper with decrement / increment controls.
+ * `ref` forwards to the root wrapper.
+ */
+declare const CounterInput: react.ForwardRefExoticComponent<CounterInputProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    value?: Date | string | null;
+    onChange?: (date: Date) => void;
+    style?: CSSProperties;
+}
+/** Klun UI DatePicker — inline month calendar with single-date selection. */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    start?: Date | string | null;
+    end?: Date | string | null;
+    onChange?: (range: DateRange) => void;
+    style?: CSSProperties;
+}
+/** Klun UI DateRangePicker — inline calendar selecting a start–end range. */
+declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+type DigitInputSize = "small" | "medium" | "large";
+interface DigitInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    error?: boolean;
+    disabled?: boolean;
+    /** Cell size. Default `"medium"`. */
+    size?: DigitInputSize;
+    style?: CSSProperties;
+}
+/**
+ * DigitInput — segmented OTP / PIN code input. Keeps a ref to each cell for
+ * focus management; `ref` forwards to the wrapping `<div>`.
+ */
+declare const DigitInput: react.ForwardRefExoticComponent<DigitInputProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
+    /** Called with the dropped/selected files. */
+    onFiles?: (files: File[]) => void;
+    /** Helper text under the prompt. */
+    hint?: ReactNode;
+    /** Style applied to the dropzone root. */
+    style?: CSSProperties;
+}
+/**
+ * FileUpload — drag-and-drop drop zone. Click or drop files to upload;
+ * `onFiles` receives the selected `File[]`. Drag-over state is exposed via
+ * `data-dragover` and styled in CSS.
+ */
+declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
+
+type NamePath = string | (string | number)[];
+interface FormRule {
+    required?: boolean;
+    message?: string;
+    /** String length (or array length) bounds; for number/integer types these bound the value. */
+    min?: number;
+    max?: number;
+    /** Exact string length. */
+    len?: number;
+    /** Reject whitespace-only strings. */
+    whitespace?: boolean;
+    pattern?: RegExp;
+    /** Value must be one of these. */
+    enum?: any[];
+    type?: "email" | "url" | "number" | "integer";
+    /** Normalize the value before checking (e.g. trim). */
+    transform?: (value: any) => any;
+    /** Sync (string|null) or async (Promise<string|null>) validator. Return a message to fail. */
+    validator?: (value: any, allValues: Record<string, any>) => string | null | undefined | Promise<string | null | undefined>;
+}
+/** Rules may be a static array or computed from the current form values. */
+type Rules = FormRule[] | ((allValues: Record<string, any>) => FormRule[]);
+interface FormInstance {
+    values: Record<string, any>;
+    errors: Record<string, string | undefined>;
+    touched: Record<string, boolean>;
+    /** True while an async validator is running, keyed by field. */
+    validating: Record<string, boolean>;
+    setFieldValue: (name: NamePath, value: any) => void;
+    setFieldTouched: (name: NamePath) => void;
+    /** Imperatively set error messages: { [name]: message }. */
+    setFields: (map: Record<string, string | undefined>) => void;
+    setValues: (v: Record<string, any>) => void;
+    getFieldValue: (name: NamePath) => any;
+    getFieldsValue: () => Record<string, any>;
+    /** Validate one field; resolves to its error message or null. */
+    validateField: (name: NamePath) => Promise<string | null | undefined>;
+    /** Validate all fields; resolves true when valid (scrolls to the first error). */
+    validate: () => Promise<boolean>;
+    /** Scroll to + focus a field. */
+    scrollToField: (name: NamePath) => void;
+    reset: () => void;
+    /** @deprecated use FormItem rules; kept for back-compat. */
+    registerRules: (name: NamePath, rules: FormRule[]) => void;
+}
+interface UseFormOptions {
+    initialValues?: Record<string, any>;
+}
+interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    form: FormInstance;
+    onFinish?: (values: Record<string, any>) => void;
+    onFinishFailed?: (errors: Record<string, string | undefined>) => void;
+    layout?: "vertical" | "horizontal";
+    children?: ReactNode;
+}
+interface FormItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Field name; string, dotted path ("user.email"), array path, or a numeric
+     *  index when used inside a `FormList` render (relative to the list). */
+    name?: NamePath | number;
+    label?: ReactNode;
+    rules?: Rules;
+    required?: boolean;
+    /** Re-validate this field when any of these fields change (after it's been touched). */
+    dependencies?: NamePath[];
+    /** When to validate this field. Default "onChange". */
+    validateTrigger?: "onChange" | "onBlur";
+    /** Helper text shown when there's no error. */
+    help?: ReactNode;
+    /** A single control; receives value/onChange/error cloned in. */
+    children?: ReactElement;
+}
+interface FormListField {
+    key: string;
+    name: number;
+    path: (string | number)[];
+}
+interface FormListOperations {
+    add: (defaultValue?: any) => void;
+    remove: (index: number) => void;
+    move: (from: number, to: number) => void;
+}
+interface FormListProps {
+    name: NamePath;
+    children: (fields: FormListField[], ops: FormListOperations) => ReactNode;
+}
+/**
+ * Klun UI useForm — antd-grade form store: nested name paths, async + dependency
+ * validation, per-field triggers, dynamic lists, and scroll-to-error.
+ */
+declare function useForm(opts?: UseFormOptions): FormInstance;
+/**
+ * Klun UI Form — layout + validation container. Async submit aware.
+ */
+declare function Form({ form, onFinish, onFinishFailed, layout, children, className, ...props }: FormProps): react.JSX.Element;
+declare namespace Form {
+    var displayName: string;
+    var useForm: typeof useForm;
+    var Item: typeof FormItem;
+    var List: typeof FormList;
+}
+/**
+ * Klun UI FormItem — labels a field, wires value/onChange, shows the error.
+ * Supports nested `name` paths, `rules` (sync/async/fn-of-values), `dependencies`,
+ * and `validateTrigger`. With no `children` it renders nothing (use inside Form.List).
+ */
+declare function FormItem({ name, label, rules, required, help, dependencies, validateTrigger, children, className, ...props }: FormItemProps): react.JSX.Element;
+declare namespace FormItem {
+    var displayName: string;
+}
+/**
+ * Klun UI FormList — dynamic array fields (antd Form.List).
+ * <FormList name="users">{(fields, { add, remove, move }) => ...}</FormList>
+ * Each field is { key, name, path }; render a FormItem with name={field.name} inside.
+ */
+declare function FormList({ name, children }: FormListProps): react.JSX.Element;
+declare namespace FormList {
+    var displayName: string;
+}
+
+interface HintProps extends HTMLAttributes<HTMLSpanElement> {
+    error?: boolean;
+    icon?: ReactNode;
+}
+/** Klun UI HintText — helper / error text beneath a field. */
+declare const Hint: react.ForwardRefExoticComponent<HintProps & react.RefAttributes<HTMLSpanElement>>;
+
+type ImageUploadShape = "circle" | "square";
+interface ImageUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
+    /** Current image URL; shows the preview when set. */
+    src?: string;
+    /** Preview shape. Default `"circle"`. */
+    shape?: ImageUploadShape;
+    /** Preview edge length in px. Default `96`. */
+    size?: number;
+    label?: ReactNode;
+    hint?: ReactNode;
+    onPick?: (file: File | null, e: ChangeEvent<HTMLInputElement>) => void;
+    onRemove?: () => void;
+    disabled?: boolean;
+    /** Style applied to the root element. */
+    style?: CSSProperties;
+}
+/**
+ * ImageUpload — avatar/image picker with a circular or square preview, a
+ * change overlay and a remove control. Click or drop an image to pick; the
+ * drag-over state is exposed via `data-dragover` and styled in CSS.
+ */
+declare const ImageUpload: react.ForwardRefExoticComponent<ImageUploadProps & react.RefAttributes<HTMLDivElement>>;
+
+type InlineInputTone = "strong" | "sub" | "accent";
+type InlineInputWeight = "regular" | "medium";
+interface InlineInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    tone?: InlineInputTone;
+    weight?: InlineInputWeight;
+    error?: boolean;
+    leadingIcon?: ReactNode;
+    /** Class applied to the outer wrapper. */
+    className?: string;
+    /** Style applied to the outer wrapper. */
+    style?: CSSProperties;
+    /** Style applied to the inner `<input>`. */
+    inputStyle?: CSSProperties;
+}
+/**
+ * InlineInput — borderless text input that reads as editable text in a row or
+ * table cell. Shows a soft underline on focus instead of a box. `className`/
+ * `style` target the wrapper; `ref` forwards to the `<input>`.
+ */
+declare const InlineInput: react.ForwardRefExoticComponent<InlineInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type InlineSelectTone = "sub" | "strong" | "accent";
+type InlineSelectWeight = "regular" | "medium";
+interface InlineSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "style"> {
+    /** Text color role. */
+    tone?: InlineSelectTone;
+    weight?: InlineSelectWeight;
+    leadingIcon?: ReactNode;
+    disabled?: boolean;
+    /** <option> elements. */
+    children?: ReactNode;
+    /** Style applied to the outer wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * InlineSelect — borderless, text-styled dropdown that sits inside a sentence
+ * or label row. Backed by a fully custom, themed dropdown (not the native OS
+ * menu). Keeps the familiar `<option>` children API and native form semantics:
+ * a visually-hidden `<select>` carries the value for form submission, receives
+ * `name`/`required`/native `onChange`, and is what `ref` forwards to. With no
+ * selection the trigger shows the first option's label (mirrors a native
+ * select's default). `className`/`style` target the wrapper.
+ */
+declare const InlineSelect: react.ForwardRefExoticComponent<InlineSelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+type FieldSize = "small" | "medium" | "large";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Default `"medium"`. */
+    size?: FieldSize;
+    /** Icon node before the field. */
+    leadingIcon?: ReactNode;
+    /** Icon node after the field. */
+    trailingIcon?: ReactNode;
+    /** Arbitrary node before the field (e.g. an inline Select). */
+    leadingNode?: ReactNode;
+    /** Arbitrary node after the field. */
+    trailingNode?: ReactNode;
+    /** Show the error ring. */
+    error?: boolean;
+    /** Read-only field — selectable text, no editing, gray surface. */
+    readOnly?: boolean;
+    /** Show a trailing spinner. */
+    loading?: boolean;
+    /** Show a clear (×) button when the field has a value. */
+    clearable?: boolean;
+    /** Called when the clear button is pressed. */
+    onClear?: () => void;
+    /** Class applied to the outer field wrapper (the bordered surface). */
+    className?: string;
+    /** Style applied to the outer field wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Input — text field with optional leading/trailing icons or nodes.
+ * `className`/`style` target the wrapper; `ref` forwards to the `<input>`.
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+    sublabel?: ReactNode;
+    disabled?: boolean;
+}
+/** Klun UI Label — field label with optional required asterisk + sublabel. */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+type PasswordStrengthLevel = "weak" | "fair" | "good" | "strong";
+interface PasswordStrengthProps extends HTMLAttributes<HTMLDivElement> {
+    /** Named strength level — sets lit bars + color + caption. */
+    strength?: PasswordStrengthLevel;
+    /** Or a raw 0–4 score (overrides `strength` for lit-bar count). */
+    score?: number;
+    bars?: number;
+    showLabel?: boolean;
+    /** Override the auto caption text. */
+    label?: ReactNode;
+}
+/**
+ * PasswordStrength — 4-segment meter with a strength caption. Pass either
+ * `strength` ("weak" | "fair" | "good" | "strong") or a raw 0–4 `score`. The
+ * resolved level is exposed via `data-level` and drives the bar/caption color.
+ */
+declare const PasswordStrength: react.ForwardRefExoticComponent<PasswordStrengthProps & react.RefAttributes<HTMLDivElement>>;
+
+type RadioSize = "small" | "medium" | "large";
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type" | "size"> {
+    checked?: boolean;
+    disabled?: boolean;
+    /** Red error ring. */
+    error?: boolean;
+    /** Control size. Default `"medium"`. */
+    size?: RadioSize;
+    name?: string;
+    value?: string;
+    onChange?: (value: string | true) => void;
+    style?: CSSProperties;
+}
+/** Klun UI Radio — circular single-select control. */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+type RadioCardAlign = "start" | "center";
+interface RadioCardProps extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange" | "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    value: string;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+    price?: ReactNode;
+    unit?: ReactNode;
+    /** Vertical alignment of the row. Default `"start"`. */
+    align?: RadioCardAlign;
+    children?: ReactNode;
+}
+/**
+ * RadioCard — single-select bordered card wrapping a radio control, title,
+ * description, optional leading icon and trailing price/unit. The single-select
+ * counterpart to CheckboxCard; pass a shared `name` to group cards.
+ * `ref` forwards to the `<input type="radio">`.
+ */
+declare const RadioCard: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLInputElement>>;
+
+/** Track/thumb scale. */
+type RangeSliderSize = "sm" | "md" | "lg";
+interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled value as `[low, high]`. */
+    value?: [number, number];
+    /** Uncontrolled initial value. Default `[20, 70]`. */
+    defaultValue?: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Track/thumb scale. Default `"md"`. */
+    size?: RangeSliderSize;
+    disabled?: boolean;
+    onChange?: (value: [number, number]) => void;
+    style?: CSSProperties;
+}
+/**
+ * RangeSlider — dual-handle range selector. Two overlaid native range inputs
+ * drive the low/high values (controlled or uncontrolled); the visible track,
+ * fill and thumbs are rendered as elements positioned via the
+ * `--klun-range-slider-lo` / `--klun-range-slider-hi` custom properties.
+ * `ref` forwards to the root element.
+ */
+declare const RangeSlider: react.ForwardRefExoticComponent<RangeSliderProps & react.RefAttributes<HTMLDivElement>>;
+
+interface RichEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Ids of active formatting buttons (bold, italic, h1, ul, …). */
+    active?: string[];
+    /** Called with the button id when a tool is pressed. */
+    onAction?: (id: string) => void;
+}
+/** RichEditorToolbar — formatting toolbar for a text editor (presentational). */
+declare const RichEditorToolbar: react.ForwardRefExoticComponent<RichEditorToolbarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "style"> {
+    size?: "small" | "medium" | "large";
+    placeholder?: string;
+    leadingIcon?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    /** Replace the chevron with a spinner. */
+    loading?: boolean;
+    /** Style applied to the outer field wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Select — single-select with a fully custom, themed dropdown (not the native
+ * OS menu). Keeps the familiar `<option>` children API and native form
+ * semantics: a visually-hidden `<select>` carries the value for form submission,
+ * receives `name`/`required`/native `onChange`, and is what `ref` forwards to.
+ * Controlled via `value` or uncontrolled via `defaultValue`.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface SelectMenuOption {
+    value: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+type SelectMenuSize = "small" | "medium" | "large";
+interface SelectMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    options: SelectMenuOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    size?: SelectMenuSize;
+    leadingIcon?: ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    /** Side the popup aligns to. */
+    align?: "left" | "right";
+    /** Style applied to the outer wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * SelectMenu — custom, fully-styled single-select with a popup panel. Unlike
+ * the native-backed Select, options can carry icons + descriptions and the
+ * selected row shows a check. Controlled via `value` / `onChange`. `ref`
+ * forwards to the trigger `<button>`.
+ */
+declare const SelectMenu: react.ForwardRefExoticComponent<SelectMenuProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SliderSize = "small" | "medium" | "large";
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "style" | "size"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    /** Track size. Default `"medium"`. */
+    size?: SliderSize;
+    style?: CSSProperties;
+}
+/**
+ * Slider — single-thumb range control with a filled track. The filled portion is
+ * driven by the `--klun-slider-value` custom property; `ref` forwards to the `<input>`.
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+type SwitchSize = "small" | "medium" | "large";
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "size"> {
+    checked?: boolean;
+    disabled?: boolean;
+    /** Control size. Default `"medium"`. */
+    size?: SwitchSize;
+    onChange?: (checked: boolean) => void;
+    style?: CSSProperties;
+}
+/** Klun UI Switch — on/off toggle. */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+type TextareaSize = "small" | "medium" | "large";
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
+    error?: boolean;
+    disabled?: boolean;
+    /** Control size. Default `"medium"`. */
+    size?: TextareaSize;
+    rows?: number;
+    /** Style applied to the outer field wrapper. */
+    style?: CSSProperties;
+}
+/**
+ * Textarea — multiline text field. The wrapper holds the border / focus-within
+ * ring; `className`/`style` target the wrapper and `ref` forwards to the `<textarea>`.
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface TimePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    /** 24-hour "HH:MM". */
+    value?: string;
+    onChange?: (value: string) => void;
+    style?: CSSProperties;
+}
+/** Klun UI TimePicker — hour / minute / meridiem selector. */
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+type CardVariant = "stroke" | "shadow" | "flat";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Surface treatment. Default `"stroke"`. */
+    variant?: CardVariant;
+    /** Inner padding (number → px). Defaults to 16px via CSS. */
+    padding?: number | string;
+    children?: ReactNode;
+}
+/** Card — elevated/outlined surface container. */
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+/** A scalar value, or per-breakpoint values (`{ xs, sm, md, lg, xl, xxl }`). */
+type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+/** A single gutter value, or per-breakpoint values. */
+type Gutter = Responsive<number>;
+type RowJustify = "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly";
+type RowAlign = "top" | "middle" | "bottom" | "stretch";
+interface RowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Spacing between columns. `number` → horizontal px; `[h, v]` → [horizontal, vertical] px.
+     *  Each value may be a per-breakpoint object, e.g. `{ xs: 8, md: 24 }`. Default `0`. */
+    gutter?: Gutter | [Gutter, Gutter];
+    /** `justify-content` of the flex row. Accepts a per-breakpoint object. */
+    justify?: Responsive<RowJustify>;
+    /** `align-items` of the flex row. Accepts a per-breakpoint object. */
+    align?: Responsive<RowAlign>;
+    /** Wrap columns onto multiple lines. Default `true`. */
+    wrap?: boolean;
+    children?: ReactNode;
+}
+/** Klun UI Row — flex container for a 24-column responsive grid. */
+declare const Row: react.ForwardRefExoticComponent<RowProps & react.RefAttributes<HTMLDivElement>>;
+/** Per-breakpoint settings, or a bare `number` meaning `span` at that breakpoint. */
+type ColSize = number | {
+    span?: number;
+    offset?: number;
+    order?: number;
+    push?: number;
+    pull?: number;
+};
+interface ColProps extends HTMLAttributes<HTMLDivElement> {
+    /** Columns to span, 0–24. `0` hides the column. */
+    span?: number;
+    /** Columns to push the column to the right. */
+    offset?: number;
+    /** Flex order. */
+    order?: number;
+    /** Columns the column is moved to the right (relative positioning). */
+    push?: number;
+    /** Columns the column is moved to the left (relative positioning). */
+    pull?: number;
+    /** `flex` layout style; overrides span/max-width when set. */
+    flex?: string | number;
+    /** `<576px` (also the base). */
+    xs?: ColSize;
+    /** `≥576px`. */
+    sm?: ColSize;
+    /** `≥768px`. */
+    md?: ColSize;
+    /** `≥992px`. */
+    lg?: ColSize;
+    /** `≥1200px`. */
+    xl?: ColSize;
+    /** `≥1600px`. */
+    xxl?: ColSize;
+    children?: ReactNode;
+}
+/** Klun UI Col — a 24-column grid cell with per-breakpoint sizing. */
+declare const Col: react.ForwardRefExoticComponent<ColProps & react.RefAttributes<HTMLDivElement>>;
+/** Map of which breakpoints currently match. */
+type ScreenMap = Partial<Record<Breakpoint, boolean>>;
+/**
+ * useBreakpoint — reactive map of which breakpoints currently match, e.g.
+ * `{ xs: false, sm: true, md: true, ... }`. Mirrors Ant Design's `useBreakpoint`.
+ */
+declare function useBreakpoint(): ScreenMap;
+/**
+ * Grid — namespace bundling the 24-column grid primitives so consumers can write
+ * `<Grid.Row><Grid.Col span={12} /></Grid.Row>`. `Row` and `Col` remain
+ * available as standalone named exports too.
+ */
+declare const Grid: {
+    Row: react.ForwardRefExoticComponent<RowProps & react.RefAttributes<HTMLDivElement>>;
+    Col: react.ForwardRefExoticComponent<ColProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface LayoutHeaderProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** Layout.Header — top band of the app shell. */
+declare const LayoutHeader: react.ForwardRefExoticComponent<LayoutHeaderProps & react.RefAttributes<HTMLElement>>;
+interface LayoutContentProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** Layout.Content — flexible main area. */
+declare const LayoutContent: react.ForwardRefExoticComponent<LayoutContentProps & react.RefAttributes<HTMLElement>>;
+interface LayoutFooterProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** Layout.Footer — bottom band of the app shell. */
+declare const LayoutFooter: react.ForwardRefExoticComponent<LayoutFooterProps & react.RefAttributes<HTMLElement>>;
+type SiderTheme = "light" | "dark";
+interface SiderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Expanded width in px. Default `200`. */
+    width?: number;
+    /** Width in px when collapsed. Default `80`. */
+    collapsedWidth?: number;
+    /** Show a trigger to toggle collapsed state. */
+    collapsible?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Fired whenever the collapsed state changes. */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Surface theme. Default `"dark"`. */
+    theme?: SiderTheme;
+    /** Custom trigger node. Pass `null` to hide the default trigger. */
+    trigger?: ReactNode | null;
+    /** Reverse the default trigger arrow direction. */
+    reverseArrow?: boolean;
+    children?: ReactNode;
+}
+/** Layout.Sider — collapsible side rail. */
+declare const LayoutSider: react.ForwardRefExoticComponent<SiderProps & react.RefAttributes<HTMLDivElement>>;
+interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+interface LayoutComponent extends React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>> {
+    Header: typeof LayoutHeader;
+    Sider: typeof LayoutSider;
+    Content: typeof LayoutContent;
+    Footer: typeof LayoutFooter;
+}
+/** Layout — app-shell container. Lays out children as a column unless it has a
+ *  direct Sider child, in which case it becomes a row. */
+declare const Layout: LayoutComponent;
+
+/** Per-breakpoint column counts. Each key is optional; the active breakpoint
+ *  falls back to the next-smaller defined value. */
+interface MasonryBreakpoints {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+}
+type MasonryColumns = number | MasonryBreakpoints;
+/** `[horizontal, vertical]` gutter, or a single number applied to both. */
+type MasonryGutter = number | [number, number];
+interface MasonryProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
+    /** Column count — a fixed number or a responsive breakpoint map. Default `3`. */
+    columns?: MasonryColumns;
+    /** Gutter in px: a single number, or `[horizontal, vertical]`. Default `16`. */
+    gutter?: MasonryGutter;
+    /** Tiles, one per direct child. Ignored when `items` is provided. */
+    children?: ReactNode;
+    /** Data-driven alternative to `children`. */
+    items?: T[];
+    /** Render a tile for each `items` entry. */
+    itemRender?: (item: T, index: number) => ReactNode;
+    /** Stable key for each `items` entry. */
+    itemKey?: (item: T, index: number) => string | number;
+}
+/**
+ * Masonry — multi-column waterfall that balances columns by measured height:
+ * each tile is placed into the currently shortest column (antd-style), so tiles
+ * flow in source order across columns rather than column-major. Re-balances on
+ * resize and when tile heights change. Before measurement (and in SSR), tiles
+ * fall back to a round-robin distribution.
+ */
+declare function Masonry<T = unknown>({ columns, gutter, children, items, itemRender, itemKey, className, style, ...props }: MasonryProps<T>): react.JSX.Element;
+declare namespace Masonry {
+    var displayName: string;
+}
+
+type SpaceSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | number;
+interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "row" | "column";
+    size?: SpaceSize;
+    align?: CSSProperties["alignItems"];
+    justify?: CSSProperties["justifyContent"];
+    wrap?: boolean;
+    /** Node rendered between each child (e.g. a divider). */
+    split?: ReactNode;
+    children?: ReactNode;
+}
+/** Klun UI Space — inline spacing primitive with token-based gap. */
+declare const Space: react.ForwardRefExoticComponent<SpaceProps & react.RefAttributes<HTMLDivElement>>;
+
+type FlexGap = "small" | "middle" | "large";
+interface FlexProps extends HTMLAttributes<HTMLElement> {
+    /** Lay children out in a column (`flex-direction: column`). Default `false`. */
+    vertical?: boolean;
+    /** `flex-wrap`. A boolean is accepted for convenience (`true` → `wrap`). Default `nowrap`. */
+    wrap?: CSSProperties["flexWrap"] | boolean;
+    /** `justify-content`. Default `normal`. */
+    justify?: CSSProperties["justifyContent"];
+    /** `align-items`. Default `normal`. */
+    align?: CSSProperties["alignItems"];
+    /** `flex` shorthand. Default `normal`. */
+    flex?: CSSProperties["flex"];
+    /** Gap between items: a preset (`small`/`middle`/`large`), a number (px) or any CSS length. */
+    gap?: FlexGap | number | string;
+    /** Element/component to render. Default `"div"`. */
+    component?: ElementType;
+    children?: ReactNode;
+}
+/**
+ * Flex — flexbox layout primitive. Mirrors Ant Design's `<Flex>`:
+ * `vertical`, `wrap`, `justify`, `align`, `flex`, preset `gap` and a
+ * polymorphic `component`. For evenly-gapped stacks of fixed items prefer
+ * `Space`; for two-dimensional layouts use `Grid`.
+ */
+declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLElement>>;
+
+type SplitterLayout = "horizontal" | "vertical";
+interface SplitterPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Initial size — number (px) or string ("30%" / "200px"). */
+    defaultSize?: number | string;
+    /** Controlled size — number (px) or string. */
+    size?: number | string;
+    /** Minimum size the panel may shrink to (px or "%"). */
+    min?: number | string;
+    /** Maximum size the panel may grow to (px or "%"). */
+    max?: number | string;
+    /** Show collapse buttons on the adjacent bar. `true` = both directions. */
+    collapsible?: boolean | {
+        start?: boolean;
+        end?: boolean;
+    };
+    /** Whether the bar AFTER this panel can resize. Default `true`. */
+    resizable?: boolean;
+    children?: ReactNode;
+}
+interface SplitterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Panel arrangement. `"horizontal"` = side by side (resize along X). Default. */
+    layout?: SplitterLayout;
+    /** Fired continuously during a drag with the live panel sizes (percentages). */
+    onResize?: (sizes: number[]) => void;
+    /** Fired once a drag/keyboard resize settles, with the final sizes (percentages). */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** `Splitter.Panel` children. */
+    children?: ReactNode;
+}
+/** A panel inside a `Splitter`. Rendered by the parent; not standalone. */
+declare const SplitterPanel: react.ForwardRefExoticComponent<SplitterPanelProps & react.RefAttributes<HTMLDivElement>>;
+/** Splitter — resizable split panels (Ant-Design-style). */
+declare const SplitterRoot: react.ForwardRefExoticComponent<SplitterProps & react.RefAttributes<HTMLDivElement>>;
+type SplitterComponent = typeof SplitterRoot & {
+    Panel: typeof SplitterPanel;
+};
+declare const Splitter: SplitterComponent;
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    icon?: ReactNode;
+    href?: string;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+}
+/** Klun UI Breadcrumb — path navigation with chevron separators. */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+
+type DividerVariant = "line" | "text" | "left" | "right";
+interface DividerProps extends HTMLAttributes<HTMLElement> {
+    variant?: DividerVariant;
+    children?: ReactNode;
+}
+/** Klun UI Divider — horizontal rule, optionally with centered uppercase text. */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLElement>>;
+
+type HorizontalFilterSize = "small" | "medium";
+interface HorizontalFilterItem {
+    value: string;
+    label: ReactNode;
+    count?: number;
+    icon?: ReactNode;
+}
+interface HorizontalFilterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    items: HorizontalFilterItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: HorizontalFilterSize;
+}
+/** HorizontalFilter — scrollable filter-pill row with active state + counts. */
+declare const HorizontalFilter: react.ForwardRefExoticComponent<HorizontalFilterProps & react.RefAttributes<HTMLDivElement>>;
+
+type MenuItem = {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+} | {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    children: MenuItem[];
+} | {
+    type: "group";
+    label: ReactNode;
+    children: MenuItem[];
+} | {
+    type: "divider";
+};
+interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    items: MenuItem[];
+    selectedKey?: string;
+    onSelect?: (key: string, item: MenuItem) => void;
+    /** Submenu keys open by default. */
+    defaultOpenKeys?: string[];
+    /** Icon-only rail mode. */
+    collapsed?: boolean;
+}
+/**
+ * Klun UI Menu — vertical navigation menu with groups, icons, badges and
+ * collapsible submenus. Controlled via `selectedKey`/`onSelect`.
+ */
+declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLElement>>;
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    page?: number;
+    total?: number;
+    onChange?: (page: number) => void;
+    /** Page numbers shown either side of the current page. */
+    siblings?: number;
+}
+/** Klun UI Pagination — prev/next + numbered page cells with ellipsis. */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+interface SegmentItem {
+    value: string;
+    label: ReactNode;
+    icon?: ReactNode;
+}
+interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    items: SegmentItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+}
+/** Klun UI SegmentedControl — equal-width segmented toggle. */
+declare const SegmentedControl: react.ForwardRefExoticComponent<SegmentedControlProps & react.RefAttributes<HTMLDivElement>>;
+
+interface Step {
+    label: ReactNode;
+    description?: ReactNode;
+}
+interface StepIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    steps: Step[];
+    /** 0-based index of the active step. */
+    current?: number;
+}
+/** Klun UI StepIndicator — horizontal numbered progress stepper. */
+declare const StepIndicator: react.ForwardRefExoticComponent<StepIndicatorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TabItem {
+    value: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+}
+type TabsVariant = "underline" | "pill";
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    items: TabItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+    variant?: TabsVariant;
+}
+/** Klun UI Tabs — underline or pill tab bar. */
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface WizardStep {
+    title?: ReactNode;
+    content?: ReactNode;
+}
+interface WizardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Ordered steps; each provides a rail `title` and a body `content`. */
+    steps?: WizardStep[];
+    /** Controlled active step index (0-based). When set, the component is controlled. */
+    current?: number;
+    /** Uncontrolled initial active step index. Default `0`. */
+    defaultCurrent?: number;
+    /** Fired with the new index whenever the active step changes (Back/Next). */
+    onStepChange?: (index: number) => void;
+    /** Fired when Finish is pressed on the last step. */
+    onFinish?: () => void;
+    /** Rail layout. Default `"horizontal"`. */
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Wizard — multi-step flow container: numbered step rail + body + footer with
+ * Back / Next / Finish. Controlled (`current`) or uncontrolled (`defaultCurrent`)
+ * active step. Visual state is driven entirely through CSS classes / `data-*`.
+ */
+declare const Wizard: react.ForwardRefExoticComponent<WizardProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CommandItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+}
+interface CommandGroup {
+    label: ReactNode;
+    items: CommandItem[];
+}
+interface CommandMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "style"> {
+    open: boolean;
+    onClose?: () => void;
+    groups: CommandGroup[];
+    placeholder?: string;
+    onSelect?: (item: CommandItem) => void;
+    style?: CSSProperties;
+}
+/** Klun UI CommandMenu — ⌘K search palette with grouped, filterable items. */
+declare const CommandMenu: react.ForwardRefExoticComponent<CommandMenuProps & react.RefAttributes<HTMLDivElement>>;
+
+type ConfirmIntent = "primary" | "danger" | "warning";
+interface ConfirmRequireInput {
+    label?: ReactNode;
+    placeholder?: string;
+    type?: string;
+    /** If set, the confirm button is disabled until the typed value equals this. */
+    match?: string;
+}
+interface ConfirmOptions {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: string;
+    intent?: ConfirmIntent;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    requireInput?: ConfirmRequireInput;
+    /** Async handler; the dialog shows a spinner until it settles, stays open if it rejects. */
+    onConfirm?: (value?: string) => void | Promise<void>;
+}
+type ConfirmResult = false | true | {
+    confirmed: true;
+    value: string;
+};
+/**
+ * Klun UI Confirm — imperative confirmation dialog. Returns a Promise that resolves to
+ * `false` on cancel, `true` (or `{ confirmed, value }` when `requireInput` is set) on confirm.
+ *
+ *   const ok = await Confirm({ title: "Destroy server?", intent: "danger", confirmText: "Destroy" });
+ *   if (ok) destroy();
+ *
+ * Pass an async `onConfirm` to keep the dialog in a loading state until it resolves
+ * (and open if it rejects). Use `requireInput` to force the user to type a value to proceed.
+ */
+declare function Confirm(opts?: ConfirmOptions): Promise<ConfirmResult>;
+
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    side?: "left" | "right";
+    width?: number | string;
+    footer?: ReactNode;
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+/** Klun UI Drawer — slide-over panel anchored to an edge. */
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DropdownItem {
+    label?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    onClick?: () => void;
+    danger?: boolean;
+    divider?: boolean;
+}
+interface DropdownProps extends HTMLAttributes<HTMLSpanElement> {
+    trigger: ReactNode;
+    items: DropdownItem[];
+    align?: "left" | "right";
+    width?: number;
+}
+/** Klun UI Dropdown — click-to-open menu anchored to a trigger. */
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "style"> {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    footer?: ReactNode;
+    width?: number | string;
+    /** Show the close button + allow Esc/backdrop close. Default true. */
+    closable?: boolean;
+    /** Close when the dimmed backdrop is clicked. Default true. */
+    closeOnBackdrop?: boolean;
+    children?: ReactNode;
+    style?: CSSProperties;
+}
+/** Klun UI Modal — centered dialog with dimmed backdrop. Controlled via `open` / `onClose`. */
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+
+interface PopconfirmProps extends Omit<HTMLAttributes<HTMLSpanElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Leading icon (Remix class). Pass "" to hide. */
+    icon?: string;
+    status?: "warning" | "error" | "information" | "success";
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    /** Red confirm button for destructive actions. */
+    okDanger?: boolean;
+    placement?: "top" | "bottom" | "left" | "right";
+    /** May return a promise; the confirm button shows a spinner until it resolves. */
+    onConfirm?: () => void | Promise<any>;
+    onCancel?: () => void;
+    disabled?: boolean;
+    /** The trigger element. */
+    children: ReactNode;
+}
+/** Klun UI Popconfirm — confirmation bubble anchored to its trigger child. */
+declare const Popconfirm: react.ForwardRefExoticComponent<PopconfirmProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface PopoverProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    trigger: ReactNode;
+    align?: "left" | "right";
+    width?: number;
+    /** Panel content, or a render-fn receiving a close() callback. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+}
+/** Klun UI Popover — click-triggered floating panel anchored to a trigger. */
+declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { type Accent, Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertStatus, type AlertVariant, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeColor, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerStatus, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type Breakpoint, BulkAction, BulkActionBar, type BulkActionBarProps, type BulkActionProps, Button, type ButtonAppearance, ButtonGroup, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupSize, type ButtonKind, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type CardVariant, Carousel, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, CharacterCounter, type CharacterCounterProps, ChartLegend, type ChartLegendItem, type ChartLegendProps, ChartTooltip, type ChartTooltipProps, type ChartTooltipRow, Checkbox, CheckboxCard, type CheckboxCardAlign, type CheckboxCardProps, type CheckboxProps, type CheckboxSize, Chip, type ChipColor, type ChipProps, CircularProgress, type CircularProgressColor, type CircularProgressProps, type ClassValue, CodeViewer, type CodeViewerProps, Col, type ColProps, type ColSize, ColorDot, type ColorDotProps, type ColorDotSize, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, type ColorSliderSize, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, type CompactButtonAppearance, type CompactButtonProps, type CompactButtonSize, CompactSelect, type CompactSelectAppearance, CompactSelectForInput, type CompactSelectForInputProps, type CompactSelectForInputSide, type CompactSelectForInputSize, type CompactSelectProps, type CompactSelectSize, type ComponentSize, ConfigProvider, type ConfigProviderProps, Confirm, type ConfirmIntent, type ConfirmOptions, type ConfirmRequireInput, type ConfirmResult, ContentLabel, type ContentLabelColor, type ContentLabelProps, CopyButton, type CopyButtonProps, type CopyButtonSize, type CopyButtonVariant, type CountdownResult, CounterInput, type CounterInputProps, type CounterInputSize, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DefaultButtonProps, type DescriptionItem, Descriptions, type DescriptionsLayout, type DescriptionsProps, type DescriptionsSize, type DescriptionsVariant, DigitInput, type DigitInputProps, type DigitInputSize, type Direction, Divider, type DividerProps, type DividerVariant, type DotTone, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, ExpiryCountdown, type ExpiryCountdownProps, type FancyButtonProps, type FancyButtonSize, type FancyButtonVariant, type FieldSize, FileUpload, type FileUploadProps, Flex, type FlexGap, type FlexProps, Form, type FormInstance, FormItem, type FormItemProps, FormList, type FormListField, type FormListOperations, type FormListProps, type FormProps, type FormRule, Format, type FormatApi, GaugeBar, type GaugeBarColor, type GaugeBarProps, type GaugeBarSize, Grid, type Gutter, Hint, type HintProps, HorizontalFilter, type HorizontalFilterItem, type HorizontalFilterProps, type HorizontalFilterSize, ImageUpload, type ImageUploadProps, type ImageUploadShape, InlineInput, type InlineInputProps, type InlineInputTone, type InlineInputWeight, InlineSelect, type InlineSelectProps, type InlineSelectTone, type InlineSelectWeight, Input, type InputProps, Kbd, type KbdProps, KeyIcon, type KeyIconAppearance, type KeyIconColor, type KeyIconProps, type KeyIconSize, type KlunConfig, Label, type LabelProps, Layout, LayoutContent, type LayoutContentProps, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, type LayoutProps, LayoutSider, type LinkButtonProps, type LinkButtonSize, type LinkButtonVariant, List, ListItem, type ListItemProps, type ListProps, LiveDot, type LiveDotProps, type Locale, type LogLevel, type LogLine, LogViewer, type LogViewerProps, Masonry, type MasonryBreakpoints, type MasonryColumns, type MasonryGutter, type MasonryProps, Menu, type MenuItem, type MenuProps, Message, type MessageApi, type MessageOptions, type MessageProps, type MessageStatus, Modal, type ModalProps, Money, type MoneyOptions, type MoneyPeriod, type MoneyProps, type MoneyResult, type MoneySize, type MoneyTone, type NamePath, Notification, type NotificationApi, type NotificationOptions, type NotificationPlacement, type NotificationProps, type NotificationStatus, Pagination, type PaginationProps, PasswordStrength, type PasswordStrengthLevel, type PasswordStrengthProps, type PctOptions, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressColor, Radio, RadioCard, type RadioCardAlign, type RadioCardProps, type RadioProps, type RadioSize, type Radius, RangeSlider, type RangeSliderProps, type RangeSliderSize, Rating, type RatingProps, type RelTimeOptions, RelativeTime, type RelativeTimeProps, type Responsive, RichEditorToolbar, type RichEditorToolbarProps, Row, type RowAlign, type RowJustify, type RowProps, type Rules, type ScreenMap, type SegmentItem, SegmentedControl, type SegmentedControlProps, SegmentedProgress, type SegmentedProgressColor, type SegmentedProgressProps, Select, SelectMenu, type SelectMenuOption, type SelectMenuProps, type SelectMenuSize, type SelectProps, type SiderProps, type SiderTheme, type SizeOptions, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderSize, type SortDir, Space, type SpaceProps, type SpaceSize, Spinner, type SpinnerProps, type SpinnerSize, Splitter, type SplitterLayout, SplitterPanel, type SplitterPanelProps, type SplitterProps, Statistic, type StatisticProps, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotProps, type StatusTone, type Step, StepIndicator, type StepIndicatorProps, Switch, type SwitchProps, type SwitchSize, type TabItem, Table, type TableColumn, type TableMenuItem, type TableProps, type TableSort, Tabs, type TabsProps, type TabsVariant, Tag, type TagProps, Textarea, type TextareaProps, type TextareaSize, type Theme, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastAction, type ToastOptions, type ToastPosition, type ToastPromiseMessages, type ToastProps, type ToastStatus, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, type UseFormOptions, type UseMessageDefaults, type UseNotificationDefaults, Wizard, type WizardProps, type WizardStep, arSA, cx, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };