najm-kit 0.0.29 → 0.0.31

package/dist/index.d.ts

@@ -2139,6 +2139,7 @@ interface WizardClassNames {
     indicator?: string;
     progressBar?: string;
 }
+type WizardFooterDivider = boolean | "none" | "solid" | "dashed" | "dotted";
 interface WizardFormProps {
     steps: StepConfig[];
     schema: any;
@@ -2157,6 +2158,8 @@ interface WizardFormProps {
     className?: string;
     classNames?: WizardClassNames;
     footerSlot?: ReactNode;
+    footerDivider?: WizardFooterDivider;
+    footerDividerClassName?: string;
     children?: ReactNode;
 }
 interface StepMeta {
@@ -2165,7 +2168,7 @@ interface StepMeta {
     title: string;
 }
 
-declare function WizardForm({ steps, schema, defaultValues, onSubmit, currentStep: controlledStep, onCurrentStepChange, onStepComplete, showHeader, showFooter, nextLabel, previousLabel, submitLabel, variant, bordered, className, classNames, footerSlot, }: WizardFormProps): react_jsx_runtime.JSX.Element;
+declare function WizardForm({ steps, schema, defaultValues, onSubmit, currentStep: controlledStep, onCurrentStepChange, onStepComplete, showHeader, showFooter, nextLabel, previousLabel, submitLabel, variant, bordered, className, classNames, footerSlot, footerDivider, footerDividerClassName, }: WizardFormProps): react_jsx_runtime.JSX.Element;
 
 interface StepIndicatorProps {
     stepNumber: number;

package/dist/index.mjs

@@ -1090,7 +1090,7 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
+        outline: "border border-input shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
@@ -1622,7 +1622,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-card px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-card px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "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",
         className
@@ -1637,7 +1637,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       ),
       ...props
@@ -2978,7 +2978,7 @@ function Checkbox({ className, ...props }) {
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer border-foreground/40 dark:border-foreground/50 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer cursor-pointer border-foreground/40 dark:border-foreground/50 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -3873,7 +3873,7 @@ function CommandItem({ className, ...props }) {
     Command$1.Item,
     {
       "data-slot": "command-item",
-      className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 [&>svg.opacity-0:first-child]:hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       ...props
     }
   );
@@ -4130,7 +4130,7 @@ function FormMessage({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-[0.8rem] font-medium", className), ...props, children: body });
 }
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full", children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full", children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm text-foreground", className), ...props }) });
 }
 function TableHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b [&_tr]:border-border/40", className), ...props });
@@ -4148,7 +4148,7 @@ function TableHead({ className, ...props }) {
   return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("text-foreground h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("px-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
+  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("px-3 align-middle whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
@@ -5081,7 +5081,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                       onClose();
                     },
                     className: cn(
-                      "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:opacity-40 disabled:cursor-not-allowed",
+                      "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-40",
                       item.danger && "text-destructive hover:text-destructive"
                     ),
                     children: [
@@ -5107,7 +5107,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                         onClose();
                       },
                       className: cn(
-                        "flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:opacity-40",
+                        "flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-40",
                         sub.danger && "text-destructive hover:text-destructive"
                       ),
                       children: [
@@ -5691,7 +5691,7 @@ var PRESETS2 = {
   destructive: "border-red-600"
 };
 var inputVariants = cva(
-  "relative w-full flex items-center h-10 bg-card overflow-hidden transition-colors",
+  "relative w-full flex items-center h-10 bg-card text-foreground overflow-hidden transition-colors",
   {
     variants: {
       variant: {
@@ -5766,7 +5766,7 @@ var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, ico
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground", disabled, ...props })
+    /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props })
   ] });
 };
 var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
@@ -5774,7 +5774,7 @@ var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, i
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" })
+    /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground" })
   ] });
 };
 var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
@@ -5783,20 +5783,39 @@ var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true,
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground" }),
     showPassword ? /* @__PURE__ */ jsx(Eye, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(false) }) : /* @__PURE__ */ jsx(EyeOff, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(true) })
   ] });
 };
-var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderColor, rows }) => /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("items-start", className), children: /* @__PURE__ */ jsx(
-  Textarea,
-  {
-    rows,
-    placeholder,
-    value,
-    onChange: (ev) => onChange(ev.target.value),
-    className: "h-full border-0 bg-transparent p-0 text-muted-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 dark:bg-transparent"
-  }
-) });
+var DEFAULT_ROWS = 3;
+var MIN_ROWS = 2;
+var REM_PER_ROW = 1.5;
+var VERTICAL_PADDING_REM = 1;
+var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderColor, rows }) => {
+  const visibleRows = Math.max(rows ?? DEFAULT_ROWS, MIN_ROWS);
+  const minHeight = `${visibleRows * REM_PER_ROW + VERTICAL_PADDING_REM}rem`;
+  return /* @__PURE__ */ jsx(
+    BaseInput,
+    {
+      variant,
+      status,
+      bordered,
+      borderColor,
+      className: cn("h-auto items-start", className),
+      style: { minHeight },
+      children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          rows: visibleRows,
+          placeholder,
+          value,
+          onChange: (ev) => onChange(ev.target.value),
+          className: "h-full min-h-0 resize-y border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 dark:bg-transparent"
+        }
+      )
+    }
+  );
+};
 function renderItems(items) {
   return items.map((item) => {
     const value = typeof item === "string" ? item : item.value;
@@ -6012,7 +6031,7 @@ var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "",
   const toDateString = (date) => date?.toISOString().split("T")[0];
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", !value && "text-foreground"), children: /* @__PURE__ */ jsx(Label, { className: "text-muted-foreground cursor-pointer", children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: typeof value === "string" ? new Date(value) : value, onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
@@ -6033,13 +6052,13 @@ var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIc
     const filename = typeof value === "string" ? value.split(/[\\/]/).pop() || "" : value.name;
     return truncateFilename(filename);
   };
-  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex px-0 p-0 text-muted-foreground", className), onClick: () => fileInputRef.current?.click(), children: [
+  return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex px-0 p-0", className), onClick: () => fileInputRef.current?.click(), children: [
     /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, onChange: (e) => onChange(e.target.files?.[0] || null), className: "hidden" }),
     /* @__PURE__ */ jsxs("div", { className: "bg-muted flex h-full items-center px-3", children: [
       showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(FileUp, { className: cn(iconProps.className) })),
       /* @__PURE__ */ jsx(Label, { className: "flex cursor-pointer h-full justify-center items-center px-2 text-muted-foreground", children: "Choose File" })
     ] }),
