@techzyapp/ui-library 1.0.42 → 1.0.44

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -49,8 +49,9 @@ export interface RichTextEditorProps {
  * A rich text editor built on **Lexical** (an optional peer — install `lexical` + `@lexical/*`). Its
  * value is an **HTML string**: bold/italic/underline/strikethrough/inline-code, headings, lists
  * (bullet/ordered/check), links, block quote, plus **images** (insert by URL or upload — embedded as a
- * base64 `data:` URL unless an `onImageUpload` handler is given) and **video** embeds (paste a
- * YouTube/Vimeo/file URL). Markdown shortcuts work while typing (`# `, `- `, `> `, …). The toolbar is
+ * base64 `data:` URL unless an `onImageUpload` handler is given; each image's **Alt Text** button writes
+ * its `<img alt>`) and **video** embeds (paste a YouTube/Vimeo/file URL); media goes into a paragraph of
+ * its own at the caret. Markdown shortcuts work while typing (`# `, `- `, `> `, …). The toolbar is
  * built from the library's own `IconButton`/`Button`/`Dropdown`, and the content is styled entirely
  * with `--tz-*` tokens. Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); inside a
  * `<Form>`, a `name` prop auto-binds the HTML value (validate with e.g. `z.string().min(1)`).

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-C9jT2cLl.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-BhVE1q4U.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-DrwJUEYz.js";
+import { R as e, R as o } from "../../RichTextEditor-DQz9jGD3.js";
 export {
   e as RichTextEditor,
   o as default

package/dist/components/RichTextEditor/nodes/ImageNode.d.cts

@@ -1,14 +1,15 @@
 import { DecoratorNode, type DOMConversionMap, type DOMExportOutput, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /** Serialized shape of an {@link ImageNode} (editor-state JSON). */
 export type SerializedImageNode = Spread<{
     src: string;
     alt: string;
 }, SerializedLexicalNode>;
 /**
- * A block-level image node. Renders a plain `<img>` (the `src` may be a remote URL or a base64
- * `data:` URL when inserted via upload). Serializes to a clean `<img src alt>` for the HTML value and
- * parses back from any `<img>` on paste/load.
+ * An inline image node — it lives inside a paragraph (`<p><img></p>`). Renders through `ImageView` (the
+ * `<img>` in a block frame + the Alt Text button while editable); the `src` may be a remote URL or a
+ * base64 `data:` URL when inserted via upload. Serializes to a clean `<img src alt>` for the HTML value
+ * and parses back from any `<img>` on paste/load.
  */
 export declare class ImageNode extends DecoratorNode<ReactNode> {
     __src: string;
@@ -20,11 +21,13 @@ export declare class ImageNode extends DecoratorNode<ReactNode> {
     exportJSON(): SerializedImageNode;
     static importDOM(): DOMConversionMap | null;
     exportDOM(): DOMExportOutput;
-    /** A block wrapper; the actual `<img>` is rendered by {@link decorate}. */
+    /** A `display: contents` wrapper; the image itself is rendered by {@link decorate}. */
     createDOM(): HTMLElement;
     updateDOM(): false;
     getSrc(): string;
     getAltText(): string;
+    /** Set the image's alt text (use inside an `editor.update`). */
+    setAltText(alt: string): void;
     decorate(): ReactNode;
 }
 /** Creates an `ImageNode` (use inside an `editor.update`). */

package/dist/components/RichTextEditor/nodes/ImageNode.d.ts

@@ -1,14 +1,15 @@
 import { DecoratorNode, type DOMConversionMap, type DOMExportOutput, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 /** Serialized shape of an {@link ImageNode} (editor-state JSON). */
 export type SerializedImageNode = Spread<{
     src: string;
     alt: string;
 }, SerializedLexicalNode>;
 /**
- * A block-level image node. Renders a plain `<img>` (the `src` may be a remote URL or a base64
- * `data:` URL when inserted via upload). Serializes to a clean `<img src alt>` for the HTML value and
- * parses back from any `<img>` on paste/load.
+ * An inline image node — it lives inside a paragraph (`<p><img></p>`). Renders through `ImageView` (the
+ * `<img>` in a block frame + the Alt Text button while editable); the `src` may be a remote URL or a
+ * base64 `data:` URL when inserted via upload. Serializes to a clean `<img src alt>` for the HTML value
+ * and parses back from any `<img>` on paste/load.
  */
 export declare class ImageNode extends DecoratorNode<ReactNode> {
     __src: string;
@@ -20,11 +21,13 @@ export declare class ImageNode extends DecoratorNode<ReactNode> {
     exportJSON(): SerializedImageNode;
     static importDOM(): DOMConversionMap | null;
     exportDOM(): DOMExportOutput;
-    /** A block wrapper; the actual `<img>` is rendered by {@link decorate}. */
+    /** A `display: contents` wrapper; the image itself is rendered by {@link decorate}. */
     createDOM(): HTMLElement;
     updateDOM(): false;
     getSrc(): string;
     getAltText(): string;
+    /** Set the image's alt text (use inside an `editor.update`). */
+    setAltText(alt: string): void;
     decorate(): ReactNode;
 }
 /** Creates an `ImageNode` (use inside an `editor.update`). */

package/dist/components/RichTextEditor/nodes/VideoNode.d.cts

@@ -11,9 +11,9 @@ export type SerializedVideoNode = Spread<{
  */
 export declare function toVideoEmbedSrc(raw: string): string;
 /**
- * A block-level video node. Direct media files render with `<video controls>`; everything else is
- * treated as an embed and renders in a responsive `<iframe>` (YouTube/Vimeo links are normalized to
- * their embed URL). Serializes to a clean `<video>` / `<iframe>` for the HTML value.
+ * An inline video node — it lives inside a paragraph, like the image. Direct media files render with
+ * `<video controls>`; everything else is treated as an embed and renders in a responsive `<iframe>`
+ * (YouTube/Vimeo links are normalized to their embed URL). Serializes to a clean `<video>` / `<iframe>` for the HTML value.
  */
 export declare class VideoNode extends DecoratorNode<ReactNode> {
     __src: string;
@@ -24,7 +24,7 @@ export declare class VideoNode extends DecoratorNode<ReactNode> {
     exportJSON(): SerializedVideoNode;
     static importDOM(): DOMConversionMap | null;
     exportDOM(): DOMExportOutput;
-    /** A block wrapper; the actual media element is rendered by {@link decorate}. */
+    /** A `display: contents` wrapper; the media element itself is rendered by {@link decorate}. */
     createDOM(): HTMLElement;
     updateDOM(): false;
     getSrc(): string;

package/dist/components/RichTextEditor/nodes/VideoNode.d.ts

@@ -11,9 +11,9 @@ export type SerializedVideoNode = Spread<{
  */
 export declare function toVideoEmbedSrc(raw: string): string;
 /**
- * A block-level video node. Direct media files render with `<video controls>`; everything else is
- * treated as an embed and renders in a responsive `<iframe>` (YouTube/Vimeo links are normalized to
- * their embed URL). Serializes to a clean `<video>` / `<iframe>` for the HTML value.
+ * An inline video node — it lives inside a paragraph, like the image. Direct media files render with
+ * `<video controls>`; everything else is treated as an embed and renders in a responsive `<iframe>`
+ * (YouTube/Vimeo links are normalized to their embed URL). Serializes to a clean `<video>` / `<iframe>` for the HTML value.
  */
 export declare class VideoNode extends DecoratorNode<ReactNode> {
     __src: string;
@@ -24,7 +24,7 @@ export declare class VideoNode extends DecoratorNode<ReactNode> {
     exportJSON(): SerializedVideoNode;
     static importDOM(): DOMConversionMap | null;
     exportDOM(): DOMExportOutput;
-    /** A block wrapper; the actual media element is rendered by {@link decorate}. */
+    /** A `display: contents` wrapper; the media element itself is rendered by {@link decorate}. */
     createDOM(): HTMLElement;
     updateDOM(): false;
     getSrc(): string;

package/dist/components/RootLayout/RootLayout.d.cts

@@ -49,8 +49,9 @@ export interface RootLayoutProps {
     header?: RootLayoutHeader;
     /**
      * The built-in toast viewport, mounted for you so `toast.*()` works app-wide with no extra setup.
-     * Defaults to `true` (a `<Toaster>` with its defaults). Pass `ToasterProps` to configure it
-     * (`{ position, duration }`), or `false` to opt out — e.g. when you mount your own `<Toaster>`.
+     * Defaults to `true` (a `<Toaster>` following the app-wide `config.toast`, else its built-in defaults). Pass
+     * `ToasterProps` (`{ position, duration }`) to override it for this shell — anything unset still falls back to
+     * `config.toast` — or `false` to opt out, e.g. when you mount your own `<Toaster>`.
      */
     toaster?: boolean | ToasterProps;
     /** Routed content — the consumer passes `<Outlet />`. */

package/dist/components/RootLayout/RootLayout.d.ts

@@ -49,8 +49,9 @@ export interface RootLayoutProps {
     header?: RootLayoutHeader;
     /**
      * The built-in toast viewport, mounted for you so `toast.*()` works app-wide with no extra setup.
-     * Defaults to `true` (a `<Toaster>` with its defaults). Pass `ToasterProps` to configure it
-     * (`{ position, duration }`), or `false` to opt out — e.g. when you mount your own `<Toaster>`.
+     * Defaults to `true` (a `<Toaster>` following the app-wide `config.toast`, else its built-in defaults). Pass
+     * `ToasterProps` (`{ position, duration }`) to override it for this shell — anything unset still falls back to
+     * `config.toast` — or `false` to opt out, e.g. when you mount your own `<Toaster>`.
      */
     toaster?: boolean | ToasterProps;
     /** Routed content — the consumer passes `<Outlet />`. */

package/dist/components/RootLayout/index.cjs

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

package/dist/components/RootLayout/index.js

@@ -1,4 +1,4 @@
-import { R as t, R } from "../../RootLayout-CZ2GQ8XA.js";
+import { R as t, R } from "../../RootLayout-CjT5uHlt.js";
 export {
   t as RootLayout,
   R as default

package/dist/components/Select/index.cjs

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

package/dist/components/Select/index.js

@@ -1,4 +1,4 @@
-import { S as t, S } from "../../Select-KGsA8PbI.js";
+import { S as t, S } from "../../Select-DuLDLnnb.js";
 export {
   t as Select,
   S as default

package/dist/components/Sidebar/index.cjs

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

package/dist/components/Sidebar/index.js

@@ -1,4 +1,4 @@
-import { F as r, S as t, S as s } from "../../Sidebar-_pcwxdd8.js";
+import { F as r, S as t, S as s } from "../../Sidebar-DvQmuBNK.js";
 export {
   r as FirstRouteRedirect,
   t as Sidebar,

package/dist/components/Slider/index.cjs

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

package/dist/components/Slider/index.js

@@ -1,4 +1,4 @@
-import { S as r, S } from "../../Slider-Cpc5_dPl.js";
+import { S as r, S } from "../../Slider-D-QjclQJ.js";
 export {
   r as Slider,
   S as default

package/dist/components/SpeedDial/index.cjs

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

package/dist/components/SpeedDial/index.js

@@ -1,4 +1,4 @@
-import { S, a as d, S as i } from "../../SpeedDial-SMMfes9f.js";
+import { S, a as d, S as i } from "../../SpeedDial-BBQ9y6lm.js";
 export {
   S as SpeedDial,
   d as SpeedDialAction,

package/dist/components/Stepper/index.cjs

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

package/dist/components/Stepper/index.js

@@ -1,4 +1,4 @@
-import { S as p, S as r } from "../../Stepper-CR0Mlkq7.js";
+import { S as p, S as r } from "../../Stepper-CU5Y0kfj.js";
 export {
   p as Stepper,
   r as default

package/dist/components/SwatchPicker/index.cjs

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

package/dist/components/SwatchPicker/index.js

@@ -1,4 +1,4 @@
-import { S as r, S as t } from "../../SwatchPicker-BZHRELA-.js";
+import { S as r, S as t } from "../../SwatchPicker-DS4WY2eM.js";
 export {
   r as SwatchPicker,
   t as default

package/dist/components/Table/index.cjs

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

package/dist/components/Table/index.js

@@ -1,4 +1,4 @@
-import { T, T as f } from "../../Table-D-F68lcm.js";
+import { T, T as f } from "../../Table-BECUUZtf.js";
 export {
   T as Table,
   f as default

package/dist/components/Tabs/index.cjs

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

package/dist/components/Tabs/index.js

@@ -1,4 +1,4 @@
-import { T, T as e } from "../../Tabs-DP0aZ5TB.js";
+import { T, T as e } from "../../Tabs-BXAHddi7.js";
 export {
   T as Tabs,
   e as default

package/dist/components/TagsField/index.cjs

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

package/dist/components/TagsField/index.js

@@ -1,4 +1,4 @@
-import { T as s, T } from "../../TagsField-CcY9MTMw.js";
+import { T as s, T } from "../../TagsField-C1SgykAj.js";
 export {
   s as TagsField,
   T as default

package/dist/components/TextField/index.cjs

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

package/dist/components/TextField/index.js

@@ -1,4 +1,4 @@
-import { T as t, T } from "../../TextField-0WvJsHhA.js";
+import { T as t, T } from "../../TextField-oZI7thoU.js";
 export {
   t as TextField,
   T as default

package/dist/components/ThemeToggle/index.cjs

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

package/dist/components/ThemeToggle/index.js

@@ -1,4 +1,4 @@
-import { T as a, T as o } from "../../ThemeToggle-DmCePuTy.js";
+import { T as a, T as o } from "../../ThemeToggle-5uHCUsX7.js";
 export {
   a as ThemeToggle,
   o as default

package/dist/components/TimePicker/index.cjs

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

package/dist/components/TimePicker/index.js

@@ -1,4 +1,4 @@
-import { T as r, T } from "../../TimePicker-DJDuSxAg.js";
+import { T as r, T } from "../../TimePicker-Dl5p833O.js";
 export {
   r as TimePicker,
   T as default

package/dist/components/Timeline/Timeline.d.cts

@@ -2,6 +2,8 @@ import { type OlHTMLAttributes, type ReactNode } from 'react';
 import type { ThemeColor } from '../../theme';
 import type { IconName } from '../../icons/names';
 export type TimelineSize = 'sm' | 'md' | 'lg';
+/** Node style for icon nodes: a soft tinted circle, or a circle filled with the color (contrast icon). */
+export type TimelineVariant = 'soft' | 'filled';
 /** A single entry for the data-driven `items` prop. */
 export interface TimelineEntry {
     /** Title line. */
@@ -10,10 +12,12 @@ export interface TimelineEntry {
     time?: ReactNode;
     /** Body content under the caption — any node. */
     content?: ReactNode;
-    /** Node icon (soft tinted circle) — a known `IconName` or any node. Omit for a small dot node. */
+    /** Node icon (a soft tinted or `filled` circle) — a known `IconName` or any node. Omit for a small dot node. */
     icon?: IconName | ReactNode;
     /** Theme palette token tinting this entry's node (overrides the timeline's `color`). */
     color?: ThemeColor;
+    /** This entry's node style (overrides the timeline's `variant`) — e.g. the current step `filled`. */
+    variant?: TimelineVariant;
 }
 export interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'color'> {
     /** Data-driven entries — an alternative to passing `<TimelineItem>` children. */
@@ -22,14 +26,22 @@ export interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>,
     size?: TimelineSize;
     /** Theme palette token tinting the nodes. Defaults to `primary` (a per-item `color` wins). */
     color?: ThemeColor;
+    /**
+     * Icon-node style: `'soft'` (default) — a tinted circle with the icon in the color; `'filled'` — a circle
+     * filled with the color, the icon in its contrast color. A per-item `variant` wins. Dot nodes (no `icon`)
+     * are already solid and look the same either way.
+     */
+    variant?: TimelineVariant;
     /** `<TimelineItem>` children (used when `items` is not given). */
     children?: ReactNode;
 }
 /**
  * A vertical timeline — events on a rail (order tracking, activity feeds, audit logs). Data-driven via
- * **`items`** (`{ label?, time?, content?, icon?, color? }[]`) or as `<TimelineItem>` children. An
- * entry **with** an `icon` gets a soft tinted circle node; one **without** gets a small dot — mix them
- * freely, and tint any node per item via its `color` (e.g. `success` for a completed event). `size`
+ * **`items`** (`{ label?, time?, content?, icon?, color?, variant? }[]`) or as `<TimelineItem>` children.
+ * An entry **with** an `icon` gets a circle node — soft tinted, or filled with `variant="filled"`; one
+ * **without** gets a small dot — mix them freely, and tint any node per item via its `color` (e.g. `success`
+ * for a completed event). Each body fills the row, so block content (a `Grid`, a `ChoiceCardGroup`, a
+ * `FileUploader`) lays out at full width — the timeline doubles as a section rail. `size`
  * (`sm`/`md`/`lg`) scales the nodes and type together. Renders a semantic `<ol>`/`<li>` list (name it
  * with `aria-label`); the rail is a hairline that hides itself after the last entry. Styling uses
  * `--tz-*` tokens.

package/dist/components/Timeline/Timeline.d.ts

@@ -2,6 +2,8 @@ import { type OlHTMLAttributes, type ReactNode } from 'react';
 import type { ThemeColor } from '../../theme';
 import type { IconName } from '../../icons/names';
 export type TimelineSize = 'sm' | 'md' | 'lg';
+/** Node style for icon nodes: a soft tinted circle, or a circle filled with the color (contrast icon). */
+export type TimelineVariant = 'soft' | 'filled';
 /** A single entry for the data-driven `items` prop. */
 export interface TimelineEntry {
     /** Title line. */
@@ -10,10 +12,12 @@ export interface TimelineEntry {
     time?: ReactNode;
     /** Body content under the caption — any node. */
     content?: ReactNode;
-    /** Node icon (soft tinted circle) — a known `IconName` or any node. Omit for a small dot node. */
+    /** Node icon (a soft tinted or `filled` circle) — a known `IconName` or any node. Omit for a small dot node. */
     icon?: IconName | ReactNode;
     /** Theme palette token tinting this entry's node (overrides the timeline's `color`). */
     color?: ThemeColor;
+    /** This entry's node style (overrides the timeline's `variant`) — e.g. the current step `filled`. */
+    variant?: TimelineVariant;
 }
 export interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'color'> {
     /** Data-driven entries — an alternative to passing `<TimelineItem>` children. */
@@ -22,14 +26,22 @@ export interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>,
     size?: TimelineSize;
     /** Theme palette token tinting the nodes. Defaults to `primary` (a per-item `color` wins). */
     color?: ThemeColor;
+    /**
+     * Icon-node style: `'soft'` (default) — a tinted circle with the icon in the color; `'filled'` — a circle
+     * filled with the color, the icon in its contrast color. A per-item `variant` wins. Dot nodes (no `icon`)
+     * are already solid and look the same either way.
+     */
+    variant?: TimelineVariant;
     /** `<TimelineItem>` children (used when `items` is not given). */
     children?: ReactNode;
 }
 /**
  * A vertical timeline — events on a rail (order tracking, activity feeds, audit logs). Data-driven via
- * **`items`** (`{ label?, time?, content?, icon?, color? }[]`) or as `<TimelineItem>` children. An
- * entry **with** an `icon` gets a soft tinted circle node; one **without** gets a small dot — mix them
- * freely, and tint any node per item via its `color` (e.g. `success` for a completed event). `size`
+ * **`items`** (`{ label?, time?, content?, icon?, color?, variant? }[]`) or as `<TimelineItem>` children.
+ * An entry **with** an `icon` gets a circle node — soft tinted, or filled with `variant="filled"`; one
+ * **without** gets a small dot — mix them freely, and tint any node per item via its `color` (e.g. `success`
+ * for a completed event). Each body fills the row, so block content (a `Grid`, a `ChoiceCardGroup`, a
+ * `FileUploader`) lays out at full width — the timeline doubles as a section rail. `size`
  * (`sm`/`md`/`lg`) scales the nodes and type together. Renders a semantic `<ol>`/`<li>` list (name it
  * with `aria-label`); the rail is a hairline that hides itself after the last entry. Styling uses
  * `--tz-*` tokens.

package/dist/components/Timeline/TimelineItem.d.cts

@@ -1,6 +1,7 @@
 import { type LiHTMLAttributes, type ReactNode } from 'react';
 import type { ThemeColor } from '../../theme';
 import { type IconName } from '../../icons/names';
+import type { TimelineVariant } from './Timeline';
 export interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'color'> {
     /** Title line. */
     label?: ReactNode;
@@ -9,18 +10,23 @@ export interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>,
     /** Body content under the caption — any node (text, chips, buttons). */
     children?: ReactNode;
     /**
-     * Node icon — a known `IconName` or any node, shown in a soft tinted circle. Omit for a small
+     * Node icon — a known `IconName` or any node, shown in a soft tinted (or `filled`) circle. Omit for a small
      * **dot** node instead (the compact activity-log look).
      */
     icon?: IconName | ReactNode;
     /** Theme palette token tinting this item's node. Inherits the timeline's `color` when omitted. */
     color?: ThemeColor;
+    /**
+     * This item's icon-node style — `'soft'` tinted circle or `'filled'` (the color fill + its contrast icon).
+     * Inherits the timeline's `variant` (default `'soft'`) when omitted. No effect on a dot node.
+     */
+    variant?: TimelineVariant;
 }
 /**
- * One entry on a `<Timeline>` — a node (a soft tinted icon circle, or a small dot when there's no
- * `icon`) on the rail, with a `label`, a muted `time` caption, and any `children` as the body.
- * Inherits `size`/`color` from the surrounding `<Timeline>` (a per-item `color` wins — e.g. a green
- * `success` node for a delivered step). Renders an `<li>`; the connecting rail hides itself on the
- * last item via CSS.
+ * One entry on a `<Timeline>` — a node (an icon circle, soft or `filled`, or a small dot when there's no
+ * `icon`) on the rail, with a `label`, a muted `time` caption, and any `children` as the body. The body
+ * fills the row; its content sits a step below the caption. Inherits `size`/`color`/`variant` from the
+ * surrounding `<Timeline>` (a per-item value wins — e.g. a green `success` node for a delivered step).
+ * Renders an `<li>`; the connecting rail hides itself on the last item via CSS.
  */
 export declare const TimelineItem: import("react").ForwardRefExoticComponent<TimelineItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/components/Timeline/TimelineItem.d.ts

@@ -1,6 +1,7 @@
 import { type LiHTMLAttributes, type ReactNode } from 'react';
 import type { ThemeColor } from '../../theme';
 import { type IconName } from '../../icons/names';
+import type { TimelineVariant } from './Timeline';
 export interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'color'> {
     /** Title line. */
     label?: ReactNode;
@@ -9,18 +10,23 @@ export interface TimelineItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>,
     /** Body content under the caption — any node (text, chips, buttons). */
     children?: ReactNode;
     /**
-     * Node icon — a known `IconName` or any node, shown in a soft tinted circle. Omit for a small
+     * Node icon — a known `IconName` or any node, shown in a soft tinted (or `filled`) circle. Omit for a small
      * **dot** node instead (the compact activity-log look).
      */
     icon?: IconName | ReactNode;
     /** Theme palette token tinting this item's node. Inherits the timeline's `color` when omitted. */
     color?: ThemeColor;
+    /**
+     * This item's icon-node style — `'soft'` tinted circle or `'filled'` (the color fill + its contrast icon).
+     * Inherits the timeline's `variant` (default `'soft'`) when omitted. No effect on a dot node.
+     */
+    variant?: TimelineVariant;
 }
 /**
- * One entry on a `<Timeline>` — a node (a soft tinted icon circle, or a small dot when there's no
- * `icon`) on the rail, with a `label`, a muted `time` caption, and any `children` as the body.
- * Inherits `size`/`color` from the surrounding `<Timeline>` (a per-item `color` wins — e.g. a green
- * `success` node for a delivered step). Renders an `<li>`; the connecting rail hides itself on the
- * last item via CSS.
+ * One entry on a `<Timeline>` — a node (an icon circle, soft or `filled`, or a small dot when there's no
+ * `icon`) on the rail, with a `label`, a muted `time` caption, and any `children` as the body. The body
+ * fills the row; its content sits a step below the caption. Inherits `size`/`color`/`variant` from the
+ * surrounding `<Timeline>` (a per-item value wins — e.g. a green `success` node for a delivered step).
+ * Renders an `<li>`; the connecting rail hides itself on the last item via CSS.
  */
 export declare const TimelineItem: import("react").ForwardRefExoticComponent<TimelineItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/components/Timeline/index.cjs

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

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

@@ -1,4 +1,4 @@
 export { Timeline, Timeline as default } from './Timeline';
-export type { TimelineProps, TimelineEntry, TimelineSize } from './Timeline';
+export type { TimelineProps, TimelineEntry, TimelineSize, TimelineVariant } from './Timeline';
 export { TimelineItem } from './TimelineItem';
 export type { TimelineItemProps } from './TimelineItem';

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

@@ -1,4 +1,4 @@
 export { Timeline, Timeline as default } from './Timeline';
-export type { TimelineProps, TimelineEntry, TimelineSize } from './Timeline';
+export type { TimelineProps, TimelineEntry, TimelineSize, TimelineVariant } from './Timeline';
 export { TimelineItem } from './TimelineItem';
 export type { TimelineItemProps } from './TimelineItem';

package/dist/components/Timeline/index.js

@@ -1,4 +1,4 @@
-import { T as i, a as m, T } from "../../Timeline-Cb1krSlo.js";
+import { T as i, a as m, T } from "../../Timeline-Dg03dwTN.js";
 export {
   i as Timeline,
   m as TimelineItem,

package/dist/components/Timeline/timelineContext.d.cts

@@ -1,10 +1,11 @@
 import type { ThemeColor } from '../../theme';
-import type { TimelineSize } from './Timeline';
+import type { TimelineSize, TimelineVariant } from './Timeline';
 /** Shared defaults a `<Timeline>` hands down to its `<TimelineItem>` children via context. */
 export interface TimelineContextValue {
     size: TimelineSize;
     color: ThemeColor;
+    variant: TimelineVariant;
 }
 export declare const TimelineContext: import("react").Context<TimelineContextValue | null>;
-/** Read the surrounding `<Timeline>` so a `<TimelineItem>` can inherit its `size`/`color`. */
+/** Read the surrounding `<Timeline>` so a `<TimelineItem>` can inherit its `size`/`color`/`variant`. */
 export declare function useTimelineContext(): TimelineContextValue | null;

package/dist/components/Timeline/timelineContext.d.ts

@@ -1,10 +1,11 @@
 import type { ThemeColor } from '../../theme';
-import type { TimelineSize } from './Timeline';
+import type { TimelineSize, TimelineVariant } from './Timeline';
 /** Shared defaults a `<Timeline>` hands down to its `<TimelineItem>` children via context. */
 export interface TimelineContextValue {
     size: TimelineSize;
     color: ThemeColor;
+    variant: TimelineVariant;
 }
 export declare const TimelineContext: import("react").Context<TimelineContextValue | null>;
-/** Read the surrounding `<Timeline>` so a `<TimelineItem>` can inherit its `size`/`color`. */
+/** Read the surrounding `<Timeline>` so a `<TimelineItem>` can inherit its `size`/`color`/`variant`. */
 export declare function useTimelineContext(): TimelineContextValue | null;