@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 +134 -64
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +21 -1
- package/dist/index.d.ts +21 -1
- package/dist/index.js +134 -64
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -813,8 +813,28 @@ interface RegistrationSuccessCardProps {
|
|
|
813
813
|
partnerLabel?: string;
|
|
814
814
|
travellerLabel?: string;
|
|
815
815
|
};
|
|
816
|
+
/**
|
|
817
|
+
* Visual density of the card.
|
|
818
|
+
* - `"comfortable"` (default): standard spacing — used by the post-submit web flow.
|
|
819
|
+
* - `"compact"`: tighter gaps and smaller terms typography, optimized for A4 PDF export.
|
|
820
|
+
*/
|
|
821
|
+
density?: "compact" | "comfortable";
|
|
822
|
+
/**
|
|
823
|
+
* Optional submission timestamp block, rendered after the header.
|
|
824
|
+
* Both fields are pre-formatted strings (e.g. `"27/04/2026 14:32 (UTC-3)"`).
|
|
825
|
+
* `lastUpdatedAt` should be omitted by the caller when it equals `submittedAt`.
|
|
826
|
+
*/
|
|
827
|
+
submissionTimestamps?: {
|
|
828
|
+
submittedAt?: string;
|
|
829
|
+
lastUpdatedAt?: string;
|
|
830
|
+
};
|
|
831
|
+
/** i18n-friendly labels for the timestamp block. Defaults to English. */
|
|
832
|
+
submissionTimestampsLabels?: {
|
|
833
|
+
submittedAt?: string;
|
|
834
|
+
lastUpdatedAt?: string;
|
|
835
|
+
};
|
|
816
836
|
}
|
|
817
|
-
declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
|
|
837
|
+
declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
|
|
818
838
|
|
|
819
839
|
interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
820
840
|
label: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -813,8 +813,28 @@ interface RegistrationSuccessCardProps {
|
|
|
813
813
|
partnerLabel?: string;
|
|
814
814
|
travellerLabel?: string;
|
|
815
815
|
};
|
|
816
|
+
/**
|
|
817
|
+
* Visual density of the card.
|
|
818
|
+
* - `"comfortable"` (default): standard spacing — used by the post-submit web flow.
|
|
819
|
+
* - `"compact"`: tighter gaps and smaller terms typography, optimized for A4 PDF export.
|
|
820
|
+
*/
|
|
821
|
+
density?: "compact" | "comfortable";
|
|
822
|
+
/**
|
|
823
|
+
* Optional submission timestamp block, rendered after the header.
|
|
824
|
+
* Both fields are pre-formatted strings (e.g. `"27/04/2026 14:32 (UTC-3)"`).
|
|
825
|
+
* `lastUpdatedAt` should be omitted by the caller when it equals `submittedAt`.
|
|
826
|
+
*/
|
|
827
|
+
submissionTimestamps?: {
|
|
828
|
+
submittedAt?: string;
|
|
829
|
+
lastUpdatedAt?: string;
|
|
830
|
+
};
|
|
831
|
+
/** i18n-friendly labels for the timestamp block. Defaults to English. */
|
|
832
|
+
submissionTimestampsLabels?: {
|
|
833
|
+
submittedAt?: string;
|
|
834
|
+
lastUpdatedAt?: string;
|
|
835
|
+
};
|
|
816
836
|
}
|
|
817
|
-
declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
|
|
837
|
+
declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
|
|
818
838
|
|
|
819
839
|
interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
820
840
|
label: string;
|
package/dist/index.js
CHANGED
|
@@ -4854,13 +4854,27 @@ function FormSection2({
|
|
|
4854
4854
|
children,
|
|
4855
4855
|
className
|
|
4856
4856
|
}) {
|
|
4857
|
-
return /* @__PURE__ */ jsxs(
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
|
|
4861
|
-
|
|
4862
|
-
|
|
4863
|
-
|
|
4857
|
+
return /* @__PURE__ */ jsxs(
|
|
4858
|
+
"div",
|
|
4859
|
+
{
|
|
4860
|
+
className: cn("flex flex-col gap-5", className),
|
|
4861
|
+
style: { breakInside: "avoid" },
|
|
4862
|
+
children: [
|
|
4863
|
+
/* @__PURE__ */ jsxs(
|
|
4864
|
+
"div",
|
|
4865
|
+
{
|
|
4866
|
+
className: "flex items-center gap-4",
|
|
4867
|
+
style: { breakAfter: "avoid-page" },
|
|
4868
|
+
children: [
|
|
4869
|
+
/* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-foreground whitespace-nowrap font-heading", children: title }),
|
|
4870
|
+
/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
|
|
4871
|
+
]
|
|
4872
|
+
}
|
|
4873
|
+
),
|
|
4874
|
+
children
|
|
4875
|
+
]
|
|
4876
|
+
}
|
|
4877
|
+
);
|
|
4864
4878
|
}
|
|
4865
4879
|
function isFieldEmpty(field, value) {
|
|
4866
4880
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
@@ -5774,10 +5788,14 @@ function RegistrationSuccessCard({
|
|
|
5774
5788
|
adventure,
|
|
5775
5789
|
booking,
|
|
5776
5790
|
traveller,
|
|
5777
|
-
tripInfoLabels
|
|
5791
|
+
tripInfoLabels,
|
|
5792
|
+
density = "comfortable",
|
|
5793
|
+
submissionTimestamps,
|
|
5794
|
+
submissionTimestampsLabels
|
|
5778
5795
|
}) {
|
|
5779
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5796
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
5780
5797
|
const isMinimal = variant === "minimal";
|
|
5798
|
+
const isCompact = density === "compact";
|
|
5781
5799
|
const sorted = isMinimal ? [] : [...fields].sort((a, b) => {
|
|
5782
5800
|
var _a2, _b2;
|
|
5783
5801
|
return ((_a2 = a.order) != null ? _a2 : 0) - ((_b2 = b.order) != null ? _b2 : 0);
|
|
@@ -5791,62 +5809,114 @@ function RegistrationSuccessCard({
|
|
|
5791
5809
|
partnerLabel: (_d = tripInfoLabels == null ? void 0 : tripInfoLabels.partnerLabel) != null ? _d : "Partner",
|
|
5792
5810
|
travellerLabel: (_e = tripInfoLabels == null ? void 0 : tripInfoLabels.travellerLabel) != null ? _e : "Traveller"
|
|
5793
5811
|
};
|
|
5794
|
-
|
|
5795
|
-
|
|
5796
|
-
|
|
5797
|
-
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5812
|
+
const STL = {
|
|
5813
|
+
submittedAt: (_f = submissionTimestampsLabels == null ? void 0 : submissionTimestampsLabels.submittedAt) != null ? _f : "Submitted",
|
|
5814
|
+
lastUpdatedAt: (_g = submissionTimestampsLabels == null ? void 0 : submissionTimestampsLabels.lastUpdatedAt) != null ? _g : "Last updated"
|
|
5815
|
+
};
|
|
5816
|
+
const hasTimestamps = !isMinimal && !!submissionTimestamps && (!!submissionTimestamps.submittedAt || !!submissionTimestamps.lastUpdatedAt);
|
|
5817
|
+
return /* @__PURE__ */ jsxs(
|
|
5818
|
+
"div",
|
|
5819
|
+
{
|
|
5820
|
+
className: cn(
|
|
5821
|
+
"rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col",
|
|
5822
|
+
isCompact ? "gap-6" : "gap-10",
|
|
5823
|
+
className
|
|
5805
5824
|
),
|
|
5806
|
-
|
|
5807
|
-
|
|
5808
|
-
|
|
5809
|
-
|
|
5810
|
-
|
|
5811
|
-
|
|
5812
|
-
|
|
5813
|
-
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
|
|
5826
|
-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
|
|
5832
|
-
|
|
5833
|
-
|
|
5834
|
-
|
|
5835
|
-
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
|
|
5841
|
-
|
|
5842
|
-
|
|
5843
|
-
|
|
5844
|
-
|
|
5845
|
-
|
|
5846
|
-
|
|
5847
|
-
|
|
5848
|
-
|
|
5849
|
-
|
|
5825
|
+
children: [
|
|
5826
|
+
actions && /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-end", children: actions }),
|
|
5827
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
|
|
5828
|
+
logo !== null && /* eslint-disable-next-line @next/next/no-img-element */
|
|
5829
|
+
/* @__PURE__ */ jsx(
|
|
5830
|
+
"img",
|
|
5831
|
+
{
|
|
5832
|
+
src: logo != null ? logo : "/logo-planetaexo.png",
|
|
5833
|
+
alt: logoAlt,
|
|
5834
|
+
className: "h-10 w-auto object-contain"
|
|
5835
|
+
}
|
|
5836
|
+
),
|
|
5837
|
+
logo === void 0 && /* @__PURE__ */ jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28 }) }),
|
|
5838
|
+
/* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
|
|
5839
|
+
message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
|
|
5840
|
+
] }),
|
|
5841
|
+
hasTimestamps && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-0.5 text-xs text-muted-foreground font-ui", children: [
|
|
5842
|
+
(submissionTimestamps == null ? void 0 : submissionTimestamps.submittedAt) && /* @__PURE__ */ jsxs("div", { children: [
|
|
5843
|
+
/* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
|
|
5844
|
+
STL.submittedAt,
|
|
5845
|
+
":"
|
|
5846
|
+
] }),
|
|
5847
|
+
" ",
|
|
5848
|
+
/* @__PURE__ */ jsx("span", { className: "tabular-nums", children: submissionTimestamps.submittedAt })
|
|
5849
|
+
] }),
|
|
5850
|
+
(submissionTimestamps == null ? void 0 : submissionTimestamps.lastUpdatedAt) && /* @__PURE__ */ jsxs("div", { children: [
|
|
5851
|
+
/* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
|
|
5852
|
+
STL.lastUpdatedAt,
|
|
5853
|
+
":"
|
|
5854
|
+
] }),
|
|
5855
|
+
" ",
|
|
5856
|
+
/* @__PURE__ */ jsx("span", { className: "tabular-nums", children: submissionTimestamps.lastUpdatedAt })
|
|
5857
|
+
] })
|
|
5858
|
+
] }),
|
|
5859
|
+
hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
|
|
5860
|
+
adventure && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
|
|
5861
|
+
/* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
|
|
5862
|
+
/* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
|
|
5863
|
+
] }),
|
|
5864
|
+
dateRange && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
|
|
5865
|
+
/* @__PURE__ */ 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" }),
|
|
5866
|
+
/* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: dateRange })
|
|
5867
|
+
] }),
|
|
5868
|
+
(adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
|
|
5869
|
+
/* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
|
|
5870
|
+
/* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: adventure.partnerName })
|
|
5871
|
+
] }),
|
|
5872
|
+
booking && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
|
|
5873
|
+
/* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
|
|
5874
|
+
/* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", children: booking.id })
|
|
5875
|
+
] }),
|
|
5876
|
+
traveller && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
|
|
5877
|
+
/* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
|
|
5878
|
+
/* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
|
|
5879
|
+
] })
|
|
5880
|
+
] }) }),
|
|
5881
|
+
sorted.length > 0 && /* @__PURE__ */ jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
|
|
5882
|
+
/* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
|
|
5883
|
+
/* @__PURE__ */ 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)))(
|
|
5884
|
+
f,
|
|
5885
|
+
answers[f.id]
|
|
5886
|
+
) })
|
|
5887
|
+
] }, f.id)) }) }),
|
|
5888
|
+
!isMinimal && terms && /* @__PURE__ */ jsx(FormSection2, { title: (_h = termsLabels == null ? void 0 : termsLabels.title) != null ? _h : "Terms & Conditions", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
|
|
5889
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
5890
|
+
/* @__PURE__ */ jsx("div", { className: cn(
|
|
5891
|
+
"inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
|
|
5892
|
+
terms.accepted ? "bg-primary" : "bg-destructive"
|
|
5893
|
+
), children: terms.accepted ? "\u2713" : "\u2717" }),
|
|
5894
|
+
/* @__PURE__ */ 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" })
|
|
5895
|
+
] }),
|
|
5896
|
+
termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsx(
|
|
5897
|
+
"div",
|
|
5898
|
+
{
|
|
5899
|
+
className: cn(
|
|
5900
|
+
"rounded-lg border border-border bg-muted/30",
|
|
5901
|
+
isCompact ? "p-3" : "p-4"
|
|
5902
|
+
),
|
|
5903
|
+
style: { breakInside: "auto" },
|
|
5904
|
+
children: /* @__PURE__ */ jsx(
|
|
5905
|
+
"p",
|
|
5906
|
+
{
|
|
5907
|
+
className: cn(
|
|
5908
|
+
"whitespace-pre-wrap break-words text-foreground font-ui",
|
|
5909
|
+
isCompact ? "text-xs leading-snug" : "text-sm leading-relaxed"
|
|
5910
|
+
),
|
|
5911
|
+
children: terms.markdown
|
|
5912
|
+
}
|
|
5913
|
+
)
|
|
5914
|
+
}
|
|
5915
|
+
)
|
|
5916
|
+
] }) })
|
|
5917
|
+
]
|
|
5918
|
+
}
|
|
5919
|
+
);
|
|
5850
5920
|
}
|
|
5851
5921
|
var OTPCodeInput = ({
|
|
5852
5922
|
value,
|