bynana-ui 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/index.js +2 -0
- package/dist/accordion/index.js.map +1 -0
- package/dist/accordion/index.mjs +2 -0
- package/dist/accordion/index.mjs.map +1 -0
- package/dist/alert/index.js +2 -0
- package/dist/alert/index.js.map +1 -0
- package/dist/alert/index.mjs +2 -0
- package/dist/alert/index.mjs.map +1 -0
- package/dist/attract-button/index.js +2 -0
- package/dist/attract-button/index.js.map +1 -0
- package/dist/attract-button/index.mjs +2 -0
- package/dist/attract-button/index.mjs.map +1 -0
- package/dist/card/index.js +2 -0
- package/dist/card/index.js.map +1 -0
- package/dist/card/index.mjs +2 -0
- package/dist/card/index.mjs.map +1 -0
- package/dist/checkbox/index.js +2 -0
- package/dist/checkbox/index.js.map +1 -0
- package/dist/checkbox/index.mjs +2 -0
- package/dist/checkbox/index.mjs.map +1 -0
- package/dist/circular-text/index.js +2 -0
- package/dist/circular-text/index.js.map +1 -0
- package/dist/circular-text/index.mjs +2 -0
- package/dist/circular-text/index.mjs.map +1 -0
- package/dist/command-button/index.js +2 -0
- package/dist/command-button/index.js.map +1 -0
- package/dist/command-button/index.mjs +2 -0
- package/dist/command-button/index.mjs.map +1 -0
- package/dist/copy-button/index.js +2 -0
- package/dist/copy-button/index.js.map +1 -0
- package/dist/copy-button/index.mjs +2 -0
- package/dist/copy-button/index.mjs.map +1 -0
- package/dist/counter/index.js +2 -0
- package/dist/counter/index.js.map +1 -0
- package/dist/counter/index.mjs +2 -0
- package/dist/counter/index.mjs.map +1 -0
- package/dist/decrypted-text/index.js +2 -0
- package/dist/decrypted-text/index.js.map +1 -0
- package/dist/decrypted-text/index.mjs +2 -0
- package/dist/decrypted-text/index.mjs.map +1 -0
- package/dist/dock/index.js +2 -0
- package/dist/dock/index.js.map +1 -0
- package/dist/dock/index.mjs +2 -0
- package/dist/dock/index.mjs.map +1 -0
- package/dist/drawer/index.js +2 -0
- package/dist/drawer/index.js.map +1 -0
- package/dist/drawer/index.mjs +2 -0
- package/dist/drawer/index.mjs.map +1 -0
- package/dist/elastic-text/index.js +2 -0
- package/dist/elastic-text/index.js.map +1 -0
- package/dist/elastic-text/index.mjs +2 -0
- package/dist/elastic-text/index.mjs.map +1 -0
- package/dist/file-tree/index.js +2 -0
- package/dist/file-tree/index.js.map +1 -0
- package/dist/file-tree/index.mjs +2 -0
- package/dist/file-tree/index.mjs.map +1 -0
- package/dist/glowing-text/index.js +2 -0
- package/dist/glowing-text/index.js.map +1 -0
- package/dist/glowing-text/index.mjs +2 -0
- package/dist/glowing-text/index.mjs.map +1 -0
- package/dist/index.js +24 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -3
- package/dist/index.mjs.map +1 -1
- package/dist/input/index.js +2 -0
- package/dist/input/index.js.map +1 -0
- package/dist/input/index.mjs +2 -0
- package/dist/input/index.mjs.map +1 -0
- package/dist/loading-flower/index.js +7 -0
- package/dist/loading-flower/index.js.map +1 -0
- package/dist/loading-flower/index.mjs +7 -0
- package/dist/loading-flower/index.mjs.map +1 -0
- package/dist/loading-geometric/index.js +7 -0
- package/dist/loading-geometric/index.js.map +1 -0
- package/dist/loading-geometric/index.mjs +7 -0
- package/dist/loading-geometric/index.mjs.map +1 -0
- package/dist/loading-morph/index.js +5 -0
- package/dist/loading-morph/index.js.map +1 -0
- package/dist/loading-morph/index.mjs +5 -0
- package/dist/loading-morph/index.mjs.map +1 -0
- package/dist/loading-rings/index.js +4 -0
- package/dist/loading-rings/index.js.map +1 -0
- package/dist/loading-rings/index.mjs +4 -0
- package/dist/loading-rings/index.mjs.map +1 -0
- package/dist/loading-text/index.js +6 -0
- package/dist/loading-text/index.js.map +1 -0
- package/dist/loading-text/index.mjs +6 -0
- package/dist/loading-text/index.mjs.map +1 -0
- package/dist/loading-words/index.js +4 -0
- package/dist/loading-words/index.js.map +1 -0
- package/dist/loading-words/index.mjs +4 -0
- package/dist/loading-words/index.mjs.map +1 -0
- package/dist/modal/index.js +2 -0
- package/dist/modal/index.js.map +1 -0
- package/dist/modal/index.mjs +2 -0
- package/dist/modal/index.mjs.map +1 -0
- package/dist/morph-text/index.js +2 -0
- package/dist/morph-text/index.js.map +1 -0
- package/dist/morph-text/index.mjs +2 -0
- package/dist/morph-text/index.mjs.map +1 -0
- package/dist/particle-button/index.js +2 -0
- package/dist/particle-button/index.js.map +1 -0
- package/dist/particle-button/index.mjs +2 -0
- package/dist/particle-button/index.mjs.map +1 -0
- package/dist/perspective-text/index.js +2 -0
- package/dist/perspective-text/index.js.map +1 -0
- package/dist/perspective-text/index.mjs +2 -0
- package/dist/perspective-text/index.mjs.map +1 -0
- package/dist/radio/index.js +2 -0
- package/dist/radio/index.js.map +1 -0
- package/dist/radio/index.mjs +2 -0
- package/dist/radio/index.mjs.map +1 -0
- package/dist/reveal-text/index.js +2 -0
- package/dist/reveal-text/index.js.map +1 -0
- package/dist/reveal-text/index.mjs +2 -0
- package/dist/reveal-text/index.mjs.map +1 -0
- package/dist/select/index.js +2 -0
- package/dist/select/index.js.map +1 -0
- package/dist/select/index.mjs +2 -0
- package/dist/select/index.mjs.map +1 -0
- package/dist/sliced-text/index.js +2 -0
- package/dist/sliced-text/index.js.map +1 -0
- package/dist/sliced-text/index.mjs +2 -0
- package/dist/sliced-text/index.mjs.map +1 -0
- package/dist/split-text/index.js +2 -0
- package/dist/split-text/index.js.map +1 -0
- package/dist/split-text/index.mjs +2 -0
- package/dist/split-text/index.mjs.map +1 -0
- package/dist/stepper/index.js +2 -0
- package/dist/stepper/index.js.map +1 -0
- package/dist/stepper/index.mjs +2 -0
- package/dist/stepper/index.mjs.map +1 -0
- package/dist/tabs/index.js +2 -0
- package/dist/tabs/index.js.map +1 -0
- package/dist/tabs/index.mjs +2 -0
- package/dist/tabs/index.mjs.map +1 -0
- package/dist/terminal/index.js +2 -0
- package/dist/terminal/index.js.map +1 -0
- package/dist/terminal/index.mjs +2 -0
- package/dist/terminal/index.mjs.map +1 -0
- package/dist/textarea/index.js +2 -0
- package/dist/textarea/index.js.map +1 -0
- package/dist/textarea/index.mjs +2 -0
- package/dist/textarea/index.mjs.map +1 -0
- package/dist/toolbar/index.js +2 -0
- package/dist/toolbar/index.js.map +1 -0
- package/dist/toolbar/index.mjs +2 -0
- package/dist/toolbar/index.mjs.map +1 -0
- package/dist/tooltip-animated/index.js +2 -0
- package/dist/tooltip-animated/index.js.map +1 -0
- package/dist/tooltip-animated/index.mjs +2 -0
- package/dist/tooltip-animated/index.mjs.map +1 -0
- package/dist/tooltip-minimal/index.js +2 -0
- package/dist/tooltip-minimal/index.js.map +1 -0
- package/dist/tooltip-minimal/index.mjs +2 -0
- package/dist/tooltip-minimal/index.mjs.map +1 -0
- package/dist/true-focus/index.js +2 -0
- package/dist/true-focus/index.js.map +1 -0
- package/dist/true-focus/index.mjs +2 -0
- package/dist/true-focus/index.mjs.map +1 -0
- package/package.json +94 -275
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function i(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function c({text:t="Sliced Text",className:e="",containerClassName:n="",splitSpacing:a=2}){return jsxRuntime.jsxs(framerMotion.motion.div,{className:i("w-full text-center relative inline-block",n),whileHover:"hover",initial:"default",children:[jsxRuntime.jsx(framerMotion.motion.div,{className:i("absolute w-full text-4xl -ml-0.5",e),variants:{default:{clipPath:"inset(0 0 50% 0)",y:-a/2,opacity:1},hover:{clipPath:"inset(0 0 0 0)",y:0,opacity:0}},transition:{duration:.1},children:t}),jsxRuntime.jsx(framerMotion.motion.div,{className:i("absolute w-full text-4xl",e),variants:{default:{clipPath:"inset(50% 0 0 0)",y:a/2,opacity:1},hover:{clipPath:"inset(0 0 0 0)",y:0,opacity:1}},transition:{duration:.1},children:t}),jsxRuntime.jsx("div",{className:i("invisible text-4xl",e),children:t})]})}var x=c;exports.SlicedText=c;exports.default=x;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/sliced-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","SlicedText","text","className","containerClassName","splitSpacing","jsxs","motion","jsx","sliced_text_default"],"mappings":"qNAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCOO,SAASG,EAAW,CACzB,IAAA,CAAAC,CAAAA,CAAO,aAAA,CACP,UAAAC,CAAAA,CAAY,EAAA,CACZ,kBAAA,CAAAC,CAAAA,CAAqB,EAAA,CACrB,YAAA,CAAAC,CAAAA,CAAe,CACjB,EAAoB,CAClB,OACEC,eAAAA,CAACC,mBAAAA,CAAO,IAAP,CACC,SAAA,CAAWV,CAAAA,CAAG,0CAAA,CAA4CO,CAAkB,CAAA,CAC5E,UAAA,CAAW,OAAA,CACX,OAAA,CAAQ,UAER,QAAA,CAAA,CAAAI,cAAAA,CAACD,mBAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAWV,CAAAA,CAAG,kCAAA,CAAoCM,CAAS,EAC3D,QAAA,CAAU,CACR,OAAA,CAAS,CAAE,SAAU,kBAAA,CAAoB,CAAA,CAAG,CAACE,CAAAA,CAAe,CAAA,CAAG,OAAA,CAAS,CAAE,CAAA,CAC1E,MAAO,CAAE,QAAA,CAAU,gBAAA,CAAkB,CAAA,CAAG,EAAG,OAAA,CAAS,CAAE,CACxD,CAAA,CACA,WAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAE3B,SAAAH,CAAAA,CACH,CAAA,CACAM,cAAAA,CAACD,mBAAAA,CAAO,IAAP,CACC,SAAA,CAAWV,CAAAA,CAAG,0BAAA,CAA4BM,CAAS,CAAA,CACnD,QAAA,CAAU,CACR,OAAA,CAAS,CAAE,QAAA,CAAU,kBAAA,CAAoB,CAAA,CAAGE,CAAAA,CAAe,CAAA,CAAG,OAAA,CAAS,CAAE,CAAA,CACzE,MAAO,CAAE,QAAA,CAAU,gBAAA,CAAkB,CAAA,CAAG,EAAG,OAAA,CAAS,CAAE,CACxD,CAAA,CACA,WAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAE3B,SAAAH,CAAAA,CACH,CAAA,CACAM,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAWX,CAAAA,CAAG,oBAAA,CAAsBM,CAAS,CAAA,CAAI,SAAAD,CAAAA,CAAK,CAAA,CAAA,CAC7D,CAEJ,KAEOO,CAAAA,CAAQR","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 { motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SlicedTextProps {\r\n text: string;\r\n className?: string;\r\n containerClassName?: string;\r\n splitSpacing?: number;\r\n}\r\n\r\nexport function SlicedText({\r\n text = \"Sliced Text\",\r\n className = \"\",\r\n containerClassName = \"\",\r\n splitSpacing = 2,\r\n}: SlicedTextProps) {\r\n return (\r\n <motion.div\r\n className={cn(\"w-full text-center relative inline-block\", containerClassName)}\r\n whileHover=\"hover\"\r\n initial=\"default\"\r\n >\r\n <motion.div\r\n className={cn(\"absolute w-full text-4xl -ml-0.5\", className)}\r\n variants={{\r\n default: { clipPath: \"inset(0 0 50% 0)\", y: -splitSpacing / 2, opacity: 1 },\r\n hover: { clipPath: \"inset(0 0 0 0)\", y: 0, opacity: 0 },\r\n }}\r\n transition={{ duration: 0.1 }}\r\n >\r\n {text}\r\n </motion.div>\r\n <motion.div\r\n className={cn(\"absolute w-full text-4xl\", className)}\r\n variants={{\r\n default: { clipPath: \"inset(50% 0 0 0)\", y: splitSpacing / 2, opacity: 1 },\r\n hover: { clipPath: \"inset(0 0 0 0)\", y: 0, opacity: 1 },\r\n }}\r\n transition={{ duration: 0.1 }}\r\n >\r\n {text}\r\n </motion.div>\r\n <div className={cn(\"invisible text-4xl\", className)}>{text}</div>\r\n </motion.div>\r\n );\r\n}\r\n\r\nexport default SlicedText;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function i(...t){return twMerge(clsx(t))}function c({text:t="Sliced Text",className:e="",containerClassName:n="",splitSpacing:a=2}){return jsxs(motion.div,{className:i("w-full text-center relative inline-block",n),whileHover:"hover",initial:"default",children:[jsx(motion.div,{className:i("absolute w-full text-4xl -ml-0.5",e),variants:{default:{clipPath:"inset(0 0 50% 0)",y:-a/2,opacity:1},hover:{clipPath:"inset(0 0 0 0)",y:0,opacity:0}},transition:{duration:.1},children:t}),jsx(motion.div,{className:i("absolute w-full text-4xl",e),variants:{default:{clipPath:"inset(50% 0 0 0)",y:a/2,opacity:1},hover:{clipPath:"inset(0 0 0 0)",y:0,opacity:1}},transition:{duration:.1},children:t}),jsx("div",{className:i("invisible text-4xl",e),children:t})]})}var x=c;export{c as SlicedText,x as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/sliced-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","SlicedText","text","className","containerClassName","splitSpacing","jsxs","motion","jsx","sliced_text_default"],"mappings":"yIAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCOO,SAASG,EAAW,CACzB,IAAA,CAAAC,CAAAA,CAAO,aAAA,CACP,UAAAC,CAAAA,CAAY,EAAA,CACZ,kBAAA,CAAAC,CAAAA,CAAqB,EAAA,CACrB,YAAA,CAAAC,CAAAA,CAAe,CACjB,EAAoB,CAClB,OACEC,IAAAA,CAACC,MAAAA,CAAO,IAAP,CACC,SAAA,CAAWV,CAAAA,CAAG,0CAAA,CAA4CO,CAAkB,CAAA,CAC5E,UAAA,CAAW,OAAA,CACX,OAAA,CAAQ,UAER,QAAA,CAAA,CAAAI,GAAAA,CAACD,MAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAWV,CAAAA,CAAG,kCAAA,CAAoCM,CAAS,EAC3D,QAAA,CAAU,CACR,OAAA,CAAS,CAAE,SAAU,kBAAA,CAAoB,CAAA,CAAG,CAACE,CAAAA,CAAe,CAAA,CAAG,OAAA,CAAS,CAAE,CAAA,CAC1E,MAAO,CAAE,QAAA,CAAU,gBAAA,CAAkB,CAAA,CAAG,EAAG,OAAA,CAAS,CAAE,CACxD,CAAA,CACA,WAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAE3B,SAAAH,CAAAA,CACH,CAAA,CACAM,GAAAA,CAACD,MAAAA,CAAO,IAAP,CACC,SAAA,CAAWV,CAAAA,CAAG,0BAAA,CAA4BM,CAAS,CAAA,CACnD,QAAA,CAAU,CACR,OAAA,CAAS,CAAE,QAAA,CAAU,kBAAA,CAAoB,CAAA,CAAGE,CAAAA,CAAe,CAAA,CAAG,OAAA,CAAS,CAAE,CAAA,CACzE,MAAO,CAAE,QAAA,CAAU,gBAAA,CAAkB,CAAA,CAAG,EAAG,OAAA,CAAS,CAAE,CACxD,CAAA,CACA,WAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAE3B,SAAAH,CAAAA,CACH,CAAA,CACAM,GAAAA,CAAC,KAAA,CAAA,CAAI,UAAWX,CAAAA,CAAG,oBAAA,CAAsBM,CAAS,CAAA,CAAI,SAAAD,CAAAA,CAAK,CAAA,CAAA,CAC7D,CAEJ,KAEOO,CAAAA,CAAQR","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 { motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SlicedTextProps {\r\n text: string;\r\n className?: string;\r\n containerClassName?: string;\r\n splitSpacing?: number;\r\n}\r\n\r\nexport function SlicedText({\r\n text = \"Sliced Text\",\r\n className = \"\",\r\n containerClassName = \"\",\r\n splitSpacing = 2,\r\n}: SlicedTextProps) {\r\n return (\r\n <motion.div\r\n className={cn(\"w-full text-center relative inline-block\", containerClassName)}\r\n whileHover=\"hover\"\r\n initial=\"default\"\r\n >\r\n <motion.div\r\n className={cn(\"absolute w-full text-4xl -ml-0.5\", className)}\r\n variants={{\r\n default: { clipPath: \"inset(0 0 50% 0)\", y: -splitSpacing / 2, opacity: 1 },\r\n hover: { clipPath: \"inset(0 0 0 0)\", y: 0, opacity: 0 },\r\n }}\r\n transition={{ duration: 0.1 }}\r\n >\r\n {text}\r\n </motion.div>\r\n <motion.div\r\n className={cn(\"absolute w-full text-4xl\", className)}\r\n variants={{\r\n default: { clipPath: \"inset(50% 0 0 0)\", y: splitSpacing / 2, opacity: 1 },\r\n hover: { clipPath: \"inset(0 0 0 0)\", y: 0, opacity: 1 },\r\n }}\r\n transition={{ duration: 0.1 }}\r\n >\r\n {text}\r\n </motion.div>\r\n <div className={cn(\"invisible text-4xl\", className)}>{text}</div>\r\n </motion.div>\r\n );\r\n}\r\n\r\nexport default SlicedText;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var framerMotion=require('framer-motion'),react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function i(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function h({text:t,className:a="",delay:l=100,duration:c=.6,splitType:s="chars",textAlign:p="center"}){let[u,m]=react.useState(false),r=react.useRef(null);react.useEffect(()=>{if(!r.current)return;let e=new IntersectionObserver(([n])=>{n.isIntersecting&&(m(true),e.unobserve(r.current));},{threshold:.1,rootMargin:"-100px"});return e.observe(r.current),()=>e.disconnect()},[]);let f=s==="words"?t.split(" "):t.split("");return jsxRuntime.jsx("div",{ref:r,className:i("overflow-hidden",a),style:{textAlign:p},children:f.map((e,n)=>jsxRuntime.jsx(framerMotion.motion.span,{initial:{opacity:0,y:40},animate:u?{opacity:1,y:0}:{opacity:0,y:40},transition:{duration:c,delay:n*l/1e3,ease:"easeOut"},className:"inline-block",style:{marginRight:s==="words"?"0.25em":"0"},children:e===" "?"\xA0":e},n))})}var M=h;exports.SplitText=h;exports.default=M;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/split-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","SplitText","text","className","delay","duration","splitType","textAlign","inView","setInView","useState","ref","useRef","useEffect","observer","entry","elements","jsx","element","index","motion","split_text_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,sBAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCUO,SAASG,CAAAA,CAAU,CACxB,IAAA,CAAAC,EACA,SAAA,CAAAC,CAAAA,CAAY,GACZ,KAAA,CAAAC,CAAAA,CAAQ,IACR,QAAA,CAAAC,CAAAA,CAAW,EAAA,CACX,SAAA,CAAAC,CAAAA,CAAY,OAAA,CACZ,UAAAC,CAAAA,CAAY,QACd,EAAmB,CACjB,GAAM,CAACC,CAAAA,CAAQC,CAAS,CAAA,CAAIC,cAAAA,CAAS,KAAK,CAAA,CACpCC,EAAMC,YAAAA,CAAuB,IAAI,EAEvCC,eAAAA,CAAU,IAAM,CACd,GAAI,CAACF,CAAAA,CAAI,OAAA,CAAS,OAElB,IAAMG,EAAW,IAAI,oBAAA,CACnB,CAAC,CAACC,CAAK,IAAM,CACPA,CAAAA,CAAM,cAAA,GACRN,CAAAA,CAAU,IAAI,CAAA,CACdK,EAAS,SAAA,CAAUH,CAAAA,CAAI,OAAkB,CAAA,EAE7C,CAAA,CACA,CAAE,UAAW,EAAA,CAAK,UAAA,CAAY,QAAS,CACzC,CAAA,CAEA,OAAAG,EAAS,OAAA,CAAQH,CAAAA,CAAI,OAAO,CAAA,CACrB,IAAMG,EAAS,UAAA,EACxB,CAAA,CAAG,EAAE,CAAA,CAEL,IAAME,CAAAA,CAAWV,CAAAA,GAAc,QAAUJ,CAAAA,CAAK,KAAA,CAAM,GAAG,CAAA,CAAIA,CAAAA,CAAK,KAAA,CAAM,EAAE,CAAA,CAExE,OACEe,eAAC,KAAA,CAAA,CAAI,GAAA,CAAKN,EAAK,SAAA,CAAWd,CAAAA,CAAG,kBAAmBM,CAAS,CAAA,CAAG,KAAA,CAAO,CAAE,SAAA,CAAAI,CAAU,EAC5E,QAAA,CAAAS,CAAAA,CAAS,IAAI,CAACE,CAAAA,CAASC,IACtBF,cAAAA,CAACG,mBAAAA,CAAO,IAAA,CAAP,CAEC,OAAA,CAAS,CAAE,QAAS,CAAA,CAAG,CAAA,CAAG,EAAG,CAAA,CAC7B,OAAA,CAASZ,EAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,CAAE,CAAA,CAAI,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,EAAG,CAAA,CAC7D,WAAY,CAAE,QAAA,CAAAH,CAAAA,CAAU,KAAA,CAAQc,CAAAA,CAAQf,CAAAA,CAAS,IAAM,IAAA,CAAM,SAAU,EACvE,SAAA,CAAU,cAAA,CACV,MAAO,CAAE,WAAA,CAAaE,CAAAA,GAAc,OAAA,CAAU,QAAA,CAAW,GAAI,EAE5D,QAAA,CAAAY,CAAAA,GAAY,GAAA,CAAM,MAAA,CAAWA,CAAAA,CAAAA,CAPzBC,CAQP,CACD,CAAA,CACH,CAEJ,CAEA,IAAOE,CAAAA,CAAQpB","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 { motion } from \"framer-motion\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SplitTextProps {\r\n text: string;\r\n className?: string;\r\n delay?: number;\r\n duration?: number;\r\n splitType?: \"chars\" | \"words\";\r\n textAlign?: \"left\" | \"center\" | \"right\";\r\n}\r\n\r\nexport function SplitText({\r\n text,\r\n className = \"\",\r\n delay = 100,\r\n duration = 0.6,\r\n splitType = \"chars\",\r\n textAlign = \"center\",\r\n}: SplitTextProps) {\r\n const [inView, setInView] = useState(false);\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n if (!ref.current) return;\r\n\r\n const observer = new IntersectionObserver(\r\n ([entry]) => {\r\n if (entry.isIntersecting) {\r\n setInView(true);\r\n observer.unobserve(ref.current as Element);\r\n }\r\n },\r\n { threshold: 0.1, rootMargin: \"-100px\" }\r\n );\r\n\r\n observer.observe(ref.current);\r\n return () => observer.disconnect();\r\n }, []);\r\n\r\n const elements = splitType === \"words\" ? text.split(\" \") : text.split(\"\");\r\n\r\n return (\r\n <div ref={ref} className={cn(\"overflow-hidden\", className)} style={{ textAlign }}>\r\n {elements.map((element, index) => (\r\n <motion.span\r\n key={index}\r\n initial={{ opacity: 0, y: 40 }}\r\n animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}\r\n transition={{ duration, delay: (index * delay) / 1000, ease: \"easeOut\" }}\r\n className=\"inline-block\"\r\n style={{ marginRight: splitType === \"words\" ? \"0.25em\" : \"0\" }}\r\n >\r\n {element === \" \" ? \"\\u00A0\" : element}\r\n </motion.span>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nexport default SplitText;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {useState,useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function i(...t){return twMerge(clsx(t))}function h({text:t,className:a="",delay:l=100,duration:c=.6,splitType:s="chars",textAlign:p="center"}){let[u,m]=useState(false),r=useRef(null);useEffect(()=>{if(!r.current)return;let e=new IntersectionObserver(([n])=>{n.isIntersecting&&(m(true),e.unobserve(r.current));},{threshold:.1,rootMargin:"-100px"});return e.observe(r.current),()=>e.disconnect()},[]);let f=s==="words"?t.split(" "):t.split("");return jsx("div",{ref:r,className:i("overflow-hidden",a),style:{textAlign:p},children:f.map((e,n)=>jsx(motion.span,{initial:{opacity:0,y:40},animate:u?{opacity:1,y:0}:{opacity:0,y:40},transition:{duration:c,delay:n*l/1e3,ease:"easeOut"},className:"inline-block",style:{marginRight:s==="words"?"0.25em":"0"},children:e===" "?"\xA0":e},n))})}var M=h;export{h as SplitText,M as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/split-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","SplitText","text","className","delay","duration","splitType","textAlign","inView","setInView","useState","ref","useRef","useEffect","observer","entry","elements","jsx","element","index","motion","split_text_default"],"mappings":"kLAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,QAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCUO,SAASG,CAAAA,CAAU,CACxB,IAAA,CAAAC,EACA,SAAA,CAAAC,CAAAA,CAAY,GACZ,KAAA,CAAAC,CAAAA,CAAQ,IACR,QAAA,CAAAC,CAAAA,CAAW,EAAA,CACX,SAAA,CAAAC,CAAAA,CAAY,OAAA,CACZ,UAAAC,CAAAA,CAAY,QACd,EAAmB,CACjB,GAAM,CAACC,CAAAA,CAAQC,CAAS,CAAA,CAAIC,QAAAA,CAAS,KAAK,CAAA,CACpCC,EAAMC,MAAAA,CAAuB,IAAI,EAEvCC,SAAAA,CAAU,IAAM,CACd,GAAI,CAACF,CAAAA,CAAI,OAAA,CAAS,OAElB,IAAMG,EAAW,IAAI,oBAAA,CACnB,CAAC,CAACC,CAAK,IAAM,CACPA,CAAAA,CAAM,cAAA,GACRN,CAAAA,CAAU,IAAI,CAAA,CACdK,EAAS,SAAA,CAAUH,CAAAA,CAAI,OAAkB,CAAA,EAE7C,CAAA,CACA,CAAE,UAAW,EAAA,CAAK,UAAA,CAAY,QAAS,CACzC,CAAA,CAEA,OAAAG,EAAS,OAAA,CAAQH,CAAAA,CAAI,OAAO,CAAA,CACrB,IAAMG,EAAS,UAAA,EACxB,CAAA,CAAG,EAAE,CAAA,CAEL,IAAME,CAAAA,CAAWV,CAAAA,GAAc,QAAUJ,CAAAA,CAAK,KAAA,CAAM,GAAG,CAAA,CAAIA,CAAAA,CAAK,KAAA,CAAM,EAAE,CAAA,CAExE,OACEe,IAAC,KAAA,CAAA,CAAI,GAAA,CAAKN,EAAK,SAAA,CAAWd,CAAAA,CAAG,kBAAmBM,CAAS,CAAA,CAAG,KAAA,CAAO,CAAE,SAAA,CAAAI,CAAU,EAC5E,QAAA,CAAAS,CAAAA,CAAS,IAAI,CAACE,CAAAA,CAASC,IACtBF,GAAAA,CAACG,MAAAA,CAAO,IAAA,CAAP,CAEC,OAAA,CAAS,CAAE,QAAS,CAAA,CAAG,CAAA,CAAG,EAAG,CAAA,CAC7B,OAAA,CAASZ,EAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,CAAE,CAAA,CAAI,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,EAAG,CAAA,CAC7D,WAAY,CAAE,QAAA,CAAAH,CAAAA,CAAU,KAAA,CAAQc,CAAAA,CAAQf,CAAAA,CAAS,IAAM,IAAA,CAAM,SAAU,EACvE,SAAA,CAAU,cAAA,CACV,MAAO,CAAE,WAAA,CAAaE,CAAAA,GAAc,OAAA,CAAU,QAAA,CAAW,GAAI,EAE5D,QAAA,CAAAY,CAAAA,GAAY,GAAA,CAAM,MAAA,CAAWA,CAAAA,CAAAA,CAPzBC,CAQP,CACD,CAAA,CACH,CAEJ,CAEA,IAAOE,CAAAA,CAAQpB","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 { motion } from \"framer-motion\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SplitTextProps {\r\n text: string;\r\n className?: string;\r\n delay?: number;\r\n duration?: number;\r\n splitType?: \"chars\" | \"words\";\r\n textAlign?: \"left\" | \"center\" | \"right\";\r\n}\r\n\r\nexport function SplitText({\r\n text,\r\n className = \"\",\r\n delay = 100,\r\n duration = 0.6,\r\n splitType = \"chars\",\r\n textAlign = \"center\",\r\n}: SplitTextProps) {\r\n const [inView, setInView] = useState(false);\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n if (!ref.current) return;\r\n\r\n const observer = new IntersectionObserver(\r\n ([entry]) => {\r\n if (entry.isIntersecting) {\r\n setInView(true);\r\n observer.unobserve(ref.current as Element);\r\n }\r\n },\r\n { threshold: 0.1, rootMargin: \"-100px\" }\r\n );\r\n\r\n observer.observe(ref.current);\r\n return () => observer.disconnect();\r\n }, []);\r\n\r\n const elements = splitType === \"words\" ? text.split(\" \") : text.split(\"\");\r\n\r\n return (\r\n <div ref={ref} className={cn(\"overflow-hidden\", className)} style={{ textAlign }}>\r\n {elements.map((element, index) => (\r\n <motion.span\r\n key={index}\r\n initial={{ opacity: 0, y: 40 }}\r\n animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}\r\n transition={{ duration, delay: (index * delay) / 1000, ease: \"easeOut\" }}\r\n className=\"inline-block\"\r\n style={{ marginRight: splitType === \"words\" ? \"0.25em\" : \"0\" }}\r\n >\r\n {element === \" \" ? \"\\u00A0\" : element}\r\n </motion.span>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nexport default SplitText;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var M=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var M__default=/*#__PURE__*/_interopDefault(M);function u(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function Y({children:e,initialStep:r=1,onStepChange:a=()=>{},onFinalStepCompleted:i=()=>{},backButtonText:o="Back",nextButtonText:s="Continue",disableStepIndicators:b=false,className:y,...k}){let[n,w]=M.useState(r),[P,l]=M.useState(0),f=M.Children.toArray(e),c=f.length,g=n>c,h=n===c,p=d=>{w(d),d>c?i():a(d);},R=()=>{n>1&&(l(-1),p(n-1));},L=()=>{h||(l(1),p(n+1));},T=()=>{l(1),p(c+1);};return jsxRuntime.jsxs("div",{className:u("w-full max-w-md mx-auto",y),...k,children:[jsxRuntime.jsx("div",{className:"flex items-center justify-between mb-8",children:f.map((d,C)=>{let v=C+1,z=C<c-1;return jsxRuntime.jsxs(M__default.default.Fragment,{children:[jsxRuntime.jsx(D,{step:v,disableStepIndicators:b,currentStep:n,onClickStep:N=>{l(N>n?1:-1),p(N);}}),z&&jsxRuntime.jsx(F,{isComplete:n>v})]},v)})}),jsxRuntime.jsx(E,{isCompleted:g,currentStep:n,direction:P,children:f[n-1]}),!g&&jsxRuntime.jsxs("div",{className:u("flex mt-8",n!==1?"justify-between":"justify-end"),children:[n!==1&&jsxRuntime.jsx("button",{onClick:R,className:"px-4 py-2 text-sm font-medium text-zinc-400 hover:text-white transition-colors rounded-lg hover:bg-zinc-800",children:o}),jsxRuntime.jsx("button",{onClick:h?T:L,className:"px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors",children:h?"Complete":s})]})]})}function E({isCompleted:e,currentStep:r,direction:a,children:i}){let[o,s]=M.useState(0);return jsxRuntime.jsx(framerMotion.motion.div,{className:"relative overflow-hidden",animate:{height:e?0:o},transition:{type:"spring",duration:.4},children:jsxRuntime.jsx(framerMotion.AnimatePresence,{initial:false,mode:"sync",custom:a,children:!e&&jsxRuntime.jsx(I,{direction:a,onHeightReady:b=>s(b),children:i},r)})})}function I({children:e,direction:r,onHeightReady:a}){let i=M.useRef(null);M.useLayoutEffect(()=>{i.current&&a(i.current.offsetHeight);},[e,a]);let o={enter:s=>({x:s>=0?"-100%":"100%",opacity:0}),center:{x:"0%",opacity:1},exit:s=>({x:s>=0?"50%":"-50%",opacity:0})};return jsxRuntime.jsx(framerMotion.motion.div,{ref:i,custom:r,variants:o,initial:"enter",animate:"center",exit:"exit",transition:{duration:.4},className:"absolute left-0 right-0 top-0",children:e})}function Z({children:e}){return jsxRuntime.jsx("div",{className:"p-4 rounded-lg bg-zinc-900 border border-zinc-800",children:e})}function D({step:e,currentStep:r,onClickStep:a,disableStepIndicators:i}){let o=r===e?"active":r<e?"inactive":"complete",s=()=>{e!==r&&!i&&a(e);};return jsxRuntime.jsx(framerMotion.motion.button,{onClick:s,disabled:i,className:u("relative flex items-center justify-center w-10 h-10 rounded-full text-sm font-medium transition-all",o==="inactive"&&"bg-zinc-800 text-zinc-500 border border-zinc-700",o==="active"&&"bg-white text-black border-2 border-white",o==="complete"&&"bg-white text-black border-2 border-white",!i&&"cursor-pointer hover:opacity-80"),animate:o,initial:false,children:o==="complete"?jsxRuntime.jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2.5,children:jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})}):jsxRuntime.jsx("span",{children:e})})}function F({isComplete:e}){return jsxRuntime.jsx("div",{className:"flex-1 h-[2px] mx-2 bg-zinc-800 rounded-full overflow-hidden",children:jsxRuntime.jsx(framerMotion.motion.div,{className:"h-full bg-white rounded-full",initial:{width:0},animate:{width:e?"100%":"0%"},transition:{duration:.4}})})}exports.Step=Z;exports.Stepper=Y;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/stepper/index.tsx"],"names":["cn","inputs","twMerge","clsx","Stepper","children","initialStep","onStepChange","onFinalStepCompleted","backButtonText","nextButtonText","disableStepIndicators","className","rest","currentStep","setCurrentStep","useState","direction","setDirection","stepsArray","Children","totalSteps","isCompleted","isLastStep","updateStep","newStep","handleBack","handleNext","handleComplete","jsxs","jsx","_","index","stepNumber","isNotLastStep","React","StepIndicator","clicked","StepConnector","StepContentWrapper","parentHeight","setParentHeight","motion","AnimatePresence","SlideTransition","h","onHeightReady","containerRef","useRef","useLayoutEffect","stepVariants","dir","Step","step","onClickStep","status","handleClick","isComplete"],"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 React, { useState, Children, useRef, useLayoutEffect, HTMLAttributes, ReactNode } from \"react\";\r\nimport { motion, AnimatePresence, Variants } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\r\n children: ReactNode;\r\n initialStep?: number;\r\n onStepChange?: (step: number) => void;\r\n onFinalStepCompleted?: () => void;\r\n backButtonText?: string;\r\n nextButtonText?: string;\r\n disableStepIndicators?: boolean;\r\n}\r\n\r\nexport function Stepper({\r\n children,\r\n initialStep = 1,\r\n onStepChange = () => {},\r\n onFinalStepCompleted = () => {},\r\n backButtonText = \"Back\",\r\n nextButtonText = \"Continue\",\r\n disableStepIndicators = false,\r\n className,\r\n ...rest\r\n}: StepperProps) {\r\n const [currentStep, setCurrentStep] = useState<number>(initialStep);\r\n const [direction, setDirection] = useState<number>(0);\r\n const stepsArray = Children.toArray(children);\r\n const totalSteps = stepsArray.length;\r\n const isCompleted = currentStep > totalSteps;\r\n const isLastStep = currentStep === totalSteps;\r\n\r\n const updateStep = (newStep: number) => {\r\n setCurrentStep(newStep);\r\n if (newStep > totalSteps) {\r\n onFinalStepCompleted();\r\n } else {\r\n onStepChange(newStep);\r\n }\r\n };\r\n\r\n const handleBack = () => {\r\n if (currentStep > 1) {\r\n setDirection(-1);\r\n updateStep(currentStep - 1);\r\n }\r\n };\r\n\r\n const handleNext = () => {\r\n if (!isLastStep) {\r\n setDirection(1);\r\n updateStep(currentStep + 1);\r\n }\r\n };\r\n\r\n const handleComplete = () => {\r\n setDirection(1);\r\n updateStep(totalSteps + 1);\r\n };\r\n\r\n return (\r\n <div className={cn(\"w-full max-w-md mx-auto\", className)} {...rest}>\r\n <div className=\"flex items-center justify-between mb-8\">\r\n {stepsArray.map((_, index) => {\r\n const stepNumber = index + 1;\r\n const isNotLastStep = index < totalSteps - 1;\r\n return (\r\n <React.Fragment key={stepNumber}>\r\n <StepIndicator\r\n step={stepNumber}\r\n disableStepIndicators={disableStepIndicators}\r\n currentStep={currentStep}\r\n onClickStep={(clicked) => {\r\n setDirection(clicked > currentStep ? 1 : -1);\r\n updateStep(clicked);\r\n }}\r\n />\r\n {isNotLastStep && <StepConnector isComplete={currentStep > stepNumber} />}\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n\r\n <StepContentWrapper isCompleted={isCompleted} currentStep={currentStep} direction={direction}>\r\n {stepsArray[currentStep - 1]}\r\n </StepContentWrapper>\r\n\r\n {!isCompleted && (\r\n <div className={cn(\"flex mt-8\", currentStep !== 1 ? \"justify-between\" : \"justify-end\")}>\r\n {currentStep !== 1 && (\r\n <button\r\n onClick={handleBack}\r\n className=\"px-4 py-2 text-sm font-medium text-zinc-400 hover:text-white transition-colors rounded-lg hover:bg-zinc-800\"\r\n >\r\n {backButtonText}\r\n </button>\r\n )}\r\n <button\r\n onClick={isLastStep ? handleComplete : handleNext}\r\n className=\"px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors\"\r\n >\r\n {isLastStep ? \"Complete\" : nextButtonText}\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\ninterface StepContentWrapperProps {\r\n isCompleted: boolean;\r\n currentStep: number;\r\n direction: number;\r\n children: ReactNode;\r\n}\r\n\r\nfunction StepContentWrapper({ isCompleted, currentStep, direction, children }: StepContentWrapperProps) {\r\n const [parentHeight, setParentHeight] = useState<number>(0);\r\n\r\n return (\r\n <motion.div\r\n className=\"relative overflow-hidden\"\r\n animate={{ height: isCompleted ? 0 : parentHeight }}\r\n transition={{ type: \"spring\", duration: 0.4 }}\r\n >\r\n <AnimatePresence initial={false} mode=\"sync\" custom={direction}>\r\n {!isCompleted && (\r\n <SlideTransition key={currentStep} direction={direction} onHeightReady={(h) => setParentHeight(h)}>\r\n {children}\r\n </SlideTransition>\r\n )}\r\n </AnimatePresence>\r\n </motion.div>\r\n );\r\n}\r\n\r\ninterface SlideTransitionProps {\r\n children: ReactNode;\r\n direction: number;\r\n onHeightReady: (h: number) => void;\r\n}\r\n\r\nfunction SlideTransition({ children, direction, onHeightReady }: SlideTransitionProps) {\r\n const containerRef = useRef<HTMLDivElement | null>(null);\r\n\r\n useLayoutEffect(() => {\r\n if (containerRef.current) {\r\n onHeightReady(containerRef.current.offsetHeight);\r\n }\r\n }, [children, onHeightReady]);\r\n\r\n const stepVariants: Variants = {\r\n enter: (dir: number) => ({ x: dir >= 0 ? \"-100%\" : \"100%\", opacity: 0 }),\r\n center: { x: \"0%\", opacity: 1 },\r\n exit: (dir: number) => ({ x: dir >= 0 ? \"50%\" : \"-50%\", opacity: 0 }),\r\n };\r\n\r\n return (\r\n <motion.div\r\n ref={containerRef}\r\n custom={direction}\r\n variants={stepVariants}\r\n initial=\"enter\"\r\n animate=\"center\"\r\n exit=\"exit\"\r\n transition={{ duration: 0.4 }}\r\n className=\"absolute left-0 right-0 top-0\"\r\n >\r\n {children}\r\n </motion.div>\r\n );\r\n}\r\n\r\ninterface StepProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport function Step({ children }: StepProps): React.JSX.Element {\r\n return <div className=\"p-4 rounded-lg bg-zinc-900 border border-zinc-800\">{children}</div>;\r\n}\r\n\r\ninterface StepIndicatorProps {\r\n step: number;\r\n currentStep: number;\r\n onClickStep: (step: number) => void;\r\n disableStepIndicators?: boolean;\r\n}\r\n\r\nfunction StepIndicator({ step, currentStep, onClickStep, disableStepIndicators }: StepIndicatorProps) {\r\n const status = currentStep === step ? \"active\" : currentStep < step ? \"inactive\" : \"complete\";\r\n\r\n const handleClick = () => {\r\n if (step !== currentStep && !disableStepIndicators) {\r\n onClickStep(step);\r\n }\r\n };\r\n\r\n return (\r\n <motion.button\r\n onClick={handleClick}\r\n disabled={disableStepIndicators}\r\n className={cn(\r\n \"relative flex items-center justify-center w-10 h-10 rounded-full text-sm font-medium transition-all\",\r\n status === \"inactive\" && \"bg-zinc-800 text-zinc-500 border border-zinc-700\",\r\n status === \"active\" && \"bg-white text-black border-2 border-white\",\r\n status === \"complete\" && \"bg-white text-black border-2 border-white\",\r\n !disableStepIndicators && \"cursor-pointer hover:opacity-80\"\r\n )}\r\n animate={status}\r\n initial={false}\r\n >\r\n {status === \"complete\" ? (\r\n <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5}>\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\r\n </svg>\r\n ) : (\r\n <span>{step}</span>\r\n )}\r\n </motion.button>\r\n );\r\n}\r\n\r\ninterface StepConnectorProps {\r\n isComplete: boolean;\r\n}\r\n\r\nfunction StepConnector({ isComplete }: StepConnectorProps) {\r\n return (\r\n <div className=\"flex-1 h-[2px] mx-2 bg-zinc-800 rounded-full overflow-hidden\">\r\n <motion.div\r\n className=\"h-full bg-white rounded-full\"\r\n initial={{ width: 0 }}\r\n animate={{ width: isComplete ? \"100%\" : \"0%\" }}\r\n transition={{ duration: 0.4 }}\r\n />\r\n </div>\r\n );\r\n}\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import M,{useState,Children,useRef,useLayoutEffect}from'react';import {motion,AnimatePresence}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function u(...e){return twMerge(clsx(e))}function Y({children:e,initialStep:r=1,onStepChange:a=()=>{},onFinalStepCompleted:i=()=>{},backButtonText:o="Back",nextButtonText:s="Continue",disableStepIndicators:b=false,className:y,...k}){let[n,w]=useState(r),[P,l]=useState(0),f=Children.toArray(e),c=f.length,g=n>c,h=n===c,p=d=>{w(d),d>c?i():a(d);},R=()=>{n>1&&(l(-1),p(n-1));},L=()=>{h||(l(1),p(n+1));},T=()=>{l(1),p(c+1);};return jsxs("div",{className:u("w-full max-w-md mx-auto",y),...k,children:[jsx("div",{className:"flex items-center justify-between mb-8",children:f.map((d,C)=>{let v=C+1,z=C<c-1;return jsxs(M.Fragment,{children:[jsx(D,{step:v,disableStepIndicators:b,currentStep:n,onClickStep:N=>{l(N>n?1:-1),p(N);}}),z&&jsx(F,{isComplete:n>v})]},v)})}),jsx(E,{isCompleted:g,currentStep:n,direction:P,children:f[n-1]}),!g&&jsxs("div",{className:u("flex mt-8",n!==1?"justify-between":"justify-end"),children:[n!==1&&jsx("button",{onClick:R,className:"px-4 py-2 text-sm font-medium text-zinc-400 hover:text-white transition-colors rounded-lg hover:bg-zinc-800",children:o}),jsx("button",{onClick:h?T:L,className:"px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors",children:h?"Complete":s})]})]})}function E({isCompleted:e,currentStep:r,direction:a,children:i}){let[o,s]=useState(0);return jsx(motion.div,{className:"relative overflow-hidden",animate:{height:e?0:o},transition:{type:"spring",duration:.4},children:jsx(AnimatePresence,{initial:false,mode:"sync",custom:a,children:!e&&jsx(I,{direction:a,onHeightReady:b=>s(b),children:i},r)})})}function I({children:e,direction:r,onHeightReady:a}){let i=useRef(null);useLayoutEffect(()=>{i.current&&a(i.current.offsetHeight);},[e,a]);let o={enter:s=>({x:s>=0?"-100%":"100%",opacity:0}),center:{x:"0%",opacity:1},exit:s=>({x:s>=0?"50%":"-50%",opacity:0})};return jsx(motion.div,{ref:i,custom:r,variants:o,initial:"enter",animate:"center",exit:"exit",transition:{duration:.4},className:"absolute left-0 right-0 top-0",children:e})}function Z({children:e}){return jsx("div",{className:"p-4 rounded-lg bg-zinc-900 border border-zinc-800",children:e})}function D({step:e,currentStep:r,onClickStep:a,disableStepIndicators:i}){let o=r===e?"active":r<e?"inactive":"complete",s=()=>{e!==r&&!i&&a(e);};return jsx(motion.button,{onClick:s,disabled:i,className:u("relative flex items-center justify-center w-10 h-10 rounded-full text-sm font-medium transition-all",o==="inactive"&&"bg-zinc-800 text-zinc-500 border border-zinc-700",o==="active"&&"bg-white text-black border-2 border-white",o==="complete"&&"bg-white text-black border-2 border-white",!i&&"cursor-pointer hover:opacity-80"),animate:o,initial:false,children:o==="complete"?jsx("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2.5,children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})}):jsx("span",{children:e})})}function F({isComplete:e}){return jsx("div",{className:"flex-1 h-[2px] mx-2 bg-zinc-800 rounded-full overflow-hidden",children:jsx(motion.div,{className:"h-full bg-white rounded-full",initial:{width:0},animate:{width:e?"100%":"0%"},transition:{duration:.4}})})}export{Z as Step,Y as Stepper};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/stepper/index.tsx"],"names":["cn","inputs","twMerge","clsx","Stepper","children","initialStep","onStepChange","onFinalStepCompleted","backButtonText","nextButtonText","disableStepIndicators","className","rest","currentStep","setCurrentStep","useState","direction","setDirection","stepsArray","Children","totalSteps","isCompleted","isLastStep","updateStep","newStep","handleBack","handleNext","handleComplete","jsxs","jsx","_","index","stepNumber","isNotLastStep","React","StepIndicator","clicked","StepConnector","StepContentWrapper","parentHeight","setParentHeight","motion","AnimatePresence","SlideTransition","h","onHeightReady","containerRef","useRef","useLayoutEffect","stepVariants","dir","Step","step","onClickStep","status","handleClick","isComplete"],"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, Children, useRef, useLayoutEffect, HTMLAttributes, ReactNode } from \"react\";\r\nimport { motion, AnimatePresence, Variants } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\r\n children: ReactNode;\r\n initialStep?: number;\r\n onStepChange?: (step: number) => void;\r\n onFinalStepCompleted?: () => void;\r\n backButtonText?: string;\r\n nextButtonText?: string;\r\n disableStepIndicators?: boolean;\r\n}\r\n\r\nexport function Stepper({\r\n children,\r\n initialStep = 1,\r\n onStepChange = () => {},\r\n onFinalStepCompleted = () => {},\r\n backButtonText = \"Back\",\r\n nextButtonText = \"Continue\",\r\n disableStepIndicators = false,\r\n className,\r\n ...rest\r\n}: StepperProps) {\r\n const [currentStep, setCurrentStep] = useState<number>(initialStep);\r\n const [direction, setDirection] = useState<number>(0);\r\n const stepsArray = Children.toArray(children);\r\n const totalSteps = stepsArray.length;\r\n const isCompleted = currentStep > totalSteps;\r\n const isLastStep = currentStep === totalSteps;\r\n\r\n const updateStep = (newStep: number) => {\r\n setCurrentStep(newStep);\r\n if (newStep > totalSteps) {\r\n onFinalStepCompleted();\r\n } else {\r\n onStepChange(newStep);\r\n }\r\n };\r\n\r\n const handleBack = () => {\r\n if (currentStep > 1) {\r\n setDirection(-1);\r\n updateStep(currentStep - 1);\r\n }\r\n };\r\n\r\n const handleNext = () => {\r\n if (!isLastStep) {\r\n setDirection(1);\r\n updateStep(currentStep + 1);\r\n }\r\n };\r\n\r\n const handleComplete = () => {\r\n setDirection(1);\r\n updateStep(totalSteps + 1);\r\n };\r\n\r\n return (\r\n <div className={cn(\"w-full max-w-md mx-auto\", className)} {...rest}>\r\n <div className=\"flex items-center justify-between mb-8\">\r\n {stepsArray.map((_, index) => {\r\n const stepNumber = index + 1;\r\n const isNotLastStep = index < totalSteps - 1;\r\n return (\r\n <React.Fragment key={stepNumber}>\r\n <StepIndicator\r\n step={stepNumber}\r\n disableStepIndicators={disableStepIndicators}\r\n currentStep={currentStep}\r\n onClickStep={(clicked) => {\r\n setDirection(clicked > currentStep ? 1 : -1);\r\n updateStep(clicked);\r\n }}\r\n />\r\n {isNotLastStep && <StepConnector isComplete={currentStep > stepNumber} />}\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n\r\n <StepContentWrapper isCompleted={isCompleted} currentStep={currentStep} direction={direction}>\r\n {stepsArray[currentStep - 1]}\r\n </StepContentWrapper>\r\n\r\n {!isCompleted && (\r\n <div className={cn(\"flex mt-8\", currentStep !== 1 ? \"justify-between\" : \"justify-end\")}>\r\n {currentStep !== 1 && (\r\n <button\r\n onClick={handleBack}\r\n className=\"px-4 py-2 text-sm font-medium text-zinc-400 hover:text-white transition-colors rounded-lg hover:bg-zinc-800\"\r\n >\r\n {backButtonText}\r\n </button>\r\n )}\r\n <button\r\n onClick={isLastStep ? handleComplete : handleNext}\r\n className=\"px-4 py-2 text-sm font-medium bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors\"\r\n >\r\n {isLastStep ? \"Complete\" : nextButtonText}\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\ninterface StepContentWrapperProps {\r\n isCompleted: boolean;\r\n currentStep: number;\r\n direction: number;\r\n children: ReactNode;\r\n}\r\n\r\nfunction StepContentWrapper({ isCompleted, currentStep, direction, children }: StepContentWrapperProps) {\r\n const [parentHeight, setParentHeight] = useState<number>(0);\r\n\r\n return (\r\n <motion.div\r\n className=\"relative overflow-hidden\"\r\n animate={{ height: isCompleted ? 0 : parentHeight }}\r\n transition={{ type: \"spring\", duration: 0.4 }}\r\n >\r\n <AnimatePresence initial={false} mode=\"sync\" custom={direction}>\r\n {!isCompleted && (\r\n <SlideTransition key={currentStep} direction={direction} onHeightReady={(h) => setParentHeight(h)}>\r\n {children}\r\n </SlideTransition>\r\n )}\r\n </AnimatePresence>\r\n </motion.div>\r\n );\r\n}\r\n\r\ninterface SlideTransitionProps {\r\n children: ReactNode;\r\n direction: number;\r\n onHeightReady: (h: number) => void;\r\n}\r\n\r\nfunction SlideTransition({ children, direction, onHeightReady }: SlideTransitionProps) {\r\n const containerRef = useRef<HTMLDivElement | null>(null);\r\n\r\n useLayoutEffect(() => {\r\n if (containerRef.current) {\r\n onHeightReady(containerRef.current.offsetHeight);\r\n }\r\n }, [children, onHeightReady]);\r\n\r\n const stepVariants: Variants = {\r\n enter: (dir: number) => ({ x: dir >= 0 ? \"-100%\" : \"100%\", opacity: 0 }),\r\n center: { x: \"0%\", opacity: 1 },\r\n exit: (dir: number) => ({ x: dir >= 0 ? \"50%\" : \"-50%\", opacity: 0 }),\r\n };\r\n\r\n return (\r\n <motion.div\r\n ref={containerRef}\r\n custom={direction}\r\n variants={stepVariants}\r\n initial=\"enter\"\r\n animate=\"center\"\r\n exit=\"exit\"\r\n transition={{ duration: 0.4 }}\r\n className=\"absolute left-0 right-0 top-0\"\r\n >\r\n {children}\r\n </motion.div>\r\n );\r\n}\r\n\r\ninterface StepProps {\r\n children: ReactNode;\r\n}\r\n\r\nexport function Step({ children }: StepProps): React.JSX.Element {\r\n return <div className=\"p-4 rounded-lg bg-zinc-900 border border-zinc-800\">{children}</div>;\r\n}\r\n\r\ninterface StepIndicatorProps {\r\n step: number;\r\n currentStep: number;\r\n onClickStep: (step: number) => void;\r\n disableStepIndicators?: boolean;\r\n}\r\n\r\nfunction StepIndicator({ step, currentStep, onClickStep, disableStepIndicators }: StepIndicatorProps) {\r\n const status = currentStep === step ? \"active\" : currentStep < step ? \"inactive\" : \"complete\";\r\n\r\n const handleClick = () => {\r\n if (step !== currentStep && !disableStepIndicators) {\r\n onClickStep(step);\r\n }\r\n };\r\n\r\n return (\r\n <motion.button\r\n onClick={handleClick}\r\n disabled={disableStepIndicators}\r\n className={cn(\r\n \"relative flex items-center justify-center w-10 h-10 rounded-full text-sm font-medium transition-all\",\r\n status === \"inactive\" && \"bg-zinc-800 text-zinc-500 border border-zinc-700\",\r\n status === \"active\" && \"bg-white text-black border-2 border-white\",\r\n status === \"complete\" && \"bg-white text-black border-2 border-white\",\r\n !disableStepIndicators && \"cursor-pointer hover:opacity-80\"\r\n )}\r\n animate={status}\r\n initial={false}\r\n >\r\n {status === \"complete\" ? (\r\n <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2.5}>\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\r\n </svg>\r\n ) : (\r\n <span>{step}</span>\r\n )}\r\n </motion.button>\r\n );\r\n}\r\n\r\ninterface StepConnectorProps {\r\n isComplete: boolean;\r\n}\r\n\r\nfunction StepConnector({ isComplete }: StepConnectorProps) {\r\n return (\r\n <div className=\"flex-1 h-[2px] mx-2 bg-zinc-800 rounded-full overflow-hidden\">\r\n <motion.div\r\n className=\"h-full bg-white rounded-full\"\r\n initial={{ width: 0 }}\r\n animate={{ width: isComplete ? \"100%\" : \"0%\" }}\r\n transition={{ duration: 0.4 }}\r\n />\r\n </div>\r\n );\r\n}\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'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(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function f({tabs:t,className:s,defaultIndex:c=0}){let[e,l]=react.useState(c);return jsxRuntime.jsxs("div",{className:i("w-full",s),children:[jsxRuntime.jsx("div",{className:"relative flex border-b border-zinc-200 dark:border-zinc-800",children:t.map((m,a)=>jsxRuntime.jsxs("button",{onClick:()=>l(a),className:i("px-4 py-2 text-sm font-medium transition-colors relative",e===a?"text-zinc-900 dark:text-white":"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"),children:[m.label,e===a&&jsxRuntime.jsx(framerMotion.motion.div,{layoutId:"activeTab",className:"absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-900 dark:bg-white",transition:{type:"spring",stiffness:500,damping:30}})]},a))}),jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.2},className:"py-4",children:t[e].content},e)]})}var z=f;exports.Tabs=f;exports.default=z;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/tabs/index.tsx"],"names":["cn","inputs","twMerge","clsx","Tabs","tabs","className","defaultIndex","activeIndex","setActiveIndex","useState","jsxs","jsx","tab","index","motion","tabs_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCYO,SAASG,EAAK,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,CAAAA,CAAW,YAAA,CAAAC,CAAAA,CAAe,CAAE,EAAc,CACrE,GAAM,CAACC,CAAAA,CAAaC,CAAc,CAAA,CAAIC,cAAAA,CAASH,CAAY,CAAA,CAE3D,OACEI,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWX,CAAAA,CAAG,QAAA,CAAUM,CAAS,CAAA,CACpC,QAAA,CAAA,CAAAM,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,6DAAA,CACZ,QAAA,CAAAP,EAAK,GAAA,CAAI,CAACQ,CAAAA,CAAKC,CAAAA,GACdH,gBAAC,QAAA,CAAA,CAEC,OAAA,CAAS,IAAMF,CAAAA,CAAeK,CAAK,CAAA,CACnC,SAAA,CAAWd,CAAAA,CACT,2DACAQ,CAAAA,GAAgBM,CAAAA,CACZ,+BAAA,CACA,+EACN,EAEC,QAAA,CAAA,CAAAD,CAAAA,CAAI,KAAA,CACJL,CAAAA,GAAgBM,GACfF,cAAAA,CAACG,mBAAAA,CAAO,GAAA,CAAP,CACC,QAAA,CAAS,WAAA,CACT,SAAA,CAAU,kEAAA,CACV,WAAY,CAAE,IAAA,CAAM,QAAA,CAAU,SAAA,CAAW,IAAK,OAAA,CAAS,EAAG,CAAA,CAC5D,CAAA,CAAA,CAAA,CAfGD,CAiBP,CACD,CAAA,CACH,CAAA,CACAF,cAAAA,CAACG,mBAAAA,CAAO,GAAA,CAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,EAAG,EAC7B,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,CAAE,CAAA,CAC5B,UAAA,CAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAC5B,SAAA,CAAU,OAET,QAAA,CAAAV,CAAAA,CAAKG,CAAW,CAAA,CAAE,SANdA,CAOP,CAAA,CAAA,CACF,CAEJ,KAEOQ,CAAAA,CAAQZ","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 } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface Tab {\r\n label: string;\r\n content: React.ReactNode;\r\n}\r\n\r\ninterface TabsProps {\r\n tabs: Tab[];\r\n className?: string;\r\n defaultIndex?: number;\r\n}\r\n\r\nexport function Tabs({ tabs, className, defaultIndex = 0 }: TabsProps) {\r\n const [activeIndex, setActiveIndex] = useState(defaultIndex);\r\n\r\n return (\r\n <div className={cn(\"w-full\", className)}>\r\n <div className=\"relative flex border-b border-zinc-200 dark:border-zinc-800\">\r\n {tabs.map((tab, index) => (\r\n <button\r\n key={index}\r\n onClick={() => setActiveIndex(index)}\r\n className={cn(\r\n \"px-4 py-2 text-sm font-medium transition-colors relative\",\r\n activeIndex === index\r\n ? \"text-zinc-900 dark:text-white\"\r\n : \"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200\"\r\n )}\r\n >\r\n {tab.label}\r\n {activeIndex === index && (\r\n <motion.div\r\n layoutId=\"activeTab\"\r\n className=\"absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-900 dark:bg-white\"\r\n transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\r\n />\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n <motion.div\r\n key={activeIndex}\r\n initial={{ opacity: 0, y: 10 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n transition={{ duration: 0.2 }}\r\n className=\"py-4\"\r\n >\r\n {tabs[activeIndex].content}\r\n </motion.div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Tabs;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useState}from'react';import {motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function i(...t){return twMerge(clsx(t))}function f({tabs:t,className:s,defaultIndex:c=0}){let[e,l]=useState(c);return jsxs("div",{className:i("w-full",s),children:[jsx("div",{className:"relative flex border-b border-zinc-200 dark:border-zinc-800",children:t.map((m,a)=>jsxs("button",{onClick:()=>l(a),className:i("px-4 py-2 text-sm font-medium transition-colors relative",e===a?"text-zinc-900 dark:text-white":"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"),children:[m.label,e===a&&jsx(motion.div,{layoutId:"activeTab",className:"absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-900 dark:bg-white",transition:{type:"spring",stiffness:500,damping:30}})]},a))}),jsx(motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.2},className:"py-4",children:t[e].content},e)]})}var z=f;export{f as Tabs,z as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/tabs/index.tsx"],"names":["cn","inputs","twMerge","clsx","Tabs","tabs","className","defaultIndex","activeIndex","setActiveIndex","useState","jsxs","jsx","tab","index","motion","tabs_default"],"mappings":"sKAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCYO,SAASG,EAAK,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,CAAAA,CAAW,YAAA,CAAAC,CAAAA,CAAe,CAAE,EAAc,CACrE,GAAM,CAACC,CAAAA,CAAaC,CAAc,CAAA,CAAIC,QAAAA,CAASH,CAAY,CAAA,CAE3D,OACEI,IAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWX,CAAAA,CAAG,QAAA,CAAUM,CAAS,CAAA,CACpC,QAAA,CAAA,CAAAM,IAAC,KAAA,CAAA,CAAI,SAAA,CAAU,6DAAA,CACZ,QAAA,CAAAP,EAAK,GAAA,CAAI,CAACQ,CAAAA,CAAKC,CAAAA,GACdH,KAAC,QAAA,CAAA,CAEC,OAAA,CAAS,IAAMF,CAAAA,CAAeK,CAAK,CAAA,CACnC,SAAA,CAAWd,CAAAA,CACT,2DACAQ,CAAAA,GAAgBM,CAAAA,CACZ,+BAAA,CACA,+EACN,EAEC,QAAA,CAAA,CAAAD,CAAAA,CAAI,KAAA,CACJL,CAAAA,GAAgBM,GACfF,GAAAA,CAACG,MAAAA,CAAO,GAAA,CAAP,CACC,QAAA,CAAS,WAAA,CACT,SAAA,CAAU,kEAAA,CACV,WAAY,CAAE,IAAA,CAAM,QAAA,CAAU,SAAA,CAAW,IAAK,OAAA,CAAS,EAAG,CAAA,CAC5D,CAAA,CAAA,CAAA,CAfGD,CAiBP,CACD,CAAA,CACH,CAAA,CACAF,GAAAA,CAACG,MAAAA,CAAO,GAAA,CAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,EAAG,EAC7B,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,EAAG,CAAE,CAAA,CAC5B,UAAA,CAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAC5B,SAAA,CAAU,OAET,QAAA,CAAAV,CAAAA,CAAKG,CAAW,CAAA,CAAE,SANdA,CAOP,CAAA,CAAA,CACF,CAEJ,KAEOQ,CAAAA,CAAQZ","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 } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface Tab {\r\n label: string;\r\n content: React.ReactNode;\r\n}\r\n\r\ninterface TabsProps {\r\n tabs: Tab[];\r\n className?: string;\r\n defaultIndex?: number;\r\n}\r\n\r\nexport function Tabs({ tabs, className, defaultIndex = 0 }: TabsProps) {\r\n const [activeIndex, setActiveIndex] = useState(defaultIndex);\r\n\r\n return (\r\n <div className={cn(\"w-full\", className)}>\r\n <div className=\"relative flex border-b border-zinc-200 dark:border-zinc-800\">\r\n {tabs.map((tab, index) => (\r\n <button\r\n key={index}\r\n onClick={() => setActiveIndex(index)}\r\n className={cn(\r\n \"px-4 py-2 text-sm font-medium transition-colors relative\",\r\n activeIndex === index\r\n ? \"text-zinc-900 dark:text-white\"\r\n : \"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200\"\r\n )}\r\n >\r\n {tab.label}\r\n {activeIndex === index && (\r\n <motion.div\r\n layoutId=\"activeTab\"\r\n className=\"absolute bottom-0 left-0 right-0 h-0.5 bg-zinc-900 dark:bg-white\"\r\n transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\r\n />\r\n )}\r\n </button>\r\n ))}\r\n </div>\r\n <motion.div\r\n key={activeIndex}\r\n initial={{ opacity: 0, y: 10 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n transition={{ duration: 0.2 }}\r\n className=\"py-4\"\r\n >\r\n {tabs[activeIndex].content}\r\n </motion.div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Tabs;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';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))}function k({children:e,className:r,title:a="Terminal"}){return jsxRuntime.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:[jsxRuntime.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:[jsxRuntime.jsxs("div",{className:"flex items-center space-x-2",children:[jsxRuntime.jsx("div",{className:"w-3 h-3 bg-red-500 rounded-full"}),jsxRuntime.jsx("div",{className:"w-3 h-3 bg-yellow-500 rounded-full"}),jsxRuntime.jsx("div",{className:"w-3 h-3 bg-green-500 rounded-full"})]}),jsxRuntime.jsx("div",{className:"text-zinc-600 dark:text-gray-400 text-sm font-mono",children:a}),jsxRuntime.jsx("div",{className:"w-16"})]}),jsxRuntime.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]=react.useState(""),[u,f]=react.useState(false);return react.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]),jsxRuntime.jsxs("div",{className:n("flex items-center",r),children:[jsxRuntime.jsx("span",{children:l}),!u&&jsxRuntime.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]=react.useState(false);return react.useEffect(()=>{let o=setTimeout(()=>{l(true);},a);return ()=>clearTimeout(o)},[a]),jsxRuntime.jsx("div",{className:n("transition-all duration-500 transform",i?"opacity-100 translate-y-0":"opacity-0 translate-y-2",r),children:e})}exports.AnimatedSpan=A;exports.Terminal=k;exports.TypingAnimation=z;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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":"6IAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCmBO,SAASG,CAAAA,CAAS,CAAE,QAAA,CAAAC,CAAAA,CAAU,SAAA,CAAAC,CAAAA,CAAW,KAAA,CAAAC,CAAAA,CAAQ,UAAW,CAAA,CAAkB,CACnF,OACEC,eAAAA,CAAC,KAAA,CAAA,CACC,UAAWR,CAAAA,CACT,mGAAA,CACA,6CAAA,CACAM,CACF,CAAA,CAEA,QAAA,CAAA,CAAAE,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,wHAAA,CACb,QAAA,CAAA,CAAAA,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,6BAAA,CACb,QAAA,CAAA,CAAAC,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,iCAAA,CAAkC,CAAA,CACjDA,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,oCAAA,CAAqC,CAAA,CACpDA,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,mCAAA,CAAoC,CAAA,CAAA,CACrD,CAAA,CACAA,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,oDAAA,CAAsD,QAAA,CAAAF,CAAAA,CAAM,CAAA,CAC3EE,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,MAAA,CAAO,CAAA,CAAA,CACxB,CAAA,CAEAA,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,uHAAA,CACZ,SAAAJ,CAAAA,CACH,CAAA,CAAA,CACF,CAEJ,CAEO,SAASK,CAAAA,CAAgB,CAAE,QAAA,CAAAL,CAAAA,CAAU,SAAA,CAAAC,CAAAA,CAAW,KAAA,CAAAK,CAAAA,CAAQ,CAAA,CAAG,KAAA,CAAAC,CAAAA,CAAQ,EAAG,CAAA,CAAyB,CACpG,GAAM,CAACC,CAAAA,CAAeC,CAAgB,CAAA,CAAIC,cAAAA,CAAS,EAAE,CAAA,CAC/C,CAACC,CAAAA,CAAYC,CAAa,CAAA,CAAIF,cAAAA,CAAS,KAAK,EAElD,OAAAG,eAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAQ,UAAA,CAAW,IAAM,CAC7B,IAAIC,CAAAA,CAAe,CAAA,CACbC,CAAAA,CAAW,WAAA,CAAY,IAAM,CAC7BD,CAAAA,EAAgBf,CAAAA,CAAS,MAAA,EAC3BS,CAAAA,CAAiBT,CAAAA,CAAS,KAAA,CAAM,CAAA,CAAGe,CAAY,CAAC,CAAA,CAChDA,CAAAA,EAAAA,GAEAH,CAAAA,CAAc,IAAI,CAAA,CAClB,aAAA,CAAcI,CAAQ,GAE1B,CAAA,CAAGT,CAAK,CAAA,CAER,OAAO,IAAM,aAAA,CAAcS,CAAQ,CACrC,CAAA,CAAGV,CAAK,CAAA,CAER,OAAO,IAAM,YAAA,CAAaQ,CAAK,CACjC,EAAG,CAACd,CAAAA,CAAUM,CAAAA,CAAOC,CAAK,CAAC,CAAA,CAGzBJ,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWR,CAAAA,CAAG,mBAAA,CAAqBM,CAAS,CAAA,CAC/C,QAAA,CAAA,CAAAG,cAAAA,CAAC,MAAA,CAAA,CAAM,SAAAI,CAAAA,CAAc,CAAA,CACpB,CAACG,CAAAA,EAAcP,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,kDAAA,CAAmD,CAAA,CAAA,CACrF,CAEJ,CAEO,SAASa,CAAAA,CAAa,CAAE,QAAA,CAAAjB,CAAAA,CAAU,UAAAC,CAAAA,CAAW,KAAA,CAAAK,CAAAA,CAAQ,CAAE,CAAA,CAAsB,CAClF,GAAM,CAACY,CAAAA,CAAWC,CAAY,CAAA,CAAIT,cAAAA,CAAS,KAAK,CAAA,CAEhD,OAAAG,eAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAQ,UAAA,CAAW,IAAM,CAC7BK,CAAAA,CAAa,IAAI,EACnB,CAAA,CAAGb,CAAK,CAAA,CAER,OAAO,IAAM,YAAA,CAAaQ,CAAK,CACjC,CAAA,CAAG,CAACR,CAAK,CAAC,CAAA,CAGRF,cAAAA,CAAC,KAAA,CAAA,CACC,SAAA,CAAWT,CAAAA,CACT,uCAAA,CACAuB,CAAAA,CAAY,2BAAA,CAA8B,yBAAA,CAC1CjB,CACF,CAAA,CAEC,QAAA,CAAAD,EACH,CAEJ","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, 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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'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
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'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
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'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
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'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
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'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
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|