@fangzsx/component-library 0.0.31 → 0.0.33

package/dist/components/DropdownOptions/index.js

@@ -0,0 +1,370 @@
+import { jsx as i, jsxs as E } from "react/jsx-runtime";
+import * as T from "react";
+import { useState as V, useCallback as q } from "react";
+import { a as A, F as _ } from "../../FormHelperText-B-xlmRr4.js";
+import { L as N, a as J, S as K } from "../../Select-BSsJnv6h.js";
+import { a as $, g as Q, P as o } from "../../generateUtilityClasses-BCID9NF1.js";
+import { u as X, s as Y, c as F, a as Z, r as ee, m as oe } from "../../DefaultPropsProvider-DVX_ssOt.js";
+import { u as te } from "../../useTimeout-UzNJH-cm.js";
+import { u as re } from "../../useForkRef-9kN4DArm.js";
+import { B as se } from "../../ButtonBase-CSQZHD_g.js";
+const H = $("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), P = $("MuiListItemIcon", ["root", "alignItemsFlexStart"]), D = $("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
+function ae(e) {
+  return Q("MuiMenuItem", e);
+}
+const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), ne = (e, t) => {
+  const {
+    ownerState: a
+  } = e;
+  return [t.root, a.dense && t.dense, a.divider && t.divider, !a.disableGutters && t.gutters];
+}, ie = (e) => {
+  const {
+    disabled: t,
+    dense: a,
+    divider: s,
+    disableGutters: l,
+    selected: u,
+    classes: d
+  } = e, n = Z({
+    root: ["root", a && "dense", t && "disabled", !l && "gutters", s && "divider", u && "selected"]
+  }, ae, d);
+  return {
+    ...d,
+    ...n
+  };
+}, le = Y(se, {
+  shouldForwardProp: (e) => ee(e) || e === "classes",
+  name: "MuiMenuItem",
+  slot: "Root",
+  overridesResolver: ne
+})(oe(({
+  theme: e
+}) => ({
+  ...e.typography.body1,
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  position: "relative",
+  textDecoration: "none",
+  minHeight: 48,
+  paddingTop: 6,
+  paddingBottom: 6,
+  boxSizing: "border-box",
+  whiteSpace: "nowrap",
+  "&:hover": {
+    textDecoration: "none",
+    backgroundColor: (e.vars || e).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  },
+  [`&.${y.selected}`]: {
+    backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity),
+    [`&.${y.focusVisible}`]: {
+      backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.focusOpacity}`)
+    }
+  },
+  [`&.${y.selected}:hover`]: {
+    backgroundColor: e.alpha((e.vars || e).palette.primary.main, `${(e.vars || e).palette.action.selectedOpacity} + ${(e.vars || e).palette.action.hoverOpacity}`),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: e.alpha((e.vars || e).palette.primary.main, (e.vars || e).palette.action.selectedOpacity)
+    }
+  },
+  [`&.${y.focusVisible}`]: {
+    backgroundColor: (e.vars || e).palette.action.focus
+  },
+  [`&.${y.disabled}`]: {
+    opacity: (e.vars || e).palette.action.disabledOpacity
+  },
+  [`& + .${H.root}`]: {
+    marginTop: e.spacing(1),
+    marginBottom: e.spacing(1)
+  },
+  [`& + .${H.inset}`]: {
+    marginLeft: 52
+  },
+  [`& .${D.root}`]: {
+    marginTop: 0,
+    marginBottom: 0
+  },
+  [`& .${D.inset}`]: {
+    paddingLeft: 36
+  },
+  [`& .${P.root}`]: {
+    minWidth: 36
+  },
+  variants: [{
+    props: ({
+      ownerState: t
+    }) => !t.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.divider,
+    style: {
+      borderBottom: `1px solid ${(e.vars || e).palette.divider}`,
+      backgroundClip: "padding-box"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => !t.dense,
+    style: {
+      [e.breakpoints.up("sm")]: {
+        minHeight: "auto"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.dense,
+    style: {
+      minHeight: 32,
+      // https://m2.material.io/components/menus#specs > Dense
+      paddingTop: 4,
+      paddingBottom: 4,
+      ...e.typography.body2,
+      [`& .${P.root} svg`]: {
+        fontSize: "1.25rem"
+      }
+    }
+  }]
+}))), L = /* @__PURE__ */ T.forwardRef(function(t, a) {
+  const s = X({
+    props: t,
+    name: "MuiMenuItem"
+  }), {
+    autoFocus: l = !1,
+    component: u = "li",
+    dense: d = !1,
+    divider: p = !1,
+    disableGutters: n = !1,
+    focusVisibleClassName: m,
+    role: b = "menuitem",
+    tabIndex: C,
+    className: I,
+    ...h
+  } = s, f = T.useContext(N), M = T.useMemo(() => ({
+    dense: d || f.dense || !1,
+    disableGutters: n
+  }), [f.dense, d, n]), g = T.useRef(null);
+  te(() => {
+    l && (g.current ? g.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
+  }, [l]);
+  const k = {
+    ...s,
+    dense: M.dense,
+    divider: p,
+    disableGutters: n
+  }, v = ie(s), O = re(g, a);
+  let x;
+  return s.disabled || (x = C !== void 0 ? C : -1), /* @__PURE__ */ i(N.Provider, {
+    value: M,
+    children: /* @__PURE__ */ i(le, {
+      ref: O,
+      role: b,
+      tabIndex: x,
+      component: u,
+      focusVisibleClassName: F(v.focusVisible, m),
+      className: F(v.root, I),
+      ...h,
+      ownerState: k,
+      classes: v
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (L.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: o.bool,
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent Menu component.
+   * @default false
+   */
+  dense: o.bool,
+  /**
+   * @ignore
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: o.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the menu item.
+   * @default false
+   */
+  divider: o.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: o.string,
+  /**
+   * @ignore
+   */
+  role: o.string,
+  /**
+   * If `true`, the component is selected.
+   * @default false
+   */
+  selected: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: o.number
+});
+function xe(e) {
+  const {
+    className: t,
+    sx: a,
+    label: s = "",
+    options: l = [],
+    value: u = "",
+    onChange: d,
+    required: p = !1,
+    disabled: n = !1,
+    forceError: m = !1,
+    errorMessage: b = "This field is required",
+    helperText: C,
+    placeholder: I = "Select an option",
+    formControlProps: h,
+    customValidation: f,
+    size: M,
+    variant: g = "outlined",
+    fullWidth: k = !0,
+    ...v
+  } = e, [O, x] = V(!1), [R, w] = V(!1), [j, S] = V(""), B = q(
+    (r) => {
+      if (p && !r) {
+        w(!0), S(b);
+        return;
+      }
+      if (f) {
+        const c = f(r);
+        if (c) {
+          w(!0), S(c);
+          return;
+        }
+      }
+      w(!1), S("");
+    },
+    [p, b, f]
+  ), U = m || O && R, G = m ? b : O && R ? j : C || " ", z = (r) => {
+    const c = r.target.value;
+    x(!0), B(c), d?.(c);
+  }, W = () => {
+    x(!0), B(u);
+  };
+  return /* @__PURE__ */ E(
+    A,
+    {
+      fullWidth: k,
+      error: U,
+      disabled: n,
+      required: p,
+      size: M,
+      variant: g,
+      ...h,
+      sx: {
+        "& .MuiInputBase-root": {
+          height: 40
+        },
+        "& .MuiInputLabel-root": {
+          transform: "translate(14px, -9px) scale(0.75)",
+          "&.MuiInputLabel-shrink": {
+            transform: "translate(14px, -9px) scale(0.75)"
+          }
+        },
+        "& .MuiSelect-select": {
+          padding: "8px 14px"
+        },
+        "& .MuiFormHelperText-root": {
+          marginLeft: 0,
+          marginRight: 0
+        },
+        ...h?.sx
+      },
+      children: [
+        s && /* @__PURE__ */ i(J, { shrink: !0, children: s }),
+        /* @__PURE__ */ E(
+          K,
+          {
+            className: t,
+            value: u,
+            label: s || void 0,
+            onChange: z,
+            onBlur: W,
+            disabled: n,
+            notched: !!s,
+            displayEmpty: !0,
+            renderValue: (r) => r ? l.find((c) => c.value === r)?.label ?? r : /* @__PURE__ */ i("em", { style: { color: "#9e9e9e" }, children: I }),
+            ...v,
+            sx: {
+              ...m && {
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "error.main"
+                },
+                "&:hover .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "error.dark"
+                },
+                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "error.main"
+                }
+              },
+              ...a
+            },
+            children: [
+              /* @__PURE__ */ i(L, { value: "", disabled: !0, children: /* @__PURE__ */ i("em", { children: I }) }),
+              l.map((r) => /* @__PURE__ */ i(L, { value: r.value, children: r.label }, r.value))
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(_, { children: G })
+      ]
+    }
+  );
+}
+export {
+  xe as DropdownOptions
+};

package/dist/components/MediaCardWithAction/index.js

@@ -1,11 +1,11 @@
 import { jsx as d, jsxs as x } from "react/jsx-runtime";
-import { B as A } from "../../index-CS-LWC7Z.js";
+import { B as A } from "../../index-Dnsx2wLn.js";
 import * as u from "react";
 import { g as m, a as f, P as e } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as C, s as g, c as y, a as b } from "../../DefaultPropsProvider-DVX_ssOt.js";
-import { P as U } from "../../Paper-oafkOzNM.js";
-import { a as N } from "../../useTimeout-DmOXPFt0.js";
-import { T as v } from "../../Typography-CTrRb9FL.js";
+import { P as U } from "../../Paper-Cz0ZdEav.js";
+import { a as N } from "../../useTimeout-UzNJH-cm.js";
+import { T as v } from "../../Typography-Cro52PHG.js";
 function I(o) {
   return m("MuiCard", o);
 }

package/dist/components/RadioButtonGroup/index.js

@@ -1,16 +1,16 @@
 import { jsx as n, jsxs as I } from "react/jsx-runtime";
 import * as m from "react";
 import { useState as Z } from "react";
-import { f as X, c as lo, F as io, a as co, b as po } from "../../FormLabel-D4ON51Wt.js";
+import { f as X, c as lo, a as io, b as co, F as po } from "../../FormHelperText-B-xlmRr4.js";
 import { a as $, g as B, c as M, P as o } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as _, c as G, s as N, a as L, m as V, r as Y } from "../../DefaultPropsProvider-DVX_ssOt.js";
 import { a as A, u as uo } from "../../useFormControl-BGLuGvqS.js";
 import { u as fo } from "../../useForkRef-9kN4DArm.js";
 import { u as mo } from "../../useId-CK6Kn3Tn.js";
 import { u as oo } from "../../useSlot-DKccmcQE.js";
-import { T as J } from "../../Typography-CTrRb9FL.js";
-import { r as eo, c as K } from "../../useTimeout-DmOXPFt0.js";
-import { S as bo } from "../../SwitchBase-V2UoemN5.js";
+import { T as J } from "../../Typography-Cro52PHG.js";
+import { r as eo, c as K } from "../../useTimeout-UzNJH-cm.js";
+import { S as bo } from "../../SwitchBase-DWe26Qyv.js";
 import { c as ro } from "../../createSvgIcon-C0YrvByi.js";
 function yo(e) {
   return B("MuiFormControlLabel", e);

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;