tamga-ui 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -5,6 +5,38 @@ 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.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

@@ -20,7 +20,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 +35,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 +49,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 +59,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 +73,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 +88,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":"AAeA;;;;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,EACT,GAAG,IAAI,EACR,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;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4DA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACR,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;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiDA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,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;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAwJA;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"}

package/dist/components/advanced-input.js

@@ -2,6 +2,7 @@
 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 { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
 /* ------------------------------------------------------------------ *
@@ -30,7 +31,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 +56,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 +72,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 +82,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 +103,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 +158,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

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

@@ -1 +1 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAcF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAoB,EACpB,SAAS,GACV,EAAE;IACD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA+HA"}
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAcF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+HA"}

package/dist/components/chart.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 import { toneOf } from "./tone.js";
 /** Ton verilmemiş serinin rengi: sırayla kategorik palet. */
 function seriRengi(s, i) {
@@ -14,7 +15,7 @@ function niceMax(v) {
     const mag = 10 ** Math.floor(Math.log10(v));
     return Math.ceil(v / mag) * mag;
 }
-export function LineChart({ series, labels, height = 200, formatValue = String, className, }) {
+export function LineChart({ series, labels, height = 200, formatValue = String, className, ...rest }) {
     const id = useId();
     const [hover, setHover] = useState(null);
     const all = series.flatMap((s) => [...s.values]);
@@ -29,7 +30,7 @@ export function LineChart({ series, labels, height = 200, formatValue = String,
     /* Dört ızgara çizgisi: daha azı okumayı zorlaştırır, daha çoğu grafiği
        kafese çevirir. */
     const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
-    return (_jsxs("figure", { className: cn("tamga-surface p-4", className), children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between text-right font-mono text-caption text-ink-faint tabular-nums", style: { height }, "aria-hidden": true, children: [...ticks].reverse().map((t) => (_jsx("span", { children: formatValue(Math.round(t)) }, t))) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", style: { height, width: "100%" }, role: "img", "aria-labelledby": id, onMouseLeave: () => setHover(null), children: [_jsx("title", { id: id, children: series.map((s) => `${s.name}: ${formatValue(s.values[s.values.length - 1] ?? 0)}`).join(" · ") }), ticks.map((t) => (_jsx("line", { x1: 0, x2: W, y1: y(t), y2: y(t), stroke: "var(--color-line)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, t))), series.map((s, si) => {
+    return (_jsxs("figure", { className: cn("tamga-surface p-4", className), children: [_jsxs("div", { ...dataProps(rest), className: "flex gap-3", children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between text-right font-mono text-caption text-ink-faint tabular-nums", style: { height }, "aria-hidden": true, children: [...ticks].reverse().map((t) => (_jsx("span", { children: formatValue(Math.round(t)) }, t))) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", style: { height, width: "100%" }, role: "img", "aria-labelledby": id, onMouseLeave: () => setHover(null), children: [_jsx("title", { id: id, children: series.map((s) => `${s.name}: ${formatValue(s.values[s.values.length - 1] ?? 0)}`).join(" · ") }), ticks.map((t) => (_jsx("line", { x1: 0, x2: W, y1: y(t), y2: y(t), stroke: "var(--color-line)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, t))), series.map((s, si) => {
                                         const renk = seriRengi(s, si);
                                         const d = s.values.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");
                                         return (_jsx("path", { d: d, fill: "none", stroke: renk, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }, s.name));

package/dist/components/checkbox.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-export declare function Checkbox({ label, checked, onChange, disabled, className, }: {
+export declare function Checkbox({ label, checked, onChange, disabled, className, ...rest }: {
     /**
      * The visible label. The kit does not translate; the caller passes ready text. TR: Görünen
      * etiket. Kit çeviri yapmaz; hazır metni çağıran geçer.
@@ -9,5 +9,7 @@ export declare function Checkbox({ label, checked, onChange, disabled, className
     onChange?: (next: boolean) => void;
     disabled?: boolean;
     className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAkBA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcvC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmBA"}

package/dist/components/checkbox.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { Check } from "./icons.js";
 import { OFF } from "./control-base.js";
@@ -11,6 +12,6 @@ import { OFF } from "./control-base.js";
  * seçildi" demiyor, "bu değer açık" diyor. Mini butonun 1px kenarını ve 1px
  * offsetini taşır, böylece kontrol ailesinin bir üyesi gibi okunur.
  * ---------------------------------------------------------------- */
-export function Checkbox({ label, checked, onChange, disabled = false, className, }) {
-    return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": checked, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!checked), className: cn("flex items-center gap-2 text-body", className), style: disabled ? OFF : undefined, children: [_jsx("span", { className: "tamga-check", "data-checked": checked, children: checked ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : null }), label] }));
+export function Checkbox({ label, checked, onChange, disabled = false, className, ...rest }) {
+    return (_jsxs("button", { ...dataProps(rest), type: "button", role: "checkbox", "aria-checked": checked, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!checked), className: cn("flex items-center gap-2 text-body", className), style: disabled ? OFF : undefined, children: [_jsx("span", { className: "tamga-check", "data-checked": checked, children: checked ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : null }), label] }));
 }