@axenstudio/axen-form 0.1.1

package/dist/fields/DateField/DateField.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { formatDateLocale, getDefaultLocale } from "../../core/dateUtils.js";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function DateField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  locale
+}) {
+  const aria = ariaProps(name, { error, helperText, required, label });
+  const resolvedLocale = locale ?? getDefaultLocale();
+  const dateValue = typeof value === "string" ? value : "";
+  const displayText = dateValue ? formatDateLocale(dateValue, resolvedLocale) : "";
+  const handleChange = (e) => {
+    onChange(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId(name),
+        htmlFor: name,
+        className: cx(styles.label, required && styles.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...aria,
+        type: "date",
+        name,
+        value: dateValue,
+        onChange: handleChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        min,
+        max,
+        lang: resolvedLocale,
+        className: cx(styles.input, error && styles.inputError)
+      }
+    ),
+    displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  DateField
+};

package/dist/fields/DateTimeField/DateTimeField.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dateUtils = require("../../core/dateUtils.cjs");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+function DateTimeField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  locale,
+  ampm
+}) {
+  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
+  const dtValue = typeof value === "string" ? value : "";
+  const displayText = dtValue ? dateUtils.formatDateTimeLocale(dtValue, resolvedLocale, ampm) : "";
+  const handleChange = (e) => {
+    onChange(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        id: fieldUtils.labelId(name),
+        htmlFor: name,
+        className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...aria,
+        type: "datetime-local",
+        name,
+        value: dtValue,
+        onChange: handleChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        min,
+        max,
+        lang: resolvedLocale,
+        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
+      }
+    ),
+    displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.DateTimeField = DateTimeField;

package/dist/fields/DateTimeField/DateTimeField.d.ts

@@ -0,0 +1,8 @@
+import { FieldComponentProps } from '../../types';
+export declare function DateTimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, ampm, }: Readonly<FieldComponentProps & {
+    min?: string;
+    max?: string;
+    locale?: string;
+    ampm?: boolean;
+}>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DateTimeField.d.ts.map

package/dist/fields/DateTimeField/DateTimeField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,GACL,EAAE,QAAQ,CACT,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CACtF,2CAyDA"}

package/dist/fields/DateTimeField/DateTimeField.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { formatDateTimeLocale, getDefaultLocale } from "../../core/dateUtils.js";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function DateTimeField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  locale,
+  ampm
+}) {
+  const aria = ariaProps(name, { error, helperText, required, label });
+  const resolvedLocale = locale ?? getDefaultLocale();
+  const dtValue = typeof value === "string" ? value : "";
+  const displayText = dtValue ? formatDateTimeLocale(dtValue, resolvedLocale, ampm) : "";
+  const handleChange = (e) => {
+    onChange(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId(name),
+        htmlFor: name,
+        className: cx(styles.label, required && styles.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...aria,
+        type: "datetime-local",
+        name,
+        value: dtValue,
+        onChange: handleChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        min,
+        max,
+        lang: resolvedLocale,
+        className: cx(styles.input, error && styles.inputError)
+      }
+    ),
+    displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  DateTimeField
+};

package/dist/fields/EmailField/EmailField.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+function EmailField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required
+}) {
+  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        id: fieldUtils.labelId(name),
+        htmlFor: name,
+        className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...aria,
+        type: "email",
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        autoComplete: "email",
+        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
+      }
+    ),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.EmailField = EmailField;

package/dist/fields/EmailField/EmailField.d.ts

@@ -0,0 +1,3 @@
+import { FieldComponentProps } from '../../types';
+export declare function EmailField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmailField.d.ts.map

package/dist/fields/EmailField/EmailField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../src/fields/EmailField/EmailField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAsC/B"}

package/dist/fields/EmailField/EmailField.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function EmailField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required
+}) {
+  const aria = ariaProps(name, { error, helperText, required, label });
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId(name),
+        htmlFor: name,
+        className: cx(styles.label, required && styles.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...aria,
+        type: "email",
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        autoComplete: "email",
+        className: cx(styles.input, error && styles.inputError)
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  EmailField
+};

package/dist/fields/NumberField/NumberField.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const numberUtils = require("../../core/numberUtils.cjs");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+function NumberField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  step,
+  prefix,
+  suffix,
+  locale,
+  form
+}) {
+  const inputRef = react.useRef(null);
+  const nextCursorRef = react.useRef(null);
+  const fieldLocale = locale ?? "en-US";
+  react.useLayoutEffect(() => {
+    if (nextCursorRef.current !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(nextCursorRef.current, nextCursorRef.current);
+      nextCursorRef.current = null;
+    }
+  });
+  const handleChange = react.useCallback(
+    (e) => {
+      const raw = e.target.value;
+      const cursorPos = e.target.selectionStart ?? 0;
+      const cleaned = numberUtils.stripNonNumeric(raw, fieldLocale);
+      if (cleaned === "" || cleaned === "-") {
+        form.setFieldValue(name, cleaned === "-" ? cleaned : "");
+        return;
+      }
+      const numValue = Number.parseFloat(cleaned);
+      if (Number.isNaN(numValue)) return;
+      let clamped = numValue;
+      if (min !== void 0 && clamped < min) clamped = min;
+      if (max !== void 0 && clamped > max) clamped = max;
+      form.setFieldValue(name, clamped);
+      const formatted = numberUtils.formatNumber(clamped, { locale: fieldLocale });
+      nextCursorRef.current = numberUtils.calculateCursorPosition(raw, formatted, cursorPos, fieldLocale);
+    },
+    [form, name, min, max, fieldLocale]
+  );
+  let displayValue = "";
+  if (value !== "" && value != null) {
+    displayValue = typeof value === "number" ? numberUtils.formatNumber(value, { locale: fieldLocale }) : String(value);
+  }
+  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const hasAdornment = prefix || suffix;
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      ref: inputRef,
+      type: "text",
+      inputMode: "decimal",
+      name,
+      value: displayValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      step,
+      className: fieldUtils.cx(
+        hasAdornment ? fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.inputGroupInput) : fieldBase_module.default.input,
+        error && fieldBase_module.default.inputError
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        id: fieldUtils.labelId(name),
+        htmlFor: name,
+        className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
+        children: label
+      }
+    ),
+    hasAdornment ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputGroup, children: [
+      prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputPrefix, children: prefix }),
+      inputEl,
+      suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputSuffix, children: suffix })
+    ] }) : inputEl,
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.NumberField = NumberField;

package/dist/fields/NumberField/NumberField.d.ts

@@ -0,0 +1,10 @@
+import { FieldComponentProps } from '../../types';
+export declare function NumberField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, step, prefix, suffix, locale, form, }: FieldComponentProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+    prefix?: string;
+    suffix?: string;
+    locale?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/fields/NumberField/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/fields/NumberField/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CA0GA"}

package/dist/fields/NumberField/NumberField.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useLayoutEffect, useCallback } from "react";
+import { stripNonNumeric, formatNumber, calculateCursorPosition } from "../../core/numberUtils.js";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function NumberField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  step,
+  prefix,
+  suffix,
+  locale,
+  form
+}) {
+  const inputRef = useRef(null);
+  const nextCursorRef = useRef(null);
+  const fieldLocale = locale ?? "en-US";
+  useLayoutEffect(() => {
+    if (nextCursorRef.current !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(nextCursorRef.current, nextCursorRef.current);
+      nextCursorRef.current = null;
+    }
+  });
+  const handleChange = useCallback(
+    (e) => {
+      const raw = e.target.value;
+      const cursorPos = e.target.selectionStart ?? 0;
+      const cleaned = stripNonNumeric(raw, fieldLocale);
+      if (cleaned === "" || cleaned === "-") {
+        form.setFieldValue(name, cleaned === "-" ? cleaned : "");
+        return;
+      }
+      const numValue = Number.parseFloat(cleaned);
+      if (Number.isNaN(numValue)) return;
+      let clamped = numValue;
+      if (min !== void 0 && clamped < min) clamped = min;
+      if (max !== void 0 && clamped > max) clamped = max;
+      form.setFieldValue(name, clamped);
+      const formatted = formatNumber(clamped, { locale: fieldLocale });
+      nextCursorRef.current = calculateCursorPosition(raw, formatted, cursorPos, fieldLocale);
+    },
+    [form, name, min, max, fieldLocale]
+  );
+  let displayValue = "";
+  if (value !== "" && value != null) {
+    displayValue = typeof value === "number" ? formatNumber(value, { locale: fieldLocale }) : String(value);
+  }
+  const aria = ariaProps(name, { error, helperText, required, label });
+  const hasAdornment = prefix || suffix;
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...aria,
+      ref: inputRef,
+      type: "text",
+      inputMode: "decimal",
+      name,
+      value: displayValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      step,
+      className: cx(
+        hasAdornment ? cx(styles.input, styles.inputGroupInput) : styles.input,
+        error && styles.inputError
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId(name),
+        htmlFor: name,
+        className: cx(styles.label, required && styles.labelRequired),
+        children: label
+      }
+    ),
+    hasAdornment ? /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
+      prefix && /* @__PURE__ */ jsx("span", { className: styles.inputPrefix, children: prefix }),
+      inputEl,
+      suffix && /* @__PURE__ */ jsx("span", { className: styles.inputSuffix, children: suffix })
+    ] }) : inputEl,
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  NumberField
+};

package/dist/fields/PasswordField/PasswordField.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const fieldBase_module = require("../fieldBase.module.css.cjs");
+const fieldUtils = require("../fieldUtils.cjs");
+const PasswordField_module = require("./PasswordField.module.css.cjs");
+function PasswordField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required
+}) {
+  const [visible, setVisible] = react.useState(false);
+  const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const toggleVisible = react.useCallback(() => {
+    setVisible((v) => !v);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        id: fieldUtils.labelId(name),
+        htmlFor: name,
+        className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PasswordField_module.default.inputWrap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...aria,
+          type: visible ? "text" : "password",
+          name,
+          value: value ?? "",
+          onChange,
+          onBlur,
+          placeholder,
+          disabled,
+          readOnly,
+          autoComplete: "current-password",
+          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError, PasswordField_module.default.passwordInput)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: PasswordField_module.default.toggle,
+          onClick: toggleVisible,
+          "aria-label": visible ? "Hide password" : "Show password",
+          tabIndex: -1,
+          disabled,
+          children: visible ? "◉" : "○"
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        id: fieldUtils.helperId(name),
+        className: fieldUtils.cx(fieldBase_module.default.helperText, error && fieldBase_module.default.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+exports.PasswordField = PasswordField;

package/dist/fields/PasswordField/PasswordField.d.ts

@@ -0,0 +1,3 @@
+import { FieldComponentProps } from '../../types';
+export declare function PasswordField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PasswordField.d.ts.map

package/dist/fields/PasswordField/PasswordField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/fields/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAuD/B"}