@axenstudio/axen-form 0.1.1

package/dist/fields/PasswordField/PasswordField.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import localStyles from "./PasswordField.module.css.js";
+function PasswordField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required
+}) {
+  const [visible, setVisible] = useState(false);
+  const aria = ariaProps(name, { error, helperText, required, label });
+  const toggleVisible = useCallback(() => {
+    setVisible((v) => !v);
+  }, []);
+  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__ */ jsxs("div", { className: localStyles.inputWrap, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...aria,
+          type: visible ? "text" : "password",
+          name,
+          value: value ?? "",
+          onChange,
+          onBlur,
+          placeholder,
+          disabled,
+          readOnly,
+          autoComplete: "current-password",
+          className: cx(styles.input, error && styles.inputError, localStyles.passwordInput)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: localStyles.toggle,
+          onClick: toggleVisible,
+          "aria-label": visible ? "Hide password" : "Show password",
+          tabIndex: -1,
+          disabled,
+          children: visible ? "◉" : "○"
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  PasswordField
+};

package/dist/fields/PasswordField/PasswordField.module.css

@@ -0,0 +1,41 @@
+._inputWrap_1nxa7_1 {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+._passwordInput_1nxa7_7 {
+  padding-right: 2.5rem;
+}
+
+._toggle_1nxa7_11 {
+  position: absolute;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--axen-color-text-secondary);
+  font-size: var(--axen-font-size-lg);
+  border-radius: var(--axen-border-radius-sm);
+  transition: color var(--axen-transition-fast);
+}
+
+._toggle_1nxa7_11:hover:not(:disabled) {
+  color: var(--axen-color-text);
+}
+
+._toggle_1nxa7_11:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+  outline-offset: var(--axen-focus-ring-offset);
+}
+
+._toggle_1nxa7_11:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/fields/PasswordField/PasswordField.module.css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const inputWrap = "_inputWrap_1nxa7_1";
+const passwordInput = "_passwordInput_1nxa7_7";
+const toggle = "_toggle_1nxa7_11";
+const localStyles = {
+  inputWrap,
+  passwordInput,
+  toggle
+};
+exports.default = localStyles;
+exports.inputWrap = inputWrap;
+exports.passwordInput = passwordInput;
+exports.toggle = toggle;

package/dist/fields/PasswordField/PasswordField.module.css.js

@@ -0,0 +1,14 @@
+const inputWrap = "_inputWrap_1nxa7_1";
+const passwordInput = "_passwordInput_1nxa7_7";
+const toggle = "_toggle_1nxa7_11";
+const localStyles = {
+  inputWrap,
+  passwordInput,
+  toggle
+};
+export {
+  localStyles as default,
+  inputWrap,
+  passwordInput,
+  toggle
+};

package/dist/fields/PhoneField/PhoneField.cjs

@@ -0,0 +1,58 @@
+"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 PhoneField({
+  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: "tel",
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        placeholder: placeholder ?? "+1 (555) 000-0000",
+        disabled,
+        readOnly,
+        autoComplete: "tel",
+        inputMode: "tel",
+        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.PhoneField = PhoneField;

package/dist/fields/PhoneField/PhoneField.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../src/fields/PhoneField/PhoneField.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,2CAuC/B"}

package/dist/fields/PhoneField/PhoneField.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function PhoneField({
+  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: "tel",
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        placeholder: placeholder ?? "+1 (555) 000-0000",
+        disabled,
+        readOnly,
+        autoComplete: "tel",
+        inputMode: "tel",
+        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 {
+  PhoneField
+};

package/dist/fields/RadioField/RadioField.cjs

@@ -0,0 +1,66 @@
+"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 RadioField_module = require("./RadioField.module.css.cjs");
+function RadioField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  options,
+  form
+}) {
+  const handleChange = react.useCallback(
+    (optionValue) => {
+      if (readOnly) return;
+      form.setFieldValue(name, optionValue);
+    },
+    [form, name, readOnly]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: fieldBase_module.default.wrapper,
+      role: "radiogroup",
+      "aria-labelledby": label ? fieldUtils.labelId(name) : void 0,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: fieldUtils.labelId(name), className: fieldUtils.cx(fieldBase_module.default.label, required && fieldBase_module.default.labelRequired), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: RadioField_module.default.radioGroup, children: options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldUtils.cx(fieldBase_module.default.inlineWrapper, RadioField_module.default.radioLabel), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: String(opt.value),
+              checked: value === opt.value,
+              onChange: () => handleChange(opt.value),
+              onBlur,
+              disabled: disabled || opt.disabled,
+              className: RadioField_module.default.radio
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inlineLabel, children: opt.label })
+        ] }, opt.value)) }),
+        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.RadioField = RadioField;

package/dist/fields/RadioField/RadioField.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioField.d.ts","sourceRoot":"","sources":["../../../src/fields/RadioField/RadioField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAgD/B"}

package/dist/fields/RadioField/RadioField.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import styles from "../fieldBase.module.css.js";
+import { cx, labelId, helperId } from "../fieldUtils.js";
+import localStyles from "./RadioField.module.css.js";
+function RadioField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  options,
+  form
+}) {
+  const handleChange = useCallback(
+    (optionValue) => {
+      if (readOnly) return;
+      form.setFieldValue(name, optionValue);
+    },
+    [form, name, readOnly]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.wrapper,
+      role: "radiogroup",
+      "aria-labelledby": label ? labelId(name) : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx("span", { id: labelId(name), className: cx(styles.label, required && styles.labelRequired), children: label }),
+        /* @__PURE__ */ jsx("div", { className: localStyles.radioGroup, children: options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsxs("label", { className: cx(styles.inlineWrapper, localStyles.radioLabel), children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: String(opt.value),
+              checked: value === opt.value,
+              onChange: () => handleChange(opt.value),
+              onBlur,
+              disabled: disabled || opt.disabled,
+              className: localStyles.radio
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.inlineLabel, children: opt.label })
+        ] }, opt.value)) }),
+        helperText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: helperId(name),
+            className: cx(styles.helperText, error && styles.helperTextError),
+            role: error ? "alert" : void 0,
+            children: helperText
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  RadioField
+};

package/dist/fields/RadioField/RadioField.module.css

@@ -0,0 +1,34 @@
+._radioGroup_1nz5i_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--axen-space-xs);
+}
+
+._radioLabel_1nz5i_7 {
+  cursor: pointer;
+}
+
+._radio_1nz5i_1 {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--axen-color-primary);
+}
+
+._radio_1nz5i_1:focus-visible {
+  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
+  outline-offset: var(--axen-focus-ring-offset);
+}
+
+._radio_1nz5i_1:disabled {
+  cursor: not-allowed;
+}
+
+/* Mobile: larger touch target */
+@media (max-width: 599px) {
+  ._radio_1nz5i_1 {
+    width: 24px;
+    height: 24px;
+  }
+}

package/dist/fields/RadioField/RadioField.module.css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const radioGroup = "_radioGroup_1nz5i_1";
+const radioLabel = "_radioLabel_1nz5i_7";
+const radio = "_radio_1nz5i_1";
+const localStyles = {
+  radioGroup,
+  radioLabel,
+  radio
+};
+exports.default = localStyles;
+exports.radio = radio;
+exports.radioGroup = radioGroup;
+exports.radioLabel = radioLabel;

package/dist/fields/RadioField/RadioField.module.css.js

@@ -0,0 +1,14 @@
+const radioGroup = "_radioGroup_1nz5i_1";
+const radioLabel = "_radioLabel_1nz5i_7";
+const radio = "_radio_1nz5i_1";
+const localStyles = {
+  radioGroup,
+  radioLabel,
+  radio
+};
+export {
+  localStyles as default,
+  radio,
+  radioGroup,
+  radioLabel
+};

package/dist/fields/SelectField/SelectField.cjs

@@ -0,0 +1,58 @@
+"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 SelectField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  options
+}) {
+  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.jsxs(
+      "select",
+      {
+        ...aria,
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        disabled: disabled || readOnly,
+        className: fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.select, error && fieldBase_module.default.inputError),
+        children: [
+          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
+          options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+        ]
+      }
+    ),
+    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.SelectField = SelectField;

package/dist/fields/SelectField/SelectField.d.ts

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

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

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

package/dist/fields/SelectField/SelectField.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function SelectField({
+  name,
+  value,
+  onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  options
+}) {
+  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__ */ jsxs(
+      "select",
+      {
+        ...aria,
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        disabled: disabled || readOnly,
+        className: cx(styles.input, styles.select, error && styles.inputError),
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options == null ? void 0 : options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  SelectField
+};