@borisj74/bv-ds 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var React28 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var bvDsIcons = require('@borisj74/bv-ds-icons');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -3843,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) {
@@ -3971,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."));
           }
@@ -4159,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);
@@ -31956,17 +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 ChevronSelector = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6l3-3 3 3M5 10l3 3 3-3", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var LogOut = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-  "path",
-  {
-    d: "M10.67 11.33 14 8m0 0-3.33-3.33M14 8H6M6 2H4.67c-.93 0-1.4 0-1.76.18-.31.16-.57.42-.73.73C2 3.27 2 3.73 2 4.67v6.66c0 .94 0 1.4.18 1.76.16.31.42.57.73.73.36.18.83.18 1.76.18H6",
-    stroke: "currentColor",
-    strokeWidth: "1.33",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
+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(
@@ -32001,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(
@@ -32022,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(LogOut, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.LogOut01, {}) })
             }
           )
         ]
@@ -32045,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(ChevronSelector, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronSelectorVertical, {}) })
             }
           )
         ]
@@ -32186,7 +32190,6 @@ function NavFeaturedCard({
     }
   );
 }
-var ChevronDown2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemBase({
   current = false,
   icon,
@@ -32203,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,
@@ -32217,18 +32220,17 @@ 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(ChevronDown2, {}) })
+            trailingChevron && /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, {}) })
           ]
         }
       )
     }
   );
 }
-var Chevron5 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: up ? "M4 10l4-4 4 4" : "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemDropdownBase({
   current = false,
   open = false,
@@ -32240,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",
@@ -32257,10 +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(Chevron5, { up: open }) })
+              /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, { className: clsx_default("transition-transform", open && "rotate-180") }) })
             ]
           }
         )
@@ -32269,8 +32271,6 @@ function NavItemDropdownBase({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col pb-xs", children })
   ] });
 }
-var Menu = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 10h15M2.5 5h15M2.5 15h15", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var XClose4 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavMenuButton({
   opened = false,
   className,
@@ -32289,7 +32289,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(XClose4, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Menu, {})
+      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, {}) })
     }
   );
 }
@@ -32377,7 +32377,7 @@ function NumberInput({
   const inc = () => set2(value + step);
   const Minus = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
   const Plus = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
-  const Chevron6 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  const Chevron5 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const numberEl = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -32403,9 +32403,9 @@ function NumberInput({
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     numberEl,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col self-stretch border-l border-border-primary", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron6, { up: true }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron5, { up: true }) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px w-full bg-border-primary" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron6, { up: false }) })
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron5, { up: false }) })
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(FieldWrapper, { label, required, hint, destructive, className, children: box });
@@ -33138,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

@@ -1,6 +1,7 @@
 import * as React28 from 'react';
 import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02 } from '@borisj74/bv-ds-icons';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -3822,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) {
@@ -3950,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."));
           }
@@ -4138,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);
@@ -31935,17 +31936,20 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsx("span", { className: clsx_default("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary"), children: hint })
   ] });
 }
-var ChevronSelector = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 6l3-3 3 3M5 10l3 3 3-3", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var LogOut = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    d: "M10.67 11.33 14 8m0 0-3.33-3.33M14 8H6M6 2H4.67c-.93 0-1.4 0-1.76.18-.31.16-.57.42-.73.73C2 3.27 2 3.73 2 4.67v6.66c0 .94 0 1.4.18 1.76.16.31.42.57.73.73.36.18.83.18 1.76.18H6",
-    stroke: "currentColor",
-    strokeWidth: "1.33",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
+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(
@@ -31980,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(
@@ -32001,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(LogOut, {})
+              children: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(LogOut01, {}) })
             }
           )
         ]
@@ -32024,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(ChevronSelector, {})
+              children: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(ChevronSelectorVertical, {}) })
             }
           )
         ]
@@ -32165,7 +32169,6 @@ function NavFeaturedCard({
     }
   );
 }
-var ChevronDown2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemBase({
   current = false,
   icon,
@@ -32182,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,
@@ -32196,18 +32199,17 @@ 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(ChevronDown2, {}) })
+            trailingChevron && /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
           ]
         }
       )
     }
   );
 }
-var Chevron5 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: up ? "M4 10l4-4 4 4" : "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemDropdownBase({
   current = false,
   open = false,
@@ -32219,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",
@@ -32236,10 +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(Chevron5, { up: open }) })
+              /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: clsx_default("transition-transform", open && "rotate-180") }) })
             ]
           }
         )
@@ -32248,8 +32250,6 @@ function NavItemDropdownBase({
     open && /* @__PURE__ */ jsx("div", { className: "flex flex-col pb-xs", children })
   ] });
 }
-var Menu = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M2.5 10h15M2.5 5h15M2.5 15h15", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var XClose4 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavMenuButton({
   opened = false,
   className,
@@ -32268,7 +32268,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsx(XClose4, {}) }) : /* @__PURE__ */ jsx(Menu, {})
+      children: opened ? /* @__PURE__ */ jsx(IconBox, { size: 20, className: "opacity-70", children: /* @__PURE__ */ jsx(XClose$1, {}) }) : /* @__PURE__ */ jsx(IconBox, { size: 20, children: /* @__PURE__ */ jsx(Menu02, {}) })
     }
   );
 }
@@ -32356,7 +32356,7 @@ function NumberInput({
   const inc = () => set2(value + step);
   const Minus = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
   const Plus = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
-  const Chevron6 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  const Chevron5 = ({ up }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const numberEl = /* @__PURE__ */ jsx(
     "input",
     {
@@ -32382,9 +32382,9 @@ function NumberInput({
   ] }) : /* @__PURE__ */ jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     numberEl,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col self-stretch border-l border-border-primary", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron6, { up: true }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron5, { up: true }) }),
       /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-border-primary" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron6, { up: false }) })
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsx(Chevron5, { up: false }) })
     ] })
   ] });
   return /* @__PURE__ */ jsx(FieldWrapper, { label, required, hint, destructive, className, children: box });
@@ -33117,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.4",
+  "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",
@@ -35,7 +35,8 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "@borisj74/bv-ds-icons": ">=0.1.0"
   },
   "devDependencies": {
     "@borisj74/bv-ds-icons": "^0.1.0",

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -1,5 +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";
@@ -31,24 +33,6 @@ export interface NavAccountCardProps
   menu?: ReactNode;
 }
 
-const ChevronSelector = () => (
-  <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
-    <path d="M5 6l3-3 3 3M5 10l3 3 3-3" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-const LogOut = () => (
-  <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
-    <path
-      d="M10.67 11.33 14 8m0 0-3.33-3.33M14 8H6M6 2H4.67c-.93 0-1.4 0-1.76.18-.31.16-.57.42-.73.73C2 3.27 2 3.73 2 4.67v6.66c0 .94 0 1.4.18 1.76.16.31.42.57.73.73.36.18.83.18 1.76.18H6"
-      stroke="currentColor"
-      strokeWidth="1.33"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 /**
  * 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
@@ -107,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") {
@@ -127,7 +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"
         >
-          <LogOut />
+          <IconBox size={16}>
+            <LogOut01 />
+          </IconBox>
         </button>
       </div>
     );
@@ -147,7 +135,9 @@ export function NavAccountCard({
             open && "bg-bg-primary-hover",
           )}
         >
-          <ChevronSelector />
+          <IconBox size={16}>
+            <ChevronSelectorVertical />
+          </IconBox>
         </span>
       </button>
 

package/src/components/NavItemBase/NavItemBase.tsx

@@ -1,5 +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"> {
@@ -16,12 +18,6 @@ export interface NavItemBaseProps
   trailingChevron?: boolean;
 }
 
-const ChevronDown = () => (
-  <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
-    <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
 /**
  * Base sidebar nav link (272px). `current` selects it; optional leading `dot`,
  * leading `icon`, trailing count `badge`, and `trailingChevron`. Brand focus ring.
@@ -41,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}
@@ -55,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}
@@ -69,9 +65,9 @@ export function NavItemBase({
           </span>
         )}
         {trailingChevron && (
-          <span className="shrink-0 text-fg-quaternary">
+          <IconBox size={16} className="text-fg-quaternary">
             <ChevronDown />
-          </span>
+          </IconBox>
         )}
       </div>
     </button>

package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx

@@ -1,5 +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"> {
@@ -16,12 +18,6 @@ export interface NavItemDropdownBaseProps
   children?: ReactNode;
 }
 
-const Chevron = ({ up }: { up?: boolean }) => (
-  <svg viewBox="0 0 16 16" fill="none" className="size-4" aria-hidden>
-    <path d={up ? "M4 10l4-4 4 4" : "M4 6l4 4 4-4"} stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
 /**
  * Expandable sidebar nav group (272px). The trigger mirrors `NavItemBase`; when
  * `open`, `children` (indented submenu rows) render below with a chevron flip.
@@ -38,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
@@ -53,17 +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">
-            <Chevron up={open} />
-          </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,5 +1,7 @@
 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> {
@@ -7,18 +9,6 @@ export interface NavMenuButtonProps
   opened?: boolean;
 }
 
-const Menu = () => (
-  <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
-    <path d="M2.5 10h15M2.5 5h15M2.5 15h15" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-const XClose = () => (
-  <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
-    <path d="M15 5 5 15M5 5l10 10" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
 /**
  * Hamburger / collapse toggle for the mobile header & sidebar. Shows the
  * hamburger when closed, an x-close (dimmed) when `opened`. Brand focus ring.
@@ -41,7 +31,15 @@ export function NavMenuButton({
       )}
       {...rest}
     >
-      {opened ? <span className="opacity-70"><XClose /></span> : <Menu />}
+      {opened ? (
+        <IconBox size={20} className="opacity-70">
+          <XClose />
+        </IconBox>
+      ) : (
+        <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>
+  );
+}

package/src/types/bv-ds-icons.d.ts

@@ -0,0 +1,6 @@
+// The @borisj74/bv-ds-icons package (v0.1.0) ships runtime JS but its published
+// tarball is missing the `dist/index.d.ts` its package.json points at, so TS
+// can't resolve types for the icon imports (TS7016). Declare it as an untyped
+// module until the icons package ships its declarations. Icons are simple SVG
+// React components that accept standard SVG props (className, etc.).
+declare module "@borisj74/bv-ds-icons";