@lattice-php/lattice 0.1.0 → 0.2.0

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

@@ -1,52 +1,49 @@
-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, 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,
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, value, readOnly, disabled, commit }) => {
+			const onChange = (event) => commit(event.target.value);
+			return props.slider ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("input", {
+					"aria-label": 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: props.max ?? void 0,
+					min: props.min ?? void 0,
+					name,
+					onChange,
+					step: props.step ?? void 0,
+					tabIndex: props.tabIndex ?? void 0,
+					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: props.autoFocus ?? false,
+				disabled,
 				id: name,
-				max: getOptionalNumberProp(node.props, "max"),
-				min: getOptionalNumberProp(node.props, "min"),
+				max: props.max ?? void 0,
+				min: props.min ?? void 0,
 				name,
 				onChange,
-				step: getOptionalNumberProp(node.props, "step"),
-				tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
-				type: "range",
+				placeholder: props.placeholder ?? "",
+				readOnly,
+				step: props.step ?? void 0,
+				tabIndex: props.tabIndex ?? void 0,
+				type: "number",
 				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

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

@@ -1 +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"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"form.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => {\n        const onChange = (event: React.ChangeEvent<HTMLInputElement>): void =>\n          commit(event.target.value);\n\n        return props.slider ? (\n          <div className=\"flex items-center gap-3\">\n            <input\n              aria-label={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={props.max ?? undefined}\n              min={props.min ?? undefined}\n              name={name}\n              onChange={onChange}\n              step={props.step ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\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={props.autoFocus ?? false}\n            disabled={disabled}\n            id={name}\n            max={props.max ?? undefined}\n            min={props.min ?? undefined}\n            name={name}\n            onChange={onChange}\n            placeholder={props.placeholder ?? \"\"}\n            readOnly={readOnly}\n            step={props.step ?? undefined}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"number\"\n            value={value}\n          />\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,wBAAgE,EAAE,WAAW;CACxF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa;GAChD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,UAAU,YAAY;KACtB,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA,GACD,oBAAC,UAAD;KAAQ,WAAU;eACf;IACK,CAAA,CACL;QAEL,oBAAC,OAAD;IACE,WAAW,MAAM,aAAa;IACpB;IACV,IAAI;IACJ,KAAK,MAAM,OAAO,KAAA;IAClB,KAAK,MAAM,OAAO,KAAA;IACZ;IACI;IACV,aAAa,MAAM,eAAe;IACxB;IACV,MAAM,MAAM,QAAQ,KAAA;IACpB,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA;EAEL;CACW,CAAA;AAEjB"}

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

@@ -1,29 +1,2 @@
-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;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const PasswordInputComponent: RendererComponent<"form.password-input">;
-export {};

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

@@ -1,4 +1,3 @@
-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";
@@ -6,24 +5,15 @@ 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 props = node.props;
 	const { errors } = useFormContext();
-	const { hidden, required, readonly, disabled } = useDependentField(node);
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
 	const { commit } = useFieldCommit();
-	const name = getStringProp(node.props, "name");
-	const confirmation = getPasswordConfirmation(node.props);
+	const name = props.name ?? "";
+	const confirmation = props.confirmation;
 	const confirmationName = confirmation?.name ?? `${name}_confirmation`;
-	const passwordRules = getStringProp(node.props, "passwordRules") || void 0;
+	const passwordRules = (props.passwordRules ?? "") || void 0;
 	if (hidden) return null;
 	const onChange = (field) => (event) => {
 		commit(field, event.target.value);
@@ -32,21 +22,22 @@ var PasswordInputComponent = ({ node }) => {
 		className: "grid gap-6",
 		children: [/* @__PURE__ */ jsx(FormFieldFrame, {
 			error: errors[name],
-			label: getStringProp(node.props, "label"),
-			labelAction: node.props?.labelAction,
+			helperText: props.helperText ?? void 0,
+			label: props.label ?? "",
+			labelAction: props.labelAction ?? void 0,
 			name,
 			required,
 			children: /* @__PURE__ */ jsx(PasswordInput, {
-				autoComplete: getStringProp(node.props, "autoComplete"),
-				autoFocus: getBooleanProp(node.props, "autoFocus"),
+				autoComplete: props.autoComplete ?? "",
+				autoFocus: props.autoFocus ?? false,
 				disabled,
 				id: name,
 				name,
 				onChange: onChange(name),
-				placeholder: getStringProp(node.props, "placeholder"),
+				placeholder: props.placeholder ?? "",
 				passwordrules: passwordRules,
-				readOnly: readonly,
-				tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+				readOnly,
+				tabIndex: props.tabIndex ?? void 0
 			})
 		}), confirmation && /* @__PURE__ */ jsx(FormFieldFrame, {
 			error: errors[confirmationName],
@@ -61,8 +52,8 @@ var PasswordInputComponent = ({ node }) => {
 				onChange: onChange(confirmationName),
 				placeholder: confirmation.placeholder ?? confirmation.label ?? "Confirm password",
 				passwordrules: passwordRules,
-				readOnly: readonly,
-				tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+				readOnly,
+				tabIndex: props.tabIndex ?? void 0
 			})
 		})]
 	});

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

@@ -1 +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"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import type { 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\";\n\nexport const PasswordInputComponent: RendererComponent<\"form.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { commit } = useFieldCommit();\n  const name = props.name ?? \"\";\n  const confirmation = props.confirmation;\n  const confirmationName = confirmation?.name ?? `${name}_confirmation`;\n  const passwordRules = (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        helperText={props.helperText ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={name}\n        required={required}\n      >\n        <PasswordInput\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={onChange(name)}\n          placeholder={props.placeholder ?? \"\"}\n          passwordrules={passwordRules}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\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={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,0BAAoE,EAAE,WAAW;CAC5F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,eAAe,MAAM;CAC3B,MAAM,mBAAmB,cAAc,QAAQ,GAAG,KAAK;CACvD,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,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,YAAY,MAAM,cAAc,KAAA;GAChC,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAC5B;GACI;aAEV,oBAAC,eAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IACpB;IACV,IAAI;IACE;IACN,UAAU,SAAS,IAAI;IACvB,aAAa,MAAM,eAAe;IAClC,eAAe;IACL;IACV,UAAU,MAAM,YAAY,KAAA;GAC7B,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;IACL;IACV,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,CAEf;;AAET"}

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

@@ -1,17 +1,2 @@
-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;
-        };
-    }
-}
+import { RendererComponent } from '../../../core/types';
 export declare const RichEditorComponent: RendererComponent<"form.rich-editor">;

package/dist/form/components/fields/rich-editor.js

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { getStringProp } from "../../../core/props.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
 import { useFormContext } from "../context.js";
 import { useFormValue } from "../values.js";
 import { useDependentField } from "../use-dependent-field.js";
@@ -7,10 +8,9 @@ import { FormFieldFrame } from "../base/field.js";
 import { useFieldCommit } from "../use-field-commit.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronRight, Code, Columns3, Heading1, Heading2, Heading3, Highlighter, Italic, Link, List, ListOrdered, Minus, Quote, Rows3, Smile, Strikethrough, Table, Trash2, Underline } from "lucide-react";
 import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
 import { Highlight } from "@tiptap/extension-highlight";
-import { Link as Link$1 } from "@tiptap/extension-link";
+import { Link } from "@tiptap/extension-link";
 import { TableKit } from "@tiptap/extension-table";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { EditorContent, useEditor } from "@tiptap/react";
@@ -18,113 +18,113 @@ import { StarterKit } from "@tiptap/starter-kit";
 //#region resources/js/form/components/fields/rich-editor.tsx
 var toolbar = [
 	{
-		icon: Bold,
+		icon: "bold",
 		label: "Bold",
 		isActive: (e) => e.isActive("bold"),
 		run: (e) => e.chain().focus().toggleBold().run()
 	},
 	{
-		icon: Italic,
+		icon: "italic",
 		label: "Italic",
 		isActive: (e) => e.isActive("italic"),
 		run: (e) => e.chain().focus().toggleItalic().run()
 	},
 	{
-		icon: Strikethrough,
+		icon: "strikethrough",
 		label: "Strikethrough",
 		isActive: (e) => e.isActive("strike"),
 		run: (e) => e.chain().focus().toggleStrike().run()
 	},
 	{
-		icon: Underline,
+		icon: "underline",
 		label: "Underline",
 		isActive: (e) => e.isActive("underline"),
 		run: (e) => e.chain().focus().toggleUnderline().run()
 	},
 	{
-		icon: Highlighter,
+		icon: "highlighter",
 		label: "Highlight",
 		isActive: (e) => e.isActive("highlight"),
 		run: (e) => e.chain().focus().toggleHighlight().run()
 	},
 	"separator",
 	{
-		icon: Heading1,
+		icon: "heading-1",
 		label: "Heading 1",
 		isActive: (e) => e.isActive("heading", { level: 1 }),
 		run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run()
 	},
 	{
-		icon: Heading2,
+		icon: "heading-2",
 		label: "Heading 2",
 		isActive: (e) => e.isActive("heading", { level: 2 }),
 		run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
 	},
 	{
-		icon: Heading3,
+		icon: "heading-3",
 		label: "Heading 3",
 		isActive: (e) => e.isActive("heading", { level: 3 }),
 		run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
 	},
 	"separator",
 	{
-		icon: List,
+		icon: "list",
 		label: "Bullet list",
 		isActive: (e) => e.isActive("bulletList"),
 		run: (e) => e.chain().focus().toggleBulletList().run()
 	},
 	{
-		icon: ListOrdered,
+		icon: "list-ordered",
 		label: "Ordered list",
 		isActive: (e) => e.isActive("orderedList"),
 		run: (e) => e.chain().focus().toggleOrderedList().run()
 	},
 	{
-		icon: Quote,
+		icon: "quote",
 		label: "Blockquote",
 		isActive: (e) => e.isActive("blockquote"),
 		run: (e) => e.chain().focus().toggleBlockquote().run()
 	},
 	{
-		icon: Code,
+		icon: "code",
 		label: "Code block",
 		isActive: (e) => e.isActive("codeBlock"),
 		run: (e) => e.chain().focus().toggleCodeBlock().run()
 	},
 	{
-		icon: Minus,
+		icon: "minus",
 		label: "Horizontal rule",
 		isActive: () => false,
 		run: (e) => e.chain().focus().setHorizontalRule().run()
 	},
 	"separator",
 	{
-		icon: AlignLeft,
+		icon: "align-left",
 		label: "Align left",
 		isActive: (e) => e.isActive({ textAlign: "left" }),
 		run: (e) => e.chain().focus().setTextAlign("left").run()
 	},
 	{
-		icon: AlignCenter,
+		icon: "align-center",
 		label: "Align center",
 		isActive: (e) => e.isActive({ textAlign: "center" }),
 		run: (e) => e.chain().focus().setTextAlign("center").run()
 	},
 	{
-		icon: AlignRight,
+		icon: "align-right",
 		label: "Align right",
 		isActive: (e) => e.isActive({ textAlign: "right" }),
 		run: (e) => e.chain().focus().setTextAlign("right").run()
 	},
 	{
-		icon: AlignJustify,
+		icon: "align-justify",
 		label: "Justify",
 		isActive: (e) => e.isActive({ textAlign: "justify" }),
 		run: (e) => e.chain().focus().setTextAlign("justify").run()
 	},
 	"separator",
 	{
-		icon: Link,
+		icon: "link",
 		label: "Link",
 		isActive: (e) => e.isActive("link"),
 		run: (e) => {
@@ -138,7 +138,7 @@ var toolbar = [
 	},
 	"separator",
 	{
-		icon: Table,
+		icon: "table",
 		label: "Insert table",
 		isActive: (e) => e.isActive("table"),
 		run: (e) => e.chain().focus().insertTable({
@@ -148,28 +148,28 @@ var toolbar = [
 		}).run()
 	},
 	{
-		icon: Columns3,
+		icon: "columns-3",
 		label: "Add column",
 		isActive: () => false,
 		isDisabled: (e) => !e.can().addColumnAfter(),
 		run: (e) => e.chain().focus().addColumnAfter().run()
 	},
 	{
-		icon: Rows3,
+		icon: "rows-3",
 		label: "Add row",
 		isActive: () => false,
 		isDisabled: (e) => !e.can().addRowAfter(),
 		run: (e) => e.chain().focus().addRowAfter().run()
 	},
 	{
-		icon: Trash2,
+		icon: "trash-2",
 		label: "Delete table",
 		isActive: () => false,
 		isDisabled: (e) => !e.can().deleteTable(),
 		run: (e) => e.chain().focus().deleteTable().run()
 	},
 	{
-		icon: ChevronRight,
+		icon: "chevron-right",
 		label: "Details",
 		isActive: (e) => e.isActive("details"),
 		run: (e) => {
@@ -200,17 +200,19 @@ var emojis = [
 	"❤️"
 ];
 function EmojiPicker({ editor }) {
+	const { t } = useT("lattice");
 	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		children: [/* @__PURE__ */ jsx("button", {
-			"aria-label": "Insert emoji",
-			className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-4",
+			"aria-label": t("editor.insert-emoji", "Insert emoji"),
+			"data-test": "editor-emoji",
+			className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md",
 			onClick: () => setOpen((value) => !value),
 			onMouseDown: (event) => event.preventDefault(),
-			title: "Insert emoji",
+			title: t("editor.insert-emoji", "Insert emoji"),
 			type: "button",
-			children: /* @__PURE__ */ jsx(Smile, {})
+			children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
 		}), open && /* @__PURE__ */ jsx("div", {
 			className: "absolute z-10 mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md",
 			children: emojis.map((emoji) => /* @__PURE__ */ jsx("button", {
@@ -227,20 +229,27 @@ function EmojiPicker({ editor }) {
 	});
 }
 function Toolbar({ editor }) {
+	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1",
 		children: [
-			toolbar.map((item, index) => item === "separator" ? /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`) : /* @__PURE__ */ jsx("button", {
-				"aria-label": item.label,
-				"aria-pressed": item.isActive(editor),
-				className: cn("inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4", item.isActive(editor) && "bg-lt-accent text-lt-accent-fg"),
-				disabled: item.isDisabled?.(editor) ?? false,
-				onClick: () => item.run(editor),
-				onMouseDown: (event) => event.preventDefault(),
-				title: item.label,
-				type: "button",
-				children: /* @__PURE__ */ jsx(item.icon, {})
-			}, item.label)),
+			toolbar.map((item, index) => {
+				if (item === "separator") return /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`);
+				const key = item.label.toLowerCase().replace(/\s+/g, "-");
+				const label = t(`editor.${key}`, item.label);
+				return /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					"aria-pressed": item.isActive(editor),
+					"data-test": `editor-${key}`,
+					className: cn("inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md", item.isActive(editor) && "bg-lt-accent text-lt-accent-fg"),
+					disabled: item.isDisabled?.(editor) ?? false,
+					onClick: () => item.run(editor),
+					onMouseDown: (event) => event.preventDefault(),
+					title: label,
+					type: "button",
+					children: /* @__PURE__ */ jsx(Icon, { name: item.icon })
+				}, item.label);
+			}),
 			/* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }),
 			/* @__PURE__ */ jsx(EmojiPicker, { editor })
 		]
@@ -248,18 +257,18 @@ function Toolbar({ editor }) {
 }
 var RichEditorComponent = ({ node }) => {
 	const { errors } = useFormContext();
-	const { hidden, required, readonly, disabled } = useDependentField(node);
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
 	const { change, blur } = useFieldCommit();
-	const name = getStringProp(node.props, "name");
+	const name = node.props.name;
 	const storedValue = useFormValue(name);
-	const locked = readonly || disabled;
-	const initialContent = typeof storedValue === "object" && storedValue !== null ? storedValue : node.props?.value ?? "";
+	const locked = readOnly || disabled;
+	const initialContent = typeof storedValue === "object" && storedValue !== null ? storedValue : node.props.value ?? "";
 	const editor = useEditor({
 		extensions: [
 			StarterKit,
 			Highlight,
 			TextAlign.configure({ types: ["heading", "paragraph"] }),
-			Link$1.configure({ openOnClick: false }),
+			Link.configure({ openOnClick: false }),
 			TableKit.configure({ table: { resizable: false } }),
 			Details,
 			DetailsSummary,
@@ -283,7 +292,8 @@ var RichEditorComponent = ({ node }) => {
 	const submittedValue = storedValue ? JSON.stringify(storedValue) : "";
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
 		error: errors[name],
-		label: getStringProp(node.props, "label"),
+		helperText: node.props.helperText ?? void 0,
+		label: node.props.label ?? "",
 		name,
 		required,
 		children: [/* @__PURE__ */ jsxs("div", {