tamga-ui 0.3.1 → 0.4.0

package/dist/components/display.d.ts

@@ -7,7 +7,7 @@ import { type Tone } from "./tone.js";
  *
  * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
-export declare function Descriptions({ items, layout, className, }: {
+export declare function Descriptions({ items, layout, className, ...rest }: {
     items: readonly {
         term: string;
         value: ReactNode;
@@ -19,6 +19,8 @@ export declare function Descriptions({ items, layout, className, }: {
      */
     layout?: "wide" | "compact";
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Tek bir sayı, büyük. Sektörde adı "stat" ya da "KPI kartı".
@@ -67,7 +69,7 @@ export declare function Descriptions({ items, layout, className, }: {
  * görünüyordu. Tüketicisi olmayan bir prop, `SkeletonKpi`ın yıllarca yaşadığı
  * boşluğun aynısı: duruyor, belgeleniyor, hiçbir şeyin yerini tutmuyor.
  */
-export declare function Kpi({ label, value, unit, icon, note, delta, better, chart, href, onClick, pressed, linkComponent: Link, className, }: {
+export declare function Kpi({ label, value, unit, icon, note, delta, better, chart, href, onClick, pressed, linkComponent: Link, className, ...rest }: {
     label: string;
     value: string | number;
     unit?: string;
@@ -90,6 +92,8 @@ export declare function Kpi({ label, value, unit, icon, note, delta, better, cha
     /** The router's link, so the tile does not force a full page load. TR: Yönlendiricinin bağlantısı, karo tam sayfa yüklemeye zorlamasın diye. */
     linkComponent?: LinkComponent;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * KPI karolarının ızgarası.
@@ -103,9 +107,10 @@ export declare function Kpi({ label, value, unit, icon, note, delta, better, cha
  * altı). Elle verilen bir sütun sayısı, karo eklenince yalnız o ekranda
  * güncelleniyor ve tek başına kalan bir karo tam satırı kaplıyor.
  */
-export declare function KpiGrid({ children, className }: {
+export declare function KpiGrid({ children, className, ...rest }: {
     children: ReactNode;
     className?: string;
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Kod bloğu, kopyalanabilir.
@@ -118,7 +123,7 @@ export declare function KpiGrid({ children, className }: {
  * izin verilmemişse). Başarısızlık SESSİZ olmamalı: düğme metni değişmezse
  * kullanıcı kopyalandığını sanır ve boş yapıştırır.
  */
-export declare function Code({ children, labels, className, }: {
+export declare function Code({ children, labels, className, ...rest }: {
     /** The text to be copied itself. TR: Kopyalanacak metnin kendisi. */
     children: string;
     labels: {
@@ -127,6 +132,8 @@ export declare function Code({ children, labels, className, }: {
         failed: string;
     };
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Klavye tuşu.
@@ -149,7 +156,7 @@ export declare function Kbd({ children, className }: {
  *
  * Sıfır GÖSTERİLMEZ: "0 bildirim" bir bilgi değil, gürültüdür.
  */
-export declare function Badge({ count, max, tone, label, className, children, }: {
+export declare function Badge({ count, max, tone, label, className, children, ...rest }: {
     count: number;
     max?: number;
     tone?: Tone;
@@ -164,13 +171,31 @@ export declare function Badge({ count, max, tone, label, className, children, }:
      * üstüne oturacağı şey (ikon, avatar). Yoksa rozet tek başına durur.
      */
     children?: ReactNode;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
+/**
+ * Bir adım: kimliği ve çevrilmiş etiketi.
+ *
+ * KİMLİK ETİKETTEN AYRI, ve bu bir kolaylık değil bir düzeltme. Adım listesi
+ * bir zamanlar düz `string[]` idi: kimlik yoktu, React anahtarı ÇEVRİLMİŞ
+ * ETİKETTİ, ve iki adım aynı etiketi taşıdığında ya da dil değiştiğinde
+ * düğümler yeniden kuruluyordu. Kitin kendi kuralı bunu zaten söylüyor:
+ * bir öğenin adı etiketi değildir, çünkü etiket çevrilir ve değişir.
+ *
+ * `key` ve `label` DIŞINDAKİ her şey o adımın `<li>`sine iniyor, yani bir
+ * adım testin ya da stilin ihtiyaç duyduğu kancayı taşıyabiliyor. Kardeşi
+ * `Segmented` ile aynı sözleşme; ikisinin farklı olması bir asimetriydi.
+ */
+export type Step = {
+    key: string;
+    label: string;
+} & Record<string, unknown>;
 /**
  * Adım göstergesi.
  *
- * Üründe bir sihirbaz şablonu vardı ve adım göstergesi yoktu — yani kullanıcı
- * kaçıncı adımda olduğunu ve kaç adım kaldığını bilmiyordu. Bir sihirbazın
- * varlık sebebi tam olarak budur.
+ * Bir sihirbazın adım göstergesi yoksa kullanıcı kaçıncı adımda olduğunu ve
+ * kaç adım kaldığını bilmiyor; sihirbazın varlık sebebi tam olarak budur.
  *
  * `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
  * "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
@@ -179,10 +204,18 @@ export declare function Badge({ count, max, tone, label, className, children, }:
  * olan sönük. Üç durum üç ayrı görsel dil — çünkü "neredeyim" ve "ne kaldı"
  * ayrı iki soru.
  */
-export declare function Steps({ steps, current, className, }: {
-    steps: readonly string[];
+export declare function Steps({ steps, current, className, ...rest }: {
+    /**
+     * The steps, in order. Anything beyond `key` and `label` lands on that step's `<li>`, so a step
+     * can carry the hook a test or a style needs. TR: Adımlar, sırasıyla. `key` ve `label` dışındaki
+     * her şey o adımın `<li>`sine iniyor, yani bir adım testin ya da stilin ihtiyaç duyduğu kancayı
+     * taşıyabiliyor.
+     */
+    steps: readonly Step[];
     /** The active step, counting from zero. TR: Sıfırdan sayan aktif adım. */
     current: number;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=display.d.ts.map

package/dist/components/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"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"}

package/dist/components/display.js

@@ -1,7 +1,9 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { Children, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { PlainLink as PlainAnchor } from "./link.js";
 import { Check, Customize } from "./icons.js";
@@ -18,10 +20,12 @@ import { toneOf } from "./tone.js";
  *
  * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
-export function Descriptions({ items, layout = "wide", className, }) {
+export function Descriptions({ items, layout = "wide", className, ...rest }) {
     return (_jsx("dl", { className: cn("grid", layout === "wide"
             ? "gap-x-8 gap-y-4 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)]"
-            : "gap-x-4 gap-y-2.5 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)]", className), children: items.map((it) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-small text-ink-faint", children: it.term }), _jsx("dd", { className: cn("min-w-0 text-body text-ink", it.mono && "font-mono tabular-nums"), children: it.value })] }, it.term))) }));
+            : "gap-x-4 gap-y-2.5 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)]", className), children: items.map((it) => (_createElement("div", { ...dataProps(rest), key: it.term, className: "contents" },
+            _jsx("dt", { className: "text-small text-ink-faint", children: it.term }),
+            _jsx("dd", { className: cn("min-w-0 text-body text-ink", it.mono && "font-mono tabular-nums"), children: it.value })))) }));
 }
 /**
  * Tek bir sayı, büyük. Sektörde adı "stat" ya da "KPI kartı".
@@ -70,14 +74,14 @@ export function Descriptions({ items, layout = "wide", className, }) {
  * görünüyordu. Tüketicisi olmayan bir prop, `SkeletonKpi`ın yıllarca yaşadığı
  * boşluğun aynısı: duruyor, belgeleniyor, hiçbir şeyin yerini tutmuyor.
  */
-export function Kpi({ label, value, unit, icon, note, delta, better = "up", chart, href, onClick, pressed, linkComponent: Link = PlainAnchor, className, }) {
+export function Kpi({ label, value, unit, icon, note, delta, better = "up", chart, href, onClick, pressed, linkComponent: Link = PlainAnchor, className, ...rest }) {
     const tone = delta === undefined || delta === 0
         ? "neutral"
         : (delta > 0) === (better === "up")
             ? "positive"
             : "danger";
     const c = toneOf(tone);
-    const govde = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { className: "tamga-kpi-tile", "aria-hidden": true, children: _jsx(Icon, { icon: icon, size: "base" }) })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "tamga-label", children: label }), _jsxs("span", { className: "mt-1 flex items-end gap-2", children: [_jsx("span", { className: "font-mono text-display-sm leading-none font-bold tabular-nums text-ink", children: value }), unit ? (_jsx("span", { className: "font-mono text-small font-medium text-ink-faint", children: unit })) : null, delta !== undefined ? (_jsxs("span", { className: "ml-auto font-mono text-small tabular-nums", style: { color: c.mark }, children: [delta > 0 ? "+" : "", delta, "%"] })) : null] }), note ? _jsx("span", { className: "mt-1 text-caption text-ink-faint", children: note }) : null, chart ? _jsx("span", { className: "mt-4 block", children: chart }) : null] })] }));
+    const govde = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { ...dataProps(rest), className: "tamga-kpi-tile", "aria-hidden": true, children: _jsx(Icon, { icon: icon, size: "base" }) })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "tamga-label", children: label }), _jsxs("span", { className: "mt-1 flex items-end gap-2", children: [_jsx("span", { className: "font-mono text-display-sm leading-none font-bold tabular-nums text-ink", children: value }), unit ? (_jsx("span", { className: "font-mono text-small font-medium text-ink-faint", children: unit })) : null, delta !== undefined ? (_jsxs("span", { className: "ml-auto font-mono text-small tabular-nums", style: { color: c.mark }, children: [delta > 0 ? "+" : "", delta, "%"] })) : null] }), note ? _jsx("span", { className: "mt-1 text-caption text-ink-faint", children: note }) : null, chart ? _jsx("span", { className: "mt-4 block", children: chart }) : null] })] }));
     const sinif = cn("tamga-kpi", (href || onClick) && "tamga-kpi-live", className);
     if (href) {
         return (_jsx(Link, { href: href, className: sinif, children: govde }));
@@ -99,9 +103,9 @@ export function Kpi({ label, value, unit, icon, note, delta, better = "up", char
  * altı). Elle verilen bir sütun sayısı, karo eklenince yalnız o ekranda
  * güncelleniyor ve tek başına kalan bir karo tam satırı kaplıyor.
  */
-export function KpiGrid({ children, className }) {
+export function KpiGrid({ children, className, ...rest }) {
     const sayi = Math.min(Children.count(children), 6);
-    return (_jsx("div", { className: cn("tamga-kpi-grid", className), style: { "--tamga-kpi-cols": sayi }, children: children }));
+    return (_jsx("div", { ...dataProps(rest), className: cn("tamga-kpi-grid", className), style: { "--tamga-kpi-cols": sayi }, children: children }));
 }
 /**
  * Kod bloğu, kopyalanabilir.
@@ -114,7 +118,7 @@ export function KpiGrid({ children, className }) {
  * izin verilmemişse). Başarısızlık SESSİZ olmamalı: düğme metni değişmezse
  * kullanıcı kopyalandığını sanır ve boş yapıştırır.
  */
-export function Code({ children, labels, className, }) {
+export function Code({ children, labels, className, ...rest }) {
     const [state, setState] = useState("idle");
     const timer = useRef(undefined);
     /* Zamanlayıcı bir ref'te tutuluyor ve her tıklamada sıfırlanıyor.
@@ -135,7 +139,7 @@ export function Code({ children, labels, className, }) {
         window.clearTimeout(timer.current);
         timer.current = window.setTimeout(() => setState("idle"), 1600);
     }
-    return (_jsxs("div", { className: cn("tamga-code-block tamga-surface relative overflow-hidden", className), children: [_jsx("pre", { className: "tamga-scroll-x px-4 py-3 font-mono text-caption text-ink", children: children }), _jsxs("button", { type: "button", onClick: copy, className: "tamga-mini-btn absolute top-2 right-2 w-auto gap-1 px-2", "aria-label": labels.copy, children: [_jsx(Icon, { icon: state === "done" ? Check : Customize, size: "xs" }), _jsx("span", { className: "text-caption", children: state === "done" ? labels.copied : state === "failed" ? labels.failed : labels.copy })] })] }));
+    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-code-block tamga-surface relative overflow-hidden", className), children: [_jsx("pre", { className: "tamga-scroll-x px-4 py-3 font-mono text-caption text-ink", children: children }), _jsxs("button", { type: "button", onClick: copy, className: "tamga-mini-btn absolute top-2 right-2 w-auto gap-1 px-2", "aria-label": labels.copy, children: [_jsx(Icon, { icon: state === "done" ? Check : Customize, size: "xs" }), _jsx("span", { className: "text-caption", children: state === "done" ? labels.copied : state === "failed" ? labels.failed : labels.copy })] })] }));
 }
 /**
  * Klavye tuşu.
@@ -157,12 +161,12 @@ export function Kbd({ children, className }) {
  *
  * Sıfır GÖSTERİLMEZ: "0 bildirim" bir bilgi değil, gürültüdür.
  */
-export function Badge({ count, max = 99, tone = "danger", label, className, children, }) {
+export function Badge({ count, max = 99, tone = "danger", label, className, children, ...rest }) {
     if (count <= 0)
         return _jsx(_Fragment, { children: children });
     const c = toneOf(tone);
     const shown = count > max ? `${max}+` : String(count);
-    const dot = (_jsxs("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 font-mono text-micro leading-none font-semibold tabular-nums", style: { background: c.mark, color: "var(--color-page)" }, children: [_jsx("span", { "aria-hidden": true, children: shown }), _jsxs("span", { className: "sr-only", children: [count, " ", label] })] }));
+    const dot = (_jsxs("span", { ...dataProps(rest), className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 font-mono text-micro leading-none font-semibold tabular-nums", style: { background: c.mark, color: "var(--color-page)" }, children: [_jsx("span", { "aria-hidden": true, children: shown }), _jsxs("span", { className: "sr-only", children: [count, " ", label] })] }));
     if (!children)
         return dot;
     return (_jsxs("span", { className: cn("relative inline-flex", className), children: [children, _jsx("span", { className: "absolute -top-1 -right-1", children: dot })] }));
@@ -170,9 +174,8 @@ export function Badge({ count, max = 99, tone = "danger", label, className, chil
 /**
  * Adım göstergesi.
  *
- * Üründe bir sihirbaz şablonu vardı ve adım göstergesi yoktu — yani kullanıcı
- * kaçıncı adımda olduğunu ve kaç adım kaldığını bilmiyordu. Bir sihirbazın
- * varlık sebebi tam olarak budur.
+ * Bir sihirbazın adım göstergesi yoksa kullanıcı kaçıncı adımda olduğunu ve
+ * kaç adım kaldığını bilmiyor; sihirbazın varlık sebebi tam olarak budur.
  *
  * `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
  * "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
@@ -181,10 +184,10 @@ export function Badge({ count, max = 99, tone = "danger", label, className, chil
  * olan sönük. Üç durum üç ayrı görsel dil — çünkü "neredeyim" ve "ne kaldı"
  * ayrı iki soru.
  */
-export function Steps({ steps, current, className, }) {
-    return (_jsx("ol", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), children: steps.map((s, i) => {
+export function Steps({ steps, current, className, ...rest }) {
+    return (_jsx("ol", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), children: steps.map(({ key, label, ...adimRest }, i) => {
             const done = i < current;
             const active = i === current;
-            return (_jsxs("li", { className: "flex items-center gap-3", children: [_jsx("span", { className: "tamga-step-mark font-mono text-caption", "data-state": done ? "done" : active ? "current" : "todo", "aria-hidden": true, children: done ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : i + 1 }), _jsx("span", { className: cn("text-small", active ? "font-medium text-ink" : "text-ink-faint"), "aria-current": active ? "step" : undefined, children: s }), i < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "tamga-step-line", "data-done": done ? "true" : "false" })) : null] }, s));
+            return (_jsxs("li", { ...adimRest, className: "flex items-center gap-3", children: [_jsx("span", { className: "tamga-step-mark font-mono text-caption", "data-state": done ? "done" : active ? "current" : "todo", "aria-hidden": true, children: done ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : i + 1 }), _jsx("span", { className: cn("text-small", active ? "font-medium text-ink" : "text-ink-faint"), "aria-current": active ? "step" : undefined, children: label }), i < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "tamga-step-line", "data-done": done ? "true" : "false" })) : null] }, key));
         }) }));
 }

package/dist/components/empty-state.d.ts

@@ -23,12 +23,14 @@ export type Art = (opts: {
  * The line is real text, not decoration, so it is readable. Keep it to one
  * short sentence: the bubble is a voice, not a paragraph.
  */
-export declare function SaysBubble({ children, art, size, float, className, }: {
+export declare function SaysBubble({ children, art, size, float, className, ...rest }: {
     children: React.ReactNode;
     art: Art;
     size?: number;
     float?: boolean;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * A row that has nothing in it.
@@ -40,12 +42,14 @@ export declare function SaysBubble({ children, art, size, float, className, }: {
  * No border of its own: it drops into a table body or a list that already has
  * one, and it inherits that list's row rhythm.
  */
-export declare function EmptyNote({ art, title, children, action, className, }: {
+export declare function EmptyNote({ art, title, children, action, className, ...rest }: {
     art: Art;
     title: string;
     children?: React.ReactNode;
     action?: React.ReactNode;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 export type EmptyLayout = "banner" | "ticket" | "routes";
 export type EmptyRoute = {
@@ -72,7 +76,7 @@ export type EmptyRoute = {
  * drawing decides what the emptiness FEELS like, and those are two choices,
  * not one.
  */
-export declare function EmptyState({ layout, art, kicker, title, children, action, note, says, steps, routes, size, className, }: {
+export declare function EmptyState({ layout, art, kicker, title, children, action, note, says, steps, routes, size, className, ...rest }: {
     layout?: EmptyLayout;
     art: Art;
     /** what KIND of nothing this is: "no records", "no results" TR: bunun NE TÜR bir hiçlik olduğu: "kayıt yok", "sonuç yok" */
@@ -97,6 +101,8 @@ export declare function EmptyState({ layout, art, kicker, title, children, actio
     routes?: EmptyRoute[];
     size?: number;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * A whole body with nothing in it — and no box drawn around the nothing.
@@ -112,7 +118,7 @@ export declare function EmptyState({ layout, art, kicker, title, children, actio
  * empty area INSIDE a working screen, use EmptyState instead: that one has a
  * card around it because the rest of the screen does too.
  */
-export declare function EmptyBlank({ art, kicker, title, children, action, says, size, className, }: {
+export declare function EmptyBlank({ art, kicker, title, children, action, says, size, className, ...rest }: {
     art: Art;
     kicker?: string;
     title: string;
@@ -121,6 +127,8 @@ export declare function EmptyBlank({ art, kicker, title, children, action, says,
     says?: React.ReactNode;
     size?: number;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * A choice you are offering — a template, a starting point, a preset.
@@ -133,7 +141,7 @@ export declare function EmptyBlank({ art, kicker, title, children, action, says,
  * banner behind it. A wall of coloured banners would out-shout a real event
  * (Yasa 3); a rule carries the same grouping and outranks nothing.
  */
-export declare function EmptyTile({ art, kicker, title, children, tone, onClick, className, }: {
+export declare function EmptyTile({ art, kicker, title, children, tone, onClick, className, ...rest }: {
     art: Art;
     /** the identifier-shaped line above the title TR: başlığın üstündeki tanımlayıcı biçimli satır */
     kicker?: string;
@@ -146,5 +154,7 @@ export declare function EmptyTile({ art, kicker, title, children, tone, onClick,
     tone?: 1 | 2 | 3 | 4 | 5;
     onClick?: () => void;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"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"}

package/dist/components/empty-state.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "./icon.js";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 import { CaretRight } from "./icons.js";
 /**
  * The drawing standing on the ground.
@@ -24,8 +25,8 @@ function ArtFigure({ art, size, float, ground = true, }) {
  * The line is real text, not decoration, so it is readable. Keep it to one
  * short sentence: the bubble is a voice, not a paragraph.
  */
-export function SaysBubble({ children, art, size = 168, float = true, className, }) {
-    return (_jsxs("div", { className: cn("relative shrink-0 pt-11", float && "tamga-float", className), children: [_jsxs("div", { className: "absolute top-0 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap", children: [_jsx("div", { className: "px-3 py-1.5 text-small font-medium text-ink", style: {
+export function SaysBubble({ children, art, size = 168, float = true, className, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("relative shrink-0 pt-11", float && "tamga-float", className), children: [_jsxs("div", { className: "absolute top-0 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap", children: [_jsx("div", { className: "px-3 py-1.5 text-small font-medium text-ink", style: {
                             background: "var(--color-shell)",
                             border: "1px solid var(--color-edge)",
                             borderRadius: "var(--radius-card)",
@@ -46,8 +47,8 @@ export function SaysBubble({ children, art, size = 168, float = true, className,
  * No border of its own: it drops into a table body or a list that already has
  * one, and it inherits that list's row rhythm.
  */
-export function EmptyNote({ art, title, children, action, className, }) {
-    return (_jsxs("div", { className: cn("tamga-gutter flex items-center gap-4 py-6", className), children: [_jsx("span", { className: "tamga-art-port tamga-art-well", children: _jsx(ArtFigure, { art: art, size: 56, ground: false }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), children ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: children })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+export function EmptyNote({ art, title, children, action, className, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-gutter flex items-center gap-4 py-6", className), children: [_jsx("span", { className: "tamga-art-port tamga-art-well", children: _jsx(ArtFigure, { art: art, size: 56, ground: false }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), children ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: children })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
 }
 /**
  * A surface that has nothing in it.
@@ -68,9 +69,9 @@ export function EmptyNote({ art, title, children, action, className, }) {
  * drawing decides what the emptiness FEELS like, and those are two choices,
  * not one.
  */
-export function EmptyState({ layout = "banner", art, kicker, title, children, action, note, says, steps, routes, size = 150, className, }) {
+export function EmptyState({ layout = "banner", art, kicker, title, children, action, note, says, steps, routes, size = 150, className, ...rest }) {
     const figure = says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true }));
-    const words = (_jsxs(_Fragment, { children: [kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, note ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: note })) : null] }));
+    const words = (_jsxs(_Fragment, { children: [kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { ...dataProps(rest), className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, note ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: note })) : null] }));
     if (layout === "banner") {
         return (_jsxs("div", { className: cn("flex flex-col overflow-hidden", className), children: [_jsxs("div", { className: "flex flex-1 flex-col sm:flex-row sm:items-stretch", children: [_jsx("div", { className: "tamga-art-well tamga-art-stage tamga-art-floor sm:border-b-0", children: figure }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-7 px-6 py-7 sm:flex-row sm:items-center sm:justify-between sm:gap-10 sm:px-9 sm:py-9", children: [_jsx("div", { className: "min-w-0", children: words }), action ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: action })) : null] })] }), steps?.length ? (_jsx("ol", { className: "tamga-art-steps tamga-art-well", children: steps.map((step, i) => (_jsxs("li", { className: "tamga-art-step", children: [_jsx("span", { className: "tamga-art-step-n", children: String(i + 1).padStart(2, "0") }), _jsx("span", { className: "text-small leading-relaxed text-ink-soft", children: step })] }, step))) })) : null] }));
     }
@@ -94,8 +95,8 @@ export function EmptyState({ layout = "banner", art, kicker, title, children, ac
  * empty area INSIDE a working screen, use EmptyState instead: that one has a
  * card around it because the rest of the screen does too.
  */
-export function EmptyBlank({ art, kicker, title, children, action, says, size = 230, className, }) {
-    return (_jsxs("div", { className: cn("flex w-full flex-col items-center justify-center px-6 py-16 text-center", className), children: [says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true, ground: false })), _jsx("span", { className: "tamga-art-blank-floor mt-1 mb-8", style: { width: size * 0.72 } }), kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, action ? (_jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: action })) : null] }));
+export function EmptyBlank({ art, kicker, title, children, action, says, size = 230, className, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex w-full flex-col items-center justify-center px-6 py-16 text-center", className), children: [says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true, ground: false })), _jsx("span", { className: "tamga-art-blank-floor mt-1 mb-8", style: { width: size * 0.72 } }), kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, action ? (_jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: action })) : null] }));
 }
 /**
  * A choice you are offering — a template, a starting point, a preset.
@@ -108,6 +109,6 @@ export function EmptyBlank({ art, kicker, title, children, action, says, size =
  * banner behind it. A wall of coloured banners would out-shout a real event
  * (Yasa 3); a rule carries the same grouping and outranks nothing.
  */
-export function EmptyTile({ art, kicker, title, children, tone = 1, onClick, className, }) {
-    return (_jsxs("button", { type: "button", onClick: onClick, className: cn("tamga-art-tile", className), children: [_jsx("span", { className: "tamga-art-well flex h-28 items-end justify-center pt-4", children: _jsx(ArtFigure, { art: art, size: 86 }) }), _jsx("span", { className: "tamga-art-spine", "data-tone": tone }), _jsxs("span", { className: "tamga-gutter flex min-w-0 flex-1 flex-col py-4", children: [kicker ? _jsx("span", { className: "tamga-kicker mb-1.5", children: kicker }) : null, _jsx("span", { className: "text-body font-semibold text-ink", children: title }), children ? (_jsx("span", { className: "mt-1 text-small leading-relaxed text-ink-faint", children: children })) : null] })] }));
+export function EmptyTile({ art, kicker, title, children, tone = 1, onClick, className, ...rest }) {
+    return (_jsxs("button", { ...dataProps(rest), type: "button", onClick: onClick, className: cn("tamga-art-tile", className), children: [_jsx("span", { className: "tamga-art-well flex h-28 items-end justify-center pt-4", children: _jsx(ArtFigure, { art: art, size: 86 }) }), _jsx("span", { className: "tamga-art-spine", "data-tone": tone }), _jsxs("span", { className: "tamga-gutter flex min-w-0 flex-1 flex-col py-4", children: [kicker ? _jsx("span", { className: "tamga-kicker mb-1.5", children: kicker }) : null, _jsx("span", { className: "text-body font-semibold text-ink", children: title }), children ? (_jsx("span", { className: "mt-1 text-small leading-relaxed text-ink-faint", children: children })) : null] })] }));
 }

package/dist/components/error-state.d.ts

@@ -3,7 +3,7 @@
  *
  * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export declare function ErrorState({ title, description, detail, onRetry, retryLabel, compact, }: {
+export declare function ErrorState({ title, description, detail, onRetry, retryLabel, compact, ...rest }: {
     title?: string;
     /**
      * plain words: what the person cannot do right now TR: düz sözcüklerle: kişinin şu an ne
@@ -27,5 +27,7 @@ export declare function ErrorState({ title, description, detail, onRetry, retryL
      * da panelin içinde
      */
     compact?: boolean;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=error-state.d.ts.map

package/dist/components/error-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/components/error-state.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAA6B,EAC7B,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAwB,EACxB,OAAe,GAChB,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAuCA"}
+{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/components/error-state.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAA6B,EAC7B,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAwB,EACxB,OAAe,EACf,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAwCA"}

package/dist/components/error-state.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { Refresh, Warning } from "./icons.js";
 import { Button } from "./button.js";
@@ -7,8 +8,8 @@ import { Button } from "./button.js";
  *
  * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export function ErrorState({ title = "Could not load this", description, detail, onRetry, retryLabel = "Try again", compact = false, }) {
-    return (_jsxs("div", { role: "alert", "aria-live": "polite", className: `tamga-gutter flex flex-col items-start gap-4 ${compact ? "py-6" : "py-12"}`, children: [_jsx("span", { className: "flex size-10 items-center justify-center border", style: {
+export function ErrorState({ title = "Could not load this", description, detail, onRetry, retryLabel = "Try again", compact = false, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), role: "alert", "aria-live": "polite", className: `tamga-gutter flex flex-col items-start gap-4 ${compact ? "py-6" : "py-12"}`, children: [_jsx("span", { className: "flex size-10 items-center justify-center border", style: {
                     borderRadius: "var(--radius-ctl)",
                     borderColor: "var(--color-critical)",
                     color: "var(--color-critical)",

package/dist/components/file-upload.d.ts

@@ -12,7 +12,7 @@ export type UploadItem = {
     url: string;
     name: string;
 };
-export declare function FileUpload({ items, onAdd, onRemove, onReorder, accept, multiple, disabled, labels, className, }: {
+export declare function FileUpload({ items, onAdd, onRemove, onReorder, accept, multiple, disabled, labels, className, ...rest }: {
     items: readonly UploadItem[];
     onAdd?: (files: File[]) => void;
     onRemove?: (id: string) => void;
@@ -30,5 +30,7 @@ export declare function FileUpload({ items, onAdd, onRemove, onReorder, accept,
         primary: string;
     };
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=file-upload.d.ts.map

package/dist/components/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAkB,EAClB,QAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,GACV,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,4GAA4G;QAC5G,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0GA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAkB,EAClB,QAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,4GAA4G;QAC5G,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0GA"}

package/dist/components/file-upload.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { Upload, Close, CaretLeft, CaretRight } from "./icons.js";
-export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/*", multiple = true, disabled = false, labels, className, }) {
+export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/*", multiple = true, disabled = false, labels, className, ...rest }) {
     const id = useId();
     const input = useRef(null);
     const [over, setOver] = useState(false);
@@ -18,7 +19,7 @@ export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/
         setOver(false);
         take(e.dataTransfer.files);
     }
-    return (_jsxs("div", { className: cn("flex flex-col gap-4", className), children: [_jsxs("div", { onDragOver: (e) => {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-4", className), children: [_jsxs("div", { onDragOver: (e) => {
                     e.preventDefault();
                     if (!disabled)
                         setOver(true);

package/dist/components/gauge.d.ts

@@ -35,13 +35,15 @@ export type ScoreProps = {
 export declare function ScoreRing({ value, label, bandLabel, size, showLabel, segments, tone, }: ScoreProps & {
     segments?: number;
 }): import("react").JSX.Element;
-export declare function ScoreMeter({ value, label, bandLabel, target, delta, segments, tone, }: ScoreProps & {
+export declare function ScoreMeter({ value, label, bandLabel, target, delta, segments, tone, ...rest }: ScoreProps & {
     target?: number;
     delta?: number;
     segments?: number;
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
-export declare function ScoreMatrix({ value, label, bandLabel, delta, size, }: ScoreProps & {
+export declare function ScoreMatrix({ value, label, bandLabel, delta, size, ...rest }: ScoreProps & {
     delta?: number;
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /** default export keeps the existing call sites working */
 //# sourceMappingURL=gauge.d.ts.map

package/dist/components/gauge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/components/gauge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAQvD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAyBF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAU,EACV,SAAgB,EAChB,QAAa,EACb,IAAI,GACL,EAAE,UAAU,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4EpC;AAID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,SAAS,EACT,MAAW,EACX,KAAK,EACL,QAAa,EACb,IAAI,GACL,EAAE,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BA+CrE;AAID,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,IAAU,GACX,EAAE,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAmCjC;AAED,2DAA2D"}
+{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/components/gauge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAQvD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAyBF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAU,EACV,SAAgB,EAChB,QAAa,EACb,IAAI,GACL,EAAE,UAAU,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4EpC;AAID,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,SAAS,EACT,MAAW,EACX,KAAK,EACL,QAAa,EACb,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BA+CrG;AAID,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,SAAS,EACT,KAAK,EACL,IAAU,EACV,GAAG,IAAI,EACR,EAAE,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAmCjE;AAED,2DAA2D"}

package/dist/components/gauge.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataProps } from "../lib/data-props.js";
 import { toneOf, neutral } from "./tone.js";
 /* Where the readout changes colour. The thresholds are a kit default; a product
    that scores differently passes its own tone instead. Words are NOT decided
@@ -44,18 +45,18 @@ export function ScoreRing({ value, label, bandLabel, size = 168, showLabel = tru
                 }, children: Math.round(v) }), showLabel && labelReads ? (_jsx("text", { x: cx, y: cy + size * 0.26, textAnchor: "middle", shapeRendering: "auto", style: { fontSize: size * 0.065, fontWeight: 500, fill: c.fg }, children: bandLabel })) : null] }));
 }
 /* ---------- B · Linear meter — the same strip, left straight ---------- */
-export function ScoreMeter({ value, label, bandLabel, target = 90, delta, segments = 40, tone, }) {
+export function ScoreMeter({ value, label, bandLabel, target = 90, delta, segments = 40, tone, ...rest }) {
     const v = Math.min(100, Math.max(0, value));
     const c = toneOf(tone ?? band(v));
     const filled = Math.round((v / 100) * segments);
-    return (_jsxs("div", { className: "w-full max-w-sm", role: "group", "aria-label": label, children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsx("span", { className: "font-mono text-display-lg font-bold leading-none tabular-nums text-ink", children: Math.round(v) }), _jsx("span", { className: "mb-1 font-mono text-body text-ink-faint", children: "/ 100" }), delta !== undefined ? (_jsx("span", { className: "mb-1 ml-auto", children: _jsx(Delta, { delta: delta }) })) : null] }), _jsx("p", { className: "mt-2 text-small", style: { color: c.fg }, children: bandLabel }), _jsxs("div", { className: "relative mt-4", children: [_jsx("div", { className: "flex items-end gap-[var(--mark-tick)]", children: Array.from({ length: segments }).map((_, i) => (_jsx("span", { className: "h-6 flex-1", style: { background: i < filled ? c.mark : neutral.line } }, i))) }), _jsx("span", { className: "absolute -top-1 bottom-[var(--dial-label-drop)] w-[var(--mark-tick)]", style: { left: `${target}%`, background: neutral.title } })] }), _jsxs("div", { className: "mt-2 flex justify-between font-mono text-micro text-ink-faint", children: [_jsx("span", { children: "0" }), _jsxs("span", { children: ["target ", target] }), _jsx("span", { children: "100" })] })] }));
+    return (_jsxs("div", { ...dataProps(rest), className: "w-full max-w-sm", role: "group", "aria-label": label, children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsx("span", { className: "font-mono text-display-lg font-bold leading-none tabular-nums text-ink", children: Math.round(v) }), _jsx("span", { className: "mb-1 font-mono text-body text-ink-faint", children: "/ 100" }), delta !== undefined ? (_jsx("span", { className: "mb-1 ml-auto", children: _jsx(Delta, { delta: delta }) })) : null] }), _jsx("p", { className: "mt-2 text-small", style: { color: c.fg }, children: bandLabel }), _jsxs("div", { className: "relative mt-4", children: [_jsx("div", { className: "flex items-end gap-[var(--mark-tick)]", children: Array.from({ length: segments }).map((_, i) => (_jsx("span", { className: "h-6 flex-1", style: { background: i < filled ? c.mark : neutral.line } }, i))) }), _jsx("span", { className: "absolute -top-1 bottom-[var(--dial-label-drop)] w-[var(--mark-tick)]", style: { left: `${target}%`, background: neutral.title } })] }), _jsxs("div", { className: "mt-2 flex justify-between font-mono text-micro text-ink-faint", children: [_jsx("span", { children: "0" }), _jsxs("span", { children: ["target ", target] }), _jsx("span", { children: "100" })] })] }));
 }
 /* ---------- C · Block matrix — one square is one point ---------- */
-export function ScoreMatrix({ value, label, bandLabel, delta, size = 176, }) {
+export function ScoreMatrix({ value, label, bandLabel, delta, size = 176, ...rest }) {
     const v = Math.round(Math.min(100, Math.max(0, value)));
     const c = toneOf(band(v));
     const cell = (size - 9 * 2) / 10;
-    return (_jsxs("div", { style: { width: size }, role: "group", "aria-label": label, children: [_jsxs("div", { className: "flex items-end gap-2", children: [_jsx("span", { className: "font-mono text-display font-bold leading-none tabular-nums text-ink", children: v }), delta !== undefined ? (_jsx("span", { className: "mb-1 ml-auto", children: _jsx(Delta, { delta: delta }) })) : null] }), _jsx("p", { className: "mt-1 text-small", style: { color: c.fg }, children: bandLabel }), _jsx("div", { className: "mt-4 grid grid-cols-10 gap-[var(--mark-tick)]", children: Array.from({ length: 100 }).map((_, i) => {
+    return (_jsxs("div", { ...dataProps(rest), style: { width: size }, role: "group", "aria-label": label, children: [_jsxs("div", { className: "flex items-end gap-2", children: [_jsx("span", { className: "font-mono text-display font-bold leading-none tabular-nums text-ink", children: v }), delta !== undefined ? (_jsx("span", { className: "mb-1 ml-auto", children: _jsx(Delta, { delta: delta }) })) : null] }), _jsx("p", { className: "mt-1 text-small", style: { color: c.fg }, children: bandLabel }), _jsx("div", { className: "mt-4 grid grid-cols-10 gap-[var(--mark-tick)]", children: Array.from({ length: 100 }).map((_, i) => {
                     /* fill bottom-up so the block grows like a column of evidence */
                     const row = 9 - Math.floor(i / 10);
                     const index = row * 10 + (i % 10);