@dotss/ui 0.0.4 → 0.0.7

package/dist/Switch/Switch.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Switch').SwitchProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/Switch/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Switch.cjs");exports.default=e.default;

package/dist/Switch/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Switch } from './Switch';
+
+export default Switch;

package/dist/Switch/index.es.js

@@ -0,0 +1,4 @@
+import o from "./Switch.es.js";
+export {
+  o as default
+};

package/dist/Tab/Tab.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@emotion/react/jsx-runtime"),i=require("react"),U=require("@emotion/styled"),G=o=>o&&o.__esModule?o:{default:o},x=G(U),J=x.default.div`
+  width: 100%;
+  background-color: ${({theme:o})=>o.palette.grey.white};
+  ${({scrollable:o})=>o?{overflow:"hidden"}:{}}
+`,Q=x.default.div`
+  display: flex;
+  position: relative;
+  background: ${({theme:o})=>o.palette.grey.white};
+  ${({theme:o,isChipped:u})=>u?{gap:o.spacing.content(2)}:{}}
+`,Y=x.default.div`
+  position: absolute;
+  height: 2px;
+  bottom: 0;
+  background: ${({theme:o,disabled:u})=>u?o.palette.brand.primary.disableLine:o.palette.brand.primary.main};
+  transition: all 0.2s ease-in-out;
+  transition-property: transform, width;
+  ${({isChipped:o})=>o?{display:"none"}:{}}
+`,Z=3,B=i.forwardRef(function({value:u,scrollable:y=!1,disabled:C=!1,onChange:D,size:T="medium",inlineCSS:I,wrapperProps:p,children:A,..._},X){const s=i.useRef(null),d=i.useRef(),f=i.useRef(0),j=i.useRef(!0),v=i.useRef(!1),h=i.useRef(!1),[m,w]=i.useState(!1),[F,N]=i.useState(!1),[g,P]=i.useState(0),[M,H]=i.useState(0),R=C,E=i.Children.toArray(A).every(e=>i.isValidElement(e)&&i.Children.toArray(e.props.children).every(r=>i.isValidElement(r)&&!Array.isArray(r.props.children))),O=e=>r=>{v.current&&(D(e,r.currentTarget),v.current=!1)},V=e=>{if(!s.current)return;const r=s.current.querySelectorAll('[role="tab"]:not([disabled])'),a=Array.from(r).findIndex(t=>t===document.activeElement);if(e.key==="ArrowLeft"){e.preventDefault();const t=a<=0?r.length-1:a-1,n=r[t];n&&!n.getAttribute("disabled")&&n.focus()}else if(e.key==="ArrowRight"){e.preventDefault();const t=a>=r.length-1?0:a+1,n=r[t];n&&!n.getAttribute("disabled")&&n.focus()}else if(e.key==="Home"){e.preventDefault();const t=r[0];t&&!t.getAttribute("disabled")&&t.focus()}else if(e.key==="End"){e.preventDefault();const t=r[r.length-1];t&&!t.getAttribute("disabled")&&t.focus()}else if(e.key===" "||e.key==="Enter"){e.preventDefault();const t=r[a];if(t&&!t.getAttribute("disabled")){const n=t.getAttribute("value");if(n){D(n,t);const c=s.current.querySelector(".indicator");c&&(c.style.width=`${t.clientWidth}px`,c.style.transform=`translate3d(${t.offsetLeft}px, 0px, 0px)`,h.current?c.style.transition="all 0.2s ease-in-out":(c.style.transition="unset",h.current=!0))}}}},L=e=>{w(!0),P(e),H(f.current)},$=e=>{m&&(w(!1),e&&Math.abs(g-e)<Z&&(v.current=!0),d.current&&(cancelAnimationFrame(d.current),d.current=void 0))},K=e=>L(e.clientX),z=e=>{L(e.touches[0].clientX)},W=()=>{$()},k=e=>$(e.clientX);return i.useEffect(()=>{const e=()=>{var r;if(s.current){const a=s.current.querySelector(".indicator"),t=(r=s.current)==null?void 0:r.querySelectorAll('[role="tab"][data-selected="true"]')[0];if(t&&a&&(a.style.width=`${t.clientWidth}px`,a.style.transform=`translate3d(${t.offsetLeft}px, 0px, 0px)`,h.current?a.style.transition="all 0.2s ease-in-out":(a.style.transition="unset",h.current=!0),N(t.getAttribute("data-disabled")==="true")),t&&y){const n=t.offsetLeft,c=t.offsetLeft+t.clientWidth,l=f.current,b=f.current+s.current.clientWidth;if(n<l||c>b){const q=Math.min(n,Math.max(s.current.scrollWidth-s.current.clientWidth,s.current.scrollWidth-b));s.current.style.transition="all 0.2s ease-in-out",s.current.style.transform=`translate3d(-${q}px, 0px, 0px)`,f.current=q}}}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[y,u,T]),i.useEffect(()=>{const e=s.current,r=n=>{if(!m||!s.current)return;const c=g-n;let l=M+c;const b=s.current.scrollWidth-s.current.clientWidth;l<0?l=0:l>b&&(l=b),s.current&&(d.current&&cancelAnimationFrame(d.current),d.current=requestAnimationFrame(()=>{s.current&&(s.current.style.transition="unset",s.current.style.transform=`translate3d(-${l}px, 0px, 0px)`,f.current=l,j.current=!1)}))},a=n=>{n.stopPropagation(),r(n.clientX)},t=n=>{n.stopPropagation(),r(n.touches[0].clientX)};return e==null||e.addEventListener("mousemove",a),e==null||e.addEventListener("touchmove",t),()=>{e==null||e.removeEventListener("mousemove",a),e==null||e.removeEventListener("touchmove",t)}},[m,g,M]),S.jsx(J,{className:"tab-wrapper",ref:X,scrollable:y,...p,css:p==null?void 0:p.inlineCSS,children:S.jsxs(Q,{className:"tab-list",role:"tablist",ref:s,isChipped:E,css:I,..._,onMouseDown:K,onMouseUp:k,onMouseLeave:k,onTouchStart:z,onTouchEnd:W,onTouchCancel:W,children:[i.Children.map(A,(e,r)=>{var n,c;if(!i.isValidElement(e))return null;const a=u===e.props.value,t=R||((n=e.props)==null?void 0:n.disabled);return i.cloneElement(e,{...e.props,className:`tab-block-${r}`,selected:a,"aria-selected":a,tabIndex:a?0:-1,onClick:(c=e.props)!=null&&c.disabled?void 0:O(e.props.value),onKeyDown:V,disabled:t,size:T})}),S.jsx(Y,{className:"indicator",disabled:R||F,isChipped:E})]})})});exports.default=B;

package/dist/Tab/Tab.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps, Size } from '../typings/component';
+
+export interface TabProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    value: string;
+    onChange: (value: string, target: EventTarget & HTMLDivElement) => void;
+    size?: Extract<Size, 'medium' | 'small'>;
+    scrollable?: boolean;
+    disabled?: boolean;
+    wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Tab;

package/dist/Tab/Tab.es.js

@@ -0,0 +1,183 @@
+import { jsx as q, jsxs as Y } from "@emotion/react/jsx-runtime";
+import { forwardRef as Z, useRef as d, useState as y, Children as S, isValidElement as A, useEffect as F, cloneElement as B } from "react";
+import D from "@emotion/styled";
+const tt = D.div`
+  width: 100%;
+  background-color: ${({ theme: i }) => i.palette.grey.white};
+  ${({ scrollable: i }) => i ? {
+  overflow: "hidden"
+} : {}}
+`, et = D.div`
+  display: flex;
+  position: relative;
+  background: ${({ theme: i }) => i.palette.grey.white};
+  ${({ theme: i, isChipped: l }) => l ? {
+  gap: i.spacing.content(2)
+} : {}}
+`, rt = D.div`
+  position: absolute;
+  height: 2px;
+  bottom: 0;
+  background: ${({ theme: i, disabled: l }) => l ? i.palette.brand.primary.disableLine : i.palette.brand.primary.main};
+  transition: all 0.2s ease-in-out;
+  transition-property: transform, width;
+  ${({ isChipped: i }) => i ? {
+  display: "none"
+} : {}}
+`, nt = 3, at = Z(function({
+  value: l,
+  scrollable: m = !1,
+  disabled: N = !1,
+  onChange: T,
+  size: w = "medium",
+  inlineCSS: H,
+  wrapperProps: b,
+  children: L,
+  ...P
+}, j) {
+  const s = d(null), u = d(), f = d(0), K = d(!0), v = d(!1), h = d(!1), [g, M] = y(!1), [O, z] = y(!1), [x, U] = y(0), [E, V] = y(0), $ = N, R = S.toArray(L).every((t) => A(t) && S.toArray(t.props.children).every(
+    (n) => A(n) && !Array.isArray(n.props.children)
+  )), _ = (t) => (n) => {
+    v.current && (T(t, n.currentTarget), v.current = !1);
+  }, G = (t) => {
+    if (!s.current) return;
+    const n = s.current.querySelectorAll(
+      '[role="tab"]:not([disabled])'
+    ), o = Array.from(n).findIndex((e) => e === document.activeElement);
+    if (t.key === "ArrowLeft") {
+      t.preventDefault();
+      const e = o <= 0 ? n.length - 1 : o - 1, r = n[e];
+      r && !r.getAttribute("disabled") && r.focus();
+    } else if (t.key === "ArrowRight") {
+      t.preventDefault();
+      const e = o >= n.length - 1 ? 0 : o + 1, r = n[e];
+      r && !r.getAttribute("disabled") && r.focus();
+    } else if (t.key === "Home") {
+      t.preventDefault();
+      const e = n[0];
+      e && !e.getAttribute("disabled") && e.focus();
+    } else if (t.key === "End") {
+      t.preventDefault();
+      const e = n[n.length - 1];
+      e && !e.getAttribute("disabled") && e.focus();
+    } else if (t.key === " " || t.key === "Enter") {
+      t.preventDefault();
+      const e = n[o];
+      if (e && !e.getAttribute("disabled")) {
+        const r = e.getAttribute("value");
+        if (r) {
+          T(r, e);
+          const a = s.current.querySelector(".indicator");
+          a && (a.style.width = `${e.clientWidth}px`, a.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, h.current ? a.style.transition = "all 0.2s ease-in-out" : (a.style.transition = "unset", h.current = !0));
+        }
+      }
+    }
+  }, W = (t) => {
+    M(!0), U(t), V(f.current);
+  }, k = (t) => {
+    g && (M(!1), t && Math.abs(x - t) < nt && (v.current = !0), u.current && (cancelAnimationFrame(u.current), u.current = void 0));
+  }, J = (t) => W(t.clientX), Q = (t) => {
+    W(t.touches[0].clientX);
+  }, I = () => {
+    k();
+  }, X = (t) => k(t.clientX);
+  return F(() => {
+    const t = () => {
+      var n;
+      if (s.current) {
+        const o = s.current.querySelector(".indicator"), e = (n = s.current) == null ? void 0 : n.querySelectorAll(
+          '[role="tab"][data-selected="true"]'
+        )[0];
+        if (e && o && (o.style.width = `${e.clientWidth}px`, o.style.transform = `translate3d(${e.offsetLeft}px, 0px, 0px)`, h.current ? o.style.transition = "all 0.2s ease-in-out" : (o.style.transition = "unset", h.current = !0), z(e.getAttribute("data-disabled") === "true")), e && m) {
+          const r = e.offsetLeft, a = e.offsetLeft + e.clientWidth, c = f.current, p = f.current + s.current.clientWidth;
+          if (r < c || a > p) {
+            const C = Math.min(
+              r,
+              Math.max(
+                s.current.scrollWidth - s.current.clientWidth,
+                s.current.scrollWidth - p
+              )
+            );
+            s.current.style.transition = "all 0.2s ease-in-out", s.current.style.transform = `translate3d(-${C}px, 0px, 0px)`, f.current = C;
+          }
+        }
+      }
+    };
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }, [m, l, w]), F(() => {
+    const t = s.current, n = (r) => {
+      if (!g || !s.current) return;
+      const a = x - r;
+      let c = E + a;
+      const p = s.current.scrollWidth - s.current.clientWidth;
+      c < 0 ? c = 0 : c > p && (c = p), s.current && (u.current && cancelAnimationFrame(u.current), u.current = requestAnimationFrame(() => {
+        s.current && (s.current.style.transition = "unset", s.current.style.transform = `translate3d(-${c}px, 0px, 0px)`, f.current = c, K.current = !1);
+      }));
+    }, o = (r) => {
+      r.stopPropagation(), n(r.clientX);
+    }, e = (r) => {
+      r.stopPropagation(), n(r.touches[0].clientX);
+    };
+    return t == null || t.addEventListener("mousemove", o), t == null || t.addEventListener("touchmove", e), () => {
+      t == null || t.removeEventListener("mousemove", o), t == null || t.removeEventListener("touchmove", e);
+    };
+  }, [g, x, E]), /* @__PURE__ */ q(
+    tt,
+    {
+      className: "tab-wrapper",
+      ref: j,
+      scrollable: m,
+      ...b,
+      css: b == null ? void 0 : b.inlineCSS,
+      children: /* @__PURE__ */ Y(
+        et,
+        {
+          className: "tab-list",
+          role: "tablist",
+          ref: s,
+          isChipped: R,
+          css: H,
+          ...P,
+          onMouseDown: J,
+          onMouseUp: X,
+          onMouseLeave: X,
+          onTouchStart: Q,
+          onTouchEnd: I,
+          onTouchCancel: I,
+          children: [
+            S.map(L, (t, n) => {
+              var r, a;
+              if (!A(t))
+                return null;
+              const o = l === t.props.value, e = $ || ((r = t.props) == null ? void 0 : r.disabled);
+              return B(t, {
+                ...t.props,
+                className: `tab-block-${n}`,
+                selected: o,
+                "aria-selected": o,
+                tabIndex: o ? 0 : -1,
+                onClick: (a = t.props) != null && a.disabled ? void 0 : _(t.props.value),
+                onKeyDown: G,
+                disabled: e,
+                size: w
+              });
+            }),
+            /* @__PURE__ */ q(
+              rt,
+              {
+                className: "indicator",
+                disabled: $ || O,
+                isChipped: R
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  at as default
+};

package/dist/Tab/Tab.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Tab').TabProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        scrollable: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Chipped: Story;
+export declare const Scrolled: Story;
+export declare const ScrolledChip: Story;
+export declare const CustomizedTabBlocks: Story;

package/dist/Tab/TabBlock/TabBlock.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),d=require("react"),p=require("../../Chip/Chip.cjs"),h=require("@emotion/styled"),b=e=>e&&e.__esModule?e:{default:e},x=b(h),y=x.default.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  padding: ${({theme:{spacing:e},size:t})=>t==="small"?`${e.content(2)}px ${e.content(3)}px`:`${e.content(3)}px ${e.content(4)}px`};
+  border-bottom: ${({theme:e})=>`1px solid ${e.palette.grey[10]}`};
+  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+
+  ${({theme:{typography:e,palette:t},size:r,selected:o,disabled:i})=>{if(o){const{size:n,weight:s,lineHeight:g,letterSpacing:m}=e[r==="medium"?"h4B":"h5B"];return{fontSize:n,fontWeight:s,lineHeight:g,letterSpacing:m,color:i?t.grey[30]:t.grey[100]}}const{size:f,weight:a,lineHeight:l,letterSpacing:u}=e[r==="medium"?"b2R":"b4R"];return{fontSize:f,fontWeight:a,lineHeight:l,letterSpacing:u,color:i?t.grey[30]:t.grey[70]}}}}
+`,$=d.forwardRef(function({size:t="medium",selected:r,disabled:o=!1,inlineCSS:i,children:f,onClick:a,...l},u){return c.jsx(c.Fragment,{children:d.Children.map(f,n=>{var s;return d.isValidElement(n)&&!Array.isArray((s=n==null?void 0:n.props)==null?void 0:s.children)?c.jsx(p.default,{tag:"button",role:"tab",ref:u,"data-shape":"chip","data-selected":r,disabled:o,variant:r?"filled":"outlined",selected:r,onClick:a,inlineCSS:i,...n.props,...l}):c.jsx(y,{as:"button",role:"tab",ref:u,size:t,disabled:o,selected:r,"data-selected":r,"data-disabled":o,onClick:a,css:i,...l,children:n})})})});exports.default=$;

