@gtivr4/a1-design-system-react 0.1.0

package/src/components/page-layout/page-layout.css

@@ -0,0 +1,61 @@
+.a1-page-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--semantic-color-surface-page);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-page-layout__header {
+  flex-shrink: 0;
+}
+
+.a1-page-layout--sticky-header .a1-page-layout__header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.a1-page-layout__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: var(--component-page-layout-gap);
+}
+
+.a1-page-layout--sidebar-start .a1-page-layout__body {
+  flex-direction: row;
+}
+
+.a1-page-layout--sidebar-end .a1-page-layout__body {
+  flex-direction: row-reverse;
+}
+
+.a1-page-layout__sidebar {
+  flex-shrink: 0;
+  width: var(--component-page-layout-sidebar-width);
+}
+
+.a1-page-layout__sidebar:has(.a1-side-nav) {
+  display: flex;
+  width: auto;
+}
+
+.a1-page-layout__main {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.a1-page-layout__footer {
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .a1-page-layout__body {
+    flex-direction: column !important;
+  }
+
+  .a1-page-layout__sidebar {
+    width: 100%;
+  }
+}

package/src/components/pagination/Pagination.jsx

@@ -0,0 +1,64 @@
+import "./pagination.css";
+import { Icon } from "../icon/Icon.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
+
+function getPageItems(page, totalPages, siblings) {
+  const left  = Math.max(2, page - siblings);
+  const right = Math.min(totalPages - 1, page + siblings);
+
+  const items = [1];
+  if (left > 2)            items.push("start-ellipsis");
+  for (let i = left; i <= right; i++) items.push(i);
+  if (right < totalPages - 1) items.push("end-ellipsis");
+  if (totalPages > 1)      items.push(totalPages);
+
+  return items;
+}
+
+export function Pagination({
+  page,
+  totalPages,
+  onChange,
+  siblings = 1,
+  size = "md",
+}) {
+  const items = getPageItems(page, totalPages, siblings);
+
+  return (
+    <nav aria-label="Pagination" className={`a1-pagination a1-pagination--${size}`}>
+      <IconButton
+        icon="chevron_left"
+        label="Previous page"
+        onClick={() => onChange?.(page - 1)}
+        disabled={page <= 1}
+        className="a1-pagination__item"
+      />
+
+      {items.map((item) =>
+        typeof item === "string" ? (
+          <span key={item} className="a1-pagination__ellipsis" aria-hidden="true">
+            …
+          </span>
+        ) : (
+          <button
+            key={item}
+            className="a1-pagination__item"
+            onClick={() => item !== page && onChange?.(item)}
+            aria-label={`Page ${item}`}
+            aria-current={item === page ? "page" : undefined}
+          >
+            {item}
+          </button>
+        )
+      )}
+
+      <IconButton
+        icon="chevron_right"
+        label="Next page"
+        onClick={() => onChange?.(page + 1)}
+        disabled={page >= totalPages}
+        className="a1-pagination__item"
+      />
+    </nav>
+  );
+}

package/src/components/pagination/pagination.css

@@ -0,0 +1,85 @@
+/* ─── Pagination ──────────────────────────────────────────────────────────── */
+
+.a1-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--component-pagination-gap);
+}
+
+/* ─── Item (shared between page buttons and prev/next) ────────────────────── */
+
+.a1-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--a1-pagination-size);
+  height: var(--a1-pagination-size);
+  padding: 0 var(--base-spacing-4);
+  border: var(--component-pagination-border-width) solid transparent;
+  border-radius: var(--base-radius-control);
+  background: transparent;
+  color: var(--semantic-color-text-default);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-pagination-font-size);
+  font-weight: var(--component-pagination-font-weight-default);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--semantic-motion-duration-fast), border-color var(--semantic-motion-duration-fast), color var(--semantic-motion-duration-fast);
+}
+
+.a1-pagination__item:hover:not([aria-current="page"]):not(:disabled) {
+  background: var(--semantic-color-surface-panel);
+  border-color: var(--semantic-color-border-default);
+}
+
+.a1-pagination__item:focus-visible {
+  outline: var(--component-pagination-focus-ring-width) solid var(--semantic-color-action-background);
+  outline-offset: var(--component-pagination-focus-ring-offset);
+}
+
+.a1-pagination__item[aria-current="page"] {
+  background: var(--semantic-color-action-background);
+  border-color: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-foreground);
+  font-weight: var(--component-pagination-font-weight-active);
+  cursor: default;
+}
+
+.a1-pagination__item:disabled {
+  opacity: var(--component-pagination-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Prev / next icons inherit item size */
+.a1-pagination__item .a1-icon {
+  font-size: calc(var(--a1-pagination-size) * 0.5);
+}
+
+/* ─── Ellipsis ────────────────────────────────────────────────────────────── */
+
+.a1-pagination__ellipsis {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: var(--a1-pagination-size);
+  height: var(--a1-pagination-size);
+  padding-bottom: var(--component-pagination-ellipsis-padding-bottom);
+  color: var(--semantic-color-text-muted);
+  font-size: var(--a1-pagination-font-size);
+  font-family: var(--component-paragraph-font-family);
+  user-select: none;
+}
+
+/* ─── Sizes ───────────────────────────────────────────────────────────────── */
+
+.a1-pagination--md {
+  --a1-pagination-size: var(--component-pagination-item-size);
+  --a1-pagination-font-size: var(--semantic-font-size-body-sm);
+}
+
+.a1-pagination--sm {
+  --a1-pagination-size: var(--component-pagination-item-size-sm);
+  --a1-pagination-font-size: var(--semantic-font-size-body-xs);
+}

package/src/components/paragraph/Paragraph.jsx

@@ -0,0 +1,26 @@
+import "./paragraph.css";
+
+const sizes = ["xs", "sm", "md", "lg", "xl"];
+const colors = ["default", "muted"];
+
+export function Paragraph({
+  as: Component = "p",
+  size = "md",
+  color = "default",
+  className = "",
+  ...props
+}) {
+  const resolvedSize = sizes.includes(size) ? size : "md";
+  const resolvedColor = colors.includes(color) ? color : "default";
+
+  const classes = [
+    "a1-paragraph",
+    `a1-paragraph--${resolvedSize}`,
+    resolvedColor !== "default" && `a1-paragraph--${resolvedColor}`,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return <Component className={classes} {...props} />;
+}

package/src/components/paragraph/paragraph.css

@@ -0,0 +1,16 @@
+.a1-paragraph {
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-paragraph-size);
+  font-weight: var(--component-paragraph-font-weight);
+  line-height: var(--component-paragraph-font-line-height);
+  color: var(--a1-paragraph-color, var(--semantic-color-text-default));
+}
+
+.a1-paragraph--xs { --a1-paragraph-size: var(--semantic-font-size-body-xs); }
+.a1-paragraph--sm { --a1-paragraph-size: var(--semantic-font-size-body-sm); }
+.a1-paragraph--md { --a1-paragraph-size: var(--semantic-font-size-body-md); }
+.a1-paragraph--lg { --a1-paragraph-size: var(--semantic-font-size-body-lg); }
+.a1-paragraph--xl { --a1-paragraph-size: var(--semantic-font-size-body-xl); }
+
+.a1-paragraph--muted { --a1-paragraph-color: var(--semantic-color-text-muted); }

package/src/components/segmented-control/SegmentedControl.jsx

@@ -0,0 +1,77 @@
+import "./segmented.css";
+import { Icon } from "../icon/Icon.jsx";
+
+function normalize(opt) {
+  return typeof opt === "string" ? { value: opt, label: opt } : opt;
+}
+
+export function SegmentedControl({
+  options = [],
+  value,
+  onChange,
+  fullWidth = false,
+}) {
+  const items = options.map(normalize);
+
+  const handleKeyDown = (e) => {
+    const els = Array.from(e.currentTarget.querySelectorAll('[role="radio"]'));
+    const idx = els.indexOf(document.activeElement);
+    if (idx === -1) return;
+
+    let next = -1;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      next = (idx + 1) % els.length;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      next = (idx - 1 + els.length) % els.length;
+    } else if (e.key === "Home") {
+      next = 0;
+    } else if (e.key === "End") {
+      next = els.length - 1;
+    }
+
+    if (next !== -1) {
+      e.preventDefault();
+      els[next].focus();
+      onChange?.(items[next].value);
+    }
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      className={[
+        "a1-segmented",
+        fullWidth && "a1-segmented--full-width",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      onKeyDown={handleKeyDown}
+    >
+      {items.map((opt) => {
+        const iconOnly = Boolean(opt.icon) && !opt.label;
+        const isSelected = value === opt.value;
+
+        return (
+          <button
+            key={opt.value}
+            role="radio"
+            type="button"
+            aria-checked={isSelected}
+            aria-label={iconOnly ? (opt.ariaLabel ?? opt.value) : undefined}
+            tabIndex={isSelected ? 0 : -1}
+            className={[
+              "a1-segment",
+              iconOnly && "a1-segment--icon-only",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            onClick={() => onChange?.(opt.value)}
+          >
+            {opt.icon && <Icon name={opt.icon} className="a1-segment__icon" />}
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/segmented-control/segmented.css

@@ -0,0 +1,76 @@
+/* ─── Segmented control ───────────────────────────────────────────────────── */
+
+.a1-segmented {
+  display: inline-flex;
+  align-items: stretch;
+  background: var(--semantic-color-surface-raised);
+  border: var(--component-segmented-border-width) solid var(--semantic-color-border-default);
+  border-radius: var(--base-radius-control);
+  padding: var(--component-segmented-padding);
+  gap: var(--component-segmented-gap);
+}
+
+.a1-segmented--full-width {
+  display: flex;
+}
+
+/* ─── Segment button ──────────────────────────────────────────────────────── */
+
+.a1-segment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--base-spacing-8);
+  border: none;
+  /* Inner radius sits flush inside the container */
+  border-radius: calc(var(--base-radius-control) - var(--component-segmented-padding));
+  background: transparent;
+  color: var(--semantic-color-text-muted);
+  font-family: var(--component-paragraph-font-family);
+  font-weight: var(--component-segmented-font-weight-default);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--semantic-motion-duration-fast), color var(--semantic-motion-duration-fast), box-shadow var(--semantic-motion-duration-fast);
+}
+
+.a1-segment:hover:not([aria-checked="true"]) {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-segment[aria-checked="true"] {
+  background: var(--semantic-color-surface-page);
+  color: var(--semantic-color-text-default);
+  font-weight: var(--component-segmented-font-weight-active);
+  box-shadow: var(--semantic-shadow-xs);
+}
+
+.a1-segment:focus-visible {
+  outline: var(--component-segmented-focus-ring-width) solid var(--semantic-color-action-background);
+  outline-offset: var(--component-segmented-focus-ring-offset);
+}
+
+/* ─── Padding & size ──────────────────────────────────────────────────────── */
+
+.a1-segment {
+  padding: var(--component-segmented-segment-padding-block)
+           var(--component-segmented-segment-padding-inline);
+  font-size: var(--semantic-font-size-body-sm);
+}
+
+/* ─── Icon ────────────────────────────────────────────────────────────────── */
+
+.a1-segment__icon {
+  font-size: 1em;
+}
+
+/* Icon-only: match inline padding to block padding so the segment is square */
+.a1-segment--icon-only {
+  padding-inline: var(--component-segmented-segment-padding-block);
+}
+
+/* ─── Full width ──────────────────────────────────────────────────────────── */
+
+.a1-segmented--full-width .a1-segment {
+  flex: 1;
+}

package/src/components/side-nav/SideNav.jsx

@@ -0,0 +1,208 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import "./scrim.css";
+import "./side-nav.css";
+import { Icon } from "../icon/Icon.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
+
+const DepthCtx = createContext(0);
+const SideNavCtx = createContext({ collapsed: false, onExpand: null });
+
+/**
+ * A leaf navigation item — renders an icon and label as a link or button.
+ * In collapsed state (lg+), the label is hidden and used as a native tooltip.
+ * @param {object} props
+ * @param {"a"|"button"|string} [props.as="a"] - Underlying HTML element
+ * @param {string} [props.icon] - Material Symbols icon name (recommended for collapsed nav)
+ * @param {string} props.label - Visible label text
+ * @param {boolean} [props.active] - Marks this item as the current page
+ * @param {string} [props.className]
+ */
+export function SideNavItem({ as: Component = "a", icon, label, active, className = "", ...props }) {
+  const depth = useContext(DepthCtx);
+  const { collapsed } = useContext(SideNavCtx);
+
+  const classes = [
+    "a1-side-nav-item",
+    active && "a1-side-nav-item--active",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <Component
+      className={classes}
+      style={{ "--a1-side-nav-depth": collapsed ? 0 : depth }}
+      aria-current={active ? "page" : undefined}
+      title={collapsed ? label : undefined}
+      {...props}
+    >
+      {icon && <Icon name={icon} className="a1-side-nav-item__icon" />}
+      <span className="a1-side-nav-item__label">{label}</span>
+    </Component>
+  );
+}
+
+/**
+ * An expandable group — a trigger that reveals nested SideNavItems or SideNavGroups.
+ * When the sidebar is collapsed (lg+), clicking the trigger expands the sidebar instead.
+ * Supports uncontrolled (`defaultOpen`) and controlled (`open` + `onOpenChange`) usage.
+ * @param {object} props
+ * @param {string} [props.icon] - Material Symbols icon name (recommended for collapsed nav)
+ * @param {string} props.label - Trigger label text
+ * @param {boolean} [props.defaultOpen=false] - Initial expanded state (uncontrolled)
+ * @param {boolean} [props.open] - Controlled expanded state
+ * @param {function} [props.onOpenChange] - Called with next boolean when toggled
+ * @param {React.ReactNode} props.children - Nested SideNavItems or SideNavGroups
+ * @param {string} [props.className]
+ */
+export function SideNavGroup({ icon, label, defaultOpen = false, open: controlledOpen, onOpenChange, children, className = "", ...props }) {
+  const depth = useContext(DepthCtx);
+  const { collapsed, onExpand } = useContext(SideNavCtx);
+  const isControlled = controlledOpen !== undefined;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  function toggle() {
+    if (collapsed) { onExpand?.(); return; }
+    if (!isControlled) setInternalOpen(v => !v);
+    onOpenChange?.(!isOpen);
+  }
+
+  const triggerClasses = [
+    "a1-side-nav-item",
+    "a1-side-nav-group__trigger",
+    isOpen && "a1-side-nav-group__trigger--open",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const childrenClasses = [
+    "a1-side-nav-group__children",
+    isOpen && "a1-side-nav-group__children--open",
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className="a1-side-nav-group" {...props}>
+      <button
+        type="button"
+        className={triggerClasses}
+        style={{ "--a1-side-nav-depth": collapsed ? 0 : depth }}
+        aria-expanded={collapsed ? undefined : isOpen}
+        title={collapsed ? label : undefined}
+        onClick={toggle}
+      >
+        {icon && <Icon name={icon} className="a1-side-nav-item__icon" />}
+        <span className="a1-side-nav-item__label">{label}</span>
+        <Icon name="chevron_right" className="a1-side-nav-group__chevron" />
+      </button>
+      <div className={childrenClasses}>
+        <DepthCtx.Provider value={depth + 1}>
+          <div className="a1-side-nav-group__children-inner">
+            {children}
+          </div>
+        </DepthCtx.Provider>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Side navigation shell with responsive controls, header, nav area, and footer slots.
+ *
+ * Responsive behavior:
+ * - xs (≤480px): full-viewport-width fixed overlay; built-in close (✕) button
+ * - sm/md (481–1024px): fixed-width overlay with scrim; built-in close (✕) button
+ * - lg/xl (≥1025px): persistent in the document flow; built-in collapse (‹/›) toggle
+ *
+ * The close/collapse button is rendered inline with the header content.
+ *
+ * @param {object} props
+ * @param {React.ReactNode | ((collapsed: boolean) => React.ReactNode)} [props.header]
+ *   Header content. Pass a render function to receive the current collapsed state,
+ *   e.g. `header={(collapsed) => <MyLogo collapsed={collapsed} />}`.
+ * @param {React.ReactNode} [props.footer] - Below nav items; hidden when collapsed
+ * @param {React.ReactNode} props.children - SideNavItem and SideNavGroup elements
+ * @param {boolean} [props.open=false] - Controls overlay visibility on xs/sm/md
+ * @param {function} [props.onClose] - Called when scrim, Escape, or the close button is triggered
+ * @param {boolean} [props.defaultCollapsed=false] - Initial collapsed state for lg/xl (uncontrolled)
+ * @param {boolean} [props.collapsed] - Controlled collapsed state for lg/xl
+ * @param {function} [props.onCollapsedChange] - Called with next boolean when collapsed state changes
+ * @param {"start"|"end"} [props.placement="start"] - Side of the viewport/layout where the nav appears
+ * @param {string} [props.className]
+ */
+export function SideNav({
+  header, footer, children,
+  open = false, onClose,
+  collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange,
+  placement = "start",
+  className = "", ...props
+}) {
+  const isCollapsedControlled = controlledCollapsed !== undefined;
+  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+  const isCollapsed = isCollapsedControlled ? controlledCollapsed : internalCollapsed;
+
+  function toggleCollapse() {
+    if (!isCollapsedControlled) setInternalCollapsed(v => !v);
+    onCollapsedChange?.(!isCollapsed);
+  }
+
+  function handleExpand() {
+    if (!isCollapsedControlled) setInternalCollapsed(false);
+    onCollapsedChange?.(false);
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => { if (e.key === "Escape") onClose?.(); };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  const resolvedHeader = typeof header === "function" ? header(isCollapsed) : header;
+
+  const navClasses = [
+    "a1-side-nav",
+    `a1-side-nav--placement-${placement}`,
+    open && "a1-side-nav--open",
+    isCollapsed && "a1-side-nav--collapsed",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const collapseIcon = placement === "end"
+    ? (isCollapsed ? "chevron_left" : "chevron_right")
+    : (isCollapsed ? "chevron_right" : "chevron_left");
+
+  return (
+    <>
+      <div
+        className={`a1-scrim a1-side-nav__scrim${open ? " a1-scrim--visible" : ""}`}
+        aria-hidden="true"
+        onClick={onClose}
+      />
+      <nav className={navClasses} {...props}>
+        {/* Header row: logo/content + inline close or collapse button */}
+        <div className="a1-side-nav__header-row">
+          {resolvedHeader && (
+            <div className="a1-side-nav__header-content">{resolvedHeader}</div>
+          )}
+          <IconButton
+            icon="close"
+            label="Close navigation"
+            className="a1-side-nav__close-btn"
+            onClick={onClose}
+          />
+          <IconButton
+            icon={collapseIcon}
+            label={isCollapsed ? "Expand navigation" : "Collapse navigation"}
+            className="a1-side-nav__collapse-btn"
+            onClick={toggleCollapse}
+          />
+        </div>
+
+        <SideNavCtx.Provider value={{ collapsed: isCollapsed, onExpand: handleExpand }}>
+          <div className="a1-side-nav__nav">{children}</div>
+        </SideNavCtx.Provider>
+
+        {footer && <div className="a1-side-nav__footer">{footer}</div>}
+      </nav>
+    </>
+  );
+}

package/src/components/side-nav/scrim.css

@@ -0,0 +1,17 @@
+/* ── Scrim overlay — shared by Dialog (::backdrop) and SideNav ────────── */
+
+.a1-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 199;
+  background: var(--component-scrim-color);
+  backdrop-filter: blur(var(--component-scrim-blur));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 250ms ease;
+}
+
+.a1-scrim--visible {
+  opacity: 1;
+  pointer-events: auto;
+}