@aloudata/aloudata-design 3.1.6 → 3.2.0-beta.0

package/dist/ColorPicker/index.js

@@ -5,6 +5,7 @@ import { LocaleContext, getTranslator } from "../locale/default.js";
 import { colors, specialColors } from "./constant.js";
 /* empty css             */
 import ColorPicker$1 from "./ComplexColorPicker/index.js";
+import { c } from "react-compiler-runtime";
 import { useContext, useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPicker/index.tsx
@@ -19,25 +20,98 @@ function setLocalRecentColors(localStorageKey, colors) {
 	localStorage.setItem(localStorageKey, colors.join(","));
 }
 var MAX_RECENT_COLORS = 10;
-function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0], localStorageKey = "ald_recent_colors", disabled = false, mode = "simple", complexModeProps, bordered = true }) {
+function ColorPicker(t0) {
+	const $ = c(74);
+	const { className, value, icon, onChange, defaultColor: t1, localStorageKey: t2, disabled: t3, mode: t4, complexModeProps, bordered: t5 } = t0;
+	const defaultColor = t1 === void 0 ? colors[0] : t1;
+	const localStorageKey = t2 === void 0 ? "ald_recent_colors" : t2;
+	const disabled = t3 === void 0 ? false : t3;
+	const mode = t4 === void 0 ? "simple" : t4;
+	const bordered = t5 === void 0 ? true : t5;
 	const { locale } = useContext(LocaleContext);
-	const t = getTranslator(locale);
+	let t6;
+	if ($[0] !== locale) {
+		t6 = getTranslator(locale);
+		$[0] = locale;
+		$[1] = t6;
+	} else t6 = $[1];
+	const t = t6;
 	const [open, setOpen] = useState(false);
-	const [recentColors, setRecentColors] = useState([]);
+	let t7;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = [];
+		$[2] = t7;
+	} else t7 = $[2];
+	const [recentColors, setRecentColors] = useState(t7);
 	const overlayRef = useRef(null);
 	const wrapRef = useRef(null);
 	const triggerRef = useRef(null);
-	const swatchRefs = useRef({});
-	const triggerId = `ald-color-picker-trigger-${useId().replace(/:/g, "")}`;
-	const popupId = `ald-color-picker-popup-${useId().replace(/:/g, "")}`;
-	const swatchOrder = Array.from(new Set([
-		defaultColor,
-		...colors,
-		...recentColors
-	]));
-	useEffect(() => {
-		setRecentColors(getLocalRecentColors(localStorageKey));
-	}, [localStorageKey]);
+	let t8;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {};
+		$[3] = t8;
+	} else t8 = $[3];
+	const swatchRefs = useRef(t8);
+	const t9 = useId();
+	let t10;
+	if ($[4] !== t9) {
+		let t11;
+		if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = /:/g;
+			$[6] = t11;
+		} else t11 = $[6];
+		t10 = t9.replace(t11, "");
+		$[4] = t9;
+		$[5] = t10;
+	} else t10 = $[5];
+	const triggerId = `ald-color-picker-trigger-${t10}`;
+	const t11 = useId();
+	let t12;
+	if ($[7] !== t11) {
+		let t13;
+		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = /:/g;
+			$[9] = t13;
+		} else t13 = $[9];
+		t12 = t11.replace(t13, "");
+		$[7] = t11;
+		$[8] = t12;
+	} else t12 = $[8];
+	const popupId = `ald-color-picker-popup-${t12}`;
+	let t13;
+	if ($[10] !== defaultColor || $[11] !== recentColors) {
+		const t14 = [
+			defaultColor,
+			...colors,
+			...recentColors
+		];
+		let t15;
+		if ($[13] !== t14) {
+			t15 = new Set(t14);
+			$[13] = t14;
+			$[14] = t15;
+		} else t15 = $[14];
+		t13 = Array.from(t15);
+		$[10] = defaultColor;
+		$[11] = recentColors;
+		$[12] = t13;
+	} else t13 = $[12];
+	const swatchOrder = t13;
+	let t14;
+	let t15;
+	if ($[15] !== localStorageKey) {
+		t14 = () => {
+			setRecentColors(getLocalRecentColors(localStorageKey));
+		};
+		t15 = [localStorageKey];
+		$[15] = localStorageKey;
+		$[16] = t14;
+		$[17] = t15;
+	} else {
+		t14 = $[16];
+		t15 = $[17];
+	}
+	useEffect(t14, t15);
 	const onColorSelect = (color) => {
 		const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];
 		if (newRecentColors.length > MAX_RECENT_COLORS) newRecentColors.pop();
@@ -47,49 +121,82 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 		setOpen(false);
 		window.setTimeout(() => triggerRef.current?.focus(), 0);
 	};
