@mdxui/tremor 6.0.0

package/dist/index.js

@@ -0,0 +1,1089 @@
+// 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/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/sidebar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function DefaultLink({
+  href,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx4("a", { href, className, 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 Sidebar({
+  items = [],
+  shortcuts = [],
+  workspace,
+  workspaces = [],
+  user,
+  collapsed = false,
+  onCollapse: _onCollapse,
+  header,
+  footer,
+  className,
+  pathname,
+  LinkComponent = DefaultLink
+}) {
+  return /* @__PURE__ */ jsx4(
+    "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__ */ jsxs4("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__ */ jsx4(
+          WorkspaceSwitcher,
+          {
+            workspace,
+            workspaces,
+            collapsed
+          }
+        ),
+        header,
+        /* @__PURE__ */ jsxs4(
+          "nav",
+          {
+            "aria-label": "core navigation links",
+            className: "flex flex-1 flex-col space-y-10",
+            children: [
+              /* @__PURE__ */ jsx4("ul", { role: "list", className: "space-y-0.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-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__ */ jsx4(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                      !collapsed && item.label
+                    ]
+                  }
+                ) }, item.id);
+              }) }),
+              shortcuts.length > 0 && !collapsed && /* @__PURE__ */ jsxs4("div", { children: [
+                /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium leading-6 text-gray-500", 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 text-sm font-medium transition hover:bg-gray-100 hover:dark:bg-gray-900",
+                        focusRing
+                      ),
+                      children: [
+                        Icon && /* @__PURE__ */ jsx4(
+                          Icon,
+                          {
+                            className: "size-4 shrink-0",
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        shortcut.name
+                      ]
+                    }
+                  ) }, shortcut.name);
+                }) })
+              ] })
+            ]
+          }
+        ),
+        user && !footer && /* @__PURE__ */ jsx4("div", { className: "mt-auto", children: /* @__PURE__ */ jsx4(UserProfile, { user, collapsed }) }),
+        footer && /* @__PURE__ */ jsx4("div", { className: "mt-auto", children: footer })
+      ] })
+    }
+  );
+}
+function WorkspaceSwitcher({
+  workspace,
+  workspaces: _workspaces = [],
+  collapsed
+}) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx4("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx4(
+      "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__ */ jsxs4(
+    "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__ */ jsx4(
+          "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__ */ jsxs4("div", { className: "flex w-full items-center justify-between gap-x-4 truncate", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "truncate", children: [
+            /* @__PURE__ */ jsx4("p", { className: "truncate whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50", children: workspace.name }),
+            /* @__PURE__ */ jsx4("p", { className: "whitespace-nowrap text-left text-xs text-gray-700 dark:text-gray-300", children: workspace.role })
+          ] }),
+          /* @__PURE__ */ jsxs4(
+            "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__ */ jsx4("path", { d: "m7 15 5 5 5-5" }),
+                /* @__PURE__ */ jsx4("path", { d: "m7 9 5-5 5 5" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function UserProfile({ user, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(
+          "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__ */ jsxs4(
+    "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__ */ jsxs4("span", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4("span", { className: "dark:text-gray-50", children: user.name })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "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__ */ jsx4("circle", { cx: "12", cy: "6", r: "2" }),
+              /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "2" }),
+              /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "18", r: "2" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/dashboard/pages/settings.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_SECTIONS = [
+  "profile",
+  "notifications",
+  "security",
+  "billing",
+  "team",
+  "api",
+  "integrations"
+];
+function ProfileSection({ user }) {
+  return /* @__PURE__ */ jsx5(
+    "section",
+    {
+      "aria-labelledby": "profile-heading",
+      role: "region",
+      "aria-label": "Profile",
+      children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5(
+            "h2",
+            {
+              id: "profile-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Profile"
+            }
+          ),
+          /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Manage your personal information and preferences." })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs5("form", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5(
+              "label",
+              {
+                htmlFor: "name",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "Name"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5(
+              "label",
+              {
+                htmlFor: "email",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "Email"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsx5("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(
+    "section",
+    {
+      "aria-labelledby": "notifications-heading",
+      role: "region",
+      "aria-label": "Notifications",
+      children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5(
+            "h2",
+            {
+              id: "notifications-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Notifications"
+            }
+          ),
+          /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Configure how and when you receive notifications." })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs5("form", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx5("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-50", children: "Email notifications" }),
+              /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-500", children: "Receive email updates about your account." })
+            ] }),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsx5("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__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs5("div", { children: [
+              /* @__PURE__ */ jsx5("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-50", children: "Push notifications" }),
+              /* @__PURE__ */ jsx5("p", { className: "text-sm text-gray-500", children: "Receive push notifications on your devices." })
+            ] }),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsx5("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__ */ jsx5(
+    "section",
+    {
+      "aria-labelledby": "security-heading",
+      role: "region",
+      "aria-label": "Security",
+      children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5(
+            "h2",
+            {
+              id: "security-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Security"
+            }
+          ),
+          /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Manage your password and security preferences." })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs5("form", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5(
+              "label",
+              {
+                htmlFor: "current-password",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "Current password"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsxs5("div", { children: [
+            /* @__PURE__ */ jsx5(
+              "label",
+              {
+                htmlFor: "new-password",
+                className: "block text-sm font-medium text-gray-900 dark:text-gray-50",
+                children: "New password"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsx5("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(
+    "section",
+    {
+      "aria-labelledby": "account-heading",
+      role: "region",
+      "aria-label": "Account",
+      children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-x-14 gap-y-8 md:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5(
+            "h2",
+            {
+              id: "account-heading",
+              className: "scroll-mt-10 font-semibold text-gray-900 dark:text-gray-50",
+              children: "Account"
+            }
+          ),
+          /* @__PURE__ */ jsx5("p", { className: "mt-2 text-sm leading-6 text-gray-500", children: "Manage your account settings and preferences." })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "rounded-md border border-gray-200 p-4 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx5("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-50", children: "Export data" }),
+            /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-gray-500", children: "Download a copy of all your data." }),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsxs5("div", { className: "rounded-md border border-red-200 p-4 dark:border-red-900", children: [
+            /* @__PURE__ */ jsx5("h3", { className: "text-sm font-medium text-red-700 dark:text-red-400", children: "Delete account" }),
+            /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-gray-500", children: "Permanently delete your account and all associated data." }),
+            /* @__PURE__ */ jsx5(
+              "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__ */ jsx5("hr", { className: "my-10 border-gray-200 dark:border-gray-800" });
+}
+function Settings({
+  sections = DEFAULT_SECTIONS,
+  user,
+  children
+}) {
+  const sectionComponents = {
+    profile: /* @__PURE__ */ jsx5(ProfileSection, { user }, "profile"),
+    notifications: /* @__PURE__ */ jsx5(NotificationsSection, {}, "notifications"),
+    security: /* @__PURE__ */ jsx5(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__ */ jsxs5("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__ */ jsx5("h1", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: "Settings" }),
+    /* @__PURE__ */ jsxs5("div", { "data-testid": "settings-content", className: "mt-8 space-y-0", children: [
+      activeSections.map((component, index) => /* @__PURE__ */ jsxs5("div", { children: [
+        index > 0 && /* @__PURE__ */ jsx5(Divider, {}),
+        component
+      ] }, index)),
+      showAccount && /* @__PURE__ */ jsxs5(Fragment, { children: [
+        activeSections.length > 0 && /* @__PURE__ */ jsx5(Divider, {}),
+        /* @__PURE__ */ jsx5(AccountSection, {})
+      ] })
+    ] }),
+    children
+  ] });
+}
+
+// src/dashboard/index.ts
+var components = {
+  Shell,
+  ShellSidebarLeft,
+  ShellTopNav,
+  Sidebar,
+  Settings
+};
+
+// src/shared/adapters/chart-adapter.ts
+function adaptAreaChartProps(props) {
+  const {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    startEndOnly,
+    showLegend,
+    showGridLines,
+    showAnimation,
+    stack,
+    curveType,
+    connectNulls,
+    yAxisWidth,
+    minValue,
+    maxValue,
+    className
+  } = props;
+  return {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    startEndOnly,
+    showLegend,
+    showGridLines,
+    showAnimation,
+    stack,
+    curveType,
+    connectNulls,
+    yAxisWidth,
+    minValue,
+    maxValue,
+    className
+  };
+}
+function adaptBarChartProps(props) {
+  const {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    layout,
+    stack,
+    relative,
+    showLegend,
+    showGridLines,
+    showAnimation,
+    yAxisWidth,
+    barCategoryGap,
+    className
+  } = props;
+  return {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    layout,
+    stack,
+    relative,
+    showLegend,
+    showGridLines,
+    showAnimation,
+    yAxisWidth,
+    barCategoryGap,
+    className
+  };
+}
+function adaptLineChartProps(props) {
+  const {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    curveType,
+    connectNulls,
+    showDots,
+    showLegend,
+    showGridLines,
+    showAnimation,
+    yAxisWidth,
+    className
+  } = props;
+  return {
+    data,
+    index,
+    categories,
+    colors,
+    valueFormatter,
+    curveType,
+    connectNulls,
+    showDots,
+    showLegend,
+    showGridLines,
+    showAnimation,
+    yAxisWidth,
+    className
+  };
+}
+function adaptDonutChartProps(props) {
+  const {
+    data,
+    category,
+    value,
+    colors,
+    variant,
+    label,
+    showLegend,
+    showTooltip,
+    animationDuration,
+    valueFormatter,
+    className
+  } = props;
+  return {
+    data,
+    category,
+    value,
+    colors,
+    variant,
+    label,
+    showLegend,
+    showTooltip,
+    animationDuration,
+    valueFormatter,
+    className
+  };
+}
+function adaptSparkChartProps(props) {
+  const { data, type, color, showMinMax, height, width, animate, className } = props;
+  return {
+    data,
+    type,
+    color,
+    showMinMax,
+    height,
+    width,
+    animate,
+    className
+  };
+}
+
+// src/shared/adapters/metric-adapter.ts
+function adaptMetricCardProps(props) {
+  const { title, value, delta, deltaType, decorationColor, icon, className } = props;
+  return {
+    title,
+    value,
+    delta: delta ? {
+      value: delta.value,
+      type: delta.type,
+      isIncreasePositive: delta.isIncreasePositive
+    } : void 0,
+    deltaType,
+    decorationColor,
+    icon,
+    className
+  };
+}
+function adaptAnalyticsCardProps(props) {
+  const {
+    title,
+    description,
+    metric,
+    subtext,
+    chartType,
+    chartData,
+    chartConfig,
+    timeRange,
+    showTimeRangeSelector,
+    loading,
+    className
+  } = props;
+  return {
+    title,
+    description,
+    metric,
+    subtext,
+    chartType,
+    chartData,
+    chartConfig,
+    timeRange,
+    showTimeRangeSelector,
+    loading,
+    className
+  };
+}
+function adaptCategoryBarProps(props) {
+  const {
+    values,
+    colors,
+    labels,
+    markerValue,
+    showMarker,
+    showLabels,
+    showValues,
+    height,
+    className
+  } = props;
+  return {
+    values,
+    colors,
+    labels,
+    markerValue,
+    showMarker,
+    showLabels,
+    showValues,
+    height,
+    className
+  };
+}
+function adaptBarListProps(props) {
+  const { data, valueFormatter, color, showAnimation, sortOrder, className } = props;
+  return {
+    data,
+    valueFormatter,
+    color,
+    showAnimation,
+    sortOrder,
+    className
+  };
+}
+function adaptTrackerProps(props) {
+  const { data, className } = props;
+  return {
+    data,
+    className
+  };
+}
+function adaptDeltaBarProps(props) {
+  const { value, showAnimation, positiveColor, negativeColor, className } = props;
+  return {
+    value,
+    showAnimation,
+    positiveColor,
+    negativeColor,
+    className
+  };
+}
+function formatDelta(value, type = "percentage") {
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  const sign = numValue >= 0 ? "+" : "";
+  if (type === "percentage") {
+    return `${sign}${numValue.toFixed(1)}%`;
+  }
+  return `${sign}${numValue}`;
+}
+function getTrendFromDelta(value) {
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (numValue > 0) return "up";
+  if (numValue < 0) return "down";
+  return "unchanged";
+}
+
+// src/shared/adapters/table-adapter.ts
+function adaptTransactionsListProps(props) {
+  const {
+    transactions,
+    title,
+    currency,
+    valueFormatter,
+    showCategoryFilter,
+    showDateFilter,
+    showExport,
+    pageSize,
+    emptyMessage,
+    loading,
+    className
+  } = props;
+  return {
+    data: transactions,
+    title,
+    currency,
+    valueFormatter,
+    showCategoryFilter,
+    showDateFilter,
+    showExport,
+    pageSize,
+    emptyMessage,
+    loading,
+    className
+  };
+}
+function adaptAuditLogTableProps(props) {
+  const {
+    logs,
+    title,
+    searchable,
+    filterByActor,
+    filterByAction,
+    filterByResource,
+    showDateRange,
+    showExport,
+    pageSize,
+    loading,
+    className
+  } = props;
+  return {
+    data: logs,
+    title,
+    searchable,
+    filterByActor,
+    filterByAction,
+    filterByResource,
+    showDateRange,
+    showExport,
+    pageSize,
+    loading,
+    className
+  };
+}
+function createTransactionColumns(currency = "USD") {
+  return [
+    {
+      accessorKey: "date",
+      header: "Date",
+      cell: (info) => new Date(info.getValue()).toLocaleDateString()
+    },
+    {
+      accessorKey: "description",
+      header: "Description"
+    },
+    {
+      accessorKey: "amount",
+      header: "Amount",
+      cell: (info) => {
+        const value = info.getValue();
+        const type = info.row.original.type;
+        const formatted = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency
+        }).format(Math.abs(value));
+        return type === "debit" ? `-${formatted}` : formatted;
+      }
+    },
+    {
+      accessorKey: "status",
+      header: "Status"
+    },
+    {
+      accessorKey: "category",
+      header: "Category"
+    }
+  ];
+}
+function createAuditLogColumns() {
+  return [
+    {
+      accessorKey: "timestamp",
+      header: "Time",
+      cell: (info) => new Date(info.getValue()).toLocaleString()
+    },
+    {
+      accessorKey: "actor.name",
+      header: "User"
+    },
+    {
+      accessorKey: "action",
+      header: "Action"
+    },
+    {
+      accessorKey: "resource.type",
+      header: "Resource"
+    },
+    {
+      accessorKey: "resource.name",
+      header: "Name"
+    }
+  ];
+}
+export {
+  Settings as DashboardSettings,
+  Shell as DashboardShell,
+  ShellSidebarLeft as DashboardShellSidebarLeft,
+  ShellTopNav as DashboardShellTopNav,
+  Sidebar as DashboardSidebar,
+  adaptAnalyticsCardProps,
+  adaptAreaChartProps,
+  adaptAuditLogTableProps,
+  adaptBarChartProps,
+  adaptBarListProps,
+  adaptCategoryBarProps,
+  adaptDeltaBarProps,
+  adaptDonutChartProps,
+  adaptLineChartProps,
+  adaptMetricCardProps,
+  adaptSparkChartProps,
+  adaptTrackerProps,
+  adaptTransactionsListProps,
+  createAuditLogColumns,
+  createTransactionColumns,
+  components as dashboardComponents,
+  formatDelta,
+  getTrendFromDelta
+};
+//# sourceMappingURL=index.js.map