sid-ui 0.0.0-stage → 0.1.0

package/src/components/BarChart.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+
+import { segmentShares } from "./chartMath";
+import { ChartTable, ChartTip, defaultFormat, type ChartTone } from "./chartParts";
+
+export type BarDatum = {
+  label: string;
+  value: number;
+  /** One series takes one tone; set this only to call out a single bar. */
+  tone?: ChartTone;
+};
+
+const DEFAULT_HEIGHT = 200;
+
+/**
+ * Magnitude by category. `columns` grow up from one baseline with the value on each cap;
+ * `bars` run left to right with the name before and the value after, for long labels and
+ * ranked lists. Each mark reads out its value and share on hover and focus.
+ */
+export function BarChart({
+  data,
+  label,
+  orientation = "columns",
+  tone = "blue",
+  height = DEFAULT_HEIGHT,
+  formatValue = defaultFormat,
+  hasValueLabels = true,
+}: {
+  data: BarDatum[];
+  /** Accessible name for the chart. */
+  label: string;
+  orientation?: "columns" | "bars";
+  tone?: ChartTone;
+  /** Plot height for columns, in px. Bars size to their rows. */
+  height?: number;
+  formatValue?: (value: number) => string;
+  hasValueLabels?: boolean;
+}) {
+  const [active, setActive] = useState<number | null>(null);
+  const max = Math.max(0, ...data.map((datum) => datum.value));
+  const shares = segmentShares(data.map((datum) => datum.value));
+  const size = (value: number) => (max > 0 ? `${(Math.max(0, value) / max) * 100}%` : "0%");
+
+  const handlers = (index: number) => ({
+    tabIndex: 0,
+    onPointerEnter: () => setActive(index),
+    onPointerLeave: () => setActive(null),
+    onFocus: () => setActive(index),
+    onBlur: () => setActive(null),
+    "aria-label": `${data[index].label}: ${formatValue(data[index].value)}`,
+  });
+
+  const tip = (index: number) => (
+    <ChartTip
+      left="50%"
+      top={0}
+      rows={[
+        {
+          label: `${data[index].label} · ${Math.round(shares[index])}%`,
+          value: formatValue(data[index].value),
+        },
+      ]}
+    />
+  );
+
+  return (
+    <div className="os-chart">
+      {orientation === "columns" ? (
+        <div className="os-bars-columns" style={{ height }} role="list" aria-label={label}>
+          {data.map((datum, index) => (
+            <div
+              key={datum.label}
+              className="os-bars-column"
+              role="listitem"
+              data-active={active === index || undefined}
+              {...handlers(index)}
+            >
+              <div className="os-bars-plot">
+                {hasValueLabels ? (
+                  <span className="os-bars-value">{formatValue(datum.value)}</span>
+                ) : null}
+                <span
+                  className="os-bars-mark"
+                  data-tone={datum.tone ?? tone}
+                  style={{ height: size(datum.value) }}
+                />
+                {active === index ? tip(index) : null}
+              </div>
+              <span className="os-bars-label">{datum.label}</span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="os-bars-rows" role="list" aria-label={label}>
+          {data.map((datum, index) => (
+            <div
+              key={datum.label}
+              className="os-bars-row"
+              role="listitem"
+              data-active={active === index || undefined}
+              {...handlers(index)}
+            >
+              <span className="os-bars-label">{datum.label}</span>
+              <span className="os-bars-track">
+                <span
+                  className="os-bars-mark"
+                  data-tone={datum.tone ?? tone}
+                  style={{ width: size(datum.value) }}
+                />
+                {active === index ? tip(index) : null}
+              </span>
+              {hasValueLabels ? (
+                <span className="os-bars-value">{formatValue(datum.value)}</span>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      )}
+      <ChartTable
+        caption={label}
+        headers={["", "Value", "Share"]}
+        rows={data.map((datum, index) => [
+          datum.label,
+          formatValue(datum.value),
+          `${Math.round(shares[index])}%`,
+        ])}
+      />
+    </div>
+  );
+}

package/src/components/Calendar.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+
+import { Button, IconButton, SegmentedControl, SegmentedControlItem } from "./Action";
+import { CalendarAgenda } from "./CalendarAgenda";
+import { CalendarMonth } from "./CalendarMonth";
+import { CalendarSchedule } from "./CalendarSchedule";
+import {
+  VIEW_LABELS,
+  type CalendarEvent,
+  type CalendarView,
+  type DateRange,
+} from "./calendarTypes";
+import {
+  DAYS_PER_WEEK,
+  DEFAULT_LOCALE,
+  addDays,
+  addMonths,
+  monthNames,
+  startOfDay,
+  weekOf,
+  type WeekStart,
+} from "./date";
+import { Glyph, icons } from "./Glyph";
+import { useControllable, useNow } from "./hooks";
+import { Icon } from "./Primitives";
+
+import type { ControlSize } from "./size";
+import type { HourCycle } from "./time";
+
+export type { CalendarEvent, CalendarView, CalendarTone, DateRange } from "./calendarTypes";
+
+const NOW_TICK_MS = 60_000;
+const DEFAULT_HOURS: [number, number] = [8, 19];
+
+export interface CalendarProps {
+  value?: Date | null;
+  onChange?: (date: Date) => void;
+  /** `range` picks a start, then an end, with a live preview between them. */
+  selection?: "single" | "range";
+  range?: DateRange | null;
+  onRangeChange?: (range: DateRange) => void;
+  view?: CalendarView;
+  defaultView?: CalendarView;
+  onViewChange?: (view: CalendarView) => void;
+  /** Adds a view switcher when more than one is listed. */
+  views?: CalendarView[];
+  size?: ControlSize;
+  events?: CalendarEvent[];
+  /** Month cells show events as dots under the date or as titled chips. */
+  eventDisplay?: "dots" | "chips";
+  weekStartsOn?: WeekStart;
+  min?: Date;
+  max?: Date;
+  isDateDisabled?: (date: Date) => boolean;
+  /** First and last hour on the week and day grids. */
+  hours?: [number, number];
+  hourCycle?: HourCycle;
+  showWeekNumbers?: boolean;
+  /** Content under the grid — presets, a summary, actions. */
+  footer?: ReactNode;
+}
+
+function MonthYearPicker({ cursor, onPick }: { cursor: Date; onPick: (date: Date) => void }) {
+  const [year, setYear] = useState(cursor.getFullYear());
+  return (
+    <div className="os-cal-jump">
+      <div className="os-cal-jump-year">
+        <IconButton
+          label="Previous year"
+          variant="ghost"
+          size="sm"
+          icon={<Icon icon={icons.chevronLeft} />}
+          onClick={() => setYear(year - 1)}
+        />
+        <span className="os-cal-jump-label">{year}</span>
+        <IconButton
+          label="Next year"
+          variant="ghost"
+          size="sm"
+          icon={<Icon icon={icons.chevronRight} />}
+          onClick={() => setYear(year + 1)}
+        />
+      </div>
+      <div className="os-cal-jump-months">
+        {monthNames("short").map((name, month) => (
+          <button
+            key={name}
+            type="button"
+            className="os-cal-jump-month"
+            aria-pressed={year === cursor.getFullYear() && month === cursor.getMonth()}
+            onClick={() => onPick(new Date(year, month, Math.min(cursor.getDate(), 28)))}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Month, week, day, or agenda — pick a date, a range, or just read the schedule. */
+export function Calendar({
+  value,
+  onChange,
+  selection = "single",
+  range,
+  onRangeChange,
+  view: viewProp,
+  defaultView = "month",
+  onViewChange,
+  views,
+  size = "md",
+  events = [],
+  eventDisplay = "dots",
+  weekStartsOn = 0,
+  min,
+  max,
+  isDateDisabled,
+  hours = DEFAULT_HOURS,
+  hourCycle = "12h",
+  showWeekNumbers,
+  footer,
+}: CalendarProps) {
+  const [view, setView] = useControllable(viewProp, defaultView, onViewChange);
+  const [cursor, setCursor] = useState(() => startOfDay(value ?? range?.start ?? new Date()));
+  const [jumping, setJumping] = useState(false);
+  const now = useNow(NOW_TICK_MS);
+  const today = now ? startOfDay(now) : null;
+
+  const days = view === "day" ? [cursor] : weekOf(cursor, weekStartsOn);
+  const schedule = view === "week" || view === "day";
+
+  function isDisabled(date: Date) {
+    return Boolean(
+      (min && date < startOfDay(min)) || (max && date > startOfDay(max)) || isDateDisabled?.(date),
+    );
+  }
+
+  function pick(date: Date) {
+    setCursor(date);
+    if (selection === "range") {
+      if (!range || range.end) onRangeChange?.({ start: date, end: null });
+      else
+        onRangeChange?.(
+          date < range.start
+            ? { start: date, end: range.start }
+            : { start: range.start, end: date },
+        );
+    } else {
+      onChange?.(date);
+    }
+  }
+
+  function shift(direction: 1 | -1) {
+    if (view === "week") setCursor(addDays(cursor, direction * DAYS_PER_WEEK));
+    else if (view === "day") setCursor(addDays(cursor, direction));
+    else setCursor(addMonths(cursor, direction));
+  }
+
+  const unit = view === "week" ? "week" : view === "day" ? "day" : "month";
+  const title =
+    view === "week"
+      ? `${days[0].toLocaleDateString(DEFAULT_LOCALE, { month: "short", day: "numeric" })} – ${days[
+          days.length - 1
+        ].toLocaleDateString(DEFAULT_LOCALE, {
+          month: days[0].getMonth() === days[days.length - 1].getMonth() ? undefined : "short",
+          day: "numeric",
+        })}`
+      : view === "day"
+        ? cursor.toLocaleDateString(DEFAULT_LOCALE, {
+            weekday: "long",
+            month: "long",
+            day: "numeric",
+          })
+        : cursor.toLocaleDateString(DEFAULT_LOCALE, { month: "long" });
+
+  return (
+    <div
+      className={[
+        "os-cal",
+        `os-cal-${size}`,
+        schedule && "os-cal-wide",
+        view === "agenda" && "os-cal-agenda-view",
+        eventDisplay === "chips" && "os-cal-wide",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div className="os-cal-head">
+        <button
+          type="button"
+          className="os-cal-title"
+          aria-expanded={jumping}
+          onClick={() => setJumping(!jumping)}
+        >
+          <span>{title}</span>
+          {view !== "day" && <span className="os-cal-year">{cursor.getFullYear()}</span>}
+          <Glyph name="chevronDown" className="os-cal-title-chevron" />
+        </button>
+        <div className="os-cal-actions">
+          {views && views.length > 1 && (
+            <SegmentedControl
+              label="Calendar view"
+              size="sm"
+              value={view}
+              onChange={(next) => {
+                setJumping(false);
+                setView(next as CalendarView);
+              }}
+            >
+              {views.map((v) => (
+                <SegmentedControlItem key={v} value={v} label={VIEW_LABELS[v]} />
+              ))}
+            </SegmentedControl>
+          )}
+          {size !== "sm" && today && (
+            <Button label="Today" variant="secondary" size="sm" onClick={() => setCursor(today)} />
+          )}
+          <IconButton
+            label={`Previous ${unit}`}
+            variant="ghost"
+            size="sm"
+            icon={<Icon icon={icons.chevronLeft} />}
+            onClick={() => shift(-1)}
+          />
+          <IconButton
+            label={`Next ${unit}`}
+            variant="ghost"
+            size="sm"
+            icon={<Icon icon={icons.chevronRight} />}
+            onClick={() => shift(1)}
+          />
+        </div>
+      </div>
+
+      {jumping ? (
+        <MonthYearPicker
+          cursor={cursor}
+          onPick={(date) => {
+            setCursor(date);
+            setJumping(false);
+          }}
+        />
+      ) : view === "month" ? (
+        <CalendarMonth
+          cursor={cursor}
+          onCursorChange={setCursor}
+          value={value}
+          range={selection === "range" ? range : null}
+          onPick={pick}
+          events={events}
+          eventDisplay={eventDisplay}
+          weekStartsOn={weekStartsOn}
+          isDisabled={isDisabled}
+          today={today}
+          showWeekNumbers={showWeekNumbers}
+        />
+      ) : schedule ? (
+        <CalendarSchedule
+          days={days}
+          events={events}
+          value={value}
+          onPick={pick}
+          today={today}
+          now={now}
+          hours={hours}
+          hourCycle={hourCycle}
+        />
+      ) : (
+        <CalendarAgenda
+          cursor={cursor}
+          events={events}
+          value={value}
+          onPick={pick}
+          today={today}
+          hourCycle={hourCycle}
+        />
+      )}
+      {footer && <div className="os-cal-footer">{footer}</div>}
+    </div>
+  );
+}

package/src/components/CalendarAgenda.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { DEFAULT_LOCALE, sameDay, sameMonth, startOfDay } from "./date";
+import { displayTime, minutesOf, type HourCycle } from "./time";
+
+import type { CalendarEvent } from "./calendarTypes";
+
+export interface CalendarAgendaProps {
+  cursor: Date;
+  events: CalendarEvent[];
+  value?: Date | null;
+  onPick: (date: Date) => void;
+  today: Date | null;
+  hourCycle: HourCycle;
+}
+
+/** The month's events as a reading list, grouped by day. */
+export function CalendarAgenda({
+  cursor,
+  events,
+  value,
+  onPick,
+  today,
+  hourCycle,
+}: CalendarAgendaProps) {
+  const inMonth = events
+    .filter((event) => sameMonth(event.date, cursor))
+    .sort(
+      (a, b) =>
+        a.date.getTime() - b.date.getTime() ||
+        minutesOf(a.start ?? "00:00") - minutesOf(b.start ?? "00:00"),
+    );
+  const days = inMonth.reduce<Date[]>((out, event) => {
+    if (!out.some((day) => sameDay(day, event.date))) out.push(startOfDay(event.date));
+    return out;
+  }, []);
+
+  if (days.length === 0)
+    return <p className="os-cal-agenda-empty">Nothing scheduled this month.</p>;
+
+  return (
+    <div className="os-cal-agenda">
+      {days.map((day) => (
+        <section key={day.toISOString()} className="os-cal-agenda-day">
+          <button
+            type="button"
+            className={[
+              "os-cal-agenda-date",
+              sameDay(day, today) && "os-cal-agenda-today",
+              sameDay(day, value) && "os-cal-agenda-selected",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            onClick={() => onPick(day)}
+          >
+            <span className="os-cal-agenda-num">{day.getDate()}</span>
+            <span className="os-cal-agenda-dow">
+              {day.toLocaleDateString(DEFAULT_LOCALE, { weekday: "short" })}
+            </span>
+          </button>
+          <ul className="os-cal-agenda-list">
+            {inMonth
+              .filter((event) => sameDay(event.date, day))
+              .map((event) => (
+                <li
+                  key={event.id}
+                  className={`os-cal-agenda-item os-cal-tone-${event.tone ?? "accent"}`}
+                >
+                  <span className="os-cal-agenda-bar" aria-hidden />
+                  <span className="os-cal-agenda-time">
+                    {event.start ? displayTime(event.start, hourCycle) : "All day"}
+                    {event.end && (
+                      <span className="os-cal-agenda-end">{displayTime(event.end, hourCycle)}</span>
+                    )}
+                  </span>
+                  <span className="os-cal-agenda-copy">
+                    <span className="os-cal-agenda-title">{event.title}</span>
+                    {event.location && <span className="os-cal-agenda-loc">{event.location}</span>}
+                  </span>
+                </li>
+              ))}
+          </ul>
+        </section>
+      ))}
+    </div>
+  );
+}