ai-design-system 0.1.80 → 0.1.82

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>
       )

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

@@ -112,97 +112,99 @@ export const FormReportsDrawerForm = React.memo<FormReportsDrawerFormProps>(
 
     return (
       <Drawer open={open} onOpenChange={onOpenChange} direction={isMobile ? "bottom" : "right"}>
-        <DrawerContent>
-          <DrawerHeader className="gap-1">
+        <DrawerContent className="max-h-[90vh] sm:max-h-full flex flex-col">
+          <DrawerHeader className="gap-1 shrink-0">
             <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
+          <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">
+              {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">
+                    ) : null}
+
+                    {field.description ? <p className="text-xs text-muted-foreground">{field.description}</p> : null}
+                  </div>
+                )
+              })}
+            </div>
+
+            <DrawerFooter className="px-4 py-3 border-t shrink-0">
               <Button type="submit">{submitLabel}</Button>
               <DrawerClose asChild>
                 <Button

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 }),
@@ -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)));
@@ -10438,13 +10449,13 @@ var FormReportsDrawerForm = React3__namespace.memo(
       },
       [onSubmit, values]
     );
-    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: [
+    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: [
         /* @__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) => {
+      /* @__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: [
@@ -10505,8 +10516,8 @@ var FormReportsDrawerForm = React3__namespace.memo(
             ) : 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.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,