@gtivr4/a1-design-system-react 0.1.0 → 0.2.3

package/src/components/data-table/data-table.css

@@ -0,0 +1,425 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   DataTable
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Wrapper ─────────────────────────────────────────────────────────────── */
+
+.a1-data-table-wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-16);
+}
+
+.a1-data-table-sort {
+  display: none;
+}
+
+.a1-data-table-bulk-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--base-spacing-12);
+  padding: var(--base-spacing-8) var(--base-spacing-12);
+  border: var(--component-data-table-border-width) solid var(--semantic-color-border-subtle);
+  border-radius: var(--component-card-border-radius);
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-data-table-bulk-actions__count {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--component-data-table-header-font-weight);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-data-table-bulk-actions__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+}
+
+/* ── Scroll container ────────────────────────────────────────────────────── */
+
+.a1-data-table-scroll {
+  border: var(--component-data-table-border-width) solid var(--semantic-color-border-subtle);
+  border-radius: var(--component-card-border-radius);
+}
+
+/* Opt-in horizontal scroll — add scrollable prop to DataTable */
+.a1-data-table-scroll--scrollable {
+  overflow-x: auto;
+}
+
+/* ── Table ───────────────────────────────────────────────────────────────── */
+
+.a1-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--component-data-table-density-default-font-size);
+  color: var(--semantic-color-text-default);
+}
+
+/* ── Caption ─────────────────────────────────────────────────────────────── */
+
+.a1-data-table caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Header ──────────────────────────────────────────────────────────────── */
+
+.a1-data-table th {
+  padding: var(--component-data-table-density-default-cell-padding-block)
+    var(--component-data-table-density-default-cell-padding-inline);
+  text-align: start;
+  font-weight: var(--component-data-table-header-font-weight);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-muted);
+  white-space: nowrap;
+  background: var(--semantic-color-surface-panel);
+  border-bottom: var(--component-data-table-border-width) solid var(--semantic-color-border-subtle);
+  position: sticky;
+  top: 0;
+}
+
+.a1-data-table th:first-child {
+  border-start-start-radius: calc(var(--component-card-border-radius) - 1px);
+}
+
+.a1-data-table th:last-child {
+  border-start-end-radius: calc(var(--component-card-border-radius) - 1px);
+}
+
+.a1-data-table__select-header,
+.a1-data-table__select-cell {
+  width: 1%;
+}
+
+.a1-data-table__checkbox {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--semantic-color-action-background);
+  cursor: pointer;
+}
+
+.a1-data-table__checkbox:focus-visible {
+  outline: var(--component-data-table-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: var(--component-data-table-focus-ring-offset);
+}
+
+.a1-data-table tbody tr[data-selected="true"] td {
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-data-table tbody tr[data-selectable-row="true"] {
+  cursor: pointer;
+}
+
+.a1-data-table tbody tr[data-selectable-row="true"]:hover td {
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-data-table tbody tr[data-selectable-row="true"]:active td {
+  background: var(--semantic-color-surface-raised);
+}
+
+.a1-data-table th[aria-sort="ascending"],
+.a1-data-table th[aria-sort="descending"] {
+  color: var(--semantic-color-text-default);
+}
+
+.a1-data-table__sort-button {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  gap: var(--base-spacing-4);
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.a1-data-table__sort-button:hover {
+  color: var(--semantic-color-text-default);
+}
+
+.a1-data-table__sort-button:focus-visible {
+  outline: var(--component-data-table-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: var(--component-data-table-focus-ring-offset);
+  border-radius: var(--base-radius-sm);
+}
+
+.a1-data-table__sort-icon {
+  flex-shrink: 0;
+  font-size: 1.125em;
+  opacity: 0.72;
+}
+
+.a1-data-table th[aria-sort="none"] .a1-data-table__sort-icon {
+  opacity: 0.44;
+}
+
+/* ── Column alignment ────────────────────────────────────────────────────── */
+
+.a1-data-table th[data-align="end"],
+.a1-data-table td[data-align="end"] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.a1-data-table th[data-align="center"],
+.a1-data-table td[data-align="center"] {
+  text-align: center;
+}
+
+/* ── Cells ───────────────────────────────────────────────────────────────── */
+
+.a1-data-table td {
+  padding: var(--component-data-table-density-default-cell-padding-block)
+    var(--component-data-table-density-default-cell-padding-inline);
+  vertical-align: middle;
+  border-bottom: var(--component-data-table-border-width) solid var(--semantic-color-border-subtle);
+}
+
+.a1-data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* ── Zebra striping ──────────────────────────────────────────────────────── */
+
+.a1-data-table--zebra tbody tr:nth-child(even) td {
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-data-table--zebra tbody tr[data-selectable-row="true"]:hover td {
+  background: var(--semantic-color-surface-raised);
+}
+
+/* ── Density: compact ────────────────────────────────────────────────────── */
+
+.a1-data-table--compact {
+  font-size: var(--component-data-table-density-compact-font-size);
+}
+
+.a1-data-table--compact th,
+.a1-data-table--compact td {
+  padding: var(--component-data-table-density-compact-cell-padding-block)
+    var(--component-data-table-density-compact-cell-padding-inline);
+}
+
+.a1-data-table--compact caption {
+  padding: var(--component-data-table-density-compact-cell-padding-block)
+    var(--component-data-table-density-compact-cell-padding-inline);
+}
+
+/* ── Density: comfortable ────────────────────────────────────────────────── */
+
+.a1-data-table--comfortable {
+  font-size: var(--component-data-table-density-comfortable-font-size);
+}
+
+.a1-data-table--comfortable th,
+.a1-data-table--comfortable td {
+  padding: var(--component-data-table-density-comfortable-cell-padding-block)
+    var(--component-data-table-density-comfortable-cell-padding-inline);
+}
+
+.a1-data-table--comfortable caption {
+  padding: var(--component-data-table-density-comfortable-cell-padding-block)
+    var(--component-data-table-density-comfortable-cell-padding-inline);
+}
+
+/* ── Avatar cell ─────────────────────────────────────────────────────────── */
+
+.a1-data-table__avatar-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-10);
+}
+
+.a1-data-table__avatar {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9999px;
+  background: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-foreground);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  user-select: none;
+}
+
+.a1-data-table--compact .a1-data-table__avatar {
+  width: 22px;
+  height: 22px;
+  font-size: 9px;
+}
+
+.a1-data-table__actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--base-spacing-8);
+}
+
+/* ── Empty state ─────────────────────────────────────────────────────────── */
+
+.a1-data-table__empty {
+  padding: var(--base-spacing-48) var(--base-spacing-24);
+  display: flex;
+  justify-content: center;
+}
+
+/* ── Pagination footer ───────────────────────────────────────────────────── */
+
+.a1-data-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--base-spacing-12);
+  flex-wrap: wrap;
+}
+
+.a1-data-table-footer__count {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-muted);
+  white-space: nowrap;
+}
+
+/* ── Responsive — card-flip pattern ──────────────────────────────────────── */
+/* Each row becomes a labeled card. thead is visually hidden (still accessible). */
+
+@media (max-width: 640px) {
+  .a1-data-table-bulk-actions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .a1-data-table-sort {
+    display: block;
+  }
+
+  .a1-data-table-scroll {
+    border: none;
+    border-radius: 0;
+  }
+
+  .a1-data-table-scroll--scrollable {
+    overflow-x: visible; /* card layout doesn't need horizontal scroll */
+  }
+
+  .a1-data-table,
+  .a1-data-table thead,
+  .a1-data-table tbody,
+  .a1-data-table tr,
+  .a1-data-table td {
+    display: block;
+  }
+
+  /* Visually hide header row but keep it accessible for screen readers */
+  .a1-data-table thead tr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .a1-data-table tbody tr {
+    border: var(--component-data-table-border-width) solid var(--semantic-color-border-subtle);
+    border-radius: var(--component-card-border-radius);
+    margin-bottom: var(--base-spacing-12);
+    overflow: hidden;
+  }
+
+  .a1-data-table tbody tr:last-child {
+    margin-bottom: 0;
+  }
+
+  .a1-data-table td {
+    display: flex;
+    align-items: center;
+    gap: var(--base-spacing-12);
+    border-bottom: var(--component-data-table-border-width) solid var(--semantic-color-border-subtle);
+    padding: var(--component-data-table-density-default-cell-padding-block)
+      var(--component-data-table-density-default-cell-padding-inline);
+  }
+
+  .a1-data-table td > :not(.a1-data-table__avatar-cell):not(.a1-data-table__actions) {
+    min-width: 0;
+  }
+
+  .a1-data-table__actions {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .a1-data-table td:last-child {
+    border-bottom: none;
+  }
+
+  .a1-data-table__select-cell {
+    width: auto;
+  }
+
+  /* Column label shown before each cell value */
+  .a1-data-table td::before {
+    content: attr(data-label);
+    flex-shrink: 0;
+    min-width: 110px;
+    font-weight: var(--component-data-table-header-font-weight);
+    font-size: var(--semantic-font-size-body-sm);
+    color: var(--semantic-color-text-muted);
+  }
+
+  /* Numeric/end-aligned cells reset to start in card mode */
+  .a1-data-table td[data-align="end"] {
+    text-align: start;
+  }
+
+  /* Zebra has no meaning in card mode */
+  .a1-data-table--zebra tbody tr:nth-child(even) td {
+    background: transparent;
+  }
+
+  /* Density variants: compact cell padding in mobile */
+  .a1-data-table--compact td {
+    padding: var(--component-data-table-density-compact-cell-padding-block)
+      var(--component-data-table-density-compact-cell-padding-inline);
+  }
+
+  .a1-data-table--comfortable td {
+    padding: var(--component-data-table-density-comfortable-cell-padding-block)
+      var(--component-data-table-density-comfortable-cell-padding-inline);
+  }
+
+  .a1-data-table-footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/src/components/dialog/Dialog.jsx

@@ -1,17 +1,31 @@
 import { useEffect, useRef } from "react";
 import "./dialog.css";
 import { IconButton } from "../icon-button/IconButton.jsx";
+import { ButtonContainer } from "../button-container/ButtonContainer.jsx";
+
+const FOCUSABLE_SELECTORS = [
+  "button:not([disabled])",
+  "[href]",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
 
 export function Dialog({ open = false, onClose, title, footer, children, ...props }) {
   const ref = useRef(null);
+  const triggerRef = useRef(null);
 
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
     if (open) {
+      triggerRef.current = document.activeElement;
       if (!el.open) el.showModal();
     } else if (el.open) {
       el.close();
+      triggerRef.current?.focus();
+      triggerRef.current = null;
     }
   }, [open]);
 
@@ -26,6 +40,31 @@ export function Dialog({ open = false, onClose, title, footer, children, ...prop
     return () => el.removeEventListener("cancel", handleCancel);
   }, [onClose]);
 
+  useEffect(() => {
+    const el = ref.current;
+    if (!open || !el) return;
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const focusable = [...el.querySelectorAll(FOCUSABLE_SELECTORS)];
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    el.addEventListener("keydown", handleKeyDown);
+    return () => el.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+
   return (
     <dialog ref={ref} className="a1-dialog" {...props}>
       <div className="a1-dialog__header">
@@ -37,8 +76,12 @@ export function Dialog({ open = false, onClose, title, footer, children, ...prop
           className="a1-dialog__close"
         />
       </div>
-      <div className="a1-dialog__body">{children}</div>
-      {footer && <div className="a1-dialog__footer">{footer}</div>}
+      <div className="a1-dialog__body" tabIndex={0}>{children}</div>
+      {footer && (
+        <div className="a1-dialog__footer">
+          <ButtonContainer align="end">{footer}</ButtonContainer>
+        </div>
+      )}
     </dialog>
   );
 }

package/src/components/dialog/dialog.css

@@ -6,7 +6,7 @@
   background: var(--semantic-color-surface-page);
   box-shadow: var(--component-dialog-shadow);
   color: var(--semantic-color-text-default);
-  width: min(560px, calc(100vw - var(--base-spacing-64)));
+  width: min(var(--component-dialog-width), calc(100vw - var(--base-spacing-64)));
   max-height: calc(100dvh - var(--base-spacing-64));
   overflow: hidden;
 }
@@ -50,9 +50,18 @@
 }
 
 .a1-dialog__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--base-spacing-12);
   padding-top: var(--base-spacing-16);
   border-top: var(--component-dialog-footer-border-width) solid var(--semantic-color-border-subtle);
 }
+
+@media (--bp-sm-down) {
+  .a1-dialog {
+    padding-inline: var(--base-spacing-20);
+  }
+}
+
+@media (--bp-xs) {
+  .a1-dialog {
+    width: calc(100vw - var(--base-spacing-32));
+  }
+}

package/src/components/divider/Divider.jsx

@@ -0,0 +1,64 @@
+import "./divider.css";
+
+const orientations = ["horizontal", "vertical"];
+const variants = ["subtle", "strong", "accent", "dashed", "dotted"];
+const sizes = ["xs", "sm", "md", "lg"];
+const spacing = ["none", "xs", "sm", "md", "lg", "xl", "xxl"];
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+
+function isResponsiveOrientation(orientation) {
+  return orientation !== null && typeof orientation === "object" && !Array.isArray(orientation);
+}
+
+function resolveBaseOrientation(orientation) {
+  if (!isResponsiveOrientation(orientation)) {
+    return orientations.includes(orientation) ? orientation : "horizontal";
+  }
+  return orientations.includes(orientation.xs) ? orientation.xs : "horizontal";
+}
+
+function getOrientationClasses(orientation) {
+  if (!isResponsiveOrientation(orientation)) {
+    const resolved = resolveBaseOrientation(orientation);
+    return [`a1-divider--${resolved}`];
+  }
+
+  let lastKnown = resolveBaseOrientation(orientation);
+  return breakpoints.map((bp) => {
+    if (orientations.includes(orientation[bp])) lastKnown = orientation[bp];
+    return `a1-divider--${bp}-${lastKnown === "horizontal" ? "h" : "v"}`;
+  });
+}
+
+export function Divider({
+  orientation = "horizontal",
+  variant = "subtle",
+  size = "xs",
+  space = "sm",
+  decorative = true,
+  className = "",
+  ...props
+}) {
+  const resolvedVariant = variants.includes(variant) ? variant : "subtle";
+  const resolvedSize = sizes.includes(size) ? size : "xs";
+  const resolvedSpace = spacing.includes(space) ? space : "sm";
+  const resolvedOrientation = resolveBaseOrientation(orientation);
+
+  const classes = [
+    "a1-divider",
+    ...getOrientationClasses(orientation),
+    `a1-divider--${resolvedVariant}`,
+    `a1-divider--${resolvedSize}`,
+    `a1-divider--space-${resolvedSpace}`,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <hr
+      className={classes}
+      aria-orientation={decorative ? undefined : resolvedOrientation}
+      role={decorative ? "presentation" : "separator"}
+      {...props}
+    />
+  );
+}