@ioca/react 1.4.80 → 1.4.81

package/lib/cjs/components/pagination/pagination.js

@@ -1,86 +1,52 @@
-const require_runtime = require("../../_virtual/_rolldown/runtime.js");
-const require_index = require("../icon/index.js");
-const require_page = require("./page.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
-let react = require("react");
-let _ricons_material = require("@ricons/material");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region packages/components/pagination/pagination.tsx
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@ricons/material');
+var classNames = require('classnames');
+var react = require('react');
+var icon = require('../icon/icon.js');
+var page = require('./page.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+
 const Pagination = (props) => {
-	const { page: defaultPage = 1, size = 10, total = 0, sibling = 2, prev = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowLeftRound, {}) }), next = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowRightRound, {}) }), simple, jumper, className, renderEllipsis = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.MoreHorizRound, {}),
-		className: "color-7"
-	}), renderPage = (i) => i, onChange, ...restProps } = props;
-	const [page, setPage] = (0, react.useState)(defaultPage);
-	const [loading, setLoading] = (0, react.useState)(false);
-	const totalPage = (0, react.useMemo)(() => Math.ceil(total / size), [size, total]);
-	const [start, end, loop] = (0, react.useMemo)(() => {
-		const start = Math.max(1, page - sibling);
-		const end = Math.min(totalPage, page + sibling);
-		return [
-			start,
-			end,
-			Array.from({ length: end - start + 1 }).map((n, i) => start + i)
-		];
-	}, [
-		page,
-		totalPage,
-		sibling
-	]);
-	const handlePageChange = async (p) => {
-		if (!onChange || loading) return;
-		setLoading(true);
-		return new Promise(async (resolve) => {
-			if (p === void 0) return;
-			await onChange(p);
-			setPage(p);
-			setLoading(false);
-			resolve();
-		});
-	};
-	(0, react.useEffect)(() => setPage(defaultPage), [defaultPage]);
-	if (totalPage <= page && page === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, classnames.default)("i-pagination", className),
-		...restProps,
-		children: [
-			prev && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
-				page: page - 1 || 1,
-				disabled: page === 1,
-				onChange: handlePageChange,
-				children: prev
-			}),
-			start > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
-				page: 1,
-				onChange: handlePageChange,
-				children: renderPage(1)
-			}),
-			start > 2 && renderEllipsis(),
-			loop.map((p) => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
-					page: p,
-					active: p === page,
-					onChange: handlePageChange,
-					children: renderPage(p)
-				}, p);
-			}),
-			end < totalPage - 1 && renderEllipsis(),
-			end < totalPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
-				page: totalPage,
-				onChange: handlePageChange,
-				children: renderPage(totalPage)
-			}),
-			next && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_page.default, {
-				page: page + 1,
-				disabled: page === totalPage,
-				onChange: handlePageChange,
-				children: next
-			})
-		]
-	});
+    const { page: defaultPage = 1, size = 10, total = 0, sibling = 2, prev = jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.KeyboardArrowLeftRound, {}) }), next = jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.KeyboardArrowRightRound, {}) }), simple, jumper, className, renderEllipsis = () => (jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.MoreHorizRound, {}), className: 'color-7' })), renderPage = (i) => i, onChange, ...restProps } = props;
+    const [page$1, setPage] = react.useState(defaultPage);
+    const [loading, setLoading] = react.useState(false);
+    const totalPage = react.useMemo(() => Math.ceil(total / size), [size, total]);
+    const [start, end, loop] = react.useMemo(() => {
+        const start = Math.max(1, page$1 - sibling);
+        const end = Math.min(totalPage, page$1 + sibling);
+        return [
+            start,
+            end,
+            Array.from({ length: end - start + 1 }).map((n, i) => start + i),
+        ];
+    }, [page$1, totalPage, sibling]);
+    const handlePageChange = async (p) => {
+        if (!onChange || loading)
+            return;
+        setLoading(true);
+        return new Promise(async (resolve) => {
+            if (p === undefined)
+                return;
+            await onChange(p);
+            setPage(p);
+            setLoading(false);
+            resolve();
+        });
+    };
+    react.useEffect(() => setPage(defaultPage), [defaultPage]);
+    if (totalPage <= page$1 && page$1 === 1)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return (jsxRuntime.jsxs("div", { className: classNames__default("i-pagination", className), ...restProps, children: [prev && (jsxRuntime.jsx(page.default, { page: page$1 - 1 || 1, disabled: page$1 === 1, onChange: handlePageChange, children: prev })), start > 1 && (jsxRuntime.jsx(page.default, { page: 1, onChange: handlePageChange, children: renderPage(1) })), start > 2 && renderEllipsis(), loop.map((p) => {
+                return (jsxRuntime.jsx(page.default, { page: p, active: p === page$1, onChange: handlePageChange, children: renderPage(p) }, p));
+            }), end < totalPage - 1 && renderEllipsis(), end < totalPage && (jsxRuntime.jsx(page.default, { page: totalPage, onChange: handlePageChange, children: renderPage(totalPage) })), next && (jsxRuntime.jsx(page.default, { page: page$1 + 1, disabled: page$1 === totalPage, onChange: handlePageChange, children: next }))] }));
 };
-//#endregion
-exports.default = Pagination;
 
-//# sourceMappingURL=pagination.js.map
+exports.default = Pagination;
+//# sourceMappingURL=pagination.js.map

package/lib/cjs/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../../../packages/components/pagination/pagination.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n\tMoreHorizRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../icon\";\nimport \"./index.css\";\nimport Page from \"./page\";\nimport { IPagination } from \"./type\";\n\nconst Pagination = (props: IPagination) => {\n\tconst {\n\t\tpage: defaultPage = 1,\n\t\tsize = 10,\n\t\ttotal = 0,\n\t\tsibling = 2,\n\t\tprev = <Icon icon={<KeyboardArrowLeftRound />} />,\n\t\tnext = <Icon icon={<KeyboardArrowRightRound />} />,\n\t\tsimple,\n\t\tjumper,\n\t\tclassName,\n\t\trenderEllipsis = () => (\n\t\t\t<Icon icon={<MoreHorizRound />} className='color-7' />\n\t\t),\n\t\trenderPage = (i) => i,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst [page, setPage] = useState(defaultPage);\n\tconst [loading, setLoading] = useState(false);\n\n\tconst totalPage = useMemo(() => Math.ceil(total / size), [size, total]);\n\n\tconst [start, end, loop] = useMemo(() => {\n\t\tconst start = Math.max(1, page - sibling);\n\t\tconst end = Math.min(totalPage, page + sibling);\n\n\t\treturn [\n\t\t\tstart,\n\t\t\tend,\n\t\t\tArray.from({ length: end - start + 1 }).map((n, i) => start + i),\n\t\t];\n\t}, [page, totalPage, sibling]);\n\n\tconst handlePageChange = async (p?: number) => {\n\t\tif (!onChange || loading) return;\n\t\tsetLoading(true);\n\n\t\treturn new Promise<void>(async (resolve) => {\n\t\t\tif (p === undefined) return;\n\t\t\tawait onChange(p);\n\t\t\tsetPage(p);\n\t\t\tsetLoading(false);\n\t\t\tresolve();\n\t\t});\n\t};\n\n\tuseEffect(() => setPage(defaultPage), [defaultPage]);\n\n\tif (totalPage <= page && page === 1) return <></>;\n\n\treturn (\n\t\t<div className={classNames(\"i-pagination\", className)} {...restProps}>\n\t\t\t{prev && (\n\t\t\t\t<Page\n\t\t\t\t\tpage={page - 1 || 1}\n\t\t\t\t\tdisabled={page === 1}\n\t\t\t\t\tonChange={handlePageChange}\n\t\t\t\t>\n\t\t\t\t\t{prev}\n\t\t\t\t</Page>\n\t\t\t)}\n\n\t\t\t{start > 1 && (\n\t\t\t\t<Page page={1} onChange={handlePageChange}>\n\t\t\t\t\t{renderPage(1)}\n\t\t\t\t</Page>\n\t\t\t)}\n\n\t\t\t{start > 2 && renderEllipsis()}\n\n\t\t\t{loop.map((p) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Page\n\t\t\t\t\t\tkey={p}\n\t\t\t\t\t\tpage={p}\n\t\t\t\t\t\tactive={p === page}\n\t\t\t\t\t\tonChange={handlePageChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderPage(p)}\n\t\t\t\t\t</Page>\n\t\t\t\t);\n\t\t\t})}\n\n\t\t\t{end < totalPage - 1 && renderEllipsis()}\n\n\t\t\t{end < totalPage && (\n\t\t\t\t<Page page={totalPage} onChange={handlePageChange}>\n\t\t\t\t\t{renderPage(totalPage)}\n\t\t\t\t</Page>\n\t\t\t)}\n\n\t\t\t{next && (\n\t\t\t\t<Page\n\t\t\t\t\tpage={page + 1}\n\t\t\t\t\tdisabled={page === totalPage}\n\t\t\t\t\tonChange={handlePageChange}\n\t\t\t\t>\n\t\t\t\t\t{next}\n\t\t\t\t</Page>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Pagination;\n"],"mappings":""}
+{"version":3,"file":"pagination.js","sources":["../../../../packages/components/pagination/pagination.tsx"],"sourcesContent":["import {\n\tKeyboardArrowLeftRound,\n\tKeyboardArrowRightRound,\n\tMoreHorizRound,\n} from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport Icon from \"../icon\";\nimport \"./index.css\";\nimport Page from \"./page\";\nimport { IPagination } from \"./type\";\n\nconst Pagination = (props: IPagination) => {\n\tconst {\n\t\tpage: defaultPage = 1,\n\t\tsize = 10,\n\t\ttotal = 0,\n\t\tsibling = 2,\n\t\tprev = <Icon icon={<KeyboardArrowLeftRound />} />,\n\t\tnext = <Icon icon={<KeyboardArrowRightRound />} />,\n\t\tsimple,\n\t\tjumper,\n\t\tclassName,\n\t\trenderEllipsis = () => (\n\t\t\t<Icon icon={<MoreHorizRound />} className='color-7' />\n\t\t),\n\t\trenderPage = (i) => i,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst [page, setPage] = useState(defaultPage);\n\tconst [loading, setLoading] = useState(false);\n\n\tconst totalPage = useMemo(() => Math.ceil(total / size), [size, total]);\n\n\tconst [start, end, loop] = useMemo(() => {\n\t\tconst start = Math.max(1, page - sibling);\n\t\tconst end = Math.min(totalPage, page + sibling);\n\n\t\treturn [\n\t\t\tstart,\n\t\t\tend,\n\t\t\tArray.from({ length: end - start + 1 }).map((n, i) => start + i),\n\t\t];\n\t}, [page, totalPage, sibling]);\n\n\tconst handlePageChange = async (p?: number) => {\n\t\tif (!onChange || loading) return;\n\t\tsetLoading(true);\n\n\t\treturn new Promise<void>(async (resolve) => {\n\t\t\tif (p === undefined) return;\n\t\t\tawait onChange(p);\n\t\t\tsetPage(p);\n\t\t\tsetLoading(false);\n\t\t\tresolve();\n\t\t});\n\t};\n\n\tuseEffect(() => setPage(defaultPage), [defaultPage]);\n\n\tif (totalPage <= page && page === 1) return <></>;\n\n\treturn (\n\t\t<div className={classNames(\"i-pagination\", className)} {...restProps}>\n\t\t\t{prev && (\n\t\t\t\t<Page\n\t\t\t\t\tpage={page - 1 || 1}\n\t\t\t\t\tdisabled={page === 1}\n\t\t\t\t\tonChange={handlePageChange}\n\t\t\t\t>\n\t\t\t\t\t{prev}\n\t\t\t\t</Page>\n\t\t\t)}\n\n\t\t\t{start > 1 && (\n\t\t\t\t<Page page={1} onChange={handlePageChange}>\n\t\t\t\t\t{renderPage(1)}\n\t\t\t\t</Page>\n\t\t\t)}\n\n\t\t\t{start > 2 && renderEllipsis()}\n\n\t\t\t{loop.map((p) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Page\n\t\t\t\t\t\tkey={p}\n\t\t\t\t\t\tpage={p}\n\t\t\t\t\t\tactive={p === page}\n\t\t\t\t\t\tonChange={handlePageChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderPage(p)}\n\t\t\t\t\t</Page>\n\t\t\t\t);\n\t\t\t})}\n\n\t\t\t{end < totalPage - 1 && renderEllipsis()}\n\n\t\t\t{end < totalPage && (\n\t\t\t\t<Page page={totalPage} onChange={handlePageChange}>\n\t\t\t\t\t{renderPage(totalPage)}\n\t\t\t\t</Page>\n\t\t\t)}\n\n\t\t\t{next && (\n\t\t\t\t<Page\n\t\t\t\t\tpage={page + 1}\n\t\t\t\t\tdisabled={page === totalPage}\n\t\t\t\t\tonChange={handlePageChange}\n\t\t\t\t>\n\t\t\t\t\t{next}\n\t\t\t\t</Page>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Pagination;\n"],"names":["_jsx","Icon","KeyboardArrowLeftRound","KeyboardArrowRightRound","MoreHorizRound","page","useState","useMemo","useEffect","_jsxs","classNames","Page"],"mappings":"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"}

