@tiny-design/react 1.0.4

package/es/collapse-transition/collapse-transition.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/collapse-transition/collapse-transition.tsx
+const COLLAPSE_DURATION = 250;
+const CollapseTransition = (props) => {
+	const { isShow, children } = props;
+	const leaveTimerRef = useRef(null);
+	const enterTimerRef = useRef(null);
+	const ref = useRef(null);
+	const beforeEnter = useCallback(() => {
+		const el = ref.current;
+		if (el) {
+			el.style.display = "block";
+			el.style.height = "0px";
+		}
+	}, []);
+	const afterEnter = useCallback(() => {
+		const el = ref.current;
+		if (el) {
+			el.style.display = "block";
+			el.style.height = "";
+		}
+	}, []);
+	const enter = useCallback(() => {
+		const el = ref.current;
+		if (el) {
+			if (el.scrollHeight !== 0) el.style.height = el.scrollHeight + "px";
+			else el.style.height = "";
+			enterTimerRef.current = window.setTimeout(() => afterEnter(), COLLAPSE_DURATION);
+		}
+	}, [afterEnter]);
+	const beforeLeave = useCallback(() => {
+		const el = ref.current;
+		if (el) {
+			el.style.display = "block";
+			if (el.scrollHeight !== 0) el.style.height = el.scrollHeight + "px";
+		}
+	}, []);
+	const afterLeave = useCallback(() => {
+		const el = ref.current;
+		if (el) {
+			el.style.display = "none";
+			el.style.height = "";
+		}
+	}, []);
+	const leave = useCallback(() => {
+		const el = ref.current;
+		if (el) {
+			if (el.scrollHeight !== 0) el.style.height = "0px";
+			leaveTimerRef.current = window.setTimeout(() => afterLeave(), COLLAPSE_DURATION);
+		}
+	}, [afterLeave]);
+	const triggerChange = useCallback((isCollapsed) => {
+		const enterTimer = enterTimerRef.current;
+		const leaveTimer = leaveTimerRef.current;
+		enterTimer && window.clearTimeout(enterTimer);
+		leaveTimer && window.clearTimeout(leaveTimer);
+		if (isCollapsed) {
+			beforeEnter();
+			enter();
+		} else {
+			beforeLeave();
+			leave();
+		}
+	}, [
+		enter,
+		leave,
+		beforeEnter,
+		beforeLeave
+	]);
+	useEffect(() => {
+		beforeEnter();
+		enter();
+		return () => {
+			beforeLeave();
+			leave();
+		};
+	}, [
+		enter,
+		leave,
+		beforeEnter,
+		beforeLeave
+	]);
+	useEffect(() => {
+		triggerChange(isShow);
+	}, [isShow, triggerChange]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "ty-collapse-transition",
+		ref,
+		children
+	});
+};
+CollapseTransition.displayName = "CollapseTransition";
+//#endregion
+export { CollapseTransition as default };
+
+//# sourceMappingURL=collapse-transition.js.map

