tamga-ui 0.12.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +52 -0
- package/dist/components/overlay.d.ts +15 -1
- package/dist/components/overlay.d.ts.map +1 -1
- package/dist/components/overlay.js +52 -6
- package/dist/components/primitives.d.ts +9 -1
- package/dist/components/primitives.d.ts.map +1 -1
- package/dist/components/primitives.js +2 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +5 -1
- package/dist/components/timeline-strip.d.ts.map +1 -1
- package/dist/components/timeline-strip.js +9 -1
- package/dist/fonts.css +1 -1
- package/dist/kit.css +15 -2
- package/dist/patterns/detail-template.d.ts +19 -1
- package/dist/patterns/detail-template.d.ts.map +1 -1
- package/dist/patterns/detail-template.js +3 -3
- package/dist/styles.css +1 -1
- package/dist/theme.css +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,58 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
|
|
|
5
5
|
|
|
6
6
|
> 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
|
|
7
7
|
|
|
8
|
+
## 0.14.0
|
|
9
|
+
|
|
10
|
+
> A detail page's header reads as one block: the state beside the title, the actions beside the
|
|
11
|
+
> block, a count on a tab.
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **`DetailTemplate` `titleAside`** · a place beside the title, on its line, for the object's
|
|
16
|
+
one-word state (a `StatusChip`). The product's, like `status`; the template keeps the place.
|
|
17
|
+
- **`Alert` `actionAlign="center"`** · the action on the middle of the title-and-body block,
|
|
18
|
+
for a button that closes a paragraph. `start` stays the default (the title's first line).
|
|
19
|
+
- **`DetailTab` `count`** · the number beside a tab's label ("Events 2"), drawn with the same
|
|
20
|
+
counter as `Tabs`.
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Changed
|
|
24
|
+
|
|
25
|
+
- **`Progress` with a `tone` keeps its stripes** · the md bar draws the tone's two shades, as
|
|
26
|
+
the accent bar does; a flat toned fill read as another kit beside it. `sm` stays flat.
|
|
27
|
+
|
|
28
|
+
- **`elevated`'s mark is orange** (`#e5761f`, was the terracotta `#c8664a`): between caution's
|
|
29
|
+
amber and critical's red it read as brown. Text and wash are unchanged.
|
|
30
|
+
- **`TimelineStrip` says a bucket on hover with the kit's tooltip**, at once, instead of the
|
|
31
|
+
browser's `title` (late, unstyled, easy to miss). `Tooltip` takes a `className` for its wrapper
|
|
32
|
+
so a cell can keep its share of the row.
|
|
33
|
+
- **The breadcrumb stands on its own line, 12px above the title** (it was 6px, inside the
|
|
34
|
+
title's block). **The actions are centred on the title block** (title, identity line,
|
|
35
|
+
status line) instead of sitting on the breadcrumb's line.
|
|
36
|
+
|
|
37
|
+
## 0.13.0
|
|
38
|
+
|
|
39
|
+
> The tooltip can carry a sentence, stays on the screen, and opens on a tap; a detail page
|
|
40
|
+
> can say its object's state under the title.
|
|
41
|
+
|
|
42
|
+
### Added
|
|
43
|
+
|
|
44
|
+
- **`DetailTemplate` `status`** · a place under the identity line, before the tabs, for the
|
|
45
|
+
object's state right now ("running", "shipped", "overdue"). The template keeps only the
|
|
46
|
+
place and the 8px above it; what goes in is the product's (a `StatusChip`, a short line, a
|
|
47
|
+
link). It stands on every tab, because the header does. Without it nothing is drawn.
|
|
48
|
+
|
|
49
|
+
- **`Tooltip` `wrap`** · breaks a sentence into lines at 288px (the Popover's width) instead
|
|
50
|
+
of one line across the screen. Off by default: a tooltip is still a one-line label.
|
|
51
|
+
|
|
52
|
+
### Fixed
|
|
53
|
+
|
|
54
|
+
- **`Tooltip` stays inside the viewport.** Near the screen's edge the bubble slides in until
|
|
55
|
+
16px is left; the arrow keeps pointing at the trigger.
|
|
56
|
+
- **`Tooltip` opens on a tap.** On a touch screen a tap opens it and a tap elsewhere closes
|
|
57
|
+
it. Before, the `pointerleave` at the end of a tap closed it before it opened, and iOS
|
|
58
|
+
Safari does not focus a tapped button, so on a phone it could not be opened at all.
|
|
59
|
+
|
|
8
60
|
## 0.12.0
|
|
9
61
|
|
|
10
62
|
> The detail page's title is the page title; the alert has a page-level look.
|
|
@@ -119,7 +119,7 @@ declare const placements: {
|
|
|
119
119
|
*
|
|
120
120
|
* Gerekçe: docs/gerekce/07-katman-ve-diyalog.md
|
|
121
121
|
*/
|
|
122
|
-
export declare function Tooltip({ label, placement, delay, bind, children, ...rest }: {
|
|
122
|
+
export declare function Tooltip({ label, placement, delay, bind, wrap, className, children, ...rest }: {
|
|
123
123
|
label: string;
|
|
124
124
|
placement?: keyof typeof placements;
|
|
125
125
|
/**
|
|
@@ -140,6 +140,20 @@ export declare function Tooltip({ label, placement, delay, bind, children, ...re
|
|
|
140
140
|
* ekran okuyucu metni iki kez okuyor · bir kez ad, bir kez açıklama olarak.
|
|
141
141
|
*/
|
|
142
142
|
bind?: boolean;
|
|
143
|
+
/**
|
|
144
|
+
* Lets a sentence break into lines at 288px (the Popover's width) instead of running as one
|
|
145
|
+
* line across the screen. A tooltip is a label; turn this on only when the explanation
|
|
146
|
+
* really is a sentence (why a status reads as it does). TR: Bir cümlenin tek satır olarak
|
|
147
|
+
* ekranı boydan boya geçmesi yerine 288px'te (Popover'ın genişliği) satır kırmasını sağlar.
|
|
148
|
+
* İpucu bir etikettir; yalnız açıklama gerçekten bir cümleyse aç (bir durumun neden öyle
|
|
149
|
+
* okunduğu gibi).
|
|
150
|
+
*/
|
|
151
|
+
wrap?: boolean;
|
|
152
|
+
/**
|
|
153
|
+
* The wrapper's own class: a trigger that has to grow in a row (a strip's cell, `flex-1`). TR:
|
|
154
|
+
* Sarmalayıcının kendi sınıfı: bir satırda büyümesi gereken tetikleyici (bir şeridin hücresi).
|
|
155
|
+
*/
|
|
156
|
+
className?: string;
|
|
143
157
|
children: React.ReactNode;
|
|
144
158
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
145
159
|
[k: `data-${string}`]: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/components/overlay.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/components/overlay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAatC;;;;;GAKG;AAIH,MAAM,MAAM,QAAQ,GAChB;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACD;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,KAAW,EACX,OAAe,EACf,WAAe,EACf,WAAmB,EACnB,WAAmB,EACnB,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA6FA;AAID,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAW,EACX,KAAe,EACf,OAAe,EACf,YAAY,EACZ,UAAU,EACV,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4CA;AAID,QAAA,MAAM,UAAU;aACd,GAAG,EAAE,yDAAyD;aAC9D,MAAM,EAAE,sDAAsD;aAC9D,IAAI,EAAE,uDAAuD;aAC7D,KAAK,EAAE,sDAAsD;CACrD,CAAC;AAwBX;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAoB,EACpB,KAAW,EACX,IAAW,EACX,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiLA;AAID,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC;AAE7B,wBAAgB,KAAK,CAAC,EACpB,IAAgB,EAChB,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA8EA;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO;aACX,WAAW,EAAE,yBAAyB;aACtC,UAAU,EAAE,0BAA0B;aACtC,cAAc,EAAE,4BAA4B;aAC5C,aAAa,EAAE,6BAA6B;CACpC,CAAC;AAEX,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAQA;AAID;;;;;;GAMG;AACH,QAAA,MAAM,eAAe;aACnB,EAAE,EAAE,UAAU;aACd,EAAE,EAAE,WAAW;aACf,IAAI,EAAE,uBAAuB;aAC7B,IAAI,EAAE,YAAY;CACV,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,eAAe,CAAC;AAwEtD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,UAAU,EACV,IAAe,EACf,IAAY,EACZ,eAAuB,EACvB,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,+BAwBA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAe,EACf,UAAU,EACV,IAAW,EACX,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAuBA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState } from "react";
|
|
3
|
+
import { cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
|
|
4
4
|
import { toneOf } from "./tone.js";
|
|
5
5
|
import { Icon } from "./icon.js";
|
|
6
6
|
import { cn } from "../lib/cn.js";
|
|
@@ -103,9 +103,13 @@ const arrows = {
|
|
|
103
103
|
*
|
|
104
104
|
* Gerekçe: docs/gerekce/07-katman-ve-diyalog.md
|
|
105
105
|
*/
|
|
106
|
-
export function Tooltip({ label, placement = "bottom", delay = 400, bind = true, children, ...rest }) {
|
|
106
|
+
export function Tooltip({ label, placement = "bottom", delay = 400, bind = true, wrap = false, className, children, ...rest }) {
|
|
107
107
|
const sarmal = useRef(null);
|
|
108
|
+
const kabarcik = useRef(null);
|
|
108
109
|
const [konum, setKonum] = useState(null);
|
|
110
|
+
/* Kabarcığın görüntü alanına sığmak için yatayda kaydığı mesafe; ok kaymıyor,
|
|
111
|
+
tetikleyiciyi göstermeye devam ediyor. */
|
|
112
|
+
const [kayma, setKayma] = useState(0);
|
|
109
113
|
const id = useId();
|
|
110
114
|
const bekleyen = useRef(null);
|
|
111
115
|
const olc = useCallback(() => {
|
|
@@ -149,6 +153,23 @@ export function Tooltip({ label, placement = "bottom", delay = 400, bind = true,
|
|
|
149
153
|
if (bekleyen.current !== null)
|
|
150
154
|
clearTimeout(bekleyen.current);
|
|
151
155
|
}, []);
|
|
156
|
+
/* EKRANA SIĞ. Ortalanan kabarcık, kenara yakın bir tetikleyicide görüntü
|
|
157
|
+
alanından taşıyordu (390px'te 288px'lik bir cümle). Açılınca ölçülüyor ve
|
|
158
|
+
kenara 16px kalacak kadar içeri itiliyor. */
|
|
159
|
+
useLayoutEffect(() => {
|
|
160
|
+
const el = kabarcik.current;
|
|
161
|
+
if (!konum || !el || placement === "left" || placement === "right") {
|
|
162
|
+
setKayma(0);
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
const r = el.getBoundingClientRect();
|
|
166
|
+
const pay = 16;
|
|
167
|
+
const solaTasma = pay - (r.left - kayma);
|
|
168
|
+
const sagaTasma = r.right - kayma - (document.documentElement.clientWidth - pay);
|
|
169
|
+
setKayma(solaTasma > 0 ? solaTasma : sagaTasma > 0 ? -sagaTasma : 0);
|
|
170
|
+
// kayma ölçümün sonucu, girdisi değil: onu izlemek döngü kurar.
|
|
171
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
172
|
+
}, [konum, placement]);
|
|
152
173
|
/* Kaydırma ya da yeniden boyutlanma ipucunun altından tetikleyiciyi çekiyor;
|
|
153
174
|
o an kapanması, yanlış yerde durmasından iyi. */
|
|
154
175
|
useEffect(() => {
|
|
@@ -158,29 +179,50 @@ export function Tooltip({ label, placement = "bottom", delay = 400, bind = true,
|
|
|
158
179
|
biri için bir engel · ve odak tetikleyicide kaldığı için başka çıkışı
|
|
159
180
|
yok. */
|
|
160
181
|
const esc = (e) => e.key === "Escape" && kapat();
|
|
182
|
+
/* Dokunmatikte fare çekilmiyor: kabarcık başka yere dokununca kapanıyor. */
|
|
183
|
+
const disari = (e) => {
|
|
184
|
+
if (!sarmal.current?.contains(e.target))
|
|
185
|
+
kapat();
|
|
186
|
+
};
|
|
161
187
|
window.addEventListener("scroll", kapat, true);
|
|
162
188
|
window.addEventListener("resize", kapat);
|
|
163
189
|
document.addEventListener("keydown", esc);
|
|
190
|
+
document.addEventListener("pointerdown", disari);
|
|
164
191
|
return () => {
|
|
165
192
|
window.removeEventListener("scroll", kapat, true);
|
|
166
193
|
window.removeEventListener("resize", kapat);
|
|
167
194
|
document.removeEventListener("keydown", esc);
|
|
195
|
+
document.removeEventListener("pointerdown", disari);
|
|
168
196
|
};
|
|
169
197
|
}, [konum, kapat]);
|
|
198
|
+
/* DOKUNMA AÇIYOR. Telefonda "üstüne gelmek" yok: iOS Safari dokunulan
|
|
199
|
+
düğmeye odak da vermiyor, ve dokunuşun sonundaki `pointerleave` kabarcığı
|
|
200
|
+
açılmadan kapatıyordu. Dokunuş aç/kapa, fareninkiler dokunuşta yok sayılıyor. */
|
|
201
|
+
const dokunus = useCallback((e) => {
|
|
202
|
+
if (e.pointerType !== "touch")
|
|
203
|
+
return;
|
|
204
|
+
if (konum)
|
|
205
|
+
kapat();
|
|
206
|
+
else
|
|
207
|
+
olc();
|
|
208
|
+
}, [konum, kapat, olc]);
|
|
170
209
|
const kaydirma = {
|
|
171
210
|
top: "translate(-50%, -100%)",
|
|
172
211
|
bottom: "translate(-50%, 0)",
|
|
173
212
|
left: "translate(-100%, -50%)",
|
|
174
213
|
right: "translate(0, -50%)",
|
|
175
214
|
};
|
|
176
|
-
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)
|
|
215
|
+
return (_jsxs("span", { ...dataProps(rest), ref: sarmal, className: cn("relative inline-flex", className), 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)
|
|
177
216
|
? cloneElement(children, {
|
|
178
217
|
"aria-describedby": id,
|
|
179
218
|
})
|
|
180
|
-
: children, konum && (_jsxs("span", { "aria-hidden": true, className: "pointer-events-none fixed z-40
|
|
181
|
-
left: konum.left,
|
|
219
|
+
: 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: {
|
|
220
|
+
left: konum.left + kayma,
|
|
182
221
|
top: konum.top,
|
|
183
222
|
transform: kaydirma[placement],
|
|
223
|
+
/* 288px Popover'ın genişliği; dar ekranda iki yanda 16px kalıyor. */
|
|
224
|
+
maxWidth: wrap ? "min(18rem, calc(100vw - 2rem))" : undefined,
|
|
225
|
+
width: wrap ? "max-content" : undefined,
|
|
184
226
|
background: "var(--color-ink)",
|
|
185
227
|
color: "var(--color-page)",
|
|
186
228
|
/* 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,
|
|
|
188
230
|
da koyu kaldığı için sınır her ikisinde de duruyor. */
|
|
189
231
|
border: "1.5px solid var(--color-edge-strong)",
|
|
190
232
|
borderRadius: "calc(var(--radius) - 1px)",
|
|
191
|
-
}, children: [label, _jsx("span", { "aria-hidden": true, className: "absolute block", style: {
|
|
233
|
+
}, children: [label, _jsx("span", { "aria-hidden": true, className: "absolute block", style: {
|
|
234
|
+
background: "var(--color-ink)",
|
|
235
|
+
...arrows[placement],
|
|
236
|
+
...(kayma ? { marginLeft: -6 - kayma } : null),
|
|
237
|
+
} })] }))] }));
|
|
192
238
|
}
|
|
193
239
|
export function Toast({ tone = "neutral", title, description, action, onDismiss, dismissLabel, duration, ...rest }) {
|
|
194
240
|
/* ÜSTÜNE GELİNCE SAYAÇ DURUYOR. Okumak için üstüne gelen kişiden bildirimi
|
|
@@ -56,7 +56,7 @@ export declare function Beacon({ live, label, look, state, edged, severity, ...r
|
|
|
56
56
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
57
57
|
[k: `data-${string}`]: unknown;
|
|
58
58
|
}): import("react").JSX.Element;
|
|
59
|
-
export declare function Alert({ state, look, title, icon, children, action, onDismiss, dismissLabel, ...rest }: {
|
|
59
|
+
export declare function Alert({ state, look, title, icon, children, action, actionAlign, onDismiss, dismissLabel, ...rest }: {
|
|
60
60
|
state?: Tone;
|
|
61
61
|
/**
|
|
62
62
|
* `inline` (default) the quiet box inside a page. `banner` the page-level status box at the
|
|
@@ -86,6 +86,14 @@ export declare function Alert({ state, look, title, icon, children, action, onDi
|
|
|
86
86
|
icon?: IconGlyph;
|
|
87
87
|
children?: React.ReactNode;
|
|
88
88
|
action?: React.ReactNode;
|
|
89
|
+
/**
|
|
90
|
+
* Where the action sits beside a title with a body under it. `start` (default) on the title's
|
|
91
|
+
* first line, as the tile. `center` on the whole block: a button that closes a paragraph,
|
|
92
|
+
* rather than one that answers the title. TR: Altında gövde olan bir başlığın yanında eylemin
|
|
93
|
+
* yeri. `start` (varsayılan) başlığın ilk satırında, karo gibi. `center` bütün bloğun ortasında:
|
|
94
|
+
* başlığa cevap veren değil, bir paragrafı bağlayan düğme için.
|
|
95
|
+
*/
|
|
96
|
+
actionAlign?: "start" | "center";
|
|
89
97
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
90
98
|
[k: `data-${string}`]: unknown;
|
|
91
99
|
}): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAW5C,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQvC,wBAAgB,SAAS,CAAC,EACxB,QAAgB,EAChB,IAAc,EACd,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoBA;AAED,yFAAyF;AACzF,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,KAAK,EACL,IAAc,EACd,KAAiB,EACjB,KAAa,EACb,QAAa,EACb,GAAG,IAAI,EACR,EAAE;IACD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiBA;AAcD,wBAAgB,KAAK,CAAC,EACpB,KAAiB,EACjB,IAAe,EACf,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EACZ,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+
|
|
1
|
+
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"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"}
|
|
@@ -51,9 +51,9 @@ const TON_GLIFI = {
|
|
|
51
51
|
elevated: Warning,
|
|
52
52
|
danger: Failure,
|
|
53
53
|
};
|
|
54
|
-
export function Alert({ state = "caution", look = "inline", title, icon, children, action, onDismiss, dismissLabel, ...rest }) {
|
|
54
|
+
export function Alert({ state = "caution", look = "inline", title, icon, children, action, actionAlign = "start", onDismiss, dismissLabel, ...rest }) {
|
|
55
55
|
const h = toneOf(state);
|
|
56
|
-
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] }));
|
|
56
|
+
return (_jsxs("div", { ...dataProps(rest), className: "tamga-alert", "data-look": look === "banner" ? "banner" : undefined, "data-body": children ? "true" : undefined, "data-action-align": actionAlign === "center" ? "center" : 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] }));
|
|
57
57
|
}
|
|
58
58
|
export function Breadcrumb({ items, label, ...rest }) {
|
|
59
59
|
return (_jsx("nav", { ...dataProps(rest), "aria-label": label, children: _jsx("ol", { className: "tamga-crumb", children: items.map((item, i) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AACzD;;;;;;;;GAQG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,KAAS,EACT,IAAY,EACZ,MAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,IAAW,EACX,IAAI,EACJ,SAAc,EACd,GAAG,IAAI,EACR,EAAE;IACD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClC,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IACjG;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiGA"}
|
|
@@ -25,5 +25,9 @@ export function Progress({ value = 0, look = "bar", blocks = 10, segments, label
|
|
|
25
25
|
const toplam = paylar.reduce((n, p) => n + p.value, 0) || 1;
|
|
26
26
|
return (_jsxs("div", { ...dataProps(rest), className: className, children: [ust, _jsx("div", { className: "tamga-progress-split", role: "img", "aria-label": label ?? ariaLabel ?? "Progress", children: paylar.map(({ value: v, tone, label: _etiket, ...kanca }, i) => (_createElement("span", { ...kanca, key: i, style: { width: `${(v / toplam) * 100}%`, background: tone ? toneOf(tone).mark : yiginRenk(i) } }))) }), paylar.some((p) => p.label) ? (_jsx("div", { className: "tamga-progress-lejant", children: paylar.map((p, i) => (p.label ? _jsx("span", { children: p.label }, i) : null)) })) : null] }));
|
|
27
27
|
}
|
|
28
|
-
return (_jsxs("div", { ...dataProps(rest), className: className, children: [ust, _jsx("div", { className: size === "sm" ? "tamga-progress tamga-progress-sm" : "tamga-progress", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label ?? ariaLabel ?? "Progress", children: _jsx("div", { className: "tamga-progress-fill",
|
|
28
|
+
return (_jsxs("div", { ...dataProps(rest), className: className, children: [ust, _jsx("div", { className: size === "sm" ? "tamga-progress tamga-progress-sm" : "tamga-progress", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label ?? ariaLabel ?? "Progress", children: _jsx("div", { className: "tamga-progress-fill", "data-tone": size === "sm" ? undefined : tone, style: !tone
|
|
29
|
+
? { width: `${pct}%` }
|
|
30
|
+
: size === "sm"
|
|
31
|
+
? { width: `${pct}%`, background: toneOf(tone).mark }
|
|
32
|
+
: { width: `${pct}%`, "--tamga-progress-tint": toneOf(tone).mark } }) })] }));
|
|
29
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-strip.d.ts","sourceRoot":"","sources":["../../src/components/timeline-strip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"timeline-strip.d.ts","sourceRoot":"","sources":["../../src/components/timeline-strip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAG9C;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yGAAyG;IACzG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CACrC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,MAAW,EACX,GAAO,EACP,QAAY;AACZ,oEAAoE;AACpE,MAAM;AACN,8DAA8D;AAC9D,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,0HAA0H;IAC1H,IAAI,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgEA"}
|
|
@@ -4,6 +4,7 @@ import { cn } from "../lib/cn.js";
|
|
|
4
4
|
import { dataProps } from "../lib/data-props.js";
|
|
5
5
|
import { Icon } from "./icon.js";
|
|
6
6
|
import { toneOf } from "./tone.js";
|
|
7
|
+
import { Tooltip } from "./overlay.js";
|
|
7
8
|
export function TimelineStrip({ data, steps, height = 32, gap = 2, minWidth = 3,
|
|
8
9
|
/** Şeridin iki ucundaki zaman etiketi — "90 gün önce" · "bugün". */
|
|
9
10
|
labels,
|
|
@@ -22,5 +23,12 @@ describe, className, ...rest }) {
|
|
|
22
23
|
_jsx("strong", { className: "text-small", children: label }),
|
|
23
24
|
time ? _jsx("span", { className: "font-mono text-caption text-ink-faint", children: time }) : null)))] }) }));
|
|
24
25
|
}
|
|
25
|
-
return (_jsxs("div", { ...dataProps(rest), className: className, children: [_jsx("div", { className: "flex items-end", style: { gap }, children: (data ?? []).map((tone, i) =>
|
|
26
|
+
return (_jsxs("div", { ...dataProps(rest), className: className, children: [_jsx("div", { className: "flex items-end", style: { gap }, children: (data ?? []).map((tone, i) => {
|
|
27
|
+
const said = describe?.(i, tone);
|
|
28
|
+
const cell = (_jsx("span", { "aria-label": said || undefined, className: cn("transition-opacity hover:opacity-60", said ? "block w-full" : "flex-1"), style: { height, minWidth, background: toneOf(tone).mark } }, i));
|
|
29
|
+
/* KUTUNUN SÖZÜ KİTİN İPUCUYLA, `title` İLE DEĞİL: tarayıcının ipucu bir saniye
|
|
30
|
+
gecikiyor, stilsiz, ve yanından geçen fare onu hiç görmüyordu · "gün gün" okunan
|
|
31
|
+
bir şeridin her günü üstüne gelince hemen konuşmalı. */
|
|
32
|
+
return said ? (_jsx(Tooltip, { label: said, delay: 0, placement: "top", bind: false, className: "flex-1", children: cell }, i)) : (cell);
|
|
33
|
+
}) }), labels ? (_jsxs("div", { className: "mt-2 flex justify-between", children: [_jsx("span", { className: "font-mono text-micro text-ink-faint", children: labels[0] }), _jsx("span", { className: "font-mono text-micro text-ink-faint", children: labels[1] })] })) : null] }));
|
|
26
34
|
}
|
package/dist/fonts.css
CHANGED
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.14.0 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
|
|
117
117
|
--color-elevated: #edb09a;
|
|
118
118
|
--color-elevated-bg: #3a2520;
|
|
119
|
-
--color-elevated-mark: #
|
|
119
|
+
--color-elevated-mark: #e5761f;
|
|
120
120
|
--color-silent: #b8bec9;
|
|
121
121
|
|
|
122
122
|
--color-silent-bg: #232833;
|
|
@@ -3449,6 +3449,14 @@
|
|
|
3449
3449
|
transition: width var(--duration-base) var(--ease-standard);
|
|
3450
3450
|
}
|
|
3451
3451
|
|
|
3452
|
+
.tamga-progress-fill[data-tone] {
|
|
3453
|
+
background: repeating-linear-gradient(
|
|
3454
|
+
135deg,
|
|
3455
|
+
var(--tamga-progress-tint) 0 8px,
|
|
3456
|
+
color-mix(in oklab, var(--tamga-progress-tint) 82%, black) 8px 16px
|
|
3457
|
+
);
|
|
3458
|
+
}
|
|
3459
|
+
|
|
3452
3460
|
.tamga-progress-sm {
|
|
3453
3461
|
height: 4px;
|
|
3454
3462
|
border: 0;
|
|
@@ -3704,6 +3712,11 @@
|
|
|
3704
3712
|
margin-top: -1px;
|
|
3705
3713
|
}
|
|
3706
3714
|
|
|
3715
|
+
.tamga-alert[data-action-align="center"] > .tamga-alert-eylem {
|
|
3716
|
+
align-self: center;
|
|
3717
|
+
margin-top: 0;
|
|
3718
|
+
}
|
|
3719
|
+
|
|
3707
3720
|
.tamga-alert[data-look="banner"] {
|
|
3708
3721
|
border: 1.5px solid var(--color-edge-strong);
|
|
3709
3722
|
border-radius: var(--radius-card);
|
|
@@ -13,6 +13,8 @@ export type DetailTab = {
|
|
|
13
13
|
/** The translated label: the template draws the word it is given, it does not look one up. TR: Çevrilmiş etiket: şablon kendisine verilen sözcüğü çiziyor, aramıyor. */
|
|
14
14
|
label: string;
|
|
15
15
|
href: string;
|
|
16
|
+
/** How many rows that tab holds ("Events 2"), drawn as the kit's `Tabs` count. TR: O sekmede kaç satır olduğu ("Olaylar 2"), kitin `Tabs` sayacıyla. */
|
|
17
|
+
count?: number;
|
|
16
18
|
};
|
|
17
19
|
export type DetailTemplateProps = {
|
|
18
20
|
/** The trail above the title. The last item is the current object and takes no href. TR: Başlığın üstündeki iz. Son öğe o anki nesnedir ve href almaz. */
|
|
@@ -21,8 +23,24 @@ export type DetailTemplateProps = {
|
|
|
21
23
|
href?: string;
|
|
22
24
|
}[];
|
|
23
25
|
title: string;
|
|
26
|
+
/**
|
|
27
|
+
* Beside the title, on its line: the object's one-word state (a `StatusChip`). The product's,
|
|
28
|
+
* like `status`; the template keeps only the place. TR: Başlığın yanında, aynı satırda: nesnenin
|
|
29
|
+
* tek sözcüklük hâli (bir `StatusChip`). `status` gibi ürünün; şablon yalnız yerini tutar.
|
|
30
|
+
*/
|
|
31
|
+
titleAside?: ReactNode;
|
|
24
32
|
/** Under the title: the object's identity line. TR: Başlığın altı: nesnenin kimlik satırı. */
|
|
25
33
|
subtitle?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Under the identity line: the object's state right now ("running", "shipped", "overdue"). The
|
|
36
|
+
* template keeps only its place and the 8px above it; what goes in is the product's (a
|
|
37
|
+
* `StatusChip`, a short line, a link), so a redesign of the line never touches the kit. On every
|
|
38
|
+
* tab, because the header is. TR: Kimlik satırının altı: nesnenin şu anki hâli ("çalışıyor",
|
|
39
|
+
* "kargoda", "gecikti"). Şablon yalnız yerini ve üstündeki 8px'i tutar; içi ürünündür (bir
|
|
40
|
+
* `StatusChip`, kısa bir satır, bir bağlantı), yani satırın yeniden tasarımı kite dokunmaz. Her
|
|
41
|
+
* sekmede, çünkü başlık her sekmede.
|
|
42
|
+
*/
|
|
43
|
+
status?: ReactNode;
|
|
26
44
|
actions?: ReactNode;
|
|
27
45
|
/**
|
|
28
46
|
* Sekmeler. VERİLMEZSE ŞERİT ÇİZİLMİYOR, ve bu bir kolaylık değil bir
|
|
@@ -48,5 +66,5 @@ export type DetailTemplateProps = {
|
|
|
48
66
|
/** 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. */
|
|
49
67
|
children?: ReactNode;
|
|
50
68
|
};
|
|
51
|
-
export declare function DetailTemplate({ breadcrumb, title, subtitle, actions, tabs, activeTab, state, error, linkComponent: Link, labels, children, }: DetailTemplateProps): import("react").JSX.Element;
|
|
69
|
+
export declare function DetailTemplate({ breadcrumb, title, titleAside, subtitle, status, actions, tabs, activeTab, state, error, linkComponent: Link, labels, children, }: DetailTemplateProps): import("react").JSX.Element;
|
|
52
70
|
//# sourceMappingURL=detail-template.d.ts.map
|
|
@@ -1 +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;
|
|
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;IACb,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,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;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,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,UAAU,EACV,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,+BA6DrB"}
|
|
@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { Breadcrumb } from "../components/primitives.js";
|
|
4
4
|
import { SkeletonPanel } from "../components/skeleton.js";
|
|
5
5
|
import { Busy, ErrorSlot, PlainLink, } from "./shared.js";
|
|
6
|
-
export function DetailTemplate({ breadcrumb, title, subtitle, actions, tabs, activeTab, state = "ready", error, linkComponent: Link = PlainLink, labels, children, }) {
|
|
7
|
-
return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-detail-state": state, children: [_jsxs("div", { className: "tamga-gutter flex flex-wrap items-
|
|
6
|
+
export function DetailTemplate({ breadcrumb, title, titleAside, subtitle, status, actions, tabs, activeTab, state = "ready", error, linkComponent: Link = PlainLink, labels, children, }) {
|
|
7
|
+
return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-detail-state": state, children: [_jsxs("div", { className: "tamga-gutter pt-4", children: [_jsx("div", { className: "mb-3", children: _jsx(Breadcrumb, { label: labels.breadcrumb, items: breadcrumb }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs("div", { className: "min-w-0 flex-1 basis-65", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx("h1", { className: "font-display text-display-sm leading-tight font-extrabold break-words text-ink", children: title }), titleAside ? _jsx("div", { "data-detail-title-aside": true, children: titleAside }) : null] }), 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) => {
|
|
8
8
|
const current = tab.key === activeTab;
|
|
9
|
-
return (
|
|
9
|
+
return (_jsxs(Link, { href: tab.href, className: "tamga-tab", "data-active": current, "data-tab": tab.key, "aria-current": current ? "page" : undefined, children: [tab.label, tab.count !== undefined ? _jsx("span", { className: "tamga-sayac tabular-nums", children: tab.count }) : null] }, tab.key));
|
|
10
10
|
}) })) : 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] })] }));
|
|
11
11
|
}
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.14.0 · MIT · https://tamga.org.tr */
|
|
2
2
|
@custom-variant dark (&:is(.dark *));
|
|
3
3
|
|
|
4
4
|
@theme static {
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
|
|
237
237
|
--color-elevated-bg: #f7e6df;
|
|
238
238
|
|
|
239
|
-
--color-elevated-mark: #
|
|
239
|
+
--color-elevated-mark: #e5761f;
|
|
240
240
|
--color-silent: #4a4f5a;
|
|
241
241
|
|
|
242
242
|
--color-silent-bg: #eceae4;
|