@nuxt/ui 3.3.3 → 4.0.0-alpha.1

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";
@@ -35,23 +35,23 @@ const props = defineProps({
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 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) {
@@ -71,9 +71,12 @@ function updateInput(value) {
   if (props.modelModifiers?.number || props.type === "number") {
     value = looseToNumber(value);
   }
-  if (props.modelModifiers?.nullify) {
+  if (props.modelModifiers?.nullable) {
     value ||= null;
   }
+  if (props.modelModifiers?.optional) {
+    value ||= void 0;
+  }
   modelValue.value = value;
   emitFormInput();
 }

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

@@ -2,7 +2,9 @@ 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 { ModelModifiers } from '../types/input';
+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 {
     /**
@@ -36,13 +38,7 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: {
-        string?: boolean;
-        number?: boolean;
-        trim?: boolean;
-        lazy?: boolean;
-        nullify?: boolean;
-    };
+    modelModifiers?: ModelModifiers;
     class?: any;
     ui?: Input['slots'];
 }

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";
@@ -31,9 +31,9 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
-  trailingIcon: { type: String, required: false },
-  selectedIcon: { type: String, required: false },
-  deleteIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
+  deleteIcon: { type: [String, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
@@ -58,13 +58,13 @@ const props = defineProps({
   highlightOnHover: { type: Boolean, required: false },
   openOnClick: { type: Boolean, required: false },
   openOnFocus: { type: Boolean, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "remove-tag", "update:modelValue"]);
 const slots = defineSlots();
@@ -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

@@ -4,15 +4,16 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 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 { AvatarProps, ChipProps, IconProps } from '../types';
+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;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     chip?: ChipProps;
     /**
@@ -57,20 +58,20 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is selected.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    selectedIcon?: string;
+    selectedIcon?: IconProps['name'];
     /**
      * The icon displayed to delete a tag.
      * Works only when `multiple` is `true`.
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    deleteIcon?: string;
+    deleteIcon?: IconProps['name'];
     /**
      * The content of the menu.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
@@ -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;
     }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{

package/dist/runtime/components/InputNumber.vue

@@ -5,9 +5,9 @@ import theme from "#build/ui/input-number";
 <script setup>
 import { onMounted, ref, computed } from "vue";
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from "reka-ui";
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, useVModel } 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";
@@ -22,18 +22,19 @@ const props = defineProps({
   highlight: { type: Boolean, required: false },
   orientation: { type: String, required: false, default: "horizontal" },
   increment: { type: Object, required: false },
-  incrementIcon: { type: String, required: false },
+  incrementIcon: { type: [String, Object], required: false },
   incrementDisabled: { type: Boolean, required: false },
   decrement: { type: Object, required: false },
-  decrementIcon: { type: String, required: false },
+  decrementIcon: { type: [String, Object], required: false },
   decrementDisabled: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
+  modelValue: { type: Number, required: false },
+  defaultValue: { type: Number, required: false },
+  modelModifiers: { type: Object, required: false },
   locale: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
-  modelValue: { type: [Number, null], required: false },
-  defaultValue: { type: Number, required: false },
   min: { type: Number, required: false },
   max: { type: Number, required: false },
   step: { type: Number, required: false },
@@ -49,25 +50,29 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
+const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 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 rootProps = useForwardPropsEmits(reactivePick(props, "as", "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));
 const inputRef = ref(null);
 function onUpdate(value) {
+  if (props.modelModifiers?.optional) {
+    value = value ?? void 0;
+  }
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();
@@ -96,6 +101,7 @@ defineExpose({
   <NumberFieldRoot
     v-bind="rootProps"
     :id="id"
+    :model-value="modelValue"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :name="name"
     :disabled="disabled"

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

@@ -1,8 +1,9 @@
 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 { ButtonProps, IconProps } from '../types';
+import type { ModelModifiers } from '../types/input';
+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'> {
     /**
@@ -32,7 +33,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * @defaultValue appConfig.ui.icons.plus
      * @IconifyIcon
      */
-    incrementIcon?: string;
+    incrementIcon?: IconProps['name'];
     /** Disable the increment button. */
     incrementDisabled?: boolean;
     /**
@@ -45,11 +46,14 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * @defaultValue appConfig.ui.icons.minus
      * @IconifyIcon
      */
-    decrementIcon?: string;
+    decrementIcon?: IconProps['name'];
     /** Disable the decrement button. */
     decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
+    modelValue?: number;
+    defaultValue?: number;
+    modelModifiers?: Pick<ModelModifiers, 'optional'>;
     /**
      * The locale to use for formatting and parsing numbers.
      * @defaultValue UApp.locale.code

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";
@@ -23,7 +23,7 @@ const props = defineProps({
   size: { type: null, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
-  deleteIcon: { type: String, required: false },
+  deleteIcon: { type: [String, Object], required: false },
   highlight: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -41,23 +41,23 @@ const props = defineProps({
   displayValue: { type: Function, required: false },
   name: { type: String, required: false },
   required: { type: Boolean, required: false },
-  icon: { type: String, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
-  trailingIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["change", "blur", "focus", "update:modelValue", "invalid", "addTag", "removeTag"]);
 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,8 @@ 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 { IconProps } from '../types';
+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 {
@@ -34,7 +35,7 @@ export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends P
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    deleteIcon?: string;
+    deleteIcon?: IconProps['name'];
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
     class?: any;

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, {}, {}, {}, {}, 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, {}, {}, {}, {}, 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

@@ -20,7 +20,7 @@ const props = defineProps({
   fullscreen: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: String, required: false },
+  closeIcon: { type: [String, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: null, required: false },

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

@@ -1,8 +1,9 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 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 { ButtonProps, IconProps } from '../types';
+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;
@@ -40,7 +41,7 @@ export interface ModalProps extends DialogRootProps {
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    closeIcon?: string;
+    closeIcon?: IconProps['name'];
     /**
      * When `false`, the modal will not close when clicking outside or pressing escape.
      * @defaultValue true

package/dist/runtime/components/NavigationMenu.vue

@@ -21,8 +21,8 @@ import UTooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
-  trailingIcon: { type: String, required: false },
-  externalIcon: { type: [Boolean, String], required: false, default: true },
+  trailingIcon: { type: [String, Object], required: false },
+  externalIcon: { type: [Boolean, String, Object], required: false, default: true },
   items: { type: null, required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },

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

@@ -1,8 +1,9 @@
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 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 { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types';
+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`. */
@@ -14,7 +15,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
@@ -34,7 +35,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     /**
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The type of the item.
      * The `label` type is only displayed in `vertical` orientation.
@@ -67,14 +68,14 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when the item is an external link.
      * Set to `false` to hide the external icon.
      * @defaultValue appConfig.ui.icons.external
      * @IconifyIcon
      */
-    externalIcon?: boolean | string;
+    externalIcon?: boolean | IconProps['name'];
     items?: T;
     /**
      * @defaultValue 'primary'