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

package/.nuxt/ui/select.ts

@@ -1,29 +1,65 @@
+const buttonGroup = [
+  "horizontal",
+  "vertical"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const variant = [
+  "outline",
+  "soft",
+  "subtle",
+  "ghost",
+  "none"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const type = [
+  "file"
+] as const
+
 export default {
   "slots": {
     "base": [
       "relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
       "transition-colors"
     ],
-    "leading": "absolute inset-y-0 start-0 flex items-center" as const,
-    "leadingIcon": "shrink-0 text-[var(--ui-text-dimmed)]",
+    "leading": "absolute inset-y-0 start-0 flex items-center",
+    "leadingIcon": "shrink-0 text-(--ui-text-dimmed)",
     "leadingAvatar": "shrink-0",
     "leadingAvatarSize": "",
-    "trailing": "absolute inset-y-0 end-0 flex items-center" as const,
-    "trailingIcon": "shrink-0 text-[var(--ui-text-dimmed)]",
-    "value": "truncate group-data-placeholder:text-[var(--ui-text-dimmed)]",
-    "arrow": "fill-[var(--ui-border)]",
-    "content": "max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    "viewport": "divide-y divide-[var(--ui-border)] scroll-py-1",
+    "trailing": "absolute inset-y-0 end-0 flex items-center",
+    "trailingIcon": "shrink-0 text-(--ui-text-dimmed)",
+    "value": "truncate pointer-events-none",
+    "placeholder": "truncate text-(--ui-text-dimmed)",
+    "arrow": "fill-(--ui-border)",
+    "content": "max-h-60 w-(--reka-popper-anchor-width) bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    "viewport": "divide-y divide-(--ui-border) scroll-py-1",
     "group": "p-1 isolate",
-    "empty": "py-2 text-center text-sm text-[var(--ui-text-muted)]",
-    "label": "font-semibold text-[var(--ui-text-highlighted)]",
-    "separator": "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    "empty": "py-2 text-center text-sm text-(--ui-text-muted)",
+    "label": "font-semibold text-(--ui-text-highlighted)",
+    "separator": "-mx-1 my-1 h-px bg-(--ui-border)",
     "item": [
-      "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50",
+      "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50",
       "transition-colors before:transition-colors"
     ],
     "itemLeadingIcon": [
-      "shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]",
+      "shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)",
       "transition-colors"
     ],
     "itemLeadingAvatar": "shrink-0",
@@ -42,8 +78,8 @@ export default {
     "size": {
       "xs": {
         "base": "px-2 py-1 text-xs gap-1",
-        "leading": "ps-2" as const,
-        "trailing": "pe-2" as const,
+        "leading": "ps-2",
+        "trailing": "pe-2",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs",
         "trailingIcon": "size-4",
@@ -57,8 +93,8 @@ export default {
       },
       "sm": {
         "base": "px-2.5 py-1.5 text-xs gap-1.5",
-        "leading": "ps-2.5" as const,
-        "trailing": "pe-2.5" as const,
+        "leading": "ps-2.5",
+        "trailing": "pe-2.5",
         "leadingIcon": "size-4",
         "leadingAvatarSize": "3xs",
         "trailingIcon": "size-4",
@@ -72,8 +108,8 @@ export default {
       },
       "md": {
         "base": "px-2.5 py-1.5 text-sm gap-1.5",
-        "leading": "ps-2.5" as const,
-        "trailing": "pe-2.5" as const,
+        "leading": "ps-2.5",
+        "trailing": "pe-2.5",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-5",
@@ -87,8 +123,8 @@ export default {
       },
       "lg": {
         "base": "px-3 py-2 text-sm gap-2",
-        "leading": "ps-3" as const,
-        "trailing": "pe-3" as const,
+        "leading": "ps-3",
+        "trailing": "pe-3",
         "leadingIcon": "size-5",
         "leadingAvatarSize": "2xs",
         "trailingIcon": "size-5",
@@ -102,8 +138,8 @@ export default {
       },
       "xl": {
         "base": "px-3 py-2 text-base gap-2",
-        "leading": "ps-3" as const,
-        "trailing": "pe-3" as const,
+        "leading": "ps-3",
+        "trailing": "pe-3",
         "leadingIcon": "size-6",
         "leadingAvatarSize": "xs",
         "trailingIcon": "size-6",
@@ -117,11 +153,11 @@ export default {
       }
     },
     "variant": {
-      "outline": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]",
-      "soft": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50",
-      "subtle": "text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]",
-      "ghost": "text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent",
-      "none": "text-[var(--ui-text-highlighted)] bg-transparent"
+      "outline": "text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented)",
+      "soft": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg-elevated)/50",
+      "subtle": "text-(--ui-text-highlighted) bg-(--ui-bg-elevated) ring ring-inset ring-(--ui-border-accented)",
+      "ghost": "text-(--ui-text-highlighted) bg-transparent hover:bg-(--ui-bg-elevated) focus:bg-(--ui-bg-elevated) disabled:bg-transparent dark:disabled:bg-transparent",
+      "none": "text-(--ui-text-highlighted) bg-transparent"
     },
     "color": {
       "primary": "",
@@ -145,149 +181,149 @@ export default {
       "true": ""
     },
     "type": {
-      "file": "file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none"
+      "file": "file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none"
     }
   },
   "compoundVariants": [
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-secondary)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-success)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-info)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-warning)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
     },
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-primary)]"
+      "class": "ring ring-inset ring-(--ui-primary)"
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-secondary)]"
+      "class": "ring ring-inset ring-(--ui-secondary)"
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-success)]"
+      "class": "ring ring-inset ring-(--ui-success)"
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-info)]"
+      "class": "ring ring-inset ring-(--ui-info)"
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-warning)]"
+      "class": "ring ring-inset ring-(--ui-warning)"
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-error)]"
+      "class": "ring ring-inset ring-(--ui-error)"
     },
     {
-      "color": "neutral" as const,
+      "color": "neutral" as typeof color[number],
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
     },
     {
-      "color": "neutral" as const,
+      "color": "neutral" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-[var(--ui-border-inverted)]"
+      "class": "ring ring-inset ring-(--ui-border-inverted)"
     },
     {
       "leading": true,
-      "size": "xs" as const,
+      "size": "xs" as typeof size[number],
       "class": "ps-7"
     },
     {
       "leading": true,
-      "size": "sm" as const,
+      "size": "sm" as typeof size[number],
       "class": "ps-8"
     },
     {
       "leading": true,
-      "size": "md" as const,
+      "size": "md" as typeof size[number],
       "class": "ps-9"
     },
     {
       "leading": true,
-      "size": "lg" as const,
+      "size": "lg" as typeof size[number],
       "class": "ps-10"
     },
     {
       "leading": true,
-      "size": "xl" as const,
+      "size": "xl" as typeof size[number],
       "class": "ps-11"
     },
     {
       "trailing": true,
-      "size": "xs" as const,
+      "size": "xs" as typeof size[number],
       "class": "pe-7"
     },
     {
       "trailing": true,
-      "size": "sm" as const,
+      "size": "sm" as typeof size[number],
       "class": "pe-8"
     },
     {
       "trailing": true,
-      "size": "md" as const,
+      "size": "md" as typeof size[number],
       "class": "pe-9"
     },
     {
       "trailing": true,
-      "size": "lg" as const,
+      "size": "lg" as typeof size[number],
       "class": "pe-10"
     },
     {
       "trailing": true,
-      "size": "xl" as const,
+      "size": "xl" as typeof size[number],
       "class": "pe-11"
     },
     {
@@ -307,8 +343,8 @@ export default {
     }
   ],
   "defaultVariants": {
-    "size": "md" as const,
-    "color": "primary" as const,
-    "variant": "outline" as const
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number],
+    "variant": "outline" as typeof variant[number]
   }
 }

package/.nuxt/ui/separator.ts

@@ -1,8 +1,37 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+const type = [
+  "solid",
+  "dashed",
+  "dotted"
+] as const
+
 export default {
   "slots": {
     "root": "flex items-center align-center text-center",
     "border": "",
-    "container": "font-medium text-[var(--ui-text)] flex",
+    "container": "font-medium text-(--ui-text) flex",
     "icon": "shrink-0 size-5",
     "avatar": "shrink-0",
     "avatarSize": "2xs",
@@ -11,25 +40,25 @@ export default {
   "variants": {
     "color": {
       "primary": {
-        "border": "border-[var(--ui-primary)]"
+        "border": "border-(--ui-primary)"
       },
       "secondary": {
-        "border": "border-[var(--ui-secondary)]"
+        "border": "border-(--ui-secondary)"
       },
       "success": {
-        "border": "border-[var(--ui-success)]"
+        "border": "border-(--ui-success)"
       },
       "info": {
-        "border": "border-[var(--ui-info)]"
+        "border": "border-(--ui-info)"
       },
       "warning": {
-        "border": "border-[var(--ui-warning)]"
+        "border": "border-(--ui-warning)"
       },
       "error": {
-        "border": "border-[var(--ui-error)]"
+        "border": "border-(--ui-error)"
       },
       "neutral": {
-        "border": "border-[var(--ui-border)]"
+        "border": "border-(--ui-border)"
       }
     },
     "orientation": {
@@ -65,79 +94,79 @@ export default {
   },
   "compoundVariants": [
     {
-      "orientation": "horizontal" as const,
-      "size": "xs" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "class": {
         "border": "border-t"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "sm" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "class": {
         "border": "border-t-[2px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "md" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
       "class": {
         "border": "border-t-[3px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "lg" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
       "class": {
         "border": "border-t-[4px]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "xl" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
       "class": {
         "border": "border-t-[5px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "xs" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "class": {
         "border": "border-s"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "sm" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "class": {
         "border": "border-s-[2px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "md" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
       "class": {
         "border": "border-s-[3px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "lg" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
       "class": {
         "border": "border-s-[4px]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "size": "xl" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
       "class": {
         "border": "border-s-[5px]"
       }
     }
   ],
   "defaultVariants": {
-    "color": "neutral" as const,
-    "size": "xs" as const,
-    "type": "solid" as const
+    "color": "neutral" as typeof color[number],
+    "size": "xs" as typeof size[number],
+    "type": "solid" as typeof type[number]
   }
 }

package/.nuxt/ui/skeleton.ts

@@ -1,3 +1,3 @@
 export default {
-  "base": "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-[var(--ui-bg-elevated)]"
+  "base": "animate-pulse rounded-[calc(var(--ui-radius)*1.5)] bg-(--ui-bg-elevated)"
 }

package/.nuxt/ui/slideover.ts

@@ -1,12 +1,20 @@
+const side = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+] as const
+
 export default {
   "slots": {
-    "overlay": "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
-    "content": "fixed bg-[var(--ui-bg)] divide-y divide-[var(--ui-border)] sm:ring ring-[var(--ui-border)] sm:shadow-lg flex flex-col focus:outline-none",
-    "header": "px-4 py-5 sm:px-6",
+    "overlay": "fixed inset-0 bg-(--ui-bg-elevated)/75",
+    "content": "fixed bg-(--ui-bg) divide-y divide-(--ui-border) sm:ring ring-(--ui-border) sm:shadow-lg flex flex-col focus:outline-none",
+    "header": "flex items-center gap-1.5 p-4 sm:px-6 min-h-16",
+    "wrapper": "",
     "body": "flex-1 overflow-y-auto p-4 sm:p-6",
     "footer": "flex items-center gap-1.5 p-4 sm:px-6",
-    "title": "text-[var(--ui-text-highlighted)] font-semibold",
-    "description": "mt-1 text-[var(--ui-text-muted)] text-sm",
+    "title": "text-(--ui-text-highlighted) font-semibold",
+    "description": "mt-1 text-(--ui-text-muted) text-sm",
     "close": "absolute top-4 end-4"
   },
   "variants": {
@@ -33,28 +41,28 @@ export default {
   "compoundVariants": [
     {
       "transition": true,
-      "side": "top" as const,
+      "side": "top" as typeof side[number],
       "class": {
         "content": "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
       }
     },
     {
       "transition": true,
-      "side": "right" as const,
+      "side": "right" as typeof side[number],
       "class": {
         "content": "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
       }
     },
     {
       "transition": true,
-      "side": "bottom" as const,
+      "side": "bottom" as typeof side[number],
       "class": {
         "content": "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
       }
     },
     {
       "transition": true,
-      "side": "left" as const,
+      "side": "left" as typeof side[number],
       "class": {
         "content": "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
       }