najm-kit 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.8.1 - 2026-08-08
+
+- Added schema-driven form development tools to `NajmAppProvider`. Passing
+  `formDevTools` enables F8 filling for every `NForm` and `WizardForm` without
+  an application helper or additional provider.
+- Added built-in Zod 4 form-value generation with per-form overrides for
+  relation fields and other application-owned values. Existing explicit
+  `devTools.enabled` and `devTools.fill` usage remains supported.
+
 ## 2.8.0 - 2026-08-08
 
 - Added server-safe `najm-kit/format` helpers for currency minor units,

package/README.md

@@ -123,7 +123,7 @@ Changing the state updates the complete theme immediately. Use
 `stringifyNajmThemeConfig(theme)` when persisting it, and parse settings loaded
 from an API or local storage with `parseNajmThemeConfig` before applying them.
 
-## Components
+## Components
 
 Import from `najm-kit`:
 
@@ -145,7 +145,42 @@ import { Form, FormInput, useNForm } from 'najm-kit';
 | Feedback | Alert, Badge, Progress, Spinner, Toast |
 | Layout | Card, Sheet, Dialog, Popover, DropdownMenu, Tabs |
 | Data | Table (NTable), StatCard, DetailList |
-| Overlays | Command palette, Tooltip, Toast |
+| Overlays | Command palette, Tooltip, Toast |
+
+## Global form development tools
+
+Enable schema-driven test values once on the full application provider. Every
+`NForm` and `WizardForm` below it then fills from its Zod schema when F8 is
+pressed; applications do not need a second provider or a form-fill helper.
+
+```tsx
+import { NajmAppProvider } from "najm-kit/app";
+
+<NajmAppProvider formDevTools>
+  <App />
+</NajmAppProvider>;
+```
+
+Pass a boolean to control it from application settings:
+
+```tsx
+<NajmAppProvider formDevTools={formFillEnabled}>
+  <App />
+</NajmAppProvider>
+```
+
+Forms with live relation options can override only those fields. The provider
+still owns enablement and Najm Kit still owns schema traversal and generation.
+
+```tsx
+<NForm
+  schema={orderSchema}
+  devTools={{ overrides: { customerId: customerOptions } }}
+  onSubmit={saveOrder}
+>
+  {/* fields */}
+</NForm>
+```
 
 ## ImageInput and AvatarInput
 

package/dist/adapters/app.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Translations } from 'najm-i18n';
-import { N as NBrandingInput } from '../NBrandingContext-dkADu8JS.js';
+import { F as FormDevToolsOptions, N as NBrandingInput } from '../formFill-BcH-m9Kf.js';
 import { NajmNextUIProviderProps } from './next.js';
 import 'react';
+import 'zod';
 import '../NajmUIProvider-BSbXaqak.js';
 import '../paginationLabels-dZLSNxfo.js';
 
@@ -13,6 +14,11 @@ interface NajmAppBranding {
     logoCollapsed?: string | null;
 }
 interface NajmAppProviderProps extends Omit<NajmNextUIProviderProps, 't'> {
+    /**
+     * Enables schema-driven form filling for every `NForm` and `WizardForm`.
+     * `true` uses F8; an options object can choose another shortcut.
+     */
+    formDevTools?: boolean | FormDevToolsOptions;
     /**
      * Catalog for `najm-i18n`. Supplying it mounts an `I18nProvider` and derives
      * the pagination labels from it, so `t` is not a prop here — the provider
@@ -99,6 +105,6 @@ interface NajmAppProviderProps extends Omit<NajmNextUIProviderProps, 't'> {
  * state machine of its own above this provider. The controlled `design` and
  * `branding` props still work for applications that already do.
  */
-declare function NajmAppProvider({ translations, initialLanguage, defaultLanguage, languageEndpoint, appName, initialBranding, ...props }: NajmAppProviderProps): react_jsx_runtime.JSX.Element;
+declare function NajmAppProvider({ translations, initialLanguage, defaultLanguage, languageEndpoint, appName, initialBranding, formDevTools, ...props }: NajmAppProviderProps): react_jsx_runtime.JSX.Element;
 
 export { type NajmAppBranding, NajmAppProvider, type NajmAppProviderProps };

package/dist/adapters/app.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { NBrandingStateProvider, NajmFormatProvider } from '../chunk-PCPMAEKP.mjs';
+import { FormDevToolsProvider, NBrandingStateProvider, NajmFormatProvider } from '../chunk-GHMR45H3.mjs';
 import { NajmNextUIProvider } from '../chunk-IRFFSAO2.mjs';
 import '../chunk-USZUOJMK.mjs';
 import '../chunk-KVZACF4G.mjs';
@@ -72,6 +72,7 @@ function NajmAppProvider({
   languageEndpoint = DEFAULT_LANGUAGE_ENDPOINT,
   appName,
   initialBranding,
+  formDevTools,
   ...props
 }) {
   const persistLanguage = React.useCallback(
@@ -91,8 +92,10 @@ function NajmAppProvider({
     [languageEndpoint]
   );
   const seeded = appName ? { appName, ...initialBranding } : initialBranding;
-  if (!translations) return /* @__PURE__ */ jsx(NajmAppNoI18n, { ...props, initialBranding: seeded });
-  return /* @__PURE__ */ jsx(
+  if (!translations) {
+    return /* @__PURE__ */ jsx(FormDevToolsProvider, { value: formDevTools, children: /* @__PURE__ */ jsx(NajmAppNoI18n, { ...props, initialBranding: seeded }) });
+  }
+  return /* @__PURE__ */ jsx(FormDevToolsProvider, { value: formDevTools, children: /* @__PURE__ */ jsx(
     I18nProvider,
     {
       translations,
@@ -101,7 +104,7 @@ function NajmAppProvider({
       onLanguageChange: persistLanguage,
       children: /* @__PURE__ */ jsx(NajmAppUI, { ...props, initialBranding: seeded })
     }
-  );
+  ) });
 }
 
 export { NajmAppProvider };

package/dist/chunk-GHMR45H3.mjs

@@ -0,0 +1,333 @@
+import { useNajmPreferencesContext } from './chunk-USZUOJMK.mjs';
+import { humanizeToken, DEFAULT_PLACEHOLDER, formatRelativeTime, formatTime, formatDateTime, formatDate, formatPercent, formatNumber, formatCurrency } from './chunk-JABLSOQN.mjs';
+import * as React2 from 'react';
+import { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function normalizeBranding(input) {
+  if (!input) return {};
+  const value = {};
+  const expanded = input.logoExpanded ?? input.sidebarLogoExpandedPath;
+  const collapsed = input.logoCollapsed ?? input.sidebarLogoCollapsedPath;
+  if (input.appName !== void 0) value.appName = input.appName;
+  if (input.logoFallback !== void 0) value.logoFallback = input.logoFallback;
+  if (input.logoHref !== void 0) value.logoHref = input.logoHref;
+  if (expanded !== void 0) value.logoExpanded = expanded;
+  if (collapsed !== void 0) value.logoCollapsed = collapsed;
+  return value;
+}
+var NBrandingContext = createContext(null);
+function useNBranding() {
+  return useContext(NBrandingContext);
+}
+function NBrandingProvider({
+  children,
+  appName,
+  logoExpanded,
+  logoCollapsed,
+  logoFallback,
+  logoHref
+}) {
+  const value = useMemo(
+    () => ({ appName, logoExpanded, logoCollapsed, logoFallback, logoHref }),
+    [appName, logoExpanded, logoCollapsed, logoFallback, logoHref]
+  );
+  return /* @__PURE__ */ jsx(NBrandingContext.Provider, { value, children });
+}
+var NBrandingEditorContext = createContext(null);
+function useNBrandingEditor() {
+  return useContext(NBrandingEditorContext);
+}
+function NBrandingStateProvider({
+  children,
+  branding,
+  initialBranding
+}) {
+  const [state, setState] = useState(
+    () => normalizeBranding(initialBranding ?? branding)
+  );
+  const setBranding = useCallback((patch) => {
+    const marks = normalizeBranding(patch);
+    setState((current) => ({ ...current, ...marks }));
+  }, []);
+  const controlled = useMemo(
+    () => branding ? normalizeBranding(branding) : void 0,
+    [branding]
+  );
+  const resolved = controlled ?? state;
+  const editor = useMemo(
+    () => ({ branding: resolved, setBranding: branding ? noop : setBranding }),
+    [resolved, branding, setBranding]
+  );
+  return /* @__PURE__ */ jsx(NBrandingEditorContext.Provider, { value: editor, children: /* @__PURE__ */ jsx(NBrandingProvider, { ...resolved, children }) });
+}
+function noop() {
+}
+
+// src/components/form/formFill.ts
+var CITIES = ["Casablanca", "Rabat", "Marrakesh", "Tangier"];
+var SCHOOL_LEVELS = ["Primary", "Middle school", "Secondary school"];
+var CLOTHING_SIZES = ["6 years", "8 years", "10 years", "12 years"];
+function pick(values) {
+  if (values.length === 0) return void 0;
+  return values[Math.floor(Math.random() * values.length)];
+}
+function randomDigits(length) {
+  return Array.from({ length }, () => Math.floor(Math.random() * 10)).join("");
+}
+function randomToken(length = 8) {
+  const alphabet = "abcdefghijklmnopqrstuvwxyz0123456789";
+  return Array.from(
+    { length },
+    () => alphabet[Math.floor(Math.random() * alphabet.length)]
+  ).join("");
+}
+function asZodLike(schema) {
+  return schema && typeof schema === "object" ? schema : void 0;
+}
+function definition(schema) {
+  const current = asZodLike(schema);
+  return current?._def ?? current?.def ?? {};
+}
+function schemaKind(schema) {
+  const currentDefinition = definition(schema);
+  const raw = currentDefinition.typeName ?? currentDefinition.type;
+  if (typeof raw !== "string") return "";
+  return raw.replace(/^Zod/, "").toLowerCase();
+}
+function unwrap(schema) {
+  const seen = /* @__PURE__ */ new Set();
+  let current = asZodLike(schema);
+  while (current && !seen.has(current)) {
+    seen.add(current);
+    const kind = schemaKind(current);
+    const currentDefinition = definition(current);
+    const inner = currentDefinition.innerType ?? currentDefinition.schema ?? (kind === "pipe" ? currentDefinition.out ?? currentDefinition.in : void 0);
+    if (!inner || typeof inner !== "object") break;
+    current = inner;
+  }
+  return current;
+}
+function objectShape(schema) {
+  const current = unwrap(schema);
+  if (schemaKind(current) !== "object") return null;
+  const shape = current?.shape ?? definition(current).shape;
+  return typeof shape === "function" ? shape() : shape ?? null;
+}
+function arrayElement(schema) {
+  const current = unwrap(schema);
+  if (schemaKind(current) !== "array") return null;
+  const currentDefinition = definition(current);
+  const element = current?.element ?? currentDefinition.element ?? currentDefinition.type;
+  return element && typeof element === "object" ? element : null;
+}
+function enumValues(schema) {
+  const current = unwrap(schema);
+  const currentDefinition = definition(current);
+  const kind = schemaKind(current);
+  if (kind === "literal") {
+    const values2 = currentDefinition.values;
+    if (Array.isArray(values2)) return values2;
+    return "value" in currentDefinition ? [currentDefinition.value] : [];
+  }
+  if (kind !== "enum" && kind !== "nativeenum") return [];
+  const entries = currentDefinition.entries;
+  if (entries && typeof entries === "object") return Object.values(entries);
+  const values = currentDefinition.values;
+  if (Array.isArray(values)) return values;
+  return Array.isArray(current?.options) ? [...current.options] : [];
+}
+function stringFormat(schema) {
+  const currentDefinition = definition(unwrap(schema));
+  if (typeof currentDefinition.format === "string") return currentDefinition.format;
+  const checks = Array.isArray(currentDefinition.checks) ? currentDefinition.checks : [];
+  for (const check of checks) {
+    if (!check || typeof check !== "object") continue;
+    const value = check;
+    const format = value.format ?? value.kind;
+    if (typeof format === "string") return format;
+  }
+  return "";
+}
+function resolveOverride(override, fieldName) {
+  if (typeof override === "function") return override(fieldName);
+  if (Array.isArray(override)) {
+    const value = pick(override);
+    if (value && typeof value === "object" && "value" in value) {
+      return value.value;
+    }
+    return value;
+  }
+  return override;
+}
+function localDateInput(date = /* @__PURE__ */ new Date()) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function birthDate(child) {
+  const date = /* @__PURE__ */ new Date();
+  date.setFullYear(date.getFullYear() - (child ? 10 : 35));
+  return localDateInput(date);
+}
+function fieldValue(fieldName, schema, siblingFields) {
+  const key = fieldName.toLowerCase();
+  const current = unwrap(schema);
+  const kind = schemaKind(current);
+  const format = stringFormat(current);
+  const values = enumValues(current);
+  if (values.length) return pick(values);
+  if (kind === "boolean") return true;
+  if (kind === "number" || kind === "bigint") {
+    if (key.includes("sortorder")) return 1;
+    if (key.includes("quantity")) return 5;
+    return 10;
+  }
+  if (format === "uuid" || key.endsWith("uuid")) {
+    return "9cc2c93f-f545-4e07-9f77-f79f08a71dd5";
+  }
+  if (format === "email" || key.includes("email")) {
+    return `test-${randomToken()}@example.com`;
+  }
+  if (format === "url" || key === "image" || key.includes("imageurl") || key.endsWith("url")) {
+    return `https://picsum.photos/seed/${randomToken()}/800/600`;
+  }
+  if (key === "month") return `${localDateInput().slice(0, 7)}-01`;
+  if (key === "registrationdate") return localDateInput();
+  if (format === "date" || key.includes("dateofbirth")) {
+    const child = siblingFields.has("schoolLevel") || siblingFields.has("clothingSize");
+    return birthDate(child);
+  }
+  if (key.endsWith("id") || key.endsWith("by")) return "";
+  if (key === "name") {
+    if (siblingFields.has("sku")) return `Test product ${randomToken(4)}`;
+    if (siblingFields.has("slug")) return `Test category ${randomToken(4)}`;
+    return "Test User";
+  }
+  if (key.includes("legalname")) return "Test User";
+  if (key.includes("phone")) return `+2126${randomDigits(8)}`;
+  if (key.endsWith("cin")) return `AB${randomDigits(6)}`;
+  if (key.includes("address")) return `10 Test Street, ${pick(CITIES)}`;
+  if (key.includes("schoollevel")) return pick(SCHOOL_LEVELS);
+  if (key.includes("clothingsize")) return pick(CLOTHING_SIZES);
+  if (key.includes("shoesize")) return "36";
+  if (key.includes("relationship")) return "Legal guardian";
+  if (key.includes("activationtargetmad")) return "7500";
+  if (key === "slug") return `test-${randomToken(6)}`;
+  if (key === "sku") return `TEST-${randomToken(8).toUpperCase()}`;
+  if (key.includes("amountmad") || key.includes("pricemad") || key.includes("limitmad") || key.includes("targetmad")) {
+    return "100.00";
+  }
+  if (key.includes("reason")) return "Generated for form testing.";
+  if (key.includes("notes")) return "Generated form testing note.";
+  if (key.includes("description")) return "Generated description for form testing.";
+  if (key.includes("code")) return randomToken(8).toUpperCase();
+  return `Test ${fieldName}`;
+}
+function buildFormFill(schema, overrides = {}) {
+  const shape = objectShape(schema) ?? {};
+  const siblingFields = new Set(Object.keys(shape));
+  const output = {};
+  for (const [fieldName, fieldSchema] of Object.entries(shape)) {
+    if (Object.prototype.hasOwnProperty.call(overrides, fieldName)) {
+      output[fieldName] = resolveOverride(overrides[fieldName], fieldName);
+      continue;
+    }
+    const nestedShape = objectShape(fieldSchema);
+    if (nestedShape) {
+      output[fieldName] = buildFormFill(fieldSchema);
+      continue;
+    }
+    const element = arrayElement(fieldSchema);
+    if (element) {
+      output[fieldName] = objectShape(element) ? [buildFormFill(element)] : [fieldValue(fieldName, element, siblingFields)];
+      continue;
+    }
+    output[fieldName] = fieldValue(fieldName, fieldSchema, siblingFields);
+  }
+  return output;
+}
+var DEFAULT_FORM_DEV_TOOLS = {
+  enabled: false,
+  shortcut: "F8"
+};
+var FormDevToolsContext = createContext(
+  DEFAULT_FORM_DEV_TOOLS
+);
+function normalizeFormDevTools(value) {
+  if (typeof value === "boolean") {
+    return { ...DEFAULT_FORM_DEV_TOOLS, enabled: value };
+  }
+  if (!value) return DEFAULT_FORM_DEV_TOOLS;
+  return {
+    enabled: value.enabled ?? true,
+    shortcut: value.shortcut ?? DEFAULT_FORM_DEV_TOOLS.shortcut
+  };
+}
+function FormDevToolsProvider({
+  children,
+  value
+}) {
+  const resolved = useMemo(
+    () => normalizeFormDevTools(value),
+    [value]
+  );
+  return /* @__PURE__ */ jsx(FormDevToolsContext.Provider, { value: resolved, children });
+}
+function useResolvedFormDevTools(schema, local) {
+  const global = useContext(FormDevToolsContext);
+  const options = typeof local === "object" ? local : void 0;
+  const enabled = typeof local === "boolean" ? local : options?.enabled ?? global.enabled;
+  const shortcut = options?.shortcut ?? global.shortcut;
+  const fill = options?.fill ?? (schema ? () => buildFormFill(schema, options?.overrides) : void 0);
+  return { enabled, shortcut, fill };
+}
+var NajmFormatContext = React2.createContext(
+  null
+);
+function NajmFormatProvider({
+  children,
+  locale,
+  currency,
+  timeZone,
+  placeholder = DEFAULT_PLACEHOLDER
+}) {
+  const preferences = useNajmPreferencesContext();
+  const resolvedTimeZone = timeZone ?? preferences?.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const value = React2.useMemo(() => {
+    const config = {
+      locale,
+      timeZone: resolvedTimeZone,
+      currency,
+      placeholder
+    };
+    return {
+      locale,
+      timeZone: resolvedTimeZone,
+      currency,
+      placeholder,
+      config,
+      money: (minorUnits) => formatCurrency(minorUnits, config),
+      number: (value_, options) => formatNumber(value_, config, options),
+      percent: (value_, digits) => formatPercent(value_, config, digits),
+      date: (value_, options) => formatDate(value_, config, options),
+      dateTime: (value_) => formatDateTime(value_, config),
+      time: (value_) => formatTime(value_, config),
+      relativeTime: (value_) => formatRelativeTime(value_, config),
+      humanize: humanizeToken
+    };
+  }, [locale, resolvedTimeZone, currency, placeholder]);
+  return /* @__PURE__ */ jsx(NajmFormatContext.Provider, { value, children });
+}
+function useNajmFormatContext() {
+  return React2.useContext(NajmFormatContext);
+}
+function useNajmFormat() {
+  const value = React2.useContext(NajmFormatContext);
+  if (!value) {
+    throw new Error(
+      "useNajmFormat must be rendered under a NajmFormatProvider or NajmAppProvider."
+    );
+  }
+  return value;
+}
+
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext, useResolvedFormDevTools };

package/dist/{NBrandingContext-dkADu8JS.d.ts → formFill-BcH-m9Kf.d.ts}

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import { ZodTypeAny, TypeOf } from 'zod';
 
 interface NBrandingValue {
     /** Used as the logo's `alt` when the logo does not set one. */
@@ -79,4 +80,18 @@ interface NBrandingStateProviderProps {
 /** `NBrandingProvider` with the marks held as state an editor can write. */
 declare function NBrandingStateProvider({ children, branding, initialBranding, }: Readonly<NBrandingStateProviderProps>): react_jsx_runtime.JSX.Element;
 
-export { type NBrandingInput as N, type NBrandingEditorValue as a, type NBrandingPayload as b, NBrandingProvider as c, NBrandingStateProvider as d, type NBrandingStateProviderProps as e, type NBrandingValue as f, useNBrandingEditor as g, normalizeBranding as n, useNBranding as u };
+type FormFillOverride = unknown | readonly unknown[] | ((fieldName: string) => unknown);
+type FormFillOverrides = Record<string, FormFillOverride>;
+interface FormDevToolsOptions {
+    enabled?: boolean;
+    shortcut?: string;
+}
+interface FormDevToolsConfig<T extends ZodTypeAny = ZodTypeAny> extends FormDevToolsOptions {
+    fill?: () => Partial<TypeOf<T>>;
+    overrides?: FormFillOverrides;
+}
+type FormDevTools<T extends ZodTypeAny = ZodTypeAny> = boolean | FormDevToolsConfig<T>;
+/** Build form-shaped test values from a Zod object schema. */
+declare function buildFormFill<TSchema extends ZodTypeAny>(schema: TSchema, overrides?: FormFillOverrides): Partial<TypeOf<TSchema>>;
+
+export { type FormDevToolsOptions as F, type NBrandingInput as N, type FormDevTools as a, type FormDevToolsConfig as b, type FormFillOverride as c, type FormFillOverrides as d, type NBrandingEditorValue as e, type NBrandingPayload as f, NBrandingProvider as g, NBrandingStateProvider as h, type NBrandingStateProviderProps as i, type NBrandingValue as j, buildFormFill as k, useNBrandingEditor as l, normalizeBranding as n, useNBranding as u };

package/dist/index.d.ts

@@ -22,7 +22,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
-export { a as NBrandingEditorValue, N as NBrandingInput, b as NBrandingPayload, c as NBrandingProvider, d as NBrandingStateProvider, e as NBrandingStateProviderProps, f as NBrandingValue, n as normalizeBranding, u as useNBranding, g as useNBrandingEditor } from './NBrandingContext-dkADu8JS.js';
+import { a as FormDevTools, F as FormDevToolsOptions } from './formFill-BcH-m9Kf.js';
+export { b as FormDevToolsConfig, c as FormFillOverride, d as FormFillOverrides, e as NBrandingEditorValue, N as NBrandingInput, f as NBrandingPayload, g as NBrandingProvider, h as NBrandingStateProvider, i as NBrandingStateProviderProps, j as NBrandingValue, k as buildFormFill, n as normalizeBranding, u as useNBranding, l as useNBrandingEditor } from './formFill-BcH-m9Kf.js';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { Command as Command$1 } from 'cmdk';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
@@ -2648,10 +2649,7 @@ type FormProps<T extends ZodTypeAny = ZodTypeAny> = {
     as?: "form" | "div";
     className?: string;
     id?: string;
-    devTools?: {
-        enabled?: boolean;
-        fill?: () => Partial<TypeOf<T>>;
-    };
+    devTools?: FormDevTools<T>;
     children: React.ReactNode;
 };
 
@@ -2701,6 +2699,11 @@ interface UseNFormOptions<T extends ZodTypeAny> extends Omit<UseFormProps<TypeOf
 }
 declare function useNForm<T extends ZodTypeAny>(options: UseNFormOptions<T>): UseFormReturn<TypeOf<T>>;
 
+declare function FormDevToolsProvider({ children, value, }: {
+    children: React__default.ReactNode;
+    value?: boolean | FormDevToolsOptions;
+}): react_jsx_runtime.JSX.Element;
+
 interface StepConfig {
     id: string;
     title: string;
@@ -2741,6 +2744,7 @@ interface WizardFormProps {
     footerSlot?: ReactNode;
     footerDivider?: WizardFooterDivider;
     footerDividerClassName?: string;
+    devTools?: FormDevTools;
     children?: ReactNode;
 }
 interface StepMeta {
@@ -2749,7 +2753,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, footerDivider, footerDividerClassName, }: 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, devTools, }: WizardFormProps): react_jsx_runtime.JSX.Element;
 
 interface StepIndicatorProps {
     stepNumber: number;
@@ -4269,4 +4273,4 @@ interface NGridItemProps extends Omit<React$1.AllHTMLAttributes<HTMLDivElement>,
 declare function NGrid({ as: Comp, children, cols, smCols, mdCols, lgCols, xlCols, gap, className, style, ...props }: NGridProps): react_jsx_runtime.JSX.Element;
 declare function NGridItem({ children, span, smSpan, mdSpan, lgSpan, xlSpan, className, ...props }: NGridItemProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertLook, type AlertOrientation, type AlertProps, type AlertSize, type AlertTone, type AlertVariant, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, type AvatarFormInputProps, AvatarGroup, type AvatarGroupProps, AvatarImage, AvatarInput, type AvatarInputProps, type AvatarInputRadius, type AvatarProps$1 as AvatarProps, type AvatarShape$1 as AvatarShape, type AvatarSize, AvatarStatus, type AvatarStatusType, Badge, type BadgeColor, type BadgeIcon, type BadgeLook, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BaseInput, type BuildDefaultFileColumnsOptions, Button, type ButtonConfig, type ButtonIcon, type ButtonLoaderPosition, type ButtonProps, type ButtonRounded, type ButtonSize, type ButtonVariant, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, type CheckboxGroupInputProps, CheckboxInput, type CheckboxInputProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorArrayInput, type ColorArrayInputProps, type ColorFormat, ColorPickerInput, type ColorPickerInputProps, Combobox, ComboboxInput, type ComboboxInputProps, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ContextMenuItem, DEFAULT_CARD_BREAKPOINT, DEFAULT_THEME_FILE_NAME, DateInput, type DateInputProps, type DeleteDialogOptions, Dialog, type DialogActionMode, type DialogApi, DialogClose, type DialogConfig, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, type DialogHeight, DialogOverlay, type DialogPadding, DialogPortal, type DialogRenderContext, type DialogRenderer, type DialogSize, type DialogStore, DialogTitle, DialogTrigger, type DialogVariant, type DialogWidth, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray, type DynamicArrayProps, EMPTY_DESIGN, EmojiInput, type EmojiInputProps, type FileBrowserMode, FileImportButton, FileInput, type FileInputProps, type FileNode, Form, FormControl, FormDescription, FormField, FormInput, type FormInputBackground, type FormInputProps, FormItem, FormLabel, FormMessage, type FormProps, type FormSlotClassNames, type FormVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, ImageInput, type ImageInputPreviewError, type ImageInputPreviewSource, type ImageInputProps, Indicator, type IndicatorHorizontal, type IndicatorOverlay, type IndicatorPosition, type IndicatorProps, type IndicatorResponsivePosition, type IndicatorSize, type IndicatorVertical, Input, type InputIcon, Label, LangInput, type LangInputProps, type LinkComponentType, MultiSelectInput, type MultiSelectInputProps, NAJM_COLOR_TEXT_CLASSES, NAJM_SAVED_THEME_VALUE, NAJM_STATUS_COLORS, NAlert, type NAppCommandItem, NAppShell, type NAppShellAction, type NAppShellClassNames, type NAppShellProps, type NAppShellUser, NCard as NAsyncCard, type CardClassNames as NAsyncCardClassNames, type CardProps as NAsyncCardProps, NAvatar, type NAvatarClassNames, type NAvatarProps, type AvatarShape as NAvatarShape, NBadge, type NBadgeLook, type NBadgeProps, NBarChart, type NBarChartProps, type NBulkAction, type NBulkActionButton, type NBulkActionSelect, NBulkActionsBar, type NBulkActionsBarProps, NButton, type NButtonProps, NCard, NCardAction, type CardClassNames as NCardClassNames, type NCardDensity, NCardFooter, NCardInfo, type NCardInfoProps, NCardMedia, type NCardMediaAspect, type NCardMediaPlacement, type NCardMediaProps, type NCardMediaSize, type NCardMediaVariant, type CardProps as NCardProps, NCardSection, type NCardSectionProps, type NCardSectionSurface, type NCartesianChartProps, type NChartCardProps, type NChartDatum, type NChartItem, type NChartSeries, type NChartSize, NChartSkeleton, type NChartSkeletonProps, type NChartSkeletonVariant, NCommandPalette, type NCommandPaletteProps, NConfirmDialog, type NConfirmDialogProps, NContextMenu, type NContextMenuItem, type NContextMenuProps, NDataCardShell, type NDataCardShellActions, type NDataCardShellProps, NDeleteDialog, NDeleteDialogContent, type NDeleteDialogContentProps, type NDeleteDialogProps, NDetailCard, type NDetailCardClassNames, type NDetailCardProps, NDetailItem, type NDetailItemProps, NDetailList, type NDetailListItem, type NDetailListProps, NDialog, type NDialogActionProps, NDialogDescription, type NDialogDescriptionProps, type NDialogDirectProps, NDialogHeader, type NDialogHeaderProps, NDialogPrimaryButton, type NDialogProps, NDialogSecondaryButton, NDonutCard, type NDonutCardClassNames, type NDonutCardItem, type NDonutCardLayout, type NDonutCardLegendMarker, type NDonutCardProps, type NDonutCardVariant, type NEditorTab, NEditorTabs, type NEditorTabsProps, NEmptyState, type NEmptyStateProps, NErrorBoundary, NErrorState, type NErrorStateProps, NFileBrowser, type NFileBrowserCardProps, type NFileBrowserProps, type NFileBrowserRenderThumbProps, NFileTypeIcon, type NFileTypeIconProps, NFilterBar, NFolderIcon, type NFolderIconProps, NForm, NFormSectionHeader, type NFormSectionHeaderProps, NGrid, type NGridCols, NGridItem, type NGridItemProps, type NGridProps, type NGridSpan, NIcon, type NIconProps, type NIconSource, NImage, type NImageProps, NIndicator, NInspectorSheet, NLineChart, type NLineChartProps, NLoadingState, type NLoadingStateProps, NMultiDialog, type NMultiDialogProps, NNavbar, NPageHeader, NPageHeaderActions, type NPageHeaderBreakpoint, NPageHeaderCompactActions, NPageHeaderFilters, type NPageHeaderProps, NPageHeaderTop, NPageLayout, type NPageLayoutProps, NPieChart, type NPieChartProps, NPortalScopeProvider, NProgress, type NProgressProps, NRowActions, NSection, NSectionHeader, type NSectionHeaderActionsProps, type NSectionHeaderContentProps, type NSectionHeaderProps, type NSectionHeaderSubtitleProps, type NSectionHeaderTitleProps, NSectionInfo, type NSectionInfoProps, type NSectionProps, NSectionWithInfo, type NSectionWithInfoItem, type NSectionWithInfoProps, NSheet, type NSheetClassNames, type NSheetProps, NSidebar, NSidebarBrand, type NSidebarBrandProps, NSidebarContent, type NSidebarContentProps, type NSidebarContextValue, NSidebarFooter, type NSidebarFooterProps, NSidebarHeader, type NSidebarHeaderProps, NSidebarItem, NSidebarMobile, type NSidebarMobileProps, NSidebarProvider, NSidebarSection, type NSidebarSectionProps, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, type NSliderProps, NSmartPasteDialog, type NSmartPasteDialogProps, NSpinner, type NSpinnerProps, NStatCard, type NStatCardClassNames, type NStatCardProps, NStatCardSkeleton, type NStatCardVariant, NStatusBreakdown, type NStatusBreakdownProps, Swap as NSwap, type NSwapProps, NTable, NTableCardPagination, NTableCardRoot, type NTableCardRootProps, NTableCards, type NTableClassNames, type NTableColumnBreakpoint, type NTableColumnDef, type NTableColumnMeta, NTableContent, NTableHeader, NTableLoadingSkeleton, type NTableMenu, type NTableMenuProp, type NTablePageItem, NTablePagination, NTablePaginationLabels, NTablePaginationVariant, type NTableProps, NTableRowSkeleton, NTableSkeleton, type NTableState, NTabs, type NTabsClassNames, type NTabsColor, type NTabsItem, type NTabsProps, type NTabsStyles, NThemeCustomizer, type NThemeCustomizerFontOption, type NThemeCustomizerLabels, type NThemeCustomizerProps, type NThemeCustomizerTab, type NThemePreset, NThemePresets, type NThemePresetsLabels, type NThemePresetsProps, type NThemePresetsStatus, NUploader, type NUploaderItem, type NUploaderItemStatus, type NUploaderProps, NViewBody, NViewToggle, NajmAccent, NajmAppearance, type NajmBorderSide, NajmComponentName, NajmComponentStyleConfig, NajmComponentThemeConfig, NajmDesignConfig, NajmDesignEditorProvider, type NajmDesignEditorProviderProps, type NajmDesignEditorValue, NajmDesignProvider, type NajmDesignProviderProps, NajmFormatConfig, type NajmFormatContextValue, NajmFormatProvider, type NajmFormatProviderProps, NajmLayoutConfig, NajmMode, NajmPreset, NajmResponsiveBreakpoint, NajmResponsiveValue, NajmScroll, type NajmScrollProps, NajmThemeConfig, NajmThemeProvider, NajmThemeProviderProps, NajmThemeTokens, NajmTypographyConfig, NajmVariantStyle, NativeSelect, type NativeSelectOption, type NativeSelectProps, type NavItem, type NavItemGroup, NumberInput, type NumberInputProps, OtpInput, type OtpInputProps, PasswordInput, type PasswordInputProps, PhoneInput, type PhoneInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, type ProgressColor, type ProgressLabelPosition, type ProgressProps, type ProgressSize, type PushDialogOptions, RadioGroup, RadioGroupInput, type RadioGroupInputProps, RadioGroupItem, type RenderSlot, RepeatingFields, type RepeatingFieldsProps, ScrollArea, type ScrollAreaProps, SearchField, SearchField as SearchInput, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectInput, type SelectInputProps, SelectItem, type SelectItemType$1 as SelectItemDataType, type SelectItemType, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, type SidebarItemProps, type SidebarLogo, type SidebarLogoRender, type SidebarProps, type SidebarWidth, type SidebarWidths, SimpleTooltip, type SimpleTooltipProps, NSkeleton as Skeleton, Slider, SliderInput, type SliderInputProps, type SliderOrientation, type SliderProps, type SliderSize, type SliderVariant, type SmartPastePreview, type SpinnerVariant, StarRatingInput, type StarRatingInputProps, StatusPill, type StatusPillProps, type StatusPillTone, type StepConfig, StepIndicator, type StepMeta, StepsHeader, StepsProgress, type StorageMenuAction, type StorageSortOption, type StorageTarget, Swap, type SwapEffect, SwapIndeterminate, SwapOff, SwapOn, type SwapProps, type SwapSize, type SwapState, Switch, type SwitchColor, SwitchInput, type SwitchInputProps, type SwitchSize, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderColor, TableRow, type TableState, type TableStore, TableStoreContext, Tabs, TabsContent, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, TabsTrigger, type TabsTriggerProps, type TabsVariant, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, Textarea, TimeInput, type TimeInputProps, TimeZoneInput, type TimeZoneInputProps, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseContextMenuResult, type UseNFormOptions, type UseStorageContextMenuOptions, type UseStorageContextMenuResult, type UserMenuAction, VariantProvider, type WizardClassNames, WizardForm, type WizardFormProps, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, buttonVariants, cn, colorTextClass, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, findStatusColor, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, isPlaceholderAvatar, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveAvatarSrc, resolveHiddenBelowClass, resolvePreset, resolveSlot, resolveStatusColor, resolveVariantAlias, sidebarBorderClasses, sliderVariants, statusTextClass, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useCardViewport, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDesktopTableMode, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useMediaQuery, useNForm, useNPortalScope, useNSidebar, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmDesignEditor, useNajmFormat, useNajmFormatContext, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };
+export { Alert, type AlertLook, type AlertOrientation, type AlertProps, type AlertSize, type AlertTone, type AlertVariant, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, type AvatarFormInputProps, AvatarGroup, type AvatarGroupProps, AvatarImage, AvatarInput, type AvatarInputProps, type AvatarInputRadius, type AvatarProps$1 as AvatarProps, type AvatarShape$1 as AvatarShape, type AvatarSize, AvatarStatus, type AvatarStatusType, Badge, type BadgeColor, type BadgeIcon, type BadgeLook, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BaseInput, type BuildDefaultFileColumnsOptions, Button, type ButtonConfig, type ButtonIcon, type ButtonLoaderPosition, type ButtonProps, type ButtonRounded, type ButtonSize, type ButtonVariant, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, type CheckboxGroupInputProps, CheckboxInput, type CheckboxInputProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorArrayInput, type ColorArrayInputProps, type ColorFormat, ColorPickerInput, type ColorPickerInputProps, Combobox, ComboboxInput, type ComboboxInputProps, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type ContextMenuItem, DEFAULT_CARD_BREAKPOINT, DEFAULT_THEME_FILE_NAME, DateInput, type DateInputProps, type DeleteDialogOptions, Dialog, type DialogActionMode, type DialogApi, DialogClose, type DialogConfig, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, type DialogHeight, DialogOverlay, type DialogPadding, DialogPortal, type DialogRenderContext, type DialogRenderer, type DialogSize, type DialogStore, DialogTitle, DialogTrigger, type DialogVariant, type DialogWidth, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray, type DynamicArrayProps, EMPTY_DESIGN, EmojiInput, type EmojiInputProps, type FileBrowserMode, FileImportButton, FileInput, type FileInputProps, type FileNode, Form, FormControl, FormDescription, FormDevTools, FormDevToolsOptions, FormDevToolsProvider, FormField, FormInput, type FormInputBackground, type FormInputProps, FormItem, FormLabel, FormMessage, type FormProps, type FormSlotClassNames, type FormVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, ImageInput, type ImageInputPreviewError, type ImageInputPreviewSource, type ImageInputProps, Indicator, type IndicatorHorizontal, type IndicatorOverlay, type IndicatorPosition, type IndicatorProps, type IndicatorResponsivePosition, type IndicatorSize, type IndicatorVertical, Input, type InputIcon, Label, LangInput, type LangInputProps, type LinkComponentType, MultiSelectInput, type MultiSelectInputProps, NAJM_COLOR_TEXT_CLASSES, NAJM_SAVED_THEME_VALUE, NAJM_STATUS_COLORS, NAlert, type NAppCommandItem, NAppShell, type NAppShellAction, type NAppShellClassNames, type NAppShellProps, type NAppShellUser, NCard as NAsyncCard, type CardClassNames as NAsyncCardClassNames, type CardProps as NAsyncCardProps, NAvatar, type NAvatarClassNames, type NAvatarProps, type AvatarShape as NAvatarShape, NBadge, type NBadgeLook, type NBadgeProps, NBarChart, type NBarChartProps, type NBulkAction, type NBulkActionButton, type NBulkActionSelect, NBulkActionsBar, type NBulkActionsBarProps, NButton, type NButtonProps, NCard, NCardAction, type CardClassNames as NCardClassNames, type NCardDensity, NCardFooter, NCardInfo, type NCardInfoProps, NCardMedia, type NCardMediaAspect, type NCardMediaPlacement, type NCardMediaProps, type NCardMediaSize, type NCardMediaVariant, type CardProps as NCardProps, NCardSection, type NCardSectionProps, type NCardSectionSurface, type NCartesianChartProps, type NChartCardProps, type NChartDatum, type NChartItem, type NChartSeries, type NChartSize, NChartSkeleton, type NChartSkeletonProps, type NChartSkeletonVariant, NCommandPalette, type NCommandPaletteProps, NConfirmDialog, type NConfirmDialogProps, NContextMenu, type NContextMenuItem, type NContextMenuProps, NDataCardShell, type NDataCardShellActions, type NDataCardShellProps, NDeleteDialog, NDeleteDialogContent, type NDeleteDialogContentProps, type NDeleteDialogProps, NDetailCard, type NDetailCardClassNames, type NDetailCardProps, NDetailItem, type NDetailItemProps, NDetailList, type NDetailListItem, type NDetailListProps, NDialog, type NDialogActionProps, NDialogDescription, type NDialogDescriptionProps, type NDialogDirectProps, NDialogHeader, type NDialogHeaderProps, NDialogPrimaryButton, type NDialogProps, NDialogSecondaryButton, NDonutCard, type NDonutCardClassNames, type NDonutCardItem, type NDonutCardLayout, type NDonutCardLegendMarker, type NDonutCardProps, type NDonutCardVariant, type NEditorTab, NEditorTabs, type NEditorTabsProps, NEmptyState, type NEmptyStateProps, NErrorBoundary, NErrorState, type NErrorStateProps, NFileBrowser, type NFileBrowserCardProps, type NFileBrowserProps, type NFileBrowserRenderThumbProps, NFileTypeIcon, type NFileTypeIconProps, NFilterBar, NFolderIcon, type NFolderIconProps, NForm, NFormSectionHeader, type NFormSectionHeaderProps, NGrid, type NGridCols, NGridItem, type NGridItemProps, type NGridProps, type NGridSpan, NIcon, type NIconProps, type NIconSource, NImage, type NImageProps, NIndicator, NInspectorSheet, NLineChart, type NLineChartProps, NLoadingState, type NLoadingStateProps, NMultiDialog, type NMultiDialogProps, NNavbar, NPageHeader, NPageHeaderActions, type NPageHeaderBreakpoint, NPageHeaderCompactActions, NPageHeaderFilters, type NPageHeaderProps, NPageHeaderTop, NPageLayout, type NPageLayoutProps, NPieChart, type NPieChartProps, NPortalScopeProvider, NProgress, type NProgressProps, NRowActions, NSection, NSectionHeader, type NSectionHeaderActionsProps, type NSectionHeaderContentProps, type NSectionHeaderProps, type NSectionHeaderSubtitleProps, type NSectionHeaderTitleProps, NSectionInfo, type NSectionInfoProps, type NSectionProps, NSectionWithInfo, type NSectionWithInfoItem, type NSectionWithInfoProps, NSheet, type NSheetClassNames, type NSheetProps, NSidebar, NSidebarBrand, type NSidebarBrandProps, NSidebarContent, type NSidebarContentProps, type NSidebarContextValue, NSidebarFooter, type NSidebarFooterProps, NSidebarHeader, type NSidebarHeaderProps, NSidebarItem, NSidebarMobile, type NSidebarMobileProps, NSidebarProvider, NSidebarSection, type NSidebarSectionProps, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, type NSliderProps, NSmartPasteDialog, type NSmartPasteDialogProps, NSpinner, type NSpinnerProps, NStatCard, type NStatCardClassNames, type NStatCardProps, NStatCardSkeleton, type NStatCardVariant, NStatusBreakdown, type NStatusBreakdownProps, Swap as NSwap, type NSwapProps, NTable, NTableCardPagination, NTableCardRoot, type NTableCardRootProps, NTableCards, type NTableClassNames, type NTableColumnBreakpoint, type NTableColumnDef, type NTableColumnMeta, NTableContent, NTableHeader, NTableLoadingSkeleton, type NTableMenu, type NTableMenuProp, type NTablePageItem, NTablePagination, NTablePaginationLabels, NTablePaginationVariant, type NTableProps, NTableRowSkeleton, NTableSkeleton, type NTableState, NTabs, type NTabsClassNames, type NTabsColor, type NTabsItem, type NTabsProps, type NTabsStyles, NThemeCustomizer, type NThemeCustomizerFontOption, type NThemeCustomizerLabels, type NThemeCustomizerProps, type NThemeCustomizerTab, type NThemePreset, NThemePresets, type NThemePresetsLabels, type NThemePresetsProps, type NThemePresetsStatus, NUploader, type NUploaderItem, type NUploaderItemStatus, type NUploaderProps, NViewBody, NViewToggle, NajmAccent, NajmAppearance, type NajmBorderSide, NajmComponentName, NajmComponentStyleConfig, NajmComponentThemeConfig, NajmDesignConfig, NajmDesignEditorProvider, type NajmDesignEditorProviderProps, type NajmDesignEditorValue, NajmDesignProvider, type NajmDesignProviderProps, NajmFormatConfig, type NajmFormatContextValue, NajmFormatProvider, type NajmFormatProviderProps, NajmLayoutConfig, NajmMode, NajmPreset, NajmResponsiveBreakpoint, NajmResponsiveValue, NajmScroll, type NajmScrollProps, NajmThemeConfig, NajmThemeProvider, NajmThemeProviderProps, NajmThemeTokens, NajmTypographyConfig, NajmVariantStyle, NativeSelect, type NativeSelectOption, type NativeSelectProps, type NavItem, type NavItemGroup, NumberInput, type NumberInputProps, OtpInput, type OtpInputProps, PasswordInput, type PasswordInputProps, PhoneInput, type PhoneInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, type ProgressColor, type ProgressLabelPosition, type ProgressProps, type ProgressSize, type PushDialogOptions, RadioGroup, RadioGroupInput, type RadioGroupInputProps, RadioGroupItem, type RenderSlot, RepeatingFields, type RepeatingFieldsProps, ScrollArea, type ScrollAreaProps, SearchField, SearchField as SearchInput, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectInput, type SelectInputProps, SelectItem, type SelectItemType$1 as SelectItemDataType, type SelectItemType, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, type SidebarItemProps, type SidebarLogo, type SidebarLogoRender, type SidebarProps, type SidebarWidth, type SidebarWidths, SimpleTooltip, type SimpleTooltipProps, NSkeleton as Skeleton, Slider, SliderInput, type SliderInputProps, type SliderOrientation, type SliderProps, type SliderSize, type SliderVariant, type SmartPastePreview, type SpinnerVariant, StarRatingInput, type StarRatingInputProps, StatusPill, type StatusPillProps, type StatusPillTone, type StepConfig, StepIndicator, type StepMeta, StepsHeader, StepsProgress, type StorageMenuAction, type StorageSortOption, type StorageTarget, Swap, type SwapEffect, SwapIndeterminate, SwapOff, SwapOn, type SwapProps, type SwapSize, type SwapState, Switch, type SwitchColor, SwitchInput, type SwitchInputProps, type SwitchSize, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderColor, TableRow, type TableState, type TableStore, TableStoreContext, Tabs, TabsContent, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, TabsTrigger, type TabsTriggerProps, type TabsVariant, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, Textarea, TimeInput, type TimeInputProps, TimeZoneInput, type TimeZoneInputProps, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseContextMenuResult, type UseNFormOptions, type UseStorageContextMenuOptions, type UseStorageContextMenuResult, type UserMenuAction, VariantProvider, type WizardClassNames, WizardForm, type WizardFormProps, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, buttonVariants, cn, colorTextClass, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, findStatusColor, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, isPlaceholderAvatar, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveAvatarSrc, resolveHiddenBelowClass, resolvePreset, resolveSlot, resolveStatusColor, resolveVariantAlias, sidebarBorderClasses, sliderVariants, statusTextClass, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useCardViewport, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDesktopTableMode, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useMediaQuery, useNForm, useNPortalScope, useNSidebar, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmDesignEditor, useNajmFormat, useNajmFormatContext, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { useNBranding } from './chunk-PCPMAEKP.mjs';
-export { NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-PCPMAEKP.mjs';
+import { useResolvedFormDevTools, useNBranding } from './chunk-GHMR45H3.mjs';
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-GHMR45H3.mjs';
 import { useResolvedPaginationLabels } from './chunk-USZUOJMK.mjs';
 export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-USZUOJMK.mjs';
 import { resolveRadiusValue, inputBorderClasses, Button, NIcon, NajmScroll, surfaceBorderClasses, useNajmScrollViewport, resolveVariantAlias, buttonVariants, NButton, parseNajmDesignConfig, useTableStore, TableStoreContext, sidebarBorderClasses, NTableJson } from './chunk-6OOBAEH2.mjs';
@@ -10631,6 +10631,7 @@ var useVariant = () => useContext(VariantContext).variant;
 var useBordered = () => useContext(VariantContext).bordered;
 var useVariantPreset = () => VARIANT_PRESETS[useContext(VariantContext).variant];
 function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, variant = "default", bordered, as = "form", className = "", id, devTools, children }) {
+  const resolvedDevTools = useResolvedFormDevTools(schema, devTools);
   const resolver = useMemo(() => schema ? zodResolver(schema) : void 0, [schema]);
   const internalForm = useForm({
     resolver,
@@ -10638,21 +10639,21 @@ function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, varia
   });
   const form = externalForm ?? internalForm;
   const handleFill = useCallback(() => {
-    if (devTools?.fill) {
-      form.reset(devTools.fill());
+    if (resolvedDevTools.fill) {
+      form.reset(resolvedDevTools.fill());
     }
-  }, [devTools, form]);
+  }, [resolvedDevTools.fill, form]);
   useEffect(() => {
-    if (!devTools?.enabled) return;
+    if (!resolvedDevTools.enabled || !resolvedDevTools.fill) return;
     const handler = (e) => {
-      if (e.key === "F8") {
+      if (e.key === resolvedDevTools.shortcut) {
         e.preventDefault();
         handleFill();
       }
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [devTools?.enabled, handleFill]);
+  }, [resolvedDevTools.enabled, resolvedDevTools.fill, resolvedDevTools.shortcut, handleFill]);
   useEffect(() => {
     const proc = globalThis.process;
     if (proc?.env?.NODE_ENV !== "development") return;
@@ -11130,8 +11131,10 @@ function WizardForm({
   classNames,
   footerSlot,
   footerDivider = "none",
-  footerDividerClassName
+  footerDividerClassName,
+  devTools
 }) {
+  const resolvedDevTools = useResolvedFormDevTools(schema, devTools);
   const nav = useStepNavigation({
     steps,
     currentStep: controlledStep,
@@ -11171,6 +11174,36 @@ function WizardForm({
     resolver: stepSchema ? zodResolver(stepSchema) : void 0,
     defaultValues: stepDefaults
   });
+  const fillWizard = useCallback(() => {
+    if (!resolvedDevTools.fill) return;
+    const values = {
+      ...defaultValues ?? {},
+      ...resolvedDevTools.fill()
+    };
+    formDataRef.current = values;
+    pendingIssuesRef.current = null;
+    nav.reset();
+    const firstStep = steps[0];
+    const firstValues = firstStep?.fields ? Object.fromEntries(
+      firstStep.fields.filter((field) => field in values).map((field) => [field, values[field]])
+    ) : values;
+    form.reset(firstValues);
+  }, [defaultValues, form, formDataRef, nav, resolvedDevTools.fill, steps]);
+  useEffect(() => {
+    if (!resolvedDevTools.enabled || !resolvedDevTools.fill) return;
+    const handler = (event) => {
+      if (event.key !== resolvedDevTools.shortcut) return;
+      event.preventDefault();
+      fillWizard();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [
+    fillWizard,
+    resolvedDevTools.enabled,
+    resolvedDevTools.fill,
+    resolvedDevTools.shortcut
+  ]);
   useEffect(() => {
     const newDefaults = getStepDefaultValues(currentStepConfig.id);
     form.reset(newDefaults);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",

package/dist/chunk-PCPMAEKP.mjs

@@ -1,116 +0,0 @@
-import { useNajmPreferencesContext } from './chunk-USZUOJMK.mjs';
-import { humanizeToken, DEFAULT_PLACEHOLDER, formatRelativeTime, formatTime, formatDateTime, formatDate, formatPercent, formatNumber, formatCurrency } from './chunk-JABLSOQN.mjs';
-import * as React from 'react';
-import { createContext, useContext, useMemo, useState, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-function normalizeBranding(input) {
-  if (!input) return {};
-  const value = {};
-  const expanded = input.logoExpanded ?? input.sidebarLogoExpandedPath;
-  const collapsed = input.logoCollapsed ?? input.sidebarLogoCollapsedPath;
-  if (input.appName !== void 0) value.appName = input.appName;
-  if (input.logoFallback !== void 0) value.logoFallback = input.logoFallback;
-  if (input.logoHref !== void 0) value.logoHref = input.logoHref;
-  if (expanded !== void 0) value.logoExpanded = expanded;
-  if (collapsed !== void 0) value.logoCollapsed = collapsed;
-  return value;
-}
-var NBrandingContext = createContext(null);
-function useNBranding() {
-  return useContext(NBrandingContext);
-}
-function NBrandingProvider({
-  children,
-  appName,
-  logoExpanded,
-  logoCollapsed,
-  logoFallback,
-  logoHref
-}) {
-  const value = useMemo(
-    () => ({ appName, logoExpanded, logoCollapsed, logoFallback, logoHref }),
-    [appName, logoExpanded, logoCollapsed, logoFallback, logoHref]
-  );
-  return /* @__PURE__ */ jsx(NBrandingContext.Provider, { value, children });
-}
-var NBrandingEditorContext = createContext(null);
-function useNBrandingEditor() {
-  return useContext(NBrandingEditorContext);
-}
-function NBrandingStateProvider({
-  children,
-  branding,
-  initialBranding
-}) {
-  const [state, setState] = useState(
-    () => normalizeBranding(initialBranding ?? branding)
-  );
-  const setBranding = useCallback((patch) => {
-    const marks = normalizeBranding(patch);
-    setState((current) => ({ ...current, ...marks }));
-  }, []);
-  const controlled = useMemo(
-    () => branding ? normalizeBranding(branding) : void 0,
-    [branding]
-  );
-  const resolved = controlled ?? state;
-  const editor = useMemo(
-    () => ({ branding: resolved, setBranding: branding ? noop : setBranding }),
-    [resolved, branding, setBranding]
-  );
-  return /* @__PURE__ */ jsx(NBrandingEditorContext.Provider, { value: editor, children: /* @__PURE__ */ jsx(NBrandingProvider, { ...resolved, children }) });
-}
-function noop() {
-}
-var NajmFormatContext = React.createContext(
-  null
-);
-function NajmFormatProvider({
-  children,
-  locale,
-  currency,
-  timeZone,
-  placeholder = DEFAULT_PLACEHOLDER
-}) {
-  const preferences = useNajmPreferencesContext();
-  const resolvedTimeZone = timeZone ?? preferences?.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const value = React.useMemo(() => {
-    const config = {
-      locale,
-      timeZone: resolvedTimeZone,
-      currency,
-      placeholder
-    };
-    return {
-      locale,
-      timeZone: resolvedTimeZone,
-      currency,
-      placeholder,
-      config,
-      money: (minorUnits) => formatCurrency(minorUnits, config),
-      number: (value_, options) => formatNumber(value_, config, options),
-      percent: (value_, digits) => formatPercent(value_, config, digits),
-      date: (value_, options) => formatDate(value_, config, options),
-      dateTime: (value_) => formatDateTime(value_, config),
-      time: (value_) => formatTime(value_, config),
-      relativeTime: (value_) => formatRelativeTime(value_, config),
-      humanize: humanizeToken
-    };
-  }, [locale, resolvedTimeZone, currency, placeholder]);
-  return /* @__PURE__ */ jsx(NajmFormatContext.Provider, { value, children });
-}
-function useNajmFormatContext() {
-  return React.useContext(NajmFormatContext);
-}
-function useNajmFormat() {
-  const value = React.useContext(NajmFormatContext);
-  if (!value) {
-    throw new Error(
-      "useNajmFormat must be rendered under a NajmFormatProvider or NajmAppProvider."
-    );
-  }
-  return value;
-}
-
-export { NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext };