rimelight-components 2.1.17 → 2.1.18

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "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.18";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

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

@@ -1,3 +1,7 @@
+export interface FooterProps {
+}
+export interface FooterEmits {
+}
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
     left?: (props: typeof __VLS_7) => any;
@@ -6,7 +10,7 @@ type __VLS_Slots = {} & {
 } & {
     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>;
+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,31 @@
-<script setup lang="ts"></script>
+<script setup>
+import { tv } from "tailwind-variants";
+const {} = defineProps({});
+const emit = defineEmits([]);
+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()">
+    <UContainer :class="container()">
+      <div :class="left()">
         <slot name="left" />
       </div>
-      <div class="flex flex-col items-start lg:order-2">
+      <div :class="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()">
         <slot name="right" />
       </div>
     </UContainer>
   </footer>
 </template>
-
-<style scoped></style>

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

@@ -1,3 +1,7 @@
+export interface FooterProps {
+}
+export interface FooterEmits {
+}
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
     left?: (props: typeof __VLS_7) => any;
@@ -6,7 +10,7 @@ type __VLS_Slots = {} & {
 } & {
     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>;
+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,3 +1,7 @@
+export interface HeaderProps {
+}
+export interface HeaderEmits {
+}
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
     left?: (props: typeof __VLS_7) => any;
@@ -12,7 +16,7 @@ type __VLS_Slots = {} & {
 } & {
     '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>;
+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,8 @@
 <script setup>
 import { tv } from "tailwind-variants";
-const header = tv({
+const {} = defineProps({});
+const emit = defineEmits([]);
+const headerStyles = tv({
   slots: {
     root: "h-(--ui-header-height)",
     container: "h-full flex flex-row items-center p-sm",
@@ -21,7 +23,7 @@ const {
   collapsedLeft,
   collapsedCenter,
   collapsedRight
-} = header();
+} = headerStyles();
 </script>
 
 <template>

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

@@ -1,3 +1,7 @@
+export interface HeaderProps {
+}
+export interface HeaderEmits {
+}
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
     left?: (props: typeof __VLS_7) => any;
@@ -12,7 +16,7 @@ type __VLS_Slots = {} & {
 } & {
     '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>;
+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,15 @@
-type __VLS_Props = {
+export interface HeaderLayerProps {
     id: string;
     order?: number;
     hideOnScroll?: boolean;
-};
+}
+export interface HeaderLayerEmits {
+}
 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>;
+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

@@ -2,11 +2,20 @@
 import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
 import { useHeaderStack } from "../../composables";
 import { useWindowScroll } from "@vueuse/core";
+import { tv } from "tailwind-variants";
 const props = defineProps({
   id: { type: String, required: true },
   order: { type: Number, required: false },
   hideOnScroll: { type: Boolean, required: false }
 });
+const emit = defineEmits([]);
+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);
@@ -56,7 +65,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="fixed left-0 right-0 z-50 overflow-hidden transition-[top,height,opacity] duration-200 ease-in-out"
+    :class="root()"
     :style="{
   top: `${topOffset}px`,
   height: isVisible ? `${naturalHeight}px` : '0px',
@@ -64,7 +73,7 @@ onUnmounted(() => {
   pointerEvents: isVisible ? 'auto' : 'none'
 }"
   >
-    <div ref="contentRef" class="w-full">
+    <div ref="contentRef" :class="content()">
       <slot />
     </div>
   </div>

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

@@ -1,13 +1,15 @@
-type __VLS_Props = {
+export interface HeaderLayerProps {
     id: string;
     order?: number;
     hideOnScroll?: boolean;
-};
+}
+export interface HeaderLayerEmits {
+}
 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>;
+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,13 @@
-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";
 }
-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 {
+}
+declare const __VLS_export: 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 _default: typeof __VLS_export;
 export default _default;

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

@@ -2,7 +2,14 @@
 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({
+const {
+  src,
+  alt = "Image",
+  height,
+  width,
+  loading = "lazy",
+  fit = "cover"
+} = defineProps({
   src: { type: String, required: true },
   alt: { type: String, required: false },
   height: { type: [String, Number], required: false },
@@ -10,6 +17,23 @@ const { src, alt = "Image", height, width, loading = "lazy", fit = "cover" } = d
   loading: { type: String, required: false },
   fit: { type: String, required: false }
 });
+const emit = defineEmits([]);
+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);
@@ -21,15 +45,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 +138,7 @@ watch(() => imgElement.value, (newVal) => {
         :height="height"
         :width="width"
         :loading="loading"
-        :class="imageStyles({ isExpanded: false })"
+        :class="base({ isExpanded: false })"
         @click="isOpen = true"
         @load="handleImageLoad"
       />
@@ -136,7 +151,7 @@ watch(() => imgElement.value, (newVal) => {
           <NuxtImg
             :src="src"
             :alt="alt"
-            :class="imageStyles({ isExpanded: true })"
+            :class="base({ isExpanded: true })"
           />
         </div>
 

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

@@ -1,11 +1,13 @@
-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";
 }
-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 {
+}
+declare const __VLS_export: 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 _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,8 @@
-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>;
+}
+export interface LogoEmits {
+}
+declare const __VLS_export: 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 _default: typeof __VLS_export;
 export default _default;

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

@@ -1,10 +1,18 @@
 <script setup>
 import { useAppConfig } from "nuxt/app";
 import { computed } from "#imports";
-const appConfig = useAppConfig();
+import { tv } from "tailwind-variants";
 const { variant = "mark" } = defineProps({
   variant: { type: String, required: false }
 });
+const emit = defineEmits([]);
+const logoStyles = tv({
+  slots: {
+    root: ""
+  }
+});
+const { root } = logoStyles();
+const appConfig = useAppConfig();
 const logoSrc = computed(() => {
   switch (variant) {
     case "type":

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

@@ -1,6 +1,8 @@
-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>;
+}
+export interface LogoEmits {
+}
+declare const __VLS_export: 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 _default: typeof __VLS_export;
 export default _default;

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

@@ -1,9 +1,11 @@
-type __VLS_Props = {
+export interface NewsletterSignupProps {
     fieldLabel?: string;
     description?: string;
     placeholder?: string;
     buttonLabel?: string;
-};
-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>;
+}
+export interface NewsletterSignupEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<NewsletterSignupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NewsletterSignupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,5 @@
 <script setup>
+import { tv } from "tailwind-variants";
 const {
   fieldLabel = "Subscribe to our Newsletter",
   description = "Stay updated on new posts and updates. Unsubscribe at any time.",
@@ -10,12 +11,19 @@ const {
   placeholder: { type: String, required: false },
   buttonLabel: { type: String, required: false }
 });
+const emit = defineEmits([]);
+const newsletterSignupStyles = tv({
+  slots: {
+    group: "pt-2"
+  }
+});
+const { group } = newsletterSignupStyles();
 </script>
 
 <template>
   <UForm>
     <UFormField name="email" :label="fieldLabel" :description="description">
-      <UFieldGroup class="pt-2">
+      <UFieldGroup :class="group()">
         <UInput type="email" :placeholder="placeholder" />
         <UButton type="submit" :label="buttonLabel" />
       </UFieldGroup>

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

@@ -1,9 +1,11 @@
-type __VLS_Props = {
+export interface NewsletterSignupProps {
     fieldLabel?: string;
     description?: string;
     placeholder?: string;
     buttonLabel?: string;
-};
-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>;
+}
+export interface NewsletterSignupEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<NewsletterSignupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NewsletterSignupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,8 +1,10 @@
-interface Props {
+export interface ScrollToTopProps {
     circleStrokeWidth?: number;
     duration?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+export interface ScrollToTopEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<ScrollToTopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollToTopProps> & Readonly<{}>, {
     circleStrokeWidth: number;
     duration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,9 +1,21 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
+import { tv } from "tailwind-variants";
 const props = defineProps({
   circleStrokeWidth: { type: Number, required: false, default: 4 },
   duration: { type: Number, required: false, default: 0.1 }
 });
+const emit = defineEmits([]);
+const scrollToTopStyles = tv({
+  slots: {
+    button: "fixed right-4 bottom-4 z-50 size-20 lg:size-16",
+    progressBase: "progress-circle-base size-full",
+    svg: "size-full",
+    iconContainer: "absolute inset-0 flex items-center justify-center text-center",
+    icon: "size-6 text-white"
+  }
+});
+const { button, progressBase, svg, iconContainer, icon } = scrollToTopStyles();
 const scrollPercentage = ref(0);
 const minScrollThreshold = 15;
 const isVisible = computed(() => scrollPercentage.value >= minScrollThreshold);
@@ -53,13 +65,9 @@ const durationInSeconds = computed(() => `${props.duration}s`);
     leave-to-class="opacity-0"
   >
     <div v-if="isVisible">
-      <UButton
-        variant="ghost"
-        class="fixed right-4 bottom-4 z-50 size-20 lg:size-16"
-        @click="scrollToTop"
-      >
-        <div class="progress-circle-base size-full">
-          <svg class="size-full" viewBox="0 0 100 100">
+      <UButton variant="ghost" :class="button()" @click="scrollToTop">
+        <div :class="progressBase()">
+          <svg :class="svg()" viewBox="0 0 100 100">
             <circle
               cx="50"
               cy="50"
@@ -81,8 +89,8 @@ const durationInSeconds = computed(() => `${props.duration}s`);
               class="gauge-primary-stroke opacity-100"
             />
           </svg>
-          <div class="absolute inset-0 flex items-center justify-center text-center">
-            <UIcon name="lucide:arrow-up" class="size-6 text-white" />
+          <div :class="iconContainer()">
+            <UIcon name="lucide:arrow-up" :class="icon()" />
           </div>
         </div>
       </UButton>

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

@@ -1,8 +1,10 @@
-interface Props {
+export interface ScrollToTopProps {
     circleStrokeWidth?: number;
     duration?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+export interface ScrollToTopEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<ScrollToTopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollToTopProps> & Readonly<{}>, {
     circleStrokeWidth: number;
     duration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/blocks/Block.d.vue.ts

@@ -1,12 +1,14 @@
-type __VLS_Props = {
+export interface BlockProps {
     id: string;
     type: string;
-};
+}
+export interface BlockEmits {
+}
 declare var __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => 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>;
+declare const __VLS_base: import("vue").DefineComponent<BlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockProps> & 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/blocks/Block.vue

@@ -1,13 +1,22 @@
 <script setup>
-import { inject, computed, ref } from "vue";
-const editorApi = inject("block-editor-api");
-if (!editorApi) {
-  throw new Error("RCBlock must be used within a BlockEditor component");
-}
+import { inject, ref } from "vue";
+import { tv } from "tailwind-variants";
 const { id, type } = defineProps({
   id: { type: String, required: true },
   type: { type: String, required: true }
 });
+const emit = defineEmits([]);
+const blockStyles = tv({
+  slots: {
+    root: "group relative pl-12 flex flex-row gap-xs",
+    menuContainer: "top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100"
+  }
+});
+const { root, menuContainer } = blockStyles();
+const editorApi = inject("block-editor-api");
+if (!editorApi) {
+  throw new Error("RCBlock must be used within a BlockEditor component");
+}
 const onDelete = () => editorApi.removeBlock(id);
 const onDuplicate = () => editorApi.duplicateBlock(id);
 const onMoveUp = () => editorApi.moveBlock(id, -1);
@@ -54,8 +63,8 @@ const items = ref([
 </script>
 
 <template>
-  <div class="group relative pl-12 flex flex-row gap-xs">
-    <div class="top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100">
+  <div :class="root()">
+    <div :class="menuContainer()">
       <UDropdownMenu :items="items">
         <UButton icon="lucide:grip-vertical" variant="ghost" color="neutral" />
       </UDropdownMenu>

package/dist/runtime/components/blocks/Block.vue.d.ts

@@ -1,12 +1,14 @@
-type __VLS_Props = {
+export interface BlockProps {
     id: string;
     type: string;
-};
+}
+export interface BlockEmits {
+}
 declare var __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => 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>;
+declare const __VLS_base: import("vue").DefineComponent<BlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockProps> & 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/blocks/BlockEditRenderer.d.vue.ts

@@ -1,7 +1,9 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockEditRendererProps {
     blocks: Block[];
-};
-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>;
+}
+export interface BlockEditRendererEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<BlockEditRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockEditRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;