bynana-ui 1.3.0 → 1.5.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/animated-circular-progress/index.js +2 -0
- package/dist/animated-circular-progress/index.js.map +1 -0
- package/dist/animated-circular-progress/index.mjs +2 -0
- package/dist/animated-circular-progress/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/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/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/contribution-graph/index.js +2 -0
- package/dist/contribution-graph/index.js.map +1 -0
- package/dist/contribution-graph/index.mjs +2 -0
- package/dist/contribution-graph/index.mjs.map +1 -0
- package/dist/elastic-slider/index.js +2 -0
- package/dist/elastic-slider/index.js.map +1 -0
- package/dist/elastic-slider/index.mjs +2 -0
- package/dist/elastic-slider/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/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/hamburger-3d/index.js +2 -0
- package/dist/hamburger-3d/index.js.map +1 -0
- package/dist/hamburger-3d/index.mjs +2 -0
- package/dist/hamburger-3d/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-elastic/index.js +2 -0
- package/dist/hamburger-elastic/index.js.map +1 -0
- package/dist/hamburger-elastic/index.mjs +2 -0
- package/dist/hamburger-elastic/index.mjs.map +1 -0
- package/dist/hamburger-morph/index.js +2 -0
- package/dist/hamburger-morph/index.js.map +1 -0
- package/dist/hamburger-morph/index.mjs +2 -0
- package/dist/hamburger-morph/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/hamburger-spring/index.js +2 -0
- package/dist/hamburger-spring/index.js.map +1 -0
- package/dist/hamburger-spring/index.mjs +2 -0
- package/dist/hamburger-spring/index.mjs.map +1 -0
- package/dist/hamburger-stagger/index.js +2 -0
- package/dist/hamburger-stagger/index.js.map +1 -0
- package/dist/hamburger-stagger/index.mjs +2 -0
- package/dist/hamburger-stagger/index.mjs.map +1 -0
- package/dist/hamburger-wave/index.js +2 -0
- package/dist/hamburger-wave/index.js.map +1 -0
- package/dist/hamburger-wave/index.mjs +2 -0
- package/dist/hamburger-wave/index.mjs.map +1 -0
- package/dist/index.js +21 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +21 -9
- 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-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/loader/index.js +2 -0
- package/dist/loader/index.js.map +1 -0
- package/dist/loader/index.mjs +2 -0
- package/dist/loader/index.mjs.map +1 -0
- package/dist/loading-invert/index.js +4 -0
- package/dist/loading-invert/index.js.map +1 -0
- package/dist/loading-invert/index.mjs +4 -0
- package/dist/loading-invert/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/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/scroll-velocity/index.js +2 -0
- package/dist/scroll-velocity/index.js.map +1 -0
- package/dist/scroll-velocity/index.mjs +2 -0
- package/dist/scroll-velocity/index.mjs.map +1 -0
- package/dist/shimmer-effect/index.js +2 -0
- package/dist/shimmer-effect/index.js.map +1 -0
- package/dist/shimmer-effect/index.mjs +2 -0
- package/dist/shimmer-effect/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/social-button/index.js +2 -0
- package/dist/social-button/index.js.map +1 -0
- package/dist/social-button/index.mjs +2 -0
- package/dist/social-button/index.mjs.map +1 -0
- package/dist/text-cursor/index.js +2 -0
- package/dist/text-cursor/index.js.map +1 -0
- package/dist/text-cursor/index.mjs +2 -0
- package/dist/text-cursor/index.mjs.map +1 -0
- package/dist/theme-toggler/index.js +2 -0
- package/dist/theme-toggler/index.js.map +1 -0
- package/dist/theme-toggler/index.mjs +2 -0
- package/dist/theme-toggler/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/v0-button/index.js +2 -0
- package/dist/v0-button/index.js.map +1 -0
- package/dist/v0-button/index.mjs +2 -0
- package/dist/v0-button/index.mjs.map +1 -0
- package/package.json +33 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/social-button/index.tsx"],"names":["cn","classes","SocialButton","icon","label","href","onClick","className","variant","variants","Component","jsx","motion","jsxs","social_button_default"],"mappings":"4EAIA,SAASA,CAAAA,CAAAA,GAAMC,EAAyC,CACtD,OAAOA,CAAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CACzC,CAWO,SAASC,CAAAA,CAAa,CAC3B,KAAAC,CAAAA,CACA,KAAA,CAAAC,EACA,IAAA,CAAAC,CAAAA,CACA,QAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CAAU,SACZ,EAAsB,CACpB,IAAMC,CAAAA,CAAW,CACf,OAAA,CAAS,qGAAA,CACT,QAAS,sFAAA,CACT,KAAA,CAAO,0CACT,CAAA,CAEMC,CAAAA,CAAYL,CAAAA,CAAO,IAAM,QAAA,CAE/B,OACEM,IAACC,MAAAA,CAAO,GAAA,CAAP,CAAW,UAAA,CAAY,CAAE,KAAA,CAAO,IAAK,CAAA,CAAG,QAAA,CAAU,CAAE,KAAA,CAAO,GAAK,CAAA,CAC/D,QAAA,CAAAC,IAAAA,CAACH,CAAAA,CAAA,CACC,IAAA,CAAML,CAAAA,CACN,OAAA,CAASC,CAAAA,CACT,SAAA,CAAWN,CAAAA,CACT,oFACAS,CAAAA,CAASD,CAAO,EAChBD,CACF,CAAA,CACA,OAAQF,CAAAA,CAAO,QAAA,CAAW,MAAA,CAC1B,GAAA,CAAKA,CAAAA,CAAO,qBAAA,CAAwB,OAEnC,QAAA,CAAA,CAAAF,CAAAA,CACDQ,GAAAA,CAAC,MAAA,CAAA,CAAM,QAAA,CAAAP,CAAAA,CAAM,GACf,CAAA,CACF,CAEJ,CAEA,IAAOU,CAAAA,CAAQZ","file":"index.mjs","sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\n\r\nfunction cn(...classes: (string | undefined | false)[]) {\r\n return classes.filter(Boolean).join(\" \");\r\n}\r\n\r\ninterface SocialButtonProps {\r\n icon: React.ReactNode;\r\n label: string;\r\n href?: string;\r\n onClick?: () => void;\r\n className?: string;\r\n variant?: \"default\" | \"outline\" | \"ghost\";\r\n}\r\n\r\nexport function SocialButton({\r\n icon,\r\n label,\r\n href,\r\n onClick,\r\n className,\r\n variant = \"default\",\r\n}: SocialButtonProps) {\r\n const variants = {\r\n default: \"bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 hover:bg-zinc-800 dark:hover:bg-zinc-200\",\r\n outline: \"border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800\",\r\n ghost: \"hover:bg-zinc-100 dark:hover:bg-zinc-800\",\r\n };\r\n\r\n const Component = href ? \"a\" : \"button\";\r\n\r\n return (\r\n <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\r\n <Component\r\n href={href}\r\n onClick={onClick}\r\n className={cn(\r\n \"inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors\",\r\n variants[variant],\r\n className\r\n )}\r\n target={href ? \"_blank\" : undefined}\r\n rel={href ? \"noopener noreferrer\" : undefined}\r\n >\r\n {icon}\r\n <span>{label}</span>\r\n </Component>\r\n </motion.div>\r\n );\r\n}\r\n\r\nexport default SocialButton;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),jsxRuntime=require('react/jsx-runtime');function N({text:w="\u269B\uFE0F",delay:D=.01,spacing:l=100,followMouseDirection:C=true,randomFloat:f=true,exitDuration:E=.5,removalInterval:b=30,maxPoints:h=5}){let[I,v]=react.useState([]),o=react.useRef(null),x=react.useRef(Date.now()),g=react.useRef(0),p=e=>{if(!o.current)return;let n=o.current.getBoundingClientRect(),M=e.clientX-n.left,y=e.clientY-n.top;v(P=>{let t=[...P];if(t.length===0)t.push({id:g.current++,x:M,y,angle:0,...f&&{randomX:Math.random()*10-5,randomY:Math.random()*10-5,randomRotate:Math.random()*10-5}});else {let a=t[t.length-1],s=M-a.x,i=y-a.y,u=Math.sqrt(s*s+i*i);if(u>=l){let r=Math.atan2(i,s)*180/Math.PI;r>90?r-=180:r<-90&&(r+=180);let X=C?r:0,Y=Math.floor(u/l);for(let c=1;c<=Y;c++){let T=l*c/u;t.push({id:g.current++,x:a.x+s*T,y:a.y+i*T,angle:X,...f&&{randomX:Math.random()*10-5,randomY:Math.random()*10-5,randomRotate:Math.random()*10-5}});}}}return t.length>h&&(t=t.slice(t.length-h)),t}),x.current=Date.now();};return react.useEffect(()=>{let e=o.current;if(e)return e.addEventListener("mousemove",p),()=>e.removeEventListener("mousemove",p)},[]),react.useEffect(()=>{let e=setInterval(()=>{Date.now()-x.current>100&&v(n=>n.length>0?n.slice(1):n);},b);return ()=>clearInterval(e)},[b]),jsxRuntime.jsxs("div",{ref:o,className:"w-full h-full min-h-[200px] relative rounded-lg bg-zinc-50 dark:bg-zinc-900/50",children:[jsxRuntime.jsx("div",{className:"absolute inset-0 flex items-center justify-center text-zinc-400 text-sm pointer-events-none",children:"Move your mouse around"}),jsxRuntime.jsx(framerMotion.AnimatePresence,{children:I.map(e=>jsxRuntime.jsx(framerMotion.motion.div,{initial:{opacity:0,scale:1,rotate:e.angle},animate:{opacity:1,scale:1,rotate:e.angle},exit:{opacity:0,scale:0},transition:{opacity:{duration:E,ease:"easeOut",delay:D}},className:"absolute text-2xl pointer-events-none",style:{left:e.x,top:e.y,transform:"translate(-50%, -50%)"},children:w},e.id))})]})}var O=N;exports.TextCursor=N;exports.default=O;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/text-cursor/index.tsx"],"names":["TextCursor","text","delay","spacing","followMouseDirection","randomFloat","exitDuration","removalInterval","maxPoints","trail","setTrail","useState","containerRef","useRef","lastMoveTimeRef","idCounter","handleMouseMove","rect","mouseX","mouseY","prev","newTrail","last","dx","dy","distance","rawAngle","computedAngle","steps","i","t","useEffect","container","interval","jsxs","jsx","AnimatePresence","item","motion","text_cursor_default"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\n\r\ninterface TrailItem {\r\n id: number;\r\n x: number;\r\n y: number;\r\n angle: number;\r\n randomX?: number;\r\n randomY?: number;\r\n randomRotate?: number;\r\n}\r\n\r\ninterface TextCursorProps {\r\n text?: string;\r\n delay?: number;\r\n spacing?: number;\r\n followMouseDirection?: boolean;\r\n randomFloat?: boolean;\r\n exitDuration?: number;\r\n removalInterval?: number;\r\n maxPoints?: number;\r\n}\r\n\r\nexport function TextCursor({\r\n text = \"⚛️\",\r\n delay = 0.01,\r\n spacing = 100,\r\n followMouseDirection = true,\r\n randomFloat = true,\r\n exitDuration = 0.5,\r\n removalInterval = 30,\r\n maxPoints = 5\r\n}: TextCursorProps) {\r\n const [trail, setTrail] = useState<TrailItem[]>([]);\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const lastMoveTimeRef = useRef<number>(Date.now());\r\n const idCounter = useRef<number>(0);\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n if (!containerRef.current) return;\r\n const rect = containerRef.current.getBoundingClientRect();\r\n const mouseX = e.clientX - rect.left;\r\n const mouseY = e.clientY - rect.top;\r\n\r\n setTrail(prev => {\r\n let newTrail = [...prev];\r\n if (newTrail.length === 0) {\r\n newTrail.push({\r\n id: idCounter.current++,\r\n x: mouseX,\r\n y: mouseY,\r\n angle: 0,\r\n ...(randomFloat && {\r\n randomX: Math.random() * 10 - 5,\r\n randomY: Math.random() * 10 - 5,\r\n randomRotate: Math.random() * 10 - 5\r\n })\r\n });\r\n } else {\r\n const last = newTrail[newTrail.length - 1];\r\n const dx = mouseX - last.x;\r\n const dy = mouseY - last.y;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n if (distance >= spacing) {\r\n let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;\r\n if (rawAngle > 90) rawAngle -= 180;\r\n else if (rawAngle < -90) rawAngle += 180;\r\n const computedAngle = followMouseDirection ? rawAngle : 0;\r\n const steps = Math.floor(distance / spacing);\r\n for (let i = 1; i <= steps; i++) {\r\n const t = (spacing * i) / distance;\r\n newTrail.push({\r\n id: idCounter.current++,\r\n x: last.x + dx * t,\r\n y: last.y + dy * t,\r\n angle: computedAngle,\r\n ...(randomFloat && {\r\n randomX: Math.random() * 10 - 5,\r\n randomY: Math.random() * 10 - 5,\r\n randomRotate: Math.random() * 10 - 5\r\n })\r\n });\r\n }\r\n }\r\n }\r\n if (newTrail.length > maxPoints) {\r\n newTrail = newTrail.slice(newTrail.length - maxPoints);\r\n }\r\n return newTrail;\r\n });\r\n lastMoveTimeRef.current = Date.now();\r\n };\r\n\r\n useEffect(() => {\r\n const container = containerRef.current;\r\n if (!container) return;\r\n container.addEventListener(\"mousemove\", handleMouseMove);\r\n return () => container.removeEventListener(\"mousemove\", handleMouseMove);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const interval = setInterval(() => {\r\n if (Date.now() - lastMoveTimeRef.current > 100) {\r\n setTrail(prev => (prev.length > 0 ? prev.slice(1) : prev));\r\n }\r\n }, removalInterval);\r\n return () => clearInterval(interval);\r\n }, [removalInterval]);\r\n\r\n return (\r\n <div ref={containerRef} className=\"w-full h-full min-h-[200px] relative rounded-lg bg-zinc-50 dark:bg-zinc-900/50\">\r\n <div className=\"absolute inset-0 flex items-center justify-center text-zinc-400 text-sm pointer-events-none\">\r\n Move your mouse around\r\n </div>\r\n <AnimatePresence>\r\n {trail.map(item => (\r\n <motion.div\r\n key={item.id}\r\n initial={{ opacity: 0, scale: 1, rotate: item.angle }}\r\n animate={{ opacity: 1, scale: 1, rotate: item.angle }}\r\n exit={{ opacity: 0, scale: 0 }}\r\n transition={{ opacity: { duration: exitDuration, ease: \"easeOut\", delay } }}\r\n className=\"absolute text-2xl pointer-events-none\"\r\n style={{ left: item.x, top: item.y, transform: \"translate(-50%, -50%)\" }}\r\n >\r\n {text}\r\n </motion.div>\r\n ))}\r\n </AnimatePresence>\r\n </div>\r\n );\r\n}\r\n\r\nexport default TextCursor;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useState,useRef,useEffect}from'react';import {AnimatePresence,motion}from'framer-motion';import {jsxs,jsx}from'react/jsx-runtime';function N({text:w="\u269B\uFE0F",delay:D=.01,spacing:l=100,followMouseDirection:C=true,randomFloat:f=true,exitDuration:E=.5,removalInterval:b=30,maxPoints:h=5}){let[I,v]=useState([]),o=useRef(null),x=useRef(Date.now()),g=useRef(0),p=e=>{if(!o.current)return;let n=o.current.getBoundingClientRect(),M=e.clientX-n.left,y=e.clientY-n.top;v(P=>{let t=[...P];if(t.length===0)t.push({id:g.current++,x:M,y,angle:0,...f&&{randomX:Math.random()*10-5,randomY:Math.random()*10-5,randomRotate:Math.random()*10-5}});else {let a=t[t.length-1],s=M-a.x,i=y-a.y,u=Math.sqrt(s*s+i*i);if(u>=l){let r=Math.atan2(i,s)*180/Math.PI;r>90?r-=180:r<-90&&(r+=180);let X=C?r:0,Y=Math.floor(u/l);for(let c=1;c<=Y;c++){let T=l*c/u;t.push({id:g.current++,x:a.x+s*T,y:a.y+i*T,angle:X,...f&&{randomX:Math.random()*10-5,randomY:Math.random()*10-5,randomRotate:Math.random()*10-5}});}}}return t.length>h&&(t=t.slice(t.length-h)),t}),x.current=Date.now();};return useEffect(()=>{let e=o.current;if(e)return e.addEventListener("mousemove",p),()=>e.removeEventListener("mousemove",p)},[]),useEffect(()=>{let e=setInterval(()=>{Date.now()-x.current>100&&v(n=>n.length>0?n.slice(1):n);},b);return ()=>clearInterval(e)},[b]),jsxs("div",{ref:o,className:"w-full h-full min-h-[200px] relative rounded-lg bg-zinc-50 dark:bg-zinc-900/50",children:[jsx("div",{className:"absolute inset-0 flex items-center justify-center text-zinc-400 text-sm pointer-events-none",children:"Move your mouse around"}),jsx(AnimatePresence,{children:I.map(e=>jsx(motion.div,{initial:{opacity:0,scale:1,rotate:e.angle},animate:{opacity:1,scale:1,rotate:e.angle},exit:{opacity:0,scale:0},transition:{opacity:{duration:E,ease:"easeOut",delay:D}},className:"absolute text-2xl pointer-events-none",style:{left:e.x,top:e.y,transform:"translate(-50%, -50%)"},children:w},e.id))})]})}var O=N;export{N as TextCursor,O as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/text-cursor/index.tsx"],"names":["TextCursor","text","delay","spacing","followMouseDirection","randomFloat","exitDuration","removalInterval","maxPoints","trail","setTrail","useState","containerRef","useRef","lastMoveTimeRef","idCounter","handleMouseMove","rect","mouseX","mouseY","prev","newTrail","last","dx","dy","distance","rawAngle","computedAngle","steps","i","t","useEffect","container","interval","jsxs","jsx","AnimatePresence","item","motion","text_cursor_default"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\n\r\ninterface TrailItem {\r\n id: number;\r\n x: number;\r\n y: number;\r\n angle: number;\r\n randomX?: number;\r\n randomY?: number;\r\n randomRotate?: number;\r\n}\r\n\r\ninterface TextCursorProps {\r\n text?: string;\r\n delay?: number;\r\n spacing?: number;\r\n followMouseDirection?: boolean;\r\n randomFloat?: boolean;\r\n exitDuration?: number;\r\n removalInterval?: number;\r\n maxPoints?: number;\r\n}\r\n\r\nexport function TextCursor({\r\n text = \"⚛️\",\r\n delay = 0.01,\r\n spacing = 100,\r\n followMouseDirection = true,\r\n randomFloat = true,\r\n exitDuration = 0.5,\r\n removalInterval = 30,\r\n maxPoints = 5\r\n}: TextCursorProps) {\r\n const [trail, setTrail] = useState<TrailItem[]>([]);\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const lastMoveTimeRef = useRef<number>(Date.now());\r\n const idCounter = useRef<number>(0);\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n if (!containerRef.current) return;\r\n const rect = containerRef.current.getBoundingClientRect();\r\n const mouseX = e.clientX - rect.left;\r\n const mouseY = e.clientY - rect.top;\r\n\r\n setTrail(prev => {\r\n let newTrail = [...prev];\r\n if (newTrail.length === 0) {\r\n newTrail.push({\r\n id: idCounter.current++,\r\n x: mouseX,\r\n y: mouseY,\r\n angle: 0,\r\n ...(randomFloat && {\r\n randomX: Math.random() * 10 - 5,\r\n randomY: Math.random() * 10 - 5,\r\n randomRotate: Math.random() * 10 - 5\r\n })\r\n });\r\n } else {\r\n const last = newTrail[newTrail.length - 1];\r\n const dx = mouseX - last.x;\r\n const dy = mouseY - last.y;\r\n const distance = Math.sqrt(dx * dx + dy * dy);\r\n if (distance >= spacing) {\r\n let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;\r\n if (rawAngle > 90) rawAngle -= 180;\r\n else if (rawAngle < -90) rawAngle += 180;\r\n const computedAngle = followMouseDirection ? rawAngle : 0;\r\n const steps = Math.floor(distance / spacing);\r\n for (let i = 1; i <= steps; i++) {\r\n const t = (spacing * i) / distance;\r\n newTrail.push({\r\n id: idCounter.current++,\r\n x: last.x + dx * t,\r\n y: last.y + dy * t,\r\n angle: computedAngle,\r\n ...(randomFloat && {\r\n randomX: Math.random() * 10 - 5,\r\n randomY: Math.random() * 10 - 5,\r\n randomRotate: Math.random() * 10 - 5\r\n })\r\n });\r\n }\r\n }\r\n }\r\n if (newTrail.length > maxPoints) {\r\n newTrail = newTrail.slice(newTrail.length - maxPoints);\r\n }\r\n return newTrail;\r\n });\r\n lastMoveTimeRef.current = Date.now();\r\n };\r\n\r\n useEffect(() => {\r\n const container = containerRef.current;\r\n if (!container) return;\r\n container.addEventListener(\"mousemove\", handleMouseMove);\r\n return () => container.removeEventListener(\"mousemove\", handleMouseMove);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const interval = setInterval(() => {\r\n if (Date.now() - lastMoveTimeRef.current > 100) {\r\n setTrail(prev => (prev.length > 0 ? prev.slice(1) : prev));\r\n }\r\n }, removalInterval);\r\n return () => clearInterval(interval);\r\n }, [removalInterval]);\r\n\r\n return (\r\n <div ref={containerRef} className=\"w-full h-full min-h-[200px] relative rounded-lg bg-zinc-50 dark:bg-zinc-900/50\">\r\n <div className=\"absolute inset-0 flex items-center justify-center text-zinc-400 text-sm pointer-events-none\">\r\n Move your mouse around\r\n </div>\r\n <AnimatePresence>\r\n {trail.map(item => (\r\n <motion.div\r\n key={item.id}\r\n initial={{ opacity: 0, scale: 1, rotate: item.angle }}\r\n animate={{ opacity: 1, scale: 1, rotate: item.angle }}\r\n exit={{ opacity: 0, scale: 0 }}\r\n transition={{ opacity: { duration: exitDuration, ease: \"easeOut\", delay } }}\r\n className=\"absolute text-2xl pointer-events-none\"\r\n style={{ left: item.x, top: item.y, transform: \"translate(-50%, -50%)\" }}\r\n >\r\n {text}\r\n </motion.div>\r\n ))}\r\n </AnimatePresence>\r\n </div>\r\n );\r\n}\r\n\r\nexport default TextCursor;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),framerMotion=require('framer-motion'),jsxRuntime=require('react/jsx-runtime');function i(...s){return s.filter(Boolean).join(" ")}function h({className:s,size:a="md",onChange:c}){let[t,r]=react.useState(false);react.useEffect(()=>{let o=window.matchMedia("(prefers-color-scheme: dark)").matches;r(o);},[]);let d=()=>{let o=!t;r(o),o?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c?.(o);},m={sm:"w-12 h-6",md:"w-14 h-7",lg:"w-16 h-8"},l={sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"};return jsxRuntime.jsxs(framerMotion.motion.button,{onClick:d,className:i("relative rounded-full border transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900",m[a],t?"bg-zinc-800 border-zinc-700":"bg-zinc-700 border-zinc-600",s),whileTap:{scale:.95},initial:false,children:[jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute inset-0 rounded-full",animate:{background:t?"linear-gradient(135deg, #27272a 0%, #18181b 100%)":"linear-gradient(135deg, #3f3f46 0%, #27272a 100%)"},transition:{duration:.3}}),jsxRuntime.jsx(framerMotion.motion.div,{className:i("absolute top-0.5 rounded-full shadow-lg flex items-center justify-center",a==="sm"?"w-5 h-5":a==="md"?"w-6 h-6":"w-7 h-7",t?"bg-zinc-300":"bg-zinc-100"),animate:{x:t?a==="sm"?24:a==="md"?28:32:2},transition:{type:"spring",stiffness:500,damping:30},children:jsxRuntime.jsx(framerMotion.AnimatePresence,{mode:"wait",children:t?jsxRuntime.jsx(framerMotion.motion.svg,{className:i("text-zinc-700",l[a]),fill:"currentColor",viewBox:"0 0 24 24",initial:{opacity:0,rotate:-90},animate:{opacity:1,rotate:0},exit:{opacity:0,rotate:90},transition:{duration:.2},children:jsxRuntime.jsx("path",{d:"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"})},"moon"):jsxRuntime.jsx(framerMotion.motion.svg,{className:i("text-zinc-600",l[a]),fill:"currentColor",viewBox:"0 0 24 24",initial:{opacity:0,rotate:-90},animate:{opacity:1,rotate:0},exit:{opacity:0,rotate:90},transition:{duration:.2},children:jsxRuntime.jsx("path",{d:"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"})},"sun")})}),jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute inset-0 rounded-full opacity-20",animate:{boxShadow:t?"0 0 20px rgba(161, 161, 170, 0.2)":"0 0 20px rgba(161, 161, 170, 0.3)"},transition:{duration:.3}})]})}var v=h;exports.AnimatedThemeToggler=h;exports.default=v;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme-toggler/index.tsx"],"names":["cn","classes","AnimatedThemeToggler","className","size","onChange","isDark","setIsDark","useState","useEffect","prefersDark","toggleTheme","newTheme","sizeClasses","iconSizes","jsxs","motion","jsx","AnimatePresence","theme_toggler_default"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\n\r\nfunction cn(...classes: (string | undefined | false)[]) {\r\n return classes.filter(Boolean).join(\" \");\r\n}\r\n\r\ninterface AnimatedThemeTogglerProps {\r\n className?: string;\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n onChange?: (isDark: boolean) => void;\r\n}\r\n\r\nexport function AnimatedThemeToggler({ \r\n className, \r\n size = \"md\",\r\n onChange \r\n}: AnimatedThemeTogglerProps) {\r\n const [isDark, setIsDark] = useState(false);\r\n\r\n useEffect(() => {\r\n const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n setIsDark(prefersDark);\r\n }, []);\r\n\r\n const toggleTheme = () => {\r\n const newTheme = !isDark;\r\n setIsDark(newTheme);\r\n \r\n if (newTheme) {\r\n document.documentElement.classList.add(\"dark\");\r\n } else {\r\n document.documentElement.classList.remove(\"dark\");\r\n }\r\n \r\n onChange?.(newTheme);\r\n };\r\n\r\n const sizeClasses = {\r\n sm: \"w-12 h-6\",\r\n md: \"w-14 h-7\",\r\n lg: \"w-16 h-8\"\r\n };\r\n\r\n const iconSizes = {\r\n sm: \"w-4 h-4\",\r\n md: \"w-5 h-5\",\r\n lg: \"w-6 h-6\"\r\n };\r\n\r\n return (\r\n <motion.button\r\n onClick={toggleTheme}\r\n className={cn(\r\n \"relative rounded-full border transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900\",\r\n sizeClasses[size],\r\n isDark \r\n ? \"bg-zinc-800 border-zinc-700\" \r\n : \"bg-zinc-700 border-zinc-600\",\r\n className\r\n )}\r\n whileTap={{ scale: 0.95 }}\r\n initial={false}\r\n >\r\n <motion.div\r\n className=\"absolute inset-0 rounded-full\"\r\n animate={{\r\n background: isDark \r\n ? \"linear-gradient(135deg, #27272a 0%, #18181b 100%)\"\r\n : \"linear-gradient(135deg, #3f3f46 0%, #27272a 100%)\"\r\n }}\r\n transition={{ duration: 0.3 }}\r\n />\r\n \r\n <motion.div\r\n className={cn(\r\n \"absolute top-0.5 rounded-full shadow-lg flex items-center justify-center\",\r\n size === \"sm\" ? \"w-5 h-5\" : size === \"md\" ? \"w-6 h-6\" : \"w-7 h-7\",\r\n isDark ? \"bg-zinc-300\" : \"bg-zinc-100\"\r\n )}\r\n animate={{\r\n x: isDark ? (size === \"sm\" ? 24 : size === \"md\" ? 28 : 32) : 2,\r\n }}\r\n transition={{\r\n type: \"spring\",\r\n stiffness: 500,\r\n damping: 30\r\n }}\r\n >\r\n <AnimatePresence mode=\"wait\">\r\n {isDark ? (\r\n <motion.svg\r\n key=\"moon\"\r\n className={cn(\"text-zinc-700\", iconSizes[size])}\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n initial={{ opacity: 0, rotate: -90 }}\r\n animate={{ opacity: 1, rotate: 0 }}\r\n exit={{ opacity: 0, rotate: 90 }}\r\n transition={{ duration: 0.2 }}\r\n >\r\n <path d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\" />\r\n </motion.svg>\r\n ) : (\r\n <motion.svg\r\n key=\"sun\"\r\n className={cn(\"text-zinc-600\", iconSizes[size])}\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n initial={{ opacity: 0, rotate: -90 }}\r\n animate={{ opacity: 1, rotate: 0 }}\r\n exit={{ opacity: 0, rotate: 90 }}\r\n transition={{ duration: 0.2 }}\r\n >\r\n <path d=\"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z\" />\r\n </motion.svg>\r\n )}\r\n </AnimatePresence>\r\n </motion.div>\r\n \r\n <motion.div\r\n className=\"absolute inset-0 rounded-full opacity-20\"\r\n animate={{\r\n boxShadow: isDark \r\n ? \"0 0 20px rgba(161, 161, 170, 0.2)\" \r\n : \"0 0 20px rgba(161, 161, 170, 0.3)\"\r\n }}\r\n transition={{ duration: 0.3 }}\r\n />\r\n </motion.button>\r\n );\r\n}\r\n\r\nexport default AnimatedThemeToggler;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useState,useEffect}from'react';import {motion,AnimatePresence}from'framer-motion';import {jsxs,jsx}from'react/jsx-runtime';function i(...s){return s.filter(Boolean).join(" ")}function h({className:s,size:a="md",onChange:c}){let[t,r]=useState(false);useEffect(()=>{let o=window.matchMedia("(prefers-color-scheme: dark)").matches;r(o);},[]);let d=()=>{let o=!t;r(o),o?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c?.(o);},m={sm:"w-12 h-6",md:"w-14 h-7",lg:"w-16 h-8"},l={sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"};return jsxs(motion.button,{onClick:d,className:i("relative rounded-full border transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900",m[a],t?"bg-zinc-800 border-zinc-700":"bg-zinc-700 border-zinc-600",s),whileTap:{scale:.95},initial:false,children:[jsx(motion.div,{className:"absolute inset-0 rounded-full",animate:{background:t?"linear-gradient(135deg, #27272a 0%, #18181b 100%)":"linear-gradient(135deg, #3f3f46 0%, #27272a 100%)"},transition:{duration:.3}}),jsx(motion.div,{className:i("absolute top-0.5 rounded-full shadow-lg flex items-center justify-center",a==="sm"?"w-5 h-5":a==="md"?"w-6 h-6":"w-7 h-7",t?"bg-zinc-300":"bg-zinc-100"),animate:{x:t?a==="sm"?24:a==="md"?28:32:2},transition:{type:"spring",stiffness:500,damping:30},children:jsx(AnimatePresence,{mode:"wait",children:t?jsx(motion.svg,{className:i("text-zinc-700",l[a]),fill:"currentColor",viewBox:"0 0 24 24",initial:{opacity:0,rotate:-90},animate:{opacity:1,rotate:0},exit:{opacity:0,rotate:90},transition:{duration:.2},children:jsx("path",{d:"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"})},"moon"):jsx(motion.svg,{className:i("text-zinc-600",l[a]),fill:"currentColor",viewBox:"0 0 24 24",initial:{opacity:0,rotate:-90},animate:{opacity:1,rotate:0},exit:{opacity:0,rotate:90},transition:{duration:.2},children:jsx("path",{d:"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"})},"sun")})}),jsx(motion.div,{className:"absolute inset-0 rounded-full opacity-20",animate:{boxShadow:t?"0 0 20px rgba(161, 161, 170, 0.2)":"0 0 20px rgba(161, 161, 170, 0.3)"},transition:{duration:.3}})]})}var v=h;export{h as AnimatedThemeToggler,v as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/theme-toggler/index.tsx"],"names":["cn","classes","AnimatedThemeToggler","className","size","onChange","isDark","setIsDark","useState","useEffect","prefersDark","toggleTheme","newTheme","sizeClasses","iconSizes","jsxs","motion","jsx","AnimatePresence","theme_toggler_default"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { motion, AnimatePresence } from \"framer-motion\";\r\n\r\nfunction cn(...classes: (string | undefined | false)[]) {\r\n return classes.filter(Boolean).join(\" \");\r\n}\r\n\r\ninterface AnimatedThemeTogglerProps {\r\n className?: string;\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n onChange?: (isDark: boolean) => void;\r\n}\r\n\r\nexport function AnimatedThemeToggler({ \r\n className, \r\n size = \"md\",\r\n onChange \r\n}: AnimatedThemeTogglerProps) {\r\n const [isDark, setIsDark] = useState(false);\r\n\r\n useEffect(() => {\r\n const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n setIsDark(prefersDark);\r\n }, []);\r\n\r\n const toggleTheme = () => {\r\n const newTheme = !isDark;\r\n setIsDark(newTheme);\r\n \r\n if (newTheme) {\r\n document.documentElement.classList.add(\"dark\");\r\n } else {\r\n document.documentElement.classList.remove(\"dark\");\r\n }\r\n \r\n onChange?.(newTheme);\r\n };\r\n\r\n const sizeClasses = {\r\n sm: \"w-12 h-6\",\r\n md: \"w-14 h-7\",\r\n lg: \"w-16 h-8\"\r\n };\r\n\r\n const iconSizes = {\r\n sm: \"w-4 h-4\",\r\n md: \"w-5 h-5\",\r\n lg: \"w-6 h-6\"\r\n };\r\n\r\n return (\r\n <motion.button\r\n onClick={toggleTheme}\r\n className={cn(\r\n \"relative rounded-full border transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900\",\r\n sizeClasses[size],\r\n isDark \r\n ? \"bg-zinc-800 border-zinc-700\" \r\n : \"bg-zinc-700 border-zinc-600\",\r\n className\r\n )}\r\n whileTap={{ scale: 0.95 }}\r\n initial={false}\r\n >\r\n <motion.div\r\n className=\"absolute inset-0 rounded-full\"\r\n animate={{\r\n background: isDark \r\n ? \"linear-gradient(135deg, #27272a 0%, #18181b 100%)\"\r\n : \"linear-gradient(135deg, #3f3f46 0%, #27272a 100%)\"\r\n }}\r\n transition={{ duration: 0.3 }}\r\n />\r\n \r\n <motion.div\r\n className={cn(\r\n \"absolute top-0.5 rounded-full shadow-lg flex items-center justify-center\",\r\n size === \"sm\" ? \"w-5 h-5\" : size === \"md\" ? \"w-6 h-6\" : \"w-7 h-7\",\r\n isDark ? \"bg-zinc-300\" : \"bg-zinc-100\"\r\n )}\r\n animate={{\r\n x: isDark ? (size === \"sm\" ? 24 : size === \"md\" ? 28 : 32) : 2,\r\n }}\r\n transition={{\r\n type: \"spring\",\r\n stiffness: 500,\r\n damping: 30\r\n }}\r\n >\r\n <AnimatePresence mode=\"wait\">\r\n {isDark ? (\r\n <motion.svg\r\n key=\"moon\"\r\n className={cn(\"text-zinc-700\", iconSizes[size])}\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n initial={{ opacity: 0, rotate: -90 }}\r\n animate={{ opacity: 1, rotate: 0 }}\r\n exit={{ opacity: 0, rotate: 90 }}\r\n transition={{ duration: 0.2 }}\r\n >\r\n <path d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\" />\r\n </motion.svg>\r\n ) : (\r\n <motion.svg\r\n key=\"sun\"\r\n className={cn(\"text-zinc-600\", iconSizes[size])}\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n initial={{ opacity: 0, rotate: -90 }}\r\n animate={{ opacity: 1, rotate: 0 }}\r\n exit={{ opacity: 0, rotate: 90 }}\r\n transition={{ duration: 0.2 }}\r\n >\r\n <path d=\"M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z\" />\r\n </motion.svg>\r\n )}\r\n </AnimatePresence>\r\n </motion.div>\r\n \r\n <motion.div\r\n className=\"absolute inset-0 rounded-full opacity-20\"\r\n animate={{\r\n boxShadow: isDark \r\n ? \"0 0 20px rgba(161, 161, 170, 0.2)\" \r\n : \"0 0 20px rgba(161, 161, 170, 0.3)\"\r\n }}\r\n transition={{ duration: 0.3 }}\r\n />\r\n </motion.button>\r\n );\r\n}\r\n\r\nexport default AnimatedThemeToggler;\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 y(...r){return tailwindMerge.twMerge(clsx.clsx(r))}var m={damping:30,stiffness:100,mass:2};function G({imageSrc:r,altText:C="Tilted card image",captionText:g="",containerHeight:N="300px",containerWidth:T="100%",imageHeight:h="300px",imageWidth:v="300px",scaleOnHover:Y=1.1,rotateAmplitude:b=14,showMobileWarning:P=false,showTooltip:E=true,overlayContent:w=null,displayOverlayContent:L=false,className:R}){let a=react.useRef(null),x=framerMotion.useMotionValue(0),S=framerMotion.useMotionValue(0),l=framerMotion.useSpring(framerMotion.useMotionValue(0),m),c=framerMotion.useSpring(framerMotion.useMotionValue(0),m),u=framerMotion.useSpring(1,m),d=framerMotion.useSpring(0),p=framerMotion.useSpring(0,{stiffness:350,damping:30,mass:1}),[X,H]=react.useState(0);function O(s){if(!a.current)return;let e=a.current.getBoundingClientRect(),j=s.clientX-e.left-e.width/2,f=s.clientY-e.top-e.height/2,B=f/(e.height/2)*-b,W=j/(e.width/2)*b;l.set(B),c.set(W),x.set(s.clientX-e.left),S.set(s.clientY-e.top);let z=f-X;p.set(-z*.6),H(f);}function V(){u.set(Y),d.set(1);}function k(){d.set(0),u.set(1),l.set(0),c.set(0),p.set(0);}return jsxRuntime.jsxs("figure",{ref:a,className:y("relative flex items-center justify-center [perspective:800px]",R),style:{height:N,width:T},onMouseMove:O,onMouseEnter:V,onMouseLeave:k,children:[P&&jsxRuntime.jsx("div",{className:"absolute top-2 left-2 text-xs text-muted-foreground md:hidden",children:"Best viewed on desktop"}),jsxRuntime.jsxs(framerMotion.motion.div,{className:"relative [transform-style:preserve-3d]",style:{width:v,height:h,rotateX:l,rotateY:c,scale:u},children:[jsxRuntime.jsx(framerMotion.motion.img,{src:r,alt:C,className:"absolute inset-0 w-full h-full object-cover rounded-lg",style:{width:v,height:h}}),L&&w&&jsxRuntime.jsx(framerMotion.motion.div,{className:"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg",children:w})]}),E&&g&&jsxRuntime.jsx(framerMotion.motion.figcaption,{className:"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap",style:{x,y:S,opacity:d,rotate:p},children:g})]})}var te=G;exports.TiltedCard=G;exports.default=te;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/tilted-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","springValues","TiltedCard","imageSrc","altText","captionText","containerHeight","containerWidth","imageHeight","imageWidth","scaleOnHover","rotateAmplitude","showMobileWarning","showTooltip","overlayContent","displayOverlayContent","className","ref","useRef","useMotionValue","y","rotateX","useSpring","rotateY","scale","opacity","rotateFigcaption","lastY","setLastY","useState","handleMouse","e","rect","offsetX","offsetY","rotationX","rotationY","velocityY","handleMouseEnter","handleMouseLeave","jsxs","jsx","motion","tilted_card_default"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useRef, useState, ReactNode, CSSProperties } from \"react\";\r\nimport { motion, useMotionValue, useSpring, SpringOptions } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TiltedCardProps {\r\n imageSrc: string;\r\n altText?: string;\r\n captionText?: string;\r\n containerHeight?: CSSProperties[\"height\"];\r\n containerWidth?: CSSProperties[\"width\"];\r\n imageHeight?: CSSProperties[\"height\"];\r\n imageWidth?: CSSProperties[\"width\"];\r\n scaleOnHover?: number;\r\n rotateAmplitude?: number;\r\n showMobileWarning?: boolean;\r\n showTooltip?: boolean;\r\n overlayContent?: ReactNode;\r\n displayOverlayContent?: boolean;\r\n className?: string;\r\n}\r\n\r\nconst springValues: SpringOptions = {\r\n damping: 30,\r\n stiffness: 100,\r\n mass: 2,\r\n};\r\n\r\nexport function TiltedCard({\r\n imageSrc,\r\n altText = \"Tilted card image\",\r\n captionText = \"\",\r\n containerHeight = \"300px\",\r\n containerWidth = \"100%\",\r\n imageHeight = \"300px\",\r\n imageWidth = \"300px\",\r\n scaleOnHover = 1.1,\r\n rotateAmplitude = 14,\r\n showMobileWarning = false,\r\n showTooltip = true,\r\n overlayContent = null,\r\n displayOverlayContent = false,\r\n className,\r\n}: TiltedCardProps) {\r\n const ref = useRef<HTMLElement>(null);\r\n\r\n const x = useMotionValue(0);\r\n const y = useMotionValue(0);\r\n const rotateX = useSpring(useMotionValue(0), springValues);\r\n const rotateY = useSpring(useMotionValue(0), springValues);\r\n const scale = useSpring(1, springValues);\r\n const opacity = useSpring(0);\r\n const rotateFigcaption = useSpring(0, {\r\n stiffness: 350,\r\n damping: 30,\r\n mass: 1,\r\n });\r\n\r\n const [lastY, setLastY] = useState<number>(0);\r\n\r\n function handleMouse(e: React.MouseEvent<HTMLElement>) {\r\n if (!ref.current) return;\r\n\r\n const rect = ref.current.getBoundingClientRect();\r\n const offsetX = e.clientX - rect.left - rect.width / 2;\r\n const offsetY = e.clientY - rect.top - rect.height / 2;\r\n\r\n const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\r\n const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\r\n\r\n rotateX.set(rotationX);\r\n rotateY.set(rotationY);\r\n\r\n x.set(e.clientX - rect.left);\r\n y.set(e.clientY - rect.top);\r\n\r\n const velocityY = offsetY - lastY;\r\n rotateFigcaption.set(-velocityY * 0.6);\r\n setLastY(offsetY);\r\n }\r\n\r\n function handleMouseEnter() {\r\n scale.set(scaleOnHover);\r\n opacity.set(1);\r\n }\r\n\r\n function handleMouseLeave() {\r\n opacity.set(0);\r\n scale.set(1);\r\n rotateX.set(0);\r\n rotateY.set(0);\r\n rotateFigcaption.set(0);\r\n }\r\n\r\n return (\r\n <figure\r\n ref={ref}\r\n className={cn(\r\n \"relative flex items-center justify-center [perspective:800px]\",\r\n className\r\n )}\r\n style={{\r\n height: containerHeight,\r\n width: containerWidth,\r\n }}\r\n onMouseMove={handleMouse}\r\n onMouseEnter={handleMouseEnter}\r\n onMouseLeave={handleMouseLeave}\r\n >\r\n {showMobileWarning && (\r\n <div className=\"absolute top-2 left-2 text-xs text-muted-foreground md:hidden\">\r\n Best viewed on desktop\r\n </div>\r\n )}\r\n\r\n <motion.div\r\n className=\"relative [transform-style:preserve-3d]\"\r\n style={{\r\n width: imageWidth,\r\n height: imageHeight,\r\n rotateX,\r\n rotateY,\r\n scale,\r\n }}\r\n >\r\n <motion.img\r\n src={imageSrc}\r\n alt={altText}\r\n className=\"absolute inset-0 w-full h-full object-cover rounded-lg\"\r\n style={{\r\n width: imageWidth,\r\n height: imageHeight,\r\n }}\r\n />\r\n\r\n {displayOverlayContent && overlayContent && (\r\n <motion.div className=\"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg\">\r\n {overlayContent}\r\n </motion.div>\r\n )}\r\n </motion.div>\r\n\r\n {showTooltip && captionText && (\r\n <motion.figcaption\r\n className=\"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap\"\r\n style={{\r\n x,\r\n y,\r\n opacity,\r\n rotate: rotateFigcaption,\r\n }}\r\n >\r\n {captionText}\r\n </motion.figcaption>\r\n )}\r\n </figure>\r\n );\r\n}\r\n\r\nexport default TiltedCard;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useRef,useState}from'react';import {useMotionValue,useSpring,motion}from'framer-motion';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function y(...r){return twMerge(clsx(r))}var m={damping:30,stiffness:100,mass:2};function G({imageSrc:r,altText:C="Tilted card image",captionText:g="",containerHeight:N="300px",containerWidth:T="100%",imageHeight:h="300px",imageWidth:v="300px",scaleOnHover:Y=1.1,rotateAmplitude:b=14,showMobileWarning:P=false,showTooltip:E=true,overlayContent:w=null,displayOverlayContent:L=false,className:R}){let a=useRef(null),x=useMotionValue(0),S=useMotionValue(0),l=useSpring(useMotionValue(0),m),c=useSpring(useMotionValue(0),m),u=useSpring(1,m),d=useSpring(0),p=useSpring(0,{stiffness:350,damping:30,mass:1}),[X,H]=useState(0);function O(s){if(!a.current)return;let e=a.current.getBoundingClientRect(),j=s.clientX-e.left-e.width/2,f=s.clientY-e.top-e.height/2,B=f/(e.height/2)*-b,W=j/(e.width/2)*b;l.set(B),c.set(W),x.set(s.clientX-e.left),S.set(s.clientY-e.top);let z=f-X;p.set(-z*.6),H(f);}function V(){u.set(Y),d.set(1);}function k(){d.set(0),u.set(1),l.set(0),c.set(0),p.set(0);}return jsxs("figure",{ref:a,className:y("relative flex items-center justify-center [perspective:800px]",R),style:{height:N,width:T},onMouseMove:O,onMouseEnter:V,onMouseLeave:k,children:[P&&jsx("div",{className:"absolute top-2 left-2 text-xs text-muted-foreground md:hidden",children:"Best viewed on desktop"}),jsxs(motion.div,{className:"relative [transform-style:preserve-3d]",style:{width:v,height:h,rotateX:l,rotateY:c,scale:u},children:[jsx(motion.img,{src:r,alt:C,className:"absolute inset-0 w-full h-full object-cover rounded-lg",style:{width:v,height:h}}),L&&w&&jsx(motion.div,{className:"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg",children:w})]}),E&&g&&jsx(motion.figcaption,{className:"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap",style:{x,y:S,opacity:d,rotate:p},children:g})]})}var te=G;export{G as TiltedCard,te as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/tilted-card/index.tsx"],"names":["cn","inputs","twMerge","clsx","springValues","TiltedCard","imageSrc","altText","captionText","containerHeight","containerWidth","imageHeight","imageWidth","scaleOnHover","rotateAmplitude","showMobileWarning","showTooltip","overlayContent","displayOverlayContent","className","ref","useRef","useMotionValue","y","rotateX","useSpring","rotateY","scale","opacity","rotateFigcaption","lastY","setLastY","useState","handleMouse","e","rect","offsetX","offsetY","rotationX","rotationY","velocityY","handleMouseEnter","handleMouseLeave","jsxs","jsx","motion","tilted_card_default"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n return twMerge(clsx(inputs));\r\n}\r\n","\"use client\";\r\n\r\nimport { useRef, useState, ReactNode, CSSProperties } from \"react\";\r\nimport { motion, useMotionValue, useSpring, SpringOptions } from \"framer-motion\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TiltedCardProps {\r\n imageSrc: string;\r\n altText?: string;\r\n captionText?: string;\r\n containerHeight?: CSSProperties[\"height\"];\r\n containerWidth?: CSSProperties[\"width\"];\r\n imageHeight?: CSSProperties[\"height\"];\r\n imageWidth?: CSSProperties[\"width\"];\r\n scaleOnHover?: number;\r\n rotateAmplitude?: number;\r\n showMobileWarning?: boolean;\r\n showTooltip?: boolean;\r\n overlayContent?: ReactNode;\r\n displayOverlayContent?: boolean;\r\n className?: string;\r\n}\r\n\r\nconst springValues: SpringOptions = {\r\n damping: 30,\r\n stiffness: 100,\r\n mass: 2,\r\n};\r\n\r\nexport function TiltedCard({\r\n imageSrc,\r\n altText = \"Tilted card image\",\r\n captionText = \"\",\r\n containerHeight = \"300px\",\r\n containerWidth = \"100%\",\r\n imageHeight = \"300px\",\r\n imageWidth = \"300px\",\r\n scaleOnHover = 1.1,\r\n rotateAmplitude = 14,\r\n showMobileWarning = false,\r\n showTooltip = true,\r\n overlayContent = null,\r\n displayOverlayContent = false,\r\n className,\r\n}: TiltedCardProps) {\r\n const ref = useRef<HTMLElement>(null);\r\n\r\n const x = useMotionValue(0);\r\n const y = useMotionValue(0);\r\n const rotateX = useSpring(useMotionValue(0), springValues);\r\n const rotateY = useSpring(useMotionValue(0), springValues);\r\n const scale = useSpring(1, springValues);\r\n const opacity = useSpring(0);\r\n const rotateFigcaption = useSpring(0, {\r\n stiffness: 350,\r\n damping: 30,\r\n mass: 1,\r\n });\r\n\r\n const [lastY, setLastY] = useState<number>(0);\r\n\r\n function handleMouse(e: React.MouseEvent<HTMLElement>) {\r\n if (!ref.current) return;\r\n\r\n const rect = ref.current.getBoundingClientRect();\r\n const offsetX = e.clientX - rect.left - rect.width / 2;\r\n const offsetY = e.clientY - rect.top - rect.height / 2;\r\n\r\n const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;\r\n const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;\r\n\r\n rotateX.set(rotationX);\r\n rotateY.set(rotationY);\r\n\r\n x.set(e.clientX - rect.left);\r\n y.set(e.clientY - rect.top);\r\n\r\n const velocityY = offsetY - lastY;\r\n rotateFigcaption.set(-velocityY * 0.6);\r\n setLastY(offsetY);\r\n }\r\n\r\n function handleMouseEnter() {\r\n scale.set(scaleOnHover);\r\n opacity.set(1);\r\n }\r\n\r\n function handleMouseLeave() {\r\n opacity.set(0);\r\n scale.set(1);\r\n rotateX.set(0);\r\n rotateY.set(0);\r\n rotateFigcaption.set(0);\r\n }\r\n\r\n return (\r\n <figure\r\n ref={ref}\r\n className={cn(\r\n \"relative flex items-center justify-center [perspective:800px]\",\r\n className\r\n )}\r\n style={{\r\n height: containerHeight,\r\n width: containerWidth,\r\n }}\r\n onMouseMove={handleMouse}\r\n onMouseEnter={handleMouseEnter}\r\n onMouseLeave={handleMouseLeave}\r\n >\r\n {showMobileWarning && (\r\n <div className=\"absolute top-2 left-2 text-xs text-muted-foreground md:hidden\">\r\n Best viewed on desktop\r\n </div>\r\n )}\r\n\r\n <motion.div\r\n className=\"relative [transform-style:preserve-3d]\"\r\n style={{\r\n width: imageWidth,\r\n height: imageHeight,\r\n rotateX,\r\n rotateY,\r\n scale,\r\n }}\r\n >\r\n <motion.img\r\n src={imageSrc}\r\n alt={altText}\r\n className=\"absolute inset-0 w-full h-full object-cover rounded-lg\"\r\n style={{\r\n width: imageWidth,\r\n height: imageHeight,\r\n }}\r\n />\r\n\r\n {displayOverlayContent && overlayContent && (\r\n <motion.div className=\"absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg\">\r\n {overlayContent}\r\n </motion.div>\r\n )}\r\n </motion.div>\r\n\r\n {showTooltip && captionText && (\r\n <motion.figcaption\r\n className=\"pointer-events-none absolute px-3 py-1.5 text-sm bg-white dark:bg-zinc-900 rounded-full shadow-lg whitespace-nowrap\"\r\n style={{\r\n x,\r\n y,\r\n opacity,\r\n rotate: rotateFigcaption,\r\n }}\r\n >\r\n {captionText}\r\n </motion.figcaption>\r\n )}\r\n </figure>\r\n );\r\n}\r\n\r\nexport default TiltedCard;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var framerMotion=require('framer-motion'),jsxRuntime=require('react/jsx-runtime');function r(...e){return e.filter(Boolean).join(" ")}function s({children:e,onClick:a,className:i,disabled:n=false}){return jsxRuntime.jsxs(framerMotion.motion.button,{onClick:a,disabled:n,className:r("relative inline-flex items-center justify-center px-6 py-3 overflow-hidden font-medium rounded-xl","bg-gradient-to-r from-zinc-900 to-zinc-800 dark:from-zinc-100 dark:to-zinc-200","text-white dark:text-zinc-900","border border-zinc-700 dark:border-zinc-300","shadow-lg shadow-zinc-900/20 dark:shadow-zinc-100/20","transition-all duration-300","hover:shadow-xl hover:shadow-zinc-900/30 dark:hover:shadow-zinc-100/30","disabled:opacity-50 disabled:cursor-not-allowed",i),whileHover:{scale:n?1:1.02},whileTap:{scale:n?1:.98},children:[jsxRuntime.jsx(framerMotion.motion.span,{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent",initial:{x:"-100%"},whileHover:{x:"100%"},transition:{duration:.6,ease:"easeInOut"}}),jsxRuntime.jsx("span",{className:"relative z-10 flex items-center gap-2",children:e})]})}var c=s;exports.V0Button=s;exports.default=c;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/v0-button/index.tsx"],"names":["cn","classes","V0Button","children","onClick","className","disabled","jsxs","motion","jsx","v0_button_default"],"mappings":"wJAIA,SAASA,CAAAA,CAAAA,GAAMC,EAAyC,CACtD,OAAOA,CAAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CACzC,CASO,SAASC,CAAAA,CAAS,CACvB,SAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,EAAW,KACb,CAAA,CAAkB,CAChB,OACEC,eAAAA,CAACC,mBAAAA,CAAO,OAAP,CACC,OAAA,CAASJ,CAAAA,CACT,QAAA,CAAUE,CAAAA,CACV,SAAA,CAAWN,EACT,mGAAA,CACA,gFAAA,CACA,+BAAA,CACA,6CAAA,CACA,sDAAA,CACA,6BAAA,CACA,yEACA,iDAAA,CACAK,CACF,EACA,UAAA,CAAY,CAAE,MAAOC,CAAAA,CAAW,CAAA,CAAI,IAAK,CAAA,CACzC,QAAA,CAAU,CAAE,MAAOA,CAAAA,CAAW,CAAA,CAAI,GAAK,CAAA,CAEvC,QAAA,CAAA,CAAAG,cAAAA,CAACD,oBAAO,IAAA,CAAP,CACC,SAAA,CAAU,gFAAA,CACV,OAAA,CAAS,CAAE,EAAG,OAAQ,CAAA,CACtB,UAAA,CAAY,CAAE,CAAA,CAAG,MAAO,EACxB,UAAA,CAAY,CAAE,QAAA,CAAU,EAAA,CAAK,IAAA,CAAM,WAAY,EACjD,CAAA,CACAC,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,uCAAA,CACb,QAAA,CAAAN,EACH,CAAA,CAAA,CACF,CAEJ,CAEA,IAAOO,CAAAA,CAAQR","file":"index.js","sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\n\r\nfunction cn(...classes: (string | undefined | false)[]) {\r\n return classes.filter(Boolean).join(\" \");\r\n}\r\n\r\ninterface V0ButtonProps {\r\n children: React.ReactNode;\r\n onClick?: () => void;\r\n className?: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport function V0Button({\r\n children,\r\n onClick,\r\n className,\r\n disabled = false,\r\n}: V0ButtonProps) {\r\n return (\r\n <motion.button\r\n onClick={onClick}\r\n disabled={disabled}\r\n className={cn(\r\n \"relative inline-flex items-center justify-center px-6 py-3 overflow-hidden font-medium rounded-xl\",\r\n \"bg-gradient-to-r from-zinc-900 to-zinc-800 dark:from-zinc-100 dark:to-zinc-200\",\r\n \"text-white dark:text-zinc-900\",\r\n \"border border-zinc-700 dark:border-zinc-300\",\r\n \"shadow-lg shadow-zinc-900/20 dark:shadow-zinc-100/20\",\r\n \"transition-all duration-300\",\r\n \"hover:shadow-xl hover:shadow-zinc-900/30 dark:hover:shadow-zinc-100/30\",\r\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\r\n className\r\n )}\r\n whileHover={{ scale: disabled ? 1 : 1.02 }}\r\n whileTap={{ scale: disabled ? 1 : 0.98 }}\r\n >\r\n <motion.span\r\n className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent\"\r\n initial={{ x: \"-100%\" }}\r\n whileHover={{ x: \"100%\" }}\r\n transition={{ duration: 0.6, ease: \"easeInOut\" }}\r\n />\r\n <span className=\"relative z-10 flex items-center gap-2\">\r\n {children}\r\n </span>\r\n </motion.button>\r\n );\r\n}\r\n\r\nexport default V0Button;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {motion}from'framer-motion';import {jsxs,jsx}from'react/jsx-runtime';function r(...e){return e.filter(Boolean).join(" ")}function s({children:e,onClick:a,className:i,disabled:n=false}){return jsxs(motion.button,{onClick:a,disabled:n,className:r("relative inline-flex items-center justify-center px-6 py-3 overflow-hidden font-medium rounded-xl","bg-gradient-to-r from-zinc-900 to-zinc-800 dark:from-zinc-100 dark:to-zinc-200","text-white dark:text-zinc-900","border border-zinc-700 dark:border-zinc-300","shadow-lg shadow-zinc-900/20 dark:shadow-zinc-100/20","transition-all duration-300","hover:shadow-xl hover:shadow-zinc-900/30 dark:hover:shadow-zinc-100/30","disabled:opacity-50 disabled:cursor-not-allowed",i),whileHover:{scale:n?1:1.02},whileTap:{scale:n?1:.98},children:[jsx(motion.span,{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent",initial:{x:"-100%"},whileHover:{x:"100%"},transition:{duration:.6,ease:"easeInOut"}}),jsx("span",{className:"relative z-10 flex items-center gap-2",children:e})]})}var c=s;export{s as V0Button,c as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/v0-button/index.tsx"],"names":["cn","classes","V0Button","children","onClick","className","disabled","jsxs","motion","jsx","v0_button_default"],"mappings":"4EAIA,SAASA,CAAAA,CAAAA,GAAMC,EAAyC,CACtD,OAAOA,CAAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CACzC,CASO,SAASC,CAAAA,CAAS,CACvB,SAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,EAAW,KACb,CAAA,CAAkB,CAChB,OACEC,IAAAA,CAACC,MAAAA,CAAO,OAAP,CACC,OAAA,CAASJ,CAAAA,CACT,QAAA,CAAUE,CAAAA,CACV,SAAA,CAAWN,EACT,mGAAA,CACA,gFAAA,CACA,+BAAA,CACA,6CAAA,CACA,sDAAA,CACA,6BAAA,CACA,yEACA,iDAAA,CACAK,CACF,EACA,UAAA,CAAY,CAAE,MAAOC,CAAAA,CAAW,CAAA,CAAI,IAAK,CAAA,CACzC,QAAA,CAAU,CAAE,MAAOA,CAAAA,CAAW,CAAA,CAAI,GAAK,CAAA,CAEvC,QAAA,CAAA,CAAAG,GAAAA,CAACD,OAAO,IAAA,CAAP,CACC,SAAA,CAAU,gFAAA,CACV,OAAA,CAAS,CAAE,EAAG,OAAQ,CAAA,CACtB,UAAA,CAAY,CAAE,CAAA,CAAG,MAAO,EACxB,UAAA,CAAY,CAAE,QAAA,CAAU,EAAA,CAAK,IAAA,CAAM,WAAY,EACjD,CAAA,CACAC,GAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,uCAAA,CACb,QAAA,CAAAN,EACH,CAAA,CAAA,CACF,CAEJ,CAEA,IAAOO,CAAAA,CAAQR","file":"index.mjs","sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\n\r\nfunction cn(...classes: (string | undefined | false)[]) {\r\n return classes.filter(Boolean).join(\" \");\r\n}\r\n\r\ninterface V0ButtonProps {\r\n children: React.ReactNode;\r\n onClick?: () => void;\r\n className?: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport function V0Button({\r\n children,\r\n onClick,\r\n className,\r\n disabled = false,\r\n}: V0ButtonProps) {\r\n return (\r\n <motion.button\r\n onClick={onClick}\r\n disabled={disabled}\r\n className={cn(\r\n \"relative inline-flex items-center justify-center px-6 py-3 overflow-hidden font-medium rounded-xl\",\r\n \"bg-gradient-to-r from-zinc-900 to-zinc-800 dark:from-zinc-100 dark:to-zinc-200\",\r\n \"text-white dark:text-zinc-900\",\r\n \"border border-zinc-700 dark:border-zinc-300\",\r\n \"shadow-lg shadow-zinc-900/20 dark:shadow-zinc-100/20\",\r\n \"transition-all duration-300\",\r\n \"hover:shadow-xl hover:shadow-zinc-900/30 dark:hover:shadow-zinc-100/30\",\r\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\r\n className\r\n )}\r\n whileHover={{ scale: disabled ? 1 : 1.02 }}\r\n whileTap={{ scale: disabled ? 1 : 0.98 }}\r\n >\r\n <motion.span\r\n className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent\"\r\n initial={{ x: \"-100%\" }}\r\n whileHover={{ x: \"100%\" }}\r\n transition={{ duration: 0.6, ease: \"easeInOut\" }}\r\n />\r\n <span className=\"relative z-10 flex items-center gap-2\">\r\n {children}\r\n </span>\r\n </motion.button>\r\n );\r\n}\r\n\r\nexport default V0Button;\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bynana-ui",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.5.0",
|
|
4
|
+
"description": "120+ Beautiful React UI components built with Tailwind CSS and Framer Motion",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -97,6 +97,37 @@
|
|
|
97
97
|
"./checkbox": { "import": "./dist/checkbox/index.mjs", "require": "./dist/checkbox/index.js", "types": "./dist/checkbox/index.d.ts" },
|
|
98
98
|
"./radio": { "import": "./dist/radio/index.mjs", "require": "./dist/radio/index.js", "types": "./dist/radio/index.d.ts" },
|
|
99
99
|
"./select": { "import": "./dist/select/index.mjs", "require": "./dist/select/index.js", "types": "./dist/select/index.d.ts" },
|
|
100
|
+
"./input-otp": { "import": "./dist/input-otp/index.mjs", "require": "./dist/input-otp/index.js", "types": "./dist/input-otp/index.d.ts" },
|
|
101
|
+
"./hamburger-basic": { "import": "./dist/hamburger-basic/index.mjs", "require": "./dist/hamburger-basic/index.js", "types": "./dist/hamburger-basic/index.d.ts" },
|
|
102
|
+
"./hamburger-spin": { "import": "./dist/hamburger-spin/index.mjs", "require": "./dist/hamburger-spin/index.js", "types": "./dist/hamburger-spin/index.d.ts" },
|
|
103
|
+
"./hamburger-morph": { "import": "./dist/hamburger-morph/index.mjs", "require": "./dist/hamburger-morph/index.js", "types": "./dist/hamburger-morph/index.d.ts" },
|
|
104
|
+
"./hamburger-spring": { "import": "./dist/hamburger-spring/index.mjs", "require": "./dist/hamburger-spring/index.js", "types": "./dist/hamburger-spring/index.d.ts" },
|
|
105
|
+
"./hamburger-wave": { "import": "./dist/hamburger-wave/index.mjs", "require": "./dist/hamburger-wave/index.js", "types": "./dist/hamburger-wave/index.d.ts" },
|
|
106
|
+
"./hamburger-stagger": { "import": "./dist/hamburger-stagger/index.mjs", "require": "./dist/hamburger-stagger/index.js", "types": "./dist/hamburger-stagger/index.d.ts" },
|
|
107
|
+
"./hamburger-3d": { "import": "./dist/hamburger-3d/index.mjs", "require": "./dist/hamburger-3d/index.js", "types": "./dist/hamburger-3d/index.d.ts" },
|
|
108
|
+
"./hamburger-elastic": { "import": "./dist/hamburger-elastic/index.mjs", "require": "./dist/hamburger-elastic/index.js", "types": "./dist/hamburger-elastic/index.d.ts" },
|
|
109
|
+
"./click-spark": { "import": "./dist/click-spark/index.mjs", "require": "./dist/click-spark/index.js", "types": "./dist/click-spark/index.d.ts" },
|
|
110
|
+
"./smooth-cursor": { "import": "./dist/smooth-cursor/index.mjs", "require": "./dist/smooth-cursor/index.js", "types": "./dist/smooth-cursor/index.d.ts" },
|
|
111
|
+
"./float-effect": { "import": "./dist/float-effect/index.mjs", "require": "./dist/float-effect/index.js", "types": "./dist/float-effect/index.d.ts" },
|
|
112
|
+
"./glow-effect": { "import": "./dist/glow-effect/index.mjs", "require": "./dist/glow-effect/index.js", "types": "./dist/glow-effect/index.d.ts" },
|
|
113
|
+
"./blur-fade": { "import": "./dist/blur-fade/index.mjs", "require": "./dist/blur-fade/index.js", "types": "./dist/blur-fade/index.d.ts" },
|
|
114
|
+
"./pixel-card": { "import": "./dist/pixel-card/index.mjs", "require": "./dist/pixel-card/index.js", "types": "./dist/pixel-card/index.d.ts" },
|
|
115
|
+
"./tilted-card": { "import": "./dist/tilted-card/index.mjs", "require": "./dist/tilted-card/index.js", "types": "./dist/tilted-card/index.d.ts" },
|
|
116
|
+
"./infinite-scroll": { "import": "./dist/infinite-scroll/index.mjs", "require": "./dist/infinite-scroll/index.js", "types": "./dist/infinite-scroll/index.d.ts" },
|
|
117
|
+
"./multi-step-loader": { "import": "./dist/multi-step-loader/index.mjs", "require": "./dist/multi-step-loader/index.js", "types": "./dist/multi-step-loader/index.d.ts" },
|
|
118
|
+
"./ascii-text": { "import": "./dist/ascii-text/index.mjs", "require": "./dist/ascii-text/index.js", "types": "./dist/ascii-text/index.d.ts" },
|
|
119
|
+
"./falling-text": { "import": "./dist/falling-text/index.mjs", "require": "./dist/falling-text/index.js", "types": "./dist/falling-text/index.d.ts" },
|
|
120
|
+
"./animated-circular-progress": { "import": "./dist/animated-circular-progress/index.mjs", "require": "./dist/animated-circular-progress/index.js", "types": "./dist/animated-circular-progress/index.d.ts" },
|
|
121
|
+
"./loading-invert": { "import": "./dist/loading-invert/index.mjs", "require": "./dist/loading-invert/index.js", "types": "./dist/loading-invert/index.d.ts" },
|
|
122
|
+
"./loader": { "import": "./dist/loader/index.mjs", "require": "./dist/loader/index.js", "types": "./dist/loader/index.d.ts" },
|
|
123
|
+
"./theme-toggler": { "import": "./dist/theme-toggler/index.mjs", "require": "./dist/theme-toggler/index.js", "types": "./dist/theme-toggler/index.d.ts" },
|
|
124
|
+
"./shimmer-effect": { "import": "./dist/shimmer-effect/index.mjs", "require": "./dist/shimmer-effect/index.js", "types": "./dist/shimmer-effect/index.d.ts" },
|
|
125
|
+
"./scroll-velocity": { "import": "./dist/scroll-velocity/index.mjs", "require": "./dist/scroll-velocity/index.js", "types": "./dist/scroll-velocity/index.d.ts" },
|
|
126
|
+
"./text-cursor": { "import": "./dist/text-cursor/index.mjs", "require": "./dist/text-cursor/index.js", "types": "./dist/text-cursor/index.d.ts" },
|
|
127
|
+
"./social-button": { "import": "./dist/social-button/index.mjs", "require": "./dist/social-button/index.js", "types": "./dist/social-button/index.d.ts" },
|
|
128
|
+
"./v0-button": { "import": "./dist/v0-button/index.mjs", "require": "./dist/v0-button/index.js", "types": "./dist/v0-button/index.d.ts" },
|
|
129
|
+
"./contribution-graph": { "import": "./dist/contribution-graph/index.mjs", "require": "./dist/contribution-graph/index.js", "types": "./dist/contribution-graph/index.d.ts" },
|
|
130
|
+
"./elastic-slider": { "import": "./dist/elastic-slider/index.mjs", "require": "./dist/elastic-slider/index.js", "types": "./dist/elastic-slider/index.d.ts" },
|
|
100
131
|
"./styles.css": "./dist/styles.css"
|
|
101
132
|
},
|
|
102
133
|
"files": ["dist", "README.md"],
|