tamga-ui 0.3.0 → 0.3.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 +55 -0
- package/dist/components/advanced-input.d.ts +9 -3
- package/dist/components/advanced-input.d.ts.map +1 -1
- package/dist/components/advanced-input.js +7 -6
- package/dist/components/appearance.d.ts +9 -3
- package/dist/components/appearance.d.ts.map +1 -1
- package/dist/components/appearance.js +7 -6
- package/dist/components/avatar.d.ts +6 -2
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +5 -4
- package/dist/components/badge.d.ts +9 -3
- package/dist/components/badge.d.ts.map +1 -1
- package/dist/components/badge.js +7 -6
- package/dist/components/bar.d.ts +3 -1
- package/dist/components/bar.d.ts.map +1 -1
- package/dist/components/bar.js +3 -2
- package/dist/components/chart.d.ts +3 -1
- package/dist/components/chart.d.ts.map +1 -1
- package/dist/components/chart.js +3 -2
- package/dist/components/checkbox.d.ts +3 -1
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +3 -2
- package/dist/components/chrome.d.ts +12 -4
- package/dist/components/chrome.d.ts.map +1 -1
- package/dist/components/chrome.js +9 -8
- package/dist/components/combobox.d.ts +3 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +3 -2
- package/dist/components/data-table.d.ts +9 -3
- package/dist/components/data-table.d.ts.map +1 -1
- package/dist/components/data-table.js +7 -6
- 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 +5 -4
- package/dist/components/disclosure.d.ts +5 -2
- package/dist/components/disclosure.d.ts.map +1 -1
- package/dist/components/disclosure.js +5 -4
- package/dist/components/display.d.ts +17 -6
- package/dist/components/display.d.ts.map +1 -1
- package/dist/components/display.js +16 -12
- package/dist/components/empty-state.d.ts +15 -5
- package/dist/components/empty-state.d.ts.map +1 -1
- package/dist/components/empty-state.js +11 -10
- package/dist/components/error-state.d.ts +3 -1
- package/dist/components/error-state.d.ts.map +1 -1
- package/dist/components/error-state.js +3 -2
- package/dist/components/file-upload.d.ts +3 -1
- package/dist/components/file-upload.d.ts.map +1 -1
- package/dist/components/file-upload.js +3 -2
- package/dist/components/gauge.d.ts +4 -2
- package/dist/components/gauge.d.ts.map +1 -1
- package/dist/components/gauge.js +5 -4
- package/dist/components/layout.d.ts +24 -5
- package/dist/components/layout.d.ts.map +1 -1
- package/dist/components/layout.js +18 -8
- package/dist/components/log-view.d.ts +3 -1
- package/dist/components/log-view.d.ts.map +1 -1
- package/dist/components/log-view.js +3 -2
- package/dist/components/number-input.d.ts +3 -1
- package/dist/components/number-input.d.ts.map +1 -1
- package/dist/components/number-input.js +3 -2
- package/dist/components/overlay.d.ts +18 -6
- package/dist/components/overlay.d.ts.map +1 -1
- package/dist/components/overlay.js +13 -12
- package/dist/components/pagination.d.ts +3 -1
- package/dist/components/pagination.d.ts.map +1 -1
- package/dist/components/pagination.js +3 -2
- package/dist/components/pie.d.ts +3 -1
- package/dist/components/pie.d.ts.map +1 -1
- package/dist/components/pie.js +3 -2
- package/dist/components/primitives.d.ts +20 -7
- package/dist/components/primitives.d.ts.map +1 -1
- package/dist/components/primitives.js +15 -14
- package/dist/components/progress.d.ts +3 -6
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +3 -2
- package/dist/components/radio-group.d.ts +3 -1
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +3 -2
- package/dist/components/rich-text.d.ts +3 -1
- package/dist/components/rich-text.d.ts.map +1 -1
- package/dist/components/rich-text.js +3 -2
- package/dist/components/section.d.ts +3 -1
- package/dist/components/section.d.ts.map +1 -1
- package/dist/components/section.js +3 -2
- package/dist/components/segmented.d.ts +8 -2
- package/dist/components/segmented.d.ts.map +1 -1
- package/dist/components/segmented.js +1 -1
- package/dist/components/skeleton.d.ts +25 -14
- package/dist/components/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton.js +24 -18
- package/dist/components/slider.d.ts +3 -1
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +3 -2
- package/dist/components/spinner.d.ts +2 -1
- package/dist/components/spinner.d.ts.map +1 -1
- package/dist/components/spinner.js +3 -2
- package/dist/components/square-picker.d.ts +3 -1
- package/dist/components/square-picker.d.ts.map +1 -1
- package/dist/components/square-picker.js +3 -2
- package/dist/components/stacked-bar.d.ts +3 -1
- package/dist/components/stacked-bar.d.ts.map +1 -1
- package/dist/components/stacked-bar.js +3 -2
- package/dist/components/surface.d.ts +19 -5
- package/dist/components/surface.d.ts.map +1 -1
- package/dist/components/surface.js +11 -10
- package/dist/components/switch.d.ts +3 -1
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +3 -2
- package/dist/components/tabs.d.ts +3 -1
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +3 -2
- package/dist/components/timeline-strip.d.ts +3 -1
- package/dist/components/timeline-strip.d.ts.map +1 -1
- package/dist/components/timeline-strip.js +3 -2
- package/dist/components/tree-select.d.ts +3 -1
- package/dist/components/tree-select.d.ts.map +1 -1
- package/dist/components/tree-select.js +3 -2
- package/dist/kit.css +1 -1
- package/dist/lib/data-props.d.ts +20 -0
- package/dist/lib/data-props.d.ts.map +1 -0
- package/dist/lib/data-props.js +25 -0
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,61 @@ 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.3.2
|
|
9
|
+
|
|
10
|
+
**Every component that draws a host element now accepts `data-*`.** 98 of them; before this, 79 did
|
|
11
|
+
not.
|
|
12
|
+
|
|
13
|
+
A `data-*` attribute is inert: it binds to no behaviour, it only carries a hook for a test, a style
|
|
14
|
+
or an analytics reader. Refusing it cannot protect a component from anything. What it does instead
|
|
15
|
+
is push the caller off the component entirely — a hook is needed, the component will not take it,
|
|
16
|
+
so the class goes on a hand-written element and every guard that came with the component stays
|
|
17
|
+
behind: the clip that keeps a menu whole inside a card, the wrapper that lets a table scroll on a
|
|
18
|
+
narrow screen, the button that a keyboard can reach. None of it errors. The attribute is simply
|
|
19
|
+
absent, and so is the behaviour.
|
|
20
|
+
|
|
21
|
+
`aria-*` is deliberately not in this passthrough. It is not inert: an `aria-label` from outside
|
|
22
|
+
silently overrides the accessible name a component computed for itself. Accessibility is asked for
|
|
23
|
+
by an explicit prop.
|
|
24
|
+
|
|
25
|
+
`Segmented` and `Steps` are the two exceptions, and the reason is written into the gate: their hooks
|
|
26
|
+
belong to the individual option, not the wrapper, and `options[]` already carries them.
|
|
27
|
+
|
|
28
|
+
### Added
|
|
29
|
+
|
|
30
|
+
- **`Card.as`** — `div` (default), `section`, `article` or `ul`. A card is usually a *section*, and
|
|
31
|
+
the element is document structure rather than a presentation choice.
|
|
32
|
+
|
|
33
|
+
### Internal
|
|
34
|
+
|
|
35
|
+
- **`check-data-props`** — a 17th gate. It reads every exported component that renders a host
|
|
36
|
+
element and fails if it cannot take `data-*`. The five fixes that preceded this release were five
|
|
37
|
+
separate discoveries of one defect, found one call site at a time; this gate finds all of them in
|
|
38
|
+
one pass.
|
|
39
|
+
|
|
40
|
+
## 0.3.1
|
|
41
|
+
|
|
42
|
+
Three components refused something a consumer legitimately needed, and in each case the way out was
|
|
43
|
+
to drop the component and write its class by hand. A class without its component is the same paint
|
|
44
|
+
with none of the behaviour, so this release is about closing the reasons to reach for it.
|
|
45
|
+
|
|
46
|
+
### Added
|
|
47
|
+
|
|
48
|
+
- **`Link.linkComponent`** — the router's link, so an in-app link does not reload the page. Without
|
|
49
|
+
it the component could only draw a plain `<a>`, and anything with client-side routing had to hand
|
|
50
|
+
write `tamga-link` on its own link, taking the class and leaving behind the `rel="noopener
|
|
51
|
+
noreferrer"` that `external` brings. `RailLink` and `AppShell` already solved this the same way;
|
|
52
|
+
`Link` was the one that had not.
|
|
53
|
+
- **`Card.as`** — `div` (default), `section`, `article` or `ul`. A card is usually a *section*, and
|
|
54
|
+
a component that refuses the element pushes the caller to write `tamga-card` by hand. That trade
|
|
55
|
+
is worse than it looks: the hand-written version also loses `overflow="visible"`, which is the
|
|
56
|
+
guard against a menu or a calendar being clipped at the card's edge. Nothing errors when that
|
|
57
|
+
happens; the panel is simply half invisible and the first suspect is z-index, which cannot fix it.
|
|
58
|
+
- **`Segmented` options carry their own attributes.** Anything beyond `value` and `label` now lands
|
|
59
|
+
on that option's button, so a filter strip can tag each choice with the hook a test or a style
|
|
60
|
+
needs. Without it the whole control had to be hand-rolled, losing `aria-pressed` and the keyboard
|
|
61
|
+
behaviour with it.
|
|
62
|
+
|
|
8
63
|
## 0.3.0
|
|
9
64
|
|
|
10
65
|
### Breaking
|
|
@@ -20,7 +20,7 @@ export declare function PasswordInput({ labels, className, ...props }: Omit<Reac
|
|
|
20
20
|
* "hangi anahtar bu" sorusunu cevapsız bırakır; üç anahtarı olan biri
|
|
21
21
|
* hangisine baktığını bilemez.
|
|
22
22
|
*/
|
|
23
|
-
export declare function SecretField({ value, labels, visibleChars, className, }: {
|
|
23
|
+
export declare function SecretField({ value, labels, visibleChars, className, ...rest }: {
|
|
24
24
|
value: string;
|
|
25
25
|
labels: {
|
|
26
26
|
reveal: string;
|
|
@@ -35,6 +35,8 @@ export declare function SecretField({ value, labels, visibleChars, className, }:
|
|
|
35
35
|
*/
|
|
36
36
|
visibleChars?: number;
|
|
37
37
|
className?: string;
|
|
38
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
39
|
+
[k: `data-${string}`]: unknown;
|
|
38
40
|
}): import("react").JSX.Element;
|
|
39
41
|
/**
|
|
40
42
|
* Etiket girdisi.
|
|
@@ -47,7 +49,7 @@ export declare function SecretField({ value, labels, visibleChars, className, }:
|
|
|
47
49
|
* yazmak bir hata değil, bir tekrardır, ve kullanıcı zaten istediğini almış
|
|
48
50
|
* olur.
|
|
49
51
|
*/
|
|
50
|
-
export declare function TagsInput({ value, onChange, placeholder, labels, max, className, }: {
|
|
52
|
+
export declare function TagsInput({ value, onChange, placeholder, labels, max, className, ...rest }: {
|
|
51
53
|
value: readonly string[];
|
|
52
54
|
onChange: (next: string[]) => void;
|
|
53
55
|
placeholder: string;
|
|
@@ -57,6 +59,8 @@ export declare function TagsInput({ value, onChange, placeholder, labels, max, c
|
|
|
57
59
|
/** The ceiling; the input closes once it is full. TR: Üst sınır; dolduğunda girdi kapanır. */
|
|
58
60
|
max?: number;
|
|
59
61
|
className?: string;
|
|
62
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
63
|
+
[k: `data-${string}`]: unknown;
|
|
60
64
|
}): import("react").JSX.Element;
|
|
61
65
|
/**
|
|
62
66
|
* Çoklu seçim — aranabilir.
|
|
@@ -69,7 +73,7 @@ export declare function TagsInput({ value, onChange, placeholder, labels, max, c
|
|
|
69
73
|
* değil: seçim ile seçilenler arasındaki mesafe arttıkça, kullanıcı neyi
|
|
70
74
|
* seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
|
|
71
75
|
*/
|
|
72
|
-
export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, }: {
|
|
76
|
+
export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }: {
|
|
73
77
|
options: readonly {
|
|
74
78
|
value: string;
|
|
75
79
|
label: string;
|
|
@@ -84,6 +88,8 @@ export declare function MultiSelect({ options, value, onChange, placeholder, lab
|
|
|
84
88
|
open: string;
|
|
85
89
|
};
|
|
86
90
|
className?: string;
|
|
91
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
92
|
+
[k: `data-${string}`]: unknown;
|
|
87
93
|
}): import("react").JSX.Element;
|
|
88
94
|
/**
|
|
89
95
|
* Zamanlama girdisi — "her N dakikada bir".
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"AAeA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,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;CACxC,+BAwBA;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;IACpE,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,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAwJA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,OAAO,EAAE,SAAS;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useId, useRef, useState } from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { dataProps } from "../lib/data-props.js";
|
|
5
6
|
import { Icon } from "./icon.js";
|
|
6
7
|
import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
|
|
7
8
|
/* ------------------------------------------------------------------ *
|
|
@@ -30,7 +31,7 @@ export function PasswordInput({ labels, className, ...props }) {
|
|
|
30
31
|
* "hangi anahtar bu" sorusunu cevapsız bırakır; üç anahtarı olan biri
|
|
31
32
|
* hangisine baktığını bilemez.
|
|
32
33
|
*/
|
|
33
|
-
export function SecretField({ value, labels, visibleChars = 4, className, }) {
|
|
34
|
+
export function SecretField({ value, labels, visibleChars = 4, className, ...rest }) {
|
|
34
35
|
const [shown, setShown] = useState(false);
|
|
35
36
|
const [copied, setCopied] = useState("idle");
|
|
36
37
|
const timer = useRef(undefined);
|
|
@@ -55,7 +56,7 @@ export function SecretField({ value, labels, visibleChars = 4, className, }) {
|
|
|
55
56
|
window.clearTimeout(timer.current);
|
|
56
57
|
timer.current = window.setTimeout(() => setCopied("idle"), 1600);
|
|
57
58
|
}
|
|
58
|
-
return (_jsxs("span", { className: cn("relative flex items-center", className), children: [_jsx("input", { readOnly: true, value: shown ? value : masked, className: "tamga-input w-full pr-18 font-mono",
|
|
59
|
+
return (_jsxs("span", { ...dataProps(rest), className: cn("relative flex items-center", className), children: [_jsx("input", { readOnly: true, value: shown ? value : masked, className: "tamga-input w-full pr-18 font-mono",
|
|
59
60
|
/* Salt-okunur bir alan yine de odaklanabilir olmalı: kullanıcı onu
|
|
60
61
|
seçip elle kopyalayabilsin. `disabled` bunu imkânsız kılardı. */
|
|
61
62
|
onFocus: (e) => e.currentTarget.select() }), _jsxs("span", { className: "absolute right-1.5 flex gap-0.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": shown ? labels.hide : labels.reveal, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": copied === "done" ? labels.copied : copied === "failed" ? labels.failed : labels.copy, onClick: copy, children: _jsx(Icon, { icon: copied === "done" ? Check : Customize, size: "xs" }) })] })] }));
|
|
@@ -71,7 +72,7 @@ export function SecretField({ value, labels, visibleChars = 4, className, }) {
|
|
|
71
72
|
* yazmak bir hata değil, bir tekrardır, ve kullanıcı zaten istediğini almış
|
|
72
73
|
* olur.
|
|
73
74
|
*/
|
|
74
|
-
export function TagsInput({ value, onChange, placeholder, labels, max, className, }) {
|
|
75
|
+
export function TagsInput({ value, onChange, placeholder, labels, max, className, ...rest }) {
|
|
75
76
|
const [draft, setDraft] = useState("");
|
|
76
77
|
const full = max !== undefined && value.length >= max;
|
|
77
78
|
function commit() {
|
|
@@ -81,7 +82,7 @@ export function TagsInput({ value, onChange, placeholder, labels, max, className
|
|
|
81
82
|
return;
|
|
82
83
|
onChange([...value, tag]);
|
|
83
84
|
}
|
|
84
|
-
return (_jsxs("span", { className: cn("tamga-input h-auto min-h-10 w-full flex-wrap items-center gap-1.5 py-1.5", className), style: { display: "flex" }, children: [value.map((tag) => (_jsxs("span", { className: "tamga-chip gap-1", children: [tag, _jsx("button", { type: "button", "aria-label": labels.remove(tag), onClick: () => onChange(value.filter((x) => x !== tag)), className: "-mr-1 inline-flex items-center", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, tag))), !full ? (_jsx("input", { value: draft, placeholder: value.length === 0 ? placeholder : undefined, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
|
|
85
|
+
return (_jsxs("span", { ...dataProps(rest), className: cn("tamga-input h-auto min-h-10 w-full flex-wrap items-center gap-1.5 py-1.5", className), style: { display: "flex" }, children: [value.map((tag) => (_jsxs("span", { className: "tamga-chip gap-1", children: [tag, _jsx("button", { type: "button", "aria-label": labels.remove(tag), onClick: () => onChange(value.filter((x) => x !== tag)), className: "-mr-1 inline-flex items-center", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, tag))), !full ? (_jsx("input", { value: draft, placeholder: value.length === 0 ? placeholder : undefined, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
|
|
85
86
|
if (e.key === "Enter" || e.key === ",") {
|
|
86
87
|
e.preventDefault();
|
|
87
88
|
commit();
|
|
@@ -102,7 +103,7 @@ export function TagsInput({ value, onChange, placeholder, labels, max, className
|
|
|
102
103
|
* değil: seçim ile seçilenler arasındaki mesafe arttıkça, kullanıcı neyi
|
|
103
104
|
* seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
|
|
104
105
|
*/
|
|
105
|
-
export function MultiSelect({ options, value, onChange, placeholder, labels, className, }) {
|
|
106
|
+
export function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }) {
|
|
106
107
|
const id = useId();
|
|
107
108
|
const [open, setOpen] = useState(false);
|
|
108
109
|
const [query, setQuery] = useState("");
|
|
@@ -157,7 +158,7 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
|
|
|
157
158
|
if (e.key === "Escape")
|
|
158
159
|
setOpen(false);
|
|
159
160
|
}
|
|
160
|
-
return (_jsxs("div", { ref: box, className: cn("relative", className),
|
|
161
|
+
return (_jsxs("div", { ...dataProps(rest), ref: box, className: cn("relative", className),
|
|
161
162
|
/* Odak kutunun DIŞINA çıkınca kapanıyor — tıklama dinleyicisiyle değil.
|
|
162
163
|
Dışarı tıklamayı dinlemek klavyeyle çıkanı görmez ve liste açık kalır. */
|
|
163
164
|
onBlur: (e) => {
|
|
@@ -9,7 +9,7 @@ export type SwatchOption = {
|
|
|
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.
|
|
11
11
|
*/
|
|
12
|
-
export declare function ColorSwatches({ options, value, onChange, customLabel, custom, className, }: {
|
|
12
|
+
export declare function ColorSwatches({ options, value, onChange, customLabel, custom, className, ...rest }: {
|
|
13
13
|
options: readonly SwatchOption[];
|
|
14
14
|
value: string;
|
|
15
15
|
onChange: (hex: string) => void;
|
|
@@ -18,6 +18,8 @@ export declare function ColorSwatches({ options, value, onChange, customLabel, c
|
|
|
18
18
|
/** Whether a free colour is offered at all. TR: Serbest rengin hiç sunulup sunulmadığı. */
|
|
19
19
|
custom?: boolean;
|
|
20
20
|
className?: string;
|
|
21
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
22
|
+
[k: `data-${string}`]: unknown;
|
|
21
23
|
}): import("react").JSX.Element;
|
|
22
24
|
export type ThemeChoice = "light" | "dark" | "system";
|
|
23
25
|
/**
|
|
@@ -31,7 +33,7 @@ export type ThemeChoice = "light" | "dark" | "system";
|
|
|
31
33
|
* kullanıcı sonucu görmek istiyor. "Sistem" iki yarımı tek karede gösteriyor,
|
|
32
34
|
* anlamı tam olarak bu.
|
|
33
35
|
*/
|
|
34
|
-
export declare function ThemeCards({ value, onChange, labels, className, }: {
|
|
36
|
+
export declare function ThemeCards({ value, onChange, labels, className, ...rest }: {
|
|
35
37
|
value: ThemeChoice;
|
|
36
38
|
onChange: (next: ThemeChoice) => void;
|
|
37
39
|
/** The three names and the group's accessible name. TR: Üç ad ve kümenin erişilebilir adı. */
|
|
@@ -42,6 +44,8 @@ export declare function ThemeCards({ value, onChange, labels, className, }: {
|
|
|
42
44
|
group: string;
|
|
43
45
|
};
|
|
44
46
|
className?: string;
|
|
47
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
48
|
+
[k: `data-${string}`]: unknown;
|
|
45
49
|
}): import("react").JSX.Element;
|
|
46
50
|
/**
|
|
47
51
|
* One image with a preview, a replace and a remove.
|
|
@@ -53,7 +57,7 @@ export declare function ThemeCards({ value, onChange, labels, className, }: {
|
|
|
53
57
|
* TR: `FileUpload` DEĞİL: o bir GALERİ (çoklu seçim, sıralama okları, "kapak"
|
|
54
58
|
* rozeti). Ürün fotoğrafları için doğru, tek bir logo için yanlış.
|
|
55
59
|
*/
|
|
56
|
-
export declare function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, }: {
|
|
60
|
+
export declare function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, ...rest }: {
|
|
57
61
|
value: string | null;
|
|
58
62
|
onChange: (next: string | null) => void;
|
|
59
63
|
/** Longest edge of the stored image, in pixels. TR: Saklanan görselin en uzun kenarı, piksel. */
|
|
@@ -74,5 +78,7 @@ export declare function ImageField({ value, onChange, maxEdge, labels, preview,
|
|
|
74
78
|
/** An extra control beside the buttons. TR: Düğmelerin yanına giren ek kontrol. */
|
|
75
79
|
extra?: ReactNode;
|
|
76
80
|
className?: string;
|
|
81
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
82
|
+
[k: `data-${string}`]: unknown;
|
|
77
83
|
}): import("react").JSX.Element;
|
|
78
84
|
//# sourceMappingURL=appearance.d.ts.map
|
|
@@ -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;
|
|
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;AAEF;;;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,+BAqCA;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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useId, useRef, useState } from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { dataProps } from "../lib/data-props.js";
|
|
5
6
|
import { IMAGE_ACCEPT, prepareImage } from "../lib/image.js";
|
|
6
7
|
import { Alert } from "./primitives.js";
|
|
7
8
|
import { Button } from "./button.js";
|
|
@@ -9,10 +10,10 @@ import { Button } from "./button.js";
|
|
|
9
10
|
* Brand colour chosen from a few squares, or written by hand.
|
|
10
11
|
* TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
|
|
11
12
|
*/
|
|
12
|
-
export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, }) {
|
|
13
|
+
export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, ...rest }) {
|
|
13
14
|
const secili = (hex) => hex.toLowerCase() === value.toLowerCase();
|
|
14
15
|
const hazirMi = options.some((o) => secili(o.hex));
|
|
15
|
-
return (_jsxs("span", { className: cn("flex flex-wrap items-center gap-3", className), children: [options.map((o) => (_jsx("button", { type: "button", className: "tamga-swatch", "data-selected": secili(o.hex), "aria-label": o.label, title: o.label, onClick: () => onChange(o.hex), children: _jsx("span", { "aria-hidden": true, style: { background: o.hex } }) }, o.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] }));
|
|
16
|
+
return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-3", className), children: [options.map((o) => (_jsx("button", { type: "button", className: "tamga-swatch", "data-selected": secili(o.hex), "aria-label": o.label, title: o.label, onClick: () => onChange(o.hex), children: _jsx("span", { "aria-hidden": true, style: { background: o.hex } }) }, o.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] }));
|
|
16
17
|
}
|
|
17
18
|
function Yarim({ theme }) {
|
|
18
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%" } })] })] }));
|
|
@@ -28,13 +29,13 @@ function Yarim({ theme }) {
|
|
|
28
29
|
* kullanıcı sonucu görmek istiyor. "Sistem" iki yarımı tek karede gösteriyor,
|
|
29
30
|
* anlamı tam olarak bu.
|
|
30
31
|
*/
|
|
31
|
-
export function ThemeCards({ value, onChange, labels, className, }) {
|
|
32
|
+
export function ThemeCards({ value, onChange, labels, className, ...rest }) {
|
|
32
33
|
const secenekler = [
|
|
33
34
|
{ deger: "light", ad: labels.light },
|
|
34
35
|
{ deger: "dark", ad: labels.dark },
|
|
35
36
|
{ deger: "system", ad: labels.system },
|
|
36
37
|
];
|
|
37
|
-
return (_jsx("div", { role: "radiogroup", "aria-label": labels.group, className: cn("flex flex-wrap gap-3", className), children: secenekler.map((s) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === s.deger, tabIndex: value === s.deger ? 0 : -1, "data-selected": value === s.deger, className: "tamga-theme-card", onClick: () => onChange(s.deger), children: [_jsxs("span", { className: "tamga-theme-box", children: [s.deger === "dark" ? _jsx(Yarim, { theme: "dark" }) : _jsx(Yarim, { theme: "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark" }) : null] }), _jsx("span", { className: "tamga-theme-name", children: s.ad })] }, s.deger))) }));
|
|
38
|
+
return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": labels.group, className: cn("flex flex-wrap gap-3", className), children: secenekler.map((s) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === s.deger, tabIndex: value === s.deger ? 0 : -1, "data-selected": value === s.deger, className: "tamga-theme-card", onClick: () => onChange(s.deger), children: [_jsxs("span", { className: "tamga-theme-box", children: [s.deger === "dark" ? _jsx(Yarim, { theme: "dark" }) : _jsx(Yarim, { theme: "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark" }) : null] }), _jsx("span", { className: "tamga-theme-name", children: s.ad })] }, s.deger))) }));
|
|
38
39
|
}
|
|
39
40
|
/**
|
|
40
41
|
* One image with a preview, a replace and a remove.
|
|
@@ -46,7 +47,7 @@ export function ThemeCards({ value, onChange, labels, className, }) {
|
|
|
46
47
|
* TR: `FileUpload` DEĞİL: o bir GALERİ (çoklu seçim, sıralama okları, "kapak"
|
|
47
48
|
* rozeti). Ürün fotoğrafları için doğru, tek bir logo için yanlış.
|
|
48
49
|
*/
|
|
49
|
-
export function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, }) {
|
|
50
|
+
export function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, ...rest }) {
|
|
50
51
|
const id = useId();
|
|
51
52
|
const girdi = useRef(null);
|
|
52
53
|
const [hata, setHata] = useState(null);
|
|
@@ -69,5 +70,5 @@ export function ImageField({ value, onChange, maxEdge, labels, preview, extra, c
|
|
|
69
70
|
girdi.current.value = "";
|
|
70
71
|
}
|
|
71
72
|
}
|
|
72
|
-
return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsx("input", { ref: girdi, id: id, type: "file", accept: IMAGE_ACCEPT, className: "sr-only", onChange: (e) => al(e.target.files?.[0]) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("span", { className: "tamga-image-field", "data-empty": value ? undefined : "true", children: value ? preview(value) : labels.empty }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", onClick: () => girdi.current?.click(), children: value ? labels.replace : labels.upload }), extra, value ? (_jsx(Button, { type: "button", variant: "ghost", onClick: () => onChange(null), children: labels.remove })) : null] })] }), hata ? _jsx(Alert, { state: "danger", title: hata }) : null] }));
|
|
73
|
+
return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-3", className), children: [_jsx("input", { ref: girdi, id: id, type: "file", accept: IMAGE_ACCEPT, className: "sr-only", onChange: (e) => al(e.target.files?.[0]) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("span", { className: "tamga-image-field", "data-empty": value ? undefined : "true", children: value ? preview(value) : labels.empty }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", onClick: () => girdi.current?.click(), children: value ? labels.replace : labels.upload }), extra, value ? (_jsx(Button, { type: "button", variant: "ghost", onClick: () => onChange(null), children: labels.remove })) : null] })] }), hata ? _jsx(Alert, { state: "danger", title: hata }) : null] }));
|
|
73
74
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** Square, monochrome. Identity is text — color is reserved for health. */
|
|
2
|
-
export declare function Avatar({ name, size, src, bare, letters, }: {
|
|
2
|
+
export declare function Avatar({ name, size, src, bare, letters, ...rest }: {
|
|
3
3
|
name: string;
|
|
4
4
|
size?: number;
|
|
5
5
|
/**
|
|
@@ -28,6 +28,8 @@ export declare function Avatar({ name, size, src, bare, letters, }: {
|
|
|
28
28
|
* harf ise yarım okunamaz. `AvatarStack` bu yüzden 1 geçiyor.
|
|
29
29
|
*/
|
|
30
30
|
letters?: 1 | 2;
|
|
31
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
32
|
+
[k: `data-${string}`]: unknown;
|
|
31
33
|
}): import("react").JSX.Element;
|
|
32
34
|
/**
|
|
33
35
|
* Üst üste binen ekip.
|
|
@@ -50,7 +52,7 @@ export declare function Avatar({ name, size, src, bare, letters, }: {
|
|
|
50
52
|
* çağıran onu söyler. Bulanıklık yok: `0 0 0` yayılımsız bir halka, gölge
|
|
51
53
|
* değil.
|
|
52
54
|
*/
|
|
53
|
-
export declare function AvatarStack({ names, extra, size, surface, }: {
|
|
55
|
+
export declare function AvatarStack({ names, extra, size, surface, ...rest }: {
|
|
54
56
|
names: string[];
|
|
55
57
|
extra?: number;
|
|
56
58
|
size?: number;
|
|
@@ -59,5 +61,7 @@ export declare function AvatarStack({ names, extra, size, surface, }: {
|
|
|
59
61
|
* arkasındaki zeminin rengi; ayırıcı halka bu renkte çizilir.
|
|
60
62
|
*/
|
|
61
63
|
surface?: string;
|
|
64
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
65
|
+
[k: `data-${string}`]: unknown;
|
|
62
66
|
}): import("react").JSX.Element;
|
|
63
67
|
//# sourceMappingURL=avatar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAWA,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAS,EACT,GAAG,EACH,IAAY,EACZ,OAAW,EACX,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkCA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAS,EACT,OAA8B,EAC9B,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4BA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { dataProps } from "../lib/data-props.js";
|
|
3
4
|
function initials(name, count) {
|
|
4
5
|
return name
|
|
5
6
|
.split(" ")
|
|
@@ -9,7 +10,7 @@ function initials(name, count) {
|
|
|
9
10
|
.join("");
|
|
10
11
|
}
|
|
11
12
|
/** Square, monochrome. Identity is text — color is reserved for health. */
|
|
12
|
-
export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
|
|
13
|
+
export function Avatar({ name, size = 32, src, bare = false, letters = 2, ...rest }) {
|
|
13
14
|
const box = {
|
|
14
15
|
width: size,
|
|
15
16
|
height: size,
|
|
@@ -20,7 +21,7 @@ export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
|
|
|
20
21
|
if (src) {
|
|
21
22
|
return (_jsx("img", { src: src, alt: name, width: size, height: size, className: cn("shrink-0 object-cover", !bare && "rounded-[var(--radius-mark)] border border-edge"), style: box }));
|
|
22
23
|
}
|
|
23
|
-
return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center font-semibold text-ink", !bare && "rounded-[var(--radius-mark)] border border-edge bg-hover"), style: box, "aria-hidden": true, children: initials(name, letters) }));
|
|
24
|
+
return (_jsx("span", { ...dataProps(rest), className: cn("inline-flex shrink-0 items-center justify-center font-semibold text-ink", !bare && "rounded-[var(--radius-mark)] border border-edge bg-hover"), style: box, "aria-hidden": true, children: initials(name, letters) }));
|
|
24
25
|
}
|
|
25
26
|
/**
|
|
26
27
|
* Üst üste binen ekip.
|
|
@@ -43,12 +44,12 @@ export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
|
|
|
43
44
|
* çağıran onu söyler. Bulanıklık yok: `0 0 0` yayılımsız bir halka, gölge
|
|
44
45
|
* değil.
|
|
45
46
|
*/
|
|
46
|
-
export function AvatarStack({ names, extra, size = 24, surface = "var(--color-shell)", }) {
|
|
47
|
+
export function AvatarStack({ names, extra, size = 24, surface = "var(--color-shell)", ...rest }) {
|
|
47
48
|
const overlap = Math.round(size / 4);
|
|
48
49
|
const ring = { boxShadow: `0 0 0 2px ${surface}` };
|
|
49
50
|
/* Karoların kendi baş harfleri `aria-hidden` — üst üste binmiş harfler ekran
|
|
50
51
|
okuyucuda anlamsız bir dizi olurdu. Adlar bir kez, düz metin olarak
|
|
51
52
|
veriliyor: "Berika Sultan, Deniz Kara ve 7 kişi daha". */
|
|
52
53
|
const spoken = [...names, extra ? `+${extra}` : null].filter(Boolean).join(", ");
|
|
53
|
-
return (_jsxs("div", { className: "flex items-center", role: "img", "aria-label": spoken, children: [names.map((n, i) => (_jsx("span", { className: "rounded-[var(--radius-mark)]", style: { marginLeft: i === 0 ? 0 : -overlap, ...ring }, children: _jsx(Avatar, { name: n, size: size, letters: 1 }) }, n + i))), extra ? (_jsxs("span", { className: "inline-flex items-center justify-center rounded-[var(--radius-mark)] border border-edge bg-shell font-mono text-caption font-bold text-ink", style: { width: size, height: size, marginLeft: -overlap, ...ring }, children: ["+", extra] })) : null] }));
|
|
54
|
+
return (_jsxs("div", { ...dataProps(rest), className: "flex items-center", role: "img", "aria-label": spoken, children: [names.map((n, i) => (_jsx("span", { className: "rounded-[var(--radius-mark)]", style: { marginLeft: i === 0 ? 0 : -overlap, ...ring }, children: _jsx(Avatar, { name: n, size: size, letters: 1 }) }, n + i))), extra ? (_jsxs("span", { className: "inline-flex items-center justify-center rounded-[var(--radius-mark)] border border-edge bg-shell font-mono text-caption font-bold text-ink", style: { width: size, height: size, marginLeft: -overlap, ...ring }, children: ["+", extra] })) : null] }));
|
|
54
55
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Tone } from "./tone.js";
|
|
2
|
-
export declare function StatusChip({ label, state, dot, live, mono, severity, }: {
|
|
2
|
+
export declare function StatusChip({ label, state, dot, live, mono, severity, ...rest }: {
|
|
3
3
|
label: string;
|
|
4
4
|
state: Tone;
|
|
5
5
|
dot?: boolean;
|
|
@@ -14,18 +14,22 @@ export declare function StatusChip({ label, state, dot, live, mono, severity, }:
|
|
|
14
14
|
* taşıdığında açık sıra; yoksa durumdan türetiliyor
|
|
15
15
|
*/
|
|
16
16
|
severity?: number | null;
|
|
17
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
18
|
+
[k: `data-${string}`]: unknown;
|
|
17
19
|
}): import("react").JSX.Element;
|
|
18
|
-
export declare function Delta({ value, better, mono, }: {
|
|
20
|
+
export declare function Delta({ value, better, mono, ...rest }: {
|
|
19
21
|
value: string;
|
|
20
22
|
better: boolean;
|
|
21
23
|
mono?: boolean;
|
|
24
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
25
|
+
[k: `data-${string}`]: unknown;
|
|
22
26
|
}): import("react").JSX.Element;
|
|
23
27
|
/**
|
|
24
28
|
* Solid square status mark used in dense tables. Uses `fg` rather than `mark`
|
|
25
29
|
* so a single 10px square still reads at rest — bars can afford to be quieter,
|
|
26
30
|
* a lone dot cannot.
|
|
27
31
|
*/
|
|
28
|
-
export declare function Dot({ state, live, severity, }: {
|
|
32
|
+
export declare function Dot({ state, live, severity, ...rest }: {
|
|
29
33
|
state: Tone;
|
|
30
34
|
live?: boolean;
|
|
31
35
|
/**
|
|
@@ -33,5 +37,7 @@ export declare function Dot({ state, live, severity, }: {
|
|
|
33
37
|
* taşıdığında açık sıra; yoksa durumdan türetiliyor
|
|
34
38
|
*/
|
|
35
39
|
severity?: number | null;
|
|
40
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
41
|
+
[k: `data-${string}`]: unknown;
|
|
36
42
|
}): import("react").JSX.Element;
|
|
37
43
|
//# sourceMappingURL=badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAStC,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,GAAU,EACV,IAAY,EACZ,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAW,EACX,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgBA;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAWA"}
|
package/dist/components/badge.js
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { dataProps } from "../lib/data-props.js";
|
|
3
4
|
import { toneOf, rankOf } from "./tone.js";
|
|
4
5
|
import { useLiveClaim } from "./live-scope.js";
|
|
5
6
|
/* `live` is a REQUEST, not a decision. The element asks the nearest LiveScope
|
|
6
7
|
to pulse and only the most severe asker wins — see live-scope.tsx. Call sites
|
|
7
8
|
keep writing `live={m.health === "down"}` exactly as before; the counting is
|
|
8
9
|
no longer their problem. */
|
|
9
|
-
export function StatusChip({ label, state, dot = true, live = false, mono = false, severity, }) {
|
|
10
|
+
export function StatusChip({ label, state, dot = true, live = false, mono = false, severity, ...rest }) {
|
|
10
11
|
const h = toneOf(state);
|
|
11
12
|
const pulses = useLiveClaim(live ? rankOf(state, severity) : null);
|
|
12
|
-
return (_jsxs("span", { className: `tamga-chip ${mono ? "tamga-chip-mono" : ""}`, style: { background: h.bg, color: h.fg }, children: [dot && (_jsx("span", { className: `inline-block size-[var(--mark-dot)] ${pulses ? "tamga-live" : ""}`, style: { background: h.mark } })), label] }));
|
|
13
|
+
return (_jsxs("span", { ...dataProps(rest), className: `tamga-chip ${mono ? "tamga-chip-mono" : ""}`, style: { background: h.bg, color: h.fg }, children: [dot && (_jsx("span", { className: `inline-block size-[var(--mark-dot)] ${pulses ? "tamga-live" : ""}`, style: { background: h.mark } })), label] }));
|
|
13
14
|
}
|
|
14
|
-
export function Delta({ value, better, mono = true, }) {
|
|
15
|
+
export function Delta({ value, better, mono = true, ...rest }) {
|
|
15
16
|
/* good movement stays neutral — color is reserved for deviation */
|
|
16
17
|
const color = better ? "var(--color-ink-faint)" : "var(--color-critical)";
|
|
17
18
|
const rising = !value.trimStart().startsWith("-");
|
|
18
|
-
return (_jsxs("span", { className: `inline-flex items-center gap-1 text-small font-bold ${mono ? "font-mono" : ""}`, style: { color }, children: [_jsx("svg", { width: "9", height: "9", viewBox: "0 0 10 10", "aria-hidden": true, children: _jsx("path", { d: rising ? "M5 1L9 8H1Z" : "M5 9L1 2H9Z", style: { fill: color } }) }), value] }));
|
|
19
|
+
return (_jsxs("span", { ...dataProps(rest), className: `inline-flex items-center gap-1 text-small font-bold ${mono ? "font-mono" : ""}`, style: { color }, children: [_jsx("svg", { width: "9", height: "9", viewBox: "0 0 10 10", "aria-hidden": true, children: _jsx("path", { d: rising ? "M5 1L9 8H1Z" : "M5 9L1 2H9Z", style: { fill: color } }) }), value] }));
|
|
19
20
|
}
|
|
20
21
|
/**
|
|
21
22
|
* Solid square status mark used in dense tables. Uses `fg` rather than `mark`
|
|
22
23
|
* so a single 10px square still reads at rest — bars can afford to be quieter,
|
|
23
24
|
* a lone dot cannot.
|
|
24
25
|
*/
|
|
25
|
-
export function Dot({ state, live = false, severity, }) {
|
|
26
|
+
export function Dot({ state, live = false, severity, ...rest }) {
|
|
26
27
|
const h = toneOf(state);
|
|
27
28
|
const pulses = useLiveClaim(live ? rankOf(state, severity) : null);
|
|
28
|
-
return (_jsx("span", { className: `inline-block size-2.5 shrink-0 ${pulses ? "tamga-live" : ""}`, style: { background: h.fg }, "aria-hidden": true }));
|
|
29
|
+
return (_jsx("span", { ...dataProps(rest), className: `inline-block size-2.5 shrink-0 ${pulses ? "tamga-live" : ""}`, style: { background: h.fg }, "aria-hidden": true }));
|
|
29
30
|
}
|
package/dist/components/bar.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export type Bar = {
|
|
|
19
19
|
*/
|
|
20
20
|
note?: string;
|
|
21
21
|
};
|
|
22
|
-
export declare function BarChart({ bars, formatValue, labelWidth, className, }: {
|
|
22
|
+
export declare function BarChart({ bars, formatValue, labelWidth, className, ...rest }: {
|
|
23
23
|
bars: readonly Bar[];
|
|
24
24
|
formatValue?: (v: number) => string;
|
|
25
25
|
/**
|
|
@@ -28,5 +28,7 @@ export declare function BarChart({ bars, formatValue, labelWidth, className, }:
|
|
|
28
28
|
*/
|
|
29
29
|
labelWidth?: string;
|
|
30
30
|
className?: string;
|
|
31
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
32
|
+
[k: `data-${string}`]: unknown;
|
|
31
33
|
}): import("react").JSX.Element;
|
|
32
34
|
//# sourceMappingURL=bar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/components/bar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/components/bar.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AAEH,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AASF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4DA"}
|
package/dist/components/bar.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { dataProps } from "../lib/data-props.js";
|
|
5
6
|
/** Sayıyı ızgara çizgisine yuvarlar: 87 → 100, 412 → 500. */
|
|
6
7
|
function niceMax(v) {
|
|
7
8
|
if (v <= 0)
|
|
@@ -9,14 +10,14 @@ function niceMax(v) {
|
|
|
9
10
|
const mag = 10 ** Math.floor(Math.log10(v));
|
|
10
11
|
return Math.ceil(v / mag) * mag;
|
|
11
12
|
}
|
|
12
|
-
export function BarChart({ bars, formatValue = String, labelWidth = "10rem", className, }) {
|
|
13
|
+
export function BarChart({ bars, formatValue = String, labelWidth = "10rem", className, ...rest }) {
|
|
13
14
|
const enBuyuk = niceMax(Math.max(0, ...bars.map((b) => b.value)));
|
|
14
15
|
/* SATIRIN TAMAMI VURGULANIYOR, yalnız çubuk değil: uzun bir listede gözün
|
|
15
16
|
kaydığı şey satır. Ad solda, sayı sağda, arada bir metre uzunluğunda
|
|
16
17
|
çubuk var; hangi adın hangi sayıya ait olduğunu takip etmek zorlaşıyor ve
|
|
17
18
|
satır zemini o izi tutuyor. */
|
|
18
19
|
const [uzerinde, setUzerinde] = useState(null);
|
|
19
|
-
return (_jsxs("div", { className: cn("flex flex-col gap-0.5", className), onMouseLeave: () => setUzerinde(null), children: [bars.map((b) => {
|
|
20
|
+
return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-0.5", className), onMouseLeave: () => setUzerinde(null), children: [bars.map((b) => {
|
|
20
21
|
const oran = enBuyuk > 0 ? b.value / enBuyuk : 0;
|
|
21
22
|
const secili = uzerinde === b.label;
|
|
22
23
|
return (_jsxs("div", { className: "grid cursor-default items-center gap-3 rounded-(--radius-mark) px-1.5 py-1 transition-[background] duration-(--duration-press)", style: {
|
|
@@ -25,7 +25,7 @@ export type Series = {
|
|
|
25
25
|
*/
|
|
26
26
|
tone?: Tone;
|
|
27
27
|
};
|
|
28
|
-
export declare function LineChart({ series, labels, height, formatValue, className, }: {
|
|
28
|
+
export declare function LineChart({ series, labels, height, formatValue, className, ...rest }: {
|
|
29
29
|
series: readonly Series[];
|
|
30
30
|
/**
|
|
31
31
|
* The marks under the X axis. The caller formats the numbers. TR: X ekseninin altındaki
|
|
@@ -39,5 +39,7 @@ export declare function LineChart({ series, labels, height, formatValue, classNa
|
|
|
39
39
|
*/
|
|
40
40
|
formatValue?: (v: number) => string;
|
|
41
41
|
className?: string;
|
|
42
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
43
|
+
[k: `data-${string}`]: unknown;
|
|
42
44
|
}): import("react").JSX.Element;
|
|
43
45
|
//# sourceMappingURL=chart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAcF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+HA"}
|
package/dist/components/chart.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useId, useState } from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { dataProps } from "../lib/data-props.js";
|
|
5
6
|
import { toneOf } from "./tone.js";
|
|
6
7
|
/** Ton verilmemiş serinin rengi: sırayla kategorik palet. */
|
|
7
8
|
function seriRengi(s, i) {
|
|
@@ -14,7 +15,7 @@ function niceMax(v) {
|
|
|
14
15
|
const mag = 10 ** Math.floor(Math.log10(v));
|
|
15
16
|
return Math.ceil(v / mag) * mag;
|
|
16
17
|
}
|
|
17
|
-
export function LineChart({ series, labels, height = 200, formatValue = String, className, }) {
|
|
18
|
+
export function LineChart({ series, labels, height = 200, formatValue = String, className, ...rest }) {
|
|
18
19
|
const id = useId();
|
|
19
20
|
const [hover, setHover] = useState(null);
|
|
20
21
|
const all = series.flatMap((s) => [...s.values]);
|
|
@@ -29,7 +30,7 @@ export function LineChart({ series, labels, height = 200, formatValue = String,
|
|
|
29
30
|
/* Dört ızgara çizgisi: daha azı okumayı zorlaştırır, daha çoğu grafiği
|
|
30
31
|
kafese çevirir. */
|
|
31
32
|
const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
|
|
32
|
-
return (_jsxs("figure", { className: cn("tamga-surface p-4", className), children: [_jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between text-right font-mono text-caption text-ink-faint tabular-nums", style: { height }, "aria-hidden": true, children: [...ticks].reverse().map((t) => (_jsx("span", { children: formatValue(Math.round(t)) }, t))) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", style: { height, width: "100%" }, role: "img", "aria-labelledby": id, onMouseLeave: () => setHover(null), children: [_jsx("title", { id: id, children: series.map((s) => `${s.name}: ${formatValue(s.values[s.values.length - 1] ?? 0)}`).join(" · ") }), ticks.map((t) => (_jsx("line", { x1: 0, x2: W, y1: y(t), y2: y(t), stroke: "var(--color-line)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, t))), series.map((s, si) => {
|
|
33
|
+
return (_jsxs("figure", { className: cn("tamga-surface p-4", className), children: [_jsxs("div", { ...dataProps(rest), className: "flex gap-3", children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between text-right font-mono text-caption text-ink-faint tabular-nums", style: { height }, "aria-hidden": true, children: [...ticks].reverse().map((t) => (_jsx("span", { children: formatValue(Math.round(t)) }, t))) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", style: { height, width: "100%" }, role: "img", "aria-labelledby": id, onMouseLeave: () => setHover(null), children: [_jsx("title", { id: id, children: series.map((s) => `${s.name}: ${formatValue(s.values[s.values.length - 1] ?? 0)}`).join(" · ") }), ticks.map((t) => (_jsx("line", { x1: 0, x2: W, y1: y(t), y2: y(t), stroke: "var(--color-line)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, t))), series.map((s, si) => {
|
|
33
34
|
const renk = seriRengi(s, si);
|
|
34
35
|
const d = s.values.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");
|
|
35
36
|
return (_jsx("path", { d: d, fill: "none", stroke: renk, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }, s.name));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
export declare function Checkbox({ label, checked, onChange, disabled, className, }: {
|
|
2
|
+
export declare function Checkbox({ label, checked, onChange, disabled, className, ...rest }: {
|
|
3
3
|
/**
|
|
4
4
|
* The visible label. The kit does not translate; the caller passes ready text. TR: Görünen
|
|
5
5
|
* etiket. Kit çeviri yapmaz; hazır metni çağıran geçer.
|
|
@@ -9,5 +9,7 @@ export declare function Checkbox({ label, checked, onChange, disabled, className
|
|
|
9
9
|
onChange?: (next: boolean) => void;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
className?: string;
|
|
12
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
13
|
+
[k: `data-${string}`]: unknown;
|
|
12
14
|
}): import("react").JSX.Element;
|
|
13
15
|
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcvC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmBA"}
|