@techzyapp/ui-library 1.0.4 → 1.0.9

package/dist/components/Flag/index.js

@@ -1,4 +1,4 @@
-import { F as e, F as f } from "../../Flag-BWCX6oSR.js";
+import { F as e, F as f } from "../../Flag-Ck1xK22A.js";
 export {
   e as Flag,
   f as default

package/dist/components/Flex/Flex.d.cts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../theme/breakpoints';
 /** A space value: a `--tz-space-*` scale key, a raw number (px), or any CSS length string. */
 export type Spacing = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | (string & {});
 export type FlexDirection = 'row' | 'column';
@@ -7,18 +8,18 @@ export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'e
 /** Resolve a `Spacing` to a CSS value — scale key → token, number → px, else passthrough. */
 export declare function space(value?: Spacing): string | undefined;
 export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-    /** Main axis. `row` (default) or `column`. */
-    direction?: FlexDirection;
-    /** Gap between children (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items`. */
-    align?: FlexAlign;
-    /** `justify-content`. */
-    justify?: FlexJustify;
-    /** Allow children to wrap onto multiple lines. */
-    wrap?: boolean;
-    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). */
-    padding?: Spacing;
+    /** Main axis. `row` (default) or `column`. Responsive: a breakpoint map, e.g. `{ xs: 'column', md: 'row' }`. */
+    direction?: Responsive<FlexDirection>;
+    /** Gap between children (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items`. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** `justify-content`. Responsive: a breakpoint map. */
+    justify?: Responsive<FlexJustify>;
+    /** Allow children to wrap onto multiple lines. Responsive: a breakpoint map. */
+    wrap?: Responsive<boolean>;
+    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-flex` instead of `flex`. */
     inline?: boolean;
     /** The box's own `flex-grow` (when this Flex is itself a flex child). `true` = `1`. */
@@ -27,6 +28,8 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A flexbox layout primitive — set direction/gap/alignment/padding via props instead of inline styles.
  * `Row` and `Col` are thin presets over it. Spacing accepts `--tz-space-*` keys (`"md"`), raw px
- * numbers, or any CSS value; consumer `style` still merges last.
+ * numbers, or any CSS value; consumer `style` still merges last. Every layout prop is **responsive** —
+ * pass a **desktop-first** breakpoint map (`{ xs, sm, md, lg, xl }`) to vary it by viewport (e.g.
+ * `direction={{ xs: 'column', md: 'row' }}`), resolved via the shared breakpoints.
  */
 export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Flex.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../theme/breakpoints';
 /** A space value: a `--tz-space-*` scale key, a raw number (px), or any CSS length string. */
 export type Spacing = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | (string & {});
 export type FlexDirection = 'row' | 'column';
@@ -7,18 +8,18 @@ export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'e
 /** Resolve a `Spacing` to a CSS value — scale key → token, number → px, else passthrough. */
 export declare function space(value?: Spacing): string | undefined;
 export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-    /** Main axis. `row` (default) or `column`. */
-    direction?: FlexDirection;
-    /** Gap between children (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items`. */
-    align?: FlexAlign;
-    /** `justify-content`. */
-    justify?: FlexJustify;
-    /** Allow children to wrap onto multiple lines. */
-    wrap?: boolean;
-    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). */
-    padding?: Spacing;
+    /** Main axis. `row` (default) or `column`. Responsive: a breakpoint map, e.g. `{ xs: 'column', md: 'row' }`. */
+    direction?: Responsive<FlexDirection>;
+    /** Gap between children (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items`. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** `justify-content`. Responsive: a breakpoint map. */
+    justify?: Responsive<FlexJustify>;
+    /** Allow children to wrap onto multiple lines. Responsive: a breakpoint map. */
+    wrap?: Responsive<boolean>;
+    /** Padding (token key, px number, or CSS value — e.g. `"24px 8px"`). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-flex` instead of `flex`. */
     inline?: boolean;
     /** The box's own `flex-grow` (when this Flex is itself a flex child). `true` = `1`. */
@@ -27,6 +28,8 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A flexbox layout primitive — set direction/gap/alignment/padding via props instead of inline styles.
  * `Row` and `Col` are thin presets over it. Spacing accepts `--tz-space-*` keys (`"md"`), raw px
