@borisj74/bv-ds 0.1.0

package/src/components/CalendarCellDayWeekView/CalendarCellDayWeekView.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CalendarCellDayWeekViewProps {
+  /** Event block(s) occupying the slot — typically CalendarEventDayWeekView. */
+  children?: ReactNode;
+  /** Renders a hover "+" add button bottom-right. */
+  onAdd?: () => void;
+  /** Disabled / outside-hours styling. */
+  muted?: boolean;
+  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 time-slot cell in day/week view. Holds CalendarEventDayWeekView blocks. */
+export function CalendarCellDayWeekView({
+  children,
+  onAdd,
+  muted = false,
+  className,
+}: CalendarCellDayWeekViewProps) {
+  return (
+    <div
+      className={clsx(
+        "group relative min-h-[64px] border-b border-border-secondary p-xs font-body",
+        muted ? "bg-bg-secondary" : "bg-bg-primary",
+        className,
+      )}
+    >
+      {children}
+      {onAdd ? (
+        <button
+          type="button"
+          onClick={onAdd}
+          aria-label="Add event"
+          className="absolute bottom-xs right-xs 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/CalendarCellDayWeekView/index.ts

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

package/src/components/CalendarColumnHeader/CalendarColumnHeader.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+
+export type CalendarColumnHeaderOrientation = "horizontal" | "vertical";
+
+export interface CalendarColumnHeaderProps {
+  /** Weekday label (e.g. "Mon"). */
+  weekday: string;
+  /** Date number. */
+  date: string | number;
+  /** Active day — renders the date in a brand-solid circle. */
+  current?: boolean;
+  orientation?: CalendarColumnHeaderOrientation;
+  className?: string;
+}
+
+export function CalendarColumnHeader({
+  weekday,
+  date,
+  current = false,
+  orientation = "vertical",
+  className,
+}: CalendarColumnHeaderProps) {
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-center gap-md py-md font-body",
+        orientation === "vertical" && "flex-col gap-xs",
+        className,
+      )}
+    >
+      <span className="text-xs font-medium text-text-quaternary">{weekday}</span>
+      <span
+        className={clsx(
+          "flex items-center justify-center text-xs font-semibold",
+          current
+            ? "size-6 rounded-full bg-brand-solid text-white"
+            : "text-text-secondary",
+        )}
+        aria-current={current ? "date" : undefined}
+      >
+        {date}
+      </span>
+    </div>
+  );
+}

package/src/components/CalendarColumnHeader/index.ts

@@ -0,0 +1,5 @@
+export { CalendarColumnHeader } from "./CalendarColumnHeader";
+export type {
+  CalendarColumnHeaderProps,
+  CalendarColumnHeaderOrientation,
+} from "./CalendarColumnHeader";

package/src/components/CalendarDateIcon/CalendarDateIcon.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+
+export interface CalendarDateIconProps {
+  /** Short month label (e.g. "JAN"). Rendered uppercase. */
+  month: string;
+  /** Day number. */
+  day: string | number;
+  className?: string;
+}
+
+export function CalendarDateIcon({ month, day, className }: CalendarDateIconProps) {
+  return (
+    <div
+      className={clsx(
+        "inline-flex w-12 flex-col overflow-hidden rounded-md border border-border-secondary bg-bg-primary text-center font-body",
+        className,
+      )}
+    >
+      <span className="bg-bg-secondary py-xxs text-xs font-semibold uppercase text-text-quaternary">
+        {month}
+      </span>
+      <span className="py-xs text-lg font-bold text-text-brand-secondary">{day}</span>
+    </div>
+  );
+}

package/src/components/CalendarDateIcon/index.ts

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

package/src/components/CalendarEvent/CalendarEvent.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+
+export type CalendarEventColor =
+  | "neutral"
+  | "brand"
+  | "emerald"
+  | "blue"
+  | "indigo"
+  | "purple"
+  | "pink"
+  | "orange"
+  | "amber";
+
+export interface CalendarEventProps {
+  /** Event title. */
+  title: string;
+  /** Optional time label (e.g. "9:00 AM"). */
+  time?: string;
+  color?: CalendarEventColor;
+  /** Filled colour-fill style vs the subtle white style. */
+  filled?: boolean;
+  className?: string;
+}
+
+// Static class maps (utility-<c>-{100,500,700}) — all present in the preset.
+const dotClasses: Record<CalendarEventColor, string> = {
+  neutral: "bg-utility-neutral-500",
+  brand: "bg-utility-brand-500",
+  emerald: "bg-utility-emerald-500",
+  blue: "bg-utility-blue-500",
+  indigo: "bg-utility-indigo-500",
+  purple: "bg-utility-purple-500",
+  pink: "bg-utility-pink-500",
+  orange: "bg-utility-orange-500",
+  amber: "bg-utility-amber-500",
+};
+
+const filledClasses: Record<CalendarEventColor, string> = {
+  neutral: "bg-utility-neutral-100 text-utility-neutral-700",
+  brand: "bg-utility-brand-100 text-utility-brand-700",
+  emerald: "bg-utility-emerald-100 text-utility-emerald-700",
+  blue: "bg-utility-blue-100 text-utility-blue-700",
+  indigo: "bg-utility-indigo-100 text-utility-indigo-700",
+  purple: "bg-utility-purple-100 text-utility-purple-700",
+  pink: "bg-utility-pink-100 text-utility-pink-700",
+  orange: "bg-utility-orange-100 text-utility-orange-700",
+  amber: "bg-utility-amber-100 text-utility-amber-700",
+};
+
+export function CalendarEvent({
+  title,
+  time,
+  color = "neutral",
+  filled = false,
+  className,
+}: CalendarEventProps) {
+  return (
+    <div
+      className={clsx(
+        "flex w-full items-center gap-md rounded-sm px-md py-xs font-body text-xs",
+        filled
+          ? filledClasses[color]
+          : "border border-border-secondary bg-bg-primary text-text-secondary",
+        className,
+      )}
+    >
+      <span className={clsx("size-2 shrink-0 rounded-full", dotClasses[color])} aria-hidden />
+      <span className="truncate font-semibold">{title}</span>
+      {time ? (
+        <span className={clsx("ml-auto shrink-0 font-normal", !filled && "text-text-tertiary")}>
+          {time}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/CalendarEvent/index.ts

@@ -0,0 +1,2 @@
+export { CalendarEvent } from "./CalendarEvent";
+export type { CalendarEventProps, CalendarEventColor } from "./CalendarEvent";

package/src/components/CalendarEventDayWeekView/CalendarEventDayWeekView.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+import type { CalendarEventColor } from "../CalendarEvent";
+
+export interface CalendarEventDayWeekViewProps {
+  title: string;
+  time?: string;
+  color?: CalendarEventColor;
+  /** Filled colour-fill style vs the subtle tint. */
+  filled?: boolean;
+  className?: string;
+}
+
+// Left-accent border colour (utility-<c>-500).
+const accentClasses: Record<CalendarEventColor, string> = {
+  neutral: "border-l-utility-neutral-500",
+  brand: "border-l-utility-brand-500",
+  emerald: "border-l-utility-emerald-500",
+  blue: "border-l-utility-blue-500",
+  indigo: "border-l-utility-indigo-500",
+  purple: "border-l-utility-purple-500",
+  pink: "border-l-utility-pink-500",
+  orange: "border-l-utility-orange-500",
+  amber: "border-l-utility-amber-500",
+};
+
+const dotClasses: Record<CalendarEventColor, string> = {
+  neutral: "bg-utility-neutral-500",
+  brand: "bg-utility-brand-500",
+  emerald: "bg-utility-emerald-500",
+  blue: "bg-utility-blue-500",
+  indigo: "bg-utility-indigo-500",
+  purple: "bg-utility-purple-500",
+  pink: "bg-utility-pink-500",
+  orange: "bg-utility-orange-500",
+  amber: "bg-utility-amber-500",
+};
+
+const fillClasses: Record<CalendarEventColor, string> = {
+  neutral: "bg-utility-neutral-100 text-utility-neutral-700",
+  brand: "bg-utility-brand-100 text-utility-brand-700",
+  emerald: "bg-utility-emerald-100 text-utility-emerald-700",
+  blue: "bg-utility-blue-100 text-utility-blue-700",
+  indigo: "bg-utility-indigo-100 text-utility-indigo-700",
+  purple: "bg-utility-purple-100 text-utility-purple-700",
+  pink: "bg-utility-pink-100 text-utility-pink-700",
+  orange: "bg-utility-orange-100 text-utility-orange-700",
+  amber: "bg-utility-amber-100 text-utility-amber-700",
+};
+
+export function CalendarEventDayWeekView({
+  title,
+  time,
+  color = "brand",
+  filled = false,
+  className,
+}: CalendarEventDayWeekViewProps) {
+  return (
+    <div
+      className={clsx(
+        "relative flex h-full w-full flex-col gap-xxs rounded-sm border-l-2 px-md py-xs font-body text-xs",
+        accentClasses[color],
+        filled
+          ? fillClasses[color]
+          : "bg-bg-secondary text-text-secondary",
+        className,
+      )}
+    >
+      <span className="truncate pr-md font-semibold">{title}</span>
+      {time ? <span className="font-normal opacity-80">{time}</span> : null}
+      <span
+        className={clsx("absolute right-md top-xs size-2 rounded-full", dotClasses[color])}
+        aria-hidden
+      />
+    </div>
+  );
+}

package/src/components/CalendarEventDayWeekView/index.ts

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

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CalendarHeaderProps {
+  /** Period title, e.g. "January 2027". */
+  title: string;
+  /** Date range subtitle, e.g. "Jan 1, 2027 – Jan 31, 2027". */
+  range?: string;
+  /** Badge beside the title (e.g. a PillBadge "Week 1"). */
+  badge?: ReactNode;
+  /** Leading date chip — typically a CalendarDateIcon. */
+  dateIcon?: ReactNode;
+  /** Trailing controls slot — nav arrows, CalendarViewDropdown, Add event, etc. */
+  actions?: ReactNode;
+  className?: string;
+}
+
+/** Top bar of the calendar composite. A layout shell — drop controls into `actions`. */
+export function CalendarHeader({
+  title,
+  range,
+  badge,
+  dateIcon,
+  actions,
+  className,
+}: CalendarHeaderProps) {
+  return (
+    <div
+      className={clsx(
+        "flex flex-wrap items-start justify-between gap-lg font-body",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-lg">
+        {dateIcon}
+        <div className="flex flex-col gap-xxs">
+          <div className="flex items-center gap-md">
+            <h2 className="text-lg font-bold text-text-primary">{title}</h2>
+            {badge}
+          </div>
+          {range ? <p className="text-sm text-text-tertiary">{range}</p> : null}
+        </div>
+      </div>
+      {actions ? <div className="flex items-center gap-md">{actions}</div> : null}
+    </div>
+  );
+}

package/src/components/CalendarHeader/index.ts

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

package/src/components/CalendarRowLabel/CalendarRowLabel.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+export interface CalendarRowLabelProps {
+  /** Time label for the row gutter (e.g. "9 AM"). */
+  label: string;
+  className?: string;
+}
+
+/** Left-gutter time label aligned to the top of a day/week-view row. */
+export function CalendarRowLabel({ label, className }: CalendarRowLabelProps) {
+  return (
+    <div
+      className={clsx(
+        "pr-md text-right text-xs font-medium text-text-quaternary font-body",
+        className,
+      )}
+    >
+      {label}
+    </div>
+  );
+}

package/src/components/CalendarRowLabel/index.ts

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

package/src/components/CalendarTimemarker/CalendarTimemarker.tsx

@@ -0,0 +1,46 @@
+import clsx from "clsx";
+
+export type CalendarTimemarkerAlign = "left" | "center";
+
+export interface CalendarTimemarkerProps {
+  /** Time label (e.g. "2:20 PM"). */
+  time: string;
+  /** Label position: leading, or centered between two line halves. */
+  align?: CalendarTimemarkerAlign;
+  className?: string;
+}
+
+const Dot = () => (
+  <span className="size-2 shrink-0 rounded-full bg-fg-brand-primary-alt" aria-hidden />
+);
+const Line = () => (
+  <span className="h-px flex-1 bg-fg-brand-primary-alt" aria-hidden />
+);
+const Label = ({ time }: { time: string }) => (
+  <span className="shrink-0 text-xs font-medium text-text-brand-tertiary-alt">{time}</span>
+);
+
+export function CalendarTimemarker({
+  time,
+  align = "left",
+  className,
+}: CalendarTimemarkerProps) {
+  return (
+    <div className={clsx("flex w-full items-center gap-xs font-body", className)}>
+      {align === "center" ? (
+        <>
+          <Dot />
+          <Line />
+          <Label time={time} />
+          <Line />
+        </>
+      ) : (
+        <>
+          <Label time={time} />
+          <Dot />
+          <Line />
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/CalendarTimemarker/index.ts

@@ -0,0 +1,5 @@
+export { CalendarTimemarker } from "./CalendarTimemarker";
+export type {
+  CalendarTimemarkerProps,
+  CalendarTimemarkerAlign,
+} from "./CalendarTimemarker";

package/src/components/CalendarViewDropdown/CalendarViewDropdown.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import clsx from "clsx";
+
+export type CalendarView = "day" | "week" | "month";
+
+export interface CalendarViewOption {
+  value: CalendarView;
+  label: string;
+  shortcut?: string;
+}
+
+export interface CalendarViewDropdownProps {
+  value: CalendarView;
+  onChange?: (value: CalendarView) => void;
+  options?: CalendarViewOption[];
+  className?: string;
+}
+
+const DEFAULT_OPTIONS: CalendarViewOption[] = [
+  { value: "day", label: "Day view", shortcut: "⌘D" },
+  { value: "week", label: "Week view", shortcut: "⌘W" },
+  { value: "month", label: "Month view", shortcut: "⌘M" },
+];
+
+function Chevron() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" className="size-5 shrink-0" aria-hidden>
+      <path
+        d="m5 7.5 5 5 5-5"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function CalendarViewDropdown({
+  value,
+  onChange,
+  options = DEFAULT_OPTIONS,
+  className,
+}: CalendarViewDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const selected = options.find((o) => o.value === value) ?? options[0];
+
+  return (
+    <div className={clsx("relative inline-block font-body", className)}>
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="inline-flex items-center gap-md rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-skeuomorphic transition-colors hover:bg-bg-primary-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"
+      >
+        {selected.label}
+        <span className="text-fg-quaternary">
+          <Chevron />
+        </span>
+      </button>
+      {open ? (
+        <ul
+          role="listbox"
+          className="absolute left-0 z-10 mt-xs min-w-[200px] rounded-md border border-border-secondary bg-bg-primary p-xs shadow-lg"
+        >
+          {options.map((opt) => {
+            const isSelected = opt.value === value;
+            return (
+              <li key={opt.value} role="option" aria-selected={isSelected}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onChange?.(opt.value);
+                    setOpen(false);
+                  }}
+                  className="flex w-full items-center gap-md rounded-sm px-md py-xs text-sm font-medium text-text-secondary transition-colors hover:bg-bg-primary-hover"
+                >
+                  <span
+                    className={clsx(
+                      "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                      isSelected ? "border-border-brand" : "border-border-primary",
+                    )}
+                  >
+                    {isSelected ? (
+                      <span className="size-2 rounded-full bg-brand-solid" />
+                    ) : null}
+                  </span>
+                  <span className="flex-1 text-left">{opt.label}</span>
+                  {opt.shortcut ? (
+                    <span className="text-xs text-text-quaternary">{opt.shortcut}</span>
+                  ) : null}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/components/CalendarViewDropdown/index.ts

@@ -0,0 +1,6 @@
+export { CalendarViewDropdown } from "./CalendarViewDropdown";
+export type {
+  CalendarViewDropdownProps,
+  CalendarView,
+  CalendarViewOption,
+} from "./CalendarViewDropdown";

package/src/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,57 @@
+// TODO: source Figma node 1211:169 ("Card header") has no parent page name in
+// metadata (likely a not-yet-discovered "Cards" page). Component is functional,
+// but locate its actual page for completeness / round-trip — see figma-map.md.
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+export interface CardHeaderProps {
+  /** Card section title. */
+  title: string;
+  /** Supporting description under the title. */
+  description?: string;
+  /** Badge beside the title (e.g. a count "10/20 seats"). */
+  badge?: ReactNode;
+  /** Leading avatar (Figma `Avatar=True`). */
+  avatar?: ReactNode;
+  /** Trailing actions slot — buttons, overflow menu, etc. */
+  actions?: ReactNode;
+  /** Bottom divider rule (default true). */
+  divider?: boolean;
+  className?: string;
+}
+
+export function CardHeader({
+  title,
+  description,
+  badge,
+  avatar,
+  actions,
+  divider = true,
+  className,
+}: CardHeaderProps) {
+  return (
+    <div
+      className={clsx(
+        "flex items-start justify-between gap-xl pb-lg font-body",
+        divider && "border-b border-border-secondary",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-start gap-lg">
+        {avatar}
+        <div className="flex min-w-0 flex-col gap-xxs">
+          <div className="flex items-center gap-md">
+            <h3 className="text-md font-semibold text-text-primary">{title}</h3>
+            {badge}
+          </div>
+          {description ? (
+            <p className="text-sm text-text-tertiary">{description}</p>
+          ) : null}
+        </div>
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 items-center gap-lg">{actions}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/CardHeader/index.ts

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

package/src/components/CarouselArrow/CarouselArrow.tsx

@@ -0,0 +1,47 @@
+import { type ButtonHTMLAttributes } from "react";
+import clsx from "clsx";
+
+export type CarouselArrowDirection = "left" | "right";
+export type CarouselArrowSize = "md" | "lg";
+
+export interface CarouselArrowProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  direction?: CarouselArrowDirection;
+  size?: CarouselArrowSize;
+}
+
+/**
+ * Round carousel nav button on a translucent blurred background
+ * (`alpha-white-90` + `backdrop-blur-sm`). md = 36px / lg = 44px.
+ */
+export function CarouselArrow({
+  direction = "left",
+  size = "md",
+  className,
+  type = "button",
+  ...rest
+}: CarouselArrowProps) {
+  const icon = size === "lg" ? "size-6" : "size-5";
+  return (
+    <button
+      type={type}
+      aria-label={direction === "left" ? "Previous" : "Next"}
+      className={clsx(
+        "flex items-center justify-center rounded-full bg-alpha-white-90 p-md text-fg-secondary backdrop-blur-sm",
+        size === "lg" ? "size-11" : "size-9",
+        className,
+      )}
+      {...rest}
+    >
+      <svg viewBox="0 0 24 24" fill="none" className={icon} aria-hidden>
+        <path
+          d={direction === "left" ? "M15 18l-6-6 6-6" : "M9 18l6-6-6-6"}
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}

package/src/components/CarouselArrow/index.ts

@@ -0,0 +1,6 @@
+export { CarouselArrow } from "./CarouselArrow";
+export type {
+  CarouselArrowProps,
+  CarouselArrowDirection,
+  CarouselArrowSize,
+} from "./CarouselArrow";