@planetaexo/design-system 0.92.2 → 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 (5) hide show
  1. package/dist/index.cjs +139 -134
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +139 -134
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -13796,6 +13796,8 @@ function SiteHeader({
13796
13796
  const [mobileOpen, setMobileOpen] = React20__namespace.useState(false);
13797
13797
  const [openMobileSection, setOpenMobileSection] = React20__namespace.useState(null);
13798
13798
  const [activeLang, setActiveLang] = React20__namespace.useState(currentLanguage);
13799
+ const [mounted, setMounted] = React20__namespace.useState(false);
13800
+ React20__namespace.useEffect(() => setMounted(true), []);
13799
13801
  const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
13800
13802
  const menuCloseTimer = React20__namespace.useRef(void 0);
13801
13803
  const langCloseTimer = React20__namespace.useRef(void 0);
@@ -14000,157 +14002,160 @@ function SiteHeader({
14000
14002
  )
14001
14003
  ] })
14002
14004
  ] }),
14003
- mobileOpen && /* @__PURE__ */ jsxRuntime.jsxs(
14004
- "div",
14005
- {
14006
- className: cn(
14007
- "fixed inset-0 z-50 lg:hidden flex flex-col",
14008
- variant === "white" ? "bg-white" : "bg-primary-900"
14009
- ),
14010
- children: [
14011
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
14012
- /* @__PURE__ */ jsxRuntime.jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
14013
- "img",
14014
- {
14015
- src: resolvedLogo,
14016
- alt: logoAlt,
14017
- className: "h-14 w-auto select-none",
14018
- draggable: false
14019
- }
14020
- ) }),
14021
- /* @__PURE__ */ jsxRuntime.jsx(
14022
- "button",
14023
- {
14024
- type: "button",
14025
- onClick: () => setMobileOpen(false),
14026
- "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
14027
- className: cn(
14028
- "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
14029
- t.mobileTrigger
14030
- ),
14031
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
14032
- }
14033
- )
14034
- ] }),
14035
- /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
14036
- var _a2, _b2;
14037
- const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
14038
- const isExpanded = openMobileSection === link.label;
14039
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
14040
- hasDropdown ? /* @__PURE__ */ jsxRuntime.jsxs(
14041
- "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",
14042
14017
  {
14043
- type: "button",
14044
- onClick: () => toggleMobileSection(link.label),
14045
- className: cn(
14046
- "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14047
- t.mobileLink
14048
- ),
14049
- children: [
14050
- link.label,
14051
- /* @__PURE__ */ jsxRuntime.jsx(
14052
- lucideReact.ChevronDownIcon,
14053
- {
14054
- className: cn(
14055
- "h-5 w-5 transition-transform duration-200 opacity-40",
14056
- isExpanded && "rotate-180"
14057
- )
14058
- }
14059
- )
14060
- ]
14018
+ src: resolvedLogo,
14019
+ alt: logoAlt,
14020
+ className: "h-14 w-auto select-none",
14021
+ draggable: false
14061
14022
  }
14062
- ) : /* @__PURE__ */ jsxRuntime.jsx(
14063
- "a",
14023
+ ) }),
14024
+ /* @__PURE__ */ jsxRuntime.jsx(
14025
+ "button",
14064
14026
  {
14065
- href: (_b2 = link.href) != null ? _b2 : "#",
14027
+ type: "button",
14066
14028
  onClick: () => setMobileOpen(false),
14029
+ "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
14067
14030
  className: cn(
14068
- "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14069
- t.mobileLink
14031
+ "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
14032
+ t.mobileTrigger
14070
14033
  ),
14071
- children: link.label
14034
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "h-5 w-5" })
14072
14035
  }
14073
- ),
14074
- hasDropdown && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
14075
- var _a3;
14076
- 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(
14077
14066
  "a",
14078
14067
  {
14079
- href: (_a3 = item.href) != null ? _a3 : "#",
14068
+ href: (_b2 = link.href) != null ? _b2 : "#",
14080
14069
  onClick: () => setMobileOpen(false),
14081
14070
  className: cn(
14082
- "py-3 text-base font-ui font-bold transition-colors border-b",
14083
- t.mobileSub
14071
+ "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14072
+ t.mobileLink
14084
14073
  ),
14085
- children: item.label
14086
- },
14087
- item.label
14088
- );
14089
- }) })
14090
- ] }, link.label);
14091
- }) }),
14092
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
14093
- "shrink-0 px-6 py-5 flex items-center justify-between border-t",
14094
- variant === "white" ? "border-border" : "border-white/10"
14095
- ), children: [
14096
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
14097
- const isActive = lang.code === activeLang;
14098
- return /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.Fragment, { children: [
14099
- i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
14100
- "text-xs select-none",
14101
- variant === "white" ? "text-border" : "text-white/15"
14102
- ), 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: [
14103
14127
  /* @__PURE__ */ jsxRuntime.jsx(
14104
14128
  "button",
14105
14129
  {
14106
14130
  type: "button",
14107
- onClick: () => handleLangSelect(lang.code),
14108
- className: cn(
14109
- "font-ui font-black transition-all duration-150 rounded-full",
14110
- isActive ? cn(
14111
- "text-sm px-3 py-1 border",
14112
- variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
14113
- ) : cn(
14114
- "text-xs px-2 py-1",
14115
- variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
14116
- )
14117
- ),
14118
- 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]" })
14119
14151
  }
14120
14152
  )
14121
- ] }, lang.code);
14122
- }) }),
14123
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
14124
- /* @__PURE__ */ jsxRuntime.jsx(
14125
- "button",
14126
- {
14127
- type: "button",
14128
- onClick: () => {
14129
- onSearch == null ? void 0 : onSearch();
14130
- setMobileOpen(false);
14131
- },
14132
- "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
14133
- className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14134
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "h-[18px] w-[18px]" })
14135
- }
14136
- ),
14137
- /* @__PURE__ */ jsxRuntime.jsx(
14138
- "button",
14139
- {
14140
- type: "button",
14141
- onClick: () => {
14142
- onAccount == null ? void 0 : onAccount();
14143
- setMobileOpen(false);
14144
- },
14145
- "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
14146
- className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14147
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserIcon, { className: "h-[18px] w-[18px]" })
14148
- }
14149
- )
14153
+ ] })
14150
14154
  ] })
14151
- ] })
14152
- ]
14153
- }
14155
+ ]
14156
+ }
14157
+ ),
14158
+ document.body
14154
14159
  )
14155
14160
  ]
14156
14161
  }
@@ -19939,7 +19944,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
19939
19944
  type: "button",
19940
19945
  onClick: () => scrollByCard(-1),
19941
19946
  "aria-label": "Previous expeditions",
19942
- 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",
19943
19948
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5" })
19944
19949
  }
19945
19950
  ),
@@ -19949,7 +19954,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
19949
19954
  type: "button",
19950
19955
  onClick: () => scrollByCard(1),
19951
19956
  "aria-label": "Next expeditions",
19952
- 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",
19953
19958
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5" })
19954
19959
  }
19955
19960
  )