tamga-ui 0.14.0 → 0.15.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 +32 -9
- package/dist/components/button.d.ts +2 -2
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +5 -0
- package/dist/components/gauge.d.ts +8 -1
- package/dist/components/gauge.d.ts.map +1 -1
- package/dist/components/gauge.js +7 -2
- package/dist/fonts.css +1 -1
- package/dist/kit.css +45 -6
- package/dist/patterns/app-shell.d.ts +11 -1
- package/dist/patterns/app-shell.d.ts.map +1 -1
- package/dist/patterns/app-shell.js +7 -7
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,34 @@ 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.15.0
|
|
9
|
+
|
|
10
|
+
> The shell takes a strip above everything; the caution gets its own button.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- **`Button` and `MiniButton` `variant="caution"`** · the step that clears a caution (verify an
|
|
15
|
+
address, renew a card), drawn like `success` and `danger`: the caution's ink as edge, text and
|
|
16
|
+
base, its soft tone on hover.
|
|
17
|
+
- **`AppShell` `banner`** · a strip above the whole shell, the rail and the top bar included, for
|
|
18
|
+
an account-wide condition the product will not let the reader overlook. The screen stays one
|
|
19
|
+
viewport tall.
|
|
20
|
+
|
|
21
|
+
## 0.14.1
|
|
22
|
+
|
|
23
|
+
> The score ring says the exact score; a banner's tile sits on the middle of its text.
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- **`ScoreRing` `display`** · the text inside the ring when the product says more than the whole
|
|
28
|
+
number ("66,3"). The arc still follows `value`; a text longer than "100" is set a step
|
|
29
|
+
smaller so it does not crowd the hole.
|
|
30
|
+
|
|
31
|
+
### Fixed
|
|
32
|
+
|
|
33
|
+
- **`Alert look="banner"`: the tile and the action sit on the middle of the text block.** Lined
|
|
34
|
+
up with the title, the tile stood above a two-line banner's text.
|
|
35
|
+
|
|
8
36
|
## 0.14.0
|
|
9
37
|
|
|
10
38
|
> A detail page's header reads as one block: the state beside the title, the actions beside the
|
|
@@ -709,15 +737,6 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
|
|
|
709
737
|
> A light palette takes the brand's hue, and two things a pointer could feel: a checkbox
|
|
710
738
|
> that flickered under hover and a two-line label that centred itself.
|
|
711
739
|
|
|
712
|
-
### Fixed
|
|
713
|
-
|
|
714
|
-
- **`Checkbox` no longer centres a two-line label.** It renders a `<button>`, and a browser centres
|
|
715
|
-
button text; every other choice surface in the kit already neutralises that (`RadioGroup`'s list
|
|
716
|
-
look, `.tamga-choice-card`), this one did not. A one-word label never showed it; a label with a
|
|
717
|
-
description under it did.
|
|
718
|
-
|
|
719
|
-
## Unreleased
|
|
720
|
-
|
|
721
740
|
### Changed
|
|
722
741
|
|
|
723
742
|
- **A light palette now carries the brand's hue.** `makePalette` fixed every light surface at hue
|
|
@@ -730,6 +749,10 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
|
|
|
730
749
|
|
|
731
750
|
### Fixed
|
|
732
751
|
|
|
752
|
+
- **`Checkbox` no longer centres a two-line label.** It renders a `<button>`, and a browser centres
|
|
753
|
+
button text; every other choice surface in the kit already neutralises that (`RadioGroup`'s list
|
|
754
|
+
look, `.tamga-choice-card`), this one did not. A one-word label never showed it; a label with a
|
|
755
|
+
description under it did.
|
|
733
756
|
- **A hovered checkbox no longer flickers.** The box lifts a pixel on hover, and the hover target
|
|
734
757
|
was the box itself: a pointer resting on its lower or right edge lost the box as it moved, the
|
|
735
758
|
hover ended, the box came back, the hover started again — a loop that does not stop, because the
|
|
@@ -5,7 +5,7 @@ import { type VariantProps } from "class-variance-authority";
|
|
|
5
5
|
* Gerekçe: docs/gerekce/06-isaret-ve-ton.md
|
|
6
6
|
*/
|
|
7
7
|
export declare const buttonVariants: (props?: ({
|
|
8
|
-
variant?: "danger" | "ghost" | "link" | "primary" | "quiet" | "secondary" | "soft" | "success" | null | undefined;
|
|
8
|
+
variant?: "caution" | "danger" | "ghost" | "link" | "primary" | "quiet" | "secondary" | "soft" | "success" | null | undefined;
|
|
9
9
|
size?: "base" | "lg" | "sm" | null | undefined;
|
|
10
10
|
full?: boolean | null | undefined;
|
|
11
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -53,7 +53,7 @@ export declare function IconButton({ className, size, variant, "aria-label": lab
|
|
|
53
53
|
"aria-label": string;
|
|
54
54
|
}): import("react").JSX.Element;
|
|
55
55
|
export declare const miniButtonVariants: (props?: ({
|
|
56
|
-
variant?: "primary" | "quiet" | "secondary" | "soft" | null | undefined;
|
|
56
|
+
variant?: "caution" | "primary" | "quiet" | "secondary" | "soft" | null | undefined;
|
|
57
57
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
58
58
|
/** Ailenin en sıkı üyesi: 28px, 2px taban, ve hover'da kenarı vurguya dönüyor. */
|
|
59
59
|
export declare function MiniButton({ className, variant, "aria-label": label, ...props }: React.ComponentProps<"button"> & VariantProps<typeof miniButtonVariants> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EA2CzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3D,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAID,eAAO,MAAM,kBAAkB;;;8EAoB7B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,eAAO,MAAM,kBAAkB;;8EAa7B,CAAC;AAEH,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE"}
|
|
@@ -22,6 +22,9 @@ export const buttonVariants = cva("tamga-btn", {
|
|
|
22
22
|
success: "tamga-btn-success",
|
|
23
23
|
/* destructive: findable and deliberate, not loud */
|
|
24
24
|
danger: "tamga-btn-danger",
|
|
25
|
+
/* the step that clears a caution (verify an address, renew a card): the caution's ink as an
|
|
26
|
+
edge, like success and danger, never a fill */
|
|
27
|
+
caution: "tamga-btn-caution",
|
|
25
28
|
/* no edge, no offset, no lift — it is not an object on the page */
|
|
26
29
|
ghost: "tamga-btn-ghost",
|
|
27
30
|
/* reads as a link, behaves as a button. For a click that runs code but
|
|
@@ -92,6 +95,8 @@ export const miniButtonVariants = cva("tamga-mini-btn", {
|
|
|
92
95
|
soft: "tamga-mini-btn-soft",
|
|
93
96
|
/* bir satırda üç eylem varsa üçü birden nesne olamaz */
|
|
94
97
|
quiet: "tamga-mini-btn-quiet",
|
|
98
|
+
/* bir uyarıyı kapatan adım, uyarının içinde: kenar ve taban uyarının mürekkebi */
|
|
99
|
+
caution: "tamga-mini-btn-caution",
|
|
95
100
|
},
|
|
96
101
|
},
|
|
97
102
|
defaultVariants: { variant: "secondary" },
|
|
@@ -50,7 +50,14 @@ export type ScoreProps = {
|
|
|
50
50
|
*
|
|
51
51
|
* Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
|
|
52
52
|
*/
|
|
53
|
-
export declare function ScoreRing({ value, label, bandLabel, size, showLabel, tone, ...rest }: ScoreProps & {
|
|
53
|
+
export declare function ScoreRing({ value, label, bandLabel, size, showLabel, tone, display, ...rest }: ScoreProps & {
|
|
54
|
+
/**
|
|
55
|
+
* The text inside the ring, when the whole number is not what the product says ("66,3" in the
|
|
56
|
+
* caller's locale). The arc still follows `value`. Omitted, the rounded value. TR: Halkanın
|
|
57
|
+
* içindeki metin, ürün tam sayıyı söylemiyorsa (çağıranın dilinde "66,3"). Yay yine `value`'yu
|
|
58
|
+
* izliyor. Verilmezse yuvarlanmış değer.
|
|
59
|
+
*/
|
|
60
|
+
display?: string;
|
|
54
61
|
[k: `data-${string}`]: unknown;
|
|
55
62
|
}): import("react").JSX.Element;
|
|
56
63
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/components/gauge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAQ9C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAcF;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAS,EACT,SAAgB,EAChB,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,UAAU,GAAG;
|
|
1
|
+
{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/components/gauge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAQ9C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAcF;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAS,EACT,SAAgB,EAChB,IAAI,EACJ,OAAO,EACP,GAAG,IAAI,EACR,EAAE,UAAU,GAAG;IACd;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiCA;AAID;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAW,EACX,IAAI,EACJ,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1D,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAsCA;AAcD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,MAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IAC1F,mGAAmG;IACnG,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sHAAsH;IACtH,KAAK,EAAE,MAAM,CAAC;IACd,sHAAsH;IACtH,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4CA"}
|
package/dist/components/gauge.js
CHANGED
|
@@ -23,15 +23,20 @@ function band(v) {
|
|
|
23
23
|
*
|
|
24
24
|
* Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
|
|
25
25
|
*/
|
|
26
|
-
export function ScoreRing({ value, label, bandLabel, size = 96, showLabel = true, tone, ...rest }) {
|
|
26
|
+
export function ScoreRing({ value, label, bandLabel, size = 96, showLabel = true, tone, display, ...rest }) {
|
|
27
27
|
const v = Math.min(100, Math.max(0, value));
|
|
28
28
|
const c = toneOf(tone ?? band(v));
|
|
29
|
+
const text = display ?? String(Math.round(v));
|
|
30
|
+
/* "100" is the widest a whole score gets; a longer text ("66,3") at the same size crowded the
|
|
31
|
+
hole, so it steps down. TR: Tam puanın en genişi "100"; daha uzun metin ("66,3") aynı boyda
|
|
32
|
+
deliği dolduruyordu, bir kademe küçülüyor. */
|
|
33
|
+
const scale = text.length > 3 ? 0.2 : 0.25;
|
|
29
34
|
return (_jsxs("div", { ...dataProps(rest), className: "tamga-ring-wrap", children: [_jsx("div", { className: "tamga-ring", role: "img", "aria-label": label, style: {
|
|
30
35
|
width: size,
|
|
31
36
|
height: size,
|
|
32
37
|
"--ring-renk": c.mark,
|
|
33
38
|
"--ring-yay": `${v * 3.6}deg`,
|
|
34
|
-
}, children: _jsx("span", { className: "tamga-ring-ic", style: { fontSize: Math.round(size *
|
|
39
|
+
}, children: _jsx("span", { className: "tamga-ring-ic", style: { fontSize: Math.round(size * scale) }, children: text }) }), showLabel && bandLabel ? _jsx("span", { className: "tamga-ring-etiket", children: bandLabel }) : null] }));
|
|
35
40
|
}
|
|
36
41
|
/* ---------- B · Meter — the same reading, laid flat ---------- */
|
|
37
42
|
/**
|
package/dist/fonts.css
CHANGED
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.15.0 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -242,6 +242,10 @@
|
|
|
242
242
|
border-radius: var(--radius-panel);
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
+
.tamga-app-banner {
|
|
246
|
+
flex-shrink: 0;
|
|
247
|
+
}
|
|
248
|
+
|
|
245
249
|
.tamga-card {
|
|
246
250
|
border-radius: var(--radius-card);
|
|
247
251
|
border: 1px solid var(--color-edge);
|
|
@@ -697,6 +701,16 @@
|
|
|
697
701
|
transform: translate(3px, 3px);
|
|
698
702
|
box-shadow: 0 0 0 var(--color-critical);
|
|
699
703
|
}
|
|
704
|
+
.tamga-btn-caution.tamga-btn-sm {
|
|
705
|
+
box-shadow: 3px 3px 0 var(--color-warn);
|
|
706
|
+
}
|
|
707
|
+
.tamga-btn-caution.tamga-btn-sm:not(:disabled):hover {
|
|
708
|
+
box-shadow: 4px 4px 0 var(--color-warn);
|
|
709
|
+
}
|
|
710
|
+
.tamga-btn-caution.tamga-btn-sm:not(:disabled):active {
|
|
711
|
+
transform: translate(3px, 3px);
|
|
712
|
+
box-shadow: 0 0 0 var(--color-warn);
|
|
713
|
+
}
|
|
700
714
|
|
|
701
715
|
.tamga-btn-primary {
|
|
702
716
|
background: var(--color-accent);
|
|
@@ -754,6 +768,20 @@
|
|
|
754
768
|
box-shadow: 0 0 0 var(--color-critical);
|
|
755
769
|
}
|
|
756
770
|
|
|
771
|
+
.tamga-btn-caution {
|
|
772
|
+
background: var(--color-shell);
|
|
773
|
+
border-color: var(--color-warn);
|
|
774
|
+
color: var(--color-warn);
|
|
775
|
+
box-shadow: 4px 4px 0 var(--color-warn);
|
|
776
|
+
}
|
|
777
|
+
.tamga-btn-caution:not(:disabled):hover {
|
|
778
|
+
background: var(--color-warn-bg);
|
|
779
|
+
box-shadow: 5px 5px 0 var(--color-warn);
|
|
780
|
+
}
|
|
781
|
+
.tamga-btn-caution:not(:disabled):active {
|
|
782
|
+
box-shadow: 0 0 0 var(--color-warn);
|
|
783
|
+
}
|
|
784
|
+
|
|
757
785
|
.tamga-btn-ghost {
|
|
758
786
|
background: transparent;
|
|
759
787
|
border-color: transparent;
|
|
@@ -1604,6 +1632,18 @@
|
|
|
1604
1632
|
box-shadow: 2px 2px 0 var(--color-edge-strong);
|
|
1605
1633
|
}
|
|
1606
1634
|
|
|
1635
|
+
.tamga-mini-btn-caution {
|
|
1636
|
+
border-color: var(--color-warn);
|
|
1637
|
+
color: var(--color-warn);
|
|
1638
|
+
box-shadow: 2px 2px 0 var(--color-warn);
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
.tamga-mini-btn.tamga-mini-btn-caution:not(:disabled):hover {
|
|
1642
|
+
background: var(--color-warn-bg);
|
|
1643
|
+
border-color: var(--color-warn);
|
|
1644
|
+
box-shadow: 2px 2px 0 var(--color-warn);
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1607
1647
|
.tamga-mini-btn-quiet {
|
|
1608
1648
|
border-color: var(--color-line);
|
|
1609
1649
|
background: transparent;
|
|
@@ -3718,6 +3758,7 @@
|
|
|
3718
3758
|
}
|
|
3719
3759
|
|
|
3720
3760
|
.tamga-alert[data-look="banner"] {
|
|
3761
|
+
align-items: center;
|
|
3721
3762
|
border: 1.5px solid var(--color-edge-strong);
|
|
3722
3763
|
border-radius: var(--radius-card);
|
|
3723
3764
|
box-shadow: 4px 4px 0 var(--color-edge-strong);
|
|
@@ -3744,16 +3785,14 @@
|
|
|
3744
3785
|
font-size: var(--text-display-sm);
|
|
3745
3786
|
font-weight: var(--weight-display);
|
|
3746
3787
|
line-height: 1.2;
|
|
3747
|
-
margin-top:
|
|
3788
|
+
margin-top: 0;
|
|
3748
3789
|
}
|
|
3749
3790
|
.tamga-alert[data-look="banner"] .tamga-alert-govde {
|
|
3750
3791
|
font-size: var(--text-body);
|
|
3751
3792
|
}
|
|
3752
|
-
.tamga-alert[data-look="banner"] > .tamga-alert-eylem
|
|
3753
|
-
margin-top: 6px;
|
|
3754
|
-
}
|
|
3793
|
+
.tamga-alert[data-look="banner"] > .tamga-alert-eylem,
|
|
3755
3794
|
.tamga-alert[data-look="banner"] > .tamga-alert-kapat {
|
|
3756
|
-
margin-top:
|
|
3795
|
+
margin-top: 0;
|
|
3757
3796
|
}
|
|
3758
3797
|
|
|
3759
3798
|
.tamga-count-dot {
|
|
@@ -69,6 +69,16 @@ export type AppShellProps = {
|
|
|
69
69
|
* yalnız yerini garanti ediyor.
|
|
70
70
|
*/
|
|
71
71
|
topbar?: ReactNode;
|
|
72
|
+
/**
|
|
73
|
+
* A strip above the whole shell, the rail and the top bar included: an account-wide condition
|
|
74
|
+
* the product will not let the reader overlook (an unverified address, a lapsed payment). The
|
|
75
|
+
* content and its tone are the caller's; the shell gives it the full width and keeps the screen
|
|
76
|
+
* one viewport tall. One strip, never a stack. TR: Kabuğun tamamının, ray ve üst şerit dahil,
|
|
77
|
+
* üstünde bir şerit: ürünün gözden kaçmasına izin vermediği hesap çapında bir durum (doğrulanmamış
|
|
78
|
+
* adres, aksamış ödeme). İçerik ve tonu çağıranın; kabuk ona tam genişliği veriyor ve ekranı tek
|
|
79
|
+
* görüntü boyunda tutuyor. Tek şerit, asla yığın.
|
|
80
|
+
*/
|
|
81
|
+
banner?: ReactNode;
|
|
72
82
|
/** A control at the foot of the rail: an expand/collapse button, say. TR: Rayın dibine giren kontrol: genişlet/daralt düğmesi gibi. */
|
|
73
83
|
railFooter?: ReactNode;
|
|
74
84
|
/**
|
|
@@ -104,5 +114,5 @@ export type AppShellProps = {
|
|
|
104
114
|
};
|
|
105
115
|
children: ReactNode;
|
|
106
116
|
};
|
|
107
|
-
export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, mainClassName, linkComponent: Link, collapsibleSections, collapsedSections, onSectionToggle, labels, children, }: AppShellProps): import("react").JSX.Element;
|
|
117
|
+
export declare function AppShell({ brand, nav, activePath, rail, topbar, banner, railFooter, mainClassName, linkComponent: Link, collapsibleSections, collapsedSections, onSectionToggle, labels, children, }: AppShellProps): import("react").JSX.Element;
|
|
108
118
|
//# sourceMappingURL=app-shell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,sHAAsH;IACtH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EAAE,IAAgB,EAC/B,mBAA0B,EAC1B,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+
|
|
1
|
+
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,sHAAsH;IACtH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EAAE,IAAgB,EAC/B,mBAA0B,EAC1B,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAoLf"}
|
|
@@ -6,7 +6,7 @@ import { CaretDown } from "../components/icons.js";
|
|
|
6
6
|
import { RailLink } from "../components/rail-link.js";
|
|
7
7
|
import { cn } from "../lib/cn.js";
|
|
8
8
|
import { PlainLink } from "./shared.js";
|
|
9
|
-
export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, mainClassName, linkComponent: Link = PlainLink, collapsibleSections = true, collapsedSections, onSectionToggle, labels, children, }) {
|
|
9
|
+
export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, banner, railFooter, mainClassName, linkComponent: Link = PlainLink, collapsibleSections = true, collapsedSections, onSectionToggle, labels, children, }) {
|
|
10
10
|
/* Bir giriş kendi alt ağacına sahip, ve EN UZUN EŞLEŞEN KAZANIR: kökün `/`
|
|
11
11
|
olmadığı bir panelde kök giriş altındaki her rotayı yutuyordu.
|
|
12
12
|
Gerekçe: docs/gerekce/08-blok-ve-sablon.md */
|
|
@@ -45,10 +45,10 @@ export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, rail
|
|
|
45
45
|
gruplar.push({ bolum: entry.section, girisler: [entry] });
|
|
46
46
|
}
|
|
47
47
|
const kimlik = useId();
|
|
48
|
-
return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-rail text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-rail py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: gruplar.map((grup, gi) => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
return (_jsxs("div", { className: "flex h-dvh w-full flex-col overflow-hidden bg-rail text-ink-soft", children: [banner ? _jsx("div", { className: "tamga-app-banner", children: banner }) : null, _jsxs("div", { className: "flex min-h-0 w-full flex-1", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-rail py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: gruplar.map((grup, gi) => {
|
|
49
|
+
const id = `${kimlik}-${gi}`;
|
|
50
|
+
const acik = grup.bolum ? acikMi(grup.bolum) : true;
|
|
51
|
+
const kilitli = grup.bolum !== undefined && grup.bolum === aktifBolum;
|
|
52
|
+
return (_jsxs(Fragment, { children: [grup.bolum ? (wide ? (collapsibleSections ? (_jsxs("button", { type: "button", className: cn("tamga-rail-section", gi > 0 && "mt-3"), "aria-expanded": acik, "aria-controls": id, "aria-disabled": kilitli || undefined, "data-locked": kilitli || undefined, onClick: () => degistir(grup.bolum), children: [grup.bolum, _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "tamga-rail-section-caret" })] })) : (_jsx("p", { className: `px-2.5 text-caption font-bold uppercase tracking-label text-ink-faint ${gi > 0 ? "mt-5 pb-1.5" : "pb-1.5"}`, children: grup.bolum }))) : gi > 0 ? (_jsx("span", { className: "my-1.5 h-0 w-6 shrink-0 border-t border-line", "aria-hidden": true })) : null) : null, _jsx("div", { id: id, className: "tamga-rail-group-body", "data-open": acik, inert: !acik, children: _jsx("div", { className: wide ? undefined : "items-center", children: grup.girisler.map((entry) => (_jsx(RailLink, { href: entry.href, onClick: entry.onSelect, label: entry.label, active: isCurrent(entry), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "md", weight: isCurrent(entry) ? "fill" : "regular" }) }, entry.key))) }) })] }, grup.bolum ?? `_${gi}`));
|
|
53
|
+
}) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 bg-band py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: cn("tamga-surface tamga-app-main relative h-full min-h-0 overflow-y-auto", mainClassName), children: children }) })] })] })] }));
|
|
54
54
|
}
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED