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

package/.nuxt/ui/drawer.ts

@@ -1,55 +1,123 @@
+const direction = [
+  "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)] ring ring-[var(--ui-border)] flex focus:outline-none",
-    "handle": "shrink-0 rounded-full bg-[var(--ui-bg-accented)]",
+    "overlay": "fixed inset-0 bg-(--ui-bg-elevated)/75",
+    "content": "fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none",
+    "handle": "shrink-0 rounded-full bg-(--ui-bg-accented)",
     "container": "w-full flex flex-col gap-4 p-4 overflow-y-auto",
     "header": "",
-    "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",
     "body": "flex-1",
     "footer": "flex flex-col gap-1.5"
   },
   "variants": {
     "direction": {
       "top": {
-        "content": "top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]",
+        "content": "mb-24 flex-col-reverse",
         "handle": "mb-4"
       },
       "right": {
-        "content": "right-4 flex-row",
+        "content": "flex-row",
         "handle": "ml-4"
       },
       "bottom": {
-        "content": "bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]",
+        "content": "mt-24 flex-col",
         "handle": "mt-4"
       },
       "left": {
-        "content": "left-4 flex-row-reverse",
+        "content": "flex-row-reverse",
         "handle": "mr-4"
       }
+    },
+    "inset": {
+      "true": {
+        "content": "rounded-[calc(var(--ui-radius)*2)] after:hidden"
+      }
     }
   },
   "compoundVariants": [
     {
       "direction": [
-        "top" as const,
-        "bottom" as const
+        "top" as typeof direction[number],
+        "bottom" as typeof direction[number]
       ],
       "class": {
-        "content": "inset-x-0 h-auto max-h-[96%]",
+        "content": "h-auto max-h-[96%]",
         "handle": "w-12 h-1.5 mx-auto"
       }
     },
     {
       "direction": [
-        "right" as const,
-        "left" as const
+        "right" as typeof direction[number],
+        "left" as typeof direction[number]
       ],
       "class": {
-        "content": "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden",
+        "content": "w-auto max-w-[calc(100%-2rem)]",
         "handle": "h-12 w-1.5 mt-auto mb-auto"
       }
+    },
+    {
+      "direction": "top" as typeof direction[number],
+      "inset": true,
+      "class": {
+        "content": "inset-x-4 top-4"
+      }
+    },
+    {
+      "direction": "top" as typeof direction[number],
+      "inset": false,
+      "class": {
+        "content": "inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]"
+      }
+    },
+    {
+      "direction": "bottom" as typeof direction[number],
+      "inset": true,
+      "class": {
+        "content": "inset-x-4 bottom-4"
+      }
+    },
+    {
+      "direction": "bottom" as typeof direction[number],
+      "inset": false,
+      "class": {
+        "content": "inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]"
+      }
+    },
+    {
+      "direction": "left" as typeof direction[number],
+      "inset": true,
+      "class": {
+        "content": "inset-y-4 left-4"
+      }
+    },
+    {
+      "direction": "left" as typeof direction[number],
+      "inset": false,
+      "class": {
+        "content": "inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]"
+      }
+    },
+    {
+      "direction": "right" as typeof direction[number],
+      "inset": true,
+      "class": {
+        "content": "inset-y-4 right-4"
+      }
+    },
+    {
+      "direction": "right" as typeof direction[number],
+      "inset": false,
+      "class": {
+        "content": "inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]"
+      }
     }
   ]
 }

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

