@fangzsx/component-library 0.0.11 → 0.0.13

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/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
+};