@adminlte/react 0.1.0

package/dist/layout/topbar.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSidebarContext } from "../context/sidebar-context.js";
+import { useFullscreen } from "../hooks/use-fullscreen.js";
+import { useCommandPalette } from "../context/command-palette-context.js";
+import { ColorModeToggle } from "./color-mode-toggle.js";
+const DEFAULT_USER = {
+  name: "Alexander Pierce",
+  image: "/assets/img/user2-160x160.jpg",
+  role: "Web Developer",
+  memberSince: "Nov. 2023"
+};
+function FullscreenToggle() {
+  const { isFullscreen, toggleFullscreen } = useFullscreen();
+  return /* @__PURE__ */ jsx("li", { className: "nav-item", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "nav-link",
+      onClick: toggleFullscreen,
+      title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+      children: /* @__PURE__ */ jsx("i", { className: `bi ${isFullscreen ? "bi-fullscreen-exit" : "bi-arrows-fullscreen"}` })
+    }
+  ) });
+}
+function Topbar({
+  start,
+  end,
+  colorModeToggle,
+  search = true,
+  fullscreen = true,
+  user = DEFAULT_USER,
+  navbarClass
+}) {
+  const { toggle } = useSidebarContext();
+  const commandPalette = useCommandPalette();
+  return /* @__PURE__ */ jsx("nav", { className: `app-header navbar navbar-expand bg-body ${navbarClass || ""}`.trim(), children: /* @__PURE__ */ jsxs("div", { className: "container-fluid", children: [
+    /* @__PURE__ */ jsxs("ul", { className: "navbar-nav", children: [
+      /* @__PURE__ */ jsx("li", { className: "nav-item", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "nav-link",
+          onClick: toggle,
+          title: "Toggle sidebar",
+          children: /* @__PURE__ */ jsx("i", { className: "bi bi-list" })
+        }
+      ) }),
+      start
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { className: "navbar-nav ms-auto", children: [
+      search && /* @__PURE__ */ jsx("li", { className: "nav-item d-flex align-items-center me-2", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "btn btn-sm rounded-pill border bg-body-secondary text-secondary d-inline-flex align-items-center gap-2 px-3",
+          title: "Search (\u2318K)",
+          onClick: () => commandPalette?.open(),
+          children: [
+            /* @__PURE__ */ jsx("i", { className: "bi bi-search" }),
+            /* @__PURE__ */ jsx("span", { className: "d-none d-md-inline", children: "Search" }),
+            /* @__PURE__ */ jsx("kbd", { className: "d-none d-md-inline border rounded px-1 ms-1 fs-7 bg-body text-body-secondary", children: "\u2318K" })
+          ]
+        }
+      ) }),
+      end,
+      fullscreen && /* @__PURE__ */ jsx(FullscreenToggle, {}),
+      colorModeToggle && /* @__PURE__ */ jsx(ColorModeToggle, {}),
+      /* @__PURE__ */ jsxs("li", { className: "nav-item dropdown user-menu", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "nav-link dropdown-toggle d-flex align-items-center",
+            "data-bs-toggle": "dropdown",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: user.image,
+                  alt: user.name,
+                  className: "user-image rounded-circle shadow",
+                  width: "32",
+                  height: "32"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "d-none d-md-inline ms-2", children: user.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("ul", { className: "dropdown-menu dropdown-menu-lg dropdown-menu-end", children: [
+          /* @__PURE__ */ jsxs("li", { className: "user-header text-bg-primary", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: user.image,
+                alt: user.name,
+                className: "rounded-circle shadow",
+                width: "80",
+                height: "80"
+              }
+            ),
+            /* @__PURE__ */ jsxs("p", { children: [
+              user.name,
+              user.role ? ` - ${user.role}` : "",
+              user.memberSince && /* @__PURE__ */ jsxs("small", { children: [
+                "Member since ",
+                user.memberSince
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("li", { className: "user-body", children: /* @__PURE__ */ jsxs("div", { className: "row", children: [
+            /* @__PURE__ */ jsx("div", { className: "col-4 text-center", children: /* @__PURE__ */ jsx("a", { href: "#", children: "Followers" }) }),
+            /* @__PURE__ */ jsx("div", { className: "col-4 text-center", children: /* @__PURE__ */ jsx("a", { href: "#", children: "Sales" }) }),
+            /* @__PURE__ */ jsx("div", { className: "col-4 text-center", children: /* @__PURE__ */ jsx("a", { href: "#", children: "Friends" }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("li", { className: "user-footer", children: [
+            /* @__PURE__ */ jsx("a", { href: "#", className: "btn btn-outline-secondary", children: "Profile" }),
+            /* @__PURE__ */ jsx("a", { href: "#", className: "btn btn-outline-danger float-end", children: "Sign out" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  Topbar
+};

package/dist/lib/class-name.js

@@ -0,0 +1,6 @@
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+export {
+  cn
+};

package/dist/lib/flatten-menu.js

@@ -0,0 +1,23 @@
+function flattenMenuToCommands(nodes) {
+  const out = [];
+  const walk = (list, section) => {
+    let sec = section;
+    for (const node of list) {
+      if (node.type === "header") {
+        sec = node.text;
+      } else if (node.type === "item") {
+        if (node.href && node.href !== "#") {
+          out.push({ label: node.text, href: node.href, icon: node.icon, section: sec });
+        }
+      } else if (node.type === "group") {
+        walk(node.children, node.text);
+      }
+    }
+  };
+  walk(nodes);
+  const seen = /* @__PURE__ */ new Set();
+  return out.filter((c) => seen.has(c.href) ? false : (seen.add(c.href), true));
+}
+export {
+  flattenMenuToCommands
+};

package/dist/tool/datatable.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+function Datatable({
+  id,
+  columns,
+  data,
+  apiUrl,
+  tabulatorOptions,
+  className
+}) {
+  const tableRef = useRef(null);
+  const reactId = useId();
+  const tableId = id ?? `datatable-${reactId.replace(/:/g, "")}`;
+  useEffect(() => {
+    const element = tableRef.current;
+    if (!element) return;
+    let cancelled = false;
+    let instance = null;
+    import("tabulator-tables").then(({ default: Tabulator }) => {
+      if (cancelled) return;
+      const tableOptions = {
+        columns: columns.map((col) => ({
+          title: col.title,
+          field: col.field,
+          sorter: col.sorter || "string",
+          formatter: col.formatter || "plaintext",
+          width: col.width || 150
+        })),
+        ...apiUrl ? { ajaxURL: apiUrl, ajaxProgressiveLoad: "scroll" } : { data: data || [] },
+        ...tabulatorOptions
+      };
+      instance = new Tabulator(element, tableOptions);
+    });
+    return () => {
+      cancelled = true;
+      instance?.destroy?.();
+      instance = null;
+    };
+  }, [columns, data, apiUrl, tabulatorOptions]);
+  return /* @__PURE__ */ jsx("div", { id: tableId, ref: tableRef, className: `datatable ${className || ""}` });
+}
+export {
+  Datatable
+};

package/dist/tool/editor.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function Editor({
+  name,
+  label,
+  value = "",
+  placeholder = "Enter text...",
+  quillOptions,
+  fgroupClass,
+  onChange
+}) {
+  const editorRef = useRef(null);
+  const quillRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  const [isLoading, setIsLoading] = useState(true);
+  const [html, setHtml] = useState(value);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    const element = editorRef.current;
+    if (!element) return;
+    let cancelled = false;
+    import("quill").then(({ default: Quill }) => {
+      if (cancelled || quillRef.current) return;
+      const quill = new Quill(element, {
+        theme: "snow",
+        placeholder,
+        ...quillOptions
+      });
+      quillRef.current = quill;
+      if (value) {
+        element.querySelector(".ql-editor").innerHTML = value;
+      }
+      quill.on("text-change", () => {
+        const current = element.querySelector(".ql-editor").innerHTML;
+        setHtml(current);
+        onChangeRef.current?.(current);
+      });
+      setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    const element = editorRef.current;
+    if (!element || !quillRef.current) return;
+    const editorEl = element.querySelector(".ql-editor");
+    if (editorEl && editorEl.innerHTML !== value) {
+      editorEl.innerHTML = value;
+      setHtml(value);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: `mb-3 ${fgroupClass || ""}`, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "form-label", children: label }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "p-3 text-muted text-center", children: /* @__PURE__ */ jsx("small", { children: "Loading editor..." }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: editorRef,
+        className: "editor",
+        style: { display: isLoading ? "none" : "block" }
+      }
+    ),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name, value: html })
+  ] });
+}
+export {
+  Editor
+};

package/dist/tool/modal.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Modal({
+  id,
+  title,
+  size,
+  theme,
+  staticBackdrop,
+  scrollable,
+  centered,
+  footer,
+  children
+}) {
+  const sizeClass = size ? `modal-${size}` : "";
+  const scrollClass = scrollable ? "modal-dialog-scrollable" : "";
+  const centeredClass = centered ? "modal-dialog-centered" : "";
+  return /* @__PURE__ */ jsx("div", { className: "modal fade", id, tabIndex: -1, children: /* @__PURE__ */ jsx("div", { className: `modal-dialog ${sizeClass} ${scrollClass} ${centeredClass}`.trim(), children: /* @__PURE__ */ jsxs("div", { className: `modal-content ${theme ? `text-bg-${theme}` : ""}`.trim(), children: [
+    title && /* @__PURE__ */ jsxs("div", { className: "modal-header", children: [
+      /* @__PURE__ */ jsx("h5", { className: "modal-title", children: title }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "modal" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "modal-body", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "modal-footer", children: footer })
+  ] }) }) });
+}
+export {
+  Modal
+};

package/dist/widget/accordion.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function Accordion({
+  items,
+  defaultOpen = 0,
+  alwaysOpen = false,
+  flush,
+  id = "accordion",
+  className
+}) {
+  const [open, setOpen] = useState(defaultOpen >= 0 ? [defaultOpen] : []);
+  const toggle = (i) => setOpen(
+    (prev) => prev.includes(i) ? prev.filter((x) => x !== i) : alwaysOpen ? [...prev, i] : [i]
+  );
+  return /* @__PURE__ */ jsx("div", { className: `accordion${flush ? " accordion-flush" : ""}${className ? ` ${className}` : ""}`, id, children: items.map((item, i) => {
+    const isOpen = open.includes(i);
+    return /* @__PURE__ */ jsxs("div", { className: "accordion-item", children: [
+      /* @__PURE__ */ jsx("h2", { className: "accordion-header", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `accordion-button${isOpen ? "" : " collapsed"}`,
+          "aria-expanded": isOpen,
+          onClick: () => toggle(i),
+          children: item.title
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: `accordion-collapse collapse${isOpen ? " show" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "accordion-body", children: item.children }) })
+    ] }, i);
+  }) });
+}
+export {
+  Accordion
+};

package/dist/widget/alert.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Alert({
+  theme = "info",
+  title,
+  icon,
+  dismissable,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `alert alert-${theme}`, role: "alert", children: [
+    icon && /* @__PURE__ */ jsx("i", { className: `bi ${icon} me-2` }),
+    title && /* @__PURE__ */ jsx("strong", { children: title }),
+    children,
+    dismissable && /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert" })
+  ] });
+}
+export {
+  Alert
+};

package/dist/widget/apex-chart.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function ApexChart({ id, series, config }) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  const seriesKey = JSON.stringify(series);
+  const configKey = JSON.stringify(config);
+  useEffect(() => {
+    let cancelled = false;
+    const el = containerRef.current;
+    if (!el) return;
+    if (chartRef.current) {
+      chartRef.current.updateOptions({ ...config, series }, true, true);
+      return;
+    }
+    const initChart = async () => {
+      const ApexCharts = (await import("apexcharts")).default;
+      if (cancelled || !containerRef.current) return;
+      const chart = new ApexCharts(el, { ...config, series });
+      chartRef.current = chart;
+      chart.render();
+    };
+    initChart().catch((err) => console.error("ApexChart init error:", err));
+    return () => {
+      cancelled = true;
+    };
+  }, [id, seriesKey, configKey]);
+  useEffect(
+    () => () => {
+      chartRef.current?.destroy();
+      chartRef.current = null;
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx("div", { id, ref: containerRef });
+}
+export {
+  ApexChart
+};

package/dist/widget/avatar.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cn } from "../lib/class-name.js";
+const STATUS_THEME = {
+  online: "success",
+  offline: "secondary",
+  away: "warning",
+  busy: "danger"
+};
+function Avatar({
+  src,
+  alt = "",
+  initials,
+  size = 40,
+  rounded,
+  theme = "secondary",
+  status,
+  className
+}) {
+  const shape = rounded ? "rounded" : "rounded-circle";
+  const dot = status && /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "position-absolute bottom-0 end-0 border border-2 border-white rounded-circle",
+        `bg-${STATUS_THEME[status]}`
+      ),
+      style: { width: size * 0.28, height: size * 0.28 },
+      title: status
+    }
+  );
+  const inner = src ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      width: size,
+      height: size,
+      className: cn(shape, "object-fit-cover"),
+      style: { width: size, height: size }
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("d-inline-flex align-items-center justify-content-center", shape, `text-bg-${theme}`),
+      style: { width: size, height: size, fontSize: size * 0.4 },
+      "aria-label": alt || initials,
+      children: initials
+    }
+  );
+  if (!status) return /* @__PURE__ */ jsx("span", { className: cn("d-inline-block", className), children: inner });
+  return /* @__PURE__ */ jsxs("span", { className: cn("position-relative d-inline-block", className), style: { lineHeight: 0 }, children: [
+    inner,
+    dot
+  ] });
+}
+function AvatarGroup({ overlap = 12, className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("d-inline-flex align-items-center", className), children: Children.map(
+    children,
+    (child, idx) => isValidElement(child) ? cloneElement(child, {
+      style: {
+        ...child.props.style,
+        marginLeft: idx === 0 ? 0 : -overlap,
+        zIndex: idx
+      }
+    }) : child
+  ) });
+}
+export {
+  Avatar,
+  AvatarGroup
+};

package/dist/widget/badge.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Badge({ theme = "secondary", pill, positioned, className, children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "badge",
+        `text-bg-${theme}`,
+        pill && "rounded-pill",
+        positioned && "position-absolute top-0 start-100 translate-middle",
+        className
+      ),
+      children
+    }
+  );
+}
+export {
+  Badge
+};

package/dist/widget/breadcrumb.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Breadcrumb({ items, divider, className, label = "breadcrumb" }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": label,
+      style: divider ? { ["--bs-breadcrumb-divider"]: `"${divider}"` } : void 0,
+      children: /* @__PURE__ */ jsx("ol", { className: cn("breadcrumb", className), children: items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: cn("breadcrumb-item", isLast && "active"),
+            "aria-current": isLast ? "page" : void 0,
+            children: item.href && !isLast ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : item.label
+          },
+          idx
+        );
+      }) })
+    }
+  );
+}
+export {
+  Breadcrumb
+};

package/dist/widget/callout.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Callout({ theme = "info", title, icon, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: `callout callout-${theme}`, children: [
+    icon && /* @__PURE__ */ jsx("i", { className: `bi ${icon}` }),
+    title && /* @__PURE__ */ jsx("h5", { children: title }),
+    children
+  ] });
+}
+export {
+  Callout
+};

package/dist/widget/card.js

@@ -0,0 +1,84 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCardWidget } from "../hooks/use-card-widget.js";
+function Card({
+  title,
+  icon,
+  theme,
+  variant = "default",
+  outline,
+  collapsible,
+  defaultCollapsed,
+  removable,
+  onRemove,
+  maximizable,
+  bodyClass,
+  headerClass,
+  footerClass,
+  tools,
+  footer,
+  children,
+  className
+}) {
+  const { isCollapsed, isRemoved, toggleCollapse, toggleMaximize, remove } = useCardWidget(
+    defaultCollapsed
+  );
+  if (isRemoved) return null;
+  const resolvedVariant = outline ? "outline" : variant;
+  let cardClass = "card";
+  if (theme) {
+    if (resolvedVariant === "outline") cardClass = `card card-outline card-${theme}`;
+    else if (resolvedVariant === "solid") cardClass = `card text-bg-${theme}`;
+    else cardClass = `card card-${theme}`;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `${cardClass}${isCollapsed ? " collapsed-card" : ""} ${className || ""}`, children: [
+    (title || tools) && /* @__PURE__ */ jsxs("div", { className: `card-header ${headerClass || ""}`, children: [
+      /* @__PURE__ */ jsx("h3", { className: "card-title", children: title || "" }),
+      /* @__PURE__ */ jsxs("div", { className: "card-tools", children: [
+        (collapsible || removable || maximizable) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          collapsible && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-tool",
+              onClick: toggleCollapse,
+              title: isCollapsed ? "Expand" : "Collapse",
+              children: /* @__PURE__ */ jsx("i", { className: `bi ${isCollapsed ? "bi-plus-lg" : "bi-dash-lg"}` })
+            }
+          ),
+          removable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-tool",
+              onClick: () => {
+                remove();
+                onRemove?.();
+              },
+              title: "Remove",
+              children: /* @__PURE__ */ jsx("i", { className: "bi bi-x-lg" })
+            }
+          ),
+          maximizable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-tool",
+              onClick: toggleMaximize,
+              title: "Maximize",
+              children: /* @__PURE__ */ jsx("i", { className: "bi bi-fullscreen" })
+            }
+          )
+        ] }),
+        tools
+      ] })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: `card-body ${bodyClass || ""}`, children }),
+      footer && /* @__PURE__ */ jsx("div", { className: `card-footer ${footerClass || ""}`, children: footer })
+    ] })
+  ] });
+}
+export {
+  Card
+};