tamga-ui 0.3.2 → 0.4.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 +67 -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 +14 -1
- 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/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,73 @@ 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.0
|
|
9
|
+
|
|
10
|
+
**A step now has an identity of its own.** `Steps` took a plain `readonly string[]`, so a step was
|
|
11
|
+
nothing but its translated label. Two consequences followed, and both were silent.
|
|
12
|
+
|
|
13
|
+
The React key was the label. Change the language and every step becomes, to React, a different
|
|
14
|
+
element: the old node is torn down and a new one built in its place. Nothing looks wrong, but
|
|
15
|
+
anything holding on to that node goes with it. Two steps sharing a label collided the same way.
|
|
16
|
+
|
|
17
|
+
And there was no way to reach a single step. A caller who needed to point at one, to test it or to
|
|
18
|
+
style it, had nothing to point with; the only thing in the DOM that told steps apart was the
|
|
19
|
+
translated text, which is the one thing that changes underneath a test. The sibling component for
|
|
20
|
+
picking one of several options had carried per-option hooks since 0.3.1. The step strip had not,
|
|
21
|
+
and a gate exemption recorded that gap as though it were a decision.
|
|
22
|
+
|
|
23
|
+
### Breaking
|
|
24
|
+
|
|
25
|
+
- **`Steps.steps`** is now `readonly Step[]` instead of `readonly string[]`, where
|
|
26
|
+
`Step = { key: string; label: string } & Record<string, unknown>`. Anything beyond `key` and
|
|
27
|
+
`label` lands on that step's `<li>`.
|
|
28
|
+
|
|
29
|
+
```diff
|
|
30
|
+
- <Steps steps={["Details", "Connection", "Done"]} current={1} />
|
|
31
|
+
+ <Steps
|
|
32
|
+
+ steps={[
|
|
33
|
+
+ { key: "details", label: "Details" },
|
|
34
|
+
+ { key: "connection", label: "Connection" },
|
|
35
|
+
+ { key: "done", label: "Done" },
|
|
36
|
+
+ ]}
|
|
37
|
+
+ current={1}
|
|
38
|
+
+ />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
The key is an identifier, so it is not translated; the label is. A caller that already had keys
|
|
42
|
+
for its steps passes them straight through.
|
|
43
|
+
|
|
44
|
+
- **`WizardStep` is now an alias of `Step`.** It was a second declaration of the same shape, and
|
|
45
|
+
the template flattened it to labels before drawing the strip, which is exactly where the identity
|
|
46
|
+
was being dropped. Code that already builds `{ key, label }` objects needs no change.
|
|
47
|
+
|
|
48
|
+
### Added
|
|
49
|
+
|
|
50
|
+
- **`RadioGroup.look`** — `list` (default), `chip` or `card`. Only the shell changes: the role, the
|
|
51
|
+
mark, the keyboard behaviour and `aria-checked` are identical in all three, and the selected shell
|
|
52
|
+
takes an outline and a hard offset rather than a fill.
|
|
53
|
+
|
|
54
|
+
The card shape was missing, so a product that wanted "one of N, drawn as cards" built it from a
|
|
55
|
+
stack of bare buttons. The picture came out right and the meaning did not: a screen reader
|
|
56
|
+
announced three separate buttons instead of one choice among three. Rebuilding the role and the
|
|
57
|
+
keyboard at every call site is work, and it is done incompletely every time.
|
|
58
|
+
|
|
59
|
+
A second line goes inside `label`, which is already a `ReactNode`. There is no separate `hint`
|
|
60
|
+
field, because a prop that means something in only one shell is a lie told to everyone reading the
|
|
61
|
+
props table.
|
|
62
|
+
|
|
63
|
+
- **`PasswordInput.invalid`** — the sibling text field had it, this one did not, so a caller marking
|
|
64
|
+
a wrong password had to write the kit's class by hand. The class is only half of it: the hand-written
|
|
65
|
+
route never carried `aria-invalid`, so the error was visible and never announced.
|
|
66
|
+
|
|
67
|
+
### Fixed
|
|
68
|
+
|
|
69
|
+
- The step strip no longer remounts its list items when labels change.
|
|
70
|
+
|
|
71
|
+
- **`PasswordInput` now reads the kit's own class table** instead of writing `tamga-input` by hand.
|
|
72
|
+
A rule added to the table reached every text field except this one, which is the same defect the
|
|
73
|
+
library asks its consumers not to introduce.
|
|
74
|
+
|
|
8
75
|
## 0.3.2
|
|
9
76
|
|
|
10
77
|
**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,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
export declare function RadioGroup<T extends string>({ options, value, onChange, label, disabled, className, ...rest }: {
|
|
2
|
+
export declare function RadioGroup<T extends string>({ options, value, onChange, label, look, disabled, className, ...rest }: {
|
|
3
3
|
options: readonly {
|
|
4
4
|
value: T;
|
|
5
5
|
label: ReactNode;
|
|
@@ -11,6 +11,19 @@ export declare function RadioGroup<T extends string>({ options, value, onChange,
|
|
|
11
11
|
* adı: "hangi seçeneklerden biri" sorusunun cevabı.
|
|
12
12
|
*/
|
|
13
13
|
label: string;
|
|
14
|
+
/**
|
|
15
|
+
* The shell each option is drawn in. TR: Her seçeneğin çizildiği kabuk.
|
|
16
|
+
*
|
|
17
|
+
* `list` alt alta, işaret ve etiket; `chip` yan yana sarılan küçük kabuklar; `card` ikinci bir
|
|
18
|
+
* satır taşıyacak kadar yer veren bir kart yüzeyi.
|
|
19
|
+
*
|
|
20
|
+
* Değişen yalnız kabuk: `role="radiogroup"`, `role="radio"`, `aria-checked` ve klavye davranışı
|
|
21
|
+
* üçünde de aynı. Seçili kabuk çerçeve ve sert offset alıyor, dolgu değil (Yasa 2).
|
|
22
|
+
*
|
|
23
|
+
* İkinci satır `label`in içine yazılıyor; ayrı bir `hint` alanı yok, çünkü etiket zaten
|
|
24
|
+
* `ReactNode` ve yalnız tek bir kabukta anlamı olan bir prop props tablosunda herkese görünürdü.
|
|
25
|
+
*/
|
|
26
|
+
look?: "list" | "chip" | "card";
|
|
14
27
|
disabled?: boolean;
|
|
15
28
|
className?: string;
|
|
16
29
|
/** `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;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+
|
|
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,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACnD,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,+BAkDA"}
|
|
@@ -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((o) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === o.value, "aria-disabled": disabled || undefined, onClick: () => !disabled && onChange?.(o.value),
|
|
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((o) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === o.value, "aria-disabled": disabled || undefined, onClick: () => !disabled && onChange?.(o.value),
|
|
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 === o.value }), _jsx("span", { className: "min-w-0 flex-1", children: o.label })] }, o.value))) }));
|
|
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":"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"}
|
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.
|
|
1
|
+
/*! tamga-ui 0.4.0 · 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;
|
|
@@ -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