@nuxt/ui 3.3.1 → 4.0.0-alpha.0

package/dist/runtime/components/Header.vue

@@ -0,0 +1,141 @@
+<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 { useAppConfig, useRoute } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { getSlotChildrenText } from "../utils";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import ULink from "./Link.vue";
+import UContainer from "./Container.vue";
+import USlideover from "./Slideover.vue";
+import UModal from "./Modal.vue";
+import UDrawer from "./Drawer.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "header" },
+  title: { type: String, required: false, default: "Nuxt UI" },
+  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 } = useLocale();
+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").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" v-bind="$attrs" :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,68 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/header';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+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: <T extends HeaderMode>(__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;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:open"> & (HeaderProps<T> & {
+        open?: boolean;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: HeaderSlots;
+    emit: (evt: "update:open", 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/Input.vue

@@ -7,7 +7,7 @@ import { ref, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
@@ -49,9 +49,9 @@ const slots = defineSlots();
 const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} })({
   type: props.type,
   color: color.value,
@@ -61,7 +61,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} }
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 const inputRef = ref(null);
 function updateInput(value) {

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

@@ -2,7 +2,8 @@ import type { InputHTMLAttributes } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AcceptableValue, ComponentConfig } from '../types/utils';
+import type { AcceptableValue } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
 export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
     /**

package/dist/runtime/components/InputMenu.vue

@@ -9,7 +9,7 @@ import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
@@ -77,9 +77,9 @@ const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu || {} })({
   color: color.value,
@@ -90,7 +90,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu ||
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   multiple: props.multiple,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 function displayValue(value) {
   return getDisplayValue(items.value, value, {

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

@@ -5,7 +5,8 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps } from '../types';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>;
 interface _InputMenuItem {
     label?: string;
@@ -188,7 +189,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
         } | undefined) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         readonly "onRemove-tag"?: ((item: GetModelValue<T, VK, M>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onCreate" | "onHighlight" | "onUpdate:searchTerm" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
         searchTerm?: string;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{

package/dist/runtime/components/InputNumber.vue

@@ -7,7 +7,7 @@ import { onMounted, ref, computed } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
@@ -53,16 +53,16 @@ const { t, code: codeLocale } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const locale = computed(() => props.locale || codeLocale.value);
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputNumber || {} })({
   color: color.value,
   variant: props.variant,
   size: inputSize.value,
   highlight: highlight.value,
   orientation: props.orientation,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp));
 const decrementIcon = computed(() => props.decrementIcon || (props.orientation === "horizontal" ? appConfig.ui.icons.minus : appConfig.ui.icons.chevronDown));

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

@@ -2,7 +2,7 @@ import type { NumberFieldRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-number';
 import type { ButtonProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
 export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
     /**

package/dist/runtime/components/InputTags.vue

@@ -7,7 +7,7 @@ import { computed, ref, onMounted, toRaw } from "vue";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
@@ -55,9 +55,9 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags || {} })({
   color: color.value,
   variant: props.variant,
@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputTags ||
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 const inputRef = ref(null);
 onMounted(() => {

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

@@ -2,7 +2,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui';
 import theme from '#build/ui/input-tags';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>;
 export type InputTagItem = AcceptableInputValue;
 export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/kbd';
 import type { KbdKey } from '../composables/useKbd';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Kbd = ComponentConfig<typeof theme, AppConfig, 'kbd'>;
 export interface KbdProps {
     /**

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, void, {}, {}, {}, 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/Marquee.vue

@@ -0,0 +1,40 @@
+<script>
+import theme from "#build/ui/marquee";
+</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 },
+  pauseOnHover: { type: Boolean, required: false },
+  reverse: { type: Boolean, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  repeat: { type: Number, required: false, default: 4 },
+  overlay: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.marquee || {} })({
+  pauseOnHover: props.pauseOnHover,
+  orientation: props.orientation,
+  reverse: props.reverse,
+  overlay: props.overlay
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-for="i in repeat" :key="i" :class="ui.content({ class: [props.ui?.content] })">
+      <slot />
+    </div>
+  </Primitive>
+</template>
+
+<style>
+@keyframes marquee{0%{transform:translateZ(0);will-change:transform}to{transform:translate3d(calc(-100% - var(--gap)),0,0);will-change:transform}}@keyframes marquee-rtl{0%{transform:translate3d(100%,0,0);will-change:transform}to{transform:translate3d(calc(-100%*var(--repeat) - var(--gap)*var(--repeat)),0,0);will-change:transform}}@keyframes marquee-vertical{0%{transform:translateZ(0);will-change:transform}to{transform:translate3d(0,calc(-100% - var(--gap)),0);will-change:transform}}@keyframes marquee-vertical-rtl{0%{transform:translate3d(0,100%,0);will-change:transform}to{transform:translate3d(0,calc(-100%*var(--repeat) - var(--gap)*var(--repeat)),0);will-change:transform}}
+</style>

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

@@ -0,0 +1,32 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/marquee';
+import type { ComponentConfig } from '../types/tv';
+type Marquee = ComponentConfig<typeof theme, AppConfig, 'marquee'>;
+export interface MarqueeProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    pauseOnHover?: boolean;
+    reverse?: boolean;
+    orientation?: Marquee['variants']['orientation'];
+    repeat?: number;
+    overlay?: boolean;
+    class?: any;
+    ui?: Marquee['slots'];
+}
+export interface MarqueeSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
+    repeat: number;
+    orientation: Marquee["variants"]["orientation"];
+    overlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,7 +2,8 @@ import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogConten
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/modal';
 import type { ButtonProps } from '../types';
-import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>;
 export interface ModalProps extends DialogRootProps {
     title?: string;

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

@@ -2,7 +2,8 @@ import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuCo
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
 import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types';
-import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
 export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'ui'> {
     /** Description is only used when `orientation` is `horizontal`. */

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 type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/page';
+import type { ComponentConfig } from '../types/tv';
+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, void, {}, {}, {}, 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;
+    };
+};