@planetaexo/design-system 0.3.11 → 0.3.13

package/dist/index.d.cts

@@ -58,6 +58,8 @@ interface OfferAdventureItem {
     onRemove?: () => void;
     /** Extra rich content below the standard blocks (e.g. traveller table, HTML itinerary from the host app). */
     detailsSlot?: React.ReactNode;
+    /** Label shown above the itinerary/detailsSlot section. Defaults to "Itinerary". */
+    itineraryLabel?: string;
 }
 interface OfferDepositInfo {
     depositPercent: number;
@@ -914,13 +916,43 @@ declare const LIGHT: {
         };
     };
 };
+/**
+ * Tokens opcionais resolvidos em runtime pelo host app.
+ *
+ * Como o Stripe Elements renderiza em iframe isolado, não consegue ler CSS vars
+ * da página host. Resolva os valores via `getComputedStyle` antes de passar:
+ *
+ * @example
+ * function resolveToken(v: string) {
+ *   return getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+ * }
+ * const appearance = getStripeAppearance(false, {
+ *   primary:     resolveToken("--primary"),
+ *   background:  resolveToken("--background"),
+ *   card:        resolveToken("--card"),
+ *   foreground:  resolveToken("--foreground"),
+ *   muted:       resolveToken("--muted-foreground"),
+ *   border:      resolveToken("--border"),
+ *   destructive: resolveToken("--destructive"),
+ * });
+ */
+interface ResolvedStripeTokens {
+    primary?: string;
+    background?: string;
+    card?: string;
+    foreground?: string;
+    muted?: string;
+    border?: string;
+    destructive?: string;
+}
 /**
  * Retorna o objeto `appearance` para `<Elements>` do Stripe,
  * baseado no modo claro ou escuro do host app.
  *
- * @param isDark - true para modo escuro (padrão: false)
+ * @param isDark   - true para modo escuro (padrão: false)
+ * @param tokens   - valores CSS resolvidos em runtime (opcional; usa hex do DS como fallback)
  */
-declare function getStripeAppearance(isDark?: boolean): {
+declare function getStripeAppearance(isDark?: boolean, tokens?: ResolvedStripeTokens): {
     theme: "none";
     variables: {
         colorPrimary: string;

package/dist/index.d.ts

@@ -58,6 +58,8 @@ interface OfferAdventureItem {
     onRemove?: () => void;
     /** Extra rich content below the standard blocks (e.g. traveller table, HTML itinerary from the host app). */
     detailsSlot?: React.ReactNode;
+    /** Label shown above the itinerary/detailsSlot section. Defaults to "Itinerary". */
+    itineraryLabel?: string;
 }
 interface OfferDepositInfo {
     depositPercent: number;
@@ -914,13 +916,43 @@ declare const LIGHT: {
         };
     };
 };
+/**
+ * Tokens opcionais resolvidos em runtime pelo host app.
+ *
+ * Como o Stripe Elements renderiza em iframe isolado, não consegue ler CSS vars
+ * da página host. Resolva os valores via `getComputedStyle` antes de passar:
+ *
+ * @example
+ * function resolveToken(v: string) {
+ *   return getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+ * }
+ * const appearance = getStripeAppearance(false, {
+ *   primary:     resolveToken("--primary"),
+ *   background:  resolveToken("--background"),
+ *   card:        resolveToken("--card"),
+ *   foreground:  resolveToken("--foreground"),
+ *   muted:       resolveToken("--muted-foreground"),
+ *   border:      resolveToken("--border"),
+ *   destructive: resolveToken("--destructive"),
+ * });
+ */
+interface ResolvedStripeTokens {
+    primary?: string;
+    background?: string;
+    card?: string;
+    foreground?: string;
+    muted?: string;
+    border?: string;
+    destructive?: string;
+}
 /**
  * Retorna o objeto `appearance` para `<Elements>` do Stripe,
  * baseado no modo claro ou escuro do host app.
  *
- * @param isDark - true para modo escuro (padrão: false)
+ * @param isDark   - true para modo escuro (padrão: false)
+ * @param tokens   - valores CSS resolvidos em runtime (opcional; usa hex do DS como fallback)
  */
-declare function getStripeAppearance(isDark?: boolean): {
+declare function getStripeAppearance(isDark?: boolean, tokens?: ResolvedStripeTokens): {
     theme: "none";
     variables: {
         colorPrimary: string;

package/dist/index.js

@@ -478,8 +478,8 @@ var FloatingInput = React19.forwardRef(
           ref,
           placeholder: " ",
           className: cn(
-            "peer block w-full rounded-lg border border-border bg-background",
-            "px-3 pt-5 pb-2 text-base text-foreground font-ui",
+            "peer block w-full h-14 rounded-lg border border-border bg-background",
+            "px-3 pt-6 pb-2 text-base text-foreground font-ui",
             "transition-colors placeholder-transparent",
             "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
             error && "border-destructive focus:border-destructive focus:ring-destructive"
@@ -495,8 +495,8 @@ var FloatingInput = React19.forwardRef(
             "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
             "text-base text-muted-foreground font-ui transition-all duration-150",
             /* When peer has content or is focused, float up */
-            "peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
-            "peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
+            "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
+            "peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:text-muted-foreground"
           ),
           children: [
             label,
@@ -520,8 +520,8 @@ var FloatingSelect = React19.forwardRef(
           id: inputId,
           ref,
           className: cn(
-            "peer block w-full appearance-none rounded-lg border border-border bg-background",
-            "px-3 pt-5 pb-2 text-base text-foreground font-ui",
+            "peer block w-full h-14 appearance-none rounded-lg border border-border bg-background",
+            "px-3 pt-6 pb-2 text-base text-foreground font-ui",
             "transition-colors",
             "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary",
             error && "border-destructive"
@@ -551,8 +551,8 @@ var FloatingSelect = React19.forwardRef(
           className: cn(
             "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2",
             "text-base text-muted-foreground font-ui transition-all duration-150",
-            "peer-focus:top-3 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
-            "peer-not-placeholder-shown:top-3 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs"
+            "peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary",
+            "peer-not-placeholder-shown:top-2 peer-not-placeholder-shown:translate-y-0 peer-not-placeholder-shown:text-xs"
           ),
           children: [
             label,
@@ -1089,8 +1089,27 @@ function CountrySearchField({
     ] })
   ] });
 }
+var VARIANT_STYLES = {
+  error: "text-destructive border-destructive/30 bg-destructive/5",
+  warning: "text-amber-400 border-amber-500/30 bg-amber-500/10",
+  success: "text-primary border-primary/30 bg-primary/10",
+  info: "text-muted-foreground border-primary/25 bg-primary/5"
+};
+function Alert({ variant = "info", children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border px-3 py-2 text-sm font-sans leading-snug",
+        VARIANT_STYLES[variant],
+        className
+      ),
+      children
+    }
+  );
+}
 function AdventureCard({ adventure }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
   const [checkedInternal, setCheckedInternal] = React19.useState(
     new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
@@ -1177,11 +1196,32 @@ function AdventureCard({ adventure }) {
           opt.id
         )) })
       ] }),
-      adventure.description && /* @__PURE__ */ jsxs(Fragment, { children: [
+      (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-2", children: "Itinerary" }),
-          /* @__PURE__ */ jsx("p", { className: "text-base text-foreground/80 leading-relaxed font-sans", children: adventure.description })
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_f = adventure.itineraryLabel) != null ? _f : "Itinerary" }),
+          adventure.description && !adventure.detailsSlot && /* @__PURE__ */ jsx("p", { className: "text-base text-foreground/80 leading-relaxed font-sans", children: adventure.description }),
+          adventure.detailsSlot && /* @__PURE__ */ jsx("div", { className: cn(
+            "text-foreground",
+            // Base paragraph and heading styles
+            "[&_p]:text-base [&_p]:text-foreground/80 [&_p]:leading-relaxed [&_p]:mb-2",
+            "[&_h2]:text-xl [&_h2]:font-bold [&_h2]:text-foreground [&_h2]:mb-2 [&_h2]:mt-4",
+            "[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:mb-1 [&_h3]:mt-3",
+            "[&_strong]:font-bold [&_strong]:text-foreground",
+            "[&_em]:italic",
+            "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2",
+            "[&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-2",
+            // Standard lists
+            "[&_ul:not(.list-check):not(.list-cross)]:list-disc [&_ul:not(.list-check):not(.list-cross)]:pl-5 [&_ul:not(.list-check):not(.list-cross)]:space-y-1",
+            "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1",
+            "[&_li]:text-base [&_li]:text-foreground/80 [&_li]:leading-relaxed",
+            // Check list (✓)
+            "[&_.list-check]:list-none [&_.list-check]:pl-5 [&_.list-check]:space-y-1",
+            "[&_.list-check_li]:relative [&_.list-check_li]:before:absolute [&_.list-check_li]:before:-left-5 [&_.list-check_li]:before:content-['\u2713'] [&_.list-check_li]:before:text-primary [&_.list-check_li]:before:font-bold",
+            // Cross list (✗)
+            "[&_.list-cross]:list-none [&_.list-cross]:pl-5 [&_.list-cross]:space-y-1",
+            "[&_.list-cross_li]:relative [&_.list-cross_li]:before:absolute [&_.list-cross_li]:before:-left-5 [&_.list-cross_li]:before:content-['\u2717'] [&_.list-cross_li]:before:text-destructive [&_.list-cross_li]:before:font-bold"
+          ), children: adventure.detailsSlot })
         ] })
       ] }),
       adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
@@ -1204,10 +1244,6 @@ function AdventureCard({ adventure }) {
           /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
           item
         ] }, i)) })
-      ] }),
-      adventure.detailsSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 text-foreground", children: adventure.detailsSlot })
       ] })
     ] })
   ] });
@@ -1531,8 +1567,8 @@ function BookingShell({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-5 flex flex-col gap-5", children: [
       /* @__PURE__ */ jsx("div", { children }),
-      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive font-sans", children: error }),
-      successMessage && /* @__PURE__ */ jsx("div", { className: "text-sm font-sans rounded-lg px-3 py-2 bg-primary/10 border border-primary/30 text-primary", children: successMessage }),
+      error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
+      successMessage && /* @__PURE__ */ jsx(Alert, { variant: "success", children: successMessage }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           currentStep > 0 && /* @__PURE__ */ jsxs(
@@ -1563,7 +1599,7 @@ function BookingShell({
             }
           )
         ] }),
-        nextDisabled && nextBlockedMessage && /* @__PURE__ */ jsx("div", { className: "text-xs text-amber-400 bg-amber-500/10 border border-amber-500/30 rounded-lg px-3 py-2", children: nextBlockedMessage }),
+        nextDisabled && nextBlockedMessage && /* @__PURE__ */ jsx(Alert, { variant: "warning", children: nextBlockedMessage }),
         currentStep === 0 && onCancel && /* @__PURE__ */ jsx(
           "button",
           {
@@ -6444,25 +6480,6 @@ function ActivityCard({
     }
   );
 }
-var VARIANT_STYLES = {
-  error: "text-destructive border-destructive/30 bg-destructive/5",
-  warning: "text-amber-400 border-amber-500/30 bg-amber-500/10",
-  success: "text-primary border-primary/30 bg-primary/10",
-  info: "text-muted-foreground border-primary/25 bg-primary/5"
-};
-function Alert({ variant = "info", children, className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border px-3 py-2 text-sm font-sans leading-snug",
-        VARIANT_STYLES[variant],
-        className
-      ),
-      children
-    }
-  );
-}
 function PaymentModalShell({
   open,
   title,
@@ -6691,8 +6708,75 @@ var DARK = {
     }
   }
 };
-function getStripeAppearance(isDark = false) {
-  return isDark ? DARK : LIGHT;
+function getStripeAppearance(isDark = false, tokens) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const base = isDark ? DARK : LIGHT;
+  if (!tokens) return base;
+  const t = {
+    primary: (_a = tokens.primary) != null ? _a : base.variables.colorPrimary,
+    background: (_b = tokens.background) != null ? _b : base.variables.colorBackground,
+    card: (_c = tokens.card) != null ? _c : base.variables.colorBackground,
+    foreground: (_d = tokens.foreground) != null ? _d : base.variables.colorText,
+    muted: (_e = tokens.muted) != null ? _e : base.variables.colorTextPlaceholder,
+    border: (_f = tokens.border) != null ? _f : isDark ? "rgba(255,255,255,0.10)" : "#e3eeeb",
+    destructive: (_g = tokens.destructive) != null ? _g : base.variables.colorDanger
+  };
+  return __spreadProps(__spreadValues({}, base), {
+    variables: __spreadProps(__spreadValues({}, base.variables), {
+      colorPrimary: t.primary,
+      colorBackground: t.card,
+      colorText: t.foreground,
+      colorTextPlaceholder: t.muted,
+      colorIcon: t.muted,
+      colorIconTab: t.muted,
+      colorIconTabSelected: t.primary,
+      colorIconTabHover: t.foreground,
+      colorDanger: t.destructive
+    }),
+    rules: __spreadProps(__spreadValues({}, base.rules), {
+      ".Input": __spreadProps(__spreadValues({}, base.rules[".Input"]), {
+        border: `1px solid ${t.border}`,
+        backgroundColor: t.background,
+        color: t.foreground
+      }),
+      ".Input:focus": {
+        border: `1px solid ${t.primary}`,
+        boxShadow: `0 0 0 2px color-mix(in srgb, ${t.primary} 20%, transparent)`,
+        outline: "none"
+      },
+      ".Input--invalid": {
+        border: `1px solid ${t.destructive}`,
+        boxShadow: `0 0 0 2px color-mix(in srgb, ${t.destructive} 15%, transparent)`
+      },
+      ".Label": __spreadProps(__spreadValues({}, base.rules[".Label"]), {
+        color: t.muted
+      }),
+      ".Error": {
+        color: t.destructive,
+        fontSize: "12px"
+      },
+      ".Tab": __spreadProps(__spreadValues({}, base.rules[".Tab"]), {
+        border: `1px solid ${t.border}`,
+        backgroundColor: t.background,
+        color: t.muted
+      }),
+      ".Tab:hover": {
+        color: t.foreground,
+        border: `1px solid ${t.primary}`
+      },
+      ".Tab--selected": {
+        border: `1px solid ${t.primary}`,
+        backgroundColor: `color-mix(in srgb, ${t.primary} 8%, transparent)`,
+        color: t.foreground,
+        boxShadow: "none"
+      },
+      ".TabLabel--selected": { color: t.foreground },
+      ".TabIcon--selected": { fill: t.primary },
+      ".Block": __spreadProps(__spreadValues({}, base.rules[".Block"]), {
+        border: `1px solid ${t.border}`
+      })
+    })
+  });
 }
 var stripeAppearance = LIGHT;
 function Input(_a) {