@arolariu/components 0.1.0 → 0.1.1

package/dist/components/ui/typewriter.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { cn } from "../../lib/utils.js";
+import { motion, stagger, useAnimate, useInView } from "motion/react";
+const TypewriterText = ({ words, className, cursorClassName })=>{
+    const wordsArray = words.map((word)=>({
+            ...word,
+            text: word.text.split("")
+        }));
+    const [scope, animate] = useAnimate();
+    const isInView = useInView(scope);
+    useEffect(()=>{
+        if (isInView) animate("span", {
+            display: "inline-block",
+            opacity: 1,
+            width: "fit-content"
+        }, {
+            duration: 0.3,
+            delay: stagger(0.1),
+            ease: "easeInOut"
+        });
+    }, [
+        isInView
+    ]);
+    const renderWords = ()=>/*#__PURE__*/ jsx(motion.div, {
+            ref: scope,
+            className: "inline",
+            children: wordsArray.map((word, idx)=>/*#__PURE__*/ jsxs("div", {
+                    className: "inline-block",
+                    children: [
+                        word.text.map((char, index)=>/*#__PURE__*/ jsx(motion.span, {
+                                initial: {},
+                                className: cn("dark:text-white text-black opacity-0 hidden", word.className),
+                                children: char
+                            }, `char-${index}`)),
+                        "\xa0"
+                    ]
+                }, `word-${idx}`))
+        });
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center", className),
+        children: [
+            renderWords(),
+            /*#__PURE__*/ jsx(motion.span, {
+                initial: {
+                    opacity: 0
+                },
+                animate: {
+                    opacity: 1
+                },
+                transition: {
+                    duration: 0.8,
+                    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)
+            })
+        ]
+    });
+};
+const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
+    const wordsArray = words.map((word)=>({
+            ...word,
+            text: word.text.split("")
+        }));
+    const renderWords = ()=>/*#__PURE__*/ jsx("div", {
+            children: wordsArray.map((word, idx)=>/*#__PURE__*/ jsxs("div", {
+                    className: "inline-block",
+                    children: [
+                        word.text.map((char, index)=>/*#__PURE__*/ jsx("span", {
+                                className: cn("dark:text-white text-black ", word.className),
+                                children: char
+                            }, `char-${index}`)),
+                        "\xa0"
+                    ]
+                }, `word-${idx}`))
+        });
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("flex space-x-1 my-6", className),
+        children: [
+            /*#__PURE__*/ jsxs(motion.div, {
+                className: "overflow-hidden pb-2",
+                initial: {
+                    width: "0%"
+                },
+                whileInView: {
+                    width: "fit-content"
+                },
+                transition: {
+                    duration: 2,
+                    ease: "linear",
+                    delay: 1
+                },
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold",
+                        style: {
+                            whiteSpace: "nowrap"
+                        },
+                        children: [
+                            renderWords(),
+                            " "
+                        ]
+                    }),
+                    " "
+                ]
+            }),
+            /*#__PURE__*/ jsx(motion.span, {
+                initial: {
+                    opacity: 0
+                },
+                animate: {
+                    opacity: 1
+                },
+                transition: {
+                    duration: 0.8,
+                    repeat: 1 / 0,
+                    repeatType: "reverse"
+                },
+                className: cn("block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500", cursorClassName)
+            })
+        ]
+    });
+};
+export { TypewriterText, TypewriterTextSmooth };
+
+//# sourceMappingURL=typewriter.js.map

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

@@ -0,0 +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"}

package/dist/hooks/use-mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks\\use-mobile.js","sources":["webpack://@arolariu/components/./src/hooks/use-mobile.tsx"],"sourcesContent":["import * 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 *\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 *\r\n * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,\r\n *                   false otherwise.\r\n *\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 | undefined>(\r\n    undefined,\r\n  );\r\n\r\n  React.useEffect(() => {\r\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return !!isMobile;\r\n}\r\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","undefined","mql","window","onChange"],"mappings":";AAEA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAC9BC;IAGFD,UAAgB;QACd,MAAME,MAAMC,OAAO,UAAU,CAAC,CAAC,YAAY,EAAEP,oBAAoB,EAAE,GAAG,CAAC;QACvE,MAAMQ,WAAW;YACfL,YAAYI,OAAO,UAAU,GAAGP;QAClC;QACAM,IAAI,gBAAgB,CAAC,UAAUE;QAC/BL,YAAYI,OAAO,UAAU,GAAGP;QAChC,OAAO,IAAMM,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACN;AACX"}
+{"version":3,"file":"hooks\\use-mobile.js","sources":["webpack://@arolariu/components/./src/hooks/use-mobile.tsx"],"sourcesContent":["import * 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 | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","undefined","mql","window","onChange"],"mappings":";AAEA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAC9BC;IAGFD,UAAgB;QACd,MAAME,MAAMC,OAAO,UAAU,CAAC,CAAC,YAAY,EAAEP,oBAAoB,EAAE,GAAG,CAAC;QACvE,MAAMQ,WAAW;YACfL,YAAYI,OAAO,UAAU,GAAGP;QAClC;QACAM,IAAI,gBAAgB,CAAC,UAAUE;QAC/BL,YAAYI,OAAO,UAAU,GAAGP;QAChC,OAAO,IAAMM,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACN;AACX"}

package/dist/index.css

@@ -429,6 +429,10 @@
     padding-block: 0;
   }
 
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -794,6 +798,10 @@
     margin-block: calc(var(--spacing) * 4);
   }
 
+  .my-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+
   .-mt-1 {
     margin-top: calc(var(--spacing) * -1);
   }
@@ -1393,6 +1401,10 @@
     width: calc(var(--spacing) * 96);
   }
 
+  .w-\[4px\] {
+    width: 4px;
+  }
+
   .w-\[30\%\] {
     width: 30%;
   }
@@ -1953,6 +1965,12 @@
     margin-inline-end: calc(var(--spacing) * -2 * (1 - var(--tw-space-x-reverse)));
   }
 
+  :where(.space-x-1 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(var(--spacing) * 1 * var(--tw-space-x-reverse));
+    margin-inline-end: calc(var(--spacing) * 1 * (1 - var(--tw-space-x-reverse)));
+  }
+
   :where(.space-x-2 > :not(:last-child)) {
     --tw-space-x-reverse: 0;
     margin-inline-start: calc(var(--spacing) * 2 * var(--tw-space-x-reverse));
@@ -2189,16 +2207,6 @@
     border-color: var(--color-neutral-200);
   }
 
-  .border-neutral-200\/50 {
-    border-color: #e5e5e580;
-  }
-
-  @supports (color: color-mix(in lab,red,red)) {
-    .border-neutral-200\/50 {
-      border-color: color-mix(in oklab, var(--color-neutral-200) 50%, transparent);
-    }
-  }
-
   .border-neutral-300 {
     border-color: var(--color-neutral-300);
   }
@@ -5172,6 +5180,10 @@
       display: inline-block;
     }
 
+    .sm\:h-6 {
+      height: calc(var(--spacing) * 6);
+    }
+
     .sm\:max-w-\[300px\] {
       max-width: 300px;
     }
@@ -5242,6 +5254,16 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
 
+    .sm\:text-base {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+
+    .sm\:text-xl {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+
     .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"], .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
       max-width: var(--container-sm);
     }
@@ -5264,6 +5286,10 @@
       display: none;
     }
 
+    .md\:h-6 {
+      height: calc(var(--spacing) * 6);
+    }
+
     .md\:w-\[400px\] {
       width: 400px;
     }
@@ -5326,6 +5352,11 @@
       text-align: left;
     }
 
+    .md\:text-3xl {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+
     .md\:text-6xl {
       font-size: var(--text-6xl);
       line-height: var(--tw-leading, var(--text-6xl--line-height));
@@ -5336,6 +5367,11 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
 
+    .md\:text-xl {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+
     .md\:opacity-0 {
       opacity: 0;
     }
@@ -5376,6 +5412,10 @@
       display: none;
     }
 
+    .lg\:h-10 {
+      height: calc(var(--spacing) * 10);
+    }
+
     .lg\:w-\[500px\] {
       width: 500px;
     }
@@ -5412,6 +5452,22 @@
       --tw-border-style: none;
       border-style: none;
     }
+
+    .lg\:text-5xl {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+
+  @media (width >= 80rem) {
+    .xl\:h-12 {
+      height: calc(var(--spacing) * 12);
+    }
+
+    .xl\:text-5xl {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
   }
 
   .dark\:border-blue-600:is(.dark *) {
@@ -5438,21 +5494,7 @@
     border-color: var(--color-neutral-700);
   }
 
-  .dark\:border-neutral-800:is(.dark *) {
-    border-color: var(--color-neutral-800);
-  }
-
-  .dark\:border-neutral-800\/50:is(.dark *) {
-    border-color: #26262680;
-  }
-
-  @supports (color: color-mix(in lab,red,red)) {
-    .dark\:border-neutral-800\/50:is(.dark *) {
-      border-color: color-mix(in oklab, var(--color-neutral-800) 50%, transparent);
-    }
-  }
-
-  .dark\:dark\:border-neutral-800:is(.dark *):is(.dark *) {
+  .dark\:border-neutral-800:is(.dark *), .dark\:dark\:border-neutral-800:is(.dark *):is(.dark *) {
     border-color: var(--color-neutral-800);
   }