@hua-labs/ui 1.1.0-alpha.6 → 2.0.0-alpha.10

package/dist/overlay.mjs

@@ -0,0 +1,4 @@
+"use client";
+import {a}from'./chunk-KXXIT5HL.mjs';export{a as Modal}from'./chunk-KXXIT5HL.mjs';export{g as Drawer,i as DrawerContent,j as DrawerFooter,h as DrawerHeader,a as Dropdown,f as DropdownGroup,b as DropdownItem,d as DropdownLabel,e as DropdownMenu,c as DropdownSeparator}from'./chunk-6IRMCQLW.mjs';export{a as Popover,c as PopoverContent,b as PopoverTrigger}from'./chunk-7G4VTLVB.mjs';import {l}from'./chunk-25X3JS5U.mjs';import {l as l$1}from'./chunk-EQIWSOL7.mjs';import {a as a$1}from'./chunk-UUHAXGMO.mjs';import o from'react';import {jsx,jsxs}from'react/jsx-runtime';var F=o.forwardRef(({isOpen:a$2,onClose:d,onConfirm:s,title:l$1,message:h,warning:u,confirmText:g="\uD655\uC778",cancelText:k="\uCDE8\uC18C",confirmButtonText:w,type:C="danger",loading:f=false,disabled:N=false,showInput:B=false,inputValue:p="",onInputChange:x,inputPlaceholder:M,inputLabel:S,requiredInputValue:r,showCancel:b=true,size:L="md"},T)=>{let i={danger:{icon:jsx("svg",{className:"h-6 w-6 text-red-600 dark:text-red-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"})}),bgColor:"bg-red-100 dark:bg-red-900/20",buttonColor:"bg-red-600 hover:bg-red-700 focus:ring-red-500",textColor:"text-red-600 dark:text-red-400"},warning:{icon:jsx("svg",{className:"h-6 w-6 text-yellow-600 dark:text-yellow-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"})}),bgColor:"bg-yellow-100 dark:bg-yellow-900/20",buttonColor:"bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500",textColor:"text-yellow-600 dark:text-yellow-400"},info:{icon:jsx("svg",{className:"h-6 w-6 text-indigo-600 dark:text-indigo-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})}),bgColor:"bg-indigo-100 dark:bg-indigo-900/20",buttonColor:"bg-primary hover:bg-primary/80 focus:ring-ring",textColor:"text-indigo-600 dark:text-indigo-400"},success:{icon:jsx("svg",{className:"h-6 w-6 text-green-600 dark:text-green-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),bgColor:"bg-green-100 dark:bg-green-900/20",buttonColor:"bg-green-600 hover:bg-green-700 focus:ring-green-500",textColor:"text-green-600 dark:text-green-400"},error:{icon:jsx("svg",{className:"h-6 w-6 text-red-600 dark:text-red-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})}),bgColor:"bg-red-100 dark:bg-red-900/20",buttonColor:"bg-red-600 hover:bg-red-700 focus:ring-red-500",textColor:"text-red-600 dark:text-red-400"}}[C],H=N||f||!(!B||!r||p===r);return jsx(a,{isOpen:a$2,onClose:d,showCloseButton:false,size:L,children:jsxs("div",{className:"text-center",children:[jsx("div",{className:a$1("mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-6",i.bgColor),children:i.icon}),jsxs("h3",{className:"text-xl font-semibold text-gray-900 dark:text-white mb-4",children:[" ",l$1]}),jsxs("div",{className:"mb-6",children:[" ",jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:h}),u&&jsx("p",{className:a$1("text-sm mt-3 font-medium",i.textColor),children:u})]}),B&&jsxs("div",{className:"mb-6",children:[" ",jsxs("label",{htmlFor:"confirmInput",className:"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 text-left",children:[" ",S]}),jsx("input",{type:"text",id:"confirmInput",value:p,onChange:v=>x==null?void 0:x(v.target.value),placeholder:M,className:"w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-colors"})]}),jsxs("div",{className:a$1("flex gap-3","justify-center"),children:[b&&jsx(l,{variant:"outline",onClick:d,disabled:f,className:"px-6 py-3",children:k}),jsx(l,{variant:"default",onClick:s,disabled:H,className:a$1("px-6 py-3",i.buttonColor),children:f?jsxs("div",{className:"flex items-center",children:[jsxs("svg",{className:"animate-spin -ml-1 mr-2 h-4 w-4 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"\uCC98\uB9AC \uC911..."]}):w||g})]})]})})});F.displayName="ConfirmModal";var K=o.forwardRef(({isOpen:a,open:d,onClose:s,onOpenChange:l,children:h,className:u,height:g="md",showBackdrop:k=true,backdropClassName:w,closeOnBackdropClick:C=true,closeOnEscape:f=true,showDragHandle:N=true,closable:B=true,snapPoints:p=[25,50,75,100],defaultSnap:x=50,...M},S)=>{var V;let r=(V=a!=null?a:d)!=null?V:false,b=()=>{s==null||s(),l==null||l(false);},[L,T]=o.useState(false),[D,i]=o.useState(false),[E,H]=o.useState(x),[v,Y]=o.useState(false),[j,G]=o.useState(0),[I,W]=o.useState(0),q={sm:"h-64",md:"h-96",lg:"h-[32rem]",xl:"h-[40rem]",full:"h-full"};o.useEffect(()=>{if(r){T(true),i(true);let t=setTimeout(()=>i(false),50);return ()=>clearTimeout(t)}else {i(true);let t=setTimeout(()=>{T(false),i(false);},300);return ()=>clearTimeout(t)}},[r]),o.useEffect(()=>{if(!f)return;let t=y=>{y.key==="Escape"&&r&&b();};return r&&(document.addEventListener("keydown",t),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",t),document.body.style.overflow="";}},[r,f]);let J=t=>{Y(true),G(t.touches[0].clientY),W(t.touches[0].clientY);},Q=t=>{v&&W(t.touches[0].clientY);},U=()=>{if(!v)return;Y(false);let t=I-j,y=100;if(t>y)b();else if(t<-y){let X=p.indexOf(E),Z=Math.min(X+1,p.length-1);H(p[Z]);}};return L?jsxs("div",{className:"fixed inset-0 z-50",children:[k&&jsx("div",{className:a$1("absolute inset-0 bg-black/60 backdrop-blur-md transition-opacity duration-300",D?r?"opacity-100":"opacity-0":"",w),onClick:C?b:void 0}),jsxs("div",{ref:S,className:a$1("absolute bottom-0 left-0 right-0 bg-white/95 dark:!bg-gray-800/95 backdrop-blur-xl border-t border-gray-200/50 dark:!border-gray-600/50 shadow-2xl rounded-t-lg transition-transform duration-300 ease-out pb-safe",g!=="full"?q[g]:"",D?r?"translate-y-0":"translate-y-full":"",u),style:{height:g==="full"?`${E}%`:void 0,maxHeight:g!=="full"?void 0:"100%",transform:v?`translateY(${I-j}px)`:void 0},onTouchStart:J,onTouchMove:Q,onTouchEnd:U,...M,children:[N&&jsx("div",{className:"flex justify-center pt-3 pb-2",children:jsx("div",{className:"w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full"})}),h]})]}):null});K.displayName="BottomSheet";var _=o.forwardRef(({children:a,className:d,showCloseButton:s=true,onClose:l,...h},u)=>jsxs("div",{ref:u,className:a$1("flex items-center justify-between px-6 py-4",d),...h,children:[jsx("div",{className:"flex-1",children:a}),s&&jsx("button",{onClick:l,className:"p-2 rounded-lg hover:bg-gray-100/80 dark:hover:bg-gray-800/80 transition-colors",children:jsx(l$1,{name:"close",size:20})})]}));_.displayName="BottomSheetHeader";var $=o.forwardRef(({children:a,className:d,...s},l)=>jsx("div",{ref:l,className:a$1("flex-1 px-6 pb-6 overflow-y-auto",d),...s,children:a}));$.displayName="BottomSheetContent";
+export{K as BottomSheet,$ as BottomSheetContent,_ as BottomSheetHeader,F as ConfirmModal};//# sourceMappingURL=overlay.mjs.map
+//# sourceMappingURL=overlay.mjs.map

package/dist/overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ConfirmModal.tsx","../src/components/BottomSheet.tsx"],"names":["ConfirmModal","React","isOpen","onClose","onConfirm","title","message","warning","confirmText","cancelText","confirmButtonText","type","loading","disabled","showInput","inputValue","onInputChange","inputPlaceholder","inputLabel","requiredInputValue","showCancel","size","_ref","config","jsx","isDisabled","Modal","jsxs","merge","e","Button","BottomSheet","open","onOpenChange","children","className","height","showBackdrop","backdropClassName","closeOnBackdropClick","closeOnEscape","showDragHandle","closable","snapPoints","defaultSnap","props","ref","_a","_isOpen","handleClose","isVisible","setIsVisible","isAnimating","setIsAnimating","currentHeight","setCurrentHeight","isDragging","setIsDragging","startY","setStartY","currentY","setCurrentY","heightClasses","timer","handleEscapeKey","handleTouchStart","handleTouchMove","handleTouchEnd","deltaY","threshold","currentIndex","nextIndex","BottomSheetHeader","showCloseButton","Icon","BottomSheetContent"],"mappings":"wjBA+FA,IAAMA,CAAAA,CAAeC,CAAAA,CAAM,UAAA,CACzB,CAAC,CACC,OAAAC,GAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,GAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,WAAA,CAAAC,CAAAA,CAAc,cAAA,CACd,WAAAC,CAAAA,CAAa,cAAA,CACb,iBAAA,CAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CAAO,QAAA,CACP,OAAA,CAAAC,CAAAA,CAAU,KAAA,CACV,QAAA,CAAAC,CAAAA,CAAW,KAAA,CACX,SAAA,CAAAC,EAAY,KAAA,CACZ,UAAA,CAAAC,CAAAA,CAAa,EAAA,CACb,aAAA,CAAAC,CAAAA,CACA,gBAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CACA,kBAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,CAAAA,CAAa,KACb,IAAA,CAAAC,CAAAA,CAAO,IACT,CAAA,CAAGC,CAAAA,GAAS,CAuDV,IAAMC,CAAAA,CArDa,CACjB,MAAA,CAAQ,CACN,IAAA,CACEC,GAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,wCAAA,CAAyC,IAAA,CAAK,MAAA,CAAO,MAAA,CAAO,cAAA,CAAe,OAAA,CAAQ,WAAA,CAChG,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,aAAA,CAAc,OAAA,CAAQ,cAAA,CAAe,OAAA,CAAQ,YAAa,CAAA,CAAG,CAAA,CAAE,2IAAA,CAA4I,CAAA,CACnN,CAAA,CAEF,OAAA,CAAS,+BAAA,CACT,WAAA,CAAa,gDAAA,CACb,SAAA,CAAW,gCACb,CAAA,CACA,OAAA,CAAS,CACP,KACEA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8CAAA,CAA+C,IAAA,CAAK,MAAA,CAAO,MAAA,CAAO,cAAA,CAAe,OAAA,CAAQ,WAAA,CACtG,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,aAAA,CAAc,QAAQ,cAAA,CAAe,OAAA,CAAQ,WAAA,CAAa,CAAA,CAAG,CAAA,CAAE,2IAAA,CAA4I,CAAA,CACnN,CAAA,CAEF,OAAA,CAAS,qCAAA,CACT,WAAA,CAAa,yDAAA,CACb,SAAA,CAAW,sCACb,EACA,IAAA,CAAM,CACJ,IAAA,CACEA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8CAAA,CAA+C,IAAA,CAAK,MAAA,CAAO,MAAA,CAAO,cAAA,CAAe,OAAA,CAAQ,WAAA,CACtG,QAAA,CAAAA,IAAC,MAAA,CAAA,CAAK,aAAA,CAAc,OAAA,CAAQ,cAAA,CAAe,OAAA,CAAQ,WAAA,CAAa,CAAA,CAAG,CAAA,CAAE,2DAAA,CAA4D,CAAA,CACnI,CAAA,CAEF,OAAA,CAAS,qCAAA,CACT,WAAA,CAAa,iDACb,SAAA,CAAW,sCACb,CAAA,CACA,OAAA,CAAS,CACP,IAAA,CACEA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,4CAAA,CAA6C,IAAA,CAAK,MAAA,CAAO,MAAA,CAAO,cAAA,CAAe,QAAQ,WAAA,CACpG,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,aAAA,CAAc,OAAA,CAAQ,cAAA,CAAe,OAAA,CAAQ,WAAA,CAAa,CAAA,CAAG,CAAA,CAAE,gBAAA,CAAiB,CAAA,CACxF,CAAA,CAEF,QAAS,mCAAA,CACT,WAAA,CAAa,sDAAA,CACb,SAAA,CAAW,oCACb,CAAA,CACA,KAAA,CAAO,CACL,IAAA,CACEA,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,wCAAA,CAAyC,IAAA,CAAK,OAAO,MAAA,CAAO,cAAA,CAAe,OAAA,CAAQ,WAAA,CAChG,QAAA,CAAAA,GAAAA,CAAC,MAAA,CAAA,CAAK,aAAA,CAAc,OAAA,CAAQ,cAAA,CAAe,OAAA,CAAQ,WAAA,CAAa,CAAA,CAAG,CAAA,CAAE,sBAAA,CAAuB,CAAA,CAC9F,CAAA,CAEF,OAAA,CAAS,+BAAA,CACT,WAAA,CAAa,gDAAA,CACb,SAAA,CAAW,gCACb,CACF,CAAA,CAE0Bb,CAAI,CAAA,CAExBc,CAAAA,CAAaZ,CAAAA,EAAYD,CAAAA,EAAW,EADrB,CAACE,CAAAA,EAAa,CAACK,CAAAA,EAAsBJ,CAAAA,GAAeI,CAAAA,CAAAA,CAGzE,OACEK,GAAAA,CAACE,CAAAA,CAAA,CACC,MAAA,CAAQxB,GAAAA,CACR,OAAA,CAASC,CAAAA,CACT,gBAAiB,KAAA,CACjB,IAAA,CAAMkB,CAAAA,CAEN,QAAA,CAAAM,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,aAAA,CAEb,QAAA,CAAA,CAAAH,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWI,GAAAA,CACd,sEAAA,CACAL,EAAO,OACT,CAAA,CACG,QAAA,CAAAA,CAAAA,CAAO,IAAA,CACV,CAAA,CAGAI,IAAAA,CAAC,IAAA,CAAA,CAAG,SAAA,CAAU,0DAAA,CAA2D,QAAA,CAAA,CAAA,GAAA,CACtEtB,GAAAA,CAAAA,CACH,CAAA,CAGAsB,IAAAA,CAAC,OAAI,SAAA,CAAU,MAAA,CAAO,QAAA,CAAA,CAAA,GAAA,CACpBH,GAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,0CAAA,CACV,QAAA,CAAAlB,CAAAA,CACH,CAAA,CAGCC,CAAAA,EACCiB,GAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAWI,IACZ,0BAAA,CACAL,CAAAA,CAAO,SACT,CAAA,CACG,QAAA,CAAAhB,CAAAA,CACH,CAAA,CAAA,CAEJ,CAAA,CAGCO,CAAAA,EACCa,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,MAAA,CAAO,QAAA,CAAA,CAAA,GAAA,CACpBA,KAAC,OAAA,CAAA,CAAM,OAAA,CAAQ,cAAA,CAAe,SAAA,CAAU,2EAAA,CAA4E,QAAA,CAAA,CAAA,GAAA,CACjHT,CAAAA,CAAAA,CACH,CAAA,CACAM,GAAAA,CAAC,OAAA,CAAA,CACC,IAAA,CAAK,MAAA,CACL,EAAA,CAAG,cAAA,CACH,MAAOT,CAAAA,CACP,QAAA,CAAWc,CAAAA,EAAMb,CAAAA,EAAA,IAAA,CAAA,MAAA,CAAAA,CAAAA,CAAgBa,CAAAA,CAAE,MAAA,CAAO,KAAA,CAAA,CAC1C,WAAA,CAAaZ,CAAAA,CACb,SAAA,CAAU,wMAAA,CACZ,CAAA,CAAA,CACF,EAIFU,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWC,GAAAA,CACd,YAAA,CACa,gBACf,CAAA,CACG,QAAA,CAAA,CAAAR,CAAAA,EACCI,GAAAA,CAACM,CAAAA,CAAA,CACC,OAAA,CAAQ,SAAA,CACR,QAAS3B,CAAAA,CACT,QAAA,CAAUS,CAAAA,CACV,SAAA,CAAU,WAAA,CAET,QAAA,CAAAH,CAAAA,CACH,CAAA,CAEFe,GAAAA,CAACM,CAAAA,CAAA,CACC,OAAA,CAAQ,SAAA,CACR,OAAA,CAAS1B,EACT,QAAA,CAAUqB,CAAAA,CACV,SAAA,CAAWG,GAAAA,CACT,WAAA,CACAL,CAAAA,CAAO,WACT,CAAA,CAEC,QAAA,CAAAX,CAAAA,CACCe,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,mBAAA,CACb,UAAAA,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,4CAAA,CAA6C,KAAA,CAAM,4BAAA,CAA6B,IAAA,CAAK,MAAA,CAAO,OAAA,CAAQ,WAAA,CACjH,QAAA,CAAA,CAAAH,GAAAA,CAAC,QAAA,CAAA,CAAO,SAAA,CAAU,aAAa,EAAA,CAAG,IAAA,CAAK,EAAA,CAAG,IAAA,CAAK,CAAA,CAAE,IAAA,CAAK,MAAA,CAAO,cAAA,CAAe,WAAA,CAAY,GAAA,CAAI,CAAA,CAC5FA,GAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,aAAa,IAAA,CAAK,cAAA,CAAe,CAAA,CAAE,iHAAA,CAAkH,CAAA,CAAA,CACvK,CAAA,CAAM,wBAAA,CAAA,CAER,CAAA,CAEAd,CAAAA,EAAqBF,CAAAA,CAEzB,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,CACF,EACAR,CAAAA,CAAa,WAAA,CAAc,cAAA,CCnL3B,IAAM+B,CAAAA,CAAc9B,EAAM,UAAA,CACxB,CAAC,CACC,MAAA,CAAAC,CAAAA,CACA,IAAA,CAAA8B,CAAAA,CACA,OAAA,CAAA7B,CAAAA,CACA,YAAA,CAAA8B,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CAAS,IAAA,CACT,YAAA,CAAAC,CAAAA,CAAe,IAAA,CACf,iBAAA,CAAAC,CAAAA,CACA,oBAAA,CAAAC,CAAAA,CAAuB,IAAA,CACvB,aAAA,CAAAC,CAAAA,CAAgB,IAAA,CAChB,cAAA,CAAAC,EAAiB,IAAA,CACjB,QAAA,CAAAC,CAAAA,CAAW,IAAA,CACX,UAAA,CAAAC,CAAAA,CAAa,CAAC,EAAA,CAAI,EAAA,CAAI,EAAA,CAAI,GAAG,CAAA,CAC7B,WAAA,CAAAC,CAAAA,CAAc,GACd,GAAGC,CACL,CAAA,CAAGC,CAAAA,GAAQ,CAhHb,IAAAC,CAAAA,CAkHI,IAAMC,CAAAA,CAAAA,CAAUD,CAAAA,CAAA7C,CAAAA,EAAA,IAAA,CAAAA,CAAAA,CAAU8B,CAAAA,GAAV,KAAAe,CAAAA,CAAkB,KAAA,CAE5BE,CAAAA,CAAc,IAAM,CACxB9C,CAAAA,EAAA,IAAA,EAAAA,CAAAA,EAAAA,CACA8B,CAAAA,EAAA,IAAA,EAAAA,CAAAA,CAAe,KAAA,EACjB,CAAA,CAEM,CAACiB,EAAWC,CAAY,CAAA,CAAIlD,CAAAA,CAAM,QAAA,CAAS,KAAK,CAAA,CAChD,CAACmD,CAAAA,CAAaC,CAAc,CAAA,CAAIpD,CAAAA,CAAM,QAAA,CAAS,KAAK,CAAA,CACpD,CAACqD,CAAAA,CAAeC,CAAgB,CAAA,CAAItD,CAAAA,CAAM,QAAA,CAAS2C,CAAW,CAAA,CAC9D,CAACY,CAAAA,CAAYC,CAAa,CAAA,CAAIxD,CAAAA,CAAM,QAAA,CAAS,KAAK,EAClD,CAACyD,CAAAA,CAAQC,CAAS,CAAA,CAAI1D,CAAAA,CAAM,QAAA,CAAS,CAAC,CAAA,CACtC,CAAC2D,CAAAA,CAAUC,CAAW,CAAA,CAAI5D,CAAAA,CAAM,QAAA,CAAS,CAAC,CAAA,CAE1C6D,CAAAA,CAAgB,CACpB,EAAA,CAAI,MAAA,CACJ,EAAA,CAAI,MAAA,CACJ,EAAA,CAAI,WAAA,CACJ,EAAA,CAAI,WAAA,CACJ,IAAA,CAAM,QACR,CAAA,CAEA7D,EAAM,SAAA,CAAU,IAAM,CACpB,GAAI+C,CAAAA,CAAS,CACXG,CAAAA,CAAa,IAAI,CAAA,CACjBE,CAAAA,CAAe,IAAI,CAAA,CACnB,IAAMU,CAAAA,CAAQ,WAAW,IAAMV,CAAAA,CAAe,KAAK,CAAA,CAAG,EAAE,CAAA,CACxD,OAAO,IAAM,YAAA,CAAaU,CAAK,CACjC,CAAA,KAAO,CACLV,CAAAA,CAAe,IAAI,CAAA,CACnB,IAAMU,CAAAA,CAAQ,UAAA,CAAW,IAAM,CAC7BZ,CAAAA,CAAa,KAAK,CAAA,CAClBE,CAAAA,CAAe,KAAK,EACtB,CAAA,CAAG,GAAG,EACN,OAAO,IAAM,YAAA,CAAaU,CAAK,CACjC,CACF,CAAA,CAAG,CAACf,CAAO,CAAC,CAAA,CAEZ/C,CAAAA,CAAM,SAAA,CAAU,IAAM,CACpB,GAAI,CAACuC,CAAAA,CAAe,OAEpB,IAAMwB,CAAAA,CAAmBnC,CAAAA,EAAqB,CACxCA,CAAAA,CAAE,GAAA,GAAQ,QAAA,EAAYmB,CAAAA,EACxBC,CAAAA,GAEJ,EAEA,OAAID,CAAAA,GACF,QAAA,CAAS,gBAAA,CAAiB,SAAA,CAAWgB,CAAe,CAAA,CACpD,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,QAAA,CAAW,QAAA,CAAA,CAG1B,IAAM,CACX,SAAS,mBAAA,CAAoB,SAAA,CAAWA,CAAe,CAAA,CACvD,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,QAAA,CAAW,GACjC,CACF,CAAA,CAAG,CAAChB,CAAAA,CAASR,CAAa,CAAC,CAAA,CAE3B,IAAMyB,CAAAA,CAAoBpC,CAAAA,EAAwB,CAChD4B,CAAAA,CAAc,IAAI,CAAA,CAClBE,CAAAA,CAAU9B,CAAAA,CAAE,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAO,CAAA,CAC9BgC,CAAAA,CAAYhC,CAAAA,CAAE,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAO,EAClC,CAAA,CAEMqC,CAAAA,CAAmBrC,CAAAA,EAAwB,CAC1C2B,CAAAA,EACLK,CAAAA,CAAYhC,CAAAA,CAAE,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAO,EAClC,CAAA,CAEMsC,CAAAA,CAAiB,IAAM,CAC3B,GAAI,CAACX,CAAAA,CAAY,OACjBC,CAAAA,CAAc,KAAK,CAAA,CAEnB,IAAMW,CAAAA,CAASR,CAAAA,CAAWF,CAAAA,CACpBW,CAAAA,CAAY,GAAA,CAElB,GAAID,CAAAA,CAASC,CAAAA,CAEXpB,CAAAA,EAAY,CAAA,KAAA,GACHmB,CAAAA,CAAS,CAACC,CAAAA,CAAW,CAE9B,IAAMC,CAAAA,CAAe3B,CAAAA,CAAW,OAAA,CAAQW,CAAa,CAAA,CAC/CiB,CAAAA,CAAY,IAAA,CAAK,GAAA,CAAID,CAAAA,CAAe,CAAA,CAAG3B,CAAAA,CAAW,MAAA,CAAS,CAAC,CAAA,CAClEY,EAAiBZ,CAAAA,CAAW4B,CAAS,CAAC,EACxC,CACF,CAAA,CAEA,OAAKrB,CAAAA,CAGHvB,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,oBAAA,CAEZ,QAAA,CAAA,CAAAU,CAAAA,EACCb,IAAC,KAAA,CAAA,CACC,SAAA,CAAWI,GAAAA,CACT,+EAAA,CACAwB,CAAAA,CAAeJ,CAAAA,CAAU,aAAA,CAAgB,WAAA,CAAe,EAAA,CACxDV,CACF,CAAA,CACA,OAAA,CAASC,CAAAA,CAAuBU,CAAAA,CAAc,OAChD,CAAA,CAIFtB,IAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKmB,CAAAA,CACL,SAAA,CAAWlB,GAAAA,CACT,oNAAA,CACAQ,CAAAA,GAAW,MAAA,CAAS0B,CAAAA,CAAc1B,CAAM,CAAA,CAAI,EAAA,CAC5CgB,EAAeJ,CAAAA,CAAU,eAAA,CAAkB,kBAAA,CAAsB,EAAA,CACjEb,CACF,CAAA,CACA,KAAA,CAAO,CAGL,MAAA,CAAQC,CAAAA,GAAW,MAAA,CAAS,CAAA,EAAGkB,CAAa,CAAA,CAAA,CAAA,CAAM,OAClD,SAAA,CAAWlB,CAAAA,GAAW,MAAA,CAAS,MAAA,CAAY,MAAA,CAC3C,SAAA,CAAWoB,CAAAA,CAAa,CAAA,WAAA,EAAcI,CAAAA,CAAWF,CAAM,CAAA,GAAA,CAAA,CAAQ,MACjE,CAAA,CACA,YAAA,CAAcO,EACd,WAAA,CAAaC,CAAAA,CACb,UAAA,CAAYC,CAAAA,CACX,GAAGtB,CAAAA,CAGH,QAAA,CAAA,CAAAJ,CAAAA,EACCjB,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,+BAAA,CACb,QAAA,CAAAA,GAAAA,CAAC,OAAI,SAAA,CAAU,sDAAA,CAAuD,CAAA,CACxE,CAAA,CAGDU,CAAAA,CAAAA,CACH,CAAA,CAAA,CACF,CAAA,CA9CqB,IAgDzB,CACF,EACAH,CAAAA,CAAY,WAAA,CAAc,aAAA,CA2B1B,IAAMyC,EAAoBvE,CAAAA,CAAM,UAAA,CAC9B,CAAC,CAAE,QAAA,CAAAiC,CAAAA,CAAU,SAAA,CAAAC,CAAAA,CAAW,eAAA,CAAAsC,CAAAA,CAAkB,IAAA,CAAM,OAAA,CAAAtE,CAAAA,CAAS,GAAG0C,CAAM,CAAA,CAAGC,CAAAA,GAEjEnB,IAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKmB,CAAAA,CACL,SAAA,CAAWlB,GAAAA,CAAM,6CAAA,CAA+CO,CAAS,CAAA,CACxE,GAAGU,CAAAA,CAEJ,QAAA,CAAA,CAAArB,IAAC,KAAA,CAAA,CAAI,SAAA,CAAU,QAAA,CAAU,QAAA,CAAAU,CAAAA,CAAS,CAAA,CACjCuC,CAAAA,EACCjD,GAAAA,CAAC,QAAA,CAAA,CACC,OAAA,CAASrB,CAAAA,CACT,SAAA,CAAU,iFAAA,CAEV,QAAA,CAAAqB,IAACkD,GAAAA,CAAA,CAAK,IAAA,CAAK,OAAA,CAAQ,IAAA,CAAM,EAAA,CAAI,CAAA,CAC/B,CAAA,CAAA,CAEJ,CAGN,EACAF,CAAAA,CAAkB,WAAA,CAAc,mBAAA,CAuBhC,IAAMG,EAAqB1E,CAAAA,CAAM,UAAA,CAC/B,CAAC,CAAE,QAAA,CAAAiC,CAAAA,CAAU,SAAA,CAAAC,CAAAA,CAAW,GAAGU,CAAM,CAAA,CAAGC,CAAAA,GAEhCtB,GAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKsB,CAAAA,CACL,SAAA,CAAWlB,GAAAA,CAAM,kCAAA,CAAoCO,CAAS,CAAA,CAC7D,GAAGU,CAAAA,CAEH,QAAA,CAAAX,CAAAA,CACH,CAGN,EACAyC,CAAAA,CAAmB,WAAA,CAAc,oBAAA","file":"overlay.mjs","sourcesContent":["\"use client\"\n\nimport React from \"react\"\nimport { merge } from \"../lib/utils\"\nimport { Modal } from \"./Modal\"\nimport { Button } from \"./Button\"\n\n/**\n * ConfirmModal 컴포넌트의 props / ConfirmModal component props\n * @typedef {Object} ConfirmModalProps\n * @property {boolean} isOpen - 모달 열림/닫힘 상태 / Modal open/close state\n * @property {() => void} onClose - 닫기 콜백 / Close callback\n * @property {() => void} onConfirm - 확인 콜백 / Confirm callback\n * @property {string} title - 모달 제목 / Modal title\n * @property {string} message - 모달 메시지 / Modal message\n * @property {string} [warning] - 경고 메시지 / Warning message\n * @property {string} [confirmText=\"확인\"] - 확인 버튼 텍스트 / Confirm button text\n * @property {string} [cancelText=\"취소\"] - 취소 버튼 텍스트 / Cancel button text\n * @property {string} [confirmButtonText] - 확인 버튼 커스텀 텍스트 / Custom confirm button text\n * @property {\"danger\" | \"warning\" | \"info\" | \"success\" | \"error\"} [type=\"danger\"] - 모달 타입 / Modal type\n * @property {boolean} [loading=false] - 로딩 상태 / Loading state\n * @property {boolean} [disabled=false] - 비활성화 여부 / Disabled state\n * @property {boolean} [showInput=false] - 입력 필드 표시 여부 / Show input field\n * @property {string} [inputValue=\"\"] - 입력 필드 값 / Input field value\n * @property {(value: string) => void} [onInputChange] - 입력 값 변경 콜백 / Input value change callback\n * @property {string} [inputPlaceholder] - 입력 필드 플레이스홀더 / Input field placeholder\n * @property {string} [inputLabel] - 입력 필드 라벨 / Input field label\n * @property {string} [requiredInputValue] - 필수 입력 값 (확인 버튼 활성화 조건) / Required input value (confirm button activation condition)\n * @property {boolean} [showCancel=true] - 취소 버튼 표시 여부 / Show cancel button\n * @property {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"} [size=\"md\"] - 모달 크기 / Modal size\n */\nexport interface ConfirmModalProps {\n  isOpen: boolean\n  onClose: () => void\n  onConfirm: () => void\n  title: string\n  message: string\n  warning?: string\n  confirmText?: string\n  cancelText?: string\n  confirmButtonText?: string\n  type?: \"danger\" | \"warning\" | \"info\" | \"success\" | \"error\"\n  loading?: boolean\n  disabled?: boolean\n  showInput?: boolean\n  inputValue?: string\n  onInputChange?: (value: string) => void\n  inputPlaceholder?: string\n  inputLabel?: string\n  requiredInputValue?: string\n  showCancel?: boolean\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"\n}\n\n/**\n * ConfirmModal 컴포넌트 / ConfirmModal component\n * \n * 확인/취소가 필요한 모달 컴포넌트입니다.\n * 다양한 타입(danger, warning, info, success, error)을 지원하며,\n * 입력 필드와 필수 입력 값 검증을 지원합니다.\n * \n * Modal component that requires confirmation/cancellation.\n * Supports various types (danger, warning, info, success, error),\n * and supports input fields and required input value validation.\n * \n * @component\n * @example\n * // 기본 사용 / Basic usage\n * <ConfirmModal\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   onConfirm={handleConfirm}\n *   title=\"삭제 확인\"\n *   message=\"정말 삭제하시겠습니까?\"\n * />\n * \n * @example\n * // 입력 필드와 함께 / With input field\n * <ConfirmModal\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   onConfirm={handleDelete}\n *   title=\"삭제 확인\"\n *   message=\"삭제하려면 'DELETE'를 입력하세요\"\n *   showInput\n *   inputLabel=\"확인 입력\"\n *   requiredInputValue=\"DELETE\"\n *   inputValue={inputValue}\n *   onInputChange={setInputValue}\n * />\n * \n * @param {ConfirmModalProps} props - ConfirmModal 컴포넌트의 props / ConfirmModal component props\n * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref\n * @returns {JSX.Element} ConfirmModal 컴포넌트 / ConfirmModal component\n */\nconst ConfirmModal = React.forwardRef<HTMLDivElement, ConfirmModalProps>(\n  ({\n    isOpen,\n    onClose,\n    onConfirm,\n    title,\n    message,\n    warning,\n    confirmText = \"확인\",\n    cancelText = \"취소\",\n    confirmButtonText,\n    type = \"danger\",\n    loading = false,\n    disabled = false,\n    showInput = false,\n    inputValue = \"\",\n    onInputChange,\n    inputPlaceholder,\n    inputLabel,\n    requiredInputValue,\n    showCancel = true,\n    size = \"md\"\n  }, _ref) => {\n    // 타입별 아이콘과 색상\n    const typeConfig = {\n      danger: {\n        icon: (\n          <svg className=\"h-6 w-6 text-red-600 dark:text-red-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z\" />\n          </svg>\n        ),\n        bgColor: \"bg-red-100 dark:bg-red-900/20\",\n        buttonColor: \"bg-red-600 hover:bg-red-700 focus:ring-red-500\",\n        textColor: \"text-red-600 dark:text-red-400\"\n      },\n      warning: {\n        icon: (\n          <svg className=\"h-6 w-6 text-yellow-600 dark:text-yellow-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z\" />\n          </svg>\n        ),\n        bgColor: \"bg-yellow-100 dark:bg-yellow-900/20\",\n        buttonColor: \"bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500\",\n        textColor: \"text-yellow-600 dark:text-yellow-400\"\n      },\n      info: {\n        icon: (\n          <svg className=\"h-6 w-6 text-indigo-600 dark:text-indigo-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n          </svg>\n        ),\n        bgColor: \"bg-indigo-100 dark:bg-indigo-900/20\",\n        buttonColor: \"bg-primary hover:bg-primary/80 focus:ring-ring\",\n        textColor: \"text-indigo-600 dark:text-indigo-400\"\n      },\n      success: {\n        icon: (\n          <svg className=\"h-6 w-6 text-green-600 dark:text-green-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n          </svg>\n        ),\n        bgColor: \"bg-green-100 dark:bg-green-900/20\",\n        buttonColor: \"bg-green-600 hover:bg-green-700 focus:ring-green-500\",\n        textColor: \"text-green-600 dark:text-green-400\"\n      },\n      error: {\n        icon: (\n          <svg className=\"h-6 w-6 text-red-600 dark:text-red-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n          </svg>\n        ),\n        bgColor: \"bg-red-100 dark:bg-red-900/20\",\n        buttonColor: \"bg-red-600 hover:bg-red-700 focus:ring-red-500\",\n        textColor: \"text-red-600 dark:text-red-400\"\n      }\n    }\n\n    const config = typeConfig[type]\n    const isInputValid = !showInput || !requiredInputValue || inputValue === requiredInputValue\n    const isDisabled = disabled || loading || !isInputValid\n\n    return (\n      <Modal \n        isOpen={isOpen} \n        onClose={onClose} \n        showCloseButton={false}\n        size={size}\n      >\n        <div className=\"text-center\">\n          {/* 아이콘 */}\n          <div className={merge(\n            \"mx-auto flex items-center justify-center h-16 w-16 rounded-full mb-6\", // 64px 아이콘, 24px 여백\n            config.bgColor\n          )}>\n            {config.icon}\n          </div>\n\n          {/* 제목 */}\n          <h3 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-4\"> {/* 16px 여백 */}\n            {title}\n          </h3>\n\n          {/* 메시지 */}\n          <div className=\"mb-6\"> {/* 24px 여백 */}\n            <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n              {message}\n            </p>\n            \n            {/* 경고 메시지 */}\n            {warning && (\n              <p className={merge(\n                \"text-sm mt-3 font-medium\", // 12px 여백\n                config.textColor\n              )}>\n                {warning}\n              </p>\n            )}\n          </div>\n\n          {/* 입력 필드 */}\n          {showInput && (\n            <div className=\"mb-6\"> {/* 24px 여백 */}\n              <label htmlFor=\"confirmInput\" className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 text-left\"> {/* 12px 여백 */}\n                {inputLabel}\n              </label>\n              <input\n                type=\"text\"\n                id=\"confirmInput\"\n                value={inputValue}\n                onChange={(e) => onInputChange?.(e.target.value)}\n                placeholder={inputPlaceholder}\n                className=\"w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-colors\" // 16px, 12px 패딩\n              />\n            </div>\n          )}\n\n          {/* 버튼 */}\n          <div className={merge(\n            \"flex gap-3\", // 12px 간격\n            showCancel ? \"justify-center\" : \"justify-center\"\n          )}>\n            {showCancel && (\n              <Button\n                variant=\"outline\"\n                onClick={onClose}\n                disabled={loading}\n                className=\"px-6 py-3\" // 24px, 12px 패딩\n              >\n                {cancelText}\n              </Button>\n            )}\n            <Button\n              variant=\"default\"\n              onClick={onConfirm}\n              disabled={isDisabled}\n              className={merge(\n                \"px-6 py-3\", // 24px, 12px 패딩\n                config.buttonColor\n              )}\n            >\n              {loading ? (\n                <div className=\"flex items-center\">\n                  <svg className=\"animate-spin -ml-1 mr-2 h-4 w-4 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                    <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                    <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                  </svg>\n                  처리 중...\n                </div>\n              ) : (\n                confirmButtonText || confirmText\n              )}\n            </Button>\n          </div>\n        </div>\n      </Modal>\n    )\n  }\n)\nConfirmModal.displayName = \"ConfirmModal\"\n\nexport { ConfirmModal } ","\"use client\"\n\nimport React from \"react\"\nimport { merge } from \"../lib/utils\"\nimport { Icon } from \"./Icon\"\n\n/**\n * BottomSheet 컴포넌트의 props / BottomSheet component props\n * @typedef {Object} BottomSheetProps\n * @property {boolean} open - BottomSheet 열림/닫힘 상태 / BottomSheet open/close state\n * @property {(open: boolean) => void} onOpenChange - 상태 변경 콜백 / State change callback\n * @property {React.ReactNode} children - BottomSheet 내용 / BottomSheet content\n * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class\n * @property {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"} [height=\"md\"] - BottomSheet 높이 / BottomSheet height\n * @property {boolean} [showBackdrop=true] - 배경 오버레이 표시 여부 / Show backdrop overlay\n * @property {string} [backdropClassName] - 배경 오버레이 추가 CSS 클래스 / Backdrop overlay additional CSS class\n * @property {boolean} [closeOnBackdropClick=true] - 배경 클릭 시 닫기 여부 / Close on backdrop click\n * @property {boolean} [closeOnEscape=true] - ESC 키로 닫기 여부 / Close on ESC key\n * @property {boolean} [showDragHandle=true] - 드래그 핸들 표시 여부 / Show drag handle\n * @property {number[]} [snapPoints=[25, 50, 75, 100]] - 스냅 포인트 (퍼센트) / Snap points (percentage)\n * @property {number} [defaultSnap=50] - 기본 스냅 포인트 (퍼센트) / Default snap point (percentage)\n */\ninterface BottomSheetProps {\n  /** BottomSheet 열림/닫힘 상태 / BottomSheet open/close state */\n  isOpen?: boolean\n  /** @deprecated use isOpen instead */\n  open?: boolean\n  /** BottomSheet 닫기 콜백 / BottomSheet close callback */\n  onClose?: () => void\n  /** @deprecated use onClose instead */\n  onOpenChange?: (open: boolean) => void\n  /** BottomSheet 내용 / BottomSheet content */\n  children: React.ReactNode\n  /** 추가 CSS 클래스 / Additional CSS class */\n  className?: string\n  /** BottomSheet 높이 / BottomSheet height */\n  height?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"\n  /** 배경 오버레이 표시 여부 / Show backdrop overlay */\n  showBackdrop?: boolean\n  /** 배경 오버레이 추가 CSS 클래스 / Backdrop overlay additional CSS class */\n  backdropClassName?: string\n  /** 배경 클릭 시 닫기 여부 / Close on backdrop click */\n  closeOnBackdropClick?: boolean\n  /** ESC 키로 닫기 여부 / Close on ESC key */\n  closeOnEscape?: boolean\n  /** 드래그 핸들 표시 여부 / Show drag handle */\n  showDragHandle?: boolean\n  /** 닫기 버튼 표시 여부 / Show close button */\n  closable?: boolean\n  /** 스냅 포인트 (퍼센트) / Snap points (percentage) */\n  snapPoints?: number[]\n  /** 기본 스냅 포인트 (퍼센트) / Default snap point (percentage) */\n  defaultSnap?: number\n}\n\n/**\n * BottomSheet 컴포넌트 / BottomSheet component\n * \n * 화면 하단에서 올라오는 시트 컴포넌트입니다.\n * 모바일 친화적인 UI를 제공하며, 드래그로 높이를 조절할 수 있습니다.\n * 스냅 포인트를 지원하여 특정 높이에서 멈출 수 있습니다.\n * \n * Sheet component that slides up from the bottom of the screen.\n * Provides mobile-friendly UI and allows height adjustment by dragging.\n * Supports snap points to stop at specific heights.\n * \n * @component\n * @example\n * // 기본 사용 / Basic usage\n * const [open, setOpen] = useState(false)\n * \n * <BottomSheet open={open} onOpenChange={setOpen}>\n *   <BottomSheetHeader>제목</BottomSheetHeader>\n *   <BottomSheetContent>내용</BottomSheetContent>\n * </BottomSheet>\n * \n * @example\n * // 커스텀 스냅 포인트 / Custom snap points\n * <BottomSheet \n *   open={open} \n *   onOpenChange={setOpen}\n *   snapPoints={[30, 60, 90]}\n *   defaultSnap={30}\n * >\n *   <BottomSheetContent>내용</BottomSheetContent>\n * </BottomSheet>\n * \n * @param {BottomSheetProps} props - BottomSheet 컴포넌트의 props / BottomSheet component props\n * @param {React.Ref<HTMLDivElement>} ref - BottomSheet 컨테이너 ref / BottomSheet container ref\n * @returns {JSX.Element} BottomSheet 컴포넌트 / BottomSheet component\n * \n * @todo 접근성 개선: role=\"dialog\", aria-modal=\"true\" 추가 필요 / Accessibility: Add role=\"dialog\", aria-modal=\"true\"\n * @todo 접근성 개선: aria-labelledby, aria-describedby 연결 필요 / Accessibility: Connect aria-labelledby, aria-describedby\n */\nconst BottomSheet = React.forwardRef<HTMLDivElement, BottomSheetProps>(\n  ({\n    isOpen,\n    open,\n    onClose,\n    onOpenChange,\n    children,\n    className,\n    height = \"md\",\n    showBackdrop = true,\n    backdropClassName,\n    closeOnBackdropClick = true,\n    closeOnEscape = true,\n    showDragHandle = true,\n    closable = true,\n    snapPoints = [25, 50, 75, 100],\n    defaultSnap = 50,\n    ...props\n  }, ref) => {\n    // isOpen과 open 둘 다 지원 (isOpen 우선)\n    const _isOpen = isOpen ?? open ?? false\n    // onClose와 onOpenChange 둘 다 지원\n    const handleClose = () => {\n      onClose?.()\n      onOpenChange?.(false)\n    }\n\n    const [isVisible, setIsVisible] = React.useState(false)\n    const [isAnimating, setIsAnimating] = React.useState(false)\n    const [currentHeight, setCurrentHeight] = React.useState(defaultSnap)\n    const [isDragging, setIsDragging] = React.useState(false)\n    const [startY, setStartY] = React.useState(0)\n    const [currentY, setCurrentY] = React.useState(0)\n\n    const heightClasses = {\n      sm: \"h-64\",\n      md: \"h-96\",\n      lg: \"h-[32rem]\",\n      xl: \"h-[40rem]\",\n      full: \"h-full\"\n    }\n\n    React.useEffect(() => {\n      if (_isOpen) {\n        setIsVisible(true)\n        setIsAnimating(true)\n        const timer = setTimeout(() => setIsAnimating(false), 50)\n        return () => clearTimeout(timer)\n      } else {\n        setIsAnimating(true)\n        const timer = setTimeout(() => {\n          setIsVisible(false)\n          setIsAnimating(false)\n        }, 300)\n        return () => clearTimeout(timer)\n      }\n    }, [_isOpen])\n\n    React.useEffect(() => {\n      if (!closeOnEscape) return\n\n      const handleEscapeKey = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\" && _isOpen) {\n          handleClose()\n        }\n      }\n\n      if (_isOpen) {\n        document.addEventListener(\"keydown\", handleEscapeKey)\n        document.body.style.overflow = \"hidden\"\n      }\n\n      return () => {\n        document.removeEventListener(\"keydown\", handleEscapeKey)\n        document.body.style.overflow = \"\"\n      }\n    }, [_isOpen, closeOnEscape])\n\n    const handleTouchStart = (e: React.TouchEvent) => {\n      setIsDragging(true)\n      setStartY(e.touches[0].clientY)\n      setCurrentY(e.touches[0].clientY)\n    }\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n      if (!isDragging) return\n      setCurrentY(e.touches[0].clientY)\n    }\n\n    const handleTouchEnd = () => {\n      if (!isDragging) return\n      setIsDragging(false)\n\n      const deltaY = currentY - startY\n      const threshold = 100\n\n      if (deltaY > threshold) {\n        // 아래로 드래그 - 닫기\n        handleClose()\n      } else if (deltaY < -threshold) {\n        // 위로 드래그 - 다음 스냅 포인트\n        const currentIndex = snapPoints.indexOf(currentHeight)\n        const nextIndex = Math.min(currentIndex + 1, snapPoints.length - 1)\n        setCurrentHeight(snapPoints[nextIndex])\n      }\n    }\n\n    if (!isVisible) return null\n\n    return (\n      <div className=\"fixed inset-0 z-50\">\n        {/* Backdrop */}\n        {showBackdrop && (\n          <div\n            className={merge(\n              \"absolute inset-0 bg-black/60 backdrop-blur-md transition-opacity duration-300\",\n              isAnimating ? (_isOpen ? \"opacity-100\" : \"opacity-0\") : \"\",\n              backdropClassName\n            )}\n            onClick={closeOnBackdropClick ? handleClose : undefined}\n          />\n        )}\n\n        {/* Bottom Sheet */}\n        <div\n          ref={ref}\n          className={merge(\n            \"absolute bottom-0 left-0 right-0 bg-white/95 dark:!bg-gray-800/95 backdrop-blur-xl border-t border-gray-200/50 dark:!border-gray-600/50 shadow-2xl rounded-t-lg transition-transform duration-300 ease-out pb-safe\",\n            height !== \"full\" ? heightClasses[height] : \"\",\n            isAnimating ? (_isOpen ? \"translate-y-0\" : \"translate-y-full\") : \"\",\n            className\n          )}\n          style={{\n            // height prop이 \"full\"일 때만 퍼센트 높이 사용 (스냅 포인트)\n            // 그 외에는 heightClasses의 고정 높이 사용\n            height: height === \"full\" ? `${currentHeight}%` : undefined,\n            maxHeight: height !== \"full\" ? undefined : \"100%\",\n            transform: isDragging ? `translateY(${currentY - startY}px)` : undefined\n          }}\n          onTouchStart={handleTouchStart}\n          onTouchMove={handleTouchMove}\n          onTouchEnd={handleTouchEnd}\n          {...props}\n        >\n          {/* Drag Handle */}\n          {showDragHandle && (\n            <div className=\"flex justify-center pt-3 pb-2\">\n              <div className=\"w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full\" />\n            </div>\n          )}\n\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\nBottomSheet.displayName = \"BottomSheet\"\n\n/**\n * BottomSheetHeader 컴포넌트의 props / BottomSheetHeader component props\n * @typedef {Object} BottomSheetHeaderProps\n * @property {React.ReactNode} children - 헤더 내용 / Header content\n * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class\n * @property {boolean} [showCloseButton=true] - 닫기 버튼 표시 여부 / Show close button\n * @property {() => void} [onClose] - 닫기 버튼 클릭 콜백 / Close button click callback\n */\ninterface BottomSheetHeaderProps {\n  children: React.ReactNode\n  className?: string\n  showCloseButton?: boolean\n  onClose?: () => void\n}\n\n/**\n * BottomSheetHeader 컴포넌트 / BottomSheetHeader component\n * BottomSheet의 헤더 영역을 표시합니다.\n * Displays the header area of a BottomSheet.\n * \n * @component\n * @param {BottomSheetHeaderProps} props - BottomSheetHeader 컴포넌트의 props / BottomSheetHeader component props\n * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref\n * @returns {JSX.Element} BottomSheetHeader 컴포넌트 / BottomSheetHeader component\n */\nconst BottomSheetHeader = React.forwardRef<HTMLDivElement, BottomSheetHeaderProps>(\n  ({ children, className, showCloseButton = true, onClose, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={merge(\"flex items-center justify-between px-6 py-4\", className)}\n        {...props}\n      >\n        <div className=\"flex-1\">{children}</div>\n        {showCloseButton && (\n          <button\n            onClick={onClose}\n            className=\"p-2 rounded-lg hover:bg-gray-100/80 dark:hover:bg-gray-800/80 transition-colors\"\n          >\n            <Icon name=\"close\" size={20} />\n          </button>\n        )}\n      </div>\n    )\n  }\n)\nBottomSheetHeader.displayName = \"BottomSheetHeader\"\n\n/**\n * BottomSheetContent 컴포넌트의 props / BottomSheetContent component props\n * @typedef {Object} BottomSheetContentProps\n * @property {React.ReactNode} children - 콘텐츠 / Content\n * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class\n */\ninterface BottomSheetContentProps {\n  children: React.ReactNode\n  className?: string\n}\n\n/**\n * BottomSheetContent 컴포넌트 / BottomSheetContent component\n * BottomSheet의 메인 콘텐츠 영역을 표시합니다.\n * Displays the main content area of a BottomSheet.\n * \n * @component\n * @param {BottomSheetContentProps} props - BottomSheetContent 컴포넌트의 props / BottomSheetContent component props\n * @param {React.Ref<HTMLDivElement>} ref - div 요소 ref / div element ref\n * @returns {JSX.Element} BottomSheetContent 컴포넌트 / BottomSheetContent component\n */\nconst BottomSheetContent = React.forwardRef<HTMLDivElement, BottomSheetContentProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={merge(\"flex-1 px-6 pb-6 overflow-y-auto\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\nBottomSheetContent.displayName = \"BottomSheetContent\"\n\nexport { BottomSheet, BottomSheetHeader, BottomSheetContent } "]}