@eslamdevui/ui 3.2.0 → 3.2.1

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

@@ -49,8 +49,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPrompt
 }>, {
     as: any;
     autofocus: boolean;
-    autoresize: boolean;
     rows: number;
+    autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -160,11 +160,11 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
 declare const _default: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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:modelValue"?: ((value: T) => any) | undefined;
         readonly onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         readonly onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         readonly onLeave?: ((event: Event) => any) | undefined;
@@ -174,10 +174,10 @@ declare const _default: <G extends CommandPaletteGroup<T>, T extends CommandPale
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: CommandPaletteSlots<G, T>;
-    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '@nuxt/ui';
+import type { ButtonProps } from '../types';
 export interface DashboardSidebarToggleProps extends 
 /** @vue-ignore */
 Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'ui'> {

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

@@ -6,7 +6,7 @@ type Error = ComponentConfig<typeof theme, AppConfig, 'error'>;
 export interface ErrorProps {
     /**
      * The element or component this component should render as.
-     * @defaultValue 'div'
+     * @defaultValue 'main'
      */
     as?: any;
     error?: Partial<NuxtError & {

package/dist/runtime/components/Footer.vue

@@ -0,0 +1,44 @@
+<script>
+import theme from "#build/ui/footer";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "footer" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footer || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.top" :class="ui.top({ class: props.ui?.top })">
+      <slot name="top" />
+    </div>
+
+    <UContainer :class="ui.container({ class: props.ui?.container })">
+      <div :class="ui.right({ class: props.ui?.right })">
+        <slot name="right" />
+      </div>
+
+      <div :class="ui.center({ class: props.ui?.center })">
+        <slot />
+      </div>
+
+      <div :class="ui.left({ class: props.ui?.left })">
+        <slot name="left" />
+      </div>
+    </UContainer>
+
+    <div v-if="!!slots.bottom" :class="ui.bottom({ class: props.ui?.bottom })">
+      <slot name="bottom" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,29 @@
+import theme from '#build/ui/footer';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+type Footer = ComponentConfig<typeof theme, AppConfig, 'footer'>;
+export interface FooterProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'footer'
+     */
+    as?: any;
+    class?: any;
+    ui?: Footer['slots'];
+}
+export interface FooterSlots {
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FooterColumns.vue

@@ -0,0 +1,68 @@
+<script>
+import theme from "#build/ui/footer-columns";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { pickLinkProps } from "../utils/link";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  class: { type: null, required: false },
+  columns: { type: Array, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.left" :class="ui.left({ class: props.ui?.left })">
+      <slot name="left" />
+    </div>
+
+    <div v-if="!!slots.default || columns?.length" :class="ui.center({ class: props.ui?.center })">
+      <slot>
+        <div v-for="(column, index) in columns" :key="index">
+          <h3 :class="ui.label({ class: props.ui?.label })">
+            <slot name="column-label" :column="column">
+              {{ column.label }}
+            </slot>
+          </h3>
+
+          <ul :class="ui.list({ class: props.ui?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+              <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
+                <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+                  <slot name="link" :link="link" :active="active">
+                    <slot name="link-leading" :link="link" :active="active">
+                      <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                    </slot>
+
+                    <span v-if="link.label || !!slots['link-label']" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+                      <slot name="link-label" :link="link" :active="active">
+                        {{ link.label }}
+                      </slot>
+
+                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                    </span>
+
+                    <slot name="link-trailing" :link="link" :active="active" />
+                  </slot>
+                </ULinkBase>
+              </ULink>
+            </li>
+          </ul>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.right" :class="ui.right({ class: props.ui?.right })">
+      <slot name="right" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,52 @@
+import theme from '#build/ui/footer-columns';
+import type { AppConfig } from '@nuxt/schema';
+import type { LinkProps, ComponentConfig } from '../types';
+type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
+export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
+    label: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    class?: any;
+    ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+}
+export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
+    label: string;
+    children?: T[];
+}
+export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLink> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    columns?: FooterColumn<T>[];
+    ui?: FooterColumns['slots'];
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active: boolean;
+}) => any;
+export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
+    'left'(props?: {}): any;
+    'default'(props?: {}): any;
+    'right'(props?: {}): any;
+    'column-label'?: (props: {
+        column: FooterColumn<T>;
+    }) => any;
+    'link': SlotProps<T>;
+    'link-leading': SlotProps<T>;
+    'link-label': SlotProps<T>;
+    'link-trailing': SlotProps<T>;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FooterColumnsProps<FooterColumnLink>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterColumnsProps<FooterColumnLink>> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterColumnsSlots<FooterColumnLink>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Header.vue

@@ -0,0 +1,137 @@
+<script>
+import theme from "#build/ui/header";
+</script>
+
+<script setup>
+import { computed, watch, toRef } from "vue";
+import { Primitive } from "reka-ui";
+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, useRoute } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "header" },
+  title: { type: String, required: false, default: "Nuxt UI Pro" },
+  to: { type: String, required: false, default: "/" },
+  mode: { type: null, required: false, default: "modal" },
+  menu: { type: null, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "right" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const route = useRoute();
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate();
+const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate();
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const ariaLabel = computed(() => {
+  const slotText = slots.title && getSlotChildrenText(slots.title());
+  return (slotText || props.title || "Nuxt UI Pro").trim();
+});
+watch(() => route.fullPath, () => {
+  open.value = false;
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.header || {} })());
+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 } : {}));
+function toggleOpen() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" :open="open" :toggle="toggleOpen">
+      <UButton
+        v-if="toggle"
+        color="neutral"
+        variant="ghost"
+        :aria-label="open ? t('header.close') : t('header.open')"
+        :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+        @click="toggleOpen"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <DefineLeftTemplate>
+    <div :class="ui.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+
+      <slot name="left">
+        <ULink :to="to" :aria-label="ariaLabel" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </ULink>
+      </slot>
+    </div>
+  </DefineLeftTemplate>
+
+  <DefineRightTemplate>
+    <div :class="ui.right({ class: props.ui?.right })">
+      <slot name="right" />
+
+      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+    </div>
+  </DefineRightTemplate>
+
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot name="top" />
+
+    <UContainer :class="ui.container({ class: props.ui?.container })">
+      <ReuseLeftTemplate />
+
+      <div :class="ui.center({ class: props.ui?.center })">
+        <slot />
+      </div>
+
+      <ReuseRightTemplate />
+    </UContainer>
+
+    <slot name="bottom" />
+  </Primitive>
+
+  <Menu
+    v-model:open="open"
+    :title="t('header.title')"
+    :description="t('header.description')"
+    v-bind="menuProps"
+    :ui="{
+  overlay: ui.overlay({ class: props.ui?.overlay }),
+  content: ui.content({ class: props.ui?.content })
+}"
+  >
+    <template #content>
+      <slot name="content">
+        <div v-if="mode !== 'drawer'" :class="ui.header({ class: props.ui?.header })">
+          <ReuseLeftTemplate />
+
+          <ReuseRightTemplate />
+        </div>
+
+        <div :class="ui.body({ class: props.ui?.body })">
+          <slot name="body" />
+        </div>
+      </slot>
+    </template>
+  </Menu>
+</template>

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

@@ -0,0 +1,72 @@
+import theme from '#build/ui/header';
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, ComponentConfig } from '../types';
+type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
+type HeaderMode = 'modal' | 'slideover' | 'drawer';
+type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface HeaderProps<T extends HeaderMode = HeaderMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'header'
+     */
+    as?: any;
+    title?: string;
+    to?: string;
+    /**
+     * The mode of the header menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the header menu component.
+     */
+    menu?: HeaderMenu<T>;
+    /**
+     * Customize the toggle button to open the header menu displayed when the `content` slot is used.
+     * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     */
+    toggle?: boolean | Partial<ButtonProps>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'right'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    ui?: Header['slots'];
+}
+export interface HeaderSlots {
+    title(props?: {}): any;
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+    toggle(props: {
+        open: boolean;
+        toggle: () => void;
+    }): any;
+    top(props?: {}): any;
+    bottom(props?: {}): any;
+    body(props?: {}): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<HeaderProps<HeaderMode> & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<HeaderProps<HeaderMode> & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    toggle: boolean | Partial<ButtonProps>;
+    title: string;
+    to: string;
+    mode: HeaderMode;
+    as: any;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, HeaderSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -179,11 +179,11 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
         readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
         readonly onCreate?: ((item: string) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
         readonly onHighlight?: ((payload: {
             ref: HTMLElement;
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (InputMenuProps<T, VK, M> & {
         searchTerm?: string;
@@ -521,10 +521,10 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
     }>): void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
-    } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Main.vue

@@ -0,0 +1,23 @@
+<script>
+import theme from "#build/ui/main";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "main" },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.main || {} }));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui({ class: props.class })">
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,20 @@
+export interface MainProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'main'
+     */
+    as?: any;
+    class?: any;
+}
+export interface MainSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MainSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Page.vue

@@ -0,0 +1,37 @@
+<script>
+import theme from "#build/ui/page";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, Slot } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.page || {} })({
+  left: !!slots.left,
+  right: !!slots.right
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <Slot v-if="!!slots.left" :class="ui.left({ class: props.ui?.left })">
+      <slot name="left" />
+    </Slot>
+
+    <div :class="ui.center({ class: props.ui?.center })">
+      <slot />
+    </div>
+
+    <Slot v-if="!!slots.right" :class="ui.right({ class: props.ui?.right })">
+      <slot name="right" />
+    </Slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,25 @@
+import theme from '#build/ui/page';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types';
+type Page = ComponentConfig<typeof theme, AppConfig, 'page'>;
+export interface PageProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: Page['slots'];
+}
+export interface PageSlots {
+    left(props?: {}): any;
+    default(props?: {}): any;
+    right(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageAccordion.vue

@@ -0,0 +1,26 @@
+<script>
+import theme from "#build/ui/page-accordion";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { omit, transformUI } from "../utils";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  type: { type: null, required: false, default: "multiple" },
+  class: { type: null, required: false },
+  ui: { type: void 0, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pageAccordion || {} })());
+</script>
+
+<template>
+  <UAccordion :type="type" :unmount-on-hide="false" :class="ui.base({ class: [props.ui?.base, props.class] })" :ui="transformUI(omit(ui, ['base']), props.ui)">
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </UAccordion>
+</template>

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

@@ -0,0 +1,21 @@
+import theme from '#build/ui/page-accordion';
+import type { AppConfig } from '@nuxt/schema';
+import type { AccordionProps, AccordionSlots, AccordionItem, ComponentConfig } from '../types';
+type PageAccordion = ComponentConfig<typeof theme, AppConfig, 'pageAccordion'>;
+export interface PageAccordionProps<T extends AccordionItem = AccordionItem> extends /** @vue-ignore */ Omit<AccordionProps<T>, 'type'> {
+    type?: AccordionProps<T>['type'];
+    class?: any;
+    ui?: PageAccordion['slots'] & AccordionProps['ui'];
+}
+export type PageAccordionSlots<T extends AccordionItem = AccordionItem> = AccordionSlots<T & {
+    slot?: string;
+}>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PageAccordionProps<AccordionItem>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageAccordionProps<AccordionItem>> & Readonly<{}>, {
+    type: "multiple" | "single";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageAccordionSlots<AccordionItem>>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};