@borisj74/bv-ds 0.1.0

package/src/components/BadgeGroup/BadgeGroup.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import { PillBadge } from "../Badge";
+import { ModernBadge } from "../Badge";
+import type { BadgeColor } from "../Badge";
+
+export type BadgeGroupSize = "md" | "lg";
+export type BadgeGroupType = "pill" | "modern";
+export type BadgeGroupBadgePosition = "leading" | "trailing";
+
+export interface BadgeGroupProps {
+  /** Text inside the inner coloured badge (e.g. "New feature"). */
+  badgeLabel: string;
+  /** The main label alongside the badge. */
+  children: ReactNode;
+  color?: BadgeColor;
+  size?: BadgeGroupSize;
+  /** Inner badge style. */
+  type?: BadgeGroupType;
+  /** Whether the badge sits before or after the label. */
+  badgePosition?: BadgeGroupBadgePosition;
+  className?: string;
+}
+
+const sizeClasses: Record<BadgeGroupSize, string> = {
+  md: "py-xxs pl-xxs pr-lg text-sm gap-md",
+  lg: "py-xs pl-xs pr-xl text-sm gap-md",
+};
+
+export function BadgeGroup({
+  badgeLabel,
+  children,
+  color = "brand",
+  size = "md",
+  type = "pill",
+  badgePosition = "leading",
+  className,
+}: BadgeGroupProps) {
+  const InnerBadge = type === "modern" ? ModernBadge : PillBadge;
+  const badge = (
+    <InnerBadge color={color} size="sm">
+      {badgeLabel}
+    </InnerBadge>
+  );
+  const trailing = badgePosition === "trailing";
+
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center rounded-full border border-border-primary bg-bg-primary font-medium text-text-secondary shadow-xs font-body",
+        // mirror the asymmetric padding when the badge is trailing
+        trailing && "flex-row-reverse pl-lg pr-xxs",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      {badge}
+      <span>{children}</span>
+    </span>
+  );
+}

package/src/components/BadgeGroup/index.ts

@@ -0,0 +1,7 @@
+export { BadgeGroup } from "./BadgeGroup";
+export type {
+  BadgeGroupProps,
+  BadgeGroupSize,
+  BadgeGroupType,
+  BadgeGroupBadgePosition,
+} from "./BadgeGroup";

package/src/components/BreadcrumbButtonBase/BreadcrumbButtonBase.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode, MouseEventHandler } from "react";
+import clsx from "clsx";
+
+export type BreadcrumbButtonType = "text" | "button";
+
+export interface BreadcrumbButtonBaseProps {
+  /** Crumb label. Optional for an icon-only (home) crumb. */
+  children?: ReactNode;
+  /** Leading icon (e.g. a home glyph for the root crumb). */
+  icon?: ReactNode;
+  type?: BreadcrumbButtonType;
+  /** Marks the active/last crumb (brand colour, aria-current). */
+  current?: boolean;
+  /** Renders as an anchor when set, otherwise a button. */
+  href?: string;
+  onClick?: MouseEventHandler<HTMLElement>;
+  className?: string;
+}
+
+export function BreadcrumbButtonBase({
+  children,
+  icon,
+  type = "text",
+  current = false,
+  href,
+  onClick,
+  className,
+}: BreadcrumbButtonBaseProps) {
+  const classes = clsx(
+    "inline-flex items-center gap-md text-sm font-semibold font-body transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+    type === "button" && "rounded-sm px-md py-xs",
+    current
+      ? clsx(
+          "text-text-brand-secondary",
+          type === "button" && "bg-bg-brand-primary",
+        )
+      : clsx(
+          "text-text-quaternary hover:text-text-tertiary-hover",
+          type === "button" && "hover:bg-bg-primary-hover",
+        ),
+    className,
+  );
+
+  const content = (
+    <>
+      {icon ? <span className="shrink-0">{icon}</span> : null}
+      {children}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        onClick={onClick}
+        aria-current={current ? "page" : undefined}
+        className={classes}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-current={current ? "page" : undefined}
+      className={classes}
+    >
+      {content}
+    </button>
+  );
+}

package/src/components/BreadcrumbButtonBase/index.ts

@@ -0,0 +1,5 @@
+export { BreadcrumbButtonBase } from "./BreadcrumbButtonBase";
+export type {
+  BreadcrumbButtonBaseProps,
+  BreadcrumbButtonType,
+} from "./BreadcrumbButtonBase";

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,62 @@
+import { Children, isValidElement } from "react";
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export type BreadcrumbsDivider = "slash" | "chevron";
+
+export interface BreadcrumbsProps {
+  /** Separator between crumbs. */
+  divider?: BreadcrumbsDivider;
+  /** Crumb items — typically `BreadcrumbButtonBase` instances. */
+  children: ReactNode;
+  className?: string;
+}
+
+function Slash() {
+  return (
+    <span className="text-sm text-text-quaternary" aria-hidden>
+      /
+    </span>
+  );
+}
+
+function Chevron() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      className="size-4 text-fg-quaternary"
+      aria-hidden
+    >
+      <path
+        d="m6 12 4-4-4-4"
+        stroke="currentColor"
+        strokeWidth="1.333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function Breadcrumbs({
+  divider = "slash",
+  children,
+  className,
+}: BreadcrumbsProps) {
+  const items = Children.toArray(children).filter(isValidElement);
+  const Sep = divider === "chevron" ? Chevron : Slash;
+
+  return (
+    <nav aria-label="Breadcrumb" className={clsx("font-body", className)}>
+      <ol className="flex items-center gap-md">
+        {items.map((child, index) => (
+          <li key={child.key ?? index} className="flex items-center gap-md">
+            {index > 0 ? <Sep /> : null}
+            {child}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbsDivider } from "./Breadcrumbs";

package/src/components/Button/Button.tsx

@@ -0,0 +1,71 @@
+import type { ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type ButtonHierarchy =
+  | "Primary"
+  | "Secondary"
+  | "Tertiary"
+  | "Link color"
+  | "Link gray";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  hierarchy?: ButtonHierarchy;
+  size?: ButtonSize;
+  loading?: boolean;
+}
+
+// NOTE: this is a placeholder implementation to verify the build/Storybook
+// pipeline end-to-end. The figma-to-react skill should overwrite this with
+// the full per-hierarchy/per-size token mapping from design.md §3 (all 5
+// sizes, all 5 hierarchies, skeuomorphic shadow stack on Primary/Secondary).
+//
+// Padding values below use Tailwind arbitrary values ([14px], [10px], etc)
+// rather than the spacing-* scale on purpose — design.md §3 confirms the
+// real Figma component uses raw px at md/lg/xl, not the nearest token.
+// Don't "fix" these to spacing-md/spacing-lg; that would silently diverge
+// from the source design.
+
+const hierarchyClasses: Record<ButtonHierarchy, string> = {
+  Primary:
+    "bg-brand-solid text-white border-2 border-white/[0.12] hover:bg-bg-brand-solid-hover",
+  Secondary: "bg-bg-primary text-text-secondary border border-border-primary",
+  Tertiary: "bg-transparent text-text-tertiary border-0",
+  "Link color": "bg-transparent text-text-brand-secondary border-0 p-0",
+  "Link gray": "bg-transparent text-text-tertiary border-0 p-0",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  xs: "px-[10px] py-sm text-xs",
+  sm: "px-lg py-md text-xs",
+  md: "px-[14px] py-[10px] text-sm",
+  lg: "px-xl py-[10px] text-md",
+  xl: "px-[18px] py-lg text-md",
+};
+
+export function Button({
+  hierarchy = "Primary",
+  size = "md",
+  loading = false,
+  disabled,
+  className,
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      className={clsx(
+        "font-body font-semibold rounded-md cursor-pointer transition-colors",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        hierarchyClasses[hierarchy],
+        sizeClasses[size],
+        className,
+      )}
+      disabled={disabled || loading}
+      aria-disabled={disabled || loading}
+      {...rest}
+    >
+      {loading ? "Loading…" : children}
+    </button>
+  );
+}

package/src/components/Button/index.ts

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

package/src/components/ButtonCloseX/ButtonCloseX.tsx

@@ -0,0 +1,54 @@
+import type { ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type ButtonCloseXSize = "sm" | "md" | "lg";
+
+export interface ButtonCloseXProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+  size?: ButtonCloseXSize;
+  /** Use the light-on-dark treatment (Figma `Dark background=True`). */
+  onDark?: boolean;
+  /** Accessible label (defaults to "Close"). */
+  label?: string;
+}
+
+const sizeClass: Record<ButtonCloseXSize, string> = {
+  sm: "p-xs", // 4px
+  md: "p-sm", // 6px
+  lg: "p-md", // 8px
+};
+
+export function ButtonCloseX({
+  size = "md",
+  onDark = false,
+  label = "Close",
+  className,
+  ...rest
+}: ButtonCloseXProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      className={clsx(
+        "inline-flex items-center justify-center rounded-md transition-colors",
+        onDark
+          ? "text-fg-white hover:bg-white/10"
+          : "text-fg-quaternary hover:bg-bg-primary-hover hover:text-fg-quaternary-hover",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        sizeClass[size],
+        className,
+      )}
+      {...rest}
+    >
+      <svg viewBox="0 0 20 20" fill="none" className="size-5" aria-hidden>
+        <path
+          d="m15 5-10 10M5 5l10 10"
+          stroke="currentColor"
+          strokeWidth="1.667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}

package/src/components/ButtonCloseX/index.ts

@@ -0,0 +1,2 @@
+export { ButtonCloseX } from "./ButtonCloseX";
+export type { ButtonCloseXProps, ButtonCloseXSize } from "./ButtonCloseX";

package/src/components/ButtonDestructive/ButtonDestructive.tsx

@@ -0,0 +1,67 @@
+import type { ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type ButtonDestructiveHierarchy =
+  | "Primary"
+  | "Secondary"
+  | "Tertiary"
+  | "Link";
+export type ButtonDestructiveSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ButtonDestructiveProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  hierarchy?: ButtonDestructiveHierarchy;
+  size?: ButtonDestructiveSize;
+  loading?: boolean;
+}
+
+// Destructive palette (design.md §3 / Figma Button destructive 6218:85578).
+// Primary/Secondary carry the skeuomorphic shadow stack; focus ring is the
+// error ring (border-error).
+const hierarchyClasses: Record<ButtonDestructiveHierarchy, string> = {
+  Primary:
+    "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
+  Secondary:
+    "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+  Tertiary:
+    "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
+  Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary",
+};
+
+// Padding mirrors Button.tsx — raw px at md/lg/xl per design.md §3, not the
+// nearest spacing token. Don't "fix" these.
+const sizeClasses: Record<ButtonDestructiveSize, string> = {
+  xs: "px-[10px] py-sm text-xs",
+  sm: "px-lg py-md text-xs",
+  md: "px-[14px] py-[10px] text-sm",
+  lg: "px-xl py-[10px] text-md",
+  xl: "px-[18px] py-lg text-md",
+};
+
+export function ButtonDestructive({
+  hierarchy = "Primary",
+  size = "md",
+  loading = false,
+  disabled,
+  className,
+  children,
+  ...rest
+}: ButtonDestructiveProps) {
+  return (
+    <button
+      className={clsx(
+        "font-body font-semibold rounded-md cursor-pointer transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        hierarchyClasses[hierarchy],
+        hierarchy === "Link" ? "" : sizeClasses[size],
+        className,
+      )}
+      disabled={disabled || loading}
+      aria-disabled={disabled || loading}
+      {...rest}
+    >
+      {loading ? "Loading…" : children}
+    </button>
+  );
+}

package/src/components/ButtonDestructive/index.ts

@@ -0,0 +1,6 @@
+export { ButtonDestructive } from "./ButtonDestructive";
+export type {
+  ButtonDestructiveProps,
+  ButtonDestructiveHierarchy,
+  ButtonDestructiveSize,
+} from "./ButtonDestructive";

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface ButtonGroupProps {
+  /** Segments — typically `ButtonGroupSegment` instances. */
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Segmented-control wrapper. Supplies the shared outer border, rounded ends,
+ * and the dividers between segments — segments themselves render borderless.
+ */
+export function ButtonGroup({ children, className }: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      className={clsx(
+        "inline-flex overflow-hidden rounded-md border border-border-primary bg-bg-primary shadow-xs",
+        "[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
+        "[&>*+*]:border-l [&>*+*]:border-border-primary",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/ButtonGroup/index.ts

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

package/src/components/ButtonGroupSegment/ButtonGroupSegment.tsx

@@ -0,0 +1,54 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export type ButtonGroupSegmentSize = "sm" | "md";
+
+export interface ButtonGroupSegmentProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+  size?: ButtonGroupSegmentSize;
+  /** Active/pressed segment. */
+  current?: boolean;
+  /** Leading icon (or the only content for an icon-only segment). */
+  icon?: ReactNode;
+  /** Leading success dot. */
+  dot?: boolean;
+}
+
+const sizeClasses: Record<ButtonGroupSegmentSize, string> = {
+  sm: "px-lg py-md text-sm",
+  md: "px-[14px] py-[10px] text-sm",
+};
+
+export function ButtonGroupSegment({
+  size = "sm",
+  current = false,
+  icon,
+  dot = false,
+  children,
+  className,
+  ...rest
+}: ButtonGroupSegmentProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={current}
+      className={clsx(
+        "relative inline-flex items-center gap-md font-body font-semibold transition-colors",
+        "focus-visible:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-border-brand",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        current
+          ? "bg-bg-secondary text-text-secondary-hover"
+          : "bg-bg-primary text-text-secondary hover:bg-bg-primary-hover",
+        sizeClasses[size],
+        className,
+      )}
+      {...rest}
+    >
+      {dot ? (
+        <span className="size-2 shrink-0 rounded-full bg-fg-success-secondary" aria-hidden />
+      ) : null}
+      {icon ? <span className="shrink-0">{icon}</span> : null}
+      {children}
+    </button>
+  );
+}

package/src/components/ButtonGroupSegment/index.ts

@@ -0,0 +1,5 @@
+export { ButtonGroupSegment } from "./ButtonGroupSegment";
+export type {
+  ButtonGroupSegmentProps,
+  ButtonGroupSegmentSize,
+} from "./ButtonGroupSegment";

package/src/components/ButtonUtility/ButtonUtility.tsx

@@ -0,0 +1,67 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import clsx from "clsx";
+
+export type ButtonUtilitySize = "xs" | "sm";
+export type ButtonUtilityVariant = "outline" | "ghost";
+
+export interface ButtonUtilityProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> {
+  /** Required icon glyph. */
+  icon: ReactNode;
+  /** Accessible label (also used as the tooltip when `tooltip` is true). */
+  label: string;
+  size?: ButtonUtilitySize;
+  variant?: ButtonUtilityVariant;
+  /** Show the hover/focus tooltip bubble. */
+  tooltip?: boolean;
+}
+
+const sizeClasses: Record<ButtonUtilitySize, string> = {
+  xs: "p-xs rounded-sm", // 4px / radius-sm
+  sm: "p-sm rounded-md", // 6px / radius-md
+};
+
+const variantClasses: Record<ButtonUtilityVariant, string> = {
+  outline:
+    "bg-bg-primary border border-border-primary text-fg-quaternary shadow-skeuomorphic hover:bg-bg-primary-hover hover:text-fg-quaternary-hover",
+  ghost:
+    "bg-transparent text-fg-quaternary hover:bg-bg-primary-hover hover:text-fg-quaternary-hover",
+};
+
+export function ButtonUtility({
+  icon,
+  label,
+  size = "sm",
+  variant = "outline",
+  tooltip = false,
+  className,
+  ...rest
+}: ButtonUtilityProps) {
+  return (
+    <span className="group relative inline-flex">
+      <button
+        type="button"
+        aria-label={label}
+        className={clsx(
+          "inline-flex items-center justify-center transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variantClasses[variant],
+          sizeClasses[size],
+          className,
+        )}
+        {...rest}
+      >
+        <span className="[&>svg]:size-5">{icon}</span>
+      </button>
+      {tooltip ? (
+        <span
+          role="tooltip"
+          className="pointer-events-none absolute bottom-full left-1/2 mb-xs -translate-x-1/2 whitespace-nowrap rounded-md bg-bg-primary-solid px-md py-xs text-xs font-semibold text-text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+        >
+          {label}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/components/ButtonUtility/index.ts

@@ -0,0 +1,6 @@
+export { ButtonUtility } from "./ButtonUtility";
+export type {
+  ButtonUtilityProps,
+  ButtonUtilitySize,
+  ButtonUtilityVariant,
+} from "./ButtonUtility";

package/src/components/CalendarCell/CalendarCell.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CalendarCellProps {
+  /** Day-of-month number. */
+  date: string | number;
+  /** Event chips for this day — typically `CalendarEvent` instances. */
+  children?: ReactNode;
+  /** "+N more" overflow count shown beneath the events. */
+  moreCount?: number;
+  /** Other-month / disabled styling. */
+  muted?: boolean;
+  /** Marks today (date number in brand). */
+  current?: boolean;
+  /** Renders a hover "+" add button bottom-right. */
+  onAdd?: () => void;
+  className?: string;
+}
+
+function PlusIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-4" aria-hidden>
+      <path
+        d="M10 4.167v11.666M4.167 10h11.666"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** A single day cell in the month grid. Composes CalendarEvent chips. */
+export function CalendarCell({
+  date,
+  children,
+  moreCount,
+  muted = false,
+  current = false,
+  onAdd,
+  className,
+}: CalendarCellProps) {
+  return (
+    <div
+      className={clsx(
+        "group relative flex min-h-[120px] flex-col gap-xs bg-bg-primary p-md font-body",
+        muted && "bg-bg-secondary",
+        className,
+      )}
+    >
+      <span
+        className={clsx(
+          "text-xs font-semibold",
+          current
+            ? "text-text-brand-secondary"
+            : muted
+              ? "text-text-quaternary"
+              : "text-text-secondary",
+        )}
+      >
+        {date}
+      </span>
+      {children ? <div className="flex flex-col gap-xs">{children}</div> : null}
+      {moreCount && moreCount > 0 ? (
+        <span className="text-xs font-medium text-text-tertiary">
+          {moreCount} more…
+        </span>
+      ) : null}
+      {onAdd ? (
+        <button
+          type="button"
+          onClick={onAdd}
+          aria-label="Add event"
+          className="absolute bottom-md right-md hidden rounded-md border border-border-primary bg-bg-primary p-xs text-fg-quaternary shadow-xs transition-colors hover:bg-bg-primary-hover group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand"
+        >
+          <PlusIcon />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/CalendarCell/index.ts

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