@namehash/namehash-ui 1.5.0 → 1.5.1

package/README.md

@@ -14,7 +14,7 @@ Note: `@ensnode/ensnode-react` and `sonner` are package's peer dependencies. The
 
 ## Setup
 
-The `namehash-ui` package comes with its own styles exported for some components, as well as global Tailwind styles (soon to be removed).
+The `namehash-ui` package comes with its own styles exported for some components, as well as global Tailwind styles.
 
 Make sure you import the `styles.css` file somewhere in your app:
 

package/dist/index.cjs

@@ -2180,6 +2180,7 @@ __export(index_exports, {
   ChainExplorerIcon: () => ChainExplorerIcon,
   ChainIcon: () => ChainIcon,
   ChainName: () => ChainName,
+  CopyButton: () => CopyButton,
   DisplayDuration: () => DisplayDuration,
   DisplayIdentity: () => DisplayIdentity,
   EfpIcon: () => EfpIcon,
@@ -2201,7 +2202,17 @@ __export(index_exports, {
   ResolveAndDisplayIdentity: () => ResolveAndDisplayIdentity,
   TelegramIcon: () => TelegramIcon,
   TwitterIcon: () => TwitterIcon,
-  formatRelativeTime: () => formatRelativeTime
+  formatRelativeTime: () => formatRelativeTime,
+  getBlockExplorerAddressDetailsUrl: () => getBlockExplorerAddressDetailsUrl,
+  getBlockExplorerBlockUrl: () => getBlockExplorerBlockUrl,
+  getBlockExplorerTransactionDetailsUrl: () => getBlockExplorerTransactionDetailsUrl,
+  getBlockExplorerUrl: () => getBlockExplorerUrl,
+  getChainName: () => getChainName,
+  getEnsManagerAddressDetailsUrl: () => getEnsManagerAddressDetailsUrl,
+  getEnsManagerNameDetailsUrl: () => getEnsManagerNameDetailsUrl,
+  getEnsManagerUrl: () => getEnsManagerUrl,
+  getEnsMetadataServiceAvatarUrl: () => getEnsMetadataServiceAvatarUrl,
+  useNow: () => useNow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -4335,9 +4346,6 @@ var import_date_fns3 = require("date-fns");
 var import_constants = require("date-fns/constants");
 var import_react3 = require("react");
 
-// src/components/ui/tooltip.tsx
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-
 // src/utils/cn.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -4346,8 +4354,8 @@ function cn(...inputs) {
 }
 
 // src/components/ui/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var TooltipArrow = TooltipPrimitive.Arrow;
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -4474,8 +4482,7 @@ function RelativeTime({
             }
           ),
           " ",
-          "(UTC)",
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipArrow, { width: 12, height: 8 })
+          "(UTC)"
         ]
       }
     )
@@ -5208,6 +5215,19 @@ function AddressDisplay({ address, className }) {
 var import_boring_avatars = __toESM(require("boring-avatars"), 1);
 var React3 = __toESM(require("react"), 1);
 
+// src/utils/ensMetadata.ts
+var import_ensnode_sdk = require("@ensnode/ensnode-sdk");
+function getEnsMetadataServiceAvatarUrl(name, namespaceId) {
+  switch (namespaceId) {
+    case import_ensnode_sdk.ENSNamespaceIds.Mainnet:
+      return new URL(name, `https://metadata.ens.domains/mainnet/avatar/`);
+    case import_ensnode_sdk.ENSNamespaceIds.Sepolia:
+      return new URL(name, `https://metadata.ens.domains/sepolia/avatar/`);
+    case import_ensnode_sdk.ENSNamespaceIds.EnsTestEnv:
+      return null;
+  }
+}
+
 // src/components/ui/avatar.tsx
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -5235,19 +5255,6 @@ function AvatarImage({ className, ...props }) {
   );
 }
 
-// src/utils/ensMetadata.ts
-var import_ensnode_sdk = require("@ensnode/ensnode-sdk");
-function getEnsMetadataServiceAvatarUrl(name, namespaceId) {
-  switch (namespaceId) {
-    case import_ensnode_sdk.ENSNamespaceIds.Mainnet:
-      return new URL(name, `https://metadata.ens.domains/mainnet/avatar/`);
-    case import_ensnode_sdk.ENSNamespaceIds.Sepolia:
-      return new URL(name, `https://metadata.ens.domains/sepolia/avatar/`);
-    case import_ensnode_sdk.ENSNamespaceIds.EnsTestEnv:
-      return null;
-  }
-}
-
 // src/components/identity/EnsAvatar.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var EnsAvatar = ({ name, namespaceId, className, isSquare = false }) => {
@@ -5268,7 +5275,7 @@ var EnsAvatar = ({ name, namespaceId, className, isSquare = false }) => {
       }
     ),
     loadingStatus === "error" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EnsAvatarFallback, { name, isSquare }),
-    (loadingStatus === "idle" || loadingStatus === "loading") && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AvatarLoading, { className })
+    (loadingStatus === "idle" || loadingStatus === "loading") && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AvatarLoading, { isSquare })
   ] });
 };
 var avatarFallbackColors = ["#000000", "#bedbff", "#5191c1", "#1e6495", "#0a4b75"];
@@ -5282,19 +5289,66 @@ var EnsAvatarFallback = ({ name, isSquare }) => /* @__PURE__ */ (0, import_jsx_r
     square: isSquare
   }
 );
-var AvatarLoading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var AvatarLoading = ({ isSquare }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
   "div",
   {
     className: cn(
-      "nhui:h-full nhui:w-full nhui:rounded-full nhui:animate-pulse nhui:bg-gray-200",
-      className
+      "nhui:h-full nhui:w-full nhui:animate-pulse nhui:bg-gray-200",
+      !isSquare && "nhui:rounded-full"
     )
   }
 );
 
 // src/components/identity/Identity.tsx
+var import_lucide_react = require("lucide-react");
 var import_ensnode_sdk3 = require("@ensnode/ensnode-sdk");
 
+// src/utils/blockExplorers.ts
+var getBlockExplorerUrl = (chainId) => {
+  const chain = SUPPORTED_CHAINS.find((chain2) => chain2.id === chainId);
+  if (!chain) return null;
+  if (!chain.blockExplorers) return null;
+  return new URL(chain.blockExplorers.default.url);
+};
+var getBlockExplorerAddressDetailsUrl = (chainId, address) => {
+  const chainBlockExplorer = getBlockExplorerUrl(chainId);
+  if (!chainBlockExplorer) return null;
+  return new URL(`address/${address}`, chainBlockExplorer.toString());
+};
+var getBlockExplorerTransactionDetailsUrl = (chainId, transactionHash) => {
+  const chainBlockExplorer = getBlockExplorerUrl(chainId);
+  if (!chainBlockExplorer) return null;
+  return new URL(`tx/${transactionHash}`, chainBlockExplorer.toString());
+};
+var getBlockExplorerBlockUrl = (chainId, blockNumber) => {
+  const chainBlockExplorer = getBlockExplorerUrl(chainId);
+  if (!chainBlockExplorer) return null;
+  return new URL(`block/${blockNumber}`, chainBlockExplorer.toString());
+};
+
+// src/utils/ensManager.ts
+var import_ensnode_sdk2 = require("@ensnode/ensnode-sdk");
+function getEnsManagerUrl(namespaceId) {
+  switch (namespaceId) {
+    case import_ensnode_sdk2.ENSNamespaceIds.Mainnet:
+      return new URL(`https://app.ens.domains/`);
+    case import_ensnode_sdk2.ENSNamespaceIds.Sepolia:
+      return new URL(`https://sepolia.app.ens.domains/`);
+    case import_ensnode_sdk2.ENSNamespaceIds.EnsTestEnv:
+      return null;
+  }
+}
+function getEnsManagerNameDetailsUrl(name, namespaceId) {
+  const baseUrl = getEnsManagerUrl(namespaceId);
+  if (!baseUrl) return null;
+  return new URL(name, baseUrl);
+}
+function getEnsManagerAddressDetailsUrl(address, namespaceId) {
+  const baseUrl = getEnsManagerUrl(namespaceId);
+  if (!baseUrl) return null;
+  return new URL(address, baseUrl);
+}
+
 // src/components/special-buttons/CopyButton.tsx
 var React4 = __toESM(require("react"), 1);
 var import_sonner = require("sonner");
@@ -5398,7 +5452,7 @@ function CopyButton({
       type: "button",
       onClick: copyToClipboard,
       disabled: isCopying,
-      className: cn(className),
+      className: cn("nhui:cursor-pointer", className),
       ...props,
       children: [
         hasCopied ? successIcon ? successIcon : "Copied" : icon ? icon : "Copy",
@@ -5408,42 +5462,6 @@ function CopyButton({
   );
 }
 
-// src/utils/blockExplorers.ts
-var getBlockExplorerUrl = (chainId) => {
-  const chain = SUPPORTED_CHAINS.find((chain2) => chain2.id === chainId);
-  if (!chain) return null;
-  if (!chain.blockExplorers) return null;
-  return new URL(chain.blockExplorers.default.url);
-};
-var getBlockExplorerAddressDetailsUrl = (chainId, address) => {
-  const chainBlockExplorer = getBlockExplorerUrl(chainId);
-  if (!chainBlockExplorer) return null;
-  return new URL(`address/${address}`, chainBlockExplorer.toString());
-};
-var getBlockExplorerTransactionDetailsUrl = (chainId, transactionHash) => {
-  const chainBlockExplorer = getBlockExplorerUrl(chainId);
-  if (!chainBlockExplorer) return null;
-  return new URL(`tx/${transactionHash}`, chainBlockExplorer.toString());
-};
-
-// src/utils/ensManager.ts
-var import_ensnode_sdk2 = require("@ensnode/ensnode-sdk");
-function getEnsManagerUrl(namespaceId) {
-  switch (namespaceId) {
-    case import_ensnode_sdk2.ENSNamespaceIds.Mainnet:
-      return new URL(`https://app.ens.domains/`);
-    case import_ensnode_sdk2.ENSNamespaceIds.Sepolia:
-      return new URL(`https://sepolia.app.ens.domains/`);
-    case import_ensnode_sdk2.ENSNamespaceIds.EnsTestEnv:
-      return null;
-  }
-}
-function getEnsManagerAddressDetailsUrl(address, namespaceId) {
-  const baseUrl = getEnsManagerUrl(namespaceId);
-  if (!baseUrl) return null;
-  return new URL(address, baseUrl);
-}
-
 // src/components/identity/Identity.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function IdentityLink({
@@ -5451,6 +5469,9 @@ function IdentityLink({
   className,
   children
 }) {
+  if (linkDetails.link === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "a",
     {
@@ -5495,7 +5516,7 @@ var IdentityTooltip = ({
       TooltipContent,
       {
         side: "top",
-        className: "nhui:bg-gray-50 nhui:text-sm nhui:text-black nhui:text-left nhui:shadow-md nhui:outline-hidden nhui:w-fit",
+        className: "nhui:bg-gray-50 nhui:text-sm nhui:text-black nhui:text-left nhui:shadow-md nhui:outline-hidden nhui:w-fit [&_svg]:fill-gray-50 [&_svg]:bg-gray-50",
         children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "nhui:flex nhui:gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "nhui:flex nhui:items-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             ChainIcon,
@@ -5515,7 +5536,10 @@ var IdentityTooltip = ({
               CopyButton,
               {
                 value: identity.address,
-                className: "nhui:text-gray-500 nhui:hover:text-gray-700 nhui:transition-colors"
+                className: "nhui:text-gray-500 nhui:hover:text-gray-700 nhui:transition-colors",
+                successIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react.CheckIcon, { className: "nhui:h-4 nhui:w-4" }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react.CopyIcon, { className: "nhui:h-4 nhui:w-4" }),
+                showToast: true
               }
             ),
             chainExplorerUrl && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { target: "_blank", href: chainExplorerUrl.toString(), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -5553,19 +5577,6 @@ function NameDisplay({ name, className = "nhui:font-medium" }) {
 var import_ensnode_react = require("@ensnode/ensnode-react");
 var import_ensnode_sdk5 = require("@ensnode/ensnode-sdk");
 
-// src/components/ui/skeleton.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "div",
-    {
-      "data-slot": "skeleton",
-      className: cn("nhui:bg-accent nhui:animate-pulse nhui:rounded-md", className),
-      ...props
-    }
-  );
-}
-
 // src/hooks/useIsMobile.tsx
 var React5 = __toESM(require("react"), 1);
 var MOBILE_BREAKPOINT = 640;
@@ -5583,6 +5594,19 @@ function useIsMobile() {
   return !!isMobile;
 }
 
+// src/components/ui/skeleton.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("nhui:bg-accent nhui:animate-pulse nhui:rounded-md", className),
+      ...props
+    }
+  );
+}
+
 // src/components/identity/ResolveAndDisplayIdentity.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function ResolveAndDisplayIdentity({
@@ -5718,7 +5742,7 @@ function DisplayIdentity({
 }
 
 // src/components/registrar-actions/RegistrarActionCard.tsx
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 var import_react4 = require("react");
 var import_ensnode_sdk6 = require("@ensnode/ensnode-sdk");
 var import_jsx_runtime41 = require("react/jsx-runtime");
@@ -5743,7 +5767,6 @@ function ResolveAndDisplayReferrerIdentity({
   referral,
   accelerate = true,
   withLink = true,
-  identityLinkDetails,
   withTooltip = true,
   withAvatar = false,
   withIdentifier = true,
@@ -5761,14 +5784,14 @@ function ResolveAndDisplayReferrerIdentity({
           className2,
           !withAvatar && "nhui:hidden"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react.CircleQuestionMark, { size: iconSize, className: "nhui:text-gray-400" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react2.CircleQuestionMark, { size: iconSize, className: "nhui:text-gray-400" })
       }
     );
     return withAvatar && !withIdentifier ? unknownAvatarPlaceholder("nhui:w-10 nhui:h-10", 24) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "nhui:h-[21px] nhui:inline-flex nhui:items-center nhui:gap-2 nhui:font-medium", children: [
       unknownAvatarPlaceholder("nhui:w-5 nhui:h-5", 16),
       "Unknown",
       /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { delayDuration: 250, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react.Info, { size: 16, className: "nhui:shrink-0 nhui:fill-neutral-300 nhui:text-white" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react2.Info, { size: 16, className: "nhui:shrink-0 nhui:fill-neutral-300 nhui:text-white" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           TooltipContent,
           {
@@ -5796,12 +5819,16 @@ function ResolveAndDisplayReferrerIdentity({
       withIdentifier,
       className,
       withLink,
-      identityLinkDetails
+      identityLinkDetails: {
+        isExternal: true,
+        link: getEnsManagerAddressDetailsUrl(referrerIdentity.address, namespaceId)
+      }
     }
   );
 }
 function RegistrarActionCardLoading({
-  showReferrer = true
+  showReferrer = true,
+  showReferralProgramField = true
 }) {
   const isMobile = useIsMobile();
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -5826,7 +5853,7 @@ function RegistrarActionCardLoading({
             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "nhui:animate-pulse nhui:h-[14px] nhui:mt-[4px] nhui:mb-[3px] nhui:bg-gray-200 nhui:rounded-sm nhui:w-1/4 nhui:sm:w-3/5" })
           ] }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LabeledField, { fieldLabel: "Incentive program", className: "nhui:w-[15%] nhui:min-w-[162px]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "nhui:animate-pulse nhui:h-[14px] nhui:mt-[4px] nhui:mb-[3px] nhui:bg-gray-200 nhui:rounded-sm nhui:w-1/4 nhui:sm:w-4/5" }) })
+        showReferralProgramField && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LabeledField, { fieldLabel: "Incentive program", className: "nhui:w-[15%] nhui:min-w-[162px]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "nhui:animate-pulse nhui:h-[14px] nhui:mt-[4px] nhui:mb-[3px] nhui:bg-gray-200 nhui:rounded-sm nhui:w-1/4 nhui:sm:w-4/5" }) })
       ]
     }
   );
@@ -5861,15 +5888,15 @@ function RegistrarActionCard({
     {
       className: "nhui:w-full nhui:min-h-[80px] nhui:box-border nhui:flex nhui:flex-col nhui:sm:flex-row nhui:flex-wrap nhui:justify-start nhui:sm:justify-between\n    nhui:items-start nhui:gap-2 nhui:p-4 nhui:sm:p-6 nhui:sm:gap-y-5 nhui:rounded-2xl nhui:border nhui:border-gray-200 nhui:text-sm nhui:bg-white",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LabeledField, { fieldLabel: "Name", className: "nhui:w-[15%] nhui:min-w-[162px]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LabeledField, { fieldLabel: "Name", className: "nhui:w-[15%] nhui:min-w-[162px]", children: links.name.link !== null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "a",
           {
-            target: "_blank",
+            target: links.name.isExternal ? "_blank" : "_self",
             href: links.name.link.href,
             className: "nhui:max-sm:max-w-3/4 nhui:sm:w-full nhui:box-border nhui:overflow-x-auto nhui:text-blue-600 nhui:font-medium nhui:hover:underline nhui:hover:underline-offset-[25%] nhui:whitespace-nowrap",
             children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NameDisplay, { name: namedRegistrarAction.name, className: "nhui:h-[21px]" })
           }
-        ) }),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "nhui:max-sm:max-w-3/4 nhui:sm:w-full nhui:box-border nhui:overflow-x-auto nhui:font-medium nhui:whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(NameDisplay, { name: namedRegistrarAction.name, className: "nhui:h-[21px]" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           LabeledField,
           {
@@ -5921,8 +5948,7 @@ function RegistrarActionCard({
               referral,
               withAvatar: true,
               withIdentifier: false,
-              withTooltip: false,
-              identityLinkDetails: links.referrer
+              withTooltip: false
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LabeledField, { fieldLabel: "Referrer", className: "nhui:w-[15%] nhui:min-w-[110px]", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -5933,8 +5959,7 @@ function RegistrarActionCard({
               referral,
               withAvatar: isMobile,
               withIdentifier: true,
-              withTooltip: false,
-              identityLinkDetails: links.referrer
+              withTooltip: false
             }
           ) })
         ] }),
@@ -5944,6 +5969,118 @@ function RegistrarActionCard({
   );
 }
 var RegistrarActionCardMemo = (0, import_react4.memo)(RegistrarActionCard);
+
+// src/hooks/useNow.ts
+var import_react6 = require("react");
+
+// src/hooks/useSystemClock.ts
+var import_date_fns4 = require("date-fns");
+var import_react5 = require("react");
+
+// src/utils/syncedClock.ts
+var DEFAULT_TICK_RATE = 16;
+var HighResolutionSyncedClock = class {
+  #listeners = /* @__PURE__ */ new Set();
+  #currentTime = Date.now();
+  #timerId = null;
+  /**
+   * Tick rate frequency in milliseconds.
+   */
+  #tickRate;
+  /**
+   * Clock's tick handler.
+   *
+   * Runs at `tickRate` frequency, and notifies all listeners about
+   * the current time updates.
+   */
+  #tick = () => {
+    this.#currentTime = Date.now();
+    this.#listeners.forEach((listener) => listener());
+    this.#timerId = setTimeout(this.#tick, this.#tickRate);
+  };
+  /**
+   * Starts the clock.
+   */
+  start = () => {
+    if (this.#timerId === null) {
+      this.#currentTime = Date.now();
+      this.#timerId = setTimeout(this.#tick, this.#tickRate);
+    }
+  };
+  /**
+   * Stops the clock.
+   */
+  stop = () => {
+    if (this.#timerId !== null) {
+      clearTimeout(this.#timerId);
+      this.#timerId = null;
+    }
+  };
+  constructor(tickRate = DEFAULT_TICK_RATE) {
+    this.#tickRate = tickRate;
+  }
+  /**
+   * Adds a new listener to all listeners tracking the synced clock.
+   *
+   * Starts the clock (or restarts it, which is a noop) if there's at
+   * least one listener.
+   *
+   * @param callback to notify the listener about clock updates.
+   */
+  addListener(callback) {
+    this.#listeners.add(callback);
+    if (this.#listeners.size > 0) {
+      this.start();
+    }
+  }
+  /**
+   * Removes a listener from all listeners tracking the synced clock.
+   *
+   * Stops the clock if there's no listener.
+   *
+   * @param callback to notify the listener about clock updates.
+   */
+  removeListener(callback) {
+    this.#listeners.delete(callback);
+    if (this.#listeners.size === 0) {
+      this.stop();
+    }
+  }
+  get currentTime() {
+    return this.#currentTime;
+  }
+};
+
+// src/utils/systemClock.ts
+var systemClock = new HighResolutionSyncedClock();
+
+// src/hooks/useSystemClock.ts
+function useSystemClock() {
+  const subscribe = (callback) => {
+    systemClock.addListener(callback);
+    return () => {
+      systemClock.removeListener(callback);
+    };
+  };
+  const getSnapshot = () => (0, import_date_fns4.getUnixTime)(new Date(systemClock.currentTime));
+  const getServerSnapshot = () => (0, import_date_fns4.getUnixTime)(/* @__PURE__ */ new Date());
+  const syncedSystemClock = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+  return syncedSystemClock ?? getSnapshot();
+}
+
+// src/hooks/useNow.ts
+var DEFAULT_TIME_TO_REFRESH = 1;
+function useNow(props) {
+  const clock = useSystemClock();
+  const [throttledClock, setThrottledClock] = (0, import_react6.useState)(clock);
+  const { timeToRefresh = DEFAULT_TIME_TO_REFRESH } = props || {};
+  (0, import_react6.useEffect)(() => {
+    if (clock - throttledClock >= timeToRefresh) {
+      setThrottledClock(clock);
+    }
+  }, [timeToRefresh, clock, throttledClock]);
+  return throttledClock;
+}
 /*! Bundled license information:
 
 @noble/hashes/esm/utils.js: