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

package/src/components/list/List.jsx

@@ -0,0 +1,92 @@
+import { createContext, useContext } from "react";
+import "./list.css";
+import { Icon } from "../icon/Icon.jsx";
+
+const sizes = ["xs", "sm", "md", "lg", "xl"];
+const colors = ["default", "muted"];
+const variants = ["unordered", "ordered", "icon", "divider"];
+const spacings = ["sm", "md", "lg"];
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+
+function isResponsiveSize(size) {
+  return size && typeof size === "object" && !Array.isArray(size);
+}
+
+function resolveBaseSize(size) {
+  if (!isResponsiveSize(size)) return sizes.includes(size) ? size : "md";
+  return sizes.includes(size.xs) ? size.xs : "md";
+}
+
+function getResponsiveSizeStyle(size) {
+  if (!isResponsiveSize(size)) return {};
+  return breakpoints.slice(1).reduce((style, bp) => {
+    if (sizes.includes(size[bp])) {
+      style[`--a1-list-size-${bp}`] = `var(--semantic-font-size-body-${size[bp]})`;
+    }
+    return style;
+  }, {});
+}
+
+const ListContext = createContext({ icon: null, as: "ul", variant: "unordered" });
+
+export function List({
+  as: Component = "ul",
+  size = "md",
+  color = "default",
+  icon = null,
+  variant: variantProp,
+  marginBottom,
+  className = "",
+  style,
+  ...props
+}) {
+  const resolvedSize  = resolveBaseSize(size);
+  const resolvedColor = colors.includes(color) ? color  : "default";
+  const isOrdered     = Component === "ol";
+
+  const variant = variants.includes(variantProp)
+    ? variantProp
+    : isOrdered ? "ordered" : icon != null ? "icon" : "unordered";
+
+  const responsiveStyle = getResponsiveSizeStyle(size);
+  const resolvedStyle = Object.keys(responsiveStyle).length
+    ? { ...responsiveStyle, ...style }
+    : style;
+
+  const classes = [
+    "a1-list",
+    `a1-list--${resolvedSize}`,
+    `a1-list--${variant}`,
+    resolvedColor !== "default" && `a1-list--${resolvedColor}`,
+    spacings.includes(marginBottom) && `a1-list--mb-${marginBottom}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <ListContext.Provider value={{ icon, as: Component, variant }}>
+      <Component className={classes} style={resolvedStyle} {...props} />
+    </ListContext.Provider>
+  );
+}
+
+export function ListItem({ icon: itemIcon, className = "", children, ...props }) {
+  const { icon: listIcon, variant } = useContext(ListContext);
+  // undefined means "not passed" — fall back to list icon. null means explicit "no icon".
+  const resolvedIcon = itemIcon !== undefined ? itemIcon : listIcon;
+  const isDivider = variant === "divider";
+
+  return (
+    <li className={["a1-list-item", className].filter(Boolean).join(" ")} {...props}>
+      {!isDivider && (
+        resolvedIcon != null ? (
+          <Icon name={resolvedIcon} className="a1-list-item__marker" />
+        ) : (
+          <span className="a1-list-item__marker" aria-hidden="true" />
+        )
+      )}
+      <span className="a1-list-item__content">{children}</span>
+    </li>
+  );
+}

package/src/components/list/list.css

@@ -0,0 +1,178 @@
+/* ── Container ──────────────────────────────────────────────────────────────── */
+
+.a1-list--mb-sm { margin-bottom: var(--base-spacing-8); }
+.a1-list--mb-md { margin-bottom: var(--base-spacing-16); }
+.a1-list--mb-lg { margin-bottom: var(--base-spacing-24); }
+
+.a1-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-list-responsive-size, var(--a1-list-size, var(--semantic-font-size-body-md)));
+  font-weight: var(--component-paragraph-font-weight);
+  line-height: var(--component-paragraph-font-line-height);
+  color: var(--a1-list-color, var(--semantic-color-text-default));
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-list-gap, var(--base-spacing-4));
+}
+
+@media (--bp-sm-up) {
+  .a1-list {
+    --a1-list-responsive-size: var(--a1-list-size-sm, var(--a1-list-size));
+  }
+}
+
+@media (--bp-md-up) {
+  .a1-list {
+    --a1-list-responsive-size: var(--a1-list-size-md, var(--a1-list-size-sm, var(--a1-list-size)));
+  }
+}
+
+@media (--bp-lg-up) {
+  .a1-list {
+    --a1-list-responsive-size: var(--a1-list-size-lg, var(--a1-list-size-md, var(--a1-list-size-sm, var(--a1-list-size))));
+  }
+}
+
+@media (--bp-xl) {
+  .a1-list {
+    --a1-list-responsive-size: var(--a1-list-size-xl, var(--a1-list-size-lg, var(--a1-list-size-md, var(--a1-list-size-sm, var(--a1-list-size)))));
+  }
+}
+
+/* ── Size scale ─────────────────────────────────────────────────────────────── */
+
+.a1-list--xs { --a1-list-size: var(--semantic-font-size-body-xs); --a1-list-gap: var(--base-spacing-4); }
+.a1-list--sm { --a1-list-size: var(--semantic-font-size-body-sm); --a1-list-gap: var(--base-spacing-4); }
+.a1-list--md { --a1-list-size: var(--semantic-font-size-body-md); --a1-list-gap: var(--base-spacing-8); }
+.a1-list--lg { --a1-list-size: var(--semantic-font-size-body-lg); --a1-list-gap: var(--base-spacing-12); }
+.a1-list--xl { --a1-list-size: var(--semantic-font-size-body-xl); --a1-list-gap: var(--base-spacing-16); }
+
+/* ── Color ──────────────────────────────────────────────────────────────────── */
+
+.a1-list--muted { --a1-list-color: var(--semantic-color-text-muted); }
+
+/* ── Item ───────────────────────────────────────────────────────────────────── */
+
+.a1-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25em;
+}
+
+.a1-list-item__marker {
+  flex-shrink: 0;
+}
+
+.a1-list-item__content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Nested list: add top breathing room when a list follows text inside an item */
+.a1-list-item__content > .a1-list {
+  margin-top: var(--a1-list-gap, var(--base-spacing-4));
+}
+
+/* ── Unordered — bullet hierarchy ───────────────────────────────────────────── */
+
+/*
+ * Direct-child selectors scope each level's marker width to its own items only,
+ * preventing ordered-list counter styles from bleeding into nested unordered lists.
+ *
+ * margin-top positions the bullet at the cap-height of the first text line.
+ * For line-height 1.5: half-leading = 0.25em above em-square top;
+ * cap-height midpoint ≈ 0.35em into em-square → center at ~0.60em from line top.
+ * margin-top = center - half-bullet-height = 0.60em - 0.20em = 0.40em.
+ */
+
+/* Level 1 — filled disc */
+.a1-list--unordered > .a1-list-item > .a1-list-item__marker {
+  width: 1em;
+}
+
+.a1-list--unordered > .a1-list-item > .a1-list-item__marker::before {
+  content: "";
+  display: block;
+  width: 0.45em;
+  height: 0.45em;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.65;
+  margin-top: 0.48em;
+}
+
+/* Level 2 — open circle */
+.a1-list--unordered .a1-list--unordered > .a1-list-item > .a1-list-item__marker::before {
+  background: transparent;
+  border: 0.09em solid currentColor;
+  opacity: 0.65;
+}
+
+/* Level 3 — filled square */
+.a1-list--unordered .a1-list--unordered .a1-list--unordered > .a1-list-item > .a1-list-item__marker::before {
+  background: currentColor;
+  border: none;
+  border-radius: 0;
+  opacity: 0.65;
+}
+
+/* Level 4+ — bordered square */
+.a1-list--unordered .a1-list--unordered .a1-list--unordered .a1-list--unordered > .a1-list-item > .a1-list-item__marker::before {
+  background: transparent;
+  border: 0.09em solid currentColor;
+  border-radius: 0;
+  opacity: 0.65;
+}
+
+/* ── Ordered — CSS counter ──────────────────────────────────────────────────── */
+
+.a1-list--ordered {
+  counter-reset: a1-list;
+}
+
+/* Direct-child selector: only increment items that directly belong to this ordered list */
+.a1-list--ordered > .a1-list-item {
+  counter-increment: a1-list;
+}
+
+.a1-list--ordered > .a1-list-item > .a1-list-item__marker {
+  min-width: 1.5em;
+  text-align: right;
+  color: var(--semantic-color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.a1-list--ordered > .a1-list-item > .a1-list-item__marker::before {
+  content: counter(a1-list) ".";
+}
+
+/* ── Icon ───────────────────────────────────────────────────────────────────── */
+
+/*
+ * margin-top aligns the icon's optical center with the cap-height of the first
+ * text line, matching the disc bullet position. Material Symbols glyphs sit
+ * centrally within the em square, so offset = half-leading = ~0.25em.
+ */
+.a1-list--icon .a1-list-item__marker {
+  font-size: 1em;
+  color: var(--semantic-color-text-accent);
+  margin-top: 0.25em;
+}
+
+/* ── Divider ─────────────────────────────────────────────────────────────────── */
+
+.a1-list--divider {
+  gap: 0;
+}
+
+.a1-list--divider > .a1-list-item {
+  padding: var(--a1-list-gap, var(--base-spacing-4)) 0;
+  border-bottom: 1px solid var(--semantic-color-border-subtle);
+}
+
+.a1-list--divider > .a1-list-item:first-child {
+  border-top: 1px solid var(--semantic-color-border-subtle);
+}

package/src/components/menu/Menu.jsx

@@ -1,45 +1,278 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import "./menu.css";
+import { Divider } from "../divider/Divider.jsx";
+import { Icon } from "../icon/Icon.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
 
-export function Menu({ open, onClose, "aria-label": ariaLabel, children }) {
+const variants = ["default", "destructive"];
+const xsQuery = "(max-width: 480px)";
+const viewportMargin = 8;
+const focusableSelector = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",");
+
+function getFocusableElements(container) {
+  return [...container.querySelectorAll(focusableSelector)].filter((element) => {
+    if (element.getAttribute("aria-disabled") === "true") return false;
+    return element.getClientRects().length > 0;
+  });
+}
+
+/* ── Menu ────────────────────────────────────────────────────────────────── */
+
+export function Menu({
+  open,
+  onClose,
+  anchorRef,
+  "aria-label": ariaLabel,
+  className = "",
+  children,
+}) {
   const ref = useRef(null);
+  const fallbackAnchorRef = useRef(null);
+  const modalRef = useRef(false);
 
-  useEffect(() => {
+  const updatePosition = useCallback(() => {
+    const el = ref.current;
+    if (!el?.open) return;
+
+    if (window.matchMedia(xsQuery).matches) {
+      el.style.removeProperty("--a1-menu-top");
+      el.style.removeProperty("--a1-menu-left");
+      el.style.removeProperty("--a1-menu-max-height");
+      return;
+    }
+
+    const anchor = anchorRef?.current ?? fallbackAnchorRef.current;
+    const anchorRect = anchor?.getBoundingClientRect?.();
+    const menuRect = el.getBoundingClientRect();
+    const width = menuRect.width || 260;
+    const height = menuRect.height || 0;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const preferredLeft = anchorRect
+      ? anchorRect.left
+      : viewportWidth - width - viewportMargin;
+    const left = Math.min(
+      Math.max(viewportMargin, preferredLeft),
+      Math.max(viewportMargin, viewportWidth - width - viewportMargin),
+    );
+
+    const belowTop = anchorRect ? anchorRect.bottom + viewportMargin : viewportMargin;
+    const aboveTop = anchorRect ? anchorRect.top - height - viewportMargin : viewportMargin;
+    const belowSpace = viewportHeight - belowTop - viewportMargin;
+    const aboveSpace = anchorRect ? anchorRect.top - viewportMargin * 2 : 0;
+    const shouldPlaceAbove = height > belowSpace && aboveSpace > belowSpace;
+    const unclampedTop = shouldPlaceAbove ? aboveTop : belowTop;
+    const top = Math.min(
+      Math.max(viewportMargin, unclampedTop),
+      Math.max(viewportMargin, viewportHeight - height - viewportMargin),
+    );
+    const maxHeight = shouldPlaceAbove
+      ? Math.max(120, anchorRect.top - viewportMargin * 2)
+      : Math.max(120, viewportHeight - top - viewportMargin);
+
+    el.style.setProperty("--a1-menu-top", `${Math.round(top)}px`);
+    el.style.setProperty("--a1-menu-left", `${Math.round(left)}px`);
+    el.style.setProperty("--a1-menu-max-height", `${Math.floor(maxHeight)}px`);
+  }, [anchorRef]);
+
+  const openDialog = useCallback(() => {
     const el = ref.current;
     if (!el) return;
+
+    const shouldModal = window.matchMedia(xsQuery).matches;
+    if (el.open && modalRef.current === shouldModal) {
+      updatePosition();
+      return;
+    }
+
+    if (el.open) el.close();
+    if (shouldModal) {
+      el.showModal();
+    } else {
+      el.show();
+    }
+    modalRef.current = shouldModal;
+    updatePosition();
+    requestAnimationFrame(() => {
+      getFocusableElements(el)[0]?.focus();
+    });
+  }, [updatePosition]);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
     if (open) {
-      if (!el.open) el.showModal();
+      fallbackAnchorRef.current = anchorRef?.current ?? document.activeElement;
+      openDialog();
     } else if (el.open) {
       el.close();
+      modalRef.current = false;
+      el.style.removeProperty("--a1-menu-top");
+      el.style.removeProperty("--a1-menu-left");
+      el.style.removeProperty("--a1-menu-max-height");
     }
-  }, [open]);
+  }, [anchorRef, open, openDialog]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const onViewportChange = () => openDialog();
+    const onScroll = () => updatePosition();
+    window.addEventListener("resize", onViewportChange);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("resize", onViewportChange);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open, openDialog, updatePosition]);
 
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const onCancel = (e) => { e.preventDefault(); onClose?.(); };
-    // Backdrop clicks hit the dialog element directly
-    const onClick = (e) => { if (e.target === el) onClose?.(); };
+    const onClick  = (e) => { if (e.target === el) onClose?.(); };
     el.addEventListener("cancel", onCancel);
-    el.addEventListener("click", onClick);
+    el.addEventListener("click",  onClick);
     return () => {
       el.removeEventListener("cancel", onCancel);
-      el.removeEventListener("click", onClick);
+      el.removeEventListener("click",  onClick);
     };
   }, [onClose]);
 
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const onKeyDown = (e) => {
+      const el = ref.current;
+      if (!el?.open) return;
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose?.();
+        return;
+      }
+
+      if (e.key !== "Tab") return;
+
+      const focusableElements = getFocusableElements(el);
+      if (focusableElements.length === 0) {
+        e.preventDefault();
+        el.focus();
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (!el.contains(document.activeElement)) {
+        e.preventDefault();
+        (e.shiftKey ? lastElement : firstElement).focus();
+      } else if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose, open]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const onPointerDown = (e) => {
+      const el = ref.current;
+      const anchor = anchorRef?.current ?? fallbackAnchorRef.current;
+      if (!el || modalRef.current) return;
+      if (el.contains(e.target) || anchor?.contains?.(e.target)) return;
+      onClose?.();
+    };
+
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [anchorRef, onClose, open]);
+
   return (
-    <dialog ref={ref} className="a1-menu" aria-label={ariaLabel}>
+    <dialog
+      ref={ref}
+      className={["a1-menu", className].filter(Boolean).join(" ")}
+      aria-label={ariaLabel}
+      tabIndex={-1}
+    >
+      <IconButton
+        icon="close"
+        label="Close menu"
+        className="a1-menu__close"
+        onClick={onClose}
+      />
       {children}
     </dialog>
   );
 }
 
+/* ── MenuSection ─────────────────────────────────────────────────────────── */
+
 export function MenuSection({ label, children }) {
   return (
     <div className="a1-menu__section">
+      <Divider className="a1-menu__section-divider" space="xs" />
       {label && <p className="a1-menu__section-label">{label}</p>}
       {children}
     </div>
   );
 }
+
+/* ── MenuItem ────────────────────────────────────────────────────────────── */
+
+export function MenuItem({
+  children,
+  icon,
+  shortcut,
+  variant = "default",
+  active = false,
+  disabled = false,
+  href,
+  onClick,
+  className = "",
+  ...props
+}) {
+  const Component = href ? "a" : "button";
+  const resolvedVariant = variants.includes(variant) ? variant : "default";
+
+  const classes = [
+    "a1-menu-item",
+    resolvedVariant !== "default" && `a1-menu-item--${resolvedVariant}`,
+    active && "a1-menu-item--active",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <Component
+      className={classes}
+      href={disabled ? undefined : href}
+      type={!href ? "button" : undefined}
+      disabled={!href ? disabled : undefined}
+      aria-disabled={href && disabled ? true : undefined}
+      aria-current={active ? "page" : undefined}
+      tabIndex={href && disabled ? -1 : undefined}
+      onClick={disabled ? undefined : onClick}
+      {...props}
+    >
+      {icon && <Icon name={icon} className="a1-menu-item__icon" />}
+      <span className="a1-menu-item__label">{children}</span>
+      {shortcut && <kbd className="a1-menu-item__shortcut" aria-hidden="true">{shortcut}</kbd>}
+    </Component>
+  );
+}