@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/server/components/color-picker/index.js

@@ -1,911 +1,20 @@
-import { createRequire } from "node:module";
-var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
-// src/components/color-picker/color-picker.svelte
-import * as $4 from "svelte/internal/server";
-import { untrack as untrack2 } from "svelte";
-
-// src/utilities/class-names.ts
-function classNames(...parts) {
-  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
-}
-
-// src/utilities/color-luminance.ts
-function parseColor(input) {
-  const trimmed = input.trim().toLowerCase();
-  const hexMatch = trimmed.match(/^#([0-9a-f]{3,8})$/);
-  if (hexMatch) {
-    return parseHex(hexMatch[1]);
-  }
-  const rgbMatch = trimmed.match(/^rgba?\(\s*([^)]+)\)$/);
-  if (rgbMatch) {
-    return parseRgb(rgbMatch[1]);
-  }
-  const hslMatch = trimmed.match(/^hsla?\(\s*([^)]+)\)$/);
-  if (hslMatch) {
-    return parseHsl(hslMatch[1]);
-  }
-  return null;
-}
-function parseHex(hex) {
-  let r, g, b, a;
-  if (hex.length === 3) {
-    r = parseInt((hex[0] ?? "") + (hex[0] ?? ""), 16);
-    g = parseInt((hex[1] ?? "") + (hex[1] ?? ""), 16);
-    b = parseInt((hex[2] ?? "") + (hex[2] ?? ""), 16);
-    a = 1;
-  } else if (hex.length === 4) {
-    r = parseInt((hex[0] ?? "") + (hex[0] ?? ""), 16);
-    g = parseInt((hex[1] ?? "") + (hex[1] ?? ""), 16);
-    b = parseInt((hex[2] ?? "") + (hex[2] ?? ""), 16);
-    a = parseInt((hex[3] ?? "") + (hex[3] ?? ""), 16) / 255;
-  } else if (hex.length === 6) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = 1;
-  } else if (hex.length === 8) {
-    r = parseInt(hex.slice(0, 2), 16);
-    g = parseInt(hex.slice(2, 4), 16);
-    b = parseInt(hex.slice(4, 6), 16);
-    a = parseInt(hex.slice(6, 8), 16) / 255;
-  } else {
-    return null;
-  }
-  return { r, g, b, a };
-}
-function parseChannelValue(raw) {
-  const trimmed = raw.trim();
-  if (trimmed.includes("/"))
-    return NaN;
-  if (trimmed.endsWith("%")) {
-    return Math.max(0, Math.min(255, parseFloat(trimmed) / 100 * 255));
-  }
-  return Math.max(0, Math.min(255, parseFloat(trimmed)));
-}
-function parseAlphaValue(raw) {
-  const trimmed = raw.trim();
-  if (trimmed.includes("/"))
-    return NaN;
-  if (trimmed.endsWith("%")) {
-    return Math.max(0, Math.min(1, parseFloat(trimmed) / 100));
-  }
-  return Math.max(0, Math.min(1, parseFloat(trimmed)));
-}
-function parseRgb(inner) {
-  if (inner.includes("/"))
-    return null;
-  const parts = inner.split(",").map((p) => p.trim());
-  if (parts.length < 3 || parts.length > 4)
-    return null;
-  const p0 = parts[0] ?? "";
-  const p1 = parts[1] ?? "";
-  const p2 = parts[2] ?? "";
-  const r = parseChannelValue(p0);
-  const g = parseChannelValue(p1);
-  const b = parseChannelValue(p2);
-  const a = parts.length === 4 ? parseAlphaValue(parts[3] ?? "") : 1;
-  if ([r, g, b, a].some(isNaN))
-    return null;
-  return { r, g, b, a };
-}
-function hslToRgb(h, s, l) {
-  h = (h % 360 + 360) % 360;
-  s = Math.max(0, Math.min(1, s));
-  l = Math.max(0, Math.min(1, l));
-  if (s === 0) {
-    const v = Math.round(l * 255);
-    return { r: v, g: v, b: v };
-  }
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = l - c / 2;
-  let rp = 0, gp = 0, bp = 0;
-  if (h < 60) {
-    rp = c;
-    gp = x;
-    bp = 0;
-  } else if (h < 120) {
-    rp = x;
-    gp = c;
-    bp = 0;
-  } else if (h < 180) {
-    rp = 0;
-    gp = c;
-    bp = x;
-  } else if (h < 240) {
-    rp = 0;
-    gp = x;
-    bp = c;
-  } else if (h < 300) {
-    rp = x;
-    gp = 0;
-    bp = c;
-  } else {
-    rp = c;
-    gp = 0;
-    bp = x;
-  }
-  return {
-    r: Math.round((rp + m) * 255),
-    g: Math.round((gp + m) * 255),
-    b: Math.round((bp + m) * 255)
-  };
-}
-function parseHsl(inner) {
-  if (inner.includes("/"))
-    return null;
-  const parts = inner.split(",").map((p) => p.trim());
-  if (parts.length < 3 || parts.length > 4)
-    return null;
-  const p0 = parts[0] ?? "";
-  const p1 = parts[1] ?? "";
-  const p2 = parts[2] ?? "";
-  const h = parseFloat(p0);
-  const sPct = p1.endsWith("%") ? parseFloat(p1) : NaN;
-  const lPct = p2.endsWith("%") ? parseFloat(p2) : NaN;
-  const a = parts.length === 4 ? parseAlphaValue(parts[3] ?? "") : 1;
-  if ([h, sPct, lPct, a].some(isNaN))
-    return null;
-  const { r, g, b } = hslToRgb(h, sPct / 100, lPct / 100);
-  return { r, g, b, a };
-}
-function hasAlpha(input) {
-  const parsed = parseColor(input);
-  if (!parsed)
-    return false;
-  return parsed.a < 1;
-}
-function linearize(channel) {
-  const cs = channel / 255;
-  return cs <= 0.04045 ? cs / 12.92 : ((cs + 0.055) / 1.055) ** 2.4;
-}
-function relativeLuminance({ r, g, b }) {
-  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
-}
-function pickContrastColor(input) {
-  const parsed = parseColor(input);
-  if (!parsed)
-    return "white";
-  const L = relativeLuminance(parsed);
-  const contrastBlack = (L + 0.05) / 0.05;
-  const contrastWhite = 1.05 / (L + 0.05);
-  return contrastBlack >= contrastWhite ? "black" : "white";
-}
-
-// src/components/color-swatch-picker/color-swatch-picker.svelte
-import * as $3 from "svelte/internal/server";
-import { tick, untrack } from "svelte";
-
-// ../../node_modules/esm-env/false.js
-var false_default = false;
-// ../../node_modules/esm-env/true.js
-var true_default = true;
-// src/utilities/dev-warn.ts
-function devWarn(message, ...args) {
-  if (!true_default)
-    return;
-  console.warn(message, ...args);
-}
-
-// src/utilities/roving-tabindex.ts
-var ROVING_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]);
-function isRovingKey(key) {
-  return ROVING_KEYS.has(key);
-}
-function findNextIndex(currentIndex, length, direction, isDisabled) {
-  if (length === 0)
-    return -1;
-  if (!isDisabled) {
-    return (currentIndex + direction + length) % length;
-  }
-  for (let offset = 1;offset <= length; offset += 1) {
-    const candidateIndex = (currentIndex + offset * direction + length * offset) % length;
-    if (!isDisabled(candidateIndex)) {
-      return candidateIndex;
-    }
-  }
-  return currentIndex;
-}
-function findFirstIndex(length, isDisabled, currentIndex = 0) {
-  if (length === 0)
-    return -1;
-  if (!isDisabled)
-    return 0;
-  for (let index = 0;index < length; index += 1) {
-    if (!isDisabled(index))
-      return index;
-  }
-  return currentIndex;
-}
-function findLastIndex(length, isDisabled, currentIndex = 0) {
-  if (length === 0)
-    return -1;
-  if (!isDisabled)
-    return length - 1;
-  for (let index = length - 1;index >= 0; index -= 1) {
-    if (!isDisabled(index))
-      return index;
-  }
-  return currentIndex;
-}
-function handleRovingKeydown(event, currentIndex, length, options = {}) {
-  const { isDisabled, vertical = true, horizontal = true } = options;
-  if (length === 0)
-    return null;
-  switch (event.key) {
-    case "ArrowRight":
-      return horizontal ? findNextIndex(currentIndex, length, 1, isDisabled) : null;
-    case "ArrowDown":
-      return vertical ? findNextIndex(currentIndex, length, 1, isDisabled) : null;
-    case "ArrowLeft":
-      return horizontal ? findNextIndex(currentIndex, length, -1, isDisabled) : null;
-    case "ArrowUp":
-      return vertical ? findNextIndex(currentIndex, length, -1, isDisabled) : null;
-    case "Home":
-      return findFirstIndex(length, isDisabled, currentIndex);
-    case "End":
-      return findLastIndex(length, isDisabled, currentIndex);
-    default:
-      return null;
-  }
-}
-function getFocusableIndex(selectedIndex, length, isDisabled) {
-  if (length === 0)
-    return -1;
-  if (selectedIndex >= 0 && selectedIndex < length)
-    return selectedIndex;
-  return findFirstIndex(length, isDisabled, 0);
-}
-
-// ../../node_modules/lucide-svelte/dist/icons/check.svelte
-import * as $2 from "svelte/internal/server";
-
-// ../../node_modules/lucide-svelte/dist/Icon.svelte
-import * as $ from "svelte/internal/server";
-
-// ../../node_modules/lucide-svelte/dist/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": 2,
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-};
-var defaultAttributes_default = defaultAttributes;
-
-// ../../node_modules/lucide-svelte/dist/Icon.svelte
-function Icon($$renderer, $$props) {
-  const $$sanitized_props = $.sanitize_props($$props);
-  const $$restProps = $.rest_props($$sanitized_props, [
-    "name",
-    "color",
-    "size",
-    "strokeWidth",
-    "absoluteStrokeWidth",
-    "iconNode"
-  ]);
-  $$renderer.component(($$renderer2) => {
-    let name = $.fallback($$props["name"], undefined);
-    let color = $.fallback($$props["color"], "currentColor");
-    let size = $.fallback($$props["size"], 24);
-    let strokeWidth = $.fallback($$props["strokeWidth"], 2);
-    let absoluteStrokeWidth = $.fallback($$props["absoluteStrokeWidth"], false);
-    let iconNode = $.fallback($$props["iconNode"], () => [], true);
-    const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-      return Boolean(className) && array.indexOf(className) === index;
-    }).join(" ");
-    $$renderer2.push(`<svg${$.attributes({
-      ...defaultAttributes_default,
-      ...$$restProps,
-      width: size,
-      height: size,
-      stroke: color,
-      "stroke-width": absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-      class: $.clsx(mergeClasses("lucide-icon", "lucide", name ? `lucide-${name}` : "", $$sanitized_props.class))
-    }, undefined, undefined, undefined, 3)}><!--[-->`);
-    const each_array = $.ensure_array_like(iconNode);
-    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
-      let [tag, attrs] = each_array[$$index];
-      $.element($$renderer2, tag, () => {
-        $$renderer2.push(`${$.attributes({ ...attrs }, undefined, undefined, undefined, 3)}`);
-      });
-    }
-    $$renderer2.push(`<!--]--><!--[-->`);
-    $.slot($$renderer2, $$props, "default", {}, null);
-    $$renderer2.push(`<!--]--></svg>`);
-    $.bind_props($$props, {
-      name,
-      color,
-      size,
-      strokeWidth,
-      absoluteStrokeWidth,
-      iconNode
-    });
-  });
-}
-
-// ../../node_modules/lucide-svelte/dist/icons/check.svelte
-function Check($$renderer, $$props) {
-  const $$sanitized_props = $2.sanitize_props($$props);
-  const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
-  Icon($$renderer, $2.spread_props([
-    { name: "check" },
-    $$sanitized_props,
-    {
-      iconNode,
-      children: ($$renderer2) => {
-        $$renderer2.push(`<!--[-->`);
-        $2.slot($$renderer2, $$props, "default", {}, null);
-        $$renderer2.push(`<!--]-->`);
-      },
-      $$slots: { default: true }
-    }
-  ]));
-}
-// src/components/color-swatch-picker/color-swatch-picker.svelte
-function Color_swatch_picker($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    let {
-      value,
-      defaultValue,
-      colors,
-      shape = "circle",
-      size = "md",
-      layout = "grid",
-      disabled = false,
-      label,
-      class: className,
-      onchange,
-      indicator
-    } = $$props;
-    let internalValue = untrack(() => defaultValue) ?? "";
-    const selected = $3.derived(() => value ?? internalValue);
-    let userFocusIndex = null;
-    const effectiveFocusIndex = $3.derived(() => {
-      if (colors.length === 0)
-        return -1;
-      if (userFocusIndex !== null && userFocusIndex < colors.length && !colors[userFocusIndex]?.disabled) {
-        return userFocusIndex;
-      }
-      const selectedIndex2 = colors.findIndex((s) => s.color === selected());
-      if (selectedIndex2 !== -1 && !colors[selectedIndex2]?.disabled) {
-        return selectedIndex2;
-      }
-      const firstEnabled = colors.findIndex((s) => !s.disabled);
-      if (firstEnabled !== -1)
-        return firstEnabled;
-      return 0;
-    });
-    let liRefs = [];
-    const selectedIndex = $3.derived(() => colors.findIndex((s) => s.color === selected()));
-    function isItemDisabledForRoving(index) {
-      return colors[index]?.disabled === true;
-    }
-    function isInteractive(index) {
-      return !disabled && !colors[index]?.disabled;
-    }
-    function selectSwatch(index) {
-      if (!isInteractive(index))
-        return;
-      const swatch = colors[index];
-      if (!swatch)
-        return;
-      internalValue = swatch.color;
-      onchange?.(swatch.color);
-    }
-    async function handleKeydown(event) {
-      if (disabled)
-        return;
-      const { key } = event;
-      if (key === "Enter" || key === " ") {
-        if (effectiveFocusIndex() < 0)
-          return;
-        event.preventDefault();
-        selectSwatch(effectiveFocusIndex());
-        return;
-      }
-      const newIndex = handleRovingKeydown(event, effectiveFocusIndex(), colors.length, {
-        vertical: true,
-        horizontal: layout === "grid",
-        isDisabled: isItemDisabledForRoving
-      });
-      if (newIndex !== null) {
-        event.preventDefault();
-        if (newIndex !== effectiveFocusIndex()) {
-          userFocusIndex = newIndex;
-          await tick();
-          liRefs[newIndex]?.focus();
-        }
-      }
-    }
-    function handleClick(index) {
-      if (!isInteractive(index))
-        return;
-      userFocusIndex = index;
-      selectSwatch(index);
-    }
-    $$renderer2.push(`<ul role="listbox"${$3.attr("aria-label", label)}${$3.attr("aria-disabled", disabled ? "true" : undefined)}${$3.attr("aria-orientation", layout === "stack" ? "vertical" : undefined)}${$3.attr_class($3.clsx(classNames("cinder-color-swatch-picker", className)))}${$3.attr("data-cinder-size", size)}${$3.attr("data-cinder-shape", shape)}${$3.attr("data-cinder-layout", layout)}><!--[-->`);
-    const each_array = $3.ensure_array_like(colors);
-    for (let index = 0, $$length = each_array.length;index < $$length; index++) {
-      let swatch = each_array[index];
-      const isSelected = index === selectedIndex();
-      const isDisabled = swatch.disabled === true;
-      const contrastColor = pickContrastColor(swatch.color);
-      const alpha = hasAlpha(swatch.color);
-      $$renderer2.push(`<li role="option"${$3.attr("aria-selected", isSelected)}${$3.attr("aria-label", swatch.name ? `${swatch.name}, ${swatch.color}` : swatch.color)}${$3.attr("aria-disabled", disabled || isDisabled ? "true" : undefined)}${$3.attr("tabindex", index === effectiveFocusIndex() ? 0 : -1)} class="cinder-color-swatch-picker__swatch"${$3.attr("data-cinder-selected", isSelected ? "" : undefined)}${$3.attr("data-cinder-disabled", isDisabled ? "" : undefined)}${$3.attr("data-cinder-alpha", alpha ? "" : undefined)}${$3.attr_style(`--swatch-color: ${$3.stringify(swatch.color)}`)}>`);
-      if (isSelected) {
-        $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<span class="cinder-color-swatch-picker__indicator"${$3.attr_style(`color: ${$3.stringify(contrastColor)}`)}>`);
-        if (indicator) {
-          $$renderer2.push("<!--[0-->");
-          indicator($$renderer2, { swatch, contrastColor });
-          $$renderer2.push(`<!---->`);
-        } else {
-          $$renderer2.push("<!--[-1-->");
-          Check($$renderer2, { "aria-hidden": "true" });
-        }
-        $$renderer2.push(`<!--]--></span>`);
-      } else {
-        $$renderer2.push("<!--[-1-->");
-      }
-      $$renderer2.push(`<!--]--></li>`);
-    }
-    $$renderer2.push(`<!--]--></ul>`);
-  });
-}
-
-// src/components/color-picker/color-picker.svelte
-function Color_picker($$renderer, $$props) {
-  $$renderer.component(($$renderer2) => {
-    const pickerId = $4.props_id($$renderer2);
-    let {
-      value = undefined,
-      defaultValue,
-      alpha = false,
-      name,
-      swatches,
-      disabled = false,
-      class: className,
-      label = "Color picker",
-      onchange,
-      oninput
-    } = $$props;
-    const gradientId = `${pickerId}-gradient`;
-    const hueId = `${pickerId}-hue`;
-    const alphaId = `${pickerId}-alpha`;
-    const previewId = `${pickerId}-preview`;
-    let hue = 0;
-    let saturation = 100;
-    let lightnessValue = 50;
-    let alphaValue = 1;
-    let internalValue = "";
-    let lastEmittedHex = "";
-    let isDragging = false;
-    function clamp(n, min, max) {
-      return Math.max(min, Math.min(max, n));
-    }
-    function toHex2(n) {
-      return clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
-    }
-    function normalizeHue(h) {
-      return Math.min((h % 360 + 360) % 360, 359);
-    }
-    function rgbToHsl(r, g, b) {
-      const rn = r / 255;
-      const gn = g / 255;
-      const bn = b / 255;
-      const max = Math.max(rn, gn, bn);
-      const min = Math.min(rn, gn, bn);
-      const l = (max + min) / 2;
-      if (max === min)
-        return { h: 0, s: 0, l: l * 100 };
-      const d = max - min;
-      const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      let h = 0;
-      if (max === rn)
-        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
-      else if (max === gn)
-        h = ((bn - rn) / d + 2) * 60;
-      else
-        h = ((rn - gn) / d + 4) * 60;
-      return { h, s: s * 100, l: l * 100 };
-    }
-    function hslToRgb2(h, s, l) {
-      const sn = clamp(s, 0, 100) / 100;
-      const ln = clamp(l, 0, 100) / 100;
-      const hn = (h % 360 + 360) % 360 / 360;
-      if (sn === 0) {
-        const v = Math.round(ln * 255);
-        return { r: v, g: v, b: v };
-      }
-      const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn;
-      const p = 2 * ln - q;
-      const hueToRgb = (t) => {
-        let tn = t;
-        if (tn < 0)
-          tn += 1;
-        if (tn > 1)
-          tn -= 1;
-        if (tn < 1 / 6)
-          return p + (q - p) * 6 * tn;
-        if (tn < 1 / 2)
-          return q;
-        if (tn < 2 / 3)
-          return p + (q - p) * (2 / 3 - tn) * 6;
-        return p;
-      };
-      return {
-        r: Math.round(hueToRgb(hn + 1 / 3) * 255),
-        g: Math.round(hueToRgb(hn) * 255),
-        b: Math.round(hueToRgb(hn - 1 / 3) * 255)
-      };
-    }
-    function formatHex(h, s, l, a, withAlpha) {
-      const { r, g, b } = hslToRgb2(h, s, l);
-      const base = `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
-      if (!withAlpha)
-        return base;
-      return base + toHex2(a * 255);
-    }
-    function parseToHsla(input) {
-      const parsed = parseColor(input);
-      if (!parsed)
-        return null;
-      const { h, s, l } = rgbToHsl(parsed.r, parsed.g, parsed.b);
-      return { h: normalizeHue(h), s, l, a: parsed.a };
-    }
-    function applyHsla(next) {
-      hue = next.h;
-      saturation = next.s;
-      lightnessValue = next.l;
-      alphaValue = alpha ? next.a : 1;
-    }
-    const initialValue = untrack2(() => value);
-    const initialDefaultValue = untrack2(() => defaultValue);
-    const initialAlpha = untrack2(() => alpha);
-    if (initialValue === undefined && initialDefaultValue) {
-      const parsed = parseToHsla(initialDefaultValue);
-      if (parsed) {
-        applyHsla(parsed);
-        internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
-      } else {
-        hue = 0;
-        saturation = 0;
-        lightnessValue = 0;
-        alphaValue = 1;
-        internalValue = "";
-        lastEmittedHex = "";
-      }
-    } else if (initialValue !== undefined) {
-      const parsed = parseToHsla(initialValue);
-      if (parsed) {
-        applyHsla(parsed);
-        internalValue = formatHex(parsed.h, parsed.s, parsed.l, parsed.a, initialAlpha);
-      } else {
-        hue = 0;
-        saturation = 0;
-        lightnessValue = 0;
-        alphaValue = 1;
-        internalValue = "";
-        lastEmittedHex = "";
-      }
-    }
-    function emit(reason) {
-      const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
-      internalValue = hex;
-      lastEmittedHex = hex;
-      if (value !== undefined)
-        value = hex;
-      oninput?.(hex);
-      if (reason === "change")
-        onchange?.(hex);
-    }
-    function commitFromHsla(next, reason) {
-      applyHsla(next);
-      emit(reason);
-    }
-    function commitCurrentValueChange() {
-      const hex = formatHex(hue, saturation, lightnessValue, alphaValue, alpha);
-      internalValue = hex;
-      lastEmittedHex = hex;
-      if (value !== undefined)
-        value = hex;
-      onchange?.(hex);
-    }
-    let gradientElement = null;
-    function pointerToHsl(event) {
-      const target = gradientElement;
-      if (!target)
-        return { s: saturation, l: lightnessValue };
-      const rect = target.getBoundingClientRect();
-      const x = clamp(event.clientX - rect.left, 0, rect.width);
-      const y = clamp(event.clientY - rect.top, 0, rect.height);
-      const sv = rect.width === 0 ? 0 : x / rect.width;
-      const vv = rect.height === 0 ? 1 : 1 - y / rect.height;
-      const l = vv * (1 - sv / 2);
-      const s = l === 0 || l === 1 ? 0 : (vv - l) / Math.min(l, 1 - l);
-      return { s: s * 100, l: l * 100 };
-    }
-    function handleGradientPointerDown(event) {
-      if (disabled)
-        return;
-      event.preventDefault();
-      gradientElement?.setPointerCapture(event.pointerId);
-      isDragging = true;
-      const { s, l } = pointerToHsl(event);
-      commitFromHsla({ h: hue, s, l, a: alphaValue }, "input");
-    }
-    function handleGradientPointerMove(event) {
-      if (!isDragging || disabled)
-        return;
-      const { s, l } = pointerToHsl(event);
-      commitFromHsla({ h: hue, s, l, a: alphaValue }, "input");
-    }
-    function handleGradientPointerUp(event) {
-      if (!isDragging)
-        return;
-      isDragging = false;
-      gradientElement?.releasePointerCapture(event.pointerId);
-      commitCurrentValueChange();
-    }
-    function handleGradientPointerCancel(event) {
-      if (!isDragging)
-        return;
-      isDragging = false;
-      gradientElement?.releasePointerCapture(event.pointerId);
-    }
-    let hueElement = null;
-    let alphaElement = null;
-    let draggingSlider = null;
-    function pointerToFraction(event, element2) {
-      const rect = element2.getBoundingClientRect();
-      const x = clamp(event.clientX - rect.left, 0, rect.width);
-      return rect.width === 0 ? 0 : x / rect.width;
-    }
-    function handleHuePointerDown(event) {
-      if (disabled || !hueElement)
-        return;
-      event.preventDefault();
-      hueElement.setPointerCapture(event.pointerId);
-      draggingSlider = "hue";
-      const fraction = pointerToFraction(event, hueElement);
-      commitFromHsla({
-        h: fraction * 359,
-        s: saturation,
-        l: lightnessValue,
-        a: alphaValue
-      }, "input");
-    }
-    function handleHuePointerMove(event) {
-      if (draggingSlider !== "hue" || disabled || !hueElement)
-        return;
-      const fraction = pointerToFraction(event, hueElement);
-      commitFromHsla({
-        h: fraction * 359,
-        s: saturation,
-        l: lightnessValue,
-        a: alphaValue
-      }, "input");
-    }
-    function handleHuePointerUp(event) {
-      if (draggingSlider !== "hue")
-        return;
-      draggingSlider = null;
-      hueElement?.releasePointerCapture(event.pointerId);
-      commitCurrentValueChange();
-    }
-    function handleHuePointerCancel(event) {
-      if (draggingSlider !== "hue")
-        return;
-      draggingSlider = null;
-      hueElement?.releasePointerCapture(event.pointerId);
-    }
-    function handleAlphaPointerDown(event) {
-      if (disabled || !alphaElement)
-        return;
-      event.preventDefault();
-      alphaElement.setPointerCapture(event.pointerId);
-      draggingSlider = "alpha";
-      const fraction = pointerToFraction(event, alphaElement);
-      commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: fraction }, "input");
-    }
-    function handleAlphaPointerMove(event) {
-      if (draggingSlider !== "alpha" || disabled || !alphaElement)
-        return;
-      const fraction = pointerToFraction(event, alphaElement);
-      commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: fraction }, "input");
-    }
-    function handleAlphaPointerUp(event) {
-      if (draggingSlider !== "alpha")
-        return;
-      draggingSlider = null;
-      alphaElement?.releasePointerCapture(event.pointerId);
-      commitCurrentValueChange();
-    }
-    function handleAlphaPointerCancel(event) {
-      if (draggingSlider !== "alpha")
-        return;
-      draggingSlider = null;
-      alphaElement?.releasePointerCapture(event.pointerId);
-    }
-    function adjustHue(delta) {
-      const next = ((hue + delta) % 360 + 360) % 360;
-      commitFromHsla({ h: next, s: saturation, l: lightnessValue, a: alphaValue }, "change");
-    }
-    function adjustAlpha(delta) {
-      const next = clamp(alphaValue + delta, 0, 1);
-      commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: next }, "change");
-    }
-    function handleHueKeydown(event) {
-      if (disabled)
-        return;
-      const step = event.shiftKey ? 10 : 1;
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          event.preventDefault();
-          adjustHue(-step);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          event.preventDefault();
-          adjustHue(step);
-          break;
-        case "Home":
-          event.preventDefault();
-          commitFromHsla({ h: 0, s: saturation, l: lightnessValue, a: alphaValue }, "change");
-          break;
-        case "End":
-          event.preventDefault();
-          commitFromHsla({ h: 359, s: saturation, l: lightnessValue, a: alphaValue }, "change");
-          break;
-        case "PageUp":
-          event.preventDefault();
-          adjustHue(36);
-          break;
-        case "PageDown":
-          event.preventDefault();
-          adjustHue(-36);
-          break;
-      }
-    }
-    function handleAlphaKeydown(event) {
-      if (disabled)
-        return;
-      const step = event.shiftKey ? 0.1 : 0.01;
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          event.preventDefault();
-          adjustAlpha(-step);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          event.preventDefault();
-          adjustAlpha(step);
-          break;
-        case "Home":
-          event.preventDefault();
-          commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 0 }, "change");
-          break;
-        case "End":
-          event.preventDefault();
-          commitFromHsla({ h: hue, s: saturation, l: lightnessValue, a: 1 }, "change");
-          break;
-        case "PageUp":
-          event.preventDefault();
-          adjustAlpha(0.1);
-          break;
-        case "PageDown":
-          event.preventDefault();
-          adjustAlpha(-0.1);
-          break;
-      }
-    }
-    function handleGradientKeydown(event) {
-      if (disabled)
-        return;
-      const step = event.shiftKey ? 10 : 1;
-      let nextS = saturation;
-      let nextL = lightnessValue;
-      let handled = false;
-      switch (event.key) {
-        case "ArrowLeft":
-          nextS = clamp(saturation - step, 0, 100);
-          handled = true;
-          break;
-        case "ArrowRight":
-          nextS = clamp(saturation + step, 0, 100);
-          handled = true;
-          break;
-        case "ArrowUp":
-          nextL = clamp(lightnessValue + step, 0, 100);
-          handled = true;
-          break;
-        case "ArrowDown":
-          nextL = clamp(lightnessValue - step, 0, 100);
-          handled = true;
-          break;
-      }
-      if (handled) {
-        event.preventDefault();
-        commitFromHsla({ h: hue, s: nextS, l: nextL, a: alphaValue }, "change");
-      }
-    }
-    function normalizeSwatch(swatch) {
-      const parsed = parseToHsla(swatch);
-      if (!parsed)
-        return null;
-      return formatHex(parsed.h, parsed.s, parsed.l, parsed.a, alpha).toLowerCase();
-    }
-    const normalizedSwatchColors = $4.derived(() => (swatches ?? []).map((swatch) => ({ color: normalizeSwatch(swatch) ?? swatch })));
-    const currentHex = $4.derived(() => formatHex(hue, saturation, lightnessValue, alphaValue, alpha));
-    function handleSwatchChange(selectedColor) {
-      if (disabled)
-        return;
-      const parsed = parseToHsla(selectedColor);
-      if (!parsed)
-        return;
-      commitFromHsla(parsed, "change");
-    }
-    let hiddenInput = null;
-    const hueColor = $4.derived(() => `hsl(${hue}, 100%, 50%)`);
-    const previewColor = $4.derived(() => internalValue === "" ? "transparent" : alpha ? `hsla(${hue}, ${saturation}%, ${lightnessValue}%, ${alphaValue})` : `hsl(${hue}, ${saturation}%, ${lightnessValue}%)`);
-    const handlePosition = $4.derived(() => {
-      const ln = lightnessValue / 100;
-      const sn = saturation / 100;
-      const v = ln + sn * Math.min(ln, 1 - ln);
-      const svFromHsl = v === 0 ? 0 : 2 * (1 - ln / v);
-      return { x: svFromHsl * 100, y: (1 - v) * 100 };
-    });
-    const hueAriaValue = $4.derived(() => Math.round(hue));
-    const alphaAriaValue = $4.derived(() => Math.round(alphaValue * 100));
-    $$renderer2.push(`<div${$4.attr_class($4.clsx(classNames("cinder-color-picker", className)))}${$4.attr("data-cinder-disabled", disabled ? "" : undefined)}${$4.attr("data-cinder-alpha", alpha ? "" : undefined)}${$4.attr("aria-label", label)} role="group"${$4.attr("id", pickerId)}><div${$4.attr("id", gradientId)} role="application" aria-label="Color saturation and lightness. Use a pointer to select; arrow keys provide coarse keyboard adjustment."${$4.attr("aria-describedby", previewId)}${$4.attr("aria-disabled", disabled ? "true" : undefined)} class="cinder-color-picker__gradient"${$4.attr_style(`--cinder-color-picker-hue: ${$4.stringify(hueColor())};`)}${$4.attr("tabindex", disabled ? -1 : 0)}><div class="cinder-color-picker__gradient-handle"${$4.attr_style(`left: ${$4.stringify(handlePosition().x)}%; top: ${$4.stringify(handlePosition().y)}%;`)} aria-hidden="true"></div></div> <div${$4.attr("id", hueId)} role="slider" aria-label="Hue"${$4.attr("aria-valuemin", 0)}${$4.attr("aria-valuemax", 359)}${$4.attr("aria-valuenow", hueAriaValue())}${$4.attr("aria-disabled", disabled ? "true" : undefined)}${$4.attr("tabindex", disabled ? -1 : 0)} class="cinder-color-picker__hue"><div class="cinder-color-picker__hue-thumb"${$4.attr_style(`left: ${$4.stringify(hue / 359 * 100)}%;`)} aria-hidden="true"></div></div> `);
-    if (alpha) {
-      $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div${$4.attr("id", alphaId)} role="slider" aria-label="Alpha"${$4.attr("aria-valuemin", 0)}${$4.attr("aria-valuemax", 100)}${$4.attr("aria-valuenow", alphaAriaValue())}${$4.attr("aria-valuetext", `${$4.stringify(alphaAriaValue())}%`)}${$4.attr("aria-disabled", disabled ? "true" : undefined)}${$4.attr("tabindex", disabled ? -1 : 0)} class="cinder-color-picker__alpha"${$4.attr_style(`--cinder-color-picker-base: hsl(${$4.stringify(hue)}, ${$4.stringify(saturation)}%, ${$4.stringify(lightnessValue)}%);`)}><div class="cinder-color-picker__alpha-thumb"${$4.attr_style(`left: ${$4.stringify(alphaValue * 100)}%;`)} aria-hidden="true"></div></div>`);
-    } else {
-      $$renderer2.push("<!--[-1-->");
-    }
-    $$renderer2.push(`<!--]--> <div class="cinder-color-picker__footer"><div${$4.attr("id", previewId)} role="img" class="cinder-color-picker__preview"${$4.attr("data-cinder-alpha", alpha ? "" : undefined)}${$4.attr("aria-label", internalValue ? `Selected color: ${internalValue}` : "Selected color: none")}${$4.attr_style(`--cinder-color-picker-preview: ${$4.stringify(previewColor())};`)}></div> <span class="cinder-color-picker__hex-value" aria-hidden="true">${$4.escape(internalValue || "—")}</span></div> `);
-    if (normalizedSwatchColors().length > 0) {
-      $$renderer2.push("<!--[0-->");
-      Color_swatch_picker($$renderer2, {
-        colors: normalizedSwatchColors(),
-        value: internalValue !== "" ? currentHex().toLowerCase() : "",
-        label: "Color swatches",
-        size: "sm",
-        disabled,
-        class: "cinder-color-picker__swatches",
-        onchange: handleSwatchChange
-      });
-    } else {
-      $$renderer2.push("<!--[-1-->");
-    }
-    $$renderer2.push(`<!--]--> `);
-    if (name) {
-      $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<input type="hidden"${$4.attr("name", name)}${$4.attr("value", internalValue)}/>`);
-    } else {
-      $$renderer2.push("<!--[-1-->");
-      $$renderer2.push(`<input type="hidden"${$4.attr("value", internalValue)} hidden=""/>`);
-    }
-    $$renderer2.push(`<!--]--></div>`);
-    $4.bind_props($$props, { value });
-  });
-}
-
-// src/components/color-picker/index.ts
-var color_picker_default = Color_picker;
+import {
+  Color_picker,
+  color_picker_default
+} from "../../index.server-b14k8cq5.js";
+import"../../index.server-vqhdvsx5.js";
+import"../../index.server-7wsshxkg.js";
+import"../../index.server-0a8m173j.js";
+import"../../index.server-9r6rts7c.js";
+import"../../index.server-y0q949bm.js";
+import"../../index.server-2ymxf0ra.js";
+import"../../index.server-nj8mebze.js";
+import"../../index.server-ge07r1p8.js";
+import"../../index.server-z7nvkz8v.js";
+import"../../index.server-37x76zdn.js";
 export {
   color_picker_default as default,
   Color_picker as ColorPicker
 };
 
-//# debugId=FA3B6A778C4BAC0364756E2164756E21
+//# debugId=570C4A0E5E73886A64756E2164756E21