@axenstudio/axen-form 0.1.1

package/dist/fields/SliderField/SliderField.cjs

@@ -0,0 +1,79 @@
+"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 SliderField_module = require("./SliderField.module.css.cjs");
+function SliderField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  step,
+  form
+}) {
+  const sliderMin = min ?? 0;
+  const sliderMax = max ?? 100;
+  const sliderStep = step ?? 1;
+  const numValue = typeof value === "number" ? value : sliderMin;
+  const handleChange = react.useCallback(
+    (e) => {
+      form.setFieldValue(name, Number.parseFloat(e.target.value));
+    },
+    [form, name]
+  );
+  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: SliderField_module.default.sliderWrap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: name,
+          type: "range",
+          name,
+          value: numValue,
+          onChange: handleChange,
+          onBlur,
+          min: sliderMin,
+          max: sliderMax,
+          step: sliderStep,
+          disabled: disabled || readOnly,
+          "aria-valuemin": sliderMin,
+          "aria-valuemax": sliderMax,
+          "aria-valuenow": numValue,
+          "aria-invalid": error || void 0,
+          "aria-describedby": helperText ? fieldUtils.helperId(name) : void 0,
+          className: SliderField_module.default.slider
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("output", { htmlFor: name, className: SliderField_module.default.output, children: numValue })
+    ] }),
+    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.SliderField = SliderField;

package/dist/fields/SliderField/SliderField.d.ts

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

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

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

package/dist/fields/SliderField/SliderField.js

@@ -0,0 +1,79 @@
+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 "./SliderField.module.css.js";
+function SliderField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  min,
+  max,
+  step,
+  form
+}) {
+  const sliderMin = min ?? 0;
+  const sliderMax = max ?? 100;
+  const sliderStep = step ?? 1;
+  const numValue = typeof value === "number" ? value : sliderMin;
+  const handleChange = useCallback(
+    (e) => {
+      form.setFieldValue(name, Number.parseFloat(e.target.value));
+    },
+    [form, name]
+  );
+  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.sliderWrap, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: name,
+          type: "range",
+          name,
+          value: numValue,
+          onChange: handleChange,
+          onBlur,
+          min: sliderMin,
+          max: sliderMax,
+          step: sliderStep,
+          disabled: disabled || readOnly,
+          "aria-valuemin": sliderMin,
+          "aria-valuemax": sliderMax,
+          "aria-valuenow": numValue,
+          "aria-invalid": error || void 0,
+          "aria-describedby": helperText ? helperId(name) : void 0,
+          className: localStyles.slider
+        }
+      ),
+      /* @__PURE__ */ jsx("output", { htmlFor: name, className: localStyles.output, children: numValue })
+    ] }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  SliderField
+};

package/dist/fields/SliderField/SliderField.module.css

@@ -0,0 +1,76 @@
+._sliderWrap_84w8t_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--axen-space-md);
+  min-height: var(--axen-field-min-height);
+}
+
+._slider_84w8t_1 {
+  flex: 1;
+  height: 6px;
+  appearance: none;
+  background: var(--axen-color-border);
+  border-radius: var(--axen-border-radius-pill);
+  outline: none;
+  cursor: pointer;
+  transition: background var(--axen-transition-fast);
+}
+
+._slider_84w8t_1::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--axen-color-primary);
+  border: 2px solid var(--axen-color-bg);
+  box-shadow: var(--axen-shadow-sm);
+  cursor: pointer;
+  transition:
+    background var(--axen-transition-fast),
+    transform var(--axen-transition-fast);
+}
+
+._slider_84w8t_1::-webkit-slider-thumb:hover {
+  background: var(--axen-color-primary-hover);
+  transform: scale(1.15);
+}
+
+._slider_84w8t_1:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--axen-shadow-focus);
+}
+
+._slider_84w8t_1::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--axen-color-primary);
+  border: 2px solid var(--axen-color-bg);
+  box-shadow: var(--axen-shadow-sm);
+  cursor: pointer;
+}
+
+._slider_84w8t_1:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._output_84w8t_57 {
+  min-width: 2.5em;
+  text-align: center;
+  font-size: var(--axen-font-size-sm);
+  font-weight: var(--axen-font-weight-medium);
+  color: var(--axen-color-text);
+}
+
+/* Touch target for mobile */
+@media (max-width: 599px) {
+  ._slider_84w8t_1::-webkit-slider-thumb {
+    width: 28px;
+    height: 28px;
+  }
+
+  ._slider_84w8t_1::-moz-range-thumb {
+    width: 28px;
+    height: 28px;
+  }
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const sliderWrap = "_sliderWrap_84w8t_1";
+const slider = "_slider_84w8t_1";
+const output = "_output_84w8t_57";
+const localStyles = {
+  sliderWrap,
+  slider,
+  output
+};
+exports.default = localStyles;
+exports.output = output;
+exports.slider = slider;
+exports.sliderWrap = sliderWrap;

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

@@ -0,0 +1,14 @@
+const sliderWrap = "_sliderWrap_84w8t_1";
+const slider = "_slider_84w8t_1";
+const output = "_output_84w8t_57";
+const localStyles = {
+  sliderWrap,
+  slider,
+  output
+};
+export {
+  localStyles as default,
+  output,
+  slider,
+  sliderWrap
+};

package/dist/fields/SwitchField/SwitchField.cjs

@@ -0,0 +1,65 @@
+"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 SwitchField_module = require("./SwitchField.module.css.cjs");
+function SwitchField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  form
+}) {
+  const checked = Boolean(value);
+  const handleChange = react.useCallback(
+    (e) => {
+      if (readOnly) return;
+      form.setFieldValue(name, e.target.checked);
+    },
+    [form, name, readOnly]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldUtils.cx(fieldBase_module.default.inlineWrapper, SwitchField_module.default.switchLabel), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: SwitchField_module.default.switchTrack, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            id: name,
+            name,
+            checked,
+            onChange: handleChange,
+            onBlur,
+            disabled,
+            "aria-checked": checked,
+            "aria-invalid": error || void 0,
+            "aria-describedby": helperText ? fieldUtils.helperId(name) : void 0,
+            "aria-required": required || void 0,
+            className: SwitchField_module.default.switchInput
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: SwitchField_module.default.switchThumb, "aria-hidden": "true" })
+      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inlineLabel, children: label })
+    ] }),
+    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.SwitchField = SwitchField;

package/dist/fields/SwitchField/SwitchField.d.ts

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

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

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

package/dist/fields/SwitchField/SwitchField.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import styles from "../fieldBase.module.css.js";
+import { helperId, cx } from "../fieldUtils.js";
+import localStyles from "./SwitchField.module.css.js";
+function SwitchField({
+  name,
+  value,
+  onChange: _onChange,
+  onBlur,
+  error,
+  helperText,
+  label,
+  disabled,
+  readOnly,
+  required,
+  form
+}) {
+  const checked = Boolean(value);
+  const handleChange = useCallback(
+    (e) => {
+      if (readOnly) return;
+      form.setFieldValue(name, e.target.checked);
+    },
+    [form, name, readOnly]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs("label", { className: cx(styles.inlineWrapper, localStyles.switchLabel), children: [
+      /* @__PURE__ */ jsxs("span", { className: localStyles.switchTrack, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            id: name,
+            name,
+            checked,
+            onChange: handleChange,
+            onBlur,
+            disabled,
+            "aria-checked": checked,
+            "aria-invalid": error || void 0,
+            "aria-describedby": helperText ? helperId(name) : void 0,
+            "aria-required": required || void 0,
+            className: localStyles.switchInput
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: localStyles.switchThumb, "aria-hidden": "true" })
+      ] }),
+      label && /* @__PURE__ */ jsx("span", { className: styles.inlineLabel, children: label })
+    ] }),
+    helperText && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: helperId(name),
+        className: cx(styles.helperText, error && styles.helperTextError),
+        role: error ? "alert" : void 0,
+        children: helperText
+      }
+    )
+  ] });
+}
+export {
+  SwitchField
+};

package/dist/fields/SwitchField/SwitchField.module.css

@@ -0,0 +1,79 @@
+._switchLabel_1itxk_1 {
+  cursor: pointer;
+}
+
+._switchTrack_1itxk_5 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 24px;
+  background-color: var(--axen-color-border);
+  border-radius: var(--axen-border-radius-pill);
+  transition: background-color var(--axen-transition-fast);
+  flex-shrink: 0;
+}
+
+._switchInput_1itxk_17 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+._switchInput_1itxk_17:checked + ._switchThumb_1itxk_27 {
+  transform: translateX(20px);
+}
+
+._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {
+  transform: translateX(20px);
+}
+
+._switchTrack_1itxk_5:has(._switchInput_1itxk_17:checked) {
+  background-color: var(--axen-color-primary);
+}
+
+._switchInput_1itxk_17:focus-visible ~ ._switchThumb_1itxk_27 {
+  box-shadow: var(--axen-shadow-focus);
+}
+
+._switchInput_1itxk_17:disabled {
+  cursor: not-allowed;
+}
+
+._switchTrack_1itxk_5:has(._switchInput_1itxk_17:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._switchThumb_1itxk_27 {
+  position: absolute;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: var(--axen-color-bg);
+  border-radius: 50%;
+  box-shadow: var(--axen-shadow-sm);
+  transition: transform var(--axen-transition-fast);
+  pointer-events: none;
+}
+
+/* Mobile: larger touch target */
+@media (max-width: 599px) {
+  ._switchTrack_1itxk_5 {
+    width: 52px;
+    height: 28px;
+  }
+
+  ._switchThumb_1itxk_27 {
+    width: 24px;
+    height: 24px;
+  }
+
+  ._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {
+    transform: translateX(24px);
+  }
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const switchLabel = "_switchLabel_1itxk_1";
+const switchTrack = "_switchTrack_1itxk_5";
+const switchInput = "_switchInput_1itxk_17";
+const switchThumb = "_switchThumb_1itxk_27";
+const localStyles = {
+  switchLabel,
+  switchTrack,
+  switchInput,
+  switchThumb
+};
+exports.default = localStyles;
+exports.switchInput = switchInput;
+exports.switchLabel = switchLabel;
+exports.switchThumb = switchThumb;
+exports.switchTrack = switchTrack;

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

@@ -0,0 +1,17 @@
+const switchLabel = "_switchLabel_1itxk_1";
+const switchTrack = "_switchTrack_1itxk_5";
+const switchInput = "_switchInput_1itxk_17";
+const switchThumb = "_switchThumb_1itxk_27";
+const localStyles = {
+  switchLabel,
+  switchTrack,
+  switchInput,
+  switchThumb
+};
+export {
+  localStyles as default,
+  switchInput,
+  switchLabel,
+  switchThumb,
+  switchTrack
+};

package/dist/fields/TextField/TextField.cjs

@@ -0,0 +1,56 @@
+"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 TextField({
+  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: "text",
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        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.TextField = TextField;

package/dist/fields/TextField/TextField.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/fields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,SAAS,CAAC,EACxB,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,2CAqC/B"}

package/dist/fields/TextField/TextField.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "../fieldBase.module.css.js";
+import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+function TextField({
+  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: "text",
+        name,
+        value: value ?? "",
+        onChange,
+        onBlur,
+        placeholder,
+        disabled,
+        readOnly,
+        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 {
+  TextField
+};