@planetaexo/design-system 0.3.6 → 0.3.9

package/dist/index.cjs

@@ -6453,6 +6453,7 @@ function PaymentModalShell({
   closeLabel = "Cancel",
   closeDisabled,
   children,
+  error,
   className
 }) {
   if (!open) return null;
@@ -6488,6 +6489,7 @@ function PaymentModalShell({
               "#",
               bookingRef
             ] }),
+            error && /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "error", className: "mt-3", children: error }),
             busy ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 py-6", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-10 w-10 animate-spin rounded-full border-2 border-primary/30 border-t-primary" }),
               busyMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground font-sans", children: busyMessage })
@@ -6500,23 +6502,178 @@ function PaymentModalShell({
 }
 
 // src/lib/stripeAppearance.ts
-var stripeAppearance = {
-  theme: "night",
+var LIGHT = {
+  theme: "none",
+  variables: {
+    // Primary — #47bca9 (brand teal)
+    colorPrimary: "#47bca9",
+    // Backgrounds — --card (#ffffff), --background (#fefefe)
+    colorBackground: "#ffffff",
+    // Text — --foreground (#2e2d2c charcoal)
+    colorText: "#2e2d2c",
+    // Placeholder / muted — --muted-foreground (~#787776)
+    colorTextPlaceholder: "#787776",
+    // Icons
+    colorIcon: "#787776",
+    colorIconTab: "#787776",
+    colorIconTabSelected: "#47bca9",
+    colorIconTabHover: "#2e2d2c",
+    // Danger — --destructive (#ef4444)
+    colorDanger: "#ef4444",
+    // Border radius — --radius (0.5rem = 8px)
+    borderRadius: "8px",
+    // Font — herda do host
+    fontFamily: "inherit"
+  },
+  rules: {
+    ".Input": {
+      border: "1px solid #e3eeeb",
+      // --border light
+      borderRadius: "8px",
+      padding: "10px 12px",
+      boxShadow: "none",
+      backgroundColor: "#ffffff",
+      color: "#2e2d2c",
+      fontSize: "14px",
+      lineHeight: "1.5"
+    },
+    ".Input:focus": {
+      border: "1px solid #47bca9",
+      // --primary
+      boxShadow: "0 0 0 2px rgba(71,188,169,0.20)",
+      outline: "none"
+    },
+    ".Input--invalid": {
+      border: "1px solid #ef4444",
+      boxShadow: "0 0 0 2px rgba(239,68,68,0.15)"
+    },
+    ".Label": {
+      color: "#787776",
+      // --muted-foreground
+      fontSize: "12px",
+      fontWeight: "500",
+      marginBottom: "4px"
+    },
+    ".Error": {
+      color: "#ef4444",
+      fontSize: "12px"
+    },
+    ".Tab": {
+      border: "1px solid #e3eeeb",
+      borderRadius: "8px",
+      boxShadow: "none",
+      backgroundColor: "#ffffff",
+      color: "#787776"
+    },
+    ".Tab:hover": {
+      color: "#2e2d2c",
+      border: "1px solid #47bca9"
+    },
+    ".Tab--selected": {
+      border: "1px solid #47bca9",
+      backgroundColor: "rgba(71,188,169,0.08)",
+      color: "#2e2d2c",
+      boxShadow: "none"
+    },
+    ".TabLabel--selected": {
+      color: "#2e2d2c"
+    },
+    ".TabIcon--selected": {
+      fill: "#47bca9"
+    },
+    ".Block": {
+      borderRadius: "8px",
+      backgroundColor: "#f3f7f6",
+      // --muted
+      border: "1px solid #e3eeeb"
+    }
+  }
+};
+var DARK = {
+  theme: "none",
   variables: {
-    /** Cor primária — foco, checkbox, botão interno do Stripe */
-    colorPrimary: "#22c55e",
-    /** Border-radius dos campos do Stripe */
+    colorPrimary: "#5dc9b5",
+    // --primary dark (lightened)
+    colorBackground: "#282726",
+    // --card dark
+    colorText: "#f4f8f7",
+    // --foreground dark
+    colorTextPlaceholder: "#999693",
+    // --muted-foreground dark
+    colorIcon: "#999693",
+    colorIconTab: "#999693",
+    colorIconTabSelected: "#5dc9b5",
+    colorIconTabHover: "#f4f8f7",
+    colorDanger: "#ef4444",
     borderRadius: "8px",
-    /** Background dos campos internos */
-    colorBackground: "#020617",
-    /** Cor base do texto */
-    colorText: "#e2e8f0",
-    /** Cor do placeholder */
-    colorTextPlaceholder: "#64748b",
-    /** Cor da borda padrão */
-    colorIconTab: "#94a3b8"
+    fontFamily: "inherit"
+  },
+  rules: {
+    ".Input": {
+      border: "1px solid rgba(255,255,255,0.10)",
+      // --border dark
+      borderRadius: "8px",
+      padding: "10px 12px",
+      boxShadow: "none",
+      backgroundColor: "#282726",
+      color: "#f4f8f7",
+      fontSize: "14px",
+      lineHeight: "1.5"
+    },
+    ".Input:focus": {
+      border: "1px solid #5dc9b5",
+      boxShadow: "0 0 0 2px rgba(93,201,181,0.20)",
+      outline: "none"
+    },
+    ".Input--invalid": {
+      border: "1px solid #ef4444",
+      boxShadow: "0 0 0 2px rgba(239,68,68,0.15)"
+    },
+    ".Label": {
+      color: "#999693",
+      fontSize: "12px",
+      fontWeight: "500",
+      marginBottom: "4px"
+    },
+    ".Error": {
+      color: "#ef4444",
+      fontSize: "12px"
+    },
+    ".Tab": {
+      border: "1px solid rgba(255,255,255,0.10)",
+      borderRadius: "8px",
+      boxShadow: "none",
+      backgroundColor: "#282726",
+      color: "#999693"
+    },
+    ".Tab:hover": {
+      color: "#f4f8f7",
+      border: "1px solid #5dc9b5"
+    },
+    ".Tab--selected": {
+      border: "1px solid #5dc9b5",
+      backgroundColor: "rgba(93,201,181,0.10)",
+      color: "#f4f8f7",
+      boxShadow: "none"
+    },
+    ".TabLabel--selected": {
+      color: "#f4f8f7"
+    },
+    ".TabIcon--selected": {
+      fill: "#5dc9b5"
+    },
+    ".Block": {
+      borderRadius: "8px",
+      backgroundColor: "#1e1d1c",
+      // --background dark
+      border: "1px solid rgba(255,255,255,0.10)"
+    }
   }
 };
+function getStripeAppearance(isDark = false) {
+  return isDark ? DARK : LIGHT;
+}
+var stripeAppearance = LIGHT;
 function Input(_a) {
   var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6914,6 +7071,7 @@ exports.TripCard = TripCard;
 exports.TripHeader = TripHeader;
 exports.TripPage = TripPage;
 exports.cn = cn;
+exports.getStripeAppearance = getStripeAppearance;
 exports.stripeAppearance = stripeAppearance;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map