@borisj74/bv-ds 0.1.0

package/src/components/MessageActionButton/MessageActionButton.tsx

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface MessageActionButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Icon glyph (16px). Use `currentColor` so the button can tint it. */
+  icon: ReactNode;
+}
+
+/**
+ * Single icon button used inside `MessageActionPanel` (the hover toolbar over a
+ * message). Sits on the dark panel surface — icon is light, hover lifts it to
+ * full white with a translucent backdrop. `rounded-xs` / `p-xxs` per Figma.
+ */
+export function MessageActionButton({
+  icon,
+  className,
+  type = "button",
+  ...rest
+}: MessageActionButtonProps) {
+  return (
+    <button
+      type={type}
+      className={clsx(
+        "flex items-center rounded-xs p-xxs",
+        "text-text-white/70 transition-colors hover:bg-white/10 hover:text-text-white",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="flex size-4 items-center justify-center [&>svg]:size-4">
+        {icon}
+      </span>
+    </button>
+  );
+}

package/src/components/MessageActionButton/index.ts

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

package/src/components/MessageActionPanel/MessageActionPanel.tsx

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface MessageActionPanelProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /** Action buttons — compose `MessageActionButton` elements here. */
+  children: ReactNode;
+}
+
+/**
+ * Floating dark toolbar that appears over a message on hover. Holds a row of
+ * `MessageActionButton`s (react / reply / regenerate / copy …). Composition
+ * shell only — the buttons are supplied as children, not reimplemented here.
+ *
+ * Surface uses `bg-bg-primary-solid` (#0a0a0a) for the dark floating panel;
+ * Figma's `bg-primary_alt` dark value is #171717 (token gap — see figma-map
+ * Pending token verification). `shadow-xl` is the Tailwind-default approximation
+ * of Figma's 3-layer xl stack.
+ */
+export function MessageActionPanel({
+  children,
+  className,
+  ...rest
+}: MessageActionPanelProps) {
+  return (
+    <div
+      className={clsx(
+        "inline-flex items-start gap-sm rounded-md bg-bg-primary-solid px-md py-sm shadow-xl",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/MessageActionPanel/index.ts

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

package/src/components/MessageReaction/MessageReaction.tsx

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface MessageReactionProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Emoji glyph (defaults to a heart). */
+  emoji?: ReactNode;
+  /** Reaction count — hidden when undefined. */
+  count?: number;
+}
+
+/** A pill reaction chip shown under a chat message. */
+export function MessageReaction({
+  emoji = "❤️",
+  count,
+  className,
+  ...rest
+}: MessageReactionProps) {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "flex h-6 items-center justify-center rounded-full border border-border-secondary bg-bg-secondary px-md py-xs font-body",
+        count != null ? "gap-xs" : "gap-0",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="flex size-4 items-center justify-center text-[14px] leading-none">
+        {emoji}
+      </span>
+      {count != null ? (
+        <span className="text-sm font-medium text-text-secondary">{count}</span>
+      ) : null}
+    </button>
+  );
+}

package/src/components/MessageReaction/index.ts

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

package/src/components/MessageStatusIcon/MessageStatusIcon.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type MessageStatus = "unread" | "read" | "failed";
+
+export interface MessageStatusIconProps {
+  /** Delivery status. */
+  status?: MessageStatus;
+  /** Tooltip shown on hover (e.g. "Read 2:20 PM"). */
+  tooltip?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Delivery status glyph for a sent message — single check (unread), double
+ * check (read, brand), or an error circle (failed). Optional hover tooltip.
+ */
+export function MessageStatusIcon({
+  status = "unread",
+  tooltip,
+  className,
+}: MessageStatusIconProps) {
+  let glyph: ReactNode;
+  if (status === "read") {
+    glyph = (
+      <svg viewBox="0 0 16 16" fill="none" className="size-4 text-fg-brand-primary" aria-hidden>
+        <path d="M1.5 8.5 4 11l5.5-6M7 11l.5.5 5.5-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  } else if (status === "failed") {
+    glyph = (
+      <svg viewBox="0 0 16 16" fill="none" className="size-4 text-fg-error-primary" aria-hidden>
+        <path d="M8 5.333V8m0 2.667h.007M14.667 8A6.667 6.667 0 1 1 8 1.333 6.667 6.667 0 0 1 14.667 8Z" stroke="currentColor" strokeWidth="1.333" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  } else {
+    glyph = (
+      <svg viewBox="0 0 16 16" fill="none" className="size-4 text-fg-quaternary" aria-hidden>
+        <path d="m3 8.5 3 3 7-7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+
+  return (
+    <span className={clsx("group relative inline-flex size-4 items-center justify-center font-body", className)}>
+      {glyph}
+      {tooltip ? (
+        <span className="pointer-events-none absolute bottom-full left-1/2 mb-1.5 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-bg-primary-solid px-md py-sm text-xs font-semibold text-text-white shadow-lg group-hover:block">
+          {tooltip}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/components/MessageStatusIcon/index.ts

@@ -0,0 +1,2 @@
+export { MessageStatusIcon } from "./MessageStatusIcon";
+export type { MessageStatusIconProps, MessageStatus } from "./MessageStatusIcon";

package/src/components/MetricItem/MetricItem.tsx

@@ -0,0 +1,147 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export interface MetricItemProps extends HTMLAttributes<HTMLDivElement> {
+  /** Metric title, e.g. "Views 24 hours". */
+  label: ReactNode;
+  /** Big number, e.g. "2,000". Rendered in display-sm. */
+  value: ReactNode;
+  /** Trend chip — compose a `Change` element here. */
+  change?: ReactNode;
+  /** Caption beside the change, e.g. "vs last month" (chart layout only). */
+  changeText?: ReactNode;
+  /** Featured-icon slot, rendered top-left (consumer supplies the badge). */
+  icon?: ReactNode;
+  /** Sparkline slot, rendered right of the number (e.g. a Recharts chart). */
+  chart?: ReactNode;
+  /** Footer action, e.g. a "View report" button — renders a divided footer. */
+  action?: ReactNode;
+  /** Top-right options (dots) button — rendered only when handler is given. */
+  onMenuClick?: () => void;
+}
+
+const DotsVertical = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+    <path
+      d="M10 10.83a.83.83 0 1 0 0-1.66.83.83 0 0 0 0 1.66ZM10 5a.83.83 0 1 0 0-1.67A.83.83 0 0 0 10 5ZM10 16.67A.83.83 0 1 0 10 15a.83.83 0 0 0 0 1.67Z"
+      stroke="currentColor"
+      strokeWidth="1.67"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const Label = ({ children }: { children: ReactNode }) => (
+  <p className="w-full text-sm font-medium text-text-tertiary">{children}</p>
+);
+
+const Value = ({ children }: { children: ReactNode }) => (
+  <span className="flex-1 font-display text-display-sm font-semibold text-text-primary">
+    {children}
+  </span>
+);
+
+/**
+ * Metric / stat card. One component covering the Figma Simple / Icon / Chart
+ * types via optional slots:
+ * - bare        → Simple (label + value + inline `change`).
+ * - `icon`      → Icon (featured-icon badge on top).
+ * - `chart`     → Chart (value + change/`changeText` left, sparkline right).
+ * - `action`    → divided footer with the action node.
+ * - `onMenuClick` → dots-vertical button top-right.
+ *
+ * `icon` and `chart` are ReactNode slots, so the missing Figma "Featured icons"
+ * family and the deferred `_ChartMini` (Recharts) are non-blocking — consumers
+ * fill them. Note: Figma's Chart variant uses a text-md/semibold label; this
+ * component standardises on text-sm/medium for all types (see figma-map).
+ */
+export function MetricItem({
+  label,
+  value,
+  change,
+  changeText,
+  icon,
+  chart,
+  action,
+  onMenuClick,
+  className,
+  ...rest
+}: MetricItemProps) {
+  const hasChart = !!chart;
+  const hasIcon = !!icon;
+
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full flex-col rounded-xl border border-border-secondary bg-bg-primary shadow-xs",
+        className,
+      )}
+      {...rest}
+    >
+      <div
+        className={clsx(
+          "flex w-full flex-col p-2xl",
+          hasIcon || hasChart ? "gap-2xl" : "gap-md",
+        )}
+      >
+        {hasIcon && <div className="shrink-0">{icon}</div>}
+
+        {hasChart ? (
+          <>
+            <Label>{label}</Label>
+            <div className="flex w-full items-end gap-xl">
+              <div className="flex min-w-0 flex-1 flex-col gap-lg">
+                <Value>{value}</Value>
+                {(change || changeText) && (
+                  <div className="flex w-full items-center gap-md">
+                    {change}
+                    {changeText && (
+                      <span className="min-w-0 flex-1 truncate text-sm font-medium text-text-tertiary">
+                        {changeText}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="shrink-0">{chart}</div>
+            </div>
+          </>
+        ) : hasIcon ? (
+          <div className="flex w-full flex-col gap-md">
+            <Label>{label}</Label>
+            <div className="flex w-full items-end gap-xl">
+              <Value>{value}</Value>
+              {change && <div className="shrink-0">{change}</div>}
+            </div>
+          </div>
+        ) : (
+          <>
+            <Label>{label}</Label>
+            <div className="flex w-full items-end gap-xl">
+              <Value>{value}</Value>
+              {change && <div className="shrink-0">{change}</div>}
+            </div>
+          </>
+        )}
+      </div>
+
+      {action && (
+        <div className="flex w-full items-center justify-end border-t border-border-secondary px-2xl py-xl">
+          {action}
+        </div>
+      )}
+
+      {onMenuClick && (
+        <button
+          type="button"
+          onClick={onMenuClick}
+          aria-label="Options"
+          className="absolute right-[19px] top-[19px] text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+        >
+          <DotsVertical className="size-5" />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/MetricItem/index.ts

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

package/src/components/ModalActions/ModalActions.tsx

@@ -0,0 +1,57 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type ModalActionsType = "horizontal-fill" | "vertical-fill" | "right-aligned";
+
+export interface ModalActionsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * - `horizontal-fill` — buttons share the row, each flex-1.
+   * - `vertical-fill` — buttons stacked full-width.
+   * - `right-aligned` — `leading` on the left, buttons pushed right.
+   */
+  type?: ModalActionsType;
+  /** Top divider separating actions from the modal body. */
+  divider?: boolean;
+  /** Left-side content for `right-aligned` (e.g. a checkbox / tertiary button). */
+  leading?: ReactNode;
+  /** The action buttons — compose `Button` / `ButtonDestructive` here. */
+  children: ReactNode;
+}
+
+/**
+ * Modal footer button row. Layout shell only — buttons are supplied as children
+ * (composed from the library's Button components), laid out per `type`. Fill
+ * variants stretch their children; `right-aligned` pairs a `leading` slot with
+ * the right-pushed actions.
+ */
+export function ModalActions({
+  type = "horizontal-fill",
+  divider = true,
+  leading,
+  children,
+  className,
+  ...rest
+}: ModalActionsProps) {
+  return (
+    <div className={clsx("flex w-full flex-col", className)} {...rest}>
+      {divider && <div className="mt-4xl border-t border-border-secondary" />}
+      <div
+        className={clsx(
+          "flex px-3xl pb-3xl pt-3xl",
+          type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
+          type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
+          type === "right-aligned" && "items-center gap-lg",
+        )}
+      >
+        {type === "right-aligned" ? (
+          <>
+            <div className="flex flex-1 items-center gap-lg">{leading}</div>
+            <div className="flex items-center gap-lg">{children}</div>
+          </>
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ModalActions/index.ts

@@ -0,0 +1,2 @@
+export { ModalActions } from "./ModalActions";
+export type { ModalActionsProps, ModalActionsType } from "./ModalActions";

package/src/components/ModalHeader/ModalHeader.tsx

@@ -0,0 +1,99 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type ModalHeaderType = "left" | "center" | "horizontal";
+
+export interface ModalHeaderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Featured-icon glyph, rendered inside a 40px boxed badge. */
+  icon?: ReactNode;
+  /**
+   * - `left` — icon on top, text left-aligned.
+   * - `center` — icon on top, text centred.
+   * - `horizontal` — icon to the left of the text.
+   */
+  type?: ModalHeaderType;
+  /** Bottom divider separating the header from the modal body. */
+  divider?: boolean;
+  /** Renders an x-close button top-right when provided. */
+  onClose?: () => void;
+}
+
+const FeaturedIcon = ({ children }: { children: ReactNode }) => (
+  <div className="flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs">
+    {children}
+  </div>
+);
+
+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>
+);
+
+/**
+ * Modal header — featured-icon badge + title + supporting text, with an optional
+ * x-close button and bottom divider. `type` controls alignment (left / centred /
+ * icon-beside-text). The `icon` is a slot; consumer supplies the glyph.
+ */
+export function ModalHeader({
+  title,
+  description,
+  icon,
+  type = "left",
+  divider = true,
+  onClose,
+  className,
+  ...rest
+}: ModalHeaderProps) {
+  const isCenter = type === "center";
+  const isHorizontal = type === "horizontal";
+
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full flex-col",
+        isHorizontal ? "items-start" : isCenter ? "items-center" : "items-start",
+        className,
+      )}
+      {...rest}
+    >
+      <div
+        className={clsx(
+          "flex w-full gap-xl px-3xl pt-3xl",
+          isHorizontal ? "items-start" : "flex-col",
+          isCenter && "items-center",
+        )}
+      >
+        {icon && <FeaturedIcon>{icon}</FeaturedIcon>}
+        <div
+          className={clsx(
+            "flex flex-col gap-xxs",
+            isHorizontal ? "flex-1" : "w-full",
+            isCenter && "items-center text-center",
+          )}
+        >
+          <p className="w-full text-md font-semibold text-text-primary">{title}</p>
+          {description && (
+            <p className="w-full text-sm text-text-tertiary">{description}</p>
+          )}
+        </div>
+      </div>
+
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute right-4 top-4 flex size-9 items-center justify-center rounded-md text-fg-quaternary transition-colors hover:text-fg-quaternary-hover"
+        >
+          <XClose />
+        </button>
+      )}
+
+      {divider && <div className="mt-2xl w-full border-t border-border-secondary" />}
+    </div>
+  );
+}

package/src/components/ModalHeader/index.ts

@@ -0,0 +1,2 @@
+export { ModalHeader } from "./ModalHeader";
+export type { ModalHeaderProps, ModalHeaderType } from "./ModalHeader";

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,118 @@
+import { useState, type ReactNode } from "react";
+import clsx from "clsx";
+import { SelectMenuItem } from "../SelectMenuItem";
+import { Tag } from "../Tag";
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  supportingText?: ReactNode;
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[];
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  open?: boolean;
+  onToggle?: () => void;
+  label?: ReactNode;
+  hint?: ReactNode;
+  placeholder?: string;
+  /** Show the in-trigger search input (default true). */
+  searchable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  className?: string;
+}
+
+/**
+ * Multi-select — trigger with selected-item `Tag` chips + a search input, over a
+ * shared dropdown of `SelectMenuItem` (`multi`) options with a search empty
+ * state. Composes the Select-family primitives rather than reimplementing a
+ * dropdown. Controlled: `value`/`onChange` (selection) and `open`/`onToggle`.
+ */
+export function MultiSelect({
+  options,
+  value = [],
+  onChange,
+  open = false,
+  onToggle,
+  label,
+  hint,
+  placeholder = "Select...",
+  searchable = true,
+  disabled = false,
+  invalid = false,
+  className,
+}: MultiSelectProps) {
+  const [query, setQuery] = useState("");
+  const selected = options.filter((o) => value.includes(o.value));
+  const filtered = options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
+
+  const toggleValue = (v: string) =>
+    onChange?.(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+
+  return (
+    <div className={clsx("flex w-full flex-col gap-sm font-body", className)}>
+      {label && <span className="text-sm font-medium text-text-secondary">{label}</span>}
+
+      <div className="relative">
+        <div
+          className={clsx(
+            "flex min-h-[44px] w-full flex-wrap items-center gap-xs rounded-md border bg-bg-primary px-md py-1.5 shadow-xs",
+            invalid ? "border-border-error" : open ? "border-border-brand ring-2 ring-utility-brand-500/40" : "border-border-primary",
+            disabled && "cursor-not-allowed bg-bg-secondary opacity-60",
+          )}
+          onClick={() => !disabled && onToggle?.()}
+        >
+          {selected.map((o) => (
+            <Tag
+              key={o.value}
+              size="sm"
+              onClose={() => toggleValue(o.value)}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {o.label}
+            </Tag>
+          ))}
+          {searchable ? (
+            <input
+              value={query}
+              disabled={disabled}
+              placeholder={selected.length ? "" : placeholder}
+              onChange={(e) => setQuery(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              className="min-w-[80px] flex-1 bg-transparent py-xxs text-md text-text-primary outline-none placeholder:text-text-placeholder"
+            />
+          ) : (
+            !selected.length && <span className="flex-1 text-md text-text-placeholder">{placeholder}</span>
+          )}
+          <svg viewBox="0 0 16 16" fill="none" className={clsx("size-4 shrink-0 text-fg-quaternary transition-transform", open && "rotate-180")} aria-hidden>
+            <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.33" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </div>
+
+        {open && (
+          <div className="absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg">
+            {filtered.length ? (
+              filtered.map((o) => (
+                <SelectMenuItem
+                  key={o.value}
+                  multi
+                  label={o.label}
+                  supportingText={o.supportingText}
+                  selected={value.includes(o.value)}
+                  onClick={() => toggleValue(o.value)}
+                />
+              ))
+            ) : (
+              <div className="px-md py-lg text-center text-sm text-text-tertiary">No results found</div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {hint && <span className={clsx("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary")}>{hint}</span>}
+    </div>
+  );
+}

package/src/components/MultiSelect/index.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from "./MultiSelect";
+export type { MultiSelectProps, MultiSelectOption } from "./MultiSelect";