@techzyapp/ui-library 1.0.27 → 1.0.29

package/dist/components/Checkbox/index.js

@@ -1,4 +1,4 @@
-import { C as o, C } from "../../Checkbox-ZYOSBYRt.js";
+import { C as o, C } from "../../Checkbox-DyKBIgVT.js";
 export {
   o as Checkbox,
   C as default

package/dist/components/Chip/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Chip-CYz4vxHm.cjs");exports.Chip=e.Chip;exports.default=e.Chip;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Chip-D12KcV4_.cjs");exports.Chip=e.Chip;exports.default=e.Chip;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Chip/index.js

@@ -1,4 +1,4 @@
-import { C as e, C as f } from "../../Chip-CQ4cYVl_.js";
+import { C as e, C as f } from "../../Chip-Zh1OB9nV.js";
 export {
   e as Chip,
   f as default

package/dist/components/ChoiceCard/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ChoiceCardGroup-pIOKIUI0.cjs");exports.ChoiceCard=e.ChoiceCard;exports.ChoiceCardGroup=e.ChoiceCardGroup;exports.default=e.ChoiceCard;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ChoiceCardGroup-BSagRbPI.cjs");exports.ChoiceCard=e.ChoiceCard;exports.ChoiceCardGroup=e.ChoiceCardGroup;exports.default=e.ChoiceCard;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ChoiceCard/index.js

@@ -1,4 +1,4 @@
-import { C as o, a as r, C as e } from "../../ChoiceCardGroup-D3HL7dHj.js";
+import { C as o, a as r, C as e } from "../../ChoiceCardGroup-CEniY_HJ.js";
 export {
   o as ChoiceCard,
   r as ChoiceCardGroup,

package/dist/components/CodeBlock/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../CodeBlock-H75dbOvg.cjs");exports.CodeBlock=e.CodeBlock;exports.default=e.CodeBlock;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../CodeBlock-DAM7BkHK.cjs");exports.CodeBlock=e.CodeBlock;exports.default=e.CodeBlock;
 //# sourceMappingURL=index.cjs.map

package/dist/components/CodeBlock/index.js

@@ -1,4 +1,4 @@
-import { C as e, C } from "../../CodeBlock-DddGTLu1.js";
+import { C as e, C } from "../../CodeBlock-CkrTnpcj.js";
 export {
   e as CodeBlock,
   C as default

package/dist/components/ColorPicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorPicker-CKc8k-Dp.cjs");exports.ColorPicker=e.ColorPicker;exports.default=e.ColorPicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorPicker-BcCozxIe.cjs");exports.ColorPicker=e.ColorPicker;exports.default=e.ColorPicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ColorPicker/index.js

@@ -1,4 +1,4 @@
-import { C as a, C as e } from "../../ColorPicker-Cw-2X6u9.js";
+import { C as a, C as e } from "../../ColorPicker-DqxVgUoD.js";
 export {
   a as ColorPicker,
   e as default

package/dist/components/ColorRamp/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorRamp-AkY9gq6Y.cjs");exports.ColorRamp=e.ColorRamp;exports.default=e.ColorRamp;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../ColorRamp-_KwlPQ-T.cjs");exports.ColorRamp=e.ColorRamp;exports.default=e.ColorRamp;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ColorRamp/index.js

