@arolariu/components 0.5.0 → 1.0.0

package/dist/components/ui/tooltip_module.css

@@ -0,0 +1,35 @@
+.trigger-GlwNv7 {
+  max-width: max-content;
+  display: inline-flex;
+}
+
+.positioner-Z9RG3p {
+  z-index: 50;
+}
+
+.popup-ec3lPB {
+  background-color: var(--ac-foreground);
+  border-radius: var(--ac-radius-sm);
+  color: var(--ac-background);
+  font-size: var(--ac-text-xs);
+  padding: var(--ac-space-1) var(--ac-space-2);
+  transform-origin: var(--transform-origin);
+  transition: opacity var(--ac-transition-fast),transform var(--ac-transition-fast);
+  line-height: 1.5;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 2px 8px #0000001f;
+
+  & * {
+    color: inherit;
+    background-color: #0000;
+  }
+
+  &[data-ending-style], &[data-starting-style] {
+    opacity: 0;
+    transform: scale(.96);
+  }
+}
+
+
+/*# sourceMappingURL=tooltip_module.css.map */

package/dist/components/ui/tooltip_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/tooltip.module.css","webpack://./src/components/ui/tooltip.module.css"],"names":[],"mappings":"AADA;ECEE,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,sCAAsC;EACtC,kCAAkC;EAClC,2BAA2B;EAC3B,4BAA4B;EAC5B,4CAA4C;EAC5C,yCAAyC;EACzC,iFAAiF;EACjF,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,+BAA+B;;EAE/B;IACE,cAAc;IACd,uBAAuB;EACzB;;EAEA;IACE,UAAU;IACV,qBAAqB;EACvB;AACF","sourcesContent":[".trigger{display:inline-flex;max-width:max-content}.positioner{z-index:50}.popup{background-color:var(--ac-foreground);border-radius:var(--ac-radius-sm);box-shadow:0 2px 8px rgba(0,0,0,.12);color:var(--ac-background);font-size:var(--ac-text-xs);line-height:1.5;overflow:hidden;padding:var(--ac-space-1) var(--ac-space-2);position:relative;transform-origin:var(--transform-origin);transition:opacity var(--ac-transition-fast),transform var(--ac-transition-fast);& *{background-color:transparent;color:inherit}&[data-ending-style],&[data-starting-style]{opacity:0;transform:scale(.96)}}",".trigger {\n  max-width: max-content;\n  display: inline-flex;\n}\n\n.positioner {\n  z-index: 50;\n}\n\n.popup {\n  background-color: var(--ac-foreground);\n  border-radius: var(--ac-radius-sm);\n  color: var(--ac-background);\n  font-size: var(--ac-text-xs);\n  padding: var(--ac-space-1) var(--ac-space-2);\n  transform-origin: var(--transform-origin);\n  transition: opacity var(--ac-transition-fast),transform var(--ac-transition-fast);\n  line-height: 1.5;\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 2px 8px #0000001f;\n\n  & * {\n    color: inherit;\n    background-color: #0000;\n  }\n\n  &[data-ending-style], &[data-starting-style] {\n    opacity: 0;\n    transform: scale(.96);\n  }\n}\n"],"sourceRoot":""}

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

@@ -1,18 +1,53 @@
 import * as React from "react";
-export declare const TypewriterText: ({ words, className, cursorClassName, }: {
-    words: {
-        text: string;
-        className?: string;
-    }[];
+/** Single word definition consumed by the typewriter components. */
+export interface TypewriterWord {
+    /** Word content split into animated characters at render time. @default undefined */
+    text: string;
+    /** Additional CSS classes merged with each rendered character. @default undefined */
     className?: string;
-    cursorClassName?: string;
-}) => React.JSX.Element;
-export declare const TypewriterTextSmooth: ({ words, className, cursorClassName, }: {
-    words: {
-        text: string;
-        className?: string;
-    }[];
+}
+/** Props accepted by {@link TypewriterText} and {@link TypewriterTextSmooth}. */
+export interface TypewriterTextProps {
+    /** Ordered list of words rendered by the typewriter animation. @default undefined */
+    words: ReadonlyArray<TypewriterWord>;
+    /** Additional CSS classes merged with the outer container. @default undefined */
     className?: string;
+    /** Additional CSS classes merged with the blinking cursor element. @default undefined */
     cursorClassName?: string;
-}) => React.JSX.Element;
+}
+/**
+ * Reveals text one character at a time with a stepped typewriter animation.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <TypewriterText words={[{text: "Hello"}, {text: "world"}]} />
+ * ```
+ *
+ * @see {@link TypewriterTextProps} for available props
+ */
+declare const TypewriterText: React.ForwardRefExoticComponent<TypewriterTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Reveals text with a continuous width-based typewriter sweep animation.
+ *
+ * @remarks
+ * - Animated component using the `motion` library
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Client-side only (`"use client"` directive)
+ *
+ * @example
+ * ```tsx
+ * <TypewriterTextSmooth words={[{text: "Smooth"}, {text: "typing"}]} />
+ * ```
+ *
+ * @see {@link TypewriterTextProps} for available props
+ */
+declare const TypewriterTextSmooth: React.ForwardRefExoticComponent<TypewriterTextProps & React.RefAttributes<HTMLDivElement>>;
+export { TypewriterText, TypewriterTextSmooth };
 //# sourceMappingURL=typewriter.d.ts.map

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":"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"}
+{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typewriter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,qFAAqF;IACrF,IAAI,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iFAAiF;AACjF,MAAM,WAAW,mBAAmB;IAClC,qFAAqF;IACrF,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,cAAc,4FA8DnB,CAAC;AAGF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,oBAAoB,4FAgDzB,CAAC;AAGF,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAC,CAAC"}

package/dist/components/ui/typewriter.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/utilities.js";
 import { motion, stagger, useAnimate, useInView } from "motion/react";
-import { useEffect } from "react";
-const TypewriterText = ({ words, className, cursorClassName })=>{
+import { forwardRef, useEffect } from "react";
+import { cn } from "../../lib/utilities.js";
+import typewriter_module from "./typewriter.module.js";
+const TypewriterText = /*#__PURE__*/ forwardRef(({ words, className, cursorClassName }, ref)=>{
     const wordsArray = words.map((word)=>({
             ...word,
             text: [
@@ -13,7 +14,8 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
     const [scope, animate] = useAnimate();
     const isInView = useInView(scope);
     useEffect(()=>{
-        if (isInView) animate("span", {
+        if (!isInView) return;
+        animate("span", {
             display: "inline-block",
             opacity: 1,
             width: "fit-content"
@@ -23,27 +25,28 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
             ease: "easeInOut"
         });
     }, [
+        animate,
         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("hidden text-black opacity-0 dark:text-white", word.className),
-                                children: char
-                            }, `char-${index}`)),
-                        "\xa0"
-                    ]
-                }, `word-${idx}`))
-        });
     return /*#__PURE__*/ jsxs("div", {
-        className: cn("text-center text-base font-bold sm:text-xl md:text-3xl lg:text-5xl", className),
+        ref: ref,
+        className: cn(typewriter_module.root, className),
         children: [
-            renderWords(),
+            /*#__PURE__*/ jsx(motion.div, {
+                ref: scope,
+                className: typewriter_module.inline,
+                children: wordsArray.map((word, wordIndex)=>/*#__PURE__*/ jsxs("div", {
+                        className: typewriter_module.word,
+                        children: [
+                            word.text.map((character, characterIndex)=>/*#__PURE__*/ jsx(motion.span, {
+                                    initial: {},
+                                    className: cn(typewriter_module.hiddenCharacter, word.className),
+                                    children: character
+                                }, `char-${characterIndex}`)),
+                            "\xa0"
+                        ]
+                    }, `word-${wordIndex}`))
+            }),
             /*#__PURE__*/ jsx(motion.span, {
                 initial: {
                     opacity: 0
@@ -56,12 +59,13 @@ const TypewriterText = ({ words, className, cursorClassName })=>{
                     repeat: 1 / 0,
                     repeatType: "reverse"
                 },
-                className: cn("inline-block h-4 w-[4px] rounded-sm bg-blue-500 md:h-6 lg:h-10", cursorClassName)
+                className: cn(typewriter_module.cursor, cursorClassName)
             })
         ]
     });
-};
-const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
+});
+TypewriterText.displayName = "TypewriterText";
+const TypewriterTextSmooth = /*#__PURE__*/ forwardRef(({ words, className, cursorClassName }, ref)=>{
     const wordsArray = words.map((word)=>({
             ...word,
             text: [
@@ -69,22 +73,23 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
             ]
         }));
     const renderWords = ()=>/*#__PURE__*/ jsx("div", {
-            children: wordsArray.map((word, idx)=>/*#__PURE__*/ jsxs("div", {
-                    className: "inline-block",
+            children: wordsArray.map((word, wordIndex)=>/*#__PURE__*/ jsxs("div", {
+                    className: typewriter_module.word,
                     children: [
-                        word.text.map((char, index)=>/*#__PURE__*/ jsx("span", {
-                                className: cn("text-black dark:text-white", word.className),
-                                children: char
-                            }, `char-${index}`)),
+                        word.text.map((character, characterIndex)=>/*#__PURE__*/ jsx("span", {
+                                className: cn(typewriter_module.visibleCharacter, word.className),
+                                children: character
+                            }, `char-${characterIndex}`)),
                         "\xa0"
                     ]
-                }, `word-${idx}`))
+                }, `word-${wordIndex}`))
         });
     return /*#__PURE__*/ jsxs("div", {
-        className: cn("my-6 flex space-x-1", className),
+        ref: ref,
+        className: cn(typewriter_module.smoothRoot, className),
         children: [
-            /*#__PURE__*/ jsxs(motion.div, {
-                className: "overflow-hidden pb-2",
+            /*#__PURE__*/ jsx(motion.div, {
+                className: typewriter_module.smoothViewport,
                 initial: {
                     width: "0%"
                 },
@@ -96,19 +101,10 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
                     ease: "linear",
                     delay: 1
                 },
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "lg:text:3xl text-xs font-bold sm:text-base md:text-xl xl:text-5xl",
-                        style: {
-                            whiteSpace: "nowrap"
-                        },
-                        children: [
-                            renderWords(),
-                            " "
-                        ]
-                    }),
-                    " "
-                ]
+                children: /*#__PURE__*/ jsx("div", {
+                    className: typewriter_module.smoothText,
+                    children: renderWords()
+                })
             }),
             /*#__PURE__*/ jsx(motion.span, {
                 initial: {
@@ -122,11 +118,12 @@ const TypewriterTextSmooth = ({ words, className, cursorClassName })=>{
                     repeat: 1 / 0,
                     repeatType: "reverse"
                 },
-                className: cn("block h-4 w-[4px] rounded-sm bg-blue-500 sm:h-6 xl:h-12", cursorClassName)
+                className: cn(typewriter_module.smoothCursor, cursorClassName)
             })
         ]
     });
-};
+});
+TypewriterTextSmooth.displayName = "TypewriterTextSmooth";
 export { TypewriterText, TypewriterTextSmooth };
 
 //# sourceMappingURL=typewriter.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"components/ui/typewriter.js","sources":["../../../src/components/ui/typewriter.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, stagger, useAnimate, useInView} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./typewriter.module.css\";\r\n\r\n/** Single word definition consumed by the typewriter components. */\r\nexport interface TypewriterWord {\r\n  /** Word content split into animated characters at render time. @default undefined */\r\n  text: string;\r\n  /** Additional CSS classes merged with each rendered character. @default undefined */\r\n  className?: string;\r\n}\r\n\r\n/** Props accepted by {@link TypewriterText} and {@link TypewriterTextSmooth}. */\r\nexport interface TypewriterTextProps {\r\n  /** Ordered list of words rendered by the typewriter animation. @default undefined */\r\n  words: ReadonlyArray<TypewriterWord>;\r\n  /** Additional CSS classes merged with the outer container. @default undefined */\r\n  className?: string;\r\n  /** Additional CSS classes merged with the blinking cursor element. @default undefined */\r\n  cursorClassName?: string;\r\n}\r\n\r\n/**\r\n * Reveals text one character at a time with a stepped typewriter animation.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <TypewriterText words={[{text: \"Hello\"}, {text: \"world\"}]} />\r\n * ```\r\n *\r\n * @see {@link TypewriterTextProps} for available props\r\n */\r\nconst TypewriterText = React.forwardRef<HTMLDivElement, TypewriterTextProps>(\r\n  ({words, className, cursorClassName}: Readonly<TypewriterTextProps>, ref): React.JSX.Element => {\r\n    const wordsArray = words.map((word) => ({\r\n      ...word,\r\n      text: [...word.text],\r\n    }));\r\n\r\n    const [scope, animate] = useAnimate();\r\n    const isInView = useInView(scope);\r\n\r\n    React.useEffect(() => {\r\n      if (!isInView) {\r\n        return;\r\n      }\r\n\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    }, [animate, isInView]);\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(styles.root, className)}>\r\n        <motion.div\r\n          ref={scope}\r\n          className={styles.inline}>\r\n          {wordsArray.map((word, wordIndex) => (\r\n            <div\r\n              key={`word-${wordIndex}`}\r\n              className={styles.word}>\r\n              {word.text.map((character, characterIndex) => (\r\n                <motion.span\r\n                  initial={{}}\r\n                  key={`char-${characterIndex}`}\r\n                  className={cn(styles.hiddenCharacter, word.className)}>\r\n                  {character}\r\n                </motion.span>\r\n              ))}\r\n              &nbsp;\r\n            </div>\r\n          ))}\r\n        </motion.div>\r\n        <motion.span\r\n          initial={{opacity: 0}}\r\n          animate={{opacity: 1}}\r\n          transition={{duration: 0.8, repeat: Infinity, repeatType: \"reverse\"}}\r\n          className={cn(styles.cursor, cursorClassName)}\r\n        />\r\n      </div>\r\n    );\r\n  },\r\n);\r\nTypewriterText.displayName = \"TypewriterText\";\r\n\r\n/**\r\n * Reveals text with a continuous width-based typewriter sweep animation.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <TypewriterTextSmooth words={[{text: \"Smooth\"}, {text: \"typing\"}]} />\r\n * ```\r\n *\r\n * @see {@link TypewriterTextProps} for available props\r\n */\r\nconst TypewriterTextSmooth = React.forwardRef<HTMLDivElement, TypewriterTextProps>(\r\n  ({words, className, cursorClassName}: Readonly<TypewriterTextProps>, ref): React.JSX.Element => {\r\n    const wordsArray = words.map((word) => ({\r\n      ...word,\r\n      text: [...word.text],\r\n    }));\r\n\r\n    const renderWords = (): React.JSX.Element => {\r\n      return (\r\n        <div>\r\n          {wordsArray.map((word, wordIndex) => (\r\n            <div\r\n              key={`word-${wordIndex}`}\r\n              className={styles.word}>\r\n              {word.text.map((character, characterIndex) => (\r\n                <span\r\n                  key={`char-${characterIndex}`}\r\n                  className={cn(styles.visibleCharacter, word.className)}>\r\n                  {character}\r\n                </span>\r\n              ))}\r\n              &nbsp;\r\n            </div>\r\n          ))}\r\n        </div>\r\n      );\r\n    };\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(styles.smoothRoot, className)}>\r\n        <motion.div\r\n          className={styles.smoothViewport}\r\n          initial={{width: \"0%\"}}\r\n          whileInView={{width: \"fit-content\"}}\r\n          transition={{duration: 2, ease: \"linear\", delay: 1}}>\r\n          <div className={styles.smoothText}>{renderWords()}</div>\r\n        </motion.div>\r\n        <motion.span\r\n          initial={{opacity: 0}}\r\n          animate={{opacity: 1}}\r\n          transition={{duration: 0.8, repeat: Infinity, repeatType: \"reverse\"}}\r\n          className={cn(styles.smoothCursor, cursorClassName)}\r\n        />\r\n      </div>\r\n    );\r\n  },\r\n);\r\nTypewriterTextSmooth.displayName = \"TypewriterTextSmooth\";\r\n\r\nexport {TypewriterText, TypewriterTextSmooth};\r\n"],"names":["TypewriterText","React","words","className","cursorClassName","ref","wordsArray","word","scope","animate","useAnimate","isInView","useInView","stagger","cn","styles","motion","wordIndex","character","characterIndex","Infinity","TypewriterTextSmooth","renderWords"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import "./typewriter_module.css";
+const typewriter_module = {
+    root: "root-gVk1Hi",
+    inline: "inline-gwcxJt",
+    word: "word-fEJETe",
+    hiddenCharacter: "hiddenCharacter-DNjKpm",
+    visibleCharacter: "visibleCharacter-Db7vgz",
+    cursor: "cursor-GTR1E8",
+    smoothCursor: "smoothCursor-j2d_Qe",
+    smoothRoot: "smoothRoot-on7z_V",
+    smoothViewport: "smoothViewport-L2k_XS",
+    smoothText: "smoothText-Dgvfyn"
+};
+export default typewriter_module;
+
+//# sourceMappingURL=typewriter.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/typewriter.module.js","sources":["../../../src/components/ui/typewriter.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./typewriter_module.css\"\nexport default {\"root\":\"root-gVk1Hi\",\"inline\":\"inline-gwcxJt\",\"word\":\"word-fEJETe\",\"hiddenCharacter\":\"hiddenCharacter-DNjKpm\",\"visibleCharacter\":\"visibleCharacter-Db7vgz\",\"cursor\":\"cursor-GTR1E8\",\"smoothCursor\":\"smoothCursor-j2d_Qe\",\"smoothRoot\":\"smoothRoot-on7z_V\",\"smoothViewport\":\"smoothViewport-L2k_XS\",\"smoothText\":\"smoothText-Dgvfyn\"};"],"names":[],"mappings":";AAEA,0BAAe;IAAC,MAAO;IAAc,QAAS;IAAgB,MAAO;IAAc,iBAAkB;IAAyB,kBAAmB;IAA0B,QAAS;IAAgB,cAAe;IAAsB,YAAa;IAAoB,gBAAiB;IAAwB,YAAa;AAAmB"}

package/dist/components/ui/typewriter_module.css

@@ -0,0 +1,102 @@
+.root-gVk1Hi {
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.inline-gwcxJt {
+  display: inline;
+}
+
+.word-fEJETe {
+  display: inline-block;
+}
+
+.hiddenCharacter-DNjKpm {
+  opacity: 0;
+  display: none;
+}
+
+.hiddenCharacter-DNjKpm, .visibleCharacter-Db7vgz {
+  color: var(--ac-foreground);
+}
+
+.cursor-GTR1E8, .smoothCursor-j2d_Qe {
+  border-radius: var(--ac-radius-xs);
+  background: #3b82f6;
+  width: 4px;
+  display: inline-block;
+}
+
+.cursor-GTR1E8 {
+  height: 1rem;
+}
+
+.smoothRoot-on7z_V {
+  gap: .25rem;
+  margin: 1.5rem 0;
+  display: flex;
+}
+
+.smoothViewport-L2k_XS {
+  padding-bottom: .5rem;
+  overflow: hidden;
+}
+
+.smoothText-Dgvfyn {
+  white-space: nowrap;
+  font-size: .75rem;
+  font-weight: 700;
+}
+
+.smoothCursor-j2d_Qe {
+  height: 1rem;
+  display: block;
+}
+
+@media (width >= 640px) {
+  .root-gVk1Hi {
+    font-size: 1.25rem;
+  }
+
+  .cursor-GTR1E8 {
+    height: 1.5rem;
+  }
+
+  .smoothText-Dgvfyn {
+    font-size: 1rem;
+  }
+
+  .smoothCursor-j2d_Qe {
+    height: 1.5rem;
+  }
+}
+
+@media (width >= 768px) {
+  .root-gVk1Hi {
+    font-size: 1.875rem;
+  }
+}
+
+@media (width >= 1024px) {
+  .root-gVk1Hi {
+    font-size: 3rem;
+  }
+
+  .cursor-GTR1E8 {
+    height: 2.5rem;
+  }
+}
+
+@media (width >= 1280px) {
+  .smoothText-Dgvfyn {
+    font-size: 3rem;
+  }
+
+  .smoothCursor-j2d_Qe {
+    height: 3rem;
+  }
+}
+
+
+/*# sourceMappingURL=typewriter_module.css.map */

package/dist/components/ui/typewriter_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/typewriter.module.css","webpack://./src/components/ui/typewriter.module.css"],"names":[],"mappings":"AADA;ECEE,kBAAkB;EAClB,eAAe;EACf,gBAAgB;AAClB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,qBAAqB;AACvB;;AAEA;EACE,UAAU;EACV,aAAa;AACf;;AAEA;EACE,2BAA2B;AAC7B;;AAEA;EACE,kCAAkC;EAClC,mBAAmB;EACnB,UAAU;EACV,qBAAqB;AACvB;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,WAAW;EACX,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,qBAAqB;EACrB,gBAAgB;AAClB;;AAEA;EACE,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,cAAc;AAChB;;AAEA;EACE;IACE,kBAAkB;EACpB;;EAEA;IACE,cAAc;EAChB;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,cAAc;EAChB;AACF;;AAEA;EACE;IACE,mBAAmB;EACrB;AACF;;AAEA;EACE;IACE,eAAe;EACjB;;EAEA;IACE,cAAc;EAChB;AACF;;AAEA;EACE;IACE,eAAe;EACjB;;EAEA;IACE,YAAY;EACd;AACF","sourcesContent":[".root{font-size:1rem;font-weight:700;text-align:center}.inline{display:inline}.word{display:inline-block}.hiddenCharacter{display:none;opacity:0}.hiddenCharacter,.visibleCharacter{color:var(--ac-foreground)}.cursor,.smoothCursor{background:#3b82f6;border-radius:var(--ac-radius-xs);display:inline-block;width:4px}.cursor{height:1rem}.smoothRoot{display:flex;gap:.25rem;margin:1.5rem 0}.smoothViewport{overflow:hidden;padding-bottom:.5rem}.smoothText{font-size:.75rem;font-weight:700;white-space:nowrap}.smoothCursor{display:block;height:1rem}@media (min-width:640px){.root{font-size:1.25rem}.cursor{height:1.5rem}.smoothText{font-size:1rem}.smoothCursor{height:1.5rem}}@media (min-width:768px){.root{font-size:1.875rem}}@media (min-width:1024px){.root{font-size:3rem}.cursor{height:2.5rem}}@media (min-width:1280px){.smoothText{font-size:3rem}.smoothCursor{height:3rem}}",".root {\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 700;\n}\n\n.inline {\n  display: inline;\n}\n\n.word {\n  display: inline-block;\n}\n\n.hiddenCharacter {\n  opacity: 0;\n  display: none;\n}\n\n.hiddenCharacter, .visibleCharacter {\n  color: var(--ac-foreground);\n}\n\n.cursor, .smoothCursor {\n  border-radius: var(--ac-radius-xs);\n  background: #3b82f6;\n  width: 4px;\n  display: inline-block;\n}\n\n.cursor {\n  height: 1rem;\n}\n\n.smoothRoot {\n  gap: .25rem;\n  margin: 1.5rem 0;\n  display: flex;\n}\n\n.smoothViewport {\n  padding-bottom: .5rem;\n  overflow: hidden;\n}\n\n.smoothText {\n  white-space: nowrap;\n  font-size: .75rem;\n  font-weight: 700;\n}\n\n.smoothCursor {\n  height: 1rem;\n  display: block;\n}\n\n@media (width >= 640px) {\n  .root {\n    font-size: 1.25rem;\n  }\n\n  .cursor {\n    height: 1.5rem;\n  }\n\n  .smoothText {\n    font-size: 1rem;\n  }\n\n  .smoothCursor {\n    height: 1.5rem;\n  }\n}\n\n@media (width >= 768px) {\n  .root {\n    font-size: 1.875rem;\n  }\n}\n\n@media (width >= 1024px) {\n  .root {\n    font-size: 3rem;\n  }\n\n  .cursor {\n    height: 2.5rem;\n  }\n}\n\n@media (width >= 1280px) {\n  .smoothText {\n    font-size: 3rem;\n  }\n\n  .smoothCursor {\n    height: 3rem;\n  }\n}\n"],"sourceRoot":""}

package/dist/components/ui/visually-hidden.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+/**
+ * Represents the configurable props for the {@link VisuallyHidden} component.
+ *
+ * @remarks
+ * Extends native `<span>` attributes so hidden assistive text can carry ARIA metadata,
+ * testing hooks, and composed class overrides while remaining available to screen readers.
+ */
+interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Content that is hidden visually but remains accessible to assistive technology.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Hides content visually while keeping it accessible to screen readers.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a `<span>` that uses the classic clipping technique to remove content from the
+ * visual flow without removing it from the accessibility tree. Use it to provide labels
+ * for icon-only controls, clarify status changes, or add extra context for assistive tech.
+ *
+ * @example
+ * ```tsx
+ * <button type="button">
+ *   <TrashIcon aria-hidden="true" />
+ *   <VisuallyHidden>Delete item</VisuallyHidden>
+ * </button>
+ * ```
+ *
+ * @see {@link https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements | W3C hiding elements guidance}
+ */
+declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLSpanElement>>;
+export { VisuallyHidden };
+export type { VisuallyHiddenProps };
+//# sourceMappingURL=visually-hidden.d.ts.map

package/dist/components/ui/visually-hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.d.ts","sourceRoot":"","sources":["../../../src/components/ui/visually-hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;GAMG;AACH,UAAU,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACzE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,cAAc,6FAMlB,CAAC;AAGH,OAAO,EAAC,cAAc,EAAC,CAAC;AACxB,YAAY,EAAC,mBAAmB,EAAC,CAAC"}

package/dist/components/ui/visually-hidden.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utilities.js";
+import visually_hidden_module from "./visually-hidden.module.js";
+const VisuallyHidden = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: cn(visually_hidden_module.visuallyHidden, className),
+        ...props
+    }));
+VisuallyHidden.displayName = "VisuallyHidden";
+export { VisuallyHidden };
+
+//# sourceMappingURL=visually-hidden.js.map

package/dist/components/ui/visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/visually-hidden.js","sources":["../../../src/components/ui/visually-hidden.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./visually-hidden.module.css\";\r\n\r\n/**\r\n * Represents the configurable props for the {@link VisuallyHidden} component.\r\n *\r\n * @remarks\r\n * Extends native `<span>` attributes so hidden assistive text can carry ARIA metadata,\r\n * testing hooks, and composed class overrides while remaining available to screen readers.\r\n */\r\ninterface VisuallyHiddenProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  /**\r\n   * Content that is hidden visually but remains accessible to assistive technology.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Hides content visually while keeping it accessible to screen readers.\r\n *\r\n * @remarks\r\n * **Rendering Context**: Server- and client-compatible presentational component.\r\n *\r\n * Renders a `<span>` that uses the classic clipping technique to remove content from the\r\n * visual flow without removing it from the accessibility tree. Use it to provide labels\r\n * for icon-only controls, clarify status changes, or add extra context for assistive tech.\r\n *\r\n * @example\r\n * ```tsx\r\n * <button type=\"button\">\r\n *   <TrashIcon aria-hidden=\"true\" />\r\n *   <VisuallyHidden>Delete item</VisuallyHidden>\r\n * </button>\r\n * ```\r\n *\r\n * @see {@link https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements | W3C hiding elements guidance}\r\n */\r\nconst VisuallyHidden = React.forwardRef<HTMLSpanElement, VisuallyHiddenProps>(({className, ...props}, ref) => (\r\n  <span\r\n    ref={ref}\r\n    className={cn(styles.visuallyHidden, className)}\r\n    {...props}\r\n  />\r\n));\r\nVisuallyHidden.displayName = \"VisuallyHidden\";\r\n\r\nexport {VisuallyHidden};\r\nexport type {VisuallyHiddenProps};\r\n"],"names":["VisuallyHidden","React","className","props","ref","cn","styles"],"mappings":";;;;AAuCA,MAAMA,iBAAiB,WAAHA,GAAGC,WAAuD,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAM,EAAEC,MAAAA,WAAAA,GACpG,IAAC;QACC,KAAKA;QACL,WAAWC,GAAGC,uBAAAA,cAAqB,EAAEJ;QACpC,GAAGC,KAAK;;AAGbH,eAAe,WAAW,GAAG"}

package/dist/components/ui/visually-hidden.module.js

@@ -0,0 +1,7 @@
+import "./visually-hidden_module.css";
+const visually_hidden_module = {
+    visuallyHidden: "visuallyHidden-FBbBqV"
+};
+export default visually_hidden_module;
+
+//# sourceMappingURL=visually-hidden.module.js.map

package/dist/components/ui/visually-hidden.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/visually-hidden.module.js","sources":["../../../src/components/ui/visually-hidden.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./visually-hidden_module.css\"\nexport default {\"visuallyHidden\":\"visuallyHidden-FBbBqV\"};"],"names":[],"mappings":";AAEA,+BAAe;IAAC,gBAAiB;AAAuB"}

package/dist/components/ui/visually-hidden_module.css

@@ -0,0 +1,14 @@
+.visuallyHidden-FBbBqV {
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+
+/*# sourceMappingURL=visually-hidden_module.css.map */

package/dist/components/ui/visually-hidden_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/visually-hidden.module.css","webpack://./src/components/ui/visually-hidden.module.css"],"names":[],"mappings":"AADA;ECEE,mBAAmB;EACnB,mBAAmB;EACnB,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,UAAU;EACV,kBAAkB;EAClB,gBAAgB;AAClB","sourcesContent":[".visuallyHidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}",".visuallyHidden {\n  clip: rect(0,0,0,0);\n  white-space: nowrap;\n  border: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n"],"sourceRoot":""}

package/dist/hooks/useAnnounce.js

@@ -0,0 +1,46 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+function useAnnounce() {
+    const politeRef = useRef(null);
+    const assertiveRef = useRef(null);
+    useEffect(()=>{
+        const createRegion = (politeness)=>{
+            const element = document.createElement("div");
+            element.setAttribute("role", "status");
+            element.setAttribute("aria-live", politeness);
+            element.setAttribute("aria-atomic", "true");
+            Object.assign(element.style, {
+                position: "absolute",
+                width: "1px",
+                height: "1px",
+                padding: "0",
+                margin: "-1px",
+                overflow: "hidden",
+                clip: "rect(0,0,0,0)",
+                whiteSpace: "nowrap",
+                border: "0"
+            });
+            document.body.append(element);
+            return element;
+        };
+        politeRef.current = createRegion("polite");
+        assertiveRef.current = createRegion("assertive");
+        return ()=>{
+            politeRef.current?.remove();
+            assertiveRef.current?.remove();
+            politeRef.current = null;
+            assertiveRef.current = null;
+        };
+    }, []);
+    return useCallback((message, politeness = "polite")=>{
+        const region = "assertive" === politeness ? assertiveRef.current : politeRef.current;
+        if (!region) return;
+        region.textContent = "";
+        requestAnimationFrame(()=>{
+            region.textContent = message;
+        });
+    }, []);
+}
+export { useAnnounce };
+
+//# sourceMappingURL=useAnnounce.js.map

package/dist/hooks/useAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useAnnounce.js","sources":["../../src/hooks/useAnnounce.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\ntype Politeness = \"polite\" | \"assertive\";\r\n\r\n/**\r\n * Creates off-screen ARIA live regions and returns an announcement function for screen readers.\r\n *\r\n * @returns A callback that announces a message using the requested politeness level.\r\n *\r\n * @example\r\n * ```tsx\r\n * const announce = useAnnounce();\r\n *\r\n * announce(\"Item deleted successfully\");\r\n * announce(\"Error: invalid input\", \"assertive\");\r\n * ```\r\n */\r\nexport function useAnnounce(): (message: string, politeness?: Politeness) => void {\r\n  const politeRef = React.useRef<HTMLDivElement | null>(null);\r\n  const assertiveRef = React.useRef<HTMLDivElement | null>(null);\r\n\r\n  React.useEffect(() => {\r\n    const createRegion = (politeness: Politeness): HTMLDivElement => {\r\n      const element = document.createElement(\"div\");\r\n\r\n      element.setAttribute(\"role\", \"status\");\r\n      element.setAttribute(\"aria-live\", politeness);\r\n      element.setAttribute(\"aria-atomic\", \"true\");\r\n\r\n      Object.assign(element.style, {\r\n        position: \"absolute\",\r\n        width: \"1px\",\r\n        height: \"1px\",\r\n        padding: \"0\",\r\n        margin: \"-1px\",\r\n        overflow: \"hidden\",\r\n        clip: \"rect(0,0,0,0)\",\r\n        whiteSpace: \"nowrap\",\r\n        border: \"0\",\r\n      });\r\n\r\n      document.body.append(element);\r\n\r\n      return element;\r\n    };\r\n\r\n    politeRef.current = createRegion(\"polite\");\r\n    assertiveRef.current = createRegion(\"assertive\");\r\n\r\n    return () => {\r\n      politeRef.current?.remove();\r\n      assertiveRef.current?.remove();\r\n      politeRef.current = null;\r\n      assertiveRef.current = null;\r\n    };\r\n  }, []);\r\n\r\n  return React.useCallback((message: string, politeness: Politeness = \"polite\") => {\r\n    const region = politeness === \"assertive\" ? assertiveRef.current : politeRef.current;\r\n\r\n    if (!region) {\r\n      return;\r\n    }\r\n\r\n    region.textContent = \"\";\r\n\r\n    requestAnimationFrame(() => {\r\n      region.textContent = message;\r\n    });\r\n  }, []);\r\n}\r\n"],"names":["useAnnounce","politeRef","React","assertiveRef","createRegion","politeness","element","document","Object","message","region","requestAnimationFrame"],"mappings":";;AAmBO,SAASA;IACd,MAAMC,YAAYC,OAAoC;IACtD,MAAMC,eAAeD,OAAoC;IAEzDA,UAAgB;QACd,MAAME,eAAe,CAACC;YACpB,MAAMC,UAAUC,SAAS,aAAa,CAAC;YAEvCD,QAAQ,YAAY,CAAC,QAAQ;YAC7BA,QAAQ,YAAY,CAAC,aAAaD;YAClCC,QAAQ,YAAY,CAAC,eAAe;YAEpCE,OAAO,MAAM,CAACF,QAAQ,KAAK,EAAE;gBAC3B,UAAU;gBACV,OAAO;gBACP,QAAQ;gBACR,SAAS;gBACT,QAAQ;gBACR,UAAU;gBACV,MAAM;gBACN,YAAY;gBACZ,QAAQ;YACV;YAEAC,SAAS,IAAI,CAAC,MAAM,CAACD;YAErB,OAAOA;QACT;QAEAL,UAAU,OAAO,GAAGG,aAAa;QACjCD,aAAa,OAAO,GAAGC,aAAa;QAEpC,OAAO;YACLH,UAAU,OAAO,EAAE;YACnBE,aAAa,OAAO,EAAE;YACtBF,UAAU,OAAO,GAAG;YACpBE,aAAa,OAAO,GAAG;QACzB;IACF,GAAG,EAAE;IAEL,OAAOD,YAAkB,CAACO,SAAiBJ,aAAyB,QAAQ;QAC1E,MAAMK,SAASL,AAAe,gBAAfA,aAA6BF,aAAa,OAAO,GAAGF,UAAU,OAAO;QAEpF,IAAI,CAACS,QACH;QAGFA,OAAO,WAAW,GAAG;QAErBC,sBAAsB;YACpBD,OAAO,WAAW,GAAGD;QACvB;IACF,GAAG,EAAE;AACP"}

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,17 @@
+declare const BREAKPOINTS: readonly [readonly ["2xl", "(min-width: 1536px)"], readonly ["xl", "(min-width: 1280px)"], readonly ["lg", "(min-width: 1024px)"], readonly ["md", "(min-width: 768px)"], readonly ["sm", "(min-width: 640px)"]];
+type Breakpoint = (typeof BREAKPOINTS)[number][0];
+/**
+ * Returns the name of the current CSS breakpoint based on viewport width.
+ * Evaluates breakpoints from largest to smallest and returns the first match.
+ *
+ * @returns The active breakpoint name: `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"2xl"`.
+ *   Returns `"sm"` when no breakpoint matches (viewport narrower than 640px).
+ *
+ * @example
+ * ```tsx
+ * const bp = useBreakpoint(); // "lg" on a 1200px viewport
+ * ```
+ */
+export declare function useBreakpoint(): Breakpoint;
+export type { Breakpoint };
+//# sourceMappingURL=useBreakpoint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,kNAMP,CAAC;AAEX,KAAK,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAElD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAY1C;AAED,YAAY,EAAC,UAAU,EAAC,CAAC"}