rimelight-components 2.1.16 → 2.1.18

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.16",
+  "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.16";
+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

@@ -0,0 +1,13 @@
+export interface ImageProps {
+    src: string;
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    loading?: "lazy" | "eager";
+    fit?: "cover" | "contain" | "fill" | "inside" | "outside";
+}
+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

@@ -0,0 +1,189 @@
+<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({
+  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 }
+});
+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);
+const imgElement = useTemplateRef("imgRef");
+const metadata = reactive({
+  width: 0,
+  height: 0,
+  size: "",
+  format: "",
+  mimeType: ""
+});
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+async function fetchExtendedMetadata() {
+  try {
+    const response = await fetch(src, {
+      method: "GET",
+      mode: "cors"
+    });
+    if (!response.ok) throw new Error("Network response was not ok");
+    const blob = await response.blob();
+    metadata.size = formatBytes(blob.size);
+    const type = response.headers.get("content-type") || blob.type;
+    if (type) {
+      metadata.mimeType = type;
+      metadata.format = type.split("/")[1]?.split("+")[0]?.toUpperCase() || "IMG";
+    }
+    if (metadata.format === "SVG") {
+      const tempImg = new Image();
+      tempImg.src = URL.createObjectURL(blob);
+      await tempImg.decode();
+      metadata.width = tempImg.naturalWidth;
+      metadata.height = tempImg.naturalHeight;
+      URL.revokeObjectURL(tempImg.src);
+    }
+  } catch (e) {
+    console.error("Metadata fetch failed:", e);
+    metadata.format = src.split(".").pop()?.toUpperCase() || "IMG";
+    metadata.size = "Unknown";
+  }
+}
+function updateMetadata(el) {
+  if (!import.meta.client || !el) return;
+  if (el.naturalWidth > 0) {
+    metadata.width = el.naturalWidth;
+    metadata.height = el.naturalHeight;
+    fetchExtendedMetadata();
+  }
+}
+function handleImageLoad(event) {
+  updateMetadata(event.currentTarget);
+}
+async function downloadImage() {
+  try {
+    const response = await fetch(src);
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `file-${Date.now()}.${metadata.format.toLowerCase()}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error("Download failed", error);
+  }
+}
+onMounted(() => {
+  nextTick(() => {
+    const el = imgElement.value?.$el;
+    if (el) {
+      if (el.complete) {
+        updateMetadata(el);
+      }
+    }
+  });
+});
+watch(() => imgElement.value, (newVal) => {
+  const el = newVal?.$el;
+  if (el && el.complete && el.naturalWidth > 0) {
+    updateMetadata(el);
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <UModal v-model="isOpen" title="Image Viewer" :description="`${src}`" :ui="{
+  content: 'w-fit max-w-[98vw] sm:max-w-[95vw] mx-auto'
+}">
+    <template #default>
+      <div class="relative">
+      <NuxtImg
+        ref="imgRef"
+        :src="src"
+        :alt="alt"
+        :height="height"
+        :width="width"
+        :loading="loading"
+        :class="base({ isExpanded: false })"
+        @click="isOpen = true"
+        @load="handleImageLoad"
+      />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-md">
+        <div class="flex-1 min-h-0 w-full flex items-center">
+          <NuxtImg
+            :src="src"
+            :alt="alt"
+            :class="base({ isExpanded: true })"
+          />
+        </div>
+
+        <USeparator />
+
+        <div class="flex items-center justify-between gap-xl">
+          <div class="flex flex-col gap-xs">
+            <div class="flex flex-row gap-xs items-center">
+              <UIcon name="lucide:image" class="size-4" />
+              <p class="text-sm">Source: <span class="text-dimmed">{{ src }}</span></p>
+            </div>
+            <div class="flex flex-row gap-xs items-center">
+              <UIcon name="lucide:file-question-mark" class="size-4" />
+              <p class="text-sm">Format: <span class="text-dimmed">{{ metadata.format }}</span></p>
+            </div>
+            <div class="flex flex-row gap-xs items-center">
+              <UIcon name="lucide:weight" class="size-4" />
+              <p class="text-sm">Size: <span class="text-dimmed">{{ metadata.size || "Unknown" }}</span></p>
+            </div>
+            <div class="flex flex-row gap-xs items-center">
+              <UIcon name="lucide:image-upscale" class="size-4" />
+              <p class="text-sm">Dimensions: <span class="text-dimmed">{{ metadata.width }} × {{ metadata.height }}</span></p>
+            </div>
+          </div>
+
+          <UButton
+            icon="lucide:download"
+            label="Download Original"
+            @click="downloadImage"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,13 @@
+export interface ImageProps {
+    src: string;
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    loading?: "lazy" | "eager";
+    fit?: "cover" | "contain" | "fill" | "inside" | "outside";
+}
+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>;