@moontra/moonui-pro 2.7.2 → 2.8.0

package/dist/index.mjs

@@ -72352,24 +72352,24 @@ var MoonUICreditCardInputPro = t__default.forwardRef(({
     showCardPreview && /* @__PURE__ */ jsxs(
       motion.div,
       {
-        className: "relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-gray-700 to-gray-900 p-6 text-white shadow-xl",
+        className: "relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 p-6 text-white shadow-xl overflow-hidden",
         initial: { opacity: 0, y: -20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.3 },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-8", children: [
             /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: cardType ? cardType.toUpperCase() : "CARD" }),
-            /* @__PURE__ */ jsx(CreditCard, { className: "w-8 h-8" })
+            /* @__PURE__ */ jsx(CreditCard, { className: "w-8 h-8 text-white/80" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xl font-mono tracking-wider", children: value.number || "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022" }),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "text-xs opacity-70", children: "NAME" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-white/70", children: "NAME" }),
                 /* @__PURE__ */ jsx("div", { className: "text-sm uppercase", children: value.name || "YOUR NAME" })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: "text-xs opacity-70", children: "EXPIRES" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-white/70", children: "EXPIRES" }),
                 /* @__PURE__ */ jsx("div", { className: "text-sm", children: value.expiry || "MM/YY" })
               ] })
             ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/credit-card-input/index.tsx

@@ -227,7 +227,7 @@ export const MoonUICreditCardInputPro = React.forwardRef<HTMLDivElement, CreditC
     <div ref={ref} className={cn("space-y-4", className)} {...props}>
       {showCardPreview && (
         <motion.div
-          className="relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-gray-700 to-gray-900 p-6 text-white shadow-xl"
+          className="relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700 p-6 text-white shadow-xl overflow-hidden"
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.3 }}
@@ -236,7 +236,7 @@ export const MoonUICreditCardInputPro = React.forwardRef<HTMLDivElement, CreditC
             <div className="text-lg font-semibold">
               {cardType ? cardType.toUpperCase() : 'CARD'}
             </div>
-            <CreditCard className="w-8 h-8" />
+            <CreditCard className="w-8 h-8 text-white/80" />
           </div>
           
           <div className="space-y-4">
@@ -246,14 +246,14 @@ export const MoonUICreditCardInputPro = React.forwardRef<HTMLDivElement, CreditC
             
             <div className="flex justify-between">
               <div>
-                <div className="text-xs opacity-70">NAME</div>
+                <div className="text-xs text-white/70">NAME</div>
                 <div className="text-sm uppercase">
                   {value.name || 'YOUR NAME'}
                 </div>
               </div>
               
               <div>
-                <div className="text-xs opacity-70">EXPIRES</div>
+                <div className="text-xs text-white/70">EXPIRES</div>
                 <div className="text-sm">
                   {value.expiry || 'MM/YY'}
                 </div>