@nuxt/ui 3.3.3 → 4.0.0-alpha.1

package/.nuxt/ui/dashboard-sidebar.ts

@@ -0,0 +1,37 @@
+export default {
+  "slots": {
+    "root": "relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0",
+    "header": "h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4",
+    "body": "flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2",
+    "footer": "shrink-0 flex items-center gap-1.5 px-4 py-2",
+    "toggle": "",
+    "handle": "",
+    "content": "lg:hidden",
+    "overlay": "lg:hidden"
+  },
+  "variants": {
+    "menu": {
+      "true": {
+        "header": "sm:px-6",
+        "body": "sm:px-6",
+        "footer": "sm:px-6"
+      }
+    },
+    "side": {
+      "left": {
+        "root": "border-r border-default"
+      },
+      "right": {
+        "root": ""
+      }
+    },
+    "toggleSide": {
+      "left": {
+        "toggle": ""
+      },
+      "right": {
+        "toggle": "ms-auto"
+      }
+    }
+  }
+}

package/.nuxt/ui/dashboard-toolbar.ts

@@ -0,0 +1,7 @@
+export default {
+  "slots": {
+    "root": "shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]",
+    "left": "flex items-center gap-1.5",
+    "right": "flex items-center gap-1.5"
+  }
+}

package/.nuxt/ui/error.ts

@@ -0,0 +1,9 @@
+export default {
+  "slots": {
+    "root": "min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center",
+    "statusCode": "text-base font-semibold text-primary",
+    "statusMessage": "mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance",
+    "message": "mt-4 text-lg text-muted text-balance",
+    "links": "mt-8 flex items-center justify-center gap-6"
+  }
+}

package/.nuxt/ui/footer-columns.ts

@@ -0,0 +1,28 @@
+export default {
+  "slots": {
+    "root": "xl:grid xl:grid-cols-3 xl:gap-8",
+    "left": "mb-10 xl:mb-0",
+    "center": "flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2",
+    "right": "mt-10 xl:mt-0",
+    "label": "text-sm font-semibold",
+    "list": "mt-6 space-y-4",
+    "item": "relative",
+    "link": "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    "linkLeadingIcon": "size-5 shrink-0",
+    "linkLabel": "truncate",
+    "linkLabelExternalIcon": "size-3 absolute top-0 text-dimmed inline-block"
+  },
+  "variants": {
+    "active": {
+      "true": {
+        "link": "text-primary font-medium"
+      },
+      "false": {
+        "link": [
+          "text-muted hover:text-default",
+          "transition-colors"
+        ]
+      }
+    }
+  }
+}

package/.nuxt/ui/footer.ts

@@ -0,0 +1,11 @@
+export default {
+  "slots": {
+    "root": "",
+    "top": "py-8 lg:py-12",
+    "bottom": "py-8 lg:py-12",
+    "container": "py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3",
+    "left": "flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1",
+    "center": "mt-3 lg:mt-0 lg:order-2 flex items-center justify-center",
+    "right": "lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"
+  }
+}

package/.nuxt/ui/header.ts

@@ -0,0 +1,25 @@
+export default {
+  "slots": {
+    "root": "bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50",
+    "container": "flex items-center justify-between gap-3 h-full",
+    "left": "lg:flex-1 flex items-center gap-1.5",
+    "center": "hidden lg:flex",
+    "right": "flex items-center justify-end lg:flex-1 gap-1.5",
+    "title": "shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5",
+    "toggle": "lg:hidden",
+    "content": "lg:hidden",
+    "overlay": "lg:hidden",
+    "header": "px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3",
+    "body": "p-4 sm:p-6 overflow-y-auto"
+  },
+  "variants": {
+    "toggleSide": {
+      "left": {
+        "toggle": "-ms-1.5"
+      },
+      "right": {
+        "toggle": "-me-1.5"
+      }
+    }
+  }
+}

package/.nuxt/ui/index.ts

@@ -1,14 +1,24 @@
 export { default as accordion } from './accordion'
 export { default as alert } from './alert'
+export { default as authForm } from './auth-form'
 export { default as avatar } from './avatar'
 export { default as avatarGroup } from './avatar-group'
 export { default as badge } from './badge'
+export { default as banner } from './banner'
+export { default as blogPost } from './blog-post'
+export { default as blogPosts } from './blog-posts'
 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 changelogVersion } from './changelog-version'
+export { default as changelogVersions } from './changelog-versions'
+export { default as chatMessage } from './chat-message'
+export { default as chatMessages } from './chat-messages'
+export { default as chatPalette } from './chat-palette'
+export { default as chatPrompt } from './chat-prompt'
+export { default as chatPromptSubmit } from './chat-prompt-submit'
 export { default as checkbox } from './checkbox'
 export { default as checkboxGroup } from './checkbox-group'
 export { default as chip } from './chip'
@@ -17,22 +27,57 @@ 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'
+export { default as dashboardGroup } from './dashboard-group'
+export { default as dashboardNavbar } from './dashboard-navbar'
+export { default as dashboardPanel } from './dashboard-panel'
+export { default as dashboardResizeHandle } from './dashboard-resize-handle'
+export { default as dashboardSearch } from './dashboard-search'
+export { default as dashboardSearchButton } from './dashboard-search-button'
+export { default as dashboardSidebar } from './dashboard-sidebar'
+export { default as dashboardSidebarCollapse } from './dashboard-sidebar-collapse'
+export { default as dashboardSidebarToggle } from './dashboard-sidebar-toggle'
+export { default as dashboardToolbar } from './dashboard-toolbar'
 export { default as drawer } from './drawer'
 export { default as dropdownMenu } from './dropdown-menu'
+export { default as error } from './error'
+export { default as fieldGroup } from './field-group'
 export { default as fileUpload } from './file-upload'
+export { default as footer } from './footer'
+export { default as footerColumns } from './footer-columns'
 export { default as form } from './form'
 export { default as formField } from './form-field'
+export { default as header } from './header'
 export { default as input } from './input'
 export { default as inputMenu } from './input-menu'
 export { default as inputNumber } from './input-number'
 export { default as inputTags } from './input-tags'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
+export { default as main } from './main'
+export { default as marquee } from './marquee'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
+export { default as page } from './page'
+export { default as pageAnchors } from './page-anchors'
+export { default as pageAside } from './page-aside'
+export { default as pageBody } from './page-body'
+export { default as pageCTA } from './page-cta'
+export { default as pageCard } from './page-card'
+export { default as pageColumns } from './page-columns'
+export { default as pageFeature } from './page-feature'
+export { default as pageGrid } from './page-grid'
+export { default as pageHeader } from './page-header'
+export { default as pageHero } from './page-hero'
+export { default as pageLinks } from './page-links'
+export { default as pageList } from './page-list'
+export { default as pageLogos } from './page-logos'
+export { default as pageSection } from './page-section'
 export { default as pagination } from './pagination'
 export { default as pinInput } from './pin-input'
 export { default as popover } from './popover'
+export { default as pricingPlan } from './pricing-plan'
+export { default as pricingPlans } from './pricing-plans'
+export { default as pricingTable } from './pricing-table'
 export { default as progress } from './progress'
 export { default as radioGroup } from './radio-group'
 export { default as select } from './select'
@@ -50,4 +95,11 @@ export { default as timeline } from './timeline'
 export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
-export { default as tree } from './tree'
+export { default as tree } from './tree'
+export { default as user } from './user'
+export { default as contentNavigation } from './content/content-navigation'
+export { default as contentSearch } from './content/content-search'
+export { default as contentSearchButton } from './content/content-search-button'
+export { default as contentSurround } from './content/content-surround'
+export { default as contentToc } from './content/content-toc'
+export * as prose from './prose'

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

@@ -69,7 +69,7 @@ export default {
     "tagsInput": "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
   },
   "variants": {
-    "buttonGroup": {
+    "fieldGroup": {
       "horizontal": {
         "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"

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

@@ -40,7 +40,7 @@ export default {
     "decrement": "absolute flex items-center"
   },
   "variants": {
-    "buttonGroup": {
+    "fieldGroup": {
       "horizontal": {
         "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"

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

@@ -50,7 +50,7 @@ export default {
     "input": "flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
   },
   "variants": {
-    "buttonGroup": {
+    "fieldGroup": {
       "horizontal": {
         "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"

package/.nuxt/ui/input.ts

@@ -39,7 +39,7 @@ export default {
     "trailingIcon": "shrink-0 text-dimmed"
   },
   "variants": {
-    "buttonGroup": {
+    "fieldGroup": {
       "horizontal": {
         "root": "group has-focus-visible:z-[1]",
         "base": "group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none"

package/.nuxt/ui/main.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "min-h-[calc(100vh-var(--ui-header-height))]"
+}

package/.nuxt/ui/marquee.ts

@@ -0,0 +1,66 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+export default {
+  "slots": {
+    "root": "group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]",
+    "content": "flex items-center shrink-0 justify-around gap-(--gap) min-w-max"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "content": "w-full"
+      },
+      "vertical": {
+        "content": "h-full"
+      }
+    },
+    "pauseOnHover": {
+      "true": {
+        "content": "group-hover:[animation-play-state:paused]"
+      }
+    },
+    "reverse": {
+      "true": {
+        "content": "[animation-direction:reverse]"
+      }
+    },
+    "overlay": {
+      "true": {
+        "root": "before:absolute before:pointer-events-none before:content-[\"\"] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[\"\"] after:z-2 after:from-default after:to-transparent"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "class": {
+        "root": "flex-row",
+        "content": "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "overlay": true,
+      "class": {
+        "root": "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "class": {
+        "root": "flex-col",
+        "content": "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "overlay": true,
+      "class": {
+        "root": "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
+      }
+    }
+  ]
+}

package/.nuxt/ui/page-anchors.ts

@@ -0,0 +1,30 @@
+export default {
+  "slots": {
+    "root": "",
+    "list": "",
+    "item": "relative",
+    "link": "group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary",
+    "linkLeading": "rounded-md p-1 inline-flex ring-inset ring",
+    "linkLeadingIcon": "size-4 shrink-0",
+    "linkLabel": "truncate",
+    "linkLabelExternalIcon": "size-3 absolute top-0 text-dimmed"
+  },
+  "variants": {
+    "active": {
+      "true": {
+        "link": "text-primary font-semibold",
+        "linkLeading": "bg-primary ring-primary text-inverted"
+      },
+      "false": {
+        "link": [
+          "text-muted hover:text-default font-medium",
+          "transition-colors"
+        ],
+        "linkLeading": [
+          "bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted",
+          "transition"
+        ]
+      }
+    }
+  }
+}

package/.nuxt/ui/page-aside.ts

@@ -0,0 +1,10 @@
+export default {
+  "slots": {
+    "root": "hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5",
+    "container": "relative",
+    "top": "sticky -top-8 -mt-8 pointer-events-none z-[1]",
+    "topHeader": "h-8 bg-default -mx-4 px-4",
+    "topBody": "bg-default relative pointer-events-auto flex flex-col -mx-4 px-4",
+    "topFooter": "h-8 bg-gradient-to-b from-default -mx-4 px-4"
+  }
+}

package/.nuxt/ui/page-body.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "mt-8 pb-24 space-y-12"
+}

package/.nuxt/ui/page-card.ts

@@ -0,0 +1,279 @@
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle",
+  "ghost",
+  "naked"
+] as const
+
+const highlightColor = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const spotlightColor = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative flex rounded-lg",
+    "spotlight": "absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90",
+    "container": "relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6",
+    "wrapper": "flex flex-col flex-1 items-start",
+    "header": "mb-4",
+    "body": "flex-1",
+    "footer": "pt-4 mt-auto",
+    "leading": "inline-flex items-center mb-2.5",
+    "leadingIcon": "size-5 shrink-0 text-primary",
+    "title": "text-base text-pretty font-semibold text-highlighted",
+    "description": "text-[15px] text-pretty"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "container": "lg:grid-cols-2 lg:items-center"
+      },
+      "vertical": {
+        "container": ""
+      }
+    },
+    "reverse": {
+      "true": {
+        "wrapper": "lg:order-last"
+      }
+    },
+    "variant": {
+      "solid": {
+        "root": "bg-inverted text-inverted",
+        "title": "text-inverted",
+        "description": "text-dimmed"
+      },
+      "outline": {
+        "root": "bg-default ring ring-default",
+        "description": "text-muted"
+      },
+      "soft": {
+        "root": "bg-elevated/50",
+        "description": "text-toned"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default",
+        "description": "text-toned"
+      },
+      "ghost": {
+        "description": "text-muted"
+      },
+      "naked": {
+        "container": "p-0 sm:p-0",
+        "description": "text-muted"
+      }
+    },
+    "to": {
+      "true": {
+        "root": [
+          "transition"
+        ]
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-1"
+      }
+    },
+    "highlight": {
+      "true": {
+        "root": "ring-2"
+      }
+    },
+    "highlightColor": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    },
+    "spotlight": {
+      "true": {
+        "root": "[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]"
+      }
+    },
+    "spotlightColor": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "variant": "solid" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-inverted/90"
+      }
+    },
+    {
+      "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"
+      }
+    },
+    {
+      "variant": "subtle" as typeof variant[number],
+      "to": true,
+      "highlight": false,
+      "class": {
+        "root": "hover:ring-accented"
+      }
+    },
+    {
+      "variant": "ghost" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated/50"
+      }
+    },
+    {
+      "highlightColor": "primary" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-primary"
+      }
+    },
+    {
+      "highlightColor": "secondary" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-secondary"
+      }
+    },
+    {
+      "highlightColor": "success" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-success"
+      }
+    },
+    {
+      "highlightColor": "info" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-info"
+      }
+    },
+    {
+      "highlightColor": "warning" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-warning"
+      }
+    },
+    {
+      "highlightColor": "error" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-error"
+      }
+    },
+    {
+      "highlightColor": "neutral" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-inverted"
+      }
+    },
+    {
+      "spotlightColor": "primary" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-primary)]"
+      }
+    },
+    {
+      "spotlightColor": "secondary" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-secondary)]"
+      }
+    },
+    {
+      "spotlightColor": "success" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-success)]"
+      }
+    },
+    {
+      "spotlightColor": "info" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-info)]"
+      }
+    },
+    {
+      "spotlightColor": "warning" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-warning)]"
+      }
+    },
+    {
+      "spotlightColor": "error" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-error)]"
+      }
+    },
+    {
+      "spotlightColor": "neutral" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-bg-inverted)]"
+      }
+    },
+    {
+      "to": true,
+      "class": {
+        "root": "has-focus-visible:ring-2 has-focus-visible:ring-primary"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number],
+    "highlightColor": "primary" as typeof highlightColor[number],
+    "spotlightColor": "primary" as typeof spotlightColor[number]
+  }
+}

package/.nuxt/ui/page-columns.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
+}