@okam/next-component 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -0,0 +1,413 @@
+## 1.2.1 (2025-11-01)
+
+### 🩹 Fixes
+
+- **next-component:** build project via @nx/vite:build ([36aa25d](https://github.com/OKAMca/stack/commit/36aa25d))
+- **next-component:** build using .mjs/.js formats, support /server output directory ([564ace3](https://github.com/OKAMca/stack/commit/564ace3))
+
+### ❤️ Thank You
+
+- poclerson
+
+## 1.2.0 (2025-11-01)
+
+### 🚀 Features
+
+- **next-component:** createServerContext function ([eaafb92](https://github.com/OKAMca/stack/commit/eaafb92))
+
+### ❤️ Thank You
+
+- poclerson
+
+## 1.1.5 (2025-10-17)
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.42.3
+
+## 1.1.4 (2025-10-14)
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.42.2
+
+## 1.1.3 (2025-10-09)
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.42.1
+
+## 1.1.2 (2025-10-02)
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.42.0
+
+## 1.1.1 (2025-09-25)
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.41.2
+
+## 1.1.0 (2025-09-25)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- **next-component:** null guard against undefined next useParams return ([c347f3a](https://github.com/OKAMca/stack/commit/c347f3a))
+- **next-component:** link component doesnt prepend ext links with locale ([8659974](https://github.com/OKAMca/stack/commit/8659974))
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+- poclerson
+
+## 1.0.15 (2025-09-04)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.41.1
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.14 (2025-08-28)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.41.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.13 (2025-08-22)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.40.1
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.12 (2025-08-11)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.40.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.10 (2025-07-18)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.39.2
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.9 (2025-07-18)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.39.1
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.8 (2025-07-04)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.39.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.7 (2025-07-01)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.38.1
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.6 (2025-07-01)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- update vite-plugin-dts to version 3 ([5d33c77](https://github.com/OKAMca/stack/commit/5d33c77))
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.38.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+- Pierre-Olivier Clerson @poclerson
+
+## 1.0.5 (2025-05-26)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.37.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+
+## 1.0.4 (2025-05-26)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.37.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+
+## 1.0.3 (2025-05-22)
+
+### 🚀 Features
+
+- bump ([ab924b9](https://github.com/OKAMca/stack/commit/ab924b9))
+
+### 🩹 Fixes
+
+- package deps error ([b665a45](https://github.com/OKAMca/stack/commit/b665a45))
+- search field type export ([5ab6070](https://github.com/OKAMca/stack/commit/5ab6070))
+- search field icon ([0850fde](https://github.com/OKAMca/stack/commit/0850fde))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.37.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay
+
+## 1.0.1 (2025-05-01)
+
+### 🚀 Features
+
+- **next-component:** next link wrapper component + hook ([ed654da](https://github.com/OKAMca/stack/commit/ed654da))
+- add header option to select component ([0338ebc](https://github.com/OKAMca/stack/commit/0338ebc))
+- bump versions to force publish ([6e3eb60](https://github.com/OKAMca/stack/commit/6e3eb60))
+- project cleanup ([a5dde9d](https://github.com/OKAMca/stack/commit/a5dde9d))
+
+### 🩹 Fixes
+
+- bump package ([b6259d1](https://github.com/OKAMca/stack/commit/b6259d1))
+- issue with typing not resolving correctly when installing package ([bc4c81d](https://github.com/OKAMca/stack/commit/bc4c81d))
+
+### 🧱 Updated Dependencies
+
+- Updated stack-ui to 1.31.0
+
+### ❤️ Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- Pierre-Olivier Clerson @poclerson
+
+## 0.3.0 (2024-10-04)
+
+
+### 🚀 Features
+
+- updates & cleanup packages and dependancies ([#210](https://github.com/OKAMca/stack/pull/210))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+
+## 0.2.0 (2024-08-15)
+
+
+### 🚀 Features
+
+- directus image support for videos ([4d45c9c](https://github.com/OKAMca/stack/commit/4d45c9c))
+
+
+### ❤️  Thank You
+
+- Jérôme Trottier
+- Marie-Maxime Tanguay @marie-maxime
+- mykimd
+- Pierre-Olivier Clerson @poclerson
+- poclerson
+- Yan Morin
+- yanmorinokamca @yanmorinokamca
+
+## 0.1.1 (2024-07-16)
+
+
+### 🩹 Fixes
+
+- **publish:** add building packages step to workflow ([c9ce442](https://github.com/OKAMca/stack/commit/c9ce442))
+
+
+### ❤️  Thank You
+
+- Jérôme Trottier
+- Pierre-Olivier Clerson @poclerson
+- yanmorinokamca @yanmorinokamca
+
+## 0.1.0 (2024-06-28)
+
+
+### 🚀 Features
+
+- add new libs ([#71](https://github.com/OKAMca/stack/pull/71))
+
+
+### 🩹 Fixes
+
+- publishing for new libs ([#125](https://github.com/OKAMca/stack/pull/125))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime

package/components/Img/index.js

@@ -0,0 +1,29 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const Image = require("next/image.js");
+const Img = (props) => {
+  const { src, width, height, themeName = "img", tokens, customTheme, ...rest } = props;
+  const theme = stackUi.useThemeContext(themeName, tokens, customTheme);
+  if (typeof src === "object") {
+    const { blurWidth, blurHeight, width: srcWidth, height: srcHeight, ...withoutBlurDimensions } = src;
+    const blur = {
+      blurwidth: blurWidth,
+      blurheight: blurHeight
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Image,
+      {
+        className: theme,
+        ...withoutBlurDimensions,
+        ...rest,
+        ...blur,
+        width: srcWidth ?? width,
+        height: srcHeight ?? height
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Image, { width, height, className: theme, src, ...rest });
+};
+module.exports = Img;

package/components/Img/index.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useThemeContext } from "@okam/stack-ui";
+import Image from "next/image.js";
+const Img = (props) => {
+  const { src, width, height, themeName = "img", tokens, customTheme, ...rest } = props;
+  const theme = useThemeContext(themeName, tokens, customTheme);
+  if (typeof src === "object") {
+    const { blurWidth, blurHeight, width: srcWidth, height: srcHeight, ...withoutBlurDimensions } = src;
+    const blur = {
+      blurwidth: blurWidth,
+      blurheight: blurHeight
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: theme,
+        ...withoutBlurDimensions,
+        ...rest,
+        ...blur,
+        width: srcWidth ?? width,
+        height: srcHeight ?? height
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Image, { width, height, className: theme, src, ...rest });
+};
+export {
+  Img as default
+};

package/components/Link/index.js

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const stackUi = require("@okam/stack-ui");
+const NextLink = require("next/link.js");
+const react = require("react");
+const index = require("../../hooks/useLink/index.js");
+const Link = react.forwardRef((props, ref) => {
+  const {
+    themeName = "link",
+    tokens,
+    customTheme,
+    as = NextLink,
+    children,
+    scroll,
+    onPathnameChange,
+    onSearchParamsChange,
+    onHashChange,
+    behavior,
+    urlDecorator: urlDecoratorProp,
+    href: hrefProp,
+    ...rest
+  } = props;
+  const linkProps = index.useLink(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    stackUi.Anchor,
+    {
+      ref,
+      ...rest,
+      nextLinkProps: linkProps,
+      as,
+      themeName,
+      tokens,
+      customTheme,
+      children
+    }
+  );
+});
+Link.displayName = "Link";
+module.exports = Link;

package/components/Link/index.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Anchor } from "@okam/stack-ui";
+import NextLink from "next/link.js";
+import { forwardRef } from "react";
+import { useLink } from "../../hooks/useLink/index.mjs";
+const Link = forwardRef((props, ref) => {
+  const {
+    themeName = "link",
+    tokens,
+    customTheme,
+    as = NextLink,
+    children,
+    scroll,
+    onPathnameChange,
+    onSearchParamsChange,
+    onHashChange,
+    behavior,
+    urlDecorator: urlDecoratorProp,
+    href: hrefProp,
+    ...rest
+  } = props;
+  const linkProps = useLink(props);
+  return /* @__PURE__ */ jsx(
+    Anchor,
+    {
+      ref,
+      ...rest,
+      nextLinkProps: linkProps,
+      as,
+      themeName,
+      tokens,
+      customTheme,
+      children
+    }
+  );
+});
+Link.displayName = "Link";
+export {
+  Link as default
+};

package/hooks/useHash/index.js

@@ -0,0 +1,22 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const reactUse = require("react-use");
+function getHash() {
+  if (typeof window === "undefined") return "";
+  return window.location.hash;
+}
+function useHash() {
+  const defaultHash = getHash();
+  const [hash, setHash] = react.useState(defaultHash);
+  const handleHashChangeEvent = ({ newURL }) => {
+    if (!URL.canParse(newURL)) return;
+    const { hash: newHash } = new URL(newURL);
+    if (!newHash || newHash === hash) return;
+    setHash(newHash);
+  };
+  reactUse.useEvent("hashchange", handleHashChangeEvent);
+  return hash;
+}
+exports.useHash = useHash;

package/hooks/useHash/index.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { useState } from "react";
+import { useEvent } from "react-use";
+function getHash() {
+  if (typeof window === "undefined") return "";
+  return window.location.hash;
+}
+function useHash() {
+  const defaultHash = getHash();
+  const [hash, setHash] = useState(defaultHash);
+  const handleHashChangeEvent = ({ newURL }) => {
+    if (!URL.canParse(newURL)) return;
+    const { hash: newHash } = new URL(newURL);
+    if (!newHash || newHash === hash) return;
+    setHash(newHash);
+  };
+  useEvent("hashchange", handleHashChangeEvent);
+  return hash;
+}
+export {
+  useHash
+};

package/hooks/useLink/index.js

@@ -0,0 +1,96 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const navigation_js = require("next/navigation.js");
+const react = require("react");
+const reactAria = require("react-aria");
+const index = require("../useHash/index.js");
+function scrollToTop(behavior) {
+  var _a;
+  (_a = window == null ? void 0 : window.scrollTo) == null ? void 0 : _a.call(window, { top: 0, behavior });
+}
+function getParamsLocale(params) {
+  const { locale } = params ?? {};
+  if (Array.isArray(locale)) return locale[0];
+  return locale;
+}
+function useLinkLocale(props) {
+  const { locale } = props;
+  const params = navigation_js.useParams();
+  const paramsLocale = getParamsLocale(params);
+  const { locale: ctxLocale } = reactAria.useLocale();
+  return locale ?? ctxLocale ?? paramsLocale ?? false;
+}
+function localizeHref(href, locale) {
+  const hrefString = href.toString();
+  const isExternal = /^[a-z]+:\/\//i.test(hrefString) || hrefString.startsWith("//");
+  if (isExternal) return hrefString;
+  if (locale) {
+    return `/${locale}${hrefString}`;
+  }
+  return hrefString;
+}
+function useLink(props) {
+  const {
+    scroll = true,
+    onMouseEnter,
+    onTouchStart,
+    onClick,
+    onPathnameChange,
+    onHashChange,
+    onSearchParamsChange,
+    href,
+    urlDecorator,
+    replace,
+    prefetch,
+    shallow,
+    passHref,
+    legacyBehavior,
+    behavior = "instant"
+  } = props;
+  const locale = useLinkLocale(props);
+  const localizedHref = localizeHref(href, locale);
+  const pathname = navigation_js.usePathname();
+  const searchParams = navigation_js.useSearchParams();
+  const hash = index.useHash();
+  const isNextScroll = typeof scroll === "boolean";
+  const nextScroll = isNextScroll ? scroll : false;
+  const handleScroll = react.useCallback(() => {
+    if (isNextScroll) return;
+    scrollToTop(behavior);
+  }, [behavior, isNextScroll]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    handleScroll();
+  };
+  const handleTouchStart = (event) => {
+    onTouchStart == null ? void 0 : onTouchStart(event);
+    handleScroll();
+  };
+  react.useEffect(() => {
+    onPathnameChange == null ? void 0 : onPathnameChange(pathname);
+  }, [onPathnameChange, pathname]);
+  react.useEffect(() => {
+    onSearchParamsChange == null ? void 0 : onSearchParamsChange(searchParams);
+  }, [onSearchParamsChange, searchParams]);
+  react.useEffect(() => {
+    onHashChange == null ? void 0 : onHashChange(hash);
+  }, [onHashChange, hash]);
+  return {
+    href: localizedHref.toString(),
+    as: urlDecorator,
+    replace,
+    locale,
+    prefetch,
+    shallow,
+    onClick: handleClick,
+    onTouchStart: handleTouchStart,
+    onMouseEnter,
+    scroll: nextScroll,
+    passHref,
+    legacyBehavior
+  };
+}
+exports.localizeHref = localizeHref;
+exports.useLink = useLink;
+exports.useLinkLocale = useLinkLocale;

package/hooks/useLink/index.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { usePathname, useSearchParams, useParams } from "next/navigation.js";
+import { useCallback, useEffect } from "react";
+import { useLocale } from "react-aria";
+import { useHash } from "../useHash/index.mjs";
+function scrollToTop(behavior) {
+  var _a;
+  (_a = window == null ? void 0 : window.scrollTo) == null ? void 0 : _a.call(window, { top: 0, behavior });
+}
+function getParamsLocale(params) {
+  const { locale } = params ?? {};
+  if (Array.isArray(locale)) return locale[0];
+  return locale;
+}
+function useLinkLocale(props) {
+  const { locale } = props;
+  const params = useParams();
+  const paramsLocale = getParamsLocale(params);
+  const { locale: ctxLocale } = useLocale();
+  return locale ?? ctxLocale ?? paramsLocale ?? false;
+}
+function localizeHref(href, locale) {
+  const hrefString = href.toString();
+  const isExternal = /^[a-z]+:\/\//i.test(hrefString) || hrefString.startsWith("//");
+  if (isExternal) return hrefString;
+  if (locale) {
+    return `/${locale}${hrefString}`;
+  }
+  return hrefString;
+}
+function useLink(props) {
+  const {
+    scroll = true,
+    onMouseEnter,
+    onTouchStart,
+    onClick,
+    onPathnameChange,
+    onHashChange,
+    onSearchParamsChange,
+    href,
+    urlDecorator,
+    replace,
+    prefetch,
+    shallow,
+    passHref,
+    legacyBehavior,
+    behavior = "instant"
+  } = props;
+  const locale = useLinkLocale(props);
+  const localizedHref = localizeHref(href, locale);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const hash = useHash();
+  const isNextScroll = typeof scroll === "boolean";
+  const nextScroll = isNextScroll ? scroll : false;
+  const handleScroll = useCallback(() => {
+    if (isNextScroll) return;
+    scrollToTop(behavior);
+  }, [behavior, isNextScroll]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    handleScroll();
+  };
+  const handleTouchStart = (event) => {
+    onTouchStart == null ? void 0 : onTouchStart(event);
+    handleScroll();
+  };
+  useEffect(() => {
+    onPathnameChange == null ? void 0 : onPathnameChange(pathname);
+  }, [onPathnameChange, pathname]);
+  useEffect(() => {
+    onSearchParamsChange == null ? void 0 : onSearchParamsChange(searchParams);
+  }, [onSearchParamsChange, searchParams]);
+  useEffect(() => {
+    onHashChange == null ? void 0 : onHashChange(hash);
+  }, [onHashChange, hash]);
+  return {
+    href: localizedHref.toString(),
+    as: urlDecorator,
+    replace,
+    locale,
+    prefetch,
+    shallow,
+    onClick: handleClick,
+    onTouchStart: handleTouchStart,
+    onMouseEnter,
+    scroll: nextScroll,
+    passHref,
+    legacyBehavior
+  };
+}
+export {
+  localizeHref,
+  useLink,
+  useLinkLocale
+};

package/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./components/Img/index.js");
+const index$1 = require("./components/Link/index.js");
+const index$2 = require("./hooks/useLink/index.js");
+const index$3 = require("./hooks/useHash/index.js");
+exports.Img = index;
+exports.Link = index$1;
+exports.useLink = index$2.useLink;
+exports.useHash = index$3.useHash;

package/index.mjs

@@ -0,0 +1,10 @@
+import { default as default2 } from "./components/Img/index.mjs";
+import { default as default3 } from "./components/Link/index.mjs";
+import { useLink } from "./hooks/useLink/index.mjs";
+import { useHash } from "./hooks/useHash/index.mjs";
+export {
+  default2 as Img,
+  default3 as Link,
+  useHash,
+  useLink
+};

package/lib/createServerContext/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function createServerContext(defaultValue) {
+  const getRef = react.cache(() => ({ current: defaultValue }));
+  const getValue = () => getRef().current;
+  const setValue = (value) => {
+    getRef().current = value;
+  };
+  return [getValue, setValue];
+}
+exports.createServerContext = createServerContext;

package/lib/createServerContext/index.mjs

@@ -0,0 +1,12 @@
+import { cache } from "react";
+function createServerContext(defaultValue) {
+  const getRef = cache(() => ({ current: defaultValue }));
+  const getValue = () => getRef().current;
+  const setValue = (value) => {
+    getRef().current = value;
+  };
+  return [getValue, setValue];
+}
+export {
+  createServerContext
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/next-component",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,9 +36,5 @@
     "react-use": "17.5.1",
     "tailwind-variants": "^0.3.0",
     "react-aria": "^3.39.0"
-  },
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js",
-  "types": "./index.esm.d.ts"
-}
+  }
+}

package/server.js

@@ -0,0 +1,5 @@
+"use server";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./lib/createServerContext/index.js");
+exports.createServerContext = index.createServerContext;

package/server.mjs

@@ -0,0 +1,5 @@
+"use server";
+import { createServerContext } from "./lib/createServerContext/index.mjs";
+export {
+  createServerContext
+};

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/index.esm.js

@@ -1,390 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useThemeContext, Anchor } from '@okam/stack-ui';
-import Image from 'next/image';
-import NextLink from 'next/link';
-import { useState, useCallback, useEffect, forwardRef } from 'react';
-import { usePathname, useSearchParams, useParams } from 'next/navigation';
-import { useLocale } from 'react-aria';
-import { useEvent } from 'react-use';
-
-function _define_property$1(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$1(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$1(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$1(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$1(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$1(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties$1(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose$1(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose$1(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-var Img = function(props) {
-    var src = props.src, width = props.width, height = props.height, _props_themeName = props.themeName, themeName = _props_themeName === void 0 ? 'img' : _props_themeName, tokens = props.tokens, customTheme = props.customTheme, rest = _object_without_properties$1(props, [
-        "src",
-        "width",
-        "height",
-        "themeName",
-        "tokens",
-        "customTheme"
-    ]);
-    var theme = useThemeContext(themeName, tokens, customTheme);
-    if ((typeof src === "undefined" ? "undefined" : _type_of(src)) === 'object') {
-        var blurWidth = src.blurWidth, blurHeight = src.blurHeight, srcWidth = src.width, srcHeight = src.height, withoutBlurDimensions = _object_without_properties$1(src, [
-            "blurWidth",
-            "blurHeight",
-            "width",
-            "height"
-        ]);
-        var blur = {
-            blurwidth: blurWidth,
-            blurheight: blurHeight
-        };
-        return /*#__PURE__*/ jsx(Image, _object_spread_props$1(_object_spread$1({
-            className: theme
-        }, withoutBlurDimensions, rest, blur), {
-            width: srcWidth !== null && srcWidth !== void 0 ? srcWidth : width,
-            height: srcHeight !== null && srcHeight !== void 0 ? srcHeight : height
-        }));
-    }
-    return /*#__PURE__*/ jsx(Image, _object_spread$1({
-        width: width,
-        height: height,
-        className: theme,
-        src: src
-    }, rest));
-};
-
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function getHash() {
-    if (typeof window === 'undefined') return '';
-    return window.location.hash;
-}
-/**
- * A hook that lets you read the current URL's hash.
- *
- * @returns The current `window.location.hash`, including the leading `#` character.
- */ function useHash() {
-    var defaultHash = getHash();
-    var _useState = _sliced_to_array(useState(defaultHash), 2), hash = _useState[0], setHash = _useState[1];
-    var handleHashChangeEvent = function(param) {
-        var newURL = param.newURL;
-        if (!URL.canParse(newURL)) return;
-        var _ref = new URL(newURL), newHash = _ref.hash;
-        if (!newHash || newHash === hash) return;
-        setHash(newHash);
-    };
-    useEvent('hashchange', handleHashChangeEvent);
-    return hash;
-}
-
-function scrollToTop(behavior) {
-    var _window_scrollTo, _window;
-    (_window = window) === null || _window === void 0 ? void 0 : (_window_scrollTo = _window.scrollTo) === null || _window_scrollTo === void 0 ? void 0 : _window_scrollTo.call(_window, {
-        top: 0,
-        behavior: behavior
-    });
-}
-function getParamsLocale(params) {
-    var locale = (params !== null && params !== void 0 ? params : {}).locale;
-    if (Array.isArray(locale)) return locale[0];
-    return locale;
-}
-/**
- * Tries to get the locale, in order of priority:
- * 1. The locale prop. Still has priority even when set to `false`
- * 2. The locale from react-aria `useLocale`
- * 3. The locale from next/navigation `useParams`
- * @returns The best matched locale
- */ function useLinkLocale(props) {
-    var locale = props.locale;
-    var params = useParams();
-    var paramsLocale = getParamsLocale(params);
-    var _useLocale = useLocale(), ctxLocale = _useLocale.locale;
-    var _ref, _ref1;
-    return (_ref1 = (_ref = locale !== null && locale !== void 0 ? locale : ctxLocale) !== null && _ref !== void 0 ? _ref : paramsLocale) !== null && _ref1 !== void 0 ? _ref1 : false;
-}
-function localizeHref(href, locale) {
-    var hrefString = href.toString();
-    var isExternal = /^[a-z]+:\/\//i.test(hrefString) || hrefString.startsWith('//');
-    if (isExternal) return hrefString;
-    if (locale) {
-        return "/".concat(locale).concat(hrefString);
-    }
-    return hrefString;
-}
-/**
- * @params {props.locale} - The direct locale prop always gets priority. If no `locale` prop is provided, the prop will try to fall back to react-aria `useLocale` and then next/navigation `useParams`. If a locale is found, it will be automatically prepended to the href. Otherwise, href will be returned as is.
- */ function useLink(props) {
-    var _props_scroll = props.scroll, scroll = _props_scroll === void 0 ? true : _props_scroll, onMouseEnter = props.onMouseEnter, onTouchStart = props.onTouchStart, onClick = props.onClick, onPathnameChange = props.onPathnameChange, onHashChange = props.onHashChange, onSearchParamsChange = props.onSearchParamsChange, href = props.href, urlDecorator = props.urlDecorator, replace = props.replace, prefetch = props.prefetch, shallow = props.shallow, passHref = props.passHref, legacyBehavior = props.legacyBehavior, _props_behavior = props.behavior, behavior = _props_behavior === void 0 ? 'instant' : _props_behavior;
-    var locale = useLinkLocale(props);
-    var localizedHref = localizeHref(href, locale);
-    var pathname = usePathname();
-    var searchParams = useSearchParams();
-    var hash = useHash();
-    var isNextScroll = typeof scroll === 'boolean';
-    var nextScroll = isNextScroll ? scroll : false;
-    var handleScroll = useCallback(function() {
-        if (isNextScroll) return;
-        scrollToTop(behavior);
-    }, [
-        behavior,
-        isNextScroll
-    ]);
-    var handleClick = function(event) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        handleScroll();
-    };
-    var handleTouchStart = function(event) {
-        onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(event);
-        handleScroll();
-    };
-    useEffect(function() {
-        onPathnameChange === null || onPathnameChange === void 0 ? void 0 : onPathnameChange(pathname);
-    }, [
-        onPathnameChange,
-        pathname
-    ]);
-    useEffect(function() {
-        onSearchParamsChange === null || onSearchParamsChange === void 0 ? void 0 : onSearchParamsChange(searchParams);
-    }, [
-        onSearchParamsChange,
-        searchParams
-    ]);
-    useEffect(function() {
-        onHashChange === null || onHashChange === void 0 ? void 0 : onHashChange(hash);
-    }, [
-        onHashChange,
-        hash
-    ]);
-    return {
-        href: localizedHref.toString(),
-        as: urlDecorator,
-        replace: replace,
-        locale: locale,
-        prefetch: prefetch,
-        shallow: shallow,
-        onClick: handleClick,
-        onTouchStart: handleTouchStart,
-        onMouseEnter: onMouseEnter,
-        scroll: nextScroll,
-        passHref: passHref,
-        legacyBehavior: legacyBehavior
-    };
-}
-
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-var Link = /*#__PURE__*/ forwardRef(function(props, ref) {
-    var _props_themeName = props.themeName, themeName = _props_themeName === void 0 ? 'link' : _props_themeName, tokens = props.tokens, customTheme = props.customTheme, _props_as = props.as, as = _props_as === void 0 ? NextLink : _props_as, children = props.children; props.scroll; props.onPathnameChange; props.onSearchParamsChange; props.onHashChange; props.behavior; props.urlDecorator; props.href; var rest = _object_without_properties(props, [
-        "themeName",
-        "tokens",
-        "customTheme",
-        "as",
-        "children",
-        "scroll",
-        "onPathnameChange",
-        "onSearchParamsChange",
-        "onHashChange",
-        "behavior",
-        "urlDecorator",
-        "href"
-    ]);
-    var linkProps = useLink(props);
-    return /*#__PURE__*/ jsx(Anchor, _object_spread_props(_object_spread({
-        ref: ref
-    }, rest), {
-        nextLinkProps: linkProps,
-        as: as,
-        themeName: themeName,
-        tokens: tokens,
-        customTheme: customTheme,
-        children: children
-    }));
-});
-Link.displayName = 'Link';
-
-export { Img, Link, useHash, useLink };