package/lib/cjs/components/picker/colors/footer.js

@@ -1,64 +1,39 @@
-require("../../../_virtual/_rolldown/runtime.js");
-const require_index = require("../../button/index.js");
-const require_index$1 = require("../../icon/index.js");
-const require_index$2 = require("../../input/index.js");
-const require_index$3 = require("../../select/index.js");
-let react = require("react");
-let _ricons_material = require("@ricons/material");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region packages/components/picker/colors/footer.tsx
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@ricons/material');
+var react = require('react');
+var button = require('../../button/button.js');
+var icon = require('../../icon/icon.js');
+var input = require('../../input/input.js');
+var select = require('../../select/select.js');
+
 const ColorMethods = {
-	HEX: "toHexString",
-	RGB: "toRgbString",
-	HSB: "toHsbString"
+    HEX: "toHexString",
+    RGB: "toRgbString",
+    HSB: "toHsbString",
 };
 function Footer(props) {
-	const { value, type, onTypeChange, onChange, onOk } = props;
-	const [inputValue, setInputValue] = (0, react.useState)(value);
-	const [colorType, setColorType] = (0, react.useState)(type);
-	const handleChange = (v) => {
-		setInputValue(v);
-		onChange(v);
-	};
-	const handleTypeChange = (t) => {
-		setColorType(t);
-		onTypeChange(t);
-	};
-	(0, react.useEffect)(() => {
-		setInputValue(value);
-		setColorType(type);
-	}, [value, type]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "i-colorpicker-footer",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.default, {
-				readOnly: true,
-				hideClear: true,
-				hideArrow: true,
-				style: { width: "5.6em" },
-				options: [
-					"RGB",
-					"HEX",
-					"HSB"
-				],
-				value: colorType,
-				onChange: handleTypeChange
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
-				placeholder: "color",
-				value: inputValue,
-				onChange: handleChange
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
-				square: true,
-				onClick: onOk,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.CheckRound, {}) })
-			})
-		]
-	});
+    const { value, type, onTypeChange, onChange, onOk } = props;
+    const [inputValue, setInputValue] = react.useState(value);
+    const [colorType, setColorType] = react.useState(type);
+    const handleChange = (v) => {
+        setInputValue(v);
+        onChange(v);
+    };
+    const handleTypeChange = (t) => {
+        setColorType(t);
+        onTypeChange(t);
+    };
+    react.useEffect(() => {
+        setInputValue(value);
+        setColorType(type);
+    }, [value, type]);
+    return (jsxRuntime.jsxs("div", { className: 'i-colorpicker-footer', children: [jsxRuntime.jsx(select.default, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange }), jsxRuntime.jsx(input.default, { placeholder: 'color', value: inputValue, onChange: handleChange }), jsxRuntime.jsx(button.default, { square: true, onClick: onOk, children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CheckRound, {}) }) })] }));
 }
