@moontra/moonui 6.9.0 → 6.11.0
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/dist/hooks/index.global.js +6 -1
- package/dist/hooks/index.global.js.map +1 -1
- package/dist/index.d.mts +34 -33
- package/dist/index.d.ts +34 -33
- package/dist/index.global.js +365 -52
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +121 -78
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +121 -78
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/__tests__/checkbox.test.tsx +3 -3
- package/src/components/ui/__tests__/collapsible.test.tsx +5 -5
- package/src/components/ui/__tests__/dialog.test.tsx +2 -2
- package/src/components/ui/__tests__/preset-color-shadowing.test.ts +71 -0
- package/src/components/ui/__tests__/progress.test.tsx +4 -4
- package/src/components/ui/__tests__/radio-group.test.tsx +4 -4
- package/src/components/ui/__tests__/semantic-token-usage.test.ts +120 -0
- package/src/components/ui/__tests__/size-scale-convention.test.ts +189 -0
- package/src/components/ui/__tests__/slider.test.tsx +4 -4
- package/src/components/ui/__tests__/toast.test.tsx +6 -3
- package/src/components/ui/__tests__/tooltip.test.tsx +8 -4
- package/src/components/ui/alert.tsx +5 -3
- package/src/components/ui/avatar.tsx +3 -2
- package/src/components/ui/breadcrumb.tsx +4 -2
- package/src/components/ui/card.tsx +4 -2
- package/src/components/ui/checkbox.tsx +5 -3
- package/src/components/ui/collapsible.tsx +10 -6
- package/src/components/ui/color-picker.tsx +11 -5
- package/src/components/ui/command.tsx +4 -2
- package/src/components/ui/date-picker.tsx +4 -2
- package/src/components/ui/dialog.tsx +7 -5
- package/src/components/ui/popover-pro.tsx +5 -3
- package/src/components/ui/popover.tsx +4 -2
- package/src/components/ui/progress.tsx +6 -4
- package/src/components/ui/radio-group.tsx +5 -3
- package/src/components/ui/skeleton.tsx +4 -2
- package/src/components/ui/slider.tsx +10 -6
- package/src/components/ui/table.tsx +4 -2
- package/src/components/ui/toast.tsx +4 -4
- package/src/components/ui/toggle-group.tsx +4 -1
- package/src/components/ui/toggle.tsx +4 -2
- package/src/components/ui/tooltip.tsx +3 -3
- package/src/styles/tokens.css +43 -2
- package/tailwind-preset.js +17 -7
- package/src/use-toast.ts +0 -32
|
@@ -11,13 +11,14 @@ const avatarVariants = cva(
|
|
|
11
11
|
{
|
|
12
12
|
variants: {
|
|
13
13
|
size: {
|
|
14
|
-
default: "h-10 w-10",
|
|
15
14
|
xs: "h-6 w-6",
|
|
16
15
|
sm: "h-8 w-8",
|
|
17
16
|
md: "h-10 w-10",
|
|
18
17
|
lg: "h-12 w-12",
|
|
19
18
|
xl: "h-16 w-16",
|
|
20
19
|
"2xl": "h-20 w-20",
|
|
20
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
21
|
+
default: "h-10 w-10",
|
|
21
22
|
},
|
|
22
23
|
radius: {
|
|
23
24
|
default: "rounded-full",
|
|
@@ -34,7 +35,7 @@ const avatarVariants = cva(
|
|
|
34
35
|
}
|
|
35
36
|
},
|
|
36
37
|
defaultVariants: {
|
|
37
|
-
size: "
|
|
38
|
+
size: "md",
|
|
38
39
|
radius: "default",
|
|
39
40
|
variant: "default"
|
|
40
41
|
},
|
|
@@ -17,14 +17,16 @@ const breadcrumbVariants = cva(
|
|
|
17
17
|
ghost: "text-foreground/60 transition-colors",
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
|
-
|
|
20
|
+
md: "text-sm",
|
|
21
21
|
sm: "text-xs",
|
|
22
22
|
lg: "text-base",
|
|
23
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
24
|
+
default: "text-sm",
|
|
23
25
|
},
|
|
24
26
|
},
|
|
25
27
|
defaultVariants: {
|
|
26
28
|
variant: "default",
|
|
27
|
-
size: "
|
|
29
|
+
size: "md",
|
|
28
30
|
},
|
|
29
31
|
}
|
|
30
32
|
);
|
|
@@ -35,10 +35,12 @@ const cardVariants = cva(
|
|
|
35
35
|
glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-gray-700/30 dark:bg-gray-800/10",
|
|
36
36
|
},
|
|
37
37
|
size: {
|
|
38
|
-
|
|
38
|
+
md: "",
|
|
39
39
|
sm: "",
|
|
40
40
|
lg: "",
|
|
41
41
|
xl: "",
|
|
42
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
43
|
+
default: "",
|
|
42
44
|
},
|
|
43
45
|
radius: {
|
|
44
46
|
default: "rounded-lg",
|
|
@@ -54,7 +56,7 @@ const cardVariants = cva(
|
|
|
54
56
|
},
|
|
55
57
|
defaultVariants: {
|
|
56
58
|
variant: "default",
|
|
57
|
-
size: "
|
|
59
|
+
size: "md",
|
|
58
60
|
radius: "default",
|
|
59
61
|
},
|
|
60
62
|
}
|
|
@@ -26,9 +26,11 @@ const checkboxVariants = cva(
|
|
|
26
26
|
},
|
|
27
27
|
size: {
|
|
28
28
|
sm: "h-3.5 w-3.5",
|
|
29
|
+
md: "h-4 w-4",
|
|
30
|
+
lg: "h-5 w-5",
|
|
31
|
+
xl: "h-6 w-6",
|
|
32
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
29
33
|
default: "h-4 w-4",
|
|
30
|
-
md: "h-5 w-5",
|
|
31
|
-
lg: "h-6 w-6",
|
|
32
34
|
},
|
|
33
35
|
radius: {
|
|
34
36
|
none: "rounded-none",
|
|
@@ -46,7 +48,7 @@ const checkboxVariants = cva(
|
|
|
46
48
|
},
|
|
47
49
|
defaultVariants: {
|
|
48
50
|
variant: "default",
|
|
49
|
-
size: "
|
|
51
|
+
size: "md",
|
|
50
52
|
radius: "default",
|
|
51
53
|
animation: "default",
|
|
52
54
|
},
|
|
@@ -27,14 +27,16 @@ const collapsibleTriggerVariants = cva(
|
|
|
27
27
|
},
|
|
28
28
|
size: {
|
|
29
29
|
sm: "text-xs py-2 px-3",
|
|
30
|
+
md: "text-sm py-3 px-4",
|
|
31
|
+
lg: "text-base py-4 px-4",
|
|
32
|
+
xl: "text-lg py-5 px-5",
|
|
33
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
30
34
|
default: "text-sm py-3 px-4",
|
|
31
|
-
md: "text-base py-4 px-4",
|
|
32
|
-
lg: "text-lg py-5 px-5",
|
|
33
35
|
},
|
|
34
36
|
},
|
|
35
37
|
defaultVariants: {
|
|
36
38
|
variant: "default",
|
|
37
|
-
size: "
|
|
39
|
+
size: "md",
|
|
38
40
|
},
|
|
39
41
|
}
|
|
40
42
|
)
|
|
@@ -85,14 +87,16 @@ const collapsibleContentVariants = cva(
|
|
|
85
87
|
},
|
|
86
88
|
size: {
|
|
87
89
|
sm: "text-xs",
|
|
90
|
+
md: "text-sm",
|
|
91
|
+
lg: "text-base",
|
|
92
|
+
xl: "text-lg",
|
|
93
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
88
94
|
default: "text-sm",
|
|
89
|
-
md: "text-base",
|
|
90
|
-
lg: "text-lg",
|
|
91
95
|
},
|
|
92
96
|
},
|
|
93
97
|
defaultVariants: {
|
|
94
98
|
variant: "default",
|
|
95
|
-
size: "
|
|
99
|
+
size: "md",
|
|
96
100
|
},
|
|
97
101
|
}
|
|
98
102
|
)
|
|
@@ -27,10 +27,12 @@ const colorPickerVariants = cva(
|
|
|
27
27
|
{
|
|
28
28
|
variants: {
|
|
29
29
|
size: {
|
|
30
|
-
|
|
30
|
+
md: "h-10 w-10",
|
|
31
31
|
sm: "h-8 w-8",
|
|
32
32
|
lg: "h-12 w-12",
|
|
33
33
|
xl: "h-16 w-16",
|
|
34
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
35
|
+
default: "h-10 w-10",
|
|
34
36
|
},
|
|
35
37
|
shape: {
|
|
36
38
|
square: "rounded-md",
|
|
@@ -39,7 +41,7 @@ const colorPickerVariants = cva(
|
|
|
39
41
|
},
|
|
40
42
|
},
|
|
41
43
|
defaultVariants: {
|
|
42
|
-
size: "
|
|
44
|
+
size: "md",
|
|
43
45
|
shape: "square",
|
|
44
46
|
},
|
|
45
47
|
}
|
|
@@ -563,7 +565,8 @@ export interface SimpleColorPickerProps {
|
|
|
563
565
|
onChange?: (color: string) => void;
|
|
564
566
|
colors?: string[];
|
|
565
567
|
className?: string;
|
|
566
|
-
|
|
568
|
+
/** #319: kanonik skala; `default` `md`nin deprecated alias'ıdır. */
|
|
569
|
+
size?: "sm" | "md" | "lg" | "default";
|
|
567
570
|
}
|
|
568
571
|
|
|
569
572
|
export function SimpleColorPicker({
|
|
@@ -571,12 +574,15 @@ export function SimpleColorPicker({
|
|
|
571
574
|
onChange,
|
|
572
575
|
colors = defaultPresets.slice(0, 10),
|
|
573
576
|
className,
|
|
574
|
-
|
|
577
|
+
// #319: varsayılan kanonik ada çekildi (aynı CSS: h-8 w-8)
|
|
578
|
+
size = "md",
|
|
575
579
|
}: SimpleColorPickerProps) {
|
|
576
580
|
const sizeClasses = {
|
|
577
581
|
sm: "h-6 w-6",
|
|
578
|
-
|
|
582
|
+
md: "h-8 w-8",
|
|
579
583
|
lg: "h-10 w-10",
|
|
584
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
585
|
+
default: "h-8 w-8",
|
|
580
586
|
};
|
|
581
587
|
|
|
582
588
|
return (
|
|
@@ -26,13 +26,15 @@ const commandVariants = cva(
|
|
|
26
26
|
},
|
|
27
27
|
size: {
|
|
28
28
|
sm: "min-h-[200px]",
|
|
29
|
-
|
|
29
|
+
md: "min-h-[300px]",
|
|
30
30
|
lg: "min-h-[400px]",
|
|
31
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
32
|
+
default: "min-h-[300px]",
|
|
31
33
|
},
|
|
32
34
|
},
|
|
33
35
|
defaultVariants: {
|
|
34
36
|
variant: "default",
|
|
35
|
-
size: "
|
|
37
|
+
size: "md",
|
|
36
38
|
},
|
|
37
39
|
}
|
|
38
40
|
)
|
|
@@ -36,10 +36,12 @@ const datePickerVariants = cva(
|
|
|
36
36
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
37
37
|
},
|
|
38
38
|
size: {
|
|
39
|
-
|
|
39
|
+
md: "h-10 px-4 py-2",
|
|
40
40
|
sm: "h-8 px-3 text-sm",
|
|
41
41
|
lg: "h-12 px-6 text-base",
|
|
42
42
|
icon: "h-10 w-10",
|
|
43
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
44
|
+
default: "h-10 px-4 py-2",
|
|
43
45
|
},
|
|
44
46
|
state: {
|
|
45
47
|
default: "",
|
|
@@ -50,7 +52,7 @@ const datePickerVariants = cva(
|
|
|
50
52
|
},
|
|
51
53
|
defaultVariants: {
|
|
52
54
|
variant: "default",
|
|
53
|
-
size: "
|
|
55
|
+
size: "md",
|
|
54
56
|
state: "default",
|
|
55
57
|
},
|
|
56
58
|
}
|
|
@@ -73,12 +73,14 @@ const dialogContentVariants = cva(
|
|
|
73
73
|
size: {
|
|
74
74
|
xs: "max-w-xs p-4",
|
|
75
75
|
sm: "max-w-sm p-5",
|
|
76
|
-
|
|
76
|
+
lg: "max-w-lg p-6",
|
|
77
77
|
md: "max-w-md p-6",
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
xl: "max-w-2xl p-7",
|
|
79
|
+
"2xl": "max-w-4xl p-8",
|
|
80
80
|
full: "max-w-[95vw] max-h-[95vh] p-6",
|
|
81
|
-
|
|
81
|
+
/** @deprecated `lg` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
82
|
+
default: "max-w-lg p-6",
|
|
83
|
+
},
|
|
82
84
|
radius: {
|
|
83
85
|
none: "rounded-none",
|
|
84
86
|
sm: "rounded-md",
|
|
@@ -103,7 +105,7 @@ const dialogContentVariants = cva(
|
|
|
103
105
|
},
|
|
104
106
|
defaultVariants: {
|
|
105
107
|
variant: "default",
|
|
106
|
-
size: "
|
|
108
|
+
size: "lg",
|
|
107
109
|
radius: "default",
|
|
108
110
|
animation: "default",
|
|
109
111
|
position: "default",
|
|
@@ -171,10 +171,12 @@ const popoverContentVariants = cva(
|
|
|
171
171
|
},
|
|
172
172
|
size: {
|
|
173
173
|
sm: "w-56 p-3",
|
|
174
|
-
|
|
174
|
+
md: "w-72 p-4",
|
|
175
175
|
lg: "w-96 p-6",
|
|
176
176
|
xl: "w-[32rem] p-8",
|
|
177
|
-
auto: "w-auto p-4"
|
|
177
|
+
auto: "w-auto p-4",
|
|
178
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
179
|
+
default: "w-72 p-4",
|
|
178
180
|
},
|
|
179
181
|
overlayBlur: {
|
|
180
182
|
none: "",
|
|
@@ -186,7 +188,7 @@ const popoverContentVariants = cva(
|
|
|
186
188
|
},
|
|
187
189
|
defaultVariants: {
|
|
188
190
|
variant: "default",
|
|
189
|
-
size: "
|
|
191
|
+
size: "md",
|
|
190
192
|
overlayBlur: "none"
|
|
191
193
|
}
|
|
192
194
|
}
|
|
@@ -25,8 +25,10 @@ const popoverContentVariants = cva(
|
|
|
25
25
|
},
|
|
26
26
|
size: {
|
|
27
27
|
sm: "w-48 p-3",
|
|
28
|
-
|
|
28
|
+
md: "w-72 p-4",
|
|
29
29
|
lg: "w-96 p-5",
|
|
30
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
31
|
+
default: "w-72 p-4",
|
|
30
32
|
},
|
|
31
33
|
side: {
|
|
32
34
|
top: "data-[side=top]:slide-in-from-bottom-2",
|
|
@@ -56,7 +58,7 @@ const popoverContentVariants = cva(
|
|
|
56
58
|
},
|
|
57
59
|
defaultVariants: {
|
|
58
60
|
variant: "default",
|
|
59
|
-
size: "
|
|
61
|
+
size: "md",
|
|
60
62
|
radius: "default",
|
|
61
63
|
shadow: "default",
|
|
62
64
|
},
|
|
@@ -32,10 +32,12 @@ const progressVariants = cva(
|
|
|
32
32
|
size: {
|
|
33
33
|
xs: "h-1",
|
|
34
34
|
sm: "h-1.5",
|
|
35
|
+
md: "h-2",
|
|
36
|
+
lg: "h-2.5",
|
|
37
|
+
xl: "h-3",
|
|
38
|
+
"2xl": "h-4",
|
|
39
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
35
40
|
default: "h-2",
|
|
36
|
-
md: "h-2.5",
|
|
37
|
-
lg: "h-3",
|
|
38
|
-
xl: "h-4",
|
|
39
41
|
},
|
|
40
42
|
radius: {
|
|
41
43
|
none: "rounded-none",
|
|
@@ -53,7 +55,7 @@ const progressVariants = cva(
|
|
|
53
55
|
},
|
|
54
56
|
defaultVariants: {
|
|
55
57
|
variant: "default",
|
|
56
|
-
size: "
|
|
58
|
+
size: "md",
|
|
57
59
|
radius: "full",
|
|
58
60
|
animation: "default",
|
|
59
61
|
},
|
|
@@ -24,14 +24,16 @@ const radioGroupItemVariants = cva(
|
|
|
24
24
|
},
|
|
25
25
|
size: {
|
|
26
26
|
sm: "h-3.5 w-3.5",
|
|
27
|
+
md: "h-4 w-4",
|
|
28
|
+
lg: "h-5 w-5",
|
|
29
|
+
xl: "h-6 w-6",
|
|
30
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
27
31
|
default: "h-4 w-4",
|
|
28
|
-
md: "h-5 w-5",
|
|
29
|
-
lg: "h-6 w-6",
|
|
30
32
|
},
|
|
31
33
|
},
|
|
32
34
|
defaultVariants: {
|
|
33
35
|
variant: "default",
|
|
34
|
-
size: "
|
|
36
|
+
size: "md",
|
|
35
37
|
},
|
|
36
38
|
}
|
|
37
39
|
);
|
|
@@ -24,9 +24,11 @@ const skeletonVariants = cva(
|
|
|
24
24
|
accent: "bg-accent",
|
|
25
25
|
},
|
|
26
26
|
size: {
|
|
27
|
-
|
|
27
|
+
md: "",
|
|
28
28
|
sm: "scale-90",
|
|
29
29
|
lg: "scale-110",
|
|
30
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
31
|
+
default: "",
|
|
30
32
|
},
|
|
31
33
|
shape: {
|
|
32
34
|
rect: "rounded-md",
|
|
@@ -41,7 +43,7 @@ const skeletonVariants = cva(
|
|
|
41
43
|
},
|
|
42
44
|
defaultVariants: {
|
|
43
45
|
variant: "default",
|
|
44
|
-
size: "
|
|
46
|
+
size: "md",
|
|
45
47
|
shape: "rect",
|
|
46
48
|
animation: "pulse",
|
|
47
49
|
},
|
|
@@ -18,13 +18,15 @@ const sliderVariants = cva(
|
|
|
18
18
|
variants: {
|
|
19
19
|
size: {
|
|
20
20
|
sm: "h-5",
|
|
21
|
+
md: "h-6",
|
|
22
|
+
lg: "h-8",
|
|
23
|
+
xl: "h-10",
|
|
24
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
21
25
|
default: "h-6",
|
|
22
|
-
md: "h-8",
|
|
23
|
-
lg: "h-10",
|
|
24
26
|
},
|
|
25
27
|
},
|
|
26
28
|
defaultVariants: {
|
|
27
|
-
size: "
|
|
29
|
+
size: "md",
|
|
28
30
|
},
|
|
29
31
|
}
|
|
30
32
|
)
|
|
@@ -84,14 +86,16 @@ const sliderThumbVariants = cva(
|
|
|
84
86
|
},
|
|
85
87
|
size: {
|
|
86
88
|
sm: "h-3 w-3",
|
|
89
|
+
md: "h-4 w-4",
|
|
90
|
+
lg: "h-5 w-5",
|
|
91
|
+
xl: "h-6 w-6",
|
|
92
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
87
93
|
default: "h-4 w-4",
|
|
88
|
-
md: "h-5 w-5",
|
|
89
|
-
lg: "h-6 w-6",
|
|
90
94
|
},
|
|
91
95
|
},
|
|
92
96
|
defaultVariants: {
|
|
93
97
|
variant: "primary",
|
|
94
|
-
size: "
|
|
98
|
+
size: "md",
|
|
95
99
|
},
|
|
96
100
|
}
|
|
97
101
|
)
|
|
@@ -46,13 +46,15 @@ const tableVariants = cva(
|
|
|
46
46
|
},
|
|
47
47
|
size: {
|
|
48
48
|
sm: "text-xs",
|
|
49
|
-
|
|
49
|
+
md: "text-sm",
|
|
50
50
|
lg: "text-base",
|
|
51
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
52
|
+
default: "text-sm",
|
|
51
53
|
},
|
|
52
54
|
},
|
|
53
55
|
defaultVariants: {
|
|
54
56
|
variant: "default",
|
|
55
|
-
size: "
|
|
57
|
+
size: "md",
|
|
56
58
|
},
|
|
57
59
|
}
|
|
58
60
|
);
|
|
@@ -32,11 +32,11 @@ const toastVariants = cva(
|
|
|
32
32
|
destructive:
|
|
33
33
|
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
|
34
34
|
success:
|
|
35
|
-
"border-
|
|
35
|
+
"border-success-subtle-foreground/20 bg-success-subtle text-success-subtle-foreground",
|
|
36
36
|
warning:
|
|
37
|
-
"border-
|
|
37
|
+
"border-warning-subtle-foreground/20 bg-warning-subtle text-warning-subtle-foreground",
|
|
38
38
|
info:
|
|
39
|
-
"border-
|
|
39
|
+
"border-info-subtle-foreground/20 bg-info-subtle text-info-subtle-foreground",
|
|
40
40
|
},
|
|
41
41
|
},
|
|
42
42
|
defaultVariants: {
|
|
@@ -86,7 +86,7 @@ const ToastClose = React.forwardRef<
|
|
|
86
86
|
<ToastPrimitives.Close
|
|
87
87
|
ref={ref}
|
|
88
88
|
className={cn(
|
|
89
|
-
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-
|
|
89
|
+
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-destructive-foreground/70 group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive-foreground/40 group-[.destructive]:focus:ring-offset-destructive",
|
|
90
90
|
className
|
|
91
91
|
)}
|
|
92
92
|
toast-close=""
|
|
@@ -27,7 +27,10 @@ import { toggleVariants } from "./toggle"
|
|
|
27
27
|
const ToggleGroupContext = React.createContext<
|
|
28
28
|
VariantProps<typeof toggleVariants>
|
|
29
29
|
>({
|
|
30
|
-
|
|
30
|
+
// #319: kanonik skalada `default` bir basamak ADI değil; `toggleVariants` artık `md`
|
|
31
|
+
// kullanıyor (aynı CSS: h-10 px-3). Context varsayılanı da ona hizalandı — aksi hâlde
|
|
32
|
+
// context, deprecated alias'ı item'lara yayardı.
|
|
33
|
+
size: "md",
|
|
31
34
|
variant: "default",
|
|
32
35
|
})
|
|
33
36
|
|
|
@@ -16,14 +16,16 @@ const toggleVariants = cva(
|
|
|
16
16
|
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
19
|
-
|
|
19
|
+
md: "h-10 px-3",
|
|
20
20
|
sm: "h-9 px-2.5",
|
|
21
21
|
lg: "h-11 px-5",
|
|
22
|
+
/** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
|
|
23
|
+
default: "h-10 px-3",
|
|
22
24
|
},
|
|
23
25
|
},
|
|
24
26
|
defaultVariants: {
|
|
25
27
|
variant: "default",
|
|
26
|
-
size: "
|
|
28
|
+
size: "md",
|
|
27
29
|
},
|
|
28
30
|
}
|
|
29
31
|
)
|
|
@@ -15,10 +15,10 @@ const tooltipVariants = cva(
|
|
|
15
15
|
variant: {
|
|
16
16
|
default: "bg-primary text-primary-foreground",
|
|
17
17
|
secondary: "bg-secondary text-secondary-foreground",
|
|
18
|
-
success: "bg-
|
|
19
|
-
warning: "bg-
|
|
18
|
+
success: "bg-success text-success-foreground border-success",
|
|
19
|
+
warning: "bg-warning text-warning-foreground border-warning",
|
|
20
20
|
destructive: "bg-destructive text-destructive-foreground",
|
|
21
|
-
info: "bg-
|
|
21
|
+
info: "bg-info text-info-foreground border-info",
|
|
22
22
|
},
|
|
23
23
|
size: {
|
|
24
24
|
sm: "px-2 py-1 text-xs",
|
package/src/styles/tokens.css
CHANGED
|
@@ -146,7 +146,11 @@
|
|
|
146
146
|
--muted-foreground: 215.4 16.3% 45%;
|
|
147
147
|
--accent: 217.2 32.6% 94%;
|
|
148
148
|
--accent-foreground: 217.2 91.2% 51%;
|
|
149
|
-
|
|
149
|
+
/* #327: 60.2% idi. HİÇBİR kullanımda AA'yı geçmiyordu — beyaz zeminde metin 3.76,
|
|
150
|
+
kendi foreground'uyla düz dolgu 3.59. 48%, her İKİ testi de geçen en açık değer
|
|
151
|
+
(4.86 / 4.64), yani marka rengine en yakın kalan seçenek. Koyu tema (0 63% 31%)
|
|
152
|
+
zaten 9.44 → dokunulmadı. #284'ün --primary onarımıyla aynı desen. */
|
|
153
|
+
--destructive: 0 84.2% 48%;
|
|
150
154
|
--destructive-foreground: 210 40% 98%;
|
|
151
155
|
--border: 214.3 31.8% 91.4%;
|
|
152
156
|
/* #284: form kontrolü kenarlığı beyaz zeminde 1.23 idi (WCAG 1.4.11 eşiği 3.0,
|
|
@@ -167,11 +171,34 @@
|
|
|
167
171
|
--warning-foreground: 24 10% 10%;
|
|
168
172
|
--error: 0 84% 60%;
|
|
169
173
|
--error-foreground: 210 40% 98%;
|
|
170
|
-
|
|
174
|
+
/* #313/#314/#323 dönüşümü sırasında çıktı: `--info` düz dolgu olarak kendi
|
|
175
|
+
foreground'uyla 3.47 veriyordu — `--destructive`in (#327) birebir aynı kusuru.
|
|
176
|
+
Kullanıcının #327'de seçtiği ilke burada da uygulandı: her iki testi geçen EN AÇIK
|
|
177
|
+
değer. 50% → düz 4.83, metin/beyaz 5.05. */
|
|
178
|
+
--info: 217 91% 50%;
|
|
171
179
|
--info-foreground: 210 40% 98%;
|
|
172
180
|
--caution: 38 92% 50%;
|
|
173
181
|
--caution-foreground: 24 10% 10%;
|
|
174
182
|
|
|
183
|
+
/* ---------------------------------------------------------------------------
|
|
184
|
+
#313 / #314 / #323 — YUMUŞAK-TON (subtle) semantik yüzeyler
|
|
185
|
+
---------------------------------------------------------------------------
|
|
186
|
+
`--destructive` gibi DÜZ token'lar "dolu zemin + açık metin" içindir. Menü
|
|
187
|
+
item'ı, toast, rozet gibi yerlerde ise yumuşak bir tint + koyu metin gerekir.
|
|
188
|
+
Böyle bir token OLMADIĞI için 25 dosya ham Tailwind paletine (`bg-red-100
|
|
189
|
+
text-red-900`) düşmüştü → marka/tema özelleştirmesi bu varyantlara İŞLEMİYORDU.
|
|
190
|
+
|
|
191
|
+
Değerler bugünkü ham palet çiftlerinin birebir HSL karşılığıdır; yani dönüşüm
|
|
192
|
+
kontrastı DÜŞÜRMEZ (ölçüldü: 8.20 / 8.70 / 8.83 / 9.52 — hepsi korunur). */
|
|
193
|
+
--destructive-subtle: 0 93% 94%;
|
|
194
|
+
--destructive-subtle-foreground: 0 63% 31%; /* 8.20:1 */
|
|
195
|
+
--success-subtle: 138 77% 97%;
|
|
196
|
+
--success-subtle-foreground: 144 61% 20%; /* 8.70:1 */
|
|
197
|
+
--warning-subtle: 33 100% 97%;
|
|
198
|
+
--warning-subtle-foreground: 15 75% 28%; /* 8.83:1 */
|
|
199
|
+
--info-subtle: 214 100% 97%;
|
|
200
|
+
--info-subtle-foreground: 224 64% 33%; /* 9.52:1 */
|
|
201
|
+
|
|
175
202
|
--primary-50: 240 249 255;
|
|
176
203
|
|
|
177
204
|
/* Tailwind preset'i rounded-lg/md/sm'yi var(--radius)'a bagliyor.
|
|
@@ -433,6 +460,20 @@
|
|
|
433
460
|
metin olarak okunmuyordu (3.30) — burada 36% korunur (4.86). */
|
|
434
461
|
--success: 142 76% 36%;
|
|
435
462
|
--destructive-foreground: 210 40% 98%;
|
|
463
|
+
|
|
464
|
+
/* #313/#314/#323 — koyu tema subtle yüzeyleri.
|
|
465
|
+
Bunlar bugünkü `dark:bg-red-900/20` kompozisyonunun ARİTMETİK karşılığı DEĞİL:
|
|
466
|
+
çok koyu lacivert zemine %20 tint bindirince hue zemine kayıyor ve ortaya
|
|
467
|
+
semantik olmayan bir renk çıkıyor (destructive için 312° = macenta). Bunun
|
|
468
|
+
yerine semantik hue KORUNARAK kasıtlı koyu tint'ler seçildi; kontrast ölçüldü. */
|
|
469
|
+
--destructive-subtle: 0 63% 12%;
|
|
470
|
+
--destructive-subtle-foreground: 0 91% 71%; /* 6.43:1 */
|
|
471
|
+
--success-subtle: 142 70% 10%;
|
|
472
|
+
--success-subtle-foreground: 141 84% 93%; /* 14.02:1 */
|
|
473
|
+
--warning-subtle: 25 80% 11%;
|
|
474
|
+
--warning-subtle-foreground: 34 100% 92%; /* 14.43:1 */
|
|
475
|
+
--info-subtle: 217 80% 13%;
|
|
476
|
+
--info-subtle-foreground: 214 95% 93%; /* 14.11:1 */
|
|
436
477
|
--border: 216 34% 17%;
|
|
437
478
|
/* #284: koyu temada form kontrolü kenarlığı 1.36 idi -> 40% ile ~3.1.
|
|
438
479
|
Not: --input switch.tsx:27'de kapalı track ZEMİNİ olarak da kullanılıyor;
|
package/tailwind-preset.js
CHANGED
|
@@ -92,15 +92,23 @@ module.exports = {
|
|
|
92
92
|
destructive: {
|
|
93
93
|
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
|
94
94
|
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
|
|
95
|
+
// #313/#314/#323: yumuşak-ton yüzey — `bg-destructive-subtle` +
|
|
96
|
+
// `text-destructive-subtle-foreground` olarak kullanılır.
|
|
97
|
+
subtle: "hsl(var(--destructive-subtle) / <alpha-value>)",
|
|
98
|
+
"subtle-foreground": "hsl(var(--destructive-subtle-foreground) / <alpha-value>)",
|
|
95
99
|
},
|
|
96
100
|
error: "hsl(var(--error) / <alpha-value>)",
|
|
97
101
|
success: {
|
|
98
102
|
DEFAULT: "hsl(var(--success) / <alpha-value>)",
|
|
99
103
|
foreground: "hsl(var(--success-foreground) / <alpha-value>)",
|
|
104
|
+
subtle: "hsl(var(--success-subtle) / <alpha-value>)",
|
|
105
|
+
"subtle-foreground": "hsl(var(--success-subtle-foreground) / <alpha-value>)",
|
|
100
106
|
},
|
|
101
107
|
warning: {
|
|
102
108
|
DEFAULT: "hsl(var(--warning) / <alpha-value>)",
|
|
103
109
|
foreground: "hsl(var(--warning-foreground) / <alpha-value>)",
|
|
110
|
+
subtle: "hsl(var(--warning-subtle) / <alpha-value>)",
|
|
111
|
+
"subtle-foreground": "hsl(var(--warning-subtle-foreground) / <alpha-value>)",
|
|
104
112
|
},
|
|
105
113
|
caution: {
|
|
106
114
|
DEFAULT: "hsl(var(--caution) / <alpha-value>)",
|
|
@@ -109,6 +117,8 @@ module.exports = {
|
|
|
109
117
|
info: {
|
|
110
118
|
DEFAULT: "hsl(var(--info) / <alpha-value>)",
|
|
111
119
|
foreground: "hsl(var(--info-foreground) / <alpha-value>)",
|
|
120
|
+
subtle: "hsl(var(--info-subtle) / <alpha-value>)",
|
|
121
|
+
"subtle-foreground": "hsl(var(--info-subtle-foreground) / <alpha-value>)",
|
|
112
122
|
},
|
|
113
123
|
card: {
|
|
114
124
|
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
|
@@ -168,13 +178,13 @@ module.exports = {
|
|
|
168
178
|
"gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
|
|
169
179
|
"gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
|
|
170
180
|
},
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
181
|
+
/* #313/#314/#323: `borderColor` extend'i KALDIRILDI.
|
|
182
|
+
Buradaki DÜZ string değerler, `theme.colors` altındaki İÇ İÇE nesneleri
|
|
183
|
+
`border-*` ailesi için EZİYORDU — o beş isimde yalnız DEFAULT hayatta kalıyor,
|
|
184
|
+
`border-success-subtle-foreground` gibi alt anahtarlar hiç CSS ÜRETMİYORDU.
|
|
185
|
+
(Deterministik Tailwind CLI probe'uyla doğrulandı: destructive bu listede
|
|
186
|
+
olmadığı için çalışıyor, diğer üçü çalışmıyordu.)
|
|
187
|
+
`border-*` sınıfları `theme.colors`tan zaten türer; blok gereksizdi. */
|
|
178
188
|
},
|
|
179
189
|
},
|
|
180
190
|
plugins: [],
|
package/src/use-toast.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
// Toast hook - şimdilik basit bir implementasyon
|
|
2
|
-
// Gerçek implementasyonda Toaster component'i ile entegre olacak
|
|
3
|
-
|
|
4
|
-
interface ToastOptions {
|
|
5
|
-
title: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
variant?: 'default' | 'destructive';
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export function toast(options: ToastOptions) {
|
|
11
|
-
// Şimdilik console'a yazdıralım
|
|
12
|
-
// Gerçek implementasyonda toast notification gösterilecek
|
|
13
|
-
console.log('Toast:', options);
|
|
14
|
-
|
|
15
|
-
// Browser'da alert gösterelim (geçici çözüm)
|
|
16
|
-
if (typeof window !== 'undefined') {
|
|
17
|
-
const message = options.description
|
|
18
|
-
? `${options.title}\n\n${options.description}`
|
|
19
|
-
: options.title;
|
|
20
|
-
|
|
21
|
-
// Variant'a göre stil belirle
|
|
22
|
-
if (options.variant === 'destructive') {
|
|
23
|
-
console.error(message);
|
|
24
|
-
} else {
|
|
25
|
-
console.log(message);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export const useToast = () => {
|
|
31
|
-
return { toast };
|
|
32
|
-
};
|