@fluid-app/portal-core 0.1.16

package/dist/shell/ThemeModeContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeContext.cjs","names":[],"sources":["../../src/shell/ThemeModeContext.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport {\n  createContext,\n  useContext,\n  useCallback,\n  useMemo,\n  useSyncExternalStore,\n  type ReactNode,\n} from \"react\";\n\nexport type ThemeMode = \"auto\" | \"light\" | \"dark\";\n\nexport type DisplayMode = \"light\" | \"dark\";\n\nexport interface ThemeModeContextValue {\n  mode: ThemeMode;\n  displayMode: DisplayMode;\n  setMode: (mode: ThemeMode) => void;\n  autoModeEnabled: boolean;\n  cycleMode: () => void;\n  dataAttribute: string | undefined;\n}\n\nconst ThemeModeContext = createContext<ThemeModeContextValue | null>(null);\n\nconst darkMediaQuery =\n  typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\")\n    : null;\n\nfunction subscribeToPrefersColorScheme(callback: () => void) {\n  darkMediaQuery?.addEventListener(\"change\", callback);\n  return () => darkMediaQuery?.removeEventListener(\"change\", callback);\n}\n\nfunction getSystemPrefersDark(): boolean {\n  return darkMediaQuery?.matches ?? false;\n}\n\nfunction getServerSnapshot(): boolean {\n  return false;\n}\n\ninterface ThemeModeProviderProps {\n  children: ReactNode;\n  mode: ThemeMode;\n  onModeChange: (mode: ThemeMode) => void;\n  /** When false, auto mode is skipped in the cycle (light↔dark only). Default true. */\n  autoModeEnabled?: boolean;\n}\n\nexport function ThemeModeProvider({\n  children,\n  mode,\n  onModeChange,\n  autoModeEnabled = true,\n}: ThemeModeProviderProps): React.JSX.Element {\n  const systemPrefersDark = useSyncExternalStore(\n    subscribeToPrefersColorScheme,\n    getSystemPrefersDark,\n    getServerSnapshot,\n  );\n\n  const systemMode: DisplayMode = systemPrefersDark ? \"dark\" : \"light\";\n\n  const displayMode: DisplayMode = mode === \"auto\" ? systemMode : mode;\n\n  const cycleMode = useCallback(() => {\n    if (autoModeEnabled) {\n      // Toggle displayed mode. If target matches system preference, use \"auto\".\n      const target: DisplayMode = displayMode === \"light\" ? \"dark\" : \"light\";\n      onModeChange(target === systemMode ? \"auto\" : target);\n    } else {\n      // light ↔ dark\n      onModeChange(mode === \"light\" ? \"dark\" : \"light\");\n    }\n  }, [mode, displayMode, systemMode, onModeChange, autoModeEnabled]);\n\n  const dataAttribute = getThemeModeAttribute(mode);\n\n  const value = useMemo(\n    () => ({\n      mode,\n      displayMode,\n      setMode: onModeChange,\n      autoModeEnabled,\n      cycleMode,\n      dataAttribute,\n    }),\n    [\n      mode,\n      displayMode,\n      onModeChange,\n      autoModeEnabled,\n      cycleMode,\n      dataAttribute,\n    ],\n  );\n\n  return (\n    <ThemeModeContext.Provider value={value}>\n      {children}\n    </ThemeModeContext.Provider>\n  );\n}\n\n/** Access the current theme mode, setter, and cycle helper. Must be used within a `ThemeModeProvider`. */\nexport function useThemeMode(): ThemeModeContextValue {\n  const ctx = useContext(ThemeModeContext);\n  if (!ctx) {\n    throw new Error(\"useThemeMode must be used within a ThemeModeProvider\");\n  }\n  return ctx;\n}\n\n/** Maps a ThemeMode to the value for `data-theme-mode`. Returns undefined for \"auto\". */\nexport function getThemeModeAttribute(mode: ThemeMode): string | undefined {\n  return mode === \"auto\" ? undefined : mode;\n}\n"],"mappings":";;;;;;AAyBA,MAAM,oBAAA,GAAA,MAAA,eAA+D,KAAK;AAE1E,MAAM,iBACJ,OAAO,WAAW,cACd,OAAO,WAAW,+BAA+B,GACjD;AAEN,SAAS,8BAA8B,UAAsB;AAC3D,iBAAgB,iBAAiB,UAAU,SAAS;AACpD,cAAa,gBAAgB,oBAAoB,UAAU,SAAS;;AAGtE,SAAS,uBAAgC;AACvC,QAAO,gBAAgB,WAAW;;AAGpC,SAAS,oBAA6B;AACpC,QAAO;;AAWT,SAAgB,kBAAkB,EAChC,UACA,MACA,cACA,kBAAkB,QAC0B;CAO5C,MAAM,cAAA,GAAA,MAAA,sBALJ,+BACA,sBACA,kBACD,GAEmD,SAAS;CAE7D,MAAM,cAA2B,SAAS,SAAS,aAAa;CAEhE,MAAM,aAAA,GAAA,MAAA,mBAA8B;AAClC,MAAI,iBAAiB;GAEnB,MAAM,SAAsB,gBAAgB,UAAU,SAAS;AAC/D,gBAAa,WAAW,aAAa,SAAS,OAAO;QAGrD,cAAa,SAAS,UAAU,SAAS,QAAQ;IAElD;EAAC;EAAM;EAAa;EAAY;EAAc;EAAgB,CAAC;CAElE,MAAM,gBAAgB,sBAAsB,KAAK;CAEjD,MAAM,SAAA,GAAA,MAAA,gBACG;EACL;EACA;EACA,SAAS;EACT;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAiB,UAAlB;EAAkC;EAC/B;EACyB,CAAA;;;AAKhC,SAAgB,eAAsC;CACpD,MAAM,OAAA,GAAA,MAAA,YAAiB,iBAAiB;AACxC,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,uDAAuD;AAEzE,QAAO;;;AAIT,SAAgB,sBAAsB,MAAqC;AACzE,QAAO,SAAS,SAAS,KAAA,IAAY"}

