@borisj74/bv-ds 0.1.0

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -0,0 +1,124 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type NavAccountCardVariant = "simple" | "card";
+
+export interface NavAccountCardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** `simple` = inline row + sign-out button · `card` = boxed trigger that opens a menu. */
+  variant?: NavAccountCardVariant;
+  /** card only — whether the dropdown menu is shown. */
+  open?: boolean;
+  avatar?: ReactNode;
+  name?: ReactNode;
+  email?: ReactNode;
+  /** card only — toggles the dropdown (fires on trigger click). */
+  onToggle?: () => void;
+  /** simple only — sign-out button handler. */
+  onSignOut?: () => void;
+  /**
+   * card + open — dropdown content. Compose `NavAccountCardMenuItem` rows,
+   * dividers and an add-account / sign-out footer here.
+   */
+  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>
+);
+
+const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: ReactNode; email?: ReactNode }) => (
+  <div className="flex min-w-0 flex-1 items-center gap-md">
+    {avatar && <span className="shrink-0">{avatar}</span>}
+    <div className="flex min-w-0 flex-col text-left">
+      <span className="truncate text-sm font-semibold text-text-primary">{name}</span>
+      <span className="truncate text-sm text-text-tertiary">{email}</span>
+    </div>
+  </div>
+);
+
+/**
+ * Account switcher for the bottom of a sidebar. `simple` renders an inline row
+ * with a sign-out button; `card` renders a boxed trigger that, when `open`,
+ * reveals a dropdown (the `menu` slot — compose `NavAccountCardMenuItem` rows).
+ *
+ * The active account is marked with `bg-brand-solid` (the radio inside the
+ * account menu items). Note: Figma opens the desktop menu as a right-side
+ * flyout; this opens it above the trigger (`bottom-full`) — a layout
+ * simplification (see figma-map). Width defaults to 280px; override via
+ * `className` for mobile (256px).
+ */
+export function NavAccountCard({
+  variant = "card",
+  open = false,
+  avatar,
+  name,
+  email,
+  onToggle,
+  onSignOut,
+  menu,
+  className,
+  ...rest
+}: NavAccountCardProps) {
+  if (variant === "simple") {
+    return (
+      <div
+        className={clsx(
+          "relative flex w-[280px] items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          className,
+        )}
+        {...rest}
+      >
+        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <button
+          type="button"
+          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"
+        >
+          <LogOut />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("relative w-[280px]", className)} {...rest}>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="relative flex w-full items-start gap-xl rounded-xl border border-border-secondary bg-bg-primary-alt p-lg text-left shadow-xs"
+      >
+        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <span
+          className={clsx(
+            "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",
+            open && "bg-bg-primary-hover",
+          )}
+        >
+          <ChevronSelector />
+        </span>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 z-10 mb-2 w-full overflow-hidden rounded-xl border border-border-secondary-alt bg-bg-secondary-alt shadow-lg">
+          {menu}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/NavAccountCard/index.ts

@@ -0,0 +1,2 @@
+export { NavAccountCard } from "./NavAccountCard";
+export type { NavAccountCardProps, NavAccountCardVariant } from "./NavAccountCard";

package/src/components/NavAccountCardMenuItem/NavAccountCardMenuItem.tsx

@@ -0,0 +1,101 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type NavAccountCardMenuItemType = "menu-item" | "account";
+
+export interface NavAccountCardMenuItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "name" | "type"> {
+  /** `menu-item` = icon + label (+ shortcut) · `account` = avatar + name/email + radio. */
+  type?: NavAccountCardMenuItemType;
+  /** Marks the row as the active account / current item (radio filled, hover bg). */
+  current?: boolean;
+  /** menu-item: leading icon (20px). */
+  icon?: ReactNode;
+  /** menu-item: row label. */
+  label?: ReactNode;
+  /** menu-item: trailing keyboard-shortcut chip. */
+  shortcut?: ReactNode;
+  /** account: avatar slot (40px). */
+  avatar?: ReactNode;
+  /** account: display name. */
+  name?: ReactNode;
+  /** account: secondary line (email). */
+  email?: ReactNode;
+}
+
+/**
+ * A single row inside `NavAccountCard`'s dropdown. Two shapes:
+ * - `menu-item` — icon + label + optional shortcut chip (View profile, Settings…).
+ * - `account` — avatar + name/email with a radio indicator; `current` fills the
+ *   radio with `bg-brand-solid` (the active-account marker).
+ */
+export function NavAccountCardMenuItem({
+  type = "menu-item",
+  current = false,
+  icon,
+  label,
+  shortcut,
+  avatar,
+  name,
+  email,
+  className,
+  ...rest
+}: NavAccountCardMenuItemProps) {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "flex w-full items-center px-sm text-left",
+        className,
+      )}
+      {...rest}
+    >
+      <div
+        className={clsx(
+          "flex min-w-0 flex-1 items-center gap-lg overflow-hidden rounded-sm p-md transition-colors",
+          current ? "bg-bg-primary-hover" : "hover:bg-bg-primary-hover",
+        )}
+      >
+        {type === "menu-item" ? (
+          <>
+            <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">
+                  {icon}
+                </span>
+              )}
+              <span className="min-w-0 flex-1 text-sm font-semibold text-text-secondary">
+                {label}
+              </span>
+            </div>
+            {shortcut && (
+              <span className="shrink-0 rounded-xs border border-border-secondary px-xs py-px text-xs font-medium text-text-tertiary">
+                {shortcut}
+              </span>
+            )}
+          </>
+        ) : (
+          <>
+            <div className="flex min-w-0 flex-1 items-center gap-md">
+              {avatar && <span className="shrink-0">{avatar}</span>}
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate text-sm font-semibold text-text-primary">{name}</span>
+                <span className="truncate text-sm text-text-tertiary">{email}</span>
+              </span>
+            </div>
+            <span
+              className={clsx(
+                "flex size-4 shrink-0 items-center justify-center rounded-full",
+                current
+                  ? "bg-bg-brand-solid"
+                  : "border border-border-primary",
+              )}
+            >
+              {current && <span className="size-1.5 rounded-full bg-fg-white" />}
+            </span>
+          </>
+        )}
+      </div>
+    </button>
+  );
+}

package/src/components/NavAccountCardMenuItem/index.ts

@@ -0,0 +1,5 @@
+export { NavAccountCardMenuItem } from "./NavAccountCardMenuItem";
+export type {
+  NavAccountCardMenuItemProps,
+  NavAccountCardMenuItemType,
+} from "./NavAccountCardMenuItem";

package/src/components/NavButton/NavButton.tsx

@@ -0,0 +1,50 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface NavButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /** Active route — applies the selected (`bg-secondary`) background. */
+  current?: boolean;
+  /** Render only the leading icon (square button). */
+  iconOnly?: boolean;
+  /** Leading icon (20px). */
+  icon?: ReactNode;
+  /** Label text (hidden when `iconOnly`). */
+  children?: ReactNode;
+}
+
+/**
+ * Header-nav button (the horizontal top-bar variant, distinct from the sidebar
+ * `NavItemBase`). Pill shape; `current` marks the active route. Focus ring uses
+ * the brand focus colour.
+ */
+export function NavButton({
+  current = false,
+  iconOnly = false,
+  icon,
+  children,
+  className,
+  type = "button",
+  ...rest
+}: NavButtonProps) {
+  return (
+    <button
+      type={type}
+      className={clsx(
+        "inline-flex items-center justify-center gap-xs overflow-hidden rounded-sm text-sm font-semibold text-text-secondary outline-none transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        iconOnly ? "p-md" : "px-md py-sm",
+        current ? "bg-bg-secondary hover:bg-bg-secondary-hover" : "hover:bg-bg-primary-hover",
+        className,
+      )}
+      {...rest}
+    >
+      {icon && (
+        <span className="flex size-5 shrink-0 items-center justify-center [&>svg]:size-5">
+          {icon}
+        </span>
+      )}
+      {!iconOnly && <span className="px-xxs">{children}</span>}
+    </button>
+  );
+}

package/src/components/NavButton/index.ts

@@ -0,0 +1,2 @@
+export { NavButton } from "./NavButton";
+export type { NavButtonProps } from "./NavButton";

package/src/components/NavFeaturedCard/NavFeaturedCard.tsx

@@ -0,0 +1,82 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface NavFeaturedCardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Featured-icon / media slot rendered at the top. */
+  icon?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  /** Body content — progress bar, list, QR code, input, etc. */
+  children?: ReactNode;
+  /** CTA row — compose Button(s) / link buttons. */
+  action?: ReactNode;
+  /** Bordered surface (`bg-primary` + border) vs subtle (`bg-secondary`). */
+  bordered?: boolean;
+  /** Renders an x-close button top-right. */
+  onClose?: () => void;
+}
+
+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>
+);
+
+/**
+ * Featured card for the bottom of a sidebar — a generic shell, not 13 variants.
+ * The Figma `Type` set (Progress bar, Upgrade CTA, Message, Current projects,
+ * QR code, …) is expressed by filling the slots: `icon` / `title` / `subtitle`
+ * for the header, `children` for the body (progress bar, list, QR, input…), and
+ * `action` for the CTA row. See the stories for the 12 type recipes.
+ */
+export function NavFeaturedCard({
+  icon,
+  title,
+  subtitle,
+  children,
+  action,
+  bordered = false,
+  onClose,
+  className,
+  ...rest
+}: NavFeaturedCardProps) {
+  const hasHeader = icon || title || subtitle;
+  return (
+    <div
+      className={clsx(
+        "relative flex w-[248px] flex-col gap-xl rounded-xl p-xl",
+        bordered ? "border border-border-secondary bg-bg-primary" : "bg-bg-secondary",
+        className,
+      )}
+      {...rest}
+    >
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Dismiss"
+          className="absolute right-1 top-1 flex size-9 items-center justify-center rounded-md text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+        >
+          <XClose />
+        </button>
+      )}
+
+      {hasHeader && (
+        <div className="flex flex-col gap-xs">
+          {icon && <div className="shrink-0">{icon}</div>}
+          {(title || subtitle) && (
+            <div className="flex flex-col gap-xs pr-3xl">
+              {title && <p className="text-sm font-semibold text-text-primary">{title}</p>}
+              {subtitle && <p className="text-sm text-text-tertiary">{subtitle}</p>}
+            </div>
+          )}
+        </div>
+      )}
+
+      {children}
+
+      {action && <div className="flex items-center gap-lg">{action}</div>}
+    </div>
+  );
+}

package/src/components/NavFeaturedCard/index.ts

@@ -0,0 +1,2 @@
+export { NavFeaturedCard } from "./NavFeaturedCard";
+export type { NavFeaturedCardProps } from "./NavFeaturedCard";

package/src/components/NavItemBase/NavItemBase.tsx

@@ -0,0 +1,79 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface NavItemBaseProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /** Active route — selected (`bg-secondary`) background. */
+  current?: boolean;
+  /** Leading icon (20px). */
+  icon?: ReactNode;
+  label?: ReactNode;
+  /** Leading status dot (8px, success green). */
+  dot?: boolean;
+  /** Trailing count badge — pass a number/string. */
+  badge?: ReactNode;
+  /** Trailing chevron (for expandable groups). */
+  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.
+ */
+export function NavItemBase({
+  current = false,
+  icon,
+  label,
+  dot = false,
+  badge,
+  trailingChevron = false,
+  className,
+  type = "button",
+  ...rest
+}: NavItemBaseProps) {
+  return (
+    <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",
+        className,
+      )}
+      {...rest}
+    >
+      <div
+        className={clsx(
+          "flex max-h-9 flex-1 items-center gap-lg rounded-sm p-md transition-colors",
+          current ? "bg-bg-secondary" : "hover:bg-bg-primary-hover",
+        )}
+      >
+        <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">
+              {icon}
+            </span>
+          )}
+          <span className="min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary">
+            {label}
+          </span>
+        </div>
+        {badge != null && (
+          <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">
+            {badge}
+          </span>
+        )}
+        {trailingChevron && (
+          <span className="shrink-0 text-fg-quaternary">
+            <ChevronDown />
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}

package/src/components/NavItemBase/index.ts

@@ -0,0 +1,2 @@
+export { NavItemBase } from "./NavItemBase";
+export type { NavItemBaseProps } from "./NavItemBase";

package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx

@@ -0,0 +1,74 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface NavItemDropdownBaseProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /** Active group — selected (`bg-secondary`) background on the trigger. */
+  current?: boolean;
+  /** Expanded state — reveals the submenu. */
+  open?: boolean;
+  /** Trigger icon (20px). */
+  icon?: ReactNode;
+  label?: ReactNode;
+  /** Toggles open/closed. */
+  onToggle?: () => void;
+  /** Submenu rows (rendered when `open`) — compose indented `NavItemBase`s. */
+  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.
+ */
+export function NavItemDropdownBase({
+  current = false,
+  open = false,
+  icon,
+  label,
+  onToggle,
+  children,
+  className,
+  type = "button",
+  ...rest
+}: NavItemDropdownBaseProps) {
+  return (
+    <div className={clsx("flex w-[272px] 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"
+        {...rest}
+      >
+        <div
+          className={clsx(
+            "flex max-h-9 flex-1 items-center gap-lg rounded-sm p-md transition-colors",
+            current ? "bg-bg-secondary" : "hover:bg-bg-primary-hover",
+          )}
+        >
+          <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">
+                {icon}
+              </span>
+            )}
+            <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>
+        </div>
+      </button>
+      {open && (
+        <div className="flex flex-col pb-xs">{children}</div>
+      )}
+    </div>
+  );
+}

package/src/components/NavItemDropdownBase/index.ts

@@ -0,0 +1,2 @@
+export { NavItemDropdownBase } from "./NavItemDropdownBase";
+export type { NavItemDropdownBaseProps } from "./NavItemDropdownBase";

package/src/components/NavMenuButton/NavMenuButton.tsx

@@ -0,0 +1,47 @@
+import { type ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export interface NavMenuButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Open state — swaps the hamburger for an x-close icon. */
+  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.
+ */
+export function NavMenuButton({
+  opened = false,
+  className,
+  type = "button",
+  ...rest
+}: NavMenuButtonProps) {
+  return (
+    <button
+      type={type}
+      aria-label={opened ? "Close menu" : "Open menu"}
+      aria-expanded={opened}
+      className={clsx(
+        "flex items-center justify-center rounded-md p-md text-fg-secondary outline-none transition-colors",
+        "hover:bg-bg-primary-hover focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        className,
+      )}
+      {...rest}
+    >
+      {opened ? <span className="opacity-70"><XClose /></span> : <Menu />}
+    </button>
+  );
+}

package/src/components/NavMenuButton/index.ts

@@ -0,0 +1,2 @@
+export { NavMenuButton } from "./NavMenuButton";
+export type { NavMenuButtonProps } from "./NavMenuButton";