@burdenoff/microfe-crewfoundry 2026.625.2 → 2026.703.1

package/dist/crewfoundry/components/forms/ConfirmDialog.js

@@ -0,0 +1,43 @@
+import { useState as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Button as r, ResponsiveDialog as i, ResponsiveDialogContent as a, ResponsiveDialogDescription as o, ResponsiveDialogFooter as s, ResponsiveDialogHeader as c, ResponsiveDialogTitle as l } from "@burdenoff/fe-libs/ui";
+import { useGlobalUi as u } from "@burdenoff/fe-libs/shared/providers/shell";
+//#region src/crewfoundry/components/forms/ConfirmDialog.tsx
+function d({ open: d, onOpenChange: f, title: p, description: m, confirmLabel: h = "Confirm", destructive: g = !1, onConfirm: _ }) {
+	let { showToast: v } = u(), [y, b] = e(!1);
+	return /* @__PURE__ */ t(i, {
+		open: d,
+		onOpenChange: f,
+		children: /* @__PURE__ */ n(a, {
+			className: "sm:max-w-[420px]",
+			children: [/* @__PURE__ */ n(c, { children: [/* @__PURE__ */ t(l, { children: p }), m ? /* @__PURE__ */ t(o, { children: m }) : null] }), /* @__PURE__ */ n(s, { children: [/* @__PURE__ */ t(r, {
+				type: "button",
+				variant: "outline",
+				onClick: () => f(!1),
+				disabled: y,
+				children: "Cancel"
+			}), /* @__PURE__ */ t(r, {
+				type: "button",
+				variant: g ? "destructive" : "default",
+				onClick: async () => {
+					if (!y) {
+						b(!0);
+						try {
+							await _(), f(!1);
+						} catch (e) {
+							v(e instanceof Error ? e.message : "Something went wrong", "error");
+						} finally {
+							b(!1);
+						}
+					}
+				},
+				disabled: y,
+				children: y ? "Working…" : h
+			})] })]
+		})
+	});
+}
+//#endregion
+export { d as ConfirmDialog };
+
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/crewfoundry/components/forms/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../../src/crewfoundry/components/forms/ConfirmDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Button,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  destructive?: boolean;\n  onConfirm: () => Promise<void>;\n}\n\n/**\n * Small accessible confirm dialog built on the shared ResponsiveDialog so\n * destructive actions (delete) never rely on native window.confirm.\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = 'Confirm',\n  destructive = false,\n  onConfirm,\n}: ConfirmDialogProps) {\n  const { showToast } = useGlobalUi();\n  const [pending, setPending] = useState(false);\n\n  const handleConfirm = async () => {\n    if (pending) {\n      return;\n    }\n    setPending(true);\n    try {\n      await onConfirm();\n      onOpenChange(false);\n    } catch (error) {\n      showToast(error instanceof Error ? error.message : 'Something went wrong', 'error');\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n      <ResponsiveDialogContent className=\"sm:max-w-[420px]\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>{title}</ResponsiveDialogTitle>\n          {description ? (\n            <ResponsiveDialogDescription>{description}</ResponsiveDialogDescription>\n          ) : null}\n        </ResponsiveDialogHeader>\n        <ResponsiveDialogFooter>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={() => onOpenChange(false)}\n            disabled={pending}\n          >\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            variant={destructive ? 'destructive' : 'default'}\n            onClick={handleConfirm}\n            disabled={pending}\n          >\n            {pending ? 'Working…' : confirmLabel}\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":";;;;;AA0BA,SAAgB,EAAc,EAC5B,SACA,iBACA,UACA,gBACA,kBAAe,WACf,iBAAc,IACd,gBACqB;CACrB,IAAM,EAAE,iBAAc,GAAa,EAC7B,CAAC,GAAS,KAAc,EAAS,GAAM;AAiB7C,QACE,kBAAC,GAAD;EAAwB;EAAoB;YAC1C,kBAAC,GAAD;GAAyB,WAAU;aAAnC,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAwB,GAA8B,CAAA,EACrD,IACC,kBAAC,GAAD,EAAA,UAA8B,GAA0C,CAAA,GACtE,KACmB,EAAA,CAAA,EACzB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,eAAe,EAAa,GAAM;IAClC,UAAU;cACX;IAEQ,CAAA,EACT,kBAAC,GAAD;IACE,MAAK;IACL,SAAS,IAAc,gBAAgB;IACvC,SApCY,YAAY;AAC5B,aAGJ;QAAW,GAAK;AAChB,UAAI;AAEF,OADA,MAAM,GAAW,EACjB,EAAa,GAAM;eACZ,GAAO;AACd,SAAU,aAAiB,QAAQ,EAAM,UAAU,wBAAwB,QAAQ;gBAC3E;AACR,SAAW,GAAM;;;;IA0BX,UAAU;cAET,IAAU,aAAa;IACjB,CAAA,CACc,EAAA,CAAA,CACD;;EACT,CAAA"}

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

@@ -0,0 +1,220 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { X as i } from "lucide-react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Button as c, Input as l, Label as u, ResponsiveDialog as d, ResponsiveDialogContent as f, ResponsiveDialogDescription as p, ResponsiveDialogFooter as m, ResponsiveDialogHeader as h, ResponsiveDialogTitle as g, Switch as _, Textarea as v } from "@burdenoff/fe-libs/ui";
+import { useGlobalUi as y } from "@burdenoff/fe-libs/shared/providers/shell";
+//#region src/crewfoundry/components/forms/FormModal.tsx
+var b = (e, t) => {
+	let n = {};
+	for (let r of e) {
+		let e = t?.[r.name];
+		r.type === "switch" ? n[r.name] = !!e : r.type === "tags" ? Array.isArray(e) ? n[r.name] = e.map((e) => String(e)) : typeof e == "string" && e.length > 0 ? n[r.name] = e.split(",").map((e) => e.trim()).filter(Boolean) : n[r.name] = [] : n[r.name] = e == null ? "" : String(e);
+	}
+	return n;
+}, x = (e, t) => e.type === "switch" ? !1 : e.type === "tags" ? !Array.isArray(t) || t.length === 0 : typeof t != "string" || t.trim() === "", S = (e, t) => {
+	let n = {};
+	for (let r of e) {
+		let e = t[r.name];
+		if (r.type === "switch") n[r.name] = !!e;
+		else if (r.type === "tags") n[r.name] = Array.isArray(e) ? e : [];
+		else if (r.type === "number") {
+			let t = typeof e == "string" ? e.trim() : "";
+			n[r.name] = t === "" ? "" : Number(t);
+		} else n[r.name] = typeof e == "string" ? e : "";
+	}
+	return n;
+}, C = "flex h-10 w-full rounded-input border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary transition-colors duration-200 focus-visible:border-border-focus focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50";
+function w({ open: w, onOpenChange: T, title: E, description: D, fields: O, initialValues: k, submitLabel: A = "Save", onSubmit: j }) {
+	let { showToast: M } = y(), [N, P] = r(() => b(O, k)), [F, I] = r({}), [L, R] = r(!1), z = n(O), B = n(k), V = n(!1);
+	t(() => {
+		z.current = O, B.current = k;
+	}, [O, k]), t(() => {
+		w && !V.current && (P(b(z.current, B.current)), I({}), R(!1)), V.current = w;
+	}, [w]);
+	let H = e((e, t) => {
+		P((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []), U = e((e) => {
+		I((t) => {
+			let n = (t[e] ?? "").trim();
+			return n && P((t) => {
+				let r = Array.isArray(t[e]) ? t[e] : [];
+				return r.includes(n) ? t : {
+					...t,
+					[e]: [...r, n]
+				};
+			}), {
+				...t,
+				[e]: ""
+			};
+		});
+	}, []), W = e((e, t) => {
+		P((n) => {
+			let r = Array.isArray(n[e]) ? n[e] : [];
+			return {
+				...n,
+				[e]: r.filter((e) => e !== t)
+			};
+		});
+	}, []), G = e(async (e) => {
+		if (e.preventDefault(), L) return;
+		let t = { ...N };
+		for (let e of O) if (e.type === "tags") {
+			let n = (F[e.name] ?? "").trim();
+			if (n) {
+				let r = Array.isArray(t[e.name]) ? t[e.name] : [];
+				r.includes(n) || (t[e.name] = [...r, n]);
+			}
+		}
+		let n = O.find((e) => e.required && x(e, t[e.name]));
+		if (n) {
+			M(`${n.label} is required`, "warning");
+			return;
+		}
+		R(!0);
+		try {
+			await j(S(O, t)), T(!1);
+		} catch (e) {
+			M(e instanceof Error ? e.message : "Something went wrong", "error");
+		} finally {
+			R(!1);
+		}
+	}, [
+		O,
+		T,
+		j,
+		M,
+		L,
+		F,
+		N
+	]);
+	return /* @__PURE__ */ o(d, {
+		open: w,
+		onOpenChange: T,
+		children: /* @__PURE__ */ s(f, {
+			className: "max-h-[85vh] overflow-y-auto sm:max-w-[560px]",
+			children: [/* @__PURE__ */ s(h, { children: [/* @__PURE__ */ o(g, { children: E }), D ? /* @__PURE__ */ o(p, { children: D }) : null] }), /* @__PURE__ */ s("form", {
+				onSubmit: G,
+				className: "space-y-4",
+				children: [/* @__PURE__ */ o("div", {
+					className: "grid grid-cols-1 gap-4 md:grid-cols-2",
+					children: O.map((e) => {
+						let t = `formmodal-${e.name}`, n = e.colSpan === 2 || e.colSpan === void 0 && (e.type === "textarea" || e.type === "tags"), r = N[e.name];
+						return /* @__PURE__ */ o("div", {
+							className: `flex flex-col gap-1.5 ${n ? "md:col-span-2" : ""}`,
+							children: e.type === "switch" ? /* @__PURE__ */ s("div", {
+								className: "flex items-center justify-between gap-3 rounded-input border border-border-default bg-bg-surface px-3 py-2",
+								children: [/* @__PURE__ */ s(u, {
+									htmlFor: t,
+									children: [e.label, e.required ? /* @__PURE__ */ o("span", {
+										className: "text-status-error-fg",
+										children: " *"
+									}) : null]
+								}), /* @__PURE__ */ o(_, {
+									id: t,
+									checked: !!r,
+									onCheckedChange: (t) => H(e.name, t),
+									disabled: L
+								})]
+							}) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(u, {
+								htmlFor: t,
+								children: [e.label, e.required ? /* @__PURE__ */ o("span", {
+									className: "text-status-error-fg",
+									children: " *"
+								}) : null]
+							}), e.type === "textarea" ? /* @__PURE__ */ o(v, {
+								id: t,
+								value: typeof r == "string" ? r : "",
+								placeholder: e.placeholder,
+								disabled: L,
+								onChange: (t) => H(e.name, t.target.value)
+							}) : e.type === "select" ? /* @__PURE__ */ s("select", {
+								id: t,
+								className: C,
+								value: typeof r == "string" ? r : "",
+								disabled: L,
+								onChange: (t) => H(e.name, t.target.value),
+								children: [/* @__PURE__ */ o("option", {
+									value: "",
+									disabled: !0,
+									children: e.placeholder ?? "Select…"
+								}), (e.options ?? []).map((e) => /* @__PURE__ */ o("option", {
+									value: e.value,
+									children: e.label
+								}, e.value))]
+							}) : e.type === "tags" ? /* @__PURE__ */ s("div", {
+								className: "flex min-h-10 flex-wrap items-center gap-1.5 rounded-input border border-border-default bg-bg-surface px-2 py-1.5",
+								children: [(Array.isArray(r) ? r : []).map((t) => /* @__PURE__ */ s("span", {
+									className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-primary",
+									children: [t, /* @__PURE__ */ o("button", {
+										type: "button",
+										"aria-label": `Remove ${t}`,
+										className: "text-text-secondary hover:text-text-primary",
+										onClick: () => W(e.name, t),
+										disabled: L,
+										children: /* @__PURE__ */ o(i, { className: "h-3 w-3" })
+									})]
+								}, t)), /* @__PURE__ */ o("input", {
+									id: t,
+									className: "min-w-[6rem] flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-placeholder",
+									value: F[e.name] ?? "",
+									placeholder: e.placeholder ?? "Add and press Enter",
+									disabled: L,
+									onChange: (t) => I((n) => ({
+										...n,
+										[e.name]: t.target.value
+									})),
+									onKeyDown: (t) => {
+										if (t.key === "Enter" || t.key === ",") t.preventDefault(), U(e.name);
+										else if (t.key === "Backspace" && (F[e.name] ?? "") === "") {
+											let t = Array.isArray(r) ? r : [];
+											t.length > 0 && W(e.name, t[t.length - 1]);
+										}
+									},
+									onBlur: () => U(e.name)
+								})]
+							}) : /* @__PURE__ */ o(l, {
+								id: t,
+								type: e.type === "number" ? "number" : e.type === "date" ? "date" : e.type === "email" ? "email" : "text",
+								value: typeof r == "string" ? r : "",
+								placeholder: e.placeholder,
+								disabled: L,
+								onChange: (t) => H(e.name, t.target.value)
+							})] })
+						}, e.name);
+					})
+				}), /* @__PURE__ */ s(m, { children: [/* @__PURE__ */ o(c, {
+					type: "button",
+					variant: "outline",
+					onClick: () => T(!1),
+					disabled: L,
+					children: "Cancel"
+				}), /* @__PURE__ */ o(c, {
+					type: "submit",
+					disabled: L,
+					children: L ? "Saving…" : A
+				})] })]
+			})]
+		})
+	});
+}
+function T() {
+	let [t, n] = r(!1), [i, a] = r(null);
+	return {
+		open: t,
+		context: i,
+		openModal: e((e) => {
+			a(e ?? null), n(!0);
+		}, []),
+		closeModal: e(() => n(!1), []),
+		onOpenChange: e((e) => {
+			n(e), e || a(null);
+		}, [])
+	};
+}
+//#endregion
+export { w as FormModal, T as useFormModal };
+
+//# sourceMappingURL=FormModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormModal.js","names":[],"sources":["../../../../src/crewfoundry/components/forms/FormModal.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Button,\n  Input,\n  Label,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  Switch,\n  Textarea,\n} from '@burdenoff/fe-libs/ui';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { X } from 'lucide-react';\n\n// ── Public API ──────────────────────────────────────────────────\nexport type FormFieldType =\n  | 'text'\n  | 'number'\n  | 'date'\n  | 'email'\n  | 'textarea'\n  | 'select'\n  | 'tags'\n  | 'switch';\n\nexport type FormValue = string | number | boolean | string[];\nexport type FormValues = Record<string, FormValue>;\n\nexport interface FieldOption {\n  label: string;\n  value: string;\n}\n\nexport interface FieldConfig {\n  name: string;\n  label: string;\n  type: FormFieldType;\n  required?: boolean;\n  placeholder?: string;\n  options?: FieldOption[];\n  /** Column span in the 2-col grid on md+ (defaults to 1; textarea/tags default to 2). */\n  colSpan?: 1 | 2;\n}\n\nexport interface FormModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description?: string;\n  fields: FieldConfig[];\n  initialValues?: FormValues;\n  submitLabel?: string;\n  onSubmit: (values: FormValues) => Promise<void>;\n}\n\n// ── Internal state helpers ──────────────────────────────────────\n// Text-like inputs are held as strings for controlled inputs; switches as\n// booleans; tags as string[]. Values are coerced back to their public shapes\n// on submit.\ntype InternalValue = string | boolean | string[];\ntype InternalValues = Record<string, InternalValue>;\n\n\nconst buildInitialState = (fields: FieldConfig[], initialValues?: FormValues): InternalValues => {\n  const state: InternalValues = {};\n  for (const field of fields) {\n    const raw = initialValues?.[field.name];\n    if (field.type === 'switch') {\n      state[field.name] = Boolean(raw);\n    } else if (field.type === 'tags') {\n      if (Array.isArray(raw)) {\n        state[field.name] = raw.map((item) => String(item));\n      } else if (typeof raw === 'string' && raw.length > 0) {\n        state[field.name] = raw\n          .split(',')\n          .map((item) => item.trim())\n          .filter(Boolean);\n      } else {\n        state[field.name] = [];\n      }\n    } else {\n      state[field.name] = raw === undefined || raw === null ? '' : String(raw);\n    }\n  }\n  return state;\n};\n\nconst isEmptyValue = (field: FieldConfig, value: InternalValue): boolean => {\n  if (field.type === 'switch') {\n    return false;\n  }\n  if (field.type === 'tags') {\n    return !Array.isArray(value) || value.length === 0;\n  }\n  return typeof value !== 'string' || value.trim() === '';\n};\n\nconst toOutput = (fields: FieldConfig[], state: InternalValues): FormValues => {\n  const output: FormValues = {};\n  for (const field of fields) {\n    const value = state[field.name];\n    if (field.type === 'switch') {\n      output[field.name] = Boolean(value);\n    } else if (field.type === 'tags') {\n      output[field.name] = Array.isArray(value) ? value : [];\n    } else if (field.type === 'number') {\n      const raw = typeof value === 'string' ? value.trim() : '';\n      output[field.name] = raw === '' ? '' : Number(raw);\n    } else {\n      output[field.name] = typeof value === 'string' ? value : '';\n    }\n  }\n  return output;\n};\n\n// Native <select> styled with the same semantic tokens as fe-libs Input.\nconst SELECT_CLASS =\n  'flex h-10 w-full rounded-input border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary transition-colors duration-200 focus-visible:border-border-focus focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50';\n\n// ── Component ───────────────────────────────────────────────────\nexport function FormModal({\n  open,\n  onOpenChange,\n  title,\n  description,\n  fields,\n  initialValues,\n  submitLabel = 'Save',\n  onSubmit,\n}: FormModalProps) {\n  const { showToast } = useGlobalUi();\n  const [values, setValues] = useState<InternalValues>(() =>\n    buildInitialState(fields, initialValues)\n  );\n  const [tagDrafts, setTagDrafts] = useState<Record<string, string>>({});\n  const [submitting, setSubmitting] = useState(false);\n\n  // Keep the latest field config / initial values reachable from the reset\n  // effect without making them effect dependencies (page callers rarely\n  // memoize these, and depending on them would loop or clobber edits).\n  const fieldsRef = useRef(fields);\n  const initialValuesRef = useRef(initialValues);\n  const wasOpenRef = useRef(false);\n\n  // Sync the latest field config / initial values into refs after each commit\n  // (never during render). Declared before the reset effect so that on a rising\n  // edge of `open` the refs are refreshed first, then read by the reset below.\n  useEffect(() => {\n    fieldsRef.current = fields;\n    initialValuesRef.current = initialValues;\n  }, [fields, initialValues]);\n\n  // Reset the working copy on each rising edge of `open` so edit vs create\n  // contexts never leak into each other.\n  useEffect(() => {\n    if (open && !wasOpenRef.current) {\n      setValues(buildInitialState(fieldsRef.current, initialValuesRef.current));\n      setTagDrafts({});\n      setSubmitting(false);\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n\n  const setFieldValue = useCallback((name: string, value: InternalValue) => {\n    setValues((prev) => ({ ...prev, [name]: value }));\n  }, []);\n\n  const commitTag = useCallback(\n    (name: string) => {\n      setTagDrafts((prevDrafts) => {\n        const draft = (prevDrafts[name] ?? '').trim();\n        if (draft) {\n          setValues((prev) => {\n            const current = Array.isArray(prev[name]) ? (prev[name] as string[]) : [];\n            if (current.includes(draft)) {\n              return prev;\n            }\n            return { ...prev, [name]: [...current, draft] };\n          });\n        }\n        return { ...prevDrafts, [name]: '' };\n      });\n    },\n    []\n  );\n\n  const removeTag = useCallback((name: string, tag: string) => {\n    setValues((prev) => {\n      const current = Array.isArray(prev[name]) ? (prev[name] as string[]) : [];\n      return { ...prev, [name]: current.filter((item) => item !== tag) };\n    });\n  }, []);\n\n  const handleSubmit = useCallback(\n    async (event: React.FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      if (submitting) {\n        return;\n      }\n\n      // Fold any un-committed tag draft into its field before validating.\n      const staged: InternalValues = { ...values };\n      for (const field of fields) {\n        if (field.type === 'tags') {\n          const draft = (tagDrafts[field.name] ?? '').trim();\n          if (draft) {\n            const current = Array.isArray(staged[field.name])\n              ? (staged[field.name] as string[])\n              : [];\n            if (!current.includes(draft)) {\n              staged[field.name] = [...current, draft];\n            }\n          }\n        }\n      }\n\n      const missing = fields.find((field) => field.required && isEmptyValue(field, staged[field.name]));\n      if (missing) {\n        showToast(`${missing.label} is required`, 'warning');\n        return;\n      }\n\n      setSubmitting(true);\n      try {\n        await onSubmit(toOutput(fields, staged));\n        onOpenChange(false);\n      } catch (error) {\n        showToast(error instanceof Error ? error.message : 'Something went wrong', 'error');\n      } finally {\n        setSubmitting(false);\n      }\n    },\n    [fields, onOpenChange, onSubmit, showToast, submitting, tagDrafts, values]\n  );\n\n  return (\n    <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n      <ResponsiveDialogContent className=\"max-h-[85vh] overflow-y-auto sm:max-w-[560px]\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>{title}</ResponsiveDialogTitle>\n          {description ? (\n            <ResponsiveDialogDescription>{description}</ResponsiveDialogDescription>\n          ) : null}\n        </ResponsiveDialogHeader>\n\n        <form onSubmit={handleSubmit} className=\"space-y-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n            {fields.map((field) => {\n              const fieldId = `formmodal-${field.name}`;\n              const spanTwo =\n                field.colSpan === 2 ||\n                (field.colSpan === undefined && (field.type === 'textarea' || field.type === 'tags'));\n              const value = values[field.name];\n\n              return (\n                <div\n                  key={field.name}\n                  className={`flex flex-col gap-1.5 ${spanTwo ? 'md:col-span-2' : ''}`}\n                >\n                  {field.type === 'switch' ? (\n                    <div className=\"flex items-center justify-between gap-3 rounded-input border border-border-default bg-bg-surface px-3 py-2\">\n                      <Label htmlFor={fieldId}>\n                        {field.label}\n                        {field.required ? <span className=\"text-status-error-fg\"> *</span> : null}\n                      </Label>\n                      <Switch\n                        id={fieldId}\n                        checked={Boolean(value)}\n                        onCheckedChange={(checked) => setFieldValue(field.name, checked)}\n                        disabled={submitting}\n                      />\n                    </div>\n                  ) : (\n                    <>\n                      <Label htmlFor={fieldId}>\n                        {field.label}\n                        {field.required ? <span className=\"text-status-error-fg\"> *</span> : null}\n                      </Label>\n\n                      {field.type === 'textarea' ? (\n                        <Textarea\n                          id={fieldId}\n                          value={typeof value === 'string' ? value : ''}\n                          placeholder={field.placeholder}\n                          disabled={submitting}\n                          onChange={(event) => setFieldValue(field.name, event.target.value)}\n                        />\n                      ) : field.type === 'select' ? (\n                        <select\n                          id={fieldId}\n                          className={SELECT_CLASS}\n                          value={typeof value === 'string' ? value : ''}\n                          disabled={submitting}\n                          onChange={(event) => setFieldValue(field.name, event.target.value)}\n                        >\n                          <option value=\"\" disabled>\n                            {field.placeholder ?? 'Select…'}\n                          </option>\n                          {(field.options ?? []).map((option) => (\n                            <option key={option.value} value={option.value}>\n                              {option.label}\n                            </option>\n                          ))}\n                        </select>\n                      ) : field.type === 'tags' ? (\n                        <div className=\"flex min-h-10 flex-wrap items-center gap-1.5 rounded-input border border-border-default bg-bg-surface px-2 py-1.5\">\n                          {(Array.isArray(value) ? value : []).map((tag) => (\n                            <span\n                              key={tag}\n                              className=\"inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-primary\"\n                            >\n                              {tag}\n                              <button\n                                type=\"button\"\n                                aria-label={`Remove ${tag}`}\n                                className=\"text-text-secondary hover:text-text-primary\"\n                                onClick={() => removeTag(field.name, tag)}\n                                disabled={submitting}\n                              >\n                                <X className=\"h-3 w-3\" />\n                              </button>\n                            </span>\n                          ))}\n                          <input\n                            id={fieldId}\n                            className=\"min-w-[6rem] flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-placeholder\"\n                            value={tagDrafts[field.name] ?? ''}\n                            placeholder={field.placeholder ?? 'Add and press Enter'}\n                            disabled={submitting}\n                            onChange={(event) =>\n                              setTagDrafts((prev) => ({ ...prev, [field.name]: event.target.value }))\n                            }\n                            onKeyDown={(event) => {\n                              if (event.key === 'Enter' || event.key === ',') {\n                                event.preventDefault();\n                                commitTag(field.name);\n                              } else if (\n                                event.key === 'Backspace' &&\n                                (tagDrafts[field.name] ?? '') === ''\n                              ) {\n                                const current = Array.isArray(value) ? value : [];\n                                if (current.length > 0) {\n                                  removeTag(field.name, current[current.length - 1]);\n                                }\n                              }\n                            }}\n                            onBlur={() => commitTag(field.name)}\n                          />\n                        </div>\n                      ) : (\n                        <Input\n                          id={fieldId}\n                          type={\n                            field.type === 'number'\n                              ? 'number'\n                              : field.type === 'date'\n                                ? 'date'\n                                : field.type === 'email'\n                                  ? 'email'\n                                  : 'text'\n                          }\n                          value={typeof value === 'string' ? value : ''}\n                          placeholder={field.placeholder}\n                          disabled={submitting}\n                          onChange={(event) => setFieldValue(field.name, event.target.value)}\n                        />\n                      )}\n                    </>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n\n          <ResponsiveDialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => onOpenChange(false)}\n              disabled={submitting}\n            >\n              Cancel\n            </Button>\n            <Button type=\"submit\" disabled={submitting}>\n              {submitting ? 'Saving…' : submitLabel}\n            </Button>\n          </ResponsiveDialogFooter>\n        </form>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n\n// ── Optional open/close helper ──────────────────────────────────\nexport interface UseFormModalResult<TContext> {\n  open: boolean;\n  /** The row/context passed to openModal (e.g. the entity being edited). */\n  context: TContext | null;\n  openModal: (context?: TContext) => void;\n  closeModal: () => void;\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * Tiny helper for pages that toggle a single FormModal and want to remember\n * which row is being edited. `context` is null for a create flow.\n */\nexport function useFormModal<TContext = void>(): UseFormModalResult<TContext> {\n  const [open, setOpen] = useState(false);\n  const [context, setContext] = useState<TContext | null>(null);\n\n  const openModal = useCallback((next?: TContext) => {\n    setContext(next ?? null);\n    setOpen(true);\n  }, []);\n\n  const closeModal = useCallback(() => setOpen(false), []);\n\n  const onOpenChange = useCallback((nextOpen: boolean) => {\n    setOpen(nextOpen);\n    if (!nextOpen) {\n      setContext(null);\n    }\n  }, []);\n\n  return { open, context, openModal, closeModal, onOpenChange };\n}\n"],"mappings":"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"}

package/dist/crewfoundry/components/forms/formValues.js

@@ -0,0 +1,20 @@
+//#region src/crewfoundry/components/forms/formValues.ts
+var e = (e, t) => {
+	let n = e[t];
+	return typeof n == "string" ? n : "";
+}, t = (e, t) => {
+	let n = e[t];
+	if (typeof n == "number") return Number.isFinite(n) ? n : 0;
+	if (typeof n == "string" && n.trim() !== "") {
+		let e = Number(n);
+		return Number.isFinite(e) ? e : 0;
+	}
+	return 0;
+}, n = (e, t) => {
+	let n = e[t];
+	return Array.isArray(n) ? n : [];
+}, r = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `tmp-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+//#endregion
+export { t as getNumber, n as getTags, e as getText, r as newClientId };
+
+//# sourceMappingURL=formValues.js.map

package/dist/crewfoundry/components/forms/formValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formValues.js","names":[],"sources":["../../../../src/crewfoundry/components/forms/formValues.ts"],"sourcesContent":["import type { FormValues } from './FormModal';\n\n// Coercion helpers for reading typed values back out of a FormModal submit.\n// FormModal emits text-like fields as strings, number fields as number | '',\n// tags as string[], and switches as boolean.\n\nexport const getText = (values: FormValues, key: string): string => {\n  const value = values[key];\n  return typeof value === 'string' ? value : '';\n};\n\nexport const getNumber = (values: FormValues, key: string): number => {\n  const value = values[key];\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? value : 0;\n  }\n  if (typeof value === 'string' && value.trim() !== '') {\n    const parsed = Number(value);\n    return Number.isFinite(parsed) ? parsed : 0;\n  }\n  return 0;\n};\n\nexport const getTags = (values: FormValues, key: string): string[] => {\n  const value = values[key];\n  return Array.isArray(value) ? value : [];\n};\n\nexport const getBool = (values: FormValues, key: string): boolean => {\n  const value = values[key];\n  return typeof value === 'boolean' ? value : false;\n};\n\n// A stable client-generated id for optimistic rows. The server returns the\n// authoritative row (which replaces this) on success.\nexport const newClientId = (): string =>\n  typeof crypto !== 'undefined' && 'randomUUID' in crypto\n    ? crypto.randomUUID()\n    : `tmp-${Date.now()}-${Math.random().toString(36).slice(2)}`;\n"],"mappings":";AAMA,IAAa,KAAW,GAAoB,MAAwB;CAClE,IAAM,IAAQ,EAAO;AACrB,QAAO,OAAO,KAAU,WAAW,IAAQ;GAGhC,KAAa,GAAoB,MAAwB;CACpE,IAAM,IAAQ,EAAO;AACrB,KAAI,OAAO,KAAU,SACnB,QAAO,OAAO,SAAS,EAAM,GAAG,IAAQ;AAE1C,KAAI,OAAO,KAAU,YAAY,EAAM,MAAM,KAAK,IAAI;EACpD,IAAM,IAAS,OAAO,EAAM;AAC5B,SAAO,OAAO,SAAS,EAAO,GAAG,IAAS;;AAE5C,QAAO;GAGI,KAAW,GAAoB,MAA0B;CACpE,IAAM,IAAQ,EAAO;AACrB,QAAO,MAAM,QAAQ,EAAM,GAAG,IAAQ,EAAE;GAU7B,UACX,OAAO,SAAW,OAAe,gBAAgB,SAC7C,OAAO,YAAY,GACnB,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,EAAE"}