@canlooks/can-ui 0.0.1

package/dist/cjs/components/pagination/counter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationCounter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const pagination_style_1 = require("./pagination.style");
+const pagination_1 = require("./pagination");
+exports.PaginationCounter = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { total, page, pageSize } = (0, react_1.useContext)(pagination_1.paginationContext);
+    const start = (page - 1) * pageSize + 1;
+    const end = Math.min(start + pageSize - 1, total);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(pagination_style_1.classes.counter, props.className), children: ["\u7B2C ", start, "-", end, " \u6761/\u5171 ", total, " \u6761"] }));
+}));

package/dist/cjs/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/cjs/components/pagination/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./pagination"), exports);

package/dist/cjs/components/pagination/jumper.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'react';
+import { DIVProps } from '../../../types';
+import { InputProps } from '../input';
+export interface PaginationJumperProps extends DIVProps {
+    InputProps?: InputProps;
+    InputRef?: Ref<HTMLDivElement>;
+}
+export declare const PaginationJumper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationJumperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/pagination/jumper.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationJumper = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const pagination_style_1 = require("./pagination.style");
+const input_1 = require("../input");
+const pagination_1 = require("./pagination");
+exports.PaginationJumper = (0, react_1.memo)((0, react_1.forwardRef)(({ InputProps, InputRef, ...props }, ref) => {
+    const { size, onPageChange, pageNum } = (0, react_1.useContext)(pagination_1.paginationContext);
+    const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const changeFn = () => {
+        const targetPage = parseInt(inputValue);
+        if (!isNaN(targetPage)) {
+            onPageChange(Math.max(1, Math.min(targetPage, pageNum)));
+        }
+        setInputValue('');
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(pagination_style_1.classes.jumper, props.className), children: [(0, jsx_runtime_1.jsx)("span", { children: "\u8DF3\u81F3" }), (0, jsx_runtime_1.jsx)(input_1.Input, { size: size, clearable: false, ...InputProps, ref: InputRef, className: (0, utils_1.classnames)(pagination_style_1.classes.input, InputProps?.className), value: inputValue, onChange: e => setInputValue(e.target.value), onBlur: changeFn, onKeyDown: e => e.key === 'Enter' && changeFn() }), (0, jsx_runtime_1.jsx)("span", { children: "\u9875" })] }));
+}));

package/dist/cjs/components/pagination/pager.d.ts

@@ -0,0 +1,4 @@
+import { DIVProps } from '../../../types';
+export interface PaginationPagerProps extends DIVProps {
+}
+export declare const PaginationPager: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationPagerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/pagination/pager.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationPager = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const react_1 = require("react");
+const button_1 = require("../button");
+const pagination_style_1 = require("./pagination.style");
+const pagination_1 = require("./pagination");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+exports.PaginationPager = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { text } = (0, app_1.useTheme)();
+    const { size, pageNum, page, onPageChange } = (0, react_1.useContext)(pagination_1.paginationContext);
+    const renderPageButton = (i, ellipsis) => {
+        const btnPage = i + 1;
+        const isActive = !ellipsis && btnPage === page;
+        return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(icons_1.EllipsisOutlined, {}) : btnPage }, i));
+    };
+    const renderPageList = () => {
+        if (pageNum <= 9) {
+            // 少于9页无需省略号
+            return Array(pageNum).fill(void 0).map((_, i) => {
+                return renderPageButton(i);
+            });
+        }
+        if (page < 6) {
+            // 当前页小于6，只需右侧省略号
+            return Array(9).fill(void 0).map((_, i) => {
+                return i === 8
+                    ? renderPageButton(pageNum - 1)
+                    : renderPageButton(i, i === 7);
+            });
+        }
+        if (page > pageNum - 5) {
+            // 只需左侧省略号
+            return Array(9).fill(void 0).map((_, i) => {
+                return i === 0
+                    ? renderPageButton(i)
+                    : renderPageButton(pageNum - 9 + i, i === 1);
+            });
+        }
+        // 两侧都有省略号
+        return Array(9).fill(void 0).map((_, i) => {
+            return i === 0
+                ? renderPageButton(i)
+                : i === 8
+                    ? renderPageButton(pageNum - 1)
+                    : renderPageButton(page + i - 5, i === 1 || i === 7);
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text", disabled: page === pageNum, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}) })] }));
+}));

package/dist/cjs/components/pagination/pagination.d.ts

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react';
+import { DIVProps, Size } from '../../../types';
+import { PaginationPager } from './pager';
+import { PaginationSizer } from './sizer';
+import { PaginationJumper } from './jumper';
+import { PaginationCounter } from './counter';
+export interface PaginationProps extends Omit<DIVProps, 'onChange'> {
+    size?: Size;
+    total?: number;
+    defaultPage?: number;
+    page?: number;
+    onPageChange?(page: number): void;
+    defaultPageSize?: number;
+    pageSize?: number;
+    onPageSizeChange?(pageSize: number): void;
+    onChange?(page: number, pageSize: number): void;
+}
+export declare const paginationContext: import("react").Context<{
+    size: Size;
+    total: number;
+    pageNum: number;
+    page: number;
+    onPageChange(page: number): void;
+    pageSize: number;
+    onPageSizeChange(pageSize: number): void;
+}>;
+export declare const Pagination: {
+    (props: PaginationProps): ReactElement;
+    Counter: typeof PaginationCounter;
+    Pager: typeof PaginationPager;
+    Sizer: typeof PaginationSizer;
+    Jumper: typeof PaginationJumper;
+};

package/dist/cjs/components/pagination/pagination.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = exports.paginationContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const pagination_style_1 = require("./pagination.style");
+const utils_1 = require("../../utils");
+const pager_1 = require("./pager");
+const sizer_1 = require("./sizer");
+const jumper_1 = require("./jumper");
+const counter_1 = require("./counter");
+exports.paginationContext = (0, react_1.createContext)({
+    size: 'small',
+    total: 0,
+    pageNum: 1,
+    page: 1,
+    onPageChange(page) { },
+    pageSize: 10,
+    onPageSizeChange(pageSize) { }
+});
+exports.Pagination = (0, react_1.memo)((0, react_1.forwardRef)(({ size = 'small', total = 0, defaultPage = 1, page, onPageChange, defaultPageSize = 10, pageSize, onPageSizeChange, onChange, ...props }, ref) => {
+    const [innerPage, setInnerPage] = (0, utils_1.useControlled)(defaultPage, page, onPageChange);
+    const [innerPageSize, setInnerPageSize] = (0, utils_1.useControlled)(defaultPageSize, pageSize, onPageSizeChange);
+    const pageChangeHandler = (page) => {
+        setInnerPage(page);
+        onChange?.(page, innerPageSize.current);
+    };
+    const pageSizeChangeHandler = (pageSize) => {
+        setInnerPageSize(pageSize);
+        onChange?.(innerPage.current, pageSize);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: pagination_style_1.style, className: (0, utils_1.classnames)(pagination_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(exports.paginationContext.Provider, { value: {
+                size,
+                total,
+                pageNum: Math.max(Math.ceil(total / innerPageSize.current), 1),
+                page: innerPage.current,
+                onPageChange: pageChangeHandler,
+                pageSize: innerPageSize.current,
+                onPageSizeChange: pageSizeChangeHandler
+            }, children: props.children ||
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(counter_1.PaginationCounter, {}), (0, jsx_runtime_1.jsx)(pager_1.PaginationPager, {}), (0, jsx_runtime_1.jsx)(sizer_1.PaginationSizer, {}), (0, jsx_runtime_1.jsx)(jumper_1.PaginationJumper, {})] }) }) }));
+}));

package/dist/cjs/components/pagination/pagination.style.d.ts