package/dist/shell/ThemeModeContext.d.cts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+
+//#region src/shell/ThemeModeContext.d.ts
+type ThemeMode = "auto" | "light" | "dark";
+type DisplayMode = "light" | "dark";
+interface ThemeModeContextValue {
+  mode: ThemeMode;
+  displayMode: DisplayMode;
+  setMode: (mode: ThemeMode) => void;
+  autoModeEnabled: boolean;
+  cycleMode: () => void;
+  dataAttribute: string | undefined;
+}
+interface ThemeModeProviderProps {
+  children: ReactNode;
+  mode: ThemeMode;
+  onModeChange: (mode: ThemeMode) => void;
+  /** When false, auto mode is skipped in the cycle (light↔dark only). Default true. */
+  autoModeEnabled?: boolean;
+}
+declare function ThemeModeProvider({
+  children,
+  mode,
+  onModeChange,
+  autoModeEnabled
+}: ThemeModeProviderProps): React.JSX.Element;
+/** Access the current theme mode, setter, and cycle helper. Must be used within a `ThemeModeProvider`. */
+declare function useThemeMode(): ThemeModeContextValue;
+/** Maps a ThemeMode to the value for `data-theme-mode`. Returns undefined for "auto". */
+declare function getThemeModeAttribute(mode: ThemeMode): string | undefined;
+//#endregion
+export { DisplayMode, ThemeMode, ThemeModeContextValue, ThemeModeProvider, getThemeModeAttribute, useThemeMode };
+//# sourceMappingURL=ThemeModeContext.d.cts.map

package/dist/shell/ThemeModeContext.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeContext.d.cts","names":[],"sources":["../../src/shell/ThemeModeContext.tsx"],"mappings":";;;KAYY,SAAA;AAAA,KAEA,WAAA;AAAA,UAEK,qBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,WAAA;EACb,OAAA,GAAU,IAAA,EAAM,SAAA;EAChB,eAAA;EACA,SAAA;EACA,aAAA;AAAA;AAAA,UAuBQ,sBAAA;EACR,QAAA,EAAU,SAAA;EACV,IAAA,EAAM,SAAA;EACN,YAAA,GAAe,IAAA,EAAM,SAAA;;EAErB,eAAA;AAAA;AAAA,iBAGc,iBAAA,CAAA;EACd,QAAA;EACA,IAAA;EACA,YAAA;EACA;AAAA,GACC,sBAAA,GAAyB,KAAA,CAAM,GAAA,CAAI,OAAA;;iBAmDtB,YAAA,CAAA,GAAgB,qBAAA;;iBAShB,qBAAA,CAAsB,IAAA,EAAM,SAAA"}