-	useEffect(() => {
-		const handleClick = (e) => {
-			if (!wrapRef.current?.contains(e.target) && !overlayRef.current?.contains(e.target)) return setOpen(false);
+	let t16;
+	let t17;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = () => {
+			const handleClick = (e) => {
+				if (!wrapRef.current?.contains(e.target) && !overlayRef.current?.contains(e.target)) return setOpen(false);
+			};
+			document.addEventListener("click", handleClick);
+			return () => {
+				document.removeEventListener("click", handleClick);
+			};
 		};
-		document.addEventListener("click", handleClick);
-		return () => {
-			document.removeEventListener("click", handleClick);
+		t17 = [];
+		$[18] = t16;
+		$[19] = t17;
+	} else {
+		t16 = $[18];
+		t17 = $[19];
+	}
+	useEffect(t16, t17);
+	let t18;
+	let t19;
+	if ($[20] !== defaultColor || $[21] !== open || $[22] !== swatchOrder || $[23] !== value) {
+		t18 = () => {
+			if (!open) return;
+			const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
+			window.setTimeout(() => {
+				swatchRefs.current[swatchOrder[selectedIndex]]?.focus();
+			}, 0);
 		};
-	}, []);
-	useEffect(() => {
-		if (!open) return;
-		const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
-		window.setTimeout(() => {
-			swatchRefs.current[swatchOrder[selectedIndex]]?.focus();
-		}, 0);
-	}, [
-		defaultColor,
-		open,
-		swatchOrder,
-		value
-	]);
+		t19 = [
+			defaultColor,
+			open,
+			swatchOrder,
+			value
+		];
+		$[20] = defaultColor;
+		$[21] = open;
+		$[22] = swatchOrder;
+		$[23] = value;
+		$[24] = t18;
+		$[25] = t19;
+	} else {
+		t18 = $[24];
+		t19 = $[25];
+	}
+	useEffect(t18, t19);
+	let t20;
+	if ($[26] !== open || $[27] !== popupId) {
+		t20 = [open, popupId];
+		$[26] = open;
+		$[27] = popupId;
+		$[28] = t20;
+	} else t20 = $[28];
 	useEffect(() => {
 		triggerRef.current?.setAttribute("aria-expanded", String(open));
 		triggerRef.current?.setAttribute("aria-controls", popupId);
-	}, [open, popupId]);
-	const renderSwatch = (color, label) => {
-		const selected = color === value;
-		const index = swatchOrder.indexOf(color);
-		const selectedIndex = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
+	}, t20);
+	const renderSwatch = (color_0, label) => {
+		const selected = color_0 === value;
+		const index = swatchOrder.indexOf(color_0);
+		const selectedIndex_0 = Math.max(0, swatchOrder.indexOf(value ?? defaultColor));
 		return /* @__PURE__ */ jsx("button", {
 			type: "button",
-			id: `${popupId}-swatch-${encodeURIComponent(color)}`,
+			id: `${popupId}-swatch-${encodeURIComponent(color_0)}`,
 			ref: (node) => {
-				swatchRefs.current[color] = node;
+				swatchRefs.current[color_0] = node;
 			},
 			role: "radio",
 			"aria-label": label,
 			"aria-checked": selected,
-			tabIndex: index === selectedIndex ? 0 : -1,
+			tabIndex: index === selectedIndex_0 ? 0 : -1,
 			disabled,
 			className: cn("tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)] tw-bg-transparent tw-p-0", { "tw-border-[var(--border-neutral-strong)]": selected }),
 			onClick: () => {
-				if (!selected) onColorSelect(color);
+				if (!selected) onColorSelect(color_0);
 			},
 			onKeyDown: (event) => {
 				if (event.key === "Escape") {
@@ -113,23 +220,58 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 					swatchRefs.current[swatchOrder[event.key === "Home" ? 0 : swatchOrder.length - 1]]?.focus();
 				}
 			},
-			style: { borderColor: selected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
+			style: { borderColor: selected ? "var(--border-neutral-strong)" : specialColors.includes(color_0) ? "var(--border-neutral-subtle)" : color_0 },
 			children: /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				className: cn("tw-block tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": selected }),
-				style: { backgroundColor: color }
+				style: { backgroundColor: color_0 }
 			})
-		}, `${label}-${color}`);
+		}, `${label}-${color_0}`);
 	};
