@sudarshanaui/ui 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sudarshanaui/ui",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "description": "A collection of modern, animated React components.",
     "main": "index.js",
     "publishConfig": {

package/src/AdminchoiceCreativeGridMenu.jsx

@@ -18,22 +18,17 @@ const styles = `
 
 `;
 
-export const AdminchoiceCreativeGridMenu = (props) => {
-  let html = `
-<nav class="sd-brut-nav">
-  <a href="#" class="sd-brut-link"><span>01</span> WORK</a>
-  <a href="#" class="sd-brut-link"><span>02</span> STUDIO</a>
-  <a href="#" class="sd-brut-link"><span>03</span> CONTACT</a>
-</nav>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceCreativeGridMenu = ({ items = [{ label: "WORK", number: "01" }, { label: "STUDIO", number: "02" }, { label: "CONTACT", number: "03" }], ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceCreativeGridMenu">
+    <div {...rest} className="sudarshana-component-AdminchoiceCreativeGridMenu">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <nav className="sd-brut-nav">
+        {items.map((item, index) => (
+          <a key={index} href={item.href || "#"} className="sd-brut-link">
+            <span>{item.number}</span> {item.label}
+          </a>
+        ))}
+      </nav>
     </div>
   );
 };

package/src/AdminchoiceGlitchTitle.jsx

@@ -18,18 +18,13 @@ const styles = `
 
 `;
 
-export const AdminchoiceGlitchTitle = (props) => {
-  let html = `
-<h1 class="sd-rgb-text" data-text="SYSTEM_FAILURE">SYSTEM_FAILURE</h1>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceGlitchTitle = ({ label = "SYSTEM_FAILURE", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceGlitchTitle">
+    <div {...rest} className="sudarshana-component-AdminchoiceGlitchTitle">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <h1 className="sd-rgb-text" data-text={label}>
+        {label}
+      </h1>
     </div>
   );
 };

package/src/AdminchoiceInteractiveToggle.jsx

@@ -17,25 +17,22 @@ const styles = `
 
 `;
 
-export const AdminchoiceInteractiveToggle = (props) => {
-  let html = `
-<label class="sd-pill-toggle">
-  <input type="checkbox">
-  <div class="sd-pill-track">
-    <span class="sd-label-off">OFF</span>
-    <span class="sd-label-on">ON</span>
-  </div>
-  <div class="sd-pill-thumb"></div>
-</label>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceInteractiveToggle = ({ checked, onChange, ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceInteractiveToggle">
+    <div {...rest} className="sudarshana-component-AdminchoiceInteractiveToggle">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <label className="sd-pill-toggle">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+        />
+        <div className="sd-pill-track">
+          <span className="sd-label-off">OFF</span>
+          <span className="sd-label-on">ON</span>
+        </div>
+        <div className="sd-pill-thumb"></div>
+      </label>
     </div>
   );
 };

package/src/AdminchoiceKineticMarqueeButton.jsx

@@ -18,31 +18,21 @@ const styles = `
 
 `;
 
-export const AdminchoiceKineticMarqueeButton = (props) => {
-  let html = `
-<button class="sd-kinetic-mag-btn">
-  <div class="sd-marquee-wrap">
-    <div class="sd-marquee-track">
-      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
-      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
-      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
-    </div>
-    <div class="sd-marquee-track">
-      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
-      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
-      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="sd-icon"/>
-    </div>
-  </div>
-</button>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceKineticMarqueeButton = ({ label = "START PROJECT", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceKineticMarqueeButton">
+    <div {...rest} className="sudarshana-component-AdminchoiceKineticMarqueeButton">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <button className="sd-kinetic-mag-btn">
+        <div className="sd-marquee-wrap">
+          {[1, 2].map((i) => (
+            <div key={i} className="sd-marquee-track">
+              <span>{label}</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" className="sd-icon" alt="" />
+              <span>{label}</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" className="sd-icon" alt="" />
+              <span>{label}</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" className="sd-icon" alt="" />
+            </div>
+          ))}
+        </div>
+      </button>
     </div>
   );
 };

package/src/AdminchoiceLiquidMorphLoader.jsx

@@ -18,23 +18,22 @@ const styles = `
 `;
 
 export const AdminchoiceLiquidMorphLoader = (props) => {
-  let html = `
-<div class="sd-gooey-wrap">
-  <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>
-  <div class="sd-blobs">
-    <div class="sd-blob-main"></div>
-    <div class="sd-blob-orbit"></div>
-  </div>
-</div>
-`;
-
-  // Inject props
-
-
   return (
     <div {...props} className="sudarshana-component-AdminchoiceLiquidMorphLoader">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="sd-gooey-wrap">
+        <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>
+        <div className="sd-blobs">
+          <div className="sd-blob-main"></div>
+          <div className="sd-blob-orbit"></div>
+        </div>
+      </div>
     </div>
   );
 };

package/src/AdminchoiceMagneticAttractionButton.jsx

@@ -18,22 +18,15 @@ const styles = `
 
 `;
 
-export const AdminchoiceMagneticAttractionButton = (props) => {
-  let html = `
-<button class="sd-magnet-core">
-  <span class="sd-magnet-text">MAGNETIC</span>
-  <div class="sd-magnet-field"></div>
-  <div class="sd-magnet-ripple"></div>
-</button>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceMagneticAttractionButton = ({ label = "MAGNETIC", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceMagneticAttractionButton">
+    <div {...rest} className="sudarshana-component-AdminchoiceMagneticAttractionButton">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <button className="sd-magnet-core">
+        <span className="sd-magnet-text">{label}</span>
+        <div className="sd-magnet-field"></div>
+        <div className="sd-magnet-ripple"></div>
+      </button>
     </div>
   );
 };

package/src/AdminchoiceNoiseGlassCard.jsx

@@ -19,25 +19,18 @@ const styles = `
 
 `;
 
-export const AdminchoiceNoiseGlassCard = (props) => {
-  let html = `
-<div class="sd-grain-card">
-  <div class="sd-grain-bg"></div>
-  <div class="sd-grain-content">
-    <div class="sd-badge">NEW</div>
-    <h3>FROSTED</h3>
-    <p>Hyper-realistic Grain</p>
-  </div>
-</div>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceNoiseGlassCard = ({ title = "FROSTED", subtitle = "Hyper-realistic Grain", badge = "NEW", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceNoiseGlassCard">
+    <div {...rest} className="sudarshana-component-AdminchoiceNoiseGlassCard">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="sd-grain-card">
+        <div className="sd-grain-bg"></div>
+        <div className="sd-grain-content">
+          <div className="sd-badge">{badge}</div>
+          <h3>{title}</h3>
+          <p>{subtitle}</p>
+        </div>
+      </div>
     </div>
   );
 };

package/src/AdminchoiceParallaxImageLink.jsx

@@ -15,21 +15,14 @@ const styles = `
 
 `;
 
-export const AdminchoiceParallaxImageLink = (props) => {
-  let html = `
-<a href="#" class="sd-hover-img-link" data-label="VIEW CASE">
-  <span class="sd-link-text">ARCHITECTURE</span>
-  <div class="sd-img-float" style="background-image: url('https://picsum.photos/300/200?grayscale')"></div>
-</a>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceParallaxImageLink = ({ label = "ARCHITECTURE", image = "https://picsum.photos/300/200?grayscale", href = "#", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceParallaxImageLink">
+    <div {...rest} className="sudarshana-component-AdminchoiceParallaxImageLink">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <a href={href} className="sd-hover-img-link" data-label={label}>
+        <span className="sd-link-text">{label}</span>
+        <div className="sd-img-float" style={{ backgroundImage: `url('${image}')` }}></div>
+      </a>
     </div>
   );
 };

package/src/AdminchoiceRevealMaskText.jsx

@@ -14,20 +14,13 @@ const styles = `
 
 `;
 
-export const AdminchoiceRevealMaskText = (props) => {
-  let html = `
-<h1 class="sd-masked-h1" data-label="CREATIVE">
-  CREATIVE
-</h1>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceRevealMaskText = ({ label = "CREATIVE", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceRevealMaskText">
+    <div {...rest} className="sudarshana-component-AdminchoiceRevealMaskText">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <h1 className="sd-masked-h1" data-label={label}>
+        {label}
+      </h1>
     </div>
   );
 };

package/src/AdminchoiceSpotlightInput.jsx

@@ -18,22 +18,20 @@ const styles = `
 
 `;
 
-export const AdminchoiceSpotlightInput = (props) => {
-  let html = `
-<div class="sd-halo-input">
-  <input type="email" placeholder="notify@me.com">
-  <div class="sd-halo-border"></div>
-  <div class="sd-halo-glow"></div>
-</div>
-`;
-
-  // Inject props
-
-
+export const AdminchoiceSpotlightInput = ({ value, onChange, placeholder = "notify@me.com", ...rest }) => {
   return (
-    <div {...props} className="sudarshana-component-AdminchoiceSpotlightInput">
+    <div {...rest} className="sudarshana-component-AdminchoiceSpotlightInput">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="sd-halo-input">
+        <input
+          type="email"
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+        <div className="sd-halo-border"></div>
+        <div className="sd-halo-glow"></div>
+      </div>
     </div>
   );
 };

package/src/AnimatedCard.jsx

@@ -14,25 +14,23 @@ const styles = `
 
 `;
 
-export const AnimatedCard = ({ title = "Hover Card", content = "Hover over me to see the effect!", ...rest }) => {
-  let html = `
-<div class="sd-card-anim">
-  <div class="sd-img-placeholder"></div>
-  <div class="sd-content">
-    <h3>{{title}}</h3>
-    <p>{{content}}</p>
-  </div>
-</div>
-      `;
-
-  // Inject props
-  html = html.replaceAll('{{title}}', title);
-  html = html.replaceAll('{{content}}', content);
-
+export const AnimatedCard = ({ title = "Hover Card", content = "Hover over me to see the effect!", children, ...rest }) => {
   return (
     <div {...rest} className="sudarshana-component-AnimatedCard">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="sd-card-anim">
+        {children ? (
+          children
+        ) : (
+          <>
+            <div className="sd-img-placeholder"></div>
+            <div className="sd-content">
+              <h3>{title}</h3>
+              <p>{content}</p>
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 };

package/src/AnimatedFooter.jsx

@@ -16,27 +16,20 @@ const styles = `
 `;
 
 export const AnimatedFooter = (props) => {
-  let html = `
-<footer class="sd-footer-anim">
-  <div class="sd-wave"></div>
-  <div class="sd-content">
-    <div class="sd-socials">
-      <a href="#" class="sd-soc">Tw</a>
-      <a href="#" class="sd-soc">In</a>
-      <a href="#" class="sd-soc">Fb</a>
-    </div>
-    <p>Designed with ❤️ by You</p>
-  </div>
-</footer>
-`;
-
-  // Inject props
-
-
   return (
     <div {...props} className="sudarshana-component-AnimatedFooter">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <footer className="sd-footer-anim">
+        <div className="sd-wave"></div>
+        <div className="sd-content">
+          <div className="sd-socials">
+            <a href="#" className="sd-soc">Tw</a>
+            <a href="#" className="sd-soc">In</a>
+            <a href="#" className="sd-soc">Fb</a>
+          </div>
+          <p>Designed with ❤️ by You</p>
+        </div>
+      </footer>
     </div>
   );
 };

package/src/AnimatedOtp.jsx

@@ -14,15 +14,15 @@ const styles = `
 `;
 
 export const AnimatedOtp = (props) => {
-  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>`;
-
-  // Inject props
-
-
   return (
     <div {...props} className="sudarshana-component-AnimatedOtp">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="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>
     </div>
   );
 };

package/src/AnimatedTextfield.jsx

@@ -15,20 +15,13 @@ const styles = `
 `;
 
 export const AnimatedTextfield = ({ label = "Username", ...rest }) => {
-  let html = `
-<div class="sd-input-group">
-  <input type="text" class="sd-input-anim" placeholder=" " />
-  <label class="sd-label-anim">{{label}}</label>
-</div>
-        `;
-
-  // Inject props
-  html = html.replaceAll('{{label}}', label);
-
   return (
-    <div {...rest} className="sudarshana-component-AnimatedTextfield">
+    <div className="sudarshana-component-AnimatedTextfield">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="sd-input-group">
+        <input type="text" className="sd-input-anim" placeholder=" " {...rest} />
+        <label className="sd-label-anim">{label}</label>
+      </div>
     </div>
   );
 };

package/src/FancyButton.jsx

@@ -13,15 +13,12 @@ const styles = `
 `;
 
 export const FancyButton = ({ label = "yo yes", ...rest }) => {
-  let html = `<button class="sd-btn-anim">{{label}}</button>`;
-
-  // Inject props
-  html = html.replaceAll('{{label}}', label);
-
   return (
-    <div {...rest} className="sudarshana-component-FancyButton">
+    <>
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
-    </div>
+      <button className="sd-btn-anim" {...rest}>
+        {label}
+      </button>
+    </>
   );
 };

package/src/NormalFooter.jsx

@@ -15,33 +15,26 @@ const styles = `
 `;
 
 export const NormalFooter = (props) => {
-  let html = `
-<footer class="sd-footer">
-  <div class="sd-col">
-    <h4>Brand</h4>
-    <p>© 2024 All rights reserved.</p>
-  </div>
-  <div class="sd-col">
-    <h4>Links</h4>
-    <a href="#">Home</a>
-    <a href="#">About</a>
-    <a href="#">Contact</a>
-  </div>
-  <div class="sd-col">
-    <h4>Social</h4>
-    <a href="#">Twitter</a>
-    <a href="#">GitHub</a>
-  </div>
-</footer>
-`;
-
-  // Inject props
-
-
   return (
     <div {...props} className="sudarshana-component-NormalFooter">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <footer className="sd-footer">
+        <div className="sd-col">
+          <h4>Brand</h4>
+          <p>© 2024 All rights reserved.</p>
+        </div>
+        <div className="sd-col">
+          <h4>Links</h4>
+          <a href="#">Home</a>
+          <a href="#">About</a>
+          <a href="#">Contact</a>
+        </div>
+        <div className="sd-col">
+          <h4>Social</h4>
+          <a href="#">Twitter</a>
+          <a href="#">GitHub</a>
+        </div>
+      </footer>
     </div>
   );
 };

package/src/NormalOtp.jsx

@@ -12,15 +12,15 @@ const styles = `
 `;
 
 export const NormalOtp = (props) => {
-  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>`;
-
-  // Inject props
-
-
   return (
     <div {...props} className="sudarshana-component-NormalOtp">
       <style>{styles}</style>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <div className="sd-otp-group">
+        <input type="text" maxLength="1" />
+        <input type="text" maxLength="1" />
+        <input type="text" maxLength="1" />
+        <input type="text" maxLength="1" />
+      </div>
     </div>
   );
 };