@borisj74/bv-ds 0.1.3 → 0.1.5

package/src/components/CalendarCellDayWeekView/CalendarCellDayWeekView.tsx

@@ -1,7 +1,22 @@
 import type { ReactNode } from "react";
 import clsx from "clsx";
 
+export type CalendarTimeslotType =
+  | "empty"
+  | "30min"
+  | "60min"
+  | "90min"
+  | "120min";
+export type CalendarTimeslotState = "default" | "hover";
+
 export interface CalendarCellDayWeekViewProps {
+  /**
+   * Slot duration — drives the row height (empty/30min → 48px, 60min → 96px,
+   * 90min → 144px, 120min → 192px). Omit to keep the auto min-height.
+   */
+  type?: CalendarTimeslotType;
+  /** `hover` tints the slot (also rendered via CSS :hover). */
+  state?: CalendarTimeslotState;
   /** Event block(s) occupying the slot — typically CalendarEventDayWeekView. */
   children?: ReactNode;
   /** Renders a hover "+" add button bottom-right. */
@@ -11,6 +26,14 @@ export interface CalendarCellDayWeekViewProps {
   className?: string;
 }
 
+const heightClasses: Record<CalendarTimeslotType, string> = {
+  empty: "h-[48px]",
+  "30min": "h-[48px]",
+  "60min": "h-[96px]",
+  "90min": "h-[144px]",
+  "120min": "h-[192px]",
+};
+
 function PlusIcon() {
   return (
     <svg viewBox="0 0 20 20" fill="none" className="size-4" aria-hidden>
@@ -27,6 +50,8 @@ function PlusIcon() {
 
 /** A time-slot cell in day/week view. Holds CalendarEventDayWeekView blocks. */
 export function CalendarCellDayWeekView({
+  type,
+  state = "default",
   children,
   onAdd,
   muted = false,
@@ -35,8 +60,9 @@ export function CalendarCellDayWeekView({
   return (
     <div
       className={clsx(
-        "group relative min-h-[64px] border-b border-border-secondary p-xs font-body",
-        muted ? "bg-bg-secondary" : "bg-bg-primary",
+        "group relative border-b border-border-secondary p-xs font-body transition-colors hover:bg-bg-secondary",
+        type ? heightClasses[type] : "min-h-[64px]",
+        muted ? "bg-bg-secondary" : state === "hover" ? "bg-bg-secondary" : "bg-bg-primary",
         className,
       )}
     >

package/src/components/CalendarCellDayWeekView/index.ts

@@ -1,2 +1,6 @@
 export { CalendarCellDayWeekView } from "./CalendarCellDayWeekView";
-export type { CalendarCellDayWeekViewProps } from "./CalendarCellDayWeekView";
+export type {
+  CalendarCellDayWeekViewProps,
+  CalendarTimeslotType,
+  CalendarTimeslotState,
+} from "./CalendarCellDayWeekView";

package/src/components/CalendarColumnHeader/CalendarColumnHeader.tsx

@@ -1,30 +1,45 @@
 import clsx from "clsx";
 
 export type CalendarColumnHeaderOrientation = "horizontal" | "vertical";
+export type CalendarColumnHeaderType = "default" | "selected" | "today";
+export type CalendarBreakpoint = "desktop" | "mobile";
 
 export interface CalendarColumnHeaderProps {
   /** Weekday label (e.g. "Mon"). */
   weekday: string;
   /** Date number. */
   date: string | number;
-  /** Active day — renders the date in a brand-solid circle. */
+  /**
+   * Cell state. `selected` → brand-solid circle behind the date; `today` →
+   * brand text + brand underline. Takes precedence over `current` when set.
+   */
+  type?: CalendarColumnHeaderType;
+  /** Legacy boolean — equivalent to `type="selected"`. Kept for back-compat. */
   current?: boolean;
   orientation?: CalendarColumnHeaderOrientation;
+  /** Desktop fixes the column to 160px; mobile lets it size to content. */
+  breakpoint?: CalendarBreakpoint;
   className?: string;
 }
 
 export function CalendarColumnHeader({
   weekday,
   date,
+  type,
   current = false,
   orientation = "vertical",
+  breakpoint = "desktop",
   className,
 }: CalendarColumnHeaderProps) {
+  // `type` wins; otherwise the legacy `current` flag maps to "selected".
+  const state: CalendarColumnHeaderType = type ?? (current ? "selected" : "default");
+
   return (
     <div
       className={clsx(
         "flex items-center justify-center gap-md py-md font-body",
         orientation === "vertical" && "flex-col gap-xs",
+        breakpoint === "desktop" && "w-[160px]",
         className,
       )}
     >
@@ -32,11 +47,12 @@ export function CalendarColumnHeader({
       <span
         className={clsx(
           "flex items-center justify-center text-xs font-semibold",
-          current
-            ? "size-6 rounded-full bg-bg-brand-solid text-white"
-            : "text-text-secondary",
+          state === "selected" && "size-6 rounded-full bg-bg-brand-solid text-white",
+          state === "today" &&
+            "border-b-2 border-border-brand pb-xxs text-text-brand-secondary",
+          state === "default" && "text-text-secondary",
         )}
-        aria-current={current ? "date" : undefined}
+        aria-current={state !== "default" ? "date" : undefined}
       >
         {date}
       </span>

package/src/components/CalendarColumnHeader/index.ts

@@ -2,4 +2,6 @@ export { CalendarColumnHeader } from "./CalendarColumnHeader";
 export type {
   CalendarColumnHeaderProps,
   CalendarColumnHeaderOrientation,
+  CalendarColumnHeaderType,
+  CalendarBreakpoint,
 } from "./CalendarColumnHeader";

package/src/components/CalendarEvent/CalendarEvent.tsx

@@ -11,6 +11,9 @@ export type CalendarEventColor =
   | "orange"
   | "amber";
 
+export type CalendarEventBreakpoint = "desktop" | "mobile";
+export type CalendarEventState = "default" | "hover";
+
 export interface CalendarEventProps {
   /** Event title. */
   title: string;
@@ -19,10 +22,14 @@ export interface CalendarEventProps {
   color?: CalendarEventColor;
   /** Filled colour-fill style vs the subtle white style. */
   filled?: boolean;
+  /** Desktop renders the full chip; mobile collapses to an 8px dot. */
+  breakpoint?: CalendarEventBreakpoint;
+  /** `hover` darkens the fill one shade (filled chips only). */
+  state?: CalendarEventState;
   className?: string;
 }
 
-// Static class maps (utility-<c>-{100,500,700}) — all present in the preset.
+// Status dot (utility-<c>-500) — also the mobile collapsed form.
 const dotClasses: Record<CalendarEventColor, string> = {
   neutral: "bg-utility-neutral-500",
   brand: "bg-utility-brand-500",
@@ -35,16 +42,43 @@ const dotClasses: Record<CalendarEventColor, string> = {
   amber: "bg-utility-amber-500",
 };
 
+// Filled chip — Figma-confirmed: bg-50 / border-200 / title text-700 (node 7991:54084).
 const filledClasses: Record<CalendarEventColor, string> = {
-  neutral: "bg-utility-neutral-100 text-utility-neutral-700",
-  brand: "bg-utility-brand-100 text-utility-brand-700",
-  emerald: "bg-utility-emerald-100 text-utility-emerald-700",
-  blue: "bg-utility-blue-100 text-utility-blue-700",
-  indigo: "bg-utility-indigo-100 text-utility-indigo-700",
-  purple: "bg-utility-purple-100 text-utility-purple-700",
-  pink: "bg-utility-pink-100 text-utility-pink-700",
-  orange: "bg-utility-orange-100 text-utility-orange-700",
-  amber: "bg-utility-amber-100 text-utility-amber-700",
+  neutral: "bg-utility-neutral-50 border-utility-neutral-200 text-utility-neutral-700",
+  brand: "bg-utility-brand-50 border-utility-brand-200 text-utility-brand-700",
+  emerald: "bg-utility-emerald-50 border-utility-emerald-200 text-utility-emerald-700",
+  blue: "bg-utility-blue-50 border-utility-blue-200 text-utility-blue-700",
+  indigo: "bg-utility-indigo-50 border-utility-indigo-200 text-utility-indigo-700",
+  purple: "bg-utility-purple-50 border-utility-purple-200 text-utility-purple-700",
+  pink: "bg-utility-pink-50 border-utility-pink-200 text-utility-pink-700",
+  orange: "bg-utility-orange-50 border-utility-orange-200 text-utility-orange-700",
+  amber: "bg-utility-amber-50 border-utility-amber-200 text-utility-amber-700",
+};
+
+// Hover fill — one shade darker (bg-100).
+const filledHoverClasses: Record<CalendarEventColor, string> = {
+  neutral: "bg-utility-neutral-100",
+  brand: "bg-utility-brand-100",
+  emerald: "bg-utility-emerald-100",
+  blue: "bg-utility-blue-100",
+  indigo: "bg-utility-indigo-100",
+  purple: "bg-utility-purple-100",
+  pink: "bg-utility-pink-100",
+  orange: "bg-utility-orange-100",
+  amber: "bg-utility-amber-100",
+};
+
+// Time-label colour for filled chips (utility-<c>-600).
+const timeClasses: Record<CalendarEventColor, string> = {
+  neutral: "text-utility-neutral-600",
+  brand: "text-utility-brand-600",
+  emerald: "text-utility-emerald-600",
+  blue: "text-utility-blue-600",
+  indigo: "text-utility-indigo-600",
+  purple: "text-utility-purple-600",
+  pink: "text-utility-pink-600",
+  orange: "text-utility-orange-600",
+  amber: "text-utility-amber-600",
 };
 
 export function CalendarEvent({
@@ -52,22 +86,43 @@ export function CalendarEvent({
   time,
   color = "neutral",
   filled = false,
+  breakpoint = "desktop",
+  state = "default",
   className,
 }: CalendarEventProps) {
+  // Mobile view collapses the chip down to a single 8px status dot.
+  if (breakpoint === "mobile") {
+    return (
+      <span
+        className={clsx("inline-block size-2 rounded-full", dotClasses[color], className)}
+        role="img"
+        aria-label={time ? `${title}, ${time}` : title}
+      />
+    );
+  }
+
   return (
     <div
       className={clsx(
-        "flex w-full items-center gap-md rounded-sm px-md py-xs font-body text-xs",
+        "flex w-full items-center gap-md rounded-sm border px-md py-xs font-body text-xs",
         filled
-          ? filledClasses[color]
-          : "border border-border-secondary bg-bg-primary text-text-secondary",
+          ? clsx(filledClasses[color], state === "hover" && filledHoverClasses[color])
+          : clsx(
+              "border-border-secondary bg-bg-primary text-text-secondary",
+              state === "hover" && "bg-bg-primary-hover",
+            ),
         className,
       )}
     >
       <span className={clsx("size-2 shrink-0 rounded-full", dotClasses[color])} aria-hidden />
       <span className="truncate font-semibold">{title}</span>
       {time ? (
-        <span className={clsx("ml-auto shrink-0 font-normal", !filled && "text-text-tertiary")}>
+        <span
+          className={clsx(
+            "ml-auto shrink-0 font-normal",
+            filled ? timeClasses[color] : "text-text-tertiary",
+          )}
+        >
           {time}
         </span>
       ) : null}

package/src/components/CalendarEvent/index.ts

@@ -1,2 +1,7 @@
 export { CalendarEvent } from "./CalendarEvent";
-export type { CalendarEventProps, CalendarEventColor } from "./CalendarEvent";
+export type {
+  CalendarEventProps,
+  CalendarEventColor,
+  CalendarEventBreakpoint,
+  CalendarEventState,
+} from "./CalendarEvent";

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -6,6 +6,8 @@ export interface CalendarHeaderProps {
   title: string;
   /** Date range subtitle, e.g. "Jan 1, 2027 – Jan 31, 2027". */
   range?: string;
+  /** Alias for `range` — Batch-36 prop name. `range` wins if both set. */
+  supportingText?: string;
   /** Badge beside the title (e.g. a PillBadge "Week 1"). */
   badge?: ReactNode;
   /** Leading date chip — typically a CalendarDateIcon. */
@@ -19,11 +21,13 @@ export interface CalendarHeaderProps {
 export function CalendarHeader({
   title,
   range,
+  supportingText,
   badge,
   dateIcon,
   actions,
   className,
 }: CalendarHeaderProps) {
+  const subtitle = range ?? supportingText;
   return (
     <div
       className={clsx(
@@ -38,7 +42,7 @@ export function CalendarHeader({
             <h2 className="text-lg font-bold text-text-primary">{title}</h2>
             {badge}
           </div>
-          {range ? <p className="text-sm text-text-tertiary">{range}</p> : null}
+          {subtitle ? <p className="text-sm text-text-tertiary">{subtitle}</p> : null}
         </div>
       </div>
       {actions ? <div className="flex items-center gap-md">{actions}</div> : null}

package/src/components/CalendarRowLabel/CalendarRowLabel.tsx

@@ -2,12 +2,14 @@ import clsx from "clsx";
 
 export interface CalendarRowLabelProps {
   /** Time label for the row gutter (e.g. "9 AM"). */
-  label: string;
+  label?: string;
+  /** Alias for `label` — Batch-36 prop name. One of the two is required. */
+  time?: string;
   className?: string;
 }
 
 /** Left-gutter time label aligned to the top of a day/week-view row. */
-export function CalendarRowLabel({ label, className }: CalendarRowLabelProps) {
+export function CalendarRowLabel({ label, time, className }: CalendarRowLabelProps) {
   return (
     <div
       className={clsx(
@@ -15,7 +17,7 @@ export function CalendarRowLabel({ label, className }: CalendarRowLabelProps) {
         className,
       )}
     >
-      {label}
+      {time ?? label}
     </div>
   );
 }

package/src/components/CalendarTimemarker/CalendarTimemarker.tsx

@@ -1,12 +1,15 @@
 import clsx from "clsx";
 
 export type CalendarTimemarkerAlign = "left" | "center";
+export type CalendarTimemarkerBreakpoint = "desktop" | "mobile";
 
 export interface CalendarTimemarkerProps {
   /** Time label (e.g. "2:20 PM"). */
   time: string;
   /** Label position: leading, or centered between two line halves. */
   align?: CalendarTimemarkerAlign;
+  /** Desktop shows the time label; mobile collapses to dot + line only. */
+  breakpoint?: CalendarTimemarkerBreakpoint;
   className?: string;
 }
 
@@ -23,20 +26,23 @@ const Label = ({ time }: { time: string }) => (
 export function CalendarTimemarker({
   time,
   align = "left",
+  breakpoint = "desktop",
   className,
 }: CalendarTimemarkerProps) {
+  const showLabel = breakpoint === "desktop";
+
   return (
     <div className={clsx("flex w-full items-center gap-xs font-body", className)}>
       {align === "center" ? (
         <>
           <Dot />
           <Line />
-          <Label time={time} />
+          {showLabel ? <Label time={time} /> : null}
           <Line />
         </>
       ) : (
         <>
-          <Label time={time} />
+          {showLabel ? <Label time={time} /> : null}
           <Dot />
           <Line />
         </>

package/src/components/CalendarTimemarker/index.ts

@@ -2,4 +2,5 @@ export { CalendarTimemarker } from "./CalendarTimemarker";
 export type {
   CalendarTimemarkerProps,
   CalendarTimemarkerAlign,
+  CalendarTimemarkerBreakpoint,
 } from "./CalendarTimemarker";

package/src/components/CalendarViewDropdown/CalendarViewDropdown.tsx

@@ -12,6 +12,12 @@ export interface CalendarViewOption {
 export interface CalendarViewDropdownProps {
   value: CalendarView;
   onChange?: (value: CalendarView) => void;
+  /** Alias for `onChange` — Batch-36 prop name. Both fire on selection. */
+  onSelect?: (value: CalendarView) => void;
+  /** Controlled open state. Omit to let the component manage its own. */
+  open?: boolean;
+  /** Fires whenever the menu wants to open/close (controlled or not). */
+  onOpenChange?: (open: boolean) => void;
   options?: CalendarViewOption[];
   className?: string;
 }
@@ -39,10 +45,19 @@ function Chevron() {
 export function CalendarViewDropdown({
   value,
   onChange,
+  onSelect,
+  open: openProp,
+  onOpenChange,
   options = DEFAULT_OPTIONS,
   className,
 }: CalendarViewDropdownProps) {
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
   const selected = options.find((o) => o.value === value) ?? options[0];
 
   return (
@@ -51,7 +66,7 @@ export function CalendarViewDropdown({
         type="button"
         aria-haspopup="listbox"
         aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => setOpen(!open)}
         className="inline-flex items-center gap-md rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-skeuomorphic transition-colors hover:bg-bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary"
       >
         {selected.label}
@@ -72,6 +87,7 @@ export function CalendarViewDropdown({
                   type="button"
                   onClick={() => {
                     onChange?.(opt.value);
+                    onSelect?.(opt.value);
                     setOpen(false);
                   }}
                   className="flex w-full items-center gap-md rounded-sm px-md py-xs text-sm font-medium text-text-secondary transition-colors hover:bg-bg-primary-hover"

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