tamga-ui 0.12.0 → 0.13.0

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.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.

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/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.12.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.12.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.13.0 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;

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,+BAqDrB"}
+{"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 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] }), 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.12.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.12.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.12.0",
+  "version": "0.13.0",
   "description": "Mantıksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",