+	const t21 = t.ColorPicker.standardColor;
+	let t22;
+	if ($[29] !== t.ColorPicker.standardColor) {
+		t22 = /* @__PURE__ */ jsx("p", { children: t.ColorPicker.standardColor });
+		$[29] = t.ColorPicker.standardColor;
+		$[30] = t22;
+	} else t22 = $[30];
+	const t23 = "tw-mt-1.5 tw-text-xs";
+	let t24;
+	if ($[31] !== t.ColorPicker.recentlyUsed) {
+		t24 = /* @__PURE__ */ jsx("p", { children: t.ColorPicker.recentlyUsed });
+		$[31] = t.ColorPicker.recentlyUsed;
+		$[32] = t24;
+	} else t24 = $[32];
+	const t25 = "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]";
+	const t26 = recentColors.map((color_2) => renderSwatch(color_2, color_2));
+	let t27;
+	if ($[33] !== t26) {
+		t27 = /* @__PURE__ */ jsx("div", {
+			className: t25,
+			children: t26
+		});
+		$[33] = t26;
+		$[34] = t27;
+	} else t27 = $[34];
+	let t28;
+	if ($[35] !== t24 || $[36] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: t23,
+			children: [t24, t27]
+		});
+		$[35] = t24;
+		$[36] = t27;
+		$[37] = t28;
+	} else t28 = $[37];
 	const overlay = /* @__PURE__ */ jsxs("div", {
 		id: popupId,
 		role: "radiogroup",
-		"aria-label": t.ColorPicker.standardColor,
+		"aria-label": t21,
 		className: "tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-floating)] tw-p-[8px_7px]",
 		ref: overlayRef,
-		onKeyDown: (event) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
+		onKeyDown: (event_0) => {
+			if (event_0.key === "Escape") {
+				event_0.preventDefault();
 				setOpen(false);
 				triggerRef.current?.focus();
 			}
@@ -144,86 +286,168 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw-mt-1.5 tw-text-xs",
-				children: [/* @__PURE__ */ jsx("p", { children: t.ColorPicker.standardColor }), /* @__PURE__ */ jsx("div", {
+				children: [t22, /* @__PURE__ */ jsx("div", {
 					className: "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]",
-					children: colors.map((color) => renderSwatch(color, color))
+					children: colors.map((color_1) => renderSwatch(color_1, color_1))
 				})]
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "tw-mt-1.5 tw-text-xs",
-				children: [/* @__PURE__ */ jsx("p", { children: t.ColorPicker.recentlyUsed }), /* @__PURE__ */ jsx("div", {
-					className: "tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]",
-					children: recentColors.map((color) => renderSwatch(color, color))
-				})]
-			})
+			t28
 		]
 	});
-	if (mode === "simple") return /* @__PURE__ */ jsx("div", {
-		className: cn(className, "tw-relative tw-w-14", { "tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default": disabled }),
-		ref: wrapRef,
-		children: /* @__PURE__ */ jsx(Dropdown, {
-			trigger: "click",
-			open,
-			onOpenChange: setOpen,
-			disabled,
-			placement: "bottom-start",
-			overlayClassName: "ald-color-picker-overlay-wrapper",
-			dropdownRender: () => {
-				return overlay;
-			},
-			children: /* @__PURE__ */ jsxs("button", {
+	if (mode === "simple") {
+		let t29;
+		if ($[38] !== className || $[39] !== disabled) {
+			t29 = cn(className, "tw-relative tw-w-14", { "tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default": disabled });
+			$[38] = className;
+			$[39] = disabled;
+			$[40] = t29;
+		} else t29 = $[40];
+		const t30 = () => overlay;
+		const t31 = t.ColorPicker.default;
+		const t32 = open && bordered !== false;
+		const t33 = bordered === false;
+		const t34 = !disabled && bordered !== false;
+		const t35 = bordered === false;
+		let t36;
+		if ($[41] !== disabled || $[42] !== t32 || $[43] !== t33 || $[44] !== t34 || $[45] !== t35) {
+			t36 = cn("ald-color-picker-wrapper", "tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out", {
+				"tw-border-[var(--border-brand-subtle)]": t32,
+				"tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]": disabled,
+				"tw-border-[var(--action-ghost-normal)]": t33,
+				"hover:tw-border-[var(--border-brand-subtle)]": t34,
+				"hover:tw-border-[var(--action-ghost-normal)]": t35
+			});
+			$[41] = disabled;
+			$[42] = t32;
+			$[43] = t33;
+			$[44] = t34;
+			$[45] = t35;
+			$[46] = t36;
+		} else t36 = $[46];
+		let t37;
+		let t38;
+		if ($[47] !== disabled) {
+			t37 = (e_0) => {
+				if (disabled) {
+					e_0.stopPropagation();
+					return;
+				}
+				setOpen(_temp);
+			};
+			t38 = (event_1) => {
+				if (disabled) return;
+				if (event_1.key === "ArrowDown" || event_1.key === "ArrowUp" || event_1.key === "Enter" || event_1.key === " ") {
+					event_1.preventDefault();
+					setOpen(true);
+				}
+			};
+			$[47] = disabled;
+			$[48] = t37;
+			$[49] = t38;
+		} else {
+			t37 = $[48];
+			t38 = $[49];
+		}
+		let t39;
+		if ($[50] !== icon || $[51] !== value) {
+			t39 = icon ? /* @__PURE__ */ jsxs("div", {
+				className: "tw-relative -tw-top-px",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "tw-mb-px",
+					children: icon
+				}), /* @__PURE__ */ jsx("div", {
+					className: "tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2",
+					style: { backgroundColor: value ?? "var(--content-secondary)" }
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]",
+				children: ["A", /* @__PURE__ */ jsx("div", {
+					className: "tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5",
+					style: { backgroundColor: value ?? "var(--content-secondary)" }
+				})]
+			});
+			$[50] = icon;
+			$[51] = value;
+			$[52] = t39;
+		} else t39 = $[52];
+		let t40;
+		if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+			t40 = /* @__PURE__ */ jsx(Memo, {
+				size: 14,
+				color: "var(--content-secondary)"
+			});
+			$[53] = t40;
+		} else t40 = $[53];
+		let t41;
+		if ($[54] !== open || $[55] !== popupId || $[56] !== t.ColorPicker.default || $[57] !== t36 || $[58] !== t37 || $[59] !== t38 || $[60] !== t39 || $[61] !== triggerId || $[62] !== triggerRef) {
+			t41 = /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				id: triggerId,
 				ref: triggerRef,
-				"aria-label": t.ColorPicker.default,
+				"aria-label": t31,
 				"aria-controls": popupId,
 				"aria-expanded": open,
-				className: cn("ald-color-picker-wrapper", "tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out", {
-					"tw-border-[var(--border-brand-subtle)]": open && bordered !== false,
-					"tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]": disabled,
-					"tw-border-[var(--action-ghost-normal)]": bordered === false,
-					"hover:tw-border-[var(--border-brand-subtle)]": !disabled && bordered !== false,
-					"hover:tw-border-[var(--action-ghost-normal)]": bordered === false
-				}),
-				onClick: (e) => {
-					if (disabled) {
-						e.stopPropagation();
-						return;
-					}
-					setOpen((current) => !current);
-				},
-				onKeyDown: (event) => {
-					if (disabled) return;
-					if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-						event.preventDefault();
-						setOpen(true);
-					}
-				},
-				children: [icon ? /* @__PURE__ */ jsxs("div", {
-					className: "tw-relative -tw-top-px",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "tw-mb-px",
-						children: icon
-					}), /* @__PURE__ */ jsx("div", {
-						className: "tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2",
-						style: { backgroundColor: value ?? "var(--content-secondary)" }
-					})]
-				}) : /* @__PURE__ */ jsxs("div", {
-					className: "tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]",
-					children: ["A", /* @__PURE__ */ jsx("div", {
-						className: "tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5",
-						style: { backgroundColor: value ?? "var(--content-secondary)" }
-					})]
-				}), /* @__PURE__ */ jsx(Memo, {
-					size: 14,
-					color: "var(--content-secondary)"
-				})]
-			})
-		})
-	});
-	if (mode === "complex") return /* @__PURE__ */ jsx(ColorPicker$1, { ...complexModeProps });
+				className: t36,
+				onClick: t37,
+				onKeyDown: t38,
+				children: [t39, t40]
+			});
+			$[54] = open;
+			$[55] = popupId;
+			$[56] = t.ColorPicker.default;
+			$[57] = t36;
+			$[58] = t37;
+			$[59] = t38;
+			$[60] = t39;
+			$[61] = triggerId;
+			$[62] = triggerRef;
+			$[63] = t41;
+		} else t41 = $[63];
+		let t42;
+		if ($[64] !== disabled || $[65] !== open || $[66] !== t30 || $[67] !== t41) {
+			t42 = /* @__PURE__ */ jsx(Dropdown, {
+				trigger: "click",
+				open,
+				onOpenChange: setOpen,
+				disabled,
+				placement: "bottom-start",
+				overlayClassName: "ald-color-picker-overlay-wrapper",
+				dropdownRender: t30,
+				children: t41
+			});
+			$[64] = disabled;
+			$[65] = open;
+			$[66] = t30;
+			$[67] = t41;
+			$[68] = t42;
+		} else t42 = $[68];
+		let t43;
+		if ($[69] !== t29 || $[70] !== t42) {
+			t43 = /* @__PURE__ */ jsx("div", {
+				className: t29,
+				ref: wrapRef,
+				children: t42
+			});
+			$[69] = t29;
+			$[70] = t42;
+			$[71] = t43;
+		} else t43 = $[71];
+		return t43;
+	}
+	if (mode === "complex") {
+		let t29;
+		if ($[72] !== complexModeProps) {
+			t29 = /* @__PURE__ */ jsx(ColorPicker$1, { ...complexModeProps });
+			$[72] = complexModeProps;
+			$[73] = t29;
+		} else t29 = $[73];
+		return t29;
+	}
 	return null;
 }
