@gtivr4/a1-design-system-react 0.1.0

package/src/components/link/Link.jsx

@@ -0,0 +1,41 @@
+import "./link.css";
+import { Icon } from "../icon/Icon.jsx";
+
+const sizes = ["xs", "sm", "md", "lg", "xl"];
+const weights = ["normal", "medium", "semibold", "bold"];
+const iconPositions = ["start", "end"];
+
+export function Link({
+  as: Component = "a",
+  size,
+  weight,
+  icon,
+  iconPosition = "start",
+  className = "",
+  children,
+  ...props
+}) {
+  const resolvedSize = sizes.includes(size) ? size : null;
+  const resolvedWeight = weights.includes(weight) ? weight : null;
+  const resolvedPosition = iconPositions.includes(iconPosition) ? iconPosition : "start";
+
+  const classes = [
+    "a1-link",
+    resolvedSize && `a1-link--${resolvedSize}`,
+    resolvedWeight && `a1-link--${resolvedWeight}`,
+    icon && "a1-link--has-icon",
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const iconEl = icon ? <Icon name={icon} className="a1-link__icon" /> : null;
+
+  return (
+    <Component className={classes} {...props}>
+      {resolvedPosition === "start" && iconEl}
+      <span className="a1-link__text">{children}</span>
+      {resolvedPosition === "end" && iconEl}
+    </Component>
+  );
+}

package/src/components/link/link.css

@@ -0,0 +1,50 @@
+.a1-link {
+  color: var(--component-link-color);
+  text-decoration: none;
+  cursor: pointer;
+  font-family: var(--component-paragraph-font-family);
+  /* font-size and font-weight inherit from parent by default */
+}
+
+.a1-link:hover { color: var(--component-link-color-hover); }
+.a1-link:active { color: var(--component-link-color-pressed); }
+
+.a1-link:focus-visible {
+  outline: var(--component-link-focus-ring-width) solid var(--component-link-color);
+  outline-offset: var(--component-link-focus-ring-offset);
+  border-radius: var(--component-link-focus-ring-radius);
+}
+
+.a1-link__text {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: var(--component-link-underline-offset);
+}
+
+/* ── Size modifiers ─────────────────────────────────────────────────────── */
+
+.a1-link--xs { font-size: var(--semantic-font-size-body-xs); }
+.a1-link--sm { font-size: var(--semantic-font-size-body-sm); }
+.a1-link--md { font-size: var(--semantic-font-size-body-md); }
+.a1-link--lg { font-size: var(--semantic-font-size-body-lg); }
+.a1-link--xl { font-size: var(--semantic-font-size-body-xl); }
+
+/* ── Weight modifiers ───────────────────────────────────────────────────── */
+
+.a1-link--normal   { font-weight: var(--base-font-weight-regular);  --a1-icon-weight: var(--base-font-weight-regular); }
+.a1-link--medium   { font-weight: var(--base-font-weight-medium);   --a1-icon-weight: var(--base-font-weight-medium); }
+.a1-link--semibold { font-weight: var(--base-font-weight-semibold); --a1-icon-weight: var(--base-font-weight-semibold); }
+.a1-link--bold     { font-weight: var(--base-font-weight-bold);     --a1-icon-weight: var(--base-font-weight-bold); }
+
+/* ── Icon layout ────────────────────────────────────────────────────────── */
+
+.a1-link--has-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--component-link-icon-gap);
+}
+
+.a1-link__icon {
+  font-size: 1em;
+  flex-shrink: 0;
+}

package/src/components/menu/Menu.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import "./menu.css";
+
+export function Menu({ open, onClose, "aria-label": ariaLabel, children }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (open) {
+      if (!el.open) el.showModal();
+    } else if (el.open) {
+      el.close();
+    }
+  }, [open]);
+
+  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?.(); };
+    el.addEventListener("cancel", onCancel);
+    el.addEventListener("click", onClick);
+    return () => {
+      el.removeEventListener("cancel", onCancel);
+      el.removeEventListener("click", onClick);
+    };
+  }, [onClose]);
+
+  return (
+    <dialog ref={ref} className="a1-menu" aria-label={ariaLabel}>
+      {children}
+    </dialog>
+  );
+}
+
+export function MenuSection({ label, children }) {
+  return (
+    <div className="a1-menu__section">
+      {label && <p className="a1-menu__section-label">{label}</p>}
+      {children}
+    </div>
+  );
+}

package/src/components/menu/menu.css

@@ -0,0 +1,45 @@
+.a1-menu {
+  /* Override browser centering; place below the header on the right */
+  position: fixed;
+  top: 72px; /* 64px header + 8px gap */
+  right: var(--base-spacing-16);
+  bottom: auto;
+  left: auto;
+  margin: 0;
+
+  width: 260px;
+  max-height: calc(100dvh - 88px);
+  overflow-y: auto;
+
+  padding: var(--base-spacing-20);
+  border: 1px solid var(--semantic-color-border-subtle);
+  border-radius: var(--base-radius-lg);
+  background: var(--semantic-color-surface-panel);
+  box-shadow: var(--semantic-shadow-lg);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-menu::backdrop {
+  background: color-mix(in srgb, var(--base-color-neutral-900) 30%, transparent);
+}
+
+.a1-menu__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-8);
+}
+
+.a1-menu__section + .a1-menu__section {
+  margin-top: var(--base-spacing-16);
+  padding-top: var(--base-spacing-16);
+  border-top: 1px solid var(--semantic-color-border-subtle);
+}
+
+.a1-menu__section-label {
+  margin: 0;
+  color: var(--semantic-color-text-muted);
+  font-size: var(--semantic-font-size-body-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}

package/src/components/message/Message.jsx

@@ -0,0 +1,103 @@
+import "./message.css";
+import { Icon } from "../icon/Icon.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
+
+const STATUS_ICONS = {
+  neutral: "info",
+  info:    "info",
+  success: "check_circle",
+  warn:    "warning",
+  error:   "error",
+};
+
+const STATUSES   = ["neutral", "info", "success", "warn", "error"];
+const ES_SCALES  = ["page", "section", "card"];
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MessageBanner
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+export function MessageBanner({
+  status = "neutral",
+  title,
+  icon,
+  onDismiss,
+  children,
+}) {
+  const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
+  const resolvedIcon = icon ?? STATUS_ICONS[resolvedStatus];
+
+  return (
+    <div
+      className={`a1-message-banner a1-message-banner--${resolvedStatus}`}
+      role="alert"
+      aria-live="polite"
+    >
+      <span className="a1-message-banner__icon" aria-hidden="true">
+        <Icon name={resolvedIcon} />
+      </span>
+
+      <div className="a1-message-banner__content">
+        {title   && <p className="a1-message-banner__title">{title}</p>}
+        {children && <p className="a1-message-banner__body">{children}</p>}
+      </div>
+
+      {onDismiss && (
+        <IconButton
+          icon="close"
+          label="Dismiss"
+          onClick={onDismiss}
+          className="a1-message-banner__dismiss"
+        />
+      )}
+    </div>
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MessageBadge  (inline filled status chip)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+const VARIANTS = ["bold", "subtle"];
+
+export function MessageBadge({ status = "neutral", variant = "bold", icon, children }) {
+  const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
+  const resolvedVariant = VARIANTS.includes(variant) ? variant : "bold";
+  const resolvedIcon = icon ?? STATUS_ICONS[resolvedStatus];
+
+  return (
+    <span className={[
+      "a1-message-badge",
+      `a1-message-badge--${resolvedStatus}`,
+      resolvedVariant === "subtle" && "a1-message-badge--subtle",
+    ].filter(Boolean).join(" ")}>
+      <Icon name={resolvedIcon} />
+      {children}
+    </span>
+  );
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MessageEmptyState
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+export function MessageEmptyState({
+  scale = "section",
+  icon = "inbox",
+  title,
+  description,
+  action,
+}) {
+  const resolvedScale = ES_SCALES.includes(scale) ? scale : "section";
+
+  return (
+    <div className={`a1-message-empty a1-message-empty--${resolvedScale}`}>
+      <div className="a1-message-empty__icon-wrap" aria-hidden="true">
+        <Icon name={icon} />
+      </div>
+      {title       && <p className="a1-message-empty__title">{title}</p>}
+      {description && <p className="a1-message-empty__description">{description}</p>}
+      {action      && <div className="a1-message-empty__action">{action}</div>}
+    </div>
+  );
+}

package/src/components/message/message.css

@@ -0,0 +1,226 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   MessageBanner
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.a1-message-banner {
+  /* defaults: neutral */
+  --a1-msg-surface: var(--semantic-color-surface-panel);
+  --a1-msg-border:  var(--semantic-color-border-subtle);
+  --a1-msg-accent:  var(--semantic-color-text-muted);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--component-message-banner-padding);
+  padding: var(--component-message-banner-padding);
+  border: var(--component-message-banner-border-width) solid var(--a1-msg-border);
+  border-radius: var(--component-message-banner-border-radius);
+  background: var(--a1-msg-surface);
+}
+
+.a1-message-banner--info {
+  --a1-msg-surface: var(--semantic-color-status-info-surface);
+  --a1-msg-border:  var(--semantic-color-status-info-border);
+  --a1-msg-accent:  var(--semantic-color-status-info-background);
+}
+.a1-message-banner--success {
+  --a1-msg-surface: var(--semantic-color-status-success-surface);
+  --a1-msg-border:  var(--semantic-color-status-success-border);
+  --a1-msg-accent:  var(--semantic-color-status-success-background);
+}
+.a1-message-banner--warn {
+  --a1-msg-surface: var(--semantic-color-status-warn-surface);
+  --a1-msg-border:  var(--semantic-color-status-warn-border);
+  --a1-msg-accent:  var(--semantic-color-status-warn-background);
+}
+.a1-message-banner--error {
+  --a1-msg-surface: var(--semantic-color-status-error-surface);
+  --a1-msg-border:  var(--semantic-color-status-error-border);
+  --a1-msg-accent:  var(--semantic-color-status-error-background);
+}
+
+.a1-message-banner__icon {
+  flex-shrink: 0;
+  color: var(--a1-msg-accent);
+  font-size: var(--component-message-banner-icon-size);
+  line-height: 1;
+  margin-top: var(--component-message-banner-icon-margin-top);
+  --a1-icon-opsz: var(--component-message-banner-icon-optical-size);
+}
+
+.a1-message-banner__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-4);
+}
+
+.a1-message-banner__title {
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--component-message-banner-title-font-weight);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-heading);
+}
+
+.a1-message-banner__body {
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--semantic-font-weight-body);
+  color: var(--semantic-color-text-muted);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-message-banner__dismiss {
+  flex-shrink: 0;
+  margin-top: var(--component-message-banner-dismiss-offset);
+  margin-right: var(--component-message-banner-dismiss-offset);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MessageBadge  (inline status chip — filled)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.a1-message-badge {
+  /* defaults: neutral */
+  --a1-msg-accent:     var(--semantic-color-action-background);
+  --a1-msg-foreground: var(--semantic-color-action-foreground);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-spacing-4);
+  padding: var(--component-message-badge-padding-block)
+           var(--component-message-badge-padding-inline);
+  border-radius: var(--component-message-badge-border-radius);
+  background: var(--a1-msg-accent);
+  color: var(--a1-msg-foreground);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--component-message-badge-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.a1-message-badge--info {
+  --a1-msg-accent:     var(--semantic-color-status-info-background);
+  --a1-msg-foreground: var(--semantic-color-status-info-foreground);
+}
+.a1-message-badge--success {
+  --a1-msg-accent:     var(--semantic-color-status-success-background);
+  --a1-msg-foreground: var(--semantic-color-status-success-foreground);
+}
+.a1-message-badge--warn {
+  --a1-msg-accent:     var(--semantic-color-status-warn-background);
+  --a1-msg-foreground: var(--semantic-color-status-warn-foreground);
+}
+.a1-message-badge--error {
+  --a1-msg-accent:     var(--semantic-color-status-error-background);
+  --a1-msg-foreground: var(--semantic-color-status-error-foreground);
+}
+
+/* Subtle variant — light surface + border, no fill */
+.a1-message-badge--subtle {
+  --a1-msg-accent:     var(--semantic-color-action-surface);
+  --a1-msg-foreground: var(--semantic-color-action-background);
+  border: 1px solid var(--semantic-color-action-border);
+}
+
+.a1-message-badge .a1-icon {
+  font-size: 1em;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   MessageEmptyState
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.a1-message-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* ── Scale: page ────────────────────────────────────────────────────────── */
+
+.a1-message-empty--page {
+  --a1-empty-icon:  var(--component-message-empty-state-icon-size-page);
+  --a1-empty-wrap:  var(--component-message-empty-state-wrap-size-page);
+  --a1-icon-opsz:   var(--component-message-empty-state-icon-optical-size-page);
+  gap: var(--base-spacing-16);
+  padding: var(--base-spacing-64) var(--base-spacing-40);
+  max-width: var(--component-message-empty-state-max-width-page);
+  margin-inline: auto;
+}
+
+/* ── Scale: section ─────────────────────────────────────────────────────── */
+
+.a1-message-empty--section {
+  --a1-empty-icon:  var(--component-message-empty-state-icon-size-section);
+  --a1-empty-wrap:  var(--component-message-empty-state-wrap-size-section);
+  --a1-icon-opsz:   var(--component-message-empty-state-icon-optical-size-section);
+  gap: var(--base-spacing-12);
+  padding: var(--base-spacing-40) var(--base-spacing-24);
+  max-width: var(--component-message-empty-state-max-width-section);
+  margin-inline: auto;
+}
+
+/* ── Scale: card ────────────────────────────────────────────────────────── */
+
+.a1-message-empty--card {
+  --a1-empty-icon:  var(--component-message-empty-state-icon-size-card);
+  --a1-empty-wrap:  var(--component-message-empty-state-wrap-size-card);
+  --a1-icon-opsz:   var(--component-message-empty-state-icon-optical-size-card);
+  gap: var(--base-spacing-8);
+  padding: var(--base-spacing-16);
+}
+
+/* ── Icon wrap ──────────────────────────────────────────────────────────── */
+
+.a1-message-empty__icon-wrap {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--a1-empty-wrap);
+  height: var(--a1-empty-wrap);
+  border-radius: 50%;
+  background: var(--semantic-color-surface-raised);
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-message-empty--card .a1-message-empty__icon-wrap {
+  background: transparent;
+}
+
+.a1-message-empty__icon-wrap .a1-icon {
+  font-size: var(--a1-empty-icon);
+}
+
+/* ── Text ───────────────────────────────────────────────────────────────── */
+
+.a1-message-empty__title {
+  margin: 0;
+  font-family: var(--component-heading-font-family-heading);
+  font-weight: var(--component-heading-font-weight-heading);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-message-empty--page    .a1-message-empty__title { font-size: var(--semantic-font-size-heading-sm); }
+.a1-message-empty--section .a1-message-empty__title { font-size: var(--semantic-font-size-heading-xs); }
+.a1-message-empty--card    .a1-message-empty__title { font-size: var(--semantic-font-size-body-sm); }
+
+.a1-message-empty__description {
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-message-empty--page    .a1-message-empty__description { font-size: var(--semantic-font-size-body-md); }
+.a1-message-empty--section .a1-message-empty__description { font-size: var(--semantic-font-size-body-sm); }
+.a1-message-empty--card    .a1-message-empty__description { font-size: var(--semantic-font-size-body-xs); }
+
+.a1-message-empty__action {
+  margin-top: var(--base-spacing-4);
+}

package/src/components/notification/Notification.jsx

@@ -0,0 +1,55 @@
+import "./notification.css";
+
+const variants = ["default", "error", "success", "warn", "info"];
+const positions = ["top-right", "top-left", "bottom-right", "bottom-left"];
+
+function formatCount(n, max) {
+  if (n >= 1_000_000) return +(n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000)     return +(n / 1_000).toFixed(1) + "k";
+  if (n > max)        return `${max}+`;
+  return String(n);
+}
+
+export function Notification({
+  children,
+  count,
+  label,
+  dot = false,
+  variant = "default",
+  position = "top-right",
+  max = 99,
+}) {
+  const resolvedVariant = variants.includes(variant) ? variant : "default";
+  const resolvedPosition = positions.includes(position) ? position : "top-right";
+
+  const isDot = dot || (count === undefined && label === undefined);
+
+  let content = null;
+  if (!isDot) {
+    if (count !== undefined) {
+      content = formatCount(count, max);
+    } else {
+      content = label;
+    }
+  }
+
+  const classes = [
+    "a1-notification",
+    `a1-notification--${resolvedVariant}`,
+    `a1-notification--${resolvedPosition}`,
+    isDot && "a1-notification--dot",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const ariaLabel = count !== undefined ? `${count} notifications` : undefined;
+
+  return (
+    <span className="a1-notification-root">
+      {children}
+      <span className={classes} aria-label={ariaLabel}>
+        {content}
+      </span>
+    </span>
+  );
+}

package/src/components/notification/notification.css

@@ -0,0 +1,69 @@
+.a1-notification-root {
+  position: relative;
+  display: inline-flex;
+}
+
+.a1-notification {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--component-notification-height);
+  height: var(--component-notification-height);
+  padding: 0 var(--component-notification-padding-inline);
+  border-radius: calc(var(--component-notification-height) / 2);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--component-notification-font-size);
+  font-weight: var(--component-notification-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+  background: var(--a1-notification-background);
+  color: var(--a1-notification-foreground);
+  /* Ring separates the notification from its underlying element */
+  box-shadow: 0 0 0 var(--component-notification-ring-width) var(--semantic-color-surface-page);
+}
+
+/* ── Position ───────────────────────────────────────────────────────────── */
+
+.a1-notification--top-right    { top: 0;    right:  0; transform: translate(50%, -50%); }
+.a1-notification--top-left     { top: 0;    left:   0; transform: translate(-50%, -50%); }
+.a1-notification--bottom-right { bottom: 0; right:  0; transform: translate(50%, 50%); }
+.a1-notification--bottom-left  { bottom: 0; left:   0; transform: translate(-50%, 50%); }
+
+/* ── Dot ────────────────────────────────────────────────────────────────── */
+
+.a1-notification--dot {
+  min-width: var(--component-notification-dot-size);
+  width: var(--component-notification-dot-size);
+  height: var(--component-notification-dot-size);
+  padding: 0;
+  border-radius: 50%;
+}
+
+/* ── Variants ───────────────────────────────────────────────────────────── */
+
+.a1-notification--default {
+  --a1-notification-background: var(--base-color-neutral-600);
+  --a1-notification-foreground: var(--base-color-neutral-0);
+}
+
+.a1-notification--error {
+  --a1-notification-background: var(--semantic-color-status-error-background);
+  --a1-notification-foreground: var(--semantic-color-status-error-foreground);
+}
+
+.a1-notification--success {
+  --a1-notification-background: var(--semantic-color-status-success-background);
+  --a1-notification-foreground: var(--semantic-color-status-success-foreground);
+}
+
+.a1-notification--warn {
+  --a1-notification-background: var(--semantic-color-status-warn-background);
+  --a1-notification-foreground: var(--semantic-color-status-warn-foreground);
+}
+
+.a1-notification--info {
+  --a1-notification-background: var(--semantic-color-status-info-background);
+  --a1-notification-foreground: var(--semantic-color-status-info-foreground);
+}

package/src/components/page-layout/PageLayout.jsx

@@ -0,0 +1,40 @@
+import "./page-layout.css";
+
+export function PageLayout({
+  header,
+  footer,
+  sidebar,
+  sidebarPlacement = "start",
+  stickyHeader = false,
+  className = "",
+  children,
+  ...props
+}) {
+  const rootClasses = [
+    "a1-page-layout",
+    stickyHeader && "a1-page-layout--sticky-header",
+    sidebar && `a1-page-layout--sidebar-${sidebarPlacement}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={rootClasses} {...props}>
+      {header && (
+        <header className="a1-page-layout__header">{header}</header>
+      )}
+
+      <div className="a1-page-layout__body">
+        {sidebar && (
+          <aside className="a1-page-layout__sidebar">{sidebar}</aside>
+        )}
+        <main className="a1-page-layout__main">{children}</main>
+      </div>
+
+      {footer && (
+        <footer className="a1-page-layout__footer">{footer}</footer>
+      )}
+    </div>
+  );
+}