-//#endregion
+
 exports.ColorMethods = ColorMethods;
 exports.default = Footer;
-
-//# sourceMappingURL=footer.js.map
+//# sourceMappingURL=footer.js.map

package/lib/cjs/components/picker/colors/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","names":["Select","Input","Button","Icon","CheckRound"],"sources":["../../../../../packages/components/picker/colors/footer.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\nimport { useEffect, useState } from \"react\";\nimport Button from \"../../button\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Select from \"../../select\";\n\nexport const ColorMethods = {\n\tHEX: \"toHexString\",\n\tRGB: \"toRgbString\",\n\tHSB: \"toHsbString\",\n};\n\nexport default function Footer(props) {\n\tconst { value, type, onTypeChange, onChange, onOk } = props;\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [colorType, setColorType] = useState(type);\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange(v);\n\t};\n\n\tconst handleTypeChange = (t) => {\n\t\tsetColorType(t);\n\t\tonTypeChange(t);\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t\tsetColorType(type);\n\t}, [value, type]);\n\n\treturn (\n\t\t<div className='i-colorpicker-footer'>\n\t\t\t<Select\n\t\t\t\treadOnly\n\t\t\t\thideClear\n\t\t\t\thideArrow\n\t\t\t\tstyle={{ width: \"5.6em\" }}\n\t\t\t\toptions={[\"RGB\", \"HEX\", \"HSB\"]}\n\t\t\t\tvalue={colorType}\n\t\t\t\tonChange={handleTypeChange}\n\t\t\t/>\n\t\t\t<Input\n\t\t\t\tplaceholder='color'\n\t\t\t\tvalue={inputValue}\n\t\t\t\tonChange={handleChange}\n\t\t\t/>\n\t\t\t<Button square onClick={onOk}>\n\t\t\t\t<Icon icon={<CheckRound />} />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAOA,MAAa,eAAe;CAC3B,KAAK;CACL,KAAK;CACL,KAAK;CACL;AAED,SAAwB,OAAO,OAAO;CACrC,MAAM,EAAE,OAAO,MAAM,cAAc,UAAU,SAAS;CACtD,MAAM,CAAC,YAAY,kBAAA,GAAA,MAAA,UAA0B,MAAM;CACnD,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAyB,KAAK;CAEhD,MAAM,gBAAgB,MAAM;AAC3B,gBAAc,EAAE;AAChB,WAAS,EAAE;;CAGZ,MAAM,oBAAoB,MAAM;AAC/B,eAAa,EAAE;AACf,eAAa,EAAE;;AAGhB,EAAA,GAAA,MAAA,iBAAgB;AACf,gBAAc,MAAM;AACpB,eAAa,KAAK;IAChB,CAAC,OAAO,KAAK,CAAC;AAEjB,QACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACC,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;IACC,UAAA;IACA,WAAA;IACA,WAAA;IACA,OAAO,EAAE,OAAO,SAAS;IACzB,SAAS;KAAC;KAAO;KAAO;KAAM;IAC9B,OAAO;IACP,UAAU;IACT,CAAA;GACF,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;IACC,aAAY;IACZ,OAAO;IACP,UAAU;IACT,CAAA;GACF,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;IAAQ,QAAA;IAAO,SAAS;cACvB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD,EAAM,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,YAAD,EAAc,CAAA,EAAI,CAAA;IACtB,CAAA;GACJ"}
+{"version":3,"file":"footer.js","sources":["../../../../../packages/components/picker/colors/footer.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\nimport { useEffect, useState } from \"react\";\nimport Button from \"../../button\";\nimport Icon from \"../../icon\";\nimport Input from \"../../input\";\nimport Select from \"../../select\";\n\nexport const ColorMethods = {\n\tHEX: \"toHexString\",\n\tRGB: \"toRgbString\",\n\tHSB: \"toHsbString\",\n};\n\nexport default function Footer(props) {\n\tconst { value, type, onTypeChange, onChange, onOk } = props;\n\tconst [inputValue, setInputValue] = useState(value);\n\tconst [colorType, setColorType] = useState(type);\n\n\tconst handleChange = (v) => {\n\t\tsetInputValue(v);\n\t\tonChange(v);\n\t};\n\n\tconst handleTypeChange = (t) => {\n\t\tsetColorType(t);\n\t\tonTypeChange(t);\n\t};\n\n\tuseEffect(() => {\n\t\tsetInputValue(value);\n\t\tsetColorType(type);\n\t}, [value, type]);\n\n\treturn (\n\t\t<div className='i-colorpicker-footer'>\n\t\t\t<Select\n\t\t\t\treadOnly\n\t\t\t\thideClear\n\t\t\t\thideArrow\n\t\t\t\tstyle={{ width: \"5.6em\" }}\n\t\t\t\toptions={[\"RGB\", \"HEX\", \"HSB\"]}\n\t\t\t\tvalue={colorType}\n\t\t\t\tonChange={handleTypeChange}\n\t\t\t/>\n\t\t\t<Input\n\t\t\t\tplaceholder='color'\n\t\t\t\tvalue={inputValue}\n\t\t\t\tonChange={handleChange}\n\t\t\t/>\n\t\t\t<Button square onClick={onOk}>\n\t\t\t\t<Icon icon={<CheckRound />} />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"names":["useState","useEffect","_jsxs","_jsx","Select","Input","Button","Icon","CheckRound"],"mappings":";;;;;;;;;;;;AAOO,MAAM,YAAY,GAAG;AAC3B,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;;AAGL,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,aAAa,CAAC,CAAC,CAAC;QAChB,QAAQ,CAAC,CAAC,CAAC;AACZ,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAI;QAC9B,YAAY,CAAC,CAAC,CAAC;QACf,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACd,aAAa,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC;AACnB,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEjB,IAAA,QACCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,aACpCC,cAAA,CAACC,cAAM,EAAA,EACN,QAAQ,QACR,SAAS,EAAA,IAAA,EACT,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC9B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAAA,CACzB,EACFD,cAAA,CAACE,aAAK,EAAA,EACL,WAAW,EAAC,OAAO,EACnB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EAAA,CACrB,EACFF,cAAA,CAACG,cAAM,EAAA,EAAC,MAAM,QAAC,OAAO,EAAE,IAAI,EAAA,QAAA,EAC3BH,eAACI,YAAI,EAAA,EAAC,IAAI,EAAEJ,eAACK,mBAAU,EAAA,EAAA,CAAG,GAAI,EAAA,CACtB,CAAA,EAAA,CACJ;AAER;;;;;"}

package/lib/cjs/components/picker/colors/handle.js

@@ -1,25 +1,18 @@
-const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region packages/components/picker/colors/handle.tsx
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+
 const Handle = (props) => {
-	const { ref, color, handle, placeholder, className, ...restProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		ref,
-		className: (0, classnames.default)("i-colorpicker-handle", className),
-		...restProps,
-		children: [handle !== "text" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-			className: "i-colorpicker-square",
-			style: { background: color }
-		}), handle !== "square" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "i-colorpicker-text",
-			style: { color },
-			children: color ?? placeholder
-		})]
-	});
+    const { ref, color, handle, placeholder, className, ...restProps } = props;
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames__default("i-colorpicker-handle", className), ...restProps, children: [handle !== "text" && (jsxRuntime.jsx("i", { className: 'i-colorpicker-square', style: { background: color } })), handle !== "square" && (jsxRuntime.jsx("span", { className: 'i-colorpicker-text', style: { color }, children: color ?? placeholder }))] }));
 };
-//#endregion
-exports.default = Handle;
 
-//# sourceMappingURL=handle.js.map
+exports.default = Handle;
+//# sourceMappingURL=handle.js.map

package/lib/cjs/components/picker/colors/handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"handle.js","names":[],"sources":["../../../../../packages/components/picker/colors/handle.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Handle = (props) => {\n\tconst { ref, color, handle, placeholder, className, ...restProps } = props;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(\"i-colorpicker-handle\", className)}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{handle !== \"text\" && (\n\t\t\t\t<i\n\t\t\t\t\tclassName='i-colorpicker-square'\n\t\t\t\t\tstyle={{ background: color }}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{handle !== \"square\" && (\n\t\t\t\t<span className='i-colorpicker-text' style={{ color }}>\n\t\t\t\t\t{color ?? placeholder}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Handle;\n"],"mappings":";;;;;AAEA,MAAM,UAAU,UAAU;CACzB,MAAM,EAAE,KAAK,OAAO,QAAQ,aAAa,WAAW,GAAG,cAAc;AAErE,QACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACM;EACL,YAAA,GAAA,WAAA,SAAsB,wBAAwB,UAAU;EACxD,GAAI;YAHL,CAKE,WAAW,UACX,iBAAA,GAAA,kBAAA,KAAC,KAAD;GACC,WAAU;GACV,OAAO,EAAE,YAAY,OAAO;GAC3B,CAAA,EAGF,WAAW,YACX,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAqB,OAAO,EAAE,OAAO;aACnD,SAAS;GACJ,CAAA,CAEH"}
+{"version":3,"file":"handle.js","sources":["../../../../../packages/components/picker/colors/handle.tsx"],"sourcesContent":["import classNames from \"classnames\";\n\nconst Handle = (props) => {\n\tconst { ref, color, handle, placeholder, className, ...restProps } = props;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames(\"i-colorpicker-handle\", className)}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{handle !== \"text\" && (\n\t\t\t\t<i\n\t\t\t\t\tclassName='i-colorpicker-square'\n\t\t\t\t\tstyle={{ background: color }}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{handle !== \"square\" && (\n\t\t\t\t<span className='i-colorpicker-text' style={{ color }}>\n\t\t\t\t\t{color ?? placeholder}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Handle;\n"],"names":["_jsxs","classNames","_jsx"],"mappings":";;;;;;;;;;;AAEA,MAAM,MAAM,GAAG,CAAC,KAAK,KAAI;AACxB,IAAA,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AAE1E,IAAA,QACCA,eAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,mBAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAA,GACpD,SAAS,EAAA,QAAA,EAAA,CAEZ,MAAM,KAAK,MAAM,KACjBC,cAAA,CAAA,GAAA,EAAA,EACC,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,CAC3B,CACF,EAEA,MAAM,KAAK,QAAQ,KACnBA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EACnD,KAAK,IAAI,WAAW,EAAA,CACf,CACP,CAAA,EAAA,CACI;AAER;;;;"}

