@nuxt/ui 3.0.1 → 3.1.0

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

@@ -1,3 +1,5 @@
+import template from "/home/runner/work/ui/ui/src/theme/radio-group"
+
 const color = [
   "primary",
   "secondary",
@@ -8,11 +10,23 @@ const color = [
   "neutral"
 ] as const
 
+const variant = [
+  "list",
+  "card",
+  "table"
+] as const
+
 const orientation = [
   "horizontal",
   "vertical"
 ] as const
 
+const indicator = [
+  "start",
+  "end",
+  "hidden"
+] as const
+
 const size = [
   "xs",
   "sm",
@@ -21,99 +35,140 @@ const size = [
   "xl"
 ] as const
 
-export default {
+const result = typeof template === 'function' ? (template as Function)({
+  "prefix": "U",
+  "fonts": true,
+  "colorMode": true,
+  "theme": {
+    "colors": [
+      "primary",
+      "secondary",
+      "success",
+      "info",
+      "warning",
+      "error"
+    ],
+    "transitions": true
+  }
+}) : template
+
+const theme = {
   "slots": {
     "root": "relative",
-    "fieldset": "flex",
-    "legend": "mb-1 block font-medium text-(--ui-text)",
+    "fieldset": "flex gap-x-2",
+    "legend": "mb-1 block font-medium text-default",
     "item": "flex items-start",
-    "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-(--ui-text)",
-    "description": "text-(--ui-text-muted)"
+    "base": "rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
+    "indicator": "flex items-center justify-center size-full after:bg-default after:rounded-full" as typeof indicator[number],
+    "wrapper": "w-full",
+    "label": "block font-medium text-default",
+    "description": "text-muted"
   },
   "variants": {
     "color": {
       "primary": {
-        "base": "focus-visible:outline-(--ui-primary)",
-        "indicator": "bg-(--ui-primary)"
+        "base": "focus-visible:outline-primary",
+        "indicator": "bg-primary" as typeof indicator[number]
       },
       "secondary": {
-        "base": "focus-visible:outline-(--ui-secondary)",
-        "indicator": "bg-(--ui-secondary)"
+        "base": "focus-visible:outline-secondary",
+        "indicator": "bg-secondary" as typeof indicator[number]
       },
       "success": {
-        "base": "focus-visible:outline-(--ui-success)",
-        "indicator": "bg-(--ui-success)"
+        "base": "focus-visible:outline-success",
+        "indicator": "bg-success" as typeof indicator[number]
       },
       "info": {
-        "base": "focus-visible:outline-(--ui-info)",
-        "indicator": "bg-(--ui-info)"
+        "base": "focus-visible:outline-info",
+        "indicator": "bg-info" as typeof indicator[number]
       },
       "warning": {
-        "base": "focus-visible:outline-(--ui-warning)",
-        "indicator": "bg-(--ui-warning)"
+        "base": "focus-visible:outline-warning",
+        "indicator": "bg-warning" as typeof indicator[number]
       },
       "error": {
-        "base": "focus-visible:outline-(--ui-error)",
-        "indicator": "bg-(--ui-error)"
+        "base": "focus-visible:outline-error",
+        "indicator": "bg-error" as typeof indicator[number]
       },
       "neutral": {
-        "base": "focus-visible:outline-(--ui-border-inverted)",
-        "indicator": "bg-(--ui-bg-inverted)"
+        "base": "focus-visible:outline-inverted",
+        "indicator": "bg-inverted" as typeof indicator[number]
+      }
+    },
+    "variant": {
+      "list": {
+        "item": ""
+      },
+      "card": {
+        "item": "border border-muted rounded-lg"
+      },
+      "table": {
+        "item": "border border-muted"
       }
     },
     "orientation": {
       "horizontal": {
-        "fieldset": "flex-row",
-        "wrapper": "me-2"
+        "fieldset": "flex-row"
       },
       "vertical": {
         "fieldset": "flex-col"
       }
     },
+    "indicator": {
+      "start": {
+        "item": "flex-row",
+        "wrapper": "ms-2"
+      },
+      "end": {
+        "item": "flex-row-reverse",
+        "wrapper": "me-2"
+      },
+      "hidden": {
+        "base": "sr-only",
+        "wrapper": "text-center"
+      }
+    },
     "size": {
       "xs": {
-        "fieldset": "gap-0.5",
+        "fieldset": "gap-y-0.5",
         "legend": "text-xs",
         "base": "size-3",
         "item": "text-xs",
         "container": "h-4",
-        "indicator": "after:size-1"
+        "indicator": "after:size-1" as typeof indicator[number]
       },
       "sm": {
-        "fieldset": "gap-0.5",
+        "fieldset": "gap-y-0.5",
         "legend": "text-xs",
         "base": "size-3.5",
         "item": "text-xs",
         "container": "h-4",
-        "indicator": "after:size-1"
+        "indicator": "after:size-1" as typeof indicator[number]
       },
       "md": {
-        "fieldset": "gap-1",
+        "fieldset": "gap-y-1",
         "legend": "text-sm",
         "base": "size-4",
         "item": "text-sm",
         "container": "h-5",
-        "indicator": "after:size-1.5"
+        "indicator": "after:size-1.5" as typeof indicator[number]
       },
       "lg": {
-        "fieldset": "gap-1",
+        "fieldset": "gap-y-1",
         "legend": "text-sm",
         "base": "size-4.5",
         "item": "text-sm",
         "container": "h-5",
-        "indicator": "after:size-1.5"
+        "indicator": "after:size-1.5" as typeof indicator[number]
       },
       "xl": {
-        "fieldset": "gap-1.5",
+        "fieldset": "gap-y-1.5",
         "legend": "text-base",
         "base": "size-5",
         "item": "text-base",
         "container": "h-6",
-        "indicator": "after:size-2"
+        "indicator": "after:size-2" as typeof indicator[number]
       }
     },
     "disabled": {
@@ -124,12 +179,193 @@ export default {
     },
     "required": {
       "true": {
-        "legend": "after:content-['*'] after:ms-0.5 after:text-(--ui-error)"
+        "legend": "after:content-['*'] after:ms-0.5 after:text-error"
       }
     }
   },
+  "compoundVariants": [
+    {
+      "size": "xs" as typeof size[number],
+      "variant": [
+        "card" as typeof variant[number],
+        "table" as typeof variant[number]
+      ],
+      "class": {
+        "item": "p-2.5"
+      }
+    },
+    {
+      "size": "sm" as typeof size[number],
+      "variant": [
+        "card" as typeof variant[number],
+        "table" as typeof variant[number]
+      ],
+      "class": {
+        "item": "p-3"
+      }
+    },
+    {
+      "size": "md" as typeof size[number],
+      "variant": [
+        "card" as typeof variant[number],
+        "table" as typeof variant[number]
+      ],
+      "class": {
+        "item": "p-3.5"
+      }
+    },
+    {
+      "size": "lg" as typeof size[number],
+      "variant": [
+        "card" as typeof variant[number],
+        "table" as typeof variant[number]
+      ],
+      "class": {
+        "item": "p-4"
+      }
+    },
+    {
+      "size": "xl" as typeof size[number],
+      "variant": [
+        "card" as typeof variant[number],
+        "table" as typeof variant[number]
+      ],
+      "class": {
+        "item": "p-4.5"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "first-of-type:rounded-l-lg last-of-type:rounded-r-lg",
+        "fieldset": "gap-0 -space-x-px"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
+        "fieldset": "gap-0 -space-y-px"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-error"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "card" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:border-inverted"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-secondary/10 has-data-[state=checked]:border-secondary/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-success/10 has-data-[state=checked]:border-success/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-info/10 has-data-[state=checked]:border-info/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-warning/10 has-data-[state=checked]:border-warning/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-error/10 has-data-[state=checked]:border-error/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "variant": "table" as typeof variant[number],
+      "class": {
+        "item": "has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]"
+      }
+    },
+    {
+      "variant": [
+        "card" as typeof variant[number],
+        "table" as typeof variant[number]
+      ],
+      "disabled": true,
+      "class": {
+        "item": "cursor-not-allowed opacity-75"
+      }
+    }
+  ],
   "defaultVariants": {
     "size": "md" as typeof size[number],
-    "color": "primary" as typeof color[number]
+    "color": "primary" as typeof color[number],
+    "variant": "list" as typeof variant[number],
+    "orientation": "vertical" as typeof orientation[number],
+    "indicator": "start" as typeof indicator[number]
   }
-}
+}
+
+export default result as typeof theme

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

@@ -1,3 +1,5 @@
+import template from "/home/runner/work/ui/ui/src/theme/select-menu"
+
 const buttonGroup = [
   "horizontal",
   "vertical"
@@ -33,33 +35,53 @@ const type = [
   "file"
 ] as const
 
-export default {
+const result = typeof template === 'function' ? (template as Function)({
+  "prefix": "U",
+  "fonts": true,
+  "colorMode": true,
+  "theme": {
+    "colors": [
+      "primary",
+      "secondary",
+      "success",
+      "info",
+      "warning",
+      "error"
+    ],
+    "transitions": true
+  }
+}) : template
+
+const theme = {
   "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",
+      "relative group rounded-md 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",
-    "leadingIcon": "shrink-0 text-(--ui-text-dimmed)",
+    "leadingIcon": "shrink-0 text-dimmed",
     "leadingAvatar": "shrink-0",
     "leadingAvatarSize": "",
     "trailing": "absolute inset-y-0 end-0 flex items-center",
-    "trailingIcon": "shrink-0 text-(--ui-text-dimmed)",
+    "trailingIcon": "shrink-0 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",
+    "placeholder": "truncate text-dimmed",
+    "arrow": "fill-default",
+    "content": [
+      "max-h-60 w-(--reka-select-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-select-content-transform-origin) pointer-events-auto",
+      "origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)"
+    ],
+    "viewport": "divide-y divide-default scroll-py-1",
     "group": "p-1 isolate",
-    "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)",
+    "empty": "py-2 text-center text-sm text-muted",
+    "label": "font-semibold text-highlighted",
+    "separator": "-mx-1 my-1 h-px bg-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-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-highlighted:before:bg-(--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-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50",
       "transition-colors before:transition-colors"
     ],
     "itemLeadingIcon": [
-      "shrink-0 text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text)",
+      "shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default",
       "transition-colors"
     ],
     "itemLeadingAvatar": "shrink-0",
@@ -69,7 +91,7 @@ export default {
     "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
     "itemTrailingIcon": "shrink-0",
     "itemLabel": "truncate",
-    "input": "border-b border-(--ui-border)",
+    "input": "border-b border-default",
     "focusScope": "flex flex-col min-h-0"
   },
   "variants": {
@@ -155,11 +177,11 @@ export default {
       }
     },
     "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"
+      "outline": "text-highlighted bg-default ring ring-inset ring-accented",
+      "soft": "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
+      "subtle": "text-highlighted bg-elevated ring ring-inset ring-accented",
+      "ghost": "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
+      "none": "text-highlighted bg-transparent"
     },
     "color": {
       "primary": "",
@@ -183,7 +205,7 @@ export default {
       "true": ""
     },
     "type": {
-      "file": "file:me-1.5 file:font-medium file:text-(--ui-text-muted) file:outline-none"
+      "file": "file:me-1.5 file:font-medium file:text-muted file:outline-none"
     }
   },
   "compoundVariants": [
@@ -193,7 +215,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
@@ -201,7 +223,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
@@ -209,7 +231,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success"
     },
     {
       "color": "info" as typeof color[number],
@@ -217,7 +239,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info"
     },
     {
       "color": "warning" as typeof color[number],
@@ -225,7 +247,7 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning"
     },
     {
       "color": "error" as typeof color[number],
@@ -233,37 +255,37 @@ export default {
         "outline" as typeof variant[number],
         "subtle" as typeof variant[number]
       ],
-      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error"
     },
     {
       "color": "primary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-primary)"
+      "class": "ring ring-inset ring-primary"
     },
     {
       "color": "secondary" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-secondary)"
+      "class": "ring ring-inset ring-secondary"
     },
     {
       "color": "success" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-success)"
+      "class": "ring ring-inset ring-success"
     },
     {
       "color": "info" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-info)"
+      "class": "ring ring-inset ring-info"
     },
     {
       "color": "warning" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-warning)"
+      "class": "ring ring-inset ring-warning"
     },
     {
       "color": "error" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-error)"
+      "class": "ring ring-inset ring-error"
     },
     {
       "color": "neutral" as typeof color[number],
@@ -271,12 +293,12 @@ export default {
         "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)"
+      "class": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted"
     },
     {
       "color": "neutral" as typeof color[number],
       "highlight": true,
-      "class": "ring ring-inset ring-(--ui-border-inverted)"
+      "class": "ring ring-inset ring-inverted"
     },
     {
       "leading": true,
@@ -349,4 +371,6 @@ export default {
     "color": "primary" as typeof color[number],
     "variant": "outline" as typeof variant[number]
   }
-}
+}
+
+export default result as typeof theme