@borisj74/bv-ds 0.1.0

package/src/components/SocialButton/SocialButton.tsx

@@ -0,0 +1,88 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type SocialBrand = "google" | "facebook" | "apple" | "twitter" | "figma" | "dribbble";
+export type SocialButtonTheme = "color" | "gray" | "brand";
+export type SocialButtonSize = "md" | "lg";
+
+export interface SocialButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  social: SocialBrand;
+  /** `color`/`brand` = full-color logo; `gray` = monochrome. */
+  theme?: SocialButtonTheme;
+  size?: SocialButtonSize;
+  /** Icon-only (no label) — renders a square button. */
+  iconOnly?: boolean;
+  /** Label override; defaults to "Sign in with <Brand>". */
+  children?: ReactNode;
+}
+
+const LABEL: Record<SocialBrand, string> = {
+  google: "Sign in with Google",
+  facebook: "Sign in with Facebook",
+  apple: "Sign in with Apple",
+  twitter: "Sign in with X",
+  figma: "Sign in with Figma",
+  dribbble: "Sign in with Dribbble",
+};
+
+/** Full-color brand glyphs (viewBox 0 0 24 24). Gray theme desaturates via CSS. */
+const GLYPH: Record<SocialBrand, ReactNode> = {
+  google: (
+    <>
+      <path d="M23.04 12.26c0-.82-.07-1.6-.21-2.36H12v4.48h6.19a5.3 5.3 0 0 1-2.3 3.48v2.9h3.72c2.18-2 3.43-4.96 3.43-8.5Z" fill="#4285F4" />
+      <path d="M12 24c3.1 0 5.7-1.03 7.6-2.79l-3.72-2.88c-1.03.69-2.35 1.1-3.88 1.1-2.98 0-5.5-2.01-6.4-4.72H1.75v2.96A12 12 0 0 0 12 24Z" fill="#34A853" />
+      <path d="M5.6 14.71A7.2 7.2 0 0 1 5.22 12c0-.94.16-1.86.38-2.71V6.33H1.75A12 12 0 0 0 .48 12c0 1.94.46 3.77 1.27 5.67l3.85-2.96Z" fill="#FBBC05" />
+      <path d="M12 4.77c1.68 0 3.19.58 4.38 1.71l3.28-3.28C17.7 1.19 15.1 0 12 0A12 12 0 0 0 1.75 6.33l3.85 2.96C6.5 6.58 9.02 4.77 12 4.77Z" fill="#EA4335" />
+    </>
+  ),
+  facebook: <path d="M24 12a12 12 0 1 0-13.87 11.85v-8.38H7.08V12h3.05V9.36c0-3.01 1.79-4.67 4.53-4.67 1.31 0 2.69.23 2.69.23v2.95h-1.52c-1.49 0-1.96.93-1.96 1.87V12h3.33l-.53 3.47h-2.8v8.38A12 12 0 0 0 24 12Z" fill="#1877F2" />,
+  apple: <path d="M18.4 12.74c-.02-2.07 1.69-3.06 1.77-3.11-.96-1.41-2.46-1.6-2.99-1.62-1.27-.13-2.49.75-3.13.75-.65 0-1.65-.73-2.71-.71-1.39.02-2.68.81-3.39 2.05-1.45 2.51-.37 6.22 1.03 8.26.69.99 1.5 2.11 2.57 2.07 1.03-.04 1.42-.67 2.67-.67 1.24 0 1.6.67 2.69.65 1.11-.02 1.81-1.01 2.49-2.01.78-1.15 1.1-2.27 1.12-2.32-.02-.01-2.15-.83-2.17-3.27ZM16.34 6.58c.57-.69.95-1.65.85-2.6-.82.03-1.81.54-2.4 1.23-.52.61-.98 1.59-.86 2.52.91.07 1.84-.46 2.41-1.15Z" fill="#000" />,
+  twitter: <path d="M18.24 2.25h3.31l-7.23 8.26L22.83 21.75h-6.66l-5.22-6.82-5.97 6.82H1.66l7.73-8.83L1.17 2.25h6.83l4.71 6.23 5.53-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.04l12.04 15.64Z" fill="#000" />,
+  figma: (
+    <>
+      <path d="M8 24c2.21 0 4-1.79 4-4v-4H8a4 4 0 1 0 0 8Z" fill="#0ACF83" />
+      <path d="M4 12a4 4 0 0 1 4-4h4v8H8a4 4 0 0 1-4-4Z" fill="#A259FF" />
+      <path d="M4 4a4 4 0 0 1 4-4h4v8H8a4 4 0 0 1-4-4Z" fill="#F24E1E" />
+      <path d="M12 0h4a4 4 0 0 1 0 8h-4V0Z" fill="#FF7262" />
+      <path d="M20 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" fill="#1ABCFE" />
+    </>
+  ),
+  dribbble: <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm7.93 5.53a10.16 10.16 0 0 1 2.3 6.36c-.34-.07-3.71-.75-7.1-.33-.08-.18-.15-.36-.23-.55-.21-.5-.45-1-.7-1.49 3.76-1.53 5.47-3.74 5.73-3.99ZM12 1.79c2.55 0 4.88.96 6.65 2.53-.22.31-1.76 2.38-5.39 3.74A52.4 52.4 0 0 0 9.4 2.2 10.2 10.2 0 0 1 12 1.79Zm-4.57 1.1a61.7 61.7 0 0 1 3.83 5.79c-4.83 1.29-9.1 1.26-9.56 1.26a10.24 10.24 0 0 1 5.73-7.05ZM1.78 12.01v-.31c.44.01 5.46.07 10.62-1.48.3.58.58 1.17.84 1.76l-.41.12c-5.33 1.72-8.16 6.42-8.4 6.81a10.18 10.18 0 0 1-2.65-6.9Zm10.22 10.2c-2.3 0-4.42-.78-6.11-2.08.18-.39 2.32-4.5 8.15-6.53l.07-.02c1.45 3.77 2.05 6.93 2.2 7.84a10.13 10.13 0 0 1-4.31.79Zm6.06-1.74c-.1-.63-.65-3.65-2-7.36 3.2-.51 5.99.33 6.34.44a10.2 10.2 0 0 1-4.34 6.92Z" fill="#EA4C89" />,
+};
+
+/**
+ * Social-login button. All themes share the neutral white shell (border-primary,
+ * shadow-xs, `text-secondary` label) — `theme` only controls the brand glyph:
+ * `color`/`brand` = full color, `gray` = monochrome (CSS grayscale, flagged
+ * approximation of UntitledUI's true single-color gray logos). `iconOnly` drops
+ * the label for a square button.
+ */
+export function SocialButton({
+  social,
+  theme = "color",
+  size = "md",
+  iconOnly = false,
+  children,
+  className,
+  ...rest
+}: SocialButtonProps) {
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "inline-flex items-center justify-center rounded-md border border-border-primary bg-bg-primary font-semibold text-text-secondary shadow-xs transition-colors hover:bg-bg-primary-hover",
+        size === "lg" ? "gap-sm text-md" : "gap-xs text-sm",
+        iconOnly
+          ? size === "lg" ? "size-11" : "size-10"
+          : size === "lg" ? "px-xl py-2.5" : "px-xl py-md",
+        className,
+      )}
+      {...rest}
+    >
+      <svg viewBox="0 0 24 24" className={clsx("shrink-0", size === "lg" ? "size-5" : "size-5", theme === "gray" && "grayscale")} aria-hidden>
+        {GLYPH[social]}
+      </svg>
+      {!iconOnly && <span className="whitespace-nowrap">{children ?? LABEL[social]}</span>}
+    </button>
+  );
+}

