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

package/ui/Link/SsrLink.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { getEnv } from "akanjs/base";
-import { clsx, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
+import { cn, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
 import { Logger } from "akanjs/common";
 import type { SsrLinkProps } from "./types";
 
@@ -28,16 +28,17 @@ export default function SsrLink({
   const path = internalPathInfo.path;
   if (href.startsWith("#")) {
     return (
-      <a className={clsx(className, { [activeClassName ?? ""]: currentPath === path })} href={href}>
+      <a className={cn(className, currentPath === path && (activeClassName ?? ""))} href={href}>
         {children}
       </a>
     );
   }
   return (
     <a
-      className={clsx(className, {
-        [activeClassName ?? ""]: activeExact ? currentPath === path : currentPath.startsWith(path),
-      })}
+      className={cn(
+        className,
+        (activeExact ? currentPath === path : currentPath.startsWith(path)) && (activeClassName ?? ""),
+      )}
       href={isExternal ? href : href.startsWith("#") ? href : requestHref}
 
       {...props}

package/ui/Load/Page.tsx

@@ -31,7 +31,7 @@ const Page: <Return>(props: PageProps<Return>) => ReactNode =
               else {
                 
                 console.error(error);
-                resolve(<div className="text-red-500">{message}</div>);
+                resolve(<div className="text-destructive">{message}</div>);
               }
             });
         });

package/ui/Load/Pagination.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { capitalize, lowerlize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import type { ClientInit, ServerInit } from "akanjs/fetch";
@@ -64,7 +64,7 @@ function Render<RefName extends string, Light>({ className, init, scrollToTop }:
   if (!loaded.current) loaded.current = true;
 
   return (
-    <div className={clsx("mt-4 flex flex-wrap justify-center", className)}>
+    <div className={cn("mt-4 flex flex-wrap justify-center", className)}>
       {insight.count > limit && (
         <Pagn
           currentPage={page}

package/ui/Load/Units.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { DataList } from "akanjs/base";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { capitalize, isQueryEqual, lowerlize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import { ConstantRegistry } from "akanjs/constant";
@@ -28,6 +28,8 @@ interface DefaultProps<L extends { id: string }> {
   renderList?: (list: DataList<L>) => ReactNode;
   reverse?: boolean;
   pagination?: boolean;
+  /** Max age in ms of the cached slice data before the client refetches on mount; `0` always refetches. */
+  staleTime?: number;
 }
 
 interface UnitsProps<RefName extends string, Light extends { id: string }> extends DefaultProps<Light> {
@@ -60,6 +62,7 @@ function Render<RefName extends string, Light extends { id: string }>({
   sort = (a, b) => 1,
   reverse,
   pagination,
+  staleTime,
 }: RenderProps<RefName, Light>) {
   const loaded = useRef(false);
   const storeUse = st.use as { [key: string]: () => unknown };
@@ -75,6 +78,7 @@ function Render<RefName extends string, Light extends { id: string }>({
     modelInsight: `${modelName}Insight`,
     modelInitList: `${modelName}InitList`,
     modelInitAt: `${modelName}InitAt`,
+    modelStaleAt: `${modelName}StaleAt`,
     modelObjList: `${modelName}ObjList`,
     modelObjInsight: `${modelName}ObjInsight`,
     pageOfModel: `pageOf${ModelName}`,
@@ -84,12 +88,14 @@ function Render<RefName extends string, Light extends { id: string }>({
     sortOfModel: `sortOf${ModelName}`,
     setPageOfModel: `setPageOf${ModelName}`,
     addPageOfModel: `addPageOf${ModelName}`,
+    refreshModel: `refresh${ModelName}`,
   };
   const namesOfSlice = {
     modelList: sliceName.replace(names.model, names.modelList),
     modelListLoading: sliceName.replace(names.model, names.modelListLoading),
     modelInitList: sliceName.replace(names.model, names.modelInitList),
     modelInitAt: sliceName.replace(names.model, names.modelInitAt),
+    modelStaleAt: sliceName.replace(names.model, names.modelStaleAt),
     modelInsight: sliceName.replace(names.model, names.modelInsight),
     pageOfModel: sliceName.replace(names.model, names.pageOfModel),
     lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
@@ -98,6 +104,7 @@ function Render<RefName extends string, Light extends { id: string }>({
     sortOfModel: sliceName.replace(names.model, names.sortOfModel),
     setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
     addPageOfModel: sliceName.replace(names.model, names.addPageOfModel),
+    refreshModel: sliceName.replace(names.model, names.refreshModel),
   };
   const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
@@ -106,6 +113,7 @@ function Render<RefName extends string, Light extends { id: string }>({
   const initModelObjInsight = (init as any)[names.modelObjInsight] as BaseInsight;
   const initLimitOfModel = (init as any)[names.limitOfModel] as number;
   const initPageOfModel = (init as any)[names.pageOfModel] as number;
+  const modelStaleAt = storeUse[namesOfSlice.modelStaleAt]() as Date;
 
   const useCache =
     !modelListLoading &&
@@ -143,6 +151,13 @@ function Render<RefName extends string, Light extends { id: string }>({
     loaded.current = true;
   }, []);
 
+  useEffect(() => {
+    const staleThreshold = Math.max(modelStaleAt.getTime(), staleTime === undefined ? 0 : Date.now() - staleTime);
+    if (storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= staleThreshold) return;
+    if (storeGet<boolean>()[namesOfSlice.modelListLoading]) return;
+    void storeDo[namesOfSlice.refreshModel]({ invalidate: true });
+  }, [modelStaleAt]);
+
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
@@ -175,9 +190,7 @@ function Render<RefName extends string, Light extends { id: string }>({
         {modelDataList.length || renderEmpty === false ? (
           <ContainerWrapper
             containerRef={containerRef}
-            className={clsx(className, {
-              "grid-cols-1 md:grid-cols-1 lg:grid-cols-1": modelDataList.length === 0,
-            })}
+            className={cn(className, modelDataList.length === 0 && "grid-cols-1 md:grid-cols-1 lg:grid-cols-1")}
             noDiv={noDiv}
             pagination={pagination}
             moreProps={moreProps}
@@ -237,6 +250,7 @@ export default function Units<RefName extends string, Light extends { id: string
   reverse,
   style,
   pagination = true,
+  staleTime,
 }: UnitsProps<RefName, Light>) {
   const props: UnitsProps<RefName, Light> = {
     containerRef,
@@ -254,6 +268,7 @@ export default function Units<RefName extends string, Light extends { id: string
     sort,
     reverse,
     pagination,
+    staleTime,
   };
 
   const { fulfilled, value: promiseInit } = useFetch(init);

package/ui/Load/View.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { ConstantRegistry } from "akanjs/constant";
 import type { ClientView, ServerView } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -76,7 +76,7 @@ function Render<T extends string, Full extends { id: string }>({
   return noDiv && renderModel ? (
     <>{renderView(renderModel)}</>
   ) : renderModel ? (
-    <div className={clsx("w-full", className)}>{renderView(renderModel)}</div>
+    <div className={cn("w-full", className)}>{renderView(renderModel)}</div>
   ) : null;
 }
 

package/ui/Loading/Area.tsx

@@ -1,8 +1,10 @@
+import { AiOutlineLoading } from "react-icons/ai";
+
 export const Area = () => {
   return (
-    <div className="absolute inset-0 flex size-full items-center justify-center bg-base-300/30">
+    <div className="absolute inset-0 flex size-full items-center justify-center bg-border/30">
       <div className="text-center">
-        <span className="loading loading-sm loading-dots" />
+        <AiOutlineLoading className="mx-auto animate-spin text-primary/60 text-sm" />
         <div className="z-10 text-sm">Loading</div>
       </div>
     </div>

package/ui/Loading/Button.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { CSSProperties } from "react";
 
 export interface LoadingProps {
@@ -10,7 +10,7 @@ export const Button = ({ className = "", active, style }: LoadingProps) => {
   const activeClassName = active ? "animate-pulse" : "";
   return (
     <div
-      className={clsx("inline-block h-8 w-16 rounded-md bg-gray-200 align-bottom", activeClassName, className)}
+      className={cn("inline-block h-8 w-16 rounded-md bg-muted align-bottom", activeClassName, className)}
       style={style}
     />
   );

package/ui/Loading/Input.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { CSSProperties } from "react";
 
 export interface LoadingProps {
@@ -10,7 +10,7 @@ export const Input = ({ className = "", active, style }: LoadingProps) => {
   const activeClassName = active ? "animate-pulse" : "";
   return (
     <div
-      className={clsx("inline-block h-8 w-44 rounded-md bg-gray-200 align-bottom", activeClassName, className)}
+      className={cn("inline-block h-8 w-44 rounded-md bg-muted align-bottom", activeClassName, className)}
       style={style}
     />
   );

package/ui/Loading/ProgressBar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { animated } from "akanjs/ui";
 import { useSpring } from "react-spring";
 
@@ -10,5 +10,5 @@ export interface ProgressBarProps {
 }
 export const ProgressBar = ({ className, value, max }: ProgressBarProps) => {
   const progress = useSpring({ value: 0, to: { value: value } });
-  return <animated.progress className={clsx("progress w-full", className)} value={progress.value} max={max} />;
+  return <animated.progress className={cn("progress w-full", className)} value={progress.value} max={max} />;
 };

package/ui/Loading/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { CSSProperties } from "react";
 
 export interface SkeletonProps {
@@ -10,12 +10,12 @@ export interface SkeletonProps {
 export const Skeleton = ({ className = "", active, style }: SkeletonProps) => {
   const activeClassName = active ? "animate-pulse" : "";
   return (
-    <div className={clsx("w-full", activeClassName, className)} style={style}>
+    <div className={cn("w-full", activeClassName, className)} style={style}>
       <div className="flex flex-col justify-start space-y-3">
-        <div className="h-4 w-2/5 rounded-md bg-gray-200"></div>
-        <div className="h-4 w-full rounded-md bg-gray-200"></div>
-        <div className="h-4 w-full rounded-md bg-gray-200"></div>
-        <div className="h-4 w-3/5 rounded-md bg-gray-200"></div>
+        <div className="h-4 w-2/5 rounded-md bg-muted"></div>
+        <div className="h-4 w-full rounded-md bg-muted"></div>
+        <div className="h-4 w-full rounded-md bg-muted"></div>
+        <div className="h-4 w-3/5 rounded-md bg-muted"></div>
       </div>
     </div>
   );

package/ui/Loading/Spin.tsx

@@ -1,4 +1,4 @@
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 import { AiOutlineLoading } from "react-icons/ai";
 
@@ -9,7 +9,7 @@ export interface SpinProps {
 }
 export const Spin = ({ indicator, isCenter, className }: SpinProps) => {
   return (
-    <div className={clsx("inline-block py-1", className)}>
+    <div className={cn("inline-block py-1", className)}>
       <div className={isCenter ? "absolute inset-0 flex size-full flex-none items-center justify-center" : ""}>
         {indicator ? (
           <div className="[&>svg]:animate-spin">{indicator}</div>

package/ui/Menu.tsx

@@ -1,8 +1,9 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { st } from "akanjs/store";
 import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AiFillCaretDown, AiOutlineEllipsis } from "react-icons/ai";
+import { buttonRecipe } from "./Button";
 
 import { createOverridable } from "./UiOverride";
 
@@ -49,7 +50,7 @@ export const DefaultMenu = ({
 }: MenuProps) => {
   const [expandedKey, setExpandedKey] = useState<string>(); 
   const [currentKey, setCurrentKey] = useState<string | null>(defaultSelectedKeys?.[0] ?? null); 
-  const modeClassName = mode === "horizontal" ? "menu-horizontal flex-row " : "bg-base-200";
+  const modeClassName = mode === "horizontal" ? "flex-row " : "bg-muted";
   const menuRef = useRef<HTMLDivElement | null>(null);
   const LiRefs = useRef<HTMLLIElement[]>([]);
   const overflowLiRef = useRef<HTMLLIElement | null>(null);
@@ -58,20 +59,16 @@ export const DefaultMenu = ({
 
   const subMenuClassName =
     mode === "horizontal"
-      ? `fixed menu-title bottom-0 translate-y-[98%] border-0 rounded-xs shadow-lg bg-base-100 hover:bg-base-100 flex flex-col`
+      ? `fixed bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 bg-background shadow-lg hover:bg-background`
       : "flex flex-col gap-0 p-0 bg-primary/10 hover:bg-primary/10 overflow-hidden";
 
   const subMenuItemClassName =
     mode === "inline"
-      ? "w-full h-full bg-red-500 btn btn-ghost px-2 m-0 hover:bg-primary/20 btn btn-ghost text-primary-focus font-normal"
-      : "w-full text-center duration-300 whitespace-nowrap btn btn-ghost text-primary-focus font-normal";
-
-  const activeClassName =
-    activeStyle === "active"
-      ? "bg-primary text-primary-focus"
-      : activeStyle === "bordered"
-        ? " border-b-2 border-white"
-        : activeStyle;
+      ? buttonRecipe({ variant: "ghost" }, "m-0 h-full w-full px-2 font-normal text-primary hover:bg-primary/20")
+      : buttonRecipe(
+          { variant: "ghost" },
+          "w-full whitespace-nowrap text-center font-normal text-primary duration-300",
+        );
 
   const [overflowMenuItems, setOverflowMenuItems] = useState<MenuItem[]>([]);
 
@@ -125,10 +122,10 @@ export const DefaultMenu = ({
     <div
       ref={menuRef}
       id="menu"
-      className={clsx(mode === "horizontal" ? "w-full shrink overflow-hidden" : "w-fit", className)}
+      className={cn(mode === "horizontal" ? "w-full shrink overflow-hidden" : "w-fit", className)}
     >
       <ul
-        className={clsx("menu size-full flex-nowrap overflow-y-auto p-0", modeClassName, ulClassName)}
+        className={cn("flex size-full flex-col flex-nowrap overflow-y-auto p-0", modeClassName, ulClassName)}
         style={{ ...style }}
         onMouseOver={onMouseOver}
         onMouseLeave={onMouseLeave}
@@ -145,10 +142,13 @@ export const DefaultMenu = ({
                 }}
                 id={item.key}
                 key={item.key}
-                className={clsx("relative m-0 duration-200 hover:opacity-70", overflowClassName, liClassName, {
-                  "bg-base-300": activeStyle === "active" && checkIsActive(item.key),
-                  "border-base-100 border-b-2": activeStyle === "bordered" && checkIsActive(item.key),
-                })}
+                className={cn(
+                  "relative m-0 duration-200 hover:opacity-70",
+                  overflowClassName,
+                  liClassName,
+                  activeStyle === "active" && checkIsActive(item.key) && "bg-border",
+                  activeStyle === "bordered" && checkIsActive(item.key) && "border-background border-b-2",
+                )}
                 onClick={() => {
                   if (!isOverflowItem) handleOnClick(item);
                 }}
@@ -161,12 +161,12 @@ export const DefaultMenu = ({
                 }}
               >
                 <div className="flex h-full justify-between rounded-none">
-                  <div className={clsx("flex items-center gap-1", labelClassName?.(checkIsActive(item.key)))}>
+                  <div className={cn("flex items-center gap-1", labelClassName?.(checkIsActive(item.key)))}>
                     {item.icon}
 
-                    {!inlineCollapsed && <div className="whitespace-nowrap text-base-content">{item.label}</div>}
+                    {!inlineCollapsed && <div className="whitespace-nowrap text-foreground">{item.label}</div>}
                     {/* <div
-                      className={clsx(
+                      className={cn(
                         "whitespace-nowrap  truncate ",
                         mode === "horizontal" && !isOverflowItem && item.children
                           ? "flex justify-start animate-menuOpen"
@@ -178,7 +178,7 @@ export const DefaultMenu = ({
                   </div>
                   {item.children && mode === "inline" && (
                     <AiFillCaretDown
-                      className={clsx(
+                      className={cn(
                         "text-xs transition-transform duration-400",
                         expandedKey === item.key ? "rotate-180" : "",
                       )}
@@ -234,12 +234,12 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
         <AiOutlineEllipsis />
       </div>
       {isOpen && (
-        <div className="fixed -bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 bg-base-100 p-2 shadow-lg hover:bg-base-100">
+        <div className="fixed -bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 bg-background p-2 shadow-lg hover:bg-background">
           {overflowItems.map((item) => (
             <div
               key={item.key}
               onClick={() => onClick?.(item)}
-              className="btn btn-ghost relative whitespace-nowrap font-normal text-primary-focus"
+              className={buttonRecipe({ variant: "ghost" }, "relative whitespace-nowrap font-normal text-primary")}
               onMouseEnter={() => {
                 if (item.children && expandedKey !== item.key) setExpandedKey(item.key);
               }}
@@ -249,7 +249,7 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
             >
               {item.label}
               {item.children && expandedKey === item.key && (
-                <div className="absolute top-0 left-0 -translate-x-full bg-base-100 p-4 drop-shadow-sm">
+                <div className="absolute top-0 left-0 -translate-x-full bg-background p-4 drop-shadow-sm">
                   {item.children.map((child) => (
                     <div
                       onClick={(e) => {
@@ -258,8 +258,10 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
                         setExpandedKey(undefined);
                       }}
                       key={child.key}
-                      className="btn btn-ghost flex items-center justify-center text-center font-normal text-primary-focus"
-                      
+                      className={buttonRecipe(
+                        { variant: "ghost" },
+                        "flex items-center justify-center text-center font-normal text-primary",
+                      )}
                     >
                       {child.label}
                     </div>

package/ui/Model/Edit.tsx

@@ -1,4 +1,4 @@
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import type { SliceMeta } from "akanjs/fetch";
 import type { ReactNode } from "react";
 import { AiOutlineEdit } from "react-icons/ai";
@@ -29,9 +29,9 @@ export default function Edit({
 }: EditProps) {
   const { l } = usePage();
   return (
-    <div className={clsx("inline", wrapperClassName)}>
+    <div className={cn("inline", wrapperClassName)}>
       <EditWrapper
-        className={clsx("flex w-full items-center justify-center gap-2", className)}
+        className={cn("flex w-full items-center justify-center gap-2", className)}
         slice={slice}
         modelId={modelId}
         modal={modal}

package/ui/Model/EditModal.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, isRscNavigationFromCache, router, usePage } from "akanjs/client";
+import { cn, isRscNavigationFromCache, router, usePage } from "akanjs/client";
 import { capitalize, deepObjectify, lowerlize } from "akanjs/common";
 import { ConstantRegistry, immerify } from "akanjs/constant";
 import type { ClientEdit, ServerEdit, SliceMeta } from "akanjs/fetch";
@@ -74,15 +74,15 @@ const EditModel = <Full,>({
         : ({ children, className }: { children?: any; className?: string }) => {
             const modelFormLoading = storeUse[names.modelFormLoading]();
             return (
-              <div className={clsx("", className)}>
+              <div className={cn("", className)}>
                 {children}
-                {modelFormLoading ? <div className="absolute inset-0 animate-pulse bg-base-100/50" /> : null}
+                {modelFormLoading ? <div className="absolute inset-0 animate-pulse bg-background/50" /> : null}
               </div>
             );
           };
   }, []);
 
-  return <LoadingWrapper className={clsx("w-full", className)}>{children}</LoadingWrapper>;
+  return <LoadingWrapper className={cn("w-full", className)}>{children}</LoadingWrapper>;
 };
 
 interface EditModalProps<Full extends { id: string }> extends EditModelProps<Full> {
@@ -256,7 +256,7 @@ export default function EditModal<Full extends { id: string }>({
               };
               return (
                 <Button
-                  className={clsx("btn btn-primary mt-4 w-full gap-2 rounded-2xl", submitClassName)}
+                  className={cn("mt-4 w-full gap-2 rounded-2xl", submitClassName)}
                   disabled={modelSubmit.disabled || !!disabled}
                   onClick={async (e, { onError }) => {
                     await handleSubmit({ onError });

package/ui/Model/EditWrapper.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -32,7 +32,7 @@ export default function EditWrapper({
   const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
   return (
     <div
-      className={clsx("cursor-pointer", className)}
+      className={cn("cursor-pointer", className)}
       onClick={(e) => {
         if (disabled) return;
         e.stopPropagation();

package/ui/Model/New.tsx

@@ -1,4 +1,4 @@
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import type { SliceMeta } from "akanjs/fetch";
 import type { ReactNode } from "react";
 import { AiOutlinePlus } from "react-icons/ai";
@@ -29,9 +29,9 @@ export default function New({
 }: NewProps) {
   const { l } = usePage();
   return (
-    <div className={clsx("inline", wrapperClassName)}>
+    <div className={cn("inline", wrapperClassName)}>
       <NewWrapper
-        className={clsx("flex w-full items-center justify-center gap-2", className)}
+        className={cn("flex w-full items-center justify-center gap-2", className)}
         slice={slice}
         modal={modal}
         partial={partial}

package/ui/Model/NewWrapper_Client.tsx

@@ -1,6 +1,6 @@
 "use client";
 import type { GetStateObject } from "akanjs/base";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { ConstantRegistry } from "akanjs/constant";
 import type { SliceMeta } from "akanjs/fetch";
@@ -39,7 +39,7 @@ export const NewWrapper_Client = <Full,>({
   const disabled = modelModal === "edit";
   return (
     <div
-      className={clsx({ "cursor-pointer": !disabled, "pointer-events-none": disabled }, className)}
+      className={cn(!disabled && "cursor-pointer", disabled && "pointer-events-none", className)}
       onClick={(e) => {
         e.stopPropagation();
         if (disabled) return;

package/ui/Model/Remove.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, msg, router, usePage } from "akanjs/client";
+import { cn, msg, router, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -32,7 +32,7 @@ export default function Remove({ className, name, modelId, slice, modal, redirec
   return (
     <>
       <div
-        className={clsx("cursor-pointer", className)}
+        className={cn("cursor-pointer", className)}
         onClick={(e) => {
           e.stopPropagation();
           setModalOpen(true);
@@ -46,13 +46,14 @@ export default function Remove({ className, name, modelId, slice, modal, redirec
           setModalOpen(false);
         }}
         title={
-          <div className="font-bold text-error text-lg">
+          <div className="font-bold text-destructive text-lg">
             {l("base.removeModel", { model: l(`${modelName}.modelName` as "base.new") })}
           </div>
         }
         action={
           <Button
-            className="btn btn-warning w-full"
+            variant="warning"
+            className="w-full"
             onClick={async (e, { onError }) => {
               await storeDo[names.removeModel](modelId, { onError, modal });
               msg.success("base.removeSuccess", { data: { model: l(`${modelName}.modelName` as "base.new") } });

package/ui/Model/RemoveWrapper.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -32,7 +32,7 @@ export default function RemoveWrapper({ children, slice, name, modelId, classNam
         void storeDo[names.removeModel](modelId, { modal });
       }}
     >
-      <div className={clsx("cursor-pointer", className)}>{children}</div>
+      <div className={cn("cursor-pointer", className)}>{children}</div>
     </Popconfirm>
   );
 }

package/ui/Model/SureToRemove.tsx

@@ -1,11 +1,12 @@
 "use client";
-import { clsx, msg, router, usePage } from "akanjs/client";
+import { cn, msg, router, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import { useMemo, useState } from "react";
 import { AiOutlineDelete } from "react-icons/ai";
 
+import { buttonRecipe } from "../Button";
 import { Modal } from "../Modal";
 
 interface SureToRemoveProps {
@@ -46,8 +47,8 @@ export default function SureToRemove({
       }}
     >
       <div
-        className={clsx(
-          "flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap text-error",
+        className={cn(
+          "flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap text-destructive",
           className,
         )}
       >
@@ -59,14 +60,14 @@ export default function SureToRemove({
           setModalOpen(false);
         }}
         title={
-          <div className="font-bold text-error text-lg">
+          <div className="font-bold text-destructive text-lg">
             {l("base.removeModel", { model: l(`${modelName}.modelName` as "base.new") })}
           </div>
         }
-        bodyClassName="border-error"
+        bodyClassName="border-destructive"
         action={
           <button
-            className="btn btn-error w-full"
+            className={buttonRecipe({ variant: "destructive" }, "w-full")}
             disabled={typeNameToRemove && repeatName !== name}
             onClick={async () => {
               await storeDo[names.removeModel](modelId);

package/ui/Model/View.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { type ReactNode, useMemo } from "react";
-import { AiOutlineMeh } from "react-icons/ai";
+import { AiOutlineLoading, AiOutlineMeh } from "react-icons/ai";
 
 interface ViewProps<Full extends { id: string }> {
   className?: string;
@@ -41,7 +41,7 @@ export default function View<Full extends { id: string }>({
           : (loading ??
             (() => (
               <div className="flex size-full flex-col items-center justify-center gap-3 pt-6 pb-3">
-                <span className="loading loading-dots loading-lg" />
+                <AiOutlineLoading className="animate-spin text-2xl text-primary/60" />
                 Loading
               </div>
             )))