-    /* @__PURE__ */ jsx(Label, { className: "ml-2 flex-1", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
+    /* @__PURE__ */ jsx(Label, { className: "ml-2 flex-1 text-foreground", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
   ] });
 };
 function formatBytes2(bytes) {
@@ -6858,7 +6877,7 @@ var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true
     showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(Clock, { className: iconProps.className, style: iconProps.style })),
     /* @__PURE__ */ jsx(Input, { type: "text", placeholder: placeholder || (showSeconds ? "HH:MM:SS" : "HH:MM"), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onKeyDown: (e) => {
       if (!/\d/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) e.preventDefault();
-    }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0", !isValid ? "text-red-500" : "text-muted-foreground") })
+    }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 placeholder:text-muted-foreground", !isValid ? "text-red-500" : "text-foreground") })
   ] });
 };
 var RANGE_COLOR = {
@@ -7744,6 +7763,12 @@ function issuePath(issue) {
 function matchesFieldPath(path, field) {
   return path === field || path.startsWith(`${field}.`) || field.startsWith(`${path}.`);
 }
+function footerDividerClass(divider = "none") {
+  if (divider === false || divider === "none") return "border-t-0";
+  if (divider === "dashed") return "border-t border-dashed border-border";
+  if (divider === "dotted") return "border-t border-dotted border-border";
+  return "border-t border-solid border-border";
+}
 function WizardForm({
   steps,
   schema,
@@ -7761,7 +7786,9 @@ function WizardForm({
   bordered,
   className,
   classNames,
-  footerSlot
+  footerSlot,
+  footerDivider = "none",
+  footerDividerClassName
 }) {
   const nav = useStepNavigation({
     steps,
@@ -7876,13 +7903,25 @@ function WizardForm({
             ]
           }
         ) }) }),
-        showFooter && /* @__PURE__ */ jsxs("div", { className: cn("sticky bottom-0 z-10 mt-auto flex shrink-0 items-center justify-between border-t border-border bg-background/95 pt-3 backdrop-blur", classNames?.footer), children: [
-          /* @__PURE__ */ jsx("div", { children: !nav.isFirstStep && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: nav.handlePrevious, children: previousLabel }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            footerSlot,
-            nav.isLastStep ? /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: submitLabel }) : /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: nextLabel })
-          ] })
-        ] })
+        showFooter && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-najm-wizard-footer": "true",
+            className: cn(
+              "sticky bottom-0 z-10 mt-auto flex shrink-0 items-center justify-between bg-background/95 pt-3 backdrop-blur",
+              footerDividerClass(footerDivider),
+              footerDividerClassName,
+              classNames?.footer
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { children: !nav.isFirstStep && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: nav.handlePrevious, children: previousLabel }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                footerSlot,
+                nav.isLastStep ? /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: submitLabel }) : /* @__PURE__ */ jsx(Button, { type: "submit", form: `step-${currentStepConfig.id}`, children: nextLabel })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -8745,7 +8784,7 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
       onContextMenu,
       style: recipeStyle,
       className: cn(
-        "relative group w-full rounded-lg bg-card",
+        "relative group w-full rounded-lg bg-card overflow-hidden",
         surfaceBorderClasses(bordered),
         isActive && (bordered ? "border-primary" : "ring-2 ring-primary ring-offset-1 ring-offset-background"),
         onClick && "cursor-pointer",
@@ -8947,7 +8986,7 @@ function NTableCards({ effectiveMode }) {
                   e.stopPropagation();
                   openRowMenu(e, row.original);
                 },
-                className: "absolute top-2 right-2 z-10 flex h-7 w-7 items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
+                className: "absolute top-2 right-2 z-10 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground opacity-0 transition-all duration-200 hover:bg-muted/50 hover:text-foreground group-hover:opacity-100 focus:opacity-100 focus-visible:opacity-100",
                 children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
               }
             ),
@@ -9043,36 +9082,36 @@ function NTablePagination() {
     const newSize = Number(value);
     setPagination({ pageIndex: 0, pageSize: newSize });
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-4", classNames?.pagination), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 lg:gap-6", children: [
-      (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows/page" }),
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 py-1 text-foreground", classNames?.pagination), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-4 lg:gap-6", children: [
+      (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-foreground", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Rows/page" }),
         /* @__PURE__ */ jsxs(Select, { value: `${pageSize}`, onValueChange: handlePageSizeChange, children: [
           /* @__PURE__ */ jsx(
             SelectTrigger,
             {
               "data-bordered": bordered ? "true" : void 0,
-              className: cn("h-8 w-[80px]", bordered && "najm-border border-border"),
+              className: cn("h-8 w-[80px] text-foreground", bordered && "najm-border border-border"),
               children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize })
             }
           ),
           /* @__PURE__ */ jsx(SelectContent, { side: "top", children: currentPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-foreground", children: [
         "Page ",
         pageIndex + 1,
         " of ",
         effectivePageCount
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 hidden lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-none whitespace-nowrap text-sm text-muted-foreground max-sm:hidden", children: [
       selectedRows.length,
       " of ",
       manualPagination && rowCount !== void 0 ? rowCount : filteredRows.length,
@@ -9338,7 +9377,7 @@ function NTableJson() {
   if (viewMode !== "json") return null;
   return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
 }
-var DEFAULT_ROWS = 6;
+var DEFAULT_ROWS2 = 6;
 function NTableHeaderSkeleton() {
   const filters = useTableStore.use.filters();
   const showViewToggle = useTableStore.use.showViewToggle();
@@ -9363,7 +9402,7 @@ function NTableHeaderSkeleton() {
     ] })
   ] });
 }
-function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
+function NTableLoadingSkeleton({ rows = DEFAULT_ROWS2 }) {
   const columns = useTableStore.use.columns();
   const showCheckbox = useTableStore.use.showCheckbox();
   const headerClassName = useTableStore.use.headerClassName();
@@ -9418,7 +9457,7 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
     )
   ] });
 }
