klun-ui 0.1.23 → 0.2.2

package/dist/index.d.cts

@@ -72,7 +72,7 @@ declare const Format: FormatApi;
 type ButtonKind = "default" | "fancy" | "compact" | "link";
 type ButtonVariant = "primary" | "neutral" | "error";
 type ButtonAppearance = "filled" | "stroke" | "lighter" | "ghost";
-type ButtonSize = "xsmall" | "small" | "medium" | "large";
+type ButtonSize = "tiny" | "xsmall" | "small" | "medium" | "large";
 type FancyButtonVariant = "accent" | "dark" | "feature" | "glass";
 type FancyButtonSize = "small" | "medium" | "large";
 type CompactButtonAppearance = "stroke" | "ghost" | "white" | "filled";
@@ -430,6 +430,13 @@ type Accent = "blue" | "purple" | "orange" | "green" | "slate" | "metronic";
  * radius (round avatars / switches / pill badges) is always preserved.
  */
 type Radius = "default" | "sharp" | "square" | "rounded";
+/**
+ * Global control density (maps to `data-density`). `"compact"` shifts every
+ * control-size token (heights, inline padding, checkbox/radio/switch sizing)
+ * down one tier — for dense admin, toolbar and data-table surfaces. The size
+ * props (`size="small"` …) keep working on top of it.
+ */
+type Density = "default" | "compact";
 interface KlunConfig {
     /** Active locale dictionary. */
     locale: Locale;
@@ -443,6 +450,8 @@ interface KlunConfig {
     accent?: Accent;
     /** Global corner-radius scale. `undefined` inherits the default. */
     radius?: Radius;
+    /** Control density. `"compact"` shrinks every control one tier. */
+    density?: Density;
     /** Custom primary color (e.g. a hex). Overrides `accent`; a shade/tint ramp is derived. */
     primaryColor?: string;
 }
@@ -465,6 +474,8 @@ interface ConfigProviderProps {
     accent?: Accent;
     /** Global corner-radius scale applied to the subtree. */
     radius?: Radius;
+    /** Control density applied to the subtree (`"compact"` shrinks controls one tier). */
+    density?: Density;
     /** Custom primary color (e.g. a hex). Overrides `accent`; a ramp is derived. */
     primaryColor?: string;
     children?: ReactNode;
@@ -473,12 +484,13 @@ interface ConfigProviderProps {
  * 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
+ * overrides. `theme`/`accent`/`radius`/`density` set
+ * `data-theme`/`data-mode`/`data-radius`/`data-density` 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 function ConfigProvider({ locale, size, dir, theme, accent, radius, density, primaryColor, children, }: ConfigProviderProps): react.JSX.Element;
 declare namespace ConfigProvider {
     var displayName: string;
 }
@@ -629,6 +641,50 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
 /** 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>>;
+
 type CrossRefKind = "artifact" | "pr" | "commit" | "doc" | "wiki";
 /** Structured preview rendered inside the hover card. */
 interface CrossRefPreview {
@@ -674,50 +730,6 @@ interface CrossRefBadgeProps {
  */
 declare const CrossRefBadge: react.ForwardRefExoticComponent<CrossRefBadgeProps & 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;
@@ -960,6 +972,22 @@ interface ExpiryCountdownProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare const ExpiryCountdown: react.ForwardRefExoticComponent<ExpiryCountdownProps & react.RefAttributes<HTMLSpanElement>>;
 
+type StatCardTint = "feature" | "success" | "warning" | "information" | "error";
+interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+    value?: ReactNode;
+    delta?: ReactNode;
+    trend?: "up" | "down";
+    icon?: ReactNode;
+    tint?: StatCardTint;
+}
+/**
+ * Klun UI StatCard — KPI metric card with a tinted icon tile, a value and an
+ * optional up/down delta pill. For a bare metric without the card surface, see
+ * `Statistic`.
+ */
+declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
+
 interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix"> {
     label?: ReactNode;
     value: ReactNode;
@@ -978,22 +1006,6 @@ interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix">
  */
 declare const Statistic: react.ForwardRefExoticComponent<StatisticProps & react.RefAttributes<HTMLDivElement>>;
 
-type StatCardTint = "feature" | "success" | "warning" | "information" | "error";
-interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
-    label?: ReactNode;
-    value?: ReactNode;
-    delta?: ReactNode;
-    trend?: "up" | "down";
-    icon?: ReactNode;
-    tint?: StatCardTint;
-}
-/**
- * Klun UI StatCard — KPI metric card with a tinted icon tile, a value and an
- * optional up/down delta pill. For a bare metric without the card surface, see
- * `Statistic`.
- */
-declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<HTMLDivElement>>;
-
 type StatusTone = "ok" | "warn" | "err" | "info" | "neutral" | "busy" | "feature" | "verified" | "stable" | "away" | "highlighted";
 interface StatusBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
     status: string;
@@ -1369,38 +1381,6 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  */
 declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
 
-interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    icon?: ReactNode;
-    title?: ReactNode;
-    description?: ReactNode;
-    action?: ReactNode;
-}
-/**
- * Klun UI EmptyState — a centered placeholder for empty lists/views: an optional
- * icon medallion, a title, a description and an action slot. For a full-page
- * outcome (success / 404 / 403 …), use `Result`.
- */
-declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
-
-type ResultStatus = "success" | "error" | "warning" | "info" | "404" | "403" | "500";
-interface ResultProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    status?: ResultStatus;
-    /** Custom icon overriding the status preset. */
-    icon?: ReactNode;
-    title?: ReactNode;
-    subtitle?: ReactNode;
-    /** Action buttons row. */
-    extra?: ReactNode;
-    children?: ReactNode;
-}
-/**
- * Klun UI Result — a full-page outcome screen. Pass a `status` for a preset
- * icon+color (success / error / warning / info / 404 / 403 / 500) or a custom
- * `icon`, with `title`, `subtitle`, an `extra` actions row and optional body
- * `children`.
- */
-declare const Result: react.ForwardRefExoticComponent<ResultProps & react.RefAttributes<HTMLDivElement>>;
-
 type BannerStatus = "information" | "success" | "warning" | "error" | "feature";
 type BannerVariant = "filled" | "lighter";
 interface BannerProps extends HTMLAttributes<HTMLDivElement> {
@@ -1432,6 +1412,19 @@ interface CircularProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "st
 /** Klun UI CircularProgress — ring progress with optional center label. */
 declare const CircularProgress: react.ForwardRefExoticComponent<CircularProgressProps & react.RefAttributes<HTMLDivElement>>;
 
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+/**
+ * Klun UI EmptyState — a centered placeholder for empty lists/views: an optional
+ * icon medallion, a title, a description and an action slot. For a full-page
+ * outcome (success / 404 / 403 …), use `Result`.
+ */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & 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"> {
@@ -1555,6 +1548,25 @@ interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
 /** Klun UI ProgressBar — horizontal determinate progress track. */
 declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<HTMLDivElement>>;
 
+type ResultStatus = "success" | "error" | "warning" | "info" | "404" | "403" | "500";
+interface ResultProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    status?: ResultStatus;
+    /** Custom icon overriding the status preset. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** Action buttons row. */
+    extra?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Klun UI Result — a full-page outcome screen. Pass a `status` for a preset
+ * icon+color (success / error / warning / info / 404 / 403 / 500) or a custom
+ * `icon`, with `title`, `subtitle`, an `extra` actions row and optional body
+ * `children`.
+ */
+declare const Result: react.ForwardRefExoticComponent<ResultProps & react.RefAttributes<HTMLDivElement>>;
+
 type SegmentedProgressColor = "primary" | "success" | "warning" | "error";
 interface SegmentedProgressProps extends HTMLAttributes<HTMLDivElement> {
     /** Number of filled segments. */
@@ -1762,6 +1774,25 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
  *  Pass `children` to render a label next to the box. */
 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>>;
+
 interface CheckboxGroupOption {
     label: ReactNode;
     value: string;
@@ -1795,25 +1826,6 @@ interface CheckboxGroupProps {
  */
 declare const CheckboxGroup: react.ForwardRefExoticComponent<CheckboxGroupProps & react.RefAttributes<HTMLDivElement>>;
 
-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)`. */
@@ -1949,27 +1961,6 @@ interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange
  */
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
 
-interface DateTimePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
-    value?: Date | string | null;
-    onChange?: (date: Date) => void;
-    /** Render the bare inline calendar + time row instead of an input. */
-    inline?: boolean;
-    /** Trigger placeholder shown when nothing is selected. */
-    placeholder?: string;
-    /** Intl options used to format the trigger label. */
-    format?: Intl.DateTimeFormatOptions;
-    /** Popover alignment relative to the trigger. Default `"left"`. */
-    align?: "left" | "right";
-    /** Disable the trigger. */
-    disabled?: boolean;
-    style?: CSSProperties;
-}
-/**
- * Klun UI DateTimePicker — an input that opens a calendar + time selector in a
- * popover, producing a single Date. Pass `inline` to render the bare panel.
- */
-declare const DateTimePicker: react.ForwardRefExoticComponent<DateTimePickerProps & react.RefAttributes<HTMLDivElement>>;
-
 interface DateRange {
     start: Date | null;
     end: Date | null;
@@ -1996,6 +1987,27 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
  */
 declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
 
+interface DateTimePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
+    value?: Date | string | null;
+    onChange?: (date: Date) => void;
+    /** Render the bare inline calendar + time row instead of an input. */
+    inline?: boolean;
+    /** Trigger placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Intl options used to format the trigger label. */
+    format?: Intl.DateTimeFormatOptions;
+    /** Popover alignment relative to the trigger. Default `"left"`. */
+    align?: "left" | "right";
+    /** Disable the trigger. */
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+/**
+ * Klun UI DateTimePicker — an input that opens a calendar + time selector in a
+ * popover, producing a single Date. Pass `inline` to render the bare panel.
+ */
+declare const DateTimePicker: react.ForwardRefExoticComponent<DateTimePickerProps & react.RefAttributes<HTMLDivElement>>;
+
 type DigitInputSize = "small" | "medium" | "large";
 interface DigitInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> {
     length?: number;
@@ -2222,7 +2234,7 @@ interface InlineSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
  */
 declare const InlineSelect: react.ForwardRefExoticComponent<InlineSelectProps & react.RefAttributes<HTMLSelectElement>>;
 
-type FieldSize = "small" | "medium" | "large";
+type FieldSize = "xsmall" | "small" | "medium" | "large";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Default `"medium"`. */
     size?: FieldSize;
@@ -2356,7 +2368,7 @@ interface RichEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
 declare const RichEditorToolbar: react.ForwardRefExoticComponent<RichEditorToolbarProps & react.RefAttributes<HTMLDivElement>>;
 
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "style"> {
-    size?: "small" | "medium" | "large";
+    size?: "xsmall" | "small" | "medium" | "large";
     placeholder?: string;
     leadingIcon?: ReactNode;
     error?: boolean;
@@ -2435,7 +2447,7 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onCha
 /** Klun UI Switch — on/off toggle. */
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
 
-type TextareaSize = "small" | "medium" | "large";
+type TextareaSize = "xsmall" | "small" | "medium" | "large";
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
     error?: boolean;
     disabled?: boolean;
@@ -2471,6 +2483,32 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 /** Card — elevated/outlined surface container. */
 declare const Card: react.ForwardRefExoticComponent<CardProps & 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 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>>;
@@ -2651,32 +2689,6 @@ interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
 /** 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"). */
@@ -2726,46 +2738,6 @@ interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
 /** Klun UI Breadcrumb — path navigation with chevron separators. */
 declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
 
-interface PageHeaderTab {
-    key: string;
-    label: ReactNode;
-    /** Reserved for future use — Tabs does not yet render a disabled state. */
-    disabled?: boolean;
-}
-interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onSelect"> {
-    /** Primary heading, e.g. "#1284 · Login returns 500". */
-    title: ReactNode;
-    /** Leading node before the title (artifact-type icon / avatar). */
-    avatar?: ReactNode;
-    /** Inline area right of the title: StatusBadge, CrossRefBadge, severity Chip… */
-    tags?: ReactNode;
-    /** Sub-line under the title (assignee · time · milestone). */
-    subtitle?: ReactNode;
-    /** Breadcrumb rail above the title (pass a <Breadcrumb/>). */
-    breadcrumb?: ReactNode;
-    /** Show a back arrow and call this on click. */
-    onBack?: () => void;
-    /** Right-aligned action area (Button group). */
-    extra?: ReactNode;
-    /** Sub-navigation tabs docked at the bottom edge; controlled. */
-    tabs?: PageHeaderTab[];
-    activeTab?: string;
-    onTabChange?: (key: string) => void;
-    /** Stick to the top of a scrolling detail page. Default false. */
-    sticky?: boolean;
-    /** Bottom hairline separator. Default true. */
-    bordered?: boolean;
-    /** Custom band between the title row and the tabs (e.g. a description). */
-    children?: ReactNode;
-}
-/**
- * PageHeader — the standard header band for a detail / secondary page: optional
- * breadcrumb + back, a title with inline tags and a sub-line, right-aligned
- * actions, and an optional docked Tabs bar. Composes the library's own
- * `Button` (back) and `Tabs` (sub-nav) rather than re-implementing them.
- */
-declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
-
 type DividerVariant = "line" | "text" | "left" | "right";
 interface DividerProps extends HTMLAttributes<HTMLElement> {
     variant?: DividerVariant;
@@ -2824,6 +2796,46 @@ interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
  */
 declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLElement>>;
 
+interface PageHeaderTab {
+    key: string;
+    label: ReactNode;
+    /** Reserved for future use — Tabs does not yet render a disabled state. */
+    disabled?: boolean;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onSelect"> {
+    /** Primary heading, e.g. "#1284 · Login returns 500". */
+    title: ReactNode;
+    /** Leading node before the title (artifact-type icon / avatar). */
+    avatar?: ReactNode;
+    /** Inline area right of the title: StatusBadge, CrossRefBadge, severity Chip… */
+    tags?: ReactNode;
+    /** Sub-line under the title (assignee · time · milestone). */
+    subtitle?: ReactNode;
+    /** Breadcrumb rail above the title (pass a <Breadcrumb/>). */
+    breadcrumb?: ReactNode;
+    /** Show a back arrow and call this on click. */
+    onBack?: () => void;
+    /** Right-aligned action area (Button group). */
+    extra?: ReactNode;
+    /** Sub-navigation tabs docked at the bottom edge; controlled. */
+    tabs?: PageHeaderTab[];
+    activeTab?: string;
+    onTabChange?: (key: string) => void;
+    /** Stick to the top of a scrolling detail page. Default false. */
+    sticky?: boolean;
+    /** Bottom hairline separator. Default true. */
+    bordered?: boolean;
+    /** Custom band between the title row and the tabs (e.g. a description). */
+    children?: ReactNode;
+}
+/**
+ * PageHeader — the standard header band for a detail / secondary page: optional
+ * breadcrumb + back, a title with inline tags and a sub-line, right-aligned
+ * actions, and an optional docked Tabs bar. Composes the library's own
+ * `Button` (back) and `Tabs` (sub-nav) rather than re-implementing them.
+ */
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
+
 interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
     page?: number;
     total?: number;
@@ -3197,4 +3209,4 @@ interface PopoverProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children">
  */
 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, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipColor, type ChipProps, CircularProgress, type CircularProgressColor, type CircularProgressProps, type ClassValue, CodeViewer, type CodeViewerProps, Col, type ColProps, type ColSize, Collapse, type CollapseProps, 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, ContextMenu, type ContextMenuItem, type ContextMenuProps, type ContextMenuState, CopyButton, type CopyButtonProps, type CopyButtonSize, type CopyButtonVariant, type CountdownResult, CounterInput, type CounterInputProps, type CounterInputSize, CrossRefBadge, type CrossRefBadgeProps, type CrossRefKind, type CrossRefPreview, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, type DefaultButtonProps, type DescriptionItem, Descriptions, type DescriptionsLayout, type DescriptionsProps, type DescriptionsSize, type DescriptionsVariant, type DiffHunk, type DiffLine, type DiffLineType, type DiffMode, type DiffSide, DiffViewer, type DiffViewerProps, DigitInput, type DigitInputProps, type DigitInputSize, type Direction, Divider, type DividerProps, type DividerVariant, type DotTone, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, 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, type ImageItem, ImageUpload, type ImageUploadProps, type ImageUploadShape, ImageViewer, type ImageViewerProps, 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, Markdown, type MarkdownProps, 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, PageHeader, type PageHeaderProps, type PageHeaderTab, 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, Result, type ResultProps, type ResultStatus, 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, StatCard, type StatCardProps, type StatCardTint, 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, type WikiLinkResolver, Wizard, type WizardProps, type WizardStep, arSA, cx, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
+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, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipColor, type ChipProps, CircularProgress, type CircularProgressColor, type CircularProgressProps, type ClassValue, CodeViewer, type CodeViewerProps, Col, type ColProps, type ColSize, Collapse, type CollapseProps, 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, ContextMenu, type ContextMenuItem, type ContextMenuProps, type ContextMenuState, CopyButton, type CopyButtonProps, type CopyButtonSize, type CopyButtonVariant, type CountdownResult, CounterInput, type CounterInputProps, type CounterInputSize, CrossRefBadge, type CrossRefBadgeProps, type CrossRefKind, type CrossRefPreview, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, type DefaultButtonProps, type DescriptionItem, Descriptions, type DescriptionsLayout, type DescriptionsProps, type DescriptionsSize, type DescriptionsVariant, type DiffHunk, type DiffLine, type DiffLineType, type DiffMode, type DiffSide, DiffViewer, type DiffViewerProps, DigitInput, type DigitInputProps, type DigitInputSize, type Direction, Divider, type DividerProps, type DividerVariant, type DotTone, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, EmptyState, type EmptyStateProps, 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, type ImageItem, ImageUpload, type ImageUploadProps, type ImageUploadShape, ImageViewer, type ImageViewerProps, 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, Markdown, type MarkdownProps, 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, PageHeader, type PageHeaderProps, type PageHeaderTab, 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, Result, type ResultProps, type ResultStatus, 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, StatCard, type StatCardProps, type StatCardTint, 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, type WikiLinkResolver, Wizard, type WizardProps, type WizardStep, arSA, cx, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };