@dotss/ui 1.3.1 → 1.4.0

package/Button/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("@emotion/react/jsx-runtime"),b=require("react"),z=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),W=require("../utils/getIconLabel/getIconLabel.cjs"),j=require("@emotion/styled"),a=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),m=l=>l&&l.__esModule?l:{default:l},_=m(j),q=_.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),M=require("react"),j=require("../Box/Box.cjs"),N=require("../CircularProgressIndicator/CircularProgressIndicator.cjs"),E=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),T=require("../utils/getIconLabel/getIconLabel.cjs"),F=require("@emotion/styled"),s=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),V=l=>l&&l.__esModule?l:{default:l},G=V(F),J=G.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7,18 +7,19 @@
     color: inherit;
   }
 
-  ${({theme:{palette:{brand:l,grey:e}},variant:t,color:o})=>{let p={backgroundColor:l.primary.main,color:a.default(l.primary.main,[e.white,e[100]])};return t==="filled"&&o==="secondary"&&(p={backgroundColor:l.secondary,color:a.default(l.secondary,[e.white,e[100]])}),t==="filled"&&o==="tertiary"&&(p={backgroundColor:l.tertiary,color:a.default(l.tertiary,[e.white,e[100]])}),t==="outlined"&&(p={borderColor:e[50],backgroundColor:e.white,color:a.default(e.white,[e.white,e[100]])}),t==="text"&&o==="primary"&&(p={backgroundColor:"transparent",color:a.default("transparent",[e.white,e[100]])}),t==="text"&&o==="secondary"&&(p={backgroundColor:"transparent",color:e[70]}),p}};
+  ${({theme:{palette:{brand:l,grey:e}},variant:t,color:u})=>{let p={backgroundColor:l.primary.main,color:s.default(l.primary.main,[e.white,e[100]])};return t==="filled"&&u==="secondary"&&(p={backgroundColor:l.secondary,color:s.default(l.secondary,[e.white,e[100]])}),t==="filled"&&u==="tertiary"&&(p={backgroundColor:l.tertiary,color:s.default(l.tertiary,[e.white,e[100]])}),t==="outlined"&&(p={borderColor:e[50],backgroundColor:e.white,color:s.default(e.white,[e.white,e[100]])}),t==="text"&&u==="primary"&&(p={backgroundColor:"transparent",color:s.default("transparent",[e.white,e[100]])}),t==="text"&&u==="secondary"&&(p={backgroundColor:"transparent",color:e[70]}),p}};
 
-  ${({theme:{spacing:l,typography:e},variant:t,size:o,startAdornment:p,endAdornment:r,iconOnly:f})=>{let u={gap:l.content(1),padding:10,borderRadius:8,fontSize:e.b4M.size,fontWeight:e.b4M.weight,lineHeight:e.b4M.lineHeight,letterSpacing:e.b4M.letterSpacing,"& svg":{width:20,height:20}};if(o==="2xLarge"){const{h0B:i}=e;let x="26px 24px";p&&(x=t==="text"?"26px 16px 26px 12px":"26px 36px 26px 24px"),r&&(x=t==="text"?"26px 12px 26px 16px":"26px 24px 26px 36px"),p&&r&&(x=t==="text"?"26px 12px":"26px 24px"),f&&(x="26px 25px"),u={gap:l.content(3),maxHeight:100,padding:x,borderRadius:20,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:48,height:48}}}if(o==="xLarge"){const{h4B:i}=e;let x="16px 12px";p&&(x=t==="text"?"16px 8px 16px 4px":"16px 16px 16px 12px"),r&&(x=t==="text"?"16px 4px 16px 8px":"16px 12px 16px 16px"),p&&r&&(x=t==="text"?"16px 4px":"16px 12px"),f&&(x="16px 15px"),u={gap:l.content(2),maxHeight:56,padding:x,borderRadius:12,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:24,height:24}}}if(o==="large"){const{b2M:i}=e;let x="12px 8px";p&&(x=t==="text"?"12px 8px 12px 4px":"12px 12px 12px 8px"),r&&(x=t==="text"?"12px 4px 12px 8px":"12px 8px 12px 12px"),p&&r&&(x=t==="text"?"12px 4px":"12px 8px"),f&&(x="12px 11px"),u={gap:6,maxHeight:48,padding:x,borderRadius:10,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:24,height:24}}}if(o==="medium"){const{b4M:i}=e;let x="10px 8px";p&&(x=t==="text"?"10px 8px 10px 4px":"10px 10px 10px 8px"),r&&(x=t==="text"?"10px 4px 10px 8px":"10px 8px 10px 10px"),p&&r&&(x=t==="text"?"10px 4px":"10px 8px"),f&&(x="10px 9px"),u={gap:l.content(1),maxHeight:40,padding:x,borderRadius:8,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:20,height:20}}}if(o==="small"){const{c3M:i}=e;let x="8px 6px";p&&(x=t==="text"?"8px 8px 8px 4px":"8px 8px 8px 6px"),r&&(x=t==="text"?"8px 4px 8px 8px":"8px 6px 8px 8px"),p&&r&&(x=t==="text"?"8px 6px":"8px 4px"),f&&(x="8px 7px"),u={gap:l.content(1),maxHeight:32,padding:x,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}}if(o==="xSmall"){const{c3M:i}=e;let x="4px 6px";p&&(x=t==="text"?"4px 8px 4px 4px":"4px 8px 4px 6px"),r&&(x=t==="text"?"4px 4px 4px 8px":"4px 6px 4px 8px"),p&&r&&(x=t==="text"?"4px":"4px 6px"),f&&(x="4px 3px"),f?u={gap:l.content(1),maxHeight:24,width:24,height:24,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}:u={gap:l.content(1),maxHeight:24,padding:x,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}}return t==="text"&&o==="xLarge"&&(u={...u,borderWidth:1.5}),u}};
+  ${({theme:{spacing:l,typography:e},variant:t,size:u,startAdornment:p,endAdornment:o,iconOnly:f})=>{let r={gap:l.content(1),padding:10,borderRadius:8,fontSize:e.b4M.size,fontWeight:e.b4M.weight,lineHeight:e.b4M.lineHeight,letterSpacing:e.b4M.letterSpacing,"& svg":{width:20,height:20}};if(u==="2xLarge"){const{h0B:i}=e;let x="26px 24px";p&&(x=t==="text"?"26px 16px 26px 12px":"26px 36px 26px 24px"),o&&(x=t==="text"?"26px 12px 26px 16px":"26px 24px 26px 36px"),p&&o&&(x=t==="text"?"26px 12px":"26px 24px"),f&&(x="26px 25px"),r={gap:l.content(3),maxHeight:100,padding:x,borderRadius:20,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:48,height:48}}}if(u==="xLarge"){const{h4B:i}=e;let x="16px 12px";p&&(x=t==="text"?"16px 8px 16px 4px":"16px 16px 16px 12px"),o&&(x=t==="text"?"16px 4px 16px 8px":"16px 12px 16px 16px"),p&&o&&(x=t==="text"?"16px 4px":"16px 12px"),f&&(x="16px 15px"),r={gap:l.content(2),maxHeight:56,padding:x,borderRadius:12,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:24,height:24}}}if(u==="large"){const{b2M:i}=e;let x="12px 8px";p&&(x=t==="text"?"12px 8px 12px 4px":"12px 12px 12px 8px"),o&&(x=t==="text"?"12px 4px 12px 8px":"12px 8px 12px 12px"),p&&o&&(x=t==="text"?"12px 4px":"12px 8px"),f&&(x="12px 11px"),r={gap:6,maxHeight:48,padding:x,borderRadius:10,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:24,height:24}}}if(u==="medium"){const{b4M:i}=e;let x="10px 8px";p&&(x=t==="text"?"10px 8px 10px 4px":"10px 10px 10px 8px"),o&&(x=t==="text"?"10px 4px 10px 8px":"10px 8px 10px 10px"),p&&o&&(x=t==="text"?"10px 4px":"10px 8px"),f&&(x="10px 9px"),r={gap:l.content(1),maxHeight:40,padding:x,borderRadius:8,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:20,height:20}}}if(u==="small"){const{c3M:i}=e;let x="8px 6px";p&&(x=t==="text"?"8px 8px 8px 4px":"8px 8px 8px 6px"),o&&(x=t==="text"?"8px 4px 8px 8px":"8px 6px 8px 8px"),p&&o&&(x=t==="text"?"8px 6px":"8px 4px"),f&&(x="8px 7px"),r={gap:l.content(1),maxHeight:32,padding:x,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}}if(u==="xSmall"){const{c3M:i}=e;let x="4px 6px";p&&(x=t==="text"?"4px 8px 4px 4px":"4px 8px 4px 6px"),o&&(x=t==="text"?"4px 4px 4px 8px":"4px 6px 4px 8px"),p&&o&&(x=t==="text"?"4px":"4px 6px"),f&&(x="4px 3px"),f?r={gap:l.content(1),maxHeight:24,width:24,height:24,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}:r={gap:l.content(1),maxHeight:24,padding:x,borderRadius:6,fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,"& svg":{width:16,height:16}}}return t==="text"&&u==="xLarge"&&(r={...r,borderWidth:1.5}),r}};
 
   ${({rounded:l})=>l?{}:{borderRadius:"unset"}}
 
-  ${({theme:{palette:{brand:l,grey:e}},variant:t,color:o,isHoverPossible:p})=>{let r={'&:active:not([aria-disabled="true"])':{backgroundColor:l.primary.press},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:l.primary.press}}:{}};return t==="filled"&&o==="secondary"&&(r={'&:active:not([aria-disabled="true"])':{backgroundColor:e[100]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[100]}}:{}}),t==="filled"&&o==="tertiary"&&(r={'&:active:not([aria-disabled="true"])':{backgroundColor:e[70]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[70]}}:{}}),(t==="outlined"||t==="text")&&(r={'&:active:not([aria-disabled="true"])':{backgroundColor:e[10]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[10]}}:{}}),r}}
+  ${({theme:{palette:{brand:l,grey:e}},variant:t,color:u,isHoverPossible:p})=>{let o={'&:active:not([aria-disabled="true"])':{backgroundColor:l.primary.press},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:l.primary.press}}:{}};return t==="filled"&&u==="secondary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[100]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[100]}}:{}}),t==="filled"&&u==="tertiary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[70]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[70]}}:{}}),(t==="outlined"||t==="text")&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[10]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[10]}}:{}}),o}}
 
-  &[aria-disabled="true"] {
+  &[aria-disabled="true"], &[aria-busy="true"] {
     cursor: not-allowed;
-    ${({theme:{palette:{brand:l,grey:e}},variant:t,color:o})=>{let p={backgroundColor:l.primary.disable,color:a.default(l.primary.disable,[e[30],e.white])};return t==="filled"&&o==="secondary"&&(p={backgroundColor:e[10],color:a.default(e[10],[e[30],e.white])}),t==="outlined"&&(p={borderColor:e[30],backgroundColor:e[10],color:a.default(e[30],[e[30],e.white])}),t==="text"&&(p={color:a.default(e[30],[e[30],e.white])}),p}};
+
+    ${({theme:{palette:{brand:l,grey:e}},variant:t,color:u})=>{let p={backgroundColor:l.primary.disable,color:s.default(l.primary.disable,[e[30],e.white])};return t==="filled"&&u==="secondary"&&(p={backgroundColor:e[10],color:s.default(e[10],[e[30],e.white])}),t==="outlined"&&(p={borderColor:e[30],backgroundColor:e[10],color:s.default(e[30],[e[30],e.white])}),t==="text"&&(p={color:s.default(e[30],[e[30],e.white])}),p}};
   }
 
   ${({fullWidth:l})=>l?{width:"100%"}:null};
-`,$=b.forwardRef(function({tag:e="button",children:t,variant:o="filled",size:p="medium",color:r="primary",startAdornment:f,endAdornment:u,iconOnly:i,fullWidth:x,inlineCSS:n,rounded:w=!0,disabled:h,onClick:c,onKeyDown:s,...g},S){const{isHoverPossible:H}=z.default(),C=()=>{if(!i)return;if(g["aria-label"])return g["aria-label"];const d=f||u||t;if(b.isValidElement(d))return W.default(d.props.name)},k=d=>{h||c==null||c(d)},R=d=>{h||s==null||s(d)};return M.jsxs(q,{as:e,ref:S,variant:o,size:p,color:r,fullWidth:x,rounded:w,startAdornment:f,endAdornment:u,iconOnly:i,isHoverPossible:H,"aria-disabled":h,"aria-label":C(),onClick:k,onKeyDown:R,...g,css:n,children:[f,!i&&t,u]})});exports.default=$;
+`,P=M.forwardRef(function({tag:e="button",children:t,variant:u="filled",size:p="medium",color:o="primary",startAdornment:f,endAdornment:r,iconOnly:i,fullWidth:x,inlineCSS:z,rounded:W=!0,disabled:w,onClick:S,onKeyDown:H,loading:c,loadingPosition:R,loadingIndicator:h,...C},q){const{isHoverPossible:m}=E.default(),_=()=>{if(!i)return;if(C["aria-label"])return C["aria-label"];const d=f||r||t;if(M.isValidElement(d))return T.default(d.props.name)},$=d=>{w||c||S==null||S(d)},B=d=>{w||c||H==null||H(d)},L=!!c,k=h?a.jsx(a.Fragment,{children:h}):a.jsx(N.default,{loop:!0});let g=f,b=i?null:t,n=r;return L&&(R?R==="start"?(g=a.jsx(j.default,{children:k}),n=h?null:r,b=i||h?null:t):(g=h?null:f,n=a.jsx(j.default,{children:k}),b=i||h?null:t):(g=null,n=null,b=i?null:k)),a.jsxs(J,{as:e,ref:q,type:e==="button"?"button":void 0,variant:u,size:p,color:o,fullWidth:x,rounded:W,startAdornment:f,endAdornment:r,iconOnly:i,isHoverPossible:m,"aria-disabled":w||c,"aria-busy":c,"aria-label":_(),onClick:$,onKeyDown:B,...C,css:z,children:[g,b,n,c&&a.jsx(j.default,{visuallyHidden:!0,role:"status","aria-live":"polite","aria-atomic":"true",children:typeof t=="string"?`${t} 중`:"로딩 중"})]})});exports.default=P;

package/Button/Button.d.ts

@@ -11,6 +11,9 @@ export type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponent
     iconOnly?: boolean;
     fullWidth?: boolean;
     rounded?: boolean;
+    loading?: boolean;
+    loadingPosition?: 'start' | 'end';
+    loadingIndicator?: ReactNode;
 };
 type ButtonComponent<DT extends ElementType> = <T extends ElementType = DT>(props: ButtonProps<T>) => ReactNode;
 declare const Button: ButtonComponent<'button'>;

package/Button/Button.es.js

@@ -1,10 +1,12 @@
-import { jsxs as k } from "@emotion/react/jsx-runtime";
-import { forwardRef as z, isValidElement as R } from "react";
-import W from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import M from "../utils/getIconLabel/getIconLabel.es.js";
-import j from "@emotion/styled";
-import c from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const $ = j.button`
+import { jsxs as E, jsx as g, Fragment as F } from "@emotion/react/jsx-runtime";
+import { forwardRef as T, isValidElement as V } from "react";
+import k from "../Box/Box.es.js";
+import q from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
+import G from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import J from "../utils/getIconLabel/getIconLabel.es.js";
+import Q from "@emotion/styled";
+import h from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const U = Q.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -22,21 +24,21 @@ const $ = j.button`
 }) => {
   let p = {
     backgroundColor: l.primary.main,
-    color: c(l.primary.main, [e.white, e[100]])
+    color: h(l.primary.main, [e.white, e[100]])
   };
   return t === "filled" && o === "secondary" && (p = {
     backgroundColor: l.secondary,
-    color: c(l.secondary, [e.white, e[100]])
+    color: h(l.secondary, [e.white, e[100]])
   }), t === "filled" && o === "tertiary" && (p = {
     backgroundColor: l.tertiary,
-    color: c(l.tertiary, [e.white, e[100]])
+    color: h(l.tertiary, [e.white, e[100]])
   }), t === "outlined" && (p = {
     borderColor: e[50],
     backgroundColor: e.white,
-    color: c(e.white, [e.white, e[100]])
+    color: h(e.white, [e.white, e[100]])
   }), t === "text" && o === "primary" && (p = {
     backgroundColor: "transparent",
-    color: c("transparent", [e.white, e[100]])
+    color: h("transparent", [e.white, e[100]])
   }), t === "text" && o === "secondary" && (p = {
     backgroundColor: "transparent",
     color: e[70]
@@ -49,9 +51,9 @@ const $ = j.button`
   size: o,
   startAdornment: p,
   endAdornment: r,
-  iconOnly: f
+  iconOnly: u
 }) => {
-  let h = {
+  let f = {
     gap: l.content(1),
     padding: 10,
     borderRadius: 8,
@@ -67,7 +69,7 @@ const $ = j.button`
   if (o === "2xLarge") {
     const { h0B: i } = e;
     let x = "26px 24px";
-    p && (x = t === "text" ? "26px 16px 26px 12px" : "26px 36px 26px 24px"), r && (x = t === "text" ? "26px 12px 26px 16px" : "26px 24px 26px 36px"), p && r && (x = t === "text" ? "26px 12px" : "26px 24px"), f && (x = "26px 25px"), h = {
+    p && (x = t === "text" ? "26px 16px 26px 12px" : "26px 36px 26px 24px"), r && (x = t === "text" ? "26px 12px 26px 16px" : "26px 24px 26px 36px"), p && r && (x = t === "text" ? "26px 12px" : "26px 24px"), u && (x = "26px 25px"), f = {
       gap: l.content(3),
       maxHeight: 100,
       padding: x,
@@ -85,7 +87,7 @@ const $ = j.button`
   if (o === "xLarge") {
     const { h4B: i } = e;
     let x = "16px 12px";
-    p && (x = t === "text" ? "16px 8px 16px 4px" : "16px 16px 16px 12px"), r && (x = t === "text" ? "16px 4px 16px 8px" : "16px 12px 16px 16px"), p && r && (x = t === "text" ? "16px 4px" : "16px 12px"), f && (x = "16px 15px"), h = {
+    p && (x = t === "text" ? "16px 8px 16px 4px" : "16px 16px 16px 12px"), r && (x = t === "text" ? "16px 4px 16px 8px" : "16px 12px 16px 16px"), p && r && (x = t === "text" ? "16px 4px" : "16px 12px"), u && (x = "16px 15px"), f = {
       gap: l.content(2),
       maxHeight: 56,
       padding: x,
@@ -103,7 +105,7 @@ const $ = j.button`
   if (o === "large") {
     const { b2M: i } = e;
     let x = "12px 8px";
-    p && (x = t === "text" ? "12px 8px 12px 4px" : "12px 12px 12px 8px"), r && (x = t === "text" ? "12px 4px 12px 8px" : "12px 8px 12px 12px"), p && r && (x = t === "text" ? "12px 4px" : "12px 8px"), f && (x = "12px 11px"), h = {
+    p && (x = t === "text" ? "12px 8px 12px 4px" : "12px 12px 12px 8px"), r && (x = t === "text" ? "12px 4px 12px 8px" : "12px 8px 12px 12px"), p && r && (x = t === "text" ? "12px 4px" : "12px 8px"), u && (x = "12px 11px"), f = {
       gap: 6,
       maxHeight: 48,
       padding: x,
@@ -121,7 +123,7 @@ const $ = j.button`
   if (o === "medium") {
     const { b4M: i } = e;
     let x = "10px 8px";
-    p && (x = t === "text" ? "10px 8px 10px 4px" : "10px 10px 10px 8px"), r && (x = t === "text" ? "10px 4px 10px 8px" : "10px 8px 10px 10px"), p && r && (x = t === "text" ? "10px 4px" : "10px 8px"), f && (x = "10px 9px"), h = {
+    p && (x = t === "text" ? "10px 8px 10px 4px" : "10px 10px 10px 8px"), r && (x = t === "text" ? "10px 4px 10px 8px" : "10px 8px 10px 10px"), p && r && (x = t === "text" ? "10px 4px" : "10px 8px"), u && (x = "10px 9px"), f = {
       gap: l.content(1),
       maxHeight: 40,
       padding: x,
@@ -139,7 +141,7 @@ const $ = j.button`
   if (o === "small") {
     const { c3M: i } = e;
     let x = "8px 6px";
-    p && (x = t === "text" ? "8px 8px 8px 4px" : "8px 8px 8px 6px"), r && (x = t === "text" ? "8px 4px 8px 8px" : "8px 6px 8px 8px"), p && r && (x = t === "text" ? "8px 6px" : "8px 4px"), f && (x = "8px 7px"), h = {
+    p && (x = t === "text" ? "8px 8px 8px 4px" : "8px 8px 8px 6px"), r && (x = t === "text" ? "8px 4px 8px 8px" : "8px 6px 8px 8px"), p && r && (x = t === "text" ? "8px 6px" : "8px 4px"), u && (x = "8px 7px"), f = {
       gap: l.content(1),
       maxHeight: 32,
       padding: x,
@@ -157,7 +159,7 @@ const $ = j.button`
   if (o === "xSmall") {
     const { c3M: i } = e;
     let x = "4px 6px";
-    p && (x = t === "text" ? "4px 8px 4px 4px" : "4px 8px 4px 6px"), r && (x = t === "text" ? "4px 4px 4px 8px" : "4px 6px 4px 8px"), p && r && (x = t === "text" ? "4px" : "4px 6px"), f && (x = "4px 3px"), f ? h = {
+    p && (x = t === "text" ? "4px 8px 4px 4px" : "4px 8px 4px 6px"), r && (x = t === "text" ? "4px 4px 4px 8px" : "4px 6px 4px 8px"), p && r && (x = t === "text" ? "4px" : "4px 6px"), u && (x = "4px 3px"), u ? f = {
       gap: l.content(1),
       maxHeight: 24,
       width: 24,
@@ -171,7 +173,7 @@ const $ = j.button`
         width: 16,
         height: 16
       }
-    } : h = {
+    } : f = {
       gap: l.content(1),
       maxHeight: 24,
       padding: x,
@@ -186,10 +188,10 @@ const $ = j.button`
       }
     };
   }
-  return t === "text" && o === "xLarge" && (h = {
-    ...h,
+  return t === "text" && o === "xLarge" && (f = {
+    ...f,
     borderWidth: 1.5
-  }), h;
+  }), f;
 }};
 
   ${({ rounded: l }) => l ? {} : {
@@ -220,8 +222,9 @@ const $ = j.button`
   }), r;
 }}
 
-  &[aria-disabled="true"] {
+  &[aria-disabled="true"], &[aria-busy="true"] {
     cursor: not-allowed;
+
     ${({
   theme: {
     palette: { brand: l, grey: e }
@@ -231,17 +234,17 @@ const $ = j.button`
 }) => {
   let p = {
     backgroundColor: l.primary.disable,
-    color: c(l.primary.disable, [e[30], e.white])
+    color: h(l.primary.disable, [e[30], e.white])
   };
   return t === "filled" && o === "secondary" && (p = {
     backgroundColor: e[10],
-    color: c(e[10], [e[30], e.white])
+    color: h(e[10], [e[30], e.white])
   }), t === "outlined" && (p = {
     borderColor: e[30],
     backgroundColor: e[10],
-    color: c(e[30], [e[30], e.white])
+    color: h(e[30], [e[30], e.white])
   }), t === "text" && (p = {
-    color: c(e[30], [e[30], e.white])
+    color: h(e[30], [e[30], e.white])
   }), p;
 }};
   }
@@ -249,62 +252,70 @@ const $ = j.button`
   ${({ fullWidth: l }) => l ? {
   width: "100%"
 } : null};
-`, q = z(function({
+`, v = T(function({
   tag: e = "button",
   children: t,
   variant: o = "filled",
   size: p = "medium",
   color: r = "primary",
-  startAdornment: f,
-  endAdornment: h,
+  startAdornment: u,
+  endAdornment: f,
   iconOnly: i,
   fullWidth: x,
-  inlineCSS: b,
-  rounded: n = !0,
-  disabled: g,
-  onClick: d,
-  onKeyDown: u,
-  ...s
-}, w) {
-  const { isHoverPossible: S } = W(), H = () => {
+  inlineCSS: R,
+  rounded: W = !0,
+  disabled: w,
+  onClick: S,
+  onKeyDown: H,
+  loading: s,
+  loadingPosition: z,
+  loadingIndicator: c,
+  ...m
+}, M) {
+  const { isHoverPossible: j } = G(), $ = () => {
     if (!i) return;
-    if (s["aria-label"]) return s["aria-label"];
-    const a = f || h || t;
-    if (R(a))
-      return M(a.props.name);
-  }, C = (a) => {
-    g || d == null || d(a);
-  }, m = (a) => {
-    g || u == null || u(a);
-  };
-  return /* @__PURE__ */ k(
-    $,
+    if (m["aria-label"]) return m["aria-label"];
+    const a = u || f || t;
+    if (V(a))
+      return J(a.props.name);
+  }, B = (a) => {
+    w || s || S == null || S(a);
+  }, L = (a) => {
+    w || s || H == null || H(a);
+  }, N = !!s, C = c ? /* @__PURE__ */ g(F, { children: c }) : /* @__PURE__ */ g(q, { loop: !0 });
+  let d = u, b = i ? null : t, n = f;
+  return N && (z ? z === "start" ? (d = /* @__PURE__ */ g(k, { children: C }), n = c ? null : f, b = i || c ? null : t) : (d = c ? null : u, n = /* @__PURE__ */ g(k, { children: C }), b = i || c ? null : t) : (d = null, n = null, b = i ? null : C)), /* @__PURE__ */ E(
+    U,
     {
       as: e,
-      ref: w,
+      ref: M,
+      type: e === "button" ? "button" : void 0,
       variant: o,
       size: p,
       color: r,
       fullWidth: x,
-      rounded: n,
-      startAdornment: f,
-      endAdornment: h,
+      rounded: W,
+      startAdornment: u,
+      endAdornment: f,
       iconOnly: i,
-      isHoverPossible: S,
-      "aria-disabled": g,
-      "aria-label": H(),
-      onClick: C,
-      onKeyDown: m,
-      ...s,
-      css: b,
+      isHoverPossible: j,
+      "aria-disabled": w || s,
+      "aria-busy": s,
+      "aria-label": $(),
+      onClick: B,
+      onKeyDown: L,
+      ...m,
+      css: R,
       children: [
-        f,
-        !i && t,
-        h
+        d,
+        b,
+        n,
+        s && // TODO: loadingIndicator가 문자열이 아닌 경우 처리
+        /* @__PURE__ */ g(k, { visuallyHidden: !0, role: "status", "aria-live": "polite", "aria-atomic": "true", children: typeof t == "string" ? `${t} 중` : "로딩 중" })
       ]
     }
   );
 });
 export {
-  q as default
+  v as default
 };

package/Button/Button.stories.d.ts

@@ -35,4 +35,5 @@ export declare const StartAdornment: Story;
 export declare const EndAdornment: Story;
 export declare const BothAdornment: Story;
 export declare const IconOnly: Story;
+export declare const Loading: Story;
 export declare const AnchorButton: Story;

package/TextField/TextField.stories.d.ts

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

package/hooks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=t.default;exports.usePrefersReducedMotion=c.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs"),a=require("./useForm/useForm.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=t.default;exports.usePrefersReducedMotion=c.default;exports.useForm=a.default;

package/hooks/index.d.ts

@@ -5,5 +5,7 @@ export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary
 export { default as useCollapse } from './interactions/useCollapse/useCollapse';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 export { default as usePrefersReducedMotion } from './usePrefersReducedMotion/usePrefersReducedMotion';
+export { default as useForm } from './useForm/useForm';
 export type { UseFocusBoundaryProps } from './useFocusBoundary/useFocusBoundary';
 export type { UseCollapseProps } from './interactions/useCollapse/useCollapse';
+export type { FieldErrors, FormContext, FormFieldHelper, OnSubmitFn, SubmitFn, ValidateFn, UseFormProps, UseFormReturn } from './useForm/useForm';

package/hooks/index.es.js

@@ -2,15 +2,17 @@ import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.j
 import { default as a } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
 import { default as f } from "./useCheckHasFocus/useCheckHasFocus.es.js";
 import { default as d } from "./useFocusBoundary/useFocusBoundary.es.js";
-import { default as p } from "./interactions/useCollapse/useCollapse.es.js";
-import { default as m } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import { default as m } from "./interactions/useCollapse/useCollapse.es.js";
+import { default as c } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
 import { default as h } from "./usePrefersReducedMotion/usePrefersReducedMotion.es.js";
+import { default as i } from "./useForm/useForm.es.js";
 export {
   f as useCheckHasFocus,
   s as useCheckHoverPossible,
   a as useCheckKeyboardMode,
-  p as useCollapse,
+  m as useCollapse,
   d as useFocusBoundary,
-  m as useIsomorphicLayoutEffect,
+  i as useForm,
+  c as useIsomorphicLayoutEffect,
   h as usePrefersReducedMotion
 };

package/hooks/useForm/useForm.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),y=require("./useForm.utils.cjs");function O({fieldNames:S,values:u,validate:C,meta:n,scrollOptions:k,scrollOnError:d=!0,focusOnError:o=!1}){const a=t.useRef(new Map),E=t.useRef(new Map),[l,b]=t.useState({}),[V,F]=t.useState(!1),R=d||o,_=t.useCallback(e=>{const r=E.current.get(e);if(r)return r;const s=c=>{c?a.current.set(e,c):a.current.delete(e)};return E.current.set(e,s),s},[]),i=t.useCallback(e=>{requestAnimationFrame(()=>{for(const r of S){if(!(e==null?void 0:e[r]))continue;const c=a.current.get(r);if(d&&c&&c.scrollIntoView(k??y.DEFAULT_SCROLL_OPTIONS),o&&c){const g=c.querySelector('input:not([type="hidden"]):not([disabled]), textarea:not([disabled])');g==null||g.focus({preventScroll:!0})}break}})},[S,k,d,o]),w=t.useCallback(()=>{const e={};return C({values:u,meta:n,fieldRefs:a.current,error:e})},[C,u,n]),f=t.useCallback(({callEffectOnError:e=!0}={})=>{const r=w();b(r);const s=y.hasError(r);return s&&e&&R&&i(r),{isValid:!s,errors:r}},[w,R,i]),m=t.useCallback(({callEffectOnError:e=!0}={})=>{f({callEffectOnError:e})},[f]),q=t.useCallback(()=>{b({})},[]),M=t.useCallback((e,r)=>{b(s=>({...s,[e]:r}))},[]),h=t.useCallback(e=>{i(e)},[i]),I=t.useCallback(e=>{const r=l==null?void 0:l[e];if(r)return{severity:"error",message:r}},[l]),L=t.useCallback((e={})=>async()=>{F(!0);const{isValid:r,errors:s}=f({callEffectOnError:!0}),c={values:u,meta:n,fieldRefs:a.current,error:s};r?e!=null&&e.onSuccess&&await e.onSuccess(c):e!=null&&e.onError&&await e.onError(c),e!=null&&e.onSettled&&await e.onSettled(c)},[f,u,n,F]);return{isSubmitted:V,errors:l,registerField:_,clearErrors:q,triggerValidate:m,triggerSetFieldError:M,triggerEffectOnError:h,getFieldHelper:I,submit:L}}exports.default=O;

package/hooks/useForm/useForm.d.ts

@@ -0,0 +1,48 @@
+import { DEFAULT_SCROLL_OPTIONS } from './useForm.utils';
+
+export type FieldErrors<K extends string> = Partial<Record<K, string>>;
+export type FormFieldHelper = {
+    severity: 'error';
+    message?: string;
+};
+export type FormContext<V, N extends string, M> = {
+    values: V;
+    meta?: M;
+    fieldRefs: Map<N, HTMLElement | null>;
+    error: FieldErrors<N>;
+};
+export type ValidateFn<V, N extends string, M> = (ctx: FormContext<V, N, M>) => FieldErrors<N>;
+export type OnSubmitFn<V, N extends string, M> = (ctx: FormContext<V, N, M>) => void | Promise<void>;
+export type SubmitFn<V, N extends string, M> = (options?: Partial<Record<'onError' | 'onSuccess' | 'onSettled', OnSubmitFn<V, N, M>>>) => () => Promise<void>;
+export interface UseFormProps<V, N extends string, M> {
+    fieldNames: readonly N[];
+    values: V;
+    validate: ValidateFn<V, N, M>;
+    meta?: M;
+    scrollOptions?: typeof DEFAULT_SCROLL_OPTIONS;
+    scrollOnError?: boolean;
+    focusOnError?: boolean;
+}
+export interface UseFormReturn<V, N extends string, M> {
+    /** 제출 여부 */
+    isSubmitted: boolean;
+    /** 에러 상태 */
+    errors: FieldErrors<N>;
+    /** 필드 등록 */
+    registerField: (name: N) => (element: HTMLElement | null) => void;
+    /** 에러 초기화 */
+    clearErrors: () => void;
+    /** 필드 에러 도움말 반환 */
+    getFieldHelper: (name: N) => FormFieldHelper | undefined;
+    /** 제출 함수 */
+    submit: SubmitFn<V, N, M>;
+    /** [imperative] 검증 후 errors 갱신 직접 호출 */
+    triggerValidate: (options?: {
+        callEffectOnError?: boolean;
+    }) => void;
+    /** [imperative] 필드 에러 설정 직접 호출 */
+    triggerSetFieldError: (name: N, message: string) => void;
+    /** [imperative] 에러 발생 시 스크롤·포커스 처리 직접 호출 */
+    triggerEffectOnError: (errors: FieldErrors<N>) => void;
+}
+export default function useForm<V, N extends string, M = unknown>({ fieldNames, values, validate, meta, scrollOptions, scrollOnError, focusOnError }: UseFormProps<V, N, M>): UseFormReturn<V, N, M>;

package/hooks/useForm/useForm.es.js

@@ -0,0 +1,98 @@
+import { useRef as C, useState as R, useCallback as n } from "react";
+import { DEFAULT_SCROLL_OPTIONS as T, hasError as _ } from "./useForm.utils.es.js";
+function H({
+  fieldNames: b,
+  values: f,
+  validate: E,
+  meta: i,
+  scrollOptions: m,
+  scrollOnError: d = !0,
+  focusOnError: o = !1
+}) {
+  const s = C(/* @__PURE__ */ new Map()), w = C(/* @__PURE__ */ new Map()), [a, g] = R({}), [k, F] = R(!1), V = d || o, h = n((e) => {
+    const r = w.current.get(e);
+    if (r)
+      return r;
+    const c = (t) => {
+      t ? s.current.set(e, t) : s.current.delete(e);
+    };
+    return w.current.set(e, c), c;
+  }, []), u = n(
+    (e) => {
+      requestAnimationFrame(() => {
+        for (const r of b) {
+          if (!(e == null ? void 0 : e[r])) continue;
+          const t = s.current.get(r);
+          if (d && t && t.scrollIntoView(m ?? T), o && t) {
+            const S = t.querySelector(
+              'input:not([type="hidden"]):not([disabled]), textarea:not([disabled])'
+            );
+            S == null || S.focus({
+              preventScroll: !0
+            });
+          }
+          break;
+        }
+      });
+    },
+    [b, m, d, o]
+  ), y = n(() => {
+    const e = {};
+    return E({ values: f, meta: i, fieldRefs: s.current, error: e });
+  }, [E, f, i]), l = n(
+    ({ callEffectOnError: e = !0 } = {}) => {
+      const r = y();
+      g(r);
+      const c = _(r);
+      return c && e && V && u(r), { isValid: !c, errors: r };
+    },
+    [y, V, u]
+  ), I = n(
+    ({ callEffectOnError: e = !0 } = {}) => {
+      l({ callEffectOnError: e });
+    },
+    [l]
+  ), L = n(() => {
+    g({});
+  }, []), q = n((e, r) => {
+    g((c) => ({ ...c, [e]: r }));
+  }, []), A = n(
+    (e) => {
+      u(e);
+    },
+    [u]
+  ), M = n(
+    (e) => {
+      const r = a == null ? void 0 : a[e];
+      if (r)
+        return { severity: "error", message: r };
+    },
+    [a]
+  ), O = n(
+    (e = {}) => async () => {
+      F(!0);
+      const { isValid: r, errors: c } = l({ callEffectOnError: !0 }), t = {
+        values: f,
+        meta: i,
+        fieldRefs: s.current,
+        error: c
+      };
+      r ? e != null && e.onSuccess && await e.onSuccess(t) : e != null && e.onError && await e.onError(t), e != null && e.onSettled && await e.onSettled(t);
+    },
+    [l, f, i, F]
+  );
+  return {
+    isSubmitted: k,
+    errors: a,
+    registerField: h,
+    clearErrors: L,
+    triggerValidate: I,
+    triggerSetFieldError: q,
+    triggerEffectOnError: A,
+    getFieldHelper: M,
+    submit: O
+  };
+}
+export {
+  H as default
+};

package/hooks/useForm/useForm.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function t(e){return e?Object.values(e).some(r=>r!=null&&r!==""):!1}const n=Object.freeze({block:"center",inline:"center",behavior:"smooth"});exports.DEFAULT_SCROLL_OPTIONS=n;exports.hasError=t;

package/hooks/useForm/useForm.utils.d.ts

@@ -0,0 +1,4 @@
+import { FieldErrors } from './useForm';
+
+export declare function hasError<K extends string>(errors: FieldErrors<K> | null): boolean;
+export declare const DEFAULT_SCROLL_OPTIONS: ScrollIntoViewOptions;

package/hooks/useForm/useForm.utils.es.js

@@ -0,0 +1,12 @@
+function t(e) {
+  return e ? Object.values(e).some((n) => n != null && n !== "") : !1;
+}
+const r = Object.freeze({
+  block: "center",
+  inline: "center",
+  behavior: "smooth"
+});
+export {
+  r as DEFAULT_SCROLL_OPTIONS,
+  t as hasError
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",