-function NTableCardsLoadingSkeleton({ rows = 8 }) {
+function NTableCardsLoadingSkeleton({ rows }) {
   const filters = useTableStore.use.filters();
   const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
@@ -9430,18 +9469,21 @@ function NTableCardsLoadingSkeleton({ rows = 8 }) {
   );
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
+  const calculatedPageSize = useTableStore.use.calculatedPageSize();
+  const pagination = useTableStore.use.pagination();
+  const cardCount = rows ?? Math.max(1, calculatedPageSize || pagination?.pageSize || 10);
   return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
     hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(NajmScroll, { axis: "y", className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
       "div",
       {
         "data-testid": "ntable-cards-loading-skeleton",
         "aria-busy": "true",
         className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", classNames?.cards),
-        children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(
+        children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
           Card,
           {
-            className: cn("rounded-lg bg-card p-4 shadow-none", bordered ? "border" : "border border-border"),
+            className: cn("rounded-lg bg-card p-4 shadow-none", surfaceBorderClasses(bordered)),
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
               /* @__PURE__ */ jsx(NSkeleton, { className: "h-12 w-12 shrink-0 rounded-full" }),
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
@@ -9460,7 +9502,7 @@ function NTableCardsLoadingSkeleton({ rows = 8 }) {
           index
         ))
       }
-    )
+    ) })
   ] });
 }
 function TableStateSlot({ children }) {
@@ -9546,7 +9588,7 @@ function TableLayout(props) {
       /* @__PURE__ */ jsx(NTableCards, { effectiveMode }),
       /* @__PURE__ */ jsx(NTableJson, {})
     ] }) }),
-    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "shrink-0", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
+    /* @__PURE__ */ jsx("div", { "data-ntable-pagination": true, className: "min-w-0 shrink-0 bg-background text-foreground", children: /* @__PURE__ */ jsx(NTablePagination, {}) })
   ] });
 }
 function NTable(props) {
@@ -9629,8 +9671,7 @@ function NTable(props) {
     [onRowContextMenu]
   );
   const autoOpenRowMenu = effectiveRowMenu ? handleOpenRowMenu : onRowContextMenu ? handleManualRowMenu : null;
-  const shouldCollapseActions = props.columns.length > 5;
-  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? shouldCollapseActions);
+  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? true);
   const store = useStoreSync({
     data: props.data ?? [],
     columns: props.columns ?? [],

package/dist/json.mjs

@@ -368,7 +368,7 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50",
+        outline: "border border-input shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",

package/dist/theme.css

@@ -289,17 +289,19 @@
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space. */
 .os-theme-najm {
-  --os-size: 10px;
+  --os-size: 8px;
   --os-padding-perpendicular: 2px;
   --os-padding-axis: 2px;
+  --os-track-bg: transparent;
   --os-track-border-radius: 9999px;
   --os-handle-border-radius: 9999px;
-  --os-handle-bg: rgba(148, 163, 184, 0.3);
-  --os-handle-bg-hover: rgba(148, 163, 184, 0.45);
-  --os-handle-bg-active: rgba(148, 163, 184, 0.6);
+  --os-handle-bg: rgba(203, 213, 225, 0.08);
+  --os-handle-bg-hover: rgba(100, 116, 139, 0.32);
+  --os-handle-bg-active: rgba(71, 85, 105, 0.42);
   --os-handle-min-size: 33px;
-  --os-handle-perpendicular-size: 60%;
-  --os-handle-perpendicular-size-hover: 90%;
+  --os-handle-perpendicular-size: 3px;
+  --os-handle-perpendicular-size-hover: 5px;
+  --os-handle-perpendicular-size-active: 5px;
 }
 
 /* Darker, more subtle handle in dark mode */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",