@fangzsx/component-library 0.0.39 → 0.0.41

package/dist/colors-BVcu3WVm.js

@@ -0,0 +1,24 @@
+const c = "#1D252D", n = "#404A58", s = "#566376", t = "#8996A9", o = "#C4CBD4", r = "#E6EAED", e = "#F4F7F9", E = "#053E72", F = "#0B6B9F", y = "#27A4E8", a = "#C8EDFE", i = "#E6F6FF", g = "#055C56", p = "#E6FEEE", m = "#8E3007", C = "#FFF9F0", D = "#800711", d = "#FFECEB", A = "#fff", B = {
+  grey800: c,
+  grey700: n,
+  grey600: s,
+  grey400: t,
+  grey200: o,
+  grey100: r,
+  grey50: e,
+  primary800: E,
+  primary700: F,
+  primary500: y,
+  primary100: a,
+  primary50: i,
+  secondary800: g,
+  secondary50: p,
+  warning800: m,
+  warning50: C,
+  destructive800: D,
+  destructive50: d,
+  white: A
+};
+export {
+  B as c
+};

package/dist/components/AppBarPublic/index.js

@@ -3,7 +3,7 @@ import { c as E } from "../../createSvgIcon-C0YrvByi.js";
 import { Stack as w, Popper as $, ClickAwayListener as D, Paper as U } from "@mui/material";
 import * as C from "react";
 import { useState as Z } from "react";
-import { C as G, B as b } from "../../index-CdcRS0lC.js";
+import { C as G, B as b } from "../../index-D9x5yU0s.js";
 import { g as V, a as A, c as l, P as r } from "../../generateUtilityClasses-BCID9NF1.js";
 import { u as H, s as B, c as T, a as h, m as v } from "../../DefaultPropsProvider-DVX_ssOt.js";
 import { c as I, a as F } from "../../useTimeout-UzNJH-cm.js";

package/dist/components/Banner/index.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { ErrorOutline as d, CheckCircle as a, InfoOutlined as m, WarningAmber as h } from "@mui/icons-material";
 import { Card as g, Box as c, Typography as e } from "@mui/material";
-import { c as n } from "../../colors-CyChpKWu.js";
+import { c as n } from "../../colors-BVcu3WVm.js";
 const y = {
   warning: { icon: h, color: "#f59e0b" },
   info: { icon: m, color: n.primary500 },

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import "../../colors-CyChpKWu.js";
-import { B as p } from "../../index-CdcRS0lC.js";
+import "../../colors-BVcu3WVm.js";
+import { B as p } from "../../index-D9x5yU0s.js";
 export {
   p as Button
 };

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/Dropdown/index.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as r, Fragment as y } from "react/jsx-runtime";
 import { ExpandMoreOutlined as C } from "@mui/icons-material";
 import { Box as I, IconButton as v, Menu as M, MenuItem as k, ListItemIcon as w, ListItemText as j } from "@mui/material";
 import { useState as B } from "react";
-import { c as t } from "../../colors-CyChpKWu.js";
+import { c as t } from "../../colors-BVcu3WVm.js";
 function L({
   items: h,
   activeItemId: e,

package/dist/components/FlatBanner/index.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
 import { ErrorOutline as C, CheckCircle as f, InfoOutlineRounded as g, WarningAmberRounded as x } from "@mui/icons-material";
 import { Card as m, Box as e, Typography as t } from "@mui/material";
-import { c as o } from "../../colors-CyChpKWu.js";
+import { c as o } from "../../colors-BVcu3WVm.js";
 const b = {
   warning: { titleColor: o.warning800, bgColor: o.warning50, icon: x, iconColor: "#f59e0b" },
   info: { titleColor: o.primary800, bgColor: o.primary50, icon: g, iconColor: "#f59e0b" },

package/dist/components/ImageUpload/index.js

@@ -3,7 +3,7 @@ import { C as M } from "../../Close-pjIlDyCW.js";
 import { c as P } from "../../createSvgIcon-C0YrvByi.js";
 import { FormControl as T, FormLabel as U, Box as l, Stack as V, Typography as a, IconButton as E, FormHelperText as q } from "@mui/material";
 import { useState as y, useRef as G, useCallback as J } from "react";
-import { c as e } from "../../colors-CyChpKWu.js";
+import { c as e } from "../../colors-BVcu3WVm.js";
 const K = P(/* @__PURE__ */ o("path", {
   d: "M19 5v14H5V5zm0-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-2m-4.86 8.86-3 3.87L9 13.14 6 17h12z"
 }), "ImageOutlined");
@@ -25,7 +25,7 @@ function or({
   disabled: n = !1,
   onChange: p
 }) {
-  const [k, h] = y(!1), [u, D] = y(null), [R, w] = y(""), d = G(null), C = m * 1024 * 1024, S = s.map((r) => `.${r}`).join(","), j = s.map(
+  const [k, h] = y(!1), [u, w] = y(null), [R, D] = y(""), d = G(null), C = m * 1024 * 1024, S = s.map((r) => `.${r}`).join(","), j = s.map(
     (r) => `image/${r === "jpg" ? "jpeg" : r}`
   ), I = J(
     function(r) {
@@ -40,7 +40,7 @@ function or({
       }
       const O = new FileReader();
       O.onload = function(g) {
-        D(g.target?.result), w(r.name), p?.(r, "");
+        w(g.target?.result), D(r.name), p?.(r, "");
       }, O.readAsDataURL(r);
     },
     [j, C, m, s, p]
@@ -61,7 +61,7 @@ function or({
     I(r.target.files?.[0] ?? null);
   }
   function B(r) {
-    r.stopPropagation(), D(null), w(""), p?.(null, ""), d.current && (d.current.value = "");
+    r.stopPropagation(), w(null), D(""), p?.(null, ""), d.current && (d.current.value = "");
   }
   const f = !!v || x && !u, $ = v || (x && !u ? `${i} can't be empty` : ""), { baseName: A, extension: H } = Q(R);
   return /* @__PURE__ */ t(T, { fullWidth: !0, error: f, disabled: n, children: [
@@ -96,7 +96,7 @@ function or({
           p: u ? 1.5 : 4,
           textAlign: "center",
           cursor: n ? "default" : "pointer",
-          bgcolor: n ? "action.disabledBackground" : k ? e.primary500 : e.grey50,
+          bgcolor: n ? "action.disabledBackground" : k ? e.primary500 : e.white,
           transition: "all 0.2s ease",
           opacity: n ? 0.6 : 1,
           "&:hover": n ? {} : {

package/dist/components/MediaCardWithAction/index.js

@@ -1,5 +1,5 @@
 import { jsx as d, jsxs as x } from "react/jsx-runtime";
-import { B as A } from "../../index-CdcRS0lC.js";
+import { B as A } from "../../index-D9x5yU0s.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";

package/dist/components/PromoCode/index.js

@@ -2,7 +2,7 @@ import { jsxs as B, jsx as o } from "react/jsx-runtime";
 import { Close as D, LocalOffer as I } from "@mui/icons-material";
 import { Box as c, Chip as S, IconButton as A, Typography as h, TextField as R, InputAdornment as T, CircularProgress as W, Button as k } from "@mui/material";
 import { useState as w, useRef as O, useEffect as P, useCallback as n } from "react";
-import { c as r } from "../../colors-CyChpKWu.js";
+import { c as r } from "../../colors-BVcu3WVm.js";
 function K({
   value: e,
   onChange: d,

package/dist/{index-CdcRS0lC.js → index-D9x5yU0s.js}

@@ -1,5 +1,5 @@
 import { jsx as c, jsxs as U } from "react/jsx-runtime";
-import { c as P } from "./colors-CyChpKWu.js";
+import { c as P } from "./colors-BVcu3WVm.js";
 import * as k from "react";
 import { g as G, a as _, c as i, P as t } from "./generateUtilityClasses-BCID9NF1.js";
 import { u as A, s as f, c as R, a as H, m as O, b as so, r as lo } from "./DefaultPropsProvider-DVX_ssOt.js";

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

@@ -1,40 +1,42 @@
 import { AppBarPublic as e } from "./components/AppBarPublic/index.js";
 import { Banner as p } from "./components/Banner/index.js";
-import { B as m } from "./index-CdcRS0lC.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.39",
+  "version": "0.0.41",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/colors-CyChpKWu.js

@@ -1,23 +0,0 @@
-const c = "#1D252D", n = "#404A58", r = "#566376", s = "#8996A9", o = "#C4CBD4", t = "#E6EAED", E = "#F4F7F9", F = "#053E72", e = "#0B6B9F", y = "#27A4E8", a = "#C8EDFE", g = "#E6F6FF", i = "#055C56", p = "#E6FEEE", m = "#8E3007", C = "#FFF9F0", D = "#800711", d = "#FFECEB", A = {
-  grey800: c,
-  grey700: n,
-  grey600: r,
-  grey400: s,
-  grey200: o,
-  grey100: t,
-  grey50: E,
-  primary800: F,
-  primary700: e,
-  primary500: y,
-  primary100: a,
-  primary50: g,
-  secondary800: i,
-  secondary50: p,
-  warning800: m,
-  warning50: C,
-  destructive800: D,
-  destructive50: d
-};
-export {
-  A as c
-};