@@ -1,20 +1,38 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
 export default {
   "slots": {
-    "content": "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
-    "arrow": "fill-[var(--ui-border)]",
+    "content": "min-w-32 bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) divide-y divide-(--ui-border) overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+    "arrow": "fill-(--ui-border)",
     "group": "p-1 isolate",
-    "label": "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
-    "separator": "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    "label": "w-full flex items-center 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",
     "itemLeadingIcon": "shrink-0",
     "itemLeadingAvatar": "shrink-0",
     "itemLeadingAvatarSize": "",
-    "itemTrailing": "ms-auto inline-flex",
+    "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
     "itemTrailingIcon": "shrink-0",
     "itemTrailingKbds": "hidden lg:inline-flex items-center shrink-0",
     "itemTrailingKbdsSize": "",
     "itemLabel": "truncate",
-    "itemLabelExternalIcon": "inline-block size-3 align-top text-[var(--ui-text-dimmed)]"
+    "itemLabelExternalIcon": "inline-block size-3 align-top text-(--ui-text-dimmed)"
   },
   "variants": {
     "color": {
@@ -28,16 +46,16 @@ export default {
     },
     "active": {
       "true": {
-        "item": "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
-        "itemLeadingIcon": "text-[var(--ui-text)]"
+        "item": "text-(--ui-text-highlighted) before:bg-(--ui-bg-elevated)",
+        "itemLeadingIcon": "text-(--ui-text)"
       },
       "false": {
         "item": [
-          "text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50",
+          "text-(--ui-text) data-highlighted:text-(--ui-text-highlighted) data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-(--ui-bg-elevated)/50 data-[state=open]:before:bg-(--ui-bg-elevated)/50",
           "transition-colors before:transition-colors"
         ],
         "itemLeadingIcon": [
-          "text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]",
+          "text-(--ui-text-dimmed) group-data-highlighted:text-(--ui-text) group-data-[state=open]:text-(--ui-text)",
           "transition-colors"
         ]
       }
@@ -97,103 +115,103 @@ export default {
   },
   "compoundVariants": [
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10",
-        "itemLeadingIcon": "text-[var(--ui-primary)]/75 group-data-highlighted:text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]"
+        "item": "text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10",
+        "itemLeadingIcon": "text-(--ui-primary)/75 group-data-highlighted:text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)"
       }
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-[var(--ui-secondary)] data-highlighted:text-[var(--ui-secondary)] data-highlighted:before:bg-[var(--ui-secondary)]/10 data-[state=open]:before:bg-[var(--ui-secondary)]/10",
-        "itemLeadingIcon": "text-[var(--ui-secondary)]/75 group-data-highlighted:text-[var(--ui-secondary)] group-data-[state=open]:text-[var(--ui-secondary)]"
+        "item": "text-(--ui-secondary) data-highlighted:text-(--ui-secondary) data-highlighted:before:bg-(--ui-secondary)/10 data-[state=open]:before:bg-(--ui-secondary)/10",
+        "itemLeadingIcon": "text-(--ui-secondary)/75 group-data-highlighted:text-(--ui-secondary) group-data-[state=open]:text-(--ui-secondary)"
       }
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-[var(--ui-success)] data-highlighted:text-[var(--ui-success)] data-highlighted:before:bg-[var(--ui-success)]/10 data-[state=open]:before:bg-[var(--ui-success)]/10",
-        "itemLeadingIcon": "text-[var(--ui-success)]/75 group-data-highlighted:text-[var(--ui-success)] group-data-[state=open]:text-[var(--ui-success)]"
+        "item": "text-(--ui-success) data-highlighted:text-(--ui-success) data-highlighted:before:bg-(--ui-success)/10 data-[state=open]:before:bg-(--ui-success)/10",
+        "itemLeadingIcon": "text-(--ui-success)/75 group-data-highlighted:text-(--ui-success) group-data-[state=open]:text-(--ui-success)"
       }
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-[var(--ui-info)] data-highlighted:text-[var(--ui-info)] data-highlighted:before:bg-[var(--ui-info)]/10 data-[state=open]:before:bg-[var(--ui-info)]/10",
-        "itemLeadingIcon": "text-[var(--ui-info)]/75 group-data-highlighted:text-[var(--ui-info)] group-data-[state=open]:text-[var(--ui-info)]"
+        "item": "text-(--ui-info) data-highlighted:text-(--ui-info) data-highlighted:before:bg-(--ui-info)/10 data-[state=open]:before:bg-(--ui-info)/10",
+        "itemLeadingIcon": "text-(--ui-info)/75 group-data-highlighted:text-(--ui-info) group-data-[state=open]:text-(--ui-info)"
       }
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-[var(--ui-warning)] data-highlighted:text-[var(--ui-warning)] data-highlighted:before:bg-[var(--ui-warning)]/10 data-[state=open]:before:bg-[var(--ui-warning)]/10",
-        "itemLeadingIcon": "text-[var(--ui-warning)]/75 group-data-highlighted:text-[var(--ui-warning)] group-data-[state=open]:text-[var(--ui-warning)]"
+        "item": "text-(--ui-warning) data-highlighted:text-(--ui-warning) data-highlighted:before:bg-(--ui-warning)/10 data-[state=open]:before:bg-(--ui-warning)/10",
+        "itemLeadingIcon": "text-(--ui-warning)/75 group-data-highlighted:text-(--ui-warning) group-data-[state=open]:text-(--ui-warning)"
       }
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "active": false,
       "class": {
-        "item": "text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10",
-        "itemLeadingIcon": "text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]"
+        "item": "text-(--ui-error) data-highlighted:text-(--ui-error) data-highlighted:before:bg-(--ui-error)/10 data-[state=open]:before:bg-(--ui-error)/10",
+        "itemLeadingIcon": "text-(--ui-error)/75 group-data-highlighted:text-(--ui-error) group-data-[state=open]:text-(--ui-error)"
       }
     },
     {
-      "color": "primary" as const,
+      "color": "primary" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-[var(--ui-primary)] before:bg-[var(--ui-primary)]/10",
-        "itemLeadingIcon": "text-[var(--ui-primary)]"
+        "item": "text-(--ui-primary) before:bg-(--ui-primary)/10",
+        "itemLeadingIcon": "text-(--ui-primary)"
       }
     },
     {
-      "color": "secondary" as const,
+      "color": "secondary" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-[var(--ui-secondary)] before:bg-[var(--ui-secondary)]/10",
-        "itemLeadingIcon": "text-[var(--ui-secondary)]"
+        "item": "text-(--ui-secondary) before:bg-(--ui-secondary)/10",
+        "itemLeadingIcon": "text-(--ui-secondary)"
       }
     },
     {
-      "color": "success" as const,
+      "color": "success" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-[var(--ui-success)] before:bg-[var(--ui-success)]/10",
-        "itemLeadingIcon": "text-[var(--ui-success)]"
+        "item": "text-(--ui-success) before:bg-(--ui-success)/10",
+        "itemLeadingIcon": "text-(--ui-success)"
       }
     },
     {
-      "color": "info" as const,
+      "color": "info" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-[var(--ui-info)] before:bg-[var(--ui-info)]/10",
-        "itemLeadingIcon": "text-[var(--ui-info)]"
+        "item": "text-(--ui-info) before:bg-(--ui-info)/10",
+        "itemLeadingIcon": "text-(--ui-info)"
       }
     },
     {
-      "color": "warning" as const,
+      "color": "warning" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-[var(--ui-warning)] before:bg-[var(--ui-warning)]/10",
-        "itemLeadingIcon": "text-[var(--ui-warning)]"
+        "item": "text-(--ui-warning) before:bg-(--ui-warning)/10",
+        "itemLeadingIcon": "text-(--ui-warning)"
       }
     },
     {
-      "color": "error" as const,
+      "color": "error" as typeof color[number],
       "active": true,
       "class": {
-        "item": "text-[var(--ui-error)] before:bg-[var(--ui-error)]/10",
-        "itemLeadingIcon": "text-[var(--ui-error)]"
+        "item": "text-(--ui-error) before:bg-(--ui-error)/10",
+        "itemLeadingIcon": "text-(--ui-error)"
       }
     }
   ],
   "defaultVariants": {
-    "size": "md" as const
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/form-field.ts

@@ -1,14 +1,22 @@
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
 export default {
   "slots": {
     "root": "",
     "wrapper": "",
     "labelWrapper": "flex content-center items-center justify-between",
-    "label": "block font-medium text-[var(--ui-text)]",
+    "label": "block font-medium text-(--ui-text)",
     "container": "mt-1 relative",
-    "description": "text-[var(--ui-text-muted)]",
-    "error": "mt-2 text-[var(--ui-error)]",
-    "hint": "text-[var(--ui-text-muted)]",
-    "help": "mt-2 text-[var(--ui-text-muted)]"
+    "description": "text-(--ui-text-muted)",
+    "error": "mt-2 text-(--ui-error)",
+    "hint": "text-(--ui-text-muted)",
+    "help": "mt-2 text-(--ui-text-muted)"
   },
   "variants": {
     "size": {
@@ -30,11 +38,11 @@ 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)"
       }
     }
   },
   "defaultVariants": {
-    "size": "md" as const
+    "size": "md" as typeof size[number]
   }
 }

package/.nuxt/ui/index.ts

@@ -6,11 +6,13 @@ export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
 export { default as buttonGroup } from './button-group'
+export { default as calendar } from './calendar'
 export { default as card } from './card'
 export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
+export { default as colorPicker } from './color-picker'
 export { default as commandPalette } from './command-palette'
 export { default as container } from './container'
 export { default as contextMenu } from './context-menu'
@@ -36,10 +38,12 @@ export { default as separator } from './separator'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as slider } from './slider'
+export { default as stepper } from './stepper'
 export { default as switch } from './switch'
 export { default as table } from './table'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
 export { default as toast } from './toast'
 export { default as toaster } from './toaster'
-export { default as tooltip } from './tooltip'
+export { default as tooltip } from './tooltip'
+export { default as tree } from './tree'