najm-kit 0.0.28 → 0.0.30

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;
@@ -2228,9 +2231,16 @@ interface UseFormSubmissionOptions {
 }
 interface FormSubmissionState {
     formDataRef: React.MutableRefObject<Record<string, any>>;
-    handleStepSubmit: (stepData: any) => Promise<void>;
+    handleStepSubmit: (stepData: any) => Promise<StepSubmitResult>;
     getStepDefaultValues: (stepId: string) => Record<string, any>;
 }
+type StepSubmitResult = {
+    ok: true;
+} | {
+    ok: false;
+    error: any;
+    data: Record<string, any>;
+};
 declare function useFormSubmission({ steps, schema, defaultValues, onSubmit, currentStep, isLastStep, handleNext, markStepCompleted, reset, }: UseFormSubmissionOptions): FormSubmissionState;
 
 interface NTableClassNames {

package/dist/index.mjs

@@ -5787,16 +5787,35 @@ var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true,
     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-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;
@@ -7709,25 +7728,47 @@ function useFormSubmission({
       if (stepId) {
         formDataRef.current = { ...formDataRef.current, ...stepData };
       }
-      markStepCompleted(currentStep - 1);
       if (!isLastStep) {
+        markStepCompleted(currentStep - 1);
         handleNext();
+        return { ok: true };
       } else {
         const fullData = { ...formDataRef.current };
+        let submitData = fullData;
         if (schema?.parse) {
-          const validated = schema.parse(fullData);
-          await onSubmit(validated);
-        } else {
-          await onSubmit(fullData);
+          const result = schema.safeParse?.(fullData);
+          if (result) {
+            if (!result.success) {
+              return { ok: false, error: result.error, data: fullData };
+            }
+            submitData = result.data;
+          } else {
+            submitData = schema.parse(fullData);
+          }
         }
+        await onSubmit(submitData);
+        markStepCompleted(currentStep - 1);
         reset();
-        formDataRef.current = {};
+        formDataRef.current = defaultValues ?? {};
+        return { ok: true };
       }
     },
-    [steps, currentStep, isLastStep, schema, onSubmit, handleNext, markStepCompleted, reset]
+    [steps, currentStep, isLastStep, schema, onSubmit, handleNext, markStepCompleted, reset, defaultValues]
   );
   return { formDataRef, handleStepSubmit, getStepDefaultValues };
 }
+function issuePath(issue) {
+  return issue.path?.map(String).join(".") ?? "";
+}
+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,
@@ -7745,7 +7786,9 @@ function WizardForm({
   bordered,
   className,
   classNames,
-  footerSlot
+  footerSlot,
+  footerDivider = "none",
+  footerDividerClassName
 }) {
   const nav = useStepNavigation({
     steps,
@@ -7765,6 +7808,15 @@ function WizardForm({
   });
   const currentStepConfig = nav.currentStepConfig;
   const stepDefaults = getStepDefaultValues(currentStepConfig.id);
+  const pendingIssuesRef = useRef(null);
+  const getIssueStepIndex = (issue) => {
+    const path = issuePath(issue);
+    if (!path) return nav.currentStep - 1;
+    const stepIndex = steps.findIndex(
+      (step) => step.fields?.some((field) => matchesFieldPath(path, field))
+    );
+    return stepIndex >= 0 ? stepIndex : nav.currentStep - 1;
+  };
   const stepSchema = useMemo(() => {
     if (currentStepConfig.schema) return currentStepConfig.schema;
     if (currentStepConfig.fields && schema?.pick) {
@@ -7781,16 +7833,52 @@ function WizardForm({
     const newDefaults = getStepDefaultValues(currentStepConfig.id);
     form.reset(newDefaults);
   }, [nav.currentStep, currentStepConfig.id]);
+  useEffect(() => {
+    const pending = pendingIssuesRef.current;
+    if (!pending || pending.stepIndex !== nav.currentStep - 1) return;
+    pendingIssuesRef.current = null;
+    pending.issues.forEach((issue, index) => {
+      const name = issuePath(issue) || "root";
+      form.setError(
+        name,
+        { type: "validate", message: issue.message ?? "Invalid value" },
+        { shouldFocus: index === 0 }
+      );
+    });
+  }, [nav.currentStep, currentStepConfig.id, form]);
   const handleSubmit = async (data) => {
     onStepComplete?.(nav.currentStep - 1, data);
-    await handleStepSubmit(data);
+    const result = await handleStepSubmit(data);
+    if (result.ok === true) return;
+    const issues = Array.isArray(result.error?.issues) ? result.error.issues : [];
+    if (issues.length === 0) {
+      throw result.error;
+    }
+    const targetStepIndex = getIssueStepIndex(issues[0]);
+    const targetIssues = issues.filter((issue) => getIssueStepIndex(issue) === targetStepIndex);
+    if (targetStepIndex === nav.currentStep - 1) {
+      pendingIssuesRef.current = { stepIndex: targetStepIndex, issues: targetIssues };
+      const pending = pendingIssuesRef.current;
+      pendingIssuesRef.current = null;
+      pending.issues.forEach((issue, index) => {
+        const name = issuePath(issue) || "root";
+        form.setError(
+          name,
+          { type: "validate", message: issue.message ?? "Invalid value" },
+          { shouldFocus: index === 0 }
+        );
+      });
+      return;
+    }
+    pendingIssuesRef.current = { stepIndex: targetStepIndex, issues: targetIssues };
+    nav.goToStep(targetStepIndex + 1);
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-najm-wizard-form": "true",
       "data-najm-dialog-actions": "content",
-      className: cn("flex w-full flex-col gap-4", classNames?.root, className),
+      className: cn("flex min-h-full w-full flex-col gap-4", classNames?.root, className),
       children: [
         showHeader && /* @__PURE__ */ jsx(
           StepsHeader,
@@ -7807,7 +7895,7 @@ function WizardForm({
           {
             id: `step-${currentStepConfig.id}`,
             onSubmit: form.handleSubmit(handleSubmit),
-            className: cn("flex flex-col gap-4", classNames?.step),
+            className: cn("min-h-0 flex-1 overflow-y-auto pb-4 flex flex-col gap-4", classNames?.step),
             autoComplete: "off",
             children: [
               currentStepConfig.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: currentStepConfig.description }),
@@ -7815,13 +7903,25 @@ function WizardForm({
             ]
           }
         ) }) }),
-        showFooter && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", 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 })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
@@ -9277,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();
@@ -9302,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();

package/package.json

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