@fangzsx/component-library 0.0.10 → 0.0.12

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

@@ -0,0 +1,17 @@
+export interface CheckboxOption {
+    name: string;
+    label: string;
+    defaultChecked?: boolean;
+}
+export interface CheckboxGroupProps {
+    label: string;
+    options: CheckboxOption[];
+    required?: boolean;
+    minChecked?: number;
+    maxChecked?: number;
+    errorMessage?: string;
+    helperText?: string;
+    onChange?: (checkedValues: string[]) => void;
+    sx?: any;
+}
+export declare function CheckboxGroup({ options, required, minChecked, maxChecked, errorMessage, helperText, onChange, sx, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CheckboxGroup/index.js

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

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+interface DropdownItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    icon?: ReactNode;
+    description?: string;
+    customContent?: ReactNode;
+    activeIcon?: ReactNode;
+}
+interface DropdownProps {
+    items: DropdownItem[];
+    activeItemId?: string;
+    onItemSelect?: (item: DropdownItem) => void;
+    buttonIcon?: ReactNode;
+    buttonSx?: object;
+    menuMinWidth?: number;
+    renderCustomItem?: (item: DropdownItem, isActive: boolean) => ReactNode;
+}
+export declare function Dropdown({ items, activeItemId, onItemSelect, buttonIcon, buttonSx, menuMinWidth, renderCustomItem }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Dropdown/index.js

@@ -0,0 +1,120 @@
+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-BYtTt7gN.js";
+function L({
+  items: h,
+  activeItemId: e,
+  onItemSelect: p,
+  buttonIcon: u,
+  buttonSx: f = {},
+  menuMinWidth: g = 200,
+  renderCustomItem: c
+}) {
+  const [i, s] = B(null), l = !!i, x = (o) => {
+    s(o.currentTarget);
+  }, a = () => {
+    s(null);
+  }, m = (o) => {
+    o.disabled || (p?.(o), a());
+  }, b = (o) => {
+    const n = e === o.id;
+    return c ? c(o, n) : o.customContent ? o.customContent : /* @__PURE__ */ d(y, { children: [
+      (o.icon || n && o.activeIcon) && /* @__PURE__ */ r(w, { sx: { minWidth: 36 }, children: n && o.activeIcon ? o.activeIcon : o.icon }),
+      /* @__PURE__ */ r(
+        j,
+        {
+          primary: o.label,
+          secondary: o.description,
+          slotProps: {
+            secondary: {
+              variant: "caption",
+              sx: { color: t.grey600 }
+            }
+          }
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ d(
+    I,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "#f5f5f5",
+        borderRadius: "10px"
+      },
+      children: [
+        /* @__PURE__ */ r(
+          v,
+          {
+            onClick: x,
+            sx: {
+              width: "100%",
+              height: "100%",
+              padding: 0,
+              color: "white",
+              bgcolor: "white",
+              borderRadius: "10px",
+              "&:hover": {
+                bgcolor: t.grey50
+              },
+              ...f
+            },
+            children: u || /* @__PURE__ */ r(
+              C,
+              {
+                sx: {
+                  transform: l ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s ease",
+                  color: t.grey600
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          M,
+          {
+            anchorEl: i,
+            open: l,
+            onClose: a,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "right"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "right"
+            },
+            slotProps: {
+              paper: {
+                sx: {
+                  minWidth: g,
+                  mt: 1
+                }
+              }
+            },
+            children: h.map((o) => /* @__PURE__ */ r(
+              k,
+              {
+                onClick: () => m(o),
+                selected: e === o.id,
+                disabled: o.disabled,
+                children: b(o)
+              },
+              o.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  L as Dropdown
+};

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

@@ -4,6 +4,7 @@ type BannerProps = {
     type: "warning" | "info" | "success" | "error";
     title: string;
     description: string | ReactNode;
+    withIcon: boolean;
 };
 export declare function FlatBanner(props: BannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FlatBanner/index.js

@@ -1,32 +1,36 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { Card as p, Box as t, Typography as i } from "@mui/material";
+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-BYtTt7gN.js";
-const d = {
-  warning: { titleColor: o.warning800, bgColor: o.warning50 },
-  info: { titleColor: o.primary800, bgColor: o.primary50 },
-  success: { titleColor: o.secondary800, bgColor: o.secondary50 },
-  error: { titleColor: o.destructive800, bgColor: o.destructive50 }
+const b = {
+  warning: { titleColor: o.warning800, bgColor: o.warning50, icon: x, iconColor: "#f59e0b" },
+  info: { titleColor: o.primary800, bgColor: o.primary50, icon: g, iconColor: "#f59e0b" },
+  success: { titleColor: o.secondary800, bgColor: o.secondary50, icon: f, iconColor: "#10b981" },
+  error: { titleColor: o.destructive800, bgColor: o.destructive50, icon: C, iconColor: "#ef4444" }
 };
-function f(l) {
-  const { type: n, title: c, description: s } = l, e = d[n];
-  return /* @__PURE__ */ r(
-    p,
+function I(c) {
+  const { type: l, title: s, description: d, withIcon: a } = c, r = b[l], p = r.icon;
+  return /* @__PURE__ */ n(
+    m,
     {
       sx: {
         display: "flex",
-        backgroundColor: e.bgColor,
+        backgroundColor: r.bgColor,
         borderRadius: "5px",
         py: 1.5,
         px: 2,
         boxShadow: 2
       },
-      children: /* @__PURE__ */ r(t, { display: "flex", alignItems: "center", gap: 2, children: /* @__PURE__ */ a(t, { children: [
-        /* @__PURE__ */ r(i, { sx: { fontWeight: 700, fontSize: 16, color: e.titleColor, mb: 0.5 }, children: c }),
-        /* @__PURE__ */ r(i, { sx: { color: o.grey800, fontSize: "13px" }, children: s })
-      ] }) })
+      children: /* @__PURE__ */ i(e, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [
+        a && /* @__PURE__ */ n(p, { sx: { color: r.iconColor, fontSize: "24px", display: { xs: "none", md: "block" } } }),
+        /* @__PURE__ */ i(e, { children: [
+          /* @__PURE__ */ n(t, { sx: { fontWeight: 700, fontSize: 16, color: r.titleColor, mb: 0.5 }, children: s }),
+          /* @__PURE__ */ n(t, { sx: { color: o.grey800, fontSize: "13px" }, children: d })
+        ] })
+      ] })
     }
   );
 }
 export {
-  f as FlatBanner
+  I as FlatBanner
 };

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

@@ -0,0 +1,3 @@
+import { LinearProgressProps } from '@mui/material';
+
+export declare function LinearProgress(props: LinearProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/LinearProgress/index.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { LinearProgress as n } from "@mui/material";
+import { B as a } from "../../Box-DPlM16yK.js";
+function c(o) {
+  const { sx: e, value: s = 0, color: i, ...t } = o;
+  return /* @__PURE__ */ r(a, { sx: { width: "100%", minWidth: "100px" }, children: /* @__PURE__ */ r(
+    n,
+    {
+      variant: "determinate",
+      color: i,
+      value: s,
+      ...t,
+      sx: { ...e }
+    }
+  ) });
+}
+export {
+  c as LinearProgress
+};

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

@@ -5,6 +5,7 @@ interface MediaCardWithActionProps {
     description: string;
     buttonLabel: string;
     disabled?: boolean;
+    action: () => void;
 }
-export declare function MediaCardWithAction({ image, imageAlt, title, description, buttonLabel, disabled }: MediaCardWithActionProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCardWithAction({ image, imageAlt, title, description, buttonLabel, disabled, action, }: MediaCardWithActionProps): import("react/jsx-runtime").JSX.Element;
 export {};