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

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

@@ -0,0 +1,171 @@
+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
+
+export default {
+  "slots": {
+    "root": "relative inline-flex items-center gap-1.5",
+    "base": [
+      "rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+      "transition-colors"
+    ]
+  },
+  "variants": {
+    "size": {
+      "xs": {
+        "base": "size-6 text-xs"
+      },
+      "sm": {
+        "base": "size-7 text-xs"
+      },
+      "md": {
+        "base": "size-8 text-sm"
+      },
+      "lg": {
+        "base": "size-9 text-sm"
+      },
+      "xl": {
+        "base": "size-10 text-base"
+      }
+    },
+    "variant": {
+      "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": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    },
+    "highlight": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-primary)"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-secondary)"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-success)"
+    },
+    {
+      "color": "info" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-info)"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-warning)"
+    },
+    {
+      "color": "error" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-error)"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": [
+        "outline" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)"
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "highlight": true,
+      "class": "ring ring-inset ring-(--ui-border-inverted)"
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number],
+    "variant": "outline" as typeof variant[number]
+  }
+}

package/.nuxt/ui/popover.ts

@@ -1,6 +1,6 @@
 export default {
   "slots": {
-    "content": "bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none",
-    "arrow": "fill-[var(--ui-border)]"
+    "content": "bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto",
+    "arrow": "fill-(--ui-border)"
   }
 }

package/.nuxt/ui/progress.ts

