sid-ui 0.0.0-stage → 0.1.0

package/src/components/TimeSlots.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { displayTime, fromMinutes, minutesOf, range, type HourCycle } from "./time";
+
+import type { ControlSize } from "./size";
+
+/** Where the day splits when `grouped` is on, in minutes since midnight. */
+const DAY_PARTS = [
+  { label: "Morning", from: 0 },
+  { label: "Afternoon", from: 12 * 60 },
+  { label: "Evening", from: 17 * 60 },
+] as const;
+
+export interface TimeSlotsProps {
+  value: string;
+  onChange?: (value: string) => void;
+  /** First slot, "HH:mm". */
+  start?: string;
+  /** Last slot, inclusive. */
+  end?: string;
+  /** Minutes between slots. */
+  interval?: number;
+  hourCycle?: HourCycle;
+  /** Slots that exist but can't be booked. */
+  unavailable?: string[];
+  /** Splits the list under Morning / Afternoon / Evening. */
+  grouped?: boolean;
+  size?: ControlSize;
+  disabled?: boolean;
+}
+
+/** A grid of bookable times — pick one tap, see what's taken at a glance. */
+export function TimeSlots({
+  value,
+  onChange,
+  start = "09:00",
+  end = "17:00",
+  interval = 30,
+  hourCycle = "12h",
+  unavailable = [],
+  grouped = false,
+  size = "md",
+  disabled,
+}: TimeSlotsProps) {
+  const slots = range(minutesOf(start), minutesOf(end), interval).map(fromMinutes);
+  const groups = grouped
+    ? DAY_PARTS.map((part, index) => ({
+        label: part.label,
+        slots: slots.filter((slot) => {
+          const at = minutesOf(slot);
+          return at >= part.from && at < (DAY_PARTS[index + 1]?.from ?? Infinity);
+        }),
+      })).filter((group) => group.slots.length > 0)
+    : [{ label: "", slots }];
+
+  return (
+    <div className={`os-slots os-slots-${size}`} role="radiogroup" aria-label="Available times">
+      {groups.map((group) => (
+        <div key={group.label || "all"} className="os-slots-group">
+          {group.label && <p className="os-slots-heading">{group.label}</p>}
+          <div className="os-slots-grid">
+            {group.slots.map((slot) => {
+              const taken = unavailable.includes(slot);
+              return (
+                <button
+                  key={slot}
+                  type="button"
+                  role="radio"
+                  aria-checked={slot === value}
+                  className="os-slot"
+                  disabled={disabled || taken}
+                  onClick={() => onChange?.(slot)}
+                >
+                  {displayTime(slot, hourCycle)}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Timeline.tsx

@@ -0,0 +1,111 @@
+import { Fragment, type ReactNode } from "react";
+
+import { Glyph } from "./Glyph";
+
+export type TimelineTone = "neutral" | "accent" | "success" | "warning" | "danger";
+
+/** done fills the marker and the rail behind it; current glows; upcoming stays hollow. */
+export type TimelineStatus = "done" | "current" | "upcoming";
+
+export interface TimelineItem {
+  id: string;
+  title: string;
+  time?: string;
+  description?: string;
+  meta?: ReactNode;
+  /** Replaces the dot — an initial, icon, or avatar. */
+  marker?: ReactNode;
+  tone?: TimelineTone;
+  status?: TimelineStatus;
+  /** Items that share a group sit under one heading, such as "Today". */
+  group?: string;
+}
+
+/**
+ * rail       — the default: dots on a line, time beside the title.
+ * compact    — a log: time in its own column, one line per event.
+ * cards      — each event on its own surface.
+ * alternate  — events swap sides of a centred rail.
+ * horizontal — a left-to-right track, like milestones.
+ * activity   — larger markers for people and icons, feed-style.
+ */
+export type TimelineVariant =
+  "rail" | "compact" | "cards" | "alternate" | "horizontal" | "activity";
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  variant?: TimelineVariant;
+  /** Accessible name for the list. */
+  label?: string;
+}
+
+function Marker({ item }: { item: TimelineItem }) {
+  const status = item.status ?? "plain";
+  const content = item.marker ?? (status === "done" ? <Glyph name="check" /> : null);
+  return (
+    <span
+      className={[
+        "os-tl-marker",
+        `os-tl-tone-${item.tone ?? "accent"}`,
+        `os-tl-${status}`,
+        item.marker != null && "os-tl-marker-custom",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      aria-hidden
+    >
+      {content}
+    </span>
+  );
+}
+
+/** A sequence of events. Tone colors the marker; the title always says what happened. */
+export function Timeline({ items, variant = "rail", label = "Timeline" }: TimelineProps) {
+  const grouped = variant !== "horizontal";
+
+  return (
+    <ol className={`os-tl os-tl-${variant}`} aria-label={label}>
+      {items.map((item, index) => {
+        const heading =
+          grouped && item.group && item.group !== items[index - 1]?.group ? item.group : null;
+        const nextStatus = items[index + 1]?.status;
+        return (
+          <Fragment key={item.id}>
+            {heading && (
+              <li className="os-tl-heading" role="presentation">
+                <span>{heading}</span>
+              </li>
+            )}
+            <li
+              className={[
+                "os-tl-item",
+                `os-tl-item-${item.status ?? "plain"}`,
+                nextStatus === "upcoming" && "os-tl-item-before-upcoming",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+              aria-current={item.status === "current" ? "step" : undefined}
+            >
+              {variant === "compact" && item.time && (
+                <time className="os-tl-time os-tl-time-lead">{item.time}</time>
+              )}
+              <span className="os-tl-track">
+                <Marker item={item} />
+              </span>
+              <div className="os-tl-body">
+                <div className="os-tl-head">
+                  <p className="os-tl-title">{item.title}</p>
+                  {variant !== "compact" && item.time && (
+                    <time className="os-tl-time">{item.time}</time>
+                  )}
+                </div>
+                {item.description && <p className="os-tl-desc">{item.description}</p>}
+                {item.meta && <div className="os-tl-meta">{item.meta}</div>}
+              </div>
+            </li>
+          </Fragment>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/TokenDemo.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Button } from "./Action";
+
+type Theme = "dark" | "light";
+
+const COLOR_GROUPS: { title: string; tokens: string[] }[] = [
+  {
+    title: "Meta blue ramp",
+    tokens: [
+      "meta-blue-50",
+      "meta-blue-100",
+      "meta-blue-200",
+      "meta-blue-300",
+      "meta-blue-400",
+      "meta-blue-500",
+      "meta-blue-600",
+      "meta-blue-700",
+      "meta-blue-800",
+      "meta-blue-900",
+      "meta-blue-950",
+    ],
+  },
+  {
+    title: "Canvas & surface",
+    tokens: ["canvas", "surface", "surface-sunken", "surface-hover", "surface-selected"],
+  },
+  { title: "Border", tokens: ["border-subtle", "border-default", "border-strong", "border-focus"] },
+  { title: "Ink", tokens: ["ink", "ink-muted", "ink-faint", "on-primary"] },
+  {
+    title: "Primary & link",
+    tokens: ["primary", "primary-hover", "primary-active", "primary-bg", "link", "link-hover"],
+  },
+  {
+    title: "Status",
+    tokens: [
+      "success",
+      "success-bg",
+      "warning",
+      "warning-bg",
+      "danger",
+      "danger-hover",
+      "danger-bg",
+    ],
+  },
+  { title: "Overlay", tokens: ["overlay"] },
+];
+
+const RADII = ["radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-pill", "radius-full"];
+const ELEVATIONS = ["elevation-0", "elevation-1", "elevation-2", "elevation-3"];
+const BORDER_WIDTHS = ["border-width-hairline", "border-width-thick"];
+const OPACITIES = ["opacity-disabled", "opacity-overlay", "opacity-hover-scrim"];
+const DURATIONS = ["duration-fast", "duration-normal", "duration-slow"];
+const EASINGS = ["ease-standard", "ease-decelerate", "ease-accelerate"];
+const TYPE_STYLES = [
+  "display",
+  "h1",
+  "h2",
+  "h3",
+  "body-lg",
+  "body",
+  "body-strong",
+  "body-sm",
+  "label",
+  "caption",
+  "button",
+];
+
+const ALL_TOKENS = [
+  ...COLOR_GROUPS.flatMap((g) => g.tokens),
+  ...RADII,
+  ...ELEVATIONS,
+  ...BORDER_WIDTHS,
+  ...OPACITIES,
+  ...DURATIONS,
+  ...EASINGS,
+];
+
+/** Reads every token's resolved value off <html> so the table shows what the
+    active theme actually paints, not the source-file default. */
+function readTokens(): Record<string, string> {
+  const style = getComputedStyle(document.documentElement);
+  const out: Record<string, string> = {};
+  for (const t of ALL_TOKENS) out[t] = style.getPropertyValue(`--${t}`).trim();
+  return out;
+}
+
+function Group({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="os-token-group">
+      <h3 className="h3" style={{ marginBottom: 12 }}>
+        {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+function Value({ children }: { children: string }) {
+  return <code className="caption text-ink-muted">{children || "—"}</code>;
+}
+
+/**
+ * A toggleable, self-describing demo of every Joined design token: a sample
+ * rendered with the token beside its name and live resolved value. Includes a
+ * dark/light switch because most values differ per theme.
+ */
+export function TokenDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [theme, setTheme] = useState<Theme>("dark");
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [motionKey, setMotionKey] = useState(0);
+
+  useEffect(() => {
+    if (!open) return;
+    const current = document.documentElement.getAttribute("data-theme");
+    if (current === "light" || current === "dark") setTheme(current);
+    setValues(readTokens());
+  }, [open]);
+
+  const show = (next: boolean) => {
+    setOpen(next);
+    if (!next) return;
+    const current = document.documentElement.getAttribute("data-theme");
+    if (current === "light" || current === "dark") setTheme(current);
+    setValues(readTokens());
+  };
+
+  const switchTheme = (next: Theme) => {
+    document.documentElement.setAttribute("data-theme", next);
+    setTheme(next);
+    setValues(readTokens());
+  };
+
+  return (
+    <div className="os-token-demo">
+      <div className="os-token-demo-toolbar">
+        <label className="os-check">
+          <input type="checkbox" checked={open} onChange={(e) => show(e.target.checked)} />
+          <span className="body-strong">Show design token demo</span>
+        </label>
+        {open && (
+          <div role="group" aria-label="Theme">
+            <Button
+              label="Dark"
+              size="sm"
+              variant={theme === "dark" ? "secondary" : "ghost"}
+              onClick={() => switchTheme("dark")}
+            />
+            <Button
+              label="Light"
+              size="sm"
+              variant={theme === "light" ? "secondary" : "ghost"}
+              onClick={() => switchTheme("light")}
+            />
+          </div>
+        )}
+      </div>
+
+      {open && (
+        <div style={{ marginTop: 24 }}>
+          <Group title="Color">
+            {COLOR_GROUPS.map((g) => (
+              <div key={g.title} style={{ marginBottom: 16 }}>
+                <p className="label text-ink-muted" style={{ marginBottom: 8 }}>
+                  {g.title}
+                </p>
+                <div className="os-swatch-grid">
+                  {g.tokens.map((t) => (
+                    <div key={t} className="os-swatch">
+                      <div className="os-swatch-chip" style={{ background: `var(--${t})` }} />
+                      <div className="os-swatch-body">
+                        <span className="caption text-ink">--{t}</span>
+                        <Value>{values[t]}</Value>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </Group>
+
+          <Group title="Radius">
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
+              {RADII.map((t) => (
+                <div
+                  key={t}
+                  style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}
+                >
+                  <div
+                    style={{
+                      width: 64,
+                      height: 64,
+                      border: "1px solid var(--border-default)",
+                      background: "var(--primary-bg)",
+                      borderRadius: `var(--${t})`,
+                    }}
+                  />
+                  <span className="caption text-ink">--{t}</span>
+                  <Value>{values[t]}</Value>
+                </div>
+              ))}
+            </div>
+          </Group>
+
+          <Group title="Elevation">
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 24,
+                padding: 24,
+                background: "var(--canvas)",
+                borderRadius: 8,
+              }}
+            >
+              {ELEVATIONS.map((t) => (
+                <div
+                  key={t}
+                  style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}
+                >
+                  <div
+                    style={{
+                      width: 96,
+                      height: 64,
+                      borderRadius: 8,
+                      border: "1px solid var(--border-subtle)",
+                      background: "var(--surface)",
+                      boxShadow: `var(--${t})`,
+                    }}
+                  />
+                  <span className="caption text-ink">--{t}</span>
+                  <Value>{values[t]}</Value>
+                </div>
+              ))}
+            </div>
+          </Group>
+
+          <Group title="Border width">
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
+              {BORDER_WIDTHS.map((t) => (
+                <div
+                  key={t}
+                  style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}
+                >
+                  <div
+                    style={{
+                      width: 96,
+                      height: 48,
+                      borderRadius: 6,
+                      background: "var(--surface-sunken)",
+                      borderStyle: "solid",
+                      borderColor: "var(--border-strong)",
+                      borderWidth: `var(--${t})`,
+                    }}
+                  />
+                  <span className="caption text-ink">--{t}</span>
+                  <Value>{values[t]}</Value>
+                </div>
+              ))}
+            </div>
+          </Group>
+
+          <Group title="Opacity">
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
+              {OPACITIES.map((t) => (
+                <div
+                  key={t}
+                  style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}
+                >
+                  <div
+                    style={{
+                      position: "relative",
+                      width: 96,
+                      height: 48,
+                      overflow: "hidden",
+                      borderRadius: 6,
+                      background: "var(--primary)",
+                    }}
+                  >
+                    <div
+                      style={{
+                        position: "absolute",
+                        inset: 0,
+                        background: "var(--ink)",
+                        opacity: `var(--${t})`,
+                      }}
+                    />
+                  </div>
+                  <span className="caption text-ink">--{t}</span>
+                  <Value>{values[t]}</Value>
+                </div>
+              ))}
+            </div>
+          </Group>
+
+          <Group title="Motion">
+            <p className="body-sm text-ink-muted" style={{ marginBottom: 12 }}>
+              Each row pairs a duration with an easing. Press play to run them all.
+            </p>
+            <Button
+              label="Play"
+              size="sm"
+              variant="secondary"
+              onClick={() => setMotionKey((k) => k + 1)}
+            />
+            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 12 }}>
+              {DURATIONS.map((d, i) => {
+                const e = EASINGS[i];
+                return (
+                  <div key={d} style={{ display: "flex", alignItems: "center", gap: 16 }}>
+                    <div style={{ width: 220, flex: "none" }}>
+                      <span className="caption text-ink">
+                        --{d} / --{e}
+                      </span>
+                      <Value>{`${values[d]} · ${values[e]}`}</Value>
+                    </div>
+                    <div
+                      style={{
+                        position: "relative",
+                        height: 24,
+                        flex: 1,
+                        borderRadius: 999,
+                        background: "var(--surface-sunken)",
+                      }}
+                    >
+                      <div
+                        key={motionKey}
+                        style={{
+                          position: "absolute",
+                          top: 4,
+                          height: 16,
+                          width: 16,
+                          borderRadius: 999,
+                          background: "var(--primary)",
+                          left: "4px",
+                          animation:
+                            motionKey > 0
+                              ? `os-token-slide var(--${d}) var(--${e}) forwards`
+                              : "none",
+                        }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <style>{`@keyframes os-token-slide { to { left: calc(100% - 20px); } }`}</style>
+          </Group>
+
+          <Group title="Type styles">
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              {TYPE_STYLES.map((cls) => (
+                <div
+                  key={cls}
+                  style={{
+                    display: "flex",
+                    alignItems: "baseline",
+                    gap: 16,
+                    borderBottom: "1px solid var(--border-subtle)",
+                    paddingBottom: 8,
+                  }}
+                >
+                  <code className="caption text-ink-muted" style={{ width: 96, flex: "none" }}>
+                    .{cls}
+                  </code>
+                  <span className={cls}>Sealed rooms, invited bidders.</span>
+                </div>
+              ))}
+            </div>
+          </Group>
+        </div>
+      )}
+    </div>
+  );
+}