@borisj74/bv-ds 0.1.0

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type LoadingIndicatorStyle = "line-simple" | "line-spinner" | "dot-circle";
+export type LoadingIndicatorSize = "sm" | "md" | "lg" | "xl";
+
+export interface LoadingIndicatorProps {
+  /** Spinner style. */
+  variant?: LoadingIndicatorStyle;
+  /** Size scale. md = 48px (verified); sm/lg/xl inferred. */
+  size?: LoadingIndicatorSize;
+  /** Optional supporting text below the spinner (e.g. "Loading..."). */
+  label?: ReactNode;
+  className?: string;
+}
+
+// md = 48px verified from Figma; sm/lg/xl inferred from the size ramp.
+const sizePx: Record<LoadingIndicatorSize, number> = { sm: 32, md: 48, lg: 64, xl: 80 };
+const borderPx: Record<LoadingIndicatorSize, number> = { sm: 3, md: 4, lg: 5, xl: 6 };
+
+function DotCircle({ px }: { px: number }) {
+  const dot = Math.max(3, Math.round(px / 8));
+  return (
+    <span
+      className="relative inline-block animate-spin"
+      style={{ width: px, height: px, animationDuration: "1.2s" }}
+    >
+      {Array.from({ length: 12 }).map((_, i) => (
+        <span
+          key={i}
+          className="absolute left-1/2 top-0 rounded-full bg-fg-brand-primary"
+          style={{
+            width: dot,
+            height: dot,
+            marginLeft: -dot / 2,
+            transformOrigin: `${dot / 2}px ${px / 2}px`,
+            transform: `rotate(${i * 30}deg)`,
+            opacity: (i + 1) / 12,
+          }}
+        />
+      ))}
+    </span>
+  );
+}
+
+/**
+ * Spinner / loading indicator. `line-simple` and `line-spinner` are stroked
+ * rings (spinner uses a round cap); `dot-circle` is a ring of fading dots.
+ * Rendered with CSS animation rather than the Figma image asset.
+ */
+export function LoadingIndicator({
+  variant = "line-simple",
+  size = "md",
+  label,
+  className,
+}: LoadingIndicatorProps) {
+  const px = sizePx[size];
+
+  let spinner: ReactNode;
+  if (variant === "dot-circle") {
+    spinner = <DotCircle px={px} />;
+  } else {
+    const stroke = borderPx[size];
+    const r = (px - stroke) / 2;
+    const c = 2 * Math.PI * r;
+    spinner = (
+      <svg
+        className="animate-spin"
+        style={{ width: px, height: px, animationDuration: "0.9s" }}
+        viewBox={`0 0 ${px} ${px}`}
+        role="presentation"
+      >
+        <circle
+          cx={px / 2}
+          cy={px / 2}
+          r={r}
+          fill="none"
+          className="stroke-bg-quaternary"
+          strokeWidth={stroke}
+        />
+        <circle
+          cx={px / 2}
+          cy={px / 2}
+          r={r}
+          fill="none"
+          className="stroke-fg-brand-primary"
+          strokeWidth={stroke}
+          strokeDasharray={c}
+          strokeDashoffset={c * 0.75}
+          strokeLinecap={variant === "line-spinner" ? "round" : "butt"}
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={clsx("inline-flex flex-col items-center gap-xl font-body", className)}
+    >
+      {spinner}
+      {label ? (
+        <span className="text-sm font-medium text-text-secondary">{label}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/LoadingIndicator/index.ts

@@ -0,0 +1,6 @@
+export { LoadingIndicator } from "./LoadingIndicator";
+export type {
+  LoadingIndicatorProps,
+  LoadingIndicatorStyle,
+  LoadingIndicatorSize,
+} from "./LoadingIndicator";

package/src/components/MediaMessage/MediaMessage.tsx

@@ -0,0 +1,109 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import { MessageShell, bubbleClasses } from "../Message/messageShared";
+
+export type MediaMessageType = "file" | "audio" | "video" | "image";
+
+export interface MediaMessageProps {
+  /** Attachment kind. */
+  type?: MediaMessageType;
+  /** File name (file/audio/video). */
+  fileName?: ReactNode;
+  /** Supporting line — size / duration. */
+  meta?: ReactNode;
+  /** Short extension label for the file-type icon (file type). */
+  fileExt?: string;
+  /** Image/video poster source. */
+  src?: string;
+  author?: ReactNode;
+  time?: ReactNode;
+  avatar?: ReactNode;
+  sent?: boolean;
+  reactions?: ReactNode;
+  className?: string;
+}
+
+function FileTypeIcon({ ext }: { ext: string }) {
+  return (
+    <span className="relative flex h-10 w-8 shrink-0 items-end justify-center rounded-[2px] border border-border-secondary bg-bg-primary">
+      <span className="mb-1 rounded-[2px] bg-utility-brand-600 px-1 py-[2px] text-[10px] font-bold text-text-white">
+        {ext}
+      </span>
+    </span>
+  );
+}
+
+function PlayButton() {
+  return (
+    <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-brand-solid text-text-white">
+      <svg viewBox="0 0 16 16" fill="currentColor" className="size-4" aria-hidden>
+        <path d="M4 2.5v11l9-5.5-9-5.5Z" />
+      </svg>
+    </span>
+  );
+}
+
+/** A chat message carrying an attachment — file, audio, video, or image. */
+export function MediaMessage({
+  type = "file",
+  fileName,
+  meta,
+  fileExt = "JPG",
+  src,
+  author,
+  time,
+  avatar,
+  sent = false,
+  reactions,
+  className,
+}: MediaMessageProps) {
+  let bubble: ReactNode;
+  if (type === "image") {
+    bubble = (
+      <div className={clsx(bubbleClasses(sent, "white"))}>
+        {src ? <img src={src} alt={typeof fileName === "string" ? fileName : ""} className="block w-full object-cover" /> : null}
+      </div>
+    );
+  } else if (type === "video") {
+    bubble = (
+      <div className={clsx(bubbleClasses(sent, "white"), "relative")}>
+        {src ? <img src={src} alt="" className="block w-full object-cover" /> : null}
+        <span className="absolute inset-0 flex items-center justify-center">
+          <PlayButton />
+        </span>
+      </div>
+    );
+  } else if (type === "audio") {
+    bubble = (
+      <div className={clsx(bubbleClasses(sent, "white"), "flex items-center gap-md p-lg")}>
+        <PlayButton />
+        <span className="flex h-6 flex-1 items-center gap-[2px]">
+          {Array.from({ length: 24 }).map((_, i) => (
+            <span
+              key={i}
+              className="w-[2px] rounded-full bg-bg-quaternary"
+              style={{ height: `${30 + Math.abs(Math.sin(i)) * 70}%` }}
+            />
+          ))}
+        </span>
+        {meta ? <span className="shrink-0 text-sm text-text-tertiary">{meta}</span> : null}
+      </div>
+    );
+  } else {
+    bubble = (
+      <div className={clsx(bubbleClasses(sent, "white"), "flex items-start gap-lg p-lg")}>
+        <FileTypeIcon ext={fileExt} />
+        <span className="flex min-w-0 flex-col">
+          <span className="truncate text-sm font-medium text-text-secondary">{fileName}</span>
+          {meta ? <span className="text-sm font-normal text-text-tertiary">{meta}</span> : null}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <MessageShell author={author} time={time} avatar={avatar} sent={sent} reactions={reactions} className={className}>
+      {bubble}
+    </MessageShell>
+  );
+}

package/src/components/MediaMessage/index.ts

@@ -0,0 +1,2 @@
+export { MediaMessage } from "./MediaMessage";
+export type { MediaMessageProps, MediaMessageType } from "./MediaMessage";

package/src/components/MegaInputFieldBase/MegaInputFieldBase.tsx

@@ -0,0 +1,49 @@
+import type { InputHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type MegaInputFieldBaseSize = "sm" | "md" | "lg";
+
+export interface MegaInputFieldBaseProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  size?: MegaInputFieldBaseSize;
+  /** Error styling. */
+  destructive?: boolean;
+}
+
+const sizeClasses: Record<MegaInputFieldBaseSize, string> = {
+  sm: "size-16 rounded-lg text-display-lg",
+  md: "size-20 rounded-xl text-display-lg",
+  lg: "size-24 rounded-xl text-display-xl",
+};
+
+/**
+ * A single large character/code-entry cell (one digit per box) used to compose
+ * OTP / verification inputs. `Size` (sm/md/lg) × states (placeholder/focused/
+ * filled/disabled/error) — focus & fill are native; pass `destructive` for error.
+ */
+export function MegaInputFieldBase({
+  size = "md",
+  destructive,
+  disabled,
+  className,
+  ...rest
+}: MegaInputFieldBaseProps) {
+  return (
+    <input
+      inputMode="numeric"
+      maxLength={1}
+      disabled={disabled}
+      className={clsx(
+        "border bg-bg-primary text-center font-display font-medium shadow-xs outline-none",
+        "placeholder:text-text-placeholder placeholder:opacity-40",
+        sizeClasses[size],
+        destructive
+          ? "border-border-error-subtle text-text-error-primary"
+          : "border-border-primary text-text-brand-tertiary-alt focus:border-border-brand focus:ring-2 focus:ring-border-brand focus:ring-offset-2 focus:ring-offset-bg-primary",
+        disabled && "pointer-events-none opacity-50",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}

package/src/components/MegaInputFieldBase/index.ts

@@ -0,0 +1,5 @@
+export { MegaInputFieldBase } from "./MegaInputFieldBase";
+export type {
+  MegaInputFieldBaseProps,
+  MegaInputFieldBaseSize,
+} from "./MegaInputFieldBase";

package/src/components/Message/Message.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import { MessageShell, bubbleClasses } from "./messageShared";
+
+export type MessageType = "message" | "reply" | "writing";
+
+export interface MessageProps {
+  /** Bubble variant. */
+  type?: MessageType;
+  /** Message body text. */
+  children?: ReactNode;
+  /** Quoted text shown above the body for `type="reply"`. */
+  replyTo?: ReactNode;
+  author?: ReactNode;
+  time?: ReactNode;
+  avatar?: ReactNode;
+  sent?: boolean;
+  /** Reaction chips (compose MessageReaction). */
+  reactions?: ReactNode;
+  className?: string;
+}
+
+function WritingDots() {
+  return (
+    <span className="flex items-center gap-xs px-xs py-1">
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="size-1 animate-bounce rounded-full bg-fg-quaternary"
+          style={{ animationDelay: `${i * 0.15}s` }}
+        />
+      ))}
+    </span>
+  );
+}
+
+/**
+ * A text chat bubble. `type` covers a plain message, a reply (with a quoted
+ * line), and the writing/typing indicator. Use `sent` for own messages
+ * (right-aligned, brand bubble).
+ */
+export function Message({
+  type = "message",
+  children,
+  replyTo,
+  author,
+  time,
+  avatar,
+  sent = false,
+  reactions,
+  className,
+}: MessageProps) {
+  const tone = sent ? "brand" : "secondary";
+
+  return (
+    <MessageShell
+      author={author}
+      time={time}
+      avatar={avatar}
+      sent={sent}
+      reactions={type === "writing" ? undefined : reactions}
+      className={className}
+    >
+      {type === "writing" ? (
+        <div className={clsx(bubbleClasses(sent, "secondary"), "px-md py-md")}>
+          <WritingDots />
+        </div>
+      ) : (
+        <div className={clsx(bubbleClasses(sent, tone), "flex flex-col gap-xs px-lg py-md text-md")}>
+          {type === "reply" && replyTo ? (
+            <span
+              className={clsx(
+                "border-l-2 pl-md text-sm",
+                sent ? "border-white/40 text-text-white/80" : "border-border-secondary text-text-tertiary",
+              )}
+            >
+              {replyTo}
+            </span>
+          ) : null}
+          <span className="font-normal">{children}</span>
+        </div>
+      )}
+    </MessageShell>
+  );
+}

package/src/components/Message/index.ts

@@ -0,0 +1,3 @@
+export { Message } from "./Message";
+export type { MessageProps, MessageType } from "./Message";
+export type { MessageBubbleTone } from "./messageShared";

package/src/components/Message/messageShared.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+// Shared layout for the Message family (Message / MediaMessage / LinkMessage).
+// PRIVATE — not exported from the barrel.
+
+export type MessageBubbleTone = "secondary" | "white" | "brand";
+
+export interface MessageShellProps {
+  /** Author name. */
+  author?: ReactNode;
+  /** Timestamp. */
+  time?: ReactNode;
+  /** Avatar node (32px). */
+  avatar?: ReactNode;
+  /** Sent (own) message → right-aligned. */
+  sent?: boolean;
+  /** Reaction chips row (compose MessageReaction). */
+  reactions?: ReactNode;
+  /** The bubble content. */
+  children: ReactNode;
+  className?: string;
+}
+
+/** Bubble container classes — tone + sent-aware corner. */
+export function bubbleClasses(sent: boolean, tone: MessageBubbleTone) {
+  return clsx(
+    "overflow-hidden rounded-md border",
+    sent ? "rounded-tr-none" : "rounded-tl-none",
+    tone === "brand" && "border-transparent bg-bg-brand-solid text-text-white",
+    tone === "secondary" && "border-border-secondary bg-bg-secondary text-text-primary",
+    tone === "white" && "border-border-secondary bg-bg-primary text-text-primary",
+  );
+}
+
+/** Avatar + name/time header + bubble + reactions, with sent alignment. */
+export function MessageShell({
+  author,
+  time,
+  avatar,
+  sent = false,
+  reactions,
+  children,
+  className,
+}: MessageShellProps) {
+  return (
+    <div
+      className={clsx(
+        "flex w-[360px] max-w-full items-start gap-lg font-body",
+        sent && "flex-row-reverse",
+        className,
+      )}
+    >
+      {avatar ? <div className="shrink-0">{avatar}</div> : null}
+      <div className={clsx("flex min-w-0 flex-1 flex-col gap-sm", sent && "items-end")}>
+        {author || time ? (
+          <div className={clsx("flex w-full items-center gap-md", sent && "flex-row-reverse")}>
+            <span className="min-w-0 flex-1 truncate text-sm font-medium text-text-secondary">
+              {author}
+            </span>
+            {time ? (
+              <span className="shrink-0 text-xs font-normal text-text-tertiary">{time}</span>
+            ) : null}
+          </div>
+        ) : null}
+        {children}
+        {reactions ? (
+          <div className="flex w-full items-center justify-end gap-xs">{reactions}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/MessageAction/MessageAction.tsx

@@ -0,0 +1,221 @@
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from "react";
+import clsx from "clsx";
+
+export type MessageActionType = "minimal" | "textarea" | "advanced";
+
+export interface MessageActionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** minimal = single-line + send · textarea = multiline composer · advanced = AI prompt box */
+  type?: MessageActionType;
+  /** Controlled value of the input/textarea. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** Fired when the send affordance is activated. */
+  onSend?: () => void;
+  placeholder?: string;
+  /** Advanced only — left-side author chip (avatar + name). */
+  author?: ReactNode;
+  textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+
+/* --- minimal inline icons (currentColor, 16/20px) ------------------------- */
+const Send = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
+    <path
+      d="M17.5 2.5 9.17 10.83M17.5 2.5l-5.3 15-3.03-6.67L2.5 7.8l15-5.3Z"
+      stroke="currentColor"
+      strokeWidth="1.67"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const Attach = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path
+      d="M14 7.33 8.07 13.26a3.33 3.33 0 0 1-4.71-4.71l5.93-5.93a2.22 2.22 0 1 1 3.14 3.14l-5.94 5.93a1.11 1.11 0 0 1-1.57-1.57l5.48-5.47"
+      stroke="currentColor"
+      strokeWidth="1.33"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const Smile = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path
+      d="M5.33 9.33s1 1.34 2.67 1.34S10.67 9.33 10.67 9.33M6 6h.01M10 6h.01M14.67 8A6.67 6.67 0 1 1 1.33 8a6.67 6.67 0 0 1 13.34 0Z"
+      stroke="currentColor"
+      strokeWidth="1.33"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const Mic = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path
+      d="M8 1.33A2 2 0 0 0 6 3.33V8a2 2 0 1 0 4 0V3.33a2 2 0 0 0-2-2ZM12.67 6.67V8A4.67 4.67 0 0 1 3.33 8V6.67M8 12.67v2"
+      stroke="currentColor"
+      strokeWidth="1.33"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const Italic = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path
+      d="M9.33 3.33H6.67M9.33 12.67H6.67M10 3.33 6 12.67"
+      stroke="currentColor"
+      strokeWidth="1.33"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+const Chevron = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 12 12" fill="none" aria-hidden>
+    <path
+      d="m3 4.5 3 3 3-3"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const utilityBtn =
+  "flex items-center justify-center rounded-sm p-sm text-fg-quaternary transition-colors hover:text-fg-quaternary-hover";
+const inputBox =
+  "w-full border border-border-primary bg-bg-primary text-text-placeholder shadow-xs outline-none placeholder:text-text-placeholder";
+
+/**
+ * Message composer. Three layouts off `type`:
+ * - **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
+ *   footer, mic top-right, resize handle.
+ *
+ * Renders real `<input>`/`<textarea>` (controlled via `value`/`onValueChange`);
+ * icons are inline SVG so the package ships no remote asset deps.
+ */
+export function MessageAction({
+  type = "minimal",
+  value,
+  onValueChange,
+  onSend,
+  placeholder,
+  author,
+  textareaProps,
+  className,
+  ...rest
+}: MessageActionProps) {
+  const ph = placeholder ?? (type === "advanced" ? "Ask me anything..." : "Message");
+
+  if (type === "minimal") {
+    return (
+      <div className={clsx("flex w-[360px] items-start gap-lg", className)} {...rest}>
+        <input
+          value={value}
+          onChange={(e) => onValueChange?.(e.target.value)}
+          placeholder={ph}
+          className={clsx(inputBox, "rounded-md px-3.5 py-2.5 text-md")}
+        />
+        <button
+          type="button"
+          onClick={onSend}
+          aria-label="Send"
+          className="flex items-center justify-center rounded-md border border-border-primary bg-bg-primary p-lg text-fg-quaternary shadow-xs transition-colors hover:text-fg-quaternary-hover"
+        >
+          <Send className="size-5" />
+        </button>
+      </div>
+    );
+  }
+
+  if (type === "textarea") {
+    return (
+      <div className={clsx("relative flex h-32 w-[360px] flex-col", className)} {...rest}>
+        <textarea
+          value={value}
+          onChange={(e) => onValueChange?.(e.target.value)}
+          placeholder={ph}
+          {...textareaProps}
+          className={clsx(inputBox, "h-full resize-none rounded-md px-3.5 py-3 text-md")}
+        />
+        <button type="button" aria-label="Record" className={clsx(utilityBtn, "absolute right-2 top-2")}>
+          <Mic className="size-4" />
+        </button>
+        <div className="absolute bottom-2 right-3.5 flex items-center gap-md">
+          <div className="flex items-center gap-xxs">
+            <button type="button" aria-label="Attach" className={utilityBtn}>
+              <Attach className="size-4" />
+            </button>
+            <button type="button" aria-label="Emoji" className={utilityBtn}>
+              <Smile className="size-4" />
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={onSend}
+            className="text-sm font-semibold text-text-brand-secondary"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // advanced
+  return (
+    <div
+      className={clsx(
+        "relative flex h-40 w-[360px] flex-col rounded-xl border border-border-secondary bg-bg-secondary",
+        className,
+      )}
+      {...rest}
+    >
+      <textarea
+        value={value}
+        onChange={(e) => onValueChange?.(e.target.value)}
+        placeholder={ph}
+        {...textareaProps}
+        className={clsx(inputBox, "flex-1 resize-none rounded-xl px-3.5 py-3 text-md")}
+      />
+      <button type="button" aria-label="Record" className={clsx(utilityBtn, "absolute right-[7px] top-[7px]")}>
+        <Mic className="size-4" />
+      </button>
+      <div className="flex items-center gap-lg px-lg py-md">
+        <div className="flex flex-1 items-center">
+          {author ?? (
+            <div className="flex items-center gap-xs">
+              <span className="size-4 rounded-full bg-bg-tertiary" />
+              <span className="flex items-center gap-xxs text-xs font-semibold text-text-tertiary">
+                Olivia
+                <Chevron className="size-3" />
+              </span>
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-lg text-text-tertiary">
+          <span className="flex items-center gap-xs text-xs font-semibold">
+            <Italic className="size-4" />
+            Shortcuts
+          </span>
+          <span className="flex items-center gap-xs text-xs font-semibold">
+            <Attach className="size-4" />
+            Attach
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MessageAction/index.ts

@@ -0,0 +1,2 @@
+export { MessageAction } from "./MessageAction";
+export type { MessageActionProps, MessageActionType } from "./MessageAction";