@adminlte/react 0.1.0

package/dist/index.js

@@ -0,0 +1,145 @@
+import { SidebarProvider, useSidebarContext } from "./context/sidebar-context.js";
+import { ColorModeProvider, useColorModeContext } from "./context/color-mode-context.js";
+import { CommandPaletteProvider, useCommandPalette } from "./context/command-palette-context.js";
+import { LinkProvider, useLinkComponent } from "./context/link-context.js";
+import { DashboardLayout } from "./layout/dashboard-layout.js";
+import { AuthLayout } from "./layout/auth-layout.js";
+import { AppContent } from "./layout/app-content.js";
+import { Topbar } from "./layout/topbar.js";
+import { Sidebar } from "./layout/sidebar.js";
+import { SidebarBrand } from "./layout/sidebar-brand.js";
+import { SidebarNav } from "./layout/sidebar-nav.js";
+import { SidebarNavItem } from "./layout/sidebar-nav-item.js";
+import { SidebarOverlay } from "./layout/sidebar-overlay.js";
+import { Footer } from "./layout/footer.js";
+import { ColorModeToggle } from "./layout/color-mode-toggle.js";
+import { SmallBox } from "./widget/small-box.js";
+import { InfoBox } from "./widget/info-box.js";
+import { Card } from "./widget/card.js";
+import { Alert } from "./widget/alert.js";
+import { Callout } from "./widget/callout.js";
+import { Progress } from "./widget/progress.js";
+import { ProgressGroup } from "./widget/progress-group.js";
+import { Ratings } from "./widget/ratings.js";
+import { ProfileCard } from "./widget/profile-card.js";
+import { DescriptionBlock } from "./widget/description-block.js";
+import { Timeline } from "./widget/timeline.js";
+import { NavMessages } from "./widget/nav-messages.js";
+import { NavNotifications } from "./widget/nav-notifications.js";
+import { NavTasks } from "./widget/nav-tasks.js";
+import { DirectChat } from "./widget/direct-chat.js";
+import { ApexChart } from "./widget/apex-chart.js";
+import { SparklineChart } from "./widget/sparkline-chart.js";
+import { WorldMap } from "./widget/world-map.js";
+import { CommandPalette } from "./widget/command-palette.js";
+import { flattenMenuToCommands } from "./lib/flatten-menu.js";
+import { Accordion } from "./widget/accordion.js";
+import { Tabs } from "./widget/tabs.js";
+import { Toast } from "./widget/toast.js";
+import { Tooltip } from "./widget/tooltip.js";
+import { Badge } from "./widget/badge.js";
+import { Breadcrumb } from "./widget/breadcrumb.js";
+import { Spinner } from "./widget/spinner.js";
+import { Avatar, AvatarGroup } from "./widget/avatar.js";
+import { ListGroup, ListGroupItem } from "./widget/list-group.js";
+import { Table } from "./widget/table.js";
+import { Pagination } from "./widget/pagination.js";
+import { Stepper } from "./widget/stepper.js";
+import { Dropdown } from "./widget/dropdown.js";
+import { Carousel } from "./widget/carousel.js";
+import { Offcanvas, OffcanvasTrigger } from "./widget/offcanvas.js";
+import { Button } from "./form/button.js";
+import { Input } from "./form/input.js";
+import { Select } from "./form/select.js";
+import { Textarea } from "./form/textarea.js";
+import { InputSwitch } from "./form/input-switch.js";
+import { InputColor } from "./form/input-color.js";
+import { InputFile } from "./form/input-file.js";
+import { InputFlatpickr } from "./form/input-flatpickr.js";
+import { InputTomSelect } from "./form/input-tom-select.js";
+import { Modal } from "./tool/modal.js";
+import { Datatable } from "./tool/datatable.js";
+import { Editor } from "./tool/editor.js";
+import { usePushMenu } from "./hooks/use-push-menu.js";
+import { useCardWidget } from "./hooks/use-card-widget.js";
+import { useDirectChat } from "./hooks/use-direct-chat.js";
+import { useFullscreen } from "./hooks/use-fullscreen.js";
+import { useTreeviewAnimation } from "./hooks/use-treeview-animation.js";
+import { useSortable } from "./hooks/use-sortable.js";
+export {
+  Accordion,
+  Alert,
+  ApexChart,
+  AppContent,
+  AuthLayout,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumb,
+  Button,
+  Callout,
+  Card,
+  Carousel,
+  ColorModeProvider,
+  ColorModeToggle,
+  CommandPalette,
+  CommandPaletteProvider,
+  DashboardLayout,
+  Datatable,
+  DescriptionBlock,
+  DirectChat,
+  Dropdown,
+  Editor,
+  Footer,
+  InfoBox,
+  Input,
+  InputColor,
+  InputFile,
+  InputFlatpickr,
+  InputSwitch,
+  InputTomSelect,
+  LinkProvider,
+  ListGroup,
+  ListGroupItem,
+  Modal,
+  NavMessages,
+  NavNotifications,
+  NavTasks,
+  Offcanvas,
+  OffcanvasTrigger,
+  Pagination,
+  ProfileCard,
+  Progress,
+  ProgressGroup,
+  Ratings,
+  Select,
+  Sidebar,
+  SidebarBrand,
+  SidebarNav,
+  SidebarNavItem,
+  SidebarOverlay,
+  SidebarProvider,
+  SmallBox,
+  SparklineChart,
+  Spinner,
+  Stepper,
+  Table,
+  Tabs,
+  Textarea,
+  Timeline,
+  Toast,
+  Tooltip,
+  Topbar,
+  WorldMap,
+  flattenMenuToCommands,
+  useCardWidget,
+  useColorModeContext,
+  useCommandPalette,
+  useDirectChat,
+  useFullscreen,
+  useLinkComponent,
+  usePushMenu,
+  useSidebarContext,
+  useSortable,
+  useTreeviewAnimation
+};

package/dist/layout/app-content.js

@@ -0,0 +1,18 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AppContent({
+  breadcrumbs,
+  title,
+  fluid = true,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (title || breadcrumbs) && /* @__PURE__ */ jsx("div", { className: "app-content-header", children: /* @__PURE__ */ jsx("div", { className: `container-${fluid ? "fluid" : "lg"}`, children: /* @__PURE__ */ jsxs("div", { className: "row", children: [
+      /* @__PURE__ */ jsx("div", { className: "col-sm-6", children: title && /* @__PURE__ */ jsx("h3", { className: "mb-0", children: title }) }),
+      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-sm-6", children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb float-sm-end", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsx("li", { className: `breadcrumb-item ${idx === breadcrumbs.length - 1 ? "active" : ""}`, children: crumb.href ? /* @__PURE__ */ jsx("a", { href: crumb.href, children: crumb.label }) : crumb.label }, idx)) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "app-content", children: /* @__PURE__ */ jsx("div", { className: `container-${fluid ? "fluid" : "lg"}`, children }) })
+  ] });
+}
+export {
+  AppContent
+};

package/dist/layout/auth-layout.js

@@ -0,0 +1,25 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+function AuthLayout({
+  authType = "login",
+  logo = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("b", { children: "Admin" }),
+    "LTE"
+  ] }),
+  logoHref = "/",
+  children
+}) {
+  useEffect(() => {
+    const cls = [`${authType}-page`, "bg-body-secondary"];
+    document.body.classList.add(...cls);
+    return () => document.body.classList.remove(...cls);
+  }, [authType]);
+  return /* @__PURE__ */ jsxs("div", { className: `${authType}-box`, children: [
+    /* @__PURE__ */ jsx("div", { className: `${authType}-logo`, children: /* @__PURE__ */ jsx("a", { href: logoHref, children: logo }) }),
+    /* @__PURE__ */ jsx("div", { className: "card", children: /* @__PURE__ */ jsx("div", { className: `card-body ${authType}-card-body`, children }) })
+  ] });
+}
+export {
+  AuthLayout
+};

package/dist/layout/color-mode-toggle.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useColorModeContext } from "../context/color-mode-context.js";
+function ColorModeToggle() {
+  const { colorMode, setColorMode } = useColorModeContext();
+  const toggleMode = (mode) => {
+    setColorMode(mode);
+  };
+  return /* @__PURE__ */ jsxs("li", { className: "nav-item dropdown", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "nav-link",
+        id: "bd-theme",
+        type: "button",
+        "aria-label": "Toggle color scheme",
+        "data-bs-toggle": "dropdown",
+        "aria-expanded": "false",
+        children: /* @__PURE__ */ jsx("i", { className: `bi bi-${colorMode === "light" ? "sun-fill" : colorMode === "dark" ? "moon-fill" : "circle-half"}` })
+      }
+    ),
+    /* @__PURE__ */ jsxs("ul", { className: "dropdown-menu dropdown-menu-end", "aria-labelledby": "bd-theme", children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `dropdown-item d-flex align-items-center ${colorMode === "light" ? "active" : ""}`,
+          onClick: () => toggleMode("light"),
+          children: [
+            /* @__PURE__ */ jsx("i", { className: "bi bi-sun-fill me-2" }),
+            "Light",
+            colorMode === "light" && /* @__PURE__ */ jsx("i", { className: "bi bi-check-lg ms-auto" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `dropdown-item d-flex align-items-center ${colorMode === "dark" ? "active" : ""}`,
+          onClick: () => toggleMode("dark"),
+          children: [
+            /* @__PURE__ */ jsx("i", { className: "bi bi-moon-fill me-2" }),
+            "Dark",
+            colorMode === "dark" && /* @__PURE__ */ jsx("i", { className: "bi bi-check-lg ms-auto" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `dropdown-item d-flex align-items-center ${colorMode === "auto" ? "active" : ""}`,
+          onClick: () => toggleMode("auto"),
+          children: [
+            /* @__PURE__ */ jsx("i", { className: "bi bi-circle-half me-2" }),
+            "Auto",
+            colorMode === "auto" && /* @__PURE__ */ jsx("i", { className: "bi bi-check-lg ms-auto" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  ColorModeToggle
+};

package/dist/layout/dashboard-layout.js

@@ -0,0 +1,101 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+import { SidebarProvider } from "../context/sidebar-context.js";
+import { ColorModeProvider } from "../context/color-mode-context.js";
+import { CommandPaletteProvider } from "../context/command-palette-context.js";
+import { LinkProvider } from "../context/link-context.js";
+import { BodyClassSync } from "../context/body-class-sync.js";
+import { LteBehaviors } from "../context/lte-behaviors.js";
+import { Accessibility } from "../context/accessibility.js";
+import { HtmlDir } from "../context/html-dir.js";
+import { Topbar } from "./topbar.js";
+import { Sidebar } from "./sidebar.js";
+import { Footer } from "./footer.js";
+import { CommandPalette } from "../widget/command-palette.js";
+import { flattenMenuToCommands } from "../lib/flatten-menu.js";
+function DashboardLayout({
+  menuItems,
+  logo = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("b", { children: "Admin" }),
+    "LTE"
+  ] }),
+  logoHref = "/",
+  user,
+  sidebarTheme = "dark",
+  sidebarClass,
+  sidebarBreakpoint = "lg",
+  sidebarMini = false,
+  fixedHeader = false,
+  fixedSidebar = false,
+  fixedFooter = false,
+  colorModeToggle = true,
+  initialColorMode = "auto",
+  dir,
+  enableSidebarPersistence = false,
+  navbarClass,
+  bodyClass,
+  topbarStart,
+  topbarEnd,
+  footer,
+  linkComponent,
+  docsHref,
+  docsLabel,
+  children
+}) {
+  const breakpointValue = sidebarBreakpoint === "lg" ? 992 : 768;
+  const staticBodyClasses = cn(
+    "layout-fixed",
+    `sidebar-expand-${sidebarBreakpoint}`,
+    fixedHeader && "fixed-header",
+    fixedSidebar && "fixed-sidebar",
+    fixedFooter && "fixed-footer",
+    "bg-body-tertiary",
+    bodyClass
+  );
+  const defaultSidebarClass = "bg-body-secondary shadow";
+  const commandItems = flattenMenuToCommands(menuItems);
+  return /* @__PURE__ */ jsx(LinkProvider, { component: linkComponent, children: /* @__PURE__ */ jsx(ColorModeProvider, { initialMode: initialColorMode, children: /* @__PURE__ */ jsx(
+    SidebarProvider,
+    {
+      sidebarMini,
+      enablePersistence: enableSidebarPersistence,
+      sidebarBreakpoint: breakpointValue,
+      children: /* @__PURE__ */ jsxs(CommandPaletteProvider, { children: [
+        /* @__PURE__ */ jsx(BodyClassSync, { staticClasses: staticBodyClasses }),
+        /* @__PURE__ */ jsx(LteBehaviors, {}),
+        /* @__PURE__ */ jsx(Accessibility, {}),
+        dir && /* @__PURE__ */ jsx(HtmlDir, { dir }),
+        /* @__PURE__ */ jsxs("div", { className: "app-wrapper", children: [
+          /* @__PURE__ */ jsx(
+            Topbar,
+            {
+              colorModeToggle,
+              navbarClass,
+              start: topbarStart,
+              end: topbarEnd,
+              user
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Sidebar,
+            {
+              items: menuItems,
+              logo,
+              logoHref,
+              theme: sidebarTheme,
+              sidebarClass: sidebarClass || defaultSidebarClass,
+              docsHref,
+              docsLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("main", { className: "app-main", children }),
+          /* @__PURE__ */ jsx(Footer, { children: footer })
+        ] }),
+        /* @__PURE__ */ jsx(CommandPalette, { items: commandItems })
+      ] })
+    }
+  ) }) });
+}
+export {
+  DashboardLayout
+};

package/dist/layout/footer.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Footer({ children }) {
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsxs("footer", { className: "app-footer fs-7", children: [
+    /* @__PURE__ */ jsx("div", { className: "float-end d-none d-sm-inline", children: "Anything you want" }),
+    /* @__PURE__ */ jsxs("strong", { children: [
+      "Copyright \xA9 2014-",
+      year,
+      "\xA0",
+      /* @__PURE__ */ jsx("a", { href: "https://adminlte.io", className: "text-decoration-none", children: "AdminLTE.io" }),
+      "."
+    ] }),
+    "All rights reserved.",
+    children
+  ] });
+}
+export {
+  Footer
+};

package/dist/layout/sidebar-brand.js

@@ -0,0 +1,16 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SidebarBrand({ logo = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("b", { children: "Admin" }),
+  "LTE"
+] }), href = "/" }) {
+  return /* @__PURE__ */ jsx("div", { className: "sidebar-brand", children: /* @__PURE__ */ jsx("a", { href, className: "brand-link", children: typeof logo === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("img", { src: logo, alt: "Logo", className: "brand-image opacity-75 shadow" }),
+    /* @__PURE__ */ jsx("span", { className: "brand-text fw-light", children: "AdminLTE 4" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "brand-image opacity-75 shadow" }),
+    /* @__PURE__ */ jsx("span", { className: "brand-text fw-light", children: logo })
+  ] }) }) });
+}
+export {
+  SidebarBrand
+};

package/dist/layout/sidebar-nav-item.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTreeviewAnimation } from "../hooks/use-treeview-animation.js";
+import { useLinkComponent } from "../context/link-context.js";
+import { cn } from "../lib/class-name.js";
+function SidebarNavGroup({
+  item,
+  currentPath,
+  depth
+}) {
+  const hasActiveChild = item.children.some(
+    (child) => child.type === "item" && (currentPath === child.href || currentPath.startsWith(child.href + "/"))
+  );
+  const [isOpen, setIsOpen] = useState(hasActiveChild);
+  const { ref, style } = useTreeviewAnimation(isOpen, 300);
+  return /* @__PURE__ */ jsxs("li", { className: cn("nav-item", isOpen && "menu-open"), children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "nav-link", onClick: () => setIsOpen(!isOpen), children: [
+      item.icon && /* @__PURE__ */ jsx("i", { className: `nav-icon bi ${item.icon}` }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        item.text,
+        /* @__PURE__ */ jsx("i", { className: "nav-arrow bi bi-chevron-right" })
+      ] }),
+      item.badge && /* @__PURE__ */ jsx("span", { className: `nav-badge badge text-bg-${item.badgeColor || "secondary"} ms-auto me-3`, children: item.badge })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { ref, style, className: "nav nav-treeview", children: item.children.map((child, idx) => /* @__PURE__ */ jsx(SidebarNavItem, { item: child, currentPath, depth: depth + 1 }, idx)) })
+  ] });
+}
+function SidebarNavItem({ item, currentPath, depth = 0 }) {
+  const Link = useLinkComponent();
+  if (item.type === "header") {
+    return /* @__PURE__ */ jsx("li", { className: "nav-header", children: item.text });
+  }
+  if (item.type === "item") {
+    const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
+    return /* @__PURE__ */ jsx("li", { className: cn("nav-item", isActive && "active"), children: /* @__PURE__ */ jsxs(Link, { href: item.href, className: cn("nav-link", isActive && "active"), target: item.target, children: [
+      item.icon && /* @__PURE__ */ jsx("i", { className: cn("nav-icon bi", item.icon, item.iconColor && `text-${item.iconColor}`) }),
+      /* @__PURE__ */ jsx("p", { children: item.text }),
+      item.badge && /* @__PURE__ */ jsx("span", { className: `nav-badge badge text-bg-${item.badgeColor || "secondary"} ms-auto`, children: item.badge })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(SidebarNavGroup, { item, currentPath, depth });
+}
+export {
+  SidebarNavItem
+};

package/dist/layout/sidebar-nav.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { SidebarNavItem } from "./sidebar-nav-item.js";
+import { useLinkComponent } from "../context/link-context.js";
+function SidebarNav({ items, docsHref, docsLabel = "View documentation" }) {
+  const pathname = usePathname();
+  const Link = useLinkComponent();
+  return /* @__PURE__ */ jsxs("nav", { className: "mt-2", "aria-label": "Main navigation", children: [
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "nav sidebar-menu flex-column",
+        "data-lte-toggle": "treeview",
+        "data-accordion": "false",
+        id: "navigation",
+        children: items.map((item, idx) => /* @__PURE__ */ jsx(
+          SidebarNavItem,
+          {
+            item,
+            currentPath: pathname,
+            depth: 0
+          },
+          idx
+        ))
+      }
+    ),
+    docsHref && /* @__PURE__ */ jsx("div", { className: "p-3 mt-3 border-top border-secondary border-opacity-25", children: /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: docsHref,
+        className: "btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx("i", { className: "bi bi-book", "aria-hidden": "true" }),
+          docsLabel
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  SidebarNav
+};

package/dist/layout/sidebar-overlay.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSidebarContext } from "../context/sidebar-context.js";
+function SidebarOverlay() {
+  const { collapse } = useSidebarContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "sidebar-overlay",
+      onClick: collapse,
+      onTouchEnd: collapse,
+      role: "presentation"
+    }
+  );
+}
+export {
+  SidebarOverlay
+};

package/dist/layout/sidebar.js

@@ -0,0 +1,48 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { SidebarBrand } from "./sidebar-brand.js";
+import { SidebarNav } from "./sidebar-nav.js";
+import { SidebarOverlay } from "./sidebar-overlay.js";
+function Sidebar({
+  items,
+  logo,
+  logoHref = "/",
+  theme = "dark",
+  sidebarClass,
+  docsHref,
+  docsLabel
+}) {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined" || window.innerWidth <= 992) return;
+    let instance;
+    let rafId = 0;
+    const deadline = performance.now() + 1e4;
+    const tryInit = () => {
+      const osg = window.OverlayScrollbarsGlobal;
+      if (osg?.OverlayScrollbars && wrapperRef.current) {
+        instance = osg.OverlayScrollbars(wrapperRef.current, {
+          scrollbars: { theme: "os-theme-light", autoHide: "leave", clickScroll: true }
+        });
+      } else if (performance.now() < deadline) {
+        rafId = window.requestAnimationFrame(tryInit);
+      }
+    };
+    tryInit();
+    return () => {
+      window.cancelAnimationFrame(rafId);
+      instance?.destroy?.();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("aside", { className: `app-sidebar ${sidebarClass || ""}`, "data-bs-theme": theme, children: [
+      /* @__PURE__ */ jsx(SidebarBrand, { logo, href: logoHref }),
+      /* @__PURE__ */ jsx("div", { className: "sidebar-wrapper", ref: wrapperRef, children: /* @__PURE__ */ jsx(SidebarNav, { items, docsHref, docsLabel }) })
+    ] }),
+    /* @__PURE__ */ jsx(SidebarOverlay, {})
+  ] });
+}
+export {
+  Sidebar
+};