package/dist/Tab/TabBlock/TabBlock.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, MouseEvent } from 'react';
+import { TabProps } from '../Tab';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface TabBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<TabProps, 'size'>> {
+    value: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+}
+declare const TabBlock: import('react').ForwardRefExoticComponent<TabBlockProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TabBlock;

package/dist/Tab/TabBlock/TabBlock.es.js

@@ -0,0 +1,84 @@
+import { jsx as u, Fragment as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as d, Children as h, isValidElement as b } from "react";
+import x from "../../Chip/Chip.es.js";
+import y from "@emotion/styled";
+const $ = y.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme: { spacing: t }, size: e }) => e === "small" ? `${t.content(2)}px ${t.content(3)}px` : `${t.content(3)}px ${t.content(4)}px`};
+  border-bottom: ${({ theme: t }) => `1px solid ${t.palette.grey[10]}`};
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+
+  ${({ theme: { typography: t, palette: e }, size: r, selected: o, disabled: i }) => {
+  if (o) {
+    const {
+      size: n,
+      weight: f,
+      lineHeight: p,
+      letterSpacing: s
+    } = t[r === "medium" ? "h4B" : "h5B"];
+    return {
+      fontSize: n,
+      fontWeight: f,
+      lineHeight: p,
+      letterSpacing: s,
+      color: i ? e.grey[30] : e.grey[100]
+    };
+  }
+  const {
+    size: g,
+    weight: a,
+    lineHeight: l,
+    letterSpacing: m
+  } = t[r === "medium" ? "b2R" : "b4R"];
+  return {
+    fontSize: g,
+    fontWeight: a,
+    lineHeight: l,
+    letterSpacing: m,
+    color: i ? e.grey[30] : e.grey[70]
+  };
+}}}
+`, H = d(function({ size: e = "medium", selected: r, disabled: o = !1, inlineCSS: i, children: g, onClick: a, ...l }, m) {
+  return /* @__PURE__ */ u(c, { children: h.map(g, (n) => {
+    var f;
+    return b(n) && !Array.isArray((f = n == null ? void 0 : n.props) == null ? void 0 : f.children) ? /* @__PURE__ */ u(
+      x,
+      {
+        tag: "button",
+        role: "tab",
+        ref: m,
+        "data-shape": "chip",
+        "data-selected": r,
+        disabled: o,
+        variant: r ? "filled" : "outlined",
+        selected: r,
+        onClick: a,
+        inlineCSS: i,
+        ...n.props,
+        ...l
+      }
+    ) : /* @__PURE__ */ u(
+      $,
+      {
+        as: "button",
+        role: "tab",
+        ref: m,
+        size: e,
+        disabled: o,
+        selected: r,
+        "data-selected": r,
+        "data-disabled": o,
+        onClick: a,
+        css: i,
+        ...l,
+        children: n
+      }
+    );
+  }) });
+});
+export {
+  H as default
+};

package/dist/Tab/TabBlock/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./TabBlock.cjs");exports.default=e.default;

package/dist/Tab/TabBlock/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TabBlock } from './TabBlock';
+
+export default TabBlock;

package/dist/Tab/TabBlock/index.es.js

@@ -0,0 +1,4 @@
+import a from "./TabBlock.es.js";
+export {
+  a as default
+};

package/dist/Tab/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Tab.cjs"),t=require("./TabBlock/TabBlock.cjs");exports.default=e.default;exports.TabBlock=t.default;

package/dist/Tab/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Tab } from './Tab';
+
+export { default as TabBlock } from './TabBlock';
+export default Tab;

package/dist/Tab/index.es.js

@@ -0,0 +1,6 @@
+import o from "./Tab.es.js";
+import { default as e } from "./TabBlock/TabBlock.es.js";
+export {
+  e as TabBlock,
+  o as default
+};

package/dist/TextArea/TextArea.cjs

@@ -0,0 +1,68 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),l=require("react"),k=require("@emotion/styled"),_=t=>t&&t.__esModule?t:{default:t},c=_(k),M=c.default.div`
+  position: relative;
+  border-radius: 12px;
+  height: auto;
+  overflow: hidden;
+
+  ${({theme:{palette:{brand:t,background:i,grey:n}},variant:d,isFocused:r})=>d==="filled"?{backgroundColor:i.primary,border:"1px solid transparent"}:d==="outlined"?r?{backgroundColor:n.white,border:`1px solid ${t.primary.line}`}:{backgroundColor:n.white,border:`1px solid ${n[50]}`}:{}};
+
+  ${({theme:{palette:{etc:t}},variant:i,helper:n})=>i==="outlined"&&((n==null?void 0:n.severity)==="error"||n!=null&&n.message)?{borderColor:t.red}:{}}
+
+  ${({theme:{palette:{grey:t}},variant:i,disabled:n})=>i==="outlined"&&n?{backgroundColor:t[10],borderColor:t[30]}:{}}
+
+  ${({fullWidth:t})=>t?{width:"100%"}:{}}
+`,W=c.default.textarea`
+  width: 100%;
+  overflow: hidden;
+  resize: none;
+  border: none;
+  outline: 0;
+  background: transparent;
+  padding: ${({theme:t})=>`${t.spacing.content(3)}px ${t.spacing.content(4)}px ${t.spacing.content(2)}px`};
+  min-height: ${({minHeight:t})=>t}px;
+
+  ${({theme:{typography:{b2R:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+
+  @media (max-width: 360px) {
+    ${({theme:{typography:{b3R:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+  }
+
+  &::placeholder {
+    color: ${({theme:t})=>t.palette.grey[50]};
+    text-align: justify;
+  }
+
+  &[disabled] {
+    color: ${({theme:t})=>t.palette.grey[30]};
+    cursor: not-allowed;
+  }
+
+  &[disabled]::placeholder {
+    color: ${({theme:t})=>t.palette.grey[30]};
+  }
+`,q=c.default.div`
+  color: ${({theme:t,disabled:i})=>i?t.palette.grey[30]:t.palette.grey[50]};
+  text-align: right;
+  padding-right: ${({theme:t})=>t.spacing.content(4)}px;
+  padding-bottom: ${({theme:t})=>t.spacing.content(3)}px;
+
+  ${({theme:{typography:{b4R:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+
+  & > span {
+    color: ${({theme:t,disabled:i})=>i?t.palette.grey[30]:t.palette.grey[100]};
+  }
+`,A=c.default.p`
+  margin-top: ${({theme:{spacing:t}})=>t.content(1)}px;
+  color: ${({theme:t})=>t.palette.etc.red};
+
+  ${({theme:{typography:{c3R:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+`,T=c.default.p`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+`,F=l.forwardRef(({onChange:t,value:i,variant:n="filled",size:d="large",maxLength:r=290,onFocus:p,onBlur:x,helper:o,disabled:g=!1,wrapperProps:u,...S},m)=>{const f=l.useRef(null),h=l.useRef(d==="large"?112.5:57.5),[v,y]=l.useState(!1),$=l.useId(),H=e=>{e.target.value.length>r&&(e.target.value=e.target.value.slice(0,r)),typeof t=="function"&&t(e)},w=e=>{y(!0),typeof p=="function"&&p(e)},j=e=>{y(!1),typeof x=="function"&&x(e)},C=()=>{var s;const e=(s=f.current)==null?void 0:s.querySelector("textarea");e&&e.focus()};return l.useEffect(()=>{var s;const e=(s=f.current)==null?void 0:s.querySelector("textarea");if(e){e.style.height="auto";const{scrollHeight:b,clientHeight:z}=e;e.style.height=`${h.current}px`,e.style.height=`${Math.max(b,h.current,z)}px`}},[i]),a.jsxs("div",{children:[a.jsxs(M,{ref:f,isFocused:v,variant:n,helper:o,disabled:g,...u,css:u==null?void 0:u.inlineCSS,children:[a.jsx(W,{ref:m,onChange:H,onFocus:w,onBlur:j,value:i,disabled:g,"aria-invalid":(o==null?void 0:o.severity)==="error","aria-describedby":o!=null&&o.message?$:void 0,minHeight:h.current,...S}),a.jsxs(q,{disabled:g,onClick:C,children:["(",a.jsx("span",{children:i.length})," / ",r,")"]})]}),(o==null?void 0:o.message)&&!g&&a.jsx(A,{id:$,helper:o,children:o.message}),i.length>=r&&a.jsxs(T,{"aria-live":"assertive",role:"alert",children:["최대 입력 글자 수에 도달하였습니다. ",r," 자까지 입력이 가능합니다."]})]})});exports.default=F;

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { GeneralComponentProps, Size, Variant } from '../typings/component';
+
+export interface TextAreaProps extends GeneralComponentProps<TextareaHTMLAttributes<HTMLTextAreaElement>> {
+    value: string;
+    variant?: Extract<Variant, 'filled' | 'outlined'>;
+    size?: Extract<Size, 'large' | 'small'>;
+    helper?: {
+        severity: 'success' | 'error';
+        message?: string;
+    };
+    fullWidth?: boolean;
+    wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;