@tradalab/lyra 3.9.0 → 3.12.0

package/dist/shell/index.d.ts

@@ -66,7 +66,7 @@ declare function AppShellBody({ className, children, ...rest }: ComponentProps<"
  *   <AppShellMain>{children}</AppShellMain>
  * </AppShell>
  */
-declare function StackedSidebar({ className, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
+declare function StackedSidebar({ className, children, collapsible, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
 /**
  * Narrow icon-rail column inside a {@link StackedSidebar}. Fixed to the icon
  * width, never collapses on its own (the parent `StackedSidebar` owns the
@@ -79,8 +79,16 @@ declare function SidebarDock({ className, ...rest }: ComponentProps<typeof Sideb
 /**
  * Wider content column inside a {@link StackedSidebar} (tree, list, …).
  * Fills remaining width; render conditionally to show/hide per app state.
+ *
+ * On icon-collapse the stack is one icon column wide and the panel is `hidden`, not squeezed
+ * to zero: clipped links keep their place in the tab order. `collapseToIcons` is for a panel
+ * that is a nav and has icon forms; the stylesheet then widens the collapsed stack to two
+ * columns, the dock and this panel's icons. Opt-in, because a tree or a connection list
+ * (redishub, loom, the hubs) has no icon form and would be crammed into 3rem.
  */
-declare function SidebarPanel({ className, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
+declare function SidebarPanel({ className, collapseToIcons, ...rest }: ComponentProps<typeof Sidebar> & {
+    collapseToIcons?: boolean;
+}): React.JSX.Element;
 
 /**
  * Width is decided by what is inside the page, not one page at a time.
@@ -444,6 +452,34 @@ interface TabBarProps {
  */
 declare function TabBar({ tabs, activeId, onSelect, onClose, onTogglePin, onCloseOthers, onCloseAll, labels, }: TabBarProps): React.JSX.Element | null;
 
+interface BottomNavItem {
+    id: string;
+    label: string;
+    /** The app's own icon element; the bar sizes it. */
+    icon: ReactNode;
+    /** Shows a dot on the icon. The text is what a screen reader says for the dot, so it is required to show one. */
+    badge?: string;
+}
+interface BottomNavProps {
+    items: BottomNavItem[];
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    /** Names the landmark when a screen has more than one `nav`. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A phone's top-level destinations along the bottom edge, where the thumb is. Not `TabBar`: that is an
+ * editor's row of documents that open, close and pin.
+ *
+ * It routes nothing - `onSelect` hands the id back - because auth/app switches tabs in state while
+ * lunarcalendar and pomodoro push routes, and all three drew this same bar by hand.
+ *
+ * No safe-area padding here. The app's root already pads every edge, and pomodoro's own copy padding
+ * the bottom again counted the inset twice.
+ */
+declare function BottomNav({ items, activeId, onSelect, label, className }: BottomNavProps): React.JSX.Element;
+
 interface LeadingCrumb {
     /** Where the crumb links. Omit to render it as plain text. */
     href?: string;
@@ -591,4 +627,4 @@ interface AppGlyphProps {
 /** An app's mark: its image when `icon` is a URL that loads, else a name monogram. */
 declare function AppGlyph({ icon, name, className, ownOrigin }: AppGlyphProps): React.JSX.Element;
 
-export { AppGlyph, type AppGlyphProps, AppGrid, type AppGridGroup, type AppGridItem, type AppGridProps, AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, AppSwitcher, type AppSwitcherApp, type AppSwitcherProps, type AppSwitcherSection, AppTile, Breadcrumbs, type BreadcrumbsProps, type LeadingCrumb, type MatchMode, NavBrand, type NavBrandApp, type NavBrandGroup, type NavBrandProps, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, PageHeader, type PageHeaderProps, type PageMeasure, PageShell, type PageShellProps, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };
+export { AppGlyph, type AppGlyphProps, AppGrid, type AppGridGroup, type AppGridItem, type AppGridProps, AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, AppSwitcher, type AppSwitcherApp, type AppSwitcherProps, type AppSwitcherSection, AppTile, BottomNav, type BottomNavItem, type BottomNavProps, Breadcrumbs, type BreadcrumbsProps, type LeadingCrumb, type MatchMode, NavBrand, type NavBrandApp, type NavBrandGroup, type NavBrandProps, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, PageHeader, type PageHeaderProps, type PageMeasure, PageShell, type PageShellProps, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };

package/dist/shell/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { usePlate, useCompact } from '../chunk-AIULLZYM.js';
-import { SidebarInset, SidebarProvider, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, useSidebar, defaultAccountMenuLabels, initialsOf, PlatePicker, Switch, ScrollArea, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ScrollBar, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator, Card, CardTitle, CardDescription } from '../chunk-CLNMWZPV.js';
+import { SidebarInset, SidebarProvider, useSidebar, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, defaultAccountMenuLabels, initialsOf, PlatePicker, Switch, ScrollArea, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ScrollBar, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator, Card, CardTitle, CardDescription } from '../chunk-CLNMWZPV.js';
 import '../chunk-D7DMRCDY.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItem } from '../chunk-VEWKPOMS.js';
 import { Avatar, AvatarImage, AvatarFallback, InputGroup, InputGroupAddon, InputGroupInput } from '../chunk-VXW3K5O5.js';
@@ -43,18 +43,23 @@ function AppShellBody({
 }
 function StackedSidebar({
   className,
+  children,
+  collapsible = "icon",
   ...rest
 }) {
+  const { isMobile } = useSidebar();
+  const inSheet = isMobile && collapsible !== "none";
   return /* @__PURE__ */ jsx(
     Sidebar,
     {
       variant: "sidebar",
-      collapsible: "icon",
+      collapsible,
       ...rest,
       className: cn(
         "overflow-hidden *:data-[sidebar=sidebar]:flex-row",
         className
-      )
+      ),
+      children: inSheet ? /* @__PURE__ */ jsx("div", { className: "flex size-full flex-row", children }) : children
     }
   );
 }
@@ -67,8 +72,9 @@ function SidebarDock({
     {
       ...rest,
       collapsible: "none",
+      "data-sidebar-dock": "",
       className: cn(
-        "w-[calc(var(--sidebar-width-icon)+1px)]! overflow-hidden border-r",
+        "w-[calc(var(--sidebar-width-dock,3rem)+1px)]! shrink-0 overflow-hidden border-r",
         className
       )
     }
@@ -76,6 +82,7 @@ function SidebarDock({
 }
 function SidebarPanel({
   className,
+  collapseToIcons = false,
   ...rest
 }) {
   return /* @__PURE__ */ jsx(
@@ -83,7 +90,12 @@ function SidebarPanel({
     {
       ...rest,
       collapsible: "none",
-      className: cn("flex-1 overflow-hidden", className)
+      "data-sidebar-panel-icons": collapseToIcons ? "" : void 0,
+      className: cn(
+        "min-w-0 flex-1 overflow-hidden",
+        !collapseToIcons && "group-data-[collapsible=icon]:hidden",
+        className
+      )
     }
   );
 }
@@ -670,6 +682,41 @@ function TabBar({
     }
   );
 }
+function BottomNav({ items, activeId, onSelect, label, className }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "bottom-nav",
+      "aria-label": label,
+      className: cn("grid shrink-0 border-t border-border bg-background", className),
+      style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
+      children: items.map((item) => {
+        const active = item.id === activeId;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-current": active ? "page" : void 0,
+            onClick: () => onSelect(item.id),
+            className: cn(
+              "relative flex h-14 flex-col items-center justify-center gap-1 text-xs text-muted-foreground",
+              active && "text-primary"
+            ),
+            children: [
+              active && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-6 top-0 h-0.5 bg-primary" }),
+              /* @__PURE__ */ jsxs("span", { className: "relative [&_svg]:size-5", children: [
+                item.icon,
+                item.badge && /* @__PURE__ */ jsx("span", { role: "img", "aria-label": item.badge, className: "absolute -top-0.5 -right-1 size-2.5 rounded-full bg-warning" })
+              ] }),
+              item.label
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
 function Breadcrumbs({ separator, labels, resolve, leading, ...rest }) {
   const { pathname } = useActiveRoute();
   const segments = pathname.split("/").filter(Boolean);
@@ -761,6 +808,6 @@ function AppTile({ app }) {
   );
 }
 
-export { AppGlyph, AppGrid, AppShell, AppShellBody, AppShellHeader, AppShellMain, AppSwitcher, AppTile, Breadcrumbs, NavBrand, NavGroup, NavItem, NavSection, NavUser, PageHeader, PageShell, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };
+export { AppGlyph, AppGrid, AppShell, AppShellBody, AppShellHeader, AppShellMain, AppSwitcher, AppTile, BottomNav, Breadcrumbs, NavBrand, NavGroup, NavItem, NavSection, NavUser, PageHeader, PageShell, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map