apex-ui-kit 2.12.0 → 2.12.1

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.
Files changed (2) hide show
  1. package/dist/ApexUI-Kit/templates/BeamBar/BeamBar.jsx +97 -102
  2. package/package.json +1 -1
package/dist/ApexUI-Kit/templates/BeamBar/BeamBar.jsx CHANGED
@@ -1,103 +1,98 @@
1
- /* eslint-disable no-unused-vars */
2
- import React, { useEffect, useState } from 'react';
3
- import { motion, useAnimation } from 'framer-motion';
4
-
5
- const BeamBar = ({
6
- fromColor = "#a855f7",
7
- viaColor = "#38bdf8",
8
- toColor = "#06b6d4",
9
- barWidth: maxBarWidth = 320, // Prop ko maxBarWidth ki tarah use karenge
10
- barHeight = 8,
11
- duration = 1.2,
12
- pulseDuration = 2.5
13
- }) => {
14
- const controls = useAnimation();
15
- const [pulse, setPulse] = useState(false);
16
- const [beamOpacity, setBeamOpacity] = useState(0.1);
17
-
18
- // Responsive width ke liye state
19
- const [dynamicBarWidth, setDynamicBarWidth] = useState(0);
20
-
21
- // Screen size change ko handle karne ke liye useEffect
22
- useEffect(() => {
23
- const updateWidth = () => {
24
- // Screen width ka 80% ya maxBarWidth, jo bhi kam ho
25
- const newWidth = Math.min(window.innerWidth * 0.8, maxBarWidth);
26
- setDynamicBarWidth(newWidth);
27
- };
28
-
29
- updateWidth(); // Pehli baar set karne ke liye
30
- window.addEventListener('resize', updateWidth); // Resize par update karne ke liye
31
-
32
- // Cleanup function
33
- return () => window.removeEventListener('resize', updateWidth);
34
- }, [maxBarWidth]);
35
-
36
- useEffect(() => {
37
- // Jab dynamicBarWidth set ho jaye tab animation start karein
38
- if (dynamicBarWidth > 0) {
39
- controls.start({
40
- width: dynamicBarWidth,
41
- transition: { duration, ease: "easeInOut" }
42
- });
43
-
44
- // Animate beam opacity gradually during width expansion
45
- let start = null;
46
- let frame = 0;
47
- function animateBeam(ts) {
48
- if (!start) start = ts;
49
- const elapsed = (ts - start) / 1000;
50
- const progress = Math.min(elapsed / duration, 1);
51
- setBeamOpacity(0.2 + 0.8 * progress); // from 0.2 to 1.0
52
- if (progress < 1) {
53
- frame = requestAnimationFrame(animateBeam);
54
- } else {
55
- setPulse(true);
56
- }
57
- }
58
- frame = requestAnimationFrame(animateBeam);
59
-
60
- // Cleanup (stop the running loop so a resize or unmount doesn't leave it going)
61
- return () => {
62
- cancelAnimationFrame(frame);
63
- setBeamOpacity(0.2);
64
- setPulse(false);
65
- };
66
- }
67
- }, [dynamicBarWidth, duration, controls]);
68
-
69
- // Beam ka size ab bar ki width par depend karega
70
- const beamWidth = dynamicBarWidth * 1.25;
71
- const beamHeight = 800; // Ise bhi dynamic kar sakte hain agar zaroorat ho
72
-
73
- return (
74
- <div className="fixed top-10 left-0 w-full flex justify-center z-50 pointer-events-none">
75
- <motion.div
76
- initial={{ width: 0 }}
77
- animate={controls}
78
- // Class se 'hidden md:block' hataya gaya hai
79
- className={`absolute top-0 left-1/2 -translate-x-1/2 rounded-md shadow-[0_0_10px_#fff,0_0_20px_#4f46e5,0_0_30px_#06b6d4] ${pulse ? 'animate-pulse' : ''}`}
80
- style={{
81
- height: barHeight,
82
- background: `linear-gradient(to right, ${fromColor}, ${viaColor}, ${toColor})`,
83
- animationDuration: pulse ? `${pulseDuration}s` : undefined,
84
- }}
85
- >
86
- {/* Beam from Bar using pseudo-element */}
87
- <div
88
- className="absolute top-2 left-1/2 transform -translate-x-1/2 pointer-events-none z-0"
89
- style={{
90
- width: `${beamWidth}px`, // Dynamic width
91
- height: `${beamHeight}px`, // Dynamic height (optional)
92
- background: `linear-gradient(to bottom, rgba(111, 93, 245, 0.7), rgba(7, 7, 7, 0.3), transparent)`,
93
- filter: "blur(100px)",
94
- opacity: beamOpacity,
95
- animation: pulse ? `glow ${pulseDuration}s infinite alternate` : undefined
96
- }}
97
- ></div>
98
- </motion.div>
99
- </div>
100
- );
101
- };
102
-
1
+ /* eslint-disable no-unused-vars */
2
+ import React, { useEffect, useRef, useState } from 'react';
3
+ import { motion, useAnimation } from 'framer-motion';
4
+
5
+ const BeamBar = ({
6
+ fromColor = "#a855f7",
7
+ viaColor = "#38bdf8",
8
+ toColor = "#06b6d4",
9
+ barWidth: maxBarWidth = 320, // Prop ko maxBarWidth ki tarah use karenge
10
+ barHeight = 8,
11
+ duration = 1.2,
12
+ pulseDuration = 2.5
13
+ }) => {
14
+ const controls = useAnimation();
15
+ const [pulse, setPulse] = useState(false);
16
+ const [beamOpacity, setBeamOpacity] = useState(0.1);
17
+
18
+ // Responsive width ke liye state
19
+ const [dynamicBarWidth, setDynamicBarWidth] = useState(0);
20
+
21
+ // 80% of the space it sits in (not the screen) or maxBarWidth, whichever is smaller,
22
+ // so it also fits sidebars, preview frames and narrow columns.
23
+ const wrap = useRef(null);
24
+ useEffect(() => {
25
+ const el = wrap.current;
26
+ if (!el) return undefined;
27
+ const ro = new ResizeObserver(() => setDynamicBarWidth(Math.min(el.clientWidth * 0.8, maxBarWidth)));
28
+ ro.observe(el);
29
+ return () => ro.disconnect();
30
+ }, [maxBarWidth]);
31
+
32
+ useEffect(() => {
33
+ // Jab dynamicBarWidth set ho jaye tab animation start karein
34
+ if (dynamicBarWidth > 0) {
35
+ controls.start({
36
+ width: dynamicBarWidth,
37
+ transition: { duration, ease: "easeInOut" }
38
+ });
39
+
40
+ // Animate beam opacity gradually during width expansion
41
+ let start = null;
42
+ let frame = 0;
43
+ function animateBeam(ts) {
44
+ if (!start) start = ts;
45
+ const elapsed = (ts - start) / 1000;
46
+ const progress = Math.min(elapsed / duration, 1);
47
+ setBeamOpacity(0.2 + 0.8 * progress); // from 0.2 to 1.0
48
+ if (progress < 1) {
49
+ frame = requestAnimationFrame(animateBeam);
50
+ } else {
51
+ setPulse(true);
52
+ }
53
+ }
54
+ frame = requestAnimationFrame(animateBeam);
55
+
56
+ // Cleanup (stop the running loop so a resize or unmount doesn't leave it going)
57
+ return () => {
58
+ cancelAnimationFrame(frame);
59
+ setBeamOpacity(0.2);
60
+ setPulse(false);
61
+ };
62
+ }
63
+ }, [dynamicBarWidth, duration, controls]);
64
+
65
+ // Beam ka size ab bar ki width par depend karega
66
+ const beamWidth = dynamicBarWidth * 1.25;
67
+ const beamHeight = 800; // Ise bhi dynamic kar sakte hain agar zaroorat ho
68
+
69
+ return (
70
+ <div ref={wrap} className="fixed top-10 left-0 w-full flex justify-center z-50 pointer-events-none">
71
+ <motion.div
72
+ initial={{ width: 0 }}
73
+ animate={controls}
74
+ className={`absolute top-0 left-1/2 -translate-x-1/2 rounded-md shadow-[0_0_10px_#fff,0_0_20px_#4f46e5,0_0_30px_#06b6d4] ${pulse ? 'animate-pulse' : ''}`}
75
+ style={{
76
+ height: barHeight,
77
+ background: `linear-gradient(to right, ${fromColor}, ${viaColor}, ${toColor})`,
78
+ animationDuration: pulse ? `${pulseDuration}s` : undefined,
79
+ }}
80
+ >
81
+ {/* Beam from Bar using pseudo-element */}
82
+ <div
83
+ className="absolute top-2 left-1/2 transform -translate-x-1/2 pointer-events-none z-0"
84
+ style={{
85
+ width: `${beamWidth}px`, // Dynamic width
86
+ height: `${beamHeight}px`, // Dynamic height (optional)
87
+ background: `linear-gradient(to bottom, rgba(111, 93, 245, 0.7), rgba(7, 7, 7, 0.3), transparent)`,
88
+ filter: "blur(100px)",
89
+ opacity: beamOpacity,
90
+ animation: pulse ? `glow ${pulseDuration}s infinite alternate` : undefined
91
+ }}
92
+ ></div>
93
+ </motion.div>
94
+ </div>
95
+ );
96
+ };
97
+
103
98
  export default BeamBar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "apex-ui-kit",
3
- "version": "2.12.0",
3
+ "version": "2.12.1",
4
4
  "license": "MIT",
5
5
  "description": "117 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
6
6
  "homepage": "https://apex-ui.in",