@laser-ui/components 0.0.1

package/image/types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { CLASSES, PREVIEW_CLASSES } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface ImageProps extends BaseProps<'image', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    src: string;
+    loading?: React.ReactNode;
+    error?: React.ReactNode;
+    actions?: React.ReactElement[];
+    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
+}
+export interface ImageActionProps extends BaseProps<'image', typeof CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export interface ImagePreviewProps extends BaseProps<'image-preview', typeof PREVIEW_CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    list: React.ImgHTMLAttributes<HTMLImageElement>[];
+    visible: boolean;
+    active?: number;
+    defaultActive?: number;
+    escClosable?: boolean;
+    zIndex?: number | string;
+    onActiveChange?: (index: number) => void;
+    onClose?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/image/types.js

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

package/image/vars.d.ts

@@ -0,0 +1,26 @@
+export declare const CLASSES: {
+    image: string;
+    image__img: string;
+    image__actions: string;
+    image__action: string;
+};
+export declare const PREVIEW_CLASSES: {
+    'image-preview': string;
+    'image-preview__navigation-button': string;
+    'image-preview__navigation-button--prev': string;
+    'image-preview__navigation-button--next': string;
+    'image-preview__toolbar': string;
+    'image-preview__toolbar-page': string;
+    'image-preview__toolbar-page-input': string;
+    'image-preview__toolbar-rotate': string;
+    'image-preview__toolbar-zoom-out': string;
+    'image-preview__toolbar-zoom': string;
+    'image-preview__toolbar-zoom-input': string;
+    'image-preview__toolbar-zoom-in': string;
+    'image-preview__toolbar-close': string;
+    'image-preview__img': string;
+    'image-preview__thumbnail-list': string;
+    'image-preview__thumbnail': string;
+    'image-preview__thumbnail.is-active': string;
+    'image-preview__thumbnail-img': string;
+};

package/image/vars.js

@@ -0,0 +1,26 @@
+export const CLASSES = {
+    image: '^image',
+    image__img: '^image__img',
+    image__actions: '^image__actions',
+    image__action: '^image__action',
+};
+export const PREVIEW_CLASSES = {
+    'image-preview': '^image-preview',
+    'image-preview__navigation-button': '^image-preview__navigation-button',
+    'image-preview__navigation-button--prev': '^image-preview__navigation-button--prev',
+    'image-preview__navigation-button--next': '^image-preview__navigation-button--next',
+    'image-preview__toolbar': '^image-preview__toolbar',
+    'image-preview__toolbar-page': '^image-preview__toolbar-page',
+    'image-preview__toolbar-page-input': '^image-preview__toolbar-page-input',
+    'image-preview__toolbar-rotate': '^image-preview__toolbar-rotate',
+    'image-preview__toolbar-zoom-out': '^image-preview__toolbar-zoom-out',
+    'image-preview__toolbar-zoom': '^image-preview__toolbar-zoom',
+    'image-preview__toolbar-zoom-input': '^image-preview__toolbar-zoom-input',
+    'image-preview__toolbar-zoom-in': '^image-preview__toolbar-zoom-in',
+    'image-preview__toolbar-close': '^image-preview__toolbar-close',
+    'image-preview__img': '^image-preview__img',
+    'image-preview__thumbnail-list': '^image-preview__thumbnail-list',
+    'image-preview__thumbnail': '^image-preview__thumbnail',
+    'image-preview__thumbnail.is-active': 'is-active',
+    'image-preview__thumbnail-img': '^image-preview__thumbnail-img',
+};

package/index.d.ts

