@borisj74/bv-ds 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -33124,6 +33124,7 @@ function SidebarNavigation({
   logo,
   header,
   children,
+  panel,
   footer,
   open,
   onOpenChange,
@@ -33134,6 +33135,7 @@ function SidebarNavigation({
   const isOpen = open ?? internalOpen;
   const setOpen = (v) => onOpenChange ? onOpenChange(v) : setInternalOpen(v);
   const slim = type === "slim";
+  const dualTier = type === "dualTier";
   const rail = /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -33155,8 +33157,13 @@ function SidebarNavigation({
       ]
     }
   );
+  const panelEl = dualTier && panel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-[256px] shrink-0 flex-col gap-xxs overflow-y-auto border-r border-border-secondary bg-bg-primary px-xl py-xl", children: panel }) : null;
+  const desktopRail = dualTier ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full", children: [
+    rail,
+    panelEl
+  ] }) : rail;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "hidden h-full md:flex", children: rail }),
+    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "hidden h-full md:flex", children: desktopRail }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavMenuButton, { opened: isOpen, onClick: () => setOpen(!isOpen) }),
       isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex", children: [

package/dist/index.d.cts

@@ -2372,6 +2372,12 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
     header?: ReactNode;
     /** Nav items — compose `NavItemBase` / `NavItemDropdownBase` children. */
     children?: ReactNode;
+    /**
+     * `dualTier` only — second-tier panel (256px) shown beside the primary rail,
+     * listing the active item's sub-pages. Compose `NavItemBase` rows. Ignored for
+     * other types and on mobile (where only the primary rail shows).
+     */
+    panel?: ReactNode;
     /** Footer slot — typically `NavFeaturedCard` + `NavAccountCard`. */
     footer?: ReactNode;
     /** Controlled mobile-drawer open state. Omit to use internal state. */
@@ -2385,11 +2391,11 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
  * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
- * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
- * 280px column here — compose the icon rail separately if you need the two-tier
- * layout. (flagged)
+ * `dualTier` renders a 280px primary rail plus a 256px second-tier `panel`
+ * (total 536px) for the active item's sub-pages; on mobile only the primary
+ * rail shows.
  */
-declare function SidebarNavigation({ type, logo, header, children, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
+declare function SidebarNavigation({ type, logo, header, children, panel, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
 
 interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Featured-icon slot (left of the heading). */

package/dist/index.d.ts

@@ -2372,6 +2372,12 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
     header?: ReactNode;
     /** Nav items — compose `NavItemBase` / `NavItemDropdownBase` children. */
     children?: ReactNode;
+    /**
+     * `dualTier` only — second-tier panel (256px) shown beside the primary rail,
+     * listing the active item's sub-pages. Compose `NavItemBase` rows. Ignored for
+     * other types and on mobile (where only the primary rail shows).
+     */
+    panel?: ReactNode;
     /** Footer slot — typically `NavFeaturedCard` + `NavAccountCard`. */
     footer?: ReactNode;
     /** Controlled mobile-drawer open state. Omit to use internal state. */
@@ -2385,11 +2391,11 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
  * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
- * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
- * 280px column here — compose the icon rail separately if you need the two-tier
- * layout. (flagged)
+ * `dualTier` renders a 280px primary rail plus a 256px second-tier `panel`
+ * (total 536px) for the active item's sub-pages; on mobile only the primary
+ * rail shows.
  */
-declare function SidebarNavigation({ type, logo, header, children, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
+declare function SidebarNavigation({ type, logo, header, children, panel, footer, open, onOpenChange, className, ...rest }: SidebarNavigationProps): react.JSX.Element;
 
 interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** Featured-icon slot (left of the heading). */

package/dist/index.js

@@ -33103,6 +33103,7 @@ function SidebarNavigation({
   logo,
   header,
   children,
+  panel,
   footer,
   open,
   onOpenChange,
@@ -33113,6 +33114,7 @@ function SidebarNavigation({
   const isOpen = open ?? internalOpen;
   const setOpen = (v) => onOpenChange ? onOpenChange(v) : setInternalOpen(v);
   const slim = type === "slim";
+  const dualTier = type === "dualTier";
   const rail = /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -33134,8 +33136,13 @@ function SidebarNavigation({
       ]
     }
   );
+  const panelEl = dualTier && panel ? /* @__PURE__ */ jsx("div", { className: "flex h-full w-[256px] shrink-0 flex-col gap-xxs overflow-y-auto border-r border-border-secondary bg-bg-primary px-xl py-xl", children: panel }) : null;
+  const desktopRail = dualTier ? /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+    rail,
+    panelEl
+  ] }) : rail;
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:flex", children: rail }),
+    /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:flex", children: desktopRail }),
     /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
       /* @__PURE__ */ jsx(NavMenuButton, { opened: isOpen, onClick: () => setOpen(!isOpen) }),
       isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -17,6 +17,12 @@ export interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>
   header?: ReactNode;
   /** Nav items — compose `NavItemBase` / `NavItemDropdownBase` children. */
   children?: ReactNode;
+  /**
+   * `dualTier` only — second-tier panel (256px) shown beside the primary rail,
+   * listing the active item's sub-pages. Compose `NavItemBase` rows. Ignored for
+   * other types and on mobile (where only the primary rail shows).
+   */
+  panel?: ReactNode;
   /** Footer slot — typically `NavFeaturedCard` + `NavAccountCard`. */
   footer?: ReactNode;
   /** Controlled mobile-drawer open state. Omit to use internal state. */
@@ -39,15 +45,16 @@ const WIDTH: Record<SidebarNavigationType, string> = {
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
  * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
- * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
- * 280px column here — compose the icon rail separately if you need the two-tier
- * layout. (flagged)
+ * `dualTier` renders a 280px primary rail plus a 256px second-tier `panel`
+ * (total 536px) for the active item's sub-pages; on mobile only the primary
+ * rail shows.
  */
 export function SidebarNavigation({
   type = "simple",
   logo,
   header,
   children,
+  panel,
   footer,
   open,
   onOpenChange,
@@ -58,6 +65,7 @@ export function SidebarNavigation({
   const isOpen = open ?? internalOpen;
   const setOpen = (v: boolean) => (onOpenChange ? onOpenChange(v) : setInternalOpen(v));
   const slim = type === "slim";
+  const dualTier = type === "dualTier";
 
   const rail = (
     <nav
@@ -81,10 +89,27 @@ export function SidebarNavigation({
     </nav>
   );
 
+  // dualTier: primary rail (280) + second-tier panel (256) = 536px.
+  const panelEl =
+    dualTier && panel ? (
+      <div className="flex h-full w-[256px] shrink-0 flex-col gap-xxs overflow-y-auto border-r border-border-secondary bg-bg-primary px-xl py-xl">
+        {panel}
+      </div>
+    ) : null;
+
+  const desktopRail = dualTier ? (
+    <div className="flex h-full">
+      {rail}
+      {panelEl}
+    </div>
+  ) : (
+    rail
+  );
+
   return (
     <>
       {/* Desktop rail */}
-      <aside className="hidden h-full md:flex">{rail}</aside>
+      <aside className="hidden h-full md:flex">{desktopRail}</aside>
 
       {/* Mobile trigger + drawer */}
       <div className="md:hidden">