@aloudata/aloudata-design 2.19.5 → 3.0.0-beta.2

package/dist/Col/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Col/index.tsx"],"sourcesContent":["import React, { useId, useMemo } from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface ColSize {\n  flex?: string | number;\n  span?: number;\n  order?: number;\n  offset?: number;\n  push?: number;\n  pull?: number;\n}\n\nexport interface ColProps extends ColSize {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  xs?: number | ColSize;\n  sm?: number | ColSize;\n  md?: number | ColSize;\n  lg?: number | ColSize;\n  xl?: number | ColSize;\n  xxl?: number | ColSize;\n}\n\nconst BREAKPOINTS: Record<string, number> = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n};\n\nconst BREAKPOINT_KEYS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;\n\nfunction normalizeColSize(\n  value: number | ColSize | undefined,\n): ColSize | undefined {\n  if (value === undefined) return undefined;\n  if (typeof value === 'number') return { span: value };\n  return value;\n}\n\nfunction buildBreakpointCSS(\n  uid: string,\n  breakpointProps: Partial<Record<string, number | ColSize>>,\n): string {\n  let css = '';\n\n  for (const bp of BREAKPOINT_KEYS) {\n    const raw = breakpointProps[bp];\n    const size = normalizeColSize(raw);\n    if (!size) continue;\n\n    const rules: string[] = [];\n    if (size.span !== undefined) {\n      const pct = `${(size.span / 24) * 100}%`;\n      rules.push(`flex: 0 0 ${pct};`);\n      rules.push(`max-width: ${pct};`);\n    }\n    if (size.flex !== undefined) {\n      const flexVal =\n        typeof size.flex === 'number'\n          ? `${size.flex} ${size.flex} auto`\n          : size.flex;\n      rules.push(`flex: ${flexVal};`);\n    }\n    if (size.offset !== undefined && size.offset > 0) {\n      rules.push(`margin-left: ${(size.offset / 24) * 100}%;`);\n    }\n    if (size.order !== undefined) {\n      rules.push(`order: ${size.order};`);\n    }\n    if (size.push !== undefined && size.push > 0) {\n      rules.push(`left: ${(size.push / 24) * 100}%;`);\n      rules.push(`position: relative;`);\n    }\n    if (size.pull !== undefined && size.pull > 0) {\n      rules.push(`right: ${(size.pull / 24) * 100}%;`);\n      rules.push(`position: relative;`);\n    }\n\n    if (rules.length === 0) continue;\n\n    const ruleBlock = `.${uid}{${rules.join('')}}`;\n\n    if (BREAKPOINTS[bp] === 0) {\n      css += ruleBlock;\n    } else {\n      css += `@media(min-width:${BREAKPOINTS[bp]}px){${ruleBlock}}`;\n    }\n  }\n\n  return css;\n}\n\nfunction Col(props: ColProps) {\n  const {\n    span,\n    offset,\n    flex,\n    className,\n    style,\n    children,\n    order,\n    push,\n    pull,\n    xs,\n    sm,\n    md,\n    lg,\n    xl,\n    xxl,\n  } = props;\n\n  const reactId = useId();\n  // Create a stable CSS-safe class name from the React id\n  const uid = useMemo(\n    () => `ald-col-bp-${reactId.replace(/:/g, '')}`,\n    [reactId],\n  );\n\n  const hasBreakpoints =\n    xs !== undefined ||\n    sm !== undefined ||\n    md !== undefined ||\n    lg !== undefined ||\n    xl !== undefined ||\n    xxl !== undefined;\n\n  const breakpointCSS = useMemo(() => {\n    if (!hasBreakpoints) return '';\n    return buildBreakpointCSS(uid, { xs, sm, md, lg, xl, xxl });\n  }, [hasBreakpoints, uid, xs, sm, md, lg, xl, xxl]);\n\n  // Base inline styles (used when no responsive breakpoints override them)\n  const colStyle: React.CSSProperties = { ...style };\n\n  if (!hasBreakpoints) {\n    if (flex) {\n      colStyle.flex = typeof flex === 'number' ? `${flex} ${flex} auto` : flex;\n    } else if (span !== undefined) {\n      colStyle.flex = `0 0 ${(span / 24) * 100}%`;\n      colStyle.maxWidth = `${(span / 24) * 100}%`;\n    }\n\n    if (offset) {\n      colStyle.marginLeft = `${(offset / 24) * 100}%`;\n    }\n    if (order !== undefined) {\n      colStyle.order = order;\n    }\n    if (push) {\n      colStyle.left = `${(push / 24) * 100}%`;\n      colStyle.position = 'relative';\n    }\n    if (pull) {\n      colStyle.right = `${(pull / 24) * 100}%`;\n      colStyle.position = 'relative';\n    }\n  }\n\n  return (\n    <>\n      {hasBreakpoints && breakpointCSS && <style>{breakpointCSS}</style>}\n      <div\n        className={cn('ald-col', hasBreakpoints && uid, className)}\n        style={colStyle}\n      >\n        {children}\n      </div>\n    </>\n  );\n}\n\nexport default Col;\n"],"mappings":"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"}

package/dist/Collapse/index.d.ts

@@ -1,8 +1,45 @@
-import { CollapseProps } from 'antd';
-import React from 'react';
-export type { CollapsePanelProps, CollapseProps } from 'antd/lib/collapse';
+import { default as React } from 'react';
+export interface CollapsePanelProps {
+    key: string;
+    header?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    extra?: React.ReactNode;
+    forceRender?: boolean;
+    collapsible?: 'header' | 'icon' | 'disabled';
+}
+export interface CollapseProps {
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    onChange?: (key: string | string[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    bordered?: boolean;
+    expandIconPosition?: 'start' | 'end' | 'left' | 'right';
+    expandIcon?: (props: {
+        isActive: boolean;
+    }) => React.ReactNode;
+    ghost?: boolean;
+    size?: 'large' | 'middle' | 'small';
+    collapsible?: 'header' | 'icon' | 'disabled';
+    children?: React.ReactNode;
+    items?: Array<{
+        key: string;
+        label: React.ReactNode;
+        children?: React.ReactNode;
+        className?: string;
+        style?: React.CSSProperties;
+        extra?: React.ReactNode;
+        disabled?: boolean;
+        collapsible?: 'header' | 'icon' | 'disabled';
+        forceRender?: boolean;
+    }>;
+}
 declare const Collapse: {
-    (props: CollapseProps): React.JSX.Element;
-    Panel: React.ForwardRefExoticComponent<import("antd").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
+    (props: CollapseProps): import("react/jsx-runtime").JSX.Element;
+    Panel: React.FC<CollapsePanelProps>;
 };
 export default Collapse;

package/dist/Collapse/index.js

@@ -1,20 +1,131 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import { Collapse as AntdCollapse } from 'antd';
-import React from 'react';
-import { ArrowDownLightLine, ArrowRightLightLine } from "../Icon";
-var Collapse = function Collapse(props) {
-  return /*#__PURE__*/React.createElement(AntdCollapse, _extends({}, props, {
-    className: "ald-collapse",
-    expandIcon: function expandIcon(props) {
-      return props.isActive ? /*#__PURE__*/React.createElement(ArrowDownLightLine, {
-        size: 20,
-        color: 'var(--alias-colors-icon-subtle)'
-      }) : /*#__PURE__*/React.createElement(ArrowRightLightLine, {
-        size: 20,
-        color: 'var(--alias-colors-icon-subtle)'
-      });
-    }
-  }));
+import { cn } from "../lib/utils.js";
+import Memo from "../Icon/components/ArrowDownLightLine.js";
+import Memo$1 from "../Icon/components/ArrowRightLightLine.js";
+import React, { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Collapse/index.tsx
+/** Internal rendering component for a single panel */
+function CollapsePanelInternal(props) {
+	const { header, isActive, onToggle, disabled, extra, className, style, children, forceRender, expandIcon, expandIconPosition = "start" } = props;
+	const iconElement = /* @__PURE__ */ jsx("span", {
+		className: "ald-collapse-expand-icon tw-flex tw-items-center",
+		children: expandIcon ? expandIcon({ isActive }) : isActive ? /* @__PURE__ */ jsx(Memo, {
+			size: 20,
+			color: "var(--alias-colors-icon-subtle)"
+		}) : /* @__PURE__ */ jsx(Memo$1, {
+			size: 20,
+			color: "var(--alias-colors-icon-subtle)"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("ald-collapse-item tw-border-b tw-border-solid tw-border-[var(--border-default)]", isActive && "ald-collapse-item-active", disabled && "tw-pointer-events-none tw-opacity-50", className),
+		style,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "ald-collapse-header tw-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-px-4 tw-py-3",
+			onClick: disabled ? void 0 : onToggle,
+			children: [
+				expandIconPosition === "start" && iconElement,
+				/* @__PURE__ */ jsx("span", {
+					className: "ald-collapse-header-text tw-flex-1",
+					children: header
+				}),
+				extra && /* @__PURE__ */ jsx("span", {
+					className: "ald-collapse-extra",
+					children: extra
+				}),
+				expandIconPosition === "end" && iconElement
+			]
+		}), (isActive || forceRender) && /* @__PURE__ */ jsx("div", {
+			className: "ald-collapse-content tw-px-4 tw-pb-4",
+			style: !isActive && forceRender ? { display: "none" } : void 0,
+			children
+		})]
+	});
+}
+/**
+* Checks whether a React element is a Collapse.Panel.
+* We tag the Panel component with a `__COLLAPSE_PANEL` flag
+* so we can detect it regardless of module wrapper differences.
+*/
+function isPanelElement(child) {
+	if (!React.isValidElement(child)) return false;
+	return child.type?.__COLLAPSE_PANEL === true;
+}
+/**
+* Convert Collapse.Panel children into the internal items format.
+*/
+function panelChildrenToItems(children) {
+	const items = [];
+	React.Children.forEach(children, (child) => {
+		if (!isPanelElement(child)) return;
+		const { header, children: panelChildren, className, style, extra, disabled, collapsible, forceRender } = child.props;
+		const panelKey = child.key !== null && child.key !== void 0 ? String(child.key) : "";
+		items.push({
+			key: panelKey,
+			label: header,
+			children: panelChildren,
+			className,
+			style,
+			extra,
+			disabled,
+			collapsible,
+			forceRender
+		});
+	});
+	return items;
+}
+var Collapse = (props) => {
+	const { defaultActiveKey = [], activeKey: controlledActiveKey, accordion, onChange, className, style, bordered = true, expandIconPosition, expandIcon, items: itemsProp, children } = props;
+	const resolvedPosition = expandIconPosition === "left" ? "start" : expandIconPosition === "right" ? "end" : expandIconPosition ?? "start";
+	const normalizeKeys = (keys) => {
+		if (!keys) return [];
+		return Array.isArray(keys) ? keys : [keys];
+	};
+	const [internalActiveKey, setInternalActiveKey] = useState(normalizeKeys(defaultActiveKey));
+	const activeKeys = controlledActiveKey !== void 0 ? normalizeKeys(controlledActiveKey) : internalActiveKey;
+	const toggleKey = (key) => {
+		let newKeys;
+		if (accordion) newKeys = activeKeys.includes(key) ? [] : [key];
+		else newKeys = activeKeys.includes(key) ? activeKeys.filter((k) => k !== key) : [...activeKeys, key];
+		if (controlledActiveKey === void 0) setInternalActiveKey(newKeys);
+		onChange?.(accordion ? newKeys[0] || "" : newKeys);
+	};
+	const items = itemsProp || (children ? panelChildrenToItems(children) : void 0);
+	const renderItems = () => {
+		if (items && items.length > 0) return items.map((item) => /* @__PURE__ */ jsx(CollapsePanelInternal, {
+			panelKey: item.key,
+			header: item.label,
+			isActive: activeKeys.includes(item.key),
+			onToggle: () => toggleKey(item.key),
+			disabled: item.disabled || item.collapsible === "disabled",
+			extra: item.extra,
+			className: item.className,
+			style: item.style,
+			forceRender: item.forceRender,
+			expandIcon,
+			expandIconPosition: resolvedPosition,
+			children: item.children
+		}, item.key));
+		return children;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("ald-collapse", bordered && "tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtle)]", className),
+		style,
+		children: renderItems()
+	});
 };
-Collapse.Panel = AntdCollapse.Panel;
-export default Collapse;
+/**
+* Collapse.Panel — legacy sub-component for backwards compatibility.
+* When used as a child of <Collapse>, the parent extracts its props
+* and renders the panels via the internal CollapsePanelInternal component.
+* Panel itself never renders directly; the parent handles rendering.
+*/
+var Panel = ({ children }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+Panel.__COLLAPSE_PANEL = true;
+Collapse.Panel = Panel;
+//#endregion
+export { Collapse as default };
+
+//# sourceMappingURL=index.js.map

package/dist/Collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Collapse/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ArrowDownLightLine, ArrowRightLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface CollapsePanelProps {\n  key: string;\n  header?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  forceRender?: boolean;\n  collapsible?: 'header' | 'icon' | 'disabled';\n}\n\nexport interface CollapseProps {\n  activeKey?: string | string[];\n  defaultActiveKey?: string | string[];\n  accordion?: boolean;\n  onChange?: (key: string | string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  bordered?: boolean;\n  expandIconPosition?: 'start' | 'end' | 'left' | 'right';\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  ghost?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  children?: React.ReactNode;\n  items?: Array<{\n    key: string;\n    label: React.ReactNode;\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    extra?: React.ReactNode;\n    disabled?: boolean;\n    collapsible?: 'header' | 'icon' | 'disabled';\n    forceRender?: boolean;\n  }>;\n}\n\n/** Internal rendering component for a single panel */\nfunction CollapsePanelInternal(props: {\n  panelKey: string;\n  header: React.ReactNode;\n  isActive: boolean;\n  onToggle: () => void;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  forceRender?: boolean;\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition?: 'start' | 'end';\n}) {\n  const {\n    header,\n    isActive,\n    onToggle,\n    disabled,\n    extra,\n    className,\n    style,\n    children,\n    forceRender,\n    expandIcon,\n    expandIconPosition = 'start',\n  } = props;\n\n  const iconNode = expandIcon ? (\n    expandIcon({ isActive })\n  ) : isActive ? (\n    <ArrowDownLightLine size={20} color=\"var(--alias-colors-icon-subtle)\" />\n  ) : (\n    <ArrowRightLightLine size={20} color=\"var(--alias-colors-icon-subtle)\" />\n  );\n\n  const iconElement = (\n    <span className=\"ald-collapse-expand-icon tw-flex tw-items-center\">\n      {iconNode}\n    </span>\n  );\n\n  return (\n    <div\n      className={cn(\n        'ald-collapse-item tw-border-b tw-border-solid tw-border-[var(--border-default)]',\n        isActive && 'ald-collapse-item-active',\n        disabled && 'tw-pointer-events-none tw-opacity-50',\n        className,\n      )}\n      style={style}\n    >\n      <div\n        className=\"ald-collapse-header tw-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-px-4 tw-py-3\"\n        onClick={disabled ? undefined : onToggle}\n      >\n        {expandIconPosition === 'start' && iconElement}\n        <span className=\"ald-collapse-header-text tw-flex-1\">{header}</span>\n        {extra && <span className=\"ald-collapse-extra\">{extra}</span>}\n        {expandIconPosition === 'end' && iconElement}\n      </div>\n      {(isActive || forceRender) && (\n        <div\n          className=\"ald-collapse-content tw-px-4 tw-pb-4\"\n          style={!isActive && forceRender ? { display: 'none' } : undefined}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Checks whether a React element is a Collapse.Panel.\n * We tag the Panel component with a `__COLLAPSE_PANEL` flag\n * so we can detect it regardless of module wrapper differences.\n */\nfunction isPanelElement(\n  child: React.ReactNode,\n): child is React.ReactElement<CollapsePanelProps> {\n  if (!React.isValidElement(child)) return false;\n  return (child.type as any)?.__COLLAPSE_PANEL === true;\n}\n\n/**\n * Convert Collapse.Panel children into the internal items format.\n */\nfunction panelChildrenToItems(children: React.ReactNode) {\n  const items: Array<{\n    key: string;\n    label: React.ReactNode;\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    extra?: React.ReactNode;\n    disabled?: boolean;\n    collapsible?: 'header' | 'icon' | 'disabled';\n    forceRender?: boolean;\n  }> = [];\n\n  React.Children.forEach(children, (child) => {\n    if (!isPanelElement(child)) return;\n    const {\n      header,\n      children: panelChildren,\n      className,\n      style,\n      extra,\n      disabled,\n      collapsible,\n      forceRender,\n    } = child.props;\n\n    // The `key` prop is not part of child.props in React — access it from child.key\n    const panelKey =\n      child.key !== null && child.key !== undefined ? String(child.key) : '';\n\n    items.push({\n      key: panelKey,\n      label: header,\n      children: panelChildren,\n      className,\n      style,\n      extra,\n      disabled,\n      collapsible,\n      forceRender,\n    });\n  });\n\n  return items;\n}\n\nconst Collapse = (props: CollapseProps) => {\n  const {\n    defaultActiveKey = [],\n    activeKey: controlledActiveKey,\n    accordion,\n    onChange,\n    className,\n    style,\n    bordered = true,\n    expandIconPosition,\n    expandIcon,\n    items: itemsProp,\n    children,\n  } = props;\n\n  const resolvedPosition =\n    expandIconPosition === 'left'\n      ? 'start'\n      : expandIconPosition === 'right'\n      ? 'end'\n      : expandIconPosition ?? 'start';\n\n  const normalizeKeys = (keys: string | string[] | undefined): string[] => {\n    if (!keys) return [];\n    return Array.isArray(keys) ? keys : [keys];\n  };\n\n  const [internalActiveKey, setInternalActiveKey] = useState<string[]>(\n    normalizeKeys(defaultActiveKey),\n  );\n\n  const activeKeys =\n    controlledActiveKey !== undefined\n      ? normalizeKeys(controlledActiveKey)\n      : internalActiveKey;\n\n  const toggleKey = (key: string) => {\n    let newKeys: string[];\n    if (accordion) {\n      newKeys = activeKeys.includes(key) ? [] : [key];\n    } else {\n      newKeys = activeKeys.includes(key)\n        ? activeKeys.filter((k) => k !== key)\n        : [...activeKeys, key];\n    }\n    if (controlledActiveKey === undefined) {\n      setInternalActiveKey(newKeys);\n    }\n    onChange?.(accordion ? newKeys[0] || '' : newKeys);\n  };\n\n  // Resolve items: from `items` prop, or by converting Panel children\n  const items =\n    itemsProp || (children ? panelChildrenToItems(children) : undefined);\n\n  const renderItems = () => {\n    if (items && items.length > 0) {\n      return items.map((item) => (\n        <CollapsePanelInternal\n          key={item.key}\n          panelKey={item.key}\n          header={item.label}\n          isActive={activeKeys.includes(item.key)}\n          onToggle={() => toggleKey(item.key)}\n          disabled={item.disabled || item.collapsible === 'disabled'}\n          extra={item.extra}\n          className={item.className}\n          style={item.style}\n          forceRender={item.forceRender}\n          expandIcon={expandIcon}\n          expandIconPosition={resolvedPosition}\n        >\n          {item.children}\n        </CollapsePanelInternal>\n      ));\n    }\n    // If children are not Panel elements (rare fallback), render them as-is\n    return children;\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-collapse',\n        bordered &&\n          'tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtle)]',\n        className,\n      )}\n      style={style}\n    >\n      {renderItems()}\n    </div>\n  );\n};\n\n/**\n * Collapse.Panel — legacy sub-component for backwards compatibility.\n * When used as a child of <Collapse>, the parent extracts its props\n * and renders the panels via the internal CollapsePanelInternal component.\n * Panel itself never renders directly; the parent handles rendering.\n */\nconst Panel: React.FC<CollapsePanelProps> = ({ children }) => {\n  // This component should never render on its own — Collapse extracts\n  // its props. But if used outside of Collapse, render children as fallback.\n  return <>{children}</>;\n};\n\n// Tag for detection by isPanelElement\n(Panel as any).__COLLAPSE_PANEL = true;\n\nCollapse.Panel = Panel;\n\nexport default Collapse;\n"],"mappings":"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"}

package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-import type { AggregationColor } from '../color';
+import { FC } from 'react';
+import { AggregationColor } from '../color';
 interface ColorAlphaInputProps {
     prefixCls: string;
     value?: AggregationColor;

package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js

@@ -1,43 +1,30 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useState } from 'react';
-import { generateColor, getColorAlpha } from "../util";
-import ColorSteppers from "./ColorSteppers";
-var ColorAlphaInput = function ColorAlphaInput(_ref) {
-  var prefixCls = _ref.prefixCls,
-    value = _ref.value,
-    onChange = _ref.onChange;
-  var colorAlphaInputPrefixCls = "".concat(prefixCls, "-alpha-input");
-  var _useState = useState(generateColor(value || '#000')),
-    _useState2 = _slicedToArray(_useState, 2),
-    alphaValue = _useState2[0],
-    setAlphaValue = _useState2[1];
-  useEffect(function () {
-    if (value) {
-      setAlphaValue(value);
-    }
-  }, [value]);
-  var handleAlphaChange = function handleAlphaChange(step) {
-    var hsba = alphaValue.toHsb();
-    hsba.a = (step || 0) / 100;
-    var genColor = generateColor(hsba);
-    if (!value) {
-      setAlphaValue(genColor);
-    }
-    onChange === null || onChange === void 0 ? void 0 : onChange(genColor);
-  };
-  return /*#__PURE__*/React.createElement(ColorSteppers, {
-    value: getColorAlpha(alphaValue),
-    prefixCls: prefixCls,
-    formatter: function formatter(step) {
-      return "".concat(step, "%");
-    },
-    className: colorAlphaInputPrefixCls,
-    onChange: handleAlphaChange
-  });
+import { generateColor, getColorAlpha } from "../util.js";
+import ColorSteppers from "./ColorSteppers.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ColorPicker/ComplexColorPicker/ColorAlphaInput.tsx
+var ColorAlphaInput = ({ prefixCls, value, onChange }) => {
+	const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`;
+	const [alphaValue, setAlphaValue] = useState(generateColor(value || "#000"));
+	useEffect(() => {
+		if (value) setAlphaValue(value);
+	}, [value]);
+	const handleAlphaChange = (step) => {
+		const hsba = alphaValue.toHsb();
+		hsba.a = (step || 0) / 100;
+		const genColor = generateColor(hsba);
+		if (!value) setAlphaValue(genColor);
+		onChange?.(genColor);
+	};
+	return /* @__PURE__ */ jsx(ColorSteppers, {
+		value: getColorAlpha(alphaValue),
+		prefixCls,
+		formatter: (step) => `${step}%`,
+		className: `${colorAlphaInputPrefixCls} tw-w-11`,
+		onChange: handleAlphaChange
+	});
 };
-export default ColorAlphaInput;
+//#endregion
+export { ColorAlphaInput as default };
+
+//# sourceMappingURL=ColorAlphaInput.js.map

package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorAlphaInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorAlphaInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor, getColorAlpha } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorAlphaInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorAlphaInput: FC<ColorAlphaInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`;\n  const [alphaValue, setAlphaValue] = useState<AggregationColor>(\n    generateColor(value || '#000'),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setAlphaValue(value);\n    }\n  }, [value]);\n\n  const handleAlphaChange = (step: number | null) => {\n    const hsba = alphaValue.toHsb();\n    hsba.a = (step || 0) / 100;\n    const genColor = generateColor(hsba);\n    if (!value) {\n      setAlphaValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <ColorSteppers\n      value={getColorAlpha(alphaValue)}\n      prefixCls={prefixCls}\n      formatter={(step) => `${step}%`}\n      className={`${colorAlphaInputPrefixCls} tw-w-11`}\n      onChange={handleAlphaChange}\n    />\n  );\n};\n\nexport default ColorAlphaInput;\n"],"mappings":";;;;;AAaA,IAAM,mBAA6C,EACjD,WACA,OACA,eACI;CACJ,MAAM,2BAA2B,GAAG,UAAU;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAClC,cAAc,SAAS,OAAO,CAC/B;AAED,iBAAgB;AACd,MAAI,MACF,eAAc,MAAM;IAErB,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB,SAAwB;EACjD,MAAM,OAAO,WAAW,OAAO;AAC/B,OAAK,KAAK,QAAQ,KAAK;EACvB,MAAM,WAAW,cAAc,KAAK;AACpC,MAAI,CAAC,MACH,eAAc,SAAS;AAEzB,aAAW,SAAS;;AAGtB,QACE,oBAAC,eAAD;EACE,OAAO,cAAc,WAAW;EACrB;EACX,YAAY,SAAS,GAAG,KAAK;EAC7B,WAAW,GAAG,yBAAyB;EACvC,UAAU;EACV,CAAA"}

package/dist/ColorPicker/ComplexColorPicker/ColorHexInput.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-import type { AggregationColor } from '../color';
+import { FC } from 'react';
+import { AggregationColor } from '../color';
 interface ColorHexInputProps {
     prefixCls: string;
     value?: AggregationColor;

package/dist/ColorPicker/ComplexColorPicker/ColorHexInput.js

@@ -1,46 +1,31 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useState } from 'react';
-import Input from "../../Input";
-import { toHexFormat } from "../color";
-import { generateColor } from "../util";
+import Input from "../../Input/index.js";
+import { toHexFormat } from "../color.js";
+import { generateColor } from "../util.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ColorPicker/ComplexColorPicker/ColorHexInput.tsx
 var hexReg = /(^#[\da-f]{6}$)|(^#[\da-f]{8}$)/i;
-var isHexString = function isHexString(hex) {
-  return hexReg.test("#".concat(hex));
+var isHexString = (hex) => hexReg.test(`#${hex}`);
+var ColorHexInput = ({ prefixCls, value, onChange }) => {
+	const colorHexInputPrefixCls = `${prefixCls}-hex-input`;
+	const [hexValue, setHexValue] = useState(() => value ? toHexFormat(value.toHexString()) : void 0);
+	useEffect(() => {
+		if (value) setHexValue(toHexFormat(value.toHexString()));
+	}, [value]);
+	const handleHexChange = (e) => {
+		const originValue = e.target.value;
+		setHexValue(toHexFormat(originValue));
+		if (isHexString(toHexFormat(originValue, true))) onChange?.(generateColor(originValue));
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		className: colorHexInputPrefixCls,
+		value: hexValue,
+		prefix: "#",
+		onChange: handleHexChange,
+		size: "small"
+	});
 };
-var ColorHexInput = function ColorHexInput(_ref) {
-  var prefixCls = _ref.prefixCls,
-    value = _ref.value,
-    onChange = _ref.onChange;
-  var colorHexInputPrefixCls = "".concat(prefixCls, "-hex-input");
-  var _useState = useState(function () {
-      return value ? toHexFormat(value.toHexString()) : undefined;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    hexValue = _useState2[0],
-    setHexValue = _useState2[1];
-  useEffect(function () {
-    if (value) {
-      setHexValue(toHexFormat(value.toHexString()));
-    }
-  }, [value]);
-  var handleHexChange = function handleHexChange(e) {
-    var originValue = e.target.value;
-    setHexValue(toHexFormat(originValue));
-    if (isHexString(toHexFormat(originValue, true))) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(generateColor(originValue));
-    }
-  };
-  return /*#__PURE__*/React.createElement(Input, {
-    className: colorHexInputPrefixCls,
-    value: hexValue,
-    prefix: "#",
-    onChange: handleHexChange,
-    size: "small"
-  });
-};
-export default ColorHexInput;
+//#endregion
+export { ColorHexInput as default };
+
+//# sourceMappingURL=ColorHexInput.js.map

package/dist/ColorPicker/ComplexColorPicker/ColorHexInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorHexInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorHexInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\n\nimport Input from '../../Input';\nimport type { AggregationColor } from '../color';\nimport { toHexFormat } from '../color';\nimport { generateColor } from '../util';\n\ninterface ColorHexInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst hexReg = /(^#[\\da-f]{6}$)|(^#[\\da-f]{8}$)/i;\nconst isHexString = (hex?: string) => hexReg.test(`#${hex}`);\n\nconst ColorHexInput: FC<ColorHexInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorHexInputPrefixCls = `${prefixCls}-hex-input`;\n  const [hexValue, setHexValue] = useState(() =>\n    value ? toHexFormat(value.toHexString()) : undefined,\n  );\n\n  useEffect(() => {\n    if (value) {\n      setHexValue(toHexFormat(value.toHexString()));\n    }\n  }, [value]);\n\n  const handleHexChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const originValue = e.target.value;\n    setHexValue(toHexFormat(originValue));\n    if (isHexString(toHexFormat(originValue, true))) {\n      onChange?.(generateColor(originValue));\n    }\n  };\n\n  return (\n    <Input\n      className={colorHexInputPrefixCls}\n      value={hexValue}\n      prefix=\"#\"\n      onChange={handleHexChange}\n      size=\"small\"\n    />\n  );\n};\n\nexport default ColorHexInput;\n"],"mappings":";;;;;;AAcA,IAAM,SAAS;AACf,IAAM,eAAe,QAAiB,OAAO,KAAK,IAAI,MAAM;AAE5D,IAAM,iBAAyC,EAC7C,WACA,OACA,eACI;CACJ,MAAM,yBAAyB,GAAG,UAAU;CAC5C,MAAM,CAAC,UAAU,eAAe,eAC9B,QAAQ,YAAY,MAAM,aAAa,CAAC,GAAG,OAC5C;AAED,iBAAgB;AACd,MAAI,MACF,aAAY,YAAY,MAAM,aAAa,CAAC,CAAC;IAE9C,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAA2C;EAClE,MAAM,cAAc,EAAE,OAAO;AAC7B,cAAY,YAAY,YAAY,CAAC;AACrC,MAAI,YAAY,YAAY,aAAa,KAAK,CAAC,CAC7C,YAAW,cAAc,YAAY,CAAC;;AAI1C,QACE,oBAAC,OAAD;EACE,WAAW;EACX,OAAO;EACP,QAAO;EACP,UAAU;EACV,MAAK;EACL,CAAA"}

package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-import type { AggregationColor } from '../color';
+import { FC } from 'react';
+import { AggregationColor } from '../color';
 interface ColorHsbInputProps {
     prefixCls: string;
     value?: AggregationColor;

package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js

@@ -1,73 +1,55 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useState } from 'react';
-import { generateColor, getRoundNumber } from "../util";
-import ColorSteppers from "./ColorSteppers";
-var ColorHsbInput = function ColorHsbInput(_ref) {
-  var prefixCls = _ref.prefixCls,
-    value = _ref.value,
-    onChange = _ref.onChange;
-  var colorHsbInputPrefixCls = "".concat(prefixCls, "-hsb-input");
-  var _useState = useState(generateColor(value || '#000')),
-    _useState2 = _slicedToArray(_useState, 2),
-    hsbValue = _useState2[0],
-    setHsbValue = _useState2[1];
-  useEffect(function () {
-    if (value) {
-      setHsbValue(value);
-    }
-  }, [value]);
-  var handleHsbChange = function handleHsbChange(step, type) {
-    var hsb = hsbValue.toHsb();
-    hsb[type] = type === 'h' ? step : (step || 0) / 100;
-    var genColor = generateColor(hsb);
-    if (!value) {
-      setHsbValue(genColor);
-    }
-    onChange === null || onChange === void 0 ? void 0 : onChange(genColor);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: colorHsbInputPrefixCls
-  }, /*#__PURE__*/React.createElement(ColorSteppers, {
-    max: 360,
-    min: 0,
-    value: Number(hsbValue.toHsb().h),
-    prefixCls: prefixCls,
-    className: colorHsbInputPrefixCls,
-    formatter: function formatter(step) {
-      return getRoundNumber(step || 0).toString();
-    },
-    onChange: function onChange(step) {
-      return handleHsbChange(Number(step), 'h');
-    }
-  }), /*#__PURE__*/React.createElement(ColorSteppers, {
-    max: 100,
-    min: 0,
-    value: Number(hsbValue.toHsb().s) * 100,
-    prefixCls: prefixCls,
-    className: colorHsbInputPrefixCls,
-    formatter: function formatter(step) {
-      return "".concat(getRoundNumber(step || 0), "%");
-    },
-    onChange: function onChange(step) {
-      return handleHsbChange(Number(step), 's');
-    }
-  }), /*#__PURE__*/React.createElement(ColorSteppers, {
-    max: 100,
-    min: 0,
-    value: Number(hsbValue.toHsb().b) * 100,
-    prefixCls: prefixCls,
-    className: colorHsbInputPrefixCls,
-    formatter: function formatter(step) {
-      return "".concat(getRoundNumber(step || 0), "%");
-    },
-    onChange: function onChange(step) {
-      return handleHsbChange(Number(step), 'b');
-    }
-  }));
+import { generateColor, getRoundNumber } from "../util.js";
+import ColorSteppers from "./ColorSteppers.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ColorPicker/ComplexColorPicker/ColorHsbInput.tsx
+var ColorHsbInput = ({ prefixCls, value, onChange }) => {
+	const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`;
+	const [hsbValue, setHsbValue] = useState(generateColor(value || "#000"));
+	useEffect(() => {
+		if (value) setHsbValue(value);
+	}, [value]);
+	const handleHsbChange = (step, type) => {
+		const hsb = hsbValue.toHsb();
+		hsb[type] = type === "h" ? step : (step || 0) / 100;
+		const genColor = generateColor(hsb);
+		if (!value) setHsbValue(genColor);
+		onChange?.(genColor);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${colorHsbInputPrefixCls} tw-flex tw-items-center tw-gap-1`,
+		children: [
+			/* @__PURE__ */ jsx(ColorSteppers, {
+				max: 360,
+				min: 0,
+				value: Number(hsbValue.toHsb().h),
+				prefixCls,
+				className: colorHsbInputPrefixCls,
+				formatter: (step) => getRoundNumber(step || 0).toString(),
+				onChange: (step) => handleHsbChange(Number(step), "h")
+			}),
+			/* @__PURE__ */ jsx(ColorSteppers, {
+				max: 100,
+				min: 0,
+				value: Number(hsbValue.toHsb().s) * 100,
+				prefixCls,
+				className: colorHsbInputPrefixCls,
+				formatter: (step) => `${getRoundNumber(step || 0)}%`,
+				onChange: (step) => handleHsbChange(Number(step), "s")
+			}),
+			/* @__PURE__ */ jsx(ColorSteppers, {
+				max: 100,
+				min: 0,
+				value: Number(hsbValue.toHsb().b) * 100,
+				prefixCls,
+				className: colorHsbInputPrefixCls,
+				formatter: (step) => `${getRoundNumber(step || 0)}%`,
+				onChange: (step) => handleHsbChange(Number(step), "b")
+			})
+		]
+	});
 };
-export default ColorHsbInput;
+//#endregion
+export { ColorHsbInput as default };
+
+//# sourceMappingURL=ColorHsbInput.js.map

package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorHsbInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorHsbInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { HSB } from '@rc-component/color-picker';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor, getRoundNumber } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorHsbInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorHsbInput: FC<ColorHsbInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`;\n  const [hsbValue, setHsbValue] = useState<AggregationColor>(\n    generateColor(value || '#000'),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setHsbValue(value);\n    }\n  }, [value]);\n\n  const handleHsbChange = (step: number, type: keyof HSB) => {\n    const hsb = hsbValue.toHsb();\n    hsb[type] = type === 'h' ? step : (step || 0) / 100;\n    const genColor = generateColor(hsb);\n    if (!value) {\n      setHsbValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <div\n      className={`${colorHsbInputPrefixCls} tw-flex tw-items-center tw-gap-1`}\n    >\n      <ColorSteppers\n        max={360}\n        min={0}\n        value={Number(hsbValue.toHsb().h)}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => getRoundNumber(step || 0).toString()}\n        onChange={(step) => handleHsbChange(Number(step), 'h')}\n      />\n      <ColorSteppers\n        max={100}\n        min={0}\n        value={Number(hsbValue.toHsb().s) * 100}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => `${getRoundNumber(step || 0)}%`}\n        onChange={(step) => handleHsbChange(Number(step), 's')}\n      />\n      <ColorSteppers\n        max={100}\n        min={0}\n        value={Number(hsbValue.toHsb().b) * 100}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => `${getRoundNumber(step || 0)}%`}\n        onChange={(step) => handleHsbChange(Number(step), 'b')}\n      />\n    </div>\n  );\n};\n\nexport default ColorHsbInput;\n"],"mappings":";;;;;AAcA,IAAM,iBAAyC,EAC7C,WACA,OACA,eACI;CACJ,MAAM,yBAAyB,GAAG,UAAU;CAC5C,MAAM,CAAC,UAAU,eAAe,SAC9B,cAAc,SAAS,OAAO,CAC/B;AAED,iBAAgB;AACd,MAAI,MACF,aAAY,MAAM;IAEnB,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAAc,SAAoB;EACzD,MAAM,MAAM,SAAS,OAAO;AAC5B,MAAI,QAAQ,SAAS,MAAM,QAAQ,QAAQ,KAAK;EAChD,MAAM,WAAW,cAAc,IAAI;AACnC,MAAI,CAAC,MACH,aAAY,SAAS;AAEvB,aAAW,SAAS;;AAGtB,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,uBAAuB;YADvC;GAGE,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,YAAY,SAAS,eAAe,QAAQ,EAAE,CAAC,UAAU;IACzD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE,GAAG;IACzB;IACX,WAAW;IACX,YAAY,SAAS,GAAG,eAAe,QAAQ,EAAE,CAAC;IAClD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE,GAAG;IACzB;IACX,WAAW;IACX,YAAY,SAAS,GAAG,eAAe,QAAQ,EAAE,CAAC;IAClD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACE"}

package/dist/ColorPicker/ComplexColorPicker/ColorInput.d.ts

@@ -1,6 +1,6 @@
-import type { FC } from 'react';
-import type { AggregationColor } from '../color';
-import type { ColorFormatType } from '../interface';
+import { FC } from 'react';
+import { AggregationColor } from '../color';
+import { ColorFormatType } from '../interface';
 interface ColorInputProps {
     prefixCls: string;
     format?: ColorFormatType;