@makolabs/ripple 0.0.1-dev.49 → 0.0.1-dev.50
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.
|
@@ -18,9 +18,20 @@
|
|
|
18
18
|
icon: Icon
|
|
19
19
|
}: AccordionProps = $props();
|
|
20
20
|
|
|
21
|
-
const {
|
|
21
|
+
const {
|
|
22
|
+
base,
|
|
23
|
+
header,
|
|
24
|
+
title: titleClass,
|
|
25
|
+
body
|
|
26
|
+
} = accordion({
|
|
27
|
+
color,
|
|
28
|
+
open,
|
|
29
|
+
bordered,
|
|
30
|
+
hasChildren: !!children
|
|
31
|
+
});
|
|
22
32
|
|
|
23
33
|
function handleClick() {
|
|
34
|
+
if (!children) return; // Don't toggle if no children
|
|
24
35
|
open = !open;
|
|
25
36
|
if (open && onexpand) {
|
|
26
37
|
onexpand();
|
|
@@ -38,6 +49,8 @@
|
|
|
38
49
|
aria-expanded={open}
|
|
39
50
|
aria-controls={id}
|
|
40
51
|
onclick={handleClick}
|
|
52
|
+
role={children ? 'button' : 'presentation'}
|
|
53
|
+
tabindex={children ? 0 : -1}
|
|
41
54
|
>
|
|
42
55
|
<div class="flex items-start justify-start gap-3">
|
|
43
56
|
{#if Icon}
|
|
@@ -55,6 +55,16 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
|
|
|
55
55
|
base: string;
|
|
56
56
|
};
|
|
57
57
|
};
|
|
58
|
+
hasChildren: {
|
|
59
|
+
true: {
|
|
60
|
+
base: string;
|
|
61
|
+
header: string;
|
|
62
|
+
};
|
|
63
|
+
false: {
|
|
64
|
+
base: string;
|
|
65
|
+
header: string;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
58
68
|
iconPosition: {
|
|
59
69
|
start: {};
|
|
60
70
|
end: {};
|
|
@@ -120,6 +130,16 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
|
|
|
120
130
|
base: string;
|
|
121
131
|
};
|
|
122
132
|
};
|
|
133
|
+
hasChildren: {
|
|
134
|
+
true: {
|
|
135
|
+
base: string;
|
|
136
|
+
header: string;
|
|
137
|
+
};
|
|
138
|
+
false: {
|
|
139
|
+
base: string;
|
|
140
|
+
header: string;
|
|
141
|
+
};
|
|
142
|
+
};
|
|
123
143
|
iconPosition: {
|
|
124
144
|
start: {};
|
|
125
145
|
end: {};
|
|
@@ -185,6 +205,16 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
|
|
|
185
205
|
base: string;
|
|
186
206
|
};
|
|
187
207
|
};
|
|
208
|
+
hasChildren: {
|
|
209
|
+
true: {
|
|
210
|
+
base: string;
|
|
211
|
+
header: string;
|
|
212
|
+
};
|
|
213
|
+
false: {
|
|
214
|
+
base: string;
|
|
215
|
+
header: string;
|
|
216
|
+
};
|
|
217
|
+
};
|
|
188
218
|
iconPosition: {
|
|
189
219
|
start: {};
|
|
190
220
|
end: {};
|
|
@@ -2,8 +2,8 @@ import { tv } from '../../helper/cls.js';
|
|
|
2
2
|
import { Color } from '../../variants.js';
|
|
3
3
|
export const accordion = tv({
|
|
4
4
|
slots: {
|
|
5
|
-
base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200
|
|
6
|
-
header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200
|
|
5
|
+
base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200 bg-white border border-default-200',
|
|
6
|
+
header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200',
|
|
7
7
|
title: 'flex text-default-900 text-lg font-medium leading-tight',
|
|
8
8
|
body: 'w-full border-t border-default-200 p-4 pt-3 transition-all',
|
|
9
9
|
},
|
|
@@ -11,37 +11,37 @@ export const accordion = tv({
|
|
|
11
11
|
color: {
|
|
12
12
|
[Color.DEFAULT]: {
|
|
13
13
|
base: 'bg-white hover:border-default-300',
|
|
14
|
-
header: '
|
|
14
|
+
header: '',
|
|
15
15
|
body: ''
|
|
16
16
|
},
|
|
17
17
|
[Color.PRIMARY]: {
|
|
18
18
|
base: 'bg-primary-50/50 hover:border-primary-300',
|
|
19
|
-
header: 'text-primary-700
|
|
19
|
+
header: 'text-primary-700',
|
|
20
20
|
title: 'text-primary-700'
|
|
21
21
|
},
|
|
22
22
|
[Color.SECONDARY]: {
|
|
23
23
|
base: 'bg-secondary-50/50 hover:border-secondary-300',
|
|
24
|
-
header: 'text-secondary-700
|
|
24
|
+
header: 'text-secondary-700',
|
|
25
25
|
title: 'text-secondary-700'
|
|
26
26
|
},
|
|
27
27
|
[Color.SUCCESS]: {
|
|
28
28
|
base: 'bg-success-50/50 hover:border-success-300',
|
|
29
|
-
header: 'text-success-700
|
|
29
|
+
header: 'text-success-700',
|
|
30
30
|
title: 'text-success-700'
|
|
31
31
|
},
|
|
32
32
|
[Color.WARNING]: {
|
|
33
33
|
base: 'bg-warning-50/50 hover:border-warning-300',
|
|
34
|
-
header: 'text-warning-700
|
|
34
|
+
header: 'text-warning-700',
|
|
35
35
|
title: 'text-warning-700'
|
|
36
36
|
},
|
|
37
37
|
[Color.DANGER]: {
|
|
38
38
|
base: 'bg-danger-50/50 hover:border-danger-300',
|
|
39
|
-
header: 'text-danger-700
|
|
39
|
+
header: 'text-danger-700',
|
|
40
40
|
title: 'text-danger-700'
|
|
41
41
|
},
|
|
42
42
|
[Color.INFO]: {
|
|
43
43
|
base: 'bg-info-50/50 hover:border-info-300',
|
|
44
|
-
header: 'text-info-700
|
|
44
|
+
header: 'text-info-700',
|
|
45
45
|
title: 'text-info-700'
|
|
46
46
|
}
|
|
47
47
|
},
|
|
@@ -63,6 +63,16 @@ export const accordion = tv({
|
|
|
63
63
|
base: 'shadow-sm'
|
|
64
64
|
}
|
|
65
65
|
},
|
|
66
|
+
hasChildren: {
|
|
67
|
+
true: {
|
|
68
|
+
base: 'hover:shadow-md',
|
|
69
|
+
header: 'hover:bg-default-50'
|
|
70
|
+
},
|
|
71
|
+
false: {
|
|
72
|
+
base: 'hover:shadow-sm',
|
|
73
|
+
header: ''
|
|
74
|
+
}
|
|
75
|
+
},
|
|
66
76
|
iconPosition: {
|
|
67
77
|
start: {},
|
|
68
78
|
end: {}
|
|
@@ -74,12 +84,55 @@ export const accordion = tv({
|
|
|
74
84
|
class: {
|
|
75
85
|
header: 'border-b-0'
|
|
76
86
|
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
hasChildren: true,
|
|
90
|
+
color: Color.PRIMARY,
|
|
91
|
+
class: {
|
|
92
|
+
header: 'hover:bg-primary-50'
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
hasChildren: true,
|
|
97
|
+
color: Color.SECONDARY,
|
|
98
|
+
class: {
|
|
99
|
+
header: 'hover:bg-secondary-50'
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
hasChildren: true,
|
|
104
|
+
color: Color.SUCCESS,
|
|
105
|
+
class: {
|
|
106
|
+
header: 'hover:bg-success-50'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
hasChildren: true,
|
|
111
|
+
color: Color.WARNING,
|
|
112
|
+
class: {
|
|
113
|
+
header: 'hover:bg-warning-50'
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
hasChildren: true,
|
|
118
|
+
color: Color.DANGER,
|
|
119
|
+
class: {
|
|
120
|
+
header: 'hover:bg-danger-50'
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
hasChildren: true,
|
|
125
|
+
color: Color.INFO,
|
|
126
|
+
class: {
|
|
127
|
+
header: 'hover:bg-info-50'
|
|
128
|
+
}
|
|
77
129
|
}
|
|
78
130
|
],
|
|
79
131
|
defaultVariants: {
|
|
80
132
|
color: Color.DEFAULT,
|
|
81
133
|
open: false,
|
|
82
134
|
bordered: true,
|
|
135
|
+
hasChildren: false,
|
|
83
136
|
iconPosition: 'start'
|
|
84
137
|
}
|
|
85
138
|
});
|