@leavepulse/ui 0.78.0 → 0.78.2

package/dist/chunks/LpColorPicker-BxAHEnR5.js

@@ -1,567 +0,0 @@
-import { defineComponent, ref, watch, computed, useAttrs, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, withDirectives, vShow, withKeys, Fragment, renderList, renderSlot, nextTick } from "vue";
-import { CONTROL_SIZE } from "../components/controlSize.js";
-import { clamp } from "../composables/clamp.js";
-import { PopoverRoot, PopoverAnchor, PopoverTrigger, PopoverPortal, PopoverContent } from "reka-ui";
-import { useKitStorage } from "../composables/usePersisted.js";
-import { prefersReducedMotion } from "../composables/easing.js";
-import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
-import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight, clampHsv } from "../components/color.js";
-import { useClipboard } from "../composables/useClipboard.js";
-import { useLabels } from "../composables/useLpConfig.js";
-import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu--eMGIql6.js";
-import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
-import { _ as _sfc_main$3 } from "./LpRollingText-B54Pje7P.js";
-import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
-const _hoisted_1 = ["id", "disabled", "aria-label", "title"];
-const _hoisted_2 = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby"];
-const _hoisted_3 = { class: "min-w-0 flex-1 truncate font-mono text-xs text-muted-strong" };
-const _hoisted_4 = { class: "flex flex-col gap-3" };
-const _hoisted_5 = ["tabindex", "aria-label", "aria-valuenow", "aria-valuetext"];
-const _hoisted_6 = ["aria-label", "aria-valuenow", "tabindex"];
-const _hoisted_7 = ["aria-label", "aria-valuenow", "tabindex"];
-const _hoisted_8 = {
-  key: 1,
-  "data-lp-ring-owner": "",
-  class: "flex h-(--size-control-sm) items-center gap-2 overflow-hidden rounded-control border border-line bg-surface-soft px-2 transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring"
-};
-const _hoisted_9 = { class: "relative flex min-w-0 flex-1 items-center" };
-const _hoisted_10 = ["value", "disabled", "aria-label"];
-const _hoisted_11 = {
-  key: 0,
-  class: "text-[11px] font-medium uppercase tracking-wide text-muted"
-};
-const _hoisted_12 = ["disabled", "aria-label", "aria-pressed", "onClick"];
-const ANY_COLOUR = "conic-gradient(from 90deg, #ff5c5c, #ffd23f, #39e58c, #2dd4bf, #00bcff, #7c5cff, #ff5ca8, #ff5c5c)";
-const CHECKERBOARD = "repeating-conic-gradient(var(--color-line-strong) 0% 25%, transparent 0% 50%) 0 0 / 12px 12px";
-const ROLL_MS = 320;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpColorPicker",
-  props: {
-    modelValue: { default: "#3b82f6" },
-    format: { default: "hex" },
-    alpha: { type: Boolean, default: false },
-    swatches: { default: () => DEFAULT_SWATCHES },
-    hideInput: { type: Boolean },
-    disabled: { type: Boolean },
-    invalid: { type: Boolean },
-    size: { default: "md" },
-    label: {},
-    variant: { default: "field" },
-    selected: { type: Boolean, default: true },
-    ariaLabel: {},
-    side: { default: "bottom" },
-    align: { default: "start" },
-    menu: {},
-    menuItems: {},
-    recent: { type: Boolean, default: false },
-    recentKey: { default: "lp.color.recent" },
-    recentLimit: { default: 8 },
-    labels: {},
-    copyToast: { type: [String, Boolean] }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    function fill(tpl, vars) {
-      return tpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? ""));
-    }
-    const l = useLabels(
-      "colorPicker",
-      {
-        saturation: "Saturation and brightness",
-        hue: "Hue",
-        opacity: "Opacity",
-        value: "Colour value",
-        recent: "Recent",
-        copyHex: "Copy hex",
-        copyRgb: "Copy rgb",
-        copyHsl: "Copy hsl",
-        paste: "Paste colour",
-        formatAs: "Show as",
-        format_hex: "HEX",
-        format_rgb: "RGB",
-        format_hsl: "HSL",
-        saturationValueText: "saturation {s}%, brightness {v}%",
-        copyToast: "Copied {value}"
-      },
-      () => props.labels
-    );
-    const { copy } = useClipboard();
-    const open = ref(false);
-    const hsv = ref({ h: 217, s: 0.76, v: 0.96, a: 1 });
-    function adopt(value) {
-      const rgb = parseColor(value ?? "");
-      if (!rgb) return;
-      const next = rgbToHsv(rgb);
-      if (next.s === 0) next.h = hsv.value.h;
-      if (next.v === 0) next.s = hsv.value.s;
-      hsv.value = next;
-    }
-    adopt(props.modelValue);
-    watch(
-      () => props.modelValue,
-      (v) => {
-        if (v !== current.value) adopt(v);
-      }
-    );
-    const activeFormat = ref(props.format);
-    watch(() => props.format, (f) => activeFormat.value = f);
-    const current = computed(
-      () => formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, activeFormat.value)
-    );
-    function set(patch, commit = false) {
-      if (props.disabled) return;
-      hsv.value = clampHsv({ ...hsv.value, ...patch });
-      emit("update:modelValue", current.value);
-      if (commit) emit("change", current.value);
-    }
-    function trackPointer(e, onMove) {
-      if (props.disabled) return;
-      if (e.button !== 0) return;
-      e.preventDefault();
-      const el = e.currentTarget;
-      const rect = el.getBoundingClientRect();
-      const at = (ev) => {
-        const x = rect.width === 0 ? 0 : (ev.clientX - rect.left) / rect.width;
-        const y = rect.height === 0 ? 0 : (ev.clientY - rect.top) / rect.height;
-        onMove(clamp(x, 0, 1), clamp(y, 0, 1));
-      };
-      el.setPointerCapture(e.pointerId);
-      at(e);
-      const move = (ev) => at(ev);
-      const up = () => {
-        el.removeEventListener("pointermove", move);
-        el.removeEventListener("pointerup", up);
-        el.removeEventListener("pointercancel", up);
-        emit("change", current.value);
-      };
-      el.addEventListener("pointermove", move);
-      el.addEventListener("pointerup", up);
-      el.addEventListener("pointercancel", up);
-    }
-    const onFieldPointer = (e) => trackPointer(e, (x, y) => set({ s: x, v: 1 - y }));
-    const onHuePointer = (e) => trackPointer(e, (x) => set({ h: Math.min(x * 360, 359.9) }));
-    const onAlphaPointer = (e) => trackPointer(e, (x) => set({ a: x }));
-    function step(e, axis) {
-      const big = e.shiftKey;
-      const k = e.key;
-      const arrows = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
-      if (!arrows.includes(k)) return;
-      e.preventDefault();
-      const dx = (k === "ArrowRight" ? 1 : k === "ArrowLeft" ? -1 : 0) * (big ? 10 : 1);
-      const dy = (k === "ArrowUp" ? 1 : k === "ArrowDown" ? -1 : 0) * (big ? 10 : 1);
-      if (axis === "h") {
-        if (k === "Home") return set({ h: 0 }, true);
-        if (k === "End") return set({ h: 359 }, true);
-        return set({ h: hsv.value.h + (dx || dy) }, true);
-      }
-      if (axis === "a") {
-        if (k === "Home") return set({ a: 0 }, true);
-        if (k === "End") return set({ a: 1 }, true);
-        return set({ a: hsv.value.a + (dx || dy) / 100 }, true);
-      }
-      if (k === "Home") return set({ s: 0 }, true);
-      if (k === "End") return set({ s: 1 }, true);
-      set({ s: hsv.value.s + dx / 100, v: hsv.value.v + dy / 100 }, true);
-    }
-    const typed = ref(null);
-    let typedChange = false;
-    const inputValue = computed(() => typed.value ?? current.value);
-    function onInput(e) {
-      const value = e.target.value;
-      typed.value = value;
-      const rgb = parseColor(value);
-      if (!rgb) return;
-      const next = rgbToHsv(rgb);
-      if (next.s === 0) next.h = hsv.value.h;
-      if (next.v === 0) next.s = hsv.value.s;
-      set(props.alpha ? next : { ...next, a: 1 });
-      typedChange = true;
-    }
-    function commitTyped() {
-      if (!typedChange) return;
-      typedChange = false;
-      emit("change", current.value);
-    }
-    function onInputBlur() {
-      typed.value = null;
-      commitTyped();
-    }
-    function pickSwatch(value) {
-      const rgb = parseColor(value);
-      if (!rgb) return;
-      typed.value = null;
-      set(rgbToHsv(rgb), true);
-    }
-    function isActiveSwatch(value) {
-      const rgb = parseColor(value);
-      return !!rgb && formatColor(rgbToHsv(rgb), "hex") === formatColor({ ...hsv.value, a: 1 }, "hex");
-    }
-    function tickClass(value) {
-      const rgb = parseColor(value);
-      return rgb && isLight(rgbToHsv(rgb)) ? "text-black" : "text-white";
-    }
-    const SWATCH_SIZE = { sm: "size-6", md: "size-7", lg: "size-8" };
-    const triggerSize = CONTROL_SIZE;
-    const previewCss = computed(() => formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, "rgb"));
-    const hueCss = computed(() => `hsl(${Math.round(hsv.value.h)}, 100%, 50%)`);
-    const alphaRampStart = computed(() => formatColor({ ...hsv.value, a: 0 }, "rgb"));
-    const fieldCss = computed(() => opaqueCss({ ...hsv.value, s: 1, v: 1 }));
-    const fieldStyle = computed(() => ({
-      background: [
-        "linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))",
-        "linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
-        fieldCss.value
-      ].join(", ")
-    }));
-    const store = useKitStorage();
-    function readRecent() {
-      try {
-        const raw = JSON.parse(store.get(props.recentKey) ?? "[]");
-        return Array.isArray(raw) ? raw.filter((v) => typeof v === "string" && !!parseColor(v)).slice(0, props.recentLimit) : [];
-      } catch {
-        return [];
-      }
-    }
-    const recentColors = ref(props.recent ? readRecent() : []);
-    function remember(value) {
-      if (!props.recent) return;
-      const key = formatColor({ ...hsv.value, a: 1 }, "hex");
-      const without = recentColors.value.filter(
-        (c) => formatColor(rgbToHsv(parseColor(c) ?? { r: 0, g: 0, b: 0, a: 1 }), "hex") !== key
-      );
-      recentColors.value = [value, ...without].slice(0, props.recentLimit);
-      store.set(props.recentKey, JSON.stringify(recentColors.value));
-    }
-    let openedOn = "";
-    watch(open, (isOpen, was) => {
-      if (isOpen) openedOn = current.value;
-      else if (was && current.value !== openedOn) remember(current.value);
-    });
-    const swatchRows = computed(
-      () => [
-        {
-          key: "recent",
-          heading: l.value.recent,
-          colors: props.recent ? recentColors.value : [],
-          cols: "grid-cols-8",
-          size: "size-6"
-        },
-        {
-          key: "presets",
-          heading: "",
-          colors: [...props.swatches],
-          cols: "grid-cols-6",
-          size: "size-7"
-        }
-      ].filter((r) => r.colors.length)
-    );
-    function onPanelOpen(e) {
-      e.preventDefault();
-      e.currentTarget?.focus?.({ preventScroll: true });
-    }
-    function copyAs(fmt) {
-      const text = formatColor(props.alpha ? hsv.value : { ...hsv.value, a: 1 }, fmt);
-      const toast = props.copyToast ?? l.value.copyToast;
-      void copy(text, { toast: toast === false ? false : fill(toast, { value: text }) });
-    }
-    async function pasteColor() {
-      try {
-        const text = await navigator.clipboard.readText();
-        const rgb = parseColor(text);
-        if (!rgb) return;
-        typed.value = null;
-        const next = rgbToHsv(rgb);
-        set(props.alpha ? next : { ...next, a: 1 }, true);
-      } catch {
-      }
-    }
-    const rollText = ref(current.value);
-    const rolling = ref(false);
-    let rollTimer;
-    function setFormat(f) {
-      if (activeFormat.value === f) return;
-      rollText.value = inputValue.value;
-      activeFormat.value = f;
-      if (!prefersReducedMotion()) {
-        rolling.value = true;
-        void nextTick(() => rollText.value = current.value);
-        if (rollTimer) clearTimeout(rollTimer);
-        rollTimer = setTimeout(() => rolling.value = false, ROLL_MS + 40);
-      }
-      typed.value = null;
-      emit("update:modelValue", current.value);
-      emit("change", current.value);
-    }
-    const menuItems = computed(() => {
-      const own = props.menuItems ?? [];
-      if (props.menu === "none") return own;
-      const builtin = [
-        { label: l.value.copyHex, icon: "lucide:copy", onSelect: () => copyAs("hex") },
-        { label: l.value.copyRgb, icon: "lucide:copy", onSelect: () => copyAs("rgb") },
-        { label: l.value.copyHsl, icon: "lucide:copy", onSelect: () => copyAs("hsl") },
-        { label: l.value.paste, icon: "lucide:clipboard", onSelect: pasteColor },
-        {
-          // Ticks rather than a plain list: this is a setting with a current value,
-          // and the menu should say which one is on without being opened twice.
-          label: l.value.formatAs,
-          icon: "lucide:code",
-          separatorBefore: true,
-          children: ["hex", "rgb", "hsl"].map((f) => ({
-            label: l.value[`format_${f}`],
-            checked: activeFormat.value === f,
-            onSelect: () => setFormat(f)
-          }))
-        }
-      ];
-      return own.length ? [...builtin, { ...own[0], separatorBefore: true }, ...own.slice(1)] : builtin;
-    });
-    const attrs = useAttrs();
-    const field = useFieldControl(() => ({
-      wrapped: false,
-      invalid: props.invalid,
-      disabled: props.disabled
-    }));
-    __expose({ open });
-    const portalTo = usePortalTarget();
-    const guardOutside = useOutsideGuard();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(PopoverRoot), {
-        open: open.value,
-        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event)
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(PopoverAnchor), {
-            class: normalizeClass(__props.variant === "swatch" ? "inline-block" : "block w-full")
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$1, { items: menuItems.value }, {
-                default: withCtx(() => [
-                  createVNode(unref(PopoverTrigger), { "as-child": "" }, {
-                    default: withCtx(() => [
-                      __props.variant === "swatch" ? (openBlock(), createElementBlock("button", {
-                        key: 0,
-                        type: "button",
-                        id: unref(field).id,
-                        disabled: unref(field).disabled,
-                        "aria-label": __props.ariaLabel ?? current.value,
-                        title: current.value,
-                        class: normalizeClass(["relative shrink-0 overflow-hidden rounded-full outline-none ring-2 ring-offset-2 ring-offset-surface-raised transition-[box-shadow,scale] duration-(--duration-fast) hover:scale-110 focus-visible:ring-ring data-[state=open]:ring-brand disabled:cursor-not-allowed disabled:opacity-55", [SWATCH_SIZE[__props.size], __props.selected ? "ring-ink" : "ring-line"]]),
-                        style: normalizeStyle({ background: CHECKERBOARD })
-                      }, [
-                        createElementVNode("span", {
-                          class: "block size-full",
-                          style: normalizeStyle({ background: __props.selected ? previewCss.value : ANY_COLOUR })
-                        }, null, 4),
-                        !__props.selected ? (openBlock(), createBlock(_sfc_main$2, {
-                          key: 0,
-                          name: "lucide:pipette",
-                          size: 12,
-                          class: "absolute inset-0 m-auto text-white drop-shadow"
-                        })) : createCommentVNode("", true)
-                      ], 14, _hoisted_1)) : (openBlock(), createElementBlock("button", {
-                        key: 1,
-                        type: "button",
-                        id: unref(field).id,
-                        disabled: unref(field).disabled,
-                        "aria-label": __props.ariaLabel,
-                        "aria-invalid": unref(field).invalid || void 0,
-                        "aria-describedby": unref(mergeDescribedBy)(unref(attrs)["aria-describedby"], unref(field).describedBy),
-                        class: normalizeClass(["group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55", [
-                          unref(triggerSize)[__props.size],
-                          unref(field).invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
-                        ]])
-                      }, [
-                        createElementVNode("span", {
-                          class: "relative size-5 shrink-0 overflow-hidden rounded-inner",
-                          style: normalizeStyle({ background: CHECKERBOARD })
-                        }, [
-                          createElementVNode("span", {
-                            class: "block size-full",
-                            style: normalizeStyle({ backgroundColor: previewCss.value })
-                          }, null, 4),
-                          _cache[4] || (_cache[4] = createElementVNode("span", { class: "pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" }, null, -1))
-                        ], 4),
-                        createElementVNode("span", _hoisted_3, toDisplayString(__props.label ?? current.value), 1),
-                        createVNode(_sfc_main$2, {
-                          name: "lucide:chevron-down",
-                          size: 15,
-                          class: "shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180"
-                        })
-                      ], 10, _hoisted_2))
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["items"])
-            ]),
-            _: 1
-          }, 8, ["class"]),
-          createVNode(unref(PopoverPortal), { to: unref(portalTo) }, {
-            default: withCtx(() => [
-              createVNode(unref(PopoverContent), {
-                onInteractOutside: unref(guardOutside),
-                onEscapeKeyDown: unref(guardOutside),
-                "collision-padding": 8,
-                side: __props.side,
-                align: __props.align,
-                "side-offset": 6,
-                class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) w-64 select-none rounded-card p-3 outline-none"]),
-                onOpenAutoFocus: onPanelOpen
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$1, { items: menuItems.value }, {
-                    default: withCtx(() => [
-                      createElementVNode("div", _hoisted_4, [
-                        createElementVNode("div", {
-                          role: "slider",
-                          tabindex: __props.disabled ? -1 : 0,
-                          "aria-label": unref(l).saturation,
-                          "aria-valuemin": 0,
-                          "aria-valuemax": 100,
-                          "aria-valuenow": Math.round(hsv.value.s * 100),
-                          "aria-valuetext": fill(unref(l).saturationValueText, { s: Math.round(hsv.value.s * 100), v: Math.round(hsv.value.v * 100) }),
-                          class: "relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-control outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                          style: normalizeStyle(fieldStyle.value),
-                          onPointerdown: onFieldPointer,
-                          onKeydown: _cache[0] || (_cache[0] = ($event) => step($event, "sv"))
-                        }, [
-                          createElementVNode("span", {
-                            class: "pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
-                            style: normalizeStyle({
-                              left: `${hsv.value.s * 100}%`,
-                              top: `${(1 - hsv.value.v) * 100}%`,
-                              backgroundColor: previewCss.value
-                            })
-                          }, null, 4)
-                        ], 44, _hoisted_5),
-                        createElementVNode("div", {
-                          role: "slider",
-                          "aria-label": unref(l).hue,
-                          "aria-valuemin": 0,
-                          "aria-valuemax": 360,
-                          "aria-valuenow": Math.round(hsv.value.h),
-                          tabindex: __props.disabled ? -1 : 0,
-                          class: "relative h-3 w-full cursor-pointer touch-none rounded-pill outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                          style: { "background": "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)" },
-                          onPointerdown: onHuePointer,
-                          onKeydown: _cache[1] || (_cache[1] = ($event) => step($event, "h"))
-                        }, [
-                          createElementVNode("span", {
-                            class: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
-                            style: normalizeStyle({ left: `${hsv.value.h / 360 * 100}%`, backgroundColor: hueCss.value })
-                          }, null, 4)
-                        ], 40, _hoisted_6),
-                        __props.alpha ? (openBlock(), createElementBlock("div", {
-                          key: 0,
-                          role: "slider",
-                          "aria-label": unref(l).opacity,
-                          "aria-valuemin": 0,
-                          "aria-valuemax": 100,
-                          "aria-valuenow": Math.round(hsv.value.a * 100),
-                          tabindex: __props.disabled ? -1 : 0,
-                          class: "relative h-3 w-full cursor-pointer touch-none rounded-pill outline-none ring-1 ring-inset ring-line focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                          style: normalizeStyle({ background: CHECKERBOARD }),
-                          onPointerdown: onAlphaPointer,
-                          onKeydown: _cache[2] || (_cache[2] = ($event) => step($event, "a"))
-                        }, [
-                          createElementVNode("div", {
-                            class: "absolute inset-0 overflow-hidden rounded-pill",
-                            style: normalizeStyle({ backgroundImage: `linear-gradient(to right, ${alphaRampStart.value}, ${unref(opaqueCss)(hsv.value)})` })
-                          }, null, 4),
-                          createElementVNode("span", {
-                            class: "pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-pill border-2 border-white shadow ring-1 ring-black/30",
-                            style: normalizeStyle({ left: `${hsv.value.a * 100}%`, backgroundColor: previewCss.value })
-                          }, null, 4)
-                        ], 44, _hoisted_7)) : createCommentVNode("", true),
-                        !__props.hideInput ? (openBlock(), createElementBlock("div", _hoisted_8, [
-                          createElementVNode("span", {
-                            class: "size-4 shrink-0 rounded-[5px] border border-line",
-                            style: normalizeStyle({ backgroundColor: previewCss.value })
-                          }, null, 4),
-                          createElementVNode("span", _hoisted_9, [
-                            withDirectives(createVNode(_sfc_main$3, {
-                              value: rollText.value,
-                              duration: ROLL_MS,
-                              align: "start",
-                              "aria-hidden": "true",
-                              class: "pointer-events-none absolute inset-0 font-mono text-xs text-ink"
-                            }, null, 8, ["value"]), [
-                              [vShow, rolling.value]
-                            ]),
-                            createElementVNode("input", {
-                              value: inputValue.value,
-                              disabled: __props.disabled,
-                              spellcheck: "false",
-                              autocapitalize: "off",
-                              autocomplete: "off",
-                              "aria-label": unref(l).value,
-                              class: normalizeClass(["min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted", rolling.value ? "text-transparent" : ""]),
-                              onInput,
-                              onKeydown: withKeys(commitTyped, ["enter"]),
-                              onBlur: onInputBlur
-                            }, null, 42, _hoisted_10)
-                          ])
-                        ])) : createCommentVNode("", true),
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(swatchRows.value, (row) => {
-                          return openBlock(), createElementBlock("div", {
-                            key: row.key,
-                            class: "flex flex-col gap-1.5"
-                          }, [
-                            row.heading ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(row.heading), 1)) : createCommentVNode("", true),
-                            createElementVNode("div", {
-                              class: normalizeClass(["grid gap-1.5", row.cols])
-                            }, [
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(row.colors, (c) => {
-                                return openBlock(), createElementBlock("button", {
-                                  key: c,
-                                  type: "button",
-                                  disabled: __props.disabled,
-                                  "aria-label": c,
-                                  "aria-pressed": isActiveSwatch(c),
-                                  class: normalizeClass(["relative flex items-center justify-center overflow-hidden rounded-inner outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95", row.size]),
-                                  style: normalizeStyle({ background: CHECKERBOARD }),
-                                  onClick: ($event) => pickSwatch(c)
-                                }, [
-                                  createElementVNode("span", {
-                                    class: "absolute inset-0",
-                                    style: normalizeStyle({ backgroundColor: c })
-                                  }, null, 4),
-                                  _cache[5] || (_cache[5] = createElementVNode("span", { class: "pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" }, null, -1)),
-                                  isActiveSwatch(c) ? (openBlock(), createBlock(_sfc_main$2, {
-                                    key: 0,
-                                    name: "lucide:check",
-                                    size: 13,
-                                    class: normalizeClass(["relative", tickClass(c)])
-                                  }, null, 8, ["class"])) : createCommentVNode("", true)
-                                ], 14, _hoisted_12);
-                              }), 128))
-                            ], 2)
-                          ]);
-                        }), 128)),
-                        renderSlot(_ctx.$slots, "default", {
-                          color: current.value,
-                          hsv: hsv.value
-                        })
-                      ])
-                    ]),
-                    _: 3
-                  }, 8, ["items"])
-                ]),
-                _: 3
-              }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "align", "class"])
-            ]),
-            _: 3
-          }, 8, ["to"])
-        ]),
-        _: 3
-      }, 8, ["open"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};