@@ -1,11 +1,50 @@
+const animation = [
+  "carousel",
+  "carousel-inverse",
+  "swing",
+  "elastic"
+] as const
+
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl"
+] as const
+
+const step = [
+  "active",
+  "first",
+  "other",
+  "last"
+] as const
+
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
 export default {
   "slots": {
     "root": "gap-2",
-    "base": "relative overflow-hidden rounded-full bg-[var(--ui-bg-accented)]",
+    "base": "relative overflow-hidden rounded-full bg-(--ui-bg-accented)",
     "indicator": "rounded-full size-full transition-transform duration-200 ease-out",
-    "status": "flex justify-end text-[var(--ui-text-dimmed)] transition-[width] duration-200",
+    "status": "flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200",
     "steps": "grid items-end",
-    "step": "truncate text-end row-start-1 col-start-1 transition-opacity" as const
+    "step": "truncate text-end row-start-1 col-start-1 transition-opacity" as typeof step[number]
   },
   "variants": {
     "animation": {
@@ -16,32 +55,32 @@ export default {
     },
     "color": {
       "primary": {
-        "indicator": "bg-[var(--ui-primary)]",
-        "steps": "text-[var(--ui-primary)]"
+        "indicator": "bg-(--ui-primary)",
+        "steps": "text-(--ui-primary)"
       },
       "secondary": {
-        "indicator": "bg-[var(--ui-secondary)]",
-        "steps": "text-[var(--ui-secondary)]"
+        "indicator": "bg-(--ui-secondary)",
+        "steps": "text-(--ui-secondary)"
       },
       "success": {
-        "indicator": "bg-[var(--ui-success)]",
-        "steps": "text-[var(--ui-success)]"
+        "indicator": "bg-(--ui-success)",
+        "steps": "text-(--ui-success)"
       },
       "info": {
-        "indicator": "bg-[var(--ui-info)]",
-        "steps": "text-[var(--ui-info)]"
+        "indicator": "bg-(--ui-info)",
+        "steps": "text-(--ui-info)"
       },
       "warning": {
-        "indicator": "bg-[var(--ui-warning)]",
-        "steps": "text-[var(--ui-warning)]"
+        "indicator": "bg-(--ui-warning)",
+        "steps": "text-(--ui-warning)"
       },
       "error": {
-        "indicator": "bg-[var(--ui-error)]",
-        "steps": "text-[var(--ui-error)]"
+        "indicator": "bg-(--ui-error)",
+        "steps": "text-(--ui-error)"
       },
       "neutral": {
-        "indicator": "bg-[var(--ui-bg-inverted)]",
-        "steps": "text-[var(--ui-bg)]"
+        "indicator": "bg-(--ui-bg-inverted)",
+        "steps": "text-(--ui-bg)"
       }
     },
     "size": {
@@ -76,13 +115,13 @@ export default {
     },
     "step": {
       "active": {
-        "step": "opacity-100" as const
+        "step": "opacity-100" as typeof step[number]
       },
       "first": {
-        "step": "opacity-100 text-[var(--ui-text-muted)]" as const
+        "step": "opacity-100 text-(--ui-text-muted)" as typeof step[number]
       },
       "other": {
-        "step": "opacity-0" as const
+        "step": "opacity-0" as typeof step[number]
       },
       "last": {
         "step": ""
@@ -109,150 +148,150 @@ export default {
   "compoundVariants": [
     {
       "inverted": true,
-      "orientation": "horizontal" as const,
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "step": "text-start" as const,
+        "step": "text-start" as typeof step[number],
         "status": "flex-row-reverse"
       }
     },
     {
       "inverted": true,
-      "orientation": "vertical" as const,
+      "orientation": "vertical" as typeof orientation[number],
       "class": {
         "steps": "items-start",
         "status": "flex-col-reverse"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "2xs" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "2xs" as typeof size[number],
       "class": "h-px"
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "xs" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "class": "h-0.5"
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "sm" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "class": "h-1"
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "md" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "md" as typeof size[number],
       "class": "h-2"
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "lg" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
       "class": "h-3"
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "xl" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
       "class": "h-4"
     },
     {
-      "orientation": "horizontal" as const,
-      "size": "2xl" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "size": "2xl" as typeof size[number],
       "class": "h-5"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "2xs" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "2xs" as typeof size[number],
       "class": "w-px"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "xs" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "class": "w-0.5"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "sm" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "class": "w-1"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "md" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "md" as typeof size[number],
       "class": "w-2"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "lg" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "lg" as typeof size[number],
       "class": "w-3"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "xl" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "xl" as typeof size[number],
       "class": "w-4"
     },
     {
-      "orientation": "vertical" as const,
-      "size": "2xl" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "size": "2xl" as typeof size[number],
       "class": "w-5"
     },
     {
-      "orientation": "horizontal" as const,
-      "animation": "carousel" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "animation": "carousel" as typeof animation[number],
       "class": {
-        "indicator": "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"
+        "indicator": "data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "animation": "carousel" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "animation": "carousel" as typeof animation[number],
       "class": {
         "indicator": "data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "animation": "carousel-inverse" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "animation": "carousel-inverse" as typeof animation[number],
       "class": {
-        "indicator": "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]"
+        "indicator": "data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "animation": "carousel-inverse" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "animation": "carousel-inverse" as typeof animation[number],
       "class": {
         "indicator": "data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "animation": "swing" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "animation": "swing" as typeof animation[number],
       "class": {
         "indicator": "data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "animation": "swing" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "animation": "swing" as typeof animation[number],
       "class": {
         "indicator": "data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "horizontal" as const,
-      "animation": "elastic" as const,
+      "orientation": "horizontal" as typeof orientation[number],
+      "animation": "elastic" as typeof animation[number],
       "class": {
         "indicator": "data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"
       }
     },
     {
-      "orientation": "vertical" as const,
-      "animation": "elastic" as const,
+      "orientation": "vertical" as typeof orientation[number],
+      "animation": "elastic" as typeof animation[number],
       "class": {
         "indicator": "data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]"
       }
     }
   ],
   "defaultVariants": {
-    "animation": "carousel" as const,
-    "color": "primary" as const,
-    "size": "md" as const
+    "animation": "carousel" as typeof animation[number],
+    "color": "primary" as typeof color[number],
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/radio-group.ts

@@ -1,45 +1,68 @@
+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
+
 export default {
   "slots": {
     "root": "relative",
     "fieldset": "flex",
-    "legend": "mb-1 block font-medium text-[var(--ui-text)]",
+    "legend": "mb-1 block font-medium text-(--ui-text)",
     "item": "flex items-start",
-    "base": "rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[var(--ui-bg)]",
-    "indicator": "flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full",
+    "base": "rounded-full ring ring-inset ring-(--ui-border-accented) focus-visible:outline-2 focus-visible:outline-offset-2",
+    "indicator": "flex items-center justify-center size-full rounded-full after:bg-(--ui-bg) after:rounded-full",
     "container": "flex items-center",
     "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": "focus-visible:outline-[var(--ui-primary)]",
-        "indicator": "bg-[var(--ui-primary)]"
+        "base": "focus-visible:outline-(--ui-primary)",
+        "indicator": "bg-(--ui-primary)"
       },
       "secondary": {
-        "base": "focus-visible:outline-[var(--ui-secondary)]",
-        "indicator": "bg-[var(--ui-secondary)]"
+        "base": "focus-visible:outline-(--ui-secondary)",
+        "indicator": "bg-(--ui-secondary)"
       },
       "success": {
-        "base": "focus-visible:outline-[var(--ui-success)]",
-        "indicator": "bg-[var(--ui-success)]"
+        "base": "focus-visible:outline-(--ui-success)",
+        "indicator": "bg-(--ui-success)"
       },
       "info": {
-        "base": "focus-visible:outline-[var(--ui-info)]",
-        "indicator": "bg-[var(--ui-info)]"
+        "base": "focus-visible:outline-(--ui-info)",
+        "indicator": "bg-(--ui-info)"
       },
       "warning": {
-        "base": "focus-visible:outline-[var(--ui-warning)]",
-        "indicator": "bg-[var(--ui-warning)]"
+        "base": "focus-visible:outline-(--ui-warning)",
+        "indicator": "bg-(--ui-warning)"
       },
       "error": {
-        "base": "focus-visible:outline-[var(--ui-error)]",
-        "indicator": "bg-[var(--ui-error)]"
+        "base": "focus-visible:outline-(--ui-error)",
+        "indicator": "bg-(--ui-error)"
       },
       "neutral": {
-        "base": "focus-visible:outline-[var(--ui-border-inverted)]",
-        "indicator": "bg-[var(--ui-bg-inverted)]"
+        "base": "focus-visible:outline-(--ui-border-inverted)",
+        "indicator": "bg-(--ui-bg-inverted)"
       }
     },
     "orientation": {
@@ -101,12 +124,12 @@ export default {
     },
     "required": {
       "true": {
-        "legend": "after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]"
+        "legend": "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
       }
     }
   },
   "defaultVariants": {
-    "size": "md" as const,
-    "color": "primary" as const
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number]
   }
 }