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