@planetaexo/design-system 0.91.0 → 0.92.3

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.
Files changed (7) hide show
  1. package/dist/index.cjs +155 -139
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +15 -1
  4. package/dist/index.d.ts +15 -1
  5. package/dist/index.js +155 -139
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1867,18 +1867,25 @@ function PaymentAmountSelector({
1867
1867
  depositLabel,
1868
1868
  fullLabel,
1869
1869
  value,
1870
- onChange
1870
+ onChange,
1871
+ disabled = false
1871
1872
  }) {
1872
1873
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
1873
1874
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: title }),
1874
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
1875
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 sm:grid-cols-2 gap-2", disabled && "opacity-60"), children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
1875
1876
  "button",
1876
1877
  {
1877
1878
  type: "button",
1878
- onClick: () => onChange(opt),
1879
+ disabled,
1880
+ "aria-disabled": disabled,
1881
+ onClick: () => !disabled && onChange(opt),
1879
1882
  className: cn(
1880
1883
  "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
1881
- value === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
1884
+ disabled && "cursor-not-allowed",
1885
+ value === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : cn(
1886
+ "border-border bg-background text-muted-foreground",
1887
+ !disabled && "hover:border-primary/40"
1888
+ )
1882
1889
  ),
1883
1890
  children: opt === "deposit" ? depositLabel : fullLabel
1884
1891
  },
@@ -1932,7 +1939,11 @@ function PaymentMethodSelector({
1932
1939
  ]
1933
1940
  },
1934
1941
  m.id
1935
- )) })
1942
+ )) }),
1943
+ (() => {
1944
+ const selected = methods.find((m) => m.id === value);
1945
+ return (selected == null ? void 0 : selected.expandedContent) ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: selected.expandedContent }) : null;
1946
+ })()
1936
1947
  ] });
1937
1948
  }
1938
1949
  var TERMS_I18N = {
@@ -13785,6 +13796,8 @@ function SiteHeader({
13785
13796
  const [mobileOpen, setMobileOpen] = React20__namespace.useState(false);
13786
13797
  const [openMobileSection, setOpenMobileSection] = React20__namespace.useState(null);
13787
13798
  const [activeLang, setActiveLang] = React20__namespace.useState(currentLanguage);
13799
+ const [mounted, setMounted] = React20__namespace.useState(false);
13800
+ React20__namespace.useEffect(() => setMounted(true), []);
13788
13801
  const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
13789
13802
  const menuCloseTimer = React20__namespace.useRef(void 0);
13790
13803
  const langCloseTimer = React20__namespace.useRef(void 0);
@@ -13989,157 +14002,160 @@ function SiteHeader({
13989
14002
  )
13990
14003
  ] })
13991
14004
  ] }),
