bynana-ui 1.4.0 → 1.6.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/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/crosshair/index.js +2 -0
- package/dist/crosshair/index.js.map +1 -0
- package/dist/crosshair/index.mjs +2 -0
- package/dist/crosshair/index.mjs.map +1 -0
- package/dist/decay-card/index.js +3 -0
- package/dist/decay-card/index.js.map +1 -0
- package/dist/decay-card/index.mjs +3 -0
- package/dist/decay-card/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/flowing-menu/index.js +3 -0
- package/dist/flowing-menu/index.js.map +1 -0
- package/dist/flowing-menu/index.mjs +3 -0
- package/dist/flowing-menu/index.mjs.map +1 -0
- package/dist/gooey-nav/index.js +2 -0
- package/dist/gooey-nav/index.js.map +1 -0
- package/dist/gooey-nav/index.mjs +2 -0
- package/dist/gooey-nav/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-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-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 +14 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +14 -11
- package/dist/index.mjs.map +1 -1
- package/dist/liquid-glass-card/index.js +2 -0
- package/dist/liquid-glass-card/index.js.map +1 -0
- package/dist/liquid-glass-card/index.mjs +2 -0
- package/dist/liquid-glass-card/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/pill-nav/index.js +2 -0
- package/dist/pill-nav/index.js.map +1 -0
- package/dist/pill-nav/index.mjs +2 -0
- package/dist/pill-nav/index.mjs.map +1 -0
- package/dist/scroll-text/index.js +2 -0
- package/dist/scroll-text/index.js.map +1 -0
- package/dist/scroll-text/index.mjs +2 -0
- package/dist/scroll-text/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-drawer/index.js +2 -0
- package/dist/smooth-drawer/index.js.map +1 -0
- package/dist/smooth-drawer/index.mjs +2 -0
- package/dist/smooth-drawer/index.mjs.map +1 -0
- package/dist/smooth-tab/index.js +2 -0
- package/dist/smooth-tab/index.js.map +1 -0
- package/dist/smooth-tab/index.mjs +2 -0
- package/dist/smooth-tab/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/target-cursor/index.js +2 -0
- package/dist/target-cursor/index.js.map +1 -0
- package/dist/target-cursor/index.mjs +2 -0
- package/dist/target-cursor/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/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 +29 -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'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function E(...t){return tailwindMerge.twMerge(clsx.clsx(t))}function F({targetSelector:t=".cursor-target",spinDuration:v=2,hideDefaultCursor:b=true,color:w="#000000",className:M}){let x=react.useRef(null),C=react.useRef(null),[h,p]=react.useState({x:0,y:0}),[d,g]=react.useState(false),[R,T]=react.useState(0),u=react.useRef();react.useEffect(()=>{if(typeof window>"u")return;let a=document.body.style.cursor;b&&(document.body.style.cursor="none"),p({x:window.innerWidth/2,y:window.innerHeight/2});let o=e=>{p({x:e.clientX,y:e.clientY});},n=e=>{let s=e.target;(s.matches(t)||s.closest(t))&&g(true);},r=e=>{let s=e.target;(s.matches(t)||s.closest(t))&&g(false);};window.addEventListener("mousemove",o),window.addEventListener("mouseover",n),window.addEventListener("mouseout",r);let c,y=e=>{c||(c=e);let W=(e-c)/(v*1e3)*360;T(W%360),u.current=requestAnimationFrame(y);};return u.current=requestAnimationFrame(y),()=>{window.removeEventListener("mousemove",o),window.removeEventListener("mouseover",n),window.removeEventListener("mouseout",r),document.body.style.cursor=a,u.current&&cancelAnimationFrame(u.current);}},[t,v,b]);let l=12,i=3;return jsxRuntime.jsxs("div",{ref:x,className:E("fixed pointer-events-none z-[10000]",M),style:{left:h.x,top:h.y,transform:`translate(-50%, -50%) rotate(${d?0:R}deg)`,transition:d?"transform 0.2s ease":"none"},children:[jsxRuntime.jsx("div",{ref:C,className:"absolute rounded-full",style:{width:6,height:6,backgroundColor:w,left:"50%",top:"50%",transform:"translate(-50%, -50%)"}}),["tl","tr","br","bl"].map(a=>{let o=a.includes("t"),n=a.includes("l"),r=d?20:l*1.5;return jsxRuntime.jsx("div",{className:"absolute transition-all duration-200",style:{width:l,height:l,borderColor:w,borderWidth:i,borderStyle:"solid",borderTopWidth:o?i:0,borderBottomWidth:o?0:i,borderLeftWidth:n?i:0,borderRightWidth:n?0:i,left:n?-r:"auto",right:n?"auto":-r,top:o?-r:"auto",bottom:o?"auto":-r}},a)})]})}var B=F;exports.TargetCursor=F;exports.default=B;//# sourceMappingURL=index.js.map
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/target-cursor/index.tsx"],"names":["cn","inputs","twMerge","clsx","TargetCursor","targetSelector","spinDuration","hideDefaultCursor","color","className","cursorRef","useRef","dotRef","position","setPosition","useState","isHovering","setIsHovering","rotation","setRotation","animationRef","useEffect","originalCursor","handleMouseMove","handleMouseOver","target","handleMouseOut","startTime","animate","timestamp","newRotation","cornerSize","borderWidth","jsxs","jsx","corner","isTop","isLeft","offset","target_cursor_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 React, { useEffect, useRef, useState } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TargetCursorProps {\r\n targetSelector?: string;\r\n spinDuration?: number;\r\n hideDefaultCursor?: boolean;\r\n color?: string;\r\n className?: string;\r\n}\r\n\r\nexport function TargetCursor({\r\n targetSelector = \".cursor-target\",\r\n spinDuration = 2,\r\n hideDefaultCursor = true,\r\n color = \"#000000\",\r\n className,\r\n}: TargetCursorProps) {\r\n const cursorRef = useRef<HTMLDivElement>(null);\r\n const dotRef = useRef<HTMLDivElement>(null);\r\n const [position, setPosition] = useState({ x: 0, y: 0 });\r\n const [isHovering, setIsHovering] = useState(false);\r\n const [rotation, setRotation] = useState(0);\r\n const animationRef = useRef<number>();\r\n\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n const originalCursor = document.body.style.cursor;\r\n if (hideDefaultCursor) {\r\n document.body.style.cursor = \"none\";\r\n }\r\n\r\n setPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n setPosition({ x: e.clientX, y: e.clientY });\r\n };\r\n\r\n const handleMouseOver = (e: MouseEvent) => {\r\n const target = e.target as Element;\r\n if (target.matches(targetSelector) || target.closest(targetSelector)) {\r\n setIsHovering(true);\r\n }\r\n };\r\n\r\n const handleMouseOut = (e: MouseEvent) => {\r\n const target = e.target as Element;\r\n if (target.matches(targetSelector) || target.closest(targetSelector)) {\r\n setIsHovering(false);\r\n }\r\n };\r\n\r\n window.addEventListener(\"mousemove\", handleMouseMove);\r\n window.addEventListener(\"mouseover\", handleMouseOver);\r\n window.addEventListener(\"mouseout\", handleMouseOut);\r\n\r\n // Rotation animation\r\n let startTime: number;\r\n const animate = (timestamp: number) => {\r\n if (!startTime) startTime = timestamp;\r\n const elapsed = timestamp - startTime;\r\n const newRotation = (elapsed / (spinDuration * 1000)) * 360;\r\n setRotation(newRotation % 360);\r\n animationRef.current = requestAnimationFrame(animate);\r\n };\r\n animationRef.current = requestAnimationFrame(animate);\r\n\r\n return () => {\r\n window.removeEventListener(\"mousemove\", handleMouseMove);\r\n window.removeEventListener(\"mouseover\", handleMouseOver);\r\n window.removeEventListener(\"mouseout\", handleMouseOut);\r\n document.body.style.cursor = originalCursor;\r\n if (animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, [targetSelector, spinDuration, hideDefaultCursor]);\r\n\r\n const cornerSize = 12;\r\n const borderWidth = 3;\r\n\r\n return (\r\n <div\r\n ref={cursorRef}\r\n className={cn(\"fixed pointer-events-none z-[10000]\", className)}\r\n style={{\r\n left: position.x,\r\n top: position.y,\r\n transform: `translate(-50%, -50%) rotate(${isHovering ? 0 : rotation}deg)`,\r\n transition: isHovering ? \"transform 0.2s ease\" : \"none\",\r\n }}\r\n >\r\n {/* Center dot */}\r\n <div\r\n ref={dotRef}\r\n className=\"absolute rounded-full\"\r\n style={{\r\n width: 6,\r\n height: 6,\r\n backgroundColor: color,\r\n left: \"50%\",\r\n top: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n }}\r\n />\r\n\r\n {/* Corners */}\r\n {[\"tl\", \"tr\", \"br\", \"bl\"].map((corner) => {\r\n const isTop = corner.includes(\"t\");\r\n const isLeft = corner.includes(\"l\");\r\n const offset = isHovering ? 20 : cornerSize * 1.5;\r\n\r\n return (\r\n <div\r\n key={corner}\r\n className=\"absolute transition-all duration-200\"\r\n style={{\r\n width: cornerSize,\r\n height: cornerSize,\r\n borderColor: color,\r\n borderWidth: borderWidth,\r\n borderStyle: \"solid\",\r\n borderTopWidth: isTop ? borderWidth : 0,\r\n borderBottomWidth: !isTop ? borderWidth : 0,\r\n borderLeftWidth: isLeft ? borderWidth : 0,\r\n borderRightWidth: !isLeft ? borderWidth : 0,\r\n left: isLeft ? -offset : \"auto\",\r\n right: !isLeft ? -offset : \"auto\",\r\n top: isTop ? -offset : \"auto\",\r\n bottom: !isTop ? -offset : \"auto\",\r\n }}\r\n />\r\n );\r\n })}\r\n </div>\r\n );\r\n}\r\n\r\nexport default TargetCursor;\r\n"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {useRef,useState,useEffect}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function E(...t){return twMerge(clsx(t))}function F({targetSelector:t=".cursor-target",spinDuration:v=2,hideDefaultCursor:b=true,color:w="#000000",className:M}){let x=useRef(null),C=useRef(null),[h,p]=useState({x:0,y:0}),[d,g]=useState(false),[R,T]=useState(0),u=useRef();useEffect(()=>{if(typeof window>"u")return;let a=document.body.style.cursor;b&&(document.body.style.cursor="none"),p({x:window.innerWidth/2,y:window.innerHeight/2});let o=e=>{p({x:e.clientX,y:e.clientY});},n=e=>{let s=e.target;(s.matches(t)||s.closest(t))&&g(true);},r=e=>{let s=e.target;(s.matches(t)||s.closest(t))&&g(false);};window.addEventListener("mousemove",o),window.addEventListener("mouseover",n),window.addEventListener("mouseout",r);let c,y=e=>{c||(c=e);let W=(e-c)/(v*1e3)*360;T(W%360),u.current=requestAnimationFrame(y);};return u.current=requestAnimationFrame(y),()=>{window.removeEventListener("mousemove",o),window.removeEventListener("mouseover",n),window.removeEventListener("mouseout",r),document.body.style.cursor=a,u.current&&cancelAnimationFrame(u.current);}},[t,v,b]);let l=12,i=3;return jsxs("div",{ref:x,className:E("fixed pointer-events-none z-[10000]",M),style:{left:h.x,top:h.y,transform:`translate(-50%, -50%) rotate(${d?0:R}deg)`,transition:d?"transform 0.2s ease":"none"},children:[jsx("div",{ref:C,className:"absolute rounded-full",style:{width:6,height:6,backgroundColor:w,left:"50%",top:"50%",transform:"translate(-50%, -50%)"}}),["tl","tr","br","bl"].map(a=>{let o=a.includes("t"),n=a.includes("l"),r=d?20:l*1.5;return jsx("div",{className:"absolute transition-all duration-200",style:{width:l,height:l,borderColor:w,borderWidth:i,borderStyle:"solid",borderTopWidth:o?i:0,borderBottomWidth:o?0:i,borderLeftWidth:n?i:0,borderRightWidth:n?0:i,left:n?-r:"auto",right:n?"auto":-r,top:o?-r:"auto",bottom:o?"auto":-r}},a)})]})}var B=F;export{F as TargetCursor,B as default};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/cn.ts","../../src/target-cursor/index.tsx"],"names":["cn","inputs","twMerge","clsx","TargetCursor","targetSelector","spinDuration","hideDefaultCursor","color","className","cursorRef","useRef","dotRef","position","setPosition","useState","isHovering","setIsHovering","rotation","setRotation","animationRef","useEffect","originalCursor","handleMouseMove","handleMouseOver","target","handleMouseOut","startTime","animate","timestamp","newRotation","cornerSize","borderWidth","jsxs","jsx","corner","isTop","isLeft","offset","target_cursor_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 React, { useEffect, useRef, useState } from \"react\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\ninterface TargetCursorProps {\r\n targetSelector?: string;\r\n spinDuration?: number;\r\n hideDefaultCursor?: boolean;\r\n color?: string;\r\n className?: string;\r\n}\r\n\r\nexport function TargetCursor({\r\n targetSelector = \".cursor-target\",\r\n spinDuration = 2,\r\n hideDefaultCursor = true,\r\n color = \"#000000\",\r\n className,\r\n}: TargetCursorProps) {\r\n const cursorRef = useRef<HTMLDivElement>(null);\r\n const dotRef = useRef<HTMLDivElement>(null);\r\n const [position, setPosition] = useState({ x: 0, y: 0 });\r\n const [isHovering, setIsHovering] = useState(false);\r\n const [rotation, setRotation] = useState(0);\r\n const animationRef = useRef<number>();\r\n\r\n useEffect(() => {\r\n if (typeof window === \"undefined\") return;\r\n\r\n const originalCursor = document.body.style.cursor;\r\n if (hideDefaultCursor) {\r\n document.body.style.cursor = \"none\";\r\n }\r\n\r\n setPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n setPosition({ x: e.clientX, y: e.clientY });\r\n };\r\n\r\n const handleMouseOver = (e: MouseEvent) => {\r\n const target = e.target as Element;\r\n if (target.matches(targetSelector) || target.closest(targetSelector)) {\r\n setIsHovering(true);\r\n }\r\n };\r\n\r\n const handleMouseOut = (e: MouseEvent) => {\r\n const target = e.target as Element;\r\n if (target.matches(targetSelector) || target.closest(targetSelector)) {\r\n setIsHovering(false);\r\n }\r\n };\r\n\r\n window.addEventListener(\"mousemove\", handleMouseMove);\r\n window.addEventListener(\"mouseover\", handleMouseOver);\r\n window.addEventListener(\"mouseout\", handleMouseOut);\r\n\r\n // Rotation animation\r\n let startTime: number;\r\n const animate = (timestamp: number) => {\r\n if (!startTime) startTime = timestamp;\r\n const elapsed = timestamp - startTime;\r\n const newRotation = (elapsed / (spinDuration * 1000)) * 360;\r\n setRotation(newRotation % 360);\r\n animationRef.current = requestAnimationFrame(animate);\r\n };\r\n animationRef.current = requestAnimationFrame(animate);\r\n\r\n return () => {\r\n window.removeEventListener(\"mousemove\", handleMouseMove);\r\n window.removeEventListener(\"mouseover\", handleMouseOver);\r\n window.removeEventListener(\"mouseout\", handleMouseOut);\r\n document.body.style.cursor = originalCursor;\r\n if (animationRef.current) {\r\n cancelAnimationFrame(animationRef.current);\r\n }\r\n };\r\n }, [targetSelector, spinDuration, hideDefaultCursor]);\r\n\r\n const cornerSize = 12;\r\n const borderWidth = 3;\r\n\r\n return (\r\n <div\r\n ref={cursorRef}\r\n className={cn(\"fixed pointer-events-none z-[10000]\", className)}\r\n style={{\r\n left: position.x,\r\n top: position.y,\r\n transform: `translate(-50%, -50%) rotate(${isHovering ? 0 : rotation}deg)`,\r\n transition: isHovering ? \"transform 0.2s ease\" : \"none\",\r\n }}\r\n >\r\n {/* Center dot */}\r\n <div\r\n ref={dotRef}\r\n className=\"absolute rounded-full\"\r\n style={{\r\n width: 6,\r\n height: 6,\r\n backgroundColor: color,\r\n left: \"50%\",\r\n top: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n }}\r\n />\r\n\r\n {/* Corners */}\r\n {[\"tl\", \"tr\", \"br\", \"bl\"].map((corner) => {\r\n const isTop = corner.includes(\"t\");\r\n const isLeft = corner.includes(\"l\");\r\n const offset = isHovering ? 20 : cornerSize * 1.5;\r\n\r\n return (\r\n <div\r\n key={corner}\r\n className=\"absolute transition-all duration-200\"\r\n style={{\r\n width: cornerSize,\r\n height: cornerSize,\r\n borderColor: color,\r\n borderWidth: borderWidth,\r\n borderStyle: \"solid\",\r\n borderTopWidth: isTop ? borderWidth : 0,\r\n borderBottomWidth: !isTop ? borderWidth : 0,\r\n borderLeftWidth: isLeft ? borderWidth : 0,\r\n borderRightWidth: !isLeft ? borderWidth : 0,\r\n left: isLeft ? -offset : \"auto\",\r\n right: !isLeft ? -offset : \"auto\",\r\n top: isTop ? -offset : \"auto\",\r\n bottom: !isTop ? -offset : \"auto\",\r\n }}\r\n />\r\n );\r\n })}\r\n </div>\r\n );\r\n}\r\n\r\nexport default TargetCursor;\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":"+KA0BO,SAASA,CAAAA,CAAW,CACzB,IAAA,CAAAC,CAAAA,CAAO,eACP,KAAA,CAAAC,CAAAA,CAAQ,IACR,OAAA,CAAAC,CAAAA,CAAU,IACV,oBAAA,CAAAC,CAAAA,CAAuB,IAAA,CACvB,WAAA,CAAAC,CAAAA,CAAc,IAAA,CACd,aAAAC,CAAAA,CAAe,EAAA,CACf,eAAA,CAAAC,CAAAA,CAAkB,EAAA,CAClB,SAAA,CAAAC,EAAY,CACd,CAAA,CAAoB,CAClB,GAAM,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,cAAAA,CAAsB,EAAE,CAAA,CAC5CC,EAAeC,YAAAA,CAAuB,IAAI,CAAA,CAC1CC,CAAAA,CAAkBD,YAAAA,CAAe,IAAA,CAAK,KAAK,CAAA,CAC3CE,CAAAA,CAAYF,YAAAA,CAAe,CAAC,CAAA,CAE5BG,EAAmB,CAAA,EAAkB,CACzC,GAAI,CAACJ,CAAAA,CAAa,OAAA,CAAS,OAC3B,IAAMK,CAAAA,CAAOL,EAAa,OAAA,CAAQ,qBAAA,GAC5BM,CAAAA,CAAS,CAAA,CAAE,OAAA,CAAUD,CAAAA,CAAK,IAAA,CAC1BE,CAAAA,CAAS,EAAE,OAAA,CAAUF,CAAAA,CAAK,GAAA,CAEhCP,CAAAA,CAASU,CAAAA,EAAQ,CACf,IAAIC,CAAAA,CAAW,CAAC,GAAGD,CAAI,CAAA,CACvB,GAAIC,EAAS,MAAA,GAAW,CAAA,CACtBA,EAAS,IAAA,CAAK,CACZ,GAAIN,CAAAA,CAAU,OAAA,EAAA,CACd,CAAA,CAAGG,CAAAA,CACHC,CAAAA,CACA,KAAA,CAAO,EACP,GAAId,CAAAA,EAAe,CACjB,OAAA,CAAS,IAAA,CAAK,MAAA,GAAW,EAAA,CAAK,CAAA,CAC9B,OAAA,CAAS,IAAA,CAAK,MAAA,EAAO,CAAI,GAAK,CAAA,CAC9B,YAAA,CAAc,KAAK,MAAA,EAAO,CAAI,GAAK,CACrC,CACF,CAAC,CAAA,CAAA,KACI,CACL,IAAMiB,EAAOD,CAAAA,CAASA,CAAAA,CAAS,MAAA,CAAS,CAAC,CAAA,CACnCE,CAAAA,CAAKL,EAASI,CAAAA,CAAK,CAAA,CACnBE,CAAAA,CAAKL,CAAAA,CAASG,CAAAA,CAAK,CAAA,CACnBG,EAAW,IAAA,CAAK,IAAA,CAAKF,EAAKA,CAAAA,CAAKC,CAAAA,CAAKA,CAAE,CAAA,CAC5C,GAAIC,CAAAA,EAAYtB,CAAAA,CAAS,CACvB,IAAIuB,EAAY,IAAA,CAAK,KAAA,CAAMF,CAAAA,CAAID,CAAE,CAAA,CAAI,GAAA,CAAO,KAAK,EAAA,CAC7CG,CAAAA,CAAW,EAAA,CAAIA,CAAAA,EAAY,GAAA,CACtBA,CAAAA,CAAW,MAAKA,CAAAA,EAAY,GAAA,CAAA,CACrC,IAAMC,CAAAA,CAAgBvB,CAAAA,CAAuBsB,EAAW,CAAA,CAClDE,CAAAA,CAAQ,IAAA,CAAK,KAAA,CAAMH,CAAAA,CAAWtB,CAAO,EAC3C,IAAA,IAAS0B,CAAAA,CAAI,CAAA,CAAGA,CAAAA,EAAKD,CAAAA,CAAOC,CAAAA,EAAAA,CAAK,CAC/B,IAAMC,CAAAA,CAAK3B,CAAAA,CAAU0B,CAAAA,CAAKJ,CAAAA,CAC1BJ,CAAAA,CAAS,KAAK,CACZ,EAAA,CAAIN,EAAU,OAAA,EAAA,CACd,CAAA,CAAGO,EAAK,CAAA,CAAIC,CAAAA,CAAKO,CAAAA,CACjB,CAAA,CAAGR,CAAAA,CAAK,CAAA,CAAIE,EAAKM,CAAAA,CACjB,KAAA,CAAOH,CAAAA,CACP,GAAItB,CAAAA,EAAe,CACjB,QAAS,IAAA,CAAK,MAAA,EAAO,CAAI,EAAA,CAAK,CAAA,CAC9B,OAAA,CAAS,KAAK,MAAA,EAAO,CAAI,GAAK,CAAA,CAC9B,YAAA,CAAc,KAAK,MAAA,EAAO,CAAI,EAAA,CAAK,CACrC,CACF,CAAC,EACH,CACF,CACF,CACA,OAAIgB,CAAAA,CAAS,MAAA,CAASb,IACpBa,CAAAA,CAAWA,CAAAA,CAAS,KAAA,CAAMA,CAAAA,CAAS,MAAA,CAASb,CAAS,GAEhDa,CACT,CAAC,EACDP,CAAAA,CAAgB,OAAA,CAAU,KAAK,GAAA,GACjC,CAAA,CAEA,OAAAiB,eAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAYpB,CAAAA,CAAa,OAAA,CAC/B,GAAKoB,CAAAA,CACL,OAAAA,CAAAA,CAAU,gBAAA,CAAiB,WAAA,CAAahB,CAAe,CAAA,CAChD,IAAMgB,EAAU,mBAAA,CAAoB,WAAA,CAAahB,CAAe,CACzE,CAAA,CAAG,EAAE,CAAA,CAELe,eAAAA,CAAU,IAAM,CACd,IAAME,EAAW,WAAA,CAAY,IAAM,CAC7B,IAAA,CAAK,GAAA,EAAI,CAAInB,EAAgB,OAAA,CAAU,GAAA,EACzCJ,CAAAA,CAASU,CAAAA,EAASA,CAAAA,CAAK,MAAA,CAAS,EAAIA,CAAAA,CAAK,KAAA,CAAM,CAAC,CAAA,CAAIA,CAAK,EAE7D,CAAA,CAAGb,CAAe,CAAA,CAClB,OAAO,IAAM,aAAA,CAAc0B,CAAQ,CACrC,CAAA,CAAG,CAAC1B,CAAe,CAAC,CAAA,CAGlB2B,gBAAC,KAAA,CAAA,CAAI,GAAA,CAAKtB,CAAAA,CAAc,SAAA,CAAU,gFAAA,CAChC,QAAA,CAAA,CAAAuB,eAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8FAA8F,QAAA,CAAA,wBAAA,CAE7G,CAAA,CACAA,eAACC,4BAAAA,CAAA,CACE,QAAA,CAAA3B,CAAAA,CAAM,GAAA,CAAI4B,CAAAA,EACTF,eAACG,mBAAAA,CAAO,GAAA,CAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAA,CAAG,MAAA,CAAQD,CAAAA,CAAK,KAAM,CAAA,CACpD,QAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAA,CAAG,OAAQA,CAAAA,CAAK,KAAM,CAAA,CACpD,IAAA,CAAM,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAE,CAAA,CAC7B,UAAA,CAAY,CAAE,OAAA,CAAS,CAAE,QAAA,CAAU/B,CAAAA,CAAc,IAAA,CAAM,SAAA,CAAW,KAAA,CAAAJ,CAAM,CAAE,CAAA,CAC1E,SAAA,CAAU,wCACV,KAAA,CAAO,CAAE,KAAMmC,CAAAA,CAAK,CAAA,CAAG,GAAA,CAAKA,CAAAA,CAAK,CAAA,CAAG,SAAA,CAAW,uBAAwB,CAAA,CAEtE,QAAA,CAAApC,CAAAA,CAAAA,CARIoC,CAAAA,CAAK,EASZ,CACD,EACH,CAAA,CAAA,CACF,CAEJ,CAEA,IAAOE,CAAAA,CAAQvC","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":"0IA0BO,SAASA,CAAAA,CAAW,CACzB,IAAA,CAAAC,CAAAA,CAAO,eACP,KAAA,CAAAC,CAAAA,CAAQ,IACR,OAAA,CAAAC,CAAAA,CAAU,IACV,oBAAA,CAAAC,CAAAA,CAAuB,IAAA,CACvB,WAAA,CAAAC,CAAAA,CAAc,IAAA,CACd,aAAAC,CAAAA,CAAe,EAAA,CACf,eAAA,CAAAC,CAAAA,CAAkB,EAAA,CAClB,SAAA,CAAAC,EAAY,CACd,CAAA,CAAoB,CAClB,GAAM,CAACC,CAAAA,CAAOC,CAAQ,CAAA,CAAIC,QAAAA,CAAsB,EAAE,CAAA,CAC5CC,EAAeC,MAAAA,CAAuB,IAAI,CAAA,CAC1CC,CAAAA,CAAkBD,MAAAA,CAAe,IAAA,CAAK,KAAK,CAAA,CAC3CE,CAAAA,CAAYF,MAAAA,CAAe,CAAC,CAAA,CAE5BG,EAAmB,CAAA,EAAkB,CACzC,GAAI,CAACJ,CAAAA,CAAa,OAAA,CAAS,OAC3B,IAAMK,CAAAA,CAAOL,EAAa,OAAA,CAAQ,qBAAA,GAC5BM,CAAAA,CAAS,CAAA,CAAE,OAAA,CAAUD,CAAAA,CAAK,IAAA,CAC1BE,CAAAA,CAAS,EAAE,OAAA,CAAUF,CAAAA,CAAK,GAAA,CAEhCP,CAAAA,CAASU,CAAAA,EAAQ,CACf,IAAIC,CAAAA,CAAW,CAAC,GAAGD,CAAI,CAAA,CACvB,GAAIC,EAAS,MAAA,GAAW,CAAA,CACtBA,EAAS,IAAA,CAAK,CACZ,GAAIN,CAAAA,CAAU,OAAA,EAAA,CACd,CAAA,CAAGG,CAAAA,CACHC,CAAAA,CACA,KAAA,CAAO,EACP,GAAId,CAAAA,EAAe,CACjB,OAAA,CAAS,IAAA,CAAK,MAAA,GAAW,EAAA,CAAK,CAAA,CAC9B,OAAA,CAAS,IAAA,CAAK,MAAA,EAAO,CAAI,GAAK,CAAA,CAC9B,YAAA,CAAc,KAAK,MAAA,EAAO,CAAI,GAAK,CACrC,CACF,CAAC,CAAA,CAAA,KACI,CACL,IAAMiB,EAAOD,CAAAA,CAASA,CAAAA,CAAS,MAAA,CAAS,CAAC,CAAA,CACnCE,CAAAA,CAAKL,EAASI,CAAAA,CAAK,CAAA,CACnBE,CAAAA,CAAKL,CAAAA,CAASG,CAAAA,CAAK,CAAA,CACnBG,EAAW,IAAA,CAAK,IAAA,CAAKF,EAAKA,CAAAA,CAAKC,CAAAA,CAAKA,CAAE,CAAA,CAC5C,GAAIC,CAAAA,EAAYtB,CAAAA,CAAS,CACvB,IAAIuB,EAAY,IAAA,CAAK,KAAA,CAAMF,CAAAA,CAAID,CAAE,CAAA,CAAI,GAAA,CAAO,KAAK,EAAA,CAC7CG,CAAAA,CAAW,EAAA,CAAIA,CAAAA,EAAY,GAAA,CACtBA,CAAAA,CAAW,MAAKA,CAAAA,EAAY,GAAA,CAAA,CACrC,IAAMC,CAAAA,CAAgBvB,CAAAA,CAAuBsB,EAAW,CAAA,CAClDE,CAAAA,CAAQ,IAAA,CAAK,KAAA,CAAMH,CAAAA,CAAWtB,CAAO,EAC3C,IAAA,IAAS0B,CAAAA,CAAI,CAAA,CAAGA,CAAAA,EAAKD,CAAAA,CAAOC,CAAAA,EAAAA,CAAK,CAC/B,IAAMC,CAAAA,CAAK3B,CAAAA,CAAU0B,CAAAA,CAAKJ,CAAAA,CAC1BJ,CAAAA,CAAS,KAAK,CACZ,EAAA,CAAIN,EAAU,OAAA,EAAA,CACd,CAAA,CAAGO,EAAK,CAAA,CAAIC,CAAAA,CAAKO,CAAAA,CACjB,CAAA,CAAGR,CAAAA,CAAK,CAAA,CAAIE,EAAKM,CAAAA,CACjB,KAAA,CAAOH,CAAAA,CACP,GAAItB,CAAAA,EAAe,CACjB,QAAS,IAAA,CAAK,MAAA,EAAO,CAAI,EAAA,CAAK,CAAA,CAC9B,OAAA,CAAS,KAAK,MAAA,EAAO,CAAI,GAAK,CAAA,CAC9B,YAAA,CAAc,KAAK,MAAA,EAAO,CAAI,EAAA,CAAK,CACrC,CACF,CAAC,EACH,CACF,CACF,CACA,OAAIgB,CAAAA,CAAS,MAAA,CAASb,IACpBa,CAAAA,CAAWA,CAAAA,CAAS,KAAA,CAAMA,CAAAA,CAAS,MAAA,CAASb,CAAS,GAEhDa,CACT,CAAC,EACDP,CAAAA,CAAgB,OAAA,CAAU,KAAK,GAAA,GACjC,CAAA,CAEA,OAAAiB,SAAAA,CAAU,IAAM,CACd,IAAMC,CAAAA,CAAYpB,CAAAA,CAAa,OAAA,CAC/B,GAAKoB,CAAAA,CACL,OAAAA,CAAAA,CAAU,gBAAA,CAAiB,WAAA,CAAahB,CAAe,CAAA,CAChD,IAAMgB,EAAU,mBAAA,CAAoB,WAAA,CAAahB,CAAe,CACzE,CAAA,CAAG,EAAE,CAAA,CAELe,SAAAA,CAAU,IAAM,CACd,IAAME,EAAW,WAAA,CAAY,IAAM,CAC7B,IAAA,CAAK,GAAA,EAAI,CAAInB,EAAgB,OAAA,CAAU,GAAA,EACzCJ,CAAAA,CAASU,CAAAA,EAASA,CAAAA,CAAK,MAAA,CAAS,EAAIA,CAAAA,CAAK,KAAA,CAAM,CAAC,CAAA,CAAIA,CAAK,EAE7D,CAAA,CAAGb,CAAe,CAAA,CAClB,OAAO,IAAM,aAAA,CAAc0B,CAAQ,CACrC,CAAA,CAAG,CAAC1B,CAAe,CAAC,CAAA,CAGlB2B,KAAC,KAAA,CAAA,CAAI,GAAA,CAAKtB,CAAAA,CAAc,SAAA,CAAU,gFAAA,CAChC,QAAA,CAAA,CAAAuB,IAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8FAA8F,QAAA,CAAA,wBAAA,CAE7G,CAAA,CACAA,IAACC,eAAAA,CAAA,CACE,QAAA,CAAA3B,CAAAA,CAAM,GAAA,CAAI4B,CAAAA,EACTF,IAACG,MAAAA,CAAO,GAAA,CAAP,CAEC,OAAA,CAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAA,CAAG,MAAA,CAAQD,CAAAA,CAAK,KAAM,CAAA,CACpD,QAAS,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAA,CAAG,OAAQA,CAAAA,CAAK,KAAM,CAAA,CACpD,IAAA,CAAM,CAAE,OAAA,CAAS,EAAG,KAAA,CAAO,CAAE,CAAA,CAC7B,UAAA,CAAY,CAAE,OAAA,CAAS,CAAE,QAAA,CAAU/B,CAAAA,CAAc,IAAA,CAAM,SAAA,CAAW,KAAA,CAAAJ,CAAM,CAAE,CAAA,CAC1E,SAAA,CAAU,wCACV,KAAA,CAAO,CAAE,KAAMmC,CAAAA,CAAK,CAAA,CAAG,GAAA,CAAKA,CAAAA,CAAK,CAAA,CAAG,SAAA,CAAW,uBAAwB,CAAA,CAEtE,QAAA,CAAApC,CAAAA,CAAAA,CARIoC,CAAAA,CAAK,EASZ,CACD,EACH,CAAA,CAAA,CACF,CAEJ,CAEA,IAAOE,CAAAA,CAAQvC","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 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.6.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",
|
|
@@ -100,6 +100,12 @@
|
|
|
100
100
|
"./input-otp": { "import": "./dist/input-otp/index.mjs", "require": "./dist/input-otp/index.js", "types": "./dist/input-otp/index.d.ts" },
|
|
101
101
|
"./hamburger-basic": { "import": "./dist/hamburger-basic/index.mjs", "require": "./dist/hamburger-basic/index.js", "types": "./dist/hamburger-basic/index.d.ts" },
|
|
102
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" },
|
|
103
109
|
"./click-spark": { "import": "./dist/click-spark/index.mjs", "require": "./dist/click-spark/index.js", "types": "./dist/click-spark/index.d.ts" },
|
|
104
110
|
"./smooth-cursor": { "import": "./dist/smooth-cursor/index.mjs", "require": "./dist/smooth-cursor/index.js", "types": "./dist/smooth-cursor/index.d.ts" },
|
|
105
111
|
"./float-effect": { "import": "./dist/float-effect/index.mjs", "require": "./dist/float-effect/index.js", "types": "./dist/float-effect/index.d.ts" },
|
|
@@ -111,6 +117,27 @@
|
|
|
111
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" },
|
|
112
118
|
"./ascii-text": { "import": "./dist/ascii-text/index.mjs", "require": "./dist/ascii-text/index.js", "types": "./dist/ascii-text/index.d.ts" },
|
|
113
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" },
|
|
131
|
+
"./flowing-menu": { "import": "./dist/flowing-menu/index.mjs", "require": "./dist/flowing-menu/index.js", "types": "./dist/flowing-menu/index.d.ts" },
|
|
132
|
+
"./gooey-nav": { "import": "./dist/gooey-nav/index.mjs", "require": "./dist/gooey-nav/index.js", "types": "./dist/gooey-nav/index.d.ts" },
|
|
133
|
+
"./pill-nav": { "import": "./dist/pill-nav/index.mjs", "require": "./dist/pill-nav/index.js", "types": "./dist/pill-nav/index.d.ts" },
|
|
134
|
+
"./smooth-drawer": { "import": "./dist/smooth-drawer/index.mjs", "require": "./dist/smooth-drawer/index.js", "types": "./dist/smooth-drawer/index.d.ts" },
|
|
135
|
+
"./smooth-tab": { "import": "./dist/smooth-tab/index.mjs", "require": "./dist/smooth-tab/index.js", "types": "./dist/smooth-tab/index.d.ts" },
|
|
136
|
+
"./decay-card": { "import": "./dist/decay-card/index.mjs", "require": "./dist/decay-card/index.js", "types": "./dist/decay-card/index.d.ts" },
|
|
137
|
+
"./liquid-glass-card": { "import": "./dist/liquid-glass-card/index.mjs", "require": "./dist/liquid-glass-card/index.js", "types": "./dist/liquid-glass-card/index.d.ts" },
|
|
138
|
+
"./target-cursor": { "import": "./dist/target-cursor/index.mjs", "require": "./dist/target-cursor/index.js", "types": "./dist/target-cursor/index.d.ts" },
|
|
139
|
+
"./crosshair": { "import": "./dist/crosshair/index.mjs", "require": "./dist/crosshair/index.js", "types": "./dist/crosshair/index.d.ts" },
|
|
140
|
+
"./scroll-text": { "import": "./dist/scroll-text/index.mjs", "require": "./dist/scroll-text/index.js", "types": "./dist/scroll-text/index.d.ts" },
|
|
114
141
|
"./styles.css": "./dist/styles.css"
|
|
115
142
|
},
|
|
116
143
|
"files": ["dist", "README.md"],
|