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

package/src/components/blockquote/blockquote.css

@@ -0,0 +1,166 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Blockquote
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Base ─────────────────────────────────────────────────────────────────── */
+
+.a1-blockquote {
+  margin: var(--base-spacing-32) 0;
+}
+
+.a1-blockquote__quote {
+  margin: 0;
+  padding: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-lg);
+  font-weight: var(--semantic-font-weight-body);
+  line-height: var(--semantic-font-line-height-body);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-blockquote__cite {
+  display: block;
+  margin-top: var(--base-spacing-12);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--component-blockquote-cite-font-weight);
+  font-style: normal;
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-blockquote__cite::before {
+  content: "\2014\00a0";
+}
+
+.a1-blockquote__cite-link {
+  color: inherit;
+}
+
+.a1-blockquote__cite-link:hover {
+  color: var(--semantic-color-text-default);
+}
+
+/* ── Variant: border ──────────────────────────────────────────────────────── */
+
+.a1-blockquote--border {
+  padding-block: var(--component-blockquote-padding-block);
+  padding-inline-start: var(--component-blockquote-padding-inline);
+  border-inline-start: var(--component-blockquote-border-width) solid
+    var(--semantic-color-action-background);
+}
+
+/* ── Variant: filled ──────────────────────────────────────────────────────── */
+
+.a1-blockquote--filled {
+  padding: var(--component-blockquote-padding-block)
+    var(--component-blockquote-padding-inline);
+  background: var(--semantic-color-surface-panel);
+  border: 1px solid var(--semantic-color-border-subtle);
+  border-radius: var(--component-blockquote-border-radius);
+}
+
+/* ── Variant: feature ─────────────────────────────────────────────────────── */
+
+.a1-blockquote--feature {
+  padding-block: var(--component-blockquote-padding-block);
+}
+
+.a1-blockquote--feature .a1-blockquote__quote {
+  font-size: var(--semantic-font-size-display-sm);
+  font-weight: var(--semantic-font-weight-display);
+  line-height: 1.75em;
+}
+
+.a1-blockquote--feature .a1-blockquote__quote::before {
+  content: "\201C";
+  display: block;
+  font-size: var(--component-blockquote-mark-size);
+  line-height: 0.75;
+  color: var(--semantic-color-action-background);
+  margin-bottom: var(--base-spacing-8);
+}
+
+.a1-blockquote--feature .a1-blockquote__cite {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: var(--semantic-font-size-body-xs);
+  margin-top: var(--base-spacing-20);
+}
+
+.a1-blockquote--feature .a1-blockquote__cite::before {
+  content: none;
+}
+
+/* ── Variant: minimal ─────────────────────────────────────────────────────── */
+
+.a1-blockquote--minimal {
+  padding-block-start: var(--component-blockquote-padding-block);
+  border-block-start: 1px solid var(--semantic-color-border-subtle);
+}
+
+.a1-blockquote--minimal .a1-blockquote__quote {
+  font-style: italic;
+  color: var(--semantic-color-text-muted);
+}
+
+/* ── Variant: accent ──────────────────────────────────────────────────────── */
+
+.a1-blockquote--accent {
+  padding: var(--component-blockquote-padding-block)
+    var(--component-blockquote-padding-inline);
+  background: var(--semantic-color-action-background);
+  border-radius: var(--component-blockquote-border-radius);
+}
+
+.a1-blockquote--accent .a1-blockquote__quote {
+  color: var(--semantic-color-text-inverse);
+}
+
+.a1-blockquote--accent .a1-blockquote__cite {
+  color: color-mix(in srgb, var(--semantic-color-text-inverse), transparent 10%);
+}
+
+.a1-blockquote--accent .a1-blockquote__cite-link:hover {
+  color: var(--semantic-color-text-inverse);
+}
+
+/* ── Variant: pull ────────────────────────────────────────────────────────── */
+
+.a1-blockquote--pull {
+  padding-block: var(--component-blockquote-padding-block);
+  text-align: center;
+}
+
+.a1-blockquote--pull .a1-blockquote__quote {
+  font-size: var(--semantic-font-size-display-sm);
+  font-style: italic;
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-blockquote--pull .a1-blockquote__quote::before {
+  content: "\201C";
+  color: var(--semantic-color-text-muted);
+  margin-inline-end: 0.05em;
+}
+
+.a1-blockquote--pull .a1-blockquote__quote::after {
+  content: "\201D";
+  color: var(--semantic-color-text-muted);
+  margin-inline-start: 0.05em;
+}
+
+.a1-blockquote--pull .a1-blockquote__cite {
+  text-align: center;
+}
+
+/* ── Variant: ruled ───────────────────────────────────────────────────────── */
+
+.a1-blockquote--ruled {
+  padding-block: var(--component-blockquote-padding-block);
+  border-block-start: 1px solid var(--semantic-color-border-default);
+  border-block-end: 1px solid var(--semantic-color-border-default);
+  text-align: center;
+}
+
+.a1-blockquote--ruled .a1-blockquote__cite {
+  text-align: center;
+}

package/src/components/breadcrumb/Breadcrumb.jsx

@@ -0,0 +1,82 @@
+import "./breadcrumb.css";
+import { Icon } from "../icon/Icon.jsx";
+import { Link } from "../link/Link.jsx";
+
+/**
+ * Hierarchical navigation breadcrumb.
+ *
+ * Pass an `items` array where each entry is `{ label, href?, onClick? }`.
+ * The last item is always the current page (non-interactive). All others
+ * render as links (anchor when href is set, button when only onClick).
+ *
+ * Responsive behavior via container query:
+ * - ≥ 480px: full breadcrumb trail with separators
+ * - < 480px: "← Back" link pointing to the immediate parent item
+ *
+ * @param {{ label: string, href?: string, onClick?: function }[]} items
+ */
+export function Breadcrumb({ items = [], backLabel = "Back", className = "", ...props }) {
+  const parentItem = items.length >= 2 ? items[items.length - 2] : null;
+  const backTarget = (parentItem?.href || parentItem?.onClick) ? parentItem : null;
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={["a1-breadcrumb", className].filter(Boolean).join(" ")}
+      {...props}
+    >
+      <ol className="a1-breadcrumb__list">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1;
+          return (
+            <li
+              key={i}
+              className={[
+                "a1-breadcrumb__item",
+                isLast && "a1-breadcrumb__item--current",
+              ].filter(Boolean).join(" ")}
+            >
+              {isLast ? (
+                <span className="a1-breadcrumb__current" aria-current="page">
+                  {item.label}
+                </span>
+              ) : item.href ? (
+                <Link href={item.href} onClick={item.onClick} className="a1-breadcrumb__link">
+                  {item.label}
+                </Link>
+              ) : item.onClick ? (
+                <button type="button" className="a1-breadcrumb__link" onClick={item.onClick}>
+                  {item.label}
+                </button>
+              ) : (
+                <span className="a1-breadcrumb__ancestor">{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+
+      {backTarget && (
+        backTarget.href ? (
+          <Link
+            href={backTarget.href}
+            onClick={backTarget.onClick}
+            icon="arrow_back"
+            className="a1-breadcrumb__back"
+          >
+            {backLabel}
+          </Link>
+        ) : (
+          <button
+            type="button"
+            className="a1-breadcrumb__back"
+            onClick={backTarget.onClick}
+          >
+            <Icon name="arrow_back" className="a1-breadcrumb__back-icon" />
+            <span className="a1-breadcrumb__back-label">{backLabel}</span>
+          </button>
+        )
+      )}
+    </nav>
+  );
+}

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,133 @@
+/* ── Shell ──────────────────────────────────────────────────────────────── */
+
+.a1-breadcrumb {
+  container: a1-breadcrumb / inline-size;
+  font-size: var(--semantic-font-size-body-sm);
+}
+
+/* ── Full list ──────────────────────────────────────────────────────────── */
+
+.a1-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.a1-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+/* Separator between items */
+.a1-breadcrumb__item + .a1-breadcrumb__item::before {
+  content: "/";
+  flex-shrink: 0;
+  padding-inline: var(--base-spacing-6);
+  color: var(--semantic-color-text-muted);
+  user-select: none;
+}
+
+/* ── Item content: link, button, current, ancestor ─────────────────────── */
+
+.a1-breadcrumb__link,
+.a1-breadcrumb__current,
+.a1-breadcrumb__ancestor {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Anchor (Link component) */
+a.a1-breadcrumb__link {
+  /* color/underline handled by .a1-link; block-level display above enables truncation */
+}
+
+/* Button variant: style to match Link */
+button.a1-breadcrumb__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  font-family: var(--component-paragraph-font-family);
+  cursor: pointer;
+  color: var(--component-link-color);
+  text-align: left;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: var(--component-link-underline-offset);
+}
+
+button.a1-breadcrumb__link:hover  { color: var(--component-link-color-hover); }
+button.a1-breadcrumb__link:active { color: var(--component-link-color-pressed); }
+
+button.a1-breadcrumb__link:focus-visible {
+  outline: var(--component-link-focus-ring-width) solid currentColor;
+  outline-offset: var(--component-link-focus-ring-offset);
+  border-radius: var(--component-link-focus-ring-radius);
+}
+
+/* Current page */
+.a1-breadcrumb__current {
+  color: var(--semantic-color-text-default);
+  font-weight: var(--base-font-weight-semibold);
+}
+
+/* Non-linked ancestor text */
+.a1-breadcrumb__ancestor {
+  color: var(--semantic-color-text-muted);
+}
+
+/* ── Back link — hidden by default; shown in narrow containers ──────────── */
+
+/* Higher specificity than .a1-link--has-icon to ensure display: none wins */
+.a1-breadcrumb .a1-breadcrumb__back {
+  display: none;
+}
+
+/* ── Responsive: narrow container ──────────────────────────────────────── */
+
+@container a1-breadcrumb (max-width: 480px) {
+  .a1-breadcrumb__list {
+    display: none;
+  }
+
+  .a1-breadcrumb .a1-breadcrumb__back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--component-link-icon-gap, 0.25em);
+  }
+
+  /* Button variant back link */
+  button.a1-breadcrumb__back {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-family: var(--component-paragraph-font-family);
+    cursor: pointer;
+    color: var(--component-link-color);
+    text-decoration: none;
+  }
+
+  button.a1-breadcrumb__back:hover  { color: var(--component-link-color-hover); }
+  button.a1-breadcrumb__back:active { color: var(--component-link-color-pressed); }
+
+  .a1-breadcrumb__back-icon {
+    font-size: 1.1em;
+    flex-shrink: 0;
+  }
+
+  .a1-breadcrumb__back-label {
+    text-decoration: underline;
+    text-decoration-color: currentColor;
+    text-underline-offset: var(--component-link-underline-offset);
+  }
+}

package/src/components/button/button.css

@@ -6,7 +6,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--component-button-gap);
+  gap: var(--a1-button-gap, var(--component-button-gap));
   border-width: var(--a1-button-border-width, var(--component-button-border-width));
   border-style: solid;
   border-radius: var(--a1-button-border-radius, var(--component-button-border-radius));
@@ -15,6 +15,7 @@
   font-family: var(--component-button-font-family);
   font-size: var(--a1-button-font-size, var(--component-button-font-size));
   font-weight: var(--a1-button-font-weight, var(--component-button-font-weight));
+  --a1-icon-weight: 700;
   line-height: var(--component-button-font-line-height);
   text-decoration: none;
   white-space: nowrap;
@@ -23,21 +24,33 @@
   background: var(--a1-button-background);
   border-color: var(--a1-button-border);
   color: var(--a1-button-foreground);
+  box-shadow: var(--component-button-box-shadow, none);
+  transform: var(--component-button-hover-transform, none);
+  transition:
+    background var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard),
+    border-color var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard),
+    color var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard),
+    box-shadow var(--semantic-motion-duration-quick, 100ms) var(--semantic-motion-easing-standard),
+    transform var(--semantic-motion-duration-quick, 100ms) var(--semantic-motion-easing-standard);
 }
 