13992
- mobileOpen && /* @__PURE__ */ jsxRuntime.jsxs(
13993
- "div",
13994
- {
13995
- className: cn(
13996
- "fixed inset-0 z-50 lg:hidden flex flex-col",
13997
- variant === "white" ? "bg-white" : "bg-primary-900"
13998
- ),
13999
- children: [
14000
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
14001
- /* @__PURE__ */ jsxRuntime.jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
14002
- "img",
14003
- {
14004
- src: resolvedLogo,
14005
- alt: logoAlt,
14006
- className: "h-14 w-auto select-none",
14007
- draggable: false
14008
- }
14009
- ) }),
14010
- /* @__PURE__ */ jsxRuntime.jsx(
14011
- "button",
14012
- {
14013
- type: "button",
14014
- onClick: () => setMobileOpen(false),
14015
- "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
14016
- className: cn(
14017
- "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
14018
- t.mobileTrigger
14019
- ),
14020
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
14021
- }
14022
- )
14023
- ] }),
14024
- /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
14025
- var _a2, _b2;
14026
- const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
14027
- const isExpanded = openMobileSection === link.label;
14028
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
14029
- hasDropdown ? /* @__PURE__ */ jsxRuntime.jsxs(
14030
- "button",
14005
+ mounted && mobileOpen && reactDom.createPortal(
14006
+ /* @__PURE__ */ jsxRuntime.jsxs(
14007
+ "div",
14008
+ {
14009
+ className: cn(
14010
+ "fixed inset-0 z-[1000] lg:hidden flex flex-col",
14011
+ variant === "white" ? "bg-white" : "bg-primary-900"
14012
+ ),
14013
+ children: [
14014
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
14015
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
14016
+ "img",
14031
14017
  {
14032
- type: "button",
14033
- onClick: () => toggleMobileSection(link.label),
14034
- className: cn(
14035
- "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14036
- t.mobileLink
14037
- ),
14038
- children: [
14039
- link.label,
14040
- /* @__PURE__ */ jsxRuntime.jsx(
14041
- lucideReact.ChevronDownIcon,
14042
- {
14043
- className: cn(
14044
- "h-5 w-5 transition-transform duration-200 opacity-40",
14045
- isExpanded && "rotate-180"
14046
- )
14047
- }
14048
- )
14049
- ]
14018
+ src: resolvedLogo,
14019
+ alt: logoAlt,
14020
+ className: "h-14 w-auto select-none",
14021
+ draggable: false
14050
14022
  }
14051
- ) : /* @__PURE__ */ jsxRuntime.jsx(
14052
- "a",
14023
+ ) }),
14024
+ /* @__PURE__ */ jsxRuntime.jsx(
14025
+ "button",
14053
14026
  {
14054
- href: (_b2 = link.href) != null ? _b2 : "#",
14027
+ type: "button",
14055
14028
  onClick: () => setMobileOpen(false),
14029
+ "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
14056
14030
  className: cn(
14057
- "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14058
- t.mobileLink
14031
+ "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
14032
+ t.mobileTrigger
14059
14033
  ),
14060
- children: link.label
14034
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
14061
14035
  }
14062
- ),
14063
- hasDropdown && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
14064
- var _a3;
14065
- return /* @__PURE__ */ jsxRuntime.jsx(
14036
+ )
14037
+ ] }),
14038
+ /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
14039
+ var _a2, _b2;
14040
+ const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
14041
+ const isExpanded = openMobileSection === link.label;
14042
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
14043
+ hasDropdown ? /* @__PURE__ */ jsxRuntime.jsxs(
14044
+ "button",
14045
+ {
14046
+ type: "button",
14047
+ onClick: () => toggleMobileSection(link.label),
14048
+ className: cn(
14049
+ "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14050
+ t.mobileLink
14051
+ ),
14052
+ children: [
14053
+ link.label,
14054
+ /* @__PURE__ */ jsxRuntime.jsx(
14055
+ lucideReact.ChevronDownIcon,
14056
+ {
14057
+ className: cn(
14058
+ "h-5 w-5 transition-transform duration-200 opacity-40",
14059
+ isExpanded && "rotate-180"
14060
+ )
14061
+ }
14062
+ )
14063
+ ]
14064
+ }
14065
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
14066
14066
  "a",
14067
14067
  {
14068
- href: (_a3 = item.href) != null ? _a3 : "#",
14068
+ href: (_b2 = link.href) != null ? _b2 : "#",
14069
14069
  onClick: () => setMobileOpen(false),
14070
14070
  className: cn(
14071
- "py-3 text-base font-ui font-bold transition-colors border-b",
14072
- t.mobileSub
14071
+ "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14072
+ t.mobileLink
14073
14073
  ),
14074
- children: item.label
14075
- },
14076
- item.label
14077
- );
14078
- }) })
14079
- ] }, link.label);
14080
- }) }),
14081
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
14082
- "shrink-0 px-6 py-5 flex items-center justify-between border-t",
14083
- variant === "white" ? "border-border" : "border-white/10"
14084
- ), children: [
14085
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
14086
- const isActive = lang.code === activeLang;
14087
- return /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.Fragment, { children: [
14088
- i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
14089
- "text-xs select-none",
14090
- variant === "white" ? "text-border" : "text-white/15"
14091
- ), children: "\xB7" }),
14074
+ children: link.label
14075
+ }
14076
+ ),
14077
+ hasDropdown && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
14078
+ var _a3;
14079
+ return /* @__PURE__ */ jsxRuntime.jsx(
14080
+ "a",
14081
+ {
14082
+ href: (_a3 = item.href) != null ? _a3 : "#",
14083
+ onClick: () => setMobileOpen(false),
14084
+ className: cn(
14085
+ "py-3 text-base font-ui font-bold transition-colors border-b",
14086
+ t.mobileSub
14087
+ ),
14088
+ children: item.label
14089
+ },
14090
+ item.label
14091
+ );
14092
+ }) })
14093
+ ] }, link.label);
14094
+ }) }),
14095
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
14096
+ "shrink-0 px-6 py-5 flex items-center justify-between border-t",
14097
+ variant === "white" ? "border-border" : "border-white/10"
14098
+ ), children: [
14099
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
14100
+ const isActive = lang.code === activeLang;
14101
+ return /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.Fragment, { children: [
14102
+ i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
14103
+ "text-xs select-none",
14104
+ variant === "white" ? "text-border" : "text-white/15"
14105
+ ), children: "\xB7" }),
14106
+ /* @__PURE__ */ jsxRuntime.jsx(
14107
+ "button",
14108
+ {
14109
+ type: "button",
14110
+ onClick: () => handleLangSelect(lang.code),
14111
+ className: cn(
14112
+ "font-ui font-black transition-all duration-150 rounded-full",
14113
+ isActive ? cn(
14114
+ "text-sm px-3 py-1 border",
14115
+ variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
14116
+ ) : cn(
14117
+ "text-xs px-2 py-1",
14118
+ variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
14119
+ )
14120
+ ),
14121
+ children: lang.code
14122
+ }
14123
+ )
14124
+ ] }, lang.code);
14125
+ }) }),
14126
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
14092
14127
  /* @__PURE__ */ jsxRuntime.jsx(
14093
14128
  "button",
14094
14129
  {
14095
14130
  type: "button",
14096
- onClick: () => handleLangSelect(lang.code),
14097
- className: cn(
14098
- "font-ui font-black transition-all duration-150 rounded-full",
14099
- isActive ? cn(
14100
- "text-sm px-3 py-1 border",
14101
- variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
14102
- ) : cn(
14103
- "text-xs px-2 py-1",
14104
- variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
14105
- )
14106
- ),
14107
- children: lang.code
14131
+ onClick: () => {
14132
+ onSearch == null ? void 0 : onSearch();
14133
+ setMobileOpen(false);
14134
+ },
14135
+ "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
14136
+ className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14137
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "h-[18px] w-[18px]" })
14138
+ }
14139
+ ),
14140
+ /* @__PURE__ */ jsxRuntime.jsx(
14141
+ "button",
14142
+ {
14143
+ type: "button",
14144
+ onClick: () => {
14145
+ onAccount == null ? void 0 : onAccount();
14146
+ setMobileOpen(false);
14147
+ },
14148
+ "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
14149
+ className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14150
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserIcon, { className: "h-[18px] w-[18px]" })
14108
14151
  }
14109
14152
  )
14110
- ] }, lang.code);
14111
- }) }),
14112
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
14113
- /* @__PURE__ */ jsxRuntime.jsx(
14114
- "button",
14115
- {
14116
- type: "button",
14117
- onClick: () => {
14118
- onSearch == null ? void 0 : onSearch();
14119
- setMobileOpen(false);
14120
- },
14121
- "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
14122
- className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14123
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "h-[18px] w-[18px]" })
14124
- }
14125
- ),
14126
- /* @__PURE__ */ jsxRuntime.jsx(
14127
- "button",
14128
- {
14129
- type: "button",
14130
- onClick: () => {
14131
- onAccount == null ? void 0 : onAccount();
14132
- setMobileOpen(false);
14133
- },
14134
- "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
14135
- className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14136
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserIcon, { className: "h-[18px] w-[18px]" })
14137
- }
14138
- )
14153
+ ] })
14139
14154
  ] })
14140
- ] })
14141
- ]
14142
- }
14155
+ ]
14156
+ }
14157
+ ),
14158
+ document.body
14143
14159
  )
14144
14160
  ]
14145
14161
  }
@@ -19928,7 +19944,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
19928
19944
  type: "button",
19929
19945
  onClick: () => scrollByCard(-1),
19930
19946
  "aria-label": "Previous expeditions",
19931
- className: "flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground",
19947
+ className: "hidden h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground lg:flex",
19932
19948
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5" })
19933
19949
  }
19934
19950
  ),
@@ -19938,7 +19954,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
19938
19954
  type: "button",
19939
19955
  onClick: () => scrollByCard(1),
19940
19956
  "aria-label": "Next expeditions",
19941
- className: "flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground",
19957
+ className: "hidden h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground lg:flex",
19942
19958
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5" })
19943
19959
  }
19944
19960
  )