@lattice-php/lattice 0.1.0 → 0.2.0

package/dist/form/components/base/submit-button.js

@@ -3,7 +3,7 @@ import { Spinner } from "../../../core/components/spinner.js";
 import { useFormContext } from "../context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/base/submit-button.tsx
-function FormSubmitButton({ label, variant = "default" }) {
+function FormSubmitButton({ label, summaryLabel, variant = "default" }) {
 	const { errors, fieldLabels, processing } = useFormContext();
 	const invalidFields = Object.entries(errors).filter(([, message]) => Boolean(message)).map(([name, message]) => ({
 		label: fieldLabels[name] ?? name,
@@ -22,7 +22,7 @@ function FormSubmitButton({ label, variant = "default" }) {
 			role: "tooltip",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "mb-1 font-medium text-lt-fg",
-				children: "Fix these fields to continue:"
+				children: summaryLabel
 			}), /* @__PURE__ */ jsx("ul", {
 				className: "space-y-1",
 				children: invalidFields.map((field) => /* @__PURE__ */ jsxs("li", {

package/dist/form/components/base/submit-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice/lattice/core/components/button\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport { useFormContext } from \"../context\";\n\ntype SubmitButtonVariant = \"default\" | \"destructive\" | \"ghost\" | \"link\" | \"outline\" | \"secondary\";\n\nexport function FormSubmitButton({\n  label,\n  variant = \"default\",\n}: {\n  label: string;\n  variant?: SubmitButtonVariant;\n}) {\n  const { errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button disabled={processing || hasErrors} type=\"submit\" variant={variant}>\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">Fix these fields to continue:</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAMA,SAAgB,iBAAiB,EAC/B,OACA,UAAU,aAIT;CACD,MAAM,EAAE,QAAQ,aAAa,eAAe,eAAe;CAE3D,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GAAQ,UAAU,cAAc;GAAW,MAAK;GAAkB;aAAlE,CACG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA8B;GAAgC,CAAA,GAC3E,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}
+{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice/lattice/core/components/button\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport type { ButtonVariant } from \"@lattice/lattice/types/generated\";\nimport { useFormContext } from \"../context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button disabled={processing || hasErrors} type=\"submit\" variant={variant}>\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,QAAQ,aAAa,eAAe,eAAe;CAE3D,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GAAQ,UAAU,cAAc;GAAW,MAAK;GAAkB;aAAlE,CACG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}

package/dist/form/components/conditions.d.ts

@@ -1,25 +1,22 @@
-import { ConditionOperator } from '../../../../generated/types';
-export type Condition = {
-    field: string;
-    operator: ConditionOperator;
-    value: unknown;
-};
+import { Condition } from '../../types/generated';
+export type { Condition };
 export type FieldConditions = {
     visible?: Condition[];
     required?: Condition[];
-    readonly?: Condition[];
+    readOnly?: Condition[];
     disabled?: Condition[];
 };
 export type FieldFlags = {
     hidden?: boolean;
     required?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
 };
 export type FieldState = {
     hidden: boolean;
     required: boolean;
-    readonly: boolean;
+    readOnly: boolean;
     disabled: boolean;
 };
+export declare function toBoolean(value: unknown): boolean;
 export declare function evaluateConditions(conditions: FieldConditions | undefined, values: Record<string, unknown>, flags: FieldFlags): FieldState;

package/dist/form/components/conditions.js

@@ -20,6 +20,12 @@ function isIn(actual, expected) {
 function isBlank(value) {
 	return value == null || String(value) === "";
 }
+function compareDates(actual, expected) {
+	const left = Date.parse(String(actual));
+	const right = Date.parse(String(expected));
+	if (Number.isNaN(left) || Number.isNaN(right)) return null;
+	return left === right ? 0 : left < right ? -1 : 1;
+}
 function evaluateUnknownOperator(_operator) {
 	return true;
 }
@@ -36,6 +42,8 @@ function evaluateOp(operator, actual, expected) {
 		case "ends_with": return String(actual ?? "").endsWith(String(expected ?? ""));
 		case "in": return isIn(actual, expected);
 		case "not_in": return !isIn(actual, expected);
+		case "before": return compareDates(actual, expected) === -1;
+		case "after": return compareDates(actual, expected) === 1;
 		case "empty": return isBlank(actual);
 		case "filled": return !isBlank(actual);
 		default: return evaluateUnknownOperator(operator);
@@ -52,11 +60,11 @@ function evaluateConditions(conditions, values, flags) {
 	return {
 		hidden: Boolean(flags.hidden) || !visible,
 		required: Boolean(flags.required) || anyMatch(conditions?.required, values),
-		readonly: Boolean(flags.readonly) || anyMatch(conditions?.readonly, values),
+		readOnly: Boolean(flags.readOnly) || anyMatch(conditions?.readOnly, values),
 		disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values)
 	};
 }
 //#endregion
-export { evaluateConditions };
+export { evaluateConditions, toBoolean };
 
 //# sourceMappingURL=conditions.js.map

package/dist/form/components/conditions.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditions.js","names":[],"sources":["../../../resources/js/form/components/conditions.ts"],"sourcesContent":["import type { ConditionOperator } from \"@lattice/lattice/generated/types\";\n\nexport type Condition = { field: string; operator: ConditionOperator; value: unknown };\n\nexport type FieldConditions = {\n  visible?: Condition[];\n  required?: Condition[];\n  readonly?: Condition[];\n  disabled?: Condition[];\n};\n\nexport type FieldFlags = {\n  hidden?: boolean;\n  required?: boolean;\n  readonly?: boolean;\n  disabled?: boolean;\n};\n\nexport type FieldState = {\n  hidden: boolean;\n  required: boolean;\n  readonly: boolean;\n  disabled: boolean;\n};\n\nconst BOOLEAN_TRUE_VALUES = new Set([\"1\", \"true\", \"on\", \"yes\"]);\n\n// Mirrors PHP filter_var(FILTER_VALIDATE_BOOLEAN) so conditions evaluate\n// identically on the server and the client.\nfunction toBoolean(value: unknown): boolean {\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n\n  if (typeof value === \"number\") {\n    return value === 1;\n  }\n\n  return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());\n}\n\nfunction equals(actual: unknown, expected: unknown): boolean {\n  if (typeof expected === \"boolean\") {\n    return toBoolean(actual) === expected;\n  }\n  return String(actual ?? \"\") === String(expected ?? \"\");\n}\n\nfunction isIn(actual: unknown, expected: unknown): boolean {\n  const needles = (Array.isArray(expected) ? expected : [expected]).map((value) => String(value));\n  return needles.includes(String(actual ?? \"\"));\n}\n\nfunction isBlank(value: unknown): boolean {\n  return value == null || String(value) === \"\";\n}\n\n// Unknown operators from untrusted payloads fail open (the condition matches).\n// The `never` parameter makes a ConditionOperator added without a case above a\n// compile error rather than a silent fall-through.\nfunction evaluateUnknownOperator(_operator: never): boolean {\n  return true;\n}\n\nfunction evaluateOp(operator: ConditionOperator, actual: unknown, expected: unknown): boolean {\n  switch (operator) {\n    case \"eq\":\n      return equals(actual, expected);\n    case \"neq\":\n      return !equals(actual, expected);\n    case \"gt\":\n      return Number(actual) > Number(expected);\n    case \"lt\":\n      return Number(actual) < Number(expected);\n    case \"gte\":\n      return Number(actual) >= Number(expected);\n    case \"lte\":\n      return Number(actual) <= Number(expected);\n    case \"contains\":\n      return String(actual ?? \"\").includes(String(expected ?? \"\"));\n    case \"starts_with\":\n      return String(actual ?? \"\").startsWith(String(expected ?? \"\"));\n    case \"ends_with\":\n      return String(actual ?? \"\").endsWith(String(expected ?? \"\"));\n    case \"in\":\n      return isIn(actual, expected);\n    case \"not_in\":\n      return !isIn(actual, expected);\n    case \"empty\":\n      return isBlank(actual);\n    case \"filled\":\n      return !isBlank(actual);\n    default:\n      return evaluateUnknownOperator(operator);\n  }\n}\n\nfunction allMatch(conditions: Condition[], values: Record<string, unknown>): boolean {\n  return conditions.every((condition) =>\n    evaluateOp(condition.operator, values[condition.field], condition.value),\n  );\n}\n\nfunction anyMatch(conditions: Condition[] | undefined, values: Record<string, unknown>): boolean {\n  return Boolean(\n    conditions?.some((condition) =>\n      evaluateOp(condition.operator, values[condition.field], condition.value),\n    ),\n  );\n}\n\nexport function evaluateConditions(\n  conditions: FieldConditions | undefined,\n  values: Record<string, unknown>,\n  flags: FieldFlags,\n): FieldState {\n  const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);\n\n  return {\n    hidden: Boolean(flags.hidden) || !visible,\n    required: Boolean(flags.required) || anyMatch(conditions?.required, values),\n    readonly: Boolean(flags.readonly) || anyMatch(conditions?.readonly, values),\n    disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values),\n  };\n}\n"],"mappings":";AAyBA,IAAM,sBAAsB,IAAI,IAAI;CAAC;CAAK;CAAQ;CAAM;AAAK,CAAC;AAI9D,SAAS,UAAU,OAAyB;CAC1C,IAAI,OAAO,UAAU,WACnB,OAAO;CAGT,IAAI,OAAO,UAAU,UACnB,OAAO,UAAU;CAGnB,OAAO,oBAAoB,IAAI,OAAO,KAAK,EAAE,YAAY,CAAC;AAC5D;AAEA,SAAS,OAAO,QAAiB,UAA4B;CAC3D,IAAI,OAAO,aAAa,WACtB,OAAO,UAAU,MAAM,MAAM;CAE/B,OAAO,OAAO,UAAU,EAAE,MAAM,OAAO,YAAY,EAAE;AACvD;AAEA,SAAS,KAAK,QAAiB,UAA4B;CAEzD,QADiB,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ,GAAG,KAAK,UAAU,OAAO,KAAK,CACtF,EAAQ,SAAS,OAAO,UAAU,EAAE,CAAC;AAC9C;AAEA,SAAS,QAAQ,OAAyB;CACxC,OAAO,SAAS,QAAQ,OAAO,KAAK,MAAM;AAC5C;AAKA,SAAS,wBAAwB,WAA2B;CAC1D,OAAO;AACT;AAEA,SAAS,WAAW,UAA6B,QAAiB,UAA4B;CAC5F,QAAQ,UAAR;EACE,KAAK,MACH,OAAO,OAAO,QAAQ,QAAQ;EAChC,KAAK,OACH,OAAO,CAAC,OAAO,QAAQ,QAAQ;EACjC,KAAK,MACH,OAAO,OAAO,MAAM,IAAI,OAAO,QAAQ;EACzC,KAAK,MACH,OAAO,OAAO,MAAM,IAAI,OAAO,QAAQ;EACzC,KAAK,OACH,OAAO,OAAO,MAAM,KAAK,OAAO,QAAQ;EAC1C,KAAK,OACH,OAAO,OAAO,MAAM,KAAK,OAAO,QAAQ;EAC1C,KAAK,YACH,OAAO,OAAO,UAAU,EAAE,EAAE,SAAS,OAAO,YAAY,EAAE,CAAC;EAC7D,KAAK,eACH,OAAO,OAAO,UAAU,EAAE,EAAE,WAAW,OAAO,YAAY,EAAE,CAAC;EAC/D,KAAK,aACH,OAAO,OAAO,UAAU,EAAE,EAAE,SAAS,OAAO,YAAY,EAAE,CAAC;EAC7D,KAAK,MACH,OAAO,KAAK,QAAQ,QAAQ;EAC9B,KAAK,UACH,OAAO,CAAC,KAAK,QAAQ,QAAQ;EAC/B,KAAK,SACH,OAAO,QAAQ,MAAM;EACvB,KAAK,UACH,OAAO,CAAC,QAAQ,MAAM;EACxB,SACE,OAAO,wBAAwB,QAAQ;CAC3C;AACF;AAEA,SAAS,SAAS,YAAyB,QAA0C;CACnF,OAAO,WAAW,OAAO,cACvB,WAAW,UAAU,UAAU,OAAO,UAAU,QAAQ,UAAU,KAAK,CACzE;AACF;AAEA,SAAS,SAAS,YAAqC,QAA0C;CAC/F,OAAO,QACL,YAAY,MAAM,cAChB,WAAW,UAAU,UAAU,OAAO,UAAU,QAAQ,UAAU,KAAK,CACzE,CACF;AACF;AAEA,SAAgB,mBACd,YACA,QACA,OACY;CACZ,MAAM,UAAU,CAAC,YAAY,SAAS,UAAU,SAAS,WAAW,SAAS,MAAM;CAEnF,OAAO;EACL,QAAQ,QAAQ,MAAM,MAAM,KAAK,CAAC;EAClC,UAAU,QAAQ,MAAM,QAAQ,KAAK,SAAS,YAAY,UAAU,MAAM;EAC1E,UAAU,QAAQ,MAAM,QAAQ,KAAK,SAAS,YAAY,UAAU,MAAM;EAC1E,UAAU,QAAQ,MAAM,QAAQ,KAAK,SAAS,YAAY,UAAU,MAAM;CAC5E;AACF"}
+{"version":3,"file":"conditions.js","names":[],"sources":["../../../resources/js/form/components/conditions.ts"],"sourcesContent":["import type { Condition, Op } from \"@lattice/lattice/types/generated\";\n\nexport type { Condition };\n\nexport type FieldConditions = {\n  visible?: Condition[];\n  required?: Condition[];\n  readOnly?: Condition[];\n  disabled?: Condition[];\n};\n\nexport type FieldFlags = {\n  hidden?: boolean;\n  required?: boolean;\n  readOnly?: boolean;\n  disabled?: boolean;\n};\n\nexport type FieldState = {\n  hidden: boolean;\n  required: boolean;\n  readOnly: boolean;\n  disabled: boolean;\n};\n\nconst BOOLEAN_TRUE_VALUES = new Set([\"1\", \"true\", \"on\", \"yes\"]);\n\n// Mirrors PHP filter_var(FILTER_VALIDATE_BOOLEAN) so conditions evaluate\n// identically on the server and the client.\nexport function toBoolean(value: unknown): boolean {\n  if (typeof value === \"boolean\") {\n    return value;\n  }\n\n  if (typeof value === \"number\") {\n    return value === 1;\n  }\n\n  return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());\n}\n\nfunction equals(actual: unknown, expected: unknown): boolean {\n  if (typeof expected === \"boolean\") {\n    return toBoolean(actual) === expected;\n  }\n  return String(actual ?? \"\") === String(expected ?? \"\");\n}\n\nfunction isIn(actual: unknown, expected: unknown): boolean {\n  const needles = (Array.isArray(expected) ? expected : [expected]).map((value) => String(value));\n  return needles.includes(String(actual ?? \"\"));\n}\n\nfunction isBlank(value: unknown): boolean {\n  return value == null || String(value) === \"\";\n}\n\n// Null when either value can't be parsed, so before/after never matches a bad date. Mirrors PHP strtotime.\nfunction compareDates(actual: unknown, expected: unknown): number | null {\n  const left = Date.parse(String(actual));\n  const right = Date.parse(String(expected));\n\n  if (Number.isNaN(left) || Number.isNaN(right)) {\n    return null;\n  }\n\n  return left === right ? 0 : left < right ? -1 : 1;\n}\n\n// Unknown operators from untrusted payloads fail open (the condition matches).\n// The `never` parameter makes an Op value added without a case above a\n// compile error rather than a silent fall-through.\nfunction evaluateUnknownOperator(_operator: never): boolean {\n  return true;\n}\n\nfunction evaluateOp(operator: Op, actual: unknown, expected: unknown): boolean {\n  switch (operator) {\n    case \"eq\":\n      return equals(actual, expected);\n    case \"neq\":\n      return !equals(actual, expected);\n    case \"gt\":\n      return Number(actual) > Number(expected);\n    case \"lt\":\n      return Number(actual) < Number(expected);\n    case \"gte\":\n      return Number(actual) >= Number(expected);\n    case \"lte\":\n      return Number(actual) <= Number(expected);\n    case \"contains\":\n      return String(actual ?? \"\").includes(String(expected ?? \"\"));\n    case \"starts_with\":\n      return String(actual ?? \"\").startsWith(String(expected ?? \"\"));\n    case \"ends_with\":\n      return String(actual ?? \"\").endsWith(String(expected ?? \"\"));\n    case \"in\":\n      return isIn(actual, expected);\n    case \"not_in\":\n      return !isIn(actual, expected);\n    case \"before\":\n      return compareDates(actual, expected) === -1;\n    case \"after\":\n      return compareDates(actual, expected) === 1;\n    case \"empty\":\n      return isBlank(actual);\n    case \"filled\":\n      return !isBlank(actual);\n    default:\n      return evaluateUnknownOperator(operator);\n  }\n}\n\nfunction allMatch(conditions: Condition[], values: Record<string, unknown>): boolean {\n  return conditions.every((condition) =>\n    evaluateOp(condition.operator, values[condition.field], condition.value),\n  );\n}\n\nfunction anyMatch(conditions: Condition[] | undefined, values: Record<string, unknown>): boolean {\n  return Boolean(\n    conditions?.some((condition) =>\n      evaluateOp(condition.operator, values[condition.field], condition.value),\n    ),\n  );\n}\n\nexport function evaluateConditions(\n  conditions: FieldConditions | undefined,\n  values: Record<string, unknown>,\n  flags: FieldFlags,\n): FieldState {\n  const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);\n\n  return {\n    hidden: Boolean(flags.hidden) || !visible,\n    required: Boolean(flags.required) || anyMatch(conditions?.required, values),\n    readOnly: Boolean(flags.readOnly) || anyMatch(conditions?.readOnly, values),\n    disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values),\n  };\n}\n"],"mappings":";AAyBA,IAAM,sBAAsB,IAAI,IAAI;CAAC;CAAK;CAAQ;CAAM;AAAK,CAAC;AAI9D,SAAgB,UAAU,OAAyB;CACjD,IAAI,OAAO,UAAU,WACnB,OAAO;CAGT,IAAI,OAAO,UAAU,UACnB,OAAO,UAAU;CAGnB,OAAO,oBAAoB,IAAI,OAAO,KAAK,EAAE,YAAY,CAAC;AAC5D;AAEA,SAAS,OAAO,QAAiB,UAA4B;CAC3D,IAAI,OAAO,aAAa,WACtB,OAAO,UAAU,MAAM,MAAM;CAE/B,OAAO,OAAO,UAAU,EAAE,MAAM,OAAO,YAAY,EAAE;AACvD;AAEA,SAAS,KAAK,QAAiB,UAA4B;CAEzD,QADiB,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ,GAAG,KAAK,UAAU,OAAO,KAAK,CACtF,EAAQ,SAAS,OAAO,UAAU,EAAE,CAAC;AAC9C;AAEA,SAAS,QAAQ,OAAyB;CACxC,OAAO,SAAS,QAAQ,OAAO,KAAK,MAAM;AAC5C;AAGA,SAAS,aAAa,QAAiB,UAAkC;CACvE,MAAM,OAAO,KAAK,MAAM,OAAO,MAAM,CAAC;CACtC,MAAM,QAAQ,KAAK,MAAM,OAAO,QAAQ,CAAC;CAEzC,IAAI,OAAO,MAAM,IAAI,KAAK,OAAO,MAAM,KAAK,GAC1C,OAAO;CAGT,OAAO,SAAS,QAAQ,IAAI,OAAO,QAAQ,KAAK;AAClD;AAKA,SAAS,wBAAwB,WAA2B;CAC1D,OAAO;AACT;AAEA,SAAS,WAAW,UAAc,QAAiB,UAA4B;CAC7E,QAAQ,UAAR;EACE,KAAK,MACH,OAAO,OAAO,QAAQ,QAAQ;EAChC,KAAK,OACH,OAAO,CAAC,OAAO,QAAQ,QAAQ;EACjC,KAAK,MACH,OAAO,OAAO,MAAM,IAAI,OAAO,QAAQ;EACzC,KAAK,MACH,OAAO,OAAO,MAAM,IAAI,OAAO,QAAQ;EACzC,KAAK,OACH,OAAO,OAAO,MAAM,KAAK,OAAO,QAAQ;EAC1C,KAAK,OACH,OAAO,OAAO,MAAM,KAAK,OAAO,QAAQ;EAC1C,KAAK,YACH,OAAO,OAAO,UAAU,EAAE,EAAE,SAAS,OAAO,YAAY,EAAE,CAAC;EAC7D,KAAK,eACH,OAAO,OAAO,UAAU,EAAE,EAAE,WAAW,OAAO,YAAY,EAAE,CAAC;EAC/D,KAAK,aACH,OAAO,OAAO,UAAU,EAAE,EAAE,SAAS,OAAO,YAAY,EAAE,CAAC;EAC7D,KAAK,MACH,OAAO,KAAK,QAAQ,QAAQ;EAC9B,KAAK,UACH,OAAO,CAAC,KAAK,QAAQ,QAAQ;EAC/B,KAAK,UACH,OAAO,aAAa,QAAQ,QAAQ,MAAM;EAC5C,KAAK,SACH,OAAO,aAAa,QAAQ,QAAQ,MAAM;EAC5C,KAAK,SACH,OAAO,QAAQ,MAAM;EACvB,KAAK,UACH,OAAO,CAAC,QAAQ,MAAM;EACxB,SACE,OAAO,wBAAwB,QAAQ;CAC3C;AACF;AAEA,SAAS,SAAS,YAAyB,QAA0C;CACnF,OAAO,WAAW,OAAO,cACvB,WAAW,UAAU,UAAU,OAAO,UAAU,QAAQ,UAAU,KAAK,CACzE;AACF;AAEA,SAAS,SAAS,YAAqC,QAA0C;CAC/F,OAAO,QACL,YAAY,MAAM,cAChB,WAAW,UAAU,UAAU,OAAO,UAAU,QAAQ,UAAU,KAAK,CACzE,CACF;AACF;AAEA,SAAgB,mBACd,YACA,QACA,OACY;CACZ,MAAM,UAAU,CAAC,YAAY,SAAS,UAAU,SAAS,WAAW,SAAS,MAAM;CAEnF,OAAO;EACL,QAAQ,QAAQ,MAAM,MAAM,KAAK,CAAC;EAClC,UAAU,QAAQ,MAAM,QAAQ,KAAK,SAAS,YAAY,UAAU,MAAM;EAC1E,UAAU,QAAQ,MAAM,QAAQ,KAAK,SAAS,YAAY,UAAU,MAAM;EAC1E,UAAU,QAAQ,MAAM,QAAQ,KAAK,SAAS,YAAY,UAAU,MAAM;CAC5E;AACF"}

package/dist/form/components/context.d.ts

@@ -4,13 +4,9 @@ type FormContextValue = {
     componentRef: string;
     errors: Record<string, string | undefined>;
     fieldLabels: Record<string, string>;
-    invalid: (field: string) => boolean;
     precognitive: boolean;
     processing: boolean;
-    touch: (field: string) => void;
     validate: (field: string) => void;
-    validating: boolean;
-    valid: (field: string) => boolean;
 };
 export declare function FormProvider({ children, value, }: {
     children: React.ReactNode;

package/dist/form/components/context.js

@@ -7,13 +7,9 @@ var FormContext = createContext({
 	componentRef: "",
 	errors: {},
 	fieldLabels: {},
-	invalid: () => false,
 	precognitive: false,
 	processing: false,
-	touch: () => {},
-	validate: () => {},
-	validating: false,
-	valid: () => false
+	validate: () => {}
 });
 function FormProvider({ children, value }) {
 	return /* @__PURE__ */ jsx(FormContext.Provider, {

package/dist/form/components/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../resources/js/form/components/context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ntype FormContextValue = {\n  action: string;\n  clearErrors: (field: string) => void;\n  componentRef: string;\n  errors: Record<string, string | undefined>;\n  fieldLabels: Record<string, string>;\n  invalid: (field: string) => boolean;\n  precognitive: boolean;\n  processing: boolean;\n  touch: (field: string) => void;\n  validate: (field: string) => void;\n  validating: boolean;\n  valid: (field: string) => boolean;\n};\n\nconst FormContext = createContext<FormContextValue>({\n  action: \"#\",\n  clearErrors: () => {},\n  componentRef: \"\",\n  errors: {},\n  fieldLabels: {},\n  invalid: () => false,\n  precognitive: false,\n  processing: false,\n  touch: () => {},\n  validate: () => {},\n  validating: false,\n  valid: () => false,\n});\n\nexport function FormProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: FormContextValue;\n}) {\n  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n}\n\nexport function useFormContext() {\n  return useContext(FormContext);\n}\n"],"mappings":";;;AAiBA,IAAM,cAAc,cAAgC;CAClD,QAAQ;CACR,mBAAmB,CAAC;CACpB,cAAc;CACd,QAAQ,CAAC;CACT,aAAa,CAAC;CACd,eAAe;CACf,cAAc;CACd,YAAY;CACZ,aAAa,CAAC;CACd,gBAAgB,CAAC;CACjB,YAAY;CACZ,aAAa;AACf,CAAC;AAED,SAAgB,aAAa,EAC3B,UACA,SAIC;CACD,OAAO,oBAAC,YAAY,UAAb;EAA6B;EAAQ;CAA+B,CAAA;AAC7E;AAEA,SAAgB,iBAAiB;CAC/B,OAAO,WAAW,WAAW;AAC/B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../resources/js/form/components/context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ntype FormContextValue = {\n  action: string;\n  clearErrors: (field: string) => void;\n  componentRef: string;\n  errors: Record<string, string | undefined>;\n  fieldLabels: Record<string, string>;\n  precognitive: boolean;\n  processing: boolean;\n  validate: (field: string) => void;\n};\n\nconst FormContext = createContext<FormContextValue>({\n  action: \"#\",\n  clearErrors: () => {},\n  componentRef: \"\",\n  errors: {},\n  fieldLabels: {},\n  precognitive: false,\n  processing: false,\n  validate: () => {},\n});\n\nexport function FormProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: FormContextValue;\n}) {\n  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n}\n\nexport function useFormContext() {\n  return useContext(FormContext);\n}\n"],"mappings":";;;AAaA,IAAM,cAAc,cAAgC;CAClD,QAAQ;CACR,mBAAmB,CAAC;CACpB,cAAc;CACd,QAAQ,CAAC;CACT,aAAa,CAAC;CACd,cAAc;CACd,YAAY;CACZ,gBAAgB,CAAC;AACnB,CAAC;AAED,SAAgB,aAAa,EAC3B,UACA,SAIC;CACD,OAAO,oBAAC,YAAY,UAAb;EAA6B;EAAQ;CAA+B,CAAA;AAC7E;AAEA,SAAgB,iBAAiB;CAC/B,OAAO,WAAW,WAAW;AAC/B"}

package/dist/form/components/field-props.d.ts

@@ -0,0 +1,24 @@
+import { Node } from '../../core/types';
+import { FieldConditions } from './conditions';
+/**
+ * The props every form-field node shares (the PHP Field base). Nodes flow through
+ * the form framework loosely typed via the generic schema, so this is the typed
+ * lens the shared hooks read them through. Everything is optional because the
+ * lens is also applied to non-field nodes while walking the schema.
+ */
+export type FieldProps = {
+    conditions?: FieldConditions | null;
+    dependsOnAny?: boolean | null;
+    dependsOnKeys?: string[] | null;
+    disabled?: boolean | null;
+    helperText?: string | null;
+    hidden?: boolean | null;
+    label?: string | null;
+    name?: string;
+    readOnly?: boolean | null;
+    required?: boolean | null;
+    value?: unknown;
+};
+export declare function fieldProps(node: Node): FieldProps;
+/** The single schema traversal shared by the label/value and dependency-watch collectors. */
+export declare function walkFields(nodes: Node[] | undefined, visit: (props: FieldProps, node: Node) => void): void;

package/dist/form/components/field-props.js

@@ -0,0 +1,15 @@
+//#region resources/js/form/components/field-props.ts
+function fieldProps(node) {
+	return node.props;
+}
+/** The single schema traversal shared by the label/value and dependency-watch collectors. */
+function walkFields(nodes, visit) {
+	for (const child of nodes ?? []) {
+		visit(fieldProps(child), child);
+		walkFields(child.schema, visit);
+	}
+}
+//#endregion
+export { fieldProps, walkFields };
+
+//# sourceMappingURL=field-props.js.map

package/dist/form/components/field-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-props.js","names":[],"sources":["../../../resources/js/form/components/field-props.ts"],"sourcesContent":["import type { Node } from \"@lattice/lattice/core/types\";\nimport type { FieldConditions } from \"./conditions\";\n\n/**\n * The props every form-field node shares (the PHP Field base). Nodes flow through\n * the form framework loosely typed via the generic schema, so this is the typed\n * lens the shared hooks read them through. Everything is optional because the\n * lens is also applied to non-field nodes while walking the schema.\n */\nexport type FieldProps = {\n  conditions?: FieldConditions | null;\n  dependsOnAny?: boolean | null;\n  dependsOnKeys?: string[] | null;\n  disabled?: boolean | null;\n  helperText?: string | null;\n  hidden?: boolean | null;\n  label?: string | null;\n  name?: string;\n  readOnly?: boolean | null;\n  required?: boolean | null;\n  value?: unknown;\n};\n\nexport function fieldProps(node: Node): FieldProps {\n  return node.props as FieldProps;\n}\n\n/** The single schema traversal shared by the label/value and dependency-watch collectors. */\nexport function walkFields(\n  nodes: Node[] | undefined,\n  visit: (props: FieldProps, node: Node) => void,\n): void {\n  for (const child of nodes ?? []) {\n    visit(fieldProps(child), child);\n    walkFields(child.schema, visit);\n  }\n}\n"],"mappings":";AAuBA,SAAgB,WAAW,MAAwB;CACjD,OAAO,KAAK;AACd;;AAGA,SAAgB,WACd,OACA,OACM;CACN,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,WAAW,KAAK,GAAG,KAAK;EAC9B,WAAW,MAAM,QAAQ,KAAK;CAChC;AACF"}

package/dist/form/components/fields/checkbox.d.ts

@@ -1,16 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.checkbox": {
-            checked?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            required?: boolean;
-            tabIndex?: number;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const CheckboxComponent: RendererComponent<"form.checkbox">;

package/dist/form/components/fields/checkbox.js

@@ -1,36 +1,28 @@
-import { getOptionalNumberProp, getStringProp } from "../../../core/props.js";
 import { useFormContext } from "../context.js";
 import { useFormValue, useSetFormValue } from "../values.js";
+import { toBoolean } from "../conditions.js";
 import { Checkbox } from "../base/checkbox.js";
 import { Label } from "../base/label.js";
 import { useDependentField } from "../use-dependent-field.js";
-import { useEffect } from "react";
+import { useSeedDefault } from "../use-seed-default.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/checkbox.tsx
-function isTruthy(value) {
-	return value === true || value === "true" || value === "1" || value === 1;
-}
 var CheckboxComponent = ({ node }) => {
 	const { clearErrors, precognitive, validate } = useFormContext();
-	const { hidden, readonly, disabled } = useDependentField(node);
-	const name = getStringProp(node.props, "name");
+	const { hidden, readOnly, disabled } = useDependentField(node);
+	const name = node.props.name;
 	const setValue = useSetFormValue();
 	const storedValue = useFormValue(name);
-	const checked = storedValue !== void 0 ? isTruthy(storedValue) : Boolean(node.props?.checked);
-	useEffect(() => {
-		if (storedValue === void 0) setValue(name, Boolean(node.props?.checked));
-	}, [
-		name,
-		node.props?.checked,
-		setValue,
-		storedValue
-	]);
+	const defaultChecked = toBoolean(node.props.value);
+	const checked = storedValue !== void 0 ? toBoolean(storedValue) : defaultChecked;
+	useSeedDefault(name, defaultChecked);
 	if (hidden) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center space-x-3",
 		children: [/* @__PURE__ */ jsx(Checkbox, {
+			autoFocus: node.props.autoFocus ?? void 0,
 			checked,
-			disabled: readonly || disabled,
+			disabled: readOnly || disabled,
 			id: name,
 			name,
 			onCheckedChange: (next) => {
@@ -38,12 +30,15 @@ var CheckboxComponent = ({ node }) => {
 				if (precognitive) window.requestAnimationFrame(() => validate(name));
 				else clearErrors(name);
 			},
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+			tabIndex: node.props.tabIndex ?? void 0
 		}), /* @__PURE__ */ jsx(Label, {
 			htmlFor: name,
-			children: getStringProp(node.props, "label")
+			children: node.props.label
 		})]
-	});
+	}), node.props.helperText && /* @__PURE__ */ jsx("p", {
+		className: "mt-1 pl-7 text-sm text-lt-muted-fg",
+		children: node.props.helperText
+	})] });
 };
 //#endregion
 export { CheckboxComponent };

package/dist/form/components/fields/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/fields/checkbox.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Checkbox } from \"../base/checkbox\";\nimport { Label } from \"../base/label\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFormValue, useSetFormValue } from \"../values\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.checkbox\": {\n      checked?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      name?: string;\n      required?: boolean;\n      tabIndex?: number;\n    };\n  }\n}\n\nfunction isTruthy(value: unknown): boolean {\n  return value === true || value === \"true\" || value === \"1\" || value === 1;\n}\n\nexport const CheckboxComponent: RendererComponent<\"form.checkbox\"> = ({ node }) => {\n  const { clearErrors, precognitive, validate } = useFormContext();\n  const { hidden, readonly, disabled } = useDependentField(node);\n  const name = getStringProp(node.props, \"name\");\n  const setValue = useSetFormValue();\n  const storedValue = useFormValue(name);\n  const checked = storedValue !== undefined ? isTruthy(storedValue) : Boolean(node.props?.checked);\n\n  useEffect(() => {\n    if (storedValue === undefined) {\n      setValue(name, Boolean(node.props?.checked));\n    }\n  }, [name, node.props?.checked, setValue, storedValue]);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex items-center space-x-3\">\n      <Checkbox\n        checked={checked}\n        disabled={readonly || disabled}\n        id={name}\n        name={name}\n        onCheckedChange={(next) => {\n          const value = next === true;\n          setValue(name, value);\n          if (precognitive) {\n            window.requestAnimationFrame(() => validate(name));\n          } else {\n            clearErrors(name);\n          }\n        }}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n      />\n      <Label htmlFor={name}>{getStringProp(node.props, \"label\")}</Label>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAwBA,SAAS,SAAS,OAAyB;CACzC,OAAO,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO,UAAU;AAC1E;AAEA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,EAAE,aAAa,cAAc,aAAa,eAAe;CAC/D,MAAM,EAAE,QAAQ,UAAU,aAAa,kBAAkB,IAAI;CAC7D,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,WAAW,gBAAgB;CACjC,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,UAAU,gBAAgB,KAAA,IAAY,SAAS,WAAW,IAAI,QAAQ,KAAK,OAAO,OAAO;CAE/F,gBAAgB;EACd,IAAI,gBAAgB,KAAA,GAClB,SAAS,MAAM,QAAQ,KAAK,OAAO,OAAO,CAAC;CAE/C,GAAG;EAAC;EAAM,KAAK,OAAO;EAAS;EAAU;CAAW,CAAC;CAErD,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACW;GACT,UAAU,YAAY;GACtB,IAAI;GACE;GACN,kBAAkB,SAAS;IAEzB,SAAS,MADK,SAAS,IACH;IACpB,IAAI,cACF,OAAO,4BAA4B,SAAS,IAAI,CAAC;SAEjD,YAAY,IAAI;GAEpB;GACA,UAAU,sBAAsB,KAAK,OAAO,UAAU;EACvD,CAAA,GACD,oBAAC,OAAD;GAAO,SAAS;aAAO,cAAc,KAAK,OAAO,OAAO;EAAS,CAAA,CAC9D;;AAET"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/fields/checkbox.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Checkbox } from \"../base/checkbox\";\nimport { Label } from \"../base/label\";\nimport { toBoolean } from \"../conditions\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useSeedDefault } from \"../use-seed-default\";\nimport { useFormValue, useSetFormValue } from \"../values\";\n\nexport const CheckboxComponent: RendererComponent<\"form.checkbox\"> = ({ node }) => {\n  const { clearErrors, precognitive, validate } = useFormContext();\n  const { hidden, readOnly, disabled } = useDependentField(node);\n  const name = node.props.name;\n  const setValue = useSetFormValue();\n  const storedValue = useFormValue(name);\n  const defaultChecked = toBoolean(node.props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n\n  useSeedDefault(name, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <div>\n      <div className=\"flex items-center space-x-3\">\n        <Checkbox\n          autoFocus={node.props.autoFocus ?? undefined}\n          checked={checked}\n          disabled={readOnly || disabled}\n          id={name}\n          name={name}\n          onCheckedChange={(next) => {\n            const value = next === true;\n            setValue(name, value);\n            if (precognitive) {\n              window.requestAnimationFrame(() => validate(name));\n            } else {\n              clearErrors(name);\n            }\n          }}\n          tabIndex={node.props.tabIndex ?? undefined}\n        />\n        <Label htmlFor={name}>{node.props.label}</Label>\n      </div>\n      {node.props.helperText && (\n        <p className=\"mt-1 pl-7 text-sm text-lt-muted-fg\">{node.props.helperText}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,EAAE,aAAa,cAAc,aAAa,eAAe;CAC/D,MAAM,EAAE,QAAQ,UAAU,aAAa,kBAAkB,IAAI;CAC7D,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,WAAW,gBAAgB;CACjC,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,iBAAiB,UAAU,KAAK,MAAM,KAAK;CACjD,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CAErE,eAAe,MAAM,cAAc;CAEnC,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,OAAD,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACE,WAAW,KAAK,MAAM,aAAa,KAAA;GAC1B;GACT,UAAU,YAAY;GACtB,IAAI;GACE;GACN,kBAAkB,SAAS;IAEzB,SAAS,MADK,SAAS,IACH;IACpB,IAAI,cACF,OAAO,4BAA4B,SAAS,IAAI,CAAC;SAEjD,YAAY,IAAI;GAEpB;GACA,UAAU,KAAK,MAAM,YAAY,KAAA;EAClC,CAAA,GACD,oBAAC,OAAD;GAAO,SAAS;aAAO,KAAK,MAAM;EAAa,CAAA,CAC5C;KACJ,KAAK,MAAM,cACV,oBAAC,KAAD;EAAG,WAAU;YAAsC,KAAK,MAAM;CAAc,CAAA,CAE3E,EAAA,CAAA;AAET"}

package/dist/form/components/fields/choice.d.ts

@@ -1,14 +1,2 @@
-import { Option } from '../../../../../core/props';
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.choice": {
-            label?: string;
-            name?: string;
-            options?: Option[];
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const ChoiceComponent: RendererComponent<"form.choice">;

package/dist/form/components/fields/choice.js

@@ -1,32 +1,23 @@
-import { getOptionalNumberProp, getOptions, getStringProp } from "../../../core/props.js";
-import { SegmentedPills } from "../../../core/components/segmented-pills.js";
 import { useResolvedNode } from "../resolved-nodes.js";
-import { useFormValue, useSetFormValue } from "../values.js";
+import { SegmentedPills } from "../../../core/components/segmented-pills.js";
+import { useSeedDefault } from "../use-seed-default.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useControlledField } from "../use-controlled-field.js";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/choice.tsx
 var ChoiceComponent = ({ node }) => {
 	const resolvedNode = useResolvedNode(node);
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	const storedValue = useFormValue(name);
-	const setValue = useSetFormValue();
-	const options = useMemo(() => getOptions(resolvedNode.props), [resolvedNode.props]);
+	const { name, value, error, hidden, required, readOnly, disabled, commit } = useControlledField(node);
+	const options = useMemo(() => resolvedNode.props.options ?? [], [resolvedNode.props]);
 	const fallbackValue = options[0]?.value ?? "";
 	const selected = value || fallbackValue;
-	useEffect(() => {
-		if (storedValue === void 0 && selected) setValue(name, selected);
-	}, [
-		name,
-		storedValue,
-		selected,
-		setValue
-	]);
+	useSeedDefault(name, selected || void 0);
 	if (hidden || options.length === 0) return null;
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
 		error,
-		label: getStringProp(node.props, "label"),
+		helperText: node.props.helperText ?? void 0,
+		label: node.props.label ?? "",
 		name,
 		required,
 		children: [/* @__PURE__ */ jsx("input", {
@@ -34,11 +25,13 @@ var ChoiceComponent = ({ node }) => {
 			type: "hidden",
 			value: selected
 		}), /* @__PURE__ */ jsx(SegmentedPills, {
-			ariaLabel: getStringProp(node.props, "label"),
-			disabled: readonly || disabled,
+			ariaLabel: node.props.label ?? void 0,
+			autoFocus: node.props.autoFocus ?? void 0,
+			disabled: readOnly || disabled,
+			name,
 			onSelect: commit,
 			options,
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			tabIndex: node.props.tabIndex ?? void 0,
 			value: selected
 		})]
 	});

package/dist/form/components/fields/choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"choice.js","names":[],"sources":["../../../../resources/js/form/components/fields/choice.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport {\n  type Option,\n  getOptionalNumberProp,\n  getOptions,\n  getStringProp,\n} from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { SegmentedPills } from \"@lattice/lattice/core/components/segmented-pills\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useFormValue, useSetFormValue } from \"../values\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.choice\": {\n      label?: string;\n      name?: string;\n      options?: Option[];\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const ChoiceComponent: RendererComponent<\"form.choice\"> = ({ node }) => {\n  const resolvedNode = useResolvedNode(node);\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n  const storedValue = useFormValue(name);\n  const setValue = useSetFormValue();\n  const options = useMemo(() => getOptions(resolvedNode.props), [resolvedNode.props]);\n  const fallbackValue = options[0]?.value ?? \"\";\n  const selected = value || fallbackValue;\n\n  // Seed the store with the default selection so dependent fields and the\n  // submitted payload reflect it before the user interacts.\n  useEffect(() => {\n    if (storedValue === undefined && selected) {\n      setValue(name, selected);\n    }\n  }, [name, storedValue, selected, setValue]);\n\n  if (hidden || options.length === 0) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <input name={name} type=\"hidden\" value={selected} />\n      <SegmentedPills\n        ariaLabel={getStringProp(node.props, \"label\")}\n        disabled={readonly || disabled}\n        onSelect={commit}\n        options={options}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        value={selected}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;AA0BA,IAAa,mBAAqD,EAAE,WAAW;CAC7E,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CACzB,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,WAAW,gBAAgB;CACjC,MAAM,UAAU,cAAc,WAAW,aAAa,KAAK,GAAG,CAAC,aAAa,KAAK,CAAC;CAClF,MAAM,gBAAgB,QAAQ,IAAI,SAAS;CAC3C,MAAM,WAAW,SAAS;CAI1B,gBAAgB;EACd,IAAI,gBAAgB,KAAA,KAAa,UAC/B,SAAS,MAAM,QAAQ;CAE3B,GAAG;EAAC;EAAM;EAAa;EAAU;CAAQ,CAAC;CAE1C,IAAI,UAAU,QAAQ,WAAW,GAC/B,OAAO;CAGT,OACE,qBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAJZ,CAME,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAW,CAAA,GACnD,oBAAC,gBAAD;GACE,WAAW,cAAc,KAAK,OAAO,OAAO;GAC5C,UAAU,YAAY;GACtB,UAAU;GACD;GACT,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,OAAO;EACR,CAAA,CACa;;AAEpB"}
+{"version":3,"file":"choice.js","names":[],"sources":["../../../../resources/js/form/components/fields/choice.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { Option, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { SegmentedPills } from \"@lattice/lattice/core/components/segmented-pills\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useSeedDefault } from \"../use-seed-default\";\n\nexport const ChoiceComponent: RendererComponent<\"form.choice\"> = ({ node }) => {\n  const resolvedNode = useResolvedNode(node);\n  const { name, value, error, hidden, required, readOnly, disabled, commit } =\n    useControlledField(node);\n  const options = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const fallbackValue = options[0]?.value ?? \"\";\n  const selected = value || fallbackValue;\n\n  useSeedDefault(name, selected || undefined);\n\n  if (hidden || options.length === 0) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      helperText={node.props.helperText ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <input name={name} type=\"hidden\" value={selected} />\n      <SegmentedPills\n        ariaLabel={node.props.label ?? undefined}\n        autoFocus={node.props.autoFocus ?? undefined}\n        disabled={readOnly || disabled}\n        name={name}\n        onSelect={commit}\n        options={options}\n        tabIndex={node.props.tabIndex ?? undefined}\n        value={selected}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,mBAAqD,EAAE,WAAW;CAC7E,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CACzB,MAAM,UAAU,cACP,aAAa,MAAiC,WAAW,CAAC,GACjE,CAAC,aAAa,KAAK,CACrB;CACA,MAAM,gBAAgB,QAAQ,IAAI,SAAS;CAC3C,MAAM,WAAW,SAAS;CAE1B,eAAe,MAAM,YAAY,KAAA,CAAS;CAE1C,IAAI,UAAU,QAAQ,WAAW,GAC/B,OAAO;CAGT,OACE,qBAAC,gBAAD;EACS;EACP,YAAY,KAAK,MAAM,cAAc,KAAA;EACrC,OAAO,KAAK,MAAM,SAAS;EACrB;EACI;YALZ,CAOE,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAW,CAAA,GACnD,oBAAC,gBAAD;GACE,WAAW,KAAK,MAAM,SAAS,KAAA;GAC/B,WAAW,KAAK,MAAM,aAAa,KAAA;GACnC,UAAU,YAAY;GAChB;GACN,UAAU;GACD;GACT,UAAU,KAAK,MAAM,YAAY,KAAA;GACjC,OAAO;EACR,CAAA,CACa;;AAEpB"}

package/dist/form/components/fields/date-input.d.ts

@@ -1,20 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.date-input": {
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            max?: string;
-            min?: string;
-            name?: string;
-            readonly?: boolean;
-            required?: boolean;
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const DateInputComponent: RendererComponent<"form.date-input">;

package/dist/form/components/fields/date-input.js

@@ -1,27 +1,22 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
 import { Input } from "../base/input.js";
+import { SimpleField } from "./simple-field.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/date-input.tsx
 var DateInputComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: /* @__PURE__ */ jsx(Input, {
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
+			autoFocus: props.autoFocus ?? false,
 			disabled,
 			id: name,
-			max: getStringProp(node.props, "max") || void 0,
-			min: getStringProp(node.props, "min") || void 0,
+			max: props.max || void 0,
+			min: props.min || void 0,
 			name,
 			onChange: (event) => commit(event.target.value),
-			readOnly: readonly,
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			readOnly,
+			tabIndex: props.tabIndex ?? void 0,
 			type: "date",
 			value
 		})

package/dist/form/components/fields/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { Input } from \"../base/input\";\nimport { useControlledField } from \"../use-controlled-field\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.date-input\": {\n      autoFocus?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      max?: string;\n      min?: string;\n      name?: string;\n      readonly?: boolean;\n      required?: boolean;\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const DateInputComponent: RendererComponent<\"form.date-input\"> = ({ node }) => {\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <Input\n        autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n        disabled={disabled}\n        id={name}\n        max={getStringProp(node.props, \"max\") || undefined}\n        min={getStringProp(node.props, \"min\") || undefined}\n        name={name}\n        onChange={(event) => commit(event.target.value)}\n        readOnly={readonly}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        type=\"date\"\n        value={value}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAEV,oBAAC,OAAD;GACE,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACJ,KAAK,cAAc,KAAK,OAAO,KAAK,KAAK,KAAA;GACzC,KAAK,cAAc,KAAK,OAAO,KAAK,KAAK,KAAA;GACnC;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,UAAU;GACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,MAAK;GACE;EACR,CAAA;CACa,CAAA;AAEpB"}
+{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateInputComponent: RendererComponent<\"form.date-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => (\n        <Input\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type=\"date\"\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aACnC,oBAAC,OAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,IAAI;GACJ,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GACZ;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GACpC;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GACE;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/hidden-input.d.ts

@@ -1,10 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.hidden-input": {
-            name?: string;
-            value?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const HiddenInputComponent: RendererComponent<"form.hidden-input">;

package/dist/form/components/fields/hidden-input.js

@@ -1,9 +1,8 @@
-import { getStringProp } from "../../../core/props.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/hidden-input.tsx
 var HiddenInputComponent = ({ node }) => /* @__PURE__ */ jsx("input", {
-	defaultValue: getStringProp(node.props, "value"),
-	name: getStringProp(node.props, "name"),
+	defaultValue: typeof node.props.value === "string" ? node.props.value : "",
+	name: node.props.name,
 	type: "hidden"
 });
 //#endregion

package/dist/form/components/fields/hidden-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"hidden-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/hidden-input.tsx"],"sourcesContent":["import { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.hidden-input\": {\n      name?: string;\n      value?: string;\n    };\n  }\n}\n\nexport const HiddenInputComponent: RendererComponent<\"form.hidden-input\"> = ({ node }) => (\n  <input\n    defaultValue={getStringProp(node.props, \"value\")}\n    name={getStringProp(node.props, \"name\")}\n    type=\"hidden\"\n  />\n);\n"],"mappings":";;;AAYA,IAAa,wBAAgE,EAAE,WAC7E,oBAAC,SAAD;CACE,cAAc,cAAc,KAAK,OAAO,OAAO;CAC/C,MAAM,cAAc,KAAK,OAAO,MAAM;CACtC,MAAK;AACN,CAAA"}
+{"version":3,"file":"hidden-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/hidden-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nexport const HiddenInputComponent: RendererComponent<\"form.hidden-input\"> = ({ node }) => (\n  <input\n    defaultValue={typeof node.props.value === \"string\" ? node.props.value : \"\"}\n    name={node.props.name}\n    type=\"hidden\"\n  />\n);\n"],"mappings":";;AAEA,IAAa,wBAAgE,EAAE,WAC7E,oBAAC,SAAD;CACE,cAAc,OAAO,KAAK,MAAM,UAAU,WAAW,KAAK,MAAM,QAAQ;CACxE,MAAM,KAAK,MAAM;CACjB,MAAK;AACN,CAAA"}

package/dist/form/components/fields/number-input.d.ts

@@ -1,23 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.number-input": {
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            max?: number;
-            min?: number;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            slider?: boolean;
-            step?: number;
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const NumberInputComponent: RendererComponent<"form.number-input">;