@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/index.js CHANGED
@@ -200,434 +200,740 @@ function extendMadoTailwindMerge(configExtension) {
200
200
  }
201
201
 
202
202
  //#endregion
203
- //#region src/components/link.tsx
204
- function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }) {
205
- const isExternal = `${href}`.startsWith("http"), hasHash = `${href}`.includes("#");
206
- const handleClick = (e) => {
207
- if (disabled) return e.preventDefault();
208
- onClick?.(e);
209
- setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
210
- };
211
- return /* @__PURE__ */ jsx(as || "a", {
212
- ...props,
213
- "aria-disabled": disabled,
214
- className: twMerge("ease-exponential inline-block transition-transform duration-300 active:scale-95 pointer-fine:active:scale-95", className, disabled && "pointer-events-none"),
215
- href,
216
- target: target || (isExternal ? "_blank" : "_self"),
217
- onClick: hasHash ? handleClick : onClick,
218
- rel: rel !== void 0 ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch` : isExternal ? "nofollow noreferrer noopener" : "prefetch"
219
- });
220
- }
221
- 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";
222
- const lineStaticClasses = twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border after:border-current");
223
- const lineClasses = twJoin(lineStaticClasses, "whitespace-nowrap after:transition-transform after:ease-exponential");
224
- 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";
225
- 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";
226
- const lineNormalClasses = twJoin([
227
- lineClasses,
228
- scaleYClasses,
229
- "after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0"
230
- ]);
231
- const lineLtrClasses = twJoin([
232
- lineClasses,
233
- scaleXClasses,
234
- "after:origin-left"
235
- ]);
236
- const lineRtlClasses = twJoin([
237
- lineClasses,
238
- scaleXClasses,
239
- "after:origin-right"
240
- ]);
241
- const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
242
- const lineLiftClasses = twJoin([
243
- lineClasses,
244
- scaleYClasses,
245
- "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"
246
- ]);
247
- 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)");
248
- const getFillColorTransitionClasses = (theme = "blue", customTheme) => {
249
- let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale,color] after:bg-(--theme-color)");
203
+ //#region src/utils/get-theme-color.ts
204
+ function getThemeColor(theme) {
250
205
  switch (theme) {
206
+ case "amber-50": return "[--theme-color:var(--color-amber-50)]";
207
+ case "amber-100": return "[--theme-color:var(--color-amber-100)]";
208
+ case "amber-200": return "[--theme-color:var(--color-amber-200)]";
209
+ case "amber-300": return "[--theme-color:var(--color-amber-300)]";
210
+ case "amber-400": return "[--theme-color:var(--color-amber-400)]";
251
211
  case "amber":
252
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-amber-500)]");
253
- break;
212
+ case "amber-500": return "[--theme-color:var(--color-amber-500)]";
213
+ case "amber-600": return "[--theme-color:var(--color-amber-600)]";
214
+ case "amber-700": return "[--theme-color:var(--color-amber-700)]";
215
+ case "amber-800": return "[--theme-color:var(--color-amber-800)]";
216
+ case "amber-900": return "[--theme-color:var(--color-amber-900)]";
217
+ case "amber-950": return "[--theme-color:var(--color-amber-950)]";
218
+ case "blue-50": return "[--theme-color:var(--color-blue-50)]";
219
+ case "blue-100": return "[--theme-color:var(--color-blue-100)]";
220
+ case "blue-200": return "[--theme-color:var(--color-blue-200)]";
221
+ case "blue-300": return "[--theme-color:var(--color-blue-300)]";
222
+ case "blue-400": return "[--theme-color:var(--color-blue-400)]";
254
223
  case "blue":
255
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-blue-500)]");
256
- break;
224
+ case "blue-500": return "[--theme-color:var(--color-blue-500)]";
225
+ case "blue-600": return "[--theme-color:var(--color-blue-600)]";
226
+ case "blue-700": return "[--theme-color:var(--color-blue-700)]";
227
+ case "blue-800": return "[--theme-color:var(--color-blue-800)]";
228
+ case "blue-900": return "[--theme-color:var(--color-blue-900)]";
229
+ case "blue-950": return "[--theme-color:var(--color-blue-950)]";
230
+ case "cyan-50": return "[--theme-color:var(--color-cyan-50)]";
231
+ case "cyan-100": return "[--theme-color:var(--color-cyan-100)]";
232
+ case "cyan-200": return "[--theme-color:var(--color-cyan-200)]";
233
+ case "cyan-300": return "[--theme-color:var(--color-cyan-300)]";
234
+ case "cyan-400": return "[--theme-color:var(--color-cyan-400)]";
257
235
  case "cyan":
258
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-cyan-500)]");
259
- break;
236
+ case "cyan-500": return "[--theme-color:var(--color-cyan-500)]";
237
+ case "cyan-600": return "[--theme-color:var(--color-cyan-600)]";
238
+ case "cyan-700": return "[--theme-color:var(--color-cyan-700)]";
239
+ case "cyan-800": return "[--theme-color:var(--color-cyan-800)]";
240
+ case "cyan-900": return "[--theme-color:var(--color-cyan-900)]";
241
+ case "cyan-950": return "[--theme-color:var(--color-cyan-950)]";
242
+ case "emerald-50": return "[--theme-color:var(--color-emerald-50)]";
243
+ case "emerald-100": return "[--theme-color:var(--color-emerald-100)]";
244
+ case "emerald-200": return "[--theme-color:var(--color-emerald-200)]";
245
+ case "emerald-300": return "[--theme-color:var(--color-emerald-300)]";
246
+ case "emerald-400": return "[--theme-color:var(--color-emerald-400)]";
260
247
  case "emerald":
261
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-emerald-500)]");
262
- break;
248
+ case "emerald-500": return "[--theme-color:var(--color-emerald-500)]";
249
+ case "emerald-600": return "[--theme-color:var(--color-emerald-600)]";
250
+ case "emerald-700": return "[--theme-color:var(--color-emerald-700)]";
251
+ case "emerald-800": return "[--theme-color:var(--color-emerald-800)]";
252
+ case "emerald-900": return "[--theme-color:var(--color-emerald-900)]";
253
+ case "emerald-950": return "[--theme-color:var(--color-emerald-950)]";
254
+ case "fuchsia-50": return "[--theme-color:var(--color-fuchsia-50)]";
255
+ case "fuchsia-100": return "[--theme-color:var(--color-fuchsia-100)]";
256
+ case "fuchsia-200": return "[--theme-color:var(--color-fuchsia-200)]";
257
+ case "fuchsia-300": return "[--theme-color:var(--color-fuchsia-300)]";
258
+ case "fuchsia-400": return "[--theme-color:var(--color-fuchsia-400)]";
263
259
  case "fuchsia":
264
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-fuchsia-500)]");
265
- break;
260
+ case "fuchsia-500": return "[--theme-color:var(--color-fuchsia-500)]";
261
+ case "fuchsia-600": return "[--theme-color:var(--color-fuchsia-600)]";
262
+ case "fuchsia-700": return "[--theme-color:var(--color-fuchsia-700)]";
263
+ case "fuchsia-800": return "[--theme-color:var(--color-fuchsia-800)]";
264
+ case "fuchsia-900": return "[--theme-color:var(--color-fuchsia-900)]";
265
+ case "fuchsia-950": return "[--theme-color:var(--color-fuchsia-950)]";
266
+ case "gray-50": return "[--theme-color:var(--color-gray-50)]";
267
+ case "gray-100": return "[--theme-color:var(--color-gray-100)]";
268
+ case "gray-200": return "[--theme-color:var(--color-gray-200)]";
269
+ case "gray-300": return "[--theme-color:var(--color-gray-300)]";
270
+ case "gray-400": return "[--theme-color:var(--color-gray-400)]";
266
271
  case "gray":
267
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-gray-500)]");
268
- break;
272
+ case "gray-500": return "[--theme-color:var(--color-gray-500)]";
273
+ case "gray-600": return "[--theme-color:var(--color-gray-600)]";
274
+ case "gray-700": return "[--theme-color:var(--color-gray-700)]";
275
+ case "gray-800": return "[--theme-color:var(--color-gray-800)]";
276
+ case "gray-900": return "[--theme-color:var(--color-gray-900)]";
277
+ case "gray-950": return "[--theme-color:var(--color-gray-950)]";
278
+ case "green-50": return "[--theme-color:var(--color-green-50)]";
279
+ case "green-100": return "[--theme-color:var(--color-green-100)]";
280
+ case "green-200": return "[--theme-color:var(--color-green-200)]";
281
+ case "green-300": return "[--theme-color:var(--color-green-300)]";
282
+ case "green-400": return "[--theme-color:var(--color-green-400)]";
269
283
  case "green":
270
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-green-500)]");
271
- break;
284
+ case "green-500": return "[--theme-color:var(--color-green-500)]";
285
+ case "green-600": return "[--theme-color:var(--color-green-600)]";
286
+ case "green-700": return "[--theme-color:var(--color-green-700)]";
287
+ case "green-800": return "[--theme-color:var(--color-green-800)]";
288
+ case "green-900": return "[--theme-color:var(--color-green-900)]";
289
+ case "green-950": return "[--theme-color:var(--color-green-950)]";
290
+ case "indigo-50": return "[--theme-color:var(--color-indigo-50)]";
291
+ case "indigo-100": return "[--theme-color:var(--color-indigo-100)]";
292
+ case "indigo-200": return "[--theme-color:var(--color-indigo-200)]";
293
+ case "indigo-300": return "[--theme-color:var(--color-indigo-300)]";
294
+ case "indigo-400": return "[--theme-color:var(--color-indigo-400)]";
272
295
  case "indigo":
273
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-indigo-500)]");
274
- break;
296
+ case "indigo-500": return "[--theme-color:var(--color-indigo-500)]";
297
+ case "indigo-600": return "[--theme-color:var(--color-indigo-600)]";
298
+ case "indigo-700": return "[--theme-color:var(--color-indigo-700)]";
299
+ case "indigo-800": return "[--theme-color:var(--color-indigo-800)]";
300
+ case "indigo-900": return "[--theme-color:var(--color-indigo-900)]";
301
+ case "indigo-950": return "[--theme-color:var(--color-indigo-950)]";
302
+ case "lime-50": return "[--theme-color:var(--color-lime-50)]";
303
+ case "lime-100": return "[--theme-color:var(--color-lime-100)]";
304
+ case "lime-200": return "[--theme-color:var(--color-lime-200)]";
305
+ case "lime-300": return "[--theme-color:var(--color-lime-300)]";
306
+ case "lime-400": return "[--theme-color:var(--color-lime-400)]";
275
307
  case "lime":
276
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-lime-500)]");
277
- break;
308
+ case "lime-500": return "[--theme-color:var(--color-lime-500)]";
309
+ case "lime-600": return "[--theme-color:var(--color-lime-600)]";
310
+ case "lime-700": return "[--theme-color:var(--color-lime-700)]";
311
+ case "lime-800": return "[--theme-color:var(--color-lime-800)]";
312
+ case "lime-900": return "[--theme-color:var(--color-lime-900)]";
313
+ case "lime-950": return "[--theme-color:var(--color-lime-950)]";
314
+ case "mauve-50": return "[--theme-color:var(--color-mauve-50)]";
315
+ case "mauve-100": return "[--theme-color:var(--color-mauve-100)]";
316
+ case "mauve-200": return "[--theme-color:var(--color-mauve-200)]";
317
+ case "mauve-300": return "[--theme-color:var(--color-mauve-300)]";
318
+ case "mauve-400": return "[--theme-color:var(--color-mauve-400)]";
278
319
  case "mauve":
279
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-mauve-500)]");
280
- break;
320
+ case "mauve-500": return "[--theme-color:var(--color-mauve-500)]";
321
+ case "mauve-600": return "[--theme-color:var(--color-mauve-600)]";
322
+ case "mauve-700": return "[--theme-color:var(--color-mauve-700)]";
323
+ case "mauve-800": return "[--theme-color:var(--color-mauve-800)]";
324
+ case "mauve-900": return "[--theme-color:var(--color-mauve-900)]";
325
+ case "mauve-950": return "[--theme-color:var(--color-mauve-950)]";
326
+ case "mist-50": return "[--theme-color:var(--color-mist-50)]";
327
+ case "mist-100": return "[--theme-color:var(--color-mist-100)]";
328
+ case "mist-200": return "[--theme-color:var(--color-mist-200)]";
329
+ case "mist-300": return "[--theme-color:var(--color-mist-300)]";
330
+ case "mist-400": return "[--theme-color:var(--color-mist-400)]";
281
331
  case "mist":
282
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-mist-500)]");
283
- break;
332
+ case "mist-500": return "[--theme-color:var(--color-mist-500)]";
333
+ case "mist-600": return "[--theme-color:var(--color-mist-600)]";
334
+ case "mist-700": return "[--theme-color:var(--color-mist-700)]";
335
+ case "mist-800": return "[--theme-color:var(--color-mist-800)]";
336
+ case "mist-900": return "[--theme-color:var(--color-mist-900)]";
337
+ case "mist-950": return "[--theme-color:var(--color-mist-950)]";
338
+ case "neutral-50": return "[--theme-color:var(--color-neutral-50)]";
339
+ case "neutral-100": return "[--theme-color:var(--color-neutral-100)]";
340
+ case "neutral-200": return "[--theme-color:var(--color-neutral-200)]";
341
+ case "neutral-300": return "[--theme-color:var(--color-neutral-300)]";
342
+ case "neutral-400": return "[--theme-color:var(--color-neutral-400)]";
284
343
  case "neutral":
285
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-neutral-500)]");
286
- break;
344
+ case "neutral-500": return "[--theme-color:var(--color-neutral-500)]";
345
+ case "neutral-600": return "[--theme-color:var(--color-neutral-600)]";
346
+ case "neutral-700": return "[--theme-color:var(--color-neutral-700)]";
347
+ case "neutral-800": return "[--theme-color:var(--color-neutral-800)]";
348
+ case "neutral-900": return "[--theme-color:var(--color-neutral-900)]";
349
+ case "neutral-950": return "[--theme-color:var(--color-neutral-950)]";
350
+ case "olive-50": return "[--theme-color:var(--color-olive-50)]";
351
+ case "olive-100": return "[--theme-color:var(--color-olive-100)]";
352
+ case "olive-200": return "[--theme-color:var(--color-olive-200)]";
353
+ case "olive-300": return "[--theme-color:var(--color-olive-300)]";
354
+ case "olive-400": return "[--theme-color:var(--color-olive-400)]";
287
355
  case "olive":
288
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-olive-500)]");
289
- break;
356
+ case "olive-500": return "[--theme-color:var(--color-olive-500)]";
357
+ case "olive-600": return "[--theme-color:var(--color-olive-600)]";
358
+ case "olive-700": return "[--theme-color:var(--color-olive-700)]";
359
+ case "olive-800": return "[--theme-color:var(--color-olive-800)]";
360
+ case "olive-900": return "[--theme-color:var(--color-olive-900)]";
361
+ case "olive-950": return "[--theme-color:var(--color-olive-950)]";
362
+ case "orange-50": return "[--theme-color:var(--color-orange-50)]";
363
+ case "orange-100": return "[--theme-color:var(--color-orange-100)]";
364
+ case "orange-200": return "[--theme-color:var(--color-orange-200)]";
365
+ case "orange-300": return "[--theme-color:var(--color-orange-300)]";
366
+ case "orange-400": return "[--theme-color:var(--color-orange-400)]";
290
367
  case "orange":
291
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-orange-500)]");
292
- break;
368
+ case "orange-500": return "[--theme-color:var(--color-orange-500)]";
369
+ case "orange-600": return "[--theme-color:var(--color-orange-600)]";
370
+ case "orange-700": return "[--theme-color:var(--color-orange-700)]";
371
+ case "orange-800": return "[--theme-color:var(--color-orange-800)]";
372
+ case "orange-900": return "[--theme-color:var(--color-orange-900)]";
373
+ case "orange-950": return "[--theme-color:var(--color-orange-950)]";
374
+ case "pink-50": return "[--theme-color:var(--color-pink-50)]";
375
+ case "pink-100": return "[--theme-color:var(--color-pink-100)]";
376
+ case "pink-200": return "[--theme-color:var(--color-pink-200)]";
377
+ case "pink-300": return "[--theme-color:var(--color-pink-300)]";
378
+ case "pink-400": return "[--theme-color:var(--color-pink-400)]";
293
379
  case "pink":
294
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-pink-500)]");
295
- break;
380
+ case "pink-500": return "[--theme-color:var(--color-pink-500)]";
381
+ case "pink-600": return "[--theme-color:var(--color-pink-600)]";
382
+ case "pink-700": return "[--theme-color:var(--color-pink-700)]";
383
+ case "pink-800": return "[--theme-color:var(--color-pink-800)]";
384
+ case "pink-900": return "[--theme-color:var(--color-pink-900)]";
385
+ case "pink-950": return "[--theme-color:var(--color-pink-950)]";
386
+ case "purple-50": return "[--theme-color:var(--color-purple-50)]";
387
+ case "purple-100": return "[--theme-color:var(--color-purple-100)]";
388
+ case "purple-200": return "[--theme-color:var(--color-purple-200)]";
389
+ case "purple-300": return "[--theme-color:var(--color-purple-300)]";
390
+ case "purple-400": return "[--theme-color:var(--color-purple-400)]";
296
391
  case "purple":
297
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-purple-500)]");
298
- break;
392
+ case "purple-500": return "[--theme-color:var(--color-purple-500)]";
393
+ case "purple-600": return "[--theme-color:var(--color-purple-600)]";
394
+ case "purple-700": return "[--theme-color:var(--color-purple-700)]";
395
+ case "purple-800": return "[--theme-color:var(--color-purple-800)]";
396
+ case "purple-900": return "[--theme-color:var(--color-purple-900)]";
397
+ case "purple-950": return "[--theme-color:var(--color-purple-950)]";
398
+ case "red-50": return "[--theme-color:var(--color-red-50)]";
399
+ case "red-100": return "[--theme-color:var(--color-red-100)]";
400
+ case "red-200": return "[--theme-color:var(--color-red-200)]";
401
+ case "red-300": return "[--theme-color:var(--color-red-300)]";
402
+ case "red-400": return "[--theme-color:var(--color-red-400)]";
299
403
  case "red":
300
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-red-500)]");
301
- break;
404
+ case "red-500": return "[--theme-color:var(--color-red-500)]";
405
+ case "red-600": return "[--theme-color:var(--color-red-600)]";
406
+ case "red-700": return "[--theme-color:var(--color-red-700)]";
407
+ case "red-800": return "[--theme-color:var(--color-red-800)]";
408
+ case "red-900": return "[--theme-color:var(--color-red-900)]";
409
+ case "red-950": return "[--theme-color:var(--color-red-950)]";
410
+ case "rose-50": return "[--theme-color:var(--color-rose-50)]";
411
+ case "rose-100": return "[--theme-color:var(--color-rose-100)]";
412
+ case "rose-200": return "[--theme-color:var(--color-rose-200)]";
413
+ case "rose-300": return "[--theme-color:var(--color-rose-300)]";
414
+ case "rose-400": return "[--theme-color:var(--color-rose-400)]";
302
415
  case "rose":
303
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-rose-500)]");
304
- break;
416
+ case "rose-500": return "[--theme-color:var(--color-rose-500)]";
417
+ case "rose-600": return "[--theme-color:var(--color-rose-600)]";
418
+ case "rose-700": return "[--theme-color:var(--color-rose-700)]";
419
+ case "rose-800": return "[--theme-color:var(--color-rose-800)]";
420
+ case "rose-900": return "[--theme-color:var(--color-rose-900)]";
421
+ case "rose-950": return "[--theme-color:var(--color-rose-950)]";
422
+ case "sky-50": return "[--theme-color:var(--color-sky-50)]";
423
+ case "sky-100": return "[--theme-color:var(--color-sky-100)]";
424
+ case "sky-200": return "[--theme-color:var(--color-sky-200)]";
425
+ case "sky-300": return "[--theme-color:var(--color-sky-300)]";
426
+ case "sky-400": return "[--theme-color:var(--color-sky-400)]";
305
427
  case "sky":
306
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-sky-500)]");
307
- break;
428
+ case "sky-500": return "[--theme-color:var(--color-sky-500)]";
429
+ case "sky-600": return "[--theme-color:var(--color-sky-600)]";
430
+ case "sky-700": return "[--theme-color:var(--color-sky-700)]";
431
+ case "sky-800": return "[--theme-color:var(--color-sky-800)]";
432
+ case "sky-900": return "[--theme-color:var(--color-sky-900)]";
433
+ case "sky-950": return "[--theme-color:var(--color-sky-950)]";
434
+ case "slate-50": return "[--theme-color:var(--color-slate-50)]";
435
+ case "slate-100": return "[--theme-color:var(--color-slate-100)]";
436
+ case "slate-200": return "[--theme-color:var(--color-slate-200)]";
437
+ case "slate-300": return "[--theme-color:var(--color-slate-300)]";
438
+ case "slate-400": return "[--theme-color:var(--color-slate-400)]";
308
439
  case "slate":
309
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-slate-500)]");
310
- break;
440
+ case "slate-500": return "[--theme-color:var(--color-slate-500)]";
441
+ case "slate-600": return "[--theme-color:var(--color-slate-600)]";
442
+ case "slate-700": return "[--theme-color:var(--color-slate-700)]";
443
+ case "slate-800": return "[--theme-color:var(--color-slate-800)]";
444
+ case "slate-900": return "[--theme-color:var(--color-slate-900)]";
445
+ case "slate-950": return "[--theme-color:var(--color-slate-950)]";
446
+ case "stone-50": return "[--theme-color:var(--color-stone-50)]";
447
+ case "stone-100": return "[--theme-color:var(--color-stone-100)]";
448
+ case "stone-200": return "[--theme-color:var(--color-stone-200)]";
449
+ case "stone-300": return "[--theme-color:var(--color-stone-300)]";
450
+ case "stone-400": return "[--theme-color:var(--color-stone-400)]";
311
451
  case "stone":
312
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-stone-500)]");
313
- break;
452
+ case "stone-500": return "[--theme-color:var(--color-stone-500)]";
453
+ case "stone-600": return "[--theme-color:var(--color-stone-600)]";
454
+ case "stone-700": return "[--theme-color:var(--color-stone-700)]";
455
+ case "stone-800": return "[--theme-color:var(--color-stone-800)]";
456
+ case "stone-900": return "[--theme-color:var(--color-stone-900)]";
457
+ case "stone-950": return "[--theme-color:var(--color-stone-950)]";
458
+ case "taupe-50": return "[--theme-color:var(--color-taupe-50)]";
459
+ case "taupe-100": return "[--theme-color:var(--color-taupe-100)]";
460
+ case "taupe-200": return "[--theme-color:var(--color-taupe-200)]";
461
+ case "taupe-300": return "[--theme-color:var(--color-taupe-300)]";
462
+ case "taupe-400": return "[--theme-color:var(--color-taupe-400)]";
314
463
  case "taupe":
315
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-taupe-500)]");
316
- break;
464
+ case "taupe-500": return "[--theme-color:var(--color-taupe-500)]";
465
+ case "taupe-600": return "[--theme-color:var(--color-taupe-600)]";
466
+ case "taupe-700": return "[--theme-color:var(--color-taupe-700)]";
467
+ case "taupe-800": return "[--theme-color:var(--color-taupe-800)]";
468
+ case "taupe-900": return "[--theme-color:var(--color-taupe-900)]";
469
+ case "taupe-950": return "[--theme-color:var(--color-taupe-950)]";
470
+ case "teal-50": return "[--theme-color:var(--color-teal-50)]";
471
+ case "teal-100": return "[--theme-color:var(--color-teal-100)]";
472
+ case "teal-200": return "[--theme-color:var(--color-teal-200)]";
473
+ case "teal-300": return "[--theme-color:var(--color-teal-300)]";
474
+ case "teal-400": return "[--theme-color:var(--color-teal-400)]";
317
475
  case "teal":
318
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-teal-500)]");
319
- break;
476
+ case "teal-500": return "[--theme-color:var(--color-teal-500)]";
477
+ case "teal-600": return "[--theme-color:var(--color-teal-600)]";
478
+ case "teal-700": return "[--theme-color:var(--color-teal-700)]";
479
+ case "teal-800": return "[--theme-color:var(--color-teal-800)]";
480
+ case "teal-900": return "[--theme-color:var(--color-teal-900)]";
481
+ case "teal-950": return "[--theme-color:var(--color-teal-950)]";
482
+ case "violet-50": return "[--theme-color:var(--color-violet-50)]";
483
+ case "violet-100": return "[--theme-color:var(--color-violet-100)]";
484
+ case "violet-200": return "[--theme-color:var(--color-violet-200)]";
485
+ case "violet-300": return "[--theme-color:var(--color-violet-300)]";
486
+ case "violet-400": return "[--theme-color:var(--color-violet-400)]";
320
487
  case "violet":
321
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-violet-500)]");
322
- break;
488
+ case "violet-500": return "[--theme-color:var(--color-violet-500)]";
489
+ case "violet-600": return "[--theme-color:var(--color-violet-600)]";
490
+ case "violet-700": return "[--theme-color:var(--color-violet-700)]";
491
+ case "violet-800": return "[--theme-color:var(--color-violet-800)]";
492
+ case "violet-900": return "[--theme-color:var(--color-violet-900)]";
493
+ case "violet-950": return "[--theme-color:var(--color-violet-950)]";
494
+ case "yellow-50": return "[--theme-color:var(--color-yellow-50)]";
495
+ case "yellow-100": return "[--theme-color:var(--color-yellow-100)]";
496
+ case "yellow-200": return "[--theme-color:var(--color-yellow-200)]";
497
+ case "yellow-300": return "[--theme-color:var(--color-yellow-300)]";
498
+ case "yellow-400": return "[--theme-color:var(--color-yellow-400)]";
323
499
  case "yellow":
324
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-yellow-500)]");
325
- break;
500
+ case "yellow-500": return "[--theme-color:var(--color-yellow-500)]";
501
+ case "yellow-600": return "[--theme-color:var(--color-yellow-600)]";
502
+ case "yellow-700": return "[--theme-color:var(--color-yellow-700)]";
503
+ case "yellow-800": return "[--theme-color:var(--color-yellow-800)]";
504
+ case "yellow-900": return "[--theme-color:var(--color-yellow-900)]";
505
+ case "yellow-950": return "[--theme-color:var(--color-yellow-950)]";
506
+ case "zinc-50": return "[--theme-color:var(--color-zinc-50)]";
507
+ case "zinc-100": return "[--theme-color:var(--color-zinc-100)]";
508
+ case "zinc-200": return "[--theme-color:var(--color-zinc-200)]";
509
+ case "zinc-300": return "[--theme-color:var(--color-zinc-300)]";
510
+ case "zinc-400": return "[--theme-color:var(--color-zinc-400)]";
326
511
  case "zinc":
327
- fillColorTransitionClasses = twJoin(fillColorTransitionClasses, "[--theme-color:var(--color-zinc-500)]");
328
- break;
329
- case "custom":
330
- 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`.");
331
- fillColorTransitionClasses = customTheme.themeColor ? twMerge(fillColorTransitionClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
332
- break;
333
- default:
334
- fillColorTransitionClasses = twMerge(fillColorTransitionClasses, `[--theme-color:var(--base-theme-color)]`);
335
- break;
512
+ case "zinc-500": return "[--theme-color:var(--color-zinc-500)]";
513
+ case "zinc-600": return "[--theme-color:var(--color-zinc-600)]";
514
+ case "zinc-700": return "[--theme-color:var(--color-zinc-700)]";
515
+ case "zinc-800": return "[--theme-color:var(--color-zinc-800)]";
516
+ case "zinc-900": return "[--theme-color:var(--color-zinc-900)]";
517
+ case "zinc-950": return "[--theme-color:var(--color-zinc-950)]";
518
+ default: return "[--theme-color:var(--base-theme-color)]";
336
519
  }
337
- return fillColorTransitionClasses;
338
- };
339
- const getFillCenterClasses = (theme = "blue", customTheme) => {
340
- 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)");
520
+ }
521
+ function getTextColor(theme, asVariable) {
341
522
  switch (theme) {
523
+ case "amber-50":
524
+ case "blue-50":
525
+ case "cyan-50":
526
+ case "emerald-50":
527
+ case "fuchsia-50":
528
+ case "gray-50":
529
+ case "green-50":
530
+ case "indigo-50":
531
+ case "lime-50":
532
+ case "mauve-50":
533
+ case "mist-50":
534
+ case "neutral-50":
535
+ case "olive-50":
536
+ case "orange-50":
537
+ case "pink-50":
538
+ case "purple-50":
539
+ case "red-50":
540
+ case "rose-50":
541
+ case "sky-50":
542
+ case "slate-50":
543
+ case "stone-50":
544
+ case "taupe-50":
545
+ case "teal-50":
546
+ case "violet-50":
547
+ case "yellow-50":
548
+ case "zinc-50":
549
+ case "amber-100":
550
+ case "blue-100":
551
+ case "cyan-100":
552
+ case "emerald-100":
553
+ case "fuchsia-100":
554
+ case "gray-100":
555
+ case "green-100":
556
+ case "indigo-100":
557
+ case "lime-100":
558
+ case "mauve-100":
559
+ case "mist-100":
560
+ case "neutral-100":
561
+ case "olive-100":
562
+ case "orange-100":
563
+ case "pink-100":
564
+ case "purple-100":
565
+ case "red-100":
566
+ case "rose-100":
567
+ case "sky-100":
568
+ case "slate-100":
569
+ case "stone-100":
570
+ case "taupe-100":
571
+ case "teal-100":
572
+ case "violet-100":
573
+ case "yellow-100":
574
+ case "zinc-100":
575
+ case "amber-200":
576
+ case "blue-200":
577
+ case "cyan-200":
578
+ case "emerald-200":
579
+ case "fuchsia-200":
580
+ case "gray-200":
581
+ case "green-200":
582
+ case "indigo-200":
583
+ case "lime-200":
584
+ case "mauve-200":
585
+ case "mist-200":
586
+ case "neutral-200":
587
+ case "olive-200":
588
+ case "orange-200":
589
+ case "pink-200":
590
+ case "purple-200":
591
+ case "red-200":
592
+ case "rose-200":
593
+ case "sky-200":
594
+ case "slate-200":
595
+ case "stone-200":
596
+ case "taupe-200":
597
+ case "teal-200":
598
+ case "violet-200":
599
+ case "yellow-200":
600
+ case "zinc-200":
601
+ case "amber-300":
602
+ case "blue-300":
603
+ case "cyan-300":
604
+ case "emerald-300":
605
+ case "fuchsia-300":
606
+ case "gray-300":
607
+ case "green-300":
608
+ case "indigo-300":
609
+ case "lime-300":
610
+ case "mauve-300":
611
+ case "mist-300":
612
+ case "neutral-300":
613
+ case "olive-300":
614
+ case "orange-300":
615
+ case "pink-300":
616
+ case "purple-300":
617
+ case "red-300":
618
+ case "rose-300":
619
+ case "sky-300":
620
+ case "slate-300":
621
+ case "stone-300":
622
+ case "taupe-300":
623
+ case "teal-300":
624
+ case "violet-300":
625
+ case "yellow-300":
626
+ case "zinc-300":
627
+ case "amber-400":
628
+ case "blue-400":
629
+ case "cyan-400":
630
+ case "emerald-400":
631
+ case "fuchsia-400":
632
+ case "gray-400":
633
+ case "green-400":
634
+ case "indigo-400":
635
+ case "lime-400":
636
+ case "mauve-400":
637
+ case "mist-400":
638
+ case "neutral-400":
639
+ case "olive-400":
640
+ case "orange-400":
641
+ case "pink-400":
642
+ case "purple-400":
643
+ case "red-400":
644
+ case "rose-400":
645
+ case "sky-400":
646
+ case "slate-400":
647
+ case "stone-400":
648
+ case "taupe-400":
649
+ case "teal-400":
650
+ case "violet-400":
651
+ case "yellow-400":
652
+ 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))]";
342
653
  case "amber":
343
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-amber-500)]");
344
- break;
345
654
  case "blue":
346
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-blue-500)]");
347
- break;
655
+ case "custom":
348
656
  case "cyan":
349
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-cyan-500)]");
350
- break;
351
657
  case "emerald":
352
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-emerald-500)]");
353
- break;
354
658
  case "fuchsia":
355
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
356
- break;
357
659
  case "gray":
358
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-gray-500)]");
359
- break;
360
660
  case "green":
361
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-green-500)]");
362
- break;
363
661
  case "indigo":
364
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-indigo-500)]");
365
- break;
366
662
  case "lime":
367
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-lime-500)]");
368
- break;
369
663
  case "mauve":
370
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-mauve-500)]");
371
- break;
372
664
  case "mist":
373
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-mist-500)]");
374
- break;
375
665
  case "neutral":
376
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-neutral-500)]");
377
- break;
378
666
  case "olive":
379
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-olive-500)]");
380
- break;
381
667
  case "orange":
382
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-orange-500)]");
383
- break;
384
668
  case "pink":
385
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-pink-500)]");
386
- break;
387
669
  case "purple":
388
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-purple-500)]");
389
- break;
390
670
  case "red":
391
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-red-500)]");
392
- break;
393
671
  case "rose":
394
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-rose-500)]");
395
- break;
396
672
  case "sky":
397
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-sky-500)]");
398
- break;
399
673
  case "slate":
400
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-slate-500)]");
401
- break;
402
674
  case "stone":
403
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-stone-500)]");
404
- break;
405
675
  case "taupe":
406
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-taupe-500)]");
407
- break;
408
676
  case "teal":
409
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-teal-500)]");
410
- break;
411
677
  case "violet":
412
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-violet-500)]");
413
- break;
414
678
  case "yellow":
415
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-yellow-500)]");
416
- break;
417
679
  case "zinc":
418
- fillCenterColorClasses = twJoin(fillCenterColorClasses, "[--theme-color:var(--color-zinc-500)]");
419
- break;
420
- case "custom":
421
- 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`.");
422
- fillCenterColorClasses = customTheme.themeColor ? twMerge(fillCenterColorClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
423
- break;
424
- default:
425
- fillCenterColorClasses = twMerge(fillCenterColorClasses, `[--theme-color:var(--base-theme-color)]`);
426
- break;
680
+ case "amber-500":
681
+ case "blue-500":
682
+ case "cyan-500":
683
+ case "emerald-500":
684
+ case "fuchsia-500":
685
+ case "gray-500":
686
+ case "green-500":
687
+ case "indigo-500":
688
+ case "lime-500":
689
+ case "mauve-500":
690
+ case "mist-500":
691
+ case "neutral-500":
692
+ case "olive-500":
693
+ case "orange-500":
694
+ case "pink-500":
695
+ case "purple-500":
696
+ case "red-500":
697
+ case "rose-500":
698
+ case "sky-500":
699
+ case "slate-500":
700
+ case "stone-500":
701
+ case "taupe-500":
702
+ case "teal-500":
703
+ case "violet-500":
704
+ case "yellow-500":
705
+ case "zinc-500":
706
+ case "amber-600":
707
+ case "blue-600":
708
+ case "cyan-600":
709
+ case "emerald-600":
710
+ case "fuchsia-600":
711
+ case "gray-600":
712
+ case "green-600":
713
+ case "indigo-600":
714
+ case "lime-600":
715
+ case "mauve-600":
716
+ case "mist-600":
717
+ case "neutral-600":
718
+ case "olive-600":
719
+ case "orange-600":
720
+ case "pink-600":
721
+ case "purple-600":
722
+ case "red-600":
723
+ case "rose-600":
724
+ case "sky-600":
725
+ case "slate-600":
726
+ case "stone-600":
727
+ case "taupe-600":
728
+ case "teal-600":
729
+ case "violet-600":
730
+ case "yellow-600":
731
+ case "zinc-600":
732
+ case "amber-700":
733
+ case "blue-700":
734
+ case "cyan-700":
735
+ case "emerald-700":
736
+ case "fuchsia-700":
737
+ case "gray-700":
738
+ case "green-700":
739
+ case "indigo-700":
740
+ case "lime-700":
741
+ case "mauve-700":
742
+ case "mist-700":
743
+ case "neutral-700":
744
+ case "olive-700":
745
+ case "orange-700":
746
+ case "pink-700":
747
+ case "purple-700":
748
+ case "red-700":
749
+ case "rose-700":
750
+ case "sky-700":
751
+ case "slate-700":
752
+ case "stone-700":
753
+ case "taupe-700":
754
+ case "teal-700":
755
+ case "violet-700":
756
+ case "yellow-700":
757
+ case "zinc-700":
758
+ case "amber-800":
759
+ case "blue-800":
760
+ case "cyan-800":
761
+ case "emerald-800":
762
+ case "fuchsia-800":
763
+ case "gray-800":
764
+ case "green-800":
765
+ case "indigo-800":
766
+ case "lime-800":
767
+ case "mauve-800":
768
+ case "mist-800":
769
+ case "neutral-800":
770
+ case "olive-800":
771
+ case "orange-800":
772
+ case "pink-800":
773
+ case "purple-800":
774
+ case "red-800":
775
+ case "rose-800":
776
+ case "sky-800":
777
+ case "slate-800":
778
+ case "stone-800":
779
+ case "taupe-800":
780
+ case "teal-800":
781
+ case "violet-800":
782
+ case "yellow-800":
783
+ case "zinc-800":
784
+ case "amber-900":
785
+ case "blue-900":
786
+ case "cyan-900":
787
+ case "emerald-900":
788
+ case "fuchsia-900":
789
+ case "gray-900":
790
+ case "green-900":
791
+ case "indigo-900":
792
+ case "lime-900":
793
+ case "mauve-900":
794
+ case "mist-900":
795
+ case "neutral-900":
796
+ case "olive-900":
797
+ case "orange-900":
798
+ case "pink-900":
799
+ case "purple-900":
800
+ case "red-900":
801
+ case "rose-900":
802
+ case "sky-900":
803
+ case "slate-900":
804
+ case "stone-900":
805
+ case "taupe-900":
806
+ case "teal-900":
807
+ case "violet-900":
808
+ case "yellow-900":
809
+ case "zinc-900":
810
+ case "amber-950":
811
+ case "blue-950":
812
+ case "cyan-950":
813
+ case "emerald-950":
814
+ case "fuchsia-950":
815
+ case "gray-950":
816
+ case "green-950":
817
+ case "indigo-950":
818
+ case "lime-950":
819
+ case "mauve-950":
820
+ case "mist-950":
821
+ case "neutral-950":
822
+ case "olive-950":
823
+ case "orange-950":
824
+ case "pink-950":
825
+ case "purple-950":
826
+ case "red-950":
827
+ case "rose-950":
828
+ case "sky-950":
829
+ case "slate-950":
830
+ case "stone-950":
831
+ case "taupe-950":
832
+ case "teal-950":
833
+ case "violet-950":
834
+ case "yellow-950":
835
+ 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))]";
836
+ default: return asVariable ? "[--text-color:var(--base-theme-color--foreground)]" : "text-[var(--base-theme-color--foreground)]";
427
837
  }
838
+ }
839
+
840
+ //#endregion
841
+ //#region src/components/link.tsx
842
+ function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }) {
843
+ const isExternal = `${href}`.startsWith("http"), hasHash = `${href}`.includes("#");
844
+ const handleClick = (e) => {
845
+ if (disabled) return e.preventDefault();
846
+ onClick?.(e);
847
+ setTimeout(() => history.replaceState({}, document.title, location.pathname), 100);
848
+ };
849
+ return /* @__PURE__ */ jsx(as || "a", {
850
+ ...props,
851
+ "aria-disabled": disabled,
852
+ className: twMerge("ease-exponential inline-block transition-transform duration-300 active:scale-95 pointer-fine:active:scale-95", className, disabled && "pointer-events-none"),
853
+ href,
854
+ target: target || (isExternal ? "_blank" : "_self"),
855
+ onClick: hasHash ? handleClick : onClick,
856
+ rel: rel !== void 0 ? rel === "nofollow" ? `${rel} noreferrer noopener` : `${rel} prefetch` : isExternal ? "nofollow noreferrer noopener" : "prefetch"
857
+ });
858
+ }
859
+ 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";
860
+ const lineStaticClasses = twJoin(baseClasses, "whitespace-nowrap after:-bottom-0.5 after:w-[calc(100%+0.15rem)] after:rounded-full after:border after:border-current");
861
+ const lineClasses = twJoin(lineStaticClasses, "whitespace-nowrap after:transition-transform after:ease-exponential");
862
+ 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";
863
+ 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";
864
+ const lineNormalClasses = twJoin([
865
+ lineClasses,
866
+ scaleYClasses,
867
+ "after:origin-bottom after:translate-y-0.5 active:after:translate-y-0 pointer-fine:hover:after:translate-y-0"
868
+ ]);
869
+ const lineLtrClasses = twJoin([
870
+ lineClasses,
871
+ scaleXClasses,
872
+ "after:origin-left"
873
+ ]);
874
+ const lineRtlClasses = twJoin([
875
+ lineClasses,
876
+ scaleXClasses,
877
+ "after:origin-right"
878
+ ]);
879
+ const lineCenterClasses = twJoin([lineClasses, scaleXClasses]);
880
+ const lineLiftClasses = twJoin([
881
+ lineClasses,
882
+ scaleYClasses,
883
+ "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"
884
+ ]);
885
+ 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)");
886
+ const getFillColorTransitionClasses = (theme, customTheme) => {
887
+ let fillColorTransitionClasses = twJoin(fillClasses, "transition-[scale,color] after:bg-(--theme-color)");
888
+ if (theme === "custom") {
889
+ 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`.");
890
+ fillColorTransitionClasses = customTheme.themeColor ? twMerge(fillColorTransitionClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
891
+ } else fillColorTransitionClasses = twMerge(fillColorTransitionClasses, getThemeColor(theme));
892
+ return fillColorTransitionClasses;
893
+ };
894
+ const getFillCenterClasses = (theme, customTheme) => {
895
+ 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)");
896
+ if (theme === "custom") {
897
+ 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`.");
898
+ fillCenterColorClasses = customTheme.themeColor ? twMerge(fillCenterColorClasses, customTheme.themeColor) : twMerge(fillClasses, customTheme.classes);
899
+ } else fillCenterColorClasses = twMerge(fillCenterColorClasses, getThemeColor(theme));
428
900
  return fillCenterColorClasses;
429
901
  };
430
902
  const multilineBaseClasses = "bg-linear-to-r from-current to-current bg-no-repeat active:scale-95";
431
903
  const multilineLineStaticClasses = "underline";
432
904
  const multilineNormalClasses = "underline-offset-1 active:underline pointer-fine:hover:underline";
433
- const multilineLineClasses = twJoin(twJoin(multilineBaseClasses, "duration-500 ease-exponential"), "bg-position-[0%_100%] px-px pb-px transition-[background-size]");
905
+ const multilineLineClasses = twJoin(twJoin(multilineBaseClasses, "duration-500 ease-exponential"), "bg-position-[0%_100%] px-px pbe-px transition-[background-size]");
434
906
  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]");
435
907
  const multilineLineRtlClasses = twJoin([multilineXClasses, "bg-position-[100%_100%]"]);
436
908
  const multilineLineCenterClasses = twJoin([multilineXClasses, "bg-position-[50%_100%]"]);
437
909
  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]");
438
- 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");
439
- const getMultilineFillColorClasses = (theme = "blue", customTheme) => {
910
+ 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)");
911
+ const getMultilineFillColorClasses = (theme, customTheme) => {
440
912
  let multilineFillColorClasses = twJoin(multilineFillBaseClasses, "from-(--theme-color) to-(--theme-color) transition-[background-size,color]");
441
- switch (theme) {
442
- case "amber":
443
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-amber-500)]");
444
- break;
445
- case "blue":
446
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-blue-500)]");
447
- break;
448
- case "cyan":
449
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-cyan-500)]");
450
- break;
451
- case "emerald":
452
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-emerald-500)]");
453
- break;
454
- case "fuchsia":
455
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
456
- break;
457
- case "gray":
458
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-gray-500)]");
459
- break;
460
- case "green":
461
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-green-500)]");
462
- break;
463
- case "indigo":
464
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-indigo-500)]");
465
- break;
466
- case "lime":
467
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-lime-500)]");
468
- break;
469
- case "mauve":
470
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mauve-500)]");
471
- break;
472
- case "mist":
473
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mist-500)]");
474
- break;
475
- case "neutral":
476
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-neutral-500)]");
477
- break;
478
- case "olive":
479
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-olive-500)]");
480
- break;
481
- case "orange":
482
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-orange-500)]");
483
- break;
484
- case "pink":
485
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-pink-500)]");
486
- break;
487
- case "purple":
488
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-purple-500)]");
489
- break;
490
- case "red":
491
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-red-500)]");
492
- break;
493
- case "rose":
494
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-rose-500)]");
495
- break;
496
- case "sky":
497
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-sky-500)]");
498
- break;
499
- case "slate":
500
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-slate-500)]");
501
- break;
502
- case "stone":
503
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-stone-500)]");
504
- break;
505
- case "taupe":
506
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-taupe-500)]");
507
- break;
508
- case "teal":
509
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-teal-500)]");
510
- break;
511
- case "violet":
512
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-violet-500)]");
513
- break;
514
- case "yellow":
515
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-yellow-500)]");
516
- break;
517
- case "zinc":
518
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-zinc-500)]");
519
- break;
520
- case "custom":
521
- 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`.");
522
- multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
523
- break;
524
- default:
525
- multilineFillColorClasses = twMerge(multilineFillColorClasses, `[--theme-color:var(--base-theme-color)]`);
526
- break;
527
- }
913
+ if (theme === "custom") {
914
+ 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`.");
915
+ multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
916
+ } else multilineFillColorClasses = twMerge(multilineFillColorClasses, getThemeColor(theme));
528
917
  return multilineFillColorClasses;
529
918
  };
530
- const getMultilineFillClasses = (theme = "blue", customTheme) => {
919
+ const getMultilineFillClasses = (theme, customTheme) => {
531
920
  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%]");
532
- switch (theme) {
533
- case "amber":
534
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-amber-500)]");
535
- break;
536
- case "blue":
537
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-blue-500)]");
538
- break;
539
- case "cyan":
540
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-cyan-500)]");
541
- break;
542
- case "emerald":
543
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-emerald-500)]");
544
- break;
545
- case "fuchsia":
546
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-fuchsia-500)]");
547
- break;
548
- case "gray":
549
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-gray-500)]");
550
- break;
551
- case "green":
552
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-green-500)]");
553
- break;
554
- case "indigo":
555
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-indigo-500)]");
556
- break;
557
- case "lime":
558
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-lime-500)]");
559
- break;
560
- case "mauve":
561
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mauve-500)]");
562
- break;
563
- case "mist":
564
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-mist-500)]");
565
- break;
566
- case "neutral":
567
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-neutral-500)]");
568
- break;
569
- case "olive":
570
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-olive-500)]");
571
- break;
572
- case "orange":
573
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-orange-500)]");
574
- break;
575
- case "pink":
576
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-pink-500)]");
577
- break;
578
- case "purple":
579
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-purple-500)]");
580
- break;
581
- case "red":
582
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-red-500)]");
583
- break;
584
- case "rose":
585
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-rose-500)]");
586
- break;
587
- case "sky":
588
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-sky-500)]");
589
- break;
590
- case "slate":
591
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-slate-500)]");
592
- break;
593
- case "stone":
594
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-stone-500)]");
595
- break;
596
- case "taupe":
597
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-taupe-500)]");
598
- break;
599
- case "teal":
600
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-teal-500)]");
601
- break;
602
- case "violet":
603
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-violet-500)]");
604
- break;
605
- case "yellow":
606
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-yellow-500)]");
607
- break;
608
- case "zinc":
609
- multilineFillColorClasses = twJoin(multilineFillColorClasses, "[--theme-color:var(--color-zinc-500)]");
610
- break;
611
- case "custom":
612
- 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`.");
613
- multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
614
- break;
615
- default:
616
- multilineFillColorClasses = twMerge(multilineFillColorClasses, `[--theme-color:var(--base-theme-color)]`);
617
- break;
618
- }
921
+ if (theme === "custom") {
922
+ 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`.");
923
+ multilineFillColorClasses = customTheme.themeColor ? twMerge(multilineFillColorClasses, customTheme.themeColor) : twMerge(multilineFillBaseClasses, customTheme.classes);
924
+ } else multilineFillColorClasses = twMerge(multilineFillColorClasses, getThemeColor(theme));
619
925
  return multilineFillColorClasses;
620
926
  };
621
- const getMultilineFillLiftClasses = (theme = "blue", customTheme) => {
927
+ const getMultilineFillLiftClasses = (theme, customTheme) => {
622
928
  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%]");
623
929
  };
624
- const getMultilineFillXClasses = (theme = "blue", customTheme) => {
930
+ const getMultilineFillXClasses = (theme, customTheme) => {
625
931
  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%]");
626
932
  };
627
- const getMultilineFillRtlClasses = (theme = "blue", customTheme) => {
933
+ const getMultilineFillRtlClasses = (theme, customTheme) => {
628
934
  return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-position-[100%_auto]");
629
935
  };
630
- const getMultilineFillCenterClasses = (theme = "blue", customTheme) => {
936
+ const getMultilineFillCenterClasses = (theme, customTheme) => {
631
937
  return twJoin(getMultilineFillXClasses(theme, customTheme), "bg-position-[50%_auto]");
632
938
  };
633
939
  function getLinkClasses({ customTheme, theme, type }) {
@@ -637,19 +943,22 @@ function getLinkClasses({ customTheme, theme, type }) {
637
943
  case "rtl": return lineRtlClasses;
638
944
  case "center": return lineCenterClasses;
639
945
  case "lift": return lineLiftClasses;
640
- case "fill": return getFillCenterClasses(theme, customTheme);
946
+ case "fill": return twJoin([getFillCenterClasses(theme, customTheme), getTextColor(theme, true)]);
641
947
  case "fill-ltr": return twJoin([
642
948
  getFillColorTransitionClasses(theme, customTheme),
949
+ getTextColor(theme, true),
643
950
  scaleXClasses,
644
951
  "after:origin-left"
645
952
  ]);
646
953
  case "fill-rtl": return twJoin([
647
954
  getFillColorTransitionClasses(theme, customTheme),
955
+ getTextColor(theme, true),
648
956
  scaleXClasses,
649
957
  "after:origin-right"
650
958
  ]);
651
959
  case "fill-lift": return twJoin([
652
960
  getFillColorTransitionClasses(theme, customTheme),
961
+ getTextColor(theme, true),
653
962
  scaleYClasses,
654
963
  "after:origin-bottom"
655
964
  ]);
@@ -659,11 +968,11 @@ function getLinkClasses({ customTheme, theme, type }) {
659
968
  case "multiline-rtl": return multilineLineRtlClasses;
660
969
  case "multiline-center": return multilineLineCenterClasses;
661
970
  case "multiline-lift": return multilineLineLiftClasses;
662
- case "multiline-fill": return getMultilineFillClasses(theme, customTheme);
663
- case "multiline-fill-ltr": return getMultilineFillXClasses(theme, customTheme);
664
- case "multiline-fill-rtl": return getMultilineFillRtlClasses(theme, customTheme);
665
- case "multiline-fill-center": return getMultilineFillCenterClasses(theme, customTheme);
666
- case "multiline-fill-lift": return getMultilineFillLiftClasses(theme, customTheme);
971
+ case "multiline-fill": return twJoin([getMultilineFillClasses(theme, customTheme), getTextColor(theme, true)]);
972
+ case "multiline-fill-ltr": return twJoin([getMultilineFillXClasses(theme, customTheme), getTextColor(theme, true)]);
973
+ case "multiline-fill-rtl": return twJoin([getMultilineFillRtlClasses(theme, customTheme), getTextColor(theme, true)]);
974
+ case "multiline-fill-center": return twJoin([getMultilineFillCenterClasses(theme, customTheme), getTextColor(theme, true)]);
975
+ case "multiline-fill-lift": return twJoin([getMultilineFillLiftClasses(theme, customTheme), getTextColor(theme, true)]);
667
976
  default: return lineNormalClasses;
668
977
  }
669
978
  }
@@ -737,38 +1046,11 @@ function Button({ className, customTheme, gradient = false, padding = "md", roun
737
1046
  }
738
1047
  };
739
1048
  const getThemeColorVariable = () => {
740
- switch (theme) {
741
- case "amber": return "text-white [--theme-color:var(--color-amber-500)]";
742
- case "blue": return "text-white [--theme-color:var(--color-blue-500)]";
743
- case "cyan": return "text-white [--theme-color:var(--color-cyan-500)]";
744
- case "emerald": return "text-white [--theme-color:var(--color-emerald-500)]";
745
- case "fuchsia": return "text-white [--theme-color:var(--color-fuchsia-500)]";
746
- case "gray": return "text-white [--theme-color:var(--color-gray-500)]";
747
- case "green": return "text-white [--theme-color:var(--color-green-500)]";
748
- case "indigo": return "text-white [--theme-color:var(--color-indigo-500)]";
749
- case "lime": return "text-white [--theme-color:var(--color-lime-500)]";
750
- case "mauve": return "text-white [--theme-color:var(--color-mauve-500)]";
751
- case "mist": return "text-white [--theme-color:var(--color-mist-500)]";
752
- case "neutral": return "text-white [--theme-color:var(--color-neutral-500)]";
753
- case "olive": return "text-white [--theme-color:var(--color-olive-500)]";
754
- case "orange": return "text-white [--theme-color:var(--color-orange-500)]";
755
- case "pink": return "text-white [--theme-color:var(--color-pink-500)]";
756
- case "purple": return "text-white [--theme-color:var(--color-purple-500)]";
757
- case "red": return "text-white [--theme-color:var(--color-red-500)]";
758
- case "rose": return "text-white [--theme-color:var(--color-rose-500)]";
759
- case "sky": return "text-white [--theme-color:var(--color-sky-500)]";
760
- case "slate": return "text-white [--theme-color:var(--color-slate-500)]";
761
- case "stone": return "text-white [--theme-color:var(--color-stone-500)]";
762
- case "taupe": return "text-white [--theme-color:var(--color-taupe-500)]";
763
- case "teal": return "text-white [--theme-color:var(--color-teal-500)]";
764
- case "violet": return "text-white [--theme-color:var(--color-violet-500)]";
765
- case "yellow": return "text-white [--theme-color:var(--color-yellow-500)]";
766
- case "zinc": return "text-white [--theme-color:var(--color-zinc-500)]";
767
- case "custom":
768
- 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`.");
769
- return customTheme.themeColor || customTheme.classes || "";
770
- default: return "text-(--base-theme-color--foreground) [--theme-color:var(--base-theme-color)]";
1049
+ if (theme === "custom") {
1050
+ 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`.");
1051
+ return customTheme.themeColor || customTheme.classes || "";
771
1052
  }
1053
+ return twJoin([getTextColor(theme), getThemeColor(theme)]);
772
1054
  };
773
1055
  const buttonClasses = twMerge([
774
1056
  "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",
@@ -4311,7 +4593,7 @@ function DetailsBody({ children, className, ...props }) {
4311
4593
  className: twMerge("grid-rows-1fr transition-rows ease-exponential data-closed:grid-rows-0fr grid duration-500", className),
4312
4594
  transition: true,
4313
4595
  children: (bag) => /* @__PURE__ */ jsx("div", {
4314
- className: "overflow-y-hidden px-2 pt-3 pb-1",
4596
+ className: "overflow-y-hidden px-2 pbs-3 pbe-1",
4315
4597
  children: typeof children === "function" ? children(bag) : children
4316
4598
  })
4317
4599
  });
@@ -4467,12 +4749,12 @@ function Heading({ as = "h2", children, customize, className, id, ref, ...props
4467
4749
  const targetableID = id || getTextFromChildren(children).replace(/\s+/g, "-").toLowerCase();
4468
4750
  const getBaseClasses = () => {
4469
4751
  switch (as) {
4470
- case "h1": return twMerge("pb-2.5 text-6xl font-black last:pb-0", customize?.h1);
4471
- case "h3": return twMerge("pb-2 text-4xl font-extralight last:pb-0", customize?.h3);
4472
- case "h4": return twMerge("pb-2 text-3xl font-medium last:pb-0", customize?.h4);
4473
- case "h5": return twMerge("pb-1.5 text-2xl font-semibold last:pb-0", customize?.h5);
4474
- case "h6": return twMerge("pb-1 text-xl font-bold last:pb-0", customize?.h6);
4475
- default: return twMerge("pb-2.5 text-5xl font-extrabold last:pb-0", customize?.h2);
4752
+ case "h1": return twMerge("pbe-2.5 text-6xl font-black last:pbe-0", customize?.h1);
4753
+ case "h3": return twMerge("pbe-2 text-4xl font-extralight last:pbe-0", customize?.h3);
4754
+ case "h4": return twMerge("pbe-2 text-3xl font-medium last:pbe-0", customize?.h4);
4755
+ case "h5": return twMerge("pbe-1.5 text-2xl font-semibold last:pbe-0", customize?.h5);
4756
+ case "h6": return twMerge("pbe-1 text-xl font-bold last:pbe-0", customize?.h6);
4757
+ default: return twMerge("pbe-2.5 text-5xl font-extrabold last:pbe-0", customize?.h2);
4476
4758
  }
4477
4759
  };
4478
4760
  const baseClasses = getBaseClasses();
@@ -6338,7 +6620,7 @@ function HumanVerification({ children = "Verify", className }) {
6338
6620
  }),
6339
6621
  /* @__PURE__ */ jsxs("div", {
6340
6622
  id: "human-verification-instructions",
6341
- className: "pt-1 text-center text-xs",
6623
+ className: "pbs-1 text-center text-xs",
6342
6624
  children: [
6343
6625
  "Human verification challenge.",
6344
6626
  " ",
@@ -6736,7 +7018,7 @@ function ModalDialog(props) {
6736
7018
  rounded: "full",
6737
7019
  className: "group/button fixed top-4 right-4 size-7 overflow-x-hidden transition-[scale,width,filter] pointer-fine:hover:w-20",
6738
7020
  children: /* @__PURE__ */ jsxs("div", {
6739
- 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",
7021
+ 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",
6740
7022
  children: [/* @__PURE__ */ jsxs("span", {
6741
7023
  className: "block text-xs leading-none uppercase",
6742
7024
  children: ["Close", /* @__PURE__ */ jsx("span", {
@@ -7053,6 +7335,58 @@ function Select({ buttonProps, children, className, description, descriptionProp
7053
7335
  });
7054
7336
  }
7055
7337
 
7338
+ //#endregion
7339
+ //#region src/symbols/circle.fill.tsx
7340
+ function CircleFill({ weight = "regular", ...props }) {
7341
+ switch (weight) {
7342
+ case "ultralight": return /* @__PURE__ */ jsx("svg", {
7343
+ viewBox: "6.83594 -72.4785 74.45 74.45",
7344
+ ...props,
7345
+ 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" })
7346
+ });
7347
+ case "thin": return /* @__PURE__ */ jsx("svg", {
7348
+ viewBox: "6.83594 -72.9707 75.45 75.43",
7349
+ ...props,
7350
+ 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" })
7351
+ });
7352
+ case "light": return /* @__PURE__ */ jsx("svg", {
7353
+ viewBox: "6.83594 -73.9316 77.39 77.36",
7354
+ ...props,
7355
+ 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" })
7356
+ });
7357
+ case "regular": return /* @__PURE__ */ jsx("svg", {
7358
+ viewBox: "6.83594 -74.6582 78.86 78.81",
7359
+ ...props,
7360
+ 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" })
7361
+ });
7362
+ case "medium": return /* @__PURE__ */ jsx("svg", {
7363
+ viewBox: "6.83594 -75.124 79.78 79.74",
7364
+ ...props,
7365
+ 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" })
7366
+ });
7367
+ case "semibold": return /* @__PURE__ */ jsx("svg", {
7368
+ viewBox: "6.83594 -75.4812 80.49 80.45",
7369
+ ...props,
7370
+ 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" })
7371
+ });
7372
+ case "bold": return /* @__PURE__ */ jsx("svg", {
7373
+ viewBox: "6.83594 -75.9521 81.42 81.4",
7374
+ ...props,
7375
+ 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" })
7376
+ });
7377
+ case "heavy": return /* @__PURE__ */ jsx("svg", {
7378
+ viewBox: "6.83594 -76.6353 82.77 82.76",
7379
+ ...props,
7380
+ 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" })
7381
+ });
7382
+ case "black": return /* @__PURE__ */ jsx("svg", {
7383
+ viewBox: "6.83594 -77.2461 83.98 83.98",
7384
+ ...props,
7385
+ 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" })
7386
+ });
7387
+ }
7388
+ }
7389
+
7056
7390
  //#endregion
7057
7391
  //#region src/components/submit-button.tsx
7058
7392
  /**
@@ -7080,28 +7414,33 @@ function SubmitButton({ children, className, customTheme, error, formStatus = "r
7080
7414
  case "incomplete": return incomplete || "Complete Form";
7081
7415
  case "loading": return loading || /* @__PURE__ */ jsxs(Fragment, { children: [
7082
7416
  /* @__PURE__ */ jsx("span", {
7083
- className: "animate-wave animation-delay-300 inline-block",
7084
- children: "•"
7417
+ className: "sr-only",
7418
+ children: "Submitting…"
7085
7419
  }),
7086
- /* @__PURE__ */ jsx("span", {
7087
- className: "animate-wave animation-delay-150 inline-block",
7088
- children: "•"
7420
+ "\xA0",
7421
+ /* @__PURE__ */ jsx(CircleFill, {
7422
+ className: "animate-wave size-2",
7423
+ weight: "black"
7089
7424
  }),
7090
- /* @__PURE__ */ jsx("span", {
7091
- className: "animate-wave inline-block",
7092
- children: "•"
7093
- })
7094
- ] });
7095
- case "error": return /* @__PURE__ */ jsxs(Fragment, { children: [
7096
- error || "Error",
7097
- " ",
7098
- /* @__PURE__ */ jsx("span", {
7099
- className: "absolute top-1/2 ml-1.5 translate-y-[calc(-50%-1.5px)] text-2xl",
7100
- children: "×"
7101
- })
7425
+ /* @__PURE__ */ jsx(CircleFill, {
7426
+ className: "animate-wave animation-delay-100 size-2",
7427
+ weight: "black"
7428
+ }),
7429
+ /* @__PURE__ */ jsx(CircleFill, {
7430
+ className: "animate-wave animation-delay-200 size-2",
7431
+ weight: "black"
7432
+ }),
7433
+ "\xA0"
7102
7434
  ] });
7435
+ case "error": return error || /* @__PURE__ */ jsxs(Fragment, { children: ["Error", /* @__PURE__ */ jsx(Xmark, {
7436
+ className: "size-3.5",
7437
+ weight: "semibold"
7438
+ })] });
7103
7439
  case "readonly": return readonly || children;
7104
- case "success": return success || "Successfully Submitted";
7440
+ case "success": return success || /* @__PURE__ */ jsxs(Fragment, { children: ["Successfully Submitted", /* @__PURE__ */ jsx(Checkmark, {
7441
+ className: "size-3.5",
7442
+ weight: "semibold"
7443
+ })] });
7105
7444
  default: return children || "Submit";
7106
7445
  }
7107
7446
  };