nexus-shared 1.1.4 → 1.1.6

package/package.json

@@ -1,54 +1,30 @@
 {
   "name": "nexus-shared",
-  "version": "1.1.4",
-  "description": "Nexus global shared package (interfaces, server & client modules)",
+  "version": "1.1.6",
+  "description": "Nexus shared React components for Next.js",
   "type": "module",
-  "sideEffects": ["**/*.css"],
+  "sideEffects": [ "**/*.css" ],
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./src/index.ts",
-      "default": "./dist/index.js"
-    },
-    "./interface": {
-      "types": "./dist/interface.d.ts",
-      "import": "./src/interface.ts",
-      "default": "./dist/interface.js"
-    },
-    "./server": {
-      "types": "./dist/server.d.ts",
-      "import": "./src/server.ts",
-      "default": "./dist/server.js"
-    },
-    "./client": {
-      "types": "./dist/client.d.ts",
-      "import": "./src/client.ts",
-      "default": "./dist/client.js"
-    }
+    ".": "./src/index.ts",
+    "./interface": "./src/interface.ts",
+    "./server": "./src/server.ts",
+    "./client": "./src/client.ts"
   },
-  "files": ["dist", "src"],
+  "files": [ "src" ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "next": "^16.2.6",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6"
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "next": "16.2.6"
   },
   "devDependencies": {
-    "@types/node": "^24.12.4",
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
-    "next": "^16.2.6",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "server-only": "^0.0.1",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.2"
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
   },
-  "engines": {
-    "node": "24.15.0"
+  "dependencies": {
+    "dotenv": "^17.4.2"
   }
 }

package/src/api-services/preference-service.tsx

@@ -0,0 +1,5 @@
+import { EPreferenceTargets } from "../interfaces/system-interfaces";
+
+export const CreateUpdatePreference = async (target: EPreferenceTargets, key: string, value: string | null) => {
+  // TODO: Implement CreateUpdatePreference
+};

package/src/api-services/system-service.tsx

@@ -0,0 +1,322 @@
+import { EIcons } from "../interfaces/icon-interfaces";
+import { EMenuTargets, EMenuVisibility, IClientMenu, IPanelMenu, IUtilityMenu } from "../interfaces/menu-interfaces";
+import { ENexusModules } from "../interfaces/system-interfaces";
+
+export const GetClientMenus = async (): Promise<IClientMenu[]> => {
+  return [
+    {
+      id: 1,
+      menuCode: "home",
+      menuIcon: EIcons.HOME,
+      menuName: "Home",
+      menuUrl: "/home",
+      documentTitle: "Home Page",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 1,
+      pageTitle: "Home Page",
+      breadcrumbTitle: "Home",
+    },
+    {
+      id: 2,
+      menuCode: "about-me",
+      menuIcon: EIcons.PERSON,
+      menuName: "About Me",
+      menuUrl: "/about-me",
+      documentTitle: "About Me",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 2,
+      pageTitle: "About Me",
+      breadcrumbTitle: "About Me",
+    },
+    {
+      id: 3,
+      menuCode: "about-us",
+      menuIcon: EIcons.PERSON,
+      menuName: "About Us",
+      menuUrl: "/about-us",
+      documentTitle: "About Us",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 2,
+      pageTitle: "About Us",
+      breadcrumbTitle: "About Us",
+    },
+    {
+      id: 4,
+      menuCode: "my-projects",
+      menuIcon: EIcons.BRIEFCASE,
+      menuName: "My Projects",
+      menuUrl: "/my-projects",
+      documentTitle: "My Projects",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 3,
+      pageTitle: "My Projects",
+      breadcrumbTitle: "My Projects",
+    },
+    {
+      id: 5,
+      menuCode: "products",
+      menuIcon: EIcons.CUBE,
+      menuName: "My Products",
+      menuUrl: "/products",
+      documentTitle: "My Products",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 4,
+      pageTitle: "My Products",
+      breadcrumbTitle: "My Products",
+    },
+    {
+      id: 6,
+      menuCode: "products",
+      menuIcon: EIcons.CUBE,
+      menuName: "Our Products",
+      menuUrl: "/our-products",
+      documentTitle: "Our Products",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 4,
+      pageTitle: "Our Products",
+      breadcrumbTitle: "Our Products",
+    },
+    {
+      id: 7,
+      menuCode: "blog",
+      menuIcon: EIcons.NEWSPAPER,
+      menuName: "Blog",
+      menuUrl: "/blog",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 5,
+      pageTitle: "Blog",
+      breadcrumbTitle: "Blog",
+      documentTitle: "Blog",
+    },
+    {
+      id: 8,
+      menuCode: "portfolio-gallery",
+      menuIcon: EIcons.IMAGES,
+      menuName: "Portfolio Gallery",
+      menuUrl: "/portfolio-gallery",
+      documentTitle: "Portfolio Gallery",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 6,
+      pageTitle: "Portfolio Gallery",
+      breadcrumbTitle: "Portfolio Gallery",
+    },
+    {
+      id: 9,
+      menuCode: "our-gallery",
+      menuIcon: EIcons.IMAGES,
+      menuName: "Our Gallery",
+      menuUrl: "/our-gallery",
+      documentTitle: "Our Gallery",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 6,
+      pageTitle: "Our Gallery",
+      breadcrumbTitle: "Our Gallery",
+    },
+    {
+      id: 10,
+      menuCode: "services",
+      menuIcon: EIcons.CONSTRUCT,
+      menuName: "Services",
+      menuUrl: "/services",
+      documentTitle: "Services",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 7,
+      pageTitle: "Services",
+      breadcrumbTitle: "Services",
+    },
+    {
+      id: 11,
+      menuCode: "faq",
+      menuIcon: EIcons.HELP_CIRCLE,
+      menuName: "FAQ",
+      menuUrl: "/faq",
+      documentTitle: "FAQ",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 8,
+      pageTitle: "FAQ",
+      breadcrumbTitle: "FAQ",
+    },
+    {
+      id: 12,
+      menuCode: "contact-me",
+      menuIcon: EIcons.CALL,
+      menuName: "Contact Me",
+      menuUrl: "/contact-me",
+      documentTitle: "Contact Me",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 9,
+      pageTitle: "Contact Me",
+      breadcrumbTitle: "Contact Me",
+    },
+    {
+      id: 13,
+      menuCode: "contact-us",
+      menuIcon: EIcons.CALL,
+      menuName: "Contact Us",
+      menuUrl: "/contact-us",
+      documentTitle: "Contact Us",
+      menuVisibilities: EMenuVisibility.GuestOnly | EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 9,
+      pageTitle: "Contact Us",
+      breadcrumbTitle: "Contact Us",
+    },
+  ];
+};
+
+export const GetUtilityMenus = async (): Promise<IUtilityMenu[]> => {
+  return [
+    {
+      id: 1,
+      menuCode: "root-search",
+      menuIcon: EIcons.SEARCH,
+      menuName: "Search",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 1,
+    },
+    {
+      id: 2,
+      menuCode: "favorite-menu",
+      menuIcon: EIcons.HEART,
+      menuName: "Favorite",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 2,
+    },
+    {
+      id: 3,
+      menuCode: "cart-menu",
+      menuIcon: EIcons.CART,
+      menuName: "Cart",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 3,
+    },
+    {
+      id: 4,
+      menuCode: "switch-theme",
+      menuIcon: EIcons.COLOR_PALETTE,
+      menuName: "Theme",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 4,
+    },
+    {
+      id: 5,
+      menuCode: "mega-menu",
+      menuIcon: EIcons.GRID,
+      menuName: "Mega Menu",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 5,
+    },
+  ];
+};
+
+export const GetUserPanels = async (): Promise<IPanelMenu[]> => {
+  return [
+    {
+      id: 1,
+      menuCode: "message-menu",
+      menuIcon: EIcons.MAIL,
+      menuName: "Messages",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 1,
+      groupOrder: 1,
+    },
+    {
+      id: 2,
+      menuCode: "notification-menu",
+      menuIcon: EIcons.NOTIFICATIONS,
+      menuName: "Notifications",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 2,
+      groupOrder: 1,
+    },
+    {
+      id: 3,
+      menuCode: "switch-theme",
+      menuIcon: EIcons.COLOR_PALETTE,
+      menuName: "Theme Mode",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 2,
+      groupOrder: 2,
+    },
+    {
+      id: 4,
+      menuCode: "language",
+      menuIcon: EIcons.LANGUAGE,
+      menuName: "Language",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 2,
+      groupOrder: 2,
+    },
+    {
+      id: 5,
+      menuCode: "currency",
+      menuIcon: EIcons.CASH,
+      menuName: "Currency Format",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 2,
+      groupOrder: 2,
+    },
+    {
+      id: 6,
+      menuCode: "calendar-date",
+      menuIcon: EIcons.CALENDAR,
+      menuName: "Calendar Date",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 2,
+      groupOrder: 2,
+    },
+    {
+      id: 7,
+      menuCode: "help-support",
+      menuIcon: EIcons.HELP_CIRCLE,
+      menuName: "Help & Support",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly | EMenuVisibility.GuestOnly,
+      displayOrder: 2,
+      groupOrder: 2,
+    },
+    {
+      id: 8,
+      menuCode: "settings",
+      menuIcon: EIcons.SETTINGS,
+      menuName: "Account Settings",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 3,
+      groupOrder: 3,
+    },
+    {
+      id: 9,
+      menuCode: "switch-branch",
+      menuIcon: EIcons.REPEAT,
+      menuName: "Switch Branch",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 3,
+      groupOrder: 3,
+    },
+    {
+      id: 10,
+      menuCode: "switch-fiscal-year",
+      menuIcon: EIcons.CALENDAR,
+      menuName: "Switch Fiscal Year",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 3,
+      groupOrder: 3,
+    },
+    {
+      id: 11,
+      menuCode: "sign-out",
+      menuIcon: EIcons.EXIT,
+      menuName: "Sign Out",
+      menuVisibilities: EMenuVisibility.AuthenticatedOnly,
+      displayOrder: 3,
+      groupOrder: 3,
+    },
+    {
+      id: 12,
+      menuCode: "sign-in",
+      menuIcon: EIcons.LOGIN,
+      menuName: "Sign In",
+      menuVisibilities: EMenuVisibility.GuestOnly,
+      displayOrder: 3,
+      groupOrder: 3,
+    },
+  ];
+};

package/src/components/documents/button.tsx

@@ -0,0 +1,136 @@
+import Link from "next/link";
+import React from "react";
+import { IsValidURL } from "../../helpers/browser-helpers";
+import { SetElementStyles } from "../../helpers/element-helpers";
+import { DEFAULT_BUTTON_CLASS, DEFAULT_LINK_BUTTON_STYLE, EButtonTypes, ETargets, IButton } from "../../interfaces/button-interfaces";
+import { EIconTypes } from "../../interfaces/icon-interfaces";
+import { COLUMN_SIZE_ATTRIBUTE_KEY, EFlexPositions, EOpacity, ESizes } from "../../interfaces/layout-interfaces";
+import { EBackgroundColors, EBackgrounds } from "../../interfaces/theme-interfaces";
+import { ClickHandler, UN } from "../../interfaces/type-interfaces";
+import { NEXUS_CONFIG } from "../../nexus.environments";
+import { CreateIcon, Icon } from "./icon-box";
+
+export const SET_BUTTON_ACTIVE_CLASS = (isActive: boolean, element: HTMLElement, overrideColor?: EBackgroundColors | null, overrideActive?: string) => {
+  if (!element) return;
+
+  if (overrideColor) element.style.setProperty("--ACTIVE_BORDER_COLOR", overrideColor);
+
+  if (isActive) element.classList.add(overrideActive ?? "active");
+  else element.classList.remove(overrideActive ?? "active");
+};
+
+export const Button = ({ button, buttonType, styles, needColumnSize }: { button: IButton; buttonType?: EButtonTypes; styles?: React.CSSProperties | UN; needColumnSize?: boolean | UN }) => {
+  return IsValidURL(button.url) ? (
+    <Link href={button.url ?? "#"} style={styles ?? undefined} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder ?? 0} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
+      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.FILLED} opacity={EOpacity.O08} size={ESizes.Small} defaultClass="mr4" />}
+      <span>{button.label instanceof Function ? button.label(button.data) : button.label}</span>
+    </Link>
+  ) : (
+    <button style={styles ?? undefined} className={DEFAULT_BUTTON_CLASS(button.columnSize, undefined, button.borderSize, button.background, button.defaultClass, needColumnSize)} key={button.displayOrder} type={buttonType ?? EButtonTypes.BUTTON} onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => button.onClick?.(event, event.currentTarget as HTMLElement, button.data, button.displayOrder)}>
+      {button.icon && <Icon icon={button.icon} type={button.iconType ?? EIconTypes.FILLED} opacity={EOpacity.O08} size={ESizes.Small} defaultClass="mr4" />}
+      <span>{button.label instanceof Function ? button.label(button.data) : button.label}</span>
+    </button>
+  );
+};
+export const CreateButton = (param: IButton, parent?: HTMLElement | UN, styles?: React.CSSProperties | UN, needColumnSize?: boolean | UN) => {
+  const button = document.createElement(param.url ? "a" : "button");
+  button.setAttribute(COLUMN_SIZE_ATTRIBUTE_KEY, (param.columnSize ?? 12).toString());
+  if (param.icon) {
+    const icon = CreateIcon(param.icon, button, param.iconType, param.iconSize ?? ESizes.Small, null, null);
+    icon.classList.add("mr4");
+  }
+
+  SetElementStyles(button, styles);
+
+  button.className = DEFAULT_BUTTON_CLASS(param.columnSize, undefined, param.borderSize, param.background ?? NEXUS_CONFIG.DEFAULT_BACKGROUND, undefined, needColumnSize);
+  const span = document.createElement("span");
+  span.textContent = param.label instanceof Function ? (param.label(param.data) ?? null) : (param.label ?? null);
+  button.appendChild(span);
+  button.onclick = (e) => param.onClick?.(e, button, param.data, param.displayOrder);
+  if (param.url) {
+    (button as HTMLAnchorElement).href = param.url;
+    (button as HTMLAnchorElement).target = param.target ?? ETargets.Blank;
+  }
+  if (parent) parent.appendChild(button);
+  return button;
+};
+export const Buttons = ({ buttons, buttonStyles, padding, border, maxHeight, boxDefaultClass, needColumnSize, pt }: { buttons: IButton[]; padding?: number; buttonStyles?: React.CSSProperties | UN; border?: number; maxHeight?: number; boxDefaultClass?: string; needColumnSize?: boolean; pt?: number }) => {
+  return (
+    <div className={`row ${maxHeight ? "sb" : ""} ${boxDefaultClass ?? ""} r sm p${padding ?? 5} b${border ?? 0} ${pt !== undefined ? `pt${pt}` : ""}`}>
+      {buttons.map((button) => (
+        <Button key={button.id} button={button} needColumnSize={needColumnSize} styles={buttonStyles} />
+      ))}
+    </div>
+  );
+};
+export const CreateButtons = (buttons: IButton[], parent?: HTMLElement | UN, buttonStyles?: React.CSSProperties | UN, columns?: number | UN, padding?: number | UN, border?: number | UN, maxHeight?: number | UN, boxDefaultClass?: string | UN, needColumnSize?: boolean | UN) => {
+  if (!buttons || buttons.length === 0) return;
+  maxHeight ??= 25;
+  const sortButtons = buttons.sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0));
+  const buttonBox = document.createElement("div");
+  if (maxHeight) buttonBox.style.maxHeight = `${maxHeight}rem`;
+
+  buttonBox.className = `row ${maxHeight ? "sb" : ""} ${boxDefaultClass ?? ""} r sm p${padding ?? 5} b${border ?? 0}`;
+  for (const button of sortButtons) {
+    // Set column size if valid columns provided
+    if (columns && !button.columnSize) button.columnSize = columns;
+
+    CreateButton(button, buttonBox, buttonStyles, needColumnSize);
+  }
+  if (parent) parent.appendChild(buttonBox);
+  return buttonBox;
+};
+
+interface ILinkButtonProps {
+  url: string;
+  label: string;
+  defaultClass?: string | UN;
+  linkDefaultClass?: string | UN;
+  onClicked?: ClickHandler | UN;
+  borderBottom?: boolean | UN;
+  background?: EBackgrounds | UN;
+  target?: ETargets | UN;
+  position?: EFlexPositions | UN;
+}
+
+const _getPDefaultClass = (defaultClass?: string | UN, position?: EFlexPositions | UN) => `${defaultClass ?? ""} df ${position ?? EFlexPositions.Center}`;
+const _getLinkDefaultClass = (linkDefaultClass?: string | UN, background?: EBackgrounds | UN) => `${background ?? EBackgrounds.Background1} ${linkDefaultClass ?? "o08 ho1"} db h p2 r`;
+const _getLinkDefaultStyle = (borderBottom?: boolean | UN) => (borderBottom ? DEFAULT_LINK_BUTTON_STYLE : { width: "fit-content" });
+
+export const LinkButton = ({ url, label, defaultClass, linkDefaultClass, onClicked, borderBottom, background, target, position }: Readonly<ILinkButtonProps>) => {
+  return (
+    <p className={_getPDefaultClass(defaultClass, position)}>
+      <Link style={_getLinkDefaultStyle(borderBottom)} onClick={onClicked ?? undefined} target={target ?? undefined} className={_getLinkDefaultClass(linkDefaultClass, background)} href={url}>
+        {label}
+      </Link>
+    </p>
+  );
+};
+
+export const CreateLinkButton = (
+  parent: HTMLElement | UN,
+  //
+  url: string,
+  label: string,
+  onClicked?: ClickHandler | UN,
+  defaultClass?: string | UN,
+  linkDefaultClass?: string | UN,
+  borderBottom?: boolean | UN,
+  background?: EBackgrounds | UN,
+  target?: ETargets | UN,
+  position?: EFlexPositions | UN,
+) => {
+  const p = document.createElement("p");
+  p.className = _getPDefaultClass(defaultClass, position);
+  const link = document.createElement("a");
+  link.href = url;
+  link.className = _getLinkDefaultClass(linkDefaultClass, background);
+  link.onclick = onClicked ?? null;
+  link.innerText = label;
+
+  if (parent) parent.appendChild(p);
+  p.appendChild(link);
+
+  if (target) link.target = target;
+  return p;
+};

package/src/components/documents/icon-box.tsx

@@ -0,0 +1,92 @@
+import React, { JSX } from "react";
+import { SetElementStyles } from "../../helpers/element-helpers";
+import { DEFAULT_ICON_ELEMENT_NAME, EIcons, EIconTypes } from "../../interfaces/icon-interfaces";
+import { EBadgeTypes, EOpacity, ESizes } from "../../interfaces/layout-interfaces";
+import { EBackgrounds } from "../../interfaces/theme-interfaces";
+import { ClickHandler, UN } from "../../interfaces/type-interfaces";
+
+interface IIconBoxProps {
+  icon: EIcons;
+  children?: React.ReactNode | UN;
+  id?: string | UN;
+  iconType?: EIconTypes | UN;
+  iconSize?: ESizes | UN;
+  boxSize?: ESizes | UN;
+  background?: EBackgrounds | UN;
+  defaultClass?: string | UN;
+  iconDefaultClass?: string | UN;
+  badgeType?: EBadgeTypes | UN;
+  badgeCount?: number | UN;
+  iconOpacity?: EOpacity;
+  title?: string | UN;
+  dataKeys?: { key: string; val: string }[] | UN;
+  makeRound?: boolean | UN;
+  boxStyle?: React.CSSProperties | UN;
+  onClicked?: ClickHandler | UN;
+  onMouseEnter?: ClickHandler | UN;
+  disabledHoverEffect?: boolean | UN;
+}
+interface IIconProps {
+  icon: EIcons;
+  type?: EIconTypes | UN;
+  size?: ESizes | UN;
+  defaultClass?: string | UN;
+  opacity?: EOpacity | UN;
+  style?: React.CSSProperties | UN;
+}
+
+const _getIconClass = (size?: ESizes | UN, defaultClass?: string | UN, opacity?: EOpacity | UN) => `icon ${size ?? ESizes.Normal} ${defaultClass ?? ""} ${opacity ?? EOpacity.O08}`;
+
+export const Icon = ({ icon, type, size, style, defaultClass, opacity }: IIconProps): JSX.Element => {
+  const c = _getIconClass(size, defaultClass, opacity ?? EOpacity.O06);
+  return React.createElement(DEFAULT_ICON_ELEMENT_NAME, {
+    name: `${icon ?? EIcons.HOME}${type ?? EIconTypes.OUTLINED}`,
+    style: style ?? undefined,
+    className: c,
+  });
+};
+export const CreateIcon = (icon: EIcons, parent?: HTMLElement | UN, type?: EIconTypes | UN, size?: ESizes | UN, defaultClass?: string | UN, opacity?: EOpacity | UN, style?: React.CSSProperties | UN) => {
+  const iconElement = document.createElement(DEFAULT_ICON_ELEMENT_NAME);
+  (iconElement as any).name = `${icon ?? EIcons.HOME}${type ?? EIconTypes.OUTLINED}` as string;
+  SetElementStyles(iconElement, style);
+  (iconElement as any).className = _getIconClass(size, defaultClass, opacity) as string;
+  if (parent) parent.appendChild(iconElement);
+  return iconElement;
+};
+
+const _getBoxClass = (background?: EBackgrounds | UN, makeRound?: boolean | UN, defaultClass?: string | UN, boxSize?: ESizes | UN, isNeedHover?: boolean | UN) => `ib ${background} ${makeRound !== false ? "r" : ""} r item ${defaultClass ?? ""} ${boxSize ?? ESizes.Normal} ${isNeedHover ? "h" : ""}`;
+
+export const Iconbox = ({ children, id, icon, iconType, iconSize, boxSize, background, defaultClass, iconDefaultClass, badgeType, badgeCount, iconOpacity, title, dataKeys, makeRound, boxStyle, onClicked, onMouseEnter, disabledHoverEffect }: Readonly<IIconBoxProps>): JSX.Element => {
+  background = background ?? EBackgrounds.Background1;
+  const isNeedHover = disabledHoverEffect !== false;
+  const c = _getBoxClass(background, makeRound, defaultClass, boxSize, isNeedHover);
+  const dataAttributes = (dataKeys ?? []).reduce((acc, { key, val }) => {
+    (acc as any)[`data-${key}`] = val;
+    return acc;
+  }, {});
+
+  return (
+    <div {...dataAttributes} id={id ?? undefined} style={boxStyle ?? undefined} className={c} onClick={onClicked ?? undefined} onMouseEnter={onMouseEnter ?? undefined}>
+      {title && <span className="title nw">{title}</span>}
+      <Icon icon={icon} opacity={iconOpacity} type={iconType} size={iconSize} defaultClass={iconDefaultClass} />
+      {children}
+    </div>
+  );
+};
+export const CreateIconBox = (icon: EIcons, parent?: HTMLElement | UN, children?: HTMLElement | UN, id?: string | UN, iconType?: EIconTypes | UN, background?: EBackgrounds | UN, boxSize?: ESizes | UN, iconSize?: ESizes | UN, defaultClass?: string | UN, iconDefaultClass?: string | UN, badgeType?: EBadgeTypes | UN, badgeCount?: number | UN, iconOpacity?: EOpacity | UN, title?: string | UN, dataKeys?: { key: string; val: string }[] | UN, makeRound?: boolean | UN, boxStyle?: React.CSSProperties | UN, onClicked?: ClickHandler | UN, onMouseEnter?: ClickHandler | UN, disabledHoverEffect?: boolean | UN): HTMLElement => {
+  background = background ?? EBackgrounds.Background1;
+  const isNeedHover = disabledHoverEffect !== false;
+  const iconBox = document.createElement("div");
+  iconBox.className = _getBoxClass(background, makeRound, defaultClass, boxSize, isNeedHover);
+  SetElementStyles(iconBox, boxStyle);
+
+  if (onClicked) iconBox.onclick = onClicked;
+  if (onMouseEnter) iconBox.onmouseenter = onMouseEnter;
+  if (parent) parent.appendChild(iconBox);
+
+  CreateIcon(icon, iconBox, iconType, iconSize, iconDefaultClass, iconOpacity);
+  if (children) iconBox.appendChild(children as HTMLElement);
+  return iconBox;
+};
+
+export const CreateToggleButton = (parentElement?: HTMLElement | null, children?: HTMLElement | UN, id?: string, boxSize?: ESizes | null, iconSize?: ESizes | null, opacity?: EOpacity | UN, iconType?: EIconTypes | null, boxBackground?: EBackgrounds) => CreateIconBox(EIcons.ELLIPSIS_HORIZONTAL, parentElement, children, id, iconType, boxBackground, boxSize, iconSize, `h ${boxBackground ?? "bg1"} ml5`, "r90");

package/src/components/documents/page-title.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export const GLOBAL_PAGE_TITLE_CLASS = (defaultClass?: string, borderBottom?: number, marginBottom?: number, paddingBottom?: number) => `fs-12 o09 fw600 ${defaultClass ?? ""} bb${borderBottom ?? 0} mb${marginBottom ?? 0} pb${paddingBottom ?? 0}`;
+
+export const PageTitle = ({ title, defaultClass, borderBottom, marginBottom }: { title: string; defaultClass?: string; borderBottom?: number; marginBottom?: number }) => {
+  return <h6 className={GLOBAL_PAGE_TITLE_CLASS(defaultClass, borderBottom, marginBottom, borderBottom ? 2 : 0)}>{title}</h6>;
+};