@leavepulse/ui 0.12.0 → 0.14.6

package/dist/chunks/LpTextarea-CRAkhemZ.js

@@ -0,0 +1,44 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode } from "vue";
+import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
+const _hoisted_1 = ["value", "placeholder", "rows", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTextarea",
+  props: {
+    modelValue: {},
+    placeholder: {},
+    rows: {},
+    invalid: { type: Boolean },
+    disabled: { type: Boolean },
+    label: {},
+    hint: {},
+    error: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const hasField = computed(() => !!props.label || !!props.hint || !!props.error);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(hasField.value ? _sfc_main$1 : "div"), {
+        label: hasField.value ? __props.label : void 0,
+        hint: hasField.value ? __props.hint : void 0,
+        error: hasField.value ? __props.error : void 0,
+        class: normalizeClass(hasField.value ? void 0 : "contents")
+      }, {
+        default: withCtx(() => [
+          createElementVNode("textarea", {
+            value: __props.modelValue,
+            placeholder: __props.placeholder,
+            rows: __props.rows ?? 4,
+            disabled: __props.disabled,
+            class: normalizeClass(["w-full resize-y rounded-control border bg-surface-soft px-3 py-2 text-sm text-ink outline-none transition-colors duration-[var(--duration-fast)] placeholder:text-muted focus:border-brand focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-55", __props.invalid || __props.error ? "border-danger focus:border-danger focus:ring-danger-soft" : "border-line"]),
+            onInput: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.value))
+          }, null, 42, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["label", "hint", "error", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpThemeSwitcher-BgWwfkxs.js

@@ -0,0 +1,601 @@
+import { computed, readonly, shallowRef, defineComponent, onMounted, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, normalizeStyle, createVNode, toDisplayString, createCommentVNode } from "vue";
+import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+const sharedShape = { radiusControl: 8, radiusCard: 14, radiusPill: 9999 };
+const sharedDensity = { spacingUnit: 4, controlSm: 32, controlMd: 38, controlLg: 44 };
+const interFont = {
+  sans: '"Inter", "Segoe UI", system-ui, sans-serif',
+  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace'
+};
+const dark = {
+  name: "Dark",
+  mode: "dark",
+  colors: {
+    surface: "#080b0d",
+    surfaceRaised: "#12171d",
+    surfaceSoft: "#172027",
+    ink: "#eef5f1",
+    inkInverse: "#06100b",
+    muted: "#9aa8a2",
+    mutedStrong: "#c7d2cc",
+    brand: "#00bcff",
+    brandHover: "#19c6ff",
+    brandSoft: "rgba(0, 188, 255, 0.16)",
+    action: "#39e58c",
+    actionHover: "#4dffa1",
+    accent: "#f0b35a",
+    danger: "#ff6f6f",
+    dangerHover: "#ff8585",
+    dangerSoft: "rgba(255, 111, 111, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(255, 255, 255, 0.18)",
+    ring: "rgba(0, 188, 255, 0.45)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const light = {
+  name: "Light",
+  mode: "light",
+  colors: {
+    surface: "#f6f8f7",
+    surfaceRaised: "#ffffff",
+    surfaceSoft: "#eceff0",
+    ink: "#0d1714",
+    inkInverse: "#f8fff9",
+    muted: "#5d6b65",
+    mutedStrong: "#34433d",
+    brand: "#0086c7",
+    brandHover: "#0095db",
+    brandSoft: "rgba(0, 134, 199, 0.12)",
+    action: "#1f9d5f",
+    actionHover: "#23b06b",
+    accent: "#aa6f1d",
+    danger: "#c2333b",
+    dangerHover: "#d23b44",
+    dangerSoft: "rgba(194, 51, 59, 0.12)",
+    line: "rgba(13, 23, 20, 0.12)",
+    lineStrong: "rgba(13, 23, 20, 0.22)",
+    ring: "rgba(0, 134, 199, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const lime = {
+  name: "Lime",
+  mode: "dark",
+  colors: {
+    surface: "#050505",
+    surfaceRaised: "#0c0d0a",
+    surfaceSoft: "#14160f",
+    ink: "#f4f7ee",
+    inkInverse: "#0a0c05",
+    muted: "#8b8f80",
+    mutedStrong: "#c3c8b6",
+    brand: "#c4f042",
+    brandHover: "#d2ff5c",
+    brandSoft: "rgba(196, 240, 66, 0.14)",
+    action: "#5fd97a",
+    actionHover: "#74e88d",
+    accent: "#ffb84d",
+    danger: "#ff6f6f",
+    dangerHover: "#ff8585",
+    dangerSoft: "rgba(255, 111, 111, 0.14)",
+    line: "rgba(255, 255, 255, 0.08)",
+    lineStrong: "rgba(196, 240, 66, 0.3)",
+    ring: "rgba(196, 240, 66, 0.4)"
+  },
+  // a sharper theme — overrides the shape axis too
+  shape: { radiusControl: 4, radiusCard: 6, radiusPill: 4 },
+  density: { ...sharedDensity },
+  // a distinct typeface so the theme has its own voice (not just colour)
+  font: {
+    sans: '"Space Grotesk", "Inter", system-ui, sans-serif',
+    mono: '"IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace'
+  }
+};
+const glassSurface = {
+  borderWidth: "1px",
+  panelBlur: "10px",
+  panelSaturate: "120%",
+  panelOverlay: "linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01))",
+  panelShadow: "0 20px 60px rgba(0, 0, 0, 0.35)",
+  panelInset: "inset 0 1px 0 rgba(255, 255, 255, 0.08)"
+};
+const leavepulse = {
+  name: "LeavePulse",
+  mode: "dark",
+  colors: {
+    surface: "#020618",
+    surfaceRaised: "#0b1222",
+    surfaceSoft: "rgba(11, 18, 34, 0.7)",
+    ink: "#f3f6ff",
+    inkInverse: "#0b1222",
+    muted: "#94a3bf",
+    mutedStrong: "#cad5e2",
+    brand: "#00bcff",
+    brandHover: "#19c3ff",
+    brandSoft: "rgba(0, 188, 255, 0.2)",
+    action: "#44c2ad",
+    actionHover: "#56d3be",
+    accent: "#d36a2c",
+    danger: "#f87171",
+    dangerHover: "#fca5a5",
+    dangerSoft: "rgba(248, 113, 113, 0.14)",
+    line: "#1c2740",
+    lineStrong: "rgba(255, 255, 255, 0.15)",
+    ring: "rgba(0, 188, 255, 0.35)"
+  },
+  shape: { ...sharedShape, radiusControl: 12 },
+  density: { ...sharedDensity },
+  font: {
+    sans: '"Inter", "IBM Plex Sans", "Segoe UI", sans-serif',
+    mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace'
+  },
+  surface: glassSurface
+};
+const rose = {
+  name: "Rose",
+  mode: "dark",
+  colors: {
+    surface: "#120a0d",
+    surfaceRaised: "#1c1014",
+    surfaceSoft: "#26161b",
+    ink: "#fdeef1",
+    inkInverse: "#1a0d11",
+    muted: "#a98a92",
+    mutedStrong: "#d8c0c6",
+    brand: "#fb7185",
+    brandHover: "#fd8a9b",
+    brandSoft: "rgba(251, 113, 133, 0.14)",
+    action: "#34d399",
+    actionHover: "#4adeaa",
+    accent: "#fbbf24",
+    danger: "#ef4444",
+    dangerHover: "#f56565",
+    dangerSoft: "rgba(239, 68, 68, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(251, 113, 133, 0.3)",
+    ring: "rgba(251, 113, 133, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const amber = {
+  name: "Amber",
+  mode: "dark",
+  colors: {
+    surface: "#0f0b06",
+    surfaceRaised: "#1a130a",
+    surfaceSoft: "#241a0e",
+    ink: "#fdf3e6",
+    inkInverse: "#1a1206",
+    muted: "#a3927a",
+    mutedStrong: "#d6c6ad",
+    brand: "#f59e0b",
+    brandHover: "#fbb024",
+    brandSoft: "rgba(245, 158, 11, 0.14)",
+    action: "#4ade80",
+    actionHover: "#5cea90",
+    accent: "#38bdf8",
+    danger: "#f87171",
+    dangerHover: "#fa8a8a",
+    dangerSoft: "rgba(248, 113, 113, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(245, 158, 11, 0.3)",
+    ring: "rgba(245, 158, 11, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const violet = {
+  name: "Violet",
+  mode: "dark",
+  colors: {
+    surface: "#0c0a14",
+    surfaceRaised: "#15111f",
+    surfaceSoft: "#1d1729",
+    ink: "#f1eefb",
+    inkInverse: "#100b1a",
+    muted: "#948aa9",
+    mutedStrong: "#c6bedb",
+    brand: "#a78bfa",
+    brandHover: "#b69dfc",
+    brandSoft: "rgba(167, 139, 250, 0.14)",
+    action: "#34d399",
+    actionHover: "#4adeaa",
+    accent: "#fbbf24",
+    danger: "#f87171",
+    dangerHover: "#fa8a8a",
+    dangerSoft: "rgba(248, 113, 113, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(167, 139, 250, 0.3)",
+    ring: "rgba(167, 139, 250, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const nord = {
+  name: "Nord",
+  mode: "dark",
+  colors: {
+    surface: "#2e3440",
+    surfaceRaised: "#3b4252",
+    surfaceSoft: "#434c5e",
+    ink: "#eceff4",
+    inkInverse: "#2e3440",
+    muted: "#9aa4b8",
+    mutedStrong: "#d8dee9",
+    brand: "#88c0d0",
+    brandHover: "#9bccd9",
+    brandSoft: "rgba(136, 192, 208, 0.16)",
+    action: "#a3be8c",
+    actionHover: "#b3cb9f",
+    accent: "#ebcb8b",
+    danger: "#bf616a",
+    dangerHover: "#cb727b",
+    dangerSoft: "rgba(191, 97, 106, 0.16)",
+    line: "rgba(236, 239, 244, 0.1)",
+    lineStrong: "rgba(136, 192, 208, 0.35)",
+    ring: "rgba(136, 192, 208, 0.45)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const presets = { dark, light, lime, leavepulse, rose, amber, violet, nord };
+const COLOR_VARS = {
+  surface: "--color-surface",
+  surfaceRaised: "--color-surface-raised",
+  surfaceSoft: "--color-surface-soft",
+  ink: "--color-ink",
+  inkInverse: "--color-ink-inverse",
+  muted: "--color-muted",
+  mutedStrong: "--color-muted-strong",
+  brand: "--color-brand",
+  brandHover: "--color-brand-hover",
+  brandSoft: "--color-brand-soft",
+  action: "--color-action",
+  actionHover: "--color-action-hover",
+  accent: "--color-accent",
+  danger: "--color-danger",
+  dangerHover: "--color-danger-hover",
+  dangerSoft: "--color-danger-soft",
+  line: "--color-line",
+  lineStrong: "--color-line-strong",
+  ring: "--color-ring"
+};
+const SHAPE_VARS = {
+  radiusControl: "--radius-control",
+  radiusCard: "--radius-card",
+  radiusPill: "--radius-pill"
+};
+const DENSITY_VARS = {
+  spacingUnit: "--spacing-unit",
+  controlSm: "--size-control-sm",
+  controlMd: "--size-control-md",
+  controlLg: "--size-control-lg"
+};
+const FONT_VARS = {
+  sans: "--font-sans",
+  mono: "--font-mono"
+};
+const SURFACE_VARS = {
+  borderWidth: "--surface-border-width",
+  panelBlur: "--surface-panel-blur",
+  panelSaturate: "--surface-panel-saturate",
+  panelOverlay: "--surface-panel-overlay",
+  panelShadow: "--surface-panel-shadow",
+  panelInset: "--surface-panel-inset"
+};
+const DEFAULT_SURFACE = {
+  borderWidth: "1px",
+  panelBlur: "0px",
+  panelSaturate: "100%",
+  panelOverlay: "none",
+  panelShadow: "0 1px 2px rgba(0, 0, 0, 0.18)",
+  panelInset: "0 0 0 0 transparent"
+};
+const CACHE_KEY = "leavepulse-ui-theme";
+const _current = shallowRef(null);
+let _hydrated = false;
+let _fallback = null;
+function hydrateOnce() {
+  if (_hydrated || typeof window === "undefined") return;
+  _hydrated = true;
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (cached) {
+      _current.value = parseTheme(cached);
+      applyTheme(_current.value);
+      return;
+    }
+  } catch {
+  }
+  if (_fallback) {
+    _current.value = _fallback;
+    applyTheme(_fallback);
+  }
+}
+function applyTheme(theme, root = document.documentElement) {
+  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
+    root.style.setProperty(cssVar, theme.colors[key]);
+  }
+  for (const [key, cssVar] of Object.entries(SHAPE_VARS)) {
+    root.style.setProperty(cssVar, `${theme.shape[key]}px`);
+  }
+  for (const [key, cssVar] of Object.entries(DENSITY_VARS)) {
+    root.style.setProperty(cssVar, `${theme.density[key]}px`);
+  }
+  for (const [key, cssVar] of Object.entries(FONT_VARS)) {
+    root.style.setProperty(cssVar, theme.font[key]);
+  }
+  const surface = theme.surface ?? DEFAULT_SURFACE;
+  for (const [key, cssVar] of Object.entries(SURFACE_VARS)) {
+    root.style.setProperty(cssVar, surface[key]);
+  }
+  root.dataset.themeMode = theme.mode;
+  root.style.colorScheme = theme.mode;
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
+  const doc = document;
+  if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
+    applyTheme(theme, root);
+    return;
+  }
+  const x = origin?.x ?? window.innerWidth / 2;
+  const y = origin?.y ?? window.innerHeight / 2;
+  const endRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y)
+  );
+  const transition = doc.startViewTransition(() => applyTheme(theme, root));
+  transition.ready.then(() => {
+    root.animate(
+      {
+        clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`]
+      },
+      {
+        duration: durationMs,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+        // Hold the fully-shrunk circle after the keyframes end. Without it the
+        // old snapshot snaps back to its default (un-clipped) state for the one
+        // frame between animation-end and the browser tearing down the
+        // view-transition pseudo-elements — that flash is the old theme
+        // "blinking" at the very end.
+        fill: "forwards",
+        pseudoElement: "::view-transition-old(root)"
+      }
+    );
+  });
+}
+function serializeTheme(theme) {
+  return JSON.stringify(theme);
+}
+function themeToCssVars(theme) {
+  const decls = [];
+  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
+    decls.push(`${cssVar}: ${theme.colors[key]}`);
+  }
+  for (const [key, cssVar] of Object.entries(SHAPE_VARS)) {
+    decls.push(`${cssVar}: ${theme.shape[key]}px`);
+  }
+  for (const [key, cssVar] of Object.entries(DENSITY_VARS)) {
+    decls.push(`${cssVar}: ${theme.density[key]}px`);
+  }
+  for (const [key, cssVar] of Object.entries(FONT_VARS)) {
+    decls.push(`${cssVar}: ${theme.font[key]}`);
+  }
+  const surface = theme.surface ?? DEFAULT_SURFACE;
+  for (const [key, cssVar] of Object.entries(SURFACE_VARS)) {
+    decls.push(`${cssVar}: ${surface[key]}`);
+  }
+  return decls.join("; ");
+}
+function themeToCssRule(theme, selector = ":root") {
+  return `${selector} { color-scheme: ${theme.mode}; ${themeToCssVars(theme)}; }`;
+}
+const DEFAULT_FONT = {
+  sans: '"Inter", "Segoe UI", system-ui, sans-serif',
+  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace'
+};
+function parseTheme(json) {
+  const raw = JSON.parse(json);
+  if (!raw || typeof raw !== "object" || !raw.colors || !raw.shape || !raw.density) {
+    throw new Error("Invalid theme: missing colors/shape/density");
+  }
+  return { ...raw, font: raw.font ?? DEFAULT_FONT };
+}
+function bootstrapTheme(fallback) {
+  let theme = fallback;
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (cached) theme = parseTheme(cached);
+  } catch {
+  }
+  applyTheme(theme);
+  return theme;
+}
+function cacheTheme(theme) {
+  try {
+    localStorage.setItem(CACHE_KEY, serializeTheme(theme));
+  } catch {
+  }
+}
+function useTheme() {
+  hydrateOnce();
+  const setTheme = (theme, origin) => {
+    if (origin) applyThemeWithTransition(theme, origin);
+    else applyThemeWithTransition(theme);
+    cacheTheme(theme);
+    _current.value = theme;
+  };
+  return {
+    current: readonly(_current),
+    currentName: computed(() => _current.value?.name ?? ""),
+    setTheme,
+    init: (fallback) => {
+      _fallback = fallback;
+      if (!_hydrated) hydrateOnce();
+      if (!_current.value) {
+        _current.value = bootstrapTheme(fallback);
+      }
+      return _current.value;
+    },
+    apply: (theme) => {
+      applyTheme(theme);
+      cacheTheme(theme);
+      _current.value = theme;
+    },
+    /**
+     * Apply + cache a theme with the circular reveal animation. Pass the click
+     * point (e.g. from a toggle's `event`) as `origin` so the circle grows from
+     * the button; omit it to reveal from the viewport centre.
+     */
+    applyWithTransition: (theme, origin) => {
+      applyThemeWithTransition(theme, origin);
+      cacheTheme(theme);
+      _current.value = theme;
+    },
+    serialize: serializeTheme,
+    parse: parseTheme,
+    bootstrap: bootstrapTheme
+  };
+}
+const _hoisted_1 = ["aria-label", "title"];
+const _hoisted_2 = {
+  key: 2,
+  class: "text-sm font-medium"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpThemeSwitcher",
+  props: {
+    modelValue: {},
+    themes: {},
+    variant: { default: "swatch" },
+    showLabel: { type: Boolean },
+    default: {},
+    transition: { type: Boolean, default: true },
+    size: { default: "md" },
+    "aria-label": {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const theme = useTheme();
+    const list = computed(
+      () => props.themes && props.themes.length ? props.themes : Object.values(presets)
+    );
+    const activeName = computed(
+      () => props.modelValue ?? (theme.currentName.value || list.value[0]?.name || "")
+    );
+    const active = computed(
+      () => list.value.find((t) => t.name === activeName.value) ?? list.value[0]
+    );
+    onMounted(() => {
+      if (props.default == null) return;
+      const fallback = typeof props.default === "string" ? list.value.find((t) => t.name === props.default) : props.default;
+      if (fallback) theme.init(fallback);
+    });
+    const SIZES = { sm: "size-7", md: "size-8", lg: "size-9" };
+    const ICON_SIZE = { sm: 15, md: 16, lg: 18 };
+    const wantsLabel = computed(() => props.showLabel || props.variant === "pill");
+    const bareIcon = computed(() => props.variant === "icon" && !wantsLabel.value);
+    function applyTheme2(t, ev) {
+      if (props.transition) {
+        theme.setTheme(t, ev ? { x: ev.clientX, y: ev.clientY } : void 0);
+      } else {
+        theme.apply(t);
+      }
+      emit("update:modelValue", t.name);
+      emit("change", t);
+    }
+    function cycle(ev) {
+      const arr = list.value;
+      if (!arr.length) return;
+      const i = arr.findIndex((t) => t.name === activeName.value);
+      const next = arr[(i + 1) % arr.length];
+      if (next) applyTheme2(next, ev);
+    }
+    const menu = computed(
+      () => list.value.map((t) => ({
+        label: t.name,
+        icon: t.name === activeName.value ? "lucide:check" : t.mode === "dark" ? "lucide:moon" : "lucide:sun",
+        onSelect: () => applyTheme2(t)
+      }))
+    );
+    const triggerLabel = computed(
+      () => props["aria-label"] ?? `Theme: ${activeName.value}. Click to switch, right-click to choose.`
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, { items: menu.value }, {
+        default: withCtx(() => [
+          createElementVNode("button", {
+            type: "button",
+            "aria-label": triggerLabel.value,
+            title: triggerLabel.value,
+            class: normalizeClass([
+              "inline-flex items-center justify-center gap-2 rounded-control outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+              bareIcon.value ? [SIZES[__props.size], "text-muted hover:bg-surface-soft hover:text-ink"] : [
+                "border border-line bg-surface-raised px-1.5 text-ink hover:border-line-strong",
+                wantsLabel.value ? "py-1 pr-2.5" : ""
+              ]
+            ]),
+            onClick: cycle
+          }, [
+            __props.variant !== "icon" ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(["grid shrink-0 place-items-center rounded-control border border-line/60", SIZES[__props.size]]),
+              style: normalizeStyle({ background: active.value?.colors.surface })
+            }, [
+              createElementVNode("span", {
+                class: "size-3 rounded-full",
+                style: normalizeStyle({ background: active.value?.colors.brand })
+              }, null, 4)
+            ], 6)) : (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: normalizeClass(["grid shrink-0 place-items-center", SIZES[__props.size]])
+            }, [
+              createVNode(_sfc_main$2, {
+                name: active.value?.mode === "dark" ? "lucide:moon" : "lucide:sun",
+                size: ICON_SIZE[__props.size]
+              }, null, 8, ["name", "size"])
+            ], 2)),
+            wantsLabel.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(activeName.value), 1)) : createCommentVNode("", true)
+          ], 10, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["items"]);
+    };
+  }
+});
+export {
+  DEFAULT_SURFACE as D,
+  _sfc_main as _,
+  parseTheme as a,
+  amber as b,
+  applyTheme as c,
+  applyThemeWithTransition as d,
+  bootstrapTheme as e,
+  dark as f,
+  light as g,
+  lime as h,
+  themeToCssVars as i,
+  leavepulse as l,
+  nord as n,
+  presets as p,
+  rose as r,
+  serializeTheme as s,
+  themeToCssRule as t,
+  useTheme as u,
+  violet as v
+};

package/dist/chunks/LpTilt-DuyKbpkA.js

@@ -0,0 +1,49 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, unref, renderSlot, createCommentVNode } from "vue";
+import { useTilt } from "../composables/useTilt.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTilt",
+  props: {
+    max: { default: 10 },
+    lift: { default: 8 },
+    scale: { default: 1.03 },
+    glare: { type: Boolean, default: false },
+    perspective: { default: 900 }
+  },
+  setup(__props) {
+    const props = __props;
+    const tilt = useTilt({
+      max: props.max,
+      lift: props.lift,
+      scale: props.scale,
+      glare: props.glare
+    });
+    const stageStyle = computed(() => ({ perspective: `${props.perspective}px` }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle(stageStyle.value),
+        class: "lp-tilt-stage"
+      }, [
+        createElementVNode("div", {
+          class: "lp-tilt-inner relative",
+          style: normalizeStyle(unref(tilt).style.value),
+          onPointermove: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => unref(tilt).onPointerMove && unref(tilt).onPointerMove(...args)),
+          onPointerenter: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => unref(tilt).onPointerEnter && unref(tilt).onPointerEnter(...args)),
+          onPointerleave: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => unref(tilt).onPointerLeave && unref(tilt).onPointerLeave(...args))
+        }, [
+          renderSlot(_ctx.$slots, "default"),
+          __props.glare ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "pointer-events-none absolute inset-0 rounded-[inherit] mix-blend-overlay",
+            style: normalizeStyle(unref(tilt).glareStyle.value)
+          }, null, 4)) : createCommentVNode("", true)
+        ], 36)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};