@sudarshanaui/ui 1.0.0

package/README.md

@@ -0,0 +1,78 @@
+# @sudarshana/ui
+
+<div align="center">
+  <img src="https://via.placeholder.com/150" alt="Sudarshana UI Logo" width="120" />
+  <h1>Sudarshana UI</h1>
+  <p><strong>Elegant. Modern. Infinite.</strong></p>
+  <p>The official React component library for the Sudarshana ecosystem.</p>
+
+  [![npm version](https://img.shields.io/npm/v/@sudarshana/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sudarshana/ui)
+  [![License](https://img.shields.io/npm/l/@sudarshana/ui.svg?style=flat-square)](LICENSE)
+</div>
+
+---
+
+## Introduction
+
+**Sudarshana UI** is a meticulously crafted collection of React components designed to build immersive and high-performance web applications. Inspired by cosmic aesthetics and built for modern developers, it provides a seamless developer experience with award-winning visual quality.
+
+## Features
+
+- 🎨 **Award-Winning Design**: Components inspired by top-tier design trends (Awwwards, Webby).
+- 🧩 **Modular & Composable**: Import only what you need.
+- ♿ **Accessible**: Built with WAI-ARIA standards in mind.
+- ⚡ **High Performance**: Optimized for speed and minimal bundle size.
+- 🌙 **Dark Mode Ready**: First-class support for dark themes.
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install @sudarshana/ui
+```
+
+Or using yarn:
+
+```bash
+yarn add @sudarshana/ui
+```
+
+## Usage
+
+Import components directly into your React application:
+
+```jsx
+import React from 'react';
+import { PrismButton, VoidCard } from '@sudarshana/ui';
+
+const App = () => {
+  return (
+    <div className="app-container">
+      <VoidCard title="Welcome to Sudarshana">
+        <p>Explore the infinite possibilities.</p>
+        <PrismButton variant="cosmic" onClick={() => console.log('Clicked!')}>
+          Launch
+        </PrismButton>
+      </VoidCard>
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Available Components
+
+- **PrismButton**: A button component with prismatic light effects.
+- **VoidCard**: A depth-defying card container.
+- **LiquidToggle**: A fluid state toggle switch.
+- ...and many more being added regularly.
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+MIT © [Sudarshana Team](https://sudarshana.com)

package/index.js

@@ -0,0 +1,25 @@
+/**
+ * Sudarshana UI
+ * The official component library for Sudarshana.
+ * 
+ * Auto-generated exports from published components.
+ */
+
+export * from './src/FancyButton';
+export * from './src/AnimatedCard';
+export * from './src/AnimatedTextfield';
+export * from './src/NormalOtp';
+export * from './src/AnimatedOtp';
+export * from './src/NormalFooter';
+export * from './src/AnimatedFooter';
+export * from './src/AdminchoiceKineticMarqueeButton';
+export * from './src/AdminchoiceNoiseGlassCard';
+export * from './src/AdminchoiceMagneticAttractionButton';
+export * from './src/AdminchoiceRevealMaskText';
+export * from './src/AdminchoiceLiquidMorphLoader';
+export * from './src/AdminchoiceCreativeGridMenu';
+export * from './src/AdminchoiceParallaxImageLink';
+export * from './src/AdminchoiceGlitchTitle';
+export * from './src/AdminchoiceInteractiveToggle';
+export * from './src/AdminchoiceSpotlightInput';
+export * from './src/Testing';

package/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "@sudarshanaui/ui",
+    "version": "1.0.0",
+    "description": "The official component library for Sudarshana - Elegant, modern, and accessible React components.",
+    "main": "index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Start-Up-Sudarshana/sudarshana.git"
+    },
+    "keywords": [
+        "sudarshana",
+        "ui",
+        "react",
+        "components",
+        "design-system",
+        "accessible",
+        "modern"
+    ],
+    "author": "Sudarshana Team <contact@sudarshana.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/Start-Up-Sudarshana/sudarshana/issues"
+    },
+    "homepage": "https://sudarshana.com",
+    "dependencies": {},
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    }
+}

package/src/AdminchoiceCreativeGridMenu.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Creative Grid Menu
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.brut-nav { display: flex; flex-direction: column; border: 1px solid #fff; width: 220px; background: #000; } 
+.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; } 
+.brut-link:last-child { border-bottom: none; } 
+.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; } 
+.brut-link:hover { color: #000; padding-left: 34px; } 
+.brut-link:hover::before { transform: translateX(0); } 
+.brut-link:active { opacity: 0.8; } 
+.brut-link span { font-family: monospace; opacity: 0.5; transition: opacity 0.3s; } 
+.brut-link:hover span { opacity: 1; } 
+
+`;
+
+export const AdminchoiceCreativeGridMenu = (props) => {
+  let html = `
+<nav class="brut-nav">
+  <a href="#" class="brut-link"><span>01</span> WORK</a>
+  <a href="#" class="brut-link"><span>02</span> STUDIO</a>
+  <a href="#" class="brut-link"><span>03</span> CONTACT</a>
+</nav>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceCreativeGridMenu">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceGlitchTitle.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Glitch Title
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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; } 
+.rgb-text:hover { transform: scale(1.05) skewX(-2deg); } 
+.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; } 
+.rgb-text:hover::before { animation-duration: 0.1s; } 
+.rgb-text:hover::after { animation-duration: 0.1s; } 
+.rgb-text::before { color: #ff0000; z-index: -1; animation: rgb-1 8s infinite; } 
+.rgb-text::after { color: #0000ff; z-index: -2; animation: rgb-2 8s infinite; } 
+@keyframes rgb-1 { 0%,100%: [object Object]; 20%: [object Object]; 40%: [object Object]; 60%: [object Object]; 80%: [object Object]; } 
+@keyframes rgb-2 { 0%,100%: [object Object]; 25%: [object Object]; 50%: [object Object]; 75%: [object Object]; } 
+
+`;
+
+export const AdminchoiceGlitchTitle = (props) => {
+  let html = `
+<h1 class="rgb-text" data-text="SYSTEM_FAILURE">SYSTEM_FAILURE</h1>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceGlitchTitle">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceInteractiveToggle.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Interactive Toggle
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.pill-toggle { position: fixed; width: 80px; height: 36px; cursor: pointer; } 
+.pill-toggle input { display: none; } 
+.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; } 
+.pill-toggle:hover .pill-track { background: #333; } 
+.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); } 
+.pill-toggle:active .pill-thumb { width: 36px; } 
+input:checked ~ .pill-thumb { transform: translateX(44px); background: #00ff88; } 
+input:checked ~ .pill-track .label-on { color: #fff; } 
+
+`;
+
+export const AdminchoiceInteractiveToggle = (props) => {
+  let html = `
+<label class="pill-toggle">
+  <input type="checkbox">
+  <div class="pill-track">
+    <span class="label-off">OFF</span>
+    <span class="label-on">ON</span>
+  </div>
+  <div class="pill-thumb"></div>
+</label>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceInteractiveToggle">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceKineticMarqueeButton.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Kinetic Marquee Button
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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; } 
+.kinetic-mag-btn:hover { transform: scale(1.05) rotate(-1deg); background: #222; } 
+.kinetic-mag-btn:active { transform: scale(0.95) rotate(0deg); transition: transform 0.1s; } 
+.marquee-wrap { display: flex; width: 100%; height: 100%; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); } 
+.marquee-track { display: flex; align-items: center; white-space: nowrap; animation: k-scroll 6s linear infinite; transition: animation-duration 0.3s; } 
+.kinetic-mag-btn:hover .marquee-track { animation-duration: 3s; } 
+.marquee-track span { padding-left: 20px; font-size: 16px; } 
+.icon { width: 20px; height: 20px; margin-left: 10px; margin-right: 10px; } 
+@keyframes k-scroll { 0%: [object Object]; 100%: [object Object]; } 
+
+`;
+
+export const AdminchoiceKineticMarqueeButton = (props) => {
+  let html = `
+<button class="kinetic-mag-btn">
+  <div class="marquee-wrap">
+    <div class="marquee-track">
+      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
+      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
+      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
+    </div>
+    <div class="marquee-track">
+      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
+      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
+      <span>START PROJECT</span><img src="https://api.iconify.design/ph:arrow-right-bold.svg?color=white" class="icon"/>
+    </div>
+  </div>
+</button>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceKineticMarqueeButton">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceLiquidMorphLoader.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Liquid Morph Loader
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.gooey-wrap { width: 100px; height: 100px; position: relative; filter: url(#goo-sharp); cursor: wait; transition: transform 0.3s; } 
+.gooey-wrap:hover { transform: scale(1.1); } 
+.blobs { width: 100%; height: 100%; animation: rotate-g 4s linear infinite; } 
+.blob-main { position: absolute; top: 35px; left: 35px; width: 30px; height: 30px; background: #fff; border-radius: 50%; transition: background 0.3s; } 
+.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; } 
+.gooey-wrap:active .blob-main, .gooey-wrap:active .blob-orbit { background: #00ff88; } 
+@keyframes rotate-g { to: [object Object]; } 
+@keyframes orbit-g { 0%: [object Object]; 100%: [object Object]; } 
+
+`;
+
+export const AdminchoiceLiquidMorphLoader = (props) => {
+  let html = `
+<div class="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="blobs">
+    <div class="blob-main"></div>
+    <div class="blob-orbit"></div>
+  </div>
+</div>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceLiquidMorphLoader">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceMagneticAttractionButton.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Magnetic Attraction Button
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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); } 
+.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; } 
+.magnet-core:hover .magnet-field { width: 350px; height: 350px; } 
+.magnet-core:hover { color: #000; border-color: transparent; transform: scale(1.05); } 
+.magnet-core:active { transform: scale(0.95); } 
+.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; } 
+.magnet-core:active .magnet-ripple { animation: mag-ping 0.6s cubic-bezier(0, 0, 0.2, 1); } 
+.magnet-text { position: relative; z-index: 2; } 
+@keyframes mag-ping { 75%, 100%: [object Object]; 0%: [object Object]; } 
+
+`;
+
+export const AdminchoiceMagneticAttractionButton = (props) => {
+  let html = `
+<button class="magnet-core">
+  <span class="magnet-text">MAGNETIC</span>
+  <div class="magnet-field"></div>
+  <div class="magnet-ripple"></div>
+</button>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceMagneticAttractionButton">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceNoiseGlassCard.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Noise Glass Card
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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; } 
+.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; } 
+.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); } 
+.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); } 
+.grain-card:hover .grain-bg { opacity: 0.6; } 
+.grain-card:hover .grain-content { transform: translateY(-10px); } 
+.grain-card:active { transform: translateY(-5px) scale(0.98); box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.1s; } 
+.badge { align-self: flex-start; padding: 6px 12px; background: #fff; color: #000; border-radius: 100px; font-size: 10px; font-weight: bold; margin-bottom: auto; } 
+.grain-content h3 { font-family: arial, sans-serif; font-weight: 900; font-size: 36px; margin: 0 0 10px 0; letter-spacing: -1px; } 
+.grain-content p { font-family: monospace; opacity: 0.6; margin: 0; } 
+
+`;
+
+export const AdminchoiceNoiseGlassCard = (props) => {
+  let html = `
+<div class="grain-card">
+  <div class="grain-bg"></div>
+  <div class="grain-content">
+    <div class="badge">NEW</div>
+    <h3>FROSTED</h3>
+    <p>Hyper-realistic Grain</p>
+  </div>
+</div>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceNoiseGlassCard">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceParallaxImageLink.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Parallax Image Link
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.hover-img-link { position: relative; display: inline-block; text-decoration: none; cursor: none; padding: 10px; } 
+.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; } 
+.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); } 
+.hover-img-link:hover .img-float { opacity: 1; transform: translate(40px, -50%) scale(1) rotate(0deg); } 
+.hover-img-link:hover .link-text { opacity: 0.5; letter-spacing: 2px; } 
+.hover-img-link:active .link-text { opacity: 0.2; } 
+
+`;
+
+export const AdminchoiceParallaxImageLink = (props) => {
+  let html = `
+<a href="#" class="hover-img-link" data-label="VIEW CASE">
+  <span class="link-text">ARCHITECTURE</span>
+  <div class="img-float" style="background-image: url('https://picsum.photos/300/200?grayscale')"></div>
+</a>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceParallaxImageLink">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceRevealMaskText.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Reveal Mask Text
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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; } 
+.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); } 
+.masked-h1:hover::before { clip-path: circle(100% at 50% 50%); } 
+.masked-h1:hover { transform: scale(1.02); } 
+.masked-h1:active { transform: scale(0.98); } 
+
+`;
+
+export const AdminchoiceRevealMaskText = (props) => {
+  let html = `
+<h1 class="masked-h1" data-label="CREATIVE">
+  CREATIVE
+</h1>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceRevealMaskText">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AdminchoiceSpotlightInput.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * AdminChoice - Spotlight Input
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.halo-input { position: relative; width: 300px; background: #000; border-radius: 12px; padding: 1px; overflow: visible; transition: transform 0.2s; } 
+.halo-input:hover { transform: scale(1.02); } 
+.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; } 
+.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; } 
+.halo-input:hover .halo-glow { opacity: 1; } 
+.halo-input:focus-within .halo-border { opacity: 1; } 
+.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; } 
+.halo-input:hover input { background: #1a1a1a; } 
+@keyframes halo-spin { to: [object Object]; } 
+
+`;
+
+export const AdminchoiceSpotlightInput = (props) => {
+  let html = `
+<div class="halo-input">
+  <input type="email" placeholder="notify@me.com">
+  <div class="halo-border"></div>
+  <div class="halo-glow"></div>
+</div>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AdminchoiceSpotlightInput">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AnimatedCard.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+/**
+ * Animated Card
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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; } 
+.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); } 
+.img-placeholder { height: 150px; background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 
+.content { padding: 20px; } 
+h3 { margin: 0 0 10px 0; } 
+
+`;
+
+export const AnimatedCard = ({ title = "Hover Card", content = "Hover over me to see the effect!", ...rest }) => {
+  let html = `
+<div class="card-anim">
+  <div class="img-placeholder"></div>
+  <div class="content">
+    <h3>{{title}}</h3>
+    <p>{{content}}</p>
+  </div>
+</div>
+      `;
+
+  // Inject props
+  html = html.replaceAll('{{title}}', title);
+  html = html.replaceAll('{{content}}', content);
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AnimatedCard">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AnimatedFooter.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+/**
+ * Animated Footer
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.footer-anim { position: relative; background: #333; color: white; padding: 50px 20px; text-align: center; overflow: hidden; margin-top: 50px; } 
+.content { position: relative; z-index: 2; } 
+.socials { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } 
+.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; } 
+.soc:hover { transform: translateY(-5px) rotate(10deg); background: #6200ea; } 
+.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); } 
+
+`;
+
+export const AnimatedFooter = (props) => {
+  let html = `
+<footer class="footer-anim">
+  <div class="wave"></div>
+  <div class="content">
+    <div class="socials">
+      <a href="#" class="soc">Tw</a>
+      <a href="#" class="soc">In</a>
+      <a href="#" class="soc">Fb</a>
+    </div>
+    <p>Designed with ❤️ by You</p>
+  </div>
+</footer>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AnimatedFooter">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AnimatedOtp.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ * Animated OTP
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.otp-anim { display: flex; gap: 12px; } 
+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; } 
+input:focus { transform: translateY(-5px) scale(1.1); border-color: #6200ea; background: white; box-shadow: 0 10px 20px rgba(98, 0, 234, 0.2); } 
+@keyframes shake { 0%, 100%: [object Object]; 20%, 60%: [object Object]; 40%, 80%: [object Object]; } 
+
+`;
+
+export const AnimatedOtp = (props) => {
+  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>`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AnimatedOtp">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/AnimatedTextfield.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * Animated TextField
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.input-group { position: relative; margin-top: 20px; } 
+.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; } 
+.input-anim:focus { border-color: #6200ea; } 
+.label-anim { position: absolute; top: 10px; left: 0; color: #999; pointer-events: none; transition: 0.3s ease all; } 
+.input-anim:focus ~ .label-anim, .input-anim:not(:placeholder-shown) ~ .label-anim { top: -20px; font-size: 12px; color: #6200ea; } 
+
+`;
+
+export const AnimatedTextfield = ({ label = "Username", ...rest }) => {
+  let html = `
+<div class="input-group">
+  <input type="text" class="input-anim" placeholder=" " />
+  <label class="label-anim">{{label}}</label>
+</div>
+        `;
+
+  // Inject props
+  html = html.replaceAll('{{label}}', label);
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-AnimatedTextfield">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/FancyButton.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * fancy button
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.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); } 
+.btn-anim:hover { transform: scale(1.05); box-shadow: 0 3px 15px 2px rgba(255, 105, 135, .5); } 
+.btn-anim:active { transform: scale(0.95); } 
+
+`;
+
+export const FancyButton = ({ label = "yo yes", ...rest }) => {
+  let html = `<button class="btn-anim">{{label}}</button>`;
+
+  // Inject props
+  html = html.replaceAll('{{label}}', label);
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-FancyButton">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/NormalFooter.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+/**
+ * Normal Footer
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.footer { display: flex; justify-content: space-around; padding: 40px 20px; background: #f8f9fa; color: #333; border-top: 1px solid #eee; } 
+.col { display: flex; flex-direction: column; gap: 10px; } 
+h4 { margin: 0 0 10px 0; } 
+a { text-decoration: none; color: #666; } 
+a:hover { color: #000; } 
+
+`;
+
+export const NormalFooter = (props) => {
+  let html = `
+<footer class="footer">
+  <div class="col">
+    <h4>Brand</h4>
+    <p>© 2024 All rights reserved.</p>
+  </div>
+  <div class="col">
+    <h4>Links</h4>
+    <a href="#">Home</a>
+    <a href="#">About</a>
+    <a href="#">Contact</a>
+  </div>
+  <div class="col">
+    <h4>Social</h4>
+    <a href="#">Twitter</a>
+    <a href="#">GitHub</a>
+  </div>
+</footer>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-NormalFooter">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/NormalOtp.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * Normal OTP
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.otp-group { display: flex; gap: 10px; } 
+input { width: 40px; height: 40px; text-align: center; font-size: 18px; border: 1px solid #ccc; border-radius: 4px; } 
+
+`;
+
+export const NormalOtp = (props) => {
+  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>`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-NormalOtp">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

package/src/Testing.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * testing
+ * Generated from Sudarshana DB
+ */
+
+const styles = `
+.brut-nav { display: flex; flex-direction: column; border: 1px solid #fff; width: 220px; background: #712; } 
+.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; } 
+.brut-link:last-child { border-bottom: none; } 
+.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; } 
+.brut-link:hover { color: #000; padding-left: 34px; } 
+.brut-link:hover::before { transform: translateX(0); } 
+.brut-link:active { opacity: 0.8; } 
+.brut-link span { font-family: monospace; opacity: 0.5; transition: opacity 0.3s; } 
+.brut-link:hover span { opacity: 1; } 
+
+`;
+
+export const Testing = (props) => {
+  let html = `
+<nav class="brut-nav">
+  <a href="#" class="brut-link"><span>01</span> WORK</a>
+  <a href="#" class="brut-link"><span>02</span> STUDIO</a>
+  <a href="#" class="brut-link"><span>03</span> CONTACT</a>
+</nav>
+`;
+
+  // Inject props
+  
+
+  return (
+    <div {...(propsList.length === 0 ? props : rest)} className="sudarshana-component-Testing">
+      <style>{styles}</style>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};