@clicoh/orion-library 1.2.0-beta.11 → 1.2.0-beta.12

package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Inclusive range of line numbers, counted from `startLine`. */
+export type CodeBlockRange = [from: number, to: number];
+export type CodeBlockProps = {
+    /** The source to show, as plain text. */
+    code: string;
+    /** Accessible name and tooltip of the copy button. */
+    copyLabel: string;
+    /** Replaces `copyLabel` for a moment after copying, and is announced. */
+    copiedLabel: string;
+    /** Shown in the header (`ts`, `sql`, `diff`). No syntax coloring is applied. */
+    language?: string;
+    /** Number of the first line. Line numbers are shown only when it is set. */
+    startLine?: number;
+    /** Lines to emphasize, as inclusive ranges in the same numbering. */
+    highlight?: CodeBlockRange[];
+    /** Called when the browser refuses to write to the clipboard. */
+    onCopyError?: (error: unknown) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Read-only block of source code with a copy button. Shows an excerpt
+ * exactly as written: monospace, no wrapping, horizontal scroll when a line
+ * is longer than the block.
+ *
+ * Setting `startLine` numbers the lines, so an excerpt from the middle of a
+ * file keeps its real line numbers; `highlight` then marks ranges in that
+ * same numbering. There is no syntax coloring.
+ *
+ * Copying uses the Clipboard API, which browsers only expose on secure
+ * origins (`https` or `localhost`). When it fails the button stays as it was
+ * and `onCopyError` receives the reason.
+ *
+ * @component
+ * @example
+ * <CodeBlock
+ *   code={excerpt}
+ *   language="ts"
+ *   startLine={940}
+ *   highlight={[[943, 943]]}
+ *   copyLabel="Copy code"
+ *   copiedLabel="Copied"
+ * />
+ *
+ * @param {Object} props - The properties of the CodeBlock component.
+ * @param {string} props.code - The source to show, as plain text.
+ * @param {string} props.copyLabel - Accessible name and tooltip of the copy button.
+ * @param {string} props.copiedLabel - Shown and announced right after copying.
+ * @param {string} [props.language] - Label shown in the header.
+ * @param {number} [props.startLine] - Number of the first line; enables line numbers.
+ * @param {CodeBlockRange[]} [props.highlight=[]] - Inclusive line ranges to emphasize.
+ * @param {(error: unknown) => void} [props.onCopyError] - Called when the clipboard write fails.
+ *
+ * @returns {ReactNode} The rendered CodeBlock component.
+ */
+export declare function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight, onCopyError, ...restProps }: CodeBlockProps): ReactNode;
+//# sourceMappingURL=CodeBlock.d.ts.map

package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAc,EACd,WAAW,EACX,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAgG5B"}

package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx

@@ -0,0 +1,97 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useRef, useState, } from 'react';
+import { FiCheck, FiCopy } from 'react-icons/fi';
+import { Each } from '../../00-base';
+import { IconButton } from '../IconButton';
+const COPIED_FEEDBACK_MS = 1600;
+function isHighlighted(line, ranges) {
+    return ranges.some(([from, to]) => line >= from && line <= to);
+}
+/**
+ * Read-only block of source code with a copy button. Shows an excerpt
+ * exactly as written: monospace, no wrapping, horizontal scroll when a line
+ * is longer than the block.
+ *
+ * Setting `startLine` numbers the lines, so an excerpt from the middle of a
+ * file keeps its real line numbers; `highlight` then marks ranges in that
+ * same numbering. There is no syntax coloring.
+ *
+ * Copying uses the Clipboard API, which browsers only expose on secure
+ * origins (`https` or `localhost`). When it fails the button stays as it was
+ * and `onCopyError` receives the reason.
+ *
+ * @component
+ * @example
+ * <CodeBlock
+ *   code={excerpt}
+ *   language="ts"
+ *   startLine={940}
+ *   highlight={[[943, 943]]}
+ *   copyLabel="Copy code"
+ *   copiedLabel="Copied"
+ * />
+ *
+ * @param {Object} props - The properties of the CodeBlock component.
+ * @param {string} props.code - The source to show, as plain text.
+ * @param {string} props.copyLabel - Accessible name and tooltip of the copy button.
+ * @param {string} props.copiedLabel - Shown and announced right after copying.
+ * @param {string} [props.language] - Label shown in the header.
+ * @param {number} [props.startLine] - Number of the first line; enables line numbers.
+ * @param {CodeBlockRange[]} [props.highlight=[]] - Inclusive line ranges to emphasize.
+ * @param {(error: unknown) => void} [props.onCopyError] - Called when the clipboard write fails.
+ *
+ * @returns {ReactNode} The rendered CodeBlock component.
+ */
+export function CodeBlock({ code, copyLabel, copiedLabel, language, startLine, highlight = [], onCopyError, ...restProps }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const resetTimer = useRef(undefined);
+    useEffect(() => () => clearTimeout(resetTimer.current), []);
+    const lines = code.replace(/\n$/, '').split('\n');
+    const isNumbered = startLine !== undefined;
+    const firstLine = startLine ?? 1;
+    const gutterWidth = `${String(firstLine + lines.length - 1).length}ch`;
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+        }
+        catch (error) {
+            onCopyError?.(error);
+            return;
+        }
+        setIsCopied(true);
+        clearTimeout(resetTimer.current);
+        resetTimer.current = setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MS);
+    };
+    return (<div {...restProps} className={clsx('border-gray-5 bg-gray-7 dark:border-gray-1 dark:bg-black-1 min-w-0 overflow-hidden rounded-lg border', restProps.className)}>
+      <div className="border-gray-5 dark:border-gray-1 flex items-center justify-between gap-2 border-b py-1 pr-1 pl-3">
+        <span className="text-gray-1 dark:text-gray-2 truncate text-xs leading-4">
+          {language}
+        </span>
+        <IconButton icon={isCopied ? <FiCheck /> : <FiCopy />} label={isCopied ? copiedLabel : copyLabel} onClick={copy}/>
+        <span role="status" className="sr-only">
+          {isCopied ? copiedLabel : ''}
+        </span>
+      </div>
+      <pre tabIndex={0} className="focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark m-0 overflow-x-auto py-2 font-mono text-xs leading-5 text-black focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset dark:text-white">
+        <code className="block min-w-max">
+          <Each of={lines} render={(line, index) => {
+            const number = firstLine + index;
+            const isMarked = isHighlighted(number, highlight);
+            return (<span className={clsx('flex', isMarked && 'bg-lavender-2 dark:bg-lavender-dark-1')}>
+                  {isNumbered && (<span aria-hidden="true" style={{ width: gutterWidth }} className={clsx('box-content shrink-0 px-3 text-right select-none', isMarked
+                        ? 'text-lavender dark:text-lavender-dark font-semibold'
+                        : 'text-gray-1 dark:text-gray-2')}>
+                      {number}
+                    </span>)}
+                  <span className={clsx('pr-3 whitespace-pre', !isNumbered && 'pl-3')}>
+                    {line || ' '}
+                  </span>
+                  {'\n'}
+                </span>);
+        }}/>
+        </code>
+      </pre>
+    </div>);
+}
+//# sourceMappingURL=CodeBlock.jsx.map

package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"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"}

package/dist/components/01-atoms/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CodeBlock';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/01-atoms/CodeBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/01-atoms/CodeBlock/index.js

@@ -0,0 +1,2 @@
+export * from './CodeBlock';
+//# sourceMappingURL=index.js.map

package/dist/components/01-atoms/CodeBlock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/CodeBlock/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/01-atoms/Stat/Stat.d.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type StatTone = 'default' | 'success' | 'warning' | 'error';
+export type StatProps = {
+    /** What the number measures. */
+    label: string;
+    /** The figure, already formatted. */
+    value: ReactNode;
+    /** Change against a previous period, already formatted (`+12 %`). */
+    delta?: string;
+    /** Short context under the value (`last 30 days`). */
+    hint?: string;
+    /** Dot next to the label that grades the value. `default` shows none. */
+    tone?: StatTone;
+    /** Holds the space with placeholders while the value loads. */
+    isLoading?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * Card with one key figure: a label, the value in large type and an optional
+ * line of context. Meant for summary rows above a list or a report, where
+ * several of them sit side by side in a grid.
+ *
+ * `tone` adds a dot next to the label to grade the value. Color is never the
+ * only signal: the label, the delta or the hint has to say it in words too.
+ *
+ * @component
+ * @example
+ * <Stat label="Resolved" value="84 %" delta="+6 pts" hint="last 30 days" tone="success" />
+ *
+ * @example
+ * // While loading
+ * <Stat label="Average cost" value="" isLoading />
+ *
+ * @param {Object} props - The properties of the Stat component.
+ * @param {string} props.label - What the number measures.
+ * @param {ReactNode} props.value - The figure, already formatted.
+ * @param {string} [props.delta] - Change against a previous period, already formatted.
+ * @param {string} [props.hint] - Short context shown after the delta.
+ * @param {'default' | 'success' | 'warning' | 'error'} [props.tone='default'] - Dot next to the label that grades the value.
+ * @param {boolean} [props.isLoading=false] - Shows placeholders instead of the value and the context line.
+ *
+ * @returns {ReactNode} The rendered Stat component.
+ */
+export declare function Stat({ label, value, delta, hint, tone, isLoading, ...restProps }: StatProps): ReactNode;
+//# sourceMappingURL=Stat.d.ts.map

package/dist/components/01-atoms/Stat/Stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAUrD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,SAAiB,EACjB,GAAG,SAAS,EACb,EAAE,SAAS,GAAG,SAAS,CAuCvB"}

package/dist/components/01-atoms/Stat/Stat.jsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import { Show } from '../../00-base';
+import { Skeleton } from '../Skeleton';
+// `warning` uses the amber family, like `ProgressBar`: the yellow token sits
+// below the 3:1 a graphic needs against the surface.
+const toneMap = {
+    success: 'bg-success dark:bg-success-dark',
+    warning: 'bg-amber dark:bg-amber-dark',
+    error: 'bg-error dark:bg-error-dark',
+};
+/**
+ * Card with one key figure: a label, the value in large type and an optional
+ * line of context. Meant for summary rows above a list or a report, where
+ * several of them sit side by side in a grid.
+ *
+ * `tone` adds a dot next to the label to grade the value. Color is never the
+ * only signal: the label, the delta or the hint has to say it in words too.
+ *
+ * @component
+ * @example
+ * <Stat label="Resolved" value="84 %" delta="+6 pts" hint="last 30 days" tone="success" />
+ *
+ * @example
+ * // While loading
+ * <Stat label="Average cost" value="" isLoading />
+ *
+ * @param {Object} props - The properties of the Stat component.
+ * @param {string} props.label - What the number measures.
+ * @param {ReactNode} props.value - The figure, already formatted.
+ * @param {string} [props.delta] - Change against a previous period, already formatted.
+ * @param {string} [props.hint] - Short context shown after the delta.
+ * @param {'default' | 'success' | 'warning' | 'error'} [props.tone='default'] - Dot next to the label that grades the value.
+ * @param {boolean} [props.isLoading=false] - Shows placeholders instead of the value and the context line.
+ *
+ * @returns {ReactNode} The rendered Stat component.
+ */
+export function Stat({ label, value, delta, hint, tone = 'default', isLoading = false, ...restProps }) {
+    const context = [delta, hint].filter(Boolean).join(' · ');
+    return (<div {...restProps} aria-busy={isLoading || undefined} className={clsx('border-gray-5 dark:border-gray-1 flex min-w-0 flex-col gap-1 rounded-lg border p-4', restProps.className)}>
+      <p className="text-gray-1 dark:text-gray-2 flex items-center gap-1.5 text-xs leading-4">
+        {tone !== 'default' && (<span aria-hidden="true" className={clsx('size-1.5 shrink-0 rounded-full', toneMap[tone])}/>)}
+        {label}
+      </p>
+      <Show>
+        <Show.When isTrue={isLoading}>
+          <Skeleton shape="rect" className="h-8 w-24"/>
+          <Skeleton className="mt-1.5 w-32"/>
+        </Show.When>
+        <Show.Else>
+          <div className="text-2xl leading-8 font-semibold whitespace-nowrap text-black dark:text-white">
+            {value}
+          </div>
+          {context && (<p className="text-gray-1 dark:text-gray-2 text-xs leading-4">
+              {context}
+            </p>)}
+        </Show.Else>
+      </Show>
+    </div>);
+}
+//# sourceMappingURL=Stat.jsx.map

package/dist/components/01-atoms/Stat/Stat.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/Stat.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAmBvC,6EAA6E;AAC7E,qDAAqD;AACrD,MAAM,OAAO,GAAiD;IAC5D,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,GAAG,SAAS,EACF;IACV,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,CAAC,GAAG,CACF,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,CAClC,SAAS,CAAC,CAAC,IAAI,CACb,oFAAoF,EACpF,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,CAAC,SAAS,CAAC,0EAA0E,CACrF;QAAA,CAAC,IAAI,KAAK,SAAS,IAAI,CACrB,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CAAC,gCAAgC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EACjE,CACH,CACD;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,CAAC,CACH;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAC3B;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3C;UAAA,CAAC,QAAQ,CAAC,SAAS,CAAC,aAAa,EACnC;QAAA,EAAE,IAAI,CAAC,IAAI,CACX;QAAA,CAAC,IAAI,CAAC,IAAI,CACR;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,+EAA+E,CAC5F;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,GAAG,CACL;UAAA,CAAC,OAAO,IAAI,CACV,CAAC,CAAC,CAAC,SAAS,CAAC,gDAAgD,CAC3D;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,CAAC,CAAC,CACL,CACH;QAAA,EAAE,IAAI,CAAC,IAAI,CACb;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/Stat/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stat';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/01-atoms/Stat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/01-atoms/Stat/index.js

@@ -0,0 +1,2 @@
+export * from './Stat';
+//# sourceMappingURL=index.js.map

package/dist/components/01-atoms/Stat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/01-atoms/Stat/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/01-atoms/index.d.ts

@@ -23,4 +23,6 @@ export * from './OtpInput';
 export * from './ThemeSwitch';
 export * from './SmallInput';
 export * from './CountryFlag';
+export * from './Stat';
+export * from './CodeBlock';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/01-atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/dist/components/01-atoms/index.js

@@ -23,4 +23,6 @@ export * from './OtpInput';
 export * from './ThemeSwitch';
 export * from './SmallInput';
 export * from './CountryFlag';
+export * from './Stat';
+export * from './CodeBlock';
 //# sourceMappingURL=index.js.map

package/dist/components/01-atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/01-atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/dist/components/02-molecules/Stepper/Stepper.d.ts

@@ -0,0 +1,70 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type StepperStepState = 'done' | 'current' | 'pending' | 'skipped';
+export type StepperStep = {
+    id: string;
+    label: string;
+    state: StepperStepState;
+};
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperSize = 'md' | 'sm';
+export type StepperProps = {
+    /** Steps in order. Their state is owned by the consumer. */
+    steps: StepperStep[];
+    /** Accessible name of the list. */
+    ariaLabel: string;
+    /**
+     * Words for each state, read by screen readers after every label.
+     * `skipped` is also shown under skipped steps.
+     */
+    stateLabels: Record<StepperStepState, string>;
+    orientation?: StepperOrientation;
+    size?: StepperSize;
+    /**
+     * Horizontal only. `true` shows dots with the label of the current step
+     * alone, the rest in tooltips. `'auto'` switches to that when the labels
+     * no longer fit.
+     */
+    compact?: boolean | 'auto';
+    /** Horizontal only. Minimum width of each step, in pixels. */
+    minStepWidth?: number;
+} & Omit<HTMLAttributes<HTMLOListElement>, 'children' | 'aria-label'>;
+/**
+ * Ordered list of the steps of a process, showing which are done, which one
+ * is current, which are still pending and which were skipped. It only
+ * displays progress: the consumer owns every state, and steps are not
+ * clickable.
+ *
+ * Horizontal by default; `vertical` stacks the steps for side panels and
+ * narrow screens, and lets long labels wrap. In horizontal mode labels never
+ * wrap: `compact` keeps the dots and leaves only the current label visible,
+ * the rest in tooltips, and `compact="auto"` switches to that by itself when
+ * the container is too narrow for the labels.
+ *
+ * Every label is followed, for screen readers, by the word for its state in
+ * `stateLabels`; the current step carries `aria-current="step"`.
+ *
+ * @component
+ * @example
+ * <Stepper
+ *   ariaLabel="Progress"
+ *   stateLabels={{ done: 'done', current: 'in progress', pending: 'pending', skipped: 'skipped' }}
+ *   steps={[
+ *     { id: 'read', label: 'Read', state: 'done' },
+ *     { id: 'search', label: 'Search', state: 'current' },
+ *     { id: 'answer', label: 'Answer', state: 'pending' },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the Stepper component.
+ * @param {StepperStep[]} props.steps - Steps in order, each with `id`, `label` and `state`.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ * @param {Record<StepperStepState, string>} props.stateLabels - Words for each state; `skipped` is also shown.
+ * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - Direction of the list.
+ * @param {'md' | 'sm'} [props.size='md'] - Size of the dots (20px or 16px).
+ * @param {boolean | 'auto'} [props.compact=false] - Horizontal only: dots with the current label alone.
+ * @param {number} [props.minStepWidth=80] - Horizontal only: minimum width of each step in pixels.
+ *
+ * @returns {ReactNode} The rendered Stepper component, or `null` without steps.
+ */
+export declare function Stepper({ steps, ariaLabel, stateLabels, orientation, size, compact, minStepWidth, ...restProps }: StepperProps): ReactNode;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/02-molecules/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Stepper/Stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IACzB,4DAA4D;IAC5D,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;AA4ItE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,WAAW,EACX,WAA0B,EAC1B,IAAW,EACX,OAAe,EACf,YAAiB,EACjB,GAAG,SAAS,EACb,EAAE,YAAY,GAAG,SAAS,CA0L1B"}

package/dist/components/02-molecules/Stepper/Stepper.jsx

@@ -0,0 +1,204 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useRef, useState, } from 'react';
+import { FiCheck } from 'react-icons/fi';
+import { Each, Show } from '../../00-base';
+import { Tooltip } from '../../01-atoms';
+const LABEL_GUTTER = 12;
+const REACHED_STATES = new Set([
+    'done',
+    'current',
+]);
+const dotMap = {
+    done: 'bg-black text-white dark:bg-white dark:text-black',
+    current: 'border-2 border-lavender bg-lavender-3 dark:border-lavender-dark dark:bg-lavender-dark-1',
+    skipped: 'border border-dashed border-gray-3 bg-white dark:border-gray-1 dark:bg-black',
+    pending: 'border border-gray-3 bg-white dark:border-gray-1 dark:bg-black',
+};
+const dotSizeMap = {
+    md: { dot: 'size-5', check: 'size-3', inner: 'size-2' },
+    sm: { dot: 'size-4', check: 'size-2.5', inner: 'size-1.5' },
+};
+const labelMap = {
+    done: 'font-medium text-black dark:text-white',
+    current: 'font-semibold text-lavender dark:text-lavender-dark',
+    skipped: 'text-gray-1 dark:text-gray-2',
+    pending: 'text-gray-1 dark:text-gray-2',
+};
+const connectorMap = {
+    horizontal: {
+        reached: 'border-t-2 border-black dark:border-white',
+        pending: 'border-t border-gray-5 dark:border-gray-1',
+        skipped: 'border-t border-dashed border-gray-3 dark:border-gray-1',
+        none: 'border-t border-transparent',
+    },
+    vertical: {
+        reached: 'border-l-2 border-black dark:border-white',
+        pending: 'border-l border-gray-5 dark:border-gray-1',
+        skipped: 'border-l border-dashed border-gray-3 dark:border-gray-1',
+        none: 'border-l border-transparent',
+    },
+};
+function connectorBetween(from, to) {
+    if (!from || !to)
+        return 'none';
+    if (from.state === 'skipped' || to.state === 'skipped')
+        return 'skipped';
+    return REACHED_STATES.has(to.state) ? 'reached' : 'pending';
+}
+function labelAlignment(index, count) {
+    if (index === 0)
+        return 'justify-start';
+    if (index === count - 1)
+        return 'justify-end';
+    return 'justify-center';
+}
+function StepDot({ state, size, }) {
+    const sizes = dotSizeMap[size];
+    return (<span aria-hidden="true" className={clsx('flex shrink-0 items-center justify-center rounded-full', sizes.dot, dotMap[state])}>
+      {state === 'done' && <FiCheck strokeWidth={3} className={sizes.check}/>}
+      {state === 'current' && (<span className={clsx('bg-lavender dark:bg-lavender-dark rounded-full', sizes.inner)}/>)}
+    </span>);
+}
+function useAutoCompact(isEnabled, minStepWidth, stepCount, labelsKey) {
+    const listRef = useRef(null);
+    const measureRef = useRef(null);
+    const [isTight, setIsTight] = useState(false);
+    useEffect(() => {
+        const list = listRef.current;
+        const measure = measureRef.current;
+        if (!isEnabled ||
+            !list ||
+            !measure ||
+            typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const update = () => {
+            const widest = Math.max(0, ...Array.from(measure.children, (label) => label.scrollWidth));
+            const needed = Math.max(minStepWidth, widest + LABEL_GUTTER);
+            setIsTight(list.clientWidth / Math.max(1, stepCount) < needed);
+        };
+        const observer = new ResizeObserver(update);
+        observer.observe(list);
+        update();
+        return () => observer.disconnect();
+    }, [isEnabled, minStepWidth, stepCount, labelsKey]);
+    return { listRef, measureRef, isTight: isEnabled && isTight };
+}
+/**
+ * Ordered list of the steps of a process, showing which are done, which one
+ * is current, which are still pending and which were skipped. It only
+ * displays progress: the consumer owns every state, and steps are not
+ * clickable.
+ *
+ * Horizontal by default; `vertical` stacks the steps for side panels and
+ * narrow screens, and lets long labels wrap. In horizontal mode labels never
+ * wrap: `compact` keeps the dots and leaves only the current label visible,
+ * the rest in tooltips, and `compact="auto"` switches to that by itself when
+ * the container is too narrow for the labels.
+ *
+ * Every label is followed, for screen readers, by the word for its state in
+ * `stateLabels`; the current step carries `aria-current="step"`.
+ *
+ * @component
+ * @example
+ * <Stepper
+ *   ariaLabel="Progress"
+ *   stateLabels={{ done: 'done', current: 'in progress', pending: 'pending', skipped: 'skipped' }}
+ *   steps={[
+ *     { id: 'read', label: 'Read', state: 'done' },
+ *     { id: 'search', label: 'Search', state: 'current' },
+ *     { id: 'answer', label: 'Answer', state: 'pending' },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the Stepper component.
+ * @param {StepperStep[]} props.steps - Steps in order, each with `id`, `label` and `state`.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ * @param {Record<StepperStepState, string>} props.stateLabels - Words for each state; `skipped` is also shown.
+ * @param {'horizontal' | 'vertical'} [props.orientation='horizontal'] - Direction of the list.
+ * @param {'md' | 'sm'} [props.size='md'] - Size of the dots (20px or 16px).
+ * @param {boolean | 'auto'} [props.compact=false] - Horizontal only: dots with the current label alone.
+ * @param {number} [props.minStepWidth=80] - Horizontal only: minimum width of each step in pixels.
+ *
+ * @returns {ReactNode} The rendered Stepper component, or `null` without steps.
+ */
+export function Stepper({ steps, ariaLabel, stateLabels, orientation = 'horizontal', size = 'md', compact = false, minStepWidth = 80, ...restProps }) {
+    const isHorizontal = orientation === 'horizontal';
+    const { listRef, measureRef, isTight } = useAutoCompact(isHorizontal && compact === 'auto', minStepWidth, steps.length, steps.map((step) => step.label).join('\u0000'));
+    if (steps.length === 0)
+        return null;
+    const isCompact = isHorizontal && (compact === true || isTight);
+    const dotSize = isCompact ? 'sm' : size;
+    const srState = (state) => (<span className="sr-only">, {stateLabels[state]}</span>);
+    const skippedCaption = (state) => state === 'skipped' && (<span aria-hidden="true" className="text-gray-1 dark:text-gray-2 text-xs leading-4">
+        {stateLabels.skipped}
+      </span>);
+    if (!isHorizontal) {
+        return (<ol {...restProps} aria-label={ariaLabel} className={clsx('flex flex-col', restProps.className)}>
+        <Each of={steps} render={(step, index) => {
+                const isLast = index === steps.length - 1;
+                return (<li key={step.id} aria-current={step.state === 'current' ? 'step' : undefined} className="flex gap-3">
+                <span aria-hidden="true" className="flex flex-col items-center">
+                  <StepDot state={step.state} size={dotSize}/>
+                  {!isLast && (<span className={clsx('min-h-4 flex-1', connectorMap.vertical[connectorBetween(step, steps[index + 1])])}/>)}
+                </span>
+                <span className={clsx('flex min-w-0 flex-col', dotSize === 'md' && 'pt-0.5', !isLast && 'pb-4')}>
+                  <span className={clsx('text-xs leading-4 text-pretty', labelMap[step.state])}>
+                    {step.label}
+                    {srState(step.state)}
+                  </span>
+                  {skippedCaption(step.state)}
+                </span>
+              </li>);
+            }}/>
+      </ol>);
+    }
+    return (<>
+      <ol {...restProps} ref={listRef} aria-label={ariaLabel} className={clsx('flex w-full items-start', restProps.className)}>
+        <Each of={steps} render={(step, index) => {
+            const isCurrent = step.state === 'current';
+            const before = connectorBetween(steps[index - 1], step);
+            const after = connectorBetween(step, steps[index + 1]);
+            return (<li key={step.id} aria-current={isCurrent ? 'step' : undefined} style={compact === false ? { minWidth: minStepWidth } : undefined} className="flex min-w-0 flex-1 flex-col items-center gap-2">
+                <div className="flex w-full items-center">
+                  <span aria-hidden="true" className={clsx('flex-1', connectorMap.horizontal[before])}/>
+                  <Show>
+                    <Show.When isTrue={isCompact && !isCurrent}>
+                      <Tooltip message={step.label}>
+                        <span tabIndex={0} className="focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark flex rounded-full focus-visible:ring-2 focus-visible:outline-none">
+                          <StepDot state={step.state} size={dotSize}/>
+                          <span className="sr-only">
+                            {step.label}, {stateLabels[step.state]}
+                          </span>
+                        </span>
+                      </Tooltip>
+                    </Show.When>
+                    <Show.Else>
+                      <StepDot state={step.state} size={dotSize}/>
+                    </Show.Else>
+                  </Show>
+                  <span aria-hidden="true" className={clsx('flex-1', connectorMap.horizontal[after])}/>
+                </div>
+                {(!isCompact || isCurrent) && (<span className={clsx('flex w-full', isCompact
+                        ? labelAlignment(index, steps.length)
+                        : 'justify-center px-1')}>
+                    <span className="flex flex-col items-center gap-0.5">
+                      <span className={clsx('text-xs leading-4 whitespace-nowrap', labelMap[step.state])}>
+                        {step.label}
+                        {srState(step.state)}
+                      </span>
+                      {skippedCaption(step.state)}
+                    </span>
+                  </span>)}
+              </li>);
+        }}/>
+      </ol>
+      {compact === 'auto' && (<div ref={measureRef} aria-hidden="true" className="pointer-events-none invisible absolute top-0 left-0 flex h-0 flex-col overflow-hidden">
+          <Each of={steps} render={(step) => (<span key={step.id} className="text-xs leading-4 font-semibold whitespace-nowrap">
+                {step.label}
+              </span>)}/>
+        </div>)}
+    </>);
+}
+//# sourceMappingURL=Stepper.jsx.map

package/dist/components/02-molecules/Stepper/Stepper.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Stepper/Stepper.tsx"],"names":[],"mappings":"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"}

package/dist/components/02-molecules/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/02-molecules/Stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Stepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/02-molecules/Stepper/index.js

@@ -0,0 +1,2 @@
+export * from './Stepper';
+//# sourceMappingURL=index.js.map

package/dist/components/02-molecules/Stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Stepper/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/02-molecules/Timeline/Timeline.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type TimelineTone = 'neutral' | 'success' | 'warning' | 'error' | 'progress';
+export type TimelineItem = {
+    id: string;
+    /** When it happened, already formatted for display. */
+    at: string;
+    /** Machine-readable date for `<time dateTime>` (ISO 8601). */
+    dateTime?: string;
+    /** Who did it. */
+    actor?: string;
+    /** What happened. */
+    text: ReactNode;
+    /** Color of the dot. */
+    tone?: TimelineTone;
+};
+export type TimelineProps = {
+    /** Events in the order they should read, usually oldest first. */
+    items: TimelineItem[];
+    /** Accessible name of the list. */
+    ariaLabel: string;
+} & Omit<HTMLAttributes<HTMLOListElement>, 'children' | 'aria-label'>;
+/**
+ * Vertical list of dated events: a dot and a rule on the left, and for each
+ * event a line with its time and author over the description. For activity
+ * logs and change histories, read top to bottom in the order given.
+ *
+ * `tone` colors the dot. Color is never the only signal: the text has to say
+ * what happened in words too.
+ *
+ * @component
+ * @example
+ * <Timeline
+ *   ariaLabel="Activity"
+ *   items={[
+ *     { id: '1', at: '09:12', dateTime: '2026-10-10T09:12', actor: 'Ana', text: 'Opened the request' },
+ *     { id: '2', at: '09:40', text: 'Answer sent', tone: 'success' },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the Timeline component.
+ * @param {TimelineItem[]} props.items - Events with `id`, `at`, `text` and optional `dateTime`, `actor`, `tone`.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ *
+ * @returns {ReactNode} The rendered Timeline component, or `null` without items.
+ */
+export declare function Timeline({ items, ariaLabel, ...restProps }: TimelineProps): ReactNode;
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/components/02-molecules/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,kEAAkE;IAClE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC;AAYtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,aAAa,GAAG,SAAS,CAyD3B"}

package/dist/components/02-molecules/Timeline/Timeline.jsx

@@ -0,0 +1,65 @@
+import clsx from 'clsx';
+import { Each } from '../../00-base';
+// `warning` uses the amber family, like `ProgressBar`: the yellow token sits
+// below the 3:1 a graphic needs against the surface.
+const toneMap = {
+    neutral: 'bg-gray-3 dark:bg-gray-1',
+    success: 'bg-success dark:bg-success-dark',
+    warning: 'bg-amber dark:bg-amber-dark',
+    error: 'bg-error dark:bg-error-dark',
+    progress: 'bg-lavender dark:bg-lavender-dark',
+};
+/**
+ * Vertical list of dated events: a dot and a rule on the left, and for each
+ * event a line with its time and author over the description. For activity
+ * logs and change histories, read top to bottom in the order given.
+ *
+ * `tone` colors the dot. Color is never the only signal: the text has to say
+ * what happened in words too.
+ *
+ * @component
+ * @example
+ * <Timeline
+ *   ariaLabel="Activity"
+ *   items={[
+ *     { id: '1', at: '09:12', dateTime: '2026-10-10T09:12', actor: 'Ana', text: 'Opened the request' },
+ *     { id: '2', at: '09:40', text: 'Answer sent', tone: 'success' },
+ *   ]}
+ * />
+ *
+ * @param {Object} props - The properties of the Timeline component.
+ * @param {TimelineItem[]} props.items - Events with `id`, `at`, `text` and optional `dateTime`, `actor`, `tone`.
+ * @param {string} props.ariaLabel - Accessible name of the list.
+ *
+ * @returns {ReactNode} The rendered Timeline component, or `null` without items.
+ */
+export function Timeline({ items, ariaLabel, ...restProps }) {
+    if (items.length === 0)
+        return null;
+    return (<ol {...restProps} aria-label={ariaLabel} className={clsx('flex flex-col', restProps.className)}>
+      <Each of={items} render={(item, index) => {
+            const isLast = index === items.length - 1;
+            return (<li key={item.id} className="flex gap-3">
+              <span aria-hidden="true" className="flex w-2.5 shrink-0 flex-col items-center">
+                <span className={clsx('mt-[3px] size-2.5 shrink-0 rounded-full', toneMap[item.tone ?? 'neutral'])}/>
+                {!isLast && (<span className="bg-gray-5 dark:bg-gray-1 mt-1 w-px flex-1"/>)}
+              </span>
+              <div className={clsx('flex min-w-0 flex-col gap-0.5', !isLast && 'pb-4')}>
+                <p className="text-gray-1 dark:text-gray-2 text-xs leading-4">
+                  <time dateTime={item.dateTime}>{item.at}</time>
+                  {item.actor && (<>
+                      {' · '}
+                      <span className="font-semibold text-black dark:text-white">
+                        {item.actor}
+                      </span>
+                    </>)}
+                </p>
+                <div className="text-xs leading-[18px] text-pretty text-black dark:text-white">
+                  {item.text}
+                </div>
+              </div>
+            </li>);
+        }}/>
+    </ol>);
+}
+//# sourceMappingURL=Timeline.jsx.map

package/dist/components/02-molecules/Timeline/Timeline.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AA8BrC,6EAA6E;AAC7E,qDAAqD;AACrD,MAAM,OAAO,GAAiC;IAC5C,OAAO,EAAE,0BAA0B;IACnC,OAAO,EAAE,iCAAiC;IAC1C,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE,mCAAmC;CAC9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACE;IACd,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpC,OAAO,CACL,CAAC,EAAE,CACD,IAAI,SAAS,CAAC,CACd,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAEtD;MAAA,CAAC,IAAI,CACH,EAAE,CAAC,CAAC,KAAK,CAAC,CACV,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAE1C,OAAO,CACL,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,YAAY,CACtC;cAAA,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,2CAA2C,CAErD;gBAAA,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,IAAI,CACb,yCAAyC,EACzC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAChC,CAAC,EAEJ;gBAAA,CAAC,CAAC,MAAM,IAAI,CACV,CAAC,IAAI,CAAC,SAAS,CAAC,2CAA2C,EAAG,CAC/D,CACH;cAAA,EAAE,IAAI,CACN;cAAA,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,IAAI,CACb,+BAA+B,EAC/B,CAAC,MAAM,IAAI,MAAM,CAClB,CAAC,CAEF;gBAAA,CAAC,CAAC,CAAC,SAAS,CAAC,gDAAgD,CAC3D;kBAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAC9C;kBAAA,CAAC,IAAI,CAAC,KAAK,IAAI,CACb,EACE;sBAAA,CAAC,KAAK,CACN;sBAAA,CAAC,IAAI,CAAC,SAAS,CAAC,0CAA0C,CACxD;wBAAA,CAAC,IAAI,CAAC,KAAK,CACb;sBAAA,EAAE,IAAI,CACR;oBAAA,GAAG,CACJ,CACH;gBAAA,EAAE,CAAC,CACH;gBAAA,CAAC,GAAG,CAAC,SAAS,CAAC,+DAA+D,CAC5E;kBAAA,CAAC,IAAI,CAAC,IAAI,CACZ;gBAAA,EAAE,GAAG,CACP;cAAA,EAAE,GAAG,CACP;YAAA,EAAE,EAAE,CAAC,CACN,CAAC;QACJ,CAAC,CAAC,EAEN;IAAA,EAAE,EAAE,CAAC,CACN,CAAC;AACJ,CAAC"}

package/dist/components/02-molecules/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Timeline';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/02-molecules/Timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/02-molecules/Timeline/index.js

@@ -0,0 +1,2 @@
+export * from './Timeline';
+//# sourceMappingURL=index.js.map

package/dist/components/02-molecules/Timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/02-molecules/index.d.ts

@@ -19,4 +19,6 @@ export * from './TimePicker';
 export * from './BellNotifications';
 export * from './DatePicker';
 export * from './InlineMessage';
+export * from './Stepper';
+export * from './Timeline';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/02-molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}

package/dist/components/02-molecules/index.js

@@ -19,4 +19,6 @@ export * from './TimePicker';
 export * from './BellNotifications';
 export * from './DatePicker';
 export * from './InlineMessage';
+export * from './Stepper';
+export * from './Timeline';
 //# sourceMappingURL=index.js.map

package/dist/components/02-molecules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/02-molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "1.2.0-beta.11",
+  "version": "1.2.0-beta.12",
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "0.26.19",