@eslamdevui/ui 3.3.4 → 4.0.0-beta

package/dist/runtime/components/DashboardSidebar.vue

@@ -6,13 +6,17 @@ import theme from "#build/ui/dashboard-sidebar";
 import { ref, computed, toRef, useId, watch } from "vue";
 import { defu } from "defu";
 import { createReusableTemplate } from "@vueuse/core";
-import USlideover from "./Slideover.vue";
-import UModal from "./Modal.vue";
-import UDrawer from "./Drawer.vue";
 import { useAppConfig, useRuntimeHook, useRoute } from "#imports";
 import { useResizable } from "../composables/useResizable";
+import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
+import UDashboardResizeHandle from "./DashboardResizeHandle.vue";
+import UDashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   mode: { type: null, required: false, default: "slideover" },
   menu: { type: null, required: false },
@@ -29,101 +33,88 @@ const props = defineProps({
   collapsible: { type: Boolean, required: false, default: false },
   collapsedSize: { type: Number, required: false, default: 0 }
 });
-defineSlots();
-const open = defineModel("open", { type: Boolean, default: false });
-const collapsed = defineModel("collapsed", { type: Boolean, default: false });
+const slots = defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
 const route = useRoute();
+const { t } = useLocale();
 const appConfig = useAppConfig();
-const dashboardCtx = useDashboard({
+const dashboardContext = useDashboard({
   storageKey: "dashboard",
   unit: "%",
   sidebarOpen: ref(false),
   sidebarCollapsed: ref(false)
 });
-const id = `${dashboardCtx.storageKey}-sidebar-${props.id || useId()}`;
-const {
-  el,
-  size,
-  collapse,
-  isCollapsed,
-  isDragging,
-  onMouseDown,
-  onTouchStart
-} = useResizable(
-  id,
-  toRef(() => ({ ...dashboardCtx, ...props })),
-  { collapsed }
-);
-const [DefineToggle, ReuseToggle] = createReusableTemplate();
-const [DefineHandle, ReuseHandle] = createReusableTemplate();
+const id = `${dashboardContext.storageKey}-sidebar-${props.id || useId()}`;
+const { el, size, collapse, isCollapsed, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })), { collapsed });
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const [DefineResizeHandleTemplate, ReuseResizeHandleTemplate] = createReusableTemplate();
 useRuntimeHook("dashboard:sidebar:toggle", () => {
   open.value = !open.value;
 });
-useRuntimeHook("dashboard:sidebar:collapse", (v) => {
-  isCollapsed.value = v;
+useRuntimeHook("dashboard:sidebar:collapse", (value) => {
+  isCollapsed.value = value;
 });
-watch(open, () => {
-  if (dashboardCtx.sidebarOpen) {
-    dashboardCtx.sidebarOpen.value = open.value;
-  }
-}, { immediate: true });
-watch(isCollapsed, () => {
-  if (dashboardCtx.sidebarCollapsed) {
-    dashboardCtx.sidebarCollapsed.value = isCollapsed.value;
-  }
-}, { immediate: true });
+watch(open, () => dashboardContext.sidebarOpen.value = open.value, { immediate: true });
+watch(isCollapsed, () => dashboardContext.sidebarCollapsed.value = isCollapsed.value, { immediate: true });
 watch(() => route.fullPath, () => {
   open.value = false;
 });
-const ui = computed(
-  () => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebar })({ side: props.side })
-);
-const Menu = computed(() => ({ slideover: USlideover, modal: UModal, drawer: UDrawer })[props.mode]);
-const menuProps = toRef(() => defu(
-  props.menu,
-  { content: { onOpenAutoFocus: (e) => e.preventDefault() } },
-  props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}
-));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebar || {} })({
+  side: props.side
+}));
+const Menu = computed(() => ({
+  slideover: USlideover,
+  modal: UModal,
+  drawer: UDrawer
+})[props.mode]);
+const menuProps = toRef(() => defu(props.menu, {
+  content: {
+    onOpenAutoFocus: (e) => e.preventDefault()
+  }
+}, props.mode === "modal" ? { fullscreen: true, transition: false } : props.mode === "slideover" ? { side: "left" } : {}));
 function toggleOpen() {
   open.value = !open.value;
 }
 </script>
 
 <template>
-  <DefineToggle>
+  <DefineToggleTemplate>
     <slot name="toggle" :open="open" :toggle="toggleOpen">
       <UDashboardSidebarToggle
-        v-if="props.toggle"
-        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
-        :side="props.toggleSide"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
-  </DefineToggle>
+  </DefineToggleTemplate>
 
-  <DefineHandle>
-    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart">
+  <DefineResizeHandleTemplate>
+    <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
       <UDashboardResizeHandle
-        v-if="props.resizable"
+        v-if="resizable"
         :aria-controls="id"
         :class="ui.handle({ class: props.ui?.handle })"
         @mousedown="onMouseDown"
         @touchstart="onTouchStart"
+        @dblclick="onDoubleClick"
       />
     </slot>
-  </DefineHandle>
+  </DefineResizeHandleTemplate>
 
-  <ReuseHandle v-if="props.side === 'right'" />
+  <ReuseResizeHandleTemplate v-if="side === 'right'" />
 
   <div
     :id="id"
     ref="el"
+    v-bind="$attrs"
     :data-collapsed="isCollapsed"
     :data-dragging="isDragging"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
-    :style="{ '--width': `${size}${dashboardCtx.unit}` }"
+    :style="{ '--width': `${size || 0}${dashboardContext.unit}` }"
   >
-    <div v-if="$slots.header" :class="ui.header({ class: props.ui?.header })">
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
@@ -131,15 +122,17 @@ function toggleOpen() {
       <slot :collapsed="isCollapsed" :collapse="collapse" />
     </div>
 
-    <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
     </div>
   </div>
 
-  <ReuseHandle v-if="props.side === 'left'" />
+  <ReuseResizeHandleTemplate v-if="side === 'left'" />
 
   <Menu
     v-model:open="open"
+    :title="t('dashboardSidebar.title')"
+    :description="t('dashboardSidebar.description')"
     v-bind="menuProps"
     :ui="{
   overlay: ui.overlay({ class: props.ui?.overlay }),
@@ -148,20 +141,19 @@ function toggleOpen() {
   >
     <template #content>
       <slot name="content">
-        <div
-          v-if="$slots.header || props.mode !== 'drawer'"
-          :class="ui.header({ class: props.ui?.header, menu: true })"
-        >
-          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'left'" />
+        <div v-if="!!slots.header || mode !== 'drawer'" :class="ui.header({ class: props.ui?.header, menu: true })">
+          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
+
           <slot name="header" />
-          <ReuseToggle v-if="props.mode !== 'drawer' && props.toggleSide === 'right'" />
+
+          <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
         </div>
 
         <div :class="ui.body({ class: props.ui?.body, menu: true })">
           <slot />
         </div>
 
-        <div v-if="$slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
+        <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer, menu: true })">
           <slot name="footer" />
         </div>
       </slot>

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

@@ -1,18 +1,31 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, ComponentConfig } from '../types';
-import type { UseResizableProps } from '../composables/useResizable';
 import theme from '#build/ui/dashboard-sidebar';
-export type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
-export type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
-export type DashboardSidebarMenu<T extends DashboardSidebarMode> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardSidebar = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebar'>;
+type DashboardSidebarMode = 'modal' | 'slideover' | 'drawer';
+type DashboardSidebarMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
 export interface DashboardSidebarProps<T extends DashboardSidebarMode = DashboardSidebarMode> extends Pick<UseResizableProps, 'id' | 'side' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable' | 'collapsible' | 'collapsedSize'> {
-    /** @defaultValue 'slideover' */
+    /**
+     * The mode of the sidebar menu.
+     * @defaultValue 'modal'
+     */
     mode?: T;
-    /** Props for the sidebar menu component */
+    /**
+     * The props for the sidebar menu component.
+     */
     menu?: DashboardSidebarMenu<T>;
-    /** Customize the toggle button */
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @defaultValue true
+     */
     toggle?: boolean | Partial<ButtonProps>;
