@pnkx-lib/ui 1.9.178 → 1.9.180

package/es/ui/ConfirmModal.js

@@ -0,0 +1,119 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Button } from './Button.js';
+import { Modal } from './Modal.js';
+
+const ErrorConfirmIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: props?.fill || "#FF4D4F",
+        d: "M12 1.5C6.202 1.5 1.5 6.202 1.5 12S6.202 22.5 12 22.5 22.5 17.798 22.5 12 17.798 1.5 12 1.5Zm3.877 14.49-1.547-.008L12 13.205 9.673 15.98l-1.55.007a.187.187 0 0 1-.187-.188c0-.044.016-.086.044-.122l3.05-3.633-3.05-3.63a.188.188 0 0 1 .143-.31l1.55.008L12 10.889l2.327-2.775 1.547-.007c.103 0 .188.082.188.188a.195.195 0 0 1-.045.121l-3.044 3.63 3.046 3.634a.188.188 0 0 1-.143.31Z"
+      }
+    )
+  }
+);
+
+const InfoConfirmIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: props?.fill || "#1677FF",
+        stroke: props?.stroke,
+        d: "M12 1.5C6.202 1.5 1.5 6.202 1.5 12S6.202 22.5 12 22.5 22.5 17.798 22.5 12 17.798 1.5 12 1.5Zm.75 15.563a.188.188 0 0 1-.188.187h-1.124a.188.188 0 0 1-.188-.188v-6.375c0-.103.084-.187.188-.187h1.124c.104 0 .188.084.188.188v6.374ZM12 9a1.125 1.125 0 0 1 0-2.25A1.125 1.125 0 0 1 12 9Z"
+      }
+    )
+  }
+);
+
+const SuccessIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: props?.fill || "#52C41A",
+        stroke: props?.stroke,
+        d: "M12 1.5C6.202 1.5 1.5 6.202 1.5 12S6.202 22.5 12 22.5 22.5 17.798 22.5 12 17.798 1.5 12 1.5Zm4.535 7.071L11.6 15.415a.745.745 0 0 1-1.212 0l-2.922-4.05a.188.188 0 0 1 .152-.298h1.1c.238 0 .466.115.606.312l1.67 2.316 3.684-5.11a.75.75 0 0 1 .607-.312h1.099c.152 0 .241.174.152.298Z"
+      }
+    )
+  }
+);
+
+const WarningConfrimIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fill: props?.fill || "#FAAD14",
+        d: "M12 1.5C6.202 1.5 1.5 6.202 1.5 12S6.202 22.5 12 22.5 22.5 17.798 22.5 12 17.798 1.5 12 1.5Zm-.75 5.438c0-.104.084-.188.188-.188h1.124c.104 0 .188.084.188.188v6.375a.188.188 0 0 1-.188.187h-1.124a.188.188 0 0 1-.188-.188V6.939ZM12 17.25A1.125 1.125 0 0 1 12 15a1.125 1.125 0 0 1 0 2.25Z"
+      }
+    )
+  }
+);
+
+const ConfirmModal = ({
+  title,
+  content,
+  typeIcon,
+  titleCancelBtn = "Huỷ bỏ",
+  titleSubmitBtn = "Xác nhận",
+  handleCancel,
+  handleSubmit,
+  ...restProps
+}) => {
+  //! State
+  const IconType = () => {
+    switch (typeIcon) {
+      case "success":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(SuccessIcon, {});
+      case "error":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorConfirmIcon, {});
+      case "info":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(InfoConfirmIcon, {});
+      case "warning":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(WarningConfrimIcon, {});
+    }
+  };
+  //! Function
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-fit", children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconType, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: content })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 w-full justify-end items-end pt-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", onClick: handleCancel, children: titleCancelBtn }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", type: "primary", onClick: handleSubmit, children: titleSubmitBtn })
+    ] })
+  ] }) });
+};
+
+export { ConfirmModal };

package/es/ui/Container.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
+
+const Container = ({
+  children,
+  className,
+  size
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: twMerge(size, "mx-auto px-4 sm:px-6 lg:px-8", className), children });
+};
+
+export { Container };

package/es/ui/Divider.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Divider as Divider$1 } from 'antd';
+
+const Divider = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { ...rest, children });
+};
+
+export { Divider };

package/es/ui/Drawer.js

@@ -0,0 +1,19 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Drawer as Drawer$1 } from 'antd';
+
+const Drawer = ({ onSubmit, children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Drawer$1, { ...rest, children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "form",
+    {
+      id: "pnkx-form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+      },
+      method: "POST",
+      children
+    }
+  ) : children });
+};
+
+export { Drawer };

package/es/ui/Dropdown.js

@@ -0,0 +1,9 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Dropdown as Dropdown$1 } from 'antd';
+
+const Dropdown = (props) => {
+  const { containerClassName, dropdownClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown$1, { className: dropdownClassName, ...restProps }) });
+};
+
+export { Dropdown };

package/es/ui/Empty.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Empty as Empty$1 } from 'antd';
+
+const Empty = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Empty$1, { ...props });
+};
+
+export { Empty };

package/es/ui/ErrorBoundary.js

@@ -0,0 +1,81 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Component } from 'react';
+
+class ErrorBoundaryClass extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error, errorInfo: null };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      hasError: true,
+      error,
+      errorInfo
+    });
+    console.error("Caught by ErrorBoundary:", error, errorInfo);
+  }
+  handleReload = () => {
+    window.location.reload();
+  };
+  render() {
+    const { hasError, error, errorInfo } = this.state;
+    if (hasError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.container, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { style: styles.title, children: "🚨 An unexpected error has occurred." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: styles.description, children: "Please refresh the page or contact support if the problem persists." }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { style: styles.button, onClick: this.handleReload, children: "Reload Page" }),
+        process.env.NODE_ENV === "development" && error && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { style: styles.details, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { children: "View Error Details" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: error.toString() }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: errorInfo?.componentStack })
+        ] })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+const ErrorBoundary = ErrorBoundaryClass;
+const styles = {
+  container: {
+    padding: "40px",
+    textAlign: "center",
+    fontFamily: "Arial, sans-serif",
+    color: "#333"
+  },
+  title: {
+    fontSize: "24px",
+    color: "#e74c3c",
+    marginBottom: "20px"
+  },
+  description: {
+    fontSize: "16px",
+    color: "#555",
+    marginBottom: "20px"
+  },
+  button: {
+    padding: "10px 20px",
+    fontSize: "16px",
+    cursor: "pointer",
+    backgroundColor: "#3498db",
+    color: "#fff",
+    border: "none",
+    borderRadius: "5px"
+  },
+  details: {
+    marginTop: "20px",
+    textAlign: "left",
+    background: "#f4f4f4",
+    padding: "15px",
+    borderRadius: "5px",
+    color: "#000"
+  }
+};
+
+export { ErrorBoundary };

package/es/ui/ErrorMessage.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import React__default from 'react';
+
+const ErrorMessage = React__default.memo(
+  ({ errorMessage, isTouched, isSubmitted }) => {
+    if (!(isTouched || isSubmitted)) {
+      return null;
+    }
+    if (!errorMessage) return null;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-2 text-red-600", children: errorMessage });
+  }
+);
+
+export { ErrorMessage };

package/es/ui/Flex.js

@@ -0,0 +1,9 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Flex as Flex$1 } from 'antd';
+
+const Flex = (props) => {
+  const { containerClassName, flexClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { className: flexClassName, ...restProps }) });
+};
+
+export { Flex };

package/es/ui/Footer.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Layout } from 'antd';
+
+const { Footer: AntdFooter } = Layout;
+const Footer = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(AntdFooter, { style: { textAlign: "center" }, children: [
+    "Footer ©",
+    (/* @__PURE__ */ new Date()).getFullYear(),
+    " Created by Điệp lại lập trình"
+  ] });
+};
+
+export { Footer as default };

package/es/ui/Heading.js

@@ -0,0 +1,67 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { c as className } from '../chunks/index-mzHK7Za8.js';
+import { Breadcrumb } from './Breadcrumb.js';
+import { useLocation, Link } from 'react-router';
+
+const Heading = (props) => {
+  const { rightContent, children, noBreadcum, classNameWrapHeading, menu } = props;
+  //! State
+  const location = useLocation();
+  const pathUrl = location.pathname;
+  const breadcrumbsItem = [
+    { title: /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: "/", children: "Trang chủ" }) }
+  ];
+  function findBreadcrumbs(items, currentPath, trail = []) {
+    for (const item of items) {
+      if (!item || !item.path) continue;
+      if (currentPath === item.path) {
+        if (!Object.prototype.hasOwnProperty.call(item, "isShowLabel") || item.isShowLabel) {
+          return [...trail, { title: /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: item.path, children: item.name }) }];
+        }
+        return trail;
+      }
+      if (currentPath.startsWith(item.path)) {
+        const newTrail = [...trail];
+        if (!Object.prototype.hasOwnProperty.call(item, "isShowLabel") || item.isShowLabel) {
+          newTrail.push({
+            title: /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: item.path, children: item.name })
+          });
+        }
+        if (item.children && item.children.length > 0) {
+          const childTrail = findBreadcrumbs(
+            item.children,
+            currentPath,
+            newTrail
+          );
+          if (childTrail) return childTrail;
+        }
+      }
+    }
+    return null;
+  }
+  const dynamicBreadcrumbs = findBreadcrumbs(menu, pathUrl);
+  if (dynamicBreadcrumbs) {
+    breadcrumbsItem.push(...dynamicBreadcrumbs);
+  }
+  console.log("breadcrumbsItem table", breadcrumbsItem);
+  //! Function
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: className(
+          "flex justify-between items-end",
+          classNameWrapHeading
+        ),
+        children: [
+          !noBreadcum && /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, { items: breadcrumbsItem }),
+          rightContent
+        ]
+      }
+    ),
+    children
+  ] });
+};
+
+export { Heading };

package/es/ui/Image.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Image as Image$1 } from 'antd';
+
+const Image = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Image$1, { ...props });
+};
+
+export { Image };

package/es/ui/Label.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Typography } from './Typography.js';
+
+const Label = ({ label, required }) => {
+  //! State
+  //! Function
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 mb-2 items-baseline", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { children: label }),
+    required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-600 h-0", children: "*" })
+  ] });
+};
+
+export { Label };

package/es/ui/Layout.js

@@ -0,0 +1,25 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { S as SiderContext, a as Sider, C as Content, F as Footer, H as Header, L as Layout$1 } from '../chunks/layout-B04d5Lfr.js';
+
+const LayoutComponent = ({
+  layoutClassName,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Layout$1,
+    {
+      className: [layoutClassName, className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+};
+const Layout = Object.assign(LayoutComponent, {
+  Header,
+  Footer,
+  Content,
+  Sider,
+  _InternalSiderContext: SiderContext
+});
+
+export { Layout };

package/es/ui/Menu.js

@@ -0,0 +1,24 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Menu as Menu$1 } from 'antd';
+
+const MenuComponent = ({
+  containerClassName,
+  menuClassName,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1, { className: menuClassName, ...rest }) });
+};
+const MenuItem = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.Item, { ...props });
+MenuItem.displayName = "Menu.Item";
+const SubMenu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.SubMenu, { ...props });
+SubMenu.displayName = "Menu.SubMenu";
+const Divider = Menu$1.Divider;
+const ItemGroup = Menu$1.ItemGroup;
+const MenuComp = MenuComponent;
+MenuComp.Item = MenuItem;
+MenuComp.SubMenu = SubMenu;
+MenuComp.Divider = Divider;
+MenuComp.ItemGroup = ItemGroup;
+const Menu = MenuComp;
+
+export { Menu };

package/es/ui/Modal.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from '../chunks/jsx-runtime-DFKOoQSG.js';
+import { Modal as Modal$1 } from 'antd';
+
+const Modal = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal$1, { ...rest, children });
+};
+
+export { Modal };