@arcfusionz/arc-primitive-ui 0.2.1 → 0.2.3

package/dist/assets/brand/arcfusion-logo.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-4 {
+        fill: url(#linear-gradient-3);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="280.09" y1="63.53" x2="368.57" y2="361.89" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#040067"/>
+      <stop offset=".46" stop-color="#001598"/>
+      <stop offset=".59" stop-color="#001ca7"/>
+      <stop offset=".99" stop-color="#0038d4" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="534.92" y1="386.82" x2="-48.47" y2="386.82" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-3" x1="139.15" y1="394.16" x2="249.19" y2="-38.06" xlink:href="#linear-gradient"/>
+  </defs>
+  <g id="Layer_1-2">
+    <g>
+      <rect class="cls-1" width="512" height="512"/>
+      <g>
+        <path class="cls-2" d="M417,314.23L309.67,43.97l-54.73,145.74,23.95,74.66c58.81,7.59,105.55,29.45,138.1,49.86Z"/>
+        <path class="cls-3" d="M241.57,412.83c70.69,0,105.93,53.27,105.93,53.27,0,0,142.25-.12,142.14,0-12.81-36.21-35.92-69.15-68.05-96.18-17.56-14.77-37.14-27.13-58.16-36.91-37.11-17.26-78.75-26.44-121.86-26.44-8.92,0-17.76.42-26.52,1.19-2.92.38-5.83.82-8.75,1.29-35.05,5.66-69.61,18.14-101.64,37.07-2.12,1.25-4.19,2.55-6.27,3.84-12.83,8.01-24.88,16.87-36.1,26.46l-32.59,90.66,68.98-.98c47.53,0,80.41-53.27,142.88-53.27Z"/>
+        <path class="cls-4" d="M104.66,346.11c32.03-18.93,66.6-31.41,101.64-37.07,1.36-.22,2.72-.43,4.09-.64L309.67,43.97h-60.19c-41.38,0-78.3,25.97-92.3,64.9L62.3,376.41c11.22-9.59,23.26-18.45,36.09-26.46,2.08-1.3,4.15-2.59,6.27-3.84Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/images.d.ts

@@ -0,0 +1,9 @@
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}

package/dist/components/AILoader/AILoader.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/AILoader/AILoader.tsx
 const rootClasses = "relative inline-flex shrink-0 items-center justify-center align-middle select-none";
@@ -58,7 +58,7 @@ const AILoader = forwardRef(({ state = "default", size = "md", tone = "brand", t
 			role: processing ? "status" : "img",
 			"aria-label": processing ? hasText ? label : void 0 : accessibleLabel,
 			className: cn(rootClasses, toneClasses[tone], hasText && gapClasses[size], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",

package/dist/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { Children, createContext, forwardRef, useContext, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/Avatar/Avatar.tsx
@@ -110,7 +110,7 @@ const Avatar$1 = forwardRef(({ size, shape, src, alt, name, fallback, fallbackDe
 				shape: resolvedShape
 			}), group != null && "ring-2 ring-background", className),
 			...rest,
-			children: [useShorthand && /* @__PURE__ */ jsxs(Fragment, { children: [src != null && /* @__PURE__ */ jsx(AvatarImage, {
+			children: [useShorthand && /* @__PURE__ */ jsxs(Fragment$1, { children: [src != null && /* @__PURE__ */ jsx(AvatarImage, {
 				src,
 				alt: alt ?? ""
 			}), /* @__PURE__ */ jsx(AvatarFallback, {
@@ -165,7 +165,7 @@ const AvatarBadge = forwardRef(({ label, render, className, children, ...rest },
 		ref,
 		props: {
 			className: cn("absolute end-0 bottom-0 block rounded-full bg-success ring-2 ring-background", badgeSizeClasses[size], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [label != null && /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [label != null && /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: label
 			}), children] }),
@@ -202,7 +202,7 @@ const AvatarGroup = forwardRef(({ size = "md", shape = "circle", max, total, ren
 		ref,
 		props: {
 			className: cn("flex items-center", groupSpacingClasses[size], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [visible, surplus > 0 && /* @__PURE__ */ jsx(Avatar$1, { children: `+${surplus}` })] }),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [visible, surplus > 0 && /* @__PURE__ */ jsx(Avatar$1, { children: `+${surplus}` })] }),
 			...rest
 		}
 	});

package/dist/components/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Badge/Badge.tsx
@@ -88,7 +88,7 @@ const Badge = forwardRef(({ variant = "neutral", appearance = "soft", size = "md
 				size,
 				pill
 			}), className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				dot && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: "size-1.5 shrink-0 rounded-full bg-current"

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/Button/Button.tsx
 const baseClasses = "relative inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-semibold transition-colors duration-150 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
@@ -128,7 +128,7 @@ const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = fal
 		if (event.detail === 0 && rippleContainerRef.current && !prefersReducedMotion()) spawnRipple(rippleContainerRef.current);
 		onClick?.(event);
 	};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		startIcon != null && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "inline-flex items-center",
@@ -160,7 +160,7 @@ const Button$1 = forwardRef(({ variant = "primary", size = "md", fullWidth = fal
 			ref: rippleContainerRef,
 			"aria-hidden": "true",
 			className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] [contain:strict]"
-		}), loading ? loadingText != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, {}), loadingText] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		}), loading ? loadingText != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, {}), loadingText] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 			className: "absolute inset-0 flex items-center justify-center",
 			children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",

package/dist/components/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/Calendar/Calendar.tsx
@@ -441,7 +441,7 @@ const Calendar = forwardRef((props, forwardedRef) => {
 		role: "group",
 		"aria-label": ariaLabel,
 		className: cn("inline-flex flex-col p-3 font-sans", className),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			role: "status",
 			className: "sr-only",
 			children: announcement

package/dist/components/Field/Field.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { FieldContext } from "./FieldContext.js";
 import { forwardRef, useContext, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/Field/Field.tsx
@@ -212,7 +212,7 @@ const FieldError = forwardRef(({ className, children, match, ...rest }, ref) =>
 		match: resolvedMatch,
 		className: cn(errorClasses, className),
 		...rest,
-		children: content != null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ErrorIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: content != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ErrorIcon, {}), /* @__PURE__ */ jsx("span", {
 			className: "min-w-0",
 			children: content
 		})] }) : void 0

package/dist/components/Shell/Shell.d.ts

@@ -0,0 +1,232 @@
+import { BadgeVariant } from "../Badge/Badge.js";
+import "../Badge/index.js";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/Shell/Shell.d.ts
+/**
+ * An entry either navigates (`href`, rendered as a real link so open-in-new-
+ * tab and copy-link work) or acts (`action`, rendered as a button press) —
+ * never both, so a single press can never fire twice.
+ */
+type ShellNavTarget = {
+  href?: string;
+  action?: never;
+} | {
+  action?: () => void;
+  href?: never;
+};
+/**
+ * Shared Shell UI state for custom triggers — e.g. an "Ask AI" entry point
+ * inside page content that opens the same right panel as the Topbar button.
+ * Outside a `Shell` it returns inert state (closed, no-op setter).
+ */
+declare function useShell(): {
+  rightPanelOpen: boolean;
+  setRightPanelOpen: (open: boolean) => void;
+};
+interface ShellProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Sidebar region (usually `ShellSidebar`). The Shell reserves the collapsed rail width; expansion overlays the rest of the layout without moving it. */
+  sidebar?: ReactNode;
+  /** Topbar region (usually `ShellTopbar`), pinned above the scrollable content. */
+  topbar?: ReactNode;
+  /** Optional tab row (usually `ShellTabbar`) directly below the Topbar. When omitted, no space is reserved. */
+  tabbar?: ReactNode;
+  /** Optional right panel content (usually `ShellRightPanel`). Mounted only while the panel is open: docked at full Shell height beside the topbar/tabbar/main column on `lg`+ viewports, overlaying it below. */
+  rightPanel?: ReactNode;
+  /** Page content — usually a `ShellMain`, which owns the primary scroll region. */
+  children: ReactNode;
+  /** Controlled right-panel state; pair with `onRightPanelOpenChange`. */
+  rightPanelOpen?: boolean;
+  /** Initial right-panel state when uncontrolled. */
+  defaultRightPanelOpen?: boolean;
+  /** Called with the requested state whenever the Ask AI button, the panel's close control, or Escape toggles the panel. */
+  onRightPanelOpenChange?: (open: boolean) => void;
+  /** Additional classes merged after the shell recipe — e.g. `h-full` to fill a parent instead of the viewport. */
+  className?: string;
+}
+/**
+ * Application frame that positions the sidebar rail, topbar, optional
+ * tabbar, main content, and the optional right panel, and owns the shared
+ * panel state. It fills the viewport (`h-dvh`) by default — pass
+ * `className="h-full"` to fill a parent instead — and creates no
+ * document-level overflow: `ShellMain` is the primary scroll region. The
+ * collapsed rail width stays reserved while sidebar expansion overlays the
+ * layout, so page content never shifts. Popups portal to `document.body`;
+ * the root is isolated, but consumer apps should still set
+ * `isolation: isolate` on their app root so no page stacking context
+ * outbids them.
+ */
+declare const Shell: import("react").ForwardRefExoticComponent<ShellProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SidebarMenuItemBadge {
+  /** Count shown in the badge; values past 99 render as `99+`. */
+  count: number;
+  /** Semantic tone, mapped onto the Badge variants. */
+  tone?: BadgeVariant;
+  /** Accessible text announced with the item, e.g. `4 unread tasks`. Defaults to the count. */
+  ariaLabel?: string;
+}
+type SidebarMenuItem = {
+  /** Unique id, matched against `activeItemId`. */
+  id: string;
+  /** Page name: the expanded label, the collapsed tooltip, and the accessible name. */
+  name: string;
+  /** Decorative icon, visible in both states. Sized to 20px unless it carries its own `size-*` class. */
+  icon: ReactNode;
+  /** Count badge: a dot on the icon while collapsed, a count pill when expanded. */
+  badge?: SidebarMenuItemBadge;
+  /** Show the item but keep it inert. */
+  disabled?: boolean;
+} & ShellNavTarget;
+interface SidebarMenuGroup {
+  /** Unique group id. */
+  id: string;
+  /** Group heading. Visible when expanded; replaced by a divider (same-height container, no layout shift) when collapsed. */
+  groupTitle: string;
+  /** Items in the group. */
+  pages: SidebarMenuItem[];
+}
+interface ShellSidebarProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Replacement brand mark. Defaults to the ArcFusion logo. */
+  brandLogo?: ReactNode;
+  /** Replacement brand name shown next to the logo while expanded. Defaults to `ArcFusion`. */
+  brandName?: ReactNode;
+  /** Navigation groups rendered in order. */
+  groups: SidebarMenuGroup[];
+  /** Id of the current page's item; it renders with `aria-current="page"`. Route awareness stays with the app — pass the id in. */
+  activeItemId?: string;
+  /** Controlled expansion; pair with `onExpandedChange`. Internal triggers then only request changes. */
+  expanded?: boolean;
+  /** Initial expansion when uncontrolled. The sidebar starts collapsed by default. */
+  defaultExpanded?: boolean;
+  /** Called with the requested state on every expand/collapse intent (hover timers, keyboard focus, the brand toggle). */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Milliseconds the pointer must rest inside the collapsed rail before it expands. Defaults to 175. */
+  expandDelay?: number;
+  /** Milliseconds after the pointer leaves before the sidebar collapses. Defaults to 175. */
+  collapseDelay?: number;
+  /** Accessible name of the `nav` landmark. */
+  navLabel?: string;
+  /** Accessible name of the brand toggle button (its state is exposed via `aria-expanded`). */
+  toggleLabel?: string;
+  /** Additional classes merged after the sidebar recipe. */
+  className?: string;
+}
+/**
+ * Collapsible navigation rail. Collapsed it shows the brand mark, item
+ * icons, on-icon badge dots, and group dividers; hovering it for
+ * `expandDelay` (or focusing it with the keyboard, immediately) expands it
+ * over the layout — never pushing it — revealing the brand name, group
+ * titles, labels, and count badges in the same geometry, so nothing jumps.
+ * It collapses `collapseDelay` after pointer and focus have both left,
+ * unless it is pinned (the brand button, which is also the touch toggle),
+ * controlled expanded, or a popup inside it is open. Items are real links
+ * (`href`) or buttons (`action`) inside a labelled `nav`; the active item
+ * carries `aria-current="page"`, and collapsed items show their name in a
+ * tooltip.
+ */
+declare const ShellSidebar: import("react").ForwardRefExoticComponent<ShellSidebarProps & import("react").RefAttributes<HTMLDivElement>>;
+type ShellBreadcrumbItem = {
+  /** Unique crumb id. */
+  id: string;
+  /** Crumb text. */
+  label: ReactNode;
+} & ShellNavTarget;
+type ShellGlobalMenuItem = {
+  /** Unique entry id. */
+  id: string;
+  /** Entry label. */
+  menuName: string;
+  /** Decorative leading icon. */
+  menuIcon?: ReactNode;
+  /** Show the entry but keep it inert. */
+  disabled?: boolean;
+} & ShellNavTarget;
+interface ShellTopbarProps extends Omit<ComponentPropsWithoutRef<"header">, "className" | "title"> {
+  /** Page title, rendered as the page's `h1`. Ignored when `breadcrumbs` are provided. */
+  title?: ReactNode;
+  /** Breadcrumb trail; the last item is the current page. Takes the place of `title`. */
+  breadcrumbs?: ShellBreadcrumbItem[];
+  /** Page-owned actions (e.g. a "New task" Button), rendered before the Ask AI and global menu controls. */
+  pageActions?: ReactNode;
+  /** Show the Ask AI button, which toggles the Shell's right panel. */
+  showAskAi?: boolean;
+  /** Ask AI button label. */
+  askAiLabel?: string;
+  /** Global application menu entries, opened from a LayoutGrid icon button. The trigger is hidden while empty. */
+  globalMenuItems?: ShellGlobalMenuItem[];
+  /** Accessible name of the global menu trigger. */
+  globalMenuLabel?: string;
+  /** Additional classes merged after the topbar recipe. */
+  className?: string;
+}
+/**
+ * Page header row: a title (or breadcrumb trail) on the left; page-owned
+ * actions, the optional Ask AI toggle, and the global application menu on
+ * the right. The Ask AI button only flips the Shell's panel state
+ * (`aria-expanded` reflects it) — the panel itself belongs to Shell layout.
+ * The global menu renders through the Menu primitive, so arrow keys,
+ * typeahead, and Escape come built in.
+ */
+declare const ShellTopbar: import("react").ForwardRefExoticComponent<ShellTopbarProps & import("react").RefAttributes<HTMLElement>>;
+interface ShellTabItem {
+  /** Unique tab id, emitted through `onTabChange`. */
+  id: string;
+  /** Tab label. */
+  label: ReactNode;
+  /** Count badge after the label; values past 99 render as `99+`. */
+  badge?: number;
+  /** Show the tab but keep it inert. */
+  disabled?: boolean;
+}
+interface ShellTabbarProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Tabs rendered in order through the Tabs primitive. */
+  tabs: ShellTabItem[];
+  /** Id of the selected tab. */
+  activeTabId: string;
+  /** Called with the newly selected tab id. Data and filter state stay page-owned. */
+  onTabChange: (tabId: string) => void;
+  /** Page-owned filter controls (Selects, date pickers, filter buttons) on the trailing side. */
+  filters?: ReactNode;
+  /** Additional classes merged after the tabbar recipe. */
+  className?: string;
+}
+/**
+ * Optional row under the Topbar: page-view tabs on the left (the Tabs
+ * primitive, so arrow-key navigation comes built in) and page-owned filter
+ * controls on the right. It only emits `onTabChange` — it never touches page
+ * data. When the tabs and filters can't share a row, the filters drop to
+ * their own row below and stay right-aligned; if the tabs alone still
+ * overflow, they scroll horizontally.
+ */
+declare const ShellTabbar: import("react").ForwardRefExoticComponent<ShellTabbarProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ShellMainProps extends Omit<ComponentPropsWithoutRef<"main">, "className"> {
+  /** Apply the default content padding. Disable for edge-to-edge pages (tables, canvases, maps). */
+  padded?: boolean;
+  /** Additional classes merged after the main recipe. */
+  className?: string;
+}
+/**
+ * The page content region and the Shell's primary scroll area — a `main`
+ * landmark that fills the remaining space. Content is free-form; it carries
+ * no page logic.
+ */
+declare const ShellMain: import("react").ForwardRefExoticComponent<ShellMainProps & import("react").RefAttributes<HTMLElement>>;
+interface ShellRightPanelProps extends Omit<ComponentPropsWithoutRef<"aside">, "className" | "title"> {
+  /** Visible panel heading; also names the panel for assistive technology. Without it (or an explicit `aria-label`), the panel is named `Ask AI`. */
+  title?: ReactNode;
+  /** Accessible name of the close control. */
+  closeLabel?: string;
+  /** Additional classes merged after the panel recipe. */
+  className?: string;
+}
+/**
+ * Right-side panel chrome — the Shell mounts it while the panel is open,
+ * docked at full Shell height beside the topbar/tabbar/main column on `lg`+
+ * viewports (the column narrows) and overlaying it below. A labelled
+ * `aside` with its own scroll area and a close control;
+ * Escape from inside also closes it, returning focus to the Ask AI trigger.
+ * It is not modal and traps no focus. Content is a free slot — Ask AI
+ * functionality lives with the app, not here.
+ */
+declare const ShellRightPanel: import("react").ForwardRefExoticComponent<ShellRightPanelProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Shell, ShellBreadcrumbItem, ShellGlobalMenuItem, ShellMain, ShellMainProps, ShellNavTarget, ShellProps, ShellRightPanel, ShellRightPanelProps, ShellSidebar, ShellSidebarProps, ShellTabItem, ShellTabbar, ShellTabbarProps, ShellTopbar, ShellTopbarProps, SidebarMenuGroup, SidebarMenuItem, SidebarMenuItemBadge, useShell };