@axenstudio/axen-form 0.1.10 → 0.1.12

package/dist/fields/TimeField/TimePicker.js

@@ -0,0 +1,182 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import s from "./TimePicker.module.css.js";
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function parseTime(iso) {
+  if (!iso) {
+    const now = /* @__PURE__ */ new Date();
+    return { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() };
+  }
+  const parts = iso.split(":").map(Number);
+  return {
+    h: Number.isFinite(parts[0]) ? parts[0] : 0,
+    m: Number.isFinite(parts[1]) ? parts[1] : 0,
+    s: Number.isFinite(parts[2]) ? parts[2] : 0
+  };
+}
+function to12h(h24) {
+  const period = h24 >= 12 ? "PM" : "AM";
+  const h12 = h24 % 12 || 12;
+  return { h12, period };
+}
+function to24h(h12, period) {
+  if (period === "AM") return h12 === 12 ? 0 : h12;
+  return h12 === 12 ? 12 : h12 + 12;
+}
+function range(count) {
+  return Array.from({ length: count }, (_, i) => i);
+}
+function Column({ label, items, selected, onSelect, ariaLabel }) {
+  const columnRef = useRef(null);
+  const selectedRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+  }, [selected]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: s.columnLabel, children: label }),
+    /* @__PURE__ */ jsx("div", { className: s.column, ref: columnRef, role: "radiogroup", "aria-label": ariaLabel, children: items.map((n) => {
+      const isSelected = n === selected;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: isSelected ? selectedRef : void 0,
+          type: "button",
+          role: "radio",
+          "aria-checked": isSelected,
+          className: `${s.cell} ${isSelected ? s.cellSelected : ""}`,
+          onClick: () => onSelect(n),
+          children: pad2(n)
+        },
+        n
+      );
+    }) })
+  ] });
+}
+function TimePicker({
+  value,
+  showSeconds,
+  ampm,
+  pickerId,
+  onApply,
+  onClose
+}) {
+  const initial = parseTime(value);
+  const [hour24, setHour24] = useState(initial.h);
+  const [minute, setMinute] = useState(initial.m);
+  const [second, setSecond] = useState(initial.s);
+  const [period, setPeriod] = useState(() => to12h(initial.h).period);
+  const pickerRef = useRef(null);
+  const displayHour = ampm ? to12h(hour24).h12 : hour24;
+  const hourItems = ampm ? range(12).map((i) => i + 1) : range(24);
+  const handleHourSelect = useCallback(
+    (h) => {
+      if (ampm) {
+        setHour24(to24h(h, period));
+      } else {
+        setHour24(h);
+      }
+    },
+    [ampm, period]
+  );
+  const handlePeriodToggle = useCallback(
+    (p) => {
+      setPeriod(p);
+      const h12 = to12h(hour24).h12;
+      setHour24(to24h(h12, p));
+    },
+    [hour24]
+  );
+  const handleNow = useCallback(() => {
+    const now = /* @__PURE__ */ new Date();
+    setHour24(now.getHours());
+    setMinute(now.getMinutes());
+    setSecond(now.getSeconds());
+    setPeriod(now.getHours() >= 12 ? "PM" : "AM");
+  }, []);
+  const handleApply = useCallback(() => {
+    const parts = [pad2(hour24), pad2(minute)];
+    if (showSeconds) parts.push(pad2(second));
+    onApply(parts.join(":"));
+  }, [hour24, minute, second, showSeconds, onApply]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: s.overlay, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: s.picker, ref: pickerRef, id: pickerId, "aria-label": "Time picker", children: [
+      /* @__PURE__ */ jsxs("div", { className: s.columns, children: [
+        /* @__PURE__ */ jsx(
+          Column,
+          {
+            label: "HH",
+            items: hourItems,
+            selected: displayHour,
+            onSelect: handleHourSelect,
+            ariaLabel: "Hours"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: s.separator, "aria-hidden": "true", children: ":" }),
+        /* @__PURE__ */ jsx(
+          Column,
+          {
+            label: "MM",
+            items: range(60),
+            selected: minute,
+            onSelect: setMinute,
+            ariaLabel: "Minutes"
+          }
+        ),
+        showSeconds && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: s.separator, "aria-hidden": "true", children: ":" }),
+          /* @__PURE__ */ jsx(
+            Column,
+            {
+              label: "SS",
+              items: range(60),
+              selected: second,
+              onSelect: setSecond,
+              ariaLabel: "Seconds"
+            }
+          )
+        ] }),
+        ampm && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: s.columnLabel, children: "AP" }),
+          /* @__PURE__ */ jsx("div", { className: s.column, role: "radiogroup", "aria-label": "AM/PM", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": p === period,
+              className: `${s.cell} ${p === period ? s.cellSelected : ""}`,
+              onClick: () => handlePeriodToggle(p),
+              children: p
+            },
+            p
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: s.footerBtn, onClick: handleNow, children: "Now" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${s.footerBtn} ${s.footerBtnPrimary}`,
+            onClick: handleApply,
+            children: "Apply"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  TimePicker
+};

package/dist/fields/TimeField/TimePicker.module.css.cjs

@@ -0,0 +1,50 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   axen-form Time Picker\n   Custom dropdown picker for TimeField\n   ═══════════════════════════════════════════════ */\n\n._overlay_1qexq_6 {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--axen-z-dropdown, 100) - 1);\n}\n\n._picker_1qexq_12 {\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: 200px;\n}\n\n/* ── Column layout ───────────────────────────── */\n._columns_1qexq_27 {\n  display: flex;\n  gap: var(--axen-space-xs, 0.25rem);\n  justify-content: center;\n}\n\n._column_1qexq_27 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  max-height: 200px;\n  overflow-y: auto;\n  padding: var(--axen-space-xs, 0.25rem) 0;\n  scrollbar-width: thin;\n}\n\n._column_1qexq_27::-webkit-scrollbar {\n  width: 4px;\n}\n\n._column_1qexq_27::-webkit-scrollbar-thumb {\n  background: var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-pill, 9999px);\n}\n\n._columnLabel_1qexq_53 {\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  padding-bottom: var(--axen-space-xs, 0.25rem);\n  flex-shrink: 0;\n}\n\n/* ── Individual cell ─────────────────────────── */\n._cell_1qexq_64 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\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-md, 1rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition: background-color var(--axen-transition-fast, 150ms ease);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n._cell_1qexq_64:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._cell_1qexq_64:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._cellSelected_1qexq_91 {\n  background-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n  font-weight: var(--axen-font-weight-medium, 500);\n}\n\n._cellSelected_1qexq_91:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n}\n\n/* ── Separator between columns ───────────────── */\n._separator_1qexq_102 {\n  display: flex;\n  align-items: center;\n  padding: 0 2px;\n  font-size: var(--axen-font-size-lg, 1.125rem);\n  font-weight: var(--axen-font-weight-bold, 600);\n  color: var(--axen-color-text-secondary, #666666);\n  user-select: none;\n  margin-top: 20px;\n}\n\n/* ── Footer actions ──────────────────────────── */\n._footer_1qexq_114 {\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_1qexq_123 {\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_1qexq_123:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._footerBtn_1qexq_123:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._footerBtnPrimary_1qexq_152 {\n  background-color: var(--axen-color-primary, #1976d2);\n  border-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n}\n\n._footerBtnPrimary_1qexq_152:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n  border-color: var(--axen-color-primary-hover, #1565c0);\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_1qexq_6";
+const picker = "_picker_1qexq_12";
+const columns = "_columns_1qexq_27";
+const column = "_column_1qexq_27";
+const columnLabel = "_columnLabel_1qexq_53";
+const cell = "_cell_1qexq_64";
+const cellSelected = "_cellSelected_1qexq_91";
+const separator = "_separator_1qexq_102";
+const footer = "_footer_1qexq_114";
+const footerBtn = "_footerBtn_1qexq_123";
+const footerBtnPrimary = "_footerBtnPrimary_1qexq_152";
+const s = {
+  overlay,
+  picker,
+  columns,
+  column,
+  columnLabel,
+  cell,
+  cellSelected,
+  separator,
+  footer,
+  footerBtn,
+  footerBtnPrimary
+};
+exports.cell = cell;
+exports.cellSelected = cellSelected;
+exports.column = column;
+exports.columnLabel = columnLabel;
+exports.columns = columns;
+exports.default = s;
+exports.footer = footer;
+exports.footerBtn = footerBtn;
+exports.footerBtnPrimary = footerBtnPrimary;
+exports.overlay = overlay;
+exports.picker = picker;
+exports.separator = separator;

package/dist/fields/TimeField/TimePicker.module.css.js

@@ -0,0 +1,50 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   axen-form Time Picker\n   Custom dropdown picker for TimeField\n   ═══════════════════════════════════════════════ */\n\n._overlay_1qexq_6 {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--axen-z-dropdown, 100) - 1);\n}\n\n._picker_1qexq_12 {\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: 200px;\n}\n\n/* ── Column layout ───────────────────────────── */\n._columns_1qexq_27 {\n  display: flex;\n  gap: var(--axen-space-xs, 0.25rem);\n  justify-content: center;\n}\n\n._column_1qexq_27 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  max-height: 200px;\n  overflow-y: auto;\n  padding: var(--axen-space-xs, 0.25rem) 0;\n  scrollbar-width: thin;\n}\n\n._column_1qexq_27::-webkit-scrollbar {\n  width: 4px;\n}\n\n._column_1qexq_27::-webkit-scrollbar-thumb {\n  background: var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-pill, 9999px);\n}\n\n._columnLabel_1qexq_53 {\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  padding-bottom: var(--axen-space-xs, 0.25rem);\n  flex-shrink: 0;\n}\n\n/* ── Individual cell ─────────────────────────── */\n._cell_1qexq_64 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\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-md, 1rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition: background-color var(--axen-transition-fast, 150ms ease);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n._cell_1qexq_64:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._cell_1qexq_64:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._cellSelected_1qexq_91 {\n  background-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n  font-weight: var(--axen-font-weight-medium, 500);\n}\n\n._cellSelected_1qexq_91:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n}\n\n/* ── Separator between columns ───────────────── */\n._separator_1qexq_102 {\n  display: flex;\n  align-items: center;\n  padding: 0 2px;\n  font-size: var(--axen-font-size-lg, 1.125rem);\n  font-weight: var(--axen-font-weight-bold, 600);\n  color: var(--axen-color-text-secondary, #666666);\n  user-select: none;\n  margin-top: 20px;\n}\n\n/* ── Footer actions ──────────────────────────── */\n._footer_1qexq_114 {\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_1qexq_123 {\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_1qexq_123:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._footerBtn_1qexq_123:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._footerBtnPrimary_1qexq_152 {\n  background-color: var(--axen-color-primary, #1976d2);\n  border-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n}\n\n._footerBtnPrimary_1qexq_152:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n  border-color: var(--axen-color-primary-hover, #1565c0);\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const overlay = "_overlay_1qexq_6";
+const picker = "_picker_1qexq_12";
+const columns = "_columns_1qexq_27";
+const column = "_column_1qexq_27";
+const columnLabel = "_columnLabel_1qexq_53";
+const cell = "_cell_1qexq_64";
+const cellSelected = "_cellSelected_1qexq_91";
+const separator = "_separator_1qexq_102";
+const footer = "_footer_1qexq_114";
+const footerBtn = "_footerBtn_1qexq_123";
+const footerBtnPrimary = "_footerBtnPrimary_1qexq_152";
+const s = {
+  overlay,
+  picker,
+  columns,
+  column,
+  columnLabel,
+  cell,
+  cellSelected,
+  separator,
+  footer,
+  footerBtn,
+  footerBtnPrimary
+};
+export {
+  cell,
+  cellSelected,
+  column,
+  columnLabel,
+  columns,
+  s as default,
+  footer,
+  footerBtn,
+  footerBtnPrimary,
+  overlay,
+  picker,
+  separator
+};

package/dist/fields/defaultPlaceholders.cjs

@@ -9,6 +9,7 @@ const defaultPlaceholders = {
   textarea: "Enter description...",
   number: "0",
   currency: "0.00",
+  select: "Select...",
   date: "Select date",
   time: "Select time",
   datetime: "Select date and time",

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

@@ -1 +1 @@
-{"version":3,"file":"defaultPlaceholders.d.ts","sourceRoot":"","sources":["../../src/fields/defaultPlaceholders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAOjD,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAczE,CAAC"}
+{"version":3,"file":"defaultPlaceholders.d.ts","sourceRoot":"","sources":["../../src/fields/defaultPlaceholders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAOjD,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAezE,CAAC"}

package/dist/fields/defaultPlaceholders.js

@@ -7,6 +7,7 @@ const defaultPlaceholders = {
   textarea: "Enter description...",
   number: "0",
   currency: "0.00",
+  select: "Select...",
   date: "Select date",
   time: "Select time",
   datetime: "Select date and time",