@mdxui/tremor 6.0.0

package/dist/dashboard/index.js

@@ -0,0 +1,1062 @@
+// src/dashboard/components/shell/shell.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Shell({
+  variant = "sidebar-left",
+  children,
+  navigation: _navigation = [],
+  shortcuts: _shortcuts = [],
+  workspace: _workspace,
+  workspaces: _workspaces = [],
+  user: _user,
+  sidebarCollapsed = false,
+  onSidebarCollapse: _onSidebarCollapse,
+  pathname: _pathname,
+  LinkComponent: _LinkComponent,
+  sidebar,
+  header,
+  theme: _theme = "system",
+  loading = false,
+  className,
+  containerClassName
+}) {
+  const showSidebar = variant === "sidebar-left" || variant === "sidebar-right";
+  const sidebarWidth = sidebarCollapsed ? "lg:pl-16" : "lg:pl-72";
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-indigo-600" }) });
+  }
+  if (variant === "top-nav") {
+    return /* @__PURE__ */ jsxs("div", { className: twMerge("mx-auto max-w-screen-2xl", containerClassName), children: [
+      header,
+      /* @__PURE__ */ jsx("main", { role: "main", className: twMerge("flex-1", className), children })
+    ] });
+  }
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsx("div", { className: twMerge("mx-auto max-w-screen-2xl", containerClassName), children: /* @__PURE__ */ jsx("main", { role: "main", className: twMerge("flex-1", className), children }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("mx-auto max-w-screen-2xl", containerClassName), children: [
+    sidebar,
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        role: "main",
+        className: twMerge(showSidebar && sidebarWidth, className),
+        children
+      }
+    )
+  ] });
+}
+
+// src/dashboard/components/shell/shell-sidebar-left.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ShellSidebarLeft({
+  sidebar,
+  mobileHeader,
+  children,
+  navigation: _navigation = [],
+  shortcuts: _shortcuts = [],
+  workspace: _workspace,
+  workspaces: _workspaces = [],
+  user: _user,
+  collapsed = false,
+  onCollapse: _onCollapse,
+  pathname: _pathname,
+  LinkComponent: _LinkComponent,
+  className,
+  containerClassName
+}) {
+  const sidebarWidth = collapsed ? "lg:pl-16" : "lg:pl-72";
+  return /* @__PURE__ */ jsxs2("div", { className: twMerge2("mx-auto max-w-screen-2xl", containerClassName), children: [
+    sidebar && /* @__PURE__ */ jsx2(
+      "nav",
+      {
+        className: twMerge2(
+          "hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col",
+          collapsed ? "lg:w-16" : "lg:w-72"
+        ),
+        children: sidebar
+      }
+    ),
+    mobileHeader && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-testid": "mobile-header",
+        className: "sticky top-0 z-40 flex h-16 shrink-0 items-center justify-between border-b border-gray-200 bg-white px-2 shadow-sm sm:gap-x-6 sm:px-4 lg:hidden dark:border-gray-800 dark:bg-gray-950",
+        children: mobileHeader
+      }
+    ),
+    /* @__PURE__ */ jsx2("main", { role: "main", className: twMerge2(sidebarWidth, className), children })
+  ] });
+}
+
+// src/dashboard/components/shell/shell-top-nav.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ShellTopNav({
+  header,
+  sidebar,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex min-h-screen flex-col", children: [
+    header,
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-1", children: [
+      sidebar && /* @__PURE__ */ jsx3("aside", { className: "flex-shrink-0", children: sidebar }),
+      /* @__PURE__ */ jsx3("main", { role: "main", className: twMerge3("flex-1", className), children })
+    ] })
+  ] });
+}
+
+// src/dashboard/components/sidebar/mobile-sidebar.tsx
+import { useState } from "react";
+
+// src/dashboard/utils.ts
+import { twMerge as twMerge4 } from "tailwind-merge";
+function cx(...args) {
+  return twMerge4(...args);
+}
+var focusInput = [
+  // base
+  "focus:ring-2",
+  // ring color
+  "focus:ring-indigo-200 focus:dark:ring-indigo-700/30",
+  // border color
+  "focus:border-indigo-500 focus:dark:border-indigo-700"
+].join(" ");
+var focusRing = [
+  // base
+  "outline outline-offset-2 outline-0 focus-visible:outline-2",
+  // outline color
+  "outline-indigo-500 dark:outline-indigo-500"
+].join(" ");
+var hasErrorInput = [
+  // base
+  "ring-2",
+  // border color
+  "border-red-500 dark:border-red-700",
+  // ring color
+  "ring-red-200 dark:ring-red-700/30"
+].join(" ");
+
+// src/dashboard/components/sidebar/mobile-sidebar.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DefaultLink({ href, className, children, onClick }) {
+  return /* @__PURE__ */ jsx4("a", { href, className, onClick, children });
+}
+function isItemActive(itemHref, pathname, settingsPath = "/settings") {
+  if (!itemHref || !pathname) return false;
+  if (itemHref === settingsPath) {
+    return pathname.startsWith("/settings");
+  }
+  return pathname === itemHref || pathname.startsWith(itemHref);
+}
+function MobileSidebar({
+  items = [],
+  shortcuts = [],
+  title = "Navigation",
+  pathname,
+  LinkComponent = DefaultLink,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleDrawer = () => setIsOpen(!isOpen);
+  const closeDrawer = () => setIsOpen(false);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: toggleDrawer,
+        "aria-label": "open sidebar",
+        className: cx(
+          "group flex items-center rounded-md p-2 text-sm font-medium hover:bg-gray-100 data-[state=open]:bg-gray-100 data-[state=open]:bg-gray-400/10 hover:dark:bg-gray-400/10",
+          className
+        ),
+        "data-state": isOpen ? "open" : "closed",
+        children: /* @__PURE__ */ jsxs4(
+          "svg",
+          {
+            className: "size-6 shrink-0 sm:size-5",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx4("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+              /* @__PURE__ */ jsx4("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+              /* @__PURE__ */ jsx4("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/50",
+        onClick: closeDrawer,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cx(
+          "fixed inset-y-0 right-0 z-50 w-full max-w-sm transform bg-white transition-transform duration-300 ease-in-out dark:bg-gray-950",
+          isOpen ? "translate-x-0" : "translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between border-b border-gray-200 p-4 dark:border-gray-800", children: [
+            /* @__PURE__ */ jsx4("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: title }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                onClick: closeDrawer,
+                "aria-label": "close sidebar",
+                className: "rounded-md p-2 hover:bg-gray-100 hover:dark:bg-gray-800",
+                children: /* @__PURE__ */ jsxs4(
+                  "svg",
+                  {
+                    className: "size-5",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
+                      /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "p-4", children: /* @__PURE__ */ jsxs4(
+            "nav",
+            {
+              "aria-label": "core mobile navigation links",
+              className: "flex flex-1 flex-col space-y-10",
+              children: [
+                /* @__PURE__ */ jsx4("ul", { role: "list", className: "space-y-1.5", children: items.map((item) => {
+                  const isActive = item.active ?? isItemActive(item.href, pathname);
+                  const Icon = item.icon;
+                  return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs4(
+                    LinkComponent,
+                    {
+                      href: item.href || "#",
+                      className: cx(
+                        isActive ? "text-indigo-600 dark:text-indigo-400" : "text-gray-600 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50",
+                        "flex items-center gap-x-2.5 rounded-md px-2 py-1.5 text-base font-medium transition hover:bg-gray-100 sm:text-sm hover:dark:bg-gray-900",
+                        focusRing
+                      ),
+                      onClick: closeDrawer,
+                      children: [
+                        Icon && /* @__PURE__ */ jsx4(Icon, { className: "size-5 shrink-0", "aria-hidden": "true" }),
+                        item.label
+                      ]
+                    }
+                  ) }, item.id);
+                }) }),
+                shortcuts.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium leading-6 text-gray-500 sm:text-xs", children: "Shortcuts" }),
+                  /* @__PURE__ */ jsx4("ul", { "aria-label": "shortcuts", role: "list", className: "space-y-0.5", children: shortcuts.map((shortcut) => {
+                    const isActive = isItemActive(shortcut.href, pathname);
+                    const Icon = shortcut.icon;
+                    return /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs4(
+                      LinkComponent,
+                      {
+                        href: shortcut.href,
+                        className: cx(
+                          isActive ? "text-indigo-600 dark:text-indigo-400" : "text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50",
+                          "flex items-center gap-x-2.5 rounded-md px-2 py-1.5 font-medium transition hover:bg-gray-100 sm:text-sm hover:dark:bg-gray-900",
+                          focusRing
+                        ),
+                        onClick: closeDrawer,
+                        children: [
+                          Icon && /* @__PURE__ */ jsx4(
+                            Icon,
+                            {
+                              className: "size-4 shrink-0",
+                              "aria-hidden": "true"
+                            }
+                          ),
+                          shortcut.name
+                        ]
+                      }
+                    ) }, shortcut.name);
+                  }) })
+                ] })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/dashboard/components/sidebar/sidebar.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function DefaultLink2({
+  href,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx5("a", { href, className, children });
+}
+function isItemActive2(itemHref, pathname, settingsPath = "/settings") {
+  if (!itemHref || !pathname) return false;
+  if (itemHref === settingsPath) {
+    return pathname.startsWith("/settings");
+  }
+  return pathname === itemHref || pathname.startsWith(itemHref);
+}
+function Sidebar({
+  items = [],
+  shortcuts = [],
+  workspace,
+  workspaces = [],
+  user,
+  collapsed = false,
+  onCollapse: _onCollapse,
+  header,
+  footer,
+  className,
+  pathname,
+  LinkComponent = DefaultLink2
+}) {
+  return /* @__PURE__ */ jsx5(
+    "nav",
+    {
+      "data-testid": "sidebar",
+      className: cx(
+        "hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col",
+        collapsed ? "lg:w-16" : "lg:w-72",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs5("aside", { className: "flex grow flex-col gap-y-6 overflow-y-auto border-r border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-950", children: [
+        workspace && /* @__PURE__ */ jsx5(
+          WorkspaceSwitcher,
+          {
+            workspace,
+            workspaces,
+            collapsed
+          }
+        ),
+        header,
+        /* @__PURE__ */ jsxs5(
+          "nav",
+          {
+            "aria-label": "core navigation links",
+            className: "flex flex-1 flex-col space-y-10",
+            children: [
+              /* @__PURE__ */ jsx5("ul", { role: "list", className: "space-y-0.5", children: items.map((item) => {
+                const isActive = item.active ?? isItemActive2(item.href, pathname);
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+                  LinkComponent,
+                  {
+                    href: item.href || "#",
+                    className: cx(
+                      isActive ? "text-indigo-600 dark:text-indigo-400" : "text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50",
+                      "flex items-center gap-x-2.5 rounded-md px-2 py-1.5 text-sm font-medium transition hover:bg-gray-100 hover:dark:bg-gray-900",
+                      focusRing
+                    ),
+                    "data-testid": "nav-item",
+                    "data-active": isActive,
+                    children: [
+                      Icon && /* @__PURE__ */ jsx5(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                      !collapsed && item.label
+                    ]
+                  }
+                ) }, item.id);
+              }) }),
+              shortcuts.length > 0 && !collapsed && /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium leading-6 text-gray-500", children: "Shortcuts" }),
+                /* @__PURE__ */ jsx5("ul", { "aria-label": "shortcuts", role: "list", className: "space-y-0.5", children: shortcuts.map((shortcut) => {
+                  const isActive = isItemActive2(shortcut.href, pathname);
+                  const Icon = shortcut.icon;
+                  return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+                    LinkComponent,
+                    {
+                      href: shortcut.href,
+                      className: cx(
+                        isActive ? "text-indigo-600 dark:text-indigo-400" : "text-gray-700 hover:text-gray-900 dark:text-gray-400 hover:dark:text-gray-50",
+                        "flex items-center gap-x-2.5 rounded-md px-2 py-1.5 text-sm font-medium transition hover:bg-gray-100 hover:dark:bg-gray-900",
+                        focusRing
+                      ),
+                      children: [
+                        Icon && /* @__PURE__ */ jsx5(
+                          Icon,
+                          {
+                            className: "size-4 shrink-0",
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        shortcut.name
+                      ]
+                    }
+                  ) }, shortcut.name);
+                }) })
+              ] })
+            ]
+          }
+        ),
+        user && !footer && /* @__PURE__ */ jsx5("div", { className: "mt-auto", children: /* @__PURE__ */ jsx5(UserProfile, { user, collapsed }) }),
+        footer && /* @__PURE__ */ jsx5("div", { className: "mt-auto", children: footer })
+      ] })
+    }
+  );
+}
+function WorkspaceSwitcher({
+  workspace,
+  workspaces: _workspaces = [],
+  collapsed
+}) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx5("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: cx(
+          workspace.color || "bg-indigo-600 dark:bg-indigo-500",
+          "flex aspect-square size-8 items-center justify-center rounded p-2 text-xs font-medium text-white"
+        ),
+        "aria-hidden": "true",
+        children: workspace.initials
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      className: cx(
+        "flex w-full items-center gap-x-2.5 rounded-md border border-gray-300 bg-white p-2 text-sm shadow-sm transition-all hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-950 hover:dark:bg-gray-900",
+        "focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 focus:dark:ring-indigo-700/30 focus:dark:border-indigo-700"
+      ),
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: cx(
+              workspace.color || "bg-indigo-600 dark:bg-indigo-500",
+              "flex aspect-square size-8 items-center justify-center rounded p-2 text-xs font-medium text-white"
+            ),
+            "aria-hidden": "true",
+            children: workspace.initials
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "flex w-full items-center justify-between gap-x-4 truncate", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "truncate", children: [
+            /* @__PURE__ */ jsx5("p", { className: "truncate whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50", children: workspace.name }),
+            /* @__PURE__ */ jsx5("p", { className: "whitespace-nowrap text-left text-xs text-gray-700 dark:text-gray-300", children: workspace.role })
+          ] }),
+          /* @__PURE__ */ jsxs5(
+            "svg",
+            {
+              className: "size-5 shrink-0 text-gray-500",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx5("path", { d: "m7 15 5 5 5-5" }),
+                /* @__PURE__ */ jsx5("path", { d: "m7 9 5-5 5 5" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function UserProfile({ user, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        "aria-label": "User settings",
+        className: cx(
+          focusRing,
+          "flex w-full justify-center rounded-md p-2 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:text-gray-50 hover:dark:bg-gray-400/10"
+        ),
+        children: /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-xs text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300",
+            "aria-hidden": "true",
+            children: user.initials
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      "aria-label": "User settings",
+      className: cx(
+        focusRing,
+        "group flex w-full items-center justify-between rounded-md p-2 text-sm font-medium text-gray-900 hover:bg-gray-100 data-[state=open]:bg-gray-100 data-[state=open]:bg-gray-400/10 hover:dark:bg-gray-400/10"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-gray-300 bg-white text-xs text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300",
+              "aria-hidden": "true",
+              children: user.initials
+            }
+          ),
+          /* @__PURE__ */ jsx5("span", { className: "dark:text-gray-50", children: user.name })
+        ] }),
+        /* @__PURE__ */ jsxs5(
+          "svg",
+          {
+            className: "size-4 shrink-0 text-gray-500 group-hover:text-gray-700 group-hover:dark:text-gray-400",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            children: [
+              /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "6", r: "2" }),
+              /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "2" }),
+              /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "18", r: "2" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/dashboard/layouts/app.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function DashboardApp({ name, children }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-app-name": name,
+      className: "min-h-screen bg-white dark:bg-gray-950",
+      children
+    }
+  );
+}
+
+// src/dashboard/layouts/dashboard.tsx
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function DashboardView({
+  title,
+  description,
+  metrics,
+  actions,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs6("main", { role: "main", className: twMerge5("", className), children: [
+    (title || description || actions) && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxs6("div", { children: [
+          title && /* @__PURE__ */ jsx7("h1", { className: "text-2xl font-semibold text-gray-900 dark:text-gray-50", children: title }),
+          description && /* @__PURE__ */ jsx7("p", { className: "text-gray-500 sm:text-sm/6 dark:text-gray-500", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: actions })
+      ] }),
+      /* @__PURE__ */ jsx7("div", { className: "my-6 border-t border-gray-200 dark:border-gray-800" })
+    ] }),
+    metrics && metrics.length > 0 && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx7("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: metrics.map((metric, index) => /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: "rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900",
+          children: [
+            /* @__PURE__ */ jsx7("p", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: metric.label }),
+            /* @__PURE__ */ jsxs6("div", { className: "mt-1 flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsx7("p", { className: "text-2xl font-semibold text-gray-900 dark:text-gray-50", children: metric.value }),
+              metric.change !== void 0 && /* @__PURE__ */ jsxs6(
+                "span",
+                {
+                  className: twMerge5(
+                    "text-sm font-medium",
+                    metric.trend === "up" && "text-green-600 dark:text-green-400",
+                    metric.trend === "down" && "text-red-600 dark:text-red-400",
+                    metric.trend === "neutral" && "text-gray-500 dark:text-gray-400"
+                  ),
+                  children: [
+                    metric.change > 0 ? "+" : "",
+                    metric.change,
+                    "%"
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx7("div", { className: "my-6 border-t border-gray-200 dark:border-gray-800" })
+    ] }),
+    children
+  ] });
+}
+
+// src/dashboard/layouts/header.tsx
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function DashboardHeader({
+  user,
+  showSearch = true,
+  showNotifications = true,
+  breadcrumbs,
+  logo,
+  notifications,
+  userProfile,
+  className
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "header",
+    {
+      className: twMerge6(
+        "flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-950 sm:px-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-4", children: [
+          logo ?? /* @__PURE__ */ jsx8("div", { className: "h-6 w-20 rounded bg-gray-200 dark:bg-gray-800" }),
+          breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx8("nav", { "aria-label": "Breadcrumb", className: "hidden sm:block", children: /* @__PURE__ */ jsx8("ol", { className: "flex items-center gap-2", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-2", children: [
+            index > 0 && /* @__PURE__ */ jsx8("span", { className: "text-gray-400 dark:text-gray-600", children: "/" }),
+            crumb.href ? /* @__PURE__ */ jsx8(
+              "a",
+              {
+                href: crumb.href,
+                className: "text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300",
+                children: crumb.label
+              }
+            ) : /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: crumb.label })
+          ] }, index)) }) })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+          showSearch && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: "rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+              "aria-label": "Search",
+              children: /* @__PURE__ */ jsx8(
+                "svg",
+                {
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx8(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          showNotifications && (notifications ?? /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              className: "rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+              "aria-label": "Notifications",
+              children: /* @__PURE__ */ jsx8(
+                "svg",
+                {
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx8(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                    }
+                  )
+                }
+              )
+            }
+          )),
+          userProfile ?? (user && /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: user.avatar ? /* @__PURE__ */ jsx8(
+            "img",
+            {
+              src: user.avatar,
+              alt: user.name,
+              className: "h-8 w-8 rounded-full"
+            }
+          ) : /* @__PURE__ */ jsx8("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300", children: user.name.charAt(0) }) }))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard/pages/settings.tsx
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_SECTIONS = [
+  "profile",
+  "notifications",
+  "security",
+  "billing",
+  "team",
+  "api",
+  "integrations"
+];
+function ProfileSection({ user }) {
+  return /* @__PURE__ */ jsx9(
+    "section",
+    {
+      "aria-labelledby": "profile-heading",
+      role: "region",
+      "aria-label": "Profile",
+      children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9(
+            "h2",
+            {
+              id: "profile-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Profile"
+            }
+          ),
+          /* @__PURE__ */ jsx9("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Manage your personal information and preferences." })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs8("form", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx9(
+              "label",
+              {
+                htmlFor: "name",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "Name"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "text",
+                id: "name",
+                name: "name",
+                defaultValue: user?.name || "",
+                placeholder: "Your name",
+                className: "mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx9(
+              "label",
+              {
+                htmlFor: "email",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "Email"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "email",
+                id: "email",
+                name: "email",
+                defaultValue: user?.email || "",
+                placeholder: "your@email.com",
+                className: "mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "submit",
+              className: "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+              children: "Save changes"
+            }
+          ) })
+        ] }) })
+      ] })
+    }
+  );
+}
+function NotificationsSection() {
+  return /* @__PURE__ */ jsx9(
+    "section",
+    {
+      "aria-labelledby": "notifications-heading",
+      role: "region",
+      "aria-label": "Notifications",
+      children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9(
+            "h2",
+            {
+              id: "notifications-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Notifications"
+            }
+          ),
+          /* @__PURE__ */ jsx9("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Configure how and when you receive notifications." })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs8("form", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsx9("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-50", children: "Email notifications" }),
+              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-500", children: "Receive email updates about your account." })
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": "true",
+                className: "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-blue-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                children: /* @__PURE__ */ jsx9("span", { className: "translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsx9("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-50", children: "Push notifications" }),
+              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-500", children: "Receive push notifications on your devices." })
+            ] }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": "false",
+                className: "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-700",
+                children: /* @__PURE__ */ jsx9("span", { className: "translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" })
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
+function SecuritySection() {
+  return /* @__PURE__ */ jsx9(
+    "section",
+    {
+      "aria-labelledby": "security-heading",
+      role: "region",
+      "aria-label": "Security",
+      children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9(
+            "h2",
+            {
+              id: "security-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Security"
+            }
+          ),
+          /* @__PURE__ */ jsx9("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Manage your password and security preferences." })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs8("form", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx9(
+              "label",
+              {
+                htmlFor: "current-password",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "Current password"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "password",
+                id: "current-password",
+                name: "current-password",
+                placeholder: "Enter current password",
+                className: "mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx9(
+              "label",
+              {
+                htmlFor: "new-password",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "New password"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                type: "password",
+                id: "new-password",
+                name: "new-password",
+                placeholder: "Enter new password",
+                className: "mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-50"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "submit",
+              className: "rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+              children: "Update password"
+            }
+          ) })
+        ] }) })
+      ] })
+    }
+  );
+}
+function AccountSection() {
+  return /* @__PURE__ */ jsx9(
+    "section",
+    {
+      "aria-labelledby": "account-heading",
+      role: "region",
+      "aria-label": "Account",
+      children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9(
+            "h2",
+            {
+              id: "account-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Account"
+            }
+          ),
+          /* @__PURE__ */ jsx9("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Manage your account settings and preferences." })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs8("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "rounded-md border border-gray-200 p-4 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx9("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-50", children: "Export data" }),
+            /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-gray-500", children: "Download a copy of all your data." }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "mt-3 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+                children: "Export data"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { className: "rounded-md border border-red-200 p-4 dark:border-red-900", children: [
+            /* @__PURE__ */ jsx9("h3", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: "Delete account" }),
+            /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-gray-500", children: "Permanently delete your account and all associated data." }),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                type: "button",
+                className: "mt-3 rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2",
+                children: "Delete account"
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx9("hr", { className: "my-10 border-gray-200 dark:border-gray-800" });
+}
+function Settings({
+  sections = DEFAULT_SECTIONS,
+  user,
+  children
+}) {
+  const sectionComponents = {
+    profile: /* @__PURE__ */ jsx9(ProfileSection, { user }, "profile"),
+    notifications: /* @__PURE__ */ jsx9(NotificationsSection, {}, "notifications"),
+    security: /* @__PURE__ */ jsx9(SecuritySection, {}, "security"),
+    billing: null,
+    // Placeholder for future implementation
+    team: null,
+    // Placeholder for future implementation
+    api: null,
+    // Placeholder for future implementation
+    integrations: null
+    // Placeholder for future implementation
+  };
+  const showAccount = sections?.length === void 0 || sections.length === DEFAULT_SECTIONS?.length;
+  const activeSections = (sections || DEFAULT_SECTIONS || []).map((section) => sectionComponents[section]).filter((component) => component !== null);
+  return /* @__PURE__ */ jsxs8("div", { className: "min-h-dvh bg-white p-4 sm:p-6 lg:rounded-lg lg:border lg:border-gray-200 dark:bg-gray-925 lg:dark:border-gray-900", children: [
+    /* @__PURE__ */ jsx9("h1", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: "Settings" }),
+    /* @__PURE__ */ jsxs8("div", { "data-testid": "settings-content", className: "mt-8 space-y-0", children: [
+      activeSections.map((component, index) => /* @__PURE__ */ jsxs8("div", { children: [
+        index > 0 && /* @__PURE__ */ jsx9(Divider, {}),
+        component
+      ] }, index)),
+      showAccount && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        activeSections.length > 0 && /* @__PURE__ */ jsx9(Divider, {}),
+        /* @__PURE__ */ jsx9(AccountSection, {})
+      ] })
+    ] }),
+    children
+  ] });
+}
+
+// src/dashboard/index.ts
+var components = {
+  Shell,
+  ShellSidebarLeft,
+  ShellTopNav,
+  Sidebar,
+  Settings
+};
+var AppComponents = {
+  /** Root application wrapper */
+  App: DashboardApp,
+  /** Flexible shell layout */
+  Shell,
+  /** Navigation sidebar */
+  Sidebar,
+  /** Header bar component */
+  Header: DashboardHeader,
+  /** Dashboard page layout */
+  Dashboard: DashboardView,
+  /** Settings page layout */
+  Settings,
+  /** Sidebar-left shell variant */
+  ShellSidebarLeft,
+  /** Top-nav shell variant */
+  ShellTopNav
+};
+export {
+  AppComponents,
+  DashboardApp,
+  DashboardHeader,
+  DashboardView,
+  MobileSidebar,
+  Settings,
+  Shell,
+  ShellSidebarLeft,
+  ShellTopNav,
+  Sidebar,
+  UserProfile,
+  WorkspaceSwitcher,
+  components,
+  cx,
+  focusInput,
+  focusRing
+};
+//# sourceMappingURL=index.js.map