package/es/collapse-transition/collapse-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-transition.js","names":[],"sources":["../../src/collapse-transition/collapse-transition.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback } from 'react';\n\ntype CollapseTransitionProps = {\n  isShow: boolean;\n  children: React.ReactNode;\n};\n\nconst COLLAPSE_DURATION = 250;\n\nconst CollapseTransition = (props: CollapseTransitionProps): JSX.Element => {\n  const { isShow, children } = props;\n  const leaveTimerRef = useRef<number | null>(null);\n  const enterTimerRef = useRef<number | null>(null);\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  const beforeEnter = useCallback((): void => {\n    const el = ref.current;\n    if (el) {\n      el.style.display = 'block';\n      el.style.height = '0px';\n    }\n  }, []);\n\n  const afterEnter = useCallback((): void => {\n    const el = ref.current;\n    if (el) {\n      el.style.display = 'block';\n      el.style.height = '';\n    }\n  }, []);\n\n  const enter = useCallback((): void => {\n    const el = ref.current;\n    if (el) {\n      if (el.scrollHeight !== 0) {\n        el.style.height = el.scrollHeight + 'px';\n      } else {\n        el.style.height = '';\n      }\n\n      enterTimerRef.current = window.setTimeout(() => afterEnter(), COLLAPSE_DURATION);\n    }\n  }, [afterEnter]);\n\n  const beforeLeave = useCallback((): void => {\n    const el = ref.current;\n    if (el) {\n      el.style.display = 'block';\n      if (el.scrollHeight !== 0) {\n        el.style.height = el.scrollHeight + 'px';\n      }\n    }\n  }, []);\n\n  const afterLeave = useCallback((): void => {\n    const el = ref.current;\n    if (el) {\n      el.style.display = 'none';\n      el.style.height = '';\n    }\n  }, []);\n\n  const leave = useCallback((): void => {\n    const el = ref.current;\n    if (el) {\n      if (el.scrollHeight !== 0) {\n        el.style.height = '0px';\n      }\n\n      leaveTimerRef.current = window.setTimeout(() => afterLeave(), COLLAPSE_DURATION);\n    }\n  }, [afterLeave]);\n\n  const triggerChange = useCallback(\n    (isCollapsed: boolean): void => {\n      const enterTimer = enterTimerRef.current;\n      const leaveTimer = leaveTimerRef.current;\n      enterTimer && window.clearTimeout(enterTimer);\n      leaveTimer && window.clearTimeout(leaveTimer);\n\n      if (isCollapsed) {\n        beforeEnter();\n        enter();\n      } else {\n        beforeLeave();\n        leave();\n      }\n    },\n    [enter, leave, beforeEnter, beforeLeave]\n  );\n\n  useEffect(() => {\n    beforeEnter();\n    enter();\n\n    return () => {\n      beforeLeave();\n      leave();\n    };\n  }, [enter, leave, beforeEnter, beforeLeave]);\n\n  useEffect(() => {\n    triggerChange(isShow);\n  }, [isShow, triggerChange]);\n\n  return (\n    <div className=\"ty-collapse-transition\" ref={ref}>\n      {children}\n    </div>\n  );\n};\n\nCollapseTransition.displayName = 'CollapseTransition';\n\nexport default CollapseTransition;\n"],"mappings":";;;AAOA,MAAM,oBAAoB;AAE1B,MAAM,sBAAsB,UAAgD;CAC1E,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,gBAAgB,OAAsB,KAAK;CACjD,MAAM,gBAAgB,OAAsB,KAAK;CACjD,MAAM,MAAM,OAA8B,KAAK;CAE/C,MAAM,cAAc,kBAAwB;EAC1C,MAAM,KAAK,IAAI;AACf,MAAI,IAAI;AACN,MAAG,MAAM,UAAU;AACnB,MAAG,MAAM,SAAS;;IAEnB,EAAE,CAAC;CAEN,MAAM,aAAa,kBAAwB;EACzC,MAAM,KAAK,IAAI;AACf,MAAI,IAAI;AACN,MAAG,MAAM,UAAU;AACnB,MAAG,MAAM,SAAS;;IAEnB,EAAE,CAAC;CAEN,MAAM,QAAQ,kBAAwB;EACpC,MAAM,KAAK,IAAI;AACf,MAAI,IAAI;AACN,OAAI,GAAG,iBAAiB,EACtB,IAAG,MAAM,SAAS,GAAG,eAAe;OAEpC,IAAG,MAAM,SAAS;AAGpB,iBAAc,UAAU,OAAO,iBAAiB,YAAY,EAAE,kBAAkB;;IAEjF,CAAC,WAAW,CAAC;CAEhB,MAAM,cAAc,kBAAwB;EAC1C,MAAM,KAAK,IAAI;AACf,MAAI,IAAI;AACN,MAAG,MAAM,UAAU;AACnB,OAAI,GAAG,iBAAiB,EACtB,IAAG,MAAM,SAAS,GAAG,eAAe;;IAGvC,EAAE,CAAC;CAEN,MAAM,aAAa,kBAAwB;EACzC,MAAM,KAAK,IAAI;AACf,MAAI,IAAI;AACN,MAAG,MAAM,UAAU;AACnB,MAAG,MAAM,SAAS;;IAEnB,EAAE,CAAC;CAEN,MAAM,QAAQ,kBAAwB;EACpC,MAAM,KAAK,IAAI;AACf,MAAI,IAAI;AACN,OAAI,GAAG,iBAAiB,EACtB,IAAG,MAAM,SAAS;AAGpB,iBAAc,UAAU,OAAO,iBAAiB,YAAY,EAAE,kBAAkB;;IAEjF,CAAC,WAAW,CAAC;CAEhB,MAAM,gBAAgB,aACnB,gBAA+B;EAC9B,MAAM,aAAa,cAAc;EACjC,MAAM,aAAa,cAAc;AACjC,gBAAc,OAAO,aAAa,WAAW;AAC7C,gBAAc,OAAO,aAAa,WAAW;AAE7C,MAAI,aAAa;AACf,gBAAa;AACb,UAAO;SACF;AACL,gBAAa;AACb,UAAO;;IAGX;EAAC;EAAO;EAAO;EAAa;EAAY,CACzC;AAED,iBAAgB;AACd,eAAa;AACb,SAAO;AAEP,eAAa;AACX,gBAAa;AACb,UAAO;;IAER;EAAC;EAAO;EAAO;EAAa;EAAY,CAAC;AAE5C,iBAAgB;AACd,gBAAc,OAAO;IACpB,CAAC,QAAQ,cAAc,CAAC;AAE3B,QACE,oBAAC,OAAD;EAAK,WAAU;EAA8B;EAC1C;EACG,CAAA;;AAIV,mBAAmB,cAAc"}

package/es/collapse-transition/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import CollapseTransition from "./collapse-transition.js";
+//#region src/collapse-transition/index.tsx
+var collapse_transition_default = CollapseTransition;
+//#endregion
+export { collapse_transition_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/collapse-transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/collapse-transition/index.tsx"],"sourcesContent":["import CollapseTransition from './collapse-transition';\n\nexport default CollapseTransition;\n"],"mappings":";;AAEA,IAAA,8BAAe"}

package/es/collapse-transition/style/_index.scss

@@ -0,0 +1,4 @@
+.ty-collapse-transition {
+  overflow: hidden;
+  transition: 250ms height, 250ms padding-top, 250ms padding-bottom;
+}

package/es/collapse-transition/style/index.css

@@ -0,0 +1,4 @@
+.ty-collapse-transition {
+  overflow: hidden;
+  transition: 250ms height, 250ms padding-top, 250ms padding-bottom;
+}

package/es/collapse-transition/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/collapse-transition/style/index.js

@@ -0,0 +1 @@
+import "../style/index.css";

package/es/color-picker/color-picker.d.ts

@@ -0,0 +1,8 @@
+import { ColorPickerProps } from "./types.js";
+import React from "react";
+
+//#region src/color-picker/color-picker.d.ts
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ColorPicker };
+//# sourceMappingURL=color-picker.d.ts.map

