@puzzle-ui/ui 0.2.0 → 0.4.0

package/dist/components/forms/color-picker/index.cjs

@@ -0,0 +1,340 @@
+"use client";
+const require_index = require("../../overlays/popout/index.cjs");
+const require_color_picker_utils = require("./color-picker.utils.cjs");
+;/* empty css                   */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/color-picker/index.tsx
+const getSwatchValue = (swatch) => typeof swatch === "string" ? swatch : swatch.value;
+const getSwatchLabel = (swatch) => typeof swatch === "string" ? swatch : swatch.label ?? swatch.value;
+const ColorPicker = (props) => {
+	const { value, defaultValue, onChange, label, description, placeholder = "Select color", colors = [], format = "hexa", clearable = true, clearLabel = "Clear color", open, defaultOpen = false, onOpenChange, position = "bottom", align = "start", disabled = false, className, style, rootClassName, popoverClassName, id, ref, ...triggerProps } = props;
+	const generatedId = (0, react.useId)();
+	const triggerId = id ?? generatedId;
+	const labelId = `${generatedId}-label`;
+	const descriptionId = `${generatedId}-description`;
+	const panelId = `${generatedId}-panel`;
+	const areaId = `${generatedId}-area`;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const isControlled = Object.prototype.hasOwnProperty.call(props, "value");
+	const selectedColor = isControlled ? value : internalValue;
+	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen);
+	const isOpen = open ?? internalOpen;
+	const [hsv, setHsv] = (0, react.useState)(() => (selectedColor ? require_color_picker_utils.parseColorToHsvInBrowser(selectedColor) : null) ?? require_color_picker_utils.DEFAULT_HSV);
+	const [inputValue, setInputValue] = (0, react.useState)(selectedColor ?? "");
+	const [inputError, setInputError] = (0, react.useState)(false);
+	const areaRef = (0, react.useRef)(null);
+	const changeOpen = (0, react.useCallback)((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const commitColor = (0, react.useCallback)((nextColor) => {
+		if (!isControlled) setInternalValue(nextColor);
+		onChange?.(nextColor);
+		setInputValue(nextColor ?? "");
+		setInputError(false);
+	}, [isControlled, onChange]);
+	const updateHsv = (0, react.useCallback)((next) => {
+		const normalized = {
+			h: (next.h % 360 + 360) % 360,
+			s: (0, _puzzle_ui_core.clamp)(next.s, 0, 100),
+			v: (0, _puzzle_ui_core.clamp)(next.v, 0, 100),
+			a: (0, _puzzle_ui_core.clamp)(next.a, 0, 1)
+		};
+		setHsv(normalized);
+		commitColor(require_color_picker_utils.hsvToFormat(normalized, format));
+	}, [commitColor, format]);
+	(0, react.useEffect)(() => {
+		if (!selectedColor) {
+			setHsv(require_color_picker_utils.DEFAULT_HSV);
+			return;
+		}
+		const parsed = require_color_picker_utils.parseColorToHsvInBrowser(selectedColor);
+		if (parsed) setHsv(parsed);
+	}, [selectedColor]);
+	(0, react.useEffect)(() => {
+		if (!isOpen) {
+			setInputValue(selectedColor ?? "");
+			setInputError(false);
+		}
+	}, [isOpen, selectedColor]);
+	const updateArea = (event) => {
+		if (event.type === "pointermove" && event.buttons !== 1) return;
+		const rect = event.currentTarget.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0) return;
+		const saturation = (0, _puzzle_ui_core.clamp)((event.clientX - rect.left) / rect.width * 100, 0, 100);
+		const brightness = (0, _puzzle_ui_core.clamp)((1 - (event.clientY - rect.top) / rect.height) * 100, 0, 100);
+		updateHsv({
+			...hsv,
+			s: saturation,
+			v: brightness
+		});
+	};
+	const handleAreaKeyDown = (event) => {
+		const step = event.shiftKey ? 10 : 1;
+		let saturation = hsv.s;
+		let brightness = hsv.v;
+		switch (event.key) {
+			case "ArrowLeft":
+				saturation -= step;
+				break;
+			case "ArrowRight":
+				saturation += step;
+				break;
+			case "ArrowUp":
+				brightness += step;
+				break;
+			case "ArrowDown":
+				brightness -= step;
+				break;
+			case "Home":
+				saturation = 0;
+				break;
+			case "End":
+				saturation = 100;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		updateHsv({
+			...hsv,
+			s: saturation,
+			v: brightness
+		});
+	};
+	const selectSwatch = (color) => {
+		commitColor(color);
+		const parsed = require_color_picker_utils.parseColorToHsvInBrowser(color);
+		if (parsed) setHsv(parsed);
+	};
+	const applyInput = () => {
+		const color = inputValue.trim();
+		const parsed = require_color_picker_utils.parseColorToHsvInBrowser(color);
+		if (!parsed) {
+			setInputError(true);
+			return;
+		}
+		commitColor(color);
+		setHsv(parsed);
+	};
+	const hueColor = `hsl(${hsv.h}, 100%, 50%)`;
+	const colorAreaStyle = { "--puzzle-color-picker-hue": hueColor };
+	const triggerSwatchStyle = { background: selectedColor ? require_color_picker_utils.resolveCssColor(selectedColor) ?? selectedColor : void 0 };
+	const clearColor = () => {
+		commitColor(void 0);
+		setHsv(require_color_picker_utils.DEFAULT_HSV);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-color-picker", rootClassName),
+		"data-disabled": disabled || void 0,
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				id: labelId,
+				className: "puzzle-color-picker__label",
+				htmlFor: triggerId,
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Popout, {
+				position,
+				align,
+				action: "click",
+				open: isOpen,
+				onOpenChange: changeOpen,
+				closeOnOutsideClick: true,
+				closeOnEscape: true,
+				contentClassName: (0, _puzzle_ui_core.cn)("puzzle-color-picker__popover", popoverClassName),
+				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					...triggerProps,
+					ref,
+					id: triggerId,
+					type: "button",
+					className: (0, _puzzle_ui_core.cn)("puzzle-color-picker__trigger", className),
+					style,
+					disabled,
+					"aria-label": label ? void 0 : "Choose color",
+					"aria-labelledby": label ? labelId : void 0,
+					"aria-describedby": description ? descriptionId : void 0,
+					"aria-haspopup": "dialog",
+					"aria-expanded": isOpen,
+					"aria-controls": isOpen ? panelId : void 0,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "puzzle-color-picker__trigger-swatch",
+							style: triggerSwatchStyle,
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "puzzle-color-picker__trigger-value",
+							children: selectedColor ?? placeholder
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "puzzle-color-picker__trigger-chevron",
+							"aria-hidden": "true",
+							children: "▾"
+						})
+					]
+				}),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					id: panelId,
+					className: "puzzle-color-picker__panel",
+					role: "dialog",
+					"aria-label": label ? `Choose ${label}` : "Choose color",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: areaRef,
+							id: areaId,
+							className: "puzzle-color-picker__area",
+							style: colorAreaStyle,
+							onPointerDown: (event) => {
+								event.currentTarget.setPointerCapture(event.pointerId);
+								updateArea(event);
+							},
+							onPointerMove: updateArea,
+							onKeyDown: handleAreaKeyDown,
+							role: "group",
+							"aria-label": "Color saturation and brightness",
+							tabIndex: 0,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "puzzle-color-picker__area-saturation",
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "puzzle-color-picker__area-brightness",
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "puzzle-color-picker__area-indicator",
+									style: {
+										left: `${hsv.s}%`,
+										top: `${100 - hsv.v}%`
+									},
+									"aria-hidden": "true"
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "puzzle-color-picker__sliders",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "puzzle-color-picker__slider-row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Hue" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "range",
+									min: 0,
+									max: 359,
+									value: Math.round(hsv.h),
+									"aria-label": "Hue",
+									onChange: (event) => updateHsv({
+										...hsv,
+										h: Number(event.currentTarget.value)
+									}),
+									className: "puzzle-color-picker__hue-slider"
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "puzzle-color-picker__slider-row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Opacity" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "range",
+									min: 0,
+									max: 100,
+									value: Math.round(hsv.a * 100),
+									"aria-label": "Opacity",
+									onChange: (event) => updateHsv({
+										...hsv,
+										a: Number(event.currentTarget.value) / 100
+									}),
+									className: "puzzle-color-picker__opacity-slider",
+									style: { "--puzzle-color-picker-hue": hueColor }
+								})]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "puzzle-color-picker__input-section",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									htmlFor: `${generatedId}-input`,
+									className: "puzzle-color-picker__input-label",
+									children: "Color value"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "puzzle-color-picker__input-row",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										id: `${generatedId}-input`,
+										type: "text",
+										value: inputValue,
+										spellCheck: false,
+										autoComplete: "off",
+										"aria-label": "Color value",
+										"aria-invalid": inputError || void 0,
+										placeholder: "#RRGGBB",
+										onChange: (event) => {
+											setInputValue(event.currentTarget.value);
+											setInputError(false);
+										},
+										onKeyDown: (event) => {
+											if (event.key === "Enter") {
+												event.preventDefault();
+												applyInput();
+											}
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "puzzle-color-picker__apply",
+										onClick: applyInput,
+										children: "Apply"
+									})]
+								}),
+								inputError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "puzzle-color-picker__error",
+									role: "alert",
+									children: "Enter a valid CSS color."
+								})
+							]
+						}),
+						(clearable || colors.length > 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "puzzle-color-picker__swatches-section",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "puzzle-color-picker__section-label",
+								children: "Presets"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "puzzle-color-picker__swatches",
+								role: "group",
+								"aria-label": "Preset colors",
+								children: [clearable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "puzzle-color-picker__swatch puzzle-color-picker__clear",
+									"aria-label": clearLabel,
+									"aria-pressed": selectedColor === void 0,
+									title: clearLabel,
+									onClick: clearColor,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "aria-hidden": "true" })
+								}), colors.map((swatch, index) => {
+									const color = getSwatchValue(swatch);
+									const swatchLabel = getSwatchLabel(swatch);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "puzzle-color-picker__swatch",
+										style: { background: require_color_picker_utils.resolveCssColor(color) ?? color },
+										"aria-label": swatchLabel,
+										"aria-pressed": selectedColor === color,
+										title: swatchLabel,
+										"data-selected": selectedColor === color || void 0,
+										"data-dark": (0, _puzzle_ui_core.isColorDark)(color) || void 0,
+										onClick: () => selectSwatch(color)
+									}, `${color}-${index}`);
+								})]
+							})]
+						})
+					]
+				})
+			}),
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				id: descriptionId,
+				className: "puzzle-color-picker__description",
+				children: description
+			})
+		]
+	});
+};
+exports.ColorPicker = ColorPicker;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/color-picker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useState","parseColorToHsvInBrowser","DEFAULT_HSV","useRef","useCallback","clamp","hsvToFormat","resolveCssColor","cn","Popout","isColorDark"],"sources":["../../../../src/components/forms/color-picker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { clamp, cn, isColorDark } from \"@puzzle-ui/core\";\n\nimport { Popout } from \"../../overlays/popout\";\n\nimport {\n  DEFAULT_HSV,\n  hsvToFormat,\n  parseColorToHsvInBrowser,\n  resolveCssColor,\n  type HSVColor,\n} from \"./color-picker.utils\";\n\nimport type {\n  ColorPickerFormat,\n  ColorPickerProps,\n  ColorPickerSwatch,\n} from \"./color-picker.types\";\n\nimport \"./color-picker.css\";\n\nconst getSwatchValue = (swatch: ColorPickerSwatch): string =>\n  typeof swatch === \"string\" ? swatch : swatch.value;\n\nconst getSwatchLabel = (swatch: ColorPickerSwatch): string =>\n  typeof swatch === \"string\" ? swatch : (swatch.label ?? swatch.value);\n\nconst ColorPicker = (props: ColorPickerProps) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    label,\n    description,\n    placeholder = \"Select color\",\n    colors = [],\n    format = \"hexa\",\n    clearable = true,\n    clearLabel = \"Clear color\",\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    position = \"bottom\",\n    align = \"start\",\n    disabled = false,\n    className,\n    style,\n    rootClassName,\n    popoverClassName,\n    id,\n    ref,\n    ...triggerProps\n  } = props;\n\n  const generatedId = useId();\n\n  const triggerId = id ?? generatedId;\n  const labelId = `${generatedId}-label`;\n  const descriptionId = `${generatedId}-description`;\n  const panelId = `${generatedId}-panel`;\n  const areaId = `${generatedId}-area`;\n\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = Object.prototype.hasOwnProperty.call(props, \"value\");\n\n  const selectedColor = isControlled ? value : internalValue;\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = open ?? internalOpen;\n\n  const [hsv, setHsv] = useState<HSVColor>(\n    () =>\n      (selectedColor ? parseColorToHsvInBrowser(selectedColor) : null) ??\n      DEFAULT_HSV,\n  );\n\n  const [inputValue, setInputValue] = useState(selectedColor ?? \"\");\n  const [inputError, setInputError] = useState(false);\n\n  const areaRef = useRef<HTMLDivElement>(null);\n\n  const changeOpen = useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) setInternalOpen(nextOpen);\n\n      onOpenChange?.(nextOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const commitColor = useCallback(\n    (nextColor: string | undefined) => {\n      if (!isControlled) {\n        setInternalValue(nextColor);\n      }\n\n      onChange?.(nextColor);\n\n      setInputValue(nextColor ?? \"\");\n      setInputError(false);\n    },\n    [isControlled, onChange],\n  );\n\n  const updateHsv = useCallback(\n    (next: HSVColor) => {\n      const normalized: HSVColor = {\n        h: ((next.h % 360) + 360) % 360,\n        s: clamp(next.s, 0, 100),\n        v: clamp(next.v, 0, 100),\n        a: clamp(next.a, 0, 1),\n      };\n\n      setHsv(normalized);\n      commitColor(hsvToFormat(normalized, format));\n    },\n    [commitColor, format],\n  );\n\n  useEffect(() => {\n    if (!selectedColor) {\n      setHsv(DEFAULT_HSV);\n      return;\n    }\n\n    const parsed = parseColorToHsvInBrowser(selectedColor);\n\n    if (parsed) setHsv(parsed);\n  }, [selectedColor]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setInputValue(selectedColor ?? \"\");\n      setInputError(false);\n    }\n  }, [isOpen, selectedColor]);\n\n  const updateArea = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.type === \"pointermove\" && event.buttons !== 1) return;\n\n    const rect = event.currentTarget.getBoundingClientRect();\n\n    if (rect.width <= 0 || rect.height <= 0) return;\n\n    const saturation = clamp(\n      ((event.clientX - rect.left) / rect.width) * 100,\n      0,\n      100,\n    );\n\n    const brightness = clamp(\n      (1 - (event.clientY - rect.top) / rect.height) * 100,\n      0,\n      100,\n    );\n\n    updateHsv({\n      ...hsv,\n      s: saturation,\n      v: brightness,\n    });\n  };\n\n  const handleAreaKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 10 : 1;\n\n    let saturation = hsv.s;\n    let brightness = hsv.v;\n\n    switch (event.key) {\n      case \"ArrowLeft\":\n        saturation -= step;\n        break;\n      case \"ArrowRight\":\n        saturation += step;\n        break;\n      case \"ArrowUp\":\n        brightness += step;\n        break;\n      case \"ArrowDown\":\n        brightness -= step;\n        break;\n      case \"Home\":\n        saturation = 0;\n        break;\n      case \"End\":\n        saturation = 100;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n\n    updateHsv({\n      ...hsv,\n      s: saturation,\n      v: brightness,\n    });\n  };\n\n  const selectSwatch = (color: string) => {\n    commitColor(color);\n\n    const parsed = parseColorToHsvInBrowser(color);\n\n    if (parsed) setHsv(parsed);\n  };\n\n  const applyInput = () => {\n    const color = inputValue.trim();\n\n    const parsed = parseColorToHsvInBrowser(color);\n\n    if (!parsed) {\n      setInputError(true);\n      return;\n    }\n\n    commitColor(color);\n    setHsv(parsed);\n  };\n\n  const hueColor = `hsl(${hsv.h}, 100%, 50%)`;\n\n  const colorAreaStyle = {\n    \"--puzzle-color-picker-hue\": hueColor,\n  } as CSSProperties;\n\n  const currentColor = selectedColor\n    ? (resolveCssColor(selectedColor) ?? selectedColor)\n    : undefined;\n\n  const triggerSwatchStyle = {\n    background: currentColor,\n  } as CSSProperties;\n\n  const clearColor = () => {\n    commitColor(undefined);\n    setHsv(DEFAULT_HSV);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-color-picker\", rootClassName)}\n      data-disabled={disabled || undefined}\n    >\n      {label && (\n        <label\n          id={labelId}\n          className=\"puzzle-color-picker__label\"\n          htmlFor={triggerId}\n        >\n          {label}\n        </label>\n      )}\n\n      <Popout\n        position={position}\n        align={align}\n        action=\"click\"\n        open={isOpen}\n        onOpenChange={changeOpen}\n        closeOnOutsideClick\n        closeOnEscape\n        contentClassName={cn(\"puzzle-color-picker__popover\", popoverClassName)}\n        trigger={\n          <button\n            {...triggerProps}\n            ref={ref}\n            id={triggerId}\n            type=\"button\"\n            className={cn(\"puzzle-color-picker__trigger\", className)}\n            style={style}\n            disabled={disabled}\n            aria-label={label ? undefined : \"Choose color\"}\n            aria-labelledby={label ? labelId : undefined}\n            aria-describedby={description ? descriptionId : undefined}\n            aria-haspopup=\"dialog\"\n            aria-expanded={isOpen}\n            aria-controls={isOpen ? panelId : undefined}\n          >\n            <span\n              className=\"puzzle-color-picker__trigger-swatch\"\n              style={triggerSwatchStyle}\n              aria-hidden=\"true\"\n            />\n\n            <span className=\"puzzle-color-picker__trigger-value\">\n              {selectedColor ?? placeholder}\n            </span>\n\n            <span\n              className=\"puzzle-color-picker__trigger-chevron\"\n              aria-hidden=\"true\"\n            >\n              ▾\n            </span>\n          </button>\n        }\n      >\n        <div\n          id={panelId}\n          className=\"puzzle-color-picker__panel\"\n          role=\"dialog\"\n          aria-label={label ? `Choose ${label}` : \"Choose color\"}\n        >\n          <div\n            ref={areaRef}\n            id={areaId}\n            className=\"puzzle-color-picker__area\"\n            style={colorAreaStyle}\n            onPointerDown={(event) => {\n              event.currentTarget.setPointerCapture(event.pointerId);\n              updateArea(event);\n            }}\n            onPointerMove={updateArea}\n            onKeyDown={handleAreaKeyDown}\n            role=\"group\"\n            aria-label=\"Color saturation and brightness\"\n            tabIndex={0}\n          >\n            <span\n              className=\"puzzle-color-picker__area-saturation\"\n              aria-hidden=\"true\"\n            />\n\n            <span\n              className=\"puzzle-color-picker__area-brightness\"\n              aria-hidden=\"true\"\n            />\n\n            <span\n              className=\"puzzle-color-picker__area-indicator\"\n              style={{\n                left: `${hsv.s}%`,\n                top: `${100 - hsv.v}%`,\n              }}\n              aria-hidden=\"true\"\n            />\n          </div>\n\n          <div className=\"puzzle-color-picker__sliders\">\n            <label className=\"puzzle-color-picker__slider-row\">\n              <span>Hue</span>\n\n              <input\n                type=\"range\"\n                min={0}\n                max={359}\n                value={Math.round(hsv.h)}\n                aria-label=\"Hue\"\n                onChange={(event) =>\n                  updateHsv({\n                    ...hsv,\n                    h: Number(event.currentTarget.value),\n                  })\n                }\n                className=\"puzzle-color-picker__hue-slider\"\n              />\n            </label>\n\n            <label className=\"puzzle-color-picker__slider-row\">\n              <span>Opacity</span>\n\n              <input\n                type=\"range\"\n                min={0}\n                max={100}\n                value={Math.round(hsv.a * 100)}\n                aria-label=\"Opacity\"\n                onChange={(event) =>\n                  updateHsv({\n                    ...hsv,\n                    a: Number(event.currentTarget.value) / 100,\n                  })\n                }\n                className=\"puzzle-color-picker__opacity-slider\"\n                style={\n                  {\n                    \"--puzzle-color-picker-hue\": hueColor,\n                  } as CSSProperties\n                }\n              />\n            </label>\n          </div>\n\n          <div className=\"puzzle-color-picker__input-section\">\n            <label\n              htmlFor={`${generatedId}-input`}\n              className=\"puzzle-color-picker__input-label\"\n            >\n              Color value\n            </label>\n\n            <div className=\"puzzle-color-picker__input-row\">\n              <input\n                id={`${generatedId}-input`}\n                type=\"text\"\n                value={inputValue}\n                spellCheck={false}\n                autoComplete=\"off\"\n                aria-label=\"Color value\"\n                aria-invalid={inputError || undefined}\n                placeholder=\"#RRGGBB\"\n                onChange={(event) => {\n                  setInputValue(event.currentTarget.value);\n                  setInputError(false);\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\") {\n                    event.preventDefault();\n                    applyInput();\n                  }\n                }}\n              />\n\n              <button\n                type=\"button\"\n                className=\"puzzle-color-picker__apply\"\n                onClick={applyInput}\n              >\n                Apply\n              </button>\n            </div>\n\n            {inputError && (\n              <p className=\"puzzle-color-picker__error\" role=\"alert\">\n                Enter a valid CSS color.\n              </p>\n            )}\n          </div>\n\n          {(clearable || colors.length > 0) && (\n            <div className=\"puzzle-color-picker__swatches-section\">\n              <span className=\"puzzle-color-picker__section-label\">\n                Presets\n              </span>\n\n              <div\n                className=\"puzzle-color-picker__swatches\"\n                role=\"group\"\n                aria-label=\"Preset colors\"\n              >\n                {clearable && (\n                  <button\n                    type=\"button\"\n                    className=\"puzzle-color-picker__swatch puzzle-color-picker__clear\"\n                    aria-label={clearLabel}\n                    aria-pressed={selectedColor === undefined}\n                    title={clearLabel}\n                    onClick={clearColor}\n                  >\n                    <span aria-hidden=\"true\" />\n                  </button>\n                )}\n\n                {colors.map((swatch, index) => {\n                  const color = getSwatchValue(swatch);\n                  const swatchLabel = getSwatchLabel(swatch);\n\n                  return (\n                    <button\n                      key={`${color}-${index}`}\n                      type=\"button\"\n                      className=\"puzzle-color-picker__swatch\"\n                      style={{\n                        background: resolveCssColor(color) ?? color,\n                      }}\n                      aria-label={swatchLabel}\n                      aria-pressed={selectedColor === color}\n                      title={swatchLabel}\n                      data-selected={selectedColor === color || undefined}\n                      data-dark={isColorDark(color) || undefined}\n                      onClick={() => selectSwatch(color)}\n                    />\n                  );\n                })}\n              </div>\n            </div>\n          )}\n        </div>\n      </Popout>\n\n      {description && (\n        <span id={descriptionId} className=\"puzzle-color-picker__description\">\n          {description}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport {\n  ColorPicker,\n  type ColorPickerProps,\n  type ColorPickerFormat,\n  type ColorPickerSwatch,\n};\n"],"mappings":"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"}

package/dist/components/forms/color-picker/index.d.cts

@@ -0,0 +1,3 @@
+import { ColorPickerFormat, ColorPickerProps, ColorPickerSwatch } from "./color-picker.types.cjs";
+declare const ColorPicker: (props: ColorPickerProps) => import("react").JSX.Element;
+export { ColorPicker, type ColorPickerFormat, type ColorPickerProps, type ColorPickerSwatch };

package/dist/components/forms/color-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { ColorPickerFormat, ColorPickerProps, ColorPickerSwatch } from "./color-picker.types.js";
+declare const ColorPicker: (props: ColorPickerProps) => import("react").JSX.Element;
+export { ColorPicker, type ColorPickerFormat, type ColorPickerProps, type ColorPickerSwatch };