@schandlergarcia/sf-web-components 1.0.0

package/dist/components/library/forms/FormField.js

@@ -0,0 +1,256 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import "react";
+import { ChevronDownIcon as m } from "@heroicons/react/24/outline";
+const p = "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950", x = "border-red-300 focus:ring-red-500 dark:border-red-700 dark:focus:ring-red-500";
+function i(...e) {
+  return e.filter(Boolean).join(" ");
+}
+function k({ label: e, required: n, htmlFor: s }) {
+  return e ? /* @__PURE__ */ c("label", { htmlFor: s, className: "block text-sm font-medium text-slate-700 dark:text-slate-200", children: [
+    e,
+    n ? /* @__PURE__ */ r("span", { className: "ml-0.5 text-red-500", children: "*" }) : null
+  ] }) : null;
+}
+function f({ error: e }) {
+  return e ? /* @__PURE__ */ r("p", { className: "text-xs text-red-600 dark:text-red-400", children: e }) : null;
+}
+function g({ description: e }) {
+  return e ? /* @__PURE__ */ r("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: e }) : null;
+}
+function u({ field: e, value: n, onChange: s, onBlur: a, error: d }) {
+  const t = e.inputType ?? e.type, o = { text: "text", email: "email", url: "url", number: "number", date: "date" }[t] ?? "text";
+  return /* @__PURE__ */ r(
+    "input",
+    {
+      id: e.id,
+      name: e.id,
+      type: o,
+      value: n ?? "",
+      onChange: (l) => s((e.type === "number", l.target.value)),
+      onBlur: a,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      readOnly: e.readOnly,
+      min: e.min,
+      max: e.max,
+      step: e.step,
+      className: i(p, d && x)
+    }
+  );
+}
+function v({ field: e, value: n, onChange: s, onBlur: a, error: d }) {
+  return /* @__PURE__ */ r(
+    "textarea",
+    {
+      id: e.id,
+      name: e.id,
+      value: n ?? "",
+      onChange: (t) => s(t.target.value),
+      onBlur: a,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      readOnly: e.readOnly,
+      rows: e.rows ?? 3,
+      className: i(
+        "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950",
+        d && x
+      )
+    }
+  );
+}
+function y({ field: e, value: n, onChange: s, onBlur: a, error: d }) {
+  const t = (e.options ?? []).map(
+    (o) => typeof o == "string" ? { value: o, label: o } : o
+  );
+  return /* @__PURE__ */ c("div", { className: "relative", children: [
+    /* @__PURE__ */ c(
+      "select",
+      {
+        id: e.id,
+        name: e.id,
+        value: n ?? "",
+        onChange: (o) => s(o.target.value),
+        onBlur: a,
+        disabled: e.disabled,
+        className: i(
+          "h-10 w-full appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-9 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950",
+          d && x
+        ),
+        children: [
+          e.placeholder ? /* @__PURE__ */ r("option", { value: "", children: e.placeholder }) : null,
+          t.map((o) => /* @__PURE__ */ r("option", { value: o.value, children: o.label }, o.value))
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      m,
+      {
+        className: "pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+function w({ field: e, value: n, onChange: s }) {
+  const a = (e.options ?? []).map(
+    (t) => typeof t == "string" ? { value: t, label: t } : t
+  ), d = e.layout ?? (a.length <= 4 ? "horizontal" : "vertical");
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i(
+        "flex gap-3",
+        d === "vertical" ? "flex-col" : "flex-row flex-wrap"
+      ),
+      role: "radiogroup",
+      "aria-labelledby": `${e.id}-label`,
+      children: a.map((t) => /* @__PURE__ */ c(
+        "label",
+        {
+          className: "inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700 dark:text-slate-200",
+          children: [
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "radio",
+                name: e.id,
+                value: t.value,
+                checked: n === t.value,
+                onChange: () => s(t.value),
+                disabled: e.disabled || t.disabled,
+                className: "h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
+              }
+            ),
+            t.label,
+            t.description ? /* @__PURE__ */ r("span", { className: "text-xs text-slate-400 dark:text-slate-500", children: t.description }) : null
+          ]
+        },
+        t.value
+      ))
+    }
+  );
+}
+function N({ field: e, value: n, onChange: s }) {
+  return /* @__PURE__ */ c("label", { className: "inline-flex cursor-pointer items-center gap-2.5 text-sm text-slate-700 dark:text-slate-200", children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "checkbox",
+        id: e.id,
+        name: e.id,
+        checked: !!n,
+        onChange: (a) => s(a.target.checked),
+        disabled: e.disabled,
+        className: "h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
+      }
+    ),
+    e.checkboxLabel ?? e.label
+  ] });
+}
+function F({ field: e, value: n, onChange: s }) {
+  const a = Array.isArray(n) ? n : [], d = (e.options ?? []).map(
+    (l) => typeof l == "string" ? { value: l, label: l } : l
+  ), t = e.layout ?? (d.length <= 4 ? "horizontal" : "vertical");
+  function o(l) {
+    const b = a.includes(l) ? a.filter((h) => h !== l) : [...a, l];
+    s(b);
+  }
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i(
+        "flex gap-3",
+        t === "vertical" ? "flex-col" : "flex-row flex-wrap"
+      ),
+      children: d.map((l) => /* @__PURE__ */ c(
+        "label",
+        {
+          className: "inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700 dark:text-slate-200",
+          children: [
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "checkbox",
+                checked: a.includes(l.value),
+                onChange: () => o(l.value),
+                disabled: e.disabled || l.disabled,
+                className: "h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
+              }
+            ),
+            l.label
+          ]
+        },
+        l.value
+      ))
+    }
+  );
+}
+function C({ field: e, value: n, onChange: s }) {
+  const a = !!n;
+  return /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": a,
+        onClick: () => s(!a),
+        disabled: e.disabled,
+        className: i(
+          "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
+          a ? "bg-brand-500" : "bg-slate-200 dark:bg-slate-700",
+          e.disabled && "cursor-not-allowed opacity-60"
+        ),
+        children: /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: i(
+              "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform",
+              a ? "translate-x-5" : "translate-x-0"
+            )
+          }
+        )
+      }
+    ),
+    e.toggleLabel ? /* @__PURE__ */ r("span", { className: "text-sm text-slate-700 dark:text-slate-200", children: e.toggleLabel }) : null
+  ] });
+}
+const E = {
+  text: u,
+  email: u,
+  url: u,
+  number: u,
+  date: u,
+  textarea: v,
+  select: y,
+  radio: w,
+  checkbox: N,
+  checkboxGroup: F,
+  toggle: C
+};
+function O({ field: e, value: n, error: s, touched: a, onChange: d, onBlur: t }) {
+  const o = E[e.type];
+  if (!o) return null;
+  const l = s && a, b = e.type === "checkbox";
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-1.5", children: [
+    b ? null : /* @__PURE__ */ r(k, { label: e.label, required: e.required, htmlFor: e.id }),
+    e.description && e.type !== "toggle" ? /* @__PURE__ */ r(g, { description: e.description }) : null,
+    /* @__PURE__ */ r(
+      o,
+      {
+        field: e,
+        value: n,
+        onChange: d,
+        onBlur: t,
+        error: l
+      }
+    ),
+    e.type === "toggle" && e.description ? /* @__PURE__ */ r(g, { description: e.description }) : null,
+    l ? /* @__PURE__ */ r(f, { error: s }) : null
+  ] });
+}
+export {
+  O as default
+};
+//# sourceMappingURL=FormField.js.map

package/dist/components/library/forms/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sources":["../../../../src/components/library/forms/FormField.jsx"],"sourcesContent":["import React from \"react\";\nimport { ChevronDownIcon } from \"@heroicons/react/24/outline\";\n\nconst INPUT_BASE =\n  \"h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950\";\n\nconst INPUT_ERROR =\n  \"border-red-300 focus:ring-red-500 dark:border-red-700 dark:focus:ring-red-500\";\n\nfunction cx(...classes) {\n  return classes.filter(Boolean).join(\" \");\n}\n\nfunction FieldLabel({ label, required, htmlFor }) {\n  if (!label) return null;\n  return (\n    <label htmlFor={htmlFor} className=\"block text-sm font-medium text-slate-700 dark:text-slate-200\">\n      {label}\n      {required ? <span className=\"ml-0.5 text-red-500\">*</span> : null}\n    </label>\n  );\n}\n\nfunction FieldError({ error }) {\n  if (!error) return null;\n  return <p className=\"text-xs text-red-600 dark:text-red-400\">{error}</p>;\n}\n\nfunction FieldDescription({ description }) {\n  if (!description) return null;\n  return <p className=\"text-xs text-slate-500 dark:text-slate-400\">{description}</p>;\n}\n\n// ─── Individual field renderers ───\n\nfunction TextField({ field, value, onChange, onBlur, error }) {\n  const inputType = field.inputType ?? field.type;\n  const type = { text: \"text\", email: \"email\", url: \"url\", number: \"number\", date: \"date\" }[inputType] ?? \"text\";\n\n  return (\n    <input\n      id={field.id}\n      name={field.id}\n      type={type}\n      value={value ?? \"\"}\n      onChange={(e) => onChange(field.type === \"number\" ? e.target.value : e.target.value)}\n      onBlur={onBlur}\n      placeholder={field.placeholder}\n      disabled={field.disabled}\n      readOnly={field.readOnly}\n      min={field.min}\n      max={field.max}\n      step={field.step}\n      className={cx(INPUT_BASE, error && INPUT_ERROR)}\n    />\n  );\n}\n\nfunction TextareaField({ field, value, onChange, onBlur, error }) {\n  return (\n    <textarea\n      id={field.id}\n      name={field.id}\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      onBlur={onBlur}\n      placeholder={field.placeholder}\n      disabled={field.disabled}\n      readOnly={field.readOnly}\n      rows={field.rows ?? 3}\n      className={cx(\n        \"w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950\",\n        error && INPUT_ERROR\n      )}\n    />\n  );\n}\n\nfunction SelectField({ field, value, onChange, onBlur, error }) {\n  const options = (field.options ?? []).map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n\n  return (\n    <div className=\"relative\">\n      <select\n        id={field.id}\n        name={field.id}\n        value={value ?? \"\"}\n        onChange={(e) => onChange(e.target.value)}\n        onBlur={onBlur}\n        disabled={field.disabled}\n        className={cx(\n          \"h-10 w-full appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-9 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950\",\n          error && INPUT_ERROR\n        )}\n      >\n        {field.placeholder ? (\n          <option value=\"\">{field.placeholder}</option>\n        ) : null}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      <ChevronDownIcon\n        className=\"pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 dark:text-slate-500\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction RadioField({ field, value, onChange }) {\n  const options = (field.options ?? []).map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n  const layout = field.layout ?? (options.length <= 4 ? \"horizontal\" : \"vertical\");\n\n  return (\n    <div\n      className={cx(\n        \"flex gap-3\",\n        layout === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\"\n      )}\n      role=\"radiogroup\"\n      aria-labelledby={`${field.id}-label`}\n    >\n      {options.map((opt) => (\n        <label\n          key={opt.value}\n          className=\"inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700 dark:text-slate-200\"\n        >\n          <input\n            type=\"radio\"\n            name={field.id}\n            value={opt.value}\n            checked={value === opt.value}\n            onChange={() => onChange(opt.value)}\n            disabled={field.disabled || opt.disabled}\n            className=\"h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800\"\n          />\n          {opt.label}\n          {opt.description ? (\n            <span className=\"text-xs text-slate-400 dark:text-slate-500\">{opt.description}</span>\n          ) : null}\n        </label>\n      ))}\n    </div>\n  );\n}\n\nfunction CheckboxField({ field, value, onChange }) {\n  return (\n    <label className=\"inline-flex cursor-pointer items-center gap-2.5 text-sm text-slate-700 dark:text-slate-200\">\n      <input\n        type=\"checkbox\"\n        id={field.id}\n        name={field.id}\n        checked={Boolean(value)}\n        onChange={(e) => onChange(e.target.checked)}\n        disabled={field.disabled}\n        className=\"h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800\"\n      />\n      {field.checkboxLabel ?? field.label}\n    </label>\n  );\n}\n\nfunction CheckboxGroupField({ field, value, onChange }) {\n  const selected = Array.isArray(value) ? value : [];\n  const options = (field.options ?? []).map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n  const layout = field.layout ?? (options.length <= 4 ? \"horizontal\" : \"vertical\");\n\n  function toggleValue(optValue) {\n    const next = selected.includes(optValue)\n      ? selected.filter((v) => v !== optValue)\n      : [...selected, optValue];\n    onChange(next);\n  }\n\n  return (\n    <div\n      className={cx(\n        \"flex gap-3\",\n        layout === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\"\n      )}\n    >\n      {options.map((opt) => (\n        <label\n          key={opt.value}\n          className=\"inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700 dark:text-slate-200\"\n        >\n          <input\n            type=\"checkbox\"\n            checked={selected.includes(opt.value)}\n            onChange={() => toggleValue(opt.value)}\n            disabled={field.disabled || opt.disabled}\n            className=\"h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800\"\n          />\n          {opt.label}\n        </label>\n      ))}\n    </div>\n  );\n}\n\nfunction ToggleField({ field, value, onChange }) {\n  const checked = Boolean(value);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={checked}\n        onClick={() => onChange(!checked)}\n        disabled={field.disabled}\n        className={cx(\n          \"relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950\",\n          checked ? \"bg-brand-500\" : \"bg-slate-200 dark:bg-slate-700\",\n          field.disabled && \"cursor-not-allowed opacity-60\"\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cx(\n            \"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform\",\n            checked ? \"translate-x-5\" : \"translate-x-0\"\n          )}\n        />\n      </button>\n      {field.toggleLabel ? (\n        <span className=\"text-sm text-slate-700 dark:text-slate-200\">{field.toggleLabel}</span>\n      ) : null}\n    </div>\n  );\n}\n\n// ─── Main FormField ───\n\nconst FIELD_RENDERERS = {\n  text: TextField,\n  email: TextField,\n  url: TextField,\n  number: TextField,\n  date: TextField,\n  textarea: TextareaField,\n  select: SelectField,\n  radio: RadioField,\n  checkbox: CheckboxField,\n  checkboxGroup: CheckboxGroupField,\n  toggle: ToggleField,\n};\n\n/**\n * Renders a single form field with label, description, error message,\n * and the appropriate input type.\n */\nexport default function FormField({ field, value, error, touched, onChange, onBlur }) {\n  const Renderer = FIELD_RENDERERS[field.type];\n  if (!Renderer) return null;\n\n  const showError = error && touched;\n  const noLabel = field.type === \"checkbox\";\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {!noLabel ? (\n        <FieldLabel label={field.label} required={field.required} htmlFor={field.id} />\n      ) : null}\n      {field.description && field.type !== \"toggle\" ? (\n        <FieldDescription description={field.description} />\n      ) : null}\n      <Renderer\n        field={field}\n        value={value}\n        onChange={onChange}\n        onBlur={onBlur}\n        error={showError}\n      />\n      {field.type === \"toggle\" && field.description ? (\n        <FieldDescription description={field.description} />\n      ) : null}\n      {showError ? <FieldError error={error} /> : null}\n    </div>\n  );\n}\n"],"names":["INPUT_BASE","INPUT_ERROR","cx","classes","FieldLabel","label","required","htmlFor","jsxs","jsx","FieldError","error","FieldDescription","description","TextField","field","value","onChange","onBlur","inputType","type","e","TextareaField","SelectField","options","opt","ChevronDownIcon","RadioField","layout","CheckboxField","CheckboxGroupField","selected","toggleValue","optValue","next","v","ToggleField","checked","FIELD_RENDERERS","FormField","touched","Renderer","showError","noLabel"],"mappings":"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"}

package/dist/components/library/forms/FormModal.js

@@ -0,0 +1,161 @@
+import { jsx as e, jsxs as r, Fragment as y } from "react/jsx-runtime";
+import { useEffect as m, useCallback as k } from "react";
+import { createPortal as w } from "react-dom";
+import { AnimatePresence as N, motion as c } from "framer-motion";
+import { XMarkIcon as S } from "@heroicons/react/24/outline";
+import E from "../ui/Spinner.js";
+import A from "./FormRenderer.js";
+import j from "./useFormState.js";
+const F = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 }
+}, L = {
+  hidden: { opacity: 0, y: 24, scale: 0.97 },
+  visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", damping: 25, stiffness: 350 } },
+  exit: { opacity: 0, y: 16, scale: 0.97, transition: { duration: 0.15 } }
+}, b = {
+  sm: "max-w-md",
+  md: "max-w-xl",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+};
+function D({
+  isOpen: i = !1,
+  onClose: a,
+  title: d,
+  subtitle: o,
+  sections: n = [],
+  initialValues: u = {},
+  onSubmit: f,
+  submitLabel: x = "Save",
+  cancelLabel: h = "Cancel",
+  size: v = "lg",
+  destructive: g = !1,
+  minSubmitMs: p
+}) {
+  const t = j({
+    initialValues: u,
+    sections: n,
+    minSubmitMs: p,
+    onSubmit: async (l) => {
+      await f?.(l), a?.();
+    }
+  });
+  m(() => {
+    i && t.reset();
+  }, [i]);
+  const s = k(
+    (l) => {
+      l.key === "Escape" && a?.();
+    },
+    [a]
+  );
+  return m(() => {
+    if (i)
+      return document.addEventListener("keydown", s), document.body.style.overflow = "hidden", () => {
+        document.removeEventListener("keydown", s), document.body.style.overflow = "";
+      };
+  }, [i, s]), typeof document > "u" ? null : w(
+    /* @__PURE__ */ e(N, { children: i ? /* @__PURE__ */ r("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[10vh] sm:pt-[12vh]", children: [
+      /* @__PURE__ */ e(
+        c.div,
+        {
+          className: "fixed inset-0 bg-black/40 backdrop-blur-sm",
+          variants: F,
+          initial: "hidden",
+          animate: "visible",
+          exit: "hidden",
+          transition: { duration: 0.2 },
+          onClick: a,
+          "aria-hidden": "true"
+        },
+        "overlay"
+      ),
+      /* @__PURE__ */ r(
+        c.div,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": d,
+          variants: L,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          className: [
+            "relative z-10 flex w-full flex-col rounded-xl border border-slate-200 bg-white shadow-xl dark:border-slate-800 dark:bg-slate-900",
+            b[v] ?? b.lg,
+            "max-h-[80vh]"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ r("div", { className: "flex items-start justify-between border-b border-slate-100 px-6 py-4 dark:border-slate-800", children: [
+              /* @__PURE__ */ r("div", { children: [
+                /* @__PURE__ */ e("h2", { className: "text-base font-semibold text-slate-900 dark:text-slate-50", children: d }),
+                o ? /* @__PURE__ */ e("p", { className: "mt-0.5 text-sm text-slate-500 dark:text-slate-400", children: o }) : null
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: a,
+                  className: "rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300",
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ e(S, { className: "h-5 w-5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto px-6 py-5", children: /* @__PURE__ */ e(
+              A,
+              {
+                sections: n,
+                values: t.values,
+                errors: t.errors,
+                touched: t.touched,
+                onFieldChange: t.setValue,
+                onFieldBlur: t.setTouched,
+                formError: t.errors._form
+              }
+            ) }),
+            /* @__PURE__ */ r("div", { className: "flex items-center justify-between border-t border-slate-100 px-6 py-4 dark:border-slate-800", children: [
+              /* @__PURE__ */ e("div", { className: "text-xs text-slate-400 dark:text-slate-500", children: t.isDirty ? "Unsaved changes" : " " }),
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: a,
+                    className: "inline-flex h-9 items-center rounded-lg border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700",
+                    children: h
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: t.handleSubmit,
+                    disabled: t.isSubmitting,
+                    className: [
+                      "inline-flex h-9 items-center gap-2 rounded-lg border border-transparent px-4 text-sm font-medium text-white shadow-sm transition",
+                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900",
+                      "disabled:cursor-not-allowed disabled:opacity-60",
+                      g ? "bg-red-600 hover:bg-red-500 focus-visible:ring-red-500 dark:bg-red-600 dark:hover:bg-red-500" : "bg-brand-600 hover:bg-brand-500 focus-visible:ring-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400"
+                    ].join(" "),
+                    children: t.isSubmitting ? /* @__PURE__ */ r(y, { children: [
+                      /* @__PURE__ */ e(E, { size: "sm", tone: "white", label: "Submitting" }),
+                      "Saving…"
+                    ] }) : x
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        "panel"
+      )
+    ] }) : null }),
+    document.body
+  );
+}
+export {
+  D as default
+};
+//# sourceMappingURL=FormModal.js.map

package/dist/components/library/forms/FormModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormModal.js","sources":["../../../../src/components/library/forms/FormModal.jsx"],"sourcesContent":["import React, { useEffect, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { XMarkIcon } from \"@heroicons/react/24/outline\";\nimport Spinner from \"../ui/Spinner\";\nimport FormRenderer from \"./FormRenderer\";\nimport useFormState from \"./useFormState\";\n\nconst OVERLAY_VARIANTS = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1 },\n};\n\nconst PANEL_VARIANTS = {\n  hidden: { opacity: 0, y: 24, scale: 0.97 },\n  visible: { opacity: 1, y: 0, scale: 1, transition: { type: \"spring\", damping: 25, stiffness: 350 } },\n  exit: { opacity: 0, y: 16, scale: 0.97, transition: { duration: 0.15 } },\n};\n\n/**\n * Size → max-width mapping.\n */\nconst SIZE_CLASSES = {\n  sm: \"max-w-md\",\n  md: \"max-w-xl\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n};\n\n/**\n * Modal dialog for creating or editing records.\n * Wraps FormRenderer + useFormState in an animated overlay.\n *\n * @param {boolean}  isOpen — whether the modal is visible\n * @param {Function} onClose — close handler\n * @param {string}   title — modal title (e.g. \"Edit Service\", \"New Incident\")\n * @param {string}   subtitle — optional subtitle\n * @param {Array}    sections — form schema sections\n * @param {Object}   initialValues — prefill for editing (empty = create mode)\n * @param {Function} onSubmit — async (values) => void, called on valid submit\n * @param {string}   submitLabel — submit button text (default: \"Save\")\n * @param {string}   cancelLabel — cancel button text (default: \"Cancel\")\n * @param {string}   size — \"sm\" | \"md\" | \"lg\" | \"xl\" (default: \"lg\")\n * @param {boolean}  destructive — if true, submit button is red (for delete confirmations)\n */\nexport default function FormModal({\n  isOpen = false,\n  onClose,\n  title,\n  subtitle,\n  sections = [],\n  initialValues = {},\n  onSubmit,\n  submitLabel = \"Save\",\n  cancelLabel = \"Cancel\",\n  size = \"lg\",\n  destructive = false,\n  minSubmitMs,\n}) {\n  const form = useFormState({\n    initialValues,\n    sections,\n    minSubmitMs,\n    onSubmit: async (vals) => {\n      await onSubmit?.(vals);\n      onClose?.();\n    },\n  });\n\n  useEffect(() => {\n    if (isOpen) form.reset();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  const onKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    if (!isOpen) return;\n    document.addEventListener(\"keydown\", onKeyDown);\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n      document.body.style.overflow = \"\";\n    };\n  }, [isOpen, onKeyDown]);\n\n  if (typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <AnimatePresence>\n      {isOpen ? (\n        <div className=\"fixed inset-0 z-50 flex items-start justify-center px-4 pt-[10vh] sm:pt-[12vh]\">\n          {/* Backdrop */}\n          <motion.div\n            key=\"overlay\"\n            className=\"fixed inset-0 bg-black/40 backdrop-blur-sm\"\n            variants={OVERLAY_VARIANTS}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n            transition={{ duration: 0.2 }}\n            onClick={onClose}\n            aria-hidden=\"true\"\n          />\n\n          {/* Panel */}\n          <motion.div\n            key=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            variants={PANEL_VARIANTS}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            className={[\n              \"relative z-10 flex w-full flex-col rounded-xl border border-slate-200 bg-white shadow-xl dark:border-slate-800 dark:bg-slate-900\",\n              SIZE_CLASSES[size] ?? SIZE_CLASSES.lg,\n              \"max-h-[80vh]\",\n            ].join(\" \")}\n          >\n            {/* Header */}\n            <div className=\"flex items-start justify-between border-b border-slate-100 px-6 py-4 dark:border-slate-800\">\n              <div>\n                <h2 className=\"text-base font-semibold text-slate-900 dark:text-slate-50\">\n                  {title}\n                </h2>\n                {subtitle ? (\n                  <p className=\"mt-0.5 text-sm text-slate-500 dark:text-slate-400\">{subtitle}</p>\n                ) : null}\n              </div>\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300\"\n                aria-label=\"Close\"\n              >\n                <XMarkIcon className=\"h-5 w-5\" />\n              </button>\n            </div>\n\n            {/* Body — scrollable */}\n            <div className=\"flex-1 overflow-y-auto px-6 py-5\">\n              <FormRenderer\n                sections={sections}\n                values={form.values}\n                errors={form.errors}\n                touched={form.touched}\n                onFieldChange={form.setValue}\n                onFieldBlur={form.setTouched}\n                formError={form.errors._form}\n              />\n            </div>\n\n            {/* Footer */}\n            <div className=\"flex items-center justify-between border-t border-slate-100 px-6 py-4 dark:border-slate-800\">\n              <div className=\"text-xs text-slate-400 dark:text-slate-500\">\n                {form.isDirty ? \"Unsaved changes\" : \"\\u00A0\"}\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={onClose}\n                  className=\"inline-flex h-9 items-center rounded-lg border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700\"\n                >\n                  {cancelLabel}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={form.handleSubmit}\n                  disabled={form.isSubmitting}\n                  className={[\n                    \"inline-flex h-9 items-center gap-2 rounded-lg border border-transparent px-4 text-sm font-medium text-white shadow-sm transition\",\n                    \"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900\",\n                    \"disabled:cursor-not-allowed disabled:opacity-60\",\n                    destructive\n                      ? \"bg-red-600 hover:bg-red-500 focus-visible:ring-red-500 dark:bg-red-600 dark:hover:bg-red-500\"\n                      : \"bg-brand-600 hover:bg-brand-500 focus-visible:ring-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400\",\n                  ].join(\" \")}\n                >\n                  {form.isSubmitting ? (\n                    <>\n                      <Spinner size=\"sm\" tone=\"white\" label=\"Submitting\" />\n                      Saving…\n                    </>\n                  ) : submitLabel}\n                </button>\n              </div>\n            </div>\n          </motion.div>\n        </div>\n      ) : null}\n    </AnimatePresence>,\n    document.body\n  );\n}\n"],"names":["OVERLAY_VARIANTS","PANEL_VARIANTS","SIZE_CLASSES","FormModal","isOpen","onClose","title","subtitle","sections","initialValues","onSubmit","submitLabel","cancelLabel","size","destructive","minSubmitMs","form","useFormState","vals","useEffect","onKeyDown","useCallback","e","createPortal","AnimatePresence","jsxs","jsx","motion","XMarkIcon","FormRenderer","Fragment","Spinner"],"mappings":"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"}

package/dist/components/library/forms/FormRenderer.js

@@ -0,0 +1,32 @@
+import { jsxs as n, jsx as d } from "react/jsx-runtime";
+import "react";
+import p from "./FormSection.js";
+function u({
+  sections: t = [],
+  values: a = {},
+  errors: o = {},
+  touched: m = {},
+  onFieldChange: i,
+  onFieldBlur: s,
+  formError: r
+}) {
+  return /* @__PURE__ */ n("div", { className: "space-y-8", children: [
+    r ? /* @__PURE__ */ d("div", { className: "rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-300", children: r }) : null,
+    t.map((e, l) => /* @__PURE__ */ d(
+      p,
+      {
+        section: e,
+        values: a,
+        errors: o,
+        touched: m,
+        onFieldChange: i,
+        onFieldBlur: s
+      },
+      e.id ?? l
+    ))
+  ] });
+}
+export {
+  u as default
+};
+//# sourceMappingURL=FormRenderer.js.map

package/dist/components/library/forms/FormRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.js","sources":["../../../../src/components/library/forms/FormRenderer.jsx"],"sourcesContent":["import React from \"react\";\nimport FormSection from \"./FormSection\";\n\n/**\n * Renders a complete form from a schema definition.\n * Pairs with useFormState for state management.\n *\n * @param {Array}    sections — form schema sections\n * @param {Object}   values   — current form values\n * @param {Object}   errors   — current validation errors\n * @param {Object}   touched  — which fields have been touched\n * @param {Function} onFieldChange — (fieldId, value) => void\n * @param {Function} onFieldBlur — (fieldId) => void\n * @param {string}   formError — top-level form error (e.g. submission failure)\n */\nexport default function FormRenderer({\n  sections = [],\n  values = {},\n  errors = {},\n  touched = {},\n  onFieldChange,\n  onFieldBlur,\n  formError,\n}) {\n  return (\n    <div className=\"space-y-8\">\n      {formError ? (\n        <div className=\"rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-300\">\n          {formError}\n        </div>\n      ) : null}\n\n      {sections.map((section, idx) => (\n        <FormSection\n          key={section.id ?? idx}\n          section={section}\n          values={values}\n          errors={errors}\n          touched={touched}\n          onFieldChange={onFieldChange}\n          onFieldBlur={onFieldBlur}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["FormRenderer","sections","values","errors","touched","onFieldChange","onFieldBlur","formError","jsxs","jsx","section","idx","FormSection"],"mappings":";;;AAeA,SAAwBA,EAAa;AAAA,EACnC,UAAAC,IAAW,CAAA;AAAA,EACX,QAAAC,IAAS,CAAA;AAAA,EACT,QAAAC,IAAS,CAAA;AAAA,EACT,SAAAC,IAAU,CAAA;AAAA,EACV,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AACF,GAAG;AACD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAAD,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,sIACZ,aACH,IACE;AAAA,IAEHR,EAAS,IAAI,CAACS,GAASC,MACtB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEC,SAAAF;AAAA,QACA,QAAAR;AAAA,QACA,QAAAC;AAAA,QACA,SAAAC;AAAA,QACA,eAAAC;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MANKI,EAAQ,MAAMC;AAAA,IAAA,CAQtB;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/library/forms/FormSection.js

@@ -0,0 +1,49 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import "react";
+import p from "./FormField.js";
+const x = /* @__PURE__ */ new Set([
+  "textarea",
+  "radio",
+  "checkboxGroup"
+]);
+function b({
+  section: t,
+  values: l,
+  errors: d,
+  touched: o,
+  onFieldChange: n,
+  onFieldBlur: i
+}) {
+  const s = t.fields ?? [];
+  return s.length ? /* @__PURE__ */ a("fieldset", { className: "space-y-4", children: [
+    t.title ? /* @__PURE__ */ a("div", { className: "border-b border-slate-100 pb-3 dark:border-slate-800", children: [
+      /* @__PURE__ */ r("legend", { className: "text-sm font-semibold text-slate-900 dark:text-slate-50", children: t.title }),
+      t.description ? /* @__PURE__ */ r("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: t.description }) : null
+    ] }) : null,
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2", children: s.map((e) => {
+      const c = e.colSpan ?? (x.has(e.type) ? 2 : 1);
+      return /* @__PURE__ */ r(
+        "div",
+        {
+          className: c === 2 ? "sm:col-span-2" : void 0,
+          children: /* @__PURE__ */ r(
+            p,
+            {
+              field: e,
+              value: l[e.id],
+              error: d[e.id],
+              touched: o[e.id],
+              onChange: (m) => n(e.id, m),
+              onBlur: () => i(e.id)
+            }
+          )
+        },
+        e.id
+      );
+    }) })
+  ] }) : null;
+}
+export {
+  b as default
+};
+//# sourceMappingURL=FormSection.js.map

package/dist/components/library/forms/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","sources":["../../../../src/components/library/forms/FormSection.jsx"],"sourcesContent":["import React from \"react\";\nimport FormField from \"./FormField\";\n\n/**\n * Fields that naturally span full width by default.\n */\nconst FULL_WIDTH_TYPES = new Set([\n  \"textarea\",\n  \"radio\",\n  \"checkboxGroup\",\n]);\n\n/**\n * A titled section of a form with a 2-column grid layout.\n * Fields default to 1-column (half width) unless the type is naturally\n * full-width or the field specifies `colSpan: 2`.\n */\nexport default function FormSection({\n  section,\n  values,\n  errors,\n  touched,\n  onFieldChange,\n  onFieldBlur,\n}) {\n  const fields = section.fields ?? [];\n  if (!fields.length) return null;\n\n  return (\n    <fieldset className=\"space-y-4\">\n      {section.title ? (\n        <div className=\"border-b border-slate-100 pb-3 dark:border-slate-800\">\n          <legend className=\"text-sm font-semibold text-slate-900 dark:text-slate-50\">\n            {section.title}\n          </legend>\n          {section.description ? (\n            <p className=\"mt-0.5 text-xs text-slate-500 dark:text-slate-400\">\n              {section.description}\n            </p>\n          ) : null}\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2\">\n        {fields.map((field) => {\n          const span =\n            field.colSpan ??\n            (FULL_WIDTH_TYPES.has(field.type) ? 2 : 1);\n\n          return (\n            <div\n              key={field.id}\n              className={span === 2 ? \"sm:col-span-2\" : undefined}\n            >\n              <FormField\n                field={field}\n                value={values[field.id]}\n                error={errors[field.id]}\n                touched={touched[field.id]}\n                onChange={(val) => onFieldChange(field.id, val)}\n                onBlur={() => onFieldBlur(field.id)}\n              />\n            </div>\n          );\n        })}\n      </div>\n    </fieldset>\n  );\n}\n"],"names":["FULL_WIDTH_TYPES","FormSection","section","values","errors","touched","onFieldChange","onFieldBlur","fields","jsxs","jsx","field","span","FormField","val"],"mappings":";;;AAMA,MAAMA,wBAAuB,IAAI;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAOD,SAAwBC,EAAY;AAAA,EAClC,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AACF,GAAG;AACD,QAAMC,IAASN,EAAQ,UAAU,CAAA;AACjC,SAAKM,EAAO,SAGV,gBAAAC,EAAC,YAAA,EAAS,WAAU,aACjB,UAAA;AAAA,IAAAP,EAAQ,QACP,gBAAAO,EAAC,OAAA,EAAI,WAAU,wDACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAA,EAAO,WAAU,2DACf,UAAAR,EAAQ,OACX;AAAA,MACCA,EAAQ,cACP,gBAAAQ,EAAC,KAAA,EAAE,WAAU,qDACV,UAAAR,EAAQ,aACX,IACE;AAAA,IAAA,EAAA,CACN,IACE;AAAA,sBAEH,OAAA,EAAI,WAAU,mDACZ,UAAAM,EAAO,IAAI,CAACG,MAAU;AACrB,YAAMC,IACJD,EAAM,YACLX,EAAiB,IAAIW,EAAM,IAAI,IAAI,IAAI;AAE1C,aACE,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAWE,MAAS,IAAI,kBAAkB;AAAA,UAE1C,UAAA,gBAAAF;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,OAAAF;AAAA,cACA,OAAOR,EAAOQ,EAAM,EAAE;AAAA,cACtB,OAAOP,EAAOO,EAAM,EAAE;AAAA,cACtB,SAASN,EAAQM,EAAM,EAAE;AAAA,cACzB,UAAU,CAACG,MAAQR,EAAcK,EAAM,IAAIG,CAAG;AAAA,cAC9C,QAAQ,MAAMP,EAAYI,EAAM,EAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC;AAAA,QAVKA,EAAM;AAAA,MAAA;AAAA,IAajB,CAAC,EAAA,CACH;AAAA,EAAA,GACF,IAxCyB;AA0C7B;"}