@nuxt/ui 2.18.3 → 3.0.0-alpha.0

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

@@ -0,0 +1 @@
+@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/components/Accordion.vue

@@ -0,0 +1,67 @@
+<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>
+
+<script setup lang="ts" generic="T extends AccordionItem">
+import { computed } from 'vue'
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+
+const props = withDefaults(defineProps<AccordionProps<T>>(), {
+  type: 'single',
+  collapsible: true
+})
+const emits = defineEmits<AccordionEmits>()
+const slots = defineSlots<AccordionSlots<T>>()
+
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type'), emits)
+
+const ui = computed(() => accordion({
+  disabled: props.disabled
+}))
+</script>
+
+<template>
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <AccordionItem
+      v-for="(item, index) in items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="ui.item({ class: props.ui?.item })"
+    >
+      <AccordionHeader :class="ui.header({ class: props.ui?.header })">
+        <AccordionTrigger :class="ui.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
+          <slot name="leading" :item="item" :index="index" :open="open">
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          </slot>
+
+          <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+            <slot :item="item" :index="index" :open="open">{{ item.label }}</slot>
+          </span>
+
+          <slot name="trailing" :item="item" :index="index" :open="open">
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body`])" :class="ui.content({ class: props.ui?.content })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
+          <div :class="ui.body({ class: props.ui?.body })">
+            <slot :name="item.slot ? `${item.slot}-body`: 'body'" :item="item" :index="index" :open="open">
+              {{ item.content }}
+            </slot>
+          </div>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>

package/dist/runtime/components/Accordion.vue.d.ts

@@ -0,0 +1,492 @@
+import type { AccordionRootProps, AccordionRootEmits, AccordionItemProps } from 'radix-vue';
+import type { DynamicSlots } from '../types/utils.js';
+declare const accordion: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}>, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}>, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    header: string;
+    trigger: string;
+    content: string;
+    body: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    label: string;
+}, undefined, import("tailwind-variants/dist/config.js").TVConfig<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}>, unknown, unknown, undefined>>>;
+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>>;
+declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<{}> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }>, never>, "onUpdate:modelValue"> & AccordionProps<T>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        leading: SlotProps<T>;
+        default: SlotProps<T>;
+        trailing: SlotProps<T>;
+        content: SlotProps<T>;
+        body: SlotProps<T>;
+    } & Record<string, SlotProps<T>> & (T["slot"] extends infer T_1 ? T_1 extends T["slot"] ? T_1 extends string ? Record<T_1, SlotProps<T>> : Record<string, never> : never : never)> & {
+        leading: SlotProps<T>;
+        default: SlotProps<T>;
+        trailing: SlotProps<T>;
+        content: SlotProps<T>;
+        body: SlotProps<T>;
+    } & Record<string, SlotProps<T>> & (T["slot"] extends infer T_1 ? T_1 extends T["slot"] ? T_1 extends string ? Record<T_1, SlotProps<T>> : Record<string, never> : never : never);
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};
+declare module 'vue' {
+    interface GlobalComponents {
+    }
+    interface GlobalDirectives {
+    }
+}
+declare global {
+    const __VLS_intrinsicElements: __VLS_IntrinsicElements;
+    const __VLS_directiveBindingRestFields: {
+        instance: null;
+        oldValue: null;
+        modifiers: any;
+        dir: any;
+    };
+    const __VLS_unref: typeof import('vue').unref;
+    const __VLS_nativeElements: {
+        a: HTMLAnchorElement;
+        abbr: HTMLElement;
+        address: HTMLElement;
+        area: HTMLAreaElement;
+        article: HTMLElement;
+        aside: HTMLElement;
+        audio: HTMLAudioElement;
+        b: HTMLElement;
+        base: HTMLBaseElement;
+        bdi: HTMLElement;
+        bdo: HTMLElement;
+        blockquote: HTMLQuoteElement;
+        body: HTMLBodyElement;
+        br: HTMLBRElement;
+        button: HTMLButtonElement;
+        canvas: HTMLCanvasElement;
+        caption: HTMLTableCaptionElement;
+        cite: HTMLElement;
+        code: HTMLElement;
+        col: HTMLTableColElement;
+        colgroup: HTMLTableColElement;
+        data: HTMLDataElement;
+        datalist: HTMLDataListElement;
+        dd: HTMLElement;
+        del: HTMLModElement;
+        details: HTMLDetailsElement;
+        dfn: HTMLElement;
+        dialog: HTMLDialogElement;
+        div: HTMLDivElement;
+        dl: HTMLDListElement;
+        dt: HTMLElement;
+        em: HTMLElement;
+        embed: HTMLEmbedElement;
+        fieldset: HTMLFieldSetElement;
+        figcaption: HTMLElement;
+        figure: HTMLElement;
+        footer: HTMLElement;
+        form: HTMLFormElement;
+        h1: HTMLHeadingElement;
+        h2: HTMLHeadingElement;
+        h3: HTMLHeadingElement;
+        h4: HTMLHeadingElement;
+        h5: HTMLHeadingElement;
+        h6: HTMLHeadingElement;
+        head: HTMLHeadElement;
+        header: HTMLElement;
+        hgroup: HTMLElement;
+        hr: HTMLHRElement;
+        html: HTMLHtmlElement;
+        i: HTMLElement;
+        iframe: HTMLIFrameElement;
+        img: HTMLImageElement;
+        input: HTMLInputElement;
+        ins: HTMLModElement;
+        kbd: HTMLElement;
+        label: HTMLLabelElement;
+        legend: HTMLLegendElement;
+        li: HTMLLIElement;
+        link: HTMLLinkElement;
+        main: HTMLElement;
+        map: HTMLMapElement;
+        mark: HTMLElement;
+        menu: HTMLMenuElement;
+        meta: HTMLMetaElement;
+        meter: HTMLMeterElement;
+        nav: HTMLElement;
+        noscript: HTMLElement;
+        object: HTMLObjectElement;
+        ol: HTMLOListElement;
+        optgroup: HTMLOptGroupElement;
+        option: HTMLOptionElement;
+        output: HTMLOutputElement;
+        p: HTMLParagraphElement;
+        picture: HTMLPictureElement;
+        pre: HTMLPreElement;
+        progress: HTMLProgressElement;
+        q: HTMLQuoteElement;
+        rp: HTMLElement;
+        rt: HTMLElement;
+        ruby: HTMLElement;
+        s: HTMLElement;
+        samp: HTMLElement;
+        script: HTMLScriptElement;
+        search: HTMLElement;
+        section: HTMLElement;
+        select: HTMLSelectElement;
+        slot: HTMLSlotElement;
+        small: HTMLElement;
+        source: HTMLSourceElement;
+        span: HTMLSpanElement;
+        strong: HTMLElement;
+        style: HTMLStyleElement;
+        sub: HTMLElement;
+        summary: HTMLElement;
+        sup: HTMLElement;
+        table: HTMLTableElement;
+        tbody: HTMLTableSectionElement;
+        td: HTMLTableCellElement;
+        template: HTMLTemplateElement;
+        textarea: HTMLTextAreaElement;
+        tfoot: HTMLTableSectionElement;
+        th: HTMLTableCellElement;
+        thead: HTMLTableSectionElement;
+        time: HTMLTimeElement;
+        title: HTMLTitleElement;
+        tr: HTMLTableRowElement;
+        track: HTMLTrackElement;
+        u: HTMLElement;
+        ul: HTMLUListElement;
+        var: HTMLElement;
+        video: HTMLVideoElement;
+        wbr: HTMLElement;
+        animate: SVGAnimateElement;
+        animateMotion: SVGAnimateMotionElement;
+        animateTransform: SVGAnimateTransformElement;
+        circle: SVGCircleElement;
+        clipPath: SVGClipPathElement;
+        defs: SVGDefsElement;
+        desc: SVGDescElement;
+        ellipse: SVGEllipseElement;
+        feBlend: SVGFEBlendElement;
+        feColorMatrix: SVGFEColorMatrixElement;
+        feComponentTransfer: SVGFEComponentTransferElement;
+        feComposite: SVGFECompositeElement;
+        feConvolveMatrix: SVGFEConvolveMatrixElement;
+        feDiffuseLighting: SVGFEDiffuseLightingElement;
+        feDisplacementMap: SVGFEDisplacementMapElement;
+        feDistantLight: SVGFEDistantLightElement;
+        feDropShadow: SVGFEDropShadowElement;
+        feFlood: SVGFEFloodElement;
+        feFuncA: SVGFEFuncAElement;
+        feFuncB: SVGFEFuncBElement;
+        feFuncG: SVGFEFuncGElement;
+        feFuncR: SVGFEFuncRElement;
+        feGaussianBlur: SVGFEGaussianBlurElement;
+        feImage: SVGFEImageElement;
+        feMerge: SVGFEMergeElement;
+        feMergeNode: SVGFEMergeNodeElement;
+        feMorphology: SVGFEMorphologyElement;
+        feOffset: SVGFEOffsetElement;
+        fePointLight: SVGFEPointLightElement;
+        feSpecularLighting: SVGFESpecularLightingElement;
+        feSpotLight: SVGFESpotLightElement;
+        feTile: SVGFETileElement;
+        feTurbulence: SVGFETurbulenceElement;
+        filter: SVGFilterElement;
+        foreignObject: SVGForeignObjectElement;
+        g: SVGGElement;
+        image: SVGImageElement;
+        line: SVGLineElement;
+        linearGradient: SVGLinearGradientElement;
+        marker: SVGMarkerElement;
+        mask: SVGMaskElement;
+        metadata: SVGMetadataElement;
+        mpath: SVGMPathElement;
+        path: SVGPathElement;
+        pattern: SVGPatternElement;
+        polygon: SVGPolygonElement;
+        polyline: SVGPolylineElement;
+        radialGradient: SVGRadialGradientElement;
+        rect: SVGRectElement;
+        set: SVGSetElement;
+        stop: SVGStopElement;
+        svg: SVGSVGElement;
+        switch: SVGSwitchElement;
+        symbol: SVGSymbolElement;
+        text: SVGTextElement;
+        textPath: SVGTextPathElement;
+        tspan: SVGTSpanElement;
+        use: SVGUseElement;
+        view: SVGViewElement;
+    };
+    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+    type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
+    type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
+    type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+    type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+    type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+    type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N1];
+    } : N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N2];
+    } : N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
+        [K in N0]: LocalComponents[N3];
+    } : N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N1];
+    } : N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N2];
+    } : N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
+        [K in N0]: __VLS_GlobalComponents[N3];
+    } : {
+        [K in N0]: unknown;
+    };
+    type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: {
+            props?: infer P;
+        };
+    } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
+    type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
+    type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+    type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
+    type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
+    type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? {
+        [K in E & string]: (...args: A) => void;
+    } : never : never;
+    type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & {
+        [K in keyof T]: T[K] extends any[] ? {
+            (...args: T[K]): void;
+        } : never;
+    }>>;
+    type __VLS_PrettifyGlobal<T> = {
+        [K in keyof T]: T[K];
+    } & {};
+    function __VLS_getVForSourceType(source: number): [number, number, number][];
+    function __VLS_getVForSourceType(source: string): [string, number, number][];
+    function __VLS_getVForSourceType<T extends any[]>(source: T): [
+        item: T[number],
+        key: number,
+        index: number
+    ][];
+    function __VLS_getVForSourceType<T extends {
+        [Symbol.iterator](): Iterator<any>;
+    }>(source: T): [
+        item: T extends {
+            [Symbol.iterator](): Iterator<infer T1>;
+        } ? T1 : never,
+        key: number,
+        index: undefined
+    ][];
+    function __VLS_getVForSourceType<T extends number | {
+        [Symbol.iterator](): Iterator<any>;
+    }>(source: T): [
+        item: number | (Exclude<T, number> extends {
+            [Symbol.iterator](): Iterator<infer T1>;
+        } ? T1 : never),
+        key: number,
+        index: undefined
+    ][];
+    function __VLS_getVForSourceType<T>(source: T): [
+        item: T[keyof T],
+        key: keyof T,
+        index: number
+    ][];
+    function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
+    function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
+    function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
+    function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
+    function __VLS_makeOptional<T>(t: T): {
+        [K in keyof T]?: T[K];
+    };
+    function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
+    function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
+        $props: infer Props;
+    } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
+        __ctx?: {
+            attrs?: any;
+            slots?: K extends {
+                $slots: infer Slots;
+            } ? Slots : any;
+            emit?: K extends {
+                $emit: infer Emit;
+            } ? Emit : any;
+        } & {
+            props?: (K extends {
+                $props: infer Props;
+            } ? Props : any) & Record<string, unknown>;
+            expose?(exposed: K): void;
+        };
+    } : T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> : T extends (...args: any) => any ? T : (_: {} & Record<string, unknown>, ctx?: any) => {
+        __ctx?: {
+            attrs?: any;
+            expose?: any;
+            slots?: any;
+            emit?: any;
+            props?: {} & Record<string, unknown>;
+        };
+    };
+    function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
+    function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+    function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: infer Ctx;
+    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
+    function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
+    function __VLS_tryAsConstant<const T>(t: T): T;
+}

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,78 @@
+<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>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
+import { useAppConfig } from '#imports'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+const props = defineProps<AlertProps>()
+const emits = defineEmits<AlertEmits>()
+const slots = defineSlots<AlertSlots>()
+
+const appConfig = useAppConfig()
+
+const multiline = computed(() => !!props.title && !!props.description)
+
+const ui = computed(() => alert({
+  color: props.color,
+  variant: props.variant
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
+    <slot name="leading">
+      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+    </slot>
+
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+
+      <div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
+        <slot name="actions">
+          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="(!multiline && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
+      <template v-if="!multiline">
+        <slot name="actions">
+          <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+        </slot>
+      </template>
+
+      <slot name="close" :ui="ui">
+        <UButton
+          v-if="close"
+          :icon="closeIcon || appConfig.ui.icons.close"
+          size="md"
+          color="gray"
+          variant="link"
+          aria-label="Close"
+          v-bind="typeof close === 'object' ? close : undefined"
+          :class="ui.close({ class: props.ui?.close })"
+          @click="emits('close')"
+        />
+      </slot>
+    </div>
+  </Primitive>
+</template>