@windrun-huaiin/third-ui 29.0.2 → 29.0.4

package/dist/clerk/fingerprint/fingerprint-provider.js

@@ -10,6 +10,8 @@ var nextIntl = require('next-intl');
 var React = require('react');
 var useFingerprint = require('./use-fingerprint.js');
 var ui = require('@windrun-huaiin/base-ui/ui');
+require('next/link');
+var xSwitchButton = require('../../main/buttons/x-switch-button.js');
 var fingerprintClient = require('./fingerprint-client.js');
 var fingerprintDebug = require('./fingerprint-debug.js');
 var fingerprintShared = require('./fingerprint-shared.js');
@@ -253,11 +255,7 @@ function FingerprintStatus() {
         setActiveDebugFingerprintId(nextFingerprintId);
         setTestResult(tpl(translations.messages.generatedTestFingerprintOverride, { fingerprintId: nextFingerprintId }));
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isOpen && (jsxRuntime.jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: utils.cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsxRuntime.jsx(icons.LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxRuntime.jsxs("div", { ref: modalRef, className: utils.cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsxRuntime.jsx("header", { className: "mb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 text-base font-bold tracking-wider", lib.themeIconColor), children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => setPanelMode((prev) => prev === 'info' ? 'test' : 'info'), className: utils.cn('inline-flex items-center gap-2 rounded-full border px-2 py-1 text-[11px] font-semibold shadow-sm transition-all duration-200', panelMode === 'test'
-                                                        ? utils.cn('border-transparent text-white', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass)
-                                                        : themedGhostButtonClass), "aria-pressed": panelMode === 'test', children: [jsxRuntime.jsx("span", { children: translations.panel.testModeLabel }), jsxRuntime.jsx("span", { className: utils.cn('relative inline-flex h-5 w-9 items-center rounded-full transition-colors', panelMode === 'test'
-                                                                ? 'bg-white/25'
-                                                                : 'bg-slate-300 dark:bg-slate-700'), children: jsxRuntime.jsx("span", { className: utils.cn('inline-block size-4 rounded-full shadow-sm transition-transform', panelMode === 'test' ? 'bg-white' : 'bg-white dark:bg-slate-100', panelMode === 'test' ? 'translate-x-4' : 'translate-x-0.5') }) })] }), jsxRuntime.jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] })] }) }), jsxRuntime.jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(icons.FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsxRuntime.jsx(StatusTag, { value: userStatus, translations: translations }), items: [
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isOpen && (jsxRuntime.jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: utils.cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsxRuntime.jsx(icons.LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxRuntime.jsxs("div", { ref: modalRef, className: utils.cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsxRuntime.jsx("header", { className: "mb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 text-base font-bold tracking-wider", lib.themeIconColor), children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(xSwitchButton.XSwitchButton, { type: "button", checked: panelMode === 'test', onCheckedChange: (nextChecked) => setPanelMode(nextChecked ? 'test' : 'info'), checkedLabel: translations.panel.testModeLabel, uncheckedLabel: translations.panel.testModeLabel, size: "compact", className: "border px-2 py-1 text-[11px] shadow-sm" }), jsxRuntime.jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] })] }) }), jsxRuntime.jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(icons.FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsxRuntime.jsx(StatusTag, { value: userStatus, translations: translations }), items: [
                                                     { label: translations.labels.userId, value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userId) || '' }) },
                                                     { label: translations.labels.nickName, value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userName) || '' }) },
                                                     { label: translations.labels.fingerprintId, value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.fingerprintId) || fingerprintId || '' }) },

package/dist/clerk/fingerprint/fingerprint-provider.mjs

@@ -8,6 +8,8 @@ import { useMessages } from 'next-intl';
 import { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
 import { useFingerprint } from './use-fingerprint.mjs';
 import { CopyableText } from '@windrun-huaiin/base-ui/ui';
+import 'next/link';
+import { XSwitchButton } from '../../main/buttons/x-switch-button.mjs';
 import { createFingerprintHeaders } from './fingerprint-client.mjs';
 import { getOrCreateDebugFingerprintOverride, regenerateDebugFingerprintOverride } from './fingerprint-debug.mjs';
 import { FINGERPRINT_SOURCE_REFER } from './fingerprint-shared.mjs';
@@ -251,11 +253,7 @@ function FingerprintStatus() {
         setActiveDebugFingerprintId(nextFingerprintId);
         setTestResult(tpl(translations.messages.generatedTestFingerprintOverride, { fingerprintId: nextFingerprintId }));
     };
-    return (jsxs(Fragment, { children: [!isOpen && (jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsx(LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxs("div", { ref: modalRef, className: cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsx("header", { className: "mb-4", children: jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxs("div", { className: cn("flex items-center gap-2 text-base font-bold tracking-wider", themeIconColor), children: [jsx(ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs("button", { type: "button", onClick: () => setPanelMode((prev) => prev === 'info' ? 'test' : 'info'), className: cn('inline-flex items-center gap-2 rounded-full border px-2 py-1 text-[11px] font-semibold shadow-sm transition-all duration-200', panelMode === 'test'
-                                                        ? cn('border-transparent text-white', themeButtonGradientClass, themeButtonGradientHoverClass)
-                                                        : themedGhostButtonClass), "aria-pressed": panelMode === 'test', children: [jsx("span", { children: translations.panel.testModeLabel }), jsx("span", { className: cn('relative inline-flex h-5 w-9 items-center rounded-full transition-colors', panelMode === 'test'
-                                                                ? 'bg-white/25'
-                                                                : 'bg-slate-300 dark:bg-slate-700'), children: jsx("span", { className: cn('inline-block size-4 rounded-full shadow-sm transition-transform', panelMode === 'test' ? 'bg-white' : 'bg-white dark:bg-slate-100', panelMode === 'test' ? 'translate-x-4' : 'translate-x-0.5') }) })] }), jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsx(XIcon, { className: "size-4" }) })] })] }) }), jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxs(Fragment, { children: [jsx(PanelSection, { icon: jsx(FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsx(StatusTag, { value: userStatus, translations: translations }), items: [
+    return (jsxs(Fragment, { children: [!isOpen && (jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsx(LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxs("div", { ref: modalRef, className: cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsx("header", { className: "mb-4", children: jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxs("div", { className: cn("flex items-center gap-2 text-base font-bold tracking-wider", themeIconColor), children: [jsx(ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(XSwitchButton, { type: "button", checked: panelMode === 'test', onCheckedChange: (nextChecked) => setPanelMode(nextChecked ? 'test' : 'info'), checkedLabel: translations.panel.testModeLabel, uncheckedLabel: translations.panel.testModeLabel, size: "compact", className: "border px-2 py-1 text-[11px] shadow-sm" }), jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsx(XIcon, { className: "size-4" }) })] })] }) }), jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxs(Fragment, { children: [jsx(PanelSection, { icon: jsx(FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsx(StatusTag, { value: userStatus, translations: translations }), items: [
                                                     { label: translations.labels.userId, value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userId) || '' }) },
                                                     { label: translations.labels.nickName, value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userName) || '' }) },
                                                     { label: translations.labels.fingerprintId, value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.fingerprintId) || fingerprintId || '' }) },

package/dist/fuma/base/custom-header.js

@@ -16,6 +16,7 @@ var button = require('fumadocs-ui/components/ui/button');
 var i18n = require('fumadocs-ui/contexts/i18n');
 var headerThemeSwitch = require('./header-theme-switch.js');
 
+const PrefetchLinkItem = shared.LinkItem;
 const DEFAULT_DESKTOP_ACTIONS = [
     'search',
     'theme',
@@ -163,7 +164,7 @@ const navItemVariants = classVarianceAuthority.cva('[&_svg]:size-4', {
     },
 });
 function NavbarLinkItem(_a) {
-    var _b;
+    var _b, _c;
     var { item } = _a, props = tslib.__rest(_a, ["item"]);
     if (item.type === 'custom')
         return jsxRuntime.jsx("div", Object.assign({}, props, { children: item.children }));
@@ -179,11 +180,11 @@ function NavbarLinkItem(_a) {
         });
         return (jsxRuntime.jsxs(navigationMenu.NavigationMenuItem, { children: [jsxRuntime.jsx(navigationMenu.NavigationMenuTrigger, Object.assign({}, props, { className: utils.cn(navItemVariants(), 'rounded-md', props.className), children: item.url ? (jsxRuntime.jsx(Link, { href: item.url, prefetch: (_b = item.prefetch) !== null && _b !== void 0 ? _b : false, external: item.external, children: item.text })) : (item.text) })), jsxRuntime.jsx(navigationMenu.NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
     }
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenuItem, { children: jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(shared.LinkItem, Object.assign({ item: item, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: utils.cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenuItem, { children: jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(PrefetchLinkItem, Object.assign({ item: item, prefetch: (_c = item.prefetch) !== null && _c !== void 0 ? _c : false, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: utils.cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
 }
 const Menu = navigationMenu.NavigationMenuItem;
 function MenuLinkItem(_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var { item } = _a, props = tslib.__rest(_a, ["item"]);
     if (item.type === 'custom')
         return jsxRuntime.jsx("div", { className: utils.cn('grid', props.className), children: item.children });
@@ -191,7 +192,7 @@ function MenuLinkItem(_a) {
         const header = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon, item.text] }));
         return (jsxRuntime.jsxs("div", { className: utils.cn('mb-4 flex flex-col', props.className), children: [jsxRuntime.jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsx(Link, { href: item.url, prefetch: (_b = item.prefetch) !== null && _b !== void 0 ? _b : false, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (jsxRuntime.jsx(MenuLinkItem, { item: child }, i)))] }));
     }
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsxs(shared.LinkItem, { item: item, className: utils.cn({
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenuLink, { asChild: true, children: jsxRuntime.jsxs(PrefetchLinkItem, { item: item, prefetch: (_c = item.prefetch) !== null && _c !== void 0 ? _c : false, className: utils.cn({
                 main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
                 icon: button.buttonVariants({
                     size: 'icon',
@@ -201,7 +202,7 @@ function MenuLinkItem(_a) {
                     color: 'secondary',
                     className: 'gap-1.5 [&_svg]:size-4',
                 }),
-            }[(_c = item.type) !== null && _c !== void 0 ? _c : 'main'], props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
+            }[(_d = item.type) !== null && _d !== void 0 ? _d : 'main'], props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
 }
 function MenuTrigger(_a) {
     var { enableHover = false } = _a, props = tslib.__rest(_a, ["enableHover"]);

package/dist/fuma/base/custom-header.mjs

@@ -14,6 +14,7 @@ import { buttonVariants } from 'fumadocs-ui/components/ui/button';
 import { useI18n } from 'fumadocs-ui/contexts/i18n';
 import { HeaderThemeSwitch } from './header-theme-switch.mjs';
 
+const PrefetchLinkItem = LinkItem;
 const DEFAULT_DESKTOP_ACTIONS = [
     'search',
     'theme',
@@ -161,7 +162,7 @@ const navItemVariants = cva('[&_svg]:size-4', {
     },
 });
 function NavbarLinkItem(_a) {
-    var _b;
+    var _b, _c;
     var { item } = _a, props = __rest(_a, ["item"]);
     if (item.type === 'custom')
         return jsx("div", Object.assign({}, props, { children: item.children }));
@@ -177,11 +178,11 @@ function NavbarLinkItem(_a) {
         });
         return (jsxs(NavigationMenuItem, { children: [jsx(NavigationMenuTrigger, Object.assign({}, props, { className: cn(navItemVariants(), 'rounded-md', props.className), children: item.url ? (jsx(Link, { href: item.url, prefetch: (_b = item.prefetch) !== null && _b !== void 0 ? _b : false, external: item.external, children: item.text })) : (item.text) })), jsx(NavigationMenuContent, { className: "grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", children: children })] }));
     }
-    return (jsx(NavigationMenuItem, { children: jsx(NavigationMenuLink, { asChild: true, children: jsx(LinkItem, Object.assign({ item: item, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
+    return (jsx(NavigationMenuItem, { children: jsx(NavigationMenuLink, { asChild: true, children: jsx(PrefetchLinkItem, Object.assign({ item: item, prefetch: (_c = item.prefetch) !== null && _c !== void 0 ? _c : false, "aria-label": item.type === 'icon' ? item.label : undefined }, props, { className: cn(navItemVariants({ variant: item.type }), props.className), children: item.type === 'icon' ? item.icon : item.text })) }) }));
 }
 const Menu = NavigationMenuItem;
 function MenuLinkItem(_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var { item } = _a, props = __rest(_a, ["item"]);
     if (item.type === 'custom')
         return jsx("div", { className: cn('grid', props.className), children: item.children });
@@ -189,7 +190,7 @@ function MenuLinkItem(_a) {
         const header = (jsxs(Fragment, { children: [item.icon, item.text] }));
         return (jsxs("div", { className: cn('mb-4 flex flex-col', props.className), children: [jsx("p", { className: "mb-1 text-sm text-fd-muted-foreground", children: item.url ? (jsx(NavigationMenuLink, { asChild: true, children: jsx(Link, { href: item.url, prefetch: (_b = item.prefetch) !== null && _b !== void 0 ? _b : false, external: item.external, children: header }) })) : (header) }), item.items.map((child, i) => (jsx(MenuLinkItem, { item: child }, i)))] }));
     }
-    return (jsx(NavigationMenuLink, { asChild: true, children: jsxs(LinkItem, { item: item, className: cn({
+    return (jsx(NavigationMenuLink, { asChild: true, children: jsxs(PrefetchLinkItem, { item: item, prefetch: (_c = item.prefetch) !== null && _c !== void 0 ? _c : false, className: cn({
                 main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
                 icon: buttonVariants({
                     size: 'icon',
@@ -199,7 +200,7 @@ function MenuLinkItem(_a) {
                     color: 'secondary',
                     className: 'gap-1.5 [&_svg]:size-4',
                 }),
-            }[(_c = item.type) !== null && _c !== void 0 ? _c : 'main'], props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
+            }[(_d = item.type) !== null && _d !== void 0 ? _d : 'main'], props.className), "aria-label": item.type === 'icon' ? item.label : undefined, children: [item.icon, item.type === 'icon' ? undefined : item.text] }) }));
 }
 function MenuTrigger(_a) {
     var { enableHover = false } = _a, props = __rest(_a, ["enableHover"]);

package/dist/main/alert-dialog/index.d.ts

@@ -2,3 +2,4 @@ export * from './ads-alert-dialog';
 export * from './confirm-dialog';
 export * from './high-priority-confirm-dialog';
 export * from './info-dialog';
+export * from './undoable-confirm-dialog';

package/dist/main/alert-dialog/index.js

@@ -5,6 +5,7 @@ var adsAlertDialog = require('./ads-alert-dialog.js');
 var confirmDialog = require('./confirm-dialog.js');
 var highPriorityConfirmDialog = require('./high-priority-confirm-dialog.js');
 var infoDialog = require('./info-dialog.js');
+var undoableConfirmDialog = require('./undoable-confirm-dialog.js');
 
 
 
@@ -12,3 +13,4 @@ exports.AdsAlertDialog = adsAlertDialog.AdsAlertDialog;
 exports.ConfirmDialog = confirmDialog.ConfirmDialog;
 exports.HighPriorityConfirmDialog = highPriorityConfirmDialog.HighPriorityConfirmDialog;
 exports.InfoDialog = infoDialog.InfoDialog;
+exports.UndoableConfirmDialog = undoableConfirmDialog.UndoableConfirmDialog;

package/dist/main/alert-dialog/index.mjs

@@ -3,3 +3,4 @@ export { AdsAlertDialog } from './ads-alert-dialog.mjs';
 export { ConfirmDialog } from './confirm-dialog.mjs';
 export { HighPriorityConfirmDialog } from './high-priority-confirm-dialog.mjs';
 export { InfoDialog } from './info-dialog.mjs';
+export { UndoableConfirmDialog } from './undoable-confirm-dialog.mjs';

package/dist/main/alert-dialog/undoable-confirm-dialog.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface UndoableConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description: React.ReactNode;
+    pendingTitle?: React.ReactNode;
+    pendingDescription?: React.ReactNode;
+    cancelText?: string;
+    confirmText?: string;
+    undoText?: string;
+    countdownSeconds?: number;
+    onCancel?: () => void;
+    onConfirm: () => void | Promise<void>;
+    onUndo?: () => void;
+}
+export declare function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText, confirmText, undoText, countdownSeconds, onCancel, onConfirm, onUndo, }: UndoableConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/alert-dialog/undoable-confirm-dialog.js

@@ -0,0 +1,87 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var icons = require('@windrun-huaiin/base-ui/icons');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var ui = require('@windrun-huaiin/base-ui/ui');
+var utils = require('@windrun-huaiin/lib/utils');
+var dialogStyles = require('./dialog-styles.js');
+
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', countdownSeconds = 5, onCancel, onConfirm, onUndo, }) {
+    const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
+    const [pending, setPending] = React.useState(false);
+    const [remainingSeconds, setRemainingSeconds] = React.useState(safeCountdownSeconds);
+    const [confirming, setConfirming] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    const intervalRef = React.useRef(null);
+    const clearTimers = React.useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (intervalRef.current) {
+            window.clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    const resetState = React.useCallback(() => {
+        clearTimers();
+        setPending(false);
+        setConfirming(false);
+        setRemainingSeconds(safeCountdownSeconds);
+    }, [clearTimers, safeCountdownSeconds]);
+    React.useEffect(() => {
+        if (open) {
+            setRemainingSeconds(safeCountdownSeconds);
+            return;
+        }
+        resetState();
+    }, [open, resetState, safeCountdownSeconds]);
+    React.useEffect(() => clearTimers, [clearTimers]);
+    const executeConfirm = React.useCallback(() => tslib.__awaiter(this, void 0, void 0, function* () {
+        clearTimers();
+        setConfirming(true);
+        try {
+            yield onConfirm();
+            onOpenChange(false);
+        }
+        finally {
+            setConfirming(false);
+        }
+    }), [clearTimers, onConfirm, onOpenChange]);
+    const startCountdown = () => {
+        clearTimers();
+        setPending(true);
+        setRemainingSeconds(safeCountdownSeconds);
+        intervalRef.current = window.setInterval(() => {
+            setRemainingSeconds((current) => Math.max(0, current - 1));
+        }, 1000);
+        timeoutRef.current = window.setTimeout(() => {
+            void executeConfirm();
+        }, (safeCountdownSeconds + 1) * 1000);
+    };
+    const handleCancel = () => {
+        resetState();
+        onOpenChange(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleUndo = () => {
+        resetState();
+        onOpenChange(false);
+        onUndo === null || onUndo === void 0 ? void 0 : onUndo();
+    };
+    const displayTitle = pending ? pendingTitle !== null && pendingTitle !== void 0 ? pendingTitle : title : title;
+    const displayDescription = pending ? pendingDescription !== null && pendingDescription !== void 0 ? pendingDescription : description : description;
+    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: (nextOpen) => {
+            if (!nextOpen) {
+                handleCancel();
+                return;
+            }
+            onOpenChange(nextOpen);
+        }, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleCancel, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsxRuntime.jsx(icons.Trash2Icon, { className: "size-5" }) : jsxRuntime.jsx(icons.CircleAlertIcon, { className: "size-5" }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: pending ? handleUndo : handleCancel, "aria-label": "Close", disabled: confirming, children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: utils.cn(dialogStyles.dialogDescriptionClass, 'min-h-[44px]'), children: jsxRuntime.jsx("span", { children: displayDescription }) }), jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsxRuntime.jsx("span", { className: utils.cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', lib.themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsxRuntime.jsx("span", { className: utils.cn('text-sm font-bold', lib.themeIconColor), children: "s" })] }) }), jsxRuntime.jsx("div", { className: utils.cn(dialogStyles.dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxRuntime.jsxs("button", { type: "button", onClick: handleUndo, className: dialogStyles.secondaryButtonClass, disabled: confirming, children: [jsxRuntime.jsx(icons.Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleCancel, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: startCountdown, className: dialogStyles.dangerButtonClass, children: confirmText })] })) })] }) }));
+}
+
+exports.UndoableConfirmDialog = UndoableConfirmDialog;

package/dist/main/alert-dialog/undoable-confirm-dialog.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { __awaiter } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Trash2Icon, CircleAlertIcon, XIcon, Undo2Icon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription } from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, secondaryButtonClass, dangerButtonClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', countdownSeconds = 5, onCancel, onConfirm, onUndo, }) {
+    const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
+    const [pending, setPending] = React__default.useState(false);
+    const [remainingSeconds, setRemainingSeconds] = React__default.useState(safeCountdownSeconds);
+    const [confirming, setConfirming] = React__default.useState(false);
+    const timeoutRef = React__default.useRef(null);
+    const intervalRef = React__default.useRef(null);
+    const clearTimers = React__default.useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (intervalRef.current) {
+            window.clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    const resetState = React__default.useCallback(() => {
+        clearTimers();
+        setPending(false);
+        setConfirming(false);
+        setRemainingSeconds(safeCountdownSeconds);
+    }, [clearTimers, safeCountdownSeconds]);
+    React__default.useEffect(() => {
+        if (open) {
+            setRemainingSeconds(safeCountdownSeconds);
+            return;
+        }
+        resetState();
+    }, [open, resetState, safeCountdownSeconds]);
+    React__default.useEffect(() => clearTimers, [clearTimers]);
+    const executeConfirm = React__default.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        clearTimers();
+        setConfirming(true);
+        try {
+            yield onConfirm();
+            onOpenChange(false);
+        }
+        finally {
+            setConfirming(false);
+        }
+    }), [clearTimers, onConfirm, onOpenChange]);
+    const startCountdown = () => {
+        clearTimers();
+        setPending(true);
+        setRemainingSeconds(safeCountdownSeconds);
+        intervalRef.current = window.setInterval(() => {
+            setRemainingSeconds((current) => Math.max(0, current - 1));
+        }, 1000);
+        timeoutRef.current = window.setTimeout(() => {
+            void executeConfirm();
+        }, (safeCountdownSeconds + 1) * 1000);
+    };
+    const handleCancel = () => {
+        resetState();
+        onOpenChange(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleUndo = () => {
+        resetState();
+        onOpenChange(false);
+        onUndo === null || onUndo === void 0 ? void 0 : onUndo();
+    };
+    const displayTitle = pending ? pendingTitle !== null && pendingTitle !== void 0 ? pendingTitle : title : title;
+    const displayDescription = pending ? pendingDescription !== null && pendingDescription !== void 0 ? pendingDescription : description : description;
+    return (jsx(AlertDialog, { open: open, onOpenChange: (nextOpen) => {
+            if (!nextOpen) {
+                handleCancel();
+                return;
+            }
+            onOpenChange(nextOpen);
+        }, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleCancel, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsx(Trash2Icon, { className: "size-5" }) : jsx(CircleAlertIcon, { className: "size-5" }) }), jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: pending ? handleUndo : handleCancel, "aria-label": "Close", disabled: confirming, children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: cn(dialogDescriptionClass, 'min-h-[44px]'), children: jsx("span", { children: displayDescription }) }), jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsx("span", { className: cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsx("span", { className: cn('text-sm font-bold', themeIconColor), children: "s" })] }) }), jsx("div", { className: cn(dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxs("button", { type: "button", onClick: handleUndo, className: secondaryButtonClass, disabled: confirming, children: [jsx(Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: handleCancel, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: startCountdown, className: dangerButtonClass, children: confirmText })] })) })] }) }));
+}
+
+export { UndoableConfirmDialog };

package/dist/main/buttons/index.d.ts

@@ -1,3 +1,4 @@
 export * from './gradient-button';
 export * from './x-button';
+export * from './x-switch-button';
 export * from './x-toggle-button';

package/dist/main/buttons/index.js

@@ -3,10 +3,12 @@
 
 var gradientButton = require('./gradient-button.js');
 var xButton = require('./x-button.js');
+var xSwitchButton = require('./x-switch-button.js');
 var xToggleButton = require('./x-toggle-button.js');
 
 
 
 exports.GradientButton = gradientButton.GradientButton;
 exports.XButton = xButton.XButton;
+exports.XSwitchButton = xSwitchButton.XSwitchButton;
 exports.XToggleButton = xToggleButton.XToggleButton;

package/dist/main/buttons/index.mjs

@@ -1,4 +1,5 @@
 "use client";
 export { GradientButton } from './gradient-button.mjs';
 export { XButton } from './x-button.mjs';
+export { XSwitchButton } from './x-switch-button.mjs';
 export { XToggleButton } from './x-toggle-button.mjs';

package/dist/main/buttons/x-switch-button.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type XSwitchButtonSize = 'default' | 'compact';
+export type XSwitchButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'children'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    checkedLabel?: React.ReactNode;
+    uncheckedLabel?: React.ReactNode;
+    labelPosition?: 'left' | 'right';
+    size?: XSwitchButtonSize;
+    className?: string;
+    labelClassName?: string;
+    trackClassName?: string;
+    thumbClassName?: string;
+    checkedClassName?: string;
+    uncheckedClassName?: string;
+    checkedTrackClassName?: string;
+    uncheckedTrackClassName?: string;
+    checkedThumbClassName?: string;
+    uncheckedThumbClassName?: string;
+};
+export declare function XSwitchButton({ checked, defaultChecked, onCheckedChange, checkedLabel, uncheckedLabel, labelPosition, size, className, labelClassName, trackClassName, thumbClassName, checkedClassName, uncheckedClassName, checkedTrackClassName, uncheckedTrackClassName, checkedThumbClassName, uncheckedThumbClassName, disabled, type, onClick, ...props }: XSwitchButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/buttons/x-switch-button.js

@@ -0,0 +1,63 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function XSwitchButton(_a) {
+    var { checked, defaultChecked = false, onCheckedChange, checkedLabel, uncheckedLabel, labelPosition = 'left', size = 'default', className, labelClassName, trackClassName, thumbClassName, checkedClassName, uncheckedClassName, checkedTrackClassName, uncheckedTrackClassName, checkedThumbClassName, uncheckedThumbClassName, disabled, type = 'button', onClick } = _a, props = tslib.__rest(_a, ["checked", "defaultChecked", "onCheckedChange", "checkedLabel", "uncheckedLabel", "labelPosition", "size", "className", "labelClassName", "trackClassName", "thumbClassName", "checkedClassName", "uncheckedClassName", "checkedTrackClassName", "uncheckedTrackClassName", "checkedThumbClassName", "uncheckedThumbClassName", "disabled", "type", "onClick"]);
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = React__namespace.useState(defaultChecked);
+    const active = isControlled ? checked : internalChecked;
+    const currentLabel = active ? checkedLabel : uncheckedLabel;
+    const hasLabel = currentLabel !== undefined && currentLabel !== null && currentLabel !== false;
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        const nextChecked = !active;
+        if (!isControlled) {
+            setInternalChecked(nextChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
+    }
+    const trackSizeClass = size === 'compact' ? 'h-5 w-9' : 'h-6 w-11';
+    const thumbSizeClass = size === 'compact' ? 'size-4' : 'size-5';
+    const thumbTranslateClass = active
+        ? size === 'compact'
+            ? 'translate-x-4'
+            : 'translate-x-5'
+        : 'translate-x-0.5';
+    const labelNode = hasLabel ? (jsxRuntime.jsx("span", { className: utils.cn('min-w-0', labelClassName), children: currentLabel })) : null;
+    const defaultCheckedClassName = utils.cn('border-transparent text-white shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass);
+    const defaultUncheckedClassName = utils.cn('border-slate-200 bg-white/90 text-slate-700 shadow-sm hover:border-current hover:bg-slate-50', 'dark:border-white/20 dark:bg-slate-900/90 dark:text-slate-200 dark:shadow-white/5 dark:hover:bg-slate-800', lib.themeIconColor);
+    const trackNode = (jsxRuntime.jsx("span", { "aria-hidden": "true", className: utils.cn('relative inline-flex shrink-0 items-center rounded-full transition-colors', trackSizeClass, active ? 'bg-white/25' : 'bg-slate-300 dark:bg-slate-700', trackClassName, active ? checkedTrackClassName : uncheckedTrackClassName), children: jsxRuntime.jsx("span", { className: utils.cn('inline-block rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100', thumbSizeClass, thumbTranslateClass, thumbClassName, active ? checkedThumbClassName : uncheckedThumbClassName) }) }));
+    return (jsxRuntime.jsx("button", Object.assign({ type: type, role: "switch", "aria-checked": active, disabled: disabled, onClick: handleClick, className: utils.cn('inline-flex items-center gap-2 rounded-full font-semibold transition-all duration-200', active ? defaultCheckedClassName : defaultUncheckedClassName, className, active
+            ? checkedClassName
+            : uncheckedClassName, disabled && 'cursor-not-allowed opacity-60') }, props, { children: labelPosition === 'left' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [labelNode, trackNode] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [trackNode, labelNode] })) })));
+}
+
+exports.XSwitchButton = XSwitchButton;

package/dist/main/buttons/x-switch-button.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function XSwitchButton(_a) {
+    var { checked, defaultChecked = false, onCheckedChange, checkedLabel, uncheckedLabel, labelPosition = 'left', size = 'default', className, labelClassName, trackClassName, thumbClassName, checkedClassName, uncheckedClassName, checkedTrackClassName, uncheckedTrackClassName, checkedThumbClassName, uncheckedThumbClassName, disabled, type = 'button', onClick } = _a, props = __rest(_a, ["checked", "defaultChecked", "onCheckedChange", "checkedLabel", "uncheckedLabel", "labelPosition", "size", "className", "labelClassName", "trackClassName", "thumbClassName", "checkedClassName", "uncheckedClassName", "checkedTrackClassName", "uncheckedTrackClassName", "checkedThumbClassName", "uncheckedThumbClassName", "disabled", "type", "onClick"]);
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const active = isControlled ? checked : internalChecked;
+    const currentLabel = active ? checkedLabel : uncheckedLabel;
+    const hasLabel = currentLabel !== undefined && currentLabel !== null && currentLabel !== false;
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        const nextChecked = !active;
+        if (!isControlled) {
+            setInternalChecked(nextChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
+    }
+    const trackSizeClass = size === 'compact' ? 'h-5 w-9' : 'h-6 w-11';
+    const thumbSizeClass = size === 'compact' ? 'size-4' : 'size-5';
+    const thumbTranslateClass = active
+        ? size === 'compact'
+            ? 'translate-x-4'
+            : 'translate-x-5'
+        : 'translate-x-0.5';
+    const labelNode = hasLabel ? (jsx("span", { className: cn('min-w-0', labelClassName), children: currentLabel })) : null;
+    const defaultCheckedClassName = cn('border-transparent text-white shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass);
+    const defaultUncheckedClassName = cn('border-slate-200 bg-white/90 text-slate-700 shadow-sm hover:border-current hover:bg-slate-50', 'dark:border-white/20 dark:bg-slate-900/90 dark:text-slate-200 dark:shadow-white/5 dark:hover:bg-slate-800', themeIconColor);
+    const trackNode = (jsx("span", { "aria-hidden": "true", className: cn('relative inline-flex shrink-0 items-center rounded-full transition-colors', trackSizeClass, active ? 'bg-white/25' : 'bg-slate-300 dark:bg-slate-700', trackClassName, active ? checkedTrackClassName : uncheckedTrackClassName), children: jsx("span", { className: cn('inline-block rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100', thumbSizeClass, thumbTranslateClass, thumbClassName, active ? checkedThumbClassName : uncheckedThumbClassName) }) }));
+    return (jsx("button", Object.assign({ type: type, role: "switch", "aria-checked": active, disabled: disabled, onClick: handleClick, className: cn('inline-flex items-center gap-2 rounded-full font-semibold transition-all duration-200', active ? defaultCheckedClassName : defaultUncheckedClassName, className, active
+            ? checkedClassName
+            : uncheckedClassName, disabled && 'cursor-not-allowed opacity-60') }, props, { children: labelPosition === 'left' ? (jsxs(Fragment, { children: [labelNode, trackNode] })) : (jsxs(Fragment, { children: [trackNode, labelNode] })) })));
+}
+
+export { XSwitchButton };

package/dist/main/footer.js

@@ -23,7 +23,7 @@ function Footer(_a) {
             clickToCopyText: tIntl.safeT(tFooter, 'clickToCopy', 'Click to copy'),
             copiedText: tIntl.safeT(tFooter, 'copied', 'Copied!'),
         };
-        return (jsxRuntime.jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsxRuntime.jsx("div", { className: utils.cn("w-full border-current border-t", lib.themeIconColor) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxRuntime.jsxs(Link, { href: utils.getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(icons.ReceiptTextIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.terms })] }), jsxRuntime.jsxs(Link, { href: utils.getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.privacy })] }), jsxRuntime.jsxs(footerEmail.FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsxRuntime.jsx(icons.MailIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.contactUs })] })] }), jsxRuntime.jsx("div", { className: "text-xs sm:text-sm text-center", children: jsxRuntime.jsx("span", { children: data.copyright }) })] }) })] }));
+        return (jsxRuntime.jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsxRuntime.jsx("div", { className: utils.cn("w-full border-current border-t", lib.themeIconColor) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxRuntime.jsxs(Link, { prefetch: false, href: utils.getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(icons.ReceiptTextIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.terms })] }), jsxRuntime.jsxs(Link, { prefetch: false, href: utils.getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.privacy })] }), jsxRuntime.jsxs(footerEmail.FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsxRuntime.jsx(icons.MailIcon, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.contactUs })] })] }), jsxRuntime.jsx("div", { className: "text-xs sm:text-sm text-center", children: jsxRuntime.jsx("span", { children: data.copyright }) })] }) })] }));
     });
 }
 

