@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

package/es/components/atoms/Eyedropper/types.d.ts

@@ -1,5 +0,0 @@
-export type EyedropperProps = {
-    defaultColor?: string;
-    onColorPick?: (color: string) => void;
-    className?: string;
-};

package/es/components/atoms/Eyedropper/types.js

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

package/es/components/icons/ALignRightIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const ALignRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ALignRightIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const ALignRightIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3 21H21V19H3V21ZM9 17H21V15H9V17ZM3 13H21V11H3V13ZM9 9H21V7H9V9ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
-});

package/es/components/icons/AlignCenterIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const AlignCenterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/AlignCenterIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const AlignCenterIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7 15V17H17V15H7ZM3 21H21V19H3V21ZM3 13H21V11H3V13ZM7 7V9H17V7H7ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
-});

package/es/components/icons/AlignJustifyIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const AlignJustifyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/AlignJustifyIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const AlignJustifyIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3 21H21V19H3V21ZM3 17H21V15H3V17ZM3 13H21V11H3V13ZM3 9H21V7H3V9ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
-});

package/es/components/icons/AlignLeftIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const AlignLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/AlignLeftIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const AlignLeftIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M15 15H3V17H15V15ZM15 7H3V9H15V7ZM3 13H21V11H3V13ZM3 21H21V19H3V21ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
-});

package/es/components/icons/ArrowDropDownIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const ArrowDropDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ArrowDropDownIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const ArrowDropDownIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7 10L12 15L17 10H7Z", fill: "black" }) }));
-});

package/es/components/icons/ChevronRightIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const ChevronRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ChevronRightIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const ChevronRightIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
-});

package/es/components/icons/ColorizeIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const ColorizeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ColorizeIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const ColorizeIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M21.6764 4.92454L19.0766 2.32489C18.9738 2.2219 18.8517 2.1402 18.7173 2.08445C18.5829 2.0287 18.4388 2 18.2933 2C18.1478 2 18.0037 2.0287 17.8693 2.08445C17.7349 2.1402 17.6128 2.2219 17.51 2.32489L14.0436 5.79109L11.8993 3.66916L10.3327 5.23561L11.9104 6.81317L2 16.7229V22H7.27741L17.1878 12.0902L18.7655 13.6678L20.332 12.1013L18.1989 9.9683L21.6653 6.50211C22.1097 6.05772 22.1097 5.35782 21.6764 4.92454ZM6.35525 19.7781L4.22207 17.645L13.177 8.6907L15.3102 10.8237L6.35525 19.7781Z", fill: "black" }) }));
-});

package/es/components/icons/LinkOffIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const LinkOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LinkOffIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const LinkOffIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M21.7338 20.4488C22.0886 20.8038 22.0888 21.3789 21.7338 21.7338C21.3789 22.0888 20.8038 22.0886 20.4488 21.7338L21.7338 20.4488ZM2 12.0006C2 10.554 2.57508 9.16568 3.59799 8.14276C4.16642 7.57438 4.8477 7.14486 5.58882 6.875L2.26633 3.55247L2.15048 3.40998C1.91716 3.05707 1.95555 2.57685 2.26633 2.26607C2.57711 1.95529 3.05732 1.91689 3.41023 2.15021L3.55271 2.26607L21.7338 20.4488L21.0907 21.0906L20.4488 21.7338L11.6239 12.9088H8.364C7.86207 12.9088 7.45471 12.5025 7.45447 12.0006C7.45447 11.4985 7.86193 11.0911 8.364 11.0911H9.80485L7.09493 8.37979C6.26264 8.46253 5.47964 8.83254 4.88304 9.42915C4.20138 10.1111 3.81905 11.0364 3.81905 12.0006C3.81916 12.9649 4.2012 13.8902 4.88304 14.5721C5.56488 15.2539 6.49022 15.636 7.45447 15.6361H9.27352L9.45596 15.6547C9.87039 15.7394 10.1817 16.1062 10.1817 16.5456C10.1817 16.9851 9.87039 17.3519 9.45596 17.4365L9.27352 17.4552H7.45447C6.00802 17.455 4.6208 16.88 3.59799 15.8572C2.57518 14.8343 2.00012 13.4471 2 12.0006ZM16.5457 6.54608C17.5584 6.54608 18.5512 6.82743 19.4128 7.35973C20.2744 7.89228 20.9719 8.65496 21.4249 9.56099C21.8778 10.4669 22.0685 11.4819 21.9775 12.4907C21.8865 13.4992 21.517 14.4624 20.9096 15.2725L20.7844 15.4084C20.468 15.6888 19.9879 15.7185 19.6365 15.455C19.2348 15.1537 19.1541 14.5836 19.4554 14.1819L19.5992 13.9742C19.9185 13.4802 20.1148 12.9152 20.1678 12.3269C20.2285 11.6543 20.0996 10.9773 19.7976 10.3733C19.4957 9.76978 19.032 9.26202 18.458 8.90714C17.8835 8.5521 17.221 8.36381 16.5457 8.36381H14.728C14.2259 8.36381 13.8185 7.95636 13.8185 7.45428C13.8187 6.95241 14.2261 6.54608 14.728 6.54608H16.5457Z", fill: "currentColor" }) }));
-});

package/es/components/icons/MinusIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const MinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/MinusIcon.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const MinusIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M19 13H5V11H19V13Z", fill: "currentColor" }) }));
-});

package/es/components/index.scss

@@ -1,2 +0,0 @@
-@import url('./organism/index.scss');
-@import url('./molecules/index.scss');

package/es/components/molecules/EyedropperButton/EyedropperButton.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface EyedropperButtonProps {
-    onColorPick?: (color: string) => void;
-    size?: 'small' | 'middle' | 'large';
-    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
-    disabled?: boolean;
-    className?: string;
-    showIcon?: boolean;
-}
-export declare const EyedropperButton: React.FC<EyedropperButtonProps>;
-export {};

package/es/components/molecules/EyedropperButton/EyedropperButton.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { Button, Popover, Typography } from 'antd';
-import tinycolor from 'tinycolor2';
-import { useEyedropper } from '@antscorp/antsomi-ui/es/hooks';
-import { ColorizeIcon } from '../../icons';
-import { ColorSwatch, ColorText, PopoverContent } from './styled';
-const { Text } = Typography;
-export const EyedropperButton = ({ onColorPick, size = 'middle', type = 'text', disabled = false, className, showIcon = true, }) => {
-    const { isLoading, apiSupported, pickColor, copyToClipboard } = useEyedropper();
-    const [popoverVisible, setPopoverVisible] = useState(false);
-    const [currentColor, setCurrentColor] = useState(null);
-    const handlePickColor = useCallback(async () => {
-        const color = await pickColor();
-        if (color) {
-            setCurrentColor(color);
-            const copySuccess = await copyToClipboard(color);
-            if (copySuccess) {
-                setPopoverVisible(true);
-                setTimeout(() => {
-                    setPopoverVisible(false);
-                }, 2000);
-            }
-            onColorPick?.(color);
-        }
-    }, [copyToClipboard, onColorPick, pickColor]);
-    const renderPopoverContent = useCallback(() => {
-        if (!currentColor)
-            return null;
-        const isLight = tinycolor(currentColor).isLight();
-        return (_jsxs(PopoverContent, { children: [_jsx(ColorSwatch, { "$color": currentColor }), _jsxs("div", { children: [_jsx(Text, { type: "secondary", style: { fontSize: '12px' }, children: "\u0110\u00E3 copy:" }), _jsx("br", {}), _jsx(ColorText, { color: currentColor, "$isLight": isLight, children: currentColor })] })] }));
-    }, [currentColor]);
-    return (_jsx(Popover, { content: renderPopoverContent(), title: "M\u00E0u \u0111\u00E3 tr\u00EDch xu\u1EA5t", trigger: ['click'], open: popoverVisible, onOpenChange: setPopoverVisible, placement: "top", children: _jsx(Button, { type: type, size: size, icon: showIcon ? _jsx(ColorizeIcon, { size: 16 }) : undefined, onClick: handlePickColor, loading: isLoading, disabled: disabled || isLoading || !apiSupported, className: className, title: !apiSupported ? 'Trình duyệt không hỗ trợ EyeDropper API' : 'Trích xuất màu từ màn hình' }) }));
-};

package/es/components/molecules/EyedropperButton/index.js

@@ -1 +0,0 @@
-"use strict";

package/es/components/molecules/EyedropperButton/styled.d.ts

@@ -1,7 +0,0 @@
-export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-}, never>;
-export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ColorText: import("styled-components").StyledComponent<"span", any, {
-    $isLight: boolean;
-}, never>;

