tamga-ui 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -5,6 +5,105 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 > 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
 
+## 0.4.0
+
+**A step now has an identity of its own.** `Steps` took a plain `readonly string[]`, so a step was
+nothing but its translated label. Two consequences followed, and both were silent.
+
+The React key was the label. Change the language and every step becomes, to React, a different
+element: the old node is torn down and a new one built in its place. Nothing looks wrong, but
+anything holding on to that node goes with it. Two steps sharing a label collided the same way.
+
+And there was no way to reach a single step. A caller who needed to point at one, to test it or to
+style it, had nothing to point with; the only thing in the DOM that told steps apart was the
+translated text, which is the one thing that changes underneath a test. The sibling component for
+picking one of several options had carried per-option hooks since 0.3.1. The step strip had not,
+and a gate exemption recorded that gap as though it were a decision.
+
+### Breaking
+
+- **`Steps.steps`** is now `readonly Step[]` instead of `readonly string[]`, where
+  `Step = { key: string; label: string } & Record<string, unknown>`. Anything beyond `key` and
+  `label` lands on that step's `<li>`.
+
+  ```diff
+  - <Steps steps={["Details", "Connection", "Done"]} current={1} />
+  + <Steps
+  +   steps={[
+  +     { key: "details", label: "Details" },
+  +     { key: "connection", label: "Connection" },
+  +     { key: "done", label: "Done" },
+  +   ]}
+  +   current={1}
+  + />
+  ```
+
+  The key is an identifier, so it is not translated; the label is. A caller that already had keys
+  for its steps passes them straight through.
+
+- **`WizardStep` is now an alias of `Step`.** It was a second declaration of the same shape, and
+  the template flattened it to labels before drawing the strip, which is exactly where the identity
+  was being dropped. Code that already builds `{ key, label }` objects needs no change.
+
+### Added
+
+- **`RadioGroup.look`** — `list` (default), `chip` or `card`. Only the shell changes: the role, the
+  mark, the keyboard behaviour and `aria-checked` are identical in all three, and the selected shell
+  takes an outline and a hard offset rather than a fill.
+
+  The card shape was missing, so a product that wanted "one of N, drawn as cards" built it from a
+  stack of bare buttons. The picture came out right and the meaning did not: a screen reader
+  announced three separate buttons instead of one choice among three. Rebuilding the role and the
+  keyboard at every call site is work, and it is done incompletely every time.
+
+  A second line goes inside `label`, which is already a `ReactNode`. There is no separate `hint`
+  field, because a prop that means something in only one shell is a lie told to everyone reading the
+  props table.
+
+- **`PasswordInput.invalid`** — the sibling text field had it, this one did not, so a caller marking
+  a wrong password had to write the kit's class by hand. The class is only half of it: the hand-written
+  route never carried `aria-invalid`, so the error was visible and never announced.
+
+### Fixed
+
+- The step strip no longer remounts its list items when labels change.
+
+- **`PasswordInput` now reads the kit's own class table** instead of writing `tamga-input` by hand.
+  A rule added to the table reached every text field except this one, which is the same defect the
+  library asks its consumers not to introduce.
+
+## 0.3.2
+
+**Every component that draws a host element now accepts `data-*`.** 98 of them; before this, 79 did
+not.
+
+A `data-*` attribute is inert: it binds to no behaviour, it only carries a hook for a test, a style
+or an analytics reader. Refusing it cannot protect a component from anything. What it does instead
+is push the caller off the component entirely — a hook is needed, the component will not take it,
+so the class goes on a hand-written element and every guard that came with the component stays
+behind: the clip that keeps a menu whole inside a card, the wrapper that lets a table scroll on a
+narrow screen, the button that a keyboard can reach. None of it errors. The attribute is simply
+absent, and so is the behaviour.
+
+`aria-*` is deliberately not in this passthrough. It is not inert: an `aria-label` from outside
+silently overrides the accessible name a component computed for itself. Accessibility is asked for
+by an explicit prop.
+
+`Segmented` and `Steps` are the two exceptions, and the reason is written into the gate: their hooks
+belong to the individual option, not the wrapper, and `options[]` already carries them.
+
+### Added
+
+- **`Card.as`** — `div` (default), `section`, `article` or `ul`. A card is usually a *section*, and
+  the element is document structure rather than a presentation choice.
+
+### Internal
+
+- **`check-data-props`** — a 17th gate. It reads every exported component that renders a host
+  element and fails if it cannot take `data-*`. The five fixes that preceded this release were five
+  separate discoveries of one defect, found one call site at a time; this gate finds all of them in
+  one pass.
+
 ## 0.3.1
 
 Three components refused something a consumer legitimately needed, and in each case the way out was

