@alphakits/ui 1.31.5 → 2.0.0

package/dist/textarea/component.d.ts

@@ -1,60 +1,201 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, TextareaHTMLAttributes } from "react";
-type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
+import { default as React, ChangeEvent, TextareaHTMLAttributes } from 'react';
+export declare type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
+    /**
+     * Значение поля ввода
+     */
     value?: string;
+    /**
+     * Начальное значение поля
+     */
     defaultValue?: string;
+    /**
+     * required - индикатор * лейбла для обязательного заполнения поля
+     */
     required?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
     block?: boolean;
+    /**
+     * Размер компонента
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * Отображение ошибки
+     */
     error?: string | boolean;
+    /**
+     * Текст подсказки
+     */
     hint?: string;
+    /**
+     * Счетчик символов
+     */
     counter?: boolean;
+    /**
+     * максимальное кол-во символов
+     */
     maxLength?: number;
+    /**
+     * Лейбл компонента
+     */
     label?: React.ReactNode;
+    /**
+     * Слот слева
+     */
     leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
     rightAddons?: React.ReactNode;
+    /**
+     * Слот под компонентом
+     */
     bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
     className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
     fieldClassName?: string;
+    /**
+     * Дополнительный класс textarea
+     */
     textareaClassName?: string;
+    /**
+     * Управление возможностью подстраивать высоту компонента под высоту текста
+     */
     autosize?: boolean;
+    /**
+     * Максимальное количество отображаемых строк (работает только вместе с autosize)
+     */
     maxRows?: number;
+    /**
+     * Минимальное количество отображаемых строк (работает только вместе c autosize)
+     */
     minRows?: number;
+    /**
+     * Максимальная высота элемента
+     */
     maxHeight?: number;
+    /**
+     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
+     */
     resize?: 'vertical' | 'none';
+    /**
+     * Обработчик ввода
+     */
     onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
         value: string;
     }) => void;
+    /**
+     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
+     */
     onHeightChange?: (height?: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
     dataTestId?: string;
 };
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style" | "value" | "size" | "defaultValue" | "onChange"> & {
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style" | "value" | "size" | "defaultValue" | "onChange"> & {
+    /**
+     * Значение поля ввода
+     */
     value?: string | undefined;
+    /**
+     * Начальное значение поля
+     */
     defaultValue?: string | undefined;
+    /**
+     * required - индикатор * лейбла для обязательного заполнения поля
+     */
     required?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
     block?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
     size?: "s" | "m" | "l" | undefined;
+    /**
+     * Отображение ошибки
+     */
     error?: string | boolean | undefined;
+    /**
+     * Текст подсказки
+     */
     hint?: string | undefined;
+    /**
+     * Счетчик символов
+     */
     counter?: boolean | undefined;
+    /**
+     * максимальное кол-во символов
+     */
     maxLength?: number | undefined;
+    /**
+     * Лейбл компонента
+     */
     label?: React.ReactNode;
+    /**
+     * Слот слева
+     */
     leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
     rightAddons?: React.ReactNode;
+    /**
+     * Слот под компонентом
+     */
     bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
     className?: string | undefined;
+    /**
+     * Дополнительный класс для поля
+     */
     fieldClassName?: string | undefined;
+    /**
+     * Дополнительный класс textarea
+     */
     textareaClassName?: string | undefined;
+    /**
+     * Управление возможностью подстраивать высоту компонента под высоту текста
+     */
     autosize?: boolean | undefined;
+    /**
+     * Максимальное количество отображаемых строк (работает только вместе с autosize)
+     */
     maxRows?: number | undefined;
+    /**
+     * Минимальное количество отображаемых строк (работает только вместе c autosize)
+     */
     minRows?: number | undefined;
+    /**
+     * Максимальная высота элемента
+     */
     maxHeight?: number | undefined;
+    /**
+     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
+     */
     resize?: "none" | "vertical" | undefined;
+    /**
+     * Обработчик ввода
+     */
     onChange?: ((event: ChangeEvent<HTMLTextAreaElement>, payload: {
         value: string;
     }) => void) | undefined;
+    /**
+     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
+     */
     onHeightChange?: ((height?: number | undefined) => void) | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
     dataTestId?: string | undefined;
 } & React.RefAttributes<HTMLTextAreaElement>>;
-export { TextareaProps, Textarea };

package/dist/textarea/component.js

