@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/LpTextReveal-CtAnOUkp.js

@@ -0,0 +1,140 @@
+import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementVNode, toDisplayString, createElementBlock, Fragment, renderList, createTextVNode, normalizeStyle, normalizeClass } from "vue";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useReveal } from "../composables/useReveal.js";
+import { splitText, wordKeys } from "../components/textSplit.js";
+import '../assets/LpTextReveal-DjI1MsDS.css';const _hoisted_1 = { class: "sr-only" };
+const _hoisted_2 = { "aria-hidden": "true" };
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpTextReveal",
+  props: {
+    text: {},
+    by: { default: "word" },
+    stagger: {},
+    duration: { default: 560 },
+    rise: { default: 8 },
+    blur: { type: Boolean, default: true },
+    play: { type: Boolean, default: void 0 },
+    replayKey: {},
+    as: { default: "span" }
+  },
+  emits: ["done"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { class: rootClass, attrs: rest } = useMergedAttrs(() => "lp-reveal");
+    const LEAVE_MS = 180;
+    const { el, revealed } = useReveal({ immediate: () => props.play !== void 0 });
+    const ready = computed(() => props.play ?? revealed.value);
+    const shown = ref(props.text);
+    const generation = ref(0);
+    const pieces = computed(
+      () => splitText(shown.value, props.by).map((p) => ({ ...p, key: `${generation.value}:${p.key}` }))
+    );
+    const fresh = ref(wordKeys(pieces.value));
+    const leaving = ref(/* @__PURE__ */ new Set());
+    const stagger = computed(() => props.stagger ?? (props.by === "letter" ? 22 : 70));
+    const order = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      let i = 0;
+      for (const piece of pieces.value) {
+        if (piece.kind !== "word" || !fresh.value.has(piece.key)) continue;
+        map.set(piece.key, i);
+        i += piece.parts.length;
+      }
+      return { map, count: i };
+    });
+    let leaveTimer;
+    let doneTimer;
+    function scheduleDone() {
+      clearTimeout(doneTimer);
+      if (!ready.value) return;
+      const count = order.value.count;
+      const ms = prefersReducedMotion() || count === 0 ? 0 : props.duration + stagger.value * (count - 1);
+      doneTimer = setTimeout(() => emit("done"), ms);
+    }
+    function apply(text, bump) {
+      const before = wordKeys(pieces.value);
+      if (bump) generation.value++;
+      shown.value = text;
+      const after = wordKeys(pieces.value);
+      fresh.value = ready.value ? new Set([...after].filter((k) => !before.has(k))) : after;
+      leaving.value = /* @__PURE__ */ new Set();
+      scheduleDone();
+    }
+    function change(text, bump) {
+      clearTimeout(leaveTimer);
+      if (!ready.value || prefersReducedMotion()) return apply(text, bump);
+      const next = new Set(
+        splitText(text, props.by).map((p) => `${generation.value + (bump ? 1 : 0)}:${p.key}`)
+      );
+      const gone = [...wordKeys(pieces.value)].filter((k) => !next.has(k));
+      if (!gone.length) return apply(text, bump);
+      leaving.value = new Set(gone);
+      leaveTimer = setTimeout(() => apply(text, bump), LEAVE_MS);
+    }
+    watch(() => props.text, (text) => change(text, false));
+    watch(() => props.replayKey, () => change(props.text, true));
+    watch(() => props.by, () => apply(props.text, true));
+    watch(ready, (now) => now && scheduleDone(), { immediate: true });
+    onBeforeUnmount(() => {
+      clearTimeout(leaveTimer);
+      clearTimeout(doneTimer);
+    });
+    const style = computed(() => ({
+      "--lp-reveal-duration": `${props.duration}ms`,
+      "--lp-reveal-stagger": `${stagger.value}ms`,
+      "--lp-reveal-rise": `${props.rise}px`,
+      "--lp-reveal-blur": props.blur ? "4px" : "0px",
+      "--lp-reveal-leave": `${LEAVE_MS}ms`
+    }));
+    function partClass(key) {
+      if (leaving.value.has(key)) return "lp-reveal__part lp-reveal__part--out";
+      return ready.value && fresh.value.has(key) ? "lp-reveal__part lp-reveal__part--in" : "lp-reveal__part";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "el",
+        ref: el,
+        class: [unref(rootClass), ready.value ? "" : "lp-reveal--waiting"],
+        style: style.value
+      }, unref(rest)), {
+        default: withCtx(() => [
+          createElementVNode("span", _hoisted_1, toDisplayString(__props.text), 1),
+          createElementVNode("span", _hoisted_2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(pieces.value, (piece) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: piece.key
+              }, [
+                piece.kind === "space" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createTextVNode(toDisplayString(piece.text), 1)
+                ], 64)) : __props.by === "word" ? (openBlock(), createElementBlock("span", {
+                  key: 1,
+                  class: normalizeClass(partClass(piece.key)),
+                  style: normalizeStyle({ "--lp-reveal-i": order.value.map.get(piece.key) ?? 0 })
+                }, toDisplayString(piece.text), 7)) : (openBlock(), createElementBlock("span", {
+                  key: 2,
+                  class: normalizeClass(["inline-block whitespace-nowrap", leaving.value.has(piece.key) ? "lp-reveal__part--out" : ""])
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(piece.parts, (letter, j) => {
+                    return openBlock(), createElementBlock("span", {
+                      key: j,
+                      class: normalizeClass(leaving.value.has(piece.key) ? "lp-reveal__part" : partClass(piece.key)),
+                      style: normalizeStyle({ "--lp-reveal-i": (order.value.map.get(piece.key) ?? 0) + j })
+                    }, toDisplayString(letter), 7);
+                  }), 128))
+                ], 2))
+              ], 64);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 16, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTextarea-xoQd5Lnp.js → LpTextarea-DiWjeVoJ.js}

