@misoto22/design 0.8.0 → 0.10.0

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,334 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  clamp,
+  colorFormat,
+  colorToRgb,
+  fitGamut,
+  formatColor,
+  maxChroma,
+  parseColor
+} from "../../lib/color.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { warnBlankName } from "../../lib/warn.js";
+import { useFieldControl } from "../Field/field-control.js";
+import { Input } from "../Input/Input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+import { ToggleGroup, ToggleGroupItem } from "../ToggleGroup/ToggleGroup.js";
+const PLANE_W = 256;
+const PLANE_H = 160;
+const HUE_STOPS = 73;
+const BLACK = { l: 0, c: 0, h: 0, a: 1 };
+const FORMAT_LABELS = {
+  hex: "Hex",
+  oklch: "OKLCH",
+  // Not "Display P3": the three segments share the strip evenly, and the long
+  // name wraps to two lines inside its third and makes the whole row twice as
+  // tall as the two beside it.
+  p3: "P3"
+};
+const checkerboard = (square) => `repeating-conic-gradient(var(--stone) 0% 25%, var(--paper) 0% 50%) 0 0 / ${square} ${square}`;
+function ColorPicker({
+  label,
+  value: controlled,
+  defaultValue = "#000000",
+  onValueChange,
+  disabled,
+  invalid,
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
+}) {
+  warnBlankName("ColorPicker", "label", label, "the trigger is announced with no name");
+  const bad = isInvalid(invalid, ariaInvalid);
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = controlled ?? uncontrolled;
+  const [color, setColor] = useState(() => parseColor(defaultValue) ?? BLACK);
+  const [format, setFormat] = useState(() => colorFormat(defaultValue));
+  const emitted = useRef(null);
+  const saturationRef = useRef(0);
+  useEffect(() => {
+    if (value === emitted.current) return;
+    const parsed = parseColor(value);
+    if (!parsed) return;
+    setColor((prev) => ({ ...parsed, h: parsed.c < 1e-7 ? prev.h : parsed.h }));
+    setFormat(colorFormat(value));
+  }, [value]);
+  const space = format === "hex" ? "srgb" : "p3";
+  const ceiling = maxChroma(color.l, color.h, space);
+  const saturation = ceiling > 0 ? clamp(color.c / ceiling) : saturationRef.current;
+  useEffect(() => {
+    if (ceiling > 0) saturationRef.current = saturation;
+  }, [ceiling, saturation]);
+  const commit = (next, nextFormat = format) => {
+    const fitted = nextFormat === "oklch" ? next : fitGamut(next, nextFormat === "p3" ? "p3" : "srgb");
+    setColor(fitted);
+    setFormat(nextFormat);
+    const text = formatColor(fitted, nextFormat);
+    emitted.current = text;
+    if (controlled === void 0) setUncontrolled(text);
+    onValueChange?.(text);
+  };
+  const setPlane = (nextSaturation, lightness) => {
+    saturationRef.current = nextSaturation;
+    commit({ ...color, l: lightness, c: nextSaturation * maxChroma(lightness, color.h, space) });
+  };
+  const planeRef = useRef(null);
+  const canvasRef = useRef(null);
+  const painted = useRef("");
+  const trackPointer = (event) => {
+    const rect = planeRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) return;
+    setPlane(
+      clamp((event.clientX - rect.left) / rect.width),
+      clamp(1 - (event.clientY - rect.top) / rect.height)
+    );
+  };
+  const paint = (canvas) => {
+    if (!canvas) return;
+    const key = `${color.h.toFixed(3)}:${space}`;
+    if (painted.current === key) return;
+    const context = canvas.getContext("2d");
+    if (!context || typeof context.createImageData !== "function") return;
+    painted.current = key;
+    const pixels = context.createImageData(PLANE_W, PLANE_H);
+    for (let y = 0; y < PLANE_H; y++) {
+      const l = 1 - y / (PLANE_H - 1);
+      const rowMax = maxChroma(l, color.h, space);
+      for (let x = 0; x < PLANE_W; x++) {
+        const rgb = colorToRgb({ l, c: x / (PLANE_W - 1) * rowMax, h: color.h, a: 1 }, "srgb");
+        const at = (y * PLANE_W + x) * 4;
+        for (let channel = 0; channel < 3; channel++) {
+          pixels.data[at + channel] = Math.round(clamp(rgb[channel] ?? 0) * 255);
+        }
+        pixels.data[at + 3] = 255;
+      }
+    }
+    context.putImageData(pixels, 0, 0);
+  };
+  useEffect(() => {
+    paint(canvasRef.current);
+  });
+  const opaque = formatColor({ ...color, a: 1 }, "oklch");
+  const hueTrack = Array.from({ length: HUE_STOPS }, (_, i) => {
+    const h = i * (360 / (HUE_STOPS - 1));
+    return formatColor({ l: color.l, c: saturation * maxChroma(color.l, h, space), h, a: 1 }, "oklch");
+  }).join(", ");
+  const typed = parseColor(value);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        disabled,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
+        "aria-invalid": bad || void 0,
+        className: cn(
+          CONTROL_BASE,
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          "flex cursor-pointer items-center gap-2.5 text-start",
+          className
+        ),
+        children: [
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 rounded-(--radius-xs) border border-(--rule-2)",
+              style: { background: `linear-gradient(${value}, ${value}), ${checkerboard("4px")}` }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "mono-meta truncate", children: value })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { label: `${label} picker`, className: "flex w-72 flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          value: format,
+          onValueChange: (next) => next && commit(color, next),
+          "aria-label": "Colour notation",
+          className: "w-full",
+          children: Object.keys(FORMAT_LABELS).map((option) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: option, className: "flex-1", children: FORMAT_LABELS[option] }, option))
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: planeRef,
+          role: "group",
+          "aria-label": `${label} field`,
+          onPointerDown: (event) => {
+            if (event.button !== 0) return;
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            trackPointer(event);
+          },
+          onPointerMove: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) trackPointer(event);
+          },
+          onPointerUp: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+              event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+          },
+          className: "relative h-40 w-full cursor-crosshair touch-none select-none rounded-(--radius) focus-within:[outline:var(--focus-w)_solid_var(--focus)] focus-within:[outline-offset:var(--focus-off)]",
+          children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: (node) => {
+                  canvasRef.current = node;
+                  if (!node) painted.current = "";
+                  paint(node);
+                },
+                width: PLANE_W,
+                height: PLANE_H,
+                "aria-hidden": "true",
+                className: "block size-full rounded-(--radius)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute inset-0 rounded-(--radius) shadow-[inset_0_0_0_1px_var(--rule)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute -m-1.5 size-3 rounded-(--radius-pill) border-2 border-(--paper) shadow-[0_0_0_1px_var(--rule-hard)]",
+                style: { left: `${saturation * 100}%`, top: `${(1 - color.l) * 100}%`, background: opaque }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: Math.round(saturation * 100),
+                "aria-label": "Chroma",
+                "aria-valuetext": `${Math.round(saturation * 100)} percent chroma`,
+                onChange: (event) => setPlane(Number(event.target.value) / 100, color.l),
+                className: "sr-only"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: Math.round(color.l * 100),
+                "aria-label": "Lightness",
+                "aria-valuetext": `${Math.round(color.l * 100)} percent lightness`,
+                onChange: (event) => setPlane(saturation, Number(event.target.value) / 100),
+                className: "sr-only"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorTrack,
+        {
+          name: "Hue",
+          max: 360,
+          step: 1,
+          value: color.h,
+          announce: `${Math.round(color.h)} degrees`,
+          thumb: opaque,
+          track: `linear-gradient(to right in oklab, ${hueTrack})`,
+          onChange: (h) => commit({ ...color, h, c: saturation * maxChroma(color.l, h, space) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorTrack,
+        {
+          name: "Opacity",
+          max: 100,
+          step: 1,
+          value: color.a * 100,
+          announce: `${Math.round(color.a * 100)} percent`,
+          thumb: formatColor(color, "oklch"),
+          track: `linear-gradient(to right, transparent, ${opaque}), ${checkerboard("8px")}`,
+          onChange: (percent) => commit({ ...color, a: percent / 100 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value,
+          spellCheck: false,
+          autoComplete: "off",
+          "aria-label": `${label} as CSS`,
+          invalid: typed === null,
+          onChange: (event) => {
+            const next = event.target.value;
+            emitted.current = next;
+            if (controlled === void 0) setUncontrolled(next);
+            const parsed = parseColor(next);
+            if (parsed) {
+              setColor(parsed);
+              setFormat(colorFormat(next));
+            }
+            onValueChange?.(next);
+          },
+          className: "mono-meta"
+        }
+      )
+    ] })
+  ] });
+}
+function ColorTrack({ name, max, step, value, announce, track, thumb, onChange }) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-(--ink-2)", children: [
+    /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0", children: name }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max,
+        step,
+        value,
+        "aria-valuetext": announce,
+        onChange: (event) => onChange(Number(event.target.value)),
+        style: { background: track },
+        className: cn(
+          "h-4 w-full cursor-pointer appearance-none rounded-(--radius-xs) shadow-[inset_0_0_0_1px_var(--rule)]",
+          "[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-(--radius-xs) [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--paper) [&::-webkit-slider-thumb]:bg-(--thumb) [&::-webkit-slider-thumb]:bg-clip-padding [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]",
+          "[&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-(--radius-xs) [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--paper) [&::-moz-range-thumb]:bg-(--thumb) [&::-moz-range-thumb]:bg-clip-padding [&::-moz-range-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]"
+        ),
+        ref: (node) => {
+          node?.style.setProperty("--thumb", thumb);
+        }
+      }
+    )
+  ] });
+}
+var ColorPicker_default = ColorPicker;
+export {
+  ColorPicker,
+  ColorPicker_default as default
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useRef, useState, type PointerEvent } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  clamp,\n  colorFormat,\n  colorToRgb,\n  fitGamut,\n  formatColor,\n  maxChroma,\n  parseColor,\n  type Color,\n  type ColorFormat,\n  type ColorSpace,\n} from '../../lib/color'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { warnBlankName } from '../../lib/warn'\nimport { useFieldControl } from '../Field/field-control'\nimport { Input } from '../Input/Input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\nimport { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup'\n\n/** The plane's pixel grid. Wider than it is tall, like the panel holding it. */\nconst PLANE_W = 256\nconst PLANE_H = 160\n\n/** Hue stops in the strip behind the hue slider. Every 5°, plus the wrap. */\nconst HUE_STOPS = 73\n\nconst BLACK: Color = { l: 0, c: 0, h: 0, a: 1 }\n\nconst FORMAT_LABELS: Record<ColorFormat, string> = {\n  hex: 'Hex',\n  oklch: 'OKLCH',\n  // Not \"Display P3\": the three segments share the strip evenly, and the long\n  // name wraps to two lines inside its third and makes the whole row twice as\n  // tall as the two beside it.\n  p3: 'P3',\n}\n\n/**\n * A checkerboard, so alpha reads as alpha rather than as a lighter colour.\n *\n * Sized per surface: 8px checks read as a texture behind a full-width track and\n * as two grey squares inside a 16px swatch.\n */\nconst checkerboard = (square: string) =>\n  `repeating-conic-gradient(var(--stone) 0% 25%, var(--paper) 0% 50%) 0 0 / ${square} ${square}`\n\nexport interface ColorPickerProps {\n  /**\n   * Names the control. Required — the trigger shows a colour, and a colour is\n   * not a name.\n   *\n   * Announced together with the value, the way `Select`'s is: a reader hears\n   * \"Brand colour, #a78bfa\". Inside a `Field` with a label, that label is used\n   * and this one is not repeated.\n   */\n  label: string\n  /** The colour, as any absolute CSS colour string. */\n  value?: string\n  defaultValue?: string\n  /**\n   * Fires with a CSS colour string in whichever notation the panel is set to —\n   * so the notation a caller passes in is the notation they get back until\n   * somebody changes it in the panel.\n   */\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** The spelling a form library sets; read together with `invalid`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n  /** Announced on the trigger. A `Field` sets it from `required`. */\n  'aria-required'?: boolean\n}\n\n/**\n * A colour, chosen or typed.\n *\n * The panel works in OKLCH, and that is the reason to reach for this rather\n * than `<input type=\"color\">`. In HSV — which is what the native picker and\n * most libraries use — dragging along a row of constant \"lightness\" walks\n * through colours the eye reads as getting darker, so a reader tuning a palette\n * is fighting the instrument. OKLCH's lightness is the one a person sees, so\n * two colours at the same height on the plane genuinely match, and the hue\n * strip stays at the lightness already chosen instead of showing a rainbow that\n * belongs to some other colour.\n *\n * The plane is normalised to the gamut ROW BY ROW: its right edge is the most\n * chroma that exists at that lightness and hue, so the whole surface is\n * reachable rather than a lens of colour inside a field of clipped duplicates.\n *\n * **What it accepts.** Hex, `rgb()`, `hsl()`, `oklch()` and\n * `color(display-p3 …)`, in both syntaxes. Named colours are not accepted:\n * resolving them needs a table of every CSS name or a live DOM, and a box that\n * takes \"rebeccapurple\" but not \"papayawhip\" is worse than one that takes\n * neither.\n *\n * **Keyboard.** The plane is a group of two real sliders — chroma across,\n * lightness up — so the arrows move it and a screen reader announces where it\n * is. That is the part a 2D canvas usually leaves out, and leaving it out makes\n * the control unusable rather than merely awkward.\n *\n * @example\n * <Field label=\"Brand colour\"><ColorPicker label=\"Brand colour\" defaultValue=\"#a78bfa\" /></Field>\n */\nexport function ColorPicker({\n  label,\n  value: controlled,\n  defaultValue = '#000000',\n  onValueChange,\n  disabled,\n  invalid,\n  className,\n  id,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n}: ColorPickerProps) {\n  warnBlankName('ColorPicker', 'label', label, 'the trigger is announced with no name')\n  const bad = isInvalid(invalid, ariaInvalid)\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const valueId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n\n  const [uncontrolled, setUncontrolled] = useState(defaultValue)\n  const value = controlled ?? uncontrolled\n\n  const [color, setColor] = useState<Color>(() => parseColor(defaultValue) ?? BLACK)\n  const [format, setFormat] = useState<ColorFormat>(() => colorFormat(defaultValue))\n  // What this component last wrote out, so its own emission does not read back\n  // as an outside change and re-derive the hue it just preserved.\n  const emitted = useRef<string | null>(null)\n\n  // The plane's horizontal position, kept across the two rows where it cannot\n  // be derived: at pure black and pure white every chroma is zero, so `c / max`\n  // is 0/0 and the handle would jump to the left edge on the way past.\n  const saturationRef = useRef(0)\n\n  useEffect(() => {\n    if (value === emitted.current) return\n    const parsed = parseColor(value)\n    if (!parsed) return\n    // A grey has no hue — only the angle of its rounding error. Keeping the\n    // last real one is what stops the strip spinning when a reader drags the\n    // handle through the neutral column.\n    setColor((prev) => ({ ...parsed, h: parsed.c < 1e-7 ? prev.h : parsed.h }))\n    setFormat(colorFormat(value))\n  }, [value])\n\n  // Hex is bounded to sRGB; both of the others can address the wider gamut, so\n  // the plane shows what the notation can actually hold.\n  const space: ColorSpace = format === 'hex' ? 'srgb' : 'p3'\n  const ceiling = maxChroma(color.l, color.h, space)\n  const saturation = ceiling > 0 ? clamp(color.c / ceiling) : saturationRef.current\n\n  useEffect(() => {\n    if (ceiling > 0) saturationRef.current = saturation\n  }, [ceiling, saturation])\n\n  const commit = (next: Color, nextFormat: ColorFormat = format) => {\n    const fitted = nextFormat === 'oklch' ? next : fitGamut(next, nextFormat === 'p3' ? 'p3' : 'srgb')\n    setColor(fitted)\n    setFormat(nextFormat)\n    const text = formatColor(fitted, nextFormat)\n    emitted.current = text\n    if (controlled === undefined) setUncontrolled(text)\n    onValueChange?.(text)\n  }\n\n  /** Moves the plane handle, in the 0–1 coordinates the plane is drawn in. */\n  const setPlane = (nextSaturation: number, lightness: number) => {\n    saturationRef.current = nextSaturation\n    commit({ ...color, l: lightness, c: nextSaturation * maxChroma(lightness, color.h, space) })\n  }\n\n  const planeRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const painted = useRef<string>('')\n\n  const trackPointer = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = planeRef.current?.getBoundingClientRect()\n    if (!rect || rect.width === 0 || rect.height === 0) return\n    setPlane(\n      clamp((event.clientX - rect.left) / rect.width),\n      clamp(1 - (event.clientY - rect.top) / rect.height),\n    )\n  }\n\n  /**\n   * Fills the plane, at most once per hue.\n   *\n   * Called from the canvas's own ref callback rather than only from an effect,\n   * because the canvas does not exist until the panel is open AND Radix's\n   * popper has measured it — which is a commit later than the one that opened\n   * it. An effect keyed to the open state runs on the commit BEFORE the node\n   * arrives, finds a ref holding null, and never runs again: a plane that\n   * stayed blank until the reader happened to move the hue.\n   */\n  const paint = (canvas: HTMLCanvasElement | null) => {\n    if (!canvas) return\n    const key = `${color.h.toFixed(3)}:${space}`\n    if (painted.current === key) return\n    const context = canvas.getContext('2d')\n    // A headless environment can hand back a 2D context with most of the\n    // drawing surface missing. Nothing here is load-bearing — the plane is the\n    // pointer's aim, and the two sliders under it work either way — so a\n    // partial context means no plane rather than a thrown render.\n    if (!context || typeof context.createImageData !== 'function') return\n    painted.current = key\n\n    const pixels = context.createImageData(PLANE_W, PLANE_H)\n    for (let y = 0; y < PLANE_H; y++) {\n      const l = 1 - y / (PLANE_H - 1)\n      // Each row is normalised to its OWN reachable chroma. Painted against one\n      // global maximum instead, the top and bottom thirds of the plane are\n      // bands of clipped duplicates a reader can never pick apart.\n      const rowMax = maxChroma(l, color.h, space)\n      for (let x = 0; x < PLANE_W; x++) {\n        const rgb = colorToRgb({ l, c: (x / (PLANE_W - 1)) * rowMax, h: color.h, a: 1 }, 'srgb')\n        const at = (y * PLANE_W + x) * 4\n        for (let channel = 0; channel < 3; channel++) {\n          pixels.data[at + channel] = Math.round(clamp(rgb[channel] ?? 0) * 255)\n        }\n        pixels.data[at + 3] = 255\n      }\n    }\n    context.putImageData(pixels, 0, 0)\n  }\n\n  /** Repaints a canvas that is already on screen when the hue moves under it. */\n  useEffect(() => {\n    paint(canvasRef.current)\n  })\n\n  const opaque = formatColor({ ...color, a: 1 }, 'oklch')\n  const hueTrack = Array.from({ length: HUE_STOPS }, (_, i) => {\n    const h = i * (360 / (HUE_STOPS - 1))\n    return formatColor({ l: color.l, c: saturation * maxChroma(color.l, h, space), h, a: 1 }, 'oklch')\n  }).join(', ')\n\n  const typed = parseColor(value)\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={triggerId}\n          disabled={disabled}\n          // Named by the label AND by its own value, in that order — the same\n          // arrangement Select uses, and for the same reason: `aria-label`\n          // outranks the content, so naming it \"Brand colour\" would tell a\n          // reader the noun and never the answer.\n          aria-labelledby={`${nameId} ${valueId}`}\n          aria-describedby={describedBy}\n          aria-required={ariaRequired}\n          aria-invalid={bad || undefined}\n          className={cn(\n            CONTROL_BASE,\n            bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n            'flex cursor-pointer items-center gap-2.5 text-start',\n            className,\n          )}\n        >\n          {/* Standing outside a Field there is no label to point at, so the\n              trigger carries its own — the name half of the two the\n              `aria-labelledby` above names, with the value as the other. */}\n          {field?.labelId == null && (\n            <span id={nameId} className=\"sr-only\">\n              {label}\n            </span>\n          )}\n          <span\n            aria-hidden=\"true\"\n            className=\"size-4 shrink-0 rounded-(--radius-xs) border border-(--rule-2)\"\n            // The colour as a flat GRADIENT, not as a colour. In the\n            // `background` shorthand a plain colour is only legal in the last\n            // layer, so `background: #a78bfa, <checks>` is invalid and the\n            // whole declaration is dropped — which drew an empty swatch.\n            style={{ background: `linear-gradient(${value}, ${value}), ${checkerboard('4px')}` }}\n          />\n          <span id={valueId} className=\"mono-meta truncate\">\n            {value}\n          </span>\n        </button>\n      </PopoverTrigger>\n\n      <PopoverContent label={`${label} picker`} className=\"flex w-72 flex-col gap-3\">\n        <ToggleGroup\n          type=\"single\"\n          value={format}\n          // `type=\"single\"` commits an empty string when the pressed segment is\n          // the selected one, which here would leave the panel with no notation\n          // to write in at all.\n          onValueChange={(next) => next && commit(color, next as ColorFormat)}\n          aria-label=\"Colour notation\"\n          className=\"w-full\"\n        >\n          {(Object.keys(FORMAT_LABELS) as ColorFormat[]).map((option) => (\n            <ToggleGroupItem key={option} value={option} className=\"flex-1\">\n              {FORMAT_LABELS[option]}\n            </ToggleGroupItem>\n          ))}\n        </ToggleGroup>\n\n        {/* A group of two real sliders rather than a canvas with key handlers:\n            the arrows, Home and End are then the platform's, and a reader is\n            told which axis they are on and where they are along it. The canvas\n            underneath is what a pointer aims at. */}\n        <div\n          ref={planeRef}\n          role=\"group\"\n          aria-label={`${label} field`}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return\n            event.preventDefault()\n            event.currentTarget.setPointerCapture(event.pointerId)\n            trackPointer(event)\n          }}\n          onPointerMove={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) trackPointer(event)\n          }}\n          onPointerUp={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId)\n            }\n          }}\n          // The focus ring has to be drawn HERE: the two sliders that take the\n          // focus are `sr-only`, so the one the browser draws on them is\n          // clipped away with the rest of the box.\n          className=\"relative h-40 w-full cursor-crosshair touch-none select-none rounded-(--radius) focus-within:[outline:var(--focus-w)_solid_var(--focus)] focus-within:[outline-offset:var(--focus-off)]\"\n        >\n          <canvas\n            ref={(node) => {\n              canvasRef.current = node\n              // Closing destroys the canvas and its bitmap with it, so the next\n              // open has to repaint even at the same hue.\n              if (!node) painted.current = ''\n              paint(node)\n            }}\n            width={PLANE_W}\n            height={PLANE_H}\n            aria-hidden=\"true\"\n            className=\"block size-full rounded-(--radius)\"\n          />\n          {/* A hairline over the plane, so the light corner still has an edge. */}\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 rounded-(--radius) shadow-[inset_0_0_0_1px_var(--rule)]\"\n          />\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute -m-1.5 size-3 rounded-(--radius-pill) border-2 border-(--paper) shadow-[0_0_0_1px_var(--rule-hard)]\"\n            style={{ left: `${saturation * 100}%`, top: `${(1 - color.l) * 100}%`, background: opaque }}\n          />\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={Math.round(saturation * 100)}\n            aria-label=\"Chroma\"\n            aria-valuetext={`${Math.round(saturation * 100)} percent chroma`}\n            onChange={(event) => setPlane(Number(event.target.value) / 100, color.l)}\n            className=\"sr-only\"\n          />\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={Math.round(color.l * 100)}\n            aria-label=\"Lightness\"\n            aria-valuetext={`${Math.round(color.l * 100)} percent lightness`}\n            onChange={(event) => setPlane(saturation, Number(event.target.value) / 100)}\n            className=\"sr-only\"\n          />\n        </div>\n\n        <ColorTrack\n          name=\"Hue\"\n          max={360}\n          step={1}\n          value={color.h}\n          announce={`${Math.round(color.h)} degrees`}\n          thumb={opaque}\n          track={`linear-gradient(to right in oklab, ${hueTrack})`}\n          onChange={(h) => commit({ ...color, h, c: saturation * maxChroma(color.l, h, space) })}\n        />\n        <ColorTrack\n          name=\"Opacity\"\n          max={100}\n          step={1}\n          value={color.a * 100}\n          announce={`${Math.round(color.a * 100)} percent`}\n          thumb={formatColor(color, 'oklch')}\n          track={`linear-gradient(to right, transparent, ${opaque}), ${checkerboard('8px')}`}\n          onChange={(percent) => commit({ ...color, a: percent / 100 })}\n        />\n\n        <Input\n          value={value}\n          spellCheck={false}\n          autoComplete=\"off\"\n          aria-label={`${label} as CSS`}\n          invalid={typed === null}\n          onChange={(event) => {\n            const next = event.target.value\n            emitted.current = next\n            if (controlled === undefined) setUncontrolled(next)\n            const parsed = parseColor(next)\n            if (parsed) {\n              setColor(parsed)\n              setFormat(colorFormat(next))\n            }\n            onValueChange?.(next)\n          }}\n          className=\"mono-meta\"\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface ColorTrackProps {\n  name: string\n  max: number\n  step: number\n  value: number\n  /** What the number MEANS, since a bare \"212\" on a hue slider is not a reading. */\n  announce: string\n  /** CSS for the strip behind the thumb. */\n  track: string\n  /** The colour the thumb is filled with. */\n  thumb: string\n  onChange: (value: number) => void\n}\n\n/**\n * One channel of the picker, as a native range input.\n *\n * Native rather than this system's `Slider`, and deliberately: the whole point\n * of these two is the strip BEHIND the thumb — a hue ramp taken at the current\n * lightness, an opacity ramp over a checkerboard — and Radix's track is not a\n * surface a caller can paint. A native range gives the same keyboard contract\n * for nothing, which is what made the trade worth taking.\n */\nfunction ColorTrack({ name, max, step, value, announce, track, thumb, onChange }: ColorTrackProps) {\n  return (\n    <label className=\"flex items-center gap-3 text-sm text-(--ink-2)\">\n      <span className=\"w-14 shrink-0\">{name}</span>\n      <input\n        type=\"range\"\n        min={0}\n        max={max}\n        step={step}\n        value={value}\n        aria-valuetext={announce}\n        onChange={(event) => onChange(Number(event.target.value))}\n        style={{ background: track }}\n        className={cn(\n          'h-4 w-full cursor-pointer appearance-none rounded-(--radius-xs) shadow-[inset_0_0_0_1px_var(--rule)]',\n          '[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-(--radius-xs) [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--paper) [&::-webkit-slider-thumb]:bg-(--thumb) [&::-webkit-slider-thumb]:bg-clip-padding [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]',\n          '[&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-(--radius-xs) [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--paper) [&::-moz-range-thumb]:bg-(--thumb) [&::-moz-range-thumb]:bg-clip-padding [&::-moz-range-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]',\n        )}\n        // Read by both thumb rules above; a pseudo-element cannot take a style\n        // attribute of its own, so the colour has to arrive as a variable.\n        ref={(node) => {\n          node?.style.setProperty('--thumb', thumb)\n        }}\n      />\n    </label>\n  )\n}\n\nexport default ColorPicker\n"],"mappings":"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","names":[]}

package/dist/components/Command/Command.js

@@ -25,7 +25,7 @@ function Command({
     CommandPrimitive,
     {
       className: cn(
-        "flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur",
+        "flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur",
         className
       ),
       ...props

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search, type LucideIcon } from 'lucide-react'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (!isIconComponent(icon)) return icon\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} aria-hidden />\n}\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes\n   * the element, `icon={Settings}` passes the component and this sizes it.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: LucideIcon | ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {iconNode(icon)}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search, type LucideIcon } from 'lucide-react'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (!isIconComponent(icon)) return icon\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} aria-hidden />\n}\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes\n   * the element, `icon={Settings}` passes the component and this sizes it.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: LucideIcon | ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {iconNode(icon)}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}

