sid-ui 0.0.0-stage → 0.1.0

package/src/components/CalendarMonth.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { useEffect, useRef, useState, type KeyboardEvent } from "react";
+
+import {
+  DAYS_PER_WEEK,
+  DEFAULT_LOCALE,
+  MS_PER_DAY,
+  addDays,
+  addMonths,
+  isBetween,
+  monthGrid,
+  sameDay,
+  sameMonth,
+  startOfWeek,
+  weekdayNames,
+  type WeekStart,
+} from "./date";
+
+import type { CalendarEvent, DateRange } from "./calendarTypes";
+
+const MAX_CHIPS = 2;
+const MAX_DOTS = 3;
+
+export interface CalendarMonthProps {
+  cursor: Date;
+  onCursorChange: (date: Date) => void;
+  value?: Date | null;
+  range?: DateRange | null;
+  onPick: (date: Date) => void;
+  events: CalendarEvent[];
+  eventDisplay: "dots" | "chips";
+  weekStartsOn: WeekStart;
+  isDisabled: (date: Date) => boolean;
+  today: Date | null;
+  showWeekNumbers?: boolean;
+}
+
+function isoWeek(date: Date) {
+  const target = new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate() + 4 - (date.getDay() || DAYS_PER_WEEK),
+  );
+  const yearStart = new Date(target.getFullYear(), 0, 1);
+  return Math.ceil(((target.getTime() - yearStart.getTime()) / MS_PER_DAY + 1) / DAYS_PER_WEEK);
+}
+
+/** Six fixed weeks. Arrow keys walk days, PageUp/PageDown walk months. */
+export function CalendarMonth({
+  cursor,
+  onCursorChange,
+  value,
+  range,
+  onPick,
+  events,
+  eventDisplay,
+  weekStartsOn,
+  isDisabled,
+  today,
+  showWeekNumbers,
+}: CalendarMonthProps) {
+  const cells = monthGrid(cursor, weekStartsOn);
+  const [hover, setHover] = useState<Date | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const wantsFocus = useRef(false);
+  const rangeEnd = range?.end ?? (range && hover ? hover : null);
+
+  useEffect(() => {
+    if (!wantsFocus.current) return;
+    wantsFocus.current = false;
+    gridRef.current?.querySelector<HTMLElement>("[tabindex='0']")?.focus();
+  }, [cursor]);
+
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const moves: Record<string, () => Date> = {
+      ArrowLeft: () => addDays(cursor, -1),
+      ArrowRight: () => addDays(cursor, 1),
+      ArrowUp: () => addDays(cursor, -DAYS_PER_WEEK),
+      ArrowDown: () => addDays(cursor, DAYS_PER_WEEK),
+      PageUp: () => addMonths(cursor, event.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(cursor, event.shiftKey ? 12 : 1),
+      Home: () => startOfWeek(cursor, weekStartsOn),
+      End: () => addDays(startOfWeek(cursor, weekStartsOn), DAYS_PER_WEEK - 1),
+    };
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      wantsFocus.current = true;
+      onCursorChange(move());
+    } else if ((event.key === "Enter" || event.key === " ") && !isDisabled(cursor)) {
+      event.preventDefault();
+      onPick(cursor);
+    }
+  }
+
+  return (
+    <div
+      ref={gridRef}
+      className={[
+        "os-cal-month",
+        eventDisplay === "chips" && "os-cal-month-chips",
+        showWeekNumbers && "os-cal-month-weeks",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      role="grid"
+      aria-label={cursor.toLocaleDateString(DEFAULT_LOCALE, { month: "long", year: "numeric" })}
+      onKeyDown={onKeyDown}
+      onPointerLeave={() => setHover(null)}
+    >
+      <div className="os-cal-row os-cal-dows" role="row">
+        {showWeekNumbers && (
+          <span className="os-cal-weekno" role="columnheader" aria-label="Week" />
+        )}
+        {weekdayNames(weekStartsOn, "short").map((name) => (
+          <span key={name} className="os-cal-dow" role="columnheader" aria-label={name}>
+            {eventDisplay === "chips" ? name : name.slice(0, 2)}
+          </span>
+        ))}
+      </div>
+      {Array.from({ length: cells.length / DAYS_PER_WEEK }, (_, week) => (
+        <div key={week} className="os-cal-row" role="row">
+          {showWeekNumbers && (
+            <span className="os-cal-weekno" role="rowheader">
+              {isoWeek(cells[week * DAYS_PER_WEEK])}
+            </span>
+          )}
+          {cells.slice(week * DAYS_PER_WEEK, week * DAYS_PER_WEEK + DAYS_PER_WEEK).map((day) => {
+            const dayEvents = events.filter((event) => sameDay(event.date, day));
+            const outside = !sameMonth(day, cursor);
+            const disabled = isDisabled(day);
+            const isStart = sameDay(range?.start, day);
+            const isEnd = sameDay(rangeEnd, day);
+            const inRange = Boolean(
+              range?.start && rangeEnd && isBetween(day, range.start, rangeEnd),
+            );
+            const selected = sameDay(value, day) || isStart || isEnd;
+            const reversed = Boolean(range?.start && rangeEnd && rangeEnd < range.start);
+            return (
+              <div
+                key={day.toISOString()}
+                role="gridcell"
+                aria-selected={selected}
+                className={[
+                  "os-cal-cell",
+                  inRange && "os-cal-in-range",
+                  range?.start &&
+                    rangeEnd &&
+                    !sameDay(range.start, rangeEnd) &&
+                    (reversed ? isEnd : isStart) &&
+                    "os-cal-range-start",
+                  range?.start &&
+                    rangeEnd &&
+                    !sameDay(range.start, rangeEnd) &&
+                    (reversed ? isStart : isEnd) &&
+                    "os-cal-range-end",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+              >
+                <button
+                  type="button"
+                  tabIndex={sameDay(day, cursor) ? 0 : -1}
+                  disabled={disabled}
+                  aria-label={day.toLocaleDateString(DEFAULT_LOCALE, {
+                    weekday: "long",
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+                  aria-current={sameDay(day, today) ? "date" : undefined}
+                  className={[
+                    "os-cal-day",
+                    outside && "os-cal-day-outside",
+                    selected && "os-cal-day-selected",
+                    sameDay(day, today) && "os-cal-day-today",
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                  onClick={() => {
+                    onCursorChange(day);
+                    onPick(day);
+                  }}
+                  onPointerEnter={() => range?.start && !range.end && setHover(day)}
+                >
+                  <span className="os-cal-num">{day.getDate()}</span>
+                  {eventDisplay === "dots" && dayEvents.length > 0 && (
+                    <span className="os-cal-dots" aria-hidden>
+                      {dayEvents.slice(0, MAX_DOTS).map((event) => (
+                        <span
+                          key={event.id}
+                          className={`os-cal-dot os-cal-tone-${event.tone ?? "accent"}`}
+                        />
+                      ))}
+                    </span>
+                  )}
+                </button>
+                {eventDisplay === "chips" && dayEvents.length > 0 && (
+                  <div className="os-cal-chips">
+                    {dayEvents.slice(0, MAX_CHIPS).map((event) => (
+                      <span
+                        key={event.id}
+                        className={`os-cal-chip os-cal-tone-${event.tone ?? "accent"}`}
+                        title={event.title}
+                      >
+                        {event.start && <span className="os-cal-chip-time">{event.start}</span>}
+                        {event.title}
+                      </span>
+                    ))}
+                    {dayEvents.length > MAX_CHIPS && (
+                      <span className="os-cal-more">+{dayEvents.length - MAX_CHIPS} more</span>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/CalendarSchedule.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { DEFAULT_LOCALE, sameDay } from "./date";
+import { MINUTES_PER_HOUR, displayTime, minutesOf, range, type HourCycle } from "./time";
+
+import type { CalendarEvent } from "./calendarTypes";
+import type { CSSProperties } from "react";
+
+/** Shortest block drawn, so a 10-minute event still has room for its title. */
+const MIN_EVENT_MINUTES = 30;
+/** Below this, title and time share one line. */
+const SHORT_EVENT_MINUTES = 50;
+
+export interface CalendarScheduleProps {
+  days: Date[];
+  events: CalendarEvent[];
+  value?: Date | null;
+  onPick: (date: Date) => void;
+  today: Date | null;
+  now: Date | null;
+  /** First and last hour shown, 0–24. */
+  hours: [number, number];
+  hourCycle: HourCycle;
+}
+
+interface Placed {
+  event: CalendarEvent;
+  start: number;
+  end: number;
+  column: number;
+  columns: number;
+}
+
+/** Side-by-side columns for events that overlap, like any calendar app. */
+function layout(events: CalendarEvent[]): Placed[] {
+  const timed = events
+    .filter((event) => event.start)
+    .map((event) => {
+      const start = minutesOf(event.start!);
+      const end = Math.max(minutesOf(event.end ?? event.start!), start + MIN_EVENT_MINUTES);
+      return { event, start, end, column: 0, columns: 1 };
+    })
+    .sort((a, b) => a.start - b.start || b.end - a.end);
+
+  const placed: Placed[] = [];
+  let cluster: Placed[] = [];
+  let clusterEnd = -1;
+  const flush = () => {
+    const width = Math.max(1, ...cluster.map((p) => p.column + 1));
+    cluster.forEach((p) => (p.columns = width));
+    cluster = [];
+  };
+  for (const item of timed) {
+    if (item.start >= clusterEnd) flush();
+    const used = new Set(cluster.filter((p) => p.end > item.start).map((p) => p.column));
+    let column = 0;
+    while (used.has(column)) column++;
+    item.column = column;
+    cluster.push(item);
+    placed.push(item);
+    clusterEnd = Math.max(clusterEnd, item.end);
+  }
+  flush();
+  return placed;
+}
+
+function hourLabel(hour: number, hourCycle: HourCycle) {
+  return displayTime(`${String(hour).padStart(2, "0")}:00`, hourCycle).replace(":00", "");
+}
+
+/** A time grid for one day or a week, with overlap columns and a now line. */
+export function CalendarSchedule({
+  days,
+  events,
+  value,
+  onPick,
+  today,
+  now,
+  hours,
+  hourCycle,
+}: CalendarScheduleProps) {
+  const [first, last] = hours;
+  const span = last - first;
+  const nowMinutes = now ? now.getHours() * MINUTES_PER_HOUR + now.getMinutes() : null;
+  const allDay = events.filter(
+    (event) => !event.start && days.some((day) => sameDay(day, event.date)),
+  );
+  const style = { "--os-cal-days": days.length, "--os-cal-span": span } as CSSProperties;
+
+  return (
+    <div
+      className={days.length === 1 ? "os-cal-schedule os-cal-schedule-day" : "os-cal-schedule"}
+      style={style}
+    >
+      <div className="os-cal-sched-head">
+        <span className="os-cal-gutter" />
+        {days.map((day) => (
+          <button
+            key={day.toISOString()}
+            type="button"
+            className={[
+              "os-cal-sched-day",
+              sameDay(day, value) && "os-cal-sched-day-selected",
+              sameDay(day, today) && "os-cal-sched-day-today",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria-pressed={sameDay(day, value)}
+            onClick={() => onPick(day)}
+          >
+            <span className="os-cal-sched-dow">
+              {day.toLocaleDateString(DEFAULT_LOCALE, { weekday: "short" })}
+            </span>
+            <span className="os-cal-sched-num">{day.getDate()}</span>
+          </button>
+        ))}
+      </div>
+
+      {allDay.length > 0 && (
+        <div className="os-cal-allday">
+          <span className="os-cal-gutter os-cal-allday-label">All day</span>
+          {days.map((day) => (
+            <div key={day.toISOString()} className="os-cal-allday-cell">
+              {allDay
+                .filter((event) => sameDay(event.date, day))
+                .map((event) => (
+                  <span
+                    key={event.id}
+                    className={`os-cal-chip os-cal-tone-${event.tone ?? "accent"}`}
+                  >
+                    {event.title}
+                  </span>
+                ))}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="os-cal-sched-body">
+        <div className="os-cal-gutter os-cal-hours" aria-hidden>
+          {range(first, last - 1).map((hour) => (
+            <span key={hour} className="os-cal-hour">
+              {hour === first ? "" : hourLabel(hour, hourCycle)}
+            </span>
+          ))}
+        </div>
+        {days.map((day) => {
+          const placed = layout(events.filter((event) => sameDay(event.date, day)));
+          const showNow =
+            sameDay(day, today) &&
+            nowMinutes != null &&
+            nowMinutes >= first * MINUTES_PER_HOUR &&
+            nowMinutes <= last * MINUTES_PER_HOUR;
+          return (
+            <div
+              key={day.toISOString()}
+              className={sameDay(day, today) ? "os-cal-lane os-cal-lane-today" : "os-cal-lane"}
+            >
+              {placed.map(({ event, start, end, column, columns }) => {
+                const top = (start - first * MINUTES_PER_HOUR) / MINUTES_PER_HOUR;
+                const height = (end - start) / MINUTES_PER_HOUR;
+                if (top + height <= 0 || top >= span) return null;
+                return (
+                  <div
+                    key={event.id}
+                    className={[
+                      "os-cal-event",
+                      `os-cal-tone-${event.tone ?? "accent"}`,
+                      end - start < SHORT_EVENT_MINUTES && "os-cal-event-short",
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                    style={
+                      {
+                        "--os-cal-top": Math.max(top, 0),
+                        "--os-cal-height": Math.min(height, span - Math.max(top, 0)),
+                        "--os-cal-col": column,
+                        "--os-cal-cols": columns,
+                      } as CSSProperties
+                    }
+                  >
+                    <span className="os-cal-event-title">{event.title}</span>
+                    <span className="os-cal-event-time">
+                      {displayTime(event.start!, hourCycle)}
+                      {event.end ? ` – ${displayTime(event.end, hourCycle)}` : ""}
+                    </span>
+                    {event.location && (
+                      <span className="os-cal-event-time os-cal-event-loc">{event.location}</span>
+                    )}
+                  </div>
+                );
+              })}
+              {showNow && (
+                <span
+                  className="os-cal-now"
+                  style={
+                    {
+                      "--os-cal-top": (nowMinutes - first * MINUTES_PER_HOUR) / MINUTES_PER_HOUR,
+                    } as CSSProperties
+                  }
+                  aria-label="Now"
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ClickableCard } from "./Container";
+import { Card, Heading, Stack, Text, type CardVariant } from "./Primitives";
+
+import type { ReactNode } from "react";
+
+/** Card width in px, or any CSS width. */
+type Width = number | string;
+
+export interface JobCardProps {
+  title: string;
+  meta?: string;
+  /** Status, badges, or anything that describes the room at a glance. */
+  children?: ReactNode;
+  footer?: ReactNode;
+  /** Makes the whole card a link. */
+  href?: string;
+  /** Makes the whole card a button. */
+  onClick?: () => void;
+  /** Tints the card to mark the chosen room or bid. */
+  selected?: boolean;
+  /** Lifts the card — only for a card that overlaps content beneath it. */
+  raised?: boolean;
+  width?: Width;
+}
+
+/** The Joined room card: title, meta line, optional body and footer, on an Astryx Card. */
+export function JobCard({
+  title,
+  meta,
+  children,
+  footer,
+  href,
+  onClick,
+  selected,
+  raised,
+  width,
+}: JobCardProps) {
+  const variant: CardVariant = selected ? "blue" : "default";
+  const elevation = raised ? "low" : undefined;
+  const body = (
+    <Stack gap={2}>
+      <Stack gap={0.5}>
+        <Heading level={4}>{title}</Heading>
+        {meta && (
+          <Text type="supporting" color="secondary">
+            {meta}
+          </Text>
+        )}
+      </Stack>
+      {children}
+      {footer && (
+        <Text type="supporting" color="secondary">
+          {footer}
+        </Text>
+      )}
+    </Stack>
+  );
+
+  if (href || onClick) {
+    return (
+      <ClickableCard
+        label={title}
+        href={href}
+        onClick={onClick}
+        variant={variant}
+        elevation={elevation}
+        width={width}
+      >
+        {body}
+      </ClickableCard>
+    );
+  }
+  return (
+    <Card variant={variant} elevation={elevation} width={width}>
+      {body}
+    </Card>
+  );
+}

package/src/components/Charts.tsx

@@ -0,0 +1,64 @@
+import { segmentShares } from "./chartMath";
+
+import type { ChartTone } from "./chartParts";
+
+/**
+ * A proportion bar that sits inside a KpiWidget or a card.
+ * Colours come only from the theme's data tokens (see styles/components/charts.css).
+ */
+
+export type SegmentTone = ChartTone;
+
+export type Segment = {
+  label: string;
+  value: number;
+  tone?: SegmentTone;
+  /** How the value reads in the legend and to screen readers, e.g. "$12.50". Defaults to the number. */
+  display?: string;
+};
+
+/** One bar split by share, with an optional legend. Empty data renders an empty track. */
+export function SegmentBar({
+  segments,
+  hasLegend = true,
+  unit,
+}: {
+  segments: Segment[];
+  hasLegend?: boolean;
+  /** Read after each value in the accessible summary, e.g. "jobs". */
+  unit?: string;
+}) {
+  const shares = segmentShares(segments.map((segment) => segment.value));
+  const summary = segments
+    .map(
+      (segment) => `${segment.label} ${segment.display ?? segment.value}${unit ? ` ${unit}` : ""}`,
+    )
+    .join(", ");
+  return (
+    <div className="os-segments">
+      <div className="os-segment-track" role="img" aria-label={summary}>
+        {segments.map((segment, index) =>
+          shares[index] ? (
+            <span
+              key={segment.label}
+              className="os-segment"
+              data-tone={segment.tone ?? "blue"}
+              style={{ width: `${shares[index]}%` }}
+            />
+          ) : null,
+        )}
+      </div>
+      {hasLegend ? (
+        <ul className="os-segment-legend">
+          {segments.map((segment) => (
+            <li key={segment.label}>
+              <span className="os-segment-key" data-tone={segment.tone ?? "blue"} />
+              <span>{segment.label}</span>
+              <strong>{segment.display ?? segment.value}</strong>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Chat.tsx

@@ -0,0 +1,35 @@
+/**
+ * Chat is original Astryx — Joined only themes it. Compose ChatLayout,
+ * ChatMessageList, ChatMessage, and ChatComposer for any thread.
+ */
+export {
+  ChatLayout,
+  ChatLayoutScrollButton,
+  ChatMessageList,
+  ChatMessage,
+  ChatMessageBubble,
+  ChatMessageMetadata,
+  ChatSystemMessage,
+  ChatComposer,
+  ChatComposerInput,
+  ChatComposerDrawer,
+  ChatSendButton,
+  ChatToolCalls,
+  useChatStreamScroll,
+  useChatNewMessages,
+} from "@astryxdesign/core/Chat";
+export type {
+  ChatLayoutProps,
+  ChatMessageListProps,
+  ChatMessageProps,
+  ChatMessageBubbleProps,
+  ChatMessageMetadataProps,
+  ChatMessageStatus,
+  ChatMessageSender,
+  ChatSystemMessageProps,
+  ChatComposerProps,
+  ChatComposerStatus,
+  ChatToolCallsProps,
+  ChatToolCallItem,
+  ChatToolCallStatus,
+} from "@astryxdesign/core/Chat";

package/src/components/CitySelector.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { Tokenizer, Typeahead, type SearchableItem } from "./DataInput";
+import {
+  PLACES_DEBOUNCE_MS,
+  PLACES_MIN_QUERY,
+  PlacesCredit,
+  placeItem,
+  placeSearch,
+} from "./places-search";
+import { Stack } from "./Primitives";
+
+import type { Address } from "./places";
+
+type Common = {
+  label: string;
+  isLabelHidden?: boolean;
+  isDisabled?: boolean;
+  placeholder?: string;
+};
+
+type SingleProps = Common & {
+  multiple?: false;
+  value: string;
+  onChange: (city: string) => void;
+};
+
+type MultipleProps = Common & {
+  multiple: true;
+  value: string[];
+  onChange: (cities: string[]) => void;
+};
+
+/** Search cities with Geoapify as the person types, or pick several. */
+export function CitySelector(props: SingleProps | MultipleProps) {
+  const source = useMemo(() => placeSearch("city"), []);
+  const placeholder = props.placeholder ?? (props.multiple ? "Add a city" : "Search cities");
+
+  if (props.multiple) {
+    const selected = props.value
+      .map((label) => placeItem(label))
+      .filter((city): city is SearchableItem<Address> => city != null);
+    return (
+      <Stack gap={1}>
+        <Tokenizer
+          label={props.label}
+          isLabelHidden={props.isLabelHidden}
+          isDisabled={props.isDisabled}
+          searchSource={source}
+          value={selected}
+          onChange={(items) => props.onChange(items.map((item) => item.label))}
+          placeholder={placeholder}
+          minQueryLength={PLACES_MIN_QUERY}
+          debounceMs={PLACES_DEBOUNCE_MS}
+          emptySearchResultsText="No cities match."
+        />
+        <PlacesCredit />
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap={1}>
+      <Typeahead
+        label={props.label}
+        isLabelHidden={props.isLabelHidden}
+        isDisabled={props.isDisabled}
+        searchSource={source}
+        value={placeItem(props.value)}
+        onChange={(city) => props.onChange(city?.label ?? "")}
+        placeholder={placeholder}
+        minQueryLength={PLACES_MIN_QUERY}
+        debounceMs={PLACES_DEBOUNCE_MS}
+        emptySearchResultsText="No cities match."
+      />
+      <PlacesCredit />
+    </Stack>
+  );
+}