package/dist/main/footer.mjs

@@ -21,7 +21,7 @@ function Footer(_a) {
             clickToCopyText: safeT(tFooter, 'clickToCopy', 'Click to copy'),
             copiedText: safeT(tFooter, 'copied', 'Copied!'),
         };
-        return (jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsx("div", { className: cn("w-full border-current border-t", themeIconColor) }), jsx("footer", { children: jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxs(Link, { href: getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(ReceiptTextIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.terms })] }), jsxs(Link, { href: getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(ShieldUserIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.privacy })] }), jsxs(FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsx(MailIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.contactUs })] })] }), jsx("div", { className: "text-xs sm:text-sm text-center", children: jsx("span", { children: data.copyright }) })] }) })] }));
+        return (jsxs("div", { className: "mb-10 w-full mx-auto", children: [jsx("div", { className: cn("w-full border-current border-t", themeIconColor) }), jsx("footer", { children: jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxs(Link, { prefetch: false, href: getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(ReceiptTextIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.terms })] }), jsxs(Link, { prefetch: false, href: getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale), className: "flex items-center space-x-1 hover:underline", children: [jsx(ShieldUserIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.privacy })] }), jsxs(FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsx(MailIcon, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.contactUs })] })] }), jsx("div", { className: "text-xs sm:text-sm text-center", children: jsx("span", { children: data.copyright }) })] }) })] }));
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "29.0.2",
+  "version": "29.0.4",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -227,9 +227,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^29.0.0",
-    "@windrun-huaiin/lib": "^29.0.0",
-    "@windrun-huaiin/contracts": "^29.0.0"
+    "@windrun-huaiin/base-ui": "^29.0.1",
+    "@windrun-huaiin/contracts": "^29.0.0",
+    "@windrun-huaiin/lib": "^29.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/clerk/fingerprint/fingerprint-provider.tsx

@@ -20,6 +20,7 @@ import React, { createContext, useContext, useEffect, useMemo, useRef, useState
 import type { FingerprintContextType, FingerprintProviderProps } from './types';
 import { useFingerprint } from './use-fingerprint';
 import { CopyableText } from '@windrun-huaiin/base-ui/ui';
+import { XSwitchButton } from '../../main/buttons';
 import { createFingerprintHeaders } from './fingerprint-client';
 import {
   getOrCreateDebugFingerprintOverride,
@@ -436,35 +437,15 @@ export function FingerprintStatus() {
                   {translations.panel.title}
                 </div>
                 <div className="flex items-center gap-2">
-                  <button
+                  <XSwitchButton
                     type="button"
-                    onClick={() => setPanelMode((prev) => prev === 'info' ? 'test' : 'info')}
-                    className={cn(
-                      'inline-flex items-center gap-2 rounded-full border px-2 py-1 text-[11px] font-semibold shadow-sm transition-all duration-200',
-                      panelMode === 'test'
-                        ? cn('border-transparent text-white', themeButtonGradientClass, themeButtonGradientHoverClass)
-                        : themedGhostButtonClass
-                    )}
-                    aria-pressed={panelMode === 'test'}
-                  >
-                    <span>{translations.panel.testModeLabel}</span>
-                    <span
-                      className={cn(
-                        'relative inline-flex h-5 w-9 items-center rounded-full transition-colors',
-                        panelMode === 'test'
-                          ? 'bg-white/25'
-                          : 'bg-slate-300 dark:bg-slate-700'
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          'inline-block size-4 rounded-full shadow-sm transition-transform',
-                          panelMode === 'test' ? 'bg-white' : 'bg-white dark:bg-slate-100',
-                          panelMode === 'test' ? 'translate-x-4' : 'translate-x-0.5'
-                        )}
-                      />
-                    </span>
-                  </button>
+                    checked={panelMode === 'test'}
+                    onCheckedChange={(nextChecked) => setPanelMode(nextChecked ? 'test' : 'info')}
+                    checkedLabel={translations.panel.testModeLabel}
+                    uncheckedLabel={translations.panel.testModeLabel}
+                    size="compact"
+                    className="border px-2 py-1 text-[11px] shadow-sm"
+                  />
                   <button
                     type="button"
                     aria-label={translations.panel.closeAriaLabel}

package/src/fuma/base/custom-header.tsx

@@ -43,6 +43,10 @@ export type NavbarCSSVars = CSSProperties & {
   '--fd-nav-max-width'?: string;
 };
 
+const PrefetchLinkItem = LinkItem as (
+  props: ComponentProps<typeof LinkItem> & { prefetch?: boolean },
+) => ReactNode;
+
 export interface CustomHomeHeaderProps extends HomeLayoutProps {
   /**
    * Banner height in rem units
@@ -527,8 +531,9 @@ function NavbarLinkItem({
   return (
     <NavigationMenuItem>
       <NavigationMenuLink asChild>
-        <LinkItem
+        <PrefetchLinkItem
           item={item}
+          prefetch={item.prefetch ?? false}
           aria-label={item.type === 'icon' ? item.label : undefined}
           {...props}
           className={cn(
@@ -537,7 +542,7 @@ function NavbarLinkItem({
           )}
         >
           {item.type === 'icon' ? item.icon : item.text}
-        </LinkItem>
+        </PrefetchLinkItem>
       </NavigationMenuLink>
     </NavigationMenuItem>
   );
@@ -585,8 +590,9 @@ function MenuLinkItem({
 
   return (
     <NavigationMenuLink asChild>
-      <LinkItem
+      <PrefetchLinkItem
         item={item}
+        prefetch={item.prefetch ?? false}
         className={cn(
           {
             main: 'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',
@@ -605,7 +611,7 @@ function MenuLinkItem({
       >
         {item.icon}
         {item.type === 'icon' ? undefined : item.text}
-      </LinkItem>
+      </PrefetchLinkItem>
     </NavigationMenuLink>
   );
 }

package/src/main/alert-dialog/index.ts

@@ -4,4 +4,4 @@ export * from './ads-alert-dialog';
 export * from './confirm-dialog';
 export * from './high-priority-confirm-dialog';
 export * from './info-dialog';
-
+export * from './undoable-confirm-dialog';

package/src/main/alert-dialog/undoable-confirm-dialog.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import React from 'react';
+import { CircleAlertIcon, Trash2Icon, Undo2Icon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import {
+  closeButtonClass,
+  dangerButtonClass,
+  dialogContentClass,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogThemedOverlayClass,
+  dialogTitleClass,
+  secondaryButtonClass,
+} from './dialog-styles';
+
+export interface UndoableConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  pendingTitle?: React.ReactNode;
+  pendingDescription?: React.ReactNode;
+  cancelText?: string;
+  confirmText?: string;
+  undoText?: string;
+  countdownSeconds?: number;
+  onCancel?: () => void;
+  onConfirm: () => void | Promise<void>;
+  onUndo?: () => void;
+}
+
+export function UndoableConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  pendingTitle,
+  pendingDescription,
+  cancelText = 'Cancel',
+  confirmText = 'Delete',
+  undoText = 'Undo',
+  countdownSeconds = 5,
+  onCancel,
+  onConfirm,
+  onUndo,
+}: UndoableConfirmDialogProps) {
+  const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
+  const [pending, setPending] = React.useState(false);
+  const [remainingSeconds, setRemainingSeconds] = React.useState(safeCountdownSeconds);
+  const [confirming, setConfirming] = React.useState(false);
+  const timeoutRef = React.useRef<number | null>(null);
+  const intervalRef = React.useRef<number | null>(null);
+
+  const clearTimers = React.useCallback(() => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    if (intervalRef.current) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const resetState = React.useCallback(() => {
+    clearTimers();
+    setPending(false);
+    setConfirming(false);
+    setRemainingSeconds(safeCountdownSeconds);
+  }, [clearTimers, safeCountdownSeconds]);
+
+  React.useEffect(() => {
+    if (open) {
+      setRemainingSeconds(safeCountdownSeconds);
+      return;
+    }
+
+    resetState();
+  }, [open, resetState, safeCountdownSeconds]);
+
+  React.useEffect(() => clearTimers, [clearTimers]);
+
+  const executeConfirm = React.useCallback(async () => {
+    clearTimers();
+    setConfirming(true);
+
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } finally {
+      setConfirming(false);
+    }
+  }, [clearTimers, onConfirm, onOpenChange]);
+
+  const startCountdown = () => {
+    clearTimers();
+    setPending(true);
+    setRemainingSeconds(safeCountdownSeconds);
+
+    intervalRef.current = window.setInterval(() => {
+      setRemainingSeconds((current) => Math.max(0, current - 1));
+    }, 1000);
+
+    timeoutRef.current = window.setTimeout(() => {
+      void executeConfirm();
+    }, (safeCountdownSeconds + 1) * 1000);
+  };
+
+  const handleCancel = () => {
+    resetState();
+    onOpenChange(false);
+    onCancel?.();
+  };
+
+  const handleUndo = () => {
+    resetState();
+    onOpenChange(false);
+    onUndo?.();
+  };
+
+  const displayTitle = pending ? pendingTitle ?? title : title;
+  const displayDescription = pending ? pendingDescription ?? description : description;
+  return (
+    <AlertDialog open={open} onOpenChange={(nextOpen) => {
+      if (!nextOpen) {
+        handleCancel();
+        return;
+      }
+
+      onOpenChange(nextOpen);
+    }}>
+      <AlertDialogContent
+        className={cn(dialogContentClass, 'border-red-300 dark:border-red-700')}
+        overlayClassName={dialogThemedOverlayClass}
+        onOverlayClick={pending ? undefined : handleCancel}
+      >
+        <div className={dialogHeaderClass}>
+          <AlertDialogTitle asChild>
+            <div className={dialogTitleClass}>
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900">
+                {pending ? <Trash2Icon className="size-5" /> : <CircleAlertIcon className="size-5" />}
+              </span>
+              <span className="min-w-0 truncate">{displayTitle}</span>
+            </div>
+          </AlertDialogTitle>
+          <button
+            type="button"
+            className={closeButtonClass}
+            onClick={pending ? handleUndo : handleCancel}
+            aria-label="Close"
+            disabled={confirming}
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+
+        <AlertDialogDescription className={cn(dialogDescriptionClass, 'min-h-[44px]')}>
+          <span>{displayDescription}</span>
+        </AlertDialogDescription>
+
+        <div className="flex h-12 items-center justify-center py-1">
+          <div className="flex items-baseline justify-center gap-2">
+            <span className={cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', themeIconColor)}>
+              {pending ? remainingSeconds : safeCountdownSeconds}
+            </span>
+            <span className={cn('text-sm font-bold', themeIconColor)}>
+              s
+            </span>
+          </div>
+        </div>
+
+        <div className={cn(dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center')}>
+          {pending ? (
+            <button
+              type="button"
+              onClick={handleUndo}
+              className={secondaryButtonClass}
+              disabled={confirming}
+            >
+              <Undo2Icon className="mr-1.5 size-4" />
+              {undoText}
+            </button>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={handleCancel}
+                className={secondaryButtonClass}
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={startCountdown}
+                className={dangerButtonClass}
+              >
+                {confirmText}
+              </button>
+            </>
+          )}
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/main/buttons/index.ts

@@ -2,4 +2,5 @@
 
 export * from './gradient-button';
 export * from './x-button';
+export * from './x-switch-button';
 export * from './x-toggle-button';

package/src/main/buttons/x-switch-button.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+import {
+  themeButtonGradientClass,
+  themeButtonGradientHoverClass,
+  themeIconColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+export type XSwitchButtonSize = 'default' | 'compact';
+
+export type XSwitchButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onChange' | 'value' | 'defaultValue' | 'children'
+> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  checkedLabel?: React.ReactNode;
+  uncheckedLabel?: React.ReactNode;
+  labelPosition?: 'left' | 'right';
+  size?: XSwitchButtonSize;
+  className?: string;
+  labelClassName?: string;
+  trackClassName?: string;
+  thumbClassName?: string;
+  checkedClassName?: string;
+  uncheckedClassName?: string;
+  checkedTrackClassName?: string;
+  uncheckedTrackClassName?: string;
+  checkedThumbClassName?: string;
+  uncheckedThumbClassName?: string;
+};
+
+export function XSwitchButton({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  checkedLabel,
+  uncheckedLabel,
+  labelPosition = 'left',
+  size = 'default',
+  className,
+  labelClassName,
+  trackClassName,
+  thumbClassName,
+  checkedClassName,
+  uncheckedClassName,
+  checkedTrackClassName,
+  uncheckedTrackClassName,
+  checkedThumbClassName,
+  uncheckedThumbClassName,
+  disabled,
+  type = 'button',
+  onClick,
+  ...props
+}: XSwitchButtonProps) {
+  const isControlled = checked !== undefined;
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+  const active = isControlled ? checked : internalChecked;
+  const currentLabel = active ? checkedLabel : uncheckedLabel;
+  const hasLabel = currentLabel !== undefined && currentLabel !== null && currentLabel !== false;
+
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    const nextChecked = !active;
+
+    if (!isControlled) {
+      setInternalChecked(nextChecked);
+    }
+
+    onCheckedChange?.(nextChecked);
+  }
+
+  const trackSizeClass = size === 'compact' ? 'h-5 w-9' : 'h-6 w-11';
+  const thumbSizeClass = size === 'compact' ? 'size-4' : 'size-5';
+  const thumbTranslateClass = active
+    ? size === 'compact'
+      ? 'translate-x-4'
+      : 'translate-x-5'
+    : 'translate-x-0.5';
+
+  const labelNode = hasLabel ? (
+    <span className={cn('min-w-0', labelClassName)}>
+      {currentLabel}
+    </span>
+  ) : null;
+
+  const defaultCheckedClassName = cn(
+    'border-transparent text-white shadow-sm',
+    themeButtonGradientClass,
+    themeButtonGradientHoverClass
+  );
+  const defaultUncheckedClassName = cn(
+    'border-slate-200 bg-white/90 text-slate-700 shadow-sm hover:border-current hover:bg-slate-50',
+    'dark:border-white/20 dark:bg-slate-900/90 dark:text-slate-200 dark:shadow-white/5 dark:hover:bg-slate-800',
+    themeIconColor
+  );
+
+  const trackNode = (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'relative inline-flex shrink-0 items-center rounded-full transition-colors',
+        trackSizeClass,
+        active ? 'bg-white/25' : 'bg-slate-300 dark:bg-slate-700',
+        trackClassName,
+        active ? checkedTrackClassName : uncheckedTrackClassName
+      )}
+    >
+      <span
+        className={cn(
+          'inline-block rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100',
+          thumbSizeClass,
+          thumbTranslateClass,
+          thumbClassName,
+          active ? checkedThumbClassName : uncheckedThumbClassName
+        )}
+      />
+    </span>
+  );
+
+  return (
+    <button
+      type={type}
+      role="switch"
+      aria-checked={active}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full font-semibold transition-all duration-200',
+        active ? defaultCheckedClassName : defaultUncheckedClassName,
+        className,
+        active
+          ? checkedClassName
+          : uncheckedClassName,
+        disabled && 'cursor-not-allowed opacity-60'
+      )}
+      {...props}
+    >
+      {labelPosition === 'left' ? (
+        <>
+          {labelNode}
+          {trackNode}
+        </>
+      ) : (
+        <>
+          {trackNode}
+          {labelNode}
+        </>
+      )}
+    </button>
+  );
+}

package/src/main/footer.tsx

@@ -45,11 +45,11 @@ export async function Footer({ locale, localePrefixAsNeeded = true, defaultLocal
       <footer>
         <div className="w-full flex flex-col items-center justify-center px-4 py-8 space-y-3">
           <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6">
-            <Link href={getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale)} className="flex items-center space-x-1 hover:underline">
+            <Link prefetch={false} href={getAsNeededLocalizedUrl(locale, "/legal/terms", localePrefixAsNeeded, defaultLocale)} className="flex items-center space-x-1 hover:underline">
               <ReceiptTextIcon className="h-3.5 w-3.5"/>
               <span>{data.terms}</span>
             </Link>
-            <Link href={getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale)} className="flex items-center space-x-1 hover:underline">
+            <Link prefetch={false} href={getAsNeededLocalizedUrl(locale, "/legal/privacy", localePrefixAsNeeded, defaultLocale)} className="flex items-center space-x-1 hover:underline">
               <ShieldUserIcon className="h-3.5 w-3.5"/>
               <span>{data.privacy}</span>
             </Link>