@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/dist/components/library/filters/SelectFilter.d.ts

@@ -1,16 +1,10 @@
-export interface SelectOption {
-    value: string;
-    label: string;
-}
-export interface SelectFilterProps {
-    value?: string;
-    onChange?: (value: string) => void;
-    options?: (string | SelectOption)[];
-    label?: string;
-    placeholder?: string;
-    className?: string;
-}
 /**
  * Dropdown select filter.
+ *
+ * @param {string} value — current selected value
+ * @param {Function} onChange — (value) => void
+ * @param {Array} options — [{ value, label }] or ["string", ...]
+ * @param {string} label — visible label
+ * @param {string} placeholder — placeholder when no value selected
  */
-export default function SelectFilter({ value, onChange, options, label, placeholder, className, }: SelectFilterProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectFilter({ value, onChange, options, label, placeholder, className, }: string): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/filters/SelectFilter.js

@@ -1,6 +1,7 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import "react";
 import { ChevronDownIcon as u } from "@heroicons/react/24/outline";
-function f({
+function h({
   value: r = "all",
   onChange: s,
   options: i = [],
@@ -38,6 +39,6 @@ function f({
   ] });
 }
 export {
-  f as default
+  h as default
 };
 //# sourceMappingURL=SelectFilter.js.map

package/dist/components/library/filters/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sources":["../../../../src/components/library/filters/SelectFilter.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@heroicons/react/24/outline\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectFilterProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  options?: (string | SelectOption)[];\n  label?: string;\n  placeholder?: string;\n  className?: string;\n}\n\n/**\n * Dropdown select filter.\n */\nexport default function SelectFilter({\n  value = \"all\",\n  onChange,\n  options = [],\n  label,\n  placeholder,\n  className = \"\",\n}: SelectFilterProps) {\n  const normalizedOptions = options.map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n\n  return (\n    <div className={[\"relative inline-flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      {label ? (\n        <span className=\"shrink-0 text-xs font-medium text-slate-500 dark:text-slate-400\">\n          {label}\n        </span>\n      ) : null}\n      <div className=\"relative\">\n        <select\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className=\"h-9 appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-8 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          aria-label={label ?? placeholder ?? \"Filter\"}\n        >\n          {placeholder ? (\n            <option value=\"all\">{placeholder}</option>\n          ) : null}\n          {normalizedOptions.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 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    </div>\n  );\n}\n"],"names":["SelectFilter","value","onChange","options","label","placeholder","className","normalizedOptions","opt","jsxs","jsx","ChevronDownIcon"],"mappings":";;AAmBA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAsB;AACpB,QAAMC,IAAoBJ,EAAQ;AAAA,IAAI,CAACK,MACrC,OAAOA,KAAQ,WAAW,EAAE,OAAOA,GAAK,OAAOA,MAAQA;AAAA,EAAA;AAGzD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,CAAC,2CAA2CH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,IAAAF,IACC,gBAAAM,EAAC,QAAA,EAAK,WAAU,mEACb,aACH,IACE;AAAA,IACJ,gBAAAD,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAAR;AAAA,UACA,UAAU,CAAC,MAAMC,IAAW,EAAE,OAAO,KAAK;AAAA,UAC1C,WAAU;AAAA,UACV,cAAYE,KAASC,KAAe;AAAA,UAEnC,UAAA;AAAA,YAAAA,IACC,gBAAAK,EAAC,UAAA,EAAO,OAAM,OAAO,aAAY,IAC/B;AAAA,YACHH,EAAkB,IAAI,CAACC,MACtB,gBAAAE,EAAC,UAAA,EAAuB,OAAOF,EAAI,OAChC,UAAAA,EAAI,MAAA,GADMA,EAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAE;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"SelectFilter.js","sources":["../../../../src/components/library/filters/SelectFilter.jsx"],"sourcesContent":["import React from \"react\";\nimport { ChevronDownIcon } from \"@heroicons/react/24/outline\";\n\n/**\n * Dropdown select filter.\n *\n * @param {string} value — current selected value\n * @param {Function} onChange — (value) => void\n * @param {Array} options — [{ value, label }] or [\"string\", ...]\n * @param {string} label — visible label\n * @param {string} placeholder — placeholder when no value selected\n */\nexport default function SelectFilter({\n  value = \"all\",\n  onChange,\n  options = [],\n  label,\n  placeholder,\n  className = \"\",\n}) {\n  const normalizedOptions = options.map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n\n  return (\n    <div className={[\"relative inline-flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      {label ? (\n        <span className=\"shrink-0 text-xs font-medium text-slate-500 dark:text-slate-400\">\n          {label}\n        </span>\n      ) : null}\n      <div className=\"relative\">\n        <select\n          value={value}\n          onChange={(e) => onChange?.(e.target.value)}\n          className=\"h-9 appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-8 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          aria-label={label ?? placeholder ?? \"Filter\"}\n        >\n          {placeholder ? (\n            <option value=\"all\">{placeholder}</option>\n          ) : null}\n          {normalizedOptions.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 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    </div>\n  );\n}\n"],"names":["SelectFilter","value","onChange","options","label","placeholder","className","normalizedOptions","opt","jsxs","jsx","ChevronDownIcon"],"mappings":";;;AAYA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAG;AACD,QAAMC,IAAoBJ,EAAQ;AAAA,IAAI,CAACK,MACrC,OAAOA,KAAQ,WAAW,EAAE,OAAOA,GAAK,OAAOA,MAAQA;AAAA,EAAA;AAGzD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,CAAC,2CAA2CH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,IAAAF,IACC,gBAAAM,EAAC,QAAA,EAAK,WAAU,mEACb,aACH,IACE;AAAA,IACJ,gBAAAD,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAAR;AAAA,UACA,UAAU,CAAC,MAAMC,IAAW,EAAE,OAAO,KAAK;AAAA,UAC1C,WAAU;AAAA,UACV,cAAYE,KAASC,KAAe;AAAA,UAEnC,UAAA;AAAA,YAAAA,IACC,gBAAAK,EAAC,UAAA,EAAO,OAAM,OAAO,aAAY,IAC/B;AAAA,YACHH,EAAkB,IAAI,CAACC,MACtB,gBAAAE,EAAC,UAAA,EAAuB,OAAOF,EAAI,OAChC,UAAAA,EAAI,MAAA,GADMA,EAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAE;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/library/filters/ToggleFilter.d.ts

@@ -1,10 +1,8 @@
-export interface ToggleFilterProps {
-    value?: boolean;
-    onChange?: (value: boolean) => void;
-    label?: string;
-    className?: string;
-}
 /**
  * Toggle switch filter.
+ *
+ * @param {boolean} value — current on/off state
+ * @param {Function} onChange — (boolean) => void
+ * @param {string} label — visible label
  */
-export default function ToggleFilter({ value, onChange, label, className, }: ToggleFilterProps): import("react/jsx-runtime").JSX.Element;
+export default function ToggleFilter({ value, onChange, label, className, }: boolean): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/filters/ToggleFilter.js

@@ -1,5 +1,6 @@
 import { jsxs as o, jsx as n } from "react/jsx-runtime";
-function a({
+import "react";
+function l({
   value: e = !1,
   onChange: r,
   label: t,
@@ -42,6 +43,6 @@ function a({
   );
 }
 export {
-  a as default
+  l as default
 };
 //# sourceMappingURL=ToggleFilter.js.map

package/dist/components/library/filters/ToggleFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleFilter.js","sources":["../../../../src/components/library/filters/ToggleFilter.tsx"],"sourcesContent":["export interface ToggleFilterProps {\n  value?: boolean;\n  onChange?: (value: boolean) => void;\n  label?: string;\n  className?: string;\n}\n\n/**\n * Toggle switch filter.\n */\nexport default function ToggleFilter({\n  value = false,\n  onChange,\n  label,\n  className = \"\",\n}: ToggleFilterProps) {\n  return (\n    <label\n      className={[\n        \"inline-flex cursor-pointer items-center gap-2\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={value}\n        onClick={() => onChange?.(!value)}\n        className={[\n          \"relative inline-flex h-5 w-9 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          value\n            ? \"bg-brand-500\"\n            : \"bg-slate-200 dark:bg-slate-700\",\n        ].join(\" \")}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={[\n            \"pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform\",\n            value ? \"translate-x-4\" : \"translate-x-0\",\n          ].join(\" \")}\n        />\n      </button>\n      {label ? (\n        <span className=\"text-sm font-medium text-slate-700 dark:text-slate-200\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n}\n"],"names":["ToggleFilter","value","onChange","label","className","jsxs","jsx"],"mappings":";AAUA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAsB;AACpB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAcL;AAAA,YACd,SAAS,MAAMC,IAAW,CAACD,CAAK;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACAA,IACI,iBACA;AAAA,YAAA,EACJ,KAAK,GAAG;AAAA,YAEV,UAAA,gBAAAK;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAW;AAAA,kBACT;AAAA,kBACAL,IAAQ,kBAAkB;AAAA,gBAAA,EAC1B,KAAK,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAEDE,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,0DACb,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"ToggleFilter.js","sources":["../../../../src/components/library/filters/ToggleFilter.jsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * Toggle switch filter.\n *\n * @param {boolean} value — current on/off state\n * @param {Function} onChange — (boolean) => void\n * @param {string} label — visible label\n */\nexport default function ToggleFilter({\n  value = false,\n  onChange,\n  label,\n  className = \"\",\n}) {\n  return (\n    <label\n      className={[\n        \"inline-flex cursor-pointer items-center gap-2\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={value}\n        onClick={() => onChange?.(!value)}\n        className={[\n          \"relative inline-flex h-5 w-9 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          value\n            ? \"bg-brand-500\"\n            : \"bg-slate-200 dark:bg-slate-700\",\n        ].join(\" \")}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={[\n            \"pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform\",\n            value ? \"translate-x-4\" : \"translate-x-0\",\n          ].join(\" \")}\n        />\n      </button>\n      {label ? (\n        <span className=\"text-sm font-medium text-slate-700 dark:text-slate-200\">\n          {label}\n        </span>\n      ) : null}\n    </label>\n  );\n}\n"],"names":["ToggleFilter","value","onChange","label","className","jsxs","jsx"],"mappings":";;AASA,SAAwBA,EAAa;AAAA,EACnC,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAG;AACD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAcL;AAAA,YACd,SAAS,MAAMC,IAAW,CAACD,CAAK;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACAA,IACI,iBACA;AAAA,YAAA,EACJ,KAAK,GAAG;AAAA,YAEV,UAAA,gBAAAK;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAW;AAAA,kBACT;AAAA,kBACAL,IAAQ,kBAAkB;AAAA,gBAAA,EAC1B,KAAK,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAEDE,IACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,0DACb,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/library/forms/FormField.d.ts

@@ -1,14 +1,12 @@
-import type { FormField as FormFieldType } from "./FormRenderer";
-export interface FormFieldProps {
-    field: FormFieldType & Record<string, unknown>;
-    value: unknown;
-    error?: string;
-    touched?: boolean;
-    onChange: (value: unknown) => void;
-    onBlur: () => void;
-}
 /**
  * Renders a single form field with label, description, error message,
  * and the appropriate input type.
  */
-export default function FormField({ field, value, error, touched, onChange, onBlur }: FormFieldProps): import("react/jsx-runtime").JSX.Element | null;
+export default function FormField({ field, value, error, touched, onChange, onBlur }: {
+    field: any;
+    value: any;
+    error: any;
+    touched: any;
+    onChange: any;
+    onBlur: any;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,4 +1,5 @@
 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) {
@@ -228,7 +229,7 @@ const E = {
   checkboxGroup: F,
   toggle: C
 };
-function L({ field: e, value: n, error: s, touched: a, onChange: d, onBlur: t }) {
+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";
@@ -242,7 +243,7 @@ function L({ field: e, value: n, error: s, touched: a, onChange: d, onBlur: t })
         value: n,
         onChange: d,
         onBlur: t,
-        error: !!l
+        error: l
       }
     ),
     e.type === "toggle" && e.description ? /* @__PURE__ */ r(g, { description: e.description }) : null,
@@ -250,6 +251,6 @@ function L({ field: e, value: n, error: s, touched: a, onChange: d, onBlur: t })
   ] });
 }
 export {
-  L as default
+  O as default
 };
 //# sourceMappingURL=FormField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../../src/components/library/forms/FormField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ChevronDownIcon } from \"@heroicons/react/24/outline\";\nimport type { FormField as FormFieldType } from \"./FormRenderer\";\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: (string | boolean | undefined)[]): string {\n  return classes.filter(Boolean).join(\" \");\n}\n\ninterface FieldLabelProps {\n  label?: string;\n  required?: boolean;\n  htmlFor: string;\n}\n\nfunction FieldLabel({ label, required, htmlFor }: FieldLabelProps) {\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\ninterface FieldErrorProps {\n  error?: string;\n}\n\nfunction FieldError({ error }: FieldErrorProps) {\n  if (!error) return null;\n  return <p className=\"text-xs text-red-600 dark:text-red-400\">{error}</p>;\n}\n\ninterface FieldDescriptionProps {\n  description?: string;\n}\n\nfunction FieldDescription({ description }: FieldDescriptionProps) {\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\ninterface FieldRendererProps {\n  field: FormFieldType & Record<string, unknown>;\n  value: unknown;\n  onChange: (value: unknown) => void;\n  onBlur: () => void;\n  error?: boolean;\n}\n\nfunction TextField({ field, value, onChange, onBlur, error }: FieldRendererProps) {\n  const inputType = (field.inputType as string | undefined) ?? 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 as string | number) ?? \"\"}\n      onChange={(e) => onChange(field.type === \"number\" ? e.target.value : e.target.value)}\n      onBlur={onBlur}\n      placeholder={field.placeholder as string | undefined}\n      disabled={field.disabled as boolean | undefined}\n      readOnly={field.readOnly as boolean | undefined}\n      min={field.min as number | undefined}\n      max={field.max as number | undefined}\n      step={field.step as number | undefined}\n      className={cx(INPUT_BASE, error && INPUT_ERROR)}\n    />\n  );\n}\n\nfunction TextareaField({ field, value, onChange, onBlur, error }: FieldRendererProps) {\n  return (\n    <textarea\n      id={field.id}\n      name={field.id}\n      value={(value as string) ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      onBlur={onBlur}\n      placeholder={field.placeholder as string | undefined}\n      disabled={field.disabled as boolean | undefined}\n      readOnly={field.readOnly as boolean | undefined}\n      rows={(field.rows as number | undefined) ?? 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\ninterface SelectOption {\n  value: string;\n  label: string;\n}\n\nfunction SelectField({ field, value, onChange, onBlur, error }: FieldRendererProps) {\n  const options = ((field.options as (string | SelectOption)[] | undefined) ?? []).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 as string) ?? \"\"}\n        onChange={(e) => onChange(e.target.value)}\n        onBlur={onBlur}\n        disabled={field.disabled as boolean | undefined}\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 as string}</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\ninterface RadioOption extends SelectOption {\n  description?: string;\n  disabled?: boolean;\n}\n\nfunction RadioField({ field, value, onChange }: FieldRendererProps) {\n  const options = ((field.options as (string | RadioOption)[] | undefined) ?? []).map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n  const layout = (field.layout as string | undefined) ?? (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 as boolean | undefined) || 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 }: FieldRendererProps) {\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 as boolean | undefined}\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 as string | undefined) ?? field.label}\n    </label>\n  );\n}\n\ninterface CheckboxOption extends SelectOption {\n  disabled?: boolean;\n}\n\nfunction CheckboxGroupField({ field, value, onChange }: FieldRendererProps) {\n  const selected = Array.isArray(value) ? value : [];\n  const options = ((field.options as (string | CheckboxOption)[] | undefined) ?? []).map((opt) =>\n    typeof opt === \"string\" ? { value: opt, label: opt } : opt\n  );\n  const layout = (field.layout as string | undefined) ?? (options.length <= 4 ? \"horizontal\" : \"vertical\");\n\n  function toggleValue(optValue: string) {\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 as boolean | undefined) || 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 }: FieldRendererProps) {\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 as boolean | undefined}\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 as string}</span>\n      ) : null}\n    </div>\n  );\n}\n\n// ─── Main FormField ───\n\nconst FIELD_RENDERERS: Record<string, React.ComponentType<FieldRendererProps>> = {\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\nexport interface FormFieldProps {\n  field: FormFieldType & Record<string, unknown>;\n  value: unknown;\n  error?: string;\n  touched?: boolean;\n  onChange: (value: unknown) => void;\n  onBlur: () => void;\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 }: FormFieldProps) {\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 as string} />\n      ) : null}\n      <Renderer\n        field={field}\n        value={value}\n        onChange={onChange}\n        onBlur={onBlur}\n        error={Boolean(showError)}\n      />\n      {field.type === \"toggle\" && field.description ? (\n        <FieldDescription description={field.description as string} />\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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"}
+{"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.d.ts

@@ -1,27 +1,18 @@
-import type { FormSection } from "./FormRenderer";
-declare const SIZE_CLASSES: {
-    readonly sm: "max-w-md";
-    readonly md: "max-w-xl";
-    readonly lg: "max-w-2xl";
-    readonly xl: "max-w-4xl";
-};
-export interface FormModalProps {
-    isOpen?: boolean;
-    onClose?: () => void;
-    title: string;
-    subtitle?: string;
-    sections?: FormSection[];
-    initialValues?: Record<string, unknown>;
-    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
-    submitLabel?: string;
-    cancelLabel?: string;
-    size?: keyof typeof SIZE_CLASSES;
-    destructive?: boolean;
-    minSubmitMs?: number;
-}
 /**
  * Modal dialog for creating or editing records.
  * Wraps FormRenderer + useFormState in an animated overlay.
+ *
+ * @param {boolean}  isOpen — whether the modal is visible
+ * @param {Function} onClose — close handler
+ * @param {string}   title — modal title (e.g. "Edit Service", "New Incident")
+ * @param {string}   subtitle — optional subtitle
+ * @param {Array}    sections — form schema sections
+ * @param {Object}   initialValues — prefill for editing (empty = create mode)
+ * @param {Function} onSubmit — async (values) => void, called on valid submit
+ * @param {string}   submitLabel — submit button text (default: "Save")
+ * @param {string}   cancelLabel — cancel button text (default: "Cancel")
+ * @param {string}   size — "sm" | "md" | "lg" | "xl" (default: "lg")
+ * @param {boolean}  destructive — if true, submit button is red (for delete confirmations)
  */
-export default function FormModal({ isOpen, onClose, title, subtitle, sections, initialValues, onSubmit, submitLabel, cancelLabel, size, destructive, minSubmitMs, }: FormModalProps): import("react").ReactPortal | null;
-export {};
+export default function FormModal({ isOpen, onClose, title, subtitle, sections, initialValues, onSubmit, submitLabel, cancelLabel, size, destructive, minSubmitMs, }: boolean): React.ReactPortal | null;
+import React from "react";

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

@@ -1 +1 @@
-{"version":3,"file":"FormModal.js","sources":["../../../../src/components/library/forms/FormModal.tsx"],"sourcesContent":["import { 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\";\nimport type { FormSection } from \"./FormRenderer\";\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\" as const, damping: 25, stiffness: 350 } },\n  exit: { opacity: 0, y: 16, scale: 0.97, transition: { duration: 0.15 } },\n};\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} as const;\n\nexport interface FormModalProps {\n  isOpen?: boolean;\n  onClose?: () => void;\n  title: string;\n  subtitle?: string;\n  sections?: FormSection[];\n  initialValues?: Record<string, unknown>;\n  onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;\n  submitLabel?: string;\n  cancelLabel?: string;\n  size?: keyof typeof SIZE_CLASSES;\n  destructive?: boolean;\n  minSubmitMs?: number;\n}\n\n/**\n * Modal dialog for creating or editing records.\n * Wraps FormRenderer + useFormState in an animated overlay.\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}: FormModalProps) {\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: KeyboardEvent) => {\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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"}
+{"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.d.ts

@@ -1,33 +1,13 @@
-export interface FormSection {
-    id?: string;
-    title?: string;
-    description?: string;
-    fields: FormField[];
-}
-export interface FormField {
-    id: string;
-    type: string;
-    label?: string;
-    placeholder?: string;
-    description?: string;
-    required?: boolean;
-    requiredMessage?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    validate?: (value: unknown, values: Record<string, unknown>) => string | undefined;
-    [key: string]: unknown;
-}
-export interface FormRendererProps {
-    sections?: FormSection[];
-    values?: Record<string, unknown>;
-    errors?: Record<string, string>;
-    touched?: Record<string, boolean>;
-    onFieldChange: (fieldId: string, value: unknown) => void;
-    onFieldBlur: (fieldId: string) => void;
-    formError?: string;
-}
 /**
  * Renders a complete form from a schema definition.
  * Pairs with useFormState for state management.
+ *
+ * @param {Array}    sections — form schema sections
+ * @param {Object}   values   — current form values
+ * @param {Object}   errors   — current validation errors
+ * @param {Object}   touched  — which fields have been touched
+ * @param {Function} onFieldChange — (fieldId, value) => void
+ * @param {Function} onFieldBlur — (fieldId) => void
+ * @param {string}   formError — top-level form error (e.g. submission failure)
  */
-export default function FormRenderer({ sections, values, errors, touched, onFieldChange, onFieldBlur, formError, }: FormRendererProps): import("react/jsx-runtime").JSX.Element;
+export default function FormRenderer({ sections, values, errors, touched, onFieldChange, onFieldBlur, formError, }: any[]): import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,13 @@
 import { jsxs as n, jsx as d } from "react/jsx-runtime";
+import "react";
 import p from "./FormSection.js";
-function b({
+function u({
   sections: t = [],
   values: a = {},
   errors: o = {},
   touched: m = {},
-  onFieldChange: s,
-  onFieldBlur: i,
+  onFieldChange: i,
+  onFieldBlur: s,
   formError: r
 }) {
   return /* @__PURE__ */ n("div", { className: "space-y-8", children: [
@@ -18,14 +19,14 @@ function b({
         values: a,
         errors: o,
         touched: m,
-        onFieldChange: s,
-        onFieldBlur: i
+        onFieldChange: i,
+        onFieldBlur: s
       },
       e.id ?? l
     ))
   ] });
 }
 export {
-  b as default
+  u as default
 };
 //# sourceMappingURL=FormRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormRenderer.js","sources":["../../../../src/components/library/forms/FormRenderer.tsx"],"sourcesContent":["import FormSection from \"./FormSection\";\n\nexport interface FormSection {\n  id?: string;\n  title?: string;\n  description?: string;\n  fields: FormField[];\n}\n\nexport interface FormField {\n  id: string;\n  type: string;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  required?: boolean;\n  requiredMessage?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  validate?: (value: unknown, values: Record<string, unknown>) => string | undefined;\n  [key: string]: unknown;\n}\n\nexport interface FormRendererProps {\n  sections?: FormSection[];\n  values?: Record<string, unknown>;\n  errors?: Record<string, string>;\n  touched?: Record<string, boolean>;\n  onFieldChange: (fieldId: string, value: unknown) => void;\n  onFieldBlur: (fieldId: string) => void;\n  formError?: string;\n}\n\n/**\n * Renders a complete form from a schema definition.\n * Pairs with useFormState for state management.\n */\nexport default function FormRenderer({\n  sections = [],\n  values = {},\n  errors = {},\n  touched = {},\n  onFieldChange,\n  onFieldBlur,\n  formError,\n}: FormRendererProps) {\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":";;AAqCA,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,GAAsB;AACpB,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;"}
+{"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.d.ts

@@ -1,15 +1,13 @@
-import type { FormSection as FormSectionType } from "./FormRenderer";
-export interface FormSectionProps {
-    section: FormSectionType;
-    values: Record<string, unknown>;
-    errors: Record<string, string>;
-    touched: Record<string, boolean>;
-    onFieldChange: (fieldId: string, value: unknown) => void;
-    onFieldBlur: (fieldId: string) => void;
-}
 /**
  * A titled section of a form with a 2-column grid layout.
  * Fields default to 1-column (half width) unless the type is naturally
  * full-width or the field specifies `colSpan: 2`.
  */
-export default function FormSection({ section, values, errors, touched, onFieldChange, onFieldBlur, }: FormSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export default function FormSection({ section, values, errors, touched, onFieldChange, onFieldBlur, }: {
+    section: any;
+    values: any;
+    errors: any;
+    touched: any;
+    onFieldChange: any;
+    onFieldBlur: any;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,11 +1,12 @@
 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 g({
+function b({
   section: t,
   values: l,
   errors: d,
@@ -43,6 +44,6 @@ function g({
   ] }) : null;
 }
 export {
-  g as default
+  b as default
 };
 //# sourceMappingURL=FormSection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormSection.js","sources":["../../../../src/components/library/forms/FormSection.tsx"],"sourcesContent":["import FormField from \"./FormField\";\nimport type { FormSection as FormSectionType, FormField as FormFieldType } from \"./FormRenderer\";\n\nconst FULL_WIDTH_TYPES = new Set([\n  \"textarea\",\n  \"radio\",\n  \"checkboxGroup\",\n]);\n\nexport interface FormSectionProps {\n  section: FormSectionType;\n  values: Record<string, unknown>;\n  errors: Record<string, string>;\n  touched: Record<string, boolean>;\n  onFieldChange: (fieldId: string, value: unknown) => void;\n  onFieldBlur: (fieldId: string) => void;\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}: FormSectionProps) {\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: FormFieldType & { colSpan?: number }) => {\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: unknown) => 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":";;AAGA,MAAMA,wBAAuB,IAAI;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAgBD,SAAwBC,EAAY;AAAA,EAClC,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AACF,GAAqB;AACnB,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,MAAgD;AAC3D,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,MAAiBR,EAAcK,EAAM,IAAIG,CAAG;AAAA,cACvD,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;"}
+{"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;"}

package/dist/components/library/forms/index.d.ts

@@ -3,8 +3,3 @@ export { default as FormRenderer } from "./FormRenderer";
 export { default as FormSection } from "./FormSection";
 export { default as FormField } from "./FormField";
 export { default as useFormState } from "./useFormState";
-export type { FormModalProps } from "./FormModal";
-export type { FormRendererProps } from "./FormRenderer";
-export type { FormSection as FormSectionType, FormField as FormFieldType } from "./FormRenderer";
-export type { FormSectionProps } from "./FormSection";
-export type { FormFieldProps } from "./FormField";

package/dist/components/library/forms/useFormState.d.ts

@@ -1,26 +1,18 @@
-import type { FormSection } from "./FormRenderer";
-interface UseFormStateOptions {
-    initialValues?: Record<string, unknown>;
-    sections?: FormSection[];
-    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
-    minSubmitMs?: number;
-}
-interface UseFormStateReturn {
-    values: Record<string, unknown>;
-    errors: Record<string, string>;
-    touched: Record<string, boolean>;
-    isDirty: boolean;
-    isValid: boolean;
-    isSubmitting: boolean;
-    setValue: (id: string, value: unknown) => void;
-    setValues: (vals: Record<string, unknown>) => void;
-    setTouched: (id: string) => void;
-    validate: () => boolean;
-    reset: () => void;
-    handleSubmit: (e?: React.FormEvent) => Promise<boolean>;
-}
 /**
  * Form state management hook.
+ *
+ * @param {Object} options
+ * @param {Object}  options.initialValues — prefill for editing (merged over field defaults)
+ * @param {Array}   options.sections — form schema sections (used for defaults + validation)
+ * @param {Function} options.onSubmit — called with (values) when form is valid
+ * @param {number}  options.minSubmitMs — minimum time the submit spinner shows (default 4000ms, set 0 to disable)
+ *
+ * @returns {Object} { values, errors, touched, isDirty, isValid, isSubmitting,
+ *                     setValue, setValues, setTouched, validate, reset, handleSubmit }
  */
-export default function useFormState({ initialValues, sections, onSubmit, minSubmitMs }?: UseFormStateOptions): UseFormStateReturn;
-export {};
+export default function useFormState({ initialValues, sections, onSubmit, minSubmitMs }?: {
+    initialValues: Object;
+    sections: any[];
+    onSubmit: Function;
+    minSubmitMs: number;
+}): Object;