@axenstudio/axen-form 0.1.10 → 0.1.12

package/dist/fields/DateField/DatePicker.module.css.cjs

@@ -0,0 +1,62 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   axen-form Date Picker\n   Custom calendar dropdown for DateField\n   Styled to match TimePicker popup\n   ═══════════════════════════════════════════════ */\n\n._overlay_1cdkj_7 {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--axen-z-dropdown, 100) - 1);\n}\n\n._picker_1cdkj_13 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--axen-z-dropdown, 100);\n  margin-top: var(--axen-space-xs, 0.25rem);\n  background: var(--axen-color-bg, #ffffff);\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius, 8px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  padding: var(--axen-space-sm, 0.5rem);\n  min-width: 280px;\n  user-select: none;\n}\n\n/* ── Header: nav arrows + month/year ─────────── */\n._header_1cdkj_29 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: var(--axen-space-sm, 0.5rem);\n}\n\n._navBtn_1cdkj_36 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: transparent;\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-lg, 1.125rem);\n  cursor: pointer;\n  padding: 0;\n}\n\n._navBtn_1cdkj_36:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._navBtn_1cdkj_36:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._headerTitle_1cdkj_60 {\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-weight: var(--axen-font-weight-medium, 500);\n  color: var(--axen-color-text, #1a1a1a);\n}\n\n/* ── Weekday headers ─────────────────────────── */\n._weekdays_1cdkj_67 {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0;\n  padding-bottom: var(--axen-space-xs, 0.25rem);\n}\n\n._weekday_1cdkj_67 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  font-size: var(--axen-font-size-xs, 0.75rem);\n  font-weight: var(--axen-font-weight-medium, 500);\n  color: var(--axen-color-text-secondary, #666666);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* ── Calendar grid ───────────────────────────── */\n._grid_1cdkj_87 {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n}\n\n/* ── Day cell ────────────────────────────────── */\n._day_1cdkj_94 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: transparent;\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition: background-color var(--axen-transition-fast, 150ms ease);\n  padding: 0;\n  margin: 0 auto;\n}\n\n._day_1cdkj_94:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._day_1cdkj_94:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._dayOutside_1cdkj_121 {\n  color: var(--axen-color-text-disabled, #9e9e9e);\n}\n\n._dayToday_1cdkj_125 {\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n}\n\n._daySelected_1cdkj_129 {\n  background-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n  font-weight: var(--axen-font-weight-medium, 500);\n}\n\n._daySelected_1cdkj_129:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n}\n\n._dayWeekend_1cdkj_139 {\n  color: var(--axen-color-error, #d32f2f);\n}\n\n._dayWeekend_1cdkj_139._dayOutside_1cdkj_121 {\n  color: rgba(211, 47, 47, 0.4);\n}\n\n._dayWeekend_1cdkj_139._daySelected_1cdkj_129 {\n  color: #ffffff;\n}\n\n/* ── Footer actions ──────────────────────────── */\n._footer_1cdkj_152 {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--axen-space-sm, 0.5rem);\n  padding-top: var(--axen-space-sm, 0.5rem);\n  margin-top: var(--axen-space-sm, 0.5rem);\n  border-top: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n}\n\n._footerBtn_1cdkj_161 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: var(--axen-color-bg, #ffffff);\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition:\n    background-color var(--axen-transition-fast, 150ms ease),\n    border-color var(--axen-transition-fast, 150ms ease);\n  padding: 0 var(--axen-space-sm, 0.5rem);\n}\n\n._footerBtn_1cdkj_161:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._footerBtn_1cdkj_161:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const overlay = "_overlay_1cdkj_7";
+const picker = "_picker_1cdkj_13";
+const header = "_header_1cdkj_29";
+const navBtn = "_navBtn_1cdkj_36";
+const headerTitle = "_headerTitle_1cdkj_60";
+const weekdays = "_weekdays_1cdkj_67";
+const weekday = "_weekday_1cdkj_67";
+const grid = "_grid_1cdkj_87";
+const day = "_day_1cdkj_94";
+const dayOutside = "_dayOutside_1cdkj_121";
+const dayToday = "_dayToday_1cdkj_125";
+const daySelected = "_daySelected_1cdkj_129";
+const dayWeekend = "_dayWeekend_1cdkj_139";
+const footer = "_footer_1cdkj_152";
+const footerBtn = "_footerBtn_1cdkj_161";
+const s = {
+  overlay,
+  picker,
+  header,
+  navBtn,
+  headerTitle,
+  weekdays,
+  weekday,
+  grid,
+  day,
+  dayOutside,
+  dayToday,
+  daySelected,
+  dayWeekend,
+  footer,
+  footerBtn
+};
+exports.day = day;
+exports.dayOutside = dayOutside;
+exports.daySelected = daySelected;
+exports.dayToday = dayToday;
+exports.dayWeekend = dayWeekend;
+exports.default = s;
+exports.footer = footer;
+exports.footerBtn = footerBtn;
+exports.grid = grid;
+exports.header = header;
+exports.headerTitle = headerTitle;
+exports.navBtn = navBtn;
+exports.overlay = overlay;
+exports.picker = picker;
+exports.weekday = weekday;
+exports.weekdays = weekdays;

package/dist/fields/DateField/DatePicker.module.css.js

@@ -0,0 +1,62 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   axen-form Date Picker\n   Custom calendar dropdown for DateField\n   Styled to match TimePicker popup\n   ═══════════════════════════════════════════════ */\n\n._overlay_1cdkj_7 {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--axen-z-dropdown, 100) - 1);\n}\n\n._picker_1cdkj_13 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--axen-z-dropdown, 100);\n  margin-top: var(--axen-space-xs, 0.25rem);\n  background: var(--axen-color-bg, #ffffff);\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius, 8px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  padding: var(--axen-space-sm, 0.5rem);\n  min-width: 280px;\n  user-select: none;\n}\n\n/* ── Header: nav arrows + month/year ─────────── */\n._header_1cdkj_29 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: var(--axen-space-sm, 0.5rem);\n}\n\n._navBtn_1cdkj_36 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: transparent;\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-lg, 1.125rem);\n  cursor: pointer;\n  padding: 0;\n}\n\n._navBtn_1cdkj_36:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._navBtn_1cdkj_36:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._headerTitle_1cdkj_60 {\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-weight: var(--axen-font-weight-medium, 500);\n  color: var(--axen-color-text, #1a1a1a);\n}\n\n/* ── Weekday headers ─────────────────────────── */\n._weekdays_1cdkj_67 {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0;\n  padding-bottom: var(--axen-space-xs, 0.25rem);\n}\n\n._weekday_1cdkj_67 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 28px;\n  font-size: var(--axen-font-size-xs, 0.75rem);\n  font-weight: var(--axen-font-weight-medium, 500);\n  color: var(--axen-color-text-secondary, #666666);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* ── Calendar grid ───────────────────────────── */\n._grid_1cdkj_87 {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n}\n\n/* ── Day cell ────────────────────────────────── */\n._day_1cdkj_94 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: transparent;\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition: background-color var(--axen-transition-fast, 150ms ease);\n  padding: 0;\n  margin: 0 auto;\n}\n\n._day_1cdkj_94:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._day_1cdkj_94:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._dayOutside_1cdkj_121 {\n  color: var(--axen-color-text-disabled, #9e9e9e);\n}\n\n._dayToday_1cdkj_125 {\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n}\n\n._daySelected_1cdkj_129 {\n  background-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n  font-weight: var(--axen-font-weight-medium, 500);\n}\n\n._daySelected_1cdkj_129:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n}\n\n._dayWeekend_1cdkj_139 {\n  color: var(--axen-color-error, #d32f2f);\n}\n\n._dayWeekend_1cdkj_139._dayOutside_1cdkj_121 {\n  color: rgba(211, 47, 47, 0.4);\n}\n\n._dayWeekend_1cdkj_139._daySelected_1cdkj_129 {\n  color: #ffffff;\n}\n\n/* ── Footer actions ──────────────────────────── */\n._footer_1cdkj_152 {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--axen-space-sm, 0.5rem);\n  padding-top: var(--axen-space-sm, 0.5rem);\n  margin-top: var(--axen-space-sm, 0.5rem);\n  border-top: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n}\n\n._footerBtn_1cdkj_161 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: var(--axen-color-bg, #ffffff);\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition:\n    background-color var(--axen-transition-fast, 150ms ease),\n    border-color var(--axen-transition-fast, 150ms ease);\n  padding: 0 var(--axen-space-sm, 0.5rem);\n}\n\n._footerBtn_1cdkj_161:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._footerBtn_1cdkj_161:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const overlay = "_overlay_1cdkj_7";
+const picker = "_picker_1cdkj_13";
+const header = "_header_1cdkj_29";
+const navBtn = "_navBtn_1cdkj_36";
+const headerTitle = "_headerTitle_1cdkj_60";
+const weekdays = "_weekdays_1cdkj_67";
+const weekday = "_weekday_1cdkj_67";
+const grid = "_grid_1cdkj_87";
+const day = "_day_1cdkj_94";
+const dayOutside = "_dayOutside_1cdkj_121";
+const dayToday = "_dayToday_1cdkj_125";
+const daySelected = "_daySelected_1cdkj_129";
+const dayWeekend = "_dayWeekend_1cdkj_139";
+const footer = "_footer_1cdkj_152";
+const footerBtn = "_footerBtn_1cdkj_161";
+const s = {
+  overlay,
+  picker,
+  header,
+  navBtn,
+  headerTitle,
+  weekdays,
+  weekday,
+  grid,
+  day,
+  dayOutside,
+  dayToday,
+  daySelected,
+  dayWeekend,
+  footer,
+  footerBtn
+};
+export {
+  day,
+  dayOutside,
+  daySelected,
+  dayToday,
+  dayWeekend,
+  s as default,
+  footer,
+  footerBtn,
+  grid,
+  header,
+  headerTitle,
+  navBtn,
+  overlay,
+  picker,
+  weekday,
+  weekdays
+};

package/dist/fields/DateTimeField/DateTimeField.cjs

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const dateUtils = require("../../core/dateUtils.cjs");
+const DatePicker = require("../DateField/DatePicker.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const icons = require("../icons.cjs");
 const iconUtils = require("../iconUtils.cjs");
+const TimePicker = require("../TimeField/TimePicker.cjs");
 function DateTimeField({
   name,
   value,
@@ -21,16 +25,80 @@ function DateTimeField({
   max,
   locale,
   ampm,
-  icon
+  icon,
+  form,
+  showSeconds
 }) {
+  const [isDateOpen, setIsDateOpen] = react.useState(false);
+  const [isTimeOpen, setIsTimeOpen] = react.useState(false);
+  const wrapperRef = react.useRef(null);
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
   const resolvedIcon = iconUtils.resolveFieldIcon(icon, "datetime");
+  const resolvedShowSeconds = showSeconds === true;
   const dtValue = typeof value === "string" ? value : "";
   const displayText = dtValue ? dateUtils.formatDateTimeLocale(dtValue, resolvedLocale, ampm) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const openDatePicker = react.useCallback(() => {
+    if (!disabled && !readOnly) {
+      setIsTimeOpen(false);
+      setIsDateOpen(true);
+    }
+  }, [disabled, readOnly]);
+  const openTimePicker = react.useCallback(() => {
+    if (!disabled && !readOnly) {
+      setIsDateOpen(false);
+      setIsTimeOpen(true);
+    }
+  }, [disabled, readOnly]);
+  const handleDateApply = react.useCallback(
+    (isoDate) => {
+      const timePart = dtValue.includes("T") ? dtValue.split("T")[1] ?? "" : "";
+      if (isoDate === "") {
+        form.setFieldValue(name, "");
+      } else {
+        const newValue = timePart ? `${isoDate}T${timePart}` : `${isoDate}T00:00`;
+        form.setFieldValue(name, newValue);
+      }
+      setIsDateOpen(false);
+    },
+    [form, name, dtValue]
+  );
+  const handleTimeApply = react.useCallback(
+    (isoTime) => {
+      const datePart = dtValue.includes("T") ? dtValue.split("T")[0] : "";
+      const fallbackDate = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+      const newValue = `${datePart || fallbackDate}T${isoTime}`;
+      form.setFieldValue(name, newValue);
+      setIsTimeOpen(false);
+    },
+    [form, name, dtValue]
+  );
+  const handleDateClose = react.useCallback(() => {
+    setIsDateOpen(false);
+  }, []);
+  const handleTimeClose = react.useCallback(() => {
+    setIsTimeOpen(false);
+  }, []);
+  const handleBlur = react.useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsDateOpen(false);
+          setIsTimeOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
+  const currentDate = dtValue.includes("T") ? dtValue.split("T")[0] ?? "" : "";
+  const currentTime = dtValue.includes("T") ? dtValue.split("T")[1] ?? "" : "";
+  const minDate = (min == null ? void 0 : min.includes("T")) ? min.split("T")[0] : min;
+  const maxDate = (max == null ? void 0 : max.includes("T")) ? max.split("T")[0] : max;
   const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -39,17 +107,22 @@ function DateTimeField({
       name,
       value: dtValue,
       onChange: handleChange,
-      onBlur,
+      onBlur: handleBlur,
       placeholder,
       disabled,
       readOnly,
       min,
       max,
       lang: resolvedLocale,
-      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+      className: fieldUtils.cx(
+        fieldBase_module.default.input,
+        resolvedIcon && fieldBase_module.default.inputWithIcon,
+        fieldBase_module.default.inputWithPicker,
+        error && fieldBase_module.default.inputError
+      )
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
@@ -59,10 +132,55 @@ function DateTimeField({
         children: label
       }
     ),
-    resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
-      inputEl
-    ] }) : inputEl,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
+      resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: fieldBase_module.default.fieldIconClickable,
+          onClick: openDatePicker,
+          disabled: disabled || readOnly,
+          "aria-label": "Open date picker",
+          tabIndex: -1,
+          children: resolvedIcon
+        }
+      ),
+      inputEl,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: fieldBase_module.default.pickerTrigger,
+          onClick: openTimePicker,
+          disabled: disabled || readOnly,
+          "aria-label": "Open time picker",
+          tabIndex: -1,
+          children: icons.ClockIcon
+        }
+      )
+    ] }),
+    isDateOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker.DatePicker,
+      {
+        value: currentDate,
+        min: minDate,
+        max: maxDate,
+        pickerId: `${name}-datepicker`,
+        onApply: handleDateApply,
+        onClose: handleDateClose
+      }
+    ),
+    isTimeOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      TimePicker.TimePicker,
+      {
+        value: currentTime,
+        showSeconds: resolvedShowSeconds,
+        ampm: ampm === true,
+        pickerId: `${name}-timepicker`,
+        onApply: handleTimeApply,
+        onClose: handleTimeClose
+      }
+    ),
     displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",

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

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

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