package/src/components/SocialButton/index.ts

@@ -0,0 +1,2 @@
+export { SocialButton } from "./SocialButton";
+export type { SocialButtonProps, SocialBrand, SocialButtonTheme, SocialButtonSize } from "./SocialButton";

package/src/components/StatusIcon/StatusIcon.tsx

@@ -0,0 +1,75 @@
+import { type HTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type StatusIconType = "online" | "offline" | "count" | "avatar" | "verified";
+
+export interface StatusIconProps extends HTMLAttributes<HTMLSpanElement> {
+  type?: StatusIconType;
+  /** Number shown for `type="count"`. */
+  count?: number;
+  /** Image src for `type="avatar"`. */
+  imageUrl?: string;
+  /** Outer box size in px (default 16). */
+  size?: number;
+}
+
+/**
+ * Small overlay status badge — meant to sit on the corner of an avatar/icon.
+ * `online`/`offline` = colored dot; `count` = error-colored numeric bubble;
+ * `avatar` = ringed mini image; `verified` = brand verified tick (approximated
+ * as a brand disc + check, no burst star).
+ */
+export function StatusIcon({
+  type = "offline",
+  count,
+  imageUrl,
+  size = 16,
+  className,
+  style,
+  ...rest
+}: StatusIconProps) {
+  const box = { width: size, height: size, ...style };
+
+  if (type === "avatar") {
+    return (
+      <span className={clsx("inline-block overflow-hidden rounded-full border-[1.5px] border-bg-primary", className)} style={box} {...rest}>
+        {imageUrl && <img src={imageUrl} alt="" className="size-full object-cover" />}
+      </span>
+    );
+  }
+
+  if (type === "count") {
+    return (
+      <span
+        className={clsx("inline-flex items-center justify-center rounded-full border-[1.5px] border-bg-primary bg-fg-error-secondary text-[10px] font-bold leading-none text-text-white", className)}
+        style={box}
+        {...rest}
+      >
+        {count}
+      </span>
+    );
+  }
+
+  if (type === "verified") {
+    return (
+      <span className={clsx("inline-flex items-center justify-center rounded-full bg-bg-brand-solid text-fg-white", className)} style={box} {...rest}>
+        <svg viewBox="0 0 16 16" fill="none" className="size-2.5" aria-hidden>
+          <path d="M13 4.5 6.5 11 3 7.5" stroke="currentColor" strokeWidth="1.67" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </span>
+    );
+  }
+
+  // online / offline dot
+  return (
+    <span
+      className={clsx(
+        "inline-block rounded-full border-[1.5px] border-bg-primary",
+        type === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+        className,
+      )}
+      style={box}
+      {...rest}
+    />
+  );
+}

package/src/components/StatusIcon/index.ts

@@ -0,0 +1,2 @@
+export { StatusIcon } from "./StatusIcon";
+export type { StatusIconProps, StatusIconType } from "./StatusIcon";

package/src/components/StepBase/StepBase.tsx

@@ -0,0 +1,90 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+import {
+  StepIconBase,
+  type StepIconType,
+  type StepStatus,
+  type StepIconSize,
+} from "../StepIconBase";
+
+export type StepOrientation = "left" | "top";
+
+export interface StepBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  status?: StepStatus;
+  size?: StepIconSize;
+  /** Icon column position: `left` (vertical list) or `top` (horizontal list). */
+  orientation?: StepOrientation;
+  /** Indicator style. Ignored when `icon` (featured) is supplied. */
+  iconType?: StepIconType;
+  /** Step number (number indicator). */
+  step?: ReactNode;
+  /** Featured-icon slot — replaces the StepIconBase indicator. */
+  icon?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Render a connecting line toward the next step. */
+  connector?: boolean;
+}
+
+/**
+ * One step row/column for `ProgressSteps`. Composes `StepIconBase` (or a featured
+ * `icon` slot) + title/description, with an optional `connector` line (vertical
+ * below for `left`, horizontal to the right for `top`). The 5 assembled Figma
+ * layout frames are reference-only — build step lists by laying these out.
+ *
+ * NOTE: the connector renders on one side only (toward the next step); the last
+ * step should set `connector={false}`.
+ */
+export function StepBase({
+  status = "incomplete",
+  size = "sm",
+  orientation = "left",
+  iconType = "check",
+  step,
+  icon,
+  title,
+  description,
+  connector = false,
+  className,
+  ...rest
+}: StepBaseProps) {
+  const indicator = icon ?? (
+    <StepIconBase type={iconType} status={status} size={size} step={step} />
+  );
+  const lineColor = status === "complete" ? "bg-bg-brand-solid" : "bg-border-primary";
+
+  const titleEl = title && (
+    <p className={clsx("text-sm font-semibold", status === "current" ? "text-text-brand-secondary" : "text-text-secondary")}>
+      {title}
+    </p>
+  );
+  const descEl = description && <p className="text-sm text-text-tertiary">{description}</p>;
+
+  if (orientation === "top") {
+    return (
+      <div className={clsx("flex flex-col gap-md", className)} {...rest}>
+        <div className="flex w-full items-center gap-xs">
+          {indicator}
+          {connector && <span className={clsx("h-0.5 flex-1 rounded-full", lineColor)} />}
+        </div>
+        <div className="flex flex-col gap-xxs">
+          {titleEl}
+          {descEl}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("flex gap-md", className)} {...rest}>
+      <div className="flex flex-col items-center self-stretch">
+        {indicator}
+        {connector && <span className={clsx("mt-xs w-0.5 flex-1 rounded-full", lineColor)} />}
+      </div>
+      <div className="flex flex-col gap-xxs pb-xl">
+        {titleEl}
+        {descEl}
+      </div>
+    </div>
+  );
+}

