@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.js CHANGED
@@ -13775,6 +13775,8 @@ function SiteHeader({
13775
13775
  const [mobileOpen, setMobileOpen] = React20.useState(false);
13776
13776
  const [openMobileSection, setOpenMobileSection] = React20.useState(null);
13777
13777
  const [activeLang, setActiveLang] = React20.useState(currentLanguage);
13778
+ const [mounted, setMounted] = React20.useState(false);
13779
+ React20.useEffect(() => setMounted(true), []);
13778
13780
  const toggleMobileSection = (label) => setOpenMobileSection((prev) => prev === label ? null : label);
13779
13781
  const menuCloseTimer = React20.useRef(void 0);
13780
13782
  const langCloseTimer = React20.useRef(void 0);
@@ -13979,157 +13981,160 @@ function SiteHeader({
13979
13981
  )
13980
13982
  ] })
13981
13983
  ] }),
13982
- mobileOpen && /* @__PURE__ */ jsxs(
13983
- "div",
13984
- {
13985
- className: cn(
13986
- "fixed inset-0 z-50 lg:hidden flex flex-col",
13987
- variant === "white" ? "bg-white" : "bg-primary-900"
13988
- ),
13989
- children: [
13990
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
13991
- /* @__PURE__ */ jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx(
13992
- "img",
13993
- {
13994
- src: resolvedLogo,
13995
- alt: logoAlt,
13996
- className: "h-14 w-auto select-none",
13997
- draggable: false
13998
- }
13999
- ) }),
14000
- /* @__PURE__ */ jsx(
14001
- "button",
14002
- {
14003
- type: "button",
14004
- onClick: () => setMobileOpen(false),
14005
- "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
14006
- className: cn(
14007
- "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
14008
- t.mobileTrigger
14009
- ),
14010
- children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
14011
- }
14012
- )
14013
- ] }),
14014
- /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
14015
- var _a2, _b2;
14016
- const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
14017
- const isExpanded = openMobileSection === link.label;
14018
- return /* @__PURE__ */ jsxs("div", { children: [
14019
- hasDropdown ? /* @__PURE__ */ jsxs(
14020
- "button",
13984
+ mounted && mobileOpen && createPortal(
13985
+ /* @__PURE__ */ jsxs(
13986
+ "div",
13987
+ {
13988
+ className: cn(
13989
+ "fixed inset-0 z-[1000] lg:hidden flex flex-col",
13990
+ variant === "white" ? "bg-white" : "bg-primary-900"
13991
+ ),
13992
+ children: [
13993
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 h-[72px] shrink-0 border-b border-white/8", children: [
13994
+ /* @__PURE__ */ jsx("a", { href: logoHref, className: "shrink-0 flex items-center", onClick: () => setMobileOpen(false), children: /* @__PURE__ */ jsx(
13995
+ "img",
14021
13996
  {
14022
- type: "button",
14023
- onClick: () => toggleMobileSection(link.label),
14024
- className: cn(
14025
- "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14026
- t.mobileLink
14027
- ),
14028
- children: [
14029
- link.label,
14030
- /* @__PURE__ */ jsx(
14031
- ChevronDownIcon,
14032
- {
14033
- className: cn(
14034
- "h-5 w-5 transition-transform duration-200 opacity-40",
14035
- isExpanded && "rotate-180"
14036
- )
14037
- }
14038
- )
14039
- ]
13997
+ src: resolvedLogo,
13998
+ alt: logoAlt,
13999
+ className: "h-14 w-auto select-none",
14000
+ draggable: false
14040
14001
  }
14041
- ) : /* @__PURE__ */ jsx(
14042
- "a",
14002
+ ) }),
14003
+ /* @__PURE__ */ jsx(
14004
+ "button",
14043
14005
  {
14044
- href: (_b2 = link.href) != null ? _b2 : "#",
14006
+ type: "button",
14045
14007
  onClick: () => setMobileOpen(false),
14008
+ "aria-label": (_e = labels == null ? void 0 : labels.closeMenu) != null ? _e : "Close menu",
14046
14009
  className: cn(
14047
- "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14048
- t.mobileLink
14010
+ "flex h-9 w-9 items-center justify-center rounded-full transition-colors",
14011
+ t.mobileTrigger
14049
14012
  ),
14050
- children: link.label
14013
+ children: /* @__PURE__ */ jsx(XIcon, { className: "h-5 w-5" })
14051
14014
  }
14052
- ),
14053
- hasDropdown && isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
14054
- var _a3;
14055
- return /* @__PURE__ */ jsx(
14015
+ )
14016
+ ] }),
14017
+ /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto px-6 py-6 flex flex-col gap-1", children: links.map((link) => {
14018
+ var _a2, _b2;
14019
+ const hasDropdown = !!((_a2 = link.items) == null ? void 0 : _a2.length);
14020
+ const isExpanded = openMobileSection === link.label;
14021
+ return /* @__PURE__ */ jsxs("div", { children: [
14022
+ hasDropdown ? /* @__PURE__ */ jsxs(
14023
+ "button",
14024
+ {
14025
+ type: "button",
14026
+ onClick: () => toggleMobileSection(link.label),
14027
+ className: cn(
14028
+ "flex items-center justify-between w-full py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14029
+ t.mobileLink
14030
+ ),
14031
+ children: [
14032
+ link.label,
14033
+ /* @__PURE__ */ jsx(
14034
+ ChevronDownIcon,
14035
+ {
14036
+ className: cn(
14037
+ "h-5 w-5 transition-transform duration-200 opacity-40",
14038
+ isExpanded && "rotate-180"
14039
+ )
14040
+ }
14041
+ )
14042
+ ]
14043
+ }
14044
+ ) : /* @__PURE__ */ jsx(
14056
14045
  "a",
14057
14046
  {
14058
- href: (_a3 = item.href) != null ? _a3 : "#",
14047
+ href: (_b2 = link.href) != null ? _b2 : "#",
14059
14048
  onClick: () => setMobileOpen(false),
14060
14049
  className: cn(
14061
- "py-3 text-base font-ui font-bold transition-colors border-b",
14062
- t.mobileSub
14050
+ "flex items-center py-4 text-xl font-ui font-black transition-colors border-b border-white/8",
14051
+ t.mobileLink
14063
14052
  ),
14064
- children: item.label
14065
- },
14066
- item.label
14067
- );
14068
- }) })
14069
- ] }, link.label);
14070
- }) }),
14071
- /* @__PURE__ */ jsxs("div", { className: cn(
14072
- "shrink-0 px-6 py-5 flex items-center justify-between border-t",
14073
- variant === "white" ? "border-border" : "border-white/10"
14074
- ), children: [
14075
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
14076
- const isActive = lang.code === activeLang;
14077
- return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
14078
- i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
14079
- "text-xs select-none",
14080
- variant === "white" ? "text-border" : "text-white/15"
14081
- ), children: "\xB7" }),
14053
+ children: link.label
14054
+ }
14055
+ ),
14056
+ hasDropdown && isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 pl-4 pb-2", children: link.items.map((item) => {
14057
+ var _a3;
14058
+ return /* @__PURE__ */ jsx(
14059
+ "a",
14060
+ {
14061
+ href: (_a3 = item.href) != null ? _a3 : "#",
14062
+ onClick: () => setMobileOpen(false),
14063
+ className: cn(
14064
+ "py-3 text-base font-ui font-bold transition-colors border-b",
14065
+ t.mobileSub
14066
+ ),
14067
+ children: item.label
14068
+ },
14069
+ item.label
14070
+ );
14071
+ }) })
14072
+ ] }, link.label);
14073
+ }) }),
14074
+ /* @__PURE__ */ jsxs("div", { className: cn(
14075
+ "shrink-0 px-6 py-5 flex items-center justify-between border-t",
14076
+ variant === "white" ? "border-border" : "border-white/10"
14077
+ ), children: [
14078
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 flex-wrap", children: languages.map((lang, i) => {
14079
+ const isActive = lang.code === activeLang;
14080
+ return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
14081
+ i > 0 && /* @__PURE__ */ jsx("span", { className: cn(
14082
+ "text-xs select-none",
14083
+ variant === "white" ? "text-border" : "text-white/15"
14084
+ ), children: "\xB7" }),
14085
+ /* @__PURE__ */ jsx(
14086
+ "button",
14087
+ {
14088
+ type: "button",
14089
+ onClick: () => handleLangSelect(lang.code),
14090
+ className: cn(
14091
+ "font-ui font-black transition-all duration-150 rounded-full",
14092
+ isActive ? cn(
14093
+ "text-sm px-3 py-1 border",
14094
+ variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
14095
+ ) : cn(
14096
+ "text-xs px-2 py-1",
14097
+ variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
14098
+ )
14099
+ ),
14100
+ children: lang.code
14101
+ }
14102
+ )
14103
+ ] }, lang.code);
14104
+ }) }),
14105
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
14082
14106
  /* @__PURE__ */ jsx(
14083
14107
  "button",
14084
14108
  {
14085
14109
  type: "button",
14086
- onClick: () => handleLangSelect(lang.code),
14087
- className: cn(
14088
- "font-ui font-black transition-all duration-150 rounded-full",
14089
- isActive ? cn(
14090
- "text-sm px-3 py-1 border",
14091
- variant === "white" ? "text-primary border-primary bg-primary/8" : "text-primary-400 border-primary-400/50 bg-primary-400/10"
14092
- ) : cn(
14093
- "text-xs px-2 py-1",
14094
- variant === "white" ? "text-muted-foreground hover:text-foreground" : "text-white/35 hover:text-white/70"
14095
- )
14096
- ),
14097
- children: lang.code
14110
+ onClick: () => {
14111
+ onSearch == null ? void 0 : onSearch();
14112
+ setMobileOpen(false);
14113
+ },
14114
+ "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
14115
+ className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14116
+ children: /* @__PURE__ */ jsx(SearchIcon, { className: "h-[18px] w-[18px]" })
14117
+ }
14118
+ ),
14119
+ /* @__PURE__ */ jsx(
14120
+ "button",
14121
+ {
14122
+ type: "button",
14123
+ onClick: () => {
14124
+ onAccount == null ? void 0 : onAccount();
14125
+ setMobileOpen(false);
14126
+ },
14127
+ "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
14128
+ className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14129
+ children: /* @__PURE__ */ jsx(UserIcon, { className: "h-[18px] w-[18px]" })
14098
14130
  }
14099
14131
  )
14100
- ] }, lang.code);
14101
- }) }),
14102
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
14103
- /* @__PURE__ */ jsx(
14104
- "button",
14105
- {
14106
- type: "button",
14107
- onClick: () => {
14108
- onSearch == null ? void 0 : onSearch();
14109
- setMobileOpen(false);
14110
- },
14111
- "aria-label": (_f = labels == null ? void 0 : labels.search) != null ? _f : "Search",
14112
- className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14113
- children: /* @__PURE__ */ jsx(SearchIcon, { className: "h-[18px] w-[18px]" })
14114
- }
14115
- ),
14116
- /* @__PURE__ */ jsx(
14117
- "button",
14118
- {
14119
- type: "button",
14120
- onClick: () => {
14121
- onAccount == null ? void 0 : onAccount();
14122
- setMobileOpen(false);
14123
- },
14124
- "aria-label": (_g = labels == null ? void 0 : labels.account) != null ? _g : "Account",
14125
- className: cn("flex h-9 w-9 items-center justify-center rounded-full transition-colors", t.icon),
14126
- children: /* @__PURE__ */ jsx(UserIcon, { className: "h-[18px] w-[18px]" })
14127
- }
14128
- )
14132
+ ] })
14129
14133
  ] })
14130
- ] })
14131
- ]
14132
- }
14134
+ ]
14135
+ }
14136
+ ),
14137
+ document.body
14133
14138
  )
14134
14139
  ]
14135
14140
  }
@@ -19918,7 +19923,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
19918
19923
  type: "button",
19919
19924
  onClick: () => scrollByCard(-1),
19920
19925
  "aria-label": "Previous expeditions",
19921
- 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",
19926
+ 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",
19922
19927
  children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-5 w-5" })
19923
19928
  }
19924
19929
  ),
@@ -19928,7 +19933,7 @@ function ExpeditionsRail({ eyebrow, title, subtitle, link, trips }) {
19928
19933
  type: "button",
19929
19934
  onClick: () => scrollByCard(1),
19930
19935
  "aria-label": "Next 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",
19936
+ 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
19937
  children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-5 w-5" })
19933
19938
  }
19934
19939
  )