telecop 0.1.25 → 0.1.27

package/dist/components/Cards/FeatureCard.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export interface FeatureCardProps {
-    icon?: React.ReactNode | string;
+    icon?: string;
     title: string;
     description: string;
     variant?: 'solid' | 'glass' | 'gradient' | 'outlined';

package/dist/components/Cards/StatCard.d.ts

@@ -1,3 +1,12 @@
 import { default as React } from 'react';
-import { StatCardProps } from './types';
+export interface StatCardProps {
+    icon?: string;
+    label: string;
+    value: string | number;
+    change?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    variant?: 'solid' | 'glass' | 'gradient' | 'outlined';
+    theme?: 'blue' | 'purple' | 'green' | 'red' | 'pink' | 'orange';
+    className?: string;
+}
 export declare const StatCard: React.FC<StatCardProps>;

package/dist/components/Cards/types.d.ts

@@ -1,13 +1,12 @@
 export type CardVariant = 'solid' | 'glass' | 'gradient' | 'outlined';
 export interface FeatureCardProps {
-    icon?: React.ReactNode | string;
+    icon?: string;
     title: string;
     description: string;
     variant?: CardVariant;
     theme?: 'blue' | 'purple' | 'green' | 'red' | 'pink' | 'orange';
     hoverable?: boolean;
     className?: string;
-    onClick?: () => void;
 }
 export interface ProductCardProps {
     image: string;
@@ -17,46 +16,11 @@ export interface ProductCardProps {
     oldPrice?: string | number;
     badge?: string;
     variant?: CardVariant;
-    onAddToCart?: () => void;
-    className?: string;
-}
-export interface ProfileCardProps {
-    avatar: string;
-    name: string;
-    role: string;
-    description?: string;
-    stats?: Array<{
-        label: string;
-        value: string | number;
-    }>;
-    variant?: CardVariant;
-    className?: string;
-}
-export interface PricingCardProps {
-    title: string;
-    price: string | number;
-    period?: string;
-    features: string[];
-    featured?: boolean;
-    buttonText?: string;
-    onSelect?: () => void;
-    variant?: CardVariant;
-    className?: string;
-}
-export interface BlogCardProps {
-    image: string;
-    title: string;
-    excerpt: string;
-    author?: string;
-    date?: string;
-    readTime?: string;
-    category?: string;
-    variant?: CardVariant;
-    onClick?: () => void;
+    children?: React.ReactNode;
     className?: string;
 }
 export interface StatCardProps {
-    icon?: React.ReactNode | string;
+    icon?: string;
     label: string;
     value: string | number;
     change?: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("react"),j=({children:e,variant:r="primary",size:d="md",onClick:n,disabled:t=!1,className:l=""})=>{const s="font-semibold rounded-lg transition-all duration-200 cursor-pointer",o={primary:"bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg",secondary:"bg-gray-600 hover:bg-gray-700 text-white shadow-md hover:shadow-lg",danger:"bg-red-600 hover:bg-red-700 text-white shadow-md hover:shadow-lg"},i={sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-6 py-3 text-lg"},g=t?"opacity-50 cursor-not-allowed":"";return a.jsx("button",{className:`${s} ${o[r]} ${i[d]} ${g} ${l}`,onClick:n,disabled:t,children:e})},m=({children:e,variant:r="blur",size:d="md",onClick:n,disabled:t=!1,className:l=""})=>{const[s,o]=v.useState([]),i=b=>{if(!t&&n){const x=b.currentTarget.getBoundingClientRect(),h=b.clientX-x.left,w=b.clientY-x.top,f=Date.now();o([...s,{x:h,y:w,id:f}]),setTimeout(()=>{o(y=>y.filter(k=>k.id!==f))},800),n()}},g=`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("react"),j=({children:r,variant:e="primary",size:d="md",onClick:n,disabled:t=!1,className:l=""})=>{const s="font-semibold rounded-lg transition-all duration-200 cursor-pointer",o={primary:"bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg",secondary:"bg-gray-600 hover:bg-gray-700 text-white shadow-md hover:shadow-lg",danger:"bg-red-600 hover:bg-red-700 text-white shadow-md hover:shadow-lg"},i={sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-6 py-3 text-lg"},b=t?"opacity-50 cursor-not-allowed":"";return a.jsx("button",{className:`${s} ${o[e]} ${i[d]} ${b} ${l}`,onClick:n,disabled:t,children:r})},m=({children:r,variant:e="blur",size:d="md",onClick:n,disabled:t=!1,className:l=""})=>{const[s,o]=v.useState([]),i=g=>{if(!t&&n){const x=g.currentTarget.getBoundingClientRect(),h=g.clientX-x.left,w=g.clientY-x.top,f=Date.now();o([...s,{x:h,y:w,id:f}]),setTimeout(()=>{o(y=>y.filter(k=>k.id!==f))},800),n()}},b=`
     relative overflow-hidden
     backdrop-blur-xl
     border border-white/30
@@ -8,7 +8,7 @@
     cursor-pointer
     shadow-xl
     group
-  `,p={sm:"px-5 py-2.5 text-sm",md:"px-7 py-3.5 text-base",lg:"px-9 py-4.5 text-lg"},c={blur:`
+  `,p={sm:"px-5 py-2.5 text-sm",md:"px-7 py-3.5 text-base",lg:"px-9 py-4.5 text-lg"},u={blur:`
       bg-white/5
       hover:bg-white/15
       hover:border-white/50
@@ -31,7 +31,7 @@
       before:translate-x-[-200%] 
       hover:before:translate-x-[200%]
       before:transition-transform before:duration-1000
-    `},u=t?"opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl":"";return a.jsxs("button",{className:`${g} ${p[d]} ${c[r]} ${u} ${l}`,onClick:i,disabled:t,children:[r==="waves"&&!t&&a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"}),a.jsx("span",{className:"absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse"})]}),r==="blur"&&!t&&a.jsx("span",{className:"absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"}),a.jsx("span",{className:"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",children:a.jsx("span",{className:"absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer"})}),s.map(b=>a.jsx("span",{className:"absolute rounded-full bg-white/30 pointer-events-none animate-ripple",style:{left:b.x,top:b.y,width:"20px",height:"20px",transform:"translate(-50%, -50%)"}},b.id)),a.jsx("span",{className:"relative z-10 drop-shadow-lg",children:e})]})},N=({name:e,title:r,description:d="Welcome to my portfolio",primaryButtonText:n="Get Started",primaryButtonLink:t,primaryButtonOnClick:l,secondaryButtonText:s="Learn More",secondaryButtonLink:o,secondaryButtonOnClick:i,backgroundGradient:g="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",animationType:p,className:c=""})=>{const u=()=>{t?window.location.href=t:l&&l()},b=()=>{o?window.location.href=o:i&&i()},x=t?a.jsx("a",{href:t,style:{textDecoration:"none"},children:a.jsx(m,{variant:"waves",size:"lg",children:n})}):a.jsx(m,{variant:"waves",size:"lg",onClick:l||u,children:n}),h=o?a.jsx("a",{href:o,style:{textDecoration:"none"},children:a.jsx(m,{variant:"blur",size:"lg",children:s})}):a.jsx(m,{variant:"blur",size:"lg",onClick:i||b,children:s});return a.jsx("div",{className:p?`animate-gradient-${p}`:"",style:{background:g,minHeight:"100vh"},children:a.jsx("div",{className:`min-h-screen flex items-center justify-center p-8 ${c}`,children:a.jsxs("div",{className:"max-w-4xl w-full text-center space-y-8",children:[a.jsx("h1",{className:"text-6xl md:text-8xl font-bold text-white mb-4",style:{textShadow:"0 0 40px rgba(0,0,0,0.3)",animation:"fadeInUp 0.8s ease-out"},children:e}),a.jsx("h2",{className:"text-3xl md:text-5xl font-semibold text-white/90",style:{textShadow:"0 0 30px rgba(0,0,0,0.2)",animation:"fadeInUp 1s ease-out 0.2s backwards"},children:r}),a.jsx("p",{className:"text-xl md:text-2xl text-white/80 max-w-2xl mx-auto",style:{textShadow:"0 0 20px rgba(0,0,0,0.2)",animation:"fadeInUp 1.2s ease-out 0.4s backwards"},children:d}),a.jsxs("div",{className:"flex flex-wrap gap-6 justify-center mt-12",style:{animation:"fadeInUp 1.4s ease-out 0.6s backwards"},children:[x,h]}),a.jsx("div",{className:"mt-16 mx-auto w-32 h-1 rounded-full",style:{background:"linear-gradient(90deg, transparent, white, transparent)",animation:"fadeIn 2s ease-out 1s backwards"}})]})})})},C=[{id:"glass-morphism",name:"Glass Morphism",gradient:`
+    `},c=t?"opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl":"";return a.jsxs("button",{className:`${b} ${p[d]} ${u[e]} ${c} ${l}`,onClick:i,disabled:t,children:[e==="waves"&&!t&&a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700"}),a.jsx("span",{className:"absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse"})]}),e==="blur"&&!t&&a.jsx("span",{className:"absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"}),a.jsx("span",{className:"absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none",children:a.jsx("span",{className:"absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer"})}),s.map(g=>a.jsx("span",{className:"absolute rounded-full bg-white/30 pointer-events-none animate-ripple",style:{left:g.x,top:g.y,width:"20px",height:"20px",transform:"translate(-50%, -50%)"}},g.id)),a.jsx("span",{className:"relative z-10 drop-shadow-lg",children:r})]})},N=({name:r,title:e,description:d="Welcome to my portfolio",primaryButtonText:n="Get Started",primaryButtonLink:t,primaryButtonOnClick:l,secondaryButtonText:s="Learn More",secondaryButtonLink:o,secondaryButtonOnClick:i,backgroundGradient:b="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",animationType:p,className:u=""})=>{const c=()=>{t?window.location.href=t:l&&l()},g=()=>{o?window.location.href=o:i&&i()},x=t?a.jsx("a",{href:t,style:{textDecoration:"none"},children:a.jsx(m,{variant:"waves",size:"lg",children:n})}):a.jsx(m,{variant:"waves",size:"lg",onClick:l||c,children:n}),h=o?a.jsx("a",{href:o,style:{textDecoration:"none"},children:a.jsx(m,{variant:"blur",size:"lg",children:s})}):a.jsx(m,{variant:"blur",size:"lg",onClick:i||g,children:s});return a.jsx("div",{className:p?`animate-gradient-${p}`:"",style:{background:b,minHeight:"100vh"},children:a.jsx("div",{className:`min-h-screen flex items-center justify-center p-8 ${u}`,children:a.jsxs("div",{className:"max-w-4xl w-full text-center space-y-8",children:[a.jsx("h1",{className:"text-6xl md:text-8xl font-bold text-white mb-4",style:{textShadow:"0 0 40px rgba(0,0,0,0.3)",animation:"fadeInUp 0.8s ease-out"},children:r}),a.jsx("h2",{className:"text-3xl md:text-5xl font-semibold text-white/90",style:{textShadow:"0 0 30px rgba(0,0,0,0.2)",animation:"fadeInUp 1s ease-out 0.2s backwards"},children:e}),a.jsx("p",{className:"text-xl md:text-2xl text-white/80 max-w-2xl mx-auto",style:{textShadow:"0 0 20px rgba(0,0,0,0.2)",animation:"fadeInUp 1.2s ease-out 0.4s backwards"},children:d}),a.jsxs("div",{className:"flex flex-wrap gap-6 justify-center mt-12",style:{animation:"fadeInUp 1.4s ease-out 0.6s backwards"},children:[x,h]}),a.jsx("div",{className:"mt-16 mx-auto w-32 h-1 rounded-full",style:{background:"linear-gradient(90deg, transparent, white, transparent)",animation:"fadeIn 2s ease-out 1s backwards"}})]})})})},C=[{id:"glass-morphism",name:"Glass Morphism",gradient:`
       radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
       radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
       radial-gradient(circle at 40% 90%, rgba(88, 166, 255, 0.3), transparent 50%),
@@ -205,7 +205,7 @@
       radial-gradient(circle at 25% 75%, rgba(185, 28, 28, 0.6), transparent 35%),
       radial-gradient(circle at 75% 80%, rgba(239, 68, 68, 0.5), transparent 40%),
       linear-gradient(135deg, #0f0000 0%, #1a0505 50%, #0f0000 100%)
-    `,category:"premium",animation:"flow"},{id:"purple-dark",name:"Purple Dark",gradient:"linear-gradient(147deg, #000000 0%, #8d45d5 187%)",category:"dark"},{id:"red-fire",name:"Red Fire",gradient:"linear-gradient(308deg, #a70b0b 0%, #000000 75%)",category:"dark"},{id:"green-emerald",name:"Green Emerald",gradient:"linear-gradient(308deg, #0ba769 0%, #000000 75%)",category:"dark"},{id:"blue-ocean",name:"Blue Ocean",gradient:"linear-gradient(308deg, #0b32a7 0%, #000000 67%)",category:"dark"},{id:"purple-magic",name:"Purple Magic",gradient:"linear-gradient(308deg, #960ba7 0%, #000000 67%)",category:"dark"},{id:"green-forest",name:"Green Forest",gradient:"linear-gradient(308deg, #3da70b 0%, #000000 67%)",category:"dark"},{id:"pink-rose",name:"Pink Rose",gradient:"linear-gradient(308deg, #a70b7e 0%, #000000 67%)",category:"dark"},{id:"red-crimson",name:"Red Crimson",gradient:"linear-gradient(308deg, #a70b0b 0%, #000000 67%)",category:"dark"},{id:"yellow-gold",name:"Yellow Gold",gradient:"linear-gradient(308deg, #a5a70b 0%, #000000 67%)",category:"dark"},{id:"red-center",name:"Red Center",gradient:"linear-gradient(322deg, #000000 23%, #a70b0b 54%, #000000 73%)",category:"mixed"},{id:"blue-center",name:"Blue Center",gradient:"linear-gradient(322deg, #000000 23%, #120ba7 54%, #000000 73%)",category:"mixed"},{id:"gray-steel",name:"Gray Steel",gradient:"linear-gradient(322deg, #000000 23%, #34334d 54%, #000000 73%)",category:"mixed"},{id:"blue-bright",name:"Blue Bright",gradient:"linear-gradient(322deg, #000000 23%, #52a9ff 54%, #000000 73%)",category:"colorful"},{id:"red-fire-flow",name:"Red Fire Flow",gradient:"linear-gradient(308deg, #a70b0b 0%, #ff6b6b 50%, #000000 75%)",category:"animated",animation:"flow"},{id:"blue-wave",name:"Blue Wave",gradient:"linear-gradient(308deg, #0b32a7 0%, #52a9ff 50%, #000000 67%)",category:"animated",animation:"wave"},{id:"purple-shift",name:"Purple Shift",gradient:"linear-gradient(308deg, #960ba7 0%, #e100ff 50%, #000000 67%)",category:"animated",animation:"shift"},{id:"green-pulse",name:"Green Pulse",gradient:"linear-gradient(308deg, #3da70b 0%, #a8e063 50%, #000000 67%)",category:"animated",animation:"pulse"},{id:"pink-rotate",name:"Pink Rotate",gradient:"linear-gradient(308deg, #a70b7e 0%, #ff6ec7 50%, #000000 67%)",category:"animated",animation:"rotate"},{id:"gold-zoom",name:"Gold Zoom",gradient:"linear-gradient(308deg, #a5a70b 0%, #f6d365 50%, #000000 67%)",category:"animated",animation:"zoom"}],G=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),P=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),S=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),B=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),$=({children:e="Pill Button",onClick:r})=>a.jsx("button",{onClick:r,className:"px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:e}),_=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50",children:e}),M=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50",children:e}),D=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50",children:e}),R=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50",children:e}),z=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50",children:e}),A=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20",children:e}),I=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20",children:e}),F=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20",children:e}),E=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20",children:e}),O=({children:e="Shimmer Effect",onClick:r})=>a.jsxs("button",{onClick:r,className:"relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105",children:[a.jsx("span",{className:"relative z-10",children:e}),a.jsx("span",{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"})]}),H=({children:e="Pulse Button",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105",children:e}),q=({children:e="Bounce Button",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce",children:e}),W=({children:e="Glow Effect",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105",children:e}),U=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105",children:e}),T=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105",children:e}),Y=({children:e="Gradient Border",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105",style:{borderImage:"linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1"},children:e}),V=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105",children:e}),X=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105",children:e}),Z=({children:e="Click Me",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105",children:e}),J=({children:e="3D Button",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150",children:e}),K=({children:e="3D Button",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150",children:e}),Q=({children:e="3D Button",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150",children:e}),L=({children:e="Neon Blue",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105",children:e}),ee=({children:e="Neon Pink",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105",children:e}),ae=({children:e="Neon Green",onClick:r})=>a.jsx("button",{onClick:r,className:"px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105",children:e}),re={"glass-morphism":`
+    `,category:"premium",animation:"flow"},{id:"purple-dark",name:"Purple Dark",gradient:"linear-gradient(147deg, #000000 0%, #8d45d5 187%)",category:"dark"},{id:"red-fire",name:"Red Fire",gradient:"linear-gradient(308deg, #a70b0b 0%, #000000 75%)",category:"dark"},{id:"green-emerald",name:"Green Emerald",gradient:"linear-gradient(308deg, #0ba769 0%, #000000 75%)",category:"dark"},{id:"blue-ocean",name:"Blue Ocean",gradient:"linear-gradient(308deg, #0b32a7 0%, #000000 67%)",category:"dark"},{id:"purple-magic",name:"Purple Magic",gradient:"linear-gradient(308deg, #960ba7 0%, #000000 67%)",category:"dark"},{id:"green-forest",name:"Green Forest",gradient:"linear-gradient(308deg, #3da70b 0%, #000000 67%)",category:"dark"},{id:"pink-rose",name:"Pink Rose",gradient:"linear-gradient(308deg, #a70b7e 0%, #000000 67%)",category:"dark"},{id:"red-crimson",name:"Red Crimson",gradient:"linear-gradient(308deg, #a70b0b 0%, #000000 67%)",category:"dark"},{id:"yellow-gold",name:"Yellow Gold",gradient:"linear-gradient(308deg, #a5a70b 0%, #000000 67%)",category:"dark"},{id:"red-center",name:"Red Center",gradient:"linear-gradient(322deg, #000000 23%, #a70b0b 54%, #000000 73%)",category:"mixed"},{id:"blue-center",name:"Blue Center",gradient:"linear-gradient(322deg, #000000 23%, #120ba7 54%, #000000 73%)",category:"mixed"},{id:"gray-steel",name:"Gray Steel",gradient:"linear-gradient(322deg, #000000 23%, #34334d 54%, #000000 73%)",category:"mixed"},{id:"blue-bright",name:"Blue Bright",gradient:"linear-gradient(322deg, #000000 23%, #52a9ff 54%, #000000 73%)",category:"colorful"},{id:"red-fire-flow",name:"Red Fire Flow",gradient:"linear-gradient(308deg, #a70b0b 0%, #ff6b6b 50%, #000000 75%)",category:"animated",animation:"flow"},{id:"blue-wave",name:"Blue Wave",gradient:"linear-gradient(308deg, #0b32a7 0%, #52a9ff 50%, #000000 67%)",category:"animated",animation:"wave"},{id:"purple-shift",name:"Purple Shift",gradient:"linear-gradient(308deg, #960ba7 0%, #e100ff 50%, #000000 67%)",category:"animated",animation:"shift"},{id:"green-pulse",name:"Green Pulse",gradient:"linear-gradient(308deg, #3da70b 0%, #a8e063 50%, #000000 67%)",category:"animated",animation:"pulse"},{id:"pink-rotate",name:"Pink Rotate",gradient:"linear-gradient(308deg, #a70b7e 0%, #ff6ec7 50%, #000000 67%)",category:"animated",animation:"rotate"},{id:"gold-zoom",name:"Gold Zoom",gradient:"linear-gradient(308deg, #a5a70b 0%, #f6d365 50%, #000000 67%)",category:"animated",animation:"zoom"}],G=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:r}),P=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:r}),S=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:r}),B=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:r}),$=({children:r="Pill Button",onClick:e})=>a.jsx("button",{onClick:e,className:"px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl",children:r}),_=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50",children:r}),M=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50",children:r}),D=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50",children:r}),R=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50",children:r}),z=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50",children:r}),A=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20",children:r}),I=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20",children:r}),F=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20",children:r}),E=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20",children:r}),O=({children:r="Shimmer Effect",onClick:e})=>a.jsxs("button",{onClick:e,className:"relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105",children:[a.jsx("span",{className:"relative z-10",children:r}),a.jsx("span",{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"})]}),H=({children:r="Pulse Button",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105",children:r}),q=({children:r="Bounce Button",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce",children:r}),W=({children:r="Glow Effect",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105",children:r}),U=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105",children:r}),T=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105",children:r}),Y=({children:r="Gradient Border",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105",style:{borderImage:"linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1"},children:r}),V=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105",children:r}),X=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105",children:r}),Z=({children:r="Click Me",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105",children:r}),J=({children:r="3D Button",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150",children:r}),K=({children:r="3D Button",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150",children:r}),Q=({children:r="3D Button",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150",children:r}),L=({children:r="Neon Blue",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105",children:r}),ee=({children:r="Neon Pink",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105",children:r}),ae=({children:r="Neon Green",onClick:e})=>a.jsx("button",{onClick:e,className:"px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105",children:r}),re={"glass-morphism":`
     radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
     radial-gradient(circle at 40% 90%, rgba(88, 166, 255, 0.3), transparent 50%),
@@ -225,15 +225,15 @@
     radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.4), transparent 25%),
     radial-gradient(circle at 80% 85%, rgba(138, 43, 226, 0.3), transparent 25%),
     linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%)
-  `,none:"transparent"},te=({children:e,layout:r="center",size:d="lg",theme:n="none",padding:t=!0,gap:l="md",className:s=""})=>{const o={sm:"max-w-3xl",md:"max-w-5xl",lg:"max-w-7xl",xl:"max-w-[1400px]",full:"max-w-full"}[d],i={sm:"gap-4",md:"gap-8",lg:"gap-12"}[l],g={"image-right":`grid md:grid-cols-2 ${i} items-center`,"image-left":`grid md:grid-cols-2 ${i} items-center`,"button-right":`grid md:grid-cols-2 ${i} items-center`,"button-left":`grid md:grid-cols-2 ${i} items-center`,center:"flex flex-col items-center justify-center text-center","two-columns":`grid md:grid-cols-2 ${i}`,"three-columns":`grid md:grid-cols-3 ${i}`}[r],p=t?"px-6 py-8":"",c=n!=="none"?{background:re[n],backgroundSize:"200% 200%"}:{},u=v.Children.toArray(e);let b=u;return(r==="image-left"||r==="button-left")&&(b=u.reverse()),a.jsx("div",{className:`${o} mx-auto ${p} ${s}`,style:c,children:a.jsx("div",{className:g,children:b})})},ne=({src:e,alt:r,className:d="",width:n,height:t})=>a.jsx("div",{className:`w-full ${d}`,children:a.jsx("img",{src:e,alt:r,width:n,height:t,className:"w-full h-auto rounded-2xl shadow-2xl object-cover"})}),ie=({children:e,className:r=""})=>a.jsx("div",{className:`space-y-4 ${r}`,children:e}),de=({children:e,className:r=""})=>a.jsx("div",{className:`flex gap-4 ${r}`,children:e}),le=({icon:e,title:r,description:d,variant:n="solid",theme:t="blue",hoverable:l=!0,className:s=""})=>{const i=`
+  `,none:"transparent"},te=({children:r,layout:e="center",size:d="lg",theme:n="none",padding:t=!0,gap:l="md",className:s=""})=>{const o={sm:"max-w-3xl",md:"max-w-5xl",lg:"max-w-7xl",xl:"max-w-[1400px]",full:"max-w-full"}[d],i={sm:"gap-4",md:"gap-8",lg:"gap-12"}[l],b={"image-right":`grid md:grid-cols-2 ${i} items-center`,"image-left":`grid md:grid-cols-2 ${i} items-center`,"button-right":`grid md:grid-cols-2 ${i} items-center`,"button-left":`grid md:grid-cols-2 ${i} items-center`,center:"flex flex-col items-center justify-center text-center","two-columns":`grid md:grid-cols-2 ${i}`,"three-columns":`grid md:grid-cols-3 ${i}`}[e],p=t?"px-6 py-8":"",u=n!=="none"?{background:re[n],backgroundSize:"200% 200%"}:{},c=v.Children.toArray(r);let g=c;return(e==="image-left"||e==="button-left")&&(g=c.reverse()),a.jsx("div",{className:`${o} mx-auto ${p} ${s}`,style:u,children:a.jsx("div",{className:b,children:g})})},ne=({src:r,alt:e,className:d="",width:n,height:t})=>a.jsx("div",{className:`w-full ${d}`,children:a.jsx("img",{src:r,alt:e,width:n,height:t,className:"w-full h-auto rounded-2xl shadow-2xl object-cover"})}),ie=({children:r,className:e=""})=>a.jsx("div",{className:`space-y-4 ${e}`,children:r}),de=({children:r,className:e=""})=>a.jsx("div",{className:`flex gap-4 ${e}`,children:r}),le=({icon:r,title:e,description:d,variant:n="solid",theme:t="blue",hoverable:l=!0,className:s=""})=>{const i=`
     rounded-2xl p-6
     transition-all duration-300
     ${l?"hover:scale-105 hover:shadow-2xl":""}
     ${{blue:{solid:"bg-blue-600 text-white",glass:"bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 text-white",gradient:"bg-gradient-to-br from-blue-600 to-blue-800 text-white",outlined:"bg-transparent border-2 border-blue-500 text-blue-500"},purple:{solid:"bg-purple-600 text-white",glass:"bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 text-white",gradient:"bg-gradient-to-br from-purple-600 to-pink-600 text-white",outlined:"bg-transparent border-2 border-purple-500 text-purple-500"},green:{solid:"bg-green-600 text-white",glass:"bg-green-500/20 backdrop-blur-xl border border-green-400/30 text-white",gradient:"bg-gradient-to-br from-green-600 to-emerald-600 text-white",outlined:"bg-transparent border-2 border-green-500 text-green-500"},red:{solid:"bg-red-600 text-white",glass:"bg-red-500/20 backdrop-blur-xl border border-red-400/30 text-white",gradient:"bg-gradient-to-br from-red-600 to-orange-600 text-white",outlined:"bg-transparent border-2 border-red-500 text-red-500"},pink:{solid:"bg-pink-600 text-white",glass:"bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 text-white",gradient:"bg-gradient-to-br from-pink-600 to-rose-600 text-white",outlined:"bg-transparent border-2 border-pink-500 text-pink-500"},orange:{solid:"bg-orange-600 text-white",glass:"bg-orange-500/20 backdrop-blur-xl border border-orange-400/30 text-white",gradient:"bg-gradient-to-br from-orange-600 to-red-600 text-white",outlined:"bg-transparent border-2 border-orange-500 text-orange-500"}}[t][n]}
     ${s}
-  `,g=()=>e?typeof e=="string"?a.jsx("div",{className:"text-4xl mb-4",children:e}):a.jsx("div",{className:"mb-4",children:e}):null;return a.jsxs("div",{className:i,children:[g(),a.jsx("h3",{className:"text-xl font-bold mb-2",children:r}),a.jsx("p",{className:`text-sm ${n==="outlined"?"text-gray-600":"opacity-90"}`,children:d})]})},oe=({image:e,title:r,description:d,price:n,oldPrice:t,badge:l,variant:s="solid",children:o,className:i=""})=>{const g={solid:"bg-gray-900 border border-gray-800",glass:"bg-white/5 backdrop-blur-xl border border-white/10",gradient:"bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700",outlined:"bg-transparent border-2 border-gray-700"};return a.jsxs("div",{className:`rounded-2xl overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl ${g[s]} ${i}`,children:[a.jsxs("div",{className:"relative",children:[a.jsx("img",{src:e,alt:r,className:"w-full h-48 object-cover"}),l&&a.jsx("span",{className:"absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full",children:l})]}),a.jsxs("div",{className:"p-5 space-y-3",children:[a.jsx("h3",{className:"text-xl font-bold text-white",children:r}),d&&a.jsx("p",{className:"text-gray-400 text-sm",children:d}),a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsxs("span",{className:"text-2xl font-bold text-white",children:["$",n]}),t&&a.jsxs("span",{className:"text-sm text-gray-500 line-through",children:["$",t]})]}),o]})]})},se=({icon:e,label:r,value:d,change:n,trend:t="neutral",variant:l="solid",theme:s="blue",className:o=""})=>{const i={blue:{solid:"bg-blue-600/10 border-blue-500/20",glass:"bg-blue-500/20 backdrop-blur-xl border-blue-400/30",gradient:"bg-gradient-to-br from-blue-600/20 to-blue-800/20 border-blue-500/30",outlined:"bg-transparent border-2 border-blue-500"},purple:{solid:"bg-purple-600/10 border-purple-500/20",glass:"bg-purple-500/20 backdrop-blur-xl border-purple-400/30",gradient:"bg-gradient-to-br from-purple-600/20 to-pink-600/20 border-purple-500/30",outlined:"bg-transparent border-2 border-purple-500"},green:{solid:"bg-green-600/10 border-green-500/20",glass:"bg-green-500/20 backdrop-blur-xl border-green-400/30",gradient:"bg-gradient-to-br from-green-600/20 to-emerald-600/20 border-green-500/30",outlined:"bg-transparent border-2 border-green-500"},red:{solid:"bg-red-600/10 border-red-500/20",glass:"bg-red-500/20 backdrop-blur-xl border-red-400/30",gradient:"bg-gradient-to-br from-red-600/20 to-orange-600/20 border-red-500/30",outlined:"bg-transparent border-2 border-red-500"},pink:{solid:"bg-pink-600/10 border-pink-500/20",glass:"bg-pink-500/20 backdrop-blur-xl border-pink-400/30",gradient:"bg-gradient-to-br from-pink-600/20 to-rose-600/20 border-pink-500/30",outlined:"bg-transparent border-2 border-pink-500"},orange:{solid:"bg-orange-600/10 border-orange-500/20",glass:"bg-orange-500/20 backdrop-blur-xl border-orange-400/30",gradient:"bg-gradient-to-br from-orange-600/20 to-red-600/20 border-orange-500/30",outlined:"bg-transparent border-2 border-orange-500"}},g={up:"text-green-400",down:"text-red-400",neutral:"text-gray-400"},p={up:"↑",down:"↓",neutral:"→"},c=()=>e?typeof e=="string"?a.jsx("div",{className:"text-3xl",children:e}):a.jsx("div",{children:e}):null;return a.jsxs("div",{className:`
+  `;return a.jsxs("div",{className:i,children:[r&&a.jsx("div",{className:"text-4xl mb-4",children:r}),a.jsx("h3",{className:"text-xl font-bold mb-2",children:e}),a.jsx("p",{className:`text-sm ${n==="outlined"?"text-gray-600":"opacity-90"}`,children:d})]})},oe=({image:r,title:e,description:d,price:n,oldPrice:t,badge:l,variant:s="solid",children:o,className:i=""})=>{const b={solid:"bg-gray-900 border border-gray-800",glass:"bg-white/5 backdrop-blur-xl border border-white/10",gradient:"bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700",outlined:"bg-transparent border-2 border-gray-700"};return a.jsxs("div",{className:`rounded-2xl overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl ${b[s]} ${i}`,children:[a.jsxs("div",{className:"relative",children:[a.jsx("img",{src:r,alt:e,className:"w-full h-48 object-cover"}),l&&a.jsx("span",{className:"absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full",children:l})]}),a.jsxs("div",{className:"p-5 space-y-3",children:[a.jsx("h3",{className:"text-xl font-bold text-white",children:e}),d&&a.jsx("p",{className:"text-gray-400 text-sm",children:d}),a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsxs("span",{className:"text-2xl font-bold text-white",children:["$",n]}),t&&a.jsxs("span",{className:"text-sm text-gray-500 line-through",children:["$",t]})]}),o]})]})},se=({icon:r,label:e,value:d,change:n,trend:t="neutral",variant:l="solid",theme:s="blue",className:o=""})=>{const i={blue:{solid:"bg-blue-600/10 border-blue-500/20",glass:"bg-blue-500/20 backdrop-blur-xl border-blue-400/30",gradient:"bg-gradient-to-br from-blue-600/20 to-blue-800/20 border-blue-500/30",outlined:"bg-transparent border-2 border-blue-500"},purple:{solid:"bg-purple-600/10 border-purple-500/20",glass:"bg-purple-500/20 backdrop-blur-xl border-purple-400/30",gradient:"bg-gradient-to-br from-purple-600/20 to-pink-600/20 border-purple-500/30",outlined:"bg-transparent border-2 border-purple-500"},green:{solid:"bg-green-600/10 border-green-500/20",glass:"bg-green-500/20 backdrop-blur-xl border-green-400/30",gradient:"bg-gradient-to-br from-green-600/20 to-emerald-600/20 border-green-500/30",outlined:"bg-transparent border-2 border-green-500"},red:{solid:"bg-red-600/10 border-red-500/20",glass:"bg-red-500/20 backdrop-blur-xl border-red-400/30",gradient:"bg-gradient-to-br from-red-600/20 to-orange-600/20 border-red-500/30",outlined:"bg-transparent border-2 border-red-500"},pink:{solid:"bg-pink-600/10 border-pink-500/20",glass:"bg-pink-500/20 backdrop-blur-xl border-pink-400/30",gradient:"bg-gradient-to-br from-pink-600/20 to-rose-600/20 border-pink-500/30",outlined:"bg-transparent border-2 border-pink-500"},orange:{solid:"bg-orange-600/10 border-orange-500/20",glass:"bg-orange-500/20 backdrop-blur-xl border-orange-400/30",gradient:"bg-gradient-to-br from-orange-600/20 to-red-600/20 border-orange-500/30",outlined:"bg-transparent border-2 border-orange-500"}},b={up:"text-green-400",down:"text-red-400",neutral:"text-gray-400"},p={up:"↑",down:"↓",neutral:"→"};return a.jsxs("div",{className:`
       rounded-2xl p-6 border
       transition-all duration-300 hover:scale-105 hover:shadow-xl
       ${i[s][l]}
       ${o}
-    `,children:[a.jsxs("div",{className:"flex items-start justify-between mb-4",children:[c(),n&&a.jsxs("span",{className:`text-sm font-semibold ${g[t]}`,children:[p[t]," ",n]})]}),a.jsx("p",{className:"text-gray-400 text-sm mb-1",children:r}),a.jsx("p",{className:"text-3xl font-bold text-white",children:d})]})};exports.AnimatedBounce=q;exports.AnimatedGlow=W;exports.AnimatedPulse=H;exports.AnimatedShimmer=O;exports.Button=j;exports.Button3DBlue=J;exports.Button3DGreen=Q;exports.Button3DPink=K;exports.Container=te;exports.ContainerButton=de;exports.ContainerContent=ie;exports.ContainerImage=ne;exports.FeatureCard=le;exports.GhostBlue=V;exports.GhostPurple=Z;exports.GhostRed=X;exports.GlassBlue=A;exports.GlassButton=m;exports.GlassPink=E;exports.GlassPurple=I;exports.GlassWhite=F;exports.GradientBlueGreen=M;exports.GradientCyan=R;exports.GradientOrangeRed=D;exports.GradientPurplePink=_;exports.GradientSunset=z;exports.Home=N;exports.NeonBlue=L;exports.NeonGreen=ae;exports.NeonPink=ee;exports.OutlinedBlue=U;exports.OutlinedGradient=Y;exports.OutlinedPurple=T;exports.ProductCard=oe;exports.SolidBlue=G;exports.SolidGreen=S;exports.SolidPill=$;exports.SolidPurple=B;exports.SolidRed=P;exports.StatCard=se;exports.gradients=C;
+    `,children:[a.jsxs("div",{className:"flex items-start justify-between mb-4",children:[r&&a.jsx("div",{className:"text-3xl",children:r}),n&&a.jsxs("span",{className:`text-sm font-semibold ${b[t]}`,children:[p[t]," ",n]})]}),a.jsx("p",{className:"text-gray-400 text-sm mb-1",children:e}),a.jsx("p",{className:"text-3xl font-bold text-white",children:d})]})};exports.AnimatedBounce=q;exports.AnimatedGlow=W;exports.AnimatedPulse=H;exports.AnimatedShimmer=O;exports.Button=j;exports.Button3DBlue=J;exports.Button3DGreen=Q;exports.Button3DPink=K;exports.Container=te;exports.ContainerButton=de;exports.ContainerContent=ie;exports.ContainerImage=ne;exports.FeatureCard=le;exports.GhostBlue=V;exports.GhostPurple=Z;exports.GhostRed=X;exports.GlassBlue=A;exports.GlassButton=m;exports.GlassPink=E;exports.GlassPurple=I;exports.GlassWhite=F;exports.GradientBlueGreen=M;exports.GradientCyan=R;exports.GradientOrangeRed=D;exports.GradientPurplePink=_;exports.GradientSunset=z;exports.Home=N;exports.NeonBlue=L;exports.NeonGreen=ae;exports.NeonPink=ee;exports.OutlinedBlue=U;exports.OutlinedGradient=Y;exports.OutlinedPurple=T;exports.ProductCard=oe;exports.SolidBlue=G;exports.SolidGreen=S;exports.SolidPill=$;exports.SolidPurple=B;exports.SolidRed=P;exports.StatCard=se;exports.gradients=C;

package/dist/index.mjs

@@ -2,14 +2,14 @@
 import { jsx as r, jsxs as g, Fragment as N } from "react/jsx-runtime";
 import C, { useState as $ } from "react";
 const S = ({
-  children: e,
-  variant: a = "primary",
+  children: a,
+  variant: e = "primary",
   size: d = "md",
   onClick: n,
   disabled: t = !1,
-  className: l = ""
+  className: o = ""
 }) => {
-  const s = "font-semibold rounded-lg transition-all duration-200 cursor-pointer", o = {
+  const s = "font-semibold rounded-lg transition-all duration-200 cursor-pointer", l = {
     primary: "bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg",
     secondary: "bg-gray-600 hover:bg-gray-700 text-white shadow-md hover:shadow-lg",
     danger: "bg-red-600 hover:bg-red-700 text-white shadow-md hover:shadow-lg"
@@ -21,25 +21,25 @@ const S = ({
   return /* @__PURE__ */ r(
     "button",
     {
-      className: `${s} ${o[a]} ${i[d]} ${p} ${l}`,
+      className: `${s} ${l[e]} ${i[d]} ${p} ${o}`,
       onClick: n,
       disabled: t,
-      children: e
+      children: a
     }
   );
 }, x = ({
-  children: e,
-  variant: a = "blur",
+  children: a,
+  variant: e = "blur",
   size: d = "md",
   onClick: n,
   disabled: t = !1,
-  className: l = ""
+  className: o = ""
 }) => {
-  const [s, o] = $([]), i = (b) => {
+  const [s, l] = $([]), i = (b) => {
     if (!t && n) {
       const h = b.currentTarget.getBoundingClientRect(), f = b.clientX - h.left, w = b.clientY - h.top, v = Date.now();
-      o([...s, { x: f, y: w, id: v }]), setTimeout(() => {
-        o((y) => y.filter((k) => k.id !== v));
+      l([...s, { x: f, y: w, id: v }]), setTimeout(() => {
+        l((y) => y.filter((k) => k.id !== v));
       }, 800), n();
     }
   }, p = `
@@ -56,7 +56,7 @@ const S = ({
     sm: "px-5 py-2.5 text-sm",
     md: "px-7 py-3.5 text-base",
     lg: "px-9 py-4.5 text-lg"
-  }, m = {
+  }, u = {
     blur: `
       bg-white/5
       hover:bg-white/15
@@ -82,19 +82,19 @@ const S = ({
       hover:before:translate-x-[200%]
       before:transition-transform before:duration-1000
     `
-  }, u = t ? "opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl" : "";
+  }, m = t ? "opacity-40 cursor-not-allowed hover:scale-100 hover:shadow-xl" : "";
   return /* @__PURE__ */ g(
     "button",
     {
-      className: `${p} ${c[d]} ${m[a]} ${u} ${l}`,
+      className: `${p} ${c[d]} ${u[e]} ${m} ${o}`,
       onClick: i,
       disabled: t,
       children: [
-        a === "waves" && !t && /* @__PURE__ */ g(N, { children: [
+        e === "waves" && !t && /* @__PURE__ */ g(N, { children: [
           /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-700" }),
           /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent animate-pulse" })
         ] }),
-        a === "blur" && !t && /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
+        e === "blur" && !t && /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-white/5 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" }),
         /* @__PURE__ */ r("span", { className: "absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none", children: /* @__PURE__ */ r("span", { className: "absolute inset-[-2px] rounded-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent blur-sm animate-shimmer" }) }),
         s.map((b) => /* @__PURE__ */ r(
           "span",
@@ -110,37 +110,37 @@ const S = ({
           },
           b.id
         )),
-        /* @__PURE__ */ r("span", { className: "relative z-10 drop-shadow-lg", children: e })
+        /* @__PURE__ */ r("span", { className: "relative z-10 drop-shadow-lg", children: a })
       ]
     }
   );
 }, M = ({
-  name: e,
-  title: a,
+  name: a,
+  title: e,
   description: d = "Welcome to my portfolio",
   primaryButtonText: n = "Get Started",
   primaryButtonLink: t,
-  primaryButtonOnClick: l,
+  primaryButtonOnClick: o,
   secondaryButtonText: s = "Learn More",
-  secondaryButtonLink: o,
+  secondaryButtonLink: l,
   secondaryButtonOnClick: i,
   backgroundGradient: p = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
   animationType: c,
-  className: m = ""
+  className: u = ""
 }) => {
-  const u = () => {
-    t ? window.location.href = t : l && l();
+  const m = () => {
+    t ? window.location.href = t : o && o();
   }, b = () => {
-    o ? window.location.href = o : i && i();
+    l ? window.location.href = l : i && i();
   }, h = t ? /* @__PURE__ */ r("a", { href: t, style: { textDecoration: "none" }, children: /* @__PURE__ */ r(x, { variant: "waves", size: "lg", children: n }) }) : /* @__PURE__ */ r(
     x,
     {
       variant: "waves",
       size: "lg",
-      onClick: l || u,
+      onClick: o || m,
       children: n
     }
-  ), f = o ? /* @__PURE__ */ r("a", { href: o, style: { textDecoration: "none" }, children: /* @__PURE__ */ r(x, { variant: "blur", size: "lg", children: s }) }) : /* @__PURE__ */ r(
+  ), f = l ? /* @__PURE__ */ r("a", { href: l, style: { textDecoration: "none" }, children: /* @__PURE__ */ r(x, { variant: "blur", size: "lg", children: s }) }) : /* @__PURE__ */ r(
     x,
     {
       variant: "blur",
@@ -157,7 +157,7 @@ const S = ({
         background: p,
         minHeight: "100vh"
       },
-      children: /* @__PURE__ */ r("div", { className: `min-h-screen flex items-center justify-center p-8 ${m}`, children: /* @__PURE__ */ g("div", { className: "max-w-4xl w-full text-center space-y-8", children: [
+      children: /* @__PURE__ */ r("div", { className: `min-h-screen flex items-center justify-center p-8 ${u}`, children: /* @__PURE__ */ g("div", { className: "max-w-4xl w-full text-center space-y-8", children: [
         /* @__PURE__ */ r(
           "h1",
           {
@@ -166,7 +166,7 @@ const S = ({
               textShadow: "0 0 40px rgba(0,0,0,0.3)",
               animation: "fadeInUp 0.8s ease-out"
             },
-            children: e
+            children: a
           }
         ),
         /* @__PURE__ */ r(
@@ -177,7 +177,7 @@ const S = ({
               textShadow: "0 0 30px rgba(0,0,0,0.2)",
               animation: "fadeInUp 1s ease-out 0.2s backwards"
             },
-            children: a
+            children: e
           }
         ),
         /* @__PURE__ */ r(
@@ -682,10 +682,10 @@ const S = ({
     category: "animated",
     animation: "zoom"
   }
-], D = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), z = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), R = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), I = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), j = ({ children: e = "Pill Button", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: e }), A = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50", children: e }), E = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50", children: e }), F = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: e }), H = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50", children: e }), q = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: e }), U = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20", children: e }), W = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20", children: e }), O = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20", children: e }), Y = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20", children: e }), T = ({ children: e = "Shimmer Effect", onClick: a }) => /* @__PURE__ */ g("button", { onClick: a, className: "relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105", children: [
-  /* @__PURE__ */ r("span", { className: "relative z-10", children: e }),
+], D = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), z = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), R = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), I = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), j = ({ children: a = "Pill Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-8 py-3 rounded-full font-semibold text-white bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 hover:scale-105 hover:shadow-xl", children: a }), A = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/50", children: a }), E = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-green-600 hover:from-blue-700 hover:to-green-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/50", children: a }), F = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: a }), H = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-br from-cyan-400 to-blue-600 hover:from-cyan-500 hover:to-blue-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/50", children: a }), q = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-yellow-500 via-orange-500 to-red-600 hover:from-yellow-600 hover:via-orange-600 hover:to-red-700 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-orange-500/50", children: a }), U = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-500/20 backdrop-blur-xl border border-blue-400/30 hover:bg-blue-500/30 hover:border-blue-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/20", children: a }), W = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-500/20 backdrop-blur-xl border border-purple-400/30 hover:bg-purple-500/30 hover:border-purple-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20", children: a }), O = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-white/10 backdrop-blur-xl border border-white/30 hover:bg-white/20 hover:border-white/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-white/20", children: a }), Y = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-500/20 backdrop-blur-xl border border-pink-400/30 hover:bg-pink-500/30 hover:border-pink-400/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/20", children: a }), T = ({ children: a = "Shimmer Effect", onClick: e }) => /* @__PURE__ */ g("button", { onClick: e, className: "relative px-6 py-3 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 overflow-hidden group transition-all duration-300 hover:scale-105", children: [
+  /* @__PURE__ */ r("span", { className: "relative z-10", children: a }),
   /* @__PURE__ */ r("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" })
-] }), V = ({ children: e = "Pulse Button", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105", children: e }), X = ({ children: e = "Bounce Button", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce", children: e }), Z = ({ children: e = "Glow Effect", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105", children: e }), J = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105", children: e }), K = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105", children: e }), Q = ({ children: e = "Gradient Border", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105", style: { borderImage: "linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1" }, children: e }), L = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105", children: e }), ee = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105", children: e }), ae = ({ children: e = "Click Me", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105", children: e }), re = ({ children: e = "3D Button", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150", children: e }), te = ({ children: e = "3D Button", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150", children: e }), ne = ({ children: e = "3D Button", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150", children: e }), ie = ({ children: e = "Neon Blue", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105", children: e }), de = ({ children: e = "Neon Pink", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105", children: e }), le = ({ children: e = "Neon Green", onClick: a }) => /* @__PURE__ */ r("button", { onClick: a, className: "px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105", children: e }), G = {
+] }), V = ({ children: a = "Pulse Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-red-600 hover:bg-red-700 transition-all duration-300 animate-pulse hover:animate-none hover:scale-105", children: a }), X = ({ children: a = "Bounce Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 hover:bg-green-700 transition-all duration-300 hover:animate-bounce", children: a }), Z = ({ children: a = "Glow Effect", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-all duration-300 hover:shadow-[0_0_30px_rgba(168,85,247,0.8)] hover:scale-105", children: a }), J = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 border-2 border-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-300 hover:scale-105", children: a }), K = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 border-2 border-purple-500 hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105", children: a }), Q = ({ children: a = "Gradient Border", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500 border-2 border-transparent hover:text-white transition-all duration-300 hover:scale-105", style: { borderImage: "linear-gradient(to right, rgb(168, 85, 247), rgb(236, 72, 153)) 1" }, children: a }), L = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-blue-500 hover:bg-blue-500/10 transition-all duration-300 hover:scale-105", children: a }), ee = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-red-500 hover:bg-red-500/10 transition-all duration-300 hover:scale-105", children: a }), ae = ({ children: a = "Click Me", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-purple-500 hover:bg-purple-500/10 transition-all duration-300 hover:scale-105", children: a }), re = ({ children: a = "3D Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-blue-600 shadow-[0_6px_0_rgb(37,99,235)] hover:shadow-[0_4px_0_rgb(37,99,235)] hover:translate-y-[2px] transition-all duration-150", children: a }), te = ({ children: a = "3D Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-pink-600 shadow-[0_6px_0_rgb(219,39,119)] hover:shadow-[0_4px_0_rgb(219,39,119)] hover:translate-y-[2px] transition-all duration-150", children: a }), ne = ({ children: a = "3D Button", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-white bg-green-600 shadow-[0_6px_0_rgb(22,163,74)] hover:shadow-[0_4px_0_rgb(22,163,74)] hover:translate-y-[2px] transition-all duration-150", children: a }), ie = ({ children: a = "Neon Blue", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-blue-400 border-2 border-blue-400 hover:bg-blue-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(59,130,246,0.8)] hover:scale-105", children: a }), de = ({ children: a = "Neon Pink", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-pink-400 border-2 border-pink-400 hover:bg-pink-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(236,72,153,0.8)] hover:scale-105", children: a }), oe = ({ children: a = "Neon Green", onClick: e }) => /* @__PURE__ */ r("button", { onClick: e, className: "px-6 py-3 rounded-lg font-semibold text-green-400 border-2 border-green-400 hover:bg-green-400 hover:text-black transition-all duration-300 hover:shadow-[0_0_20px_rgba(34,197,94,0.8)] hover:scale-105", children: a }), G = {
   "glass-morphism": `
     radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(255, 128, 171, 0.3), transparent 50%),
@@ -711,16 +711,16 @@ const S = ({
     linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%)
   `,
   none: "transparent"
-}, oe = ({
-  children: e,
-  layout: a = "center",
+}, le = ({
+  children: a,
+  layout: e = "center",
   size: d = "lg",
   theme: n = "none",
   padding: t = !0,
-  gap: l = "md",
+  gap: o = "md",
   className: s = ""
 }) => {
-  const o = {
+  const l = {
     sm: "max-w-3xl",
     md: "max-w-5xl",
     lg: "max-w-7xl",
@@ -730,7 +730,7 @@ const S = ({
     sm: "gap-4",
     md: "gap-8",
     lg: "gap-12"
-  }[l], p = {
+  }[o], p = {
     "image-right": `grid md:grid-cols-2 ${i} items-center`,
     "image-left": `grid md:grid-cols-2 ${i} items-center`,
     "button-right": `grid md:grid-cols-2 ${i} items-center`,
@@ -738,53 +738,53 @@ const S = ({
     center: "flex flex-col items-center justify-center text-center",
     "two-columns": `grid md:grid-cols-2 ${i}`,
     "three-columns": `grid md:grid-cols-3 ${i}`
-  }[a], c = t ? "px-6 py-8" : "", m = n !== "none" ? {
+  }[e], c = t ? "px-6 py-8" : "", u = n !== "none" ? {
     background: G[n],
     backgroundSize: "200% 200%"
-  } : {}, u = C.Children.toArray(e);
-  let b = u;
-  return (a === "image-left" || a === "button-left") && (b = u.reverse()), /* @__PURE__ */ r(
+  } : {}, m = C.Children.toArray(a);
+  let b = m;
+  return (e === "image-left" || e === "button-left") && (b = m.reverse()), /* @__PURE__ */ r(
     "div",
     {
-      className: `${o} mx-auto ${c} ${s}`,
-      style: m,
+      className: `${l} mx-auto ${c} ${s}`,
+      style: u,
       children: /* @__PURE__ */ r("div", { className: p, children: b })
     }
   );
 }, se = ({
-  src: e,
-  alt: a,
+  src: a,
+  alt: e,
   className: d = "",
   width: n,
   height: t
 }) => /* @__PURE__ */ r("div", { className: `w-full ${d}`, children: /* @__PURE__ */ r(
   "img",
   {
-    src: e,
-    alt: a,
+    src: a,
+    alt: e,
     width: n,
     height: t,
     className: "w-full h-auto rounded-2xl shadow-2xl object-cover"
   }
 ) }), ge = ({
-  children: e,
-  className: a = ""
-}) => /* @__PURE__ */ r("div", { className: `space-y-4 ${a}`, children: e }), be = ({
-  children: e,
-  className: a = ""
-}) => /* @__PURE__ */ r("div", { className: `flex gap-4 ${a}`, children: e }), pe = ({
-  icon: e,
-  title: a,
+  children: a,
+  className: e = ""
+}) => /* @__PURE__ */ r("div", { className: `space-y-4 ${e}`, children: a }), be = ({
+  children: a,
+  className: e = ""
+}) => /* @__PURE__ */ r("div", { className: `flex gap-4 ${e}`, children: a }), pe = ({
+  icon: a,
+  title: e,
   description: d,
   variant: n = "solid",
   theme: t = "blue",
-  hoverable: l = !0,
+  hoverable: o = !0,
   className: s = ""
 }) => {
   const i = `
     rounded-2xl p-6
     transition-all duration-300
-    ${l ? "hover:scale-105 hover:shadow-2xl" : ""}
+    ${o ? "hover:scale-105 hover:shadow-2xl" : ""}
     ${{
     blue: {
       solid: "bg-blue-600 text-white",
@@ -826,19 +826,19 @@ const S = ({
     ${s}
   `;
   return /* @__PURE__ */ g("div", { className: i, children: [
-    e ? typeof e == "string" ? /* @__PURE__ */ r("div", { className: "text-4xl mb-4", children: e }) : /* @__PURE__ */ r("div", { className: "mb-4", children: e }) : null,
-    /* @__PURE__ */ r("h3", { className: "text-xl font-bold mb-2", children: a }),
+    a && /* @__PURE__ */ r("div", { className: "text-4xl mb-4", children: a }),
+    /* @__PURE__ */ r("h3", { className: "text-xl font-bold mb-2", children: e }),
     /* @__PURE__ */ r("p", { className: `text-sm ${n === "outlined" ? "text-gray-600" : "opacity-90"}`, children: d })
   ] });
 }, ce = ({
-  image: e,
-  title: a,
+  image: a,
+  title: e,
   description: d,
   price: n,
   oldPrice: t,
-  badge: l,
+  badge: o,
   variant: s = "solid",
-  children: o,
+  children: l,
   className: i = ""
 }) => /* @__PURE__ */ g("div", { className: `rounded-2xl overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl ${{
   solid: "bg-gray-900 border border-gray-800",
@@ -850,15 +850,15 @@ const S = ({
     /* @__PURE__ */ r(
       "img",
       {
-        src: e,
-        alt: a,
+        src: a,
+        alt: e,
         className: "w-full h-48 object-cover"
       }
     ),
-    l && /* @__PURE__ */ r("span", { className: "absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full", children: l })
+    o && /* @__PURE__ */ r("span", { className: "absolute top-3 right-3 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full", children: o })
   ] }),
   /* @__PURE__ */ g("div", { className: "p-5 space-y-3", children: [
-    /* @__PURE__ */ r("h3", { className: "text-xl font-bold text-white", children: a }),
+    /* @__PURE__ */ r("h3", { className: "text-xl font-bold text-white", children: e }),
     d && /* @__PURE__ */ r("p", { className: "text-gray-400 text-sm", children: d }),
     /* @__PURE__ */ g("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ g("span", { className: "text-2xl font-bold text-white", children: [
@@ -870,17 +870,17 @@ const S = ({
         t
       ] })
     ] }),
-    o
+    l
   ] })
 ] }), me = ({
-  icon: e,
-  label: a,
+  icon: a,
+  label: e,
   value: d,
   change: n,
   trend: t = "neutral",
-  variant: l = "solid",
+  variant: o = "solid",
   theme: s = "blue",
-  className: o = ""
+  className: l = ""
 }) => {
   const i = {
     blue: {
@@ -927,22 +927,22 @@ const S = ({
     up: "↑",
     down: "↓",
     neutral: "→"
-  }, m = () => e ? typeof e == "string" ? /* @__PURE__ */ r("div", { className: "text-3xl", children: e }) : /* @__PURE__ */ r("div", { children: e }) : null;
+  };
   return /* @__PURE__ */ g("div", { className: `
       rounded-2xl p-6 border
       transition-all duration-300 hover:scale-105 hover:shadow-xl
-      ${i[s][l]}
-      ${o}
+      ${i[s][o]}
+      ${l}
     `, children: [
     /* @__PURE__ */ g("div", { className: "flex items-start justify-between mb-4", children: [
-      m(),
+      a && /* @__PURE__ */ r("div", { className: "text-3xl", children: a }),
       n && /* @__PURE__ */ g("span", { className: `text-sm font-semibold ${p[t]}`, children: [
         c[t],
         " ",
         n
       ] })
     ] }),
-    /* @__PURE__ */ r("p", { className: "text-gray-400 text-sm mb-1", children: a }),
+    /* @__PURE__ */ r("p", { className: "text-gray-400 text-sm mb-1", children: e }),
     /* @__PURE__ */ r("p", { className: "text-3xl font-bold text-white", children: d })
   ] });
 };
@@ -955,7 +955,7 @@ export {
   re as Button3DBlue,
   ne as Button3DGreen,
   te as Button3DPink,
-  oe as Container,
+  le as Container,
   be as ContainerButton,
   ge as ContainerContent,
   se as ContainerImage,
@@ -975,7 +975,7 @@ export {
   q as GradientSunset,
   M as Home,
   ie as NeonBlue,
-  le as NeonGreen,
+  oe as NeonGreen,
   de as NeonPink,
   J as OutlinedBlue,
   Q as OutlinedGradient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telecop",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Modern React UI Components Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",