@@ -1,7 +1,7 @@
-import { defineComponent, computed, useAttrs, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, mergeProps } from "vue";
+import { defineComponent, computed, useAttrs, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, mergeProps } from "vue";
 import { useFieldControl } from "../composables/useField.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpFormField-DPb47HEm.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-BiennROB.js";
 const _hoisted_1 = ["id", "value", "placeholder", "rows", "disabled", "required", "aria-invalid", "aria-describedby"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -43,14 +43,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       )
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
-        id: hasField.value ? unref(field).id : void 0,
-        label: hasField.value ? __props.label : void 0,
-        hint: hasField.value ? __props.hint : void 0,
-        error: hasField.value ? __props.error : void 0,
-        required: hasField.value ? __props.required : void 0,
-        class: normalizeClass(hasField.value ? unref(attrs).class : "contents"),
-        style: normalizeStyle(hasField.value ? unref(attrs).style : void 0)
+      return openBlock(), createBlock(_sfc_main$1, {
+        wrapped: hasField.value,
+        id: unref(field).id,
+        label: __props.label,
+        hint: __props.hint,
+        error: __props.error,
+        required: __props.required,
+        class: normalizeClass(unref(attrs).class),
+        style: normalizeStyle(unref(attrs).style)
       }, {
         default: withCtx(() => [
           createElementVNode("textarea", mergeProps(textareaAttrs.value, {
@@ -68,7 +69,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), null, 16, _hoisted_1)
         ]),
         _: 1
-      }, 8, ["id", "label", "hint", "error", "required", "class", "style"]);
+      }, 8, ["wrapped", "id", "label", "hint", "error", "required", "class", "style"]);
     };
   }
 });

