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

package/src/components/accordion/Accordion.jsx

@@ -0,0 +1,80 @@
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { Icon } from "../icon/Icon.jsx";
+import "./accordion.css";
+
+const SIZES = ["sm", "md", "lg"];
+
+export function Accordion({
+  label,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onChange,
+  size = "md",
+  disabled = false,
+  className = "",
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+
+  const uid = useId();
+  const triggerId = `${uid}-trigger`;
+  const panelId = `${uid}-panel`;
+  const bodyRef = useRef(null);
+
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    if (open) el.removeAttribute("inert");
+    else el.setAttribute("inert", "");
+  }, [open]);
+
+  const resolvedSize = SIZES.includes(size) ? size : "md";
+
+  function handleToggle() {
+    if (disabled) return;
+    const next = !open;
+    if (!isControlled) setUncontrolledOpen(next);
+    onChange?.(next);
+  }
+
+  return (
+    <div
+      className={[
+        "a1-accordion",
+        `a1-accordion--${resolvedSize}`,
+        open && "a1-accordion--open",
+        disabled && "a1-accordion--disabled",
+        className,
+      ].filter(Boolean).join(" ")}
+    >
+      <button
+        id={triggerId}
+        type="button"
+        className="a1-accordion__trigger"
+        aria-expanded={open}
+        aria-controls={panelId}
+        disabled={disabled}
+        onClick={handleToggle}
+      >
+        <span className="a1-accordion__chevron" aria-hidden="true">
+          <Icon name="expand_more" />
+        </span>
+        <span className="a1-accordion__label">{label}</span>
+      </button>
+
+      <div
+        ref={bodyRef}
+        id={panelId}
+        role="region"
+        aria-labelledby={triggerId}
+        className="a1-accordion__body"
+      >
+        <div className="a1-accordion__body-inner">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/accordion/accordion.css

@@ -0,0 +1,118 @@
+/* ─── Accordion ─────────────────────────────────────────────────────────────── */
+
+.a1-accordion {
+  /* Size tokens — default (md) */
+  --a1-ac-height:      var(--component-accordion-trigger-height-md);
+  --a1-ac-px:          var(--component-accordion-padding-inline-md);
+  --a1-ac-py:          var(--base-spacing-8);
+  --a1-ac-icon-size:   var(--component-accordion-icon-size-md);
+  --a1-ac-font-size:   var(--semantic-font-size-body-md);
+  --a1-ac-font-weight: var(--base-font-weight-medium);
+}
+
+/* ─── Sizes ─────────────────────────────────────────────────────────────────── */
+
+.a1-accordion--sm {
+  --a1-ac-height:      var(--component-accordion-trigger-height-sm);
+  --a1-ac-px:          var(--component-accordion-padding-inline-sm);
+  --a1-ac-py:          var(--base-spacing-6);
+  --a1-ac-icon-size:   var(--component-accordion-icon-size-sm);
+  --a1-ac-font-size:   var(--semantic-font-size-body-sm);
+  --a1-ac-font-weight: var(--base-font-weight-medium);
+}
+
+.a1-accordion--lg {
+  --a1-ac-height:      var(--component-accordion-trigger-height-lg);
+  --a1-ac-px:          var(--component-accordion-padding-inline-lg);
+  --a1-ac-py:          var(--base-spacing-12);
+  --a1-ac-icon-size:   var(--component-accordion-icon-size-lg);
+  --a1-ac-font-size:   var(--semantic-font-size-body-lg);
+  --a1-ac-font-weight: var(--base-font-weight-bold);
+}
+
+/* ─── Trigger ───────────────────────────────────────────────────────────────── */
+
+.a1-accordion__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-6);
+  width: 100%;
+  min-height: var(--a1-ac-height);
+  padding-inline: var(--a1-ac-px);
+  padding-block: var(--a1-ac-py);
+  border: none;
+  border-radius: var(--component-accordion-border-radius);
+  background: transparent;
+  cursor: pointer;
+  color: var(--semantic-color-text-default);
+  font-family: var(--semantic-font-family-body);
+  font-size: var(--a1-ac-font-size);
+  font-weight: var(--a1-ac-font-weight);
+  line-height: var(--semantic-font-line-height-body);
+  text-align: start;
+  transition: background var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
+.a1-accordion__trigger:hover {
+  background: var(--semantic-color-surface-raised);
+}
+
+.a1-accordion__trigger:active {
+  background: color-mix(in srgb, var(--semantic-color-surface-raised), var(--semantic-color-text-default) 6%);
+}
+
+.a1-accordion__trigger:focus-visible {
+  outline: var(--component-accordion-focus-ring-width) solid var(--semantic-color-text-accent);
+  outline-offset: var(--component-accordion-focus-ring-offset);
+}
+
+/* ─── Chevron ───────────────────────────────────────────────────────────────── */
+
+.a1-accordion__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: var(--a1-ac-icon-size);
+  color: var(--semantic-color-text-muted);
+  /* Start rotated -90deg (pointing right →) when collapsed */
+  transform: rotate(-90deg);
+  transition: transform var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
+.a1-accordion--open .a1-accordion__chevron {
+  /* Rotate to 0deg (pointing down ↓) when expanded */
+  transform: rotate(0deg);
+}
+
+/* ─── Label ─────────────────────────────────────────────────────────────────── */
+
+.a1-accordion__label {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ─── Body — CSS grid height animation ──────────────────────────────────────── */
+
+.a1-accordion__body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
+.a1-accordion--open .a1-accordion__body {
+  grid-template-rows: 1fr;
+}
+
+.a1-accordion__body-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* ─── Disabled ──────────────────────────────────────────────────────────────── */
+
+.a1-accordion--disabled .a1-accordion__trigger {
+  cursor: not-allowed;
+  opacity: 0.55;
+  pointer-events: none;
+}

package/src/components/banner/Banner.jsx

@@ -0,0 +1,66 @@
+import "./banner.css";
+import { Icon } from "../icon/Icon.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
+
+const INLINE_ICONS = {
+  neutral: "info",
+  info:    "info",
+  success: "check_circle",
+  warn:    "warning",
+  error:   "error",
+};
+
+const SYSTEM_ICONS = {
+  neutral: "campaign",
+  info:    "info",
+  success: "check_circle",
+  warn:    "warning",
+  error:   "error",
+};
+
+const STATUSES = ["neutral", "info", "success", "warn", "error"];
+const VARIANTS = ["inline", "system"];
+
+export function Banner({
+  variant = "inline",
+  status = "neutral",
+  title,
+  icon,
+  action,
+  onDismiss,
+  children,
+}) {
+  const resolvedVariant = VARIANTS.includes(variant) ? variant : "inline";
+  const resolvedStatus  = STATUSES.includes(status)  ? status  : "neutral";
+  const resolvedIcon    = icon ?? (resolvedVariant === "system" ? SYSTEM_ICONS : INLINE_ICONS)[resolvedStatus];
+
+  return (
+    <div
+      className={`a1-banner a1-banner--${resolvedVariant} a1-banner--${resolvedStatus}`}
+      role="alert"
+      aria-live="polite"
+    >
+      <div className="a1-banner__inner">
+        <span className="a1-banner__icon" aria-hidden="true">
+          <Icon name={resolvedIcon} />
+        </span>
+
+        <div className="a1-banner__content">
+          {title    && <span className="a1-banner__title">{title}</span>}
+          {children && <span className="a1-banner__body">{children}</span>}
+        </div>
+
+        {action && <div className="a1-banner__action">{action}</div>}
+
+        {onDismiss && (
+          <IconButton
+            icon="close"
+            label="Dismiss"
+            onClick={onDismiss}
+            className="a1-banner__dismiss"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/banner/banner.css

@@ -0,0 +1,205 @@
+/* ─── Banner – shared status tokens ───────────────────────────────────────── */
+
+.a1-banner {
+  --a1-banner-surface: var(--semantic-color-surface-panel);
+  --a1-banner-border:  var(--semantic-color-border-subtle);
+  --a1-banner-accent:  var(--semantic-color-text-muted);
+  --a1-banner-bg:      var(--semantic-color-surface-inverse);
+  --a1-banner-fg:      var(--semantic-color-text-inverse);
+}
+
+.a1-banner--info {
+  --a1-banner-surface: var(--semantic-color-status-info-surface);
+  --a1-banner-border:  var(--semantic-color-status-info-border);
+  --a1-banner-accent:  var(--semantic-color-status-info-background);
+  --a1-banner-bg:      var(--semantic-color-status-info-background);
+}
+.a1-banner--success {
+  --a1-banner-surface: var(--semantic-color-status-success-surface);
+  --a1-banner-border:  var(--semantic-color-status-success-border);
+  --a1-banner-accent:  var(--semantic-color-status-success-background);
+  --a1-banner-bg:      var(--semantic-color-status-success-background);
+}
+.a1-banner--warn {
+  --a1-banner-surface: var(--semantic-color-status-warn-surface);
+  --a1-banner-border:  var(--semantic-color-status-warn-border);
+  --a1-banner-accent:  var(--semantic-color-status-warn-background);
+  --a1-banner-bg:      var(--semantic-color-status-warn-background);
+}
+
+/* System banners render white text on a solid background — warn.500 only hits
+   3.18:1. Use warn.text (warn.600 in light, warn.300 in dark) which always passes. */
+.a1-banner--system.a1-banner--warn {
+  --a1-banner-bg: var(--semantic-color-status-warn-text);
+}
+.a1-banner--error {
+  --a1-banner-surface: var(--semantic-color-status-error-surface);
+  --a1-banner-border:  var(--semantic-color-status-error-border);
+  --a1-banner-accent:  var(--semantic-color-status-error-background);
+  --a1-banner-bg:      var(--semantic-color-status-error-background);
+}
+
+/* ─── Shared inner structure ───────────────────────────────────────────────── */
+
+.a1-banner__inner {
+  display: flex;
+  gap: var(--component-message-banner-padding);
+}
+
+.a1-banner__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.a1-banner__title,
+.a1-banner__body {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+}
+
+.a1-banner__title {
+  font-weight: var(--component-message-banner-title-font-weight);
+  line-height: var(--semantic-font-line-height-heading);
+}
+
+.a1-banner__body {
+  font-weight: var(--semantic-font-weight-body);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-banner__action {
+  flex-shrink: 0;
+}
+
+.a1-banner__dismiss {
+  flex-shrink: 0;
+}
+
+/* ─── Inline variant ───────────────────────────────────────────────────────── */
+
+.a1-banner--inline .a1-banner__inner {
+  align-items: flex-start;
+  padding: var(--component-message-banner-padding);
+  border: var(--component-message-banner-border-width) solid var(--a1-banner-border);
+  border-radius: var(--component-message-banner-border-radius);
+  background: var(--a1-banner-surface);
+}
+
+.a1-banner--inline .a1-banner__icon {
+  flex-shrink: 0;
+  color: var(--a1-banner-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-banner--inline .a1-banner__content {
+  flex-direction: column;
+  gap: var(--base-spacing-4);
+}
+
+.a1-banner--inline .a1-banner__title {
+  color: var(--semantic-color-text-default);
+}
+
+.a1-banner--inline .a1-banner__body {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-banner--inline .a1-banner__action {
+  align-self: center;
+}
+
+.a1-banner--inline .a1-banner__dismiss {
+  margin-top: var(--component-message-banner-dismiss-offset);
+  margin-right: var(--component-message-banner-dismiss-offset);
+}
+
+/* ─── System variant ───────────────────────────────────────────────────────── */
+
+.a1-banner--system {
+  background: var(--a1-banner-bg);
+  color: var(--a1-banner-fg);
+  width: 100%;
+}
+
+.a1-banner--system .a1-banner__inner {
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--base-spacing-8) var(--base-spacing-12);
+  max-width: var(--component-message-banner-system-max-width);
+  margin-inline: auto;
+  padding-block: var(--base-spacing-12);
+  padding-inline: var(--base-spacing-24);
+}
+
+.a1-banner--system .a1-banner__icon {
+  flex-shrink: 0;
+  display: flex;
+  font-size: var(--component-message-banner-system-icon-size, var(--base-spacing-24));
+  line-height: 1;
+  --a1-icon-opsz: 24;
+}
+
+.a1-banner--system .a1-banner__content {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 var(--base-spacing-8);
+}
+
+.a1-banner--system .a1-banner__title {
+  color: var(--a1-banner-fg);
+}
+
+.a1-banner--system .a1-banner__body {
+  color: var(--a1-banner-fg);
+}
+
+.a1-banner--system .a1-banner__dismiss {
+  margin-inline-start: var(--base-spacing-4);
+}
+
+/* ─── System: link override on solid bg ────────────────────────────────────── */
+
+.a1-banner--system .a1-link {
+  color: var(--a1-banner-fg);
+}
+
+.a1-banner--system .a1-link:hover {
+  color: color-mix(in srgb, var(--a1-banner-fg) 80%, transparent);
+}
+
+.a1-banner--system .a1-link:active {
+  color: color-mix(in srgb, var(--a1-banner-fg) 65%, transparent);
+}
+
+/* ─── System: tertiary button override on solid bg ──────────────────────────── */
+
+.a1-banner--system .a1-button--tertiary {
+  --a1-button-foreground:         var(--a1-banner-fg);
+  --a1-button-foreground-hover:   var(--a1-banner-fg);
+  --a1-button-foreground-pressed: var(--a1-banner-fg);
+  --a1-button-background:         transparent;
+  --a1-button-background-hover:   color-mix(in srgb, var(--a1-banner-fg) 12%, transparent);
+  --a1-button-background-pressed: color-mix(in srgb, var(--a1-banner-fg) 20%, transparent);
+  --a1-button-border:             color-mix(in srgb, var(--a1-banner-fg) 40%, transparent);
+  --a1-button-border-hover:       color-mix(in srgb, var(--a1-banner-fg) 60%, transparent);
+  --a1-button-border-pressed:     color-mix(in srgb, var(--a1-banner-fg) 75%, transparent);
+}
+
+/* ─── System: icon button (dismiss) override on solid bg ────────────────────── */
+
+.a1-banner--system .a1-icon-button {
+  --a1-icon-button-foreground:         var(--a1-banner-fg);
+  --a1-icon-button-foreground-hover:   var(--a1-banner-fg);
+  --a1-icon-button-foreground-pressed: var(--a1-banner-fg);
+  --a1-icon-button-background:         transparent;
+  --a1-icon-button-background-hover:   color-mix(in srgb, var(--a1-banner-fg) 12%, transparent);
+  --a1-icon-button-background-pressed: color-mix(in srgb, var(--a1-banner-fg) 20%, transparent);
+  --a1-icon-button-border:             transparent;
+  --a1-icon-button-border-hover:       transparent;
+  --a1-icon-button-border-pressed:     transparent;
+}

package/src/components/bleed/Bleed.jsx

@@ -0,0 +1,27 @@
+import "./bleed.css";
+import { resolveSpacing } from "../structure-utils.js";
+
+export function Bleed({
+  as: Component = "div",
+  space = 16,
+  block = "none",
+  inline,
+  className = "",
+  children,
+  ...props
+}) {
+  const blockValue = resolveSpacing(block) ?? resolveSpacing(space);
+  const inlineValue = resolveSpacing(inline) ?? resolveSpacing(space);
+
+  const style = {
+    "--a1-bleed-block": blockValue,
+    "--a1-bleed-inline": inlineValue,
+    ...props.style,
+  };
+
+  return (
+    <Component className={["a1-bleed", className].filter(Boolean).join(" ")} style={style} {...props}>
+      {children}
+    </Component>
+  );
+}

package/src/components/bleed/bleed.css

@@ -0,0 +1,5 @@
+.a1-bleed {
+  margin-block: calc(var(--a1-bleed-block, 0) * -1);
+  margin-inline: calc(var(--a1-bleed-inline, var(--base-spacing-16)) * -1);
+  min-width: 0;
+}

package/src/components/blockquote/Blockquote.jsx

@@ -0,0 +1,40 @@
+import "./blockquote.css";
+
+const VARIANTS = ["border", "filled", "feature", "minimal", "accent", "pull", "ruled"];
+
+export function Blockquote({
+  variant = "border",
+  cite,
+  citeUrl,
+  className = "",
+  children,
+  ...props
+}) {
+  const resolvedVariant = VARIANTS.includes(variant) ? variant : "border";
+
+  return (
+    <figure
+      className={[
+        "a1-blockquote",
+        `a1-blockquote--${resolvedVariant}`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
+      <blockquote className="a1-blockquote__quote">{children}</blockquote>
+      {cite && (
+        <figcaption className="a1-blockquote__cite">
+          {citeUrl ? (
+            <a href={citeUrl} className="a1-blockquote__cite-link">
+              {cite}
+            </a>
+          ) : (
+            cite
+          )}
+        </figcaption>
+      )}
+    </figure>
+  );
+}