rimelight-components 2.1.17 → 2.1.19

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

@@ -1,9 +1,23 @@
-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>;
+    rc?: {
+        group?: string;
+    };
+}
+export interface NewsletterSignupEmits {
+}
+export interface NewsletterSignupSlots {
+}
+type __VLS_Slots = NewsletterSignupSlots;
+declare const __VLS_base: 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 __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/NewsletterSignup.vue

@@ -1,21 +1,34 @@
 <script setup>
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
 const {
   fieldLabel = "Subscribe to our Newsletter",
   description = "Stay updated on new posts and updates. Unsubscribe at any time.",
   placeholder = "email@domain.com",
-  buttonLabel = "Subscribe"
+  buttonLabel = "Subscribe",
+  rc: rcProp
 } = defineProps({
   fieldLabel: { type: String, required: false },
   description: { type: String, required: false },
   placeholder: { type: String, required: false },
-  buttonLabel: { type: String, required: false }
+  buttonLabel: { type: String, required: false },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("NewsletterSignup", rcProp);
+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({ class: rc.group })">
         <UInput type="email" :placeholder="placeholder" />
         <UButton type="submit" :label="buttonLabel" />
       </UFieldGroup>

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

@@ -1,9 +1,23 @@
-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>;
+    rc?: {
+        group?: string;
+    };
+}
+export interface NewsletterSignupEmits {
+}
+export interface NewsletterSignupSlots {
+}
+type __VLS_Slots = NewsletterSignupSlots;
+declare const __VLS_base: 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 __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/ScrollToTop.d.vue.ts

@@ -1,10 +1,25 @@
-interface Props {
+export interface ScrollToTopProps {
     circleStrokeWidth?: number;
     duration?: number;
+    rc?: {
+        button?: string;
+        progressBase?: string;
+        svg?: string;
+        iconContainer?: string;
+        icon?: string;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
-    duration: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface ScrollToTopEmits {
+}
+export interface ScrollToTopSlots {
+}
+type __VLS_Slots = ScrollToTopSlots;
+declare const __VLS_base: import("vue").DefineComponent<ScrollToTopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollToTopProps> & 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/ScrollToTop.vue

@@ -1,9 +1,29 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
-const props = defineProps({
-  circleStrokeWidth: { type: Number, required: false, default: 4 },
-  duration: { type: Number, required: false, default: 0.1 }
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const {
+  circleStrokeWidth = 4,
+  duration = 0.1,
+  rc: rcProp
+} = defineProps({
+  circleStrokeWidth: { type: Number, required: false },
+  duration: { type: Number, required: false },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("ScrollToTop", rcProp);
+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);
@@ -41,7 +61,7 @@ const currentPercent = computed(
   () => (scrollPercentage.value - 0) / 100 * 100
 );
 const percentageInPx = computed(() => `${percentPx}px`);
-const durationInSeconds = computed(() => `${props.duration}s`);
+const durationInSeconds = computed(() => `${duration}s`);
 </script>
 
 <template>
@@ -53,19 +73,15 @@ 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({ class: rc.button })" @click="scrollToTop">
+        <div :class="progressBase({ class: rc.progressBase })">
+          <svg :class="svg({ class: rc.svg })" viewBox="0 0 100 100">
             <circle
               cx="50"
               cy="50"
               r="45"
               fill="var(--color-primary-950)"
-              :stroke-width="props.circleStrokeWidth"
+              :stroke-width="circleStrokeWidth"
               stroke-dashoffset="0"
               stroke-linecap="round"
               class="gauge-secondary-stroke opacity-100"
@@ -75,14 +91,14 @@ const durationInSeconds = computed(() => `${props.duration}s`);
               cy="50"
               r="45"
               fill="transparent"
-              :stroke-width="props.circleStrokeWidth"
+              :stroke-width="circleStrokeWidth"
               stroke-dashoffset="0"
               stroke-linecap="round"
               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({ class: rc.iconContainer })">
+            <UIcon name="lucide:arrow-up" :class="icon({ class: rc.icon })" />
           </div>
         </div>
       </UButton>

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

@@ -1,10 +1,25 @@
-interface Props {
+export interface ScrollToTopProps {
     circleStrokeWidth?: number;
     duration?: number;
+    rc?: {
+        button?: string;
+        progressBase?: string;
+        svg?: string;
+        iconContainer?: string;
+        icon?: string;
+    };
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
-    duration: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export interface ScrollToTopEmits {
+}
+export interface ScrollToTopSlots {
+}
+type __VLS_Slots = ScrollToTopSlots;
+declare const __VLS_base: import("vue").DefineComponent<ScrollToTopProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollToTopProps> & 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/blocks/Block.d.vue.ts

@@ -1,12 +1,18 @@
-type __VLS_Props = {
+export interface BlockProps {
     id: string;
     type: string;
-};
-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>;
+    rc?: {
+        root?: string;
+        menuContainer?: string;
+    };
+}
+export interface BlockEmits {
+}
+export interface BlockSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = BlockSlots;
+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,26 @@
 <script setup>
-import { inject, computed, ref } from "vue";
+import { inject, ref } from "vue";
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { id, type, rc: rcProp } = defineProps({
+  id: { type: String, required: true },
+  type: { type: String, required: true },
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Block", rcProp);
+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 { id, type } = defineProps({
-  id: { type: String, required: true },
-  type: { type: String, required: true }
-});
 const onDelete = () => editorApi.removeBlock(id);
 const onDuplicate = () => editorApi.duplicateBlock(id);
 const onMoveUp = () => editorApi.moveBlock(id, -1);
@@ -54,8 +67,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({ class: rc.root })">
+    <div :class="menuContainer({ class: rc.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,18 @@
-type __VLS_Props = {
+export interface BlockProps {
     id: string;
     type: string;
-};
-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>;
+    rc?: {
+        root?: string;
+        menuContainer?: string;
+    };
+}
+export interface BlockEmits {
+}
+export interface BlockSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = BlockSlots;
+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,21 @@
 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>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface BlockEditRendererEmits {
+}
+export interface BlockEditRendererSlots {
+}
+type __VLS_Slots = BlockEditRendererSlots;
+declare const __VLS_base: 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 __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/blocks/BlockEditRenderer.vue

@@ -1,9 +1,21 @@
 <script setup>
 import {} from "vue";
 import { getBlockEditorComponent } from "../../internal/blockMapper";
-const { blocks } = defineProps({
-  blocks: { type: Array, required: true }
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { blocks, rc: rcProp } = defineProps({
+  blocks: { type: Array, required: true },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("BlockEditRenderer", rcProp);
+const blockEditRendererStyles = tv({
+  slots: {
+    root: "flex flex-col gap-lg w-full"
+  }
+});
+const { root } = blockEditRendererStyles();
 const getComponent = (block) => {
   if (!block || !block.type || block.type.length === 0) {
     console.error("Block object is missing the critical 'type' field.");
@@ -19,7 +31,7 @@ const getComponent = (block) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-lg w-full">
+  <div :class="root({ class: rc.root })">
     <UEmpty
       v-if="!blocks || blocks.length === 0"
       variant="naked"

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

@@ -1,7 +1,21 @@
 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>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface BlockEditRendererEmits {
+}
+export interface BlockEditRendererSlots {
+}
+type __VLS_Slots = BlockEditRendererSlots;
+declare const __VLS_base: 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 __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/blocks/BlockEditor.d.vue.ts

@@ -1,27 +1,36 @@
 import type { Block } from "../../types/index.js";
 export interface BlockEditorProps {
     historyLimit?: number;
+    rc?: {};
 }
 type __VLS_Props = BlockEditorProps;
 export interface BlockEditorEmits {
-    (e: "save"): void;
+    save: [];
 }
+export interface BlockEditorSlots {
+}
+type __VLS_Slots = BlockEditorSlots;
 type __VLS_ModelProps = {
     modelValue: Block[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     undo: () => void;
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: Block[]) => any;
-} & {
     save: () => any;
+    "update:modelValue": (value: Block[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, 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/blocks/BlockEditor.vue

@@ -1,11 +1,18 @@
 <script setup>
-import { provide, ref, computed } from "vue";
+import { provide } from "vue";
 import { useBlockEditor } from "../../composables";
-const blocks = defineModel({ type: Array, ...{ required: true } });
-const { historyLimit } = defineProps({
-  historyLimit: { type: Number, required: false }
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { historyLimit, rc: rcProp } = defineProps({
+  historyLimit: { type: Number, required: false },
+  rc: { type: Object, required: false }
 });
+const blocks = defineModel({ type: Array, ...{ required: true } });
 const emit = defineEmits(["save"]);
+const slots = defineSlots();
+const { rc } = useRC("BlockEditor", rcProp);
+const blockEditorStyles = tv({});
+const {} = blockEditorStyles();
 const {
   removeBlock,
   moveBlock,
@@ -29,37 +36,6 @@ provide("block-editor-api", {
   redo
 });
 defineExpose({ undo, redo, canUndo, canRedo });
-const handleSave = () => {
-  emit("save");
-};
-const showPreview = ref(false);
-const gridClass = computed(() => ({
-  // The base grid: transitions enable smooth resizing
-  "grid transition-[grid-template-columns] duration-300 ease-out": true,
-  // When hidden, use a single column (Editor takes full width)
-  "grid-cols-1": !showPreview.value,
-  // When visible, use two equal columns (Editor + Preview)
-  "grid-cols-2 gap-xl": showPreview.value
-}));
-const editorPanelClass = computed(() => ({
-  // When preview is visible, both editor/preview share 1/2 span.
-  "col-span-1 w-full": showPreview.value,
-  // When preview is hidden, the editor uses the full grid space.
-  "col-span-2 w-full": !showPreview.value
-}));
-const togglePreview = () => {
-  showPreview.value = !showPreview.value;
-};
-const undoAction = () => {
-  if (canUndo.value) {
-    undo();
-  }
-};
-const redoAction = () => {
-  if (canRedo.value) {
-    redo();
-  }
-};
 </script>
 
 <template>

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

@@ -1,27 +1,36 @@
 import type { Block } from "../../types/index.js";
 export interface BlockEditorProps {
     historyLimit?: number;
+    rc?: {};
 }
 type __VLS_Props = BlockEditorProps;
 export interface BlockEditorEmits {
-    (e: "save"): void;
+    save: [];
 }
+export interface BlockEditorSlots {
+}
+type __VLS_Slots = BlockEditorSlots;
 type __VLS_ModelProps = {
     modelValue: Block[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     undo: () => void;
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: Block[]) => any;
-} & {
     save: () => any;
+    "update:modelValue": (value: Block[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, 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/blocks/BlockViewRenderer.d.vue.ts

@@ -1,7 +1,21 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockViewRendererProps {
     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>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface BlockViewRendererEmits {
+}
+export interface BlockViewRendererSlots {
+}
+type __VLS_Slots = BlockViewRendererSlots;
+declare const __VLS_base: import("vue").DefineComponent<BlockViewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockViewRendererProps> & 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/blocks/BlockViewRenderer.vue

@@ -1,9 +1,21 @@
 <script setup>
 import {} from "vue";
 import { getBlockRendererComponent } from "../../internal/blockMapper";
-const { blocks } = defineProps({
-  blocks: { type: Array, required: true }
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { blocks, rc: rcProp } = defineProps({
+  blocks: { type: Array, required: true },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("BlockViewRenderer", rcProp);
+const blockViewRendererStyles = tv({
+  slots: {
+    root: "flex flex-col gap-lg"
+  }
+});
+const { root } = blockViewRendererStyles();
 const getComponent = (block) => {
   if (!block || !block.type || block.type.length === 0) {
     console.error("Block object is missing the critical 'type' field.");
@@ -19,7 +31,7 @@ const getComponent = (block) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-lg">
+  <div :class="root({ class: rc.root })">
     <UEmpty
       v-if="!blocks || blocks.length === 0"
       variant="naked"

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

@@ -1,7 +1,21 @@
 import type { Block } from "../../types/index.js";
-type __VLS_Props = {
+export interface BlockViewRendererProps {
     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>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface BlockViewRendererEmits {
+}
+export interface BlockViewRendererSlots {
+}
+type __VLS_Slots = BlockViewRendererSlots;
+declare const __VLS_base: import("vue").DefineComponent<BlockViewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockViewRendererProps> & 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;
+    };
+};