-.a1-button:hover {
+.a1-button:not(:disabled):not([aria-disabled="true"]):hover {
   background: var(--a1-button-background-hover);
   border-color: var(--a1-button-border-hover, var(--a1-button-border));
   color: var(--a1-button-foreground-hover, var(--a1-button-foreground));
+  box-shadow: var(--component-button-box-shadow-hover, var(--component-button-box-shadow, none));
+  transform: var(--component-button-hover-transform, none);
 }
 
-.a1-button:active {
+.a1-button:not(:disabled):not([aria-disabled="true"]):active {
   background: var(--a1-button-background-pressed);
   border-color: var(--a1-button-border-pressed, var(--a1-button-border));
   color: var(--a1-button-foreground-pressed, var(--a1-button-foreground));
+  box-shadow: var(--component-button-box-shadow-active, var(--component-button-box-shadow, none));
+  transform: var(--component-button-press-transform, none);
 }
 
-.a1-button:focus-visible {
+.a1-button:not(:disabled):not([aria-disabled="true"]):focus-visible {
   outline: var(--component-button-focus-ring-width) solid var(--component-button-focus-ring);
   outline-offset: var(--component-button-focus-ring-offset);
 }
@@ -46,6 +59,7 @@
 .a1-button[aria-disabled="true"] {
   cursor: not-allowed;
   opacity: var(--component-button-disabled-opacity);
+  pointer-events: none;
 }
 
 .a1-button--primary {
@@ -114,22 +128,38 @@
 }
 
 .a1-button--sm {
-  --a1-button-height: 28px;
+  --a1-button-height: var(--component-button-small-height);
   --a1-button-font-size: var(--semantic-font-size-body-sm);
   --a1-button-font-weight: var(--base-font-weight-medium);
-  --a1-button-border-radius: 4px;
+  --a1-button-border-radius: var(--component-button-small-border-radius);
   --a1-button-padding-inline: var(--base-spacing-8);
+  --a1-button-gap: var(--base-spacing-6);
+  --a1-button-icon-size: var(--component-button-small-icon-size);
+  --a1-button-icon-opsz: var(--component-button-small-icon-optical-size);
+}
+
+.a1-button--md {
+  --a1-button-font-weight: var(--base-font-weight-semibold);
+  --a1-button-icon-size: var(--component-button-medium-icon-size);
+  --a1-button-icon-opsz: var(--component-button-medium-icon-optical-size);
+}
+
+.a1-button--lg.a1-button--secondary {
+  --a1-button-border-width: var(--component-button-large-secondary-border-width);
 }
 
 .a1-button--lg {
-  --a1-button-height: 56px;
+  --a1-icon-weight: 900;
+  --a1-button-height: var(--component-button-large-height);
   --a1-button-font-size: var(--semantic-font-size-body-lg);
   --a1-button-font-weight: var(--base-font-weight-extra-bold);
-  --a1-button-border-radius: var(--base-radius-lg);
-  --a1-button-padding-inline: var(--base-spacing-16);
+  --a1-button-border-radius: var(--component-button-large-border-radius, var(--base-radius-lg));
+  --a1-button-padding-inline: var(--base-spacing-20);
+  --a1-button-icon-size: var(--component-button-icon-size);
+  --a1-button-icon-opsz: var(--component-button-icon-optical-size);
 }
 
-.a1-button__icon {
-  font-size: var(--component-button-icon-size);
-  --a1-icon-opsz: var(--component-button-icon-optical-size);
+.a1-button .a1-button__icon {
+  font-size: var(--a1-button-icon-size, var(--component-button-icon-size));
+  --a1-icon-opsz: var(--a1-button-icon-opsz, var(--component-button-icon-optical-size));
 }

package/src/components/button-container/ButtonContainer.jsx

@@ -1,26 +1,45 @@
 import "./button-container.css";
+import { Children, cloneElement, isValidElement } from "react";
+import { Button } from "../button/Button.jsx";
 
 const alignments = ["start", "center", "end"];
+const sizes = ["sm", "md", "lg"];
+
+function applyButtonSize(children, size) {
+  if (!size) return children;
+
+  return Children.map(children, (child) => {
+    if (!isValidElement(child) || child.type !== Button || child.props.size) {
+      return child;
+    }
+
+    return cloneElement(child, { size });
+  });
+}
 
 export function ButtonContainer({
   align = "start",
+  size,
   className = "",
   children,
   ...props
 }) {
   const resolvedAlign = alignments.includes(align) ? align : "start";
+  const resolvedSize = sizes.includes(size) ? size : null;
   const classes = [
     "a1-button-container",
     `a1-button-container--${resolvedAlign}`,
+    resolvedSize && `a1-button-container--${resolvedSize}`,
     className
   ]
     .filter(Boolean)
     .join(" ");
+  const resolvedChildren = applyButtonSize(children, resolvedSize);
 
   return (
     <div className={classes} {...props}>
       <div className="a1-button-container__inner">
-        {children}
+        {resolvedChildren}
       </div>
     </div>
   );

package/src/components/button-container/button-container.css

@@ -1,5 +1,9 @@
 .a1-button-container {
+  box-sizing: border-box;
   container: a1-button-container / inline-size;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
 }
 
 .a1-button-container__inner {
@@ -13,6 +17,11 @@
   width: 100%;
 }
 
+/* Links sit inline alongside buttons; vertically centered in row layout */
+.a1-button-container__inner > .a1-link {
+  align-self: center;
+}
+
 @container a1-button-container (min-width: 480px) {
   .a1-button-container__inner {
     flex-direction: row;
@@ -33,6 +42,15 @@
   }
 
   .a1-button-container--end .a1-button-container__inner {
-    justify-content: flex-end;
+    /* row-reverse flips visual order so primary lands rightmost.
+       flex-start = pack toward the visual right in a reversed row. */
+    flex-direction: row-reverse;
+    justify-content: flex-start;
   }
 }
+
+/* ── Size modifiers ──────────────────────────────────────────────────────── */
+
+.a1-button-container--lg .a1-button-container__inner {
+  gap: var(--base-spacing-16) var(--base-spacing-24);
+}