@mdigital_ui/ui 0.4.4 → 0.4.6

package/dist/chunk-UFYG3HKL.js

@@ -0,0 +1,374 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-ROQGBDET.js';
+import { cn } from './chunk-RAS6HUEI.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function hexToHsv(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + 6) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+  }
+  const s = max === 0 ? 0 : d / max;
+  return [h, s, max];
+}
+function hsvToHex(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function isValidHex(v) {
+  return /^#[0-9a-fA-F]{6}$/.test(v);
+}
+function normalizeHex(v) {
+  if (!v) return "#000000";
+  const clean = v.startsWith("#") ? v : `#${v}`;
+  return isValidHex(clean) ? clean.toLowerCase() : "#000000";
+}
+var sizeMap = {
+  xs: { area: "w-40 h-28", hue: "h-2", swatch: "w-4 h-4" },
+  sm: { area: "w-48 h-32", hue: "h-2.5", swatch: "w-5 h-5" },
+  md: { area: "w-56 h-36", hue: "h-3", swatch: "w-6 h-6" },
+  lg: { area: "w-64 h-44", hue: "h-3.5", swatch: "w-7 h-7" }
+};
+var inputVariants = cva(
+  "flex items-center rounded-md border border-border bg-background text-text-primary transition-colors focus-within:border-primary",
+  {
+    variants: {
+      size: {
+        xs: "h-7 px-2 text-xs gap-1.5",
+        sm: "h-8 px-2.5 text-sm gap-2",
+        md: "h-9 px-3 text-sm gap-2",
+        lg: "h-10 px-3.5 text-base gap-2.5"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function SaturationArea({
+  hue,
+  sat,
+  val,
+  onChangeSV,
+  areaClass,
+  disabled
+}) {
+  const ref = React.useRef(null);
+  const update = React.useCallback(
+    (clientX, clientY) => {
+      if (!ref.current || disabled) return;
+      const rect = ref.current.getBoundingClientRect();
+      const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const v = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
+      onChangeSV(s, v);
+    },
+    [onChangeSV, disabled]
+  );
+  const handlePointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    update(e.clientX, e.clientY);
+  };
+  const handlePointerMove = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      update(e.clientX, e.clientY);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("colorPicker_saturation", "relative rounded-md cursor-crosshair", areaClass),
+      style: { background: `hsl(${hue}, 100%, 50%)` },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md", style: { background: "linear-gradient(to right, white, transparent)" } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-md", style: { background: "linear-gradient(to top, black, transparent)" } }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none",
+            style: { left: `${sat * 100}%`, top: `${(1 - val) * 100}%` }
+          }
+        )
+      ]
+    }
+  );
+}
+function HueSlider({
+  hue,
+  onChange,
+  hueClass,
+  disabled
+}) {
+  const ref = React.useRef(null);
+  const update = React.useCallback(
+    (clientX) => {
+      if (!ref.current || disabled) return;
+      const rect = ref.current.getBoundingClientRect();
+      const h = Math.max(0, Math.min(360, (clientX - rect.left) / rect.width * 360));
+      onChange(h);
+    },
+    [onChange, disabled]
+  );
+  const handlePointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    update(e.clientX);
+  };
+  const handlePointerMove = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) update(e.clientX);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("colorPicker_hue", "relative rounded-full cursor-pointer", hueClass),
+      style: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none",
+          style: { left: `${hue / 360 * 100}%` }
+        }
+      )
+    }
+  );
+}
+var ColorPicker = React.memo(
+  ({
+    value,
+    defaultValue = "#3b82f6",
+    onChange,
+    swatches,
+    size = "md",
+    disabled = false,
+    label,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = React.useState(normalizeHex(defaultValue));
+    const currentValue = value !== void 0 ? normalizeHex(value) : internalValue;
+    const [h, s, v] = React.useMemo(() => hexToHsv(currentValue), [currentValue]);
+    const [hue, setHue] = React.useState(h);
+    React.useEffect(() => {
+      if (s > 0.01 || v > 0.01) setHue(h);
+    }, [h, s, v]);
+    const [inputText, setInputText] = React.useState(currentValue);
+    React.useEffect(() => setInputText(currentValue), [currentValue]);
+    const update = (hex) => {
+      const valid = normalizeHex(hex);
+      if (value === void 0) setInternalValue(valid);
+      onChange?.(valid);
+    };
+    const handleSVChange = (ns, nv) => {
+      update(hsvToHex(hue, ns, nv));
+    };
+    const handleHueChange = (nh) => {
+      setHue(nh);
+      update(hsvToHex(nh, s, v));
+    };
+    const handleInputBlur = () => {
+      if (isValidHex(inputText) || isValidHex(`#${inputText}`)) {
+        update(inputText.startsWith("#") ? inputText : `#${inputText}`);
+      } else {
+        setInputText(currentValue);
+      }
+    };
+    const sizes = sizeMap[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "colorPicker_root",
+          "inline-flex flex-col gap-2",
+          disabled && "opacity-50 pointer-events-none",
+          classNames?.root,
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsx(
+            SaturationArea,
+            {
+              hue,
+              sat: s,
+              val: v,
+              onChangeSV: handleSVChange,
+              areaClass: cn(sizes.area, classNames?.saturation),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            HueSlider,
+            {
+              hue,
+              onChange: handleHueChange,
+              hueClass: cn(sizes.hue, classNames?.hueSlider),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "preview",
+                className: cn(
+                  "colorPicker_preview",
+                  "w-8 h-8 rounded-md border border-border shrink-0",
+                  classNames?.preview
+                ),
+                style: { backgroundColor: currentValue }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: inputText,
+                onChange: (e) => setInputText(e.target.value),
+                onBlur: handleInputBlur,
+                onKeyDown: (e) => e.key === "Enter" && handleInputBlur(),
+                className: cn(
+                  "colorPicker_input",
+                  "flex-1 min-w-0 bg-transparent border border-border rounded-md px-2 py-1 text-sm text-text-primary outline-none focus:border-primary font-mono",
+                  classNames?.input
+                ),
+                disabled
+              }
+            )
+          ] }),
+          swatches && swatches.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "swatches",
+              className: cn(
+                "colorPicker_swatches",
+                "flex flex-wrap gap-1",
+                classNames?.swatches
+              ),
+              children: swatches.map((swatch) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => update(swatch),
+                  className: cn(
+                    "colorPicker_swatch",
+                    sizes.swatch,
+                    "rounded-md border border-border cursor-pointer transition-transform hover:scale-110",
+                    currentValue === normalizeHex(swatch) && "ring-2 ring-primary ring-offset-1 ring-offset-background",
+                    classNames?.swatch
+                  ),
+                  style: { backgroundColor: swatch },
+                  "aria-label": `Select color ${swatch}`
+                },
+                swatch
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+var ColorInput = React.memo(
+  ({
+    value,
+    defaultValue = "#3b82f6",
+    onChange,
+    swatches,
+    size = "md",
+    disabled = false,
+    label,
+    fullWidth = true,
+    className,
+    classNames
+  }) => {
+    const [internalValue, setInternalValue] = React.useState(normalizeHex(defaultValue));
+    const currentValue = value !== void 0 ? normalizeHex(value) : internalValue;
+    const update = (hex) => {
+      const valid = normalizeHex(hex);
+      if (value === void 0) setInternalValue(valid);
+      onChange?.(valid);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "colorInput_root",
+          "flex flex-col gap-1.5",
+          fullWidth ? "w-full" : "inline-flex",
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: label }),
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn(inputVariants({ size }), disabled && "opacity-50 cursor-not-allowed", fullWidth && "w-full"), children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-5 h-5 rounded border border-border shrink-0",
+                  style: { backgroundColor: currentValue }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-text-primary font-mono", children: currentValue })
+            ] }) }),
+            /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsx(
+              ColorPicker,
+              {
+                value: currentValue,
+                onChange: update,
+                swatches,
+                size,
+                disabled,
+                classNames
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ColorInput.displayName = "ColorInput";
+var color_picker_default = ColorPicker;
+
+export { ColorInput, ColorPicker, color_picker_default };
+//# sourceMappingURL=chunk-UFYG3HKL.js.map
+//# sourceMappingURL=chunk-UFYG3HKL.js.map

package/dist/chunk-UFYG3HKL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color-picker/index.tsx"],"names":[],"mappings":"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","file":"chunk-UFYG3HKL.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover'\nimport { cn } from '../utils'\nimport type { ColorPickerProps, ColorInputProps } from './types'\n\n// ── Color utilities ──────────────────────────────────────────\nfunction hexToHsv(hex: string): [number, number, number] {\n  const r = parseInt(hex.slice(1, 3), 16) / 255\n  const g = parseInt(hex.slice(3, 5), 16) / 255\n  const b = parseInt(hex.slice(5, 7), 16) / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const d = max - min\n  let h = 0\n  if (d !== 0) {\n    if (max === r) h = ((g - b) / d + 6) % 6\n    else if (max === g) h = (b - r) / d + 2\n    else h = (r - g) / d + 4\n    h *= 60\n  }\n  const s = max === 0 ? 0 : d / max\n  return [h, s, max]\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n  const c = v * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = v - c\n  let r = 0, g = 0, b = 0\n  if (h < 60) { r = c; g = x }\n  else if (h < 120) { r = x; g = c }\n  else if (h < 180) { g = c; b = x }\n  else if (h < 240) { g = x; b = c }\n  else if (h < 300) { r = x; b = c }\n  else { r = c; b = x }\n  const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0')\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nfunction isValidHex(v: string): boolean {\n  return /^#[0-9a-fA-F]{6}$/.test(v)\n}\n\nfunction normalizeHex(v: string): string {\n  if (!v) return '#000000'\n  const clean = v.startsWith('#') ? v : `#${v}`\n  return isValidHex(clean) ? clean.toLowerCase() : '#000000'\n}\n\n// ── Size variants ────────────────────────────────────────────\nconst sizeMap = {\n  xs: { area: 'w-40 h-28', hue: 'h-2', swatch: 'w-4 h-4' },\n  sm: { area: 'w-48 h-32', hue: 'h-2.5', swatch: 'w-5 h-5' },\n  md: { area: 'w-56 h-36', hue: 'h-3', swatch: 'w-6 h-6' },\n  lg: { area: 'w-64 h-44', hue: 'h-3.5', swatch: 'w-7 h-7' },\n}\n\nconst inputVariants = cva(\n  'flex items-center rounded-md border border-border bg-background text-text-primary transition-colors focus-within:border-primary',\n  {\n    variants: {\n      size: {\n        xs: 'h-7 px-2 text-xs gap-1.5',\n        sm: 'h-8 px-2.5 text-sm gap-2',\n        md: 'h-9 px-3 text-sm gap-2',\n        lg: 'h-10 px-3.5 text-base gap-2.5',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n// ── Saturation Area ──────────────────────────────────────────\nfunction SaturationArea({\n  hue, sat, val, onChangeSV, areaClass, disabled,\n}: {\n  hue: number; sat: number; val: number\n  onChangeSV: (s: number, v: number) => void\n  areaClass: string; disabled?: boolean\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  const update = React.useCallback(\n    (clientX: number, clientY: number) => {\n      if (!ref.current || disabled) return\n      const rect = ref.current.getBoundingClientRect()\n      const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))\n      const v = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height))\n      onChangeSV(s, v)\n    },\n    [onChangeSV, disabled],\n  )\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (disabled) return\n    e.currentTarget.setPointerCapture(e.pointerId)\n    update(e.clientX, e.clientY)\n  }\n\n  const handlePointerMove = (e: React.PointerEvent) => {\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      update(e.clientX, e.clientY)\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn('colorPicker_saturation', 'relative rounded-md cursor-crosshair', areaClass)}\n      style={{ background: `hsl(${hue}, 100%, 50%)` }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n    >\n      <div className=\"absolute inset-0 rounded-md\" style={{ background: 'linear-gradient(to right, white, transparent)' }} />\n      <div className=\"absolute inset-0 rounded-md\" style={{ background: 'linear-gradient(to top, black, transparent)' }} />\n      <div\n        className=\"absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none\"\n        style={{ left: `${sat * 100}%`, top: `${(1 - val) * 100}%` }}\n      />\n    </div>\n  )\n}\n\n// ── Hue Slider ───────────────────────────────────────────────\nfunction HueSlider({\n  hue, onChange, hueClass, disabled,\n}: {\n  hue: number; onChange: (h: number) => void; hueClass: string; disabled?: boolean\n}) {\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  const update = React.useCallback(\n    (clientX: number) => {\n      if (!ref.current || disabled) return\n      const rect = ref.current.getBoundingClientRect()\n      const h = Math.max(0, Math.min(360, ((clientX - rect.left) / rect.width) * 360))\n      onChange(h)\n    },\n    [onChange, disabled],\n  )\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (disabled) return\n    e.currentTarget.setPointerCapture(e.pointerId)\n    update(e.clientX)\n  }\n\n  const handlePointerMove = (e: React.PointerEvent) => {\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) update(e.clientX)\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn('colorPicker_hue', 'relative rounded-full cursor-pointer', hueClass)}\n      style={{ background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)' }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n    >\n      <div\n        className=\"absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none\"\n        style={{ left: `${(hue / 360) * 100}%` }}\n      />\n    </div>\n  )\n}\n\n// ── ColorPicker ──────────────────────────────────────────────\nconst ColorPicker = React.memo<ColorPickerProps>(\n  ({\n    value,\n    defaultValue = '#3b82f6',\n    onChange,\n    swatches,\n    size = 'md',\n    disabled = false,\n    label,\n    className,\n    classNames,\n  }) => {\n    const [internalValue, setInternalValue] = React.useState(normalizeHex(defaultValue))\n    const currentValue = value !== undefined ? normalizeHex(value) : internalValue\n\n    const [h, s, v] = React.useMemo(() => hexToHsv(currentValue), [currentValue])\n    const [hue, setHue] = React.useState(h)\n\n    React.useEffect(() => {\n      if (s > 0.01 || v > 0.01) setHue(h)\n    }, [h, s, v])\n\n    const [inputText, setInputText] = React.useState(currentValue)\n    React.useEffect(() => setInputText(currentValue), [currentValue])\n\n    const update = (hex: string) => {\n      const valid = normalizeHex(hex)\n      if (value === undefined) setInternalValue(valid)\n      onChange?.(valid)\n    }\n\n    const handleSVChange = (ns: number, nv: number) => {\n      update(hsvToHex(hue, ns, nv))\n    }\n\n    const handleHueChange = (nh: number) => {\n      setHue(nh)\n      update(hsvToHex(nh, s, v))\n    }\n\n    const handleInputBlur = () => {\n      if (isValidHex(inputText) || isValidHex(`#${inputText}`)) {\n        update(inputText.startsWith('#') ? inputText : `#${inputText}`)\n      } else {\n        setInputText(currentValue)\n      }\n    }\n\n    const sizes = sizeMap[size]\n\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'colorPicker_root',\n          'inline-flex flex-col gap-2',\n          disabled && 'opacity-50 pointer-events-none',\n          classNames?.root,\n          className,\n        )}\n      >\n        {label && (\n          <span className=\"text-sm font-medium text-text-primary\">{label}</span>\n        )}\n\n        <SaturationArea\n          hue={hue} sat={s} val={v}\n          onChangeSV={handleSVChange}\n          areaClass={cn(sizes.area, classNames?.saturation)}\n          disabled={disabled}\n        />\n\n        <HueSlider\n          hue={hue}\n          onChange={handleHueChange}\n          hueClass={cn(sizes.hue, classNames?.hueSlider)}\n          disabled={disabled}\n        />\n\n        {/* Input + preview */}\n        <div className=\"flex items-center gap-2\">\n          <div\n            data-slot=\"preview\"\n            className={cn(\n              'colorPicker_preview',\n              'w-8 h-8 rounded-md border border-border shrink-0',\n              classNames?.preview,\n            )}\n            style={{ backgroundColor: currentValue }}\n          />\n          <input\n            type=\"text\"\n            value={inputText}\n            onChange={(e) => setInputText(e.target.value)}\n            onBlur={handleInputBlur}\n            onKeyDown={(e) => e.key === 'Enter' && handleInputBlur()}\n            className={cn(\n              'colorPicker_input',\n              'flex-1 min-w-0 bg-transparent border border-border rounded-md px-2 py-1 text-sm text-text-primary outline-none focus:border-primary font-mono',\n              classNames?.input,\n            )}\n            disabled={disabled}\n          />\n        </div>\n\n        {/* Swatches */}\n        {swatches && swatches.length > 0 && (\n          <div\n            data-slot=\"swatches\"\n            className={cn(\n              'colorPicker_swatches',\n              'flex flex-wrap gap-1',\n              classNames?.swatches,\n            )}\n          >\n            {swatches.map((swatch) => (\n              <button\n                key={swatch}\n                type=\"button\"\n                onClick={() => update(swatch)}\n                className={cn(\n                  'colorPicker_swatch',\n                  sizes.swatch,\n                  'rounded-md border border-border cursor-pointer transition-transform hover:scale-110',\n                  currentValue === normalizeHex(swatch) && 'ring-2 ring-primary ring-offset-1 ring-offset-background',\n                  classNames?.swatch,\n                )}\n                style={{ backgroundColor: swatch }}\n                aria-label={`Select color ${swatch}`}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nColorPicker.displayName = 'ColorPicker'\n\n// ── ColorInput ───────────────────────────────────────────────\nconst ColorInput = React.memo<ColorInputProps>(\n  ({\n    value,\n    defaultValue = '#3b82f6',\n    onChange,\n    swatches,\n    size = 'md',\n    disabled = false,\n    label,\n    fullWidth = true,\n    className,\n    classNames,\n  }) => {\n    const [internalValue, setInternalValue] = React.useState(normalizeHex(defaultValue))\n    const currentValue = value !== undefined ? normalizeHex(value) : internalValue\n\n    const update = (hex: string) => {\n      const valid = normalizeHex(hex)\n      if (value === undefined) setInternalValue(valid)\n      onChange?.(valid)\n    }\n\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'colorInput_root',\n          'flex flex-col gap-1.5',\n          fullWidth ? 'w-full' : 'inline-flex',\n          className,\n        )}\n      >\n        {label && (\n          <span className=\"text-sm font-medium text-text-primary\">{label}</span>\n        )}\n\n        <Popover>\n          <PopoverTrigger asChild>\n            <div className={cn(inputVariants({ size }), disabled && 'opacity-50 cursor-not-allowed', fullWidth && 'w-full')}>\n              <div\n                className=\"w-5 h-5 rounded border border-border shrink-0\"\n                style={{ backgroundColor: currentValue }}\n              />\n              <span className=\"flex-1 truncate text-text-primary font-mono\">\n                {currentValue}\n              </span>\n            </div>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-3\" align=\"start\">\n            <ColorPicker\n              value={currentValue}\n              onChange={update}\n              swatches={swatches}\n              size={size}\n              disabled={disabled}\n              classNames={classNames}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\n\nColorInput.displayName = 'ColorInput'\n\nexport type * from './types'\nexport { ColorPicker, ColorInput }\nexport default ColorPicker\n"]}

package/dist/chunk-VNH6R5EU.js

@@ -0,0 +1,211 @@
+import { cn } from './chunk-RAS6HUEI.js';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var levelElements = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var levelClasses = {
+  h1: "text-4xl font-bold tracking-tight",
+  h2: "text-3xl font-semibold tracking-tight",
+  h3: "text-2xl font-semibold",
+  h4: "text-xl font-semibold",
+  h5: "text-lg font-medium",
+  h6: "text-base font-medium"
+};
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl"
+};
+var weightClasses = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var textColorClasses = {
+  default: "text-text-primary",
+  primary: "text-primary",
+  secondary: "text-text-secondary",
+  tertiary: "text-text-secondary/60",
+  accent: "text-accent",
+  success: "text-success",
+  error: "text-error",
+  warning: "text-warning",
+  info: "text-info",
+  inherit: ""
+};
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      className: "inline-flex items-center ml-1 text-text-secondary hover:text-text-primary transition-colors cursor-pointer",
+      "aria-label": "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+      ] })
+    }
+  );
+}
+function useTruncation(truncate, ref) {
+  const [expanded, setExpanded] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
+  useEffect(() => {
+    if (!truncate || expanded || !ref.current) return;
+    const el = ref.current;
+    setIsTruncated(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+  }, [truncate, expanded, ref]);
+  return { expanded, setExpanded, isTruncated };
+}
+var Title = React.memo(
+  ({ level = "h1", color = "default", copyable = false, className, children, ...props }) => {
+    const Tag = levelElements[level];
+    const textContent = typeof children === "string" ? children : "";
+    return React.createElement(
+      Tag,
+      {
+        "data-slot": "title",
+        className: cn("typography_title", levelClasses[level], textColorClasses[color] || "", className),
+        ...props
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        copyable && textContent && /* @__PURE__ */ jsx(CopyButton, { text: textContent })
+      ] })
+    );
+  }
+);
+Title.displayName = "Title";
+var Text = React.memo(
+  ({
+    size = "md",
+    weight,
+    color = "default",
+    truncate,
+    copyable = false,
+    code = false,
+    mark = false,
+    del: deleted = false,
+    underline = false,
+    strong = false,
+    italic = false,
+    as: Component = "span",
+    className,
+    children,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const { expanded, setExpanded, isTruncated } = useTruncation(truncate, ref);
+    const textContent = typeof children === "string" ? children : "";
+    const truncateClass = !expanded && truncate ? typeof truncate === "number" ? `line-clamp-${truncate}` : "truncate" : "";
+    let content = children;
+    if (code) content = /* @__PURE__ */ jsx("code", { className: "px-1 py-0.5 rounded bg-surface text-sm font-mono", children: content });
+    if (mark) content = /* @__PURE__ */ jsx("mark", { className: "bg-warning/20 px-0.5 rounded-sm", children: content });
+    if (deleted) content = /* @__PURE__ */ jsx("del", { children: content });
+    if (underline) content = /* @__PURE__ */ jsx("u", { children: content });
+    if (strong) content = /* @__PURE__ */ jsx("strong", { children: content });
+    if (italic) content = /* @__PURE__ */ jsx("em", { children: content });
+    return React.createElement(
+      Component,
+      {
+        ref,
+        "data-slot": "text",
+        className: cn(
+          "typography_text",
+          sizeClasses[size],
+          weight && weightClasses[weight],
+          textColorClasses[color] || "",
+          truncateClass,
+          className
+        ),
+        ...props
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        content,
+        copyable && textContent && /* @__PURE__ */ jsx(CopyButton, { text: textContent }),
+        isTruncated && !expanded && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(true),
+            className: "text-primary hover:text-primary/80 ml-1 text-inherit cursor-pointer",
+            children: "more"
+          }
+        )
+      ] })
+    );
+  }
+);
+Text.displayName = "Text";
+var Paragraph = React.memo(
+  ({
+    size = "md",
+    color = "default",
+    truncate,
+    copyable = false,
+    className,
+    children,
+    ...props
+  }) => {
+    const ref = useRef(null);
+    const { expanded, setExpanded, isTruncated } = useTruncation(truncate, ref);
+    const textContent = typeof children === "string" ? children : "";
+    const truncateClass = !expanded && truncate ? typeof truncate === "number" ? `line-clamp-${truncate}` : "truncate" : "";
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        ref,
+        "data-slot": "paragraph",
+        className: cn(
+          "typography_paragraph",
+          sizeClasses[size],
+          textColorClasses[color] || "",
+          truncateClass,
+          "leading-relaxed",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          copyable && textContent && /* @__PURE__ */ jsx(CopyButton, { text: textContent }),
+          isTruncated && !expanded && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded(true),
+              className: "text-primary hover:text-primary/80 ml-1 text-inherit cursor-pointer",
+              children: "more"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Paragraph.displayName = "Paragraph";
+
+export { Paragraph, Text, Title };
+//# sourceMappingURL=chunk-VNH6R5EU.js.map
+//# sourceMappingURL=chunk-VNH6R5EU.js.map

package/dist/chunk-VNH6R5EU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/typography/index.tsx"],"names":[],"mappings":"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","file":"chunk-VNH6R5EU.js","sourcesContent":["'use client'\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react'\n\nimport { cn } from '../utils'\nimport type { TitleProps, TextProps, ParagraphProps, TypographyLevel, TextSize } from './types'\n\nconst levelElements: Record<TypographyLevel, string> = {\n  h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6',\n}\n\nconst levelClasses: Record<TypographyLevel, string> = {\n  h1: 'text-4xl font-bold tracking-tight',\n  h2: 'text-3xl font-semibold tracking-tight',\n  h3: 'text-2xl font-semibold',\n  h4: 'text-xl font-semibold',\n  h5: 'text-lg font-medium',\n  h6: 'text-base font-medium',\n}\n\nconst sizeClasses: Record<TextSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl',\n  '2xl': 'text-2xl',\n}\n\nconst weightClasses = {\n  light: 'font-light',\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n}\n\nconst textColorClasses = {\n  default: 'text-text-primary',\n  primary: 'text-primary',\n  secondary: 'text-text-secondary',\n  tertiary: 'text-text-secondary/60',\n  accent: 'text-accent',\n  success: 'text-success',\n  error: 'text-error',\n  warning: 'text-warning',\n  info: 'text-info',\n  inherit: '',\n}\n\nfunction CopyButton({ text }: { text: string }) {\n  const [copied, setCopied] = useState(false)\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch { /* noop */ }\n  }, [text])\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleCopy}\n      className=\"inline-flex items-center ml-1 text-text-secondary hover:text-text-primary transition-colors cursor-pointer\"\n      aria-label=\"Copy to clipboard\"\n    >\n      {copied ? (\n        <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      ) : (\n        <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n          <path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\" />\n        </svg>\n      )}\n    </button>\n  )\n}\n\nfunction useTruncation(truncate: boolean | number | undefined, ref: React.RefObject<HTMLElement | null>) {\n  const [expanded, setExpanded] = useState(false)\n  const [isTruncated, setIsTruncated] = useState(false)\n\n  useEffect(() => {\n    if (!truncate || expanded || !ref.current) return\n    const el = ref.current\n    setIsTruncated(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)\n  }, [truncate, expanded, ref])\n\n  return { expanded, setExpanded, isTruncated }\n}\n\n// ── Title ────────────────────────────────────────────────────\nconst Title = React.memo<TitleProps>(\n  ({ level = 'h1', color = 'default', copyable = false, className, children, ...props }) => {\n    const Tag = levelElements[level]\n    const textContent = typeof children === 'string' ? children : ''\n\n    return React.createElement(\n      Tag as any,\n      {\n        'data-slot': 'title',\n        className: cn('typography_title', levelClasses[level], textColorClasses[color] || '', className),\n        ...props,\n      },\n      <>\n        {children}\n        {copyable && textContent && <CopyButton text={textContent} />}\n      </>,\n    )\n  },\n)\n\nTitle.displayName = 'Title'\n\n// ── Text ─────────────────────────────────────────────────────\nconst Text = React.memo<TextProps>(\n  ({\n    size = 'md',\n    weight,\n    color = 'default',\n    truncate,\n    copyable = false,\n    code = false,\n    mark = false,\n    del: deleted = false,\n    underline = false,\n    strong = false,\n    italic = false,\n    as: Component = 'span',\n    className,\n    children,\n    ...props\n  }) => {\n    const ref = useRef<HTMLElement>(null)\n    const { expanded, setExpanded, isTruncated } = useTruncation(truncate, ref)\n    const textContent = typeof children === 'string' ? children : ''\n\n    const truncateClass = !expanded && truncate\n      ? typeof truncate === 'number'\n        ? `line-clamp-${truncate}`\n        : 'truncate'\n      : ''\n\n    let content: React.ReactNode = children\n    if (code) content = <code className=\"px-1 py-0.5 rounded bg-surface text-sm font-mono\">{content}</code>\n    if (mark) content = <mark className=\"bg-warning/20 px-0.5 rounded-sm\">{content}</mark>\n    if (deleted) content = <del>{content}</del>\n    if (underline) content = <u>{content}</u>\n    if (strong) content = <strong>{content}</strong>\n    if (italic) content = <em>{content}</em>\n\n    return React.createElement(\n      Component,\n      {\n        ref: ref as any,\n        'data-slot': 'text',\n        className: cn(\n          'typography_text',\n          sizeClasses[size],\n          weight && weightClasses[weight],\n          textColorClasses[color] || '',\n          truncateClass,\n          className,\n        ),\n        ...props,\n      },\n      <>\n        {content}\n        {copyable && textContent && <CopyButton text={textContent} />}\n        {isTruncated && !expanded && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded(true)}\n            className=\"text-primary hover:text-primary/80 ml-1 text-inherit cursor-pointer\"\n          >\n            more\n          </button>\n        )}\n      </>,\n    )\n  },\n)\n\nText.displayName = 'Text'\n\n// ── Paragraph ────────────────────────────────────────────────\nconst Paragraph = React.memo<ParagraphProps>(\n  ({\n    size = 'md',\n    color = 'default',\n    truncate,\n    copyable = false,\n    className,\n    children,\n    ...props\n  }) => {\n    const ref = useRef<HTMLParagraphElement>(null)\n    const { expanded, setExpanded, isTruncated } = useTruncation(truncate, ref)\n    const textContent = typeof children === 'string' ? children : ''\n\n    const truncateClass = !expanded && truncate\n      ? typeof truncate === 'number'\n        ? `line-clamp-${truncate}`\n        : 'truncate'\n      : ''\n\n    return (\n      <p\n        ref={ref}\n        data-slot=\"paragraph\"\n        className={cn(\n          'typography_paragraph',\n          sizeClasses[size],\n          textColorClasses[color] || '',\n          truncateClass,\n          'leading-relaxed',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {copyable && textContent && <CopyButton text={textContent} />}\n        {isTruncated && !expanded && (\n          <button\n            type=\"button\"\n            onClick={() => setExpanded(true)}\n            className=\"text-primary hover:text-primary/80 ml-1 text-inherit cursor-pointer\"\n          >\n            more\n          </button>\n        )}\n      </p>\n    )\n  },\n)\n\nParagraph.displayName = 'Paragraph'\n\nexport type * from './types'\nexport { Title, Text, Paragraph }\n"]}