@classytic/fluid 0.2.4 → 0.3.2

package/dist/dashboard.d.mts

@@ -0,0 +1,778 @@
+import { t as cn } from "./utils-CDue7cEt.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import React, { ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+
+//#region src/dashboard/nav-utils.d.ts
+/**
+ * NavPermissions - Mixin applied to all nav item types.
+ * Provides function-based access control for maximum flexibility.
+ *
+ * @example
+ * // Org-level role check
+ * canAccess: (ctx: AppCtx) => ctx.org.role === "admin"
+ *
+ * // Multi-level: global OR org permission
+ * canAccess: (ctx: AppCtx) =>
+ *   ctx.user.globalRoles.includes("superadmin") ||
+ *   ctx.org.permissions.includes("hr:view")
+ *
+ * // Feature flag
+ * canAccess: (ctx: AppCtx) => ctx.featureFlags.betaAnalytics
+ */
+interface NavPermissions {
+  /** Explicitly hide regardless of access checks */
+  hidden?: boolean;
+  /**
+   * Dynamic access check. Receives whatever context the consumer passes
+   * to resolveNavigation(). Return false to hide this item.
+   */
+  canAccess?: (ctx: any) => boolean;
+  /**
+   * Dynamic badge resolver. Returns badge value based on context.
+   * Overrides the static `badge` field when it returns non-undefined.
+   *
+   * @example
+   * badgeCount: (ctx: AppCtx) => ctx.counts.unreadMessages || undefined
+   */
+  badgeCount?: (ctx: any) => string | number | undefined;
+}
+interface NavSubItem extends NavPermissions {
+  title: string;
+  url: string;
+  badge?: string | number;
+  isActive?: boolean;
+}
+interface NavItem extends NavPermissions {
+  title: string;
+  url: string;
+  icon?: LucideIcon;
+  isActive?: boolean;
+  badge?: string | number;
+  items?: NavSubItem[];
+}
+interface NavGroup {
+  title?: string;
+  items: NavItem[];
+}
+interface DualSidebarItem extends NavPermissions {
+  title: string;
+  url: string;
+  icon?: LucideIcon;
+  badge?: string | number;
+  isActive?: boolean;
+}
+interface DualSidebarCategory extends NavPermissions {
+  id: string;
+  name: string;
+  icon: LucideIcon;
+  items: DualSidebarItem[];
+}
+interface TopbarRailItem extends NavPermissions {
+  title: string;
+  url: string;
+  icon?: LucideIcon;
+  badge?: string | number;
+  isActive?: boolean;
+}
+interface TopbarRailCategory extends NavPermissions {
+  id: string;
+  name: string;
+  icon: LucideIcon;
+  items: TopbarRailItem[];
+}
+interface MiniSidebarItem extends NavPermissions {
+  title: string;
+  url: string;
+  icon: LucideIcon;
+  badge?: string | number;
+  isActive?: boolean;
+}
+interface MiniSidebarGroup {
+  title?: string;
+  items: MiniSidebarItem[];
+}
+/**
+ * resolveNavigation — Filter NavGroup[] by permissions and resolve dynamic badges.
+ * For InsetSidebar, FloatingSidebar, and any component using NavGroup[].
+ *
+ * When `ctx` is omitted, only `hidden` checks apply (backwards-compat).
+ */
+declare function resolveNavigation(groups: NavGroup[], ctx?: unknown): NavGroup[];
+/**
+ * resolveMiniNavigation — Filter MiniSidebarGroup[] by permissions.
+ */
+declare function resolveMiniNavigation(groups: MiniSidebarGroup[], ctx?: unknown): MiniSidebarGroup[];
+/**
+ * resolveCategories — Filter category arrays by permissions.
+ * Works with DualSidebarCategory[] and TopbarRailCategory[].
+ */
+declare function resolveCategories<TItem extends NavPermissions & {
+  badge?: string | number;
+  badgeCount?: (ctx: any) => string | number | undefined;
+}, TCategory extends NavPermissions & {
+  items: TItem[];
+}>(categories: TCategory[], ctx?: unknown): TCategory[];
+//#endregion
+//#region src/dashboard/header-section.d.ts
+interface HeaderAction {
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  className?: string;
+  icon?: LucideIcon;
+  iconPosition?: "left" | "right";
+  loadingText?: string;
+  loading?: boolean;
+}
+interface HeaderBadge {
+  text: string;
+  variant?: "default" | "secondary" | "destructive" | "outline";
+  className?: string;
+}
+interface HeaderMetadata {
+  text: string;
+  icon?: LucideIcon;
+}
+interface HeaderSectionProps {
+  title?: string;
+  description?: string;
+  actions?: HeaderAction[] | null;
+  icon?: LucideIcon | null;
+  iconClassName?: string;
+  loading?: boolean;
+  variant?: "default" | "compact" | "hero" | "minimal";
+  className?: string;
+  badge?: HeaderBadge | ReactNode;
+  breadcrumbs?: ReactNode;
+  metadata?: HeaderMetadata[];
+  children?: ReactNode;
+}
+declare function HeaderSection({
+  title,
+  description,
+  actions,
+  icon: Icon,
+  iconClassName,
+  loading,
+  variant,
+  className,
+  badge,
+  breadcrumbs,
+  metadata,
+  children
+}: HeaderSectionProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/page-header.d.ts
+interface BreadcrumbItemData {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+interface PageHeaderProps {
+  items: BreadcrumbItemData[];
+  className?: string;
+  actions?: React.ReactNode;
+}
+declare function PageHeader({
+  items,
+  className,
+  actions
+}: PageHeaderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/dashboard-content.d.ts
+interface DashboardContentProps {
+  /** Content to render inside the dashboard area */
+  children: React$1.ReactNode;
+  /** Additional className for the outer wrapper */
+  className?: string;
+  /** Enable @container queries on the content area */
+  container?: boolean | string;
+  /** Horizontal padding — defaults to "md" */
+  padding?: "none" | "sm" | "md" | "lg";
+}
+/**
+ * DashboardContent — Safe content wrapper for sidebar layouts.
+ *
+ * Prevents the classic flexbox overflow bug where children with
+ * `max-w-*` or grid layouts extend beyond the available space
+ * (behind the sidebar) by propagating `min-w-0` through the
+ * flex chain.
+ *
+ * **Important**: `SidebarInset` also needs `min-w-0` for the
+ * width constraint to propagate correctly from the flex parent.
+ * Pass `className="min-w-0"` to `SidebarInset`.
+ *
+ * @example
+ * ```tsx
+ * <SidebarProvider>
+ *   <AppSidebar />
+ *   <SidebarInset className="min-w-0">
+ *     <DashboardContent>
+ *       <PageHeader items={breadcrumbs} />
+ *       <MyPageContent />
+ *     </DashboardContent>
+ *   </SidebarInset>
+ * </SidebarProvider>
+ * ```
+ */
+declare function DashboardContent({
+  children,
+  className,
+  container,
+  padding
+}: DashboardContentProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/dashboard-page-layout.d.ts
+interface DashboardPageLayoutProps {
+  /** Breadcrumb items for the page header */
+  breadcrumbs: BreadcrumbItemData[];
+  /** Action buttons rendered in the page header */
+  actions?: ReactNode;
+  /** Whether to wrap children in Suspense (default: true) */
+  suspense?: boolean;
+  /** Custom Suspense fallback. Defaults to a spinner. */
+  fallback?: ReactNode;
+  /** Additional className for the content wrapper */
+  className?: string;
+  children: ReactNode;
+}
+/**
+ * DashboardPageLayout — Standard page shell for dashboard pages.
+ * Combines PageHeader (breadcrumbs + actions) with optional Suspense boundary.
+ *
+ * @example
+ * ```tsx
+ * <DashboardPageLayout
+ *   breadcrumbs={[
+ *     { label: "Dashboard", href: "/dashboard" },
+ *     { label: "Posts", current: true },
+ *   ]}
+ *   actions={<Button>New Post</Button>}
+ *   fallback={<SkeletonTable rows={5} />}
+ * >
+ *   <PostsList />
+ * </DashboardPageLayout>
+ * ```
+ */
+declare function DashboardPageLayout({
+  breadcrumbs,
+  actions,
+  suspense,
+  fallback,
+  className,
+  children
+}: DashboardPageLayoutProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/sidebar-brand.d.ts
+interface SidebarBrandProps {
+  /** Brand title text */
+  title: string;
+  /** Brand icon/logo element */
+  icon: React$1.ReactNode;
+  /** Link href (defaults to "/") */
+  href?: string;
+  /** Additional className */
+  className?: string;
+  /** Tooltip text when collapsed (defaults to title) */
+  tooltip?: string;
+}
+/**
+ * SidebarBrand - Logo and title section for dashboard sidebar.
+ * Automatically handles collapsed state styling.
+ */
+declare function SidebarBrand({
+  title,
+  icon,
+  href,
+  className,
+  tooltip
+}: SidebarBrandProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/sidebar-nav.d.ts
+interface SidebarNavProps {
+  /** Navigation groups to render */
+  groups: NavGroup[];
+  /** Additional className */
+  className?: string;
+  /** Callback when a nav item is clicked */
+  onItemClick?: (item: NavItem) => void;
+}
+interface SidebarNavGroupProps {
+  /** Group title (optional) */
+  title?: string;
+  /** Navigation items in this group */
+  items: NavItem[];
+  /** Additional className */
+  className?: string;
+  /** Callback when an item is clicked */
+  onItemClick?: (item: NavItem) => void;
+}
+interface SidebarNavItemProps {
+  /** The navigation item data */
+  item: NavItem;
+  /** Callback when clicked */
+  onClick?: () => void;
+}
+/**
+ * SidebarNavItem - Single navigation item with optional sub-items.
+ */
+declare function SidebarNavItem({
+  item,
+  onClick
+}: SidebarNavItemProps): react_jsx_runtime0.JSX.Element;
+/**
+ * SidebarNavGroup - A group of navigation items with optional title.
+ */
+declare function SidebarNavGroup({
+  title,
+  items,
+  className,
+  onItemClick
+}: SidebarNavGroupProps): react_jsx_runtime0.JSX.Element;
+/**
+ * SidebarNav - Complete navigation section with multiple groups.
+ */
+declare function SidebarNav({
+  groups,
+  className,
+  onItemClick
+}: SidebarNavProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/sidebar-user-menu.d.ts
+interface UserData {
+  name: string;
+  email: string;
+  avatar?: string;
+}
+interface UserMenuItem {
+  label: string;
+  icon?: LucideIcon;
+  href?: string;
+  onClick?: () => void;
+  separator?: boolean;
+}
+interface SidebarUserMenuProps {
+  /** User data to display */
+  user: UserData;
+  /** Menu items (account, settings, etc.) */
+  menuItems?: UserMenuItem[];
+  /** Logout handler */
+  onLogout?: () => void;
+  /** Additional className */
+  className?: string;
+}
+/**
+ * SidebarUserMenu - User avatar and dropdown menu for sidebar footer.
+ * Accepts handlers for logout and custom menu items.
+ */
+declare function SidebarUserMenu({
+  user,
+  menuItems,
+  onLogout,
+  className
+}: SidebarUserMenuProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/project-switcher.d.ts
+interface ProjectItem {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Short code or identifier */
+  code?: string;
+  /** Optional type badge */
+  type?: string;
+  /** Is this the default project */
+  isDefault?: boolean;
+  /** Is this project active */
+  isActive?: boolean;
+  /** Optional subtitle/description */
+  subtitle?: string;
+}
+interface ProjectSwitcherProps {
+  /** List of available projects */
+  items: ProjectItem[];
+  /** Currently selected project */
+  selected?: ProjectItem;
+  /** Callback when a project is selected */
+  onSelect: (project: ProjectItem) => void;
+  /** Whether the data is loading */
+  isLoading?: boolean;
+  /** Label shown in dropdown header */
+  label?: string;
+  /** Icon to display (defaults to Building2) */
+  icon?: LucideIcon;
+  /** Additional className */
+  className?: string;
+  /** Whether to show as disabled (single item) */
+  disabled?: boolean;
+  /**
+   * Render variant:
+   * - "sidebar": Uses SidebarMenu components, requires SidebarProvider context
+   * - "standalone": Uses Button, works anywhere (headers, toolbars, etc.)
+   */
+  variant?: "sidebar" | "standalone";
+  /** Size for standalone variant (ignored in sidebar variant) */
+  size?: "sm" | "default";
+  /** Render custom item content */
+  renderItem?: (item: ProjectItem, isSelected: boolean) => React$1.ReactNode;
+}
+/**
+ * ProjectSwitcher - Generic project/workspace/branch switcher.
+ * Works for any entity that needs switching functionality.
+ *
+ * @example Sidebar usage (inside SidebarProvider)
+ * ```tsx
+ * <ProjectSwitcher
+ *   items={projects}
+ *   selected={selectedProject}
+ *   onSelect={setSelectedProject}
+ * />
+ * ```
+ *
+ * @example Header/Standalone usage (no SidebarProvider needed)
+ * ```tsx
+ * <ProjectSwitcher
+ *   variant="standalone"
+ *   items={projects}
+ *   selected={selectedProject}
+ *   onSelect={setSelectedProject}
+ *   size="sm"
+ * />
+ * ```
+ */
+declare function ProjectSwitcher({
+  items,
+  selected,
+  onSelect,
+  isLoading,
+  label,
+  icon: Icon,
+  className,
+  disabled,
+  variant,
+  size,
+  renderItem
+}: ProjectSwitcherProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/dashboard/dashboard-header.d.ts
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+interface DashboardHeaderProps {
+  /** Breadcrumb items */
+  breadcrumbs?: BreadcrumbItem[];
+  /** Content to show on the left (after breadcrumbs) */
+  leftContent?: React$1.ReactNode;
+  /** Content to show on the right (actions, mode toggle, etc.) */
+  rightContent?: React$1.ReactNode;
+  /** Whether to show sidebar trigger */
+  showSidebarTrigger?: boolean;
+  /** Custom trigger element (rendered before breadcrumbs, replaces SidebarTrigger) */
+  customTrigger?: React$1.ReactNode;
+  /** Additional className */
+  className?: string;
+  /** Custom content (replaces default breadcrumb) */
+  children?: React$1.ReactNode;
+}
+/**
+ * DashboardHeader - Top header bar for dashboard pages.
+ * Includes sidebar trigger, breadcrumbs, and action slots.
+ */
+declare function DashboardHeader({
+  breadcrumbs,
+  leftContent,
+  rightContent,
+  showSidebarTrigger,
+  customTrigger,
+  className,
+  children
+}: DashboardHeaderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/presets/inset-sidebar.d.ts
+interface InsetSidebarBrand {
+  title: string;
+  icon: React$1.ReactNode;
+  href?: string;
+}
+interface InsetSidebarProject {
+  items: ProjectItem[];
+  selected?: ProjectItem;
+  onSelect: (project: ProjectItem) => void;
+  isLoading?: boolean;
+  label?: string;
+  icon?: LucideIcon;
+}
+interface InsetSidebarUser {
+  data: UserData;
+  menuItems?: UserMenuItem[];
+  onLogout?: () => void;
+}
+interface InsetSidebarProps {
+  /** Brand configuration */
+  brand: InsetSidebarBrand;
+  /** Navigation groups */
+  navigation: NavGroup[];
+  /** Secondary navigation (shown at bottom above user) */
+  secondaryNavigation?: NavGroup[];
+  /** Project/workspace switcher configuration */
+  project?: InsetSidebarProject;
+  /** User menu configuration */
+  user?: InsetSidebarUser;
+  /** Custom content to render in header (after brand/project switcher) */
+  headerContent?: React$1.ReactNode;
+  /** Accessibility label for the sidebar */
+  ariaLabel?: string;
+  /** Additional className */
+  className?: string;
+  /** Children to render in content area */
+  children?: React$1.ReactNode;
+}
+/**
+ * InsetSidebar - Complete sidebar preset with inset variant.
+ * The standard dashboard sidebar with collapsible to icons.
+ */
+declare function InsetSidebar({
+  brand,
+  navigation,
+  secondaryNavigation,
+  project,
+  user,
+  headerContent,
+  ariaLabel,
+  className,
+  children
+}: InsetSidebarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/presets/dual-sidebar.d.ts
+interface DualSidebarBrand {
+  title: string;
+  icon: React$1.ReactNode;
+  href?: string;
+}
+interface DualSidebarUser {
+  data: UserData;
+  menuItems?: UserMenuItem[];
+  onLogout?: () => void;
+}
+interface DualSidebarProps {
+  /** Brand configuration */
+  brand: DualSidebarBrand;
+  /** Main categories with their items */
+  categories: DualSidebarCategory[];
+  /** User menu configuration */
+  user?: DualSidebarUser;
+  /** Initially active category ID */
+  defaultCategoryId?: string;
+  /** Callback when category changes */
+  onCategoryChange?: (categoryId: string) => void;
+  /** Whether the expanded panel starts collapsed */
+  defaultCollapsed?: boolean;
+  /** Controlled mobile sheet open state */
+  mobileOpen?: boolean;
+  /** Callback when mobile sheet state changes */
+  onMobileOpenChange?: (open: boolean) => void;
+  /** Rail color variant */
+  railVariant?: "default" | "dark" | "primary" | "muted";
+  /** Accessibility label */
+  ariaLabel?: string;
+  /** Additional className for outer container */
+  className?: string;
+}
+/**
+ * DualSidebar - A sidebar with icon rail and collapsible expanded panel.
+ * Mimics the inset sidebar variant structure for consistent styling.
+ */
+declare function DualSidebar({
+  brand,
+  categories,
+  user,
+  defaultCategoryId,
+  onCategoryChange,
+  defaultCollapsed,
+  mobileOpen: controlledMobileOpen,
+  onMobileOpenChange,
+  railVariant,
+  ariaLabel,
+  className
+}: DualSidebarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/presets/floating-sidebar.d.ts
+interface FloatingSidebarBrand {
+  title: string;
+  icon: React$1.ReactNode;
+  href?: string;
+}
+interface FloatingSidebarProject {
+  items: ProjectItem[];
+  selected?: ProjectItem;
+  onSelect: (project: ProjectItem) => void;
+  isLoading?: boolean;
+  label?: string;
+  icon?: LucideIcon;
+}
+interface FloatingSidebarUser {
+  data: UserData;
+  menuItems?: UserMenuItem[];
+  onLogout?: () => void;
+}
+interface FloatingSidebarProps {
+  /** Brand configuration */
+  brand: FloatingSidebarBrand;
+  /** Navigation groups */
+  navigation: NavGroup[];
+  /** Secondary navigation (shown at bottom above user) */
+  secondaryNavigation?: NavGroup[];
+  /** Project/workspace switcher configuration */
+  project?: FloatingSidebarProject;
+  /** User menu configuration */
+  user?: FloatingSidebarUser;
+  /** Custom content to render in header (after brand/project switcher) */
+  headerContent?: React$1.ReactNode;
+  /** Side of the screen */
+  side?: "left" | "right";
+  /** Accessibility label for the sidebar */
+  ariaLabel?: string;
+  /** Additional className */
+  className?: string;
+  /** Children to render in content area */
+  children?: React$1.ReactNode;
+}
+/**
+ * FloatingSidebar - Floating variant sidebar with rounded corners and shadow.
+ * Hovers above the content area like Linear / Notion style.
+ * Collapses to icon-only rail on desktop.
+ */
+declare function FloatingSidebar({
+  brand,
+  navigation,
+  secondaryNavigation,
+  project,
+  user,
+  headerContent,
+  side,
+  ariaLabel,
+  className,
+  children
+}: FloatingSidebarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/presets/mini-sidebar.d.ts
+interface MiniSidebarBrand {
+  title: string;
+  icon: React$1.ReactNode;
+  href?: string;
+}
+interface MiniSidebarUser {
+  data: UserData;
+  menuItems?: UserMenuItem[];
+  onLogout?: () => void;
+}
+interface MiniSidebarProps {
+  /** Brand configuration */
+  brand: MiniSidebarBrand;
+  /** Navigation groups (icon + label, collapses to icon-only) */
+  navigation: MiniSidebarGroup[];
+  /** Secondary navigation at bottom */
+  secondaryNavigation?: MiniSidebarGroup[];
+  /** User menu configuration */
+  user?: MiniSidebarUser;
+  /** Custom header content */
+  headerContent?: React$1.ReactNode;
+  /** Side of the screen */
+  side?: "left" | "right";
+  /** Show the rail click-strip for quick collapse/expand */
+  showRail?: boolean;
+  /** Accessibility label */
+  ariaLabel?: string;
+  /** Additional className */
+  className?: string;
+  /** Children override for content area */
+  children?: React$1.ReactNode;
+}
+/**
+ * MiniSidebar - Collapsible sidebar that shrinks to icon-only rail.
+ * Think VS Code, GitHub, or Figma-style navigation.
+ * Uses the standard shadcn sidebar with `collapsible="icon"`.
+ */
+declare function MiniSidebar({
+  brand,
+  navigation,
+  secondaryNavigation,
+  user,
+  headerContent,
+  side,
+  showRail,
+  ariaLabel,
+  className,
+  children
+}: MiniSidebarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/presets/topbar-rail.d.ts
+interface TopbarRailBrand {
+  title: string;
+  icon: React$1.ReactNode;
+  href?: string;
+}
+interface TopbarRailUser {
+  data: UserData;
+  menuItems?: UserMenuItem[];
+  onLogout?: () => void;
+}
+interface TopbarRailBreadcrumb {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+interface TopbarRailProps {
+  /** Brand configuration */
+  brand: TopbarRailBrand;
+  /** Main categories with their items */
+  categories: TopbarRailCategory[];
+  /** User menu configuration */
+  user?: TopbarRailUser;
+  /** Breadcrumb items for the topbar */
+  breadcrumbs?: TopbarRailBreadcrumb[];
+  /** Action slot on the right side of topbar (before user avatar) */
+  actions?: React$1.ReactNode;
+  /** Initially active category ID */
+  defaultCategoryId?: string;
+  /** Callback when category changes */
+  onCategoryChange?: (categoryId: string) => void;
+  /** Whether the drawer starts open */
+  defaultDrawerOpen?: boolean;
+  /** Rail color variant */
+  railVariant?: "default" | "dark" | "primary" | "muted";
+  /** Accessibility label */
+  ariaLabel?: string;
+  /** Additional className for outer container */
+  className?: string;
+  /** Main content area */
+  children: React$1.ReactNode;
+}
+/**
+ * TopbarRail - Fixed topbar + icon rail + secondary drawer layout.
+ * Common in Linear, Figma, Jira-style SaaS applications.
+ * Does NOT use SidebarProvider — fully custom layout.
+ */
+declare function TopbarRail({
+  brand,
+  categories,
+  user,
+  breadcrumbs,
+  actions,
+  defaultCategoryId,
+  onCategoryChange,
+  defaultDrawerOpen,
+  railVariant,
+  ariaLabel,
+  className,
+  children
+}: TopbarRailProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type BreadcrumbItem, type BreadcrumbItemData, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardPageLayout, type DashboardPageLayoutProps, DualSidebar, type DualSidebarBrand, type DualSidebarCategory, type DualSidebarItem, type DualSidebarProps, type DualSidebarUser, FloatingSidebar, type FloatingSidebarBrand, type FloatingSidebarProject, type FloatingSidebarProps, type FloatingSidebarUser, type HeaderAction, type HeaderBadge, type HeaderMetadata, HeaderSection, type HeaderSectionProps, InsetSidebar, type InsetSidebarBrand, type InsetSidebarProject, type InsetSidebarProps, type InsetSidebarUser, MiniSidebar, type MiniSidebarBrand, type MiniSidebarGroup, type MiniSidebarItem, type MiniSidebarProps, type MiniSidebarUser, type NavGroup, type NavItem, type NavPermissions, type NavSubItem, PageHeader, type PageHeaderProps, type ProjectItem, ProjectSwitcher, type ProjectSwitcherProps, SidebarBrand, type SidebarBrandProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavProps, SidebarUserMenu, type SidebarUserMenuProps, TopbarRail, type TopbarRailBrand, type TopbarRailBreadcrumb, type TopbarRailCategory, type TopbarRailItem, type TopbarRailProps, type TopbarRailUser, type UserData, type UserMenuItem, cn, resolveCategories, resolveMiniNavigation, resolveNavigation };