@@ -0,0 +1,52 @@
+export { Root, DialogService } from './root';
+export { ConfigProvider } from './config-provider';
+export { Accordion } from './accordion';
+export { Affix } from './affix';
+export { Alert } from './alert';
+export { Anchor } from './anchor';
+export { Avatar } from './avatar';
+export { Badge } from './badge';
+export { Breadcrumb } from './breadcrumb';
+export { Button } from './button';
+export { Card } from './card';
+export { Cascader } from './cascader';
+export { Checkbox } from './checkbox';
+export { Compose } from './compose';
+export { DatePicker } from './date-picker';
+export { Drawer } from './drawer';
+export { Dropdown } from './dropdown';
+export { Empty } from './empty';
+export { Fab } from './fab';
+export { AbstractControl, FormControl, FormGroup, Validators, Form, useForm, FormGroupContext } from './form';
+export { Icon } from './icon';
+export { Image } from './image';
+export { Input } from './input';
+export { Menu } from './menu';
+export { Modal } from './modal';
+export { Notification } from './notification';
+export { Pagination } from './pagination';
+export { Popover } from './popover';
+export { Progress } from './progress';
+export { Radio } from './radio';
+export { Rating } from './rating';
+export { Select } from './select';
+export { Separator } from './separator';
+export { Skeleton } from './skeleton';
+export { Slider } from './slider';
+export { Slides } from './slides';
+export { Spinner } from './spinner';
+export { Stepper } from './stepper';
+export { Switch } from './switch';
+export { Table } from './table';
+export { Tabs } from './tabs';
+export { Tag } from './tag';
+export { Textarea } from './textarea';
+export { TimePicker } from './time-picker';
+export { Timeline } from './timeline';
+export { Toast } from './toast';
+export { Tooltip } from './tooltip';
+export { Transfer } from './transfer';
+export { Tree } from './tree';
+export { TreeSelect } from './tree-select';
+export { Upload } from './upload';
+export { VirtualScroll } from './virtual-scroll';

package/index.js

@@ -0,0 +1,52 @@
+export { Root, DialogService } from './root';
+export { ConfigProvider } from './config-provider';
+export { Accordion } from './accordion';
+export { Affix } from './affix';
+export { Alert } from './alert';
+export { Anchor } from './anchor';
+export { Avatar } from './avatar';
+export { Badge } from './badge';
+export { Breadcrumb } from './breadcrumb';
+export { Button } from './button';
+export { Card } from './card';
+export { Cascader } from './cascader';
+export { Checkbox } from './checkbox';
+export { Compose } from './compose';
+export { DatePicker } from './date-picker';
+export { Drawer } from './drawer';
+export { Dropdown } from './dropdown';
+export { Empty } from './empty';
+export { Fab } from './fab';
+export { AbstractControl, FormControl, FormGroup, Validators, Form, useForm, FormGroupContext } from './form';
+export { Icon } from './icon';
+export { Image } from './image';
+export { Input } from './input';
+export { Menu } from './menu';
+export { Modal } from './modal';
+export { Notification } from './notification';
+export { Pagination } from './pagination';
+export { Popover } from './popover';
+export { Progress } from './progress';
+export { Radio } from './radio';
+export { Rating } from './rating';
+export { Select } from './select';
+export { Separator } from './separator';
+export { Skeleton } from './skeleton';
+export { Slider } from './slider';
+export { Slides } from './slides';
+export { Spinner } from './spinner';
+export { Stepper } from './stepper';
+export { Switch } from './switch';
+export { Table } from './table';
+export { Tabs } from './tabs';
+export { Tag } from './tag';
+export { Textarea } from './textarea';
+export { TimePicker } from './time-picker';
+export { Timeline } from './timeline';
+export { Toast } from './toast';
+export { Tooltip } from './tooltip';
+export { Transfer } from './transfer';
+export { Tree } from './tree';
+export { TreeSelect } from './tree-select';
+export { Upload } from './upload';
+export { VirtualScroll } from './virtual-scroll';

package/input/Input.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { InputProps } from './types';
+import { InputNumber } from './InputNumber';
+export declare const Input: {
+    (props: InputProps): JSX.Element | null;
+    Number: typeof InputNumber;
+};

package/input/Input.js

@@ -0,0 +1,56 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForkRef } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as VisibilityOutlined } from '@material-design-icons/svg/outlined/visibility.svg';
+import { ReactComponent as VisibilityOffOutlined } from '@material-design-icons/svg/outlined/visibility_off.svg';
+import { useRef } from 'react';
+import { InputNumber } from './InputNumber';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export const Input = (props) => {
+    const _a = useComponentProps('Input', props), { styleOverrides, styleProvider, formControl, model, defaultModel, type, prefix, suffix, password: passwordProp, defaultPassword, clearable, placeholder, size: sizeProp, disabled: disabledProp = false, inputRef: inputRefProp, inputRender, onModelChange, onClear, onPasswordChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "type", "prefix", "suffix", "password", "defaultPassword", "clearable", "placeholder", "size", "disabled", "inputRef", "inputRender", "onModelChange", "onClear", "onPasswordChange"]);
+    const styled = useStyled(CLASSES, { input: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.input }, styleOverrides);
+    const { t } = useTranslation();
+    const inputRef = useRef(null);
+    const combineInputRef = useForkRef(inputRef, inputRefProp);
+    const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : '', model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const [password, changePassword] = useControlled(defaultPassword !== null && defaultPassword !== void 0 ? defaultPassword : true, passwordProp, onPasswordChange);
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const preventBlur = (e) => {
+        if (document.activeElement === inputRef.current && e.target !== inputRef.current && e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const designProps = useDesign({ compose: { disabled }, form: formControl });
+    const inputNode = (_jsx("input", Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onChange: (e) => {
+            changeValue(e.currentTarget.value);
+        } })));
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {
+        'input.is-disabled': disabled,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), designProps, { onMouseDown: (e) => {
+            var _a;
+            (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            preventBlur(e);
+        }, onMouseUp: (e) => {
+            var _a;
+            (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            preventBlur(e);
+        }, onClick: (e) => {
+            var _a, _b;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+        }, children: [checkNodeExist(prefix) && _jsx("div", Object.assign({}, styled('input__prefix'), { children: prefix })), inputRender ? inputRender(inputNode) : inputNode, clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: value.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
+                    changeValue('');
+                    onClear === null || onClear === void 0 ? void 0 : onClear();
+                }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), type === 'password' && !disabled && (_jsx("div", Object.assign({}, styled('input__password'), { role: "button", "aria-label": t('Input', password ? 'Password is not visible' : 'Password is visible'), onClick: () => {
+                    changePassword((prevPassword) => !prevPassword);
+                }, children: password ? (_jsx(Icon, { children: _jsx(VisibilityOffOutlined, {}) })) : (_jsx(Icon, { children: _jsx(VisibilityOutlined, {}) })) }))), checkNodeExist(suffix) && _jsx("div", Object.assign({}, styled('input__suffix'), { children: suffix }))] })));
+};
+Input.Number = InputNumber;

package/input/InputNumber.d.ts

@@ -0,0 +1,2 @@
+import type { InputNumberProps } from './types';
+export declare function InputNumber(props: InputNumberProps): import("react/jsx-runtime").JSX.Element;

package/input/InputNumber.js

@@ -0,0 +1,142 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAsync, useEvent, useForceUpdate, useForkRef, useRefExtra } from '@laser-ui/hooks';
+import { checkNodeExist } from '@laser-ui/utils';
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import { ReactComponent as KeyboardArrowUpOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg';
+import { isNull, isUndefined } from 'lodash';
+import { useRef } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export function InputNumber(props) {
+    const _a = useComponentProps('InputNumber', props), { styleOverrides, styleProvider, formControl, model, defaultModel, max, min, step = 1, integer = false, prefix, suffix, clearable, placeholder, size: sizeProp, numberButton = true, disabled: disabledProp = false, inputRef: inputRefProp, inputRender, onModelChange, onClear } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "max", "min", "step", "integer", "prefix", "suffix", "clearable", "placeholder", "size", "numberButton", "disabled", "inputRef", "inputRender", "onModelChange", "onClear"]);
+    const styled = useStyled(CLASSES, { input: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.input }, styleOverrides);
+    const async = useAsync();
+    const { t } = useTranslation();
+    const forceUpdate = useForceUpdate();
+    const dataRef = useRef({
+        inputFocused: false,
+    });
+    const inputRef = useRef(null);
+    const combineInputRef = useForkRef(inputRef, inputRefProp);
+    const windowRef = useRefExtra(() => window);
+    const [value, _changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : null, model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const inputValue = dataRef.current.inputFocused && !isUndefined(dataRef.current.inputValue)
+        ? dataRef.current.inputValue
+        : isNull(value)
+            ? ''
+            : value.toString();
+    const changeValue = (val) => {
+        if ((isNull(val) ? '' : val.toString()) !== inputValue) {
+            forceUpdate();
+        }
+        dataRef.current.inputValue = undefined;
+        _changeValue(val);
+    };
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    const getValue = (val) => { var _a, _b; return Number(Math.max(min !== null && min !== void 0 ? min : -Infinity, Math.min(max !== null && max !== void 0 ? max : Infinity, val)).toFixed((_b = (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)); };
+    const handleNumberButtonMouseDown = (increase = true) => {
+        changeValue(getValue((() => {
+            let val = inputValue.length > 0 ? Number(inputValue) : null;
+            if (isNull(val)) {
+                return 0;
+            }
+            if (integer && !Number.isInteger(val)) {
+                val = Math.round(val);
+            }
+            return increase ? val + step : val - step;
+        })()));
+        const loop = (prev) => {
+            const val = getValue(increase ? prev + step : prev - step);
+            changeValue(val);
+            dataRef.current.clearLoop = async.setTimeout(() => loop(val), 50);
+        };
+        dataRef.current.clearTid = async.setTimeout(() => loop(Number(inputValue)), 400);
+    };
+    const handleNumberButtonMouseUp = () => {
+        var _a, _b, _c, _d;
+        (_b = (_a = dataRef.current).clearLoop) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
+    };
+    useEvent(windowRef, 'mouseup', handleNumberButtonMouseUp);
+    const preventBlur = (e) => {
+        if (document.activeElement === inputRef.current && e.target !== inputRef.current && e.button === 0) {
+            e.preventDefault();
+        }
+    };
+    const designProps = useDesign({ compose: { disabled }, form: formControl });
+    const inputNode = (_jsx("input", Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+            forceUpdate();
+            dataRef.current.inputValue = e.currentTarget.value;
+            if (e.currentTarget.value.length === 0) {
+                changeValue(null);
+            }
+            else {
+                const val = Number(e.currentTarget.value);
+                if ((isUndefined(max) || val <= max) && (isUndefined(min) || val >= min) && (!integer || Number.isInteger(val))) {
+                    changeValue(val);
+                }
+            }
+        }, onFocus: () => {
+            dataRef.current.inputFocused = true;
+            dataRef.current.inputValue = undefined;
+        }, onBlur: () => {
+            dataRef.current.inputFocused = false;
+            if (inputValue.length === 0) {
+                changeValue(null);
+            }
+            else {
+                let val = Number(inputValue);
+                if (!isUndefined(max) && val > max) {
+                    val = max;
+                }
+                if (!isUndefined(min) && val < min) {
+                    val = min;
+                }
+                if (integer && !Number.isInteger(val)) {
+                    val = Math.round(val);
+                }
+                changeValue(val);
+            }
+        } })));
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {
+        'input.is-disabled': disabled,
+    }), {
+        className: restProps.className,
+        style: Object.assign(Object.assign({}, restProps.style), { paddingRight: numberButton && !disabled && !checkNodeExist(suffix) ? 0 : undefined }),
+    }), designProps, { onMouseDown: (e) => {
+            var _a;
+            (_a = restProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            preventBlur(e);
+        }, onMouseUp: (e) => {
+            var _a;
+            (_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            preventBlur(e);
+        }, onClick: (e) => {
+            var _a, _b;
+            (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+        }, children: [checkNodeExist(prefix) && _jsx("div", Object.assign({}, styled('input__prefix'), { children: prefix })), inputRender ? inputRender(inputNode) : inputNode, clearable && !disabled && (_jsx("div", Object.assign({}, mergeCS(styled('input__clear'), { style: { opacity: inputValue.length > 0 ? 1 : 0 } }), { role: "button", "aria-label": t('Clear'), onClick: () => {
+                    changeValue(null);
+                    onClear === null || onClear === void 0 ? void 0 : onClear();
+                }, children: _jsx(Icon, { children: _jsx(CancelFilled, {}) }) }))), numberButton && !disabled && (_jsxs("div", Object.assign({}, styled('input__number-container'), { children: [_jsx("div", Object.assign({}, styled('input__number'), { role: "button", "aria-label": t('Input', 'Increase number'), onMouseDown: (e) => {
+                            if (e.button === 0) {
+                                handleNumberButtonMouseDown();
+                            }
+                        }, onTouchStart: () => {
+                            handleNumberButtonMouseDown();
+                        }, onTouchEnd: () => {
+                            handleNumberButtonMouseUp();
+                        }, children: _jsx(Icon, { children: _jsx(KeyboardArrowUpOutlined, {}) }) })), _jsx("div", Object.assign({}, styled('input__number'), { role: "button", "aria-label": t('Input', 'Decrease number'), onMouseDown: (e) => {
+                            if (e.button === 0) {
+                                handleNumberButtonMouseDown(false);
+                            }
+                        }, onTouchStart: () => {
+                            handleNumberButtonMouseDown(false);
+                        }, onTouchEnd: () => {
+                            handleNumberButtonMouseUp();
+                        }, children: _jsx(Icon, { children: _jsx(KeyboardArrowDownOutlined, {}) }) }))] }))), checkNodeExist(suffix) && _jsx("div", Object.assign({}, styled('input__suffix'), { children: suffix }))] })));
+}