package/dist/components/advanced-input.d.ts

@@ -3,11 +3,17 @@
  *
  * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
-export declare function PasswordInput({ labels, className, ...props }: Omit<React.ComponentProps<"input">, "type"> & {
+export declare function PasswordInput({ labels, invalid, className, ...props }: Omit<React.ComponentProps<"input">, "type"> & {
     labels: {
         show: string;
         hide: string;
     };
+    /**
+     * The field failed validation: it takes the error edge and sets `aria-invalid`, so the failure is
+     * announced as well as shown. TR: Alan doğrulamadan geçemedi: hata kenarını alıyor ve
+     * `aria-invalid` koyuyor, yani hata görünmekle kalmıyor duyuruluyor da.
+     */
+    invalid?: boolean;
 }): import("react").JSX.Element;
 /**
  * Maskeli sır — API anahtarı, webhook secret.
@@ -20,7 +26,7 @@ export declare function PasswordInput({ labels, className, ...props }: Omit<Reac
  * "hangi anahtar bu" sorusunu cevapsız bırakır; üç anahtarı olan biri
  * hangisine baktığını bilemez.
  */
-export declare function SecretField({ value, labels, visibleChars, className, }: {
+export declare function SecretField({ value, labels, visibleChars, className, ...rest }: {
     value: string;
     labels: {
         reveal: string;
@@ -35,6 +41,8 @@ export declare function SecretField({ value, labels, visibleChars, className, }:
      */
     visibleChars?: number;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Etiket girdisi.
@@ -47,7 +55,7 @@ export declare function SecretField({ value, labels, visibleChars, className, }:
  * yazmak bir hata değil, bir tekrardır, ve kullanıcı zaten istediğini almış
  * olur.
  */
-export declare function TagsInput({ value, onChange, placeholder, labels, max, className, }: {
+export declare function TagsInput({ value, onChange, placeholder, labels, max, className, ...rest }: {
     value: readonly string[];
     onChange: (next: string[]) => void;
     placeholder: string;
@@ -57,6 +65,8 @@ export declare function TagsInput({ value, onChange, placeholder, labels, max, c
     /** The ceiling; the input closes once it is full. TR: Üst sınır; dolduğunda girdi kapanır. */
     max?: number;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Çoklu seçim — aranabilir.
@@ -69,7 +79,7 @@ export declare function TagsInput({ value, onChange, placeholder, labels, max, c
  * değil: seçim ile seçilenler arasındaki mesafe arttıkça, kullanıcı neyi
  * seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
  */
-export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, }: {
+export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }: {
     options: readonly {
         value: string;
         label: string;
@@ -84,6 +94,8 @@ export declare function MultiSelect({ options, value, onChange, placeholder, lab
         open: string;
     };
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Zamanlama girdisi — "her N dakikada bir".

package/dist/components/advanced-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"AAcA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC,+BAwBA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,YAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACvF;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4DA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,SAAS,GACV,EAAE;IACD,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,CAAC;IAC5C,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgDA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAuJA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,OAAO,EAAE,SAAS;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}
+{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"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"}

package/dist/components/advanced-input.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { inputVariants } from "./input.js";
+import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
 /* ------------------------------------------------------------------ *
@@ -15,9 +17,9 @@ import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
  *
  * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
-export function PasswordInput({ labels, className, ...props }) {
+export function PasswordInput({ labels, invalid = false, className, ...props }) {
     const [shown, setShown] = useState(false);
-    return (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", { ...props, type: shown ? "text" : "password", className: cn("tamga-input w-full pr-10", className) }), _jsx("button", { type: "button", className: "tamga-mini-btn absolute right-1.5", "aria-label": shown ? labels.hide : labels.show, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) })] }));
+    return (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", { type: shown ? "text" : "password", "aria-invalid": invalid || undefined, className: cn(inputVariants({ invalid }), "w-full pr-11", className), ...props }), _jsx("button", { type: "button", className: "tamga-field-btn", "aria-label": shown ? labels.hide : labels.show, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) })] }));
 }
 /**
  * Maskeli sır — API anahtarı, webhook secret.
@@ -30,7 +32,7 @@ export function PasswordInput({ labels, className, ...props }) {
  * "hangi anahtar bu" sorusunu cevapsız bırakır; üç anahtarı olan biri
  * hangisine baktığını bilemez.
  */
-export function SecretField({ value, labels, visibleChars = 4, className, }) {
+export function SecretField({ value, labels, visibleChars = 4, className, ...rest }) {
     const [shown, setShown] = useState(false);
     const [copied, setCopied] = useState("idle");
     const timer = useRef(undefined);
@@ -55,7 +57,7 @@ export function SecretField({ value, labels, visibleChars = 4, className, }) {
         window.clearTimeout(timer.current);
         timer.current = window.setTimeout(() => setCopied("idle"), 1600);
     }
-    return (_jsxs("span", { className: cn("relative flex items-center", className), children: [_jsx("input", { readOnly: true, value: shown ? value : masked, className: "tamga-input w-full pr-18 font-mono", 
+    return (_jsxs("span", { ...dataProps(rest), className: cn("relative flex items-center", className), children: [_jsx("input", { readOnly: true, value: shown ? value : masked, className: "tamga-input w-full pr-18 font-mono", 
                 /* Salt-okunur bir alan yine de odaklanabilir olmalı: kullanıcı onu
                    seçip elle kopyalayabilsin. `disabled` bunu imkânsız kılardı. */
                 onFocus: (e) => e.currentTarget.select() }), _jsxs("span", { className: "absolute right-1.5 flex gap-0.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": shown ? labels.hide : labels.reveal, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": copied === "done" ? labels.copied : copied === "failed" ? labels.failed : labels.copy, onClick: copy, children: _jsx(Icon, { icon: copied === "done" ? Check : Customize, size: "xs" }) })] })] }));
@@ -71,7 +73,7 @@ export function SecretField({ value, labels, visibleChars = 4, className, }) {
  * yazmak bir hata değil, bir tekrardır, ve kullanıcı zaten istediğini almış
  * olur.
  */
-export function TagsInput({ value, onChange, placeholder, labels, max, className, }) {
+export function TagsInput({ value, onChange, placeholder, labels, max, className, ...rest }) {
     const [draft, setDraft] = useState("");
     const full = max !== undefined && value.length >= max;
     function commit() {
@@ -81,7 +83,7 @@ export function TagsInput({ value, onChange, placeholder, labels, max, className
             return;
         onChange([...value, tag]);
     }
-    return (_jsxs("span", { className: cn("tamga-input h-auto min-h-10 w-full flex-wrap items-center gap-1.5 py-1.5", className), style: { display: "flex" }, children: [value.map((tag) => (_jsxs("span", { className: "tamga-chip gap-1", children: [tag, _jsx("button", { type: "button", "aria-label": labels.remove(tag), onClick: () => onChange(value.filter((x) => x !== tag)), className: "-mr-1 inline-flex items-center", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, tag))), !full ? (_jsx("input", { value: draft, placeholder: value.length === 0 ? placeholder : undefined, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
+    return (_jsxs("span", { ...dataProps(rest), className: cn("tamga-input h-auto min-h-10 w-full flex-wrap items-center gap-1.5 py-1.5", className), style: { display: "flex" }, children: [value.map((tag) => (_jsxs("span", { className: "tamga-chip gap-1", children: [tag, _jsx("button", { type: "button", "aria-label": labels.remove(tag), onClick: () => onChange(value.filter((x) => x !== tag)), className: "-mr-1 inline-flex items-center", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, tag))), !full ? (_jsx("input", { value: draft, placeholder: value.length === 0 ? placeholder : undefined, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === ",") {
                         e.preventDefault();
                         commit();
@@ -102,7 +104,7 @@ export function TagsInput({ value, onChange, placeholder, labels, max, className
  * değil: seçim ile seçilenler arasındaki mesafe arttıkça, kullanıcı neyi
  * seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
  */
-export function MultiSelect({ options, value, onChange, placeholder, labels, className, }) {
+export function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }) {
     const id = useId();
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState("");
@@ -157,7 +159,7 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
         if (e.key === "Escape")
             setOpen(false);
     }
-    return (_jsxs("div", { ref: box, className: cn("relative", className), 
+    return (_jsxs("div", { ...dataProps(rest), ref: box, className: cn("relative", className), 
         /* Odak kutunun DIŞINA çıkınca kapanıyor — tıklama dinleyicisiyle değil.
            Dışarı tıklamayı dinlemek klavyeyle çıkanı görmez ve liste açık kalır. */
         onBlur: (e) => {

package/dist/components/appearance.d.ts

@@ -9,7 +9,7 @@ export type SwatchOption = {
  * Brand colour chosen from a few squares, or written by hand.
  * TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
  */
-export declare function ColorSwatches({ options, value, onChange, customLabel, custom, className, }: {
+export declare function ColorSwatches({ options, value, onChange, customLabel, custom, className, ...rest }: {
     options: readonly SwatchOption[];
     value: string;
     onChange: (hex: string) => void;
@@ -18,6 +18,8 @@ export declare function ColorSwatches({ options, value, onChange, customLabel, c
     /** Whether a free colour is offered at all. TR: Serbest rengin hiç sunulup sunulmadığı. */
     custom?: boolean;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 export type ThemeChoice = "light" | "dark" | "system";
 /**
@@ -31,7 +33,7 @@ export type ThemeChoice = "light" | "dark" | "system";
  * kullanıcı sonucu görmek istiyor. "Sistem" iki yarımı tek karede gösteriyor,
  * anlamı tam olarak bu.
  */
-export declare function ThemeCards({ value, onChange, labels, className, }: {
+export declare function ThemeCards({ value, onChange, labels, className, ...rest }: {
     value: ThemeChoice;
     onChange: (next: ThemeChoice) => void;
     /** The three names and the group's accessible name. TR: Üç ad ve kümenin erişilebilir adı. */
@@ -42,6 +44,8 @@ export declare function ThemeCards({ value, onChange, labels, className, }: {
         group: string;
     };
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * One image with a preview, a replace and a remove.
@@ -53,7 +57,7 @@ export declare function ThemeCards({ value, onChange, labels, className, }: {
  * TR: `FileUpload` DEĞİL: o bir GALERİ (çoklu seçim, sıralama okları, "kapak"
  * rozeti). Ürün fotoğrafları için doğru, tek bir logo için yanlış.
  */
-export declare function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, }: {
+export declare function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, ...rest }: {
     value: string | null;
     onChange: (next: string | null) => void;
     /** Longest edge of the stored image, in pixels. TR: Saklanan görselin en uzun kenarı, piksel. */
@@ -74,5 +78,7 @@ export declare function ImageField({ value, onChange, maxEdge, labels, preview,
     /** An extra control beside the buttons. TR: Düğmelerin yanına giren ek kontrol. */
     extra?: ReactNode;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=appearance.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAchE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAC;IACZ,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAa,EACb,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,uGAAuG;IACvG,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAqCA;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAoBtD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,8FAA8F;IAC9F,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA6BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,iGAAiG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE;QACN,gGAAgG;QAChG,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,+HAA+H;IAC/H,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IACpC,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAoDA"}
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAehE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAC;IACZ,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,uGAAuG;IACvG,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAqCA;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAoBtD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,8FAA8F;IAC9F,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA6BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,iGAAiG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE;QACN,gGAAgG;QAChG,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,+HAA+H;IAC/H,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IACpC,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoDA"}

package/dist/components/appearance.js

@@ -2,6 +2,7 @@
 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 { IMAGE_ACCEPT, prepareImage } from "../lib/image.js";
 import { Alert } from "./primitives.js";
 import { Button } from "./button.js";
@@ -9,10 +10,10 @@ import { Button } from "./button.js";
  * Brand colour chosen from a few squares, or written by hand.
  * TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
  */
-export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, }) {
+export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, ...rest }) {
     const secili = (hex) => hex.toLowerCase() === value.toLowerCase();
     const hazirMi = options.some((o) => secili(o.hex));
-    return (_jsxs("span", { className: cn("flex flex-wrap items-center gap-3", className), children: [options.map((o) => (_jsx("button", { type: "button", className: "tamga-swatch", "data-selected": secili(o.hex), "aria-label": o.label, title: o.label, onClick: () => onChange(o.hex), children: _jsx("span", { "aria-hidden": true, style: { background: o.hex } }) }, o.hex))), custom ? (_jsxs("label", { className: "tamga-swatch", "data-selected": !hazirMi, title: customLabel, children: [_jsx("span", { className: "sr-only", children: customLabel }), _jsx("input", { type: "color", value: hazirMi ? options[0].hex : value, onChange: (e) => onChange(e.target.value), className: "tamga-color-input", "aria-label": customLabel })] })) : null] }));
+    return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-3", className), children: [options.map((o) => (_jsx("button", { type: "button", className: "tamga-swatch", "data-selected": secili(o.hex), "aria-label": o.label, title: o.label, onClick: () => onChange(o.hex), children: _jsx("span", { "aria-hidden": true, style: { background: o.hex } }) }, o.hex))), custom ? (_jsxs("label", { className: "tamga-swatch", "data-selected": !hazirMi, title: customLabel, children: [_jsx("span", { className: "sr-only", children: customLabel }), _jsx("input", { type: "color", value: hazirMi ? options[0].hex : value, onChange: (e) => onChange(e.target.value), className: "tamga-color-input", "aria-label": customLabel })] })) : null] }));
 }
 function Yarim({ theme }) {
     return (_jsxs("span", { className: "tamga-theme-half", "data-theme": theme, "aria-hidden": true, children: [_jsxs("span", { className: "tamga-theme-rail", children: [_jsx("span", { className: "tamga-theme-dot", "data-accent": "true" }), _jsx("span", { className: "tamga-theme-dot" }), _jsx("span", { className: "tamga-theme-dot" })] }), _jsxs("span", { className: "tamga-theme-body", children: [_jsx("span", { className: "tamga-theme-line", style: { width: "70%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "45%" } }), _jsx("span", { className: "tamga-theme-line", "data-accent": "true", style: { width: "30%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "60%" } })] })] }));
@@ -28,13 +29,13 @@ function Yarim({ theme }) {
  * kullanıcı sonucu görmek istiyor. "Sistem" iki yarımı tek karede gösteriyor,
  * anlamı tam olarak bu.
  */
-export function ThemeCards({ value, onChange, labels, className, }) {
+export function ThemeCards({ value, onChange, labels, className, ...rest }) {
     const secenekler = [
         { deger: "light", ad: labels.light },
         { deger: "dark", ad: labels.dark },
         { deger: "system", ad: labels.system },
     ];
-    return (_jsx("div", { role: "radiogroup", "aria-label": labels.group, className: cn("flex flex-wrap gap-3", className), children: secenekler.map((s) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === s.deger, tabIndex: value === s.deger ? 0 : -1, "data-selected": value === s.deger, className: "tamga-theme-card", onClick: () => onChange(s.deger), children: [_jsxs("span", { className: "tamga-theme-box", children: [s.deger === "dark" ? _jsx(Yarim, { theme: "dark" }) : _jsx(Yarim, { theme: "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark" }) : null] }), _jsx("span", { className: "tamga-theme-name", children: s.ad })] }, s.deger))) }));
+    return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": labels.group, className: cn("flex flex-wrap gap-3", className), children: secenekler.map((s) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === s.deger, tabIndex: value === s.deger ? 0 : -1, "data-selected": value === s.deger, className: "tamga-theme-card", onClick: () => onChange(s.deger), children: [_jsxs("span", { className: "tamga-theme-box", children: [s.deger === "dark" ? _jsx(Yarim, { theme: "dark" }) : _jsx(Yarim, { theme: "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark" }) : null] }), _jsx("span", { className: "tamga-theme-name", children: s.ad })] }, s.deger))) }));
 }
 /**
  * One image with a preview, a replace and a remove.
@@ -46,7 +47,7 @@ export function ThemeCards({ value, onChange, labels, className, }) {
  * TR: `FileUpload` DEĞİL: o bir GALERİ (çoklu seçim, sıralama okları, "kapak"
  * rozeti). Ürün fotoğrafları için doğru, tek bir logo için yanlış.
  */
-export function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, }) {
+export function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, ...rest }) {
     const id = useId();
     const girdi = useRef(null);
     const [hata, setHata] = useState(null);
@@ -69,5 +70,5 @@ export function ImageField({ value, onChange, maxEdge, labels, preview, extra, c
                 girdi.current.value = "";
         }
     }
-    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsx("input", { ref: girdi, id: id, type: "file", accept: IMAGE_ACCEPT, className: "sr-only", onChange: (e) => al(e.target.files?.[0]) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("span", { className: "tamga-image-field", "data-empty": value ? undefined : "true", children: value ? preview(value) : labels.empty }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", onClick: () => girdi.current?.click(), children: value ? labels.replace : labels.upload }), extra, value ? (_jsx(Button, { type: "button", variant: "ghost", onClick: () => onChange(null), children: labels.remove })) : null] })] }), hata ? _jsx(Alert, { state: "danger", title: hata }) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-3", className), children: [_jsx("input", { ref: girdi, id: id, type: "file", accept: IMAGE_ACCEPT, className: "sr-only", onChange: (e) => al(e.target.files?.[0]) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("span", { className: "tamga-image-field", "data-empty": value ? undefined : "true", children: value ? preview(value) : labels.empty }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", onClick: () => girdi.current?.click(), children: value ? labels.replace : labels.upload }), extra, value ? (_jsx(Button, { type: "button", variant: "ghost", onClick: () => onChange(null), children: labels.remove })) : null] })] }), hata ? _jsx(Alert, { state: "danger", title: hata }) : null] }));
 }

package/dist/components/avatar.d.ts

@@ -1,5 +1,5 @@
 /** Square, monochrome. Identity is text — color is reserved for health. */
-export declare function Avatar({ name, size, src, bare, letters, }: {
+export declare function Avatar({ name, size, src, bare, letters, ...rest }: {
     name: string;
     size?: number;
     /**
@@ -28,6 +28,8 @@ export declare function Avatar({ name, size, src, bare, letters, }: {
      * harf ise yarım okunamaz. `AvatarStack` bu yüzden 1 geçiyor.
      */
     letters?: 1 | 2;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Üst üste binen ekip.
@@ -50,7 +52,7 @@ export declare function Avatar({ name, size, src, bare, letters, }: {
  * çağıran onu söyler. Bulanıklık yok: `0 0 0` yayılımsız bir halka, gölge
  * değil.
  */
-export declare function AvatarStack({ names, extra, size, surface, }: {
+export declare function AvatarStack({ names, extra, size, surface, ...rest }: {
     names: string[];
     extra?: number;
     size?: number;
@@ -59,5 +61,7 @@ export declare function AvatarStack({ names, extra, size, surface, }: {
      * arkasındaki zeminin rengi; ayırıcı halka bu renkte çizilir.
      */
     surface?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAUA,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAS,EACT,GAAG,EACH,IAAY,EACZ,OAAW,GACZ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,+BAiCA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAS,EACT,OAA8B,GAC/B,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,+BA4BA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAWA,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAS,EACT,GAAG,EACH,IAAY,EACZ,OAAW,EACX,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkCA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAS,EACT,OAA8B,EAC9B,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4BA"}

package/dist/components/avatar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 function initials(name, count) {
     return name
         .split(" ")
@@ -9,7 +10,7 @@ function initials(name, count) {
         .join("");
 }
 /** Square, monochrome. Identity is text — color is reserved for health. */
-export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
+export function Avatar({ name, size = 32, src, bare = false, letters = 2, ...rest }) {
     const box = {
         width: size,
         height: size,
@@ -20,7 +21,7 @@ export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
     if (src) {
         return (_jsx("img", { src: src, alt: name, width: size, height: size, className: cn("shrink-0 object-cover", !bare && "rounded-[var(--radius-mark)] border border-edge"), style: box }));
     }
-    return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center font-semibold text-ink", !bare && "rounded-[var(--radius-mark)] border border-edge bg-hover"), style: box, "aria-hidden": true, children: initials(name, letters) }));
+    return (_jsx("span", { ...dataProps(rest), className: cn("inline-flex shrink-0 items-center justify-center font-semibold text-ink", !bare && "rounded-[var(--radius-mark)] border border-edge bg-hover"), style: box, "aria-hidden": true, children: initials(name, letters) }));
 }
 /**
  * Üst üste binen ekip.
@@ -43,12 +44,12 @@ export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
  * çağıran onu söyler. Bulanıklık yok: `0 0 0` yayılımsız bir halka, gölge
  * değil.
  */
-export function AvatarStack({ names, extra, size = 24, surface = "var(--color-shell)", }) {
+export function AvatarStack({ names, extra, size = 24, surface = "var(--color-shell)", ...rest }) {
     const overlap = Math.round(size / 4);
     const ring = { boxShadow: `0 0 0 2px ${surface}` };
     /* Karoların kendi baş harfleri `aria-hidden` — üst üste binmiş harfler ekran
        okuyucuda anlamsız bir dizi olurdu. Adlar bir kez, düz metin olarak
        veriliyor: "Berika Sultan, Deniz Kara ve 7 kişi daha". */
     const spoken = [...names, extra ? `+${extra}` : null].filter(Boolean).join(", ");
-    return (_jsxs("div", { className: "flex items-center", role: "img", "aria-label": spoken, children: [names.map((n, i) => (_jsx("span", { className: "rounded-[var(--radius-mark)]", style: { marginLeft: i === 0 ? 0 : -overlap, ...ring }, children: _jsx(Avatar, { name: n, size: size, letters: 1 }) }, n + i))), extra ? (_jsxs("span", { className: "inline-flex items-center justify-center rounded-[var(--radius-mark)] border border-edge bg-shell font-mono text-caption font-bold text-ink", style: { width: size, height: size, marginLeft: -overlap, ...ring }, children: ["+", extra] })) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), className: "flex items-center", role: "img", "aria-label": spoken, children: [names.map((n, i) => (_jsx("span", { className: "rounded-[var(--radius-mark)]", style: { marginLeft: i === 0 ? 0 : -overlap, ...ring }, children: _jsx(Avatar, { name: n, size: size, letters: 1 }) }, n + i))), extra ? (_jsxs("span", { className: "inline-flex items-center justify-center rounded-[var(--radius-mark)] border border-edge bg-shell font-mono text-caption font-bold text-ink", style: { width: size, height: size, marginLeft: -overlap, ...ring }, children: ["+", extra] })) : null] }));
 }

package/dist/components/badge.d.ts

@@ -1,5 +1,5 @@
 import type { Tone } from "./tone.js";
-export declare function StatusChip({ label, state, dot, live, mono, severity, }: {
+export declare function StatusChip({ label, state, dot, live, mono, severity, ...rest }: {
     label: string;
     state: Tone;
     dot?: boolean;
@@ -14,18 +14,22 @@ export declare function StatusChip({ label, state, dot, live, mono, severity, }:
      * taşıdığında açık sıra; yoksa durumdan türetiliyor
      */
     severity?: number | null;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
-export declare function Delta({ value, better, mono, }: {
+export declare function Delta({ value, better, mono, ...rest }: {
     value: string;
     better: boolean;
     mono?: boolean;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
  * Solid square status mark used in dense tables. Uses `fg` rather than `mark`
  * so a single 10px square still reads at rest — bars can afford to be quieter,
  * a lone dot cannot.
  */
-export declare function Dot({ state, live, severity, }: {
+export declare function Dot({ state, live, severity, ...rest }: {
     state: Tone;
     live?: boolean;
     /**
@@ -33,5 +37,7 @@ export declare function Dot({ state, live, severity, }: {
      * taşıdığında açık sıra; yoksa durumdan türetiliyor
      */
     severity?: number | null;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAStC,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,GAAU,EACV,IAAY,EACZ,IAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,+BAiBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,+BAeA;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,+BAUA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAStC,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,GAAU,EACV,IAAY,EACZ,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAW,EACX,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgBA;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAWA"}

package/dist/components/badge.js

@@ -1,29 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataProps } from "../lib/data-props.js";
 import { toneOf, rankOf } from "./tone.js";
 import { useLiveClaim } from "./live-scope.js";
 /* `live` is a REQUEST, not a decision. The element asks the nearest LiveScope
    to pulse and only the most severe asker wins — see live-scope.tsx. Call sites
    keep writing `live={m.health === "down"}` exactly as before; the counting is
    no longer their problem. */
-export function StatusChip({ label, state, dot = true, live = false, mono = false, severity, }) {
+export function StatusChip({ label, state, dot = true, live = false, mono = false, severity, ...rest }) {
     const h = toneOf(state);
     const pulses = useLiveClaim(live ? rankOf(state, severity) : null);
-    return (_jsxs("span", { className: `tamga-chip ${mono ? "tamga-chip-mono" : ""}`, style: { background: h.bg, color: h.fg }, children: [dot && (_jsx("span", { className: `inline-block size-[var(--mark-dot)] ${pulses ? "tamga-live" : ""}`, style: { background: h.mark } })), label] }));
+    return (_jsxs("span", { ...dataProps(rest), className: `tamga-chip ${mono ? "tamga-chip-mono" : ""}`, style: { background: h.bg, color: h.fg }, children: [dot && (_jsx("span", { className: `inline-block size-[var(--mark-dot)] ${pulses ? "tamga-live" : ""}`, style: { background: h.mark } })), label] }));
 }
-export function Delta({ value, better, mono = true, }) {
+export function Delta({ value, better, mono = true, ...rest }) {
     /* good movement stays neutral — color is reserved for deviation */
     const color = better ? "var(--color-ink-faint)" : "var(--color-critical)";
     const rising = !value.trimStart().startsWith("-");
-    return (_jsxs("span", { className: `inline-flex items-center gap-1 text-small font-bold ${mono ? "font-mono" : ""}`, style: { color }, children: [_jsx("svg", { width: "9", height: "9", viewBox: "0 0 10 10", "aria-hidden": true, children: _jsx("path", { d: rising ? "M5 1L9 8H1Z" : "M5 9L1 2H9Z", style: { fill: color } }) }), value] }));
+    return (_jsxs("span", { ...dataProps(rest), className: `inline-flex items-center gap-1 text-small font-bold ${mono ? "font-mono" : ""}`, style: { color }, children: [_jsx("svg", { width: "9", height: "9", viewBox: "0 0 10 10", "aria-hidden": true, children: _jsx("path", { d: rising ? "M5 1L9 8H1Z" : "M5 9L1 2H9Z", style: { fill: color } }) }), value] }));
 }
 /**
  * Solid square status mark used in dense tables. Uses `fg` rather than `mark`
  * so a single 10px square still reads at rest — bars can afford to be quieter,
  * a lone dot cannot.
  */
-export function Dot({ state, live = false, severity, }) {
+export function Dot({ state, live = false, severity, ...rest }) {
     const h = toneOf(state);
     const pulses = useLiveClaim(live ? rankOf(state, severity) : null);
-    return (_jsx("span", { className: `inline-block size-2.5 shrink-0 ${pulses ? "tamga-live" : ""}`, style: { background: h.fg }, "aria-hidden": true }));
+    return (_jsx("span", { ...dataProps(rest), className: `inline-block size-2.5 shrink-0 ${pulses ? "tamga-live" : ""}`, style: { background: h.fg }, "aria-hidden": true }));
 }

package/dist/components/bar.d.ts

@@ -19,7 +19,7 @@ export type Bar = {
      */
     note?: string;
 };
-export declare function BarChart({ bars, formatValue, labelWidth, className, }: {
+export declare function BarChart({ bars, formatValue, labelWidth, className, ...rest }: {
     bars: readonly Bar[];
     formatValue?: (v: number) => string;
     /**
@@ -28,5 +28,7 @@ export declare function BarChart({ bars, formatValue, labelWidth, className, }:
      */
     labelWidth?: string;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=bar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/components/bar.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AASF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAoB,EACpB,UAAoB,EACpB,SAAS,GACV,EAAE;IACD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4DA"}
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/components/bar.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AAEH,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AASF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4DA"}

package/dist/components/bar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 /** Sayıyı ızgara çizgisine yuvarlar: 87 → 100, 412 → 500. */
 function niceMax(v) {
     if (v <= 0)
@@ -9,14 +10,14 @@ function niceMax(v) {
     const mag = 10 ** Math.floor(Math.log10(v));
     return Math.ceil(v / mag) * mag;
 }
-export function BarChart({ bars, formatValue = String, labelWidth = "10rem", className, }) {
+export function BarChart({ bars, formatValue = String, labelWidth = "10rem", className, ...rest }) {
     const enBuyuk = niceMax(Math.max(0, ...bars.map((b) => b.value)));
     /* SATIRIN TAMAMI VURGULANIYOR, yalnız çubuk değil: uzun bir listede gözün
        kaydığı şey satır. Ad solda, sayı sağda, arada bir metre uzunluğunda
        çubuk var; hangi adın hangi sayıya ait olduğunu takip etmek zorlaşıyor ve
        satır zemini o izi tutuyor. */
     const [uzerinde, setUzerinde] = useState(null);
-    return (_jsxs("div", { className: cn("flex flex-col gap-0.5", className), onMouseLeave: () => setUzerinde(null), children: [bars.map((b) => {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-0.5", className), onMouseLeave: () => setUzerinde(null), children: [bars.map((b) => {
                 const oran = enBuyuk > 0 ? b.value / enBuyuk : 0;
                 const secili = uzerinde === b.label;
                 return (_jsxs("div", { className: "grid cursor-default items-center gap-3 rounded-(--radius-mark) px-1.5 py-1 transition-[background] duration-(--duration-press)", style: {

package/dist/components/chart.d.ts

@@ -25,7 +25,7 @@ export type Series = {
      */
     tone?: Tone;
 };
-export declare function LineChart({ series, labels, height, formatValue, className, }: {
+export declare function LineChart({ series, labels, height, formatValue, className, ...rest }: {
     series: readonly Series[];
     /**
      * The marks under the X axis. The caller formats the numbers. TR: X ekseninin altındaki
@@ -39,5 +39,7 @@ export declare function LineChart({ series, labels, height, formatValue, classNa
      */
     formatValue?: (v: number) => string;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=chart.d.ts.map