package/dist/components/ContextMenu/ContextMenu.js

@@ -32,7 +32,7 @@ function ContextMenuContent({
       collisionPadding: 8,
       "data-m22-animated": true,
       className: cn(
-        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur",
+        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 shadow-(--panel-lift) panel-blur",
         "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
         className
       ),

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport { isValidElement, useId, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/**\n * True for a component type — `icon={Copy}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (icon === undefined || icon === null || icon === false) return null\n  if (!isIconComponent(icon)) {\n    return (\n      <span aria-hidden className=\"grid size-4 shrink-0 place-items-center [&_svg]:size-4\">\n        {icon}\n      </span>\n    )\n  }\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />\n}\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  /**\n   * Optional leading icon. Either spelling — `icon={Copy}` passes the component\n   * and this sizes it, `icon={<Copy size={16} />}` passes the element and this\n   * places it.\n   */\n  icon?: LucideIcon | ReactNode\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {iconNode(icon)}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/**\n * Mono eyebrow heading, on its own.\n *\n * Visual only: Radix renders it as a bare `<div>` with no role. Reach for\n * `ContextMenuGroup` when the eyebrow is a HEADING over rows; this is right for\n * a line that heads nothing.\n */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport interface ContextMenuGroupProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Group> {\n  /** The eyebrow over the rows, and the group's accessible name. */\n  label?: ReactNode\n}\n\n/**\n * A named section of a menu.\n *\n * The eyebrow alone was a picture of a heading: Radix's `MenuLabel` carries no\n * role and no `aria-labelledby` wiring, so a sighted reader saw sections and a\n * screen-reader user got one undifferentiated list. This renders the group,\n * renders the label inside it, and points the one at the other.\n */\nexport function ContextMenuGroup({ label, children, ...rest }: ContextMenuGroupProps) {\n  const id = useId()\n\n  return (\n    <ContextMenuPrimitive.Group\n      aria-labelledby={label === undefined ? undefined : id}\n      {...rest}\n    >\n      {label !== undefined && <ContextMenuLabel id={id}>{label}</ContextMenuLabel>}\n      {children}\n    </ContextMenuPrimitive.Group>\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AA8BM,cA0EF,YA1EE;AA5BN,YAAY,0BAA0B;AAEtC,SAAS,gBAAgB,aAAkD;AAC3E,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAYpC,SAAS,gBAAgB,MAAkD;AACzE,MAAI,eAAe,IAAI,EAAG,QAAO;AACjC,MAAI,OAAO,SAAS,WAAY,QAAO;AACvC,MAAI,OAAO,SAAS,YAAY,SAAS,KAAM,QAAO;AACtD,SAAO,CAAC,MAAM,QAAQ,IAAI,KAAK,EAAE,OAAO,YAAY,SAAS,EAAE,UAAU;AAC3E;AAGA,SAAS,SAAS,MAAyC;AACzD,MAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,MAAO,QAAO;AAClE,MAAI,CAAC,gBAAgB,IAAI,GAAG;AAC1B,WACE,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,gBACH;AAAA,EAEJ;AACA,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAC5E;AAGO,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAeO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,IAAI;AAAA,QACb;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAgBO,SAAS,iBAAiB,EAAE,OAAO,UAAU,GAAG,KAAK,GAA0B;AACpF,QAAM,KAAK,MAAM;AAEjB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAiB,UAAU,SAAY,SAAY;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA,kBAAU,UAAa,oBAAC,oBAAiB,IAAS,iBAAM;AAAA,QACxD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport { isValidElement, useId, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/**\n * True for a component type — `icon={Copy}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (icon === undefined || icon === null || icon === false) return null\n  if (!isIconComponent(icon)) {\n    return (\n      <span aria-hidden className=\"grid size-4 shrink-0 place-items-center [&_svg]:size-4\">\n        {icon}\n      </span>\n    )\n  }\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />\n}\n\n/** Radix ContextMenu root and trigger, as typed passthroughs. */\nexport const ContextMenu = ContextMenuPrimitive.Root\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\n/**\n * The menu a right-click opens.\n *\n * Never the only way to reach an action. A context menu is opened by a\n * secondary pointer button or a keyboard's own menu key, and a meaningful share\n * of readers have neither — a touch user, someone on a trackpad they have not\n * configured, anyone driving the page by keyboard alone. Whatever is in here\n * belongs somewhere reachable too: a row's overflow button, a toolbar.\n *\n * @example\n * <ContextMenu>\n *   <ContextMenuTrigger asChild><Card>Right-click me</Card></ContextMenuTrigger>\n *   <ContextMenuContent>\n *     <ContextMenuItem icon={Copy}>Copy</ContextMenuItem>\n *   </ContextMenuContent>\n * </ContextMenu>\n */\nexport function ContextMenuContent({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  const container = useOverlayContainer()\n\n  return (\n    <ContextMenuPrimitive.Portal container={container ?? undefined}>\n      <ContextMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 shadow-(--panel-lift) panel-blur',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nexport interface ContextMenuItemProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Item> {\n  /**\n   * Optional leading icon. Either spelling — `icon={Copy}` passes the component\n   * and this sizes it, `icon={<Copy size={16} />}` passes the element and this\n   * places it.\n   */\n  icon?: LucideIcon | ReactNode\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */\nexport function ContextMenuItem({\n  icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: ContextMenuItemProps) {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {iconNode(icon)}\n      {children}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between groups. */\nexport function ContextMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...rest} />\n  )\n}\n\n/**\n * Mono eyebrow heading, on its own.\n *\n * Visual only: Radix renders it as a bare `<div>` with no role. Reach for\n * `ContextMenuGroup` when the eyebrow is a HEADING over rows; this is right for\n * a line that heads nothing.\n */\nexport function ContextMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof ContextMenuPrimitive.Label>) {\n  return (\n    <ContextMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport interface ContextMenuGroupProps\n  extends ComponentProps<typeof ContextMenuPrimitive.Group> {\n  /** The eyebrow over the rows, and the group's accessible name. */\n  label?: ReactNode\n}\n\n/**\n * A named section of a menu.\n *\n * The eyebrow alone was a picture of a heading: Radix's `MenuLabel` carries no\n * role and no `aria-labelledby` wiring, so a sighted reader saw sections and a\n * screen-reader user got one undifferentiated list. This renders the group,\n * renders the label inside it, and points the one at the other.\n */\nexport function ContextMenuGroup({ label, children, ...rest }: ContextMenuGroupProps) {\n  const id = useId()\n\n  return (\n    <ContextMenuPrimitive.Group\n      aria-labelledby={label === undefined ? undefined : id}\n      {...rest}\n    >\n      {label !== undefined && <ContextMenuLabel id={id}>{label}</ContextMenuLabel>}\n      {children}\n    </ContextMenuPrimitive.Group>\n  )\n}\n\nexport default ContextMenu\n"],"mappings":";AA8BM,cA0EF,YA1EE;AA5BN,YAAY,0BAA0B;AAEtC,SAAS,gBAAgB,aAAkD;AAC3E,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAYpC,SAAS,gBAAgB,MAAkD;AACzE,MAAI,eAAe,IAAI,EAAG,QAAO;AACjC,MAAI,OAAO,SAAS,WAAY,QAAO;AACvC,MAAI,OAAO,SAAS,YAAY,SAAS,KAAM,QAAO;AACtD,SAAO,CAAC,MAAM,QAAQ,IAAI,KAAK,EAAE,OAAO,YAAY,SAAS,EAAE,UAAU;AAC3E;AAGA,SAAS,SAAS,MAAyC;AACzD,MAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,MAAO,QAAO;AAClE,MAAI,CAAC,gBAAgB,IAAI,GAAG;AAC1B,WACE,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,gBACH;AAAA,EAEJ;AACA,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAC5E;AAGO,MAAM,cAAc,qBAAqB;AACzC,MAAM,qBAAqB,qBAAqB;AAmBhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,aAAa,QACnD;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAeO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,IAAI;AAAA,QACb;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE,oBAAC,qBAAqB,WAArB,EAA+B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAEjG;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAgBO,SAAS,iBAAiB,EAAE,OAAO,UAAU,GAAG,KAAK,GAA0B;AACpF,QAAM,KAAK,MAAM;AAEjB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,mBAAiB,UAAU,SAAY,SAAY;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA,kBAAU,UAAa,oBAAC,oBAAiB,IAAS,iBAAM;AAAA,QACxD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Dialog/Dialog.js

@@ -54,7 +54,7 @@ function DialogContent({
       {
         "data-m22-animated": true,
         className: cn(
-          "fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim",
+          "fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 shadow-(--panel-lift) panel-blur scroll-slim",
           "data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]",
           // Against the container's box rather than the viewport's, and capped
           // by it: 92vw inside a 400px frame is not a cap at all.

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\nimport { DEV, warn } from '../../lib/warn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /**\n   * Heading text.\n   *\n   * Pass one even when `hideTitle` is set. Radix requires a title, so omitting\n   * it renders a hidden fallback reading the literal word \"Dialog\" — which\n   * satisfies an automated accessibility check and announces every unnamed\n   * modal in the application as the same thing. Development says so out loud.\n   */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than shipping an\n * unnamed modal — and warns in development, because the fallback it renders is\n * the literal word \"Dialog\" and a placeholder that passes an accessibility\n * check is how the problem survives a review.\n *\n * Portals into the element an enclosing `OverlayContainer` names, and switches\n * from viewport positioning to container positioning when there is one. A\n * `fixed` panel covers the page whatever it is portalled into, so honouring\n * the container without that swap would have moved the markup and left the\n * picture unchanged.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  const container = useOverlayContainer()\n\n  if (DEV && title === undefined) {\n    warn({\n      code: 'DIALOG_TITLE_MISSING',\n      problem:\n        'DialogContent has no title, so its accessible name is the fallback string \"Dialog\". Every unnamed modal in the app announces identically, and the check that would have caught it passes.',\n      field: 'title',\n      fix: 'Give it a title that says what the dialog asks. Add hideTitle when the heading would be furniture on screen.',\n      component: 'Dialog',\n    })\n  }\n\n  return (\n    <DialogPrimitive.Portal container={container ?? undefined}>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className={cn(\n          'inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]',\n          container ? 'absolute' : 'fixed',\n        )}\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          // Against the container's box rather than the viewport's, and capped\n          // by it: 92vw inside a 400px frame is not a cap at all.\n          container && 'absolute max-h-[calc(100%-2rem)] max-w-[calc(100%-2rem)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AA0BI,SAEI,KAFJ;AAxBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,KAAK,YAAY;AAGnB,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAwDO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,QAAM,YAAY,oBAAoB;AAEtC,MAAI,OAAO,UAAU,QAAW;AAC9B,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SACE;AAAA,MACF,OAAO;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAC9C;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,QAC3B;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,aAAa;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\nimport { DEV, warn } from '../../lib/warn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /**\n   * Heading text.\n   *\n   * Pass one even when `hideTitle` is set. Radix requires a title, so omitting\n   * it renders a hidden fallback reading the literal word \"Dialog\" — which\n   * satisfies an automated accessibility check and announces every unnamed\n   * modal in the application as the same thing. Development says so out loud.\n   */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than shipping an\n * unnamed modal — and warns in development, because the fallback it renders is\n * the literal word \"Dialog\" and a placeholder that passes an accessibility\n * check is how the problem survives a review.\n *\n * Portals into the element an enclosing `OverlayContainer` names, and switches\n * from viewport positioning to container positioning when there is one. A\n * `fixed` panel covers the page whatever it is portalled into, so honouring\n * the container without that swap would have moved the markup and left the\n * picture unchanged.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  const container = useOverlayContainer()\n\n  if (DEV && title === undefined) {\n    warn({\n      code: 'DIALOG_TITLE_MISSING',\n      problem:\n        'DialogContent has no title, so its accessible name is the fallback string \"Dialog\". Every unnamed modal in the app announces identically, and the check that would have caught it passes.',\n      field: 'title',\n      fix: 'Give it a title that says what the dialog asks. Add hideTitle when the heading would be furniture on screen.',\n      component: 'Dialog',\n    })\n  }\n\n  return (\n    <DialogPrimitive.Portal container={container ?? undefined}>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className={cn(\n          'inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]',\n          container ? 'absolute' : 'fixed',\n        )}\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 shadow-(--panel-lift) panel-blur scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          // Against the container's box rather than the viewport's, and capped\n          // by it: 92vw inside a 400px frame is not a cap at all.\n          container && 'absolute max-h-[calc(100%-2rem)] max-w-[calc(100%-2rem)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AA0BI,SAEI,KAFJ;AAxBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,KAAK,YAAY;AAGnB,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAwDO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,QAAM,YAAY,oBAAoB;AAEtC,MAAI,OAAO,UAAU,QAAW;AAC9B,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SACE;AAAA,MACF,OAAO;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAC9C;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,QAC3B;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,aAAa;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -35,7 +35,7 @@ function DropdownMenuContent({
       sideOffset,
       "data-m22-animated": true,
       className: cn(
-        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 panel-blur",
+        "z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 shadow-(--panel-lift) panel-blur",
         "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
         className
       ),