@robr0/design-system 0.7.0 → 0.8.0

package/components/DataTable/DataTable.js

@@ -0,0 +1,235 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo } from "react";
+import { Table } from "../Table/Table.js";
+import { Pagination } from "../Pagination/Pagination.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { Input } from "../Input/Input.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import "./DataTable.css";
+import "../../fonts/material-symbols.css";
+const compareValues = (a, b) => {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+};
+const DataTable = React.forwardRef(
+  ({
+    columns,
+    rows,
+    pageSize,
+    selectable = false,
+    selectedIds,
+    defaultSelectedIds,
+    onSelectionChange,
+    sort,
+    defaultSort,
+    onSortChange,
+    searchable = false,
+    searchPlaceholder = "Search",
+    toolbar,
+    size = "default",
+    striped = false,
+    caption,
+    emptyState,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-data-table";
+    const [search, setSearch] = useState("");
+    const [page, setPage] = useState(1);
+    const isSortControlled = sort !== void 0;
+    const [uncontrolledSort, setUncontrolledSort] = useState(
+      defaultSort ?? null
+    );
+    const currentSort = isSortControlled ? sort : uncontrolledSort;
+    const isSelectionControlled = selectedIds !== void 0;
+    const [uncontrolledSelection, setUncontrolledSelection] = useState(
+      defaultSelectedIds ?? []
+    );
+    const currentSelection = isSelectionControlled ? selectedIds : uncontrolledSelection;
+    const setSelection = (ids) => {
+      if (!isSelectionControlled) setUncontrolledSelection(ids);
+      onSelectionChange?.(ids);
+    };
+    const cycleSort = (key) => {
+      let next;
+      if (currentSort?.key !== key) next = { key, direction: "asc" };
+      else if (currentSort.direction === "asc") next = { key, direction: "desc" };
+      else next = null;
+      if (!isSortControlled) setUncontrolledSort(next);
+      onSortChange?.(next);
+    };
+    const filteredRows = useMemo(() => {
+      if (!search.trim()) return rows;
+      const needle = search.trim().toLowerCase();
+      return rows.filter(
+        (row) => Object.values(row.values).some(
+          (value) => value != null && String(value).toLowerCase().includes(needle)
+        )
+      );
+    }, [rows, search]);
+    const sortedRows = useMemo(() => {
+      if (!currentSort) return filteredRows;
+      const { key, direction } = currentSort;
+      const factor = direction === "asc" ? 1 : -1;
+      return [...filteredRows].sort(
+        (a, b) => compareValues(a.values[key], b.values[key]) * factor
+      );
+    }, [filteredRows, currentSort]);
+    const pageCount = pageSize ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
+    const clampedPage = Math.min(page, pageCount);
+    const visibleRows = pageSize ? sortedRows.slice((clampedPage - 1) * pageSize, clampedPage * pageSize) : sortedRows;
+    const visibleIds = visibleRows.map((row) => row.id);
+    const selectedVisible = visibleIds.filter((id) => currentSelection.includes(id));
+    const allVisibleSelected = visibleIds.length > 0 && selectedVisible.length === visibleIds.length;
+    const someVisibleSelected = selectedVisible.length > 0 && !allVisibleSelected;
+    const toggleAllVisible = (checked) => {
+      if (checked) {
+        setSelection([.../* @__PURE__ */ new Set([...currentSelection, ...visibleIds])]);
+      } else {
+        setSelection(currentSelection.filter((id) => !visibleIds.includes(id)));
+      }
+    };
+    const toggleRow = (id, checked) => {
+      if (checked) setSelection([...currentSelection, id]);
+      else setSelection(currentSelection.filter((selected) => selected !== id));
+    };
+    const sortIcon = (key) => {
+      if (currentSort?.key !== key) return "swap_vert";
+      return currentSort.direction === "asc" ? "arrow_upward" : "arrow_downward";
+    };
+    const sortStateText = (key) => {
+      if (currentSort?.key !== key) return "not sorted";
+      return currentSort.direction === "asc" ? "sorted ascending" : "sorted descending";
+    };
+    const tableColumns = [
+      ...selectable ? [
+        {
+          key: "ds-data-table-select",
+          header: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "compact",
+              checked: allVisibleSelected,
+              indeterminate: someVisibleSelected,
+              onCheckedChange: toggleAllVisible,
+              "aria-label": "Select all rows on this page"
+            }
+          ),
+          width: "40px"
+        }
+      ] : [],
+      ...columns.map(
+        (col) => ({
+          key: col.key,
+          width: col.width,
+          align: col.align,
+          header: col.sortable ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `${baseClass}__sort`,
+              "aria-label": `Sort by ${typeof col.header === "string" ? col.header : col.key}, ${sortStateText(col.key)}`,
+              onClick: () => cycleSort(col.key),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: col.header }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      `${baseClass}__sort-icon`,
+                      currentSort?.key === col.key ? `${baseClass}__sort-icon--active` : "",
+                      "material-symbols-rounded"
+                    ].filter(Boolean).join(" "),
+                    "aria-hidden": "true",
+                    children: sortIcon(col.key)
+                  }
+                )
+              ]
+            }
+          ) : col.header
+        })
+      )
+    ];
+    const tableRows = visibleRows.map((row) => ({
+      id: row.id,
+      cells: {
+        ...selectable ? {
+          "ds-data-table-select": /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "compact",
+              checked: currentSelection.includes(row.id),
+              onCheckedChange: (checked) => toggleRow(row.id, checked),
+              "aria-label": `Select row ${row.id}`
+            }
+          )
+        } : {},
+        ...Object.fromEntries(
+          columns.map((col) => [col.key, col.render ? col.render(row) : row.values[col.key]])
+        )
+      }
+    }));
+    const hasChrome = searchable || Boolean(toolbar);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      hasChrome && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__toolbar`, children: [
+        toolbar && /* @__PURE__ */ jsx("div", { className: `${baseClass}__filters`, children: toolbar }),
+        searchable && /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: `${baseClass}__search`,
+            size: "compact",
+            iconLeft: "search",
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            value: search,
+            onValueChange: (value) => {
+              setSearch(value);
+              setPage(1);
+            }
+          }
+        )
+      ] }),
+      visibleRows.length > 0 ? /* @__PURE__ */ jsx(
+        Table,
+        {
+          columns: tableColumns,
+          rows: tableRows,
+          size,
+          striped,
+          bordered: true,
+          caption,
+          captionHidden: true
+        }
+      ) : emptyState ?? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: "search_off",
+          title: "No matching rows",
+          description: "Adjust the search or filters and try again.",
+          variant: "bordered",
+          size: "compact"
+        }
+      ),
+      (pageSize !== void 0 || selectable) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__count`, "aria-live": "polite", children: selectable && currentSelection.length > 0 ? `${currentSelection.length} selected` : `${sortedRows.length} result${sortedRows.length === 1 ? "" : "s"}` }),
+        pageSize !== void 0 && pageCount > 1 && /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page: clampedPage,
+            pageCount,
+            onPageChange: setPage,
+            size: "compact"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+DataTable.displayName = "DataTable";
+export {
+  DataTable
+};

package/components/EventCalendar/EventCalendar.css

@@ -0,0 +1,328 @@
+/* ============================================
+   EVENT CALENDAR COMPONENT
+   Month-at-a-glance grid with event pills.
+   Rows share the height of the fullest day in
+   their week (grid-auto-rows), so the calendar
+   grows with its content instead of fixing a
+   cell height.
+
+   Event accents use the core accent roles —
+   never the action teal, which stays reserved
+   for actions.
+   ============================================ */
+
+.ds-event-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  padding: var(--padding-md);
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-event-calendar__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.ds-event-calendar__month {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+}
+
+.ds-event-calendar__nav {
+  display: flex;
+  gap: var(--gap-xxs);
+}
+
+.ds-event-calendar__nav-btn {
+  --icon-size: var(--icon-size-sm);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-xxs);
+  background-color: var(--color-action-passive-bg);
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--color-icon-primary);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-event-calendar__nav-btn:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-event-calendar__nav-btn:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+.ds-event-calendar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+/* ============================================
+   WEEKDAY ROW
+   ============================================ */
+
+.ds-event-calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--gap-xxs);
+}
+
+.ds-event-calendar__weekday {
+  padding: var(--padding-xxs) var(--padding-xs);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+/* ============================================
+   GRID
+   ============================================ */
+
+.ds-event-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: 1fr;
+  gap: var(--gap-xxs);
+}
+
+.ds-event-calendar__cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+  padding: var(--padding-xxs);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.ds-event-calendar__cell--outside {
+  background-color: var(--color-bg-container-primary-transparent);
+}
+
+.ds-event-calendar__cell--outside .ds-event-calendar__day {
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   DAY NUMBER
+   ============================================ */
+
+.ds-event-calendar__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  min-width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  padding: 0 var(--padding-xxs);
+  background: none;
+  border: none;
+  border-radius: var(--radius-full);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+
+button.ds-event-calendar__day {
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+button.ds-event-calendar__day:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+button.ds-event-calendar__day:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Today — inverse chip on the day number, like DatePicker's today ring
+   but filled so it reads at calendar density */
+.ds-event-calendar__cell--today .ds-event-calendar__day {
+  background-color: var(--color-bg-page-inverse);
+  color: var(--color-text-on-inverse);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+/* ============================================
+   EVENT PILLS
+   ============================================ */
+
+.ds-event-calendar__events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+}
+
+.ds-event-calendar__event {
+  --ds-event-accent: var(--color-status-neutral-border);
+
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  min-width: 0;
+  padding: var(--padding-xxxs) var(--padding-xs);
+  background-color: var(--color-bg-container-primary);
+  border: none;
+  border-radius: var(--radius-xs);
+  text-align: left;
+}
+
+button.ds-event-calendar__event {
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+button.ds-event-calendar__event:hover {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+button.ds-event-calendar__event:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-event-calendar__event-dot {
+  flex: none;
+  width: var(--gap-xs);
+  height: var(--gap-xs);
+  border-radius: var(--radius-full);
+  background-color: var(--ds-event-accent);
+}
+
+.ds-event-calendar__event-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-event-calendar__event-time {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================
+   EVENT ACCENTS — core accent roles only
+   ============================================ */
+
+.ds-event-calendar__event--coral {
+  --ds-event-accent: var(--color-core-accent-coral);
+}
+
+.ds-event-calendar__event--violet {
+  --ds-event-accent: var(--color-core-accent-violet);
+}
+
+.ds-event-calendar__event--cobalt {
+  --ds-event-accent: var(--color-core-accent-cobalt);
+}
+
+.ds-event-calendar__event--amber {
+  --ds-event-accent: var(--color-core-accent-amber);
+}
+
+.ds-event-calendar__event--gold {
+  --ds-event-accent: var(--color-core-accent-gold);
+}
+
+.ds-event-calendar__event--mint {
+  --ds-event-accent: var(--color-core-accent-mint);
+}
+
+/* ============================================
+   OVERFLOW
+   ============================================ */
+
+.ds-event-calendar__more {
+  align-self: flex-start;
+  padding: var(--padding-xxxs) var(--padding-xs);
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+button.ds-event-calendar__more {
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+button.ds-event-calendar__more:hover {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-secondary);
+}
+
+button.ds-event-calendar__more:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+/* ============================================
+   RESPONSIVE
+   At phone widths the pills drop their time so
+   titles keep at least a few characters.
+   ============================================ */
+
+@media (max-width: 768px) {
+  .ds-event-calendar__event-time {
+    display: none;
+  }
+
+  .ds-event-calendar__weekday {
+    padding: var(--padding-xxs) 0;
+    text-align: center;
+  }
+}

package/components/EventCalendar/EventCalendar.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+export type EventCalendarColor = 'neutral' | 'coral' | 'violet' | 'cobalt' | 'amber' | 'gold' | 'mint';
+export interface EventCalendarEvent {
+    /** Unique event identifier. */
+    id: string;
+    /** The day the event falls on (YYYY-MM-DD). */
+    date: string;
+    /** Short label shown in the event pill. */
+    title: string;
+    /** Start time as already-formatted text like "09:30". Untimed events sort first. */
+    time?: string;
+    /** Accent for the pill's dot, from the core accent roles. Defaults to `neutral`. */
+    color?: EventCalendarColor;
+}
+/** Props owned by EventCalendar itself — everything else falls through to the root element. */
+type EventCalendarOwnProps = {
+    /** The events to place on the grid, including any that fall on the visible leading and trailing days of the neighbouring months. */
+    events?: EventCalendarEvent[];
+    /** Shown month (YYYY-MM) for controlled use. Pair with `onMonthChange`. */
+    month?: string;
+    /** Initially shown month (YYYY-MM) for uncontrolled use. Defaults to the current month. */
+    defaultMonth?: string;
+    /** Fires with the newly shown month (YYYY-MM) after prev/next navigation. */
+    onMonthChange?: (month: string) => void;
+    /** Event pills shown per day before the rest collapse into "+N more". */
+    maxEventsPerDay?: number;
+    /** Fires with the clicked event. Pills only render as buttons when this is set. */
+    onEventClick?: (event: EventCalendarEvent) => void;
+    /**
+     * Fires with the clicked day (YYYY-MM-DD) — from the day number, and from
+     * the "+N more" overflow row. Both only become buttons when this is set.
+     */
+    onDateClick?: (date: string) => void;
+    /** Trailing header slot, e.g. a "New event" Button. */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface EventCalendarProps extends EventCalendarOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof EventCalendarOwnProps> {
+}
+/**
+ * EventCalendar is the month-at-a-glance view: a full month grid with event
+ * pills on their days, an overflow row once a day is full, and prev/next
+ * month navigation. DatePicker selects a date; this one shows a schedule.
+ *
+ * The calendar owns no event data semantics — it places what it is given.
+ * Filtering, fetching, and what clicking an event means stay with the
+ * consumer.
+ */
+export declare const EventCalendar: React.ForwardRefExoticComponent<EventCalendarProps & React.RefAttributes<HTMLDivElement>>;
+export {};