@pattern-stack/frontend-patterns 0.2.0-alpha.15 → 0.2.0-alpha.16

package/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0-alpha.16]
+
+### Added
+- **`Sidebar` renders `navigation.logo`**: the previously unused `NavigationConfig.logo` field now appears at the top of the sidebar when expanded. Strings render in a small semibold label (`text-sm font-semibold text-foreground truncate`); `ReactNode` values render as-is so consumers can pass an `<img>`, SVG, or composed branding element. The collapse toggle moves to the right of the logo when expanded; when collapsed, the toggle remains centered alone (unchanged behavior).
+
+### Changed
+- **`NavigationConfig.logo` widened to `string | ReactNode | undefined`** so consumers can pass arbitrary branding nodes, not just strings.
+
 ## [0.2.0-alpha.15]
 
 ### Fixed

package/dist/atoms/types/navigation.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 export type IconName = "Palette" | "Menu" | "X" | "Shield" | "Users" | "BarChart" | "BarChart2" | "BarChart3" | "BarChart4" | "LineChart" | "AreaChart" | "PieChart" | "Database" | "TrendingUp" | "TrendingDown" | "Activity" | "Layout" | "Home" | "Settings" | "Bell" | "Search" | "Plus" | "Edit" | "Trash2" | "Eye" | "Download" | "Upload" | "Share" | "Lock" | "Unlock" | "Mail" | "Phone" | "Calendar" | "Clock" | "MapPin" | "Map" | "Star" | "Heart" | "Bookmark" | "Tag" | "Flag" | "File" | "Folder" | "Image" | "Video" | "Music" | "ChevronRight" | "ChevronDown" | "ChevronLeft" | "ChevronUp" | "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown" | "Check" | "AlertCircle" | "Info" | "HelpCircle" | "Building" | "Truck" | "Handshake" | "User" | "Brain" | "Calculator" | "ShoppingCart" | "Utensils" | "Car" | "Zap" | "Film" | "ShoppingBag" | "Wrench" | "CreditCard" | "Wallet" | "PiggyBank" | "Receipt" | "DollarSign" | "Percent" | "Gift" | "Package" | "Coffee" | "Plane" | "Bus" | "Fuel" | "Sparkles" | "Scissors" | "Dumbbell" | "Pill" | "Stethoscope" | "GraduationCap" | "Book" | "BookOpen" | "Gamepad2" | "Tv" | "Wifi" | "Droplets" | "Flame" | "TreePine" | "Dog" | "Baby" | "Shirt" | "Sofa" | "Hammer" | "Paintbrush" | "Lightbulb";
 export interface NavigationItem {
     /** Unique identifier for the navigation item */
@@ -22,8 +23,14 @@ export interface NavigationConfig {
     items: NavigationItem[];
     /** Whether to show the default showcase navigation as fallback */
     showDefaultNavigation?: boolean;
-    /** Custom logo or title for the sidebar header */
-    logo?: string;
+    /**
+     * Custom logo or title for the sidebar header. Renders at the top of the
+     * Sidebar (left of the collapse toggle) when the sidebar is expanded; hidden
+     * when collapsed. A `string` is rendered inside a small semibold label;
+     * a `ReactNode` is rendered as-is so consumers can pass an `<img>`, SVG,
+     * or composed branding element.
+     */
+    logo?: string | ReactNode;
     /** Whether the sidebar starts expanded */
     defaultExpanded?: boolean;
 }

package/dist/atoms/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/atoms/types/navigation.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,GAAG,GACH,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,UAAU,GACV,YAAY,GACZ,cAAc,GACd,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,cAAc,GACd,aAAa,GACb,aAAa,GACb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,OAAO,GACP,aAAa,GACb,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,WAAW,GACX,MAAM,GACN,OAAO,GACP,YAAY,GAEZ,cAAc,GACd,UAAU,GACV,KAAK,GACL,KAAK,GACL,MAAM,GACN,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,KAAK,GACL,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,aAAa,GACb,eAAe,GACf,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,GACJ,MAAM,GACN,UAAU,GACV,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,EAAE,QAAQ,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/atoms/types/navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,GAAG,GACH,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,UAAU,GACV,YAAY,GACZ,cAAc,GACd,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,cAAc,GACd,aAAa,GACb,aAAa,GACb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,OAAO,GACP,aAAa,GACb,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,WAAW,GACX,MAAM,GACN,OAAO,GACP,YAAY,GAEZ,cAAc,GACd,UAAU,GACV,KAAK,GACL,KAAK,GACL,MAAM,GACN,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,KAAK,GACL,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,aAAa,GACb,eAAe,GACf,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,GACJ,MAAM,GACN,UAAU,GACV,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,EAAE,QAAQ,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/dist/index.es.js

@@ -10684,23 +10684,43 @@ const Sidebar = ({
       "data-component-name": "Sidebar",
       "data-collapsed": !isExpanded,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center p-3 pt-4", children: /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: toggleSidebar,
             className: cn(
-              "w-7 h-7 rounded-md",
-              "bg-muted/50 text-muted-foreground",
-              "flex items-center justify-center",
-              "hover:bg-muted hover:text-foreground",
-              "active:scale-95",
-              "transition-all duration-150 ease-out"
+              "flex items-center p-3 pt-4",
+              isExpanded ? "justify-between gap-2" : "justify-center"
             ),
-            "data-component-name": "SidebarToggle",
-            title: !isExpanded ? "Expand sidebar" : "Collapse sidebar",
-            children: !isExpanded ? /* @__PURE__ */ jsx(Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            "data-component-name": "SidebarHeader",
+            children: [
+              isExpanded && (navigation == null ? void 0 : navigation.logo) != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex-1 min-w-0 flex items-center",
+                  "data-component-name": "SidebarLogo",
+                  children: typeof navigation.logo === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: navigation.logo }) : navigation.logo
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleSidebar,
+                  className: cn(
+                    "w-7 h-7 rounded-md shrink-0",
+                    "bg-muted/50 text-muted-foreground",
+                    "flex items-center justify-center",
+                    "hover:bg-muted hover:text-foreground",
+                    "active:scale-95",
+                    "transition-all duration-150 ease-out"
+                  ),
+                  "data-component-name": "SidebarToggle",
+                  title: !isExpanded ? "Expand sidebar" : "Collapse sidebar",
+                  children: !isExpanded ? /* @__PURE__ */ jsx(Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ]
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx("nav", { className: "flex-1 p-3 space-y-2", "data-component-name": "SidebarNav", children: items.map((item) => {
           const [itemBasePath, itemQuery] = item.path.split("?");
           const currentPath = location.pathname;