@borisj74/bv-ds 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -3844,7 +3844,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement12, throwOnDirectAccess) {
+    module.exports = function(isValidElement13, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -3972,7 +3972,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement12(propValue)) {
+          if (!isValidElement13(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -4160,7 +4160,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement12(propValue)) {
+            if (propValue === null || isValidElement13(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -31957,7 +31957,20 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary"), children: hint })
   ] });
 }
-var IconBox16 = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children });
+function IconBox({ size = 20, className, children }) {
+  const icon = React28.isValidElement(children) ? React28.cloneElement(children, {
+    viewBox: children.props.viewBox ?? "0 0 24 24",
+    className: clsx_default("w-full h-full", children.props.className)
+  }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: clsx_default("relative flex shrink-0 items-center justify-center", className),
+      style: { width: size, height: size },
+      children: icon
+    }
+  );
+}
 var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
   online !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -31992,7 +32005,7 @@ function NavAccountCard({
   className,
   ...rest
 }) {
-  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const widthClass = breakpoint === "mobile" ? "w-full max-w-[256px]" : "w-full max-w-[280px]";
   const avatarNode = avatar ?? (src !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LayeredAvatar, { src, online }) : void 0);
   if (variant === "simple") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -32013,7 +32026,7 @@ function NavAccountCard({
               onClick: onSignOut,
               "aria-label": "Sign out",
               className: "absolute right-0 top-[15px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary transition-colors hover:text-fg-quaternary-hover",
-              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox16, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.LogOut01, { className: "w-full h-full" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.LogOut01, {}) })
             }
           )
         ]
@@ -32036,7 +32049,7 @@ function NavAccountCard({
                 "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",
                 open && "bg-bg-primary-hover"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox16, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronSelectorVertical, { className: "w-full h-full" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronSelectorVertical, {}) })
             }
           )
         ]
@@ -32193,7 +32206,7 @@ function NavItemBase({
     {
       type,
       className: clsx_default(
-        "flex w-[272px] items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        "flex w-full items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
         className
       ),
       ...rest,
@@ -32207,11 +32220,11 @@ function NavItemBase({
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
               dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 shrink-0 rounded-full bg-fg-success-secondary" }),
-              icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", children: icon }),
+              icon && /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 20, className: "text-fg-quaternary", children: icon }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
             ] }),
             badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded-full border border-utility-neutral-200 bg-utility-neutral-50 px-md py-xxs text-xs font-medium text-utility-neutral-700", children: badge }),
-            trailingChevron && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, { className: "w-full h-full" }) }) })
+            trailingChevron && /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, {}) })
           ]
         }
       )
@@ -32229,13 +32242,13 @@ function NavItemDropdownBase({
   type = "button",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex w-[272px] flex-col", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex w-full flex-col", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type,
         onClick: onToggle,
-        className: "flex items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        className: "flex w-full items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -32246,15 +32259,10 @@ function NavItemDropdownBase({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
-                icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", children: icon }),
+                icon && /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 20, className: "text-fg-quaternary", children: icon }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                bvDsIcons.ChevronDown,
-                {
-                  className: clsx_default("w-full h-full transition-transform", open && "rotate-180")
-                }
-              ) }) })
+              /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, { className: clsx_default("transition-transform", open && "rotate-180") }) })
             ]
           }
         )
@@ -32263,7 +32271,6 @@ function NavItemDropdownBase({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col pb-xs", children })
   ] });
 }
-var IconBox = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[20px] flex items-center justify-center", children });
 function NavMenuButton({
   opened = false,
   className,
@@ -32282,7 +32289,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.XClose, { className: "w-full h-full" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(IconBox, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.Menu02, { className: "w-full h-full" }) })
+      children: opened ? /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 20, className: "opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.XClose, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 20, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.Menu02, {}) })
     }
   );
 }
@@ -33131,17 +33138,20 @@ function SidebarNavigation({
     "nav",
     {
       className: clsx_default(
+        // Padding is applied per-section (Figma node 1161:8593): header 20px,
+        // nav items 16px, footer 16px/20px — not a uniform rail inset, so the
+        // full-width nav items align to their own 16px gutter without clipping.
         "flex h-full flex-col gap-2xl border-r border-border-secondary bg-bg-primary",
-        slim ? "items-center px-md py-xl" : "px-lg py-xl",
+        slim ? "items-center px-md py-xl" : "py-xl",
         WIDTH[type],
         className
       ),
       ...rest,
       children: [
-        logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx_default("shrink-0", slim ? "" : "px-md"), children: logo }),
-        header && !slim && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: header }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto", children }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-col gap-lg", children: footer })
+        logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx_default("shrink-0", slim ? "" : "px-2xl"), children: logo }),
+        header && !slim && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-2xl", children: header }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx_default("flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto", !slim && "px-xl"), children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx_default("flex shrink-0 flex-col gap-lg", !slim && "px-xl"), children: footer })
       ]
     }
   );

package/dist/index.js

@@ -3823,7 +3823,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement12, throwOnDirectAccess) {
+    module.exports = function(isValidElement13, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -3951,7 +3951,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement12(propValue)) {
+          if (!isValidElement13(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -4139,7 +4139,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement12(propValue)) {
+            if (propValue === null || isValidElement13(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -31936,7 +31936,20 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsx("span", { className: clsx_default("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary"), children: hint })
   ] });
 }
-var IconBox16 = ({ children }) => /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children });
+function IconBox({ size = 20, className, children }) {
+  const icon = isValidElement(children) ? cloneElement(children, {
+    viewBox: children.props.viewBox ?? "0 0 24 24",
+    className: clsx_default("w-full h-full", children.props.className)
+  }) : children;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default("relative flex shrink-0 items-center justify-center", className),
+      style: { width: size, height: size },
+      children: icon
+    }
+  );
+}
 var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
   /* @__PURE__ */ jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
   online !== void 0 && /* @__PURE__ */ jsx(
@@ -31971,7 +31984,7 @@ function NavAccountCard({
   className,
   ...rest
 }) {
-  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const widthClass = breakpoint === "mobile" ? "w-full max-w-[256px]" : "w-full max-w-[280px]";
   const avatarNode = avatar ?? (src !== void 0 ? /* @__PURE__ */ jsx(LayeredAvatar, { src, online }) : void 0);
   if (variant === "simple") {
     return /* @__PURE__ */ jsxs(
@@ -31992,7 +32005,7 @@ function NavAccountCard({
               onClick: onSignOut,
               "aria-label": "Sign out",
               className: "absolute right-0 top-[15px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary transition-colors hover:text-fg-quaternary-hover",
-              children: /* @__PURE__ */ jsx(IconBox16, { children: /* @__PURE__ */ jsx(LogOut01, { className: "w-full h-full" }) })
+              children: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(LogOut01, {}) })
             }
           )
         ]
@@ -32015,7 +32028,7 @@ function NavAccountCard({
                 "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",
                 open && "bg-bg-primary-hover"
               ),
-              children: /* @__PURE__ */ jsx(IconBox16, { children: /* @__PURE__ */ jsx(ChevronSelectorVertical, { className: "w-full h-full" }) })
+              children: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(ChevronSelectorVertical, {}) })
             }
           )
         ]
@@ -32172,7 +32185,7 @@ function NavItemBase({
     {
       type,
       className: clsx_default(
-        "flex w-[272px] items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        "flex w-full items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
         className
       ),
       ...rest,
@@ -32186,11 +32199,11 @@ function NavItemBase({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
               dot && /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full bg-fg-success-secondary" }),
-              icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", children: icon }),
+              icon && /* @__PURE__ */ jsx(IconBox, { size: 20, className: "text-fg-quaternary", children: icon }),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
             ] }),
             badge != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-utility-neutral-200 bg-utility-neutral-50 px-md py-xxs text-xs font-medium text-utility-neutral-700", children: badge }),
-            trailingChevron && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "w-full h-full" }) }) })
+            trailingChevron && /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
           ]
         }
       )
@@ -32208,13 +32221,13 @@ function NavItemDropdownBase({
   type = "button",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-[272px] flex-col", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col", className), children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type,
         onClick: onToggle,
-        className: "flex items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        className: "flex w-full items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
         ...rest,
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -32225,15 +32238,10 @@ function NavItemDropdownBase({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
-                icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", children: icon }),
+                icon && /* @__PURE__ */ jsx(IconBox, { size: 20, className: "text-fg-quaternary", children: icon }),
                 /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsx(
-                ChevronDown$1,
-                {
-                  className: clsx_default("w-full h-full transition-transform", open && "rotate-180")
-                }
-              ) }) })
+              /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: clsx_default("transition-transform", open && "rotate-180") }) })
             ]
           }
         )
@@ -32242,7 +32250,6 @@ function NavItemDropdownBase({
     open && /* @__PURE__ */ jsx("div", { className: "flex flex-col pb-xs", children })
   ] });
 }
-var IconBox = ({ children }) => /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[20px] flex items-center justify-center", children });
 function NavMenuButton({
   opened = false,
   className,
@@ -32261,7 +32268,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsx(IconBox, { children: /* @__PURE__ */ jsx(XClose$1, { className: "w-full h-full" }) }) }) : /* @__PURE__ */ jsx(IconBox, { children: /* @__PURE__ */ jsx(Menu02, { className: "w-full h-full" }) })
+      children: opened ? /* @__PURE__ */ jsx(IconBox, { size: 20, className: "opacity-70", children: /* @__PURE__ */ jsx(XClose$1, {}) }) : /* @__PURE__ */ jsx(IconBox, { size: 20, children: /* @__PURE__ */ jsx(Menu02, {}) })
     }
   );
 }
@@ -33110,17 +33117,20 @@ function SidebarNavigation({
     "nav",
     {
       className: clsx_default(
+        // Padding is applied per-section (Figma node 1161:8593): header 20px,
+        // nav items 16px, footer 16px/20px — not a uniform rail inset, so the
+        // full-width nav items align to their own 16px gutter without clipping.
         "flex h-full flex-col gap-2xl border-r border-border-secondary bg-bg-primary",
-        slim ? "items-center px-md py-xl" : "px-lg py-xl",
+        slim ? "items-center px-md py-xl" : "py-xl",
         WIDTH[type],
         className
       ),
       ...rest,
       children: [
-        logo && /* @__PURE__ */ jsx("div", { className: clsx_default("shrink-0", slim ? "" : "px-md"), children: logo }),
-        header && !slim && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: header }),
-        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto", children }),
-        footer && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-col gap-lg", children: footer })
+        logo && /* @__PURE__ */ jsx("div", { className: clsx_default("shrink-0", slim ? "" : "px-2xl"), children: logo }),
+        header && !slim && /* @__PURE__ */ jsx("div", { className: "shrink-0 px-2xl", children: header }),
+        /* @__PURE__ */ jsx("div", { className: clsx_default("flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto", !slim && "px-xl"), children }),
+        footer && /* @__PURE__ */ jsx("div", { className: clsx_default("flex shrink-0 flex-col gap-lg", !slim && "px-xl"), children: footer })
       ]
     }
   );

package/package.json

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

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -1,6 +1,7 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
 import { ChevronSelectorVertical, LogOut01 } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
 
 export type NavAccountCardVariant = "simple" | "card";
 export type NavAccountCardBreakpoint = "desktop" | "mobile";
@@ -32,13 +33,6 @@ export interface NavAccountCardProps
   menu?: ReactNode;
 }
 
-// 16px icon container (Figma nav account card).
-const IconBox16 = ({ children }: { children: ReactNode }) => (
-  <span className="overflow-clip relative shrink-0 size-[16px] flex items-center justify-center">
-    {children}
-  </span>
-);
-
 /**
  * Layered avatar treatment from Figma (node 7891:87996): white outer ring +
  * inner hairline border + status dot. `border-[rgba(0,0,0,0.16)]` is a one-off
@@ -97,7 +91,9 @@ export function NavAccountCard({
   className,
   ...rest
 }: NavAccountCardProps) {
-  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  // Fill the container (e.g. a padded sidebar footer) but cap at the Figma
+  // standalone width so it doesn't stretch unbounded outside a sidebar.
+  const widthClass = breakpoint === "mobile" ? "w-full max-w-[256px]" : "w-full max-w-[280px]";
   const avatarNode = avatar ?? (src !== undefined ? <LayeredAvatar src={src} online={online} /> : undefined);
 
   if (variant === "simple") {
@@ -117,9 +113,9 @@ export function NavAccountCard({
           aria-label="Sign out"
           className="absolute right-0 top-[15px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
         >
-          <IconBox16>
-            <LogOut01 className="w-full h-full" />
-          </IconBox16>
+          <IconBox size={16}>
+            <LogOut01 />
+          </IconBox>
         </button>
       </div>
     );
@@ -139,9 +135,9 @@ export function NavAccountCard({
             open && "bg-bg-primary-hover",
           )}
         >
-          <IconBox16>
-            <ChevronSelectorVertical className="w-full h-full" />
-          </IconBox16>
+          <IconBox size={16}>
+            <ChevronSelectorVertical />
+          </IconBox>
         </span>
       </button>
 

package/src/components/NavItemBase/NavItemBase.tsx

@@ -1,6 +1,7 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
 import { ChevronDown } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
 
 export interface NavItemBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -36,7 +37,7 @@ export function NavItemBase({
     <button
       type={type}
       className={clsx(
-        "flex w-[272px] items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        "flex w-full items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
         className,
       )}
       {...rest}
@@ -50,9 +51,9 @@ export function NavItemBase({
         <div className="flex min-w-0 flex-1 items-center gap-md">
           {dot && <span className="size-2 shrink-0 rounded-full bg-fg-success-secondary" />}
           {icon && (
-            <span className="flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5">
+            <IconBox size={20} className="text-fg-quaternary">
               {icon}
-            </span>
+            </IconBox>
           )}
           <span className="min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary">
             {label}
@@ -64,11 +65,9 @@ export function NavItemBase({
           </span>
         )}
         {trailingChevron && (
-          <span className="shrink-0 text-fg-quaternary">
-            <span className="overflow-clip relative shrink-0 size-[16px] flex items-center justify-center">
-              <ChevronDown className="w-full h-full" />
-            </span>
-          </span>
+          <IconBox size={16} className="text-fg-quaternary">
+            <ChevronDown />
+          </IconBox>
         )}
       </div>
     </button>

package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx

@@ -1,6 +1,7 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
 import { ChevronDown } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
 
 export interface NavItemDropdownBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -33,11 +34,11 @@ export function NavItemDropdownBase({
   ...rest
 }: NavItemDropdownBaseProps) {
   return (
-    <div className={clsx("flex w-[272px] flex-col", className)}>
+    <div className={clsx("flex w-full flex-col", className)}>
       <button
         type={type}
         onClick={onToggle}
-        className="flex items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2"
+        className="flex w-full items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2"
         {...rest}
       >
         <div
@@ -48,21 +49,17 @@ export function NavItemDropdownBase({
         >
           <div className="flex min-w-0 flex-1 items-center gap-md">
             {icon && (
-              <span className="flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5">
+              <IconBox size={20} className="text-fg-quaternary">
                 {icon}
-              </span>
+              </IconBox>
             )}
             <span className="min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary">
               {label}
             </span>
           </div>
-          <span className="shrink-0 text-fg-quaternary">
-            <span className="overflow-clip relative shrink-0 size-[16px] flex items-center justify-center">
-              <ChevronDown
-                className={clsx("w-full h-full transition-transform", open && "rotate-180")}
-              />
-            </span>
-          </span>
+          <IconBox size={16} className="text-fg-quaternary">
+            <ChevronDown className={clsx("transition-transform", open && "rotate-180")} />
+          </IconBox>
         </div>
       </button>
       {open && (

package/src/components/NavMenuButton/NavMenuButton.tsx

@@ -1,6 +1,7 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ButtonHTMLAttributes } from "react";
 import clsx from "clsx";
 import { Menu02, XClose } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
 
 export interface NavMenuButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -8,13 +9,6 @@ export interface NavMenuButtonProps
   opened?: boolean;
 }
 
-// 20px icon container (Figma nav menu button).
-const IconBox = ({ children }: { children: ReactNode }) => (
-  <span className="overflow-clip relative shrink-0 size-[20px] flex items-center justify-center">
-    {children}
-  </span>
-);
-
 /**
  * Hamburger / collapse toggle for the mobile header & sidebar. Shows the
  * hamburger when closed, an x-close (dimmed) when `opened`. Brand focus ring.
@@ -38,14 +32,12 @@ export function NavMenuButton({
       {...rest}
     >
       {opened ? (
-        <span className="opacity-70">
-          <IconBox>
-            <XClose className="w-full h-full" />
-          </IconBox>
-        </span>
+        <IconBox size={20} className="opacity-70">
+          <XClose />
+        </IconBox>
       ) : (
-        <IconBox>
-          <Menu02 className="w-full h-full" />
+        <IconBox size={20}>
+          <Menu02 />
         </IconBox>
       )}
     </button>

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -62,17 +62,22 @@ export function SidebarNavigation({
   const rail = (
     <nav
       className={clsx(
+        // Padding is applied per-section (Figma node 1161:8593): header 20px,
+        // nav items 16px, footer 16px/20px — not a uniform rail inset, so the
+        // full-width nav items align to their own 16px gutter without clipping.
         "flex h-full flex-col gap-2xl border-r border-border-secondary bg-bg-primary",
-        slim ? "items-center px-md py-xl" : "px-lg py-xl",
+        slim ? "items-center px-md py-xl" : "py-xl",
         WIDTH[type],
         className,
       )}
       {...rest}
     >
-      {logo && <div className={clsx("shrink-0", slim ? "" : "px-md")}>{logo}</div>}
-      {header && !slim && <div className="shrink-0">{header}</div>}
-      <div className="flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto">{children}</div>
-      {footer && <div className="flex shrink-0 flex-col gap-lg">{footer}</div>}
+      {logo && <div className={clsx("shrink-0", slim ? "" : "px-2xl")}>{logo}</div>}
+      {header && !slim && <div className="shrink-0 px-2xl">{header}</div>}
+      <div className={clsx("flex min-h-0 flex-1 flex-col gap-xxs overflow-y-auto", !slim && "px-xl")}>
+        {children}
+      </div>
+      {footer && <div className={clsx("flex shrink-0 flex-col gap-lg", !slim && "px-xl")}>{footer}</div>}
     </nav>
   );
 

package/src/internal/iconBox.tsx

@@ -0,0 +1,36 @@
+import { cloneElement, isValidElement, type ReactElement, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface IconBoxProps {
+  /** Box size in px (Figma: 20 for nav icons, 16 for trailing/chevron icons). */
+  size?: 16 | 20 | 24;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Sizes an icon to an exact px box and makes it scale correctly.
+ *
+ * The `@borisj74/bv-ds-icons` package (v0.1.0) ships SVGs with `width="1em"`
+ * and **no `viewBox`**, so a 24-unit glyph can't scale into a smaller box and
+ * its edges get cropped. We inject `viewBox="0 0 24 24"` (the Untitled UI grid)
+ * and `w-full h-full` onto the icon element so it scales into the box cleanly —
+ * no `overflow-clip` cropping. Icons inherit `currentColor`.
+ */
+export function IconBox({ size = 20, className, children }: IconBoxProps) {
+  const icon = isValidElement(children)
+    ? cloneElement(children as ReactElement<{ viewBox?: string; className?: string }>, {
+        viewBox: (children as ReactElement<{ viewBox?: string }>).props.viewBox ?? "0 0 24 24",
+        className: clsx("w-full h-full", (children as ReactElement<{ className?: string }>).props.className),
+      })
+    : children;
+
+  return (
+    <span
+      className={clsx("relative flex shrink-0 items-center justify-center", className)}
+      style={{ width: size, height: size }}
+    >
+      {icon}
+    </span>
+  );
+}