ai-design-system 0.1.82 → 0.1.84

package/components/blocks/FormReportsSection/FormReportsSection.tsx

@@ -33,7 +33,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
     enableRowSelection,
   }) => {
     return (
-      <section>
+      <section className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <FormReportsTable
           items={items}
           columns={columns}

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -269,21 +269,25 @@ export function EnhancedDataTable({
     const renderType = column.renderType ?? "text"
     const value = toDisplayValue(rawValue)
 
-    if (renderType === "badge" || renderType === "status") {
+    if (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"
-      }
+      const isDone = lower.includes("complete") || lower.includes("done") || lower.includes("success")
+      const isFailed = lower.includes("fail") || lower.includes("error") || lower.includes("reject")
+      const isInProgress = lower.includes("progress") || lower.includes("running") || lower.includes("pending") || lower.includes("process")
+
+      return (
+        <Badge variant="outline" className="px-1.5 text-muted-foreground gap-1.5 font-normal">
+          {isDone && <span className="size-2 rounded-full bg-emerald-500 shrink-0" />}
+          {isFailed && <span className="size-2 rounded-full bg-rose-500 shrink-0" />}
+          {isInProgress && <Icon name="loader-2" size="xs" className="animate-spin text-amber-500 shrink-0" />}
+          {value}
+        </Badge>
+      )
+    }
 
+    if (renderType === "badge") {
       return (
-        <Badge variant="outline" className={`px-2 py-0.5 text-xs font-medium ${statusClass}`}>
+        <Badge variant="outline" className="px-1.5 text-muted-foreground font-normal">
           {value}
         </Badge>
       )

package/components/composites/FormReports/FormReportsDrawerForm.tsx

@@ -112,14 +112,13 @@ export const FormReportsDrawerForm = React.memo<FormReportsDrawerFormProps>(
 
     return (
       <Drawer open={open} onOpenChange={onOpenChange} direction={isMobile ? "bottom" : "right"}>
-        <DrawerContent className="max-h-[90vh] sm:max-h-full flex flex-col">
-          <DrawerHeader className="gap-1 shrink-0">
+        <DrawerContent>
+          <DrawerHeader className="gap-1">
             <DrawerTitle>{title}</DrawerTitle>
             {description ? <DrawerDescription>{description}</DrawerDescription> : null}
           </DrawerHeader>
-
-          <form className="flex min-h-0 flex-1 flex-col overflow-hidden text-sm" onSubmit={handleSubmit}>
-            <div className="flex-1 min-h-0 overflow-y-auto px-4 py-2 flex flex-col gap-4">
+          <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+            <form id="form-reports-drawer-form" className="flex flex-col gap-4" onSubmit={handleSubmit}>
               {fields.map((field) => {
                 const value = values[field.name]
 
@@ -202,24 +201,25 @@ export const FormReportsDrawerForm = React.memo<FormReportsDrawerFormProps>(
                   </div>
                 )
               })}
-            </div>
-
-            <DrawerFooter className="px-4 py-3 border-t shrink-0">
-              <Button type="submit">{submitLabel}</Button>
-              <DrawerClose asChild>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => {
-                    onCancel?.()
-                    onOpenChange(false)
-                  }}
-                >
-                  {cancelLabel}
-                </Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </form>
+            </form>
+          </div>
+          <DrawerFooter>
+            <Button form="form-reports-drawer-form" type="submit">
+              {submitLabel}
+            </Button>
+            <DrawerClose asChild>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  onCancel?.()
+                  onOpenChange(false)
+                }}
+              >
+                {cancelLabel}
+              </Button>
+            </DrawerClose>
+          </DrawerFooter>
         </DrawerContent>
       </Drawer>
     )

package/dist/index.cjs

@@ -9979,19 +9979,20 @@ function EnhancedDataTable({
     var _a2;
     const renderType = (_a2 = column.renderType) != null ? _a2 : "text";
     const value = toDisplayValue(rawValue);
-    if (renderType === "badge" || renderType === "status") {
+    if (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 /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "outline", className: `px-2 py-0.5 text-xs font-medium ${statusClass}`, children: value });
+      const isDone = lower.includes("complete") || lower.includes("done") || lower.includes("success");
+      const isFailed = lower.includes("fail") || lower.includes("error") || lower.includes("reject");
+      const isInProgress = lower.includes("progress") || lower.includes("running") || lower.includes("pending") || lower.includes("process");
+      return /* @__PURE__ */ jsxRuntime.jsxs(Badge2, { variant: "outline", className: "px-1.5 text-muted-foreground gap-1.5 font-normal", children: [
+        isDone && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-emerald-500 shrink-0" }),
+        isFailed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-rose-500 shrink-0" }),
+        isInProgress && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "loader-2", size: "xs", className: "animate-spin text-amber-500 shrink-0" }),
+        value
+      ] });
+    }
+    if (renderType === "badge") {
+      return /* @__PURE__ */ jsxRuntime.jsx(Badge2, { variant: "outline", className: "px-1.5 text-muted-foreground font-normal", children: value });
     }
     if (renderType === "progress") {
       const progress = Math.max(0, Math.min(100, toNumberValue(rawValue)));
@@ -10449,89 +10450,87 @@ var FormReportsDrawerForm = React3__namespace.memo(
       },
       [onSubmit, values]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(Drawer2, { open, onOpenChange, direction: isMobile ? "bottom" : "right", children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent2, { className: "max-h-[90vh] sm:max-h-full flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DrawerHeader2, { className: "gap-1 shrink-0", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Drawer2, { open, onOpenChange, direction: isMobile ? "bottom" : "right", children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DrawerHeader2, { className: "gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle2, { children: title }),
         description ? /* @__PURE__ */ jsxRuntime.jsx(DrawerDescription2, { children: description }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "flex min-h-0 flex-1 flex-col overflow-hidden text-sm", onSubmit: handleSubmit, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto px-4 py-2 flex flex-col gap-4", children: fields.map((field) => {
-          var _a, _b, _c;
-          const value = values[field.name];
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Label4, { htmlFor: `form-reports-${field.name}`, children: [
-              field.label,
-              field.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-destructive", children: "*" }) : null
-            ] }),
-            field.type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
-              Textarea2,
-              {
-                id: `form-reports-${field.name}`,
-                value: toInputValue(value),
-                placeholder: field.placeholder,
-                onChange: (event) => setField(field.name, event.target.value),
-                onBlur: (event) => onFieldBlur == null ? void 0 : onFieldBlur(field.name, event.target.value, values),
-                rows: 4
-              }
-            ) : null,
-            field.type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
-              Select2,
-              {
-                value: toInputValue(value),
-                onValueChange: (nextValue) => setField(field.name, nextValue),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger2, { id: `form-reports-${field.name}`, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: (_a = field.placeholder) != null ? _a : `Select ${field.label}` }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent2, { children: ((_b = field.options) != null ? _b : []).map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: option.value, children: option.label }, option.value)) })
-                ]
-              }
-            ) : null,
-            field.type === "boolean" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md border px-3 py-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Checkbox2,
-                {
-                  id: `form-reports-${field.name}`,
-                  checked: Boolean(value),
-                  onCheckedChange: (checked) => setField(field.name, Boolean(checked)),
-                  onBlur: () => onFieldBlur == null ? void 0 : onFieldBlur(field.name, Boolean(value), values)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(Label4, { htmlFor: `form-reports-${field.name}`, children: (_c = field.placeholder) != null ? _c : `Enable ${field.label}` })
-            ] }) : null,
-            field.type === "text" || field.type === "number" || field.type === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
-              Input2,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 overflow-y-auto px-4 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("form", { id: "form-reports-drawer-form", className: "flex flex-col gap-4", onSubmit: handleSubmit, children: fields.map((field) => {
+        var _a, _b, _c;
+        const value = values[field.name];
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Label4, { htmlFor: `form-reports-${field.name}`, children: [
+            field.label,
+            field.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-destructive", children: "*" }) : null
+          ] }),
+          field.type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
+            Textarea2,
+            {
+              id: `form-reports-${field.name}`,
+              value: toInputValue(value),
+              placeholder: field.placeholder,
+              onChange: (event) => setField(field.name, event.target.value),
+              onBlur: (event) => onFieldBlur == null ? void 0 : onFieldBlur(field.name, event.target.value, values),
+              rows: 4
+            }
+          ) : null,
+          field.type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
+            Select2,
+            {
+              value: toInputValue(value),
+              onValueChange: (nextValue) => setField(field.name, nextValue),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger2, { id: `form-reports-${field.name}`, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: (_a = field.placeholder) != null ? _a : `Select ${field.label}` }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent2, { children: ((_b = field.options) != null ? _b : []).map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: option.value, children: option.label }, option.value)) })
+              ]
+            }
+          ) : null,
+          field.type === "boolean" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md border px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox2,
               {
                 id: `form-reports-${field.name}`,
-                type: field.type === "text" ? "text" : field.type,
-                value: toInputValue(value),
-                placeholder: field.placeholder,
-                onChange: (event) => {
-                  const nextValue = field.type === "number" ? event.target.value === "" ? "" : Number(event.target.value) : event.target.value;
-                  setField(field.name, nextValue);
-                },
-                onBlur: (event) => {
-                  const blurValue = field.type === "number" ? event.target.value === "" ? "" : Number(event.target.value) : event.target.value;
-                  onFieldBlur == null ? void 0 : onFieldBlur(field.name, blurValue, values);
-                }
+                checked: Boolean(value),
+                onCheckedChange: (checked) => setField(field.name, Boolean(checked)),
+                onBlur: () => onFieldBlur == null ? void 0 : onFieldBlur(field.name, Boolean(value), values)
               }
-            ) : null,
-            field.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: field.description }) : null
-          ] }, field.name);
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DrawerFooter2, { className: "px-4 py-3 border-t shrink-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "submit", children: submitLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(DrawerClose2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button2,
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Label4, { htmlFor: `form-reports-${field.name}`, children: (_c = field.placeholder) != null ? _c : `Enable ${field.label}` })
+          ] }) : null,
+          field.type === "text" || field.type === "number" || field.type === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
+            Input2,
             {
-              type: "button",
-              variant: "outline",
-              onClick: () => {
-                onCancel == null ? void 0 : onCancel();
-                onOpenChange(false);
+              id: `form-reports-${field.name}`,
+              type: field.type === "text" ? "text" : field.type,
+              value: toInputValue(value),
+              placeholder: field.placeholder,
+              onChange: (event) => {
+                const nextValue = field.type === "number" ? event.target.value === "" ? "" : Number(event.target.value) : event.target.value;
+                setField(field.name, nextValue);
               },
-              children: cancelLabel
+              onBlur: (event) => {
+                const blurValue = field.type === "number" ? event.target.value === "" ? "" : Number(event.target.value) : event.target.value;
+                onFieldBlur == null ? void 0 : onFieldBlur(field.name, blurValue, values);
+              }
             }
-          ) })
-        ] })
+          ) : null,
+          field.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: field.description }) : null
+        ] }, field.name);
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DrawerFooter2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button2, { form: "form-reports-drawer-form", type: "submit", children: submitLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(DrawerClose2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => {
+              onCancel == null ? void 0 : onCancel();
+              onOpenChange(false);
+            },
+            children: cancelLabel
+          }
+        ) })
       ] })
     ] }) });
   }
@@ -14540,7 +14539,7 @@ var FormReportsSection = React3__namespace.memo(
     tableLeftActions,
     enableRowSelection
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
       FormReportsTable,
       {
         items,