package/dist/shell/ThemeModeContext.d.mts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+
+//#region src/shell/ThemeModeContext.d.ts
+type ThemeMode = "auto" | "light" | "dark";
+type DisplayMode = "light" | "dark";
+interface ThemeModeContextValue {
+  mode: ThemeMode;
+  displayMode: DisplayMode;
+  setMode: (mode: ThemeMode) => void;
+  autoModeEnabled: boolean;
+  cycleMode: () => void;
+  dataAttribute: string | undefined;
+}
+interface ThemeModeProviderProps {
+  children: ReactNode;
+  mode: ThemeMode;
+  onModeChange: (mode: ThemeMode) => void;
+  /** When false, auto mode is skipped in the cycle (light↔dark only). Default true. */
+  autoModeEnabled?: boolean;
+}
+declare function ThemeModeProvider({
+  children,
+  mode,
+  onModeChange,
+  autoModeEnabled
+}: ThemeModeProviderProps): React.JSX.Element;
+/** Access the current theme mode, setter, and cycle helper. Must be used within a `ThemeModeProvider`. */
+declare function useThemeMode(): ThemeModeContextValue;
+/** Maps a ThemeMode to the value for `data-theme-mode`. Returns undefined for "auto". */
+declare function getThemeModeAttribute(mode: ThemeMode): string | undefined;
+//#endregion
+export { DisplayMode, ThemeMode, ThemeModeContextValue, ThemeModeProvider, getThemeModeAttribute, useThemeMode };
+//# sourceMappingURL=ThemeModeContext.d.mts.map

package/dist/shell/ThemeModeContext.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeContext.d.mts","names":[],"sources":["../../src/shell/ThemeModeContext.tsx"],"mappings":";;;KAYY,SAAA;AAAA,KAEA,WAAA;AAAA,UAEK,qBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,WAAA;EACb,OAAA,GAAU,IAAA,EAAM,SAAA;EAChB,eAAA;EACA,SAAA;EACA,aAAA;AAAA;AAAA,UAuBQ,sBAAA;EACR,QAAA,EAAU,SAAA;EACV,IAAA,EAAM,SAAA;EACN,YAAA,GAAe,IAAA,EAAM,SAAA;;EAErB,eAAA;AAAA;AAAA,iBAGc,iBAAA,CAAA;EACd,QAAA;EACA,IAAA;EACA,YAAA;EACA;AAAA,GACC,sBAAA,GAAyB,KAAA,CAAM,GAAA,CAAI,OAAA;;iBAmDtB,YAAA,CAAA,GAAgB,qBAAA;;iBAShB,qBAAA,CAAsB,IAAA,EAAM,SAAA"}

package/dist/shell/ThemeModeContext.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { createContext, useCallback, useContext, useMemo, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/shell/ThemeModeContext.tsx
+const ThemeModeContext = createContext(null);
+const darkMediaQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+function subscribeToPrefersColorScheme(callback) {
+	darkMediaQuery?.addEventListener("change", callback);
+	return () => darkMediaQuery?.removeEventListener("change", callback);
+}
+function getSystemPrefersDark() {
+	return darkMediaQuery?.matches ?? false;
+}
+function getServerSnapshot() {
+	return false;
+}
+function ThemeModeProvider({ children, mode, onModeChange, autoModeEnabled = true }) {
+	const systemMode = useSyncExternalStore(subscribeToPrefersColorScheme, getSystemPrefersDark, getServerSnapshot) ? "dark" : "light";
+	const displayMode = mode === "auto" ? systemMode : mode;
+	const cycleMode = useCallback(() => {
+		if (autoModeEnabled) {
+			const target = displayMode === "light" ? "dark" : "light";
+			onModeChange(target === systemMode ? "auto" : target);
+		} else onModeChange(mode === "light" ? "dark" : "light");
+	}, [
+		mode,
+		displayMode,
+		systemMode,
+		onModeChange,
+		autoModeEnabled
+	]);
+	const dataAttribute = getThemeModeAttribute(mode);
+	const value = useMemo(() => ({
+		mode,
+		displayMode,
+		setMode: onModeChange,
+		autoModeEnabled,
+		cycleMode,
+		dataAttribute
+	}), [
+		mode,
+		displayMode,
+		onModeChange,
+		autoModeEnabled,
+		cycleMode,
+		dataAttribute
+	]);
+	return /* @__PURE__ */ jsx(ThemeModeContext.Provider, {
+		value,
+		children
+	});
+}
+/** Access the current theme mode, setter, and cycle helper. Must be used within a `ThemeModeProvider`. */
+function useThemeMode() {
+	const ctx = useContext(ThemeModeContext);
+	if (!ctx) throw new Error("useThemeMode must be used within a ThemeModeProvider");
+	return ctx;
+}
+/** Maps a ThemeMode to the value for `data-theme-mode`. Returns undefined for "auto". */
+function getThemeModeAttribute(mode) {
+	return mode === "auto" ? void 0 : mode;
+}
+//#endregion
+export { ThemeModeProvider, getThemeModeAttribute, useThemeMode };
+
+//# sourceMappingURL=ThemeModeContext.mjs.map

package/dist/shell/ThemeModeContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeContext.mjs","names":[],"sources":["../../src/shell/ThemeModeContext.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport {\n  createContext,\n  useContext,\n  useCallback,\n  useMemo,\n  useSyncExternalStore,\n  type ReactNode,\n} from \"react\";\n\nexport type ThemeMode = \"auto\" | \"light\" | \"dark\";\n\nexport type DisplayMode = \"light\" | \"dark\";\n\nexport interface ThemeModeContextValue {\n  mode: ThemeMode;\n  displayMode: DisplayMode;\n  setMode: (mode: ThemeMode) => void;\n  autoModeEnabled: boolean;\n  cycleMode: () => void;\n  dataAttribute: string | undefined;\n}\n\nconst ThemeModeContext = createContext<ThemeModeContextValue | null>(null);\n\nconst darkMediaQuery =\n  typeof window !== \"undefined\"\n    ? window.matchMedia(\"(prefers-color-scheme: dark)\")\n    : null;\n\nfunction subscribeToPrefersColorScheme(callback: () => void) {\n  darkMediaQuery?.addEventListener(\"change\", callback);\n  return () => darkMediaQuery?.removeEventListener(\"change\", callback);\n}\n\nfunction getSystemPrefersDark(): boolean {\n  return darkMediaQuery?.matches ?? false;\n}\n\nfunction getServerSnapshot(): boolean {\n  return false;\n}\n\ninterface ThemeModeProviderProps {\n  children: ReactNode;\n  mode: ThemeMode;\n  onModeChange: (mode: ThemeMode) => void;\n  /** When false, auto mode is skipped in the cycle (light↔dark only). Default true. */\n  autoModeEnabled?: boolean;\n}\n\nexport function ThemeModeProvider({\n  children,\n  mode,\n  onModeChange,\n  autoModeEnabled = true,\n}: ThemeModeProviderProps): React.JSX.Element {\n  const systemPrefersDark = useSyncExternalStore(\n    subscribeToPrefersColorScheme,\n    getSystemPrefersDark,\n    getServerSnapshot,\n  );\n\n  const systemMode: DisplayMode = systemPrefersDark ? \"dark\" : \"light\";\n\n  const displayMode: DisplayMode = mode === \"auto\" ? systemMode : mode;\n\n  const cycleMode = useCallback(() => {\n    if (autoModeEnabled) {\n      // Toggle displayed mode. If target matches system preference, use \"auto\".\n      const target: DisplayMode = displayMode === \"light\" ? \"dark\" : \"light\";\n      onModeChange(target === systemMode ? \"auto\" : target);\n    } else {\n      // light ↔ dark\n      onModeChange(mode === \"light\" ? \"dark\" : \"light\");\n    }\n  }, [mode, displayMode, systemMode, onModeChange, autoModeEnabled]);\n\n  const dataAttribute = getThemeModeAttribute(mode);\n\n  const value = useMemo(\n    () => ({\n      mode,\n      displayMode,\n      setMode: onModeChange,\n      autoModeEnabled,\n      cycleMode,\n      dataAttribute,\n    }),\n    [\n      mode,\n      displayMode,\n      onModeChange,\n      autoModeEnabled,\n      cycleMode,\n      dataAttribute,\n    ],\n  );\n\n  return (\n    <ThemeModeContext.Provider value={value}>\n      {children}\n    </ThemeModeContext.Provider>\n  );\n}\n\n/** Access the current theme mode, setter, and cycle helper. Must be used within a `ThemeModeProvider`. */\nexport function useThemeMode(): ThemeModeContextValue {\n  const ctx = useContext(ThemeModeContext);\n  if (!ctx) {\n    throw new Error(\"useThemeMode must be used within a ThemeModeProvider\");\n  }\n  return ctx;\n}\n\n/** Maps a ThemeMode to the value for `data-theme-mode`. Returns undefined for \"auto\". */\nexport function getThemeModeAttribute(mode: ThemeMode): string | undefined {\n  return mode === \"auto\" ? undefined : mode;\n}\n"],"mappings":";;;;AAyBA,MAAM,mBAAmB,cAA4C,KAAK;AAE1E,MAAM,iBACJ,OAAO,WAAW,cACd,OAAO,WAAW,+BAA+B,GACjD;AAEN,SAAS,8BAA8B,UAAsB;AAC3D,iBAAgB,iBAAiB,UAAU,SAAS;AACpD,cAAa,gBAAgB,oBAAoB,UAAU,SAAS;;AAGtE,SAAS,uBAAgC;AACvC,QAAO,gBAAgB,WAAW;;AAGpC,SAAS,oBAA6B;AACpC,QAAO;;AAWT,SAAgB,kBAAkB,EAChC,UACA,MACA,cACA,kBAAkB,QAC0B;CAO5C,MAAM,aANoB,qBACxB,+BACA,sBACA,kBACD,GAEmD,SAAS;CAE7D,MAAM,cAA2B,SAAS,SAAS,aAAa;CAEhE,MAAM,YAAY,kBAAkB;AAClC,MAAI,iBAAiB;GAEnB,MAAM,SAAsB,gBAAgB,UAAU,SAAS;AAC/D,gBAAa,WAAW,aAAa,SAAS,OAAO;QAGrD,cAAa,SAAS,UAAU,SAAS,QAAQ;IAElD;EAAC;EAAM;EAAa;EAAY;EAAc;EAAgB,CAAC;CAElE,MAAM,gBAAgB,sBAAsB,KAAK;CAEjD,MAAM,QAAQ,eACL;EACL;EACA;EACA,SAAS;EACT;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,oBAAC,iBAAiB,UAAlB;EAAkC;EAC/B;EACyB,CAAA;;;AAKhC,SAAgB,eAAsC;CACpD,MAAM,MAAM,WAAW,iBAAiB;AACxC,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,uDAAuD;AAEzE,QAAO;;;AAIT,SAAgB,sBAAsB,MAAqC;AACzE,QAAO,SAAS,SAAS,KAAA,IAAY"}

