tamga-ui 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.1
+
+Three components refused something a consumer legitimately needed, and in each case the way out was
+to drop the component and write its class by hand. A class without its component is the same paint
+with none of the behaviour, so this release is about closing the reasons to reach for it.
+
+### Added
+
+- **`Link.linkComponent`** — the router's link, so an in-app link does not reload the page. Without
+  it the component could only draw a plain `<a>`, and anything with client-side routing had to hand
+  write `tamga-link` on its own link, taking the class and leaving behind the `rel="noopener
+  noreferrer"` that `external` brings. `RailLink` and `AppShell` already solved this the same way;
+  `Link` was the one that had not.
+- **`Card.as`** — `div` (default), `section`, `article` or `ul`. A card is usually a *section*, and
+  a component that refuses the element pushes the caller to write `tamga-card` by hand. That trade
+  is worse than it looks: the hand-written version also loses `overflow="visible"`, which is the
+  guard against a menu or a calendar being clipped at the card's edge. Nothing errors when that
+  happens; the panel is simply half invisible and the first suspect is z-index, which cannot fix it.
+- **`Segmented` options carry their own attributes.** Anything beyond `value` and `label` now lands
+  on that option's button, so a filter strip can tag each choice with the hook a test or a style
+  needs. Without it the whole control had to be hand-rolled, losing `aria-pressed` and the keyboard
+  behaviour with it.
+
 ## 0.3.0
 
 ### Breaking

package/dist/components/layout.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 /**
  * Sınıfı olan ama bileşeni olmayan şeyler.
  *
@@ -127,7 +127,20 @@ export declare function PageBand({ title, subtitle, actions, className, }: {
  * 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"> & {
+export declare function Link({ external, className, children, linkComponent: Router, ...props }: React.ComponentProps<"a"> & {
     external?: boolean;
+    /**
+     * The router's link, so an in-app link does not reload the page. TR: Yönlendiricinin
+     * bağlantısı, uygulama içi bir bağlantı sayfayı yeniden yüklemesin diye.
+     *
+     * Verilmezse düz bir `<a>` çiziliyor. `external` ile birlikte yok sayılıyor: uygulamanın
+     * dışına çıkan bir adres istemci yönlendirmesiyle açılamaz.
+     */
+    linkComponent?: ComponentType<{
+        href?: string;
+        className?: string;
+        children?: ReactNode;
+        [k: string]: unknown;
+    }>;
 }): import("react").JSX.Element;
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD;;;;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,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;CAClH,+BAUA"}

package/dist/components/layout.js

@@ -127,6 +127,14 @@ export function PageBand({ title, subtitle, actions, className, }) {
  * 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 }));
+export function Link({ external = false, className, children, linkComponent: Router, ...props }) {
+    const shared = {
+        className: cn("tamga-link", className),
+        target: external ? "_blank" : undefined,
+        rel: external ? "noopener noreferrer" : undefined,
+        ...props,
+    };
+    /* Dış bağlantı yönlendiriciden geçmiyor: uygulamanın dışına çıkan bir adres
+       istemci yönlendirmesiyle açılamaz, ve denemek sessizce bir sekme kaybettirir. */
+    return Router && !external ? _jsx(Router, { ...shared, children: children }) : _jsx("a", { ...shared, children: children });
 }

package/dist/components/segmented.d.ts

