@adminlte/react 0.1.0

package/dist/widget/carousel.js

@@ -0,0 +1,56 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Carousel({
+  id,
+  slides,
+  controls = true,
+  indicators = true,
+  ride,
+  fade,
+  interval,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: cn("carousel slide", fade && "carousel-fade", className),
+      "data-bs-ride": ride === true ? "true" : ride || void 0,
+      "data-bs-interval": interval,
+      children: [
+        indicators && /* @__PURE__ */ jsx("div", { className: "carousel-indicators", children: slides.map((_, idx) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-bs-target": `#${id}`,
+            "data-bs-slide-to": idx,
+            className: idx === 0 ? "active" : void 0,
+            "aria-current": idx === 0 ? "true" : void 0,
+            "aria-label": `Slide ${idx + 1}`
+          },
+          idx
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "carousel-inner", children: slides.map((slide, idx) => /* @__PURE__ */ jsxs("div", { className: cn("carousel-item", idx === 0 && "active"), children: [
+          slide.content ?? /* @__PURE__ */ jsx("img", { src: slide.src, alt: slide.alt ?? "", className: "d-block w-100" }),
+          slide.caption && /* @__PURE__ */ jsxs("div", { className: "carousel-caption d-none d-md-block", children: [
+            slide.caption.title && /* @__PURE__ */ jsx("h5", { children: slide.caption.title }),
+            slide.caption.text && /* @__PURE__ */ jsx("p", { children: slide.caption.text })
+          ] })
+        ] }, idx)) }),
+        controls && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("button", { className: "carousel-control-prev", type: "button", "data-bs-target": `#${id}`, "data-bs-slide": "prev", children: [
+            /* @__PURE__ */ jsx("span", { className: "carousel-control-prev-icon", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Previous" })
+          ] }),
+          /* @__PURE__ */ jsxs("button", { className: "carousel-control-next", type: "button", "data-bs-target": `#${id}`, "data-bs-slide": "next", children: [
+            /* @__PURE__ */ jsx("span", { className: "carousel-control-next-icon", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Next" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Carousel
+};

package/dist/widget/command-palette.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useCommandPalette } from "../context/command-palette-context.js";
+const overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 1080,
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "center",
+  paddingTop: "12vh",
+  background: "rgba(0, 0, 0, 0.5)"
+};
+const panelStyle = {
+  width: "min(640px, 92vw)",
+  maxHeight: "70vh",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column"
+};
+const listStyle = {
+  overflowY: "auto"
+};
+function CommandPalette({ items, placeholder = "Search pages\u2026" }) {
+  const ctx = useCommandPalette();
+  const router = useRouter();
+  const inputRef = useRef(null);
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const isOpen = ctx?.isOpen ?? false;
+  const results = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(
+      (i) => i.label.toLowerCase().includes(q) || (i.section?.toLowerCase().includes(q) ?? false)
+    );
+  }, [query, items]);
+  useEffect(() => {
+    if (!isOpen) return;
+    setQuery("");
+    setActive(0);
+    const t = setTimeout(() => inputRef.current?.focus(), 20);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  useEffect(() => {
+    setActive(0);
+  }, [query]);
+  if (!isOpen || !ctx) return null;
+  const go = (item) => {
+    const target = item ?? results[active];
+    if (!target) return;
+    ctx.close();
+    router.push(target.href);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => Math.min(a + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => Math.max(a - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      go();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      ctx.close();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: overlayStyle,
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) ctx.close();
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "card shadow-lg", style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": "Command palette", children: [
+        /* @__PURE__ */ jsxs("div", { className: "input-group input-group-lg border-bottom", children: [
+          /* @__PURE__ */ jsx("span", { className: "input-group-text bg-body border-0", children: /* @__PURE__ */ jsx("i", { className: "bi bi-search" }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onKeyDown,
+              className: "form-control border-0 shadow-none",
+              placeholder,
+              "aria-label": "Search"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "list-group list-group-flush", style: listStyle, children: [
+          results.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-secondary text-center py-4 small", children: [
+            "No results for \u201C",
+            query,
+            "\u201D"
+          ] }),
+          results.map((item, idx) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `list-group-item list-group-item-action d-flex align-items-center gap-2 ${idx === active ? "active" : ""}`,
+              onMouseEnter: () => setActive(idx),
+              onClick: () => go(item),
+              children: [
+                /* @__PURE__ */ jsx("i", { className: `bi ${item.icon || "bi-arrow-return-right"}` }),
+                /* @__PURE__ */ jsx("span", { className: "flex-grow-1 text-start", children: item.label }),
+                item.section && /* @__PURE__ */ jsx("span", { className: `badge fw-normal ${idx === active ? "text-bg-light" : "text-bg-secondary"}`, children: item.section })
+              ]
+            },
+            item.href
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "card-footer d-flex justify-content-between align-items-center text-secondary small py-2", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("kbd", { children: "\u2191" }),
+            " ",
+            /* @__PURE__ */ jsx("kbd", { children: "\u2193" }),
+            " navigate"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("kbd", { children: "\u21B5" }),
+            " open \xB7 ",
+            /* @__PURE__ */ jsx("kbd", { children: "esc" }),
+            " close"
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  CommandPalette
+};

package/dist/widget/description-block.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function DescriptionBlock({
+  title,
+  text,
+  items,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `description-block ${className || ""}`, children: [
+    /* @__PURE__ */ jsx("h5", { className: "description-header", children: title }),
+    text && /* @__PURE__ */ jsx("p", { className: "description-text", children: text }),
+    items && Object.entries(items).length > 0 && /* @__PURE__ */ jsx("dl", { className: "dl-horizontal", children: Object.entries(items).map(([label, value]) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { children: label }),
+      /* @__PURE__ */ jsx("dd", { children: value })
+    ] }, label)) })
+  ] });
+}
+export {
+  DescriptionBlock
+};

package/dist/widget/direct-chat.js

@@ -0,0 +1,96 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function DirectChat({
+  badge = 0,
+  contacts = [],
+  messages = [],
+  collapsible = true,
+  removable = true,
+  onRemove,
+  className
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isContactsOpen, setIsContactsOpen] = useState(false);
+  const [isRemoved, setIsRemoved] = useState(false);
+  if (isRemoved) return null;
+  const handleCollapse = () => setIsCollapsed(!isCollapsed);
+  const handleToggleContacts = () => setIsContactsOpen(!isContactsOpen);
+  const handleRemove = () => {
+    setIsRemoved(true);
+    onRemove?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `card direct-chat direct-chat-primary mb-4 ${isContactsOpen ? "direct-chat-contacts-open" : ""} ${className || ""}`.trim(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "card-header", children: [
+      /* @__PURE__ */ jsx("h3", { className: "card-title", children: "Direct Chat" }),
+      /* @__PURE__ */ jsxs("div", { className: "card-tools", children: [
+        badge > 0 && /* @__PURE__ */ jsx("span", { title: `${badge} New Messages`, className: "badge text-bg-primary", children: badge }),
+        collapsible && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "btn btn-tool",
+            onClick: handleCollapse,
+            title: isCollapsed ? "Expand" : "Collapse",
+            children: [
+              /* @__PURE__ */ jsx("i", { "data-lte-icon": "expand", className: `bi ${isCollapsed ? "bi-plus-lg" : "bi-dash-lg"}` }),
+              /* @__PURE__ */ jsx("i", { "data-lte-icon": "collapse", className: `bi ${isCollapsed ? "d-none bi-plus-lg" : "d-none bi-dash-lg"}` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "btn btn-tool",
+            title: "Contacts",
+            "data-lte-toggle": "chat-pane",
+            onClick: handleToggleContacts,
+            children: /* @__PURE__ */ jsx("i", { className: "bi bi-chat-text-fill" })
+          }
+        ),
+        removable && /* @__PURE__ */ jsx("button", { type: "button", className: "btn btn-tool", onClick: handleRemove, title: "Remove", children: /* @__PURE__ */ jsx("i", { className: "bi bi-x-lg" }) })
+      ] })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "card-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "direct-chat-messages", children: messages.map((msg, idx) => /* @__PURE__ */ jsxs("div", { className: `direct-chat-msg ${msg.isOwn ? "end" : ""}`, children: [
+          /* @__PURE__ */ jsx("div", { className: "direct-chat-infos clearfix", children: msg.isOwn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "direct-chat-name float-end", children: msg.from }),
+            /* @__PURE__ */ jsx("span", { className: "direct-chat-timestamp float-start", children: msg.timestamp })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "direct-chat-name float-start", children: msg.from }),
+            /* @__PURE__ */ jsx("span", { className: "direct-chat-timestamp float-end", children: msg.timestamp })
+          ] }) }),
+          /* @__PURE__ */ jsx("img", { className: "direct-chat-img", src: msg.image, alt: msg.from }),
+          /* @__PURE__ */ jsx("div", { className: "direct-chat-text", children: msg.text })
+        ] }, idx)) }),
+        contacts.length > 0 && /* @__PURE__ */ jsx("div", { className: "direct-chat-contacts", children: /* @__PURE__ */ jsx("ul", { className: "contacts-list", children: contacts.map((contact, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", { href: "#", children: [
+          /* @__PURE__ */ jsx("img", { className: "contacts-list-img", src: contact.image, alt: contact.name }),
+          /* @__PURE__ */ jsxs("div", { className: "contacts-list-info", children: [
+            /* @__PURE__ */ jsxs("span", { className: "contacts-list-name", children: [
+              contact.name,
+              /* @__PURE__ */ jsx("small", { className: "contacts-list-date float-end", children: contact.date })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "contacts-list-msg", children: contact.preview })
+          ] })
+        ] }) }, idx)) }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "card-footer", children: /* @__PURE__ */ jsx("form", { action: "#", method: "post", children: /* @__PURE__ */ jsxs("div", { className: "input-group", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            name: "message",
+            placeholder: "Type Message ...",
+            className: "form-control"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "input-group-append", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn btn-primary", children: "Send" }) })
+      ] }) }) })
+    ] })
+  ] });
+}
+export {
+  DirectChat
+};

package/dist/widget/dropdown.js

@@ -0,0 +1,63 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Dropdown({
+  label,
+  items,
+  theme = "primary",
+  size,
+  variant = "solid",
+  align = "start",
+  direction = "down",
+  split,
+  className
+}) {
+  const btnTheme = variant === "outline" ? `btn-outline-${theme}` : `btn-${theme}`;
+  const btnSize = size ? `btn-${size}` : "";
+  const dirClass = direction === "down" ? "dropdown" : `drop${direction}`;
+  const menu = /* @__PURE__ */ jsx("ul", { className: cn("dropdown-menu", align === "end" && "dropdown-menu-end"), children: items.map((item, idx) => {
+    if (item.divider) {
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("hr", { className: "dropdown-divider" }) }, idx);
+    }
+    if (item.header) {
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("h6", { className: "dropdown-header", children: item.label }) }, idx);
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon && /* @__PURE__ */ jsx("i", { className: cn("bi", item.icon, "me-2"), "aria-hidden": "true" }),
+      item.label
+    ] });
+    const itemClass = cn("dropdown-item", item.active && "active", item.disabled && "disabled");
+    return /* @__PURE__ */ jsx("li", { children: item.href ? /* @__PURE__ */ jsx("a", { className: itemClass, href: item.href, "aria-disabled": item.disabled, children: content }) : /* @__PURE__ */ jsx("button", { type: "button", className: itemClass, onClick: item.onClick, disabled: item.disabled, children: content }) }, idx);
+  }) });
+  if (split) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("btn-group", dirClass !== "dropdown" && dirClass, className), children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: cn("btn", btnTheme, btnSize), children: label }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("btn", btnTheme, btnSize, "dropdown-toggle dropdown-toggle-split"),
+          "data-bs-toggle": "dropdown",
+          "aria-expanded": "false",
+          children: /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Toggle dropdown" })
+        }
+      ),
+      menu
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(dirClass, className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn("btn", btnTheme, btnSize, "dropdown-toggle"),
+        "data-bs-toggle": "dropdown",
+        "aria-expanded": "false",
+        children: label
+      }
+    ),
+    menu
+  ] });
+}
+export {
+  Dropdown
+};

package/dist/widget/info-box.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function InfoBox({
+  title,
+  text,
+  icon,
+  theme = "info",
+  progress,
+  progressText
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "info-box", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: `info-box-icon text-bg-${theme}`, children: /* @__PURE__ */ jsx("i", { className: `bi ${icon}` }) }),
+    /* @__PURE__ */ jsxs("div", { className: "info-box-content", children: [
+      text && /* @__PURE__ */ jsx("span", { className: "info-box-text", children: text }),
+      title && /* @__PURE__ */ jsx("span", { className: "info-box-number", children: title }),
+      progress !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "progress", children: /* @__PURE__ */ jsx("div", { className: `progress-bar bg-${theme}`, style: { width: `${progress}%` } }) }),
+        progressText && /* @__PURE__ */ jsx("span", { className: "progress-description", children: progressText })
+      ] })
+    ] })
+  ] });
+}
+export {
+  InfoBox
+};

package/dist/widget/list-group.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function ListGroup({ flush, horizontal, className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "list-group",
+        flush && "list-group-flush",
+        horizontal && "list-group-horizontal",
+        className
+      ),
+      children
+    }
+  );
+}
+function ListGroupItem({
+  active,
+  disabled,
+  action,
+  theme,
+  href,
+  onClick,
+  className,
+  children
+}) {
+  const isAction = action || !!href || !!onClick;
+  const classes = cn(
+    "list-group-item",
+    isAction && "list-group-item-action",
+    active && "active",
+    disabled && "disabled",
+    theme && `list-group-item-${theme}`,
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, className: classes, "aria-current": active ? "true" : void 0, "aria-disabled": disabled, children });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", className: classes, onClick, disabled, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes, "aria-current": active ? "true" : void 0, children });
+}
+export {
+  ListGroup,
+  ListGroupItem
+};

package/dist/widget/nav-messages.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavMessages({
+  messages,
+  badgeColor = "danger",
+  count,
+  seeAllUrl = "#",
+  seeAllText = "See All Messages"
+}) {
+  const badgeCount = count ?? messages.length;
+  return /* @__PURE__ */ jsxs("li", { className: "nav-item dropdown", children: [
+    /* @__PURE__ */ jsxs("a", { className: "nav-link", "data-bs-toggle": "dropdown", href: "#", children: [
+      /* @__PURE__ */ jsx("i", { className: "bi bi-chat-text" }),
+      messages.length > 0 && /* @__PURE__ */ jsx("span", { className: `navbar-badge badge text-bg-${badgeColor}`, children: badgeCount })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "dropdown-menu dropdown-menu-lg dropdown-menu-end", children: [
+      messages.map((msg, idx) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("a", { href: msg.url || "#", className: "dropdown-item", children: /* @__PURE__ */ jsxs("div", { className: "d-flex", children: [
+          msg.image && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: msg.image,
+              alt: msg.from,
+              className: "img-size-50 rounded-circle me-3"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-grow-1", children: [
+            /* @__PURE__ */ jsxs("h3", { className: "dropdown-item-title", children: [
+              msg.from,
+              msg.star && /* @__PURE__ */ jsx("span", { className: `float-end fs-7 text-${msg.star}`, children: /* @__PURE__ */ jsx("i", { className: "bi bi-star-fill" }) })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "fs-7", children: msg.text }),
+            msg.time && /* @__PURE__ */ jsxs("p", { className: "fs-7 text-secondary", children: [
+              /* @__PURE__ */ jsx("i", { className: "bi bi-clock-fill me-1" }),
+              " ",
+              msg.time
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "dropdown-divider" })
+      ] }, idx)),
+      /* @__PURE__ */ jsx("a", { href: seeAllUrl, className: "dropdown-item dropdown-footer", children: seeAllText })
+    ] })
+  ] });
+}
+export {
+  NavMessages
+};

package/dist/widget/nav-notifications.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavNotifications({
+  notifications,
+  badgeColor = "danger",
+  count,
+  seeAllUrl,
+  seeAllText = "See All Notifications"
+}) {
+  const badgeCount = count ?? notifications.length;
+  return /* @__PURE__ */ jsxs("li", { className: "nav-item dropdown", children: [
+    /* @__PURE__ */ jsxs("a", { className: "nav-link", href: "#", "data-bs-toggle": "dropdown", children: [
+      /* @__PURE__ */ jsx("i", { className: "bi bi-bell-fill" }),
+      notifications.length > 0 && /* @__PURE__ */ jsx("span", { className: `navbar-badge badge text-bg-${badgeColor}`, children: badgeCount })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "dropdown-menu dropdown-menu-lg dropdown-menu-end", children: [
+      /* @__PURE__ */ jsxs("span", { className: "dropdown-item dropdown-header", children: [
+        badgeCount,
+        " Notifications"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "dropdown-divider" }),
+      notifications.map((notif, idx) => /* @__PURE__ */ jsxs("div", { children: [
+        notif.url ? /* @__PURE__ */ jsxs("a", { href: notif.url, className: "dropdown-item", children: [
+          notif.icon && /* @__PURE__ */ jsx("i", { className: `bi ${notif.icon} me-2` }),
+          /* @__PURE__ */ jsx("span", { children: notif.text }),
+          notif.time && /* @__PURE__ */ jsx("span", { className: "float-end text-secondary fs-7", children: notif.time })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "dropdown-item", children: [
+          notif.icon && /* @__PURE__ */ jsx("i", { className: `bi ${notif.icon} me-2` }),
+          /* @__PURE__ */ jsx("span", { children: notif.text }),
+          notif.time && /* @__PURE__ */ jsx("span", { className: "float-end text-secondary fs-7", children: notif.time })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "dropdown-divider" })
+      ] }, idx)),
+      seeAllUrl && /* @__PURE__ */ jsx("a", { href: seeAllUrl, className: "dropdown-item dropdown-footer", children: seeAllText })
+    ] })
+  ] });
+}
+export {
+  NavNotifications
+};

package/dist/widget/nav-tasks.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavTasks({
+  tasks,
+  badgeColor = "warning",
+  seeAllUrl,
+  seeAllText = "See All Tasks"
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "nav-item dropdown", children: [
+    /* @__PURE__ */ jsxs("a", { className: "nav-link", href: "#", "data-bs-toggle": "dropdown", children: [
+      /* @__PURE__ */ jsx("i", { className: "bi bi-flag-fill" }),
+      tasks.length > 0 && /* @__PURE__ */ jsx("span", { className: `navbar-badge badge text-bg-${badgeColor}`, children: tasks.length })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "dropdown-menu dropdown-menu-lg dropdown-menu-end", children: [
+      /* @__PURE__ */ jsxs("span", { className: "dropdown-item dropdown-header", children: [
+        tasks.length,
+        " Tasks"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "dropdown-divider" }),
+      tasks.map((task, idx) => /* @__PURE__ */ jsxs("div", { children: [
+        task.url ? /* @__PURE__ */ jsxs("a", { href: task.url, className: "dropdown-item", children: [
+          /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-grow-1", children: task.text }),
+            /* @__PURE__ */ jsxs("span", { className: "fs-7", children: [
+              task.progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "progress", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `progress-bar bg-${task.color || "primary"}`,
+              style: { width: `${task.progress}%` }
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "dropdown-item", children: [
+          /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-grow-1", children: task.text }),
+            /* @__PURE__ */ jsxs("span", { className: "fs-7", children: [
+              task.progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "progress", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `progress-bar bg-${task.color || "primary"}`,
+              style: { width: `${task.progress}%` }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "dropdown-divider" })
+      ] }, idx)),
+      seeAllUrl && /* @__PURE__ */ jsx("a", { href: seeAllUrl, className: "dropdown-item dropdown-footer", children: seeAllText })
+    ] })
+  ] });
+}
+export {
+  NavTasks
+};

package/dist/widget/offcanvas.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/class-name.js";
+function Offcanvas({
+  id,
+  title,
+  placement = "start",
+  scroll,
+  backdrop = true,
+  footer,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(`offcanvas offcanvas-${placement}`, className),
+      tabIndex: -1,
+      id,
+      "aria-labelledby": `${id}-label`,
+      "data-bs-scroll": scroll ? "true" : void 0,
+      "data-bs-backdrop": backdrop ? void 0 : "false",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "offcanvas-header", children: [
+          title && /* @__PURE__ */ jsx("h5", { className: "offcanvas-title", id: `${id}-label`, children: title }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "offcanvas", "aria-label": "Close" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "offcanvas-body", children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "offcanvas-header border-top", children: footer })
+      ]
+    }
+  );
+}
+function OffcanvasTrigger({
+  target,
+  theme = "primary",
+  variant = "solid",
+  size,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "btn",
+        variant === "outline" ? `btn-outline-${theme}` : `btn-${theme}`,
+        size && `btn-${size}`,
+        className
+      ),
+      "data-bs-toggle": "offcanvas",
+      "data-bs-target": `#${target}`,
+      "aria-controls": target,
+      children
+    }
+  );
+}
+export {
+  Offcanvas,
+  OffcanvasTrigger
+};