package/input/index.d.ts

@@ -0,0 +1,2 @@
+export type { InputProps, InputNumberProps } from './types';
+export { Input } from './Input';

package/input/index.js

@@ -0,0 +1 @@
+export { Input } from './Input';

package/input/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, CloneHTMLElement, Size } from '../types';
+export {};
+export interface InputProps extends BaseProps<'input', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'prefix'> {
+    formControl?: FormControlProvider;
+    model?: string;
+    defaultModel?: string;
+    type?: React.HTMLInputTypeAttribute;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    password?: boolean;
+    defaultPassword?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    size?: Size;
+    disabled?: boolean;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    inputRender?: CloneHTMLElement;
+    onModelChange?: (value: string) => void;
+    onClear?: () => void;
+    onPasswordChange?: (value: boolean) => void;
+}
+export interface InputNumberProps extends BaseProps<'input', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'prefix'> {
+    formControl?: FormControlProvider;
+    model?: number | null;
+    defaultModel?: number | null;
+    max?: number;
+    min?: number;
+    step?: number;
+    integer?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    clearable?: boolean;
+    placeholder?: string;
+    size?: Size;
+    numberButton?: boolean;
+    disabled?: boolean;
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    inputRender?: CloneHTMLElement;
+    onModelChange?: (value: number | null) => void;
+    onClear?: () => void;
+}

package/input/types.js

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

package/input/vars.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    input: string;
+    'input.is-disabled': string;
+    'input--small': string;
+    'input--medium': string;
+    'input--large': string;
+    input__prefix: string;
+    input__input: string;
+    input__clear: string;
+    input__password: string;
+    input__suffix: string;
+    'input__number-container': string;
+    input__number: string;
+};

package/input/vars.js

@@ -0,0 +1,14 @@
+export const CLASSES = {
+    input: '^input',
+    'input.is-disabled': 'is-disabled',
+    'input--small': '^input--small',
+    'input--medium': '^input--medium',
+    'input--large': '^input--large',
+    input__prefix: '^input__prefix',
+    input__input: '^input__input',
+    input__clear: '^input__clear',
+    input__password: '^input__password',
+    input__suffix: '^input__suffix',
+    'input__number-container': '^input__number-container',
+    input__number: '^input__number',
+};