@@ -1,9 +1,15 @@
 import type { ReactNode } from "react";
 export declare function Segmented<T extends string>({ options, value, onChange, label, className, }: {
-    options: readonly {
+    /**
+     * The choices. Anything beyond `value` and `label` lands on that option's button, so a choice
+     * can carry the hook a test or a style needs. TR: Seçenekler. `value` ve `label` dışındaki her
+     * şey o seçeneğin düğmesine iniyor, yani bir seçenek testin ya da stilin ihtiyaç duyduğu
+     * kancayı taşıyabiliyor.
+     */
+    options: readonly ({
         value: T;
         label: ReactNode;
-    }[];
+    } & Record<string, unknown>)[];
     value: T;
     onChange?: (next: T) => void;
     /** The group's accessible name. TR: Grubun erişilebilir adı. */

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

@@ -1 +1 @@
-{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/components/segmented.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgBA"}
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/components/segmented.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD;;;;;OAKG;IACH,OAAO,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IAC/E,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAiBA"}

package/dist/components/segmented.js

@@ -8,5 +8,5 @@ import { cn } from "../lib/cn.js";
  * "Buradasın" bir eylem değildir, o yüzden dolgu almaz (Yasa 2).
  * ---------------------------------------------------------------- */
 export function Segmented({ options, value, onChange, label, className, }) {
-    return (_jsx("div", { role: "group", "aria-label": label, className: cn("tamga-segment", className), children: options.map((o) => (_jsx("button", { type: "button", "aria-pressed": value === o.value, "data-active": value === o.value, onClick: () => onChange?.(o.value), children: o.label }, o.value))) }));
+    return (_jsx("div", { role: "group", "aria-label": label, className: cn("tamga-segment", className), children: options.map(({ value: v, label: etiket, ...rest }) => (_jsx("button", { type: "button", ...rest, "aria-pressed": value === v, "data-active": value === v, onClick: () => onChange?.(v), children: etiket }, v))) }));
 }

package/dist/components/surface.d.ts

@@ -10,7 +10,13 @@ import type { ReactNode } from "react";
  * 1px kenar + 2px sert offset (Yasa 1). İçindeki her şey `Gutter`ın ritmini
  * paylaşır, böylece iki kart yan yana geldiğinde iç boşlukları hizalanır.
  */
-export declare function Card({ overflow, children, className, }: {
+export declare function Card({ as: Tag, overflow, children, className, }: {
+    /**
+     * The element the card is drawn as. TR: Kartın hangi eleman olarak çizileceği.
+     *
+     * Belge yapısı, sunum değil: bir kart çoğu zaman bir `section`dır. Varsayılan `div`.
+     */
+    as?: "div" | "section" | "article" | "ul";
     /**
      * Whether the card's content may spill past its edge. `clip` by default, because the card's
      * rounded corners depend on it: a table inside would run out of the corners without clipping.

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

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/components/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AAEH;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAiB,EACjB,QAAQ,EACR,SAAS,GACV,EAAE;IACD;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAMA;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE5F;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMzF;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAY,EACZ,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAEA"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/components/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AAEH;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,GAAW,EACf,QAAiB,EACjB,QAAQ,EACR,SAAS,GACV,EAAE;IACD;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAMA;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE5F;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMzF;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAY,EACZ,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAEA"}

package/dist/components/surface.js

@@ -11,8 +11,8 @@ import { cn } from "../lib/cn.js";
  * 1px kenar + 2px sert offset (Yasa 1). İçindeki her şey `Gutter`ın ritmini
  * paylaşır, böylece iki kart yan yana geldiğinde iç boşlukları hizalanır.
  */
-export function Card({ overflow = "clip", children, className, }) {
-    return (_jsx("div", { className: cn("tamga-card", overflow === "visible" && "tamga-card-open", className), children: children }));
+export function Card({ as: Tag = "div", overflow = "clip", children, className, }) {
+    return (_jsx(Tag, { className: cn("tamga-card", overflow === "visible" && "tamga-card-open", className), children: children }));
 }
 /**
  * Kart başlığı — başlık solda, eylem sağda, ikisi aynı taban çizgisinde.

package/dist/kit.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.3.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.3.1 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;

package/dist/styles.css

@@ -1,3 +1,3 @@
-/*! tamga-ui 0.3.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.3.1 · MIT · https://tamga.org.tr */
 @import "./theme.css";
 @import "./kit.css";

package/dist/theme.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.3.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.3.1 · MIT · https://tamga.org.tr */
 @custom-variant dark (&:is(.dark *));
 
 @theme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Mantıksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",