@borisj74/bv-ds 0.1.0

package/src/components/DropdownMenuFooter/DropdownMenuFooter.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type DropdownMenuFooterType = "text" | "button";
+
+export interface DropdownMenuFooterProps {
+  /** `text` shows a left/right caption pair; `button` hosts an action. */
+  type?: DropdownMenuFooterType;
+  /** Left caption for `type="text"`. */
+  left?: ReactNode;
+  /** Right caption for `type="text"`. */
+  right?: ReactNode;
+  /** Action content for `type="button"` — compose a Button. */
+  children?: ReactNode;
+  className?: string;
+}
+
+/** The bottom section of a dropdown menu panel. */
+export function DropdownMenuFooter({
+  type = "button",
+  left,
+  right,
+  children,
+  className,
+}: DropdownMenuFooterProps) {
+  if (type === "text") {
+    return (
+      <div
+        className={clsx(
+          "flex items-center justify-between border-t border-border-secondary px-xl py-lg font-body text-sm font-normal text-text-quaternary",
+          className,
+        )}
+      >
+        <span>{left}</span>
+        <span>{right}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center border-t border-border-secondary p-lg font-body [&>*]:flex-1",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/DropdownMenuFooter/index.ts

@@ -0,0 +1,5 @@
+export { DropdownMenuFooter } from "./DropdownMenuFooter";
+export type {
+  DropdownMenuFooterProps,
+  DropdownMenuFooterType,
+} from "./DropdownMenuFooter";

package/src/components/DropdownMenuHeader/DropdownMenuHeader.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type DropdownMenuHeaderType =
+  | "avatar-group"
+  | "header"
+  | "subheading"
+  | "search";
+
+export interface DropdownMenuHeaderProps {
+  /** Header layout. */
+  type?: DropdownMenuHeaderType;
+  /** Primary text (name / heading / subheading label). */
+  title?: ReactNode;
+  /** Secondary line (email / supporting text). */
+  supportingText?: ReactNode;
+  /** Avatar node for `avatar-group`. */
+  avatar?: ReactNode;
+  /** Search control for `search` (compose your own input). */
+  search?: ReactNode;
+  className?: string;
+}
+
+/** The top section of a dropdown menu panel. */
+export function DropdownMenuHeader({
+  type = "header",
+  title,
+  supportingText,
+  avatar,
+  search,
+  className,
+}: DropdownMenuHeaderProps) {
+  if (type === "subheading") {
+    return (
+      <div className={clsx("px-xl pb-xxs pt-sm font-body", className)}>
+        <p className="text-xs font-semibold text-text-brand-secondary">{title}</p>
+      </div>
+    );
+  }
+
+  if (type === "search") {
+    return (
+      <div
+        className={clsx(
+          "border-b border-border-secondary p-lg font-body",
+          className,
+        )}
+      >
+        {search}
+      </div>
+    );
+  }
+
+  if (type === "avatar-group") {
+    return (
+      <div
+        className={clsx(
+          "flex items-center gap-md border-b border-border-secondary p-lg font-body",
+          className,
+        )}
+      >
+        {avatar ? <div className="shrink-0">{avatar}</div> : null}
+        <div className="flex min-w-0 flex-1 flex-col">
+          <p className="truncate text-sm font-semibold text-text-primary">
+            {title}
+          </p>
+          {supportingText ? (
+            <p className="truncate text-sm font-normal text-text-tertiary">
+              {supportingText}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  // header
+  return (
+    <div
+      className={clsx(
+        "flex flex-col border-b border-border-secondary px-xl py-lg font-body",
+        className,
+      )}
+    >
+      <p className="truncate text-sm font-semibold text-text-primary">{title}</p>
+      {supportingText ? (
+        <p className="truncate text-sm font-normal text-text-tertiary">
+          {supportingText}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/DropdownMenuHeader/index.ts

@@ -0,0 +1,5 @@
+export { DropdownMenuHeader } from "./DropdownMenuHeader";
+export type {
+  DropdownMenuHeaderProps,
+  DropdownMenuHeaderType,
+} from "./DropdownMenuHeader";

package/src/components/DropdownMenuItemInsetIcon/DropdownMenuItemInsetIcon.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type DropdownMenuItemInsetIconType =
+  | "spacer"
+  | "icon"
+  | "check"
+  | "checkbox"
+  | "dot"
+  | "avatar"
+  | "integration-icon";
+
+export interface DropdownMenuItemInsetIconProps {
+  /** Which leading visual to render in the 16px slot. */
+  type?: DropdownMenuItemInsetIconType;
+  /** Glyph/avatar/integration content for `icon`/`avatar`/`integration-icon`. */
+  children?: ReactNode;
+  /** Checked state for `checkbox`. */
+  checked?: boolean;
+  className?: string;
+}
+
+/**
+ * The 16px leading-icon slot used inside a dropdown menu row. Renders one of
+ * several visuals (icon, check, checkbox, radio dot, avatar, integration icon)
+ * or an empty spacer to keep labels aligned.
+ */
+export function DropdownMenuItemInsetIcon({
+  type = "spacer",
+  children,
+  checked = false,
+  className,
+}: DropdownMenuItemInsetIconProps) {
+  return (
+    <span
+      className={clsx(
+        "relative flex size-4 shrink-0 items-center justify-center",
+        className,
+      )}
+    >
+      {type === "icon" ? (
+        <span className="flex size-4 items-center justify-center text-fg-quaternary">
+          {children}
+        </span>
+      ) : null}
+      {type === "check" ? (
+        <svg viewBox="0 0 16 16" fill="none" className="size-4 text-fg-brand-primary" aria-hidden>
+          <path
+            d="M13.333 4 6 11.333 2.667 8"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
+      {type === "checkbox" ? (
+        <span
+          className={clsx(
+            "flex size-4 items-center justify-center rounded-xs border",
+            checked
+              ? "border-border-brand bg-bg-brand-solid text-text-white"
+              : "border-border-primary bg-bg-primary",
+          )}
+        >
+          {checked ? (
+            <svg viewBox="0 0 16 16" fill="none" className="size-3" aria-hidden>
+              <path
+                d="M13.333 4 6 11.333 2.667 8"
+                stroke="currentColor"
+                strokeWidth="1.667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          ) : null}
+        </span>
+      ) : null}
+      {type === "dot" ? (
+        <span className="size-[6px] rounded-full bg-fg-brand-primary" aria-hidden />
+      ) : null}
+      {type === "avatar" || type === "integration-icon" ? (
+        <span className="flex size-5 items-center justify-center overflow-hidden rounded-full">
+          {children}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/components/DropdownMenuItemInsetIcon/index.ts

@@ -0,0 +1,5 @@
+export { DropdownMenuItemInsetIcon } from "./DropdownMenuItemInsetIcon";
+export type {
+  DropdownMenuItemInsetIconProps,
+  DropdownMenuItemInsetIconType,
+} from "./DropdownMenuItemInsetIcon";

package/src/components/DropdownMenuListItem/DropdownMenuListItem.tsx

@@ -0,0 +1,84 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface DropdownMenuListItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  /** Leading visual — typically a DropdownMenuItemInsetIcon. */
+  leadingIcon?: ReactNode;
+  /** Trailing keyboard-shortcut hint. */
+  shortcut?: ReactNode;
+  /** Shows the trailing chevron (submenu affordance). */
+  chevron?: boolean;
+  /** Renders a divider rule instead of an interactive row. */
+  divider?: boolean;
+  /** Highlights the row as currently active/open. */
+  selected?: boolean;
+  children?: ReactNode;
+}
+
+function ChevronRight() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className="size-4 shrink-0 text-fg-quaternary" aria-hidden>
+      <path
+        d="M6 12l4-4-4-4"
+        stroke="currentColor"
+        strokeWidth="1.333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * A single row in a dropdown menu — leading icon, label, optional shortcut and
+ * submenu chevron. Pass `divider` to render a separator rule instead.
+ */
+export function DropdownMenuListItem({
+  leadingIcon,
+  shortcut,
+  chevron = false,
+  divider = false,
+  selected = false,
+  children,
+  className,
+  disabled,
+  ...rest
+}: DropdownMenuListItemProps) {
+  if (divider) {
+    return (
+      <div className="flex w-full items-center py-xs" role="separator">
+        <span className="h-px flex-1 bg-border-secondary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full items-center px-sm py-px">
+      <button
+        type="button"
+        disabled={disabled}
+        className={clsx(
+          "flex flex-1 items-center gap-md overflow-hidden rounded-sm py-md pl-[10px] pr-sm font-body text-sm font-semibold",
+          "outline-none transition-colors",
+          "focus-visible:ring-2 focus-visible:ring-border-brand",
+          selected
+            ? "bg-bg-primary-hover text-text-secondary-hover"
+            : "text-text-secondary hover:bg-bg-primary-hover hover:text-text-secondary-hover",
+          disabled && "pointer-events-none opacity-50",
+          className,
+        )}
+        {...rest}
+      >
+        {leadingIcon ? <span className="shrink-0">{leadingIcon}</span> : null}
+        <span className="min-w-0 flex-1 truncate text-left">{children}</span>
+        {shortcut ? (
+          <span className="shrink-0 pr-xs text-xs font-medium text-text-quaternary">
+            {shortcut}
+          </span>
+        ) : null}
+        {chevron ? <ChevronRight /> : null}
+      </button>
+    </div>
+  );
+}

package/src/components/DropdownMenuListItem/index.ts

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

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type EmptyStateSize = "sm" | "md" | "lg";
+
+export interface EmptyStateProps {
+  /**
+   * The icon/illustration area. Pass any of the 8 Figma options (featured
+   * icon, folder, file-type, illustration, users, integrations) as a node —
+   * EmptyState doesn't prescribe which.
+   */
+  icon?: ReactNode;
+  /** Headline. */
+  title: ReactNode;
+  /** Supporting copy under the title. */
+  description?: ReactNode;
+  /** Action buttons row — compose Button(s). */
+  actions?: ReactNode;
+  /** Size scale (affects title size + max text width). */
+  size?: EmptyStateSize;
+  className?: string;
+}
+
+// md verified: title text-lg. sm/lg inferred one step each.
+const titleSize: Record<EmptyStateSize, string> = {
+  sm: "text-md",
+  md: "text-lg",
+  lg: "text-xl",
+};
+
+/**
+ * Centred empty/zero state — icon, title, supporting text, and actions.
+ * The icon area is a single slot (`icon`) per the resolved structural
+ * decision (one component, icon slot — not split per icon type).
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  size = "md",
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col items-center gap-4xl font-body text-center",
+        className,
+      )}
+    >
+      <div className="flex flex-col items-center gap-2xl">
+        {icon ? <div className="shrink-0">{icon}</div> : null}
+        <div className="flex max-w-[352px] flex-col gap-md">
+          <p className={clsx("font-semibold text-text-primary", titleSize[size])}>
+            {title}
+          </p>
+          {description ? (
+            <p className="text-sm font-normal text-text-tertiary">{description}</p>
+          ) : null}
+        </div>
+      </div>
+      {actions ? <div className="flex items-start gap-lg">{actions}</div> : null}
+    </div>
+  );
+}

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps, EmptyStateSize } from "./EmptyState";

package/src/components/FeedItemBase/FeedItemBase.tsx

@@ -0,0 +1,135 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type FeedItemSize = "sm" | "md";
+
+export interface FeedItemBaseProps {
+  /** Display name of the actor (e.g. "Olivia Rhye"). */
+  name: string;
+  /** Relative timestamp shown next to the name (e.g. "2 mins ago"). */
+  timestamp: string;
+  /**
+   * The activity line beneath the name — e.g. "Invited Lana Steiner to the
+   * team". Pass a ReactNode so embedded links can use
+   * `text-text-brand-secondary font-medium`.
+   */
+  action?: ReactNode;
+  /**
+   * Optional supporting content rendered below the action line. In Figma this
+   * is the `Supporting item` variant (File / Labels / Text). It's modelled as a
+   * slot rather than a `type` prop so consumers compose the actual content —
+   * which keeps the File sample's `Colors/Red/600` and the Labels sample's
+   * `utility-*` color families (both flagged in figma-map.md, neither in
+   * tailwind-preset.js) out of this base component.
+   */
+  supporting?: ReactNode;
+  /** Avatar image URL. Falls back to a neutral placeholder when omitted. */
+  avatarSrc?: string;
+  /** Alt text for the avatar image. */
+  avatarAlt?: string;
+  /** Show the online status dot on the avatar. */
+  hasStatus?: boolean;
+  /** Render the vertical connector line below the avatar (for stacked feeds). */
+  connector?: boolean;
+  /** Show the unread "new" dot in the top-right corner. */
+  isNew?: boolean;
+  size?: FeedItemSize;
+  className?: string;
+}
+
+const avatarSize: Record<FeedItemSize, string> = {
+  sm: "size-8", // 32px
+  md: "size-10", // 40px
+};
+
+const statusSize: Record<FeedItemSize, string> = {
+  sm: "size-3", // 12px
+  md: "size-3.5", // 14px
+};
+
+export function FeedItemBase({
+  name,
+  timestamp,
+  action,
+  supporting,
+  avatarSrc,
+  avatarAlt = "",
+  hasStatus = false,
+  connector = false,
+  isNew = false,
+  size = "sm",
+  className,
+}: FeedItemBaseProps) {
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full items-start gap-lg font-body",
+        className,
+      )}
+    >
+      {/* Avatar column (+ connector line) */}
+      <div
+        className={clsx(
+          "flex shrink-0 flex-col items-center gap-sm",
+          connector && "self-stretch pb-sm",
+        )}
+      >
+        <div className={clsx("relative shrink-0", avatarSize[size])}>
+          <div className="size-full overflow-hidden rounded-full border-[0.5px] border-black/[0.16] bg-bg-quaternary">
+            {avatarSrc ? (
+              <img
+                src={avatarSrc}
+                alt={avatarAlt}
+                className="size-full object-cover"
+              />
+            ) : null}
+          </div>
+          {hasStatus ? (
+            <span
+              className={clsx(
+                "absolute -bottom-0.5 -right-0.5 rounded-full border-[1.5px] border-bg-primary bg-fg-success-secondary",
+                statusSize[size],
+              )}
+            />
+          ) : null}
+        </div>
+        {connector ? (
+          <div className="w-px flex-1 bg-border-primary" aria-hidden />
+        ) : null}
+      </div>
+
+      {/* Content column */}
+      <div
+        className={clsx(
+          "flex min-w-0 flex-1 flex-col",
+          supporting ? "gap-lg" : "gap-none",
+          connector && "pb-4xl",
+        )}
+      >
+        <div className="flex flex-col items-start">
+          <div className="flex w-full items-center gap-md">
+            <span className="text-sm font-medium text-text-secondary">
+              {name}
+            </span>
+            <span className="text-xs font-normal text-text-tertiary">
+              {timestamp}
+            </span>
+          </div>
+          {action ? (
+            <div className="text-sm font-normal text-text-tertiary">
+              {action}
+            </div>
+          ) : null}
+        </div>
+        {supporting ? <div>{supporting}</div> : null}
+      </div>
+
+      {isNew ? (
+        <span
+          className="absolute right-0 top-0 size-2 rounded-full bg-fg-brand-primary"
+          aria-label="Unread"
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/components/FeedItemBase/index.ts

@@ -0,0 +1,2 @@
+export { FeedItemBase } from "./FeedItemBase";
+export type { FeedItemBaseProps, FeedItemSize } from "./FeedItemBase";

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,112 @@
+import { useRef, useState, type ReactNode } from "react";
+import clsx from "clsx";
+import { FileUploadBase } from "../FileUploadBase";
+import { FileUploadItemBase } from "../FileUploadItemBase";
+
+export interface FileUploadProps {
+  /** Selected files (controlled). */
+  files?: File[];
+  onFilesChange?: (files: File[]) => void;
+  /** Max number of files kept; extra picks are dropped. */
+  maxFiles?: number;
+  /** Accepted MIME types / extensions for the native picker. */
+  accept?: string;
+  disabled?: boolean;
+  actionText?: ReactNode;
+  promptText?: ReactNode;
+  hint?: ReactNode;
+  className?: string;
+}
+
+const formatBytes = (n: number) => {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+};
+
+/**
+ * File upload — composes the `FileUploadBase` dropzone (click + drag/drop, via a
+ * hidden native input) with a `FileUploadItemBase` list. Controlled through
+ * `files`/`onFilesChange`; respects `maxFiles` and `accept`. The item rows here
+ * are simple "complete" entries — wire `progress`/`status` per item if you need
+ * live upload state.
+ */
+export function FileUpload({
+  files = [],
+  onFilesChange,
+  maxFiles = Infinity,
+  accept,
+  disabled = false,
+  actionText,
+  promptText,
+  hint,
+  className,
+}: FileUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragActive, setDragActive] = useState(false);
+
+  const addFiles = (incoming: FileList | null) => {
+    if (!incoming?.length) return;
+    const merged = [...files, ...Array.from(incoming)].slice(0, maxFiles);
+    onFilesChange?.(merged);
+  };
+
+  const removeAt = (i: number) => onFilesChange?.(files.filter((_, idx) => idx !== i));
+
+  return (
+    <div className={clsx("flex flex-col gap-lg font-body", className)}>
+      <label
+        className={clsx("block", disabled ? "cursor-not-allowed" : "cursor-pointer")}
+        onDragOver={(e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setDragActive(true);
+        }}
+        onDragLeave={() => setDragActive(false)}
+        onDrop={(e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setDragActive(false);
+          addFiles(e.dataTransfer.files);
+        }}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          multiple={maxFiles !== 1}
+          accept={accept}
+          disabled={disabled}
+          className="sr-only"
+          onChange={(e) => {
+            addFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+        <FileUploadBase
+          actionText={actionText}
+          promptText={promptText}
+          hint={hint}
+          dragActive={dragActive}
+          disabled={disabled}
+        />
+      </label>
+
+      {files.length > 0 && (
+        <ul className="flex flex-col gap-md">
+          {files.map((f, i) => (
+            <li key={`${f.name}-${i}`}>
+              <FileUploadItemBase
+                fileName={f.name}
+                meta={formatBytes(f.size)}
+                status="complete"
+                progress={100}
+                fileExt={f.name.split(".").pop()?.toUpperCase()}
+                onDelete={() => removeAt(i)}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/components/FileUpload/index.ts

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