@herca/r-kit 0.0.69 → 0.0.71

package/dist/clients.cjs

@@ -142,7 +142,9 @@ __export(clients_exports, {
   toDateOnly: () => toDateOnly,
   useCopy: () => useCopy,
   useIsMobile: () => useIsMobile,
+  useSheetHref: () => useSheetHref,
   useSidebar: () => useSidebar,
+  useTabHref: () => useTabHref,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(clients_exports);
@@ -11273,7 +11275,7 @@ var Icon = ({
 var Icon_default = Icon;
 
 // src/components/sheet/sheet.tsx
-var React395 = require("react");
+var React395 = __toESM(require("react"), 1);
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_jsx_runtime403 = require("react/jsx-runtime");
 var sheetSizeClasses = {
@@ -11283,8 +11285,74 @@ var sheetSizeClasses = {
   xl: "w-2/3 sm:max-w-xl",
   full: "w-full"
 };
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime403.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+var SHEET_URL_EVENT = "__sheet_url_change__";
+function readParams() {
+  if (typeof window === "undefined") return new URLSearchParams();
+  return new URLSearchParams(window.location.search);
+}
+function useUrlSearchParams() {
+  const [params, setParams] = React395.useState(readParams);
+  React395.useEffect(() => {
+    const sync = () => setParams(readParams());
+    sync();
+    window.addEventListener("popstate", sync);
+    window.addEventListener(SHEET_URL_EVENT, sync);
+    return () => {
+      window.removeEventListener("popstate", sync);
+      window.removeEventListener(SHEET_URL_EVENT, sync);
+    };
+  }, []);
+  const setSearchParams = React395.useCallback(
+    (updater, options) => {
+      const next = updater(readParams());
+      const query = next.toString();
+      const url = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
+      if (options?.replace) {
+        window.history.replaceState(window.history.state, "", url);
+      } else {
+        window.history.pushState(window.history.state, "", url);
+      }
+      window.dispatchEvent(new Event(SHEET_URL_EVENT));
+    },
+    []
+  );
+  return [params, setSearchParams];
+}
+function Sheet({
+  id,
+  urlReplace = false,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [searchParams, setSearchParams] = useUrlSearchParams();
+  const isControlled = openProp !== void 0;
+  const isUrlSynced = id !== void 0 && !isControlled;
+  const urlParam = id !== void 0 ? `sheet-${id}` : void 0;
+  const open = isControlled ? openProp : isUrlSynced && urlParam !== void 0 ? searchParams.has(urlParam) : void 0;
+  const handleOpenChange = (next) => {
+    if (isUrlSynced && urlParam !== void 0) {
+      setSearchParams(
+        (prev) => {
+          const p = new URLSearchParams(prev);
+          if (next) p.set(urlParam, "1");
+          else p.delete(urlParam);
+          return p;
+        },
+        { replace: urlReplace }
+      );
+    }
+    onOpenChange?.(next);
+  };
+  const stateProps = isControlled || isUrlSynced ? { open, onOpenChange: handleOpenChange } : { defaultOpen, onOpenChange: handleOpenChange };
+  return /* @__PURE__ */ (0, import_jsx_runtime403.jsx)(SheetPrimitive.Root, { "data-slot": "sheet", ...stateProps, ...props });
+}
+function useSheetHref(id) {
+  const [searchParams] = useUrlSearchParams();
+  const params = new URLSearchParams(searchParams);
+  params.set(`sheet-${id}`, "1");
+  return `?${params.toString()}`;
 }
 function SheetTrigger({
   ...props
@@ -11435,6 +11503,18 @@ var SIDEBAR_WIDTH = "13.75rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "4.125rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var HOVER_OPEN_DELAY = 150;
+var HOVER_CLOSE_DELAY = 200;
+function readSidebarCookie() {
+  if (typeof document === "undefined") return void 0;
+  const match = document.cookie.match(
+    new RegExp("(?:^|; )" + SIDEBAR_COOKIE_NAME + "=([^;]+)")
+  );
+  if (match === null) return void 0;
+  if (match[1] === "true") return true;
+  if (match[1] === "false") return false;
+  return void 0;
+}
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -11444,26 +11524,33 @@ function SidebarProvider({
   children,
   ...props
 }) {
-  const isMobile = useIsMobile();
+  const isMobile = Boolean(useIsMobile());
   const [openMobile, setOpenMobile] = import_react394.default.useState(false);
-  const [_open, _setOpen] = import_react394.default.useState(defaultOpen);
-  const open = openProp ?? _open;
+  const [isHovered, setIsHovered] = import_react394.default.useState(false);
+  const [internalOpen, setInternalOpen] = import_react394.default.useState(() => {
+    const stored = readSidebarCookie();
+    return stored ?? defaultOpen;
+  });
+  const open = Boolean(openProp ?? internalOpen);
   const setOpen = import_react394.default.useCallback(
     (value) => {
-      const openState = typeof value === "function" ? value(open) : value;
+      const next = typeof value === "function" ? value(open) : value;
       if (setOpenProp !== void 0) {
-        setOpenProp(openState);
+        setOpenProp(next);
       } else {
-        _setOpen(openState);
+        setInternalOpen(next);
       }
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open]
   );
-  const [isHovered, setIsHovered] = import_react394.default.useState(false);
   const toggleSidebar = import_react394.default.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [isMobile, setOpen, setOpenMobile]);
+    if (isMobile) {
+      setOpenMobile((v3) => !v3);
+    } else {
+      setOpen((v3) => !v3);
+    }
+  }, [isMobile, setOpen]);
   import_react394.default.useEffect(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
@@ -11474,7 +11561,7 @@ function SidebarProvider({
     window.addEventListener("keydown", handleKeyDown2);
     return () => window.removeEventListener("keydown", handleKeyDown2);
   }, [toggleSidebar]);
-  const state = open === true ? "expanded" : "collapsed";
+  const state = open ? "expanded" : "collapsed";
   const contextValue = import_react394.default.useMemo(
     () => ({
       state,
@@ -11487,20 +11574,12 @@ function SidebarProvider({
       isHovered,
       setIsHovered
     }),
-    [
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-      isHovered
-    ]
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar, isHovered]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
     "div",
     {
+      "data-slot": "sidebar-wrapper",
       style: {
         "--sidebar-width": SIDEBAR_WIDTH,
         "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
@@ -11531,19 +11610,32 @@ function Sidebar({
     isHovered,
     setIsHovered
   } = useSidebar();
+  const openTimer = import_react394.default.useRef(null);
+  const closeTimer = import_react394.default.useRef(null);
+  const clearTimers = import_react394.default.useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  }, []);
+  import_react394.default.useEffect(() => clearTimers, [clearTimers]);
   const handleMouseEnter = import_react394.default.useCallback(() => {
-    if (Boolean(isMobile) || state === "expanded") {
-      return;
-    }
-    setIsHovered(true);
-  }, [isMobile, state, setIsHovered]);
+    if (isMobile == true || state === "expanded" || collapsible !== "icon") return;
+    clearTimers();
+    openTimer.current = setTimeout(() => setIsHovered(true), HOVER_OPEN_DELAY);
+  }, [isMobile, state, collapsible, clearTimers, setIsHovered]);
   const handleMouseLeave = import_react394.default.useCallback(() => {
-    setIsHovered(false);
-  }, [setIsHovered]);
+    clearTimers();
+    closeTimer.current = setTimeout(
+      () => setIsHovered(false),
+      HOVER_CLOSE_DELAY
+    );
+  }, [clearTimers, setIsHovered]);
   if (collapsible === "none") {
     return /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
       "div",
       {
+        "data-slot": "sidebar",
         className: cn(
           "flex h-full w-(--sidebar-width) flex-col bg-white text-gray-900",
           className
@@ -11553,7 +11645,7 @@ function Sidebar({
       }
     );
   }
-  if (isMobile === true) {
+  if (isMobile == true) {
     return /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(
       SheetContent,
       {
@@ -11561,14 +11653,12 @@ function Sidebar({
         "data-slot": "sidebar",
         "data-mobile": "true",
         className: "w-(--sidebar-width) bg-white p-0 text-gray-900 [&>button]:hidden",
-        style: {
-          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
-        },
+        style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
         side,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(SheetHeader, { className: "sr-only", children: [
             /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(SheetDescription, { children: "Menampilkan sidebar mobile." })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("div", { className: "flex h-full w-full flex-col", children })
         ]
@@ -11584,6 +11674,7 @@ function Sidebar({
       "data-variant": variant,
       "data-side": side,
       "data-hovered": isHovered,
+      "data-slot": "sidebar",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
           "div",
@@ -11600,11 +11691,11 @@ function Sidebar({
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              "fixed inset-y-0 z-21 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-              // Adjust the padding for floating and inset variants.
               variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=left]:border-gray-200 group-data-[side=right]:border-l group-data-[side=right]:border-gray-200",
               "group-data-[collapsible=icon]:group-data-[hovered=true]:w-(--sidebar-width)",
+              "group-data-[collapsible=icon]:group-data-[hovered=true]:shadow-lg",
               className
             ),
             onMouseEnter: handleMouseEnter,
@@ -11629,12 +11720,19 @@ function SidebarTrigger({
   onClick,
   ...props
 }) {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar, state } = useSidebar();
   return /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(
     "button",
     {
+      type: "button",
       "data-sidebar": "trigger",
-      className: cn("size-7", className),
+      "aria-label": "Toggle Sidebar",
+      "aria-expanded": state === "expanded",
+      className: cn(
+        "inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-gray-700",
+        "focus-visible:ring-primary-500 hover:bg-gray-100 focus-visible:ring-2 focus-visible:outline-none",
+        className
+      ),
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
@@ -11692,7 +11790,8 @@ function SidebarContent({ className, ...props }) {
     {
       "data-sidebar": "content",
       className: cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-3",
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto p-3",
+        "scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
         className
       ),
       ...props
@@ -11709,64 +11808,66 @@ function SidebarMenu({ className, ...props }) {
     }
   );
 }
+function MenuItemInner({
+  icon,
+  expanded,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(import_jsx_runtime404.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "shrink-0", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon_default, { name: "ellipse", size: 18 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
+      "span",
+      {
+        className: cn(
+          "flex-1 truncate transition-opacity duration-150",
+          expanded ? "opacity-100" : "pointer-events-none w-0 opacity-0"
+        ),
+        children
+      }
+    )
+  ] });
+}
 function SidebarMenuItem({
   children,
   className,
   icon,
-  active,
+  active = false,
   asChild = true,
   ...props
 }) {
   const { state, isHovered } = useSidebar();
+  const expanded = state === "expanded" || isHovered;
   const itemClassName = cn(
     "flex w-full items-center gap-2 rounded-sm bg-white px-3 py-2.5 text-sm text-gray-800 transition-colors",
     "hover:bg-primary-100",
-    Boolean(active) && "bg-primary-100 text-primary-1000 before:bg-primary-1000 before:absolute before:top-1/2 before:left-0 before:h-5 before:w-1 before:-translate-y-1/2 before:rounded-r-md"
+    "focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none",
+    active == true && "bg-primary-100 text-primary-1000 before:bg-primary-1000 before:absolute before:top-1/2 before:left-0 before:h-5 before:w-1 before:-translate-y-1/2 before:rounded-r-md"
   );
-  const iconElement = icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "shrink-0", children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon_default, { name: "ellipse", size: 18 }) });
+  let body;
+  if (asChild) {
+    const child = import_react394.default.Children.only(children);
+    if (!import_react394.default.isValidElement(child)) {
+      throw new Error(
+        "SidebarMenuItem with asChild requires a single valid React element as child"
+      );
+    }
+    const childEl = child;
+    body = import_react394.default.cloneElement(childEl, {
+      className: cn(itemClassName, childEl.props.className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(MenuItemInner, { icon, expanded, children: childEl.props.children })
+    });
+  } else {
+    body = /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("div", { className: itemClassName, children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(MenuItemInner, { icon, expanded, children }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
     "li",
     {
       "data-sidebar": "menu-item",
+      "data-active": active,
+      "aria-current": active ? "page" : void 0,
       className: cn("group/menu-item relative", className),
       ...props,
-      children: asChild === true ? (() => {
-        const child = import_react394.default.Children.only(children);
-        if (import_react394.default.isValidElement(child) === false) {
-          throw new Error(
-            "SidebarMenuItem with asChild requires a single valid React element as child"
-          );
-        }
-        const childElement = child;
-        return import_react394.default.cloneElement(childElement, {
-          className: cn(itemClassName, childElement.props.className),
-          children: /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(import_jsx_runtime404.Fragment, { children: [
-            iconElement,
-            /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
-              "span",
-              {
-                className: cn(
-                  "flex-1",
-                  state === "collapsed" && isHovered === false && "hidden"
-                ),
-                children: childElement.props.children
-              }
-            )
-          ] })
-        });
-      })() : /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)("div", { className: itemClassName, children: [
-        iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
-          "span",
-          {
-            className: cn(
-              "flex-1",
-              state === "collapsed" && isHovered === false && "hidden"
-            ),
-            children
-          }
-        )
-      ] })
+      children: body
     }
   );
 }
@@ -11779,29 +11880,30 @@ function SidebarMenuGroup({
   ...props
 }) {
   const { state, isHovered } = useSidebar();
+  const expanded = state === "expanded" || isHovered;
   const [isOpen, setIsOpen] = import_react394.default.useState(active);
   const triggerClassName = cn(
-    "hover:bg-primary-100 relative flex w-full items-center gap-2 rounded-sm bg-white px-3 py-2.5 text-sm text-gray-800 transition-colors",
-    "cursor-pointer",
-    Boolean(active) && "bg-primary-100 text-primary-1000 before:bg-primary-1000 before:absolute before:top-1/2 before:left-0 before:h-5 before:w-1 before:-translate-y-1/2 before:rounded-r-md"
+    "relative flex w-full cursor-pointer items-center gap-2 rounded-sm bg-white px-3 py-2.5 text-sm text-gray-800 transition-colors",
+    "hover:bg-primary-100",
+    "focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none",
+    active && "bg-primary-100 text-primary-1000 before:bg-primary-1000 before:absolute before:top-1/2 before:left-0 before:h-5 before:w-1 before:-translate-y-1/2 before:rounded-r-md"
   );
-  const iconElement = icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "shrink-0", children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon_default, { name: "ellipse", size: 18 }) });
   return /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(
     Collapsible,
     {
-      open: Boolean(isOpen) && (state === "expanded" || isHovered),
+      open: isOpen && expanded,
       onOpenChange: setIsOpen,
       className: cn("group/menu-group flex flex-col gap-y-1", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(CollapsibleTrigger2, { className: triggerClassName, children: [
-          iconElement,
+          /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "shrink-0", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon_default, { name: "ellipse", size: 18 }) }),
           /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
             "span",
             {
               className: cn(
-                "flex-1 text-left",
-                state === "collapsed" && isHovered === false && "hidden"
+                "flex-1 truncate text-left transition-opacity duration-150",
+                expanded ? "opacity-100" : "pointer-events-none w-0 opacity-0"
               ),
               children: label
             }
@@ -11813,8 +11915,8 @@ function SidebarMenuGroup({
               size: 18,
               className: cn(
                 "shrink-0 transition-transform duration-200",
-                state === "collapsed" && "hidden",
-                Boolean(isOpen) && "rotate-180"
+                !expanded && "hidden",
+                isOpen && "rotate-180"
               )
             }
           )
@@ -17135,33 +17237,99 @@ function Select({
 }
 
 // src/components/tabs/tabs.tsx
-var import_react414 = require("react");
+var import_react414 = __toESM(require("react"), 1);
 var import_jsx_runtime435 = require("react/jsx-runtime");
 var TabsContext = (0, import_react414.createContext)(void 0);
+var TAB_URL_EVENT = "__tab_url_change__";
+function readParams2() {
+  if (typeof window === "undefined") {
+    return new URLSearchParams();
+  }
+  return new URLSearchParams(window.location.search);
+}
+function useUrlSearchParams2() {
+  const [params, setParams] = (0, import_react414.useState)(readParams2);
+  (0, import_react414.useEffect)(() => {
+    const sync = () => setParams(readParams2());
+    sync();
+    window.addEventListener("popstate", sync);
+    window.addEventListener(TAB_URL_EVENT, sync);
+    return () => {
+      window.removeEventListener("popstate", sync);
+      window.removeEventListener(TAB_URL_EVENT, sync);
+    };
+  }, []);
+  const setSearchParams = import_react414.default.useCallback(
+    (updater, options) => {
+      const next = updater(readParams2());
+      const query = next.toString();
+      const url = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
+      if (options?.replace) {
+        window.history.replaceState(window.history.state, "", url);
+      } else {
+        window.history.pushState(window.history.state, "", url);
+      }
+      window.dispatchEvent(new Event(TAB_URL_EVENT));
+    },
+    []
+  );
+  return [params, setSearchParams];
+}
 var useTabsContext = () => {
   const context = (0, import_react414.useContext)(TabsContext);
-  if (!context) {
+  if (context === void 0) {
     throw new Error("Tabs components must be used within Tabs");
   }
   return context;
 };
+var useTabHref = (value) => {
+  const { buildHref } = useTabsContext();
+  return buildHref?.(value);
+};
 var Tabs = ({
   defaultValue,
   value: controlledValue,
   onValueChange,
+  id,
+  urlReplace = true,
   orientation = "horizontal",
   unmountOnHide = true,
   className,
   children
 }) => {
+  const [searchParams, setSearchParams] = useUrlSearchParams2();
   const [uncontrolledValue, setUncontrolledValue] = (0, import_react414.useState)(
     defaultValue ?? ""
   );
   const triggersRef = (0, import_react414.useRef)(/* @__PURE__ */ new Map());
   const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : uncontrolledValue;
+  const urlParam = id !== void 0 ? `tab-${id}` : void 0;
+  const isUrlSynced = urlParam !== void 0 && !isControlled;
+  let value;
+  if (isControlled) {
+    value = controlledValue;
+  } else if (isUrlSynced) {
+    value = searchParams.get(urlParam) ?? defaultValue ?? "";
+  } else {
+    value = uncontrolledValue;
+  }
+  const buildHref = isUrlSynced ? (newValue) => {
+    const next = new URLSearchParams(searchParams);
+    next.set(urlParam, newValue);
+    return `?${next.toString()}`;
+  } : void 0;
   const handleValueChange = (newValue) => {
-    if (!isControlled) {
+    if (isUrlSynced && urlParam !== void 0) {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set(urlParam, newValue);
+          return next;
+        },
+        { replace: urlReplace }
+      );
+    }
+    if (!isUrlSynced && !isControlled) {
       setUncontrolledValue(newValue);
     }
     onValueChange?.(newValue);
@@ -17181,7 +17349,9 @@ var Tabs = ({
         orientation,
         unmountOnHide,
         registerTrigger,
-        unregisterTrigger
+        unregisterTrigger,
+        buildHref,
+        urlReplace
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: cn(className), "data-orientation": orientation, children })
     }
@@ -17194,11 +17364,11 @@ var TabsList = ({ className, children }) => {
   const [isInitialized, setIsInitialized] = (0, import_react414.useState)(false);
   (0, import_react414.useEffect)(() => {
     const updateIndicator = () => {
-      if (!listRef.current) return;
+      if (listRef.current === null) return;
       const activeButton = listRef.current.querySelector(
-        `[aria-selected="true"]`
+        '[aria-selected="true"]'
       );
-      if (activeButton === null || activeButton === void 0) return;
+      if (activeButton === null) return;
       const listRect = listRef.current.getBoundingClientRect();
       const buttonRect = activeButton.getBoundingClientRect();
       if (orientation === "horizontal") {
@@ -17271,36 +17441,63 @@ var TabsTrigger = ({
   className,
   children
 }) => {
-  const { value, onValueChange, registerTrigger, unregisterTrigger } = useTabsContext();
+  const {
+    value,
+    onValueChange,
+    buildHref,
+    registerTrigger,
+    unregisterTrigger
+  } = useTabsContext();
   const isSelected = value === triggerValue;
   const triggerRef = (0, import_react414.useRef)(null);
+  const href = buildHref?.(triggerValue);
   (0, import_react414.useEffect)(() => {
-    if (triggerRef.current) {
+    if (triggerRef.current !== null) {
       registerTrigger(triggerValue, triggerRef.current);
     }
     return () => {
       unregisterTrigger(triggerValue);
     };
   }, [triggerValue, registerTrigger, unregisterTrigger]);
+  const sharedClass = cn(
+    "inline-flex cursor-pointer items-center justify-center rounded-md px-4 py-2 whitespace-nowrap",
+    "text-sm font-semibold transition-colors duration-200",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:outline-none",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    isSelected ? "text-white" : "text-gray-700 hover:text-gray-900",
+    className
+  );
+  const sharedA11y = {
+    "role": "tab",
+    "aria-selected": isSelected,
+    "aria-controls": `panel-${triggerValue}`,
+    "id": `tab-${triggerValue}`
+  };
+  if (href !== void 0 && !disabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
+      "a",
+      {
+        ref: triggerRef,
+        href,
+        onClick: (e) => {
+          e.preventDefault();
+          onValueChange(triggerValue);
+        },
+        className: sharedClass,
+        ...sharedA11y,
+        children
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
     "button",
     {
       ref: triggerRef,
-      role: "tab",
       type: "button",
-      "aria-selected": isSelected,
-      "aria-controls": `panel-${triggerValue}`,
-      id: `tab-${triggerValue}`,
       disabled,
       onClick: () => onValueChange(triggerValue),
-      className: cn(
-        "inline-flex cursor-pointer items-center justify-center rounded-md px-4 py-2 whitespace-nowrap",
-        "text-sm font-semibold transition-colors duration-200",
-        "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:outline-none",
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        isSelected ? "text-white" : "text-gray-700 hover:text-gray-900",
-        className
-      ),
+      className: sharedClass,
+      ...sharedA11y,
       children
     }
   );
@@ -36649,7 +36846,9 @@ var Radio = ({ label, description, className, size: sizeProp, ...props }) => {
   toDateOnly,
   useCopy,
   useIsMobile,
+  useSheetHref,
   useSidebar,
+  useTabHref,
   useToast
 });
 //# sourceMappingURL=clients.cjs.map