@sudarshanaui/ui 1.0.2 → 2.0.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.
Files changed (18) hide show
  1. package/package.json +2 -2
  2. package/src/AdminchoiceCreativeGridMenu.jsx +15 -15
  3. package/src/AdminchoiceGlitchTitle.jsx +10 -10
  4. package/src/AdminchoiceInteractiveToggle.jsx +15 -15
  5. package/src/AdminchoiceKineticMarqueeButton.jsx +20 -20
  6. package/src/AdminchoiceLiquidMorphLoader.jsx +12 -12
  7. package/src/AdminchoiceMagneticAttractionButton.jsx +14 -14
  8. package/src/AdminchoiceNoiseGlassCard.jsx +16 -16
  9. package/src/AdminchoiceParallaxImageLink.jsx +11 -11
  10. package/src/AdminchoiceRevealMaskText.jsx +8 -8
  11. package/src/AdminchoiceSpotlightInput.jsx +13 -13
  12. package/src/AnimatedCard.jsx +9 -9
  13. package/src/AnimatedFooter.jsx +15 -15
  14. package/src/AnimatedOtp.jsx +6 -6
  15. package/src/AnimatedTextfield.jsx +9 -9
  16. package/src/FancyButton.jsx +5 -5
  17. package/src/NormalFooter.jsx +11 -11
  18. package/src/NormalOtp.jsx +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sudarshanaui/ui",
3
- "version": "1.0.2",
3
+ "version": "2.0.0",
4
4
  "description": "A collection of modern, animated React components.",
5
5
  "main": "index.js",
6
6
  "publishConfig": {
@@ -23,4 +23,4 @@
23
23
  "react": ">=18.0.0",
24
24
  "react-dom": ">=18.0.0"
25
25
  }
26
- }
26
+ }
package/src/AdminchoiceCreativeGridMenu.jsx CHANGED
@@ -6,31 +6,31 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .brut-nav { display: flex; flex-direction: column; border: 1px solid #fff; width: 220px; background: #000; }
10
- .brut-link { display: flex; justify-content: space-between; padding: 24px; color: #fff; text-decoration: none; font-family: arial, sans-serif; font-weight: bold; border-bottom: 1px solid #fff; position: relative; overflow: hidden; transition: color 0.3s, padding 0.3s; }
11
- .brut-link:last-child { border-bottom: none; }
12
- .brut-link::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: translateX(-101%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; }
13
- .brut-link:hover { color: #000; padding-left: 34px; }
14
- .brut-link:hover::before { transform: translateX(0); }
15
- .brut-link:active { opacity: 0.8; }
16
- .brut-link span { font-family: monospace; opacity: 0.5; transition: opacity 0.3s; }
17
- .brut-link:hover span { opacity: 1; }
9
+ .sd-brut-nav { display: flex; flex-direction: column; border: 1px solid #fff; width: 220px; background: #000; }
10
+ .sd-brut-link { display: flex; justify-content: space-between; padding: 24px; color: #fff; text-decoration: none; font-family: arial, sans-serif; font-weight: bold; border-bottom: 1px solid #fff; position: relative; overflow: hidden; transition: color 0.3s, padding 0.3s; }
11
+ .sd-brut-link:last-child { border-bottom: none; }
12
+ .sd-brut-link::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: translateX(-101%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; }
13
+ .sd-brut-link:hover { color: #000; padding-left: 34px; }
14
+ .sd-brut-link:hover::before { transform: translateX(0); }
15
+ .sd-brut-link:active { opacity: 0.8; }
16
+ .sd-brut-link span { font-family: monospace; opacity: 0.5; transition: opacity 0.3s; }
17
+ .sd-brut-link:hover span { opacity: 1; }
18
18
 
19
19
  `;
20
20
 
21
21
  export const AdminchoiceCreativeGridMenu = (props) => {
22
22
  let html = `
23
- <nav class="brut-nav">
24
- <a href="#" class="brut-link"><span>01</span> WORK</a>
25
- <a href="#" class="brut-link"><span>02</span> STUDIO</a>
26
- <a href="#" class="brut-link"><span>03</span> CONTACT</a>
23
+ <nav class="sd-brut-nav">
24
+ <a href="#" class="sd-brut-link"><span>01</span> WORK</a>
25
+ <a href="#" class="sd-brut-link"><span>02</span> STUDIO</a>
26
+ <a href="#" class="sd-brut-link"><span>03</span> CONTACT</a>
27
27
  </nav>
28
28
  `;
29
29
 
30
30
  // Inject props
31
-
32
31
 
33
- return (
32
+
33
+ return (
34
34
  <div {...props} className="sudarshana-component-AdminchoiceCreativeGridMenu">
35
35
  <style>{styles}</style>
36
36
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceGlitchTitle.jsx CHANGED
@@ -6,13 +6,13 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .rgb-text { font-family: monospace; font-weight: bold; font-size: 48px; color: #fff; position: relative; mix-blend-mode: lighten; cursor: help; transition: transform 0.2s; }
10
- .rgb-text:hover { transform: scale(1.05) skewX(-2deg); }
11
- .rgb-text::before, .rgb-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; transition: animation-duration 0.2s; }
12
- .rgb-text:hover::before { animation-duration: 0.1s; }
13
- .rgb-text:hover::after { animation-duration: 0.1s; }
14
- .rgb-text::before { color: #ff0000; z-index: -1; animation: rgb-1 8s infinite; }
15
- .rgb-text::after { color: #0000ff; z-index: -2; animation: rgb-2 8s infinite; }
9
+ .sd-rgb-text { font-family: monospace; font-weight: bold; font-size: 48px; color: #fff; position: relative; mix-blend-mode: lighten; cursor: help; transition: transform 0.2s; }
10
+ .sd-rgb-text:hover { transform: scale(1.05) skewX(-2deg); }
11
+ .sd-rgb-text::before, .sd-rgb-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; transition: animation-duration 0.2s; }
12
+ .sd-rgb-text:hover::before { animation-duration: 0.1s; }
13
+ .sd-rgb-text:hover::after { animation-duration: 0.1s; }
14
+ .sd-rgb-text::before { color: #ff0000; z-index: -1; animation: rgb-1 8s infinite; }
15
+ .sd-rgb-text::after { color: #0000ff; z-index: -2; animation: rgb-2 8s infinite; }
16
16
  @keyframes rgb-1 { 0%,100%: [object Object]; 20%: [object Object]; 40%: [object Object]; 60%: [object Object]; 80%: [object Object]; }
17
17
  @keyframes rgb-2 { 0%,100%: [object Object]; 25%: [object Object]; 50%: [object Object]; 75%: [object Object]; }
18
18
 
@@ -20,13 +20,13 @@ const styles = `
20
20
 
21
21
  export const AdminchoiceGlitchTitle = (props) => {
22
22
  let html = `
23
- <h1 class="rgb-text" data-text="SYSTEM_FAILURE">SYSTEM_FAILURE</h1>
23
+ <h1 class="sd-rgb-text" data-text="SYSTEM_FAILURE">SYSTEM_FAILURE</h1>
24
24
  `;
25
25
 
26
26
  // Inject props
27
-
28
27
 
29
- return (
28
+
29
+ return (
30
30
  <div {...props} className="sudarshana-component-AdminchoiceGlitchTitle">
31
31
  <style>{styles}</style>
32
32
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceInteractiveToggle.jsx CHANGED
@@ -6,33 +6,33 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .pill-toggle { position: fixed; width: 80px; height: 36px; cursor: pointer; }
10
- .pill-toggle input { display: none; }
11
- .pill-track { width: 100%; height: 100%; background: #222; border-radius: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; box-sizing: border-box; font-family: sans-serif; font-size: 10px; font-weight: bold; color: #555; transition: background 0.3s; }
12
- .pill-toggle:hover .pill-track { background: #333; }
13
- .pill-thumb { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: #fff; border-radius: 50%; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
14
- .pill-toggle:active .pill-thumb { width: 36px; }
15
- input:checked ~ .pill-thumb { transform: translateX(44px); background: #00ff88; }
16
- input:checked ~ .pill-track .label-on { color: #fff; }
9
+ .sd-pill-toggle { position: fixed; width: 80px; height: 36px; cursor: pointer; }
10
+ .sd-pill-toggle input { display: none; }
11
+ .sd-pill-track { width: 100%; height: 100%; background: #222; border-radius: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; box-sizing: border-box; font-family: sans-serif; font-size: 10px; font-weight: bold; color: #555; transition: background 0.3s; }
12
+ .sd-pill-toggle:hover .sd-pill-track { background: #333; }
13
+ .sd-pill-thumb { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: #fff; border-radius: 50%; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
14
+ .sd-pill-toggle:active .sd-pill-thumb { width: 36px; }
15
+ .sd-pill-toggle input:checked ~ .sd-pill-thumb { transform: translateX(44px); background: #00ff88; }
16
+ .sd-pill-toggle input:checked ~ .sd-pill-track .sd-label-on { color: #fff; }
17
17
 
18
18
  `;
19
19
 
20
20
  export const AdminchoiceInteractiveToggle = (props) => {
21
21
  let html = `
22
- <label class="pill-toggle">
22
+ <label class="sd-pill-toggle">
23
23
  <input type="checkbox">
24
- <div class="pill-track">
25
- <span class="label-off">OFF</span>
26
- <span class="label-on">ON</span>
24
+ <div class="sd-pill-track">
25
+ <span class="sd-label-off">OFF</span>
26
+ <span class="sd-label-on">ON</span>
27
27
  </div>
28
- <div class="pill-thumb"></div>
28
+ <div class="sd-pill-thumb"></div>
29
29
  </label>
30
30
  `;
31
31
 
32
32
  // Inject props
33
-
34
33
 
35
- return (
34
+
35
+ return (
36
36
  <div {...props} className="sudarshana-component-AdminchoiceInteractiveToggle">
37
37
  <style>{styles}</style>
38
38
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceKineticMarqueeButton.jsx CHANGED
@@ -6,40 +6,40 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .kinetic-mag-btn { position: relative; width: 240px; height: 64px; background: #111; border: none; border-radius: 32px; overflow: hidden; cursor: pointer; color: #fff; font-family: sans-serif; font-weight: 800; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.3s; }
10
- .kinetic-mag-btn:hover { transform: scale(1.05) rotate(-1deg); background: #222; }
11
- .kinetic-mag-btn:active { transform: scale(0.95) rotate(0deg); transition: transform 0.1s; }
12
- .marquee-wrap { display: flex; width: 100%; height: 100%; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
13
- .marquee-track { display: flex; align-items: center; white-space: nowrap; animation: k-scroll 6s linear infinite; transition: animation-duration 0.3s; }
14
- .kinetic-mag-btn:hover .marquee-track { animation-duration: 3s; }
15
- .marquee-track span { padding-left: 20px; font-size: 16px; }
16
- .icon { width: 20px; height: 20px; margin-left: 10px; margin-right: 10px; }
9
+ .sd-kinetic-mag-btn { position: relative; width: 240px; height: 64px; background: #111; border: none; border-radius: 32px; overflow: hidden; cursor: pointer; color: #fff; font-family: sans-serif; font-weight: 800; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.3s; }
10
+ .sd-kinetic-mag-btn:hover { transform: scale(1.05) rotate(-1deg); background: #222; }
11
+ .sd-kinetic-mag-btn:active { transform: scale(0.95) rotate(0deg); transition: transform 0.1s; }
12
+ .sd-marquee-wrap { display: flex; width: 100%; height: 100%; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
13
+ .sd-marquee-track { display: flex; align-items: center; white-space: nowrap; animation: k-scroll 6s linear infinite; transition: animation-duration 0.3s; }
14
+ .sd-kinetic-mag-btn:hover .sd-marquee-track { animation-duration: 3s; }
15
+ .sd-marquee-track span { padding-left: 20px; font-size: 16px; }
16
+ .sd-icon { width: 20px; height: 20px; margin-left: 10px; margin-right: 10px; }
17
17
  @keyframes k-scroll { 0%: [object Object]; 100%: [object Object]; }
18
18
 
19
19
  `;
20
20
 
21
21
  export const AdminchoiceKineticMarqueeButton = (props) => {
22
22
  let html = `
23
- <button class="kinetic-mag-btn">
24
- <div class="marquee-wrap">
25
- <div class="marquee-track">
26
- <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
27
- <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
28
- <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
23
+ <button class="sd-kinetic-mag-btn">
24
+ <div class="sd-marquee-wrap">
25
+ <div class="sd-marquee-track">
26
+ <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
27
+ <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
28
+ <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
29
29
  </div>
30
- <div class="marquee-track">
31
- <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
32
- <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
33
- <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
30
+ <div class="sd-marquee-track">
31
+ <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
32
+ <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
33
+ <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
34
34
  </div>
35
35
  </div>
36
36
  </button>
37
37
  `;
38
38
 
39
39
  // Inject props
40
-
41
40
 
42
- return (
41
+
42
+ return (
43
43
  <div {...props} className="sudarshana-component-AdminchoiceKineticMarqueeButton">
44
44
  <style>{styles}</style>
45
45
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceLiquidMorphLoader.jsx CHANGED
@@ -6,12 +6,12 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .gooey-wrap { width: 100px; height: 100px; position: relative; filter: url(#goo-sharp); cursor: wait; transition: transform 0.3s; }
10
- .gooey-wrap:hover { transform: scale(1.1); }
11
- .blobs { width: 100%; height: 100%; animation: rotate-g 4s linear infinite; }
12
- .blob-main { position: absolute; top: 35px; left: 35px; width: 30px; height: 30px; background: #fff; border-radius: 50%; transition: background 0.3s; }
13
- .blob-orbit { position: absolute; top: 10px; left: 40px; width: 20px; height: 20px; background: #fff; border-radius: 50%; animation: orbit-g 2s ease-in-out infinite alternate; transition: background 0.3s; }
14
- .gooey-wrap:active .blob-main, .gooey-wrap:active .blob-orbit { background: #00ff88; }
9
+ .sd-gooey-wrap { width: 100px; height: 100px; position: relative; filter: url(#goo-sharp); cursor: wait; transition: transform 0.3s; }
10
+ .sd-gooey-wrap:hover { transform: scale(1.1); }
11
+ .sd-blobs { width: 100%; height: 100%; animation: rotate-g 4s linear infinite; }
12
+ .sd-blob-main { position: absolute; top: 35px; left: 35px; width: 30px; height: 30px; background: #fff; border-radius: 50%; transition: background 0.3s; }
13
+ .sd-blob-orbit { position: absolute; top: 10px; left: 40px; width: 20px; height: 20px; background: #fff; border-radius: 50%; animation: orbit-g 2s ease-in-out infinite alternate; transition: background 0.3s; }
14
+ .sd-gooey-wrap:active .sd-blob-main, .sd-gooey-wrap:active .sd-blob-orbit { background: #00ff88; }
15
15
  @keyframes rotate-g { to: [object Object]; }
16
16
  @keyframes orbit-g { 0%: [object Object]; 100%: [object Object]; }
17
17
 
@@ -19,19 +19,19 @@ const styles = `
19
19
 
20
20
  export const AdminchoiceLiquidMorphLoader = (props) => {
21
21
  let html = `
22
- <div class="gooey-wrap">
22
+ <div class="sd-gooey-wrap">
23
23
  <svg style="width:0;height:0;position:absolute;"><filter id="goo-sharp"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/><feColorMatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="goo"/><feComposite in="SourceGraphic" in2="goo" operator="atop"/></filter></svg>
24
- <div class="blobs">
25
- <div class="blob-main"></div>
26
- <div class="blob-orbit"></div>
24
+ <div class="sd-blobs">
25
+ <div class="sd-blob-main"></div>
26
+ <div class="sd-blob-orbit"></div>
27
27
  </div>
28
28
  </div>
29
29
  `;
30
30
 
31
31
  // Inject props
32
-
33
32
 
34
- return (
33
+
34
+ return (
35
35
  <div {...props} className="sudarshana-component-AdminchoiceLiquidMorphLoader">
36
36
  <style>{styles}</style>
37
37
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceMagneticAttractionButton.jsx CHANGED
@@ -6,31 +6,31 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .magnet-core { position: relative; padding: 25px 50px; background: black; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; color: #fff; font-family: sans-serif; font-weight: 600; cursor: pointer; overflow: hidden; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
10
- .magnet-field { position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1), height 0.6s cubic-bezier(0.19, 1, 0.22, 1); z-index: -1; }
11
- .magnet-core:hover .magnet-field { width: 350px; height: 350px; }
12
- .magnet-core:hover { color: #000; border-color: transparent; transform: scale(1.05); }
13
- .magnet-core:active { transform: scale(0.95); }
14
- .magnet-ripple { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 100px; transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; }
15
- .magnet-core:active .magnet-ripple { animation: mag-ping 0.6s cubic-bezier(0, 0, 0.2, 1); }
16
- .magnet-text { position: relative; z-index: 2; }
9
+ .sd-magnet-core { position: relative; padding: 25px 50px; background: black; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; color: #fff; font-family: sans-serif; font-weight: 600; cursor: pointer; overflow: hidden; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
10
+ .sd-magnet-field { position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1), height 0.6s cubic-bezier(0.19, 1, 0.22, 1); z-index: -1; }
11
+ .sd-magnet-core:hover .sd-magnet-field { width: 350px; height: 350px; }
12
+ .sd-magnet-core:hover { color: #000; border-color: transparent; transform: scale(1.05); }
13
+ .sd-magnet-core:active { transform: scale(0.95); }
14
+ .sd-magnet-ripple { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 100px; transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; }
15
+ .sd-magnet-core:active .sd-magnet-ripple { animation: mag-ping 0.6s cubic-bezier(0, 0, 0.2, 1); }
16
+ .sd-magnet-text { position: relative; z-index: 2; }
17
17
  @keyframes mag-ping { 75%, 100%: [object Object]; 0%: [object Object]; }
18
18
 
19
19
  `;
20
20
 
21
21
  export const AdminchoiceMagneticAttractionButton = (props) => {
22
22
  let html = `
23
- <button class="magnet-core">
24
- <span class="magnet-text">MAGNETIC</span>
25
- <div class="magnet-field"></div>
26
- <div class="magnet-ripple"></div>
23
+ <button class="sd-magnet-core">
24
+ <span class="sd-magnet-text">MAGNETIC</span>
25
+ <div class="sd-magnet-field"></div>
26
+ <div class="sd-magnet-ripple"></div>
27
27
  </button>
28
28
  `;
29
29
 
30
30
  // Inject props
31
-
32
31
 
33
- return (
32
+
33
+ return (
34
34
  <div {...props} className="sudarshana-component-AdminchoiceMagneticAttractionButton">
35
35
  <style>{styles}</style>
36
36
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceNoiseGlassCard.jsx CHANGED
@@ -6,25 +6,25 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .grain-card { width: 280px; height: 380px; position: relative; background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; overflow: hidden; cursor: pointer; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s, box-shadow 0.6s; }
10
- .grain-bg { position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; transition: opacity 0.6s; }
11
- .grain-content { position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 2; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
12
- .grain-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-15px) scale(1.02) rotateX(2deg); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
13
- .grain-card:hover .grain-bg { opacity: 0.6; }
14
- .grain-card:hover .grain-content { transform: translateY(-10px); }
15
- .grain-card:active { transform: translateY(-5px) scale(0.98); box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.1s; }
16
- .badge { align-self: flex-start; padding: 6px 12px; background: #fff; color: #000; border-radius: 100px; font-size: 10px; font-weight: bold; margin-bottom: auto; }
17
- .grain-content h3 { font-family: arial, sans-serif; font-weight: 900; font-size: 36px; margin: 0 0 10px 0; letter-spacing: -1px; }
18
- .grain-content p { font-family: monospace; opacity: 0.6; margin: 0; }
9
+ .sd-grain-card { width: 280px; height: 380px; position: relative; background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; overflow: hidden; cursor: pointer; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s, box-shadow 0.6s; }
10
+ .sd-grain-bg { position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; transition: opacity 0.6s; }
11
+ .sd-grain-content { position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 2; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
12
+ .sd-grain-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-15px) scale(1.02) rotateX(2deg); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
13
+ .sd-grain-card:hover .sd-grain-bg { opacity: 0.6; }
14
+ .sd-grain-card:hover .sd-grain-content { transform: translateY(-10px); }
15
+ .sd-grain-card:active { transform: translateY(-5px) scale(0.98); box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.1s; }
16
+ .sd-badge { align-self: flex-start; padding: 6px 12px; background: #fff; color: #000; border-radius: 100px; font-size: 10px; font-weight: bold; margin-bottom: auto; }
17
+ .sd-grain-content h3 { font-family: arial, sans-serif; font-weight: 900; font-size: 36px; margin: 0 0 10px 0; letter-spacing: -1px; }
18
+ .sd-grain-content p { font-family: monospace; opacity: 0.6; margin: 0; }
19
19
 
20
20
  `;
21
21
 
22
22
  export const AdminchoiceNoiseGlassCard = (props) => {
23
23
  let html = `
24
- <div class="grain-card">
25
- <div class="grain-bg"></div>
26
- <div class="grain-content">
27
- <div class="badge">NEW</div>
24
+ <div class="sd-grain-card">
25
+ <div class="sd-grain-bg"></div>
26
+ <div class="sd-grain-content">
27
+ <div class="sd-badge">NEW</div>
28
28
  <h3>FROSTED</h3>
29
29
  <p>Hyper-realistic Grain</p>
30
30
  </div>
@@ -32,9 +32,9 @@ export const AdminchoiceNoiseGlassCard = (props) => {
32
32
  `;
33
33
 
34
34
  // Inject props
35
-
36
35
 
37
- return (
36
+
37
+ return (
38
38
  <div {...props} className="sudarshana-component-AdminchoiceNoiseGlassCard">
39
39
  <style>{styles}</style>
40
40
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceParallaxImageLink.jsx CHANGED
@@ -6,27 +6,27 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .hover-img-link { position: relative; display: inline-block; text-decoration: none; cursor: none; padding: 10px; }
10
- .link-text { font-family: times new roman, serif; font-style: italic; font-size: 48px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); transition: all 0.3s; }
11
- .img-float { position: absolute; top: 50%; left: 100%; width: 200px; height: 140px; background-size: cover; background-position: center; transform: translate(20px, -50%) scale(0) rotate(-10deg); opacity: 0; pointer-events: none; border-radius: 8px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
12
- .hover-img-link:hover .img-float { opacity: 1; transform: translate(40px, -50%) scale(1) rotate(0deg); }
13
- .hover-img-link:hover .link-text { opacity: 0.5; letter-spacing: 2px; }
14
- .hover-img-link:active .link-text { opacity: 0.2; }
9
+ .sd-hover-img-link { position: relative; display: inline-block; text-decoration: none; cursor: none; padding: 10px; }
10
+ .sd-link-text { font-family: times new roman, serif; font-style: italic; font-size: 48px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); transition: all 0.3s; }
11
+ .sd-img-float { position: absolute; top: 50%; left: 100%; width: 200px; height: 140px; background-size: cover; background-position: center; transform: translate(20px, -50%) scale(0) rotate(-10deg); opacity: 0; pointer-events: none; border-radius: 8px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
12
+ .sd-hover-img-link:hover .sd-img-float { opacity: 1; transform: translate(40px, -50%) scale(1) rotate(0deg); }
13
+ .sd-hover-img-link:hover .sd-link-text { opacity: 0.5; letter-spacing: 2px; }
14
+ .sd-hover-img-link:active .sd-link-text { opacity: 0.2; }
15
15
 
16
16
  `;
17
17
 
18
18
  export const AdminchoiceParallaxImageLink = (props) => {
19
19
  let html = `
20
- <a href="#" class="hover-img-link" data-label="VIEW CASE">
21
- <span class="link-text">ARCHITECTURE</span>
22
- <div class="img-float" style="background-image: url('https://picsum.photos/300/200?grayscale')"></div>
20
+ <a href="#" class="sd-hover-img-link" data-label="VIEW CASE">
21
+ <span class="sd-link-text">ARCHITECTURE</span>
22
+ <div class="sd-img-float" style="background-image: url('https://picsum.photos/300/200?grayscale')"></div>
23
23
  </a>
24
24
  `;
25
25
 
26
26
  // Inject props
27
-
28
27
 
29
- return (
28
+
29
+ return (
30
30
  <div {...props} className="sudarshana-component-AdminchoiceParallaxImageLink">
31
31
  <style>{styles}</style>
32
32
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceRevealMaskText.jsx CHANGED
@@ -6,25 +6,25 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .masked-h1 { font-family: impact, sans-serif; font-size: 90px; color: #222; margin: 0; position: relative; cursor: crosshair; user-select: none; line-height: 1; transition: transform 0.4s; }
10
- .masked-h1::before { content: attr(data-label); position: absolute; top: 0; left: 0; color: transparent; background: linear-gradient(45deg, #ff0055, #0000ff); -webkit-background-clip: text; background-clip: text; clip-path: circle(0% at 50% 50%); transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
11
- .masked-h1:hover::before { clip-path: circle(100% at 50% 50%); }
12
- .masked-h1:hover { transform: scale(1.02); }
13
- .masked-h1:active { transform: scale(0.98); }
9
+ .sd-masked-h1 { font-family: impact, sans-serif; font-size: 90px; color: #222; margin: 0; position: relative; cursor: crosshair; user-select: none; line-height: 1; transition: transform 0.4s; }
10
+ .sd-masked-h1::before { content: attr(data-label); position: absolute; top: 0; left: 0; color: transparent; background: linear-gradient(45deg, #ff0055, #0000ff); -webkit-background-clip: text; background-clip: text; clip-path: circle(0% at 50% 50%); transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
11
+ .sd-masked-h1:hover::before { clip-path: circle(100% at 50% 50%); }
12
+ .sd-masked-h1:hover { transform: scale(1.02); }
13
+ .sd-masked-h1:active { transform: scale(0.98); }
14
14
 
15
15
  `;
16
16
 
17
17
  export const AdminchoiceRevealMaskText = (props) => {
18
18
  let html = `
19
- <h1 class="masked-h1" data-label="CREATIVE">
19
+ <h1 class="sd-masked-h1" data-label="CREATIVE">
20
20
  CREATIVE
21
21
  </h1>
22
22
  `;
23
23
 
24
24
  // Inject props
25
-
26
25
 
27
- return (
26
+
27
+ return (
28
28
  <div {...props} className="sudarshana-component-AdminchoiceRevealMaskText">
29
29
  <style>{styles}</style>
30
30
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AdminchoiceSpotlightInput.jsx CHANGED
@@ -6,31 +6,31 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .halo-input { position: relative; width: 300px; background: #000; border-radius: 12px; padding: 1px; overflow: visible; transition: transform 0.2s; }
10
- .halo-input:hover { transform: scale(1.02); }
11
- .halo-border { position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: conic-gradient(from 0deg, transparent 0%, #fff 10%, transparent 20%); animation: halo-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
12
- .halo-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2), transparent 70%); opacity: 0; transition: opacity 0.4s; }
13
- .halo-input:hover .halo-glow { opacity: 1; }
14
- .halo-input:focus-within .halo-border { opacity: 1; }
15
- .halo-input input { position: relative; width: 100%; padding: 16px; background: #111; border: none; color: #fff; border-radius: 11px; outline: none; font-family: monospace; z-index: 2; transition: background 0.3s; }
16
- .halo-input:hover input { background: #1a1a1a; }
9
+ .sd-halo-input { position: relative; width: 300px; background: #000; border-radius: 12px; padding: 1px; overflow: visible; transition: transform 0.2s; }
10
+ .sd-halo-input:hover { transform: scale(1.02); }
11
+ .sd-halo-border { position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: conic-gradient(from 0deg, transparent 0%, #fff 10%, transparent 20%); animation: halo-spin 3s linear infinite; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
12
+ .sd-halo-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2), transparent 70%); opacity: 0; transition: opacity 0.4s; }
13
+ .sd-halo-input:hover .sd-halo-glow { opacity: 1; }
14
+ .sd-halo-input:focus-within .sd-halo-border { opacity: 1; }
15
+ .sd-halo-input input { position: relative; width: 100%; padding: 16px; background: #111; border: none; color: #fff; border-radius: 11px; outline: none; font-family: monospace; z-index: 2; transition: background 0.3s; }
16
+ .sd-halo-input:hover input { background: #1a1a1a; }
17
17
  @keyframes halo-spin { to: [object Object]; }
18
18
 
19
19
  `;
20
20
 
21
21
  export const AdminchoiceSpotlightInput = (props) => {
22
22
  let html = `
23
- <div class="halo-input">
23
+ <div class="sd-halo-input">
24
24
  <input type="email" placeholder="notify@me.com">
25
- <div class="halo-border"></div>
26
- <div class="halo-glow"></div>
25
+ <div class="sd-halo-border"></div>
26
+ <div class="sd-halo-glow"></div>
27
27
  </div>
28
28
  `;
29
29
 
30
30
  // Inject props
31
-
32
31
 
33
- return (
32
+
33
+ return (
34
34
  <div {...props} className="sudarshana-component-AdminchoiceSpotlightInput">
35
35
  <style>{styles}</style>
36
36
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AnimatedCard.jsx CHANGED
@@ -6,19 +6,19 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .card-anim { border-radius: 12px; overflow: hidden; max-width: 300px; background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; color: #333; }
10
- .card-anim:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
11
- .img-placeholder { height: 150px; background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
12
- .content { padding: 20px; }
13
- h3 { margin: 0 0 10px 0; }
9
+ .sd-card-anim { border-radius: 12px; overflow: hidden; max-width: 300px; background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; color: #333; }
10
+ .sd-card-anim:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
11
+ .sd-img-placeholder { height: 150px; background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
12
+ .sd-content { padding: 20px; }
13
+ .sd-card-anim h3 { margin: 0 0 10px 0; }
14
14
 
15
15
  `;
16
16
 
17
17
  export const AnimatedCard = ({ title = "Hover Card", content = "Hover over me to see the effect!", ...rest }) => {
18
18
  let html = `
19
- <div class="card-anim">
20
- <div class="img-placeholder"></div>
21
- <div class="content">
19
+ <div class="sd-card-anim">
20
+ <div class="sd-img-placeholder"></div>
21
+ <div class="sd-content">
22
22
  <h3>{{title}}</h3>
23
23
  <p>{{content}}</p>
24
24
  </div>
@@ -29,7 +29,7 @@ export const AnimatedCard = ({ title = "Hover Card", content = "Hover over me to
29
29
  html = html.replaceAll('{{title}}', title);
30
30
  html = html.replaceAll('{{content}}', content);
31
31
 
32
- return (
32
+ return (
33
33
  <div {...rest} className="sudarshana-component-AnimatedCard">
34
34
  <style>{styles}</style>
35
35
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AnimatedFooter.jsx CHANGED
@@ -6,24 +6,24 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .footer-anim { position: relative; background: #333; color: white; padding: 50px 20px; text-align: center; overflow: hidden; margin-top: 50px; }
10
- .content { position: relative; z-index: 2; }
11
- .socials { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
12
- .soc { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: transform 0.3s, background 0.3s; }
13
- .soc:hover { transform: translateY(-5px) rotate(10deg); background: #6200ea; }
14
- .wave { position: absolute; top: -50px; left: 0; width: 100%; height: 100px; background: white; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: scaleX(1.5); }
9
+ .sd-footer-anim { position: relative; background: #333; color: white; padding: 50px 20px; text-align: center; overflow: hidden; margin-top: 50px; }
10
+ .sd-footer-anim .sd-content { position: relative; z-index: 2; }
11
+ .sd-socials { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
12
+ .sd-soc { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: transform 0.3s, background 0.3s; }
13
+ .sd-soc:hover { transform: translateY(-5px) rotate(10deg); background: #6200ea; }
14
+ .sd-wave { position: absolute; top: -50px; left: 0; width: 100%; height: 100px; background: white; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: scaleX(1.5); }
15
15
 
16
16
  `;
17
17
 
18
18
  export const AnimatedFooter = (props) => {
19
19
  let html = `
20
- <footer class="footer-anim">
21
- <div class="wave"></div>
22
- <div class="content">
23
- <div class="socials">
24
- <a href="#" class="soc">Tw</a>
25
- <a href="#" class="soc">In</a>
26
- <a href="#" class="soc">Fb</a>
20
+ <footer class="sd-footer-anim">
21
+ <div class="sd-wave"></div>
22
+ <div class="sd-content">
23
+ <div class="sd-socials">
24
+ <a href="#" class="sd-soc">Tw</a>
25
+ <a href="#" class="sd-soc">In</a>
26
+ <a href="#" class="sd-soc">Fb</a>
27
27
  </div>
28
28
  <p>Designed with ❤️ by You</p>
29
29
  </div>
@@ -31,9 +31,9 @@ export const AnimatedFooter = (props) => {
31
31
  `;
32
32
 
33
33
  // Inject props
34
-
35
34
 
36
- return (
35
+
36
+ return (
37
37
  <div {...props} className="sudarshana-component-AnimatedFooter">
38
38
  <style>{styles}</style>
39
39
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AnimatedOtp.jsx CHANGED
@@ -6,20 +6,20 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .otp-anim { display: flex; gap: 12px; }
10
- input { width: 50px; height: 60px; text-align: center; font-size: 24px; background: #f0f0f0; border: 2px solid transparent; border-radius: 12px; outline: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); color: #333; }
11
- input:focus { transform: translateY(-5px) scale(1.1); border-color: #6200ea; background: white; box-shadow: 0 10px 20px rgba(98, 0, 234, 0.2); }
9
+ .sd-otp-anim { display: flex; gap: 12px; }
10
+ .sd-otp-anim input { width: 50px; height: 60px; text-align: center; font-size: 24px; background: #f0f0f0; border: 2px solid transparent; border-radius: 12px; outline: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); color: #333; }
11
+ .sd-otp-anim input:focus { transform: translateY(-5px) scale(1.1); border-color: #6200ea; background: white; box-shadow: 0 10px 20px rgba(98, 0, 234, 0.2); }
12
12
  @keyframes shake { 0%, 100%: [object Object]; 20%, 60%: [object Object]; 40%, 80%: [object Object]; }
13
13
 
14
14
  `;
15
15
 
16
16
  export const AnimatedOtp = (props) => {
17
- let html = `<div class="otp-anim"><input type="text" maxlength="1" placeholder="•" /><input type="text" maxlength="1" placeholder="•" /><input type="text" maxlength="1" placeholder="•" /><input type="text" maxlength="1" placeholder="•" /></div>`;
17
+ let html = `<div class="sd-otp-anim"><input type="text" maxlength="1" placeholder="•" /><input type="text" maxlength="1" placeholder="•" /><input type="text" maxlength="1" placeholder="•" /><input type="text" maxlength="1" placeholder="•" /></div>`;
18
18
 
19
19
  // Inject props
20
-
21
20
 
22
- return (
21
+
22
+ return (
23
23
  <div {...props} className="sudarshana-component-AnimatedOtp">
24
24
  <style>{styles}</style>
25
25
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/AnimatedTextfield.jsx CHANGED
@@ -6,26 +6,26 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .input-group { position: relative; margin-top: 20px; }
10
- .input-anim { width: 100%; padding: 10px 0; border: none; border-bottom: 2px solid #999; outline: none; background: transparent; color: #333; transition: border-color 0.3s; }
11
- .input-anim:focus { border-color: #6200ea; }
12
- .label-anim { position: absolute; top: 10px; left: 0; color: #999; pointer-events: none; transition: 0.3s ease all; }
13
- .input-anim:focus ~ .label-anim, .input-anim:not(:placeholder-shown) ~ .label-anim { top: -20px; font-size: 12px; color: #6200ea; }
9
+ .sd-input-group { position: relative; margin-top: 20px; }
10
+ .sd-input-anim { width: 100%; padding: 10px 0; border: none; border-bottom: 2px solid #999; outline: none; background: transparent; color: #333; transition: border-color 0.3s; }
11
+ .sd-input-anim:focus { border-color: #6200ea; }
12
+ .sd-label-anim { position: absolute; top: 10px; left: 0; color: #999; pointer-events: none; transition: 0.3s ease all; }
13
+ .sd-input-anim:focus ~ .sd-label-anim, .sd-input-anim:not(:placeholder-shown) ~ .sd-label-anim { top: -20px; font-size: 12px; color: #6200ea; }
14
14
 
15
15
  `;
16
16
 
17
17
  export const AnimatedTextfield = ({ label = "Username", ...rest }) => {
18
18
  let html = `
19
- <div class="input-group">
20
- <input type="text" class="input-anim" placeholder=" " />
21
- <label class="label-anim">{{label}}</label>
19
+ <div class="sd-input-group">
20
+ <input type="text" class="sd-input-anim" placeholder=" " />
21
+ <label class="sd-label-anim">{{label}}</label>
22
22
  </div>
23
23
  `;
24
24
 
25
25
  // Inject props
26
26
  html = html.replaceAll('{{label}}', label);
27
27
 
28
- return (
28
+ return (
29
29
  <div {...rest} className="sudarshana-component-AnimatedTextfield">
30
30
  <style>{styles}</style>
31
31
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/FancyButton.jsx CHANGED
@@ -6,19 +6,19 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .btn-anim { padding: 12px 24px; background: linear-gradient(25deg, #EF8B4A 50%, #FF6E64 40%); color: white; border: none; border-radius: 25px; cursor: wait; font-size: 16px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); }
10
- .btn-anim:hover { transform: scale(1.05); box-shadow: 0 3px 15px 2px rgba(255, 105, 135, .5); }
11
- .btn-anim:active { transform: scale(0.95); }
9
+ .sd-btn-anim { padding: 12px 24px; background: linear-gradient(25deg, #EF8B4A 50%, #FF6E64 40%); color: white; border: none; border-radius: 25px; cursor: wait; font-size: 16px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); }
10
+ .sd-btn-anim:hover { transform: scale(1.05); box-shadow: 0 3px 15px 2px rgba(255, 105, 135, .5); }
11
+ .sd-btn-anim:active { transform: scale(0.95); }
12
12
 
13
13
  `;
14
14
 
15
15
  export const FancyButton = ({ label = "yo yes", ...rest }) => {
16
- let html = `<button class="btn-anim">{{label}}</button>`;
16
+ let html = `<button class="sd-btn-anim">{{label}}</button>`;
17
17
 
18
18
  // Inject props
19
19
  html = html.replaceAll('{{label}}', label);
20
20
 
21
- return (
21
+ return (
22
22
  <div {...rest} className="sudarshana-component-FancyButton">
23
23
  <style>{styles}</style>
24
24
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/NormalFooter.jsx CHANGED
@@ -6,28 +6,28 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .footer { display: flex; justify-content: space-around; padding: 40px 20px; background: #f8f9fa; color: #333; border-top: 1px solid #eee; }
10
- .col { display: flex; flex-direction: column; gap: 10px; }
11
- h4 { margin: 0 0 10px 0; }
12
- a { text-decoration: none; color: #666; }
13
- a:hover { color: #000; }
9
+ .sd-footer { display: flex; justify-content: space-around; padding: 40px 20px; background: #f8f9fa; color: #333; border-top: 1px solid #eee; }
10
+ .sd-col { display: flex; flex-direction: column; gap: 10px; }
11
+ .sd-footer h4 { margin: 0 0 10px 0; }
12
+ .sd-footer a { text-decoration: none; color: #666; }
13
+ .sd-footer a:hover { color: #000; }
14
14
 
15
15
  `;
16
16
 
17
17
  export const NormalFooter = (props) => {
18
18
  let html = `
19
- <footer class="footer">
20
- <div class="col">
19
+ <footer class="sd-footer">
20
+ <div class="sd-col">
21
21
  <h4>Brand</h4>
22
22
  <p>© 2024 All rights reserved.</p>
23
23
  </div>
24
- <div class="col">
24
+ <div class="sd-col">
25
25
  <h4>Links</h4>
26
26
  <a href="#">Home</a>
27
27
  <a href="#">About</a>
28
28
  <a href="#">Contact</a>
29
29
  </div>
30
- <div class="col">
30
+ <div class="sd-col">
31
31
  <h4>Social</h4>
32
32
  <a href="#">Twitter</a>
33
33
  <a href="#">GitHub</a>
@@ -36,9 +36,9 @@ export const NormalFooter = (props) => {
36
36
  `;
37
37
 
38
38
  // Inject props
39
-
40
39
 
41
- return (
40
+
41
+ return (
42
42
  <div {...props} className="sudarshana-component-NormalFooter">
43
43
  <style>{styles}</style>
44
44
  <div dangerouslySetInnerHTML={{ __html: html }} />
package/src/NormalOtp.jsx CHANGED
@@ -6,18 +6,18 @@ import React from 'react';
6
6
  */
7
7
 
8
8
  const styles = `
9
- .otp-group { display: flex; gap: 10px; }
10
- input { width: 40px; height: 40px; text-align: center; font-size: 18px; border: 1px solid #ccc; border-radius: 4px; }
9
+ .sd-otp-group { display: flex; gap: 10px; }
10
+ .sd-otp-group input { width: 40px; height: 40px; text-align: center; font-size: 18px; border: 1px solid #ccc; border-radius: 4px; }
11
11
 
12
12
  `;
13
13
 
14
14
  export const NormalOtp = (props) => {
15
- let html = `<div class="otp-group"><input type="text" maxlength="1" /><input type="text" maxlength="1" /><input type="text" maxlength="1" /><input type="text" maxlength="1" /></div>`;
15
+ let html = `<div class="sd-otp-group"><input type="text" maxlength="1" /><input type="text" maxlength="1" /><input type="text" maxlength="1" /><input type="text" maxlength="1" /></div>`;
16
16
 
17
17
  // Inject props
18
-
19
18
 
20
- return (
19
+
20
+ return (
21
21
  <div {...props} className="sudarshana-component-NormalOtp">
22
22
  <style>{styles}</style>
23
23
  <div dangerouslySetInnerHTML={{ __html: html }} />