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

package/dist/runtime/components/Textarea.vue

@@ -1,9 +1,45 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/textarea";
-const appConfig = _appConfig;
-const textarea = tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} });
+<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/textarea'
+
+const appConfig = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
+
+const textarea = tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })
+
+type TextareaVariants = VariantProps<typeof textarea>
+
+export interface TextareaProps {
+  id?: string
+  name?: string
+  /** The placeholder text when the textarea is empty. */
+  placeholder?: string
+  color?: TextareaVariants['color']
+  variant?: TextareaVariants['variant']
+  size?: TextareaVariants['size']
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  class?: any
+  rows?: number
+  maxrows?: number
+  autoresize?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  ui?: Partial<typeof textarea.slots>
+}
+
+export interface TextareaEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface TextareaSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">
@@ -96,6 +132,8 @@ function autoResize() {
     }
 
     textareaRef.value.rows = props.rows
+    const overflow = textareaRef.value.style.overflow
+    textareaRef.value.style.overflow = 'hidden'
 
     const styles = window.getComputedStyle(textareaRef.value)
     const paddingTop = Number.parseInt(styles.paddingTop)
@@ -108,6 +146,8 @@ function autoResize() {
     if (newRows > props.rows) {
       textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows
     }
+
+    textareaRef.value.style.overflow = overflow
   }
 }
 

package/dist/runtime/components/Toast.vue