@@ -1 +1,129 @@
-import{__rest as e,__assign as o}from"tslib";import a,{useRef as t,useState as l,useEffect as s,useCallback as r}from"react";import i from"react-merge-refs";import n from"react-textarea-autosize";import d from"classnames";import{FormControl as m}from"../form-control/component.js";import{useFocus as u}from"../hooks/useFocus/index.js";var c={textarea:"index-module_textarea__10WiX",s:"index-module_s__mB-Lv",m:"index-module_m__GBkw0",l:"index-module_l__ZR1ow",hasLabel:"index-module_hasLabel__1xWGU",resizeVertical:"index-module_resizeVertical__1xb4Z",focusVisible:"index-module_focusVisible__2wEmF",filled:"index-module_filled__3c6uz",counter:"index-module_counter__ibP6v"},f=a.forwardRef((function(f,x){var h,_,g=f.autoComplete,b=void 0===g?"on":g,v=f.autosize,p=void 0===v||v,z=f.size,C=void 0===z?"s":z,w=f.block,N=void 0!==w&&w,A=f.bottomAddons,L=f.fieldClassName,R=f.className,V=f.dataTestId,k=f.disabled,H=f.error,B=f.hint,E=f.textareaClassName,F=f.label,y=f.leftAddons,q=f.onFocus,j=f.required,G=f.onBlur,I=f.onChange,P=f.onHeightChange,T=f.rightAddons,W=f.maxRows,Z=f.minRows,U=f.maxHeight,X=f.resize,D=void 0===X?"none":X,J=f.value,K=f.defaultValue,M=f.maxLength,O=void 0===M?500:M,Q=f.counter,S=f.rows,Y=void 0===S?p?1:3:S,$=e(f,["autoComplete","autosize","size","block","bottomAddons","fieldClassName","className","dataTestId","disabled","error","hint","textareaClassName","label","leftAddons","onFocus","required","onBlur","onChange","onHeightChange","rightAddons","maxRows","minRows","maxHeight","resize","value","defaultValue","maxLength","counter","rows"]),ee=void 0===J,oe=t(null),ae=l(!1),te=ae[0],le=ae[1],se=l(K||""),re=se[0],ie=se[1],ne=u(oe,"keyboard")[0],de=Boolean(ee?re:J);s((function(){p&&U&&oe.current&&oe.current.style&&(oe.current.style.maxHeight=U+"px")}),[oe,p,U]);var me=r((function(e){le(!0),q&&q(e)}),[q]),ue=r((function(e){le(!1),G&&G(e)}),[G]),ce=r((function(e){I&&I(e,{value:e.target.value}),ee&&ie(e.target.value)}),[I,ee]),fe=o(o({},$),{className:d(c.textarea,c[C],(h={},h[c.hasLabel]=F,h[c.filled]=de,h[c.resizeVertical]="vertical"===D,h),E),autoComplete:b,disabled:k,onBlur:ue,onFocus:me,onChange:ce,value:ee?re:J,rows:Y,ref:i([x,oe]),"data-test-id":V});return a.createElement(m,{className:d(R),fieldClassName:d(L,(_={},_[c.focusVisible]=ne,_)),size:C,block:N,required:j,disabled:k,filled:de||te,focused:te,error:H,label:F,hint:B,leftAddons:y,rightAddons:T,bottomAddons:A},p?a.createElement(n,o({},fe,{maxLength:O,maxRows:W,minRows:Z,onHeightChange:P})):a.createElement("textarea",o({maxLength:O},fe,{style:{maxHeight:U}})),Q&&a.createElement("span",{className:c.counter},(ee?re.length:null==J?void 0:J.length)+" / "+(O||"-")))}));f.defaultProps={autoComplete:"on",autosize:!0,size:"s",block:!1,resize:"none"};export{f as Textarea};
+import { jsxs as _, jsx as m } from "react/jsx-runtime";
+import L, { useRef as H, useState as C, useEffect as v, useCallback as d } from "react";
+import ee from "react-merge-refs";
+import te from "react-textarea-autosize";
+import p from "classnames";
+import { FormControl as re } from "../form-control/component.js";
+import { useFocus as se } from "../hooks/useFocus/index.js";
+import t from "./index.module.css.js";
+const oe = L.forwardRef(
+  ({
+    autoComplete: N = "on",
+    autosize: a = !0,
+    size: x = "s",
+    block: k = !1,
+    bottomAddons: F,
+    fieldClassName: S,
+    className: $,
+    dataTestId: j,
+    disabled: y,
+    error: P,
+    hint: g,
+    textareaClassName: w,
+    label: b,
+    leftAddons: z,
+    onFocus: c,
+    required: A,
+    onBlur: f,
+    onChange: n,
+    onHeightChange: B,
+    rightAddons: E,
+    maxRows: q,
+    minRows: D,
+    maxHeight: l,
+    resize: G = "none",
+    value: r,
+    defaultValue: I,
+    maxLength: i = 500,
+    counter: J,
+    rows: K = a ? 1 : 3,
+    ...M
+  }, O) => {
+    const o = r === void 0, s = H(null), [R, T] = C(!1), [u, Q] = C(I || ""), [U] = se(s, "keyboard"), V = !!(o ? u : r);
+    v(() => {
+      a && l && s.current && s.current.style && (s.current.style.maxHeight = `${l}px`);
+    }, [s, a, l]);
+    const W = d(
+      (e) => {
+        T(!0), c && c(e);
+      },
+      [c]
+    ), X = d(
+      (e) => {
+        T(!1), f && f(e);
+      },
+      [f]
+    ), Y = d(
+      (e) => {
+        n && n(e, { value: e.target.value }), o && Q(e.target.value);
+      },
+      [n, o]
+    ), h = {
+      ...M,
+      className: p(
+        t.textarea,
+        t[x],
+        {
+          [t.hasLabel]: b,
+          [t.filled]: V,
+          [t.resizeVertical]: G === "vertical"
+        },
+        w
+      ),
+      autoComplete: N,
+      disabled: y,
+      onBlur: X,
+      onFocus: W,
+      onChange: Y,
+      value: o ? u : r,
+      rows: K,
+      ref: ee([O, s]),
+      "data-test-id": j
+    }, Z = () => `${o ? u.length : r == null ? void 0 : r.length} / ${i || "-"}`;
+    return /* @__PURE__ */ _(
+      re,
+      {
+        className: p($),
+        fieldClassName: p(S, {
+          [t.focusVisible]: U
+        }),
+        size: x,
+        block: k,
+        required: A,
+        disabled: y,
+        filled: V || R,
+        focused: R,
+        error: P,
+        label: b,
+        hint: g,
+        leftAddons: z,
+        rightAddons: E,
+        bottomAddons: F,
+        children: [
+          a ? /* @__PURE__ */ m(
+            te,
+            {
+              ...h,
+              maxLength: i,
+              maxRows: q,
+              minRows: D,
+              onHeightChange: B
+            }
+          ) : /* @__PURE__ */ m("textarea", { maxLength: i, ...h, style: { maxHeight: l } }),
+          J && /* @__PURE__ */ m("span", { className: t.counter, children: Z() })
+        ]
+      }
+    );
+  }
+);
+oe.defaultProps = {
+  autoComplete: "on",
+  autosize: !0,
+  size: "s",
+  block: !1,
+  resize: "none"
+};
+export {
+  oe as Textarea
+};
+//# sourceMappingURL=component.js.map

