@adminlte/react 0.1.0

package/dist/widget/pagination.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function buildRange(page, total, sibling) {
+  const tokens = /* @__PURE__ */ new Set([1, total]);
+  for (let p = page - sibling; p <= page + sibling; p++) {
+    if (p >= 1 && p <= total) tokens.add(p);
+  }
+  const sorted = [...tokens].sort((a, b) => a - b);
+  const out = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (prev && p - prev > 1) out.push("ellipsis");
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  size,
+  siblingCount = 1,
+  align = "start",
+  hideControls,
+  label = "Pagination",
+  className
+}) {
+  if (totalPages < 1) return null;
+  const tokens = buildRange(page, totalPages, siblingCount);
+  const item = (key, content, target, opts = {}) => {
+    const { active, disabled, ariaLabel } = opts;
+    const go = (e) => {
+      if (disabled || active) return;
+      if (onPageChange) {
+        e.preventDefault();
+        onPageChange(target);
+      }
+    };
+    return /* @__PURE__ */ jsx("li", { className: cn("page-item", active && "active", disabled && "disabled"), children: onPageChange ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "page-link",
+        onClick: go,
+        "aria-label": ariaLabel,
+        "aria-current": active ? "page" : void 0,
+        disabled,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "page-link",
+        href: "#",
+        onClick: go,
+        "aria-label": ariaLabel,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : void 0,
+        children: content
+      }
+    ) }, key);
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      className: cn(
+        "pagination mb-0",
+        size && `pagination-${size}`,
+        align === "center" && "justify-content-center",
+        align === "end" && "justify-content-end",
+        className
+      ),
+      children: [
+        !hideControls && item("prev", /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2039" }), page - 1, {
+          disabled: page <= 1,
+          ariaLabel: "Previous page"
+        }),
+        tokens.map(
+          (t, i) => t === "ellipsis" ? /* @__PURE__ */ jsx("li", { className: "page-item disabled", children: /* @__PURE__ */ jsx("span", { className: "page-link", children: "\u2026" }) }, `e${i}`) : item(t, t, t, { active: t === page })
+        ),
+        !hideControls && item("next", /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u203A" }), page + 1, {
+          disabled: page >= totalPages,
+          ariaLabel: "Next page"
+        })
+      ]
+    }
+  ) });
+}
+export {
+  Pagination
+};

package/dist/widget/profile-card.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProfileCard({
+  name,
+  title,
+  image,
+  imageAlt = "User",
+  socials,
+  description,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `card ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "card-body text-center", children: [
+    image && /* @__PURE__ */ jsx("img", { src: image, alt: imageAlt, className: "img-fluid rounded-circle mb-3" }),
+    /* @__PURE__ */ jsx("h5", { className: "card-title", children: name }),
+    title && /* @__PURE__ */ jsx("p", { className: "text-muted", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "card-text small", children: description }),
+    socials && socials.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", children: socials.map((link, idx) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.url,
+        className: "btn btn-sm btn-outline-secondary me-1",
+        title: link.label,
+        children: /* @__PURE__ */ jsx("i", { className: `bi ${link.icon}` })
+      },
+      idx
+    )) }),
+    children
+  ] }) });
+}
+export {
+  ProfileCard
+};

package/dist/widget/progress-group.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProgressGroup({
+  label,
+  value,
+  color = "primary",
+  max = 100,
+  showPercentage = true
+}) {
+  const percentage = Math.round(value / max * 100);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between mb-1", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      showPercentage && /* @__PURE__ */ jsxs("span", { className: "text-muted", children: [
+        percentage,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "progress", children: /* @__PURE__ */ jsx("div", { className: `progress-bar bg-${color}`, style: { width: `${percentage}%` } }) })
+  ] });
+}
+export {
+  ProgressGroup
+};

package/dist/widget/progress.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+function Progress({
+  value = 0,
+  theme = "primary",
+  striped,
+  animated,
+  height,
+  showLabel
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "progress", style: height ? { height } : {}, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `progress-bar bg-${theme} ${striped ? "progress-bar-striped" : ""} ${animated ? "progress-bar-animated" : ""}`,
+      role: "progressbar",
+      style: { width: `${value}%` },
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: showLabel && `${value}%`
+    }
+  ) });
+}
+export {
+  Progress
+};

package/dist/widget/ratings.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+function Ratings({
+  value,
+  max = 5,
+  color = "warning",
+  readonly = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: `bi bi-star${i < value ? "-fill" : ""} text-${color}`,
+      style: { cursor: readonly ? "default" : "pointer" }
+    },
+    i
+  )) });
+}
+export {
+  Ratings
+};

package/dist/widget/small-box.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const DARK_LINK_THEMES = ["warning", "light"];
+function SmallBox({
+  title,
+  text,
+  icon,
+  theme = "primary",
+  url,
+  urlText = "More info"
+}) {
+  const linkColor = DARK_LINK_THEMES.includes(theme) ? "link-dark" : "link-light";
+  return /* @__PURE__ */ jsxs("div", { className: `small-box text-bg-${theme}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "inner", children: [
+      /* @__PURE__ */ jsx("h3", { children: title }),
+      text && /* @__PURE__ */ jsx("p", { children: text })
+    ] }),
+    icon,
+    url && /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: url,
+        className: `small-box-footer ${linkColor} link-underline-opacity-0 link-underline-opacity-50-hover`,
+        children: [
+          urlText,
+          " ",
+          /* @__PURE__ */ jsx("i", { className: "bi bi-link-45deg" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SmallBox
+};

package/dist/widget/sparkline-chart.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function SparklineChart({ id, data }) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    const el = containerRef.current;
+    if (!el) return;
+    const initChart = async () => {
+      const ApexCharts = (await import("apexcharts")).default;
+      if (cancelled || !containerRef.current) return;
+      const options = {
+        series: [{ data }],
+        chart: {
+          type: "area",
+          height: 50,
+          sparkline: { enabled: true }
+        },
+        stroke: { curve: "straight" },
+        fill: { opacity: 0.3 },
+        yaxis: { min: 0 },
+        colors: ["#DCE6EC"]
+      };
+      const chart = new ApexCharts(el, options);
+      chartRef.current = chart;
+      chart.render();
+    };
+    initChart().catch((err) => console.error("SparklineChart init error:", err));
+    return () => {
+      cancelled = true;
+      if (chartRef.current) {
+        chartRef.current.destroy();
+        chartRef.current = null;
+      }
+    };
+  }, [id, data]);
+  return /* @__PURE__ */ jsx("div", { id, ref: containerRef });
+}
+export {
+  SparklineChart
+};

package/dist/widget/spinner.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Spinner({
+  theme,
+  variant = "border",
+  small,
+  label = "Loading\u2026",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        `spinner-${variant}`,
+        small && `spinner-${variant}-sm`,
+        theme && `text-${theme}`,
+        className
+      ),
+      role: "status",
+      children: /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: label })
+    }
+  );
+}
+export {
+  Spinner
+};

package/dist/widget/stepper.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Stepper({ steps, active, orientation = "horizontal", onStepClick, className }) {
+  const vertical = orientation === "vertical";
+  const marker = (state, index, icon) => {
+    const bg = state === "complete" ? "text-bg-success" : state === "active" ? "text-bg-primary" : "text-bg-secondary";
+    const content = icon ? /* @__PURE__ */ jsx("i", { className: cn("bi", icon), "aria-hidden": "true" }) : state === "complete" ? /* @__PURE__ */ jsx("i", { className: "bi bi-check-lg", "aria-hidden": "true" }) : index + 1;
+    const cls = cn(
+      "d-inline-flex align-items-center justify-content-center rounded-circle flex-shrink-0 fw-semibold",
+      bg,
+      state === "upcoming" && "opacity-75"
+    );
+    const style = { width: 38, height: 38 };
+    return onStepClick ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(cls, "border-0"),
+        style,
+        onClick: () => onStepClick(index),
+        "aria-label": `Go to step ${index + 1}`,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: cls, style, children: content });
+  };
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn(
+        "list-unstyled d-flex mb-0",
+        vertical ? "flex-column gap-3" : "flex-row align-items-start",
+        className
+      ),
+      children: steps.map((step, idx) => {
+        const state = idx < active ? "complete" : idx === active ? "active" : "upcoming";
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn("d-flex", vertical ? "flex-row gap-3" : "flex-column align-items-center text-center flex-fill"),
+            "aria-current": state === "active" ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn("d-flex align-items-center", !vertical && "w-100 justify-content-center"), children: marker(state, idx, step.icon) }),
+              /* @__PURE__ */ jsxs("div", { className: cn(vertical ? "" : "mt-2"), children: [
+                /* @__PURE__ */ jsx("div", { className: cn("fw-semibold", state === "upcoming" && "text-secondary"), children: step.label }),
+                step.description && /* @__PURE__ */ jsx("div", { className: "small text-secondary", children: step.description })
+              ] })
+            ]
+          },
+          idx
+        );
+      })
+    }
+  );
+}
+export {
+  Stepper
+};

package/dist/widget/table.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Table({
+  columns,
+  data,
+  rowKey,
+  striped,
+  hover,
+  bordered,
+  borderless,
+  small,
+  responsive,
+  theme,
+  caption,
+  emptyMessage = "No data",
+  className
+}) {
+  const table = /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: cn(
+        "table",
+        striped && "table-striped",
+        hover && "table-hover",
+        bordered && "table-bordered",
+        borderless && "table-borderless",
+        small && "table-sm",
+        theme && `table-${theme}`,
+        className
+      ),
+      children: [
+        caption && /* @__PURE__ */ jsx("caption", { children: caption }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            className: cn(col.align && `text-${col.align}`, col.headerClassName),
+            children: col.header
+          },
+          col.key
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "text-center text-secondary py-3", children: emptyMessage }) }) : data.map((row, i) => /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: cn(col.align && `text-${col.align}`, col.className), children: col.render ? col.render(row, i) : String(row[col.key] ?? "") }, col.key)) }, rowKey ? rowKey(row, i) : i)) })
+      ]
+    }
+  );
+  return responsive ? /* @__PURE__ */ jsx("div", { className: "table-responsive", children: table }) : table;
+}
+export {
+  Table
+};

package/dist/widget/tabs.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function Tabs({
+  items,
+  defaultIndex = 0,
+  variant = "tabs",
+  fill,
+  justified,
+  className
+}) {
+  const [active, setActive] = useState(defaultIndex);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: `nav nav-${variant}${fill ? " nav-fill" : ""}${justified ? " nav-justified" : ""}`,
+        role: "tablist",
+        children: items.map((item, i) => /* @__PURE__ */ jsx("li", { className: "nav-item", role: "presentation", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `nav-link${i === active ? " active" : ""}`,
+            role: "tab",
+            "aria-selected": i === active,
+            onClick: () => setActive(i),
+            children: item.label
+          }
+        ) }, i))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "tab-content pt-3", children: items.map((item, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        className: `tab-pane fade${i === active ? " show active" : ""}`,
+        hidden: i !== active,
+        children: item.children
+      },
+      i
+    )) })
+  ] });
+}
+export {
+  Tabs
+};

package/dist/widget/timeline.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Timeline({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { className: `timeline ${className || ""}`, children: items.map((item, idx) => /* @__PURE__ */ jsxs("div", { className: "timeline-item", children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: `timeline-icon bg-${item.iconTheme || "primary"}`, children: /* @__PURE__ */ jsx("i", { className: `bi ${item.icon}` }) }),
+    /* @__PURE__ */ jsxs("div", { className: "timeline-content", children: [
+      /* @__PURE__ */ jsx("h3", { className: "timeline-header", children: item.title }),
+      item.body && /* @__PURE__ */ jsx("p", { children: item.body }),
+      item.footer && /* @__PURE__ */ jsx("div", { className: "timeline-footer", children: item.footer }),
+      /* @__PURE__ */ jsx("div", { className: "timeline-time", children: item.time })
+    ] })
+  ] }, idx)) });
+}
+export {
+  Timeline
+};

package/dist/widget/toast.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+function Toast({ show, onClose, title, theme, autohideMs = 4e3, children }) {
+  useEffect(() => {
+    if (!show || !autohideMs) return;
+    const t = setTimeout(onClose, autohideMs);
+    return () => clearTimeout(t);
+  }, [show, autohideMs, onClose]);
+  if (!show) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `toast show${theme ? ` text-bg-${theme} border-0` : ""}`,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      children: [
+        title && /* @__PURE__ */ jsxs("div", { className: "toast-header", children: [
+          /* @__PURE__ */ jsx("strong", { className: "me-auto", children: title }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: onClose })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "d-flex", children: [
+          /* @__PURE__ */ jsx("div", { className: "toast-body", children }),
+          !title && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `btn-close me-2 m-auto${theme ? " btn-close-white" : ""}`,
+              "aria-label": "Close",
+              onClick: onClose
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Toast
+};

package/dist/widget/tooltip.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const POS = {
+  top: { cls: "bs-tooltip-top", style: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: 6 } },
+  bottom: { cls: "bs-tooltip-bottom", style: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: 6 } },
+  left: { cls: "bs-tooltip-start", style: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: 6 } },
+  right: { cls: "bs-tooltip-end", style: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: 6 } }
+};
+function Tooltip({ title, placement = "top", children }) {
+  const [show, setShow] = useState(false);
+  const { cls, style } = POS[placement];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: { position: "relative", display: "inline-block" },
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(false),
+      onFocus: () => setShow(true),
+      onBlur: () => setShow(false),
+      children: [
+        children,
+        show && /* @__PURE__ */ jsx("span", { className: `tooltip ${cls} show`, role: "tooltip", style: { position: "absolute", zIndex: 1080, ...style }, children: /* @__PURE__ */ jsx("span", { className: "tooltip-inner", children: title }) })
+      ]
+    }
+  );
+}
+export {
+  Tooltip
+};

package/dist/widget/world-map.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function WorldMap({ id, height = 220 }) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    const el = containerRef.current;
+    if (!el) return;
+    const initMap = async () => {
+      try {
+        const mod = await import("jsvectormap");
+        await import("jsvectormap/dist/maps/world.js");
+        if (cancelled || !containerRef.current) return;
+        const JsVectorMap = mod.default ?? mod.jsVectorMap ?? mod;
+        if (typeof JsVectorMap !== "function") return;
+        mapRef.current = new JsVectorMap({
+          selector: el,
+          map: "world"
+        });
+      } catch (error) {
+        console.error("WorldMap init error:", error);
+      }
+    };
+    initMap();
+    return () => {
+      cancelled = true;
+      if (mapRef.current) {
+        if (typeof mapRef.current.destroy === "function") {
+          mapRef.current.destroy();
+        }
+        mapRef.current = null;
+        if (containerRef.current) containerRef.current.innerHTML = "";
+      }
+    };
+  }, [id]);
+  return /* @__PURE__ */ jsx("div", { id, ref: containerRef, style: { height: `${height}px` } });
+}
+export {
+  WorldMap
+};