@@ -1,9 +1,58 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/toast";
-const appConfig = _appConfig;
-const toast = tv({ extend: tv(theme), ...appConfig.ui?.toast || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/toast'
+import type { AvatarProps, ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
+
+const toast = tv({ extend: tv(theme), ...(appConfig.ui?.toast || {}) })
+
+type ToastVariants = VariantProps<typeof toast>
+
+export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'li'
+   */
+  as?: any
+  title?: string
+  description?: string
+  icon?: string
+  avatar?: AvatarProps
+  color?: ToastVariants['color']
+  /**
+   * 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 toast.
+   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  class?: any
+  ui?: Partial<typeof toast.slots>
+}
+
+export interface ToastEmits extends ToastRootEmits {}
+
+export interface ToastSlots {
+  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/Toaster.vue

@@ -1,9 +1,30 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/toaster";
-const appConfig = _appConfig;
-const toaster = tv({ extend: tv(theme), ...appConfig.ui?.toaster || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ToastProviderProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/toaster'
+
+const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
+
+const toaster = tv({ extend: tv(theme), ...(appConfig.ui?.toaster || {}) })
+
+type ToasterVariants = VariantProps<typeof toaster>
+
+export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  position?: ToasterVariants['position']
+  /**
+   * Expand the toasts to show multiple toasts at once.
+   * @defaultValue true
+   */
+  expand?: boolean
+  class?: any
+  ui?: Partial<typeof toaster.slots>
+}
+
+export interface ToasterSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Tooltip.vue

@@ -1,9 +1,45 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/tooltip";
-const appConfig = _appConfig;
-const tooltip = tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tooltip'
+import type { KbdProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
+
+const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
+
+export interface TooltipProps extends TooltipRootProps {
+  /** The text content of the tooltip. */
+  text?: string
+  /** The keyboard keys to display in the tooltip. */
+  kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The content of the tooltip.
+   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   */
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'>
+  /**
+   * Display an arrow alongside the tooltip.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the tooltip in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof tooltip.slots>
+}
+
+export interface TooltipEmits extends TooltipRootEmits {}
+
+export interface TooltipSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -1,10 +1,10 @@
 import { type ComputedRef, type InjectionKey } from 'vue';
-import type { AvatarGroupProps } from '../types.js';
+import type { AvatarGroupProps } from '../types/index.js';
 export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
     size: AvatarGroupProps['size'];
 }>>;
 export declare function useAvatarGroup(props: {
     size: AvatarGroupProps['size'];
 }): {
-    size: ComputedRef<"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | undefined>;
+    size: ComputedRef<any>;
 };

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -1,4 +1,4 @@
-import { type InjectionKey, type ComputedRef } from 'vue';
+import type { InjectionKey, ComputedRef } from 'vue';
 import type { ButtonGroupProps } from '../components/ButtonGroup.vue.js';
 import type { GetObjectField } from '../types/utils.js';
 export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
@@ -9,7 +9,7 @@ type Props<T> = {
     size?: GetObjectField<T, 'size'>;
 };
 export declare function useButtonGroup<T>(props: Props<T>): {
-    orientation: ComputedRef<"horizontal" | "vertical" | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    orientation: ComputedRef<any>;
+    size: ComputedRef<any>;
 };
 export {};

package/dist/runtime/composables/useFormField.d.ts

@@ -1,6 +1,6 @@
 import { type InjectionKey, type Ref, type ComputedRef } from 'vue';
 import { type UseEventBusReturn } from '@vueuse/core';
-import type { FormFieldProps } from '../types.js';
+import type { FormFieldProps } from '../types/index.js';
 import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form.js';
 import type { GetObjectField } from '../types/utils.js';
 type Props<T> = {
@@ -16,11 +16,14 @@ type Props<T> = {
 export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
 export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>>;
 export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
+export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
 export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>>;
-export declare function useFormField<T>(props?: Props<T>): {
+export declare function useFormField<T>(props?: Props<T>, opts?: {
+    bind?: boolean;
+}): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
-    size: ComputedRef<"md" | "xs" | "sm" | "lg" | "xl" | NonNullable<GetObjectField<T, "size">> | undefined>;
+    size: ComputedRef<any>;
     color: ComputedRef<"error" | GetObjectField<T, "color"> | undefined>;
     highlight: ComputedRef<boolean | undefined>;
     disabled: ComputedRef<boolean | undefined>;

package/dist/runtime/composables/useFormField.js

@@ -3,18 +3,22 @@ import { useDebounceFn } from "@vueuse/core";
 export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
 export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
 export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
+export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
 export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
-export function useFormField(props) {
+export function useFormField(props, opts) {
   const formOptions = inject(formOptionsInjectionKey, void 0);
   const formBus = inject(formBusInjectionKey, void 0);
   const formField = inject(formFieldInjectionKey, void 0);
   const formInputs = inject(formInputsInjectionKey, void 0);
-  if (formField) {
-    if (props?.id) {
-      formField.value.id = props?.id;
+  const inputId = inject(inputIdInjectionKey, void 0);
+  if (formField && inputId) {
+    if (opts?.bind === false || props?.legend) {
+      inputId.value = void 0;
+    } else if (props?.id) {
+      inputId.value = props?.id;
     }
-    if (formInputs && formField.value.name) {
-      formInputs.value[formField.value.name] = formField.value.id;
+    if (formInputs && formField.value.name && inputId.value) {
+      formInputs.value[formField.value.name] = inputId.value;
     }
   }
   const blurred = ref(false);
@@ -37,7 +41,7 @@ export function useFormField(props) {
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   );
   return {
-    id: computed(() => props?.id ?? formField?.value.id),
+    id: computed(() => props?.id ?? inputId?.value),
     name: computed(() => props?.name ?? formField?.value.name),
     size: computed(() => props?.size ?? formField?.value.size),
     color: computed(() => formField?.value.error ? "error" : props?.color),

package/dist/runtime/composables/useModal.d.ts

@@ -1,5 +1,5 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
-import type { ModalProps } from '../types.js';
+import type { ModalProps } from '../types/index.js';
 import type { ComponentProps } from '../types/component.js';
 export interface ModalState {
     component: Component | string;

package/dist/runtime/composables/useSlideover.d.ts

@@ -1,5 +1,5 @@
 import type { ShallowRef, Component, InjectionKey } from 'vue';
-import type { SlideoverProps } from '../types.js';
+import type { SlideoverProps } from '../types/index.js';
 import type { ComponentProps } from '../types/component.js';
 export interface SlideoverState {
     component: Component | string;

package/dist/runtime/composables/useToast.d.ts

@@ -1,4 +1,4 @@
-import type { ToastProps } from '../types.js';
+import type { ToastProps } from '../types/index.js';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
     click?: (toast: Toast) => void;

package/dist/runtime/index.css

@@ -0,0 +1 @@
+@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;--color-primary-50:var(--color-primary-50);--color-primary-100:var(--color-primary-100);--color-primary-200:var(--color-primary-200);--color-primary-300:var(--color-primary-300);--color-primary-400:var(--color-primary-400);--color-primary-500:var(--color-primary-500);--color-primary-600:var(--color-primary-600);--color-primary-700:var(--color-primary-700);--color-primary-800:var(--color-primary-800);--color-primary-900:var(--color-primary-900);--color-primary-950:var(--color-primary-950);--color-error-50:var(--color-error-50);--color-error-100:var(--color-error-100);--color-error-200:var(--color-error-200);--color-error-300:var(--color-error-300);--color-error-400:var(--color-error-400);--color-error-500:var(--color-error-500);--color-error-600:var(--color-error-600);--color-error-700:var(--color-error-700);--color-error-800:var(--color-error-800);--color-error-900:var(--color-error-900);--color-error-950:var(--color-error-950);--color-gray-50:var(--color-gray-50);--color-gray-100:var(--color-gray-100);--color-gray-200:var(--color-gray-200);--color-gray-300:var(--color-gray-300);--color-gray-400:var(--color-gray-400);--color-gray-500:var(--color-gray-500);--color-gray-600:var(--color-gray-600);--color-gray-700:var(--color-gray-700);--color-gray-800:var(--color-gray-800);--color-gray-900:var(--color-gray-900);--color-gray-950:var(--color-gray-950)}@layer base{:root{color-scheme:light dark}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}}

package/dist/runtime/plugins/colors.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/modal.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/slideover.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/types/form.d.ts

@@ -24,7 +24,7 @@ export interface FormError<P extends string = string> {
     message: string;
 }
 export interface FormErrorWithId extends FormError {
-    id: string;
+    id?: string;
 }
 export type FormSubmitEvent<T> = SubmitEvent & {
     data: T;
@@ -54,7 +54,6 @@ export interface FormInjectedOptions {
     validateOnInputDelay?: number;
 }
 export interface FormFieldInjectedOptions<T> {
-    id: string;
     name?: string;
     size?: GetObjectField<T, 'size'>;
     error?: string | boolean;

package/dist/runtime/utils/link.d.ts

@@ -1,59 +1,27 @@
-import type { LinkProps } from '../types.js';
+import type { LinkProps } from '../types/index.js';
 export declare function pickLinkProps(link: LinkProps & {
     ariaLabel?: string;
 }): {
-    type?: import("vue").ButtonHTMLAttributes["type"];
-    as?: any;
-    target?: ("_blank" | "_parent" | "_self" | "_top" | (string & {}) | null) | undefined;
-    to?: string | {
-        name?: import("vue-router").RouteRecordNameGeneric;
-        params?: import("vue-router").RouteParamsRawGeneric | undefined;
-        path?: undefined;
-        query?: import("vue-router").LocationQueryRaw | undefined;
-        hash?: string | undefined;
-        replace?: boolean | undefined;
-        force?: boolean | undefined;
-        state?: import("vue-router").HistoryState | undefined;
-    } | {
-        path: string;
-        query?: import("vue-router").LocationQueryRaw | undefined;
-        hash?: string | undefined;
-        replace?: boolean | undefined;
-        force?: boolean | undefined;
-        state?: import("vue-router").HistoryState | undefined;
-    } | undefined;
-    activeClass?: string | undefined;
-    exactActiveClass?: string | undefined;
-    ariaCurrentValue?: ("page" | "step" | "location" | "date" | "time" | "true" | "false") | undefined;
-    replace?: boolean | undefined;
-    disabled?: boolean | undefined;
-    active?: boolean | undefined;
-    exact?: boolean | undefined;
-    exactQuery?: boolean | undefined;
-    exactHash?: boolean | undefined;
-    inactiveClass?: string | undefined;
-    href?: string | {
-        name?: import("vue-router").RouteRecordNameGeneric;
-        params?: import("vue-router").RouteParamsRawGeneric | undefined;
-        path?: undefined;
-        query?: import("vue-router").LocationQueryRaw | undefined;
-        hash?: string | undefined;
-        replace?: boolean | undefined;
-        force?: boolean | undefined;
-        state?: import("vue-router").HistoryState | undefined;
-    } | {
-        path: string;
-        query?: import("vue-router").LocationQueryRaw | undefined;
-        hash?: string | undefined;
-        replace?: boolean | undefined;
-        force?: boolean | undefined;
-        state?: import("vue-router").HistoryState | undefined;
-    } | undefined;
-    external?: boolean | undefined;
-    rel?: ("noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | (string & {}) | null) | undefined;
-    noRel?: boolean | undefined;
-    prefetchedClass?: string | undefined;
-    prefetch?: boolean | undefined;
-    noPrefetch?: boolean | undefined;
-    ariaLabel?: string | undefined;
+    type: any;
+    active: any;
+    activeClass: any;
+    ariaCurrentValue: any;
+    ariaLabel: any;
+    as: any;
+    disabled: any;
+    exact: any;
+    exactActiveClass: any;
+    exactHash: any;
+    exactQuery: any;
+    external: any;
+    href: any;
+    inactiveClass: any;
+    noPrefetch: any;
+    noRel: any;
+    prefetch: any;
+    prefetchedClass: any;
+    rel: any;
+    replace: any;
+    target: any;
+    to: any;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.0.0-alpha.0",
-  "packageManager": "pnpm@9.9.0",
+  "version": "3.0.0-alpha.1",
+  "packageManager": "pnpm@9.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -13,22 +13,21 @@
     ".": {
       "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "require": "./dist/module.cjs",
+      "style": "./dist/runtime/index.css"
     },
     "./runtime/*": "./dist/runtime/*"
   },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
+  "style": "./dist/runtime/index.css",
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist",
     "cli"
   ],
-  "engines": {
-    "node": ">=v16.20.2"
-  },
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
@@ -42,15 +41,15 @@
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs",
     "test": "vitest",
-    "release": "release-it"
+    "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
     "@nuxt/icon": "^1.5.1",
     "@nuxt/kit": "^3.13.1",
     "@nuxt/schema": "^3.13.1",
     "@nuxtjs/color-mode": "^3.4.4",
-    "@tailwindcss/postcss": "4.0.0-alpha.22",
-    "@tailwindcss/vite": "4.0.0-alpha.22",
+    "@tailwindcss/postcss": "4.0.0-alpha.23",
+    "@tailwindcss/vite": "4.0.0-alpha.23",
     "@vueuse/core": "^11.0.3",
     "@vueuse/integrations": "^11.0.3",
     "defu": "^6.1.4",
@@ -59,16 +58,16 @@
     "radix-vue": "^1.9.5",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "4.0.0-alpha.22",
+    "tailwindcss": "4.0.0-alpha.23",
     "vaul-vue": "^0.2.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.5.5",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/test-utils": "^3.14.1",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/test-utils": "^3.14.2",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "happy-dom": "^15.7.3",
     "joi": "^17.13.3",
     "nuxt": "^3.13.1",

package/dist/runtime/assets/css/animations.css

@@ -1 +0,0 @@
-@keyframes accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes collapsible-up{0%{height:var(--radix-collapsible-content-height)}to{height:0}}@keyframes collapsible-down{0%{height:0}to{height:var(--radix-collapsible-content-height)}}@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slide-in-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slide-out-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slide-in-from-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slide-out-to-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-in-from-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slide-out-to-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-from-top-and-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-top-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes slide-in-from-right-and-fade{0%{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-right-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes slide-in-from-bottom-and-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom-and-fade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes slide-in-from-left-and-fade{0%{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-out-to-left-and-fade{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes enter-from-right{0%{opacity:0;transform:translateX(200px)}to{opacity:1;transform:translateX(0)}}@keyframes enter-from-left{0%{opacity:0;transform:translateX(-200px)}to{opacity:1;transform:translateX(0)}}@keyframes exit-to-right{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(200px)}}@keyframes exit-to-left{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-200px)}}@keyframes carousel{0%,to{width:50%}0%{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes carousel-vertical{0%,to{height:50%}0%{transform:translateY(-100%)}to{transform:translateY(200%)}}@keyframes carousel-inverse{0%,to{width:50%}0%{transform:translateX(200%)}to{transform:translateX(-100%)}}@keyframes carousel-inverse-vertical{0%,to{height:50%}0%{transform:translateY(200%)}to{transform:translateY(-100%)}}@keyframes swing{0%,to{width:50%}0%,to{transform:translateX(-25%)}50%{transform:translateX(125%)}}@keyframes swing-vertical{0%,to{height:50%}0%,to{transform:translateY(-25%)}50%{transform:translateY(125%)}}@keyframes elastic{0%,to{margin-left:25%;width:50%}50%{margin-left:5%;width:90%}}@keyframes elastic-vertical{0%,to{height:50%;margin-top:25%}50%{height:90%;margin-top:5%}}