@@ -1 +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;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,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,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,2CAiEA"}
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD,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,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,GACZ,EAAE,QAAQ,CACT,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CACF,2CAyLA"}

package/dist/fields/DateTimeField/DateTimeField.js

@@ -1,8 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
 import { formatDateTimeLocale, getDefaultLocale } from "../../core/dateUtils.js";
+import { DatePicker } from "../DateField/DatePicker.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { ClockIcon } from "../icons.js";
 import { resolveFieldIcon } from "../iconUtils.js";
+import { TimePicker } from "../TimeField/TimePicker.js";
 function DateTimeField({
   name,
   value,
@@ -19,16 +23,80 @@ function DateTimeField({
   max,
   locale,
   ampm,
-  icon
+  icon,
+  form,
+  showSeconds
 }) {
+  const [isDateOpen, setIsDateOpen] = useState(false);
+  const [isTimeOpen, setIsTimeOpen] = useState(false);
+  const wrapperRef = useRef(null);
   const aria = ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? getDefaultLocale();
   const resolvedIcon = resolveFieldIcon(icon, "datetime");
+  const resolvedShowSeconds = showSeconds === true;
   const dtValue = typeof value === "string" ? value : "";
   const displayText = dtValue ? formatDateTimeLocale(dtValue, resolvedLocale, ampm) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const openDatePicker = useCallback(() => {
+    if (!disabled && !readOnly) {
+      setIsTimeOpen(false);
+      setIsDateOpen(true);
+    }
+  }, [disabled, readOnly]);
+  const openTimePicker = useCallback(() => {
+    if (!disabled && !readOnly) {
+      setIsDateOpen(false);
+      setIsTimeOpen(true);
+    }
+  }, [disabled, readOnly]);
+  const handleDateApply = useCallback(
+    (isoDate) => {
+      const timePart = dtValue.includes("T") ? dtValue.split("T")[1] ?? "" : "";
+      if (isoDate === "") {
+        form.setFieldValue(name, "");
+      } else {
+        const newValue = timePart ? `${isoDate}T${timePart}` : `${isoDate}T00:00`;
+        form.setFieldValue(name, newValue);
+      }
+      setIsDateOpen(false);
+    },
+    [form, name, dtValue]
+  );
+  const handleTimeApply = useCallback(
+    (isoTime) => {
+      const datePart = dtValue.includes("T") ? dtValue.split("T")[0] : "";
+      const fallbackDate = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+      const newValue = `${datePart || fallbackDate}T${isoTime}`;
+      form.setFieldValue(name, newValue);
+      setIsTimeOpen(false);
+    },
+    [form, name, dtValue]
+  );
+  const handleDateClose = useCallback(() => {
+    setIsDateOpen(false);
+  }, []);
+  const handleTimeClose = useCallback(() => {
+    setIsTimeOpen(false);
+  }, []);
+  const handleBlur = useCallback(
+    (e) => {
+      setTimeout(() => {
+        var _a;
+        if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+          setIsDateOpen(false);
+          setIsTimeOpen(false);
+          onBlur(e);
+        }
+      }, 150);
+    },
+    [onBlur]
+  );
+  const currentDate = dtValue.includes("T") ? dtValue.split("T")[0] ?? "" : "";
+  const currentTime = dtValue.includes("T") ? dtValue.split("T")[1] ?? "" : "";
+  const minDate = (min == null ? void 0 : min.includes("T")) ? min.split("T")[0] : min;
+  const maxDate = (max == null ? void 0 : max.includes("T")) ? max.split("T")[0] : max;
   const inputEl = /* @__PURE__ */ jsx(
     "input",
     {
@@ -37,17 +105,22 @@ function DateTimeField({
       name,
       value: dtValue,
       onChange: handleChange,
-      onBlur,
+      onBlur: handleBlur,
       placeholder,
       disabled,
       readOnly,
       min,
       max,
       lang: resolvedLocale,
-      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+      className: cx(
+        styles.input,
+        resolvedIcon && styles.inputWithIcon,
+        styles.inputWithPicker,
+        error && styles.inputError
+      )
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [
     label && /* @__PURE__ */ jsx(
       "label",
       {
@@ -57,10 +130,55 @@ function DateTimeField({
         children: label
       }
     ),
-    resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
-      /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
-      inputEl
-    ] }) : inputEl,
+    /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
+      resolvedIcon && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.fieldIconClickable,
+          onClick: openDatePicker,
+          disabled: disabled || readOnly,
+          "aria-label": "Open date picker",
+          tabIndex: -1,
+          children: resolvedIcon
+        }
+      ),
+      inputEl,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.pickerTrigger,
+          onClick: openTimePicker,
+          disabled: disabled || readOnly,
+          "aria-label": "Open time picker",
+          tabIndex: -1,
+          children: ClockIcon
+        }
+      )
+    ] }),
+    isDateOpen && /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value: currentDate,
+        min: minDate,
+        max: maxDate,
+        pickerId: `${name}-datepicker`,
+        onApply: handleDateApply,
+        onClose: handleDateClose
+      }
+    ),
+    isTimeOpen && /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        value: currentTime,
+        showSeconds: resolvedShowSeconds,
+        ampm: ampm === true,
+        pickerId: `${name}-timepicker`,
+        onApply: handleTimeApply,
+        onClose: handleTimeClose
+      }
+    ),
     displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsx(
       "span",

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

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._inputWrap_1nxa7_1 {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n._passwordInput_1nxa7_7 {\n  padding-right: 2.5rem;\n}\n\n._toggle_1nxa7_11 {\n  position: absolute;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--axen-color-text-secondary);\n  font-size: var(--axen-font-size-lg);\n  border-radius: var(--axen-border-radius-sm);\n  transition: color var(--axen-transition-fast);\n}\n\n._toggle_1nxa7_11:hover:not(:disabled) {\n  color: var(--axen-color-text);\n}\n\n._toggle_1nxa7_11:focus-visible {\n  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);\n  outline-offset: var(--axen-focus-ring-offset);\n}\n\n._toggle_1nxa7_11:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const inputWrap = "_inputWrap_1nxa7_1";

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

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._inputWrap_1nxa7_1 {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n._passwordInput_1nxa7_7 {\n  padding-right: 2.5rem;\n}\n\n._toggle_1nxa7_11 {\n  position: absolute;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  color: var(--axen-color-text-secondary);\n  font-size: var(--axen-font-size-lg);\n  border-radius: var(--axen-border-radius-sm);\n  transition: color var(--axen-transition-fast);\n}\n\n._toggle_1nxa7_11:hover:not(:disabled) {\n  color: var(--axen-color-text);\n}\n\n._toggle_1nxa7_11:focus-visible {\n  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);\n  outline-offset: var(--axen-focus-ring-offset);\n}\n\n._toggle_1nxa7_11:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 const inputWrap = "_inputWrap_1nxa7_1";
 const passwordInput = "_passwordInput_1nxa7_7";
 const toggle = "_toggle_1nxa7_11";

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

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._radioGroup_1nz5i_1 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--axen-space-xs);\n}\n\n._radioLabel_1nz5i_7 {\n  cursor: pointer;\n}\n\n._radio_1nz5i_1 {\n  width: 20px;\n  height: 20px;\n  margin: 0;\n  cursor: pointer;\n  accent-color: var(--axen-color-primary);\n}\n\n._radio_1nz5i_1:focus-visible {\n  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);\n  outline-offset: var(--axen-focus-ring-offset);\n}\n\n._radio_1nz5i_1:disabled {\n  cursor: not-allowed;\n}\n\n/* Mobile: larger touch target */\n@media (max-width: 599px) {\n  ._radio_1nz5i_1 {\n    width: 24px;\n    height: 24px;\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const radioGroup = "_radioGroup_1nz5i_1";

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

@@ -1,3 +1,15 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._radioGroup_1nz5i_1 {\n  display: flex;\n  flex-direction: column;\n  gap: var(--axen-space-xs);\n}\n\n._radioLabel_1nz5i_7 {\n  cursor: pointer;\n}\n\n._radio_1nz5i_1 {\n  width: 20px;\n  height: 20px;\n  margin: 0;\n  cursor: pointer;\n  accent-color: var(--axen-color-primary);\n}\n\n._radio_1nz5i_1:focus-visible {\n  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);\n  outline-offset: var(--axen-focus-ring-offset);\n}\n\n._radio_1nz5i_1:disabled {\n  cursor: not-allowed;\n}\n\n/* Mobile: larger touch target */\n@media (max-width: 599px) {\n  ._radio_1nz5i_1 {\n    width: 24px;\n    height: 24px;\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 const radioGroup = "_radioGroup_1nz5i_1";
 const radioLabel = "_radioLabel_1nz5i_7";
 const radio = "_radio_1nz5i_1";

package/dist/fields/SelectField/SelectField.cjs

@@ -37,7 +37,12 @@ function SelectField({
         onChange,
         onBlur,
         disabled: disabled || readOnly,
-        className: fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.select, error && fieldBase_module.default.inputError),
+        className: fieldUtils.cx(
+          fieldBase_module.default.input,
+          fieldBase_module.default.select,
+          error && fieldBase_module.default.inputError,
+          !value && fieldBase_module.default.selectPlaceholder
+        ),
         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))

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

@@ -1 +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"}
+{"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,2CAkD/B"}

package/dist/fields/SelectField/SelectField.js

@@ -35,7 +35,12 @@ function SelectField({
         onChange,
         onBlur,
         disabled: disabled || readOnly,
-        className: cx(styles.input, styles.select, error && styles.inputError),
+        className: cx(
+          styles.input,
+          styles.select,
+          error && styles.inputError,
+          !value && styles.selectPlaceholder
+        ),
         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))

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

@@ -1,8 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._sliderWrap_1x3d4_1 {\n  display: flex;\n  align-items: center;\n  gap: var(--axen-space-md);\n  min-height: var(--axen-field-min-height);\n}\n\n._slider_1x3d4_1 {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  height: 6px;\n  appearance: none;\n  background: var(--axen-color-border);\n  border-radius: var(--axen-border-radius-pill);\n  outline: none;\n  cursor: pointer;\n  transition: background var(--axen-transition-fast);\n}\n\n._slider_1x3d4_1::-webkit-slider-thumb {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--axen-color-primary);\n  border: 2px solid var(--axen-color-bg);\n  box-shadow: var(--axen-shadow-sm);\n  cursor: pointer;\n  transition:\n    background var(--axen-transition-fast),\n    transform var(--axen-transition-fast);\n}\n\n._slider_1x3d4_1::-webkit-slider-thumb:hover {\n  background: var(--axen-color-primary-hover);\n  transform: scale(1.15);\n}\n\n._slider_1x3d4_1:focus-visible::-webkit-slider-thumb {\n  box-shadow: var(--axen-shadow-focus);\n}\n\n._slider_1x3d4_1::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--axen-color-primary);\n  border: 2px solid var(--axen-color-bg);\n  box-shadow: var(--axen-shadow-sm);\n  cursor: pointer;\n}\n\n._slider_1x3d4_1:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n._output_1x3d4_59 {\n  min-width: 2.5em;\n  text-align: center;\n  font-size: var(--axen-font-size-sm);\n  font-weight: var(--axen-font-weight-medium);\n  color: var(--axen-color-text);\n}\n\n/* Touch target for mobile */\n@media (max-width: 599px) {\n  ._slider_1x3d4_1::-webkit-slider-thumb {\n    width: 28px;\n    height: 28px;\n  }\n\n  ._slider_1x3d4_1::-moz-range-thumb {\n    width: 28px;\n    height: 28px;\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "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 sliderWrap = "_sliderWrap_1x3d4_1";
+const slider = "_slider_1x3d4_1";
+const output = "_output_1x3d4_59";
 const localStyles = {
   sliderWrap,
   slider,