@code-coaching/vuetiful 0.15.2 → 0.16.0

package/dist/vuetiful.es.mjs

@@ -1,11 +1,11 @@
-import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, watchEffect, provide, onUnmounted, inject, toRaw, watch, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, mergeProps, resolveComponent, renderList } from "vue";
-const _hoisted_1$9 = ["src", "alt"];
-const _hoisted_2$4 = {
+import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, watchEffect, provide, onUnmounted, inject, toRaw, watch, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, mergeProps, renderList, pushScopeId, popScopeId, resolveComponent } from "vue";
+const _hoisted_1$a = ["src", "alt"];
+const _hoisted_2$5 = {
   key: 1,
   class: "avatar-initials h-full w-full",
   viewBox: "0 0 512 512"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
@@ -39,7 +39,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$9)) : (openBlock(), createElementBlock("svg", _hoisted_2$4, [
+        }, null, 40, _hoisted_1$a)) : (openBlock(), createElementBlock("svg", _hoisted_2$5, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -61,17 +61,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$h = {};
-const _hoisted_1$8 = {
+const _sfc_main$i = {};
+const _hoisted_1$9 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$8, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$3]]);
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$3]]);
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -121,16 +121,16 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$f = {};
-const _hoisted_1$7 = {
+const _sfc_main$g = {};
+const _hoisted_1$8 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$2]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -46471,12 +46471,12 @@ const useHighlight = () => {
   };
 };
 var githubDark = "";
-const _hoisted_1$6 = { class: "code-block bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
-const _hoisted_2$3 = {
+const _hoisted_1$7 = { class: "code-block bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
+const _hoisted_2$4 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
-const _hoisted_3$1 = ["innerHTML"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_3$2 = ["innerHTML"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VCodeBlock",
   props: {
     language: {
@@ -46534,11 +46534,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       emit("copy");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("header", {
           class: normalizeClass(`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${__props.headerClass}`)
         }, [
-          createElementVNode("span", _hoisted_2$3, toDisplayString(languageFormatter(__props.language)), 1),
+          createElementVNode("span", _hoisted_2$4, toDisplayString(languageFormatter(__props.language)), 1),
           withDirectives((openBlock(), createElementBlock("button", {
             class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
             onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
@@ -46554,13 +46554,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           createElementVNode("code", {
             class: normalizeClass(`code-block-code language-${__props.language}`),
             innerHTML: unref(highlight2)(props.code, props.language)
-          }, null, 10, _hoisted_3$1)
+          }, null, 10, _hoisted_3$2)
         ], 2)
       ]);
     };
   }
 });
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46651,8 +46651,8 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-const _hoisted_1$5 = ["aria-checked", "title"];
-const _hoisted_2$2 = ["d"];
+const _hoisted_1$6 = ["aria-checked", "title"];
+const _hoisted_2$3 = ["d"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
@@ -46677,12 +46677,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("path", {
           fill: "currentColor",
           d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
-        }, null, 8, _hoisted_2$2)
+        }, null, 8, _hoisted_2$3)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$5);
+  ], 42, _hoisted_1$6);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$1]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$1]]);
 function u(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -47175,7 +47175,7 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
     return h$1(Fragment, [n2 != null && i2.value != null ? h$1(f$1, K$1({ features: a$1.Hidden, as: "input", type: "checkbox", hidden: true, readOnly: true, checked: i2.value, form: D, name: n2, value: L })) : null, H$2({ ourProps: x, theirProps: { ...a2, ...T$2(R, ["modelValue", "defaultChecked"]) }, slot: K2, attrs: a2, slots: o$2, name: "Switch" })]);
   };
 } }), de = T, ce = E;
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47194,7 +47194,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47262,7 +47262,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47288,7 +47288,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47307,11 +47307,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -47387,7 +47387,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${unref(trackSize)} ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${__props.switchClass}`)
           }, [
-            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$4, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$5, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -47400,7 +47400,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -47419,7 +47419,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
@@ -47438,7 +47438,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -47583,8 +47583,8 @@ const useDarkMode = () => {
     MODE
   };
 };
-const _hoisted_1$3 = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -47648,7 +47648,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$3)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$4)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -47671,8 +47671,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
     active: {
@@ -47701,7 +47701,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     provide("active", props.active);
     provide("hover", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("div", {
           class: normalizeClass(["v-bar-lead", __props.regionLead])
         }, [
@@ -47721,7 +47721,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "VRailTile",
   props: {
     value: {
@@ -47797,9 +47797,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
-const _hoisted_2$1 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
-const _sfc_main$1 = defineComponent({
+const _hoisted_1$2 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
+const _hoisted_2$2 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _sfc_main$2 = defineComponent({
   __name: "VShell",
   props: {
     regionPage: { type: String, default: "" },
@@ -47814,14 +47814,14 @@ const _sfc_main$1 = defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         _ctx.$slots.fixedHeader ? (openBlock(), createElementBlock("header", {
           key: 0,
           class: normalizeClass(`vuetiful-fixed-header ${__props.slotFixedHeader}`)
         }, [
           renderSlot(_ctx.$slots, "fixedHeader")
         ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$1, [
+        createElementVNode("div", _hoisted_2$2, [
           _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
             key: 0,
             class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
@@ -47867,34 +47867,291 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
+var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _withScopeId = (n2) => (pushScopeId("data-v-11c10f2c"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$1 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
+const _hoisted_2$1 = { class: "flex items-center gap-2" };
+const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" })
+], -1));
+const _hoisted_4$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 640 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" })
+], -1));
+const _hoisted_5$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 384 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z" })
+], -1));
+const _hoisted_6$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 576 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V352H64V64H512z" })
+], -1));
+const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M0 32C0 14.3 14.3 0 32 0H160c17.7 0 32 14.3 32 32V416c0 53-43 96-96 96s-96-43-96-96V32zM223.6 425.9c.3-3.3 .4-6.6 .4-9.9V154l75.4-75.4c12.5-12.5 32.8-12.5 45.3 0l90.5 90.5c12.5 12.5 12.5 32.8 0 45.3L223.6 425.9zM182.8 512l192-192H480c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H182.8zM128 64H64v64h64V64zM64 192v64h64V192H64zM96 440a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" })
+], -1));
+const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })
+], -1));
+const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+}, [
+  /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })
+], -1));
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VPreview",
+  props: {
+    hideMobileToggle: {
+      type: Boolean,
+      default: false
+    },
+    hideSwatches: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String,
+      default: "neutral"
+    },
+    regionHeader: {
+      type: String,
+      default: ""
+    },
+    regionViewport: {
+      type: String,
+      default: ""
+    },
+    regionPreview: {
+      type: String,
+      default: ""
+    },
+    regionFooter: {
+      type: String,
+      default: ""
+    },
+    regionSource: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const backgrounds = {
+      "bg-transparent": "bg-transparent",
+      neutral: "bg-white/25 dark:bg-black/25",
+      "neutral-opaque": "bg-white/50 dark:bg-black/50",
+      "variant-filled-surface": "variant-filled-surface",
+      "variant-filled-primary": "variant-filled-primary",
+      "variant-filled-secondary": "variant-filled-secondary",
+      "variant-filled-tertiary": "variant-filled-tertiary",
+      "variant-filled-success": "variant-filled-success",
+      "variant-filled-warning": "variant-filled-warning",
+      "variant-filled-error": "variant-filled-error"
+    };
+    const chosenBackground = ref(props.background);
+    const tabView = ref("preview");
+    const radioSize = ref("full");
+    const swatches = ref(false);
+    const toggleSwatches = () => swatches.value = !swatches.value;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("header", {
+          class: normalizeClass(`vuetiful-previewer-header flex items-center justify-between gap-4 p-4 bg-surface-200-700-token ${__props.regionHeader}`)
+        }, [
+          createElementVNode("div", _hoisted_2$1, [
+            createVNode(unref(_sfc_main$c), {
+              modelValue: tabView.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$b), {
+                  "data-test": "radio-item-preview",
+                  value: "preview",
+                  title: "Preview"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "preview-item", {}, () => [
+                      _hoisted_3$1
+                    ], true)
+                  ]),
+                  _: 3
+                }),
+                createVNode(unref(_sfc_main$b), {
+                  "data-test": "radio-item-code",
+                  value: "code",
+                  title: "Code"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "code-item", {}, () => [
+                      _hoisted_4$1
+                    ], true)
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            }, 8, ["modelValue"]),
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$c), {
+              key: 0,
+              class: "hidden sm:!inline-flex",
+              modelValue: radioSize.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => radioSize.value = $event)
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$b), {
+                  "data-test": "radio-item-mobile",
+                  value: "mobile"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "mobile-item", {}, () => [
+                      _hoisted_5$1
+                    ], true)
+                  ]),
+                  _: 3
+                }),
+                createVNode(unref(_sfc_main$b), { value: "full" }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "desktop-item", {}, () => [
+                      _hoisted_6$1
+                    ], true)
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            }, 8, ["modelValue"])) : createCommentVNode("", true)
+          ]),
+          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$h), {
+            key: 0,
+            "data-test": "swatch-button",
+            class: normalizeClass(`${swatches.value ? "variant-filled" : "variant-ghost"} px-4 py-1 border-token border-surface-400-500-token`),
+            onClick: toggleSwatches,
+            title: "Backgrounds"
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "swatchbook-item", {}, () => [
+                _hoisted_7
+              ], true)
+            ]),
+            _: 3
+          }, 8, ["class"])) : createCommentVNode("", true)
+        ], 2),
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$c), {
+          key: 0,
+          "data-test": "swatches",
+          class: normalizeClass(`vuetiful-previewer-swatches variant-soft grid grid-cols-6 gap-2 !rounded-none p-4 sm:grid-cols-12`),
+          active: "bg-transparent",
+          hover: "bg-transparent",
+          modelValue: chosenBackground.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => chosenBackground.value = $event)
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
+              return openBlock(), createBlock(unref(_sfc_main$b), {
+                value: key,
+                key: index2,
+                class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
+                title: key
+              }, {
+                default: withCtx(() => [
+                  index2 === 0 && chosenBackground.value !== key ? renderSlot(_ctx.$slots, "cancel-item", { key: 0 }, () => [
+                    _hoisted_8
+                  ], true) : createCommentVNode("", true),
+                  chosenBackground.value === key ? renderSlot(_ctx.$slots, "selected-item", { key: 1 }, () => [
+                    _hoisted_9
+                  ], true) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["value", "class", "title"]);
+            }), 128))
+          ]),
+          _: 3
+        }, 8, ["modelValue"])) : createCommentVNode("", true),
+        tabView.value === "preview" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createElementVNode("div", {
+            class: normalizeClass(`vuetiful-previewer-viewport p-4 md:p-10 ${backgrounds[chosenBackground.value]} ${__props.regionViewport}`)
+          }, [
+            createElementVNode("div", {
+              "data-test": "previewer-preview",
+              class: normalizeClass(`vuetiful-previewer-preview mx-auto flex duration-300 ${radioSize.value === "mobile" ? "mobile-screen flex h-[812px]  max-w-[375px] flex-col overflow-hidden rounded-3xl border-8 border-black/50 p-2 shadow-2xl dark:border-white/50" : "w-full items-center justify-center"} ${__props.regionPreview}`)
+            }, [
+              renderSlot(_ctx.$slots, "preview", {}, () => [
+                createTextVNode("(preview)")
+              ], true)
+            ], 2)
+          ], 2),
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
+            key: 0,
+            class: normalizeClass(`vuetiful-previewer-footer variant-soft p-4 ${__props.regionFooter}`)
+          }, [
+            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+          ], 2)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true),
+        tabView.value === "code" ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          "data-test": "previewer-source",
+          class: normalizeClass(`vuetiful-previewer-source space-y-4 p-4 bg-surface-200-700-token ${__props.regionSource}`)
+        }, [
+          renderSlot(_ctx.$slots, "source", {}, () => [
+            createTextVNode("(source)")
+          ], true)
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-11c10f2c"]]);
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VAvatar: _sfc_main$i,
-  VButton: _sfc_main$g,
+  VAvatar: _sfc_main$j,
+  VButton: _sfc_main$h,
   VBadge,
   VChip,
-  VCodeBlock: _sfc_main$e,
+  VCodeBlock: _sfc_main$f,
   VLightSwitch,
-  VRadioGroup: _sfc_main$b,
-  VRadioItem: _sfc_main$a,
-  VRadioLabel: _sfc_main$9,
-  VRadioDescription: _sfc_main$c,
-  VSwitchGroup: _sfc_main$6,
-  VSwitchLabel: _sfc_main$5,
-  VSwitchDescription: _sfc_main$7,
-  VSwitch: _sfc_main$8,
-  VRail: _sfc_main$3,
-  VRailTile: _sfc_main$2,
-  VShell: _sfc_main$1,
-  VDrawer: _sfc_main$4
+  VRadioGroup: _sfc_main$c,
+  VRadioItem: _sfc_main$b,
+  VRadioLabel: _sfc_main$a,
+  VRadioDescription: _sfc_main$d,
+  VSwitchGroup: _sfc_main$7,
+  VSwitchLabel: _sfc_main$6,
+  VSwitchDescription: _sfc_main$8,
+  VSwitch: _sfc_main$9,
+  VRail: _sfc_main$4,
+  VRailTile: _sfc_main$3,
+  VShell: _sfc_main$2,
+  VDrawer: _sfc_main$5,
+  VPreview
 });
 var main = "";
 var tailwind = "";
 const _sfc_main = defineComponent({
   components: {
     VLightSwitch,
-    VButton: _sfc_main$g
+    VButton: _sfc_main$h
   },
   props: {
     bgLight: {
@@ -48134,4 +48391,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$i as VAvatar, VBadge, _sfc_main$g as VButton, VChip, _sfc_main$e as VCodeBlock, _sfc_main$4 as VDrawer, VLightSwitch, _sfc_main$c as VRadioDescription, _sfc_main$b as VRadioGroup, _sfc_main$a as VRadioItem, _sfc_main$9 as VRadioLabel, _sfc_main$3 as VRail, _sfc_main$2 as VRailTile, _sfc_main$1 as VShell, _sfc_main$8 as VSwitch, _sfc_main$7 as VSwitchDescription, _sfc_main$6 as VSwitchGroup, _sfc_main$5 as VSwitchLabel, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+export { themeSwitcher as ThemeSwitcher, _sfc_main$j as VAvatar, VBadge, _sfc_main$h as VButton, VChip, _sfc_main$f as VCodeBlock, _sfc_main$5 as VDrawer, VLightSwitch, VPreview, _sfc_main$d as VRadioDescription, _sfc_main$c as VRadioGroup, _sfc_main$b as VRadioItem, _sfc_main$a as VRadioLabel, _sfc_main$4 as VRail, _sfc_main$3 as VRailTile, _sfc_main$2 as VShell, _sfc_main$9 as VSwitch, _sfc_main$8 as VSwitchDescription, _sfc_main$7 as VSwitchGroup, _sfc_main$6 as VSwitchLabel, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };