@warmio/ui 1.2.0 → 1.4.0

package/dist/chunks/chunk-HDCV4ACN.js

@@ -0,0 +1,469 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/flame-expression-video.tsx
+import { useRef } from "react";
+
+// ../ui/src/warmio/flame-expression-videos.ts
+var FLAME_EXPRESSION_VIDEO_PACK = "v4";
+var FLAME_EXPRESSION_VIDEO_IDS = ["NORMAL", "LUL", "POG", "CRY", "LOVE", "HYPE"];
+var LEGACY_MASCOT_MOOD_TO_EXPRESSION = {
+  calm: "NORMAL",
+  happy: "LUL",
+  focused: "NORMAL",
+  relieved: "LOVE",
+  /** @deprecated Use peekEyes="closed" on auth peek instead. */
+  "password-retry": "NORMAL",
+  frustrated: "CRY"
+};
+function isLegacyMascotMood(expression) {
+  return Object.hasOwn(LEGACY_MASCOT_MOOD_TO_EXPRESSION, expression);
+}
+function isFlameExpressionVideoId(expression) {
+  for (const id of FLAME_EXPRESSION_VIDEO_IDS) {
+    if (id === expression) return true;
+  }
+  return false;
+}
+function getFlameExpressionVideoSrc(expression, theme) {
+  return `/flame-expressions/${FLAME_EXPRESSION_VIDEO_PACK}/${expression}/open_${theme}.mp4`;
+}
+function getFlameMascotPeekVideoSrc(eyes, theme) {
+  return `/mascot/${eyes}_${theme}.mp4`;
+}
+function resolveFlameExpressionVideoId(expression) {
+  if (!expression) return "NORMAL";
+  if (isLegacyMascotMood(expression)) {
+    return LEGACY_MASCOT_MOOD_TO_EXPRESSION[expression];
+  }
+  if (isFlameExpressionVideoId(expression)) {
+    return expression;
+  }
+  return "NORMAL";
+}
+
+// ../ui/src/warmio/flame-expression-video.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LIGHT_KEY = 247;
+var DARK_KEY = 17;
+var HARD_KEY = 16;
+var SOFT_KEY = 42;
+function prefersReducedMotion() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function isDarkDocument() {
+  return document.documentElement.classList.contains("dark");
+}
+function pixelChannel(pixels, index) {
+  const value = pixels[index];
+  if (value === void 0) throw new Error("Canvas pixel data is unexpectedly sparse");
+  return value;
+}
+function isDarkForRoot(root) {
+  const theme = root.dataset["flameTheme"];
+  if (theme === "dark") return true;
+  if (theme === "light") return false;
+  return isDarkDocument();
+}
+function punchKeyedBackground(context, width, height, dark) {
+  const frame = context.getImageData(0, 0, width, height);
+  const pixels = frame.data;
+  const key = dark ? DARK_KEY : LIGHT_KEY;
+  for (let index = 0; index < pixels.length; index += 4) {
+    const red = pixelChannel(pixels, index);
+    const green = pixelChannel(pixels, index + 1);
+    const blue = pixelChannel(pixels, index + 2);
+    if (!dark) {
+      const minChannel = Math.min(red, green, blue);
+      if (minChannel > LIGHT_KEY) {
+        pixels[index] = 255;
+        pixels[index + 1] = 255;
+        pixels[index + 2] = 255;
+        pixels[index + 3] = 255;
+        continue;
+      }
+    }
+    const distance = Math.max(Math.abs(red - key), Math.abs(green - key), Math.abs(blue - key));
+    if (distance <= HARD_KEY) {
+      pixels[index + 3] = 0;
+      continue;
+    }
+    if (distance < SOFT_KEY) {
+      const alpha = pixelChannel(pixels, index + 3);
+      pixels[index + 3] = Math.round(alpha * ((distance - HARD_KEY) / (SOFT_KEY - HARD_KEY)));
+    }
+  }
+  context.putImageData(frame, 0, 0);
+}
+function syncCanvasSize(canvas, context) {
+  const cssSize = canvas.clientWidth;
+  if (cssSize === 0) return false;
+  const pixelRatio = Math.min(Math.max(window.devicePixelRatio || 1, 2), 3);
+  const nextSize = Math.max(1, Math.round(cssSize * pixelRatio));
+  if (canvas.width !== nextSize || canvas.height !== nextSize) {
+    canvas.width = nextSize;
+    canvas.height = nextSize;
+  }
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  return true;
+}
+function drawKeyedFrame(video, canvas, context, dark) {
+  if (!syncCanvasSize(canvas, context) || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+    return;
+  }
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  punchKeyedBackground(context, canvas.width, canvas.height, dark);
+}
+function sourceForTheme(video, dark) {
+  return dark ? video.dataset["darkSrc"] : video.dataset["lightSrc"];
+}
+function bindKeyedExpressionVideo(root) {
+  if (root.dataset["bound"] === "true") return () => void 0;
+  root.dataset["bound"] = "true";
+  const video = root.querySelector("[data-flame-expression-video-source]");
+  const canvas = root.querySelector("[data-flame-expression-video-frame]");
+  if (!video || !canvas) {
+    delete root.dataset["bound"];
+    return () => void 0;
+  }
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    root.hidden = true;
+    delete root.dataset["bound"];
+    return () => void 0;
+  }
+  let dark = isDarkForRoot(root);
+  let playing = false;
+  let visible = true;
+  let frameHandle = 0;
+  let lastVideoTime = -1;
+  const reducedMotion = prefersReducedMotion();
+  let loadedDataListener = null;
+  const drawFrame = () => {
+    const nextDark = isDarkForRoot(root);
+    if (nextDark !== dark) {
+      applyTheme(nextDark);
+      return;
+    }
+    drawKeyedFrame(video, canvas, context, dark);
+  };
+  const stopLoop = () => {
+    cancelAnimationFrame(frameHandle);
+    frameHandle = 0;
+    lastVideoTime = -1;
+  };
+  const loop = () => {
+    if (!playing || reducedMotion) return;
+    if (video.currentTime !== lastVideoTime) {
+      lastVideoTime = video.currentTime;
+      drawFrame();
+    }
+    frameHandle = requestAnimationFrame(loop);
+  };
+  const startLoop = () => {
+    if (playing || reducedMotion) {
+      drawFrame();
+      return;
+    }
+    playing = true;
+    void video.play().catch(() => void 0);
+    loop();
+  };
+  const pauseLoop = () => {
+    playing = false;
+    video.pause();
+    stopLoop();
+  };
+  const playWhenSized = () => {
+    if (root.clientWidth === 0) return;
+    drawFrame();
+    if (!visible || reducedMotion || playing) return;
+    startLoop();
+  };
+  const continueFrom = (resumeAt) => {
+    if (Number.isFinite(resumeAt) && resumeAt > 0) {
+      try {
+        video.currentTime = resumeAt;
+      } catch {
+      }
+    }
+    drawFrame();
+    if (visible && !reducedMotion) {
+      startLoop();
+    }
+  };
+  const waitForData = (resumeAt) => {
+    if (loadedDataListener) {
+      video.removeEventListener("loadeddata", loadedDataListener);
+    }
+    loadedDataListener = () => continueFrom(resumeAt);
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      loadedDataListener();
+      loadedDataListener = null;
+      return;
+    }
+    video.addEventListener("loadeddata", loadedDataListener, { once: true });
+    void video.play().catch(() => void 0);
+  };
+  const applyTheme = (nextDark) => {
+    const nextSrc = sourceForTheme(video, nextDark);
+    if (!nextSrc) return;
+    const resumeAt = video.currentTime;
+    dark = nextDark;
+    const assignedSrc = video.getAttribute("src");
+    const alreadyOnSource = video.networkState !== HTMLMediaElement.NETWORK_EMPTY && (video.dataset["activeSrc"] === nextSrc || assignedSrc === nextSrc);
+    if (alreadyOnSource) {
+      video.dataset["activeSrc"] = nextSrc;
+      waitForData(resumeAt);
+      return;
+    }
+    pauseLoop();
+    video.dataset["activeSrc"] = nextSrc;
+    video.src = nextSrc;
+    waitForData(resumeAt);
+  };
+  syncCanvasSize(canvas, context);
+  applyTheme(dark);
+  const visibility = new IntersectionObserver(
+    (entries) => {
+      visible = entries.some((entry) => entry.isIntersecting);
+      if (!visible) {
+        pauseLoop();
+        return;
+      }
+      if (reducedMotion) {
+        drawFrame();
+        return;
+      }
+      startLoop();
+    },
+    { threshold: 0 }
+  );
+  visibility.observe(root);
+  const resize = new ResizeObserver(playWhenSized);
+  resize.observe(root);
+  const themeObserver = new MutationObserver(() => {
+    const nextDark = isDarkForRoot(root);
+    if (nextDark === dark) return;
+    applyTheme(nextDark);
+  });
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+  const themeOverrideObserver = new MutationObserver(() => {
+    const nextDark = isDarkForRoot(root);
+    if (nextDark === dark) return;
+    applyTheme(nextDark);
+  });
+  themeOverrideObserver.observe(root, {
+    attributes: true,
+    attributeFilter: ["data-flame-theme"]
+  });
+  return () => {
+    visibility.disconnect();
+    resize.disconnect();
+    themeObserver.disconnect();
+    themeOverrideObserver.disconnect();
+    pauseLoop();
+    if (loadedDataListener) {
+      video.removeEventListener("loadeddata", loadedDataListener);
+    }
+    video.removeAttribute("src");
+    video.load();
+    delete video.dataset["activeSrc"];
+    delete root.dataset["bound"];
+  };
+}
+function readDomVideoTheme() {
+  if (typeof document === "undefined") return "light";
+  const mode = document.documentElement.getAttribute("data-theme-mode");
+  if (mode === "dark") return "dark";
+  if (mode === "light") return "light";
+  if (globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches) return "dark";
+  return "light";
+}
+function WarmFlameExpressionVideo({
+  expression: expressionProp = "NORMAL",
+  size = "default",
+  label = null,
+  theme: themeProp,
+  peekEyes
+}) {
+  const cleanupRef = useRef(void 0);
+  const expression = resolveFlameExpressionVideoId(expressionProp);
+  const videoTheme = themeProp ?? readDomVideoTheme();
+  const lightSrc = peekEyes ? getFlameMascotPeekVideoSrc(peekEyes, "light") : getFlameExpressionVideoSrc(expression, "light");
+  const darkSrc = peekEyes ? getFlameMascotPeekVideoSrc(peekEyes, "dark") : getFlameExpressionVideoSrc(expression, "dark");
+  const source = videoTheme === "dark" ? darkSrc : lightSrc;
+  const setRootRef = useRef(null);
+  if (setRootRef.current === null) {
+    setRootRef.current = (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = void 0;
+      if (!node) return;
+      cleanupRef.current = bindKeyedExpressionVideo(node);
+    };
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRootRef.current,
+      className: cn(
+        "warm-flame-expression-video",
+        "pointer-events-none inline-flex shrink-0 select-none"
+      ),
+      "data-slot": "warm-flame-expression-video",
+      "data-size": size,
+      "data-expression": expression,
+      "data-flame-peek-eyes": peekEyes,
+      "data-flame-theme": videoTheme,
+      role: label ? "img" : void 0,
+      "aria-label": label ?? void 0,
+      "aria-hidden": label ? void 0 : true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            className: "warm-flame-expression-video__source",
+            "data-flame-expression-video-source": "",
+            "data-light-src": lightSrc,
+            "data-dark-src": darkSrc,
+            src: source,
+            muted: true,
+            loop: true,
+            playsInline: true,
+            preload: "auto",
+            disablePictureInPicture: true,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("canvas", { className: "warm-flame-expression-video__frame", "data-flame-expression-video-frame": "" })
+      ]
+    }
+  );
+}
+
+// ../ui/src/warmio/logo.tsx
+import {
+  Logo,
+  WarmLogoIcon
+} from "@warmio/design/logo";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var brandedLogoShellClassNameBySize = {
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-14"
+};
+var brandedLogoIconClassNameBySize = {
+  sm: "size-5",
+  md: "size-6",
+  lg: "size-8"
+};
+var _WarmLogoGlyph = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593",
+      fill: "currentColor"
+    }
+  )
+] });
+function WarmBrandedLogoMark({
+  size = "md",
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center justify-center",
+        brandedLogoShellClassNameBySize[size],
+        className
+      ),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-0 scale-[1.35] opacity-90", children: /* @__PURE__ */ jsx2(WarmFlameExpressionVideo, { expression: "calm", label: null }) }),
+        /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 600 600",
+            className: cn(
+              "relative z-10 drop-shadow-sm",
+              brandedLogoIconClassNameBySize[size],
+              logoClassName
+            ),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx2("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+          }
+        )
+      ]
+    }
+  );
+}
+function WarmBrandedLogoLink({
+  href,
+  ariaLabel = "Warm home",
+  size = "md",
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsx2("a", { href, "aria-label": ariaLabel, className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx2(
+    WarmBrandedLogoMark,
+    {
+      size,
+      ...className !== void 0 ? { className } : {},
+      ...logoClassName !== void 0 ? { logoClassName } : {}
+    }
+  ) });
+}
+function WarmBrandedLogoMarkStatic({
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsxs2("span", { className: cn("relative inline-flex size-8 items-center justify-center", className), children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-0 rounded-full bg-gradient-to-br from-primary/90 via-warning/80 to-primary/70"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 600",
+        className: cn("relative z-10 size-5 drop-shadow-sm", logoClassName),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx2("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+      }
+    )
+  ] });
+}
+
+export {
+  WarmBrandedLogoMark,
+  WarmBrandedLogoLink,
+  WarmBrandedLogoMarkStatic,
+  Logo,
+  WarmLogoIcon
+};

package/dist/chunks/{chunk-SK7IZUFC.js → chunk-KN6WVLCR.js}

@@ -6,76 +6,6 @@ import {
 import * as React from "react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { CheckIcon } from "lucide-react";
-
-// ../ui/src/lib/interaction-feedback.ts
-import { play, setEnabled } from "cuelume";
-
-// ../ui/src/lib/haptic.ts
-var supportsHaptic = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : false;
-function getWarmCapacitor(win) {
-  return win?.Capacitor;
-}
-function isIosCapacitorApp(win = typeof window === "undefined" ? void 0 : window) {
-  const capacitor = getWarmCapacitor(win);
-  return capacitor?.getPlatform?.() === "ios" && capacitor?.isNativePlatform?.() === true;
-}
-function hasVibrate(nav) {
-  return "vibrate" in nav && typeof nav.vibrate === "function";
-}
-function triggerIosCapacitorHaptic() {
-  const haptics = getWarmCapacitor(typeof window === "undefined" ? void 0 : window)?.Plugins?.Haptics;
-  void haptics?.impact?.({ style: "LIGHT" }).catch(() => {
-  });
-}
-function haptic(pattern = 50) {
-  try {
-    if (isIosCapacitorApp()) {
-      triggerIosCapacitorHaptic();
-      return;
-    }
-    if (!supportsHaptic) return;
-    if (hasVibrate(navigator)) {
-      navigator.vibrate(pattern);
-      return;
-    }
-    const label = document.createElement("label");
-    label.ariaHidden = "true";
-    label.style.display = "none";
-    const input = document.createElement("input");
-    input.type = "checkbox";
-    input.setAttribute("switch", "");
-    label.appendChild(input);
-    try {
-      document.head.appendChild(label);
-      label.click();
-    } finally {
-      document.head.removeChild(label);
-    }
-  } catch {
-  }
-}
-
-// ../ui/src/lib/interaction-feedback.ts
-var soundByIntent = {
-  press: "press",
-  selection: "tick",
-  toggle: "toggle"
-};
-var soundsEnabled = false;
-setEnabled(false);
-function triggerInteractionFeedback(intent, options = {}) {
-  if (options.haptic) {
-    haptic();
-  }
-  if (!soundsEnabled) return;
-  if (typeof document !== "undefined" && document.hidden) return;
-  try {
-    play(soundByIntent[intent]);
-  } catch {
-  }
-}
-
-// ../ui/src/warmio/dropdown-menu.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function DropdownMenu(props) {
   return /* @__PURE__ */ jsx(MenuPrimitive.Root, { ...props });
@@ -132,7 +62,7 @@ function DropdownMenuContent({
             dropdownMenuContentSizeClasses[size],
             dropdownMenuContentSpacingClasses[spacing],
             "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none"
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-90 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none"
           ),
           ...props,
           children
@@ -164,7 +94,7 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
       ...props
     }
   );
@@ -186,7 +116,7 @@ function DropdownMenuLinkItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
       render: /* @__PURE__ */ jsx("a", { href, children }),
       ...props
     }
@@ -203,7 +133,6 @@ function DropdownMenuCheckboxItem({
   ...props
 }) {
   const handleCheckedChange = (nextChecked, eventDetails) => {
-    triggerInteractionFeedback("toggle");
     onCheckedChange?.(nextChecked, eventDetails);
   };
   return /* @__PURE__ */ jsxs(
@@ -212,7 +141,7 @@ function DropdownMenuCheckboxItem({
       ref,
       "data-slot": "dropdown-menu-checkbox-item",
       "data-inset": inset,
-      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-6 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       checked,
       onCheckedChange: handleCheckedChange,
       ...props,
@@ -237,7 +166,6 @@ function DropdownMenuRadioGroup({
   ...props
 }) {
   const handleValueChange = (value, eventDetails) => {
-    triggerInteractionFeedback("selection");
     onValueChange?.(value, eventDetails);
   };
   return /* @__PURE__ */ jsx(
@@ -265,7 +193,7 @@ function DropdownMenuRadioItem({
       "data-slot": "dropdown-menu-radio-item",
       "data-inset": inset,
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-6 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         presentation === "selectMenu" && "min-h-12 text-base"
       ),
       ...props,
@@ -296,7 +224,7 @@ function DropdownMenuLabel({
       ref,
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
-      className: "px-2 py-2 text-xs font-bold text-muted-foreground data-inset:pl-6",
+      className: "px-2 py-2 text-xs font-bold text-muted-foreground data-inset:pl-4",
       ...props
     }
   );

package/dist/chunks/{chunk-ZEDHNFX6.js → chunk-MIMC4M6W.js}

@@ -6,7 +6,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunk-OWDC2VC6.js";
+} from "./chunk-YTDMREDR.js";
 
 // ../ui/src/warmio/sheet.tsx
 import { jsx } from "react/jsx-runtime";
@@ -37,26 +37,20 @@ function SheetContent2({
     {
       ...props,
       className: contentClassName,
-      overlayClassName: presentation === "navigation" ? "duration-200 ease-in-out" : void 0
+      ...presentation === "navigation" ? { overlayClassName: "duration-200 ease-in-out" } : {}
     }
   );
 }
-function SheetFooter2({
-  className: _className,
-  spacing = "default",
-  style: _style,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(SheetFooter, { ...props, className: spacing === "roomy" ? "gap-4 p-6" : void 0 });
+function SheetFooter2({ className: _className, style: _style, ...props }) {
+  return /* @__PURE__ */ jsx(SheetFooter, { ...props });
 }
 function SheetHeader2({
   className: _className,
   presentation,
-  spacing = "default",
   style: _style,
   ...props
 }) {
-  const className = presentation === "navigation" ? "border-b border-border bg-background p-0" : spacing === "roomy" ? "gap-2 p-6" : void 0;
+  const className = presentation === "navigation" ? "border-b border-border bg-background p-0" : void 0;
   return /* @__PURE__ */ jsx(SheetHeader, { ...props, className });
 }
 function SheetTitle2({