package/internal/circular-progress/CircularProgress.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CircularProgress(props: React.SVGProps<SVGSVGElement>): JSX.Element | null;

package/internal/circular-progress/CircularProgress.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useStyled } from '../../hooks';
+import { mergeCS } from '../../utils';
+export function CircularProgress(props) {
+    const styled = useStyled(CLASSES, { 'circular-progress': undefined });
+    return (_jsx("svg", Object.assign({}, props, mergeCS(styled('circular-progress'), {
+        className: props.className,
+        style: props.style,
+    }), { viewBox: "22 22 44 44", children: _jsx("circle", Object.assign({}, styled('circular-progress__circle'), { cx: 44, cy: 44, r: 18.337, strokeWidth: 3.6, fill: "none" })) })));
+}

package/internal/circular-progress/index.d.ts

@@ -0,0 +1 @@
+export { CircularProgress } from './CircularProgress';

package/internal/circular-progress/index.js

@@ -0,0 +1 @@
+export { CircularProgress } from './CircularProgress';

package/internal/circular-progress/vars.d.ts

@@ -0,0 +1,4 @@
+export declare const CLASSES: {
+    'circular-progress': string;
+    'circular-progress__circle': string;
+};

package/internal/circular-progress/vars.js

@@ -0,0 +1,4 @@
+export const CLASSES = {
+    'circular-progress': '^circular-progress',
+    'circular-progress__circle': '^circular-progress__circle',
+};

package/internal/mask/Mask.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MaskProps } from './types';
+export declare function Mask(props: MaskProps): JSX.Element | null;

package/internal/mask/Mask.js

@@ -0,0 +1,36 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useStyled } from '../../hooks';
+import { mergeCS } from '../../utils';
+import { TTANSITION_DURING_FAST } from '../../vars';
+import { Transition } from '../transition';
+export function Mask(props) {
+    const { visible, onClose, afterVisibleChange } = props, restProps = __rest(props, ["visible", "onClose", "afterVisibleChange"]);
+    const styled = useStyled(CLASSES, { mask: undefined });
+    const transitionStyles = {
+        enter: { opacity: 0 },
+        entering: {
+            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
+        },
+        leaving: {
+            opacity: 0,
+            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_FAST}ms linear`).join(', '),
+        },
+        leaved: { display: 'none' },
+    };
+    return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_FAST, 
+        // TODO: Should it be controllable?
+        skipFirstTransition: false, afterEnter: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(true);
+        }, afterLeave: () => {
+            afterVisibleChange === null || afterVisibleChange === void 0 ? void 0 : afterVisibleChange(false);
+        }, children: (state) => (_jsx("div", Object.assign({}, restProps, mergeCS(styled('mask'), {
+            className: restProps.className,
+            style: Object.assign(Object.assign({}, restProps.style), transitionStyles[state]),
+        }), { onClick: (e) => {
+                var _a;
+                (_a = restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            } }))) }));
+}

package/internal/mask/index.d.ts

@@ -0,0 +1,2 @@
+export type { MaskProps } from './types';
+export { Mask } from './Mask';

package/internal/mask/index.js

@@ -0,0 +1 @@
+export { Mask } from './Mask';

package/internal/mask/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export {};
+export interface MaskProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    visible: boolean;
+    onClose?: () => void;
+    afterVisibleChange?: (visible: boolean) => void;
+}

package/internal/mask/types.js

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

package/internal/mask/vars.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    mask: string;
+};

package/internal/mask/vars.js

@@ -0,0 +1,3 @@
+export const CLASSES = {
+    mask: '^mask',
+};

package/internal/popup/Popup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { PopupProps } from './types';
+export declare function Popup(props: PopupProps): JSX.Element | null;