@dotss/ui 0.0.10 → 0.0.12

package/Switch/Switch.es.js

@@ -1,59 +1,100 @@
-import { jsxs as m, jsx as p } from "@emotion/react/jsx-runtime";
-import { forwardRef as s } from "react";
-import i from "@emotion/styled";
-const x = i.div`
+import { jsxs as E, jsx as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as j, useState as b, useRef as v, useEffect as T } from "react";
+import h from "@emotion/styled";
+import U from "../core/useTheme.es.js";
+const B = h.div`
   position: relative;
   display: flex;
-  width: 56px;
+  min-width: 56px;
   height: 32px;
-  padding: ${({ theme: { spacing: r } }) => `${r.content(1)}px`};
+  padding: ${({ theme: { spacing: t } }) => `${t.content(1)}px`};
   align-items: center;
   border-radius: 20px;
-  transition: ${({ transitionDuration: r }) => `background-color ${r}ms ease-in-out`};
-  pointer-events: ${({ disabled: r }) => r ? "none" : "auto"};
+  transition: ${({ transitionDuration: t }) => `background-color ${t}ms ease-in-out`};
+  pointer-events: ${({ disabled: t }) => t ? "none" : "auto"};
 
   ${({
   theme: {
-    palette: { brand: r, grey: n }
+    palette: { brand: t, grey: r }
   },
   selected: o,
-  disabled: t
-}) => o && t ? {
-  backgroundColor: r.primary.bg
-} : o && !t ? {
-  backgroundColor: r.primary.main
-} : !o && t ? {
-  backgroundColor: n[20]
-} : !o && !t ? {
-  backgroundColor: n[40]
+  disabled: n
+}) => o && n ? {
+  backgroundColor: t.primary.bg
+} : o && !n ? {
+  backgroundColor: t.primary.main
+} : !o && n ? {
+  backgroundColor: r[20]
+} : !o && !n ? {
+  backgroundColor: r[40]
 } : {}}
-`, g = i.div`
+`, I = h.div`
+  position: absolute;
+  right: ${({ withLabel: t }) => t ? "24px" : "auto"};
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  transition: ${({ transitionDuration: r }) => `all ${r}ms ease-in-out`};
+  transition: ${({ transitionDuration: t }) => `all ${t}ms ease-in-out`};
   transition-property: background-color, transform, filter;
 
   ${({
   theme: {
-    palette: { grey: r, background: n }
+    palette: { grey: t, background: r },
+    spacing: o
   },
-  selected: o,
-  disabled: t
-}) => o && t ? {
-  backgroundColor: r.white,
-  transform: "translateX(100%)"
-} : o && !t ? {
-  backgroundColor: r.white,
-  filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",
-  transform: "translateX(100%)"
-} : !o && t ? {
-  backgroundColor: n.primary
-} : !o && !t ? {
-  backgroundColor: r.white,
-  filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"
-} : {}}
-`, l = i.input`
+  selected: n,
+  disabled: e,
+  labelWidth: u,
+  withLabel: s
+}) => {
+  if (s) {
+    if (n && e)
+      return {
+        backgroundColor: t.white,
+        transform: `translateX(calc(100% - ${o.content(1)}px))`
+      };
+    if (n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",
+        transform: `translateX(calc(100% - ${o.content(1)}px))`
+      };
+    if (!n && e)
+      return {
+        backgroundColor: r.primary,
+        transform: `translateX(calc(100% - ${u + o.content(1)}px))`
+      };
+    if (!n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",
+        transform: `translateX(calc(100% - ${u + o.content(1)}px))`
+      };
+  } else {
+    if (n && e)
+      return {
+        backgroundColor: t.white,
+        transform: "translateX(100%)"
+      };
+    if (n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))",
+        transform: "translateX(100%)"
+      };
+    if (!n && e)
+      return {
+        backgroundColor: r.primary
+      };
+    if (!n && !e)
+      return {
+        backgroundColor: t.white,
+        filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"
+      };
+  }
+  return {};
+}}
+`, q = h.input`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -62,50 +103,129 @@ const x = i.div`
   left: 0;
   border-radius: 20px;
   cursor: pointer;
-`, d = s(function({
-  selected: n,
+`, C = h.div`
+  position: absolute;
+  opacity: ${({ selected: t }) => t ? 1 : 0};
+  pointer-events: none;
+  transition: opacity 0.2s;
+
+  ${({ theme: { spacing: t }, variant: r }) => {
+  switch (r) {
+    case "unselected":
+      return {
+        right: t.content(2)
+      };
+    case "selected":
+      return {
+        left: t.content(2)
+      };
+    default:
+      return {};
+  }
+}}
+
+  ${({
+  theme: {
+    typography: t,
+    palette: { grey: r }
+  }
+}) => ({
+  fontSize: t.c2M.size,
+  fontWeight: t.c2M.weight,
+  lineHeight: t.c2M.lineHeight,
+  color: r.white
+})}
+`, S = h.div`
+  ${({ theme: { spacing: t }, variant: r }) => {
+  switch (r) {
+    case "unselected":
+      return {
+        marginRight: `${t.content(8)}px`
+      };
+    case "selected":
+      return {
+        marginRight: `${t.content(8)}px`
+      };
+    default:
+      return {};
+  }
+}}
+
+  visibility: hidden;
+
+  ${({
+  theme: {
+    typography: t,
+    palette: { grey: r }
+  }
+}) => ({
+  fontSize: t.c2M.size,
+  fontWeight: t.c2M.weight,
+  lineHeight: t.c2M.lineHeight,
+  color: r.white
+})}
+`, G = j(function({
+  selected: r,
   disabled: o,
-  onChange: t,
-  transitionDuration: a = 150,
-  inputProps: e,
-  thumbProps: u,
-  inlineCSS: h,
-  ...c
-}, f) {
-  return /* @__PURE__ */ m(
-    x,
+  onChange: n,
+  transitionDuration: e = 150,
+  inputProps: u,
+  thumbProps: s,
+  inlineCSS: W,
+  selectedLabel: i,
+  unselectedLabel: a,
+  ...z
+}, R) {
+  const { spacing: f } = U(), [l, M] = b(0), [m, X] = b(0), d = v(null), w = v(null), H = !!i || !!a, L = r ? m || l : l || m;
+  return T(() => {
+    const p = () => {
+      var $, k;
+      const x = (($ = w.current) == null ? void 0 : $.offsetWidth) ?? 0, g = ((k = d.current) == null ? void 0 : k.offsetWidth) ?? 0;
+      x > 0 && X(x + f.content(2)), g > 0 && M(g + f.content(2));
+    };
+    return p(), window.addEventListener("resize", p), () => {
+      window.removeEventListener("resize", p);
+    };
+  }, [f, a, i, r]), /* @__PURE__ */ E(
+    B,
     {
-      ref: f,
-      selected: n,
+      ref: R,
+      selected: r,
       disabled: o,
-      transitionDuration: a,
-      css: h,
-      ...c,
+      transitionDuration: e,
+      css: W,
+      ...z,
       children: [
-        /* @__PURE__ */ p(
-          g,
+        /* @__PURE__ */ c(
+          I,
           {
-            selected: n,
+            selected: r,
             disabled: o,
-            transitionDuration: a,
-            ...u
+            labelWidth: L,
+            withLabel: H,
+            transitionDuration: e,
+            ...s
           }
         ),
-        /* @__PURE__ */ p(
-          l,
+        /* @__PURE__ */ c(
+          q,
           {
             type: "checkbox",
             role: "switch",
-            checked: n,
+            checked: r,
             disabled: o,
-            onChange: t,
-            ...e
+            onChange: n,
+            ...u
           }
-        )
+        ),
+        a && !r && /* @__PURE__ */ c(S, { ref: d, variant: "unselected", "aria-hidden": !0, children: a }),
+        i && r && /* @__PURE__ */ c(S, { ref: w, variant: "selected", "aria-hidden": !0, children: i }),
+        a && /* @__PURE__ */ c(C, { variant: "unselected", selected: !r, "aria-hidden": r, children: a }),
+        i && /* @__PURE__ */ c(C, { variant: "selected", selected: r, "aria-hidden": !r, children: i })
       ]
     }
   );
 });
 export {
-  d as default
+  G as default
 };

package/Switch/Switch.stories.d.ts

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Label: Story;

package/Tab/Tab.es.js

@@ -40,8 +40,7 @@ const tt = D.div`
   )), _ = (t) => (n) => {
     v.current && (T(t, n.currentTarget), v.current = !1);
   }, G = (t) => {
-    if (!s.current)
-      return;
+    if (!s.current) return;
     const n = s.current.querySelectorAll(
       '[role="tab"]:not([disabled])'
     ), o = Array.from(n).findIndex((e) => e === document.activeElement);
@@ -109,8 +108,7 @@ const tt = D.div`
     };
   }, [m, l, w]), F(() => {
     const t = s.current, n = (r) => {
-      if (!g || !s.current)
-        return;
+      if (!g || !s.current) return;
       const a = x - r;
       let c = E + a;
       const p = s.current.scrollWidth - s.current.clientWidth;

package/TextArea/TextArea.cjs

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