@fangzsx/component-library 0.0.40 → 0.0.42

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

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

package/dist/components/CheckboxGroup/index.js

@@ -1,39 +1,41 @@
-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 { jsxs as G, jsx as l } from "react/jsx-runtime";
+import { FormControl as I, FormGroup as y, FormControlLabel as B, Checkbox as C, FormHelperText as p } from "@mui/material";
 import { useState as d } from "react";
-function P({
+function S({
   options: c,
-  required: p = !1,
+  required: b = !1,
   minChecked: r,
   maxChecked: o,
   errorMessage: m,
   helperText: i,
   onChange: u,
-  sx: b,
-  forceError: h = !1
+  sx: h,
+  forceError: g = !1,
+  disabled: f = !1
 }) {
-  const [n, g] = d(
+  const [n, F] = d(
     c.reduce((e, t) => ({
       ...e,
       [t.name]: t.defaultChecked || !1
     }), {})
-  ), [F, v] = d(!1), j = (e) => {
-    v(!0);
+  ), [v, j] = d(!1), L = (e) => {
+    j(!0);
     const t = {
       ...n,
       [e.target.name]: e.target.checked
     };
-    g(t);
-    const M = Object.keys(t).filter(
-      ($) => t[$]
+    F(t);
+    const $ = Object.keys(t).filter(
+      (x) => t[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,
+    u && u($);
+  }, a = Object.values(n).filter(Boolean).length, s = !f && (g || v && (r !== void 0 && a < r || o !== void 0 && a > o)), M = () => 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__ */ G(
+    I,
     {
-      required: p,
+      required: b,
       error: s,
+      disabled: f,
       component: "fieldset",
       sx: {
         m: 0,
@@ -47,12 +49,12 @@ function P({
         "& .MuiFormControlLabel-label": {
           margin: "0 !important"
         },
-        ...b
+        ...h
       },
       variant: "standard",
       children: [
-        /* @__PURE__ */ l(I, { children: c.map((e) => /* @__PURE__ */ l(
-          y,
+        /* @__PURE__ */ l(y, { children: c.map((e) => /* @__PURE__ */ l(
+          B,
           {
             sx: {
               color: "#404A58",
@@ -61,10 +63,10 @@ function P({
               }
             },
             control: /* @__PURE__ */ l(
-              B,
+              C,
               {
                 checked: n[e.name] || !1,
-                onChange: j,
+                onChange: L,
                 name: e.name,
                 color: s ? "error" : "primary"
               }
@@ -73,11 +75,11 @@ function P({
           },
           e.name
         )) }),
-        s ? /* @__PURE__ */ l(f, { children: L() }) : i ? /* @__PURE__ */ l(f, { children: i }) : null
+        s ? /* @__PURE__ */ l(p, { children: M() }) : i ? /* @__PURE__ */ l(p, { children: i }) : null
       ]
     }
   );
 }
 export {
-  P as CheckboxGroup
+  S as CheckboxGroup
 };

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+export interface SectionAction {
+    /** Icon element to render */
+    icon: ReactNode;
+    /** Click handler */
+    onClick: () => void;
+    /** Accessible label for the button */
+    ariaLabel?: string;
+    /** Disable the action button */
+    disabled?: boolean;
+}
+export interface CollapsibleSectionProps {
+    title: string;
+    children?: ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onChange?: (expanded: boolean) => void;
+    /** Optional icon displayed before the title */
+    icon?: ReactNode;
+    /** One or more action buttons rendered on the right side of the header */
+    actions?: SectionAction[];
+    disabled?: boolean;
+    sx?: object;
+}
+export interface LabelValueProps {
+    label: string;
+    children?: ReactNode;
+    gutterBottom?: boolean;
+}
+export declare function LabelValue({ label, children, gutterBottom }: LabelValueProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleSection({ title, children, defaultExpanded, expanded: controlledExpanded, onChange, icon, actions, disabled, sx, }: CollapsibleSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CollapsibleSection/index.js

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useState as I } from "react";
+import { Accordion as A, AccordionSummary as S, Box as d, Typography as s, IconButton as M, AccordionDetails as j } from "@mui/material";
+import { c as k } from "../../createSvgIcon-C0YrvByi.js";
+const w = k(/* @__PURE__ */ e("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), "ExpandMore");
+function L({ label: i, children: t, gutterBottom: a = !0 }) {
+  return /* @__PURE__ */ r(d, { sx: { mb: a ? 2.5 : 0 }, children: [
+    /* @__PURE__ */ e(s, { variant: "body2", fontWeight: 600, gutterBottom: !0, children: i }),
+    typeof t == "string" ? /* @__PURE__ */ e(s, { variant: "body2", color: "text.secondary", children: t }) : t
+  ] });
+}
+function W({
+  title: i,
+  children: t,
+  defaultExpanded: a = !1,
+  expanded: c,
+  onChange: f,
+  icon: x,
+  actions: l,
+  disabled: m = !1,
+  sx: u
+}) {
+  const [b, g] = I(a), p = c !== void 0, h = p ? c : b;
+  function y(n, o) {
+    p || g(o), f?.(o);
+  }
+  function v(n, o) {
+    n.stopPropagation(), o.onClick();
+  }
+  return /* @__PURE__ */ r(
+    A,
+    {
+      expanded: h,
+      onChange: y,
+      disabled: m,
+      disableGutters: !0,
+      elevation: 0,
+      sx: {
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: 2,
+        "&::before": { display: "none" },
+        overflow: "hidden",
+        ...u
+      },
+      children: [
+        /* @__PURE__ */ r(
+          S,
+          {
+            expandIcon: /* @__PURE__ */ e(w, {}),
+            sx: {
+              flexDirection: "row-reverse",
+              gap: 1,
+              "& .MuiAccordionSummary-content": {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                my: 1
+              }
+            },
+            children: [
+              /* @__PURE__ */ r(d, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                x,
+                /* @__PURE__ */ e(s, { variant: "subtitle1", fontWeight: 500, children: i })
+              ] }),
+              l && l.length > 0 && /* @__PURE__ */ e(d, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: l.map((n, o) => /* @__PURE__ */ e(
+                M,
+                {
+                  size: "small",
+                  disabled: n.disabled,
+                  onClick: (C) => v(C, n),
+                  "aria-label": n.ariaLabel ?? `Action ${o + 1}`,
+                  children: n.icon
+                },
+                o
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(j, { sx: { pt: 0, px: 4, pb: 3 }, children: t })
+      ]
+    }
+  );
+}
+export {
+  W as CollapsibleSection,
+  L as LabelValue
+};

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

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

package/dist/components/TextFieldInput/index.js

@@ -1,9 +1,9 @@
-import { jsx as f, jsxs as de } from "react/jsx-runtime";
+import { jsx as b, jsxs as de } from "react/jsx-runtime";
 import * as me from "react";
 import { useState as D } from "react";
 import { g as fe, a as be, P as e } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as Te, c as he, s as xe, a as ye } from "../../DefaultPropsProvider-DVX_ssOt.js";
-import { u as p } from "../../useSlot-DKccmcQE.js";
+import { u as i } from "../../useSlot-DKccmcQE.js";
 import { u as Pe } from "../../useId-CK6Kn3Tn.js";
 import { O as Ie, F as Fe, I as ge, a as Oe, S as we } from "../../Select-BSsJnv6h.js";
 import { F as Le, a as Se } from "../../FormHelperText-B-xlmRr4.js";
@@ -18,39 +18,39 @@ const Re = {
   outlined: Ie
 }, ve = (s) => {
   const {
-    classes: i
+    classes: a
   } = s;
   return ye({
     root: ["root"]
-  }, je, i);
+  }, je, a);
 }, He = xe(Se, {
   name: "MuiTextField",
   slot: "Root"
-})({}), q = /* @__PURE__ */ me.forwardRef(function(i, a) {
-  const b = Te({
-    props: i,
+})({}), q = /* @__PURE__ */ me.forwardRef(function(a, u) {
+  const T = Te({
+    props: a,
     name: "MuiTextField"
   }), {
-    autoComplete: g,
-    autoFocus: T = !1,
-    children: u,
-    className: O,
-    color: h = "primary",
-    defaultValue: c,
-    disabled: x = !1,
-    error: y = !1,
-    FormHelperTextProps: w,
+    autoComplete: O,
+    autoFocus: h = !1,
+    children: c,
+    className: w,
+    color: x = "primary",
+    defaultValue: d,
+    disabled: y = !1,
+    error: P = !1,
+    FormHelperTextProps: L,
     fullWidth: l = !1,
-    helperText: d,
-    id: L,
-    InputLabelProps: S,
-    inputProps: C,
-    InputProps: j,
-    inputRef: R,
+    helperText: p,
+    id: S,
+    InputLabelProps: C,
+    inputProps: j,
+    InputProps: R,
+    inputRef: v,
     label: t,
-    maxRows: v,
-    minRows: P,
-    multiline: N = !1,
+    maxRows: I,
+    minRows: H,
+    multiline: m = !1,
     name: _,
     onBlur: $,
     onChange: z,
@@ -58,40 +58,40 @@ const Re = {
     placeholder: G,
     required: V = !1,
     rows: J,
-    select: I = !1,
-    SelectProps: H,
+    select: F = !1,
+    SelectProps: M,
     slots: B = {},
     slotProps: K = {},
     type: Q,
     value: U,
-    variant: F = "outlined",
+    variant: g = "outlined",
     ...X
-  } = b, o = {
-    ...b,
-    autoFocus: T,
-    color: h,
-    disabled: x,
-    error: y,
+  } = T, o = {
+    ...T,
+    autoFocus: h,
+    color: x,
+    disabled: y,
+    error: P,
     fullWidth: l,
-    multiline: N,
+    multiline: m,
     required: V,
-    select: I,
-    variant: F
+    select: F,
+    variant: g
   }, Y = ve(o);
-  process.env.NODE_ENV !== "production" && I && !u && console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
-  const n = Pe(L), M = d && n ? `${n}-helper-text` : void 0, k = t && n ? `${n}-label` : void 0, Z = Re[F], r = {
+  process.env.NODE_ENV !== "production" && F && !c && console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
+  const n = Pe(S), E = p && n ? `${n}-helper-text` : void 0, k = t && n ? `${n}-label` : void 0, Z = Re[g], r = {
     slots: B,
     slotProps: {
-      input: j,
-      inputLabel: S,
-      htmlInput: C,
-      formHelperText: w,
-      select: H,
+      input: R,
+      inputLabel: C,
+      htmlInput: j,
+      formHelperText: L,
+      select: M,
       ...K
     }
-  }, m = {}, E = r.slotProps.inputLabel;
-  F === "outlined" && (E && typeof E.shrink < "u" && (m.notched = E.shrink), m.label = t), I && ((!H || !H.native) && (m.id = void 0), m["aria-describedby"] = void 0);
-  const [ee, te] = p("root", {
+  }, f = {}, N = r.slotProps.inputLabel;
+  g === "outlined" && (N && typeof N.shrink < "u" && (f.notched = N.shrink), f.label = t), F && ((!M || !M.native) && (f.id = void 0), f["aria-describedby"] = void 0);
+  const [ee, te] = i("root", {
     elementType: He,
     shouldForwardComponentProp: !0,
     externalForwardedProps: {
@@ -99,52 +99,52 @@ const Re = {
       ...X
     },
     ownerState: o,
-    className: he(Y.root, O),
-    ref: a,
+    className: he(Y.root, w),
+    ref: u,
     additionalProps: {
-      disabled: x,
-      error: y,
+      disabled: y,
+      error: P,
       fullWidth: l,
       required: V,
-      color: h,
-      variant: F
+      color: x,
+      variant: g
     }
-  }), [oe, ne] = p("input", {
+  }), [oe, ne] = i("input", {
     elementType: Z,
     externalForwardedProps: r,
-    additionalProps: m,
+    additionalProps: f,
     ownerState: o
-  }), [re, se] = p("inputLabel", {
+  }), [re, se] = i("inputLabel", {
     elementType: Oe,
     externalForwardedProps: r,
     ownerState: o
-  }), [le, pe] = p("htmlInput", {
+  }), [le, pe] = i("htmlInput", {
     elementType: "input",
     externalForwardedProps: r,
     ownerState: o
-  }), [ie, ae] = p("formHelperText", {
+  }), [ie, ae] = i("formHelperText", {
     elementType: Le,
     externalForwardedProps: r,
     ownerState: o
-  }), [ue, ce] = p("select", {
+  }), [ue, ce] = i("select", {
     elementType: we,
     externalForwardedProps: r,
     ownerState: o
-  }), W = /* @__PURE__ */ f(oe, {
-    "aria-describedby": M,
-    autoComplete: g,
-    autoFocus: T,
-    defaultValue: c,
+  }), W = /* @__PURE__ */ b(oe, {
+    "aria-describedby": E,
+    autoComplete: O,
+    autoFocus: h,
+    defaultValue: d,
     fullWidth: l,
-    multiline: N,
+    multiline: m,
     name: _,
     rows: J,
-    maxRows: v,
-    minRows: P,
+    maxRows: I,
+    minRows: H,
     type: Q,
     value: U,
     id: n,
-    inputRef: R,
+    inputRef: v,
     onBlur: $,
     onChange: z,
     onFocus: A,
@@ -157,23 +157,23 @@ const Re = {
   });
   return /* @__PURE__ */ de(ee, {
     ...te,
-    children: [t != null && t !== "" && /* @__PURE__ */ f(re, {
+    children: [t != null && t !== "" && /* @__PURE__ */ b(re, {
       htmlFor: n,
       id: k,
       ...se,
       children: t
-    }), I ? /* @__PURE__ */ f(ue, {
-      "aria-describedby": M,
+    }), F ? /* @__PURE__ */ b(ue, {
+      "aria-describedby": E,
       id: n,
       labelId: k,
       value: U,
       input: W,
       ...ce,
-      children: u
-    }) : W, d && /* @__PURE__ */ f(ie, {
-      id: M,
+      children: c
+    }) : W, p && /* @__PURE__ */ b(ie, {
+      id: E,
       ...ae,
-      children: d
+      children: p
     })]
   });
 });
@@ -381,46 +381,48 @@ process.env.NODE_ENV !== "production" && (q.propTypes = {
 });
 function qe({
   label: s,
-  placeholder: i,
-  required: a = !1,
-  errorMessage: b = "This field is required",
-  helperText: g,
-  variant: T = "outlined",
-  onChange: u,
-  defaultValue: O = "",
-  type: h = "text",
-  multiline: c = !1,
-  rows: x,
-  sx: y,
-  forceError: w = !1
+  placeholder: a,
+  required: u = !1,
+  errorMessage: T = "This field is required",
+  helperText: O,
+  variant: h = "outlined",
+  onChange: c,
+  defaultValue: w = "",
+  type: x = "text",
+  multiline: d = !1,
+  rows: y,
+  sx: P,
+  forceError: L = !1,
+  disabled: l = !1
 }) {
-  const [l, d] = D(O), [L, S] = D(!1), C = (v) => {
-    const P = v.target.value;
-    d(P), u && u(P);
-  }, j = () => {
-    S(!0);
-  }, R = String(l || "").trim() === "", t = w || L && a && R;
-  return /* @__PURE__ */ f(
+  const [p, S] = D(w), [C, j] = D(!1), R = (H) => {
+    const m = H.target.value;
+    S(m), c && c(m);
+  }, v = () => {
+    j(!0);
+  }, t = String(p || "").trim() === "", I = !l && (L || C && u && t);
+  return /* @__PURE__ */ b(
     q,
     {
       label: s,
-      placeholder: i,
-      value: l,
-      onChange: C,
-      onBlur: j,
-      error: t,
-      helperText: t ? b : g || " ",
-      variant: T,
-      required: a,
-      type: h,
-      multiline: c,
-      rows: x,
-      InputLabelProps: {
-        shrink: !0
+      placeholder: a,
+      value: p,
+      onChange: R,
+      onBlur: v,
+      error: I,
+      helperText: I ? T : O || " ",
+      variant: h,
+      required: u,
+      disabled: l,
+      type: x,
+      multiline: d,
+      rows: y,
+      slotProps: {
+        inputLabel: { shrink: !0 }
       },
       sx: {
         "& .MuiInputBase-root": {
-          height: c ? "auto" : 40
+          height: d ? "auto" : 40
         },
         "& .MuiInputLabel-root": {
           transform: "translate(14px, -9px) scale(0.75)",
@@ -429,7 +431,7 @@ function qe({
           }
         },
         "& .MuiOutlinedInput-input": {
-          padding: c ? "8.5px 14px" : "8px 14px"
+          padding: d ? "8.5px 14px" : "8px 14px"
         },
         "& .MuiFormHelperText-root": {
           marginLeft: 0,
@@ -439,7 +441,7 @@ function qe({
           border: "none !important",
           outline: "none !important"
         },
-        ...y
+        ...P
       },
       fullWidth: !0
     }

package/dist/main.d.ts

@@ -2,6 +2,7 @@ export { AppBarPublic } from './components/AppBarPublic';
 export { Banner } from './components/Banner';
 export { Button } from './components/Button';
 export { CheckBox } from './components/Checkbox';
+export { CollapsibleSection } from './components/CollapsibleSection';
 export { ScrollableDialog as Dialog } from './components/Dialog';
 export { CheckboxGroup } from './components/CheckboxGroup';
 export { Dropdown } from './components/Dropdown';

package/dist/main.js

@@ -2,39 +2,41 @@ import { AppBarPublic as e } from "./components/AppBarPublic/index.js";
 import { Banner as p } from "./components/Banner/index.js";
 import { B as m } from "./index-D9x5yU0s.js";
 import { CheckBox as a } from "./components/Checkbox/index.js";
+import { CollapsibleSection as l } from "./components/CollapsibleSection/index.js";
 import { ScrollableDialog as d } from "./components/Dialog/index.js";
-import { CheckboxGroup as l } from "./components/CheckboxGroup/index.js";
-import { Dropdown as B } from "./components/Dropdown/index.js";
-import { DropdownOptions as s } from "./components/DropdownOptions/index.js";
-import { FlatBanner as D } from "./components/FlatBanner/index.js";
-import { ImageUpload as g } from "./components/ImageUpload/index.js";
-import { Label as P } from "./components/Label/index.js";
-import { LinearProgress as A } from "./components/LinearProgress/index.js";
-import { MediaCardWithAction as F } from "./components/MediaCardWithAction/index.js";
-import { PhoneAndCountryDropdown as I } from "./components/PhoneAndCountryDropdown/index.js";
-import { PromoCode as S } from "./components/PromoCode/index.js";
-import { RadioButtonGroup as y } from "./components/RadioButtonGroup/index.js";
-import { Stepper as O } from "./components/Stepper/index.js";
-import { Text as U } from "./components/Text/index.js";
-import { TextFieldInput as j } from "./components/TextFieldInput/index.js";
+import { CheckboxGroup as B } from "./components/CheckboxGroup/index.js";
+import { Dropdown as s } from "./components/Dropdown/index.js";
+import { DropdownOptions as b } from "./components/DropdownOptions/index.js";
+import { FlatBanner as g } from "./components/FlatBanner/index.js";
+import { ImageUpload as P } from "./components/ImageUpload/index.js";
+import { Label as A } from "./components/Label/index.js";
+import { LinearProgress as k } from "./components/LinearProgress/index.js";
+import { MediaCardWithAction as G } from "./components/MediaCardWithAction/index.js";
+import { PhoneAndCountryDropdown as L } from "./components/PhoneAndCountryDropdown/index.js";
+import { PromoCode as y } from "./components/PromoCode/index.js";
+import { RadioButtonGroup as O } from "./components/RadioButtonGroup/index.js";
+import { Stepper as U } from "./components/Stepper/index.js";
+import { Text as j } from "./components/Text/index.js";
+import { TextFieldInput as v } from "./components/TextFieldInput/index.js";
 export {
   e as AppBarPublic,
   p as Banner,
   m as Button,
   a as CheckBox,
-  l as CheckboxGroup,
+  B as CheckboxGroup,
+  l as CollapsibleSection,
   d as Dialog,
-  B as Dropdown,
-  s as DropdownOptions,
-  D as FlatBanner,
-  g as ImageUpload,
-  P as Label,
-  A as LinearProgress,
-  F as MediaCardWithAction,
-  I as PhoneAndCountryDropdown,
-  S as PromoCode,
-  y as RadioButtonGroup,
-  O as Stepper,
-  U as Text,
-  j as TextFieldInput
+  s as Dropdown,
+  b as DropdownOptions,
+  g as FlatBanner,
+  P as ImageUpload,
+  A as Label,
+  k as LinearProgress,
+  G as MediaCardWithAction,
+  L as PhoneAndCountryDropdown,
+  y as PromoCode,
+  O as RadioButtonGroup,
+  U as Stepper,
+  j as Text,
+  v as TextFieldInput
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fangzsx/component-library",
   "author": "Jay Gilbert Garzon",
   "private": false,
-  "version": "0.0.40",
+  "version": "0.0.42",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",