package/lib/cjs/components/picker/colors/index.js

@@ -1,81 +1,67 @@
-const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
-const require_index = require("../../popup/index.js");
-const require_footer = require("./footer.js");
-const require_handle = require("./handle.js");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _rc_component_color_picker = require("@rc-component/color-picker");
-_rc_component_color_picker = require_runtime.__toESM(_rc_component_color_picker);
-//#region packages/components/picker/colors/index.tsx
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ColorsPanel = require('@rc-component/color-picker');
+var react = require('react');
+var popup = require('../../popup/popup.js');
+var footer = require('./footer.js');
+var handle = require('./handle.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+var ColorsPanel__default = /*#__PURE__*/_interopDefaultCompat(ColorsPanel);
+
 function ColorPicker(props) {
-	const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange } = props;
-	const [colorType, setColorType] = (0, react.useState)(type);
-	const [colorValue, setColorValue] = (0, react.useState)(value);
-	const [syncValue, setSyncValue] = (0, react.useState)(value);
-	const [visible, setVisible] = (0, react.useState)(popupProps?.visible);
-	const handleChange = (target) => {
-		setSyncValue(target);
-	};
-	const handleComplete = (target) => {
-		const method = require_footer.ColorMethods[colorType];
-		if (target.a !== 1) target.a = parseFloat(target.a.toFixed(3));
-		setColorValue(target[method]?.());
-	};
-	const handleVisibleChange = (v) => {
-		setVisible(v);
-		popupProps?.onVisibleChange?.(v);
-	};
-	const handleTypeChange = (t) => {
-		const method = require_footer.ColorMethods[t];
-		setColorType(t);
-		setColorValue(syncValue?.[method]?.());
-	};
-	const handleValueChange = (v) => {
-		setColorValue(v);
-		setSyncValue(v);
-	};
-	const handleOk = () => {
-		onChange?.(colorValue);
-		setVisible(false);
-	};
-	(0, react.useEffect)(() => {
-		setSyncValue(value);
-		setColorValue(value);
-	}, [value]);
-	(0, react.useEffect)(() => {
-		if (popupProps?.visible !== void 0) setVisible(popupProps.visible);
-	}, [popupProps?.visible]);
-	if (usePanel) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rc_component_color_picker.default, { ...props });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
-		trigger: "click",
-		touchable: true,
-		position: "bottom",
-		...popupProps,
-		visible,
-		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_rc_component_color_picker.default, {
-			value: syncValue,
-			disabledAlpha,
-			panelRender: (panel) => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [panel, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_footer.default, {
-					value: colorValue,
-					type: colorType,
-					onTypeChange: handleTypeChange,
-					onChange: handleValueChange,
-					onOk: handleOk
-				})] });
-			},
-			onChange: handleChange,
-			onChangeComplete: handleComplete
-		}),
-		onVisibleChange: handleVisibleChange,
-		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_handle.default, {
-			color: value,
-			handle,
-			placeholder
-		})
-	});
+    const { value, type = "HEX", disabledAlpha, children, usePanel, handle: handle$1 = "both", placeholder = "Colors", popupProps, onChange, } = props;
+    const [colorType, setColorType] = react.useState(type);
+    const [colorValue, setColorValue] = react.useState(value);
+    const [syncValue, setSyncValue] = react.useState(value);
+    const [visible, setVisible] = react.useState(popupProps?.visible);
+    const handleChange = (target) => {
+        setSyncValue(target);
+    };
+    const handleComplete = (target) => {
+        const method = footer.ColorMethods[colorType];
+        if (target.a !== 1) {
+            target.a = parseFloat(target.a.toFixed(3));
+        }
+        setColorValue(target[method]?.());
+    };
+    const handleVisibleChange = (v) => {
+        setVisible(v);
+        popupProps?.onVisibleChange?.(v);
+    };
+    const handleTypeChange = (t) => {
+        const method = footer.ColorMethods[t];
+        setColorType(t);
+        setColorValue(syncValue?.[method]?.());
+    };
+    const handleValueChange = (v) => {
+        setColorValue(v);
+        setSyncValue(v);
+    };
+    const handleOk = () => {
+        onChange?.(colorValue);
+        setVisible(false);
+    };
+    react.useEffect(() => {
+        setSyncValue(value);
+        setColorValue(value);
+    }, [value]);
+    react.useEffect(() => {
+        if (popupProps?.visible !== undefined) {
+            setVisible(popupProps.visible);
+        }
+    }, [popupProps?.visible]);
+    if (usePanel) {
+        return jsxRuntime.jsx(ColorsPanel__default, { ...props });
+    }
+    return (jsxRuntime.jsx(popup.default, { trigger: 'click', touchable: true, position: 'bottom', ...popupProps, visible: visible, content: jsxRuntime.jsx(ColorsPanel__default, { value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [panel, jsxRuntime.jsx(footer.default, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
+            }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsxRuntime.jsx(handle.default, { color: value, handle: handle$1, placeholder: placeholder })) }));
 }
-//#endregion
-exports.default = ColorPicker;
 
-//# sourceMappingURL=index.js.map
+exports.default = ColorPicker;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/picker/colors/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../packages/components/picker/colors/index.tsx"],"sourcesContent":["import ColorsPanel from \"@rc-component/color-picker\";\nimport { useEffect, useState } from \"react\";\nimport Popup from \"../../popup\";\nimport { IColorPicker } from \"../type\";\nimport Footer, { ColorMethods } from \"./footer\";\nimport Handle from \"./handle\";\nimport \"./index.css\";\n\nexport default function ColorPicker(props: IColorPicker) {\n\tconst {\n\t\tvalue,\n\t\ttype = \"HEX\",\n\t\tdisabledAlpha,\n\t\tchildren,\n\t\tusePanel,\n\t\thandle = \"both\",\n\t\tplaceholder = \"Colors\",\n\t\tpopupProps,\n\t\tonChange,\n\t} = props;\n\n\tconst [colorType, setColorType] = useState(type);\n\tconst [colorValue, setColorValue] = useState(value);\n\tconst [syncValue, setSyncValue] = useState(value);\n\tconst [visible, setVisible] = useState<boolean | undefined>(popupProps?.visible);\n\n\tconst handleChange = (target) => {\n\t\tsetSyncValue(target);\n\t};\n\n\tconst handleComplete = (target) => {\n\t\tconst method = ColorMethods[colorType];\n\n\t\tif (target.a !== 1) {\n\t\t\ttarget.a = parseFloat(target.a.toFixed(3));\n\t\t}\n\n\t\tsetColorValue(target[method]?.());\n\t};\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tsetVisible(v);\n\t\tpopupProps?.onVisibleChange?.(v);\n\t};\n\n\tconst handleTypeChange = (t) => {\n\t\tconst method = ColorMethods[t];\n\n\t\tsetColorType(t);\n\t\tsetColorValue(syncValue?.[method]?.());\n\t};\n\n\tconst handleValueChange = (v) => {\n\t\tsetColorValue(v);\n\t\tsetSyncValue(v);\n\t};\n\n\tconst handleOk = () => {\n\t\tonChange?.(colorValue);\n\t\tsetVisible(false);\n\t};\n\n\tuseEffect(() => {\n\t\tsetSyncValue(value);\n\t\tsetColorValue(value);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tif (popupProps?.visible !== undefined) {\n\t\t\tsetVisible(popupProps.visible);\n\t\t}\n\t}, [popupProps?.visible]);\n\n\tif (usePanel) {\n\t\treturn <ColorsPanel {...props} />;\n\t}\n\n\treturn (\n\t\t<Popup\n\t\t\ttrigger='click'\n\t\t\ttouchable\n\t\t\tposition='bottom'\n\t\t\t{...popupProps}\n\t\t\tvisible={visible}\n\t\t\tcontent={\n\t\t\t\t<ColorsPanel\n\t\t\t\t\tvalue={syncValue}\n\t\t\t\t\tdisabledAlpha={disabledAlpha}\n\t\t\t\t\tpanelRender={(panel) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{panel}\n\t\t\t\t\t\t\t\t<Footer\n\t\t\t\t\t\t\t\t\tvalue={colorValue}\n\t\t\t\t\t\t\t\t\ttype={colorType}\n\t\t\t\t\t\t\t\t\tonTypeChange={handleTypeChange}\n\t\t\t\t\t\t\t\t\tonChange={handleValueChange}\n\t\t\t\t\t\t\t\t\tonOk={handleOk}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonChangeComplete={handleComplete}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children ?? (\n\t\t\t\t<Handle\n\t\t\t\t\tcolor={value}\n\t\t\t\t\thandle={handle}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Popup>\n\t);\n}\n"],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/picker/colors/index.tsx"],"sourcesContent":["import ColorsPanel from \"@rc-component/color-picker\";\nimport { useEffect, useState } from \"react\";\nimport Popup from \"../../popup\";\nimport { IColorPicker } from \"../type\";\nimport Footer, { ColorMethods } from \"./footer\";\nimport Handle from \"./handle\";\nimport \"./index.css\";\n\nexport default function ColorPicker(props: IColorPicker) {\n\tconst {\n\t\tvalue,\n\t\ttype = \"HEX\",\n\t\tdisabledAlpha,\n\t\tchildren,\n\t\tusePanel,\n\t\thandle = \"both\",\n\t\tplaceholder = \"Colors\",\n\t\tpopupProps,\n\t\tonChange,\n\t} = props;\n\n\tconst [colorType, setColorType] = useState(type);\n\tconst [colorValue, setColorValue] = useState(value);\n\tconst [syncValue, setSyncValue] = useState(value);\n\tconst [visible, setVisible] = useState<boolean | undefined>(popupProps?.visible);\n\n\tconst handleChange = (target) => {\n\t\tsetSyncValue(target);\n\t};\n\n\tconst handleComplete = (target) => {\n\t\tconst method = ColorMethods[colorType];\n\n\t\tif (target.a !== 1) {\n\t\t\ttarget.a = parseFloat(target.a.toFixed(3));\n\t\t}\n\n\t\tsetColorValue(target[method]?.());\n\t};\n\n\tconst handleVisibleChange = (v: boolean) => {\n\t\tsetVisible(v);\n\t\tpopupProps?.onVisibleChange?.(v);\n\t};\n\n\tconst handleTypeChange = (t) => {\n\t\tconst method = ColorMethods[t];\n\n\t\tsetColorType(t);\n\t\tsetColorValue(syncValue?.[method]?.());\n\t};\n\n\tconst handleValueChange = (v) => {\n\t\tsetColorValue(v);\n\t\tsetSyncValue(v);\n\t};\n\n\tconst handleOk = () => {\n\t\tonChange?.(colorValue);\n\t\tsetVisible(false);\n\t};\n\n\tuseEffect(() => {\n\t\tsetSyncValue(value);\n\t\tsetColorValue(value);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tif (popupProps?.visible !== undefined) {\n\t\t\tsetVisible(popupProps.visible);\n\t\t}\n\t}, [popupProps?.visible]);\n\n\tif (usePanel) {\n\t\treturn <ColorsPanel {...props} />;\n\t}\n\n\treturn (\n\t\t<Popup\n\t\t\ttrigger='click'\n\t\t\ttouchable\n\t\t\tposition='bottom'\n\t\t\t{...popupProps}\n\t\t\tvisible={visible}\n\t\t\tcontent={\n\t\t\t\t<ColorsPanel\n\t\t\t\t\tvalue={syncValue}\n\t\t\t\t\tdisabledAlpha={disabledAlpha}\n\t\t\t\t\tpanelRender={(panel) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{panel}\n\t\t\t\t\t\t\t\t<Footer\n\t\t\t\t\t\t\t\t\tvalue={colorValue}\n\t\t\t\t\t\t\t\t\ttype={colorType}\n\t\t\t\t\t\t\t\t\tonTypeChange={handleTypeChange}\n\t\t\t\t\t\t\t\t\tonChange={handleValueChange}\n\t\t\t\t\t\t\t\t\tonOk={handleOk}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t);\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tonChangeComplete={handleComplete}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tonVisibleChange={handleVisibleChange}\n\t\t>\n\t\t\t{children ?? (\n\t\t\t\t<Handle\n\t\t\t\t\tcolor={value}\n\t\t\t\t\thandle={handle}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Popup>\n\t);\n}\n"],"names":["handle","useState","ColorMethods","useEffect","_jsx","ColorsPanel","Popup","_jsxs","_Fragment","Footer","Handle"],"mappings":"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"}