@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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

@@ -0,0 +1,20 @@
+export default {
+  "slots": {
+    "root": "w-full space-y-6",
+    "header": "flex flex-col text-center",
+    "leading": "mb-2",
+    "leadingIcon": "size-8 shrink-0 inline-block",
+    "title": "text-xl text-pretty font-semibold text-highlighted",
+    "description": "mt-1 text-base text-pretty text-muted",
+    "body": "gap-y-6 flex flex-col",
+    "providers": "space-y-3",
+    "checkbox": "",
+    "select": "",
+    "password": "w-full",
+    "otp": "w-full justify-center",
+    "input": "w-full",
+    "separator": "",
+    "form": "space-y-5",
+    "footer": "text-sm text-center text-muted mt-2"
+  }
+}

package/.nuxt/ui/badge.ts

@@ -33,7 +33,7 @@ export default {
     "trailingIcon": "shrink-0"
   },
   "variants": {
-    "buttonGroup": {
+    "fieldGroup": {
       "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]",
       "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
     },

package/.nuxt/ui/banner.ts

@@ -0,0 +1,108 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+export default {
+  "slots": {
+    "root": [
+      "relative z-50 w-full",
+      "transition-colors"
+    ],
+    "container": "flex items-center justify-between gap-3 h-12",
+    "left": "hidden lg:flex-1 lg:flex lg:items-center",
+    "center": "flex items-center gap-1.5 min-w-0",
+    "right": "lg:flex-1 flex items-center justify-end",
+    "icon": "size-5 shrink-0 text-inverted pointer-events-none",
+    "title": "text-sm text-inverted font-medium truncate",
+    "actions": "flex gap-1.5 shrink-0 isolate",
+    "close": "text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"
+  },
+  "variants": {
+    "color": {
+      "primary": {
+        "root": "bg-primary"
+      },
+      "secondary": {
+        "root": "bg-secondary"
+      },
+      "success": {
+        "root": "bg-success"
+      },
+      "info": {
+        "root": "bg-info"
+      },
+      "warning": {
+        "root": "bg-warning"
+      },
+      "error": {
+        "root": "bg-error"
+      },
+      "neutral": {
+        "root": "bg-inverted"
+      }
+    },
+    "to": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-primary/90"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-secondary/90"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-success/90"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-info/90"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-warning/90"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-error/90"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-inverted/90"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "color": "primary" as typeof color[number]
+  }
+}

package/.nuxt/ui/blog-post.ts

@@ -0,0 +1,142 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const variant = [
+  "outline",
+  "soft",
+  "subtle",
+  "ghost",
+  "naked"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative group/blog-post flex flex-col rounded-lg overflow-hidden",
+    "header": "relative overflow-hidden aspect-[16/9] w-full pointer-events-none",
+    "body": "min-w-0 flex-1 flex flex-col",
+    "footer": "",
+    "image": "object-cover object-top w-full h-full",
+    "title": "text-xl text-pretty font-semibold text-highlighted",
+    "description": "mt-1 text-base text-pretty",
+    "authors": "pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5",
+    "avatar": "",
+    "meta": "flex items-center gap-2 mb-2",
+    "date": "text-sm",
+    "badge": ""
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "lg:grid lg:grid-cols-2 lg:items-center gap-x-8",
+        "body": "justify-center p-4 sm:p-6 lg:px-0"
+      },
+      "vertical": {
+        "root": "flex flex-col",
+        "body": "p-4 sm:p-6"
+      }
+    },
+    "variant": {
+      "outline": {
+        "root": "bg-default ring ring-default",
+        "date": "text-toned",
+        "description": "text-muted"
+      },
+      "soft": {
+        "root": "bg-elevated/50",
+        "date": "text-muted",
+        "description": "text-toned"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default",
+        "date": "text-muted",
+        "description": "text-toned"
+      },
+      "ghost": {
+        "date": "text-toned",
+        "description": "text-muted",
+        "header": "shadow-lg rounded-lg"
+      },
+      "naked": {
+        "root": "p-0 sm:p-0",
+        "date": "text-toned",
+        "description": "text-muted",
+        "header": "shadow-lg rounded-lg"
+      }
+    },
+    "to": {
+      "true": {
+        "root": [
+          "transition"
+        ],
+        "image": "transform transition-transform duration-200 group-hover/blog-post:scale-110",
+        "avatar": "transform transition-transform duration-200 hover:scale-115"
+      }
+    },
+    "image": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "variant": "outline" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated/50"
+      }
+    },
+    {
+      "variant": "soft" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated"
+      }
+    },
+    {
+      "variant": "subtle" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated hover:ring-accented"
+      }
+    },
+    {
+      "variant": "ghost" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated/50",
+        "header": [
+          "group-hover/blog-post:shadow-none",
+          "transition-all"
+        ]
+      }
+    },
+    {
+      "variant": "ghost" as typeof variant[number],
+      "to": true,
+      "orientation": "vertical" as typeof orientation[number],
+      "class": {
+        "header": "group-hover/blog-post:rounded-b-none"
+      }
+    },
+    {
+      "variant": "ghost" as typeof variant[number],
+      "to": true,
+      "orientation": "horizontal" as typeof orientation[number],
+      "class": {
+        "header": "group-hover/blog-post:rounded-r-none"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "image": false,
+      "variant": "naked" as typeof variant[number],
+      "class": {
+        "body": "p-0 sm:p-0"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number]
+  }
+}

package/.nuxt/ui/blog-posts.ts

@@ -0,0 +1,9 @@
+export default {
+  "base": "flex flex-col gap-8 lg:gap-y-16",
+  "variants": {
+    "orientation": {
+      "horizontal": "sm:grid sm:grid-cols-2 lg:grid-cols-3",
+      "vertical": ""
+    }
+  }
+}

package/.nuxt/ui/button.ts

@@ -38,7 +38,7 @@ export default {
     "trailingIcon": "shrink-0"
   },
   "variants": {
-    "buttonGroup": {
+    "fieldGroup": {
       "horizontal": "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]",
       "vertical": "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]"
     },

package/.nuxt/ui/changelog-version.ts

@@ -0,0 +1,41 @@
+export default {
+  "slots": {
+    "root": "relative",
+    "container": "flex flex-col mx-auto max-w-2xl",
+    "header": "",
+    "meta": "flex items-center gap-3 mb-2",
+    "date": "text-sm/6 text-toned truncate",
+    "badge": "",
+    "title": "relative text-xl text-pretty font-semibold text-highlighted",
+    "description": "text-base text-pretty text-muted mt-1",
+    "imageWrapper": "relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image",
+    "image": "object-cover object-top w-full h-full",
+    "authors": "flex flex-wrap gap-x-4 gap-y-1.5",
+    "footer": "border-t border-default pt-5 flex items-center justify-between",
+    "indicator": "absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0",
+    "dot": "size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1",
+    "dotInner": "size-2 rounded-full bg-primary"
+  },
+  "variants": {
+    "body": {
+      "false": {
+        "footer": "mt-5"
+      }
+    },
+    "badge": {
+      "false": {
+        "meta": "lg:hidden"
+      }
+    },
+    "to": {
+      "true": {
+        "image": "transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"
+      }
+    },
+    "hidden": {
+      "true": {
+        "date": "lg:hidden"
+      }
+    }
+  }
+}

package/.nuxt/ui/changelog-versions.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "relative",
+    "container": "flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16",
+    "indicator": "absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]",
+    "beam": "absolute start-0 top-0 w-full bg-primary will-change-[height]"
+  }
+}

package/.nuxt/ui/chat-message.ts

@@ -0,0 +1,129 @@
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle",
+  "naked"
+] as const
+
+const side = [
+  "left",
+  "right"
+] as const
+
+export default {
+  "slots": {
+    "root": "group/message relative w-full",
+    "container": "relative flex items-start group-data-[role=user]/message:max-w-[75%]",
+    "leading": "inline-flex items-center justify-center min-h-6",
+    "leadingIcon": "shrink-0",
+    "leadingAvatar": "shrink-0",
+    "leadingAvatarSize": "",
+    "content": "relative text-pretty min-w-0",
+    "actions": [
+      "opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center",
+      "transition-opacity"
+    ]
+  },
+  "variants": {
+    "variant": {
+      "solid": {
+        "content": "bg-inverted text-inverted"
+      },
+      "outline": {
+        "content": "bg-default ring ring-default"
+      },
+      "soft": {
+        "content": "bg-elevated/50"
+      },
+      "subtle": {
+        "content": "bg-elevated/50 ring ring-default"
+      },
+      "naked": {
+        "content": ""
+      }
+    },
+    "side": {
+      "left": {
+        "container": "rtl:justify-end"
+      },
+      "right": {
+        "container": "ltr:justify-end ms-auto"
+      }
+    },
+    "leading": {
+      "true": ""
+    },
+    "actions": {
+      "true": ""
+    },
+    "compact": {
+      "true": {
+        "root": "scroll-mt-3",
+        "container": "gap-1.5 pb-3",
+        "leadingIcon": "size-5",
+        "leadingAvatarSize": "2xs"
+      },
+      "false": {
+        "root": "scroll-mt-4 sm:scroll-mt-6",
+        "container": "gap-3 pb-8",
+        "leadingIcon": "size-8",
+        "leadingAvatarSize": "md"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "compact": true,
+      "actions": true,
+      "class": {
+        "container": "pb-8"
+      }
+    },
+    {
+      "leading": true,
+      "compact": false,
+      "side": "left" as typeof side[number],
+      "class": {
+        "actions": "left-11"
+      }
+    },
+    {
+      "leading": true,
+      "compact": true,
+      "side": "left" as typeof side[number],
+      "class": {
+        "actions": "left-6.5"
+      }
+    },
+    {
+      "variant": [
+        "solid" as typeof variant[number],
+        "outline" as typeof variant[number],
+        "soft" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "compact": false,
+      "class": {
+        "content": "px-4 py-3 rounded-lg min-h-12",
+        "leading": "mt-2"
+      }
+    },
+    {
+      "variant": [
+        "solid" as typeof variant[number],
+        "outline" as typeof variant[number],
+        "soft" as typeof variant[number],
+        "subtle" as typeof variant[number]
+      ],
+      "compact": true,
+      "class": {
+        "content": "px-2 py-1 rounded-lg min-h-8",
+        "leading": "mt-1"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "variant": "naked" as typeof variant[number]
+  }
+}

package/.nuxt/ui/chat-messages.ts

@@ -0,0 +1,14 @@
+export default {
+  "slots": {
+    "root": "w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)",
+    "indicator": "h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-elevated [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]",
+    "viewport": "absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+    "autoScroll": "rounded-full absolute right-1/2 translate-x-1/2 bottom-0"
+  },
+  "variants": {
+    "compact": {
+      "true": "",
+      "false": ""
+    }
+  }
+}

package/.nuxt/ui/chat-palette.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "relative flex-1 flex flex-col min-h-0 min-w-0",
+    "prompt": "px-0 rounded-t-none border-t border-default",
+    "close": "",
+    "content": "overflow-y-auto flex-1 flex flex-col py-3"
+  }
+}

package/.nuxt/ui/chat-prompt-submit.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "base": ""
+  }
+}

package/.nuxt/ui/chat-prompt.ts

@@ -0,0 +1,35 @@
+const variant = [
+  "outline",
+  "soft",
+  "subtle",
+  "naked"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur",
+    "header": "flex items-center gap-1.5",
+    "body": "items-start",
+    "footer": "flex items-center justify-between gap-1.5",
+    "base": "text-base/5"
+  },
+  "variants": {
+    "variant": {
+      "outline": {
+        "root": "bg-default/75 ring ring-default"
+      },
+      "soft": {
+        "root": "bg-elevated/50"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default"
+      },
+      "naked": {
+        "root": ""
+      }
+    }
+  },
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number]
+  }
+}