ai-design-system 0.1.79 → 0.1.81

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -270,8 +270,20 @@ export function EnhancedDataTable({
     const value = toDisplayValue(rawValue)
 
     if (renderType === "badge" || renderType === "status") {
+      const lower = value.toLowerCase()
+      let statusClass = "text-muted-foreground border-border"
+      if (lower.includes("complete") || lower.includes("done") || lower.includes("success") || lower.includes("approved")) {
+        statusClass = "text-emerald-400 bg-emerald-500/10 border-emerald-500/20"
+      } else if (lower.includes("fail") || lower.includes("error") || lower.includes("reject")) {
+        statusClass = "text-rose-400 bg-rose-500/10 border-rose-500/20"
+      } else if (lower.includes("cancel")) {
+        statusClass = "text-muted-foreground bg-muted/30 border-border"
+      } else if (lower.includes("progress") || lower.includes("running") || lower.includes("pending")) {
+        statusClass = "text-amber-400 bg-amber-500/10 border-amber-500/20"
+      }
+
       return (
-        <Badge variant="outline" className="px-1.5 text-muted-foreground">
+        <Badge variant="outline" className={`px-2 py-0.5 text-xs font-medium ${statusClass}`}>
           {value}
         </Badge>
       )
@@ -354,7 +366,7 @@ export function EnhancedDataTable({
           <Button
             variant="ghost"
             size="icon"
-            className="flex size-8 text-muted-foreground hover:text-foreground"
+            className="flex size-8 cursor-pointer text-muted-foreground hover:text-foreground"
             onClick={(e) => {
               e.stopPropagation()
               emitRowAction(singleAction.key, row.original)
@@ -372,7 +384,7 @@ export function EnhancedDataTable({
         cell: ({ row }) => (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
+              <Button variant="ghost" className="flex size-8 cursor-pointer text-muted-foreground data-[state=open]:bg-muted" size="icon">
                 <Icon name="more-vertical" size="sm" />
                 <span className="sr-only">Open menu</span>
               </Button>

package/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

package/dist/index.cjs

@@ -132,7 +132,7 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -9980,7 +9980,18 @@ function EnhancedDataTable({
     const renderType = (_a2 = column.renderType) != null ? _a2 : "text";
     const value = toDisplayValue(rawValue);
     if (renderType === "badge" || renderType === "status") {
-      return /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "outline", className: "px-1.5 text-muted-foreground", children: value });
+      const lower = value.toLowerCase();
+      let statusClass = "text-muted-foreground border-border";
+      if (lower.includes("complete") || lower.includes("done") || lower.includes("success") || lower.includes("approved")) {
+        statusClass = "text-emerald-400 bg-emerald-500/10 border-emerald-500/20";
+      } else if (lower.includes("fail") || lower.includes("error") || lower.includes("reject")) {
+        statusClass = "text-rose-400 bg-rose-500/10 border-rose-500/20";
+      } else if (lower.includes("cancel")) {
+        statusClass = "text-muted-foreground bg-muted/30 border-border";
+      } else if (lower.includes("progress") || lower.includes("running") || lower.includes("pending")) {
+        statusClass = "text-amber-400 bg-amber-500/10 border-amber-500/20";
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "outline", className: `px-2 py-0.5 text-xs font-medium ${statusClass}`, children: value });
     }
     if (renderType === "progress") {
       const progress = Math.max(0, Math.min(100, toNumberValue(rawValue)));
@@ -10052,7 +10063,7 @@ function EnhancedDataTable({
           {
             variant: "ghost",
             size: "icon",
-            className: "flex size-8 text-muted-foreground hover:text-foreground",
+            className: "flex size-8 cursor-pointer text-muted-foreground hover:text-foreground",
             onClick: (e) => {
               e.stopPropagation();
               emitRowAction(singleAction.key, row.original);
@@ -10067,7 +10078,7 @@ function EnhancedDataTable({
       dynamicColumns.push({
         id: "actions",
         cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", className: "flex size-8 text-muted-foreground data-[state=open]:bg-muted", size: "icon", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", className: "flex size-8 cursor-pointer text-muted-foreground data-[state=open]:bg-muted", size: "icon", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-vertical", size: "sm" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Open menu" })
           ] }) }),