@@ -0,0 +1,11 @@
+export declare const classes: {
+    button: string;
+    input: string;
+    pager: string;
+    sizer: string;
+    jumper: string;
+    counter: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/pagination/pagination.style.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const input_style_1 = require("../input/input.style");
+exports.classes = (0, utils_1.defineClasses)('pagination', [
+    'button',
+    'pager',
+    'sizer',
+    'jumper',
+    'input',
+    'counter'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${spacing[3]}px;
+
+    .${exports.classes.pager} {
+        display: flex;
+    }
+
+    .${exports.classes.button} {
+        padding-left: 3px;
+        padding-right: 3px;
+
+        &[data-size=small] {
+            min-width: 24px;
+        }
+
+        &[data-size=medium] {
+            min-width: 32px;
+        }
+
+        &[data-size=large] {
+            min-width: 40px;
+        }
+    }
+
+    .${exports.classes.jumper} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[3]}px;
+        
+        .${exports.classes.input} {
+            width: 45px;
+
+            .${input_style_1.classes.input} {
+                text-align: center;
+            }
+        }
+    }
+`);

package/dist/cjs/components/pagination/sizer.d.ts

@@ -0,0 +1,5 @@
+import { SelectSingleProps } from '../select';
+import { MenuOptionType } from '../optionsBase';
+import { Id } from '../../../types';
+export type PaginationSizerProps<O extends MenuOptionType, V extends Id = Id> = SelectSingleProps<O, V>;
+export declare const PaginationSizer: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaginationSizerProps<MenuOptionType<Id>, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/pagination/sizer.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationSizer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const select_1 = require("../select");
+const pagination_1 = require("./pagination");
+const utils_1 = require("../../utils");
+const pagination_style_1 = require("./pagination.style");
+exports.PaginationSizer = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { size, pageSize, onPageSizeChange } = (0, react_1.useContext)(pagination_1.paginationContext);
+    return ((0, jsx_runtime_1.jsxs)(select_1.Select, { size: size, value: pageSize, onChange: onPageSizeChange, renderBackfill: (v) => v + ' 条/页', sizeAdaptable: false, ...props, ref: ref, className: (0, utils_1.classnames)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 10, label: "10 \u6761/\u9875" }), (0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 20, label: "20 \u6761/\u9875" }), (0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 50, label: "50 \u6761/\u9875" }), (0, jsx_runtime_1.jsx)(select_1.Select.Option, { value: 100, label: "100 \u6761/\u9875" })] }));
+}));

package/dist/cjs/components/palette/colorValueInput.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FixInputNumberParam } from '../../utils';
+import { DIVProps } from '../../../types';
+interface ColorValueInputProps extends Omit<DIVProps, 'onChange'>, FixInputNumberParam {
+    value: string | number;
+    label: ReactNode;
+    onChange(value: string): void;
+    hex?: boolean;
+}
+export declare function ColorValueInput({ value, label, onChange, hex, min, max, precision, ...props }: ColorValueInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/palette/colorValueInput.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorValueInput = ColorValueInput;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const input_1 = require("../input");
+const palette_style_1 = require("./palette.style");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+function ColorValueInput({ value, label, onChange, hex, min, max, precision, ...props }) {
+    const [innerValue, _setInputValue] = (0, utils_1.useDerivedState)(hex ? value.toString().slice(1) : value + '');
+    const setInputValue = (val) => {
+        _setInputValue(val);
+        if (hex) {
+            hexValidator(val) && onChange('#' + val);
+        }
+        else {
+            const fixedValue = (0, utils_1.fixInputNumber)(val, { min, max, precision });
+            fixedValue && onChange(fixedValue);
+        }
+    };
+    const hexValidator = (val) => {
+        try {
+            (0, color_1.default)('#' + val, 'hex');
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    };
+    const blurHandler = () => {
+        if (hex) {
+            if (!hexValidator(innerValue.current)) {
+                _setInputValue(value.toString().slice(1));
+            }
+        }
+        else {
+            const fixedValue = (0, utils_1.fixInputNumber)(innerValue.current, { min, max, precision }) || value + '';
+            if (fixedValue !== innerValue.current) {
+                _setInputValue(fixedValue);
+                onChange(fixedValue);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: palette_style_1.classes.inputItem, children: [(0, jsx_runtime_1.jsx)(input_1.Input, { className: palette_style_1.classes.input, size: "small", clearable: false, value: innerValue.current, onChange: e => setInputValue(e.target.value), onBlur: blurHandler, prefix: hex && '#' }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.inputItemLabel, children: label })] }));
+}

package/dist/cjs/components/palette/index.d.ts

@@ -0,0 +1 @@
+export * from './palette';

package/dist/cjs/components/palette/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./palette"), exports);

package/dist/cjs/components/palette/palette.d.ts

@@ -0,0 +1,10 @@
+import { DIVProps } from '../../../types';
+import { DraggableOptions } from '../../utils';
+import Color from 'color';
+export interface PaletteProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    defaultValue?: Color;
+    value?: Color;
+    onChange?(value: Color): void;
+    draggableOptions?: DraggableOptions<HTMLDivElement>;
+}
+export declare const Palette: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<PaletteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/palette/palette.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Palette = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const palette_style_1 = require("./palette.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const slider_1 = require("../slider");
+const color_1 = tslib_1.__importDefault(require("color"));
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const colorValueInput_1 = require("./colorValueInput");
+const sliderProps = {
+    railSize: 9,
+    handleSize: 9,
+    variant: 'outlined',
+    inset: true,
+    disableTrack: true,
+    tooltipProps: { disabled: true }
+};
+const availableFormat = ['HEX', 'RGB', 'HSL', 'CMYK'];
+exports.Palette = (0, react_1.memo)((0, react_1.forwardRef)(({ defaultValue, value, onChange, draggableOptions, ...props }, ref) => {
+    const { colors } = (0, app_1.useTheme)();
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue ?? (0, color_1.default)(colors.primary, 'hex'), value, onChange);
+    const colorObject = (0, react_1.useMemo)(() => {
+        return {
+            hue: innerValue.current.hue(),
+            hex: innerValue.current.hex(),
+            alpha: innerValue.current.alpha(),
+            saturated: innerValue.current.saturationl(100).lightness(50).hex()
+        };
+    }, [innerValue.current]);
+    const hueChangeHandler = (percent) => {
+        setInnerValue(innerValue.current.hue(percent / 100 * 359));
+    };
+    const alphaChangeHandler = (percent) => {
+        setInnerValue(innerValue.current.alpha(percent / 100));
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 色板拖拽滑块
+     */
+    const paletteRef = (0, react_1.useRef)(null);
+    const [handlePosition, _setHandlePosition] = (0, react_1.useState)([0, 0]);
+    const setHandlePosition = (left, top, hue) => {
+        const newTop = (0, utils_1.range)(top, 0, 100);
+        const newLeft = (0, utils_1.range)(left, 0, 100);
+        _setHandlePosition([newLeft, newTop]);
+        setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
+        return [newLeft, newTop];
+    };
+    const dragStartData = (0, react_1.useRef)();
+    const draggableHandle = (0, utils_1.useDraggableHandle)({
+        ...draggableOptions,
+        onDragStart(e) {
+            draggableOptions?.onDragStart?.(e);
+            const paletteWidth = paletteRef.current.clientWidth;
+            const paletteHeight = paletteRef.current.clientHeight;
+            const { hue } = colorObject;
+            let startPosition = handlePosition;
+            if (e.currentTarget === paletteRef.current) {
+                // 直接点击调色板，立即移动滑块位置
+                const { x, y } = paletteRef.current.getBoundingClientRect();
+                startPosition = setHandlePosition((e.clientX - x) / paletteWidth * 100, (e.clientY - y) / paletteHeight * 100, hue);
+            }
+            dragStartData.current = {
+                left: startPosition[0],
+                top: startPosition[1],
+                paletteWidth,
+                paletteHeight,
+                hue
+            };
+        },
+        onDrag(info, e) {
+            draggableOptions?.onDrag?.(info, e);
+            const { top, left, paletteWidth, paletteHeight, hue } = dragStartData.current;
+            setHandlePosition(left + info.deltaX / paletteWidth * 100, top + info.deltaY / paletteHeight * 100, hue);
+        }
+    });
+    const fitHandlePosition = () => {
+        _setHandlePosition([innerValue.current.saturationv(), innerValue.current.black()]);
+    };
+    (0, react_1.useEffect)(fitHandlePosition, []);
+    /**
+     * -----------------------------------------------------------------
+     * 输入框
+     */
+    const [activeFormat, setActiveFormat] = (0, react_1.useState)(0);
+    const formatChangeHandler = () => {
+        setActiveFormat(o => (o + 1) % availableFormat.length);
+    };
+    const renderInputs = () => {
+        const commonAlphaItem = ((0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "A", min: 0, max: 100, value: Math.round(colorObject.alpha * 100 * 10) / 10, onChange: v => alphaChangeHandler(+v) }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputsWrap, children: [(() => {
+                    switch (activeFormat) {
+                        case 0: // HEX
+                            return ((0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { "data-wide": "true", hex: true, label: "HEX", value: colorObject.hex, onChange: v => setInnerValue(innerValue.current.hex(v)) }));
+                        case 1: // RGB
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "R", min: 0, max: 255, value: innerValue.current.red().toFixed(), onChange: v => setInnerValue(innerValue.current.red(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "G", min: 0, max: 255, value: innerValue.current.green().toFixed(), onChange: v => setInnerValue(innerValue.current.green(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "B", min: 0, max: 255, value: innerValue.current.blue().toFixed(), onChange: v => setInnerValue(innerValue.current.blue(+v)) })] }));
+                        case 2: // HSL
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "H", min: 0, max: 255, value: colorObject.hue.toFixed(), onChange: v => setInnerValue(innerValue.current.hue(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "S", min: 0, max: 255, value: innerValue.current.saturationl().toFixed(), onChange: v => setInnerValue(innerValue.current.saturationl(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "L", min: 0, max: 255, value: innerValue.current.lightness().toFixed(), onChange: v => setInnerValue(innerValue.current.lightness(+v)) })] }));
+                        case 3: // CMYK
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "C", min: 0, max: 255, value: innerValue.current.cyan().toFixed(), onChange: v => setInnerValue(innerValue.current.cyan(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "M", min: 0, max: 255, value: innerValue.current.magenta().toFixed(), onChange: v => setInnerValue(innerValue.current.magenta(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "Y", min: 0, max: 255, value: innerValue.current.yellow().toFixed(), onChange: v => setInnerValue(innerValue.current.yellow(+v)) }), (0, jsx_runtime_1.jsx)(colorValueInput_1.ColorValueInput, { label: "K", min: 0, max: 255, value: innerValue.current.black().toFixed(), onChange: v => setInnerValue(innerValue.current.black(+v)) })] }));
+                        default:
+                            return null;
+                    }
+                })(), commonAlphaItem] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: palette_style_1.style, className: (0, utils_1.classnames)(palette_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsxs)("div", { ref: paletteRef, className: palette_style_1.classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [(0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.mask }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.handle, style: {
+                            left: handlePosition[0] + '%',
+                            top: handlePosition[1] + '%'
+                        }, ...draggableHandle })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.slidersRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.sliders, children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), (0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.alpha, renderRail: (_, railProps) => (0, jsx_runtime_1.jsxs)("div", { ...railProps, children: [railProps.children, (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.preview, children: (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.previewColor, style: {
+                                backgroundColor: colorObject.hex,
+                                opacity: colorObject.alpha
+                            } }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text", suffix: (0, jsx_runtime_1.jsx)(icons_1.DownOutlined, {}), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));
+}));

package/dist/cjs/components/palette/palette.style.d.ts

@@ -0,0 +1,21 @@
+export declare const classes: {
+    mask: string;
+    main: string;
+    input: string;
+    hue: string;
+    alpha: string;
+    handle: string;
+    slidersRow: string;
+    sliders: string;
+    alphaMask: string;
+    preview: string;
+    previewColor: string;
+    inputRow: string;
+    inputsWrap: string;
+    inputItem: string;
+    inputItemLabel: string;
+} & {
+    root: string;
+};
+export declare const getTranparentBackground: (a: string, b: string) => string;
+export declare const style: () => import("@emotion/react").SerializedStyles;