@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { defuFn, defu } from 'defu';
-import { addTemplate, hasNuxtModule, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { addTemplate, addTypeTemplate, defineNuxtModule, createResolver, addVitePlugin, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 import { kebabCase } from 'scule';
 
@@ -1309,8 +1309,8 @@ const navigationMenu = (options) => ({
     active: false,
     variant: "pill",
     class: {
-      link: ["hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200", options.transitions && "transition-colors"]
+      link: ["hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50", options.transitions && "transition-colors before:transition-colors"],
+      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
     }
   }, ...options.colors.map((color) => ({
     color,
@@ -1347,8 +1347,8 @@ const navigationMenu = (options) => ({
     active: false,
     variant: "link",
     class: {
-      link: ["hover:text-gray-900 dark:hover:text-white", options.transitions && "transition-colors"],
-      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200", options.transitions && "transition-colors"]
+      link: ["hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white", options.transitions && "transition-colors"],
+      linkLeadingIcon: ["group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200", options.transitions && "transition-colors"]
     }
   }, ...options.colors.map((color) => ({
     color,
@@ -2471,49 +2471,6 @@ const theme = {
 };
 
 function addTemplates(options, nuxt) {
-  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-  if (!nuxt.options.css.find((path) => path.endsWith("tailwind.css"))) {
-    const template = addTemplate({
-      filename: "tailwind.css",
-      write: true,
-      getContents: () => `@import "tailwindcss";
-@import "./ui.css";
-${hasNuxtModule("@nuxt/content") ? '@source "../content/**/*.md";' : ""}
-`
-    });
-    nuxt.options.css.unshift(template.dst);
-  }
-  addTemplate({
-    filename: "ui.css",
-    write: true,
-    getContents: () => `@layer base {
-  :root {
-    color-scheme: light dark;
-  }
-}
-
-@theme {
-  --color-gray-*: initial;
-  --color-cool-50: #f9fafb;
-  --color-cool-100: #f3f4f6;
-  --color-cool-200: #e5e7eb;
-  --color-cool-300: #d1d5db;
-  --color-cool-400: #9ca3af;
-  --color-cool-500: #6b7280;
-  --color-cool-600: #4b5563;
-  --color-cool-700: #374151;
-  --color-cool-800: #1f2937;
-  --color-cool-900: #111827;
-  --color-cool-950: #030712;
-
-  --spacing-4_5: 1.125rem;
-
-  ${shades.map((shade) => `--color-primary-${shade}: var(--color-primary-${shade});`).join("\n	")}
-  ${shades.map((shade) => `--color-error-${shade}: var(--color-error-${shade});`).join("\n	")}
-  ${shades.map((shade) => `--color-gray-${shade}: var(--color-gray-${shade});`).join("\n	")}
-}
-`
-  });
   for (const component in theme) {
     addTemplate({
       filename: `ui/${kebabCase(component)}.ts`,
@@ -2564,16 +2521,12 @@ type AppConfigUI = {
   icons?: Partial<typeof icons>
 } & DeepPartial<typeof ui, string>
 
-declare module 'nuxt/schema' {
-  interface AppConfigInput {
-    ui?: AppConfigUI
-  }
-}
 declare module '@nuxt/schema' {
   interface AppConfigInput {
     ui?: AppConfigUI
   }
 }
+
 export {}
 `
   });
@@ -2599,7 +2552,7 @@ const module = defineNuxtModule({
     name: "ui",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=3.10.0"
+      nuxt: ">=3.13.1"
     }
   },
   defaults: {
@@ -2622,7 +2575,6 @@ const module = defineNuxtModule({
     });
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, "isolate"].filter(Boolean).join(" ");
-    nuxt.options.css.push(resolve("./runtime/assets/css/animations.css"));
     if (nuxt.options.builder === "@nuxt/vite-builder") {
       const plugin = await import('@tailwindcss/vite').then((r) => r.default);
       addVitePlugin(plugin());

package/dist/runtime/components/Accordion.vue

@@ -1,9 +1,52 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/accordion";
-const appConfig = _appConfig;
-const accordion = tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/accordion'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
+
+const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
+
+export interface AccordionItem extends Pick<AccordionItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the accordion item. Defaults to the index. */
+  value?: string
+}
+
+export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  /**
+   * The icon displayed on the right side of the trigger.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  class?: any
+  ui?: Partial<typeof accordion.slots>
+}
+
+export interface AccordionEmits extends AccordionRootEmits {}
+
+type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
+
+export type AccordionSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+  body: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends AccordionItem">

package/dist/runtime/components/Alert.vue

@@ -1,9 +1,61 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/alert";
-const appConfig = _appConfig;
-const alert = tv({ extend: tv(theme), ...appConfig.ui?.alert || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/alert'
+import type { AvatarProps, ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { alert: Partial<typeof theme> } }
+
+const alert = tv({ extend: tv(theme), ...(appConfig.ui?.alert || {}) })
+
+type AlertVariants = VariantProps<typeof alert>
+
+export interface AlertProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  title?: string
+  description?: string
+  icon?: string
+  avatar?: AvatarProps
+  color?: AlertVariants['color']
+  variant?: AlertVariants['variant']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   */
+  actions?: ButtonProps[]
+  /**
+   * Display a close button to dismiss the alert.
+   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * @emits `close`
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  class?: any
+  ui?: Partial<typeof alert.slots>
+}
+
+export interface AlertEmits {
+  (e: 'close'): void
+}
+
+export interface AlertSlots {
+  leading(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  actions(props?: {}): any
+  close(props: { ui: any }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/App.vue

@@ -1,5 +1,15 @@
-<script>
+<script lang="ts">
+import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue'
+import type { ToasterProps } from '../types'
 
+export interface AppProps extends Omit<ConfigProviderProps, 'useId'> {
+  tooltip?: TooltipProviderProps
+  toaster?: ToasterProps | null
+}
+
+export interface AppSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">
@@ -19,7 +29,7 @@ const toasterProps = toRef(() => props.toaster)
 </script>
 
 <template>
-  <ConfigProvider :use-id="() => useId() as string" v-bind="configProviderProps">
+  <ConfigProvider :use-id="() => (useId() as string)" v-bind="configProviderProps">
     <TooltipProvider v-bind="tooltipProps">
       <UToaster v-if="toaster !== null" v-bind="toasterProps">
         <slot />

package/dist/runtime/components/Avatar.vue

@@ -1,9 +1,30 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/avatar";
-const appConfig = _appConfig;
-const avatar = tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AvatarFallbackProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
+
+const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
+
+type AvatarVariants = VariantProps<typeof avatar>
+
+export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'img'
+   */
+  as?: string | object
+  src?: string
+  alt?: string
+  icon?: string
+  text?: string
+  size?: AvatarVariants['size']
+  class?: any
+  ui?: Partial<typeof avatar.slots>
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/AvatarGroup.vue

@@ -1,9 +1,33 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/avatar-group";
-const appConfig = _appConfig;
-const avatarGroup = tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
+  max?: number | string
+  class?: any
+  ui?: Partial<typeof avatarGroup.slots>
+}
+
+export interface AvatarGroupSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Badge.vue

@@ -1,9 +1,31 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/badge";
-const appConfig = _appConfig;
-const badge = tv({ extend: tv(theme), ...appConfig.ui?.badge || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/badge'
+
+const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
+
+const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
+
+type BadgeVariants = VariantProps<typeof badge>
+
+export interface BadgeProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'span'
+   */
+  as?: any
+  label?: string | number
+  color?: BadgeVariants['color']
+  variant?: BadgeVariants['variant']
+  size?: BadgeVariants['size']
+  class?: any
+}
+
+export interface BadgeSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Breadcrumb.vue

@@ -1,9 +1,47 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/breadcrumb";
-const appConfig = _appConfig;
-const breadcrumb = tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/breadcrumb'
+import type { AvatarProps, LinkProps } from '../types'
+import type { DynamicSlots } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
+
+const breadcrumb = tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb || {}) })
+
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  slot?: string
+}
+
+export interface BreadcrumbProps<T> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   */
+  separatorIcon?: string
+  class?: any
+  ui?: Partial<typeof breadcrumb.slots>
+}
+
+type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
+
+export type BreadcrumbSlots<T extends { slot?: string }> = {
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+  'separator'(props?: {}): any
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends BreadcrumbItem">

package/dist/runtime/components/Button.vue

@@ -1,9 +1,36 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/button";
-const appConfig = _appConfig;
-const button = tv({ extend: tv(theme), ...appConfig.ui?.button || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button'
+import type { LinkProps } from './Link.vue'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { button: Partial<typeof theme> } }
+
+const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
+
+type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
+  label?: string
+  color?: ButtonVariants['color']
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  /** Render the button with equal padding on all sides. */
+  square?: boolean
+  /** Render the button full width. */
+  block?: boolean
+  class?: any
+  ui?: PartialString<typeof button.slots>
+}
+
+export interface ButtonSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/ButtonGroup.vue

@@ -1,9 +1,33 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/button-group";
-const appConfig = _appConfig;
-const buttonGroup = tv({ extend: tv(theme), ...appConfig.ui?.buttonGroup });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
+
+const buttonGroup = tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup) })
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: ButtonGroupVariants['size']
+  /**
+   * The orientation the buttons are laid out.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ButtonGroupVariants['orientation']
+  class?: any
+}
+
+export interface ButtonGroupSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Card.vue

@@ -1,9 +1,28 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/card";
-const appConfig = _appConfig;
-const card = tv({ extend: tv(theme), ...appConfig.ui?.card || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/card'
+
+const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
+
+const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
+
+export interface CardProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+  ui?: Partial<typeof card.slots>
+}
+
+export interface CardSlots {
+  header(props?: {}): any
+  default(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Checkbox.vue

@@ -1,9 +1,48 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/checkbox";
-const appConfig = _appConfig;
-const checkbox = tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} });
+<script lang="ts">
+import type { InputHTMLAttributes } from 'vue'
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/checkbox'
+
+const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
+
+const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id'> {
+  label?: string
+  description?: string
+  color?: CheckboxVariants['color']
+  size?: CheckboxVariants['size']
+  /**
+   * The icon displayed when checked.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  icon?: string
+  indeterminate?: InputHTMLAttributes['indeterminate']
+  /**
+   * The icon displayed when the checkbox is indeterminate.
+   * @defaultValue appConfig.ui.icons.minus
+   */
+  indeterminateIcon?: string
+  /** The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. */
+  defaultValue?: boolean
+  class?: any
+  ui?: Partial<typeof checkbox.slots>
+}
+
+export interface CheckboxEmits {
+  (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
+}
+
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Chip.vue

@@ -1,9 +1,42 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/chip";
-const appConfig = _appConfig;
-const chip = tv({ extend: tv(theme), ...appConfig.ui?.chip || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/chip'
+
+const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+
+const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+
+type ChipVariants = VariantProps<typeof chip>
+
+export interface ChipProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** Display some text inside the chip. */
+  text?: string | number
+  color?: ChipVariants['color']
+  size?: ChipVariants['size']
+  position?: ChipVariants['position']
+  /** When `true`, translate the chip at the edge for non rounded elements. */
+  inset?: boolean
+  /** When `true`, render the chip relatively to the parent. */
+  standalone?: boolean
+  class?: any
+  ui?: Partial<typeof chip.slots>
+}
+
+export interface ChipEmits {
+  (e: 'update:show', payload: boolean): void
+}
+
+export interface ChipSlots {
+  default(props?: {}): any
+  content(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">