+function _temp(current) {
+	return !current;
+}
 //#endregion
 export { ColorPicker as default };
 

package/dist/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/ColorPicker/index.tsx"],"sourcesContent":["import { cn as cls } from '../lib/utils';\nimport React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport Dropdown from '../Dropdown';\nimport { FoldDownFill } from '../Icon';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { colors as defaultColors, specialColors } from './constant';\nimport type { ColorPickerProps } from './interface';\nimport InnerColorPicker from './ComplexColorPicker';\nimport './color-picker.css';\n\nexport interface IColorPickerProps {\n  className?: string;\n  value?: string;\n  defaultColor?: string;\n  localStorageKey?: string;\n  onChange?: (color: string) => void;\n  icon?: React.ReactNode;\n  bordered?: boolean;\n  disabled?: boolean;\n  mode?: 'simple' | 'complex';\n  complexModeProps?: ColorPickerProps;\n}\n\nfunction getLocalRecentColors(localStorageKey: string) {\n  if (!window.localStorage) {\n    return [];\n  }\n  const colorStr = localStorage.getItem(localStorageKey);\n  if (!colorStr) {\n    return [];\n  }\n\n  return colorStr.split(',');\n}\n\nfunction setLocalRecentColors(localStorageKey: string, colors: string[]) {\n  if (!window.localStorage) {\n    return;\n  }\n  localStorage.setItem(localStorageKey, colors.join(','));\n}\n\nconst MAX_RECENT_COLORS = 10;\nexport default function ColorPicker({\n  className,\n  value,\n  icon,\n  onChange,\n  defaultColor = defaultColors[0],\n  localStorageKey = 'ald_recent_colors',\n  disabled = false,\n  mode = 'simple',\n  complexModeProps,\n  bordered = true,\n}: IColorPickerProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const [open, setOpen] = useState(false);\n  const [recentColors, setRecentColors] = useState<string[]>([]);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const swatchRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const triggerId = `ald-color-picker-trigger-${useId().replace(/:/g, '')}`;\n  const popupId = `ald-color-picker-popup-${useId().replace(/:/g, '')}`;\n  const swatchOrder = Array.from(\n    new Set([defaultColor, ...defaultColors, ...recentColors]),\n  );\n\n  useEffect(() => {\n    setRecentColors(getLocalRecentColors(localStorageKey));\n  }, [localStorageKey]);\n\n  const onColorSelect = (color: string) => {\n    const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];\n    if (newRecentColors.length > MAX_RECENT_COLORS) {\n      newRecentColors.pop();\n    }\n\n    setRecentColors(newRecentColors);\n    setLocalRecentColors(localStorageKey, newRecentColors);\n    onChange?.(color);\n    setOpen(false);\n    window.setTimeout(() => triggerRef.current?.focus(), 0);\n  };\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (\n        !wrapRef.current?.contains(e.target as Node) &&\n        !overlayRef.current?.contains(e.target as Node)\n      ) {\n        return setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const selectedIndex = Math.max(\n      0,\n      swatchOrder.indexOf(value ?? defaultColor),\n    );\n    window.setTimeout(() => {\n      swatchRefs.current[swatchOrder[selectedIndex]]?.focus();\n    }, 0);\n  }, [defaultColor, open, swatchOrder, value]);\n\n  useEffect(() => {\n    triggerRef.current?.setAttribute('aria-expanded', String(open));\n    triggerRef.current?.setAttribute('aria-controls', popupId);\n  }, [open, popupId]);\n\n  const renderSwatch = (color: string, label: string) => {\n    const selected = color === value;\n    const index = swatchOrder.indexOf(color);\n    const selectedIndex = Math.max(\n      0,\n      swatchOrder.indexOf(value ?? defaultColor),\n    );\n    return (\n      <button\n        type=\"button\"\n        key={`${label}-${color}`}\n        id={`${popupId}-swatch-${encodeURIComponent(color)}`}\n        ref={(node) => {\n          swatchRefs.current[color] = node;\n        }}\n        role=\"radio\"\n        aria-label={label}\n        aria-checked={selected}\n        tabIndex={index === selectedIndex ? 0 : -1}\n        disabled={disabled}\n        className={cls(\n          'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)] tw-bg-transparent tw-p-0',\n          {\n            'tw-border-[var(--border-neutral-strong)]': selected,\n          },\n        )}\n        onClick={() => {\n          if (!selected) onColorSelect(color);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Escape') {\n            event.preventDefault();\n            setOpen(false);\n            triggerRef.current?.focus();\n            return;\n          }\n          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[(index + 1) % swatchOrder.length]\n            ]?.focus();\n            return;\n          }\n          if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[(index - 1 + swatchOrder.length) % swatchOrder.length]\n            ]?.focus();\n            return;\n          }\n          if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[event.key === 'Home' ? 0 : swatchOrder.length - 1]\n            ]?.focus();\n          }\n        }}\n        style={{\n          borderColor: selected\n            ? 'var(--border-neutral-strong)'\n            : specialColors.includes(color)\n            ? 'var(--border-neutral-subtle)'\n            : color,\n        }}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cls('tw-block tw-h-full tw-w-full', {\n            'tw-m-px tw-h-[17px] tw-w-[17px]': selected,\n          })}\n          style={{ backgroundColor: color }}\n        />\n      </button>\n    );\n  };\n\n  const overlay = (\n    <div\n      id={popupId}\n      role=\"radiogroup\"\n      aria-label={t.ColorPicker.standardColor}\n      className=\"tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-floating)] tw-p-[8px_7px]\"\n      ref={overlayRef}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          setOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}\n    >\n      <div className=\"tw-flex tw-items-center tw-text-xs\">\n        <div className=\"tw-mr-2\">\n          {renderSwatch(defaultColor, t.ColorPicker.default)}\n        </div>\n        {t.ColorPicker.default}\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.standardColor}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]\">\n          {defaultColors.map((color) => renderSwatch(color, color))}\n        </div>\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.recentlyUsed}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]\">\n          {recentColors.map((color) => renderSwatch(color, color))}\n        </div>\n      </div>\n    </div>\n  );\n  if (mode === 'simple') {\n    return (\n      <div\n        className={cls(className, 'tw-relative tw-w-14', {\n          'tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default':\n            disabled,\n        })}\n        ref={wrapRef}\n      >\n        <Dropdown\n          trigger={'click'}\n          open={open}\n          onOpenChange={setOpen}\n          disabled={disabled}\n          placement={'bottom-start'}\n          overlayClassName={'ald-color-picker-overlay-wrapper'}\n          dropdownRender={() => {\n            return overlay;\n          }}\n        >\n          <button\n            type=\"button\"\n            id={triggerId}\n            ref={triggerRef}\n            aria-label={t.ColorPicker.default}\n            aria-controls={popupId}\n            aria-expanded={open}\n            className={cls(\n              'ald-color-picker-wrapper',\n              'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out',\n              {\n                'tw-border-[var(--border-brand-subtle)]':\n                  open && bordered !== false,\n                'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]':\n                  disabled,\n                'tw-border-[var(--action-ghost-normal)]': bordered === false,\n                'hover:tw-border-[var(--border-brand-subtle)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-[var(--action-ghost-normal)]':\n                  bordered === false,\n              },\n            )}\n            onClick={(e) => {\n              if (disabled) {\n                e.stopPropagation();\n                return;\n              }\n              setOpen((current) => !current);\n            }}\n            onKeyDown={(event) => {\n              if (disabled) return;\n              if (\n                event.key === 'ArrowDown' ||\n                event.key === 'ArrowUp' ||\n                event.key === 'Enter' ||\n                event.key === ' '\n              ) {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n          >\n            {icon ? (\n              <div className=\"tw-relative -tw-top-px\">\n                <div className=\"tw-mb-px\">{icon}</div>\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            ) : (\n              <div className=\"tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]\">\n                A\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--content-secondary)'} />\n          </button>\n        </Dropdown>\n      </div>\n    );\n  }\n  if (mode === 'complex') {\n    return <InnerColorPicker {...complexModeProps} />;\n  }\n\n  return null;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["cn","cls","React","useContext","useEffect","useId","useRef","useState","Dropdown","FoldDownFill","LocaleContext","getTranslator","colors","defaultColors","specialColors","ColorPickerProps","InnerColorPicker","IColorPickerProps","className","value","defaultColor","localStorageKey","onChange","color","icon","ReactNode","bordered","disabled","mode","complexModeProps","getLocalRecentColors","window","localStorage","colorStr","getItem","split","setLocalRecentColors","setItem","join","MAX_RECENT_COLORS","ColorPicker","t0","$","_c","t1","t2","t3","t4","t5","undefined","locale","t6","t","open","setOpen","t7","Symbol","for","recentColors","setRecentColors","overlayRef","wrapRef","triggerRef","t8","swatchRefs","t9","t10","t11","replace","triggerId","t12","t13","popupId","t14","t15","Set","Array","from","swatchOrder","onColorSelect","newRecentColors","filter","c","length","pop","setTimeout","current","focus","t16","t17","handleClick","e","contains","target","Node","document","addEventListener","removeEventListener","t18","t19","selectedIndex","Math","max","indexOf","t20","setAttribute","String","renderSwatch","color_0","label","selected","index","selectedIndex_0","encodeURIComponent","node","event","key","preventDefault","borderColor","includes","backgroundColor","t21","standardColor","t22","t23","t24","recentlyUsed","t25","t26","map","color_2","t27","t28","overlay","event_0","default","color_1","t29","t30","t31","t32","t33","t34","t35","t36","t37","t38","e_0","stopPropagation","_temp","event_1","t39","t40","t41","t42","t43"],"sources":["../../src/ColorPicker/index.tsx"],"sourcesContent":["import { cn as cls } from '../lib/utils';\nimport React, { useContext, useEffect, useId, useRef, useState } from 'react';\nimport Dropdown from '../Dropdown';\nimport { FoldDownFill } from '../Icon';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { colors as defaultColors, specialColors } from './constant';\nimport type { ColorPickerProps } from './interface';\nimport InnerColorPicker from './ComplexColorPicker';\nimport './color-picker.css';\n\nexport interface IColorPickerProps {\n  className?: string;\n  value?: string;\n  defaultColor?: string;\n  localStorageKey?: string;\n  onChange?: (color: string) => void;\n  icon?: React.ReactNode;\n  bordered?: boolean;\n  disabled?: boolean;\n  mode?: 'simple' | 'complex';\n  complexModeProps?: ColorPickerProps;\n}\n\nfunction getLocalRecentColors(localStorageKey: string) {\n  if (!window.localStorage) {\n    return [];\n  }\n  const colorStr = localStorage.getItem(localStorageKey);\n  if (!colorStr) {\n    return [];\n  }\n\n  return colorStr.split(',');\n}\n\nfunction setLocalRecentColors(localStorageKey: string, colors: string[]) {\n  if (!window.localStorage) {\n    return;\n  }\n  localStorage.setItem(localStorageKey, colors.join(','));\n}\n\nconst MAX_RECENT_COLORS = 10;\nexport default function ColorPicker({\n  className,\n  value,\n  icon,\n  onChange,\n  defaultColor = defaultColors[0],\n  localStorageKey = 'ald_recent_colors',\n  disabled = false,\n  mode = 'simple',\n  complexModeProps,\n  bordered = true,\n}: IColorPickerProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const [open, setOpen] = useState(false);\n  const [recentColors, setRecentColors] = useState<string[]>([]);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const swatchRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const triggerId = `ald-color-picker-trigger-${useId().replace(/:/g, '')}`;\n  const popupId = `ald-color-picker-popup-${useId().replace(/:/g, '')}`;\n  const swatchOrder = Array.from(\n    new Set([defaultColor, ...defaultColors, ...recentColors]),\n  );\n\n  useEffect(() => {\n    setRecentColors(getLocalRecentColors(localStorageKey));\n  }, [localStorageKey]);\n\n  const onColorSelect = (color: string) => {\n    const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];\n    if (newRecentColors.length > MAX_RECENT_COLORS) {\n      newRecentColors.pop();\n    }\n\n    setRecentColors(newRecentColors);\n    setLocalRecentColors(localStorageKey, newRecentColors);\n    onChange?.(color);\n    setOpen(false);\n    window.setTimeout(() => triggerRef.current?.focus(), 0);\n  };\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (\n        !wrapRef.current?.contains(e.target as Node) &&\n        !overlayRef.current?.contains(e.target as Node)\n      ) {\n        return setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const selectedIndex = Math.max(\n      0,\n      swatchOrder.indexOf(value ?? defaultColor),\n    );\n    window.setTimeout(() => {\n      swatchRefs.current[swatchOrder[selectedIndex]]?.focus();\n    }, 0);\n  }, [defaultColor, open, swatchOrder, value]);\n\n  useEffect(() => {\n    triggerRef.current?.setAttribute('aria-expanded', String(open));\n    triggerRef.current?.setAttribute('aria-controls', popupId);\n  }, [open, popupId]);\n\n  const renderSwatch = (color: string, label: string) => {\n    const selected = color === value;\n    const index = swatchOrder.indexOf(color);\n    const selectedIndex = Math.max(\n      0,\n      swatchOrder.indexOf(value ?? defaultColor),\n    );\n    return (\n      <button\n        type=\"button\"\n        key={`${label}-${color}`}\n        id={`${popupId}-swatch-${encodeURIComponent(color)}`}\n        ref={(node) => {\n          swatchRefs.current[color] = node;\n        }}\n        role=\"radio\"\n        aria-label={label}\n        aria-checked={selected}\n        tabIndex={index === selectedIndex ? 0 : -1}\n        disabled={disabled}\n        className={cls(\n          'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)] tw-bg-transparent tw-p-0',\n          {\n            'tw-border-[var(--border-neutral-strong)]': selected,\n          },\n        )}\n        onClick={() => {\n          if (!selected) onColorSelect(color);\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Escape') {\n            event.preventDefault();\n            setOpen(false);\n            triggerRef.current?.focus();\n            return;\n          }\n          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[(index + 1) % swatchOrder.length]\n            ]?.focus();\n            return;\n          }\n          if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[(index - 1 + swatchOrder.length) % swatchOrder.length]\n            ]?.focus();\n            return;\n          }\n          if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            swatchRefs.current[\n              swatchOrder[event.key === 'Home' ? 0 : swatchOrder.length - 1]\n            ]?.focus();\n          }\n        }}\n        style={{\n          borderColor: selected\n            ? 'var(--border-neutral-strong)'\n            : specialColors.includes(color)\n            ? 'var(--border-neutral-subtle)'\n            : color,\n        }}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cls('tw-block tw-h-full tw-w-full', {\n            'tw-m-px tw-h-[17px] tw-w-[17px]': selected,\n          })}\n          style={{ backgroundColor: color }}\n        />\n      </button>\n    );\n  };\n\n  const overlay = (\n    <div\n      id={popupId}\n      role=\"radiogroup\"\n      aria-label={t.ColorPicker.standardColor}\n      className=\"tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-floating)] tw-p-[8px_7px]\"\n      ref={overlayRef}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          setOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}\n    >\n      <div className=\"tw-flex tw-items-center tw-text-xs\">\n        <div className=\"tw-mr-2\">\n          {renderSwatch(defaultColor, t.ColorPicker.default)}\n        </div>\n        {t.ColorPicker.default}\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.standardColor}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]\">\n          {defaultColors.map((color) => renderSwatch(color, color))}\n        </div>\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.recentlyUsed}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]\">\n          {recentColors.map((color) => renderSwatch(color, color))}\n        </div>\n      </div>\n    </div>\n  );\n  if (mode === 'simple') {\n    return (\n      <div\n        className={cls(className, 'tw-relative tw-w-14', {\n          'tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default':\n            disabled,\n        })}\n        ref={wrapRef}\n      >\n        <Dropdown\n          trigger={'click'}\n          open={open}\n          onOpenChange={setOpen}\n          disabled={disabled}\n          placement={'bottom-start'}\n          overlayClassName={'ald-color-picker-overlay-wrapper'}\n          dropdownRender={() => {\n            return overlay;\n          }}\n        >\n          <button\n            type=\"button\"\n            id={triggerId}\n            ref={triggerRef}\n            aria-label={t.ColorPicker.default}\n            aria-controls={popupId}\n            aria-expanded={open}\n            className={cls(\n              'ald-color-picker-wrapper',\n              'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out',\n              {\n                'tw-border-[var(--border-brand-subtle)]':\n                  open && bordered !== false,\n                'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]':\n                  disabled,\n                'tw-border-[var(--action-ghost-normal)]': bordered === false,\n                'hover:tw-border-[var(--border-brand-subtle)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-[var(--action-ghost-normal)]':\n                  bordered === false,\n              },\n            )}\n            onClick={(e) => {\n              if (disabled) {\n                e.stopPropagation();\n                return;\n              }\n              setOpen((current) => !current);\n            }}\n            onKeyDown={(event) => {\n              if (disabled) return;\n              if (\n                event.key === 'ArrowDown' ||\n                event.key === 'ArrowUp' ||\n                event.key === 'Enter' ||\n                event.key === ' '\n              ) {\n                event.preventDefault();\n                setOpen(true);\n              }\n            }}\n          >\n            {icon ? (\n              <div className=\"tw-relative -tw-top-px\">\n                <div className=\"tw-mb-px\">{icon}</div>\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            ) : (\n              <div className=\"tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]\">\n                A\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--content-secondary)'} />\n          </button>\n        </Dropdown>\n      </div>\n    );\n  }\n  if (mode === 'complex') {\n    return <InnerColorPicker {...complexModeProps} />;\n  }\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/ColorPicker/interface.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 import { ColorGenInput, ColorPickerProps as RcColorPickerProps } from '@rc-component/color-picker';
-import { PopoverProps } from '../Popover';
+import { PopoverProps } from '../Popover.js';
 import { AggregationColor } from './color.js';
-import { ITooltipProps } from '../Tooltip';
-import { SizeType } from '../ConfigProvider/sizeContext';
+import { ITooltipProps } from '../Tooltip.js';
+import { SizeType } from '../ConfigProvider/sizeContext.js';
 export type { ColorGenInput };
 export type Colors<T> = {
     color: ColorGenInput<T>;