tamga-ui 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -5,6 +5,53 @@ 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.13.0
+
+> The tooltip can carry a sentence, stays on the screen, and opens on a tap; a detail page
+> can say its object's state under the title.
+
+### Added
+
+- **`DetailTemplate` `status`** · a place under the identity line, before the tabs, for the
+  object's state right now ("running", "shipped", "overdue"). The template keeps only the
+  place and the 8px above it; what goes in is the product's (a `StatusChip`, a short line, a
+  link). It stands on every tab, because the header does. Without it nothing is drawn.
+
+- **`Tooltip` `wrap`** · breaks a sentence into lines at 288px (the Popover's width) instead
+  of one line across the screen. Off by default: a tooltip is still a one-line label.
+
+### Fixed
+
+- **`Tooltip` stays inside the viewport.** Near the screen's edge the bubble slides in until
+  16px is left; the arrow keeps pointing at the trigger.
+- **`Tooltip` opens on a tap.** On a touch screen a tap opens it and a tap elsewhere closes
+  it. Before, the `pointerleave` at the end of a tap closed it before it opened, and iOS
+  Safari does not focus a tapped button, so on a phone it could not be opened at all.
+
+## 0.12.0
+
+> The detail page's title is the page title; the alert has a page-level look.
+
+### Added
+
+- **`Alert` `look="banner"`** · the page-level status box at the top of an object's page
+  ("the store is down", "running", "in maintenance"): the card's 1.5px strong edge and
+  4px hard shadow, a 44px tile with the `md` glyph, a display-face title (`--text-display-sm`,
+  extrabold), body copy at `--text-body`, 18/20px padding. The action and the dismiss sit on
+  the tile's centre. At 390px the action drops under the text (the text column keeps at least
+  9rem) instead of squeezing the title into a five-letter column. `inline` stays the default and is unchanged: without `look` the markup
+  and the CSS are what they were. Shown in six tones on the docs page.
+
+### Changed
+
+- **`DetailTemplate` draws its title as `PageBand` does**: an `h1` in the display face
+  (`--text-display-sm`, extrabold), the breadcrumb 6px above, the subtitle 6px below at body
+  size in the soft ink. It was an `h2` at `--text-title` semibold with a small faint subtitle,
+  so a list page's title was big and bold and an object's name small and thin; a detail page
+  had no `h1` at all. This enlarges every detail title in every product using the template,
+  on purpose: they all carried the same inconsistency. A long title (a hostname) breaks
+  inside the box at 390px.
+
 ## 0.11.0
 
 > Group controls carry their own error line; the breadcrumb is a label line.

package/dist/components/overlay.d.ts

