rimelight-components 2.1.17 → 2.1.19

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.1.17";
+const version = "2.1.19";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

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

@@ -1,12 +1,21 @@
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
-type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_7) => any;
-} & {
-    center?: (props: typeof __VLS_9) => any;
-} & {
-    right?: (props: typeof __VLS_11) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface FooterProps {
+    rc?: {
+        root?: string;
+        container?: string;
+        left?: string;
+        center?: string;
+        right?: string;
+    };
+}
+export interface FooterEmits {
+}
+export interface FooterSlots {
+    left: (props: {}) => any;
+    center: (props: {}) => any;
+    right: (props: {}) => any;
+}
+type __VLS_Slots = FooterSlots;
+declare const __VLS_base: import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/Footer.vue

@@ -1,23 +1,36 @@
-<script setup lang="ts"></script>
+<script setup>
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { rc: rcProp } = defineProps({
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Footer", rcProp);
+const footerStyles = tv({
+  slots: {
+    root: "py-8 lg:py-12",
+    container: "flex flex-col justify-between gap-xl lg:flex-row",
+    left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:items-start",
+    center: "flex flex-col items-start lg:order-2",
+    right: "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-1 lg:items-end"
+  }
+});
+const { root, container, left, center, right } = footerStyles();
+</script>
 
 <template>
-  <footer class="py-8 lg:py-12">
-    <UContainer class="flex flex-col justify-between gap-xl lg:flex-row">
-      <div
-        class="order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:items-start"
-      >
+  <footer :class="root({ class: rc.root })">
+    <UContainer :class="container({ class: rc.container })">
+      <div :class="left({ class: rc.left })">
         <slot name="left" />
       </div>
-      <div class="flex flex-col items-start lg:order-2">
+      <div :class="center({ class: rc.center })">
         <slot name="center" />
       </div>
-      <div
-        class="order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-1 lg:items-end"
-      >
+      <div :class="right({ class: rc.right })">
         <slot name="right" />
       </div>
     </UContainer>
   </footer>
 </template>
-
-<style scoped></style>

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

@@ -1,12 +1,21 @@
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
-type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_7) => any;
-} & {
-    center?: (props: typeof __VLS_9) => any;
-} & {
-    right?: (props: typeof __VLS_11) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface FooterProps {
+    rc?: {
+        root?: string;
+        container?: string;
+        left?: string;
+        center?: string;
+        right?: string;
+    };
+}
+export interface FooterEmits {
+}
+export interface FooterSlots {
+    left: (props: {}) => any;
+    center: (props: {}) => any;
+    right: (props: {}) => any;
+}
+type __VLS_Slots = FooterSlots;
+declare const __VLS_base: import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,18 +1,27 @@
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_7) => any;
-} & {
-    center?: (props: typeof __VLS_9) => any;
-} & {
-    right?: (props: typeof __VLS_11) => any;
-} & {
-    'collapsed-left'?: (props: typeof __VLS_13) => any;
-} & {
-    'collapsed-center'?: (props: typeof __VLS_15) => any;
-} & {
-    'collapsed-right'?: (props: typeof __VLS_17) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface HeaderProps {
+    rc?: {
+        root?: string;
+        container?: string;
+        left?: string;
+        center?: string;
+        right?: string;
+        collapsedLeft?: string;
+        collapsedCenter?: string;
+        collapsedRight?: string;
+    };
+}
+export interface HeaderEmits {
+}
+export interface HeaderSlots {
+    left: (props: {}) => any;
+    center: (props: {}) => any;
+    right: (props: {}) => any;
+    "collapsed-left": (props: {}) => any;
+    "collapsed-center": (props: {}) => any;
+    "collapsed-right": (props: {}) => any;
+}
+type __VLS_Slots = HeaderSlots;
+declare const __VLS_base: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/Header.vue

@@ -1,6 +1,13 @@
 <script setup>
-import { tv } from "tailwind-variants";
-const header = tv({
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { rc: rcProp } = defineProps({
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Header", rcProp);
+const headerStyles = tv({
   slots: {
     root: "h-(--ui-header-height)",
     container: "h-full flex flex-row items-center p-sm",
@@ -21,18 +28,18 @@ const {
   collapsedLeft,
   collapsedCenter,
   collapsedRight
-} = header();
+} = headerStyles();
 </script>
 
 <template>
-  <header :class="root()">
-    <UContainer :class="container()">
-      <div :class="left()"><slot name="left" /></div>
-      <div :class="center()"><slot name="center" /></div>
-      <div :class="right()"><slot name="right" /></div>
-      <div :class="collapsedLeft()"><slot name="collapsed-left" /></div>
-      <div :class="collapsedCenter()"><slot name="collapsed-center" /></div>
-      <div :class="collapsedRight()"><slot name="collapsed-right" /></div>
+  <header :class="root({ class: rc.root })">
+    <UContainer :class="container({ class: rc.container })">
+      <div :class="left({ class: rc.left })"><slot name="left" /></div>
+      <div :class="center({ class: rc.center })"><slot name="center" /></div>
+      <div :class="right({ class: rc.right })"><slot name="right" /></div>
+      <div :class="collapsedLeft({ class: rc.collapsedLeft })"><slot name="collapsed-left" /></div>
+      <div :class="collapsedCenter({ class: rc.collapsedCenter })"><slot name="collapsed-center" /></div>
+      <div :class="collapsedRight({ class: rc.collapsedRight })"><slot name="collapsed-right" /></div>
     </UContainer>
   </header>
 </template>

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

@@ -1,18 +1,27 @@
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
-type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_7) => any;
-} & {
-    center?: (props: typeof __VLS_9) => any;
-} & {
-    right?: (props: typeof __VLS_11) => any;
-} & {
-    'collapsed-left'?: (props: typeof __VLS_13) => any;
-} & {
-    'collapsed-center'?: (props: typeof __VLS_15) => any;
-} & {
-    'collapsed-right'?: (props: typeof __VLS_17) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface HeaderProps {
+    rc?: {
+        root?: string;
+        container?: string;
+        left?: string;
+        center?: string;
+        right?: string;
+        collapsedLeft?: string;
+        collapsedCenter?: string;
+        collapsedRight?: string;
+    };
+}
+export interface HeaderEmits {
+}
+export interface HeaderSlots {
+    left: (props: {}) => any;
+    center: (props: {}) => any;
+    right: (props: {}) => any;
+    "collapsed-left": (props: {}) => any;
+    "collapsed-center": (props: {}) => any;
+    "collapsed-right": (props: {}) => any;
+}
+type __VLS_Slots = HeaderSlots;
+declare const __VLS_base: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/HeaderLayer.d.vue.ts

@@ -1,13 +1,19 @@
-type __VLS_Props = {
+export interface HeaderLayerProps {
     id: string;
     order?: number;
     hideOnScroll?: boolean;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+        content?: string;
+    };
+}
+export interface HeaderLayerEmits {
+}
+export interface HeaderLayerSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = HeaderLayerSlots;
+declare const __VLS_base: import("vue").DefineComponent<HeaderLayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderLayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/HeaderLayer.vue

@@ -1,21 +1,33 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
-import { useHeaderStack } from "../../composables";
+import { useHeaderStack, useRC } from "../../composables";
 import { useWindowScroll } from "@vueuse/core";
-const props = defineProps({
+import { tv } from "../../utils/tv";
+const { id, order, hideOnScroll = false, rc: rcProp } = defineProps({
   id: { type: String, required: true },
   order: { type: Number, required: false },
-  hideOnScroll: { type: Boolean, required: false }
+  hideOnScroll: { type: Boolean, required: false },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("HeaderLayer", rcProp);
+const headerLayerStyles = tv({
+  slots: {
+    root: "fixed left-0 right-0 z-50 overflow-hidden transition-[top,height,opacity] duration-200 ease-in-out",
+    content: "w-full"
+  }
+});
+const { root, content } = headerLayerStyles();
 const { registerHeader, unregisterHeader, getOffsetFor } = useHeaderStack();
 const { y: scrollY } = useWindowScroll();
 const contentRef = ref(null);
 const isVisible = ref(true);
 const lastScrollY = ref(0);
 const naturalHeight = ref(0);
-const topOffset = computed(() => getOffsetFor(props.id));
+const topOffset = computed(() => getOffsetFor(id));
 watch(scrollY, (current) => {
-  if (!props.hideOnScroll) return;
+  if (!hideOnScroll) return;
   const diff = current - lastScrollY.value;
   if (Math.abs(diff) < 10) return;
   if (current <= 50) {
@@ -25,7 +37,7 @@ watch(scrollY, (current) => {
 });
 const updateStack = () => {
   const heightToRegister = isVisible.value ? naturalHeight.value : 0;
-  registerHeader(props.id, heightToRegister, props.order);
+  registerHeader(id, heightToRegister, order);
 };
 watch(isVisible, updateStack);
 let observer = null;
@@ -49,14 +61,14 @@ onMounted(() => {
   });
 });
 onUnmounted(() => {
-  unregisterHeader(props.id);
+  unregisterHeader(id);
   observer?.disconnect();
 });
 </script>
 
 <template>
   <div
-    class="fixed left-0 right-0 z-50 overflow-hidden transition-[top,height,opacity] duration-200 ease-in-out"
+    :class="root({ class: rc.root })"
     :style="{
   top: `${topOffset}px`,
   height: isVisible ? `${naturalHeight}px` : '0px',
@@ -64,7 +76,7 @@ onUnmounted(() => {
   pointerEvents: isVisible ? 'auto' : 'none'
 }"
   >
-    <div ref="contentRef" class="w-full">
+    <div ref="contentRef" :class="content({ class: rc.content })">
       <slot />
     </div>
   </div>

package/dist/runtime/components/app/HeaderLayer.vue.d.ts

@@ -1,13 +1,19 @@
-type __VLS_Props = {
+export interface HeaderLayerProps {
     id: string;
     order?: number;
     hideOnScroll?: boolean;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+        content?: string;
+    };
+}
+export interface HeaderLayerEmits {
+}
+export interface HeaderLayerSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = HeaderLayerSlots;
+declare const __VLS_base: import("vue").DefineComponent<HeaderLayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderLayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/Image.d.vue.ts

@@ -1,11 +1,25 @@
-export interface ImageWrapperProps {
+export interface ImageProps {
     src: string;
     alt?: string;
     height?: string | number;
     width?: string | number;
-    loading?: 'lazy' | 'eager';
-    fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside';
+    loading?: "lazy" | "eager";
+    fit?: "cover" | "contain" | "fill" | "inside" | "outside";
+    rc?: {
+        base?: string;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<ImageWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface ImageEmits {
+}
+export interface ImageSlots {
+}
+type __VLS_Slots = ImageSlots;
+declare const __VLS_base: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/app/Image.vue

@@ -1,18 +1,45 @@
 <script setup>
 import { ref, reactive, onMounted, useTemplateRef, watch, nextTick } from "vue";
-import { tv } from "tailwind-variants";
-import { useImage } from "#imports";
-const { src, alt = "Image", height, width, loading = "lazy", fit = "cover" } = defineProps({
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const {
+  src,
+  alt = "Image",
+  height,
+  width,
+  loading = "lazy",
+  fit = "cover",
+  rc: rcProp
+} = defineProps({
   src: { type: String, required: true },
   alt: { type: String, required: false },
   height: { type: [String, Number], required: false },
   width: { type: [String, Number], required: false },
   loading: { type: String, required: false },
-  fit: { type: String, required: false }
+  fit: { type: String, required: false },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Image", rcProp);
+const imageStyles = tv({
+  slots: {
+    base: "cursor-pointer transition-transform duration-300"
+  },
+  variants: {
+    isExpanded: {
+      true: {
+        base: "w-full h-full object-contain mx-auto block rounded-lg"
+      },
+      false: {
+        base: "w-full h-full object-cover hover:scale-[1.02] active:scale-95"
+      }
+    }
+  }
+});
+const { base } = imageStyles();
 const img = useImage();
 const isOpen = ref(false);
-const imgRef = ref(null);
 const imgElement = useTemplateRef("imgRef");
 const metadata = reactive({
   width: 0,
@@ -21,15 +48,6 @@ const metadata = reactive({
   format: "",
   mimeType: ""
 });
-const imageStyles = tv({
-  base: "cursor-pointer transition-transform duration-300",
-  variants: {
-    isExpanded: {
-      true: "w-full h-full object-contain mx-auto block rounded-lg",
-      false: "w-full h-full object-cover hover:scale-[1.02] active:scale-95"
-    }
-  }
-});
 function formatBytes(bytes) {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;
@@ -123,7 +141,7 @@ watch(() => imgElement.value, (newVal) => {
         :height="height"
         :width="width"
         :loading="loading"
-        :class="imageStyles({ isExpanded: false })"
+        :class="base({ isExpanded: false, class: rc.base })"
         @click="isOpen = true"
         @load="handleImageLoad"
       />
@@ -136,7 +154,7 @@ watch(() => imgElement.value, (newVal) => {
           <NuxtImg
             :src="src"
             :alt="alt"
-            :class="imageStyles({ isExpanded: true })"
+            :class="base({ isExpanded: true, class: rc.base })"
           />
         </div>
 

package/dist/runtime/components/app/Image.vue.d.ts

@@ -1,11 +1,25 @@
-export interface ImageWrapperProps {
+export interface ImageProps {
     src: string;
     alt?: string;
     height?: string | number;
     width?: string | number;
-    loading?: 'lazy' | 'eager';
-    fit?: 'cover' | 'contain' | 'fill' | 'inside' | 'outside';
+    loading?: "lazy" | "eager";
+    fit?: "cover" | "contain" | "fill" | "inside" | "outside";
+    rc?: {
+        base?: string;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<ImageWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface ImageEmits {
+}
+export interface ImageSlots {
+}
+type __VLS_Slots = ImageSlots;
+declare const __VLS_base: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/app/Logo.d.vue.ts

@@ -1,6 +1,20 @@
-type __VLS_Props = {
+export interface LogoProps {
     variant?: "mark" | "type";
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface LogoEmits {
+}
+export interface LogoSlots {
+}
+type __VLS_Slots = LogoSlots;
+declare const __VLS_base: import("vue").DefineComponent<LogoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LogoProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/app/Logo.vue

@@ -1,10 +1,22 @@
 <script setup>
 import { useAppConfig } from "nuxt/app";
 import { computed } from "#imports";
-const appConfig = useAppConfig();
-const { variant = "mark" } = defineProps({
-  variant: { type: String, required: false }
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { variant = "mark", rc: rcProp } = defineProps({
+  variant: { type: String, required: false },
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Logo", rcProp);
+const logoStyles = tv({
+  slots: {
+    root: ""
+  }
 });
+const { root } = logoStyles();
+const appConfig = useAppConfig();
 const logoSrc = computed(() => {
   switch (variant) {
     case "type":
@@ -17,7 +29,7 @@ const logoSrc = computed(() => {
 </script>
 
 <template>
-  <NuxtLink to="/">
+  <NuxtLink to="/" :class="root({ class: rc.root })">
     <UIcon :name="logoSrc" v-bind="$attrs" />
   </NuxtLink>
 </template>

package/dist/runtime/components/app/Logo.vue.d.ts

@@ -1,6 +1,20 @@
-type __VLS_Props = {
+export interface LogoProps {
     variant?: "mark" | "type";
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface LogoEmits {
+}
+export interface LogoSlots {
+}
+type __VLS_Slots = LogoSlots;
+declare const __VLS_base: import("vue").DefineComponent<LogoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LogoProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};