@fangzsx/component-library 0.0.40 → 0.0.41

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/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.41",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",