package/dist/chunks/{LpThemeProvider-CQ2jC9TA.js → LpThemeProvider-DcbfOxsU.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, shallowRef, computed, watch, nextTick, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
-import { t as themeEntries, r as revealTransition } from "./useTheme-2qHG8NEU.js";
+import { t as themeEntries, r as revealTransition } from "./useTheme-BOV_-AiY.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const PRESS_FRESH_MS = 1500;
 let lastPress = null;

package/dist/chunks/LpThemeStudio-DguwHdGt.js

@@ -0,0 +1,416 @@
+import { shallowRef, computed, ref, watch, watchEffect, defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { usePersisted } from "../composables/usePersisted.js";
+import { parseColor, rgbToHex } from "../components/color.js";
+import { p as presets, u as useTheme, o as themeToCssRule, s as serializeTheme } from "./useTheme-BOV_-AiY.js";
+import { _ as _sfc_main$1 } from "./LpButton-CVxBfGjd.js";
+import { _ as _sfc_main$6 } from "./LpCodeBlock-BGsQhxw8.js";
+import { _ as _sfc_main$4 } from "./LpColorPicker-DFugXNUi.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$5 } from "./LpSegmented-BO99Sr4m.js";
+import { _ as _sfc_main$3 } from "./LpThemeStudioSection-BwhqYDLf.js";
+function defineTheme(base, overrides = {}) {
+  const src = typeof base === "string" ? presets[base] : base;
+  return {
+    name: overrides.name ?? src.name,
+    mode: overrides.mode ?? src.mode,
+    colors: { ...src.colors, ...overrides.colors },
+    shape: { ...src.shape, ...overrides.shape },
+    density: { ...src.density, ...overrides.density },
+    font: { ...src.font, ...overrides.font },
+    surface: src.surface || overrides.surface ? { ...src.surface, ...overrides.surface } : void 0
+  };
+}
+function luminance({ r, g, b }) {
+  const lin = (n) => {
+    const x = n / 255;
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+const READABLE = 4.5;
+const mixRgb = (a, b, t) => ({
+  r: Math.round(a.r + (b.r - a.r) * t),
+  g: Math.round(a.g + (b.g - a.g) * t),
+  b: Math.round(a.b + (b.b - a.b) * t),
+  a: 1
+});
+function textOn(fill, current) {
+  const now = parseColor(current);
+  if (now && contrast(fill, now) >= READABLE) return current;
+  const dark = { r: 11, g: 15, b: 18 };
+  const light = { r: 255, g: 255, b: 255 };
+  return contrast(fill, dark) >= contrast(fill, light) ? "#0b0f12" : "#ffffff";
+}
+function withBrand(base, color) {
+  const src = typeof base === "string" ? presets[base] : base;
+  const rgb = parseColor(color);
+  if (!rgb) return src;
+  const solid = { ...rgb, a: 1 };
+  const dark = src.mode === "dark";
+  const hover = mixRgb(solid, dark ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 }, dark ? 0.12 : 0.1);
+  const tint = (alpha) => `rgba(${solid.r}, ${solid.g}, ${solid.b}, ${alpha})`;
+  return defineTheme(src, {
+    colors: {
+      brand: rgbToHex(solid),
+      brandHover: rgbToHex(hover),
+      brandSoft: tint(dark ? 0.16 : 0.12),
+      ring: tint(0.45),
+      inkInverse: textOn(solid, src.colors.inkInverse)
+    }
+  });
+}
+const STUDIO_BRANDS = ["#00bcff", "#7c5cff", "#ff5ca8", "#ff6b3d", "#f0b35a", "#c6ff3d", "#39e58c", "#2dd4bf"];
+const STUDIO_CORNERS = {
+  sharp: { radiusControl: 3, radiusCard: 6 },
+  default: {},
+  round: { radiusControl: 12, radiusCard: 22 }
+};
+const STUDIO_SIZES = {
+  compact: { controlSm: 28, controlMd: 34, controlLg: 40 },
+  default: {},
+  comfortable: { controlSm: 36, controlMd: 42, controlLg: 48 }
+};
+const STUDIO_MOTION = { fast: 0.6, normal: 1, slow: 1.8 };
+const STUDIO_SYSTEM = "system";
+const DURATIONS = ["--duration-fast", "--duration-medium", "--duration-slow"];
+const studios = /* @__PURE__ */ new Map();
+function useThemeStudio(options = {}) {
+  const key = options.storageKey ?? "lp-theme-studio";
+  let entry = studios.get(key);
+  if (!entry) {
+    const config = shallowRef({});
+    entry = { config, studio: create(key, config) };
+    studios.set(key, entry);
+  }
+  const { themes, system } = entry.config.value;
+  if (!themes && options.themes || !system && options.system) {
+    entry.config.value = { themes: themes ?? options.themes, system: system ?? options.system };
+  }
+  return entry.studio;
+}
+function create(key, config) {
+  const themes = computed(() => config.value.themes?.length ? config.value.themes : Object.values(presets));
+  const system = computed(() => {
+    const pair = config.value.system;
+    const light = pair && themes.value.find((t) => t.name === pair.light);
+    const dark = pair && themes.value.find((t) => t.name === pair.dark);
+    return light && dark ? { light, dark } : null;
+  });
+  const prefersDark = ref(typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches);
+  if (typeof window !== "undefined") {
+    window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", (e) => prefersDark.value = e.matches);
+  }
+  const engine = useTheme();
+  const defaults = () => ({
+    theme: engine.currentName.value || themes.value[0]?.name || "",
+    brand: null,
+    corners: "default",
+    size: "default",
+    motion: "normal"
+  });
+  const initial = defaults();
+  const state = usePersisted(key, initial, {
+    validate: (v) => !!v && typeof v === "object" && typeof v.theme === "string"
+  });
+  const base = (s) => {
+    if (s.theme === STUDIO_SYSTEM && system.value) return prefersDark.value ? system.value.dark : system.value.light;
+    return themes.value.find((t) => t.name === s.theme) ?? themes.value[0];
+  };
+  function build(s) {
+    const shaped = defineTheme(base(s), { shape: STUDIO_CORNERS[s.corners], density: STUDIO_SIZES[s.size] });
+    return s.brand ? withBrand(shaped, s.brand) : shaped;
+  }
+  const theme = computed(() => build(state.value));
+  if (state.value.theme !== initial.theme || state.value.brand || state.value.corners !== "default" || state.value.size !== "default") {
+    engine.apply(theme.value);
+  }
+  function pickTheme(name, origin) {
+    if (name === state.value.theme) return;
+    state.value = { ...state.value, theme: name };
+    engine.setTheme(theme.value, origin);
+  }
+  function tune(patch) {
+    state.value = { ...state.value, ...patch };
+  }
+  function reset(origin) {
+    state.value = { ...initial };
+    engine.setTheme(theme.value, origin);
+  }
+  watch(
+    () => `${state.value.brand}|${state.value.corners}|${state.value.size}`,
+    () => engine.apply(theme.value)
+  );
+  watch(prefersDark, () => {
+    if (state.value.theme === STUDIO_SYSTEM) engine.setTheme(theme.value);
+  });
+  watch(system, () => {
+    if (state.value.theme === STUDIO_SYSTEM) engine.apply(theme.value);
+  });
+  const brand = computed({
+    get: () => state.value.brand ?? base(state.value).colors.brand,
+    set: (value) => tune({ brand: value })
+  });
+  const changed = computed(() => JSON.stringify(state.value) !== JSON.stringify(initial));
+  if (typeof document !== "undefined") {
+    watchEffect(() => {
+      const scale = STUDIO_MOTION[state.value.motion ?? "normal"];
+      const root = document.documentElement;
+      for (const name of DURATIONS) root.style.removeProperty(name);
+      if (scale === 1) return;
+      const style = getComputedStyle(root);
+      for (const name of DURATIONS) {
+        const ms = parseFloat(style.getPropertyValue(name));
+        if (Number.isFinite(ms)) root.style.setProperty(name, `${Math.round(ms * scale)}ms`);
+      }
+    });
+  }
+  const exported = computed(() => {
+    const s = state.value;
+    const preset = Object.entries(presets).find(([, p]) => p.name === base(s).name)?.[0];
+    const source = preset ? `"${preset}"` : "yourTheme";
+    const overrides = [];
+    if (s.corners !== "default") overrides.push(`shape: ${JSON.stringify(STUDIO_CORNERS[s.corners])}`);
+    if (s.size !== "default") overrides.push(`density: ${JSON.stringify(STUDIO_SIZES[s.size])}`);
+    const shaped = overrides.length ? `defineTheme(${source}, { ${overrides.join(", ")} })` : source;
+    const code = s.brand ? `withBrand(${shaped}, "${s.brand}")` : overrides.length ? shaped : preset ? `presets.${preset}` : source;
+    return { code, json: serializeTheme(theme.value), css: themeToCssRule(theme.value) };
+  });
+  return { state, themes, system, theme, brand, changed, exported, pickTheme, tune, reset };
+}
+const _hoisted_1 = { class: "flex flex-col gap-4" };
+const _hoisted_2 = { class: "flex items-center justify-between" };
+const _hoisted_3 = { class: "text-sm font-semibold text-ink" };
+const _hoisted_4 = { class: "grid grid-cols-4 gap-2" };
+const _hoisted_5 = ["aria-pressed"];
+const _hoisted_6 = { class: "max-w-full truncate" };
+const _hoisted_7 = ["aria-pressed", "onClick"];
+const _hoisted_8 = { class: "max-w-full truncate" };
+const _hoisted_9 = { class: "flex flex-wrap items-center gap-1.5" };
+const _hoisted_10 = ["aria-label", "aria-pressed", "onClick"];
+const _hoisted_11 = {
+  key: 5,
+  class: "flex flex-col gap-2 border-t border-line pt-3"
+};
+const _hoisted_12 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_13 = { class: "text-[11px] font-medium tracking-wide text-muted uppercase" };
+const TILE = "flex min-w-0 flex-col items-center gap-1 rounded-control p-1.5 text-[11px] text-muted transition-colors duration-(--duration-fast) hover:bg-surface-soft hover:text-ink";
+const SWATCH = "relative size-8 overflow-hidden rounded-full ring-2 transition-[box-shadow] duration-(--duration-fast)";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpThemeStudio",
+  props: {
+    studio: {},
+    themes: {},
+    storageKey: {},
+    brands: {},
+    hide: {},
+    labels: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const studio = props.studio ?? useThemeStudio({ themes: props.themes, storageKey: props.storageKey });
+    const { state, brand, changed, exported } = studio;
+    const setBrand = (color) => brand.value = color;
+    const text = useLabels(
+      "themeStudio",
+      {
+        title: "Theme",
+        reset: "Reset",
+        themes: "Theme",
+        system: "System",
+        brand: "Brand colour",
+        anyBrand: "Any brand colour",
+        corners: "Corners",
+        sharp: "Sharp",
+        round: "Round",
+        size: "Control size",
+        compact: "Compact",
+        comfortable: "Roomy",
+        motion: "Motion",
+        fast: "Fast",
+        normal: "Normal",
+        slow: "Slow",
+        default: "Default",
+        export: "Use this theme"
+      },
+      () => props.labels
+    );
+    const shows = (part) => !props.hide?.includes(part);
+    const swatches = computed(() => props.brands ?? STUDIO_BRANDS);
+    const format = ref("code");
+    function origin(event) {
+      const r = event.currentTarget?.getBoundingClientRect();
+      return r ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : void 0;
+    }
+    const tuneTo = (key) => (value) => studio.tune({ [key]: value });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("p", _hoisted_3, toDisplayString(unref(text).title), 1),
+          unref(changed) ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            variant: "ghost",
+            size: "xs",
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(studio).reset(origin($event)))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:rotate-ccw",
+                size: 12
+              }),
+              createTextVNode(toDisplayString(unref(text).reset), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        renderSlot(_ctx.$slots, "start", { studio: unref(studio) }),
+        shows("themes") ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 0,
+          label: unref(text).themes
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4, [
+              unref(studio).system.value ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: normalizeClass([TILE, unref(state).theme === unref(STUDIO_SYSTEM) && "bg-surface-soft text-ink"]),
+                "aria-pressed": unref(state).theme === unref(STUDIO_SYSTEM),
+                onClick: _cache[1] || (_cache[1] = ($event) => unref(studio).pickTheme(unref(STUDIO_SYSTEM), origin($event)))
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass([SWATCH, unref(state).theme === unref(STUDIO_SYSTEM) ? "ring-brand" : "ring-line"]),
+                  style: normalizeStyle({ background: `linear-gradient(135deg, ${unref(studio).system.value.light.colors.surface} 50%, ${unref(studio).system.value.dark.colors.surface} 50%)` })
+                }, null, 6),
+                createElementVNode("span", _hoisted_6, toDisplayString(unref(text).system), 1)
+              ], 10, _hoisted_5)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(studio).themes.value, (t) => {
+                return openBlock(), createElementBlock("button", {
+                  key: t.name,
+                  type: "button",
+                  class: normalizeClass([TILE, unref(state).theme === t.name && "bg-surface-soft text-ink"]),
+                  "aria-pressed": unref(state).theme === t.name,
+                  onClick: ($event) => unref(studio).pickTheme(t.name, origin($event))
+                }, [
+                  createElementVNode("span", {
+                    class: normalizeClass([SWATCH, unref(state).theme === t.name ? "ring-brand" : "ring-line"]),
+                    style: normalizeStyle({ background: t.colors.surface })
+                  }, [
+                    createElementVNode("span", {
+                      class: "absolute inset-x-0 bottom-0 h-1/2",
+                      style: normalizeStyle({ background: t.colors.brand })
+                    }, null, 4)
+                  ], 6),
+                  createElementVNode("span", _hoisted_8, toDisplayString(t.name), 1)
+                ], 10, _hoisted_7);
+              }), 128))
+            ])
+          ]),
+          _: 1
+        }, 8, ["label"])) : createCommentVNode("", true),
+        shows("brand") ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 1,
+          label: unref(text).brand
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_9, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(swatches.value, (color) => {
+                return openBlock(), createElementBlock("button", {
+                  key: color,
+                  type: "button",
+                  class: normalizeClass(["size-6 rounded-full ring-2 ring-offset-2 ring-offset-surface-raised transition-[box-shadow,scale] duration-(--duration-fast) hover:scale-110", unref(brand) === color ? "ring-ink" : "ring-transparent"]),
+                  style: normalizeStyle({ background: color }),
+                  "aria-label": `${unref(text).brand} ${color}`,
+                  "aria-pressed": unref(brand) === color,
+                  onClick: ($event) => setBrand(color)
+                }, null, 14, _hoisted_10);
+              }), 128)),
+              createVNode(_sfc_main$4, {
+                "model-value": unref(brand),
+                size: "sm",
+                "aria-label": unref(text).anyBrand,
+                "onUpdate:modelValue": setBrand
+              }, null, 8, ["model-value", "aria-label"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["label"])) : createCommentVNode("", true),
+        shows("corners") ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 2,
+          label: unref(text).corners
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$5, {
+              "model-value": unref(state).corners,
+              size: "sm",
+              options: [{ value: "sharp", label: unref(text).sharp }, { value: "default", label: unref(text).default }, { value: "round", label: unref(text).round }],
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tuneTo("corners"))
+            }, null, 8, ["model-value", "options"])
+          ]),
+          _: 1
+        }, 8, ["label"])) : createCommentVNode("", true),
+        shows("size") ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 3,
+          label: unref(text).size
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$5, {
+              "model-value": unref(state).size,
+              size: "sm",
+              options: [{ value: "compact", label: unref(text).compact }, { value: "default", label: unref(text).default }, { value: "comfortable", label: unref(text).comfortable }],
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => tuneTo("size"))
+            }, null, 8, ["model-value", "options"])
+          ]),
+          _: 1
+        }, 8, ["label"])) : createCommentVNode("", true),
+        shows("motion") ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 4,
+          label: unref(text).motion
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$5, {
+              "model-value": unref(state).motion,
+              size: "sm",
+              options: [{ value: "fast", label: unref(text).fast }, { value: "normal", label: unref(text).normal }, { value: "slow", label: unref(text).slow }],
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tuneTo("motion"))
+            }, null, 8, ["model-value", "options"])
+          ]),
+          _: 1
+        }, 8, ["label"])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "end", { studio: unref(studio) }),
+        shows("export") ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("span", _hoisted_13, toDisplayString(unref(text).export), 1),
+            createVNode(_sfc_main$5, {
+              modelValue: format.value,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => format.value = $event),
+              size: "sm",
+              options: [{ value: "code", label: "Code" }, { value: "json", label: "JSON" }, { value: "css", label: "CSS" }]
+            }, null, 8, ["modelValue"])
+          ]),
+          createVNode(_sfc_main$6, {
+            "model-value": unref(exported)[format.value],
+            lang: format.value === "json" ? "json" : format.value === "css" ? "plain" : "ts",
+            copyable: "",
+            height: "140px",
+            class: "text-[11px]"
+          }, null, 8, ["model-value", "lang"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  STUDIO_SYSTEM as S,
+  _sfc_main as _,
+  STUDIO_BRANDS as a,
+  STUDIO_CORNERS as b,
+  STUDIO_MOTION as c,
+  STUDIO_SIZES as d,
+  defineTheme as e,
+  useThemeStudio as u,
+  withBrand as w
+};

package/dist/chunks/LpThemeStudioSection-BwhqYDLf.js

@@ -0,0 +1,20 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot } from "vue";
+const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_2 = { class: "text-[11px] font-medium tracking-wide text-muted uppercase" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpThemeStudioSection",
+  props: {
+    label: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1),
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};