tamga-ui 0.1.0

package/dist/components/gauge.d.ts

@@ -0,0 +1,47 @@
+import { type Tone } from "./tone.js";
+export type ScoreProps = {
+    value: number;
+    /**
+     * The accessible name. REQUIRED, and never derived here: the kit does not translate (docs/08:
+     * primitives stay translation-free, the caller passes ready text). It used to build "Health
+     * score 87 of 100, Degraded" in English inside this file, which shipped an untranslatable
+     * string to every locale. TR: Erişilebilir ad. ZORUNLU, ve burada asla türetilmiyor: kit
+     * çeviri yapmaz (docs/08: primitive'ler çevirisiz kalır, hazır metni çağıran geçer). Eskiden
+     * bu dosyanın içinde İngilizce "Health score 87 of 100, Degraded" kuruluyordu, yani her dile
+     * çevrilemez bir dizgi gönderiliyordu.
+     */
+    label: string;
+    /**
+     * Visible band text under the readout. Omitted = the readout shows no word. TR: Okumanın
+     * altında görünen bant metni. Verilmezse okuma hiçbir sözcük göstermiyor.
+     */
+    bandLabel?: string;
+    size?: number;
+    showLabel?: boolean;
+    /**
+     * The PRODUCT decides the band's tone. The `band()` below is the kit's default (90 / 70 / 50)
+     * and does not fit every product: in a warehouse dispatch rate the thresholds are 85 / 65 /
+     * 50, and in an SLA they could be something else entirely. Without this prop a product would
+     * write a label against its own threshold and stand it beside a dial the kit painted against
+     * another: the text and the colour contradicted each other. Left out, the kit's default
+     * thresholds. TR: Bandın tonunu ÜRÜN belirler. Aşağıdaki `band()` kitin varsayılanı (90 / 70
+     * / 50) ve her ürüne uymuyor: depo sevk oranında eşikler 85 / 65 / 50, bir SLA'de bambaşka
+     * olabilir. Bu prop olmadan ürün kendi eşiğine göre bir metin yazıp kitin başka bir eşiğe
+     * göre boyadığı bir kadranla yan yana koyuyordu: yazı ile renk birbirini yalanlıyordu.
+     * Verilmezse kitin varsayılan eşikleri.
+     */
+    tone?: Tone;
+};
+export declare function ScoreRing({ value, label, bandLabel, size, showLabel, segments, tone, }: ScoreProps & {
+    segments?: number;
+}): import("react").JSX.Element;
+export declare function ScoreMeter({ value, label, bandLabel, target, delta, segments, tone, }: ScoreProps & {
+    target?: number;
+    delta?: number;
+    segments?: number;
+}): import("react").JSX.Element;
+export declare function ScoreMatrix({ value, label, bandLabel, delta, size, }: ScoreProps & {
+    delta?: number;
+}): import("react").JSX.Element;
+/** default export keeps the existing call sites working */
+//# sourceMappingURL=gauge.d.ts.map

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

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

