tamga-ui 0.11.0 → 0.12.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 +24 -0
- package/dist/components/primitives.d.ts +10 -1
- package/dist/components/primitives.d.ts.map +1 -1
- package/dist/components/primitives.js +2 -2
- package/dist/fonts.css +1 -1
- package/dist/kit.css +49 -1
- package/dist/patterns/detail-template.d.ts.map +1 -1
- package/dist/patterns/detail-template.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,30 @@ 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.12.0
|
|
9
|
+
|
|
10
|
+
> The detail page's title is the page title; the alert has a page-level look.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- **`Alert` `look="banner"`** · the page-level status box at the top of an object's page
|
|
15
|
+
("the store is down", "running", "in maintenance"): the card's 1.5px strong edge and
|
|
16
|
+
4px hard shadow, a 44px tile with the `md` glyph, a display-face title (`--text-display-sm`,
|
|
17
|
+
extrabold), body copy at `--text-body`, 18/20px padding. The action and the dismiss sit on
|
|
18
|
+
the tile's centre. At 390px the action drops under the text (the text column keeps at least
|
|
19
|
+
9rem) instead of squeezing the title into a five-letter column. `inline` stays the default and is unchanged: without `look` the markup
|
|
20
|
+
and the CSS are what they were. Shown in six tones on the docs page.
|
|
21
|
+
|
|
22
|
+
### Changed
|
|
23
|
+
|
|
24
|
+
- **`DetailTemplate` draws its title as `PageBand` does**: an `h1` in the display face
|
|
25
|
+
(`--text-display-sm`, extrabold), the breadcrumb 6px above, the subtitle 6px below at body
|
|
26
|
+
size in the soft ink. It was an `h2` at `--text-title` semibold with a small faint subtitle,
|
|
27
|
+
so a list page's title was big and bold and an object's name small and thin; a detail page
|
|
28
|
+
had no `h1` at all. This enlarges every detail title in every product using the template,
|
|
29
|
+
on purpose: they all carried the same inconsistency. A long title (a hostname) breaks
|
|
30
|
+
inside the box at 390px.
|
|
31
|
+
|
|
8
32
|
## 0.11.0
|
|
9
33
|
|
|
10
34
|
> Group controls carry their own error line; the breadcrumb is a label line.
|
|
@@ -56,8 +56,17 @@ 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, title, icon, children, action, onDismiss, dismissLabel, ...rest }: {
|
|
59
|
+
export declare function Alert({ state, look, title, icon, children, action, onDismiss, dismissLabel, ...rest }: {
|
|
60
60
|
state?: Tone;
|
|
61
|
+
/**
|
|
62
|
+
* `inline` (default) the quiet box inside a page. `banner` the page-level status box at the
|
|
63
|
+
* top of an object's page ("the store is down", "running", "in maintenance"): the card's
|
|
64
|
+
* strong edge and hard shadow, a 44px tile, a display-face title, body copy at body size.
|
|
65
|
+
* TR: `inline` (varsayılan) sayfanın içindeki sessiz kutu. `banner` bir nesnenin sayfasının
|
|
66
|
+
* en üstündeki sayfa düzeyinde durum kutusu ("mağaza erişilemiyor", "çalışıyor", "bakımda"):
|
|
67
|
+
* kartın koyu kenarı ve sert gölgesi, 44px karo, gösterim yüzüyle başlık, gövde boyunda metin.
|
|
68
|
+
*/
|
|
69
|
+
look?: "inline" | "banner";
|
|
61
70
|
title: string;
|
|
62
71
|
/**
|
|
63
72
|
* Called when the reader dismisses it. Given, a close control appears at the end of the row.
|
|
@@ -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,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,EACZ,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,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", title, icon, children, action, onDismiss, dismissLabel, ...rest }) {
|
|
54
|
+
export function Alert({ state = "caution", look = "inline", title, icon, children, action, onDismiss, dismissLabel, ...rest }) {
|
|
55
55
|
const h = toneOf(state);
|
|
56
|
-
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: "
|
|
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] }));
|
|
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) => {
|
package/dist/fonts.css
CHANGED
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.12.0 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -3681,9 +3681,18 @@
|
|
|
3681
3681
|
}
|
|
3682
3682
|
|
|
3683
3683
|
.tamga-alert-baslik {
|
|
3684
|
+
font-size: var(--text-body);
|
|
3685
|
+
font-weight: var(--weight-body);
|
|
3684
3686
|
margin-top: calc((28px - 1lh) / 2);
|
|
3685
3687
|
overflow-wrap: anywhere;
|
|
3686
3688
|
}
|
|
3689
|
+
.tamga-alert-govde {
|
|
3690
|
+
font-size: var(--text-small);
|
|
3691
|
+
}
|
|
3692
|
+
.tamga-alert-metin {
|
|
3693
|
+
flex: 1;
|
|
3694
|
+
min-width: 0;
|
|
3695
|
+
}
|
|
3687
3696
|
|
|
3688
3697
|
.tamga-alert[data-body] > .tamga-alert-tile {
|
|
3689
3698
|
margin-top: 2px;
|
|
@@ -3695,6 +3704,45 @@
|
|
|
3695
3704
|
margin-top: -1px;
|
|
3696
3705
|
}
|
|
3697
3706
|
|
|
3707
|
+
.tamga-alert[data-look="banner"] {
|
|
3708
|
+
border: 1.5px solid var(--color-edge-strong);
|
|
3709
|
+
border-radius: var(--radius-card);
|
|
3710
|
+
box-shadow: 4px 4px 0 var(--color-edge-strong);
|
|
3711
|
+
flex-wrap: wrap;
|
|
3712
|
+
gap: 16px;
|
|
3713
|
+
padding: 18px 20px;
|
|
3714
|
+
}
|
|
3715
|
+
|
|
3716
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-metin {
|
|
3717
|
+
flex: 1 1 9rem;
|
|
3718
|
+
min-width: 9rem;
|
|
3719
|
+
}
|
|
3720
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-metin + .tamga-alert-eylem,
|
|
3721
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-metin + .tamga-alert-kapat {
|
|
3722
|
+
margin-left: auto;
|
|
3723
|
+
}
|
|
3724
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-tile {
|
|
3725
|
+
border-radius: var(--radius-btn);
|
|
3726
|
+
height: 44px;
|
|
3727
|
+
width: 44px;
|
|
3728
|
+
}
|
|
3729
|
+
.tamga-alert[data-look="banner"] .tamga-alert-baslik {
|
|
3730
|
+
font-family: var(--font-display);
|
|
3731
|
+
font-size: var(--text-display-sm);
|
|
3732
|
+
font-weight: var(--weight-display);
|
|
3733
|
+
line-height: 1.2;
|
|
3734
|
+
margin-top: calc((44px - 1lh) / 2);
|
|
3735
|
+
}
|
|
3736
|
+
.tamga-alert[data-look="banner"] .tamga-alert-govde {
|
|
3737
|
+
font-size: var(--text-body);
|
|
3738
|
+
}
|
|
3739
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-eylem {
|
|
3740
|
+
margin-top: 6px;
|
|
3741
|
+
}
|
|
3742
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-kapat {
|
|
3743
|
+
margin-top: 7px;
|
|
3744
|
+
}
|
|
3745
|
+
|
|
3698
3746
|
.tamga-count-dot {
|
|
3699
3747
|
display: block;
|
|
3700
3748
|
width: 10px;
|
|
@@ -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;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,+
|
|
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"}
|
|
@@ -4,7 +4,7 @@ import { Breadcrumb } from "../components/primitives.js";
|
|
|
4
4
|
import { SkeletonPanel } from "../components/skeleton.js";
|
|
5
5
|
import { Busy, ErrorSlot, PlainLink, } from "./shared.js";
|
|
6
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-start gap-4 pt-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Breadcrumb, { label: labels.breadcrumb, items: breadcrumb }), _jsx("
|
|
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-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) => {
|
|
8
8
|
const current = tab.key === activeTab;
|
|
9
9
|
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));
|
|
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] })] }));
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED