bynana-ui 1.1.0 → 1.4.0

package/dist/terminal/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function n(...e){return twMerge(clsx(e))}function k({children:e,className:r,title:a="Terminal"}){return jsxs("div",{className:n("relative w-full max-w-2xl mx-auto bg-zinc-100 dark:bg-black rounded-lg overflow-hidden shadow-2xl","border border-zinc-300 dark:border-gray-800",r),children:[jsxs("div",{className:"flex items-center justify-between px-4 py-3 bg-zinc-200 dark:bg-gray-800 border-b border-zinc-300 dark:border-gray-700",children:[jsxs("div",{className:"flex items-center space-x-2",children:[jsx("div",{className:"w-3 h-3 bg-red-500 rounded-full"}),jsx("div",{className:"w-3 h-3 bg-yellow-500 rounded-full"}),jsx("div",{className:"w-3 h-3 bg-green-500 rounded-full"})]}),jsx("div",{className:"text-zinc-600 dark:text-gray-400 text-sm font-mono",children:a}),jsx("div",{className:"w-16"})]}),jsx("div",{className:"p-4 font-mono text-sm leading-relaxed space-y-2 min-h-[300px] bg-zinc-100 dark:bg-black text-zinc-900 dark:text-white",children:e})]})}function z({children:e,className:r,delay:a=0,speed:i=50}){let[l,o]=useState(""),[u,f]=useState(false);return useEffect(()=>{let v=setTimeout(()=>{let c=0,m=setInterval(()=>{c<=e.length?(o(e.slice(0,c)),c++):(f(true),clearInterval(m));},i);return ()=>clearInterval(m)},a);return ()=>clearTimeout(v)},[e,a,i]),jsxs("div",{className:n("flex items-center",r),children:[jsx("span",{children:l}),!u&&jsx("span",{className:"ml-1 animate-pulse bg-white w-2 h-4 inline-block"})]})}function A({children:e,className:r,delay:a=0}){let[i,l]=useState(false);return useEffect(()=>{let o=setTimeout(()=>{l(true);},a);return ()=>clearTimeout(o)},[a]),jsx("div",{className:n("transition-all duration-500 transform",i?"opacity-100 translate-y-0":"opacity-0 translate-y-2",r),children:e})}export{A as AnimatedSpan,k as Terminal,z as TypingAnimation};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/terminal/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/terminal/index.tsx"],"names":["cn","inputs","twMerge","clsx","Terminal","children","className","title","jsxs","jsx","TypingAnimation","delay","speed","displayedText","setDisplayedText","useState","isComplete","setIsComplete","useEffect","timer","currentIndex","interval","AnimatedSpan","isVisible","setIsVisible"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TerminalProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  title?: string;\r\n}\r\n\r\ninterface TypingAnimationProps {\r\n  children: string;\r\n  className?: string;\r\n  delay?: number;\r\n  speed?: number;\r\n}\r\n\r\ninterface AnimatedSpanProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  delay?: number;\r\n}\r\n\r\nexport function Terminal({ children, className, title = \"Terminal\" }: TerminalProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative w-full max-w-2xl mx-auto bg-zinc-100 dark:bg-black rounded-lg overflow-hidden shadow-2xl\",\r\n        \"border border-zinc-300 dark:border-gray-800\",\r\n        className\r\n      )}\r\n    >\r\n      <div className=\"flex items-center justify-between px-4 py-3 bg-zinc-200 dark:bg-gray-800 border-b border-zinc-300 dark:border-gray-700\">\r\n        <div className=\"flex items-center space-x-2\">\r\n          <div className=\"w-3 h-3 bg-red-500 rounded-full\"></div>\r\n          <div className=\"w-3 h-3 bg-yellow-500 rounded-full\"></div>\r\n          <div className=\"w-3 h-3 bg-green-500 rounded-full\"></div>\r\n        </div>\r\n        <div className=\"text-zinc-600 dark:text-gray-400 text-sm font-mono\">{title}</div>\r\n        <div className=\"w-16\"></div>\r\n      </div>\r\n\r\n      <div className=\"p-4 font-mono text-sm leading-relaxed space-y-2 min-h-[300px] bg-zinc-100 dark:bg-black text-zinc-900 dark:text-white\">\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function TypingAnimation({ children, className, delay = 0, speed = 50 }: TypingAnimationProps) {\r\n  const [displayedText, setDisplayedText] = useState(\"\");\r\n  const [isComplete, setIsComplete] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const timer = setTimeout(() => {\r\n      let currentIndex = 0;\r\n      const interval = setInterval(() => {\r\n        if (currentIndex <= children.length) {\r\n          setDisplayedText(children.slice(0, currentIndex));\r\n          currentIndex++;\r\n        } else {\r\n          setIsComplete(true);\r\n          clearInterval(interval);\r\n        }\r\n      }, speed);\r\n\r\n      return () => clearInterval(interval);\r\n    }, delay);\r\n\r\n    return () => clearTimeout(timer);\r\n  }, [children, delay, speed]);\r\n\r\n  return (\r\n    <div className={cn(\"flex items-center\", className)}>\r\n      <span>{displayedText}</span>\r\n      {!isComplete && <span className=\"ml-1 animate-pulse bg-white w-2 h-4 inline-block\"></span>}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function AnimatedSpan({ children, className, delay = 0 }: AnimatedSpanProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const timer = setTimeout(() => {\r\n      setIsVisible(true);\r\n    }, delay);\r\n\r\n    return () => clearTimeout(timer);\r\n  }, [delay]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"transition-all duration-500 transform\",\r\n        isVisible ? \"opacity-100 translate-y-0\" : \"opacity-0 translate-y-2\",\r\n        className\r\n      )}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/dist/textarea/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function n(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var o=react.forwardRef(({className:e,label:a,error:t,...i},l)=>jsxRuntime.jsxs("div",{className:"w-full",children:[a&&jsxRuntime.jsx("label",{className:"block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1",children:a}),jsxRuntime.jsx("textarea",{ref:l,className:n("w-full px-4 py-2 rounded-lg min-h-[100px] resize-y","bg-white dark:bg-zinc-900","border border-zinc-300 dark:border-zinc-700","text-zinc-900 dark:text-zinc-100","placeholder:text-zinc-400 dark:placeholder:text-zinc-500","focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent","transition-all duration-200",t&&"border-red-500 focus:ring-red-500",e),...i}),t&&jsxRuntime.jsx("p",{className:"mt-1 text-sm text-red-500",children:t})]}));o.displayName="Textarea";var z=o;exports.Textarea=o;exports.default=z;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/textarea/index.tsx"],"names":["cn","inputs","twMerge","clsx","Textarea","forwardRef","className","label","error","props","ref","jsxs","jsx","textarea_default"],"mappings":"sMAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,IAAMG,CAAAA,CAAWC,iBACtB,CAAC,CAAE,UAAAC,CAAAA,CAAW,KAAA,CAAAC,EAAO,KAAA,CAAAC,CAAAA,CAAO,GAAGC,CAAM,CAAA,CAAGC,IAEpCC,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,QAAA,CACZ,UAAAJ,CAAAA,EACCK,cAAAA,CAAC,SAAM,SAAA,CAAU,iEAAA,CACd,SAAAL,CAAAA,CACH,CAAA,CAEFK,eAAC,UAAA,CAAA,CACC,GAAA,CAAKF,EACL,SAAA,CAAWV,CAAAA,CACT,qDACA,2BAAA,CACA,6CAAA,CACA,mCACA,0DAAA,CACA,8EAAA,CACA,8BACAQ,CAAAA,EAAS,mCAAA,CACTF,CACF,CAAA,CACC,GAAGG,EACN,CAAA,CACCD,CAAAA,EAASI,eAAC,GAAA,CAAA,CAAE,SAAA,CAAU,4BAA6B,QAAA,CAAAJ,CAAAA,CAAM,GAC5D,CAGN,EAEAJ,EAAS,WAAA,CAAc,UAAA,KAEhBS,CAAAA,CAAQT","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\r\n  label?: string;\r\n  error?: string;\r\n}\r\n\r\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n  ({ className, label, error, ...props }, ref) => {\r\n    return (\r\n      <div className=\"w-full\">\r\n        {label && (\r\n          <label className=\"block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1\">\r\n            {label}\r\n          </label>\r\n        )}\r\n        <textarea\r\n          ref={ref}\r\n          className={cn(\r\n            \"w-full px-4 py-2 rounded-lg min-h-[100px] resize-y\",\r\n            \"bg-white dark:bg-zinc-900\",\r\n            \"border border-zinc-300 dark:border-zinc-700\",\r\n            \"text-zinc-900 dark:text-zinc-100\",\r\n            \"placeholder:text-zinc-400 dark:placeholder:text-zinc-500\",\r\n            \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\",\r\n            \"transition-all duration-200\",\r\n            error && \"border-red-500 focus:ring-red-500\",\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n        {error && <p className=\"mt-1 text-sm text-red-500\">{error}</p>}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nTextarea.displayName = \"Textarea\";\r\n\r\nexport default Textarea;\r\n"]}

package/dist/textarea/index.mjs

@@ -0,0 +1,2 @@
+import {forwardRef}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function n(...e){return twMerge(clsx(e))}var o=forwardRef(({className:e,label:a,error:t,...i},l)=>jsxs("div",{className:"w-full",children:[a&&jsx("label",{className:"block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1",children:a}),jsx("textarea",{ref:l,className:n("w-full px-4 py-2 rounded-lg min-h-[100px] resize-y","bg-white dark:bg-zinc-900","border border-zinc-300 dark:border-zinc-700","text-zinc-900 dark:text-zinc-100","placeholder:text-zinc-400 dark:placeholder:text-zinc-500","focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent","transition-all duration-200",t&&"border-red-500 focus:ring-red-500",e),...i}),t&&jsx("p",{className:"mt-1 text-sm text-red-500",children:t})]}));o.displayName="Textarea";var z=o;export{o as Textarea,z as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/textarea/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/textarea/index.tsx"],"names":["cn","inputs","twMerge","clsx","Textarea","forwardRef","className","label","error","props","ref","jsxs","jsx","textarea_default"],"mappings":"qIAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,IAAMG,CAAAA,CAAWC,WACtB,CAAC,CAAE,UAAAC,CAAAA,CAAW,KAAA,CAAAC,EAAO,KAAA,CAAAC,CAAAA,CAAO,GAAGC,CAAM,CAAA,CAAGC,IAEpCC,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,QAAA,CACZ,UAAAJ,CAAAA,EACCK,GAAAA,CAAC,SAAM,SAAA,CAAU,iEAAA,CACd,SAAAL,CAAAA,CACH,CAAA,CAEFK,IAAC,UAAA,CAAA,CACC,GAAA,CAAKF,EACL,SAAA,CAAWV,CAAAA,CACT,qDACA,2BAAA,CACA,6CAAA,CACA,mCACA,0DAAA,CACA,8EAAA,CACA,8BACAQ,CAAAA,EAAS,mCAAA,CACTF,CACF,CAAA,CACC,GAAGG,EACN,CAAA,CACCD,CAAAA,EAASI,IAAC,GAAA,CAAA,CAAE,SAAA,CAAU,4BAA6B,QAAA,CAAAJ,CAAAA,CAAM,GAC5D,CAGN,EAEAJ,EAAS,WAAA,CAAc,UAAA,KAEhBS,CAAAA,CAAQT","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\r\n  label?: string;\r\n  error?: string;\r\n}\r\n\r\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\r\n  ({ className, label, error, ...props }, ref) => {\r\n    return (\r\n      <div className=\"w-full\">\r\n        {label && (\r\n          <label className=\"block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1\">\r\n            {label}\r\n          </label>\r\n        )}\r\n        <textarea\r\n          ref={ref}\r\n          className={cn(\r\n            \"w-full px-4 py-2 rounded-lg min-h-[100px] resize-y\",\r\n            \"bg-white dark:bg-zinc-900\",\r\n            \"border border-zinc-300 dark:border-zinc-700\",\r\n            \"text-zinc-900 dark:text-zinc-100\",\r\n            \"placeholder:text-zinc-400 dark:placeholder:text-zinc-500\",\r\n            \"focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\",\r\n            \"transition-all duration-200\",\r\n            error && \"border-red-500 focus:ring-red-500\",\r\n            className\r\n          )}\r\n          {...props}\r\n        />\r\n        {error && <p className=\"mt-1 text-sm text-red-500\">{error}</p>}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nTextarea.displayName = \"Textarea\";\r\n\r\nexport default Textarea;\r\n"]}

package/dist/tilted-card/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function y(...r){return tailwindMerge.twMerge(clsx.clsx(r))}var m={damping:30,stiffness:100,mass:2};function G({imageSrc:r,altText:C="Tilted card image",captionText:g="",containerHeight:N="300px",containerWidth:T="100%",imageHeight:h="300px",imageWidth:v="300px",scaleOnHover:Y=1.1,rotateAmplitude:b=14,showMobileWarning:P=false,showTooltip:E=true,overlayContent:w=null,displayOverlayContent:L=false,className:R}){let a=react.useRef(null),x=framerMotion.useMotionValue(0),S=framerMotion.useMotionValue(0),l=framerMotion.useSpring(framerMotion.useMotionValue(0),m),c=framerMotion.useSpring(framerMotion.useMotionValue(0),m),u=framerMotion.useSpring(1,m),d=framerMotion.useSpring(0),p=framerMotion.useSpring(0,{stiffness:350,damping:30,mass:1}),[X,H]=react.useState(0);function O(s){if(!a.current)return;let e=a.current.getBoundingClientRect(),j=s.clientX-e.left-e.width/2,f=s.clientY-e.top-e.height/2,B=f/(e.height/2)*-b,W=j/(e.width/2)*b;l.set(B),c.set(W),x.set(s.clientX-e.left),S.set(s.clientY-e.top);let z=f-X;p.set(-z*.6),H(f);}function V(){u.set(Y),d.set(1);}function k(){d.set(0),u.set(1),l.set(0),c.set(0),p.set(0);}return jsxRuntime.jsxs("figure",{ref:a,className:y("relative flex items-center justify-center [perspective:800px]",R),style:{height:N,width:T},onMouseMove:O,onMouseEnter:V,onMouseLeave:k,children:[P&&jsxRuntime.jsx("div",{className:"absolute top-2 left-2 text-xs text-muted-foreground md:hidden",children:"Best viewed on desktop"}),jsxRuntime.jsxs(framerMotion.motion.div,{className:"relative [transform-style:preserve-3d]",style:{width:v,height:h,rotateX:l,rotateY:c,scale:u},children:[jsxRuntime.jsx(framerMotion.motion.img,{src:r,alt:C,className:"absolute inset-0 w-full h-full object-cover rounded-lg",style:{width:v,height:h}}),L&&w&&jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg",children:w})]}),E&&g&&jsxRuntime.jsx(framerMotion.motion.figcaption,{className:"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap",style:{x,y:S,opacity:d,rotate:p},children:g})]})}var te=G;exports.TiltedCard=G;exports.default=te;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tilted-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tilted-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","springValues","TiltedCard","imageSrc","altText","captionText","containerHeight","containerWidth","imageHeight","imageWidth","scaleOnHover","rotateAmplitude","showMobileWarning","showTooltip","overlayContent","displayOverlayContent","className","ref","useRef","useMotionValue","y","rotateX","useSpring","rotateY","scale","opacity","rotateFigcaption","lastY","setLastY","useState","handleMouse","e","rect","offsetX","offsetY","rotationX","rotationY","velocityY","handleMouseEnter","handleMouseLeave","jsxs","jsx","motion","tilted_card_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,sBAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCkBA,IAAMG,EAA8B,CAClC,OAAA,CAAS,GACT,SAAA,CAAW,GAAA,CACX,IAAA,CAAM,CACR,EAEO,SAASC,CAAAA,CAAW,CACzB,QAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CAAU,mBAAA,CACV,YAAAC,CAAAA,CAAc,EAAA,CACd,gBAAAC,CAAAA,CAAkB,OAAA,CAClB,eAAAC,CAAAA,CAAiB,MAAA,CACjB,YAAAC,CAAAA,CAAc,OAAA,CACd,WAAAC,CAAAA,CAAa,OAAA,CACb,aAAAC,CAAAA,CAAe,GAAA,CACf,gBAAAC,CAAAA,CAAkB,EAAA,CAClB,kBAAAC,CAAAA,CAAoB,KAAA,CACpB,YAAAC,CAAAA,CAAc,IAAA,CACd,eAAAC,CAAAA,CAAiB,IAAA,CACjB,sBAAAC,CAAAA,CAAwB,KAAA,CACxB,UAAAC,CACF,CAAA,CAAoB,CAClB,IAAMC,EAAMC,YAAAA,CAAoB,IAAI,EAE9B,CAAA,CAAIC,2BAAAA,CAAe,CAAC,CAAA,CACpBC,CAAAA,CAAID,4BAAe,CAAC,CAAA,CACpBE,EAAUC,sBAAAA,CAAUH,2BAAAA,CAAe,CAAC,CAAA,CAAGlB,CAAY,EACnDsB,CAAAA,CAAUD,sBAAAA,CAAUH,2BAAAA,CAAe,CAAC,EAAGlB,CAAY,CAAA,CACnDuB,EAAQF,sBAAAA,CAAU,CAAA,CAAGrB,CAAY,CAAA,CACjCwB,CAAAA,CAAUH,uBAAU,CAAC,CAAA,CACrBI,EAAmBJ,sBAAAA,CAAU,CAAA,CAAG,CACpC,SAAA,CAAW,GAAA,CACX,QAAS,EAAA,CACT,IAAA,CAAM,CACR,CAAC,EAEK,CAACK,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,cAAAA,CAAiB,CAAC,CAAA,CAE5C,SAASC,EAAYC,CAAAA,CAAkC,CACrD,GAAI,CAACd,CAAAA,CAAI,QAAS,OAElB,IAAMe,EAAOf,CAAAA,CAAI,OAAA,CAAQ,uBAAsB,CACzCgB,CAAAA,CAAUF,EAAE,OAAA,CAAUC,CAAAA,CAAK,KAAOA,CAAAA,CAAK,KAAA,CAAQ,EAC/CE,CAAAA,CAAUH,CAAAA,CAAE,QAAUC,CAAAA,CAAK,GAAA,CAAMA,EAAK,MAAA,CAAS,CAAA,CAE/CG,EAAaD,CAAAA,EAAWF,CAAAA,CAAK,OAAS,CAAA,CAAA,CAAM,CAACrB,CAAAA,CAC7CyB,CAAAA,CAAaH,GAAWD,CAAAA,CAAK,KAAA,CAAQ,GAAMrB,CAAAA,CAEjDU,CAAAA,CAAQ,IAAIc,CAAS,CAAA,CACrBZ,EAAQ,GAAA,CAAIa,CAAS,EAErB,CAAA,CAAE,GAAA,CAAIL,EAAE,OAAA,CAAUC,CAAAA,CAAK,IAAI,CAAA,CAC3BZ,CAAAA,CAAE,GAAA,CAAIW,CAAAA,CAAE,QAAUC,CAAAA,CAAK,GAAG,EAE1B,IAAMK,CAAAA,CAAYH,EAAUP,CAAAA,CAC5BD,CAAAA,CAAiB,IAAI,CAACW,CAAAA,CAAY,EAAG,CAAA,CACrCT,CAAAA,CAASM,CAAO,EAClB,CAEA,SAASI,CAAAA,EAAmB,CAC1Bd,CAAAA,CAAM,GAAA,CAAId,CAAY,CAAA,CACtBe,CAAAA,CAAQ,IAAI,CAAC,EACf,CAEA,SAASc,CAAAA,EAAmB,CAC1Bd,CAAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,CACbD,CAAAA,CAAM,IAAI,CAAC,CAAA,CACXH,EAAQ,GAAA,CAAI,CAAC,EACbE,CAAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,CACbG,CAAAA,CAAiB,IAAI,CAAC,EACxB,CAEA,OACEc,eAAAA,CAAC,UACC,GAAA,CAAKvB,CAAAA,CACL,UAAWpB,CAAAA,CACT,+DAAA,CACAmB,CACF,CAAA,CACA,KAAA,CAAO,CACL,MAAA,CAAQV,CAAAA,CACR,KAAA,CAAOC,CACT,EACA,WAAA,CAAauB,CAAAA,CACb,aAAcQ,CAAAA,CACd,YAAA,CAAcC,EAEb,QAAA,CAAA,CAAA3B,CAAAA,EACC6B,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,gEAAgE,QAAA,CAAA,wBAAA,CAE/E,CAAA,CAGFD,gBAACE,mBAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAU,wCAAA,CACV,KAAA,CAAO,CACL,MAAOjC,CAAAA,CACP,MAAA,CAAQD,EACR,OAAA,CAAAa,CAAAA,CACA,QAAAE,CAAAA,CACA,KAAA,CAAAC,CACF,CAAA,CAEA,QAAA,CAAA,CAAAiB,eAACC,mBAAAA,CAAO,GAAA,CAAP,CACC,GAAA,CAAKvC,CAAAA,CACL,IAAKC,CAAAA,CACL,SAAA,CAAU,wDAAA,CACV,KAAA,CAAO,CACL,KAAA,CAAOK,CAAAA,CACP,OAAQD,CACV,CAAA,CACF,EAECO,CAAAA,EAAyBD,CAAAA,EACxB2B,eAACC,mBAAAA,CAAO,GAAA,CAAP,CAAW,SAAA,CAAU,0EAAA,CACnB,SAAA5B,CAAAA,CACH,CAAA,CAAA,CAEJ,EAECD,CAAAA,EAAeR,CAAAA,EACdoC,eAACC,mBAAAA,CAAO,UAAA,CAAP,CACC,SAAA,CAAU,qHAAA,CACV,MAAO,CACL,CAAA,CACA,EAAAtB,CAAAA,CACA,OAAA,CAAAK,EACA,MAAA,CAAQC,CACV,EAEC,QAAA,CAAArB,CAAAA,CACH,GAEJ,CAEJ,KAEOsC,EAAAA,CAAQzC","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useRef, useState, ReactNode, CSSProperties } from \"react\";\r\nimport { motion, useMotionValue, useSpring, SpringOptions } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TiltedCardProps {\r\n  imageSrc: string;\r\n  altText?: string;\r\n  captionText?: string;\r\n  containerHeight?: CSSProperties[\"height\"];\r\n  containerWidth?: CSSProperties[\"width\"];\r\n  imageHeight?: CSSProperties[\"height\"];\r\n  imageWidth?: CSSProperties[\"width\"];\r\n  scaleOnHover?: number;\r\n  rotateAmplitude?: number;\r\n  showMobileWarning?: boolean;\r\n  showTooltip?: boolean;\r\n  overlayContent?: ReactNode;\r\n  displayOverlayContent?: boolean;\r\n  className?: string;\r\n}\r\n\r\nconst springValues: SpringOptions = {\r\n  damping: 30,\r\n  stiffness: 100,\r\n  mass: 2,\r\n};\r\n\r\nexport function TiltedCard({\r\n  imageSrc,\r\n  altText = \"Tilted card image\",\r\n  captionText = \"\",\r\n  containerHeight = \"300px\",\r\n  containerWidth = \"100%\",\r\n  imageHeight = \"300px\",\r\n  imageWidth = \"300px\",\r\n  scaleOnHover = 1.1,\r\n  rotateAmplitude = 14,\r\n  showMobileWarning = false,\r\n  showTooltip = true,\r\n  overlayContent = null,\r\n  displayOverlayContent = false,\r\n  className,\r\n}: TiltedCardProps) {\r\n  const ref = useRef<HTMLElement>(null);\r\n\r\n  const x = useMotionValue(0);\r\n  const y = useMotionValue(0);\r\n  const rotateX = useSpring(useMotionValue(0), springValues);\r\n  const rotateY = useSpring(useMotionValue(0), springValues);\r\n  const scale = useSpring(1, springValues);\r\n  const opacity = useSpring(0);\r\n  const rotateFigcaption = useSpring(0, {\r\n    stiffness: 350,\r\n    damping: 30,\r\n    mass: 1,\r\n  });\r\n\r\n  const [lastY, setLastY] = useState<number>(0);\r\n\r\n  function handleMouse(e: React.MouseEvent<HTMLElement>) {\r\n    if (!ref.current) return;\r\n\r\n    const rect = ref.current.getBoundingClientRect();\r\n    const offsetX = e.clientX - rect.left - rect.width / 2;\r\n    const offsetY = e.clientY - rect.top - rect.height / 2;\r\n\r\n    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\r\n    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\r\n\r\n    rotateX.set(rotationX);\r\n    rotateY.set(rotationY);\r\n\r\n    x.set(e.clientX - rect.left);\r\n    y.set(e.clientY - rect.top);\r\n\r\n    const velocityY = offsetY - lastY;\r\n    rotateFigcaption.set(-velocityY * 0.6);\r\n    setLastY(offsetY);\r\n  }\r\n\r\n  function handleMouseEnter() {\r\n    scale.set(scaleOnHover);\r\n    opacity.set(1);\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    opacity.set(0);\r\n    scale.set(1);\r\n    rotateX.set(0);\r\n    rotateY.set(0);\r\n    rotateFigcaption.set(0);\r\n  }\r\n\r\n  return (\r\n    <figure\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex items-center justify-center [perspective:800px]\",\r\n        className\r\n      )}\r\n      style={{\r\n        height: containerHeight,\r\n        width: containerWidth,\r\n      }}\r\n      onMouseMove={handleMouse}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {showMobileWarning && (\r\n        <div className=\"absolute top-2 left-2 text-xs text-muted-foreground md:hidden\">\r\n          Best viewed on desktop\r\n        </div>\r\n      )}\r\n\r\n      <motion.div\r\n        className=\"relative [transform-style:preserve-3d]\"\r\n        style={{\r\n          width: imageWidth,\r\n          height: imageHeight,\r\n          rotateX,\r\n          rotateY,\r\n          scale,\r\n        }}\r\n      >\r\n        <motion.img\r\n          src={imageSrc}\r\n          alt={altText}\r\n          className=\"absolute inset-0 w-full h-full object-cover rounded-lg\"\r\n          style={{\r\n            width: imageWidth,\r\n            height: imageHeight,\r\n          }}\r\n        />\r\n\r\n        {displayOverlayContent && overlayContent && (\r\n          <motion.div className=\"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg\">\r\n            {overlayContent}\r\n          </motion.div>\r\n        )}\r\n      </motion.div>\r\n\r\n      {showTooltip && captionText && (\r\n        <motion.figcaption\r\n          className=\"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap\"\r\n          style={{\r\n            x,\r\n            y,\r\n            opacity,\r\n            rotate: rotateFigcaption,\r\n          }}\r\n        >\r\n          {captionText}\r\n        </motion.figcaption>\r\n      )}\r\n    </figure>\r\n  );\r\n}\r\n\r\nexport default TiltedCard;\r\n"]}

package/dist/tilted-card/index.mjs

@@ -0,0 +1,2 @@
+import {useRef,useState}from'react';import {useMotionValue,useSpring,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function y(...r){return twMerge(clsx(r))}var m={damping:30,stiffness:100,mass:2};function G({imageSrc:r,altText:C="Tilted card image",captionText:g="",containerHeight:N="300px",containerWidth:T="100%",imageHeight:h="300px",imageWidth:v="300px",scaleOnHover:Y=1.1,rotateAmplitude:b=14,showMobileWarning:P=false,showTooltip:E=true,overlayContent:w=null,displayOverlayContent:L=false,className:R}){let a=useRef(null),x=useMotionValue(0),S=useMotionValue(0),l=useSpring(useMotionValue(0),m),c=useSpring(useMotionValue(0),m),u=useSpring(1,m),d=useSpring(0),p=useSpring(0,{stiffness:350,damping:30,mass:1}),[X,H]=useState(0);function O(s){if(!a.current)return;let e=a.current.getBoundingClientRect(),j=s.clientX-e.left-e.width/2,f=s.clientY-e.top-e.height/2,B=f/(e.height/2)*-b,W=j/(e.width/2)*b;l.set(B),c.set(W),x.set(s.clientX-e.left),S.set(s.clientY-e.top);let z=f-X;p.set(-z*.6),H(f);}function V(){u.set(Y),d.set(1);}function k(){d.set(0),u.set(1),l.set(0),c.set(0),p.set(0);}return jsxs("figure",{ref:a,className:y("relative flex items-center justify-center [perspective:800px]",R),style:{height:N,width:T},onMouseMove:O,onMouseEnter:V,onMouseLeave:k,children:[P&&jsx("div",{className:"absolute top-2 left-2 text-xs text-muted-foreground md:hidden",children:"Best viewed on desktop"}),jsxs(motion.div,{className:"relative [transform-style:preserve-3d]",style:{width:v,height:h,rotateX:l,rotateY:c,scale:u},children:[jsx(motion.img,{src:r,alt:C,className:"absolute inset-0 w-full h-full object-cover rounded-lg",style:{width:v,height:h}}),L&&w&&jsx(motion.div,{className:"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg",children:w})]}),E&&g&&jsx(motion.figcaption,{className:"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap",style:{x,y:S,opacity:d,rotate:p},children:g})]})}var te=G;export{G as TiltedCard,te as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/tilted-card/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tilted-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","springValues","TiltedCard","imageSrc","altText","captionText","containerHeight","containerWidth","imageHeight","imageWidth","scaleOnHover","rotateAmplitude","showMobileWarning","showTooltip","overlayContent","displayOverlayContent","className","ref","useRef","useMotionValue","y","rotateX","useSpring","rotateY","scale","opacity","rotateFigcaption","lastY","setLastY","useState","handleMouse","e","rect","offsetX","offsetY","rotationX","rotationY","velocityY","handleMouseEnter","handleMouseLeave","jsxs","jsx","motion","tilted_card_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useRef, useState, ReactNode, CSSProperties } from \"react\";\r\nimport { motion, useMotionValue, useSpring, SpringOptions } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TiltedCardProps {\r\n  imageSrc: string;\r\n  altText?: string;\r\n  captionText?: string;\r\n  containerHeight?: CSSProperties[\"height\"];\r\n  containerWidth?: CSSProperties[\"width\"];\r\n  imageHeight?: CSSProperties[\"height\"];\r\n  imageWidth?: CSSProperties[\"width\"];\r\n  scaleOnHover?: number;\r\n  rotateAmplitude?: number;\r\n  showMobileWarning?: boolean;\r\n  showTooltip?: boolean;\r\n  overlayContent?: ReactNode;\r\n  displayOverlayContent?: boolean;\r\n  className?: string;\r\n}\r\n\r\nconst springValues: SpringOptions = {\r\n  damping: 30,\r\n  stiffness: 100,\r\n  mass: 2,\r\n};\r\n\r\nexport function TiltedCard({\r\n  imageSrc,\r\n  altText = \"Tilted card image\",\r\n  captionText = \"\",\r\n  containerHeight = \"300px\",\r\n  containerWidth = \"100%\",\r\n  imageHeight = \"300px\",\r\n  imageWidth = \"300px\",\r\n  scaleOnHover = 1.1,\r\n  rotateAmplitude = 14,\r\n  showMobileWarning = false,\r\n  showTooltip = true,\r\n  overlayContent = null,\r\n  displayOverlayContent = false,\r\n  className,\r\n}: TiltedCardProps) {\r\n  const ref = useRef<HTMLElement>(null);\r\n\r\n  const x = useMotionValue(0);\r\n  const y = useMotionValue(0);\r\n  const rotateX = useSpring(useMotionValue(0), springValues);\r\n  const rotateY = useSpring(useMotionValue(0), springValues);\r\n  const scale = useSpring(1, springValues);\r\n  const opacity = useSpring(0);\r\n  const rotateFigcaption = useSpring(0, {\r\n    stiffness: 350,\r\n    damping: 30,\r\n    mass: 1,\r\n  });\r\n\r\n  const [lastY, setLastY] = useState<number>(0);\r\n\r\n  function handleMouse(e: React.MouseEvent<HTMLElement>) {\r\n    if (!ref.current) return;\r\n\r\n    const rect = ref.current.getBoundingClientRect();\r\n    const offsetX = e.clientX - rect.left - rect.width / 2;\r\n    const offsetY = e.clientY - rect.top - rect.height / 2;\r\n\r\n    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\r\n    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\r\n\r\n    rotateX.set(rotationX);\r\n    rotateY.set(rotationY);\r\n\r\n    x.set(e.clientX - rect.left);\r\n    y.set(e.clientY - rect.top);\r\n\r\n    const velocityY = offsetY - lastY;\r\n    rotateFigcaption.set(-velocityY * 0.6);\r\n    setLastY(offsetY);\r\n  }\r\n\r\n  function handleMouseEnter() {\r\n    scale.set(scaleOnHover);\r\n    opacity.set(1);\r\n  }\r\n\r\n  function handleMouseLeave() {\r\n    opacity.set(0);\r\n    scale.set(1);\r\n    rotateX.set(0);\r\n    rotateY.set(0);\r\n    rotateFigcaption.set(0);\r\n  }\r\n\r\n  return (\r\n    <figure\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex items-center justify-center [perspective:800px]\",\r\n        className\r\n      )}\r\n      style={{\r\n        height: containerHeight,\r\n        width: containerWidth,\r\n      }}\r\n      onMouseMove={handleMouse}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n    >\r\n      {showMobileWarning && (\r\n        <div className=\"absolute top-2 left-2 text-xs text-muted-foreground md:hidden\">\r\n          Best viewed on desktop\r\n        </div>\r\n      )}\r\n\r\n      <motion.div\r\n        className=\"relative [transform-style:preserve-3d]\"\r\n        style={{\r\n          width: imageWidth,\r\n          height: imageHeight,\r\n          rotateX,\r\n          rotateY,\r\n          scale,\r\n        }}\r\n      >\r\n        <motion.img\r\n          src={imageSrc}\r\n          alt={altText}\r\n          className=\"absolute inset-0 w-full h-full object-cover rounded-lg\"\r\n          style={{\r\n            width: imageWidth,\r\n            height: imageHeight,\r\n          }}\r\n        />\r\n\r\n        {displayOverlayContent && overlayContent && (\r\n          <motion.div className=\"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg\">\r\n            {overlayContent}\r\n          </motion.div>\r\n        )}\r\n      </motion.div>\r\n\r\n      {showTooltip && captionText && (\r\n        <motion.figcaption\r\n          className=\"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap\"\r\n          style={{\r\n            x,\r\n            y,\r\n            opacity,\r\n            rotate: rotateFigcaption,\r\n          }}\r\n        >\r\n          {captionText}\r\n        </motion.figcaption>\r\n      )}\r\n    </figure>\r\n  );\r\n}\r\n\r\nexport default TiltedCard;\r\n"]}

package/dist/toolbar/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var b={initial:{gap:0,paddingLeft:".5rem",paddingRight:".5rem"},animate:e=>({gap:e?".5rem":0,paddingLeft:e?"1rem":".5rem",paddingRight:e?"1rem":".5rem"})},x={initial:{width:0,opacity:0},animate:{width:"auto",opacity:1},exit:{width:0,opacity:0}},r={type:"spring",bounce:0,duration:.4};function v({className:e,items:s,defaultSelected:l,onItemClick:d}){let[i,m]=react.useState(l||null),c=t=>{m(i===t?null:t),d?.(t);};return jsxRuntime.jsx("div",{className:a("flex items-center gap-3 p-2 relative","bg-background border rounded-xl transition-all duration-200",e),children:jsxRuntime.jsx("div",{className:"flex items-center gap-2",children:s.map(t=>jsxRuntime.jsxs(framerMotion.motion.button,{variants:b,initial:false,animate:"animate",custom:i===t.id,onClick:()=>c(t.id),transition:r,className:a("relative flex items-center rounded-none px-3 py-2","text-sm font-medium transition-colors duration-300",i===t.id?"bg-[#1F9CFE] text-white rounded-lg":"text-muted-foreground hover:bg-muted hover:text-foreground"),children:[t.icon,jsxRuntime.jsx(framerMotion.AnimatePresence,{initial:false,children:i===t.id&&jsxRuntime.jsx(framerMotion.motion.span,{variants:x,initial:"initial",animate:"animate",exit:"exit",transition:r,className:"overflow-hidden",children:t.title})})]},t.id))})})}var V=v;exports.Toolbar=v;exports.default=V;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/toolbar/index.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","isSelected","spanVariants","transition","Toolbar","className","items","defaultSelected","onItemClick","selected","setSelected","useState","handleItemClick","itemId","jsx","item","jsxs","motion","AnimatePresence","toolbar_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcA,IAAMG,CAAAA,CAAiB,CACrB,OAAA,CAAS,CAAE,GAAA,CAAK,EAAG,WAAA,CAAa,OAAA,CAAS,YAAA,CAAc,OAAQ,CAAA,CAC/D,OAAA,CAAUC,IAAyB,CACjC,GAAA,CAAKA,CAAAA,CAAa,OAAA,CAAU,CAAA,CAC5B,WAAA,CAAaA,EAAa,MAAA,CAAS,OAAA,CACnC,YAAA,CAAcA,CAAAA,CAAa,MAAA,CAAS,OACtC,EACF,CAAA,CAEMC,CAAAA,CAAe,CACnB,OAAA,CAAS,CAAE,KAAA,CAAO,EAAG,OAAA,CAAS,CAAE,CAAA,CAChC,OAAA,CAAS,CAAE,KAAA,CAAO,OAAQ,OAAA,CAAS,CAAE,CAAA,CACrC,IAAA,CAAM,CAAE,KAAA,CAAO,EAAG,OAAA,CAAS,CAAE,CAC/B,CAAA,CAEMC,CAAAA,CAAa,CAAE,KAAM,QAAA,CAAU,MAAA,CAAQ,CAAA,CAAG,QAAA,CAAU,EAAI,CAAA,CAEvD,SAASC,CAAAA,CAAQ,CAAE,SAAA,CAAAC,CAAAA,CAAW,KAAA,CAAAC,CAAAA,CAAO,eAAA,CAAAC,CAAAA,CAAiB,WAAA,CAAAC,CAAY,CAAA,CAAiB,CACxF,GAAM,CAACC,EAAUC,CAAW,CAAA,CAAIC,cAAAA,CAAwBJ,CAAAA,EAAmB,IAAI,CAAA,CAEzEK,EAAmBC,CAAAA,EAAmB,CAC1CH,CAAAA,CAAYD,CAAAA,GAAaI,CAAAA,CAAS,IAAA,CAAOA,CAAM,CAAA,CAC/CL,CAAAA,GAAcK,CAAM,EACtB,CAAA,CAEA,OACEC,eAAC,KAAA,CAAA,CACC,SAAA,CAAWlB,CAAAA,CACT,sCAAA,CACA,6DAAA,CACAS,CACF,EAEA,QAAA,CAAAS,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,yBAAA,CACZ,QAAA,CAAAR,EAAM,GAAA,CAAKS,CAAAA,EACVC,eAAAA,CAACC,mBAAAA,CAAO,MAAA,CAAP,CAEC,SAAUjB,CAAAA,CACV,OAAA,CAAS,KAAA,CACT,OAAA,CAAQ,SAAA,CACR,MAAA,CAAQS,IAAaM,CAAAA,CAAK,EAAA,CAC1B,OAAA,CAAS,IAAMH,CAAAA,CAAgBG,CAAAA,CAAK,EAAE,CAAA,CACtC,UAAA,CAAYZ,CAAAA,CACZ,SAAA,CAAWP,CAAAA,CACT,mDAAA,CACA,qDACAa,CAAAA,GAAaM,CAAAA,CAAK,EAAA,CACd,oCAAA,CACA,4DACN,CAAA,CAEC,UAAAA,CAAAA,CAAK,IAAA,CACND,cAAAA,CAACI,4BAAAA,CAAA,CAAgB,OAAA,CAAS,MACvB,QAAA,CAAAT,CAAAA,GAAaM,CAAAA,CAAK,EAAA,EACjBD,cAAAA,CAACG,mBAAAA,CAAO,KAAP,CACC,QAAA,CAAUf,CAAAA,CACV,OAAA,CAAQ,SAAA,CACR,OAAA,CAAQ,UACR,IAAA,CAAK,MAAA,CACL,UAAA,CAAYC,CAAAA,CACZ,SAAA,CAAU,iBAAA,CAET,SAAAY,CAAAA,CAAK,KAAA,CACR,CAAA,CAEJ,CAAA,CAAA,CAAA,CA7BKA,CAAAA,CAAK,EA8BZ,CACD,CAAA,CACH,CAAA,CACF,CAEJ,CAEA,IAAOI,CAAAA,CAAQf","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport React, { useState, useRef } from \"react\";\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface ToolbarItem {\r\n  id: string;\r\n  title: string;\r\n  icon: React.ReactNode;\r\n}\r\n\r\ninterface ToolbarProps {\r\n  className?: string;\r\n  items: ToolbarItem[];\r\n  defaultSelected?: string;\r\n  onItemClick?: (itemId: string) => void;\r\n}\r\n\r\nconst buttonVariants = {\r\n  initial: { gap: 0, paddingLeft: \".5rem\", paddingRight: \".5rem\" },\r\n  animate: (isSelected: boolean) => ({\r\n    gap: isSelected ? \".5rem\" : 0,\r\n    paddingLeft: isSelected ? \"1rem\" : \".5rem\",\r\n    paddingRight: isSelected ? \"1rem\" : \".5rem\",\r\n  }),\r\n};\r\n\r\nconst spanVariants = {\r\n  initial: { width: 0, opacity: 0 },\r\n  animate: { width: \"auto\", opacity: 1 },\r\n  exit: { width: 0, opacity: 0 },\r\n};\r\n\r\nconst transition = { type: \"spring\", bounce: 0, duration: 0.4 };\r\n\r\nexport function Toolbar({ className, items, defaultSelected, onItemClick }: ToolbarProps) {\r\n  const [selected, setSelected] = useState<string | null>(defaultSelected || null);\r\n\r\n  const handleItemClick = (itemId: string) => {\r\n    setSelected(selected === itemId ? null : itemId);\r\n    onItemClick?.(itemId);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex items-center gap-3 p-2 relative\",\r\n        \"bg-background border rounded-xl transition-all duration-200\",\r\n        className\r\n      )}\r\n    >\r\n      <div className=\"flex items-center gap-2\">\r\n        {items.map((item) => (\r\n          <motion.button\r\n            key={item.id}\r\n            variants={buttonVariants}\r\n            initial={false}\r\n            animate=\"animate\"\r\n            custom={selected === item.id}\r\n            onClick={() => handleItemClick(item.id)}\r\n            transition={transition}\r\n            className={cn(\r\n              \"relative flex items-center rounded-none px-3 py-2\",\r\n              \"text-sm font-medium transition-colors duration-300\",\r\n              selected === item.id\r\n                ? \"bg-[#1F9CFE] text-white rounded-lg\"\r\n                : \"text-muted-foreground hover:bg-muted hover:text-foreground\"\r\n            )}\r\n          >\r\n            {item.icon}\r\n            <AnimatePresence initial={false}>\r\n              {selected === item.id && (\r\n                <motion.span\r\n                  variants={spanVariants}\r\n                  initial=\"initial\"\r\n                  animate=\"animate\"\r\n                  exit=\"exit\"\r\n                  transition={transition}\r\n                  className=\"overflow-hidden\"\r\n                >\r\n                  {item.title}\r\n                </motion.span>\r\n              )}\r\n            </AnimatePresence>\r\n          </motion.button>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Toolbar;\r\n"]}

package/dist/toolbar/index.mjs

@@ -0,0 +1,2 @@
+import {useState}from'react';import {motion,AnimatePresence}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function a(...e){return twMerge(clsx(e))}var b={initial:{gap:0,paddingLeft:".5rem",paddingRight:".5rem"},animate:e=>({gap:e?".5rem":0,paddingLeft:e?"1rem":".5rem",paddingRight:e?"1rem":".5rem"})},x={initial:{width:0,opacity:0},animate:{width:"auto",opacity:1},exit:{width:0,opacity:0}},r={type:"spring",bounce:0,duration:.4};function v({className:e,items:s,defaultSelected:l,onItemClick:d}){let[i,m]=useState(l||null),c=t=>{m(i===t?null:t),d?.(t);};return jsx("div",{className:a("flex items-center gap-3 p-2 relative","bg-background border rounded-xl transition-all duration-200",e),children:jsx("div",{className:"flex items-center gap-2",children:s.map(t=>jsxs(motion.button,{variants:b,initial:false,animate:"animate",custom:i===t.id,onClick:()=>c(t.id),transition:r,className:a("relative flex items-center rounded-none px-3 py-2","text-sm font-medium transition-colors duration-300",i===t.id?"bg-[#1F9CFE] text-white rounded-lg":"text-muted-foreground hover:bg-muted hover:text-foreground"),children:[t.icon,jsx(AnimatePresence,{initial:false,children:i===t.id&&jsx(motion.span,{variants:x,initial:"initial",animate:"animate",exit:"exit",transition:r,className:"overflow-hidden",children:t.title})})]},t.id))})})}var V=v;export{v as Toolbar,V as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/toolbar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/toolbar/index.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","isSelected","spanVariants","transition","Toolbar","className","items","defaultSelected","onItemClick","selected","setSelected","useState","handleItemClick","itemId","jsx","item","jsxs","motion","AnimatePresence","toolbar_default"],"mappings":"sLAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcA,IAAMG,CAAAA,CAAiB,CACrB,OAAA,CAAS,CAAE,GAAA,CAAK,EAAG,WAAA,CAAa,OAAA,CAAS,YAAA,CAAc,OAAQ,CAAA,CAC/D,OAAA,CAAUC,IAAyB,CACjC,GAAA,CAAKA,CAAAA,CAAa,OAAA,CAAU,CAAA,CAC5B,WAAA,CAAaA,EAAa,MAAA,CAAS,OAAA,CACnC,YAAA,CAAcA,CAAAA,CAAa,MAAA,CAAS,OACtC,EACF,CAAA,CAEMC,CAAAA,CAAe,CACnB,OAAA,CAAS,CAAE,KAAA,CAAO,EAAG,OAAA,CAAS,CAAE,CAAA,CAChC,OAAA,CAAS,CAAE,KAAA,CAAO,OAAQ,OAAA,CAAS,CAAE,CAAA,CACrC,IAAA,CAAM,CAAE,KAAA,CAAO,EAAG,OAAA,CAAS,CAAE,CAC/B,CAAA,CAEMC,CAAAA,CAAa,CAAE,KAAM,QAAA,CAAU,MAAA,CAAQ,CAAA,CAAG,QAAA,CAAU,EAAI,CAAA,CAEvD,SAASC,CAAAA,CAAQ,CAAE,SAAA,CAAAC,CAAAA,CAAW,KAAA,CAAAC,CAAAA,CAAO,eAAA,CAAAC,CAAAA,CAAiB,WAAA,CAAAC,CAAY,CAAA,CAAiB,CACxF,GAAM,CAACC,EAAUC,CAAW,CAAA,CAAIC,QAAAA,CAAwBJ,CAAAA,EAAmB,IAAI,CAAA,CAEzEK,EAAmBC,CAAAA,EAAmB,CAC1CH,CAAAA,CAAYD,CAAAA,GAAaI,CAAAA,CAAS,IAAA,CAAOA,CAAM,CAAA,CAC/CL,CAAAA,GAAcK,CAAM,EACtB,CAAA,CAEA,OACEC,IAAC,KAAA,CAAA,CACC,SAAA,CAAWlB,CAAAA,CACT,sCAAA,CACA,6DAAA,CACAS,CACF,EAEA,QAAA,CAAAS,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,yBAAA,CACZ,QAAA,CAAAR,EAAM,GAAA,CAAKS,CAAAA,EACVC,IAAAA,CAACC,MAAAA,CAAO,MAAA,CAAP,CAEC,SAAUjB,CAAAA,CACV,OAAA,CAAS,KAAA,CACT,OAAA,CAAQ,SAAA,CACR,MAAA,CAAQS,IAAaM,CAAAA,CAAK,EAAA,CAC1B,OAAA,CAAS,IAAMH,CAAAA,CAAgBG,CAAAA,CAAK,EAAE,CAAA,CACtC,UAAA,CAAYZ,CAAAA,CACZ,SAAA,CAAWP,CAAAA,CACT,mDAAA,CACA,qDACAa,CAAAA,GAAaM,CAAAA,CAAK,EAAA,CACd,oCAAA,CACA,4DACN,CAAA,CAEC,UAAAA,CAAAA,CAAK,IAAA,CACND,GAAAA,CAACI,eAAAA,CAAA,CAAgB,OAAA,CAAS,MACvB,QAAA,CAAAT,CAAAA,GAAaM,CAAAA,CAAK,EAAA,EACjBD,GAAAA,CAACG,MAAAA,CAAO,KAAP,CACC,QAAA,CAAUf,CAAAA,CACV,OAAA,CAAQ,SAAA,CACR,OAAA,CAAQ,UACR,IAAA,CAAK,MAAA,CACL,UAAA,CAAYC,CAAAA,CACZ,SAAA,CAAU,iBAAA,CAET,SAAAY,CAAAA,CAAK,KAAA,CACR,CAAA,CAEJ,CAAA,CAAA,CAAA,CA7BKA,CAAAA,CAAK,EA8BZ,CACD,CAAA,CACH,CAAA,CACF,CAEJ,CAEA,IAAOI,CAAAA,CAAQf","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport React, { useState, useRef } from \"react\";\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface ToolbarItem {\r\n  id: string;\r\n  title: string;\r\n  icon: React.ReactNode;\r\n}\r\n\r\ninterface ToolbarProps {\r\n  className?: string;\r\n  items: ToolbarItem[];\r\n  defaultSelected?: string;\r\n  onItemClick?: (itemId: string) => void;\r\n}\r\n\r\nconst buttonVariants = {\r\n  initial: { gap: 0, paddingLeft: \".5rem\", paddingRight: \".5rem\" },\r\n  animate: (isSelected: boolean) => ({\r\n    gap: isSelected ? \".5rem\" : 0,\r\n    paddingLeft: isSelected ? \"1rem\" : \".5rem\",\r\n    paddingRight: isSelected ? \"1rem\" : \".5rem\",\r\n  }),\r\n};\r\n\r\nconst spanVariants = {\r\n  initial: { width: 0, opacity: 0 },\r\n  animate: { width: \"auto\", opacity: 1 },\r\n  exit: { width: 0, opacity: 0 },\r\n};\r\n\r\nconst transition = { type: \"spring\", bounce: 0, duration: 0.4 };\r\n\r\nexport function Toolbar({ className, items, defaultSelected, onItemClick }: ToolbarProps) {\r\n  const [selected, setSelected] = useState<string | null>(defaultSelected || null);\r\n\r\n  const handleItemClick = (itemId: string) => {\r\n    setSelected(selected === itemId ? null : itemId);\r\n    onItemClick?.(itemId);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"flex items-center gap-3 p-2 relative\",\r\n        \"bg-background border rounded-xl transition-all duration-200\",\r\n        className\r\n      )}\r\n    >\r\n      <div className=\"flex items-center gap-2\">\r\n        {items.map((item) => (\r\n          <motion.button\r\n            key={item.id}\r\n            variants={buttonVariants}\r\n            initial={false}\r\n            animate=\"animate\"\r\n            custom={selected === item.id}\r\n            onClick={() => handleItemClick(item.id)}\r\n            transition={transition}\r\n            className={cn(\r\n              \"relative flex items-center rounded-none px-3 py-2\",\r\n              \"text-sm font-medium transition-colors duration-300\",\r\n              selected === item.id\r\n                ? \"bg-[#1F9CFE] text-white rounded-lg\"\r\n                : \"text-muted-foreground hover:bg-muted hover:text-foreground\"\r\n            )}\r\n          >\r\n            {item.icon}\r\n            <AnimatePresence initial={false}>\r\n              {selected === item.id && (\r\n                <motion.span\r\n                  variants={spanVariants}\r\n                  initial=\"initial\"\r\n                  animate=\"animate\"\r\n                  exit=\"exit\"\r\n                  transition={transition}\r\n                  className=\"overflow-hidden\"\r\n                >\r\n                  {item.title}\r\n                </motion.span>\r\n              )}\r\n            </AnimatePresence>\r\n          </motion.button>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default Toolbar;\r\n"]}

package/dist/tooltip-animated/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function i(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function N({content:e,children:r,position:t="top",delay:c=200,animation:p="slide",className:m}){let[f,s]=react.useState(false),o=react.useRef(void 0),d=()=>{o.current=setTimeout(()=>s(true),c);},u=()=>{o.current&&clearTimeout(o.current),s(false);},y=()=>({top:"bottom-full left-1/2 -translate-x-1/2 mb-3",bottom:"top-full left-1/2 -translate-x-1/2 mt-3",left:"right-full top-1/2 -translate-y-1/2 mr-3",right:"left-full top-1/2 -translate-y-1/2 ml-3"})[t],b=()=>{let g={top:{y:10},bottom:{y:-10},left:{x:10},right:{x:-10}},{x:a=0,y:n=0}=g[t];return {...{fade:{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}},scale:{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8}},bounce:{initial:{opacity:0,scale:.3,y:t==="top"?10:-10},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.3,y:t==="top"?10:-10}},slide:{initial:{opacity:0,x:a,y:n},animate:{opacity:1,x:0,y:0},exit:{opacity:0,x:a,y:n}}}[p],transition:{type:"spring",stiffness:300,damping:25}}};return jsxRuntime.jsxs("div",{className:i("relative inline-block",m),onMouseEnter:d,onMouseLeave:u,children:[r,jsxRuntime.jsx(framerMotion.AnimatePresence,{children:f&&jsxRuntime.jsx(framerMotion.motion.div,{...b(),className:i("absolute z-50 px-4 py-2 text-sm bg-popover border border-border rounded-xl shadow-lg whitespace-nowrap backdrop-blur-sm",y()),children:e})})]})}var E=N;exports.TooltipAnimated=N;exports.default=E;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tooltip-animated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tooltip-animated/index.tsx"],"names":["cn","inputs","twMerge","clsx","TooltipAnimated","content","children","position","delay","animation","className","isVisible","setIsVisible","useState","timeoutRef","useRef","showTooltip","hideTooltip","getPositionClasses","getAnimationProps","offsets","x","y","jsxs","jsx","AnimatePresence","motion","tooltip_animated_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TooltipAnimatedProps {\r\n  content: string;\r\n  children: React.ReactNode;\r\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  delay?: number;\r\n  animation?: \"fade\" | \"slide\" | \"bounce\" | \"scale\";\r\n  className?: string;\r\n}\r\n\r\nexport function TooltipAnimated({\r\n  content,\r\n  children,\r\n  position = \"top\",\r\n  delay = 200,\r\n  animation = \"slide\",\r\n  className,\r\n}: TooltipAnimatedProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const timeoutRef = useRef<NodeJS.Timeout>(undefined);\r\n\r\n  const showTooltip = () => {\r\n    timeoutRef.current = setTimeout(() => setIsVisible(true), delay);\r\n  };\r\n\r\n  const hideTooltip = () => {\r\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    setIsVisible(false);\r\n  };\r\n\r\n  const getPositionClasses = () => {\r\n    const positions = {\r\n      top: \"bottom-full left-1/2 -translate-x-1/2 mb-3\",\r\n      bottom: \"top-full left-1/2 -translate-x-1/2 mt-3\",\r\n      left: \"right-full top-1/2 -translate-y-1/2 mr-3\",\r\n      right: \"left-full top-1/2 -translate-y-1/2 ml-3\",\r\n    };\r\n    return positions[position];\r\n  };\r\n\r\n  const getAnimationProps = () => {\r\n    const slideOffset = 10;\r\n    const offsets = { top: { y: slideOffset }, bottom: { y: -slideOffset }, left: { x: slideOffset }, right: { x: -slideOffset } };\r\n    const { x = 0, y = 0 } = offsets[position];\r\n\r\n    const animations = {\r\n      fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } },\r\n      scale: { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 } },\r\n      bounce: { initial: { opacity: 0, scale: 0.3, y: position === \"top\" ? 10 : -10 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.3, y: position === \"top\" ? 10 : -10 } },\r\n      slide: { initial: { opacity: 0, x, y }, animate: { opacity: 1, x: 0, y: 0 }, exit: { opacity: 0, x, y } },\r\n    };\r\n    return { ...animations[animation], transition: { type: \"spring\", stiffness: 300, damping: 25 } };\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-block\", className)} onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>\r\n      {children}\r\n      <AnimatePresence>\r\n        {isVisible && (\r\n          <motion.div {...getAnimationProps()} className={cn(\"absolute z-50 px-4 py-2 text-sm bg-popover border border-border rounded-xl shadow-lg whitespace-nowrap backdrop-blur-sm\", getPositionClasses())}>\r\n            {content}\r\n          </motion.div>\r\n        )}\r\n      </AnimatePresence>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default TooltipAnimated;\r\n"]}

package/dist/tooltip-animated/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useRef}from'react';import {AnimatePresence,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function i(...e){return twMerge(clsx(e))}function N({content:e,children:r,position:t="top",delay:c=200,animation:p="slide",className:m}){let[f,s]=useState(false),o=useRef(void 0),d=()=>{o.current=setTimeout(()=>s(true),c);},u=()=>{o.current&&clearTimeout(o.current),s(false);},y=()=>({top:"bottom-full left-1/2 -translate-x-1/2 mb-3",bottom:"top-full left-1/2 -translate-x-1/2 mt-3",left:"right-full top-1/2 -translate-y-1/2 mr-3",right:"left-full top-1/2 -translate-y-1/2 ml-3"})[t],b=()=>{let g={top:{y:10},bottom:{y:-10},left:{x:10},right:{x:-10}},{x:a=0,y:n=0}=g[t];return {...{fade:{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}},scale:{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8}},bounce:{initial:{opacity:0,scale:.3,y:t==="top"?10:-10},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.3,y:t==="top"?10:-10}},slide:{initial:{opacity:0,x:a,y:n},animate:{opacity:1,x:0,y:0},exit:{opacity:0,x:a,y:n}}}[p],transition:{type:"spring",stiffness:300,damping:25}}};return jsxs("div",{className:i("relative inline-block",m),onMouseEnter:d,onMouseLeave:u,children:[r,jsx(AnimatePresence,{children:f&&jsx(motion.div,{...b(),className:i("absolute z-50 px-4 py-2 text-sm bg-popover border border-border rounded-xl shadow-lg whitespace-nowrap backdrop-blur-sm",y()),children:e})})]})}var E=N;export{N as TooltipAnimated,E as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/tooltip-animated/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tooltip-animated/index.tsx"],"names":["cn","inputs","twMerge","clsx","TooltipAnimated","content","children","position","delay","animation","className","isVisible","setIsVisible","useState","timeoutRef","useRef","showTooltip","hideTooltip","getPositionClasses","getAnimationProps","offsets","x","y","jsxs","jsx","AnimatePresence","motion","tooltip_animated_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TooltipAnimatedProps {\r\n  content: string;\r\n  children: React.ReactNode;\r\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  delay?: number;\r\n  animation?: \"fade\" | \"slide\" | \"bounce\" | \"scale\";\r\n  className?: string;\r\n}\r\n\r\nexport function TooltipAnimated({\r\n  content,\r\n  children,\r\n  position = \"top\",\r\n  delay = 200,\r\n  animation = \"slide\",\r\n  className,\r\n}: TooltipAnimatedProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const timeoutRef = useRef<NodeJS.Timeout>(undefined);\r\n\r\n  const showTooltip = () => {\r\n    timeoutRef.current = setTimeout(() => setIsVisible(true), delay);\r\n  };\r\n\r\n  const hideTooltip = () => {\r\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    setIsVisible(false);\r\n  };\r\n\r\n  const getPositionClasses = () => {\r\n    const positions = {\r\n      top: \"bottom-full left-1/2 -translate-x-1/2 mb-3\",\r\n      bottom: \"top-full left-1/2 -translate-x-1/2 mt-3\",\r\n      left: \"right-full top-1/2 -translate-y-1/2 mr-3\",\r\n      right: \"left-full top-1/2 -translate-y-1/2 ml-3\",\r\n    };\r\n    return positions[position];\r\n  };\r\n\r\n  const getAnimationProps = () => {\r\n    const slideOffset = 10;\r\n    const offsets = { top: { y: slideOffset }, bottom: { y: -slideOffset }, left: { x: slideOffset }, right: { x: -slideOffset } };\r\n    const { x = 0, y = 0 } = offsets[position];\r\n\r\n    const animations = {\r\n      fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } },\r\n      scale: { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 } },\r\n      bounce: { initial: { opacity: 0, scale: 0.3, y: position === \"top\" ? 10 : -10 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.3, y: position === \"top\" ? 10 : -10 } },\r\n      slide: { initial: { opacity: 0, x, y }, animate: { opacity: 1, x: 0, y: 0 }, exit: { opacity: 0, x, y } },\r\n    };\r\n    return { ...animations[animation], transition: { type: \"spring\", stiffness: 300, damping: 25 } };\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-block\", className)} onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>\r\n      {children}\r\n      <AnimatePresence>\r\n        {isVisible && (\r\n          <motion.div {...getAnimationProps()} className={cn(\"absolute z-50 px-4 py-2 text-sm bg-popover border border-border rounded-xl shadow-lg whitespace-nowrap backdrop-blur-sm\", getPositionClasses())}>\r\n            {content}\r\n          </motion.div>\r\n        )}\r\n      </AnimatePresence>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default TooltipAnimated;\r\n"]}

package/dist/tooltip-minimal/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function o(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function y({content:t,children:n,position:r="top",delay:l=300,className:a}){let[m,i]=react.useState(false),e=react.useRef(void 0),p=()=>{e.current=setTimeout(()=>i(true),l);},c=()=>{e.current&&clearTimeout(e.current),i(false);},u=()=>({top:"bottom-full left-1/2 -translate-x-1/2 mb-2",bottom:"top-full left-1/2 -translate-x-1/2 mt-2",left:"right-full top-1/2 -translate-y-1/2 mr-2",right:"left-full top-1/2 -translate-y-1/2 ml-2"})[r];return jsxRuntime.jsxs("div",{className:o("relative inline-block",a),onMouseEnter:p,onMouseLeave:c,children:[n,jsxRuntime.jsx(framerMotion.AnimatePresence,{children:m&&jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.15},className:o("absolute z-50 px-3 py-2 text-sm bg-popover border border-border rounded-lg shadow-md whitespace-nowrap",u()),children:t})})]})}var C=y;exports.TooltipMinimal=y;exports.default=C;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tooltip-minimal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tooltip-minimal/index.tsx"],"names":["cn","inputs","twMerge","clsx","TooltipMinimal","content","children","position","delay","className","isVisible","setIsVisible","useState","timeoutRef","useRef","showTooltip","hideTooltip","getPositionClasses","jsxs","jsx","AnimatePresence","motion","tooltip_minimal_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCSO,SAASG,EAAe,CAC7B,OAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,EACA,QAAA,CAAAC,CAAAA,CAAW,KAAA,CACX,KAAA,CAAAC,EAAQ,GAAA,CACR,SAAA,CAAAC,CACF,CAAA,CAAwB,CACtB,GAAM,CAACC,EAAWC,CAAY,CAAA,CAAIC,eAAS,KAAK,CAAA,CAC1CC,CAAAA,CAAaC,YAAAA,CAAuB,MAAS,CAAA,CAE7CC,CAAAA,CAAc,IAAM,CACxBF,CAAAA,CAAW,QAAU,UAAA,CAAW,IAAMF,CAAAA,CAAa,IAAI,EAAGH,CAAK,EACjE,EAEMQ,CAAAA,CAAc,IAAM,CACpBH,CAAAA,CAAW,OAAA,EAAS,YAAA,CAAaA,CAAAA,CAAW,OAAO,CAAA,CACvDF,CAAAA,CAAa,KAAK,EACpB,EAEMM,CAAAA,CAAqB,IAAA,CACP,CAChB,GAAA,CAAK,6CACL,MAAA,CAAQ,yCAAA,CACR,KAAM,0CAAA,CACN,KAAA,CAAO,yCACT,CAAA,EACiBV,CAAQ,CAAA,CAG3B,OACEW,gBAAC,KAAA,CAAA,CAAI,SAAA,CAAWlB,EAAG,uBAAA,CAAyBS,CAAS,EAAG,YAAA,CAAcM,CAAAA,CAAa,YAAA,CAAcC,CAAAA,CAC9F,UAAAV,CAAAA,CACDa,cAAAA,CAACC,6BAAA,CACE,QAAA,CAAAV,GACCS,cAAAA,CAACE,mBAAAA,CAAO,GAAA,CAAP,CACC,QAAS,CAAE,OAAA,CAAS,CAAA,CAAG,KAAA,CAAO,GAAK,CAAA,CACnC,OAAA,CAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAE,EAChC,IAAA,CAAM,CAAE,QAAS,CAAA,CAAG,KAAA,CAAO,GAAK,CAAA,CAChC,WAAY,CAAE,QAAA,CAAU,GAAK,CAAA,CAC7B,SAAA,CAAWrB,EAAG,wGAAA,CAA0GiB,CAAAA,EAAoB,CAAA,CAE3I,SAAAZ,CAAAA,CACH,CAAA,CAEJ,GACF,CAEJ,KAEOiB,CAAAA,CAAQlB","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TooltipMinimalProps {\r\n  content: string;\r\n  children: React.ReactNode;\r\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  delay?: number;\r\n  className?: string;\r\n}\r\n\r\nexport function TooltipMinimal({\r\n  content,\r\n  children,\r\n  position = \"top\",\r\n  delay = 300,\r\n  className,\r\n}: TooltipMinimalProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const timeoutRef = useRef<NodeJS.Timeout>(undefined);\r\n\r\n  const showTooltip = () => {\r\n    timeoutRef.current = setTimeout(() => setIsVisible(true), delay);\r\n  };\r\n\r\n  const hideTooltip = () => {\r\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    setIsVisible(false);\r\n  };\r\n\r\n  const getPositionClasses = () => {\r\n    const positions = {\r\n      top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\r\n      bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\r\n      left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\r\n      right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\r\n    };\r\n    return positions[position];\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-block\", className)} onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>\r\n      {children}\r\n      <AnimatePresence>\r\n        {isVisible && (\r\n          <motion.div\r\n            initial={{ opacity: 0, scale: 0.95 }}\r\n            animate={{ opacity: 1, scale: 1 }}\r\n            exit={{ opacity: 0, scale: 0.95 }}\r\n            transition={{ duration: 0.15 }}\r\n            className={cn(\"absolute z-50 px-3 py-2 text-sm bg-popover border border-border rounded-lg shadow-md whitespace-nowrap\", getPositionClasses())}\r\n          >\r\n            {content}\r\n          </motion.div>\r\n        )}\r\n      </AnimatePresence>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default TooltipMinimal;\r\n"]}

