@borisj74/bv-ds 0.1.3 → 0.1.4

package/src/components/CalendarCell/CalendarCell.tsx

@@ -1,17 +1,40 @@
 import type { ReactNode } from "react";
 import clsx from "clsx";
+import { CalendarEvent, type CalendarEventColor } from "../CalendarEvent";
+
+export type CalendarCellBreakpoint = "desktop" | "mobile";
+
+export interface CalendarCellEvent {
+  title: string;
+  time?: string;
+  color?: CalendarEventColor;
+}
 
 export interface CalendarCellProps {
   /** Day-of-month number. */
   date: string | number;
+  /**
+   * Declarative events for this day — rendered as filled `CalendarEvent`
+   * chips (collapsed to dots on mobile). Use `children` instead for full
+   * control over each chip.
+   */
+  events?: CalendarCellEvent[];
   /** Event chips for this day — typically `CalendarEvent` instances. */
   children?: ReactNode;
   /** "+N more" overflow count shown beneath the events. */
   moreCount?: number;
+  /** Today — date number in a brand-solid circle. */
+  isToday?: boolean;
+  /** Selected day — date number in a secondary-fill circle. */
+  isSelected?: boolean;
   /** Other-month / disabled styling. */
-  muted?: boolean;
-  /** Marks today (date number in brand). */
+  isDisabled?: boolean;
+  /** Legacy alias for `isToday`. */
   current?: boolean;
+  /** Legacy alias for `isDisabled`. */
+  muted?: boolean;
+  /** Desktop renders full chips; mobile collapses chips to dots. */
+  breakpoint?: CalendarCellBreakpoint;
   /** Renders a hover "+" add button bottom-right. */
   onAdd?: () => void;
   className?: string;
@@ -34,33 +57,63 @@ function PlusIcon() {
 /** A single day cell in the month grid. Composes CalendarEvent chips. */
 export function CalendarCell({
   date,
+  events,
   children,
   moreCount,
-  muted = false,
+  isToday,
+  isSelected = false,
+  isDisabled,
   current = false,
+  muted = false,
+  breakpoint = "desktop",
   onAdd,
   className,
 }: CalendarCellProps) {
+  const today = isToday ?? current;
+  const disabled = isDisabled ?? muted;
+
   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",
+        disabled && "bg-bg-secondary",
         className,
       )}
     >
       <span
         className={clsx(
-          "text-xs font-semibold",
-          current
-            ? "text-text-brand-secondary"
-            : muted
-              ? "text-text-quaternary"
-              : "text-text-secondary",
+          "flex size-6 items-center justify-center text-xs font-semibold",
+          today
+            ? "rounded-full bg-bg-brand-solid text-white"
+            : isSelected
+              ? "rounded-full bg-bg-secondary text-text-secondary"
+              : disabled
+                ? "text-text-quaternary"
+                : "text-text-secondary",
         )}
       >
         {date}
       </span>
+      {events && events.length > 0 ? (
+        <div
+          className={clsx(
+            breakpoint === "mobile"
+              ? "flex flex-row flex-wrap gap-xxs"
+              : "flex flex-col gap-xs",
+          )}
+        >
+          {events.map((ev, i) => (
+            <CalendarEvent
+              key={i}
+              title={ev.title}
+              time={ev.time}
+              color={ev.color}
+              filled
+              breakpoint={breakpoint}
+            />
+          ))}
+        </div>
+      ) : null}
       {children ? <div className="flex flex-col gap-xs">{children}</div> : null}
       {moreCount && moreCount > 0 ? (
         <span className="text-xs font-medium text-text-tertiary">

package/src/components/CalendarCell/index.ts

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

package/src/components/CalendarCellDayWeekView/CalendarCellDayWeekView.tsx

@@ -1,7 +1,22 @@
 import type { ReactNode } from "react";
 import clsx from "clsx";
 
+export type CalendarTimeslotType =
+  | "empty"
+  | "30min"
+  | "60min"
+  | "90min"
+  | "120min";
+export type CalendarTimeslotState = "default" | "hover";
+
 export interface CalendarCellDayWeekViewProps {
+  /**
+   * Slot duration — drives the row height (empty/30min → 48px, 60min → 96px,
+   * 90min → 144px, 120min → 192px). Omit to keep the auto min-height.
+   */
+  type?: CalendarTimeslotType;
+  /** `hover` tints the slot (also rendered via CSS :hover). */
+  state?: CalendarTimeslotState;
   /** Event block(s) occupying the slot — typically CalendarEventDayWeekView. */
   children?: ReactNode;
   /** Renders a hover "+" add button bottom-right. */
@@ -11,6 +26,14 @@ export interface CalendarCellDayWeekViewProps {
   className?: string;
 }
 
+const heightClasses: Record<CalendarTimeslotType, string> = {
+  empty: "h-[48px]",
+  "30min": "h-[48px]",
+  "60min": "h-[96px]",
+  "90min": "h-[144px]",
+  "120min": "h-[192px]",
+};
+
 function PlusIcon() {
   return (
     <svg viewBox="0 0 20 20" fill="none" className="size-4" aria-hidden>
@@ -27,6 +50,8 @@ function PlusIcon() {
 
 /** A time-slot cell in day/week view. Holds CalendarEventDayWeekView blocks. */
 export function CalendarCellDayWeekView({
+  type,
+  state = "default",
   children,
   onAdd,
   muted = false,
@@ -35,8 +60,9 @@ export function CalendarCellDayWeekView({
   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",
+        "group relative border-b border-border-secondary p-xs font-body transition-colors hover:bg-bg-secondary",
+        type ? heightClasses[type] : "min-h-[64px]",
+        muted ? "bg-bg-secondary" : state === "hover" ? "bg-bg-secondary" : "bg-bg-primary",
         className,
       )}
     >

package/src/components/CalendarCellDayWeekView/index.ts

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

package/src/components/CalendarColumnHeader/CalendarColumnHeader.tsx

@@ -1,30 +1,45 @@
 import clsx from "clsx";
 
 export type CalendarColumnHeaderOrientation = "horizontal" | "vertical";
+export type CalendarColumnHeaderType = "default" | "selected" | "today";
+export type CalendarBreakpoint = "desktop" | "mobile";
 
 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. */
+  /**
+   * Cell state. `selected` → brand-solid circle behind the date; `today` →
+   * brand text + brand underline. Takes precedence over `current` when set.
+   */
+  type?: CalendarColumnHeaderType;
+  /** Legacy boolean — equivalent to `type="selected"`. Kept for back-compat. */
   current?: boolean;
   orientation?: CalendarColumnHeaderOrientation;
+  /** Desktop fixes the column to 160px; mobile lets it size to content. */
+  breakpoint?: CalendarBreakpoint;
   className?: string;
 }
 
 export function CalendarColumnHeader({
   weekday,
   date,
+  type,
   current = false,
   orientation = "vertical",
+  breakpoint = "desktop",
   className,
 }: CalendarColumnHeaderProps) {
+  // `type` wins; otherwise the legacy `current` flag maps to "selected".
+  const state: CalendarColumnHeaderType = type ?? (current ? "selected" : "default");
+
   return (
     <div
       className={clsx(
         "flex items-center justify-center gap-md py-md font-body",
         orientation === "vertical" && "flex-col gap-xs",
+        breakpoint === "desktop" && "w-[160px]",
         className,
       )}
     >
@@ -32,11 +47,12 @@ export function CalendarColumnHeader({
       <span
         className={clsx(
           "flex items-center justify-center text-xs font-semibold",
-          current
-            ? "size-6 rounded-full bg-bg-brand-solid text-white"
-            : "text-text-secondary",
+          state === "selected" && "size-6 rounded-full bg-bg-brand-solid text-white",
+          state === "today" &&
+            "border-b-2 border-border-brand pb-xxs text-text-brand-secondary",
+          state === "default" && "text-text-secondary",
         )}
-        aria-current={current ? "date" : undefined}
+        aria-current={state !== "default" ? "date" : undefined}
       >
         {date}
       </span>

package/src/components/CalendarColumnHeader/index.ts

@@ -2,4 +2,6 @@ export { CalendarColumnHeader } from "./CalendarColumnHeader";
 export type {
   CalendarColumnHeaderProps,
   CalendarColumnHeaderOrientation,
+  CalendarColumnHeaderType,
+  CalendarBreakpoint,
 } from "./CalendarColumnHeader";

package/src/components/CalendarEvent/CalendarEvent.tsx

@@ -11,6 +11,9 @@ export type CalendarEventColor =
   | "orange"
   | "amber";
 
+export type CalendarEventBreakpoint = "desktop" | "mobile";
+export type CalendarEventState = "default" | "hover";
+
 export interface CalendarEventProps {
   /** Event title. */
   title: string;
@@ -19,10 +22,14 @@ export interface CalendarEventProps {
   color?: CalendarEventColor;
   /** Filled colour-fill style vs the subtle white style. */
   filled?: boolean;
+  /** Desktop renders the full chip; mobile collapses to an 8px dot. */
+  breakpoint?: CalendarEventBreakpoint;
+  /** `hover` darkens the fill one shade (filled chips only). */
+  state?: CalendarEventState;
   className?: string;
 }
 
-// Static class maps (utility-<c>-{100,500,700}) — all present in the preset.
+// Status dot (utility-<c>-500) — also the mobile collapsed form.
 const dotClasses: Record<CalendarEventColor, string> = {
   neutral: "bg-utility-neutral-500",
   brand: "bg-utility-brand-500",
@@ -35,16 +42,43 @@ const dotClasses: Record<CalendarEventColor, string> = {
   amber: "bg-utility-amber-500",
 };
 
+// Filled chip — Figma-confirmed: bg-50 / border-200 / title text-700 (node 7991:54084).
 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",
+  neutral: "bg-utility-neutral-50 border-utility-neutral-200 text-utility-neutral-700",
+  brand: "bg-utility-brand-50 border-utility-brand-200 text-utility-brand-700",
+  emerald: "bg-utility-emerald-50 border-utility-emerald-200 text-utility-emerald-700",
+  blue: "bg-utility-blue-50 border-utility-blue-200 text-utility-blue-700",
+  indigo: "bg-utility-indigo-50 border-utility-indigo-200 text-utility-indigo-700",
+  purple: "bg-utility-purple-50 border-utility-purple-200 text-utility-purple-700",
+  pink: "bg-utility-pink-50 border-utility-pink-200 text-utility-pink-700",
+  orange: "bg-utility-orange-50 border-utility-orange-200 text-utility-orange-700",
+  amber: "bg-utility-amber-50 border-utility-amber-200 text-utility-amber-700",
+};
+
+// Hover fill — one shade darker (bg-100).
+const filledHoverClasses: Record<CalendarEventColor, string> = {
+  neutral: "bg-utility-neutral-100",
+  brand: "bg-utility-brand-100",
+  emerald: "bg-utility-emerald-100",
+  blue: "bg-utility-blue-100",
+  indigo: "bg-utility-indigo-100",
+  purple: "bg-utility-purple-100",
+  pink: "bg-utility-pink-100",
+  orange: "bg-utility-orange-100",
+  amber: "bg-utility-amber-100",
+};
+
+// Time-label colour for filled chips (utility-<c>-600).
+const timeClasses: Record<CalendarEventColor, string> = {
+  neutral: "text-utility-neutral-600",
+  brand: "text-utility-brand-600",
+  emerald: "text-utility-emerald-600",
+  blue: "text-utility-blue-600",
+  indigo: "text-utility-indigo-600",
+  purple: "text-utility-purple-600",
+  pink: "text-utility-pink-600",
+  orange: "text-utility-orange-600",
+  amber: "text-utility-amber-600",
 };
 
 export function CalendarEvent({
@@ -52,22 +86,43 @@ export function CalendarEvent({
   time,
   color = "neutral",
   filled = false,
+  breakpoint = "desktop",
+  state = "default",
   className,
 }: CalendarEventProps) {
+  // Mobile view collapses the chip down to a single 8px status dot.
+  if (breakpoint === "mobile") {
+    return (
+      <span
+        className={clsx("inline-block size-2 rounded-full", dotClasses[color], className)}
+        role="img"
+        aria-label={time ? `${title}, ${time}` : title}
+      />
+    );
+  }
+
   return (
     <div
       className={clsx(
-        "flex w-full items-center gap-md rounded-sm px-md py-xs font-body text-xs",
+        "flex w-full items-center gap-md rounded-sm border px-md py-xs font-body text-xs",
         filled
-          ? filledClasses[color]
-          : "border border-border-secondary bg-bg-primary text-text-secondary",
+          ? clsx(filledClasses[color], state === "hover" && filledHoverClasses[color])
+          : clsx(
+              "border-border-secondary bg-bg-primary text-text-secondary",
+              state === "hover" && "bg-bg-primary-hover",
+            ),
         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")}>
+        <span
+          className={clsx(
+            "ml-auto shrink-0 font-normal",
+            filled ? timeClasses[color] : "text-text-tertiary",
+          )}
+        >
           {time}
         </span>
       ) : null}

package/src/components/CalendarEvent/index.ts

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

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -6,6 +6,8 @@ export interface CalendarHeaderProps {
   title: string;
   /** Date range subtitle, e.g. "Jan 1, 2027 – Jan 31, 2027". */
   range?: string;
+  /** Alias for `range` — Batch-36 prop name. `range` wins if both set. */
+  supportingText?: string;
   /** Badge beside the title (e.g. a PillBadge "Week 1"). */
   badge?: ReactNode;
   /** Leading date chip — typically a CalendarDateIcon. */
@@ -19,11 +21,13 @@ export interface CalendarHeaderProps {
 export function CalendarHeader({
   title,
   range,
+  supportingText,
   badge,
   dateIcon,
   actions,
   className,
 }: CalendarHeaderProps) {
+  const subtitle = range ?? supportingText;
   return (
     <div
       className={clsx(
@@ -38,7 +42,7 @@ export function CalendarHeader({
             <h2 className="text-lg font-bold text-text-primary">{title}</h2>
             {badge}
           </div>
-          {range ? <p className="text-sm text-text-tertiary">{range}</p> : null}
+          {subtitle ? <p className="text-sm text-text-tertiary">{subtitle}</p> : null}
         </div>
       </div>
       {actions ? <div className="flex items-center gap-md">{actions}</div> : null}

package/src/components/CalendarRowLabel/CalendarRowLabel.tsx

@@ -2,12 +2,14 @@ import clsx from "clsx";
 
 export interface CalendarRowLabelProps {
   /** Time label for the row gutter (e.g. "9 AM"). */
-  label: string;
+  label?: string;
+  /** Alias for `label` — Batch-36 prop name. One of the two is required. */
+  time?: string;
   className?: string;
 }
 
 /** Left-gutter time label aligned to the top of a day/week-view row. */
-export function CalendarRowLabel({ label, className }: CalendarRowLabelProps) {
+export function CalendarRowLabel({ label, time, className }: CalendarRowLabelProps) {
   return (
     <div
       className={clsx(
@@ -15,7 +17,7 @@ export function CalendarRowLabel({ label, className }: CalendarRowLabelProps) {
         className,
       )}
     >
-      {label}
+      {time ?? label}
     </div>
   );
 }

package/src/components/CalendarTimemarker/CalendarTimemarker.tsx

@@ -1,12 +1,15 @@
 import clsx from "clsx";
 
 export type CalendarTimemarkerAlign = "left" | "center";
+export type CalendarTimemarkerBreakpoint = "desktop" | "mobile";
 
 export interface CalendarTimemarkerProps {
   /** Time label (e.g. "2:20 PM"). */
   time: string;
   /** Label position: leading, or centered between two line halves. */
   align?: CalendarTimemarkerAlign;
+  /** Desktop shows the time label; mobile collapses to dot + line only. */
+  breakpoint?: CalendarTimemarkerBreakpoint;
   className?: string;
 }
 
@@ -23,20 +26,23 @@ const Label = ({ time }: { time: string }) => (
 export function CalendarTimemarker({
   time,
   align = "left",
+  breakpoint = "desktop",
   className,
 }: CalendarTimemarkerProps) {
+  const showLabel = breakpoint === "desktop";
+
   return (
     <div className={clsx("flex w-full items-center gap-xs font-body", className)}>
       {align === "center" ? (
         <>
           <Dot />
           <Line />
-          <Label time={time} />
+          {showLabel ? <Label time={time} /> : null}
           <Line />
         </>
       ) : (
         <>
-          <Label time={time} />
+          {showLabel ? <Label time={time} /> : null}
           <Dot />
           <Line />
         </>

package/src/components/CalendarTimemarker/index.ts

@@ -2,4 +2,5 @@ export { CalendarTimemarker } from "./CalendarTimemarker";
 export type {
   CalendarTimemarkerProps,
   CalendarTimemarkerAlign,
+  CalendarTimemarkerBreakpoint,
 } from "./CalendarTimemarker";

package/src/components/CalendarViewDropdown/CalendarViewDropdown.tsx

@@ -12,6 +12,12 @@ export interface CalendarViewOption {
 export interface CalendarViewDropdownProps {
   value: CalendarView;
   onChange?: (value: CalendarView) => void;
+  /** Alias for `onChange` — Batch-36 prop name. Both fire on selection. */
+  onSelect?: (value: CalendarView) => void;
+  /** Controlled open state. Omit to let the component manage its own. */
+  open?: boolean;
+  /** Fires whenever the menu wants to open/close (controlled or not). */
+  onOpenChange?: (open: boolean) => void;
   options?: CalendarViewOption[];
   className?: string;
 }
@@ -39,10 +45,19 @@ function Chevron() {
 export function CalendarViewDropdown({
   value,
   onChange,
+  onSelect,
+  open: openProp,
+  onOpenChange,
   options = DEFAULT_OPTIONS,
   className,
 }: CalendarViewDropdownProps) {
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
   const selected = options.find((o) => o.value === value) ?? options[0];
 
   return (
@@ -51,7 +66,7 @@ export function CalendarViewDropdown({
         type="button"
         aria-haspopup="listbox"
         aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
+        onClick={() => setOpen(!open)}
         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}
@@ -72,6 +87,7 @@ export function CalendarViewDropdown({
                   type="button"
                   onClick={() => {
                     onChange?.(opt.value);
+                    onSelect?.(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"