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

package/ui/Data/Item.tsx

@@ -1,12 +1,14 @@
 "use client";
 import type { Dayjs } from "akanjs/base";
-import { clsx, type DataAction, type DataColumn, usePage } from "akanjs/client";
+import { cn, type DataAction, type DataColumn, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { BaseObject } from "akanjs/constant";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import type { ReactNode } from "react";
 import { AiOutlineDelete, AiOutlineEdit, AiOutlineEye, AiOutlineMore } from "react-icons/ai";
+import { badgeRecipe } from "../Badge";
+import { buttonRecipe } from "../Button";
 import { Dropdown } from "../Dropdown";
 import { ObjectId } from "../ObjectId";
 import { Popconfirm } from "../Popconfirm";
@@ -129,7 +131,7 @@ export default function Item<T extends string, Full extends { id: string }, Ligh
     });
 
   return (
-    <div className={clsx("flex flex-col", className)}>
+    <div className={cn("flex flex-col", className)}>
       {children ? (
         <div className="flex justify-center">
           <div className="relative size-full" onClick={onClick}>
@@ -143,16 +145,14 @@ export default function Item<T extends string, Full extends { id: string }, Ligh
       ) : null}
       <div className="mt-2 h-full rounded-lg bg-primary/5 p-2">
         <div className="mb-2 flex justify-between">
-          <div className="[&_.badge]:badge-xs [&_.badge]:p-2">
-            {columns.find((c) => c === "id") && <ObjectId id={model.id} />}
-          </div>
+          <div>{columns.find((c) => c === "id") && <ObjectId id={model.id} />}</div>
 
           <div className="flex items-end justify-center gap-2">
             {columns.find((c) => c === "createdAt") && (
               <RecentTime date={(model as unknown as BaseObject).createdAt} className="text-xs opacity-60" />
             )}
             {columns.find((c) => c === "status") && (
-              <StatusTag status={(model as unknown as { status: string }).status} className="badge-xs mr-0 p-2" />
+              <StatusTag status={(model as unknown as { status: string }).status} className="mr-0 p-2" />
             )}
           </div>
         </div>
@@ -165,7 +165,7 @@ export default function Item<T extends string, Full extends { id: string }, Ligh
           ))}
           {customActions.length ? (
             <Dropdown
-              buttonClassName="m-1 text-center btn btn-square btn-ghost btn-sm "
+              buttonClassName={buttonRecipe({ variant: "ghost", size: "icon" }, "m-1 size-8 text-center")}
               value={<AiOutlineMore />}
               content={customActions.map((action) => <div key={action.key}>{action.label}</div>)}
             />
@@ -205,14 +205,20 @@ export const Action = <T extends string, M extends { id: string }, L extends { i
   };
   return action === "edit" ? (
     <button
-      className={`btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`}
+      className={buttonRecipe({ variant: outline ? "outline" : "ghost", size: "icon" }, [
+        "m-1 size-8 text-center",
+        outline && "border-dashed",
+      ])}
       onClick={() => void storeDo[namesOfSlice.editModel](model.id)}
     >
       <AiOutlineEdit key={action} />
     </button>
   ) : action === "view" ? (
     <button
-      className={`btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`}
+      className={buttonRecipe({ variant: outline ? "outline" : "ghost", size: "icon" }, [
+        "m-1 size-8 text-center",
+        outline && "border-dashed",
+      ])}
       onClick={() => void storeDo[namesOfSlice.viewModel](model.id)}
     >
       <AiOutlineEye key={action} />
@@ -223,7 +229,12 @@ export const Action = <T extends string, M extends { id: string }, L extends { i
       title={l("base.removeMsg")}
       onConfirm={() => void storeDo[namesOfSlice.removeModel](model.id)}
     >
-      <button className={`btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`}>
+      <button
+        className={buttonRecipe({ variant: outline ? "outline" : "ghost", size: "icon" }, [
+          "m-1 size-8 text-center",
+          outline && "border-dashed",
+        ])}
+      >
         <AiOutlineDelete />
       </button>
     </Popconfirm>
@@ -233,28 +244,29 @@ export const Action = <T extends string, M extends { id: string }, L extends { i
 };
 
 const statusColors = {
-  active: "badge-info badge-outline",
-  applied: "badge-warning",
-  approved: "badge-success",
-  denied: "badge-error badge-outline",
-  failed: "badge-error badge-outline",
-  restricted: "badge-error",
-  paused: "badge-outline",
-  running: "badge-warning badge-outline",
-  break: "badge-accent badge-outline",
-  rejected: "badge-error badge-outline",
-  hidden: "badge-outline",
-  inProgress: "badge-accent",
-  resolved: "badge-success badge-outline",
-  finished: "badge-secondary",
+  active: "border-info text-info",
+  applied: "border-transparent bg-warning text-warning-foreground",
+  approved: "border-transparent bg-success text-success-foreground",
+  denied: "border-destructive text-destructive",
+  failed: "border-destructive text-destructive",
+  restricted: "border-transparent bg-destructive text-destructive-foreground",
+  paused: "",
+  running: "border-warning text-warning",
+  break: "border-accent text-accent",
+  rejected: "border-destructive text-destructive",
+  hidden: "",
+  inProgress: "border-transparent bg-accent text-accent-foreground",
+  resolved: "border-success text-success",
+  finished: "border-transparent bg-secondary text-secondary-foreground",
 };
 const StatusTag = ({ status, className }: { status: string; className?: string }) => {
   return (
     <div
-      className={clsx(
-        `badge mr-1 p-3 ${statusColors[status as keyof typeof statusColors] ?? "badge-outline"}`,
+      className={badgeRecipe({ variant: "outline" }, [
+        "mr-1 p-3",
+        statusColors[status as keyof typeof statusColors] ?? "",
         className,
-      )}
+      ])}
     >
       {status}
     </div>
@@ -263,21 +275,24 @@ const StatusTag = ({ status, className }: { status: string; className?: string }
 Item.StatusTag = StatusTag;
 
 const roleColors = {
-  user: "badge-success",
-  business: "badge-warning",
-  admin: "badge-error badge-outline",
-  superAdmin: "badge-error",
-  root: "badge-primary",
+  user: "border-transparent bg-success text-success-foreground",
+  business: "border-transparent bg-warning text-warning-foreground",
+  admin: "border-destructive text-destructive",
+  superAdmin: "border-transparent bg-destructive text-destructive-foreground",
+  root: "border-transparent bg-primary text-primary-foreground",
 };
 const RoleTags = ({ role }: { role: string | string[] }) => {
   return Array.isArray(role) ? (
     role.map((role) => (
-      <div className={`badge mr-1 ${roleColors[role as keyof typeof roleColors]}`} key={role}>
+      <div
+        className={badgeRecipe({ variant: "outline" }, ["mr-1", roleColors[role as keyof typeof roleColors]])}
+        key={role}
+      >
         {role}
       </div>
     ))
   ) : (
-    <div className="badge mr-1" style={{ backgroundColor: roleColors[role as keyof typeof roleColors] as string }}>
+    <div className={badgeRecipe({ variant: "outline" }, ["mr-1", roleColors[role as keyof typeof roleColors]])}>
       {role}
     </div>
   );

package/ui/Data/ListContainer.tsx

@@ -1,7 +1,7 @@
 "use client";
 import type { DataList } from "akanjs/base";
 import {
-  clsx,
+  cn,
   type DataAction,
   type DataColumn,
   type DataTool,
@@ -23,6 +23,7 @@ import {
   AiOutlineRedo,
 } from "react-icons/ai";
 
+import { buttonRecipe } from "../Button";
 import { Dropdown } from "../Dropdown";
 import { Loading } from "../Loading";
 import { Model } from "../Model";
@@ -191,7 +192,7 @@ export default function ListContainer<
             key: "export-csv",
             render: () => (
               <div
-                className="btn btn-sm btn-ghost flex flex-nowrap justify-start gap-2"
+                className={buttonRecipe({ variant: "ghost", size: "sm" }, "flex flex-nowrap justify-start gap-2")}
                 onClick={() => {
                   const header = columns
                     .map((column) => {
@@ -225,7 +226,7 @@ export default function ListContainer<
           {
             render: () => (
               <div
-                className="btn btn-sm btn-ghost flex flex-nowrap justify-start gap-2"
+                className={buttonRecipe({ variant: "ghost", size: "sm" }, "flex flex-nowrap justify-start gap-2")}
                 onClick={() => {
                   const json = JSON.stringify(deepObjectify([...modelList], { serializable: true }));
                   const blob = new Blob([json], { type: "application/json" });
@@ -240,7 +241,10 @@ export default function ListContainer<
         ];
     return (
       <Dropdown
-        buttonClassName={`btn btn-primary btn-sm ${renderTemplate && create ? "rounded-l-none" : ""}`}
+        buttonClassName={buttonRecipe(
+          { variant: "primary", size: "sm" },
+          renderTemplate && create ? "rounded-l-none" : "",
+        )}
         value={<AiOutlineEllipsis />}
         content={toolList.map((tool) => <tool.render key={tool.key} />)}
       />
@@ -261,7 +265,7 @@ export default function ListContainer<
     );
   };
   return (
-    <div className={clsx("m-4", className)}>
+    <div className={cn("m-4", className)}>
       <div className="mb-3 flex flex-wrap justify-between">
         <div className="flex pb-1">
           <p className="prose text-lg">
@@ -271,7 +275,7 @@ export default function ListContainer<
             {renderTemplate && create ? (
               <button
                 onClick={() => void storeDo[namesOfSlice.newModel]()}
-                className={`btn btn-sm btn-primary mr-[0.5px] rounded-r-none`}
+                className={buttonRecipe({ variant: "primary", size: "sm" }, "mr-[0.5px] rounded-r-none")}
               >
                 <AiOutlinePlus /> {l("base.new")}
               </button>
@@ -281,7 +285,7 @@ export default function ListContainer<
         </div>
         <div className="flex">
           <button
-            className="btn btn-primary btn-sm btn-square mx-1"
+            className={buttonRecipe({ variant: "primary", size: "icon" }, "mx-1 size-8")}
             onClick={() => void storeDo[namesOfSlice.refreshModel]()}
           >
             <AiOutlineRedo className="mx-2" />

package/ui/Data/Pagination.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import type { SliceMeta } from "akanjs/fetch";
@@ -39,7 +39,7 @@ export default function Pagination<T extends string>({ className, slice }: Pagin
   const lastPageOfModel = storeUse[namesOfSlice.lastPageOfModel]() as number;
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
   return (
-    <div className={clsx("mt-4 flex flex-wrap justify-center", className)}>
+    <div className={cn("mt-4 flex flex-wrap justify-center", className)}>
       <Pagn
         currentPage={pageOfModel}
         

package/ui/DatePicker.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { type Dayjs, dayjs } from "akanjs/base";
-import { clsx, msg } from "akanjs/client";
+import { cn, msg } from "akanjs/client";
 import { lazy } from "akanjs/webkit";
 import { type FocusEvent, useEffect, useRef } from "react";
 import { AiOutlineSwapRight } from "react-icons/ai";
@@ -58,7 +58,7 @@ const DefaultDatePicker = ({
 
   return (
     <ReactDatePicker
-      className={clsx("input text-center", className)}
+      className={cn("input text-center", className)}
       selected={value ? value.toDate() : new Date()}
       disabledKeyboardNavigation
       onFocus={(e: FocusEvent<HTMLInputElement>) => {
@@ -112,7 +112,7 @@ const DefaultRangePicker = ({
 
   const pickerClassName = "m-0 input focus:outline-hidden z-50 p-3 text-center h-full w-full ";
   return (
-    <div className={clsx("input flex h-full w-fit items-center gap-2 p-0", className)}>
+    <div className={cn("input flex h-full w-fit items-center gap-2 p-0", className)}>
       <ReactDatePicker
         className={pickerClassName}
         selected={value[0] ? value[0].toDate() : undefined}
@@ -125,7 +125,7 @@ const DefaultRangePicker = ({
         filterDate={(date: Date) => (!disabledDate?.(dayjs(date)) ? true : false)}
         dateFormat={format}
       />
-      <AiOutlineSwapRight className="text-3xl text-gray-400" />
+      <AiOutlineSwapRight className="text-3xl text-muted-foreground" />
       <ReactDatePicker
         className={pickerClassName}
         selected={value[1] ? value[1].toDate() : undefined}
@@ -174,7 +174,7 @@ const DefaultTimePicker = ({
   return (
     <ReactDatePicker
       wrapperClassName="inline-block"
-      className={clsx("inline-block w-auto", className)}
+      className={cn("inline-block w-auto", className)}
       selected={value ? value.toDate() : new Date()}
       onChange={handleDateChange}
       showTimeSelect

package/ui/Dialog/Content.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import type { ReactNode } from "react";
 
 export interface ContentProps {
@@ -7,5 +7,5 @@ export interface ContentProps {
   children?: ReactNode;
 }
 export const Content = ({ className, children }: ContentProps) => {
-  return <div className={clsx("block w-full", className)}>{children}</div>;
+  return <div className={cn("block w-full", className)}>{children}</div>;
 };

package/ui/Dialog/Modal.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { useDrag } from "@use-gesture/react";
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import { animated } from "akanjs/ui";
 import { type ReactNode, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BiX } from "react-icons/bi";
 import { config, useSpring } from "react-spring";
+import { buttonRecipe } from "../Button";
 
 import { DialogContext } from "./context";
 
@@ -185,7 +186,7 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
   return createPortal(
     <>
       <div
-        className={clsx("fixed inset-0 z-10", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-md")}
+        className={cn("fixed inset-0 z-10", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-md")}
         onClick={(event) => {
           if (event.target !== event.currentTarget) return;
           requestClose();
@@ -205,14 +206,17 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
             <button
               type="button"
               aria-label="Close"
-              className="btn btn-circle btn-sm absolute top-[-16px] right-0 z-20 md:top-[-40px]"
+              className={buttonRecipe(
+                { variant: "secondary", size: "icon" },
+                "absolute top-[-16px] right-0 z-20 size-8 rounded-full md:top-[-40px]",
+              )}
               onClick={() => requestClose()}
             >
               <BiX className="text-3xl" />
             </button>
             <div
-              className={clsx(
-                "mx-auto mt-6 flex max-h-[75vh] w-full max-w-screen animate-fadeIn flex-col items-center justify-center overflow-x-hidden rounded-lg bg-base-100 transition-all duration-100 sm:w-[90%] sm:px-2 sm:pb-2 md:mt-0 md:max-h-[90vh] md:pt-0",
+              className={cn(
+                "mx-auto mt-6 flex max-h-[75vh] w-full max-w-screen animate-fadeIn flex-col items-center justify-center overflow-x-hidden rounded-lg bg-background transition-all duration-100 sm:w-[90%] sm:px-2 sm:pb-2 md:mt-0 md:max-h-[90vh] md:pt-0",
                 className,
               )}
             >
@@ -222,7 +226,7 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
                 className="relative z-10 flex w-full animate-fadeIn cursor-pointer touch-pan-y flex-col items-center justify-center px-4 pt-1"
               >
                 <div className="flex w-full cursor-pointer items-center justify-center pt-1 opacity-50">
-                  <div className="h-1 w-24 rounded-full bg-gray-500" />
+                  <div className="h-1 w-24 rounded-full bg-muted-foreground" />
                 </div>
                 <div className="flex w-full items-center justify-start">
                   <div className="w-full text-start font-bold text-lg">{title}</div>
@@ -230,8 +234,8 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
               </animated.div>
               <div
                 id={contentId}
-                className={clsx(
-                  "scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-base-content/30 border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
+                className={cn(
+                  "scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-foreground/30 border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
                   bodyClassName,
                 )}
               >

package/ui/Dialog/Provider.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { type ReactNode, useEffect, useState } from "react";
 
 import { DialogContext } from "./context";
@@ -22,7 +22,7 @@ export const Provider = ({ className, defaultOpen = false, open = defaultOpen, c
   }, [open]);
   return (
     <DialogContext.Provider value={{ open: openState, setOpen: setOpenState, title, setTitle, action, setAction }}>
-      <div data-open={openState} className={clsx("group/dialog", className)}>
+      <div data-open={openState} className={cn("group/dialog", className)}>
         {children}
       </div>
     </DialogContext.Provider>

package/ui/DragAction.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useGesture } from "@use-gesture/react";
 import type { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { animated } from "akanjs/ui";
 import { createContext, type ReactNode, useContext, useRef } from "react";
 import { SpringValue, useSpring } from "react-spring";
@@ -74,7 +74,7 @@ export const DragAction = ({ className, children, onClick, onLeft, onRight }: Dr
   );
   return (
     <DragActionContext.Provider value={{ bind, x, y, leftOpacity, leftWidth, rightOpacity, rightWidth, onClick }}>
-      <div ref={ref} className={clsx("relative overflow-x-hidden", className)}>
+      <div ref={ref} className={cn("relative overflow-x-hidden", className)}>
         {children}
       </div>
     </DragActionContext.Provider>

package/ui/DraggableList.tsx

@@ -1,11 +1,12 @@
 "use client";
 import { config, useSprings } from "@react-spring/web";
 import { useGesture } from "@use-gesture/react";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 import { animated } from "akanjs/ui";
 import { createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
 import { BiTrash } from "react-icons/bi";
 import { MdDragIndicator } from "react-icons/md";
+import { buttonRecipe } from "./Button";
 
 const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
 
@@ -101,7 +102,7 @@ const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemo
   });
 
   return (
-    <div className={clsx(`isolate flex gap-0`, { "flex-col": mode === "vertical" }, className)}>
+    <div className={cn("isolate flex gap-0", mode === "vertical" && "flex-col", className)}>
       {springs.map(({ zIndex, shadow, movement, scale }, i) => (
         <animated.div
           ref={(el: HTMLDivElement | null) => {
@@ -110,6 +111,7 @@ const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemo
           key={i}
           style={{
             zIndex,
+
             boxShadow: shadow.to((s) => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`),
             scale,
             ...(mode === "vertical" ? { y: movement } : { x: movement }),
@@ -140,7 +142,7 @@ DragList.Cursor = ({ className, children }: Cursor) => {
   const { bind } = useDragList();
   return (
     <div
-      className={clsx("cursor-grab duration-200 hover:scale-[1.01] hover:opacity-70 hover:shadow-xl", className)}
+      className={cn("cursor-grab duration-200 hover:scale-[1.01] hover:opacity-70 hover:shadow-xl", className)}
       {...bind()}
     >
       {children}
@@ -168,7 +170,7 @@ const Item = ({
 }: ItemProps) => {
   const { onRemove } = useDragList();
   return (
-    <div className={clsx("flex w-full items-center gap-2", className)}>
+    <div className={cn("flex w-full items-center gap-2", className)}>
       {cursor ? (
         <DraggableList.Cursor className={cursorClassName}>
           <MdDragIndicator className="text-xl" />
@@ -177,7 +179,10 @@ const Item = ({
       {children}
       {removable && (
         <button
-          className={clsx("btn btn-xs btn-error btn-square btn-outline", removeClassName)}
+          className={buttonRecipe({ variant: "outline", size: "xs" }, [
+            "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
+            removeClassName,
+          ])}
           onClick={() => {
             onRemove(value);
           }}

package/ui/Dropdown.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { clsx } from "akanjs/client";
-import { type ReactNode, useState } from "react";
+import { cn } from "akanjs/client";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 
+import { buttonRecipe } from "./Button";
 import { createOverridable } from "./UiOverride";
 
 export interface DropdownProps {
@@ -19,35 +20,41 @@ export interface DropdownProps {
 
 export const DefaultDropdown = ({ value, content, className, buttonClassName, dropdownClassName }: DropdownProps) => {
   const [opened, setOpened] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!opened) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpened(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+    };
+  }, [opened]);
   return (
-    <div
-      onClick={() => {
-        setOpened(true);
-      }}
-      className={clsx("dropdown dropdown-end", className)}
-    >
-      <label
-        tabIndex={0}
-        className={clsx("btn flex", buttonClassName)}
+    <div ref={ref} className={cn("relative inline-block", className)}>
+      <button
+        type="button"
+        className={buttonRecipe({ variant: "ghost" }, ["flex", buttonClassName])}
         onClick={() => {
-          setOpened(true);
+          setOpened((o) => !o);
         }}
       >
         {value}
-      </label>
-      <ul
-        tabIndex={0}
-        onClick={() => {
-          if (opened) setOpened(false);
-        }}
-        className={clsx(
-          "md:scrollbar-thin md:scrollbar-thumb-rounded-md md:scrollbar-thumb-gray-300 md:scrollbar-track-transparent z-[100] grid max-h-52 gap-2 overflow-auto whitespace-nowrap rounded-md bg-base-100 pr-3 shadow-sm",
-          opened ? "dropdown-content size-fit p-1" : "size-0 overflow-hidden",
-          dropdownClassName,
-        )}
-      >
-        {content}
-      </ul>
+      </button>
+      {opened ? (
+        <ul
+          onClick={() => {
+            setOpened(false);
+          }}
+          className={cn(
+            "absolute right-0 z-[100] mt-1 grid max-h-52 gap-2 overflow-auto whitespace-nowrap rounded-md bg-popover p-1 pr-3 text-popover-foreground shadow-md",
+            dropdownClassName,
+          )}
+        >
+          {content}
+        </ul>
+      ) : null}
     </div>
   );
 };

package/ui/Empty.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { clsx, usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import type { ReactNode } from "react";
 import { AiOutlineMeh } from "react-icons/ai";
 
@@ -20,11 +20,11 @@ export const DefaultEmpty = ({ className = "", description, children, minHeight
   const { l } = usePage();
   return (
     <div>
+      {/* minHeight is a runtime number, so it has to be a style prop: Tailwind extracts arbitrary values
+          from source text, so `min-h-[${minHeight}px]` compiles to no CSS and the prop is silently ignored. */}
       <div
-        className={clsx(
-          `min-h-[${minHeight}px] flex flex-col items-center justify-center gap-3 pt-6 pb-3 text-base-content/30`,
-          className,
-        )}
+        style={{ minHeight }}
+        className={cn("flex flex-col items-center justify-center gap-3 pt-6 pb-3 text-foreground/30", className)}
       >
         <AiOutlineMeh className="scale-150 text-4xl" />
         <p>{description ?? l("base.noData")}</p>