- * numbers, or any CSS value; consumer `style` still merges last.
+ * numbers, or any CSS value; consumer `style` still merges last. Every layout prop is **responsive** —
+ * pass a **desktop-first** breakpoint map (`{ xs, sm, md, lg, xl }`) to vary it by viewport (e.g.
+ * `direction={{ xs: 'column', md: 'row' }}`), resolved via the shared breakpoints.
  */
 export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Grid.d.cts

@@ -1,8 +1,9 @@
 import { type HTMLAttributes } from 'react';
 import { type FlexAlign, type Spacing } from './Flex';
+import { type Responsive } from '../../theme/breakpoints';
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. */
-    cols?: number | string;
+    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. Responsive: a breakpoint map, e.g. `{ xs: 1, md: 3 }`. */
+    cols?: Responsive<number | string>;
     /** Responsive columns: every cell at least this wide, auto-fitting to the width (overrides `cols`). */
     minItemWidth?: Spacing;
     /**
@@ -10,12 +11,12 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
      * so a few items stay their natural size rather than stretching to fill the row. Defaults to `false`.
      */
     fill?: boolean;
-    /** Gap between cells (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items` for the cells. */
-    align?: FlexAlign;
-    /** Padding (token key, px number, or CSS value). */
-    padding?: Spacing;
+    /** Gap between cells (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items` for the cells. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** Padding (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-grid`. */
     inline?: boolean;
 }
@@ -23,6 +24,7 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * A CSS-grid layout primitive — lay children out in columns via props. Use `cols` for a fixed count
  * or `minItemWidth` for a responsive grid that auto-fits as many equal columns as fit (collapsing to
  * one on narrow widths). Spacing accepts `--tz-space-*` keys, px numbers, or any CSS value; consumer
- * `style` merges last.
+ * `style` merges last. `cols` / `gap` / `align` / `padding` are **responsive** — pass a **desktop-first**
+ * breakpoint map (`{ xs, sm, md, lg, xl }`) to vary by viewport (e.g. `cols={{ xs: 1, md: 3 }}`).
  */
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/Grid.d.ts

@@ -1,8 +1,9 @@
 import { type HTMLAttributes } from 'react';
 import { type FlexAlign, type Spacing } from './Flex';
+import { type Responsive } from '../../theme/breakpoints';
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. */
-    cols?: number | string;
+    /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. Responsive: a breakpoint map, e.g. `{ xs: 1, md: 3 }`. */
+    cols?: Responsive<number | string>;
     /** Responsive columns: every cell at least this wide, auto-fitting to the width (overrides `cols`). */
     minItemWidth?: Spacing;
     /**
@@ -10,12 +11,12 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
      * so a few items stay their natural size rather than stretching to fill the row. Defaults to `false`.
      */
     fill?: boolean;
-    /** Gap between cells (token key, px number, or CSS value). */
-    gap?: Spacing;
-    /** `align-items` for the cells. */
-    align?: FlexAlign;
-    /** Padding (token key, px number, or CSS value). */
-    padding?: Spacing;
+    /** Gap between cells (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    gap?: Responsive<Spacing>;
+    /** `align-items` for the cells. Responsive: a breakpoint map. */
+    align?: Responsive<FlexAlign>;
+    /** Padding (token key, px number, or CSS value). Responsive: a breakpoint map. */
+    padding?: Responsive<Spacing>;
     /** Render as `inline-grid`. */
     inline?: boolean;
 }
@@ -23,6 +24,7 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * A CSS-grid layout primitive — lay children out in columns via props. Use `cols` for a fixed count
  * or `minItemWidth` for a responsive grid that auto-fits as many equal columns as fit (collapsing to
  * one on narrow widths). Spacing accepts `--tz-space-*` keys, px numbers, or any CSS value; consumer
- * `style` merges last.
+ * `style` merges last. `cols` / `gap` / `align` / `padding` are **responsive** — pass a **desktop-first**
+ * breakpoint map (`{ xs, sm, md, lg, xl }`) to vary by viewport (e.g. `cols={{ xs: 1, md: 3 }}`).
  */
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flex-CqL3Ghda.cjs"),r=require("../../Col-R5mAy8T9.cjs"),l=require("../../Grid-Bw95bKkJ.cjs");exports.Flex=e.Flex;exports.default=e.Flex;exports.Col=r.Col;exports.Row=r.Row;exports.Grid=l.Grid;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flex-C6tHC8n7.cjs"),r=require("../../Col-BdQeyKEX.cjs"),l=require("../../Grid-frN0D9lR.cjs");exports.Flex=e.Flex;exports.default=e.Flex;exports.Col=r.Col;exports.Row=r.Row;exports.Grid=l.Grid;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Flex/index.js

@@ -1,6 +1,6 @@
-import { F as a, F as e } from "../../Flex-Bj3mMF5A.js";
-import { C as f, R as t } from "../../Col-D2TfZKiM.js";
-import { G as l } from "../../Grid-CY-syhTX.js";
+import { F as a, F as e } from "../../Flex-BFn4P1tJ.js";
+import { C as f, R as t } from "../../Col-B51RlwWP.js";
+import { G as l } from "../../Grid-5k6dy-F5.js";
 export {
   f as Col,
   a as Flex,

package/dist/components/FullscreenToggle/index.cjs

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

package/dist/components/FullscreenToggle/index.js

@@ -1,4 +1,4 @@
-import { F as a, F as o } from "../../FullscreenToggle-oWzYqUPH.js";
+import { F as a, F as o } from "../../FullscreenToggle-DmC0jTay.js";
 export {
   a as FullscreenToggle,
   o as default

package/dist/components/IconButton/index.cjs

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

package/dist/components/IconButton/index.js

@@ -1,4 +1,4 @@
-import { I as a, I } from "../../IconButton-CBusrDa9.js";
+import { I as a, I } from "../../IconButton-B8FPGgDn.js";
 export {
   a as IconButton,
   I as default

package/dist/components/List/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../List-CNz2M3-q.cjs"),t=require("../../ListItem-RH-D-Wey.cjs");exports.List=e.List;exports.default=e.List;exports.ListItem=t.ListItem;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../List-ChXO0Hz-.cjs"),t=require("../../ListItem-DWQorRxG.cjs");exports.List=e.List;exports.default=e.List;exports.ListItem=t.ListItem;
 //# sourceMappingURL=index.cjs.map

package/dist/components/List/index.js

@@ -1,5 +1,5 @@
-import { L, L as a } from "../../List-BHgFI9Ll.js";
-import { L as o } from "../../ListItem-B4yqZR-Z.js";
+import { L, L as a } from "../../List-LqbfF6gU.js";
+import { L as o } from "../../ListItem-B4Upc0Hy.js";
 export {
   L as List,
   o as ListItem,

package/dist/components/Loader/index.cjs

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

package/dist/components/Loader/index.js

@@ -1,4 +1,4 @@
-import { L as o, L as r } from "../../Loader-C4JoXOyA.js";
+import { L as o, L as r } from "../../Loader-UzzqvFyo.js";
 export {
   o as Loader,
   r as default

package/dist/components/Masonry/Masonry.d.cts

@@ -1,28 +1,28 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
-import { type Breakpoint } from '../../theme/breakpoints';
+import { type Responsive } from '../../theme/breakpoints';
 export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Number of columns. Either a fixed number, or a **mobile-first** map keyed by the library's
-     * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies from that breakpoint's min-width up,
-     * until a larger defined one overrides it, with the smallest defined key as the base. Defaults to
-     * `3`. Ignored when `minColumnWidth` is set.
+     * Number of columns. Either a fixed number, or a **desktop-first** map keyed by the shared
+     * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies at that breakpoint's max-width and
+     * below, until a smaller one overrides it, with the largest defined key as the base for wider screens.
+     * Defaults to `3`. Ignored when `minColumnWidth` is set.
      *
      * @example columns={2}                 // always 2
-     * @example columns={{ xs: 1, md: 2 }}  // 1 below md (768px), 2 at md and up
+     * @example columns={{ xs: 1, md: 3 }}  // 1 on phones (≤767.98), 3 up to md, 3 above
      */
-    columns?: number | Partial<Record<Breakpoint, number>>;
+    columns?: Responsive<number>;
     /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */
     minColumnWidth?: number;
     /**
      * Gap between items, horizontally and vertically. Either a single value (a `--tz-space-*` key, a px
-     * number, or any CSS value) or a **mobile-first** breakpoint map — same resolution as `columns`.
+     * number, or a px-like CSS value) or a **desktop-first** breakpoint map — same resolution as `columns`.
      * Defaults to `md`.
      *
      * @example gap="md"
      * @example gap={{ xs: 'sm', md: 'lg' }}  // tighter on phones, looser from md up
      */
-    gap?: Spacing | Partial<Record<Breakpoint, Spacing>>;
+    gap?: Responsive<Spacing>;
     /** Padding around the grid (token key, px number, or CSS value). */
     padding?: Spacing;
     /** The items to lay out. */
@@ -31,11 +31,18 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A masonry layout — packs items of varying heights into balanced columns, always adding the next item
  * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed
- * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),
- * so it works with any children. `columns` is either a fixed number or a mobile-first breakpoint map
- * (`{ xs: 1, md: 2 }`); `minColumnWidth` is a responsive alternative (and overrides `columns`); `gap`
- * spaces items on both axes and is itself responsive the same way (`{ xs: 'sm', md: 'lg' }`).
- * Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer `style` merges last.
- * Reading order flows left-to-right across the columns.
+ * grid. Reading order flows left-to-right across the columns.
+ *
+ * **Every child is rendered once, in a single stable container, and placed by absolute positioning**
+ * (measured in the DOM; a `ResizeObserver` re-lays-out on width / content changes). Resizing only moves
+ * each child (its `transform`) — a child **never** changes DOM parent, so React never remounts it and
+ * **child state is preserved** across resizes (an input's text, a nested widget's items, focus). Until
+ * the first measure it falls back to a single stacked column (SSR / first paint), then switches to the
+ * measured layout — same elements, no remount.
+ *
+ * `columns` is a fixed number or a desktop-first breakpoint map (`{ xs: 1, md: 3 }`); `minColumnWidth`
+ * is a responsive alternative (overrides `columns`); `gap` spaces items on both axes and is itself
+ * responsive the same way. Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer
+ * `style` merges last.
  */
 export declare const Masonry: import("react").ForwardRefExoticComponent<MasonryProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Masonry/Masonry.d.ts

@@ -1,28 +1,28 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
-import { type Breakpoint } from '../../theme/breakpoints';
+import { type Responsive } from '../../theme/breakpoints';
 export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Number of columns. Either a fixed number, or a **mobile-first** map keyed by the library's
-     * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies from that breakpoint's min-width up,
-     * until a larger defined one overrides it, with the smallest defined key as the base. Defaults to
-     * `3`. Ignored when `minColumnWidth` is set.
+     * Number of columns. Either a fixed number, or a **desktop-first** map keyed by the shared
+     * `Breakpoint`s (`xs`/`sm`/`md`/`lg`/`xl`) — each entry applies at that breakpoint's max-width and
+     * below, until a smaller one overrides it, with the largest defined key as the base for wider screens.
+     * Defaults to `3`. Ignored when `minColumnWidth` is set.
      *
      * @example columns={2}                 // always 2
-     * @example columns={{ xs: 1, md: 2 }}  // 1 below md (768px), 2 at md and up
+     * @example columns={{ xs: 1, md: 3 }}  // 1 on phones (≤767.98), 3 up to md, 3 above
      */
-    columns?: number | Partial<Record<Breakpoint, number>>;
+    columns?: Responsive<number>;
     /** Responsive: fit as many equal columns as this min pixel width allows (overrides `columns`). */
     minColumnWidth?: number;
     /**
      * Gap between items, horizontally and vertically. Either a single value (a `--tz-space-*` key, a px
-     * number, or any CSS value) or a **mobile-first** breakpoint map — same resolution as `columns`.
+     * number, or a px-like CSS value) or a **desktop-first** breakpoint map — same resolution as `columns`.
      * Defaults to `md`.
      *
      * @example gap="md"
      * @example gap={{ xs: 'sm', md: 'lg' }}  // tighter on phones, looser from md up
      */
-    gap?: Spacing | Partial<Record<Breakpoint, Spacing>>;
+    gap?: Responsive<Spacing>;
     /** Padding around the grid (token key, px number, or CSS value). */
     padding?: Spacing;
     /** The items to lay out. */
@@ -31,11 +31,18 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A masonry layout — packs items of varying heights into balanced columns, always adding the next item
  * to the **shortest** column (Pinterest-style), so columns stay level rather than following a fixed
- * grid. Item heights are measured in the DOM (a `ResizeObserver` re-balances on content/size changes),
- * so it works with any children. `columns` is either a fixed number or a mobile-first breakpoint map
- * (`{ xs: 1, md: 2 }`); `minColumnWidth` is a responsive alternative (and overrides `columns`); `gap`
- * spaces items on both axes and is itself responsive the same way (`{ xs: 'sm', md: 'lg' }`).
- * Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer `style` merges last.
- * Reading order flows left-to-right across the columns.
+ * grid. Reading order flows left-to-right across the columns.
+ *
+ * **Every child is rendered once, in a single stable container, and placed by absolute positioning**
+ * (measured in the DOM; a `ResizeObserver` re-lays-out on width / content changes). Resizing only moves
+ * each child (its `transform`) — a child **never** changes DOM parent, so React never remounts it and
+ * **child state is preserved** across resizes (an input's text, a nested widget's items, focus). Until
+ * the first measure it falls back to a single stacked column (SSR / first paint), then switches to the
+ * measured layout — same elements, no remount.
+ *
+ * `columns` is a fixed number or a desktop-first breakpoint map (`{ xs: 1, md: 3 }`); `minColumnWidth`
+ * is a responsive alternative (overrides `columns`); `gap` spaces items on both axes and is itself
+ * responsive the same way. Inline-styled like the other layout primitives (`Flex` / `Grid`); consumer
+ * `style` merges last.
  */
 export declare const Masonry: import("react").ForwardRefExoticComponent<MasonryProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Masonry/index.cjs

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

package/dist/components/Masonry/index.js

@@ -1,4 +1,4 @@
-import { M as r, M as s } from "../../Masonry-BTvtDdnt.js";
+import { M as r, M as s } from "../../Masonry-BsRWG-oN.js";
 export {
   r as Masonry,
   s as default

package/dist/components/Modal/index.cjs

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

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import { M, M as d } from "../../Modal-BuaPDlKV.js";
+import { M, M as d } from "../../Modal-XMRDPHvQ.js";
 export {
   M as Modal,
   d as default

package/dist/components/MultiSelect/index.cjs

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

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as a, M as l } from "../../MultiSelect-BGRT_B60.js";
+import { M as a, M as l } from "../../MultiSelect-BPLctumx.js";
 export {
   a as MultiSelect,
   l as default

package/dist/components/NumberField/index.cjs

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

package/dist/components/NumberField/index.js

@@ -1,4 +1,4 @@
-import { N as r, N } from "../../NumberField-DBvhSQCw.js";
+import { N as r, N } from "../../NumberField-X2HsSpu9.js";
 export {
   r as NumberField,
   N as default

package/dist/components/OtpField/index.cjs

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

package/dist/components/OtpField/index.js

@@ -1,4 +1,4 @@
-import { O as t, O } from "../../OtpField-CTq-CUbF.js";
+import { O as t, O } from "../../OtpField-CB05q0NX.js";
 export {
   t as OtpField,
   O as default

package/dist/components/PageLayout/index.cjs

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

package/dist/components/PageLayout/index.js

@@ -1,4 +1,4 @@
-import { P as o, P as t } from "../../PageLayout-DddzYw2B.js";
+import { P as o, P as t } from "../../PageLayout-WKWnj5cw.js";
 export {
   o as PageLayout,
   t as default

package/dist/components/PageNotFound/PageNotFound.d.cts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type EmptyStateSize } from '../EmptyState';
+import type { IconName } from '../../icons/names';
+export interface PageNotFoundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Hero glyph — an `IconName`, any node, or `false` to hide it. Defaults to `SearchStatus`. */
+    icon?: IconName | ReactNode | false;
+    /** Heading. Defaults to the localized `notFound.title`. */
+    title?: ReactNode;
+    /** Muted description. Defaults to the localized `notFound.description`. */
+    description?: ReactNode;
+    /** Action button label. Defaults to the localized `notFound.action`. */
+    actionLabel?: ReactNode;
+    /** Where the action navigates. Defaults to the first allowed menu page (RBAC-aware), else `/`. */
+    to?: string;
+    /** Show the "back home" action button. Defaults to `true` (hidden anyway when there's no router). */
+    showAction?: boolean;
+    /** Faded-grid hero backdrop — passed to `EmptyState`. Defaults to `true` (its default). */
+    pattern?: boolean;
+    /** Size — passed to `EmptyState`. Defaults to `md`. */
+    size?: EmptyStateSize;
+}
+/**
+ * The shared **404** page. Drop it straight into TanStack Router as the
+ * `defaultNotFoundComponent` — zero props needed: the title/description/action strings come from the
+ * built-in i18n (`useT`), so they translate with the panel language, and the action navigates to the
+ * **first allowed menu page** (the same RBAC-aware target as `FirstRouteRedirect`), falling back to
+ * `/`. Built on `EmptyState` (hero glyph + title + description + action, `pattern` on by default), so
+ * it renders inside the `RootLayout` content area with the shell/sidebar intact. Lenient: with no
+ * router context the `EmptyState` still renders, just without the action button. Token-only styling.
+ *
+ * @example
+ * const router = createRouter({ routeTree, defaultNotFoundComponent: PageNotFound })
+ */
+export declare const PageNotFound: import("react").ForwardRefExoticComponent<PageNotFoundProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PageNotFound/PageNotFound.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type EmptyStateSize } from '../EmptyState';
+import type { IconName } from '../../icons/names';
+export interface PageNotFoundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Hero glyph — an `IconName`, any node, or `false` to hide it. Defaults to `SearchStatus`. */
+    icon?: IconName | ReactNode | false;
+    /** Heading. Defaults to the localized `notFound.title`. */
+    title?: ReactNode;
+    /** Muted description. Defaults to the localized `notFound.description`. */
+    description?: ReactNode;
+    /** Action button label. Defaults to the localized `notFound.action`. */
+    actionLabel?: ReactNode;
+    /** Where the action navigates. Defaults to the first allowed menu page (RBAC-aware), else `/`. */
+    to?: string;
+    /** Show the "back home" action button. Defaults to `true` (hidden anyway when there's no router). */
+    showAction?: boolean;
+    /** Faded-grid hero backdrop — passed to `EmptyState`. Defaults to `true` (its default). */
+    pattern?: boolean;
+    /** Size — passed to `EmptyState`. Defaults to `md`. */
+    size?: EmptyStateSize;
+}
+/**
+ * The shared **404** page. Drop it straight into TanStack Router as the
+ * `defaultNotFoundComponent` — zero props needed: the title/description/action strings come from the
+ * built-in i18n (`useT`), so they translate with the panel language, and the action navigates to the
+ * **first allowed menu page** (the same RBAC-aware target as `FirstRouteRedirect`), falling back to
+ * `/`. Built on `EmptyState` (hero glyph + title + description + action, `pattern` on by default), so
+ * it renders inside the `RootLayout` content area with the shell/sidebar intact. Lenient: with no
+ * router context the `EmptyState` still renders, just without the action button. Token-only styling.
+ *
+ * @example
+ * const router = createRouter({ routeTree, defaultNotFoundComponent: PageNotFound })
+ */
+export declare const PageNotFound: import("react").ForwardRefExoticComponent<PageNotFoundProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PageNotFound/index.cjs

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

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

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

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

@@ -0,0 +1,2 @@
+export { PageNotFound, PageNotFound as default } from './PageNotFound';
+export type { PageNotFoundProps } from './PageNotFound';

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

@@ -0,0 +1,2 @@
+export { PageNotFound, PageNotFound as default } from './PageNotFound';
+export type { PageNotFoundProps } from './PageNotFound';

package/dist/components/PageNotFound/index.js

@@ -0,0 +1,6 @@
+import { P as e, P as t } from "../../PageNotFound-CmT-Wr9m.js";
+export {
+  e as PageNotFound,
+  t as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Pagination/index.cjs

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

package/dist/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import { P as t, P } from "../../Pagination-CN9V8M5C.js";
+import { P as t, P } from "../../Pagination-BuP4N1bj.js";
 export {
   t as Pagination,
   P as default

package/dist/components/RemoveDialog/index.cjs

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

package/dist/components/RemoveDialog/index.js

@@ -1,4 +1,4 @@
-import { R as o, R } from "../../RemoveDialog-Bvt6sH79.js";
+import { R as o, R } from "../../RemoveDialog-DU6MqkO8.js";
 export {
   o as RemoveDialog,
   R as default

package/dist/components/RichTextEditor/index.cjs

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

package/dist/components/RichTextEditor/index.js

@@ -1,4 +1,4 @@
-import { R as e, R as o } from "../../RichTextEditor-BTx8Py3I.js";
+import { R as e, R as o } from "../../RichTextEditor-k-NlWb4Y.js";
 export {
   e as RichTextEditor,
   o as default