tamga-ui 0.4.0 → 0.4.2
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 +68 -1
- package/dist/components/advanced-input.d.ts +4 -4
- package/dist/components/advanced-input.d.ts.map +1 -1
- package/dist/components/advanced-input.js +4 -4
- package/dist/components/appearance.d.ts +1 -1
- package/dist/components/appearance.d.ts.map +1 -1
- package/dist/components/appearance.js +1 -1
- package/dist/components/combobox.d.ts +2 -2
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/display.d.ts +2 -2
- package/dist/components/display.d.ts.map +1 -1
- package/dist/components/display.js +4 -4
- package/dist/components/file-upload.d.ts +1 -1
- package/dist/components/file-upload.d.ts.map +1 -1
- package/dist/components/file-upload.js +1 -1
- package/dist/components/radio-group.d.ts +8 -2
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +2 -2
- package/dist/components/tabs.d.ts +1 -1
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +2 -2
- package/dist/kit.css +1 -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/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,7 +5,74 @@ 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.
|
|
8
|
+
## 0.4.2
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **Every list-taking component now passes per-item attributes.** Anything an item object carries
|
|
13
|
+
beyond its known fields lands on that item's own element: `Tabs`, `Combobox`, `MultiSelect`,
|
|
14
|
+
`ColorSwatches`, `FileUpload`, `Descriptions`, `ScheduleInput`. Three components already did;
|
|
15
|
+
these seven did not.
|
|
16
|
+
|
|
17
|
+
This is not a convenience. Without the hook a caller leaves the component and hand-writes the
|
|
18
|
+
class, and leaves the role, the keyboard and the wrapper behind with it. The asymmetry was found
|
|
19
|
+
three separate times and cost three separate releases, each time because the fix was applied to
|
|
20
|
+
the one component that hurt rather than to the family. A gate now asks the question when a new
|
|
21
|
+
list-taking component is added.
|
|
22
|
+
|
|
23
|
+
The three chart series are exempt with a reason: their items are drawn marks rather than elements,
|
|
24
|
+
and those props already carry data arrays, where a free-form key would be ambiguous.
|
|
25
|
+
|
|
26
|
+
### Fixed
|
|
27
|
+
|
|
28
|
+
- **`Descriptions` put the caller's `data-*` on every row instead of on the list.** The spread sat
|
|
29
|
+
inside the item loop, so one hook became N copies and the `<dl>` itself carried none. The gate that
|
|
30
|
+
checks a component accepts `data-*` had passed it, because that gate asks whether the attribute is
|
|
31
|
+
accepted, not where it lands.
|
|
32
|
+
|
|
33
|
+
- **`AppShell`'s content surface is positioned.** It scrolls, and it was not `relative`, so any
|
|
34
|
+
absolutely positioned element inside it — `sr-only` text is exactly that — looked for its
|
|
35
|
+
containing block on `html`, landed in document coordinates and stretched the document. The page
|
|
36
|
+
itself then scrolled despite `h-dvh overflow-hidden`, leaving an empty band under the body.
|
|
37
|
+
|
|
38
|
+
A consumer hit this twice and found it by eye both times; in neither case was the first suspect
|
|
39
|
+
the right one, because at rest nothing looks wrong. Positioning the surface closes the whole class:
|
|
40
|
+
an escaping element can now travel no further than the surface it lives in.
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
Two gaps that products had been paying for, both found by a gate that asks a product not to
|
|
45
|
+
hand-write a kit class. Each one had pushed a caller off the component entirely.
|
|
46
|
+
|
|
47
|
+
### Added
|
|
48
|
+
|
|
49
|
+
- **An accessibility invariant suite.** Twenty-three renders, three invariants: every interactive
|
|
50
|
+
element has an accessible name, no `aria-hidden` subtree hides something focusable, and role pairs
|
|
51
|
+
are complete (`radio` inside `radiogroup`, `tab` inside `tablist`, `option` inside `listbox`).
|
|
52
|
+
|
|
53
|
+
This is not an axe sweep and does not claim to be. The previous sweep ran over a consuming
|
|
54
|
+
product's stories and disappeared with them, which was the wrong home for it: a promise the
|
|
55
|
+
library makes has to be measured in the library. What is not covered is written at the top of the
|
|
56
|
+
file — contrast (a separate gate already measures it), focus order, live-region behaviour, and any
|
|
57
|
+
component the suite does not render.
|
|
58
|
+
|
|
59
|
+
- **`RadioGroup` options carry their own attributes.** Anything beyond `value` and `label` lands on
|
|
60
|
+
that option's button. The sibling components for picking one of several things had carried
|
|
61
|
+
per-option hooks since 0.3.1 and 0.4.0; this one had not, so a caller who needed to point at a
|
|
62
|
+
single choice left the component behind and hand-wrote the class, which meant leaving the role and
|
|
63
|
+
the keyboard behind with it. The kit's own attributes are written after the caller's, so a hook
|
|
64
|
+
cannot overwrite `aria-checked`.
|
|
65
|
+
|
|
66
|
+
- **`AppShell` draws section headings.** `NavEntry` takes an optional `section`; the rail groups
|
|
67
|
+
consecutive entries by it and draws a heading when the group changes. Wide rails only: in a 40px
|
|
68
|
+
box a heading does not read, and there grouping is carried by spacing.
|
|
69
|
+
|
|
70
|
+
A panel whose menu is split into seven named groups could not express that, so it drew its own
|
|
71
|
+
rail and left behind everything the template brings. The field is flat rather than a nested list
|
|
72
|
+
of groups, for two reasons: nesting would have been a breaking change, and a nested shape makes an
|
|
73
|
+
empty group possible. Here a heading exists only if an entry has one.
|
|
74
|
+
|
|
75
|
+
|
|
9
76
|
|
|
10
77
|
**A step now has an identity of its own.** `Steps` took a plain `readonly string[]`, so a step was
|
|
11
78
|
nothing but its translated label. Two consequences followed, and both were silent.
|
|
@@ -80,11 +80,11 @@ export declare function TagsInput({ value, onChange, placeholder, labels, max, c
|
|
|
80
80
|
* seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
|
|
81
81
|
*/
|
|
82
82
|
export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }: {
|
|
83
|
-
options: readonly {
|
|
83
|
+
options: readonly ({
|
|
84
84
|
value: string;
|
|
85
85
|
label: string;
|
|
86
86
|
hint?: string;
|
|
87
|
-
}[];
|
|
87
|
+
} & Record<string, unknown>)[];
|
|
88
88
|
value: readonly string[];
|
|
89
89
|
onChange: (next: string[]) => void;
|
|
90
90
|
placeholder: string;
|
|
@@ -117,10 +117,10 @@ export declare function ScheduleInput({ value, onChange, options, label, classNa
|
|
|
117
117
|
* `[{ minutes: 5, label: "5 minutes" }, …]`: ordered and curated. TR: `[{ minutes: 5, label:
|
|
118
118
|
* "5 dakika" }, …]`: sıralı ve kürasyonlu.
|
|
119
119
|
*/
|
|
120
|
-
options: readonly {
|
|
120
|
+
options: readonly ({
|
|
121
121
|
minutes: number;
|
|
122
122
|
label: string;
|
|
123
|
-
}[];
|
|
123
|
+
} & Record<string, unknown>)[];
|
|
124
124
|
label: string;
|
|
125
125
|
className?: string;
|
|
126
126
|
}): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"AAgBA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BA6BA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,YAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACvF;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4DA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,CAAC;IAC5C,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiDA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -169,9 +169,9 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
|
|
|
169
169
|
setQuery(e.target.value);
|
|
170
170
|
setActive(0);
|
|
171
171
|
setOpen(true);
|
|
172
|
-
}, onKeyDown: tus, onFocus: () => setOpen(true), role: "combobox", "aria-expanded": open, "aria-controls": id, "aria-label": labels.open, className: "min-w-24 flex-1 bg-transparent text-body text-ink outline-none" })] }), open ? (_jsx("div", { id: id, role: "listbox", "aria-multiselectable": true, className: "tamga-overlay absolute z-30 mt-2 max-h-64 w-full overflow-y-auto py-1", children: shown.length === 0 ? (_jsx("p", { className: "px-4 py-3 text-small text-ink-faint", children: labels.empty })) : (shown.map((
|
|
173
|
-
const on = value.includes(
|
|
174
|
-
return (_jsxs("button", { type: "button", role: "option", "aria-selected": on, "data-selected": on, "data-active": i === active || undefined, className: "tamga-option w-full", onMouseEnter: () => setActive(i), onClick: () => toggle(
|
|
172
|
+
}, onKeyDown: tus, onFocus: () => setOpen(true), role: "combobox", "aria-expanded": open, "aria-controls": id, "aria-label": labels.open, className: "min-w-24 flex-1 bg-transparent text-body text-ink outline-none" })] }), open ? (_jsx("div", { id: id, role: "listbox", "aria-multiselectable": true, className: "tamga-overlay absolute z-30 mt-2 max-h-64 w-full overflow-y-auto py-1", children: shown.length === 0 ? (_jsx("p", { className: "px-4 py-3 text-small text-ink-faint", children: labels.empty })) : (shown.map(({ value: v, label: etiket, hint, ...rest }, i) => {
|
|
173
|
+
const on = value.includes(v);
|
|
174
|
+
return (_jsxs("button", { ...rest, type: "button", role: "option", "aria-selected": on, "data-selected": on, "data-active": i === active || undefined, className: "tamga-option w-full", onMouseEnter: () => setActive(i), onClick: () => toggle(v), children: [_jsx("span", { className: "flex-1 text-left", children: etiket }), hint ? _jsx("span", { className: "font-mono text-caption text-ink-faint", children: hint }) : null, on ? _jsx(Icon, { icon: Check, size: "xs" }) : null] }, v));
|
|
175
175
|
})) })) : null] }));
|
|
176
176
|
}
|
|
177
177
|
/**
|
|
@@ -187,5 +187,5 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
|
|
|
187
187
|
* "5 minutes" arasındaki farkı kit bilemez.
|
|
188
188
|
*/
|
|
189
189
|
export function ScheduleInput({ value, onChange, options, label, className, }) {
|
|
190
|
-
return (_jsx("select", { className: cn("tamga-input w-full", className), "aria-label": label, value: value, onChange: (e) => onChange(Number(e.target.value)), children: options.map((
|
|
190
|
+
return (_jsx("select", { className: cn("tamga-input w-full", className), "aria-label": label, value: value, onChange: (e) => onChange(Number(e.target.value)), children: options.map(({ minutes, label: etiket, ...rest }) => (_jsx("option", { ...rest, value: minutes, children: etiket }, minutes))) }));
|
|
191
191
|
}
|
|
@@ -4,7 +4,7 @@ export type SwatchOption = {
|
|
|
4
4
|
hex: string;
|
|
5
5
|
/** Its name, translated, used as the accessible label. TR: Çevrilmiş adı; erişilebilir ad olarak kullanılıyor. */
|
|
6
6
|
label: string;
|
|
7
|
-
}
|
|
7
|
+
} & Record<string, unknown>;
|
|
8
8
|
/**
|
|
9
9
|
* Brand colour chosen from a few squares, or written by hand.
|
|
10
10
|
* TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAehE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAC;IACZ,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;
|
|
1
|
+
{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAehE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAC;IACZ,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,uGAAuG;IACvG,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAsCA;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAoBtD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,8FAA8F;IAC9F,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA6BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,iGAAiG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE;QACN,gGAAgG;QAChG,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,+HAA+H;IAC/H,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IACpC,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoDA"}
|
|
@@ -13,7 +13,7 @@ import { Button } from "./button.js";
|
|
|
13
13
|
export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, ...rest }) {
|
|
14
14
|
const secili = (hex) => hex.toLowerCase() === value.toLowerCase();
|
|
15
15
|
const hazirMi = options.some((o) => secili(o.hex));
|
|
16
|
-
return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-3", className), children: [options.map((
|
|
16
|
+
return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-3", className), children: [options.map(({ hex, label: etiket, ...rest }) => (_jsx("button", { ...rest, type: "button", className: "tamga-swatch", "data-selected": secili(hex), "aria-label": etiket, title: etiket, onClick: () => onChange(hex), children: _jsx("span", { "aria-hidden": true, style: { background: hex } }) }, hex))), custom ? (_jsxs("label", { className: "tamga-swatch", "data-selected": !hazirMi, title: customLabel, children: [_jsx("span", { className: "sr-only", children: customLabel }), _jsx("input", { type: "color", value: hazirMi ? options[0].hex : value, onChange: (e) => onChange(e.target.value), className: "tamga-color-input", "aria-label": customLabel })] })) : null] }));
|
|
17
17
|
}
|
|
18
18
|
function Yarim({ theme }) {
|
|
19
19
|
return (_jsxs("span", { className: "tamga-theme-half", "data-theme": theme, "aria-hidden": true, children: [_jsxs("span", { className: "tamga-theme-rail", children: [_jsx("span", { className: "tamga-theme-dot", "data-accent": "true" }), _jsx("span", { className: "tamga-theme-dot" }), _jsx("span", { className: "tamga-theme-dot" })] }), _jsxs("span", { className: "tamga-theme-body", children: [_jsx("span", { className: "tamga-theme-line", style: { width: "70%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "45%" } }), _jsx("span", { className: "tamga-theme-line", "data-accent": "true", style: { width: "30%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "60%" } })] })] }));
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
export type ComboOption<T extends string> = {
|
|
7
7
|
value: T;
|
|
8
8
|
label: string;
|
|
9
|
-
/** Etiketin altındaki ikinci satır
|
|
9
|
+
/** Etiketin altındaki ikinci satır: SKU, e-posta, kategori. */
|
|
10
10
|
hint?: string;
|
|
11
|
-
}
|
|
11
|
+
} & Record<string, unknown>;
|
|
12
12
|
export declare function Combobox<T extends string>({ options, value, onChange, onSearch, placeholder, labels, disabled, invalid, className, ...rest }: {
|
|
13
13
|
options: readonly ComboOption<T>[];
|
|
14
14
|
value?: T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;IAC1C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;IAC1C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAgB,EAChB,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAyIA"}
|
|
@@ -59,5 +59,5 @@ export function Combobox({ options, value, onChange, onSearch, placeholder, labe
|
|
|
59
59
|
}, className: cn("tamga-input w-full pl-9", invalid && "tamga-input-invalid", selected && !query && "text-ink") }), _jsxs("span", { className: "absolute right-1.5 flex items-center gap-0.5", children: [selected ? (_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.clear, onClick: () => {
|
|
60
60
|
onChange?.(undefined);
|
|
61
61
|
setQuery("");
|
|
62
|
-
}, children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null, _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.open, "aria-expanded": open, onClick: () => setOpen((v) => !v), children: _jsx(Icon, { icon: CaretDown, size: "xs" }) })] })] }), open ? (_jsx("div", { id: `${id}-list`, role: "listbox", className: "tamga-overlay absolute z-30 mt-2 max-h-72 w-full overflow-y-auto py-1", children: shown.length === 0 ? (_jsx("p", { className: "px-3 py-2.5 text-body text-ink-faint", children: labels.empty })) : (shown.map((
|
|
62
|
+
}, children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null, _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.open, "aria-expanded": open, onClick: () => setOpen((v) => !v), children: _jsx(Icon, { icon: CaretDown, size: "xs" }) })] })] }), open ? (_jsx("div", { id: `${id}-list`, role: "listbox", className: "tamga-overlay absolute z-30 mt-2 max-h-72 w-full overflow-y-auto py-1", children: shown.length === 0 ? (_jsx("p", { className: "px-3 py-2.5 text-body text-ink-faint", children: labels.empty })) : (shown.map(({ value: v, label: etiket, hint, ...rest }, i) => (_jsxs("button", { ...rest, id: `${id}-opt-${i}`, type: "button", role: "option", "aria-selected": v === value, "data-selected": v === value, "data-active": i === active, className: "tamga-option w-full text-left", onMouseEnter: () => setActive(i), onClick: () => commit(shown[i]), children: [_jsx("span", { className: "block truncate", children: etiket }), hint ? (_jsx("span", { className: "block truncate font-mono text-caption text-ink-faint", children: hint })) : null] }, v)))) })) : null] }));
|
|
63
63
|
}
|
|
@@ -8,11 +8,11 @@ import { type Tone } from "./tone.js";
|
|
|
8
8
|
* Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
|
|
9
9
|
*/
|
|
10
10
|
export declare function Descriptions({ items, layout, className, ...rest }: {
|
|
11
|
-
items: readonly {
|
|
11
|
+
items: readonly ({
|
|
12
12
|
term: string;
|
|
13
13
|
value: ReactNode;
|
|
14
14
|
mono?: boolean;
|
|
15
|
-
}[];
|
|
15
|
+
} & Record<string, unknown>)[];
|
|
16
16
|
/**
|
|
17
17
|
* `wide` at page width, `compact` inside a card. TR: `wide` sayfa genişliğinde, `compact` bir
|
|
18
18
|
* kartın içinde.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAU9C;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAU9C;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IACjG;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0BA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAa,EACb,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,aAAa,EAAE,IAAkB,EACjC,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0HAA0H;IAC1H,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACvB,sFAAsF;IACtF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gJAAgJ;IAChJ,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgEA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAWpI;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAuCA;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAWvF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAQ,EACR,IAAe,EACf,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAuBA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,IAAI,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;;;OAKG;IACH,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAyCA"}
|
|
@@ -21,11 +21,11 @@ import { toneOf } from "./tone.js";
|
|
|
21
21
|
* Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
|
|
22
22
|
*/
|
|
23
23
|
export function Descriptions({ items, layout = "wide", className, ...rest }) {
|
|
24
|
-
return (_jsx("dl", { className: cn("grid", layout === "wide"
|
|
24
|
+
return (_jsx("dl", { ...dataProps(rest), className: cn("grid", layout === "wide"
|
|
25
25
|
? "gap-x-8 gap-y-4 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)]"
|
|
26
|
-
: "gap-x-4 gap-y-2.5 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)]", className), children: items.map((
|
|
27
|
-
_jsx("dt", { className: "text-small text-ink-faint", children:
|
|
28
|
-
_jsx("dd", { className: cn("min-w-0 text-body text-ink",
|
|
26
|
+
: "gap-x-4 gap-y-2.5 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)]", className), children: items.map(({ term, value: deger, mono, ...rest }) => (_createElement("div", { ...rest, key: term, className: "contents" },
|
|
27
|
+
_jsx("dt", { className: "text-small text-ink-faint", children: term }),
|
|
28
|
+
_jsx("dd", { className: cn("min-w-0 text-body text-ink", mono && "font-mono tabular-nums"), children: deger })))) }));
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* Tek bir sayı, büyük. Sektörde adı "stat" ya da "KPI kartı".
|
|
@@ -11,7 +11,7 @@ export type UploadItem = {
|
|
|
11
11
|
*/
|
|
12
12
|
url: string;
|
|
13
13
|
name: string;
|
|
14
|
-
}
|
|
14
|
+
} & Record<string, unknown>;
|
|
15
15
|
export declare function FileUpload({ items, onAdd, onRemove, onReorder, accept, multiple, disabled, labels, className, ...rest }: {
|
|
16
16
|
items: readonly UploadItem[];
|
|
17
17
|
onAdd?: (files: File[]) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;
|
|
1
|
+
{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAkB,EAClB,QAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,4GAA4G;QAC5G,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0GA"}
|
|
@@ -31,5 +31,5 @@ export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/
|
|
|
31
31
|
/* Aynı dosyayı ikinci kez seçebilmek için: aksi hâlde `change`
|
|
32
32
|
tetiklenmez ve kullanıcı "çalışmıyor" der. */
|
|
33
33
|
e.target.value = "";
|
|
34
|
-
} })] }), items.length > 0 ? (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: items.map((
|
|
34
|
+
} })] }), items.length > 0 ? (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: items.map(({ id: oge, url, name, ...rest }, i) => (_jsxs("li", { ...rest, className: "tamga-card relative overflow-hidden", children: [_jsx("img", { src: url, alt: name, className: "aspect-square w-full object-cover" }), i === 0 ? (_jsx("span", { className: "tamga-chip absolute top-1.5 left-1.5", children: labels.primary })) : null, _jsxs("span", { className: "tamga-gutter flex items-center gap-1 py-1.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveLeft, disabled: i === 0, onClick: () => onReorder?.(oge, -1), children: _jsx(Icon, { icon: CaretLeft, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveRight, disabled: i === items.length - 1, onClick: () => onReorder?.(oge, 1), children: _jsx(Icon, { icon: CaretRight, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn ml-auto", "aria-label": labels.remove, onClick: () => onRemove?.(oge), children: _jsx(Icon, { icon: Close, size: "xs" }) })] })] }, oge))) })) : null] }));
|
|
35
35
|
}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
2
|
export declare function RadioGroup<T extends string>({ options, value, onChange, label, look, disabled, className, ...rest }: {
|
|
3
|
-
|
|
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
|
/**
|
|
@@ -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,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;
|
|
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"}
|
|
@@ -10,7 +10,7 @@ import { OFF } from "./control-base.js";
|
|
|
10
10
|
* olmadan ekran okuyucu "üç ayrı düğme" duyurur, "üç seçenekten biri" değil.
|
|
11
11
|
* ---------------------------------------------------------------- */
|
|
12
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((
|
|
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, look = "list", dis
|
|
|
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: 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 ===
|
|
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
|
}
|
|
@@ -24,7 +24,7 @@ export type TabItem<T extends string> = {
|
|
|
24
24
|
* yeni sekmede açılabilen ölü bir adres de bırakmıyor.
|
|
25
25
|
*/
|
|
26
26
|
disabled?: boolean;
|
|
27
|
-
}
|
|
27
|
+
} & Record<string, unknown>;
|
|
28
28
|
export declare function Tabs<T extends string>({ items, value, onChange, label, scroll, linkAs, className, ...rest }: {
|
|
29
29
|
items: readonly TabItem<T>[];
|
|
30
30
|
value: T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;GAIG;AAEH,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,IAAI;IACtC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;GAIG;AAEH,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,IAAI;IACtC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAc,EACd,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+DA"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -7,7 +7,7 @@ export function Tabs({ items, value, onChange, label, scroll = false, linkAs, cl
|
|
|
7
7
|
const bagliMi = items.some((t) => t.href);
|
|
8
8
|
const A = linkAs ?? "a";
|
|
9
9
|
if (bagliMi) {
|
|
10
|
-
return (_jsx("nav", { ...dataProps(rest), "aria-label": label, className: kap, children: items.map((
|
|
10
|
+
return (_jsx("nav", { ...dataProps(rest), "aria-label": label, className: kap, children: items.map(({ value: v, label: etiket, icon, href, disabled, ...rest }) => disabled ? (_jsxs("span", { ...rest, "aria-disabled": "true", className: cn("tamga-tab", scroll && "shrink-0"), "data-disabled": "true", children: [icon, etiket] }, v)) : (_jsxs(A, { ...rest, href: href, className: cn("tamga-tab", scroll && "shrink-0"), "data-active": value === v, "aria-current": value === v ? "page" : undefined, children: [icon, etiket] }, v))) }));
|
|
11
11
|
}
|
|
12
|
-
return (_jsx("div", { role: "tablist", "aria-label": label, className: kap, children: items.map((
|
|
12
|
+
return (_jsx("div", { role: "tablist", "aria-label": label, className: kap, children: items.map(({ value: v, label: etiket, icon, href: _href, disabled, ...rest }) => (_jsxs("button", { ...rest, type: "button", role: "tab", "aria-selected": value === v, disabled: disabled, className: cn("tamga-tab", scroll && "shrink-0"), "data-active": value === v, "data-disabled": disabled || undefined, onClick: () => onChange?.(v), children: [icon, etiket] }, v))) }));
|
|
13
13
|
}
|
package/dist/kit.css
CHANGED
|
@@ -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,+BA6Ff"}
|
|
@@ -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 relative h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
|
|
13
14
|
}
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED