@lattice-php/lattice 0.36.1 → 0.38.0

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 type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"field.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, 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:accent-lt-disabled\"\n              data-test={testId}\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          <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n            {(controlClassName) => (\n              <Input\n                autoFocus={props.autoFocus ?? false}\n                className={controlClassName}\n                data-test={testId}\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          </AffixGroup>\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAAa;GACxD,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KACE,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW;KACX,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;KACf,UAAA;IACK,CAAA,CACL;GAEL,CAAA,IAAA,oBAAC,YAAD;IAAY,QAAQ,MAAM;IAAQ,QAAQ,MAAM;IAC5C,WAAA,qBACA,oBAAC,OAAD;KACE,WAAW,MAAM,aAAa;KAC9B,WAAW;KACX,aAAW;KACD;KACV,IAAI;KACJ,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,aAAa,MAAM,eAAe;KACxB;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA;GAEO,CAAA;EAEhB;CACW,CAAA;AAEjB"}
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/number-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const NumberInputComponent: RendererComponent<\"field.number-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }, controlProps) => {\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              {...controlProps}\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:accent-lt-disabled\"\n              data-test={testId}\n              disabled={disabled || readOnly}\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          <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n            {(controlClassName) => (\n              <Input\n                {...controlProps}\n                autoFocus={props.autoFocus ?? false}\n                className={controlClassName}\n                data-test={testId}\n                disabled={disabled}\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          </AffixGroup>\n        );\n      }}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,wBAAiE,EAAE,WAAW;CACzF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,UAAU,iBAAiB;GACtE,MAAM,YAAY,UAChB,OAAO,MAAM,OAAO,KAAK;GAE3B,OAAO,MAAM,SACX,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KACE,GAAI;KACJ,cAAY,MAAM,SAAS;KAC3B,WAAU;KACV,aAAW;KACX,UAAU,YAAY;KACtB,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;KACf,UAAA;IACK,CAAA,CACL;GAEL,CAAA,IAAA,oBAAC,YAAD;IAAY,QAAQ,MAAM;IAAQ,QAAQ,MAAM;IAC5C,WAAA,qBACA,oBAAC,OAAD;KACE,GAAI;KACJ,WAAW,MAAM,aAAa;KAC9B,WAAW;KACX,aAAW;KACD;KACV,KAAK,MAAM,OAAO,KAAA;KAClB,KAAK,MAAM,OAAO,KAAA;KACZ;KACI;KACV,aAAa,MAAM,eAAe;KACxB;KACV,MAAM,MAAM,QAAQ,KAAA;KACpB,UAAU,MAAM,YAAY,KAAA;KAC5B,MAAK;KACE;IACR,CAAA;GAEO,CAAA;EAEhB;CACW,CAAA;AAEjB"}

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

