lizaui 8.3.9 → 8.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button/index.cjs.js +1 -1
- package/dist/button/index.es.js +1 -1
- package/dist/calendar/index.cjs.js +1 -1
- package/dist/calendar/index.es.js +1 -1
- package/dist/chunks/{button-DaAJ3J_i.js → button-DFrxQHAW.js} +2 -2
- package/dist/chunks/{button-DaAJ3J_i.js.map → button-DFrxQHAW.js.map} +1 -1
- package/dist/chunks/{button-DJYse8Dw.js → button-uo4_Xad_.js} +2 -2
- package/dist/chunks/{button-DJYse8Dw.js.map → button-uo4_Xad_.js.map} +1 -1
- package/dist/chunks/features-animation-BRAvwYFN.js +3437 -0
- package/dist/chunks/features-animation-BRAvwYFN.js.map +1 -0
- package/dist/chunks/features-animation-BoXKk5t2.js +2 -0
- package/dist/chunks/features-animation-BoXKk5t2.js.map +1 -0
- package/dist/chunks/index-BbDfYVLO.js +174 -0
- package/dist/chunks/index-BbDfYVLO.js.map +1 -0
- package/dist/chunks/index-CL73JQgs.js +2 -0
- package/dist/chunks/index-CL73JQgs.js.map +1 -0
- package/dist/chunks/index-DC9BfnBH.js +208 -0
- package/dist/chunks/index-DC9BfnBH.js.map +1 -0
- package/dist/chunks/index-lrI_r1ww.js +10 -0
- package/dist/chunks/index-lrI_r1ww.js.map +1 -0
- package/dist/chunks/proxy-BwQyOw8U.js +2 -0
- package/dist/chunks/proxy-BwQyOw8U.js.map +1 -0
- package/dist/chunks/proxy-kv_Ue2k_.js +1346 -0
- package/dist/chunks/proxy-kv_Ue2k_.js.map +1 -0
- package/dist/chunks/ripple-CzU7YM2G.js +69 -0
- package/dist/chunks/{ripple-DMI95LHg.js.map → ripple-CzU7YM2G.js.map} +1 -1
- package/dist/chunks/ripple-SBteSEo3.js +2 -0
- package/dist/chunks/{ripple-DieNd7XQ.js.map → ripple-SBteSEo3.js.map} +1 -1
- package/dist/chunks/{scroll-area-BwqigcJy.js → scroll-area-B0mWCpSW.js} +2 -2
- package/dist/chunks/{scroll-area-BwqigcJy.js.map → scroll-area-B0mWCpSW.js.map} +1 -1
- package/dist/chunks/{scroll-area-1okMO4N6.js → scroll-area-CE7quLQL.js} +2 -2
- package/dist/chunks/{scroll-area-1okMO4N6.js.map → scroll-area-CE7quLQL.js.map} +1 -1
- package/dist/chunks/{select-B6a8A7js.js → select-BwMqXSzv.js} +2 -2
- package/dist/chunks/{select-B6a8A7js.js.map → select-BwMqXSzv.js.map} +1 -1
- package/dist/chunks/{select-CFefk2Xz.js → select-DGSPwoy8.js} +2 -2
- package/dist/chunks/{select-CFefk2Xz.js.map → select-DGSPwoy8.js.map} +1 -1
- package/dist/chunks/{textarea-BPsle-xc.js → textarea-BYbersWf.js} +32 -31
- package/dist/chunks/{textarea-BPsle-xc.js.map → textarea-BYbersWf.js.map} +1 -1
- package/dist/chunks/{textarea-C2i9A3jn.js → textarea-D9X4fUkV.js} +12 -12
- package/dist/chunks/{textarea-C2i9A3jn.js.map → textarea-D9X4fUkV.js.map} +1 -1
- package/dist/modal/index.cjs.js +1 -1
- package/dist/modal/index.cjs.js.map +1 -1
- package/dist/modal/index.es.js +15 -14
- package/dist/modal/index.es.js.map +1 -1
- package/dist/pagination/index.cjs.js +1 -1
- package/dist/pagination/index.es.js +3 -3
- package/dist/phone-input/index.cjs.js +1 -1
- package/dist/phone-input/index.cjs.js.map +1 -1
- package/dist/phone-input/index.es.js +62 -61
- package/dist/phone-input/index.es.js.map +1 -1
- package/dist/ripple/index.cjs.js +1 -1
- package/dist/ripple/index.es.js +1 -1
- package/dist/table/index.cjs.js +1 -1
- package/dist/table/index.cjs.js.map +1 -1
- package/dist/table/index.es.js +11 -11
- package/dist/table/index.es.js.map +1 -1
- package/dist/time-input/index.cjs.js +1 -1
- package/dist/time-input/index.es.js +2 -2
- package/dist/ui/index.cjs.js +1 -1
- package/dist/ui/index.es.js +7 -7
- package/package.json +1 -1
- package/dist/chunks/ripple-DMI95LHg.js +0 -68
- package/dist/chunks/ripple-DieNd7XQ.js +0 -2
package/dist/modal/index.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/jsx-runtime-BjzqJBtL.js"),z=require("react-dom"),i=require("react"),o=require("../chunks/utils-CxdrMFeI.js"),A=require("../chunks/button-DFrxQHAW.js"),m=require("../chunks/index-nwdlcB7h.js"),v=require("../chunks/index-lrI_r1ww.js"),h=require("../chunks/features-animation-BoXKk5t2.js"),x={ease:[.36,.66,.4,1]},y={scaleInOut:{enter:{transform:"scale(1)",opacity:1,transition:{duration:.4,ease:x.ease}},exit:{transform:"scale(1.03)",opacity:0,transition:{duration:.3,ease:x.ease}}},fade:{enter:{opacity:1,transition:{duration:.4,ease:x.ease}},exit:{opacity:0,transition:{duration:.3,ease:x.ease}}}},L=m.cva("",{variants:{backdrop:{transparent:"bg-transparent",opaque:"bg-black/50",blur:"backdrop-blur-md backdrop-saturate-150 bg-overlay/30"}},defaultVariants:{backdrop:"opaque"}}),P=m.cva("",{variants:{size:{xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl","3xl":"max-w-3xl","4xl":"max-w-4xl","5xl":"max-w-5xl",full:"my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] min-h-[100dvh] !rounded-none"}},defaultVariants:{size:"md"}}),O=m.cva("",{variants:{radius:{none:"rounded-none",sm:"rounded-sm",md:"rounded-md",lg:"rounded-lg"}},defaultVariants:{radius:"lg"}}),T=m.cva("",{variants:{placement:{center:"fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]",top:"fixed top-0 left-[50%] translate-x-[-50%] sm:mt-8",bottom:"fixed bottom-0 left-[50%] translate-x-[-50%] sm:mb-8"}},defaultVariants:{placement:"center"}}),B=m.cva("",{variants:{shadow:{none:"shadow-none",sm:"shadow-sm",md:"shadow-md",lg:"shadow-lg"}},defaultVariants:{shadow:"md"}}),j=i.forwardRef(({modalId:n,isShow:t,isVisible:a,children:s,style:l,classNameOverlay:u="",styleContainer:c,onClickOutside:d,classNameDialog:w="modal-custom-dialog",classNameContent:b="",backdrop:R="opaque",size:E="md",isKeyboardDismissDisabled:f=!1,shadow:N="md",radius:M="lg",placement:k="center"},q)=>{const I=i.useRef(null);if(i.useEffect(()=>(typeof window<"u"&&a&&document.body.classList.add("modal-open"),()=>{typeof window<"u"&&document.body.classList.remove("modal-open")}),[a]),i.useEffect(()=>{const r=V=>{V.key==="Escape"&&!f&&d?.()};return t&&document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[t,f,d]),typeof window>"u")return null;const p=document.getElementById("modal-root");return p?z.createPortal(e.jsxRuntimeExports.jsx(v.AnimatePresence,{children:t&&e.jsxRuntimeExports.jsx(v.LazyMotion,{features:()=>Promise.resolve().then(()=>require("../chunks/index-CL73JQgs.js")).then(r=>r.domAnimation),children:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(h.m.div,{initial:"exit",animate:"enter",exit:"exit",variants:y.fade,className:o.cn("fixed inset-0 z-50",L({backdrop:R}),u),onClick:d,"aria-hidden":!t,role:"dialog","aria-modal":"true",tabIndex:-1,ref:I},"modal-overlay"),e.jsxRuntimeExports.jsx(h.m.div,{initial:"exit",animate:"enter",exit:"exit",variants:y.scaleInOut,ref:q,id:n,onClick:r=>r.stopPropagation(),className:o.cn(" z-50 w-full rounded-lg shadow-lg bg-content1",T({placement:k}),P({size:E}),O({radius:M}),B({shadow:N}),w),style:l,children:e.jsxRuntimeExports.jsx("div",{className:o.cn("modal-custom-content w-full flex flex-col max-h-[calc(100vh_-_4rem)]",b),style:c,children:s})},"modal-content")]})})}),p):null});j.displayName="ModalPortalComponent";const C=({title:n,showCloseButton:t=!0,disabled:a=!1,onClick:s,className:l,styled:u,children:c,...d})=>e.jsxRuntimeExports.jsxs("div",{className:o.cn("modal-custom-header-container w-full"),style:u,children:[e.jsxRuntimeExports.jsx("div",{className:o.cn("w-full flex py-4 px-6 flex-initial text-large font-semibold",l),...d,children:c||e.jsxRuntimeExports.jsx("header",{className:"modal-custom-title text-lg leading-none font-semibold",children:n})}),t&&e.jsxRuntimeExports.jsx("div",{className:"absolute top-2.5 right-2.5 disabled:pointer-events-none z-10",children:e.jsxRuntimeExports.jsxs(A.Button,{isIconOnly:!0,variant:"light",radius:"full","aria-label":"Close",onClick:s,disabled:a,className:"p-0 w-[36px] h-[36px] min-w-auto bg-default-100 hover:bg-default-200 text-default-500 hover:text-default-600 dark:bg-default-100 dark:hover:bg-default-200 dark:text-default-500 dark:hover:text-default-600 disabled:opacity-50 disabled:pointer-events-none",children:[e.jsxRuntimeExports.jsxs("svg",{width:"20",height:"20",fill:"currentColor",role:"img","aria-hidden":"true",children:[e.jsxRuntimeExports.jsx("path",{fill:"none",d:"M0 0h21v21H0z"}),e.jsxRuntimeExports.jsx("path",{d:"m12.12 10 4.07-4.06a1.5 1.5 0 1 0-2.11-2.12L10 7.88 5.94 3.81a1.5 1.5 0 1 0-2.12 2.12L7.88 10l-4.07 4.06a1.5 1.5 0 0 0 0 2.12 1.51 1.51 0 0 0 2.13 0L10 12.12l4.06 4.07a1.45 1.45 0 0 0 1.06.44 1.5 1.5 0 0 0 1.06-2.56Z"})]}),e.jsxRuntimeExports.jsx("span",{className:"sr-only",children:"Close"})]})})]}),g=i.forwardRef(({children:n,className:t="",styled:a,height:s},l)=>e.jsxRuntimeExports.jsx("div",{className:o.cn("modal-custom-body flex flex-1 flex-col gap-3 px-6 overflow-y-auto",t),ref:l,style:{...a,height:s?`${s}px`:"auto"},children:n}));g.displayName="ModalBodyPortalComponent";const S=({children:n,className:t,styled:a})=>e.jsxRuntimeExports.jsx("div",{className:o.cn("modal-custom-footer flex flex-col-reverse px-6 py-3 gap-2 sm:flex-row sm:justify-end mt-auto",t),style:a,children:n});exports.Modal=j;exports.ModalBody=g;exports.ModalFooter=S;exports.ModalHeader=C;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../src/components/transition/transition-utils.ts","../../src/components/modal/modal.tsx"],"sourcesContent":["import type { Target, TargetAndTransition, Transition } from \"framer-motion\";\n\ntype WithMotionState<P> = Partial<Record<\"enter\" | \"exit\", P>>;\n\nexport type TransitionConfig = WithMotionState<Transition>;\n\nexport type TransitionEndConfig = WithMotionState<Target>;\n\nexport type TransitionProperties = {\n\t/**\n\t * Custom `transition` definition for `enter` and `exit`\n\t */\n\ttransition?: TransitionConfig;\n\t/**\n\t * Custom `transitionEnd` definition for `enter` and `exit`\n\t */\n\ttransitionEnd?: TransitionEndConfig;\n};\n\ntype TargetResolver<P = {}> = (props: P & TransitionProperties) => TargetAndTransition;\n\ntype Variant<P = {}> = TargetAndTransition | TargetResolver<P>;\n\nexport type Variants<P = {}> = Record<\n\tstring,\n\t{\n\t\tenter: Variant<P>;\n\t\texit: Variant<P>;\n\t\tinitial?: Variant<P>;\n\t}\n>;\n\nexport const TRANSITION_EASINGS = {\n\tease: [0.36, 0.66, 0.4, 1],\n\teaseIn: [0.4, 0, 1, 1],\n\teaseOut: [0, 0, 0.2, 1],\n\teaseInOut: [0.4, 0, 0.2, 1],\n\tspring: [0.155, 1.105, 0.295, 1.12],\n\tspringOut: [0.57, -0.15, 0.62, 0.07],\n\tsoftSpring: [0.16, 1.11, 0.3, 1.02],\n} as const;\n\nexport const TRANSITION_DEFAULTS = {\n\tenter: {\n\t\tduration: 0.2,\n\t\tease: TRANSITION_EASINGS.easeOut,\n\t},\n\texit: {\n\t\tduration: 0.1,\n\t\tease: TRANSITION_EASINGS.easeIn,\n\t},\n} as const;\n\nexport const TRANSITION_VARIANTS: Variants = {\n\tscaleSpring: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.2,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.85)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscaleSpringOpacity: {\n\t\tinitial: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.8)\",\n\t\t},\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransform: \"scale(1)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.96)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscale: {\n\t\tenter: { scale: 1 },\n\t\texit: { scale: 0.95 },\n\t},\n\tscaleFadeIn: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.25,\n\t\t\t\tease: TRANSITION_EASINGS.easeIn,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.95)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.2,\n\t\t\t\tease: TRANSITION_EASINGS.easeOut,\n\t\t\t},\n\t\t},\n\t},\n\tscaleInOut: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(1.03)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tfade: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tcollapse: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\theight: \"auto\",\n\t\t\ttransition: {\n\t\t\t\theight: {\n\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\tbounce: 0,\n\t\t\t\t\tduration: 0.3,\n\t\t\t\t},\n\t\t\t\topacity: {\n\t\t\t\t\tease: \"ease\" as any,\n\t\t\t\t\tduration: 0.4,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\theight: 0,\n\t\t\ttransition: {\n\t\t\t\tease: \"ease\" as any,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t},\n};\n","\"use client\";\n\nimport ReactDOM from \"react-dom\";\nimport { forwardRef, type Ref, useEffect, useRef } from \"react\";\nimport type { ModalBodyType, ModalFooterType, ModalHeaderType, ModalType } from \"./modal.type\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m } from \"framer-motion\";\nimport { TRANSITION_VARIANTS } from \"../transition/transition-utils\";\nimport { cva } from \"class-variance-authority\";\n\nconst backdropVariants = cva(\"\", {\n\tvariants: {\n\t\tbackdrop: {\n\t\t\ttransparent: \"bg-transparent\",\n\t\t\topaque: \"bg-black/50\",\n\t\t\tblur: \"backdrop-blur-md backdrop-saturate-150 bg-overlay/30\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tbackdrop: \"opaque\",\n\t},\n});\n\nconst sizeVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\t\"xs\": \"max-w-xs\",\n\t\t\t\"sm\": \"max-w-sm\",\n\t\t\t\"md\": \"max-w-md\",\n\t\t\t\"lg\": \"max-w-lg\",\n\t\t\t\"xl\": \"max-w-xl\",\n\t\t\t\"2xl\": \"max-w-2xl\",\n\t\t\t\"3xl\": \"max-w-3xl\",\n\t\t\t\"4xl\": \"max-w-4xl\",\n\t\t\t\"5xl\": \"max-w-5xl\",\n\t\t\t\"full\": \"my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] min-h-[100dvh] !rounded-none\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst radiusVariants = cva(\"\", {\n\tvariants: {\n\t\tradius: {\n\t\t\tnone: \"rounded-none\",\n\t\t\tsm: \"rounded-sm\",\n\t\t\tmd: \"rounded-md\",\n\t\t\tlg: \"rounded-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tradius: \"lg\",\n\t},\n});\n\nconst placementVariants = cva(\"\", {\n\tvariants: {\n\t\tplacement: {\n\t\t\tcenter: \"fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]\",\n\t\t\ttop: \"fixed top-0 left-[50%] translate-x-[-50%] sm:mt-8\",\n bottom: \"fixed bottom-0 left-[50%] translate-x-[-50%] sm:mb-8\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tplacement: \"center\",\n\t},\n});\n\nconst shadowVariants = cva(\"\", {\n\tvariants: {\n\t\tshadow: {\n\t\t\tnone: \"shadow-none\",\n\t\t\tsm: \"shadow-sm\",\n\t\t\tmd: \"shadow-md\",\n\t\t\tlg: \"shadow-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tshadow: \"md\",\n\t},\n});\n\nexport const Modal = forwardRef(\n\t(\n\t\t{\n\t\t\tmodalId,\n\t\t\tisShow,\n\t\t\tisVisible,\n\t\t\tchildren,\n\t\t\tstyle,\n\t\t\tclassNameOverlay = \"\",\n\t\t\tstyleContainer,\n\t\t\tonClickOutside,\n\t\t\tclassNameDialog = \"modal-custom-dialog\",\n\t\t\tclassNameContent = \"\",\n\t\t\tbackdrop = \"opaque\",\n\t\t\tsize = \"md\",\n\t\t\tisKeyboardDismissDisabled = false,\n\t\t\tshadow = \"md\",\n\t\t\tradius = \"lg\",\n placement = \"center\",\n\t\t}: ModalType,\n\t\tref: Ref<HTMLDivElement>,\n\t) => {\n\t\tconst modalOverlayRef = useRef<HTMLDivElement>(null);\n\t\tuseEffect(() => {\n\t\t\tif (typeof window !== \"undefined\" && isVisible) {\n\t\t\t\tdocument.body.classList.add(\"modal-open\");\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tif (typeof window !== \"undefined\") {\n\t\t\t\t\tdocument.body.classList.remove(\"modal-open\");\n\t\t\t\t}\n\t\t\t};\n\t\t}, [isVisible]);\n\n\t\tuseEffect(() => {\n\t\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\t\tif (e.key === \"Escape\" && !isKeyboardDismissDisabled) {\n\t\t\t\t\tonClickOutside?.();\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tif (isShow) {\n\t\t\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\t};\n\t\t}, [isShow, isKeyboardDismissDisabled, onClickOutside]);\n\n\t\tif (typeof window === \"undefined\") return null;\n\n\t\tconst modalRoot = document.getElementById(\"modal-root\");\n\t\tif (!modalRoot) return null;\n\n\t\treturn ReactDOM.createPortal(\n\t\t\t<AnimatePresence>\n\t\t\t\t{isShow && (\n\t\t\t\t\t<LazyMotion features={() => import(\"framer-motion\").then((res) => res.domAnimation)}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-overlay\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.fade}\n\t\t\t\t\t\t\t\tclassName={cn(\"fixed inset-0 z-50\", backdropVariants({ backdrop }), classNameOverlay)}\n\t\t\t\t\t\t\t\tonClick={onClickOutside}\n\t\t\t\t\t\t\t\taria-hidden={!isShow}\n\t\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\tref={modalOverlayRef}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-content\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.scaleInOut}\n\t\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\t\tid={modalId}\n\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\" z-50 w-full rounded-lg shadow-lg bg-content1\",\n placementVariants({ placement }),\n\t\t\t\t\t\t\t\t\tsizeVariants({ size }),\n\t\t\t\t\t\t\t\t\tradiusVariants({ radius }),\n\t\t\t\t\t\t\t\t\tshadowVariants({ shadow }),\n\t\t\t\t\t\t\t\t\tclassNameDialog,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className={cn(\"modal-custom-content w-full flex flex-col max-h-[calc(100vh_-_4rem)]\", classNameContent)} style={styleContainer}>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</LazyMotion>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>,\n\t\t\tmodalRoot,\n\t\t);\n\t},\n);\nModal.displayName = \"ModalPortalComponent\";\n\nexport const ModalHeader = ({ title, showCloseButton = true, disabled = false, onClick, className, styled, children, ...props }: ModalHeaderType) => {\n\treturn (\n\t\t<div className={cn(\"modal-custom-header-container w-full\")} style={styled}>\n\t\t\t<div className={cn(\"w-full flex py-4 px-6 flex-initial text-large font-semibold\", className)} {...props}>\n\t\t\t\t{children || <header className=\"modal-custom-title text-lg leading-none font-semibold\">{title}</header>}\n\t\t\t</div>\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-2.5 right-2.5 disabled:pointer-events-none z-10\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\tradius=\"full\"\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName=\"p-0 w-[36px] h-[36px] min-w-auto bg-default-100 hover:bg-default-200 text-default-500 hover:text-default-600 dark:bg-default-100 dark:hover:bg-default-200 dark:text-default-500 dark:hover:text-default-600 disabled:opacity-50 disabled:pointer-events-none\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" fill=\"currentColor\" role=\"img\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M0 0h21v21H0z\"></path>\n\t\t\t\t\t\t\t<path d=\"m12.12 10 4.07-4.06a1.5 1.5 0 1 0-2.11-2.12L10 7.88 5.94 3.81a1.5 1.5 0 1 0-2.12 2.12L7.88 10l-4.07 4.06a1.5 1.5 0 0 0 0 2.12 1.51 1.51 0 0 0 2.13 0L10 12.12l4.06 4.07a1.45 1.45 0 0 0 1.06.44 1.5 1.5 0 0 0 1.06-2.56Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport const ModalBody = forwardRef(({ children, className = \"\", styled, height }: ModalBodyType, ref: Ref<HTMLDivElement>) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-body flex flex-1 flex-col gap-3 px-6 overflow-y-auto\", className)}\n\t\t\tref={ref}\n\t\t\tstyle={{ ...styled, height: height ? `${height}px` : \"auto\" }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nModalBody.displayName = \"ModalBodyPortalComponent\";\n\nexport const ModalFooter = ({ children, className, styled }: ModalFooterType) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-footer flex flex-col-reverse px-6 py-3 gap-2 sm:flex-row sm:justify-end mt-auto\", className)}\n\t\t\tstyle={styled}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["TRANSITION_EASINGS","TRANSITION_VARIANTS","backdropVariants","cva","sizeVariants","radiusVariants","placementVariants","shadowVariants","Modal","forwardRef","modalId","isShow","isVisible","children","style","classNameOverlay","styleContainer","onClickOutside","classNameDialog","classNameContent","backdrop","size","isKeyboardDismissDisabled","shadow","radius","placement","ref","modalOverlayRef","useRef","useEffect","handleKeyDown","e","modalRoot","ReactDOM","AnimatePresence","jsx","LazyMotion","res","jsxs","Fragment","m","cn","ModalHeader","title","showCloseButton","disabled","onClick","className","styled","props","Button","ModalBody","height","ModalFooter"],"mappings":"ixBAgCaA,EAAqB,CACjC,KAAM,CAAC,IAAM,IAAM,GAAK,CAAC,CAO1B,EAaaC,EAAgC,CAkE5C,WAAY,CACX,MAAO,CACN,UAAW,WACX,QAAS,EACT,WAAY,CACX,SAAU,GACV,KAAMD,EAAmB,IAAA,CAC1B,EAED,KAAM,CACL,UAAW,cACX,QAAS,EACT,WAAY,CACX,SAAU,GACV,KAAMA,EAAmB,IAAA,CAC1B,CACD,EAED,KAAM,CACL,MAAO,CACN,QAAS,EACT,WAAY,CACX,SAAU,GACV,KAAMA,EAAmB,IAAA,CAC1B,EAED,KAAM,CACL,QAAS,EACT,WAAY,CACX,SAAU,GACV,KAAMA,EAAmB,IAAA,CAC1B,CACD,CA2BF,ECtKME,EAAmBC,EAAAA,IAAI,GAAI,CAChC,SAAU,CACT,SAAU,CACT,YAAa,iBACb,OAAQ,cACR,KAAM,sDAAA,CACP,EAED,gBAAiB,CAChB,SAAU,QAAA,CAEZ,CAAC,EAEKC,EAAeD,EAAAA,IAAI,GAAI,CAC5B,SAAU,CACT,KAAM,CACL,GAAM,WACN,GAAM,WACN,GAAM,WACN,GAAM,WACN,GAAM,WACN,MAAO,YACP,MAAO,YACP,MAAO,YACP,MAAO,YACP,KAAQ,8EAAA,CACT,EAED,gBAAiB,CAChB,KAAM,IAAA,CAER,CAAC,EAEKE,EAAiBF,EAAAA,IAAI,GAAI,CAC9B,SAAU,CACT,OAAQ,CACP,KAAM,eACN,GAAI,aACJ,GAAI,aACJ,GAAI,YAAA,CACL,EAED,gBAAiB,CAChB,OAAQ,IAAA,CAEV,CAAC,EAEKG,EAAoBH,EAAAA,IAAI,GAAI,CACjC,SAAU,CACT,UAAW,CACV,OAAQ,mEACR,IAAK,oDACI,OAAQ,sDAAA,CAClB,EAED,gBAAiB,CAChB,UAAW,QAAA,CAEb,CAAC,EAEKI,EAAiBJ,EAAAA,IAAI,GAAI,CAC9B,SAAU,CACT,OAAQ,CACP,KAAM,cACN,GAAI,YACJ,GAAI,YACJ,GAAI,WAAA,CACL,EAED,gBAAiB,CAChB,OAAQ,IAAA,CAEV,CAAC,EAEYK,EAAQC,EAAAA,WACpB,CACC,CACC,QAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,iBAAAC,EAAmB,GACnB,eAAAC,EACA,eAAAC,EACA,gBAAAC,EAAkB,sBAClB,iBAAAC,EAAmB,GACnB,SAAAC,EAAW,SACX,KAAAC,EAAO,KACP,0BAAAC,EAA4B,GAC5B,OAAAC,EAAS,KACT,OAAAC,EAAS,KACA,UAAAC,EAAY,QAAA,EAEtBC,IACI,CACJ,MAAMC,EAAkBC,EAAAA,OAAuB,IAAI,EA4BnD,GA3BAC,EAAAA,UAAU,KACL,OAAO,OAAW,KAAejB,GACpC,SAAS,KAAK,UAAU,IAAI,YAAY,EAElC,IAAM,CACR,OAAO,OAAW,KACrB,SAAS,KAAK,UAAU,OAAO,YAAY,CAE7C,GACE,CAACA,CAAS,CAAC,EAEdiB,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAiBC,GAAqB,CACvCA,EAAE,MAAQ,UAAY,CAACT,GAC1BL,IAAA,CAEF,EAEA,OAAIN,GACH,SAAS,iBAAiB,UAAWmB,CAAa,EAG5C,IAAM,CACZ,SAAS,oBAAoB,UAAWA,CAAa,CACtD,CACD,EAAG,CAACnB,EAAQW,EAA2BL,CAAc,CAAC,EAElD,OAAO,OAAW,IAAa,OAAO,KAE1C,MAAMe,EAAY,SAAS,eAAe,YAAY,EACtD,OAAKA,EAEEC,EAAS,qCACdC,EAAAA,gBAAA,CACC,SAAAvB,GACAwB,EAAAA,kBAAAA,IAACC,EAAAA,WAAA,CAAW,SAAU,IAAM,OAAO,eAAe,EAAE,KAAMC,GAAQA,EAAI,YAAY,EACjF,SAAAC,EAAAA,kBAAAA,KAAAC,6BAAA,CACC,SAAA,CAAAJ,EAAAA,kBAAAA,IAACK,EAAAA,EAAE,IAAF,CAEA,QAAQ,OACR,QAAQ,QACR,KAAK,OACL,SAAUvC,EAAoB,KAC9B,UAAWwC,EAAAA,GAAG,qBAAsBvC,EAAiB,CAAE,SAAAkB,CAAA,CAAU,EAAGL,CAAgB,EACpF,QAASE,EACT,cAAa,CAACN,EACd,KAAK,SACL,aAAW,OACX,SAAU,GACV,IAAKgB,CAAA,EAXD,eAAA,EAcLQ,EAAAA,kBAAAA,IAACK,EAAAA,EAAE,IAAF,CAEA,QAAQ,OACR,QAAQ,QACR,KAAK,OACL,SAAUvC,EAAoB,WAC9B,IAAAyB,EACA,GAAIhB,EACJ,QAAUqB,GAAMA,EAAE,gBAAA,EAClB,UAAWU,EAAAA,GACV,gDAC2BnC,EAAkB,CAAE,UAAAmB,EAAW,EAC1DrB,EAAa,CAAE,KAAAiB,EAAM,EACrBhB,EAAe,CAAE,OAAAmB,EAAQ,EACzBjB,EAAe,CAAE,OAAAgB,EAAQ,EACzBL,CAAA,EAED,MAAAJ,EAEA,SAAAqB,EAAAA,kBAAAA,IAAC,OAAI,UAAWM,EAAAA,GAAG,uEAAwEtB,CAAgB,EAAG,MAAOH,EACnH,SAAAH,CAAA,CACF,CAAA,EApBI,eAAA,CAqBL,CAAA,CACD,EACD,EAEF,EACAmB,CAAA,EAjDsB,IAmDxB,CACD,EACAxB,EAAM,YAAc,uBAEb,MAAMkC,EAAc,CAAC,CAAE,MAAAC,EAAO,gBAAAC,EAAkB,GAAM,SAAAC,EAAW,GAAO,QAAAC,EAAS,UAAAC,EAAW,OAAAC,EAAQ,SAAAnC,EAAU,GAAGoC,8BAErH,MAAA,CAAI,UAAWR,EAAAA,GAAG,sCAAsC,EAAG,MAAOO,EAClE,SAAA,CAAAb,wBAAC,MAAA,CAAI,UAAWM,EAAAA,GAAG,8DAA+DM,CAAS,EAAI,GAAGE,EAChG,SAAApC,GAAYsB,EAAAA,kBAAAA,IAAC,SAAA,CAAO,UAAU,wDAAyD,WAAM,EAC/F,EAECS,GACAT,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,+DACd,SAAAG,EAAAA,kBAAAA,KAACY,EAAAA,OAAA,CACA,WAAU,GACV,QAAQ,QACR,OAAO,OACP,aAAW,QACX,QAAAJ,EACA,SAAAD,EACA,UAAU,gQAEV,SAAA,CAAAP,EAAAA,kBAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,KAAK,eAAe,KAAK,MAAM,cAAY,OACtE,SAAA,CAAAH,EAAAA,kBAAAA,IAAC,OAAA,CAAK,KAAK,OAAO,EAAE,gBAAgB,EACpCA,EAAAA,kBAAAA,IAAC,OAAA,CAAK,EAAE,0NAAA,CAA2N,CAAA,EACpO,EACAA,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,UAAU,SAAA,OAAA,CAAK,CAAA,CAAA,CAAA,CAChC,CACD,CAAA,EAEF,EAIWgB,EAAY1C,EAAAA,WAAW,CAAC,CAAE,SAAAI,EAAU,UAAAkC,EAAY,GAAI,OAAAC,EAAQ,OAAAI,CAAA,EAAyB1B,IAEhGS,EAAAA,kBAAAA,IAAC,MAAA,CACA,UAAWM,EAAAA,GAAG,oEAAqEM,CAAS,EAC5F,IAAArB,EACA,MAAO,CAAE,GAAGsB,EAAQ,OAAQI,EAAS,GAAGA,CAAM,KAAO,MAAA,EAEpD,SAAAvC,CAAA,CAAA,CAGH,EACDsC,EAAU,YAAc,2BAEjB,MAAME,EAAc,CAAC,CAAE,SAAAxC,EAAU,UAAAkC,EAAW,OAAAC,KAEjDb,EAAAA,kBAAAA,IAAC,MAAA,CACA,UAAWM,EAAAA,GAAG,gGAAiGM,CAAS,EACxH,MAAOC,EAEN,SAAAnC,CAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../src/components/transition/transition-utils.ts","../../src/components/modal/modal.tsx"],"sourcesContent":["import type { Target, TargetAndTransition, Transition } from \"framer-motion\";\n\ntype WithMotionState<P> = Partial<Record<\"enter\" | \"exit\", P>>;\n\nexport type TransitionConfig = WithMotionState<Transition>;\n\nexport type TransitionEndConfig = WithMotionState<Target>;\n\nexport type TransitionProperties = {\n\t/**\n\t * Custom `transition` definition for `enter` and `exit`\n\t */\n\ttransition?: TransitionConfig;\n\t/**\n\t * Custom `transitionEnd` definition for `enter` and `exit`\n\t */\n\ttransitionEnd?: TransitionEndConfig;\n};\n\ntype TargetResolver<P = {}> = (props: P & TransitionProperties) => TargetAndTransition;\n\ntype Variant<P = {}> = TargetAndTransition | TargetResolver<P>;\n\nexport type Variants<P = {}> = Record<\n\tstring,\n\t{\n\t\tenter: Variant<P>;\n\t\texit: Variant<P>;\n\t\tinitial?: Variant<P>;\n\t}\n>;\n\nexport const TRANSITION_EASINGS = {\n\tease: [0.36, 0.66, 0.4, 1],\n\teaseIn: [0.4, 0, 1, 1],\n\teaseOut: [0, 0, 0.2, 1],\n\teaseInOut: [0.4, 0, 0.2, 1],\n\tspring: [0.155, 1.105, 0.295, 1.12],\n\tspringOut: [0.57, -0.15, 0.62, 0.07],\n\tsoftSpring: [0.16, 1.11, 0.3, 1.02],\n} as const;\n\nexport const TRANSITION_DEFAULTS = {\n\tenter: {\n\t\tduration: 0.2,\n\t\tease: TRANSITION_EASINGS.easeOut,\n\t},\n\texit: {\n\t\tduration: 0.1,\n\t\tease: TRANSITION_EASINGS.easeIn,\n\t},\n} as const;\n\nexport const TRANSITION_VARIANTS: Variants = {\n\tscaleSpring: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.2,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.85)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscaleSpringOpacity: {\n\t\tinitial: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.8)\",\n\t\t},\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransform: \"scale(1)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.96)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscale: {\n\t\tenter: { scale: 1 },\n\t\texit: { scale: 0.95 },\n\t},\n\tscaleFadeIn: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.25,\n\t\t\t\tease: TRANSITION_EASINGS.easeIn,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.95)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.2,\n\t\t\t\tease: TRANSITION_EASINGS.easeOut,\n\t\t\t},\n\t\t},\n\t},\n\tscaleInOut: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(1.03)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tfade: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tcollapse: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\theight: \"auto\",\n\t\t\ttransition: {\n\t\t\t\theight: {\n\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\tbounce: 0,\n\t\t\t\t\tduration: 0.3,\n\t\t\t\t},\n\t\t\t\topacity: {\n\t\t\t\t\tease: \"ease\" as any,\n\t\t\t\t\tduration: 0.4,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\theight: 0,\n\t\t\ttransition: {\n\t\t\t\tease: \"ease\" as any,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t},\n};\n","\"use client\";\n\nimport ReactDOM from \"react-dom\";\nimport { forwardRef, type Ref, useEffect, useRef } from \"react\";\nimport type { ModalBodyType, ModalFooterType, ModalHeaderType, ModalType } from \"./modal.type\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m } from \"framer-motion\";\nimport { TRANSITION_VARIANTS } from \"../transition/transition-utils\";\nimport { cva } from \"class-variance-authority\";\n\nconst backdropVariants = cva(\"\", {\n\tvariants: {\n\t\tbackdrop: {\n\t\t\ttransparent: \"bg-transparent\",\n\t\t\topaque: \"bg-black/50\",\n\t\t\tblur: \"backdrop-blur-md backdrop-saturate-150 bg-overlay/30\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tbackdrop: \"opaque\",\n\t},\n});\n\nconst sizeVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\t\"xs\": \"max-w-xs\",\n\t\t\t\"sm\": \"max-w-sm\",\n\t\t\t\"md\": \"max-w-md\",\n\t\t\t\"lg\": \"max-w-lg\",\n\t\t\t\"xl\": \"max-w-xl\",\n\t\t\t\"2xl\": \"max-w-2xl\",\n\t\t\t\"3xl\": \"max-w-3xl\",\n\t\t\t\"4xl\": \"max-w-4xl\",\n\t\t\t\"5xl\": \"max-w-5xl\",\n\t\t\t\"full\": \"my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] min-h-[100dvh] !rounded-none\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst radiusVariants = cva(\"\", {\n\tvariants: {\n\t\tradius: {\n\t\t\tnone: \"rounded-none\",\n\t\t\tsm: \"rounded-sm\",\n\t\t\tmd: \"rounded-md\",\n\t\t\tlg: \"rounded-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tradius: \"lg\",\n\t},\n});\n\nconst placementVariants = cva(\"\", {\n\tvariants: {\n\t\tplacement: {\n\t\t\tcenter: \"fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]\",\n\t\t\ttop: \"fixed top-0 left-[50%] translate-x-[-50%] sm:mt-8\",\n bottom: \"fixed bottom-0 left-[50%] translate-x-[-50%] sm:mb-8\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tplacement: \"center\",\n\t},\n});\n\nconst shadowVariants = cva(\"\", {\n\tvariants: {\n\t\tshadow: {\n\t\t\tnone: \"shadow-none\",\n\t\t\tsm: \"shadow-sm\",\n\t\t\tmd: \"shadow-md\",\n\t\t\tlg: \"shadow-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tshadow: \"md\",\n\t},\n});\n\nexport const Modal = forwardRef(\n\t(\n\t\t{\n\t\t\tmodalId,\n\t\t\tisShow,\n\t\t\tisVisible,\n\t\t\tchildren,\n\t\t\tstyle,\n\t\t\tclassNameOverlay = \"\",\n\t\t\tstyleContainer,\n\t\t\tonClickOutside,\n\t\t\tclassNameDialog = \"modal-custom-dialog\",\n\t\t\tclassNameContent = \"\",\n\t\t\tbackdrop = \"opaque\",\n\t\t\tsize = \"md\",\n\t\t\tisKeyboardDismissDisabled = false,\n\t\t\tshadow = \"md\",\n\t\t\tradius = \"lg\",\n placement = \"center\",\n\t\t}: ModalType,\n\t\tref: Ref<HTMLDivElement>,\n\t) => {\n\t\tconst modalOverlayRef = useRef<HTMLDivElement>(null);\n\t\tuseEffect(() => {\n\t\t\tif (typeof window !== \"undefined\" && isVisible) {\n\t\t\t\tdocument.body.classList.add(\"modal-open\");\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tif (typeof window !== \"undefined\") {\n\t\t\t\t\tdocument.body.classList.remove(\"modal-open\");\n\t\t\t\t}\n\t\t\t};\n\t\t}, [isVisible]);\n\n\t\tuseEffect(() => {\n\t\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\t\tif (e.key === \"Escape\" && !isKeyboardDismissDisabled) {\n\t\t\t\t\tonClickOutside?.();\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tif (isShow) {\n\t\t\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\t};\n\t\t}, [isShow, isKeyboardDismissDisabled, onClickOutside]);\n\n\t\tif (typeof window === \"undefined\") return null;\n\n\t\tconst modalRoot = document.getElementById(\"modal-root\");\n\t\tif (!modalRoot) return null;\n\n\t\treturn ReactDOM.createPortal(\n\t\t\t<AnimatePresence>\n\t\t\t\t{isShow && (\n\t\t\t\t\t<LazyMotion features={() => import(\"framer-motion\").then((res) => res.domAnimation)}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-overlay\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.fade}\n\t\t\t\t\t\t\t\tclassName={cn(\"fixed inset-0 z-50\", backdropVariants({ backdrop }), classNameOverlay)}\n\t\t\t\t\t\t\t\tonClick={onClickOutside}\n\t\t\t\t\t\t\t\taria-hidden={!isShow}\n\t\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\tref={modalOverlayRef}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-content\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.scaleInOut}\n\t\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\t\tid={modalId}\n\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\" z-50 w-full rounded-lg shadow-lg bg-content1\",\n placementVariants({ placement }),\n\t\t\t\t\t\t\t\t\tsizeVariants({ size }),\n\t\t\t\t\t\t\t\t\tradiusVariants({ radius }),\n\t\t\t\t\t\t\t\t\tshadowVariants({ shadow }),\n\t\t\t\t\t\t\t\t\tclassNameDialog,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className={cn(\"modal-custom-content w-full flex flex-col max-h-[calc(100vh_-_4rem)]\", classNameContent)} style={styleContainer}>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</LazyMotion>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>,\n\t\t\tmodalRoot,\n\t\t);\n\t},\n);\nModal.displayName = \"ModalPortalComponent\";\n\nexport const ModalHeader = ({ title, showCloseButton = true, disabled = false, onClick, className, styled, children, ...props }: ModalHeaderType) => {\n\treturn (\n\t\t<div className={cn(\"modal-custom-header-container w-full\")} style={styled}>\n\t\t\t<div className={cn(\"w-full flex py-4 px-6 flex-initial text-large font-semibold\", className)} {...props}>\n\t\t\t\t{children || <header className=\"modal-custom-title text-lg leading-none font-semibold\">{title}</header>}\n\t\t\t</div>\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-2.5 right-2.5 disabled:pointer-events-none z-10\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\tradius=\"full\"\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName=\"p-0 w-[36px] h-[36px] min-w-auto bg-default-100 hover:bg-default-200 text-default-500 hover:text-default-600 dark:bg-default-100 dark:hover:bg-default-200 dark:text-default-500 dark:hover:text-default-600 disabled:opacity-50 disabled:pointer-events-none\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" fill=\"currentColor\" role=\"img\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M0 0h21v21H0z\"></path>\n\t\t\t\t\t\t\t<path d=\"m12.12 10 4.07-4.06a1.5 1.5 0 1 0-2.11-2.12L10 7.88 5.94 3.81a1.5 1.5 0 1 0-2.12 2.12L7.88 10l-4.07 4.06a1.5 1.5 0 0 0 0 2.12 1.51 1.51 0 0 0 2.13 0L10 12.12l4.06 4.07a1.45 1.45 0 0 0 1.06.44 1.5 1.5 0 0 0 1.06-2.56Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport const ModalBody = forwardRef(({ children, className = \"\", styled, height }: ModalBodyType, ref: Ref<HTMLDivElement>) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-body flex flex-1 flex-col gap-3 px-6 overflow-y-auto\", className)}\n\t\t\tref={ref}\n\t\t\tstyle={{ ...styled, height: height ? `${height}px` : \"auto\" }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nModalBody.displayName = \"ModalBodyPortalComponent\";\n\nexport const ModalFooter = ({ children, className, styled }: ModalFooterType) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-footer flex flex-col-reverse px-6 py-3 gap-2 sm:flex-row sm:justify-end mt-auto\", className)}\n\t\t\tstyle={styled}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["TRANSITION_EASINGS","TRANSITION_VARIANTS","backdropVariants","cva","sizeVariants","radiusVariants","placementVariants","shadowVariants","Modal","forwardRef","modalId","isShow","isVisible","children","style","classNameOverlay","styleContainer","onClickOutside","classNameDialog","classNameContent","backdrop","size","isKeyboardDismissDisabled","shadow","radius","placement","ref","modalOverlayRef","useRef","useEffect","handleKeyDown","e","modalRoot","ReactDOM","AnimatePresence","jsx","LazyMotion","res","jsxs","Fragment","m","cn","ModalHeader","title","showCloseButton","disabled","onClick","className","styled","props","Button","ModalBody","height","ModalFooter"],"mappings":"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"}
|
package/dist/modal/index.es.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { j as e } from "../chunks/jsx-runtime-Cl_4eDuT.js";
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as y, useRef as
|
|
2
|
+
import R from "react-dom";
|
|
3
|
+
import { forwardRef as y, useRef as z, useEffect as p } from "react";
|
|
4
4
|
import { c as n } from "../chunks/utils-CvyT6Z0O.js";
|
|
5
|
-
import { B as A } from "../chunks/button-
|
|
6
|
-
import { AnimatePresence as E, LazyMotion as _, m as h } from "framer-motion";
|
|
5
|
+
import { B as A } from "../chunks/button-uo4_Xad_.js";
|
|
7
6
|
import { c as i } from "../chunks/index-D29mdTf5.js";
|
|
7
|
+
import { A as E, L as _ } from "../chunks/index-DC9BfnBH.js";
|
|
8
|
+
import { m as h } from "../chunks/features-animation-BRAvwYFN.js";
|
|
8
9
|
const m = {
|
|
9
10
|
ease: [0.36, 0.66, 0.4, 1]
|
|
10
11
|
}, v = {
|
|
@@ -125,20 +126,20 @@ const m = {
|
|
|
125
126
|
radius: k = "lg",
|
|
126
127
|
placement: I = "center"
|
|
127
128
|
}, V) => {
|
|
128
|
-
const
|
|
129
|
+
const L = z(null);
|
|
129
130
|
if (p(() => (typeof window < "u" && t && document.body.classList.add("modal-open"), () => {
|
|
130
131
|
typeof window < "u" && document.body.classList.remove("modal-open");
|
|
131
132
|
}), [t]), p(() => {
|
|
132
|
-
const s = (
|
|
133
|
-
|
|
133
|
+
const s = (M) => {
|
|
134
|
+
M.key === "Escape" && !u && d?.();
|
|
134
135
|
};
|
|
135
136
|
return a && document.addEventListener("keydown", s), () => {
|
|
136
137
|
document.removeEventListener("keydown", s);
|
|
137
138
|
};
|
|
138
139
|
}, [a, u, d]), typeof window > "u") return null;
|
|
139
140
|
const f = document.getElementById("modal-root");
|
|
140
|
-
return f ?
|
|
141
|
-
/* @__PURE__ */ e.jsx(E, { children: a && /* @__PURE__ */ e.jsx(_, { features: () => import("
|
|
141
|
+
return f ? R.createPortal(
|
|
142
|
+
/* @__PURE__ */ e.jsx(E, { children: a && /* @__PURE__ */ e.jsx(_, { features: () => import("../chunks/index-BbDfYVLO.js").then((s) => s.domAnimation), children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
142
143
|
/* @__PURE__ */ e.jsx(
|
|
143
144
|
h.div,
|
|
144
145
|
{
|
|
@@ -152,7 +153,7 @@ const m = {
|
|
|
152
153
|
role: "dialog",
|
|
153
154
|
"aria-modal": "true",
|
|
154
155
|
tabIndex: -1,
|
|
155
|
-
ref:
|
|
156
|
+
ref: L
|
|
156
157
|
},
|
|
157
158
|
"modal-overlay"
|
|
158
159
|
),
|
|
@@ -185,7 +186,7 @@ const m = {
|
|
|
185
186
|
}
|
|
186
187
|
);
|
|
187
188
|
q.displayName = "ModalPortalComponent";
|
|
188
|
-
const
|
|
189
|
+
const Q = ({ title: o, showCloseButton: a = !0, disabled: t = !1, onClick: l, className: r, styled: c, children: x, ...d }) => /* @__PURE__ */ e.jsxs("div", { className: n("modal-custom-header-container w-full"), style: c, children: [
|
|
189
190
|
/* @__PURE__ */ e.jsx("div", { className: n("w-full flex py-4 px-6 flex-initial text-large font-semibold", r), ...d, children: x || /* @__PURE__ */ e.jsx("header", { className: "modal-custom-title text-lg leading-none font-semibold", children: o }) }),
|
|
190
191
|
a && /* @__PURE__ */ e.jsx("div", { className: "absolute top-2.5 right-2.5 disabled:pointer-events-none z-10", children: /* @__PURE__ */ e.jsxs(
|
|
191
192
|
A,
|
|
@@ -216,7 +217,7 @@ const K = ({ title: o, showCloseButton: a = !0, disabled: t = !1, onClick: l, cl
|
|
|
216
217
|
}
|
|
217
218
|
));
|
|
218
219
|
F.displayName = "ModalBodyPortalComponent";
|
|
219
|
-
const
|
|
220
|
+
const U = ({ children: o, className: a, styled: t }) => /* @__PURE__ */ e.jsx(
|
|
220
221
|
"div",
|
|
221
222
|
{
|
|
222
223
|
className: n("modal-custom-footer flex flex-col-reverse px-6 py-3 gap-2 sm:flex-row sm:justify-end mt-auto", a),
|
|
@@ -227,7 +228,7 @@ const Q = ({ children: o, className: a, styled: t }) => /* @__PURE__ */ e.jsx(
|
|
|
227
228
|
export {
|
|
228
229
|
q as Modal,
|
|
229
230
|
F as ModalBody,
|
|
230
|
-
|
|
231
|
-
|
|
231
|
+
U as ModalFooter,
|
|
232
|
+
Q as ModalHeader
|
|
232
233
|
};
|
|
233
234
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../src/components/transition/transition-utils.ts","../../src/components/modal/modal.tsx"],"sourcesContent":["import type { Target, TargetAndTransition, Transition } from \"framer-motion\";\n\ntype WithMotionState<P> = Partial<Record<\"enter\" | \"exit\", P>>;\n\nexport type TransitionConfig = WithMotionState<Transition>;\n\nexport type TransitionEndConfig = WithMotionState<Target>;\n\nexport type TransitionProperties = {\n\t/**\n\t * Custom `transition` definition for `enter` and `exit`\n\t */\n\ttransition?: TransitionConfig;\n\t/**\n\t * Custom `transitionEnd` definition for `enter` and `exit`\n\t */\n\ttransitionEnd?: TransitionEndConfig;\n};\n\ntype TargetResolver<P = {}> = (props: P & TransitionProperties) => TargetAndTransition;\n\ntype Variant<P = {}> = TargetAndTransition | TargetResolver<P>;\n\nexport type Variants<P = {}> = Record<\n\tstring,\n\t{\n\t\tenter: Variant<P>;\n\t\texit: Variant<P>;\n\t\tinitial?: Variant<P>;\n\t}\n>;\n\nexport const TRANSITION_EASINGS = {\n\tease: [0.36, 0.66, 0.4, 1],\n\teaseIn: [0.4, 0, 1, 1],\n\teaseOut: [0, 0, 0.2, 1],\n\teaseInOut: [0.4, 0, 0.2, 1],\n\tspring: [0.155, 1.105, 0.295, 1.12],\n\tspringOut: [0.57, -0.15, 0.62, 0.07],\n\tsoftSpring: [0.16, 1.11, 0.3, 1.02],\n} as const;\n\nexport const TRANSITION_DEFAULTS = {\n\tenter: {\n\t\tduration: 0.2,\n\t\tease: TRANSITION_EASINGS.easeOut,\n\t},\n\texit: {\n\t\tduration: 0.1,\n\t\tease: TRANSITION_EASINGS.easeIn,\n\t},\n} as const;\n\nexport const TRANSITION_VARIANTS: Variants = {\n\tscaleSpring: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.2,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.85)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscaleSpringOpacity: {\n\t\tinitial: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.8)\",\n\t\t},\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransform: \"scale(1)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.96)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscale: {\n\t\tenter: { scale: 1 },\n\t\texit: { scale: 0.95 },\n\t},\n\tscaleFadeIn: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.25,\n\t\t\t\tease: TRANSITION_EASINGS.easeIn,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.95)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.2,\n\t\t\t\tease: TRANSITION_EASINGS.easeOut,\n\t\t\t},\n\t\t},\n\t},\n\tscaleInOut: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(1.03)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tfade: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tcollapse: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\theight: \"auto\",\n\t\t\ttransition: {\n\t\t\t\theight: {\n\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\tbounce: 0,\n\t\t\t\t\tduration: 0.3,\n\t\t\t\t},\n\t\t\t\topacity: {\n\t\t\t\t\tease: \"ease\" as any,\n\t\t\t\t\tduration: 0.4,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\theight: 0,\n\t\t\ttransition: {\n\t\t\t\tease: \"ease\" as any,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t},\n};\n","\"use client\";\n\nimport ReactDOM from \"react-dom\";\nimport { forwardRef, type Ref, useEffect, useRef } from \"react\";\nimport type { ModalBodyType, ModalFooterType, ModalHeaderType, ModalType } from \"./modal.type\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m } from \"framer-motion\";\nimport { TRANSITION_VARIANTS } from \"../transition/transition-utils\";\nimport { cva } from \"class-variance-authority\";\n\nconst backdropVariants = cva(\"\", {\n\tvariants: {\n\t\tbackdrop: {\n\t\t\ttransparent: \"bg-transparent\",\n\t\t\topaque: \"bg-black/50\",\n\t\t\tblur: \"backdrop-blur-md backdrop-saturate-150 bg-overlay/30\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tbackdrop: \"opaque\",\n\t},\n});\n\nconst sizeVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\t\"xs\": \"max-w-xs\",\n\t\t\t\"sm\": \"max-w-sm\",\n\t\t\t\"md\": \"max-w-md\",\n\t\t\t\"lg\": \"max-w-lg\",\n\t\t\t\"xl\": \"max-w-xl\",\n\t\t\t\"2xl\": \"max-w-2xl\",\n\t\t\t\"3xl\": \"max-w-3xl\",\n\t\t\t\"4xl\": \"max-w-4xl\",\n\t\t\t\"5xl\": \"max-w-5xl\",\n\t\t\t\"full\": \"my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] min-h-[100dvh] !rounded-none\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst radiusVariants = cva(\"\", {\n\tvariants: {\n\t\tradius: {\n\t\t\tnone: \"rounded-none\",\n\t\t\tsm: \"rounded-sm\",\n\t\t\tmd: \"rounded-md\",\n\t\t\tlg: \"rounded-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tradius: \"lg\",\n\t},\n});\n\nconst placementVariants = cva(\"\", {\n\tvariants: {\n\t\tplacement: {\n\t\t\tcenter: \"fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]\",\n\t\t\ttop: \"fixed top-0 left-[50%] translate-x-[-50%] sm:mt-8\",\n bottom: \"fixed bottom-0 left-[50%] translate-x-[-50%] sm:mb-8\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tplacement: \"center\",\n\t},\n});\n\nconst shadowVariants = cva(\"\", {\n\tvariants: {\n\t\tshadow: {\n\t\t\tnone: \"shadow-none\",\n\t\t\tsm: \"shadow-sm\",\n\t\t\tmd: \"shadow-md\",\n\t\t\tlg: \"shadow-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tshadow: \"md\",\n\t},\n});\n\nexport const Modal = forwardRef(\n\t(\n\t\t{\n\t\t\tmodalId,\n\t\t\tisShow,\n\t\t\tisVisible,\n\t\t\tchildren,\n\t\t\tstyle,\n\t\t\tclassNameOverlay = \"\",\n\t\t\tstyleContainer,\n\t\t\tonClickOutside,\n\t\t\tclassNameDialog = \"modal-custom-dialog\",\n\t\t\tclassNameContent = \"\",\n\t\t\tbackdrop = \"opaque\",\n\t\t\tsize = \"md\",\n\t\t\tisKeyboardDismissDisabled = false,\n\t\t\tshadow = \"md\",\n\t\t\tradius = \"lg\",\n placement = \"center\",\n\t\t}: ModalType,\n\t\tref: Ref<HTMLDivElement>,\n\t) => {\n\t\tconst modalOverlayRef = useRef<HTMLDivElement>(null);\n\t\tuseEffect(() => {\n\t\t\tif (typeof window !== \"undefined\" && isVisible) {\n\t\t\t\tdocument.body.classList.add(\"modal-open\");\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tif (typeof window !== \"undefined\") {\n\t\t\t\t\tdocument.body.classList.remove(\"modal-open\");\n\t\t\t\t}\n\t\t\t};\n\t\t}, [isVisible]);\n\n\t\tuseEffect(() => {\n\t\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\t\tif (e.key === \"Escape\" && !isKeyboardDismissDisabled) {\n\t\t\t\t\tonClickOutside?.();\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tif (isShow) {\n\t\t\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\t};\n\t\t}, [isShow, isKeyboardDismissDisabled, onClickOutside]);\n\n\t\tif (typeof window === \"undefined\") return null;\n\n\t\tconst modalRoot = document.getElementById(\"modal-root\");\n\t\tif (!modalRoot) return null;\n\n\t\treturn ReactDOM.createPortal(\n\t\t\t<AnimatePresence>\n\t\t\t\t{isShow && (\n\t\t\t\t\t<LazyMotion features={() => import(\"framer-motion\").then((res) => res.domAnimation)}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-overlay\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.fade}\n\t\t\t\t\t\t\t\tclassName={cn(\"fixed inset-0 z-50\", backdropVariants({ backdrop }), classNameOverlay)}\n\t\t\t\t\t\t\t\tonClick={onClickOutside}\n\t\t\t\t\t\t\t\taria-hidden={!isShow}\n\t\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\tref={modalOverlayRef}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-content\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.scaleInOut}\n\t\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\t\tid={modalId}\n\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\" z-50 w-full rounded-lg shadow-lg bg-content1\",\n placementVariants({ placement }),\n\t\t\t\t\t\t\t\t\tsizeVariants({ size }),\n\t\t\t\t\t\t\t\t\tradiusVariants({ radius }),\n\t\t\t\t\t\t\t\t\tshadowVariants({ shadow }),\n\t\t\t\t\t\t\t\t\tclassNameDialog,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className={cn(\"modal-custom-content w-full flex flex-col max-h-[calc(100vh_-_4rem)]\", classNameContent)} style={styleContainer}>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</LazyMotion>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>,\n\t\t\tmodalRoot,\n\t\t);\n\t},\n);\nModal.displayName = \"ModalPortalComponent\";\n\nexport const ModalHeader = ({ title, showCloseButton = true, disabled = false, onClick, className, styled, children, ...props }: ModalHeaderType) => {\n\treturn (\n\t\t<div className={cn(\"modal-custom-header-container w-full\")} style={styled}>\n\t\t\t<div className={cn(\"w-full flex py-4 px-6 flex-initial text-large font-semibold\", className)} {...props}>\n\t\t\t\t{children || <header className=\"modal-custom-title text-lg leading-none font-semibold\">{title}</header>}\n\t\t\t</div>\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-2.5 right-2.5 disabled:pointer-events-none z-10\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\tradius=\"full\"\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName=\"p-0 w-[36px] h-[36px] min-w-auto bg-default-100 hover:bg-default-200 text-default-500 hover:text-default-600 dark:bg-default-100 dark:hover:bg-default-200 dark:text-default-500 dark:hover:text-default-600 disabled:opacity-50 disabled:pointer-events-none\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" fill=\"currentColor\" role=\"img\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M0 0h21v21H0z\"></path>\n\t\t\t\t\t\t\t<path d=\"m12.12 10 4.07-4.06a1.5 1.5 0 1 0-2.11-2.12L10 7.88 5.94 3.81a1.5 1.5 0 1 0-2.12 2.12L7.88 10l-4.07 4.06a1.5 1.5 0 0 0 0 2.12 1.51 1.51 0 0 0 2.13 0L10 12.12l4.06 4.07a1.45 1.45 0 0 0 1.06.44 1.5 1.5 0 0 0 1.06-2.56Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport const ModalBody = forwardRef(({ children, className = \"\", styled, height }: ModalBodyType, ref: Ref<HTMLDivElement>) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-body flex flex-1 flex-col gap-3 px-6 overflow-y-auto\", className)}\n\t\t\tref={ref}\n\t\t\tstyle={{ ...styled, height: height ? `${height}px` : \"auto\" }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nModalBody.displayName = \"ModalBodyPortalComponent\";\n\nexport const ModalFooter = ({ children, className, styled }: ModalFooterType) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-footer flex flex-col-reverse px-6 py-3 gap-2 sm:flex-row sm:justify-end mt-auto\", className)}\n\t\t\tstyle={styled}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["TRANSITION_EASINGS","TRANSITION_VARIANTS","backdropVariants","cva","sizeVariants","radiusVariants","placementVariants","shadowVariants","Modal","forwardRef","modalId","isShow","isVisible","children","style","classNameOverlay","styleContainer","onClickOutside","classNameDialog","classNameContent","backdrop","size","isKeyboardDismissDisabled","shadow","radius","placement","ref","modalOverlayRef","useRef","useEffect","handleKeyDown","e","modalRoot","ReactDOM","AnimatePresence","jsx","LazyMotion","res","jsxs","Fragment","m","cn","ModalHeader","title","showCloseButton","disabled","onClick","className","styled","props","Button","ModalBody","height","ModalFooter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../src/components/transition/transition-utils.ts","../../src/components/modal/modal.tsx"],"sourcesContent":["import type { Target, TargetAndTransition, Transition } from \"framer-motion\";\n\ntype WithMotionState<P> = Partial<Record<\"enter\" | \"exit\", P>>;\n\nexport type TransitionConfig = WithMotionState<Transition>;\n\nexport type TransitionEndConfig = WithMotionState<Target>;\n\nexport type TransitionProperties = {\n\t/**\n\t * Custom `transition` definition for `enter` and `exit`\n\t */\n\ttransition?: TransitionConfig;\n\t/**\n\t * Custom `transitionEnd` definition for `enter` and `exit`\n\t */\n\ttransitionEnd?: TransitionEndConfig;\n};\n\ntype TargetResolver<P = {}> = (props: P & TransitionProperties) => TargetAndTransition;\n\ntype Variant<P = {}> = TargetAndTransition | TargetResolver<P>;\n\nexport type Variants<P = {}> = Record<\n\tstring,\n\t{\n\t\tenter: Variant<P>;\n\t\texit: Variant<P>;\n\t\tinitial?: Variant<P>;\n\t}\n>;\n\nexport const TRANSITION_EASINGS = {\n\tease: [0.36, 0.66, 0.4, 1],\n\teaseIn: [0.4, 0, 1, 1],\n\teaseOut: [0, 0, 0.2, 1],\n\teaseInOut: [0.4, 0, 0.2, 1],\n\tspring: [0.155, 1.105, 0.295, 1.12],\n\tspringOut: [0.57, -0.15, 0.62, 0.07],\n\tsoftSpring: [0.16, 1.11, 0.3, 1.02],\n} as const;\n\nexport const TRANSITION_DEFAULTS = {\n\tenter: {\n\t\tduration: 0.2,\n\t\tease: TRANSITION_EASINGS.easeOut,\n\t},\n\texit: {\n\t\tduration: 0.1,\n\t\tease: TRANSITION_EASINGS.easeIn,\n\t},\n} as const;\n\nexport const TRANSITION_VARIANTS: Variants = {\n\tscaleSpring: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.2,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.85)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscaleSpringOpacity: {\n\t\tinitial: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.8)\",\n\t\t},\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransform: \"scale(1)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"spring\",\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransform: \"scale(0.96)\",\n\t\t\ttransition: {\n\t\t\t\ttype: \"easeOut\" as any,\n\t\t\t\tbounce: 0,\n\t\t\t\tduration: 0.15,\n\t\t\t},\n\t\t},\n\t},\n\tscale: {\n\t\tenter: { scale: 1 },\n\t\texit: { scale: 0.95 },\n\t},\n\tscaleFadeIn: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.25,\n\t\t\t\tease: TRANSITION_EASINGS.easeIn,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(0.95)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.2,\n\t\t\t\tease: TRANSITION_EASINGS.easeOut,\n\t\t\t},\n\t\t},\n\t},\n\tscaleInOut: {\n\t\tenter: {\n\t\t\ttransform: \"scale(1)\",\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\ttransform: \"scale(1.03)\",\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tfade: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.4,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: TRANSITION_EASINGS.ease,\n\t\t\t},\n\t\t},\n\t},\n\tcollapse: {\n\t\tenter: {\n\t\t\topacity: 1,\n\t\t\theight: \"auto\",\n\t\t\ttransition: {\n\t\t\t\theight: {\n\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\tbounce: 0,\n\t\t\t\t\tduration: 0.3,\n\t\t\t\t},\n\t\t\t\topacity: {\n\t\t\t\t\tease: \"ease\" as any,\n\t\t\t\t\tduration: 0.4,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\topacity: 0,\n\t\t\theight: 0,\n\t\t\ttransition: {\n\t\t\t\tease: \"ease\" as any,\n\t\t\t\tduration: 0.3,\n\t\t\t},\n\t\t},\n\t},\n};\n","\"use client\";\n\nimport ReactDOM from \"react-dom\";\nimport { forwardRef, type Ref, useEffect, useRef } from \"react\";\nimport type { ModalBodyType, ModalFooterType, ModalHeaderType, ModalType } from \"./modal.type\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m } from \"framer-motion\";\nimport { TRANSITION_VARIANTS } from \"../transition/transition-utils\";\nimport { cva } from \"class-variance-authority\";\n\nconst backdropVariants = cva(\"\", {\n\tvariants: {\n\t\tbackdrop: {\n\t\t\ttransparent: \"bg-transparent\",\n\t\t\topaque: \"bg-black/50\",\n\t\t\tblur: \"backdrop-blur-md backdrop-saturate-150 bg-overlay/30\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tbackdrop: \"opaque\",\n\t},\n});\n\nconst sizeVariants = cva(\"\", {\n\tvariants: {\n\t\tsize: {\n\t\t\t\"xs\": \"max-w-xs\",\n\t\t\t\"sm\": \"max-w-sm\",\n\t\t\t\"md\": \"max-w-md\",\n\t\t\t\"lg\": \"max-w-lg\",\n\t\t\t\"xl\": \"max-w-xl\",\n\t\t\t\"2xl\": \"max-w-2xl\",\n\t\t\t\"3xl\": \"max-w-3xl\",\n\t\t\t\"4xl\": \"max-w-4xl\",\n\t\t\t\"5xl\": \"max-w-5xl\",\n\t\t\t\"full\": \"my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] min-h-[100dvh] !rounded-none\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t},\n});\n\nconst radiusVariants = cva(\"\", {\n\tvariants: {\n\t\tradius: {\n\t\t\tnone: \"rounded-none\",\n\t\t\tsm: \"rounded-sm\",\n\t\t\tmd: \"rounded-md\",\n\t\t\tlg: \"rounded-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tradius: \"lg\",\n\t},\n});\n\nconst placementVariants = cva(\"\", {\n\tvariants: {\n\t\tplacement: {\n\t\t\tcenter: \"fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]\",\n\t\t\ttop: \"fixed top-0 left-[50%] translate-x-[-50%] sm:mt-8\",\n bottom: \"fixed bottom-0 left-[50%] translate-x-[-50%] sm:mb-8\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tplacement: \"center\",\n\t},\n});\n\nconst shadowVariants = cva(\"\", {\n\tvariants: {\n\t\tshadow: {\n\t\t\tnone: \"shadow-none\",\n\t\t\tsm: \"shadow-sm\",\n\t\t\tmd: \"shadow-md\",\n\t\t\tlg: \"shadow-lg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tshadow: \"md\",\n\t},\n});\n\nexport const Modal = forwardRef(\n\t(\n\t\t{\n\t\t\tmodalId,\n\t\t\tisShow,\n\t\t\tisVisible,\n\t\t\tchildren,\n\t\t\tstyle,\n\t\t\tclassNameOverlay = \"\",\n\t\t\tstyleContainer,\n\t\t\tonClickOutside,\n\t\t\tclassNameDialog = \"modal-custom-dialog\",\n\t\t\tclassNameContent = \"\",\n\t\t\tbackdrop = \"opaque\",\n\t\t\tsize = \"md\",\n\t\t\tisKeyboardDismissDisabled = false,\n\t\t\tshadow = \"md\",\n\t\t\tradius = \"lg\",\n placement = \"center\",\n\t\t}: ModalType,\n\t\tref: Ref<HTMLDivElement>,\n\t) => {\n\t\tconst modalOverlayRef = useRef<HTMLDivElement>(null);\n\t\tuseEffect(() => {\n\t\t\tif (typeof window !== \"undefined\" && isVisible) {\n\t\t\t\tdocument.body.classList.add(\"modal-open\");\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tif (typeof window !== \"undefined\") {\n\t\t\t\t\tdocument.body.classList.remove(\"modal-open\");\n\t\t\t\t}\n\t\t\t};\n\t\t}, [isVisible]);\n\n\t\tuseEffect(() => {\n\t\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\t\tif (e.key === \"Escape\" && !isKeyboardDismissDisabled) {\n\t\t\t\t\tonClickOutside?.();\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tif (isShow) {\n\t\t\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t\t};\n\t\t}, [isShow, isKeyboardDismissDisabled, onClickOutside]);\n\n\t\tif (typeof window === \"undefined\") return null;\n\n\t\tconst modalRoot = document.getElementById(\"modal-root\");\n\t\tif (!modalRoot) return null;\n\n\t\treturn ReactDOM.createPortal(\n\t\t\t<AnimatePresence>\n\t\t\t\t{isShow && (\n\t\t\t\t\t<LazyMotion features={() => import(\"framer-motion\").then((res) => res.domAnimation)}>\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-overlay\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.fade}\n\t\t\t\t\t\t\t\tclassName={cn(\"fixed inset-0 z-50\", backdropVariants({ backdrop }), classNameOverlay)}\n\t\t\t\t\t\t\t\tonClick={onClickOutside}\n\t\t\t\t\t\t\t\taria-hidden={!isShow}\n\t\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\tref={modalOverlayRef}\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\tkey=\"modal-content\"\n\t\t\t\t\t\t\t\tinitial=\"exit\"\n\t\t\t\t\t\t\t\tanimate=\"enter\"\n\t\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\t\tvariants={TRANSITION_VARIANTS.scaleInOut}\n\t\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\t\tid={modalId}\n\t\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\" z-50 w-full rounded-lg shadow-lg bg-content1\",\n placementVariants({ placement }),\n\t\t\t\t\t\t\t\t\tsizeVariants({ size }),\n\t\t\t\t\t\t\t\t\tradiusVariants({ radius }),\n\t\t\t\t\t\t\t\t\tshadowVariants({ shadow }),\n\t\t\t\t\t\t\t\t\tclassNameDialog,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className={cn(\"modal-custom-content w-full flex flex-col max-h-[calc(100vh_-_4rem)]\", classNameContent)} style={styleContainer}>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t</LazyMotion>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>,\n\t\t\tmodalRoot,\n\t\t);\n\t},\n);\nModal.displayName = \"ModalPortalComponent\";\n\nexport const ModalHeader = ({ title, showCloseButton = true, disabled = false, onClick, className, styled, children, ...props }: ModalHeaderType) => {\n\treturn (\n\t\t<div className={cn(\"modal-custom-header-container w-full\")} style={styled}>\n\t\t\t<div className={cn(\"w-full flex py-4 px-6 flex-initial text-large font-semibold\", className)} {...props}>\n\t\t\t\t{children || <header className=\"modal-custom-title text-lg leading-none font-semibold\">{title}</header>}\n\t\t\t</div>\n\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-2.5 right-2.5 disabled:pointer-events-none z-10\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisIconOnly\n\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\tradius=\"full\"\n\t\t\t\t\t\taria-label=\"Close\"\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tclassName=\"p-0 w-[36px] h-[36px] min-w-auto bg-default-100 hover:bg-default-200 text-default-500 hover:text-default-600 dark:bg-default-100 dark:hover:bg-default-200 dark:text-default-500 dark:hover:text-default-600 disabled:opacity-50 disabled:pointer-events-none\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg width=\"20\" height=\"20\" fill=\"currentColor\" role=\"img\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path fill=\"none\" d=\"M0 0h21v21H0z\"></path>\n\t\t\t\t\t\t\t<path d=\"m12.12 10 4.07-4.06a1.5 1.5 0 1 0-2.11-2.12L10 7.88 5.94 3.81a1.5 1.5 0 1 0-2.12 2.12L7.88 10l-4.07 4.06a1.5 1.5 0 0 0 0 2.12 1.51 1.51 0 0 0 2.13 0L10 12.12l4.06 4.07a1.45 1.45 0 0 0 1.06.44 1.5 1.5 0 0 0 1.06-2.56Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport const ModalBody = forwardRef(({ children, className = \"\", styled, height }: ModalBodyType, ref: Ref<HTMLDivElement>) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-body flex flex-1 flex-col gap-3 px-6 overflow-y-auto\", className)}\n\t\t\tref={ref}\n\t\t\tstyle={{ ...styled, height: height ? `${height}px` : \"auto\" }}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nModalBody.displayName = \"ModalBodyPortalComponent\";\n\nexport const ModalFooter = ({ children, className, styled }: ModalFooterType) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"modal-custom-footer flex flex-col-reverse px-6 py-3 gap-2 sm:flex-row sm:justify-end mt-auto\", className)}\n\t\t\tstyle={styled}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["TRANSITION_EASINGS","TRANSITION_VARIANTS","backdropVariants","cva","sizeVariants","radiusVariants","placementVariants","shadowVariants","Modal","forwardRef","modalId","isShow","isVisible","children","style","classNameOverlay","styleContainer","onClickOutside","classNameDialog","classNameContent","backdrop","size","isKeyboardDismissDisabled","shadow","radius","placement","ref","modalOverlayRef","useRef","useEffect","handleKeyDown","e","modalRoot","ReactDOM","AnimatePresence","jsx","LazyMotion","res","jsxs","Fragment","m","cn","ModalHeader","title","showCloseButton","disabled","onClick","className","styled","props","Button","ModalBody","height","ModalFooter"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../chunks/jsx-runtime-BjzqJBtL.js"),p=require("../chunks/bundle-mjs-8z5d_e-8.js"),R=require("../chunks/index-CeBD7F1N.js"),h=require("react"),g=require("../chunks/clsx-C11secjj.js");require("../chunks/textarea-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../chunks/jsx-runtime-BjzqJBtL.js"),p=require("../chunks/bundle-mjs-8z5d_e-8.js"),R=require("../chunks/index-CeBD7F1N.js"),h=require("react"),g=require("../chunks/clsx-C11secjj.js");require("../chunks/textarea-D9X4fUkV.js");const m=require("../chunks/select-DGSPwoy8.js");require("../chunks/button-DFrxQHAW.js");const j=({className:u,color:e="primary",active:t,children:o,text:r,onClick:l})=>{const c=g.clsx({"bg-primary":e==="primary"&&t,"bg-success":e==="success"&&t,"bg-danger":e==="danger"&&t,"bg-warning":e==="warning"&&t,"bg-default":e==="default"&&t,"dark:hover:bg-default-200 dark:hover:text-default-800":!t}),d=p.twMerge(g.clsx("text-sm",{"group-hover:text-primary-500 dark:group-hover:text-default-800":e==="primary"&&!t,"group-hover:text-success-500 dark:group-hover:text-default-800":e==="success"&&!t,"group-hover:text-danger-500 dark:group-hover:text-default-800":e==="danger"&&!t,"group-hover:text-warning-500 dark:group-hover:text-default-800":e==="warning"&&!t,"group-hover:text-default-500 dark:group-hover:text-default-800":e==="default"&&!t,"text-default-foreground":t&&e==="default","text-primary-foreground":t&&e==="primary","text-success-foreground":t&&e==="success","text-danger-foreground":t&&e==="danger","text-warning-foreground":t&&e==="warning"}));return s.jsxRuntimeExports.jsx("div",{className:p.twMerge("w-[33px] h-[32px] flex items-center justify-center group ",c,u),onClick:l,children:o||s.jsxRuntimeExports.jsx("p",{className:d,children:r})})},y=({page:u,total:e,siblings:t=1})=>{if(7+t>=e)return Array.from({length:e},(n,x)=>x+1);const r=Math.max(u-t,1),l=Math.min(u+t,e),c=r>2,d=l<e-2;if(!c&&d){const n=3+2*t;return[...Array.from({length:n},(i,f)=>f+1),"...",e]}else if(c&&!d){const n=3+2*t;return[1,"...",...Array.from({length:n},(i,f)=>e-n+f+1)]}else return[1,"...",...Array.from({length:l-r+1},(x,i)=>r+i),"...",e]},k=u=>u.map(e=>({id:e,name:e})),v=({className:u,color:e="primary",total:t,limit:o=20,page:r=1,siblings:l=1,isLimitSelect:c=!0,dataLimit:d=[10,15,20,50,100,200],onChange:n,translate:x={selectLimit:"Limites",rowPerPage:"Filas por pagina",of:"de"}})=>{const i=Math.ceil(t/o),f=y({page:r,siblings:l,total:i}),b=k(d),w=a=>{a!=="..."&&n&&n({limit:o,page:Number(a)})},E=()=>{r!==1&&n&&n({limit:o,page:r-1})},P=()=>{r===i||i===0||n&&n({limit:o,page:r+1})},N=a=>{n&&n({page:r,limit:a?Number(a):20})};return s.jsxRuntimeExports.jsxs("div",{className:p.twMerge("flex justify-between gap-x-2 items-center",u),children:[c?s.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-x-2.5",children:[s.jsxRuntimeExports.jsx("div",{children:s.jsxRuntimeExports.jsxs("span",{className:"text-sm text-default-500",children:[x?.rowPerPage||"Filas por pagina",":"]})}),s.jsxRuntimeExports.jsxs(m.Select,{value:o?.toString(),onValueChange:N,children:[s.jsxRuntimeExports.jsx(m.SelectTrigger,{className:"min-w-20",children:s.jsxRuntimeExports.jsx(m.SelectValue,{placeholder:"Select limit"})}),s.jsxRuntimeExports.jsx(m.SelectContent,{children:s.jsxRuntimeExports.jsxs(m.SelectGroup,{children:[s.jsxRuntimeExports.jsx(m.SelectLabel,{children:x?.selectLimit||"Limites"}),b.map(a=>s.jsxRuntimeExports.jsx(m.SelectItem,{value:a.id?.toString(),children:a.name},a.id))]})})]}),s.jsxRuntimeExports.jsxs("div",{className:"text-sm text-default-500",children:[s.jsxRuntimeExports.jsx("span",{className:"text-default-500",children:`${r} - ${o}`})," ",x?.of||"de"," ",s.jsxRuntimeExports.jsx("span",{className:"text-default-500",children:t})]})]}):null,i>1&&s.jsxRuntimeExports.jsxs("div",{className:"flex flex-nowrap h-fit max-w-fit relative items-center overflow-visible gap-0 border border-divider rounded-lg cursor-pointer dark:bg-default-100",children:[s.jsxRuntimeExports.jsx(j,{className:g.clsx(r===1&&"cursor-no-drop","rounded-tl-lg rounded-bl-lg "),onClick:E,children:s.jsxRuntimeExports.jsx(R.IoIosArrowBack,{className:p.twMerge("fill-default-500",g.clsx(r===1&&"fill-default-300"))})}),f.map((a,S)=>s.jsxRuntimeExports.jsx(j,{text:a,active:r===a,color:e,onClick:()=>w(a),className:"border-l border-divider "},S)),s.jsxRuntimeExports.jsx(j,{className:g.clsx("border-l border-divider rounded-tr-lg rounded-br-lg ",(r===i||i===0)&&"cursor-no-drop"),onClick:P,children:s.jsxRuntimeExports.jsx(R.IoIosArrowBack,{className:p.twMerge("fill-default-500 transform rotate-180 ",g.clsx((r===i||i===0)&&"fill-default-300"))})})]})]})},I=({initialPage:u=1,initialLimit:e=20})=>{const[t,o]=h.useState(u),[r,l]=h.useState(e);return{handleSetPagination:h.useCallback(({page:d,limit:n})=>{d!==t&&o(d),n!==r&&l(n)},[r,t]),page:t,limit:r}};exports.Pagination=v;exports.usePagination=I;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -3,9 +3,9 @@ import { t as x } from "../chunks/bundle-mjs-2oQ8XDAz.js";
|
|
|
3
3
|
import { I as p } from "../chunks/index-DK44x_HP.js";
|
|
4
4
|
import { useState as j, useCallback as k } from "react";
|
|
5
5
|
import { c as f } from "../chunks/clsx-OuTLNxxd.js";
|
|
6
|
-
import "../chunks/textarea-
|
|
7
|
-
import { S as v, a as I, b as C, c as L, d as R, e as A, f as F } from "../chunks/select-
|
|
8
|
-
import "../chunks/button-
|
|
6
|
+
import "../chunks/textarea-BYbersWf.js";
|
|
7
|
+
import { S as v, a as I, b as C, c as L, d as R, e as A, f as F } from "../chunks/select-BwMqXSzv.js";
|
|
8
|
+
import "../chunks/button-uo4_Xad_.js";
|
|
9
9
|
const h = ({ className: o, color: e = "primary", active: r, children: i, text: t, onClick: u }) => {
|
|
10
10
|
const m = f(
|
|
11
11
|
{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../chunks/jsx-runtime-BjzqJBtL.js"),o=require("react"),a=require("libphonenumber-js"),p=require("../chunks/bundle-mjs-8z5d_e-8.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../chunks/jsx-runtime-BjzqJBtL.js"),o=require("react"),a=require("libphonenumber-js"),p=require("../chunks/bundle-mjs-8z5d_e-8.js"),ae=require("../chunks/utils-CxdrMFeI.js");require("../chunks/textarea-D9X4fUkV.js");const ie=require("../chunks/label-error-B8Rq-HGY.js"),D=require("../chunks/scroll-area-B0mWCpSW.js");require("../chunks/button-DFrxQHAW.js");const $=require("../chunks/index-BydcKEwP.js"),z=require("../chunks/index-lrI_r1ww.js"),F=require("../chunks/features-animation-BoXKk5t2.js"),E={PE:{name:"Perú",flag:"🇵🇪"},US:{name:"Estados Unidos",flag:"🇺🇸"},MX:{name:"México",flag:"🇲🇽"},AR:{name:"Argentina",flag:"🇦🇷"},CO:{name:"Colombia",flag:"🇨🇴"},CL:{name:"Chile",flag:"🇨🇱"},BR:{name:"Brasil",flag:"🇧🇷"},BO:{name:"Bolivia",flag:"🇧🇴"},VE:{name:"Venezuela",flag:"🇻🇪"}},le=({id:Y,name:U,label:S="Teléfono",placeholder:J="Ingrese un número de teléfono",required:W=!1,className:X="",classNameContainer:G="",onCountryChange:H,onPhoneChange:q,touched:C,onBlur:K,error:x,value:u,defaultCountry:g="PE",disabled:h=!1})=>{const[r,I]=o.useState({code:g,name:E[g].name,flag:E[g].flag,callingCode:`+${a.getCountryCallingCode(g)}`}),[j,R]=o.useState(!1),[b,d]=o.useState(""),[Q,i]=o.useState(""),[Z,m]=o.useState(!1),[l,_]=o.useState([]),[f,P]=o.useState(""),[ee,y]=o.useState([]),N=o.useRef(null),A=o.useRef(null),M=o.useRef(null),te=o.useId(),T=Y||te,L=u!==void 0;o.useEffect(()=>{const e=Object.keys(E).map(n=>{const s=E[n];return{code:n,name:s.name,flag:s.flag,callingCode:`+${a.getCountryCallingCode(n)}`}});_(e),y(e)},[]),o.useEffect(()=>{const e=n=>{N.current&&!N.current.contains(n.target)&&R(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),o.useEffect(()=>{if(!L||l.length===0)return;if(u===""||u==null){d(""),i(""),m(!1);return}const e=String(u);let n=l.find(s=>e.startsWith(s.callingCode));if(n||(n=r),n){r.code!==n.code&&I(n);const s=e.replace(n.callingCode,"").replace(/[^\d]/g,"");d(s);const c=new a.AsYouType(n.code).input(s);i(c);const v=a.isValidPhoneNumber(e);m(v)}else d(""),i(""),m(!1)},[u,l,L,r]);const se=(e,n)=>{const s=e.replace(/[^\d]/g,"");if(n?.nativeEvent instanceof InputEvent&&n.nativeEvent.inputType==="deleteContentBackward"&&s.length<4){d(s),i(s);return}const c=new a.AsYouType(r.code).input(s);d(s),i(c);const v=r.callingCode+s,V=a.isValidPhoneNumber(v);m(V),q?.(v,V)},ne=e=>{if(I(e),R(!1),P(""),b){const s=new a.AsYouType(e.code).input(b);i(s);const w=e.callingCode+b,c=a.isValidPhoneNumber(w);m(c),q?.(w,c)}H?.(e),setTimeout(()=>A.current?.focus(),100)},oe=()=>{R(!j),j||setTimeout(()=>M.current?.focus(),100)};o.useEffect(()=>{if(!f.trim())y(l);else{const e=f.toLowerCase(),n=l.filter(s=>s.name.toLowerCase().includes(e)||s.callingCode.includes(f)||s.code.toLowerCase().includes(e));y(n)}},[f,l]);const re=C,O=x,k=re&&O,B=!h&&!!x&&C;return t.jsxRuntimeExports.jsxs("div",{className:p.twMerge("w-full relative flex flex-col",G),children:[S&&t.jsxRuntimeExports.jsxs("label",{htmlFor:T,className:ae.cn("form-control-label block font-normal text-sm text-foreground mb-1",{"text-danger":k}),children:[S," ",W&&t.jsxRuntimeExports.jsx("span",{className:"text-danger",children:"*"})]}),t.jsxRuntimeExports.jsxs("div",{className:p.twMerge("flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default","bg-white border border-input","disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",k?"border-danger aria-invalid:ring-danger/20":"focus-within:border-primary focus-within:ring-primary/20","focus-within:ring-[3px]"),"aria-invalid":B?"true":"false",children:[t.jsxRuntimeExports.jsxs("div",{className:"relative",ref:N,children:[t.jsxRuntimeExports.jsxs("button",{type:"button",onClick:oe,className:p.twMerge("flex items-center gap-2 px-3 border-r border-input h-input-default","hover:bg-muted/20 focus:outline-none rounded-l-md"),children:[t.jsxRuntimeExports.jsx("span",{className:"text-lg",children:r.flag}),t.jsxRuntimeExports.jsx("span",{className:"text-sm font-medium text-foreground",children:r.callingCode}),t.jsxRuntimeExports.jsx($.ChevronDown,{className:`w-4 h-4 text-muted-foreground transition-transform ${j?"rotate-180":""}`})]}),t.jsxRuntimeExports.jsx(z.AnimatePresence,{children:j&&t.jsxRuntimeExports.jsx(z.LazyMotion,{features:F.domAnimation,children:t.jsxRuntimeExports.jsxs(F.m.div,{initial:{opacity:0,y:-8,scale:.98},animate:{opacity:1,y:0,scale:1,transition:{type:"spring",stiffness:420,damping:28}},exit:{opacity:0,y:-6,scale:.98,transition:{duration:.15,ease:"easeOut"}},style:{transformOrigin:"top center"},className:"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden",children:[t.jsxRuntimeExports.jsx("div",{className:"sticky top-0 bg-white border-b border-input p-3",children:t.jsxRuntimeExports.jsxs("div",{className:"relative",children:[t.jsxRuntimeExports.jsx(D.Search,{className:"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"}),t.jsxRuntimeExports.jsx("input",{ref:M,type:"text",value:f,onChange:e=>P(e.target.value),placeholder:"Buscar país o código",className:"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20"})]})}),t.jsxRuntimeExports.jsx(D.ScrollArea,{className:"max-h-48 overflow-y-auto pb-5",children:ee.map(e=>t.jsxRuntimeExports.jsxs("button",{type:"button",onClick:()=>ne(e),className:p.twMerge("w-full flex items-center gap-3 px-3 py-1 text-sm transition",r.code===e.code?"bg-primary/5 border-l-2 border-primary":"hover:bg-muted/20"),children:[t.jsxRuntimeExports.jsx("span",{className:"text-lg",children:e.flag}),t.jsxRuntimeExports.jsx("span",{className:"flex-1 text-left",children:e.name}),t.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground",children:e.callingCode}),r.code===e.code&&t.jsxRuntimeExports.jsx($.Check,{className:"w-4 h-4 text-primary"})]},e.code))})]},"country-dropdown")})})]}),t.jsxRuntimeExports.jsx("input",{ref:A,id:T,type:"tel",name:U,value:Q,onChange:e=>se(e.target.value,e),onBlur:K,placeholder:J,disabled:h,...h?{}:{"aria-invalid":B},className:p.twMerge("flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm",X),autoComplete:"tel"})]}),!h&&x&&C&&t.jsxRuntimeExports.jsx(ie.LabelError,{text:x||O||""})]})};exports.PhoneInput=le;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":["countryData","PhoneInput","id","name","label","placeholder","required","className","classNameContainer","onCountryChange","onPhoneChange","externalTouched","externalOnBlur","externalError","externalValue","defaultCountry","disabled","selectedCountry","setSelectedCountry","useState","getCountryCallingCode","isDropdownOpen","setIsDropdownOpen","phoneValue","setPhoneValue","formattedValue","setFormattedValue","isValid","setIsValid","countries","setCountries","searchTerm","setSearchTerm","filteredCountries","setFilteredCountries","dropdownRef","useRef","inputRef","searchInputRef","inputId","useId","resolvedId","isControlled","useEffect","availableCountries","countryCode","data","handleClickOutside","event","value","country","c","raw","formatted","AsYouType","valid","isValidPhoneNumber","handlePhoneChange","cleanValue","fullNumber","handleCountrySelect","handleDropdownToggle","searchLower","filtered","isTouched","currentError","hasError","isInvalid","twMerge","jsxs","cn","jsx","ChevronDown","AnimatePresence","LazyMotion","domAnimation","m","Search","ScrollArea","Check","LabelError"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../src/components/phone-input/phone-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useState, useEffect, useRef, useId } from \"react\";\nimport { getCountryCallingCode, AsYouType, isValidPhoneNumber } from \"libphonenumber-js\";\nimport { ChevronDown, Check, Search } from \"lucide-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { cn } from \"@/lib/utils\";\nimport { LabelError, ScrollArea } from \"../ui\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { LazyMotion, m, domAnimation } from \"framer-motion\";\n\nconst countryData = {\n\tPE: { name: \"Perú\", flag: \"🇵🇪\" },\n\tUS: { name: \"Estados Unidos\", flag: \"🇺🇸\" },\n\tMX: { name: \"México\", flag: \"🇲🇽\" },\n\tAR: { name: \"Argentina\", flag: \"🇦🇷\" },\n\tCO: { name: \"Colombia\", flag: \"🇨🇴\" },\n\tCL: { name: \"Chile\", flag: \"🇨🇱\" },\n\tBR: { name: \"Brasil\", flag: \"🇧🇷\" },\n\tBO: { name: \"Bolivia\", flag: \"🇧🇴\" },\n\tVE: { name: \"Venezuela\", flag: \"🇻🇪\" },\n};\n\ninterface Country {\n\tcode: string;\n\tname: string;\n\tflag: string;\n\tcallingCode: string;\n}\n\ninterface PhoneInputProps {\n\tid?: string;\n\tname: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tclassName?: string;\n\tonCountryChange?: (country: Country) => void;\n\tonPhoneChange?: (phone: string, isValid: boolean) => void;\n\ttouched?: boolean;\n\tvalues?: any;\n\tonBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n\terror?: string;\n\tvalue?: string; // para standalone\n\tdefaultCountry?: string;\n\tdisabled?: boolean;\n\tclassNameContainer?: string;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n\tid,\n\tname,\n\tlabel = \"Teléfono\",\n\tplaceholder = \"Ingrese un número de teléfono\",\n\trequired = false,\n\tclassName = \"\",\n\tclassNameContainer = \"\",\n\tonCountryChange,\n\tonPhoneChange,\n\ttouched: externalTouched,\n\tonBlur: externalOnBlur,\n\terror: externalError,\n\tvalue: externalValue,\n\tdefaultCountry = \"PE\",\n\tdisabled = false,\n}) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<Country>({\n\t\tcode: defaultCountry,\n\t\tname: countryData[defaultCountry as keyof typeof countryData].name,\n\t\tflag: countryData[defaultCountry as keyof typeof countryData].flag,\n\t\tcallingCode: `+${getCountryCallingCode(defaultCountry as keyof typeof countryData)}`,\n\t});\n\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [phoneValue, setPhoneValue] = useState(\"\");\n\tconst [formattedValue, setFormattedValue] = useState(\"\");\n\tconst [isValid, setIsValid] = useState(false);\n\tconst [countries, setCountries] = useState<Country[]>([]);\n\tconst [searchTerm, setSearchTerm] = useState(\"\");\n\tconst [filteredCountries, setFilteredCountries] = useState<Country[]>([]);\n\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst searchInputRef = useRef<HTMLInputElement>(null);\n\n\tconst inputId = useId();\n\tconst resolvedId = id || inputId;\n\tconst isControlled = externalValue !== undefined;\n\n\t// Inicializar países en el orden definido en countryData\n\tuseEffect(() => {\n\t\tconst availableCountries = Object.keys(countryData).map((countryCode) => {\n\t\t\tconst data = countryData[countryCode as keyof typeof countryData];\n\t\t\treturn {\n\t\t\t\tcode: countryCode,\n\t\t\t\tname: data.name,\n\t\t\t\tflag: data.flag,\n\t\t\t\tcallingCode: `+${getCountryCallingCode(countryCode as keyof typeof countryData)}`,\n\t\t\t};\n\t\t});\n\t\tsetCountries(availableCountries);\n\t\tsetFilteredCountries(availableCountries);\n\t}, []);\n\n\t// Manejo de click fuera para cerrar dropdown\n\tuseEffect(() => {\n\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\tif (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\treturn () => document.removeEventListener(\"mousedown\", handleClickOutside);\n\t}, []);\n\n\t// Sincronizar externalValue con estados internos (incluye reset con \"\")\n\tuseEffect(() => {\n\t\tif (!isControlled || countries.length === 0) return;\n\n\t\t// Si el valor externo es vacío o null, limpiar estados\n\t\tif (externalValue === \"\" || externalValue == null) {\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst value = String(externalValue);\n\t\tlet country = countries.find((c) => value.startsWith(c.callingCode));\n\n\t\t// Si no se detecta país por código, mantener el seleccionado actual\n\t\tif (!country) {\n\t\t\tcountry = selectedCountry;\n\t\t}\n\n\t\tif (country) {\n\t\t\t// Actualizar país si cambió\n\t\t\tif (selectedCountry.code !== country.code) {\n\t\t\t\tsetSelectedCountry(country);\n\t\t\t}\n\n\t\t\tconst raw = value.replace(country.callingCode, \"\").replace(/[^\\d]/g, \"\");\n\t\t\tsetPhoneValue(raw);\n\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(raw);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst valid = isValidPhoneNumber(value);\n\t\t\tsetIsValid(valid);\n\t\t} else {\n\t\t\t// Fallback: no país detectado, limpiar formato pero conservar value crudo\n\t\t\tsetPhoneValue(\"\");\n\t\t\tsetFormattedValue(\"\");\n\t\t\tsetIsValid(false);\n\t\t}\n\t}, [externalValue, countries, isControlled, selectedCountry]);\n\n\t// Formatear número al escribir\n\tconst handlePhoneChange = (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst cleanValue = value.replace(/[^\\d]/g, \"\");\n\n\t\tif (event?.nativeEvent instanceof InputEvent && event.nativeEvent.inputType === \"deleteContentBackward\" && cleanValue.length < 4) {\n\t\t\tsetPhoneValue(cleanValue);\n\t\t\tsetFormattedValue(cleanValue); // mostrar sin formato\n\t\t\treturn;\n\t\t}\n\t\tconst formatter = new AsYouType(selectedCountry.code as keyof typeof countryData);\n\t\tconst formatted = formatter.input(cleanValue);\n\n\t\tsetPhoneValue(cleanValue);\n\t\tsetFormattedValue(formatted);\n\n\t\tconst fullNumber = selectedCountry.callingCode + cleanValue;\n\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\tsetIsValid(valid);\n\n\t\tonPhoneChange?.(fullNumber, valid);\n\t};\n\n\t// Seleccionar país\n\tconst handleCountrySelect = (country: Country) => {\n\t\tsetSelectedCountry(country);\n\t\tsetIsDropdownOpen(false);\n\t\tsetSearchTerm(\"\");\n\n\t\tif (phoneValue) {\n\t\t\tconst formatter = new AsYouType(country.code as keyof typeof countryData);\n\t\t\tconst formatted = formatter.input(phoneValue);\n\t\t\tsetFormattedValue(formatted);\n\n\t\t\tconst fullNumber = country.callingCode + phoneValue;\n\t\t\tconst valid = isValidPhoneNumber(fullNumber);\n\t\t\tsetIsValid(valid);\n\n\t\t\tonPhoneChange?.(fullNumber, valid);\n\t\t}\n\n\t\tonCountryChange?.(country);\n\t\tsetTimeout(() => inputRef.current?.focus(), 100);\n\t};\n\n\tconst handleDropdownToggle = () => {\n\t\tsetIsDropdownOpen(!isDropdownOpen);\n\t\tif (!isDropdownOpen) {\n\t\t\tsetTimeout(() => searchInputRef.current?.focus(), 100);\n\t\t}\n\t};\n\n\t// Filtrar países en búsqueda\n\tuseEffect(() => {\n\t\tif (!searchTerm.trim()) {\n\t\t\tsetFilteredCountries(countries);\n\t\t} else {\n\t\t\tconst searchLower = searchTerm.toLowerCase();\n\t\t\tconst filtered = countries.filter(\n\t\t\t\t(country) =>\n\t\t\t\t\tcountry.name.toLowerCase().includes(searchLower) ||\n\t\t\t\t\tcountry.callingCode.includes(searchTerm) ||\n\t\t\t\t\tcountry.code.toLowerCase().includes(searchLower),\n\t\t\t);\n\t\t\tsetFilteredCountries(filtered);\n\t\t}\n\t}, [searchTerm, countries]);\n\n\tconst isTouched = externalTouched;\n\tconst currentError = externalError;\n\tconst hasError = isTouched && currentError;\n\n\tconst isInvalid = !disabled && !!externalError && externalTouched;\n\n\treturn (\n\t\t<div className={twMerge(\"w-full relative flex flex-col\", classNameContainer)}>\n\t\t\t{label && (\n\t\t\t\t<label\n\t\t\t\t\thtmlFor={resolvedId}\n\t\t\t\t\tclassName={cn(\"form-control-label block font-normal text-sm text-foreground mb-1\", {\n\t\t\t\t\t\t\"text-danger\": hasError,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{label} {required && <span className=\"text-danger\">*</span>}\n\t\t\t\t</label>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\"flex w-full min-w-0 transition-[color,box-shadow] outline-none rounded-md h-input-default\",\n\t\t\t\t\t\"bg-white border border-input\",\n\t\t\t\t\t\"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\thasError\n\t\t\t\t\t\t? \"border-danger aria-invalid:ring-danger/20\"\n\t\t\t\t\t\t: isValid && phoneValue\n\t\t\t\t\t\t? \"focus-within:border-primary focus-within:ring-primary/20\"\n\t\t\t\t\t\t: \"focus-within:border-primary focus-within:ring-primary/20\",\n\t\t\t\t\t\"focus-within:ring-[3px]\",\n\t\t\t\t)}\n\t\t\t\taria-invalid={isInvalid ? \"true\" : \"false\"}\n\t\t\t>\n\t\t\t\t{/* Country selector */}\n\t\t\t\t<div className=\"relative\" ref={dropdownRef}>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={handleDropdownToggle}\n\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\"flex items-center gap-2 px-3 border-r border-input h-input-default\",\n\t\t\t\t\t\t\t\"hover:bg-muted/20 focus:outline-none rounded-l-md\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"text-lg\">{selectedCountry.flag}</span>\n\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">{selectedCountry.callingCode}</span>\n\t\t\t\t\t\t<ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? \"rotate-180\" : \"\"}`} />\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{isDropdownOpen && (\n\t\t\t\t\t\t\t<LazyMotion features={domAnimation}>\n\t\t\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\t\t\tkey=\"country-dropdown\"\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0, y: -8, scale: 0.98 }}\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", stiffness: 420, damping: 28 } }}\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0, y: -6, scale: 0.98, transition: { duration: 0.15, ease: \"easeOut\" } }}\n\t\t\t\t\t\t\t\t\tstyle={{ transformOrigin: \"top center\" }}\n\t\t\t\t\t\t\t\t\tclassName=\"absolute top-full left-0 z-50 w-60 mt-1 bg-white border border-input rounded-md shadow-lg max-h-60 overflow-hidden\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"sticky top-0 bg-white border-b border-input p-3\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t\t<Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tref={searchInputRef}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={searchTerm}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setSearchTerm(e.target.value)}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Buscar país o código\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full pl-10 pr-3 py-2 h-9 border border-input rounded-md text-sm focus:outline-none focus:border-primary focus:ring-[3px] focus:ring-primary/20\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ScrollArea className=\"max-h-48 overflow-y-auto pb-5\">\n\t\t\t\t\t\t\t\t\t\t{filteredCountries.map((country) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tkey={country.code}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleCountrySelect(country)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"w-full flex items-center gap-3 px-3 py-1 text-sm transition\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedCountry.code === country.code\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-primary/5 border-l-2 border-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"hover:bg-muted/20\",\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-lg\">{country.flag}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 text-left\">{country.name}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground\">{country.callingCode}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{selectedCountry.code === country.code && <Check className=\"w-4 h-4 text-primary\" />}\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t\t</m.div>\n\t\t\t\t\t\t\t</LazyMotion>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Phone input */}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tid={resolvedId}\n\t\t\t\t\ttype=\"tel\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={formattedValue}\n\t\t\t\t\tonChange={(e) => handlePhoneChange(e.target.value, e)}\n\t\t\t\t\tonBlur={externalOnBlur}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...(!disabled ? { \"aria-invalid\": isInvalid } : {})}\n\t\t\t\t\tclassName={twMerge(\n\t\t\t\t\t\t\"flex-1 px-3 py-1 h-input-default border-0 rounded-r-md bg-transparent focus:outline-none text-foreground text-sm\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tautoComplete=\"tel\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t{!disabled && externalError && externalTouched && <LabelError text={externalError || currentError || \"\"} />}\n\t\t</div>\n\t);\n};\n"],"names":["countryData","PhoneInput","id","name","label","placeholder","required","className","classNameContainer","onCountryChange","onPhoneChange","externalTouched","externalOnBlur","externalError","externalValue","defaultCountry","disabled","selectedCountry","setSelectedCountry","useState","getCountryCallingCode","isDropdownOpen","setIsDropdownOpen","phoneValue","setPhoneValue","formattedValue","setFormattedValue","isValid","setIsValid","countries","setCountries","searchTerm","setSearchTerm","filteredCountries","setFilteredCountries","dropdownRef","useRef","inputRef","searchInputRef","inputId","useId","resolvedId","isControlled","useEffect","availableCountries","countryCode","data","handleClickOutside","event","value","country","c","raw","formatted","AsYouType","valid","isValidPhoneNumber","handlePhoneChange","cleanValue","fullNumber","handleCountrySelect","handleDropdownToggle","searchLower","filtered","isTouched","currentError","hasError","isInvalid","twMerge","jsxs","cn","jsx","ChevronDown","AnimatePresence","LazyMotion","domAnimation","m","Search","ScrollArea","Check","LabelError"],"mappings":"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"}
|