package/dist/tooltip-minimal/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useRef}from'react';import {AnimatePresence,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function o(...t){return twMerge(clsx(t))}function y({content:t,children:n,position:r="top",delay:l=300,className:a}){let[m,i]=useState(false),e=useRef(void 0),p=()=>{e.current=setTimeout(()=>i(true),l);},c=()=>{e.current&&clearTimeout(e.current),i(false);},u=()=>({top:"bottom-full left-1/2 -translate-x-1/2 mb-2",bottom:"top-full left-1/2 -translate-x-1/2 mt-2",left:"right-full top-1/2 -translate-y-1/2 mr-2",right:"left-full top-1/2 -translate-y-1/2 ml-2"})[r];return jsxs("div",{className:o("relative inline-block",a),onMouseEnter:p,onMouseLeave:c,children:[n,jsx(AnimatePresence,{children:m&&jsx(motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.15},className:o("absolute z-50 px-3 py-2 text-sm bg-popover border border-border rounded-lg shadow-md whitespace-nowrap",u()),children:t})})]})}var C=y;export{y as TooltipMinimal,C as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/tooltip-minimal/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/tooltip-minimal/index.tsx"],"names":["cn","inputs","twMerge","clsx","TooltipMinimal","content","children","position","delay","className","isVisible","setIsVisible","useState","timeoutRef","useRef","showTooltip","hideTooltip","getPositionClasses","jsxs","jsx","AnimatePresence","motion","tooltip_minimal_default"],"mappings":"6LAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCSO,SAASG,EAAe,CAC7B,OAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,EACA,QAAA,CAAAC,CAAAA,CAAW,KAAA,CACX,KAAA,CAAAC,EAAQ,GAAA,CACR,SAAA,CAAAC,CACF,CAAA,CAAwB,CACtB,GAAM,CAACC,EAAWC,CAAY,CAAA,CAAIC,SAAS,KAAK,CAAA,CAC1CC,CAAAA,CAAaC,MAAAA,CAAuB,MAAS,CAAA,CAE7CC,CAAAA,CAAc,IAAM,CACxBF,CAAAA,CAAW,QAAU,UAAA,CAAW,IAAMF,CAAAA,CAAa,IAAI,EAAGH,CAAK,EACjE,EAEMQ,CAAAA,CAAc,IAAM,CACpBH,CAAAA,CAAW,OAAA,EAAS,YAAA,CAAaA,CAAAA,CAAW,OAAO,CAAA,CACvDF,CAAAA,CAAa,KAAK,EACpB,EAEMM,CAAAA,CAAqB,IAAA,CACP,CAChB,GAAA,CAAK,6CACL,MAAA,CAAQ,yCAAA,CACR,KAAM,0CAAA,CACN,KAAA,CAAO,yCACT,CAAA,EACiBV,CAAQ,CAAA,CAG3B,OACEW,KAAC,KAAA,CAAA,CAAI,SAAA,CAAWlB,EAAG,uBAAA,CAAyBS,CAAS,EAAG,YAAA,CAAcM,CAAAA,CAAa,YAAA,CAAcC,CAAAA,CAC9F,UAAAV,CAAAA,CACDa,GAAAA,CAACC,gBAAA,CACE,QAAA,CAAAV,GACCS,GAAAA,CAACE,MAAAA,CAAO,GAAA,CAAP,CACC,QAAS,CAAE,OAAA,CAAS,CAAA,CAAG,KAAA,CAAO,GAAK,CAAA,CACnC,OAAA,CAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAE,EAChC,IAAA,CAAM,CAAE,QAAS,CAAA,CAAG,KAAA,CAAO,GAAK,CAAA,CAChC,WAAY,CAAE,QAAA,CAAU,GAAK,CAAA,CAC7B,SAAA,CAAWrB,EAAG,wGAAA,CAA0GiB,CAAAA,EAAoB,CAAA,CAE3I,SAAAZ,CAAAA,CACH,CAAA,CAEJ,GACF,CAEJ,KAEOiB,CAAAA,CAAQlB","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useState, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TooltipMinimalProps {\r\n  content: string;\r\n  children: React.ReactNode;\r\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  delay?: number;\r\n  className?: string;\r\n}\r\n\r\nexport function TooltipMinimal({\r\n  content,\r\n  children,\r\n  position = \"top\",\r\n  delay = 300,\r\n  className,\r\n}: TooltipMinimalProps) {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const timeoutRef = useRef<NodeJS.Timeout>(undefined);\r\n\r\n  const showTooltip = () => {\r\n    timeoutRef.current = setTimeout(() => setIsVisible(true), delay);\r\n  };\r\n\r\n  const hideTooltip = () => {\r\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    setIsVisible(false);\r\n  };\r\n\r\n  const getPositionClasses = () => {\r\n    const positions = {\r\n      top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\r\n      bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\r\n      left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\r\n      right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\r\n    };\r\n    return positions[position];\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"relative inline-block\", className)} onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>\r\n      {children}\r\n      <AnimatePresence>\r\n        {isVisible && (\r\n          <motion.div\r\n            initial={{ opacity: 0, scale: 0.95 }}\r\n            animate={{ opacity: 1, scale: 1 }}\r\n            exit={{ opacity: 0, scale: 0.95 }}\r\n            transition={{ duration: 0.15 }}\r\n            className={cn(\"absolute z-50 px-3 py-2 text-sm bg-popover border border-border rounded-lg shadow-md whitespace-nowrap\", getPositionClasses())}\r\n          >\r\n            {content}\r\n          </motion.div>\r\n        )}\r\n      </AnimatePresence>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default TooltipMinimal;\r\n"]}

package/dist/true-focus/index.js

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function d(...u){return tailwindMerge.twMerge(clsx.clsx(u))}function A({sentence:u="True Focus",manualMode:s=false,blurAmount:v=5,borderColor:x="green",glowColor:w="rgba(0, 255, 0, 0.6)",animationDuration:o=.5,pauseBetweenAnimations:m=1,className:R}){let c=u.split(" "),[r,i]=react.useState(0),[y,F]=react.useState(null),a=react.useRef(null),f=react.useRef([]),[l,C]=react.useState({x:0,y:0,width:0,height:0});return react.useEffect(()=>{if(!s){let n=setInterval(()=>{i(e=>(e+1)%c.length);},(o+m)*1e3);return ()=>clearInterval(n)}},[s,o,m,c.length]),react.useEffect(()=>{let n=()=>{if(r===null||r===-1||!f.current[r]||!a.current)return;let e=a.current.getBoundingClientRect(),t=f.current[r].getBoundingClientRect();C({x:t.left-e.left,y:t.top-e.top,width:t.width,height:t.height});};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[r,c.length]),jsxRuntime.jsxs("div",{ref:a,className:d("relative flex flex-wrap gap-3 p-12 items-center justify-center",R),children:[c.map((n,e)=>{let t=e===r;return jsxRuntime.jsx("span",{ref:E=>{f.current[e]=E;},className:"text-4xl font-bold relative z-10",style:{filter:t?"blur(0px)":`blur(${v}px)`,transition:`all ${o}s ease`,color:t?"#000":"#666",transform:t?"scale(1.05)":"scale(1)"},onMouseEnter:()=>s&&(F(e),i(e)),onMouseLeave:()=>s&&i(y??0),children:n},e)}),jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute pointer-events-none",animate:{x:l.x,y:l.y,width:l.width,height:l.height,opacity:r>=0?1:0},transition:{duration:o},style:{border:`2px solid ${x}`,boxShadow:`0 0 10px ${w}`,borderRadius:4}})]})}var P=A;exports.TrueFocus=A;exports.default=P;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/true-focus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/true-focus/index.tsx"],"names":["cn","inputs","twMerge","clsx","TrueFocus","sentence","manualMode","blurAmount","borderColor","glowColor","animationDuration","pauseBetweenAnimations","className","words","currentIndex","setCurrentIndex","useState","lastActiveIndex","setLastActiveIndex","containerRef","useRef","wordRefs","focusRect","setFocusRect","useEffect","interval","prev","updateFocusRect","parentRect","activeRect","jsxs","word","index","isActive","jsx","el","motion","true_focus_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TrueFocusProps {\r\n  sentence?: string;\r\n  manualMode?: boolean;\r\n  blurAmount?: number;\r\n  borderColor?: string;\r\n  glowColor?: string;\r\n  animationDuration?: number;\r\n  pauseBetweenAnimations?: number;\r\n  className?: string;\r\n}\r\n\r\ninterface FocusRect {\r\n  x: number;\r\n  y: number;\r\n  width: number;\r\n  height: number;\r\n}\r\n\r\nexport function TrueFocus({\r\n  sentence = \"True Focus\",\r\n  manualMode = false,\r\n  blurAmount = 5,\r\n  borderColor = \"green\",\r\n  glowColor = \"rgba(0, 255, 0, 0.6)\",\r\n  animationDuration = 0.5,\r\n  pauseBetweenAnimations = 1,\r\n  className,\r\n}: TrueFocusProps) {\r\n  const words = sentence.split(\" \");\r\n  const [currentIndex, setCurrentIndex] = useState<number>(0);\r\n  const [lastActiveIndex, setLastActiveIndex] = useState<number | null>(null);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const wordRefs = useRef<(HTMLSpanElement | null)[]>([]);\r\n  const [focusRect, setFocusRect] = useState<FocusRect>({ x: 0, y: 0, width: 0, height: 0 });\r\n\r\n  useEffect(() => {\r\n    if (!manualMode) {\r\n      const interval = setInterval(() => {\r\n        setCurrentIndex((prev) => (prev + 1) % words.length);\r\n      }, (animationDuration + pauseBetweenAnimations) * 1000);\r\n      return () => clearInterval(interval);\r\n    }\r\n  }, [manualMode, animationDuration, pauseBetweenAnimations, words.length]);\r\n\r\n  useEffect(() => {\r\n    const updateFocusRect = () => {\r\n      if (currentIndex === null || currentIndex === -1) return;\r\n      if (!wordRefs.current[currentIndex] || !containerRef.current) return;\r\n      const parentRect = containerRef.current.getBoundingClientRect();\r\n      const activeRect = wordRefs.current[currentIndex]!.getBoundingClientRect();\r\n      setFocusRect({\r\n        x: activeRect.left - parentRect.left,\r\n        y: activeRect.top - parentRect.top,\r\n        width: activeRect.width,\r\n        height: activeRect.height,\r\n      });\r\n    };\r\n    updateFocusRect();\r\n    window.addEventListener(\"resize\", updateFocusRect);\r\n    return () => window.removeEventListener(\"resize\", updateFocusRect);\r\n  }, [currentIndex, words.length]);\r\n\r\n  return (\r\n    <div ref={containerRef} className={cn(\"relative flex flex-wrap gap-3 p-12 items-center justify-center\", className)}>\r\n      {words.map((word, index) => {\r\n        const isActive = index === currentIndex;\r\n        return (\r\n          <span\r\n            key={index}\r\n            ref={(el) => { wordRefs.current[index] = el; }}\r\n            className=\"text-4xl font-bold relative z-10\"\r\n            style={{\r\n              filter: isActive ? \"blur(0px)\" : `blur(${blurAmount}px)`,\r\n              transition: `all ${animationDuration}s ease`,\r\n              color: isActive ? \"#000\" : \"#666\",\r\n              transform: isActive ? \"scale(1.05)\" : \"scale(1)\",\r\n            }}\r\n            onMouseEnter={() => manualMode && (setLastActiveIndex(index), setCurrentIndex(index))}\r\n            onMouseLeave={() => manualMode && setCurrentIndex(lastActiveIndex ?? 0)}\r\n          >\r\n            {word}\r\n          </span>\r\n        );\r\n      })}\r\n      <motion.div\r\n        className=\"absolute pointer-events-none\"\r\n        animate={{ x: focusRect.x, y: focusRect.y, width: focusRect.width, height: focusRect.height, opacity: currentIndex >= 0 ? 1 : 0 }}\r\n        transition={{ duration: animationDuration }}\r\n        style={{ border: `2px solid ${borderColor}`, boxShadow: `0 0 10px ${glowColor}`, borderRadius: 4 }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default TrueFocus;\r\n"]}

package/dist/true-focus/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useRef,useEffect}from'react';import {motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function d(...u){return twMerge(clsx(u))}function A({sentence:u="True Focus",manualMode:s=false,blurAmount:v=5,borderColor:x="green",glowColor:w="rgba(0, 255, 0, 0.6)",animationDuration:o=.5,pauseBetweenAnimations:m=1,className:R}){let c=u.split(" "),[r,i]=useState(0),[y,F]=useState(null),a=useRef(null),f=useRef([]),[l,C]=useState({x:0,y:0,width:0,height:0});return useEffect(()=>{if(!s){let n=setInterval(()=>{i(e=>(e+1)%c.length);},(o+m)*1e3);return ()=>clearInterval(n)}},[s,o,m,c.length]),useEffect(()=>{let n=()=>{if(r===null||r===-1||!f.current[r]||!a.current)return;let e=a.current.getBoundingClientRect(),t=f.current[r].getBoundingClientRect();C({x:t.left-e.left,y:t.top-e.top,width:t.width,height:t.height});};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[r,c.length]),jsxs("div",{ref:a,className:d("relative flex flex-wrap gap-3 p-12 items-center justify-center",R),children:[c.map((n,e)=>{let t=e===r;return jsx("span",{ref:E=>{f.current[e]=E;},className:"text-4xl font-bold relative z-10",style:{filter:t?"blur(0px)":`blur(${v}px)`,transition:`all ${o}s ease`,color:t?"#000":"#666",transform:t?"scale(1.05)":"scale(1)"},onMouseEnter:()=>s&&(F(e),i(e)),onMouseLeave:()=>s&&i(y??0),children:n},e)}),jsx(motion.div,{className:"absolute pointer-events-none",animate:{x:l.x,y:l.y,width:l.width,height:l.height,opacity:r>=0?1:0},transition:{duration:o},style:{border:`2px solid ${x}`,boxShadow:`0 0 10px ${w}`,borderRadius:4}})]})}var P=A;export{A as TrueFocus,P as default};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/true-focus/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/true-focus/index.tsx"],"names":["cn","inputs","twMerge","clsx","TrueFocus","sentence","manualMode","blurAmount","borderColor","glowColor","animationDuration","pauseBetweenAnimations","className","words","currentIndex","setCurrentIndex","useState","lastActiveIndex","setLastActiveIndex","containerRef","useRef","wordRefs","focusRect","setFocusRect","useEffect","interval","prev","updateFocusRect","parentRect","activeRect","jsxs","word","index","isActive","jsx","el","motion","true_focus_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TrueFocusProps {\r\n  sentence?: string;\r\n  manualMode?: boolean;\r\n  blurAmount?: number;\r\n  borderColor?: string;\r\n  glowColor?: string;\r\n  animationDuration?: number;\r\n  pauseBetweenAnimations?: number;\r\n  className?: string;\r\n}\r\n\r\ninterface FocusRect {\r\n  x: number;\r\n  y: number;\r\n  width: number;\r\n  height: number;\r\n}\r\n\r\nexport function TrueFocus({\r\n  sentence = \"True Focus\",\r\n  manualMode = false,\r\n  blurAmount = 5,\r\n  borderColor = \"green\",\r\n  glowColor = \"rgba(0, 255, 0, 0.6)\",\r\n  animationDuration = 0.5,\r\n  pauseBetweenAnimations = 1,\r\n  className,\r\n}: TrueFocusProps) {\r\n  const words = sentence.split(\" \");\r\n  const [currentIndex, setCurrentIndex] = useState<number>(0);\r\n  const [lastActiveIndex, setLastActiveIndex] = useState<number | null>(null);\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const wordRefs = useRef<(HTMLSpanElement | null)[]>([]);\r\n  const [focusRect, setFocusRect] = useState<FocusRect>({ x: 0, y: 0, width: 0, height: 0 });\r\n\r\n  useEffect(() => {\r\n    if (!manualMode) {\r\n      const interval = setInterval(() => {\r\n        setCurrentIndex((prev) => (prev + 1) % words.length);\r\n      }, (animationDuration + pauseBetweenAnimations) * 1000);\r\n      return () => clearInterval(interval);\r\n    }\r\n  }, [manualMode, animationDuration, pauseBetweenAnimations, words.length]);\r\n\r\n  useEffect(() => {\r\n    const updateFocusRect = () => {\r\n      if (currentIndex === null || currentIndex === -1) return;\r\n      if (!wordRefs.current[currentIndex] || !containerRef.current) return;\r\n      const parentRect = containerRef.current.getBoundingClientRect();\r\n      const activeRect = wordRefs.current[currentIndex]!.getBoundingClientRect();\r\n      setFocusRect({\r\n        x: activeRect.left - parentRect.left,\r\n        y: activeRect.top - parentRect.top,\r\n        width: activeRect.width,\r\n        height: activeRect.height,\r\n      });\r\n    };\r\n    updateFocusRect();\r\n    window.addEventListener(\"resize\", updateFocusRect);\r\n    return () => window.removeEventListener(\"resize\", updateFocusRect);\r\n  }, [currentIndex, words.length]);\r\n\r\n  return (\r\n    <div ref={containerRef} className={cn(\"relative flex flex-wrap gap-3 p-12 items-center justify-center\", className)}>\r\n      {words.map((word, index) => {\r\n        const isActive = index === currentIndex;\r\n        return (\r\n          <span\r\n            key={index}\r\n            ref={(el) => { wordRefs.current[index] = el; }}\r\n            className=\"text-4xl font-bold relative z-10\"\r\n            style={{\r\n              filter: isActive ? \"blur(0px)\" : `blur(${blurAmount}px)`,\r\n              transition: `all ${animationDuration}s ease`,\r\n              color: isActive ? \"#000\" : \"#666\",\r\n              transform: isActive ? \"scale(1.05)\" : \"scale(1)\",\r\n            }}\r\n            onMouseEnter={() => manualMode && (setLastActiveIndex(index), setCurrentIndex(index))}\r\n            onMouseLeave={() => manualMode && setCurrentIndex(lastActiveIndex ?? 0)}\r\n          >\r\n            {word}\r\n          </span>\r\n        );\r\n      })}\r\n      <motion.div\r\n        className=\"absolute pointer-events-none\"\r\n        animate={{ x: focusRect.x, y: focusRect.y, width: focusRect.width, height: focusRect.height, opacity: currentIndex >= 0 ? 1 : 0 }}\r\n        transition={{ duration: animationDuration }}\r\n        style={{ border: `2px solid ${borderColor}`, boxShadow: `0 0 10px ${glowColor}`, borderRadius: 4 }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default TrueFocus;\r\n"]}