package/dist/components/gauge.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toneOf, neutral } from "./tone.js";
+/* Where the readout changes colour. The thresholds are a kit default; a product
+   that scores differently passes its own tone instead. Words are NOT decided
+   here — see ScoreProps.label. */
+function band(v) {
+    if (v >= 90)
+        return "positive";
+    if (v >= 70)
+        return "caution";
+    return "danger";
+}
+function Delta({ delta }) {
+    const up = delta >= 0;
+    return (_jsxs("span", { className: "font-mono text-small font-medium", style: { color: up ? neutral.muted : toneOf("danger").fg }, children: [up ? "▲" : "▼", " ", Math.abs(delta).toFixed(1)] }));
+}
+/* ---------- A · Ring — the segmented strip bent round ---------- */
+export function ScoreRing({ value, label, bandLabel, size = 168, showLabel = true, segments = 32, tone, }) {
+    const v = Math.min(100, Math.max(0, value));
+    const c = toneOf(tone ?? band(v));
+    const sweep = 270;
+    const start = 135;
+    const cx = size / 2;
+    const cy = size / 2;
+    const segLength = size * 0.1;
+    const segWidth = Math.max(2, size * 0.032);
+    const ringRadius = size * 0.42 - segLength / 2;
+    const filled = Math.round((v / 100) * segments);
+    /* every fifth of the scale gets a longer mark, like a rule */
+    const majorEvery = segments / 5;
+    const labelReads = size * 0.065 >= 10;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": label, shapeRendering: "crispEdges", children: [Array.from({ length: segments }).map((_, i) => {
+                const angle = start + (sweep * i) / (segments - 1);
+                const major = i % majorEvery === 0;
+                const len = major ? segLength * 1.28 : segLength;
+                return (_jsx("rect", { x: cx - segWidth / 2, y: cy - ringRadius - len / 2, width: segWidth, height: len, transform: `rotate(${angle} ${cx} ${cy})`, style: { fill: i < filled ? c.mark : neutral.line } }, i));
+            }), _jsx("text", { x: cx, y: cy - size * 0.01, textAnchor: "middle", dominantBaseline: "central", className: "font-mono", shapeRendering: "auto", style: {
+                    /* derived from the ring's own size, not the type scale: this glyph
+                       has to stay in proportion to the dial at any diameter */
+                    fontSize: size * 0.28,
+                    fontWeight: 700,
+                    fill: neutral.title,
+                    fontVariantNumeric: "tabular-nums",
+                }, children: Math.round(v) }), showLabel && labelReads ? (_jsx("text", { x: cx, y: cy + size * 0.26, textAnchor: "middle", shapeRendering: "auto", style: { fontSize: size * 0.065, fontWeight: 500, fill: c.fg }, children: bandLabel })) : null] }));
+}
+/* ---------- B · Linear meter — the same strip, left straight ---------- */
+export function ScoreMeter({ value, label, bandLabel, target = 90, delta, segments = 40, tone, }) {
+    const v = Math.min(100, Math.max(0, value));
+    const c = toneOf(tone ?? band(v));
+    const filled = Math.round((v / 100) * segments);
+    return (_jsxs("div", { className: "w-full max-w-sm", role: "group", "aria-label": label, children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsx("span", { className: "font-mono text-display-lg font-bold leading-none tabular-nums text-ink", children: Math.round(v) }), _jsx("span", { className: "mb-1 font-mono text-body text-ink-faint", children: "/ 100" }), delta !== undefined ? (_jsx("span", { className: "mb-1 ml-auto", children: _jsx(Delta, { delta: delta }) })) : null] }), _jsx("p", { className: "mt-2 text-small", style: { color: c.fg }, children: bandLabel }), _jsxs("div", { className: "relative mt-4", children: [_jsx("div", { className: "flex items-end gap-[var(--mark-tick)]", children: Array.from({ length: segments }).map((_, i) => (_jsx("span", { className: "h-6 flex-1", style: { background: i < filled ? c.mark : neutral.line } }, i))) }), _jsx("span", { className: "absolute -top-1 bottom-[var(--dial-label-drop)] w-[var(--mark-tick)]", style: { left: `${target}%`, background: neutral.title } })] }), _jsxs("div", { className: "mt-2 flex justify-between font-mono text-micro text-ink-faint", children: [_jsx("span", { children: "0" }), _jsxs("span", { children: ["target ", target] }), _jsx("span", { children: "100" })] })] }));
+}
+/* ---------- C · Block matrix — one square is one point ---------- */
+export function ScoreMatrix({ value, label, bandLabel, delta, size = 176, }) {
+    const v = Math.round(Math.min(100, Math.max(0, value)));
+    const c = toneOf(band(v));
+    const cell = (size - 9 * 2) / 10;
+    return (_jsxs("div", { style: { width: size }, role: "group", "aria-label": label, children: [_jsxs("div", { className: "flex items-end gap-2", children: [_jsx("span", { className: "font-mono text-display font-bold leading-none tabular-nums text-ink", children: v }), delta !== undefined ? (_jsx("span", { className: "mb-1 ml-auto", children: _jsx(Delta, { delta: delta }) })) : null] }), _jsx("p", { className: "mt-1 text-small", style: { color: c.fg }, children: bandLabel }), _jsx("div", { className: "mt-4 grid grid-cols-10 gap-[var(--mark-tick)]", children: Array.from({ length: 100 }).map((_, i) => {
+                    /* fill bottom-up so the block grows like a column of evidence */
+                    const row = 9 - Math.floor(i / 10);
+                    const index = row * 10 + (i % 10);
+                    const on = index < v;
+                    return (_jsx("span", { style: { height: cell, background: on ? c.mark : neutral.line } }, i));
+                }) }), _jsx("p", { className: "mt-3 font-mono text-micro text-ink-faint", children: "one square is one point" })] }));
+}

package/dist/components/icon.d.ts

@@ -0,0 +1,32 @@
+import type { Icon as PhosphorIcon, IconWeight } from "@phosphor-icons/react";
+import type { ComponentProps } from "react";
+import type { Tone } from "./tone.js";
+/**
+ * The single icon wrapper.
+ *
+ * Weight and size live here so the icon character is one decision, not a
+ * hundred. Default weight is duotone: its second layer inherits the accent,
+ * which is the cheapest brand lever we have.
+ */
+declare const sizes: {
+    readonly xs: 14;
+    readonly sm: 16;
+    readonly base: 18;
+    readonly md: 20;
+    readonly lg: 24;
+    readonly xl: 32;
+};
+export type IconSize = keyof typeof sizes;
+export declare function Icon({ icon: Glyph, size, weight, tone, className, ...rest }: {
+    icon: PhosphorIcon;
+    size?: IconSize;
+    weight?: IconWeight;
+    /**
+     * paints the duotone second layer with a status colour TR: duotone ikinci katmanı bir durum
+     * rengiyle boyar
+     */
+    tone?: Tone;
+    className?: string;
+} & Omit<ComponentProps<"svg">, "size" | "weight" | "ref">): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGtC;;;;;;GAMG;AACH,QAAA,MAAM,KAAK;aACT,EAAE,EAAE,EAAE;aACN,EAAE,EAAE,EAAE;aACN,IAAI,EAAE,EAAE;aACR,EAAE,EAAE,EAAE;aACN,EAAE,EAAE,EAAE;aACN,EAAE,EAAE,EAAE;CACE,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAE1C,wBAAgB,IAAI,CAAC,EACnB,IAAI,EAAE,KAAK,EACX,IAAa,EACb,MAAkB,EAClB,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,+BAUzD"}

package/dist/components/icon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toneOf } from "./tone.js";
+/**
+ * The single icon wrapper.
+ *
+ * Weight and size live here so the icon character is one decision, not a
+ * hundred. Default weight is duotone: its second layer inherits the accent,
+ * which is the cheapest brand lever we have.
+ */
+const sizes = {
+    xs: 14,
+    sm: 16,
+    base: 18,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+export function Icon({ icon: Glyph, size = "base", weight = "duotone", tone, className, ...rest }) {
+    return (_jsx(Glyph, { size: sizes[size], weight: weight, className: className ? `shrink-0 ${className}` : "shrink-0", style: tone ? { color: toneOf(tone).fg } : undefined, ...rest }));
+}

package/dist/components/icons.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Kitin ikon kaydı.
+ *
+ * Gerekçe: docs/gerekce/06-isaret-ve-ton.md
+ */
+/** PHOSPHOR'UN TAMAMI DA BURADAN GEÇİYOR. */
+export * from "@phosphor-icons/react/ssr";
+/**
+ * Bir glifin TİPİ, glifin kendisi değil.
+ *
+ * Bir ürün ikonları bir eşlemede tutmak istediğinde (`Record<string, ...>`)
+ * o eşlemenin tipine ihtiyacı oluyor, ve tek kaynağı Phosphor'du: ürünün
+ * `@phosphor-icons/react`ü doğrudan import etmesi gerekiyordu, yani kitin
+ * gizlediği bağımlılık dışarı sızıyordu. Adı `Icon` değil `IconGlyph`, çünkü
+ * `Icon` zaten kitin çizen BİLEŞENİ.
+ */
+export type { Icon as IconGlyph } from "@phosphor-icons/react";
+export { MagnifyingGlass as Search, ArrowsClockwise as Refresh, ArrowClockwise as RunNow, Pause, Plus, Trash as Delete, DownloadSimple as Download, UploadSimple as Upload, DotsThree as More, Copy, X as Close, Check, FunnelSimple as Filter, SlidersHorizontal as Customize, GearSix as Settings, Lifebuoy as Support, PencilSimple as Edit, FloppyDisk as Save, Printer as Print, ShareNetwork as Share, Archive, Minus, ArrowUUpLeft as Undo, ArrowUUpRight as Redo, ArrowsDownUp as Sort, DotsSixVertical as Drag, CaretDown, CaretLeft, CaretRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowRight, List as Menu, House as Home, ArrowSquareOut as ExternalLink, ArrowsOut as Expand, ArrowsIn as Collapse, Columns as BoardView, ListBullets as ListView, GitBranch as TimelineView, GridFour as GridView, Bell, Star as Main, Eye, EyeSlash, ShieldCheck, Warning, Tray as Empty, CalendarPlus, MoonStars as ThemeDark, Sun as ThemeLight, Info, Question as Help, CheckCircle as Success, XCircle as Failure, Clock, CalendarBlank as Calendar, File, FolderSimple as Folder, Image, Lock, LockOpen as Unlock, Key, Tag, PushPin as Pin, EnvelopeSimple as Mail, Phone, Play, Stop, TextB as Bold, TextItalic as Italic, LinkSimple as Link, ListBullets as BulletList, ListNumbers as NumberedList, TextAa as TextStyle, MagnifyingGlassPlus as ZoomIn, MagnifyingGlassMinus as ZoomOut, Crop, FlipHorizontal, FlipVertical, StackSimple as Layers, CircleHalf as Contrast, Eyedropper, PaintBrush as Brush, Palette, GoogleLogo, GithubLogo, } from "@phosphor-icons/react/ssr";
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/components/icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,6CAA6C;AAC7C,cAAc,2BAA2B,CAAC;AAE1C;;;;;;;;GAQG;AACH,YAAY,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAEL,eAAe,IAAI,MAAM,EACzB,eAAe,IAAI,OAAO,EAC1B,cAAc,IAAI,MAAM,EACxB,KAAK,EACL,IAAI,EACJ,KAAK,IAAI,MAAM,EACf,cAAc,IAAI,QAAQ,EAC1B,YAAY,IAAI,MAAM,EACtB,SAAS,IAAI,IAAI,EAIjB,IAAI,EACJ,CAAC,IAAI,KAAK,EACV,KAAK,EACL,YAAY,IAAI,MAAM,EACtB,iBAAiB,IAAI,SAAS,EAC9B,OAAO,IAAI,QAAQ,EACnB,QAAQ,IAAI,OAAO,EACnB,YAAY,IAAI,IAAI,EACpB,UAAU,IAAI,IAAI,EAClB,OAAO,IAAI,KAAK,EAChB,YAAY,IAAI,KAAK,EACrB,OAAO,EAGP,KAAK,EACL,YAAY,IAAI,IAAI,EACpB,aAAa,IAAI,IAAI,EACrB,YAAY,IAAI,IAAI,EAEpB,eAAe,IAAI,IAAI,EAGvB,SAAS,EACT,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,YAAY,EACZ,UAAU,EACV,IAAI,IAAI,IAAI,EACZ,KAAK,IAAI,IAAI,EACb,cAAc,IAAI,YAAY,EAC9B,SAAS,IAAI,MAAM,EACnB,QAAQ,IAAI,QAAQ,EAGpB,OAAO,IAAI,SAAS,EACpB,WAAW,IAAI,QAAQ,EACvB,SAAS,IAAI,YAAY,EACzB,QAAQ,IAAI,QAAQ,EAGpB,IAAI,EAIJ,IAAI,IAAI,IAAI,EACZ,GAAG,EACH,QAAQ,EACR,WAAW,EACX,OAAO,EACP,IAAI,IAAI,KAAK,EACb,YAAY,EACZ,SAAS,IAAI,SAAS,EACtB,GAAG,IAAI,UAAU,EAIjB,IAAI,EACJ,QAAQ,IAAI,IAAI,EAChB,WAAW,IAAI,OAAO,EACtB,OAAO,IAAI,OAAO,EAClB,KAAK,EACL,aAAa,IAAI,QAAQ,EACzB,IAAI,EACJ,YAAY,IAAI,MAAM,EACtB,KAAK,EACL,IAAI,EACJ,QAAQ,IAAI,MAAM,EAClB,GAAG,EACH,GAAG,EACH,OAAO,IAAI,GAAG,EACd,cAAc,IAAI,IAAI,EACtB,KAAK,EACL,IAAI,EACJ,IAAI,EAGJ,KAAK,IAAI,IAAI,EACb,UAAU,IAAI,MAAM,EACpB,UAAU,IAAI,IAAI,EAClB,WAAW,IAAI,UAAU,EACzB,WAAW,IAAI,YAAY,EAC3B,MAAM,IAAI,SAAS,EAGnB,mBAAmB,IAAI,MAAM,EAC7B,oBAAoB,IAAI,OAAO,EAC/B,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,WAAW,IAAI,MAAM,EACrB,UAAU,IAAI,QAAQ,EACtB,UAAU,EACV,UAAU,IAAI,KAAK,EACnB,OAAO,EAGP,UAAU,EACV,UAAU,GACX,MAAM,2BAA2B,CAAC"}

package/dist/components/icons.js

@@ -0,0 +1,39 @@
+/**
+ * Kitin ikon kaydı.
+ *
+ * Gerekçe: docs/gerekce/06-isaret-ve-ton.md
+ */
+/** PHOSPHOR'UN TAMAMI DA BURADAN GEÇİYOR. */
+export * from "@phosphor-icons/react/ssr";
+export { 
+/* eylemler */
+MagnifyingGlass as Search, ArrowsClockwise as Refresh, ArrowClockwise as RunNow, Pause, Plus, Trash as Delete, DownloadSimple as Download, UploadSimple as Upload, DotsThree as More, 
+/* Bir değeri panoya almak: token adı, örnek kod, bir kimlik. Rolü her üründe
+   aynı, o yüzden burada. Öncesinde kopyala düğmeleri `Customize`ı (sürgüler)
+   kullanıyordu, yani "ayarla" glifi "kopyala" demeye çalışıyordu. */
+Copy, X as Close, Check, FunnelSimple as Filter, SlidersHorizontal as Customize, GearSix as Settings, Lifebuoy as Support, PencilSimple as Edit, FloppyDisk as Save, Printer as Print, ShareNetwork as Share, Archive, 
+/* `Plus`ın eşi. Bir sayaç ya da bir yineleyici satır artırıp azaltıyorsa,
+   azaltmanın da bir glifi olmak zorunda. */
+Minus, ArrowUUpLeft as Undo, ArrowUUpRight as Redo, ArrowsDownUp as Sort, 
+/* Sürükleme tutamağı: sıralanabilir her listede aynı rol. */
+DotsSixVertical as Drag, 
+/* yön ve gezinme */
+CaretDown, CaretLeft, CaretRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowRight, List as Menu, House as Home, ArrowSquareOut as ExternalLink, ArrowsOut as Expand, ArrowsIn as Collapse, 
+/* görünümler */
+Columns as BoardView, ListBullets as ListView, GitBranch as TimelineView, GridFour as GridView, 
+/* durum ve nesneler */
+Bell, 
+/* Bir kümedeki BİRİNİ "asıl olan" diye işaretlemek: ana fotoğraf, varsayılan
+   adres, birincil kişi. Rolü her üründe aynı, o yüzden burada. Adı `Star`
+   değil `Main`: çağrı yeri rolü okur, glifi değil. */
+Star as Main, Eye, EyeSlash, ShieldCheck, Warning, Tray as Empty, CalendarPlus, MoonStars as ThemeDark, Sun as ThemeLight, 
+/* Dört geri bildirim işareti. `Warning` zaten vardı ama tek başına bir
+   ailenin dörtte biriydi: bir arayüz "oldu", "olmadı", "dikkat" ve "şunu
+   bil" demek zorunda, ve üçünü glifsiz bırakmak dördüncüyü de zayıflatıyor. */
+Info, Question as Help, CheckCircle as Success, XCircle as Failure, Clock, CalendarBlank as Calendar, File, FolderSimple as Folder, Image, Lock, LockOpen as Unlock, Key, Tag, PushPin as Pin, EnvelopeSimple as Mail, Phone, Play, Stop, 
+/* metin biçimlendirme — bir editörün tuş takımı her üründe aynı şeyi yapar */
+TextB as Bold, TextItalic as Italic, LinkSimple as Link, ListBullets as BulletList, ListNumbers as NumberedList, TextAa as TextStyle, 
+/* tuval ve görsel — bir görseli düzenleyen her üründe aynı fiiller */
+MagnifyingGlassPlus as ZoomIn, MagnifyingGlassMinus as ZoomOut, Crop, FlipHorizontal, FlipVertical, StackSimple as Layers, CircleHalf as Contrast, Eyedropper, PaintBrush as Brush, Palette, 
+/* sağlayıcı işaretleri — oturum ekranlarının her üründe ihtiyacı olur */
+GoogleLogo, GithubLogo, } from "@phosphor-icons/react/ssr";

package/dist/components/input.d.ts

@@ -0,0 +1,35 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Text entry. Flat until focus, then it joins the raised family — an accent
+ * edge plus a 2px accent offset.
+ */
+export declare const inputVariants: (props?: ({
+    invalid?: boolean | null | undefined;
+    full?: boolean | null | undefined;
+    size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * `Textarea` NEDEN AYRI BİR TABLO.
+ *
+ * İkisi aynı `.tamga-input` sınıfını paylaşıyor ama seçenek kümeleri aynı
+ * değil: 32px'lik bir `<textarea>` yok, yüksekliğini `rows` veriyor. Tek tablo
+ * kalsaydı `Textarea` hiçbir şey yapmayan bir `size` prop'u kabul ederdi — ve
+ * props tablosu KAYNAKTAN üretildiği için doküman da onu var gösterirdi.
+ * Olmayan bir seçeneği belgelemek, eksik belgelemekten kötü.
+ */
+export declare const textareaVariants: (props?: ({
+    invalid?: boolean | null | undefined;
+    full?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputProps = Omit<React.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants> & {
+    /**
+     * There is an icon absolutely positioned over the left of this field, so reserve room for it.
+     * Opt-in on purpose: the padding used to be unconditional and every plain field opened with a
+     * 40px hole where nothing was.
+     */
+    leading?: boolean;
+};
+export declare function Input({ className, invalid, full, size, leading, ...props }: InputProps): import("react").JSX.Element;
+export type TextareaProps = React.ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>;
+export declare function Textarea({ className, invalid, full, ...props }: TextareaProps): import("react").JSX.Element;
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;8EAWxB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;8EAM3B,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAClE,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAUtF;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,GAC1D,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExC,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAS7E"}

package/dist/components/input.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+/**
+ * Text entry. Flat until focus, then it joins the raised family — an accent
+ * edge plus a 2px accent offset.
+ */
+export const inputVariants = cva("tamga-input", {
+    variants: {
+        invalid: { true: "tamga-input-invalid", false: "" },
+        full: { true: "w-full", false: "" },
+        /**
+         * `sm` 32px, düğmenin `sm`'iyle aynı basamak — yardımcı bir yüzey için:
+         * bir filtre satırı, bir araç çubuğu. Formun kendi alanları `md` kalır.
+         */
+        size: { md: "", sm: "tamga-input-sm" },
+    },
+    defaultVariants: { invalid: false, full: false, size: "md" },
+});
+/**
+ * `Textarea` NEDEN AYRI BİR TABLO.
+ *
+ * İkisi aynı `.tamga-input` sınıfını paylaşıyor ama seçenek kümeleri aynı
+ * değil: 32px'lik bir `<textarea>` yok, yüksekliğini `rows` veriyor. Tek tablo
+ * kalsaydı `Textarea` hiçbir şey yapmayan bir `size` prop'u kabul ederdi — ve
+ * props tablosu KAYNAKTAN üretildiği için doküman da onu var gösterirdi.
+ * Olmayan bir seçeneği belgelemek, eksik belgelemekten kötü.
+ */
+export const textareaVariants = cva("tamga-input", {
+    variants: {
+        invalid: { true: "tamga-input-invalid", false: "" },
+        full: { true: "w-full", false: "" },
+    },
+    defaultVariants: { invalid: false, full: false },
+});
+export function Input({ className, invalid, full, size, leading, ...props }) {
+    return (_jsx("input", { "data-slot": "input", "data-leading": leading || undefined, "aria-invalid": invalid || undefined, className: cn(inputVariants({ invalid, full, size }), className), ...props }));
+}
+export function Textarea({ className, invalid, full, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", "aria-invalid": invalid || undefined, className: cn(textareaVariants({ invalid, full }), className), ...props }));
+}

package/dist/components/layout.d.ts

@@ -0,0 +1,133 @@
+import type { ReactNode } from "react";
+/**
+ * Sınıfı olan ama bileşeni olmayan şeyler.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+/**
+ * Düz yüzey — kenarı var, yükselmiyor.
+ *
+ * `raised` verilince kartın fiziğini alır (1px kenar + 2px sert offset).
+ * İkisi ayrı bileşen değil, çünkü aralarındaki fark bir varyant: aynı şekil,
+ * artı yükseklik. Yasa 1 zaten "yükselme tek formül" diyor.
+ */
+export declare function Surface({ raised, className, children, ...props }: React.ComponentProps<"div"> & {
+    raised?: boolean;
+}): import("react").JSX.Element;
+/**
+ * Yatay taşma kabı — ve bu bileşenin asıl işi erişilebilirlik.
+ *
+ * `overflow-x: auto` tek başına FARE için çalışır. Klavye kullanan biri o
+ * kutuya hiç giremez: kaydırılabilir bir alan odaklanabilir değilse içindeki
+ * geniş tabloyu yana kaydırmanın yolu yoktur. Tarayıcılar bunu kendiliğinden
+ * çözmüyor.
+ *
+ * `tabIndex={0}` + `role="region"` + bir ad, o kutuyu klavyeye açıyor. Ad
+ * zorunlu: adsız bir `region` ekran okuyucunun landmark listesinde
+ * "bölge, bölge, bölge" olarak birikir ve hiçbirinin ne olduğu bilinmez.
+ */
+export declare function ScrollX({ label, className, children, ...props }: React.ComponentProps<"div"> & {
+    label: string;
+}): import("react").JSX.Element;
+/**
+ * Aşağıdan giren blok.
+ *
+ * `.tamga-rise` bir HOVER etkisi değil, bir GİRİŞ animasyonu: sekiz piksel
+ * aşağıdan, sönükten. Azaltılmış harekette CSS onu tamamen kapatıyor.
+ *
+ * `delay` bir listeyi sırayla açmak için. Basamak küçük tutulmalı — otuz
+ * satırlık bir listede 60ms'lik bir gecikme, sonuncuyu iki saniye sonra
+ * gösterir ve bekleme hissi yaratır.
+ */
+export declare function Rise({ delay, className, children, ...props }: React.ComponentProps<"div"> & {
+    delay?: number;
+}): import("react").JSX.Element;
+/**
+ * İki durumun aynı yerde durması.
+ *
+ * Bir düğmenin yazısı "Kaydet" iken "Kaydediliyor…" olduğunda düğme genişler
+ * ve yanındaki her şey kayar. Swap ikisini de aynı ızgara hücresine koyuyor:
+ * kutu her zaman UZUN olanın genişliğinde, yani hiçbir şey oynamıyor.
+ *
+ * Gizlenen taraf `aria-hidden` alıyor. Almasaydı ekran okuyucu iki metni
+ * arka arkaya okurdu — "Kaydet Kaydediliyor" — ve hangisinin geçerli olduğu
+ * anlaşılmazdı.
+ */
+export declare function Swap({ showing, a, b, className, }: {
+    /** Which side is visible: `"a"` or `"b"`. TR: Hangi taraf görünür: `"a"` ya da `"b"`. */
+    showing: "a" | "b";
+    a: ReactNode;
+    b: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Liste satırı — tablo olmayan listeler için.
+ *
+ * Bir tabloya yetmeyen ama bir listeden fazlası olan şey: ayarlar satırı,
+ * entegrasyon satırı, üye satırı. Sabit yükseklik ve alt kural, satırların
+ * taranabilir kalmasını sağlıyor.
+ *
+ * `href` verilirse bir bağlantıya, `onClick` verilirse bir düğmeye döner —
+ * ikisi de yoksa düz bir satır kalır. Bu ayrım önemli: tıklanabilir bir
+ * `<div>` klavyeyle erişilemez ve ekran okuyucuya hiçbir şey söylemez.
+ */
+export declare function ListRow({ size, href, onClick, className, children, }: {
+    size?: "base" | "sm";
+    href?: string;
+    onClick?: () => void;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * İçinde bir panel AÇILAN tablo hücresi.
+ *
+ * Tek işi kırpmayı kapatmak — ve o tek iş, unutulduğunda görünmeyen bir hata
+ * üretiyor: hücrenin içindeki bir menü, ipucu ya da açılır panel hücre
+ * sınırında KESİLİYOR. Kontrol çalışıyor, tıklanıyor, ama yarısı yok. Hata
+ * mesajı yok, konsol sessiz, ve ilk akla gelen z-index oluyor. Z-index bunu
+ * çözmez: hiçbir yığın sırası bir `overflow` kırpmasını aşamaz.
+ *
+ * `align` VARSAYILAN OLARAK SAĞDA, çünkü en sık kullanımı satır sonundaki
+ * eylem menüsü. Ama hiza ile kırpma AYRI iki karar: sola yaslı bir hücrede
+ * ipucu barındırmak isteyen, hizasını feda etmek zorunda kalmasın diye
+ * `align="start"` var. (Uzun süre tek parçaydı ve tam bu yüzden yakalandı.)
+ */
+export declare function CellActions({ className, children, align, ...props }: Omit<React.ComponentProps<"td">, "align"> & {
+    align?: "start" | "end";
+}): import("react").JSX.Element;
+/**
+ * Sayfa başlığı şeridi.
+ *
+ * Ürün bunu kendi yazmıştı (23 satır) ve doğru yazmıştı — ama her ekranın
+ * tepesinde duran bir şeyin her projede yeniden yazılması, on panelde on
+ * farklı boşluk demek.
+ *
+ * Eylem SAĞA yaslı ve başlığın taban çizgisinde. Başka yere koyan bir başlık
+ * altındaki listeden kopmuş görünüyor — bu bir tercih değil, ölçülmüş bir şey.
+ */
+export declare function PageBand({ title, subtitle, actions, className, }: {
+    title: string;
+    subtitle?: string;
+    actions?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Gezinen bağlantı.
+ *
+ * `.tamga-link` sınıfı kitte yıllarca vardı, bileşeni yoktu — ve doküman
+ * sitesi kendi sarmalayıcısını yazmak zorunda kaldı. Sınıfın olup bileşenin
+ * olmaması, tam olarak checkbox'ın yaşadığı boşluk.
+ *
+ * NEDEN `Button variant="link"` DEĞİL. O bir `<button>`; bir bağlantı gibi
+ * GÖRÜNÜR ama gezinmez. Orta tuşla yeni sekmede açılamaz, sağ tıkla
+ * kopyalanamaz, ve ekran okuyucuya "düğme" der. Görünüm aynı, sözleşme
+ * ters.
+ *
+ * `external` verilince `rel="noopener noreferrer"` geliyor. `noopener`
+ * olmadan açılan sayfa `window.opener` üzerinden seninkini yönlendirebilir —
+ * eski ve hâlâ geçerli bir açık.
+ */
+export declare function Link({ external, className, children, ...props }: React.ComponentProps<"a"> & {
+    external?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AAEH;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BAMpD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAYjD;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAUlD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,CAAC,EACD,CAAC,EACD,SAAS,GACV,EAAE;IACD,yFAAyF;IACzF,OAAO,EAAE,GAAG,GAAG,GAAG,CAAC;IACnB,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAWA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAiBA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAa,EACb,GAAG,KAAK,EAGT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,+BAWzE;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAUA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAWpD"}

package/dist/components/layout.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * Sınıfı olan ama bileşeni olmayan şeyler.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+/**
+ * Düz yüzey — kenarı var, yükselmiyor.
+ *
+ * `raised` verilince kartın fiziğini alır (1px kenar + 2px sert offset).
+ * İkisi ayrı bileşen değil, çünkü aralarındaki fark bir varyant: aynı şekil,
+ * artı yükseklik. Yasa 1 zaten "yükselme tek formül" diyor.
+ */
+export function Surface({ raised = false, className, children, ...props }) {
+    return (_jsx("div", { className: cn(raised ? "tamga-raised" : "tamga-surface", className), ...props, children: children }));
+}
+/**
+ * Yatay taşma kabı — ve bu bileşenin asıl işi erişilebilirlik.
+ *
+ * `overflow-x: auto` tek başına FARE için çalışır. Klavye kullanan biri o
+ * kutuya hiç giremez: kaydırılabilir bir alan odaklanabilir değilse içindeki
+ * geniş tabloyu yana kaydırmanın yolu yoktur. Tarayıcılar bunu kendiliğinden
+ * çözmüyor.
+ *
+ * `tabIndex={0}` + `role="region"` + bir ad, o kutuyu klavyeye açıyor. Ad
+ * zorunlu: adsız bir `region` ekran okuyucunun landmark listesinde
+ * "bölge, bölge, bölge" olarak birikir ve hiçbirinin ne olduğu bilinmez.
+ */
+export function ScrollX({ label, className, children, ...props }) {
+    return (_jsx("div", { className: cn("tamga-scroll-x", className), role: "region", "aria-label": label, tabIndex: 0, ...props, children: children }));
+}
+/**
+ * Aşağıdan giren blok.
+ *
+ * `.tamga-rise` bir HOVER etkisi değil, bir GİRİŞ animasyonu: sekiz piksel
+ * aşağıdan, sönükten. Azaltılmış harekette CSS onu tamamen kapatıyor.
+ *
+ * `delay` bir listeyi sırayla açmak için. Basamak küçük tutulmalı — otuz
+ * satırlık bir listede 60ms'lik bir gecikme, sonuncuyu iki saniye sonra
+ * gösterir ve bekleme hissi yaratır.
+ */
+export function Rise({ delay = 0, className, children, ...props }) {
+    return (_jsx("div", { className: cn("tamga-rise", className), style: delay ? { animationDelay: `${delay}ms` } : undefined, ...props, children: children }));
+}
+/**
+ * İki durumun aynı yerde durması.
+ *
+ * Bir düğmenin yazısı "Kaydet" iken "Kaydediliyor…" olduğunda düğme genişler
+ * ve yanındaki her şey kayar. Swap ikisini de aynı ızgara hücresine koyuyor:
+ * kutu her zaman UZUN olanın genişliğinde, yani hiçbir şey oynamıyor.
+ *
+ * Gizlenen taraf `aria-hidden` alıyor. Almasaydı ekran okuyucu iki metni
+ * arka arkaya okurdu — "Kaydet Kaydediliyor" — ve hangisinin geçerli olduğu
+ * anlaşılmazdı.
+ */
+export function Swap({ showing, a, b, className, }) {
+    return (_jsxs("span", { className: cn("tamga-swap", className), children: [_jsx("span", { "data-hidden": showing !== "a", "aria-hidden": showing !== "a", children: a }), _jsx("span", { "data-hidden": showing !== "b", "aria-hidden": showing !== "b", children: b })] }));
+}
+/**
+ * Liste satırı — tablo olmayan listeler için.
+ *
+ * Bir tabloya yetmeyen ama bir listeden fazlası olan şey: ayarlar satırı,
+ * entegrasyon satırı, üye satırı. Sabit yükseklik ve alt kural, satırların
+ * taranabilir kalmasını sağlıyor.
+ *
+ * `href` verilirse bir bağlantıya, `onClick` verilirse bir düğmeye döner —
+ * ikisi de yoksa düz bir satır kalır. Bu ayrım önemli: tıklanabilir bir
+ * `<div>` klavyeyle erişilemez ve ekran okuyucuya hiçbir şey söylemez.
+ */
+export function ListRow({ size = "base", href, onClick, className, children, }) {
+    const cls = cn("tamga-list-row", size === "sm" && "tamga-list-row-sm", className);
+    if (href) {
+        return (_jsx("a", { href: href, className: cls, children: children }));
+    }
+    if (onClick) {
+        return (_jsx("button", { type: "button", onClick: onClick, className: cn(cls, "w-full text-left"), children: children }));
+    }
+    return _jsx("div", { className: cls, children: children });
+}
+/**
+ * İçinde bir panel AÇILAN tablo hücresi.
+ *
+ * Tek işi kırpmayı kapatmak — ve o tek iş, unutulduğunda görünmeyen bir hata
+ * üretiyor: hücrenin içindeki bir menü, ipucu ya da açılır panel hücre
+ * sınırında KESİLİYOR. Kontrol çalışıyor, tıklanıyor, ama yarısı yok. Hata
+ * mesajı yok, konsol sessiz, ve ilk akla gelen z-index oluyor. Z-index bunu
+ * çözmez: hiçbir yığın sırası bir `overflow` kırpmasını aşamaz.
+ *
+ * `align` VARSAYILAN OLARAK SAĞDA, çünkü en sık kullanımı satır sonundaki
+ * eylem menüsü. Ama hiza ile kırpma AYRI iki karar: sola yaslı bir hücrede
+ * ipucu barındırmak isteyen, hizasını feda etmek zorunda kalmasın diye
+ * `align="start"` var. (Uzun süre tek parçaydı ve tam bu yüzden yakalandı.)
+ */
+export function CellActions({ className, children, align = "end", ...props
+/* `Omit`: `<td>`in kendi `align` niteliği var (HTML 4'ten kalma, artık
+   kullanılmıyor) ve tipi bizimkiyle çakışıyor. */
+ }) {
+    return (_jsx("td", { className: cn("tamga-cell-open", align === "end" && "tamga-cell-actions", className), ...props, children: _jsx("span", { className: cn("flex items-center gap-1", align === "end" ? "justify-end" : "justify-start"), children: children }) }));
+}
+/**
+ * Sayfa başlığı şeridi.
+ *
+ * Ürün bunu kendi yazmıştı (23 satır) ve doğru yazmıştı — ama her ekranın
+ * tepesinde duran bir şeyin her projede yeniden yazılması, on panelde on
+ * farklı boşluk demek.
+ *
+ * Eylem SAĞA yaslı ve başlığın taban çizgisinde. Başka yere koyan bir başlık
+ * altındaki listeden kopmuş görünüyor — bu bir tercih değil, ölçülmüş bir şey.
+ */
+export function PageBand({ title, subtitle, actions, className, }) {
+    return (_jsxs("div", { className: cn("tamga-section tamga-gutter flex flex-wrap items-center gap-4 py-4", className), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-title font-semibold text-ink", children: title }), subtitle ? _jsx("p", { className: "text-small text-ink-faint", children: subtitle }) : null] }), actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }));
+}
+/**
+ * Gezinen bağlantı.
+ *
+ * `.tamga-link` sınıfı kitte yıllarca vardı, bileşeni yoktu — ve doküman
+ * sitesi kendi sarmalayıcısını yazmak zorunda kaldı. Sınıfın olup bileşenin
+ * olmaması, tam olarak checkbox'ın yaşadığı boşluk.
+ *
+ * NEDEN `Button variant="link"` DEĞİL. O bir `<button>`; bir bağlantı gibi
+ * GÖRÜNÜR ama gezinmez. Orta tuşla yeni sekmede açılamaz, sağ tıkla
+ * kopyalanamaz, ve ekran okuyucuya "düğme" der. Görünüm aynı, sözleşme
+ * ters.
+ *
+ * `external` verilince `rel="noopener noreferrer"` geliyor. `noopener`
+ * olmadan açılan sayfa `window.opener` üzerinden seninkini yönlendirebilir —
+ * eski ve hâlâ geçerli bir açık.
+ */
+export function Link({ external = false, className, children, ...props }) {
+    return (_jsx("a", { className: cn("tamga-link", className), target: external ? "_blank" : undefined, rel: external ? "noopener noreferrer" : undefined, ...props, children: children }));
+}

package/dist/components/link.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType, ReactNode } from "react";
+/**
+ * Yönlendiricinin bağlantısı, dışarıdan verilir.
+ *
+ * NEDEN KİTİN İÇİNDE DEĞİL: kit hangi yönlendiricinin kullanıldığını
+ * bilmiyor ve bilmemeli (`next/link`, `react-router`, ya da düz `a`).
+ * Bileşen bir `href` alıp `a` yazsaydı her tıklama tam sayfa yüklerdi.
+ *
+ * NEDEN `components/` ALTINDA, `patterns/` ALTINDA DEĞİL: burada doğmuştu,
+ * ama bir BİLEŞEN de (`Kpi`) bağlantı olabildiği için şablon katmanına
+ * bağımlı olması gerekiyordu. Bir bileşenin şablondan import etmesi katmanı
+ * ters çevirir; tip aşağı indi, `patterns/shared.tsx` onu yeniden dışa
+ * vuruyor ve dışarıdan bakan API hiç değişmedi.
+ */
+export type LinkComponent = ComponentType<{
+    href: string;
+    className?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+}>;
+export declare const PlainLink: LinkComponent;
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC"}

package/dist/components/link.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PlainLink = ({ href, children, ...rest }) => (_jsx("a", { href: href, ...rest, children: children }));