@planetaexo/design-system 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -780,6 +780,61 @@ interface ActivityCardProps {
780
780
  }
781
781
  declare function ActivityCard({ image, imageAlt, badge, icon, title, description, price, onClick, size, className, }: ActivityCardProps): react_jsx_runtime.JSX.Element;
782
782
 
783
+ type AlertVariant = "error" | "warning" | "success" | "info";
784
+ interface AlertProps {
785
+ variant?: AlertVariant;
786
+ children: React.ReactNode;
787
+ className?: string;
788
+ }
789
+ declare function Alert({ variant, children, className }: AlertProps): react_jsx_runtime.JSX.Element;
790
+
791
+ interface PaymentModalShellProps {
792
+ open: boolean;
793
+ title: string;
794
+ subtitle?: string;
795
+ /** Referência da reserva exibida abaixo do subtitle (e.g. "#12345") */
796
+ bookingRef?: string | number;
797
+ /** Quando true exibe spinner e oculta children */
798
+ busy?: boolean;
799
+ busyMessage?: string;
800
+ onClose?: () => void;
801
+ closeLabel?: string;
802
+ /** Quando true desabilita o botão de fechar */
803
+ closeDisabled?: boolean;
804
+ /** Formulário de pagamento — não necessário quando busy */
805
+ children?: React.ReactNode;
806
+ className?: string;
807
+ }
808
+ declare function PaymentModalShell({ open, title, subtitle, bookingRef, busy, busyMessage, onClose, closeLabel, closeDisabled, children, className, }: PaymentModalShellProps): react_jsx_runtime.JSX.Element | null;
809
+
810
+ /**
811
+ * Configuração de aparência do Stripe Elements alinhada com o Design System PlanetaEXO.
812
+ * Passe este objeto como `appearance` ao inicializar `<Elements>` no host app.
813
+ *
814
+ * @example
815
+ * import { stripeAppearance } from "@planetaexo/design-system";
816
+ * const options = { clientSecret, appearance: stripeAppearance, ... };
817
+ * <Elements stripe={stripePromise} options={options}>...</Elements>
818
+ */
819
+ declare const stripeAppearance: {
820
+ readonly theme: "night";
821
+ readonly variables: {
822
+ /** Cor primária — foco, checkbox, botão interno do Stripe */
823
+ readonly colorPrimary: "#22c55e";
824
+ /** Border-radius dos campos do Stripe */
825
+ readonly borderRadius: "8px";
826
+ /** Background dos campos internos */
827
+ readonly colorBackground: "#020617";
828
+ /** Cor base do texto */
829
+ readonly colorText: "#e2e8f0";
830
+ /** Cor do placeholder */
831
+ readonly colorTextPlaceholder: "#64748b";
832
+ /** Cor da borda padrão */
833
+ readonly colorIconTab: "#94a3b8";
834
+ };
835
+ };
836
+ type StripeAppearance = typeof stripeAppearance;
837
+
783
838
  declare function cn(...inputs: ClassValue[]): string;
784
839
 
785
840
  interface LeadCapturePopupConfig {
@@ -832,4 +887,4 @@ declare function LeadCapturePopup({ config: _config, }: {
832
887
  config: LeadCapturePopupConfig;
833
888
  }): react_jsx_runtime.JSX.Element | null;
834
889
 
835
- export { ActivityCard, type ActivityCardProps, type ActivityCardSize, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, cn };
890
+ export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, cn, stripeAppearance };
package/dist/index.d.ts CHANGED
@@ -780,6 +780,61 @@ interface ActivityCardProps {
780
780
  }
781
781
  declare function ActivityCard({ image, imageAlt, badge, icon, title, description, price, onClick, size, className, }: ActivityCardProps): react_jsx_runtime.JSX.Element;
782
782
 
783
+ type AlertVariant = "error" | "warning" | "success" | "info";
784
+ interface AlertProps {
785
+ variant?: AlertVariant;
786
+ children: React.ReactNode;
787
+ className?: string;
788
+ }
789
+ declare function Alert({ variant, children, className }: AlertProps): react_jsx_runtime.JSX.Element;
790
+
791
+ interface PaymentModalShellProps {
792
+ open: boolean;
793
+ title: string;
794
+ subtitle?: string;
795
+ /** Referência da reserva exibida abaixo do subtitle (e.g. "#12345") */
796
+ bookingRef?: string | number;
797
+ /** Quando true exibe spinner e oculta children */
798
+ busy?: boolean;
799
+ busyMessage?: string;
800
+ onClose?: () => void;
801
+ closeLabel?: string;
802
+ /** Quando true desabilita o botão de fechar */
803
+ closeDisabled?: boolean;
804
+ /** Formulário de pagamento — não necessário quando busy */
805
+ children?: React.ReactNode;
806
+ className?: string;
807
+ }
808
+ declare function PaymentModalShell({ open, title, subtitle, bookingRef, busy, busyMessage, onClose, closeLabel, closeDisabled, children, className, }: PaymentModalShellProps): react_jsx_runtime.JSX.Element | null;
809
+
810
+ /**
811
+ * Configuração de aparência do Stripe Elements alinhada com o Design System PlanetaEXO.
812
+ * Passe este objeto como `appearance` ao inicializar `<Elements>` no host app.
813
+ *
814
+ * @example
815
+ * import { stripeAppearance } from "@planetaexo/design-system";
816
+ * const options = { clientSecret, appearance: stripeAppearance, ... };
817
+ * <Elements stripe={stripePromise} options={options}>...</Elements>
818
+ */
819
+ declare const stripeAppearance: {
820
+ readonly theme: "night";
821
+ readonly variables: {
822
+ /** Cor primária — foco, checkbox, botão interno do Stripe */
823
+ readonly colorPrimary: "#22c55e";
824
+ /** Border-radius dos campos do Stripe */
825
+ readonly borderRadius: "8px";
826
+ /** Background dos campos internos */
827
+ readonly colorBackground: "#020617";
828
+ /** Cor base do texto */
829
+ readonly colorText: "#e2e8f0";
830
+ /** Cor do placeholder */
831
+ readonly colorTextPlaceholder: "#64748b";
832
+ /** Cor da borda padrão */
833
+ readonly colorIconTab: "#94a3b8";
834
+ };
835
+ };
836
+ type StripeAppearance = typeof stripeAppearance;
837
+
783
838
  declare function cn(...inputs: ClassValue[]): string;
784
839
 
785
840
  interface LeadCapturePopupConfig {
@@ -832,4 +887,4 @@ declare function LeadCapturePopup({ config: _config, }: {
832
887
  config: LeadCapturePopupConfig;
833
888
  }): react_jsx_runtime.JSX.Element | null;
834
889
 
835
- export { ActivityCard, type ActivityCardProps, type ActivityCardSize, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, cn };
890
+ export { ActivityCard, type ActivityCardProps, type ActivityCardSize, Alert, type AlertProps, type AlertVariant, type BookingAdventure, BookingConfirmation, BookingConfirmationEmail, type BookingConfirmationEmailLabels, type BookingConfirmationEmailProps, type BookingConfirmationLabels, type BookingConfirmationProps, type BookingContact, type BookingDepositInfo, BookingDetails, type BookingDetailsProps, BookingForm, type BookingFormProps, type BookingFormValues, BookingShell, type BookingShellProps, type BookingStatus, type BookingSummaryLineItem, type BookingTraveller, COUNTRIES, type ConfirmationAdventure, type ConfirmationDepositInfo, type ConfirmationLineItem, type ConfirmationTraveller, CounterField, type CounterFieldProps, type CountryOption, CountrySearchField, type CountrySearchFieldProps, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, type DatePickerFieldProps, type FilterGroup, type FilterItem, FilterPanel, type FilterPanelProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, Itinerary, type ItineraryProps, type ItineraryRoute, type ItineraryStop, LeadCapturePopup, type LeadCapturePopupConfig, MenuTrip, type MenuTripProps, type MenuTripSection, type MenuTripVariant, Offer, OfferAdventureCard, type OfferAdventureItem, type OfferAgentInfo, type OfferDepositInfo, type OfferOptionalItem, type OfferProps, type OfferSummaryLineItem, PaymentAmountSelector, type PaymentAmountSelectorProps, type PaymentMethodOption, PaymentMethodSelector, type PaymentMethodSelectorProps, PaymentModalShell, type PaymentModalShellProps, PhoneCountrySelect, PhotoGallery, type PhotoGalleryPhoto, type PhotoGalleryProps, type PhotoGalleryVariant, type PricingOption, PricingTrip, type PricingTripProps, type PricingTripVariant, SiteHeader, type SiteHeaderLanguage, type SiteHeaderLink, type SiteHeaderProps, type SiteHeaderSubItem, type SiteHeaderVariant, type StripeAppearance, type SuggestedTraveller, TermsSection, type TermsSectionProps, ThemeToggle, TripCard, type TripCardCta, type TripCardProps, type TripCardSize, type TripCardStatus, type TripDuration, type TripFaq, TripHeader, type TripHeaderProps, type TripHighlight, type TripInfoGroup, type TripItineraryStep, type TripMeetingPoint, TripPage, type TripPageProps, type TripPricingOption, type TripReview, cn, stripeAppearance };
package/dist/index.js CHANGED
@@ -6402,6 +6402,100 @@ function ActivityCard({
6402
6402
  }
6403
6403
  );
6404
6404
  }
6405
+ var VARIANT_STYLES = {
6406
+ error: "text-destructive border-destructive/30 bg-destructive/5",
6407
+ warning: "text-amber-400 border-amber-500/30 bg-amber-500/10",
6408
+ success: "text-primary border-primary/30 bg-primary/10",
6409
+ info: "text-muted-foreground border-primary/25 bg-primary/5"
6410
+ };
6411
+ function Alert({ variant = "info", children, className }) {
6412
+ return /* @__PURE__ */ jsx(
6413
+ "div",
6414
+ {
6415
+ className: cn(
6416
+ "rounded-lg border px-3 py-2 text-sm font-sans leading-snug",
6417
+ VARIANT_STYLES[variant],
6418
+ className
6419
+ ),
6420
+ children
6421
+ }
6422
+ );
6423
+ }
6424
+ function PaymentModalShell({
6425
+ open,
6426
+ title,
6427
+ subtitle,
6428
+ bookingRef,
6429
+ busy,
6430
+ busyMessage,
6431
+ onClose,
6432
+ closeLabel = "Cancel",
6433
+ closeDisabled,
6434
+ children,
6435
+ className
6436
+ }) {
6437
+ if (!open) return null;
6438
+ return /* @__PURE__ */ jsx(
6439
+ "div",
6440
+ {
6441
+ className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/70 p-4",
6442
+ role: "dialog",
6443
+ "aria-modal": "true",
6444
+ children: /* @__PURE__ */ jsxs(
6445
+ "div",
6446
+ {
6447
+ className: cn(
6448
+ "relative w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl",
6449
+ "max-h-[90vh] overflow-y-auto",
6450
+ className
6451
+ ),
6452
+ children: [
6453
+ onClose && /* @__PURE__ */ jsx(
6454
+ "button",
6455
+ {
6456
+ type: "button",
6457
+ onClick: () => !closeDisabled && onClose(),
6458
+ disabled: closeDisabled,
6459
+ "aria-label": closeLabel,
6460
+ className: "absolute right-4 top-4 text-xl leading-none text-muted-foreground hover:text-foreground disabled:opacity-40 transition-colors",
6461
+ children: "\xD7"
6462
+ }
6463
+ ),
6464
+ /* @__PURE__ */ jsx("h2", { className: "pr-8 text-lg font-bold text-foreground font-heading", children: title }),
6465
+ subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground font-sans", children: subtitle }),
6466
+ bookingRef != null && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground font-sans", children: [
6467
+ "#",
6468
+ bookingRef
6469
+ ] }),
6470
+ busy ? /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 py-6", children: [
6471
+ /* @__PURE__ */ jsx("span", { className: "h-10 w-10 animate-spin rounded-full border-2 border-primary/30 border-t-primary" }),
6472
+ busyMessage && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground font-sans", children: busyMessage })
6473
+ ] }) : /* @__PURE__ */ jsx("div", { className: "mt-6", children })
6474
+ ]
6475
+ }
6476
+ )
6477
+ }
6478
+ );
6479
+ }
6480
+
6481
+ // src/lib/stripeAppearance.ts
6482
+ var stripeAppearance = {
6483
+ theme: "night",
6484
+ variables: {
6485
+ /** Cor primária — foco, checkbox, botão interno do Stripe */
6486
+ colorPrimary: "#22c55e",
6487
+ /** Border-radius dos campos do Stripe */
6488
+ borderRadius: "8px",
6489
+ /** Background dos campos internos */
6490
+ colorBackground: "#020617",
6491
+ /** Cor base do texto */
6492
+ colorText: "#e2e8f0",
6493
+ /** Cor do placeholder */
6494
+ colorTextPlaceholder: "#64748b",
6495
+ /** Cor da borda padrão */
6496
+ colorIconTab: "#94a3b8"
6497
+ }
6498
+ };
6405
6499
  function Input(_a) {
6406
6500
  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
6407
6501
  return /* @__PURE__ */ jsx(
@@ -6765,6 +6859,6 @@ function LeadCapturePopup({
6765
6859
  );
6766
6860
  }
6767
6861
 
6768
- export { ActivityCard, BookingConfirmation, BookingConfirmationEmail, BookingDetails, BookingForm, BookingShell, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PhoneCountrySelect, PhotoGallery, PricingTrip, SiteHeader, TermsSection, ThemeToggle, TripCard, TripHeader, TripPage, cn };
6862
+ export { ActivityCard, Alert, BookingConfirmation, BookingConfirmationEmail, BookingDetails, BookingForm, BookingShell, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LeadCapturePopup, MenuTrip, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, SiteHeader, TermsSection, ThemeToggle, TripCard, TripHeader, TripPage, cn, stripeAppearance };
6769
6863
  //# sourceMappingURL=index.js.map
6770
6864
  //# sourceMappingURL=index.js.map