@@ -119,7 +119,7 @@ declare const placements: {
  *
  * Gerekçe: docs/gerekce/07-katman-ve-diyalog.md
  */
-export declare function Tooltip({ label, placement, delay, bind, children, ...rest }: {
+export declare function Tooltip({ label, placement, delay, bind, wrap, children, ...rest }: {
     label: string;
     placement?: keyof typeof placements;
     /**
@@ -140,6 +140,15 @@ export declare function Tooltip({ label, placement, delay, bind, children, ...re
      * ekran okuyucu metni iki kez okuyor · bir kez ad, bir kez açıklama olarak.
      */
     bind?: boolean;
+    /**
+     * Lets a sentence break into lines at 288px (the Popover's width) instead of running as one
+     * line across the screen. A tooltip is a label; turn this on only when the explanation
+     * really is a sentence (why a status reads as it does). TR: Bir cümlenin tek satır olarak
+     * ekranı boydan boya geçmesi yerine 288px'te (Popover'ın genişliği) satır kırmasını sağlar.
+     * İpucu bir etikettir; yalnız açıklama gerçekten bir cümleyse aç (bir durumun neden öyle
+     * okunduğu gibi).
+     */
+    wrap?: boolean;
     children: React.ReactNode;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;

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

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

package/dist/components/overlay.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { toneOf } from "./tone.js";
 import { Icon } from "./icon.js";
 import { cn } from "../lib/cn.js";
@@ -103,9 +103,13 @@ const arrows = {
  *
  * Gerekçe: docs/gerekce/07-katman-ve-diyalog.md
  */
-export function Tooltip({ label, placement = "bottom", delay = 400, bind = true, children, ...rest }) {
+export function Tooltip({ label, placement = "bottom", delay = 400, bind = true, wrap = false, children, ...rest }) {
     const sarmal = useRef(null);
+    const kabarcik = useRef(null);
     const [konum, setKonum] = useState(null);
+    /* Kabarcığın görüntü alanına sığmak için yatayda kaydığı mesafe; ok kaymıyor,
+       tetikleyiciyi göstermeye devam ediyor. */
+    const [kayma, setKayma] = useState(0);
     const id = useId();
     const bekleyen = useRef(null);
     const olc = useCallback(() => {
@@ -149,6 +153,23 @@ export function Tooltip({ label, placement = "bottom", delay = 400, bind = true,
         if (bekleyen.current !== null)
             clearTimeout(bekleyen.current);
     }, []);
+    /* EKRANA SIĞ. Ortalanan kabarcık, kenara yakın bir tetikleyicide görüntü
+       alanından taşıyordu (390px'te 288px'lik bir cümle). Açılınca ölçülüyor ve
+       kenara 16px kalacak kadar içeri itiliyor. */
+    useLayoutEffect(() => {
+        const el = kabarcik.current;
+        if (!konum || !el || placement === "left" || placement === "right") {
+            setKayma(0);
+            return;
+        }
+        const r = el.getBoundingClientRect();
+        const pay = 16;
+        const solaTasma = pay - (r.left - kayma);
+        const sagaTasma = r.right - kayma - (document.documentElement.clientWidth - pay);
+        setKayma(solaTasma > 0 ? solaTasma : sagaTasma > 0 ? -sagaTasma : 0);
+        // kayma ölçümün sonucu, girdisi değil: onu izlemek döngü kurar.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [konum, placement]);
     /* Kaydırma ya da yeniden boyutlanma ipucunun altından tetikleyiciyi çekiyor;
        o an kapanması, yanlış yerde durmasından iyi. */
     useEffect(() => {
@@ -158,29 +179,50 @@ export function Tooltip({ label, placement = "bottom", delay = 400, bind = true,
            biri için bir engel · ve odak tetikleyicide kaldığı için başka çıkışı
            yok. */
         const esc = (e) => e.key === "Escape" && kapat();
+        /* Dokunmatikte fare çekilmiyor: kabarcık başka yere dokununca kapanıyor. */
+        const disari = (e) => {
+            if (!sarmal.current?.contains(e.target))
+                kapat();
+        };
         window.addEventListener("scroll", kapat, true);
         window.addEventListener("resize", kapat);
         document.addEventListener("keydown", esc);
+        document.addEventListener("pointerdown", disari);
         return () => {
             window.removeEventListener("scroll", kapat, true);
             window.removeEventListener("resize", kapat);
             document.removeEventListener("keydown", esc);
+            document.removeEventListener("pointerdown", disari);
         };
     }, [konum, kapat]);
+    /* DOKUNMA AÇIYOR. Telefonda "üstüne gelmek" yok: iOS Safari dokunulan
+       düğmeye odak da vermiyor, ve dokunuşun sonundaki `pointerleave` kabarcığı
+       açılmadan kapatıyordu. Dokunuş aç/kapa, fareninkiler dokunuşta yok sayılıyor. */
+    const dokunus = useCallback((e) => {
+        if (e.pointerType !== "touch")
+            return;
+        if (konum)
+            kapat();
+        else
+            olc();
+    }, [konum, kapat, olc]);
     const kaydirma = {
         top: "translate(-50%, -100%)",
         bottom: "translate(-50%, 0)",
         left: "translate(-100%, -50%)",
         right: "translate(0, -50%)",
     };
-    return (_jsxs("span", { ...dataProps(rest), ref: sarmal, className: "relative inline-flex", onPointerEnter: gecikmeliAc, onPointerLeave: kapat, onFocusCapture: olc, onBlurCapture: kapat, children: [bind ? (_jsx("span", { id: id, className: "sr-only", children: label })) : null, bind && isValidElement(children)
+    return (_jsxs("span", { ...dataProps(rest), ref: sarmal, className: "relative inline-flex", onPointerEnter: (e) => e.pointerType !== "touch" && gecikmeliAc(), onPointerLeave: (e) => e.pointerType !== "touch" && kapat(), onPointerDown: dokunus, onFocusCapture: olc, onBlurCapture: kapat, children: [bind ? (_jsx("span", { id: id, className: "sr-only", children: label })) : null, bind && isValidElement(children)
                 ? cloneElement(children, {
                     "aria-describedby": id,
                 })
-                : children, konum && (_jsxs("span", { "aria-hidden": true, className: "pointer-events-none fixed z-40 whitespace-nowrap px-2 py-1 text-small", style: {
-                    left: konum.left,
+                : children, konum && (_jsxs("span", { ref: kabarcik, "aria-hidden": true, className: cn("pointer-events-none fixed z-40 px-2 py-1 text-small", wrap ? "whitespace-normal leading-relaxed" : "whitespace-nowrap"), style: {
+                    left: konum.left + kayma,
                     top: konum.top,
                     transform: kaydirma[placement],
+                    /* 288px Popover'ın genişliği; dar ekranda iki yanda 16px kalıyor. */
+                    maxWidth: wrap ? "min(18rem, calc(100vw - 2rem))" : undefined,
+                    width: wrap ? "max-content" : undefined,
                     background: "var(--color-ink)",
                     color: "var(--color-page)",
                     /* KENDİ KENARI VAR. Kenarsız koyu bir kutu, koyu temada sayfadan
@@ -188,7 +230,11 @@ export function Tooltip({ label, placement = "bottom", delay = 400, bind = true,
                        da koyu kaldığı için sınır her ikisinde de duruyor. */
                     border: "1.5px solid var(--color-edge-strong)",
                     borderRadius: "calc(var(--radius) - 1px)",
-                }, children: [label, _jsx("span", { "aria-hidden": true, className: "absolute block", style: { background: "var(--color-ink)", ...arrows[placement] } })] }))] }));
+                }, children: [label, _jsx("span", { "aria-hidden": true, className: "absolute block", style: {
+                            background: "var(--color-ink)",
+                            ...arrows[placement],
+                            ...(kayma ? { marginLeft: -6 - kayma } : null),
+                        } })] }))] }));
 }
 export function Toast({ tone = "neutral", title, description, action, onDismiss, dismissLabel, duration, ...rest }) {
     /* ÜSTÜNE GELİNCE SAYAÇ DURUYOR. Okumak için üstüne gelen kişiden bildirimi

package/dist/components/primitives.d.ts

@@ -56,8 +56,17 @@ export declare function Beacon({ live, label, look, state, edged, severity, ...r
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
-export declare function Alert({ state, title, icon, children, action, onDismiss, dismissLabel, ...rest }: {
+export declare function Alert({ state, look, title, icon, children, action, onDismiss, dismissLabel, ...rest }: {
     state?: Tone;
+    /**
+     * `inline` (default) the quiet box inside a page. `banner` the page-level status box at the
+     * top of an object's page ("the store is down", "running", "in maintenance"): the card's
+     * strong edge and hard shadow, a 44px tile, a display-face title, body copy at body size.
+     * TR: `inline` (varsayılan) sayfanın içindeki sessiz kutu. `banner` bir nesnenin sayfasının
+     * en üstündeki sayfa düzeyinde durum kutusu ("mağaza erişilemiyor", "çalışıyor", "bakımda"):
+     * kartın koyu kenarı ve sert gölgesi, 44px karo, gösterim yüzüyle başlık, gövde boyunda metin.
+     */
+    look?: "inline" | "banner";
     title: string;
     /**
      * Called when the reader dismisses it. Given, a close control appears at the end of the row.

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

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

package/dist/components/primitives.js

@@ -51,9 +51,9 @@ const TON_GLIFI = {
     elevated: Warning,
     danger: Failure,
 };
-export function Alert({ state = "caution", title, icon, children, action, onDismiss, dismissLabel, ...rest }) {
+export function Alert({ state = "caution", look = "inline", title, icon, children, action, onDismiss, dismissLabel, ...rest }) {
     const h = toneOf(state);
-    return (_jsxs("div", { ...dataProps(rest), className: "tamga-alert", "data-body": children ? "true" : undefined, style: state === "neutral" ? undefined : { background: h.bg }, role: "status", children: [_jsx("span", { "aria-hidden": true, className: "tamga-alert-tile", style: { background: h.mark, color: h.markInk }, children: _jsx(Icon, { icon: icon ?? TON_GLIFI[state], size: "sm", weight: "fill" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "tamga-alert-baslik text-body font-medium text-ink", children: title }), children ? (_jsx("div", { className: "mt-1 text-small leading-relaxed text-ink-soft", children: children })) : null] }), action ? _jsx("div", { className: "tamga-alert-eylem", children: action }) : null, onDismiss ? (_jsx("button", { type: "button", className: "tamga-icon-btn tamga-icon-btn-sm tamga-icon-btn-ghost tamga-alert-kapat", "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), className: "tamga-alert", "data-look": look === "banner" ? "banner" : undefined, "data-body": children ? "true" : undefined, style: state === "neutral" ? undefined : { background: h.bg }, role: "status", children: [_jsx("span", { "aria-hidden": true, className: "tamga-alert-tile", style: { background: h.mark, color: h.markInk }, children: _jsx(Icon, { icon: icon ?? TON_GLIFI[state], size: look === "banner" ? "md" : "sm", weight: "fill" }) }), _jsxs("div", { className: "tamga-alert-metin", children: [_jsx("p", { className: "tamga-alert-baslik text-ink", children: title }), children ? (_jsx("div", { className: "tamga-alert-govde mt-1 leading-relaxed text-ink-soft", children: children })) : null] }), action ? _jsx("div", { className: "tamga-alert-eylem", children: action }) : null, onDismiss ? (_jsx("button", { type: "button", className: "tamga-icon-btn tamga-icon-btn-sm tamga-icon-btn-ghost tamga-alert-kapat", "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }));
 }
 export function Breadcrumb({ items, label, ...rest }) {
     return (_jsx("nav", { ...dataProps(rest), "aria-label": label, children: _jsx("ol", { className: "tamga-crumb", children: items.map((item, i) => {

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.11.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.13.0 · MIT · https://tamga.org.tr */
 @font-face {
   font-family: "Red Hat Display";
   font-style: normal;

package/dist/kit.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.11.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.13.0 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -3681,9 +3681,18 @@
   }
 
   .tamga-alert-baslik {
+    font-size: var(--text-body);
+    font-weight: var(--weight-body);
     margin-top: calc((28px - 1lh) / 2);
     overflow-wrap: anywhere;
   }
+  .tamga-alert-govde {
+    font-size: var(--text-small);
+  }
+  .tamga-alert-metin {
+    flex: 1;
+    min-width: 0;
+  }
 
   .tamga-alert[data-body] > .tamga-alert-tile {
     margin-top: 2px;
@@ -3695,6 +3704,45 @@
     margin-top: -1px;
   }
 
+  .tamga-alert[data-look="banner"] {
+    border: 1.5px solid var(--color-edge-strong);
+    border-radius: var(--radius-card);
+    box-shadow: 4px 4px 0 var(--color-edge-strong);
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 18px 20px;
+  }
+
+  .tamga-alert[data-look="banner"] > .tamga-alert-metin {
+    flex: 1 1 9rem;
+    min-width: 9rem;
+  }
+  .tamga-alert[data-look="banner"] > .tamga-alert-metin + .tamga-alert-eylem,
+  .tamga-alert[data-look="banner"] > .tamga-alert-metin + .tamga-alert-kapat {
+    margin-left: auto;
+  }
+  .tamga-alert[data-look="banner"] > .tamga-alert-tile {
+    border-radius: var(--radius-btn);
+    height: 44px;
+    width: 44px;
+  }
+  .tamga-alert[data-look="banner"] .tamga-alert-baslik {
+    font-family: var(--font-display);
+    font-size: var(--text-display-sm);
+    font-weight: var(--weight-display);
+    line-height: 1.2;
+    margin-top: calc((44px - 1lh) / 2);
+  }
+  .tamga-alert[data-look="banner"] .tamga-alert-govde {
+    font-size: var(--text-body);
+  }
+  .tamga-alert[data-look="banner"] > .tamga-alert-eylem {
+    margin-top: 6px;
+  }
+  .tamga-alert[data-look="banner"] > .tamga-alert-kapat {
+    margin-top: 7px;
+  }
+
   .tamga-count-dot {
     display: block;
     width: 10px;

package/dist/patterns/detail-template.d.ts

@@ -23,6 +23,16 @@ export type DetailTemplateProps = {
     title: string;
     /** Under the title: the object's identity line. TR: Başlığın altı: nesnenin kimlik satırı. */
     subtitle?: string;
+    /**
+     * Under the identity line: the object's state right now ("running", "shipped", "overdue"). The
+     * template keeps only its place and the 8px above it; what goes in is the product's (a
+     * `StatusChip`, a short line, a link), so a redesign of the line never touches the kit. On every
+     * tab, because the header is. TR: Kimlik satırının altı: nesnenin şu anki hâli ("çalışıyor",
+     * "kargoda", "gecikti"). Şablon yalnız yerini ve üstündeki 8px'i tutar; içi ürünündür (bir
+     * `StatusChip`, kısa bir satır, bir bağlantı), yani satırın yeniden tasarımı kite dokunmaz. Her
+     * sekmede, çünkü başlık her sekmede.
+     */
+    status?: ReactNode;
     actions?: ReactNode;
     /**
      * Sekmeler. VERİLMEZSE ŞERİT ÇİZİLMİYOR, ve bu bir kolaylık değil bir
@@ -48,5 +58,5 @@ export type DetailTemplateProps = {
     /** The body of the open tab. The template does not know which tab it is, and must not. TR: Açık sekmenin gövdesi. Şablon hangi sekme olduğunu bilmiyor, bilmemeli. */
     children?: ReactNode;
 };
-export declare function DetailTemplate({ breadcrumb, title, subtitle, actions, tabs, activeTab, state, error, linkComponent: Link, labels, children, }: DetailTemplateProps): import("react").JSX.Element;
+export declare function DetailTemplate({ breadcrumb, title, subtitle, status, actions, tabs, activeTab, state, error, linkComponent: Link, labels, children, }: DetailTemplateProps): import("react").JSX.Element;
 //# sourceMappingURL=detail-template.d.ts.map

package/dist/patterns/detail-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detail-template.d.ts","sourceRoot":"","sources":["../../src/patterns/detail-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB,+GAA+G;IAC/G,GAAG,EAAE,MAAM,CAAC;IACZ,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,0JAA0J;IAC1J,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE5E,sKAAsK;IACtK,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA+CrB"}
+{"version":3,"file":"detail-template.d.ts","sourceRoot":"","sources":["../../src/patterns/detail-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB,+GAA+G;IAC/G,GAAG,EAAE,MAAM,CAAC;IACZ,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,0JAA0J;IAC1J,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE5E,sKAAsK;IACtK,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BAuDrB"}

package/dist/patterns/detail-template.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Breadcrumb } from "../components/primitives.js";
 import { SkeletonPanel } from "../components/skeleton.js";
 import { Busy, ErrorSlot, PlainLink, } from "./shared.js";
-export function DetailTemplate({ breadcrumb, title, subtitle, actions, tabs, activeTab, state = "ready", error, linkComponent: Link = PlainLink, labels, children, }) {
-    return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-detail-state": state, children: [_jsxs("div", { className: "tamga-gutter flex flex-wrap items-start gap-4 pt-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Breadcrumb, { label: labels.breadcrumb, items: breadcrumb }), _jsx("h2", { className: "mt-2 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] }), tabs && tabs.length > 0 ? (_jsx("nav", { "aria-label": labels.tabs, className: "tamga-gutter mt-4 flex gap-6 border-b border-line", children: tabs.map((tab) => {
+export function DetailTemplate({ breadcrumb, title, subtitle, status, actions, tabs, activeTab, state = "ready", error, linkComponent: Link = PlainLink, labels, children, }) {
+    return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-detail-state": state, children: [_jsxs("div", { className: "tamga-gutter flex flex-wrap items-start gap-4 pt-4", children: [_jsxs("div", { className: "min-w-0 flex-1 basis-65", children: [_jsx("div", { className: "mb-1.5", children: _jsx(Breadcrumb, { label: labels.breadcrumb, items: breadcrumb }) }), _jsx("h1", { className: "font-display text-display-sm leading-tight font-extrabold break-words text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1.5 text-body text-ink-soft", children: subtitle }) : null, status ? _jsx("div", { className: "mt-2", "data-detail-status": true, children: status }) : null] }), actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }), tabs && tabs.length > 0 ? (_jsx("nav", { "aria-label": labels.tabs, className: "tamga-gutter mt-4 flex gap-6 border-b border-line", children: tabs.map((tab) => {
                     const current = tab.key === activeTab;
                     return (_jsx(Link, { href: tab.href, className: "tamga-tab", "data-active": current, "data-tab": tab.key, "aria-current": current ? "page" : undefined, children: tab.label }, tab.key));
                 }) })) : null, _jsxs("div", { className: "tamga-gutter min-h-0 flex-1 py-6", children: [state === "loading" ? (_jsx(Busy, { label: labels.loading, children: _jsx(SkeletonPanel, {}) })) : null, state === "error" ? _jsx(ErrorSlot, { error: error, labels: labels }) : null, state === "ready" ? children : null] })] }));

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.11.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.13.0 · MIT · https://tamga.org.tr */
 @import "./fonts.css";
 @import "./theme.css";
 @import "./kit.css";

package/dist/theme.css

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

package/package.json

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