@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/chunk-QZRBO7BE.js

@@ -0,0 +1,684 @@
+"use client";
+
+import {
+  Popover
+} from "./chunk-QDFDMWXD.js";
+import {
+  InputNumber
+} from "./chunk-LZHERDNB.js";
+import {
+  Input
+} from "./chunk-P7Z5BREP.js";
+import {
+  Segmented
+} from "./chunk-LEOIKO7C.js";
+import {
+  FIELD_BASE_CLASS,
+  FIELD_DISABLED_CLASS,
+  getVariantClasses
+} from "./chunk-DUCIAQGR.js";
+import {
+  FieldContext,
+  useFieldControl
+} from "./chunk-LBQMEHK6.js";
+import {
+  touchTargetClass
+} from "./chunk-FFXRFQSU.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/color-picker/ColorPicker.tsx
+import { useContext, useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
+import { cn as cn5, useControllableState } from "@mari-ui/core";
+
+// src/color-picker/_components/ColorArea.tsx
+import { cn } from "@mari-ui/core";
+
+// src/color-picker/utils.ts
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+var round = (n, digits = 0) => {
+  const f = 10 ** digits;
+  return Math.round(n * f) / f;
+};
+function hsbToRgb({ h, s, b, a }) {
+  const sat = s / 100;
+  const val = b / 100;
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return val - val * sat * Math.max(0, Math.min(k, 4 - k, 1));
+  };
+  return { r: Math.round(f(5) * 255), g: Math.round(f(3) * 255), b: Math.round(f(1) * 255), a };
+}
+function hueOf(r, g, b, max, d) {
+  if (d === 0) return 0;
+  let h;
+  if (max === r) h = (g - b) / d % 6;
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return (h * 60 + 360) % 360;
+}
+function rgbToHsb({ r, g, b, a }) {
+  const [rn, gn, bn] = [r / 255, g / 255, b / 255];
+  const max = Math.max(rn, gn, bn);
+  const d = max - Math.min(rn, gn, bn);
+  return { h: hueOf(rn, gn, bn, max, d), s: max === 0 ? 0 : d / max * 100, b: max * 100, a };
+}
+function hslToHsb(h, s, l, a) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const b = ll + sl * Math.min(ll, 1 - ll);
+  return { h, s: b === 0 ? 0 : 2 * (1 - ll / b) * 100, b: b * 100, a };
+}
+var hex2 = (n) => Math.round(n).toString(16).padStart(2, "0");
+function toHex({ r, g, b, a }) {
+  return `#${hex2(r)}${hex2(g)}${hex2(b)}${a < 1 ? hex2(a * 255) : ""}`;
+}
+function toRgbString({ r, g, b, a }) {
+  return a < 1 ? `rgba(${r}, ${g}, ${b}, ${round(a, 2)})` : `rgb(${r}, ${g}, ${b})`;
+}
+function toHsbString({ h, s, b, a }) {
+  const body = `${Math.round(h)}, ${Math.round(s)}%, ${Math.round(b)}%`;
+  return a < 1 ? `hsba(${body}, ${round(a, 2)})` : `hsb(${body})`;
+}
+function parseHex(input) {
+  const m = /^#?([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i.exec(input);
+  if (!m) return null;
+  let digits = m[1];
+  if (digits.length <= 4) digits = [...digits].map((c) => c + c).join("");
+  const n = (i) => Number.parseInt(digits.slice(i, i + 2), 16);
+  return { r: n(0), g: n(2), b: n(4), a: digits.length === 8 ? round(n(6) / 255, 3) : 1 };
+}
+function parseAlpha(part) {
+  if (part === void 0) return 1;
+  const v = Number.parseFloat(part);
+  if (Number.isNaN(v)) return 1;
+  return clamp(part.trim().endsWith("%") ? v / 100 : v, 0, 1);
+}
+var FUNC_RE = /^(rgba?|hsba?|hsva?|hsla?)\(([^)]*)\)$/i;
+function parseFunc(input) {
+  const m = FUNC_RE.exec(input);
+  if (!m) return null;
+  const kind = m[1].toLowerCase().slice(0, 3);
+  const parts = m[2].replace(/[,/]/g, " ").trim().split(/\s+/);
+  if (parts.length < 3) return null;
+  const [x, y, z] = parts.slice(0, 3).map((p) => Number.parseFloat(p));
+  if ([x, y, z].some(Number.isNaN)) return null;
+  const a = parseAlpha(parts[3]);
+  if (kind === "rgb") {
+    const ch = (p, v) => clamp(Math.round(p.endsWith("%") ? v / 100 * 255 : v), 0, 255);
+    return rgbToHsb({ r: ch(parts[0], x), g: ch(parts[1], y), b: ch(parts[2], z), a });
+  }
+  const h = (x % 360 + 360) % 360;
+  if (kind === "hsl") return hslToHsb(h, clamp(y, 0, 100), clamp(z, 0, 100), a);
+  return { h, s: clamp(y, 0, 100), b: clamp(z, 0, 100), a };
+}
+function parseColor(input) {
+  if (!input) return null;
+  const text = input.trim();
+  const fn = parseFunc(text);
+  if (fn) return fn;
+  const hex = parseHex(text);
+  return hex ? rgbToHsb(hex) : null;
+}
+function colorInfo(hsba) {
+  const rgba = hsbToRgb(hsba);
+  return { hsba, rgba, hex: toHex(rgba), rgb: toRgbString(rgba), hsb: toHsbString(hsba) };
+}
+function formatColor(hsba, format) {
+  return colorInfo(hsba)[format];
+}
+function sameColor(a, b) {
+  if (!a || !b) return a === b;
+  return toHex(hsbToRgb(a)) === toHex(hsbToRgb(b));
+}
+var hueColor = (h) => `hsl(${h} 100% 50%)`;
+function isLight(hsba) {
+  if (hsba.a < 0.5) return true;
+  const { r, g, b } = hsbToRgb(hsba);
+  const lin = (c) => {
+    const v = c / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b) > 0.4;
+}
+function describeColor(hsba, empty = "Renk yok") {
+  if (!hsba) return empty;
+  const { hex } = colorInfo({ ...hsba, a: 1 });
+  return hsba.a < 1 ? `${hex}, opakl\u0131k %${Math.round(hsba.a * 100)}` : hex;
+}
+function areaKeyStep(key, shift, s, b) {
+  const step = shift ? 10 : 1;
+  const map = {
+    ArrowLeft: () => ({ s: s - step, b }),
+    ArrowRight: () => ({ s: s + step, b }),
+    ArrowUp: () => ({ s, b: b + step }),
+    ArrowDown: () => ({ s, b: b - step }),
+    Home: () => ({ s: 0, b }),
+    End: () => ({ s: 100, b }),
+    PageUp: () => ({ s, b: 100 }),
+    PageDown: () => ({ s, b: 0 })
+  };
+  const fn = map[key];
+  if (!fn) return null;
+  const next = fn();
+  return { s: clamp(next.s, 0, 100), b: clamp(next.b, 0, 100) };
+}
+function sliderKeyStep(key, shift, value, min, max, step) {
+  const big = step * 10;
+  const delta = {
+    ArrowRight: shift ? big : step,
+    ArrowUp: shift ? big : step,
+    ArrowLeft: shift ? -big : -step,
+    ArrowDown: shift ? -big : -step,
+    PageUp: big,
+    PageDown: -big
+  };
+  if (key === "Home") return min;
+  if (key === "End") return max;
+  const d = delta[key];
+  return d === void 0 ? null : clamp(value + d, min, max);
+}
+function ratioFromPointer(clientX, clientY, rect) {
+  return {
+    x: rect.width ? clamp((clientX - rect.left) / rect.width, 0, 1) : 0,
+    y: rect.height ? clamp((clientY - rect.top) / rect.height, 0, 1) : 0
+  };
+}
+
+// src/color-picker/_components/usePointerDrag.ts
+import { useRef } from "react";
+function usePointerDrag(onMove, onEnd) {
+  const dragging = useRef(false);
+  const update = (e) => onMove(ratioFromPointer(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect()));
+  return {
+    onPointerDown: (e) => {
+      if (e.button !== 0) return;
+      dragging.current = true;
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      e.currentTarget.focus();
+      e.preventDefault();
+      update(e);
+    },
+    onPointerMove: (e) => {
+      if (dragging.current) update(e);
+    },
+    onPointerUp: (e) => {
+      if (!dragging.current) return;
+      dragging.current = false;
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+      onEnd();
+    },
+    onLostPointerCapture: () => {
+      if (!dragging.current) return;
+      dragging.current = false;
+      onEnd();
+    }
+  };
+}
+
+// src/color-picker/_components/ColorArea.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ColorArea({ color, disabled, onChange, onChangeEnd }) {
+  const drag = usePointerDrag(({ x, y }) => onChange(Math.round(x * 100), Math.round((1 - y) * 100)), onChangeEnd);
+  const s = Math.round(color.s);
+  const b = Math.round(color.b);
+  const onKeyDown = (e) => {
+    const next = areaKeyStep(e.key, e.shiftKey, s, b);
+    if (!next) return;
+    e.preventDefault();
+    onChange(next.s, next.b);
+    onChangeEnd();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "data-autofocus": true,
+      "aria-label": "Doygunluk ve parlakl\u0131k",
+      "aria-roledescription": "iki boyutlu kayd\u0131r\u0131c\u0131",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": s,
+      "aria-valuetext": `Doygunluk %${s}, parlakl\u0131k %${b}`,
+      "aria-disabled": disabled || void 0,
+      onKeyDown: disabled ? void 0 : onKeyDown,
+      ...disabled ? {} : drag,
+      className: cn(
+        "relative h-36 w-full cursor-crosshair touch-none rounded-md outline-none select-none",
+        "focus-visible:ring-2 focus-visible:ring-mari-ring focus-visible:ring-offset-2 focus-visible:ring-offset-mari-surface"
+      ),
+      style: { backgroundColor: hueColor(color.h) },
+      children: [
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 rounded-md bg-linear-to-r from-white to-transparent" }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 rounded-md bg-linear-to-b from-transparent to-black" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("pointer-events-none absolute size-3.5 -translate-1/2 rounded-full border-2 shadow-mari-sm", isLight({ ...color, a: 1 }) ? "border-mari-neutral-solid" : "border-white"),
+            style: { left: `${s}%`, top: `${100 - b}%`, backgroundColor: colorInfo({ ...color, a: 1 }).hex }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/color-picker/_components/ColorInputs.tsx
+import { useEffect, useState } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FORMAT_OPTIONS = [
+  { value: "hex", label: "HEX" },
+  { value: "rgb", label: "RGB" },
+  { value: "hsb", label: "HSB" }
+];
+function HexInput({ color, disabled, onChange }) {
+  const hex = colorInfo(color).hex.slice(1);
+  const [text, setText] = useState(hex);
+  useEffect(() => setText(hex), [hex]);
+  const commit = (value) => {
+    const parsed = parseColor(`#${value}`);
+    if (parsed) onChange(parsed.s === 0 ? { ...parsed, h: color.h } : parsed);
+    else setText(hex);
+  };
+  return /* @__PURE__ */ jsx2(
+    Input,
+    {
+      size: "sm",
+      "aria-label": "Hex renk kodu",
+      icon: /* @__PURE__ */ jsx2("span", { className: "text-mari-muted", children: "#" }),
+      value: text,
+      maxLength: 8,
+      autoComplete: "off",
+      disabled,
+      className: "min-w-0 flex-1 font-mono uppercase",
+      onChange: (e) => {
+        const next = e.target.value.replace(/[^\da-f]/gi, "");
+        setText(next);
+        if (next.length === 6 || next.length === 8) commit(next);
+      },
+      onBlur: () => commit(text),
+      onPressEnter: () => commit(text)
+    }
+  );
+}
+function Channel({ label, value, max, disabled, onChange }) {
+  return /* @__PURE__ */ jsx2(
+    InputNumber,
+    {
+      size: "sm",
+      "aria-label": label,
+      value: Math.round(value),
+      min: 0,
+      max,
+      controls: false,
+      grouping: false,
+      disabled,
+      className: "min-w-0 flex-1",
+      onChange: (v) => v !== null && onChange(clamp(v, 0, max))
+    }
+  );
+}
+function ChannelInputs({ color, format, disabled, onChange }) {
+  if (format === "hsb") {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Channel, { label: "Ton", value: color.h, max: 360, disabled, onChange: (h) => onChange({ ...color, h }) }),
+      /* @__PURE__ */ jsx2(Channel, { label: "Doygunluk", value: color.s, max: 100, disabled, onChange: (s) => onChange({ ...color, s }) }),
+      /* @__PURE__ */ jsx2(Channel, { label: "Parlakl\u0131k", value: color.b, max: 100, disabled, onChange: (b) => onChange({ ...color, b }) })
+    ] });
+  }
+  const rgba = hsbToRgb(color);
+  const set = (patch) => {
+    const next = rgbToHsb({ ...rgba, ...patch });
+    onChange(next.s === 0 ? { ...next, h: color.h } : next);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Channel, { label: "K\u0131rm\u0131z\u0131", value: rgba.r, max: 255, disabled, onChange: (r) => set({ r }) }),
+    /* @__PURE__ */ jsx2(Channel, { label: "Ye\u015Fil", value: rgba.g, max: 255, disabled, onChange: (g) => set({ g }) }),
+    /* @__PURE__ */ jsx2(Channel, { label: "Mavi", value: rgba.b, max: 255, disabled, onChange: (b) => set({ b }) })
+  ] });
+}
+function ColorInputs({ color, format, onFormatChange, disabledAlpha, disabled, onChange }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx2(Segmented, { size: "sm", block: true, "aria-label": "Renk bi\xE7imi", options: FORMAT_OPTIONS, value: format, disabled, onChange: (v) => onFormatChange(v) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+      format === "hex" ? /* @__PURE__ */ jsx2(HexInput, { color, disabled, onChange }) : /* @__PURE__ */ jsx2(ChannelInputs, { color, format, disabled, onChange }),
+      !disabledAlpha && /* @__PURE__ */ jsx2(
+        InputNumber,
+        {
+          size: "sm",
+          "aria-label": "Opakl\u0131k",
+          value: Math.round(color.a * 100),
+          min: 0,
+          max: 100,
+          suffix: "%",
+          controls: false,
+          disabled,
+          className: "w-16 shrink-0",
+          onChange: (v) => v !== null && onChange({ ...color, a: clamp(v, 0, 100) / 100 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/color-picker/_components/ColorPresets.tsx
+import { useId, useState as useState2 } from "react";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { cn as cn3 } from "@mari-ui/core";
+
+// src/color-picker/_components/Swatch.tsx
+import { cn as cn2 } from "@mari-ui/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CHECKER_CLASS = "bg-[conic-gradient(var(--mari-color-border)_25%,var(--mari-color-surface)_0_50%,var(--mari-color-border)_0_75%,var(--mari-color-surface)_0)] bg-[length:0.5rem_0.5rem]";
+var EMPTY_CLASS = "bg-mari-surface bg-[linear-gradient(to_top_right,transparent_calc(50%-1px),var(--mari-color-error)_calc(50%-1px)_calc(50%+1px),transparent_calc(50%+1px))]";
+function Swatch({ color, className }) {
+  if (!color) return /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: cn2("block shrink-0 border border-mari-border", EMPTY_CLASS, className) });
+  return /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: cn2("relative block shrink-0 overflow-hidden border border-mari-border", CHECKER_CLASS, className), children: /* @__PURE__ */ jsx3("span", { className: "absolute inset-0", style: { backgroundColor: colorInfo(color).rgb } }) });
+}
+
+// src/color-picker/_components/ColorPresets.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PresetGroup({ preset, current, disabled, onPick }) {
+  const [open, setOpen] = useState2(preset.defaultOpen ?? true);
+  const listId = useId();
+  const colors = preset.colors.map((text) => ({ text, hsba: parseColor(text) })).filter((c) => c.hsba !== null);
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen(!open),
+        className: "flex w-full items-center gap-1 rounded-sm py-0.5 pointer-coarse:py-3 text-left text-xs text-mari-muted outline-none hover:text-mari-foreground focus-visible:ring-2 focus-visible:ring-mari-ring",
+        children: [
+          /* @__PURE__ */ jsx4(ChevronRightIcon, { "aria-hidden": true, size: 14, className: cn3("transition-transform duration-150 motion-reduce:transition-none", open && "rotate-90") }),
+          preset.label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("ul", { id: listId, hidden: !open, className: "mt-1.5 grid grid-cols-10 gap-1.5 pointer-coarse:grid-cols-5", children: colors.map(({ text, hsba }) => {
+      const selected = sameColor(current, hsba);
+      return /* @__PURE__ */ jsx4("li", { className: "flex", children: /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          "aria-label": describeColor(hsba),
+          "aria-pressed": selected,
+          disabled,
+          onClick: () => onPick(hsba),
+          className: "relative aspect-square w-full rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-mari-ring focus-visible:ring-offset-1 focus-visible:ring-offset-mari-surface disabled:cursor-not-allowed",
+          children: [
+            /* @__PURE__ */ jsx4(Swatch, { color: hsba, className: "size-full rounded-sm" }),
+            selected && /* @__PURE__ */ jsx4(
+              CheckIcon,
+              {
+                "aria-hidden": true,
+                size: 12,
+                strokeWidth: 3,
+                className: cn3("absolute inset-0 m-auto", isLight(hsba) ? "text-mari-neutral-solid" : "text-white")
+              }
+            )
+          ]
+        }
+      ) }, text);
+    }) })
+  ] });
+}
+function ColorPresets({ presets, current, disabled, onPick }) {
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-2 border-t border-mari-border pt-2", children: presets.map((preset, i) => (
+    // Başlık ReactNode olabilir — sıra anahtarı.
+    /* @__PURE__ */ jsx4(PresetGroup, { preset, current, disabled, onPick }, i)
+  )) });
+}
+
+// src/color-picker/_components/ColorSlider.tsx
+import { cn as cn4 } from "@mari-ui/core";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var HUE_GRADIENT = "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)";
+function ColorSlider({ label, value, min, max, step = 1, valueText, background, checker, thumbColor, disabled, onChange, onChangeEnd }) {
+  const drag = usePointerDrag(({ x }) => onChange(Math.round((min + x * (max - min)) / step) * step), onChangeEnd);
+  const ratio = (value - min) / (max - min);
+  const onKeyDown = (e) => {
+    const next = sliderKeyStep(e.key, e.shiftKey, value, min, max, step);
+    if (next === null) return;
+    e.preventDefault();
+    onChange(next);
+    onChangeEnd();
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      role: "slider",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": label,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-valuetext": valueText,
+      "aria-orientation": "horizontal",
+      "aria-disabled": disabled || void 0,
+      onKeyDown: disabled ? void 0 : onKeyDown,
+      ...disabled ? {} : drag,
+      className: "group relative w-full cursor-pointer touch-none py-1 outline-none select-none pointer-coarse:py-[1.125rem]",
+      children: [
+        /* @__PURE__ */ jsx5("div", { "aria-hidden": true, className: cn4("relative h-2 overflow-hidden rounded-full", checker && CHECKER_CLASS), children: /* @__PURE__ */ jsx5("div", { className: "absolute inset-0", style: { background } }) }),
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn4(
+              "pointer-events-none absolute top-1/2 size-3.5 -translate-1/2 rounded-full border-2 border-white shadow-mari-sm ring-1 ring-mari-border",
+              "group-focus-visible:ring-2 group-focus-visible:ring-mari-ring"
+            ),
+            style: { left: `calc(0.4375rem + ${ratio} * (100% - 0.875rem))`, backgroundColor: thumbColor }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/color-picker/ColorPicker.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var FALLBACK = { h: 212, s: 71, b: 64, a: 1 };
+var TRIGGER_CLASS = {
+  sm: "h-6 text-xs gap-1 rounded-sm",
+  md: "h-8 text-sm gap-2 rounded-md",
+  lg: "h-10 text-base gap-2 rounded-md"
+};
+var SQUARE_CLASS = { sm: "w-6", md: "w-8", lg: "w-10" };
+var TEXT_PAD_CLASS = { sm: "pr-2", md: "pr-3", lg: "pr-4" };
+var SWATCH_CLASS = { sm: "size-4 rounded-sm", md: "size-6 rounded-sm", lg: "size-8 rounded-sm" };
+function useColorState(props, format) {
+  const { value, defaultValue, onChange, onChangeComplete, disabledAlpha = false } = props;
+  const controlled = value !== void 0;
+  const normalize = (c) => c && disabledAlpha ? { ...c, a: 1 } : c;
+  const [color, setColor] = useState3(() => normalize(parseColor(controlled ? value : defaultValue)));
+  const emitted = useRef2(controlled ? value : void 0);
+  const current = useRef2(color);
+  current.current = color;
+  const lastColor = useRef2(color ?? FALLBACK);
+  useEffect2(() => {
+    if (!controlled || value === emitted.current) return;
+    emitted.current = value;
+    const parsed = normalize(parseColor(value));
+    setColor(parsed);
+    if (parsed) lastColor.current = parsed;
+  }, [controlled, value]);
+  const toOutput = (c) => c ? [formatColor(c, format), colorInfo(c)] : [null, null];
+  const set = (next, complete) => {
+    const c = normalize(next);
+    setColor(c);
+    current.current = c;
+    if (c) lastColor.current = c;
+    const [text, info] = toOutput(c);
+    emitted.current = text;
+    onChange?.(text, info);
+    if (complete) onChangeComplete?.(text, info);
+  };
+  return {
+    color,
+    draft: color ?? lastColor.current,
+    set,
+    /** Sürükleme bitti: son değeri kesinleştir. */
+    complete: () => onChangeComplete?.(...toOutput(current.current))
+  };
+}
+function ColorPanel({ state, format, setFormat, props }) {
+  const { allowClear = false, disabledAlpha = false, presets } = props;
+  const { color, draft, set, complete } = state;
+  const opaque = colorInfo({ ...draft, a: 1 }).hex;
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
+    allowClear && /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": color === null,
+        onClick: () => set(null, true),
+        className: "flex items-center gap-2 self-start rounded-sm text-xs text-mari-muted outline-none pointer-coarse:py-3 hover:text-mari-foreground focus-visible:ring-2 focus-visible:ring-mari-ring",
+        children: [
+          /* @__PURE__ */ jsx6(Swatch, { color: null, className: "size-4 rounded-sm" }),
+          "Renk yok"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(ColorArea, { color: draft, onChange: (s, b) => set({ ...draft, s, b }, false), onChangeEnd: complete }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ jsx6(
+          ColorSlider,
+          {
+            label: "Ton",
+            value: Math.round(draft.h),
+            min: 0,
+            max: 360,
+            valueText: `${Math.round(draft.h)} derece`,
+            background: HUE_GRADIENT,
+            thumbColor: colorInfo({ h: draft.h, s: 100, b: 100, a: 1 }).hex,
+            onChange: (h) => set({ ...draft, h }, false),
+            onChangeEnd: complete
+          }
+        ),
+        !disabledAlpha && /* @__PURE__ */ jsx6(
+          ColorSlider,
+          {
+            label: "Opakl\u0131k",
+            value: Math.round(draft.a * 100),
+            min: 0,
+            max: 100,
+            valueText: `%${Math.round(draft.a * 100)}`,
+            background: `linear-gradient(to right, transparent, ${opaque})`,
+            checker: true,
+            thumbColor: colorInfo(draft).rgb,
+            onChange: (a) => set({ ...draft, a: a / 100 }, false),
+            onChangeEnd: complete
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx6(Swatch, { color, className: "size-7 rounded-md" })
+    ] }),
+    /* @__PURE__ */ jsx6(ColorInputs, { color: draft, format, onFormatChange: setFormat, disabledAlpha, onChange: (c) => set(c, true) }),
+    presets && presets.length > 0 && /* @__PURE__ */ jsx6(ColorPresets, { presets, current: color, onPick: (c) => set(c, true) })
+  ] });
+}
+function triggerText(showText, color, format) {
+  if (!showText) return null;
+  if (typeof showText === "function") return showText(color ? colorInfo(color) : null);
+  if (!color) return /* @__PURE__ */ jsx6("span", { className: "text-mari-muted", children: "Renk yok" });
+  const text = formatColor(color, format);
+  return format === "hex" ? text.toUpperCase() : text;
+}
+function ColorPicker(outerProps) {
+  const props = useFieldControl(outerProps);
+  const {
+    defaultFormat = "hex",
+    showText = false,
+    trigger = "click",
+    placement = "bottom-start",
+    size = "md",
+    color: statusColor,
+    disabled = false,
+    id,
+    name,
+    className,
+    skeleton = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } = props;
+  const inField = useContext(FieldContext) !== null;
+  const [format, setFormat] = useControllableState({ value: props.format, defaultValue: defaultFormat, onChange: props.onFormatChange });
+  const [open, setOpen] = useControllableState({ value: props.open, defaultValue: props.defaultOpen ?? false, onChange: props.onOpenChange });
+  const state = useColorState(props, format);
+  const valueId = useId2();
+  const text = triggerText(showText, state.color, format);
+  const geometry = cn5("inline-flex shrink-0 items-center pl-[0.1875rem]", TRIGGER_CLASS[size], text ? TEXT_PAD_CLASS[size] : cn5(SQUARE_CLASS[size], "justify-center pl-0"));
+  if (skeleton) {
+    return /* @__PURE__ */ jsxs5("span", { ...skeletonBoxProps(cn5(geometry, "border border-transparent", className)), children: [
+      /* @__PURE__ */ jsx6("span", { className: cn5("block shrink-0", SWATCH_CLASS[size]) }),
+      text && /* @__PURE__ */ jsx6("span", { className: "truncate", children: text })
+    ] });
+  }
+  const button = /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      id,
+      disabled,
+      "aria-label": ariaLabelledBy || inField ? ariaLabel : ariaLabel ?? "Renk se\xE7",
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": [valueId, ariaDescribedBy].filter(Boolean).join(" "),
+      "aria-invalid": statusColor === "error" || void 0,
+      className: cn5(
+        geometry,
+        "relative cursor-pointer border text-mari-foreground outline-none",
+        touchTargetClass[size],
+        FIELD_BASE_CLASS,
+        getVariantClasses("outline", statusColor),
+        disabled && FIELD_DISABLED_CLASS,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx6(Swatch, { color: state.color, className: SWATCH_CLASS[size] }),
+        text && /* @__PURE__ */ jsx6("span", { className: "truncate", children: text }),
+        /* @__PURE__ */ jsx6("span", { id: valueId, className: "sr-only", children: describeColor(state.color) })
+      ]
+    }
+  );
+  const hidden = name ? /* @__PURE__ */ jsx6("input", { type: "hidden", name, value: state.color ? formatColor(state.color, format) : "" }) : null;
+  if (disabled) {
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      button,
+      hidden
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
+      Popover,
+      {
+        trigger,
+        placement,
+        arrow: false,
+        open,
+        onOpenChange: setOpen,
+        "aria-label": "Renk se\xE7ici",
+        className: "w-60 max-w-[calc(100vw-1rem)] pointer-coarse:w-72",
+        content: /* @__PURE__ */ jsx6(ColorPanel, { state, format, setFormat, props }),
+        children: button
+      }
+    ),
+    hidden
+  ] });
+}
+
+export {
+  parseColor,
+  colorInfo,
+  formatColor,
+  ColorPicker
+};
+//# sourceMappingURL=chunk-QZRBO7BE.js.map