@arolariu/components 0.3.0 → 0.4.0

package/dist/components/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\tooltip.js","sources":["webpack://@arolariu/components/./src/components/ui/tooltip.tsx"],"sourcesContent":["\r\n\r\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst TooltipProvider = TooltipPrimitive.Provider;\r\n\r\nconst Tooltip = TooltipPrimitive.Root;\r\n\r\nconst TooltipTrigger = TooltipPrimitive.Trigger;\r\n\r\nconst TooltipContent = React.forwardRef<\r\n  React.ElementRef<typeof TooltipPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\r\n>(({className, sideOffset = 4, ...props}, ref) => (\r\n  <TooltipPrimitive.Portal>\r\n    <TooltipPrimitive.Content\r\n      ref={ref}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  </TooltipPrimitive.Portal>\r\n));\r\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\r\n\r\nexport {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger};\r\n"],"names":["TooltipProvider","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","React","className","sideOffset","props","ref","cn"],"mappings":";;;;;AAOA,MAAMA,kBAAkBC;AAExB,MAAMC,UAAUD;AAEhB,MAAME,iBAAiBF;AAEvB,MAAMG,iBAAiB,WAAjBA,GAAiBC,WAGrB,CAAC,EAACC,SAAS,EAAEC,aAAa,CAAC,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxC,IAACR,QAAuB;kBACtB,kBAACA,SAAwB;YACvB,KAAKQ;YACL,YAAYF;YACZ,WAAWG,GACT,4cACAJ;YAED,GAAGE,KAAK;;;AAIfJ,eAAe,WAAW,GAAGH,QAAAA,WAAoC"}
+{"version":3,"file":"components/ui/tooltip.js","sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst TooltipProvider = TooltipPrimitive.Provider;\r\n\r\nconst Tooltip = TooltipPrimitive.Root;\r\n\r\nconst TooltipTrigger = TooltipPrimitive.Trigger;\r\n\r\nconst TooltipContent = React.forwardRef<\r\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\r\n>(({className, sideOffset = 4, ...props}, ref) => (\r\n  <TooltipPrimitive.Portal>\r\n    <TooltipPrimitive.Content\r\n      ref={ref}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  </TooltipPrimitive.Portal>\r\n));\r\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\r\n\r\nexport {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger};\r\n"],"names":["TooltipProvider","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","React","className","sideOffset","props","ref","cn"],"mappings":";;;;;AAOA,MAAMA,kBAAkBC;AAExB,MAAMC,UAAUD;AAEhB,MAAME,iBAAiBF;AAEvB,MAAMG,iBAAiB,WAAjBA,GAAiBC,WAGrB,CAAC,EAACC,SAAS,EAAEC,aAAa,CAAC,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACxC,IAACR,QAAuB;kBACtB,kBAACA,SAAwB;YACvB,KAAKQ;YACL,YAAYF;YACZ,WAAWG,GACT,4cACAJ;YAED,GAAGE,KAAK;;;AAIfJ,eAAe,WAAW,GAAGH,QAAAA,WAAoC"}

package/dist/components/ui/typewriter.js

@@ -6,7 +6,9 @@ import { useEffect } from "react";
 const TypewriterText = ({ words, className, cursorClassName })=>{
     const wordsArray = words.map((word)=>({
             ...word,
-            text: word.text.split("")
+            text: [
+                ...word.text
+            ]
         }));
     const [scope, animate] = useAnimate();
     const isInView = useInView(scope);
@@ -62,7 +64,9 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
 const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
     const wordsArray = words.map((word)=>({
             ...word,
-            text: word.text.split("")
+            text: [
+                ...word.text
+            ]
         }));
     const renderWords = ()=>/*#__PURE__*/ jsx("div", {
             children: wordsArray.map((word, idx)=>/*#__PURE__*/ jsxs("div", {

package/dist/components/ui/typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"components\\ui\\typewriter.js","sources":["webpack://@arolariu/components/./src/components/ui/typewriter.tsx"],"sourcesContent":["\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {motion, stagger, useAnimate, useInView} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nexport const TypewriterText = ({\r\n  words,\r\n  className,\r\n  cursorClassName,\r\n}: {\r\n  words: {\r\n    text: string;\r\n    className?: string;\r\n  }[];\r\n  className?: string;\r\n  cursorClassName?: string;\r\n}): React.JSX.Element => {\r\n  // split text inside of words into array of characters\r\n  const wordsArray = words.map((word) => {\r\n    return {\r\n      ...word,\r\n      text: word.text.split(\"\"),\r\n    };\r\n  });\r\n\r\n  const [scope, animate] = useAnimate();\r\n  const isInView = useInView(scope);\r\n  React.useEffect(() => {\r\n    if (isInView) {\r\n      animate(\r\n        \"span\",\r\n        {\r\n          display: \"inline-block\",\r\n          opacity: 1,\r\n          width: \"fit-content\",\r\n        },\r\n        {\r\n          duration: 0.3,\r\n          delay: stagger(0.1),\r\n          ease: \"easeInOut\",\r\n        },\r\n      );\r\n    }\r\n  }, [isInView]);\r\n\r\n  const renderWords = () => {\r\n    return (\r\n      <motion.div\r\n        ref={scope}\r\n        className='inline'>\r\n        {wordsArray.map((word, idx) => {\r\n          return (\r\n            <div\r\n              key={`word-${idx}`}\r\n              className='inline-block'>\r\n              {word.text.map((char, index) => (\r\n                <motion.span\r\n                  initial={{}}\r\n                  key={`char-${index}`}\r\n                  className={cn(`hidden text-black opacity-0 dark:text-white`, word.className)}>\r\n                  {char}\r\n                </motion.span>\r\n              ))}\r\n              &nbsp;\r\n            </div>\r\n          );\r\n        })}\r\n      </motion.div>\r\n    );\r\n  };\r\n  return (\r\n    <div className={cn(\"text-center text-base font-bold sm:text-xl md:text-3xl lg:text-5xl\", className)}>\r\n      {renderWords()}\r\n      <motion.span\r\n        initial={{\r\n          opacity: 0,\r\n        }}\r\n        animate={{\r\n          opacity: 1,\r\n        }}\r\n        transition={{\r\n          duration: 0.8,\r\n          repeat: Infinity,\r\n          repeatType: \"reverse\",\r\n        }}\r\n        className={cn(\"inline-block h-4 w-[4px] rounded-sm bg-blue-500 md:h-6 lg:h-10\", cursorClassName)}></motion.span>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const TypewriterTextSmooth = ({\r\n  words,\r\n  className,\r\n  cursorClassName,\r\n}: {\r\n  words: {\r\n    text: string;\r\n    className?: string;\r\n  }[];\r\n  className?: string;\r\n  cursorClassName?: string;\r\n}): React.JSX.Element => {\r\n  // split text inside of words into array of characters\r\n  const wordsArray = words.map((word) => {\r\n    return {\r\n      ...word,\r\n      text: word.text.split(\"\"),\r\n    };\r\n  });\r\n  const renderWords = () => {\r\n    return (\r\n      <div>\r\n        {wordsArray.map((word, idx) => {\r\n          return (\r\n            <div\r\n              key={`word-${idx}`}\r\n              className='inline-block'>\r\n              {word.text.map((char, index) => (\r\n                <span\r\n                  key={`char-${index}`}\r\n                  className={cn(`text-black dark:text-white`, word.className)}>\r\n                  {char}\r\n                </span>\r\n              ))}\r\n              &nbsp;\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"my-6 flex space-x-1\", className)}>\r\n      <motion.div\r\n        className='overflow-hidden pb-2'\r\n        initial={{\r\n          width: \"0%\",\r\n        }}\r\n        whileInView={{\r\n          width: \"fit-content\",\r\n        }}\r\n        transition={{\r\n          duration: 2,\r\n          ease: \"linear\",\r\n          delay: 1,\r\n        }}>\r\n        <div\r\n          className='lg:text:3xl text-xs font-bold sm:text-base md:text-xl xl:text-5xl'\r\n          style={{\r\n            whiteSpace: \"nowrap\",\r\n          }}>\r\n          {renderWords()}{\" \"}\r\n        </div>{\" \"}\r\n      </motion.div>\r\n      <motion.span\r\n        initial={{\r\n          opacity: 0,\r\n        }}\r\n        animate={{\r\n          opacity: 1,\r\n        }}\r\n        transition={{\r\n          duration: 0.8,\r\n\r\n          repeat: Infinity,\r\n          repeatType: \"reverse\",\r\n        }}\r\n        className={cn(\"block h-4 w-[4px] rounded-sm bg-blue-500 sm:h-6 xl:h-12\", cursorClassName)}></motion.span>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["TypewriterText","words","className","cursorClassName","wordsArray","word","scope","animate","useAnimate","isInView","useInView","React","stagger","renderWords","motion","idx","char","index","cn","Infinity","TypewriterTextSmooth"],"mappings":";;;;;AAMO,MAAMA,iBAAiB,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,eAAe,EAQhB;IAEC,MAAMC,aAAaH,MAAM,GAAG,CAAC,CAACI,OACrB;YACL,GAAGA,IAAI;YACP,MAAMA,KAAK,IAAI,CAAC,KAAK,CAAC;QACxB;IAGF,MAAM,CAACC,OAAOC,QAAQ,GAAGC;IACzB,MAAMC,WAAWC,UAAUJ;IAC3BK,UAAgB;QACd,IAAIF,UACFF,QACE,QACA;YACE,SAAS;YACT,SAAS;YACT,OAAO;QACT,GACA;YACE,UAAU;YACV,OAAOK,QAAQ;YACf,MAAM;QACR;IAGN,GAAG;QAACH;KAAS;IAEb,MAAMI,cAAc,IACX,WAAP,GACE,IAACC,OAAO,GAAG;YACT,KAAKR;YACL,WAAU;sBACTF,WAAW,GAAG,CAAC,CAACC,MAAMU,MACd,WAAP,GACE,KAAC;oBAEC,WAAU;;wBACTV,KAAK,IAAI,CAAC,GAAG,CAAC,CAACW,MAAMC,QAAAA,WAAAA,GACpB,IAACH,OAAO,IAAI;gCACV,SAAS,CAAC;gCAEV,WAAWI,GAAG,+CAA+Cb,KAAK,SAAS;0CAC1EW;+BAFI,CAAC,KAAK,EAAEC,OAAO;wBAIrB;;mBATE,CAAC,KAAK,EAAEF,KAAK;;IAiB9B,OAAO,WAAP,GACE,KAAC;QAAI,WAAWG,GAAG,sEAAsEhB;;YACtFW;0BACD,IAACC,OAAO,IAAI;gBACV,SAAS;oBACP,SAAS;gBACX;gBACA,SAAS;oBACP,SAAS;gBACX;gBACA,YAAY;oBACV,UAAU;oBACV,QAAQK;oBACR,YAAY;gBACd;gBACA,WAAWD,GAAG,kEAAkEf;;;;AAGxF;AAEO,MAAMiB,uBAAuB,CAAC,EACnCnB,KAAK,EACLC,SAAS,EACTC,eAAe,EAQhB;IAEC,MAAMC,aAAaH,MAAM,GAAG,CAAC,CAACI,OACrB;YACL,GAAGA,IAAI;YACP,MAAMA,KAAK,IAAI,CAAC,KAAK,CAAC;QACxB;IAEF,MAAMQ,cAAc,IACX,WAAP,GACE,IAAC;sBACET,WAAW,GAAG,CAAC,CAACC,MAAMU,MACd,WAAP,GACE,KAAC;oBAEC,WAAU;;wBACTV,KAAK,IAAI,CAAC,GAAG,CAAC,CAACW,MAAMC,QAAAA,WAAAA,GACpB,IAAC;gCAEC,WAAWC,GAAG,8BAA8Bb,KAAK,SAAS;0CACzDW;+BAFI,CAAC,KAAK,EAAEC,OAAO;wBAIrB;;mBARE,CAAC,KAAK,EAAEF,KAAK;;IAiB9B,OAAO,WAAP,GACE,KAAC;QAAI,WAAWG,GAAG,uBAAuBhB;;0BACxC,KAACY,OAAO,GAAG;gBACT,WAAU;gBACV,SAAS;oBACP,OAAO;gBACT;gBACA,aAAa;oBACX,OAAO;gBACT;gBACA,YAAY;oBACV,UAAU;oBACV,MAAM;oBACN,OAAO;gBACT;;kCACA,KAAC;wBACC,WAAU;wBACV,OAAO;4BACL,YAAY;wBACd;;4BACCD;4BAAe;;;oBACX;;;0BAET,IAACC,OAAO,IAAI;gBACV,SAAS;oBACP,SAAS;gBACX;gBACA,SAAS;oBACP,SAAS;gBACX;gBACA,YAAY;oBACV,UAAU;oBAEV,QAAQK;oBACR,YAAY;gBACd;gBACA,WAAWD,GAAG,2DAA2Df;;;;AAGjF"}
+{"version":3,"file":"components/ui/typewriter.js","sources":["../../../src/components/ui/typewriter.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport {motion, stagger, useAnimate, useInView} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nexport const TypewriterText = ({\r\n  words,\r\n  className,\r\n  cursorClassName,\r\n}: {\r\n  words: {\r\n    text: string;\r\n    className?: string;\r\n  }[];\r\n  className?: string;\r\n  cursorClassName?: string;\r\n}): React.JSX.Element => {\r\n  // split text inside of words into array of characters\r\n  const wordsArray = words.map((word) => {\r\n    return {\r\n      ...word,\r\n      text: [...word.text],\r\n    };\r\n  });\r\n\r\n  const [scope, animate] = useAnimate();\r\n  const isInView = useInView(scope);\r\n  React.useEffect(() => {\r\n    if (isInView) {\r\n      animate(\r\n        \"span\",\r\n        {\r\n          display: \"inline-block\",\r\n          opacity: 1,\r\n          width: \"fit-content\",\r\n        },\r\n        {\r\n          duration: 0.3,\r\n          delay: stagger(0.1),\r\n          ease: \"easeInOut\",\r\n        },\r\n      );\r\n    }\r\n  }, [isInView]);\r\n\r\n  const renderWords = () => {\r\n    return (\r\n      <motion.div\r\n        ref={scope}\r\n        className='inline'>\r\n        {wordsArray.map((word, idx) => {\r\n          return (\r\n            <div\r\n              key={`word-${idx}`}\r\n              className='inline-block'>\r\n              {word.text.map((char, index) => (\r\n                <motion.span\r\n                  initial={{}}\r\n                  key={`char-${index}`}\r\n                  className={cn(`hidden text-black opacity-0 dark:text-white`, word.className)}>\r\n                  {char}\r\n                </motion.span>\r\n              ))}\r\n              &nbsp;\r\n            </div>\r\n          );\r\n        })}\r\n      </motion.div>\r\n    );\r\n  };\r\n  return (\r\n    <div className={cn(\"text-center text-base font-bold sm:text-xl md:text-3xl lg:text-5xl\", className)}>\r\n      {renderWords()}\r\n      <motion.span\r\n        initial={{\r\n          opacity: 0,\r\n        }}\r\n        animate={{\r\n          opacity: 1,\r\n        }}\r\n        transition={{\r\n          duration: 0.8,\r\n          repeat: Infinity,\r\n          repeatType: \"reverse\",\r\n        }}\r\n        className={cn(\"inline-block h-4 w-[4px] rounded-sm bg-blue-500 md:h-6 lg:h-10\", cursorClassName)}></motion.span>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const TypewriterTextSmooth = ({\r\n  words,\r\n  className,\r\n  cursorClassName,\r\n}: {\r\n  words: {\r\n    text: string;\r\n    className?: string;\r\n  }[];\r\n  className?: string;\r\n  cursorClassName?: string;\r\n}): React.JSX.Element => {\r\n  // split text inside of words into array of characters\r\n  const wordsArray = words.map((word) => {\r\n    return {\r\n      ...word,\r\n      text: [...word.text],\r\n    };\r\n  });\r\n  const renderWords = () => {\r\n    return (\r\n      <div>\r\n        {wordsArray.map((word, idx) => {\r\n          return (\r\n            <div\r\n              key={`word-${idx}`}\r\n              className='inline-block'>\r\n              {word.text.map((char, index) => (\r\n                <span\r\n                  key={`char-${index}`}\r\n                  className={cn(`text-black dark:text-white`, word.className)}>\r\n                  {char}\r\n                </span>\r\n              ))}\r\n              &nbsp;\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"my-6 flex space-x-1\", className)}>\r\n      <motion.div\r\n        className='overflow-hidden pb-2'\r\n        initial={{\r\n          width: \"0%\",\r\n        }}\r\n        whileInView={{\r\n          width: \"fit-content\",\r\n        }}\r\n        transition={{\r\n          duration: 2,\r\n          ease: \"linear\",\r\n          delay: 1,\r\n        }}>\r\n        <div\r\n          className='lg:text:3xl text-xs font-bold sm:text-base md:text-xl xl:text-5xl'\r\n          style={{\r\n            whiteSpace: \"nowrap\",\r\n          }}>\r\n          {renderWords()}{\" \"}\r\n        </div>{\" \"}\r\n      </motion.div>\r\n      <motion.span\r\n        initial={{\r\n          opacity: 0,\r\n        }}\r\n        animate={{\r\n          opacity: 1,\r\n        }}\r\n        transition={{\r\n          duration: 0.8,\r\n\r\n          repeat: Infinity,\r\n          repeatType: \"reverse\",\r\n        }}\r\n        className={cn(\"block h-4 w-[4px] rounded-sm bg-blue-500 sm:h-6 xl:h-12\", cursorClassName)}></motion.span>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["TypewriterText","words","className","cursorClassName","wordsArray","word","scope","animate","useAnimate","isInView","useInView","React","stagger","renderWords","motion","idx","char","index","cn","Infinity","TypewriterTextSmooth"],"mappings":";;;;;AAMO,MAAMA,iBAAiB,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,eAAe,EAQhB;IAEC,MAAMC,aAAaH,MAAM,GAAG,CAAC,CAACI,OACrB;YACL,GAAGA,IAAI;YACP,MAAM;mBAAIA,KAAK,IAAI;aAAC;QACtB;IAGF,MAAM,CAACC,OAAOC,QAAQ,GAAGC;IACzB,MAAMC,WAAWC,UAAUJ;IAC3BK,UAAgB;QACd,IAAIF,UACFF,QACE,QACA;YACE,SAAS;YACT,SAAS;YACT,OAAO;QACT,GACA;YACE,UAAU;YACV,OAAOK,QAAQ;YACf,MAAM;QACR;IAGN,GAAG;QAACH;KAAS;IAEb,MAAMI,cAAc,IACX,WAAP,GACE,IAACC,OAAO,GAAG;YACT,KAAKR;YACL,WAAU;sBACTF,WAAW,GAAG,CAAC,CAACC,MAAMU,MACd,WAAP,GACE,KAAC;oBAEC,WAAU;;wBACTV,KAAK,IAAI,CAAC,GAAG,CAAC,CAACW,MAAMC,QAAAA,WAAAA,GACpB,IAACH,OAAO,IAAI;gCACV,SAAS,CAAC;gCAEV,WAAWI,GAAG,+CAA+Cb,KAAK,SAAS;0CAC1EW;+BAFI,CAAC,KAAK,EAAEC,OAAO;wBAIrB;;mBATE,CAAC,KAAK,EAAEF,KAAK;;IAiB9B,OAAO,WAAP,GACE,KAAC;QAAI,WAAWG,GAAG,sEAAsEhB;;YACtFW;0BACD,IAACC,OAAO,IAAI;gBACV,SAAS;oBACP,SAAS;gBACX;gBACA,SAAS;oBACP,SAAS;gBACX;gBACA,YAAY;oBACV,UAAU;oBACV,QAAQK;oBACR,YAAY;gBACd;gBACA,WAAWD,GAAG,kEAAkEf;;;;AAGxF;AAEO,MAAMiB,uBAAuB,CAAC,EACnCnB,KAAK,EACLC,SAAS,EACTC,eAAe,EAQhB;IAEC,MAAMC,aAAaH,MAAM,GAAG,CAAC,CAACI,OACrB;YACL,GAAGA,IAAI;YACP,MAAM;mBAAIA,KAAK,IAAI;aAAC;QACtB;IAEF,MAAMQ,cAAc,IACX,WAAP,GACE,IAAC;sBACET,WAAW,GAAG,CAAC,CAACC,MAAMU,MACd,WAAP,GACE,KAAC;oBAEC,WAAU;;wBACTV,KAAK,IAAI,CAAC,GAAG,CAAC,CAACW,MAAMC,QAAAA,WAAAA,GACpB,IAAC;gCAEC,WAAWC,GAAG,8BAA8Bb,KAAK,SAAS;0CACzDW;+BAFI,CAAC,KAAK,EAAEC,OAAO;wBAIrB;;mBARE,CAAC,KAAK,EAAEF,KAAK;;IAiB9B,OAAO,WAAP,GACE,KAAC;QAAI,WAAWG,GAAG,uBAAuBhB;;0BACxC,KAACY,OAAO,GAAG;gBACT,WAAU;gBACV,SAAS;oBACP,OAAO;gBACT;gBACA,aAAa;oBACX,OAAO;gBACT;gBACA,YAAY;oBACV,UAAU;oBACV,MAAM;oBACN,OAAO;gBACT;;kCACA,KAAC;wBACC,WAAU;wBACV,OAAO;4BACL,YAAY;wBACd;;4BACCD;4BAAe;;;oBACX;;;0BAET,IAACC,OAAO,IAAI;gBACV,SAAS;oBACP,SAAS;gBACX;gBACA,SAAS;oBACP,SAAS;gBACX;gBACA,YAAY;oBACV,UAAU;oBAEV,QAAQK;oBACR,YAAY;gBACd;gBACA,WAAWD,GAAG,2DAA2Df;;;;AAGjF"}

package/dist/hooks/useIsMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks\\useIsMobile.js","sources":["webpack://@arolariu/components/./src/hooks/useIsMobile.tsx"],"sourcesContent":["\r\nimport * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width.\r\n * This hook uses a media query to check if the viewport width is less than the defined\r\n * mobile breakpoint (768px). It updates the state when the window size changes.\r\n * @returns Returns true if the viewport width is less than the mobile breakpoint,\r\n * false otherwise.\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *\r\n *   return (\r\n *     <div>\r\n *       {isMobile ? 'Mobile View' : 'Desktop View'}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return Boolean(isMobile);\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","globalThis","onChange","Boolean"],"mappings":";;AAGA,MAAMA,oBAAoB;AAsBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAA+B;IAE/DA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAEN,oBAAoB,EAAE,GAAG,CAAC;QAClF,MAAMO,WAAW;YAEfJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC7C;QACAK,IAAI,gBAAgB,CAAC,UAAUE;QAE/BJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC3C,OAAO,IAAMK,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAOC,QAAQN;AACjB"}
+{"version":3,"file":"hooks/useIsMobile.js","sources":["../../src/hooks/useIsMobile.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\n/**\r\n * A custom React hook that detects whether the current device is a mobile device\r\n * based on the screen width.\r\n * This hook uses a media query to check if the viewport width is less than the defined\r\n * mobile breakpoint (768px). It updates the state when the window size changes.\r\n * @returns Returns true if the viewport width is less than the mobile breakpoint,\r\n * false otherwise.\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const isMobile = useIsMobile();\r\n *\r\n *   return (\r\n *     <div>\r\n *       {isMobile ? 'Mobile View' : 'Desktop View'}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useIsMobile(): boolean {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const mql = globalThis.window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n    setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return Boolean(isMobile);\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","mql","globalThis","onChange","Boolean"],"mappings":";;AAGA,MAAMA,oBAAoB;AAsBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAA+B;IAE/DA,UAAgB;QACd,MAAMC,MAAMC,WAAW,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAEN,oBAAoB,EAAE,GAAG,CAAC;QAClF,MAAMO,WAAW;YAEfJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC7C;QACAK,IAAI,gBAAgB,CAAC,UAAUE;QAE/BJ,YAAYG,WAAW,MAAM,CAAC,UAAU,GAAGN;QAC3C,OAAO,IAAMK,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAOC,QAAQN;AACjB"}

package/dist/hooks/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks\\useWindowSize.js","sources":["webpack://@arolariu/components/./src/hooks/useWindowSize.tsx"],"sourcesContent":["\r\n\r\nimport {useEffect, useState} from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\ntype WindowSize = {\r\n  width: number | null;\r\n  height: number | null;\r\n};\r\n\r\ntype HookReturnType = Readonly<{\r\n  windowSize: WindowSize;\r\n  isMobile: boolean;\r\n  isDesktop: boolean;\r\n}>;\r\n\r\n/**\r\n * Client hook to get the window size and whether the window is mobile or desktop.\r\n * @returns An object containing the window size and whether the window is mobile or desktop.\r\n *@example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const { windowSize, isMobile, isDesktop } = useWindowSize();\r\n *\r\n *   return (\r\n *     <div>\r\n *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>\r\n *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useWindowSize(): HookReturnType {\r\n  const [windowSize, setWindowSize] = useState<WindowSize>({\r\n    width: null,\r\n    height: null,\r\n  });\r\n\r\n  useEffect(() => {\r\n    /**\r\n     * This function updates the window size.\r\n     * It is created inside of useEffect and has a short lifespan.\r\n     * After it is attached to the window object, it will be garbage collected\r\n     *  when the component unmounts or the window is resized.\r\n     */\r\n    function __handleResize__() {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setWindowSize({\r\n        width: globalThis.window.innerWidth,\r\n        height: globalThis.window.innerHeight,\r\n      });\r\n    }\r\n\r\n    globalThis.window.addEventListener(\"resize\", __handleResize__);\r\n    __handleResize__(); // Call the function once to get the initial window size\r\n    return () => globalThis.window.removeEventListener(\"resize\", __handleResize__);\r\n  }, []); // Empty array ensures that effect is only run on mount\r\n\r\n  return {\r\n    windowSize,\r\n    isMobile: typeof windowSize.width === \"number\" && windowSize.width < MOBILE_BREAKPOINT,\r\n    isDesktop: typeof windowSize.width === \"number\" && windowSize.width >= MOBILE_BREAKPOINT,\r\n  } as const;\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useWindowSize","windowSize","setWindowSize","useState","useEffect","__handleResize__","globalThis"],"mappings":";;AAIA,MAAMA,oBAAoB;AA8BnB,SAASC;IACd,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAqB;QACvD,OAAO;QACP,QAAQ;IACV;IAEAC,UAAU;QAOR,SAASC;YAEPH,cAAc;gBACZ,OAAOI,WAAW,MAAM,CAAC,UAAU;gBACnC,QAAQA,WAAW,MAAM,CAAC,WAAW;YACvC;QACF;QAEAA,WAAW,MAAM,CAAC,gBAAgB,CAAC,UAAUD;QAC7CA;QACA,OAAO,IAAMC,WAAW,MAAM,CAAC,mBAAmB,CAAC,UAAUD;IAC/D,GAAG,EAAE;IAEL,OAAO;QACLJ;QACA,UAAU,mBAAOA,WAAW,KAAK,IAAiBA,WAAW,KAAK,GAAGF;QACrE,WAAW,mBAAOE,WAAW,KAAK,IAAiBA,WAAW,KAAK,IAAIF;IACzE;AACF"}
+{"version":3,"file":"hooks/useWindowSize.js","sources":["../../src/hooks/useWindowSize.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {useEffect, useState} from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\ntype WindowSize = {\r\n  width: number | null;\r\n  height: number | null;\r\n};\r\n\r\ntype HookReturnType = Readonly<{\r\n  windowSize: WindowSize;\r\n  isMobile: boolean;\r\n  isDesktop: boolean;\r\n}>;\r\n\r\n/**\r\n * Client hook to get the window size and whether the window is mobile or desktop.\r\n * @returns An object containing the window size and whether the window is mobile or desktop.\r\n *@example\r\n * ```tsx\r\n * function MyComponent() {\r\n *   const { windowSize, isMobile, isDesktop } = useWindowSize();\r\n *\r\n *   return (\r\n *     <div>\r\n *       <p>Window Size: {windowSize.width} x {windowSize.height}</p>\r\n *       <p>{isMobile ? 'Mobile View' : 'Desktop View'}</p>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useWindowSize(): HookReturnType {\r\n  const [windowSize, setWindowSize] = useState<WindowSize>({\r\n    width: null,\r\n    height: null,\r\n  });\r\n\r\n  useEffect(() => {\r\n    /**\r\n     * This function updates the window size.\r\n     * It is created inside of useEffect and has a short lifespan.\r\n     * After it is attached to the window object, it will be garbage collected\r\n     *  when the component unmounts or the window is resized.\r\n     */\r\n    function __handleResize__() {\r\n      // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect\r\n      setWindowSize({\r\n        width: globalThis.window.innerWidth,\r\n        height: globalThis.window.innerHeight,\r\n      });\r\n    }\r\n\r\n    globalThis.window.addEventListener(\"resize\", __handleResize__);\r\n    __handleResize__(); // Call the function once to get the initial window size\r\n    return () => globalThis.window.removeEventListener(\"resize\", __handleResize__);\r\n  }, []); // Empty array ensures that effect is only run on mount\r\n\r\n  return {\r\n    windowSize,\r\n    isMobile: typeof windowSize.width === \"number\" && windowSize.width < MOBILE_BREAKPOINT,\r\n    isDesktop: typeof windowSize.width === \"number\" && windowSize.width >= MOBILE_BREAKPOINT,\r\n  } as const;\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useWindowSize","windowSize","setWindowSize","useState","useEffect","__handleResize__","globalThis"],"mappings":";;AAIA,MAAMA,oBAAoB;AA8BnB,SAASC;IACd,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAqB;QACvD,OAAO;QACP,QAAQ;IACV;IAEAC,UAAU;QAOR,SAASC;YAEPH,cAAc;gBACZ,OAAOI,WAAW,MAAM,CAAC,UAAU;gBACnC,QAAQA,WAAW,MAAM,CAAC,WAAW;YACvC;QACF;QAEAA,WAAW,MAAM,CAAC,gBAAgB,CAAC,UAAUD;QAC7CA;QACA,OAAO,IAAMC,WAAW,MAAM,CAAC,mBAAmB,CAAC,UAAUD;IAC/D,GAAG,EAAE;IAEL,OAAO;QACLJ;QACA,UAAU,AAA4B,YAA5B,OAAOA,WAAW,KAAK,IAAiBA,WAAW,KAAK,GAAGF;QACrE,WAAW,AAA4B,YAA5B,OAAOE,WAAW,KAAK,IAAiBA,WAAW,KAAK,IAAIF;IACzE;AACF"}