@andrilla/mado-ui 1.0.7 → 1.0.8

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.
Files changed (11) hide show
  1. package/dist/client/components/index.js +754 -415
  2. package/dist/client.js +754 -415
  3. package/dist/components/index.js +754 -415
  4. package/dist/css/base.css +0 -28
  5. package/dist/css/index.css +0 -1
  6. package/dist/css/tailwindcss.css +2 -0
  7. package/dist/css/theme.css +10 -0
  8. package/dist/index.js +754 -415
  9. package/dist/types.d.ts +5 -8
  10. package/dist/utils/get-theme-color.d.ts +3 -0
  11. package/package.json +18 -9
package/dist/client/components/index.js CHANGED
@@ -103,434 +103,740 @@ const twMerge = extendTailwindMerge({ extend: { classGroups: {
103
103
  } } });
104
104
 
105
105
  //#endregion
106
- //#region src/components/link.tsx
107
- function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }) {
108
- const isExternal = `${href}`.startsWith("http"), hasHash = `${href}`.includes("#");
109
- const handleClick = (e) => {
110
- if (disabled) return e.preventDefault();
111
- onClick?.(e);
112
- setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
113
- };
114
- return /* @__PURE__ */ jsx(as || "a", {
115
- ...props,
116
- "aria-disabled": disabled,
117
- className: twMerge("ease-exponential inline-block transition-transform duration-300 active:scale-95 pointer-fine:active:scale-95", className, disabled && "pointer-events-none"),
118
- href,
119
- target: target || (isExternal ? "_blank" : "_self"),
120
- onClick: hasHash ? handleClick : onClick,
121
- rel: rel !== void 0 ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch` : isExternal ? "nofollow noreferrer noopener" : "prefetch"
122
- });
123
- }
124
- const baseClasses = "isolate after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:after:opacity-100 pointer-fine:active:after:opacity-100";
125
- const lineStaticClasses = twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border after:border-current");
126
- const lineClasses = twJoin(lineStaticClasses, "whitespace-nowrap after:transition-transform after:ease-exponential");
127
- const scaleXClasses = "after:scale-x-0 active:after:scale-x-100 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:scale-x-100";
128
- const scaleYClasses = "after:scale-y-0 active:after:scale-y-100 pointer-fine:hover:after:scale-y-100 pointer-fine:active:after:scale-y-100";
129
- const lineNormalClasses = twJoin([
130
- lineClasses,
131
- scaleYClasses,
132
- "after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0"
133
- ]);
134
- const lineLtrClasses = twJoin([
135
- lineClasses,
136
- scaleXClasses,
137
- "after:origin-left"
138
- ]);
139
- const lineRtlClasses = twJoin([
140
- lineClasses,
141
- scaleXClasses,
142
- "after:origin-right"
143
- ]);
144
- const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
145
- const lineLiftClasses = twJoin([
146
- lineClasses,
147
- scaleYClasses,
148
- "after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:translate-y-0 pointer-fine:active:after:scale-x-100"
149
- ]);
150
- const fillClasses = twJoin(baseClasses, "whitespace-nowrap [--text-color:var(--base-theme-color--foreground)] transition-[transform,color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-(--text-color) pointer-fine:hover:text-(--text-color) pointer-fine:active:text-(--text-color)");
151
- const getFillColorTransitionClasses = (theme = "blue", customTheme) => {
152
- let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale,color] after:bg-(--theme-color)");
106
+ //#region src/utils/get-theme-color.ts
107
+ function getThemeColor(theme) {
153
108
  switch (theme) {
109
+ case "amber-50": return "[--theme-color:var(--color-amber-50)]";
110
+ case "amber-100": return "[--theme-color:var(--color-amber-100)]";
111
+ case "amber-200": return "[--theme-color:var(--color-amber-200)]";
112
+ case "amber-300": return "[--theme-color:var(--color-amber-300)]";
113
+ case "amber-400": return "[--theme-color:var(--color-amber-400)]";
154
114
  case "amber":
155
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-amber-500)]");
156
- break;
115
+ case "amber-500": return "[--theme-color:var(--color-amber-500)]";
116
+ case "amber-600": return "[--theme-color:var(--color-amber-600)]";
117
+ case "amber-700": return "[--theme-color:var(--color-amber-700)]";
118
+ case "amber-800": return "[--theme-color:var(--color-amber-800)]";
119
+ case "amber-900": return "[--theme-color:var(--color-amber-900)]";
120
+ case "amber-950": return "[--theme-color:var(--color-amber-950)]";
121
+ case "blue-50": return "[--theme-color:var(--color-blue-50)]";
122
+ case "blue-100": return "[--theme-color:var(--color-blue-100)]";
123
+ case "blue-200": return "[--theme-color:var(--color-blue-200)]";
124
+ case "blue-300": return "[--theme-color:var(--color-blue-300)]";
125
+ case "blue-400": return "[--theme-color:var(--color-blue-400)]";
157
126
  case "blue":
158
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-blue-500)]");
159
- break;
127
+ case "blue-500": return "[--theme-color:var(--color-blue-500)]";
128
+ case "blue-600": return "[--theme-color:var(--color-blue-600)]";
129
+ case "blue-700": return "[--theme-color:var(--color-blue-700)]";
130
+ case "blue-800": return "[--theme-color:var(--color-blue-800)]";
131
+ case "blue-900": return "[--theme-color:var(--color-blue-900)]";
132
+ case "blue-950": return "[--theme-color:var(--color-blue-950)]";
133
+ case "cyan-50": return "[--theme-color:var(--color-cyan-50)]";
134
+ case "cyan-100": return "[--theme-color:var(--color-cyan-100)]";
135
+ case "cyan-200": return "[--theme-color:var(--color-cyan-200)]";
136
+ case "cyan-300": return "[--theme-color:var(--color-cyan-300)]";
137
+ case "cyan-400": return "[--theme-color:var(--color-cyan-400)]";
160
138
  case "cyan":
161
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-cyan-500)]");
162
- break;
139
+ case "cyan-500": return "[--theme-color:var(--color-cyan-500)]";
140
+ case "cyan-600": return "[--theme-color:var(--color-cyan-600)]";
141
+ case "cyan-700": return "[--theme-color:var(--color-cyan-700)]";
142
+ case "cyan-800": return "[--theme-color:var(--color-cyan-800)]";
143
+ case "cyan-900": return "[--theme-color:var(--color-cyan-900)]";
144
+ case "cyan-950": return "[--theme-color:var(--color-cyan-950)]";
145
+ case "emerald-50": return "[--theme-color:var(--color-emerald-50)]";
146
+ case "emerald-100": return "[--theme-color:var(--color-emerald-100)]";
147
+ case "emerald-200": return "[--theme-color:var(--color-emerald-200)]";
148
+ case "emerald-300": return "[--theme-color:var(--color-emerald-300)]";
149
+ case "emerald-400": return "[--theme-color:var(--color-emerald-400)]";
163
150
  case "emerald":
164
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-emerald-500)]");
165
- break;
151
+ case "emerald-500": return "[--theme-color:var(--color-emerald-500)]";
152
+ case "emerald-600": return "[--theme-color:var(--color-emerald-600)]";
153
+ case "emerald-700": return "[--theme-color:var(--color-emerald-700)]";
154
+ case "emerald-800": return "[--theme-color:var(--color-emerald-800)]";
155
+ case "emerald-900": return "[--theme-color:var(--color-emerald-900)]";
156
+ case "emerald-950": return "[--theme-color:var(--color-emerald-950)]";
157
+ case "fuchsia-50": return "[--theme-color:var(--color-fuchsia-50)]";
158
+ case "fuchsia-100": return "[--theme-color:var(--color-fuchsia-100)]";
159
+ case "fuchsia-200": return "[--theme-color:var(--color-fuchsia-200)]";
160
+ case "fuchsia-300": return "[--theme-color:var(--color-fuchsia-300)]";
161
+ case "fuchsia-400": return "[--theme-color:var(--color-fuchsia-400)]";
166
162
  case "fuchsia":
167
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-fuchsia-500)]");
168
- break;
163
+ case "fuchsia-500": return "[--theme-color:var(--color-fuchsia-500)]";
164
+ case "fuchsia-600": return "[--theme-color:var(--color-fuchsia-600)]";
165
+ case "fuchsia-700": return "[--theme-color:var(--color-fuchsia-700)]";
166
+ case "fuchsia-800": return "[--theme-color:var(--color-fuchsia-800)]";
167
+ case "fuchsia-900": return "[--theme-color:var(--color-fuchsia-900)]";
168
+ case "fuchsia-950": return "[--theme-color:var(--color-fuchsia-950)]";
169
+ case "gray-50": return "[--theme-color:var(--color-gray-50)]";
170
+ case "gray-100": return "[--theme-color:var(--color-gray-100)]";
171
+ case "gray-200": return "[--theme-color:var(--color-gray-200)]";
172
+ case "gray-300": return "[--theme-color:var(--color-gray-300)]";
173
+ case "gray-400": return "[--theme-color:var(--color-gray-400)]";
169
174
  case "gray":
170
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-gray-500)]");
171
- break;
175
+ case "gray-500": return "[--theme-color:var(--color-gray-500)]";
176
+ case "gray-600": return "[--theme-color:var(--color-gray-600)]";
177
+ case "gray-700": return "[--theme-color:var(--color-gray-700)]";
178
+ case "gray-800": return "[--theme-color:var(--color-gray-800)]";
179
+ case "gray-900": return "[--theme-color:var(--color-gray-900)]";
180
+ case "gray-950": return "[--theme-color:var(--color-gray-950)]";
181
+ case "green-50": return "[--theme-color:var(--color-green-50)]";
182
+ case "green-100": return "[--theme-color:var(--color-green-100)]";
183
+ case "green-200": return "[--theme-color:var(--color-green-200)]";
184
+ case "green-300": return "[--theme-color:var(--color-green-300)]";
185
+ case "green-400": return "[--theme-color:var(--color-green-400)]";
172
186
  case "green":
173
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-green-500)]");
174
- break;
187
+ case "green-500": return "[--theme-color:var(--color-green-500)]";
188
+ case "green-600": return "[--theme-color:var(--color-green-600)]";
189
+ case "green-700": return "[--theme-color:var(--color-green-700)]";
190
+ case "green-800": return "[--theme-color:var(--color-green-800)]";
191
+ case "green-900": return "[--theme-color:var(--color-green-900)]";
192
+ case "green-950": return "[--theme-color:var(--color-green-950)]";
193
+ case "indigo-50": return "[--theme-color:var(--color-indigo-50)]";
194
+ case "indigo-100": return "[--theme-color:var(--color-indigo-100)]";
195
+ case "indigo-200": return "[--theme-color:var(--color-indigo-200)]";
196
+ case "indigo-300": return "[--theme-color:var(--color-indigo-300)]";
197
+ case "indigo-400": return "[--theme-color:var(--color-indigo-400)]";
175
198
  case "indigo":
176
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-indigo-500)]");
177
- break;
199
+ case "indigo-500": return "[--theme-color:var(--color-indigo-500)]";
200
+ case "indigo-600": return "[--theme-color:var(--color-indigo-600)]";
201
+ case "indigo-700": return "[--theme-color:var(--color-indigo-700)]";
202
+ case "indigo-800": return "[--theme-color:var(--color-indigo-800)]";
203
+ case "indigo-900": return "[--theme-color:var(--color-indigo-900)]";
204
+ case "indigo-950": return "[--theme-color:var(--color-indigo-950)]";
205
+ case "lime-50": return "[--theme-color:var(--color-lime-50)]";
206
+ case "lime-100": return "[--theme-color:var(--color-lime-100)]";
207
+ case "lime-200": return "[--theme-color:var(--color-lime-200)]";
208
+ case "lime-300": return "[--theme-color:var(--color-lime-300)]";
209
+ case "lime-400": return "[--theme-color:var(--color-lime-400)]";
178
210
  case "lime":
179
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-lime-500)]");
180
- break;
211
+ case "lime-500": return "[--theme-color:var(--color-lime-500)]";
212
+ case "lime-600": return "[--theme-color:var(--color-lime-600)]";
213
+ case "lime-700": return "[--theme-color:var(--color-lime-700)]";
214
+ case "lime-800": return "[--theme-color:var(--color-lime-800)]";
215
+ case "lime-900": return "[--theme-color:var(--color-lime-900)]";
216
+ case "lime-950": return "[--theme-color:var(--color-lime-950)]";
217
+ case "mauve-50": return "[--theme-color:var(--color-mauve-50)]";
218
+ case "mauve-100": return "[--theme-color:var(--color-mauve-100)]";
219
+ case "mauve-200": return "[--theme-color:var(--color-mauve-200)]";
220
+ case "mauve-300": return "[--theme-color:var(--color-mauve-300)]";
221
+ case "mauve-400": return "[--theme-color:var(--color-mauve-400)]";
181
222
  case "mauve":
182
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-mauve-500)]");
183
- break;
223
+ case "mauve-500": return "[--theme-color:var(--color-mauve-500)]";
224
+ case "mauve-600": return "[--theme-color:var(--color-mauve-600)]";
225
+ case "mauve-700": return "[--theme-color:var(--color-mauve-700)]";
226
+ case "mauve-800": return "[--theme-color:var(--color-mauve-800)]";
227
+ case "mauve-900": return "[--theme-color:var(--color-mauve-900)]";
228
+ case "mauve-950": return "[--theme-color:var(--color-mauve-950)]";
229
+ case "mist-50": return "[--theme-color:var(--color-mist-50)]";
230
+ case "mist-100": return "[--theme-color:var(--color-mist-100)]";
231
+ case "mist-200": return "[--theme-color:var(--color-mist-200)]";
232
+ case "mist-300": return "[--theme-color:var(--color-mist-300)]";
233
+ case "mist-400": return "[--theme-color:var(--color-mist-400)]";
184
234
  case "mist":
185
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-mist-500)]");
186
- break;
235
+ case "mist-500": return "[--theme-color:var(--color-mist-500)]";
236
+ case "mist-600": return "[--theme-color:var(--color-mist-600)]";
237
+ case "mist-700": return "[--theme-color:var(--color-mist-700)]";
238
+ case "mist-800": return "[--theme-color:var(--color-mist-800)]";
239
+ case "mist-900": return "[--theme-color:var(--color-mist-900)]";
240
+ case "mist-950": return "[--theme-color:var(--color-mist-950)]";
241
+ case "neutral-50": return "[--theme-color:var(--color-neutral-50)]";
242
+ case "neutral-100": return "[--theme-color:var(--color-neutral-100)]";
243
+ case "neutral-200": return "[--theme-color:var(--color-neutral-200)]";
244
+ case "neutral-300": return "[--theme-color:var(--color-neutral-300)]";
245
+ case "neutral-400": return "[--theme-color:var(--color-neutral-400)]";
187
246
  case "neutral":
188
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-neutral-500)]");
189
- break;
247
+ case "neutral-500": return "[--theme-color:var(--color-neutral-500)]";
248
+ case "neutral-600": return "[--theme-color:var(--color-neutral-600)]";
249
+ case "neutral-700": return "[--theme-color:var(--color-neutral-700)]";
250
+ case "neutral-800": return "[--theme-color:var(--color-neutral-800)]";
251
+ case "neutral-900": return "[--theme-color:var(--color-neutral-900)]";
252
+ case "neutral-950": return "[--theme-color:var(--color-neutral-950)]";
253
+ case "olive-50": return "[--theme-color:var(--color-olive-50)]";
254
+ case "olive-100": return "[--theme-color:var(--color-olive-100)]";
255
+ case "olive-200": return "[--theme-color:var(--color-olive-200)]";
256
+ case "olive-300": return "[--theme-color:var(--color-olive-300)]";
257
+ case "olive-400": return "[--theme-color:var(--color-olive-400)]";
190
258
  case "olive":
191
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-olive-500)]");
192
- break;
259
+ case "olive-500": return "[--theme-color:var(--color-olive-500)]";
260
+ case "olive-600": return "[--theme-color:var(--color-olive-600)]";
261
+ case "olive-700": return "[--theme-color:var(--color-olive-700)]";
262
+ case "olive-800": return "[--theme-color:var(--color-olive-800)]";
263
+ case "olive-900": return "[--theme-color:var(--color-olive-900)]";
264
+ case "olive-950": return "[--theme-color:var(--color-olive-950)]";
265
+ case "orange-50": return "[--theme-color:var(--color-orange-50)]";
266
+ case "orange-100": return "[--theme-color:var(--color-orange-100)]";
267
+ case "orange-200": return "[--theme-color:var(--color-orange-200)]";
268
+ case "orange-300": return "[--theme-color:var(--color-orange-300)]";
269
+ case "orange-400": return "[--theme-color:var(--color-orange-400)]";
193
270
  case "orange":
194
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-orange-500)]");
195
- break;
271
+ case "orange-500": return "[--theme-color:var(--color-orange-500)]";
272
+ case "orange-600": return "[--theme-color:var(--color-orange-600)]";
273
+ case "orange-700": return "[--theme-color:var(--color-orange-700)]";
274
+ case "orange-800": return "[--theme-color:var(--color-orange-800)]";
275
+ case "orange-900": return "[--theme-color:var(--color-orange-900)]";
276
+ case "orange-950": return "[--theme-color:var(--color-orange-950)]";
277
+ case "pink-50": return "[--theme-color:var(--color-pink-50)]";
278
+ case "pink-100": return "[--theme-color:var(--color-pink-100)]";
279
+ case "pink-200": return "[--theme-color:var(--color-pink-200)]";
280
+ case "pink-300": return "[--theme-color:var(--color-pink-300)]";
281
+ case "pink-400": return "[--theme-color:var(--color-pink-400)]";
196
282
  case "pink":
197
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-pink-500)]");
198
- break;
283
+ case "pink-500": return "[--theme-color:var(--color-pink-500)]";
284
+ case "pink-600": return "[--theme-color:var(--color-pink-600)]";
285
+ case "pink-700": return "[--theme-color:var(--color-pink-700)]";
286
+ case "pink-800": return "[--theme-color:var(--color-pink-800)]";
287
+ case "pink-900": return "[--theme-color:var(--color-pink-900)]";
288
+ case "pink-950": return "[--theme-color:var(--color-pink-950)]";
289
+ case "purple-50": return "[--theme-color:var(--color-purple-50)]";
290
+ case "purple-100": return "[--theme-color:var(--color-purple-100)]";
291
+ case "purple-200": return "[--theme-color:var(--color-purple-200)]";
292
+ case "purple-300": return "[--theme-color:var(--color-purple-300)]";
293
+ case "purple-400": return "[--theme-color:var(--color-purple-400)]";
199
294
  case "purple":
200
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-purple-500)]");
201
- break;
295
+ case "purple-500": return "[--theme-color:var(--color-purple-500)]";
296
+ case "purple-600": return "[--theme-color:var(--color-purple-600)]";
297
+ case "purple-700": return "[--theme-color:var(--color-purple-700)]";
298
+ case "purple-800": return "[--theme-color:var(--color-purple-800)]";
299
+ case "purple-900": return "[--theme-color:var(--color-purple-900)]";
300
+ case "purple-950": return "[--theme-color:var(--color-purple-950)]";
301
+ case "red-50": return "[--theme-color:var(--color-red-50)]";
302
+ case "red-100": return "[--theme-color:var(--color-red-100)]";
303
+ case "red-200": return "[--theme-color:var(--color-red-200)]";
304
+ case "red-300": return "[--theme-color:var(--color-red-300)]";
305
+ case "red-400": return "[--theme-color:var(--color-red-400)]";
202
306
  case "red":
203
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-red-500)]");
204
- break;
307
+ case "red-500": return "[--theme-color:var(--color-red-500)]";
308
+ case "red-600": return "[--theme-color:var(--color-red-600)]";
309
+ case "red-700": return "[--theme-color:var(--color-red-700)]";
310
+ case "red-800": return "[--theme-color:var(--color-red-800)]";
311
+ case "red-900": return "[--theme-color:var(--color-red-900)]";
312
+ case "red-950": return "[--theme-color:var(--color-red-950)]";
313
+ case "rose-50": return "[--theme-color:var(--color-rose-50)]";
314
+ case "rose-100": return "[--theme-color:var(--color-rose-100)]";
315
+ case "rose-200": return "[--theme-color:var(--color-rose-200)]";
316
+ case "rose-300": return "[--theme-color:var(--color-rose-300)]";
317
+ case "rose-400": return "[--theme-color:var(--color-rose-400)]";
205
318
  case "rose":
206
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-rose-500)]");
207
- break;
319
+ case "rose-500": return "[--theme-color:var(--color-rose-500)]";
320
+ case "rose-600": return "[--theme-color:var(--color-rose-600)]";
321
+ case "rose-700": return "[--theme-color:var(--color-rose-700)]";
322
+ case "rose-800": return "[--theme-color:var(--color-rose-800)]";
323
+ case "rose-900": return "[--theme-color:var(--color-rose-900)]";
324
+ case "rose-950": return "[--theme-color:var(--color-rose-950)]";
325
+ case "sky-50": return "[--theme-color:var(--color-sky-50)]";
326
+ case "sky-100": return "[--theme-color:var(--color-sky-100)]";
327
+ case "sky-200": return "[--theme-color:var(--color-sky-200)]";
328
+ case "sky-300": return "[--theme-color:var(--color-sky-300)]";
329
+ case "sky-400": return "[--theme-color:var(--color-sky-400)]";
208
330
  case "sky":
209
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-sky-500)]");
210
- break;
331
+ case "sky-500": return "[--theme-color:var(--color-sky-500)]";
332
+ case "sky-600": return "[--theme-color:var(--color-sky-600)]";
333
+ case "sky-700": return "[--theme-color:var(--color-sky-700)]";
334
+ case "sky-800": return "[--theme-color:var(--color-sky-800)]";
335
+ case "sky-900": return "[--theme-color:var(--color-sky-900)]";
336
+ case "sky-950": return "[--theme-color:var(--color-sky-950)]";
337
+ case "slate-50": return "[--theme-color:var(--color-slate-50)]";
338
+ case "slate-100": return "[--theme-color:var(--color-slate-100)]";
339
+ case "slate-200": return "[--theme-color:var(--color-slate-200)]";
340
+ case "slate-300": return "[--theme-color:var(--color-slate-300)]";
341
+ case "slate-400": return "[--theme-color:var(--color-slate-400)]";
211
342
  case "slate":
212
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-slate-500)]");
213
- break;
343
+ case "slate-500": return "[--theme-color:var(--color-slate-500)]";
344
+ case "slate-600": return "[--theme-color:var(--color-slate-600)]";
345
+ case "slate-700": return "[--theme-color:var(--color-slate-700)]";
346
+ case "slate-800": return "[--theme-color:var(--color-slate-800)]";
347
+ case "slate-900": return "[--theme-color:var(--color-slate-900)]";
348
+ case "slate-950": return "[--theme-color:var(--color-slate-950)]";
349
+ case "stone-50": return "[--theme-color:var(--color-stone-50)]";
350
+ case "stone-100": return "[--theme-color:var(--color-stone-100)]";
351
+ case "stone-200": return "[--theme-color:var(--color-stone-200)]";
352
+ case "stone-300": return "[--theme-color:var(--color-stone-300)]";
353
+ case "stone-400": return "[--theme-color:var(--color-stone-400)]";
214
354
  case "stone":
215
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-stone-500)]");
216
- break;
355
+ case "stone-500": return "[--theme-color:var(--color-stone-500)]";
356
+ case "stone-600": return "[--theme-color:var(--color-stone-600)]";
357
+ case "stone-700": return "[--theme-color:var(--color-stone-700)]";
358
+ case "stone-800": return "[--theme-color:var(--color-stone-800)]";
359
+ case "stone-900": return "[--theme-color:var(--color-stone-900)]";
360
+ case "stone-950": return "[--theme-color:var(--color-stone-950)]";
361
+ case "taupe-50": return "[--theme-color:var(--color-taupe-50)]";
362
+ case "taupe-100": return "[--theme-color:var(--color-taupe-100)]";
363
+ case "taupe-200": return "[--theme-color:var(--color-taupe-200)]";
364
+ case "taupe-300": return "[--theme-color:var(--color-taupe-300)]";
365
+ case "taupe-400": return "[--theme-color:var(--color-taupe-400)]";
217
366
  case "taupe":
218
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-taupe-500)]");
219
- break;
367
+ case "taupe-500": return "[--theme-color:var(--color-taupe-500)]";
368
+ case "taupe-600": return "[--theme-color:var(--color-taupe-600)]";
369
+ case "taupe-700": return "[--theme-color:var(--color-taupe-700)]";
370
+ case "taupe-800": return "[--theme-color:var(--color-taupe-800)]";
371
+ case "taupe-900": return "[--theme-color:var(--color-taupe-900)]";
372
+ case "taupe-950": return "[--theme-color:var(--color-taupe-950)]";
373
+ case "teal-50": return "[--theme-color:var(--color-teal-50)]";
374
+ case "teal-100": return "[--theme-color:var(--color-teal-100)]";
375
+ case "teal-200": return "[--theme-color:var(--color-teal-200)]";
376
+ case "teal-300": return "[--theme-color:var(--color-teal-300)]";
377
+ case "teal-400": return "[--theme-color:var(--color-teal-400)]";
220
378
  case "teal":
221
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-teal-500)]");
222
- break;
379
+ case "teal-500": return "[--theme-color:var(--color-teal-500)]";
380
+ case "teal-600": return "[--theme-color:var(--color-teal-600)]";
381
+ case "teal-700": return "[--theme-color:var(--color-teal-700)]";
382
+ case "teal-800": return "[--theme-color:var(--color-teal-800)]";
383
+ case "teal-900": return "[--theme-color:var(--color-teal-900)]";
384
+ case "teal-950": return "[--theme-color:var(--color-teal-950)]";
385
+ case "violet-50": return "[--theme-color:var(--color-violet-50)]";
386
+ case "violet-100": return "[--theme-color:var(--color-violet-100)]";
387
+ case "violet-200": return "[--theme-color:var(--color-violet-200)]";
388
+ case "violet-300": return "[--theme-color:var(--color-violet-300)]";
389
+ case "violet-400": return "[--theme-color:var(--color-violet-400)]";
223
390
  case "violet":
224
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-violet-500)]");
225
- break;
391
+ case "violet-500": return "[--theme-color:var(--color-violet-500)]";
392
+ case "violet-600": return "[--theme-color:var(--color-violet-600)]";
393
+ case "violet-700": return "[--theme-color:var(--color-violet-700)]";
394
+ case "violet-800": return "[--theme-color:var(--color-violet-800)]";
395
+ case "violet-900": return "[--theme-color:var(--color-violet-900)]";
396
+ case "violet-950": return "[--theme-color:var(--color-violet-950)]";
397
+ case "yellow-50": return "[--theme-color:var(--color-yellow-50)]";
398
+ case "yellow-100": return "[--theme-color:var(--color-yellow-100)]";
399
+ case "yellow-200": return "[--theme-color:var(--color-yellow-200)]";
400
+ case "yellow-300": return "[--theme-color:var(--color-yellow-300)]";
401
+ case "yellow-400": return "[--theme-color:var(--color-yellow-400)]";
226
402
  case "yellow":
227
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-yellow-500)]");
228
- break;
403
+ case "yellow-500": return "[--theme-color:var(--color-yellow-500)]";
404
+ case "yellow-600": return "[--theme-color:var(--color-yellow-600)]";
405
+ case "yellow-700": return "[--theme-color:var(--color-yellow-700)]";
406
+ case "yellow-800": return "[--theme-color:var(--color-yellow-800)]";
407
+ case "yellow-900": return "[--theme-color:var(--color-yellow-900)]";
408
+ case "yellow-950": return "[--theme-color:var(--color-yellow-950)]";
409
+ case "zinc-50": return "[--theme-color:var(--color-zinc-50)]";
410
+ case "zinc-100": return "[--theme-color:var(--color-zinc-100)]";
411
+ case "zinc-200": return "[--theme-color:var(--color-zinc-200)]";
412
+ case "zinc-300": return "[--theme-color:var(--color-zinc-300)]";
413
+ case "zinc-400": return "[--theme-color:var(--color-zinc-400)]";
229
414
  case "zinc":
230
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-zinc-500)]");
231
- break;
232
- case "custom":
233
- if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.");
234
- fillColorTransitionClasses = customTheme.themeColor ? twMerge(fillColorTransitionClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
235
- break;
236
- default:
237
- fillColorTransitionClasses = twMerge(fillColorTransitionClasses, `[--theme-color:var(--base-theme-color)]`);
238
- break;
415
+ case "zinc-500": return "[--theme-color:var(--color-zinc-500)]";
416
+ case "zinc-600": return "[--theme-color:var(--color-zinc-600)]";
417
+ case "zinc-700": return "[--theme-color:var(--color-zinc-700)]";
418
+ case "zinc-800": return "[--theme-color:var(--color-zinc-800)]";
419
+ case "zinc-900": return "[--theme-color:var(--color-zinc-900)]";
420
+ case "zinc-950": return "[--theme-color:var(--color-zinc-950)]";
421
+ default: return "[--theme-color:var(--base-theme-color)]";
239
422
  }
240
- return fillColorTransitionClasses;
241
- };
242
- const getFillCenterClasses = (theme = "blue", customTheme) => {
243
- let fillCenterColorClasses = twJoin(fillClasses, "after:scale-x-50 after:scale-y-[0.25] after:bg-(--theme-color)/0 after:transition-[scale,background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-(--theme-color) pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-(--theme-color) pointer-fine:active:after:scale-x-100 pointer-fine:active:after:scale-y-100 pointer-fine:active:after:bg-(--theme-color)");
423
+ }
424
+ function getTextColor(theme, asVariable) {
244
425
  switch (theme) {
426
+ case "amber-50":
427
+ case "blue-50":
428
+ case "cyan-50":
429
+ case "emerald-50":
430
+ case "fuchsia-50":
431
+ case "gray-50":
432
+ case "green-50":
433
+ case "indigo-50":
434
+ case "lime-50":
435
+ case "mauve-50":
436
+ case "mist-50":
437
+ case "neutral-50":
438
+ case "olive-50":
439
+ case "orange-50":
440
+ case "pink-50":
441
+ case "purple-50":
442
+ case "red-50":
443
+ case "rose-50":
444
+ case "sky-50":
445
+ case "slate-50":
446
+ case "stone-50":
447
+ case "taupe-50":
448
+ case "teal-50":
449
+ case "violet-50":
450
+ case "yellow-50":
451
+ case "zinc-50":
452
+ case "amber-100":
453
+ case "blue-100":
454
+ case "cyan-100":
455
+ case "emerald-100":
456
+ case "fuchsia-100":
457
+ case "gray-100":
458
+ case "green-100":
459
+ case "indigo-100":
460
+ case "lime-100":
461
+ case "mauve-100":
462
+ case "mist-100":
463
+ case "neutral-100":
464
+ case "olive-100":
465
+ case "orange-100":
466
+ case "pink-100":
467
+ case "purple-100":
468
+ case "red-100":
469
+ case "rose-100":
470
+ case "sky-100":
471
+ case "slate-100":
472
+ case "stone-100":
473
+ case "taupe-100":
474
+ case "teal-100":
475
+ case "violet-100":
476
+ case "yellow-100":
477
+ case "zinc-100":
478
+ case "amber-200":
479
+ case "blue-200":
480
+ case "cyan-200":
481
+ case "emerald-200":
482
+ case "fuchsia-200":
483
+ case "gray-200":
484
+ case "green-200":
485
+ case "indigo-200":
486
+ case "lime-200":
487
+ case "mauve-200":
488
+ case "mist-200":
489
+ case "neutral-200":
490
+ case "olive-200":
491
+ case "orange-200":
492
+ case "pink-200":
493
+ case "purple-200":
494
+ case "red-200":
495
+ case "rose-200":
496
+ case "sky-200":
497
+ case "slate-200":
498
+ case "stone-200":
499
+ case "taupe-200":
500
+ case "teal-200":
501
+ case "violet-200":
502
+ case "yellow-200":
503
+ case "zinc-200":
504
+ case "amber-300":
505
+ case "blue-300":
506
+ case "cyan-300":
507
+ case "emerald-300":
508
+ case "fuchsia-300":
509
+ case "gray-300":
510
+ case "green-300":
511
+ case "indigo-300":
512
+ case "lime-300":
513
+ case "mauve-300":
514
+ case "mist-300":
515
+ case "neutral-300":
516
+ case "olive-300":
517
+ case "orange-300":
518
+ case "pink-300":
519
+ case "purple-300":
520
+ case "red-300":
521
+ case "rose-300":
522
+ case "sky-300":
523
+ case "slate-300":
524
+ case "stone-300":
525
+ case "taupe-300":
526
+ case "teal-300":
527
+ case "violet-300":
528
+ case "yellow-300":
529
+ case "zinc-300":
530
+ case "amber-400":
531
+ case "blue-400":
532
+ case "cyan-400":
533
+ case "emerald-400":
534
+ case "fuchsia-400":
535
+ case "gray-400":
536
+ case "green-400":
537
+ case "indigo-400":
538
+ case "lime-400":
539
+ case "mauve-400":
540
+ case "mist-400":
541
+ case "neutral-400":
542
+ case "olive-400":
543
+ case "orange-400":
544
+ case "pink-400":
545
+ case "purple-400":
546
+ case "red-400":
547
+ case "rose-400":
548
+ case "sky-400":
549
+ case "slate-400":
550
+ case "stone-400":
551
+ case "taupe-400":
552
+ case "teal-400":
553
+ case "violet-400":
554
+ case "yellow-400":
555
+ case "zinc-400": return asVariable ? "[--text-color:color-mix(in_oklch,var(--theme-color)_5%,var(--color-black))]" : "text-[color-mix(in_oklch,var(--theme-color)_5%,var(--color-black))]";
245
556
  case "amber":
246
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-amber-500)]");
247
- break;
248
557
  case "blue":
249
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-blue-500)]");
250
- break;
558
+ case "custom":
251
559
  case "cyan":
252
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-cyan-500)]");
253
- break;
254
560
  case "emerald":
255
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-emerald-500)]");
256
- break;
257
561
  case "fuchsia":
258
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
259
- break;
260
562
  case "gray":
261
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-gray-500)]");
262
- break;
263
563
  case "green":
264
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-green-500)]");
265
- break;
266
564
  case "indigo":
267
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-indigo-500)]");
268
- break;
269
565
  case "lime":
270
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-lime-500)]");
271
- break;
272
566
  case "mauve":
273
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-mauve-500)]");
274
- break;
275
567
  case "mist":
276
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-mist-500)]");
277
- break;
278
568
  case "neutral":
279
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-neutral-500)]");
280
- break;
281
569
  case "olive":
282
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-olive-500)]");
283
- break;
284
570
  case "orange":
285
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-orange-500)]");
286
- break;
287
571
  case "pink":
288
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-pink-500)]");
289
- break;
290
572
  case "purple":
291
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-purple-500)]");
292
- break;
293
573
  case "red":
294
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-red-500)]");
295
- break;
296
574
  case "rose":
297
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-rose-500)]");
298
- break;
299
575
  case "sky":
300
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-sky-500)]");
301
- break;
302
576
  case "slate":
303
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-slate-500)]");
304
- break;
305
577
  case "stone":
306
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-stone-500)]");
307
- break;
308
578
  case "taupe":
309
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-taupe-500)]");
310
- break;
311
579
  case "teal":
312
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-teal-500)]");
313
- break;
314
580
  case "violet":
315
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-violet-500)]");
316
- break;
317
581
  case "yellow":
318
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-yellow-500)]");
319
- break;
320
582
  case "zinc":
321
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-zinc-500)]");
322
- break;
323
- case "custom":
324
- if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.");
325
- fillCenterColorClasses = customTheme.themeColor ? twMerge(fillCenterColorClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
326
- break;
327
- default:
328
- fillCenterColorClasses = twMerge(fillCenterColorClasses, `[--theme-color:var(--base-theme-color)]`);
329
- break;
583
+ case "amber-500":
584
+ case "blue-500":
585
+ case "cyan-500":
586
+ case "emerald-500":
587
+ case "fuchsia-500":
588
+ case "gray-500":
589
+ case "green-500":
590
+ case "indigo-500":
591
+ case "lime-500":
592
+ case "mauve-500":
593
+ case "mist-500":
594
+ case "neutral-500":
595
+ case "olive-500":
596
+ case "orange-500":
597
+ case "pink-500":
598
+ case "purple-500":
599
+ case "red-500":
600
+ case "rose-500":
601
+ case "sky-500":
602
+ case "slate-500":
603
+ case "stone-500":
604
+ case "taupe-500":
605
+ case "teal-500":
606
+ case "violet-500":
607
+ case "yellow-500":
608
+ case "zinc-500":
609
+ case "amber-600":
610
+ case "blue-600":
611
+ case "cyan-600":
612
+ case "emerald-600":
613
+ case "fuchsia-600":
614
+ case "gray-600":
615
+ case "green-600":
616
+ case "indigo-600":
617
+ case "lime-600":
618
+ case "mauve-600":
619
+ case "mist-600":
620
+ case "neutral-600":
621
+ case "olive-600":
622
+ case "orange-600":
623
+ case "pink-600":
624
+ case "purple-600":
625
+ case "red-600":
626
+ case "rose-600":
627
+ case "sky-600":
628
+ case "slate-600":
629
+ case "stone-600":
630
+ case "taupe-600":
631
+ case "teal-600":
632
+ case "violet-600":
633
+ case "yellow-600":
634
+ case "zinc-600":
635
+ case "amber-700":
636
+ case "blue-700":
637
+ case "cyan-700":
638
+ case "emerald-700":
639
+ case "fuchsia-700":
640
+ case "gray-700":
641
+ case "green-700":
642
+ case "indigo-700":
643
+ case "lime-700":
644
+ case "mauve-700":
645
+ case "mist-700":
646
+ case "neutral-700":
647
+ case "olive-700":
648
+ case "orange-700":
649
+ case "pink-700":
650
+ case "purple-700":
651
+ case "red-700":
652
+ case "rose-700":
653
+ case "sky-700":
654
+ case "slate-700":
655
+ case "stone-700":
656
+ case "taupe-700":
657
+ case "teal-700":
658
+ case "violet-700":
659
+ case "yellow-700":
660
+ case "zinc-700":
661
+ case "amber-800":
662
+ case "blue-800":
663
+ case "cyan-800":
664
+ case "emerald-800":
665
+ case "fuchsia-800":
666
+ case "gray-800":
667
+ case "green-800":
668
+ case "indigo-800":
669
+ case "lime-800":
670
+ case "mauve-800":
671
+ case "mist-800":
672
+ case "neutral-800":
673
+ case "olive-800":
674
+ case "orange-800":
675
+ case "pink-800":
676
+ case "purple-800":
677
+ case "red-800":
678
+ case "rose-800":
679
+ case "sky-800":
680
+ case "slate-800":
681
+ case "stone-800":
682
+ case "taupe-800":
683
+ case "teal-800":
684
+ case "violet-800":
685
+ case "yellow-800":
686
+ case "zinc-800":
687
+ case "amber-900":
688
+ case "blue-900":
689
+ case "cyan-900":
690
+ case "emerald-900":
691
+ case "fuchsia-900":
692
+ case "gray-900":
693
+ case "green-900":
694
+ case "indigo-900":
695
+ case "lime-900":
696
+ case "mauve-900":
697
+ case "mist-900":
698
+ case "neutral-900":
699
+ case "olive-900":
700
+ case "orange-900":
701
+ case "pink-900":
702
+ case "purple-900":
703
+ case "red-900":
704
+ case "rose-900":
705
+ case "sky-900":
706
+ case "slate-900":
707
+ case "stone-900":
708
+ case "taupe-900":
709
+ case "teal-900":
710
+ case "violet-900":
711
+ case "yellow-900":
712
+ case "zinc-900":
713
+ case "amber-950":
714
+ case "blue-950":
715
+ case "cyan-950":
716
+ case "emerald-950":
717
+ case "fuchsia-950":
718
+ case "gray-950":
719
+ case "green-950":
720
+ case "indigo-950":
721
+ case "lime-950":
722
+ case "mauve-950":
723
+ case "mist-950":
724
+ case "neutral-950":
725
+ case "olive-950":
726
+ case "orange-950":
727
+ case "pink-950":
728
+ case "purple-950":
729
+ case "red-950":
730
+ case "rose-950":
731
+ case "sky-950":
732
+ case "slate-950":
733
+ case "stone-950":
734
+ case "taupe-950":
735
+ case "teal-950":
736
+ case "violet-950":
737
+ case "yellow-950":
738
+ case "zinc-950": return asVariable ? "[--text-color:color-mix(in_oklch,var(--theme-color)_5%,var(--color-white))]" : "text-[color-mix(in_oklch,var(--theme-color)_5%,var(--color-white))]";
739
+ default: return asVariable ? "[--text-color:var(--base-theme-color--foreground)]" : "text-[var(--base-theme-color--foreground)]";
330
740
  }
741
+ }
742
+
743
+ //#endregion
744
+ //#region src/components/link.tsx
745
+ function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }) {
746
+ const isExternal = `${href}`.startsWith("http"), hasHash = `${href}`.includes("#");
747
+ const handleClick = (e) => {
748
+ if (disabled) return e.preventDefault();
749
+ onClick?.(e);
750
+ setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
751
+ };
752
+ return /* @__PURE__ */ jsx(as || "a", {
753
+ ...props,
754
+ "aria-disabled": disabled,
755
+ className: twMerge("ease-exponential inline-block transition-transform duration-300 active:scale-95 pointer-fine:active:scale-95", className, disabled && "pointer-events-none"),
756
+ href,
757
+ target: target || (isExternal ? "_blank" : "_self"),
758
+ onClick: hasHash ? handleClick : onClick,
759
+ rel: rel !== void 0 ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch` : isExternal ? "nofollow noreferrer noopener" : "prefetch"
760
+ });
761
+ }
762
+ const baseClasses = "isolate after:absolute after:left-1/2 after:-z-10 after:-translate-x-1/2 after:duration-500 active:after:opacity-100 pointer-fine:active:after:opacity-100";
763
+ const lineStaticClasses = twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border after:border-current");
764
+ const lineClasses = twJoin(lineStaticClasses, "whitespace-nowrap after:transition-transform after:ease-exponential");
765
+ const scaleXClasses = "after:scale-x-0 active:after:scale-x-100 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:scale-x-100";
766
+ const scaleYClasses = "after:scale-y-0 active:after:scale-y-100 pointer-fine:hover:after:scale-y-100 pointer-fine:active:after:scale-y-100";
767
+ const lineNormalClasses = twJoin([
768
+ lineClasses,
769
+ scaleYClasses,
770
+ "after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0"
771
+ ]);
772
+ const lineLtrClasses = twJoin([
773
+ lineClasses,
774
+ scaleXClasses,
775
+ "after:origin-left"
776
+ ]);
777
+ const lineRtlClasses = twJoin([
778
+ lineClasses,
779
+ scaleXClasses,
780
+ "after:origin-right"
781
+ ]);
782
+ const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
783
+ const lineLiftClasses = twJoin([
784
+ lineClasses,
785
+ scaleYClasses,
786
+ "after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100 pointer-fine:active:after:translate-y-0 pointer-fine:active:after:scale-x-100"
787
+ ]);
788
+ const fillClasses = twJoin(baseClasses, "whitespace-nowrap transition-[transform,color] after:top-1/2 after:h-[calc(100%+.05rem)] after:w-[calc(100%+.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-(--text-color) pointer-fine:hover:text-(--text-color) pointer-fine:active:text-(--text-color)");
789
+ const getFillColorTransitionClasses = (theme, customTheme) => {
790
+ let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale,color] after:bg-(--theme-color)");
791
+ if (theme === "custom") {
792
+ if (!customTheme || customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.");
793
+ fillColorTransitionClasses = customTheme.themeColor ? twMerge(fillColorTransitionClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
794
+ } else fillColorTransitionClasses = twMerge(fillColorTransitionClasses, getThemeColor(theme));
795
+ return fillColorTransitionClasses;
796
+ };
797
+ const getFillCenterClasses = (theme, customTheme) => {
798
+ let fillCenterColorClasses = twJoin(fillClasses, "after:scale-x-50 after:scale-y-[.25] after:bg-(--theme-color)/0 after:transition-[scale,background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-(--theme-color) pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-(--theme-color) pointer-fine:active:after:scale-x-100 pointer-fine:active:after:scale-y-100 pointer-fine:active:after:bg-(--theme-color)");
799
+ if (theme === "custom") {
800
+ if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable on the ::after pseudo element. Otherwise, please use `customTheme.classes`.");
801
+ fillCenterColorClasses = customTheme.themeColor ? twMerge(fillCenterColorClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
802
+ } else fillCenterColorClasses = twMerge(fillCenterColorClasses, getThemeColor(theme));
331
803
  return fillCenterColorClasses;
332
804
  };
333
805
  const multilineBaseClasses = "bg-linear-to-r from-current to-current bg-no-repeat active:scale-95";
334
806
  const multilineLineStaticClasses = "underline";
335
807
  const multilineNormalClasses = "underline-offset-1 active:underline pointer-fine:hover:underline";
336
- const multilineLineClasses = twJoin(twJoin(multilineBaseClasses, "duration-500 ease-exponential"), "bg-position-[0%_100%] px-px pb-px transition-[background-size]");
808
+ const multilineLineClasses = twJoin(twJoin(multilineBaseClasses, "duration-500 ease-exponential"), "bg-position-[0%_100%] px-px pbe-px transition-[background-size]");
337
809
  const multilineXClasses = twJoin(multilineLineClasses, "bg-size-[0%_2px] focus-visible:bg-size-[100%_2px] active:bg-size-[100%_2px] pointer-fine:hover:bg-size-[100%_2px]");
338
810
  const multilineLineRtlClasses = twJoin([multilineXClasses, "bg-position-[100%_100%]"]);
339
811
  const multilineLineCenterClasses = twJoin([multilineXClasses, "bg-position-[50%_100%]"]);
340
812
  const multilineLineLiftClasses = twJoin(multilineLineClasses, "bg-size-[auto_0px] focus-visible:bg-size-[auto_2px] active:bg-size-[auto_2px] pointer-fine:hover:bg-size-[auto_2px]");
341
- const multilineFillBaseClasses = twJoin(multilineBaseClasses, "rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50");
342
- const getMultilineFillColorClasses = (theme = "blue", customTheme) => {
813
+ const multilineFillBaseClasses = twJoin(multilineBaseClasses, "rounded px-0.5 py-0.75 focus-visible:text-(--text-color) active:text-(--text-color) pointer-fine:hover:text-(--text-color)");
814
+ const getMultilineFillColorClasses = (theme, customTheme) => {
343
815
  let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color) to-(--theme-color) transition-[background-size,color]");
344
- switch (theme) {
345
- case "amber":
346
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-amber-500)]");
347
- break;
348
- case "blue":
349
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-blue-500)]");
350
- break;
351
- case "cyan":
352
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-cyan-500)]");
353
- break;
354
- case "emerald":
355
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-emerald-500)]");
356
- break;
357
- case "fuchsia":
358
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
359
- break;
360
- case "gray":
361
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-gray-500)]");
362
- break;
363
- case "green":
364
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-green-500)]");
365
- break;
366
- case "indigo":
367
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-indigo-500)]");
368
- break;
369
- case "lime":
370
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-lime-500)]");
371
- break;
372
- case "mauve":
373
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mauve-500)]");
374
- break;
375
- case "mist":
376
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mist-500)]");
377
- break;
378
- case "neutral":
379
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-neutral-500)]");
380
- break;
381
- case "olive":
382
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-olive-500)]");
383
- break;
384
- case "orange":
385
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-orange-500)]");
386
- break;
387
- case "pink":
388
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-pink-500)]");
389
- break;
390
- case "purple":
391
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-purple-500)]");
392
- break;
393
- case "red":
394
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-red-500)]");
395
- break;
396
- case "rose":
397
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-rose-500)]");
398
- break;
399
- case "sky":
400
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-sky-500)]");
401
- break;
402
- case "slate":
403
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-slate-500)]");
404
- break;
405
- case "stone":
406
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-stone-500)]");
407
- break;
408
- case "taupe":
409
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-taupe-500)]");
410
- break;
411
- case "teal":
412
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-teal-500)]");
413
- break;
414
- case "violet":
415
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-violet-500)]");
416
- break;
417
- case "yellow":
418
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-yellow-500)]");
419
- break;
420
- case "zinc":
421
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-zinc-500)]");
422
- break;
423
- case "custom":
424
- if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
425
- multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
426
- break;
427
- default:
428
- multilineFillColorClasses = twMerge(multilineFillColorClasses, `[--theme-color:var(--base-theme-color)]`);
429
- break;
430
- }
816
+ if (theme === "custom") {
817
+ if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
818
+ multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
819
+ } else multilineFillColorClasses = twMerge(multilineFillColorClasses, getThemeColor(theme));
431
820
  return multilineFillColorClasses;
432
821
  };
433
- const getMultilineFillClasses = (theme = "blue", customTheme) => {
822
+ const getMultilineFillClasses = (theme, customTheme) => {
434
823
  let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color)/0 to-(--theme-color)/0 bg-size-[50%_0px] bg-position-[50%_50%] transition-[background-size,background-image,color] focus-visible:from-(--theme-color) focus-visible:to-(--theme-color) focus-visible:bg-size-[100%_100%] active:from-(--theme-color) active:to-(--theme-color) active:bg-size-[100%_100%] contrast-more:from-(--theme-color)/0 pointer-fine:hover:from-(--theme-color) pointer-fine:hover:to-(--theme-color) pointer-fine:hover:bg-size-[100%_100%]");
435
- switch (theme) {
436
- case "amber":
437
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-amber-500)]");
438
- break;
439
- case "blue":
440
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-blue-500)]");
441
- break;
442
- case "cyan":
443
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-cyan-500)]");
444
- break;
445
- case "emerald":
446
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-emerald-500)]");
447
- break;
448
- case "fuchsia":
449
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
450
- break;
451
- case "gray":
452
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-gray-500)]");
453
- break;
454
- case "green":
455
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-green-500)]");
456
- break;
457
- case "indigo":
458
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-indigo-500)]");
459
- break;
460
- case "lime":
461
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-lime-500)]");
462
- break;
463
- case "mauve":
464
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mauve-500)]");
465
- break;
466
- case "mist":
467
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mist-500)]");
468
- break;
469
- case "neutral":
470
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-neutral-500)]");
471
- break;
472
- case "olive":
473
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-olive-500)]");
474
- break;
475
- case "orange":
476
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-orange-500)]");
477
- break;
478
- case "pink":
479
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-pink-500)]");
480
- break;
481
- case "purple":
482
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-purple-500)]");
483
- break;
484
- case "red":
485
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-red-500)]");
486
- break;
487
- case "rose":
488
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-rose-500)]");
489
- break;
490
- case "sky":
491
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-sky-500)]");
492
- break;
493
- case "slate":
494
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-slate-500)]");
495
- break;
496
- case "stone":
497
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-stone-500)]");
498
- break;
499
- case "taupe":
500
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-taupe-500)]");
501
- break;
502
- case "teal":
503
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-teal-500)]");
504
- break;
505
- case "violet":
506
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-violet-500)]");
507
- break;
508
- case "yellow":
509
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-yellow-500)]");
510
- break;
511
- case "zinc":
512
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-zinc-500)]");
513
- break;
514
- case "custom":
515
- if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
516
- multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
517
- break;
518
- default:
519
- multilineFillColorClasses = twMerge(multilineFillColorClasses, `[--theme-color:var(--base-theme-color)]`);
520
- break;
521
- }
824
+ if (theme === "custom") {
825
+ if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
826
+ multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
827
+ } else multilineFillColorClasses = twMerge(multilineFillColorClasses, getThemeColor(theme));
522
828
  return multilineFillColorClasses;
523
829
  };
524
- const getMultilineFillLiftClasses = (theme = "blue", customTheme) => {
830
+ const getMultilineFillLiftClasses = (theme, customTheme) => {
525
831
  return twJoin(getMultilineFillColorClasses(theme, customTheme), "bg-size-[auto_0px] bg-position-[50%_100%] focus-visible:bg-size-[auto_100%] active:bg-size-[auto_100%] pointer-fine:hover:bg-size-[auto_100%]");
526
832
  };
527
- const getMultilineFillXClasses = (theme = "blue", customTheme) => {
833
+ const getMultilineFillXClasses = (theme, customTheme) => {
528
834
  return twJoin(getMultilineFillColorClasses(theme, customTheme), "bg-size-[0%_100%] focus-visible:bg-size-[100%_100%] active:bg-size-[100%_100%] pointer-fine:hover:bg-size-[100%_100%]");
529
835
  };
530
- const getMultilineFillRtlClasses = (theme = "blue", customTheme) => {
836
+ const getMultilineFillRtlClasses = (theme, customTheme) => {
531
837
  return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-position-[100%_auto]");
532
838
  };
533
- const getMultilineFillCenterClasses = (theme = "blue", customTheme) => {
839
+ const getMultilineFillCenterClasses = (theme, customTheme) => {
534
840
  return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-position-[50%_auto]");
535
841
  };
536
842
  function getLinkClasses({ customTheme, theme, type }) {
@@ -540,19 +846,22 @@ function getLinkClasses({ customTheme, theme, type }) {
540
846
  case "rtl": return lineRtlClasses;
541
847
  case "center": return lineCenterClasses;
542
848
  case "lift": return lineLiftClasses;
543
- case "fill": return getFillCenterClasses(theme, customTheme);
849
+ case "fill": return twJoin([getFillCenterClasses(theme, customTheme), getTextColor(theme, true)]);
544
850
  case "fill-ltr": return twJoin([
545
851
  getFillColorTransitionClasses(theme, customTheme),
852
+ getTextColor(theme, true),
546
853
  scaleXClasses,
547
854
  "after:origin-left"
548
855
  ]);
549
856
  case "fill-rtl": return twJoin([
550
857
  getFillColorTransitionClasses(theme, customTheme),
858
+ getTextColor(theme, true),
551
859
  scaleXClasses,
552
860
  "after:origin-right"
553
861
  ]);
554
862
  case "fill-lift": return twJoin([
555
863
  getFillColorTransitionClasses(theme, customTheme),
864
+ getTextColor(theme, true),
556
865
  scaleYClasses,
557
866
  "after:origin-bottom"
558
867
  ]);
@@ -562,11 +871,11 @@ function getLinkClasses({ customTheme, theme, type }) {
562
871
  case "multiline-rtl": return multilineLineRtlClasses;
563
872
  case "multiline-center": return multilineLineCenterClasses;
564
873
  case "multiline-lift": return multilineLineLiftClasses;
565
- case "multiline-fill": return getMultilineFillClasses(theme, customTheme);
566
- case "multiline-fill-ltr": return getMultilineFillXClasses(theme, customTheme);
567
- case "multiline-fill-rtl": return getMultilineFillRtlClasses(theme, customTheme);
568
- case "multiline-fill-center": return getMultilineFillCenterClasses(theme, customTheme);
569
- case "multiline-fill-lift": return getMultilineFillLiftClasses(theme, customTheme);
874
+ case "multiline-fill": return twJoin([getMultilineFillClasses(theme, customTheme), getTextColor(theme, true)]);
875
+ case "multiline-fill-ltr": return twJoin([getMultilineFillXClasses(theme, customTheme), getTextColor(theme, true)]);
876
+ case "multiline-fill-rtl": return twJoin([getMultilineFillRtlClasses(theme, customTheme), getTextColor(theme, true)]);
877
+ case "multiline-fill-center": return twJoin([getMultilineFillCenterClasses(theme, customTheme), getTextColor(theme, true)]);
878
+ case "multiline-fill-lift": return twJoin([getMultilineFillLiftClasses(theme, customTheme), getTextColor(theme, true)]);
570
879
  default: return lineNormalClasses;
571
880
  }
572
881
  }
@@ -640,38 +949,11 @@ function Button({ className, customTheme, gradient = false, padding = "md", roun
640
949
  }
641
950
  };
642
951
  const getThemeColorVariable = () => {
643
- switch (theme) {
644
- case "amber": return "text-white [--theme-color:var(--color-amber-500)]";
645
- case "blue": return "text-white [--theme-color:var(--color-blue-500)]";
646
- case "cyan": return "text-white [--theme-color:var(--color-cyan-500)]";
647
- case "emerald": return "text-white [--theme-color:var(--color-emerald-500)]";
648
- case "fuchsia": return "text-white [--theme-color:var(--color-fuchsia-500)]";
649
- case "gray": return "text-white [--theme-color:var(--color-gray-500)]";
650
- case "green": return "text-white [--theme-color:var(--color-green-500)]";
651
- case "indigo": return "text-white [--theme-color:var(--color-indigo-500)]";
652
- case "lime": return "text-white [--theme-color:var(--color-lime-500)]";
653
- case "mauve": return "text-white [--theme-color:var(--color-mauve-500)]";
654
- case "mist": return "text-white [--theme-color:var(--color-mist-500)]";
655
- case "neutral": return "text-white [--theme-color:var(--color-neutral-500)]";
656
- case "olive": return "text-white [--theme-color:var(--color-olive-500)]";
657
- case "orange": return "text-white [--theme-color:var(--color-orange-500)]";
658
- case "pink": return "text-white [--theme-color:var(--color-pink-500)]";
659
- case "purple": return "text-white [--theme-color:var(--color-purple-500)]";
660
- case "red": return "text-white [--theme-color:var(--color-red-500)]";
661
- case "rose": return "text-white [--theme-color:var(--color-rose-500)]";
662
- case "sky": return "text-white [--theme-color:var(--color-sky-500)]";
663
- case "slate": return "text-white [--theme-color:var(--color-slate-500)]";
664
- case "stone": return "text-white [--theme-color:var(--color-stone-500)]";
665
- case "taupe": return "text-white [--theme-color:var(--color-taupe-500)]";
666
- case "teal": return "text-white [--theme-color:var(--color-teal-500)]";
667
- case "violet": return "text-white [--theme-color:var(--color-violet-500)]";
668
- case "yellow": return "text-white [--theme-color:var(--color-yellow-500)]";
669
- case "zinc": return "text-white [--theme-color:var(--color-zinc-500)]";
670
- case "custom":
671
- if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
672
- return customTheme.themeColor || customTheme.classes || "";
673
- default: return "text-(--base-theme-color--foreground) [--theme-color:var(--base-theme-color)]";
952
+ if (theme === "custom") {
953
+ if (customTheme && customTheme.themeColor && !customTheme.themeColor.includes("[--theme-color:")) throw new Error("`customTheme.themeColor` must modify the `--theme-color` variable. Otherwise, please use `customTheme.classes`.");
954
+ return customTheme.themeColor || customTheme.classes || "";
674
955
  }
956
+ return twJoin([getTextColor(theme), getThemeColor(theme)]);
675
957
  };
676
958
  const buttonClasses = twMerge([
677
959
  "block w-fit min-w-fit corner-super-1.5 text-center font-semibold shadow-lg duration-300 ease-exponential active:scale-99 data-focus:scale-101 pointer-fine:hover:scale-101 pointer-fine:hover:active:scale-99 pointer-fine:active:scale-99",
@@ -3794,7 +4076,7 @@ function DetailsBody({ children, className, ...props }) {
3794
4076
  className: twMerge("grid-rows-1fr transition-rows ease-exponential data-closed:grid-rows-0fr grid duration-500", className),
3795
4077
  transition: true,
3796
4078
  children: (bag) => /* @__PURE__ */ jsx("div", {
3797
- className: "overflow-y-hidden px-2 pt-3 pb-1",
4079
+ className: "overflow-y-hidden px-2 pbs-3 pbe-1",
3798
4080
  children: typeof children === "function" ? children(bag) : children
3799
4081
  })
3800
4082
  });
@@ -3950,12 +4232,12 @@ function Heading({ as = "h2", children, customize, className, id, ref, ...props
3950
4232
  const targetableID = id || getTextFromChildren(children).replace(/\s+/g, "-").toLowerCase();
3951
4233
  const getBaseClasses = () => {
3952
4234
  switch (as) {
3953
- case "h1": return twMerge("pb-2.5 text-6xl font-black last:pb-0", customize?.h1);
3954
- case "h3": return twMerge("pb-2 text-4xl font-extralight last:pb-0", customize?.h3);
3955
- case "h4": return twMerge("pb-2 text-3xl font-medium last:pb-0", customize?.h4);
3956
- case "h5": return twMerge("pb-1.5 text-2xl font-semibold last:pb-0", customize?.h5);
3957
- case "h6": return twMerge("pb-1 text-xl font-bold last:pb-0", customize?.h6);
3958
- default: return twMerge("pb-2.5 text-5xl font-extrabold last:pb-0", customize?.h2);
4235
+ case "h1": return twMerge("pbe-2.5 text-6xl font-black last:pbe-0", customize?.h1);
4236
+ case "h3": return twMerge("pbe-2 text-4xl font-extralight last:pbe-0", customize?.h3);
4237
+ case "h4": return twMerge("pbe-2 text-3xl font-medium last:pbe-0", customize?.h4);
4238
+ case "h5": return twMerge("pbe-1.5 text-2xl font-semibold last:pbe-0", customize?.h5);
4239
+ case "h6": return twMerge("pbe-1 text-xl font-bold last:pbe-0", customize?.h6);
4240
+ default: return twMerge("pbe-2.5 text-5xl font-extrabold last:pbe-0", customize?.h2);
3959
4241
  }
3960
4242
  };
3961
4243
  const baseClasses = getBaseClasses();
@@ -5821,7 +6103,7 @@ function HumanVerification({ children = "Verify", className }) {
5821
6103
  }),
5822
6104
  /* @__PURE__ */ jsxs("div", {
5823
6105
  id: "human-verification-instructions",
5824
- className: "pt-1 text-center text-xs",
6106
+ className: "pbs-1 text-center text-xs",
5825
6107
  children: [
5826
6108
  "Human verification challenge.",
5827
6109
  " ",
@@ -6096,7 +6378,7 @@ function ModalDialog(props) {
6096
6378
  rounded: "full",
6097
6379
  className: "group/button fixed top-4 right-4 size-7 overflow-x-hidden transition-[scale,width,filter] pointer-fine:hover:w-20",
6098
6380
  children: /* @__PURE__ */ jsxs("div", {
6099
- className: "ease-exponential absolute top-1 right-1 flex items-center gap-1 pt-px transition-transform duration-300 pointer-fine:group-hover/button:-translate-x-0.5",
6381
+ className: "ease-exponential absolute top-1 right-1 flex items-center gap-1 pbs-px transition-transform duration-300 pointer-fine:group-hover/button:-translate-x-0.5",
6100
6382
  children: [/* @__PURE__ */ jsxs("span", {
6101
6383
  className: "block text-xs leading-none uppercase",
6102
6384
  children: ["Close", /* @__PURE__ */ jsx("span", {
@@ -6413,6 +6695,58 @@ function Select({ buttonProps, children, className, description, descriptionProp
6413
6695
  });
6414
6696
  }
6415
6697
 
6698
+ //#endregion
6699
+ //#region src/symbols/circle.fill.tsx
6700
+ function CircleFill({ weight = "regular", ...props }) {
6701
+ switch (weight) {
6702
+ case "ultralight": return /* @__PURE__ */ jsx("svg", {
6703
+ viewBox: "6.83594 -72.4785 74.45 74.45",
6704
+ ...props,
6705
+ children: /* @__PURE__ */ jsx("path", { d: "M44.0606 1.97072C64.521 1.97072 81.2886-14.7969 81.2886-35.2539C81.2886-55.7109 64.521-72.4785 44.0606-72.4785C23.6035-72.4785 6.83594-55.7109 6.83594-35.2539C6.83594-14.7969 23.6035 1.97072 44.0606 1.97072Z" })
6706
+ });
6707
+ case "thin": return /* @__PURE__ */ jsx("svg", {
6708
+ viewBox: "6.83594 -72.9707 75.45 75.43",
6709
+ ...props,
6710
+ children: /* @__PURE__ */ jsx("path", { d: "M44.5527 2.4629C65.3106 2.4629 82.2832-14.5098 82.2832-35.2539C82.2832-55.9981 65.3106-72.9707 44.5527-72.9707C23.8086-72.9707 6.83594-55.9981 6.83594-35.2539C6.83594-14.5098 23.8086 2.4629 44.5527 2.4629Z" })
6711
+ });
6712
+ case "light": return /* @__PURE__ */ jsx("svg", {
6713
+ viewBox: "6.83594 -73.9316 77.39 77.36",
6714
+ ...props,
6715
+ children: /* @__PURE__ */ jsx("path", { d: "M45.5137 3.42383C66.8521 3.42383 84.2251-13.9492 84.2251-35.2539C84.2251-56.5586 66.8521-73.9316 45.5137-73.9316C24.209-73.9316 6.83594-56.5586 6.83594-35.2539C6.83594-13.9492 24.209 3.42383 45.5137 3.42383Z" })
6716
+ });
6717
+ case "regular": return /* @__PURE__ */ jsx("svg", {
6718
+ viewBox: "6.83594 -74.6582 78.86 78.81",
6719
+ ...props,
6720
+ children: /* @__PURE__ */ jsx("path", { d: "M46.2402 4.15039C68.0176 4.15039 85.6934-13.5254 85.6934-35.2539C85.6934-56.9824 68.0176-74.6582 46.2402-74.6582C24.5117-74.6582 6.83594-56.9824 6.83594-35.2539C6.83594-13.5254 24.5117 4.15039 46.2402 4.15039Z" })
6721
+ });
6722
+ case "medium": return /* @__PURE__ */ jsx("svg", {
6723
+ viewBox: "6.83594 -75.124 79.78 79.74",
6724
+ ...props,
6725
+ children: /* @__PURE__ */ jsx("path", { d: "M46.7061 4.61621C68.7383 4.61621 86.6162-13.2617 86.6162-35.2539C86.6162-57.2461 68.7383-75.124 46.7061-75.124C24.7139-75.124 6.83594-57.2461 6.83594-35.2539C6.83594-13.2617 24.7139 4.61621 46.7061 4.61621Z" })
6726
+ });
6727
+ case "semibold": return /* @__PURE__ */ jsx("svg", {
6728
+ viewBox: "6.83594 -75.4812 80.49 80.45",
6729
+ ...props,
6730
+ children: /* @__PURE__ */ jsx("path", { d: "M47.0632 4.97334C69.2908 4.97334 87.3237-13.0596 87.3237-35.2539C87.3237-57.4482 69.2908-75.4812 47.0632-75.4812C24.8688-75.4812 6.83594-57.4482 6.83594-35.2539C6.83594-13.0596 24.8688 4.97334 47.0632 4.97334Z" })
6731
+ });
6732
+ case "bold": return /* @__PURE__ */ jsx("svg", {
6733
+ viewBox: "6.83594 -75.9521 81.42 81.4",
6734
+ ...props,
6735
+ children: /* @__PURE__ */ jsx("path", { d: "M47.5342 5.44434C70.0195 5.44434 88.2568-12.793 88.2568-35.2539C88.2568-57.7148 70.0195-75.9521 47.5342-75.9521C25.0732-75.9521 6.83594-57.7148 6.83594-35.2539C6.83594-12.793 25.0732 5.44434 47.5342 5.44434Z" })
6736
+ });
6737
+ case "heavy": return /* @__PURE__ */ jsx("svg", {
6738
+ viewBox: "6.83594 -76.6353 82.77 82.76",
6739
+ ...props,
6740
+ children: /* @__PURE__ */ jsx("path", { d: "M48.2173 6.12748C71.0765 6.12748 89.6102-12.4063 89.6102-35.2539C89.6102-58.1015 71.0765-76.6353 48.2173-76.6353C25.3697-76.6353 6.83594-58.1015 6.83594-35.2539C6.83594-12.4063 25.3697 6.12748 48.2173 6.12748Z" })
6741
+ });
6742
+ case "black": return /* @__PURE__ */ jsx("svg", {
6743
+ viewBox: "6.83594 -77.2461 83.98 83.98",
6744
+ ...props,
6745
+ children: /* @__PURE__ */ jsx("path", { d: "M48.8281 6.73828C72.0215 6.73828 90.8203-12.0605 90.8203-35.2539C90.8203-58.4473 72.0215-77.2461 48.8281-77.2461C25.6348-77.2461 6.83594-58.4473 6.83594-35.2539C6.83594-12.0605 25.6348 6.73828 48.8281 6.73828Z" })
6746
+ });
6747
+ }
6748
+ }
6749
+
6416
6750
  //#endregion
6417
6751
  //#region src/components/submit-button.tsx
6418
6752
  /**
@@ -6440,28 +6774,33 @@ function SubmitButton({ children, className, customTheme, error, formStatus = "r
6440
6774
  case "incomplete": return incomplete || "Complete Form";
6441
6775
  case "loading": return loading || /* @__PURE__ */ jsxs(Fragment, { children: [
6442
6776
  /* @__PURE__ */ jsx("span", {
6443
- className: "animate-wave animation-delay-300 inline-block",
6444
- children: "•"
6777
+ className: "sr-only",
6778
+ children: "Submitting…"
6445
6779
  }),
6446
- /* @__PURE__ */ jsx("span", {
6447
- className: "animate-wave animation-delay-150 inline-block",
6448
- children: "•"
6780
+ "\xA0",
6781
+ /* @__PURE__ */ jsx(CircleFill, {
6782
+ className: "animate-wave size-2",
6783
+ weight: "black"
6449
6784
  }),
6450
- /* @__PURE__ */ jsx("span", {
6451
- className: "animate-wave inline-block",
6452
- children: "•"
6453
- })
6454
- ] });
6455
- case "error": return /* @__PURE__ */ jsxs(Fragment, { children: [
6456
- error || "Error",
6457
- " ",
6458
- /* @__PURE__ */ jsx("span", {
6459
- className: "absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl",
6460
- children: "×"
6461
- })
6785
+ /* @__PURE__ */ jsx(CircleFill, {
6786
+ className: "animate-wave animation-delay-100 size-2",
6787
+ weight: "black"
6788
+ }),
6789
+ /* @__PURE__ */ jsx(CircleFill, {
6790
+ className: "animate-wave animation-delay-200 size-2",
6791
+ weight: "black"
6792
+ }),
6793
+ "\xA0"
6462
6794
  ] });
6795
+ case "error": return error || /* @__PURE__ */ jsxs(Fragment, { children: ["Error", /* @__PURE__ */ jsx(Xmark, {
6796
+ className: "size-3.5",
6797
+ weight: "semibold"
6798
+ })] });
6463
6799
  case "readonly": return readonly || children;
6464
- case "success": return success || "Successfully Submitted";
6800
+ case "success": return success || /* @__PURE__ */ jsxs(Fragment, { children: ["Successfully Submitted", /* @__PURE__ */ jsx(Checkmark, {
6801
+ className: "size-3.5",
6802
+ weight: "semibold"
6803
+ })] });
6465
6804
  default: return children || "Submit";
6466
6805
  }
6467
6806
  };