@r2digisolutions/components 0.17.5 → 0.17.6
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.
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
export type SelectCardLayout = 'media' | 'row';
|
|
7
7
|
export type SelectCardCheck = 'box' | 'badge' | 'none';
|
|
8
|
+
export type SelectCardTone = 'brand' | 'success' | 'error' | 'warning' | 'info';
|
|
8
9
|
|
|
9
10
|
interface SelectCardProps {
|
|
10
11
|
title?: string;
|
|
@@ -18,6 +19,8 @@
|
|
|
18
19
|
layout?: SelectCardLayout;
|
|
19
20
|
/** box = SelectionBox · badge = check pill · none = border only */
|
|
20
21
|
check?: SelectCardCheck;
|
|
22
|
+
/** Accent when selected (default brand) */
|
|
23
|
+
tone?: SelectCardTone;
|
|
21
24
|
class?: string;
|
|
22
25
|
leading?: Snippet;
|
|
23
26
|
children?: Snippet;
|
|
@@ -36,6 +39,7 @@
|
|
|
36
39
|
disabled = false,
|
|
37
40
|
layout = 'media',
|
|
38
41
|
check = 'box',
|
|
42
|
+
tone = 'brand',
|
|
39
43
|
class: className = '',
|
|
40
44
|
leading,
|
|
41
45
|
children,
|
|
@@ -44,16 +48,51 @@
|
|
|
44
48
|
onchange
|
|
45
49
|
}: SelectCardProps = $props();
|
|
46
50
|
|
|
51
|
+
const selectedTone: Record<SelectCardTone, string> = {
|
|
52
|
+
brand: 'border-brand-500 bg-brand-50/50 ring-2 ring-brand-500/20 dark:bg-brand-950/30',
|
|
53
|
+
success:
|
|
54
|
+
'border-emerald-500 bg-emerald-50/70 ring-2 ring-emerald-500/20 dark:border-emerald-400 dark:bg-emerald-950/35',
|
|
55
|
+
error: 'border-red-500 bg-red-50/70 ring-2 ring-red-500/20 dark:border-red-400 dark:bg-red-950/35',
|
|
56
|
+
warning:
|
|
57
|
+
'border-amber-500 bg-amber-50/70 ring-2 ring-amber-500/20 dark:border-amber-400 dark:bg-amber-950/35',
|
|
58
|
+
info: 'border-sky-500 bg-sky-50/70 ring-2 ring-sky-500/20 dark:border-sky-400 dark:bg-sky-950/35'
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const hoverTone: Record<SelectCardTone, string> = {
|
|
62
|
+
brand: 'hover:border-brand-300 dark:hover:border-brand-700',
|
|
63
|
+
success: 'hover:border-emerald-300 dark:hover:border-emerald-700',
|
|
64
|
+
error: 'hover:border-red-300 dark:hover:border-red-700',
|
|
65
|
+
warning: 'hover:border-amber-300 dark:hover:border-amber-700',
|
|
66
|
+
info: 'hover:border-sky-300 dark:hover:border-sky-700'
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const badgeTone: Record<SelectCardTone, string> = {
|
|
70
|
+
brand: 'border-brand-500 bg-brand-500 text-white',
|
|
71
|
+
success: 'border-emerald-500 bg-emerald-500 text-white',
|
|
72
|
+
error: 'border-red-500 bg-red-500 text-white',
|
|
73
|
+
warning: 'border-amber-500 bg-amber-500 text-white',
|
|
74
|
+
info: 'border-sky-500 bg-sky-500 text-white'
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const focusTone: Record<SelectCardTone, string> = {
|
|
78
|
+
brand: 'focus-visible:ring-brand-500/30',
|
|
79
|
+
success: 'focus-visible:ring-emerald-500/30',
|
|
80
|
+
error: 'focus-visible:ring-red-500/30',
|
|
81
|
+
warning: 'focus-visible:ring-amber-500/30',
|
|
82
|
+
info: 'focus-visible:ring-sky-500/30'
|
|
83
|
+
};
|
|
84
|
+
|
|
47
85
|
const rootClass = $derived(
|
|
48
86
|
[
|
|
49
87
|
'group relative w-full text-left transition-all',
|
|
50
|
-
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
88
|
+
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
|
|
89
|
+
focusTone[tone],
|
|
51
90
|
disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
|
|
52
91
|
layout === 'media' && 'flex flex-col overflow-hidden rounded-xl border',
|
|
53
92
|
layout === 'row' && 'flex items-center gap-3 rounded-xl border p-3',
|
|
54
93
|
selected
|
|
55
|
-
?
|
|
56
|
-
: 'border-border bg-surface-elevated
|
|
94
|
+
? selectedTone[tone]
|
|
95
|
+
: ['border-border bg-surface-elevated', hoverTone[tone]].join(' '),
|
|
57
96
|
className
|
|
58
97
|
]
|
|
59
98
|
.filter(Boolean)
|
|
@@ -116,7 +155,7 @@
|
|
|
116
155
|
class={[
|
|
117
156
|
'flex h-6 w-6 items-center justify-center rounded-full border shadow-sm transition-colors',
|
|
118
157
|
selected
|
|
119
|
-
?
|
|
158
|
+
? badgeTone[tone]
|
|
120
159
|
: 'border-border bg-surface-elevated/90 text-transparent backdrop-blur-sm'
|
|
121
160
|
]}
|
|
122
161
|
aria-hidden="true"
|
|
@@ -168,9 +207,7 @@
|
|
|
168
207
|
<span
|
|
169
208
|
class={[
|
|
170
209
|
'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-colors',
|
|
171
|
-
selected
|
|
172
|
-
? 'border-brand-500 bg-brand-500 text-white'
|
|
173
|
-
: 'border-border-strong bg-surface text-transparent'
|
|
210
|
+
selected ? badgeTone[tone] : 'border-border-strong bg-surface text-transparent'
|
|
174
211
|
]}
|
|
175
212
|
aria-hidden="true"
|
|
176
213
|
>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
export type SelectCardLayout = 'media' | 'row';
|
|
3
3
|
export type SelectCardCheck = 'box' | 'badge' | 'none';
|
|
4
|
+
export type SelectCardTone = 'brand' | 'success' | 'error' | 'warning' | 'info';
|
|
4
5
|
interface SelectCardProps {
|
|
5
6
|
title?: string;
|
|
6
7
|
description?: string;
|
|
@@ -13,6 +14,8 @@ interface SelectCardProps {
|
|
|
13
14
|
layout?: SelectCardLayout;
|
|
14
15
|
/** box = SelectionBox · badge = check pill · none = border only */
|
|
15
16
|
check?: SelectCardCheck;
|
|
17
|
+
/** Accent when selected (default brand) */
|
|
18
|
+
tone?: SelectCardTone;
|
|
16
19
|
class?: string;
|
|
17
20
|
leading?: Snippet;
|
|
18
21
|
children?: Snippet;
|