tamga-ui 0.3.2 → 0.4.1
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 +100 -0
- package/dist/components/advanced-input.d.ts +7 -1
- package/dist/components/advanced-input.d.ts.map +1 -1
- package/dist/components/advanced-input.js +3 -2
- package/dist/components/display.d.ts +26 -4
- package/dist/components/display.d.ts.map +1 -1
- package/dist/components/display.js +4 -5
- package/dist/components/radio-group.d.ts +22 -3
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +3 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/kit.css +65 -1
- package/dist/patterns/app-shell.d.ts +15 -0
- package/dist/patterns/app-shell.d.ts.map +1 -1
- package/dist/patterns/app-shell.js +2 -1
- package/dist/patterns/wizard-template.d.ts +11 -5
- package/dist/patterns/wizard-template.d.ts.map +1 -1
- package/dist/patterns/wizard-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,106 @@ 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.4.1
|
|
9
|
+
|
|
10
|
+
Two gaps that products had been paying for, both found by a gate that asks a product not to
|
|
11
|
+
hand-write a kit class. Each one had pushed a caller off the component entirely.
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **An accessibility invariant suite.** Twenty-three renders, three invariants: every interactive
|
|
16
|
+
element has an accessible name, no `aria-hidden` subtree hides something focusable, and role pairs
|
|
17
|
+
are complete (`radio` inside `radiogroup`, `tab` inside `tablist`, `option` inside `listbox`).
|
|
18
|
+
|
|
19
|
+
This is not an axe sweep and does not claim to be. The previous sweep ran over a consuming
|
|
20
|
+
product's stories and disappeared with them, which was the wrong home for it: a promise the
|
|
21
|
+
library makes has to be measured in the library. What is not covered is written at the top of the
|
|
22
|
+
file — contrast (a separate gate already measures it), focus order, live-region behaviour, and any
|
|
23
|
+
component the suite does not render.
|
|
24
|
+
|
|
25
|
+
- **`RadioGroup` options carry their own attributes.** Anything beyond `value` and `label` lands on
|
|
26
|
+
that option's button. The sibling components for picking one of several things had carried
|
|
27
|
+
per-option hooks since 0.3.1 and 0.4.0; this one had not, so a caller who needed to point at a
|
|
28
|
+
single choice left the component behind and hand-wrote the class, which meant leaving the role and
|
|
29
|
+
the keyboard behind with it. The kit's own attributes are written after the caller's, so a hook
|
|
30
|
+
cannot overwrite `aria-checked`.
|
|
31
|
+
|
|
32
|
+
- **`AppShell` draws section headings.** `NavEntry` takes an optional `section`; the rail groups
|
|
33
|
+
consecutive entries by it and draws a heading when the group changes. Wide rails only: in a 40px
|
|
34
|
+
box a heading does not read, and there grouping is carried by spacing.
|
|
35
|
+
|
|
36
|
+
A panel whose menu is split into seven named groups could not express that, so it drew its own
|
|
37
|
+
rail and left behind everything the template brings. The field is flat rather than a nested list
|
|
38
|
+
of groups, for two reasons: nesting would have been a breaking change, and a nested shape makes an
|
|
39
|
+
empty group possible. Here a heading exists only if an entry has one.
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
**A step now has an identity of its own.** `Steps` took a plain `readonly string[]`, so a step was
|
|
44
|
+
nothing but its translated label. Two consequences followed, and both were silent.
|
|
45
|
+
|
|
46
|
+
The React key was the label. Change the language and every step becomes, to React, a different
|
|
47
|
+
element: the old node is torn down and a new one built in its place. Nothing looks wrong, but
|
|
48
|
+
anything holding on to that node goes with it. Two steps sharing a label collided the same way.
|
|
49
|
+
|
|
50
|
+
And there was no way to reach a single step. A caller who needed to point at one, to test it or to
|
|
51
|
+
style it, had nothing to point with; the only thing in the DOM that told steps apart was the
|
|
52
|
+
translated text, which is the one thing that changes underneath a test. The sibling component for
|
|
53
|
+
picking one of several options had carried per-option hooks since 0.3.1. The step strip had not,
|
|
54
|
+
and a gate exemption recorded that gap as though it were a decision.
|
|
55
|
+
|
|
56
|
+
### Breaking
|
|
57
|
+
|
|
58
|
+
- **`Steps.steps`** is now `readonly Step[]` instead of `readonly string[]`, where
|
|
59
|
+
`Step = { key: string; label: string } & Record<string, unknown>`. Anything beyond `key` and
|
|
60
|
+
`label` lands on that step's `<li>`.
|
|
61
|
+
|
|
62
|
+
```diff
|
|
63
|
+
- <Steps steps={["Details", "Connection", "Done"]} current={1} />
|
|
64
|
+
+ <Steps
|
|
65
|
+
+ steps={[
|
|
66
|
+
+ { key: "details", label: "Details" },
|
|
67
|
+
+ { key: "connection", label: "Connection" },
|
|
68
|
+
+ { key: "done", label: "Done" },
|
|
69
|
+
+ ]}
|
|
70
|
+
+ current={1}
|
|
71
|
+
+ />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The key is an identifier, so it is not translated; the label is. A caller that already had keys
|
|
75
|
+
for its steps passes them straight through.
|
|
76
|
+
|
|
77
|
+
- **`WizardStep` is now an alias of `Step`.** It was a second declaration of the same shape, and
|
|
78
|
+
the template flattened it to labels before drawing the strip, which is exactly where the identity
|
|
79
|
+
was being dropped. Code that already builds `{ key, label }` objects needs no change.
|
|
80
|
+
|
|
81
|
+
### Added
|
|
82
|
+
|
|
83
|
+
- **`RadioGroup.look`** — `list` (default), `chip` or `card`. Only the shell changes: the role, the
|
|
84
|
+
mark, the keyboard behaviour and `aria-checked` are identical in all three, and the selected shell
|
|
85
|
+
takes an outline and a hard offset rather than a fill.
|
|
86
|
+
|
|
87
|
+
The card shape was missing, so a product that wanted "one of N, drawn as cards" built it from a
|
|
88
|
+
stack of bare buttons. The picture came out right and the meaning did not: a screen reader
|
|
89
|
+
announced three separate buttons instead of one choice among three. Rebuilding the role and the
|
|
90
|
+
keyboard at every call site is work, and it is done incompletely every time.
|
|
91
|
+
|
|
92
|
+
A second line goes inside `label`, which is already a `ReactNode`. There is no separate `hint`
|
|
93
|
+
field, because a prop that means something in only one shell is a lie told to everyone reading the
|
|
94
|
+
props table.
|
|
95
|
+
|
|
96
|
+
- **`PasswordInput.invalid`** — the sibling text field had it, this one did not, so a caller marking
|
|
97
|
+
a wrong password had to write the kit's class by hand. The class is only half of it: the hand-written
|
|
98
|
+
route never carried `aria-invalid`, so the error was visible and never announced.
|
|
99
|
+
|
|
100
|
+
### Fixed
|
|
101
|
+
|
|
102
|
+
- The step strip no longer remounts its list items when labels change.
|
|
103
|
+
|
|
104
|
+
- **`PasswordInput` now reads the kit's own class table** instead of writing `tamga-input` by hand.
|
|
105
|
+
A rule added to the table reached every text field except this one, which is the same defect the
|
|
106
|
+
library asks its consumers not to introduce.
|
|
107
|
+
|
|
8
108
|
## 0.3.2
|
|
9
109
|
|
|
10
110
|
**Every component that draws a host element now accepts `data-*`.** 98 of them; before this, 79 did
|
|
@@ -3,11 +3,17 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
5
5
|
*/
|
|
6
|
-
export declare function PasswordInput({ labels, className, ...props }: Omit<React.ComponentProps<"input">, "type"> & {
|
|
6
|
+
export declare function PasswordInput({ labels, invalid, className, ...props }: Omit<React.ComponentProps<"input">, "type"> & {
|
|
7
7
|
labels: {
|
|
8
8
|
show: string;
|
|
9
9
|
hide: string;
|
|
10
10
|
};
|
|
11
|
+
/**
|
|
12
|
+
* The field failed validation: it takes the error edge and sets `aria-invalid`, so the failure is
|
|
13
|
+
* announced as well as shown. TR: Alan doğrulamadan geçemedi: hata kenarını alıyor ve
|
|
14
|
+
* `aria-invalid` koyuyor, yani hata görünmekle kalmıyor duyuruluyor da.
|
|
15
|
+
*/
|
|
16
|
+
invalid?: boolean;
|
|
11
17
|
}): import("react").JSX.Element;
|
|
12
18
|
/**
|
|
13
19
|
* Maskeli sır — API anahtarı, webhook secret.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useId, useRef, useState } from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { inputVariants } from "./input.js";
|
|
5
6
|
import { dataProps } from "../lib/data-props.js";
|
|
6
7
|
import { Icon } from "./icon.js";
|
|
7
8
|
import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
|
|
@@ -16,9 +17,9 @@ import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
|
|
|
16
17
|
*
|
|
17
18
|
* Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
18
19
|
*/
|
|
19
|
-
export function PasswordInput({ labels, className, ...props }) {
|
|
20
|
+
export function PasswordInput({ labels, invalid = false, className, ...props }) {
|
|
20
21
|
const [shown, setShown] = useState(false);
|
|
21
|
-
return (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", {
|
|
22
|
+
return (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", { type: shown ? "text" : "password", "aria-invalid": invalid || undefined, className: cn(inputVariants({ invalid }), "w-full pr-11", className), ...props }), _jsx("button", { type: "button", className: "tamga-field-btn", "aria-label": shown ? labels.hide : labels.show, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) })] }));
|
|
22
23
|
}
|
|
23
24
|
/**
|
|
24
25
|
* Maskeli sır — API anahtarı, webhook secret.
|
|
@@ -174,12 +174,28 @@ export declare function Badge({ count, max, tone, label, className, children, ..
|
|
|
174
174
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
175
175
|
[k: `data-${string}`]: unknown;
|
|
176
176
|
}): import("react").JSX.Element;
|
|
177
|
+
/**
|
|
178
|
+
* Bir adım: kimliği ve çevrilmiş etiketi.
|
|
179
|
+
*
|
|
180
|
+
* KİMLİK ETİKETTEN AYRI, ve bu bir kolaylık değil bir düzeltme. Adım listesi
|
|
181
|
+
* bir zamanlar düz `string[]` idi: kimlik yoktu, React anahtarı ÇEVRİLMİŞ
|
|
182
|
+
* ETİKETTİ, ve iki adım aynı etiketi taşıdığında ya da dil değiştiğinde
|
|
183
|
+
* düğümler yeniden kuruluyordu. Kitin kendi kuralı bunu zaten söylüyor:
|
|
184
|
+
* bir öğenin adı etiketi değildir, çünkü etiket çevrilir ve değişir.
|
|
185
|
+
*
|
|
186
|
+
* `key` ve `label` DIŞINDAKİ her şey o adımın `<li>`sine iniyor, yani bir
|
|
187
|
+
* adım testin ya da stilin ihtiyaç duyduğu kancayı taşıyabiliyor. Kardeşi
|
|
188
|
+
* `Segmented` ile aynı sözleşme; ikisinin farklı olması bir asimetriydi.
|
|
189
|
+
*/
|
|
190
|
+
export type Step = {
|
|
191
|
+
key: string;
|
|
192
|
+
label: string;
|
|
193
|
+
} & Record<string, unknown>;
|
|
177
194
|
/**
|
|
178
195
|
* Adım göstergesi.
|
|
179
196
|
*
|
|
180
|
-
*
|
|
181
|
-
*
|
|
182
|
-
* varlık sebebi tam olarak budur.
|
|
197
|
+
* Bir sihirbazın adım göstergesi yoksa kullanıcı kaçıncı adımda olduğunu ve
|
|
198
|
+
* kaç adım kaldığını bilmiyor; sihirbazın varlık sebebi tam olarak budur.
|
|
183
199
|
*
|
|
184
200
|
* `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
|
|
185
201
|
* "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
|
|
@@ -189,7 +205,13 @@ export declare function Badge({ count, max, tone, label, className, children, ..
|
|
|
189
205
|
* ayrı iki soru.
|
|
190
206
|
*/
|
|
191
207
|
export declare function Steps({ steps, current, className, ...rest }: {
|
|
192
|
-
|
|
208
|
+
/**
|
|
209
|
+
* The steps, in order. Anything beyond `key` and `label` lands on that step's `<li>`, so a step
|
|
210
|
+
* can carry the hook a test or a style needs. TR: Adımlar, sırasıyla. `key` ve `label` dışındaki
|
|
211
|
+
* her şey o adımın `<li>`sine iniyor, yani bir adım testin ya da stilin ihtiyaç duyduğu kancayı
|
|
212
|
+
* taşıyabiliyor.
|
|
213
|
+
*/
|
|
214
|
+
steps: readonly Step[];
|
|
193
215
|
/** The active step, counting from zero. TR: Sıfırdan sayan aktif adım. */
|
|
194
216
|
current: number;
|
|
195
217
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"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"}
|
|
@@ -174,9 +174,8 @@ export function Badge({ count, max = 99, tone = "danger", label, className, chil
|
|
|
174
174
|
/**
|
|
175
175
|
* Adım göstergesi.
|
|
176
176
|
*
|
|
177
|
-
*
|
|
178
|
-
*
|
|
179
|
-
* varlık sebebi tam olarak budur.
|
|
177
|
+
* Bir sihirbazın adım göstergesi yoksa kullanıcı kaçıncı adımda olduğunu ve
|
|
178
|
+
* kaç adım kaldığını bilmiyor; sihirbazın varlık sebebi tam olarak budur.
|
|
180
179
|
*
|
|
181
180
|
* `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
|
|
182
181
|
* "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
|
|
@@ -186,9 +185,9 @@ export function Badge({ count, max = 99, tone = "danger", label, className, chil
|
|
|
186
185
|
* ayrı iki soru.
|
|
187
186
|
*/
|
|
188
187
|
export function Steps({ steps, current, className, ...rest }) {
|
|
189
|
-
return (_jsx("ol", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), children: steps.map((
|
|
188
|
+
return (_jsx("ol", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), children: steps.map(({ key, label, ...adimRest }, i) => {
|
|
190
189
|
const done = i < current;
|
|
191
190
|
const active = i === current;
|
|
192
|
-
return (_jsxs("li", { className: "flex items-center gap-3", children: [_jsx("span", { className: "tamga-step-mark font-mono text-caption", "data-state": done ? "done" : active ? "current" : "todo", "aria-hidden": true, children: done ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : i + 1 }), _jsx("span", { className: cn("text-small", active ? "font-medium text-ink" : "text-ink-faint"), "aria-current": active ? "step" : undefined, children:
|
|
191
|
+
return (_jsxs("li", { ...adimRest, className: "flex items-center gap-3", children: [_jsx("span", { className: "tamga-step-mark font-mono text-caption", "data-state": done ? "done" : active ? "current" : "todo", "aria-hidden": true, children: done ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : i + 1 }), _jsx("span", { className: cn("text-small", active ? "font-medium text-ink" : "text-ink-faint"), "aria-current": active ? "step" : undefined, children: label }), i < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "tamga-step-line", "data-done": done ? "true" : "false" })) : null] }, key));
|
|
193
192
|
}) }));
|
|
194
193
|
}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
export declare function RadioGroup<T extends string>({ options, value, onChange, label, disabled, className, ...rest }: {
|
|
3
|
-
|
|
2
|
+
export declare function RadioGroup<T extends string>({ options, value, onChange, label, look, disabled, className, ...rest }: {
|
|
3
|
+
/**
|
|
4
|
+
* The choices. Anything beyond `value` and `label` lands on that option's button, so a choice can
|
|
5
|
+
* carry the hook a test or a style needs. TR: Seçenekler. `value` ve `label` dışındaki her şey o
|
|
6
|
+
* seçeneğin düğmesine iniyor, yani bir seçenek testin ya da stilin ihtiyaç duyduğu kancayı
|
|
7
|
+
* taşıyabiliyor.
|
|
8
|
+
*/
|
|
9
|
+
options: readonly ({
|
|
4
10
|
value: T;
|
|
5
11
|
label: ReactNode;
|
|
6
|
-
}[];
|
|
12
|
+
} & Record<string, unknown>)[];
|
|
7
13
|
value: T;
|
|
8
14
|
onChange?: (next: T) => void;
|
|
9
15
|
/**
|
|
@@ -11,6 +17,19 @@ export declare function RadioGroup<T extends string>({ options, value, onChange,
|
|
|
11
17
|
* adı: "hangi seçeneklerden biri" sorusunun cevabı.
|
|
12
18
|
*/
|
|
13
19
|
label: string;
|
|
20
|
+
/**
|
|
21
|
+
* The shell each option is drawn in. TR: Her seçeneğin çizildiği kabuk.
|
|
22
|
+
*
|
|
23
|
+
* `list` alt alta, işaret ve etiket; `chip` yan yana sarılan küçük kabuklar; `card` ikinci bir
|
|
24
|
+
* satır taşıyacak kadar yer veren bir kart yüzeyi.
|
|
25
|
+
*
|
|
26
|
+
* Değişen yalnız kabuk: `role="radiogroup"`, `role="radio"`, `aria-checked` ve klavye davranışı
|
|
27
|
+
* üçünde de aynı. Seçili kabuk çerçeve ve sert offset alıyor, dolgu değil (Yasa 2).
|
|
28
|
+
*
|
|
29
|
+
* İkinci satır `label`in içine yazılıyor; ayrı bir `hint` alanı yok, çünkü etiket zaten
|
|
30
|
+
* `ReactNode` ve yalnız tek bir kabukta anlamı olan bir prop props tablosunda herkese görünürdü.
|
|
31
|
+
*/
|
|
32
|
+
look?: "list" | "chip" | "card";
|
|
14
33
|
disabled?: boolean;
|
|
15
34
|
className?: string;
|
|
16
35
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAa,EACb,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;;;OAKG;IACH,OAAO,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IAC/E,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmDA"}
|
|
@@ -9,8 +9,8 @@ import { OFF } from "./control-base.js";
|
|
|
9
9
|
* Grubun kendisi `role="radiogroup"`, satırlar `role="radio"`. İkisi birden
|
|
10
10
|
* olmadan ekran okuyucu "üç ayrı düğme" duyurur, "üç seçenekten biri" değil.
|
|
11
11
|
* ---------------------------------------------------------------- */
|
|
12
|
-
export function RadioGroup({ options, value, onChange, label, disabled = false, className, ...rest }) {
|
|
13
|
-
return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": label, className: cn("flex flex-col gap-2", className), children: options.map((
|
|
12
|
+
export function RadioGroup({ options, value, onChange, label, look = "list", disabled = false, className, ...rest }) {
|
|
13
|
+
return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": label, "data-look": look, className: cn(look === "list" ? "flex flex-col gap-2" : "flex flex-wrap gap-2", look === "card" && "sm:grid sm:grid-cols-3", className), children: options.map(({ value: v, label: etiket, ...rest }) => (_jsxs("button", { type: "button", ...rest, role: "radio", "aria-checked": value === v, "aria-disabled": disabled || undefined, onClick: () => !disabled && onChange?.(v),
|
|
14
14
|
/* ÜSTTEN HİZALI VE TAM GENİŞLİK, ve ikisi de iki satırlık bir
|
|
15
15
|
seçenek yüzünden değişti.
|
|
16
16
|
`items-center` tek satırlık etiketlerde doğru duruyordu; altına
|
|
@@ -20,5 +20,5 @@ export function RadioGroup({ options, value, onChange, label, disabled = false,
|
|
|
20
20
|
erkenden sarıyor ve seçenekler farklı genişliklerde tırtıklı bir
|
|
21
21
|
sütun oluşturuyordu. Tam genişlik hepsini aynı sol kenara ve aynı
|
|
22
22
|
sarma noktasına oturtuyor. */
|
|
23
|
-
className: "flex w-full items-start gap-2 text-left
|
|
23
|
+
className: cn("text-body", look === "list" && "flex w-full items-start gap-2 text-left", look === "chip" && "tamga-choice-chip", look === "card" && "tamga-choice-card"), style: disabled ? OFF : undefined, children: [_jsx("span", { className: cn("tamga-radio", look !== "chip" && "tamga-choice-mark"), "data-checked": value === v }), _jsx("span", { className: "min-w-0 flex-1", children: etiket })] }, v))) }));
|
|
24
24
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -47,7 +47,7 @@ export { prepareImage, cropSquare, IMAGE_ACCEPT, type ImageError } from "./lib/i
|
|
|
47
47
|
export { RailLink } from "./components/rail-link.js";
|
|
48
48
|
export { Slider } from "./components/slider.js";
|
|
49
49
|
export { Accordion, Collapsible } from "./components/disclosure.js";
|
|
50
|
-
export { Descriptions, Kpi, KpiGrid, Code, Kbd, Badge, Steps } from "./components/display.js";
|
|
50
|
+
export { Descriptions, Kpi, KpiGrid, Code, Kbd, Badge, Steps, type Step } from "./components/display.js";
|
|
51
51
|
export { PasswordInput, SecretField, TagsInput, MultiSelect, ScheduleInput, } from "./components/advanced-input.js";
|
|
52
52
|
export { LineChart, type Series } from "./components/chart.js";
|
|
53
53
|
export { PieChart, type PieSlice } from "./components/pie.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,GACP,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,EACL,MAAM,EACN,cAAc,EACd,KAAK,WAAW,EAChB,UAAU,EACV,kBAAkB,EAClB,UAAU,GACX,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5G,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChH,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGjG,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,EACL,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,GACN,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,KAAK,QAAQ,EACb,OAAO,EACP,OAAO,EACP,KAAK,EACL,KAAK,SAAS,EACd,aAAa,EACb,aAAa,EACb,MAAM,GACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,KAAK,GAAG,EACR,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAKlC,OAAO,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAI,GACL,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EACV,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGpE,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzG,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,SAAS,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
|
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.4.1 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -495,6 +495,32 @@
|
|
|
495
495
|
color: var(--color-accent-line);
|
|
496
496
|
}
|
|
497
497
|
|
|
498
|
+
.tamga-field-btn {
|
|
499
|
+
position: absolute;
|
|
500
|
+
top: 1px;
|
|
501
|
+
right: 1px;
|
|
502
|
+
bottom: 1px;
|
|
503
|
+
display: inline-flex;
|
|
504
|
+
width: 34px;
|
|
505
|
+
align-items: center;
|
|
506
|
+
justify-content: center;
|
|
507
|
+
border-left: 1px solid var(--color-line);
|
|
508
|
+
border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0;
|
|
509
|
+
background: transparent;
|
|
510
|
+
color: var(--color-ink-faint);
|
|
511
|
+
cursor: pointer;
|
|
512
|
+
transition: color var(--duration-press) var(--ease-standard),
|
|
513
|
+
background var(--duration-press) var(--ease-standard);
|
|
514
|
+
}
|
|
515
|
+
.tamga-field-btn:hover {
|
|
516
|
+
background: var(--color-hover);
|
|
517
|
+
color: var(--color-ink);
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
.tamga-field-btn[aria-pressed="true"] {
|
|
521
|
+
color: var(--color-accent-line);
|
|
522
|
+
}
|
|
523
|
+
|
|
498
524
|
.tamga-stepper {
|
|
499
525
|
position: absolute;
|
|
500
526
|
top: 1px;
|
|
@@ -878,6 +904,44 @@
|
|
|
878
904
|
margin-top: calc((1lh - 18px) / 2);
|
|
879
905
|
}
|
|
880
906
|
|
|
907
|
+
.tamga-choice-chip {
|
|
908
|
+
display: inline-flex;
|
|
909
|
+
align-items: center;
|
|
910
|
+
gap: 8px;
|
|
911
|
+
height: auto;
|
|
912
|
+
min-height: 32px;
|
|
913
|
+
padding: 4px 10px;
|
|
914
|
+
border-radius: var(--radius-ctl);
|
|
915
|
+
border: 1px solid var(--color-edge);
|
|
916
|
+
background: var(--color-shell);
|
|
917
|
+
font-size: var(--text-small);
|
|
918
|
+
cursor: pointer;
|
|
919
|
+
}
|
|
920
|
+
.tamga-choice-card {
|
|
921
|
+
display: flex;
|
|
922
|
+
align-items: flex-start;
|
|
923
|
+
gap: 8px;
|
|
924
|
+
width: 100%;
|
|
925
|
+
min-width: 0;
|
|
926
|
+
text-align: left;
|
|
927
|
+
padding: 16px;
|
|
928
|
+
border-radius: var(--radius-card);
|
|
929
|
+
border: 1px solid var(--color-edge);
|
|
930
|
+
background: var(--color-shell);
|
|
931
|
+
cursor: pointer;
|
|
932
|
+
}
|
|
933
|
+
.tamga-choice-chip[aria-checked="true"],
|
|
934
|
+
.tamga-choice-card[aria-checked="true"] {
|
|
935
|
+
border-color: var(--color-accent-line);
|
|
936
|
+
box-shadow: 2px 2px 0 var(--color-accent-line);
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
.tamga-choice-chip:not([aria-checked="true"]):active,
|
|
940
|
+
.tamga-choice-card:not([aria-checked="true"]):active {
|
|
941
|
+
transform: translate(1px, 1px);
|
|
942
|
+
transition-duration: 0s;
|
|
943
|
+
}
|
|
944
|
+
|
|
881
945
|
.tamga-check, .tamga-radio {
|
|
882
946
|
display: inline-flex;
|
|
883
947
|
align-items: center;
|
|
@@ -13,6 +13,21 @@ export type NavEntry = {
|
|
|
13
13
|
/** The translated label. In the tooltip on a narrow rail, on the row itself on a wide one. TR: Çevrilmiş etiket. Dar rayda ipucunda, geniş rayda satırın kendisinde. */
|
|
14
14
|
label: string;
|
|
15
15
|
icon: ComponentProps<typeof Icon>["icon"];
|
|
16
|
+
/**
|
|
17
|
+
* The group this entry belongs to, already translated. TR: Bu girişin ait olduğu grup, çevrilmiş
|
|
18
|
+
* hâliyle.
|
|
19
|
+
*
|
|
20
|
+
* Ray, ardışık girişleri bu ada göre kümeliyor ve grup değiştiğinde bir başlık çiziyor. Verilmezse
|
|
21
|
+
* giriş başlıksız kalıyor; hiçbiri vermezse ray tek bir liste olarak çiziliyor, yani eski davranış.
|
|
22
|
+
*
|
|
23
|
+
* ALAN DÜZ, VERİ İÇ İÇE DEĞİL. `nav` bir gruplar dizisi olsaydı bu kırıcı bir değişiklik olurdu,
|
|
24
|
+
* ve boş bir grup kurmak mümkün hâle gelirdi. Düz listede o iki sorun da yok: grup başlığı
|
|
25
|
+
* verinin bir alanı, ve başlık ancak bir girişi varsa görünüyor.
|
|
26
|
+
*
|
|
27
|
+
* YALNIZ GENİŞ RAYDA ÇİZİLİYOR. Dar rayda 40 piksellik bir kutuda başlık okunmuyor; orada
|
|
28
|
+
* gruplama boşlukla anlatılıyor.
|
|
29
|
+
*/
|
|
30
|
+
section?: string;
|
|
16
31
|
};
|
|
17
32
|
export type AppShellProps = {
|
|
18
33
|
/** The brand mark at the top of the rail; the caller supplies its own link. TR: Rayın tepesindeki marka işareti; kendi bağlantısını çağıran veriyor. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"
|
|
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;AAE7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,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,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,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,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAiFf"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Fragment } from "react";
|
|
3
4
|
import { Icon } from "../components/icon.js";
|
|
4
5
|
import { RailLink } from "../components/rail-link.js";
|
|
5
6
|
import { PlainLink } from "./shared.js";
|
|
@@ -9,5 +10,5 @@ export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, rail
|
|
|
9
10
|
altındaki her rotayı yutar. */
|
|
10
11
|
const isCurrent = (href) => href === "/" ? activePath === href : activePath === href || activePath.startsWith(`${href}/`);
|
|
11
12
|
const wide = rail === "wide";
|
|
12
|
-
return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-shell text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-shell 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: nav.map((entry) => (_jsx(RailLink, { href: entry.href, label: entry.label, active: isCurrent(entry.href), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "base" }) }, entry.key))) }), 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 py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: "tamga-surface h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
|
|
13
|
+
return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-shell text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-shell 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: nav.map((entry, i) => (_jsxs(Fragment, { children: [wide && entry.section && entry.section !== nav[i - 1]?.section ? (_jsx("p", { className: `px-2.5 text-micro font-semibold uppercase tracking-wide text-ink-faint ${i > 0 ? "mt-4 pb-1" : "pb-1"}`, children: entry.section })) : null, _jsx(RailLink, { href: entry.href, label: entry.label, active: isCurrent(entry.href), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "base" }) })] }, entry.key))) }), 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 py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: "tamga-surface h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
|
|
13
14
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
+
import { type Step } from "../components/display.js";
|
|
2
3
|
import { type ErrorLabels, type TemplateError } from "./shared.js";
|
|
3
4
|
/**
|
|
4
5
|
* Sonu belli olan bir akış: kuruluş, bir kayıt ekleme.
|
|
@@ -6,11 +7,16 @@ import { type ErrorLabels, type TemplateError } from "./shared.js";
|
|
|
6
7
|
* Verdiği söz "bu kadar adım ve bitti"; "bitti" konumsal.
|
|
7
8
|
* Gerekçe: docs/adr/0004-sablon-katmani.md
|
|
8
9
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Bir sihirbaz adımı: kitin `Step`inin ta kendisi.
|
|
12
|
+
*
|
|
13
|
+
* AYRI BİR TİP DEĞİL, ve bir süre öyleydi: burada `{ key, label }` diye ikinci
|
|
14
|
+
* kez tanımlıydı ve şerit çizilirken `steps.map((s) => s.label)` yapılıyordu,
|
|
15
|
+
* yani KİMLİK TAM SINIRDA ÇÖPE GİDİYORDU. Şeridi çizen `Steps` kimliği hiç
|
|
16
|
+
* görmediği için bir adıma kanca takmanın yolu yoktu, ve React anahtarı
|
|
17
|
+
* çevrilmiş etiketti. İki tip tek tipe indi; kimlik artık aşağı akıyor.
|
|
18
|
+
*/
|
|
19
|
+
export type WizardStep = Step;
|
|
14
20
|
export type WizardState = "ready" | "error";
|
|
15
21
|
export type WizardTemplateProps = {
|
|
16
22
|
steps: readonly WizardStep[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-template.d.ts","sourceRoot":"","sources":["../../src/patterns/wizard-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"wizard-template.d.ts","sourceRoot":"","sources":["../../src/patterns/wizard-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAS,KAAK,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAa,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE9E;;;;;GAKG;AAEH;;;;;;;;GAQG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC;AAE9B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,KAAe,EACf,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA4CrB"}
|
|
@@ -4,5 +4,5 @@ import { Steps } from "../components/display.js";
|
|
|
4
4
|
import { ErrorSlot } from "./shared.js";
|
|
5
5
|
export function WizardTemplate({ steps, activeStep, title, subtitle, back, next, state = "ready", error, labels, children, }) {
|
|
6
6
|
const activeIndex = steps.findIndex((s) => s.key === activeStep);
|
|
7
|
-
return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-wizard-state": state, children: [_jsx("div", { className: "tamga-section tamga-gutter py-4", children: _jsx(Steps, { steps: steps
|
|
7
|
+
return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-wizard-state": state, children: [_jsx("div", { className: "tamga-section tamga-gutter py-4", children: _jsx(Steps, { steps: steps, current: activeIndex < 0 ? 0 : activeIndex }) }), _jsx("div", { className: "tamga-gutter min-h-0 flex-1 py-6", children: _jsxs("div", { className: "max-w-[var(--measure)]", children: [_jsx("h2", { className: "text-title font-semibold text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1 text-small text-ink-faint", children: subtitle }) : null, _jsx("div", { className: "mt-6", children: state === "error" ? _jsx(ErrorSlot, { error: error, labels: labels }) : children })] }) }), back || next ? (_jsxs("div", { className: "tamga-section tamga-gutter sticky bottom-0 z-10 flex items-center gap-2 bg-shell py-4", children: [back, _jsx("div", { className: "ml-auto flex items-center gap-2", children: next })] })) : null, _jsx("span", { className: "sr-only", "aria-live": "polite", children: activeIndex >= 0 ? `${activeIndex + 1} / ${steps.length}` : "" })] }));
|
|
8
8
|
}
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED