@byyuurin/ui 0.1.0 → 0.3.0

package/dist/runtime/components/InputTags.vue

@@ -0,0 +1,156 @@
+<script>
+import theme from "#build/ui/input-tags";
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, shallowRef, toRaw, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFormField } from "../composables/useFormField";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  maxLength: { type: Number, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  deleteIcon: { type: [String, Object], required: false },
+  highlight: { type: Boolean, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  modelValue: { type: [Array, null], required: false },
+  defaultValue: { type: Array, required: false },
+  addOnPaste: { type: Boolean, required: false },
+  addOnTab: { type: Boolean, required: false },
+  addOnBlur: { type: Boolean, required: false },
+  duplicate: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  delimiter: { type: null, required: false },
+  max: { type: Number, required: false },
+  id: { type: String, required: false },
+  convertValue: { type: Function, required: false },
+  displayValue: { type: Function, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false }
+});
+const emit = defineEmits(["change", "blur", "focus", "update:modelValue", "invalid", "addTag", "removeTag"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emit);
+const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormInput, emitFormChange, emitFormFocus } = useFormField(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.inputTags));
+  return styler({
+    ...props,
+    type: void 0,
+    color: color.value,
+    size: fieldGroupSize.value || formFieldSize.value,
+    highlight: highlight.value,
+    leading: isLeading.value || !!props.avatar || !!slots.leading,
+    trailing: isTrailing.value || !!slots.trailing,
+    fieldGroup: orientation.value
+  });
+});
+const inputRef = shallowRef(null);
+function onUpdate(value) {
+  if (toRaw(props.modelValue) === value)
+    return;
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function onBlur(event) {
+  emit("blur", event);
+  emitFormBlur();
+}
+function onFocus(event) {
+  emit("focus", event);
+  emitFormFocus();
+}
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus();
+}
+onMounted(() => {
+  setTimeout(() => autoFocus(), props.autofocusDelay);
+});
+defineExpose({
+  inputRef: toRef(() => inputRef.value?.$el)
+});
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="{ modelValue: tags }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="{ ...rootProps, id, name, disabled }"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
+        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
+      </TagsInputItemText>
+
+      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
+        <slot name="item-delete" :item="item" :index="index" :ui="ui">
+          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
+      :class="ui.input({ class: props.ui?.input })"
+      data-part="input"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" data-part="leadingIcon" />
+        <Avatar v-else-if="props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" data-part="leadingAvatar" />
+      </slot>
+    </span>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+      </slot>
+    </span>
+  </TagsInputRoot>
+</template>

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

@@ -0,0 +1,90 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { AcceptableInputValue, TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+import theme from '#build/ui/input-tags';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export type InputTagsItem = AcceptableInputValue;
+export interface InputTagsProps<T extends InputTagsItem = InputTagsItem> extends ComponentBaseProps, Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'max' | 'required' | 'name' | 'placeholder'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: TagsInputRootProps<T>['as'];
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /** The maximum number of character allowed. */
+    maxLength?: number;
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon displayed to delete a tag.
+     * @default app.icons.close
+     */
+    deleteIcon?: IconProps['name'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface InputTagsEmits<T extends InputTagsItem> extends TagsInputRootEmits<T> {
+    change: [event: Event];
+    blur: [event: FocusEvent];
+    focus: [event: FocusEvent];
+}
+export interface InputTagsSlots<T extends InputTagsItem = InputTagsItem> {
+    'leading': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'default': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'trailing': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-text': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-delete': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputTagsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<InputTagsProps<AcceptableInputValue> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onInvalid?: ((payload: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
+        onAddTag?: ((payload: T) => any) | undefined;
+        onRemoveTag?: ((payload: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
+    }>) => void;
+    attrs: any;
+    slots: InputTagsSlots<T>;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Kbd.vue

@@ -26,7 +26,7 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
-    <slot>{{ getKbdKey(props.value) }}</slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
+    <slot>{{ getKbdKey(props.value) }}</slot>
+  </Primitive>
 </template>

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

@@ -22,11 +22,11 @@ export interface KbdProps extends ComponentBaseProps {
 export interface KbdSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, KbdSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Link.vue

@@ -29,13 +29,14 @@ const props = defineProps({
   to: { type: null, required: false },
   href: { type: null, required: false },
   external: { type: Boolean, required: false },
-  target: { type: [String, Object], required: false },
-  rel: { type: [String, Object], required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
   noRel: { type: Boolean, required: false },
   prefetchedClass: { type: String, required: false },
   prefetch: { type: Boolean, required: false },
   prefetchOn: { type: [String, Object], required: false },
   noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
   activeClass: { type: String, required: false },
   exactActiveClass: { type: String, required: false },
   ariaCurrentValue: { type: String, required: false, default: "page" },
@@ -87,14 +88,14 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink
-    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
-    v-bind="nuxtLinkProps"
-    :to="to"
-    custom
-  >
-    <template v-if="custom">
-      <slot
+  <NuxtLink
+    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
+    v-bind="nuxtLinkProps"
+    :to="to"
+    custom
+  >
+    <template v-if="custom">
+      <slot
         v-bind="{
   ...$attrs,
   ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -105,13 +106,13 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   target,
   isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
-      >
-        {{ props.label }}
-      </slot>
-    </template>
-    <LinkBase
-      v-else
+}"
+      >
+        {{ props.label }}
+      </slot>
+    </template>
+    <LinkBase
+      v-else
       v-bind="{
   ...$attrs,
   ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -121,12 +122,12 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   rel,
   target,
   isExternal
-}"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-    >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
-        {{ props.label }}
-      </slot>
-    </LinkBase>
-  </NuxtLink>
+}"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
+        {{ props.label }}
+      </slot>
+    </LinkBase>
+  </NuxtLink>
 </template>

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

@@ -1,7 +1,7 @@
 import type { PrimitiveProps } from 'reka-ui';
-import type { ButtonHTMLAttributes } from 'vue';
 import type { RouteLocationRaw, RouterLinkProps } from 'vue-router';
 import type { ComponentBaseProps } from '../types';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
     /**
@@ -19,11 +19,11 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
     /**
      * Where to display the linked URL, as the name for a browsing context.
      */
-    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {});
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
     /**
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
-    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {});
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
     /**
      * If set to true, no rel attribute will be added to the link
      */
@@ -47,8 +47,13 @@ interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
      * Escape hatch to disable `prefetch` attribute.
      */
     noPrefetch?: boolean;
+    /**
+     * An option to either add or remove trailing slashes in the `href` for this specific link.
+     * Overrides the global `trailingSlash` option if provided.
+     */
+    trailingSlash?: 'append' | 'remove';
 }
-export interface LinkProps extends ComponentBaseProps, NuxtLinkProps {
+export interface LinkProps extends ComponentBaseProps, Omit<NuxtLinkProps, 'custom'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.
      * @default "button"
@@ -75,19 +80,24 @@ export interface LinkProps extends ComponentBaseProps, NuxtLinkProps {
     /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
     raw?: boolean;
 }
+/**
+ * Link-related props that can be omitted from ButtonProps when link functionality is not needed.
+ * Use this with `Omit<ButtonProps, LinkPropsKeys>` in components where buttons should not act as links.
+ */
+export type LinkPropsKeys = 'to' | 'href' | 'target' | 'rel' | 'noRel' | 'external' | 'prefetch' | 'prefetchOn' | 'prefetchedClass' | 'noPrefetch' | 'trailingSlash' | 'replace' | 'ariaCurrentValue' | 'active' | 'activeClass' | 'exact' | 'exactQuery' | 'exactHash' | 'inactiveClass' | 'download' | 'ping' | 'referrerpolicy' | 'hreflang' | 'media';
 export interface LinkSlots {
     default: StaticSlot<{
         active: boolean;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
     active: boolean;
     type: "reset" | "submit" | "button";
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/LinkBase.vue

@@ -42,7 +42,7 @@ function onClickWrapper(e) {
 </script>
 
 <template>
-  <Primitive v-bind="linkProps" @click="onClickWrapper">
-    <slot></slot>
-  </Primitive>
+  <Primitive v-bind="linkProps" @click="onClickWrapper">
+    <slot></slot>
+  </Primitive>
 </template>

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

@@ -18,14 +18,14 @@ export interface LinkBaseProps {
     active?: boolean;
     isExternal?: boolean;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkBaseProps> & Readonly<{}>, {
     type: string;
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Marquee.vue

@@ -0,0 +1,38 @@
+<script>
+import theme from "#build/ui/marquee";
+</script>
+
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { cv, merge } from "../utils/style";
+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 },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.marquee));
+  return styler(props);
+});
+</script>
+
+<template>
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot></slot>
+    </div>
+  </Primitive>
+</template>
+
+<style>
+@keyframes marquee{0%{transform:translateZ(0)}to{transform:translate3d(calc(-100% - var(--gap)),0,0)}}@keyframes marquee-rtl{0%{transform:translateZ(0)}to{transform:translate3d(calc(100% + var(--gap)),0,0)}}@keyframes marquee-vertical{0%{transform:translateZ(0)}to{transform:translate3d(0,calc(-100% - var(--gap)),0)}}@keyframes marquee-vertical-rtl{0%{transform:translate3d(0,calc(-100% - var(--gap)),0)}to{transform:translate3d(0,calc(-100%*var(--gap)),0)}}
+</style>

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

@@ -0,0 +1,54 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/marquee';
+import type { ComponentBaseProps, ComponentStyler } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface MarqueeProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /**
+     * Pause the marquee on hover.
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Reverse the direction of the marquee.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The orientation of the marquee.
+     * @default "horizontal"
+     */
+    orientation?: ThemeVariants['orientation'];
+    /**
+     * The number of times the marquee should repeat.
+     * @default 4
+     */
+    repeat?: number;
+    /**
+     * Display an overlay on the marquee.
+     * @default true
+     */
+    overlay?: boolean;
+    ui?: ComponentStyler<typeof theme>;
+}
+export interface MarqueeSlots {
+    default: StaticSlot;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
+    repeat: number;
+    orientation: "horizontal" | "vertical";
+    overlay: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};