package/src/components/StepBase/index.ts

@@ -0,0 +1,2 @@
+export { StepBase } from "./StepBase";
+export type { StepBaseProps, StepOrientation } from "./StepBase";

package/src/components/StepIconBase/StepIconBase.tsx

@@ -0,0 +1,65 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type StepIconType = "check" | "number";
+export type StepStatus = "incomplete" | "current" | "complete";
+export type StepIconSize = "sm" | "md";
+
+export interface StepIconBaseProps extends HTMLAttributes<HTMLDivElement> {
+  type?: StepIconType;
+  status?: StepStatus;
+  size?: StepIconSize;
+  /** Number to show when `type="number"`. */
+  step?: ReactNode;
+}
+
+const Check = ({ className }: { className?: string }) => (
+  <svg viewBox="0 0 16 16" fill="none" className={className} aria-hidden>
+    <path d="M13.33 4 6 11.33 2.67 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+/**
+ * Step indicator dot for `ProgressSteps`. `type` check (dot / brand fill / check)
+ * or number; `status` incomplete / current (brand ring) / complete (filled +
+ * check). Composed by `StepBase`.
+ */
+export function StepIconBase({
+  type = "check",
+  status = "incomplete",
+  size = "sm",
+  step,
+  className,
+  ...rest
+}: StepIconBaseProps) {
+  const dim = size === "md" ? "size-8" : "size-6";
+  const isComplete = status === "complete";
+  const isCurrent = status === "current";
+  const completeFill = type === "number" ? "bg-bg-success-solid" : "bg-bg-brand-solid";
+
+  return (
+    <div
+      className={clsx(
+        "relative flex shrink-0 items-center justify-center overflow-visible rounded-full",
+        dim,
+        isComplete && completeFill,
+        isCurrent && type === "check" && "bg-bg-brand-solid ring-2 ring-utility-brand-500 ring-offset-2",
+        isCurrent && type === "number" && "border border-border-secondary bg-bg-primary",
+        status === "incomplete" && type === "check" && "border-2 border-border-primary bg-bg-primary",
+        status === "incomplete" && type === "number" && "border border-border-secondary bg-bg-primary",
+        className,
+      )}
+      {...rest}
+    >
+      {type === "check" && !isComplete && (
+        <span className={clsx("rounded-full", size === "md" ? "size-2.5" : "size-2", isCurrent ? "bg-fg-white" : "bg-fg-quaternary")} />
+      )}
+      {type === "number" && !isComplete && (
+        <span className={clsx("font-semibold", size === "md" ? "text-sm" : "text-xs", isCurrent ? "text-text-secondary" : "text-text-quaternary")}>
+          {step}
+        </span>
+      )}
+      {isComplete && <Check className={clsx("text-fg-white", size === "md" ? "size-4" : "size-3")} />}
+    </div>
+  );
+}

package/src/components/StepIconBase/index.ts

@@ -0,0 +1,7 @@
+export { StepIconBase } from "./StepIconBase";
+export type {
+  StepIconBaseProps,
+  StepIconType,
+  StepStatus,
+  StepIconSize,
+} from "./StepIconBase";

package/src/components/TabButtonBase/TabButtonBase.tsx

@@ -0,0 +1,88 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type TabButtonType =
+  | "buttonBrand"
+  | "buttonGray"
+  | "buttonWhite"
+  | "buttonMinimal"
+  | "underline"
+  | "line";
+export type TabButtonSize = "sm" | "md";
+
+export interface TabButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  /** Visual style. Maps to the Figma `Type` axis. */
+  variant?: TabButtonType;
+  current?: boolean;
+  size?: TabButtonSize;
+  /** Leading icon slot. */
+  icon?: ReactNode;
+  /** Trailing badge/count slot. */
+  badge?: ReactNode;
+  children?: ReactNode;
+}
+
+/**
+ * Single tab control consumed by `Tabs`. Six `variant`s: pill styles
+ * (`buttonBrand`/`buttonGray`/`buttonWhite`/`buttonMinimal`), `underline`
+ * (horizontal bottom border) and `line` (vertical left border). `current` is the
+ * active state. The native `type` attribute is Omitted (taken over by `variant`).
+ */
+export function TabButtonBase({
+  variant = "buttonBrand",
+  current = false,
+  size = "sm",
+  icon,
+  badge,
+  children,
+  className,
+  ...rest
+}: TabButtonBaseProps) {
+  const pill = variant !== "underline" && variant !== "line";
+
+  const styles: Record<TabButtonType, string> = {
+    buttonBrand: clsx(
+      "rounded-sm px-2.5 py-md",
+      current ? "bg-bg-brand-primary-alt text-text-secondary" : "text-text-quaternary hover:bg-bg-primary-hover hover:text-text-tertiary",
+    ),
+    buttonGray: clsx(
+      "rounded-sm px-2.5 py-md",
+      current ? "bg-bg-primary-hover text-utility-brand-700" : "text-text-quaternary hover:bg-bg-primary-hover hover:text-text-tertiary",
+    ),
+    buttonWhite: clsx(
+      "rounded-sm px-2.5 py-md",
+      current ? "border border-border-primary bg-bg-primary text-text-secondary shadow-xs" : "text-text-quaternary hover:text-text-tertiary",
+    ),
+    buttonMinimal: clsx(
+      "rounded-sm px-2.5 py-md",
+      current ? "text-text-secondary" : "text-text-quaternary hover:text-text-tertiary",
+    ),
+    underline: clsx(
+      "border-b-2 px-xxs pb-lg",
+      current ? "border-fg-brand-primary-alt text-utility-brand-700" : "border-transparent text-text-quaternary hover:text-text-tertiary",
+    ),
+    line: clsx(
+      "border-l-2 px-lg py-xxs",
+      current ? "border-fg-brand-primary text-utility-brand-700" : "border-transparent text-text-quaternary hover:text-text-tertiary",
+    ),
+  };
+
+  return (
+    <button
+      type="button"
+      aria-current={current ? "page" : undefined}
+      className={clsx(
+        "inline-flex items-center justify-center gap-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-utility-brand-500 focus-visible:ring-offset-2",
+        size === "md" ? "text-sm" : "text-xs",
+        pill && "h-9",
+        styles[variant],
+        className,
+      )}
+      {...rest}
+    >
+      {icon && <span className="flex size-4 shrink-0 items-center justify-center">{icon}</span>}
+      {children && <span className="whitespace-nowrap px-xxs">{children}</span>}
+      {badge}
+    </button>
+  );
+}

package/src/components/TabButtonBase/index.ts

@@ -0,0 +1,2 @@
+export { TabButtonBase } from "./TabButtonBase";
+export type { TabButtonBaseProps, TabButtonType, TabButtonSize } from "./TabButtonBase";

package/src/components/TableCell/TableCell.tsx

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type TableCellSize = "sm" | "md";
+
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+  size?: TableCellSize;
+  /** Leading checkbox slot (first column). */
+  checkbox?: ReactNode;
+  /** Hover/selected row background. */
+  selected?: boolean;
+  /** Cell content — any of the 14 Figma `Type` layouts (see stories). */
+  children?: ReactNode;
+}
+
+/**
+ * Generic `<td>` shell — border-bottom row cell. One component over the 14 Figma
+ * `Type`s (Text, Avatar, Badge, Trend, Progress bar, Action icons, Star ratings,
+ * …): the differing content goes in `children`; the shell (height, padding,
+ * border, hover bg) is constant. Same one-shell-many-examples pattern as
+ * `NavFeaturedCard`. `sm` = 64px row, `md` = 72px.
+ *
+ * NOTE: the Figma `Star ratings` cell references a raw `Colors/Yellow/400` var —
+ * do NOT use it; substitute the `warning-primary`/`utility-yellow` token if a
+ * star fill colour is needed.
+ */
+export function TableCell({ size = "md", checkbox, selected = false, children, className, ...rest }: TableCellProps) {
+  return (
+    <td
+      className={clsx(
+        "border-b border-border-secondary align-middle text-sm",
+        size === "md" ? "h-[72px] px-3xl py-xl" : "h-16 px-3xl py-lg",
+        selected ? "bg-bg-primary-hover" : "bg-bg-primary",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="flex items-center gap-lg">
+        {checkbox}
+        {children}
+      </div>
+    </td>
+  );
+}

package/src/components/TableCell/index.ts

@@ -0,0 +1,2 @@
+export { TableCell } from "./TableCell";
+export type { TableCellProps, TableCellSize } from "./TableCell";

package/src/components/TableHeaderCell/TableHeaderCell.tsx

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type TableHeaderCellSize = "sm" | "md";
+
+export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+  size?: TableHeaderCellSize;
+  /** Leading checkbox slot (first column). */
+  checkbox?: ReactNode;
+  /** Label content — typically a `TableHeaderLabel`. */
+  children?: ReactNode;
+}
+
+/**
+ * `<th>` wrapper — white cell with a bottom border; composes a leading `checkbox`
+ * slot + a `TableHeaderLabel` (`children`). `sm` = 40px row, `md` = 44px row.
+ */
+export function TableHeaderCell({ size = "sm", checkbox, children, className, ...rest }: TableHeaderCellProps) {
+  return (
+    <th
+      className={clsx(
+        "border-b border-border-secondary bg-bg-primary text-left align-middle",
+        size === "md" ? "h-11 px-3xl py-lg" : "h-10 px-2xl py-md",
+        className,
+      )}
+      {...rest}
+    >
+      <div className={clsx("flex items-center", checkbox ? "gap-lg" : "gap-xs")}>
+        {checkbox}
+        {children}
+      </div>
+    </th>
+  );
+}

package/src/components/TableHeaderCell/index.ts

@@ -0,0 +1,2 @@
+export { TableHeaderCell } from "./TableHeaderCell";
+export type { TableHeaderCellProps, TableHeaderCellSize } from "./TableHeaderCell";

package/src/components/TableHeaderLabel/TableHeaderLabel.tsx

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import clsx from "clsx";
+
+export type TableHeaderLabelArrow = "none" | "down" | "up" | "chevronSelector";
+
+export interface TableHeaderLabelProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  /** Sort indicator. */
+  arrow?: TableHeaderLabelArrow;
+  /** Trailing help-icon slot. */
+  helpIcon?: ReactNode;
+}
+
+function ArrowIcon({ arrow }: { arrow: Exclude<TableHeaderLabelArrow, "none"> }) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" className="size-3 shrink-0" aria-hidden>
+      {arrow === "down" && <path d="M6 2.5v7M6 9.5 9 6.5M6 9.5 3 6.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />}
+      {arrow === "up" && <path d="M6 9.5v-7M6 2.5 9 5.5M6 2.5 3 5.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />}
+      {arrow === "chevronSelector" && <path d="M3.5 7.5 6 10l2.5-2.5M3.5 4.5 6 2l2.5 2.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />}
+    </svg>
+  );
+}
+
+/**
+ * Column-header label — `text-xs` semibold in `text-quaternary` (→ `text-tertiary`
+ * on hover), with an optional sort `arrow` and trailing `helpIcon` slot. Consumed
+ * by `TableHeaderCell`.
+ */
+export function TableHeaderLabel({ children, arrow = "none", helpIcon, className, ...rest }: TableHeaderLabelProps) {
+  return (
+    <div className={clsx("group/th inline-flex items-center gap-xs text-xs font-semibold text-text-quaternary", className)} {...rest}>
+      <span className="whitespace-nowrap">{children}</span>
+      {helpIcon}
+      {arrow !== "none" && <ArrowIcon arrow={arrow} />}
+    </div>
+  );
+}

package/src/components/TableHeaderLabel/index.ts

@@ -0,0 +1,2 @@
+export { TableHeaderLabel } from "./TableHeaderLabel";
+export type { TableHeaderLabelProps, TableHeaderLabelArrow } from "./TableHeaderLabel";

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+import { TabButtonBase, type TabButtonType, type TabButtonSize } from "../TabButtonBase";
+
+export type TabsOrientation = "horizontal" | "vertical";
+
+export interface TabItem {
+  value: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  badge?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  orientation?: TabsOrientation;
+  /** Tab style — passed to `TabButtonBase`. Defaults: horizontal→buttonBrand, vertical→line. */
+  variant?: TabButtonType;
+  size?: TabButtonSize;
+  /** Stretch tabs to fill the row (horizontal only). */
+  fullWidth?: boolean;
+  className?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * Tab bar composing `TabButtonBase`. `orientation="horizontal"` lays tabs in a
+ * row (underline variant gets a shared bottom border); `vertical` stacks them
+ * (defaults to the `line` variant). Controlled via `value`/`onValueChange`.
+ */
+export function Tabs({
+  items,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  variant,
+  size = "sm",
+  fullWidth = false,
+  className,
+  "aria-label": ariaLabel,
+}: TabsProps) {
+  const vertical = orientation === "vertical";
+  const resolved: TabButtonType = variant ?? (vertical ? "line" : "buttonBrand");
+  const underlineRow = resolved === "underline" && !vertical;
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      aria-orientation={orientation}
+      className={clsx(
+        "flex",
+        vertical ? "flex-col items-start gap-xxs" : "items-center gap-xs",
+        underlineRow && "gap-0 border-b border-border-secondary",
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <TabButtonBase
+          key={item.value}
+          role="tab"
+          variant={resolved}
+          size={size}
+          current={item.value === value}
+          aria-selected={item.value === value}
+          disabled={item.disabled}
+          icon={item.icon}
+          badge={item.badge}
+          onClick={() => onValueChange?.(item.value)}
+          className={clsx(fullWidth && !vertical && "flex-1", vertical && "w-full justify-start")}
+        >
+          {item.label}
+        </TabButtonBase>
+      ))}
+    </div>
+  );
+}

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+export type { TabsProps, TabsOrientation, TabItem } from "./Tabs";