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