@planetaexo/design-system 0.10.1 → 0.11.0

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.cjs CHANGED
@@ -4875,13 +4875,27 @@ function FormSection2({
4875
4875
  children,
4876
4876
  className
4877
4877
  }) {
4878
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", className), children: [
4879
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
4880
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
4881
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
4882
- ] }),
4883
- children
4884
- ] });
4878
+ return /* @__PURE__ */ jsxRuntime.jsxs(
4879
+ "div",
4880
+ {
4881
+ className: cn("flex flex-col gap-5", className),
4882
+ style: { breakInside: "avoid" },
4883
+ children: [
4884
+ /* @__PURE__ */ jsxRuntime.jsxs(
4885
+ "div",
4886
+ {
4887
+ className: "flex items-center gap-4",
4888
+ style: { breakAfter: "avoid-page" },
4889
+ children: [
4890
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
4891
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
4892
+ ]
4893
+ }
4894
+ ),
4895
+ children
4896
+ ]
4897
+ }
4898
+ );
4885
4899
  }
4886
4900
  function isFieldEmpty(field, value) {
4887
4901
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -5795,10 +5809,14 @@ function RegistrationSuccessCard({
5795
5809
  adventure,
5796
5810
  booking,
5797
5811
  traveller,
5798
- tripInfoLabels
5812
+ tripInfoLabels,
5813
+ density = "comfortable",
5814
+ submissionTimestamps,
5815
+ submissionTimestampsLabels
5799
5816
  }) {
5800
- var _a, _b, _c, _d, _e, _f, _g, _h;
5817
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
5801
5818
  const isMinimal = variant === "minimal";
5819
+ const isCompact = density === "compact";
5802
5820
  const sorted = isMinimal ? [] : [...fields].sort((a, b) => {
5803
5821
  var _a2, _b2;
5804
5822
  return ((_a2 = a.order) != null ? _a2 : 0) - ((_b2 = b.order) != null ? _b2 : 0);
@@ -5812,62 +5830,114 @@ function RegistrationSuccessCard({
5812
5830
  partnerLabel: (_d = tripInfoLabels == null ? void 0 : tripInfoLabels.partnerLabel) != null ? _d : "Partner",
5813
5831
  travellerLabel: (_e = tripInfoLabels == null ? void 0 : tripInfoLabels.travellerLabel) != null ? _e : "Traveller"
5814
5832
  };
5815
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col gap-10", className), children: [
5816
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 justify-end", children: actions }),
5817
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
5818
- logo !== null && /* eslint-disable-next-line @next/next/no-img-element */
5819
- /* @__PURE__ */ jsxRuntime.jsx(
5820
- "img",
5821
- {
5822
- src: logo != null ? logo : "/logo-planetaexo.png",
5823
- alt: logoAlt,
5824
- className: "h-10 w-auto object-contain"
5825
- }
5833
+ const STL = {
5834
+ submittedAt: (_f = submissionTimestampsLabels == null ? void 0 : submissionTimestampsLabels.submittedAt) != null ? _f : "Submitted",
5835
+ lastUpdatedAt: (_g = submissionTimestampsLabels == null ? void 0 : submissionTimestampsLabels.lastUpdatedAt) != null ? _g : "Last updated"
5836
+ };
5837
+ const hasTimestamps = !isMinimal && !!submissionTimestamps && (!!submissionTimestamps.submittedAt || !!submissionTimestamps.lastUpdatedAt);
5838
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5839
+ "div",
5840
+ {
5841
+ className: cn(
5842
+ "rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col",
5843
+ isCompact ? "gap-6" : "gap-10",
5844
+ className
5826
5845
  ),
5827
- logo === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { size: 28 }) }),
5828
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
5829
- message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
5830
- ] }),
5831
- hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
5832
- adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5833
- /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
5834
- /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
5835
- ] }),
5836
- dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5837
- /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
5838
- /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: dateRange })
5839
- ] }),
5840
- (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5841
- /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
5842
- /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: adventure.partnerName })
5843
- ] }),
5844
- booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5845
- /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
5846
- /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", children: booking.id })
5847
- ] }),
5848
- traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5849
- /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
5850
- /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
5851
- ] })
5852
- ] }) }),
5853
- sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5854
- /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
5855
- /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
5856
- f,
5857
- answers[f.id]
5858
- ) })
5859
- ] }, f.id)) }) }),
5860
- !isMinimal && terms && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: (_f = termsLabels == null ? void 0 : termsLabels.title) != null ? _f : "Terms & Conditions", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
5861
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
5862
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
5863
- "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
5864
- terms.accepted ? "bg-primary" : "bg-destructive"
5865
- ), children: terms.accepted ? "\u2713" : "\u2717" }),
5866
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? (_g = termsLabels == null ? void 0 : termsLabels.accepted) != null ? _g : "Accepted" : (_h = termsLabels == null ? void 0 : termsLabels.notAccepted) != null ? _h : "Not accepted" })
5867
- ] }),
5868
- termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) })
5869
- ] }) })
5870
- ] });
5846
+ children: [
5847
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 justify-end", children: actions }),
5848
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
5849
+ logo !== null && /* eslint-disable-next-line @next/next/no-img-element */
5850
+ /* @__PURE__ */ jsxRuntime.jsx(
5851
+ "img",
5852
+ {
5853
+ src: logo != null ? logo : "/logo-planetaexo.png",
5854
+ alt: logoAlt,
5855
+ className: "h-10 w-auto object-contain"
5856
+ }
5857
+ ),
5858
+ logo === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { size: 28 }) }),
5859
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
5860
+ message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
5861
+ ] }),
5862
+ hasTimestamps && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-0.5 text-xs text-muted-foreground font-ui", children: [
5863
+ (submissionTimestamps == null ? void 0 : submissionTimestamps.submittedAt) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
5864
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
5865
+ STL.submittedAt,
5866
+ ":"
5867
+ ] }),
5868
+ " ",
5869
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: submissionTimestamps.submittedAt })
5870
+ ] }),
5871
+ (submissionTimestamps == null ? void 0 : submissionTimestamps.lastUpdatedAt) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
5872
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
5873
+ STL.lastUpdatedAt,
5874
+ ":"
5875
+ ] }),
5876
+ " ",
5877
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: submissionTimestamps.lastUpdatedAt })
5878
+ ] })
5879
+ ] }),
5880
+ hasTripInfo && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
5881
+ adventure && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5882
+ /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
5883
+ /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
5884
+ ] }),
5885
+ dateRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5886
+ /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
5887
+ /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: dateRange })
5888
+ ] }),
5889
+ (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5890
+ /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
5891
+ /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: adventure.partnerName })
5892
+ ] }),
5893
+ booking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5894
+ /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
5895
+ /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", children: booking.id })
5896
+ ] }),
5897
+ traveller && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5898
+ /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
5899
+ /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
5900
+ ] })
5901
+ ] }) }),
5902
+ sorted.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-4", children: [
5903
+ /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
5904
+ /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
5905
+ f,
5906
+ answers[f.id]
5907
+ ) })
5908
+ ] }, f.id)) }) }),
5909
+ !isMinimal && terms && /* @__PURE__ */ jsxRuntime.jsx(FormSection2, { title: (_h = termsLabels == null ? void 0 : termsLabels.title) != null ? _h : "Terms & Conditions", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
5910
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
5911
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
5912
+ "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
5913
+ terms.accepted ? "bg-primary" : "bg-destructive"
5914
+ ), children: terms.accepted ? "\u2713" : "\u2717" }),
5915
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? (_i = termsLabels == null ? void 0 : termsLabels.accepted) != null ? _i : "Accepted" : (_j = termsLabels == null ? void 0 : termsLabels.notAccepted) != null ? _j : "Not accepted" })
5916
+ ] }),
5917
+ termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
5918
+ "div",
5919
+ {
5920
+ className: cn(
5921
+ "rounded-lg border border-border bg-muted/30",
5922
+ isCompact ? "p-3" : "p-4"
5923
+ ),
5924
+ style: { breakInside: "auto" },
5925
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5926
+ "p",
5927
+ {
5928
+ className: cn(
5929
+ "whitespace-pre-wrap break-words text-foreground font-ui",
5930
+ isCompact ? "text-xs leading-snug" : "text-sm leading-relaxed"
5931
+ ),
5932
+ children: terms.markdown
5933
+ }
5934
+ )
5935
+ }
5936
+ )
5937
+ ] }) })
5938
+ ]
5939
+ }
5940
+ );
5871
5941
  }
5872
5942
  var OTPCodeInput = ({
5873
5943
  value,