@alfadocs/ui-kit 0.0.12

package/dist/_chunks/color-picker-CiotzQJF.js

@@ -0,0 +1,554 @@
+import { jsx as l, jsxs as h, Fragment as we } from "react/jsx-runtime";
+import { forwardRef as $e, useId as Ne, useState as P, useMemo as F, useCallback as ke, useRef as H, useEffect as ee } from "react";
+import * as I from "@radix-ui/react-popover";
+import { c as re } from "./index-D2ZczOXr.js";
+import { useTranslation as ye } from "react-i18next";
+import { u as Pe } from "./form-field-context-94LwgYTQ.js";
+import { S as ne } from "./slider-B3DBwmcm.js";
+import { C as oe } from "./check-DPdL_Sm7.js";
+import { X as Ae } from "./x-CCcI3eJp.js";
+function V(e) {
+  let a = e.startsWith("#") ? e.slice(1) : e;
+  (a.length === 3 || a.length === 4) && (a = a.split("").map((d) => d + d).join(""));
+  const n = parseInt(a.slice(0, 2), 16) / 255, r = parseInt(a.slice(2, 4), 16) / 255, o = parseInt(a.slice(4, 6), 16) / 255, i = a.length === 8 ? parseInt(a.slice(6, 8), 16) / 255 : 1;
+  return se(n, r, o, i);
+}
+function se(e, a, n, r) {
+  const o = Math.max(e, a, n), i = Math.min(e, a, n), d = (o + i) / 2;
+  let m = 0, b = 0;
+  if (o !== i) {
+    const p = o - i;
+    b = d > 0.5 ? p / (2 - o - i) : p / (o + i), o === e ? m = ((a - n) / p + (a < n ? 6 : 0)) / 6 : o === a ? m = ((n - e) / p + 2) / 6 : m = ((e - a) / p + 4) / 6;
+  }
+  return {
+    h: Math.round(m * 360),
+    s: Math.round(b * 100),
+    l: Math.round(d * 100),
+    a: Math.round(r * 100) / 100
+  };
+}
+function $(e) {
+  const { r: a, g: n, b: r } = G(e), o = (d) => Math.round(d * 255).toString(16).padStart(2, "0"), i = `#${o(a)}${o(n)}${o(r)}`;
+  return e.a < 1 ? `${i}${o(e.a)}` : i;
+}
+function Me(e) {
+  const { r: a, g: n, b: r } = G(e), o = Math.round(a * 255), i = Math.round(n * 255), d = Math.round(r * 255);
+  return e.a < 1 ? `rgba(${o}, ${i}, ${d}, ${e.a})` : `rgba(${o}, ${i}, ${d}, 1)`;
+}
+function G(e) {
+  const a = e.h / 360, n = e.s / 100, r = e.l / 100;
+  if (n === 0)
+    return { r, g: r, b: r };
+  const o = r < 0.5 ? r * (1 + n) : r + n - r * n, i = 2 * r - o;
+  return {
+    r: _(i, o, a + 1 / 3),
+    g: _(i, o, a),
+    b: _(i, o, a - 1 / 3)
+  };
+}
+function _(e, a, n) {
+  let r = n;
+  return r < 0 && (r += 1), r > 1 && (r -= 1), r < 1 / 6 ? e + (a - e) * 6 * r : r < 1 / 2 ? a : r < 2 / 3 ? e + (a - e) * (2 / 3 - r) * 6 : e;
+}
+function B(e, a) {
+  switch (a) {
+    case "hex":
+      return $(e);
+    case "hsl":
+      return e.a < 1 ? `hsla(${e.h}, ${e.s}%, ${e.l}%, ${e.a})` : `hsl(${e.h}, ${e.s}%, ${e.l}%)`;
+    case "rgba":
+      return Me(e);
+  }
+}
+function L(e) {
+  const a = e.trim();
+  if (!a) return null;
+  if (a.startsWith("#")) {
+    const o = a.slice(1);
+    return !/^[0-9a-fA-F]{3,8}$/.test(o) || ![3, 4, 6, 8].includes(o.length) ? null : V(a);
+  }
+  const n = a.match(
+    /^hsla?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+))?\s*\)$/
+  );
+  if (n)
+    return {
+      h: Math.round(parseFloat(n[1])) % 360,
+      s: Math.round(parseFloat(n[2])),
+      l: Math.round(parseFloat(n[3])),
+      a: n[4] !== void 0 ? parseFloat(n[4]) : 1
+    };
+  const r = a.match(
+    /^rgba?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+))?\s*\)$/
+  );
+  if (r) {
+    const o = parseFloat(r[1]) / 255, i = parseFloat(r[2]) / 255, d = parseFloat(r[3]) / 255, m = r[4] !== void 0 ? parseFloat(r[4]) : 1;
+    return se(o, i, d, m);
+  }
+  return null;
+}
+function ae(e) {
+  const { r: a, g: n, b: r } = G(e), o = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
+  return 0.2126 * o(a) + 0.7152 * o(n) + 0.0722 * o(r);
+}
+function Se(e, a) {
+  const n = ae(e), r = ae(a), o = Math.max(n, r), i = Math.min(n, r);
+  return Math.round((o + 0.05) / (i + 0.05) * 100) / 100;
+}
+function Te(e) {
+  return e >= 4.5;
+}
+function ze(e) {
+  return e >= 7;
+}
+const Ie = [
+  { name: "Pink 500", hex: "#e91e63", textColor: "#ffffff" },
+  { name: "Black", hex: "#000000", textColor: "#ffffff" },
+  { name: "Blue 500", hex: "#2196f3", textColor: "#ffffff" },
+  { name: "Blue 900", hex: "#0d47a1", textColor: "#ffffff" },
+  { name: "Blue Grey 500", hex: "#607d8b", textColor: "#ffffff" },
+  { name: "Blue Grey 800", hex: "#37474f", textColor: "#ffffff" },
+  { name: "Brown 500", hex: "#795548", textColor: "#ffffff" },
+  { name: "Deep Orange 500", hex: "#ff5722", textColor: "#ffffff" },
+  { name: "Deep Purple 500", hex: "#673ab7", textColor: "#ffffff" },
+  { name: "Green 500", hex: "#4caf50", textColor: "#ffffff" },
+  { name: "Green 900", hex: "#1b5e20", textColor: "#ffffff" },
+  { name: "Indigo 500", hex: "#3f51b5", textColor: "#ffffff" },
+  { name: "Indigo 900", hex: "#1a237e", textColor: "#ffffff" },
+  { name: "Pink 900", hex: "#880e4f", textColor: "#ffffff" },
+  { name: "Purple 500", hex: "#9c27b0", textColor: "#ffffff" },
+  { name: "Purple 900", hex: "#4a148c", textColor: "#ffffff" },
+  { name: "Red 500", hex: "#f44336", textColor: "#ffffff" },
+  { name: "Red 900", hex: "#b71c1c", textColor: "#ffffff" },
+  { name: "Teal 500", hex: "#009688", textColor: "#ffffff" },
+  { name: "Teal 900", hex: "#004d40", textColor: "#ffffff" },
+  { name: "Amber 500", hex: "#ffc107", textColor: "#000000" },
+  { name: "Cyan 500", hex: "#00bcd4", textColor: "#000000" },
+  { name: "Grey 500", hex: "#9e9e9e", textColor: "#000000" },
+  { name: "Light Blue 500", hex: "#03a9f4", textColor: "#000000" },
+  { name: "Light Green 500", hex: "#8bc34a", textColor: "#000000" },
+  { name: "Lime 500", hex: "#cddc39", textColor: "#000000" },
+  { name: "Orange 500", hex: "#ff9800", textColor: "#000000" },
+  { name: "Orange 900", hex: "#e65100", textColor: "#000000" },
+  { name: "White", hex: "#ffffff", textColor: "#000000" },
+  { name: "Yellow 500", hex: "#ffeb3b", textColor: "#000000" }
+], Ye = [
+  { name: "Blue 300", hex: "#70738c" },
+  { name: "Blue 500", hex: "#292e53" },
+  { name: "Blue 700", hex: "#1d213b" },
+  { name: "Violet 300", hex: "#9995ee" },
+  { name: "Violet 500", hex: "#6761e5" },
+  { name: "Violet 700", hex: "#4945a3" },
+  { name: "Purple 300", hex: "#ccaafa" },
+  { name: "Purple 500", hex: "#b380f8" },
+  { name: "Purple 700", hex: "#7f5bb0" },
+  { name: "Magenta 300", hex: "#ea7ffc" },
+  { name: "Magenta 500", hex: "#e040fb" },
+  { name: "Magenta 700", hex: "#9f2db2" },
+  { name: "Fuchsia 300", hex: "#fa76fc" },
+  { name: "Fuchsia 500", hex: "#f732fb" },
+  { name: "Fuchsia 700", hex: "#af24b2" },
+  { name: "Grey 300", hex: "#f9f6f3" },
+  { name: "Grey 500", hex: "#f6f1ed" },
+  { name: "Grey 700", hex: "#afaba8" }
+], u = 6, Le = re(
+  [
+    "inline-flex items-center w-full",
+    "rounded-[var(--radius-sm)] border border-[color:var(--border)] bg-[var(--background)] text-[var(--foreground)]",
+    "transition-colors duration-[var(--animation-duration)] motion-reduce:transition-none",
+    "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid",
+    "focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-[var(--font-size-sm)] ps-3 pe-3",
+        md: "h-[var(--min-target-size)] text-[var(--font-size-base)] ps-3 pe-3",
+        lg: "h-12 text-[var(--font-size-lg)] ps-4 pe-4"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Ee = re(
+  [
+    "relative rounded-[var(--radius-sm)] border-2 cursor-pointer",
+    "min-w-[var(--min-target-size)] min-h-[var(--min-target-size)]",
+    "transition-[transform,box-shadow] duration-[var(--animation-duration)] motion-reduce:transition-none",
+    "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid",
+    "focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "hover:scale-110",
+    // The swatch background is the user-picked colour — set as a CSS custom
+    // property via inline `style` per 23-constraints §Runtime-computed
+    // dimensions (CSS custom property setter; the bg rule lives on the class).
+    "bg-[var(--swatch-bg)]"
+  ].join(" "),
+  {
+    variants: {
+      selected: {
+        true: "border-[var(--primary)] shadow-[var(--shadow-md)]",
+        false: "border-transparent"
+      }
+    },
+    defaultVariants: { selected: !1 }
+  }
+), Re = [
+  "flex flex-col gap-[var(--spacing-md)]",
+  "rounded-[var(--radius-md)] bg-[var(--background)] text-[var(--foreground)]",
+  "p-[var(--spacing-md)]"
+].join(" "), Fe = [
+  "bg-[image:repeating-conic-gradient(var(--color-grey-700)_0%_25%,transparent_0%_50%)]",
+  "bg-[size:8px_8px]"
+].join(" "), He = [
+  "rounded-[var(--radius-md)] bg-[var(--background)] text-[var(--foreground)]",
+  "p-[var(--spacing-sm)]"
+].join(" "), _e = [
+  "z-[var(--z-popover)] rounded-[var(--radius-md)]",
+  "border border-[color:var(--border)] bg-[var(--background)] shadow-[var(--shadow-lg)]",
+  "w-72",
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+  "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"
+].join(" "), Be = [
+  "w-full rounded-[var(--radius-sm)] border bg-[var(--background)] text-[var(--foreground)]",
+  "ps-[var(--spacing-sm)] pe-[var(--spacing-sm)] py-[var(--spacing-xs)] text-[var(--font-size-sm)]",
+  "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid",
+  "focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "transition-colors duration-[var(--animation-duration)] motion-reduce:transition-none"
+].join(" "), ie = "[&>span:first-child]:bg-transparent [&>span:first-child>span]:bg-transparent", Oe = $e(
+  (e, a) => {
+    const {
+      value: n,
+      defaultValue: r,
+      onChange: o,
+      format: i = "hex",
+      allowOpacity: d = !1,
+      palette: m,
+      against: b,
+      size: p = "md",
+      disabled: le = !1,
+      variant: ce = "inline",
+      compact: A = !0,
+      className: D
+    } = e, { t: x } = ye(), N = Pe(), de = Ne(), M = N.id || de, v = N.disabled || le, S = n !== void 0, [j, fe] = P(() => {
+      const t = n ?? r;
+      if (t) {
+        const c = L(t);
+        if (c) return c;
+      }
+      return { h: 0, s: 100, l: 50, a: 1 };
+    }), s = F(() => {
+      if (S && n) {
+        const t = L(n);
+        if (t) return t;
+      }
+      return j;
+    }, [S, n, j]), C = ke(
+      (t) => {
+        const c = d ? t : { ...t, a: 1 };
+        S || fe(c), o == null || o(B(c, i));
+      },
+      [d, i, S, o]
+    ), [W, E] = P(() => $(s)), [ue, T] = P(!1), w = H(void 0), U = H(s);
+    U.current = s, ee(() => {
+      E($(s)), T(!1), w.current !== void 0 && (clearTimeout(w.current), w.current = void 0);
+    }, [s]), ee(() => () => {
+      w.current !== void 0 && clearTimeout(w.current);
+    }, []);
+    const he = () => {
+      const t = L(W);
+      t ? (T(!1), C(t)) : (T(!0), w.current = setTimeout(() => {
+        w.current = void 0, T(!1), E($(U.current));
+      }, 800));
+    }, y = F(() => m ? m.map(
+      (t) => typeof t == "string" ? { name: t.toUpperCase(), hex: t } : t
+    ) : Ie, [m]), K = $(s), X = y.findIndex(
+      (t) => t.hex.toLowerCase() === K.toLowerCase()
+    ), Y = H(null), [g, q] = P(
+      X >= 0 ? X : 0
+    ), me = (t) => {
+      var f;
+      const c = (f = Y.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
+      c != null && c[t] && (c[t].focus(), q(t));
+    }, xe = (t) => {
+      if (v) return;
+      const c = y.length;
+      let f = g;
+      switch (t.key) {
+        case "ArrowRight":
+          f = (g + 1) % c;
+          break;
+        case "ArrowLeft":
+          f = (g - 1 + c) % c;
+          break;
+        case "ArrowDown":
+          f = Math.min(g + u, c - 1);
+          break;
+        case "ArrowUp":
+          f = Math.max(g - u, 0);
+          break;
+        case "Home":
+          f = Math.floor(g / u) * u;
+          break;
+        case "End":
+          f = Math.min(Math.floor(g / u) * u + u - 1, c - 1);
+          break;
+        case "PageUp":
+          f = g % u;
+          break;
+        case "PageDown": {
+          const Q = Math.floor((c - 1) / u) * u;
+          f = Math.min(Q + g % u, c - 1);
+          break;
+        }
+        case "Enter":
+        case " ":
+          t.preventDefault(), C(V(y[g].hex));
+          return;
+        default:
+          return;
+      }
+      t.preventDefault(), me(f);
+    }, [ge, ve] = P(!1), z = F(() => {
+      if (!b) return null;
+      const t = L(b);
+      if (!t) return null;
+      const c = Se(s, t);
+      return { ratio: c, aa: Te(c), aaa: ze(c) };
+    }, [b, s]), be = /* @__PURE__ */ l(
+      "div",
+      {
+        ref: Y,
+        role: "grid",
+        "aria-label": x("ui.inputs.colorPicker.paletteLabel", "Colour swatches"),
+        onKeyDown: xe,
+        className: "grid grid-cols-6 gap-[var(--spacing-xs)]",
+        children: y.map((t, c) => {
+          const f = Math.floor(c / u) * u;
+          return c === f ? /* @__PURE__ */ l("div", { role: "row", className: "contents", children: y.slice(f, f + u).map((k, Ce) => {
+            const Z = f + Ce, R = k.hex.toLowerCase() === K.toLowerCase();
+            return /* @__PURE__ */ l(
+              "div",
+              {
+                role: "gridcell",
+                "aria-selected": R,
+                "aria-label": x("ui.inputs.colorPicker.swatchLabel", { name: k.name, hex: k.hex }),
+                tabIndex: Z === g ? 0 : -1,
+                onClick: () => {
+                  v || (C(V(k.hex)), q(Z));
+                },
+                className: Ee({ selected: R }),
+                style: { "--swatch-bg": k.hex },
+                children: R ? /* @__PURE__ */ l(oe, { "aria-hidden": "true", className: "absolute inset-0 m-auto size-4 text-[var(--background)] mix-blend-difference" }) : null
+              },
+              k.hex
+            );
+          }) }, c) : null;
+        })
+      }
+    ), pe = A ? null : /* @__PURE__ */ h(we, { children: [
+      /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
+        /* @__PURE__ */ l("label", { htmlFor: `${M}-hex`, className: "text-[var(--font-size-xs)] text-[var(--muted-foreground)]", children: x("ui.inputs.colorPicker.hex", "Hex") }),
+        /* @__PURE__ */ l("bdi", { dir: "ltr", children: /* @__PURE__ */ l(
+          "input",
+          {
+            id: `${M}-hex`,
+            type: "text",
+            value: W,
+            disabled: v,
+            onChange: (t) => E(t.target.value),
+            onBlur: he,
+            className: `${Be} ${ue ? "border-[var(--destructive)]" : "border-[color:var(--border)]"}`
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-sm)]", children: [
+        /* @__PURE__ */ l(
+          O,
+          {
+            label: x("ui.inputs.colorPicker.hue", "Hue"),
+            gradient: "linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))",
+            min: 0,
+            max: 360,
+            value: s.h,
+            onChange: (t) => C({ ...s, h: t }),
+            formatValue: (t) => `H ${t}°`,
+            disabled: v
+          }
+        ),
+        /* @__PURE__ */ l(
+          O,
+          {
+            label: x("ui.inputs.colorPicker.saturation", "Saturation"),
+            gradient: `linear-gradient(to right, hsl(${s.h},0%,${s.l}%), hsl(${s.h},100%,${s.l}%))`,
+            min: 0,
+            max: 100,
+            value: s.s,
+            onChange: (t) => C({ ...s, s: t }),
+            formatValue: (t) => `S ${t}%`,
+            disabled: v
+          }
+        ),
+        /* @__PURE__ */ l(
+          O,
+          {
+            label: x("ui.inputs.colorPicker.lightness", "Lightness"),
+            gradient: `linear-gradient(to right, hsl(${s.h},${s.s}%,0%), hsl(${s.h},${s.s}%,50%), hsl(${s.h},${s.s}%,100%))`,
+            min: 0,
+            max: 100,
+            value: s.l,
+            onChange: (t) => C({ ...s, l: t }),
+            formatValue: (t) => `L ${t}%`,
+            disabled: v
+          }
+        ),
+        d ? /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ l("label", { className: "text-[var(--font-size-xs)] text-[var(--muted-foreground)]", children: x("ui.inputs.colorPicker.opacity", "Opacity") }),
+          /* @__PURE__ */ h("div", { className: "relative", children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                className: `absolute inset-0 rounded-[var(--radius-full)] pointer-events-none ${Fe}`,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ l(
+              "div",
+              {
+                className: "absolute inset-0 rounded-[var(--radius-full)] pointer-events-none bg-[image:var(--opacity-gradient)]",
+                style: {
+                  "--opacity-gradient": `linear-gradient(to right, hsla(${s.h},${s.s}%,${s.l}%,0), hsl(${s.h},${s.s}%,${s.l}%))`
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ l(
+              ne,
+              {
+                min: 0,
+                max: 100,
+                step: 1,
+                value: [Math.round(s.a * 100)],
+                onValueChange: ([t]) => C({ ...s, a: t / 100 }),
+                "aria-label": x("ui.inputs.colorPicker.opacity", "Opacity"),
+                formatValue: (t) => `${t}%`,
+                disabled: v,
+                className: ie
+              }
+            )
+          ] })
+        ] }) : null
+      ] }),
+      z ? /* @__PURE__ */ h("div", { className: "flex items-center gap-[var(--spacing-sm)] text-[var(--font-size-sm)]", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ l("span", { className: "tabular-nums", children: x("ui.inputs.colorPicker.contrastRatio", { ratio: z.ratio.toFixed(1) }) }),
+        /* @__PURE__ */ l(te, { level: "AA", passes: z.aa, t: x }),
+        /* @__PURE__ */ l(te, { level: "AAA", passes: z.aaa, t: x })
+      ] }) : null,
+      /* @__PURE__ */ h("div", { className: "flex items-center gap-[var(--spacing-sm)]", children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: "size-8 rounded-[var(--radius-sm)] border border-[color:var(--border)] bg-[var(--swatch-bg)]",
+            style: { "--swatch-bg": $(s) },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ l("span", { className: "text-[var(--font-size-sm)] text-[var(--muted-foreground)] tabular-nums", children: B(s, i) })
+      ] })
+    ] }), J = /* @__PURE__ */ h("div", { className: A ? He : Re, children: [
+      be,
+      pe
+    ] });
+    return ce === "inline" ? /* @__PURE__ */ l(
+      "div",
+      {
+        ref: a,
+        id: M,
+        className: D,
+        "aria-describedby": N.describedBy || void 0,
+        "aria-invalid": N.invalid || void 0,
+        "aria-disabled": v || void 0,
+        "data-testid": "color-picker",
+        children: J
+      }
+    ) : /* @__PURE__ */ h(I.Root, { open: ge, onOpenChange: ve, children: [
+      /* @__PURE__ */ l(I.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
+        "button",
+        {
+          ref: a,
+          type: "button",
+          id: M,
+          "aria-describedby": N.describedBy || void 0,
+          "aria-invalid": N.invalid || void 0,
+          className: Le({ size: p, className: D }),
+          "data-testid": "color-picker-trigger",
+          children: [
+            /* @__PURE__ */ l(
+              "span",
+              {
+                className: `inline-block size-5 rounded-[var(--radius-sm)] border border-[color:var(--border)] shrink-0 bg-[var(--swatch-bg)]${A ? "" : " me-[var(--spacing-sm)]"}`,
+                "aria-hidden": "true",
+                style: { "--swatch-bg": $(s) }
+              }
+            ),
+            A ? null : /* @__PURE__ */ l("span", { className: "text-start truncate tabular-nums", children: B(s, i) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ l(I.Portal, { children: /* @__PURE__ */ l(I.Content, { sideOffset: 4, align: "start", className: _e, children: J }) })
+    ] });
+  }
+);
+Oe.displayName = "ColorPicker";
+function te({ level: e, passes: a, t: n }) {
+  return /* @__PURE__ */ h("span", { className: "inline-flex items-center gap-[var(--spacing-xs)]", children: [
+    /* @__PURE__ */ l("abbr", { title: `Web Content Accessibility Guidelines Level ${e}`, className: "no-underline font-medium", children: e }),
+    a ? /* @__PURE__ */ l(oe, { "aria-hidden": "true", className: "size-4 text-[var(--success)]" }) : /* @__PURE__ */ l(Ae, { "aria-hidden": "true", className: "size-4 text-[var(--destructive)]" }),
+    /* @__PURE__ */ l("span", { className: "sr-only", children: a ? n("ui.inputs.colorPicker.contrastPass", "Pass") : n("ui.inputs.colorPicker.contrastFail", "Fail") })
+  ] });
+}
+function O({
+  label: e,
+  gradient: a,
+  min: n,
+  max: r,
+  value: o,
+  onChange: i,
+  formatValue: d,
+  disabled: m
+}) {
+  return /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
+    /* @__PURE__ */ l("label", { className: "text-[var(--font-size-xs)] text-[var(--muted-foreground)]", children: e }),
+    /* @__PURE__ */ h("div", { className: "relative", children: [
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: "absolute inset-0 rounded-[var(--radius-full)] pointer-events-none bg-[image:var(--slider-gradient)]",
+          style: { "--slider-gradient": a },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ l(
+        ne,
+        {
+          min: n,
+          max: r,
+          step: 1,
+          value: [o],
+          onValueChange: ([b]) => i(b),
+          "aria-label": e,
+          formatValue: d,
+          disabled: m,
+          className: ie
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Ie as A,
+  Ye as B,
+  Oe as C
+};
+//# sourceMappingURL=color-picker-CiotzQJF.js.map