jcicl 1.1.4 → 1.2.1

package/FormContext/createFormContext.js

@@ -1,96 +1,115 @@
-import { jsx as w } from "react/jsx-runtime";
-import { createContext as E, useState as P, useCallback as N, useEffect as $, useMemo as k } from "react";
+import { jsx as I } from "react/jsx-runtime";
+import { createContext as M, useState as S, useCallback as E, useEffect as V, useMemo as Z } from "react";
 import "../utils.js";
-import { logger as x } from "../logger.js";
-import { formatPhoneNumber as S, formatZipCode as D, formatSSN as A } from "../formatters.js";
-function j(v) {
-  const { name: o, defaultValues: c = {}, onInputChangeExtensions: m = [], submit: l, debug: n = !1 } = v, d = E({
-    onFormInputChange: () => x.error(`Failed to update form input. ${o}FormContext not initialized`),
-    formData: c,
-    setFormData: () => x.error(`Failed to set form data. ${o}FormContext not initialized`),
-    resetForm: () => x.error(`Failed to reset form. ${o}FormContext not initialized`)
+import { logger as h } from "../logger.js";
+import { formatPhoneNumber as z, formatZipCode as D, formatSSN as $, formatCurrency as w } from "../formatters.js";
+function T(F) {
+  const { name: n, defaultValues: f = {}, onInputChangeExtensions: p = [], submit: u, debug: a = !1 } = F, m = M({
+    onFormInputChange: () => h.error(`Failed to update form input. ${n}FormContext not initialized`),
+    formData: f,
+    setFormData: () => h.error(`Failed to set form data. ${n}FormContext not initialized`),
+    resetForm: () => h.error(`Failed to reset form. ${n}FormContext not initialized`),
+    fieldErrors: {},
+    setFieldErrors: () => h.error(`Failed to set field errors. ${n}FormContext not initialized`)
   });
-  return { Context: d, Provider: ({ children: C }) => {
-    const [r, u] = P(c), p = N(
-      (i, t, a) => {
-        u((f) => {
-          let e;
-          if (a === "checkbox")
-            e = t.target.checked;
-          else if (a === "multiDropdown") {
-            const s = t.target.value;
-            Array.isArray(s) ? e = s.map((z) => z.value) : e = [];
-          } else if (a === "phone") {
-            const [, s] = S(t.target.value);
-            e = s;
-          } else if (a === "zip") {
-            const [, s] = D(t.target.value);
-            e = s;
-          } else if (a === "ssn") {
-            const [, s] = A(t.target.value);
-            e = s;
+  return { Context: m, Provider: ({ children: N }) => {
+    const [s, d] = S(f), [g, v] = S({}), b = E(
+      (x, t, o) => {
+        d((e) => {
+          let r;
+          if (o === "checkbox")
+            r = t.target.checked;
+          else if (o === "multiDropdown") {
+            const i = t.target.value;
+            Array.isArray(i) ? r = i.map((A) => A.value) : r = [];
+          } else if (o === "phone") {
+            const [, i] = z(t.target.value);
+            r = i;
+          } else if (o === "zip") {
+            const [, i] = D(t.target.value);
+            r = i;
+          } else if (o === "ssn") {
+            const [, i] = $(t.target.value);
+            r = i;
+          } else if (o === "currency") {
+            const [, i] = w(t.target.value);
+            r = i;
           } else
-            e = t.target.value;
-          return e === "undefined" && (e = void 0), { ...f, [i]: e };
+            r = t.target.value;
+          return r === "undefined" && (r = void 0), { ...e, [x]: r };
+        }), v((e) => {
+          if (!e[x]) return e;
+          const r = { ...e };
+          return delete r[x], r;
         });
-        let g;
-        if (a === "checkbox")
-          g = t.target.checked;
-        else if (a === "phone") {
-          const [, f] = S(t.target.value);
-          g = f;
-        } else if (a === "zip") {
-          const [, f] = D(t.target.value);
-          g = f;
+        let c;
+        if (o === "checkbox")
+          c = t.target.checked;
+        else if (o === "phone") {
+          const [, e] = z(t.target.value);
+          c = e;
+        } else if (o === "zip") {
+          const [, e] = D(t.target.value);
+          c = e;
+        } else if (o === "ssn") {
+          const [, e] = $(t.target.value);
+          c = e;
+        } else if (o === "currency") {
+          const [, e] = w(t.target.value);
+          c = e;
         } else
-          g = t.target.value === "undefined" ? void 0 : t.target.value;
-        m.forEach((f) => {
-          f(i, g, u);
+          c = t.target.value === "undefined" ? void 0 : t.target.value;
+        p.forEach((e) => {
+          e(x, c, d);
         });
       },
       // onInputChangeExtensions is captured from the factory closure (not React state/props);
       // it can never change for the lifetime of this Provider, so it's not a valid dep.
       []
-    ), h = N(() => u(c), []);
-    $(() => {
-      n && x.log(`[${o}Form] Updated form data:`, r);
-    }, [r]);
-    const b = k(
+    ), l = E(() => {
+      d(f), v({});
+    }, []);
+    V(() => {
+      a && h.log(`[${n}Form] Updated form data:`, s);
+    }, [s]);
+    const P = Z(
       () => ({
-        onFormInputChange: p,
-        formData: r,
-        setFormData: u,
-        resetForm: h,
-        ...l ? { submit: () => l(r) } : {}
+        onFormInputChange: b,
+        formData: s,
+        setFormData: d,
+        resetForm: l,
+        fieldErrors: g,
+        setFieldErrors: v,
+        ...u ? { submit: () => u(s) } : {}
       }),
-      // submit is factory-closure-stable; only formData and the memoized callbacks can change.
-      [r, p, h]
+      // submit is factory-closure-stable; only formData/fieldErrors and the memoized callbacks change.
+      [s, g, b, l]
     );
-    return /* @__PURE__ */ w(d.Provider, { value: b, children: C });
+    return /* @__PURE__ */ I(m.Provider, { value: P, children: N });
   } };
 }
-function B(v = "dateOfBirth", o = "age") {
-  return (c, m, l) => {
-    if (c === v && m && typeof m == "string") {
-      const n = m.split("-");
-      if (n.length !== 3) {
-        l((i) => ({ ...i, [o]: void 0 }));
+function U(F = "dateOfBirth", n = "age") {
+  return (f, p, u) => {
+    if (f === F && p && typeof p == "string") {
+      const a = p.split("-");
+      if (a.length !== 3) {
+        u((l) => ({ ...l, [n]: void 0 }));
         return;
       }
-      const d = Number(n[0]), F = Number(n[1]), C = Number(n[2]), r = /* @__PURE__ */ new Date(), u = r.getFullYear(), p = r.getMonth() + 1, h = r.getDate();
-      if (d > u || d < 1900) {
-        l((i) => ({ ...i, [o]: void 0 }));
+      const m = Number(a[0]), C = Number(a[1]), N = Number(a[2]), s = /* @__PURE__ */ new Date(), d = s.getFullYear(), g = s.getMonth() + 1, v = s.getDate();
+      if (m > d || m < 1900) {
+        u((l) => ({ ...l, [n]: void 0 }));
         return;
       }
-      let b = u - d;
-      (F > p || F === p && C > h) && (b -= 1), l((i) => ({
-        ...i,
-        [o]: String(b)
+      let b = d - m;
+      (C > g || C === g && N > v) && (b -= 1), u((l) => ({
+        ...l,
+        [n]: String(b)
       }));
-    } else c === v && l((n) => ({ ...n, [o]: void 0 }));
+    } else f === F && u((a) => ({ ...a, [n]: void 0 }));
   };
 }
 export {
-  B as createDobToAgeExtension,
-  j as createFormContext
+  U as createDobToAgeExtension,
+  T as createFormContext
 };

package/FormContext/types.d.ts

@@ -18,6 +18,14 @@ export interface FormContextProps<T extends Record<string, unknown>> {
     resetForm: () => void;
     /** Optional submit handler (if configured in factory) */
     submit?: () => void;
+    /**
+     * Server-supplied per-field error messages (field key → message), e.g. mapped from an
+     * RFC 7807 ValidationProblemDetails `errors` map. FieldGroup surfaces these on the matching
+     * inputs; they are cleared per-field as the user edits and fully on resetForm.
+     */
+    fieldErrors?: Record<string, string>;
+    /** Replace the current set of server field errors (e.g. after a failed submit). */
+    setFieldErrors?: (errors: Record<string, string>) => void;
 }
 /**
  * Extension function called after each input change.

package/FormFields/FormFields.d.ts

@@ -1,6 +1,6 @@
 import { FormInputType } from '../FormInput';
 import { DropdownOption } from '../LabeledDropdown';
-import { AllInputProps } from '../FormInput/FormInput';
+import { AllInputProps, FormInputProps } from '../FormInput/FormInput';
 export type FormField = {
     key: string;
     label?: string;
@@ -9,7 +9,7 @@ export type FormField = {
     options?: DropdownOption[];
     limit?: number;
     defaultValue?: string | number;
-} & Partial<AllInputProps>;
+} & Partial<AllInputProps> & Pick<FormInputProps, 'showError' | 'customValidation' | 'overrideValidation'>;
 export type FormFieldsProps = {
     title?: string;
     fields: FormField[];

package/FormFields/FormFields.js

@@ -4,16 +4,17 @@ import { FormSectionTitle as g, FormFieldGrid as j, FormTextLine as I, FormField
 import "../AvatarWithImage/AvatarWithImage.js";
 import "../Button/Button.js";
 import "../Divider/Divider.js";
-import { Flex as V } from "../Flex/Flex.js";
+import { Flex as G } from "../Flex/Flex.js";
 import "../Grid/Grid.js";
 import "../Icon/Icon.js";
 import "../Input/Input.js";
 import "../LabeledValue/LabeledValue.js";
 import "../ListButton/ListButton.js";
 import "../Loading/Loading.js";
-import "../ScrollContainer/ScrollContainer.js";
 import "react";
-import { useIsTablet as G } from "../utils.js";
+import "../ScrollContainer/ScrollContainer.js";
+import "../ThemeContext.js";
+import { useIsTablet as S } from "../utils.js";
 import "../CustomAlert/CustomAlert.js";
 import "react-dom";
 import "../Accordion/Accordion.js";
@@ -28,7 +29,6 @@ import "../WithLabel/WithLabel.js";
 import "../WithLoading/WithLoading.js";
 import "../RecordCard/RecordCard.js";
 import "../theme.js";
-import "../ThemeContext.js";
 import "../DetailPageComponents/DetailPageComponents.js";
 import "../Toast/Toast.js";
 import "../.chunks/AppHeader.js";
@@ -38,24 +38,24 @@ import "../AuthContext/AuthProvider.js";
 import "../AppContainer/AppContainer.js";
 import "../DefaultTemplate/DefaultTemplate.js";
 const vo = ({
-  title: a,
-  fields: h,
-  columns: f,
-  columnsOverride: w,
+  title: h,
+  fields: a,
+  columns: w,
+  columnsOverride: f,
   gap: C = 21,
   noLabel: x = !1,
   checkboxContainer: F = !1,
   compact: v = !1,
-  formDefaults: l,
+  formDefaults: n,
   onChange: d
 }) => {
-  const D = G();
+  const D = S();
   return /* @__PURE__ */ b(T, { children: [
-    a && /* @__PURE__ */ m(g, { children: a }),
-    !F && /* @__PURE__ */ m(j, { columns: f ?? (D ? 2 : 3), columnsOverride: w, gap: C, children: h.map(({ key: r, label: n, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
-      const i = l[r] !== void 0 ? l[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
-      return v ? /* @__PURE__ */ b(V, { column: !0, gap: "21px", children: [
-        /* @__PURE__ */ m(I, { children: n }),
+    h && /* @__PURE__ */ m(g, { children: h }),
+    !F && /* @__PURE__ */ m(j, { columns: w ?? (D ? 2 : 3), columnsOverride: f, gap: C, children: a.map(({ key: r, label: l, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
+      const i = n[r] !== void 0 ? n[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
+      return v ? /* @__PURE__ */ b(G, { column: !0, gap: "21px", children: [
+        /* @__PURE__ */ m(I, { children: l }),
         /* @__PURE__ */ m(
           s,
           {
@@ -73,7 +73,7 @@ const vo = ({
         s,
         {
           onChange: (p) => d(r, p, o),
-          label: n,
+          label: l,
           type: o,
           limit: c,
           ...o === "checkbox" ? { checked: !!i } : { value: i },
@@ -85,16 +85,16 @@ const vo = ({
         r
       );
     }) }),
-    F && /* @__PURE__ */ m(L, { children: h.map(({ key: r, label: n, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
-      const i = l[r] !== void 0 ? l[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
+    F && /* @__PURE__ */ m(L, { children: a.map(({ key: r, label: l, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
+      const i = n[r] !== void 0 ? n[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
       return /* @__PURE__ */ m(
         s,
         {
           onChange: (p) => d(r, p, o),
-          label: n,
+          label: l,
           type: o,
           limit: c,
-          ...o === "checkbox" ? { checked: !!i } : { defaultValue: i },
+          ...o === "checkbox" ? { checked: !!i } : { value: i },
           noLabel: x,
           options: e,
           multiple: o === "multiDropdown",

package/FormInput/FormInput.d.ts

@@ -5,6 +5,7 @@ import { LabeledRadioProps } from '../LabeledRadio';
 import { LabeledDropdownProps, DropdownOption } from '../LabeledDropdown';
 import { LabeledTextAreaProps } from '../LabeledTextArea/LabeledTextArea';
 import { LabeledFormattedInputProps } from '../LabeledFormattedInput';
+import { InputValidationFunction } from '../utils';
 import { FormInputType } from '../inputTypes';
 export type AllInputProps = LabeledInputProps & LabeledCheckboxProps & LabeledRadioProps & LabeledDropdownProps & LabeledCurrencyInputProps & LabeledTextAreaProps & LabeledFormattedInputProps;
 export { type FormInputType } from '../inputTypes';
@@ -17,6 +18,9 @@ export type FormInputProps = Partial<Omit<AllInputProps, ConflictingKeys | 'type
     checked?: boolean;
     defaultValue?: unknown;
     label?: string;
+    showError?: boolean;
+    overrideValidation?: boolean;
+    customValidation?: InputValidationFunction;
 };
 export declare const FormInput: React.FC<FormInputProps>;
 export default FormInput;

package/FormInput/FormInput.js

@@ -1,17 +1,42 @@
-import { jsx as t } from "react/jsx-runtime";
-import { LabeledInput as o } from "../LabeledInput/LabeledInput.js";
-import { LabeledCurrencyInput as m } from "../LabeledCurrencyInput/LabeledCurrencyInput.js";
-import { LabeledCheckbox as a } from "../LabeledCheckbox/LabeledCheckbox.js";
-import { LabeledRadio as d } from "../LabeledRadio/LabeledRadio.js";
-import { LabeledDropdown as f } from "../LabeledDropdown/LabeledDropdown.js";
-import { LabeledTextArea as i } from "../LabeledTextArea/LabeledTextArea.js";
-import { LabeledFormattedInput as n } from "../LabeledFormattedInput/LabeledFormattedInput.js";
-import { formattedOrMaskedTypes as b } from "../utils.js";
-const k = (e) => {
-  const { type: r = "text" } = e;
-  return r === "dropdown" || r === "multiDropdown" ? /* @__PURE__ */ t(f, { ...e }) : r === "checkbox" ? /* @__PURE__ */ t(a, { ...e }) : r === "radio" ? /* @__PURE__ */ t(d, { ...e }) : r === "currency" ? /* @__PURE__ */ t(m, { ...e }) : r === "textarea" ? /* @__PURE__ */ t(i, { ...e }) : b.has(r) ? /* @__PURE__ */ t(n, { ...e, type: r }) : /* @__PURE__ */ t(o, { ...e, type: r });
+import { jsx as o } from "react/jsx-runtime";
+import { useState as v, useEffect as E } from "react";
+import { LabeledInput as k } from "../LabeledInput/LabeledInput.js";
+import { LabeledCurrencyInput as w } from "../LabeledCurrencyInput/LabeledCurrencyInput.js";
+import { LabeledCheckbox as I } from "../LabeledCheckbox/LabeledCheckbox.js";
+import { LabeledRadio as V } from "../LabeledRadio/LabeledRadio.js";
+import { LabeledDropdown as q } from "../LabeledDropdown/LabeledDropdown.js";
+import { LabeledTextArea as C } from "../LabeledTextArea/LabeledTextArea.js";
+import { LabeledFormattedInput as D } from "../LabeledFormattedInput/LabeledFormattedInput.js";
+import { formattedOrMaskedTypes as F } from "../utils.js";
+import { inputValidatorsByType as T } from "../validators.js";
+const G = (a) => {
+  const { type: r = "text", required: m, label: l, value: d } = a, { customValidation: s, showError: p, overrideValidation: f = !1, ...e } = a, [y, u] = v(!1), [L, c] = v(void 0), h = r !== "checkbox" && r !== "radio";
+  E(() => {
+    if (!p || !h) {
+      u(!1), c(void 0);
+      return;
+    }
+    const x = d === void 0 || d === "", n = [];
+    m && !f && n.push(
+      (t) => t === void 0 || t === "" ? `${l ?? "This field"} is required.` : void 0
+    ), !f && T[r] && !x && n.push(T[r]), s && !x && n.push(s);
+    const b = n.map((t) => t(d)).find((t) => t !== void 0);
+    u(!!b), c(b);
+  }, [p, d, r, m, l, s, f, h]);
+  const i = {
+    error: y || a.error,
+    helperText: L ?? a.helperText
+  };
+  return r === "dropdown" || r === "multiDropdown" ? /* @__PURE__ */ o(q, { ...e, ...i }) : r === "checkbox" ? /* @__PURE__ */ o(I, { ...e }) : r === "radio" ? /* @__PURE__ */ o(V, { ...e }) : r === "currency" ? /* @__PURE__ */ o(w, { ...e, ...i }) : r === "textarea" ? /* @__PURE__ */ o(C, { ...e, ...i }) : F.has(r) ? /* @__PURE__ */ o(
+    D,
+    {
+      ...e,
+      type: r,
+      ...i
+    }
+  ) : /* @__PURE__ */ o(k, { ...e, type: r, ...i });
 };
 export {
-  k as FormInput,
-  k as default
+  G as FormInput,
+  G as default
 };

package/LabeledCheckbox/LabeledCheckbox.js

@@ -3,7 +3,7 @@ import { n as B } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as g } from "../.chunks/emotion-react.browser.esm.js";
 import { useThemeColors as P } from "../ThemeContext.js";
 import * as f from "react";
-import { a as R, g as T, s as M, r as N, c as p, d as z, u as L, P as o, b as V } from "../.chunks/DefaultPropsProvider.js";
+import { a as R, g as M, s as T, r as N, c as p, d as z, u as L, P as o, b as V } from "../.chunks/DefaultPropsProvider.js";
 import { c as H } from "../.chunks/clsx.js";
 import { S as E } from "../.chunks/SwitchBase.js";
 import { c as b } from "../.chunks/createSvgIcon.js";
@@ -18,7 +18,7 @@ const D = b(/* @__PURE__ */ r("path", {
   d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
 }), "IndeterminateCheckBox");
 function W(e) {
-  return T("MuiCheckbox", e);
+  return M("MuiCheckbox", e);
 }
 const u = R("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), _ = (e) => {
   const {
@@ -34,7 +34,7 @@ const u = R("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     // forward the disabled and checked classes to the SwitchBase
     ...c
   };
-}, G = M(E, {
+}, G = T(E, {
   shouldForwardProp: (e) => N(e) || e === "classes",
   name: "MuiCheckbox",
   slot: "Root",
@@ -236,7 +236,7 @@ process.env.NODE_ENV !== "production" && (h.propTypes = {
    */
   value: o.any
 });
-const w = B("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })(({ displayMode: e, customTheme: t }) => ({
+const w = B("div", { shouldForwardProp: (e) => !["customTheme", "displayMode"].includes(e) })(({ displayMode: e, customTheme: t }) => ({
   ...g`
     display: flex;
     flex-wrap: nowrap;

package/LabeledCurrencyInput/LabeledCurrencyInput.js

@@ -1,10 +1,12 @@
-import { jsxs as l, jsx as y } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import { c } from "../.chunks/emotion-react.browser.esm.js";
-import { Input as w } from "../Input/Input.js";
-const x = h("div")(({ grid: r, displayMode: n }) => ({
-  ...c`
+import { jsxs as c, jsx as b } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { n as x } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import { Input as I } from "../Input/Input.js";
+import "../utils.js";
+import { formatCurrency as C } from "../formatters.js";
+const V = x("div")(({ grid: n, displayMode: o }) => ({
+  ...m`
     display: flex;
     flex-wrap: nowrap;
     gap: 9px;
@@ -20,10 +22,10 @@ const x = h("div")(({ grid: r, displayMode: n }) => ({
     }
 
     .MuiCurrencyInputBase-root {
-      width: ${r && "100%"};
+      width: ${n && "100%"};
     }
 
-    ${n && c`
+    ${o && m`
       .Mui-disabled {
         color: inherit !important;
         -webkit-text-fill-color: inherit !important;
@@ -33,36 +35,34 @@ const x = h("div")(({ grid: r, displayMode: n }) => ({
       }
     `}
   `
-})), L = ({
-  label: r,
-  grid: n = !0,
-  displayMode: m = !1,
-  noLabel: u = !1,
-  onChange: i,
-  defaultValue: o,
-  ...f
+})), B = ({
+  label: n,
+  grid: o = !0,
+  displayMode: f = !1,
+  noLabel: d = !1,
+  onChange: a,
+  defaultValue: g,
+  ...s
 }) => {
-  let e = (o == null ? void 0 : o.replace(/[^0-9.-]+/g, "")) ?? "";
-  e && (e = new Intl.NumberFormat("en-US", {
-    style: "decimal",
-    maximumFractionDigits: 2
-  }).format(Number(e)));
-  const [d, a] = b(e);
-  return /* @__PURE__ */ l(x, { ...{ grid: n, displayMode: m }, className: "jcLabeledCurrencyInput", children: [
-    !u && /* @__PURE__ */ l("span", { children: [
-      r,
+  const p = String(g ?? s.value ?? "");
+  let l = p.replace(/[^0-9.-]+/g, "");
+  l && (l = C(p)[0]);
+  const [y, t] = w(l);
+  return /* @__PURE__ */ c(V, { ...{ grid: o, displayMode: f }, className: "jcLabeledCurrencyInput", children: [
+    !d && /* @__PURE__ */ c("span", { children: [
+      n,
       ":"
     ] }),
-    /* @__PURE__ */ y(w, { ...f, onChange: (s) => {
-      const { value: g } = s.target, t = g.replace(/[^0-9.-]+/g, ""), p = new Intl.NumberFormat("en-US", {
+    /* @__PURE__ */ b(I, { ...s, onChange: (u) => {
+      const { value: h } = u.target, e = h.replace(/[^0-9.-]+/g, ""), i = e.includes(".") ? e.split(".")[0] + "." + e.split(".")[1].slice(0, 2) : e, r = new Intl.NumberFormat("en-US", {
         style: "decimal",
         maximumFractionDigits: 2
-      }).format(Number(t) || 0);
-      t && t.length > 1 && t[t.length - 1] === "." ? a(p + ".") : a(t ? p : ""), i && i(s);
-    }, value: `$${d}` })
+      }).format(Number(i) || 0);
+      e && e.length > 1 && e[e.length - 1] === "." ? t(r + ".") : e && e.length > 1 && i.includes(".0") || r.includes(".") ? t(r.split(".")[0] + "." + i.split(".")[1]) : t(e ? r : ""), a && a(u);
+    }, value: `$${y}` })
   ] });
 };
 export {
-  L as LabeledCurrencyInput,
-  L as default
+  B as LabeledCurrencyInput,
+  B as default
 };

package/LabeledInput/LabeledInput.d.ts

@@ -7,6 +7,8 @@ export type LabeledInputProps = InputProps & StyleProps & {
     label?: string;
     noLabel?: boolean;
     limit?: number;
+    minLimit?: number;
+    maxLimit?: number;
 };
 export declare const LabeledInput: React.FC<LabeledInputProps>;
 export default LabeledInput;

package/LabeledInput/LabeledInput.js

@@ -1,42 +1,44 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { cn as r } from "../cn.js";
-import { Input as u } from "../Input/Input.js";
-import p from "../theme.js";
-const c = "flex flex-nowrap gap-[9px] font-['Roboto',sans-serif]", b = "[&_span]:whitespace-nowrap [&_span]:font-bold", m = "[&_.required]:mx-[2px] [&_.required]:text-[var(--required-color)]", f = "[&_.MuiTextField-root]:flex-grow", x = "[&_.MuiInputBase-root]:width-[var(--input-base-width)]", h = "[&_.Mui-disabled]:!cursor-default [&_.Mui-disabled]:!color-inherit [&_.Mui-disabled]:!-webkit-text-fill-color-inherit [&_.Mui-disabled]:!background-transparent [&_.Mui-disabled]:!opacity-100", _ = r(
-  c,
+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,
-  m,
   f,
-  x
-), M = ({
+  x,
+  h,
+  _
+), y = ({
   label: o,
   grid: a = !0,
   displayMode: i = !1,
   noLabel: l = !1,
   limit: n,
+  minLimit: d,
+  maxLimit: u,
   ...e
 }) => {
-  const d = {
-    "--required-color": p.colors.gray,
+  const p = {
+    "--required-color": m.colors.gray,
     "--input-base-width": a ? "100%" : "auto"
   };
   return /* @__PURE__ */ s(
     "div",
     {
-      className: r("jcLabeledInput", _, i && h),
-      style: d,
+      className: r("jcLabeledInput", q, i && w),
+      style: p,
       children: [
         !l && /* @__PURE__ */ s("span", { children: [
           o,
           e.required && /* @__PURE__ */ t("span", { className: "required", children: "*" }),
           ":"
         ] }),
-        /* @__PURE__ */ t(u, { ...e, slotProps: { htmlInput: { limit: n } } })
+        /* @__PURE__ */ t(c, { ...e, slotProps: { htmlInput: { limit: n, min: d, max: u } } })
       ]
     }
   );
 };
 export {
-  M as LabeledInput,
-  M as default
+  y as LabeledInput,
+  y as default
 };