najm-kit 2.9.0 → 2.11.0

package/dist/json.mjs

@@ -1,5 +1,5 @@
-import { Button } from './chunk-JUYT2ISO.mjs';
-export { NTableJson } from './chunk-JUYT2ISO.mjs';
+export { NTableJson } from './chunk-K7T7X6PX.mjs';
+import { Button } from './chunk-XZL32HFR.mjs';
 import { cn } from './chunk-KVZACF4G.mjs';
 import './chunk-TFHWLE7N.mjs';
 import { useMemo, useRef, useCallback } from 'react';

package/dist/theme.css

@@ -307,10 +307,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +367,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
@@ -84,6 +84,8 @@
     "test": "bun test && bun run test:rsc",
     "test:rsc": "cd test/rsc && bun test --conditions react-server",
     "test:next16": "bun run build && bun integration/next16-ui-bootstrap/run.ts",
+    "test:acceptance": "playwright test",
+    "typecheck:acceptance": "tsc --noEmit -p acceptance/tsconfig.json",
     "clean": "rimraf dist tsconfig.tsbuildinfo"
   },
   "peerDependencies": {

package/dist/NajmUIProvider-CI_73GEp.d.ts

@@ -1,161 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default from 'react';
-import { e as NajmMode, a as NajmDesignConfig } from './design-types-Rkpt8Pg1.js';
-import { b as NTablePaginationLabels, N as NajmTranslate } from './paginationLabels-dZLSNxfo.js';
-
-/**
- * Defaults every `NTable` beneath the provider inherits.
- *
- * Localized copy is the motivating case: an application with more than a couple
- * of tables should not repeat the same label bundle at every render site, and
- * an application with more than one locale should not have to remember to.
- */
-interface NTableDefaults {
-    paginationLabels?: NTablePaginationLabels;
-}
-/**
- * Supply table defaults to everything below.
- *
- * `value` is passed straight through, so memoize it in the caller — an inline
- * object literal rebuilds on every render of the shell and re-renders every
- * table beneath it. Most label fields are functions, so `useMemo` on the
- * translator is usually the whole job.
- */
-declare function NTableDefaultsProvider({ children, value, }: {
-    children: React__default.ReactNode;
-    value: NTableDefaults;
-}): react_jsx_runtime.JSX.Element;
-declare function useNTableDefaults(): NTableDefaults;
-
-/**
- * Theme and time zone, the two preferences that outlive a render.
- *
- * Both are *uncontrolled*: the `initial*` props seed state the provider owns
- * from then on, and later changes to those props are ignored. That is the
- * shape the server hand-off wants — the page is rendered once against a cookie,
- * and every change after that originates here.
- *
- * Persistence is not this provider's business. It applies the change to the
- * document, then hands the new value to a callback the application supplies.
- * See `NajmNextUIProvider` in `najm-kit/next` for the cookie-endpoint wiring.
- */
-interface NajmPreferencesContextValue {
-    theme: NajmMode;
-    setTheme: (theme: NajmMode) => Promise<void>;
-    timeZone: string;
-    setTimeZone: (timeZone: string) => Promise<void>;
-}
-declare const DEFAULT_TIME_ZONE = "UTC";
-interface NajmPreferencesProviderProps {
-    children: React.ReactNode;
-    /** Seeds theme state; ignored after mount. Defaults to `"light"`. */
-    initialTheme?: NajmMode;
-    /** Seeds time zone state; ignored after mount. Defaults to `"UTC"`. */
-    initialTimeZone?: string;
-    /** Persist the new theme. Rejections propagate to the `setTheme` caller. */
-    onThemeChange?: (theme: NajmMode) => void | Promise<void>;
-    /** Persist the new time zone. Rejections propagate to `setTimeZone`. */
-    onTimeZoneChange?: (timeZone: string) => void | Promise<void>;
-    /**
-     * Sanitize a time zone before it is stored.
-     *
-     * Defaults to an IANA check that falls back to `DEFAULT_TIME_ZONE`, which is
-     * what every application wanted from the callback it used to have to supply.
-     * Pass one to narrow further — a fixed set backing a picker, say.
-     */
-    normalizeTimeZone?: (value: string) => string;
-}
-/**
- * Standalone preferences, without the design and table layers.
- *
- * `NajmUIProvider` renders this internally, so most applications never name it.
- * It is exported for the case where something *above* the design layer needs to
- * read the theme — a runtime theme editor, typically, which owns the design
- * config and therefore has to sit above the provider consuming it. Hoisting
- * preferences out is then a reorder rather than a fork.
- */
-declare function NajmPreferencesProvider({ children, initialTheme, initialTimeZone, onThemeChange, onTimeZoneChange, normalizeTimeZone, }: NajmPreferencesProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Returns the context when one is mounted, or `null`.
- *
- * `NajmUIProvider` uses this to defer to an outer `NajmPreferencesProvider`
- * instead of shadowing it, so nesting the two is well-defined rather than
- * quietly producing two disagreeing themes.
- */
-declare function useNajmPreferencesContext(): NajmPreferencesContextValue | null;
-/** The live theme and a setter that persists through `onThemeChange`. */
-declare function useNajmTheme(): Pick<NajmPreferencesContextValue, "theme" | "setTheme">;
-/** The live time zone and a setter that persists through `onTimeZoneChange`. */
-declare function useNajmTimeZone(): Pick<NajmPreferencesContextValue, "timeZone" | "setTimeZone">;
-
-interface NajmUIProviderProps extends Omit<NajmPreferencesProviderProps, "children"> {
-    children: React.ReactNode;
-    /**
-     * The design config handed to `NajmDesignProvider`, owned by the application.
-     *
-     * Optional, and deliberately so: an application with no runtime theme editor
-     * has nothing to put here, and requiring it was the only reason such an
-     * application still had to author a provider file just to hold a constant.
-     *
-     * Prefer `initialDesign` for a theme editor. Passing `design` means the
-     * application holds the draft state itself, which is the file this provider
-     * exists to delete.
-     */
-    design?: NajmDesignConfig;
-    /**
-     * Seeds design state this provider owns from then on; ignored after mount.
-     * A theme editor drives it through `useNajmDesignEditor`.
-     */
-    initialDesign?: NajmDesignConfig;
-    /**
-     * Forwarded to `NajmDesignProvider`, merged over a `min-h-full` default.
-     *
-     * The default is not decoration. `NajmThemeProvider` renders a real `div`
-     * between the document body and the application, and a block box of
-     * automatic height severs any `h-full` chain below it — every application
-     * mounting this at the root was passing the same class back to repair that.
-     * It is inert where it is not needed: a percentage `min-height` against an
-     * auto-height parent imposes no constraint.
-     *
-     * Merged with `cn`, so a conflicting utility here still wins.
-     */
-    className?: string;
-    /**
-     * Translator for the pagination labels. Omit it and the packaged English
-     * applies — the provider is still worth mounting for design and preferences.
-     *
-     * Memoize it. The labels are rebuilt whenever its identity changes, and
-     * rebuilding them re-renders every table beneath.
-     */
-    t?: NajmTranslate;
-    /** Catalog prefix for the labels. Defaults to `"common.pagination"`. */
-    paginationKeyPrefix?: string;
-    /**
-     * Per-key overrides layered over the translated labels. Memoize it, for the
-     * same reason as `t`.
-     */
-    tableDefaults?: NTableDefaults;
-}
-/**
- * The one provider a Najm application mounts for UI concerns.
- *
- * Composes three things that otherwise get copied between projects: theme and
- * time zone state with async persistence, a `NajmDesignProvider` fed the live
- * theme, and `NTable` pagination labels derived from the application's
- * translator.
- *
- * What it deliberately does not own: auth, react-query, and the translation
- * catalog. Those stay in the application — folding them in would make a UI
- * package depend on `najm-auth` and `@tanstack/react-query` and turn it into a
- * framework. Persistence is injected as callbacks so this entry imports
- * nothing from `next`; see `NajmNextUIProvider` in `najm-kit/next`.
- *
- * Rendering this under an existing `NajmPreferencesProvider` is supported: the
- * outer one wins and the preference props here are ignored. That is what lets
- * an application with a runtime theme editor hoist preferences above its
- * design context without forking this component.
- */
-declare function NajmUIProvider({ children, design, initialDesign, className, t, paginationKeyPrefix, tableDefaults, initialTheme, initialTimeZone, onThemeChange, onTimeZoneChange, normalizeTimeZone, }: NajmUIProviderProps): react_jsx_runtime.JSX.Element;
-
-export { DEFAULT_TIME_ZONE as D, type NajmUIProviderProps as N, type NTableDefaults as a, NTableDefaultsProvider as b, type NajmPreferencesContextValue as c, NajmPreferencesProvider as d, type NajmPreferencesProviderProps as e, NajmUIProvider as f, useNajmPreferencesContext as g, useNajmTheme as h, useNajmTimeZone as i, useNTableDefaults as u };

package/dist/chunk-GHMR45H3.mjs

@@ -1,333 +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 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 };