akanjs 2.4.2-rc.2 → 3.0.0-alpha.0

package/ui/Input.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import { isEmail } from "akanjs/common";
 import React, {
   type ChangeEvent,
@@ -13,8 +13,12 @@ import React, {
 } from "react";
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 
+import { inputRecipe } from "./recipe";
 import { createOverridable } from "./UiOverride";
 
+const inputBase = inputRecipe();
+const textareaBase = inputRecipe({ kind: "area" });
+
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
   /** Visual input style. */
   inputStyleType?: "bordered" | "borderless" | "underline";
@@ -72,19 +76,21 @@ const DefaultInput = ({
   const statusClass =
     inputStyleType === "bordered"
       ? status === "error"
-        ? "input-error"
+        ? "border-destructive"
         : !firstFocus && status === "warning"
-          ? "input-warning"
+          ? "border-warning"
           : status === "success"
-            ? "input-success"
+            ? "border-success"
             : ""
       : "";
-  const inputType =
-    inputStyleType === "bordered"
-      ? "input"
-      : inputStyleType === "borderless"
-        ? "input-ghost"
-        : "border-0  border-b rounded-none";
+  const inputType = cn(
+    inputBase,
+    inputStyleType === "borderless"
+      ? "border-transparent bg-transparent"
+      : inputStyleType === "underline"
+        ? "rounded-none border-0 border-b"
+        : "",
+  );
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
     if (e.key === "Escape") {
@@ -100,8 +106,8 @@ const DefaultInput = ({
   }, [value]);
 
   return (
-    <div className={clsx("relative isolate flex items-center", className)}>
-      {icon ? <div className={clsx("flex items-center justify-center", iconClassName)}>{icon}</div> : null}
+    <div className={cn("relative isolate flex items-center", className)}>
+      {icon ? <div className={cn("flex items-center justify-center", iconClassName)}>{icon}</div> : null}
       <input
         {...rest}
         ref={inputRef}
@@ -116,15 +122,15 @@ const DefaultInput = ({
           if (firstFocus && value) setFirstFocus(false);
         }}
         onKeyDown={handleKeyDown}
-        className={clsx(
-          `b-5 text-base-content outline-hidden duration-300 focus:border-primary focus:outline-hidden ${icon && ""}`,
+        className={cn(
+          `b-5 text-foreground outline-hidden duration-300 focus:border-primary focus:outline-hidden ${icon && ""}`,
           inputType,
           inputClassName,
         )}
       />
       <div
         data-validate={!!validateResult}
-        className="absolute -bottom-4 whitespace-nowrap text-error text-xs duration-300"
+        className="absolute -bottom-4 whitespace-nowrap text-destructive text-xs duration-300"
       >
         {invalidMessage}
       </div>
@@ -174,11 +180,11 @@ const DefaultTextArea = ({
         : validateResult;
   const statusClass =
     status === "error"
-      ? "textarea-error"
+      ? "border-destructive"
       : !firstFocus && status === "warning"
-        ? "textarea-warning"
+        ? "border-warning"
         : status === "success"
-          ? "textarea-success"
+          ? "border-success"
           : "";
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
@@ -193,7 +199,7 @@ const DefaultTextArea = ({
   }, []);
 
   return (
-    <div className={clsx("relative mb-5", className)}>
+    <div className={cn("relative mb-5", className)}>
       <textarea
         {...rest}
         ref={inputRef}
@@ -208,14 +214,17 @@ const DefaultTextArea = ({
         onBlur={(e) => {
           if (firstFocus && value) setFirstFocus(false);
         }}
-        className={clsx(
-          `textarea textarea-bordered resize-none text-base-content outline-hidden duration-300 focus:border-primary focus:outline-hidden`,
+        className={cn(
+          cn(
+            textareaBase,
+            "resize-none text-foreground outline-hidden duration-300 focus:border-primary focus:outline-hidden",
+          ),
           statusClass,
           inputClassName,
         )}
       />
       {invalidMessage ? (
-        <div className="absolute -bottom-4 animate-fadeIn text-error text-xs">{invalidMessage}</div>
+        <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{invalidMessage}</div>
       ) : null}
     </div>
   );
@@ -264,11 +273,11 @@ const DefaultPassword = ({
         : validateResult;
   const statusClass =
     status === "error"
-      ? "input-error"
+      ? "border-destructive"
       : !firstFocus && status === "warning"
-        ? "input-warning"
+        ? "border-warning"
         : status === "success"
-          ? "input-success"
+          ? "border-success"
           : "";
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
@@ -283,10 +292,10 @@ const DefaultPassword = ({
     }
   }, []);
   return (
-    <div className={clsx("relative isolate pb-2", className)}>
-      <div className={clsx("relative flex items-center justify-between", inputWrapperClassName)}>
+    <div className={cn("relative isolate pb-2", className)}>
+      <div className={cn("relative flex items-center justify-between", inputWrapperClassName)}>
         {icon ? (
-          <div className={clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
+          <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
             {icon}
           </div>
         ) : null}
@@ -305,8 +314,8 @@ const DefaultPassword = ({
             }
             onChange?.(e.target.value, e);
           }}
-          className={clsx(
-            `input text-base-content duration-300 focus:border-primary focus:outline-hidden ${icon && "pl-12"}`,
+          className={cn(
+            cn(inputBase, `text-foreground duration-300 focus:border-primary focus:outline-hidden ${icon && "pl-12"}`),
             statusClass,
             inputClassName,
           )}
@@ -323,7 +332,7 @@ const DefaultPassword = ({
       </div>
       <div
         data-validate={!!invalidMessage.length}
-        className="h-2 text-error text-xs duration-300 data-[validate=false]:opacity-0 data-[validate=true]:opacity-100"
+        className="h-2 text-destructive text-xs duration-300 data-[validate=false]:opacity-0 data-[validate=true]:opacity-100"
       >
         {invalidMessage}
       </div>
@@ -376,18 +385,13 @@ const DefaultEmail = ({
         : validateResult;
   const statusClass =
     status === "error"
-      ? "input-error"
+      ? "border-destructive"
       : !firstFocus && status === "warning"
-        ? "input-warning"
+        ? "border-warning"
         : status === "success"
-          ? "input-success"
+          ? "border-success"
           : "";
-  const inputType =
-    inputStyleType === "bordered"
-      ? "input-bordered"
-      : inputStyleType === "borderless"
-        ? "input"
-        : "input-bordered rounded-none";
+  const inputType = cn(inputBase, inputStyleType === "underline" ? "rounded-none" : "");
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (onPressEnter && e.key === "Enter") onPressEnter(e.currentTarget.value, e);
     if (e.key === "Escape") {
@@ -405,10 +409,10 @@ const DefaultEmail = ({
   }, []);
 
   return (
-    <div className={clsx("relative isolate mb-5", className)}>
-      <div className={clsx("flex items-center", inputWrapperClassName)}>
+    <div className={cn("relative isolate mb-5", className)}>
+      <div className={cn("flex items-center", inputWrapperClassName)}>
         {icon ? (
-          <div className={clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
+          <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
             {icon}
           </div>
         ) : null}
@@ -427,10 +431,8 @@ const DefaultEmail = ({
             }
             onChange?.(e.target.value, e);
           }}
-          className={clsx(
-            `input text-base-content outline-hidden duration-300 focus:border-primary focus:outline-hidden ${
-              icon && "pl-12"
-            }`,
+          className={cn(
+            `text-foreground outline-hidden duration-300 focus:border-primary focus:outline-hidden ${icon && "pl-12"}`,
             inputType,
             statusClass,
             inputClassName,
@@ -438,7 +440,7 @@ const DefaultEmail = ({
         />
       </div>
       {invalidMessage ? (
-        <div className="absolute -bottom-4 animate-fadeIn text-error text-xs">{invalidMessage}</div>
+        <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{invalidMessage}</div>
       ) : null}
     </div>
   );
@@ -506,13 +508,13 @@ const DefaultNumber = ({
   const statusClass =
     validate !== undefined
       ? status === "error"
-        ? "input-error"
+        ? "border-destructive"
         : !firstFocus && status === "warning"
-          ? "input-warning"
+          ? "border-warning"
           : status === "success"
-            ? "input-success"
-            : "input"
-      : "input";
+            ? "border-success"
+            : ""
+      : "";
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const numberValue = parseFloat(e.currentTarget.value.replace(/[^\d-]/g, ""));
@@ -573,10 +575,10 @@ const DefaultNumber = ({
   }, [value]);
 
   return (
-    <div className={clsx("relative isolate", className)}>
-      <div className={clsx("flex items-center", inputWrapperClassName)}>
+    <div className={cn("relative isolate", className)}>
+      <div className={cn("flex items-center", inputWrapperClassName)}>
         {icon ? (
-          <div className={clsx("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
+          <div className={cn("absolute inset-y-0 left-4 z-10 flex items-center justify-center", iconClassName)}>
             {icon}
           </div>
         ) : null}
@@ -594,8 +596,8 @@ const DefaultNumber = ({
             onChange(parser ? parseFloat(parsedValue) : parseFloat(e.target.value), e);
             if (cacheKey) sessionStorage.setItem(cacheKey, parsedValue);
           }}
-          className={clsx(
-            `input text-base-content duration-300 focus:border-primary focus:outline-hidden ${icon && "pl-12"}`,
+          className={cn(
+            cn(inputBase, `text-foreground duration-300 focus:border-primary focus:outline-hidden ${icon && "pl-12"}`),
             statusClass,
             inputClassName,
           )}
@@ -603,7 +605,7 @@ const DefaultNumber = ({
       </div>
 
       {invalidMessage ? (
-        <div className="absolute -bottom-4 animate-fadeIn text-error text-xs">{invalidMessage}</div>
+        <div className="absolute -bottom-4 animate-fadeIn text-destructive text-xs">{invalidMessage}</div>
       ) : null}
     </div>
   );
@@ -621,7 +623,7 @@ const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProp
       {...rest}
       type="checkbox"
       checked={checked}
-      className={clsx("checkbox", className)}
+      className={cn("checkbox", className)}
       onChange={(e) => {
         onChange(e.target.checked, e);
       }}

package/ui/Layout/BottomInset.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { getEnv } from "akanjs/base";
-import { clsx, DEFAULT_BOTTOM_INSET, debugFrame, type FrameSlotRegistration, usePathCtx } from "akanjs/client";
+import { cn, DEFAULT_BOTTOM_INSET, debugFrame, type FrameSlotRegistration, usePathCtx } from "akanjs/client";
 import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
 
 import { Portal } from "../Portal";
@@ -102,7 +102,7 @@ export const BottomInset = ({
         ref={contentRef}
         data-akan-frame-slot="bottomInset"
         data-akan-frame-role={frameRole}
-        className={clsx("pointer-events-auto w-full", className)}
+        className={cn("pointer-events-auto w-full", className)}
       >
         {children}
       </div>

package/ui/Layout/BottomTab.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import { useEffect, useState } from "react";
 
 import { Link } from "../Link";
@@ -47,8 +47,8 @@ export const BottomTab = ({ className, tabs, height = 64 }: BottomTabProps) => {
       frameSource="bottomTab"
     >
       <div
-        className={clsx(
-          `flex size-full items-center justify-around rounded-t-xl border border-base-200 border-b-0 bg-base-100`,
+        className={cn(
+          `flex size-full items-center justify-around rounded-t-xl border border-muted border-b-0 bg-background text-foreground`,
           className,
         )}
       >
@@ -61,10 +61,10 @@ export const BottomTab = ({ className, tabs, height = 64 }: BottomTabProps) => {
               isActiveTab(tab.href) ? "" : "opacity-60"
             }`}
           >
-            <div className="indicator">
+            <div className="relative inline-flex w-max">
               {isActiveTab(tab.href) ? (tab.activeIcon ?? tab.icon) : tab.icon}
               {tab.notiCount && tab.notiCount > 0 ? (
-                <div className="indicator-item flex size-2 items-center justify-center rounded-full bg-secondary text-[10px] text-base-100"></div>
+                <div className="absolute top-0 right-0 z-[1] flex size-2 translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-secondary text-[10px] text-background"></div>
               ) : null}
             </div>
             <span>{tab.name}</span>

package/ui/Layout/Header.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 
 export interface HeaderProps {
@@ -25,10 +25,10 @@ export const Header = ({ className, type, children, height = 40 }: HeaderProps)
   }, []);
   return (
     <div
-      className={clsx(
+      className={cn(
         `fixed top-0 z-[9] flex duration-300 ${
           !visible ? "md:-translate-y-full" : ""
-        } w-full bg-base-100 shadow-sm backdrop-blur-lg`,
+        } w-full bg-background shadow-sm backdrop-blur-lg`,
         className,
       )}
     >

package/ui/Layout/LeftSider.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 import { BiX } from "react-icons/bi";
+import { buttonRecipe } from "../Button";
 
 export interface LeftSiderProps {
   className?: string;
@@ -13,16 +14,16 @@ export interface LeftSiderProps {
 export const LeftSider = ({ className, children, open, width, onCancel }: LeftSiderProps) => {
   return (
     <div
-      className={clsx(
-        "absolute top-0 border-base-200 border-r bg-base-100 transition-all duration-150",
-        { "translate-x-0": open, "translate-x-[-100%]": !open },
+      className={cn(
+        "absolute top-0 border-muted border-r bg-background transition-all duration-150",
+        open ? "translate-x-0" : "translate-x-[-100%]",
         className,
       )}
       style={{ width }}
     >
       {children}
       <button
-        className="btn btn-ghost btn-square absolute top-0 right-0"
+        className={buttonRecipe({ variant: "ghost", size: "icon" }, "absolute top-0 right-0")}
         onClick={() => {
           onCancel();
         }}

package/ui/Layout/Navbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { getEnv } from "akanjs/base";
-import { clsx, DEFAULT_TOP_INSET, debugFrame, type TransitionType, usePathCtx } from "akanjs/client";
+import { cn, DEFAULT_TOP_INSET, debugFrame, type TransitionType, usePathCtx } from "akanjs/client";
 import { type ReactNode, useLayoutEffect } from "react";
 import { BiChevronLeft, BiX } from "react-icons/bi";
 
@@ -44,17 +44,7 @@ export const Navbar = ({ back = false, className, height, children, title, left,
   return (
     <>
       <Portal id={`topInsetContent${suffix}`}>
-        <div
-          className={clsx(
-            "flex size-full items-center px-5",
-            {
-              "pl-14": back,
-            },
-            className,
-          )}
-        >
-          {children}
-        </div>
+        <div className={cn("flex size-full items-center px-5", back && "pl-14", className)}>{children}</div>
       </Portal>
       {back ? (
         <Portal id={`topLeftActionContent${suffix}`}>

package/ui/Layout/RightSider.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 import { AiOutlineClose } from "react-icons/ai";
 
@@ -14,9 +14,10 @@ export interface RightSiderProps {
 export const RightSider = ({ className, children, open, title, width, onCancel }: RightSiderProps) => {
   return (
     <div
-      className={clsx(
-        "group absolute top-0 right-0 overflow-y-auto border-base-200 border-l bg-base-100 pt-14 transition-all duration-150",
-        { "translate-x-0": open, "translate-x-[100%]": !open },
+      className={cn(
+        "group absolute top-0 right-0 overflow-y-auto border-muted border-l bg-background pt-14 transition-all duration-150",
+        open && "translate-x-0",
+        !open && "translate-x-[100%]",
         className,
       )}
       style={{ width }}
@@ -24,10 +25,11 @@ export const RightSider = ({ className, children, open, title, width, onCancel }
       {children}
       <div className="absolute top-2 left-4 flex items-center gap-4 pt-2 text-xl">
         <div
-          className={clsx("cursor-pointer border-base-200 bg-base-100 transition-all duration-150", {
-            "opacity-100": open,
-            "opacity-0": !open,
-          })}
+          className={cn(
+            "cursor-pointer border-muted bg-background transition-all duration-150",
+            open && "opacity-100",
+            !open && "opacity-0",
+          )}
           onClick={() => {
             onCancel();
           }}

package/ui/Layout/Sider.tsx

@@ -1,11 +1,12 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { st } from "akanjs/store";
 import { animated } from "akanjs/ui";
 import { type ReactNode, useEffect, useState } from "react";
 import { AiOutlineMenu } from "react-icons/ai";
 import { BiX } from "react-icons/bi";
 import { useSpring } from "react-spring";
+import { buttonRecipe } from "../Button";
 
 export interface SiderProps {
   className?: string;
@@ -32,7 +33,7 @@ export const Sider = ({ className, bgClassName, children }: SiderProps) => {
   return (
     <>
       <button
-        className="btn btn-ghost"
+        className={buttonRecipe({ variant: "ghost" })}
         onClick={() => {
           setIsOpen(true);
         }}
@@ -43,7 +44,7 @@ export const Sider = ({ className, bgClassName, children }: SiderProps) => {
       {isOpen ? (
         <animated.div
           style={overlayAnimation}
-          className={clsx("fixed inset-0 z-40 h-screen w-screen", bgClassName)}
+          className={cn("fixed inset-0 z-40 h-screen w-screen", bgClassName)}
           onClick={() => {
             setIsOpen(false);
           }}
@@ -52,7 +53,7 @@ export const Sider = ({ className, bgClassName, children }: SiderProps) => {
 
       <animated.div
         style={siderAnimation}
-        className={clsx("fixed top-0 left-0 z-50 h-full w-3/4 bg-base-200 p-4 text-base-content md:w-80", className)}
+        className={cn("fixed top-0 left-0 z-50 h-full w-3/4 bg-muted p-4 text-foreground md:w-80", className)}
       >
         <button
           className="absolute top-4 left-4 text-lg"

package/ui/Layout/Template.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 
 export interface TemplateProps {
   /** Additional classes merged with the default vertical form/template spacing. */
@@ -7,5 +7,5 @@ export interface TemplateProps {
   children?: React.ReactNode;
 }
 export const Template = ({ className, children }: TemplateProps) => {
-  return <div className={clsx("flex w-full flex-col gap-6 p-2", className)}>{children}</div>;
+  return <div className={cn("flex w-full flex-col gap-6 p-2", className)}>{children}</div>;
 };

package/ui/Layout/TopInset.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { getEnv } from "akanjs/base";
-import { clsx, DEFAULT_TOP_INSET, debugFrame, usePathCtx } from "akanjs/client";
+import { cn, DEFAULT_TOP_INSET, debugFrame, usePathCtx } from "akanjs/client";
 import { type ReactNode, useLayoutEffect } from "react";
 
 import { Portal } from "../Portal";
@@ -34,7 +34,7 @@ export const TopInset = ({ className, children, estimatedHeight = DEFAULT_TOP_IN
 
   return (
     <Portal id={`topInsetContent${suffix}`}>
-      <div data-akan-frame-slot="topInset" data-akan-frame-role="topChrome" className={clsx("size-full", className)}>
+      <div data-akan-frame-slot="topInset" data-akan-frame-role="topChrome" className={cn("size-full", className)}>
         {children}
       </div>
     </Portal>

package/ui/Layout/Unit.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 
 import { Link } from "../Link";
 
@@ -13,7 +13,7 @@ export interface UnitProps {
 export const Unit = ({ className, children, href }: UnitProps) => {
   return (
     <Link href={href}>
-      <div className={clsx("flex w-full flex-col gap-2 p-4", { "cursor-pointer": !!href }, className)}>{children}</div>
+      <div className={cn("flex w-full flex-col gap-2 p-4", !!href && "cursor-pointer", className)}>{children}</div>
     </Link>
   );
 };

package/ui/Layout/View.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 
 export interface ViewProps {
@@ -8,5 +8,5 @@ export interface ViewProps {
   children: ReactNode;
 }
 export const View = ({ className, children }: ViewProps) => {
-  return <div className={clsx("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
+  return <div className={cn("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
 };

package/ui/Layout/Zone.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 
 export interface ZoneProps {
@@ -6,5 +6,5 @@ export interface ZoneProps {
   children: ReactNode;
 }
 export const Zone = ({ className, children }: ZoneProps) => {
-  return <div className={clsx("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
+  return <div className={cn("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
 };

package/ui/Link/Back.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, router } from "akanjs/client";
+import { cn, router } from "akanjs/client";
 import type { ReactNode } from "react";
 
 interface BackProps {
@@ -8,7 +8,7 @@ interface BackProps {
 }
 export default function Back({ className, children }: BackProps) {
   return (
-    <div className={clsx("cursor-pointer", className)} onClick={() => router.back()}>
+    <div className={cn("cursor-pointer", className)} onClick={() => router.back()}>
       {children}
     </div>
   );

package/ui/Link/Close.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 
 interface CloseProps {
@@ -9,7 +9,7 @@ interface CloseProps {
 export default function Close({ className, children }: CloseProps) {
   return (
     <div
-      className={clsx("cursor-pointer", className)}
+      className={cn("cursor-pointer", className)}
       onClick={() => {
         window.close();
       }}

package/ui/Link/CsrLink.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { clsx, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
+import { cn, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
 import { loadCapacitorBrowser } from "akanjs/client/capacitor";
 import { st } from "akanjs/store";
 
@@ -23,9 +23,11 @@ export default function CsrLink({
   const { path, hash } = getPathInfo(href, lang, prefix ?? "");
   return (
     <a
-      className={clsx("cursor-pointer", className, {
-        [activeClassName ?? ""]: activeExact ? currentPath === path : currentPath.startsWith(path),
-      })}
+      className={cn(
+        "cursor-pointer",
+        className,
+        (activeExact ? currentPath === path : currentPath.startsWith(path)) && (activeClassName ?? ""),
+      )}
       onClick={() => {
         const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
         const isHash = href.startsWith("#");

package/ui/Link/Lang.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, router } from "akanjs/client";
+import { cn, router } from "akanjs/client";
 import type { ReactNode } from "react";
 
 interface LangProps {
@@ -9,7 +9,7 @@ interface LangProps {
 }
 export default function Lang({ className, lang, children }: LangProps) {
   return (
-    <div className={clsx("cursor-pointer", className)} onClick={() => router.setLang(lang)}>
+    <div className={cn("cursor-pointer", className)} onClick={() => router.setLang(lang)}>
       {children}
     </div>
   );