@borisj74/bv-ds 0.1.0

package/src/components/ContentParagraph/ContentParagraph.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type ContentParagraphSize = "sm" | "md" | "lg" | "xl";
+
+export interface ContentParagraphProps {
+  /** Type scale. */
+  size?: ContentParagraphSize;
+  children: ReactNode;
+  className?: string;
+}
+
+// lg verified = text-lg (18/28); sm/md/xl follow the body ramp
+// (sm→text-sm, md→text-md, xl→text-xl) — inferred, not individually pulled.
+const sizeClasses: Record<ContentParagraphSize, string> = {
+  sm: "text-sm",
+  md: "text-md",
+  lg: "text-lg",
+  xl: "text-xl",
+};
+
+/** Long-form content paragraph (article/marketing body copy). */
+export function ContentParagraph({
+  size = "md",
+  children,
+  className,
+}: ContentParagraphProps) {
+  return (
+    <p
+      className={clsx(
+        "font-body font-normal text-text-tertiary",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      {children}
+    </p>
+  );
+}

package/src/components/ContentParagraph/index.ts

@@ -0,0 +1,5 @@
+export { ContentParagraph } from "./ContentParagraph";
+export type {
+  ContentParagraphProps,
+  ContentParagraphSize,
+} from "./ContentParagraph";

package/src/components/ContentQuote/ContentQuote.tsx

@@ -0,0 +1,114 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type ContentQuoteAlign = "left" | "center";
+export type ContentQuoteSize = "sm" | "md" | "lg" | "xl" | "2xl";
+
+export interface ContentQuoteProps {
+  /** The quotation text. */
+  quote: ReactNode;
+  /** Left-bordered (default) or centred layout. */
+  align?: ContentQuoteAlign;
+  /** Quote type scale. */
+  size?: ContentQuoteSize;
+  /** Author avatar — compose an Avatar. */
+  avatar?: ReactNode;
+  /** Author name. */
+  authorName?: ReactNode;
+  /** Author role / supporting line. */
+  authorRole?: ReactNode;
+  className?: string;
+}
+
+// md verified = text-lg (18/28). sm/lg/xl/2xl inferred from the type scale.
+const quoteSizeClasses: Record<ContentQuoteSize, string> = {
+  sm: "text-md",
+  md: "text-lg",
+  lg: "text-xl",
+  xl: "text-display-xs",
+  "2xl": "text-display-sm",
+};
+
+/** Author block (avatar + name + role). */
+function Author({
+  avatar,
+  authorName,
+  authorRole,
+  center,
+}: {
+  avatar?: ReactNode;
+  authorName?: ReactNode;
+  authorRole?: ReactNode;
+  center?: boolean;
+}) {
+  if (!avatar && !authorName && !authorRole) return null;
+  return (
+    <div
+      className={clsx(
+        "flex gap-md",
+        center ? "flex-col items-center" : "items-center",
+      )}
+    >
+      {avatar ? <div className="shrink-0">{avatar}</div> : null}
+      <div className={clsx("flex flex-col", center && "items-center text-center")}>
+        {authorName ? (
+          <span className="text-sm font-semibold text-text-primary">
+            {authorName}
+          </span>
+        ) : null}
+        {authorRole ? (
+          <span className="text-sm font-normal text-text-tertiary">
+            {authorRole}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/** Long-form pull quote with optional author attribution. */
+export function ContentQuote({
+  quote,
+  align = "left",
+  size = "md",
+  avatar,
+  authorName,
+  authorRole,
+  className,
+}: ContentQuoteProps) {
+  const quoteText = (
+    <p
+      className={clsx(
+        "font-body font-medium italic text-text-primary",
+        quoteSizeClasses[size],
+        align === "center" && "text-center",
+      )}
+    >
+      {quote}
+    </p>
+  );
+
+  if (align === "center") {
+    return (
+      <div className={clsx("flex flex-col items-center gap-2xl font-body", className)}>
+        {quoteText}
+        <Author
+          avatar={avatar}
+          authorName={authorName}
+          authorRole={authorRole}
+          center
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("flex items-stretch gap-2xl font-body", className)}>
+      <span className="w-0.5 shrink-0 self-stretch bg-border-secondary" aria-hidden />
+      <div className="flex min-w-0 flex-1 flex-col gap-3xl py-md">
+        {quoteText}
+        <Author avatar={avatar} authorName={authorName} authorRole={authorRole} />
+      </div>
+    </div>
+  );
+}

package/src/components/ContentQuote/index.ts

@@ -0,0 +1,6 @@
+export { ContentQuote } from "./ContentQuote";
+export type {
+  ContentQuoteProps,
+  ContentQuoteAlign,
+  ContentQuoteSize,
+} from "./ContentQuote";

package/src/components/ContentRule/ContentRule.tsx

@@ -0,0 +1,31 @@
+import clsx from "clsx";
+
+export type ContentRuleSize = "sm" | "md" | "lg" | "xl" | "2xl";
+
+export interface ContentRuleProps {
+  /** Controls the vertical breathing room around the rule. */
+  size?: ContentRuleSize;
+  className?: string;
+}
+
+// Vertical padding ramp. md verified (32px each side); others inferred.
+const sizePadding: Record<ContentRuleSize, string> = {
+  sm: "py-3xl", // 24px
+  md: "py-4xl", // 32px
+  lg: "py-5xl", // 40px
+  xl: "py-6xl", // 48px
+  "2xl": "py-7xl", // 64px
+};
+
+/**
+ * A plain full-width horizontal rule for separating blocks of long-form
+ * content. Distinct from `ContentDivider`, which carries a centred
+ * label/button. `size` sets the surrounding vertical spacing.
+ */
+export function ContentRule({ size = "md", className }: ContentRuleProps) {
+  return (
+    <div className={clsx("w-full", sizePadding[size], className)}>
+      <hr className="border-0 border-t border-border-secondary" />
+    </div>
+  );
+}

package/src/components/ContentRule/index.ts

@@ -0,0 +1,2 @@
+export { ContentRule } from "./ContentRule";
+export type { ContentRuleProps, ContentRuleSize } from "./ContentRule";

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface ContextMenuProps {
+  /** Whether the menu is visible. */
+  open: boolean;
+  /** Viewport x of the right-click (from useContextMenu). */
+  x: number;
+  /** Viewport y of the right-click (from useContextMenu). */
+  y: number;
+  /** Called on outside-click or Escape. */
+  onClose: () => void;
+  /** Menu rows — typically DropdownMenuListItem elements. */
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * A thin positioned panel for right-click menus. Reuses the dropdown panel
+ * tokens (shadow-lg, border-secondary-alt, radius-md) and renders whatever
+ * rows you pass — compose DropdownMenuListItem children; it does NOT
+ * reimplement list items. Pair with `useContextMenu`.
+ */
+export function ContextMenu({
+  open,
+  x,
+  y,
+  onClose,
+  children,
+  className,
+}: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      role="menu"
+      style={{ position: "fixed", top: y, left: x }}
+      className={clsx(
+        "z-50 flex min-w-[216px] flex-col py-xs",
+        "rounded-md border border-border-secondary-alt bg-bg-primary font-body shadow-lg",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/ContextMenu/index.ts

@@ -0,0 +1,7 @@
+export { ContextMenu } from "./ContextMenu";
+export type { ContextMenuProps } from "./ContextMenu";
+export { useContextMenu } from "./useContextMenu";
+export type {
+  UseContextMenuReturn,
+  ContextMenuState,
+} from "./useContextMenu";

package/src/components/ContextMenu/useContextMenu.ts

@@ -0,0 +1,41 @@
+import { useCallback, useState } from "react";
+
+export interface ContextMenuState {
+  open: boolean;
+  x: number;
+  y: number;
+}
+
+export interface UseContextMenuReturn extends ContextMenuState {
+  /** Attach to the element that should open the menu on right-click. */
+  onContextMenu: (e: { preventDefault: () => void; clientX: number; clientY: number }) => void;
+  /** Close the menu. */
+  close: () => void;
+}
+
+/**
+ * Captures right-click position and manages open state for a ContextMenu.
+ *
+ * ```tsx
+ * const menu = useContextMenu();
+ * <div onContextMenu={menu.onContextMenu}>…</div>
+ * <ContextMenu open={menu.open} x={menu.x} y={menu.y} onClose={menu.close}>
+ *   <DropdownMenuListItem>Cut</DropdownMenuListItem>
+ * </ContextMenu>
+ * ```
+ */
+export function useContextMenu(): UseContextMenuReturn {
+  const [state, setState] = useState<ContextMenuState>({ open: false, x: 0, y: 0 });
+
+  const onContextMenu = useCallback(
+    (e: { preventDefault: () => void; clientX: number; clientY: number }) => {
+      e.preventDefault();
+      setState({ open: true, x: e.clientX, y: e.clientY });
+    },
+    [],
+  );
+
+  const close = useCallback(() => setState((s) => ({ ...s, open: false })), []);
+
+  return { ...state, onContextMenu, close };
+}

package/src/components/DatePickerCell/DatePickerCell.tsx

@@ -0,0 +1,77 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export type DatePickerCellType = "default" | "active" | "selected" | "today";
+
+export interface DatePickerCellProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  /** Day number (or any short label). */
+  date: ReactNode;
+  /** Visual role of the cell within the calendar grid. */
+  cellType?: DatePickerCellType;
+  /** Shows the small "has events" dot under the date. */
+  hasDot?: boolean;
+  /** Range-fill connector on the left edge (cell is mid/end of a range). */
+  leftConnector?: boolean;
+  /** Range-fill connector on the right edge (cell is start/mid of a range). */
+  rightConnector?: boolean;
+}
+
+const cellClasses: Record<DatePickerCellType, string> = {
+  default: "text-text-secondary hover:bg-bg-primary-hover hover:text-text-secondary-hover",
+  active: "bg-bg-secondary font-medium text-text-secondary hover:bg-bg-secondary-hover",
+  today: "bg-bg-secondary font-medium text-text-secondary hover:bg-bg-secondary-hover",
+  selected: "bg-bg-brand-solid font-medium text-text-white hover:bg-bg-brand-solid-hover",
+};
+
+/**
+ * A single day cell in the date-picker calendar grid. Distinct from the
+ * Calendar page's own `CalendarCell` — this one is round, supports range
+ * connectors, and a selected (brand-filled) state.
+ */
+export function DatePickerCell({
+  date,
+  cellType = "default",
+  hasDot = false,
+  leftConnector = false,
+  rightConnector = false,
+  disabled = false,
+  className,
+  ...rest
+}: DatePickerCellProps) {
+  const isRange = cellType !== "default";
+  return (
+    <div className="relative size-10">
+      {isRange && leftConnector ? (
+        <span className="absolute left-0 top-0 h-10 w-1/2 bg-bg-secondary" aria-hidden />
+      ) : null}
+      {isRange && rightConnector ? (
+        <span className="absolute right-0 top-0 h-10 w-1/2 bg-bg-secondary" aria-hidden />
+      ) : null}
+      <button
+        type="button"
+        disabled={disabled}
+        className={clsx(
+          "relative flex size-10 items-center justify-center rounded-full text-sm font-body",
+          "outline-none transition-colors",
+          "focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+          cellClasses[cellType],
+          disabled && "pointer-events-none opacity-50",
+          className,
+        )}
+        {...rest}
+      >
+        {date}
+        {hasDot ? (
+          <span
+            className={clsx(
+              "absolute bottom-1 left-1/2 size-[5px] -translate-x-1/2 rounded-full",
+              cellType === "selected" ? "bg-text-white" : "bg-bg-brand-solid",
+            )}
+            aria-hidden
+          />
+        ) : null}
+      </button>
+    </div>
+  );
+}

package/src/components/DatePickerCell/index.ts

@@ -0,0 +1,2 @@
+export { DatePickerCell } from "./DatePickerCell";
+export type { DatePickerCellProps, DatePickerCellType } from "./DatePickerCell";

package/src/components/DatePickerListItem/DatePickerListItem.tsx

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface DatePickerListItemProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Marks the item as the current selection (filled background). */
+  selected?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * A selectable row in a date-picker preset list (e.g. "Today", "Last 7 days").
+ * Hover and focus are handled natively; pass `selected` for the active row.
+ */
+export function DatePickerListItem({
+  selected = false,
+  children,
+  className,
+  ...rest
+}: DatePickerListItemProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      className={clsx(
+        "flex w-[160px] items-center overflow-hidden rounded-sm px-lg py-md text-left font-body text-sm font-medium",
+        "outline-none transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        selected
+          ? "bg-bg-secondary text-text-secondary-hover hover:bg-bg-secondary-hover"
+          : "text-text-secondary hover:bg-bg-primary-hover hover:text-text-secondary-hover",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/DatePickerListItem/index.ts

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

package/src/components/DatePickerMenu/DatePickerMenu.tsx

@@ -0,0 +1,131 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface DatePickerMenuProps {
+  /** Current month label, e.g. "January 2027". */
+  monthLabel: ReactNode;
+  /** Previous-month handler. */
+  onPrevMonth?: () => void;
+  /** Next-month handler. */
+  onNextMonth?: () => void;
+  /** Weekday column headers. Defaults to Mo–Su. */
+  weekdays?: string[];
+  /**
+   * Optional row above the grid (e.g. a date input + "Today" button).
+   * Compose your own controls here.
+   */
+  toolbar?: ReactNode;
+  /** The day grid — typically 35–42 DatePickerCell elements. */
+  children: ReactNode;
+  /** Cancel handler (renders the footer when set with onApply). */
+  onCancel?: () => void;
+  /** Apply handler (renders the footer when set with onCancel). */
+  onApply?: () => void;
+  cancelLabel?: ReactNode;
+  applyLabel?: ReactNode;
+  className?: string;
+}
+
+const defaultWeekdays = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+
+function Chevron({ left }: { left?: boolean }) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path
+        d={left ? "M12.5 15 7.5 10l5-5" : "M7.5 5l5 5-5 5"}
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function NavButton({
+  left,
+  onClick,
+}: {
+  left?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={left ? "Previous month" : "Next month"}
+      className="flex size-8 items-center justify-center rounded-sm text-fg-quaternary outline-none transition-colors hover:bg-bg-primary-hover hover:text-fg-quaternary-hover focus-visible:ring-2 focus-visible:ring-border-brand"
+    >
+      <Chevron left={left} />
+    </button>
+  );
+}
+
+/**
+ * The calendar panel of a date picker — month navigation, weekday header,
+ * a day grid (compose DatePickerCell children), and optional toolbar/footer.
+ * Date math is the consumer's responsibility; this renders the chrome.
+ */
+export function DatePickerMenu({
+  monthLabel,
+  onPrevMonth,
+  onNextMonth,
+  weekdays = defaultWeekdays,
+  toolbar,
+  children,
+  onCancel,
+  onApply,
+  cancelLabel = "Cancel",
+  applyLabel = "Apply",
+  className,
+}: DatePickerMenuProps) {
+  const showFooter = Boolean(onCancel || onApply);
+  return (
+    <div
+      className={clsx(
+        "w-[328px] overflow-hidden rounded-2xl border border-border-secondary-alt bg-bg-primary font-body shadow-xl",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-xl px-3xl py-2xl">
+        <div className="flex items-center justify-between">
+          <NavButton left onClick={onPrevMonth} />
+          <span className="text-sm font-semibold text-text-secondary">
+            {monthLabel}
+          </span>
+          <NavButton onClick={onNextMonth} />
+        </div>
+        {toolbar}
+        <div className="flex flex-wrap gap-y-xs">
+          {weekdays.map((wd) => (
+            <span
+              key={wd}
+              className="flex size-10 items-center justify-center text-sm font-medium text-text-secondary"
+            >
+              {wd}
+            </span>
+          ))}
+          {children}
+        </div>
+      </div>
+      {showFooter ? (
+        <div className="flex gap-lg border-t border-border-secondary p-xl">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="flex-1 rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-xs"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            onClick={onApply}
+            className="flex-1 rounded-md bg-bg-brand-solid px-lg py-md text-sm font-semibold text-text-white shadow-xs"
+          >
+            {applyLabel}
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/DatePickerMenu/index.ts

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

package/src/components/DropdownAccountListItem/DropdownAccountListItem.tsx

@@ -0,0 +1,69 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export interface DropdownAccountListItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "name"> {
+  /** Square avatar (compose an avatar/image). */
+  avatar?: ReactNode;
+  /** Account name. */
+  name: ReactNode;
+  /** Account email / supporting line. */
+  email?: ReactNode;
+  /** Whether this account is the active selection (filled radio). */
+  selected?: boolean;
+}
+
+/**
+ * An account-switcher row for a dropdown menu — square avatar, name + email,
+ * and a trailing radio indicator. Hover handled natively.
+ */
+export function DropdownAccountListItem({
+  avatar,
+  name,
+  email,
+  selected = false,
+  className,
+  ...rest
+}: DropdownAccountListItemProps) {
+  return (
+    <button
+      type="button"
+      role="menuitemradio"
+      aria-checked={selected}
+      className={clsx(
+        "flex w-full items-start gap-sm rounded-md p-md text-left font-body",
+        "outline-none transition-colors hover:bg-bg-primary-hover",
+        "focus-visible:ring-2 focus-visible:ring-border-brand",
+        className,
+      )}
+      {...rest}
+    >
+      {avatar ? (
+        <span className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border-[0.5px] border-border-secondary bg-bg-primary p-[2px] shadow-md">
+          <span className="size-8 overflow-hidden rounded-md">{avatar}</span>
+        </span>
+      ) : null}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-semibold text-text-primary">
+          {name}
+        </span>
+        {email ? (
+          <span className="truncate text-sm font-normal text-text-tertiary">
+            {email}
+          </span>
+        ) : null}
+      </span>
+      <span
+        className={clsx(
+          "mt-px flex size-4 shrink-0 items-center justify-center rounded-full border",
+          selected ? "border-border-brand" : "border-border-primary",
+        )}
+        aria-hidden
+      >
+        {selected ? (
+          <span className="size-1.5 rounded-full bg-fg-brand-primary" />
+        ) : null}
+      </span>
+    </button>
+  );
+}

package/src/components/DropdownAccountListItem/index.ts

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