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

package/.nuxt/ui/input-menu.ts

@@ -1,3 +1,38 @@
+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": {
     "root": "relative inline-flex items-center",
@@ -5,25 +40,25 @@ export default {
       "rounded-[calc(var(--ui-radius)*1.5)]",
       "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": "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75" as const,
-    "trailingIcon": "shrink-0 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": "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
+    "trailingIcon": "shrink-0 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 gap-1.5 p-1.5 text-sm 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 gap-1.5 p-1.5 text-sm 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",
@@ -33,10 +68,10 @@ export default {
     "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
     "itemTrailingIcon": "shrink-0",
     "itemLabel": "truncate",
-    "tagsItem": "px-1.5 py-0.5 rounded-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    "tagsItem": "px-1.5 py-0.5 rounded-(--ui-radius) font-medium inline-flex items-center gap-0.5 ring ring-inset ring-(--ui-border-accented) bg-(--ui-bg-elevated) text-(--ui-text) data-disabled:cursor-not-allowed data-disabled:opacity-75",
     "tagsItemText": "truncate",
     "tagsItemDelete": [
-      "inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-accented)]/75 disabled:pointer-events-none",
+      "inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-(--ui-text-dimmed) hover:text-(--ui-text) hover:bg-(--ui-bg-accented)/75 disabled:pointer-events-none",
       "transition-colors"
     ],
     "tagsItemDeleteIcon": "",
@@ -56,8 +91,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",
@@ -73,8 +108,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",
@@ -90,8 +125,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",
@@ -107,8 +142,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",
@@ -124,8 +159,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",
@@ -141,11 +176,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": "",
@@ -169,222 +204,221 @@ 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"
     },
     "multiple": {
       "true": {
         "root": "flex-wrap",
-        "base": "",
-        "tagsInput": "border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+        "tagsInput": "border-0 bg-transparent placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
       },
       "false": {
-        "base": "w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+        "base": "w-full border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
       }
     }
   },
   "compoundVariants": [
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--primary)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-primary)"
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--secondary)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-secondary)"
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--success)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-success)"
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--info)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-info)"
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--warning)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-warning)"
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--error)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-error)"
     },
     {
-      "color": "neutral" as const,
+      "color": "neutral" as typeof color[number],
       "multiple": true,
       "variant": [
-        "outline" as const,
-        "subtle" as const
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
       ],
-      "class": "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]"
+      "class": "has-focus-visible:ring-2 has-focus-visible:ring-(--ui-border-inverted)"
     },
     {
-      "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"
     },
     {
@@ -404,8 +438,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]
   }
 }