jcicl 2.0.2 → 4.0.2

package/LabeledDateInput/LabeledDateInput.js

@@ -0,0 +1,75 @@
+import { jsxs as B, jsx as D } from "react/jsx-runtime";
+import { useState as p, useRef as P } from "react";
+import { cn as R } from "../cn.js";
+import { Input as U } from "../Input/Input.js";
+import j from "../theme.js";
+import { muiDisabledClasses as q, labeledFieldClasses as G } from "../labeledFieldStyles.js";
+const S = "That date doesn’t exist — check the day and month.", M = "That date doesn’t exist — your previous date was restored.", F = 1e3, L = (t) => /^\d{4}-\d{2}-\d{2}$/.test(t) && Number(t.slice(0, 4)) >= F, E = (t) => {
+  const [d, a, o] = String(t).split("-");
+  return a && o ? `${a}/${o}/${d}` : String(t);
+}, K = ({
+  label: t,
+  grid: d = !0,
+  displayMode: a = !1,
+  noLabel: o = !1,
+  min: i,
+  max: u,
+  value: h,
+  ...g
+}) => {
+  var b;
+  const { onChange: m, onBlur: c, ...s } = g, [T, I] = p(null), [n, f] = p(void 0), v = P(null), _ = {
+    "--required-color": j.colors.gray,
+    "--input-base-width": d ? "100%" : "auto"
+  }, r = h == null ? "" : String(h), w = T ?? r, [N, V] = p(r);
+  r !== N && (V(r), r !== v.current && f(void 0));
+  const $ = (e) => {
+    if (e.validity.badInput)
+      return {
+        message: r ? M : S,
+        fromBadInput: !0
+      };
+    if (e.validity.rangeUnderflow && i != null)
+      return { message: `Date must be on or after ${E(i)}.`, fromBadInput: !1 };
+    if (e.validity.rangeOverflow && u != null)
+      return { message: `Date must be on or before ${E(u)}.`, fromBadInput: !1 };
+  }, y = (e) => {
+    v.current = e.target.value, m == null || m(e);
+  }, x = (e) => {
+    I(e.target.value), f(e.target.validity.badInput ? { message: S, fromBadInput: !0 } : void 0), L(e.target.value) && y(e);
+  }, A = (e) => {
+    const l = $(e.target);
+    I(null), f(l), !(l != null && l.fromBadInput) && e.target.value !== r && y(e), c == null || c(e);
+  }, C = n && (n.fromBadInput || !s.helperText) ? n.message : void 0;
+  return /* @__PURE__ */ B(
+    "div",
+    {
+      className: R("jcLabeledDateInput", G, a && q),
+      style: _,
+      children: [
+        !o && /* @__PURE__ */ B("span", { children: [
+          t,
+          g.required && /* @__PURE__ */ D("span", { className: "required", children: "*" }),
+          ":"
+        ] }),
+        /* @__PURE__ */ D(
+          U,
+          {
+            ...s,
+            type: "date",
+            value: w,
+            onChange: x,
+            onBlur: A,
+            error: !!n || s.error,
+            helperText: C ?? s.helperText,
+            slotProps: { ...s.slotProps, htmlInput: { min: i, max: u, ...(b = s.slotProps) == null ? void 0 : b.htmlInput } }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  K as LabeledDateInput,
+  K as default
+};

package/LabeledDateInput/index.d.ts

@@ -0,0 +1 @@
+export { default, type LabeledDateInputProps } from './LabeledDateInput';

package/LabeledDateInput/index.js

@@ -0,0 +1,4 @@
+import { LabeledDateInput as t } from "./LabeledDateInput.js";
+export {
+  t as default
+};

package/LabeledFormattedInput/LabeledFormattedInput.d.ts

@@ -1,11 +1,9 @@
 import { InputProps } from '../Input';
 import { FormatterFunction, MaskerFunction } from '../utils';
 import { FormInputType } from '../inputTypes';
+import { StyleProps } from '../labeledFieldStyles';
 export type FormattedInputValue = string | undefined;
-export interface StyleProps {
-    grid?: boolean;
-    displayMode?: boolean;
-}
+export type { StyleProps };
 export type LabeledFormattedInputProps = InputProps & StyleProps & {
     label?: string;
     noLabel?: boolean;

package/LabeledFormattedInput/LabeledFormattedInput.js

@@ -1,88 +1,83 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import { useRef as R, useState as g, useLayoutEffect as G } from "react";
-import { cn as v } from "../cn.js";
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { useRef as B, useState as y, useLayoutEffect as G } from "react";
+import { cn as E } from "../cn.js";
 import { Input as H } from "../Input/Input.js";
 import J from "../theme.js";
 import "../utils.js";
 import { findCursorFromDigitIndex as K } from "../cursorPositioning.js";
-import { Button as Q } from "../Button/Button.js";
-import { formattersByType as W } from "../formatters.js";
-import { maskersByType as X, defaultMasker as Y } from "../maskers.js";
-import { E as Z, a as $ } from "../.chunks/eye.js";
-const ee = "flex flex-nowrap gap-[9px] font-['Roboto',sans-serif]", te = "[&_span]:whitespace-nowrap [&_span]:font-bold", se = "[&_.required]:mx-[2px] [&_.required]:text-[var(--required-color)]", oe = "[&_.MuiTextField-root]:flex-grow", re = "[&_.MuiInputBase-root]:width-[var(--input-base-width)]", ae = "[&_.Mui-disabled]:!cursor-default [&_.Mui-disabled]:!color-inherit [&_.Mui-disabled]:!-webkit-text-fill-color-inherit [&_.Mui-disabled]:!background-transparent [&_.Mui-disabled]:!opacity-100", le = v(
-  ee,
-  te,
-  se,
-  oe,
-  re
-), ge = ({
-  label: q,
-  grid: B = !0,
-  displayMode: S = !1,
-  noLabel: k = !1,
-  limit: V,
+import { muiDisabledClasses as Q, labeledFieldClasses as W } from "../labeledFieldStyles.js";
+import { Button as X } from "../Button/Button.js";
+import { formattersByType as Y } from "../formatters.js";
+import { maskersByType as Z, defaultMasker as $ } from "../maskers.js";
+import { E as ee, a as te } from "../.chunks/eye.js";
+const fe = ({
+  label: N,
+  grid: R = !0,
+  displayMode: k = !1,
+  noLabel: w = !1,
+  limit: j,
   type: t,
   value: n,
-  defaultValue: C,
-  masked: i,
-  formatFunction: E,
-  maskFunction: _,
-  ...w
+  defaultValue: F,
+  masked: c,
+  formatFunction: q,
+  maskFunction: x,
+  ...I
 }) => {
-  const N = {
+  const D = {
     "--required-color": J.colors.gray,
-    "--input-base-width": B ? "100%" : "auto"
-  }, o = E ?? (t ? W[t] : void 0);
+    "--input-base-width": R ? "100%" : "auto"
+  }, o = q ?? (t ? Y[t] : void 0);
   let s;
-  _ ? s = _ : i && (s = t && X[t] || Y);
-  const u = !!(i && s), { onChange: c, onFocus: d, onBlur: p, ...m } = w, f = R(null), h = R(null), [x, y] = g(null), [T, F] = g(!1), [j, D] = g(!1), r = !u || T || j, b = x ?? n ?? C, a = o ? o(b)[0] : String(b ?? ""), L = s ? s(b) : a, P = r ? a : L, z = (e) => {
+  x ? s = x : c && (s = t && Z[t] || $);
+  const u = !!(c && s), { onChange: i, onFocus: m, onBlur: d, ...p } = I, f = B(null), h = B(null), [g, C] = y(null), [L, S] = y(!1), [M, T] = y(!1), r = !u || L || M, v = g ?? n ?? F, l = o ? o(v)[0] : String(v ?? ""), P = s ? s(v) : l, z = r ? l : P, O = (e) => {
     const A = e.target.selectionStart ?? 0;
-    h.current = e.target.value.slice(0, A).replace(/\D/g, "").length, y(e.target.value), c == null || c(e);
-  }, O = (e) => {
-    F(!0), d == null || d(e);
+    h.current = e.target.value.slice(0, A).replace(/\D/g, "").length, C(e.target.value), i == null || i(e);
   }, U = (e) => {
-    F(!1), n !== void 0 && y(null), p == null || p(e);
+    S(!0), m == null || m(e);
+  }, _ = (e) => {
+    S(!1), n !== void 0 && C(null), d == null || d(e);
   };
   G(() => {
     if (!f.current || h.current == null || !r || !o)
       return;
-    const e = K(a, h.current);
+    const e = K(l, h.current);
     f.current.setSelectionRange(e, e);
-  }, [C, a, o, r, x, n]);
-  const I = u ? r ? Z : $ : null;
-  return /* @__PURE__ */ M(
+  }, [F, l, o, r, g, n]);
+  const V = u ? r ? ee : te : null;
+  return /* @__PURE__ */ b(
     "div",
     {
-      className: v("jcLabeledFormattedInput", le, S && ae),
-      style: N,
+      className: E("jcLabeledFormattedInput", W, k && Q),
+      style: D,
       children: [
-        !k && /* @__PURE__ */ M("span", { children: [
-          q,
-          w.required && /* @__PURE__ */ l("span", { className: "required", children: "*" }),
+        !w && /* @__PURE__ */ b("span", { children: [
+          N,
+          I.required && /* @__PURE__ */ a("span", { className: "required", children: "*" }),
           ":"
         ] }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ a(
           H,
           {
-            ...m,
+            ...p,
             type: t,
             inputRef: f,
-            value: P,
-            onChange: z,
-            onFocus: O,
-            onBlur: U,
-            autoComplete: i ? "off" : void 0,
-            className: v(m.className, u && "[&_input]:pr-[20px]"),
-            slotProps: { htmlInput: { limit: V }, ...m.slotProps }
+            value: z,
+            onChange: O,
+            onFocus: U,
+            onBlur: _,
+            autoComplete: c ? "off" : void 0,
+            className: E(p.className, u && "[&_input]:pr-[20px]"),
+            slotProps: { htmlInput: { limit: j }, ...p.slotProps }
           }
         ),
-        I && /* @__PURE__ */ l(
-          Q,
+        V && /* @__PURE__ */ a(
+          X,
           {
             variant: "unstyled",
-            onClick: () => D((e) => !e),
+            onClick: () => T((e) => !e),
             className: "!min-w-0 !max-h-[18px] !p-0 opacity-70 !ml-[-27px]",
-            children: /* @__PURE__ */ l(I, { size: 18 })
+            children: /* @__PURE__ */ a(V, { size: 18 })
           }
         )
       ]
@@ -90,6 +85,6 @@ const ee = "flex flex-nowrap gap-[9px] font-['Roboto',sans-serif]", te = "[&_spa
   );
 };
 export {
-  ge as LabeledFormattedInput,
-  ge as default
+  fe as LabeledFormattedInput,
+  fe as default
 };

package/LabeledInput/LabeledInput.d.ts

@@ -1,14 +1,18 @@
 import { InputProps } from '../Input';
-export interface StyleProps {
-    grid?: boolean;
-    displayMode?: boolean;
-}
+import { StyleProps } from '../labeledFieldStyles';
+export type { StyleProps };
 export type LabeledInputProps = InputProps & StyleProps & {
     label?: string;
     noLabel?: boolean;
     limit?: number;
+    /** @deprecated Use `min` — it accepts the same numbers and also the `YYYY-MM-DD` a date needs. */
     minLimit?: number;
+    /** @deprecated Use `max` — it accepts the same numbers and also the `YYYY-MM-DD` a date needs. */
     maxLimit?: number;
+    /** Lower bound on the underlying input. Only limits the number spinner; a lower value can still be typed. */
+    min?: string | number;
+    /** Upper bound on the underlying input. Only limits the number spinner; a higher value can still be typed. */
+    max?: string | number;
 };
 export declare const LabeledInput: React.FC<LabeledInputProps>;
 export default LabeledInput;

package/LabeledInput/LabeledInput.js

@@ -1,44 +1,58 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { cn as r } from "../cn.js";
-import { Input as c } from "../Input/Input.js";
-import m from "../theme.js";
-const b = "flex flex-nowrap gap-[9px] font-['Roboto',sans-serif]", f = "[&_span]:whitespace-nowrap [&_span]:font-bold", x = "[&_.required]:mx-[2px] [&_.required]:text-[var(--required-color)]", h = "[&_.MuiTextField-root]:flex-grow", _ = "[&_.MuiInputBase-root]:width-[var(--input-base-width)]", w = "[&_.Mui-disabled]:!cursor-default [&_.Mui-disabled]:!color-inherit [&_.Mui-disabled]:!-webkit-text-fill-color-inherit [&_.Mui-disabled]:!background-transparent [&_.Mui-disabled]:!opacity-100", q = r(
-  b,
-  f,
-  x,
-  h,
-  _
-), y = ({
-  label: o,
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { cn as f } from "../cn.js";
+import { Input as h } from "../Input/Input.js";
+import b from "../theme.js";
+import { muiDisabledClasses as I, labeledFieldClasses as x } from "../labeledFieldStyles.js";
+const L = ({
+  label: t,
   grid: a = !0,
-  displayMode: i = !1,
-  noLabel: l = !1,
-  limit: n,
+  displayMode: o = !1,
+  noLabel: m = !1,
+  limit: i,
   minLimit: d,
-  maxLimit: u,
+  maxLimit: n,
+  min: p,
+  max: c,
   ...e
 }) => {
-  const p = {
-    "--required-color": m.colors.gray,
+  var r;
+  const u = {
+    "--required-color": b.colors.gray,
     "--input-base-width": a ? "100%" : "auto"
   };
   return /* @__PURE__ */ s(
     "div",
     {
-      className: r("jcLabeledInput", q, i && w),
-      style: p,
+      className: f("jcLabeledInput", x, o && I),
+      style: u,
       children: [
-        !l && /* @__PURE__ */ s("span", { children: [
-          o,
-          e.required && /* @__PURE__ */ t("span", { className: "required", children: "*" }),
+        !m && /* @__PURE__ */ s("span", { children: [
+          t,
+          e.required && /* @__PURE__ */ l("span", { className: "required", children: "*" }),
           ":"
         ] }),
-        /* @__PURE__ */ t(c, { ...e, slotProps: { htmlInput: { limit: n, min: d, max: u } } })
+        /* @__PURE__ */ l(
+          h,
+          {
+            ...e,
+            slotProps: {
+              ...e.slotProps,
+              // Merged rather than replaced: overwriting the whole slotProps object left callers with
+              // no way to reach htmlInput, which is the only route to min/max on a date field.
+              htmlInput: {
+                limit: i,
+                min: p ?? d,
+                max: c ?? n,
+                ...(r = e.slotProps) == null ? void 0 : r.htmlInput
+              }
+            }
+          }
+        )
       ]
     }
   );
 };
 export {
-  y as LabeledInput,
-  y as default
+  L as LabeledInput,
+  L as default
 };

package/README.md

@@ -66,6 +66,26 @@ Factory function that creates typed React Context + Provider pairs for form stat
 
 ---
 
+## Migrating to 3.0.0
+
+`type="date"` fields changed behavior. Nothing needs renaming, but three things now act differently and are worth verifying in any app that has date inputs.
+
+**1. Date fields are validated.** `date` is now registered in `inputValidatorsByType`, so a value that isn't a real calendar date in `YYYY-MM-DD` form fails validation — including `2025-02-29` and `2025-04-31`, which the browser silently blanks rather than rejecting. Apps that call `inputValidatorsByType` themselves (a submit-time `validateFormFields`, say) will start blocking saves that previously went through.
+
+Any date field fed an ISO *datetime* (`2026-08-07T14:03:00`, typical of a `DateTime` rather than a `DateOnly` on the server) will now report as invalid. Trim it to the first ten characters before it reaches the field.
+
+**2. `onChange` fires at different moments.** `FormInput` renders the new `LabeledDateInput` for `type="date"`, which no longer emits every keystroke. The native control reports each digit typed into the year segment as a whole date (typing `1985` emits `0001`, `0019`, `0198`, `1985`), and forwarding those intermediates made a controlled parent write the value back mid-edit and reset the browser's year buffer. It now fires only for a complete date, plus once on blur. Anything driven off a date field per keystroke — a fetch keyed on the date, an autofill extension — sees fewer calls with no partial garbage.
+
+An impossible date is *not* committed: the field snaps back to its last valid value and shows the error, rather than propagating the empty string the browser produced and erasing the stored date.
+
+**3. The wrapper class changed.** Date fields now render inside `.jcLabeledDateInput` instead of `.jcLabeledInput`. Only relevant if you target that class in a selector or `!`-prefixed override.
+
+**4. `minLimit`/`maxLimit` are ignored on date fields.** They still work everywhere else, but the date field reads `min`/`max` only. If you bounded a date with `minLimit`, rename it — the bound is dropped silently otherwise, since neither is a real constraint the browser reports on.
+
+Also in this release: `min`/`max` are exposed on `LabeledInput` (accepting the `YYYY-MM-DD` a date needs, not just numbers), and `slotProps` passed by a caller is merged rather than replaced — previously it was overwritten, which is what made `min`/`max` unreachable. `minLimit`/`maxLimit` still work but are deprecated in favor of `min`/`max` everywhere.
+
+---
+
 ## Development
 
 ### Getting started