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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
-
export declare function RadioGroup<T extends string>({ options, value, onChange, label, disabled, className, }: {
|
|
2
|
+
export declare function RadioGroup<T extends string>({ options, value, onChange, label, disabled, className, ...rest }: {
|
|
3
3
|
options: readonly {
|
|
4
4
|
value: T;
|
|
5
5
|
label: ReactNode;
|
|
@@ -13,5 +13,7 @@ export declare function RadioGroup<T extends string>({ options, value, onChange,
|
|
|
13
13
|
label: string;
|
|
14
14
|
disabled?: boolean;
|
|
15
15
|
className?: string;
|
|
16
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
17
|
+
[k: `data-${string}`]: unknown;
|
|
16
18
|
}): import("react").JSX.Element;
|
|
17
19
|
//# sourceMappingURL=radio-group.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA6BA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
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
|
+
import { dataProps } from "../lib/data-props.js";
|
|
4
5
|
import { OFF } from "./control-base.js";
|
|
5
6
|
/* ---------------------------------------------------------------- *
|
|
6
7
|
* RadioGroup — akranlar arasından TEK seçim.
|
|
@@ -8,8 +9,8 @@ import { OFF } from "./control-base.js";
|
|
|
8
9
|
* Grubun kendisi `role="radiogroup"`, satırlar `role="radio"`. İkisi birden
|
|
9
10
|
* olmadan ekran okuyucu "üç ayrı düğme" duyurur, "üç seçenekten biri" değil.
|
|
10
11
|
* ---------------------------------------------------------------- */
|
|
11
|
-
export function RadioGroup({ options, value, onChange, label, disabled = false, className, }) {
|
|
12
|
-
return (_jsx("div", { role: "radiogroup", "aria-label": label, className: cn("flex flex-col gap-2", className), children: options.map((o) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === o.value, "aria-disabled": disabled || undefined, onClick: () => !disabled && onChange?.(o.value),
|
|
12
|
+
export function RadioGroup({ options, value, onChange, label, disabled = false, className, ...rest }) {
|
|
13
|
+
return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": label, className: cn("flex flex-col gap-2", className), children: options.map((o) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === o.value, "aria-disabled": disabled || undefined, onClick: () => !disabled && onChange?.(o.value),
|
|
13
14
|
/* ÜSTTEN HİZALI VE TAM GENİŞLİK, ve ikisi de iki satırlık bir
|
|
14
15
|
seçenek yüzünden değişti.
|
|
15
16
|
`items-center` tek satırlık etiketlerde doğru duruyordu; altına
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
5
5
|
*/
|
|
6
6
|
export type RichTextFormat = "bold" | "italic" | "link" | "h3" | "h4" | "h5" | "ul" | "ol";
|
|
7
|
-
export declare function RichText({ value, onChange, allow, labels, ariaLabel, rows, disabled, className, }: {
|
|
7
|
+
export declare function RichText({ value, onChange, allow, labels, ariaLabel, rows, disabled, className, ...rest }: {
|
|
8
8
|
/**
|
|
9
9
|
* HTML. The kit does not sanitise it: which tags are valid is the product's rule. TR: HTML.
|
|
10
10
|
* Kit onu temizlemez: hangi etiketin geçerli olduğu ürünün kuralı.
|
|
@@ -47,5 +47,7 @@ export declare function RichText({ value, onChange, allow, labels, ariaLabel, ro
|
|
|
47
47
|
rows?: number;
|
|
48
48
|
disabled?: boolean;
|
|
49
49
|
className?: string;
|
|
50
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
51
|
+
[k: `data-${string}`]: unknown;
|
|
50
52
|
}): import("react").JSX.Element;
|
|
51
53
|
//# sourceMappingURL=rich-text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../src/components/rich-text.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../src/components/rich-text.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAuB3F,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX;;;WAGG;QACH,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,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,+BA2LA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, 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 { Bold, BulletList, Check, Close, Italic, Link, NumberedList } from "./icons.js";
|
|
7
8
|
const KOMUTLAR = {
|
|
@@ -21,7 +22,7 @@ const SIMGELER = {
|
|
|
21
22
|
ul: BulletList,
|
|
22
23
|
ol: NumberedList,
|
|
23
24
|
};
|
|
24
|
-
export function RichText({ value, onChange, allow, labels, ariaLabel, rows = 10, disabled, className, }) {
|
|
25
|
+
export function RichText({ value, onChange, allow, labels, ariaLabel, rows = 10, disabled, className, ...rest }) {
|
|
25
26
|
const alan = useRef(null);
|
|
26
27
|
const [aktif, setAktif] = useState({});
|
|
27
28
|
const [baglantiAcik, setBaglantiAcik] = useState(false);
|
|
@@ -125,7 +126,7 @@ export function RichText({ value, onChange, allow, labels, ariaLabel, rows = 10,
|
|
|
125
126
|
setAdres("");
|
|
126
127
|
yayinla();
|
|
127
128
|
}
|
|
128
|
-
return (_jsxs("div", { className: cn("tamga-editor", disabled && "tamga-editor-disabled", className), children: [_jsx("div", { className: "tamga-editor-bar", role: "toolbar", "aria-label": ariaLabel, children: allow.map((f) => {
|
|
129
|
+
return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-editor", disabled && "tamga-editor-disabled", className), children: [_jsx("div", { className: "tamga-editor-bar", role: "toolbar", "aria-label": ariaLabel, children: allow.map((f) => {
|
|
129
130
|
const simge = SIMGELER[f];
|
|
130
131
|
return (_jsx("button", { type: "button", disabled: disabled, title: labels[f], "aria-label": labels[f], "aria-pressed": KOMUTLAR[f].command === "createLink" ? undefined : (aktif[f] ?? false), "data-on": aktif[f] || undefined,
|
|
131
132
|
/* `mousedown`ta engelleniyor: tıklama odağı alandan almazsa
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* A card header. It carries the card's own left line and is closed by the
|
|
3
3
|
* single rule weight used everywhere else.
|
|
4
4
|
*/
|
|
5
|
-
export declare function SectionHead({ title, meta, mono, action, }: {
|
|
5
|
+
export declare function SectionHead({ title, meta, mono, action, ...rest }: {
|
|
6
6
|
title: string;
|
|
7
7
|
meta?: string;
|
|
8
8
|
/**
|
|
@@ -11,5 +11,7 @@ export declare function SectionHead({ title, meta, mono, action, }: {
|
|
|
11
11
|
*/
|
|
12
12
|
mono?: boolean;
|
|
13
13
|
action?: React.ReactNode;
|
|
14
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
15
|
+
[k: `data-${string}`]: unknown;
|
|
14
16
|
}): import("react").JSX.Element;
|
|
15
17
|
//# sourceMappingURL=section.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/components/section.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/components/section.tsx"],"names":[],"mappings":"AACA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,IAAY,EACZ,MAAM,EACN,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAUA"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { dataProps } from "../lib/data-props.js";
|
|
2
3
|
/**
|
|
3
4
|
* A card header. It carries the card's own left line and is closed by the
|
|
4
5
|
* single rule weight used everywhere else.
|
|
5
6
|
*/
|
|
6
|
-
export function SectionHead({ title, meta, mono = false, action, }) {
|
|
7
|
-
return (_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: `text-subhead font-semibold ${mono ? "font-mono text-control font-bold" : ""}`, children: title }), meta ? _jsx("span", { className: "tamga-label", children: meta }) : null, action ? _jsx("div", { className: "ml-auto flex items-center gap-2", children: action }) : null] }));
|
|
7
|
+
export function SectionHead({ title, meta, mono = false, action, ...rest }) {
|
|
8
|
+
return (_jsxs("div", { ...dataProps(rest), className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: `text-subhead font-semibold ${mono ? "font-mono text-control font-bold" : ""}`, children: title }), meta ? _jsx("span", { className: "tamga-label", children: meta }) : null, action ? _jsx("div", { className: "ml-auto flex items-center gap-2", children: action }) : null] }));
|
|
8
9
|
}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
2
|
export declare function Segmented<T extends string>({ options, value, onChange, label, className, }: {
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* The choices. Anything beyond `value` and `label` lands on that option's button, so a choice
|
|
5
|
+
* can carry the hook a test or a style needs. TR: Seçenekler. `value` ve `label` dışındaki her
|
|
6
|
+
* şey o seçeneğin düğmesine iniyor, yani bir seçenek testin ya da stilin ihtiyaç duyduğu
|
|
7
|
+
* kancayı taşıyabiliyor.
|
|
8
|
+
*/
|
|
9
|
+
options: readonly ({
|
|
4
10
|
value: T;
|
|
5
11
|
label: ReactNode;
|
|
6
|
-
}[];
|
|
12
|
+
} & Record<string, unknown>)[];
|
|
7
13
|
value: T;
|
|
8
14
|
onChange?: (next: T) => void;
|
|
9
15
|
/** The group's accessible name. TR: Grubun erişilebilir adı. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/components/segmented.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/components/segmented.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD;;;;;OAKG;IACH,OAAO,EAAE,SAAS,CAAC;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;IAC/E,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAiBA"}
|
|
@@ -8,5 +8,5 @@ import { cn } from "../lib/cn.js";
|
|
|
8
8
|
* "Buradasın" bir eylem değildir, o yüzden dolgu almaz (Yasa 2).
|
|
9
9
|
* ---------------------------------------------------------------- */
|
|
10
10
|
export function Segmented({ options, value, onChange, label, className, }) {
|
|
11
|
-
return (_jsx("div", { role: "group", "aria-label": label, className: cn("tamga-segment", className), children: options.map((
|
|
11
|
+
return (_jsx("div", { role: "group", "aria-label": label, className: cn("tamga-segment", className), children: options.map(({ value: v, label: etiket, ...rest }) => (_jsx("button", { type: "button", ...rest, "aria-pressed": value === v, "data-active": value === v, onClick: () => onChange?.(v), children: etiket }, v))) }));
|
|
12
12
|
}
|
|
@@ -1,25 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
* Skeletons.
|
|
3
|
-
*
|
|
4
|
-
* Gerekçe: docs/gerekce/04-bos-ve-hata.md
|
|
5
|
-
*/
|
|
6
|
-
export declare function Skeleton({ className, index, style, }: {
|
|
1
|
+
export declare function Skeleton({ className, index, style, ...rest }: {
|
|
7
2
|
className?: string;
|
|
8
3
|
index?: number;
|
|
9
4
|
style?: React.CSSProperties;
|
|
5
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
6
|
+
[k: `data-${string}`]: unknown;
|
|
10
7
|
}): import("react").JSX.Element;
|
|
11
8
|
/** Paragraph copy. The last line is always short — real text ends mid-line. */
|
|
12
|
-
export declare function SkeletonText({ lines, className, }: {
|
|
9
|
+
export declare function SkeletonText({ lines, className, ...rest }: {
|
|
13
10
|
lines?: number;
|
|
14
11
|
className?: string;
|
|
12
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
13
|
+
[k: `data-${string}`]: unknown;
|
|
15
14
|
}): import("react").JSX.Element;
|
|
16
15
|
/**
|
|
17
16
|
* A list row. Mirrors `.tamga-list-row` exactly, including the 56px height, so the
|
|
18
17
|
* skeleton list and the real list are the same object with the text removed.
|
|
19
18
|
*/
|
|
20
|
-
export declare function SkeletonRows({ rows, dense, }: {
|
|
19
|
+
export declare function SkeletonRows({ rows, dense, ...rest }: {
|
|
21
20
|
rows?: number;
|
|
22
21
|
dense?: boolean;
|
|
22
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
23
|
+
[k: `data-${string}`]: unknown;
|
|
23
24
|
}): import("react").JSX.Element;
|
|
24
25
|
/**
|
|
25
26
|
* The KPI tile: icon tile, label, big number.
|
|
@@ -29,18 +30,23 @@ export declare function SkeletonRows({ rows, dense, }: {
|
|
|
29
30
|
* bir iskeletin tek işi o zıplamayı önlemek. Bu yüzden ikisi aynı sınıfı
|
|
30
31
|
* (`tamga-kpi`) paylaşıyor: kalıp bir yerde değişince ikisi birden değişiyor.
|
|
31
32
|
*/
|
|
32
|
-
export declare function SkeletonKpi({ index }: {
|
|
33
|
+
export declare function SkeletonKpi({ index, ...rest }: {
|
|
33
34
|
index?: number;
|
|
35
|
+
[k: `data-${string}`]: unknown;
|
|
34
36
|
}): import("react").JSX.Element;
|
|
35
37
|
/** A card with a section head and a body area of a given height. */
|
|
36
|
-
export declare function SkeletonCard({ height, title, }: {
|
|
38
|
+
export declare function SkeletonCard({ height, title, ...rest }: {
|
|
37
39
|
height?: number;
|
|
38
40
|
title?: boolean;
|
|
41
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
42
|
+
[k: `data-${string}`]: unknown;
|
|
39
43
|
}): import("react").JSX.Element;
|
|
40
44
|
/** A table: header rule plus n body rows across the given column widths. */
|
|
41
|
-
export declare function SkeletonTable({ rows, cols, }: {
|
|
45
|
+
export declare function SkeletonTable({ rows, cols, ...rest }: {
|
|
42
46
|
rows?: number;
|
|
43
47
|
cols?: string[];
|
|
48
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
49
|
+
[k: `data-${string}`]: unknown;
|
|
44
50
|
}): import("react").JSX.Element;
|
|
45
51
|
/**
|
|
46
52
|
* Panel contents.
|
|
@@ -52,18 +58,23 @@ export declare function SkeletonTable({ rows, cols, }: {
|
|
|
52
58
|
*
|
|
53
59
|
* Matches `.tamga-option` — 40px tall, 16px side padding, icon slot then label.
|
|
54
60
|
*/
|
|
55
|
-
export declare function SkeletonOptions({ rows }: {
|
|
61
|
+
export declare function SkeletonOptions({ rows, ...rest }: {
|
|
56
62
|
rows?: number;
|
|
63
|
+
[k: `data-${string}`]: unknown;
|
|
57
64
|
}): import("react").JSX.Element;
|
|
58
65
|
/** Free-form panel body — popover, dialog, sheet. */
|
|
59
|
-
export declare function SkeletonPanel({ lines, block, }: {
|
|
66
|
+
export declare function SkeletonPanel({ lines, block, ...rest }: {
|
|
60
67
|
lines?: number;
|
|
61
68
|
/**
|
|
62
69
|
* height of a leading block (a chart, a map, an avatar row) if the panel has one TR: panelde
|
|
63
70
|
* varsa baştaki bloğun (bir grafik, bir harita, bir avatar satırı) yüksekliği
|
|
64
71
|
*/
|
|
65
72
|
block?: number;
|
|
73
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
74
|
+
[k: `data-${string}`]: unknown;
|
|
66
75
|
}): import("react").JSX.Element;
|
|
67
76
|
/** Page band: title, subtitle, and the actions that sit on the right. */
|
|
68
|
-
export declare function SkeletonPageBand(
|
|
77
|
+
export declare function SkeletonPageBand({ ...rest }: {
|
|
78
|
+
[k: `data-${string}`]: unknown;
|
|
79
|
+
}): import("react").JSX.Element;
|
|
69
80
|
//# sourceMappingURL=skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAcA,wBAAgB,QAAQ,CAAC,EACvB,SAAc,EACd,KAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAIA;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,EAC3B,KAAS,EACT,SAAc,EACd,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAcA;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAQ,EACR,KAAa,EACb,GAAG,IAAI,EACR,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkBA;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAS,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAUrG;AAED,oEAAoE;AACpE,wBAAgB,YAAY,CAAC,EAC3B,MAAY,EACZ,KAAY,EACZ,GAAG,IAAI,EACR,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAiBA;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAAC,EAC5B,IAAQ,EACR,IAAgD,EAChD,GAAG,IAAI,EACR,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA8BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAQ,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAgBvG;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAC5B,KAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAOA;AAED,yEAAyE;AACzE,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAa/E"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { createElement as _createElement } from "react";
|
|
1
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { dataProps } from "../lib/data-props.js";
|
|
2
4
|
/**
|
|
3
5
|
* Skeletons.
|
|
4
6
|
*
|
|
@@ -9,20 +11,24 @@ const MAX_STEPS = 6;
|
|
|
9
11
|
function delay(i = 0) {
|
|
10
12
|
return { ["--tamga-delay"]: `${(i % MAX_STEPS) * STEP}ms` };
|
|
11
13
|
}
|
|
12
|
-
export function Skeleton({ className = "", index = 0, style, }) {
|
|
13
|
-
return (_jsx("span", { className: `tamga-skeleton block ${className}`, style: { ...delay(index), ...style } }));
|
|
14
|
+
export function Skeleton({ className = "", index = 0, style, ...rest }) {
|
|
15
|
+
return (_jsx("span", { ...dataProps(rest), className: `tamga-skeleton block ${className}`, style: { ...delay(index), ...style } }));
|
|
14
16
|
}
|
|
15
17
|
/** Paragraph copy. The last line is always short — real text ends mid-line. */
|
|
16
|
-
export function SkeletonText({ lines = 3, className = "", }) {
|
|
18
|
+
export function SkeletonText({ lines = 3, className = "", ...rest }) {
|
|
17
19
|
const widths = ["100%", "96%", "92%", "98%"];
|
|
18
|
-
return (_jsx("span", { className: `flex flex-col gap-2 ${className}`, children: Array.from({ length: lines }, (_, i) => (_jsx(Skeleton, { index: i, className: "h-3", style: { width: i === lines - 1 ? "62%" : widths[i % widths.length] } }, i))) }));
|
|
20
|
+
return (_jsx("span", { ...dataProps(rest), className: `flex flex-col gap-2 ${className}`, children: Array.from({ length: lines }, (_, i) => (_jsx(Skeleton, { index: i, className: "h-3", style: { width: i === lines - 1 ? "62%" : widths[i % widths.length] } }, i))) }));
|
|
19
21
|
}
|
|
20
22
|
/**
|
|
21
23
|
* A list row. Mirrors `.tamga-list-row` exactly, including the 56px height, so the
|
|
22
24
|
* skeleton list and the real list are the same object with the text removed.
|
|
23
25
|
*/
|
|
24
|
-
export function SkeletonRows({ rows = 5, dense = false, }) {
|
|
25
|
-
return (_jsx(_Fragment, { children: Array.from({ length: rows }, (_, i) => (
|
|
26
|
+
export function SkeletonRows({ rows = 5, dense = false, ...rest }) {
|
|
27
|
+
return (_jsx(_Fragment, { children: Array.from({ length: rows }, (_, i) => (_createElement("div", { ...dataProps(rest), key: i, className: `tamga-list-row ${dense ? "tamga-list-row-sm" : ""}`, "aria-hidden": true },
|
|
28
|
+
_jsx(Skeleton, { index: i, className: "size-2.5 shrink-0" }),
|
|
29
|
+
_jsx(Skeleton, { index: i, className: "h-3 w-40 shrink-0" }),
|
|
30
|
+
_jsx(Skeleton, { index: i, className: "h-3 min-w-0 flex-1 max-w-28" }),
|
|
31
|
+
_jsx(Skeleton, { index: i, className: "ml-auto h-3 w-14 shrink-0" })))) }));
|
|
26
32
|
}
|
|
27
33
|
/**
|
|
28
34
|
* The KPI tile: icon tile, label, big number.
|
|
@@ -32,16 +38,16 @@ export function SkeletonRows({ rows = 5, dense = false, }) {
|
|
|
32
38
|
* bir iskeletin tek işi o zıplamayı önlemek. Bu yüzden ikisi aynı sınıfı
|
|
33
39
|
* (`tamga-kpi`) paylaşıyor: kalıp bir yerde değişince ikisi birden değişiyor.
|
|
34
40
|
*/
|
|
35
|
-
export function SkeletonKpi({ index = 0 }) {
|
|
36
|
-
return (_jsxs("section", { className: "tamga-kpi", "aria-hidden": true, children: [_jsx(Skeleton, { index: index, className: "size-10 shrink-0" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Skeleton, { index: index + 1, className: "h-2.5 w-20" }), _jsx(Skeleton, { index: index + 2, className: "mt-2 h-7 w-24" })] })] }));
|
|
41
|
+
export function SkeletonKpi({ index = 0, ...rest }) {
|
|
42
|
+
return (_jsxs("section", { ...dataProps(rest), className: "tamga-kpi", "aria-hidden": true, children: [_jsx(Skeleton, { index: index, className: "size-10 shrink-0" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Skeleton, { index: index + 1, className: "h-2.5 w-20" }), _jsx(Skeleton, { index: index + 2, className: "mt-2 h-7 w-24" })] })] }));
|
|
37
43
|
}
|
|
38
44
|
/** A card with a section head and a body area of a given height. */
|
|
39
|
-
export function SkeletonCard({ height = 220, title = true, }) {
|
|
40
|
-
return (_jsxs("section", { className: "tamga-card flex min-w-0 flex-col", "aria-hidden": true, children: [title ? (_jsxs("div", { className: "tamga-head tamga-section tamga-gutter flex flex-nowrap items-center gap-3", children: [_jsx(Skeleton, { className: "h-3.5 w-32 shrink-0" }), _jsx(Skeleton, { index: 1, className: "h-2.5 min-w-0 flex-1 max-w-20" }), _jsx(Skeleton, { index: 2, className: "ml-auto h-6 w-20 shrink-0" })] })) : null, _jsx("div", { className: "tamga-gutter flex-1 py-5", children: _jsx(Skeleton, { index: 3, className: "w-full", style: { height } }) })] }));
|
|
45
|
+
export function SkeletonCard({ height = 220, title = true, ...rest }) {
|
|
46
|
+
return (_jsxs("section", { ...dataProps(rest), className: "tamga-card flex min-w-0 flex-col", "aria-hidden": true, children: [title ? (_jsxs("div", { className: "tamga-head tamga-section tamga-gutter flex flex-nowrap items-center gap-3", children: [_jsx(Skeleton, { className: "h-3.5 w-32 shrink-0" }), _jsx(Skeleton, { index: 1, className: "h-2.5 min-w-0 flex-1 max-w-20" }), _jsx(Skeleton, { index: 2, className: "ml-auto h-6 w-20 shrink-0" })] })) : null, _jsx("div", { className: "tamga-gutter flex-1 py-5", children: _jsx(Skeleton, { index: 3, className: "w-full", style: { height } }) })] }));
|
|
41
47
|
}
|
|
42
48
|
/** A table: header rule plus n body rows across the given column widths. */
|
|
43
|
-
export function SkeletonTable({ rows = 6, cols = ["12rem", "5rem", "6rem", "4rem", "5rem"], }) {
|
|
44
|
-
return (_jsxs("div", { className: "tamga-card overflow-hidden", "aria-hidden": true, children: [_jsx("div", { className: "tamga-head tamga-section tamga-gutter flex flex-nowrap items-center gap-6", children: cols.map((w, i) => (_jsx(Skeleton, { index: i, className: "h-2.5 min-w-0 flex-1", style: { maxWidth: w } }, i))) }), Array.from({ length: rows }, (_, r) => (_jsx("div", { className: "tamga-list-row flex flex-nowrap items-center gap-6", children: cols.map((w, i) => (_jsx(Skeleton, { index: r + i, className: "h-3 min-w-0 flex-1", style: { maxWidth: w } }, i))) }, r)))] }));
|
|
49
|
+
export function SkeletonTable({ rows = 6, cols = ["12rem", "5rem", "6rem", "4rem", "5rem"], ...rest }) {
|
|
50
|
+
return (_jsxs("div", { ...dataProps(rest), className: "tamga-card overflow-hidden", "aria-hidden": true, children: [_jsx("div", { className: "tamga-head tamga-section tamga-gutter flex flex-nowrap items-center gap-6", children: cols.map((w, i) => (_jsx(Skeleton, { index: i, className: "h-2.5 min-w-0 flex-1", style: { maxWidth: w } }, i))) }), Array.from({ length: rows }, (_, r) => (_jsx("div", { className: "tamga-list-row flex flex-nowrap items-center gap-6", children: cols.map((w, i) => (_jsx(Skeleton, { index: r + i, className: "h-3 min-w-0 flex-1", style: { maxWidth: w } }, i))) }, r)))] }));
|
|
45
51
|
}
|
|
46
52
|
/**
|
|
47
53
|
* Panel contents.
|
|
@@ -53,15 +59,15 @@ export function SkeletonTable({ rows = 6, cols = ["12rem", "5rem", "6rem", "4rem
|
|
|
53
59
|
*
|
|
54
60
|
* Matches `.tamga-option` — 40px tall, 16px side padding, icon slot then label.
|
|
55
61
|
*/
|
|
56
|
-
export function SkeletonOptions({ rows = 4 }) {
|
|
62
|
+
export function SkeletonOptions({ rows = 4, ...rest }) {
|
|
57
63
|
const widths = ["68%", "84%", "56%", "76%", "64%"];
|
|
58
|
-
return (_jsx("div", { className: "py-1", "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => (_jsxs("div", { className: "flex h-10 items-center gap-2 px-4", children: [_jsx(Skeleton, { index: i, className: "size-4 shrink-0" }), _jsx(Skeleton, { index: i, className: "h-3 min-w-0 flex-1", style: { maxWidth: widths[i % widths.length] } })] }, i))) }));
|
|
64
|
+
return (_jsx("div", { ...dataProps(rest), className: "py-1", "aria-hidden": true, children: Array.from({ length: rows }, (_, i) => (_jsxs("div", { className: "flex h-10 items-center gap-2 px-4", children: [_jsx(Skeleton, { index: i, className: "size-4 shrink-0" }), _jsx(Skeleton, { index: i, className: "h-3 min-w-0 flex-1", style: { maxWidth: widths[i % widths.length] } })] }, i))) }));
|
|
59
65
|
}
|
|
60
66
|
/** Free-form panel body — popover, dialog, sheet. */
|
|
61
|
-
export function SkeletonPanel({ lines = 3, block, }) {
|
|
62
|
-
return (_jsxs("div", { className: "flex flex-col gap-3", "aria-hidden": true, children: [block ? _jsx(Skeleton, { className: "w-full", style: { height: block } }) : null, _jsx(SkeletonText, { lines: lines })] }));
|
|
67
|
+
export function SkeletonPanel({ lines = 3, block, ...rest }) {
|
|
68
|
+
return (_jsxs("div", { ...dataProps(rest), className: "flex flex-col gap-3", "aria-hidden": true, children: [block ? _jsx(Skeleton, { className: "w-full", style: { height: block } }) : null, _jsx(SkeletonText, { lines: lines })] }));
|
|
63
69
|
}
|
|
64
70
|
/** Page band: title, subtitle, and the actions that sit on the right. */
|
|
65
|
-
export function SkeletonPageBand() {
|
|
66
|
-
return (_jsxs("div", { className: "tamga-section tamga-gutter flex flex-wrap items-center gap-4 py-4", "aria-hidden": true, children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { index: 1, className: "mt-2 h-2.5 w-64" })] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Skeleton, { index: 2, className: "h-10 w-32" }), _jsx(Skeleton, { index: 3, className: "h-10 w-36" })] })] }));
|
|
71
|
+
export function SkeletonPageBand({ ...rest }) {
|
|
72
|
+
return (_jsxs("div", { ...dataProps(rest), className: "tamga-section tamga-gutter flex flex-wrap items-center gap-4 py-4", "aria-hidden": true, children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { index: 1, className: "mt-2 h-2.5 w-64" })] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Skeleton, { index: 2, className: "h-10 w-32" }), _jsx(Skeleton, { index: 3, className: "h-10 w-36" })] })] }));
|
|
67
73
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
5
5
|
*/
|
|
6
6
|
/** Kaydırıcı. */
|
|
7
|
-
export declare function Slider({ value, onChange, min, max, step, label, suffix, className, }: {
|
|
7
|
+
export declare function Slider({ value, onChange, min, max, step, label, suffix, className, ...rest }: {
|
|
8
8
|
value: number;
|
|
9
9
|
onChange: (next: number) => void;
|
|
10
10
|
min?: number;
|
|
@@ -14,5 +14,7 @@ export declare function Slider({ value, onChange, min, max, step, label, suffix,
|
|
|
14
14
|
/** The unit beside the value: "%", "ms", "₺". TR: Değerin yanındaki birim: "%", "ms", "₺". */
|
|
15
15
|
suffix?: string;
|
|
16
16
|
className?: string;
|
|
17
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
18
|
+
[k: `data-${string}`]: unknown;
|
|
17
19
|
}): import("react").JSX.Element;
|
|
18
20
|
//# sourceMappingURL=slider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,iBAAiB;AACjB,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAuBA"}
|
|
@@ -1,15 +1,16 @@
|
|
|
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
|
+
import { dataProps } from "../lib/data-props.js";
|
|
4
5
|
/**
|
|
5
6
|
* Kendi dosyasında, çünkü YENİ BİR KONTROL.
|
|
6
7
|
*
|
|
7
8
|
* Gerekçe: docs/gerekce/01-form-ve-girdi.md
|
|
8
9
|
*/
|
|
9
10
|
/** Kaydırıcı. */
|
|
10
|
-
export function Slider({ value, onChange, min = 0, max = 100, step = 1, label, suffix, className, }) {
|
|
11
|
+
export function Slider({ value, onChange, min = 0, max = 100, step = 1, label, suffix, className, ...rest }) {
|
|
11
12
|
const pct = ((value - min) / (max - min)) * 100;
|
|
12
|
-
return (_jsxs("span", { className: cn("flex items-center gap-4", className), children: [_jsx("input", { type: "range", value: value, min: min, max: max, step: step, "aria-label": label, onChange: (e) => onChange(Number(e.target.value)), className: "tamga-slider h-1.5 flex-1 cursor-pointer appearance-none rounded-full", style: {
|
|
13
|
+
return (_jsxs("span", { ...dataProps(rest), className: cn("flex items-center gap-4", className), children: [_jsx("input", { type: "range", value: value, min: min, max: max, step: step, "aria-label": label, onChange: (e) => onChange(Number(e.target.value)), className: "tamga-slider h-1.5 flex-1 cursor-pointer appearance-none rounded-full", style: {
|
|
13
14
|
background: `linear-gradient(to right, var(--color-accent-line) ${pct}%, var(--color-edge) ${pct}%)`,
|
|
14
15
|
} }), _jsxs("span", { className: "w-16 shrink-0 text-right font-mono text-body text-ink tabular-nums", children: [value, suffix] })] }));
|
|
15
16
|
}
|
|
@@ -8,8 +8,9 @@
|
|
|
8
8
|
* worst of both worlds: it satisfies the compiler and ships English into every other language,
|
|
9
9
|
* silently, because nobody sees an aria-label until they are already using a screen reader.
|
|
10
10
|
*/
|
|
11
|
-
export declare function Spinner({ size, label }: {
|
|
11
|
+
export declare function Spinner({ size, label, ...rest }: {
|
|
12
12
|
size?: number;
|
|
13
13
|
label: string;
|
|
14
|
+
[k: `data-${string}`]: unknown;
|
|
14
15
|
}): import("react").JSX.Element;
|
|
15
16
|
//# sourceMappingURL=spinner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/components/spinner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/components/spinner.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;CAAE,+BAyBtH"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { dataProps } from "../lib/data-props.js";
|
|
3
4
|
/**
|
|
4
5
|
* Bars — three uprights marching, echoing the stems in the wordmark and
|
|
5
6
|
* reading as a level meter, which is what this product measures.
|
|
@@ -10,9 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
10
11
|
* worst of both worlds: it satisfies the compiler and ships English into every other language,
|
|
11
12
|
* silently, because nobody sees an aria-label until they are already using a screen reader.
|
|
12
13
|
*/
|
|
13
|
-
export function Spinner({ size = 16, label }) {
|
|
14
|
+
export function Spinner({ size = 16, label, ...rest }) {
|
|
14
15
|
const w = Math.max(2.5, size * 0.22);
|
|
15
|
-
return (_jsx("span", { role: "status", "aria-label": label, className: "inline-flex items-end justify-between", style: { width: size, height: size }, children: [0, 1, 2].map((i) => (_jsx("span", { className: "tamga-spin-part", style: {
|
|
16
|
+
return (_jsx("span", { ...dataProps(rest), role: "status", "aria-label": label, className: "inline-flex items-end justify-between", style: { width: size, height: size }, children: [0, 1, 2].map((i) => (_jsx("span", { className: "tamga-spin-part", style: {
|
|
16
17
|
width: w,
|
|
17
18
|
height: "100%",
|
|
18
19
|
transformOrigin: "bottom",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
* matematiği ile çerçevenin CSS'i ayrı ayrı hesaplansaydı, kullanıcının
|
|
22
22
|
* gördüğü kare ile kesilen kare farklı olurdu — ve fark sessiz olurdu.
|
|
23
23
|
*/
|
|
24
|
-
export declare function SquarePicker({ open, source, onClose, onPick, maxEdge, labels, }: {
|
|
24
|
+
export declare function SquarePicker({ open, source, onClose, onPick, maxEdge, labels, ...rest }: {
|
|
25
25
|
open: boolean;
|
|
26
26
|
/** The image the square is cut out of. TR: Üzerinden kesilecek görsel. */
|
|
27
27
|
source: string;
|
|
@@ -37,5 +37,7 @@ export declare function SquarePicker({ open, source, onClose, onPick, maxEdge, l
|
|
|
37
37
|
confirm: string;
|
|
38
38
|
close: string;
|
|
39
39
|
};
|
|
40
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
41
|
+
[k: `data-${string}`]: unknown;
|
|
40
42
|
}): import("react").JSX.Element;
|
|
41
43
|
//# sourceMappingURL=square-picker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"square-picker.d.ts","sourceRoot":"","sources":["../../src/components/square-picker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"square-picker.d.ts","sourceRoot":"","sources":["../../src/components/square-picker.tsx"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAa,EACb,MAAM,EACN,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmHA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { dataProps } from "../lib/data-props.js";
|
|
3
4
|
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
4
5
|
import { Button } from "./button.js";
|
|
5
6
|
import { Dialog } from "./overlay.js";
|
|
@@ -29,7 +30,7 @@ import { cropSquare } from "../lib/image.js";
|
|
|
29
30
|
* matematiği ile çerçevenin CSS'i ayrı ayrı hesaplansaydı, kullanıcının
|
|
30
31
|
* gördüğü kare ile kesilen kare farklı olurdu — ve fark sessiz olurdu.
|
|
31
32
|
*/
|
|
32
|
-
export function SquarePicker({ open, source, onClose, onPick, maxEdge = 256, labels, }) {
|
|
33
|
+
export function SquarePicker({ open, source, onClose, onPick, maxEdge = 256, labels, ...rest }) {
|
|
33
34
|
const sahne = useRef(null);
|
|
34
35
|
const [olcu, setOlcu] = useState({ en: 0, boy: 0 });
|
|
35
36
|
const [x, setX] = useState(0);
|
|
@@ -75,7 +76,7 @@ export function SquarePicker({ open, source, onClose, onPick, maxEdge = 256, lab
|
|
|
75
76
|
onPick(await cropSquare(source, { x, y, size: oran }, maxEdge));
|
|
76
77
|
onClose();
|
|
77
78
|
}
|
|
78
|
-
return (_jsx(Dialog, { open: open, onClose: onClose, title: labels.title, closeLabel: labels.close, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: onClose, children: labels.cancel }), _jsx(Button, { variant: "primary", type: "button", onClick: onayla, children: labels.confirm })] }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Label, { children: labels.hint }), _jsx("div", { className: "rounded-[var(--radius-card)] border border-[var(--color-edge)] bg-[var(--color-shell)] p-4", children: _jsxs("div", { ref: sahne, onPointerDown: (e) => {
|
|
79
|
+
return (_jsx(Dialog, { open: open, onClose: onClose, title: labels.title, closeLabel: labels.close, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: onClose, children: labels.cancel }), _jsx(Button, { variant: "primary", type: "button", onClick: onayla, children: labels.confirm })] }), children: _jsxs("div", { ...dataProps(rest), className: "flex flex-col gap-4", children: [_jsx(Label, { children: labels.hint }), _jsx("div", { className: "rounded-[var(--radius-card)] border border-[var(--color-edge)] bg-[var(--color-shell)] p-4", children: _jsxs("div", { ref: sahne, onPointerDown: (e) => {
|
|
79
80
|
setSuruyor(true);
|
|
80
81
|
e.currentTarget.setPointerCapture(e.pointerId);
|
|
81
82
|
}, onPointerMove: tasi, onPointerUp: () => setSuruyor(false), className: "relative cursor-crosshair touch-none select-none overflow-hidden", children: [_jsx("img", { src: source, alt: "", className: "pointer-events-none block w-full", draggable: false }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute border-2 border-[var(--color-accent-line)]", style: {
|
|
@@ -7,7 +7,7 @@ export type StackSeries = {
|
|
|
7
7
|
name: string;
|
|
8
8
|
values: readonly number[];
|
|
9
9
|
};
|
|
10
|
-
export declare function StackedBarChart({ series, labels, height, formatValue, className, }: {
|
|
10
|
+
export declare function StackedBarChart({ series, labels, height, formatValue, className, ...rest }: {
|
|
11
11
|
series: readonly StackSeries[];
|
|
12
12
|
/**
|
|
13
13
|
* The marks on the X axis; the same length as `series[n].values`. TR: X eksenindeki
|
|
@@ -17,5 +17,7 @@ export declare function StackedBarChart({ series, labels, height, formatValue, c
|
|
|
17
17
|
height?: number;
|
|
18
18
|
formatValue?: (v: number) => string;
|
|
19
19
|
className?: string;
|
|
20
|
+
/** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
|
|
21
|
+
[k: `data-${string}`]: unknown;
|
|
20
22
|
}): import("react").JSX.Element;
|
|
21
23
|
//# sourceMappingURL=stacked-bar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stacked-bar.d.ts","sourceRoot":"","sources":["../../src/components/stacked-bar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stacked-bar.d.ts","sourceRoot":"","sources":["../../src/components/stacked-bar.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B,CAAC;AASF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B;;;OAGG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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,+BAkHA"}
|
|
@@ -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 StackedBarChart({ series, labels, height = 260, formatValue = String, className, }) {
|
|
13
|
+
export function StackedBarChart({ series, labels, height = 260, formatValue = String, className, ...rest }) {
|
|
13
14
|
const [uzerinde, setUzerinde] = useState(null);
|
|
14
15
|
const toplamlar = labels.map((_, i) => series.reduce((n, s) => n + (s.values[i] ?? 0), 0));
|
|
15
16
|
const enBuyuk = niceMax(Math.max(0, ...toplamlar));
|
|
16
17
|
/* Dört ızgara çizgisi: daha fazlası okumayı kolaylaştırmıyor, zemini
|
|
17
18
|
kirletiyor. */
|
|
18
19
|
const cizgiler = [0, 0.25, 0.5, 0.75, 1].map((o) => enBuyuk * o);
|
|
19
|
-
return (_jsxs("figure", { className: cn("flex flex-col", className), children: [_jsxs("div", { className: "flex gap-3", style: { height }, children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between py-1 text-right text-micro tabular-nums text-ink-faint", children: [...cizgiler].reverse().map((v) => (_jsx("span", { children: formatValue(v) }, v))) }), _jsxs("div", { className: "relative min-w-0 flex-1", onMouseLeave: () => setUzerinde(null), children: [cizgiler.map((v, i) => (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 h-px bg-[var(--color-line)]", style: { bottom: `${(i / (cizgiler.length - 1)) * 100}%` } }, v))), _jsx("div", { className: "absolute inset-0 flex items-end gap-1", children: labels.map((etiket, i) => {
|
|
20
|
+
return (_jsxs("figure", { className: cn("flex flex-col", className), children: [_jsxs("div", { ...dataProps(rest), className: "flex gap-3", style: { height }, children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between py-1 text-right text-micro tabular-nums text-ink-faint", children: [...cizgiler].reverse().map((v) => (_jsx("span", { children: formatValue(v) }, v))) }), _jsxs("div", { className: "relative min-w-0 flex-1", onMouseLeave: () => setUzerinde(null), children: [cizgiler.map((v, i) => (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 h-px bg-[var(--color-line)]", style: { bottom: `${(i / (cizgiler.length - 1)) * 100}%` } }, v))), _jsx("div", { className: "absolute inset-0 flex items-end gap-1", children: labels.map((etiket, i) => {
|
|
20
21
|
const toplam = toplamlar[i] ?? 0;
|
|
21
22
|
const secili = uzerinde === i;
|
|
22
23
|
return (_jsxs("div", { className: "flex h-full min-w-0 flex-1 cursor-default flex-col justify-end", onMouseEnter: () => setUzerinde(i), children: [[...series].reverse().map((s, ri) => {
|