bynana-ui 1.1.0 → 1.4.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/ascii-text/index.js +3 -0
- package/dist/ascii-text/index.js.map +1 -0
- package/dist/ascii-text/index.mjs +3 -0
- package/dist/ascii-text/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/blur-fade/index.js +2 -0
- package/dist/blur-fade/index.js.map +1 -0
- package/dist/blur-fade/index.mjs +2 -0
- package/dist/blur-fade/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/click-spark/index.js +2 -0
- package/dist/click-spark/index.js.map +1 -0
- package/dist/click-spark/index.mjs +2 -0
- package/dist/click-spark/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/falling-text/index.js +2 -0
- package/dist/falling-text/index.js.map +1 -0
- package/dist/falling-text/index.mjs +2 -0
- package/dist/falling-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/float-effect/index.js +2 -0
- package/dist/float-effect/index.js.map +1 -0
- package/dist/float-effect/index.mjs +2 -0
- package/dist/float-effect/index.mjs.map +1 -0
- package/dist/glow-effect/index.js +2 -0
- package/dist/glow-effect/index.js.map +1 -0
- package/dist/glow-effect/index.mjs +2 -0
- package/dist/glow-effect/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/hamburger-basic/index.js +2 -0
- package/dist/hamburger-basic/index.js.map +1 -0
- package/dist/hamburger-basic/index.mjs +2 -0
- package/dist/hamburger-basic/index.mjs.map +1 -0
- package/dist/hamburger-spin/index.js +2 -0
- package/dist/hamburger-spin/index.js.map +1 -0
- package/dist/hamburger-spin/index.mjs +2 -0
- package/dist/hamburger-spin/index.mjs.map +1 -0
- package/dist/index.js +34 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +34 -3
- package/dist/index.mjs.map +1 -1
- package/dist/infinite-scroll/index.js +11 -0
- package/dist/infinite-scroll/index.js.map +1 -0
- package/dist/infinite-scroll/index.mjs +11 -0
- package/dist/infinite-scroll/index.mjs.map +1 -0
- 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/input-otp/index.js +2 -0
- package/dist/input-otp/index.js.map +1 -0
- package/dist/input-otp/index.mjs +2 -0
- package/dist/input-otp/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/multi-step-loader/index.js +2 -0
- package/dist/multi-step-loader/index.js.map +1 -0
- package/dist/multi-step-loader/index.mjs +2 -0
- package/dist/multi-step-loader/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/pixel-card/index.js +2 -0
- package/dist/pixel-card/index.js.map +1 -0
- package/dist/pixel-card/index.mjs +2 -0
- package/dist/pixel-card/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/smooth-cursor/index.js +2 -0
- package/dist/smooth-cursor/index.js.map +1 -0
- package/dist/smooth-cursor/index.mjs +2 -0
- package/dist/smooth-cursor/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/tilted-card/index.js +2 -0
- package/dist/tilted-card/index.js.map +1 -0
- package/dist/tilted-card/index.mjs +2 -0
- package/dist/tilted-card/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 +108 -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(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function l({text:e,className:s}){let a=Array.from(e);return jsxRuntime.jsx("div",{className:i("flex",s),style:{perspective:"500px"},children:a.map((t,r)=>jsxRuntime.jsx(framerMotion.motion.span,{className:"inline-block",style:{whiteSpace:t===" "?"pre":"normal"},initial:{rotateY:90,opacity:0},animate:{rotateY:0,opacity:1},transition:{delay:r*.04,duration:.5,type:"spring",stiffness:120},whileHover:{rotateY:180,transition:{duration:.3}},children:t===" "?"\xA0":t},`${t}-${r}`))})}var v=l;exports.PerspectiveText=l;exports.default=v;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/perspective-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","PerspectiveText","text","className","letters","jsx","letter","index","motion","perspective_text_default"],"mappings":"qNAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,SAASG,CAAAA,CAAgB,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,CAAU,CAAA,CAAyB,CACzE,IAAMC,CAAAA,CAAU,KAAA,CAAM,IAAA,CAAKF,CAAI,CAAA,CAE/B,OACEG,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWR,CAAAA,CAAG,MAAA,CAAQM,CAAS,CAAA,CAAG,KAAA,CAAO,CAAE,WAAA,CAAa,OAAQ,CAAA,CAClE,QAAA,CAAAC,CAAAA,CAAQ,GAAA,CAAI,CAACE,CAAAA,CAAQC,CAAAA,GACpBF,cAAAA,CAACG,mBAAAA,CAAO,IAAA,CAAP,CAEC,SAAA,CAAU,cAAA,CACV,KAAA,CAAO,CAAE,UAAA,CAAYF,CAAAA,GAAW,GAAA,CAAM,KAAA,CAAQ,QAAS,CAAA,CACvD,OAAA,CAAS,CAAE,OAAA,CAAS,EAAA,CAAI,OAAA,CAAS,CAAE,CAAA,CACnC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,OAAA,CAAS,CAAE,CAAA,CAClC,UAAA,CAAY,CACV,KAAA,CAAOC,CAAAA,CAAQ,GAAA,CACf,QAAA,CAAU,EAAA,CACV,IAAA,CAAM,QAAA,CACN,SAAA,CAAW,GACb,CAAA,CACA,UAAA,CAAY,CAAE,OAAA,CAAS,GAAA,CAAK,UAAA,CAAY,CAAE,QAAA,CAAU,EAAI,CAAE,CAAA,CAEzD,QAAA,CAAAD,CAAAA,GAAW,GAAA,CAAM,MAAA,CAAWA,CAAAA,CAAAA,CAbxB,CAAA,EAAGA,CAAM,CAAA,CAAA,EAAIC,CAAK,CAAA,CAczB,CACD,CAAA,CACH,CAEJ,CAEA,IAAOE,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 PerspectiveTextProps {\r\n text: string;\r\n className?: string;\r\n}\r\n\r\nexport function PerspectiveText({ text, className }: PerspectiveTextProps) {\r\n const letters = Array.from(text);\r\n\r\n return (\r\n <div className={cn(\"flex\", className)} style={{ perspective: \"500px\" }}>\r\n {letters.map((letter, index) => (\r\n <motion.span\r\n key={`${letter}-${index}`}\r\n className=\"inline-block\"\r\n style={{ whiteSpace: letter === \" \" ? \"pre\" : \"normal\" }}\r\n initial={{ rotateY: 90, opacity: 0 }}\r\n animate={{ rotateY: 0, opacity: 1 }}\r\n transition={{\r\n delay: index * 0.04,\r\n duration: 0.5,\r\n type: \"spring\",\r\n stiffness: 120,\r\n }}\r\n whileHover={{ rotateY: 180, transition: { duration: 0.3 } }}\r\n >\r\n {letter === \" \" ? \"\\u00A0\" : letter}\r\n </motion.span>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nexport default PerspectiveText;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function i(...e){return twMerge(clsx(e))}function l({text:e,className:s}){let a=Array.from(e);return jsx("div",{className:i("flex",s),style:{perspective:"500px"},children:a.map((t,r)=>jsx(motion.span,{className:"inline-block",style:{whiteSpace:t===" "?"pre":"normal"},initial:{rotateY:90,opacity:0},animate:{rotateY:0,opacity:1},transition:{delay:r*.04,duration:.5,type:"spring",stiffness:120},whileHover:{rotateY:180,transition:{duration:.3}},children:t===" "?"\xA0":t},`${t}-${r}`))})}var v=l;export{l as PerspectiveText,v as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/perspective-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","PerspectiveText","text","className","letters","jsx","letter","index","motion","perspective_text_default"],"mappings":"oIAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,SAASG,CAAAA,CAAgB,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,CAAU,CAAA,CAAyB,CACzE,IAAMC,CAAAA,CAAU,KAAA,CAAM,IAAA,CAAKF,CAAI,CAAA,CAE/B,OACEG,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWR,CAAAA,CAAG,MAAA,CAAQM,CAAS,CAAA,CAAG,KAAA,CAAO,CAAE,WAAA,CAAa,OAAQ,CAAA,CAClE,QAAA,CAAAC,CAAAA,CAAQ,GAAA,CAAI,CAACE,CAAAA,CAAQC,CAAAA,GACpBF,GAAAA,CAACG,MAAAA,CAAO,IAAA,CAAP,CAEC,SAAA,CAAU,cAAA,CACV,KAAA,CAAO,CAAE,UAAA,CAAYF,CAAAA,GAAW,GAAA,CAAM,KAAA,CAAQ,QAAS,CAAA,CACvD,OAAA,CAAS,CAAE,OAAA,CAAS,EAAA,CAAI,OAAA,CAAS,CAAE,CAAA,CACnC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,OAAA,CAAS,CAAE,CAAA,CAClC,UAAA,CAAY,CACV,KAAA,CAAOC,CAAAA,CAAQ,GAAA,CACf,QAAA,CAAU,EAAA,CACV,IAAA,CAAM,QAAA,CACN,SAAA,CAAW,GACb,CAAA,CACA,UAAA,CAAY,CAAE,OAAA,CAAS,GAAA,CAAK,UAAA,CAAY,CAAE,QAAA,CAAU,EAAI,CAAE,CAAA,CAEzD,QAAA,CAAAD,CAAAA,GAAW,GAAA,CAAM,MAAA,CAAWA,CAAAA,CAAAA,CAbxB,CAAA,EAAGA,CAAM,CAAA,CAAA,EAAIC,CAAK,CAAA,CAczB,CACD,CAAA,CACH,CAEJ,CAEA,IAAOE,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 PerspectiveTextProps {\r\n text: string;\r\n className?: string;\r\n}\r\n\r\nexport function PerspectiveText({ text, className }: PerspectiveTextProps) {\r\n const letters = Array.from(text);\r\n\r\n return (\r\n <div className={cn(\"flex\", className)} style={{ perspective: \"500px\" }}>\r\n {letters.map((letter, index) => (\r\n <motion.span\r\n key={`${letter}-${index}`}\r\n className=\"inline-block\"\r\n style={{ whiteSpace: letter === \" \" ? \"pre\" : \"normal\" }}\r\n initial={{ rotateY: 90, opacity: 0 }}\r\n animate={{ rotateY: 0, opacity: 1 }}\r\n transition={{\r\n delay: index * 0.04,\r\n duration: 0.5,\r\n type: \"spring\",\r\n stiffness: 120,\r\n }}\r\n whileHover={{ rotateY: 180, transition: { duration: 0.3 } }}\r\n >\r\n {letter === \" \" ? \"\\u00A0\" : letter}\r\n </motion.span>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nexport default PerspectiveText;\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 H(...s){return tailwindMerge.twMerge(clsx.clsx(s))}var M=class{constructor(t,l,p,g,S,w,o){this.width=t.width,this.height=t.height,this.ctx=l,this.x=p,this.y=g,this.color=S,this.speed=this.getRandomValue(.1,.9)*w,this.size=0,this.sizeStep=Math.random()*.4,this.minSize=.5,this.maxSizeInteger=2,this.maxSize=this.getRandomValue(this.minSize,this.maxSizeInteger),this.delay=o,this.counter=0,this.counterStep=Math.random()*4+(this.width+this.height)*.01,this.isIdle=false,this.isReverse=false,this.isShimmer=false;}getRandomValue(t,l){return Math.random()*(l-t)+t}draw(){let t=this.maxSizeInteger*.5-this.size*.5;this.ctx.fillStyle=this.color,this.ctx.fillRect(this.x+t,this.y+t,this.size,this.size);}appear(){if(this.isIdle=false,this.counter<=this.delay){this.counter+=this.counterStep;return}this.size>=this.maxSize&&(this.isShimmer=true),this.isShimmer?this.shimmer():this.size+=this.sizeStep,this.draw();}disappear(){if(this.isShimmer=false,this.counter=0,this.size<=0){this.isIdle=true;return}else this.size-=.1;this.draw();}shimmer(){this.size>=this.maxSize?this.isReverse=true:this.size<=this.minSize&&(this.isReverse=false),this.isReverse?this.size-=this.speed:this.size+=this.speed;}},L={default:{gap:5,speed:35,colors:"#71717a,#a1a1aa,#d4d4d8",noFocus:false},blue:{gap:10,speed:25,colors:"#0ea5e9,#38bdf8,#7dd3fc",noFocus:false},yellow:{gap:3,speed:20,colors:"#ca8a04,#eab308,#facc15",noFocus:false},pink:{gap:6,speed:80,colors:"#be123c,#e11d48,#f43f5e",noFocus:true}};function U(s,t){return s<=0||t?0:s>=100?100*.001:s*.001}function W({variant:s="default",gap:t,speed:l,colors:p,noFocus:g,className:S="",children:w}){let o=react.useRef(null),n=react.useRef(null),R=react.useRef([]),i=react.useRef(null),y=react.useRef(typeof performance<"u"?performance.now():0),F=react.useRef(typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:false).current,b=L[s]||L.default,C=t??b.gap,I=l??b.speed,A=p??b.colors,x=g??b.noFocus,E=()=>{if(!o.current||!n.current)return;let e=o.current.getBoundingClientRect(),a=Math.floor(e.width)||300,c=Math.floor(e.height)||400,d=n.current.getContext("2d");if(!d)return;n.current.width=a,n.current.height=c,n.current.style.width=`${a}px`,n.current.style.height=`${c}px`;let m=A.split(",").map(r=>r.trim()),f=[],u=Math.max(parseInt(C.toString(),10),3);for(let r=0;r<a;r+=u)for(let v=0;v<c;v+=u){let O=m[Math.floor(Math.random()*m.length)],N=r-a/2,P=v-c/2,$=Math.sqrt(N*N+P*P),G=F?0:$;f.push(new M(n.current,d,r,v,O,U(I,F),G));}R.current=f;},T=e=>{i.current=requestAnimationFrame(()=>T(e));let a=performance.now(),c=a-y.current,d=1e3/60;if(c<d)return;y.current=a-c%d;let m=n.current?.getContext("2d");if(!m||!n.current)return;m.clearRect(0,0,n.current.width,n.current.height);let f=true;for(let u=0;u<R.current.length;u++){let r=R.current[u];r[e](),r.isIdle||(f=false);}f&&i.current&&cancelAnimationFrame(i.current);},z=e=>{i.current!==null&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>T(e));},D=()=>z("appear"),k=()=>z("disappear"),q=e=>{e.currentTarget.contains(e.relatedTarget)||z("appear");},B=e=>{e.currentTarget.contains(e.relatedTarget)||z("disappear");};return react.useEffect(()=>{E();let e=new ResizeObserver(()=>{E();});return o.current&&e.observe(o.current),()=>{e.disconnect(),i.current!==null&&cancelAnimationFrame(i.current);}},[C,I,A,x]),jsxRuntime.jsxs("div",{ref:o,className:H("relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900",S),onMouseEnter:D,onMouseLeave:k,onFocus:x?void 0:q,onBlur:x?void 0:B,tabIndex:x?-1:0,children:[jsxRuntime.jsx("canvas",{className:"absolute inset-0 w-full h-full pointer-events-none",ref:n}),jsxRuntime.jsx("div",{className:"relative z-10",children:w})]})}var ne=W;exports.PixelCard=W;exports.default=ne;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/pixel-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","Pixel","canvas","context","x","y","color","speed","delay","min","max","centerOffset","VARIANTS","getEffectiveSpeed","value","reducedMotion","PixelCard","variant","gap","colors","noFocus","className","children","containerRef","useRef","canvasRef","pixelsRef","animationRef","timePreviousRef","variantCfg","finalGap","finalSpeed","finalColors","finalNoFocus","initPixels","rect","width","height","ctx","colorsArray","c","pxs","gapValue","dx","dy","distance","doAnimate","fnName","timeNow","timePassed","timeInterval","allIdle","i","pixel","handleAnimation","name","onMouseEnter","onMouseLeave","onFocus","onBlur","useEffect","observer","jsxs","jsx","pixel_card_default"],"mappings":"sMAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,UAAKF,CAAM,CAAC,CAC7B,CCAA,IAAMG,EAAN,KAAY,CAoBV,YACEC,CAAAA,CACAC,CAAAA,CACAC,EACAC,CAAAA,CACAC,CAAAA,CACAC,EACAC,CAAAA,CACA,CACA,IAAA,CAAK,KAAA,CAAQN,CAAAA,CAAO,KAAA,CACpB,KAAK,MAAA,CAASA,CAAAA,CAAO,OACrB,IAAA,CAAK,GAAA,CAAMC,EACX,IAAA,CAAK,CAAA,CAAIC,EACT,IAAA,CAAK,CAAA,CAAIC,EACT,IAAA,CAAK,KAAA,CAAQC,EACb,IAAA,CAAK,KAAA,CAAQ,KAAK,cAAA,CAAe,EAAA,CAAK,EAAG,CAAA,CAAIC,CAAAA,CAC7C,IAAA,CAAK,KAAO,CAAA,CACZ,IAAA,CAAK,SAAW,IAAA,CAAK,MAAA,GAAW,EAAA,CAChC,IAAA,CAAK,QAAU,EAAA,CACf,IAAA,CAAK,eAAiB,CAAA,CACtB,IAAA,CAAK,QAAU,IAAA,CAAK,cAAA,CAAe,KAAK,OAAA,CAAS,IAAA,CAAK,cAAc,CAAA,CACpE,IAAA,CAAK,KAAA,CAAQC,EACb,IAAA,CAAK,OAAA,CAAU,EACf,IAAA,CAAK,WAAA,CAAc,KAAK,MAAA,EAAO,CAAI,GAAK,IAAA,CAAK,KAAA,CAAQ,KAAK,MAAA,EAAU,GAAA,CACpE,KAAK,MAAA,CAAS,KAAA,CACd,KAAK,SAAA,CAAY,KAAA,CACjB,IAAA,CAAK,SAAA,CAAY,MACnB,CAEA,eAAeC,CAAAA,CAAaC,CAAAA,CAAa,CACvC,OAAO,IAAA,CAAK,QAAO,EAAKA,CAAAA,CAAMD,GAAOA,CACvC,CAEA,MAAO,CACL,IAAME,EAAe,IAAA,CAAK,cAAA,CAAiB,GAAM,IAAA,CAAK,IAAA,CAAO,EAAA,CAC7D,IAAA,CAAK,GAAA,CAAI,SAAA,CAAY,KAAK,KAAA,CAC1B,IAAA,CAAK,IAAI,QAAA,CACP,IAAA,CAAK,EAAIA,CAAAA,CACT,IAAA,CAAK,EAAIA,CAAAA,CACT,IAAA,CAAK,KACL,IAAA,CAAK,IACP,EACF,CAEA,MAAA,EAAS,CAEP,GADA,IAAA,CAAK,MAAA,CAAS,KAAA,CACV,IAAA,CAAK,OAAA,EAAW,KAAK,KAAA,CAAO,CAC9B,KAAK,OAAA,EAAW,IAAA,CAAK,YACrB,MACF,CACI,KAAK,IAAA,EAAQ,IAAA,CAAK,UACpB,IAAA,CAAK,SAAA,CAAY,MAEf,IAAA,CAAK,SAAA,CACP,KAAK,OAAA,EAAQ,CAEb,IAAA,CAAK,IAAA,EAAQ,IAAA,CAAK,QAAA,CAEpB,KAAK,IAAA,GACP,CAEA,SAAA,EAAY,CAGV,GAFA,IAAA,CAAK,SAAA,CAAY,MACjB,IAAA,CAAK,OAAA,CAAU,EACX,IAAA,CAAK,IAAA,EAAQ,EAAG,CAClB,IAAA,CAAK,OAAS,IAAA,CACd,MACF,CAAA,KACE,IAAA,CAAK,IAAA,EAAQ,EAAA,CAEf,KAAK,IAAA,GACP,CAEA,OAAA,EAAU,CACJ,KAAK,IAAA,EAAQ,IAAA,CAAK,QACpB,IAAA,CAAK,SAAA,CAAY,KACR,IAAA,CAAK,IAAA,EAAQ,KAAK,OAAA,GAC3B,IAAA,CAAK,UAAY,KAAA,CAAA,CAEf,IAAA,CAAK,SAAA,CACP,IAAA,CAAK,IAAA,EAAQ,IAAA,CAAK,MAElB,IAAA,CAAK,IAAA,EAAQ,KAAK,MAEtB,CACF,EAEMC,CAAAA,CAAW,CACf,QAAS,CACP,GAAA,CAAK,EACL,KAAA,CAAO,EAAA,CACP,OAAQ,yBAAA,CACR,OAAA,CAAS,KACX,CAAA,CACA,IAAA,CAAM,CACJ,GAAA,CAAK,EAAA,CACL,KAAA,CAAO,GACP,MAAA,CAAQ,yBAAA,CACR,QAAS,KACX,CAAA,CACA,OAAQ,CACN,GAAA,CAAK,EACL,KAAA,CAAO,EAAA,CACP,OAAQ,yBAAA,CACR,OAAA,CAAS,KACX,CAAA,CACA,IAAA,CAAM,CACJ,GAAA,CAAK,CAAA,CACL,KAAA,CAAO,EAAA,CACP,MAAA,CAAQ,yBAAA,CACR,QAAS,IACX,CACF,EAYA,SAASC,CAAAA,CAAkBC,EAAeC,CAAAA,CAAwB,CAKhE,OAAID,CAAAA,EAAS,CAAA,EAAOC,EACX,CAAA,CACED,CAAAA,EAAS,IACX,GAAA,CAAM,IAAA,CAENA,EAAQ,IAEnB,CAEO,SAASE,CAAAA,CAAU,CACxB,OAAA,CAAAC,EAAU,SAAA,CACV,GAAA,CAAAC,EACA,KAAA,CAAAX,CAAAA,CACA,OAAAY,CAAAA,CACA,OAAA,CAAAC,EACA,SAAA,CAAAC,CAAAA,CAAY,GACZ,QAAA,CAAAC,CACF,EAAmB,CACjB,IAAMC,EAAeC,YAAAA,CAAuB,IAAI,CAAA,CAC1CC,CAAAA,CAAYD,YAAAA,CAA0B,IAAI,EAC1CE,CAAAA,CAAYF,YAAAA,CAAgB,EAAE,CAAA,CAC9BG,EAAeH,YAAAA,CACnB,IACF,EACMI,CAAAA,CAAkBJ,YAAAA,CACtB,OAAO,WAAA,CAAgB,GAAA,CAAc,YAAY,GAAA,EAAI,CAAI,CAC3D,CAAA,CACMT,CAAAA,CAAgBS,YAAAA,CACpB,OAAO,MAAA,CAAW,GAAA,CACd,OAAO,UAAA,CAAW,kCAAkC,EAAE,OAAA,CACtD,KACN,EAAE,OAAA,CAEIK,CAAAA,CAAajB,EAASK,CAAO,CAAA,EAAKL,EAAS,OAAA,CAC3CkB,CAAAA,CAAWZ,GAAOW,CAAAA,CAAW,GAAA,CAC7BE,EAAaxB,CAAAA,EAASsB,CAAAA,CAAW,KAAA,CACjCG,CAAAA,CAAcb,CAAAA,EAAUU,CAAAA,CAAW,OACnCI,CAAAA,CAAeb,CAAAA,EAAWS,EAAW,OAAA,CAErCK,CAAAA,CAAa,IAAM,CACvB,GAAI,CAACX,CAAAA,CAAa,OAAA,EAAW,CAACE,CAAAA,CAAU,OAAA,CAAS,OAEjD,IAAMU,CAAAA,CAAOZ,EAAa,OAAA,CAAQ,qBAAA,EAAsB,CAClDa,CAAAA,CAAQ,IAAA,CAAK,KAAA,CAAMD,EAAK,KAAK,CAAA,EAAK,IAClCE,CAAAA,CAAS,IAAA,CAAK,MAAMF,CAAAA,CAAK,MAAM,GAAK,GAAA,CACpCG,CAAAA,CAAMb,EAAU,OAAA,CAAQ,UAAA,CAAW,IAAI,CAAA,CAC7C,GAAI,CAACa,CAAAA,CAAK,OAEVb,CAAAA,CAAU,OAAA,CAAQ,KAAA,CAAQW,CAAAA,CAC1BX,EAAU,OAAA,CAAQ,MAAA,CAASY,EAC3BZ,CAAAA,CAAU,OAAA,CAAQ,MAAM,KAAA,CAAQ,CAAA,EAAGW,CAAK,CAAA,EAAA,CAAA,CACxCX,CAAAA,CAAU,QAAQ,KAAA,CAAM,MAAA,CAAS,GAAGY,CAAM,CAAA,EAAA,CAAA,CAE1C,IAAME,CAAAA,CAAcP,CAAAA,CAAY,KAAA,CAAM,GAAG,CAAA,CAAE,GAAA,CAAKQ,GAAMA,CAAAA,CAAE,IAAA,EAAM,CAAA,CACxDC,CAAAA,CAAe,EAAC,CAChBC,CAAAA,CAAW,KAAK,GAAA,CAAI,QAAA,CAASZ,EAAS,QAAA,EAAS,CAAG,EAAE,CAAA,CAAG,CAAC,EAE9D,IAAA,IAAS1B,CAAAA,CAAI,CAAA,CAAGA,CAAAA,CAAIgC,CAAAA,CAAOhC,CAAAA,EAAKsC,EAC9B,IAAA,IAASrC,CAAAA,CAAI,EAAGA,CAAAA,CAAIgC,CAAAA,CAAQhC,GAAKqC,CAAAA,CAAU,CACzC,IAAMpC,CAAAA,CAAQiC,CAAAA,CAAY,KAAK,KAAA,CAAM,IAAA,CAAK,QAAO,CAAIA,CAAAA,CAAY,MAAM,CAAC,CAAA,CAClEI,CAAAA,CAAKvC,CAAAA,CAAIgC,CAAAA,CAAQ,CAAA,CACjBQ,EAAKvC,CAAAA,CAAIgC,CAAAA,CAAS,EAClBQ,CAAAA,CAAW,IAAA,CAAK,KAAKF,CAAAA,CAAKA,CAAAA,CAAKC,EAAKA,CAAE,CAAA,CACtCpC,EAAQO,CAAAA,CAAgB,CAAA,CAAI8B,EAClCJ,CAAAA,CAAI,IAAA,CACF,IAAIxC,CAAAA,CACFwB,CAAAA,CAAU,OAAA,CACVa,CAAAA,CACAlC,CAAAA,CACAC,CAAAA,CACAC,EACAO,CAAAA,CAAkBkB,CAAAA,CAAYhB,CAAa,CAAA,CAC3CP,CACF,CACF,EACF,CAEFkB,EAAU,OAAA,CAAUe,EACtB,EAEMK,CAAAA,CAAaC,CAAAA,EAAmC,CACpDpB,CAAAA,CAAa,OAAA,CAAU,sBAAsB,IAAMmB,CAAAA,CAAUC,CAAM,CAAC,CAAA,CACpE,IAAMC,EAAU,WAAA,CAAY,GAAA,GACtBC,CAAAA,CAAaD,CAAAA,CAAUpB,EAAgB,OAAA,CACvCsB,CAAAA,CAAe,IAAO,EAAA,CAE5B,GAAID,EAAaC,CAAAA,CAAc,OAC/BtB,EAAgB,OAAA,CAAUoB,CAAAA,CAAWC,EAAaC,CAAAA,CAElD,IAAMZ,CAAAA,CAAMb,CAAAA,CAAU,OAAA,EAAS,UAAA,CAAW,IAAI,CAAA,CAC9C,GAAI,CAACa,CAAAA,EAAO,CAACb,EAAU,OAAA,CAAS,OAEhCa,EAAI,SAAA,CAAU,CAAA,CAAG,EAAGb,CAAAA,CAAU,OAAA,CAAQ,MAAOA,CAAAA,CAAU,OAAA,CAAQ,MAAM,CAAA,CAErE,IAAI0B,CAAAA,CAAU,IAAA,CACd,IAAA,IAASC,CAAAA,CAAI,EAAGA,CAAAA,CAAI1B,CAAAA,CAAU,QAAQ,MAAA,CAAQ0B,CAAAA,EAAAA,CAAK,CACjD,IAAMC,CAAAA,CAAQ3B,EAAU,OAAA,CAAQ0B,CAAC,EACjCC,CAAAA,CAAMN,CAAM,GAAE,CACTM,CAAAA,CAAM,SACTF,CAAAA,CAAU,KAAA,EAEd,CACIA,CAAAA,EAAWxB,CAAAA,CAAa,OAAA,EAC1B,qBAAqBA,CAAAA,CAAa,OAAO,EAE7C,CAAA,CAEM2B,CAAAA,CAAmBC,GAAiC,CACpD5B,CAAAA,CAAa,UAAY,IAAA,EAC3B,oBAAA,CAAqBA,EAAa,OAAO,CAAA,CAE3CA,EAAa,OAAA,CAAU,qBAAA,CAAsB,IAAMmB,CAAAA,CAAUS,CAAI,CAAC,EACpE,CAAA,CAEMC,CAAAA,CAAe,IAAMF,CAAAA,CAAgB,QAAQ,EAC7CG,CAAAA,CAAe,IAAMH,EAAgB,WAAW,CAAA,CAChDI,EAAoD,CAAA,EAAM,CAC1D,EAAE,aAAA,CAAc,QAAA,CAAS,EAAE,aAAqB,CAAA,EACpDJ,EAAgB,QAAQ,EAC1B,CAAA,CACMK,CAAAA,CAAmD,CAAA,EAAM,CACzD,EAAE,aAAA,CAAc,QAAA,CAAS,EAAE,aAAqB,CAAA,EACpDL,EAAgB,WAAW,EAC7B,EAEA,OAAAM,eAAAA,CAAU,IAAM,CACd1B,CAAAA,GACA,IAAM2B,CAAAA,CAAW,IAAI,cAAA,CAAe,IAAM,CACxC3B,CAAAA,GACF,CAAC,EACD,OAAIX,CAAAA,CAAa,SACfsC,CAAAA,CAAS,OAAA,CAAQtC,EAAa,OAAO,CAAA,CAEhC,IAAM,CACXsC,CAAAA,CAAS,YAAW,CAChBlC,CAAAA,CAAa,UAAY,IAAA,EAC3B,oBAAA,CAAqBA,EAAa,OAAO,EAE7C,CACF,CAAA,CAAG,CAACG,CAAAA,CAAUC,EAAYC,CAAAA,CAAaC,CAAY,CAAC,CAAA,CAGlD6B,eAAAA,CAAC,OACC,GAAA,CAAKvC,CAAAA,CACL,UAAW1B,CAAAA,CACT,8GAAA,CACAwB,CACF,CAAA,CACA,YAAA,CAAcmC,EACd,YAAA,CAAcC,CAAAA,CACd,QAASxB,CAAAA,CAAe,MAAA,CAAYyB,CAAAA,CACpC,MAAA,CAAQzB,CAAAA,CAAe,MAAA,CAAY0B,EACnC,QAAA,CAAU1B,CAAAA,CAAe,GAAK,CAAA,CAE9B,QAAA,CAAA,CAAA8B,eAAC,QAAA,CAAA,CACC,SAAA,CAAU,qDACV,GAAA,CAAKtC,CAAAA,CACP,EACAsC,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,eAAA,CAAiB,QAAA,CAAAzC,EAAS,CAAA,CAAA,CAC3C,CAEJ,CAEA,IAAO0C,EAAAA,CAAQhD","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, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nclass Pixel {\r\n width: number;\r\n height: number;\r\n ctx: CanvasRenderingContext2D;\r\n x: number;\r\n y: number;\r\n color: string;\r\n speed: number;\r\n size: number;\r\n sizeStep: number;\r\n minSize: number;\r\n maxSizeInteger: number;\r\n maxSize: number;\r\n delay: number;\r\n counter: number;\r\n counterStep: number;\r\n isIdle: boolean;\r\n isReverse: boolean;\r\n isShimmer: boolean;\r\n\r\n constructor(\r\n canvas: HTMLCanvasElement,\r\n context: CanvasRenderingContext2D,\r\n x: number,\r\n y: number,\r\n color: string,\r\n speed: number,\r\n delay: number\r\n ) {\r\n this.width = canvas.width;\r\n this.height = canvas.height;\r\n this.ctx = context;\r\n this.x = x;\r\n this.y = y;\r\n this.color = color;\r\n this.speed = this.getRandomValue(0.1, 0.9) * speed;\r\n this.size = 0;\r\n this.sizeStep = Math.random() * 0.4;\r\n this.minSize = 0.5;\r\n this.maxSizeInteger = 2;\r\n this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);\r\n this.delay = delay;\r\n this.counter = 0;\r\n this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;\r\n this.isIdle = false;\r\n this.isReverse = false;\r\n this.isShimmer = false;\r\n }\r\n\r\n getRandomValue(min: number, max: number) {\r\n return Math.random() * (max - min) + min;\r\n }\r\n\r\n draw() {\r\n const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;\r\n this.ctx.fillStyle = this.color;\r\n this.ctx.fillRect(\r\n this.x + centerOffset,\r\n this.y + centerOffset,\r\n this.size,\r\n this.size\r\n );\r\n }\r\n\r\n appear() {\r\n this.isIdle = false;\r\n if (this.counter <= this.delay) {\r\n this.counter += this.counterStep;\r\n return;\r\n }\r\n if (this.size >= this.maxSize) {\r\n this.isShimmer = true;\r\n }\r\n if (this.isShimmer) {\r\n this.shimmer();\r\n } else {\r\n this.size += this.sizeStep;\r\n }\r\n this.draw();\r\n }\r\n\r\n disappear() {\r\n this.isShimmer = false;\r\n this.counter = 0;\r\n if (this.size <= 0) {\r\n this.isIdle = true;\r\n return;\r\n } else {\r\n this.size -= 0.1;\r\n }\r\n this.draw();\r\n }\r\n\r\n shimmer() {\r\n if (this.size >= this.maxSize) {\r\n this.isReverse = true;\r\n } else if (this.size <= this.minSize) {\r\n this.isReverse = false;\r\n }\r\n if (this.isReverse) {\r\n this.size -= this.speed;\r\n } else {\r\n this.size += this.speed;\r\n }\r\n }\r\n}\r\n\r\nconst VARIANTS = {\r\n default: {\r\n gap: 5,\r\n speed: 35,\r\n colors: \"#71717a,#a1a1aa,#d4d4d8\",\r\n noFocus: false,\r\n },\r\n blue: {\r\n gap: 10,\r\n speed: 25,\r\n colors: \"#0ea5e9,#38bdf8,#7dd3fc\",\r\n noFocus: false,\r\n },\r\n yellow: {\r\n gap: 3,\r\n speed: 20,\r\n colors: \"#ca8a04,#eab308,#facc15\",\r\n noFocus: false,\r\n },\r\n pink: {\r\n gap: 6,\r\n speed: 80,\r\n colors: \"#be123c,#e11d48,#f43f5e\",\r\n noFocus: true,\r\n },\r\n};\r\n\r\ninterface PixelCardProps {\r\n variant?: \"default\" | \"blue\" | \"yellow\" | \"pink\";\r\n gap?: number;\r\n speed?: number;\r\n colors?: string;\r\n noFocus?: boolean;\r\n className?: string;\r\n children: ReactNode;\r\n}\r\n\r\nfunction getEffectiveSpeed(value: number, reducedMotion: boolean) {\r\n const min = 0;\r\n const max = 100;\r\n const throttle = 0.001;\r\n\r\n if (value <= min || reducedMotion) {\r\n return min;\r\n } else if (value >= max) {\r\n return max * throttle;\r\n } else {\r\n return value * throttle;\r\n }\r\n}\r\n\r\nexport function PixelCard({\r\n variant = \"default\",\r\n gap,\r\n speed,\r\n colors,\r\n noFocus,\r\n className = \"\",\r\n children,\r\n}: PixelCardProps) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const canvasRef = useRef<HTMLCanvasElement>(null);\r\n const pixelsRef = useRef<Pixel[]>([]);\r\n const animationRef = useRef<ReturnType<typeof requestAnimationFrame> | null>(\r\n null\r\n );\r\n const timePreviousRef = useRef(\r\n typeof performance !== \"undefined\" ? performance.now() : 0\r\n );\r\n const reducedMotion = useRef(\r\n typeof window !== \"undefined\"\r\n ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n : false\r\n ).current;\r\n\r\n const variantCfg = VARIANTS[variant] || VARIANTS.default;\r\n const finalGap = gap ?? variantCfg.gap;\r\n const finalSpeed = speed ?? variantCfg.speed;\r\n const finalColors = colors ?? variantCfg.colors;\r\n const finalNoFocus = noFocus ?? variantCfg.noFocus;\r\n\r\n const initPixels = () => {\r\n if (!containerRef.current || !canvasRef.current) return;\r\n\r\n const rect = containerRef.current.getBoundingClientRect();\r\n const width = Math.floor(rect.width) || 300;\r\n const height = Math.floor(rect.height) || 400;\r\n const ctx = canvasRef.current.getContext(\"2d\");\r\n if (!ctx) return;\r\n\r\n canvasRef.current.width = width;\r\n canvasRef.current.height = height;\r\n canvasRef.current.style.width = `${width}px`;\r\n canvasRef.current.style.height = `${height}px`;\r\n\r\n const colorsArray = finalColors.split(\",\").map((c) => c.trim());\r\n const pxs: Pixel[] = [];\r\n const gapValue = Math.max(parseInt(finalGap.toString(), 10), 3);\r\n\r\n for (let x = 0; x < width; x += gapValue) {\r\n for (let y = 0; y < height; y += gapValue) {\r\n const color = colorsArray[Math.floor(Math.random() * colorsArray.length)];\r\n const dx = x - width / 2;\r\n const dy = y - height / 2;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n const delay = reducedMotion ? 0 : distance;\r\n pxs.push(\r\n new Pixel(\r\n canvasRef.current!,\r\n ctx,\r\n x,\r\n y,\r\n color,\r\n getEffectiveSpeed(finalSpeed, reducedMotion),\r\n delay\r\n )\r\n );\r\n }\r\n }\r\n pixelsRef.current = pxs;\r\n };\r\n\r\n const doAnimate = (fnName: \"appear\" | \"disappear\") => {\r\n animationRef.current = requestAnimationFrame(() => doAnimate(fnName));\r\n const timeNow = performance.now();\r\n const timePassed = timeNow - timePreviousRef.current;\r\n const timeInterval = 1000 / 60;\r\n\r\n if (timePassed < timeInterval) return;\r\n timePreviousRef.current = timeNow - (timePassed % timeInterval);\r\n\r\n const ctx = canvasRef.current?.getContext(\"2d\");\r\n if (!ctx || !canvasRef.current) return;\r\n\r\n ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);\r\n\r\n let allIdle = true;\r\n for (let i = 0; i < pixelsRef.current.length; i++) {\r\n const pixel = pixelsRef.current[i];\r\n pixel[fnName]();\r\n if (!pixel.isIdle) {\r\n allIdle = false;\r\n }\r\n }\r\n if (allIdle && animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n\r\n const handleAnimation = (name: \"appear\" | \"disappear\") => {\r\n if (animationRef.current !== null) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n animationRef.current = requestAnimationFrame(() => doAnimate(name));\r\n };\r\n\r\n const onMouseEnter = () => handleAnimation(\"appear\");\r\n const onMouseLeave = () => handleAnimation(\"disappear\");\r\n const onFocus: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n handleAnimation(\"appear\");\r\n };\r\n const onBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n handleAnimation(\"disappear\");\r\n };\r\n\r\n useEffect(() => {\r\n initPixels();\r\n const observer = new ResizeObserver(() => {\r\n initPixels();\r\n });\r\n if (containerRef.current) {\r\n observer.observe(containerRef.current);\r\n }\r\n return () => {\r\n observer.disconnect();\r\n if (animationRef.current !== null) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, [finalGap, finalSpeed, finalColors, finalNoFocus]);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className={cn(\r\n \"relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900\",\r\n className\r\n )}\r\n onMouseEnter={onMouseEnter}\r\n onMouseLeave={onMouseLeave}\r\n onFocus={finalNoFocus ? undefined : onFocus}\r\n onBlur={finalNoFocus ? undefined : onBlur}\r\n tabIndex={finalNoFocus ? -1 : 0}\r\n >\r\n <canvas\r\n className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n ref={canvasRef}\r\n />\r\n <div className=\"relative z-10\">{children}</div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default PixelCard;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useRef,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function H(...s){return twMerge(clsx(s))}var M=class{constructor(t,l,p,g,S,w,o){this.width=t.width,this.height=t.height,this.ctx=l,this.x=p,this.y=g,this.color=S,this.speed=this.getRandomValue(.1,.9)*w,this.size=0,this.sizeStep=Math.random()*.4,this.minSize=.5,this.maxSizeInteger=2,this.maxSize=this.getRandomValue(this.minSize,this.maxSizeInteger),this.delay=o,this.counter=0,this.counterStep=Math.random()*4+(this.width+this.height)*.01,this.isIdle=false,this.isReverse=false,this.isShimmer=false;}getRandomValue(t,l){return Math.random()*(l-t)+t}draw(){let t=this.maxSizeInteger*.5-this.size*.5;this.ctx.fillStyle=this.color,this.ctx.fillRect(this.x+t,this.y+t,this.size,this.size);}appear(){if(this.isIdle=false,this.counter<=this.delay){this.counter+=this.counterStep;return}this.size>=this.maxSize&&(this.isShimmer=true),this.isShimmer?this.shimmer():this.size+=this.sizeStep,this.draw();}disappear(){if(this.isShimmer=false,this.counter=0,this.size<=0){this.isIdle=true;return}else this.size-=.1;this.draw();}shimmer(){this.size>=this.maxSize?this.isReverse=true:this.size<=this.minSize&&(this.isReverse=false),this.isReverse?this.size-=this.speed:this.size+=this.speed;}},L={default:{gap:5,speed:35,colors:"#71717a,#a1a1aa,#d4d4d8",noFocus:false},blue:{gap:10,speed:25,colors:"#0ea5e9,#38bdf8,#7dd3fc",noFocus:false},yellow:{gap:3,speed:20,colors:"#ca8a04,#eab308,#facc15",noFocus:false},pink:{gap:6,speed:80,colors:"#be123c,#e11d48,#f43f5e",noFocus:true}};function U(s,t){return s<=0||t?0:s>=100?100*.001:s*.001}function W({variant:s="default",gap:t,speed:l,colors:p,noFocus:g,className:S="",children:w}){let o=useRef(null),n=useRef(null),R=useRef([]),i=useRef(null),y=useRef(typeof performance<"u"?performance.now():0),F=useRef(typeof window<"u"?window.matchMedia("(prefers-reduced-motion: reduce)").matches:false).current,b=L[s]||L.default,C=t??b.gap,I=l??b.speed,A=p??b.colors,x=g??b.noFocus,E=()=>{if(!o.current||!n.current)return;let e=o.current.getBoundingClientRect(),a=Math.floor(e.width)||300,c=Math.floor(e.height)||400,d=n.current.getContext("2d");if(!d)return;n.current.width=a,n.current.height=c,n.current.style.width=`${a}px`,n.current.style.height=`${c}px`;let m=A.split(",").map(r=>r.trim()),f=[],u=Math.max(parseInt(C.toString(),10),3);for(let r=0;r<a;r+=u)for(let v=0;v<c;v+=u){let O=m[Math.floor(Math.random()*m.length)],N=r-a/2,P=v-c/2,$=Math.sqrt(N*N+P*P),G=F?0:$;f.push(new M(n.current,d,r,v,O,U(I,F),G));}R.current=f;},T=e=>{i.current=requestAnimationFrame(()=>T(e));let a=performance.now(),c=a-y.current,d=1e3/60;if(c<d)return;y.current=a-c%d;let m=n.current?.getContext("2d");if(!m||!n.current)return;m.clearRect(0,0,n.current.width,n.current.height);let f=true;for(let u=0;u<R.current.length;u++){let r=R.current[u];r[e](),r.isIdle||(f=false);}f&&i.current&&cancelAnimationFrame(i.current);},z=e=>{i.current!==null&&cancelAnimationFrame(i.current),i.current=requestAnimationFrame(()=>T(e));},D=()=>z("appear"),k=()=>z("disappear"),q=e=>{e.currentTarget.contains(e.relatedTarget)||z("appear");},B=e=>{e.currentTarget.contains(e.relatedTarget)||z("disappear");};return useEffect(()=>{E();let e=new ResizeObserver(()=>{E();});return o.current&&e.observe(o.current),()=>{e.disconnect(),i.current!==null&&cancelAnimationFrame(i.current);}},[C,I,A,x]),jsxs("div",{ref:o,className:H("relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900",S),onMouseEnter:D,onMouseLeave:k,onFocus:x?void 0:q,onBlur:x?void 0:B,tabIndex:x?-1:0,children:[jsx("canvas",{className:"absolute inset-0 w-full h-full pointer-events-none",ref:n}),jsx("div",{className:"relative z-10",children:w})]})}var ne=W;export{W as PixelCard,ne as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/pixel-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","Pixel","canvas","context","x","y","color","speed","delay","min","max","centerOffset","VARIANTS","getEffectiveSpeed","value","reducedMotion","PixelCard","variant","gap","colors","noFocus","className","children","containerRef","useRef","canvasRef","pixelsRef","animationRef","timePreviousRef","variantCfg","finalGap","finalSpeed","finalColors","finalNoFocus","initPixels","rect","width","height","ctx","colorsArray","c","pxs","gapValue","dx","dy","distance","doAnimate","fnName","timeNow","timePassed","timeInterval","allIdle","i","pixel","handleAnimation","name","onMouseEnter","onMouseLeave","onFocus","onBlur","useEffect","observer","jsxs","jsx","pixel_card_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useEffect, useRef, ReactNode } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\nclass Pixel {\r\n width: number;\r\n height: number;\r\n ctx: CanvasRenderingContext2D;\r\n x: number;\r\n y: number;\r\n color: string;\r\n speed: number;\r\n size: number;\r\n sizeStep: number;\r\n minSize: number;\r\n maxSizeInteger: number;\r\n maxSize: number;\r\n delay: number;\r\n counter: number;\r\n counterStep: number;\r\n isIdle: boolean;\r\n isReverse: boolean;\r\n isShimmer: boolean;\r\n\r\n constructor(\r\n canvas: HTMLCanvasElement,\r\n context: CanvasRenderingContext2D,\r\n x: number,\r\n y: number,\r\n color: string,\r\n speed: number,\r\n delay: number\r\n ) {\r\n this.width = canvas.width;\r\n this.height = canvas.height;\r\n this.ctx = context;\r\n this.x = x;\r\n this.y = y;\r\n this.color = color;\r\n this.speed = this.getRandomValue(0.1, 0.9) * speed;\r\n this.size = 0;\r\n this.sizeStep = Math.random() * 0.4;\r\n this.minSize = 0.5;\r\n this.maxSizeInteger = 2;\r\n this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);\r\n this.delay = delay;\r\n this.counter = 0;\r\n this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;\r\n this.isIdle = false;\r\n this.isReverse = false;\r\n this.isShimmer = false;\r\n }\r\n\r\n getRandomValue(min: number, max: number) {\r\n return Math.random() * (max - min) + min;\r\n }\r\n\r\n draw() {\r\n const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;\r\n this.ctx.fillStyle = this.color;\r\n this.ctx.fillRect(\r\n this.x + centerOffset,\r\n this.y + centerOffset,\r\n this.size,\r\n this.size\r\n );\r\n }\r\n\r\n appear() {\r\n this.isIdle = false;\r\n if (this.counter <= this.delay) {\r\n this.counter += this.counterStep;\r\n return;\r\n }\r\n if (this.size >= this.maxSize) {\r\n this.isShimmer = true;\r\n }\r\n if (this.isShimmer) {\r\n this.shimmer();\r\n } else {\r\n this.size += this.sizeStep;\r\n }\r\n this.draw();\r\n }\r\n\r\n disappear() {\r\n this.isShimmer = false;\r\n this.counter = 0;\r\n if (this.size <= 0) {\r\n this.isIdle = true;\r\n return;\r\n } else {\r\n this.size -= 0.1;\r\n }\r\n this.draw();\r\n }\r\n\r\n shimmer() {\r\n if (this.size >= this.maxSize) {\r\n this.isReverse = true;\r\n } else if (this.size <= this.minSize) {\r\n this.isReverse = false;\r\n }\r\n if (this.isReverse) {\r\n this.size -= this.speed;\r\n } else {\r\n this.size += this.speed;\r\n }\r\n }\r\n}\r\n\r\nconst VARIANTS = {\r\n default: {\r\n gap: 5,\r\n speed: 35,\r\n colors: \"#71717a,#a1a1aa,#d4d4d8\",\r\n noFocus: false,\r\n },\r\n blue: {\r\n gap: 10,\r\n speed: 25,\r\n colors: \"#0ea5e9,#38bdf8,#7dd3fc\",\r\n noFocus: false,\r\n },\r\n yellow: {\r\n gap: 3,\r\n speed: 20,\r\n colors: \"#ca8a04,#eab308,#facc15\",\r\n noFocus: false,\r\n },\r\n pink: {\r\n gap: 6,\r\n speed: 80,\r\n colors: \"#be123c,#e11d48,#f43f5e\",\r\n noFocus: true,\r\n },\r\n};\r\n\r\ninterface PixelCardProps {\r\n variant?: \"default\" | \"blue\" | \"yellow\" | \"pink\";\r\n gap?: number;\r\n speed?: number;\r\n colors?: string;\r\n noFocus?: boolean;\r\n className?: string;\r\n children: ReactNode;\r\n}\r\n\r\nfunction getEffectiveSpeed(value: number, reducedMotion: boolean) {\r\n const min = 0;\r\n const max = 100;\r\n const throttle = 0.001;\r\n\r\n if (value <= min || reducedMotion) {\r\n return min;\r\n } else if (value >= max) {\r\n return max * throttle;\r\n } else {\r\n return value * throttle;\r\n }\r\n}\r\n\r\nexport function PixelCard({\r\n variant = \"default\",\r\n gap,\r\n speed,\r\n colors,\r\n noFocus,\r\n className = \"\",\r\n children,\r\n}: PixelCardProps) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const canvasRef = useRef<HTMLCanvasElement>(null);\r\n const pixelsRef = useRef<Pixel[]>([]);\r\n const animationRef = useRef<ReturnType<typeof requestAnimationFrame> | null>(\r\n null\r\n );\r\n const timePreviousRef = useRef(\r\n typeof performance !== \"undefined\" ? performance.now() : 0\r\n );\r\n const reducedMotion = useRef(\r\n typeof window !== \"undefined\"\r\n ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\r\n : false\r\n ).current;\r\n\r\n const variantCfg = VARIANTS[variant] || VARIANTS.default;\r\n const finalGap = gap ?? variantCfg.gap;\r\n const finalSpeed = speed ?? variantCfg.speed;\r\n const finalColors = colors ?? variantCfg.colors;\r\n const finalNoFocus = noFocus ?? variantCfg.noFocus;\r\n\r\n const initPixels = () => {\r\n if (!containerRef.current || !canvasRef.current) return;\r\n\r\n const rect = containerRef.current.getBoundingClientRect();\r\n const width = Math.floor(rect.width) || 300;\r\n const height = Math.floor(rect.height) || 400;\r\n const ctx = canvasRef.current.getContext(\"2d\");\r\n if (!ctx) return;\r\n\r\n canvasRef.current.width = width;\r\n canvasRef.current.height = height;\r\n canvasRef.current.style.width = `${width}px`;\r\n canvasRef.current.style.height = `${height}px`;\r\n\r\n const colorsArray = finalColors.split(\",\").map((c) => c.trim());\r\n const pxs: Pixel[] = [];\r\n const gapValue = Math.max(parseInt(finalGap.toString(), 10), 3);\r\n\r\n for (let x = 0; x < width; x += gapValue) {\r\n for (let y = 0; y < height; y += gapValue) {\r\n const color = colorsArray[Math.floor(Math.random() * colorsArray.length)];\r\n const dx = x - width / 2;\r\n const dy = y - height / 2;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n const delay = reducedMotion ? 0 : distance;\r\n pxs.push(\r\n new Pixel(\r\n canvasRef.current!,\r\n ctx,\r\n x,\r\n y,\r\n color,\r\n getEffectiveSpeed(finalSpeed, reducedMotion),\r\n delay\r\n )\r\n );\r\n }\r\n }\r\n pixelsRef.current = pxs;\r\n };\r\n\r\n const doAnimate = (fnName: \"appear\" | \"disappear\") => {\r\n animationRef.current = requestAnimationFrame(() => doAnimate(fnName));\r\n const timeNow = performance.now();\r\n const timePassed = timeNow - timePreviousRef.current;\r\n const timeInterval = 1000 / 60;\r\n\r\n if (timePassed < timeInterval) return;\r\n timePreviousRef.current = timeNow - (timePassed % timeInterval);\r\n\r\n const ctx = canvasRef.current?.getContext(\"2d\");\r\n if (!ctx || !canvasRef.current) return;\r\n\r\n ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);\r\n\r\n let allIdle = true;\r\n for (let i = 0; i < pixelsRef.current.length; i++) {\r\n const pixel = pixelsRef.current[i];\r\n pixel[fnName]();\r\n if (!pixel.isIdle) {\r\n allIdle = false;\r\n }\r\n }\r\n if (allIdle && animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n\r\n const handleAnimation = (name: \"appear\" | \"disappear\") => {\r\n if (animationRef.current !== null) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n animationRef.current = requestAnimationFrame(() => doAnimate(name));\r\n };\r\n\r\n const onMouseEnter = () => handleAnimation(\"appear\");\r\n const onMouseLeave = () => handleAnimation(\"disappear\");\r\n const onFocus: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n handleAnimation(\"appear\");\r\n };\r\n const onBlur: React.FocusEventHandler<HTMLDivElement> = (e) => {\r\n if (e.currentTarget.contains(e.relatedTarget as Node)) return;\r\n handleAnimation(\"disappear\");\r\n };\r\n\r\n useEffect(() => {\r\n initPixels();\r\n const observer = new ResizeObserver(() => {\r\n initPixels();\r\n });\r\n if (containerRef.current) {\r\n observer.observe(containerRef.current);\r\n }\r\n return () => {\r\n observer.disconnect();\r\n if (animationRef.current !== null) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, [finalGap, finalSpeed, finalColors, finalNoFocus]);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className={cn(\r\n \"relative overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900\",\r\n className\r\n )}\r\n onMouseEnter={onMouseEnter}\r\n onMouseLeave={onMouseLeave}\r\n onFocus={finalNoFocus ? undefined : onFocus}\r\n onBlur={finalNoFocus ? undefined : onBlur}\r\n tabIndex={finalNoFocus ? -1 : 0}\r\n >\r\n <canvas\r\n className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n ref={canvasRef}\r\n />\r\n <div className=\"relative z-10\">{children}</div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default PixelCard;\r\n"]}
|
|
@@ -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(...l){return tailwindMerge.twMerge(clsx.clsx(l))}function d({options:l,value:a,onChange:t,name:f,className:o,direction:n="vertical"}){return jsxRuntime.jsx("div",{className:i("flex gap-3",n==="vertical"?"flex-col":"flex-row flex-wrap",o),children:l.map(e=>jsxRuntime.jsxs("label",{className:"inline-flex items-center gap-2 cursor-pointer",children:[jsxRuntime.jsx("button",{type:"button",role:"radio","aria-checked":a===e.value,onClick:()=>t?.(e.value),className:i("w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",a===e.value?"border-blue-500":"border-zinc-300 dark:border-zinc-600"),children:jsxRuntime.jsx(framerMotion.motion.div,{initial:false,animate:{scale:a===e.value?1:0,opacity:a===e.value?1:0},transition:{duration:.15},className:"w-2.5 h-2.5 rounded-full bg-blue-500"})}),jsxRuntime.jsx("span",{className:"text-sm",children:e.label})]},e.value))})}var N=d;exports.RadioGroup=d;exports.default=N;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/radio/index.tsx"],"names":["cn","inputs","twMerge","clsx","RadioGroup","options","value","onChange","name","className","direction","jsx","option","jsxs","motion","radio_default"],"mappings":"qNAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcO,SAASG,CAAAA,CAAW,CACzB,OAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CACA,UAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,UACd,CAAA,CAAoB,CAClB,OACEC,cAAAA,CAAC,OACC,SAAA,CAAWX,CAAAA,CACT,YAAA,CACAU,CAAAA,GAAc,UAAA,CAAa,UAAA,CAAa,oBAAA,CACxCD,CACF,EAEC,QAAA,CAAAJ,CAAAA,CAAQ,GAAA,CAAKO,CAAAA,EACZC,eAAAA,CAAC,OAAA,CAAA,CAEC,SAAA,CAAU,+CAAA,CAEV,UAAAF,cAAAA,CAAC,QAAA,CAAA,CACC,IAAA,CAAK,QAAA,CACL,IAAA,CAAK,OAAA,CACL,cAAA,CAAcL,CAAAA,GAAUM,CAAAA,CAAO,KAAA,CAC/B,OAAA,CAAS,IAAML,CAAAA,GAAWK,CAAAA,CAAO,KAAK,CAAA,CACtC,UAAWZ,CAAAA,CACT,kFAAA,CACAM,CAAAA,GAAUM,CAAAA,CAAO,KAAA,CACb,iBAAA,CACA,sCACN,CAAA,CAEA,SAAAD,cAAAA,CAACG,mBAAAA,CAAO,GAAA,CAAP,CACC,OAAA,CAAS,KAAA,CACT,OAAA,CAAS,CACP,MAAOR,CAAAA,GAAUM,CAAAA,CAAO,KAAA,CAAQ,CAAA,CAAI,CAAA,CACpC,OAAA,CAASN,CAAAA,GAAUM,CAAAA,CAAO,MAAQ,CAAA,CAAI,CACxC,CAAA,CACA,UAAA,CAAY,CAAE,QAAA,CAAU,GAAK,CAAA,CAC7B,UAAU,sCAAA,CACZ,CAAA,CACF,CAAA,CACAD,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,SAAA,CAAW,QAAA,CAAAC,EAAO,KAAA,CAAM,CAAA,CAAA,CAAA,CAzBnCA,CAAAA,CAAO,KA0Bd,CACD,CAAA,CACH,CAEJ,KAEOG,CAAAA,CAAQX","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 RadioOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\ninterface RadioGroupProps {\r\n options: RadioOption[];\r\n value?: string;\r\n onChange?: (value: string) => void;\r\n name: string;\r\n className?: string;\r\n direction?: \"horizontal\" | \"vertical\";\r\n}\r\n\r\nexport function RadioGroup({\r\n options,\r\n value,\r\n onChange,\r\n name,\r\n className,\r\n direction = \"vertical\",\r\n}: RadioGroupProps) {\r\n return (\r\n <div\r\n className={cn(\r\n \"flex gap-3\",\r\n direction === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\r\n className\r\n )}\r\n >\r\n {options.map((option) => (\r\n <label\r\n key={option.value}\r\n className=\"inline-flex items-center gap-2 cursor-pointer\"\r\n >\r\n <button\r\n type=\"button\"\r\n role=\"radio\"\r\n aria-checked={value === option.value}\r\n onClick={() => onChange?.(option.value)}\r\n className={cn(\r\n \"w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors\",\r\n value === option.value\r\n ? \"border-blue-500\"\r\n : \"border-zinc-300 dark:border-zinc-600\"\r\n )}\r\n >\r\n <motion.div\r\n initial={false}\r\n animate={{\r\n scale: value === option.value ? 1 : 0,\r\n opacity: value === option.value ? 1 : 0,\r\n }}\r\n transition={{ duration: 0.15 }}\r\n className=\"w-2.5 h-2.5 rounded-full bg-blue-500\"\r\n />\r\n </button>\r\n <span className=\"text-sm\">{option.label}</span>\r\n </label>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nexport default RadioGroup;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function i(...l){return twMerge(clsx(l))}function d({options:l,value:a,onChange:t,name:f,className:o,direction:n="vertical"}){return jsx("div",{className:i("flex gap-3",n==="vertical"?"flex-col":"flex-row flex-wrap",o),children:l.map(e=>jsxs("label",{className:"inline-flex items-center gap-2 cursor-pointer",children:[jsx("button",{type:"button",role:"radio","aria-checked":a===e.value,onClick:()=>t?.(e.value),className:i("w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",a===e.value?"border-blue-500":"border-zinc-300 dark:border-zinc-600"),children:jsx(motion.div,{initial:false,animate:{scale:a===e.value?1:0,opacity:a===e.value?1:0},transition:{duration:.15},className:"w-2.5 h-2.5 rounded-full bg-blue-500"})}),jsx("span",{className:"text-sm",children:e.label})]},e.value))})}var N=d;export{d as RadioGroup,N as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/radio/index.tsx"],"names":["cn","inputs","twMerge","clsx","RadioGroup","options","value","onChange","name","className","direction","jsx","option","jsxs","motion","radio_default"],"mappings":"yIAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCcO,SAASG,CAAAA,CAAW,CACzB,OAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CACA,UAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,UACd,CAAA,CAAoB,CAClB,OACEC,GAAAA,CAAC,OACC,SAAA,CAAWX,CAAAA,CACT,YAAA,CACAU,CAAAA,GAAc,UAAA,CAAa,UAAA,CAAa,oBAAA,CACxCD,CACF,EAEC,QAAA,CAAAJ,CAAAA,CAAQ,GAAA,CAAKO,CAAAA,EACZC,IAAAA,CAAC,OAAA,CAAA,CAEC,SAAA,CAAU,+CAAA,CAEV,UAAAF,GAAAA,CAAC,QAAA,CAAA,CACC,IAAA,CAAK,QAAA,CACL,IAAA,CAAK,OAAA,CACL,cAAA,CAAcL,CAAAA,GAAUM,CAAAA,CAAO,KAAA,CAC/B,OAAA,CAAS,IAAML,CAAAA,GAAWK,CAAAA,CAAO,KAAK,CAAA,CACtC,UAAWZ,CAAAA,CACT,kFAAA,CACAM,CAAAA,GAAUM,CAAAA,CAAO,KAAA,CACb,iBAAA,CACA,sCACN,CAAA,CAEA,SAAAD,GAAAA,CAACG,MAAAA,CAAO,GAAA,CAAP,CACC,OAAA,CAAS,KAAA,CACT,OAAA,CAAS,CACP,MAAOR,CAAAA,GAAUM,CAAAA,CAAO,KAAA,CAAQ,CAAA,CAAI,CAAA,CACpC,OAAA,CAASN,CAAAA,GAAUM,CAAAA,CAAO,MAAQ,CAAA,CAAI,CACxC,CAAA,CACA,UAAA,CAAY,CAAE,QAAA,CAAU,GAAK,CAAA,CAC7B,UAAU,sCAAA,CACZ,CAAA,CACF,CAAA,CACAD,GAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,SAAA,CAAW,QAAA,CAAAC,EAAO,KAAA,CAAM,CAAA,CAAA,CAAA,CAzBnCA,CAAAA,CAAO,KA0Bd,CACD,CAAA,CACH,CAEJ,KAEOG,CAAAA,CAAQX","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 RadioOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\ninterface RadioGroupProps {\r\n options: RadioOption[];\r\n value?: string;\r\n onChange?: (value: string) => void;\r\n name: string;\r\n className?: string;\r\n direction?: \"horizontal\" | \"vertical\";\r\n}\r\n\r\nexport function RadioGroup({\r\n options,\r\n value,\r\n onChange,\r\n name,\r\n className,\r\n direction = \"vertical\",\r\n}: RadioGroupProps) {\r\n return (\r\n <div\r\n className={cn(\r\n \"flex gap-3\",\r\n direction === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\r\n className\r\n )}\r\n >\r\n {options.map((option) => (\r\n <label\r\n key={option.value}\r\n className=\"inline-flex items-center gap-2 cursor-pointer\"\r\n >\r\n <button\r\n type=\"button\"\r\n role=\"radio\"\r\n aria-checked={value === option.value}\r\n onClick={() => onChange?.(option.value)}\r\n className={cn(\r\n \"w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors\",\r\n value === option.value\r\n ? \"border-blue-500\"\r\n : \"border-zinc-300 dark:border-zinc-600\"\r\n )}\r\n >\r\n <motion.div\r\n initial={false}\r\n animate={{\r\n scale: value === option.value ? 1 : 0,\r\n opacity: value === option.value ? 1 : 0,\r\n }}\r\n transition={{ duration: 0.15 }}\r\n className=\"w-2.5 h-2.5 rounded-full bg-blue-500\"\r\n />\r\n </button>\r\n <span className=\"text-sm\">{option.label}</span>\r\n </label>\r\n ))}\r\n </div>\r\n );\r\n}\r\n\r\nexport default RadioGroup;\r\n"]}
|
|
@@ -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 n(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function f({text:e,className:o,stagger:s=.04}){let r=Array.from(e),l={hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:s,delayChildren:.02}}},p={hidden:{opacity:0,y:20},visible:{opacity:1,y:0,transition:{type:"spring",damping:12,stiffness:100}}};return jsxRuntime.jsx(framerMotion.motion.div,{className:n("flex overflow-hidden",o),variants:l,initial:"hidden",animate:"visible",children:r.map((i,c)=>jsxRuntime.jsx(framerMotion.motion.span,{variants:p,className:"inline-block",style:{whiteSpace:i===" "?"pre":"normal"},children:i===" "?"\xA0":i},`${i}-${c}`))})}var x=f;exports.RevealText=f;exports.default=x;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/reveal-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","RevealText","text","className","stagger","letters","container","child","jsx","motion","letter","index","reveal_text_default"],"mappings":"qNAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCMO,SAASG,CAAAA,CAAW,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,EAAW,OAAA,CAAAC,CAAAA,CAAU,GAAK,CAAA,CAAoB,CAC/E,IAAMC,CAAAA,CAAU,KAAA,CAAM,KAAKH,CAAI,CAAA,CAEzBI,CAAAA,CAAY,CAChB,MAAA,CAAQ,CAAE,OAAA,CAAS,CAAE,EACrB,OAAA,CAAS,CACP,OAAA,CAAS,CAAA,CACT,UAAA,CAAY,CAAE,eAAA,CAAiBF,CAAAA,CAAS,cAAe,GAAK,CAC9D,CACF,CAAA,CAEMG,EAAQ,CACZ,MAAA,CAAQ,CAAE,OAAA,CAAS,EAAG,CAAA,CAAG,EAAG,CAAA,CAC5B,OAAA,CAAS,CACP,OAAA,CAAS,CAAA,CACT,CAAA,CAAG,EACH,UAAA,CAAY,CAAE,IAAA,CAAM,QAAA,CAAU,OAAA,CAAS,EAAA,CAAI,SAAA,CAAW,GAAI,CAC5D,CACF,CAAA,CAEA,OACEC,cAAAA,CAACC,mBAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAWZ,EAAG,sBAAA,CAAwBM,CAAS,CAAA,CAC/C,QAAA,CAAUG,CAAAA,CACV,OAAA,CAAQ,QAAA,CACR,OAAA,CAAQ,UAEP,QAAA,CAAAD,CAAAA,CAAQ,GAAA,CAAI,CAACK,CAAAA,CAAQC,CAAAA,GACpBH,cAAAA,CAACC,mBAAAA,CAAO,KAAP,CAEC,QAAA,CAAUF,CAAAA,CACV,SAAA,CAAU,cAAA,CACV,KAAA,CAAO,CAAE,UAAA,CAAYG,IAAW,GAAA,CAAM,KAAA,CAAQ,QAAS,CAAA,CAEtD,QAAA,CAAAA,CAAAA,GAAW,GAAA,CAAM,MAAA,CAAWA,GALxB,CAAA,EAAGA,CAAM,CAAA,CAAA,EAAIC,CAAK,EAMzB,CACD,CAAA,CACH,CAEJ,KAEOC,CAAAA,CAAQX","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 RevealTextProps {\r\n text: string;\r\n className?: string;\r\n stagger?: number;\r\n}\r\n\r\nexport function RevealText({ text, className, stagger = 0.04 }: RevealTextProps) {\r\n const letters = Array.from(text);\r\n\r\n const container = {\r\n hidden: { opacity: 0 },\r\n visible: {\r\n opacity: 1,\r\n transition: { staggerChildren: stagger, delayChildren: 0.02 },\r\n },\r\n };\r\n\r\n const child = {\r\n hidden: { opacity: 0, y: 20 },\r\n visible: {\r\n opacity: 1,\r\n y: 0,\r\n transition: { type: \"spring\", damping: 12, stiffness: 100 },\r\n },\r\n };\r\n\r\n return (\r\n <motion.div\r\n className={cn(\"flex overflow-hidden\", className)}\r\n variants={container}\r\n initial=\"hidden\"\r\n animate=\"visible\"\r\n >\r\n {letters.map((letter, index) => (\r\n <motion.span\r\n key={`${letter}-${index}`}\r\n variants={child}\r\n className=\"inline-block\"\r\n style={{ whiteSpace: letter === \" \" ? \"pre\" : \"normal\" }}\r\n >\r\n {letter === \" \" ? \"\\u00A0\" : letter}\r\n </motion.span>\r\n ))}\r\n </motion.div>\r\n );\r\n}\r\n\r\nexport default RevealText;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function n(...e){return twMerge(clsx(e))}function f({text:e,className:o,stagger:s=.04}){let r=Array.from(e),l={hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:s,delayChildren:.02}}},p={hidden:{opacity:0,y:20},visible:{opacity:1,y:0,transition:{type:"spring",damping:12,stiffness:100}}};return jsx(motion.div,{className:n("flex overflow-hidden",o),variants:l,initial:"hidden",animate:"visible",children:r.map((i,c)=>jsx(motion.span,{variants:p,className:"inline-block",style:{whiteSpace:i===" "?"pre":"normal"},children:i===" "?"\xA0":i},`${i}-${c}`))})}var x=f;export{f as RevealText,x as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/reveal-text/index.tsx"],"names":["cn","inputs","twMerge","clsx","RevealText","text","className","stagger","letters","container","child","jsx","motion","letter","index","reveal_text_default"],"mappings":"oIAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCMO,SAASG,CAAAA,CAAW,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,EAAW,OAAA,CAAAC,CAAAA,CAAU,GAAK,CAAA,CAAoB,CAC/E,IAAMC,CAAAA,CAAU,KAAA,CAAM,KAAKH,CAAI,CAAA,CAEzBI,CAAAA,CAAY,CAChB,MAAA,CAAQ,CAAE,OAAA,CAAS,CAAE,EACrB,OAAA,CAAS,CACP,OAAA,CAAS,CAAA,CACT,UAAA,CAAY,CAAE,eAAA,CAAiBF,CAAAA,CAAS,cAAe,GAAK,CAC9D,CACF,CAAA,CAEMG,EAAQ,CACZ,MAAA,CAAQ,CAAE,OAAA,CAAS,EAAG,CAAA,CAAG,EAAG,CAAA,CAC5B,OAAA,CAAS,CACP,OAAA,CAAS,CAAA,CACT,CAAA,CAAG,EACH,UAAA,CAAY,CAAE,IAAA,CAAM,QAAA,CAAU,OAAA,CAAS,EAAA,CAAI,SAAA,CAAW,GAAI,CAC5D,CACF,CAAA,CAEA,OACEC,GAAAA,CAACC,MAAAA,CAAO,GAAA,CAAP,CACC,SAAA,CAAWZ,EAAG,sBAAA,CAAwBM,CAAS,CAAA,CAC/C,QAAA,CAAUG,CAAAA,CACV,OAAA,CAAQ,QAAA,CACR,OAAA,CAAQ,UAEP,QAAA,CAAAD,CAAAA,CAAQ,GAAA,CAAI,CAACK,CAAAA,CAAQC,CAAAA,GACpBH,GAAAA,CAACC,MAAAA,CAAO,KAAP,CAEC,QAAA,CAAUF,CAAAA,CACV,SAAA,CAAU,cAAA,CACV,KAAA,CAAO,CAAE,UAAA,CAAYG,IAAW,GAAA,CAAM,KAAA,CAAQ,QAAS,CAAA,CAEtD,QAAA,CAAAA,CAAAA,GAAW,GAAA,CAAM,MAAA,CAAWA,GALxB,CAAA,EAAGA,CAAM,CAAA,CAAA,EAAIC,CAAK,EAMzB,CACD,CAAA,CACH,CAEJ,KAEOC,CAAAA,CAAQX","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 RevealTextProps {\r\n text: string;\r\n className?: string;\r\n stagger?: number;\r\n}\r\n\r\nexport function RevealText({ text, className, stagger = 0.04 }: RevealTextProps) {\r\n const letters = Array.from(text);\r\n\r\n const container = {\r\n hidden: { opacity: 0 },\r\n visible: {\r\n opacity: 1,\r\n transition: { staggerChildren: stagger, delayChildren: 0.02 },\r\n },\r\n };\r\n\r\n const child = {\r\n hidden: { opacity: 0, y: 20 },\r\n visible: {\r\n opacity: 1,\r\n y: 0,\r\n transition: { type: \"spring\", damping: 12, stiffness: 100 },\r\n },\r\n };\r\n\r\n return (\r\n <motion.div\r\n className={cn(\"flex overflow-hidden\", className)}\r\n variants={container}\r\n initial=\"hidden\"\r\n animate=\"visible\"\r\n >\r\n {letters.map((letter, index) => (\r\n <motion.span\r\n key={`${letter}-${index}`}\r\n variants={child}\r\n className=\"inline-block\"\r\n style={{ whiteSpace: letter === \" \" ? \"pre\" : \"normal\" }}\r\n >\r\n {letter === \" \" ? \"\\u00A0\" : letter}\r\n </motion.span>\r\n ))}\r\n </motion.div>\r\n );\r\n}\r\n\r\nexport default RevealText;\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 n(...o){return tailwindMerge.twMerge(clsx.clsx(o))}function h({options:o,value:s,onChange:m,placeholder:f="Select...",className:b,label:c}){let[r,i]=react.useState(false),l=react.useRef(null),u=o.find(e=>e.value===s);return react.useEffect(()=>{let e=p=>{l.current&&!l.current.contains(p.target)&&i(false);};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),jsxRuntime.jsxs("div",{className:"w-full",children:[c&&jsxRuntime.jsx("label",{className:"block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1",children:c}),jsxRuntime.jsxs("div",{ref:l,className:n("relative",b),children:[jsxRuntime.jsxs("button",{type:"button",onClick:()=>i(!r),className:n("w-full px-4 py-2 rounded-lg text-left","bg-white dark:bg-zinc-900","border border-zinc-300 dark:border-zinc-700","flex items-center justify-between","focus:outline-none focus:ring-2 focus:ring-blue-500","transition-all duration-200"),children:[jsxRuntime.jsx("span",{className:u?"":"text-zinc-400",children:u?.label||f}),jsxRuntime.jsx(framerMotion.motion.svg,{animate:{rotate:r?180:0},transition:{duration:.2},className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),jsxRuntime.jsx(framerMotion.AnimatePresence,{children:r&&jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.15},className:n("absolute z-50 w-full mt-1 rounded-lg overflow-hidden","bg-white dark:bg-zinc-900","border border-zinc-300 dark:border-zinc-700","shadow-lg"),children:o.map(e=>jsxRuntime.jsx("button",{type:"button",onClick:()=>{m?.(e.value),i(false);},className:n("w-full px-4 py-2 text-left","hover:bg-zinc-100 dark:hover:bg-zinc-800","transition-colors",s===e.value&&"bg-blue-50 dark:bg-blue-900/20 text-blue-600"),children:e.label},e.value))})})]})]})}var L=h;exports.Select=h;exports.default=L;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/select/index.tsx"],"names":["cn","inputs","twMerge","clsx","Select","options","value","onChange","placeholder","className","label","isOpen","setIsOpen","useState","ref","useRef","selectedOption","opt","useEffect","handleClickOutside","e","jsxs","jsx","motion","AnimatePresence","option","select_default"],"mappings":"4OAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCeO,SAASG,CAAAA,CAAO,CAAE,QAAAC,CAAAA,CAAS,KAAA,CAAAC,CAAAA,CAAO,QAAA,CAAAC,CAAAA,CAAU,WAAA,CAAAC,CAAAA,CAAc,WAAA,CAAa,UAAAC,CAAAA,CAAW,KAAA,CAAAC,CAAM,CAAA,CAAgB,CAC7G,GAAM,CAACC,CAAAA,CAAQC,CAAS,CAAA,CAAIC,cAAAA,CAAS,KAAK,CAAA,CACpCC,CAAAA,CAAMC,YAAAA,CAAuB,IAAI,CAAA,CAEjCC,EAAiBX,CAAAA,CAAQ,IAAA,CAAMY,CAAAA,EAAQA,CAAAA,CAAI,KAAA,GAAUX,CAAK,CAAA,CAEhE,OAAAY,gBAAU,IAAM,CACd,IAAMC,CAAAA,CAAsBC,CAAAA,EAAkB,CACxCN,CAAAA,CAAI,OAAA,EAAW,CAACA,CAAAA,CAAI,OAAA,CAAQ,QAAA,CAASM,CAAAA,CAAE,MAAc,CAAA,EACvDR,CAAAA,CAAU,KAAK,EAEnB,CAAA,CACA,OAAA,QAAA,CAAS,gBAAA,CAAiB,WAAA,CAAaO,CAAkB,CAAA,CAClD,IAAM,QAAA,CAAS,oBAAoB,WAAA,CAAaA,CAAkB,CAC3E,CAAA,CAAG,EAAE,CAAA,CAGHE,eAAAA,CAAC,OAAI,SAAA,CAAU,QAAA,CACZ,QAAA,CAAA,CAAAX,CAAAA,EACCY,cAAAA,CAAC,OAAA,CAAA,CAAM,SAAA,CAAU,iEAAA,CACd,SAAAZ,CAAAA,CACH,CAAA,CAEFW,eAAAA,CAAC,KAAA,CAAA,CAAI,GAAA,CAAKP,CAAAA,CAAK,SAAA,CAAWd,CAAAA,CAAG,WAAYS,CAAS,CAAA,CAChD,QAAA,CAAA,CAAAY,eAAAA,CAAC,UACC,IAAA,CAAK,QAAA,CACL,OAAA,CAAS,IAAMT,EAAU,CAACD,CAAM,CAAA,CAChC,SAAA,CAAWX,CAAAA,CACT,uCAAA,CACA,2BAAA,CACA,6CAAA,CACA,oCACA,qDAAA,CACA,6BACF,CAAA,CAEA,QAAA,CAAA,CAAAsB,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAWN,CAAAA,CAAiB,GAAK,eAAA,CACpC,QAAA,CAAAA,CAAAA,EAAgB,KAAA,EAASR,CAAAA,CAC5B,CAAA,CACAc,cAAAA,CAACC,mBAAAA,CAAO,IAAP,CACC,OAAA,CAAS,CAAE,MAAA,CAAQZ,CAAAA,CAAS,GAAA,CAAM,CAAE,CAAA,CACpC,WAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAC5B,SAAA,CAAU,SAAA,CACV,IAAA,CAAK,MAAA,CACL,OAAO,cAAA,CACP,OAAA,CAAQ,WAAA,CAER,QAAA,CAAAW,cAAAA,CAAC,MAAA,CAAA,CAAK,aAAA,CAAc,OAAA,CAAQ,eAAe,OAAA,CAAQ,WAAA,CAAa,CAAA,CAAG,CAAA,CAAE,gBAAA,CAAiB,CAAA,CACxF,CAAA,CAAA,CACF,CAAA,CACAA,eAACE,4BAAAA,CAAA,CACE,QAAA,CAAAb,CAAAA,EACCW,eAACC,mBAAAA,CAAO,GAAA,CAAP,CACC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,GAAI,CAAA,CAC9B,OAAA,CAAS,CAAE,OAAA,CAAS,EAAG,CAAA,CAAG,CAAE,CAAA,CAC5B,IAAA,CAAM,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,GAAI,CAAA,CAC3B,UAAA,CAAY,CAAE,QAAA,CAAU,GAAK,CAAA,CAC7B,SAAA,CAAWvB,CAAAA,CACT,uDACA,2BAAA,CACA,6CAAA,CACA,WACF,CAAA,CAEC,QAAA,CAAAK,CAAAA,CAAQ,GAAA,CAAKoB,CAAAA,EACZH,eAAC,QAAA,CAAA,CAEC,IAAA,CAAK,QAAA,CACL,OAAA,CAAS,IAAM,CACbf,CAAAA,GAAWkB,CAAAA,CAAO,KAAK,CAAA,CACvBb,CAAAA,CAAU,KAAK,EACjB,CAAA,CACA,SAAA,CAAWZ,CAAAA,CACT,4BAAA,CACA,2CACA,mBAAA,CACAM,CAAAA,GAAUmB,CAAAA,CAAO,KAAA,EAAS,8CAC5B,CAAA,CAEC,QAAA,CAAAA,CAAAA,CAAO,OAbHA,CAAAA,CAAO,KAcd,CACD,CAAA,CACH,EAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAEJ,KAEOC,CAAAA,CAAQtB","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, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SelectOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\ninterface SelectProps {\r\n options: SelectOption[];\r\n value?: string;\r\n onChange?: (value: string) => void;\r\n placeholder?: string;\r\n className?: string;\r\n label?: string;\r\n}\r\n\r\nexport function Select({ options, value, onChange, placeholder = \"Select...\", className, label }: SelectProps) {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n const selectedOption = options.find((opt) => opt.value === value);\r\n\r\n useEffect(() => {\r\n const handleClickOutside = (e: MouseEvent) => {\r\n if (ref.current && !ref.current.contains(e.target as Node)) {\r\n setIsOpen(false);\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, []);\r\n\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 <div ref={ref} className={cn(\"relative\", className)}>\r\n <button\r\n type=\"button\"\r\n onClick={() => setIsOpen(!isOpen)}\r\n className={cn(\r\n \"w-full px-4 py-2 rounded-lg text-left\",\r\n \"bg-white dark:bg-zinc-900\",\r\n \"border border-zinc-300 dark:border-zinc-700\",\r\n \"flex items-center justify-between\",\r\n \"focus:outline-none focus:ring-2 focus:ring-blue-500\",\r\n \"transition-all duration-200\"\r\n )}\r\n >\r\n <span className={selectedOption ? \"\" : \"text-zinc-400\"}>\r\n {selectedOption?.label || placeholder}\r\n </span>\r\n <motion.svg\r\n animate={{ rotate: isOpen ? 180 : 0 }}\r\n transition={{ duration: 0.2 }}\r\n className=\"w-5 h-5\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n </motion.svg>\r\n </button>\r\n <AnimatePresence>\r\n {isOpen && (\r\n <motion.div\r\n initial={{ opacity: 0, y: -10 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n exit={{ opacity: 0, y: -10 }}\r\n transition={{ duration: 0.15 }}\r\n className={cn(\r\n \"absolute z-50 w-full mt-1 rounded-lg overflow-hidden\",\r\n \"bg-white dark:bg-zinc-900\",\r\n \"border border-zinc-300 dark:border-zinc-700\",\r\n \"shadow-lg\"\r\n )}\r\n >\r\n {options.map((option) => (\r\n <button\r\n key={option.value}\r\n type=\"button\"\r\n onClick={() => {\r\n onChange?.(option.value);\r\n setIsOpen(false);\r\n }}\r\n className={cn(\r\n \"w-full px-4 py-2 text-left\",\r\n \"hover:bg-zinc-100 dark:hover:bg-zinc-800\",\r\n \"transition-colors\",\r\n value === option.value && \"bg-blue-50 dark:bg-blue-900/20 text-blue-600\"\r\n )}\r\n >\r\n {option.label}\r\n </button>\r\n ))}\r\n </motion.div>\r\n )}\r\n </AnimatePresence>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Select;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useState,useRef,useEffect}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 n(...o){return twMerge(clsx(o))}function h({options:o,value:s,onChange:m,placeholder:f="Select...",className:b,label:c}){let[r,i]=useState(false),l=useRef(null),u=o.find(e=>e.value===s);return useEffect(()=>{let e=p=>{l.current&&!l.current.contains(p.target)&&i(false);};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),jsxs("div",{className:"w-full",children:[c&&jsx("label",{className:"block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1",children:c}),jsxs("div",{ref:l,className:n("relative",b),children:[jsxs("button",{type:"button",onClick:()=>i(!r),className:n("w-full px-4 py-2 rounded-lg text-left","bg-white dark:bg-zinc-900","border border-zinc-300 dark:border-zinc-700","flex items-center justify-between","focus:outline-none focus:ring-2 focus:ring-blue-500","transition-all duration-200"),children:[jsx("span",{className:u?"":"text-zinc-400",children:u?.label||f}),jsx(motion.svg,{animate:{rotate:r?180:0},transition:{duration:.2},className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),jsx(AnimatePresence,{children:r&&jsx(motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.15},className:n("absolute z-50 w-full mt-1 rounded-lg overflow-hidden","bg-white dark:bg-zinc-900","border border-zinc-300 dark:border-zinc-700","shadow-lg"),children:o.map(e=>jsx("button",{type:"button",onClick:()=>{m?.(e.value),i(false);},className:n("w-full px-4 py-2 text-left","hover:bg-zinc-100 dark:hover:bg-zinc-800","transition-colors",s===e.value&&"bg-blue-50 dark:bg-blue-900/20 text-blue-600"),children:e.label},e.value))})})]})]})}var L=h;export{h as Select,L as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/select/index.tsx"],"names":["cn","inputs","twMerge","clsx","Select","options","value","onChange","placeholder","className","label","isOpen","setIsOpen","useState","ref","useRef","selectedOption","opt","useEffect","handleClickOutside","e","jsxs","jsx","motion","AnimatePresence","option","select_default"],"mappings":"uMAGO,SAASA,KAAMC,CAAAA,CAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCeO,SAASG,CAAAA,CAAO,CAAE,QAAAC,CAAAA,CAAS,KAAA,CAAAC,CAAAA,CAAO,QAAA,CAAAC,CAAAA,CAAU,WAAA,CAAAC,CAAAA,CAAc,WAAA,CAAa,UAAAC,CAAAA,CAAW,KAAA,CAAAC,CAAM,CAAA,CAAgB,CAC7G,GAAM,CAACC,CAAAA,CAAQC,CAAS,CAAA,CAAIC,QAAAA,CAAS,KAAK,CAAA,CACpCC,CAAAA,CAAMC,MAAAA,CAAuB,IAAI,CAAA,CAEjCC,EAAiBX,CAAAA,CAAQ,IAAA,CAAMY,CAAAA,EAAQA,CAAAA,CAAI,KAAA,GAAUX,CAAK,CAAA,CAEhE,OAAAY,UAAU,IAAM,CACd,IAAMC,CAAAA,CAAsBC,CAAAA,EAAkB,CACxCN,CAAAA,CAAI,OAAA,EAAW,CAACA,CAAAA,CAAI,OAAA,CAAQ,QAAA,CAASM,CAAAA,CAAE,MAAc,CAAA,EACvDR,CAAAA,CAAU,KAAK,EAEnB,CAAA,CACA,OAAA,QAAA,CAAS,gBAAA,CAAiB,WAAA,CAAaO,CAAkB,CAAA,CAClD,IAAM,QAAA,CAAS,oBAAoB,WAAA,CAAaA,CAAkB,CAC3E,CAAA,CAAG,EAAE,CAAA,CAGHE,IAAAA,CAAC,OAAI,SAAA,CAAU,QAAA,CACZ,QAAA,CAAA,CAAAX,CAAAA,EACCY,GAAAA,CAAC,OAAA,CAAA,CAAM,SAAA,CAAU,iEAAA,CACd,SAAAZ,CAAAA,CACH,CAAA,CAEFW,IAAAA,CAAC,KAAA,CAAA,CAAI,GAAA,CAAKP,CAAAA,CAAK,SAAA,CAAWd,CAAAA,CAAG,WAAYS,CAAS,CAAA,CAChD,QAAA,CAAA,CAAAY,IAAAA,CAAC,UACC,IAAA,CAAK,QAAA,CACL,OAAA,CAAS,IAAMT,EAAU,CAACD,CAAM,CAAA,CAChC,SAAA,CAAWX,CAAAA,CACT,uCAAA,CACA,2BAAA,CACA,6CAAA,CACA,oCACA,qDAAA,CACA,6BACF,CAAA,CAEA,QAAA,CAAA,CAAAsB,GAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAWN,CAAAA,CAAiB,GAAK,eAAA,CACpC,QAAA,CAAAA,CAAAA,EAAgB,KAAA,EAASR,CAAAA,CAC5B,CAAA,CACAc,GAAAA,CAACC,MAAAA,CAAO,IAAP,CACC,OAAA,CAAS,CAAE,MAAA,CAAQZ,CAAAA,CAAS,GAAA,CAAM,CAAE,CAAA,CACpC,WAAY,CAAE,QAAA,CAAU,EAAI,CAAA,CAC5B,SAAA,CAAU,SAAA,CACV,IAAA,CAAK,MAAA,CACL,OAAO,cAAA,CACP,OAAA,CAAQ,WAAA,CAER,QAAA,CAAAW,GAAAA,CAAC,MAAA,CAAA,CAAK,aAAA,CAAc,OAAA,CAAQ,eAAe,OAAA,CAAQ,WAAA,CAAa,CAAA,CAAG,CAAA,CAAE,gBAAA,CAAiB,CAAA,CACxF,CAAA,CAAA,CACF,CAAA,CACAA,IAACE,eAAAA,CAAA,CACE,QAAA,CAAAb,CAAAA,EACCW,IAACC,MAAAA,CAAO,GAAA,CAAP,CACC,OAAA,CAAS,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,GAAI,CAAA,CAC9B,OAAA,CAAS,CAAE,OAAA,CAAS,EAAG,CAAA,CAAG,CAAE,CAAA,CAC5B,IAAA,CAAM,CAAE,OAAA,CAAS,CAAA,CAAG,CAAA,CAAG,GAAI,CAAA,CAC3B,UAAA,CAAY,CAAE,QAAA,CAAU,GAAK,CAAA,CAC7B,SAAA,CAAWvB,CAAAA,CACT,uDACA,2BAAA,CACA,6CAAA,CACA,WACF,CAAA,CAEC,QAAA,CAAAK,CAAAA,CAAQ,GAAA,CAAKoB,CAAAA,EACZH,IAAC,QAAA,CAAA,CAEC,IAAA,CAAK,QAAA,CACL,OAAA,CAAS,IAAM,CACbf,CAAAA,GAAWkB,CAAAA,CAAO,KAAK,CAAA,CACvBb,CAAAA,CAAU,KAAK,EACjB,CAAA,CACA,SAAA,CAAWZ,CAAAA,CACT,4BAAA,CACA,2CACA,mBAAA,CACAM,CAAAA,GAAUmB,CAAAA,CAAO,KAAA,EAAS,8CAC5B,CAAA,CAEC,QAAA,CAAAA,CAAAA,CAAO,OAbHA,CAAAA,CAAO,KAcd,CACD,CAAA,CACH,EAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CAEJ,KAEOC,CAAAA,CAAQtB","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, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SelectOption {\r\n value: string;\r\n label: string;\r\n}\r\n\r\ninterface SelectProps {\r\n options: SelectOption[];\r\n value?: string;\r\n onChange?: (value: string) => void;\r\n placeholder?: string;\r\n className?: string;\r\n label?: string;\r\n}\r\n\r\nexport function Select({ options, value, onChange, placeholder = \"Select...\", className, label }: SelectProps) {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n const selectedOption = options.find((opt) => opt.value === value);\r\n\r\n useEffect(() => {\r\n const handleClickOutside = (e: MouseEvent) => {\r\n if (ref.current && !ref.current.contains(e.target as Node)) {\r\n setIsOpen(false);\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n }, []);\r\n\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 <div ref={ref} className={cn(\"relative\", className)}>\r\n <button\r\n type=\"button\"\r\n onClick={() => setIsOpen(!isOpen)}\r\n className={cn(\r\n \"w-full px-4 py-2 rounded-lg text-left\",\r\n \"bg-white dark:bg-zinc-900\",\r\n \"border border-zinc-300 dark:border-zinc-700\",\r\n \"flex items-center justify-between\",\r\n \"focus:outline-none focus:ring-2 focus:ring-blue-500\",\r\n \"transition-all duration-200\"\r\n )}\r\n >\r\n <span className={selectedOption ? \"\" : \"text-zinc-400\"}>\r\n {selectedOption?.label || placeholder}\r\n </span>\r\n <motion.svg\r\n animate={{ rotate: isOpen ? 180 : 0 }}\r\n transition={{ duration: 0.2 }}\r\n className=\"w-5 h-5\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\r\n </motion.svg>\r\n </button>\r\n <AnimatePresence>\r\n {isOpen && (\r\n <motion.div\r\n initial={{ opacity: 0, y: -10 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n exit={{ opacity: 0, y: -10 }}\r\n transition={{ duration: 0.15 }}\r\n className={cn(\r\n \"absolute z-50 w-full mt-1 rounded-lg overflow-hidden\",\r\n \"bg-white dark:bg-zinc-900\",\r\n \"border border-zinc-300 dark:border-zinc-700\",\r\n \"shadow-lg\"\r\n )}\r\n >\r\n {options.map((option) => (\r\n <button\r\n key={option.value}\r\n type=\"button\"\r\n onClick={() => {\r\n onChange?.(option.value);\r\n setIsOpen(false);\r\n }}\r\n className={cn(\r\n \"w-full px-4 py-2 text-left\",\r\n \"hover:bg-zinc-100 dark:hover:bg-zinc-800\",\r\n \"transition-colors\",\r\n value === option.value && \"bg-blue-50 dark:bg-blue-900/20 text-blue-600\"\r\n )}\r\n >\r\n {option.label}\r\n </button>\r\n ))}\r\n </motion.div>\r\n )}\r\n </AnimatePresence>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default Select;\r\n"]}
|
|
@@ -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 react=require('react'),framerMotion=require('framer-motion'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function c(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function S({className:e}){let[l,t]=react.useState(false),o=framerMotion.useMotionValue(-100),s=framerMotion.useMotionValue(-100),n={damping:25,stiffness:700},p=framerMotion.useSpring(o,n),a=framerMotion.useSpring(s,n);return react.useEffect(()=>{let r=u=>{o.set(u.clientX-16),s.set(u.clientY-16),t(true);},i=()=>{t(false);};return window.addEventListener("mousemove",r),window.addEventListener("mouseleave",i),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseleave",i);}},[o,s]),jsxRuntime.jsx(framerMotion.motion.div,{className:c("pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference",l?"opacity-100":"opacity-0",e),style:{x:p,y:a},transition:{type:"spring",stiffness:500,damping:28}})}var M=S;exports.SmoothCursor=S;exports.default=M;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/smooth-cursor/index.tsx"],"names":["cn","inputs","twMerge","clsx","SmoothCursor","className","isVisible","setIsVisible","useState","cursorX","useMotionValue","cursorY","springConfig","cursorXSpring","useSpring","cursorYSpring","useEffect","moveCursor","e","hideCursor","jsx","motion","smooth_cursor_default"],"mappings":"4OAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,sBAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,SAASG,CAAAA,CAAa,CAAE,SAAA,CAAAC,CAAU,CAAA,CAAsB,CAC7D,GAAM,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,eAAS,KAAK,CAAA,CAC1CC,CAAAA,CAAUC,2BAAAA,CAAe,IAAI,CAAA,CAC7BC,CAAAA,CAAUD,4BAAe,IAAI,CAAA,CAE7BE,EAAe,CAAE,OAAA,CAAS,EAAA,CAAI,SAAA,CAAW,GAAI,CAAA,CAC7CC,CAAAA,CAAgBC,uBAAUL,CAAAA,CAASG,CAAY,EAC/CG,CAAAA,CAAgBD,sBAAAA,CAAUH,CAAAA,CAASC,CAAY,EAErD,OAAAI,eAAAA,CAAU,IAAM,CACd,IAAMC,EAAcC,CAAAA,EAAkB,CACpCT,CAAAA,CAAQ,GAAA,CAAIS,EAAE,OAAA,CAAU,EAAE,CAAA,CAC1BP,CAAAA,CAAQ,IAAIO,CAAAA,CAAE,OAAA,CAAU,EAAE,CAAA,CAC1BX,EAAa,IAAI,EACnB,EAEMY,CAAAA,CAAa,IAAM,CACvBZ,CAAAA,CAAa,KAAK,EACpB,CAAA,CAEA,cAAO,gBAAA,CAAiB,WAAA,CAAaU,CAAU,CAAA,CAC/C,OAAO,gBAAA,CAAiB,YAAA,CAAcE,CAAU,CAAA,CAEzC,IAAM,CACX,MAAA,CAAO,oBAAoB,WAAA,CAAaF,CAAU,EAClD,MAAA,CAAO,mBAAA,CAAoB,YAAA,CAAcE,CAAU,EACrD,CACF,CAAA,CAAG,CAACV,CAAAA,CAASE,CAAO,CAAC,CAAA,CAGnBS,cAAAA,CAACC,mBAAAA,CAAO,IAAP,CACC,SAAA,CAAWrB,EACT,mGAAA,CACAM,CAAAA,CAAY,cAAgB,WAAA,CAC5BD,CACF,CAAA,CACA,KAAA,CAAO,CACL,CAAA,CAAGQ,CAAAA,CACH,EAAGE,CACL,CAAA,CACA,WAAY,CACV,IAAA,CAAM,QAAA,CACN,SAAA,CAAW,IACX,OAAA,CAAS,EACX,EACF,CAEJ,KAEOO,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 { useEffect, useState } from \"react\";\r\nimport { motion, useMotionValue, useSpring } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SmoothCursorProps {\r\n className?: string;\r\n}\r\n\r\nexport function SmoothCursor({ className }: SmoothCursorProps) {\r\n const [isVisible, setIsVisible] = useState(false);\r\n const cursorX = useMotionValue(-100);\r\n const cursorY = useMotionValue(-100);\r\n\r\n const springConfig = { damping: 25, stiffness: 700 };\r\n const cursorXSpring = useSpring(cursorX, springConfig);\r\n const cursorYSpring = useSpring(cursorY, springConfig);\r\n\r\n useEffect(() => {\r\n const moveCursor = (e: MouseEvent) => {\r\n cursorX.set(e.clientX - 16);\r\n cursorY.set(e.clientY - 16);\r\n setIsVisible(true);\r\n };\r\n\r\n const hideCursor = () => {\r\n setIsVisible(false);\r\n };\r\n\r\n window.addEventListener(\"mousemove\", moveCursor);\r\n window.addEventListener(\"mouseleave\", hideCursor);\r\n\r\n return () => {\r\n window.removeEventListener(\"mousemove\", moveCursor);\r\n window.removeEventListener(\"mouseleave\", hideCursor);\r\n };\r\n }, [cursorX, cursorY]);\r\n\r\n return (\r\n <motion.div\r\n className={cn(\r\n \"pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference\",\r\n isVisible ? \"opacity-100\" : \"opacity-0\",\r\n className\r\n )}\r\n style={{\r\n x: cursorXSpring,\r\n y: cursorYSpring,\r\n }}\r\n transition={{\r\n type: \"spring\",\r\n stiffness: 500,\r\n damping: 28,\r\n }}\r\n />\r\n );\r\n}\r\n\r\nexport default SmoothCursor;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useState,useEffect}from'react';import {useMotionValue,useSpring,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx}from'react/jsx-runtime';function c(...e){return twMerge(clsx(e))}function S({className:e}){let[l,t]=useState(false),o=useMotionValue(-100),s=useMotionValue(-100),n={damping:25,stiffness:700},p=useSpring(o,n),a=useSpring(s,n);return useEffect(()=>{let r=u=>{o.set(u.clientX-16),s.set(u.clientY-16),t(true);},i=()=>{t(false);};return window.addEventListener("mousemove",r),window.addEventListener("mouseleave",i),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("mouseleave",i);}},[o,s]),jsx(motion.div,{className:c("pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference",l?"opacity-100":"opacity-0",e),style:{x:p,y:a},transition:{type:"spring",stiffness:500,damping:28}})}var M=S;export{S as SmoothCursor,M as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/smooth-cursor/index.tsx"],"names":["cn","inputs","twMerge","clsx","SmoothCursor","className","isVisible","setIsVisible","useState","cursorX","useMotionValue","cursorY","springConfig","cursorXSpring","useSpring","cursorYSpring","useEffect","moveCursor","e","hideCursor","jsx","motion","smooth_cursor_default"],"mappings":"oMAGO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAAsB,CAC1C,OAAOC,QAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCKO,SAASG,CAAAA,CAAa,CAAE,SAAA,CAAAC,CAAU,CAAA,CAAsB,CAC7D,GAAM,CAACC,CAAAA,CAAWC,CAAY,CAAA,CAAIC,SAAS,KAAK,CAAA,CAC1CC,CAAAA,CAAUC,cAAAA,CAAe,IAAI,CAAA,CAC7BC,CAAAA,CAAUD,eAAe,IAAI,CAAA,CAE7BE,EAAe,CAAE,OAAA,CAAS,EAAA,CAAI,SAAA,CAAW,GAAI,CAAA,CAC7CC,CAAAA,CAAgBC,UAAUL,CAAAA,CAASG,CAAY,EAC/CG,CAAAA,CAAgBD,SAAAA,CAAUH,CAAAA,CAASC,CAAY,EAErD,OAAAI,SAAAA,CAAU,IAAM,CACd,IAAMC,EAAcC,CAAAA,EAAkB,CACpCT,CAAAA,CAAQ,GAAA,CAAIS,EAAE,OAAA,CAAU,EAAE,CAAA,CAC1BP,CAAAA,CAAQ,IAAIO,CAAAA,CAAE,OAAA,CAAU,EAAE,CAAA,CAC1BX,EAAa,IAAI,EACnB,EAEMY,CAAAA,CAAa,IAAM,CACvBZ,CAAAA,CAAa,KAAK,EACpB,CAAA,CAEA,cAAO,gBAAA,CAAiB,WAAA,CAAaU,CAAU,CAAA,CAC/C,OAAO,gBAAA,CAAiB,YAAA,CAAcE,CAAU,CAAA,CAEzC,IAAM,CACX,MAAA,CAAO,oBAAoB,WAAA,CAAaF,CAAU,EAClD,MAAA,CAAO,mBAAA,CAAoB,YAAA,CAAcE,CAAU,EACrD,CACF,CAAA,CAAG,CAACV,CAAAA,CAASE,CAAO,CAAC,CAAA,CAGnBS,GAAAA,CAACC,MAAAA,CAAO,IAAP,CACC,SAAA,CAAWrB,EACT,mGAAA,CACAM,CAAAA,CAAY,cAAgB,WAAA,CAC5BD,CACF,CAAA,CACA,KAAA,CAAO,CACL,CAAA,CAAGQ,CAAAA,CACH,EAAGE,CACL,CAAA,CACA,WAAY,CACV,IAAA,CAAM,QAAA,CACN,SAAA,CAAW,IACX,OAAA,CAAS,EACX,EACF,CAEJ,KAEOO,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 { useEffect, useState } from \"react\";\r\nimport { motion, useMotionValue, useSpring } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface SmoothCursorProps {\r\n className?: string;\r\n}\r\n\r\nexport function SmoothCursor({ className }: SmoothCursorProps) {\r\n const [isVisible, setIsVisible] = useState(false);\r\n const cursorX = useMotionValue(-100);\r\n const cursorY = useMotionValue(-100);\r\n\r\n const springConfig = { damping: 25, stiffness: 700 };\r\n const cursorXSpring = useSpring(cursorX, springConfig);\r\n const cursorYSpring = useSpring(cursorY, springConfig);\r\n\r\n useEffect(() => {\r\n const moveCursor = (e: MouseEvent) => {\r\n cursorX.set(e.clientX - 16);\r\n cursorY.set(e.clientY - 16);\r\n setIsVisible(true);\r\n };\r\n\r\n const hideCursor = () => {\r\n setIsVisible(false);\r\n };\r\n\r\n window.addEventListener(\"mousemove\", moveCursor);\r\n window.addEventListener(\"mouseleave\", hideCursor);\r\n\r\n return () => {\r\n window.removeEventListener(\"mousemove\", moveCursor);\r\n window.removeEventListener(\"mouseleave\", hideCursor);\r\n };\r\n }, [cursorX, cursorY]);\r\n\r\n return (\r\n <motion.div\r\n className={cn(\r\n \"pointer-events-none fixed left-0 top-0 z-50 h-8 w-8 rounded-full bg-zinc-400 mix-blend-difference\",\r\n isVisible ? \"opacity-100\" : \"opacity-0\",\r\n className\r\n )}\r\n style={{\r\n x: cursorXSpring,\r\n y: cursorYSpring,\r\n }}\r\n transition={{\r\n type: \"spring\",\r\n stiffness: 500,\r\n damping: 28,\r\n }}\r\n />\r\n );\r\n}\r\n\r\nexport default SmoothCursor;\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":"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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, 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"]}
|