@lattice-php/lattice 0.1.0

package/dist/form/components/conditions.js

@@ -0,0 +1,62 @@
+//#region resources/js/form/components/conditions.ts
+var BOOLEAN_TRUE_VALUES = new Set([
+	"1",
+	"true",
+	"on",
+	"yes"
+]);
+function toBoolean(value) {
+	if (typeof value === "boolean") return value;
+	if (typeof value === "number") return value === 1;
+	return BOOLEAN_TRUE_VALUES.has(String(value).toLowerCase());
+}
+function equals(actual, expected) {
+	if (typeof expected === "boolean") return toBoolean(actual) === expected;
+	return String(actual ?? "") === String(expected ?? "");
+}
+function isIn(actual, expected) {
+	return (Array.isArray(expected) ? expected : [expected]).map((value) => String(value)).includes(String(actual ?? ""));
+}
+function isBlank(value) {
+	return value == null || String(value) === "";
+}
+function evaluateUnknownOperator(_operator) {
+	return true;
+}
+function evaluateOp(operator, actual, expected) {
+	switch (operator) {
+		case "eq": return equals(actual, expected);
+		case "neq": return !equals(actual, expected);
+		case "gt": return Number(actual) > Number(expected);
+		case "lt": return Number(actual) < Number(expected);
+		case "gte": return Number(actual) >= Number(expected);
+		case "lte": return Number(actual) <= Number(expected);
+		case "contains": return String(actual ?? "").includes(String(expected ?? ""));
+		case "starts_with": return String(actual ?? "").startsWith(String(expected ?? ""));
+		case "ends_with": return String(actual ?? "").endsWith(String(expected ?? ""));
+		case "in": return isIn(actual, expected);
+		case "not_in": return !isIn(actual, expected);
+		case "empty": return isBlank(actual);
+		case "filled": return !isBlank(actual);
+		default: return evaluateUnknownOperator(operator);
+	}
+}
+function allMatch(conditions, values) {
+	return conditions.every((condition) => evaluateOp(condition.operator, values[condition.field], condition.value));
+}
+function anyMatch(conditions, values) {
+	return Boolean(conditions?.some((condition) => evaluateOp(condition.operator, values[condition.field], condition.value)));
+}
+function evaluateConditions(conditions, values, flags) {
+	const visible = !conditions?.visible?.length || allMatch(conditions.visible, values);
+	return {
+		hidden: Boolean(flags.hidden) || !visible,
+		required: Boolean(flags.required) || anyMatch(conditions?.required, values),
+		readonly: Boolean(flags.readonly) || anyMatch(conditions?.readonly, values),
+		disabled: Boolean(flags.disabled) || anyMatch(conditions?.disabled, values)
+	};
+}
+//#endregion
+export { evaluateConditions };
+
+//# sourceMappingURL=conditions.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+type FormContextValue = {
+    action: string;
+    clearErrors: (field: string) => void;
+    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;
+    value: FormContextValue;
+}): import("react").JSX.Element;
+export declare function useFormContext(): FormContextValue;
+export {};

package/dist/form/components/context.js

@@ -0,0 +1,30 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/form/components/context.tsx
+var FormContext = createContext({
+	action: "#",
+	clearErrors: () => {},
+	componentRef: "",
+	errors: {},
+	fieldLabels: {},
+	invalid: () => false,
+	precognitive: false,
+	processing: false,
+	touch: () => {},
+	validate: () => {},
+	validating: false,
+	valid: () => false
+});
+function FormProvider({ children, value }) {
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value,
+		children
+	});
+}
+function useFormContext() {
+	return useContext(FormContext);
+}
+//#endregion
+export { FormProvider, useFormContext };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,16 @@
+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;
+        };
+    }
+}
+export declare const CheckboxComponent: RendererComponent<"form.checkbox">;

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

@@ -0,0 +1,51 @@
+import { getOptionalNumberProp, getStringProp } from "../../../core/props.js";
+import { useFormContext } from "../context.js";
+import { useFormValue, useSetFormValue } from "../values.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 { 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 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
+	]);
+	if (hidden) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center space-x-3",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			checked,
+			disabled: readonly || disabled,
+			id: name,
+			name,
+			onCheckedChange: (next) => {
+				setValue(name, next === true);
+				if (precognitive) window.requestAnimationFrame(() => validate(name));
+				else clearErrors(name);
+			},
+			tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+		}), /* @__PURE__ */ jsx(Label, {
+			htmlFor: name,
+			children: getStringProp(node.props, "label")
+		})]
+	});
+};
+//#endregion
+export { CheckboxComponent };
+
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,14 @@
+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;
+        };
+    }
+}
+export declare const ChoiceComponent: RendererComponent<"form.choice">;

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

@@ -0,0 +1,49 @@
+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 { FormFieldFrame } from "../base/field.js";
+import { useControlledField } from "../use-controlled-field.js";
+import { useEffect, 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 fallbackValue = options[0]?.value ?? "";
+	const selected = value || fallbackValue;
+	useEffect(() => {
+		if (storedValue === void 0 && selected) setValue(name, selected);
+	}, [
+		name,
+		storedValue,
+		selected,
+		setValue
+	]);
+	if (hidden || options.length === 0) return null;
+	return /* @__PURE__ */ jsxs(FormFieldFrame, {
+		error,
+		label: getStringProp(node.props, "label"),
+		name,
+		required,
+		children: [/* @__PURE__ */ jsx("input", {
+			name,
+			type: "hidden",
+			value: selected
+		}), /* @__PURE__ */ jsx(SegmentedPills, {
+			ariaLabel: getStringProp(node.props, "label"),
+			disabled: readonly || disabled,
+			onSelect: commit,
+			options,
+			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			value: selected
+		})]
+	});
+};
+//#endregion
+export { ChoiceComponent };
+
+//# sourceMappingURL=choice.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+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;
+        };
+    }
+}
+export declare const DateInputComponent: RendererComponent<"form.date-input">;

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

@@ -0,0 +1,33 @@
+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 { 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"),
+			disabled,
+			id: name,
+			max: getStringProp(node.props, "max") || void 0,
+			min: getStringProp(node.props, "min") || void 0,
+			name,
+			onChange: (event) => commit(event.target.value),
+			readOnly: readonly,
+			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			type: "date",
+			value
+		})
+	});
+};
+//#endregion
+export { DateInputComponent };
+
+//# sourceMappingURL=date-input.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,12 @@
+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"),
+	type: "hidden"
+});
+//#endregion
+export { HiddenInputComponent };
+
+//# sourceMappingURL=hidden-input.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+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;
+        };
+    }
+}
+export declare const NumberInputComponent: RendererComponent<"form.number-input">;

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

@@ -0,0 +1,55 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/number-input.tsx
+var NumberInputComponent = ({ node }) => {
+	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
+	if (hidden) return null;
+	const onChange = (event) => commit(event.target.value);
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error,
+		label: getStringProp(node.props, "label"),
+		name,
+		required,
+		children: getBooleanProp(node.props, "slider") ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx("input", {
+				"aria-label": getStringProp(node.props, "label"),
+				className: "h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50",
+				disabled: disabled || readonly,
+				id: name,
+				max: getOptionalNumberProp(node.props, "max"),
+				min: getOptionalNumberProp(node.props, "min"),
+				name,
+				onChange,
+				step: getOptionalNumberProp(node.props, "step"),
+				tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+				type: "range",
+				value
+			}), /* @__PURE__ */ jsx("output", {
+				className: "w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg",
+				children: value
+			})]
+		}) : /* @__PURE__ */ jsx(Input, {
+			autoFocus: getBooleanProp(node.props, "autoFocus"),
+			disabled,
+			id: name,
+			max: getOptionalNumberProp(node.props, "max"),
+			min: getOptionalNumberProp(node.props, "min"),
+			name,
+			onChange,
+			placeholder: getStringProp(node.props, "placeholder"),
+			readOnly: readonly,
+			step: getOptionalNumberProp(node.props, "step"),
+			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			type: "number",
+			value
+		})
+	});
+};
+//#endregion
+export { NumberInputComponent };
+
+//# sourceMappingURL=number-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-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.number-input\": {\n      autoFocus?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      max?: number;\n      min?: number;\n      name?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      slider?: boolean;\n      step?: number;\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const NumberInputComponent: RendererComponent<\"form.number-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  const onChange = (event: React.ChangeEvent<HTMLInputElement>): void => commit(event.target.value);\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      {getBooleanProp(node.props, \"slider\") ? (\n        <div className=\"flex items-center gap-3\">\n          <input\n            aria-label={getStringProp(node.props, \"label\")}\n            className=\"h-2 w-full cursor-pointer appearance-none rounded-lt-sm bg-lt-muted accent-lt-primary disabled:cursor-not-allowed disabled:opacity-50\"\n            disabled={disabled || readonly}\n            id={name}\n            max={getOptionalNumberProp(node.props, \"max\")}\n            min={getOptionalNumberProp(node.props, \"min\")}\n            name={name}\n            onChange={onChange}\n            step={getOptionalNumberProp(node.props, \"step\")}\n            tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n            type=\"range\"\n            value={value}\n          />\n          <output className=\"w-10 shrink-0 text-right text-sm tabular-nums text-lt-fg\">\n            {value}\n          </output>\n        </div>\n      ) : (\n        <Input\n          autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n          disabled={disabled}\n          id={name}\n          max={getOptionalNumberProp(node.props, \"max\")}\n          min={getOptionalNumberProp(node.props, \"min\")}\n          name={name}\n          onChange={onChange}\n          placeholder={getStringProp(node.props, \"placeholder\")}\n          readOnly={readonly}\n          step={getOptionalNumberProp(node.props, \"step\")}\n          tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n          type=\"number\"\n          value={value}\n        />\n      )}\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;AA4BA,IAAa,wBAAgE,EAAE,WAAW;CACxF,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CAEzB,IAAI,QACF,OAAO;CAGT,MAAM,YAAY,UAAqD,OAAO,MAAM,OAAO,KAAK;CAEhG,OACE,oBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAET,eAAe,KAAK,OAAO,QAAQ,IAClC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,SAAD;IACE,cAAY,cAAc,KAAK,OAAO,OAAO;IAC7C,WAAU;IACV,UAAU,YAAY;IACtB,IAAI;IACJ,KAAK,sBAAsB,KAAK,OAAO,KAAK;IAC5C,KAAK,sBAAsB,KAAK,OAAO,KAAK;IACtC;IACI;IACV,MAAM,sBAAsB,KAAK,OAAO,MAAM;IAC9C,UAAU,sBAAsB,KAAK,OAAO,UAAU;IACtD,MAAK;IACE;GACR,CAAA,GACD,oBAAC,UAAD;IAAQ,WAAU;cACf;GACK,CAAA,CACL;OAEL,oBAAC,OAAD;GACE,WAAW,eAAe,KAAK,OAAO,WAAW;GACvC;GACV,IAAI;GACJ,KAAK,sBAAsB,KAAK,OAAO,KAAK;GAC5C,KAAK,sBAAsB,KAAK,OAAO,KAAK;GACtC;GACI;GACV,aAAa,cAAc,KAAK,OAAO,aAAa;GACpD,UAAU;GACV,MAAM,sBAAsB,KAAK,OAAO,MAAM;GAC9C,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,MAAK;GACE;EACR,CAAA;CAEW,CAAA;AAEpB"}

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

@@ -0,0 +1,29 @@
+import { RendererComponent } from '../../../../../core/types';
+import { FormLabelAction } from '../types';
+type PasswordConfirmation = {
+    label?: string;
+    name?: string;
+    placeholder?: string;
+};
+declare module '../../../../../core/types' {
+    interface ComponentProps {
+        "form.password-input": {
+            autoComplete?: string;
+            autoFocus?: boolean;
+            conditions?: unknown;
+            confirmation?: PasswordConfirmation;
+            disabled?: boolean;
+            hidden?: boolean;
+            label?: string;
+            labelAction?: FormLabelAction;
+            name?: string;
+            passwordRules?: string;
+            placeholder?: string;
+            readonly?: boolean;
+            required?: boolean;
+            tabIndex?: number;
+        };
+    }
+}
+export declare const PasswordInputComponent: RendererComponent<"form.password-input">;
+export {};

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

@@ -0,0 +1,73 @@
+import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
+import { useFormContext } from "../context.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useFieldCommit } from "../use-field-commit.js";
+import PasswordInput from "../base/password-input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/password-input.tsx
+function getPasswordConfirmation(props) {
+	const value = props?.confirmation;
+	if (typeof value !== "object" || value === null) return;
+	const confirmation = value;
+	return {
+		label: typeof confirmation.label === "string" ? confirmation.label : void 0,
+		name: typeof confirmation.name === "string" ? confirmation.name : void 0,
+		placeholder: typeof confirmation.placeholder === "string" ? confirmation.placeholder : void 0
+	};
+}
+var PasswordInputComponent = ({ node }) => {
+	const { errors } = useFormContext();
+	const { hidden, required, readonly, disabled } = useDependentField(node);
+	const { commit } = useFieldCommit();
+	const name = getStringProp(node.props, "name");
+	const confirmation = getPasswordConfirmation(node.props);
+	const confirmationName = confirmation?.name ?? `${name}_confirmation`;
+	const passwordRules = getStringProp(node.props, "passwordRules") || void 0;
+	if (hidden) return null;
+	const onChange = (field) => (event) => {
+		commit(field, event.target.value);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-6",
+		children: [/* @__PURE__ */ jsx(FormFieldFrame, {
+			error: errors[name],
+			label: getStringProp(node.props, "label"),
+			labelAction: node.props?.labelAction,
+			name,
+			required,
+			children: /* @__PURE__ */ jsx(PasswordInput, {
+				autoComplete: getStringProp(node.props, "autoComplete"),
+				autoFocus: getBooleanProp(node.props, "autoFocus"),
+				disabled,
+				id: name,
+				name,
+				onChange: onChange(name),
+				placeholder: getStringProp(node.props, "placeholder"),
+				passwordrules: passwordRules,
+				readOnly: readonly,
+				tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+			})
+		}), confirmation && /* @__PURE__ */ jsx(FormFieldFrame, {
+			error: errors[confirmationName],
+			label: confirmation.label ?? "Confirm password",
+			name: confirmationName,
+			required,
+			children: /* @__PURE__ */ jsx(PasswordInput, {
+				autoComplete: "new-password",
+				disabled,
+				id: confirmationName,
+				name: confirmationName,
+				onChange: onChange(confirmationName),
+				placeholder: confirmation.placeholder ?? confirmation.label ?? "Confirm password",
+				passwordrules: passwordRules,
+				readOnly: readonly,
+				tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+			})
+		})]
+	});
+};
+//#endregion
+export { PasswordInputComponent };
+
+//# sourceMappingURL=password-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { NodeProps, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\nimport type { FormLabelAction } from \"../types\";\n\ntype PasswordConfirmation = {\n  label?: string;\n  name?: string;\n  placeholder?: string;\n};\n\nfunction getPasswordConfirmation(props: NodeProps | undefined): PasswordConfirmation | undefined {\n  const value = props?.confirmation;\n\n  if (typeof value !== \"object\" || value === null) {\n    return undefined;\n  }\n\n  const confirmation = value as Record<string, unknown>;\n\n  return {\n    label: typeof confirmation.label === \"string\" ? confirmation.label : undefined,\n    name: typeof confirmation.name === \"string\" ? confirmation.name : undefined,\n    placeholder:\n      typeof confirmation.placeholder === \"string\" ? confirmation.placeholder : undefined,\n  };\n}\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.password-input\": {\n      autoComplete?: string;\n      autoFocus?: boolean;\n      conditions?: unknown;\n      confirmation?: PasswordConfirmation;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      labelAction?: FormLabelAction;\n      name?: string;\n      passwordRules?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      tabIndex?: number;\n    };\n  }\n}\n\nexport const PasswordInputComponent: RendererComponent<\"form.password-input\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readonly, disabled } = useDependentField(node);\n  const { commit } = useFieldCommit();\n  const name = getStringProp(node.props, \"name\");\n  const confirmation = getPasswordConfirmation(node.props);\n  const confirmationName = confirmation?.name ?? `${name}_confirmation`;\n  const passwordRules = getStringProp(node.props, \"passwordRules\") || undefined;\n\n  if (hidden) {\n    return null;\n  }\n\n  const onChange =\n    (field: string) =>\n    (event: React.ChangeEvent<HTMLInputElement>): void => {\n      commit(field, event.target.value);\n    };\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={errors[name]}\n        label={getStringProp(node.props, \"label\")}\n        labelAction={node.props?.labelAction}\n        name={name}\n        required={required}\n      >\n        <PasswordInput\n          autoComplete={getStringProp(node.props, \"autoComplete\")}\n          autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={onChange(name)}\n          placeholder={getStringProp(node.props, \"placeholder\")}\n          passwordrules={passwordRules}\n          readOnly={readonly}\n          tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        />\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationName]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            disabled={disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={onChange(confirmationName)}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={readonly}\n            tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,SAAS,wBAAwB,OAAgE;CAC/F,MAAM,QAAQ,OAAO;CAErB,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC;CAGF,MAAM,eAAe;CAErB,OAAO;EACL,OAAO,OAAO,aAAa,UAAU,WAAW,aAAa,QAAQ,KAAA;EACrE,MAAM,OAAO,aAAa,SAAS,WAAW,aAAa,OAAO,KAAA;EAClE,aACE,OAAO,aAAa,gBAAgB,WAAW,aAAa,cAAc,KAAA;CAC9E;AACF;AAuBA,IAAa,0BAAoE,EAAE,WAAW;CAC5F,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,eAAe,wBAAwB,KAAK,KAAK;CACvD,MAAM,mBAAmB,cAAc,QAAQ,GAAG,KAAK;CACvD,MAAM,gBAAgB,cAAc,KAAK,OAAO,eAAe,KAAK,KAAA;CAEpE,IAAI,QACF,OAAO;CAGT,MAAM,YACH,WACA,UAAqD;EACpD,OAAO,OAAO,MAAM,OAAO,KAAK;CAClC;CAEF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,cAAc,KAAK,OAAO,OAAO;GACxC,aAAa,KAAK,OAAO;GACnB;GACI;aAEV,oBAAC,eAAD;IACE,cAAc,cAAc,KAAK,OAAO,cAAc;IACtD,WAAW,eAAe,KAAK,OAAO,WAAW;IACvC;IACV,IAAI;IACE;IACN,UAAU,SAAS,IAAI;IACvB,aAAa,cAAc,KAAK,OAAO,aAAa;IACpD,eAAe;IACf,UAAU;IACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACvD,CAAA;EACa,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACI;aAEV,oBAAC,eAAD;IACE,cAAa;IACH;IACV,IAAI;IACJ,MAAM;IACN,UAAU,SAAS,gBAAgB;IACnC,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU;IACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACvD,CAAA;EACa,CAAA,CAEf;;AAET"}

package/dist/form/components/fields/rich-editor.d.ts

@@ -0,0 +1,17 @@
+import { RendererComponent } from '../../../../../core/types';
+declare module '../../../../../core/types' {
+    interface ComponentProps {
+        "form.rich-editor": {
+            conditions?: unknown;
+            disabled?: boolean;
+            hidden?: boolean;
+            label?: string;
+            name?: string;
+            placeholder?: string;
+            readonly?: boolean;
+            required?: boolean;
+            value?: unknown;
+        };
+    }
+}
+export declare const RichEditorComponent: RendererComponent<"form.rich-editor">;