@borisj74/bv-ds 0.1.0

package/src/components/HeaderNavigation/HeaderNavigation.tsx

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type HeaderNavigationType = "Simple" | "DualTier" | "Centered" | "Tabs";
+
+export interface HeaderNavItem {
+  label: ReactNode;
+  href?: string;
+  active?: boolean;
+  onClick?: () => void;
+}
+
+export interface HeaderNavigationProps {
+  /** Layout variant. */
+  type?: HeaderNavigationType;
+  /** Brand mark (logo). Defaults to a text wordmark. */
+  logo?: ReactNode;
+  /** Primary navigation items. */
+  items?: HeaderNavItem[];
+  /** Right-aligned actions on desktop (search/settings/notifications/account). */
+  actions?: ReactNode;
+  /** Content shown at the bottom of the open mobile drawer (e.g. an account card). */
+  mobileFooter?: ReactNode;
+  className?: string;
+}
+
+function MenuIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+      <path d="M2.5 10h15M2.5 5h15M2.5 15h15" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <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.667" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function NavLink({ item, tab }: { item: HeaderNavItem; tab?: boolean }) {
+  const className = tab
+    ? clsx(
+        "border-b-2 px-xs pb-lg pt-px text-sm font-semibold",
+        item.active
+          ? "border-fg-brand-primary text-text-brand-secondary"
+          : "border-transparent text-text-quaternary hover:text-text-secondary",
+      )
+    : clsx(
+        "rounded-sm px-md py-sm text-sm font-semibold",
+        item.active
+          ? "bg-bg-secondary text-text-secondary-hover"
+          : "text-text-secondary hover:bg-bg-secondary",
+      );
+  if (item.href) {
+    return (
+      <a href={item.href} onClick={item.onClick} className={className} aria-current={item.active ? "page" : undefined}>
+        {item.label}
+      </a>
+    );
+  }
+  return (
+    <button type="button" onClick={item.onClick} className={className}>
+      {item.label}
+    </button>
+  );
+}
+
+/**
+ * Application header navigation. One component with a `type` prop covering the
+ * Simple / DualTier / Centered / Tabs layouts. Below `md` it collapses to a
+ * logo + hamburger that opens a real (stateful) drawer.
+ */
+export function HeaderNavigation({
+  type = "Simple",
+  logo = <span className="text-md font-semibold text-text-primary">Untitled UI</span>,
+  items = [],
+  actions,
+  mobileFooter,
+  className,
+}: HeaderNavigationProps) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const navRow = (tabs?: boolean, centered?: boolean) => (
+    <nav
+      className={clsx(
+        "hidden items-center gap-xxs md:flex",
+        centered && "flex-1 justify-center",
+      )}
+    >
+      {items.map((item, i) => (
+        <NavLink key={i} item={item} tab={tabs} />
+      ))}
+    </nav>
+  );
+
+  const desktopActions = actions ? (
+    <div className="hidden shrink-0 items-center gap-lg md:flex">{actions}</div>
+  ) : null;
+
+  // Top bar — always holds logo (left) + mobile hamburger / desktop actions (right).
+  const single = type === "Simple";
+  return (
+    <header
+      className={clsx(
+        "w-full border-b border-border-secondary bg-bg-primary font-body",
+        className,
+      )}
+    >
+      <div className="mx-auto flex min-h-16 max-w-screen-xl items-center justify-between gap-xl px-container-padding-desktop max-md:px-container-padding-mobile">
+        <div className="flex items-center gap-xl">
+          <span className="shrink-0">{logo}</span>
+          {single ? navRow(false) : null}
+          {type === "Centered" ? null : null}
+        </div>
+
+        {/* Centered/DualTier/Tabs put nav on its own row; Simple keeps it inline. */}
+        {type === "Centered" ? navRow(false, true) : null}
+
+        <div className="flex items-center gap-lg">
+          {desktopActions}
+          <button
+            type="button"
+            onClick={() => setMobileOpen(true)}
+            aria-label="Open menu"
+            className="rounded-md p-md text-text-secondary md:hidden"
+          >
+            <MenuIcon />
+          </button>
+        </div>
+      </div>
+
+      {/* Second tier for non-Simple desktop layouts. */}
+      {type === "DualTier" || type === "Tabs" ? (
+        <div className="hidden border-t border-border-secondary md:block">
+          <div className="mx-auto flex max-w-screen-xl items-center px-container-padding-desktop">
+            {navRow(type === "Tabs")}
+          </div>
+        </div>
+      ) : null}
+
+      {/* Mobile drawer — real open/close state. */}
+      {mobileOpen ? (
+        <div className="fixed inset-0 z-50 flex md:hidden">
+          <div
+            className="absolute inset-0 bg-bg-overlay/70 backdrop-blur-md"
+            onClick={() => setMobileOpen(false)}
+            aria-hidden
+          />
+          <div className="relative flex h-full w-[296px] max-w-[80%] flex-col justify-between bg-bg-primary shadow-xl">
+            <div className="flex flex-col gap-2xl px-xl pb-2xl pt-xl">
+              <div className="flex items-center justify-between">
+                <span className="shrink-0">{logo}</span>
+                <button
+                  type="button"
+                  onClick={() => setMobileOpen(false)}
+                  aria-label="Close menu"
+                  className="rounded-md p-md text-text-secondary"
+                >
+                  <XIcon />
+                </button>
+              </div>
+              <nav className="flex flex-col gap-px">
+                {items.map((item, i) => (
+                  <NavLink key={i} item={item} />
+                ))}
+              </nav>
+            </div>
+            {mobileFooter ? <div className="px-xl pb-xl">{mobileFooter}</div> : null}
+          </div>
+        </div>
+      ) : null}
+    </header>
+  );
+}

package/src/components/HeaderNavigation/index.ts

@@ -0,0 +1,6 @@
+export { HeaderNavigation } from "./HeaderNavigation";
+export type {
+  HeaderNavigationProps,
+  HeaderNavigationType,
+  HeaderNavItem,
+} from "./HeaderNavigation";

package/src/components/HelpIcon/HelpIcon.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+import { Tooltip, type TooltipArrow } from "../Tooltip";
+
+export interface HelpIconProps {
+  /** Tooltip heading text. */
+  text?: ReactNode;
+  /** Optional second tooltip line. */
+  supportingText?: ReactNode;
+  /** Tooltip arrow position (default bottomCenter — tooltip sits above). */
+  arrow?: TooltipArrow;
+  /** Icon box size in px (default 16). */
+  size?: number;
+  className?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * Help "?" icon that reveals a `Tooltip` on hover/focus. A composition (icon
+ * button + `Tooltip`), not a new primitive — the tooltip shows via CSS on
+ * `group-hover`/`focus-within`, positioned above the icon.
+ */
+export function HelpIcon({
+  text = "This is a tooltip",
+  supportingText,
+  arrow = "bottomCenter",
+  size = 16,
+  className,
+  "aria-label": ariaLabel = "Help",
+}: HelpIconProps) {
+  return (
+    <span className={clsx("group relative inline-flex", className)}>
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        className="inline-flex items-center justify-center rounded-full text-fg-quaternary outline-none hover:text-fg-secondary focus-visible:ring-2 focus-visible:ring-utility-brand-500"
+        style={{ width: size, height: size }}
+      >
+        <svg viewBox="0 0 16 16" fill="none" className="size-full" aria-hidden>
+          <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.2" />
+          <path d="M6.4 6.2a1.6 1.6 0 1 1 2.2 1.5c-.4.2-.6.5-.6.9M8 11h.01" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+        </svg>
+      </button>
+      <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+        <Tooltip text={text} supportingText={supportingText} arrow={arrow} />
+      </span>
+    </span>
+  );
+}

package/src/components/HelpIcon/index.ts

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

package/src/components/InputField/InputField.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import {
+  FieldWrapper,
+  boxClasses,
+  inputSizeClasses,
+  type InputFieldSize,
+} from "./inputFieldShared";
+
+export type InputFieldType = "default" | "password" | "date-time" | "payment";
+
+export interface InputFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /** Field variant — drives the native input type and default affordances. */
+  type?: InputFieldType;
+  size?: InputFieldSize;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  destructive?: boolean;
+  /** Leading icon (overrides the per-type default, e.g. payment card). */
+  leadingIcon?: ReactNode;
+  /** Trailing icon (overrides the per-type default). */
+  trailingIcon?: ReactNode;
+}
+
+function CalendarIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5 text-fg-quaternary" aria-hidden>
+      <path d="M17.5 8.333H2.5M13.333 1.667V5M6.667 1.667V5M6.5 18.333h7c1.4 0 2.1 0 2.635-.272a2.5 2.5 0 0 0 1.093-1.093C17.5 16.433 17.5 15.733 17.5 14.333v-7c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.093C15.6 3.333 14.9 3.333 13.5 3.333h-7c-1.4 0-2.1 0-2.635.272A2.5 2.5 0 0 0 2.772 4.698C2.5 5.233 2.5 5.933 2.5 7.333v7c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.093c.535.272 1.235.272 2.635.272Z" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CardIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5 text-fg-quaternary" aria-hidden>
+      <path d="M18.333 8.333H1.667M1.667 7.167l0-.834c0-1.4 0-2.1.272-2.635a2.5 2.5 0 0 1 1.093-1.093C3.567 2.333 4.267 2.333 5.667 2.333h8.666c1.4 0 2.1 0 2.635.272a2.5 2.5 0 0 1 1.093 1.093c.272.535.272 1.235.272 2.635v7.334c0 1.4 0 2.1-.272 2.635a2.5 2.5 0 0 1-1.093 1.092c-.535.273-1.235.273-2.635.273H5.667c-1.4 0-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092C1.667 15.767 1.667 15.067 1.667 13.667v-.834" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function EyeToggle({ shown, onClick }: { shown: boolean; onClick: () => void }) {
+  return (
+    <button type="button" onClick={onClick} aria-label={shown ? "Hide" : "Show"} className="shrink-0 text-fg-quaternary hover:text-fg-quaternary-hover">
+      <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+        <path d="M1.667 10S4.667 4.167 10 4.167 18.333 10 18.333 10 15.333 15.833 10 15.833 1.667 10 1.667 10Z" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" strokeLinejoin="round" />
+        <circle cx="10" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.667" />
+        {shown ? <path d="M3 3l14 14" stroke="currentColor" strokeWidth="1.667" strokeLinecap="round" /> : null}
+      </svg>
+    </button>
+  );
+}
+
+const nativeType: Record<InputFieldType, string> = {
+  default: "text",
+  password: "password",
+  "date-time": "datetime-local",
+  payment: "text",
+};
+
+/**
+ * Standard text input. `type` covers Default / Password / Date-time / Payment —
+ * same structural markup, differing only in the native input type and default
+ * leading/trailing affordance (password eye toggle, date-time calendar, payment
+ * card). Leading/trailing icons can be overridden via slots.
+ */
+export function InputField({
+  type = "default",
+  size = "md",
+  label,
+  hint,
+  required,
+  destructive,
+  leadingIcon,
+  trailingIcon,
+  className,
+  ...rest
+}: InputFieldProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const leading =
+    leadingIcon ?? (type === "payment" ? <CardIcon /> : null);
+
+  let trailing = trailingIcon ?? null;
+  if (!trailingIcon) {
+    if (type === "password")
+      trailing = <EyeToggle shown={showPassword} onClick={() => setShowPassword((s) => !s)} />;
+    else if (type === "date-time") trailing = <CalendarIcon />;
+  }
+
+  const resolvedType = type === "password" && showPassword ? "text" : nativeType[type];
+
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={destructive} className={className}>
+      <div className={clsx(boxClasses(destructive), inputSizeClasses[size])}>
+        {leading ? <span className="flex shrink-0 items-center">{leading}</span> : null}
+        <input
+          type={resolvedType}
+          className="min-w-0 flex-1 bg-transparent text-text-primary outline-none placeholder:text-text-placeholder"
+          {...rest}
+        />
+        {trailing ? <span className="flex shrink-0 items-center">{trailing}</span> : null}
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/components/InputField/index.ts

@@ -0,0 +1,3 @@
+export { InputField } from "./InputField";
+export type { InputFieldProps, InputFieldType } from "./InputField";
+export type { InputFieldSize } from "./inputFieldShared";

package/src/components/InputField/inputFieldShared.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+// Shared internals for the Input field family (InputField / LeadingInputField /
+// TrailingInputField / TagsInputField). PRIVATE — not exported from the barrel;
+// only the size type is re-exported by the public components.
+
+export type InputFieldSize = "sm" | "md" | "lg";
+
+/** Inner padding + text size per field size. */
+export const inputSizeClasses: Record<InputFieldSize, string> = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-[14px] py-2.5 text-md",
+};
+
+/** Border/focus classes for the bordered input box. */
+export function boxClasses(destructive?: boolean) {
+  return clsx(
+    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
+    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+    destructive
+      ? "border-border-error focus-within:ring-border-error"
+      : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand",
+  );
+}
+
+export interface FieldWrapperProps {
+  label?: ReactNode;
+  required?: boolean;
+  hint?: ReactNode;
+  destructive?: boolean;
+  /** The control (bordered box) goes here. */
+  children: ReactNode;
+  className?: string;
+}
+
+/** Label + control + hint scaffold shared by every Input field variant. */
+export function FieldWrapper({
+  label,
+  required,
+  hint,
+  destructive,
+  children,
+  className,
+}: FieldWrapperProps) {
+  return (
+    <div className={clsx("flex w-full flex-col gap-sm font-body", className)}>
+      {label ? (
+        <span className="flex gap-xxs text-sm font-medium text-text-secondary">
+          {label}
+          {required ? <span className="text-text-brand-tertiary">*</span> : null}
+        </span>
+      ) : null}
+      {children}
+      {hint ? (
+        <span
+          className={clsx(
+            "text-sm font-normal",
+            destructive ? "text-text-error-primary" : "text-text-tertiary",
+          )}
+        >
+          {hint}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/LeadingInputField/LeadingInputField.tsx

@@ -0,0 +1,60 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+import { FieldWrapper, type InputFieldSize } from "../InputField/inputFieldShared";
+
+export interface LeadingInputFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+  /**
+   * Left add-on — a text prefix (e.g. "https://") or a leading dropdown.
+   * Covers the Leading text / Leading dropdown types.
+   */
+  prefix?: ReactNode;
+  size?: InputFieldSize;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  destructive?: boolean;
+}
+
+const pad: Record<InputFieldSize, string> = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-[14px] py-2.5 text-md",
+};
+
+/** Input with a left add-on (text prefix or dropdown). */
+export function LeadingInputField({
+  prefix,
+  size = "md",
+  label,
+  hint,
+  required,
+  destructive,
+  className,
+  ...rest
+}: LeadingInputFieldProps) {
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={destructive} className={className}>
+      <div
+        className={clsx(
+          "flex w-full items-stretch overflow-hidden rounded-md border bg-bg-primary shadow-xs",
+          "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+          destructive
+            ? "border-border-error focus-within:ring-border-error"
+            : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand",
+        )}
+      >
+        <span className="flex shrink-0 items-center border-r border-border-primary px-lg text-md text-text-tertiary">
+          {prefix}
+        </span>
+        <input
+          className={clsx(
+            "min-w-0 flex-1 bg-transparent text-text-primary outline-none placeholder:text-text-placeholder",
+            pad[size],
+          )}
+          {...rest}
+        />
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/components/LeadingInputField/index.ts

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

package/src/components/LineAndBarChart/LineAndBarChart.tsx

@@ -0,0 +1,96 @@
+import { type ReactNode } from "react";
+import {
+  ResponsiveContainer,
+  LineChart,
+  BarChart,
+  Line,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+import { ChartTooltip } from "../ChartTooltip";
+import { ChartLegend } from "../ChartLegend";
+import { chartColor, CHART_GRID, tickStyle } from "../../internal/chartTheme";
+
+export type ChartStyle = "line" | "bar";
+export type ChartLegendPosition = "none" | "top" | "right";
+
+export interface ChartSeries {
+  /** Key into each data row. */
+  dataKey: string;
+  /** Display name (legend/tooltip). Defaults to `dataKey`. */
+  name?: string;
+  /** Override color; defaults to the palette by index. */
+  color?: string;
+}
+
+export interface LineAndBarChartProps {
+  data: Record<string, number | string>[];
+  series: ChartSeries[];
+  /** Key for the x-axis category. */
+  xKey: string;
+  type?: ChartStyle;
+  legend?: ChartLegendPosition;
+  axisLabels?: boolean;
+  height?: number;
+  className?: string;
+  /** Tooltip value formatter. */
+  formatValue?: (value: number | string | undefined) => ReactNode;
+}
+
+/**
+ * Line or bar chart — a themed Recharts wrapper (not a from-scratch renderer).
+ * `series` map to `<Line>`/`<Bar>` colored from the shared palette; `legend`
+ * positions a `ChartLegend` top/right; `axisLabels` toggles the X/Y ticks.
+ * Recharts is an optional peer dependency.
+ */
+export function LineAndBarChart({
+  data,
+  series,
+  xKey,
+  type = "line",
+  legend = "top",
+  axisLabels = true,
+  height = 240,
+  className,
+  formatValue,
+}: LineAndBarChartProps) {
+  const colored = series.map((s, i) => ({ ...s, color: s.color ?? chartColor(i) }));
+  const Chart = type === "bar" ? BarChart : LineChart;
+
+  const legendEl =
+    legend !== "none" ? (
+      <ChartLegend
+        orientation={legend === "right" ? "vertical" : "horizontal"}
+        items={colored.map((s) => ({ label: s.name ?? s.dataKey, color: s.color! }))}
+      />
+    ) : null;
+
+  return (
+    <div className={className}>
+      {legend === "top" && <div className="mb-lg">{legendEl}</div>}
+      <div className={legend === "right" ? "flex items-center gap-2xl" : undefined}>
+        <div className="min-w-0 flex-1">
+          <ResponsiveContainer width="100%" height={height}>
+            <Chart data={data} margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
+              <CartesianGrid stroke={CHART_GRID} vertical={false} />
+              {axisLabels && <XAxis dataKey={xKey} tick={tickStyle} tickLine={false} axisLine={{ stroke: CHART_GRID }} />}
+              {axisLabels && <YAxis tick={tickStyle} tickLine={false} axisLine={false} width={36} />}
+              <Tooltip cursor={{ fill: CHART_GRID }} content={<ChartTooltip formatValue={formatValue} />} />
+              {colored.map((s) =>
+                type === "bar" ? (
+                  <Bar key={s.dataKey} dataKey={s.dataKey} name={s.name ?? s.dataKey} fill={s.color} radius={[4, 4, 0, 0]} />
+                ) : (
+                  <Line key={s.dataKey} dataKey={s.dataKey} name={s.name ?? s.dataKey} stroke={s.color} strokeWidth={2} dot={false} />
+                ),
+              )}
+            </Chart>
+          </ResponsiveContainer>
+        </div>
+        {legend === "right" && legendEl}
+      </div>
+    </div>
+  );
+}

package/src/components/LineAndBarChart/index.ts

@@ -0,0 +1,2 @@
+export { LineAndBarChart } from "./LineAndBarChart";
+export type { LineAndBarChartProps, ChartSeries, ChartStyle, ChartLegendPosition } from "./LineAndBarChart";

package/src/components/LinkMessage/LinkMessage.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import { MessageShell, bubbleClasses } from "../Message/messageShared";
+
+export type LinkMessageType = "minimal" | "preview";
+
+export interface LinkMessageProps {
+  /** `minimal` = link only; `preview` = open-graph image + link. */
+  type?: LinkMessageType;
+  /** The URL (rendered as an underlined link). */
+  url?: string;
+  /** Open-graph image source (preview). */
+  image?: string;
+  /** Optional body text shown above the link. */
+  children?: ReactNode;
+  author?: ReactNode;
+  time?: ReactNode;
+  avatar?: ReactNode;
+  sent?: boolean;
+  reactions?: ReactNode;
+  className?: string;
+}
+
+/** A chat message that unfurls a URL — minimal (link only) or preview (with OG image). */
+export function LinkMessage({
+  type = "preview",
+  url = "",
+  image,
+  children,
+  author,
+  time,
+  avatar,
+  sent = false,
+  reactions,
+  className,
+}: LinkMessageProps) {
+  return (
+    <MessageShell author={author} time={time} avatar={avatar} sent={sent} reactions={reactions} className={className}>
+      <div className={clsx(bubbleClasses(sent, "secondary"), "flex flex-col gap-sm p-lg")}>
+        {children ? <span className="text-md font-normal">{children}</span> : null}
+        {type === "preview" && image ? (
+          <span className="block aspect-[1200/630] w-full overflow-hidden rounded-md border-[0.5px] border-black/10">
+            <img src={image} alt="" className="size-full object-cover" />
+          </span>
+        ) : null}
+        <a href={url} className="truncate text-md text-text-brand-secondary underline">
+          {url}
+        </a>
+      </div>
+    </MessageShell>
+  );
+}

package/src/components/LinkMessage/index.ts

@@ -0,0 +1,2 @@
+export { LinkMessage } from "./LinkMessage";
+export type { LinkMessageProps, LinkMessageType } from "./LinkMessage";