ai-design-system 0.1.81 → 0.1.83

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/DataTable/RowDetailDrawer.tsx

@@ -69,12 +69,12 @@ export function RowDetailDrawer({ item, onChange }: RowDetailDrawerProps) {
           {item.header as React.ReactNode}
         </Button>
       </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="gap-1">
+      <DrawerContent className="max-h-[90vh] sm:max-h-full flex flex-col">
+        <DrawerHeader className="gap-1 shrink-0">
           <DrawerTitle>{item.header as React.ReactNode}</DrawerTitle>
           <DrawerDescription>Showing total visitors for the last 6 months</DrawerDescription>
         </DrawerHeader>
-        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+        <div className="flex-1 min-h-0 flex flex-col gap-4 overflow-y-auto px-4 text-sm">
           {open && !isMobile ? (
             <>
               <ChartContainer config={chartConfig} className="h-[220px] w-full">

package/components/composites/FormReports/FormReportsDrawerForm.tsx

@@ -117,107 +117,109 @@ export const FormReportsDrawerForm = React.memo<FormReportsDrawerFormProps>(
             <DrawerTitle>{title}</DrawerTitle>
             {description ? <DrawerDescription>{description}</DrawerDescription> : null}
           </DrawerHeader>
-
-          <form className="flex flex-col gap-4 overflow-y-auto px-4 text-sm" onSubmit={handleSubmit}>
-            {fields.map((field) => {
-              const value = values[field.name]
-
-              return (
-                <div key={field.name} className="flex flex-col gap-2">
-                  <Label htmlFor={`form-reports-${field.name}`}>
-                    {field.label}
-                    {field.required ? <span className="ml-1 text-destructive">*</span> : null}
-                  </Label>
-
-                  {field.type === "textarea" ? (
-                    <Textarea
-                      id={`form-reports-${field.name}`}
-                      value={toInputValue(value)}
-                      placeholder={field.placeholder}
-                      onChange={(event) => setField(field.name, event.target.value)}
-                      onBlur={(event) => onFieldBlur?.(field.name, event.target.value, values)}
-                      rows={4}
-                    />
-                  ) : null}
-
-                  {field.type === "select" ? (
-                    <Select
-                      value={toInputValue(value)}
-                      onValueChange={(nextValue) => setField(field.name, nextValue)}
-                    >
-                      <SelectTrigger id={`form-reports-${field.name}`}>
-                        <SelectValue placeholder={field.placeholder ?? `Select ${field.label}`} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {(field.options ?? []).map((option: FormFieldOption) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  ) : null}
-
-                  {field.type === "boolean" ? (
-                    <div className="flex items-center gap-2 rounded-md border px-3 py-2">
-                      <Checkbox
+          <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]
+
+                return (
+                  <div key={field.name} className="flex flex-col gap-2">
+                    <Label htmlFor={`form-reports-${field.name}`}>
+                      {field.label}
+                      {field.required ? <span className="ml-1 text-destructive">*</span> : null}
+                    </Label>
+
+                    {field.type === "textarea" ? (
+                      <Textarea
+                        id={`form-reports-${field.name}`}
+                        value={toInputValue(value)}
+                        placeholder={field.placeholder}
+                        onChange={(event) => setField(field.name, event.target.value)}
+                        onBlur={(event) => onFieldBlur?.(field.name, event.target.value, values)}
+                        rows={4}
+                      />
+                    ) : null}
+
+                    {field.type === "select" ? (
+                      <Select
+                        value={toInputValue(value)}
+                        onValueChange={(nextValue) => setField(field.name, nextValue)}
+                      >
+                        <SelectTrigger id={`form-reports-${field.name}`}>
+                          <SelectValue placeholder={field.placeholder ?? `Select ${field.label}`} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {(field.options ?? []).map((option: FormFieldOption) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    ) : null}
+
+                    {field.type === "boolean" ? (
+                      <div className="flex items-center gap-2 rounded-md border px-3 py-2">
+                        <Checkbox
+                          id={`form-reports-${field.name}`}
+                          checked={Boolean(value)}
+                          onCheckedChange={(checked) => setField(field.name, Boolean(checked))}
+                          onBlur={() => onFieldBlur?.(field.name, Boolean(value), values)}
+                        />
+                        <Label htmlFor={`form-reports-${field.name}`}>{field.placeholder ?? `Enable ${field.label}`}</Label>
+                      </div>
+                    ) : null}
+
+                    {field.type === "text" || field.type === "number" || field.type === "date" ? (
+                      <Input
                         id={`form-reports-${field.name}`}
-                        checked={Boolean(value)}
-                        onCheckedChange={(checked) => setField(field.name, Boolean(checked))}
-                        onBlur={() => onFieldBlur?.(field.name, Boolean(value), values)}
+                        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?.(field.name, blurValue, values)
+                        }}
                       />
-                      <Label htmlFor={`form-reports-${field.name}`}>{field.placeholder ?? `Enable ${field.label}`}</Label>
-                    </div>
-                  ) : null}
-
-                  {field.type === "text" || field.type === "number" || field.type === "date" ? (
-                    <Input
-                      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?.(field.name, blurValue, values)
-                      }}
-                    />
-                  ) : null}
-
-                  {field.description ? <p className="text-xs text-muted-foreground">{field.description}</p> : null}
-                </div>
-              )
-            })}
-
-            <DrawerFooter className="px-0">
-              <Button type="submit">{submitLabel}</Button>
-              <DrawerClose asChild>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => {
-                    onCancel?.()
-                    onOpenChange(false)
-                  }}
-                >
-                  {cancelLabel}
-                </Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </form>
+                    ) : null}
+
+                    {field.description ? <p className="text-xs text-muted-foreground">{field.description}</p> : null}
+                  </div>
+                )
+              })}
+            </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

@@ -9607,12 +9607,12 @@ function RowDetailDrawer({ item, onChange }) {
   const [open, setOpen] = React3__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(Drawer2, { open, onOpenChange: setOpen, direction: isMobile ? "bottom" : "right", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DrawerTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "link", className: "w-fit px-0 text-left text-foreground", children: item.header }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DrawerHeader2, { className: "gap-1", 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: [
         /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle2, { children: item.header }),
         /* @__PURE__ */ jsxRuntime.jsx(DrawerDescription2, { children: "Showing total visitors for the last 6 months" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto px-4 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-0 flex flex-col gap-4 overflow-y-auto px-4 text-sm", children: [
         open && !isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ChartContainer2, { config: chartConfig, className: "h-[220px] w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.AreaChart, { data: chartData, margin: { left: 0, right: 10 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { vertical: false }),
@@ -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)));
@@ -10454,84 +10455,82 @@ var FormReportsDrawerForm = React3__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle2, { children: title }),
         description ? /* @__PURE__ */ jsxRuntime.jsx(DrawerDescription2, { children: description }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "flex flex-col gap-4 overflow-y-auto px-4 text-sm", 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}`,
-                  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-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
+          }
+        ) })
       ] })
     ] }) });
   }