@borisj74/bv-ds 0.1.4 → 0.1.5

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;
@@ -31956,17 +31957,7 @@ 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"
-  }
-) });
+var IconBox16 = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children });
 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(
@@ -32022,7 +32013,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(IconBox16, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.LogOut01, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -32045,7 +32036,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(IconBox16, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronSelectorVertical, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -32186,7 +32177,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,
@@ -32221,14 +32211,13 @@ function NavItemBase({
               /* @__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("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" }) }) })
           ]
         }
       )
     }
   );
 }
-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,
@@ -32260,7 +32249,12 @@ function NavItemDropdownBase({
                 icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", 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("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")
+                }
+              ) }) })
             ]
           }
         )
@@ -32269,8 +32263,7 @@ 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" }) });
+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,
@@ -32289,7 +32282,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("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" }) })
     }
   );
 }
@@ -32377,7 +32370,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 +32396,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 });

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;
@@ -31935,17 +31936,7 @@ 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"
-  }
-) });
+var IconBox16 = ({ children }) => /* @__PURE__ */ jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children });
 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(
@@ -32001,7 +31992,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(IconBox16, { children: /* @__PURE__ */ jsx(LogOut01, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -32024,7 +32015,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(IconBox16, { children: /* @__PURE__ */ jsx(ChevronSelectorVertical, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -32165,7 +32156,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,
@@ -32200,14 +32190,13 @@ function NavItemBase({
               /* @__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("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" }) }) })
           ]
         }
       )
     }
   );
 }
-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,
@@ -32239,7 +32228,12 @@ function NavItemDropdownBase({
                 icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", 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("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")
+                }
+              ) }) })
             ]
           }
         )
@@ -32248,8 +32242,7 @@ 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" }) });
+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,
@@ -32268,7 +32261,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsx(XClose4, {}) }) : /* @__PURE__ */ jsx(Menu, {})
+      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" }) })
     }
   );
 }
@@ -32356,7 +32349,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 +32375,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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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,6 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
+import { ChevronSelectorVertical, LogOut01 } from "@borisj74/bv-ds-icons";
 
 export type NavAccountCardVariant = "simple" | "card";
 export type NavAccountCardBreakpoint = "desktop" | "mobile";
@@ -31,22 +32,11 @@ 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>
+// 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>
 );
 
 /**
@@ -127,7 +117,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 />
+          <IconBox16>
+            <LogOut01 className="w-full h-full" />
+          </IconBox16>
         </button>
       </div>
     );
@@ -147,7 +139,9 @@ export function NavAccountCard({
             open && "bg-bg-primary-hover",
           )}
         >
-          <ChevronSelector />
+          <IconBox16>
+            <ChevronSelectorVertical className="w-full h-full" />
+          </IconBox16>
         </span>
       </button>
 

package/src/components/NavItemBase/NavItemBase.tsx

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
+import { ChevronDown } from "@borisj74/bv-ds-icons";
 
 export interface NavItemBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -16,12 +17,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.
@@ -70,7 +65,9 @@ export function NavItemBase({
         )}
         {trailingChevron && (
           <span className="shrink-0 text-fg-quaternary">
-            <ChevronDown />
+            <span className="overflow-clip relative shrink-0 size-[16px] flex items-center justify-center">
+              <ChevronDown className="w-full h-full" />
+            </span>
           </span>
         )}
       </div>

package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
+import { ChevronDown } from "@borisj74/bv-ds-icons";
 
 export interface NavItemDropdownBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -16,12 +17,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.
@@ -62,7 +57,11 @@ export function NavItemDropdownBase({
             </span>
           </div>
           <span className="shrink-0 text-fg-quaternary">
-            <Chevron up={open} />
+            <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>
         </div>
       </button>

package/src/components/NavMenuButton/NavMenuButton.tsx

@@ -1,5 +1,6 @@
-import { type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
+import { Menu02, XClose } from "@borisj74/bv-ds-icons";
 
 export interface NavMenuButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -7,16 +8,11 @@ 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>
+// 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>
 );
 
 /**
@@ -41,7 +37,17 @@ export function NavMenuButton({
       )}
       {...rest}
     >
-      {opened ? <span className="opacity-70"><XClose /></span> : <Menu />}
+      {opened ? (
+        <span className="opacity-70">
+          <IconBox>
+            <XClose className="w-full h-full" />
+          </IconBox>
+        </span>
+      ) : (
+        <IconBox>
+          <Menu02 className="w-full h-full" />
+        </IconBox>
+      )}
     </button>
   );
 }

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";