@hortiview/shared-components 0.0.4730 → 0.0.4779

package/dist/components/BaseView/BaseView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LinkProps } from '../../types/internal/ReactRouterTypes';
 import { BaseListElement } from '../../types/ListElement';
 type BaseViewProps = {

package/dist/components/BaseView/BaseView.js

@@ -1,15 +1,17 @@
-import { jsx as i, Fragment as x, jsxs as e } from "react/jsx-runtime";
+import "../../assets/BaseView.css";
+import { jsx as t, Fragment as x, jsxs as e } from "react/jsx-runtime";
 import { useMemo as n } from "react";
 import { EmptyView as k } from "../EmptyView/EmptyView.js";
-import { ListArea as A } from "../ListArea/ListArea.js";
-import { VerticalDivider as H } from "../VerticalDivider/VerticalDivider.js";
-import { s as L } from "../../baseView.module-DXWalo9p.js";
-import { u as V } from "../../useBreakpoint-DyAmuka7.js";
-import { Grid as W, GridRow as j, GridCol as m, Group as u } from "@element/react-components";
+import { ListArea as y } from "../ListArea/ListArea.js";
+import { VerticalDivider as A } from "../VerticalDivider/VerticalDivider.js";
+import { a as H } from "../../useBreakpoint-DROHPVxO.js";
+import { Grid as L, GridRow as V, GridCol as m, Group as u } from "@element/react-components";
 import { BasicHeading as a } from "../BasicHeading/BasicHeading.js";
-const z = ({
-  action: c,
-  heading: d,
+const W = "_divider_anyyu_1", _ = {
+  divider: W
+}, z = ({
+  action: d,
+  heading: c,
   elements: o,
   emptyText: s,
   hasSearch: h = !0,
@@ -21,13 +23,13 @@ const z = ({
   routerLinkElement: C,
   searchPlaceholder: B
 }) => {
-  const { isLg: r } = V(), t = n(() => o.find((w) => w.route === l), [l, o]), G = n(() => t?.component ?? (r ? /* @__PURE__ */ i(k, { subtitle: s }) : /* @__PURE__ */ i(x, {})), [t, r, s]), b = n(() => r ? !0 : !t, [t, r]);
-  return /* @__PURE__ */ i(W, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(j, { children: [
+  const { isLg: r } = H(), i = n(() => o.find((w) => w.route === l), [l, o]), G = n(() => i?.component ?? (r ? /* @__PURE__ */ t(k, { subtitle: s }) : /* @__PURE__ */ t(x, {})), [i, r, s]), b = n(() => r ? !0 : !i, [i, r]);
+  return /* @__PURE__ */ t(L, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(V, { children: [
     b && /* @__PURE__ */ e(m, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
       /* @__PURE__ */ e(u, { direction: "vertical", fullWidth: !0, children: [
-        d && /* @__PURE__ */ i(a, { heading: d, level: 4, marginBottom: 0, children: c }),
-        /* @__PURE__ */ i(
-          A,
+        c && /* @__PURE__ */ t(a, { heading: c, level: 4, marginBottom: 0, children: d }),
+        /* @__PURE__ */ t(
+          y,
           {
             elements: o,
             hasSearch: h,
@@ -39,19 +41,19 @@ const z = ({
           }
         )
       ] }),
-      r && /* @__PURE__ */ i(H, { className: L.divider, height: "100%" })
+      r && /* @__PURE__ */ t(A, { className: _.divider, height: "100%" })
     ] }),
-    /* @__PURE__ */ i(m, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(u, { direction: "vertical", fullWidth: !0, children: [
-      /* @__PURE__ */ i(
+    /* @__PURE__ */ t(m, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(u, { direction: "vertical", fullWidth: !0, children: [
+      /* @__PURE__ */ t(
         a,
         {
-          heading: t?.detailTitle ?? t?.title ?? "",
+          heading: i?.detailTitle ?? i?.title ?? "",
           level: 4,
-          icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
+          icon: i?.hideIconInDetail === !0 ? void 0 : i?.icon,
           marginBottom: 0,
-          invisibleButton: t?.detailAction === void 0,
+          invisibleButton: i?.detailAction === void 0,
           withAvatar: v,
-          children: t?.detailAction ?? c
+          children: i?.detailAction ?? d
         }
       ),
       G

package/dist/components/BaseView/BaseView.test.js

@@ -1,5 +1,5 @@
 import { jsx as a, Fragment as s } from "react/jsx-runtime";
-import { a as l } from "../../useBreakpoint-DyAmuka7.js";
+import { u as l } from "../../useBreakpoint-DROHPVxO.js";
 import { BaseView as r } from "./BaseView.js";
 import { r as i, s as e, f as p } from "../../react.esm-BeDwcQWb.js";
 import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,63 +1,74 @@
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { TypoDisplay as v, TypoBody as N, Icon as I } from "@element/react-components";
-import { u as B } from "../../useBreakpoint-DyAmuka7.js";
-import { Iconify as C } from "../Iconify/Iconify.js";
-import { s as e } from "../../basicHeading.module-ClcvD7x2.js";
-import { AvailableCustomIcons as $ } from "../../enums/AvailableCustomIcons.js";
-const x = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ a("div", { className: e.iconContainer, children: i }) : i in $ ? /* @__PURE__ */ a(
-  C,
+import "../../assets/BasicHeading.css";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { TypoDisplay as C, TypoBody as w, Icon as y } from "@element/react-components";
+import { a as u } from "../../useBreakpoint-DROHPVxO.js";
+import { Iconify as I } from "../Iconify/Iconify.js";
+import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
+const N = "_pageHeader_fwns1_1", H = "_headlineContainer_fwns1_11", b = "_actionButtonContainer_fwns1_16", A = "_content_fwns1_25", W = "_leadingIcon_fwns1_31", $ = "_headingWrapper_fwns1_38", x = "_headingContainer_fwns1_43", T = "_invisible_fwns1_48", j = "_withAvatar_fwns1_52", z = "_iconContainer_fwns1_57", n = {
+  pageHeader: N,
+  headlineContainer: H,
+  actionButtonContainer: b,
+  content: A,
+  leadingIcon: W,
+  headingWrapper: $,
+  headingContainer: x,
+  invisible: T,
+  withAvatar: j,
+  iconContainer: z
+}, L = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in B ? /* @__PURE__ */ i(
+  I,
   {
-    icon: i,
-    className: e.leadingIcon,
+    icon: e,
+    className: n.leadingIcon,
     iconSize: "large",
     iconType: "filled"
   }
-) : /* @__PURE__ */ a(I, { iconSize: "large", iconType: "filled", icon: i, className: e.leadingIcon }) : null, L = ({
-  children: i,
-  marginBottom: t,
-  heading: d,
-  icon: c,
-  className: m,
-  subHeading: n,
-  subHeadingLevel: p = 2,
+) : /* @__PURE__ */ i(y, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, q = ({
+  children: e,
+  marginBottom: a,
+  heading: l,
+  icon: d,
+  className: p,
+  subHeading: o,
+  subHeadingLevel: _ = 2,
   invisibleButton: f = !1,
-  level: s = 4,
-  fontWeight: o = 400,
-  withAvatar: y = !1
+  level: r = 4,
+  fontWeight: s = 400,
+  withAvatar: g = !1
 }) => {
-  const { isLg: l } = B(), g = l ? s : s + 1, h = o === "bold" ? 500 : o, u = () => {
-    if (t !== void 0)
-      return typeof t == "number" ? `${t}px` : "2rem";
+  const { isLg: c } = u(), h = c ? r : r + 1, m = s === "bold" ? 500 : s, v = () => {
+    if (a !== void 0)
+      return typeof a == "number" ? `${a}px` : "2rem";
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: e.pageHeader,
-      style: { marginBottom: u() },
+      className: n.pageHeader,
+      style: { marginBottom: v() },
       "data-testid": "HeaderContainer",
       children: [
-        /* @__PURE__ */ r("div", { className: `${y && l ? e.withAvatar : ""} ${e.headingWrapper}`, children: [
-          /* @__PURE__ */ a(x, { icon: c }),
-          /* @__PURE__ */ r("div", { className: n ? e.headingContainer : "", children: [
-            /* @__PURE__ */ a(
-              v,
+        /* @__PURE__ */ t("div", { className: `${g && c ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
+          /* @__PURE__ */ i(L, { icon: d }),
+          /* @__PURE__ */ t("div", { className: o ? n.headingContainer : "", children: [
+            /* @__PURE__ */ i(
+              C,
               {
-                level: g,
+                level: h,
                 "data-testid": "Header",
-                className: m ?? "",
-                style: { fontWeight: h },
-                children: d
+                className: p ?? "",
+                style: { fontWeight: m },
+                children: l
               }
             ),
-            /* @__PURE__ */ a(N, { level: p, children: n })
+            /* @__PURE__ */ i(w, { level: _, children: o })
           ] })
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "div",
           {
-            className: `${e.actionButtonContainer} ${f && e.invisible}`,
+            className: `${n.actionButtonContainer} ${f && n.invisible}`,
             "data-testid": "RightPart",
-            children: i
+            children: e
           }
         )
       ]
@@ -65,5 +76,5 @@ const x = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ a("div", {
   );
 };
 export {
-  L as BasicHeading
+  q as BasicHeading
 };

package/dist/components/BlockView/BlockView.js

@@ -1,63 +1,73 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { TypoSubtitle as B, TypoDisplay as C } from "@element/react-components";
-import { useState as A, useEffect as D, useMemo as E } from "react";
-import { s as e } from "../../BlockView.module-8kbPxxc4.js";
-import { getBlockNumberByDto as S } from "../../services/BlockService.js";
-const R = ({
+import "../../assets/BlockView.css";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { TypoSubtitle as x, TypoDisplay as T } from "@element/react-components";
+import { useState as L, useEffect as R, useMemo as B } from "react";
+import { getBlockNumberByDto as C } from "../../services/BlockService.js";
+const A = "_grid_g18cu_1", D = "_black_g18cu_11", E = "_blockLayout_g18cu_15", S = "_blockRow_g18cu_27", V = "_block_g18cu_15", M = "_active_g18cu_46", j = "_error_g18cu_52", q = "_empty_g18cu_58", F = "_blockText_g18cu_65", o = {
+  grid: A,
+  black: D,
+  blockLayout: E,
+  blockRow: S,
+  block: V,
+  active: M,
+  error: j,
+  empty: q,
+  blockText: F
+}, O = ({
   rows: s,
   columns: t,
-  hideText: n = !1,
-  errorBlocks: k = [],
+  hideText: u = !1,
+  errorBlocks: p = [],
   showNumbers: y = !0,
-  clickable: N = !0,
-  size: d = 15,
-  onClick: u = null,
-  currentBlock: c,
-  blocks: b,
+  clickable: h = !0,
+  size: m = 15,
+  onClick: b = null,
+  currentBlock: i,
+  blocks: _,
   blockViewTitle: v,
-  blockLabel: $
+  blockLabel: f
 }) => {
-  const [p, h] = A(0);
-  D(() => {
-    if (!c)
+  const [k, d] = L(0);
+  R(() => {
+    if (!i)
       return;
-    const o = S(c, t);
-    h(o);
-  }, [c, t]);
-  const g = E(() => s * t, [s, t]), w = (o) => {
-    u && u(o, c ?? void 0);
-  }, x = ({ row: o, column: l }) => b.length === 0 ? !0 : b.some((m) => m.position?.row === o && m.position?.column === l);
-  return /* @__PURE__ */ f("div", { className: e.grid, children: [
-    !n && /* @__PURE__ */ i(B, { level: 1, bold: !0, className: e.black, children: v }),
-    /* @__PURE__ */ i("div", { className: e.blockLayout, style: { width: `${d}rem`, height: `${d}rem` }, children: Array.from({ length: s }).map((o, l) => /* @__PURE__ */ i("div", { className: e.blockRow, children: Array.from({ length: t }).map((m, a) => {
-      const r = t * l + a + 1;
-      return /* @__PURE__ */ i(
+    const c = C(i, t);
+    d(c);
+  }, [i, t]);
+  const N = B(() => s * t, [s, t]), $ = (c) => {
+    b && b(c, i ?? void 0);
+  }, w = ({ row: c, column: r }) => _.length === 0 ? !0 : _.some((n) => n.position?.row === c && n.position?.column === r);
+  return /* @__PURE__ */ g("div", { className: o.grid, children: [
+    !u && /* @__PURE__ */ l(x, { level: 1, bold: !0, className: o.black, children: v }),
+    /* @__PURE__ */ l("div", { className: o.blockLayout, style: { width: `${m}rem`, height: `${m}rem` }, children: Array.from({ length: s }).map((c, r) => /* @__PURE__ */ l("div", { className: o.blockRow, children: Array.from({ length: t }).map((n, a) => {
+      const e = t * r + a + 1;
+      return /* @__PURE__ */ l(
         "div",
         {
           "data-testid": "blockViewBlock",
-          className: `${e.block} ${p === r ? e.active : ""} ${x({ row: l + 1, column: a + 1 }) ? "" : e.empty} ${k.includes(r) ? e.error : ""}`,
-          id: `block${r}`,
-          onClick: N ? () => {
-            h(r), w({ row: l + 1, column: a + 1 });
+          className: `${o.block} ${k === e ? o.active : ""} ${w({ row: r + 1, column: a + 1 }) ? "" : o.empty} ${p.includes(e) ? o.error : ""}`,
+          id: `block${e}`,
+          onClick: h ? () => {
+            d(e), $({ row: r + 1, column: a + 1 });
           } : void 0,
-          children: y && /* @__PURE__ */ i(
+          children: y && /* @__PURE__ */ l(
             "div",
             {
-              className: `${e.blockText} ${p === r ? e.black : ""}`,
-              children: r
+              className: `${o.blockText} ${k === e ? o.black : ""}`,
+              children: e
             }
           )
         },
-        r
+        e
       );
-    }) }, l)) }),
-    !n && /* @__PURE__ */ f(C, { themeColor: "primary", level: 6, children: [
-      g,
+    }) }, r)) }),
+    !u && /* @__PURE__ */ g(T, { themeColor: "primary", level: 6, children: [
+      N,
       " ",
-      $
+      f
     ] })
   ] });
 };
 export {
-  R as BlockView
+  O as BlockView
 };

package/dist/components/DeleteModal/DeleteModal.js

@@ -1,81 +1,69 @@
 import "../../assets/DeleteModal.css";
-import { jsx as o, jsxs as m, Fragment as f } from "react/jsx-runtime";
-import { Modal as k, Button as c, Group as t, Icon as y, TypoBody as l } from "@element/react-components";
+import { jsx as e, jsxs as c, Fragment as f } from "react/jsx-runtime";
+import { Modal as k, Button as m, Group as r, Icon as y, TypoBody as t } from "@element/react-components";
 import { Iconify as C } from "../Iconify/Iconify.js";
 import { uniqueId as D } from "lodash";
-import "react";
-import "../../_getTag-DyrzUAbj.js";
-import "../../searchBar.module-9gKyrZRT.js";
-import "../../listArea.module-B04TR5bj.js";
 import { AvailableCustomIcons as s } from "../../enums/AvailableCustomIcons.js";
-import "../../verticalDivider.module-C3_GL-fH.js";
-import "../../baseView.module-DXWalo9p.js";
-import "../../basicHeading.module-ClcvD7x2.js";
-import "../../BlockView.module-8kbPxxc4.js";
-import "../../disclaimer.module-BZydt-Q_.js";
-import "../../HashTabView.module-BY0tbl3B.js";
-import "../../HeaderFilter.module-DiBmulr5.js";
-import "../Scrollbar/Scrollbar.js";
-const j = "_bulletPoint_469qk_1", q = "_modal_469qk_6", I = "_colorDanger_469qk_10", e = {
+const j = "_bulletPoint_469qk_1", q = "_modal_469qk_6", I = "_colorDanger_469qk_10", l = {
   bulletPoint: j,
   modal: q,
   colorDanger: I
-}, R = ({
+}, M = ({
   title: d,
-  confirmButtonLabel: p,
-  cancelButtonLabel: u,
-  deleteHeader: g,
-  deleteBody: i,
-  icon: r,
+  confirmButtonLabel: u,
+  cancelButtonLabel: g,
+  deleteHeader: p,
+  deleteBody: a,
+  icon: o,
   impossibleDeleteHeader: b,
   open: v,
-  setOpen: a,
+  setOpen: n,
   onDelete: h,
-  isDeletePossible: n = !0
-}) => /* @__PURE__ */ o(
+  isDeletePossible: i = !0
+}) => /* @__PURE__ */ e(
   k,
   {
-    className: e.modal,
+    className: l.modal,
     modalSize: "small",
     open: v,
-    onClose: () => a(!1),
+    onClose: () => n(!1),
     title: d,
-    primaryButton: /* @__PURE__ */ o(
-      c,
+    primaryButton: /* @__PURE__ */ e(
+      m,
       {
         variant: "danger",
-        label: p,
+        label: u,
         onClick: h,
-        disabled: !n
+        disabled: !i
       }
     ),
-    dismissiveButton: /* @__PURE__ */ o(c, { variant: "text", label: u, onClick: () => a(!1) }),
-    children: /* @__PURE__ */ m(t, { direction: "vertical", secondaryAlign: "center", children: [
-      r && Object.values(s).includes(r) && /* @__PURE__ */ o(
+    dismissiveButton: /* @__PURE__ */ e(m, { variant: "text", label: g, onClick: () => n(!1) }),
+    children: /* @__PURE__ */ c(r, { direction: "vertical", secondaryAlign: "center", children: [
+      o && Object.values(s).includes(o) && /* @__PURE__ */ e(
         C,
         {
-          icon: r,
+          icon: o,
           iconSize: "xlarge",
-          className: e.colorDanger
+          className: l.colorDanger
         }
       ),
-      r && !Object.values(s).includes(r) && /* @__PURE__ */ o(y, { icon: r, iconSize: "xlarge", className: e.colorDanger }),
-      /* @__PURE__ */ o(t, { direction: "vertical", children: n ? /* @__PURE__ */ m(f, { children: [
-        /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: g }),
-        i && /* @__PURE__ */ o(t, { direction: "vertical", gap: "none", children: i.map((x, _) => /* @__PURE__ */ o(
-          l,
+      o && !Object.values(s).includes(o) && /* @__PURE__ */ e(y, { icon: o, iconSize: "xlarge", className: l.colorDanger }),
+      /* @__PURE__ */ e(r, { direction: "vertical", children: i ? /* @__PURE__ */ c(f, { children: [
+        /* @__PURE__ */ e(t, { level: 1, themeColor: "text-primary-on-background", children: p }),
+        a && /* @__PURE__ */ e(r, { direction: "vertical", gap: "none", children: a.map((x, _) => /* @__PURE__ */ e(
+          t,
           {
             level: 2,
-            className: e.bulletPoint,
+            className: l.bulletPoint,
             themeColor: "text-secondary-on-background",
             children: x
           },
           D(_.toString())
         )) })
-      ] }) : /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: b }) })
+      ] }) : /* @__PURE__ */ e(t, { level: 1, themeColor: "text-primary-on-background", children: b }) })
     ] })
   }
 );
 export {
-  R as DeleteModal
+  M as DeleteModal
 };

package/dist/components/DeleteModal/DeleteModal.test.js

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import { r as c, s as e } from "../../react.esm-BeDwcQWb.js";
 import { DeleteModal as b } from "./DeleteModal.js";
-import { d, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
-d("DeleteModal Test", () => {
+import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
+B("DeleteModal Test", () => {
   a("should render the DeleteModal properly", () => {
     c(
       /* @__PURE__ */ n(
@@ -40,7 +40,7 @@ d("DeleteModal Test", () => {
           isDeletePossible: !1
         }
       )
-    ), e.debug(), t(e.getByText("DELETE")).toBeInTheDocument(), t(e.getByTestId("block")).toBeInTheDocument(), t(e.queryByText("block 1")).not.toBeInTheDocument(), t(e.queryByText("block 2")).not.toBeInTheDocument(), t(e.queryByText("block 3")).not.toBeInTheDocument(), t(e.getByText("Remove")).toBeInTheDocument(), t(e.getByText("Remove").parentElement).toBeDisabled(), t(e.getByText("Cancel")).toBeInTheDocument(), t(e.queryByText("block cant be deleted")).toBeInTheDocument();
+    ), t(e.getByText("DELETE")).toBeInTheDocument(), t(e.getByTestId("block")).toBeInTheDocument(), t(e.queryByText("block 1")).not.toBeInTheDocument(), t(e.queryByText("block 2")).not.toBeInTheDocument(), t(e.queryByText("block 3")).not.toBeInTheDocument(), t(e.getByText("Remove")).toBeInTheDocument(), t(e.getByText("Remove").parentElement).toBeDisabled(), t(e.getByText("Cancel")).toBeInTheDocument(), t(e.queryByText("block cant be deleted")).toBeInTheDocument();
   }), a("should call setOpen with false when clicking on cancel button", () => {
     const l = o.fn();
     c(

package/dist/components/Disclaimer/Disclaimer.js

@@ -1,16 +1,19 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { Group as n, TypoSubtitle as m, TypoBody as t, Icon as d } from "@element/react-components";
-import { s as l } from "../../disclaimer.module-BZydt-Q_.js";
-const f = ({ text: o, subtext: e, icon: i, level: c = 2, bold: a = !1 }) => /* @__PURE__ */ s(
-  n,
+import "../../assets/Disclaimer.css";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { Group as s, TypoSubtitle as t, TypoBody as m, Icon as d } from "@element/react-components";
+const p = "_disclaimer_1k38t_1", y = "_iconArea_1k38t_7", c = {
+  disclaimer: p,
+  iconArea: y
+}, f = ({ text: o, subtext: e, icon: i, level: l = 2, bold: a = !1 }) => /* @__PURE__ */ n(
+  s,
   {
     direction: i || e ? "vertical" : "horizontal",
     secondaryAlign: "center",
     primaryAlign: "center",
     children: [
-      /* @__PURE__ */ r(m, { className: l.disclaimer, level: c, bold: a, children: o }),
-      e && /* @__PURE__ */ r(t, { level: 2, children: e }),
-      i && /* @__PURE__ */ r("div", { className: l.iconArea, children: /* @__PURE__ */ r(d, { className: l.Icon, icon: i, iconSize: "large" }) })
+      /* @__PURE__ */ r(t, { className: c.disclaimer, level: l, bold: a, children: o }),
+      e && /* @__PURE__ */ r(m, { level: 2, children: e }),
+      i && /* @__PURE__ */ r("div", { className: c.iconArea, children: /* @__PURE__ */ r(d, { className: c.Icon, icon: i, iconSize: "large" }) })
     ]
   }
 );

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.d.ts

@@ -0,0 +1,30 @@
+import { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+type FormCheckProps<T extends FieldValues> = {
+    /** The name of the property that this checkbox represents. */
+    propertyName: Path<T>;
+    /** Label to be displayed with the checkbox. */
+    label: string;
+    /** Validation rules for the checkbox. */
+    validate?: RegisterOptions<T>['validate'];
+    /** Determines if this input is mandatory. */
+    required?: boolean;
+    /** Function to be called when the checkbox value changes. */
+    onChange?: () => void;
+    /** Determines if this input is disabled. */
+    disabled?: boolean;
+};
+/**
+ * FormCheckBox is a custom form input component for selecting checkboxes.
+ * It is integrated with react-hook-form for form management.
+ *
+ * @param propertyName - the name of the property this checkbox maps to in the form.
+ * @param label - label displayed along with the checkbox.
+ * @param validate - validation rules for the checkbox.
+ * @param required - determines if the checkbox is required.
+ * @param onChange - function to be called when the checkbox value changes.
+ * @param disabled - determines if the checkbox is disabled.
+ *
+ * @returns A JSX element that renders a checkbox form input.
+ */
+export declare const FormCheckBox: <T extends FieldValues>({ propertyName, label, validate, required, onChange, disabled, }: FormCheckProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.js

@@ -0,0 +1,42 @@
+import { jsx as o, jsxs as p, Fragment as x } from "react/jsx-runtime";
+import { Checkbox as l, TypoCaption as u } from "@element/react-components";
+import { useFormContext as g, Controller as i } from "react-hook-form";
+const b = ({
+  propertyName: n,
+  label: t,
+  validate: m,
+  required: c,
+  onChange: s,
+  disabled: h
+}) => {
+  const { control: C } = g();
+  return /* @__PURE__ */ o(
+    i,
+    {
+      name: n,
+      control: C,
+      rules: {
+        required: c,
+        validate: m
+      },
+      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ p(x, { children: [
+        /* @__PURE__ */ o(
+          l,
+          {
+            ...r,
+            label: t,
+            onChange: (...a) => {
+              r.onChange(...a), s?.();
+            },
+            checked: r.value,
+            disabled: h
+          }
+        ),
+        e.error && /* @__PURE__ */ o(u, { themeColor: "error", children: e.error.message })
+      ] })
+    }
+  );
+};
+export {
+  b as FormCheckBox
+};

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js

@@ -0,0 +1,50 @@
+import { jsx as s } from "react/jsx-runtime";
+import { r as n, s as t, f as m } from "../../../react.esm-BeDwcQWb.js";
+import { FormCheckBox as c } from "./FormCheckBox.js";
+import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+const a = e.fn();
+e.mock("react-hook-form", () => ({
+  ...e.importActual("react-hook-form"),
+  Controller: ({
+    render: o
+  }) => o({
+    field: {
+      onChange: a
+    },
+    fieldState: { error: { message: "error" } }
+  }),
+  useFormContext: () => ({
+    control: {
+      register: e.fn(),
+      unregister: e.fn(),
+      getFieldState: e.fn(),
+      _names: {
+        array: new Set("test"),
+        mount: new Set("test"),
+        unMount: new Set("test"),
+        watch: new Set("test"),
+        focus: "test",
+        watchAll: !1
+      },
+      _subjects: {
+        watch: e.fn(),
+        array: e.fn(),
+        state: e.fn()
+      },
+      _getWatch: e.fn(),
+      _formValues: ["test"],
+      _defaultValues: ["test"]
+    },
+    formState: { errors: {} },
+    watch: () => "2024-08-07"
+  })
+}));
+h("FormCheckBox Test", () => {
+  l("render FormCheckBox", () => {
+    n(/* @__PURE__ */ s(c, { propertyName: "hasValue", label: "user.hasValue" })), r(t.getByText("user.hasValue")).toBeInTheDocument(), r(t.getByText("error")).toBeInTheDocument(), r(t.getByRole("checkbox")).toBeInTheDocument();
+  }), l("render FormCheckBox click", () => {
+    n(/* @__PURE__ */ s(c, { propertyName: "hasValue", label: "user.hasValue", onChange: a }));
+    const o = t.getByRole("checkbox");
+    m.click(o), r(a).toHaveBeenCalled();
+  });
+});