@nuxt/ui 4.3.0 → 4.5.0

package/dist/runtime/components/DashboardSearch.vue

@@ -8,12 +8,14 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig, useColorMode, defineShortcuts, useRuntimeHook } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
 import UCommandPalette from "./CommandPalette.vue";
 import UModal from "./Modal.vue";
 const props = defineProps({
+  size: { type: null, required: false },
   icon: { type: null, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false },
@@ -26,7 +28,7 @@ const props = defineProps({
   fuse: { type: Object, required: false },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   overlay: { type: Boolean, required: false },
@@ -46,13 +48,15 @@ useRuntimeHook("dashboard:search:toggle", () => {
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
-const commandPaletteProps = useForwardProps(reactivePick(props, "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const uiProp = useComponentUI("dashboardSearch", props);
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {}
 }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearch || {} })({
+  size: props.size,
   fullscreen: props.fullscreen
 }));
 const groups = computed(() => {
@@ -114,7 +118,7 @@ defineExpose({
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="ui.modal({ class: [props.ui?.modal, props.class] })"
+    :class="ui.modal({ class: [uiProp?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -124,7 +128,8 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :ui="transformUI(omit(ui, ['modal']), props.ui)"
+          :input="{ fixed: true }"
+          :ui="transformUI(omit(ui, ['modal']), uiProp)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

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

@@ -5,6 +5,10 @@ import type { ButtonProps, InputProps, ModalProps, CommandPaletteProps, CommandP
 import type { ComponentConfig } from '../types/tv';
 type DashboardSearch = ComponentConfig<typeof theme, AppConfig, 'dashboardSearch'>;
 export interface DashboardSearchProps<T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+    /**
+     * @defaultValue 'md'
+     */
+    size?: DashboardSearch['variants']['size'];
     /**
      * The icon displayed in the input.
      * @defaultValue appConfig.ui.icons.search
@@ -66,11 +70,13 @@ export type DashboardSearchSlots = CommandPaletteSlots<CommandPaletteGroup<Comma
         close: () => void;
     }): any;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchProps<CommandPaletteItem> & {
     open?: boolean;
     searchTerm?: string;
 }, {
-    commandPaletteRef: Readonly<import("vue").ShallowRef<any>>;
+    commandPaletteRef: Readonly<import("vue").ShallowRef<{} | null, {} | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
@@ -80,9 +86,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dashbo
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    close: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    colorMode: boolean;
+    fullscreen: boolean;
+    shortcut: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSearchSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -44,9 +44,14 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
     ui?: DashboardSearchButton['slots'] & ButtonProps['ui'];
     class?: any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    collapsed: boolean;
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardSearchButton.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { omit, transformUI } from "../utils";
@@ -24,7 +25,7 @@ const props = defineProps({
   collapsed: { type: Boolean, required: false, default: false },
   tooltip: { type: [Boolean, Object], required: false, default: false },
   kbds: { type: Array, required: false, default: () => ["meta", "k"] },
-  ui: { type: void 0, required: false },
+  ui: { type: Object, required: false },
   class: { type: null, required: false },
   activeColor: { type: null, required: false },
   activeVariant: { type: null, required: false },
@@ -53,6 +54,7 @@ const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "varian
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSearchButton", props);
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSearchButton || {} })({
@@ -74,8 +76,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
   } : {},
   ...$attrs
 }"
-      :class="ui.base({ class: [props.ui?.base, props.class] })"
-      :ui="transformUI(ui, props.ui)"
+      :class="ui.base({ class: [uiProp?.base, props.class] })"
+      :ui="transformUI(ui, uiProp)"
       @click="toggleSearch"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -83,7 +85,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <div data-slot="trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <div data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
           <slot name="trailing" :ui="uiProxy">
             <template v-if="kbds?.length">
               <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />

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

@@ -44,9 +44,14 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
     ui?: DashboardSearchButton['slots'] & ButtonProps['ui'];
     class?: any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    collapsed: boolean;
+    tooltip: boolean | TooltipProps;
+    kbds: KbdProps["value"][] | KbdProps[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -27,6 +27,11 @@ export interface DashboardSidebarProps<T extends DashboardSidebarMode = Dashboar
      * @defaultValue 'left'
      */
     toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
     class?: any;
     ui?: DashboardSidebar['slots'];
 }
@@ -58,22 +63,27 @@ export interface DashboardSidebarSlots {
         ui: DashboardSidebar['ui'];
     }): any;
 }
-declare const __VLS_export: <T extends DashboardSidebarMode>(__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<(DashboardSidebarProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends DashboardSidebarMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(DashboardSidebarProps<T> & {
         open?: boolean;
         collapsed?: boolean;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DashboardSidebarSlots;
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void);
+    emit: ((event: "update:open", value: boolean) => void) & ((event: "update:collapsed", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/DashboardSidebar.vue

@@ -7,6 +7,7 @@ import { ref, computed, toRef, useId, watch } from "vue";
 import { defu } from "defu";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useResizable } from "../composables/useResizable";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
@@ -22,8 +23,9 @@ const props = defineProps({
   menu: { type: null, required: false },
   toggle: { type: [Boolean, Object], required: false, default: true },
   toggleSide: { type: String, required: false, default: "left" },
+  autoClose: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   id: { type: String, required: false },
   side: { type: String, required: false, default: "left" },
   minSize: { type: Number, required: false, default: 10 },
@@ -39,6 +41,7 @@ const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false
 const route = useRoute();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSidebar", props);
 const dashboardContext = useDashboard({
   storageKey: "dashboard",
   unit: "%",
@@ -58,6 +61,7 @@ useRuntimeHook("dashboard:sidebar:collapse", (value) => {
 watch(open, () => dashboardContext.sidebarOpen.value = open.value, { immediate: true });
 watch(isCollapsed, () => dashboardContext.sidebarCollapsed.value = isCollapsed.value, { immediate: true });
 watch(() => route.fullPath, () => {
+  if (!props.autoClose) return;
   open.value = false;
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebar || {} })({
@@ -86,7 +90,7 @@ function toggleOpen() {
         v-bind="typeof toggle === 'object' ? toggle : {}"
         :side="toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
@@ -97,7 +101,7 @@ function toggleOpen() {
         v-if="resizable"
         :aria-controls="id"
         data-slot="handle"
-        :class="ui.handle({ class: props.ui?.handle })"
+        :class="ui.handle({ class: uiProp?.handle })"
         @mousedown="onMouseDown"
         @touchstart="onTouchStart"
         @dblclick="onDoubleClick"
@@ -114,18 +118,18 @@ function toggleOpen() {
     :data-collapsed="isCollapsed"
     :data-dragging="isDragging"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
   >
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+    <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
       <slot :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
       <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
   </div>
@@ -138,13 +142,13 @@ function toggleOpen() {
     :description="t('dashboardSidebar.description')"
     v-bind="menuProps"
     :ui="{
-  overlay: ui.overlay({ class: props.ui?.overlay }),
-  content: ui.content({ class: props.ui?.content })
+  overlay: ui.overlay({ class: uiProp?.overlay }),
+  content: ui.content({ class: uiProp?.content })
 }"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header, menu: true })">
+        <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: uiProp?.header, menu: true })">
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
 
           <slot name="header" />
@@ -152,11 +156,11 @@ function toggleOpen() {
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
         </div>
 
-        <div data-slot="body" :class="ui.body({ class: props.ui?.body, menu: true })">
+        <div data-slot="body" :class="ui.body({ class: uiProp?.body, menu: true })">
           <slot />
         </div>
 
-        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, menu: true })">
           <slot name="footer" />
         </div>
       </slot>

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

@@ -27,6 +27,11 @@ export interface DashboardSidebarProps<T extends DashboardSidebarMode = Dashboar
      * @defaultValue 'left'
      */
     toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
     class?: any;
     ui?: DashboardSidebar['slots'];
 }
@@ -58,22 +63,27 @@ export interface DashboardSidebarSlots {
         ui: DashboardSidebar['ui'];
     }): any;
 }
-declare const __VLS_export: <T extends DashboardSidebarMode>(__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<(DashboardSidebarProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends DashboardSidebarMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(DashboardSidebarProps<T> & {
         open?: boolean;
         collapsed?: boolean;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DashboardSidebarSlots;
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void);
+    emit: ((event: "update:open", value: boolean) => void) & ((event: "update:collapsed", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -13,7 +13,14 @@ export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPro
      * @defaultValue 'left'
      */
     side?: 'left' | 'right';
+    ui?: {
+        base?: any;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
@@ -15,6 +16,7 @@ const props = defineProps({
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
   side: { type: String, required: false, default: "left" },
+  ui: { type: Object, required: false },
   label: { type: String, required: false },
   activeColor: { type: null, required: false },
   activeVariant: { type: null, required: false },
@@ -24,7 +26,6 @@ const props = defineProps({
   loadingAuto: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -42,6 +43,7 @@ const props = defineProps({
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSidebarCollapse", props);
 const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
 } });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarCollapse || {} }));
@@ -55,7 +57,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSide
   'aria-label': sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse'),
   ...$attrs
 }"
-    :class="ui({ class: props.class, side: props.side })"
+    :class="ui({ class: [uiProp?.base, props.class], side: props.side })"
     @click="collapseSidebar?.(!sidebarCollapsed)"
   />
 </template>

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

@@ -13,7 +13,14 @@ export interface DashboardSidebarCollapseProps extends Omit<ButtonProps, LinkPro
      * @defaultValue 'left'
      */
     side?: 'left' | 'right';
+    ui?: {
+        base?: any;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarCollapseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -13,7 +13,14 @@ export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkProps
      * @defaultValue 'left'
      */
     side?: 'left' | 'right';
+    ui?: {
+        base?: any;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
@@ -16,6 +17,7 @@ const props = defineProps({
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
   side: { type: String, required: false, default: "left" },
+  ui: { type: Object, required: false },
   label: { type: String, required: false },
   activeColor: { type: null, required: false },
   activeVariant: { type: null, required: false },
@@ -25,7 +27,6 @@ const props = defineProps({
   loadingAuto: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
@@ -43,6 +44,7 @@ const props = defineProps({
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "side", "class"));
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSidebarToggle", props);
 const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {
 } });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarToggle || {} }));
@@ -56,7 +58,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSide
   'aria-label': sidebarOpen ? t('dashboardSidebarToggle.close') : t('dashboardSidebarToggle.open'),
   ...$attrs
 }"
-    :class="ui({ class: props.class, side: props.side })"
+    :class="ui({ class: [uiProp?.base, props.class], side: props.side })"
     @click="toggleSidebar"
   />
 </template>

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

@@ -13,7 +13,14 @@ export interface DashboardSidebarToggleProps extends Omit<ButtonProps, LinkProps
      * @defaultValue 'left'
      */
     side?: 'left' | 'right';
+    ui?: {
+        base?: any;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
+    color: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    side: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -16,9 +16,9 @@ export interface DashboardToolbarSlots {
     left(props?: {}): any;
     right(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardToolbar.vue

@@ -6,25 +6,27 @@ import theme from "#build/ui/dashboard-toolbar";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardToolbar", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardToolbar || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <slot>
-      <div data-slot="left" :class="ui.left({ class: [props.ui?.left] })">
+      <div data-slot="left" :class="ui.left({ class: [uiProp?.left] })">
         <slot name="left" />
       </div>
 
-      <div data-slot="right" :class="ui.right({ class: [props.ui?.right] })">
+      <div data-slot="right" :class="ui.right({ class: [uiProp?.right] })">
         <slot name="right" />
       </div>
     </slot>

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

@@ -16,9 +16,9 @@ export interface DashboardToolbarSlots {
     left(props?: {}): any;
     right(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -55,6 +55,8 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
@@ -71,9 +73,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Drawer
     onRelease?: ((open: boolean) => any) | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
     onAnimationEnd?: ((open: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    overlay: boolean;
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    direction: import("vaul-vue").DrawerDirection;
+    handle: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;