tamga-ui 0.7.1 → 0.7.3
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 +62 -0
- package/dist/blocks/filter-bar.d.ts +29 -9
- package/dist/blocks/filter-bar.d.ts.map +1 -1
- package/dist/blocks/filter-bar.js +29 -9
- package/dist/blocks/index.d.ts +1 -1
- package/dist/blocks/index.d.ts.map +1 -1
- package/dist/components/advanced-input.d.ts +3 -1
- package/dist/components/advanced-input.d.ts.map +1 -1
- package/dist/components/advanced-input.js +2 -2
- package/dist/components/combobox.d.ts +3 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +2 -2
- package/dist/components/date-picker.d.ts +6 -2
- package/dist/components/date-picker.d.ts.map +1 -1
- package/dist/components/date-picker.js +6 -6
- package/dist/components/progress.d.ts +13 -1
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +3 -3
- package/dist/fonts.css +1 -1
- package/dist/kit.css +83 -2
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,68 @@ 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.7.3
|
|
9
|
+
|
|
10
|
+
> What the first real consumer found: the filter bar's names, its phone layout, its option values, a thin progress bar, one card instead of two.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- **`FilterBar` on a narrow screen** (below `sm`) collapses to the search box and a "Filter · N"
|
|
15
|
+
button beside it; N counts the applied filters other than the search, and is omitted at zero.
|
|
16
|
+
The button opens the existing sheet, where the top fields come first as an untitled group,
|
|
17
|
+
then the drawer groups, with the same "Clear" and "Apply" in the footer. Applied chips and
|
|
18
|
+
"Clear all" stay visible. With an empty drawer the button is still drawn on narrow screens,
|
|
19
|
+
since it is the only way to the top fields. The switch is a CSS breakpoint, both views are in
|
|
20
|
+
the DOM and one is hidden, so the server's output matches the browser's. The kit writes no
|
|
21
|
+
word: `labels.filter` is optional and falls back to `allFilters`. The row's parts are kit
|
|
22
|
+
classes (`.tamga-filter-ara`, `.tamga-filter-alan`), not utilities: a utility's `display` would
|
|
23
|
+
beat the component layer's `display: none`, as it did in the first cut, measured in Chrome at
|
|
24
|
+
390px (`pnpm olc:filtre` repeats the measurement).
|
|
25
|
+
- **`FilterBar` options with a value and a label** · `options` and `optionSource` take
|
|
26
|
+
`{ value, label }` pairs beside plain strings. `values` holds the value, the box and the chip
|
|
27
|
+
show the label, `tones` is keyed by the value. Plain `string[]` works as before.
|
|
28
|
+
- **`Progress` `size="sm"`** · a 4px line for a table cell: no edge, no shadow, no stripes, no
|
|
29
|
+
label line; width from `className`; `role="progressbar"`, value and `ariaLabel` unchanged.
|
|
30
|
+
`tone` colours the fill from the kit's roles, else the accent. `md` is today's bar, locked
|
|
31
|
+
pixel for pixel by test.
|
|
32
|
+
- **`aria-label`** on `Combobox`, `MultiSelect`, `DatePicker` and `DateTimePicker`, for a box
|
|
33
|
+
with no bound visible label.
|
|
34
|
+
|
|
35
|
+
### Fixed
|
|
36
|
+
|
|
37
|
+
- **`FilterBar` fields had no accessible name**: the label was a `<span>` beside the control,
|
|
38
|
+
so a screen reader read every box as "All" (WCAG 4.1.2, 2.5.3) and tests could not find a
|
|
39
|
+
field by role. Every control carries `aria-label={field.label}`; the date range's two boxes
|
|
40
|
+
are "<label> <rangeStart>" and "<label> <rangeEnd>", on top and in the drawer.
|
|
41
|
+
|
|
42
|
+
- **`FilterBar` inside `ListTemplate` drew a card inside the template's card** and, in the slot's
|
|
43
|
+
flex row, shrank to its content. The bar's box is now a kit class, `.tamga-filter-bar` (the
|
|
44
|
+
same 16px padding and 14px gap as before, so a bar on its own is pixel-identical);
|
|
45
|
+
`[data-filters] > .tamga-filter-bar` drops border, ground, shadow and padding and takes
|
|
46
|
+
`flex: 1 1 100%`. The padding moved from a Tailwind utility to the class on purpose: the
|
|
47
|
+
utilities layer comes after the components layer, so `padding: 0` could never have beaten
|
|
48
|
+
`p-4`.
|
|
49
|
+
|
|
50
|
+
## 0.7.2
|
|
51
|
+
|
|
52
|
+
> The current rail item is drawn whole.
|
|
53
|
+
|
|
54
|
+
### Fixed
|
|
55
|
+
|
|
56
|
+
- **`AppShell` rail: the current item's lift, shadow and focus ring were clipped.** Every entry
|
|
57
|
+
sits inside the group body's inner box, which carries `overflow: hidden` for the 0fr/1fr
|
|
58
|
+
open-close animation, and the box was exactly the content's size: the lifted item lost its
|
|
59
|
+
top and left edge, the 3px shadow its right end, and a keyboard focus ring its sides (WCAG
|
|
60
|
+
2.4.7 / 2.4.11). The inner box now has `--offset-room-ring` (4px: 1px lift plus the 1px ring
|
|
61
|
+
at 2px offset) of padding with the same negative margin, so the layout does not move but the
|
|
62
|
+
clip edge sits outside the painted area; the rail's own scroll padding grows from 3px to 4px
|
|
63
|
+
for the same reason. A closed group is hidden with `visibility: hidden` once the animation
|
|
64
|
+
ends (the padding would otherwise leak the first pixels), shown again without delay on open;
|
|
65
|
+
`inert` is unchanged. Plain CSS, works in Safari; no `overflow-clip-margin`. Measured in Chrome
|
|
66
|
+
on the docs site's real-size shell: `pnpm olc:ray` (needs Chrome and the docs server) checks
|
|
67
|
+
that the painted area of the current and of a focused item stays inside the nearest clipping
|
|
68
|
+
ancestor and that a closed group leaks nothing.
|
|
69
|
+
|
|
8
70
|
## 0.7.1
|
|
9
71
|
|
|
10
72
|
> An empty calendar opens where something can be picked.
|
|
@@ -20,12 +20,25 @@ export type FilterFieldKind = "text" | "select"
|
|
|
20
20
|
| "multi"
|
|
21
21
|
/** İKİ TARİH: başlangıç ve bitiş. Tek bir kutu bir aralık soramaz. */
|
|
22
22
|
| "dateRange";
|
|
23
|
+
/**
|
|
24
|
+
* An option whose stored VALUE differs from its shown LABEL: the address carries `critical`, the
|
|
25
|
+
* box shows "Kritik". A plain string is both at once. TR: Saklanan DEĞERİ ile görünen ADI
|
|
26
|
+
* farklı seçenek: adres `critical` taşır, kutu "Kritik" gösterir. Düz dizgi ikisi birden.
|
|
27
|
+
*/
|
|
28
|
+
export type FilterOption = {
|
|
29
|
+
value: string;
|
|
30
|
+
label: string;
|
|
31
|
+
};
|
|
23
32
|
export type FilterField = {
|
|
24
33
|
key: string;
|
|
25
34
|
label: string;
|
|
26
35
|
kind: FilterFieldKind;
|
|
27
|
-
/**
|
|
28
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Plain strings, or `{ value, label }` pairs. Falls back to `optionSource[key]`; with neither,
|
|
38
|
+
* the list is empty. TR: Düz dizgiler ya da `{ value, label }` çiftleri. Verilmezse
|
|
39
|
+
* `optionSource[key]`; ikisi de yoksa liste boş.
|
|
40
|
+
*/
|
|
41
|
+
options?: readonly (string | FilterOption)[];
|
|
29
42
|
/**
|
|
30
43
|
* Start a new row before this field. TR: Bu alandan önce yeni bir satır başlat.
|
|
31
44
|
*
|
|
@@ -55,11 +68,12 @@ export type FilterField = {
|
|
|
55
68
|
* A tone per option, for a filter whose items ARE states. TR: Öğeleri birer
|
|
56
69
|
* DURUM olan filtrede, seçenek başına ton.
|
|
57
70
|
*
|
|
58
|
-
* Keyed by the option's
|
|
59
|
-
* table's chip draws, so the eye matches the
|
|
60
|
-
* either. Only where the option really is a
|
|
61
|
-
*
|
|
62
|
-
*
|
|
71
|
+
* Keyed by the option's VALUE (its text, for a plain string). The swatch it
|
|
72
|
+
* draws is the same square the table's chip draws, so the eye matches the
|
|
73
|
+
* list to the rows without reading either. Only where the option really is a
|
|
74
|
+
* state. TR: Anahtar seçeneğin DEĞERİ (düz dizgide metni). Çizdiği kare,
|
|
75
|
+
* tablodaki çipin çizdiği karenin aynısı · göz listeyi satırlara okumadan
|
|
76
|
+
* eşliyor. Yalnız seçenek gerçekten bir durumsa.
|
|
63
77
|
*/
|
|
64
78
|
tones?: Record<string, Tone>;
|
|
65
79
|
};
|
|
@@ -82,6 +96,12 @@ export type FilterBarLabels = {
|
|
|
82
96
|
*/
|
|
83
97
|
all: string;
|
|
84
98
|
allFilters: string;
|
|
99
|
+
/**
|
|
100
|
+
* The narrow screen's button, "Filter"; the count of applied filters follows it. Absent,
|
|
101
|
+
* `allFilters` is used. TR: Dar ekranın düğmesi, "Filtrele"; uygulanan filtre sayısı peşine
|
|
102
|
+
* gelir. Yoksa `allFilters`.
|
|
103
|
+
*/
|
|
104
|
+
filter?: string;
|
|
85
105
|
clearAll: string;
|
|
86
106
|
clear: string;
|
|
87
107
|
apply: string;
|
|
@@ -114,8 +134,8 @@ export type FilterBarProps = {
|
|
|
114
134
|
top: readonly FilterField[];
|
|
115
135
|
/** The groups inside the drawer. Grouped, not a flat pile. TR: Çekmecedeki gruplar. Düz bir yığın değil, gruplu. */
|
|
116
136
|
drawer: readonly FilterGroup[];
|
|
117
|
-
/** Where the option lists come from; this will arrive from the server. TR: Seçim listelerinin kaynağı; sunucudan gelecek. */
|
|
118
|
-
optionSource?: Record<string, string[]>;
|
|
137
|
+
/** Where the option lists come from; this will arrive from the server. Strings or `{ value, label }` pairs. TR: Seçim listelerinin kaynağı; sunucudan gelecek. Dizgiler ya da `{ value, label }` çiftleri. */
|
|
138
|
+
optionSource?: Record<string, readonly (string | FilterOption)[]>;
|
|
119
139
|
/**
|
|
120
140
|
* THE KEY THE SEARCH BOX WRITES TO. TR: ARAMA KUTUSUNUN YAZDIĞI ANAHTAR.
|
|
121
141
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;;GAMG;AAEH,8EAA8E;AAC9E,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,QAAQ;AACV,2EAA2E;GACzE,YAAY;AACd;;;GAGG;GACD,OAAO;AACT,sEAAsE;GACpE,WAAW,CAAC;AAEhB,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB
|
|
1
|
+
{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,28 +14,30 @@ import { Select, Sheet } from "../components/primitives.js";
|
|
|
14
14
|
export const rangeStart = (key) => `${key}Start`;
|
|
15
15
|
export const rangeEnd = (key) => `${key}End`;
|
|
16
16
|
function FieldControl({ field, values, write, optionSource, locale, labels, }) {
|
|
17
|
-
const options = field
|
|
17
|
+
const options = secenekler(field, optionSource);
|
|
18
|
+
/* HER KONTROLÜN ADI VAR: alanın adı bir <span>, kontrole bağlı değil; ekran
|
|
19
|
+
okuyucu beş kutuyu da "Tümü" diye okuyordu. */
|
|
18
20
|
if (field.kind === "dateRange") {
|
|
19
|
-
return (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx(DatePicker, { locale: locale, value: values[rangeStart(field.key)] || undefined, onChange: (v) => write(rangeStart(field.key), v ?? ""), placeholder: labels.rangeStart, labels: labels.calendar }), _jsx(DatePicker, { locale: locale, value: values[rangeEnd(field.key)] || undefined, onChange: (v) => write(rangeEnd(field.key), v ?? ""), placeholder: labels.rangeEnd, labels: labels.calendar })] }));
|
|
21
|
+
return (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx(DatePicker, { locale: locale, "aria-label": `${field.label} ${labels.rangeStart}`, value: values[rangeStart(field.key)] || undefined, onChange: (v) => write(rangeStart(field.key), v ?? ""), placeholder: labels.rangeStart, labels: labels.calendar }), _jsx(DatePicker, { locale: locale, "aria-label": `${field.label} ${labels.rangeEnd}`, value: values[rangeEnd(field.key)] || undefined, onChange: (v) => write(rangeEnd(field.key), v ?? ""), placeholder: labels.rangeEnd, labels: labels.calendar })] }));
|
|
20
22
|
}
|
|
21
23
|
if (field.kind === "multi") {
|
|
22
24
|
/* Değerler virgülle tek bir dizgede: filtre durumunun tamamı
|
|
23
25
|
`Record<string,string>` ve bir alanın tipi yüzünden o sözleşmeyi
|
|
24
26
|
değiştirmek, her ekranı ilgilendirirdi. */
|
|
25
27
|
const selected = (values[field.key] ?? "").split(",").filter(Boolean);
|
|
26
|
-
return (_jsx(MultiSelect, { className: "w-full",
|
|
28
|
+
return (_jsx(MultiSelect, { className: "w-full", "aria-label": field.label, options: options, value: selected, onChange: (next) => write(field.key, next.join(",")), placeholder: labels.all, labels: {
|
|
27
29
|
empty: labels.noMatch,
|
|
28
30
|
remove: labels.remove,
|
|
29
31
|
open: labels.open(field.label),
|
|
30
32
|
} }));
|
|
31
33
|
}
|
|
32
34
|
if (field.kind === "searchable") {
|
|
33
|
-
return (_jsx(Combobox, { className: "w-full",
|
|
35
|
+
return (_jsx(Combobox, { className: "w-full", "aria-label": field.label, options: options, value: values[field.key] || undefined, onChange: (v) => write(field.key, v ?? ""), placeholder: labels.all, labels: { empty: labels.noMatch, clear: labels.clear, open: labels.open(field.label) } }));
|
|
34
36
|
}
|
|
35
37
|
if (field.kind === "select") {
|
|
36
|
-
return (_jsx(Select, { className: "w-full", icon: field.icon, options: [
|
|
38
|
+
return (_jsx(Select, { className: "w-full", "aria-label": field.label, icon: field.icon, options: [
|
|
37
39
|
labels.all,
|
|
38
|
-
...options.map((o) => (
|
|
40
|
+
...options.map((o) => ({ value: o.value, label: o.label, tone: field.tones?.[o.value] })),
|
|
39
41
|
],
|
|
40
42
|
/* BOŞ FİLTRE "TÜMÜ"NÜN KENDİSİ · liste açıldığında onay işareti orada
|
|
41
43
|
duruyor. Ama DOLU DEĞİL: `set` ayrı geçiliyor, yoksa "Tümü" yazan
|
|
@@ -44,7 +46,12 @@ function FieldControl({ field, values, write, optionSource, locale, labels, }) {
|
|
|
44
46
|
prop: "listede hangisi seçili" ve "bu filtre uygulanmış mı". */
|
|
45
47
|
value: values[field.key] || labels.all, set: Boolean(values[field.key]), onChange: (v) => write(field.key, v === labels.all ? "" : v), placeholder: labels.all }));
|
|
46
48
|
}
|
|
47
|
-
return (_jsx(Input, { full: true, value: values[field.key] ?? "", onChange: (e) => write(field.key, e.target.value) }));
|
|
49
|
+
return (_jsx(Input, { full: true, "aria-label": field.label, value: values[field.key] ?? "", onChange: (e) => write(field.key, e.target.value) }));
|
|
50
|
+
}
|
|
51
|
+
/** Seçenekler tek biçimde: düz dizgi, değeri de adı da kendisi olan bir çift. */
|
|
52
|
+
function secenekler(field, optionSource) {
|
|
53
|
+
const ham = field.options?.length ? field.options : (optionSource[field.key] ?? []);
|
|
54
|
+
return ham.map((o) => (typeof o === "string" ? { value: o, label: o } : o));
|
|
48
55
|
}
|
|
49
56
|
export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, onFile, fileAccept, extra, locale = "en-GB", labels, }) {
|
|
50
57
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
@@ -52,6 +59,10 @@ export function FilterBar({ values, onChange, top, drawer, optionSource = {}, se
|
|
|
52
59
|
const active = Object.entries(values).filter(([, v]) => v);
|
|
53
60
|
const drawerKeys = new Set(drawer.flatMap((g) => g.fields.map((f) => f.key)));
|
|
54
61
|
const hiddenActive = active.filter(([k]) => drawerKeys.has(k)).length;
|
|
62
|
+
/* Dar ekranın sayısı: aramadan başka her uygulanmış filtre · arama kutusu
|
|
63
|
+
orada da görünür, sayılmasına gerek yok. */
|
|
64
|
+
const darAktif = active.filter(([k]) => k !== searchKey).length;
|
|
65
|
+
const darMetin = `${labels.filter ?? labels.allFilters}${darAktif > 0 ? ` · ${darAktif}` : ""}`;
|
|
55
66
|
function write(key, value) {
|
|
56
67
|
const next = { ...values };
|
|
57
68
|
if (value)
|
|
@@ -75,10 +86,19 @@ export function FilterBar({ values, onChange, top, drawer, optionSource = {}, se
|
|
|
75
86
|
return labels.search;
|
|
76
87
|
return key === fileSearchKey ? (labels.fileSearch?.label ?? key) : key;
|
|
77
88
|
};
|
|
78
|
-
|
|
89
|
+
/* Çip DEĞERİ değil ADI gösteriyor: `critical` saklanır, "Kritik" okunur. */
|
|
90
|
+
const valueText = (key, value) => {
|
|
91
|
+
const field = allFields.find((f) => f.key === key);
|
|
92
|
+
if (!field || (field.kind !== "select" && field.kind !== "searchable" && field.kind !== "multi"))
|
|
93
|
+
return value;
|
|
94
|
+
const adlar = new Map(secenekler(field, optionSource).map((o) => [o.value, o.label]));
|
|
95
|
+
return value.split(",").map((v) => adlar.get(v) ?? v).join(field.kind === "multi" ? ", " : ",");
|
|
96
|
+
};
|
|
97
|
+
const ustAlanlar = (sinif) => top.map((field) => (_jsxs("div", { className: `tamga-filter-alan ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: sinif, children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key)));
|
|
98
|
+
return (_jsxs("div", { className: "tamga-card tamga-card-open tamga-filter-bar", children: [_jsxs("div", { className: "tamga-filter-row", children: [_jsxs("label", { className: "tamga-filter-ara", children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: labels.search }), _jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] })] }), top.map((field) => (_jsxs(Fragment, { children: [field.break ? _jsx("span", { "aria-hidden": true, className: "tamga-filter-genis tamga-filter-kir" }) : null, _jsxs("div", { className: `tamga-filter-genis tamga-filter-alan ${field.kind === "dateRange" ? "" : "tamga-filter-cap"}`, "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] })] }, field.key))), (drawer.length > 0 || top.length > 0) && (_jsxs(Button, { className: drawer.length > 0 ? "ml-auto" : "tamga-filter-dar ml-auto", onClick: () => setDrawerOpen(true), children: [_jsx(Icon, { icon: Customize, size: "xs" }), _jsxs("span", { className: "tamga-filter-genis", children: [labels.allFilters, hiddenActive > 0 && (_jsx("span", { className: "tamga-count ml-1 tabular-nums", children: hiddenActive }))] }), _jsx("span", { className: "tamga-filter-dar", children: darMetin })] })), extra] }), active.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [active.map(([key, value]) => (_jsxs("span", { className: "tamga-token", children: [_jsxs("span", { className: "font-normal text-ink-faint", children: [labelFor(key), ":"] }), valueText(key, value), _jsx("button", { type: "button", className: "tamga-token-x", "aria-label": labels.remove(labelFor(key)), onClick: () => write(key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, key))), _jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })] })), _jsx(Sheet, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: labels.allFilters, closeLabel: labels.calendar.clear, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: () => onChange({}), children: labels.clear }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: labels.apply })] }), children: _jsxs("form", { id: formId, onSubmit: (e) => {
|
|
79
99
|
e.preventDefault();
|
|
80
100
|
setDrawerOpen(false);
|
|
81
|
-
}, className: "flex flex-col", children: [drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
|
|
101
|
+
}, className: "flex flex-col", children: [top.length > 0 && (_jsx("div", { className: "tamga-filter-dar tamga-filter-grup border-b border-dashed border-line py-4.5 last:border-b-0", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: ustAlanlar("text-small text-ink-soft") }) })), drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
|
|
82
102
|
write(fileSearchKey, "");
|
|
83
103
|
onFile?.(null);
|
|
84
104
|
}, children: labels.fileSearch.remove })] })) : (_jsxs("label", { className: `${buttonVariants({})} cursor-pointer`, children: [_jsx(Icon, { icon: Upload, size: "xs" }), labels.fileSearch.choose, _jsx("input", { type: "file", accept: fileAccept, className: "sr-only", onChange: (e) => {
|
package/dist/blocks/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*
|
|
6
6
|
* Gerekçe: docs/gerekce/08-blok-ve-sablon.md
|
|
7
7
|
*/
|
|
8
|
-
export { FilterBar, rangeStart, rangeEnd, type FilterBarLabels, type FilterBarProps, type FilterField, type FilterFieldKind, type FilterGroup, type FilterValues, } from "./filter-bar.js";
|
|
8
|
+
export { FilterBar, rangeStart, rangeEnd, type FilterBarLabels, type FilterBarProps, type FilterField, type FilterFieldKind, type FilterOption, type FilterGroup, type FilterValues, } from "./filter-bar.js";
|
|
9
9
|
export { SaveBar } from "./save-bar.js";
|
|
10
10
|
export { CountRow } from "./count-row.js";
|
|
11
11
|
export { DangerZone, type DangerAction } from "./danger-zone.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -72,7 +72,7 @@ export declare function TagsInput({ value, onChange, placeholder, labels, max, c
|
|
|
72
72
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
73
73
|
[k: `data-${string}`]: unknown;
|
|
74
74
|
}): import("react").JSX.Element;
|
|
75
|
-
export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }: {
|
|
75
|
+
export declare function MultiSelect({ options, value, onChange, placeholder, labels, "aria-label": ariaLabel, className, ...rest }: {
|
|
76
76
|
options: readonly ({
|
|
77
77
|
value: string;
|
|
78
78
|
label: string;
|
|
@@ -86,6 +86,8 @@ export declare function MultiSelect({ options, value, onChange, placeholder, lab
|
|
|
86
86
|
remove: (label: string) => string;
|
|
87
87
|
open: string;
|
|
88
88
|
};
|
|
89
|
+
/** The box's accessible name; falls back to `labels.open`. TR: Kutunun erişilebilir adı; yoksa `labels.open`. */
|
|
90
|
+
"aria-label"?: string;
|
|
89
91
|
className?: string;
|
|
90
92
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
91
93
|
[k: `data-${string}`]: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -114,7 +114,7 @@ export function TagsInput({ value, onChange, placeholder, labels, max, className
|
|
|
114
114
|
YETMİYOR: uzun etiketlerde dört çip de üç satırı aşıyor, o yüzden kutunun
|
|
115
115
|
ayrıca bir tavanı var (aşağıda) ve orada kayıyor. */
|
|
116
116
|
const GORUNEN_CIP = 4;
|
|
117
|
-
export function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }) {
|
|
117
|
+
export function MultiSelect({ options, value, onChange, placeholder, labels, "aria-label": ariaLabel, className, ...rest }) {
|
|
118
118
|
const id = useId();
|
|
119
119
|
const [open, setOpen] = useState(false);
|
|
120
120
|
const [query, setQuery] = useState("");
|
|
@@ -173,7 +173,7 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
|
|
|
173
173
|
setQuery(e.target.value);
|
|
174
174
|
setActive(0);
|
|
175
175
|
setOpen(true);
|
|
176
|
-
}, 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 tamga-menu absolute z-30 mt-2 max-h-64 w-full overflow-y-auto", 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) => {
|
|
176
|
+
}, onKeyDown: tus, onFocus: () => setOpen(true), role: "combobox", "aria-expanded": open, "aria-controls": id, "aria-label": ariaLabel ?? 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 tamga-menu absolute z-30 mt-2 max-h-64 w-full overflow-y-auto", 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) => {
|
|
177
177
|
const on = value.includes(v);
|
|
178
178
|
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),
|
|
179
179
|
/* ODAK GİRDİDE KALIYOR, ve Safari'de bu bir SÜS DEĞİL: Safari
|
|
@@ -9,7 +9,7 @@ export type ComboOption<T extends string> = {
|
|
|
9
9
|
/** Etiketin altındaki ikinci satır: SKU, e-posta, kategori. */
|
|
10
10
|
hint?: string;
|
|
11
11
|
} & Record<string, unknown>;
|
|
12
|
-
export declare function Combobox<T extends string>({ options, value, onChange, onSearch, placeholder, labels, disabled, invalid, className, ...rest }: {
|
|
12
|
+
export declare function Combobox<T extends string>({ options, value, onChange, onSearch, placeholder, labels, disabled, invalid, "aria-label": ariaLabel, className, ...rest }: {
|
|
13
13
|
options: readonly ComboOption<T>[];
|
|
14
14
|
value?: T;
|
|
15
15
|
onChange?: (next: T | undefined) => void;
|
|
@@ -26,6 +26,8 @@ export declare function Combobox<T extends string>({ options, value, onChange, o
|
|
|
26
26
|
};
|
|
27
27
|
disabled?: boolean;
|
|
28
28
|
invalid?: boolean;
|
|
29
|
+
/** The box's accessible name when no visible label is bound to it. TR: Bağlı görünür bir etiket yoksa kutunun erişilebilir adı. */
|
|
30
|
+
"aria-label"?: string;
|
|
29
31
|
className?: string;
|
|
30
32
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
31
33
|
[k: `data-${string}`]: unknown;
|
|
@@ -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,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAuB5B,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,+
|
|
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;AAuB5B,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAgB,EAChB,OAAe,EACf,YAAY,EAAE,SAAS,EACvB,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,mIAAmI;IACnI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0IA"}
|
|
@@ -21,7 +21,7 @@ function vurgula(metin, q) {
|
|
|
21
21
|
return metin;
|
|
22
22
|
return (_jsxs(_Fragment, { children: [metin.slice(0, i), _jsx("b", { className: "font-bold text-ink", children: metin.slice(i, i + arama.length) }), metin.slice(i + arama.length)] }));
|
|
23
23
|
}
|
|
24
|
-
export function Combobox({ options, value, onChange, onSearch, placeholder, labels, disabled = false, invalid = false, className, ...rest }) {
|
|
24
|
+
export function Combobox({ options, value, onChange, onSearch, placeholder, labels, disabled = false, invalid = false, "aria-label": ariaLabel, className, ...rest }) {
|
|
25
25
|
const id = useId();
|
|
26
26
|
const [open, setOpen] = useState(false);
|
|
27
27
|
const [query, setQuery] = useState("");
|
|
@@ -51,7 +51,7 @@ export function Combobox({ options, value, onChange, onSearch, placeholder, labe
|
|
|
51
51
|
setQuery("");
|
|
52
52
|
setOpen(false);
|
|
53
53
|
}
|
|
54
|
-
return (_jsxs("div", { ...dataProps(rest), ref: box, className: cn("relative", className), children: [_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", className: "pointer-events-none absolute left-3 text-ink-faint" }), _jsx("input", { type: "text", role: "combobox", "aria-expanded": open, "aria-controls": `${id}-list`, "aria-autocomplete": "list", "aria-activedescendant": open && shown[active] ? `${id}-opt-${active}` : undefined, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: selected ? selected.label : placeholder, value: query, onFocus: () => setOpen(true), onChange: (e) => {
|
|
54
|
+
return (_jsxs("div", { ...dataProps(rest), ref: box, className: cn("relative", className), children: [_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", className: "pointer-events-none absolute left-3 text-ink-faint" }), _jsx("input", { type: "text", role: "combobox", "aria-expanded": open, "aria-controls": `${id}-list`, "aria-autocomplete": "list", "aria-activedescendant": open && shown[active] ? `${id}-opt-${active}` : undefined, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: selected ? selected.label : placeholder, value: query, onFocus: () => setOpen(true), onChange: (e) => {
|
|
55
55
|
setQuery(e.target.value);
|
|
56
56
|
setOpen(true);
|
|
57
57
|
onSearch?.(e.target.value);
|
|
@@ -85,9 +85,11 @@ export declare function Calendar({ locale, timeZone, value: hamDeger, range, min
|
|
|
85
85
|
* demektir (`15/04/2026` · `04/15/2026` · `2026-04-15`) ve yanlış okunan bir
|
|
86
86
|
* tarih sessizce yanlış veri üretir. Takvim tek doğru giriş yolu.
|
|
87
87
|
*/
|
|
88
|
-
export declare function DatePicker({ id, locale, timeZone, value: hamDeger, onChange, placeholder, labels, min, max, invalid, disabled, className, ...rest }: {
|
|
88
|
+
export declare function DatePicker({ id, "aria-label": ariaLabel, locale, timeZone, value: hamDeger, onChange, placeholder, labels, min, max, invalid, disabled, className, ...rest }: {
|
|
89
89
|
/** Reaches the field, so `Field htmlFor` can bind. TR: Alana iner, `Field htmlFor` bağlanabilir. */
|
|
90
90
|
id?: string;
|
|
91
|
+
/** The field's accessible name when no visible label is bound to it. TR: Bağlı görünür bir etiket yoksa alanın erişilebilir adı. */
|
|
92
|
+
"aria-label"?: string;
|
|
91
93
|
locale: string;
|
|
92
94
|
/** Which day is "today"; see `Calendar`. TR: "Bugün" hangi gün; bkz. `Calendar`. */
|
|
93
95
|
timeZone?: string;
|
|
@@ -120,9 +122,11 @@ export declare function DatePicker({ id, locale, timeZone, value: hamDeger, onCh
|
|
|
120
122
|
* aday an sınırı deliyorsa en yakın geçerli saate kısılır ve seçimler ona
|
|
121
123
|
* çekilir. Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
122
124
|
*/
|
|
123
|
-
export declare function DateTimePicker({ id, locale, timeZone, value, onChange, placeholder, labels, min, max, minuteStep, invalid, disabled, className, ...rest }: {
|
|
125
|
+
export declare function DateTimePicker({ id, "aria-label": ariaLabel, locale, timeZone, value, onChange, placeholder, labels, min, max, minuteStep, invalid, disabled, className, ...rest }: {
|
|
124
126
|
/** Reaches the field, so `Field htmlFor` can bind. TR: Alana iner, `Field htmlFor` bağlanabilir. */
|
|
125
127
|
id?: string;
|
|
128
|
+
/** The field's accessible name when no visible label is bound to it. TR: Bağlı görünür bir etiket yoksa alanın erişilebilir adı. */
|
|
129
|
+
"aria-label"?: string;
|
|
126
130
|
locale: string;
|
|
127
131
|
/**
|
|
128
132
|
* The IANA zone the clock is shown and picked in, e.g. the workspace's `Europe/Istanbul`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAWA;;;;GAIG;AAEH;;;;;GAKG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAIzD,2EAA2E;AAC3E,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAI/E,eAAO,MAAM,eAAe,QAAO,MAA0D,CAAC;AAmC9F;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,CASpD;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAKhD;AAcD,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAU7E;AAsDD,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,QAAQ,EACf,KAAK,EACL,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kGAAkG;IAClG,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+KA;
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAWA;;;;GAIG;AAEH;;;;;GAKG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAIzD,2EAA2E;AAC3E,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAI/E,eAAO,MAAM,eAAe,QAAO,MAA0D,CAAC;AAmC9F;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,CASpD;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAKhD;AAcD,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAU7E;AAsDD,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,QAAQ,EACf,KAAK,EACL,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kGAAkG;IAClG,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+KA;AA6DD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,GAAG,EACH,OAAe,EACf,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,oGAAoG;IACpG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oIAAoI;IACpI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,kGAAkG;IAClG,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,6DAA6D;IAC7D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,2HAA2H;IAC3H,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4CA;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAc,EACd,OAAe,EACf,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,oGAAoG;IACpG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oIAAoI;IACpI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QACN,aAAa,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,+EAA+E;QAC/E,IAAI,EAAE,MAAM,CAAC;QACb,mFAAmF;QACnF,MAAM,EAAE,MAAM,CAAC;QACf,+IAA+I;QAC/I,MAAM,EAAE,MAAM,CAAC;QACf,oJAAoJ;QACpJ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IACF;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,qGAAqG;IACrG,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2HAA2H;IAC3H,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgKA"}
|
|
@@ -255,8 +255,8 @@ export function Calendar({ locale, timeZone, value: hamDeger, range, min: hamMin
|
|
|
255
255
|
}) }, si)))] })] }));
|
|
256
256
|
}
|
|
257
257
|
/* ── Ortak alan: salt okunur girdi + temizle/aç düğmeleri ── */
|
|
258
|
-
function Alan({ id, shown, placeholder, disabled, invalid, open, hasValue, labels, onToggle, onClear, }) {
|
|
259
|
-
return (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: CalendarPlus, size: "xs", className: "pointer-events-none absolute left-3 text-ink-faint" }), _jsx("input", { id: id, type: "text", readOnly: true, disabled: disabled, value: shown, placeholder: placeholder, onClick: () => !disabled && onToggle(), className: "tamga-input w-full cursor-pointer pr-16 pl-9", "aria-haspopup": "dialog", "aria-expanded": open, "aria-invalid": invalid || undefined }), _jsxs("span", { className: "absolute right-1.5 flex gap-0.5", children: [hasValue ? (_jsx("button", { type: "button", className: "tamga-mini-btn", "data-inset": "true", "aria-label": labels.clear, disabled: disabled, onClick: () => !disabled && onClear(), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null, _jsx("button", { type: "button", className: "tamga-mini-btn", "data-inset": "true", "aria-label": labels.open, disabled: disabled, onClick: () => !disabled && onToggle(), children: _jsx(Icon, { icon: CalendarPlus, size: "xs" }) })] })] }));
|
|
258
|
+
function Alan({ id, ariaLabel, shown, placeholder, disabled, invalid, open, hasValue, labels, onToggle, onClear, }) {
|
|
259
|
+
return (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: CalendarPlus, size: "xs", className: "pointer-events-none absolute left-3 text-ink-faint" }), _jsx("input", { id: id, type: "text", readOnly: true, disabled: disabled, value: shown, placeholder: placeholder, onClick: () => !disabled && onToggle(), className: "tamga-input w-full cursor-pointer pr-16 pl-9", "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": ariaLabel, "aria-invalid": invalid || undefined }), _jsxs("span", { className: "absolute right-1.5 flex gap-0.5", children: [hasValue ? (_jsx("button", { type: "button", className: "tamga-mini-btn", "data-inset": "true", "aria-label": labels.clear, disabled: disabled, onClick: () => !disabled && onClear(), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null, _jsx("button", { type: "button", className: "tamga-mini-btn", "data-inset": "true", "aria-label": labels.open, disabled: disabled, onClick: () => !disabled && onToggle(), children: _jsx(Icon, { icon: CalendarPlus, size: "xs" }) })] })] }));
|
|
260
260
|
}
|
|
261
261
|
/**
|
|
262
262
|
* Alan + açılan takvim.
|
|
@@ -265,7 +265,7 @@ function Alan({ id, shown, placeholder, disabled, invalid, open, hasValue, label
|
|
|
265
265
|
* demektir (`15/04/2026` · `04/15/2026` · `2026-04-15`) ve yanlış okunan bir
|
|
266
266
|
* tarih sessizce yanlış veri üretir. Takvim tek doğru giriş yolu.
|
|
267
267
|
*/
|
|
268
|
-
export function DatePicker({ id, locale, timeZone, value: hamDeger, onChange, placeholder, labels, min, max, invalid = false, disabled = false, className, ...rest }) {
|
|
268
|
+
export function DatePicker({ id, "aria-label": ariaLabel, locale, timeZone, value: hamDeger, onChange, placeholder, labels, min, max, invalid = false, disabled = false, className, ...rest }) {
|
|
269
269
|
const [open, setOpen] = useState(false);
|
|
270
270
|
/* Takvim dışarı tıklayınca ve Escape ile kapanıyor; kutu tetiği de kapsıyor. */
|
|
271
271
|
const kapat = useCallback(() => setOpen(false), []);
|
|
@@ -275,7 +275,7 @@ export function DatePicker({ id, locale, timeZone, value: hamDeger, onChange, pl
|
|
|
275
275
|
const shown = value
|
|
276
276
|
? new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(new Date(`${value}T00:00:00Z`))
|
|
277
277
|
: "";
|
|
278
|
-
return (_jsxs("div", { ref: kutu, ...dataProps(rest), className: cn("relative", className), children: [_jsx(Alan, { id: id, shown: shown, placeholder: placeholder, disabled: disabled, invalid: invalid, open: open, hasValue: Boolean(value), labels: labels, onToggle: () => setOpen((v) => !v), onClear: () => onChange?.(undefined) }), open ? (_jsx("div", { className: "tamga-overlay absolute z-30 mt-2 p-3", onClick: (e) => e.stopPropagation(), children: _jsx(Calendar, { locale: locale, timeZone: timeZone, value: value, min: min, max: max, labels: labels, onSelect: (d) => { onChange?.(d); setOpen(false); } }) })) : null] }));
|
|
278
|
+
return (_jsxs("div", { ref: kutu, ...dataProps(rest), className: cn("relative", className), children: [_jsx(Alan, { id: id, ariaLabel: ariaLabel, shown: shown, placeholder: placeholder, disabled: disabled, invalid: invalid, open: open, hasValue: Boolean(value), labels: labels, onToggle: () => setOpen((v) => !v), onClear: () => onChange?.(undefined) }), open ? (_jsx("div", { className: "tamga-overlay absolute z-30 mt-2 p-3", onClick: (e) => e.stopPropagation(), children: _jsx(Calendar, { locale: locale, timeZone: timeZone, value: value, min: min, max: max, labels: labels, onSelect: (d) => { onChange?.(d); setOpen(false); } }) })) : null] }));
|
|
279
279
|
}
|
|
280
280
|
/**
|
|
281
281
|
* Tarih + saat. AYRI BİR BİLEŞEN, `DatePicker`a bir prop değil: dönen değerin
|
|
@@ -286,7 +286,7 @@ export function DatePicker({ id, locale, timeZone, value: hamDeger, onChange, pl
|
|
|
286
286
|
* aday an sınırı deliyorsa en yakın geçerli saate kısılır ve seçimler ona
|
|
287
287
|
* çekilir. Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
288
288
|
*/
|
|
289
|
-
export function DateTimePicker({ id, locale, timeZone, value, onChange, placeholder, labels, min, max, minuteStep = 5, invalid = false, disabled = false, className, ...rest }) {
|
|
289
|
+
export function DateTimePicker({ id, "aria-label": ariaLabel, locale, timeZone, value, onChange, placeholder, labels, min, max, minuteStep = 5, invalid = false, disabled = false, className, ...rest }) {
|
|
290
290
|
const tz = useMemo(() => dilim(timeZone), [timeZone]);
|
|
291
291
|
const [open, setOpen] = useState(false);
|
|
292
292
|
const kapat = useCallback(() => setOpen(false), []);
|
|
@@ -384,7 +384,7 @@ export function DateTimePicker({ id, locale, timeZone, value, onChange, placehol
|
|
|
384
384
|
}, [locale, onIki, labels.am, labels.pm]);
|
|
385
385
|
const saatEtiketi = (h) => (donem ? String(h % 12 === 0 ? 12 : h % 12) : p2(h));
|
|
386
386
|
const shown = an ? new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone: tz }).format(an) : "";
|
|
387
|
-
return (_jsxs("div", { ref: kutu, ...dataProps(rest), className: cn("relative", className), children: [_jsx(Alan, { id: id, shown: shown, placeholder: placeholder, disabled: disabled, invalid: invalid, open: open, hasValue: Boolean(value), labels: labels, onToggle: () => setOpen((v) => !v), onClear: () => onChange?.(undefined) }), open ? (_jsxs("div", { className: "tamga-overlay absolute z-30 mt-2 p-3", onClick: (e) => e.stopPropagation(), children: [_jsx(Calendar, { locale: locale, timeZone: tz, value: gun, min: minGun, max: maxGun, labels: labels,
|
|
387
|
+
return (_jsxs("div", { ref: kutu, ...dataProps(rest), className: cn("relative", className), children: [_jsx(Alan, { id: id, ariaLabel: ariaLabel, shown: shown, placeholder: placeholder, disabled: disabled, invalid: invalid, open: open, hasValue: Boolean(value), labels: labels, onToggle: () => setOpen((v) => !v), onClear: () => onChange?.(undefined) }), open ? (_jsxs("div", { className: "tamga-overlay absolute z-30 mt-2 p-3", onClick: (e) => e.stopPropagation(), children: [_jsx(Calendar, { locale: locale, timeZone: tz, value: gun, min: minGun, max: maxGun, labels: labels,
|
|
388
388
|
/* Gün seçilince takvim AÇIK KALIYOR: saat daha seçilecek. */
|
|
389
389
|
onSelect: (d) => yay(d, saat, dakika) }), _jsxs("div", { className: "mt-3 flex items-center gap-2 border-t border-line pt-3", children: [_jsx(Select, { "aria-label": labels.hour, placeholder: labels.hour, disabled: !g, value: String(saat), onChange: (v) => yay(g, Number(v), dakika), options: (donem ? saatler.filter((h) => (saat < 12 ? h < 12 : h >= 12)) : saatler).map((h) => ({ value: String(h), label: saatEtiketi(h) })) }), _jsx(Select, { "aria-label": labels.minute, placeholder: labels.minute, disabled: !g, value: String(dakika), onChange: (v) => yay(g, saat, Number(v)), options: dakikalar.map((m) => ({ value: String(m), label: p2(m) })) }), donem ? (_jsx(Select, { "aria-label": labels.period, placeholder: labels.period, disabled: !g, value: saat < 12 ? "am" : "pm", onChange: (v) => yay(g, v === "am" ? saat % 12 : (saat % 12) + 12, dakika), options: [{ value: "am", label: donem.am }, { value: "pm", label: donem.pm }] })) : null] })] })) : null] }));
|
|
390
390
|
}
|
|
@@ -8,7 +8,7 @@ import { type Tone } from "./tone.js";
|
|
|
8
8
|
*
|
|
9
9
|
* Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
|
|
10
10
|
*/
|
|
11
|
-
export declare function Progress({ value, look, blocks, segments, label, valueText, ariaLabel, className, ...rest }: {
|
|
11
|
+
export declare function Progress({ value, look, blocks, segments, label, valueText, ariaLabel, size, tone, className, ...rest }: {
|
|
12
12
|
/**
|
|
13
13
|
* 0–100; clamped, so a bad number cannot paint outside the track. `split` ignores it and reads
|
|
14
14
|
* `segments` instead. TR: 0–100; sınırlanıyor, yani kötü bir sayı yolun dışına boyayamıyor.
|
|
@@ -54,6 +54,18 @@ export declare function Progress({ value, look, blocks, segments, label, valueTe
|
|
|
54
54
|
* bir etiket yoksa erişilebilir ad
|
|
55
55
|
*/
|
|
56
56
|
ariaLabel?: string;
|
|
57
|
+
/**
|
|
58
|
+
* `md` the page's bar: 16px, edged, striped, with the label line. `sm` a 4px line for a table
|
|
59
|
+
* cell: no edge, no label line; width is the caller's (`className`). Only for `bar`. TR: `md`
|
|
60
|
+
* sayfanın çubuğu: 16px, kenarlı, çizgili, etiket satırlı. `sm` tablo hücresi için 4px'lik
|
|
61
|
+
* çizgi: kenarsız, etiketsiz; genişlik çağıranın (`className`). Yalnız `bar` için.
|
|
62
|
+
*/
|
|
63
|
+
size?: "md" | "sm";
|
|
64
|
+
/**
|
|
65
|
+
* The fill's colour from the kit's tone roles; absent, the accent. TR: Dolgunun rengi kitin
|
|
66
|
+
* ton rollerinden; yoksa vurgu.
|
|
67
|
+
*/
|
|
68
|
+
tone?: Tone;
|
|
57
69
|
className?: string;
|
|
58
70
|
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
59
71
|
[k: `data-${string}`]: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AACzD;;;;;;;;GAQG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,KAAS,EACT,IAAY,EACZ,MAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAc,EACd,GAAG,IAAI,EACR,EAAE;IACD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClC,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IACjG;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAqFA"}
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AACzD;;;;;;;;GAQG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,KAAS,EACT,IAAY,EACZ,MAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,IAAW,EACX,IAAI,EACJ,SAAc,EACd,GAAG,IAAI,EACR,EAAE;IACD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClC,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IACjG;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAqFA"}
|
|
@@ -11,9 +11,9 @@ import { toneOf, yiginRenk } from "./tone.js";
|
|
|
11
11
|
*
|
|
12
12
|
* Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
|
|
13
13
|
*/
|
|
14
|
-
export function Progress({ value = 0, look = "bar", blocks = 10, segments, label, valueText, ariaLabel, className = "", ...rest }) {
|
|
14
|
+
export function Progress({ value = 0, look = "bar", blocks = 10, segments, label, valueText, ariaLabel, size = "md", tone, className = "", ...rest }) {
|
|
15
15
|
const pct = Math.max(0, Math.min(100, value));
|
|
16
|
-
const ust = label || valueText ? (_jsxs("div", { className: "tamga-progress-ust", children: [_jsx("span", { children: label }), _jsx("span", { className: "tamga-progress-deger", children: valueText ?? `%${Math.round(pct)}` })] })) : null;
|
|
16
|
+
const ust = (label || valueText) && size === "md" ? (_jsxs("div", { className: "tamga-progress-ust", children: [_jsx("span", { children: label }), _jsx("span", { className: "tamga-progress-deger", children: valueText ?? `%${Math.round(pct)}` })] })) : null;
|
|
17
17
|
if (look === "blocks") {
|
|
18
18
|
/* SON DOLU HÜCRE AÇIK TONDA: "burada duruyoruz" diyen tek işaret o · hepsi
|
|
19
19
|
aynı dolulukta olduğunda saymak gerekiyor, oysa sayı zaten üstte yazılı. */
|
|
@@ -25,5 +25,5 @@ export function Progress({ value = 0, look = "bar", blocks = 10, segments, label
|
|
|
25
25
|
const toplam = paylar.reduce((n, p) => n + p.value, 0) || 1;
|
|
26
26
|
return (_jsxs("div", { ...dataProps(rest), className: className, children: [ust, _jsx("div", { className: "tamga-progress-split", role: "img", "aria-label": label ?? ariaLabel ?? "Progress", children: paylar.map(({ value: v, tone, label: _etiket, ...kanca }, i) => (_createElement("span", { ...kanca, key: i, style: { width: `${(v / toplam) * 100}%`, background: tone ? toneOf(tone).mark : yiginRenk(i) } }))) }), paylar.some((p) => p.label) ? (_jsx("div", { className: "tamga-progress-lejant", children: paylar.map((p, i) => (p.label ? _jsx("span", { children: p.label }, i) : null)) })) : null] }));
|
|
27
27
|
}
|
|
28
|
-
return (_jsxs("div", { ...dataProps(rest), className: className, children: [ust, _jsx("div", { className: "tamga-progress", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label ?? ariaLabel ?? "Progress", children: _jsx("div", { className: "tamga-progress-fill", style: { width: `${pct}%` } }) })] }));
|
|
28
|
+
return (_jsxs("div", { ...dataProps(rest), className: className, children: [ust, _jsx("div", { className: size === "sm" ? "tamga-progress tamga-progress-sm" : "tamga-progress", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label ?? ariaLabel ?? "Progress", children: _jsx("div", { className: "tamga-progress-fill", style: tone ? { width: `${pct}%`, background: toneOf(tone).mark } : { width: `${pct}%` } }) })] }));
|
|
29
29
|
}
|
package/dist/fonts.css
CHANGED
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.7.
|
|
1
|
+
/*! tamga-ui 0.7.3 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
--offset-room: 3px;
|
|
12
12
|
|
|
13
|
+
--offset-room-ring: 4px;
|
|
14
|
+
|
|
13
15
|
--mark-tick: 2px;
|
|
14
16
|
|
|
15
17
|
--mark-dot: 8px;
|
|
@@ -379,7 +381,7 @@
|
|
|
379
381
|
min-height: 0;
|
|
380
382
|
overflow-y: auto;
|
|
381
383
|
|
|
382
|
-
padding: var(--offset-room);
|
|
384
|
+
padding: var(--offset-room-ring);
|
|
383
385
|
|
|
384
386
|
scrollbar-width: none;
|
|
385
387
|
}
|
|
@@ -439,12 +441,23 @@
|
|
|
439
441
|
gap: 8px;
|
|
440
442
|
min-height: 0;
|
|
441
443
|
overflow: hidden;
|
|
444
|
+
|
|
445
|
+
padding: var(--offset-room-ring);
|
|
446
|
+
margin: calc(-1 * var(--offset-room-ring));
|
|
447
|
+
visibility: visible;
|
|
448
|
+
transition: visibility 0s;
|
|
442
449
|
}
|
|
443
450
|
.tamga-rail-group-body[data-open="false"] {
|
|
444
451
|
grid-template-rows: 0fr;
|
|
445
452
|
}
|
|
453
|
+
|
|
454
|
+
.tamga-rail-group-body[data-open="false"] > div {
|
|
455
|
+
visibility: hidden;
|
|
456
|
+
transition: visibility 0s var(--duration-press);
|
|
457
|
+
}
|
|
446
458
|
@media (prefers-reduced-motion: reduce) {
|
|
447
459
|
.tamga-rail-group-body,
|
|
460
|
+
.tamga-rail-group-body > div,
|
|
448
461
|
.tamga-rail-section-caret {
|
|
449
462
|
transition: none;
|
|
450
463
|
}
|
|
@@ -1088,6 +1101,64 @@
|
|
|
1088
1101
|
cursor: pointer;
|
|
1089
1102
|
}
|
|
1090
1103
|
|
|
1104
|
+
.tamga-filter-bar {
|
|
1105
|
+
display: flex;
|
|
1106
|
+
flex-direction: column;
|
|
1107
|
+
gap: 14px;
|
|
1108
|
+
padding: 16px;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
[data-filters] > .tamga-filter-bar {
|
|
1112
|
+
flex: 1 1 100%;
|
|
1113
|
+
padding: 0;
|
|
1114
|
+
border: 0;
|
|
1115
|
+
border-radius: 0;
|
|
1116
|
+
background: none;
|
|
1117
|
+
box-shadow: none;
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
.tamga-filter-ara,
|
|
1121
|
+
.tamga-filter-alan {
|
|
1122
|
+
display: flex;
|
|
1123
|
+
flex-direction: column;
|
|
1124
|
+
gap: 6px;
|
|
1125
|
+
min-width: 0;
|
|
1126
|
+
}
|
|
1127
|
+
.tamga-filter-ara {
|
|
1128
|
+
flex: 2 1 18.75rem;
|
|
1129
|
+
}
|
|
1130
|
+
.tamga-filter-alan {
|
|
1131
|
+
flex: 1 1 10rem;
|
|
1132
|
+
}
|
|
1133
|
+
.tamga-filter-alan[data-range] {
|
|
1134
|
+
flex-basis: 20rem;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
.tamga-filter-kir {
|
|
1138
|
+
height: 0;
|
|
1139
|
+
flex-basis: 100%;
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
.tamga-filter-grup {
|
|
1143
|
+
display: flex;
|
|
1144
|
+
flex-direction: column;
|
|
1145
|
+
gap: 14px;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
@media (max-width: 39.9375rem) {
|
|
1149
|
+
.tamga-filter-genis {
|
|
1150
|
+
display: none;
|
|
1151
|
+
}
|
|
1152
|
+
.tamga-filter-row > .tamga-filter-ara {
|
|
1153
|
+
flex-basis: 0;
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
@media (min-width: 40rem) {
|
|
1157
|
+
.tamga-filter-dar {
|
|
1158
|
+
display: none;
|
|
1159
|
+
}
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1091
1162
|
.tamga-filter-row {
|
|
1092
1163
|
--filter-gap: 12px;
|
|
1093
1164
|
display: flex;
|
|
@@ -2993,6 +3064,16 @@
|
|
|
2993
3064
|
transition: width var(--duration-base) var(--ease-standard);
|
|
2994
3065
|
}
|
|
2995
3066
|
|
|
3067
|
+
.tamga-progress-sm {
|
|
3068
|
+
height: 4px;
|
|
3069
|
+
border: 0;
|
|
3070
|
+
box-shadow: none;
|
|
3071
|
+
}
|
|
3072
|
+
.tamga-progress-sm > .tamga-progress-fill {
|
|
3073
|
+
background: var(--color-accent);
|
|
3074
|
+
border-right: 0;
|
|
3075
|
+
}
|
|
3076
|
+
|
|
2996
3077
|
.tamga-progress-bloklar {
|
|
2997
3078
|
display: grid;
|
|
2998
3079
|
gap: 4px;
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED