@dotss/ui 1.3.0 → 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/DatePicker/DatePicker.cjs

@@ -97,4 +97,4 @@
   min-width: 100%;
   height: 6px;
   min-height: 6px;
-`,xt=30,Je=5,bt=d.forwardRef(function({children:n,onChange:r,onChangeMonth:u,value:o,date:p,minDate:h,maxDate:y,holidayDates:je,disableDates:_,showWeekHead:Ce=!1,multiple:M=!1,period:re=!1,enableMonthSelect:J=!1,showToday:Ae=!1,edgeSpacing:he=0,renderEvent:F,inlineCSS:et,monthProps:ne,...tt},rt){const{spacing:ve}=pt.default(),[$,ie]=d.useState((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date),[x,Q]=d.useState(()=>Array.isArray(o)&&o.length>0?g(o[0]):g(o)),[Y,se]=d.useState(()=>Array.isArray(o)&&o.length>1?g(o[o.length-1]):null),[j,Te]=d.useState(0),[b,X]=d.useState(1),[Re,He]=d.useState(!1),[me,ye]=d.useState(!1),Z=d.useRef(null),D=d.useRef(null),oe=d.useRef(0),We=d.useRef(0),H=d.useRef(0),A=d.useRef(!1),C=d.useRef(b),ge=d.useRef(),ae=d.useRef(null),De=d.useRef(null),v=$.getFullYear(),ce=$.getMonth(),Fe=Me(v,ce),z=q(ce),N=g(o),B=g(je),K=g(_),we=G($,h)||pe($,h),$e=O($,y)||pe($,y),le=new Date(v,ce-1),ue=new Date(v,ce+1),L=`${v}. ${z}`,E=`${v}년 ${z}월`,P=re&&!!x&&!!Y,Ye=[{year:le.getFullYear(),month:q(le.getMonth()),weeks:Me(le.getFullYear(),le.getMonth())},{year:v,month:z,weeks:Fe},{year:ue.getFullYear(),month:q(ue.getMonth()),weeks:Me(ue.getFullYear(),ue.getMonth())}],xe=typeof F=="function",nt=Ye[1].weeks.length*(xt+(xe?10:0)+ve.content(2))+ve.content(2),ze=(t,l)=>()=>{D.current&&(D.current.style.transition="none",D.current.style.cursor="grabbing"),oe.current=t,We.current=l},I=d.useCallback(()=>{if(!A.current)return;const t=j-H.current,l=Math.abs(j-t),s=j*.1;D.current&&(D.current.style.transform=`translate3d(-${j*b}px, 0, 0)`,D.current.style.cursor="grab",D.current.style.transition="transform 0.2s"),oe.current=0,H.current=0,A.current=!1,!(l<=s)&&(j<t?X(c=>c+1):j>t&&X(c=>c-1))},[j,b]),be=(t,l)=>()=>{if(!(A.current||b!==1)&&!l){if(!re){r==null||r(t,g);return}if(R(t,x)&&Array.isArray(o)&&o.length===1){Q(null),se(null),r==null||r([],g);return}else if(R(t,x)&&!Array.isArray(o)&&R(t,o)){Q(null),se(null),r==null||r([],g);return}if(!x){Q(t),r==null||r(t,g);return}if(!Y&&x){const[s,c]=O(t,x)?[x,t]:[t,x];Q(s),se(c);const i=Ze([s,c],_);r==null||r(i,g);return}x&&Y&&(Q(t),se(null),r==null||r(t,g))}},it=t=>{M&&(A.current=!0,ze(t.clientX,t.clientY)())},st=t=>{M&&ze(t.touches[0].clientX,t.touches[0].clientY)()},Le=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t-1))},Ee=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t+1))},fe=t=>{t.stopPropagation(),ye(l=>!l)},ot=()=>ye(!1),at=t=>{if(!t)return;const[l,s]=t.toString().split(".").map(Number);ie(new Date(l,s-1)),u&&typeof u=="function"&&u(g(new Date(l,s-1)),g),ye(!1)},Ie=(t,l)=>s=>{const c=new Date(t);let i=null;if(s.stopPropagation(),s.key==="ArrowRight")i=new Date(c),i.setDate(c.getDate()+1);else if(s.key==="ArrowLeft")i=new Date(c),i.setDate(c.getDate()-1);else if(s.key==="ArrowDown")i=new Date(c),i.setDate(c.getDate()+7);else if(s.key==="ArrowUp")i=new Date(c),i.setDate(c.getDate()-7);else if(s.key==="Home")i=new Date(c),i.setDate(c.getDate()-c.getDay());else if(s.key==="End")i=new Date(c),i.setDate(c.getDate()+(6-c.getDay()));else if(s.key==="PageUp")i=new Date(c),i.setMonth(c.getMonth()-1);else if(s.key==="PageDown")i=new Date(c),i.setMonth(c.getMonth()+1);else if(s.key==="Enter"||s.key===" "){s.preventDefault(),be(t,l)();return}else if(s.key==="Escape"){s.preventDefault(),r==null||r([],g);return}if(i&&Z.current){const w=c.getMonth(),m=c.getFullYear(),k=i.getMonth(),f=i.getFullYear(),T=g(i),W=Z.current.querySelector(`[data-date="${T}"]`);if(W){if(w!==k||m!==f){i>c?(Ee(),setTimeout(()=>{W.focus()},0)):(Le(),setTimeout(()=>{W.focus()},0));return}W.focus()}}};return d.useLayoutEffect(()=>{var t;Te(((t=Z.current)==null?void 0:t.clientWidth)||0)},[M]),d.useEffect(()=>{const t=()=>{var l;Te(((l=Z.current)==null?void 0:l.clientWidth)||0)};return window.addEventListener("resize",t),window.addEventListener("scroll",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t)}},[M]),d.useEffect(()=>{const t=D.current,l=(i,w,m)=>{if(!t||!A.current&&oe.current===0)return;H.current=i-oe.current;const k=w-We.current;if(A.current=A.current||Math.abs(H.current)>Je&&Math.abs(k)<Je*2,A.current&&m.cancelable&&(m.preventDefault(),m.stopPropagation()),A.current){if(we&&H.current>0){I();return}if($e&&H.current<0){I();return}Math.abs(H.current)>=10&&(t.style.transform=`translate3d(${H.current-j*b}px, 0, 0)`,t.style.cursor="grabbing")}},s=i=>l(i.touches[0].clientX,i.touches[0].clientY,i),c=i=>{A.current&&l(i.clientX,i.clientY,i)};return t==null||t.addEventListener("mousemove",c),t==null||t.addEventListener("touchmove",s),()=>{t==null||t.removeEventListener("mousemove",c),t==null||t.removeEventListener("touchmove",s)}},[j,b,I,$e,we]),d.useEffect(()=>{He(!0),ge.current=setTimeout(()=>{if(D.current&&(D.current.style.transition="none"),b>C.current){X(1);const t=new Date($.setMonth($.getMonth()+1));ie(t),u&&typeof u=="function"&&u(g(t),g),C.current=1}else if(b<C.current){const t=new Date($.setMonth($.getMonth()-1));ie(t),u&&typeof u=="function"&&u(g(t),g),X(1),C.current=1}else C.current=b;He(!1)},200)},[b,$,u]),d.useLayoutEffect(()=>{if(!re||!Array.isArray(o))return;const t=Ze(o,_);o.length<t.length&&(r==null||r(t,g))},[re,o,r,_]),d.useEffect(()=>{let t;return me&&(t=setTimeout(()=>{if(De.current){const l=De.current.querySelector("ul"),s=l==null?void 0:l.querySelector(`[data-value="${L}"]`);s==null||s.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(t)}},[me,L]),d.useEffect(()=>()=>{ge.current&&clearTimeout(ge.current)},[]),d.useEffect(()=>{p&&ie((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date)},[p]),a.jsxs(yt,{ref:rt,"aria-label":"달력",role:"application",...tt,css:et,children:[M?a.jsxs(gt,{children:[a.jsx(Xe.default,{name:"ChevronLeftLine",size:"small",onClick:Le,disabled:we,"aria-label":`이전 달로 이동, 현재 ${E}`}),J&&a.jsxs(Ge,{ref:ae,clickable:!0,onClick:fe,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:fe,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Ge,{ref:ae,id:"date-picker-title",clickable:!1,"aria-label":E,...ne,children:L}),a.jsx(Xe.default,{name:"ChevronRightLine",size:"small",onClick:Ee,disabled:$e,"aria-label":`다음 달로 이동, 현재 ${E}`})]}):a.jsxs(a.Fragment,{children:[J&&a.jsxs(Be,{ref:ae,clickable:!0,onClick:fe,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:fe,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Be,{id:"date-picker-title",clickable:!1,...ne,children:L})]}),J&&a.jsx(ft.default,{id:"date-picker-month-menu",anchorRef:ae,ref:De,open:me,onClose:ot,onChange:at,value:L,placement:M?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(t,l)=>{const s=1970+l;return Array.from({length:12},(c,i)=>{const w=i+1,m=w<10?`0${w}`:w,k=new Date(s,i+1,0).getDate(),f=`${s}-${m}-${k}`,T=`${s}-${m}-01`;return G(f,h)||O(T,y)?null:a.jsx(dt.default,{value:`${s}. ${m}`,"aria-label":`${s}년 ${m}월 선택`,children:`${s}. ${m}`},`${s}-${m}`)})})}),a.jsxs(ut.default,{flexDirection:"column",role:"grid","aria-label":`${v}년 ${z}월 달력`,children:[Ce&&a.jsxs(Dt,{id:"date-picker-week-head",role:"row",edgeSpacing:he,children:[a.jsx("span",{role:"columnheader",children:"일"}),a.jsx("span",{role:"columnheader",children:"월"}),a.jsx("span",{role:"columnheader",children:"화"}),a.jsx("span",{role:"columnheader",children:"수"}),a.jsx("span",{role:"columnheader",children:"목"}),a.jsx("span",{role:"columnheader",children:"금"}),a.jsx("span",{role:"columnheader",children:"토"})]}),a.jsx(wt,{ref:Z,role:"presentation",children:a.jsxs($t,{role:"presentation",ref:D,onMouseDown:it,onMouseUp:I,onMouseLeave:I,onTouchStart:st,onTouchEnd:I,onTouchCancel:I,style:{transform:M?`translate3d(-${j*b}px, 0, 0)`:void 0,cursor:M?"grab":void 0,maxHeight:nt},children:[M&&Ye.map(({year:t,month:l,weeks:s},c)=>a.jsx(Ke,{role:"rowgroup",edgeSpacing:he,className:c===1?"week-body-current":"",children:s.map((i,w)=>a.jsx(Pe,{role:"row",children:i.map((m,k)=>{const f=`${t}-${l}-${V(m||0)}`,T=!m,W=R(f,new Date),ke=Array.isArray(B)?B.includes(f):B===f,ee=Array.isArray(N)?N.includes(f):N===f,U=!m||(Array.isArray(K)?K.includes(f):K===f)||O(f,y)||G(f,h),Se=P&&R(f,x),de=P&&R(f,Y),ct=P&&O(f,x)&&G(f,Y),Oe=pe(f,$),lt=Oe&&w===0&&m===1||Oe&&ee,qe=F==null?void 0:F(f);return a.jsxs(Ue,{as:"button",role:"gridcell",variant:Se?"start":de?"end":ct?"middle":void 0,onClick:be(f,U),today:Ae&&W,holiday:ke,tabIndex:lt?0:-1,"aria-rowindex":w+1,"aria-colindex":k+1,selected:ee,"aria-selected":ee,"aria-disabled":U,"aria-hidden":m===null,"data-date":f,onKeyDown:Ie(f,U),children:[a.jsx("div",{"aria-label":`${Qe(f)}`,children:a.jsx("span",{children:m})}),!T&&qe,!T&&xe&&!qe&&a.jsx(Ve,{})]},`${t}-${l}-week-row-${k}-${m?f:`${w}-${k}`}`)})},`${t}-${l}-week-row-${String(i)}`))},`week-body-${t}-${l}`)),!M&&a.jsx(Ke,{role:"rowgroup",edgeSpacing:he,children:Fe.map((t,l)=>a.jsx(Pe,{role:"row",children:t.map((s,c)=>{const i=`${v}-${z}-${V(s||0)}`,w=!s,m=R(i,new Date),k=Array.isArray(B)?B.includes(i):B===i,f=Array.isArray(N)?N.includes(i):N===i,T=!s||(Array.isArray(K)?K.includes(i):K===i)||O(i,y)||G(i,h),W=P&&R(i,x),ke=P&&R(i,Y),ee=P&&O(i,x)&&G(i,Y),U=pe(i,$),Se=U&&l===0&&s===1||U&&f,de=F==null?void 0:F(i);return a.jsxs(Ue,{as:"button",variant:W?"start":ke?"end":ee?"middle":void 0,role:"gridcell",onClick:be(i,T),today:Ae&&m,holiday:k,"aria-rowindex":l+1,"aria-colindex":c+1,selected:f,"aria-selected":f,"aria-disabled":T,"aria-hidden":s===null,tabIndex:Se?0:-1,"data-date":i,onKeyDown:Ie(i,T),children:[a.jsx("div",{"aria-label":`${Qe(i)}`,children:a.jsx("span",{children:s})}),!w&&de,!w&&xe&&!de&&a.jsx(Ve,{})]},`${v}-${z}-week-row-${t}-${s?i:`${l}-${c}`}`)})},`${v}-${z}-week-row-${String(t)}`))})]})})]}),n]})});function Me(e,n){let r=[];const u=new Date(e,n,1),o=new Date(e,n+1,0).getDate(),p=u.getDay();let h=Array.from({length:p}).fill(null);for(let y=1;y<=o;y+=1)h.push(y),(h.length===7||y===o)&&(r.push(h),h=[]);return r=r.map(y=>Array.from({length:7}).map((je,_)=>y[_]||null)),r}function q(e){return String(e+1).length===1?`0${e+1}`:e+1}function V(e){return String(e).length===1?`0${e}`:e}function g(e){if(Array.isArray(e))return e.map(n=>n instanceof Date?`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`:n);if(e instanceof Date)return`${e.getFullYear()}-${q(e.getMonth())}-${V(e.getDate())}`;if(typeof e=="number"){const n=new Date(e);return`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`}return e}function Qe(e){const[n,r,u]=e.split("-");return`${n}년 ${Number(r)}월 ${Number(u)}일`}function O(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u>p}function G(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u<p}function pe(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e),u=n instanceof Date?n:new Date(n);return`${r.getFullYear()}-${r.getMonth()}`==`${u.getFullYear()}-${u.getMonth()}`}function R(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u===p}function Ze(e,n){if(!e||!Array.isArray(e)||e.length===0)return[];const r=e.map(y=>y instanceof Date?y:y===null?new Date:new Date(y)),u=new Date(Math.min(...r.map(y=>y.getTime()))),o=new Date(Math.max(...r.map(y=>y.getTime()))),p=[],h=new Date(u);for(;h<=o;){if(Array.isArray(n)&&n.includes(h)){h.setDate(h.getDate()+1);continue}else if(n===h){h.setDate(h.getDate()+1);continue}p.push(`${h.getFullYear()}-${q(h.getMonth())}-${V(h.getDate())}`),h.setDate(h.getDate()+1)}return p}exports.default=bt;
+`,xt=30,Je=5,bt=d.forwardRef(function({children:n,onChange:r,onChangeMonth:u,value:o,date:p,minDate:h,maxDate:y,holidayDates:je,disableDates:_,showWeekHead:Ce=!1,multiple:M=!1,period:re=!1,enableMonthSelect:J=!1,showToday:Ae=!1,edgeSpacing:he=0,renderEvent:F,inlineCSS:et,monthProps:ne,...tt},rt){const{spacing:ve}=pt.default(),[$,ie]=d.useState((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date),[x,Q]=d.useState(()=>Array.isArray(o)&&o.length>0?g(o[0]):g(o)),[Y,se]=d.useState(()=>Array.isArray(o)&&o.length>1?g(o[o.length-1]):null),[j,Te]=d.useState(0),[b,X]=d.useState(1),[Re,He]=d.useState(!1),[me,ye]=d.useState(!1),Z=d.useRef(null),D=d.useRef(null),oe=d.useRef(0),We=d.useRef(0),H=d.useRef(0),A=d.useRef(!1),C=d.useRef(b),ge=d.useRef(),ae=d.useRef(null),De=d.useRef(null),v=$.getFullYear(),ce=$.getMonth(),Fe=Me(v,ce),z=q(ce),N=g(o),B=g(je),K=g(_),we=G($,h)||pe($,h),$e=O($,y)||pe($,y),le=new Date(v,ce-1),ue=new Date(v,ce+1),L=`${v}. ${z}`,E=`${v}년 ${z}월`,P=re&&!!x&&!!Y,Ye=[{year:le.getFullYear(),month:q(le.getMonth()),weeks:Me(le.getFullYear(),le.getMonth())},{year:v,month:z,weeks:Fe},{year:ue.getFullYear(),month:q(ue.getMonth()),weeks:Me(ue.getFullYear(),ue.getMonth())}],xe=typeof F=="function",nt=Ye[1].weeks.length*(xt+(xe?10:0)+ve.content(2))+ve.content(2),ze=(t,l)=>()=>{D.current&&(D.current.style.transition="none",D.current.style.cursor="grabbing"),oe.current=t,We.current=l},I=d.useCallback(()=>{if(!A.current)return;const t=j-H.current,l=Math.abs(j-t),s=j*.1;D.current&&(D.current.style.transform=`translate3d(-${j*b}px, 0, 0)`,D.current.style.cursor="grab",D.current.style.transition="transform 0.2s"),oe.current=0,H.current=0,A.current=!1,!(l<=s)&&(j<t?X(c=>c+1):j>t&&X(c=>c-1))},[j,b]),be=(t,l)=>()=>{if(!(A.current||b!==1)&&!l){if(!re){r==null||r(t,g);return}if(R(t,x)&&Array.isArray(o)&&o.length===1){Q(null),se(null),r==null||r([],g);return}else if(R(t,x)&&!Array.isArray(o)&&R(t,o)){Q(null),se(null),r==null||r([],g);return}if(!x){Q(t),r==null||r(t,g);return}if(!Y&&x){const[s,c]=O(t,x)?[x,t]:[t,x];Q(s),se(c);const i=Ze([s,c],_);r==null||r(i,g);return}x&&Y&&(Q(t),se(null),r==null||r(t,g))}},it=t=>{M&&(A.current=!0,ze(t.clientX,t.clientY)())},st=t=>{M&&ze(t.touches[0].clientX,t.touches[0].clientY)()},Le=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t-1))},Ee=()=>{Re||(D.current&&(D.current.style.transition="transform 0.2s"),X(t=>t+1))},fe=t=>{t.stopPropagation(),ye(l=>!l)},ot=()=>ye(!1),at=t=>{if(!t)return;const[l,s]=t.toString().split(".").map(Number);ie(new Date(l,s-1)),u&&typeof u=="function"&&u(g(new Date(l,s-1)),g),ye(!1)},Ie=(t,l)=>s=>{const c=new Date(t);let i=null;if(s.stopPropagation(),s.key==="ArrowRight")i=new Date(c),i.setDate(c.getDate()+1);else if(s.key==="ArrowLeft")i=new Date(c),i.setDate(c.getDate()-1);else if(s.key==="ArrowDown")i=new Date(c),i.setDate(c.getDate()+7);else if(s.key==="ArrowUp")i=new Date(c),i.setDate(c.getDate()-7);else if(s.key==="Home")i=new Date(c),i.setDate(c.getDate()-c.getDay());else if(s.key==="End")i=new Date(c),i.setDate(c.getDate()+(6-c.getDay()));else if(s.key==="PageUp")i=new Date(c),i.setMonth(c.getMonth()-1);else if(s.key==="PageDown")i=new Date(c),i.setMonth(c.getMonth()+1);else if(s.key==="Enter"||s.key===" "){s.preventDefault(),be(t,l)();return}else if(s.key==="Escape"){s.preventDefault(),r==null||r([],g);return}if(i&&Z.current){const w=c.getMonth(),m=c.getFullYear(),k=i.getMonth(),f=i.getFullYear(),T=g(i),W=Z.current.querySelector(`[data-date="${T}"]`);if(W){if(w!==k||m!==f){i>c?(Ee(),setTimeout(()=>{W.focus()},0)):(Le(),setTimeout(()=>{W.focus()},0));return}W.focus()}}};return d.useLayoutEffect(()=>{var t;Te(((t=Z.current)==null?void 0:t.clientWidth)||0)},[M]),d.useEffect(()=>{const t=()=>{var l;Te(((l=Z.current)==null?void 0:l.clientWidth)||0)};return window.addEventListener("resize",t),window.addEventListener("scroll",t),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t)}},[M]),d.useEffect(()=>{const t=D.current,l=(i,w,m)=>{if(!t||!A.current&&oe.current===0)return;H.current=i-oe.current;const k=w-We.current;if(A.current=A.current||Math.abs(H.current)>Je&&Math.abs(k)<Je*2,A.current&&m.cancelable&&(m.preventDefault(),m.stopPropagation()),A.current){if(we&&H.current>0){I();return}if($e&&H.current<0){I();return}Math.abs(H.current)>=10&&(t.style.transform=`translate3d(${H.current-j*b}px, 0, 0)`,t.style.cursor="grabbing")}},s=i=>l(i.touches[0].clientX,i.touches[0].clientY,i),c=i=>{A.current&&l(i.clientX,i.clientY,i)};return t==null||t.addEventListener("mousemove",c),t==null||t.addEventListener("touchmove",s),()=>{t==null||t.removeEventListener("mousemove",c),t==null||t.removeEventListener("touchmove",s)}},[j,b,I,$e,we]),d.useEffect(()=>{He(!0),ge.current=setTimeout(()=>{if(D.current&&(D.current.style.transition="none"),b>C.current){X(1);const t=new Date($.setMonth($.getMonth()+1,1));ie(t),u&&typeof u=="function"&&u(g(t),g),C.current=1}else if(b<C.current){const t=new Date($.setMonth($.getMonth()-1,1));ie(t),u&&typeof u=="function"&&u(g(t),g),X(1),C.current=1}else C.current=b;He(!1)},200)},[b,$,u]),d.useLayoutEffect(()=>{if(!re||!Array.isArray(o))return;const t=Ze(o,_);o.length<t.length&&(r==null||r(t,g))},[re,o,r,_]),d.useEffect(()=>{let t;return me&&(t=setTimeout(()=>{if(De.current){const l=De.current.querySelector("ul"),s=l==null?void 0:l.querySelector(`[data-value="${L}"]`);s==null||s.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(t)}},[me,L]),d.useEffect(()=>()=>{ge.current&&clearTimeout(ge.current)},[]),d.useEffect(()=>{p&&ie((typeof p=="string"||typeof p=="number"?new Date(p):p)||new Date)},[p]),a.jsxs(yt,{ref:rt,"aria-label":"달력",role:"application",...tt,css:et,children:[M?a.jsxs(gt,{children:[a.jsx(Xe.default,{name:"ChevronLeftLine",size:"small",onClick:Le,disabled:we,"aria-label":`이전 달로 이동, 현재 ${E}`}),J&&a.jsxs(Ge,{ref:ae,clickable:!0,onClick:fe,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:fe,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Ge,{ref:ae,id:"date-picker-title",clickable:!1,"aria-label":E,...ne,children:L}),a.jsx(Xe.default,{name:"ChevronRightLine",size:"small",onClick:Ee,disabled:$e,"aria-label":`다음 달로 이동, 현재 ${E}`})]}):a.jsxs(a.Fragment,{children:[J&&a.jsxs(Be,{ref:ae,clickable:!0,onClick:fe,"aria-label":E,...ne,children:[L,a.jsx(Ne.default,{iconOnly:!0,isMenuOpen:!1,size:"xSmall",variant:"text",menuId:"date-picker-month-menu",onClick:fe,"aria-label":`달 변경, 현재 ${E}`,startAdornment:a.jsx(_e.default,{name:"ArrowDownFill",size:"xSmall"})})]}),!J&&a.jsx(Be,{id:"date-picker-title",clickable:!1,...ne,children:L})]}),J&&a.jsx(ft.default,{id:"date-picker-month-menu",anchorRef:ae,ref:De,open:me,onClose:ot,onChange:at,value:L,placement:M?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(t,l)=>{const s=1970+l;return Array.from({length:12},(c,i)=>{const w=i+1,m=w<10?`0${w}`:w,k=new Date(s,i+1,0).getDate(),f=`${s}-${m}-${k}`,T=`${s}-${m}-01`;return G(f,h)||O(T,y)?null:a.jsx(dt.default,{value:`${s}. ${m}`,"aria-label":`${s}년 ${m}월 선택`,children:`${s}. ${m}`},`${s}-${m}`)})})}),a.jsxs(ut.default,{flexDirection:"column",role:"grid","aria-label":`${v}년 ${z}월 달력`,children:[Ce&&a.jsxs(Dt,{id:"date-picker-week-head",role:"row",edgeSpacing:he,children:[a.jsx("span",{role:"columnheader",children:"일"}),a.jsx("span",{role:"columnheader",children:"월"}),a.jsx("span",{role:"columnheader",children:"화"}),a.jsx("span",{role:"columnheader",children:"수"}),a.jsx("span",{role:"columnheader",children:"목"}),a.jsx("span",{role:"columnheader",children:"금"}),a.jsx("span",{role:"columnheader",children:"토"})]}),a.jsx(wt,{ref:Z,role:"presentation",children:a.jsxs($t,{role:"presentation",ref:D,onMouseDown:it,onMouseUp:I,onMouseLeave:I,onTouchStart:st,onTouchEnd:I,onTouchCancel:I,style:{transform:M?`translate3d(-${j*b}px, 0, 0)`:void 0,cursor:M?"grab":void 0,maxHeight:nt},children:[M&&Ye.map(({year:t,month:l,weeks:s},c)=>a.jsx(Ke,{role:"rowgroup",edgeSpacing:he,className:c===1?"week-body-current":"",children:s.map((i,w)=>a.jsx(Pe,{role:"row",children:i.map((m,k)=>{const f=`${t}-${l}-${V(m||0)}`,T=!m,W=R(f,new Date),ke=Array.isArray(B)?B.includes(f):B===f,ee=Array.isArray(N)?N.includes(f):N===f,U=!m||(Array.isArray(K)?K.includes(f):K===f)||O(f,y)||G(f,h),Se=P&&R(f,x),de=P&&R(f,Y),ct=P&&O(f,x)&&G(f,Y),Oe=pe(f,$),lt=Oe&&w===0&&m===1||Oe&&ee,qe=F==null?void 0:F(f);return a.jsxs(Ue,{as:"button",role:"gridcell",variant:Se?"start":de?"end":ct?"middle":void 0,onClick:be(f,U),today:Ae&&W,holiday:ke,tabIndex:lt?0:-1,"aria-rowindex":w+1,"aria-colindex":k+1,selected:ee,"aria-selected":ee,"aria-disabled":U,"aria-hidden":m===null,"data-date":f,onKeyDown:Ie(f,U),children:[a.jsx("div",{"aria-label":`${Qe(f)}`,children:a.jsx("span",{children:m})}),!T&&qe,!T&&xe&&!qe&&a.jsx(Ve,{})]},`${t}-${l}-week-row-${k}-${m?f:`${w}-${k}`}`)})},`${t}-${l}-week-row-${String(i)}`))},`week-body-${t}-${l}`)),!M&&a.jsx(Ke,{role:"rowgroup",edgeSpacing:he,children:Fe.map((t,l)=>a.jsx(Pe,{role:"row",children:t.map((s,c)=>{const i=`${v}-${z}-${V(s||0)}`,w=!s,m=R(i,new Date),k=Array.isArray(B)?B.includes(i):B===i,f=Array.isArray(N)?N.includes(i):N===i,T=!s||(Array.isArray(K)?K.includes(i):K===i)||O(i,y)||G(i,h),W=P&&R(i,x),ke=P&&R(i,Y),ee=P&&O(i,x)&&G(i,Y),U=pe(i,$),Se=U&&l===0&&s===1||U&&f,de=F==null?void 0:F(i);return a.jsxs(Ue,{as:"button",variant:W?"start":ke?"end":ee?"middle":void 0,role:"gridcell",onClick:be(i,T),today:Ae&&m,holiday:k,"aria-rowindex":l+1,"aria-colindex":c+1,selected:f,"aria-selected":f,"aria-disabled":T,"aria-hidden":s===null,tabIndex:Se?0:-1,"data-date":i,onKeyDown:Ie(i,T),children:[a.jsx("div",{"aria-label":`${Qe(i)}`,children:a.jsx("span",{children:s})}),!w&&de,!w&&xe&&!de&&a.jsx(Ve,{})]},`${v}-${z}-week-row-${t}-${s?i:`${l}-${c}`}`)})},`${v}-${z}-week-row-${String(t)}`))})]})})]}),n]})});function Me(e,n){let r=[];const u=new Date(e,n,1),o=new Date(e,n+1,0).getDate(),p=u.getDay();let h=Array.from({length:p}).fill(null);for(let y=1;y<=o;y+=1)h.push(y),(h.length===7||y===o)&&(r.push(h),h=[]);return r=r.map(y=>Array.from({length:7}).map((je,_)=>y[_]||null)),r}function q(e){return String(e+1).length===1?`0${e+1}`:e+1}function V(e){return String(e).length===1?`0${e}`:e}function g(e){if(Array.isArray(e))return e.map(n=>n instanceof Date?`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`:n);if(e instanceof Date)return`${e.getFullYear()}-${q(e.getMonth())}-${V(e.getDate())}`;if(typeof e=="number"){const n=new Date(e);return`${n.getFullYear()}-${q(n.getMonth())}-${V(n.getDate())}`}return e}function Qe(e){const[n,r,u]=e.split("-");return`${n}년 ${Number(r)}월 ${Number(u)}일`}function O(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u>p}function G(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u<p}function pe(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e),u=n instanceof Date?n:new Date(n);return`${r.getFullYear()}-${r.getMonth()}`==`${u.getFullYear()}-${u.getMonth()}`}function R(e,n){if(!e||!n)return!1;const r=e instanceof Date?e:new Date(e);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const u=r.getTime(),o=n instanceof Date?n:new Date(n);o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0);const p=o.getTime();return u===p}function Ze(e,n){if(!e||!Array.isArray(e)||e.length===0)return[];const r=e.map(y=>y instanceof Date?y:y===null?new Date:new Date(y)),u=new Date(Math.min(...r.map(y=>y.getTime()))),o=new Date(Math.max(...r.map(y=>y.getTime()))),p=[],h=new Date(u);for(;h<=o;){if(Array.isArray(n)&&n.includes(h)){h.setDate(h.getDate()+1);continue}else if(n===h){h.setDate(h.getDate()+1);continue}p.push(`${h.getFullYear()}-${q(h.getMonth())}-${V(h.getDate())}`),h.setDate(h.getDate()+1)}return p}exports.default=bt;

package/DatePicker/DatePicker.es.js

@@ -451,10 +451,10 @@ const be = k.div`
     zt(!0), $t.current = setTimeout(() => {
       if (g.current && (g.current.style.transition = "none"), b > rt.current) {
         K(1);
-        const e = new Date(w.setMonth(w.getMonth() + 1));
+        const e = new Date(w.setMonth(w.getMonth() + 1, 1));
         at(e), l && typeof l == "function" && l(y(e), y), rt.current = 1;
       } else if (b < rt.current) {
-        const e = new Date(w.setMonth(w.getMonth() - 1));
+        const e = new Date(w.setMonth(w.getMonth() - 1, 1));
         at(e), l && typeof l == "function" && l(y(e), y), K(1), rt.current = 1;
       } else
         rt.current = b;

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.0",
+  "version": "1.4.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",