@fangzsx/component-library 0.0.31 → 0.0.32

package/dist/components/Checkbox/index.d.ts

@@ -1,3 +1,6 @@
 import { CheckboxProps } from '@mui/material/Checkbox';
 
-export declare function CheckBox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckBoxProps extends CheckboxProps {
+    forceError?: boolean;
+}
+export declare function CheckBox(props: CheckBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/index.js

@@ -1,50 +1,50 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import * as f from "react";
-import { a as j, g as w, c as l, P as e } from "../../generateUtilityClasses-BCID9NF1.js";
-import { u as M, c as $, s as N, a as V, r as F, m as H } from "../../DefaultPropsProvider-DVX_ssOt.js";
+import { a as M, g as j, c as p, P as o } from "../../generateUtilityClasses-BCID9NF1.js";
+import { u as w, c as $, s as F, a as H, r as N, m as V } from "../../DefaultPropsProvider-DVX_ssOt.js";
 import { S as E } from "../../SwitchBase-V2UoemN5.js";
 import { c as h } from "../../createSvgIcon-C0YrvByi.js";
 import { c as I } from "../../useTimeout-DmOXPFt0.js";
 import { u as U } from "../../useSlot-DKccmcQE.js";
-import { m as D } from "../../mergeSlotProps-S3NX_8iG.js";
-const L = h(/* @__PURE__ */ r("path", {
+import { m as L } from "../../mergeSlotProps-S3NX_8iG.js";
+const D = h(/* @__PURE__ */ s("path", {
   d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-}), "CheckBoxOutlineBlank"), q = h(/* @__PURE__ */ r("path", {
+}), "CheckBoxOutlineBlank"), q = h(/* @__PURE__ */ s("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-}), "CheckBox"), _ = h(/* @__PURE__ */ r("path", {
+}), "CheckBox"), _ = h(/* @__PURE__ */ s("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 A(o) {
-  return w("MuiCheckbox", o);
+function A(e) {
+  return j("MuiCheckbox", e);
 }
-const b = j("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), G = (o) => {
+const b = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), G = (e) => {
   const {
     classes: t,
-    indeterminate: s,
+    indeterminate: r,
     color: n,
     size: c
-  } = o, a = {
-    root: ["root", s && "indeterminate", `color${l(n)}`, `size${l(c)}`]
-  }, p = V(a, A, t);
+  } = e, a = {
+    root: ["root", r && "indeterminate", `color${p(n)}`, `size${p(c)}`]
+  }, i = H(a, A, t);
   return {
     ...t,
     // forward the disabled and checked classes to the SwitchBase
-    ...p
+    ...i
   };
-}, J = N(E, {
-  shouldForwardProp: (o) => F(o) || o === "classes",
+}, J = F(E, {
+  shouldForwardProp: (e) => N(e) || e === "classes",
   name: "MuiCheckbox",
   slot: "Root",
-  overridesResolver: (o, t) => {
+  overridesResolver: (e, t) => {
     const {
-      ownerState: s
-    } = o;
-    return [t.root, s.indeterminate && t.indeterminate, t[`size${l(s.size)}`], s.color !== "default" && t[`color${l(s.color)}`]];
+      ownerState: r
+    } = e;
+    return [t.root, r.indeterminate && t.indeterminate, t[`size${p(r.size)}`], r.color !== "default" && t[`color${p(r.color)}`]];
   }
-})(H(({
-  theme: o
+})(V(({
+  theme: e
 }) => ({
-  color: (o.vars || o).palette.text.secondary,
+  color: (e.vars || e).palette.text.secondary,
   variants: [{
     props: {
       color: "default",
@@ -52,29 +52,29 @@ const b = j("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     },
     style: {
       "&:hover": {
-        backgroundColor: o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity)
+        backgroundColor: e.alpha((e.vars || e).palette.action.active, (e.vars || e).palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(o.palette).filter(I()).map(([t]) => ({
+  }, ...Object.entries(e.palette).filter(I()).map(([t]) => ({
     props: {
       color: t,
       disableRipple: !1
     },
     style: {
       "&:hover": {
-        backgroundColor: o.alpha((o.vars || o).palette[t].main, (o.vars || o).palette.action.hoverOpacity)
+        backgroundColor: e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(o.palette).filter(I()).map(([t]) => ({
+  })), ...Object.entries(e.palette).filter(I()).map(([t]) => ({
     props: {
       color: t
     },
     style: {
       [`&.${b.checked}, &.${b.indeterminate}`]: {
-        color: (o.vars || o).palette[t].main
+        color: (e.vars || e).palette[t].main
       },
       [`&.${b.disabled}`]: {
-        color: (o.vars || o).palette.action.disabled
+        color: (e.vars || e).palette.action.disabled
       }
     }
   })), {
@@ -91,33 +91,33 @@ const b = j("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
       }
     }
   }]
-}))), K = /* @__PURE__ */ r(q, {}), Q = /* @__PURE__ */ r(L, {}), W = /* @__PURE__ */ r(_, {}), S = /* @__PURE__ */ f.forwardRef(function(t, s) {
-  const n = M({
+}))), K = /* @__PURE__ */ s(q, {}), Q = /* @__PURE__ */ s(D, {}), W = /* @__PURE__ */ s(_, {}), g = /* @__PURE__ */ f.forwardRef(function(t, r) {
+  const n = w({
     props: t,
     name: "MuiCheckbox"
   }), {
     checkedIcon: c = K,
     color: a = "primary",
-    icon: p = Q,
-    indeterminate: i = !1,
+    icon: i = Q,
+    indeterminate: l = !1,
     indeterminateIcon: k = W,
-    inputProps: O,
+    inputProps: S,
     size: d = "medium",
     disableRipple: y = !1,
-    className: g,
+    className: O,
     slots: C = {},
     slotProps: v = {},
     ...T
-  } = n, x = i ? k : p, P = i ? k : c, m = {
+  } = n, x = l ? k : i, P = l ? k : c, m = {
     ...n,
     disableRipple: y,
     color: a,
-    indeterminate: i,
+    indeterminate: l,
     size: d
-  }, z = G(m), u = v.input ?? O, [R, B] = U("root", {
-    ref: s,
+  }, z = G(m), u = v.input ?? S, [R, B] = U("root", {
+    ref: r,
     elementType: J,
-    className: $(z.root, g),
+    className: $(z.root, O),
     shouldForwardComponentProp: !0,
     externalForwardedProps: {
       slots: C,
@@ -136,18 +136,18 @@ const b = j("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
       disableRipple: y,
       slots: C,
       slotProps: {
-        input: D(typeof u == "function" ? u(m) : u, {
-          "data-indeterminate": i
+        input: L(typeof u == "function" ? u(m) : u, {
+          "data-indeterminate": l
         })
       }
     }
   });
-  return /* @__PURE__ */ r(R, {
+  return /* @__PURE__ */ s(R, {
     ...B,
     classes: z
   });
 });
-process.env.NODE_ENV !== "production" && (S.propTypes = {
+process.env.NODE_ENV !== "production" && (g.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -155,50 +155,50 @@ process.env.NODE_ENV !== "production" && (S.propTypes = {
   /**
    * If `true`, the component is checked.
    */
-  checked: e.bool,
+  checked: o.bool,
   /**
    * The icon to display when the component is checked.
    * @default <CheckBoxIcon />
    */
-  checkedIcon: e.node,
+  checkedIcon: o.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: e.object,
+  classes: o.object,
   /**
    * @ignore
    */
-  className: e.string,
+  className: o.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: e.oneOfType([e.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  color: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
   /**
    * The default checked state. Use when the component is not controlled.
    */
-  defaultChecked: e.bool,
+  defaultChecked: o.bool,
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: e.bool,
+  disabled: o.bool,
   /**
    * If `true`, the ripple effect is disabled.
    * @default false
    */
-  disableRipple: e.bool,
+  disableRipple: o.bool,
   /**
    * The icon to display when the component is unchecked.
    * @default <CheckBoxOutlineBlankIcon />
    */
-  icon: e.node,
+  icon: o.node,
   /**
    * The id of the `input` element.
    */
-  id: e.string,
+  id: o.string,
   /**
    * If `true`, the component appears indeterminate.
    * This does not set the native input element to indeterminate due
@@ -206,75 +206,86 @@ process.env.NODE_ENV !== "production" && (S.propTypes = {
    * However, we set a `data-indeterminate` attribute on the `input`.
    * @default false
    */
-  indeterminate: e.bool,
+  indeterminate: o.bool,
   /**
    * The icon to display when the component is indeterminate.
    * @default <IndeterminateCheckBoxIcon />
    */
-  indeterminateIcon: e.node,
+  indeterminateIcon: o.node,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  inputProps: e.object,
+  inputProps: o.object,
   /**
    * Callback fired when the state is changed.
    *
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange: e.func,
+  onChange: o.func,
   /**
    * If `true`, the `input` element is required.
    * @default false
    */
-  required: e.bool,
+  required: o.bool,
   /**
    * The size of the component.
    * `small` is equivalent to the dense checkbox styling.
    * @default 'medium'
    */
-  size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
+  size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: e.shape({
-    input: e.oneOfType([e.func, e.object]),
-    root: e.oneOfType([e.func, e.object])
+  slotProps: o.shape({
+    input: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: e.shape({
-    input: e.elementType,
-    root: e.elementType
+  slots: o.shape({
+    input: o.elementType,
+    root: o.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
   /**
    * The value of the component. The DOM API casts this to a string.
    * The browser uses "on" as the default value.
    */
-  value: e.any
+  value: o.any
 });
-function ne(o) {
-  const { className: t, sx: s, disabled: n, color: c = "blue", ...a } = o;
-  return /* @__PURE__ */ r(
-    S,
+function no(e) {
+  const { className: t, sx: r, disabled: n, color: c = "primary", forceError: a = !1, ...i } = e;
+  return /* @__PURE__ */ s(
+    g,
     {
       className: t,
       disabled: n,
-      ...a,
+      color: a ? "error" : c,
+      ...i,
       sx: {
-        ...s
+        ...a && {
+          color: "error.main",
+          "&.Mui-checked": {
+            color: "error.main"
+          }
+        },
+        "& + .MuiFormHelperText-root": {
+          marginLeft: 0,
+          marginTop: 0
+        },
+        ...r
       }
     }
   );
 }
 export {
-  ne as CheckBox
+  no as CheckBox
 };

package/dist/components/CheckboxGroup/index.d.ts

@@ -13,5 +13,6 @@ export interface CheckboxGroupProps {
     helperText?: string;
     onChange?: (checkedValues: string[]) => void;
     sx?: any;
+    forceError?: boolean;
 }
-export declare function CheckboxGroup({ options, required, minChecked, maxChecked, errorMessage, helperText, onChange, sx, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxGroup({ options, required, minChecked, maxChecked, errorMessage, helperText, onChange, sx, forceError, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CheckboxGroup/index.js

@@ -1,38 +1,39 @@
-import { jsxs as $, jsx as l } from "react/jsx-runtime";
-import { FormControl as x, FormGroup as G, FormControlLabel as I, Checkbox as B, FormHelperText as f } from "@mui/material";
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { FormControl as G, FormGroup as I, FormControlLabel as y, Checkbox as B, FormHelperText as f } from "@mui/material";
 import { useState as d } from "react";
 function P({
-  options: s,
-  required: b = !1,
-  minChecked: o,
-  maxChecked: r,
-  errorMessage: c,
-  helperText: m,
-  onChange: i,
-  sx: p
+  options: c,
+  required: p = !1,
+  minChecked: r,
+  maxChecked: o,
+  errorMessage: m,
+  helperText: i,
+  onChange: u,
+  sx: b,
+  forceError: h = !1
 }) {
-  const [a, h] = d(
-    s.reduce((e, t) => ({
+  const [n, g] = d(
+    c.reduce((e, t) => ({
       ...e,
       [t.name]: t.defaultChecked || !1
     }), {})
-  ), [g, F] = d(!1), v = (e) => {
-    F(!0);
+  ), [F, v] = d(!1), j = (e) => {
+    v(!0);
     const t = {
-      ...a,
+      ...n,
       [e.target.name]: e.target.checked
     };
-    h(t);
-    const L = Object.keys(t).filter(
-      (M) => t[M]
+    g(t);
+    const M = Object.keys(t).filter(
+      ($) => t[$]
     );
-    i && i(L);
-  }, n = Object.values(a).filter(Boolean).length, u = g && (o !== void 0 && n < o || r !== void 0 && n > r), j = () => c || (o !== void 0 && n < o ? `Please select at least ${o} option${o > 1 ? "s" : ""}` : r !== void 0 && n > r ? `Please select no more than ${r} option${r > 1 ? "s" : ""}` : "");
-  return /* @__PURE__ */ $(
-    x,
+    u && u(M);
+  }, a = Object.values(n).filter(Boolean).length, s = h || F && (r !== void 0 && a < r || o !== void 0 && a > o), L = () => m || (r !== void 0 && a < r ? `Please select at least ${r} option${r > 1 ? "s" : ""}` : o !== void 0 && a > o ? `Please select no more than ${o} option${o > 1 ? "s" : ""}` : "");
+  return /* @__PURE__ */ x(
+    G,
     {
-      required: b,
-      error: u,
+      required: p,
+      error: s,
       component: "fieldset",
       sx: {
         m: 0,
@@ -46,12 +47,12 @@ function P({
         "& .MuiFormControlLabel-label": {
           margin: "0 !important"
         },
-        ...p
+        ...b
       },
       variant: "standard",
       children: [
-        /* @__PURE__ */ l(G, { children: s.map((e) => /* @__PURE__ */ l(
-          I,
+        /* @__PURE__ */ l(I, { children: c.map((e) => /* @__PURE__ */ l(
+          y,
           {
             sx: {
               color: "#404A58",
@@ -62,16 +63,17 @@ function P({
             control: /* @__PURE__ */ l(
               B,
               {
-                checked: a[e.name] || !1,
-                onChange: v,
-                name: e.name
+                checked: n[e.name] || !1,
+                onChange: j,
+                name: e.name,
+                color: s ? "error" : "primary"
               }
             ),
             label: e.label
           },
           e.name
         )) }),
-        u ? /* @__PURE__ */ l(f, { children: j() }) : m ? /* @__PURE__ */ l(f, { children: m }) : null
+        s ? /* @__PURE__ */ l(f, { children: L() }) : i ? /* @__PURE__ */ l(f, { children: i }) : null
       ]
     }
   );

package/dist/components/TextFieldInput/index.d.ts

@@ -11,5 +11,6 @@ export interface TextFieldInputProps {
     multiline?: boolean;
     rows?: number;
     sx?: any;
+    forceError?: boolean;
 }
-export declare function TextFieldInput({ label, placeholder, required, errorMessage, helperText, variant, onChange, defaultValue, type, multiline, rows, sx, }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextFieldInput({ label, placeholder, required, errorMessage, helperText, variant, onChange, defaultValue, type, multiline, rows, sx, forceError, }: TextFieldInputProps): import("react/jsx-runtime").JSX.Element;