@borisj74/bv-ds 0.1.2 → 0.1.3

package/src/components/FeaturedIcon/FeaturedIcon.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import clsx from "clsx";
+
+export type FeaturedIconColor =
+  | "brand"
+  | "gray"
+  | "error"
+  | "warning"
+  | "success";
+
+export type FeaturedIconTheme =
+  | "light"
+  | "dark"
+  | "gradient"
+  | "modern"
+  | "modern-neue";
+
+export type FeaturedIconSize = "sm" | "md" | "lg" | "xl";
+
+// `color` is Omitted because the native HTMLAttributes `color` prop collides
+// with our richer FeaturedIconColor union (see claude.md interface-collision rule).
+export interface FeaturedIconProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+  /** Icon element (e.g. from @borisj74/bv-ds-icons). Inherits currentColor. */
+  icon: React.ReactNode;
+  color?: FeaturedIconColor;
+  theme?: FeaturedIconTheme;
+  size?: FeaturedIconSize;
+}
+
+// Confirmed from Figma node 1102:5338 (Misc icons page, batch 30).
+// container px → size-N (32/40/48/56); icon px → wrapper span width/height.
+const boxSize: Record<FeaturedIconSize, string> = {
+  sm: "size-8", // 32px
+  md: "size-10", // 40px
+  lg: "size-12", // 48px
+  xl: "size-14", // 56px
+};
+
+const iconPx: Record<FeaturedIconSize, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+};
+
+// Light theme = the only circular treatment; modern-neue = 10px (radius-lg);
+// every other theme = 12px (radius-xl).
+function radiusFor(theme: FeaturedIconTheme): string {
+  if (theme === "light") return "rounded-full";
+  if (theme === "modern-neue") return "rounded-lg";
+  return "rounded-xl";
+}
+
+// Light: tinted secondary bg + colour-matched icon (fg). Gray maps to the
+// neutral semantic layer (no dedicated gray featured token in the preset).
+const lightBg: Record<FeaturedIconColor, string> = {
+  brand: "bg-bg-brand-secondary",
+  gray: "bg-bg-secondary",
+  error: "bg-bg-error-secondary",
+  warning: "bg-bg-warning-secondary",
+  success: "bg-bg-success-secondary",
+};
+
+const lightFg: Record<FeaturedIconColor, string> = {
+  brand: "text-fg-brand-primary",
+  gray: "text-fg-secondary",
+  error: "text-fg-error-primary",
+  warning: "text-fg-warning-primary",
+  success: "text-fg-success-primary",
+};
+
+// Dark: solid bg + white icon + skeuomorphic shadow + a 2px white/12 highlight
+// border (arbitrary value — no Figma variable). Gray uses the secondary solid.
+const darkBg: Record<FeaturedIconColor, string> = {
+  brand: "bg-bg-brand-solid",
+  gray: "bg-bg-secondary-solid",
+  error: "bg-bg-error-solid",
+  warning: "bg-bg-warning-solid",
+  success: "bg-bg-success-solid",
+};
+
+// Gradient: 2-stop diagonal fill (utility-{family}-50 → -200) + white icon.
+const gradientFill: Record<FeaturedIconColor, string> = {
+  brand: "bg-gradient-to-br from-utility-brand-50 to-utility-brand-200",
+  gray: "bg-gradient-to-br from-utility-neutral-50 to-utility-neutral-200",
+  error: "bg-gradient-to-br from-utility-red-50 to-utility-red-200",
+  warning: "bg-gradient-to-br from-utility-amber-50 to-utility-amber-200",
+  success: "bg-gradient-to-br from-utility-green-50 to-utility-green-200",
+};
+
+/**
+ * FeaturedIcon — Untitled UI "Featured icon" (node 1102:5338).
+ *
+ * A coloured container wrapping an icon, used by Empty state, Alert, Metric,
+ * Notification, etc. Pass the icon via the `icon` slot — it inherits
+ * currentColor, so no fill/stroke props are needed.
+ *
+ * `modern` and `modern-neue` are neutral white-card treatments (gray-only in
+ * Figma); the `color` prop is ignored for those two themes.
+ */
+export function FeaturedIcon({
+  icon,
+  color = "brand",
+  theme = "light",
+  size = "md",
+  className,
+  ...rest
+}: FeaturedIconProps) {
+  const px = iconPx[size];
+
+  const themeClasses = clsx(
+    theme === "light" && [lightBg[color], lightFg[color]],
+    theme === "dark" && [
+      darkBg[color],
+      "text-fg-white border-2 border-[rgba(255,255,255,0.12)] shadow-skeuomorphic",
+    ],
+    theme === "gradient" && [gradientFill[color], "text-fg-white"],
+    theme === "modern" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-skeuomorphic",
+    ],
+    theme === "modern-neue" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-xs",
+    ],
+  );
+
+  return (
+    <span
+      className={clsx(
+        "inline-flex shrink-0 items-center justify-center",
+        boxSize[size],
+        radiusFor(theme),
+        themeClasses,
+        className,
+      )}
+      {...rest}
+    >
+      <span
+        aria-hidden="true"
+        style={{ width: px, height: px, display: "inline-flex" }}
+      >
+        {icon}
+      </span>
+    </span>
+  );
+}

package/src/components/FeaturedIcon/index.ts

@@ -0,0 +1,7 @@
+export { FeaturedIcon } from "./FeaturedIcon";
+export type {
+  FeaturedIconProps,
+  FeaturedIconColor,
+  FeaturedIconTheme,
+  FeaturedIconSize,
+} from "./FeaturedIcon";

package/src/components/MessageAction/MessageAction.tsx

@@ -100,7 +100,7 @@ const inputBox =
  * - **minimal**  — single-line field + square send button (row).
  * - **textarea** — multiline box, attach/emoji + brand Send pinned bottom-right,
  *   record button top-right.
- * - **advanced** — AI prompt box on `bg-secondary`; author chip + Shortcuts/Attach
+ * - **advanced** — AI prompt box on `bg-bg-secondary`; author chip + Shortcuts/Attach
  *   footer, mic top-right, resize handle.
  *
  * Renders real `<input>`/`<textarea>` (controlled via `value`/`onValueChange`);

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -86,7 +86,7 @@ const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: React
  * 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
+ * The active account is marked with `bg-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

package/src/components/NavAccountCardMenuItem/NavAccountCardMenuItem.tsx

@@ -27,7 +27,7 @@ export interface NavAccountCardMenuItemProps
  * 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).
+ *   radio with `bg-bg-brand-solid` (the active-account marker).
  */
 export function NavAccountCardMenuItem({
   type = "menu-item",

package/src/components/NavButton/NavButton.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface NavButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  /** Active route — applies the selected (`bg-secondary`) background. */
+  /** Active route — applies the selected (`bg-bg-secondary`) background. */
   current?: boolean;
   /** Render only the leading icon (square button). */
   iconOnly?: boolean;

package/src/components/NavFeaturedCard/NavFeaturedCard.tsx

@@ -11,7 +11,7 @@ export interface NavFeaturedCardProps
   children?: ReactNode;
   /** CTA row — compose Button(s) / link buttons. */
   action?: ReactNode;
-  /** Bordered surface (`bg-primary` + border) vs subtle (`bg-secondary`). */
+  /** Bordered surface (`bg-bg-primary` + border) vs subtle (`bg-bg-secondary`). */
   bordered?: boolean;
   /** Renders an x-close button top-right. */
   onClose?: () => void;

package/src/components/NavItemBase/NavItemBase.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface NavItemBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  /** Active route — selected (`bg-secondary`) background. */
+  /** Active route — selected (`bg-bg-secondary`) background. */
   current?: boolean;
   /** Leading icon (20px). */
   icon?: ReactNode;

package/src/components/NavItemDropdownBase/NavItemDropdownBase.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 
 export interface NavItemDropdownBaseProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-  /** Active group — selected (`bg-secondary`) background on the trigger. */
+  /** Active group — selected (`bg-bg-secondary`) background on the trigger. */
   current?: boolean;
   /** Expanded state — reveals the submenu. */
   open?: boolean;

package/src/components/PageHeader/PageHeader.tsx

@@ -20,7 +20,7 @@ export interface PageHeaderProps
   actions?: ReactNode;
   /** Optional breadcrumbs slot above the title. */
   breadcrumbs?: ReactNode;
-  /** Banner background image (banner styles); falls back to `bg-tertiary`. */
+  /** Banner background image (banner styles); falls back to `bg-bg-tertiary`. */
   bannerUrl?: string;
 }
 

package/src/components/PaginationDotIndicator/PaginationDotIndicator.tsx

@@ -13,7 +13,7 @@ export interface PaginationDotIndicatorProps
 
 /**
  * Single pagination indicator — a dot or a line. `current` fills it with the
- * brand colour, otherwise `bg-quaternary`. Dimensions per size/variant match
+ * brand colour, otherwise `bg-bg-quaternary`. Dimensions per size/variant match
  * Figma (dot md 8 / lg 10; line md h6 / lg h8, both 40 wide).
  */
 export function PaginationDotIndicator({

package/src/components/ProgressBar/ProgressBar.tsx

@@ -32,7 +32,7 @@ const Bubble = ({ pct, where }: { pct: number; where: "top" | "bottom" }) => (
 
 /**
  * Progress bar — pure CSS, no chart lib. `value` (0–100) drives an animated fill
- * (`fg-brand-primary` on a `bg-quaternary` track). `label`: none / right (inline
+ * (`fg-brand-primary` on a `bg-bg-quaternary` track). `label`: none / right (inline
  * %) / bottom (% under) / top|bottom-floating (tooltip bubble tracking the fill).
  */
 export function ProgressBar({ value, label = "none", className, ...rest }: ProgressBarProps) {

package/src/components/RadioGroupItem/RadioGroupItem.tsx

@@ -50,7 +50,7 @@ function Control({ kind, selected, size }: { kind: "radio" | "checkbox"; selecte
 
 /**
  * Selectable radio/checkbox card. One component over the 6 Figma `type`s — the
- * shared shell (border, padding, `radius-xl`, selected `border-brand`) is
+ * shared shell (border, padding, `radius-xl`, selected `border-border-brand`) is
  * constant; only the leading element and control placement change. `radioButton`
  * uses a radio (leading); `checkbox` a checkbox (leading); `iconSimple`/`avatar`/
  * `paymentIcon` put a `leading` visual on the left and the checkbox trailing;

package/src/components/SelectMenuItem/SelectMenuItem.tsx

@@ -40,8 +40,8 @@ function CheckboxBox({ selected, big }: { selected: boolean; big: boolean }) {
 /**
  * List-item primitive for `Select` and Multi-select dropdowns. One component over
  * both: `multi` swaps the trailing selected-check for a leading checkbox. The
- * shared shell is a full-width row with hover `bg-primary-hover`; `label` is
- * `text-primary`, `supportingText` sits inline in `text-tertiary`.
+ * shared shell is a full-width row with hover `bg-bg-primary-hover`; `label` is
+ * `text-text-primary`, `supportingText` sits inline in `text-text-tertiary`.
  */
 export function SelectMenuItem({
   label,

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -37,7 +37,7 @@ const WIDTH: Record<SidebarNavigationType, string> = {
  * a fixed-width rail (`slim` collapses to 68px). Composes existing `Nav*`
  * components via slots/children — it does not reimplement nav items. On mobile
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
- * `bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
+ * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
  * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
  * 280px column here — compose the icon rail separately if you need the two-tier

package/src/components/SocialButton/SocialButton.tsx

@@ -51,8 +51,8 @@ const GLYPH: Record<SocialBrand, ReactNode> = {
 };
 
 /**
- * Social-login button. All themes share the neutral white shell (border-primary,
- * shadow-xs, `text-secondary` label) — `theme` only controls the brand glyph:
+ * Social-login button. All themes share the neutral white shell (border-border-primary,
+ * shadow-xs, `text-text-secondary` label) — `theme` only controls the brand glyph:
  * `color`/`brand` = full color, `gray` = monochrome (CSS grayscale, flagged
  * approximation of UntitledUI's true single-color gray logos). `iconOnly` drops
  * the label for a square button.

package/src/components/TableHeaderLabel/TableHeaderLabel.tsx

@@ -22,7 +22,7 @@ function ArrowIcon({ arrow }: { arrow: Exclude<TableHeaderLabelArrow, "none"> })
 }
 
 /**
- * Column-header label — `text-xs` semibold in `text-quaternary` (→ `text-tertiary`
+ * Column-header label — `text-xs` semibold in `text-text-quaternary` (→ `text-text-tertiary`
  * on hover), with an optional sort `arrow` and trailing `helpIcon` slot. Consumed
  * by `TableHeaderCell`.
  */

package/src/components/Toggle/Toggle.tsx

@@ -22,7 +22,7 @@ const KNOB: Record<ToggleSize, string> = { sm: "size-4", md: "size-5" };
 const TRAVEL: Record<ToggleSize, string> = { sm: "translate-x-4", md: "translate-x-5" };
 
 /**
- * Switch toggle. `default` = filled track (`bg-brand-solid` when on); `slim` = a
+ * Switch toggle. `default` = filled track (`bg-bg-brand-solid` when on); `slim` = a
  * thinner track with a bordered knob (uses the `toggle-slim-border-pressed`
  * tokens when on). The `_Toggle base` control is inline (not a separate export).
  * Controlled via `checked`/`onCheckedChange`; optional `label`/`supportingText`.

package/src/components/Tooltip/Tooltip.tsx

@@ -30,7 +30,7 @@ const ARROW_POS: Record<Exclude<TooltipArrow, "none">, string> = {
 };
 
 /**
- * Presentational tooltip bubble (dark `bg-primary-solid`, white text). `text` is
+ * Presentational tooltip bubble (dark `bg-bg-primary-solid`, white text). `text` is
  * the heading; `supportingText` adds a second `utility-neutral-300` line (max
  * 296px). `arrow` positions a small pointer on the bubble edge (rendered as a
  * rotated square). Positioning relative to a trigger is the caller's job.

package/src/components/TreeViewItem/TreeViewItem.tsx

@@ -27,7 +27,7 @@ export interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * One row of a `TreeView`. Composes `TreeViewConnector` for the `level` indent
  * guides, plus an optional expand chevron, `checkbox`, `icon` and label. Selected
- * → `bg-secondary`; hover → `bg-primary-hover`. Width is fluid (parent controls).
+ * → `bg-bg-secondary`; hover → `bg-bg-primary-hover`. Width is fluid (parent controls).
  */
 export function TreeViewItem({
   size = "sm",

package/src/components/VerificationCodeInput/VerificationCodeInput.tsx

@@ -27,7 +27,7 @@ const CELL: Record<VerificationCodeSize, string> = {
  * OTP-style verification code input. `digits` 4 or 6 separate single-character
  * cells (6 shows a centre "-" separator); large display typography
  * (`display-lg`/`display-xl`). Controlled via `value`/`onChange`; auto-advances
- * focus on entry and steps back on backspace. Cell borders use `border-primary`
+ * focus on entry and steps back on backspace. Cell borders use `border-border-primary`
  * (= `utility-neutral-300` #d4d4d4, same value).
  */
 export function VerificationCodeInput({

package/src/index.ts

@@ -62,6 +62,7 @@ export * from "./components/DropdownMenuHeader";
 export * from "./components/DropdownMenuItemInsetIcon";
 export * from "./components/DropdownMenuListItem";
 export * from "./components/EmptyState";
+export * from "./components/FeaturedIcon";
 export * from "./components/FeedItemBase";
 export * from "./components/FileUpload";
 export * from "./components/FileUploadBase";