@laser-ui/components 0.0.1

package/tabs/Tabs.js

@@ -0,0 +1,248 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEventCallback, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
+import { checkScrollEnd, findNested } from '@laser-ui/utils';
+import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import { isUndefined, nth } from 'lodash';
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { CLASSES } from './vars';
+import { Dropdown } from '../dropdown';
+import { useComponentProps, useControlled, useNamespace, useStyled, useTranslation } from '../hooks';
+import { Icon } from '../icon';
+import { mergeCS } from '../utils';
+function TabsFC(props, ref) {
+    const _a = useComponentProps('Tabs', props), { styleOverrides, styleProvider, list, active: activeProp, defaultActive, pattern, placement = 'top', center = false, size = 'medium', addible = false, onActiveChange, onAddClick, onClose } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "active", "defaultActive", "pattern", "placement", "center", "size", "addible", "onActiveChange", "onAddClick", "onClose"]);
+    const namespace = useNamespace();
+    const styled = useStyled(CLASSES, { tabs: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tabs }, styleOverrides);
+    const { t } = useTranslation();
+    const uniqueId = useId();
+    const getTabId = (id) => `${namespace}-tabs-tab-${id}-${uniqueId}`;
+    const getPanelId = (id) => `${namespace}-tabs-panel-${id}-${uniqueId}`;
+    const tabsRef = useRef(null);
+    const tablistWrapperRef = useRef(null);
+    const tablistRef = useRef(null);
+    const buttonContainerRef = useRef(null);
+    const indicatorRef = useRef(null);
+    const [listOverflow, setListOverflow] = useState(false);
+    const [dropdownList, setDropdownList] = useState([]);
+    const [scrollEnd, setScrollEnd] = useState(false);
+    const iconSize = size === 'small' ? 16 : size === 'large' ? 20 : 18;
+    const isHorizontal = placement === 'top' || placement === 'bottom';
+    const [active, changeActive] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : (() => {
+        for (const tab of list) {
+            if (!tab.disabled) {
+                return tab.id;
+            }
+        }
+        return null;
+    }), activeProp, (id) => {
+        if (onActiveChange) {
+            onActiveChange(id, findNested(list, (item) => item.id === id));
+        }
+    });
+    const refreshTabs = () => {
+        const tablistWrapperEl = tablistWrapperRef.current;
+        if (tablistWrapperEl) {
+            const isOverflow = isHorizontal
+                ? tablistWrapperEl.scrollWidth > tablistWrapperEl.clientWidth
+                : tablistWrapperEl.scrollHeight > tablistWrapperEl.clientHeight;
+            setListOverflow(isOverflow);
+            setScrollEnd(checkScrollEnd(tablistWrapperEl)[isHorizontal ? 'x' : 'y']);
+            if (isOverflow) {
+                const tablistWrapperRect = tablistWrapperEl.getBoundingClientRect();
+                const dropdownList = [];
+                list.forEach((tab) => {
+                    var _a, _b, _c, _d;
+                    const el = document.getElementById(getTabId(tab.id));
+                    if (el) {
+                        const rect = el.getBoundingClientRect();
+                        if (isHorizontal) {
+                            if (rect.right + ((_b = (_a = buttonContainerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) > tablistWrapperRect.right ||
+                                rect.left < tablistWrapperRect.left) {
+                                dropdownList.push(tab);
+                            }
+                        }
+                        else {
+                            if (rect.bottom + ((_d = (_c = buttonContainerRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0) > tablistWrapperRect.bottom ||
+                                rect.top < tablistWrapperRect.top) {
+                                dropdownList.push(tab);
+                            }
+                        }
+                    }
+                });
+                setDropdownList(dropdownList);
+            }
+        }
+    };
+    useIsomorphicLayoutEffect(() => {
+        refreshTabs();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useResize(tablistWrapperRef, refreshTabs);
+    useResize(tablistRef, refreshTabs);
+    const updateIndicator = useEventCallback(() => {
+        if (tablistRef.current && indicatorRef.current) {
+            const tablistRect = tablistRef.current.getBoundingClientRect();
+            for (const tab of list) {
+                if (tab.id === active) {
+                    const el = document.getElementById(getTabId(tab.id));
+                    if (el) {
+                        const rect = el.getBoundingClientRect();
+                        if (isHorizontal) {
+                            indicatorRef.current.style.cssText = `left:${rect.left - tablistRect.left}px;width:${rect.width}px;opacity:1;`;
+                        }
+                        else {
+                            indicatorRef.current.style.cssText = `top:${rect.top - tablistRect.top}px;opacity:1;`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    useEffect(() => {
+        updateIndicator();
+    });
+    useImperativeHandle(ref, () => ({
+        updateIndicator,
+    }), [updateIndicator]);
+    return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tabs', `tabs--${placement}`, `tabs--${size}`, {
+        [`tabs--${pattern}`]: pattern,
+        'tabs--center': center,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { ref: tabsRef, children: [_jsx("div", Object.assign({}, styled('tabs__tablist-wrapper'), { ref: tablistWrapperRef, onScroll: () => {
+                    refreshTabs();
+                }, children: _jsxs("div", Object.assign({}, styled('tabs__tablist'), { ref: tablistRef, role: "tablist", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical', children: [list.map((item, index) => {
+                            const { id: itemId, title: itemTitle, disabled: itemDisabled, closable: itemClosable } = item;
+                            const isActive = itemId === active;
+                            const getTab = (next, _index = index) => {
+                                for (let focusIndex = next ? _index + 1 : _index - 1, n = 0; n < list.length; next ? focusIndex++ : focusIndex--, n++) {
+                                    const t = nth(list, focusIndex % list.length);
+                                    if (t && !t.disabled) {
+                                        return t;
+                                    }
+                                }
+                            };
+                            const focusTab = (t) => {
+                                if (t) {
+                                    changeActive(t.id);
+                                    const el = document.getElementById(getTabId(t.id));
+                                    if (el) {
+                                        el.focus();
+                                    }
+                                }
+                            };
+                            const closeTab = () => {
+                                if (isActive) {
+                                    let hasTab = false;
+                                    for (let focusIndex = index + 1; focusIndex < list.length; focusIndex++) {
+                                        const t = nth(list, focusIndex);
+                                        if (t && !t.disabled) {
+                                            hasTab = true;
+                                            focusTab(t);
+                                            break;
+                                        }
+                                    }
+                                    if (!hasTab) {
+                                        for (let focusIndex = index - 1; focusIndex >= 0; focusIndex--) {
+                                            const t = nth(list, focusIndex);
+                                            if (t && !t.disabled) {
+                                                focusTab(t);
+                                                break;
+                                            }
+                                        }
+                                    }
+                                }
+                                onClose === null || onClose === void 0 ? void 0 : onClose(itemId, item);
+                            };
+                            return (_createElement("div", Object.assign({}, styled('tabs__tab', {
+                                'tabs__tab.is-active': isActive,
+                                'tabs__tab.is-disabled': itemDisabled,
+                                'tabs__tab--first': index === 0,
+                                'tabs__tab--last': index === list.length - 1,
+                            }), { key: itemId, id: getTabId(itemId), tabIndex: isActive && !itemDisabled ? 0 : -1, role: "tab", "aria-controls": getPanelId(itemId), "aria-selected": isActive, "aria-disabled": itemDisabled, onClick: () => {
+                                    changeActive(itemId);
+                                }, onKeyDown: (e) => {
+                                    switch (e.code) {
+                                        case 'Delete':
+                                            e.preventDefault();
+                                            if (itemClosable) {
+                                                closeTab();
+                                            }
+                                            break;
+                                        case 'ArrowLeft':
+                                            e.preventDefault();
+                                            if (placement === 'top' || placement === 'bottom') {
+                                                focusTab(getTab(false));
+                                            }
+                                            break;
+                                        case 'ArrowRight':
+                                            e.preventDefault();
+                                            if (placement === 'top' || placement === 'bottom') {
+                                                focusTab(getTab(true));
+                                            }
+                                            break;
+                                        case 'ArrowUp':
+                                            e.preventDefault();
+                                            if (placement === 'left' || placement === 'right') {
+                                                focusTab(getTab(false));
+                                            }
+                                            break;
+                                        case 'ArrowDown':
+                                            e.preventDefault();
+                                            if (placement === 'left' || placement === 'right') {
+                                                focusTab(getTab(true));
+                                            }
+                                            break;
+                                        case 'Home':
+                                            e.preventDefault();
+                                            for (const t of list) {
+                                                if (!t.disabled) {
+                                                    focusTab(t);
+                                                    break;
+                                                }
+                                            }
+                                            break;
+                                        case 'End':
+                                            e.preventDefault();
+                                            for (let index = list.length - 1; index >= 0; index--) {
+                                                if (!list[index].disabled) {
+                                                    focusTab(list[index]);
+                                                    break;
+                                                }
+                                            }
+                                            break;
+                                        default:
+                                            break;
+                                    }
+                                } }),
+                                itemTitle,
+                                !itemDisabled && itemClosable && (_jsx("div", Object.assign({}, styled('tabs__close'), { role: "button", "aria-label": t('Close'), onClick: (e) => {
+                                        e.stopPropagation();
+                                        closeTab();
+                                    }, children: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }) })))));
+                        }), (listOverflow || addible) && (_jsxs("div", Object.assign({}, styled('tabs__button-container'), { ref: buttonContainerRef, children: [listOverflow && (_jsx(Dropdown, { list: dropdownList.map((tab) => {
+                                        const { id: itemId, title: itemTitle, dropdownRender: itemDropdownRender, disabled: itemDisabled } = tab;
+                                        return {
+                                            id: itemId,
+                                            title: isUndefined(itemDropdownRender) ? itemTitle : itemDropdownRender,
+                                            type: 'item',
+                                            disabled: itemDisabled,
+                                            style: itemId === active ? { color: `var(--${namespace}-color-primary)` } : undefined,
+                                        };
+                                    }), placement: placement === 'left' ? 'bottom-left' : 'bottom-right', onClick: (id) => {
+                                        changeActive(id);
+                                    }, children: _jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--more', {
+                                        'tabs__button.is-end': scrollEnd,
+                                    }), { "aria-label": t('More'), children: _jsx(Icon, { size: iconSize, children: _jsx(MoreHorizOutlined, {}) }) })) })), addible && (_jsx("div", Object.assign({}, styled('tabs__button', 'tabs__button--add'), { role: "button", "aria-label": t('Add'), onClick: () => {
+                                        onAddClick === null || onAddClick === void 0 ? void 0 : onAddClick();
+                                    }, children: _jsx(Icon, { size: iconSize, children: _jsx(AddOutlined, {}) }) })))] }))), _jsx("div", Object.assign({}, styled(pattern === 'wrap' ? 'tabs__wrap-indicator' : pattern === 'slider' ? 'tabs__slider-indicator' : 'tabs__indicator'), { ref: indicatorRef }))] })) })), list.map((item) => {
+                const { id: itemId, panel: itemPanel } = item;
+                return (_createElement("div", Object.assign({}, styled('tabs__tabpanel'), { key: itemId, id: getPanelId(itemId), tabIndex: 0, hidden: itemId !== active, role: "tabpanel", "aria-labelledby": getTabId(itemId) }), itemPanel));
+            })] })));
+}
+export const Tabs = forwardRef(TabsFC);