package/dist/textarea/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/textarea/component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    TextareaHTMLAttributes,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport TextareaAutosize from 'react-textarea-autosize';\nimport cn from 'classnames';\n\nimport { FormControl } from '../form-control';\nimport { useFocus } from '../hooks/useFocus';\n\nimport styles from './index.module.css';\n\nexport type TextareaProps = Omit<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    'size' | 'style' | 'value' | 'defaultValue' | 'onChange'\n> & {\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Начальное значение поля\n     */\n    defaultValue?: string;\n\n    /**\n     * required - индикатор * лейбла для обязательного заполнения поля\n     */\n    required?: boolean;\n\n    /**\n     * Растягивает компонент на ширину контейнера\n     */\n    block?: boolean;\n\n    /**\n     * Размер компонента\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Отображение ошибки\n     */\n    error?: string | boolean;\n\n    /**\n     * Текст подсказки\n     */\n    hint?: string;\n\n    /**\n     * Счетчик символов\n     */\n    counter?: boolean;\n\n    /**\n     * максимальное кол-во символов\n     */\n    maxLength?: number;\n\n    /**\n     * Лейбл компонента\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: React.ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: React.ReactNode;\n\n    /**\n     * Слот под компонентом\n     */\n    bottomAddons?: React.ReactNode;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для поля\n     */\n    fieldClassName?: string;\n\n    /**\n     * Дополнительный класс textarea\n     */\n    textareaClassName?: string;\n\n    /**\n     * Управление возможностью подстраивать высоту компонента под высоту текста\n     */\n    autosize?: boolean;\n\n    /**\n     * Максимальное количество отображаемых строк (работает только вместе с autosize)\n     */\n    maxRows?: number;\n\n    /**\n     * Минимальное количество отображаемых строк (работает только вместе c autosize)\n     */\n    minRows?: number;\n\n    /**\n     * Максимальная высота элемента\n     */\n    maxHeight?: number;\n\n    /**\n     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)\n     */\n    resize?: 'vertical' | 'none';\n\n    /**\n     * Обработчик ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик события изменения высоты компонента (работает только вместе c autosize)\n     */\n    onHeightChange?: (height?: number) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n};\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n    (\n        {\n            autoComplete = 'on',\n            autosize = true,\n            size = 's',\n            block = false,\n            bottomAddons,\n            fieldClassName,\n            className,\n            dataTestId,\n            disabled,\n            error,\n            hint,\n            textareaClassName,\n            label,\n            leftAddons,\n            onFocus,\n            required,\n            onBlur,\n            onChange,\n            onHeightChange,\n            rightAddons,\n            maxRows,\n            minRows,\n            maxHeight,\n            resize = 'none',\n            value,\n            defaultValue,\n            maxLength = 500,\n            counter,\n            rows = autosize ? 1 : 3,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        const [focused, setFocused] = useState(false);\n        const [stateValue, setStateValue] = useState(defaultValue || '');\n\n        const [focusVisible] = useFocus(textareaRef, 'keyboard');\n\n        const filled = Boolean(uncontrolled ? stateValue : value);\n\n        // Хак, так как react-textarea-autosize перестал поддерживать maxHeight\n        useEffect(() => {\n            if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {\n                textareaRef.current.style.maxHeight = `${maxHeight}px`;\n            }\n        }, [textareaRef, autosize, maxHeight]);\n\n        const handleTextareaFocus = useCallback(\n            (event: React.FocusEvent<HTMLTextAreaElement>) => {\n                setFocused(true);\n\n                if (onFocus) {\n                    onFocus(event);\n                }\n            },\n            [onFocus],\n        );\n\n        const handleTextareaBlur = useCallback(\n            (event: React.FocusEvent<HTMLTextAreaElement>) => {\n                setFocused(false);\n\n                if (onBlur) {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        const handleTextareaChange = useCallback(\n            (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n                if (onChange) {\n                    onChange(event, { value: event.target.value });\n                }\n\n                if (uncontrolled) {\n                    setStateValue(event.target.value);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const textareaProps = {\n            ...restProps,\n            className: cn(\n                styles.textarea,\n                styles[size],\n                {\n                    [styles.hasLabel]: label,\n                    [styles.filled]: filled,\n                    [styles.resizeVertical]: resize === 'vertical',\n                },\n                textareaClassName,\n            ),\n            autoComplete,\n            disabled,\n            onBlur: handleTextareaBlur,\n            onFocus: handleTextareaFocus,\n            onChange: handleTextareaChange,\n            value: uncontrolled ? stateValue : value,\n            rows,\n            ref: mergeRefs([ref, textareaRef]),\n            'data-test-id': dataTestId,\n        };\n\n        const countSymbols = () =>\n            `${uncontrolled ? stateValue.length : value?.length} / ${maxLength || '-'}`;\n\n        return (\n            <FormControl\n                className={cn(className)}\n                fieldClassName={cn(fieldClassName, {\n                    [styles.focusVisible]: focusVisible,\n                })}\n                size={size}\n                block={block}\n                required={required}\n                disabled={disabled}\n                filled={filled || focused}\n                focused={focused}\n                error={error}\n                label={label}\n                hint={hint}\n                leftAddons={leftAddons}\n                rightAddons={rightAddons}\n                bottomAddons={bottomAddons}\n            >\n                {autosize ? (\n                    <TextareaAutosize\n                        {...textareaProps}\n                        maxLength={maxLength}\n                        maxRows={maxRows}\n                        minRows={minRows}\n                        onHeightChange={onHeightChange}\n                    />\n                ) : (\n                    <textarea maxLength={maxLength} {...textareaProps} style={{ maxHeight }} />\n                )}\n                {counter && <span className={styles.counter}>{countSymbols()}</span>}\n            </FormControl>\n        );\n    },\n);\n\n/**\n * Для отображения в сторибуке\n */\nTextarea.defaultProps = {\n    autoComplete: 'on',\n    autosize: true,\n    size: 's',\n    block: false,\n    resize: 'none',\n};\n"],"names":["Textarea","React","autoComplete","autosize","size","block","bottomAddons","fieldClassName","className","dataTestId","disabled","error","hint","textareaClassName","label","leftAddons","onFocus","required","onBlur","onChange","onHeightChange","rightAddons","maxRows","minRows","maxHeight","resize","value","defaultValue","maxLength","counter","rows","restProps","ref","uncontrolled","textareaRef","useRef","focused","setFocused","useState","stateValue","setStateValue","focusVisible","useFocus","filled","useEffect","handleTextareaFocus","useCallback","event","handleTextareaBlur","handleTextareaChange","textareaProps","cn","styles","mergeRefs","countSymbols","jsxs","FormControl","jsx","TextareaAutosize"],"mappings":"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"}

package/dist/textarea/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/textarea/index.js

@@ -1 +1,5 @@
-export{Textarea}from"./component.js";import"tslib";import"react";import"react-merge-refs";import"react-textarea-autosize";import"classnames";import"../form-control/component.js";import"../hooks/useFocus/index.js";
+import { Textarea as a } from "./component.js";
+export {
+  a as Textarea
+};
+//# sourceMappingURL=index.js.map

package/dist/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/textarea/index.module.css

@@ -0,0 +1 @@
+:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}:root{--textarea-s-min-height: 128px !important;--textarea-m-min-height: 138px !important;--textarea-l-min-height: 148px !important;--textarea-s-padding-top: 14px;--textarea-m-padding-top: 18px;--textarea-l-padding-top: 24px;--textarea-s-filled-margin-top: 23px;--textarea-m-filled-margin-top: 28px;--textarea-l-filled-margin-top: 34px;--textarea-s-filled-min-height: calc( var(--textarea-s-min-height) - var(--textarea-s-filled-margin-top) );--textarea-m-filled-min-height: calc( var(--textarea-m-min-height) - var(--textarea-m-filled-margin-top) );--textarea-l-filled-min-height: calc( var(--textarea-l-min-height) - var(--textarea-l-filled-margin-top) )}.index-module_textarea__91cCo{font-size:16px!important;line-height:20px;font-weight:400;font-family:var(--font-family);position:relative;display:block;width:100%;height:100%;color:var(--input-color);background:none;border:none;margin:0;outline:none;box-sizing:border-box;resize:none;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.index-module_textarea__91cCo.index-module_s__EnuHV{padding-top:var(--textarea-s-padding-top);padding-bottom:var(--gap-xs)}.index-module_textarea__91cCo.index-module_m__etAWo{padding-top:var(--textarea-m-padding-top);padding-bottom:var(--gap-xs)}.index-module_textarea__91cCo.index-module_l__pP38o{padding-top:var(--textarea-l-padding-top);padding-bottom:var(--gap-xs)}.index-module_textarea__91cCo::placeholder{transition:opacity .2s ease,color .2s ease;color:var(--input-placeholder-color)}.index-module_hasLabel__sk25A::placeholder{opacity:0;color:var(--input-with-label-placeholder-color)}.index-module_resizeVertical__kct5e{resize:vertical}.index-module_textarea__91cCo.index-module_s__EnuHV{min-height:var(--textarea-s-min-height)}.index-module_textarea__91cCo.index-module_m__etAWo{min-height:var(--textarea-m-min-height)}.index-module_textarea__91cCo.index-module_l__pP38o{min-height:var(--textarea-l-min-height)}.index-module_textarea__91cCo:disabled{cursor:var(--disabled-cursor);color:var(--input-disabled-color)}.index-module_textarea__91cCo:read-only{cursor:var(--disabled-cursor);color:var(--input-read-only-color)}.index-module_textarea__91cCo:focus.index-module_hasLabel__sk25A::placeholder{opacity:1}.index-module_textarea__91cCo:focus::placeholder{color:var(--input-focus-placeholder-color)}.index-module_focusVisible__bLwRO{outline:2px solid var(--focus-color);outline-offset:2px}.index-module_textarea__91cCo.index-module_filled__t8LRd.index-module_hasLabel__sk25A{padding-top:0!important}.index-module_textarea__91cCo.index-module_filled__t8LRd.index-module_hasLabel__sk25A.index-module_s__EnuHV{margin-top:var(--textarea-s-filled-margin-top);min-height:var(--textarea-s-filled-min-height);height:var(--textarea-s-filled-min-height)}.index-module_textarea__91cCo.index-module_filled__t8LRd.index-module_hasLabel__sk25A.index-module_m__etAWo{margin-top:var(--textarea-m-filled-margin-top);min-height:var(--textarea-m-filled-min-height);height:var(--textarea-m-filled-min-height)}.index-module_textarea__91cCo.index-module_filled__t8LRd.index-module_hasLabel__sk25A.index-module_l__pP38o{margin-top:var(--textarea-l-filled-margin-top);min-height:var(--textarea-l-filled-min-height);height:var(--textarea-l-filled-min-height)}.index-module_counter__psEqA{position:absolute;top:5px;right:8px;opacity:0;pointer-events:none;font-size:10px;color:var(--color-text-secondary);padding:0!important;transition:opacity .4s ease-in-out;cursor:text}.index-module_textarea__91cCo:focus~.index-module_counter__psEqA{opacity:1}

package/dist/textarea/index.module.css.js

@@ -0,0 +1,25 @@
+import './index.module.css';
+const e = "index-module_textarea__91cCo", s = "index-module_s__EnuHV", l = "index-module_m__etAWo", o = "index-module_l__pP38o", t = "index-module_hasLabel__sk25A", _ = "index-module_resizeVertical__kct5e", i = "index-module_focusVisible__bLwRO", d = "index-module_filled__t8LRd", n = "index-module_counter__psEqA", c = {
+  textarea: e,
+  s,
+  m: l,
+  l: o,
+  hasLabel: t,
+  resizeVertical: _,
+  focusVisible: i,
+  filled: d,
+  counter: n
+};
+export {
+  n as counter,
+  c as default,
+  d as filled,
+  i as focusVisible,
+  t as hasLabel,
+  o as l,
+  l as m,
+  _ as resizeVertical,
+  s,
+  e as textarea
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/textarea/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/theme-provider/component.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
-import React from 'react';
-import { ThemesObject } from "./default-themes";
-declare enum THEME {
+import { default as React } from 'react';
+import { ThemesObject } from './default-themes';
+export declare enum THEME {
     DARK = "dark",
     LIGHT = "light"
 }
-declare const LOACAL_STORAGE_THEME_KEY = "theme";
-declare const STYLE_TAG_ID = "theme-styles";
-declare const THEME_DATA_ATTR = "data-theme";
-type ThemeProviderProps = {
+export declare const LOACAL_STORAGE_THEME_KEY = "theme";
+export declare const STYLE_TAG_ID = "theme-styles";
+export declare const THEME_DATA_ATTR = "data-theme";
+declare type ThemeProviderProps = {
     themes: ThemesObject;
     selectedTheme?: THEME;
 };
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
-declare const useTheme: () => {
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => {
     setTheme: (theme: THEME) => void;
     currentTheme: THEME | undefined;
 };
-export { THEME, LOACAL_STORAGE_THEME_KEY, STYLE_TAG_ID, THEME_DATA_ATTR, ThemeProvider, useTheme };
+export {};

package/dist/theme-provider/component.js

@@ -1 +1,42 @@
-import e,{createContext as t,useState as n,useEffect as o,useContext as r}from"react";var c;!function(e){e.DARK="dark",e.LIGHT="light"}(c||(c={}));var a=t({setTheme:function(){},currentTheme:void 0}),m="theme",d="theme-styles",h="data-theme",l=function(t){var r=t.children,l=t.themes,u=t.selectedTheme,i=n(),s=i[0],f=i[1],v=function(e){null===document||void 0===document||document.documentElement.setAttribute(h,e),localStorage.setItem(m,e),f(e)};return o((function(){var e,t,n,o=null===localStorage||void 0===localStorage?void 0:localStorage.getItem(m),r=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?c.DARK:c.LIGHT;v(u||o||r),e=l,t=document.getElementById(d),n="",t||((t=document.createElement("style")).id=d,document.head.appendChild(t)),Object.keys(e).forEach((function(o){n+="html[data-theme='"+o+"'] {";var r=e[o];Object.keys(r).forEach((function(e){var t=r[e];Object.keys(t).forEach((function(o){n+="--color-"+e+"-"+o+": "+t[o]+";\n"}))})),n+="} \n",t.textContent=n}))}),[l,u]),e.createElement(a.Provider,{value:{setTheme:v,currentTheme:s}},r)},u=function(){var e=r(a);return{setTheme:e.setTheme,currentTheme:e.currentTheme}};export{m as LOACAL_STORAGE_THEME_KEY,d as STYLE_TAG_ID,c as THEME,h as THEME_DATA_ATTR,l as ThemeProvider,u as useTheme};
+import { jsx as g } from "react/jsx-runtime";
+import { createContext as x, useState as y, useEffect as C, useContext as _ } from "react";
+var k = /* @__PURE__ */ ((t) => (t.DARK = "dark", t.LIGHT = "light", t))(k || {});
+const i = x({
+  setTheme: () => {
+  },
+  currentTheme: void 0
+}), l = "theme", u = "theme-styles", v = "data-theme", I = ({ children: t, themes: c, selectedTheme: r }) => {
+  const [E, f] = y(), s = (e) => {
+    document == null || document.documentElement.setAttribute(v, e), localStorage.setItem(l, e), f(e);
+  }, A = (e) => {
+    let o = document.getElementById(u), n = "";
+    o || (o = document.createElement("style"), o.id = u, document.head.appendChild(o)), Object.keys(e).forEach((m) => {
+      n += `html[data-theme='${m}'] {`;
+      const a = e[m];
+      Object.keys(a).forEach((h) => {
+        const d = a[h];
+        Object.keys(d).forEach((T) => {
+          n += `--color-${h}-${T}: ${d[T]};
+`;
+        });
+      }), n += `} 
+`, o.textContent = n;
+    });
+  };
+  return C(() => {
+    const e = localStorage == null ? void 0 : localStorage.getItem(l), o = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    s(r || e || o), A(c);
+  }, [c, r]), /* @__PURE__ */ g(i.Provider, { value: { setTheme: s, currentTheme: E }, children: t });
+}, O = () => {
+  const { setTheme: t, currentTheme: c } = _(i);
+  return { setTheme: t, currentTheme: c };
+};
+export {
+  l as LOACAL_STORAGE_THEME_KEY,
+  u as STYLE_TAG_ID,
+  k as THEME,
+  v as THEME_DATA_ATTR,
+  I as ThemeProvider,
+  O as useTheme
+};
+//# sourceMappingURL=component.js.map

package/dist/theme-provider/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/theme-provider/component.tsx"],"sourcesContent":["import React, {\n    createContext, useContext, useEffect, useState,\n} from 'react';\n\nimport { ThemesObject } from './default-themes';\n\nexport enum THEME {\n    DARK = 'dark',\n    LIGHT = 'light'\n}\n\ntype ThemeContextType = {\n    setTheme: (theme: THEME) => void;\n    currentTheme?: THEME;\n};\n\nconst ThemeContext = createContext<ThemeContextType>({\n    setTheme: () => {},\n    currentTheme: undefined,\n});\n\nexport const LOACAL_STORAGE_THEME_KEY = 'theme';\nexport const STYLE_TAG_ID = 'theme-styles';\nexport const THEME_DATA_ATTR = 'data-theme';\n\ntype ThemeProviderProps = {themes: ThemesObject; selectedTheme?: THEME };\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, themes, selectedTheme }) => {\n    const [currentTheme, setCurrentTheme] = useState<THEME>();\n\n    const setTheme = (theme: THEME) => {\n        document?.documentElement.setAttribute(THEME_DATA_ATTR, theme);\n        localStorage.setItem(LOACAL_STORAGE_THEME_KEY, theme);\n        setCurrentTheme(theme);\n    };\n\n    const applyThemes = (themesObject: ThemeProviderProps['themes']) => {\n        let styleTag = document.getElementById(STYLE_TAG_ID) as HTMLElement;\n        let cssText = '';\n\n        if (!styleTag) {\n            styleTag = document.createElement('style');\n            styleTag.id = STYLE_TAG_ID;\n            document.head.appendChild(styleTag);\n        }\n\n        Object.keys(themesObject).forEach((theme) => {\n            cssText += `html[data-theme='${theme}'] {`;\n            const themeObject = themesObject[theme as keyof ThemesObject];\n\n            Object.keys(themeObject).forEach((propertyType) => {\n                const themeByType = themeObject[propertyType as keyof ThemesObject['light']];\n\n                Object.keys(themeByType).forEach((property) => {\n                    cssText += `--color-${propertyType}-${property}: ${themeByType[property]};\\n`;\n                });\n            });\n            cssText += '} \\n';\n            styleTag.textContent = cssText;\n        });\n    };\n\n    useEffect(() => {\n        const savedTheme = localStorage?.getItem(LOACAL_STORAGE_THEME_KEY) as THEME;\n        const browserTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? THEME.DARK : THEME.LIGHT;\n\n        setTheme(selectedTheme || savedTheme || browserTheme);\n        applyThemes(themes);\n    }, [themes, selectedTheme]);\n\n    return (\n        <ThemeContext.Provider value={ { setTheme, currentTheme } }>{ children }</ThemeContext.Provider>\n    );\n};\n\nexport const useTheme = () => {\n    const { setTheme, currentTheme } = useContext(ThemeContext);\n\n    return { setTheme, currentTheme };\n};\n"],"names":["THEME","ThemeContext","createContext","LOACAL_STORAGE_THEME_KEY","STYLE_TAG_ID","THEME_DATA_ATTR","ThemeProvider","children","themes","selectedTheme","currentTheme","setCurrentTheme","useState","setTheme","theme","applyThemes","themesObject","styleTag","cssText","themeObject","propertyType","themeByType","property","useEffect","savedTheme","browserTheme","jsx","useTheme","useContext"],"mappings":";;AAMO,IAAKA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAUZ,MAAMC,IAAeC,EAAgC;AAAA,EACjD,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,cAAc;AAClB,CAAC,GAEYC,IAA2B,SAC3BC,IAAe,gBACfC,IAAkB,cAIlBC,IAA8C,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,QAAoB;AAChG,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAElCC,IAAW,CAACC,MAAiB;AAC/B,iCAAU,gBAAgB,aAAaT,GAAiBS,IACxD,aAAa,QAAQX,GAA0BW,CAAK,GACpDH,EAAgBG,CAAK;AAAA,EACzB,GAEMC,IAAc,CAACC,MAA+C;AAChE,QAAIC,IAAW,SAAS,eAAeb,CAAY,GAC/Cc,IAAU;AAEd,IAAKD,MACDA,IAAW,SAAS,cAAc,OAAO,GACzCA,EAAS,KAAKb,GACd,SAAS,KAAK,YAAYa,CAAQ,IAGtC,OAAO,KAAKD,CAAY,EAAE,QAAQ,CAACF,MAAU;AACzC,MAAAI,KAAW,oBAAoBJ,CAAK;AACpC,YAAMK,IAAcH,EAAaF,CAA2B;AAE5D,aAAO,KAAKK,CAAW,EAAE,QAAQ,CAACC,MAAiB;AAC/C,cAAMC,IAAcF,EAAYC,CAA2C;AAE3E,eAAO,KAAKC,CAAW,EAAE,QAAQ,CAACC,MAAa;AAC3C,UAAAJ,KAAW,WAAWE,CAAY,IAAIE,CAAQ,KAAKD,EAAYC,CAAQ,CAAC;AAAA;AAAA,QAC5E,CAAC;AAAA,MACL,CAAC,GACDJ,KAAW;AAAA,GACXD,EAAS,cAAcC;AAAA,IAC3B,CAAC;AAAA,EACL;AAEA,SAAAK,EAAU,MAAM;AACZ,UAAMC,IAAa,6CAAc,QAAQrB,IACnCsB,IAAe,OAAO,cAAc,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAa;AAEnH,IAAAZ,EAASJ,KAAiBe,KAAcC,CAAY,GACpDV,EAAYP,CAAM;AAAA,EACtB,GAAG,CAACA,GAAQC,CAAa,CAAC,GAGtB,gBAAAiB,EAACzB,EAAa,UAAb,EAAsB,OAAQ,EAAE,UAAAY,GAAU,cAAAH,KAAmB,UAAAH,GAAU;AAEhF,GAEaoB,IAAW,MAAM;AAC1B,QAAM,EAAE,UAAAd,GAAU,cAAAH,MAAiBkB,EAAW3B,CAAY;AAE1D,SAAO,EAAE,UAAAY,GAAU,cAAAH,EAAA;AACvB;"}

package/dist/theme-provider/default-themes.d.ts

@@ -1,4 +1,4 @@
-declare const defaultThemes: {
+export declare const defaultThemes: {
     readonly light: {
         readonly text: {
             readonly primary: "#0E0E0E";
@@ -148,8 +148,8 @@ declare const defaultThemes: {
         };
     };
 };
-type DefaultThemes = typeof defaultThemes;
-type DefaultThemeType = {
+declare type DefaultThemes = typeof defaultThemes;
+declare type DefaultThemeType = {
     [P in keyof DefaultThemes['light']]: {
         [value: string]: string;
     };
@@ -158,8 +158,8 @@ type DefaultThemeType = {
         [K in keyof DefaultThemes['light'][P]]: string;
     };
 }>;
-type ThemesObject = {
+export declare type ThemesObject = {
     dark: DefaultThemeType;
     light: DefaultThemeType;
 };
-export { defaultThemes, ThemesObject };
+export {};