@una-ui/preset 0.18.0-beta.1 → 0.19.0-beta.1
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/README.md +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +2 -2
- package/dist/shortcuts.cjs +446 -446
- package/dist/shortcuts.mjs +446 -446
- package/package.json +1 -1
package/dist/shortcuts.cjs
CHANGED
|
@@ -2,67 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
const utils = require('@unocss/preset-mini/utils');
|
|
4
4
|
|
|
5
|
-
const staticLink = {
|
|
6
|
-
// base
|
|
7
|
-
link: ""
|
|
8
|
-
};
|
|
9
|
-
const dynamicLink = [
|
|
10
|
-
// dynamic preset
|
|
11
|
-
];
|
|
12
|
-
const link = [
|
|
13
|
-
...dynamicLink,
|
|
14
|
-
staticLink
|
|
15
|
-
];
|
|
16
|
-
|
|
17
|
-
const staticNavLinkGroup = {
|
|
18
|
-
// base
|
|
19
|
-
"nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
|
|
20
|
-
// panel
|
|
21
|
-
"nav-link-group-panel": "mt-1 px-2 space-y-1"
|
|
22
|
-
};
|
|
23
|
-
const dynamicNavLinkGroup = [];
|
|
24
|
-
const navLinkGroup = [
|
|
25
|
-
...dynamicNavLinkGroup,
|
|
26
|
-
staticNavLinkGroup
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
const staticNavLink = {
|
|
30
|
-
// config
|
|
31
|
-
"nav-link-default-variant": "nav-link-text-primary",
|
|
32
|
-
// base
|
|
33
|
-
"nav-link": "transition-base leading-6 justify-start gap-x-3 rounded-md",
|
|
34
|
-
// badge
|
|
35
|
-
"nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5",
|
|
36
|
-
// text-variant
|
|
37
|
-
"nav-link-text-gray": "hover:bg-$c-gray-100 hover:text-$c-gray-950",
|
|
38
|
-
"nav-link-active-text-gray": "bg-$c-gray-100 text-$c-gray-950",
|
|
39
|
-
"nav-link-inactive-text-gray": "text-$c-gray-950"
|
|
40
|
-
};
|
|
41
|
-
const dynamicNavLink = [
|
|
42
|
-
// text-variant
|
|
43
|
-
[/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-$c-gray-100 text-${c}-600 dark:text-${c}-500`],
|
|
44
|
-
[/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "gray"]) => `text-${c}-800 dark:text-${c}-100`],
|
|
45
|
-
[/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-text-${c}`],
|
|
46
|
-
// solid-variant
|
|
47
|
-
[/^nav-link-active-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-700 dark:bg-${c}-400 text-white dark:text-${c}-950`],
|
|
48
|
-
[/^nav-link-inactive-solid(-(\S+))?$/, ([, , c = "primary"]) => `text-white dark:text-${c}-950`],
|
|
49
|
-
[/^nav-link-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-solid-${c}`]
|
|
50
|
-
];
|
|
51
|
-
const navLink = [
|
|
52
|
-
...dynamicNavLink,
|
|
53
|
-
staticNavLink
|
|
54
|
-
];
|
|
55
|
-
|
|
56
|
-
const staticIcon = {
|
|
57
|
-
// base
|
|
58
|
-
"icon-base": "flex-none"
|
|
59
|
-
};
|
|
60
|
-
const dynamicIcon = [];
|
|
61
|
-
const icon = [
|
|
62
|
-
...dynamicIcon,
|
|
63
|
-
staticIcon
|
|
64
|
-
];
|
|
65
|
-
|
|
66
5
|
const staticAccordion = {
|
|
67
6
|
// config
|
|
68
7
|
"accordion-trailing-icon": "i-heroicons-chevron-up",
|
|
@@ -91,6 +30,133 @@ const accordion = [
|
|
|
91
30
|
staticAccordion
|
|
92
31
|
];
|
|
93
32
|
|
|
33
|
+
const staticAlert = {
|
|
34
|
+
// config
|
|
35
|
+
"alert-default-variant": "alert-outline",
|
|
36
|
+
"alert-info-icon": "i-info",
|
|
37
|
+
"alert-error-icon": "i-error",
|
|
38
|
+
"alert-success-icon": "i-success",
|
|
39
|
+
"alert-warning-icon": "i-warning",
|
|
40
|
+
"alert-close-icon": "i-close",
|
|
41
|
+
// base
|
|
42
|
+
"alert": "p-1em",
|
|
43
|
+
"alert-title": "text-0.875em font-medium text-brand",
|
|
44
|
+
"alert-description": "text-0.875em leading-1.625em text-brand/90",
|
|
45
|
+
"alert-icon-base": "h-1.25em w-1.25em",
|
|
46
|
+
"alert-close": "p-0.5em rounded-md hover:bg-brand/10 active:bg-brand/20 transition-colors duration-200",
|
|
47
|
+
"alert-close-icon-base": "h-1.2em w-1.2em",
|
|
48
|
+
// wrappers
|
|
49
|
+
"alert-inner-wrapper": "gap-0.75em flex",
|
|
50
|
+
"alert-content-wrapper": "flex flex-col w-full space-y-0.5em",
|
|
51
|
+
"alert-icon-wrapper": "-mt-0.2em",
|
|
52
|
+
"alert-close-wrapper": "ml-auto pl-0.2em",
|
|
53
|
+
"alert-close-inner-wrapper": "-mx-1.1 -my-1.1"
|
|
54
|
+
};
|
|
55
|
+
const dynamicAlert = [
|
|
56
|
+
// variants
|
|
57
|
+
[/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md bg-${c}-50 text-${c}-400 dark:text-${c}-300 dark:bg-${c}-950 n-${c}-800 dark:n-${c}-100`],
|
|
58
|
+
[/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md border border-${c}-600 dark:border-${c}-500 text-brand n-${c}-600 dark:n-${c}-500`],
|
|
59
|
+
[/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `border-l-4 border-${c}-400 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-400 dark:text-${c}-300 n-${c}-800 dark:n-${c}-100`]
|
|
60
|
+
];
|
|
61
|
+
const alert = [
|
|
62
|
+
...dynamicAlert,
|
|
63
|
+
staticAlert
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const staticAvatar = {
|
|
67
|
+
// config
|
|
68
|
+
"avatar-default-variant": "avatar-solid",
|
|
69
|
+
"avatar-fallback-icon": "i-heroicons-user-20-solid",
|
|
70
|
+
// base
|
|
71
|
+
"avatar": "relative font-medium leading-none h-2.5em w-2.5em inline-flex items-center justify-center rounded-full overflow-hidden",
|
|
72
|
+
"avatar-label": "",
|
|
73
|
+
"avatar-fallback": "",
|
|
74
|
+
"avatar-fallback-icon-base": "text-1.5em",
|
|
75
|
+
"avatar-src": "w-full h-full",
|
|
76
|
+
"avatar-icon-base": "text-1.2em",
|
|
77
|
+
// variants
|
|
78
|
+
"avatar-solid-white": "bg-base text-base ring-1 ring-base",
|
|
79
|
+
"avatar-solid-black": "bg-inverted text-inverted"
|
|
80
|
+
};
|
|
81
|
+
const dynamicAvatar = [
|
|
82
|
+
// variants
|
|
83
|
+
[/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
|
|
84
|
+
[/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
|
|
85
|
+
[/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 ring-1 ring-${c}-500 dark:ring-${c}-400`]
|
|
86
|
+
];
|
|
87
|
+
const avatar = [
|
|
88
|
+
...dynamicAvatar,
|
|
89
|
+
staticAvatar
|
|
90
|
+
];
|
|
91
|
+
|
|
92
|
+
const staticAvatarGroup = {
|
|
93
|
+
"avatar-group": "flex flex-row-reverse justify-end",
|
|
94
|
+
"avatar-group-child": "ring-2 ring-$c-background",
|
|
95
|
+
"avatar-group-margin": "-me-1.5 first:me-0",
|
|
96
|
+
"avatar-group-label": "text-.9em"
|
|
97
|
+
};
|
|
98
|
+
const dynamicAvatarGroup = [];
|
|
99
|
+
const avatarGroup = [
|
|
100
|
+
...dynamicAvatarGroup,
|
|
101
|
+
staticAvatarGroup
|
|
102
|
+
];
|
|
103
|
+
|
|
104
|
+
const staticBadge = {
|
|
105
|
+
// config
|
|
106
|
+
"badge-default-variant": "badge-soft",
|
|
107
|
+
"badge-close-icon": "i-close",
|
|
108
|
+
// base
|
|
109
|
+
"badge": "text-xs leading-tight py-0.3333333333333333em px-0.6666666666666666em gap-x-0.25em inline-flex items-center rounded-md font-medium text-brand",
|
|
110
|
+
"badge-icon-base": "text-1em",
|
|
111
|
+
"badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20",
|
|
112
|
+
"badge-close-icon-base": "text-brand/75 group-hover:text-brand/90",
|
|
113
|
+
// variants
|
|
114
|
+
"badge-soft-gray": "bg-muted text-muted n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
|
|
115
|
+
"badge-solid-black": "bg-inverted text-inverted n-gray-300 dark:n-gray-600",
|
|
116
|
+
"badge-outline-white": "bg-base text-base ring-1 ring-base n-gray-600 dark:n-gray-300"
|
|
117
|
+
};
|
|
118
|
+
const dynamicBadge = [
|
|
119
|
+
// variants
|
|
120
|
+
[/^badge-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-100 dark:bg-${c}-800 n-${c}-700 dark:n-${c}-200`],
|
|
121
|
+
[/^badge-soft(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-50 n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:bg-${c}-400/10 dark:ring-${c}-400/30`],
|
|
122
|
+
[/^badge-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:ring-${c}-400/30`]
|
|
123
|
+
];
|
|
124
|
+
const badge = [
|
|
125
|
+
...dynamicBadge,
|
|
126
|
+
staticBadge
|
|
127
|
+
];
|
|
128
|
+
|
|
129
|
+
const staticBreadcrumb = {
|
|
130
|
+
// config
|
|
131
|
+
"breadcrumb": "",
|
|
132
|
+
"breadcrumb-active": "breadcrumb-active-text-primary",
|
|
133
|
+
"breadcrumb-inactive": "breadcrumb-inactive-text-muted",
|
|
134
|
+
"breadcrumb-separator-icon": "i-radix-icons-chevron-right",
|
|
135
|
+
"breadcrumb-elipsis-icon": "i-radix-icons-dots-horizontal",
|
|
136
|
+
// components
|
|
137
|
+
"breadcrumb-root": "",
|
|
138
|
+
"breadcrumb-list": "flex flex-wrap items-center break-words text-muted gap-0.5",
|
|
139
|
+
"breadcrumb-link": "transition-colors font-normal btn-square",
|
|
140
|
+
"breadcrumb-item": "inline-flex items-center",
|
|
141
|
+
// TODO
|
|
142
|
+
"breadcrumb-ellipsis": "flex h-9 w-9 items-center justify-center"
|
|
143
|
+
};
|
|
144
|
+
const dynamicBreadcrumb = [
|
|
145
|
+
// states
|
|
146
|
+
[
|
|
147
|
+
/^breadcrumb-active-([^-]+)-([^-]+)$/,
|
|
148
|
+
([, variant = "text", color = "primary"]) => `data-[state=active]:btn-${variant}-${color}`
|
|
149
|
+
],
|
|
150
|
+
[
|
|
151
|
+
/^breadcrumb-inactive-([^-]+)-([^-]+)$/,
|
|
152
|
+
([, variant = "text", color = "muted"]) => `data-[state=inactive]:btn-${variant}-${color}`
|
|
153
|
+
]
|
|
154
|
+
];
|
|
155
|
+
const breadcrumb = [
|
|
156
|
+
...dynamicBreadcrumb,
|
|
157
|
+
staticBreadcrumb
|
|
158
|
+
];
|
|
159
|
+
|
|
94
160
|
const staticBtn = {
|
|
95
161
|
// config
|
|
96
162
|
"btn-default-variant": "btn-solid",
|
|
@@ -140,69 +206,119 @@ const btn = [
|
|
|
140
206
|
staticBtn
|
|
141
207
|
];
|
|
142
208
|
|
|
143
|
-
const
|
|
209
|
+
const staticCard = {
|
|
144
210
|
// base
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
|
|
148
|
-
"
|
|
149
|
-
|
|
150
|
-
"
|
|
151
|
-
"
|
|
152
|
-
"
|
|
153
|
-
"
|
|
154
|
-
//
|
|
155
|
-
"
|
|
156
|
-
"
|
|
157
|
-
"form-group-label-required": "after:content-['*'] after:ms-0.5 after:text-error",
|
|
158
|
-
// counter
|
|
159
|
-
"form-group-counter-wrapper": "text-sm",
|
|
160
|
-
"form-group-counter-error": "text-error",
|
|
161
|
-
"form-group-counter-current": "text-$c-gray-900",
|
|
162
|
-
"form-group-counter-separator": "text-$c-gray-500",
|
|
163
|
-
"form-group-counter-max": "text-$c-gray-500"
|
|
211
|
+
"card": "relative flex flex-col rounded-lg overflow-hidden shadow-sm",
|
|
212
|
+
"card-default-variant": "card-outline-gray",
|
|
213
|
+
// components
|
|
214
|
+
"card-header": "",
|
|
215
|
+
"card-title": "text-2xl font-semibold leading-none tracking-tight",
|
|
216
|
+
"card-description": "text-sm text-muted",
|
|
217
|
+
"card-content": "px-4 py-5 pt-0 sm:p-6 sm:pt-0",
|
|
218
|
+
"card-footer": "flex items-center p-6 pt-0",
|
|
219
|
+
"card-about": "flex flex-col gap-y-1.5 px-4 py-5 sm:p-6",
|
|
220
|
+
// static variants
|
|
221
|
+
"card-soft-gray": "bg-muted border border-base",
|
|
222
|
+
"card-outline-gray": "bg-base border border-base"
|
|
164
223
|
};
|
|
165
|
-
const
|
|
166
|
-
|
|
224
|
+
const dynamicCard = [
|
|
225
|
+
// dynamic variants
|
|
226
|
+
[/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
|
|
227
|
+
[/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
|
|
228
|
+
];
|
|
229
|
+
const card = [
|
|
230
|
+
...dynamicCard,
|
|
231
|
+
staticCard
|
|
167
232
|
];
|
|
168
233
|
|
|
169
|
-
const
|
|
170
|
-
// config
|
|
171
|
-
"input-default-variant": "input-outline",
|
|
172
|
-
"input-loading-icon": "i-loading",
|
|
173
|
-
"input-info-icon": "i-info",
|
|
174
|
-
"input-error-icon": "i-error",
|
|
175
|
-
"input-success-icon": "i-success",
|
|
176
|
-
"input-warning-icon": "i-warning",
|
|
177
|
-
"input-leading-padding": "pl-2.9em",
|
|
178
|
-
"input-trailing-padding": "pr-2.9em",
|
|
234
|
+
const staticCheckbox = {
|
|
179
235
|
// base
|
|
180
|
-
"
|
|
181
|
-
"
|
|
182
|
-
"
|
|
183
|
-
"input-status-icon-base": "text-1.042em",
|
|
184
|
-
"input-leading": "text-1.042em",
|
|
185
|
-
"input-trailing": "text-1.042em",
|
|
186
|
-
"input-loading": "animate-spin text-1.042em",
|
|
236
|
+
"checkbox": "checkbox-primary text-md w-1em h-1em shrink-0 rounded-sm ring-offset-base focus-visible:outline-none disabled:n-disabled border border-brand bg-brand text-inverted focus-visible:(ring-2 ring-brand ring-offset-2) data-[state=unchecked]:(bg-base text-base)",
|
|
237
|
+
"checkbox-label": "block",
|
|
238
|
+
"checkbox-reverse": "flex-row-reverse",
|
|
187
239
|
// wrappers
|
|
188
|
-
"
|
|
189
|
-
|
|
190
|
-
"
|
|
191
|
-
|
|
192
|
-
"
|
|
193
|
-
"
|
|
240
|
+
"checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
|
|
241
|
+
// icon
|
|
242
|
+
"checkbox-indicator": "flex items-center justify-center h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
|
|
243
|
+
"checkbox-icon-base": "w-1em h-1em",
|
|
244
|
+
"checkbox-checked-icon": "i-check",
|
|
245
|
+
"checkbox-unchecked-icon": "",
|
|
246
|
+
"checkbox-indeterminate-icon": "i-lucide-minus"
|
|
194
247
|
};
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
[/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => ` ring-1 input-focus-${c} ring-${c}-500 dark:ring-${c}-400`]
|
|
248
|
+
const dynamicCheckbox = [
|
|
249
|
+
[/^checkbox-(.*)$/, ([, body], { theme }) => {
|
|
250
|
+
const color = utils.parseColor(body, theme);
|
|
251
|
+
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
252
|
+
return `n-${body}-600 dark:n-${body}-500`;
|
|
253
|
+
}]
|
|
202
254
|
];
|
|
203
|
-
const
|
|
204
|
-
...
|
|
205
|
-
|
|
255
|
+
const checkbox = [
|
|
256
|
+
...dynamicCheckbox,
|
|
257
|
+
staticCheckbox
|
|
258
|
+
];
|
|
259
|
+
|
|
260
|
+
const staticDropdownMenu = {
|
|
261
|
+
// configurations
|
|
262
|
+
"dropdown-menu": "",
|
|
263
|
+
"dropdown-menu-default-variant": "btn-solid-white",
|
|
264
|
+
// dropdown-menu-trigger
|
|
265
|
+
"dropdown-menu-trigger": "",
|
|
266
|
+
"dropdown-menu-trigger-leading": "",
|
|
267
|
+
"dropdown-menu-trigger-trailing": "ml-auto",
|
|
268
|
+
// dropdown-menu-content
|
|
269
|
+
"dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
270
|
+
// dropdown-menu-item
|
|
271
|
+
"dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0",
|
|
272
|
+
"dropdown-menu-item-leading": "opacity-75 text-1.1em",
|
|
273
|
+
"dropdown-menu-item-trailing": "ml-auto opacity-75 text-1.1em",
|
|
274
|
+
// dropdown-menu-label
|
|
275
|
+
"dropdown-menu-label": "px-2 py-1.5 text-1em font-semibold",
|
|
276
|
+
// dropdown-menu-separator
|
|
277
|
+
"dropdown-menu-separator-root": "relative -mx-1",
|
|
278
|
+
"dropdown-menu-separator": "",
|
|
279
|
+
// dropdown-menu-shortcut
|
|
280
|
+
"dropdown-menu-shortcut": "pl-10 ml-auto text-0.875em tracking-widest n-disabled space-x-0.5",
|
|
281
|
+
// dropdown-menu-group
|
|
282
|
+
"dropdown-menu-group": "",
|
|
283
|
+
// dropdown-menu-sub
|
|
284
|
+
"dropdown-menu-sub-trigger": "transition-color focus-visible:outline-0",
|
|
285
|
+
"dropdown-menu-sub-trigger-leading": "opacity-75 text-1.1em",
|
|
286
|
+
"dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1.1em",
|
|
287
|
+
"dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
288
|
+
};
|
|
289
|
+
const dynamicDropdownMenu = [
|
|
290
|
+
[/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
|
|
291
|
+
[/^dropdown-menu-item(?:-(\S+))?$/, ([, c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100 data-[state=open]:bg-${c}-100 dark:data-[state=open]:bg-${c}-800`]
|
|
292
|
+
];
|
|
293
|
+
const dropdowMenu = [
|
|
294
|
+
...dynamicDropdownMenu,
|
|
295
|
+
staticDropdownMenu
|
|
296
|
+
];
|
|
297
|
+
|
|
298
|
+
const staticFormGroup = {
|
|
299
|
+
// base
|
|
300
|
+
"form-group": "space-y-2 flex flex-col",
|
|
301
|
+
"form-group-description": "text-sm leading-6 text-$c-gray-500",
|
|
302
|
+
"form-group-hint": "text-sm leading-6 text-$c-gray-500",
|
|
303
|
+
"form-group-message": "text-sm transition-all duration-1000 ease-in-out",
|
|
304
|
+
// wrappers
|
|
305
|
+
"form-group-top-wrapper": "flex flex-col",
|
|
306
|
+
"form-group-top-wrapper-inner": "flex justify-between items-end space-x-1.5",
|
|
307
|
+
"form-group-bottom-wrapper": "flex space-x-1.5 justify-between items-start",
|
|
308
|
+
"form-group-message-wrapper": "",
|
|
309
|
+
// label
|
|
310
|
+
"form-group-label-wrapper": "flex",
|
|
311
|
+
"form-group-label": "block text-sm leading-6 font-medium text-$c-gray-900",
|
|
312
|
+
"form-group-label-required": "after:content-['*'] after:ms-0.5 after:text-error",
|
|
313
|
+
// counter
|
|
314
|
+
"form-group-counter-wrapper": "text-sm",
|
|
315
|
+
"form-group-counter-error": "text-error",
|
|
316
|
+
"form-group-counter-current": "text-$c-gray-900",
|
|
317
|
+
"form-group-counter-separator": "text-$c-gray-500",
|
|
318
|
+
"form-group-counter-max": "text-$c-gray-500"
|
|
319
|
+
};
|
|
320
|
+
const formGroup = [
|
|
321
|
+
staticFormGroup
|
|
206
322
|
];
|
|
207
323
|
|
|
208
324
|
const staticGeneral = {
|
|
@@ -260,139 +376,14 @@ const general = [
|
|
|
260
376
|
staticGeneral
|
|
261
377
|
];
|
|
262
378
|
|
|
263
|
-
const
|
|
264
|
-
// base
|
|
265
|
-
"switch": "switch-primary bg-transparent relative inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-full",
|
|
266
|
-
"switch-disabled": "n-disabled",
|
|
267
|
-
"switch-focus": "focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-base focus:ring-brand",
|
|
268
|
-
// inset
|
|
269
|
-
"switch-inset": "h-1.5em w-2.75em",
|
|
270
|
-
"switch-track-inset": "h-1.5em w-2.75em",
|
|
271
|
-
// outset
|
|
272
|
-
"switch-outset": "h-1.25em w-2.5em",
|
|
273
|
-
"switch-track-outset": "h-1em w-2.25em",
|
|
274
|
-
// thumb
|
|
275
|
-
"switch-thumb": "flex items-center justify-center h-1.25em w-1.25em absolute bg-base pointer-events-none inline-block transform rounded-full shadow transition-base",
|
|
276
|
-
"switch-thumb-on": "translate-x-1.25em",
|
|
277
|
-
"switch-thumb-off": "translate-x-0",
|
|
278
|
-
// track
|
|
279
|
-
"switch-track": "pointer-events-none absolute mx-auto rounded-full transition-base",
|
|
280
|
-
"switch-track-on": "bg-brand",
|
|
281
|
-
"switch-track-off": "bg-$c-gray-200",
|
|
282
|
-
// icon
|
|
283
|
-
"switch-icon-base": "text-0.8em",
|
|
284
|
-
"switch-icon-off": "text-muted",
|
|
285
|
-
"switch-icon-on": "text-muted",
|
|
286
|
-
// loading
|
|
287
|
-
"switch-loading-icon": "i-loading",
|
|
288
|
-
"switch-loading": "text-gray animate-spin text-0.8em"
|
|
289
|
-
};
|
|
290
|
-
const dynamicSwitch = [
|
|
291
|
-
[/^switch-(.*)$/, ([, body], { theme }) => {
|
|
292
|
-
const color = utils.parseColor(body, theme);
|
|
293
|
-
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
294
|
-
return `n-${body}-600 dark:n-${body}-500`;
|
|
295
|
-
}]
|
|
296
|
-
];
|
|
297
|
-
const _switch = [
|
|
298
|
-
...dynamicSwitch,
|
|
299
|
-
staticSwitch
|
|
300
|
-
];
|
|
301
|
-
|
|
302
|
-
const staticAlert = {
|
|
303
|
-
// config
|
|
304
|
-
"alert-default-variant": "alert-outline",
|
|
305
|
-
"alert-info-icon": "i-info",
|
|
306
|
-
"alert-error-icon": "i-error",
|
|
307
|
-
"alert-success-icon": "i-success",
|
|
308
|
-
"alert-warning-icon": "i-warning",
|
|
309
|
-
"alert-close-icon": "i-close",
|
|
310
|
-
// base
|
|
311
|
-
"alert": "p-1em",
|
|
312
|
-
"alert-title": "text-0.875em font-medium text-brand",
|
|
313
|
-
"alert-description": "text-0.875em leading-1.625em text-brand/90",
|
|
314
|
-
"alert-icon-base": "h-1.25em w-1.25em",
|
|
315
|
-
"alert-close": "p-0.5em rounded-md hover:bg-brand/10 active:bg-brand/20 transition-colors duration-200",
|
|
316
|
-
"alert-close-icon-base": "h-1.2em w-1.2em",
|
|
317
|
-
// wrappers
|
|
318
|
-
"alert-inner-wrapper": "gap-0.75em flex",
|
|
319
|
-
"alert-content-wrapper": "flex flex-col w-full space-y-0.5em",
|
|
320
|
-
"alert-icon-wrapper": "-mt-0.2em",
|
|
321
|
-
"alert-close-wrapper": "ml-auto pl-0.2em",
|
|
322
|
-
"alert-close-inner-wrapper": "-mx-1.1 -my-1.1"
|
|
323
|
-
};
|
|
324
|
-
const dynamicAlert = [
|
|
325
|
-
// variants
|
|
326
|
-
[/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md bg-${c}-50 text-${c}-400 dark:text-${c}-300 dark:bg-${c}-950 n-${c}-800 dark:n-${c}-100`],
|
|
327
|
-
[/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md border border-${c}-600 dark:border-${c}-500 text-brand n-${c}-600 dark:n-${c}-500`],
|
|
328
|
-
[/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `border-l-4 border-${c}-400 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-400 dark:text-${c}-300 n-${c}-800 dark:n-${c}-100`]
|
|
329
|
-
];
|
|
330
|
-
const alert = [
|
|
331
|
-
...dynamicAlert,
|
|
332
|
-
staticAlert
|
|
333
|
-
];
|
|
334
|
-
|
|
335
|
-
const staticBadge = {
|
|
336
|
-
// config
|
|
337
|
-
"badge-default-variant": "badge-soft",
|
|
338
|
-
"badge-close-icon": "i-close",
|
|
339
|
-
// base
|
|
340
|
-
"badge": "text-xs leading-tight py-0.3333333333333333em px-0.6666666666666666em gap-x-0.25em inline-flex items-center rounded-md font-medium text-brand",
|
|
341
|
-
"badge-icon-base": "text-1em",
|
|
342
|
-
"badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20",
|
|
343
|
-
"badge-close-icon-base": "text-brand/75 group-hover:text-brand/90",
|
|
344
|
-
// variants
|
|
345
|
-
"badge-soft-gray": "bg-muted text-muted n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
|
|
346
|
-
"badge-solid-black": "bg-inverted text-inverted n-gray-300 dark:n-gray-600",
|
|
347
|
-
"badge-outline-white": "bg-base text-base ring-1 ring-base n-gray-600 dark:n-gray-300"
|
|
348
|
-
};
|
|
349
|
-
const dynamicBadge = [
|
|
350
|
-
// variants
|
|
351
|
-
[/^badge-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-100 dark:bg-${c}-800 n-${c}-700 dark:n-${c}-200`],
|
|
352
|
-
[/^badge-soft(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-50 n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:bg-${c}-400/10 dark:ring-${c}-400/30`],
|
|
353
|
-
[/^badge-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent n-${c}-700 dark:n-${c}-400 ring-1 ring-${c}-700/10 dark:ring-${c}-400/30`]
|
|
354
|
-
];
|
|
355
|
-
const badge = [
|
|
356
|
-
...dynamicBadge,
|
|
357
|
-
staticBadge
|
|
358
|
-
];
|
|
359
|
-
|
|
360
|
-
const staticAvatar = {
|
|
361
|
-
// config
|
|
362
|
-
"avatar-default-variant": "avatar-solid",
|
|
363
|
-
"avatar-fallback-icon": "i-heroicons-user-20-solid",
|
|
379
|
+
const staticIcon = {
|
|
364
380
|
// base
|
|
365
|
-
"
|
|
366
|
-
"avatar-label": "",
|
|
367
|
-
"avatar-fallback": "",
|
|
368
|
-
"avatar-fallback-icon-base": "text-1.5em",
|
|
369
|
-
"avatar-src": "w-full h-full",
|
|
370
|
-
"avatar-icon-base": "text-1.2em",
|
|
371
|
-
// variants
|
|
372
|
-
"avatar-solid-white": "bg-base text-base ring-1 ring-base",
|
|
373
|
-
"avatar-solid-black": "bg-inverted text-inverted"
|
|
374
|
-
};
|
|
375
|
-
const dynamicAvatar = [
|
|
376
|
-
// variants
|
|
377
|
-
[/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
|
|
378
|
-
[/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
|
|
379
|
-
[/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 ring-1 ring-${c}-500 dark:ring-${c}-400`]
|
|
380
|
-
];
|
|
381
|
-
const avatar = [
|
|
382
|
-
...dynamicAvatar,
|
|
383
|
-
staticAvatar
|
|
384
|
-
];
|
|
385
|
-
|
|
386
|
-
const staticAvatarGroup = {
|
|
387
|
-
"avatar-group": "flex flex-row-reverse justify-end",
|
|
388
|
-
"avatar-group-child": "ring-2 ring-$c-background",
|
|
389
|
-
"avatar-group-margin": "-me-1.5 first:me-0",
|
|
390
|
-
"avatar-group-label": "text-.9em"
|
|
381
|
+
"icon-base": "flex-none"
|
|
391
382
|
};
|
|
392
|
-
const
|
|
393
|
-
const
|
|
394
|
-
...
|
|
395
|
-
|
|
383
|
+
const dynamicIcon = [];
|
|
384
|
+
const icon = [
|
|
385
|
+
...dynamicIcon,
|
|
386
|
+
staticIcon
|
|
396
387
|
];
|
|
397
388
|
|
|
398
389
|
const staticIndicator = {
|
|
@@ -420,6 +411,45 @@ const indicator = [
|
|
|
420
411
|
staticIndicator
|
|
421
412
|
];
|
|
422
413
|
|
|
414
|
+
const staticInput = {
|
|
415
|
+
// config
|
|
416
|
+
"input-default-variant": "input-outline",
|
|
417
|
+
"input-loading-icon": "i-loading",
|
|
418
|
+
"input-info-icon": "i-info",
|
|
419
|
+
"input-error-icon": "i-error",
|
|
420
|
+
"input-success-icon": "i-success",
|
|
421
|
+
"input-warning-icon": "i-warning",
|
|
422
|
+
"input-leading-padding": "pl-2.9em",
|
|
423
|
+
"input-trailing-padding": "pr-2.9em",
|
|
424
|
+
// base
|
|
425
|
+
"input": "text-0.875em leading-6 px-0.8571428571428571em py-0.42857142857142855em w-full input-disabled ring-base ring-inset placeholder:text-$c-gray-400 block outline-none rounded-md border-0 shadow-sm bg-transparent",
|
|
426
|
+
"input-disabled": "disabled:(n-disabled)",
|
|
427
|
+
"input-status-ring": "ring-opacity-50 dark:ring-opacity-40",
|
|
428
|
+
"input-status-icon-base": "text-1.042em",
|
|
429
|
+
"input-leading": "text-1.042em",
|
|
430
|
+
"input-trailing": "text-1.042em",
|
|
431
|
+
"input-loading": "animate-spin text-1.042em",
|
|
432
|
+
// wrappers
|
|
433
|
+
"input-wrapper": "relative flex items-center",
|
|
434
|
+
"input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-$c-gray-400",
|
|
435
|
+
"input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-$c-gray-400",
|
|
436
|
+
// variants
|
|
437
|
+
"input-outline-gray": "focus:ring-2 ring-1",
|
|
438
|
+
"input-outline-black": "ring-1 focus:ring-$c-foreground"
|
|
439
|
+
};
|
|
440
|
+
const dynamicInput = [
|
|
441
|
+
// config
|
|
442
|
+
[/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400`],
|
|
443
|
+
[/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-400/70 dark:placeholder-${c}-300/70`],
|
|
444
|
+
// variants
|
|
445
|
+
[/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `ring-1 input-focus-${c}`],
|
|
446
|
+
[/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => ` ring-1 input-focus-${c} ring-${c}-500 dark:ring-${c}-400`]
|
|
447
|
+
];
|
|
448
|
+
const input = [
|
|
449
|
+
...dynamicInput,
|
|
450
|
+
staticInput
|
|
451
|
+
];
|
|
452
|
+
|
|
423
453
|
const staticKbd = {
|
|
424
454
|
// config
|
|
425
455
|
"kbd-default-variant": "kbd-solid-gray",
|
|
@@ -438,83 +468,78 @@ const kbd = [
|
|
|
438
468
|
staticKbd
|
|
439
469
|
];
|
|
440
470
|
|
|
441
|
-
const
|
|
471
|
+
const staticLabel = {
|
|
442
472
|
// base
|
|
443
|
-
"
|
|
444
|
-
"radio-disabled": "n-disabled",
|
|
445
|
-
"radio-label": "block text-sm font-medium leading-6",
|
|
446
|
-
"radio-input": "absolute w-full opacity-0",
|
|
447
|
-
"radio-reverse": "flex-row-reverse",
|
|
448
|
-
"radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
|
|
449
|
-
// wrappers
|
|
450
|
-
"radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
|
|
451
|
-
// icon
|
|
452
|
-
"radio-icon-base": "m-auto opacity-0 text-inverted w-full h-full transition-base n-checked:opacity-100",
|
|
453
|
-
"radio-icon": "i-dot"
|
|
454
|
-
// refer to general.ts
|
|
473
|
+
"label-base": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:n-disabled"
|
|
455
474
|
};
|
|
456
|
-
const
|
|
457
|
-
|
|
458
|
-
const color = utils.parseColor(body, theme);
|
|
459
|
-
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
460
|
-
return `n-${body}-600 dark:n-${body}-500`;
|
|
461
|
-
}]
|
|
475
|
+
const dynamicLabel = [
|
|
476
|
+
// dynamic preset
|
|
462
477
|
];
|
|
463
|
-
const
|
|
464
|
-
...
|
|
465
|
-
|
|
478
|
+
const label = [
|
|
479
|
+
...dynamicLabel,
|
|
480
|
+
staticLabel
|
|
466
481
|
];
|
|
467
482
|
|
|
468
|
-
const
|
|
483
|
+
const staticLink = {
|
|
469
484
|
// base
|
|
470
|
-
|
|
471
|
-
"checkbox-label": "block",
|
|
472
|
-
"checkbox-reverse": "flex-row-reverse",
|
|
473
|
-
// wrappers
|
|
474
|
-
"checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
|
|
475
|
-
// icon
|
|
476
|
-
"checkbox-indicator": "flex items-center justify-center h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
|
|
477
|
-
"checkbox-icon-base": "w-1em h-1em",
|
|
478
|
-
"checkbox-checked-icon": "i-check",
|
|
479
|
-
"checkbox-unchecked-icon": "",
|
|
480
|
-
"checkbox-indeterminate-icon": "i-lucide-minus"
|
|
485
|
+
link: ""
|
|
481
486
|
};
|
|
482
|
-
const
|
|
483
|
-
|
|
484
|
-
const color = utils.parseColor(body, theme);
|
|
485
|
-
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
486
|
-
return `n-${body}-600 dark:n-${body}-500`;
|
|
487
|
-
}]
|
|
487
|
+
const dynamicLink = [
|
|
488
|
+
// dynamic preset
|
|
488
489
|
];
|
|
489
|
-
const
|
|
490
|
-
...
|
|
491
|
-
|
|
490
|
+
const link = [
|
|
491
|
+
...dynamicLink,
|
|
492
|
+
staticLink
|
|
492
493
|
];
|
|
493
494
|
|
|
494
|
-
const
|
|
495
|
-
//
|
|
496
|
-
"
|
|
497
|
-
|
|
498
|
-
"
|
|
499
|
-
|
|
500
|
-
"
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
"
|
|
504
|
-
"
|
|
505
|
-
|
|
506
|
-
|
|
495
|
+
const staticNavLink = {
|
|
496
|
+
// config
|
|
497
|
+
"nav-link-default-variant": "nav-link-text-primary",
|
|
498
|
+
// base
|
|
499
|
+
"nav-link": "transition-base leading-6 justify-start gap-x-3 rounded-md",
|
|
500
|
+
// badge
|
|
501
|
+
"nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5",
|
|
502
|
+
// text-variant
|
|
503
|
+
"nav-link-text-gray": "hover:bg-$c-gray-100 hover:text-$c-gray-950",
|
|
504
|
+
"nav-link-active-text-gray": "bg-$c-gray-100 text-$c-gray-950",
|
|
505
|
+
"nav-link-inactive-text-gray": "text-$c-gray-950"
|
|
506
|
+
};
|
|
507
|
+
const dynamicNavLink = [
|
|
508
|
+
// text-variant
|
|
509
|
+
[/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-$c-gray-100 text-${c}-600 dark:text-${c}-500`],
|
|
510
|
+
[/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "gray"]) => `text-${c}-800 dark:text-${c}-100`],
|
|
511
|
+
[/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-text-${c}`],
|
|
512
|
+
// solid-variant
|
|
513
|
+
[/^nav-link-active-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-700 dark:bg-${c}-400 text-white dark:text-${c}-950`],
|
|
514
|
+
[/^nav-link-inactive-solid(-(\S+))?$/, ([, , c = "primary"]) => `text-white dark:text-${c}-950`],
|
|
515
|
+
[/^nav-link-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:nav-link-active-solid-${c}`]
|
|
516
|
+
];
|
|
517
|
+
const navLink = [
|
|
518
|
+
...dynamicNavLink,
|
|
519
|
+
staticNavLink
|
|
520
|
+
];
|
|
521
|
+
|
|
522
|
+
const staticNavLinkGroup = {
|
|
523
|
+
// base
|
|
524
|
+
"nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
|
|
525
|
+
// panel
|
|
526
|
+
"nav-link-group-panel": "mt-1 px-2 space-y-1"
|
|
527
|
+
};
|
|
528
|
+
const dynamicNavLinkGroup = [];
|
|
529
|
+
const navLinkGroup = [
|
|
530
|
+
...dynamicNavLinkGroup,
|
|
531
|
+
staticNavLinkGroup
|
|
532
|
+
];
|
|
533
|
+
|
|
534
|
+
const staticPopover = {
|
|
535
|
+
"popover-content": "w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
507
536
|
};
|
|
508
|
-
const
|
|
509
|
-
|
|
510
|
-
const color = utils.parseColor(body, theme);
|
|
511
|
-
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
512
|
-
return `n-${body}-600 dark:n-${body}-500`;
|
|
513
|
-
}]
|
|
537
|
+
const dynamicPopover = [
|
|
538
|
+
// dynamic preset
|
|
514
539
|
];
|
|
515
|
-
const
|
|
516
|
-
...
|
|
517
|
-
|
|
540
|
+
const popover = [
|
|
541
|
+
...dynamicPopover,
|
|
542
|
+
staticPopover
|
|
518
543
|
];
|
|
519
544
|
|
|
520
545
|
const staticProgress = {
|
|
@@ -537,39 +562,31 @@ const progress = [
|
|
|
537
562
|
staticProgress
|
|
538
563
|
];
|
|
539
564
|
|
|
540
|
-
const
|
|
565
|
+
const staticRadio = {
|
|
541
566
|
// base
|
|
542
|
-
|
|
567
|
+
"radio": "radio-primary flex items-center transition-base border border-$c-ring rounded-full p-0.12em h-1em w-1em n-checked:border-brand n-checked:bg-brand",
|
|
568
|
+
"radio-disabled": "n-disabled",
|
|
569
|
+
"radio-label": "block text-sm font-medium leading-6",
|
|
570
|
+
"radio-input": "absolute w-full opacity-0",
|
|
571
|
+
"radio-reverse": "flex-row-reverse",
|
|
572
|
+
"radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
|
|
573
|
+
// wrappers
|
|
574
|
+
"radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
|
|
575
|
+
// icon
|
|
576
|
+
"radio-icon-base": "m-auto opacity-0 text-inverted w-full h-full transition-base n-checked:opacity-100",
|
|
577
|
+
"radio-icon": "i-dot"
|
|
578
|
+
// refer to general.ts
|
|
543
579
|
};
|
|
544
|
-
const
|
|
545
|
-
[/^
|
|
580
|
+
const dynamicRadio = [
|
|
581
|
+
[/^radio-(.*)$/, ([, body], { theme }) => {
|
|
546
582
|
const color = utils.parseColor(body, theme);
|
|
547
583
|
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
548
|
-
return `n-${body}-
|
|
584
|
+
return `n-${body}-600 dark:n-${body}-500`;
|
|
549
585
|
}]
|
|
550
586
|
];
|
|
551
|
-
const
|
|
552
|
-
...
|
|
553
|
-
|
|
554
|
-
];
|
|
555
|
-
|
|
556
|
-
const staticTabs = {
|
|
557
|
-
// configurations
|
|
558
|
-
"tabs": "transition-colors duration-200 ease-out",
|
|
559
|
-
"tabs-default-variant": "tabs-soft-black",
|
|
560
|
-
"tabs-disabled": "n-disabled",
|
|
561
|
-
// components
|
|
562
|
-
"tabs-root": "flex flex-col w-full",
|
|
563
|
-
"tabs-trigger": "w-full focus-visible:z-10",
|
|
564
|
-
"tabs-list": "flex bg-muted items-center justify-center rounded-md p-1 w-full",
|
|
565
|
-
"tabs-content": "mt-4 text-base"
|
|
566
|
-
};
|
|
567
|
-
const dynamicTabs = [
|
|
568
|
-
[/^tabs-(\S+)-(\S+)$/, ([, v = "solid", c = "primary"]) => `data-[state=active]:btn-${v}-${c}`]
|
|
569
|
-
];
|
|
570
|
-
const tabs = [
|
|
571
|
-
...dynamicTabs,
|
|
572
|
-
staticTabs
|
|
587
|
+
const radio = [
|
|
588
|
+
...dynamicRadio,
|
|
589
|
+
staticRadio
|
|
573
590
|
];
|
|
574
591
|
|
|
575
592
|
const staticSelect = {
|
|
@@ -608,7 +625,7 @@ const staticSelect = {
|
|
|
608
625
|
"select-item-selectItem": ""
|
|
609
626
|
};
|
|
610
627
|
const dynamicSelect = [
|
|
611
|
-
[/^select-(
|
|
628
|
+
[/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"]) => `btn-${v}-${c}`],
|
|
612
629
|
[/^select-item(-(\S+))?$/, ([, , c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100`]
|
|
613
630
|
];
|
|
614
631
|
const select = [
|
|
@@ -647,29 +664,85 @@ const separator = [
|
|
|
647
664
|
staticSeparator
|
|
648
665
|
];
|
|
649
666
|
|
|
650
|
-
const
|
|
667
|
+
const staticSkeleton = {
|
|
651
668
|
// base
|
|
652
|
-
|
|
653
|
-
|
|
669
|
+
skeleton: "skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
|
|
670
|
+
};
|
|
671
|
+
const dynamicSkeleton = [
|
|
672
|
+
[/^skeleton-(.*)$/, ([, body], { theme }) => {
|
|
673
|
+
const color = utils.parseColor(body, theme);
|
|
674
|
+
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
675
|
+
return `n-${body}-100 dark:n-${body}-800`;
|
|
676
|
+
}]
|
|
677
|
+
];
|
|
678
|
+
const skeleton = [
|
|
679
|
+
...dynamicSkeleton,
|
|
680
|
+
staticSkeleton
|
|
681
|
+
];
|
|
682
|
+
|
|
683
|
+
const staticSlider = {
|
|
684
|
+
// configurations
|
|
685
|
+
"slider": "slider-primary size-base",
|
|
686
|
+
"slider-disabled": "n-disabled",
|
|
687
|
+
"slider-root-vertical": "flex-col w-1em h-full",
|
|
688
|
+
"slider-track-vertical": "w-0.5em h-full",
|
|
689
|
+
"slider-range-vertical": "w-full",
|
|
690
|
+
"slider-thumb-vertical": "w-1.25em h-1.25em",
|
|
654
691
|
// components
|
|
655
|
-
"
|
|
656
|
-
"
|
|
657
|
-
"
|
|
658
|
-
"
|
|
659
|
-
"card-footer": "flex items-center p-6 pt-0",
|
|
660
|
-
"card-about": "flex flex-col gap-y-1.5 px-4 py-5 sm:p-6",
|
|
661
|
-
// static variants
|
|
662
|
-
"card-soft-gray": "bg-muted border border-base",
|
|
663
|
-
"card-outline-gray": "bg-base border border-base"
|
|
692
|
+
"slider-root": "slider relative flex w-full touch-none select-none items-center",
|
|
693
|
+
"slider-track": "h-0.5em relative w-full grow overflow-hidden rounded-full bg-muted",
|
|
694
|
+
"slider-range": "absolute h-full bg-brand",
|
|
695
|
+
"slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
|
664
696
|
};
|
|
665
|
-
const
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
697
|
+
const dynamicSlider = [
|
|
698
|
+
[/^slider-(.*)$/, ([, body], { theme }) => {
|
|
699
|
+
const color = utils.parseColor(body, theme);
|
|
700
|
+
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
701
|
+
return `n-${body}-600 dark:n-${body}-500`;
|
|
702
|
+
}]
|
|
669
703
|
];
|
|
670
|
-
const
|
|
671
|
-
...
|
|
672
|
-
|
|
704
|
+
const slider = [
|
|
705
|
+
...dynamicSlider,
|
|
706
|
+
staticSlider
|
|
707
|
+
];
|
|
708
|
+
|
|
709
|
+
const staticSwitch = {
|
|
710
|
+
// base
|
|
711
|
+
"switch": "switch-primary bg-transparent relative inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-full",
|
|
712
|
+
"switch-disabled": "n-disabled",
|
|
713
|
+
"switch-focus": "focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-base focus:ring-brand",
|
|
714
|
+
// inset
|
|
715
|
+
"switch-inset": "h-1.5em w-2.75em",
|
|
716
|
+
"switch-track-inset": "h-1.5em w-2.75em",
|
|
717
|
+
// outset
|
|
718
|
+
"switch-outset": "h-1.25em w-2.5em",
|
|
719
|
+
"switch-track-outset": "h-1em w-2.25em",
|
|
720
|
+
// thumb
|
|
721
|
+
"switch-thumb": "flex items-center justify-center h-1.25em w-1.25em absolute bg-base pointer-events-none inline-block transform rounded-full shadow transition-base",
|
|
722
|
+
"switch-thumb-on": "translate-x-1.25em",
|
|
723
|
+
"switch-thumb-off": "translate-x-0",
|
|
724
|
+
// track
|
|
725
|
+
"switch-track": "pointer-events-none absolute mx-auto rounded-full transition-base",
|
|
726
|
+
"switch-track-on": "bg-brand",
|
|
727
|
+
"switch-track-off": "bg-$c-gray-200",
|
|
728
|
+
// icon
|
|
729
|
+
"switch-icon-base": "text-0.8em",
|
|
730
|
+
"switch-icon-off": "text-muted",
|
|
731
|
+
"switch-icon-on": "text-muted",
|
|
732
|
+
// loading
|
|
733
|
+
"switch-loading-icon": "i-loading",
|
|
734
|
+
"switch-loading": "text-gray animate-spin text-0.8em"
|
|
735
|
+
};
|
|
736
|
+
const dynamicSwitch = [
|
|
737
|
+
[/^switch-(.*)$/, ([, body], { theme }) => {
|
|
738
|
+
const color = utils.parseColor(body, theme);
|
|
739
|
+
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
740
|
+
return `n-${body}-600 dark:n-${body}-500`;
|
|
741
|
+
}]
|
|
742
|
+
];
|
|
743
|
+
const _switch = [
|
|
744
|
+
...dynamicSwitch,
|
|
745
|
+
staticSwitch
|
|
673
746
|
];
|
|
674
747
|
|
|
675
748
|
const staticTable = {
|
|
@@ -713,96 +786,23 @@ const table = [
|
|
|
713
786
|
staticTable
|
|
714
787
|
];
|
|
715
788
|
|
|
716
|
-
const
|
|
717
|
-
// config
|
|
718
|
-
"breadcrumb": "",
|
|
719
|
-
"breadcrumb-active": "breadcrumb-active-text-primary",
|
|
720
|
-
"breadcrumb-inactive": "breadcrumb-inactive-text-muted",
|
|
721
|
-
"breadcrumb-separator-icon": "i-radix-icons-chevron-right",
|
|
722
|
-
"breadcrumb-elipsis-icon": "i-radix-icons-dots-horizontal",
|
|
723
|
-
// components
|
|
724
|
-
"breadcrumb-root": "",
|
|
725
|
-
"breadcrumb-list": "flex flex-wrap items-center break-words text-muted gap-0.5",
|
|
726
|
-
"breadcrumb-link": "transition-colors font-normal btn-square",
|
|
727
|
-
"breadcrumb-item": "inline-flex items-center",
|
|
728
|
-
// TODO
|
|
729
|
-
"breadcrumb-ellipsis": "flex h-9 w-9 items-center justify-center"
|
|
730
|
-
};
|
|
731
|
-
const dynamicBreadcrumb = [
|
|
732
|
-
// states
|
|
733
|
-
[
|
|
734
|
-
/^breadcrumb-active-(\S+)-(\S+)$/,
|
|
735
|
-
([, variant = "text", color = "primary"]) => `data-[state=active]:btn-${variant}-${color}`
|
|
736
|
-
],
|
|
737
|
-
[
|
|
738
|
-
/^breadcrumb-inactive-(\S+)-(\S+)$/,
|
|
739
|
-
([, variant = "text", color = "muted"]) => `data-[state=inactive]:btn-${variant}-${color}`
|
|
740
|
-
]
|
|
741
|
-
];
|
|
742
|
-
const breadcrumb = [
|
|
743
|
-
...dynamicBreadcrumb,
|
|
744
|
-
staticBreadcrumb
|
|
745
|
-
];
|
|
746
|
-
|
|
747
|
-
const staticDropdownMenu = {
|
|
789
|
+
const staticTabs = {
|
|
748
790
|
// configurations
|
|
749
|
-
"
|
|
750
|
-
"
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
"
|
|
754
|
-
"
|
|
755
|
-
|
|
756
|
-
"
|
|
757
|
-
// dropdown-menu-item
|
|
758
|
-
"dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0",
|
|
759
|
-
"dropdown-menu-item-leading": "opacity-75 text-1.1em",
|
|
760
|
-
"dropdown-menu-item-trailing": "ml-auto opacity-75 text-1.1em",
|
|
761
|
-
// dropdown-menu-label
|
|
762
|
-
"dropdown-menu-label": "px-2 py-1.5 text-1em font-semibold",
|
|
763
|
-
// dropdown-menu-separator
|
|
764
|
-
"dropdown-menu-separator-root": "relative -mx-1",
|
|
765
|
-
"dropdown-menu-separator": "",
|
|
766
|
-
// dropdown-menu-shortcut
|
|
767
|
-
"dropdown-menu-shortcut": "pl-10 ml-auto text-0.875em tracking-widest n-disabled space-x-0.5",
|
|
768
|
-
// dropdown-menu-group
|
|
769
|
-
"dropdown-menu-group": "",
|
|
770
|
-
// dropdown-menu-sub
|
|
771
|
-
"dropdown-menu-sub-trigger": "transition-color focus-visible:outline-0",
|
|
772
|
-
"dropdown-menu-sub-trigger-leading": "opacity-75 text-1.1em",
|
|
773
|
-
"dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75 text-1.1em",
|
|
774
|
-
"dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
775
|
-
};
|
|
776
|
-
const dynamicDropdownMenu = [
|
|
777
|
-
[/^dropdown-menu-(\S+)-(\S+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
|
|
778
|
-
[/^dropdown-menu-item(?:-(\S+))?$/, ([, c = "gray"]) => `focus:bg-${c}-100 focus:text-${c}-800 dark:focus:bg-${c}-800 dark:focus:text-${c}-100 data-[state=open]:bg-${c}-100 dark:data-[state=open]:bg-${c}-800`]
|
|
779
|
-
];
|
|
780
|
-
const dropdowMenu = [
|
|
781
|
-
...dynamicDropdownMenu,
|
|
782
|
-
staticDropdownMenu
|
|
783
|
-
];
|
|
784
|
-
|
|
785
|
-
const staticLabel = {
|
|
786
|
-
// base
|
|
787
|
-
"label-base": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:n-disabled"
|
|
788
|
-
};
|
|
789
|
-
const dynamicLabel = [
|
|
790
|
-
// dynamic preset
|
|
791
|
-
];
|
|
792
|
-
const label = [
|
|
793
|
-
...dynamicLabel,
|
|
794
|
-
staticLabel
|
|
795
|
-
];
|
|
796
|
-
|
|
797
|
-
const staticPopover = {
|
|
798
|
-
"popover-content": "w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
791
|
+
"tabs": "transition-colors duration-200 ease-out",
|
|
792
|
+
"tabs-default-variant": "tabs-soft-black",
|
|
793
|
+
"tabs-disabled": "n-disabled",
|
|
794
|
+
// components
|
|
795
|
+
"tabs-root": "flex flex-col w-full",
|
|
796
|
+
"tabs-trigger": "w-full focus-visible:z-10",
|
|
797
|
+
"tabs-list": "flex bg-muted items-center justify-center rounded-md p-1 w-full",
|
|
798
|
+
"tabs-content": "mt-4 text-base"
|
|
799
799
|
};
|
|
800
|
-
const
|
|
801
|
-
|
|
800
|
+
const dynamicTabs = [
|
|
801
|
+
[/^tabs-([^-]+)-([^-]+)$/, ([, v = "solid", c = "primary"]) => `data-[state=active]:btn-${v}-${c}`]
|
|
802
802
|
];
|
|
803
|
-
const
|
|
804
|
-
...
|
|
805
|
-
|
|
803
|
+
const tabs = [
|
|
804
|
+
...dynamicTabs,
|
|
805
|
+
staticTabs
|
|
806
806
|
];
|
|
807
807
|
|
|
808
808
|
const staticTooltip = {
|