package/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabsRef, TabsProps } from './types';
+export { Tabs } from './Tabs';

package/tabs/index.js

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

package/tabs/types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps, Size } from '../types';
+export {};
+export interface TabsRef {
+    updateIndicator: () => void;
+}
+export interface TabsItem<ID extends React.Key> {
+    id: ID;
+    title: React.ReactNode;
+    panel: React.ReactNode;
+    dropdownRender?: React.ReactNode;
+    closable?: boolean;
+    disabled?: boolean;
+}
+export interface TabsProps<ID extends React.Key, T extends TabsItem<ID>> extends BaseProps<'tabs', typeof CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    list: T[];
+    active?: ID;
+    defaultActive?: ID;
+    pattern?: 'wrap' | 'slider';
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    center?: boolean;
+    size?: Size;
+    addible?: boolean;
+    onActiveChange?: (id: ID, origin: T) => void;
+    onAddClick?: () => void;
+    onClose?: (id: ID, origin: T) => void;
+}

package/tabs/types.js

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

package/tabs/vars.d.ts

@@ -0,0 +1,30 @@
+export declare const CLASSES: {
+    tabs: string;
+    'tabs--wrap': string;
+    'tabs--slider': string;
+    'tabs--top': string;
+    'tabs--right': string;
+    'tabs--bottom': string;
+    'tabs--left': string;
+    'tabs--small': string;
+    'tabs--medium': string;
+    'tabs--large': string;
+    'tabs--center': string;
+    'tabs__tablist-wrapper': string;
+    tabs__tablist: string;
+    tabs__tab: string;
+    'tabs__tab.is-active': string;
+    'tabs__tab.is-disabled': string;
+    'tabs__tab--first': string;
+    'tabs__tab--last': string;
+    tabs__close: string;
+    'tabs__button-container': string;
+    tabs__button: string;
+    'tabs__button.is-end': string;
+    'tabs__button--more': string;
+    'tabs__button--add': string;
+    tabs__indicator: string;
+    'tabs__wrap-indicator': string;
+    'tabs__slider-indicator': string;
+    tabs__tabpanel: string;
+};

package/tabs/vars.js

@@ -0,0 +1,30 @@
+export const CLASSES = {
+    tabs: '^tabs',
+    'tabs--wrap': '^tabs--wrap',
+    'tabs--slider': '^tabs--slider',
+    'tabs--top': '^tabs--top',
+    'tabs--right': '^tabs--right',
+    'tabs--bottom': '^tabs--bottom',
+    'tabs--left': '^tabs--left',
+    'tabs--small': '^tabs--small',
+    'tabs--medium': '^tabs--medium',
+    'tabs--large': '^tabs--large',
+    'tabs--center': '^tabs--center',
+    'tabs__tablist-wrapper': '^tabs__tablist-wrapper',
+    tabs__tablist: '^tabs__tablist',
+    tabs__tab: '^tabs__tab',
+    'tabs__tab.is-active': 'is-active',
+    'tabs__tab.is-disabled': 'is-disabled',
+    'tabs__tab--first': '^tabs__tab--first',
+    'tabs__tab--last': '^tabs__tab--last',
+    tabs__close: '^tabs__close',
+    'tabs__button-container': '^tabs__button-container',
+    tabs__button: '^tabs__button',
+    'tabs__button.is-end': 'is-end',
+    'tabs__button--more': '^tabs__button--more',
+    'tabs__button--add': '^tabs__button--add',
+    tabs__indicator: '^tabs__indicator',
+    'tabs__wrap-indicator': '^tabs__wrap-indicator',
+    'tabs__slider-indicator': '^tabs__slider-indicator',
+    tabs__tabpanel: '^tabs__tabpanel',
+};

package/tag/Tag.d.ts

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

package/tag/Tag.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CLASSES } from './vars';
+import { useComponentProps, useScopedProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export function Tag(props) {
+    const _a = useComponentProps('Tag', props), { children, styleOverrides, styleProvider, pattern = 'primary', theme, size: sizeProp } = _a, restProps = __rest(_a, ["children", "styleOverrides", "styleProvider", "pattern", "theme", "size"]);
+    const styled = useStyled(CLASSES, { tag: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tag }, styleOverrides);
+    const { size } = useScopedProps({ size: sizeProp });
+    return (_jsx("div", Object.assign({}, restProps, mergeCS(styled('tag', `tag--${pattern}`, `tag--${size}`, {
+        [`tag.t-${theme}`]: theme,
+    }), {
+        className: restProps.className,
+        style: restProps.style,
+    }), { children: children })));
+}

package/tag/index.d.ts

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

package/tag/index.js

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

package/tag/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { BaseProps, Size } from '../types';
+export {};
+export interface TagProps extends BaseProps<'tag', typeof CLASSES>, React.HTMLAttributes<HTMLDivElement> {
+    pattern?: 'primary' | 'fill' | 'outline';
+    theme?: 'primary' | 'success' | 'warning' | 'danger';
+    size?: Size;
+}

package/tag/types.js

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

package/tag/vars.d.ts

@@ -0,0 +1,13 @@
+export declare const CLASSES: {
+    tag: string;
+    'tag.t-primary': string;
+    'tag.t-success': string;
+    'tag.t-warning': string;
+    'tag.t-danger': string;
+    'tag--primary': string;
+    'tag--fill': string;
+    'tag--outline': string;
+    'tag--small': string;
+    'tag--medium': string;
+    'tag--large': string;
+};

package/tag/vars.js

@@ -0,0 +1,13 @@
+export const CLASSES = {
+    tag: '^tag',
+    'tag.t-primary': 't-primary',
+    'tag.t-success': 't-success',
+    'tag.t-warning': 't-warning',
+    'tag.t-danger': 't-danger',
+    'tag--primary': '^tag--primary',
+    'tag--fill': '^tag--fill',
+    'tag--outline': '^tag--outline',
+    'tag--small': '^tag--small',
+    'tag--medium': '^tag--medium',
+    'tag--large': '^tag--large',
+};

package/textarea/Textarea.d.ts

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

package/textarea/Textarea.js

@@ -0,0 +1,72 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForkRef } from '@laser-ui/hooks';
+import { isFunction, isNumber, isUndefined } from 'lodash';
+import { forwardRef, useEffect, useRef } from 'react';
+import { CLASSES } from './vars';
+import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled } from '../hooks';
+import { mergeCS } from '../utils';
+export const Textarea = forwardRef((props, ref) => {
+    const _a = useComponentProps('Textarea', props), { styleOverrides, styleProvider, formControl, model, defaultModel, autoRows = false, resizable = true, showCount = false, size: sizeProp, onModelChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "autoRows", "resizable", "showCount", "size", "onModelChange"]);
+    const styled = useStyled(CLASSES, { textarea: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.textarea }, styleOverrides);
+    const textareaRef = useRef(null);
+    const combineTextareaRef = useForkRef(textareaRef, ref);
+    const [value, changeValue] = useControlled(defaultModel !== null && defaultModel !== void 0 ? defaultModel : '', model, onModelChange, undefined, formControl === null || formControl === void 0 ? void 0 : formControl.control);
+    const { size, disabled } = useScopedProps({ size: sizeProp, disabled: restProps.disabled || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
+    useEffect(() => {
+        if (textareaRef.current) {
+            const cssText = textareaRef.current.style.cssText;
+            textareaRef.current.value = '';
+            textareaRef.current.rows = 1;
+            textareaRef.current.style.cssText = cssText + 'box-sizing:content-box;overflow:hidden;height:0px;min-height:unset;';
+            const outerSize = textareaRef.current.offsetHeight;
+            textareaRef.current.style.cssText = cssText + 'overflow:hidden;height:0px;min-height:unset;padding:0px;';
+            const lineHeight = textareaRef.current.scrollHeight;
+            textareaRef.current.value = value;
+            const n = Math.round(textareaRef.current.scrollHeight / lineHeight);
+            if (isNumber(restProps.rows)) {
+                textareaRef.current.rows = restProps.rows;
+            }
+            else {
+                textareaRef.current.removeAttribute('rows');
+            }
+            textareaRef.current.style.cssText = cssText;
+            let height;
+            let overflow;
+            let minHeight;
+            let maxHeight;
+            if (autoRows !== false) {
+                height = n * lineHeight;
+                overflow = 'hidden';
+                if (autoRows !== true) {
+                    if (isNumber(autoRows.minRows)) {
+                        minHeight = autoRows.minRows * lineHeight;
+                    }
+                    if (isNumber(autoRows.maxRows)) {
+                        maxHeight = autoRows.maxRows * lineHeight;
+                        if (autoRows.maxRows < n) {
+                            overflow = undefined;
+                        }
+                    }
+                }
+            }
+            textareaRef.current.style.height = isUndefined(height) ? '' : height + outerSize + 'px';
+            textareaRef.current.style.overflow = isUndefined(overflow) ? '' : 'hidden';
+            textareaRef.current.style.minHeight = isUndefined(minHeight) ? '' : minHeight + outerSize + 'px';
+            textareaRef.current.style.maxHeight = isUndefined(maxHeight) ? '' : maxHeight + outerSize + 'px';
+        }
+    });
+    const designProps = useDesign({ form: formControl });
+    return (_jsxs(_Fragment, { children: [_jsx("textarea", Object.assign({}, restProps, mergeCS(styled('textarea', `textarea--${size}`), {
+                className: restProps.className,
+                style: Object.assign(Object.assign({}, restProps.style), { resize: resizable && autoRows === false ? undefined : 'none' }),
+            }), designProps, { ref: combineTextareaRef, value: value, disabled: disabled, onChange: (e) => {
+                    var _a;
+                    (_a = restProps.onChange) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                    changeValue(e.currentTarget.value);
+                } })), showCount !== false && (_jsx("div", Object.assign({}, styled('textarea__count'), { children: isFunction(showCount)
+                    ? showCount(value.length)
+                    : isUndefined(restProps.maxLength)
+                        ? value.length
+                        : `${value.length} / ${restProps.maxLength}` })))] }));
+});

package/textarea/index.d.ts

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

package/textarea/index.js

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

package/textarea/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { CLASSES } from './vars';
+import type { FormControlProvider } from '../form/types';
+import type { BaseProps, Size } from '../types';
+export {};
+export interface TextareaProps extends BaseProps<'textarea', typeof CLASSES>, React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    formControl?: FormControlProvider;
+    model?: string;
+    defaultModel?: string;
+    autoRows?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    resizable?: boolean;
+    showCount?: boolean | ((count: number) => React.ReactNode);
+    size?: Size;
+    onModelChange?: (value: string) => void;
+}

package/textarea/types.js

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

package/textarea/vars.d.ts

@@ -0,0 +1,7 @@
+export declare const CLASSES: {
+    textarea: string;
+    'textarea--small': string;
+    'textarea--medium': string;
+    'textarea--large': string;
+    textarea__count: string;
+};

package/textarea/vars.js

@@ -0,0 +1,7 @@
+export const CLASSES = {
+    textarea: '^textarea',
+    'textarea--small': '^textarea--small',
+    'textarea--medium': '^textarea--medium',
+    'textarea--large': '^textarea--large',
+    textarea__count: '^textarea__count',
+};

package/time-picker/TimePicker.d.ts

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