@arolariu/components 0.1.2 → 0.3.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":["\n\nimport * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-neutral-900 text-neutral-50 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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance dark:bg-neutral-50 dark:text-neutral-900\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-neutral-900 fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] dark:bg-neutral-50\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","delayDuration","props","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","children","cn"],"mappings":";;;;;AAOA,SAASA,gBAAgB,EACvBC,gBAAgB,CAAC,EACjB,GAAGC,OACoD;IACvD,OAAO,WAAP,GACE,IAACC,UAAyB;QACxB,aAAU;QACV,eAAeF;QACd,GAAGC,KAAK;;AAGf;AAEA,SAASE,QAAQ,EACf,GAAGF,OACgD;IACnD,OAAO,WAAP,GACE,IAACF,iBAAAA;kBACC,kBAACG,MAAqB;YAAC,aAAU;YAAW,GAAGD,KAAK;;;AAG1D;AAEA,SAASG,eAAe,EACtB,GAAGH,OACmD;IACtD,OAAO,WAAP,GAAO,IAACC,SAAwB;QAAC,aAAU;QAAmB,GAAGD,KAAK;;AACxE;AAEA,SAASI,eAAe,EACtBC,SAAS,EACTC,aAAa,CAAC,EACdC,QAAQ,EACR,GAAGP,OACmD;IACtD,OAAO,WAAP,GACE,IAACC,QAAuB;kBACtB,mBAACA,SAAwB;YACvB,aAAU;YACV,YAAYK;YACZ,WAAWE,GACT,+cACAH;YAED,GAAGL,KAAK;;gBAERO;8BACD,IAACN,OAAsB;oBAAC,WAAU;;;;;AAI1C"}
+{"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"}

package/dist/components/ui/typewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typewriter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,cAAc,GAAI,wCAI5B;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,KAAG,KAAK,CAAC,GAAG,CAAC,OAiFb,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,wCAIlC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,KAAG,KAAK,CAAC,GAAG,CAAC,OA2Eb,CAAC"}
+{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typewriter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,cAAc,GAAI,wCAI5B;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,KAAG,KAAK,CAAC,GAAG,CAAC,OAwEb,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,wCAIlC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,KAAG,KAAK,CAAC,GAAG,CAAC,OAsEb,CAAC"}

package/dist/components/ui/typewriter.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { cn } from "../../lib/utils.js";
+import { cn } from "../../lib/utilities.js";
 import { motion, stagger, useAnimate, useInView } from "motion/react";
+import { useEffect } from "react";
 const TypewriterText = ({ words, className, cursorClassName })=>{
     const wordsArray = words.map((word)=>({
             ...word,
@@ -31,7 +31,7 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
                     children: [
                         word.text.map((char, index)=>/*#__PURE__*/ jsx(motion.span, {
                                 initial: {},
-                                className: cn("dark:text-white text-black opacity-0 hidden", word.className),
+                                className: cn("hidden text-black opacity-0 dark:text-white", word.className),
                                 children: char
                             }, `char-${index}`)),
                         "\xa0"
@@ -39,7 +39,7 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
                 }, `word-${idx}`))
         });
     return /*#__PURE__*/ jsxs("div", {
-        className: cn("text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center", className),
+        className: cn("text-center text-base font-bold sm:text-xl md:text-3xl lg:text-5xl", className),
         children: [
             renderWords(),
             /*#__PURE__*/ jsx(motion.span, {
@@ -54,7 +54,7 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
                     repeat: 1 / 0,
                     repeatType: "reverse"
                 },
-                className: cn("inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500", cursorClassName)
+                className: cn("inline-block h-4 w-[4px] rounded-sm bg-blue-500 md:h-6 lg:h-10", cursorClassName)
             })
         ]
     });
@@ -69,7 +69,7 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
                     className: "inline-block",
                     children: [
                         word.text.map((char, index)=>/*#__PURE__*/ jsx("span", {
-                                className: cn("dark:text-white text-black ", word.className),
+                                className: cn("text-black dark:text-white", word.className),
                                 children: char
                             }, `char-${index}`)),
                         "\xa0"
@@ -77,7 +77,7 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
                 }, `word-${idx}`))
         });
     return /*#__PURE__*/ jsxs("div", {
-        className: cn("flex space-x-1 my-6", className),
+        className: cn("my-6 flex space-x-1", className),
         children: [
             /*#__PURE__*/ jsxs(motion.div, {
                 className: "overflow-hidden pb-2",
@@ -94,7 +94,7 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
                 },
                 children: [
                     /*#__PURE__*/ jsxs("div", {
-                        className: "text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold",
+                        className: "lg:text:3xl text-xs font-bold sm:text-base md:text-xl xl:text-5xl",
                         style: {
                             whiteSpace: "nowrap"
                         },
@@ -118,7 +118,7 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
                     repeat: 1 / 0,
                     repeatType: "reverse"
                 },
-                className: cn("block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500", cursorClassName)
+                className: cn("block h-4 w-[4px] rounded-sm bg-blue-500 sm:h-6 xl:h-12", cursorClassName)
             })
         ]
     });

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":["\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, stagger, useAnimate, useInView } from \"motion/react\";\nimport { useEffect } from \"react\";\n\nexport const TypewriterText = ({\n  words,\n  className,\n  cursorClassName,\n}: {\n  words: {\n    text: string;\n    className?: string;\n  }[];\n  className?: string;\n  cursorClassName?: string;\n}): React.JSX.Element => {\n  // split text inside of words into array of characters\n  const wordsArray = words.map((word) => {\n    return {\n      ...word,\n      text: word.text.split(\"\"),\n    };\n  });\n\n  const [scope, animate] = useAnimate();\n  const isInView = useInView(scope);\n  useEffect(() => {\n    if (isInView) {\n      animate(\n        \"span\",\n        {\n          display: \"inline-block\",\n          opacity: 1,\n          width: \"fit-content\",\n        },\n        {\n          duration: 0.3,\n          delay: stagger(0.1),\n          ease: \"easeInOut\",\n        },\n      );\n    }\n  }, [isInView]);\n\n  const renderWords = () => {\n    return (\n      <motion.div ref={scope} className=\"inline\">\n        {wordsArray.map((word, idx) => {\n          return (\n            <div key={`word-${idx}`} className=\"inline-block\">\n              {word.text.map((char, index) => (\n                <motion.span\n                  initial={{}}\n                  key={`char-${index}`}\n                  className={cn(\n                    `dark:text-white text-black opacity-0 hidden`,\n                    word.className,\n                  )}\n                >\n                  {char}\n                </motion.span>\n              ))}\n              &nbsp;\n            </div>\n          );\n        })}\n      </motion.div>\n    );\n  };\n  return (\n    <div\n      className={cn(\n        \"text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center\",\n        className,\n      )}\n    >\n      {renderWords()}\n      <motion.span\n        initial={{\n          opacity: 0,\n        }}\n        animate={{\n          opacity: 1,\n        }}\n        transition={{\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \"reverse\",\n        }}\n        className={cn(\n          \"inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500\",\n          cursorClassName,\n        )}\n      ></motion.span>\n    </div>\n  );\n};\n\nexport const TypewriterTextSmooth = ({\n  words,\n  className,\n  cursorClassName,\n}: {\n  words: {\n    text: string;\n    className?: string;\n  }[];\n  className?: string;\n  cursorClassName?: string;\n}): React.JSX.Element => {\n  // split text inside of words into array of characters\n  const wordsArray = words.map((word) => {\n    return {\n      ...word,\n      text: word.text.split(\"\"),\n    };\n  });\n  const renderWords = () => {\n    return (\n      <div>\n        {wordsArray.map((word, idx) => {\n          return (\n            <div key={`word-${idx}`} className=\"inline-block\">\n              {word.text.map((char, index) => (\n                <span\n                  key={`char-${index}`}\n                  className={cn(`dark:text-white text-black `, word.className)}\n                >\n                  {char}\n                </span>\n              ))}\n              &nbsp;\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cn(\"flex space-x-1 my-6\", className)}>\n      <motion.div\n        className=\"overflow-hidden pb-2\"\n        initial={{\n          width: \"0%\",\n        }}\n        whileInView={{\n          width: \"fit-content\",\n        }}\n        transition={{\n          duration: 2,\n          ease: \"linear\",\n          delay: 1,\n        }}\n      >\n        <div\n          className=\"text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold\"\n          style={{\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {renderWords()}{\" \"}\n        </div>{\" \"}\n      </motion.div>\n      <motion.span\n        initial={{\n          opacity: 0,\n        }}\n        animate={{\n          opacity: 1,\n        }}\n        transition={{\n          duration: 0.8,\n\n          repeat: Infinity,\n          repeatType: \"reverse\",\n        }}\n        className={cn(\n          \"block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500\",\n          cursorClassName,\n        )}\n      ></motion.span>\n    </div>\n  );\n};\n"],"names":["TypewriterText","words","className","cursorClassName","wordsArray","word","scope","animate","useAnimate","isInView","useInView","useEffect","stagger","renderWords","motion","idx","char","index","cn","Infinity","TypewriterTextSmooth"],"mappings":";;;;;AAOO,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,UAAU;QACR,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;YAAC,KAAKR;YAAO,WAAU;sBAC/BF,WAAW,GAAG,CAAC,CAACC,MAAMU,MACd,WAAP,GACE,KAAC;oBAAwB,WAAU;;wBAChCV,KAAK,IAAI,CAAC,GAAG,CAAC,CAACW,MAAMC,QAAAA,WAAAA,GACpB,IAACH,OAAO,IAAI;gCACV,SAAS,CAAC;gCAEV,WAAWI,GACT,+CACAb,KAAK,SAAS;0CAGfW;+BANI,CAAC,KAAK,EAAEC,OAAO;wBAQrB;;mBAZK,CAAC,KAAK,EAAEF,KAAK;;IAoBjC,OAAO,WAAP,GACE,KAAC;QACC,WAAWG,GACT,sEACAhB;;YAGDW;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,GACT,kEACAf;;;;AAKV;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;oBAAwB,WAAU;;wBAChCV,KAAK,IAAI,CAAC,GAAG,CAAC,CAACW,MAAMC,QAAAA,WAAAA,GACpB,IAAC;gCAEC,WAAWC,GAAG,+BAA+Bb,KAAK,SAAS;0CAE1DW;+BAHI,CAAC,KAAK,EAAEC,OAAO;wBAKrB;;mBARK,CAAC,KAAK,EAAEF,KAAK;;IAiBjC,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;;kCAEA,KAAC;wBACC,WAAU;wBACV,OAAO;4BACL,YAAY;wBACd;;4BAECD;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,GACT,4DACAf;;;;AAKV"}
+{"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"}

package/dist/hooks/useIsMobile.d.ts

@@ -1,13 +1,10 @@
 /**
  * A custom React hook that detects whether the current device is a mobile device
  * based on the screen width.
- *
  * This hook uses a media query to check if the viewport width is less than the defined
  * mobile breakpoint (768px). It updates the state when the window size changes.
- *
- * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,
- *                   false otherwise.
- *
+ * @returns Returns true if the viewport width is less than the mobile breakpoint,
+ * false otherwise.
  * @example
  * ```tsx
  * function MyComponent() {

package/dist/hooks/useIsMobile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}
+{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAgBrC"}

package/dist/hooks/useIsMobile.js

@@ -12,7 +12,7 @@ function useIsMobile() {
         setIsMobile(globalThis.window.innerWidth < MOBILE_BREAKPOINT);
         return ()=>mql.removeEventListener("change", onChange);
     }, []);
-    return !!isMobile;
+    return Boolean(isMobile);
 }
 export { useIsMobile };
 

package/dist/hooks/useIsMobile.js.map

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

package/dist/hooks/useWindowSize.d.ts

@@ -1,4 +1,3 @@
-/** @format */
 type WindowSize = {
     width: number | null;
     height: number | null;

package/dist/hooks/useWindowSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.tsx"],"names":[],"mappings":"AAAA,cAAc;AAQd,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,IAAI,cAAc,CAmC9C"}
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.tsx"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,IAAI,cAAc,CA+B9C"}

package/dist/hooks/useWindowSize.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 "use client";
+import { useEffect, useState } from "react";
 const MOBILE_BREAKPOINT = 768;
 function useWindowSize() {
     const [windowSize, setWindowSize] = useState({

package/dist/hooks/useWindowSize.js.map

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