-    /** @defaultValue 'left' */
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
     toggleSide?: 'left' | 'right';
     class?: any;
     ui?: DashboardSidebar['slots'];
@@ -38,35 +51,25 @@ export interface DashboardSidebarSlots {
     'resize-handle'(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardSidebarProps<DashboardSidebarMode> & {
-    open?: boolean;
-    collapsed?: boolean;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
-    "update:collapsed": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps<DashboardSidebarMode> & {
-    open?: boolean;
-    collapsed?: boolean;
-}> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
-}>, {
-    toggle: boolean | Partial<ButtonProps>;
-    collapsible: boolean;
-    mode: DashboardSidebarMode;
-    side: "left" | "right";
-    minSize: number;
-    maxSize: number;
-    defaultSize: number;
-    resizable: boolean;
-    collapsedSize: number;
-    toggleSide: "left" | "right";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardSidebarSlots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const _default: <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<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open" | "onUpdate:collapsed"> & (DashboardSidebarProps<T> & {
+        open?: boolean;
+        collapsed?: boolean;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: DashboardSidebarSlots;
+    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:collapsed", value: boolean) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -0,0 +1,19 @@
+import type { ButtonProps } from '../types';
+export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    side?: 'left' | 'right';
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    class?: any;
+}
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/DashboardSidebarCollapse.vue

@@ -7,40 +7,30 @@ import { ref, computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useLocalePro } from "../composables/useLocalePro";
+import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
 const props = defineProps({
   side: { type: String, required: false, default: "left" },
   color: { type: null, required: false, default: "neutral" },
   variant: { type: null, required: false, default: "ghost" },
   class: { type: null, required: false }
 });
-const rootProps = useForwardProps(
-  reactivePick(props, "color", "variant", "size", "as", "disabled", "ui")
-);
-const { t } = useLocalePro();
+const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
+const { t } = useLocale();
 const appConfig = useAppConfig();
 const { sidebarCollapsed, collapseSidebar } = useDashboard({ sidebarCollapsed: ref(false), collapseSidebar: () => {
 } });
-const ui = computed(
-  () => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarCollapse })
-);
-function toggleCollapse() {
-  collapseSidebar?.(!(sidebarCollapsed?.value ?? false));
-}
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarCollapse || {} }));
 </script>
 
 <template>
   <UButton
     v-bind="rootProps"
-    :aria-label="
-  sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')
-"
-    :icon="
-  sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose
-"
-    :class="ui({ class: props.class })"
-    @click="toggleCollapse"
+    :aria-label="sidebarCollapsed ? t('dashboardSidebarCollapse.expand') : t('dashboardSidebarCollapse.collapse')"
+    :icon="sidebarCollapsed ? appConfig.ui.icons.panelOpen : appConfig.ui.icons.panelClose"
+    :class="ui({ class: props.class, side: props.side })"
+    @click="collapseSidebar?.(!sidebarCollapsed)"
   />
 </template>

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

@@ -1,14 +1,18 @@
 import type { ButtonProps } from '../types';
 export interface DashboardSidebarCollapseProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     side?: 'left' | 'right';
-    /** @defaultValue 'neutral' */
+    /**
+     * @defaultValue 'neutral'
+     */
     color?: ButtonProps['color'];
-    /** @defaultValue 'ghost' */
+    /**
+     * @defaultValue 'ghost'
+     */
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarCollapseProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarCollapseProps> & Readonly<{}>, {
-    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+declare const _default: 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

@@ -0,0 +1,19 @@
+import type { ButtonProps } from '../types';
+export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
+    side?: 'left' | 'right';
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * @defaultValue 'ghost'
+     */
+    variant?: ButtonProps['variant'];
+    class?: any;
+}
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/DashboardSidebarToggle.vue

@@ -3,13 +3,14 @@ import theme from "#build/ui/dashboard-sidebar-toggle";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useLocalePro } from "../composables/useLocalePro";
+import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
 const props = defineProps({
   side: { type: String, required: false, default: "left" },
   color: { type: null, required: false, default: "neutral" },
@@ -17,9 +18,10 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const rootProps = useForwardProps(reactivePick(props, "color", "variant", "size"));
-const { t } = useLocalePro();
+const { t } = useLocale();
 const appConfig = useAppConfig();
-const { sidebarOpen, toggleSidebar } = useDashboard();
+const { sidebarOpen, toggleSidebar } = useDashboard({ sidebarOpen: ref(false), toggleSidebar: () => {
+} });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSidebarToggle || {} }));
 </script>
 

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

@@ -1,7 +1,4 @@
-import type { ButtonProps, ComponentConfig } from '../types';
-import theme from '#build/ui/dashboard-sidebar-toggle';
-import type { AppConfig } from '@nuxt/schema';
-export type DashboardSidebarToggle = ComponentConfig<typeof theme, AppConfig, 'dashboardSidebarToggle'>;
+import type { ButtonProps } from '../types';
 export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {
     side?: 'left' | 'right';
     /**
@@ -14,8 +11,8 @@ export interface DashboardSidebarToggleProps extends /** @vue-ignore */ Pick<But
     variant?: ButtonProps['variant'];
     class?: any;
 }
-declare const _default: import("vue").DefineComponent<DashboardSidebarToggleProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {
-    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+declare const _default: 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

@@ -0,0 +1,25 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/dashboard-toolbar';
+import type { ComponentConfig } from '../types/tv';
+type DashboardToolbar = ComponentConfig<typeof theme, AppConfig, 'dashboardToolbar'>;
+export interface DashboardToolbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: DashboardToolbar['slots'];
+}
+export interface DashboardToolbarSlots {
+    default(props?: {}): any;
+    left(props?: {}): any;
+    right(props?: {}): any;
+}
+declare const _default: __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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,6 +1,6 @@
-import theme from '#build/ui/dashboard-toolbar';
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig } from '../types';
+import theme from '#build/ui/dashboard-toolbar';
+import type { ComponentConfig } from '../types/tv';
 type DashboardToolbar = ComponentConfig<typeof theme, AppConfig, 'dashboardToolbar'>;
 export interface DashboardToolbarProps {
     /**
@@ -16,7 +16,7 @@ export interface DashboardToolbarSlots {
     left(props?: {}): any;
     right(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DashboardToolbarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardToolbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardToolbarSlots>;
+declare const _default: __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>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,84 @@
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
+import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/drawer';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    title?: string;
+    description?: string;
+    /**
+     * Whether to inset the drawer from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
+    /** The content of the drawer. */
+    content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
+    /**
+     * Render an overlay behind the drawer.
+     * @defaultValue true
+     */
+    overlay?: boolean;
+    /**
+     * Render a handle on the drawer.
+     * @defaultValue true
+     */
+    handle?: boolean;
+    /**
+     * Render the drawer in a portal.
+     * @defaultValue true
+     */
+    portal?: boolean | string | HTMLElement;
+    /**
+     * Whether the drawer is nested in another drawer.
+     * @defaultValue false
+     */
+    nested?: boolean;
+    class?: any;
+    ui?: Drawer['slots'];
+}
+export interface DrawerEmits extends DrawerRootEmits {
+}
+export interface DrawerSlots {
+    default(props?: {}): any;
+    content(props?: {}): any;
+    header(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    drag: (percentageDragged: number) => any;
+    "update:open": (open: boolean) => any;
+    release: (open: boolean) => any;
+    "update:activeSnapPoint": (val: string | number) => any;
+    animationEnd: (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDrag?: ((percentageDragged: number) => any) | undefined;
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onRelease?: ((open: boolean) => any) | undefined;
+    "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
+}>, {
+    modal: boolean;
+    portal: boolean | string | HTMLElement;
+    overlay: boolean;
+    direction: import("vaul-vue").DrawerDirection;
+    handle: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DrawerSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,7 +2,8 @@ import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
 import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/drawer';
-import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
 export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
     /**
@@ -53,7 +54,7 @@ export interface DrawerSlots {
     body(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     drag: (percentageDragged: number) => any;
     "update:open": (open: boolean) => any;