@nuxt/ui 3.0.0-alpha.9 → 3.0.0-beta.2

package/.nuxt/ui/slider.ts

@@ -1,39 +1,62 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
     "root": "relative flex items-center select-none touch-none",
-    "track": "relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow",
+    "track": "relative bg-(--ui-bg-accented) overflow-hidden rounded-full grow",
     "range": "absolute rounded-full",
-    "thumb": "rounded-full bg-[var(--ui-bg)] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    "thumb": "rounded-full bg-(--ui-bg) ring-2 focus-visible:outline-2 focus-visible:outline-offset-2"
   },
   "variants": {
     "color": {
       "primary": {
-        "range": "bg-[var(--ui-primary)]",
-        "thumb": "ring-[var(--ui-primary)] focus-visible:outline-[var(--ui-primary)]"
+        "range": "bg-(--ui-primary)",
+        "thumb": "ring-(--ui-primary) focus-visible:outline-(--ui-primary)/50"
       },
       "secondary": {
-        "range": "bg-[var(--ui-secondary)]",
-        "thumb": "ring-[var(--ui-secondary)] focus-visible:outline-[var(--ui-secondary)]"
+        "range": "bg-(--ui-secondary)",
+        "thumb": "ring-(--ui-secondary) focus-visible:outline-(--ui-secondary)/50"
       },
       "success": {
-        "range": "bg-[var(--ui-success)]",
-        "thumb": "ring-[var(--ui-success)] focus-visible:outline-[var(--ui-success)]"
+        "range": "bg-(--ui-success)",
+        "thumb": "ring-(--ui-success) focus-visible:outline-(--ui-success)/50"
       },
       "info": {
-        "range": "bg-[var(--ui-info)]",
-        "thumb": "ring-[var(--ui-info)] focus-visible:outline-[var(--ui-info)]"
+        "range": "bg-(--ui-info)",
+        "thumb": "ring-(--ui-info) focus-visible:outline-(--ui-info)/50"
       },
       "warning": {
-        "range": "bg-[var(--ui-warning)]",
-        "thumb": "ring-[var(--ui-warning)] focus-visible:outline-[var(--ui-warning)]"
+        "range": "bg-(--ui-warning)",
+        "thumb": "ring-(--ui-warning) focus-visible:outline-(--ui-warning)/50"
       },
       "error": {
-        "range": "bg-[var(--ui-error)]",
-        "thumb": "ring-[var(--ui-error)] focus-visible:outline-[var(--ui-error)]"
+        "range": "bg-(--ui-error)",
+        "thumb": "ring-(--ui-error) focus-visible:outline-(--ui-error)/50"
       },
       "neutral": {
-        "range": "bg-[var(--ui-bg-inverted)]",
-        "thumb": "ring-[var(--ui-border-inverted)] focus-visible:outline-[var(--ui-border-inverted)]/50"
+        "range": "bg-(--ui-bg-inverted)",
+        "thumb": "ring-(--ui-border-inverted) focus-visible:outline-(--ui-border-inverted)/50"
       }
     },
     "size": {
@@ -71,78 +94,78 @@ export default {
   },
   "compoundVariants": [
     {
-      "orientation": "horizontal" as const,
-      "size": "xs" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "class": {
         "track": "h-[6px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "sm" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "class": {
         "track": "h-[7px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "md" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
       "class": {
         "track": "h-[8px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "lg" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
       "class": {
         "track": "h-[9px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "xl" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
       "class": {
         "track": "h-[10px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "xs" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "class": {
         "track": "w-[6px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "sm" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "class": {
         "track": "w-[7px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "md" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
       "class": {
         "track": "w-[8px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "lg" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
       "class": {
         "track": "w-[9px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "xl" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
       "class": {
         "track": "w-[10px]"
       }
     }
   ],
   "defaultVariants": {
-    "size": "md" as const,
-    "color": "primary" as const
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number]
   }
 }

package/.nuxt/ui/stepper.ts

@@ -0,0 +1,202 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+export default {
+  "slots": {
+    "root": "flex gap-4",
+    "header": "flex",
+    "item": "group text-center relative w-full",
+    "container": "relative",
+    "trigger": "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-(--ui-bg) group-data-[state=active]:text-(--ui-bg) text-(--ui-text-muted) bg-(--ui-bg-elevated) focus-visible:outline-2 focus-visible:outline-offset-2",
+    "indicator": "flex items-center justify-center size-full",
+    "icon": "shrink-0",
+    "separator": "absolute rounded-full group-data-[disabled]:opacity-75 bg-(--ui-border-accented)",
+    "wrapper": "",
+    "title": "font-medium text-(--ui-text)",
+    "description": "text-(--ui-text-muted) text-wrap",
+    "content": "size-full"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex-col",
+        "container": "flex justify-center",
+        "separator": "top-[calc(50%-2px)] h-0.5",
+        "wrapper": "mt-1"
+      },
+      "vertical": {
+        "header": "flex-col gap-4",
+        "item": "flex text-start",
+        "separator": "start-[calc(50%-1px)] -bottom-[10px] w-0.5"
+      }
+    },
+    "size": {
+      "xs": {
+        "trigger": "size-6 text-xs",
+        "icon": "size-3",
+        "title": "text-xs",
+        "description": "text-xs",
+        "wrapper": "mt-1.5"
+      },
+      "sm": {
+        "trigger": "size-8 text-sm",
+        "icon": "size-4",
+        "title": "text-xs",
+        "description": "text-xs",
+        "wrapper": "mt-2"
+      },
+      "md": {
+        "trigger": "size-10 text-base",
+        "icon": "size-5",
+        "title": "text-sm",
+        "description": "text-sm",
+        "wrapper": "mt-2.5"
+      },
+      "lg": {
+        "trigger": "size-12 text-lg",
+        "icon": "size-6",
+        "title": "text-base",
+        "description": "text-base",
+        "wrapper": "mt-3"
+      },
+      "xl": {
+        "trigger": "size-14 text-xl",
+        "icon": "size-7",
+        "title": "text-lg",
+        "description": "text-lg",
+        "wrapper": "mt-3.5"
+      }
+    },
+    "color": {
+      "primary": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-primary) group-data-[state=active]:bg-(--ui-primary) focus-visible:outline-(--ui-primary)",
+        "separator": "group-data-[state=completed]:bg-(--ui-primary)"
+      },
+      "secondary": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-secondary) group-data-[state=active]:bg-(--ui-secondary) focus-visible:outline-(--ui-secondary)",
+        "separator": "group-data-[state=completed]:bg-(--ui-secondary)"
+      },
+      "success": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-success) group-data-[state=active]:bg-(--ui-success) focus-visible:outline-(--ui-success)",
+        "separator": "group-data-[state=completed]:bg-(--ui-success)"
+      },
+      "info": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-info) group-data-[state=active]:bg-(--ui-info) focus-visible:outline-(--ui-info)",
+        "separator": "group-data-[state=completed]:bg-(--ui-info)"
+      },
+      "warning": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-warning) group-data-[state=active]:bg-(--ui-warning) focus-visible:outline-(--ui-warning)",
+        "separator": "group-data-[state=completed]:bg-(--ui-warning)"
+      },
+      "error": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-error) group-data-[state=active]:bg-(--ui-error) focus-visible:outline-(--ui-error)",
+        "separator": "group-data-[state=completed]:bg-(--ui-error)"
+      },
+      "neutral": {
+        "trigger": "group-data-[state=completed]:bg-(--ui-bg-inverted) group-data-[state=active]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)",
+        "separator": "group-data-[state=completed]:bg-(--ui-bg-inverted)"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": {
+        "separator": "start-[calc(50%+16px)] end-[calc(-50%+16px)]"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": {
+        "separator": "start-[calc(50%+20px)] end-[calc(-50%+20px)]"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": {
+        "separator": "start-[calc(50%+28px)] end-[calc(-50%+28px)]"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": {
+        "separator": "start-[calc(50%+32px)] end-[calc(-50%+32px)]"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": {
+        "separator": "start-[calc(50%+36px)] end-[calc(-50%+36px)]"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
+      "class": {
+        "separator": "top-[30px]",
+        "item": "gap-1.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
+      "class": {
+        "separator": "top-[38px]",
+        "item": "gap-2"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
+      "class": {
+        "separator": "top-[46px]",
+        "item": "gap-2.5"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
+      "class": {
+        "separator": "top-[54px]",
+        "item": "gap-3"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
+      "class": {
+        "separator": "top-[62px]",
+        "item": "gap-3.5"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number]
+  }
+}

package/.nuxt/ui/switch.ts

@@ -1,49 +1,67 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
 export default {
   "slots": {
     "root": "relative flex items-start",
     "base": [
-      "inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]",
+      "inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-(--ui-bg-accented)",
       "transition-colors duration-200"
     ],
     "container": "flex items-center",
-    "thumb": "group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
+    "thumb": "group pointer-events-none rounded-full bg-(--ui-bg) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center",
     "icon": [
-      "absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12",
+      "absolute shrink-0 group-data-[state=unchecked]:text-(--ui-text-dimmed) opacity-0 size-10/12",
       "transition-[color,opacity] duration-200"
     ],
     "wrapper": "ms-2",
-    "label": "block font-medium text-[var(--ui-text)]",
-    "description": "text-[var(--ui-text-muted)]"
+    "label": "block font-medium text-(--ui-text)",
+    "description": "text-(--ui-text-muted)"
   },
   "variants": {
     "color": {
       "primary": {
-        "base": "data-[state=checked]:bg-[var(--ui-primary)] focus-visible:ring-[var(--ui-primary)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-primary)]"
+        "base": "data-[state=checked]:bg-(--ui-primary) focus-visible:outline-(--ui-primary)",
+        "icon": "group-data-[state=checked]:text-(--ui-primary)"
       },
       "secondary": {
-        "base": "data-[state=checked]:bg-[var(--ui-secondary)] focus-visible:ring-[var(--ui-secondary)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-secondary)]"
+        "base": "data-[state=checked]:bg-(--ui-secondary) focus-visible:outline-(--ui-secondary)",
+        "icon": "group-data-[state=checked]:text-(--ui-secondary)"
       },
       "success": {
-        "base": "data-[state=checked]:bg-[var(--ui-success)] focus-visible:ring-[var(--ui-success)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-success)]"
+        "base": "data-[state=checked]:bg-(--ui-success) focus-visible:outline-(--ui-success)",
+        "icon": "group-data-[state=checked]:text-(--ui-success)"
       },
       "info": {
-        "base": "data-[state=checked]:bg-[var(--ui-info)] focus-visible:ring-[var(--ui-info)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-info)]"
+        "base": "data-[state=checked]:bg-(--ui-info) focus-visible:outline-(--ui-info)",
+        "icon": "group-data-[state=checked]:text-(--ui-info)"
       },
       "warning": {
-        "base": "data-[state=checked]:bg-[var(--ui-warning)] focus-visible:ring-[var(--ui-warning)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-warning)]"
+        "base": "data-[state=checked]:bg-(--ui-warning) focus-visible:outline-(--ui-warning)",
+        "icon": "group-data-[state=checked]:text-(--ui-warning)"
       },
       "error": {
-        "base": "data-[state=checked]:bg-[var(--ui-error)] focus-visible:ring-[var(--ui-error)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-error)]"
+        "base": "data-[state=checked]:bg-(--ui-error) focus-visible:outline-(--ui-error)",
+        "icon": "group-data-[state=checked]:text-(--ui-error)"
       },
       "neutral": {
-        "base": "data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]",
-        "icon": "group-data-[state=checked]:text-[var(--ui-text-highlighted)]"
+        "base": "data-[state=checked]:bg-(--ui-bg-inverted) focus-visible:outline-(--ui-border-inverted)",
+        "icon": "group-data-[state=checked]:text-(--ui-text-highlighted)"
       }
     },
     "size": {
@@ -95,7 +113,7 @@ export default {
     },
     "required": {
       "true": {
-        "label": "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
+        "label": "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
       }
     },
     "disabled": {
@@ -107,7 +125,7 @@ export default {
     }
   },
   "defaultVariants": {
-    "color": "primary" as const,
-    "size": "md" as const
+    "color": "primary" as typeof color[number],
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/table.ts

@@ -1,25 +1,42 @@
+const loadingAnimation = [
+  "carousel",
+  "carousel-inverse",
+  "swing",
+  "elastic"
+] as const
+
+const loadingColor = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
 export default {
   "slots": {
     "root": "relative overflow-auto",
     "base": "min-w-full overflow-clip",
     "caption": "sr-only",
-    "thead": "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]",
-    "tbody": "divide-y divide-[var(--ui-border)]",
-    "tr": "data-[selected=true]:bg-[var(--ui-bg-elevated)]/50",
-    "th": "px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
-    "td": "p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0",
-    "empty": "py-6 text-center text-sm text-[var(--ui-text-muted)]"
+    "thead": "relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-(--ui-border-accented)",
+    "tbody": "divide-y divide-(--ui-border) [&>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)",
+    "tr": "data-[selected=true]:bg-(--ui-bg-elevated)/50",
+    "th": "px-4 py-3.5 text-sm text-(--ui-text-highlighted) text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0",
+    "td": "p-4 text-sm text-(--ui-text-muted) whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+    "empty": "py-6 text-center text-sm text-(--ui-text-muted)"
   },
   "variants": {
     "pinned": {
       "true": {
-        "th": "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
-        "td": "sticky bg-[var(--ui-bg)]/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
+        "th": "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0",
+        "td": "sticky bg-(--ui-bg)/75 data-[pinned=left]:left-0 data-[pinned=right]:right-0"
       }
     },
     "sticky": {
       "true": {
-        "thead": "sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur"
+        "thead": "sticky top-0 inset-x-0 bg-(--ui-bg)/75 z-[1] backdrop-blur"
       }
     },
     "loading": {
@@ -46,84 +63,84 @@ export default {
   "compoundVariants": [
     {
       "loading": true,
-      "loadingColor": "primary" as const,
+      "loadingColor": "primary" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-primary)]"
+        "thead": "after:bg-(--ui-primary)"
       }
     },
     {
       "loading": true,
-      "loadingColor": "secondary" as const,
+      "loadingColor": "secondary" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-secondary)]"
+        "thead": "after:bg-(--ui-secondary)"
       }
     },
     {
       "loading": true,
-      "loadingColor": "success" as const,
+      "loadingColor": "success" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-success)]"
+        "thead": "after:bg-(--ui-success)"
       }
     },
     {
       "loading": true,
-      "loadingColor": "info" as const,
+      "loadingColor": "info" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-info)]"
+        "thead": "after:bg-(--ui-info)"
       }
     },
     {
       "loading": true,
-      "loadingColor": "warning" as const,
+      "loadingColor": "warning" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-warning)]"
+        "thead": "after:bg-(--ui-warning)"
       }
     },
     {
       "loading": true,
-      "loadingColor": "error" as const,
+      "loadingColor": "error" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-error)]"
+        "thead": "after:bg-(--ui-error)"
       }
     },
     {
       "loading": true,
-      "loadingColor": "neutral" as const,
+      "loadingColor": "neutral" as typeof loadingColor[number],
       "class": {
-        "thead": "after:bg-[var(--ui-bg-inverted)]"
+        "thead": "after:bg-(--ui-bg-inverted)"
       }
     },
     {
       "loading": true,
-      "loadingAnimation": "carousel" as const,
+      "loadingAnimation": "carousel" as typeof loadingAnimation[number],
       "class": {
-        "thead": "after:animate-[carousel_2s_ease-in-out_infinite]"
+        "thead": "after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]"
       }
     },
     {
       "loading": true,
-      "loadingAnimation": "carousel-inverse" as const,
+      "loadingAnimation": "carousel-inverse" as typeof loadingAnimation[number],
       "class": {
-        "thead": "after:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+        "thead": "after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
       }
     },
     {
       "loading": true,
-      "loadingAnimation": "swing" as const,
+      "loadingAnimation": "swing" as typeof loadingAnimation[number],
       "class": {
         "thead": "after:animate-[swing_2s_ease-in-out_infinite]"
       }
     },
     {
       "loading": true,
-      "loadingAnimation": "elastic" as const,
+      "loadingAnimation": "elastic" as typeof loadingAnimation[number],
       "class": {
         "thead": "after:animate-[elastic_2s_ease-in-out_infinite]"
       }
     }
   ],
   "defaultVariants": {
-    "loadingColor": "primary" as const,
-    "loadingAnimation": "carousel" as const
+    "loadingColor": "primary" as typeof loadingColor[number],
+    "loadingAnimation": "carousel" as typeof loadingAnimation[number]
   }
 }