@dotss/ui 0.0.8 → 0.0.11

package/TextArea/TextArea.es.js

@@ -0,0 +1,256 @@
+import { jsxs as u, jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as F, useRef as v, useState as q, useId as h, useEffect as B } from "react";
+import s from "@emotion/styled";
+import y from "../Typography/Typography.es.js";
+const E = s.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
+`, D = s.div`
+  position: relative;
+  border-radius: 12px;
+  height: auto;
+  overflow: hidden;
+
+  ${({
+  theme: {
+    palette: { brand: t, background: e, grey: n }
+  },
+  variant: c,
+  isFocused: r
+}) => c === "filled" ? {
+  backgroundColor: e.primary,
+  border: "1px solid transparent"
+} : c === "outlined" ? r ? {
+  backgroundColor: n.white,
+  border: `1px solid ${t.primary.line}`
+} : {
+  backgroundColor: n.white,
+  border: `1px solid ${n[50]}`
+} : {}};
+
+  ${({
+  theme: {
+    palette: { etc: t }
+  },
+  variant: e,
+  helper: n
+}) => e === "outlined" && ((n == null ? void 0 : n.severity) === "error" || n != null && n.message) ? {
+  borderColor: t.red
+} : {}}
+
+  ${({
+  theme: {
+    palette: { grey: t }
+  },
+  variant: e,
+  disabled: n
+}) => e === "outlined" && n ? {
+  backgroundColor: t[10],
+  borderColor: t[30]
+} : {}}
+
+  ${({ fullWidth: t }) => t ? {
+  width: "100%"
+} : {}}
+`, G = s.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,
+  &::-webkit-input-placeholder,
+  &::-ms-input-placeholder,
+  &::-moz-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]};
+  }
+`, J = s.div`
+  color: ${({ theme: t, disabled: e }) => e ? 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: e }) => e ? t.palette.grey[30] : t.palette.grey[100]};
+  }
+`, K = s.p`
+  position: absolute;
+  left: 0;
+  bottom: calc(
+    ${({ theme: { spacing: t } }) => -t.content(1)}px -
+      ${({
+  theme: {
+    typography: { c3R: t }
+  }
+}) => t.lineHeight}
+  );
+  color: ${({ theme: t }) => t.palette.etc.red};
+
+  ${({
+  theme: {
+    typography: { c3R: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+})};
+
+  &:empty {
+    display: none;
+  }
+`, V = F(
+  ({
+    onChange: t,
+    value: e,
+    variant: n = "filled",
+    size: c = "large",
+    maxLength: r = 290,
+    onFocus: $,
+    onBlur: x,
+    helper: o,
+    disabled: d = !1,
+    fullWidth: w,
+    wrapperProps: g,
+    ...z
+  }, C) => {
+    const f = v(null), p = v(c === "large" ? 112.5 : 57.5), [b, m] = q(!1), S = h(), k = h(), H = h(), W = (i) => {
+      i.target.value.length > r && (i.target.value = i.target.value.slice(0, r)), typeof t == "function" && t(i);
+    }, A = (i) => {
+      m(!0), typeof $ == "function" && $(i);
+    }, I = (i) => {
+      m(!1), typeof x == "function" && x(i);
+    }, M = () => {
+      var l;
+      const i = (l = f.current) == null ? void 0 : l.querySelector("textarea");
+      i && i.focus();
+    };
+    return B(() => {
+      var l;
+      const i = (l = f.current) == null ? void 0 : l.querySelector("textarea");
+      if (i) {
+        i.style.height = "auto";
+        const { scrollHeight: T, clientHeight: j } = i;
+        i.style.height = `${p.current}px`, i.style.height = `${Math.max(T, p.current, j)}px`;
+      }
+    }, [e]), /* @__PURE__ */ u(E, { fullWidth: w, children: [
+      /* @__PURE__ */ u(
+        D,
+        {
+          ref: f,
+          isFocused: b,
+          variant: n,
+          helper: o,
+          disabled: d,
+          ...g,
+          css: g == null ? void 0 : g.inlineCSS,
+          children: [
+            /* @__PURE__ */ a(
+              G,
+              {
+                ref: C,
+                id: k,
+                onChange: W,
+                onFocus: A,
+                onBlur: I,
+                value: e,
+                disabled: d,
+                "aria-invalid": (o == null ? void 0 : o.severity) === "error",
+                "aria-describedby": o != null && o.message ? S : H,
+                minHeight: p.current,
+                ...z
+              }
+            ),
+            /* @__PURE__ */ u(
+              J,
+              {
+                disabled: d,
+                onClick: M,
+                "aria-label": `현재 ${e.length}자 입력됨, 최대 ${r}자까지 입력 가능`,
+                children: [
+                  "(",
+                  /* @__PURE__ */ a("span", { children: e.length }),
+                  " / ",
+                  r,
+                  ")"
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ a(
+        K,
+        {
+          id: S,
+          helper: o,
+          "aria-live": "assertive",
+          role: "alert",
+          children: !d && (o == null ? void 0 : o.message)
+        }
+      ),
+      /* @__PURE__ */ u(y, { visuallyHidden: !0, id: H, children: [
+        "최대 ",
+        r,
+        "까지 입력 가능"
+      ] }),
+      /* @__PURE__ */ a(y, { visuallyHidden: !0, "aria-live": "assertive", role: "alert", children: e.length >= r && `최대 입력 글자 수에 도달하였습니다. ${r} 자까지 입력이 가능합니다.` }),
+      /* @__PURE__ */ a(y, { visuallyHidden: !0, role: "status", children: e.length >= r * 0.8 && e.length < r && `최대 입력 가능한 글자 수의 80퍼센트에 도달했습니다. ${r * 0.8}자 입력됨.` })
+    ] });
+  }
+);
+export {
+  V as default
+};

package/{dist/TextArea → TextArea}/TextArea.stories.d.ts

@@ -21,5 +21,5 @@ export declare const Outlined: Story;
 export declare const Filled: Story;
 export declare const FullWidth: Story;
 export declare const Small: Story;
-export declare const Success: Story;
 export declare const Error: Story;
+export declare const WithScreenReaderSupport: Story;

package/TextField/TextField.cjs

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),u=require("react"),b=require("../Icon/Icon.cjs"),O=require("@emotion/styled"),_=t=>t&&t.__esModule?t:{default:t},f=_(O),T=f.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ${({fullWidth:t})=>t?{width:"100%"}:null};
+`,V=f.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
+  border: 1px solid transparent;
+
+  ${({theme:{palette:{green:t,grey:e,background:o,etc:n}},variant:g,helper:s})=>{let r={backgroundColor:e.white,borderColor:e[50],color:e[100]};switch(g){case"outlined":(s==null?void 0:s.severity)==="success"&&(r={...r,borderColor:`${t[70]} !important`}),(s==null?void 0:s.severity)==="error"&&(r={...r,borderColor:`${n.red} !important`});break;case"filled":r={backgroundColor:o.primary};break}return r}};
+
+  ${({theme:{spacing:t},size:e})=>{let o={maxHeight:48,padding:`${t.content(3)}px ${t.content(4)}px`,borderRadius:10};switch(e){case"2xLarge":o={maxHeight:80,padding:`${t.content(4)}px ${t.content(5)}px`,borderRadius:12,"& svg":{width:48,height:48}};break;case"xLarge":o={maxHeight:56,padding:t.content(4),borderRadius:12};break}return o}};
+
+  ${({theme:{palette:{brand:t}},variant:e,focus:o})=>e==="outlined"&&o?{borderColor:t.primary.line}:null};
+
+  ${({fullWidth:t})=>t?{width:"100%"}:null};
+
+  ${({theme:{palette:{grey:t}},variant:e,disabled:o})=>{if(!o)return null;let n={backgroundColor:t[10],borderColor:t[30]};switch(e){case"filled":n={backgroundColor:t[10]};break}return n}}
+`,M=f.default.input`
+  width: inherit;
+  flex-grow: 1;
+  border: none;
+  background-color: transparent;
+  outline: 0;
+
+  ${({theme:{typography:{b2R:t,h0R:e}},inputSize:o})=>o==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
+
+  &::placeholder, &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder {
+    ${({theme:{palette:{grey:t}},variant:e})=>({color:t[50]})};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    
+    ${({theme:{palette:{grey:t}}})=>({color:t[30],"&::placeholder":{color:t[30]}})}
+
+    &:focus {
+      outline: 'none';
+    }
+
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
+`,q=f.default.button`
+  &:empty {
+    display: none;
+  }
+`,E=f.default.div`
+  position: absolute;
+  left: 0;
+  bottom: ${({inputSize:t})=>t==="2xLarge"?"-26px":"-16px"};
+  white-space: nowrap;
+  ${({theme:{typography:{c3R:t,b1R:e}},inputSize:o})=>o==="2xLarge"?{fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}};
+
+  ${({theme:{palette:{etc:t,grey:e}},helper:o})=>{const n={color:e[100]};return(o==null?void 0:o.severity)==="error"?{color:t.red}:n}}
+
+  &:empty {
+    display: none;
+  }
+`,W=u.forwardRef(function({type:e="text",variant:o="outlined",size:n="large",startAdornment:g,endAdornment:s,fullWidth:r,helper:i,disabled:x,inlineCSS:w,onFocus:y,onBlur:m,disablePasswordVisibility:S,helperProps:$,...j},k){const C=u.useId(),p=u.useId(),[H,v]=u.useState(!1),[d,I]=u.useState(!1),a=!S&&!s&&e==="password"&&(i==null?void 0:i.severity)!=="success",L=l=>{v(!0),typeof y=="function"&&y(l)},z=l=>{v(!1),typeof m=="function"&&m(l)},F=()=>I(l=>!l),h=()=>a&&d?"text":a&&!d?"password":e;return c.jsxs(T,{fullWidth:r,children:[c.jsxs(V,{variant:o,size:n,focus:H,fullWidth:r,helper:i,disabled:x,css:w,children:[g,c.jsx(M,{ref:k,id:C,type:h(),variant:o,inputSize:n,disabled:x,"aria-invalid":(i==null?void 0:i.severity)==="error","aria-describedby":i!=null&&i.message?p:void 0,...j,onFocus:L,onBlur:z}),s,!s&&(i==null?void 0:i.severity)==="success"&&c.jsx(b.default,{name:"CheckLine",color:"green.70","aria-label":"성공",role:"img"}),c.jsxs(q,{type:"button",tabIndex:a?0:-1,"aria-pressed":a?d:void 0,onClick:F,"aria-hidden":!a,"aria-label":a&&d?"비밀번호 표시됨":"비밀번호 숨김됨",children:[a&&d&&c.jsx(b.default,{name:"EyeVisibleLine","data-testid":"EyeVisibleLine",inlineCSS:{cursor:"pointer"}}),a&&!d&&c.jsx(b.default,{name:"EyeInvisibleLine","data-testid":"EyeInvisibleLine",inlineCSS:{cursor:"pointer"}})]})]}),c.jsx(E,{id:p,className:"textfield-helper","aria-live":(i==null?void 0:i.severity)==="error"?"assertive":"off",role:(i==null?void 0:i.severity)==="error"?"alert":"status",helper:i,inputSize:n,"data-testid":"helper",...$,children:i==null?void 0:i.message})]})});exports.default=W;

package/{dist/TextField → TextField}/TextField.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 import { GeneralComponentProps, Size, Variant } from '../typings/component';
 
 export interface TextFieldProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
@@ -12,6 +12,7 @@ export interface TextFieldProps extends GeneralComponentProps<Omit<InputHTMLAttr
     };
     fullWidth?: boolean;
     disablePasswordVisibility?: boolean;
+    helperProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export default TextField;

package/TextField/TextField.es.js

@@ -0,0 +1,315 @@
+import { jsxs as g, jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as T, useId as v, useState as S } from "react";
+import b from "../Icon/Icon.es.js";
+import u from "@emotion/styled";
+const V = u.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
+`, E = u.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  border: 1px solid transparent;
+
+  ${({
+  theme: {
+    palette: { green: t, grey: e, background: o, etc: n }
+  },
+  variant: f,
+  helper: r
+}) => {
+  let s = {
+    backgroundColor: e.white,
+    borderColor: e[50],
+    color: e[100]
+  };
+  switch (f) {
+    case "outlined":
+      (r == null ? void 0 : r.severity) === "success" && (s = {
+        ...s,
+        borderColor: `${t[70]} !important`
+      }), (r == null ? void 0 : r.severity) === "error" && (s = {
+        ...s,
+        borderColor: `${n.red} !important`
+      });
+      break;
+    case "filled":
+      s = {
+        backgroundColor: o.primary
+      };
+      break;
+  }
+  return s;
+}};
+
+  ${({ theme: { spacing: t }, size: e }) => {
+  let o = {
+    maxHeight: 48,
+    padding: `${t.content(3)}px ${t.content(4)}px`,
+    borderRadius: 10
+  };
+  switch (e) {
+    case "2xLarge":
+      o = {
+        maxHeight: 80,
+        padding: `${t.content(4)}px ${t.content(5)}px`,
+        borderRadius: 12,
+        "& svg": {
+          width: 48,
+          height: 48
+        }
+      };
+      break;
+    case "xLarge":
+      o = {
+        maxHeight: 56,
+        padding: t.content(4),
+        borderRadius: 12
+      };
+      break;
+  }
+  return o;
+}};
+
+  ${({
+  theme: {
+    palette: { brand: t }
+  },
+  variant: e,
+  focus: o
+}) => e === "outlined" && o ? {
+  borderColor: t.primary.line
+} : null};
+
+  ${({ fullWidth: t }) => t ? { width: "100%" } : null};
+
+  ${({
+  theme: {
+    palette: { grey: t }
+  },
+  variant: e,
+  disabled: o
+}) => {
+  if (!o) return null;
+  let n = {
+    backgroundColor: t[10],
+    borderColor: t[30]
+  };
+  switch (e) {
+    case "filled":
+      n = {
+        backgroundColor: t[10]
+      };
+      break;
+  }
+  return n;
+}}
+`, W = u.input`
+  width: inherit;
+  flex-grow: 1;
+  border: none;
+  background-color: transparent;
+  outline: 0;
+
+  ${({
+  theme: {
+    typography: { b2R: t, h0R: e }
+  },
+  inputSize: o
+}) => o === "2xLarge" ? {
+  fontSize: e.size,
+  fontWeight: e.weight,
+  lineHeight: e.lineHeight,
+  letterSpacing: e.letterSpacing
+} : {
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+}};
+
+  &::placeholder, &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder {
+    ${({
+  theme: {
+    palette: { grey: t }
+  },
+  variant: e
+}) => ({
+  color: t[50]
+})};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    
+    ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => ({
+  color: t[30],
+  "&::placeholder": {
+    color: t[30]
+  }
+})}
+
+    &:focus {
+      outline: 'none';
+    }
+
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
+`, B = u.button`
+  &:empty {
+    display: none;
+  }
+`, M = u.div`
+  position: absolute;
+  left: 0;
+  bottom: ${({ inputSize: t }) => t === "2xLarge" ? "-26px" : "-16px"};
+  white-space: nowrap;
+  ${({
+  theme: {
+    typography: { c3R: t, b1R: e }
+  },
+  inputSize: o
+}) => o === "2xLarge" ? {
+  fontSize: e.size,
+  fontWeight: e.weight,
+  lineHeight: e.lineHeight,
+  letterSpacing: e.letterSpacing
+} : {
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+}};
+
+  ${({
+  theme: {
+    palette: { etc: t, grey: e }
+  },
+  helper: o
+}) => {
+  const n = {
+    color: e[100]
+  };
+  return (o == null ? void 0 : o.severity) === "error" ? {
+    color: t.red
+  } : n;
+}}
+
+  &:empty {
+    display: none;
+  }
+`, J = T(function({
+  type: e = "text",
+  variant: o = "outlined",
+  size: n = "large",
+  startAdornment: f,
+  endAdornment: r,
+  fullWidth: s,
+  helper: i,
+  disabled: m,
+  inlineCSS: $,
+  onFocus: x,
+  onBlur: y,
+  disablePasswordVisibility: k,
+  helperProps: C,
+  ...H
+}, L) {
+  const j = v(), p = v(), [z, w] = S(!1), [c, I] = S(!1), a = !k && !r && e === "password" && (i == null ? void 0 : i.severity) !== "success", F = (d) => {
+    w(!0), typeof x == "function" && x(d);
+  }, h = (d) => {
+    w(!1), typeof y == "function" && y(d);
+  }, O = () => I((d) => !d);
+  return /* @__PURE__ */ g(V, { fullWidth: s, children: [
+    /* @__PURE__ */ g(
+      E,
+      {
+        variant: o,
+        size: n,
+        focus: z,
+        fullWidth: s,
+        helper: i,
+        disabled: m,
+        css: $,
+        children: [
+          f,
+          /* @__PURE__ */ l(
+            W,
+            {
+              ref: L,
+              id: j,
+              type: a && c ? "text" : a && !c ? "password" : e,
+              variant: o,
+              inputSize: n,
+              disabled: m,
+              "aria-invalid": (i == null ? void 0 : i.severity) === "error",
+              "aria-describedby": i != null && i.message ? p : void 0,
+              ...H,
+              onFocus: F,
+              onBlur: h
+            }
+          ),
+          r,
+          !r && (i == null ? void 0 : i.severity) === "success" && /* @__PURE__ */ l(b, { name: "CheckLine", color: "green.70", "aria-label": "성공", role: "img" }),
+          /* @__PURE__ */ g(
+            B,
+            {
+              type: "button",
+              tabIndex: a ? 0 : -1,
+              "aria-pressed": a ? c : void 0,
+              onClick: O,
+              "aria-hidden": !a,
+              "aria-label": a && c ? "비밀번호 표시됨" : "비밀번호 숨김됨",
+              children: [
+                a && c && /* @__PURE__ */ l(
+                  b,
+                  {
+                    name: "EyeVisibleLine",
+                    "data-testid": "EyeVisibleLine",
+                    inlineCSS: {
+                      cursor: "pointer"
+                    }
+                  }
+                ),
+                a && !c && /* @__PURE__ */ l(
+                  b,
+                  {
+                    name: "EyeInvisibleLine",
+                    "data-testid": "EyeInvisibleLine",
+                    inlineCSS: {
+                      cursor: "pointer"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      M,
+      {
+        id: p,
+        className: "textfield-helper",
+        "aria-live": (i == null ? void 0 : i.severity) === "error" ? "assertive" : "off",
+        role: (i == null ? void 0 : i.severity) === "error" ? "alert" : "status",
+        helper: i,
+        inputSize: n,
+        "data-testid": "helper",
+        ...C,
+        children: i == null ? void 0 : i.message
+      }
+    )
+  ] });
+});
+export {
+  J as default
+};

package/{dist/TextField → TextField}/TextField.stories.d.ts

@@ -33,3 +33,4 @@ export declare const FullWidth: Story;
 export declare const PasswordVisibility: Story;
 export declare const Success: Story;
 export declare const Error: Story;
+export declare const WithScreenReaderSupport: Story;