package/dist/shell/index.cjs

@@ -0,0 +1,43 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_shell_use_mobile = require("./use-mobile.cjs");
+const require_shell_sidebar = require("./sidebar.cjs");
+const require_shell_AppShellLayout = require("./AppShellLayout.cjs");
+const require_shell_ScreenHeaderContext = require("./ScreenHeaderContext.cjs");
+const require_shell_ScreenHeader = require("./ScreenHeader.cjs");
+const require_shell_ThemeModeContext = require("./ThemeModeContext.cjs");
+exports.AppShellLayout = require_shell_AppShellLayout.AppShellLayout;
+exports.ScreenHeader = require_shell_ScreenHeader.ScreenHeader;
+exports.ScreenHeaderProvider = require_shell_ScreenHeaderContext.ScreenHeaderProvider;
+exports.Sidebar = require_shell_sidebar.Sidebar;
+exports.SidebarContent = require_shell_sidebar.SidebarContent;
+exports.SidebarContext = require_shell_sidebar.SidebarContext;
+exports.SidebarFooter = require_shell_sidebar.SidebarFooter;
+exports.SidebarGroup = require_shell_sidebar.SidebarGroup;
+exports.SidebarGroupAction = require_shell_sidebar.SidebarGroupAction;
+exports.SidebarGroupContent = require_shell_sidebar.SidebarGroupContent;
+exports.SidebarGroupLabel = require_shell_sidebar.SidebarGroupLabel;
+exports.SidebarHeader = require_shell_sidebar.SidebarHeader;
+exports.SidebarInput = require_shell_sidebar.SidebarInput;
+exports.SidebarInset = require_shell_sidebar.SidebarInset;
+exports.SidebarMenu = require_shell_sidebar.SidebarMenu;
+exports.SidebarMenuAction = require_shell_sidebar.SidebarMenuAction;
+exports.SidebarMenuBadge = require_shell_sidebar.SidebarMenuBadge;
+exports.SidebarMenuButton = require_shell_sidebar.SidebarMenuButton;
+exports.SidebarMenuItem = require_shell_sidebar.SidebarMenuItem;
+exports.SidebarMenuSkeleton = require_shell_sidebar.SidebarMenuSkeleton;
+exports.SidebarMenuSub = require_shell_sidebar.SidebarMenuSub;
+exports.SidebarMenuSubButton = require_shell_sidebar.SidebarMenuSubButton;
+exports.SidebarMenuSubItem = require_shell_sidebar.SidebarMenuSubItem;
+exports.SidebarProvider = require_shell_sidebar.SidebarProvider;
+exports.SidebarRail = require_shell_sidebar.SidebarRail;
+exports.SidebarSeparator = require_shell_sidebar.SidebarSeparator;
+exports.ThemeModeProvider = require_shell_ThemeModeContext.ThemeModeProvider;
+exports.getThemeModeAttribute = require_shell_ThemeModeContext.getThemeModeAttribute;
+exports.useIsMobile = require_shell_use_mobile.useIsMobile;
+exports.useIsMobileOrTablet = require_shell_use_mobile.useIsMobileOrTablet;
+exports.useIsTablet = require_shell_use_mobile.useIsTablet;
+exports.useScreenHeaderActions = require_shell_ScreenHeaderContext.useScreenHeaderActions;
+exports.useScreenHeaderBreadcrumbs = require_shell_ScreenHeaderContext.useScreenHeaderBreadcrumbs;
+exports.useScreenHeaderContext = require_shell_ScreenHeaderContext.useScreenHeaderContext;
+exports.useSidebar = require_shell_sidebar.useSidebar;
+exports.useThemeMode = require_shell_ThemeModeContext.useThemeMode;

package/dist/shell/index.d.cts

@@ -0,0 +1,7 @@
+import { AppShellLayout, AppShellLayoutProps } from "./AppShellLayout.cjs";
+import { ScreenHeader, ScreenHeaderProps } from "./ScreenHeader.cjs";
+import { ScreenHeaderProvider, useScreenHeaderActions, useScreenHeaderBreadcrumbs, useScreenHeaderContext } from "./ScreenHeaderContext.cjs";
+import { DisplayMode, ThemeMode, ThemeModeContextValue, ThemeModeProvider, getThemeModeAttribute, useThemeMode } from "./ThemeModeContext.cjs";
+import { Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, useSidebar } from "./sidebar.cjs";
+import { useIsMobile, useIsMobileOrTablet, useIsTablet } from "./use-mobile.cjs";
+export { AppShellLayout, type AppShellLayoutProps, type DisplayMode, ScreenHeader, type ScreenHeaderProps, ScreenHeaderProvider, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, type ThemeMode, type ThemeModeContextValue, ThemeModeProvider, getThemeModeAttribute, useIsMobile, useIsMobileOrTablet, useIsTablet, useScreenHeaderActions, useScreenHeaderBreadcrumbs, useScreenHeaderContext, useSidebar, useThemeMode };

package/dist/shell/index.d.mts

@@ -0,0 +1,7 @@
+import { AppShellLayout, AppShellLayoutProps } from "./AppShellLayout.mjs";
+import { ScreenHeader, ScreenHeaderProps } from "./ScreenHeader.mjs";
+import { ScreenHeaderProvider, useScreenHeaderActions, useScreenHeaderBreadcrumbs, useScreenHeaderContext } from "./ScreenHeaderContext.mjs";
+import { DisplayMode, ThemeMode, ThemeModeContextValue, ThemeModeProvider, getThemeModeAttribute, useThemeMode } from "./ThemeModeContext.mjs";
+import { Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, useSidebar } from "./sidebar.mjs";
+import { useIsMobile, useIsMobileOrTablet, useIsTablet } from "./use-mobile.mjs";
+export { AppShellLayout, type AppShellLayoutProps, type DisplayMode, ScreenHeader, type ScreenHeaderProps, ScreenHeaderProvider, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, type ThemeMode, type ThemeModeContextValue, ThemeModeProvider, getThemeModeAttribute, useIsMobile, useIsMobileOrTablet, useIsTablet, useScreenHeaderActions, useScreenHeaderBreadcrumbs, useScreenHeaderContext, useSidebar, useThemeMode };

package/dist/shell/index.mjs

@@ -0,0 +1,7 @@
+import { useIsMobile, useIsMobileOrTablet, useIsTablet } from "./use-mobile.mjs";
+import { Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, useSidebar } from "./sidebar.mjs";
+import { AppShellLayout } from "./AppShellLayout.mjs";
+import { ScreenHeaderProvider, useScreenHeaderActions, useScreenHeaderBreadcrumbs, useScreenHeaderContext } from "./ScreenHeaderContext.mjs";
+import { ScreenHeader } from "./ScreenHeader.mjs";
+import { ThemeModeProvider, getThemeModeAttribute, useThemeMode } from "./ThemeModeContext.mjs";
+export { AppShellLayout, ScreenHeader, ScreenHeaderProvider, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, ThemeModeProvider, getThemeModeAttribute, useIsMobile, useIsMobileOrTablet, useIsTablet, useScreenHeaderActions, useScreenHeaderBreadcrumbs, useScreenHeaderContext, useSidebar, useThemeMode };

package/dist/shell/sidebar.cjs

@@ -0,0 +1,390 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-CKQMccvm.cjs");
+const require_shell_use_mobile = require("./use-mobile.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let class_variance_authority = require("class-variance-authority");
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+//#region src/shell/sidebar.tsx
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "separator",
+		"aria-orientation": orientation,
+		className: cn("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		...props
+	});
+}
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("bg-muted animate-pulse rounded-md", className),
+		...props
+	});
+}
+const SIDEBAR_WIDTH = "13rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = react.createContext(null);
+function useSidebar() {
+	const context = react.useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+}
+const SidebarProvider = react.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, viewportWidth, previewMode, useBottomNav: useBottomNavProp = false, className, style, children, ...props }, ref) => {
+	const windowIsMobile = require_shell_use_mobile.useIsMobile();
+	const isMobile = viewportWidth !== void 0 ? viewportWidth < 768 : windowIsMobile;
+	const isPreviewMode = viewportWidth !== void 0 || !!previewMode;
+	const [openMobile, setOpenMobile] = react.useState(false);
+	const [_open, _setOpen] = react.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = react.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+	}, [setOpenProp, open]);
+	const toggleSidebar = react.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [
+		isMobile,
+		setOpen,
+		setOpenMobile
+	]);
+	react.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				const activeElement = document.activeElement;
+				if (activeElement?.closest(".group\\/composer") || activeElement?.closest("[data-toolbar]") || activeElement?.classList.contains("ProseMirror")) return;
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+	const state = open ? "expanded" : "collapsed";
+	const contextValue = react.useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar,
+		isPreviewMode,
+		useBottomNav: useBottomNavProp
+	}), [
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar,
+		isPreviewMode,
+		useBottomNavProp
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				"--sidebar-width": SIDEBAR_WIDTH,
+				"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+				...style
+			},
+			className: cn("group/sidebar-wrapper flex min-h-0 w-full flex-1", className),
+			ref,
+			...props,
+			children
+		})
+	});
+});
+SidebarProvider.displayName = "SidebarProvider";
+const Sidebar = react.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+	const { isMobile, state, openMobile, setOpenMobile, isPreviewMode, useBottomNav } = useSidebar();
+	const sidebarWidth = state === "expanded" ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_ICON;
+	if (useBottomNav && isMobile) return null;
+	if (collapsible === "none") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("bg-sidebar text-sidebar-foreground flex w-(--sidebar-width) flex-col rounded-tl-lg", isPreviewMode ? "h-full" : "h-[97vh]", className),
+		ref,
+		...props,
+		children
+	});
+	if (isMobile) {
+		const positionClass = isPreviewMode ? "absolute" : "fixed";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [openMobile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn(positionClass, "inset-0 z-40 bg-black/50"),
+			onClick: () => setOpenMobile(false),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-sidebar": "sidebar",
+			"data-mobile": "true",
+			className: cn(positionClass, "bg-sidebar text-sidebar-foreground top-0 left-0 z-50 h-full w-[--sidebar-width] p-0 transition-transform duration-300 ease-in-out", openMobile ? "translate-x-0" : "-translate-x-full", className),
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			ref,
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})
+		})] });
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: "group peer bg-sidebar text-sidebar-foreground hidden md:block",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		style: { "--sidebar-width": sidebarWidth },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: cn("relative bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("relative inset-y-0 z-[20] hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", isPreviewMode ? "h-full" : "h-svh", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l", className),
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-sidebar": "sidebar",
+				className: "group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+				children
+			})
+		})]
+	});
+});
+Sidebar.displayName = "Sidebar";
+const SidebarRail = react.forwardRef(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		"data-sidebar": "rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-[10] hidden w-4 -translate-x-full transition-all ease-linear group-data-[side=left]:-right-[1.375rem] group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		...props
+	});
+});
+SidebarRail.displayName = "SidebarRail";
+const SidebarInset = react.forwardRef(({ className, ...props }, ref) => {
+	const { isPreviewMode } = useSidebar();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+		ref,
+		className: cn("relative flex flex-1 flex-col", isPreviewMode ? "max-h-[calc(100svh-(--spacing(13)))]" : "min-h-svh peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))]", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+		...props
+	});
+});
+SidebarInset.displayName = "SidebarInset";
+const SidebarInput = react.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		"data-sidebar": "input",
+		className: cn("bg-background focus-visible:ring-sidebar-ring h-8 w-full rounded-md border px-3 text-sm shadow-none focus-visible:ring-2 focus-visible:outline-none", className),
+		...props
+	});
+});
+SidebarInput.displayName = "SidebarInput";
+const SidebarHeader = react.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarFooter = react.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarSeparator = react.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+		ref,
+		"data-sidebar": "separator",
+		className: cn("bg-sidebar-border mx-2 w-auto", className),
+		...props
+	});
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarContent = react.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		"data-sidebar": "content",
+		className: cn("scrollbar-none flex min-h-0 flex-1 flex-col gap-2 overflow-auto rounded group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:pt-3", className),
+		...props
+	});
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarGroup = react.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2 group-data-[collapsible=icon]:py-0 group-data-[collapsible=icon]:pt-4", className),
+		...props
+	});
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = react.forwardRef(({ className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "div", {
+		ref,
+		"data-sidebar": "group-label",
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = react.forwardRef(({ className, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		ref,
+		"data-sidebar": "group-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarGroupContent = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	"data-sidebar": "group-content",
+	className: cn("w-full text-sm", className),
+	...props
+}));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const SidebarMenu = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+	ref,
+	"data-sidebar": "menu",
+	className: cn("flex w-full min-w-0 flex-col gap-1", className),
+	...props
+}));
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+	ref,
+	"data-sidebar": "menu-item",
+	className: cn("group/menu-item relative", className),
+	...props
+}));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const sidebarMenuButtonVariants = (0, class_variance_authority.cva)("peer/menu-button ring-sidebar-ring hover:bg-sidebar-primary hover:text-sidebar-primary-foreground active:bg-sidebar-primary active:text-sidebar-primary-foreground data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground data-[state=open]:hover:bg-sidebar-primary data-[state=open]:hover:text-sidebar-primary-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-primary hover:text-sidebar-primary-foreground",
+			outline: "hover:bg-sidebar-primary hover:text-sidebar-primary-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-primary))]"
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const SidebarMenuButton = react.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		ref,
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuAction = react.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		ref,
+		"data-sidebar": "menu-action",
+		className: cn("text-sidebar-foreground ring-sidebar-ring peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", className),
+		...props
+	});
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+const SidebarMenuBadge = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	ref,
+	"data-sidebar": "menu-badge",
+	className: cn("text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className),
+	...props
+}));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const SidebarMenuSkeleton = react.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+	const width = react.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const SidebarMenuSub = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+	ref,
+	"data-sidebar": "menu-sub",
+	className: cn("border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className),
+	...props
+}));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+const SidebarMenuSubItem = react.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+	ref,
+	...props
+}));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+const SidebarMenuSubButton = react.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "a", {
+		ref,
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+//#endregion
+exports.Sidebar = Sidebar;
+exports.SidebarContent = SidebarContent;
+exports.SidebarContext = SidebarContext;
+exports.SidebarFooter = SidebarFooter;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarGroupAction = SidebarGroupAction;
+exports.SidebarGroupContent = SidebarGroupContent;
+exports.SidebarGroupLabel = SidebarGroupLabel;
+exports.SidebarHeader = SidebarHeader;
+exports.SidebarInput = SidebarInput;
+exports.SidebarInset = SidebarInset;
+exports.SidebarMenu = SidebarMenu;
+exports.SidebarMenuAction = SidebarMenuAction;
+exports.SidebarMenuBadge = SidebarMenuBadge;
+exports.SidebarMenuButton = SidebarMenuButton;
+exports.SidebarMenuItem = SidebarMenuItem;
+exports.SidebarMenuSkeleton = SidebarMenuSkeleton;
+exports.SidebarMenuSub = SidebarMenuSub;
+exports.SidebarMenuSubButton = SidebarMenuSubButton;
+exports.SidebarMenuSubItem = SidebarMenuSubItem;
+exports.SidebarProvider = SidebarProvider;
+exports.SidebarRail = SidebarRail;
+exports.SidebarSeparator = SidebarSeparator;
+exports.useSidebar = useSidebar;
+
+//# sourceMappingURL=sidebar.cjs.map