@@ -7,11 +7,11 @@ var OtpInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(InputOTP, {
+		children: ({ name, testId, value, readOnly, disabled, commit }, controlProps) => /* @__PURE__ */ jsx(InputOTP, {
+			...controlProps,
 			autoFocus: props.autoFocus ?? false,
 			"data-test": testId,
 			disabled: disabled || readOnly,
-			id: name,
 			length: props.length,
 			name,
 			onChange: (next) => commit(next),

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/otp-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InputOTP } from \"@lattice-php/lattice/ui/input-otp\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const OtpInputComponent: RendererComponent<\"field.otp\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <InputOTP\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled || readOnly}\n          id={name}\n          length={props.length}\n          name={name}\n          onChange={(next) => commit(next)}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqD,EAAE,WAAW;CAC7E,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,UAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACX,UAAU,YAAY;GACtB,IAAI;GACJ,QAAQ,MAAM;GACR;GACN,WAAW,SAAS,OAAO,IAAI;GACxB;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"otp-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/otp-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InputOTP } from \"@lattice-php/lattice/ui/input-otp\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const OtpInputComponent: RendererComponent<\"field.otp\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }, controlProps) => (\n        <InputOTP\n          {...controlProps}\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled || readOnly}\n          length={props.length}\n          name={name}\n          onChange={(next) => commit(next)}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAAqD,EAAE,WAAW;CAC7E,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,UAAU,iBACrD,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,MAAM,aAAa;GAC9B,aAAW;GACX,UAAU,YAAY;GACtB,QAAQ,MAAM;GACR;GACN,WAAW,SAAS,OAAO,IAAI;GACxB;EACR,CAAA;CAEQ,CAAA;AAEjB"}

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

@@ -28,18 +28,18 @@ var PasswordInputComponent = ({ node }) => {
 			tooltip: props.tooltip ?? void 0,
 			label: props.label ?? "",
 			labelAction: props.labelAction ?? void 0,
-			name: field.name,
+			id: field.name,
 			required: field.required,
-			children: /* @__PURE__ */ jsx(AffixGroup, {
+			children: (controlProps) => /* @__PURE__ */ jsx(AffixGroup, {
 				prefix: props.prefix,
 				suffix: props.suffix,
 				children: (controlClassName) => /* @__PURE__ */ jsx(PasswordInput, {
+					...controlProps,
 					autoComplete: props.autoComplete ?? "",
 					autoFocus: props.autoFocus ?? false,
 					className: controlClassName,
 					"data-test": field.testId,
 					disabled: field.disabled,
-					id: field.name,
 					name: field.name,
 					onChange: (event) => {
 						field.commit(event.target.value);
@@ -54,13 +54,13 @@ var PasswordInputComponent = ({ node }) => {
 		}), confirmation && /* @__PURE__ */ jsx(FormFieldFrame, {
 			error: errors[confirmationErrorKey],
 			label: confirmation.label ?? "Confirm password",
-			name: confirmationName,
+			id: confirmationName,
 			required: field.required,
-			children: /* @__PURE__ */ jsx(PasswordInput, {
+			children: (controlProps) => /* @__PURE__ */ jsx(PasswordInput, {
+				...controlProps,
 				autoComplete: "new-password",
 				"data-test": testIdentity(confirmationLocalName),
 				disabled: field.disabled,
-				id: confirmationName,
 				name: confirmationName,
 				onChange: (event) => {
 					commit(confirmationLocalName, event.target.value);

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 type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport PasswordInput from \"@lattice-php/lattice/ui/password-input\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useControlledField } from \"@lattice-php/lattice/form/hooks/use-controlled-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\n\nexport const PasswordInputComponent: RendererComponent<\"field.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const field = useControlledField(node);\n  const { commit } = useFieldCommit();\n  const scope = useFieldScope();\n  const confirmation = props.confirmation;\n  const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;\n  const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;\n  const confirmationErrorKey = scope\n    ? scope.errorKey(confirmationLocalName)\n    : confirmationLocalName;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={field.error}\n        helperText={props.helperText ?? undefined}\n        tooltip={props.tooltip ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={field.name}\n        required={field.required}\n      >\n        <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n          {(controlClassName) => (\n            <PasswordInput\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={field.testId}\n              disabled={field.disabled}\n              id={field.name}\n              name={field.name}\n              onChange={(event) => {\n                field.commit(event.target.value);\n              }}\n              placeholder={props.placeholder ?? \"\"}\n              passwordrules={passwordRules}\n              readOnly={field.readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              value={field.value}\n            />\n          )}\n        </AffixGroup>\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationErrorKey]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={field.required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            data-test={testIdentity(confirmationLocalName)}\n            disabled={field.disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={(event) => {\n              commit(confirmationLocalName, event.target.value);\n            }}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={field.readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAa,0BAAqE,EAAE,WAAW;CAC7F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,MAAM;CAC3B,MAAM,wBAAwB,cAAc,QAAQ,GAAG,MAAM,UAAU;CACvE,MAAM,mBAAmB,QAAQ,MAAM,WAAW,qBAAqB,IAAI;CAC3E,MAAM,uBAAuB,QACzB,MAAM,SAAS,qBAAqB,IACpC;CACJ,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,MAAM,QACR,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,gBAAD;GACE,OAAO,MAAM;GACb,YAAY,MAAM,cAAc,KAAA;GAChC,SAAS,MAAM,WAAW,KAAA;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAClC,MAAM,MAAM;GACZ,UAAU,MAAM;GAEhB,UAAA,oBAAC,YAAD;IAAY,QAAQ,MAAM;IAAQ,QAAQ,MAAM;IAC5C,WAAA,qBACA,oBAAC,eAAD;KACE,cAAc,MAAM,gBAAgB;KACpC,WAAW,MAAM,aAAa;KAC9B,WAAW;KACX,aAAW,MAAM;KACjB,UAAU,MAAM;KAChB,IAAI,MAAM;KACV,MAAM,MAAM;KACZ,WAAW,UAAU;MACnB,MAAM,OAAO,MAAM,OAAO,KAAK;KACjC;KACA,aAAa,MAAM,eAAe;KAClC,eAAe;KACf,UAAU,MAAM;KAChB,UAAU,MAAM,YAAY,KAAA;KAC5B,OAAO,MAAM;IACd,CAAA;GAEO,CAAA;EACE,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACN,UAAU,MAAM;GAEhB,UAAA,oBAAC,eAAD;IACE,cAAa;IACb,aAAW,aAAa,qBAAqB;IAC7C,UAAU,MAAM;IAChB,IAAI;IACJ,MAAM;IACN,WAAW,UAAU;KACnB,OAAO,uBAAuB,MAAM,OAAO,KAAK;IAClD;IACA,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;GAC7B,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-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport PasswordInput from \"@lattice-php/lattice/ui/password-input\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useControlledField } from \"@lattice-php/lattice/form/hooks/use-controlled-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\n\nexport const PasswordInputComponent: RendererComponent<\"field.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const field = useControlledField(node);\n  const { commit } = useFieldCommit();\n  const scope = useFieldScope();\n  const confirmation = props.confirmation;\n  const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;\n  const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;\n  const confirmationErrorKey = scope\n    ? scope.errorKey(confirmationLocalName)\n    : confirmationLocalName;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={field.error}\n        helperText={props.helperText ?? undefined}\n        tooltip={props.tooltip ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        id={field.name}\n        required={field.required}\n      >\n        {(controlProps) => (\n          <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n            {(controlClassName) => (\n              <PasswordInput\n                {...controlProps}\n                autoComplete={props.autoComplete ?? \"\"}\n                autoFocus={props.autoFocus ?? false}\n                className={controlClassName}\n                data-test={field.testId}\n                disabled={field.disabled}\n                name={field.name}\n                onChange={(event) => {\n                  field.commit(event.target.value);\n                }}\n                placeholder={props.placeholder ?? \"\"}\n                passwordrules={passwordRules}\n                readOnly={field.readOnly}\n                tabIndex={props.tabIndex ?? undefined}\n                value={field.value}\n              />\n            )}\n          </AffixGroup>\n        )}\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationErrorKey]}\n          label={confirmation.label ?? \"Confirm password\"}\n          id={confirmationName}\n          required={field.required}\n        >\n          {(controlProps) => (\n            <PasswordInput\n              {...controlProps}\n              autoComplete=\"new-password\"\n              data-test={testIdentity(confirmationLocalName)}\n              disabled={field.disabled}\n              name={confirmationName}\n              onChange={(event) => {\n                commit(confirmationLocalName, event.target.value);\n              }}\n              placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n              passwordrules={passwordRules}\n              readOnly={field.readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n            />\n          )}\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAa,0BAAqE,EAAE,WAAW;CAC7F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,MAAM;CAC3B,MAAM,wBAAwB,cAAc,QAAQ,GAAG,MAAM,UAAU;CACvE,MAAM,mBAAmB,QAAQ,MAAM,WAAW,qBAAqB,IAAI;CAC3E,MAAM,uBAAuB,QACzB,MAAM,SAAS,qBAAqB,IACpC;CACJ,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,MAAM,QACR,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,gBAAD;GACE,OAAO,MAAM;GACb,YAAY,MAAM,cAAc,KAAA;GAChC,SAAS,MAAM,WAAW,KAAA;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAClC,IAAI,MAAM;GACV,UAAU,MAAM;GAEd,WAAA,iBACA,oBAAC,YAAD;IAAY,QAAQ,MAAM;IAAQ,QAAQ,MAAM;IAC5C,WAAA,qBACA,oBAAC,eAAD;KACE,GAAI;KACJ,cAAc,MAAM,gBAAgB;KACpC,WAAW,MAAM,aAAa;KAC9B,WAAW;KACX,aAAW,MAAM;KACjB,UAAU,MAAM;KAChB,MAAM,MAAM;KACZ,WAAW,UAAU;MACnB,MAAM,OAAO,MAAM,OAAO,KAAK;KACjC;KACA,aAAa,MAAM,eAAe;KAClC,eAAe;KACf,UAAU,MAAM;KAChB,UAAU,MAAM,YAAY,KAAA;KAC5B,OAAO,MAAM;IACd,CAAA;GAEO,CAAA;EAEA,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,IAAI;GACJ,UAAU,MAAM;GAEd,WAAA,iBACA,oBAAC,eAAD;IACE,GAAI;IACJ,cAAa;IACb,aAAW,aAAa,qBAAqB;IAC7C,UAAU,MAAM;IAChB,MAAM;IACN,WAAW,UAAU;KACnB,OAAO,uBAAuB,MAAM,OAAO,KAAK;IAClD;IACA,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EAEW,CAAA,CAEf;;AAET"}

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

@@ -43,10 +43,12 @@ var RepeaterComponent = ({ node }) => {
 		helperText: props.helperText ?? void 0,
 		tooltip: props.tooltip ?? void 0,
 		label: props.label ?? "",
-		name: path,
+		id: path,
 		required,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: (controlProps) => /* @__PURE__ */ jsxs("div", {
+			...controlProps,
 			className: "flex flex-col gap-3",
+			role: "group",
 			children: [
 				/* @__PURE__ */ jsx(RowKeyInputs, {
 					path,

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

@@ -1 +1 @@
-{"version":3,"file":"repeater.js","names":[],"sources":["../../../../resources/js/form/components/fields/repeater.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { ROW_ID_KEY } from \"./repeater-rows\";\nimport { RowKeyInputs } from \"./row-key-inputs\";\nimport { RowItem } from \"./row-item\";\nimport { columnsFromSchema, TableRows } from \"./table-rows\";\nimport { useFlipReorder } from \"./use-flip-reorder\";\nimport { useRowCollection } from \"./use-row-collection\";\n\nconst EMPTY_TEMPLATE: Node[] = [];\n\nexport const RepeaterComponent: RendererComponent<\"field.repeater\"> = ({ node }) => {\n  const props = node.props;\n  const name = props.name;\n  const { errors } = useFormContext();\n  const { hidden, required } = useDependentField(node);\n  const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(\n    name,\n    props.defaultItems ?? 1,\n  );\n  const template = node.schema ?? EMPTY_TEMPLATE;\n  const orderSignature = rows.map((r) => String(r[ROW_ID_KEY] ?? \"\")).join(\",\");\n  const registerRow = useFlipReorder(orderSignature);\n  const atMax = props.maxItems != null && rows.length >= props.maxItems;\n  const atMin = props.minItems != null && rows.length <= props.minItems;\n  const isTable = props.layout === \"table\";\n  const itemLabels = (props as { itemLabels?: Array<string | null> | null }).itemLabels;\n  const rowHeading = (index: number) => {\n    const label = itemLabels?.[index];\n\n    if (typeof label === \"string\" && label !== \"\") {\n      return label;\n    }\n\n    return props.itemLabel ? `${props.itemLabel} ${index + 1}` : `#${index + 1}`;\n  };\n\n  if (hidden) {\n    return null;\n  }\n\n  const tableRows = rows.map((row, index) => ({\n    key: String(row[ROW_ID_KEY] ?? index),\n    index,\n    row,\n    template,\n    span: false,\n    heading: rowHeading(index),\n  }));\n\n  return (\n    <FormFieldFrame\n      error={errors[path]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={path}\n      required={required}\n    >\n      <div className=\"flex flex-col gap-3\">\n        <RowKeyInputs path={path} rows={rows} rowKey={ROW_ID_KEY} />\n        {isTable ? (\n          <TableRows\n            base={path}\n            columns={columnsFromSchema(template)}\n            rows={tableRows}\n            reorderable={props.reorderable ?? false}\n            removable={() => !atMin}\n            rowActions={props.rowActions}\n            onField={onField}\n            onMove={onMove}\n            onRemove={onRemove}\n            onDuplicate={onDuplicate}\n            registerRow={registerRow}\n            resizableColumns={props.resizableColumns === true}\n            resizeIndicator={props.resizeIndicator === true}\n          />\n        ) : (\n          rows.map((row, index) => {\n            const key = String(row[ROW_ID_KEY] ?? index);\n            return (\n              <div key={key} ref={(el) => registerRow(key, el)} data-flip-key={key}>\n                <RowItem\n                  base={path}\n                  index={index}\n                  row={row}\n                  template={template}\n                  heading={rowHeading(index)}\n                  reorderable={props.reorderable ?? false}\n                  isFirst={index === 0}\n                  isLast={index === rows.length - 1}\n                  removable={!atMin}\n                  rowActions={props.rowActions}\n                  onField={onField}\n                  onRemove={onRemove}\n                  onMove={onMove}\n                  onDuplicate={onDuplicate}\n                />\n              </div>\n            );\n          })\n        )}\n\n        {!atMax && (\n          <button\n            type=\"button\"\n            data-test={`repeater-${name}-add`}\n            className=\"inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm\"\n            onClick={() => append({})}\n          >\n            <Icon name=\"plus\" />\n            {props.addLabel ?? \"Add\"}\n          </button>\n        )}\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,iBAAyB,CAAC;AAEhC,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,MAAM;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,aAAa,kBAAkB,IAAI;CACnD,MAAM,EAAE,MAAM,MAAM,SAAS,UAAU,QAAQ,aAAa,WAAW,iBACrE,MACA,MAAM,gBAAgB,CACxB;CACA,MAAM,WAAW,KAAK,UAAU;CAChC,MAAM,iBAAiB,KAAK,KAAK,MAAM,OAAO,EAAA,YAAiB,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG;CAC5E,MAAM,cAAc,eAAe,cAAc;CACjD,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,aAAc,MAAuD;CAC3E,MAAM,cAAc,UAAkB;EACpC,MAAM,QAAQ,aAAa;EAE3B,IAAI,OAAO,UAAU,YAAY,UAAU,IACzC,OAAO;EAGT,OAAO,MAAM,YAAY,GAAG,MAAM,UAAU,GAAG,QAAQ,MAAM,IAAI,QAAQ;CAC3E;CAEA,IAAI,QACF,OAAO;CAGT,MAAM,YAAY,KAAK,KAAK,KAAK,WAAW;EAC1C,KAAK,OAAO,IAAA,YAAmB,KAAK;EACpC;EACA;EACA;EACA,MAAM;EACN,SAAS,WAAW,KAAK;CAC3B,EAAE;CAEF,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EACtB,MAAM;EACI;EAEV,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,cAAD;KAAoB;KAAY;KAAM,QAAQ;IAAa,CAAA;IAC1D,UACC,oBAAC,WAAD;KACE,MAAM;KACN,SAAS,kBAAkB,QAAQ;KACnC,MAAM;KACN,aAAa,MAAM,eAAe;KAClC,iBAAiB,CAAC;KAClB,YAAY,MAAM;KACT;KACD;KACE;KACG;KACA;KACb,kBAAkB,MAAM,qBAAqB;KAC7C,iBAAiB,MAAM,oBAAoB;IAC5C,CAAA,IAED,KAAK,KAAK,KAAK,UAAU;KACvB,MAAM,MAAM,OAAO,IAAA,YAAmB,KAAK;KAC3C,OACE,oBAAC,OAAD;MAAe,MAAM,OAAO,YAAY,KAAK,EAAE;MAAG,iBAAe;MAC/D,UAAA,oBAAC,SAAD;OACE,MAAM;OACC;OACF;OACK;OACV,SAAS,WAAW,KAAK;OACzB,aAAa,MAAM,eAAe;OAClC,SAAS,UAAU;OACnB,QAAQ,UAAU,KAAK,SAAS;OAChC,WAAW,CAAC;OACZ,YAAY,MAAM;OACT;OACC;OACF;OACK;MACd,CAAA;KACE,GAjBK,GAiBL;IAET,CAAC;IAGF,CAAC,SACA,qBAAC,UAAD;KACE,MAAK;KACL,aAAW,YAAY,KAAK;KAC5B,WAAU;KACV,eAAe,OAAO,CAAC,CAAC;KAJ1B,UAAA,CAME,oBAAC,MAAD,EAAM,MAAK,OAAQ,CAAA,GAClB,MAAM,YAAY,KACb;;GAEP;;CACS,CAAA;AAEpB"}
+{"version":3,"file":"repeater.js","names":[],"sources":["../../../../resources/js/form/components/fields/repeater.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { ROW_ID_KEY } from \"./repeater-rows\";\nimport { RowKeyInputs } from \"./row-key-inputs\";\nimport { RowItem } from \"./row-item\";\nimport { columnsFromSchema, TableRows } from \"./table-rows\";\nimport { useFlipReorder } from \"./use-flip-reorder\";\nimport { useRowCollection } from \"./use-row-collection\";\n\nconst EMPTY_TEMPLATE: Node[] = [];\n\nexport const RepeaterComponent: RendererComponent<\"field.repeater\"> = ({ node }) => {\n  const props = node.props;\n  const name = props.name;\n  const { errors } = useFormContext();\n  const { hidden, required } = useDependentField(node);\n  const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(\n    name,\n    props.defaultItems ?? 1,\n  );\n  const template = node.schema ?? EMPTY_TEMPLATE;\n  const orderSignature = rows.map((r) => String(r[ROW_ID_KEY] ?? \"\")).join(\",\");\n  const registerRow = useFlipReorder(orderSignature);\n  const atMax = props.maxItems != null && rows.length >= props.maxItems;\n  const atMin = props.minItems != null && rows.length <= props.minItems;\n  const isTable = props.layout === \"table\";\n  const itemLabels = (props as { itemLabels?: Array<string | null> | null }).itemLabels;\n  const rowHeading = (index: number) => {\n    const label = itemLabels?.[index];\n\n    if (typeof label === \"string\" && label !== \"\") {\n      return label;\n    }\n\n    return props.itemLabel ? `${props.itemLabel} ${index + 1}` : `#${index + 1}`;\n  };\n\n  if (hidden) {\n    return null;\n  }\n\n  const tableRows = rows.map((row, index) => ({\n    key: String(row[ROW_ID_KEY] ?? index),\n    index,\n    row,\n    template,\n    span: false,\n    heading: rowHeading(index),\n  }));\n\n  return (\n    <FormFieldFrame\n      error={errors[path]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      id={path}\n      required={required}\n    >\n      {(controlProps) => (\n        <div {...controlProps} className=\"flex flex-col gap-3\" role=\"group\">\n          <RowKeyInputs path={path} rows={rows} rowKey={ROW_ID_KEY} />\n          {isTable ? (\n            <TableRows\n              base={path}\n              columns={columnsFromSchema(template)}\n              rows={tableRows}\n              reorderable={props.reorderable ?? false}\n              removable={() => !atMin}\n              rowActions={props.rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n              resizableColumns={props.resizableColumns === true}\n              resizeIndicator={props.resizeIndicator === true}\n            />\n          ) : (\n            rows.map((row, index) => {\n              const key = String(row[ROW_ID_KEY] ?? index);\n              return (\n                <div key={key} ref={(el) => registerRow(key, el)} data-flip-key={key}>\n                  <RowItem\n                    base={path}\n                    index={index}\n                    row={row}\n                    template={template}\n                    heading={rowHeading(index)}\n                    reorderable={props.reorderable ?? false}\n                    isFirst={index === 0}\n                    isLast={index === rows.length - 1}\n                    removable={!atMin}\n                    rowActions={props.rowActions}\n                    onField={onField}\n                    onRemove={onRemove}\n                    onMove={onMove}\n                    onDuplicate={onDuplicate}\n                  />\n                </div>\n              );\n            })\n          )}\n\n          {!atMax && (\n            <button\n              type=\"button\"\n              data-test={`repeater-${name}-add`}\n              className=\"inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm\"\n              onClick={() => append({})}\n            >\n              <Icon name=\"plus\" />\n              {props.addLabel ?? \"Add\"}\n            </button>\n          )}\n        </div>\n      )}\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,iBAAyB,CAAC;AAEhC,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,MAAM;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,aAAa,kBAAkB,IAAI;CACnD,MAAM,EAAE,MAAM,MAAM,SAAS,UAAU,QAAQ,aAAa,WAAW,iBACrE,MACA,MAAM,gBAAgB,CACxB;CACA,MAAM,WAAW,KAAK,UAAU;CAChC,MAAM,iBAAiB,KAAK,KAAK,MAAM,OAAO,EAAA,YAAiB,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG;CAC5E,MAAM,cAAc,eAAe,cAAc;CACjD,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,aAAc,MAAuD;CAC3E,MAAM,cAAc,UAAkB;EACpC,MAAM,QAAQ,aAAa;EAE3B,IAAI,OAAO,UAAU,YAAY,UAAU,IACzC,OAAO;EAGT,OAAO,MAAM,YAAY,GAAG,MAAM,UAAU,GAAG,QAAQ,MAAM,IAAI,QAAQ;CAC3E;CAEA,IAAI,QACF,OAAO;CAGT,MAAM,YAAY,KAAK,KAAK,KAAK,WAAW;EAC1C,KAAK,OAAO,IAAA,YAAmB,KAAK;EACpC;EACA;EACA;EACA,MAAM;EACN,SAAS,WAAW,KAAK;CAC3B,EAAE;CAEF,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EACtB,IAAI;EACM;EAER,WAAA,iBACA,qBAAC,OAAD;GAAK,GAAI;GAAc,WAAU;GAAsB,MAAK;GAA5D,UAAA;IACE,oBAAC,cAAD;KAAoB;KAAY;KAAM,QAAQ;IAAa,CAAA;IAC1D,UACC,oBAAC,WAAD;KACE,MAAM;KACN,SAAS,kBAAkB,QAAQ;KACnC,MAAM;KACN,aAAa,MAAM,eAAe;KAClC,iBAAiB,CAAC;KAClB,YAAY,MAAM;KACT;KACD;KACE;KACG;KACA;KACb,kBAAkB,MAAM,qBAAqB;KAC7C,iBAAiB,MAAM,oBAAoB;IAC5C,CAAA,IAED,KAAK,KAAK,KAAK,UAAU;KACvB,MAAM,MAAM,OAAO,IAAA,YAAmB,KAAK;KAC3C,OACE,oBAAC,OAAD;MAAe,MAAM,OAAO,YAAY,KAAK,EAAE;MAAG,iBAAe;MAC/D,UAAA,oBAAC,SAAD;OACE,MAAM;OACC;OACF;OACK;OACV,SAAS,WAAW,KAAK;OACzB,aAAa,MAAM,eAAe;OAClC,SAAS,UAAU;OACnB,QAAQ,UAAU,KAAK,SAAS;OAChC,WAAW,CAAC;OACZ,YAAY,MAAM;OACT;OACC;OACF;OACK;MACd,CAAA;KACE,GAjBK,GAiBL;IAET,CAAC;IAGF,CAAC,SACA,qBAAC,UAAD;KACE,MAAK;KACL,aAAW,YAAY,KAAK;KAC5B,WAAU;KACV,eAAe,OAAO,CAAC,CAAC;KAJ1B,UAAA,CAME,oBAAC,MAAD,EAAM,MAAK,OAAQ,CAAA,GAClB,MAAM,YAAY,KACb;;GAEP;;CAEO,CAAA;AAEpB"}

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

@@ -10,7 +10,7 @@ import { assembleStarterKitOptions, assembleTiptapExtensions, assembleToolbar, r
 import { ToolbarIconButton } from "../../rich-editor/toolbar-button.js";
 import { registerBuiltinRichEditorExtensions } from "../../rich-editor/builtins.js";
 import { useEffect, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Placeholder } from "@tiptap/extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
@@ -76,15 +76,17 @@ var RichEditorField = ({ node }) => {
 	}, [editor, locked]);
 	if (hidden) return null;
 	const submittedValue = storedValue ? JSON.stringify(storedValue) : "";
-	return /* @__PURE__ */ jsxs(FormFieldFrame, {
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
 		error: errors[errorKey],
 		helperText: node.props.helperText ?? void 0,
 		tooltip: node.props.tooltip ?? void 0,
 		label: node.props.label ?? "",
-		name: domName,
+		id: domName,
 		required,
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: (controlProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			...controlProps,
 			className: cn("overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[length:var(--lt-ring-width)] focus-within:ring-lt-ring/50", locked && "opacity-60"),
+			role: "group",
 			children: [editor && !locked && toolbar.length > 0 && /* @__PURE__ */ jsx(Toolbar, {
 				editor,
 				items: toolbar
@@ -93,7 +95,7 @@ var RichEditorField = ({ node }) => {
 			name: domName,
 			type: "hidden",
 			value: submittedValue
-		})]
+		})] })
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"rich-editor-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor-field.tsx"],"sourcesContent":["import { Placeholder } from \"@tiptap/extensions\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useMemo } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\nimport { registerBuiltinRichEditorExtensions } from \"@lattice-php/lattice/form/rich-editor/builtins\";\nimport {\n  assembleStarterKitOptions,\n  assembleTiptapExtensions,\n  assembleToolbar,\n  resolveRichEditorExtensions,\n  type ToolbarEntry,\n} from \"@lattice-php/lattice/form/rich-editor/registry\";\nimport { ToolbarIconButton } from \"@lattice-php/lattice/form/rich-editor/toolbar-button\";\n\nregisterBuiltinRichEditorExtensions();\n\nfunction Toolbar({ editor, items }: { editor: Editor; items: ToolbarEntry[] }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {items.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        if (\"component\" in item) {\n          const Control = item.component;\n\n          return <Control editor={editor} key={item.key} />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <ToolbarIconButton\n            active={item.isActive(editor)}\n            disabled={item.isDisabled?.(editor) ?? false}\n            icon={item.icon}\n            key={item.key}\n            label={label}\n            onClick={() => item.run(editor)}\n            testId={`editor-${item.key}`}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nconst RichEditorField: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const resolved = useMemo(\n    () => resolveRichEditorExtensions(node.props.extensions),\n    [node.props.extensions],\n  );\n  const toolbar = useMemo(() => assembleToolbar(resolved), [resolved]);\n  const extensions = useMemo(\n    () => [\n      StarterKit.configure(assembleStarterKitOptions(resolved)),\n      Placeholder.configure({ placeholder: node.props.placeholder ?? \"\" }),\n      ...assembleTiptapExtensions(resolved),\n    ],\n    [resolved, node.props.placeholder],\n  );\n\n  const editor = useEditor({\n    extensions,\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    // Tiptap v3 stops re-rendering per transaction by default, but the toolbar\n    // reads isActive/isDisabled during render — without this, selection-only\n    // transactions leave those states stale.\n    shouldRerenderOnTransaction: true,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[length:var(--lt-ring-width)] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && toolbar.length > 0 && <Toolbar editor={editor} items={toolbar} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n\nexport default RichEditorField;\n"],"mappings":"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"}
+{"version":3,"file":"rich-editor-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor-field.tsx"],"sourcesContent":["import { Placeholder } from \"@tiptap/extensions\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useMemo } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\nimport { registerBuiltinRichEditorExtensions } from \"@lattice-php/lattice/form/rich-editor/builtins\";\nimport {\n  assembleStarterKitOptions,\n  assembleTiptapExtensions,\n  assembleToolbar,\n  resolveRichEditorExtensions,\n  type ToolbarEntry,\n} from \"@lattice-php/lattice/form/rich-editor/registry\";\nimport { ToolbarIconButton } from \"@lattice-php/lattice/form/rich-editor/toolbar-button\";\n\nregisterBuiltinRichEditorExtensions();\n\nfunction Toolbar({ editor, items }: { editor: Editor; items: ToolbarEntry[] }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {items.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        if (\"component\" in item) {\n          const Control = item.component;\n\n          return <Control editor={editor} key={item.key} />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <ToolbarIconButton\n            active={item.isActive(editor)}\n            disabled={item.isDisabled?.(editor) ?? false}\n            icon={item.icon}\n            key={item.key}\n            label={label}\n            onClick={() => item.run(editor)}\n            testId={`editor-${item.key}`}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nconst RichEditorField: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const resolved = useMemo(\n    () => resolveRichEditorExtensions(node.props.extensions),\n    [node.props.extensions],\n  );\n  const toolbar = useMemo(() => assembleToolbar(resolved), [resolved]);\n  const extensions = useMemo(\n    () => [\n      StarterKit.configure(assembleStarterKitOptions(resolved)),\n      Placeholder.configure({ placeholder: node.props.placeholder ?? \"\" }),\n      ...assembleTiptapExtensions(resolved),\n    ],\n    [resolved, node.props.placeholder],\n  );\n\n  const editor = useEditor({\n    extensions,\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    // Tiptap v3 stops re-rendering per transaction by default, but the toolbar\n    // reads isActive/isDisabled during render — without this, selection-only\n    // transactions leave those states stale.\n    shouldRerenderOnTransaction: true,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      id={domName}\n      required={required}\n    >\n      {(controlProps) => (\n        <>\n          <div\n            {...controlProps}\n            className={cn(\n              \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[length:var(--lt-ring-width)] focus-within:ring-lt-ring/50\",\n              locked && \"opacity-60\",\n            )}\n            role=\"group\"\n          >\n            {editor && !locked && toolbar.length > 0 && <Toolbar editor={editor} items={toolbar} />}\n            <EditorContent editor={editor} />\n          </div>\n          <input name={domName} type=\"hidden\" value={submittedValue} />\n        </>\n      )}\n    </FormFieldFrame>\n  );\n};\n\nexport default RichEditorField;\n"],"mappings":"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"}

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

@@ -129,14 +129,14 @@ var SelectComponent = ({ node }) => {
 		label: option.label,
 		value: option.value
 	}) }) : void 0;
-	return /* @__PURE__ */ jsxs(FormFieldFrame, {
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
 		error: errors[errorKey],
 		helperText: props.helperText ?? void 0,
 		tooltip: props.tooltip ?? void 0,
 		label: props.label ?? "",
-		name: domName,
+		id: domName,
 		required,
-		children: [multiple ? selected.map((value) => /* @__PURE__ */ jsx("input", {
+		children: (controlProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [multiple ? selected.map((value) => /* @__PURE__ */ jsx("input", {
 			name: `${domName}[]`,
 			type: "hidden",
 			value
@@ -197,14 +197,14 @@ var SelectComponent = ({ node }) => {
 			})] }),
 			triggerClassName: cn(controlSurface(), "flex items-center justify-between gap-2 text-left", locked && "cursor-not-allowed opacity-60"),
 			triggerProps: {
+				...controlProps,
 				"aria-haspopup": "listbox",
 				autoFocus: props.autoFocus ?? void 0,
 				"data-test": `select-${name}`,
 				disabled: locked,
-				id: domName,
 				tabIndex: props.tabIndex ?? void 0
 			}
-		})] })]
+		})] })] })
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors, fieldIdPrefix, searchOptions } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = errorKey;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _sub: \"search\", _target: searchKey, _q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey, searchOptions],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => {\n              const color = colorFor(value);\n\n              return (\n                <span\n                  className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                  key={value}\n                >\n                  {color && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-2 shrink-0 rounded-full\"\n                      style={{ background: colorValue(color) }}\n                    />\n                  )}\n                  {labelFor(value)}\n                  {!locked && (\n                    <button\n                      aria-label={t(\"form.remove-option\", \"Remove {{label}}\", {\n                        label: labelFor(value),\n                      })}\n                      data-test={`select-${name}-remove-${value}`}\n                      className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                      onClick={() => remove(value)}\n                      type=\"button\"\n                    >\n                      <Icon name=\"x\" />\n                    </button>\n                  )}\n                </span>\n              );\n            })}\n          </div>\n        )}\n\n        <Combobox\n          creatable={creatable}\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onCommit={applyCreated}\n          onCreate={applyCreated}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          renderOption={renderOption}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable || creatable)}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors, fieldIdPrefix, searchOptions } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = errorKey;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _sub: \"search\", _target: searchKey, _q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey, searchOptions],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      id={domName}\n      required={required}\n    >\n      {(controlProps) => (\n        <>\n          {multiple ? (\n            selected.map((value) => (\n              <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n            ))\n          ) : (\n            <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n          )}\n\n          <div>\n            {multiple && selected.length > 0 && (\n              <div className=\"mb-1.5 flex flex-wrap gap-1\">\n                {selected.map((value) => {\n                  const color = colorFor(value);\n\n                  return (\n                    <span\n                      className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                      key={value}\n                    >\n                      {color && (\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"size-2 shrink-0 rounded-full\"\n                          style={{ background: colorValue(color) }}\n                        />\n                      )}\n                      {labelFor(value)}\n                      {!locked && (\n                        <button\n                          aria-label={t(\"form.remove-option\", \"Remove {{label}}\", {\n                            label: labelFor(value),\n                          })}\n                          data-test={`select-${name}-remove-${value}`}\n                          className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                          onClick={() => remove(value)}\n                          type=\"button\"\n                        >\n                          <Icon name=\"x\" />\n                        </button>\n                      )}\n                    </span>\n                  );\n                })}\n              </div>\n            )}\n\n            <Combobox\n              creatable={creatable}\n              emptyLabel={props.emptyLabel ?? undefined}\n              loading={loading}\n              multiple={multiple}\n              onCommit={applyCreated}\n              onCreate={applyCreated}\n              onSearch={searchable ? search : undefined}\n              onSelect={select}\n              open={open && !locked}\n              onOpenChange={(next) => {\n                setOpen(next);\n\n                if (!next) {\n                  blur(name);\n                }\n              }}\n              options={options}\n              renderOption={renderOption}\n              searchPlaceholder={props.searchPlaceholder ?? undefined}\n              showSearch={Boolean(searchable || creatable)}\n              selected={selected}\n              testId={`select-${name}`}\n              trigger={\n                <>\n                  {!multiple && selected.length > 0 ? (\n                    <span>{labelFor(selected[0])}</span>\n                  ) : (\n                    <span className=\"text-lt-muted-fg\">{placeholder}</span>\n                  )}\n                  <Icon\n                    name=\"chevrons-up-down\"\n                    className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\"\n                  />\n                </>\n              }\n              triggerClassName={cn(\n                controlSurface(),\n                \"flex items-center justify-between gap-2 text-left\",\n                locked && \"cursor-not-allowed opacity-60\",\n              )}\n              triggerProps={{\n                ...controlProps,\n                \"aria-haspopup\": \"listbox\",\n                autoFocus: props.autoFocus ?? undefined,\n                \"data-test\": `select-${name}`,\n                disabled: locked,\n                tabIndex: props.tabIndex ?? undefined,\n              }}\n            />\n          </div>\n        </>\n      )}\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/simple-field.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { Node } from '../../../core/types.js';
+import { FormFieldControlProps } from '../base/field.js';
 import { ControlledField } from '../../hooks/use-controlled-field.js';
 export declare function SimpleField({ node, label, children, }: {
     node: Node;
     label: string;
-    children: (field: ControlledField) => ReactNode;
+    children: (field: ControlledField, controlProps: FormFieldControlProps) => ReactNode;
 }): import("react").JSX.Element | null;

package/dist/form/components/fields/simple-field.js

@@ -11,9 +11,9 @@ function SimpleField({ node, label, children }) {
 		helperText: fieldProps(node).helperText ?? void 0,
 		tooltip: fieldProps(node).tooltip ?? void 0,
 		label,
-		name: field.name,
+		id: field.name,
 		required: field.required,
-		children: children(field)
+		children: (controlProps) => children(field, controlProps)
 	});
 }
 //#endregion

package/dist/form/components/fields/simple-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/simple-field.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { fieldProps } from \"@lattice-php/lattice/form/lib/field-props\";\nimport {\n  type ControlledField,\n  useControlledField,\n} from \"@lattice-php/lattice/form/hooks/use-controlled-field\";\n\nexport function SimpleField({\n  node,\n  label,\n  children,\n}: {\n  node: Node;\n  label: string;\n  children: (field: ControlledField) => ReactNode;\n}) {\n  const field = useControlledField(node);\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={field.error}\n      helperText={fieldProps(node).helperText ?? undefined}\n      tooltip={fieldProps(node).tooltip ?? undefined}\n      label={label}\n      name={field.name}\n      required={field.required}\n    >\n      {children(field)}\n    </FormFieldFrame>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,YAAY,EAC1B,MACA,OACA,YAKC;CACD,MAAM,QAAQ,mBAAmB,IAAI;CAErC,IAAI,MAAM,QACR,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,MAAM;EACb,YAAY,WAAW,IAAI,CAAC,CAAC,cAAc,KAAA;EAC3C,SAAS,WAAW,IAAI,CAAC,CAAC,WAAW,KAAA;EAC9B;EACP,MAAM,MAAM;EACZ,UAAU,MAAM;EAEf,UAAA,SAAS,KAAK;CACD,CAAA;AAEpB"}
+{"version":3,"file":"simple-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/simple-field.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport {\n  FormFieldFrame,\n  type FormFieldControlProps,\n} from \"@lattice-php/lattice/form/components/base/field\";\nimport { fieldProps } from \"@lattice-php/lattice/form/lib/field-props\";\nimport {\n  type ControlledField,\n  useControlledField,\n} from \"@lattice-php/lattice/form/hooks/use-controlled-field\";\n\nexport function SimpleField({\n  node,\n  label,\n  children,\n}: {\n  node: Node;\n  label: string;\n  children: (field: ControlledField, controlProps: FormFieldControlProps) => ReactNode;\n}) {\n  const field = useControlledField(node);\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={field.error}\n      helperText={fieldProps(node).helperText ?? undefined}\n      tooltip={fieldProps(node).tooltip ?? undefined}\n      label={label}\n      id={field.name}\n      required={field.required}\n    >\n      {(controlProps) => children(field, controlProps)}\n    </FormFieldFrame>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,YAAY,EAC1B,MACA,OACA,YAKC;CACD,MAAM,QAAQ,mBAAmB,IAAI;CAErC,IAAI,MAAM,QACR,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,MAAM;EACb,YAAY,WAAW,IAAI,CAAC,CAAC,cAAc,KAAA;EAC3C,SAAS,WAAW,IAAI,CAAC,CAAC,WAAW,KAAA;EAC9B;EACP,IAAI,MAAM;EACV,UAAU,MAAM;EAEd,WAAA,iBAAiB,SAAS,OAAO,YAAY;CACjC,CAAA;AAEpB"}

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

@@ -9,7 +9,7 @@ var TextInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(AffixGroup, {
+		children: ({ name, testId, value, readOnly, disabled, commit }, controlProps) => /* @__PURE__ */ jsx(AffixGroup, {
 			prefix: props.prefix,
 			suffix: props.suffix,
 			end: props.copyable ? /* @__PURE__ */ jsx(CopyButton, {
@@ -19,12 +19,12 @@ var TextInputComponent = ({ node }) => {
 				value
 			}) : null,
 			children: (controlClassName) => /* @__PURE__ */ jsx(Input, {
+				...controlProps,
 				autoComplete: props.autoComplete ?? "",
 				autoFocus: props.autoFocus ?? false,
 				className: controlClassName,
 				"data-test": testId,
 				disabled,
-				id: name,
 				name,
 				onChange: (event) => commit(event.target.value),
 				placeholder: props.placeholder ?? "",

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { CopyButton } from \"@lattice-php/lattice/ui/copyable-text\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <AffixGroup\n          prefix={props.prefix}\n          suffix={props.suffix}\n          end={\n            props.copyable ? (\n              <CopyButton\n                className=\"h-lt-control-md gap-1.5 rounded-l-none rounded-r-lt-sm border-l-0 border-lt-input px-3 group-has-[:focus-visible]:border-lt-ring\"\n                label={props.label ?? name}\n                testId={`${testId}-copy`}\n                value={value}\n              />\n            ) : null\n          }\n        >\n          {(controlClassName) => (\n            <Input\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              id={name}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,YAAD;GACE,QAAQ,MAAM;GACd,QAAQ,MAAM;GACd,KACE,MAAM,WACJ,oBAAC,YAAD;IACE,WAAU;IACV,OAAO,MAAM,SAAS;IACtB,QAAQ,GAAG,OAAO;IACX;GACR,CAAA,IACC;GAGJ,WAAA,qBACA,oBAAC,OAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACV,IAAI;IACE;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"@lattice-php/lattice/ui/affix-group\";\nimport { CopyButton } from \"@lattice-php/lattice/ui/copyable-text\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }, controlProps) => (\n        <AffixGroup\n          prefix={props.prefix}\n          suffix={props.suffix}\n          end={\n            props.copyable ? (\n              <CopyButton\n                className=\"h-lt-control-md gap-1.5 rounded-l-none rounded-r-lt-sm border-l-0 border-lt-input px-3 group-has-[:focus-visible]:border-lt-ring\"\n                label={props.label ?? name}\n                testId={`${testId}-copy`}\n                value={value}\n              />\n            ) : null\n          }\n        >\n          {(controlClassName) => (\n            <Input\n              {...controlProps}\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,UAAU,iBACrD,oBAAC,YAAD;GACE,QAAQ,MAAM;GACd,QAAQ,MAAM;GACd,KACE,MAAM,WACJ,oBAAC,YAAD;IACE,WAAU;IACV,OAAO,MAAM,SAAS;IACtB,QAAQ,GAAG,OAAO;IACX;GACR,CAAA,IACC;GAGJ,WAAA,qBACA,oBAAC,OAAD;IACE,GAAI;IACJ,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACJ;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}

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

@@ -7,11 +7,11 @@ var TextareaComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Textarea, {
+		children: ({ name, testId, value, readOnly, disabled, commit }, controlProps) => /* @__PURE__ */ jsx(Textarea, {
+			...controlProps,
 			autoFocus: props.autoFocus ?? false,
 			"data-test": testId,
 			disabled,
-			id: name,
 			name,
 			onChange: (event) => commit(event.target.value),
 			placeholder: props.placeholder ?? "",

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/fields/textarea.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Textarea } from \"@lattice-php/lattice/ui/textarea\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextareaComponent: RendererComponent<\"field.textarea\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <Textarea\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          rows={props.rows ?? undefined}\n          tabIndex={props.tabIndex ?? undefined}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,UAAD;GACE,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,MAAM,MAAM,QAAQ,KAAA;GACpB,UAAU,MAAM,YAAY,KAAA;GACrB;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/fields/textarea.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Textarea } from \"@lattice-php/lattice/ui/textarea\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextareaComponent: RendererComponent<\"field.textarea\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }, controlProps) => (\n        <Textarea\n          {...controlProps}\n          autoFocus={props.autoFocus ?? false}\n          data-test={testId}\n          disabled={disabled}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          rows={props.rows ?? undefined}\n          tabIndex={props.tabIndex ?? undefined}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,UAAU,iBACrD,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,MAAM,aAAa;GAC9B,aAAW;GACD;GACJ;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,MAAM,MAAM,QAAQ,KAAA;GACpB,UAAU,MAAM,YAAY,KAAA;GACrB;EACR,CAAA;CAEQ,CAAA;AAEjB"}

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

@@ -14,14 +14,14 @@ var TimeInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit, blur }) => /* @__PURE__ */ jsxs("div", {
+		children: ({ name, testId, value, readOnly, disabled, commit, blur }, controlProps) => /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2",
 			children: [/* @__PURE__ */ jsx(Input, {
+				...controlProps,
 				"aria-label": triggerLabel,
 				autoFocus: props.autoFocus ?? false,
 				"data-test": testId,
 				disabled,
-				id: name,
 				name,
 				onBlur: () => {
 					const parsed = parseTimeString(value);

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

@@ -1 +1 @@
-{"version":3,"file":"time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\nimport { TimePicker } from \"./time-picker\";\nimport { formatTimeValue, parseTimeString, secondsEnabled } from \"./time-picker-columns\";\n\nexport const TimeInputComponent: RendererComponent<\"field.time-input\"> = ({ node }) => {\n  const props = node.props;\n  const withSeconds = secondsEnabled(props.step);\n  const triggerLabel = props.label ?? props.name;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit, blur }) => (\n        <div className=\"flex gap-2\">\n          <Input\n            aria-label={triggerLabel}\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            id={name}\n            name={name}\n            onBlur={() => {\n              const parsed = parseTimeString(value);\n\n              if (parsed) {\n                commit(formatTimeValue(parsed, withSeconds));\n              }\n\n              blur();\n            }}\n            onChange={(event) => commit(event.target.value)}\n            readOnly={readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"text\"\n            value={value}\n          />\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                aria-label={`Open ${triggerLabel} time picker`}\n                disabled={disabled || readOnly}\n                size=\"icon\"\n                type=\"button\"\n                variant=\"secondary\"\n              >\n                <Icon name=\"clock\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-2\">\n              <TimePicker\n                value={parseTimeString(value)}\n                onChange={(next) => commit(formatTimeValue(next, withSeconds))}\n                step={props.step}\n                min={props.min}\n                max={props.max}\n                disabled={disabled}\n                readOnly={readOnly}\n                testId={`${testId}-picker`}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,eAAe,MAAM,IAAI;CAC7C,MAAM,eAAe,MAAM,SAAS,MAAM;CAE1C,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IACE,cAAY;IACZ,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACV,IAAI;IACE;IACN,cAAc;KACZ,MAAM,SAAS,gBAAgB,KAAK;KAEpC,IAAI,QACF,OAAO,gBAAgB,QAAQ,WAAW,CAAC;KAG7C,KAAK;IACP;IACA,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IACpC;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA,GACD,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,oBAAC,QAAD;KACE,cAAY,QAAQ,aAAa;KACjC,UAAU,YAAY;KACtB,MAAK;KACL,MAAK;KACL,SAAQ;KAER,UAAA,oBAAC,MAAD;MAAM,MAAK;MAAQ,WAAU;MAAkB,eAAY;KAAQ,CAAA;IAC7D,CAAA;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IACxB,UAAA,oBAAC,YAAD;KACE,OAAO,gBAAgB,KAAK;KAC5B,WAAW,SAAS,OAAO,gBAAgB,MAAM,WAAW,CAAC;KAC7D,MAAM,MAAM;KACZ,KAAK,MAAM;KACX,KAAK,MAAM;KACD;KACA;KACV,QAAQ,GAAG,OAAO;IACnB,CAAA;GACa,CAAA,CACT,EAAA,CAAA,CACN;;CAEI,CAAA;AAEjB"}
+{"version":3,"file":"time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\nimport { TimePicker } from \"./time-picker\";\nimport { formatTimeValue, parseTimeString, secondsEnabled } from \"./time-picker-columns\";\n\nexport const TimeInputComponent: RendererComponent<\"field.time-input\"> = ({ node }) => {\n  const props = node.props;\n  const withSeconds = secondsEnabled(props.step);\n  const triggerLabel = props.label ?? props.name;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit, blur }, controlProps) => (\n        <div className=\"flex gap-2\">\n          <Input\n            {...controlProps}\n            aria-label={triggerLabel}\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            name={name}\n            onBlur={() => {\n              const parsed = parseTimeString(value);\n\n              if (parsed) {\n                commit(formatTimeValue(parsed, withSeconds));\n              }\n\n              blur();\n            }}\n            onChange={(event) => commit(event.target.value)}\n            readOnly={readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"text\"\n            value={value}\n          />\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                aria-label={`Open ${triggerLabel} time picker`}\n                disabled={disabled || readOnly}\n                size=\"icon\"\n                type=\"button\"\n                variant=\"secondary\"\n              >\n                <Icon name=\"clock\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-2\">\n              <TimePicker\n                value={parseTimeString(value)}\n                onChange={(next) => commit(formatTimeValue(next, withSeconds))}\n                step={props.step}\n                min={props.min}\n                max={props.max}\n                disabled={disabled}\n                readOnly={readOnly}\n                testId={`${testId}-picker`}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,eAAe,MAAM,IAAI;CAC7C,MAAM,eAAe,MAAM,SAAS,MAAM;CAE1C,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,QAAQ,iBAC3D,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IACE,GAAI;IACJ,cAAY;IACZ,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACJ;IACN,cAAc;KACZ,MAAM,SAAS,gBAAgB,KAAK;KAEpC,IAAI,QACF,OAAO,gBAAgB,QAAQ,WAAW,CAAC;KAG7C,KAAK;IACP;IACA,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IACpC;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA,GACD,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,oBAAC,QAAD;KACE,cAAY,QAAQ,aAAa;KACjC,UAAU,YAAY;KACtB,MAAK;KACL,MAAK;KACL,SAAQ;KAER,UAAA,oBAAC,MAAD;MAAM,MAAK;MAAQ,WAAU;MAAkB,eAAY;KAAQ,CAAA;IAC7D,CAAA;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IACxB,UAAA,oBAAC,YAAD;KACE,OAAO,gBAAgB,KAAK;KAC5B,WAAW,SAAS,OAAO,gBAAgB,MAAM,WAAW,CAAC;KAC7D,MAAM,MAAM;KACZ,KAAK,MAAM;KACX,KAAK,MAAM;KACD;KACA;KACV,QAAQ,GAAG,OAAO;IACnB,CAAA;GACa,CAAA,CACT,EAAA,CAAA,CACN;;CAEI,CAAA;AAEjB"}

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

@@ -9,7 +9,7 @@ import { toBoolean } from "../../lib/conditions.js";
 import { useDependentField } from "../../hooks/use-dependent-field.js";
 import { fieldDomName } from "../../lib/field-dom-name.js";
 import { useSeedDefault } from "../../hooks/use-seed-default.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/toggle.tsx
 var ToggleComponent = ({ node }) => {
 	const { hidden, required, readOnly, disabled } = useDependentField(node);
@@ -27,19 +27,20 @@ var ToggleComponent = ({ node }) => {
 	const { commit } = useFieldCommit();
 	useSeedDefault(localName, defaultChecked);
 	if (hidden) return null;
-	return /* @__PURE__ */ jsxs(FormFieldFrame, {
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
 		error: errors[errorKey],
 		helperText: props.helperText ?? void 0,
 		tooltip: props.tooltip ?? void 0,
 		label: props.label ?? "",
-		name,
+		id: name,
 		required,
-		children: [/* @__PURE__ */ jsx("input", {
+		children: (controlProps) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
 			disabled: locked,
 			name,
 			type: "hidden",
 			value: checked ? "1" : "0"
 		}), /* @__PURE__ */ jsx("button", {
+			...controlProps,
 			"aria-checked": checked,
 			"aria-label": props.label ?? localName,
 			autoFocus: props.autoFocus ?? false,
@@ -47,7 +48,6 @@ var ToggleComponent = ({ node }) => {
 			"data-state": checked ? "checked" : "unchecked",
 			"data-test": testIdentity(localName),
 			disabled: locked,
-			id: name,
 			name,
 			onClick: () => commit(localName, !checked),
 			role: "switch",
@@ -57,7 +57,7 @@ var ToggleComponent = ({ node }) => {
 				className: "size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
 				"data-state": checked ? "checked" : "unchecked"
 			})
-		})]
+		})] })
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../../../resources/js/form/components/fields/toggle.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { toBoolean } from \"@lattice-php/lattice/form/lib/conditions\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useSeedDefault } from \"@lattice-php/lattice/form/hooks/use-seed-default\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\nexport const ToggleComponent: RendererComponent<\"field.toggle\"> = ({ node }) => {\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const props = node.props;\n  const localName = props.name;\n  const scope = useFieldScope();\n  const { errors, fieldIdPrefix } = useFormContext();\n  const name = fieldDomName(scope ? scope.scopedName(localName) : localName, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(localName) : localName;\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const defaultChecked = toBoolean(props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n  const locked = readOnly || disabled;\n  const { commit } = useFieldCommit();\n\n  useSeedDefault(localName, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <input disabled={locked} name={name} type=\"hidden\" value={checked ? \"1\" : \"0\"} />\n      <button\n        aria-checked={checked}\n        aria-label={props.label ?? localName}\n        autoFocus={props.autoFocus ?? false}\n        className={cn(\n          \"inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-lt-muted p-0.5 shadow-lt-xs transition-colors outline-none focus-visible:border-lt-ring focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50 disabled:cursor-not-allowed disabled:bg-lt-disabled data-[state=checked]:bg-lt-primary disabled:data-[state=checked]:bg-lt-disabled\",\n        )}\n        data-state={checked ? \"checked\" : \"unchecked\"}\n        data-test={testIdentity(localName)}\n        disabled={locked}\n        id={name}\n        name={name}\n        onClick={() => commit(localName, !checked)}\n        role=\"switch\"\n        tabIndex={props.tabIndex ?? undefined}\n        type=\"button\"\n      >\n        <span\n          className=\"size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n          data-state={checked ? \"checked\" : \"unchecked\"}\n        />\n      </button>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,mBAAsD,EAAE,WAAW;CAC9E,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,QAAQ,KAAK;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,QAAQ,cAAc;CAC5B,MAAM,EAAE,QAAQ,kBAAkB,eAAe;CACjD,MAAM,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,IAAI,WAAW,aAAa;CACxF,MAAM,WAAW,QAAQ,MAAM,SAAS,SAAS,IAAI;CACrD,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,iBAAiB,UAAU,MAAM,KAAK;CAC5C,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CACrE,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,WAAW,eAAe;CAElC,eAAe,WAAW,cAAc;CAExC,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EAChB;EACI;EANZ,UAAA,CAQE,oBAAC,SAAD;GAAO,UAAU;GAAc;GAAM,MAAK;GAAS,OAAO,UAAU,MAAM;EAAM,CAAA,GAChF,oBAAC,UAAD;GACE,gBAAc;GACd,cAAY,MAAM,SAAS;GAC3B,WAAW,MAAM,aAAa;GAC9B,WAAW,GACT,gZACF;GACA,cAAY,UAAU,YAAY;GAClC,aAAW,aAAa,SAAS;GACjC,UAAU;GACV,IAAI;GACE;GACN,eAAe,OAAO,WAAW,CAAC,OAAO;GACzC,MAAK;GACL,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GAEL,UAAA,oBAAC,QAAD;IACE,WAAU;IACV,cAAY,UAAU,YAAY;GACnC,CAAA;EACK,CAAA,CACM;;AAEpB"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../../../resources/js/form/components/fields/toggle.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { toBoolean } from \"@lattice-php/lattice/form/lib/conditions\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useSeedDefault } from \"@lattice-php/lattice/form/hooks/use-seed-default\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\nexport const ToggleComponent: RendererComponent<\"field.toggle\"> = ({ node }) => {\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const props = node.props;\n  const localName = props.name;\n  const scope = useFieldScope();\n  const { errors, fieldIdPrefix } = useFormContext();\n  const name = fieldDomName(scope ? scope.scopedName(localName) : localName, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(localName) : localName;\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const defaultChecked = toBoolean(props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n  const locked = readOnly || disabled;\n  const { commit } = useFieldCommit();\n\n  useSeedDefault(localName, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      id={name}\n      required={required}\n    >\n      {(controlProps) => (\n        <>\n          <input disabled={locked} name={name} type=\"hidden\" value={checked ? \"1\" : \"0\"} />\n          <button\n            {...controlProps}\n            aria-checked={checked}\n            aria-label={props.label ?? localName}\n            autoFocus={props.autoFocus ?? false}\n            className={cn(\n              \"inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-lt-muted p-0.5 shadow-lt-xs transition-colors outline-none focus-visible:border-lt-ring focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50 disabled:cursor-not-allowed disabled:bg-lt-disabled data-[state=checked]:bg-lt-primary disabled:data-[state=checked]:bg-lt-disabled\",\n            )}\n            data-state={checked ? \"checked\" : \"unchecked\"}\n            data-test={testIdentity(localName)}\n            disabled={locked}\n            name={name}\n            onClick={() => commit(localName, !checked)}\n            role=\"switch\"\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"button\"\n          >\n            <span\n              className=\"size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n              data-state={checked ? \"checked\" : \"unchecked\"}\n            />\n          </button>\n        </>\n      )}\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,mBAAsD,EAAE,WAAW;CAC9E,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,QAAQ,KAAK;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,QAAQ,cAAc;CAC5B,MAAM,EAAE,QAAQ,kBAAkB,eAAe;CACjD,MAAM,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,IAAI,WAAW,aAAa;CACxF,MAAM,WAAW,QAAQ,MAAM,SAAS,SAAS,IAAI;CACrD,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,iBAAiB,UAAU,MAAM,KAAK;CAC5C,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CACrE,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,WAAW,eAAe;CAElC,eAAe,WAAW,cAAc;CAExC,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EACtB,IAAI;EACM;EAER,WAAA,iBACA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;GAAO,UAAU;GAAc;GAAM,MAAK;GAAS,OAAO,UAAU,MAAM;EAAM,CAAA,GAChF,oBAAC,UAAD;GACE,GAAI;GACJ,gBAAc;GACd,cAAY,MAAM,SAAS;GAC3B,WAAW,MAAM,aAAa;GAC9B,WAAW,GACT,gZACF;GACA,cAAY,UAAU,YAAY;GAClC,aAAW,aAAa,SAAS;GACjC,UAAU;GACJ;GACN,eAAe,OAAO,WAAW,CAAC,OAAO;GACzC,MAAK;GACL,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GAEL,UAAA,oBAAC,QAAD;IACE,WAAU;IACV,cAAY,UAAU,YAAY;GACnC,CAAA;EACK,CAAA,CACR,EAAA,CAAA;CAEU,CAAA;AAEpB"}

package/dist/form/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/index.js';
+export { FormFieldFrame, type FormFieldControlProps } from './components/base/field.js';
 export { FormValuesProvider } from './hooks/values.js';
 export { formComponents } from './plugin.js';
 export type * from './types.js';