@lumeweb/portal-framework-ui 0.0.1 → 0.1.0

package/dist/esm/components/layout/GeneralLayout.js

@@ -0,0 +1,45 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { SidebarProvider, init_SidebarContext } from "./SidebarContext.js";
+import DesktopSidebar_default, { init_DesktopSidebar } from "./DesktopSidebar.js";
+import { UserNav, init_UserNav } from "./UserNav.js";
+import { MobileMenu, init_MobileMenu } from "./MobileMenu.js";
+import { init_useTheme, withTheme } from "../../hooks/useTheme.js";
+import { ThemeSwitcher, init_ThemeSwitcher } from "../ThemeSwitcher.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/GeneralLayout.tsx
+function GeneralLayoutComponent({ children }) {
+	return /* @__PURE__ */ jsxs(SidebarProvider, { children: [/* @__PURE__ */ jsx(DesktopSidebar_default, {}), /* @__PURE__ */ jsx("main", {
+		className: "transition-[margin-left] duration-300 ease-in-out lg:ml-72",
+		children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("header", {
+			className: "bg-background/95 supports-[backdrop-filter]:bg-background/60 dark:shadow-secondary sticky top-0 z-10 w-full shadow-md backdrop-blur",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-2 p-8 sm:mx-8",
+				children: [
+					/* @__PURE__ */ jsx(ThemeSwitcher, {}),
+					/* @__PURE__ */ jsx(UserNav, {}),
+					/* @__PURE__ */ jsx(MobileMenu, {})
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mx-4 my-8 sm:mx-8",
+			children
+		})] })
+	})] });
+}
+var GeneralLayout;
+var init_GeneralLayout = __esmMin(() => {
+	init_ThemeSwitcher();
+	init_useTheme();
+	init_DesktopSidebar();
+	init_MobileMenu();
+	init_SidebarContext();
+	init_UserNav();
+	GeneralLayout = withTheme(GeneralLayoutComponent);
+});
+
+//#endregion
+init_GeneralLayout();
+export { GeneralLayout, init_GeneralLayout };
+//# sourceMappingURL=GeneralLayout.js.map

package/dist/esm/components/layout/GeneralLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralLayout.js","names":["DesktopSidebar"],"sources":["../../../../src/components/layout/GeneralLayout.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ThemeSwitcher } from \"@/components/ThemeSwitcher\";\nimport { withTheme } from \"@/hooks/useTheme\";\n\nimport DesktopSidebar from \"./DesktopSidebar\";\nimport { MobileMenu } from \"./MobileMenu\";\nimport { SidebarProvider } from \"./SidebarContext\";\nimport { UserNav } from \"./UserNav\";\n\ninterface GeneralLayoutProps {\n  children?: React.ReactNode;\n}\n\nfunction GeneralLayoutComponent({ children }: GeneralLayoutProps) {\n  return (\n    <SidebarProvider>\n      <DesktopSidebar />\n      <main className=\"transition-[margin-left] duration-300 ease-in-out lg:ml-72\">\n        <div>\n          <header className=\"bg-background/95 supports-[backdrop-filter]:bg-background/60 dark:shadow-secondary sticky top-0 z-10 w-full shadow-md backdrop-blur\">\n            <div className=\"flex items-center justify-end gap-2 p-8 sm:mx-8\">\n              <ThemeSwitcher />\n              <UserNav />\n              <MobileMenu />\n            </div>\n          </header>\n          <div className=\"mx-4 my-8 sm:mx-8\">{children}</div>\n        </div>\n      </main>\n    </SidebarProvider>\n  );\n}\n\nexport const GeneralLayout = withTheme(GeneralLayoutComponent);\n"],"mappings":";;;;;;;;;;;AAcA,SAAS,uBAAuB,EAAE,YAAgC;AAChE,QACE,qBAAC,8BACC,oBAACA,2BAAiB,EAClB,oBAAC;EAAK,WAAU;YACd,qBAAC,oBACC,oBAAC;GAAO,WAAU;aAChB,qBAAC;IAAI,WAAU;;KACb,oBAAC,kBAAgB;KACjB,oBAAC,YAAU;KACX,oBAAC,eAAa;;KACV;IACC,EACT,oBAAC;GAAI,WAAU;GAAqB;IAAe,IAC/C;GACD,IACS;;;;qBA5BqC;gBACd;sBAEC;kBACJ;sBACS;eACf;CA0BvB,gBAAgB,UAAU,uBAAuB"}

package/dist/esm/components/layout/GeneralLayout.spec.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/esm/components/layout/GeneralLayout.spec.js

@@ -0,0 +1,143 @@
+import { GeneralLayout, init_GeneralLayout } from "./GeneralLayout.js";
+import { useMobile } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "/home/runner/work/web/web/node_modules/.pnpm/vitest@4.0.16_@types+node@25.0.6_@vitest+browser-playwright@4.0.16_happy-dom@20.1.0_jit_f9bfc6b661e56e62de1f809a028e46f4/node_modules/vitest/dist/index.js";
+
+//#region src/components/layout/GeneralLayout.spec.tsx
+init_GeneralLayout();
+vi.mock("@/components/dialog", () => ({
+	DialogProvider: ({ children }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-dialog-provider",
+		children
+	}),
+	DialogRenderer: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-dialog-renderer" })
+}));
+vi.mock("@/components/ThemeSwitcher", () => ({ ThemeSwitcher: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-theme-switcher" }) }));
+vi.mock("@/hooks/useTheme", () => ({ withTheme: (Component) => (props) => /* @__PURE__ */ jsx("div", {
+	"data-testid": "mock-with-theme",
+	children: /* @__PURE__ */ jsx(Component, { ...props })
+}) }));
+vi.mock("@/images", () => ({
+	discordLogoPng: "discord-logo.png",
+	lumeColorLogoPng: "lume-color-logo.png"
+}));
+vi.mock("@lumeweb/portal-framework-ui-core", () => ({
+	Avatar: (props) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-avatar",
+		...props
+	}),
+	Button: (props) => /* @__PURE__ */ jsx("button", {
+		"data-testid": "mock-button",
+		...props,
+		children: props.children
+	}),
+	ChevronDownIcon: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-chevron-down-icon" }),
+	DropdownMenu: ({ children }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-dropdown-menu",
+		children
+	}),
+	DropdownMenuContent: ({ children }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-dropdown-menu-content",
+		children
+	}),
+	DropdownMenuGroup: ({ children }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-dropdown-menu-group",
+		children
+	}),
+	DropdownMenuItem: ({ children, onClick }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-dropdown-menu-item",
+		onClick,
+		children
+	}),
+	DropdownMenuTrigger: ({ children }) => /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-dropdown-menu-trigger",
+		children
+	}),
+	useMobile: vi.fn()
+}));
+vi.mock("@radix-ui/react-icons", () => ({
+	ChevronDownIcon: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-radix-chevron-down-icon" }),
+	ExitIcon: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-exit-icon" })
+}));
+const mockLogoutMutate = vi.fn();
+const mockIdentity = {
+	firstName: "John",
+	lastName: "Doe"
+};
+vi.mock("@refinedev/core", () => ({
+	useGetIdentity: () => ({ data: mockIdentity }),
+	useLogout: () => ({ mutate: mockLogoutMutate })
+}));
+vi.mock("react-router", () => ({ Link: ({ children, to, ...props }) => /* @__PURE__ */ jsx("a", {
+	href: to,
+	...props,
+	children
+}) }));
+vi.mock("./DesktopSidebar", () => ({ default: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-desktop-sidebar" }) }));
+vi.mock("./MobileSidebar", () => ({ default: () => /* @__PURE__ */ jsx("div", { "data-testid": "mock-mobile-sidebar" }) }));
+describe("GeneralLayout", () => {
+	const mockChildren = /* @__PURE__ */ jsx("div", {
+		"data-testid": "mock-children",
+		children: "Layout Children"
+	});
+	beforeEach(() => {
+		vi.clearAllMocks();
+		useMobile.mockReturnValue(false);
+	});
+	afterEach(cleanup);
+	it("renders DesktopSidebar and desktop elements when not mobile", () => {
+		render(/* @__PURE__ */ jsx(GeneralLayout, { children: mockChildren }));
+		expect(screen.getByTestId("mock-desktop-sidebar")).toBeInTheDocument();
+		expect(screen.queryByTestId("mock-mobile-sidebar")).not.toBeInTheDocument();
+		expect(screen.getByTestId("mock-theme-switcher")).toBeInTheDocument();
+		expect(screen.getByTestId("mock-dropdown-menu-trigger")).toBeInTheDocument();
+		expect(screen.getByText(`${mockIdentity.firstName} ${mockIdentity.lastName}`)).toBeInTheDocument();
+		expect(screen.getByTestId("mock-avatar")).toBeInTheDocument();
+		expect(screen.getByTestId("mock-radix-chevron-down-icon")).toBeInTheDocument();
+		const connectLinks = screen.getAllByRole("link", { name: /Connect with us/i });
+		expect(connectLinks).toHaveLength(2);
+		const discordLink = connectLinks.find((link) => link.getAttribute("href") === "https://discord.lumeweb.com");
+		const lumeLink = connectLinks.find((link) => link.getAttribute("href") === "https://lumeweb.com");
+		expect(discordLink).toBeInTheDocument();
+		expect(lumeLink).toBeInTheDocument();
+		expect(discordLink).toHaveAttribute("href", "https://discord.lumeweb.com");
+		expect(lumeLink).toHaveAttribute("href", "https://lumeweb.com");
+		expect(screen.getByTestId("mock-children")).toBeInTheDocument();
+	});
+	it("renders MobileSidebar and hides desktop elements when mobile", () => {
+		useMobile.mockReturnValue(true);
+		render(/* @__PURE__ */ jsx(GeneralLayout, { children: mockChildren }));
+		expect(screen.queryByTestId("mock-desktop-sidebar")).not.toBeInTheDocument();
+		expect(screen.getByTestId("mock-mobile-sidebar")).toBeInTheDocument();
+		const connectLinks = screen.getAllByRole("link", { name: /Connect with us/i });
+		expect(connectLinks).toHaveLength(2);
+		const discordLink = connectLinks.find((link) => link.getAttribute("href") === "https://discord.lumeweb.com");
+		const lumeLink = connectLinks.find((link) => link.getAttribute("href") === "https://lumeweb.com");
+		expect(discordLink).toBeInTheDocument();
+		expect(lumeLink).toBeInTheDocument();
+		expect(discordLink).toHaveAttribute("href", "https://discord.lumeweb.com");
+		expect(lumeLink).toHaveAttribute("href", "https://lumeweb.com");
+		expect(screen.getByTestId("mock-children")).toBeInTheDocument();
+	});
+	it("calls logout when the desktop logout menu item is clicked", () => {
+		useMobile.mockReturnValue(false);
+		render(/* @__PURE__ */ jsx(GeneralLayout, { children: mockChildren }));
+		const logoutMenuItem = screen.getByTestId("mock-dropdown-menu-item");
+		fireEvent.click(logoutMenuItem);
+		expect(mockLogoutMutate).toHaveBeenCalledTimes(1);
+	});
+	it("renders DialogProvider and DialogRenderer", () => {
+		render(/* @__PURE__ */ jsx(GeneralLayout, { children: mockChildren }));
+		expect(screen.getByTestId("mock-dialog-provider")).toBeInTheDocument();
+		expect(screen.getByTestId("mock-dialog-renderer")).toBeInTheDocument();
+	});
+	it("wraps the component with withTheme", () => {
+		render(/* @__PURE__ */ jsx(GeneralLayout, { children: mockChildren }));
+		expect(screen.getByTestId("mock-with-theme")).toBeInTheDocument();
+	});
+});
+
+//#endregion
+//# sourceMappingURL=GeneralLayout.spec.js.map

package/dist/esm/components/layout/GeneralLayout.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralLayout.spec.js","names":[],"sources":["../../../../src/components/layout/GeneralLayout.spec.tsx"],"sourcesContent":["import { useMobile } from \"@lumeweb/portal-framework-ui-core\";\nimport { cleanup, fireEvent, render, screen } from \"@testing-library/react\";\nimport React from \"react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\n\n// Import the component to test\nimport { GeneralLayout } from \"./GeneralLayout\";\n\n// Mocking external dependencies and child components/hooks\nvi.mock(\"@/components/dialog\", () => ({\n  DialogProvider: ({ children }: { children: React.ReactNode }) => (\n    <div data-testid=\"mock-dialog-provider\">{children}</div>\n  ),\n  DialogRenderer: () => <div data-testid=\"mock-dialog-renderer\" />,\n}));\n\nvi.mock(\"@/components/ThemeSwitcher\", () => ({\n  ThemeSwitcher: () => <div data-testid=\"mock-theme-switcher\" />,\n}));\n\nvi.mock(\"@/hooks/useTheme\", () => ({\n  withTheme: (Component: React.ComponentType) => (props: any) => (\n    <div data-testid=\"mock-with-theme\">\n      <Component {...props} />\n    </div>\n  ),\n}));\n\nvi.mock(\"@/images\", () => ({\n  discordLogoPng: \"discord-logo.png\",\n  lumeColorLogoPng: \"lume-color-logo.png\",\n}));\n\nvi.mock(\"@lumeweb/portal-framework-ui-core\", () => ({\n  Avatar: (props: any) => <div data-testid=\"mock-avatar\" {...props} />,\n  Button: (props: any) => (\n    <button data-testid=\"mock-button\" {...props}>\n      {props.children}\n    </button>\n  ),\n  ChevronDownIcon: () => <div data-testid=\"mock-chevron-down-icon\" />,\n  DropdownMenu: ({ children }: { children: React.ReactNode }) => (\n    <div data-testid=\"mock-dropdown-menu\">{children}</div>\n  ),\n  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (\n    <div data-testid=\"mock-dropdown-menu-content\">{children}</div>\n  ),\n  DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => (\n    <div data-testid=\"mock-dropdown-menu-group\">{children}</div>\n  ),\n  DropdownMenuItem: ({ children, onClick }: any) => (\n    <div data-testid=\"mock-dropdown-menu-item\" onClick={onClick}>\n      {children}\n    </div>\n  ),\n  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => (\n    <div data-testid=\"mock-dropdown-menu-trigger\">{children}</div>\n  ),\n  useMobile: vi.fn(), // Will be set per test case\n}));\n\nvi.mock(\"@radix-ui/react-icons\", () => ({\n  ChevronDownIcon: () => <div data-testid=\"mock-radix-chevron-down-icon\" />,\n  ExitIcon: () => <div data-testid=\"mock-exit-icon\" />,\n}));\n\nconst mockLogoutMutate = vi.fn();\nconst mockIdentity = { firstName: \"John\", lastName: \"Doe\" };\nvi.mock(\"@refinedev/core\", () => ({\n  useGetIdentity: () => ({ data: mockIdentity }),\n  useLogout: () => ({ mutate: mockLogoutMutate }),\n}));\n\nvi.mock(\"react-router\", () => ({\n  Link: ({ children, to, ...props }: any) => (\n    <a href={to} {...props}>\n      {children}\n    </a>\n  ),\n}));\n\n// Mock the sidebar components\nvi.mock(\"./DesktopSidebar\", () => ({\n  default: () => <div data-testid=\"mock-desktop-sidebar\" />,\n}));\n\nvi.mock(\"./MobileSidebar\", () => ({\n  default: () => <div data-testid=\"mock-mobile-sidebar\" />,\n}));\n\ndescribe(\"GeneralLayout\", () => {\n  const mockChildren = <div data-testid=\"mock-children\">Layout Children</div>;\n\n  beforeEach(() => {\n    // Reset mocks before each test\n    vi.clearAllMocks();\n    // Default to desktop view unless specified otherwise\n    (useMobile as vi.Mock).mockReturnValue(false);\n  });\n\n  afterEach(cleanup);\n\n  it(\"renders DesktopSidebar and desktop elements when not mobile\", () => {\n    render(<GeneralLayout>{mockChildren}</GeneralLayout>);\n\n    expect(screen.getByTestId(\"mock-desktop-sidebar\")).toBeInTheDocument();\n    expect(screen.queryByTestId(\"mock-mobile-sidebar\")).not.toBeInTheDocument();\n\n    // Check for desktop-specific elements\n    expect(screen.getByTestId(\"mock-theme-switcher\")).toBeInTheDocument();\n    expect(\n      screen.getByTestId(\"mock-dropdown-menu-trigger\"),\n    ).toBeInTheDocument();\n    expect(\n      screen.getByText(`${mockIdentity.firstName} ${mockIdentity.lastName}`),\n    ).toBeInTheDocument();\n    expect(screen.getByTestId(\"mock-avatar\")).toBeInTheDocument();\n    expect(\n      screen.getByTestId(\"mock-radix-chevron-down-icon\"),\n    ).toBeInTheDocument();\n\n    // Check for footer links\n    const connectLinks = screen.getAllByRole(\"link\", {\n      name: /Connect with us/i,\n    });\n    expect(connectLinks).toHaveLength(2); // Ensure we found both links\n\n    const discordLink = connectLinks.find(\n      (link) => link.getAttribute(\"href\") === \"https://discord.lumeweb.com\",\n    );\n    const lumeLink = connectLinks.find(\n      (link) => link.getAttribute(\"href\") === \"https://lumeweb.com\",\n    );\n\n    expect(discordLink).toBeInTheDocument();\n    expect(lumeLink).toBeInTheDocument();\n    expect(discordLink).toHaveAttribute(\"href\", \"https://discord.lumeweb.com\");\n    expect(lumeLink).toHaveAttribute(\"href\", \"https://lumeweb.com\");\n\n    // Check if children are rendered\n    expect(screen.getByTestId(\"mock-children\")).toBeInTheDocument();\n  });\n\n  it(\"renders MobileSidebar and hides desktop elements when mobile\", () => {\n    (useMobile as vi.Mock).mockReturnValue(true); // Set to mobile view\n    render(<GeneralLayout>{mockChildren}</GeneralLayout>);\n\n    expect(\n      screen.queryByTestId(\"mock-desktop-sidebar\"),\n    ).not.toBeInTheDocument();\n    expect(screen.getByTestId(\"mock-mobile-sidebar\")).toBeInTheDocument();\n\n    // Check for absence of desktop-specific elements in the main content area\n    // The ThemeSwitcher and the desktop header dropdown are rendered but hidden by CSS on mobile,\n    // so we don't check for their absence in the DOM.\n    // The mobile sidebar handles its own user/logout.\n\n    // Check for footer links (should still be present in mobile view)\n    const connectLinks = screen.getAllByRole(\"link\", {\n      name: /Connect with us/i,\n    });\n    expect(connectLinks).toHaveLength(2); // Ensure we found both links\n\n    const discordLink = connectLinks.find(\n      (link) => link.getAttribute(\"href\") === \"https://discord.lumeweb.com\",\n    );\n    const lumeLink = connectLinks.find(\n      (link) => link.getAttribute(\"href\") === \"https://lumeweb.com\",\n    );\n\n    expect(discordLink).toBeInTheDocument();\n    expect(lumeLink).toBeInTheDocument();\n    expect(discordLink).toHaveAttribute(\"href\", \"https://discord.lumeweb.com\");\n    expect(lumeLink).toHaveAttribute(\"href\", \"https://lumeweb.com\");\n\n    // Check if children are rendered\n    expect(screen.getByTestId(\"mock-children\")).toBeInTheDocument();\n  });\n\n  it(\"calls logout when the desktop logout menu item is clicked\", () => {\n    (useMobile as vi.Mock).mockReturnValue(false); // Ensure desktop view\n    render(<GeneralLayout>{mockChildren}</GeneralLayout>);\n\n    // Simulate clicking the dropdown trigger to make the menu item available\n    // With simple mocks, the dropdown content might be always visible.\n    // For this simple mock, we assume the item is accessible.\n    const logoutMenuItem = screen.getByTestId(\"mock-dropdown-menu-item\");\n\n    fireEvent.click(logoutMenuItem);\n\n    expect(mockLogoutMutate).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"renders DialogProvider and DialogRenderer\", () => {\n    render(<GeneralLayout>{mockChildren}</GeneralLayout>);\n\n    expect(screen.getByTestId(\"mock-dialog-provider\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"mock-dialog-renderer\")).toBeInTheDocument();\n  });\n\n  it(\"wraps the component with withTheme\", () => {\n    render(<GeneralLayout>{mockChildren}</GeneralLayout>);\n    expect(screen.getByTestId(\"mock-with-theme\")).toBeInTheDocument();\n  });\n});\n"],"mappings":"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"}

package/dist/esm/components/layout/MobileMenu.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/layout/MobileMenu.d.ts
+declare function MobileMenu(): any;
+//#endregion
+export { MobileMenu };
+//# sourceMappingURL=MobileMenu.d.ts.map

package/dist/esm/components/layout/MobileMenu.js

@@ -0,0 +1,53 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { MainNavigation, init_MainNavigation } from "../MainNavigation.js";
+import { Button, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@lumeweb/portal-framework-ui-core";
+import { Link } from "@refinedev/core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuIcon } from "lucide-react";
+
+//#region src/components/layout/MobileMenu.tsx
+function MobileMenu() {
+	const [open, setOpen] = React.useState(false);
+	return /* @__PURE__ */ jsxs(Sheet, {
+		onOpenChange: setOpen,
+		open,
+		children: [/* @__PURE__ */ jsx(SheetTrigger, {
+			asChild: true,
+			className: "ml-2 lg:hidden",
+			children: /* @__PURE__ */ jsx(Button, {
+				className: "h-8 w-8",
+				size: "icon",
+				variant: "outline",
+				children: /* @__PURE__ */ jsx(MenuIcon, { size: 18 })
+			})
+		}), /* @__PURE__ */ jsxs(SheetContent, {
+			className: "flex h-full flex-col px-3 sm:w-72",
+			side: "right",
+			children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(Button, {
+				asChild: true,
+				className: "flex items-center justify-center pb-2 pt-1",
+				variant: "link",
+				children: /* @__PURE__ */ jsx(Link, {
+					className: "flex items-center gap-2",
+					to: "/dashboard",
+					children: /* @__PURE__ */ jsx(SheetTitle, {
+						className: "text-lg font-bold",
+						children: "Portal"
+					})
+				})
+			}) }), /* @__PURE__ */ jsx(MainNavigation, {
+				isOpen: true,
+				onItemClick: () => setOpen(false)
+			})]
+		})]
+	});
+}
+var init_MobileMenu = __esmMin(() => {
+	init_MainNavigation();
+});
+
+//#endregion
+init_MobileMenu();
+export { MobileMenu, init_MobileMenu };
+//# sourceMappingURL=MobileMenu.js.map

package/dist/esm/components/layout/MobileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileMenu.js","names":[],"sources":["../../../../src/components/layout/MobileMenu.tsx"],"sourcesContent":["import {\n  Button,\n  Sheet,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { Link } from \"@refinedev/core\";\nimport { MenuIcon } from \"lucide-react\";\nimport React from \"react\";\n\nimport { MainNavigation } from \"@/components/MainNavigation\";\n\nexport function MobileMenu() {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Sheet onOpenChange={setOpen} open={open}>\n      <SheetTrigger asChild className=\"ml-2 lg:hidden\">\n        <Button className=\"h-8 w-8\" size=\"icon\" variant=\"outline\">\n          <MenuIcon size={18} />\n        </Button>\n      </SheetTrigger>\n      <SheetContent className=\"flex h-full flex-col px-3 sm:w-72\" side=\"right\">\n        <SheetHeader>\n          <Button\n            asChild\n            className=\"flex items-center justify-center pb-2 pt-1\"\n            variant=\"link\">\n            <Link className=\"flex items-center gap-2\" to=\"/dashboard\">\n              <SheetTitle className=\"text-lg font-bold\">Portal</SheetTitle>\n            </Link>\n          </Button>\n        </SheetHeader>\n        <MainNavigation isOpen onItemClick={() => setOpen(false)} />\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,aAAa;CAC3B,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,MAAM;AAE7C,QACE,qBAAC;EAAM,cAAc;EAAe;aAClC,oBAAC;GAAa;GAAQ,WAAU;aAC9B,oBAAC;IAAO,WAAU;IAAU,MAAK;IAAO,SAAQ;cAC9C,oBAAC,YAAS,MAAM,KAAM;KACf;IACI,EACf,qBAAC;GAAa,WAAU;GAAoC,MAAK;cAC/D,oBAAC,yBACC,oBAAC;IACC;IACA,WAAU;IACV,SAAQ;cACR,oBAAC;KAAK,WAAU;KAA0B,IAAG;eAC3C,oBAAC;MAAW,WAAU;gBAAoB;OAAmB;MACxD;KACA,GACG,EACd,oBAAC;IAAe;IAAO,mBAAmB,QAAQ,MAAM;KAAI;IAC/C;GACT;;;sBAzBiD"}

package/dist/esm/components/layout/PageHeader.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+
+//#region src/components/layout/PageHeader.d.ts
+interface PageHeaderProps {
+  children?: React.ReactNode;
+  description: string;
+  title: string;
+}
+declare function PageHeader({
+  children,
+  description,
+  title
+}: PageHeaderProps): any;
+//#endregion
+export { PageHeader };
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/esm/components/layout/PageHeader.js

@@ -0,0 +1,23 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/layout/PageHeader.tsx
+function PageHeader({ children, description, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+			className: "text-2xl font-semibold text-white",
+			children: title
+		}), /* @__PURE__ */ jsx("p", {
+			className: "mt-1 text-gray-400",
+			children: description
+		})] }), children]
+	});
+}
+var init_PageHeader = __esmMin(() => {});
+
+//#endregion
+init_PageHeader();
+export { PageHeader, init_PageHeader };
+//# sourceMappingURL=PageHeader.js.map

package/dist/esm/components/layout/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","names":[],"sources":["../../../../src/components/layout/PageHeader.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface PageHeaderProps {\n  children?: React.ReactNode;\n  description: string;\n  title: string;\n}\n\nexport function PageHeader({ children, description, title }: PageHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div>\n        <h1 className=\"text-2xl font-semibold text-white\">{title}</h1>\n        <p className=\"mt-1 text-gray-400\">{description}</p>\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAQA,SAAgB,WAAW,EAAE,UAAU,aAAa,SAA0B;AAC5E,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC,oBACC,oBAAC;GAAG,WAAU;aAAqC;IAAW,EAC9D,oBAAC;GAAE,WAAU;aAAsB;IAAgB,IAC/C,EACL;GACG"}

package/dist/esm/components/layout/SidebarContext.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+
+//#region src/components/layout/SidebarContext.d.ts
+declare const SidebarProvider: React.FC<{
+  children: React.ReactNode;
+}>;
+declare const useSidebarContext: () => any;
+//#endregion
+export { SidebarProvider, useSidebarContext };
+//# sourceMappingURL=SidebarContext.d.ts.map

package/dist/esm/components/layout/SidebarContext.js

@@ -0,0 +1,32 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import React, { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/SidebarContext.tsx
+var SidebarContext, SidebarProvider, useSidebarContext;
+var init_SidebarContext = __esmMin(() => {
+	SidebarContext = createContext(void 0);
+	SidebarProvider = ({ children }) => {
+		const [isCollapsed, setIsCollapsed] = useState(false);
+		const toggleCollapsed = () => {
+			setIsCollapsed(!isCollapsed);
+		};
+		return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+			value: {
+				isCollapsed,
+				toggleCollapsed
+			},
+			children
+		});
+	};
+	useSidebarContext = () => {
+		const context = useContext(SidebarContext);
+		if (!context) throw new Error("useSidebarContext must be used within a SidebarProvider");
+		return context;
+	};
+});
+
+//#endregion
+init_SidebarContext();
+export { SidebarProvider, init_SidebarContext, useSidebarContext };
+//# sourceMappingURL=SidebarContext.js.map

package/dist/esm/components/layout/SidebarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.js","names":[],"sources":["../../../../src/components/layout/SidebarContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\n\ninterface SidebarContextType {\n  isCollapsed: boolean;\n  toggleCollapsed: () => void;\n}\n\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined);\n\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const toggleCollapsed = () => {\n    setIsCollapsed(!isCollapsed);\n  };\n\n  return (\n    <SidebarContext.Provider value={{ isCollapsed, toggleCollapsed }}>\n      {children}\n    </SidebarContext.Provider>\n  );\n};\n\nexport const useSidebarContext = () => {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebarContext must be used within a SidebarProvider\");\n  }\n  return context;\n};\n"],"mappings":";;;;;;;CAOM,iBAAiB,cAA8C,OAAU;CAElE,mBAA4D,EACvE,eACI;EACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;EAErD,MAAM,wBAAwB;AAC5B,kBAAe,CAAC,YAAY;;AAG9B,SACE,oBAAC,eAAe;GAAS,OAAO;IAAE;IAAa;IAAiB;GAC7D;IACuB;;CAIjB,0BAA0B;EACrC,MAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,CAAC,QACH,OAAM,IAAI,MAAM,0DAA0D;AAE5E,SAAO"}

package/dist/esm/components/layout/SidebarToggle.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/layout/SidebarToggle.d.ts
+interface SidebarToggleProps {
+  isOpen: boolean | undefined;
+  setIsOpen?: () => void;
+}
+declare function SidebarToggle({
+  isOpen,
+  setIsOpen
+}: SidebarToggleProps): any;
+//#endregion
+export { SidebarToggle };
+//# sourceMappingURL=SidebarToggle.d.ts.map

package/dist/esm/components/layout/SidebarToggle.js

@@ -0,0 +1,26 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { Button, cn } from "@lumeweb/portal-framework-ui-core";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ChevronLeft } from "lucide-react";
+
+//#region src/components/layout/SidebarToggle.tsx
+function SidebarToggle({ isOpen, setIsOpen }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "invisible absolute -right-[20px] top-[12px] z-20 lg:visible",
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": isOpen ? "Close sidebar" : "Open sidebar",
+			className: "h-8 w-8 rounded-md",
+			onClick: () => setIsOpen?.(),
+			size: "icon",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(ChevronLeft, { className: cn("h-4 w-4 transition-transform duration-700 ease-in-out", isOpen === false ? "rotate-180" : "rotate-0") })
+		})
+	});
+}
+var init_SidebarToggle = __esmMin(() => {});
+
+//#endregion
+init_SidebarToggle();
+export { SidebarToggle, init_SidebarToggle };
+//# sourceMappingURL=SidebarToggle.js.map

package/dist/esm/components/layout/SidebarToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.js","names":[],"sources":["../../../../src/components/layout/SidebarToggle.tsx"],"sourcesContent":["import { Button, cn } from \"@lumeweb/portal-framework-ui-core\";\nimport { ChevronLeft } from \"lucide-react\";\nimport React from \"react\";\n\ninterface SidebarToggleProps {\n  isOpen: boolean | undefined;\n  setIsOpen?: () => void;\n}\n\nexport function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) {\n  return (\n    <div className=\"invisible absolute -right-[20px] top-[12px] z-20 lg:visible\">\n      <Button\n        aria-label={isOpen ? \"Close sidebar\" : \"Open sidebar\"}\n        className=\"h-8 w-8 rounded-md\"\n        onClick={() => setIsOpen?.()}\n        size=\"icon\"\n        variant=\"outline\">\n        <ChevronLeft\n          className={cn(\n            \"h-4 w-4 transition-transform duration-700 ease-in-out\",\n            isOpen === false ? \"rotate-180\" : \"rotate-0\",\n          )}\n        />\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,cAAc,EAAE,QAAQ,aAAiC;AACvE,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GACC,cAAY,SAAS,kBAAkB;GACvC,WAAU;GACV,eAAe,aAAa;GAC5B,MAAK;GACL,SAAQ;aACR,oBAAC,eACC,WAAW,GACT,yDACA,WAAW,QAAQ,eAAe,WACnC,GACD;IACK;GACL"}

package/dist/esm/components/layout/UserNav.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/layout/UserNav.d.ts
+declare function UserNav(): any;
+//#endregion
+export { UserNav };
+//# sourceMappingURL=UserNav.d.ts.map

package/dist/esm/components/layout/UserNav.js

@@ -0,0 +1,115 @@
+"use client";
+
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { init_useAvatar, useAvatar } from "../../hooks/useAvatar.js";
+import { Avatar, AvatarFallback, AvatarImage, Button, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@lumeweb/portal-framework-ui-core";
+import { Link, useGetIdentity, useLogout } from "@refinedev/core";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LayoutGrid, LogOut, User } from "lucide-react";
+
+//#region src/components/layout/UserNav.tsx
+function UserNav() {
+	const { mutate: logout } = useLogout();
+	const { data: identity } = useGetIdentity();
+	const { avatarUrl, displayName, isLoading } = useAvatar();
+	const firstName = identity?.firstName || "";
+	const lastName = identity?.lastName || "";
+	const email = identity?.email || "";
+	const getAvatarAltText = () => {
+		if (isLoading) return "User avatar";
+		if (displayName) return displayName;
+		return "";
+	};
+	const getAvatarFallback = () => {
+		if (isLoading) return "?";
+		if (firstName || lastName) return (firstName || lastName).charAt(0).toUpperCase();
+		if (email) return email.charAt(0).toUpperCase();
+		return "?";
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(TooltipProvider, {
+		disableHoverableContent: true,
+		children: /* @__PURE__ */ jsxs(Tooltip, {
+			delayDuration: 100,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": isLoading ? "User avatar" : displayName || "User profile",
+						className: "relative h-8 w-8 rounded-full",
+						variant: "outline",
+						children: /* @__PURE__ */ jsxs(Avatar, {
+							className: "h-8 w-8",
+							children: [/* @__PURE__ */ jsx(AvatarImage, {
+								alt: getAvatarAltText(),
+								src: avatarUrl
+							}), /* @__PURE__ */ jsx(AvatarFallback, {
+								className: "bg-transparent",
+								children: getAvatarFallback()
+							})]
+						})
+					})
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "bottom",
+				children: "Profile"
+			})]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "w-56",
+		forceMount: true,
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "font-normal",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col space-y-1",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-sm font-medium leading-none",
+						children: [
+							firstName,
+							" ",
+							lastName
+						]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs leading-none",
+						children: email
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+				asChild: true,
+				className: "hover:cursor-pointer",
+				children: /* @__PURE__ */ jsxs(Link, {
+					className: "flex items-center",
+					to: "/dashboard",
+					children: [/* @__PURE__ */ jsx(LayoutGrid, { className: "text-muted-foreground mr-3 h-4 w-4" }), "Dashboard"]
+				})
+			}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+				asChild: true,
+				className: "hover:cursor-pointer",
+				children: /* @__PURE__ */ jsxs(Link, {
+					className: "flex items-center",
+					to: "/account",
+					children: [/* @__PURE__ */ jsx(User, { className: "text-muted-foreground mr-3 h-4 w-4" }), "Account"]
+				})
+			})] }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "hover:cursor-pointer",
+				onClick: () => logout(),
+				children: [/* @__PURE__ */ jsx(LogOut, { className: "text-muted-foreground mr-3 h-4 w-4" }), "Sign out"]
+			})
+		]
+	})] });
+}
+var init_UserNav = __esmMin(() => {
+	init_useAvatar();
+});
+
+//#endregion
+init_UserNav();
+export { UserNav, init_UserNav };
+//# sourceMappingURL=UserNav.js.map

package/dist/esm/components/layout/UserNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserNav.js","names":[],"sources":["../../../../src/components/layout/UserNav.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Identity } from \"@lumeweb/portal-framework-core\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Button,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@lumeweb/portal-framework-ui-core\";\nimport { Link, useGetIdentity, useLogout } from \"@refinedev/core\";\nimport { LayoutGrid, LogOut, User } from \"lucide-react\";\nimport React from \"react\";\n\nimport { useAvatar } from \"@/hooks/useAvatar\";\n\nexport function UserNav() {\n  const { mutate: logout } = useLogout();\n  const { data: identity } = useGetIdentity<Identity>();\n  const { avatarUrl, displayName, isLoading } = useAvatar();\n\n  const firstName = identity?.firstName || \"\";\n  const lastName = identity?.lastName || \"\";\n  const email = identity?.email || \"\";\n\n  const getAvatarAltText = () => {\n    if (isLoading) {\n      return \"User avatar\";\n    }\n\n    if (displayName) {\n      return displayName;\n    }\n\n    return \"\";\n  };\n\n  const getAvatarFallback = () => {\n    if (isLoading) {\n      return \"?\";\n    }\n\n    if (firstName || lastName) {\n      return (firstName || lastName).charAt(0).toUpperCase();\n    }\n\n    if (email) {\n      return email.charAt(0).toUpperCase();\n    }\n\n    return \"?\";\n  };\n\n  return (\n    <DropdownMenu>\n      <TooltipProvider disableHoverableContent>\n        <Tooltip delayDuration={100}>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <Button\n                aria-label={\n                  isLoading ? \"User avatar\" : displayName || \"User profile\"\n                }\n                className=\"relative h-8 w-8 rounded-full\"\n                variant=\"outline\">\n                <Avatar className=\"h-8 w-8\">\n                  <AvatarImage alt={getAvatarAltText()} src={avatarUrl} />\n                  <AvatarFallback className=\"bg-transparent\">\n                    {getAvatarFallback()}\n                  </AvatarFallback>\n                </Avatar>\n              </Button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">Profile</TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n\n      <DropdownMenuContent align=\"end\" className=\"w-56\" forceMount>\n        <DropdownMenuLabel className=\"font-normal\">\n          <div className=\"flex flex-col space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              {firstName} {lastName}\n            </p>\n            <p className=\"text-muted-foreground text-xs leading-none\">\n              {email}\n            </p>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem asChild className=\"hover:cursor-pointer\">\n            <Link className=\"flex items-center\" to=\"/dashboard\">\n              <LayoutGrid className=\"text-muted-foreground mr-3 h-4 w-4\" />\n              Dashboard\n            </Link>\n          </DropdownMenuItem>\n          <DropdownMenuItem asChild className=\"hover:cursor-pointer\">\n            <Link className=\"flex items-center\" to=\"/account\">\n              <User className=\"text-muted-foreground mr-3 h-4 w-4\" />\n              Account\n            </Link>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem\n          className=\"hover:cursor-pointer\"\n          onClick={() => logout()}>\n          <LogOut className=\"text-muted-foreground mr-3 h-4 w-4\" />\n          Sign out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA2BA,SAAgB,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,WAAW;CACtC,MAAM,EAAE,MAAM,aAAa,gBAA0B;CACrD,MAAM,EAAE,WAAW,aAAa,cAAc,WAAW;CAEzD,MAAM,YAAY,UAAU,aAAa;CACzC,MAAM,WAAW,UAAU,YAAY;CACvC,MAAM,QAAQ,UAAU,SAAS;CAEjC,MAAM,yBAAyB;AAC7B,MAAI,UACF,QAAO;AAGT,MAAI,YACF,QAAO;AAGT,SAAO;;CAGT,MAAM,0BAA0B;AAC9B,MAAI,UACF,QAAO;AAGT,MAAI,aAAa,SACf,SAAQ,aAAa,UAAU,OAAO,EAAE,CAAC,aAAa;AAGxD,MAAI,MACF,QAAO,MAAM,OAAO,EAAE,CAAC,aAAa;AAGtC,SAAO;;AAGT,QACE,qBAAC,2BACC,oBAAC;EAAgB;YACf,qBAAC;GAAQ,eAAe;cACtB,oBAAC;IAAe;cACd,oBAAC;KAAoB;eACnB,oBAAC;MACC,cACE,YAAY,gBAAgB,eAAe;MAE7C,WAAU;MACV,SAAQ;gBACR,qBAAC;OAAO,WAAU;kBAChB,oBAAC;QAAY,KAAK,kBAAkB;QAAE,KAAK;SAAa,EACxD,oBAAC;QAAe,WAAU;kBACvB,mBAAmB;SACL;QACV;OACF;MACW;KACP,EACjB,oBAAC;IAAe,MAAK;cAAS;KAAwB;IAC9C;GACM,EAElB,qBAAC;EAAoB,OAAM;EAAM,WAAU;EAAO;;GAChD,oBAAC;IAAkB,WAAU;cAC3B,qBAAC;KAAI,WAAU;gBACb,qBAAC;MAAE,WAAU;;OACV;OAAU;OAAE;;OACX,EACJ,oBAAC;MAAE,WAAU;gBACV;OACC;MACA;KACY;GACpB,oBAAC,0BAAwB;GACzB,qBAAC,gCACC,oBAAC;IAAiB;IAAQ,WAAU;cAClC,qBAAC;KAAK,WAAU;KAAoB,IAAG;gBACrC,oBAAC,cAAW,WAAU,uCAAuC;MAExD;KACU,EACnB,oBAAC;IAAiB;IAAQ,WAAU;cAClC,qBAAC;KAAK,WAAU;KAAoB,IAAG;gBACrC,oBAAC,QAAK,WAAU,uCAAuC;MAElD;KACU,IACD;GACpB,oBAAC,0BAAwB;GACzB,qBAAC;IACC,WAAU;IACV,eAAe,QAAQ;eACvB,oBAAC,UAAO,WAAU,uCAAuC;KAExC;;GACC,IACT;;;iBAlG2B"}

package/dist/esm/components/layout/index.d.ts

@@ -0,0 +1,7 @@
+import { UserNav } from "./UserNav.js";
+import { MobileMenu } from "./MobileMenu.js";
+import { PageHeader } from "./PageHeader.js";
+import { SidebarProvider, useSidebarContext } from "./SidebarContext.js";
+import { SidebarToggle } from "./SidebarToggle.js";
+import { GeneralLayout } from "./GeneralLayout.js";
+export { GeneralLayout, MobileMenu, PageHeader, SidebarProvider, SidebarToggle, UserNav, useSidebarContext };

package/dist/esm/components/layout/index.js

@@ -0,0 +1,24 @@
+import { __esmMin } from "../../_virtual/rolldown_runtime.js";
+import { SidebarProvider, init_SidebarContext, useSidebarContext } from "./SidebarContext.js";
+import { SidebarToggle, init_SidebarToggle } from "./SidebarToggle.js";
+import { init_DesktopSidebar } from "./DesktopSidebar.js";
+import { UserNav, init_UserNav } from "./UserNav.js";
+import { MobileMenu, init_MobileMenu } from "./MobileMenu.js";
+import { PageHeader, init_PageHeader } from "./PageHeader.js";
+import { GeneralLayout, init_GeneralLayout } from "./GeneralLayout.js";
+
+//#region src/components/layout/index.ts
+var init_layout = __esmMin(() => {
+	init_DesktopSidebar();
+	init_UserNav();
+	init_MobileMenu();
+	init_PageHeader();
+	init_SidebarContext();
+	init_SidebarToggle();
+	init_GeneralLayout();
+});
+
+//#endregion
+init_layout();
+export { GeneralLayout, MobileMenu, PageHeader, SidebarProvider, SidebarToggle, UserNav, init_layout, useSidebarContext };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/index.ts"],"sourcesContent":["export * from \"./DesktopSidebar\";\nexport * from \"./UserNav\";\nexport * from \"./MobileMenu\";\nexport * from \"./PageHeader\";\nexport * from \"./SidebarContext\";\nexport * from \"./SidebarToggle\";\nexport * from \"./GeneralLayout\";\n"],"mappings":""}

package/dist/esm/components/screen-reader/ScreenReaderAnnouncement.d.ts

@@ -0,0 +1,23 @@
+import { useScreenReaderAnnouncement } from "./hooks/useScreenReaderAnnouncement.js";
+
+//#region src/components/screen-reader/ScreenReaderAnnouncement.d.ts
+interface ScreenReaderAnnouncementProps {
+  /**
+   * Optional ID for the announcement region
+   */
+  id?: string;
+}
+/**
+ * ScreenReaderAnnouncement component
+ *
+ * This component creates a visually hidden live region for screen reader announcements.
+ * It should be included once in your application, typically near the top level.
+ *
+ * Use the useScreenReaderAnnouncement hook to make announcements.
+ */
+declare function ScreenReaderAnnouncement({
+  id
+}: ScreenReaderAnnouncementProps): any;
+//#endregion
+export { ScreenReaderAnnouncement, useScreenReaderAnnouncement };
+//# sourceMappingURL=ScreenReaderAnnouncement.d.ts.map