@laser-ui/components 0.0.1

package/empty/Empty.d.ts

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

package/empty/Empty.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkNodeExist } from '@laser-ui/utils';
+import { isUndefined } from 'lodash';
+import { CLASSES, SIMPLE_IMG } from './vars';
+import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+export const Empty = (props) => {
+    const _a = useComponentProps('Empty', props), { children, styleOverrides, styleProvider, image, description } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "image", "description"]);
+    const styled = useStyled(CLASSES, { empty: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.empty }, styleOverrides);
+    const { t } = useTranslation();
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('empty'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: [(isUndefined(image) || image === SIMPLE_IMG || checkNodeExist(image)) && (_jsx("div", Object.assign({}, styled('empty__img'), { children: isUndefined(image) ? (_jsx(Icon, { size: [115, 95], children: _jsx("svg", { viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsxs("g", { transform: "translate(24 31.67)", children: [_jsx("ellipse", { fillOpacity: ".8", fill: "#F5F5F7", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668" }), _jsx("path", { d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z", fill: "#AEB8C2" }), _jsx("path", { d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z", fill: "url(#linearGradient-1)", transform: "translate(13.56)" }), _jsx("path", { d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z", fill: "#F5F5F7" }), _jsx("path", { d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z", fill: "#DCE0E6" })] }), _jsx("path", { d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z", fill: "#DCE0E6" }), _jsxs("g", { transform: "translate(149.65 15.383)", fill: "#FFF", children: [_jsx("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }), _jsx("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" })] })] }) }) })) : image === SIMPLE_IMG ? (_jsx(Icon, { size: [64, 41], children: _jsx("svg", { viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [_jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), _jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [_jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), _jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }) })) : (image) }))), (isUndefined(description) || checkNodeExist(description)) && (_jsx("div", Object.assign({}, styled('empty__description'), { children: isUndefined(description) ? t('No Data') : description }))), checkNodeExist(children) && _jsx("div", Object.assign({}, styled('empty__footer'), { children: children }))] })));
+};
+Empty.SIMPLE_IMG = SIMPLE_IMG;

package/empty/index.d.ts

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

package/empty/index.js

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

package/empty/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CLASSES, SIMPLE_IMG } from './vars';
+import type { BaseProps } from '../types';
+export {};
+export interface EmptyProps extends BaseProps<'empty', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    image?: React.ReactNode | typeof SIMPLE_IMG;
+    description?: React.ReactNode;
+}

package/empty/types.js

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

package/empty/vars.d.ts

@@ -0,0 +1,7 @@
+export declare const CLASSES: {
+    empty: string;
+    empty__img: string;
+    empty__description: string;
+    empty__footer: string;
+};
+export declare const SIMPLE_IMG: unique symbol;

package/empty/vars.js

@@ -0,0 +1,7 @@
+export const CLASSES = {
+    empty: '^empty',
+    empty__img: '^empty__img',
+    empty__description: '^empty__description',
+    empty__footer: '^empty__footer',
+};
+export const SIMPLE_IMG = Symbol();

package/fab/Fab.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FabProps } from './types';
+import { FabBacktop } from './FabBacktop';
+import { FabButton } from './FabButton';
+export declare const Fab: {
+    (props: FabProps): JSX.Element | null;
+    Button: typeof FabButton;
+    Backtop: typeof FabBacktop;
+};

package/fab/Fab.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { FabBacktop } from './FabBacktop';
+import { FabButton } from './FabButton';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const Fab = (props) => {
+    const _a = useComponentProps('Fab', props), { children, styleOverrides, styleProvider, expand: expandProp, defaultExpand, list, onExpandChange } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "expand", "defaultExpand", "list", "onExpandChange"]);
+    const styled = useStyled(CLASSES, { fab: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.fab }, styleOverrides);
+    const [expand, changeExpand] = useControlled(defaultExpand !== null && defaultExpand !== void 0 ? defaultExpand : false, expandProp, onExpandChange);
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('fab'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: [cloneElement(children, Object.assign({ _expand: expand }, { onClick: (e) => {
+                    var _a, _b;
+                    (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    if (list) {
+                        changeExpand((draft) => !draft);
+                    }
+                } })), expand &&
+                list &&
+                list.map(({ placement, actions }, key) => (_jsx("div", Object.assign({}, styled('fab__actions', `fab__actions--${placement}`), { children: Children.map(actions, (action, index) => cloneElement(action, Object.assign({ _action: true }, { style: Object.assign(Object.assign({}, action.props.style), { animationDelay: `${index * 33}ms` }), onClick: (e) => {
+                            var _a, _b;
+                            (_b = (_a = action.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                            changeExpand(false);
+                        } }))) }), key)))] })));
+};
+Fab.Button = FabButton;
+Fab.Backtop = FabBacktop;

package/fab/FabBacktop.d.ts

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

package/fab/FabBacktop.js

@@ -0,0 +1,58 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEvent, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
+import { scrollTo, toPx } from '@laser-ui/utils';
+import { ReactComponent as VerticalAlignTopOutlined } from '@material-design-icons/svg/outlined/vertical_align_top.svg';
+import { isString } from 'lodash';
+import { cloneElement, useRef, useState } from 'react';
+import { FabButton } from './FabButton';
+import { useComponentProps, useLayout, useListenGlobalScrolling } from '../hooks';
+import { Icon } from '../icon';
+import { Transition } from '../internal/transition';
+import { TTANSITION_DURING_BASE } from '../vars';
+export function FabBacktop(props) {
+    const _a = useComponentProps('FabBacktop', props), { children, page, distance: distanceProp = 400, scrollBehavior = 'instant' } = _a, restProps = __rest(_a, ["children", "page", "distance", "scrollBehavior"]);
+    const { pageScrollRef, contentResizeRef } = useLayout();
+    const pageRef = useRefExtra(page !== null && page !== void 0 ? page : (() => pageScrollRef.current));
+    const dataRef = useRef({});
+    const [visible, setVisible] = useState(false);
+    const transitionStyles = {
+        enter: { opacity: 0 },
+        entering: {
+            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
+        },
+        leaving: {
+            opacity: 0,
+            transition: ['opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms linear`).join(', '),
+        },
+        leaved: { display: 'none' },
+    };
+    const updateBackTop = () => {
+        if (pageRef.current) {
+            const distance = isString(distanceProp) ? toPx(distanceProp, true) : distanceProp;
+            setVisible(Math.ceil(pageRef.current.scrollTop) >= distance);
+        }
+    };
+    useIsomorphicLayoutEffect(() => {
+        updateBackTop();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const listenGlobalScrolling = useListenGlobalScrolling(updateBackTop);
+    useEvent(pageRef, 'scroll', updateBackTop, { passive: true }, listenGlobalScrolling);
+    useResize(contentResizeRef, updateBackTop);
+    const node = (_jsx(FabButton, Object.assign({}, restProps, { children: children !== null && children !== void 0 ? children : (_jsx(Icon, { children: _jsx(VerticalAlignTopOutlined, {}) })) })));
+    return (_jsx(Transition, { enter: visible, during: TTANSITION_DURING_BASE, children: (state) => cloneElement(node, {
+            style: Object.assign(Object.assign({}, node.props.style), transitionStyles[state]),
+            onClick: (e) => {
+                var _a, _b, _c, _d;
+                (_b = (_a = node.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                if (pageRef.current) {
+                    (_d = (_c = dataRef.current).clearTid) === null || _d === void 0 ? void 0 : _d.call(_c);
+                    dataRef.current.clearTid = scrollTo(pageRef.current, {
+                        top: 0,
+                        behavior: scrollBehavior,
+                    });
+                }
+            },
+        }) }));
+}

package/fab/FabButton.d.ts

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

package/fab/FabButton.js

@@ -0,0 +1,23 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import { forwardRef } from 'react';
+import { BUTTON_CLASSES } from './vars';
+import { useComponentProps, useStyled } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { mergeCS } from '../utils';
+export const FabButton = forwardRef((props, ref) => {
+    var _a;
+    const _b = useComponentProps('FabButton', props), { children, styleOverrides, styleProvider, pattern = 'primary', theme = 'primary', loading = false, shape, _expand = false, _action = false } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "pattern", "theme", "loading", "shape", "_expand", "_action"]);
+    const styled = useStyled(BUTTON_CLASSES, { 'fab-button': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['fab-button'] }, styleOverrides);
+    return (_jsxs("button", Object.assign({}, restProps, mergeCS(styled('fab-button', `fab-button.t-${theme}`, `fab-button--${pattern}`, {
+        'fab-button.is-expand': _expand,
+        'fab-button.is-loading': loading,
+        'fab-button--in-actions': _action,
+        [`fab-button--${shape}`]: shape,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: ref, type: (_a = restProps.type) !== null && _a !== void 0 ? _a : 'button', children: [_jsx(Icon, Object.assign({}, styled('fab-button__icon'), { children: _jsx(AddOutlined, {}) })), _jsx("div", Object.assign({}, styled('fab-button__content'), { children: loading ? (_jsx(Icon, { children: _jsx(CircularProgress, {}) })) : (children) }))] })));
+});

package/fab/index.d.ts

@@ -0,0 +1,2 @@
+export type { FabProps, FabButtonProps, FabBacktopProps } from './types';
+export { Fab } from './Fab';

package/fab/index.js

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

package/fab/types.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { BUTTON_CLASSES, CLASSES } from './vars';
+import type { BaseProps } from '../types';
+import type { RefExtra } from '@laser-ui/hooks/useRefExtra';
+export {};
+export interface FabProps extends BaseProps<'fab', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: React.ReactElement;
+    expand?: boolean;
+    defaultExpand?: boolean;
+    list: {
+        placement: 'top' | 'right' | 'bottom' | 'left';
+        actions: React.ReactElement[];
+    }[];
+    onExpandChange?: (expand: boolean) => void;
+}
+export interface FabButtonProps extends BaseProps<'fab-button', typeof BUTTON_CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    pattern?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text' | 'link';
+    theme?: 'primary' | 'success' | 'warning' | 'danger';
+    loading?: boolean;
+    shape?: 'circle' | 'round';
+}
+export interface FabBacktopProps extends FabButtonProps {
+    page?: RefExtra;
+    distance?: number | string;
+    scrollBehavior?: 'instant' | 'smooth';
+}

package/fab/types.js

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

package/fab/vars.d.ts

@@ -0,0 +1,28 @@
+export declare const CLASSES: {
+    fab: string;
+    fab__actions: string;
+    'fab__actions--top': string;
+    'fab__actions--right': string;
+    'fab__actions--bottom': string;
+    'fab__actions--left': string;
+};
+export declare const BUTTON_CLASSES: {
+    'fab-button': string;
+    'fab-button.t-primary': string;
+    'fab-button.t-success': string;
+    'fab-button.t-warning': string;
+    'fab-button.t-danger': string;
+    'fab-button.is-expand': string;
+    'fab-button.is-loading': string;
+    'fab-button--in-actions': string;
+    'fab-button--primary': string;
+    'fab-button--secondary': string;
+    'fab-button--outline': string;
+    'fab-button--dashed': string;
+    'fab-button--text': string;
+    'fab-button--link': string;
+    'fab-button--circle': string;
+    'fab-button--round': string;
+    'fab-button__icon': string;
+    'fab-button__content': string;
+};

package/fab/vars.js

@@ -0,0 +1,28 @@
+export const CLASSES = {
+    fab: '^fab',
+    fab__actions: '^fab__actions',
+    'fab__actions--top': '^fab__actions--top',
+    'fab__actions--right': '^fab__actions--right',
+    'fab__actions--bottom': '^fab__actions--bottom',
+    'fab__actions--left': '^fab__actions--left',
+};
+export const BUTTON_CLASSES = {
+    'fab-button': '^fab-button',
+    'fab-button.t-primary': 't-primary',
+    'fab-button.t-success': 't-success',
+    'fab-button.t-warning': 't-warning',
+    'fab-button.t-danger': 't-danger',
+    'fab-button.is-expand': 'is-expand',
+    'fab-button.is-loading': 'is-loading',
+    'fab-button--in-actions': '^fab-button--in-actions',
+    'fab-button--primary': '^fab-button--primary',
+    'fab-button--secondary': '^fab-button--secondary',
+    'fab-button--outline': '^fab-button--outline',
+    'fab-button--dashed': '^fab-button--dashed',
+    'fab-button--text': '^fab-button--text',
+    'fab-button--link': '^fab-button--link',
+    'fab-button--circle': '^fab-button--circle',
+    'fab-button--round': '^fab-button--round',
+    'fab-button__icon': '^fab-button__icon',
+    'fab-button__content': '^fab-button__content',
+};

package/form/Form.d.ts

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

package/form/Form.js

@@ -0,0 +1,34 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { FormItem } from './FormItem';
+import { CLASSES, FormContext } from './vars';
+import { ConfigProvider } from '../config-provider';
+import { useComponentProps, useScopedProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const Form = (props) => {
+    const _a = useComponentProps('Form', props), { children, styleOverrides, styleProvider, vertical = false, labelWidth, labelColon, requiredType = 'required', feedbackIcon = false, size: sizeProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "vertical", "labelWidth", "labelColon", "requiredType", "feedbackIcon", "size"]);
+    const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
+    const formRef = useRef(null);
+    const { size } = useScopedProps({ size: sizeProp });
+    useEffect(() => {
+        if (formRef.current) {
+            let maxWidth = 0;
+            formRef.current.querySelectorAll('[data-l-form-label]').forEach((el) => {
+                maxWidth = Math.max(el.offsetWidth, maxWidth);
+            });
+            formRef.current.style.setProperty('--label-width', `${maxWidth}px`);
+        }
+    });
+    return (_jsx("form", Object.assign({}, restProps, mergeCS(styled('form', `form--${size}`), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: formRef, children: _jsx(ConfigProvider, { context: { componentSize: size }, children: _jsx(FormContext.Provider, { value: {
+                    vertical,
+                    labelWidth: labelWidth !== null && labelWidth !== void 0 ? labelWidth : (vertical ? undefined : 'auto'),
+                    labelColon: labelColon !== null && labelColon !== void 0 ? labelColon : !vertical,
+                    requiredType,
+                    feedbackIcon,
+                }, children: _jsx("div", Object.assign({}, styled('form__row'), { children: children })) }) }) })));
+};
+Form.Item = FormItem;

package/form/FormItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { FormErrors, FormItemProps } from './types';
+export declare function FormItem<T extends {
+    [index: string]: FormErrors;
+}>(props: FormItemProps<T>): JSX.Element | null;

package/form/FormItem.js

@@ -0,0 +1,201 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
+import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
+import { ReactComponent as ErrorFilled } from '@material-design-icons/svg/filled/error.svg';
+import { ReactComponent as HelpOutlineOutlined } from '@material-design-icons/svg/outlined/help_outline.svg';
+import { isBoolean, isFunction, isNull, isNumber, isString } from 'lodash';
+import { useContext, useId, useRef } from 'react';
+import { FormError } from './internal/FormError';
+import { Validators } from './model/validators';
+import { CLASSES, FormContext, FormGroupContext } from './vars';
+import { useComponentProps, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { CircularProgress } from '../internal/circular-progress';
+import { Tooltip } from '../tooltip';
+import { mergeCS } from '../utils';
+const ValidateState = {
+    Empty: 0,
+    Success: 1,
+    Warning: 2,
+    Error: 3,
+    Pending: 4,
+};
+export function FormItem(props) {
+    const _a = useComponentProps('FormItem', props), { children, styleOverrides, styleProvider, formControls, label, labelWidth: labelWidthProp, labelExtra: labelExtraProp, labelFor, required: requiredProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "formControls", "label", "labelWidth", "labelExtra", "labelFor", "required"]);
+    const styled = useStyled(CLASSES, { form: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.form }, styleOverrides);
+    const { t } = useTranslation();
+    const formContext = useContext(FormContext);
+    const formGroupContext = useContext(FormGroupContext);
+    const divRef = useRef(null);
+    const uniqueId = useId();
+    const getErrorId = (controlName) => `${controlName}-error-${uniqueId}`;
+    const labelWidth = labelWidthProp !== null && labelWidthProp !== void 0 ? labelWidthProp : formContext.labelWidth;
+    const formControlProviders = (() => {
+        const obj = {};
+        Object.keys(formControls !== null && formControls !== void 0 ? formControls : {}).forEach((controlName) => {
+            const formControl = formGroupContext.get(controlName);
+            if (isNull(formControl)) {
+                throw new Error(`Cant find '${controlName}', please check if name exists!`);
+            }
+            obj[controlName] = {
+                control: formControl,
+                invalid: false,
+                inputAria: {
+                    'aria-invalid': formControl.enabled && formControl.dirty && formControl.invalid,
+                },
+            };
+        });
+        return obj;
+    })();
+    const required = (() => {
+        if (isBoolean(requiredProp)) {
+            return requiredProp;
+        }
+        for (const { control } of Object.values(formControlProviders)) {
+            if (control.hasValidator(Validators.required)) {
+                return true;
+            }
+        }
+        return false;
+    })();
+    const errorsRef = useRef([]);
+    const validateState = (() => {
+        const errors = [];
+        let validateState = ValidateState.Empty;
+        Object.entries(formControls !== null && formControls !== void 0 ? formControls : {}).forEach(([controlName, formErrors]) => {
+            const { control } = formControlProviders[controlName];
+            let isPending = false;
+            if (control.enabled && control.dirty) {
+                switch (control.status) {
+                    case 'PENDING': {
+                        isPending = true;
+                        validateState = ValidateState.Pending;
+                        break;
+                    }
+                    case 'INVALID': {
+                        formControlProviders[controlName].invalid = 'warning';
+                        if (validateState < ValidateState.Warning) {
+                            validateState = ValidateState.Warning;
+                        }
+                        break;
+                    }
+                    case 'VALID': {
+                        if (validateState < ValidateState.Success) {
+                            validateState = ValidateState.Success;
+                        }
+                        break;
+                    }
+                    default:
+                        break;
+                }
+                let hasError = false;
+                if (control.invalid && control.errors) {
+                    if (isString(formErrors)) {
+                        errors.push({ key: controlName, controlName, message: formErrors, invalid: 'error' });
+                        hasError = true;
+                    }
+                    else if (Object.keys(formErrors).length === 2 && 'message' in formErrors && 'invalid' in formErrors) {
+                        errors.push(Object.assign({ key: controlName, controlName }, formErrors));
+                        if (formErrors.invalid === 'error') {
+                            hasError = true;
+                        }
+                    }
+                    else if (control.errors) {
+                        for (const key of Object.keys(control.errors)) {
+                            if (key in formErrors) {
+                                if (isString(formErrors[key])) {
+                                    errors.push({ key: `${controlName}-${key}`, controlName, message: formErrors[key], invalid: 'error' });
+                                    hasError = true;
+                                }
+                                else {
+                                    errors.push(Object.assign({ key: `${controlName}-${key}`, controlName }, formErrors[key]));
+                                    if (formErrors[key].invalid === 'error') {
+                                        hasError = true;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                if (hasError) {
+                    if (!isPending) {
+                        formControlProviders[controlName].invalid = 'error';
+                    }
+                    if (validateState !== ValidateState.Pending) {
+                        validateState = ValidateState.Error;
+                    }
+                }
+            }
+        });
+        const newErrors = [];
+        errorsRef.current.forEach((err) => {
+            const index = errors.findIndex((e) => e.key === err.key);
+            newErrors.push(Object.assign(err, { hidden: index === -1 }));
+            if (index !== -1) {
+                errors.splice(index, 1);
+            }
+        });
+        errorsRef.current = newErrors.concat(errors);
+        return validateState;
+    })();
+    const labelExtra = (() => {
+        var _a;
+        if (labelExtraProp) {
+            return isString(labelExtraProp) ? (_jsx(Tooltip, { title: labelExtraProp, children: _jsx(Icon, { children: _jsx(HelpOutlineOutlined, {}) }) })) : (_jsx(Tooltip, { title: labelExtraProp.title, children: (_a = labelExtraProp.icon) !== null && _a !== void 0 ? _a : (_jsx(Icon, { children: _jsx(HelpOutlineOutlined, {}) })) }));
+        }
+    })();
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('form__item'), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: divRef, children: _jsxs("div", Object.assign({}, styled('form__item-container'), { children: [labelWidth !== 0 && (_jsx("div", Object.assign({}, mergeCS(styled('form__item-label-wrapper'), {
+                    style: { width: formContext.vertical ? '100%' : labelWidth === 'auto' ? 'var(--label-width)' : labelWidth },
+                }), { children: label && (_jsxs("label", Object.assign({}, styled('form__item-label', {
+                        'form__item-label--auto': !formContext.vertical && labelWidth === 'auto',
+                        'form__item-label--required': formContext.requiredType === 'required' && required,
+                        'form__item-label--colon': formContext.labelColon,
+                    }), { htmlFor: labelFor, "data-l-form-label": true, children: [label, (labelExtra || (formContext.requiredType === 'optional' && !required)) && (_jsxs("div", Object.assign({}, styled('form__item-label-extra'), { children: [formContext.requiredType === 'optional' && !required && _jsx("span", { children: t('Form', 'Optional') }), labelExtra] })))] }))) }))), _jsxs("div", Object.assign({}, mergeCS(styled('form__item-content'), {
+                    style: {
+                        width: `calc(100% - ${formContext.vertical ? '0px' : labelWidth === 'auto' ? 'var(--label-width)' : labelWidth}${isNumber(labelWidth) ? 'px' : ''} - ${formContext.feedbackIcon ? 'var(--size)' : '0px'})`,
+                    },
+                }), { children: [_jsx("div", Object.assign({}, styled('form__item-control'), { children: isFunction(children) ? children(formControlProviders) : children })), _jsx("div", Object.assign({}, styled('form__error-container'), { children: (() => {
+                                const errorsMap = new Map();
+                                errorsRef.current.forEach((err) => {
+                                    if (errorsMap.has(err.controlName)) {
+                                        errorsMap.get(err.controlName).push(err);
+                                    }
+                                    else {
+                                        errorsMap.set(err.controlName, [err]);
+                                    }
+                                });
+                                const nodes = [];
+                                for (const [controlName, errors] of errorsMap) {
+                                    const id = getErrorId(controlName);
+                                    formControlProviders[controlName].inputAria['aria-describedby'] = id;
+                                    nodes.push(_jsx("div", { id: id, children: errors.map((error) => (_jsx(FormError, { styled: styled, visible: !error.hidden, message: error.message, invalid: error.invalid, afterLeave: () => {
+                                                errorsRef.current = errorsRef.current.filter((err) => err.key !== error.key);
+                                            } }, error.key))) }, controlName));
+                                }
+                                return nodes;
+                            })() }))] })), formContext.feedbackIcon && (_jsx("div", Object.assign({}, styled('form__item-feedback-icon'), { children: (() => {
+                        var _a;
+                        if (validateState === ValidateState.Empty) {
+                            return null;
+                        }
+                        else {
+                            const icon = (state) => state === ValidateState.Pending ? (_jsx(Icon, { theme: "primary", children: _jsx(CircularProgress, {}) })) : state === ValidateState.Error ? (_jsx(Icon, { theme: "danger", children: _jsx(CancelFilled, {}) })) : state === ValidateState.Warning ? (_jsx(Icon, { theme: "warning", children: _jsx(ErrorFilled, {}) })) : (_jsx(Icon, { theme: "success", children: _jsx(CheckCircleFilled, {}) }));
+                            if (isBoolean(formContext.feedbackIcon)) {
+                                return icon(validateState);
+                            }
+                            else {
+                                return ((_a = formContext.feedbackIcon[validateState === ValidateState.Pending
+                                    ? 'pending'
+                                    : validateState === ValidateState.Error
+                                        ? 'error'
+                                        : validateState === ValidateState.Warning
+                                            ? 'warning'
+                                            : 'success']) !== null && _a !== void 0 ? _a : icon(validateState));
+                            }
+                        }
+                    })() })))] })) })));
+}

package/form/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { AbstractControl } from './model/abstract-control';
+import type { FormGroup } from './model/form-group';
+export declare function useForm<T extends {
+    [K in keyof T]: AbstractControl;
+} = any>(initForm: () => FormGroup<T>): readonly [FormGroup<T>, (form?: FormGroup) => void];

package/form/hooks.js

@@ -0,0 +1,18 @@
+import { useEventCallback, useForceUpdate } from '@laser-ui/hooks';
+import { useState } from 'react';
+export function useForm(initForm) {
+    const forceUpdate = useForceUpdate();
+    const [form, setForm] = useState(() => {
+        const form = initForm();
+        form._emitChange = forceUpdate;
+        return form;
+    });
+    const updateForm = useEventCallback((form) => {
+        if (form) {
+            form._emitChange = forceUpdate;
+            setForm(form);
+        }
+        forceUpdate();
+    });
+    return [form, updateForm];
+}

package/form/index.d.ts

@@ -0,0 +1,8 @@
+export type { FormProps, FormItemProps } from './types';
+export { AbstractControl } from './model/abstract-control';
+export { FormControl } from './model/form-control';
+export { FormGroup } from './model/form-group';
+export { Validators } from './model/validators';
+export { Form } from './Form';
+export { useForm } from './hooks';
+export { FormGroupContext } from './vars';

package/form/index.js

@@ -0,0 +1,7 @@
+export { AbstractControl } from './model/abstract-control';
+export { FormControl } from './model/form-control';
+export { FormGroup } from './model/form-group';
+export { Validators } from './model/validators';
+export { Form } from './Form';
+export { useForm } from './hooks';
+export { FormGroupContext } from './vars';

package/form/internal/FormError.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Styled } from '../../hooks/useStyled';
+import type { CLASSES } from '../vars';
+interface FormErrorProps {
+    styled: Styled<typeof CLASSES>;
+    visible: boolean;
+    message: string;
+    invalid: 'warning' | 'error';
+    afterLeave: () => void;
+}
+export declare function FormError(props: FormErrorProps): JSX.Element | null;
+export {};