package/es/color-picker/color-picker.js

@@ -0,0 +1,250 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import { useClickOutside } from "../_utils/hooks.js";
+import popup_default from "../popup/index.js";
+import { formatColor, hsbToHex, parseColor } from "./utils.js";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/color-picker/color-picker.tsx
+const ColorPicker = React.forwardRef((props, _ref) => {
+	const { defaultValue = "#6e41bf", presets, showAlpha = false, disabled = false, trigger = "click", defaultFormat = "hex", prefixCls: customisedCls, className, style, onChange, onFormatChange, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("color-picker", useContext(ConfigContext).prefixCls, customisedCls);
+	const [color, setColor] = useState(() => parseColor("value" in props ? props.value : defaultValue));
+	const [format, setFormat] = useState("format" in props ? props.format : defaultFormat);
+	const [open, setOpen] = useState(false);
+	const [dragging, setDragging] = useState(false);
+	const spectrumRef = useRef(null);
+	const hueRef = useRef(null);
+	const alphaRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const isOpen = ("open" in props ? props.open : void 0) ?? open;
+	const controlledOpen = "open" in props ? props.open : void 0;
+	useEffect(() => {
+		if ("value" in props && props.value) setColor(parseColor(props.value));
+	}, [props.value]);
+	useEffect(() => {
+		if ("format" in props) setFormat(props.format);
+	}, [props.format]);
+	useEffect(() => {
+		if ("open" in props) setOpen(props.open);
+	}, [props.open]);
+	useClickOutside(wrapperRef, () => {
+		if (controlledOpen === void 0) setOpen(false);
+		props.onOpenChange?.(false);
+	});
+	const emitChange = useCallback((c) => {
+		const formatted = formatColor(c, format);
+		onChange?.(formatted);
+	}, [format, onChange]);
+	const updateColor = (updates) => {
+		const newColor = {
+			...color,
+			...updates
+		};
+		if (!("value" in props)) setColor(newColor);
+		emitChange(newColor);
+	};
+	const handleSpectrumMouseDown = (e) => {
+		if (disabled) return;
+		setDragging(true);
+		updateSpectrumFromEvent(e.nativeEvent);
+	};
+	const updateSpectrumFromEvent = (e) => {
+		const rect = spectrumRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+		const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+		updateColor({
+			s: Math.round(x / rect.width * 100),
+			b: Math.round(100 - y / rect.height * 100)
+		});
+	};
+	const handleHueMouseDown = (e) => {
+		if (disabled) return;
+		updateHueFromEvent(e.nativeEvent);
+		const handleMove = (ev) => updateHueFromEvent(ev);
+		const handleUp = () => {
+			document.removeEventListener("mousemove", handleMove);
+			document.removeEventListener("mouseup", handleUp);
+		};
+		document.addEventListener("mousemove", handleMove);
+		document.addEventListener("mouseup", handleUp);
+	};
+	const updateHueFromEvent = (e) => {
+		const rect = hueRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+		updateColor({ h: Math.round(x / rect.width * 360) });
+	};
+	const handleAlphaMouseDown = (e) => {
+		if (disabled) return;
+		updateAlphaFromEvent(e.nativeEvent);
+		const handleMove = (ev) => updateAlphaFromEvent(ev);
+		const handleUp = () => {
+			document.removeEventListener("mousemove", handleMove);
+			document.removeEventListener("mouseup", handleUp);
+		};
+		document.addEventListener("mousemove", handleMove);
+		document.addEventListener("mouseup", handleUp);
+	};
+	const updateAlphaFromEvent = (e) => {
+		const rect = alphaRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+		updateColor({ a: Math.round(x / rect.width * 100) / 100 });
+	};
+	useEffect(() => {
+		if (!dragging) return;
+		const handleMove = (e) => updateSpectrumFromEvent(e);
+		const handleUp = () => setDragging(false);
+		document.addEventListener("mousemove", handleMove);
+		document.addEventListener("mouseup", handleUp);
+		return () => {
+			document.removeEventListener("mousemove", handleMove);
+			document.removeEventListener("mouseup", handleUp);
+		};
+	}, [
+		dragging,
+		color.h,
+		color.a
+	]);
+	const toggleOpen = () => {
+		if (disabled) return;
+		const next = !isOpen;
+		if (controlledOpen === void 0) setOpen(next);
+		props.onOpenChange?.(next);
+	};
+	const handleFormatChange = () => {
+		const formats = [
+			"hex",
+			"rgb",
+			"hsb"
+		];
+		const next = formats[(formats.indexOf(format) + 1) % formats.length];
+		if (!("format" in props)) setFormat(next);
+		onFormatChange?.(next);
+	};
+	const handlePresetClick = (preset) => {
+		const c = parseColor(preset);
+		if (!("value" in props)) setColor(c);
+		emitChange(c);
+	};
+	const cls = classNames(prefixCls, className, { [`${prefixCls}_disabled`]: disabled });
+	const hexColor = hsbToHex(color);
+	const hueColor = hsbToHex({
+		h: color.h,
+		s: 100,
+		b: 100,
+		a: 1
+	});
+	const renderPanel = () => /* @__PURE__ */ jsxs("div", {
+		className: `${prefixCls}__panel`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: spectrumRef,
+				className: `${prefixCls}__spectrum`,
+				style: { backgroundColor: hueColor },
+				onMouseDown: handleSpectrumMouseDown,
+				children: [
+					/* @__PURE__ */ jsx("div", { className: `${prefixCls}__spectrum-white` }),
+					/* @__PURE__ */ jsx("div", { className: `${prefixCls}__spectrum-black` }),
+					/* @__PURE__ */ jsx("div", {
+						className: `${prefixCls}__spectrum-handle`,
+						style: {
+							left: `${color.s}%`,
+							top: `${100 - color.b}%`,
+							backgroundColor: hexColor
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `${prefixCls}__controls`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__preview`,
+					style: { backgroundColor: hexColor }
+				}), /* @__PURE__ */ jsxs("div", {
+					className: `${prefixCls}__sliders`,
+					children: [/* @__PURE__ */ jsx("div", {
+						ref: hueRef,
+						className: `${prefixCls}__hue`,
+						onMouseDown: handleHueMouseDown,
+						children: /* @__PURE__ */ jsx("div", {
+							className: `${prefixCls}__slider-handle`,
+							style: { left: `${color.h / 360 * 100}%` }
+						})
+					}), showAlpha && /* @__PURE__ */ jsx("div", {
+						ref: alphaRef,
+						className: `${prefixCls}__alpha`,
+						onMouseDown: handleAlphaMouseDown,
+						style: { background: `linear-gradient(to right, transparent, ${hsbToHex({
+							...color,
+							a: 1
+						})})` },
+						children: /* @__PURE__ */ jsx("div", {
+							className: `${prefixCls}__slider-handle`,
+							style: { left: `${color.a * 100}%` }
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `${prefixCls}__input-row`,
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${prefixCls}__format-btn`,
+					onClick: handleFormatChange,
+					children: format.toUpperCase()
+				}), /* @__PURE__ */ jsx("input", {
+					className: `${prefixCls}__hex-input`,
+					value: formatColor(color, format),
+					onChange: (e) => {
+						const c = parseColor(e.target.value);
+						if (!("value" in props)) setColor(c);
+						onChange?.(e.target.value);
+					}
+				})]
+			}),
+			presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__presets`,
+				children: presets.map((preset, i) => /* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__preset`,
+					style: { backgroundColor: preset },
+					onClick: () => handlePresetClick(preset),
+					title: preset
+				}, i))
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref: wrapperRef,
+		className: cls,
+		style,
+		children: /* @__PURE__ */ jsx(popup_default, {
+			trigger: "manual",
+			placement: "bottom",
+			arrow: false,
+			visible: isOpen,
+			content: renderPanel(),
+			children: /* @__PURE__ */ jsx("div", {
+				className: `${prefixCls}__trigger`,
+				onClick: trigger === "click" ? toggleOpen : void 0,
+				onMouseEnter: trigger === "hover" ? toggleOpen : void 0,
+				children: children || /* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__swatch`,
+					children: /* @__PURE__ */ jsx("div", {
+						className: `${prefixCls}__swatch-inner`,
+						style: { backgroundColor: hexColor }
+					})
+				})
+			})
+		})
+	});
+});
+ColorPicker.displayName = "ColorPicker";
+//#endregion
+export { ColorPicker as default };
+
+//# sourceMappingURL=color-picker.js.map

package/es/color-picker/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","names":["Popup"],"sources":["../../src/color-picker/color-picker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useContext, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useClickOutside } from '../_utils/hooks';\nimport Popup from '../popup';\nimport { ColorPickerProps, Color, ColorFormat } from './types';\nimport { parseColor, formatColor, hsbToHex } from './utils';\n\nconst ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>((props, _ref) => {\n  const {\n    defaultValue = '#6e41bf',\n    presets,\n    showAlpha = false,\n    disabled = false,\n    trigger = 'click',\n    defaultFormat = 'hex',\n    prefixCls: customisedCls,\n    className,\n    style,\n    onChange,\n    onFormatChange,\n    children,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('color-picker', configContext.prefixCls, customisedCls);\n\n  const [color, setColor] = useState<Color>(() =>\n    parseColor('value' in props ? (props.value as string) : defaultValue)\n  );\n  const [format, setFormat] = useState<ColorFormat>(\n    'format' in props ? (props.format as ColorFormat) : defaultFormat\n  );\n  const [open, setOpen] = useState(false);\n  const [dragging, setDragging] = useState(false);\n\n  const spectrumRef = useRef<HTMLDivElement>(null);\n  const hueRef = useRef<HTMLDivElement>(null);\n  const alphaRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const isOpen = ('open' in props ? (props.open as boolean) : undefined) ?? open;\n  const controlledOpen = 'open' in props ? (props.open as boolean) : undefined;\n\n  useEffect(() => {\n    if ('value' in props && props.value) {\n      setColor(parseColor(props.value));\n    }\n  }, [props.value]);\n\n  useEffect(() => {\n    if ('format' in props) setFormat(props.format as ColorFormat);\n  }, [props.format]);\n\n  useEffect(() => {\n    if ('open' in props) setOpen(props.open as boolean);\n  }, [props.open]);\n\n  useClickOutside(wrapperRef, () => {\n    if (controlledOpen === undefined) setOpen(false);\n    props.onOpenChange?.(false);\n  });\n\n  const emitChange = useCallback((c: Color) => {\n    const formatted = formatColor(c, format);\n    onChange?.(formatted);\n  }, [format, onChange]);\n\n  const updateColor = (updates: Partial<Color>) => {\n    const newColor = { ...color, ...updates };\n    if (!('value' in props)) {\n      setColor(newColor);\n    }\n    emitChange(newColor);\n  };\n\n  const handleSpectrumMouseDown = (e: React.MouseEvent) => {\n    if (disabled) return;\n    setDragging(true);\n    updateSpectrumFromEvent(e.nativeEvent);\n  };\n\n  const updateSpectrumFromEvent = (e: MouseEvent | React.MouseEvent['nativeEvent']) => {\n    const rect = spectrumRef.current?.getBoundingClientRect();\n    if (!rect) return;\n    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));\n    const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));\n    const s = Math.round((x / rect.width) * 100);\n    const b = Math.round(100 - (y / rect.height) * 100);\n    updateColor({ s, b });\n  };\n\n  const handleHueMouseDown = (e: React.MouseEvent) => {\n    if (disabled) return;\n    updateHueFromEvent(e.nativeEvent);\n    const handleMove = (ev: MouseEvent) => updateHueFromEvent(ev);\n    const handleUp = () => {\n      document.removeEventListener('mousemove', handleMove);\n      document.removeEventListener('mouseup', handleUp);\n    };\n    document.addEventListener('mousemove', handleMove);\n    document.addEventListener('mouseup', handleUp);\n  };\n\n  const updateHueFromEvent = (e: MouseEvent | React.MouseEvent['nativeEvent']) => {\n    const rect = hueRef.current?.getBoundingClientRect();\n    if (!rect) return;\n    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));\n    const h = Math.round((x / rect.width) * 360);\n    updateColor({ h });\n  };\n\n  const handleAlphaMouseDown = (e: React.MouseEvent) => {\n    if (disabled) return;\n    updateAlphaFromEvent(e.nativeEvent);\n    const handleMove = (ev: MouseEvent) => updateAlphaFromEvent(ev);\n    const handleUp = () => {\n      document.removeEventListener('mousemove', handleMove);\n      document.removeEventListener('mouseup', handleUp);\n    };\n    document.addEventListener('mousemove', handleMove);\n    document.addEventListener('mouseup', handleUp);\n  };\n\n  const updateAlphaFromEvent = (e: MouseEvent | React.MouseEvent['nativeEvent']) => {\n    const rect = alphaRef.current?.getBoundingClientRect();\n    if (!rect) return;\n    const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));\n    const a = Math.round((x / rect.width) * 100) / 100;\n    updateColor({ a });\n  };\n\n  useEffect(() => {\n    if (!dragging) return;\n    const handleMove = (e: MouseEvent) => updateSpectrumFromEvent(e);\n    const handleUp = () => setDragging(false);\n    document.addEventListener('mousemove', handleMove);\n    document.addEventListener('mouseup', handleUp);\n    return () => {\n      document.removeEventListener('mousemove', handleMove);\n      document.removeEventListener('mouseup', handleUp);\n    };\n  }, [dragging, color.h, color.a]);\n\n  const toggleOpen = () => {\n    if (disabled) return;\n    const next = !isOpen;\n    if (controlledOpen === undefined) setOpen(next);\n    props.onOpenChange?.(next);\n  };\n\n  const handleFormatChange = () => {\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsb'];\n    const idx = formats.indexOf(format);\n    const next = formats[(idx + 1) % formats.length];\n    if (!('format' in props)) setFormat(next);\n    onFormatChange?.(next);\n  };\n\n  const handlePresetClick = (preset: string) => {\n    const c = parseColor(preset);\n    if (!('value' in props)) setColor(c);\n    emitChange(c);\n  };\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_disabled`]: disabled,\n  });\n\n  const hexColor = hsbToHex(color);\n  const hueColor = hsbToHex({ h: color.h, s: 100, b: 100, a: 1 });\n\n  const renderPanel = () => (\n    <div className={`${prefixCls}__panel`}>\n      <div\n        ref={spectrumRef}\n        className={`${prefixCls}__spectrum`}\n        style={{ backgroundColor: hueColor }}\n        onMouseDown={handleSpectrumMouseDown}\n      >\n        <div className={`${prefixCls}__spectrum-white`} />\n        <div className={`${prefixCls}__spectrum-black`} />\n        <div\n          className={`${prefixCls}__spectrum-handle`}\n          style={{\n            left: `${color.s}%`,\n            top: `${100 - color.b}%`,\n            backgroundColor: hexColor,\n          }}\n        />\n      </div>\n\n      <div className={`${prefixCls}__controls`}>\n        <div className={`${prefixCls}__preview`} style={{ backgroundColor: hexColor }} />\n        <div className={`${prefixCls}__sliders`}>\n          <div\n            ref={hueRef}\n            className={`${prefixCls}__hue`}\n            onMouseDown={handleHueMouseDown}\n          >\n            <div\n              className={`${prefixCls}__slider-handle`}\n              style={{ left: `${(color.h / 360) * 100}%` }}\n            />\n          </div>\n          {showAlpha && (\n            <div\n              ref={alphaRef}\n              className={`${prefixCls}__alpha`}\n              onMouseDown={handleAlphaMouseDown}\n              style={{\n                background: `linear-gradient(to right, transparent, ${hsbToHex({ ...color, a: 1 })})`,\n              }}\n            >\n              <div\n                className={`${prefixCls}__slider-handle`}\n                style={{ left: `${color.a * 100}%` }}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className={`${prefixCls}__input-row`}>\n        <button\n          type=\"button\"\n          className={`${prefixCls}__format-btn`}\n          onClick={handleFormatChange}\n        >\n          {format.toUpperCase()}\n        </button>\n        <input\n          className={`${prefixCls}__hex-input`}\n          value={formatColor(color, format)}\n          onChange={(e) => {\n            const c = parseColor(e.target.value);\n            if (!('value' in props)) setColor(c);\n            onChange?.(e.target.value);\n          }}\n        />\n      </div>\n\n      {presets && presets.length > 0 && (\n        <div className={`${prefixCls}__presets`}>\n          {presets.map((preset, i) => (\n            <div\n              key={i}\n              className={`${prefixCls}__preset`}\n              style={{ backgroundColor: preset }}\n              onClick={() => handlePresetClick(preset)}\n              title={preset}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <div {...otherProps} ref={wrapperRef} className={cls} style={style}>\n      <Popup\n        trigger=\"manual\"\n        placement=\"bottom\"\n        arrow={false}\n        visible={isOpen}\n        content={renderPanel()}>\n        <div\n          className={`${prefixCls}__trigger`}\n          onClick={trigger === 'click' ? toggleOpen : undefined}\n          onMouseEnter={trigger === 'hover' ? toggleOpen : undefined}\n        >\n          {children || (\n            <div className={`${prefixCls}__swatch`}>\n              <div\n                className={`${prefixCls}__swatch-inner`}\n                style={{ backgroundColor: hexColor }}\n              />\n            </div>\n          )}\n        </div>\n      </Popup>\n    </div>\n  );\n});\n\nColorPicker.displayName = 'ColorPicker';\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;AASA,MAAM,cAAc,MAAM,YAA8C,OAAO,SAAS;CACtF,MAAM,EACJ,eAAe,WACf,SACA,YAAY,OACZ,WAAW,OACX,UAAU,SACV,gBAAgB,OAChB,WAAW,eACX,WACA,OACA,UACA,gBACA,UACA,GAAG,eACD;CAGJ,MAAM,YAAY,aAAa,gBADT,WAAW,cAAc,CACc,WAAW,cAAc;CAEtF,MAAM,CAAC,OAAO,YAAY,eACxB,WAAW,WAAW,QAAS,MAAM,QAAmB,aAAa,CACtE;CACD,MAAM,CAAC,QAAQ,aAAa,SAC1B,YAAY,QAAS,MAAM,SAAyB,cACrD;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,aAAa,OAAuB,KAAK;CAE/C,MAAM,UAAU,UAAU,QAAS,MAAM,OAAmB,KAAA,MAAc;CAC1E,MAAM,iBAAiB,UAAU,QAAS,MAAM,OAAmB,KAAA;AAEnE,iBAAgB;AACd,MAAI,WAAW,SAAS,MAAM,MAC5B,UAAS,WAAW,MAAM,MAAM,CAAC;IAElC,CAAC,MAAM,MAAM,CAAC;AAEjB,iBAAgB;AACd,MAAI,YAAY,MAAO,WAAU,MAAM,OAAsB;IAC5D,CAAC,MAAM,OAAO,CAAC;AAElB,iBAAgB;AACd,MAAI,UAAU,MAAO,SAAQ,MAAM,KAAgB;IAClD,CAAC,MAAM,KAAK,CAAC;AAEhB,iBAAgB,kBAAkB;AAChC,MAAI,mBAAmB,KAAA,EAAW,SAAQ,MAAM;AAChD,QAAM,eAAe,MAAM;GAC3B;CAEF,MAAM,aAAa,aAAa,MAAa;EAC3C,MAAM,YAAY,YAAY,GAAG,OAAO;AACxC,aAAW,UAAU;IACpB,CAAC,QAAQ,SAAS,CAAC;CAEtB,MAAM,eAAe,YAA4B;EAC/C,MAAM,WAAW;GAAE,GAAG;GAAO,GAAG;GAAS;AACzC,MAAI,EAAE,WAAW,OACf,UAAS,SAAS;AAEpB,aAAW,SAAS;;CAGtB,MAAM,2BAA2B,MAAwB;AACvD,MAAI,SAAU;AACd,cAAY,KAAK;AACjB,0BAAwB,EAAE,YAAY;;CAGxC,MAAM,2BAA2B,MAAoD;EACnF,MAAM,OAAO,YAAY,SAAS,uBAAuB;AACzD,MAAI,CAAC,KAAM;EACX,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,EAAE,UAAU,KAAK,MAAM,KAAK,MAAM,CAAC;EAClE,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,EAAE,UAAU,KAAK,KAAK,KAAK,OAAO,CAAC;AAGlE,cAAY;GAAE,GAFJ,KAAK,MAAO,IAAI,KAAK,QAAS,IAAI;GAE3B,GADP,KAAK,MAAM,MAAO,IAAI,KAAK,SAAU,IAAI;GAC/B,CAAC;;CAGvB,MAAM,sBAAsB,MAAwB;AAClD,MAAI,SAAU;AACd,qBAAmB,EAAE,YAAY;EACjC,MAAM,cAAc,OAAmB,mBAAmB,GAAG;EAC7D,MAAM,iBAAiB;AACrB,YAAS,oBAAoB,aAAa,WAAW;AACrD,YAAS,oBAAoB,WAAW,SAAS;;AAEnD,WAAS,iBAAiB,aAAa,WAAW;AAClD,WAAS,iBAAiB,WAAW,SAAS;;CAGhD,MAAM,sBAAsB,MAAoD;EAC9E,MAAM,OAAO,OAAO,SAAS,uBAAuB;AACpD,MAAI,CAAC,KAAM;EACX,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,EAAE,UAAU,KAAK,MAAM,KAAK,MAAM,CAAC;AAElE,cAAY,EAAE,GADJ,KAAK,MAAO,IAAI,KAAK,QAAS,IAAI,EAC3B,CAAC;;CAGpB,MAAM,wBAAwB,MAAwB;AACpD,MAAI,SAAU;AACd,uBAAqB,EAAE,YAAY;EACnC,MAAM,cAAc,OAAmB,qBAAqB,GAAG;EAC/D,MAAM,iBAAiB;AACrB,YAAS,oBAAoB,aAAa,WAAW;AACrD,YAAS,oBAAoB,WAAW,SAAS;;AAEnD,WAAS,iBAAiB,aAAa,WAAW;AAClD,WAAS,iBAAiB,WAAW,SAAS;;CAGhD,MAAM,wBAAwB,MAAoD;EAChF,MAAM,OAAO,SAAS,SAAS,uBAAuB;AACtD,MAAI,CAAC,KAAM;EACX,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,EAAE,UAAU,KAAK,MAAM,KAAK,MAAM,CAAC;AAElE,cAAY,EAAE,GADJ,KAAK,MAAO,IAAI,KAAK,QAAS,IAAI,GAAG,KAC9B,CAAC;;AAGpB,iBAAgB;AACd,MAAI,CAAC,SAAU;EACf,MAAM,cAAc,MAAkB,wBAAwB,EAAE;EAChE,MAAM,iBAAiB,YAAY,MAAM;AACzC,WAAS,iBAAiB,aAAa,WAAW;AAClD,WAAS,iBAAiB,WAAW,SAAS;AAC9C,eAAa;AACX,YAAS,oBAAoB,aAAa,WAAW;AACrD,YAAS,oBAAoB,WAAW,SAAS;;IAElD;EAAC;EAAU,MAAM;EAAG,MAAM;EAAE,CAAC;CAEhC,MAAM,mBAAmB;AACvB,MAAI,SAAU;EACd,MAAM,OAAO,CAAC;AACd,MAAI,mBAAmB,KAAA,EAAW,SAAQ,KAAK;AAC/C,QAAM,eAAe,KAAK;;CAG5B,MAAM,2BAA2B;EAC/B,MAAM,UAAyB;GAAC;GAAO;GAAO;GAAM;EAEpD,MAAM,OAAO,SADD,QAAQ,QAAQ,OAAO,GACP,KAAK,QAAQ;AACzC,MAAI,EAAE,YAAY,OAAQ,WAAU,KAAK;AACzC,mBAAiB,KAAK;;CAGxB,MAAM,qBAAqB,WAAmB;EAC5C,MAAM,IAAI,WAAW,OAAO;AAC5B,MAAI,EAAE,WAAW,OAAQ,UAAS,EAAE;AACpC,aAAW,EAAE;;CAGf,MAAM,MAAM,WAAW,WAAW,WAAW,GAC1C,GAAG,UAAU,aAAa,UAC5B,CAAC;CAEF,MAAM,WAAW,SAAS,MAAM;CAChC,MAAM,WAAW,SAAS;EAAE,GAAG,MAAM;EAAG,GAAG;EAAK,GAAG;EAAK,GAAG;EAAG,CAAC;CAE/D,MAAM,oBACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;YAA7B;GACE,qBAAC,OAAD;IACE,KAAK;IACL,WAAW,GAAG,UAAU;IACxB,OAAO,EAAE,iBAAiB,UAAU;IACpC,aAAa;cAJf;KAME,oBAAC,OAAD,EAAK,WAAW,GAAG,UAAU,mBAAqB,CAAA;KAClD,oBAAC,OAAD,EAAK,WAAW,GAAG,UAAU,mBAAqB,CAAA;KAClD,oBAAC,OAAD;MACE,WAAW,GAAG,UAAU;MACxB,OAAO;OACL,MAAM,GAAG,MAAM,EAAE;OACjB,KAAK,GAAG,MAAM,MAAM,EAAE;OACtB,iBAAiB;OAClB;MACD,CAAA;KACE;;GAEN,qBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAA7B,CACE,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;KAAY,OAAO,EAAE,iBAAiB,UAAU;KAAI,CAAA,EACjF,qBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAA7B,CACE,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,UAAU;MACxB,aAAa;gBAEb,oBAAC,OAAD;OACE,WAAW,GAAG,UAAU;OACxB,OAAO,EAAE,MAAM,GAAI,MAAM,IAAI,MAAO,IAAI,IAAI;OAC5C,CAAA;MACE,CAAA,EACL,aACC,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,UAAU;MACxB,aAAa;MACb,OAAO,EACL,YAAY,0CAA0C,SAAS;OAAE,GAAG;OAAO,GAAG;OAAG,CAAC,CAAC,IACpF;gBAED,oBAAC,OAAD;OACE,WAAW,GAAG,UAAU;OACxB,OAAO,EAAE,MAAM,GAAG,MAAM,IAAI,IAAI,IAAI;OACpC,CAAA;MACE,CAAA,CAEJ;OACF;;GAEN,qBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAA7B,CACE,oBAAC,UAAD;KACE,MAAK;KACL,WAAW,GAAG,UAAU;KACxB,SAAS;eAER,OAAO,aAAa;KACd,CAAA,EACT,oBAAC,SAAD;KACE,WAAW,GAAG,UAAU;KACxB,OAAO,YAAY,OAAO,OAAO;KACjC,WAAW,MAAM;MACf,MAAM,IAAI,WAAW,EAAE,OAAO,MAAM;AACpC,UAAI,EAAE,WAAW,OAAQ,UAAS,EAAE;AACpC,iBAAW,EAAE,OAAO,MAAM;;KAE5B,CAAA,CACE;;GAEL,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAC1B,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAEE,WAAW,GAAG,UAAU;KACxB,OAAO,EAAE,iBAAiB,QAAQ;KAClC,eAAe,kBAAkB,OAAO;KACxC,OAAO;KACP,EALK,EAKL,CACF;IACE,CAAA;GAEJ;;AAGR,QACE,oBAAC,OAAD;EAAK,GAAI;EAAY,KAAK;EAAY,WAAW;EAAY;YAC3D,oBAACA,eAAD;GACE,SAAQ;GACR,WAAU;GACV,OAAO;GACP,SAAS;GACT,SAAS,aAAa;aACtB,oBAAC,OAAD;IACE,WAAW,GAAG,UAAU;IACxB,SAAS,YAAY,UAAU,aAAa,KAAA;IAC5C,cAAc,YAAY,UAAU,aAAa,KAAA;cAEhD,YACC,oBAAC,OAAD;KAAK,WAAW,GAAG,UAAU;eAC3B,oBAAC,OAAD;MACE,WAAW,GAAG,UAAU;MACxB,OAAO,EAAE,iBAAiB,UAAU;MACpC,CAAA;KACE,CAAA;IAEJ,CAAA;GACA,CAAA;EACJ,CAAA;EAER;AAEF,YAAY,cAAc"}

package/es/color-picker/index.d.ts

@@ -0,0 +1 @@
+import { ColorPicker } from "./color-picker.js";

package/es/color-picker/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import ColorPicker from "./color-picker.js";
+//#region src/color-picker/index.tsx
+var color_picker_default = ColorPicker;
+//#endregion
+export { color_picker_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/color-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/color-picker/index.tsx"],"sourcesContent":["import ColorPicker from './color-picker';\n\nexport default ColorPicker;\n"],"mappings":";;AAEA,IAAA,uBAAe"}

package/es/color-picker/style/_index.scss

@@ -0,0 +1,196 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-color-picker {
+  display: inline-block;
+  position: relative;
+
+  &_disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .#{$prefix}-color-picker__trigger,
+    .#{$prefix}-color-picker__swatch {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__trigger {
+    cursor: pointer;
+    display: inline-flex;
+  }
+
+  &__swatch {
+    width: 32px;
+    height: 32px;
+    border-radius: $border-radius;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    padding: 3px;
+    cursor: pointer;
+  }
+
+  &__swatch-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  &__panel {
+    padding: 12px;
+    background: var(--ty-color-picker-bg, #fff);
+    border-radius: 8px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    width: 240px;
+  }
+
+  &__spectrum {
+    position: relative;
+    width: 100%;
+    height: 150px;
+    border-radius: 4px;
+    cursor: crosshair;
+    overflow: hidden;
+  }
+
+  &__spectrum-white {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #fff, transparent);
+  }
+
+  &__spectrum-black {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent, #000);
+  }
+
+  &__spectrum-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  &__preview {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    flex-shrink: 0;
+  }
+
+  &__sliders {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__hue {
+    position: relative;
+    height: 12px;
+    border-radius: 6px;
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    cursor: pointer;
+  }
+
+  &__alpha {
+    position: relative;
+    height: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 6px;
+      background: repeating-conic-gradient(#{$gray-300} 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
+      z-index: -1;
+    }
+  }
+
+  &__slider-handle {
+    position: absolute;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: transparent;
+  }
+
+  &__input-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 12px;
+    align-items: center;
+  }
+
+  &__format-btn {
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    background: transparent;
+    border-radius: $border-radius;
+    padding: 2px 6px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--ty-color-text, #{$gray-700});
+    white-space: nowrap;
+
+    &:hover {
+      border-color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  &__hex-input {
+    flex: 1;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    border-radius: $border-radius;
+    padding: 2px 6px;
+    font-size: 12px;
+    font-family: $font-family-monospace;
+    color: var(--ty-color-text, #{$gray-800});
+    outline: none;
+    min-width: 0;
+
+    &:focus {
+      border-color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  &__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--ty-color-picker-border, #{$gray-200});
+  }
+
+  &__preset {
+    width: 20px;
+    height: 20px;
+    border-radius: $border-radius;
+    cursor: pointer;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    transition: transform 0.15s;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}