@@ -1,4 +1,4 @@
-import { C as r, C } from "../../ColorRamp-DnlJNKfy.js";
+import { C as r, C } from "../../ColorRamp-DS5LVpRF.js";
 export {
   r as ColorRamp,
   C as default

package/dist/components/CopyButton/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-BqFGC-Ca.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-SFwjKod9.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
 //# sourceMappingURL=index.cjs.map

package/dist/components/CopyButton/index.js

@@ -1,4 +1,4 @@
-import { C as a, C } from "../../CopyButton-D6-kcVCA.js";
+import { C as a, C } from "../../CopyButton-D4s8aeSE.js";
 export {
   a as CopyButton,
   C as default

package/dist/components/DatePicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DatePicker-BvGFP2AL.cjs");exports.DatePicker=e.DatePicker;exports.default=e.DatePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DatePicker-ENbn2Vab.cjs");exports.DatePicker=e.DatePicker;exports.default=e.DatePicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DatePicker-DP7yASzq.js";
+import { D as r, D as t } from "../../DatePicker-DGwjCHfd.js";
 export {
   r as DatePicker,
   t as default

package/dist/components/DateTimePicker/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-DOzft9kg.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DateTimePicker-BQUmsFwX.cjs");exports.DateTimePicker=e.DateTimePicker;exports.default=e.DateTimePicker;
 //# sourceMappingURL=index.cjs.map

package/dist/components/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DateTimePicker-CzRduOFz.js";
+import { D as r, D as t } from "../../DateTimePicker-CwVkQiun.js";
 export {
   r as DateTimePicker,
   t as default

package/dist/components/DescriptionList/DescriptionList.d.cts

@@ -0,0 +1,76 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+import { type Breakpoint, type Responsive } from '../../theme/breakpoints';
+import { type IconName } from '../../icons/names';
+export type DescriptionListSize = 'sm' | 'md' | 'lg';
+export type DescriptionListLayout = 'vertical' | 'horizontal';
+export type DescriptionListColumns = 1 | 2 | 3 | 4;
+export type DescriptionListValueWeight = 'regular' | 'medium' | 'bold';
+export interface DescriptionItem {
+    /** Stable key (defaults to the index). */
+    key?: string;
+    /** The term — "Entry fee". */
+    label: ReactNode;
+    /** The value. `null` / `undefined` / `''` / `false` render the `emptyText` placeholder ("—"). */
+    value?: ReactNode;
+    /** Columns this pair spans (clamped to the resolved column count) — for long text, addresses, lists. */
+    span?: DescriptionListColumns;
+    /** Show a copy button: `true` copies a string/number `value`; pass a string to copy something else (an id behind a label). */
+    copyable?: boolean | string;
+    /** Drop the pair entirely (e.g. by role). */
+    hidden?: boolean;
+    /** Small leading icon in the label — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+}
+export interface DescriptionListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
+    /** The label / value pairs, in order. Declarative so `loading` skeletons and `hidden` stay trivial. */
+    items: DescriptionItem[];
+    /** Column count — a number or a desktop-first breakpoint map. Defaults to `{ xs: 1, sm: 2, lg: 3 }`. */
+    columns?: Responsive<DescriptionListColumns>;
+    /** `vertical` (label above value, default) or `horizontal` (label beside value; stacks again on phones). */
+    layout?: DescriptionListLayout;
+    /** Text + spacing scale. Defaults to `md`. */
+    size?: DescriptionListSize;
+    /** Font weight of the values. Defaults to `regular` (the library's body default); `medium` / `bold` add emphasis. */
+    valueWeight?: DescriptionListValueWeight;
+    /** Frame the list as a surface card (border + radius); `horizontal` also tints the label column. */
+    bordered?: boolean;
+    /** Hairlines between rows. Defaults to `true` (turn off inside an already-ruled container). */
+    dividers?: boolean;
+    /** Label column width for `horizontal` (px number or CSS length). Defaults to `160px`. */
+    labelWidth?: number | string;
+    /**
+     * `horizontal` only — the breakpoint at (and below) which the label stacks back above the value.
+     * A breakpoint token (`'xxs'` ≤ 576px default, `'xs'` ≤ 768px, …) or `false` to keep the two columns
+     * side by side at every width. Uses the shared JS breakpoint layer, so `config.theme.breakpoints` applies.
+     */
+    stackBelow?: Breakpoint | false;
+    /** Render shimmering placeholders instead of values — `true` uses `items.length` rows, a number sets the count. */
+    loading?: boolean | number;
+    /** Placeholder for an empty value. Defaults to `"—"`. */
+    emptyText?: ReactNode;
+    /** Optional header title. */
+    title?: ReactNode;
+    /** Leading header icon (a tinted box before the title, like `Card`) — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    /** Theme color that tints the header icon box. Defaults to `accent`. */
+    color?: ThemeColor;
+    /** Muted line under the title. */
+    subtitle?: ReactNode;
+    /** Header slot on the right (buttons, a status chip …). */
+    actions?: ReactNode;
+}
+/**
+ * Label / value pairs for a **detail page** (the read-only twin of a form: "User #42" → Name, Email,
+ * Role …). Renders a semantic `<dl>` of `<dt>` / `<dd>` groups laid out on a responsive CSS grid
+ * (`columns`, desktop-first breakpoint map — default 1 → 2 → 3), each pair optionally spanning several
+ * columns. An optional Card-style header carries an `icon` box (tinted by `color`), `title`,
+ * `subtitle` and `actions`. Values are regular weight by default (`valueWeight` adds emphasis) and any node: `null` / `''` show a muted "—" placeholder (`emptyText`), string / number
+ * values can grow a `CopyButton` (revealed on hover / focus; always visible without hover), and
+ * `hidden` drops a pair (e.g. by role). `layout="horizontal"` puts the label beside the value in a
+ * `labelWidth` column and stacks back on phones (`stackBelow` — a breakpoint, or `false` to never stack); `bordered` frames the list as a surface card (tinting the
+ * label column when horizontal). `loading` swaps the values for `Skeleton` lines of the same shape.
+ * Rows are separated by hairline `dividers`. Token-only; the grid is never `overflow: hidden` so the
+ * copy tooltip is never clipped. `forwardRef` to the root `<div>`.
+ */
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,76 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
+import { type Breakpoint, type Responsive } from '../../theme/breakpoints';
+import { type IconName } from '../../icons/names';
+export type DescriptionListSize = 'sm' | 'md' | 'lg';
+export type DescriptionListLayout = 'vertical' | 'horizontal';
+export type DescriptionListColumns = 1 | 2 | 3 | 4;
+export type DescriptionListValueWeight = 'regular' | 'medium' | 'bold';
+export interface DescriptionItem {
+    /** Stable key (defaults to the index). */
+    key?: string;
+    /** The term — "Entry fee". */
+    label: ReactNode;
+    /** The value. `null` / `undefined` / `''` / `false` render the `emptyText` placeholder ("—"). */
+    value?: ReactNode;
+    /** Columns this pair spans (clamped to the resolved column count) — for long text, addresses, lists. */
+    span?: DescriptionListColumns;
+    /** Show a copy button: `true` copies a string/number `value`; pass a string to copy something else (an id behind a label). */
+    copyable?: boolean | string;
+    /** Drop the pair entirely (e.g. by role). */
+    hidden?: boolean;
+    /** Small leading icon in the label — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+}
+export interface DescriptionListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
+    /** The label / value pairs, in order. Declarative so `loading` skeletons and `hidden` stay trivial. */
+    items: DescriptionItem[];
+    /** Column count — a number or a desktop-first breakpoint map. Defaults to `{ xs: 1, sm: 2, lg: 3 }`. */
+    columns?: Responsive<DescriptionListColumns>;
+    /** `vertical` (label above value, default) or `horizontal` (label beside value; stacks again on phones). */
+    layout?: DescriptionListLayout;
+    /** Text + spacing scale. Defaults to `md`. */
+    size?: DescriptionListSize;
+    /** Font weight of the values. Defaults to `regular` (the library's body default); `medium` / `bold` add emphasis. */
+    valueWeight?: DescriptionListValueWeight;
+    /** Frame the list as a surface card (border + radius); `horizontal` also tints the label column. */
+    bordered?: boolean;
+    /** Hairlines between rows. Defaults to `true` (turn off inside an already-ruled container). */
+    dividers?: boolean;
+    /** Label column width for `horizontal` (px number or CSS length). Defaults to `160px`. */
+    labelWidth?: number | string;
+    /**
+     * `horizontal` only — the breakpoint at (and below) which the label stacks back above the value.
+     * A breakpoint token (`'xxs'` ≤ 576px default, `'xs'` ≤ 768px, …) or `false` to keep the two columns
+     * side by side at every width. Uses the shared JS breakpoint layer, so `config.theme.breakpoints` applies.
+     */
+    stackBelow?: Breakpoint | false;
+    /** Render shimmering placeholders instead of values — `true` uses `items.length` rows, a number sets the count. */
+    loading?: boolean | number;
+    /** Placeholder for an empty value. Defaults to `"—"`. */
+    emptyText?: ReactNode;
+    /** Optional header title. */
+    title?: ReactNode;
+    /** Leading header icon (a tinted box before the title, like `Card`) — a known `IconName` or any node. */
+    icon?: IconName | ReactNode;
+    /** Theme color that tints the header icon box. Defaults to `accent`. */
+    color?: ThemeColor;
+    /** Muted line under the title. */
+    subtitle?: ReactNode;
+    /** Header slot on the right (buttons, a status chip …). */
+    actions?: ReactNode;
+}
+/**
+ * Label / value pairs for a **detail page** (the read-only twin of a form: "User #42" → Name, Email,
+ * Role …). Renders a semantic `<dl>` of `<dt>` / `<dd>` groups laid out on a responsive CSS grid
+ * (`columns`, desktop-first breakpoint map — default 1 → 2 → 3), each pair optionally spanning several
+ * columns. An optional Card-style header carries an `icon` box (tinted by `color`), `title`,
+ * `subtitle` and `actions`. Values are regular weight by default (`valueWeight` adds emphasis) and any node: `null` / `''` show a muted "—" placeholder (`emptyText`), string / number
+ * values can grow a `CopyButton` (revealed on hover / focus; always visible without hover), and
+ * `hidden` drops a pair (e.g. by role). `layout="horizontal"` puts the label beside the value in a
+ * `labelWidth` column and stacks back on phones (`stackBelow` — a breakpoint, or `false` to never stack); `bordered` frames the list as a surface card (tinting the
+ * label column when horizontal). `loading` swaps the values for `Skeleton` lines of the same shape.
+ * Rows are separated by hairline `dividers`. Token-only; the grid is never `overflow: hidden` so the
+ * copy tooltip is never clipped. `forwardRef` to the root `<div>`.
+ */
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DescriptionList/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../DescriptionList-U5z2Faf4.cjs");exports.DescriptionList=e.DescriptionList;exports.default=e.DescriptionList;
+//# sourceMappingURL=index.cjs.map

package/dist/components/DescriptionList/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/DescriptionList/index.d.cts

@@ -0,0 +1,2 @@
+export { DescriptionList, DescriptionList as default } from './DescriptionList';
+export type { DescriptionListProps, DescriptionItem, DescriptionListSize, DescriptionListLayout, DescriptionListColumns, DescriptionListValueWeight, } from './DescriptionList';

package/dist/components/DescriptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { DescriptionList, DescriptionList as default } from './DescriptionList';
+export type { DescriptionListProps, DescriptionItem, DescriptionListSize, DescriptionListLayout, DescriptionListColumns, DescriptionListValueWeight, } from './DescriptionList';

package/dist/components/DescriptionList/index.js

@@ -0,0 +1,6 @@
+import { D as a, D as e } from "../../DescriptionList-0qjKr6GN.js";
+export {
+  a as DescriptionList,
+  e as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/DescriptionList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Dropdown/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Dropdown-Ui7h2TGd.cjs");exports.Dropdown=e.Dropdown;exports.default=e.Dropdown;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Dropdown-DNZ9S_zQ.cjs");exports.Dropdown=e.Dropdown;exports.default=e.Dropdown;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import { D as r, D } from "../../Dropdown-FfkmluRu.js";
+import { D as r, D } from "../../Dropdown--1mNTVZJ.js";
 export {
   r as Dropdown,
   D as default

package/dist/components/EmptyState/EmptyState.d.cts

@@ -1,7 +1,8 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
 import { type IconName } from '../../icons/names';
 export type EmptyStateSize = 'sm' | 'md' | 'lg';
-export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
     /** Leading glyph shown in a soft circle — an `IconName`, any node, or `false` to hide it. Defaults to `FolderOpen`. */
     icon?: IconName | ReactNode | false;
     /** Heading line. Defaults to `"No Results Found"`. */
@@ -17,6 +18,8 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
      * (gradient + drop shadow). Defaults to `true`; pass `pattern={false}` for the flat, compact placeholder.
      */
     pattern?: boolean;
+    /** Tint the icon puck with a theme color (e.g. `error` for a failure). Omitted → the neutral muted puck. */
+    color?: ThemeColor;
     /** Extra content rendered below the action. */
     children?: ReactNode;
 }

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,7 +1,8 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ThemeColor } from '../../theme';
 import { type IconName } from '../../icons/names';
 export type EmptyStateSize = 'sm' | 'md' | 'lg';
-export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {
     /** Leading glyph shown in a soft circle — an `IconName`, any node, or `false` to hide it. Defaults to `FolderOpen`. */
     icon?: IconName | ReactNode | false;
     /** Heading line. Defaults to `"No Results Found"`. */
@@ -17,6 +18,8 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
      * (gradient + drop shadow). Defaults to `true`; pass `pattern={false}` for the flat, compact placeholder.
      */
     pattern?: boolean;
+    /** Tint the icon puck with a theme color (e.g. `error` for a failure). Omitted → the neutral muted puck. */
+    color?: ThemeColor;
     /** Extra content rendered below the action. */
     children?: ReactNode;
 }

package/dist/components/EmptyState/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-CTTOy9aY.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../EmptyState-B2_4BN4l.cjs");exports.EmptyState=t.EmptyState;exports.default=t.EmptyState;
 //# sourceMappingURL=index.cjs.map

package/dist/components/EmptyState/index.js

@@ -1,4 +1,4 @@
-import { E as e, E } from "../../EmptyState-A5nPGnHA.js";
+import { E as e, E } from "../../EmptyState-DwT9_HW7.js";
 export {
   e as EmptyState,
   E as default

package/dist/components/ErrorState/ErrorBoundary.d.cts

@@ -0,0 +1,35 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    /**
+     * What to render after a crash — a node, or `(error, reset) => node`. Defaults to an `ErrorState` with
+     * a friendly description, a **Try again** button (`reset`) and the stack in dev.
+     */
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    /** Report the crash (e.g. `Sentry.captureException`). */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Called after the boundary resets (Try again, or a `resetKeys` change). */
+    onReset?: () => void;
+    /** Reset automatically when any of these change (shallow) — e.g. `[location.pathname]` clears on navigation. */
+    resetKeys?: unknown[];
+    children?: ReactNode;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Catches render errors in its subtree and shows a fallback instead of unmounting the whole app (a
+ * white screen). The one class component in the library — React only offers error boundaries as
+ * classes. `fallback` is a node or `(error, reset) => node` (default: an `ErrorState` with Try again);
+ * `onError` reports the crash (Sentry); `resetKeys` resets it when they change (e.g. the route path, so
+ * navigating away recovers); `onReset` runs after any reset. `AdminRoot` mounts one around the page
+ * content automatically, so a crashing page keeps the sidebar + header.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): ErrorBoundaryState;
+    componentDidCatch(error: unknown, info: ErrorInfo): void;
+    componentDidUpdate(prev: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
+    reset: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/components/ErrorState/ErrorBoundary.d.ts

@@ -0,0 +1,35 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    /**
+     * What to render after a crash — a node, or `(error, reset) => node`. Defaults to an `ErrorState` with
+     * a friendly description, a **Try again** button (`reset`) and the stack in dev.
+     */
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    /** Report the crash (e.g. `Sentry.captureException`). */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Called after the boundary resets (Try again, or a `resetKeys` change). */
+    onReset?: () => void;
+    /** Reset automatically when any of these change (shallow) — e.g. `[location.pathname]` clears on navigation. */
+    resetKeys?: unknown[];
+    children?: ReactNode;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Catches render errors in its subtree and shows a fallback instead of unmounting the whole app (a
+ * white screen). The one class component in the library — React only offers error boundaries as
+ * classes. `fallback` is a node or `(error, reset) => node` (default: an `ErrorState` with Try again);
+ * `onError` reports the crash (Sentry); `resetKeys` resets it when they change (e.g. the route path, so
+ * navigating away recovers); `onReset` runs after any reset. `AdminRoot` mounts one around the page
+ * content automatically, so a crashing page keeps the sidebar + header.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: unknown): ErrorBoundaryState;
+    componentDidCatch(error: unknown, info: ErrorInfo): void;
+    componentDidUpdate(prev: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
+    reset: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/components/ErrorState/ErrorState.d.cts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type EmptyStateProps } from '../EmptyState';
+import type { IconName } from '../../icons/names';
+export interface ErrorStateProps extends Omit<EmptyStateProps, 'icon' | 'title' | 'color'> {
+    /**
+     * What failed — an `Error`, a string, an axios-style error, a `{ message }` or a raw `{ status }`
+     * response. Its message becomes the description (unless `description` is given) and its stack feeds
+     * the details panel.
+     */
+    error?: unknown;
+    /** Heading. Defaults to the localized "Something went wrong". */
+    title?: ReactNode;
+    /** Leading icon — a known `IconName`, any node, or `false`. Defaults to `Danger`, tinted `error`. */
+    icon?: IconName | ReactNode | false;
+    /** Adds a "Try again" button that calls this (e.g. a query's `refetch`). */
+    onRetry?: () => void;
+    /** Retry button label. Defaults to the localized "Try again". */
+    retryLabel?: ReactNode;
+    /**
+     * Show a collapsible technical details panel (stack / raw error). `'dev'` (default) shows it only in
+     * development builds; `true` always; `false` never.
+     */
+    showDetails?: boolean | 'dev';
+    /** The inline variant — small, no hero pattern — for inside a table, card or panel. Defaults to `false`. */
+    compact?: boolean;
+    /**
+     * The server's trace id, shown under the message with a copy button (it matches a report to the server
+     * log). Defaults to the one on `error` (`error.traceId` / `error.response.data.traceId`); `false` hides it.
+     */
+    traceId?: string | false;
+    /**
+     * Per-field validation messages (`{ field: message }`), listed as the description when there's no explicit
+     * `description`. Defaults to the ones on `error` (`error.fieldErrors` / `error.response.data.errors`);
+     * `false` hides them. In a form, put them on the inputs instead.
+     */
+    fieldErrors?: Record<string, string> | false;
+}
+/**
+ * The "loading failed" counterpart of `EmptyState` — a semantic preset over it: an `error`-tinted
+ * `Danger` puck, a localized "Something went wrong" title, the failure's own message as the description
+ * (extracted from an `Error`, a string, an axios-style `response.data.message`, a `{ message }`, or a raw
+ * `{ status }` response → "Request failed (404)"), an optional **Try again** button (`onRetry`), and a
+ * developer-only details panel with the stack (`showDetails`, default `'dev'`). `compact` is the inline
+ * variant for a table / card. The server's `traceId` (copyable) and a 400's per-field `fieldErrors` are shown
+ * when the error carries them. Announced to assistive tech (`role="alert"`, `aria-live="polite"`).
+ * `forwardRef` to the root; any other `EmptyState` prop (`size`, `pattern`, `action`, …) passes through.
+ */
+export declare const ErrorState: import("react").ForwardRefExoticComponent<ErrorStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ErrorState/ErrorState.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import { type EmptyStateProps } from '../EmptyState';
+import type { IconName } from '../../icons/names';
+export interface ErrorStateProps extends Omit<EmptyStateProps, 'icon' | 'title' | 'color'> {
+    /**
+     * What failed — an `Error`, a string, an axios-style error, a `{ message }` or a raw `{ status }`
+     * response. Its message becomes the description (unless `description` is given) and its stack feeds
+     * the details panel.
+     */
+    error?: unknown;
+    /** Heading. Defaults to the localized "Something went wrong". */
+    title?: ReactNode;
+    /** Leading icon — a known `IconName`, any node, or `false`. Defaults to `Danger`, tinted `error`. */
+    icon?: IconName | ReactNode | false;
+    /** Adds a "Try again" button that calls this (e.g. a query's `refetch`). */
+    onRetry?: () => void;
+    /** Retry button label. Defaults to the localized "Try again". */
+    retryLabel?: ReactNode;
+    /**
+     * Show a collapsible technical details panel (stack / raw error). `'dev'` (default) shows it only in
+     * development builds; `true` always; `false` never.
+     */
+    showDetails?: boolean | 'dev';
+    /** The inline variant — small, no hero pattern — for inside a table, card or panel. Defaults to `false`. */
+    compact?: boolean;
+    /**
+     * The server's trace id, shown under the message with a copy button (it matches a report to the server
+     * log). Defaults to the one on `error` (`error.traceId` / `error.response.data.traceId`); `false` hides it.
+     */
+    traceId?: string | false;
+    /**
+     * Per-field validation messages (`{ field: message }`), listed as the description when there's no explicit
+     * `description`. Defaults to the ones on `error` (`error.fieldErrors` / `error.response.data.errors`);
+     * `false` hides them. In a form, put them on the inputs instead.
+     */
+    fieldErrors?: Record<string, string> | false;
+}
+/**
+ * The "loading failed" counterpart of `EmptyState` — a semantic preset over it: an `error`-tinted
+ * `Danger` puck, a localized "Something went wrong" title, the failure's own message as the description
+ * (extracted from an `Error`, a string, an axios-style `response.data.message`, a `{ message }`, or a raw
+ * `{ status }` response → "Request failed (404)"), an optional **Try again** button (`onRetry`), and a
+ * developer-only details panel with the stack (`showDetails`, default `'dev'`). `compact` is the inline
+ * variant for a table / card. The server's `traceId` (copyable) and a 400's per-field `fieldErrors` are shown
+ * when the error carries them. Announced to assistive tech (`role="alert"`, `aria-live="polite"`).
+ * `forwardRef` to the root; any other `EmptyState` prop (`size`, `pattern`, `action`, …) passes through.
+ */
+export declare const ErrorState: import("react").ForwardRefExoticComponent<ErrorStateProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ErrorState/QueryError.d.cts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ErrorStateProps } from './ErrorState';
+export interface QueryErrorProps extends ErrorStateProps {
+    /** The query's error (`query.error`). `null` / `undefined` → renders nothing. */
+    error: unknown;
+    /**
+     * The user-facing sentence ("Could not load players."). Shown instead of the raw message, which then
+     * only appears in the (dev) details panel. Same as `description`, which wins when both are set.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * The react-query-style one-liner: `<QueryError error={users.error} onRetry={users.refetch}
+ * fallback="Could not load players." />`. Renders nothing while `error` is empty, otherwise an
+ * `ErrorState` — **compact by default** (it usually sits where the data would, inside a card or table
+ * area; pass `compact={false}` for the hero). Everything else passes through to `ErrorState`.
+ */
+export declare const QueryError: import("react").ForwardRefExoticComponent<QueryErrorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ErrorState/QueryError.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ErrorStateProps } from './ErrorState';
+export interface QueryErrorProps extends ErrorStateProps {
+    /** The query's error (`query.error`). `null` / `undefined` → renders nothing. */
+    error: unknown;
+    /**
+     * The user-facing sentence ("Could not load players."). Shown instead of the raw message, which then
+     * only appears in the (dev) details panel. Same as `description`, which wins when both are set.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * The react-query-style one-liner: `<QueryError error={users.error} onRetry={users.refetch}
+ * fallback="Could not load players." />`. Renders nothing while `error` is empty, otherwise an
+ * `ErrorState` — **compact by default** (it usually sits where the data would, inside a card or table
+ * area; pass `compact={false}` for the hero). Everything else passes through to `ErrorState`.
+ */
+export declare const QueryError: import("react").ForwardRefExoticComponent<QueryErrorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ErrorState/errorMessage.d.cts

@@ -0,0 +1,26 @@
+/**
+ * Pull a human-readable message out of whatever was thrown / returned — the shapes admin apps actually see:
+ *
+ * 1. an axios-style error with a server body — `error.response.data.message` (the backend's own sentence)
+ * 2. an `Error` (or anything with a string `message`) — `error.message`
+ * 3. a raw HTTP response / status object — `{ status: 404, statusText }` → `"Request failed (404)"`
+ * 4. a plain string
+ *
+ * Returns `undefined` when nothing usable is found (the caller shows its generic fallback). Pure — pass
+ * `requestFailed` to localize case 3 (`{status}` is interpolated).
+ */
+export declare function getErrorMessage(error: unknown, requestFailed?: (status: number) => string): string | undefined;
+/** A stack / detail dump for the developer-facing details panel (Error → `name: message` + stack). */
+export declare function getErrorDetails(error: unknown): string | undefined;
+/**
+ * The server's **trace id** for a failed request — the handle that matches a user's report to the server
+ * log. Read from `error.traceId` (e.g. an app `ApiError` carrying the response envelope's `traceId`) or an
+ * axios-style `error.response.data.traceId`. `undefined` when there is none.
+ */
+export declare function getErrorTraceId(error: unknown): string | undefined;
+/**
+ * Per-field validation messages of a `400` — `{ field: 'message' }`. Read from `error.fieldErrors` (an app
+ * `ApiError`) or an axios-style `error.response.data.errors` (ASP.NET sends a string **or** an array of
+ * strings per field — the first string wins). `undefined` when there are none.
+ */
+export declare function getErrorFieldErrors(error: unknown): Record<string, string> | undefined;