package/es/components/molecules/EyedropperButton/styled.js

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-export const ColorSwatch = styled.div `
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  background-color: ${props => props.$color};
-  border: 1px solid #d9d9d9;
-  flex-shrink: 0;
-`;
-export const PopoverContent = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-`;
-export const ColorText = styled.span `
-  background-color: ${props => props.color};
-  color: ${props => (props.$isLight ? '#000' : '#fff')};
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 12px;
-`;

package/es/components/molecules/FontSizeInput/FontSizeInput.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { FontSizeInputProps, HandlerRef } from './types';
-export declare const FontSizeInput: import("react").ForwardRefExoticComponent<FontSizeInputProps & import("react").RefAttributes<HandlerRef>>;

package/es/components/molecules/FontSizeInput/FontSizeInput.js

@@ -1,134 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState, useImperativeHandle, useEffect, useRef, useMemo, } from 'react';
-import clsx from 'clsx';
-import { useElementSize } from '@antscorp/antsomi-ui/es/hooks';
-import { DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE_OPTIONS } from './constants';
-import { CLS } from './utils';
-import { FontSizeDropdown } from './components/FontSizeDropdown';
-import { FontSizeControl } from './components/FontSizeControl';
-export const FontSizeInput = forwardRef((props, ref) => {
-    const { min = 1, max = 300, value: valueProp, defaultValue = DEFAULT_FONT_SIZE, options = DEFAULT_FONT_SIZE_OPTIONS, placeholder, style, className, disabled, dropdownProps, onFocus, onBlur, onChange = () => undefined, } = props;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const [popoverValue, setPopoverValue] = useState(null);
-    const [initialPopoverValue, setInitialPopoverValue] = useState(null);
-    const [inputRef, { width: inputWidth }] = useElementSize();
-    const isControlled = valueProp !== undefined;
-    const value = isControlled ? +valueProp : +uncontrolledValue;
-    const popoverItemRefs = useRef(new Map());
-    const fontSizeOptions = useMemo(() => options.map(option => ({
-        size: option,
-        label: option.toString(),
-        className: clsx(CLS.PopoverListItem, {
-            [CLS.PopoverListItemSelected]: option === (value || initialPopoverValue),
-        }),
-    })), [options, value, initialPopoverValue]);
-    useEffect(() => {
-        if (!isPopoverOpen) {
-            setPopoverValue(null);
-        }
-        if (isPopoverOpen && popoverValue) {
-            popoverItemRefs.current.get(popoverValue)?.focus();
-        }
-    }, [popoverValue, isPopoverOpen]);
-    const handleInputFocus = (event) => {
-        onFocus?.(value, event);
-        setIsPopoverOpen(true);
-        if (!popoverValue && fontSizeOptions.some(item => item.size === value)) {
-            setInitialPopoverValue(value);
-        }
-    };
-    const handleInputBlur = (event) => {
-        onBlur?.(value, event);
-        if (!popoverValue) {
-            setIsPopoverOpen(false);
-        }
-    };
-    const handleValueChange = useCallback((newValue, info) => {
-        if (!isControlled) {
-            setUncontrolledValue(newValue);
-        }
-        onChange(newValue, info);
-    }, [isControlled, onChange]);
-    const handleKeyDown = useCallback((e) => {
-        const currentSize = popoverValue ?? value;
-        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === currentSize);
-        const firstFontSize = fontSizeOptions.at(0);
-        const lastFontSize = fontSizeOptions.at(-1);
-        switch (e.key) {
-            case 'Enter': {
-                handleValueChange(uncontrolledValue, { type: 'input' });
-                inputRef.current?.blur();
-                break;
-            }
-            case 'ArrowDown': {
-                e.preventDefault();
-                if (currentFocusIndex !== -1) {
-                    // Infinite scroll: go to first item when reaching the end
-                    const nextFocusIndex = (currentFocusIndex + 1) % fontSizeOptions.length;
-                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
-                }
-                else if (firstFontSize) {
-                    setPopoverValue(firstFontSize.size);
-                }
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                if (currentFocusIndex !== -1) {
-                    // Infinite scroll: go to last item when reaching the beginning
-                    const nextFocusIndex = (currentFocusIndex - 1 + fontSizeOptions.length) % fontSizeOptions.length;
-                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
-                }
-                else if (lastFontSize) {
-                    setPopoverValue(lastFontSize.size);
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    }, [fontSizeOptions, inputRef, popoverValue, uncontrolledValue, value, handleValueChange]);
-    const handleClickPopoverItem = useCallback((size) => {
-        handleValueChange(size, { type: 'dropdown' });
-        setIsPopoverOpen(false);
-        inputRef.current?.blur();
-    }, [handleValueChange, inputRef]);
-    const handlePopoverItemKeydown = useCallback((e, size) => {
-        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === popoverValue);
-        switch (e.key) {
-            case 'Enter': {
-                handleClickPopoverItem(size);
-                break;
-            }
-            case 'ArrowDown': {
-                // Infinite scroll: go to first item when reaching the end
-                const nextFocusIndex = (currentFocusIndex + 1) % fontSizeOptions.length;
-                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
-                e.stopPropagation();
-                break;
-            }
-            case 'ArrowUp': {
-                // Infinite scroll: go to last item when reaching the beginning
-                const nextFocusIndex = (currentFocusIndex - 1 + fontSizeOptions.length) % fontSizeOptions.length;
-                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
-                e.stopPropagation();
-                break;
-            }
-            default:
-                break;
-        }
-    }, [fontSizeOptions, popoverValue, handleClickPopoverItem]);
-    useImperativeHandle(ref, () => ({
-        closeDropdown: () => setIsPopoverOpen(false),
-    }));
-    const content = (_jsx(FontSizeControl, { disabled: disabled, ref: inputRef, className: className, value: popoverValue ?? value, max: max, min: min, keyboard: false, defaultValue: defaultValue, style: style, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, onChange: newValue => {
-            if (newValue === null)
-                return;
-            setUncontrolledValue(Number(newValue));
-        }, onIncrement: () => handleValueChange(value + 1, { type: 'input' }), onDecrement: () => handleValueChange(value - 1, { type: 'input' }) }));
-    if (options.length) {
-        return (_jsx(FontSizeDropdown, { isOpen: isPopoverOpen, options: fontSizeOptions, popoverValue: popoverValue, initialPopoverValue: initialPopoverValue, width: inputWidth, itemRefs: popoverItemRefs, onItemClick: handleClickPopoverItem, onItemKeyDown: handlePopoverItemKeydown, onClose: () => setIsPopoverOpen(false), getPopupContainer: () => dropdownProps?.getPopupContainer?.() || document.body, children: content }));
-    }
-    return content;
-});

package/es/components/molecules/FontSizeInput/components/FontSizeControl.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { InputNumberProps } from 'antd';
-interface FontSizeControlProps extends InputNumberProps {
-    onIncrement: () => void;
-    onDecrement: () => void;
-}
-export declare const FontSizeControl: import("react").ForwardRefExoticComponent<FontSizeControlProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/es/components/molecules/FontSizeInput/components/FontSizeControl.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputNumber } from 'antd';
-import { forwardRef } from 'react';
-import { ControlButton, InputRoot } from '../styled';
-import { CLS } from '../utils';
-import clsx from 'clsx';
-import { AddIcon, MinusIcon } from '../../../icons';
-export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => (_jsxs(InputRoot, { children: [_jsx(ControlButton, { type: "text", onClick: onDecrement, disabled: rest.disabled ||
-                typeof rest.value !== 'number' ||
-                typeof rest.min !== 'number' ||
-                rest.value <= rest.min, children: _jsx(MinusIcon, { size: 14 }) }), _jsx(InputNumber, { ref: ref, className: clsx(CLS.Input, rest.className), parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(ControlButton, { type: "text", onClick: onIncrement, disabled: rest.disabled ||
-                typeof rest.value !== 'number' ||
-                typeof rest.max !== 'number' ||
-                rest.value >= rest.max, children: _jsx(AddIcon, { size: 14 }) })] })));

package/es/components/molecules/FontSizeInput/components/FontSizeDropdown.d.ts

@@ -1,21 +0,0 @@
-import { RefObject } from 'react';
-type FontSizeOption = {
-    size: number;
-    label: string;
-    className: string;
-};
-interface FontSizeDropdownProps {
-    children: React.ReactNode;
-    isOpen: boolean;
-    options: FontSizeOption[];
-    popoverValue: number | null;
-    initialPopoverValue?: number | null;
-    width: number;
-    itemRefs: RefObject<Map<number, HTMLLIElement>>;
-    onItemClick: (size: number) => void;
-    onItemKeyDown: (e: React.KeyboardEvent, size: number) => void;
-    onClose: () => void;
-    getPopupContainer?: () => HTMLElement;
-}
-export declare const FontSizeDropdown: ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, initialPopoverValue, }: FontSizeDropdownProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/es/components/molecules/FontSizeInput/components/FontSizeDropdown.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Popover } from 'antd';
-import { CLS } from '../utils';
-import { StyledListFont, StyledListItemFont } from '../styled';
-export const FontSizeDropdown = ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, initialPopoverValue, }) => {
-    const content = (_jsx(StyledListFont, { role: "list", className: CLS.PopoverList, style: { width: `${width}px` }, onMouseDown: e => e.preventDefault(), children: options.map((i, idx) => {
-            const isFocused = i.size === (popoverValue || initialPopoverValue);
-            return (_jsx(StyledListItemFont, { ref: el => {
-                    if (!el || !itemRefs.current)
-                        return;
-                    itemRefs.current.set(i.size, el);
-                }, role: "listitem", className: i.className, "aria-posinset": idx + 1, "aria-setsize": options.length, tabIndex: isFocused ? 0 : -1, onClick: () => onItemClick(i.size), onKeyDown: e => onItemKeyDown(e, i.size), ...(isFocused && {
-                    onBlur: onClose,
-                }), children: i.label }, i.size));
-        }) }));
-    return (_jsx(Popover, { arrow: false, open: isOpen, overlayClassName: CLS.Popover, overlayInnerStyle: {
-            borderRadius: 4,
-        }, content: content, getPopupContainer: getPopupContainer, placement: "bottom", children: children }));
-};

package/es/components/molecules/FontSizeInput/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const DEFAULT_FONT_SIZE_OPTIONS: number[];
-export declare const DEFAULT_FONT_SIZE: number;

package/es/components/molecules/FontSizeInput/constants.js

@@ -1,5 +0,0 @@
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const DEFAULT_FONT_SIZE_OPTIONS = [
-    8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72, 96,
-];
-export const DEFAULT_FONT_SIZE = THEME.token?.fontSize || 14;

package/es/components/molecules/FontSizeInput/index.d.ts

@@ -1,2 +0,0 @@
-export * from './FontSizeInput';
-export type { FontSizeInputProps, HandlerRef as FontSizeInputHandlerRef } from './types';

package/es/components/molecules/FontSizeInput/index.js

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

package/es/components/molecules/FontSizeInput/styled.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const StyledListFont: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledListItemFont: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const InputRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ControlButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;

package/es/components/molecules/FontSizeInput/styled.js

@@ -1,40 +0,0 @@
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { Button } from 'antd';
-import styled from 'styled-components';
-import { CLS } from './utils';
-export const StyledListFont = styled.ul `
-  &.${CLS.PopoverList} {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-`;
-export const StyledListItemFont = styled.li `
-  &.${CLS.PopoverListItem} {
-    padding: 6px 10px;
-    cursor: pointer;
-    text-align: center;
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &.${CLS.PopoverListItemSelected} {
-      outline: none;
-      background-color: ${THEME.components?.Menu?.itemHoverBg};
-    }
-  }
-`;
-export const InputRoot = styled.div `
-  gap: 2px;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-`;
-export const ControlButton = styled(Button) `
-  &.antsomi-btn {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    padding: 0px;
-  }
-`;

package/es/components/molecules/FontSizeInput/styles.scss

@@ -1,15 +0,0 @@
-.antsomi-font-size-input-popover {
-  &.antsomi-popover {
-    .antsomi-popover-inner {
-      padding: 0;
-
-      .antsomi-popover-inner-content {
-        overflow: auto;
-
-        > ul {
-          max-height: 240px;
-        }
-      }
-    }
-  }
-}

package/es/components/molecules/FontSizeInput/types.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-export interface HandlerRef {
-    closeDropdown: () => void;
-}
-export interface FontSizeInputProps {
-    value: number;
-    min?: number;
-    max?: number;
-    defaultValue?: number;
-    options?: number[];
-    placeholder?: string;
-    style?: React.CSSProperties;
-    className?: string;
-    disabled?: boolean;
-    onChange?: (value: number, info: {
-        type: 'input' | 'dropdown';
-    }) => void;
-    onFocus?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
-    dropdownProps?: {
-        getPopupContainer?: () => HTMLElement | null;
-    };
-}

package/es/components/molecules/FontSizeInput/types.js

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

package/es/components/molecules/FontSizeInput/utils.d.ts

@@ -1,7 +0,0 @@
-export declare const CLS: {
-    Popover: string;
-    PopoverList: string;
-    PopoverListItem: string;
-    PopoverListItemSelected: string;
-    Input: string;
-};

package/es/components/molecules/FontSizeInput/utils.js

@@ -1,9 +0,0 @@
-import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
-const componentCls = antsomiClsx('font-size-input');
-export const CLS = {
-    Popover: componentCls('popover'),
-    PopoverList: componentCls('popover-list'),
-    PopoverListItem: componentCls('popover-list-item'),
-    PopoverListItemSelected: componentCls('popover-list-item-selected'),
-    Input: componentCls('input'),
-};

package/es/components/molecules/index.scss

@@ -1 +0,0 @@
-@import url('./FontSizeInput/styles.scss');