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
|
@@ -10,7 +10,13 @@ import type { ReactNode } from "react";
|
|
|
10
10
|
* 1px kenar + 2px sert offset (Yasa 1). İçindeki her şey `Gutter`ın ritmini
|
|
11
11
|
* paylaşır, böylece iki kart yan yana geldiğinde iç boşlukları hizalanır.
|
|
12
12
|
*/
|
|
13
|
-
export declare function Card({ overflow, children, className, }: {
|
|
13
|
+
export declare function Card({ as: Tag, overflow, children, className, ...rest }: {
|
|
14
|
+
/**
|
|
15
|
+
* The element the card is drawn as. TR: Kartın hangi eleman olarak çizileceği.
|
|
16
|
+
*
|
|
17
|
+
* Belge yapısı, sunum değil: bir kart çoğu zaman bir `section`dır. Varsayılan `div`.
|
|
18
|
+
*/
|
|
19
|
+
as?: "div" | "section" | "article" | "ul";
|
|
14
20
|
/**
|
|
15
21
|
* Whether the card's content may spill past its edge. `clip` by default, because the card's
|
|
16
22
|
* rounded corners depend on it: a table inside would run out of the corners without clipping.
|
|
@@ -29,6 +35,8 @@ export declare function Card({ overflow, children, className, }: {
|
|
|
29
35
|
overflow?: "clip" | "visible";
|
|
30
36
|
children: ReactNode;
|
|
31
37
|
className?: string;
|
|
38
|
+
/** `data-*` hooks pass through; nothing else does. TR: `data-*` kancaları geçiyor, başkası değil. */
|
|
39
|
+
[k: `data-${string}`]: unknown;
|
|
32
40
|
}): import("react").JSX.Element;
|
|
33
41
|
/**
|
|
34
42
|
* Kart başlığı — başlık solda, eylem sağda, ikisi aynı taban çizgisinde.
|
|
@@ -36,15 +44,18 @@ export declare function Card({ overflow, children, className, }: {
|
|
|
36
44
|
* Eylemin yeri tartışmaya kapalı: üründeki her satır kontrolünü sağda tutar,
|
|
37
45
|
* ve başka yere koyan bir başlık listeden kopmuş görünür.
|
|
38
46
|
*/
|
|
39
|
-
export declare function CardHead({ children, action, className, }: {
|
|
47
|
+
export declare function CardHead({ children, action, className, ...rest }: {
|
|
40
48
|
children: ReactNode;
|
|
41
49
|
action?: ReactNode;
|
|
42
50
|
className?: string;
|
|
51
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
52
|
+
[k: `data-${string}`]: unknown;
|
|
43
53
|
}): import("react").JSX.Element;
|
|
44
54
|
/** Kart gövdesi — başlıkla aynı yatay ritim, kendi dikey nefesi. */
|
|
45
|
-
export declare function CardBody({ children, className }: {
|
|
55
|
+
export declare function CardBody({ children, className, ...rest }: {
|
|
46
56
|
children: ReactNode;
|
|
47
57
|
className?: string;
|
|
58
|
+
[k: `data-${string}`]: unknown;
|
|
48
59
|
}): import("react").JSX.Element;
|
|
49
60
|
/**
|
|
50
61
|
* Tablo.
|
|
@@ -53,9 +64,10 @@ export declare function CardBody({ children, className }: {
|
|
|
53
64
|
* tablo tüm sayfayı yana kaydırır — ve bunu unutmak, unutulduğu yerde fark
|
|
54
65
|
* edilmeyen bir hatadır.
|
|
55
66
|
*/
|
|
56
|
-
export declare function Table({ children, className }: {
|
|
67
|
+
export declare function Table({ children, className, ...rest }: {
|
|
57
68
|
children: ReactNode;
|
|
58
69
|
className?: string;
|
|
70
|
+
[k: `data-${string}`]: unknown;
|
|
59
71
|
}): import("react").JSX.Element;
|
|
60
72
|
/**
|
|
61
73
|
* Sessiz etiket — bir başlığın yanındaki ya da bir grubun üstündeki meta satır.
|
|
@@ -64,7 +76,7 @@ export declare function Table({ children, className }: {
|
|
|
64
76
|
* (`p95 · 24h`, `10 kontrol`). Form etiketi için `Field` kullan — o `htmlFor`
|
|
65
77
|
* bağını da kurar.
|
|
66
78
|
*/
|
|
67
|
-
export declare function Label({ children, mono, className, }: {
|
|
79
|
+
export declare function Label({ children, mono, className, ...rest }: {
|
|
68
80
|
children: ReactNode;
|
|
69
81
|
/**
|
|
70
82
|
* Identifier-shaped text (codes, SKUs) keeps the mono face. TR: Tanımlayıcı biçimli metinler
|
|
@@ -72,5 +84,7 @@ export declare function Label({ children, mono, className, }: {
|
|
|
72
84
|
*/
|
|
73
85
|
mono?: boolean;
|
|
74
86
|
className?: string;
|
|
87
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
88
|
+
[k: `data-${string}`]: unknown;
|
|
75
89
|
}): import("react").JSX.Element;
|
|
76
90
|
//# sourceMappingURL=surface.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/components/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/components/surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;GAIG;AAEH;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,GAAW,EACf,QAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qGAAqG;IACrG,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BASA;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAOA;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAErI;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAMlI;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAEA"}
|
|
@@ -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
|
/**
|
|
4
5
|
* YÜZEYLER — kart, tablo, sessiz etiket.
|
|
5
6
|
*
|
|
@@ -11,8 +12,8 @@ import { cn } from "../lib/cn.js";
|
|
|
11
12
|
* 1px kenar + 2px sert offset (Yasa 1). İçindeki her şey `Gutter`ın ritmini
|
|
12
13
|
* paylaşır, böylece iki kart yan yana geldiğinde iç boşlukları hizalanır.
|
|
13
14
|
*/
|
|
14
|
-
export function Card({ overflow = "clip", children, className, }) {
|
|
15
|
-
return (_jsx(
|
|
15
|
+
export function Card({ as: Tag = "div", overflow = "clip", children, className, ...rest }) {
|
|
16
|
+
return (_jsx(Tag, { ...dataProps(rest), className: cn("tamga-card", overflow === "visible" && "tamga-card-open", className), children: children }));
|
|
16
17
|
}
|
|
17
18
|
/**
|
|
18
19
|
* Kart başlığı — başlık solda, eylem sağda, ikisi aynı taban çizgisinde.
|
|
@@ -20,12 +21,12 @@ export function Card({ overflow = "clip", children, className, }) {
|
|
|
20
21
|
* Eylemin yeri tartışmaya kapalı: üründeki her satır kontrolünü sağda tutar,
|
|
21
22
|
* ve başka yere koyan bir başlık listeden kopmuş görünür.
|
|
22
23
|
*/
|
|
23
|
-
export function CardHead({ children, action, className, }) {
|
|
24
|
-
return (_jsxs("div", { className: cn("tamga-head tamga-gutter tamga-section", className), children: [children, action ? _jsx("span", { className: "ml-auto", children: action }) : null] }));
|
|
24
|
+
export function CardHead({ children, action, className, ...rest }) {
|
|
25
|
+
return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-head tamga-gutter tamga-section", className), children: [children, action ? _jsx("span", { className: "ml-auto", children: action }) : null] }));
|
|
25
26
|
}
|
|
26
27
|
/** Kart gövdesi — başlıkla aynı yatay ritim, kendi dikey nefesi. */
|
|
27
|
-
export function CardBody({ children, className }) {
|
|
28
|
-
return _jsx("div", { className: cn("tamga-gutter py-6", className), children: children });
|
|
28
|
+
export function CardBody({ children, className, ...rest }) {
|
|
29
|
+
return _jsx("div", { ...dataProps(rest), className: cn("tamga-gutter py-6", className), children: children });
|
|
29
30
|
}
|
|
30
31
|
/**
|
|
31
32
|
* Tablo.
|
|
@@ -34,8 +35,8 @@ export function CardBody({ children, className }) {
|
|
|
34
35
|
* tablo tüm sayfayı yana kaydırır — ve bunu unutmak, unutulduğu yerde fark
|
|
35
36
|
* edilmeyen bir hatadır.
|
|
36
37
|
*/
|
|
37
|
-
export function Table({ children, className }) {
|
|
38
|
-
return (_jsx("div", { className: "w-full overflow-x-auto", children: _jsx("table", { className: cn("tamga-table", className), children: children }) }));
|
|
38
|
+
export function Table({ children, className, ...rest }) {
|
|
39
|
+
return (_jsx("div", { ...dataProps(rest), className: "w-full overflow-x-auto", children: _jsx("table", { className: cn("tamga-table", className), children: children }) }));
|
|
39
40
|
}
|
|
40
41
|
/**
|
|
41
42
|
* Sessiz etiket — bir başlığın yanındaki ya da bir grubun üstündeki meta satır.
|
|
@@ -44,6 +45,6 @@ export function Table({ children, className }) {
|
|
|
44
45
|
* (`p95 · 24h`, `10 kontrol`). Form etiketi için `Field` kullan — o `htmlFor`
|
|
45
46
|
* bağını da kurar.
|
|
46
47
|
*/
|
|
47
|
-
export function Label({ children, mono = false, className, }) {
|
|
48
|
-
return _jsx("span", { className: cn("tamga-label", mono && "font-mono", className), children: children });
|
|
48
|
+
export function Label({ children, mono = false, className, ...rest }) {
|
|
49
|
+
return _jsx("span", { ...dataProps(rest), className: cn("tamga-label", mono && "font-mono", className), children: children });
|
|
49
50
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function Switch({ on, onChange, label, disabled, className, }: {
|
|
1
|
+
export declare function Switch({ on, onChange, label, disabled, className, ...rest }: {
|
|
2
2
|
on: boolean;
|
|
3
3
|
onChange?: (next: boolean) => void;
|
|
4
4
|
/**
|
|
@@ -8,5 +8,7 @@ export declare function Switch({ on, onChange, label, disabled, className, }: {
|
|
|
8
8
|
label: string;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
className?: string;
|
|
11
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
12
|
+
[k: `data-${string}`]: unknown;
|
|
11
13
|
}): import("react").JSX.Element;
|
|
12
14
|
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAYA,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,EAAE,EAAE,OAAO,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAsBA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../lib/cn.js";
|
|
4
|
+
import { dataProps } from "../lib/data-props.js";
|
|
4
5
|
import { OFF } from "./control-base.js";
|
|
5
6
|
/* ---------------------------------------------------------------- *
|
|
6
7
|
* Switch — akranlar arası seçim DEĞİL, açık/kapalı durumu.
|
|
@@ -8,6 +9,6 @@ import { OFF } from "./control-base.js";
|
|
|
8
9
|
* Dolgu burada Yasa 2'nin üçüncü bilinçli istisnası: dolu iz metaforun
|
|
9
10
|
* kendisidir, bir devrenin kapalı olması demektir.
|
|
10
11
|
* ---------------------------------------------------------------- */
|
|
11
|
-
export function Switch({ on, onChange, label, disabled = false, className, }) {
|
|
12
|
-
return (_jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-label": label, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!on), className: cn("tamga-switch", className), "data-on": on, style: disabled ? OFF : undefined, children: _jsx("span", { "aria-hidden": true }) }));
|
|
12
|
+
export function Switch({ on, onChange, label, disabled = false, className, ...rest }) {
|
|
13
|
+
return (_jsx("button", { ...dataProps(rest), type: "button", role: "switch", "aria-checked": on, "aria-label": label, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!on), className: cn("tamga-switch", className), "data-on": on, style: disabled ? OFF : undefined, children: _jsx("span", { "aria-hidden": true }) }));
|
|
13
14
|
}
|
|
@@ -25,7 +25,7 @@ export type TabItem<T extends string> = {
|
|
|
25
25
|
*/
|
|
26
26
|
disabled?: boolean;
|
|
27
27
|
};
|
|
28
|
-
export declare function Tabs<T extends string>({ items, value, onChange, label, scroll, linkAs, className, }: {
|
|
28
|
+
export declare function Tabs<T extends string>({ items, value, onChange, label, scroll, linkAs, className, ...rest }: {
|
|
29
29
|
items: readonly TabItem<T>[];
|
|
30
30
|
value: T;
|
|
31
31
|
onChange?: (next: T) => void;
|
|
@@ -43,5 +43,7 @@ export declare function Tabs<T extends string>({ items, value, onChange, label,
|
|
|
43
43
|
*/
|
|
44
44
|
linkAs?: React.ElementType;
|
|
45
45
|
className?: string;
|
|
46
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
47
|
+
[k: `data-${string}`]: unknown;
|
|
46
48
|
}): import("react").JSX.Element;
|
|
47
49
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;GAIG;AAEH,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,MAAM,IAAI;IACtC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAc,EACd,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4DA"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../lib/cn.js";
|
|
4
|
-
|
|
4
|
+
import { dataProps } from "../lib/data-props.js";
|
|
5
|
+
export function Tabs({ items, value, onChange, label, scroll = false, linkAs, className, ...rest }) {
|
|
5
6
|
const kap = cn("flex gap-6 border-b border-[var(--color-line)]", scroll && "overflow-x-auto", className);
|
|
6
7
|
const bagliMi = items.some((t) => t.href);
|
|
7
8
|
const A = linkAs ?? "a";
|
|
8
9
|
if (bagliMi) {
|
|
9
|
-
return (_jsx("nav", { "aria-label": label, className: kap, children: items.map((t) => t.disabled ? (_jsxs("span", { "aria-disabled": "true", className: cn("tamga-tab", scroll && "shrink-0"), "data-disabled": "true", children: [t.icon, t.label] }, t.value)) : (_jsxs(A, { href: t.href, className: cn("tamga-tab", scroll && "shrink-0"), "data-active": value === t.value, "aria-current": value === t.value ? "page" : undefined, children: [t.icon, t.label] }, t.value))) }));
|
|
10
|
+
return (_jsx("nav", { ...dataProps(rest), "aria-label": label, className: kap, children: items.map((t) => t.disabled ? (_jsxs("span", { "aria-disabled": "true", className: cn("tamga-tab", scroll && "shrink-0"), "data-disabled": "true", children: [t.icon, t.label] }, t.value)) : (_jsxs(A, { href: t.href, className: cn("tamga-tab", scroll && "shrink-0"), "data-active": value === t.value, "aria-current": value === t.value ? "page" : undefined, children: [t.icon, t.label] }, t.value))) }));
|
|
10
11
|
}
|
|
11
12
|
return (_jsx("div", { role: "tablist", "aria-label": label, className: kap, children: items.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": value === t.value, disabled: t.disabled, className: cn("tamga-tab", scroll && "shrink-0"), "data-active": value === t.value, "data-disabled": t.disabled || undefined, onClick: () => onChange?.(t.value), children: [t.icon, t.label] }, t.value))) }));
|
|
12
13
|
}
|
|
@@ -8,12 +8,14 @@ export declare function TimelineStrip({ data, height, gap, minWidth,
|
|
|
8
8
|
/** Şeridin iki ucundaki zaman etiketi — "90 gün önce" · "bugün". */
|
|
9
9
|
labels,
|
|
10
10
|
/** Her kovanın erişilebilir açıklaması. Kit çeviri çekmez. */
|
|
11
|
-
describe, }: {
|
|
11
|
+
describe, ...rest }: {
|
|
12
12
|
data: readonly Tone[];
|
|
13
13
|
height?: number;
|
|
14
14
|
gap?: number;
|
|
15
15
|
minWidth?: number;
|
|
16
16
|
labels?: [string, string];
|
|
17
17
|
describe?: (index: number, tone: Tone) => string;
|
|
18
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
19
|
+
[k: `data-${string}`]: unknown;
|
|
18
20
|
}): import("react").JSX.Element;
|
|
19
21
|
//# sourceMappingURL=timeline-strip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-strip.d.ts","sourceRoot":"","sources":["../../src/components/timeline-strip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"timeline-strip.d.ts","sourceRoot":"","sources":["../../src/components/timeline-strip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,MAAW,EACX,GAAO,EACP,QAAY;AACZ,oEAAoE;AACpE,MAAM;AACN,8DAA8D;AAC9D,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACjD,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAqBA"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { dataProps } from "../lib/data-props.js";
|
|
2
3
|
import { toneOf } from "./tone.js";
|
|
3
4
|
/**
|
|
4
5
|
* TimelineStrip — kova başına bir işaret, renk durumu taşır.
|
|
@@ -9,6 +10,6 @@ export function TimelineStrip({ data, height = 32, gap = 2, minWidth = 3,
|
|
|
9
10
|
/** Şeridin iki ucundaki zaman etiketi — "90 gün önce" · "bugün". */
|
|
10
11
|
labels,
|
|
11
12
|
/** Her kovanın erişilebilir açıklaması. Kit çeviri çekmez. */
|
|
12
|
-
describe, }) {
|
|
13
|
-
return (_jsxs("div", { children: [_jsx("div", { className: "flex items-end", style: { gap }, children: data.map((tone, i) => (_jsx("span", { title: describe?.(i, tone), className: "flex-1 transition-opacity hover:opacity-60", style: { height, minWidth, background: toneOf(tone).mark } }, i))) }), labels ? (_jsxs("div", { className: "mt-2 flex justify-between", children: [_jsx("span", { className: "font-mono text-micro text-ink-faint", children: labels[0] }), _jsx("span", { className: "font-mono text-micro text-ink-faint", children: labels[1] })] })) : null] }));
|
|
13
|
+
describe, ...rest }) {
|
|
14
|
+
return (_jsxs("div", { ...dataProps(rest), children: [_jsx("div", { className: "flex items-end", style: { gap }, children: data.map((tone, i) => (_jsx("span", { title: describe?.(i, tone), className: "flex-1 transition-opacity hover:opacity-60", style: { height, minWidth, background: toneOf(tone).mark } }, i))) }), labels ? (_jsxs("div", { className: "mt-2 flex justify-between", children: [_jsx("span", { className: "font-mono text-micro text-ink-faint", children: labels[0] }), _jsx("span", { className: "font-mono text-micro text-ink-faint", children: labels[1] })] })) : null] }));
|
|
14
15
|
}
|
|
@@ -8,7 +8,7 @@ export type TreeNode = {
|
|
|
8
8
|
label: string;
|
|
9
9
|
children?: TreeNode[];
|
|
10
10
|
};
|
|
11
|
-
export declare function TreeSelect({ nodes, value, onChange, labels, searchable, height, className, }: {
|
|
11
|
+
export declare function TreeSelect({ nodes, value, onChange, labels, searchable, height, className, ...rest }: {
|
|
12
12
|
nodes: readonly TreeNode[];
|
|
13
13
|
/** The ids of the selected nodes. TR: Seçili düğüm id'leri. */
|
|
14
14
|
value: readonly string[];
|
|
@@ -22,5 +22,7 @@ export declare function TreeSelect({ nodes, value, onChange, labels, searchable,
|
|
|
22
22
|
searchable?: boolean;
|
|
23
23
|
height?: number;
|
|
24
24
|
className?: string;
|
|
25
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
26
|
+
[k: `data-${string}`]: unknown;
|
|
25
27
|
}): import("react").JSX.Element;
|
|
26
28
|
//# sourceMappingURL=tree-select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["../../src/components/tree-select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tree-select.d.ts","sourceRoot":"","sources":["../../src/components/tree-select.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB,CAAC;AAoBF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAiB,EACjB,MAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAqHA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo, useState } from "react";
|
|
4
4
|
import { cn } from "../lib/cn.js";
|
|
5
|
+
import { dataProps } from "../lib/data-props.js";
|
|
5
6
|
import { Checkbox } from "./checkbox.js";
|
|
6
7
|
import { Icon } from "./icon.js";
|
|
7
8
|
import { CaretDown, CaretRight, Search } from "./icons.js";
|
|
@@ -23,7 +24,7 @@ function suz(nodes, q) {
|
|
|
23
24
|
};
|
|
24
25
|
return nodes.map(gez).filter((n) => n !== null);
|
|
25
26
|
}
|
|
26
|
-
export function TreeSelect({ nodes, value, onChange, labels, searchable = true, height = 320, className, }) {
|
|
27
|
+
export function TreeSelect({ nodes, value, onChange, labels, searchable = true, height = 320, className, ...rest }) {
|
|
27
28
|
const [q, setQ] = useState("");
|
|
28
29
|
/* Kapalı olanlar tutuluyor, açık olanlar değil: varsayılan AÇIK.
|
|
29
30
|
Bir kategori ağacı kapalı açıldığında kullanıcı önce her dalı tıklamak
|
|
@@ -46,7 +47,7 @@ export function TreeSelect({ nodes, value, onChange, labels, searchable = true,
|
|
|
46
47
|
const cocuklar = node.children ?? [];
|
|
47
48
|
const acik = !kapali.has(node.id);
|
|
48
49
|
const isaretli = secili.has(node.id);
|
|
49
|
-
return (_jsxs("li", { role: "none", children: [_jsxs("div", { className: "flex items-center gap-1.5 rounded-(--radius-mark) py-1 hover:bg-[var(--color-hover)]", style: { paddingLeft: `${derinlik * 18}px` }, children: [cocuklar.length > 0 ? (_jsx("button", { type: "button", className: "tamga-mini-btn size-5 shrink-0", "aria-label": acik ? labels.collapse : labels.expand, "aria-expanded": acik, onClick: () => {
|
|
50
|
+
return (_jsxs("li", { ...dataProps(rest), role: "none", children: [_jsxs("div", { className: "flex items-center gap-1.5 rounded-(--radius-mark) py-1 hover:bg-[var(--color-hover)]", style: { paddingLeft: `${derinlik * 18}px` }, children: [cocuklar.length > 0 ? (_jsx("button", { type: "button", className: "tamga-mini-btn size-5 shrink-0", "aria-label": acik ? labels.collapse : labels.expand, "aria-expanded": acik, onClick: () => {
|
|
50
51
|
const next = new Set(kapali);
|
|
51
52
|
if (acik)
|
|
52
53
|
next.add(node.id);
|
package/dist/kit.css
CHANGED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `data-*` niteliklerini ayıklar — ve YALNIZ onları.
|
|
3
|
+
*
|
|
4
|
+
* KİT BİLEŞENLERİ FAZLADAN PROP YAYMIYOR ve bu bilinçli: 85 bileşenin 78'i böyle. Her şeyi
|
|
5
|
+
* yaymak, çağıranın `className`i, `onClick`i ya da `style`ı bileşenin kendi davranışının üstüne
|
|
6
|
+
* yazmasına izin vermek olurdu — "kürasyonlu seçenek, serbestlik değil" kararının tam tersi.
|
|
7
|
+
*
|
|
8
|
+
* AMA `data-*` BAŞKA. Eylemsizdir: HTML'de hiçbir davranışa bağlanmaz, yalnız bir kanca taşır —
|
|
9
|
+
* bir testin tutunacağı, bir stilin seçeceği, bir analitiğin okuyacağı. Bileşeni bozamaz.
|
|
10
|
+
*
|
|
11
|
+
* Kabul etmemenin bedeli ölçüldü ve yüksek: bir `data-verdict` kancası gerektiği için tüketici
|
|
12
|
+
* bileşeni bırakıp sınıfını elle yazıyor, ve o sınıfla birlikte gelen korumaları (kırpma,
|
|
13
|
+
* erişilebilirlik, kaydırma) kaybediyor. Kanca sessizce düşüyor, hiçbir yerde hata vermiyor:
|
|
14
|
+
* geçen taraf geçtiğini sanıyor, alan taraf hiç çizmiyor.
|
|
15
|
+
*
|
|
16
|
+
* `aria-*` BU LİSTEDE YOK, bilerek. O eylemsiz değil: bir `aria-label`, bileşenin kendi
|
|
17
|
+
* hesapladığı erişilebilir adı sessizce ezer. Erişilebilirlik bir prop olarak AÇIKÇA istenir.
|
|
18
|
+
*/
|
|
19
|
+
export declare function dataProps(props: Record<string, unknown>): Record<string, unknown>;
|
|
20
|
+
//# sourceMappingURL=data-props.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-props.d.ts","sourceRoot":"","sources":["../../src/lib/data-props.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAIjF"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `data-*` niteliklerini ayıklar — ve YALNIZ onları.
|
|
3
|
+
*
|
|
4
|
+
* KİT BİLEŞENLERİ FAZLADAN PROP YAYMIYOR ve bu bilinçli: 85 bileşenin 78'i böyle. Her şeyi
|
|
5
|
+
* yaymak, çağıranın `className`i, `onClick`i ya da `style`ı bileşenin kendi davranışının üstüne
|
|
6
|
+
* yazmasına izin vermek olurdu — "kürasyonlu seçenek, serbestlik değil" kararının tam tersi.
|
|
7
|
+
*
|
|
8
|
+
* AMA `data-*` BAŞKA. Eylemsizdir: HTML'de hiçbir davranışa bağlanmaz, yalnız bir kanca taşır —
|
|
9
|
+
* bir testin tutunacağı, bir stilin seçeceği, bir analitiğin okuyacağı. Bileşeni bozamaz.
|
|
10
|
+
*
|
|
11
|
+
* Kabul etmemenin bedeli ölçüldü ve yüksek: bir `data-verdict` kancası gerektiği için tüketici
|
|
12
|
+
* bileşeni bırakıp sınıfını elle yazıyor, ve o sınıfla birlikte gelen korumaları (kırpma,
|
|
13
|
+
* erişilebilirlik, kaydırma) kaybediyor. Kanca sessizce düşüyor, hiçbir yerde hata vermiyor:
|
|
14
|
+
* geçen taraf geçtiğini sanıyor, alan taraf hiç çizmiyor.
|
|
15
|
+
*
|
|
16
|
+
* `aria-*` BU LİSTEDE YOK, bilerek. O eylemsiz değil: bir `aria-label`, bileşenin kendi
|
|
17
|
+
* hesapladığı erişilebilir adı sessizce ezer. Erişilebilirlik bir prop olarak AÇIKÇA istenir.
|
|
18
|
+
*/
|
|
19
|
+
export function dataProps(props) {
|
|
20
|
+
const out = {};
|
|
21
|
+
for (const [k, v] of Object.entries(props))
|
|
22
|
+
if (k.startsWith("data-"))
|
|
23
|
+
out[k] = v;
|
|
24
|
+
return out;
|
|
25
|
+
}
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED