@borisj74/bv-ds 0.1.0

package/src/components/AvatarAddButton/AvatarAddButton.tsx

@@ -0,0 +1,65 @@
+import type { ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type AvatarAddButtonSize = "xs" | "sm" | "md";
+
+export interface AvatarAddButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+  size?: AvatarAddButtonSize;
+  /** Tooltip text + accessible label (Figma hover shows "Add user"). */
+  label?: string;
+}
+
+const sizeClass: Record<AvatarAddButtonSize, string> = {
+  xs: "size-6", // 24px
+  sm: "size-8", // 32px
+  md: "size-10", // 40px
+};
+
+function PlusIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="h-1/2 w-1/2" aria-hidden>
+      <path
+        d="M10 4.167v11.666M4.167 10h11.666"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function AvatarAddButton({
+  size = "md",
+  label,
+  className,
+  ...rest
+}: AvatarAddButtonProps) {
+  return (
+    <span className="group relative inline-flex">
+      <button
+        type="button"
+        aria-label={label ?? "Add"}
+        className={clsx(
+          "flex items-center justify-center rounded-full border border-dashed border-border-primary text-fg-quaternary transition-colors",
+          "hover:border-border-brand hover:text-fg-quaternary-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",
+          sizeClass[size],
+          className,
+        )}
+        {...rest}
+      >
+        <PlusIcon />
+      </button>
+      {label ? (
+        <span
+          role="tooltip"
+          className="pointer-events-none absolute bottom-full left-1/2 mb-xs -translate-x-1/2 whitespace-nowrap rounded-md bg-bg-primary-solid px-md py-xs text-xs font-semibold text-text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+        >
+          {label}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/components/AvatarAddButton/index.ts

@@ -0,0 +1,5 @@
+export { AvatarAddButton } from "./AvatarAddButton";
+export type {
+  AvatarAddButtonProps,
+  AvatarAddButtonSize,
+} from "./AvatarAddButton";

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx";
+import { Avatar } from "../Avatar";
+import { AvatarAddButton } from "../AvatarAddButton";
+
+export type AvatarGroupSize = "xs" | "sm" | "md";
+
+export interface AvatarGroupItem {
+  src?: string;
+  alt?: string;
+  initials?: string;
+}
+
+export interface AvatarGroupProps {
+  size?: AvatarGroupSize;
+  avatars: AvatarGroupItem[];
+  /** Max avatars shown before collapsing the rest into a "+N" chip. */
+  max?: number;
+  /** Renders a trailing dashed add button when provided. */
+  onAdd?: () => void;
+  /** Tooltip/label for the add button. */
+  addLabel?: string;
+  className?: string;
+}
+
+const chipSizeClass: Record<AvatarGroupSize, string> = {
+  xs: "size-6", // 24px
+  sm: "size-8", // 32px
+  md: "size-10", // 40px
+};
+
+const chipTextClass: Record<AvatarGroupSize, string> = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+};
+
+export function AvatarGroup({
+  size = "md",
+  avatars,
+  max,
+  onAdd,
+  addLabel,
+  className,
+}: AvatarGroupProps) {
+  const shown = max ? avatars.slice(0, max) : avatars;
+  const surplus = avatars.length - shown.length;
+
+  return (
+    <div className={clsx("flex items-center", className)}>
+      {shown.map((a, i) => (
+        <span
+          key={i}
+          className={clsx(
+            "rounded-full ring-2 ring-bg-primary",
+            i > 0 && "-ml-md",
+          )}
+        >
+          <Avatar size={size} src={a.src} alt={a.alt} initials={a.initials} />
+        </span>
+      ))}
+      {surplus > 0 ? (
+        <span
+          className={clsx(
+            "-ml-md flex items-center justify-center rounded-full border border-border-secondary bg-bg-tertiary font-semibold text-text-quaternary ring-2 ring-bg-primary",
+            chipSizeClass[size],
+            chipTextClass[size],
+          )}
+        >
+          +{surplus}
+        </span>
+      ) : null}
+      {onAdd ? (
+        <span className="ml-md">
+          <AvatarAddButton size={size} label={addLabel} onClick={onAdd} />
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/AvatarGroup/index.ts

@@ -0,0 +1,6 @@
+export { AvatarGroup } from "./AvatarGroup";
+export type {
+  AvatarGroupProps,
+  AvatarGroupSize,
+  AvatarGroupItem,
+} from "./AvatarGroup";

package/src/components/AvatarLabelGroup/AvatarLabelGroup.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { Avatar, type AvatarSize } from "../Avatar";
+
+export type AvatarLabelGroupSize = "sm" | "md" | "lg";
+
+export interface AvatarLabelGroupProps {
+  size?: AvatarLabelGroupSize;
+  /** Primary line (name). */
+  name: string;
+  /** Secondary line (email / handle / role). */
+  subtitle?: string;
+  src?: string;
+  alt?: string;
+  initials?: string;
+  hasStatus?: boolean;
+  className?: string;
+}
+
+const avatarSize: Record<AvatarLabelGroupSize, AvatarSize> = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+};
+
+const textClass: Record<AvatarLabelGroupSize, string> = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-md",
+};
+
+export function AvatarLabelGroup({
+  size = "md",
+  name,
+  subtitle,
+  src,
+  alt,
+  initials,
+  hasStatus = false,
+  className,
+}: AvatarLabelGroupProps) {
+  return (
+    <div className={clsx("flex items-center gap-md font-body", className)}>
+      <Avatar
+        size={avatarSize[size]}
+        src={src}
+        alt={alt ?? name}
+        initials={initials}
+        hasStatus={hasStatus}
+      />
+      <div className="flex min-w-0 flex-col">
+        <span className={clsx("truncate font-semibold text-text-primary", textClass[size])}>
+          {name}
+        </span>
+        {subtitle ? (
+          <span className={clsx("truncate font-normal text-text-tertiary", textClass[size])}>
+            {subtitle}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/AvatarLabelGroup/index.ts

@@ -0,0 +1,5 @@
+export { AvatarLabelGroup } from "./AvatarLabelGroup";
+export type {
+  AvatarLabelGroupProps,
+  AvatarLabelGroupSize,
+} from "./AvatarLabelGroup";

package/src/components/AvatarProfilePhoto/AvatarProfilePhoto.tsx

@@ -0,0 +1,117 @@
+import clsx from "clsx";
+
+export type AvatarProfilePhotoSize = "sm" | "md" | "lg";
+
+export interface AvatarProfilePhotoProps {
+  size?: AvatarProfilePhotoSize;
+  src?: string;
+  alt?: string;
+  /** Placeholder initials when no image is supplied. */
+  initials?: string;
+  /** Show the verified (blue tick) badge bottom-right. */
+  verified?: boolean;
+  className?: string;
+}
+
+const sizeClass: Record<AvatarProfilePhotoSize, string> = {
+  sm: "size-16", // 64px
+  md: "size-24", // 96px
+  lg: "size-40", // 160px
+};
+
+// Initials typography (display-sm / display-md / display-xl, Semibold).
+const initialsClass: Record<AvatarProfilePhotoSize, string> = {
+  sm: "text-display-sm",
+  md: "text-display-md",
+  lg: "text-display-xl",
+};
+
+const shadowClass: Record<AvatarProfilePhotoSize, string> = {
+  sm: "shadow-xl",
+  md: "shadow-xl",
+  lg: "shadow-2xl",
+};
+
+const badgeClass: Record<AvatarProfilePhotoSize, string> = {
+  sm: "size-4", // 16px
+  md: "size-6", // 24px
+  lg: "size-9", // 36px
+};
+
+function UserIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-1/2 w-1/2" aria-hidden>
+      <path
+        d="M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function VerifiedBadge({ className }: { className?: string }) {
+  // Approximated as a filled disc + white check (the source uses a scalloped
+  // seal outline); colour is utility-blue-500.
+  return (
+    <span
+      className={clsx(
+        "absolute bottom-0 right-0 flex items-center justify-center rounded-full border-2 border-bg-primary bg-utility-blue-500 text-text-white",
+        className,
+      )}
+      aria-label="Verified"
+    >
+      <svg viewBox="0 0 20 20" fill="none" className="h-1/2 w-1/2" aria-hidden>
+        <path
+          d="m6 10 2.5 2.5L14 7"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </span>
+  );
+}
+
+export function AvatarProfilePhoto({
+  size = "md",
+  src,
+  alt = "",
+  initials,
+  verified = false,
+  className,
+}: AvatarProfilePhotoProps) {
+  return (
+    <span className={clsx("relative inline-flex shrink-0", className)}>
+      <span
+        className={clsx(
+          "flex items-center justify-center overflow-hidden rounded-full bg-bg-tertiary",
+          src
+            ? "border-[0.5px] border-border-secondary-alt"
+            : "text-fg-quaternary",
+          shadowClass[size],
+          sizeClass[size],
+        )}
+      >
+        {src ? (
+          <img src={src} alt={alt} className="size-full object-cover" />
+        ) : initials ? (
+          <span
+            className={clsx(
+              "font-display font-semibold text-text-quaternary",
+              initialsClass[size],
+            )}
+          >
+            {initials}
+          </span>
+        ) : (
+          <UserIcon />
+        )}
+      </span>
+      {verified ? <VerifiedBadge className={badgeClass[size]} /> : null}
+    </span>
+  );
+}

package/src/components/AvatarProfilePhoto/index.ts

@@ -0,0 +1,5 @@
+export { AvatarProfilePhoto } from "./AvatarProfilePhoto";
+export type {
+  AvatarProfilePhotoProps,
+  AvatarProfilePhotoSize,
+} from "./AvatarProfilePhoto";

package/src/components/Badge/ColorBadge.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import {
+  BadgeBase,
+  colorFillClasses,
+  dotColorClasses,
+  type BadgeCommonProps,
+} from "./badgeShared";
+
+export type ColorBadgeProps = BadgeCommonProps;
+
+/** Rounded-rectangle coloured badge (Figma Badge `Type=Badge color`). */
+export function ColorBadge({
+  color = "gray",
+  size = "md",
+  dot,
+  children,
+  iconLeading,
+  iconTrailing,
+  onClose,
+  className,
+}: ColorBadgeProps) {
+  return (
+    <BadgeBase
+      size={size}
+      dot={dot}
+      dotClass={dotColorClasses[color]}
+      iconLeading={iconLeading}
+      iconTrailing={iconTrailing}
+      onClose={onClose}
+      shapeClass={clsx("rounded-md", colorFillClasses[color])}
+      className={className}
+    >
+      {children}
+    </BadgeBase>
+  );
+}

package/src/components/Badge/ModernBadge.tsx

@@ -0,0 +1,38 @@
+import {
+  BadgeBase,
+  dotColorClasses,
+  type BadgeCommonProps,
+} from "./badgeShared";
+
+export type ModernBadgeProps = BadgeCommonProps;
+
+/**
+ * Neutral white badge with a coloured leading dot (Figma Badge
+ * `Type=Badge modern`). Here `color` drives only the dot — the chrome stays
+ * neutral. The dot defaults on (it's the defining trait of this style).
+ */
+export function ModernBadge({
+  color = "gray",
+  size = "md",
+  dot = true,
+  children,
+  iconLeading,
+  iconTrailing,
+  onClose,
+  className,
+}: ModernBadgeProps) {
+  return (
+    <BadgeBase
+      size={size}
+      dot={dot}
+      dotClass={dotColorClasses[color]}
+      iconLeading={iconLeading}
+      iconTrailing={iconTrailing}
+      onClose={onClose}
+      shapeClass="rounded-md bg-bg-primary border-border-primary text-text-secondary shadow-xs"
+      className={className}
+    >
+      {children}
+    </BadgeBase>
+  );
+}

package/src/components/Badge/PillBadge.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import {
+  BadgeBase,
+  colorFillClasses,
+  dotColorClasses,
+  type BadgeCommonProps,
+} from "./badgeShared";
+
+export type PillBadgeProps = BadgeCommonProps;
+
+/** Fully-rounded coloured badge (Figma Badge `Type=Pill color`). */
+export function PillBadge({
+  color = "gray",
+  size = "md",
+  dot,
+  children,
+  iconLeading,
+  iconTrailing,
+  onClose,
+  className,
+}: PillBadgeProps) {
+  return (
+    <BadgeBase
+      size={size}
+      dot={dot}
+      dotClass={dotColorClasses[color]}
+      iconLeading={iconLeading}
+      iconTrailing={iconTrailing}
+      onClose={onClose}
+      shapeClass={clsx("rounded-full", colorFillClasses[color])}
+      className={className}
+    >
+      {children}
+    </BadgeBase>
+  );
+}

package/src/components/Badge/badgeShared.tsx

@@ -0,0 +1,139 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+// 12 Badge colours. Family names match the Figma utility-* palette; `gray`
+// maps to the `neutral` family.
+export type BadgeColor =
+  | "brand"
+  | "gray"
+  | "red"
+  | "yellow"
+  | "green"
+  | "slate"
+  | "sky"
+  | "blue"
+  | "indigo"
+  | "purple"
+  | "pink"
+  | "orange";
+
+export type BadgeSize = "sm" | "md" | "lg";
+
+// Static class strings (not constructed) so Tailwind's content scanner keeps
+// them. bg = utility-<c>-50, text = -700, border = -200.
+export const colorFillClasses: Record<BadgeColor, string> = {
+  brand: "bg-utility-brand-50 text-utility-brand-700 border-utility-brand-200",
+  gray: "bg-utility-neutral-50 text-utility-neutral-700 border-utility-neutral-200",
+  red: "bg-utility-red-50 text-utility-red-700 border-utility-red-200",
+  yellow: "bg-utility-yellow-50 text-utility-yellow-700 border-utility-yellow-200",
+  green: "bg-utility-green-50 text-utility-green-700 border-utility-green-200",
+  slate: "bg-utility-slate-50 text-utility-slate-700 border-utility-slate-200",
+  sky: "bg-utility-sky-50 text-utility-sky-700 border-utility-sky-200",
+  blue: "bg-utility-blue-50 text-utility-blue-700 border-utility-blue-200",
+  indigo: "bg-utility-indigo-50 text-utility-indigo-700 border-utility-indigo-200",
+  purple: "bg-utility-purple-50 text-utility-purple-700 border-utility-purple-200",
+  pink: "bg-utility-pink-50 text-utility-pink-700 border-utility-pink-200",
+  orange: "bg-utility-orange-50 text-utility-orange-700 border-utility-orange-200",
+};
+
+// Leading-dot colour (utility-<c>-500).
+export const dotColorClasses: Record<BadgeColor, string> = {
+  brand: "bg-utility-brand-500",
+  gray: "bg-utility-neutral-500",
+  red: "bg-utility-red-500",
+  yellow: "bg-utility-yellow-500",
+  green: "bg-utility-green-500",
+  slate: "bg-utility-slate-500",
+  sky: "bg-utility-sky-500",
+  blue: "bg-utility-blue-500",
+  indigo: "bg-utility-indigo-500",
+  purple: "bg-utility-purple-500",
+  pink: "bg-utility-pink-500",
+  orange: "bg-utility-orange-500",
+};
+
+const sizeClasses: Record<BadgeSize, string> = {
+  sm: "px-md py-xxs text-xs gap-xs",
+  md: "px-lg py-xxs text-sm gap-xs",
+  lg: "px-lg py-xs text-sm gap-md",
+};
+
+/** Props shared by all three Badge types. */
+export interface BadgeCommonProps {
+  children: ReactNode;
+  color?: BadgeColor;
+  size?: BadgeSize;
+  /** Leading coloured dot. */
+  dot?: boolean;
+  iconLeading?: ReactNode;
+  iconTrailing?: ReactNode;
+  /** Renders a trailing X-close button when provided. */
+  onClose?: () => void;
+  className?: string;
+}
+
+function CloseX() {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" className="size-3" aria-hidden>
+      <path
+        d="m9 3-6 6m0-6 6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Internal layout shell used by PillBadge / ColorBadge / ModernBadge. */
+export function BadgeBase({
+  children,
+  size = "md",
+  dot,
+  dotClass,
+  iconLeading,
+  iconTrailing,
+  onClose,
+  shapeClass,
+  className,
+}: {
+  children: ReactNode;
+  size?: BadgeSize;
+  dot?: boolean;
+  dotClass?: string;
+  iconLeading?: ReactNode;
+  iconTrailing?: ReactNode;
+  onClose?: () => void;
+  /** Type-specific shape + colour classes (rounded + bg/text/border). */
+  shapeClass: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center whitespace-nowrap border font-medium font-body",
+        sizeClasses[size],
+        shapeClass,
+        className,
+      )}
+    >
+      {dot ? (
+        <span className={clsx("size-2 shrink-0 rounded-full", dotClass)} aria-hidden />
+      ) : null}
+      {iconLeading ? <span className="shrink-0">{iconLeading}</span> : null}
+      {children}
+      {iconTrailing ? <span className="shrink-0">{iconTrailing}</span> : null}
+      {onClose ? (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Remove"
+          className="-mr-xxs shrink-0 rounded-xs opacity-70 transition-opacity hover:opacity-100"
+        >
+          <CloseX />
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/src/components/Badge/index.ts

@@ -0,0 +1,7 @@
+export { PillBadge } from "./PillBadge";
+export { ColorBadge } from "./ColorBadge";
+export { ModernBadge } from "./ModernBadge";
+export type { PillBadgeProps } from "./PillBadge";
+export type { ColorBadgeProps } from "./ColorBadge";
+export type { ModernBadgeProps } from "./ModernBadge";
+export type { BadgeColor, BadgeSize, BadgeCommonProps } from "./badgeShared";

package/src/components/BadgeCloseX/BadgeCloseX.tsx

@@ -0,0 +1,64 @@
+import type { ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+import type { BadgeColor } from "../Badge";
+
+export type BadgeCloseXShape = "square" | "rounded";
+
+export interface BadgeCloseXProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+  /**
+   * Tint for the X. Omit to inherit the parent badge's text colour
+   * (currentColor) — the usual case when composed inside a Badge.
+   */
+  color?: BadgeColor;
+  shape?: BadgeCloseXShape;
+}
+
+// Standalone tint map (utility-<c>-500). Static strings for Tailwind.
+const textColorClasses: Record<BadgeColor, string> = {
+  brand: "text-utility-brand-500",
+  gray: "text-utility-neutral-500",
+  red: "text-utility-red-500",
+  yellow: "text-utility-yellow-500",
+  green: "text-utility-green-500",
+  slate: "text-utility-slate-500",
+  sky: "text-utility-sky-500",
+  blue: "text-utility-blue-500",
+  indigo: "text-utility-indigo-500",
+  purple: "text-utility-purple-500",
+  pink: "text-utility-pink-500",
+  orange: "text-utility-orange-500",
+};
+
+export function BadgeCloseX({
+  color,
+  shape = "rounded",
+  className,
+  ...rest
+}: BadgeCloseXProps) {
+  return (
+    <button
+      type="button"
+      aria-label="Remove"
+      className={clsx(
+        "inline-flex size-4 items-center justify-center transition-colors",
+        shape === "square" ? "rounded-xs" : "rounded-full",
+        color ? textColorClasses[color] : undefined,
+        "hover:bg-black/10",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-1 focus-visible:ring-offset-bg-primary",
+        className,
+      )}
+      {...rest}
+    >
+      <svg viewBox="0 0 12 12" fill="none" className="size-3" aria-hidden>
+        <path
+          d="m9 3-6 6m0-6 6 6"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}

package/src/components/BadgeCloseX/index.ts

@@ -0,0 +1,2 @@
+export { BadgeCloseX } from "./BadgeCloseX";
+export type { BadgeCloseXProps, BadgeCloseXShape } from "./BadgeCloseX";