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

package/src/components/field/textarea-field.css

@@ -0,0 +1,185 @@
+/* ─── TextareaField — size-specific padding ──────────────────────────────── */
+
+.a1-field {
+  --a1-textarea-padding-block: var(--component-field-textarea-padding-block);
+}
+
+.a1-field--comfortable {
+  --a1-textarea-padding-block: var(--component-field-textarea-padding-block-comfortable);
+}
+
+.a1-field--compact {
+  --a1-textarea-padding-block: var(--component-field-textarea-padding-block-compact);
+}
+
+/* ─── Textarea control ───────────────────────────────────────────────────── */
+
+.a1-field__textarea {
+  box-sizing: border-box;
+  display: block; /* removes inline gap below element */
+  width: 100%;
+  padding-inline: var(--a1-field-padding-inline);
+  padding-block: var(--a1-textarea-padding-block);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-field-font-size);
+  font-weight: var(--base-font-weight-regular);
+  line-height: var(--semantic-font-line-height-body);
+  color: var(--semantic-color-text-default);
+  background: var(--a1-field-background);
+  border: var(--component-field-border-width) solid var(--a1-field-border-color);
+  border-radius: var(--a1-field-border-radius);
+  transition:
+    border-color var(--semantic-motion-duration-fast),
+    background   var(--semantic-motion-duration-fast);
+  -webkit-appearance: none;
+  appearance: none;
+  resize: vertical;
+}
+
+.a1-field__textarea::placeholder {
+  color: var(--semantic-color-text-muted);
+  font-weight: var(--base-font-weight-regular);
+}
+
+/* ─── Hover ──────────────────────────────────────────────────────────────── */
+
+.a1-field__textarea:hover:not(:disabled):not(:focus) {
+  background: var(--a1-field-hover-background);
+  border-color: var(--a1-field-hover-border-color);
+}
+
+.a1-field__textarea:read-only:hover:not(:disabled):not(:focus) {
+  background: var(--a1-field-read-only-background);
+  border-color: var(--a1-field-read-only-border-color);
+}
+
+/* ─── Active ─────────────────────────────────────────────────────────────── */
+
+.a1-field__textarea:active:not(:disabled) {
+  background: var(--a1-field-active-background);
+  border-color: var(--a1-field-active-border-color);
+}
+
+.a1-field__textarea:read-only:active:not(:disabled) {
+  background: var(--a1-field-read-only-background);
+  border-color: var(--a1-field-read-only-border-color);
+}
+
+/* ─── Focus ──────────────────────────────────────────────────────────────── */
+
+.a1-field__textarea:focus {
+  outline: var(--a1-field-focus-ring-width) solid var(--a1-field-focus-ring-color);
+  outline-offset: var(--a1-field-focus-ring-offset);
+  border-color: var(--semantic-color-action-background);
+}
+
+/* ─── Required ───────────────────────────────────────────────────────────── */
+
+.a1-field--required .a1-field__textarea {
+  border-color: var(--semantic-color-status-info-border);
+  border-left-width: var(--a1-field-accent-border-width);
+  border-left-color: var(--semantic-color-status-info-background);
+  padding-left: calc(var(--a1-field-padding-inline) - var(--a1-field-accent-compensation));
+}
+
+.a1-field--required .a1-field__textarea:focus {
+  border-color: var(--semantic-color-status-info-background);
+}
+
+/* ─── Error ──────────────────────────────────────────────────────────────── */
+
+.a1-field--error .a1-field__textarea {
+  border-width: var(--component-field-error-border-width);
+  border-color: var(--semantic-color-status-error-border);
+  border-left-width: var(--a1-field-accent-border-width);
+  border-left-color: var(--semantic-color-status-error-background);
+  padding-left: calc(var(--a1-field-padding-inline) - var(--a1-field-accent-compensation));
+}
+
+.a1-field--error .a1-field__textarea:focus {
+  border-color: var(--semantic-color-status-error-background);
+}
+
+/* ─── Disabled ───────────────────────────────────────────────────────────── */
+
+.a1-field__textarea:disabled {
+  background: var(--semantic-color-surface-raised);
+  color: var(--semantic-color-text-muted);
+  border-color: var(--semantic-color-border-subtle);
+  cursor: not-allowed;
+  resize: none;
+}
+
+/* ─── Read-only ──────────────────────────────────────────────────────────── */
+
+.a1-field__textarea:read-only:not(:disabled) {
+  background: var(--a1-field-read-only-background);
+  color: var(--a1-field-read-only-text);
+  border-color: var(--a1-field-read-only-border-color);
+  cursor: text;
+  user-select: text;
+  resize: none;
+}
+
+/* ─── Footer (hint / error + char count row) ─────────────────────────────── */
+
+.a1-field__footer {
+  display: flex;
+  align-items: baseline;
+  gap: var(--base-spacing-8);
+  margin-top: var(--a1-field-gap);
+}
+
+.a1-field__footer-message {
+  flex: 1;
+  min-width: 0;
+}
+
+.a1-field__footer .a1-field__message {
+  margin: 0;
+}
+
+/* ─── Character count ────────────────────────────────────────────────────── */
+
+.a1-field__char-count {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-field-message-size);
+  line-height: var(--semantic-font-line-height-body);
+  color: var(--semantic-color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.a1-field__char-count--warning {
+  color: var(--semantic-color-status-warn-text);
+}
+
+.a1-field__char-count--over {
+  color: var(--semantic-color-status-error-text);
+}
+
+/* ─── Side label layout adjustments ─────────────────────────────────────── */
+
+/*
+ * Align label to the top of the textarea's first text line rather than
+ * centering it vertically as with single-line inputs.
+ */
+.a1-field--label-side:has(.a1-field__textarea) .a1-field__label {
+  padding-top: var(--a1-textarea-padding-block);
+  padding-bottom: 0;
+}
+
+/* Place the footer under the textarea (column 2) instead of under the label */
+.a1-field--label-side .a1-field__footer {
+  grid-column: 2;
+  grid-row: 2;
+  margin-top: 0;
+}
+
+@media (--bp-sm-down) {
+  .a1-field--label-side:has(.a1-field__textarea) .a1-field__label {
+    padding-top: 0;
+    padding-bottom: var(--a1-field-gap);
+  }
+}

package/src/components/field-row/FieldRow.jsx

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import { FieldsetContext } from "../fieldset/FieldsetContext.js";
+import "./field-row.css";
+
+export function FieldRow({ children, className = "", ...props }) {
+  const ctx = useContext(FieldsetContext);
+
+  // Side-label fields already use an internal two-column grid;
+  // stacking the row prevents layout conflicts.
+  const stacked = ctx?.labelPosition === "side";
+
+  const classes = [
+    "a1-field-row",
+    stacked && "a1-field-row--stacked",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/field-row/field-row.css

@@ -0,0 +1,51 @@
+/* ─── FieldRow ───────────────────────────────────────────────────────────── */
+
+.a1-field-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--base-spacing-12);
+}
+
+/* Every direct child fills an equal share of the available width */
+.a1-field-row > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* Fixed-width fields (ZipField, DateField) keep their natural fit-content width */
+.a1-field-row > .a1-field--fit {
+  flex: none;
+}
+
+/* ─── Stacked — used when side labels are active ─────────────────────────── */
+
+.a1-field-row--stacked {
+  flex-direction: column;
+}
+
+.a1-field-row--stacked > * {
+  flex: none;
+  width: 100%;
+}
+
+/* Fit-content fields don't stretch to full width even when stacked */
+.a1-field-row--stacked > .a1-field--fit {
+  width: fit-content;
+}
+
+/* ─── Responsive — stack on xs / sm viewports ─────────────────────────────── */
+
+@media (--bp-sm-down) {
+  .a1-field-row {
+    flex-direction: column;
+  }
+
+  .a1-field-row > * {
+    flex: none;
+    width: 100%;
+  }
+
+  .a1-field-row > .a1-field--fit {
+    width: fit-content;
+  }
+}

package/src/components/fieldset/Fieldset.jsx

@@ -0,0 +1,49 @@
+import { FieldsetContext } from "./FieldsetContext.js";
+import "./fieldset.css";
+
+const SIZES           = ["comfortable", "default", "compact"];
+const LABEL_POSITIONS = ["above", "side"];
+
+export function Fieldset({
+  legend,
+  size,
+  labelPosition,
+  markRequired = false,
+  surface = false,
+  children,
+  className = "",
+  ...props
+}) {
+  const resolvedSize     = SIZES.includes(size)           ? size          : undefined;
+  const resolvedPosition = LABEL_POSITIONS.includes(labelPosition) ? labelPosition : undefined;
+
+  // Note appears for compact/default; comfortable fields already show a "Required" badge.
+  const showRequiredNote = markRequired && resolvedSize !== "comfortable";
+
+  const classes = [
+    "a1-fieldset",
+    surface && "a1-fieldset--surface",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <FieldsetContext.Provider value={{ size: resolvedSize, labelPosition: resolvedPosition }}>
+      <fieldset className={classes} {...props}>
+        {legend && (
+          <legend className={`a1-fieldset__legend${showRequiredNote ? " a1-fieldset__legend--has-note" : ""}`}>
+            {legend}
+          </legend>
+        )}
+        {showRequiredNote && (
+          <p className="a1-fieldset__required-note">
+            <span className="a1-fieldset__required-note__asterisk">*</span>
+            {" "}Required field
+          </p>
+        )}
+        <div className="a1-fieldset__body">
+          {children}
+        </div>
+      </fieldset>
+    </FieldsetContext.Provider>
+  );
+}

package/src/components/fieldset/fieldset.css

@@ -0,0 +1,75 @@
+/* ─── Fieldset — reset browser defaults ──────────────────────────────────── */
+
+.a1-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0; /* prevents default overflow on narrow containers */
+}
+
+/* ─── Legend ─────────────────────────────────────────────────────────────── */
+
+.a1-fieldset__legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: var(--base-spacing-16);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-lg);
+  font-weight: var(--component-field-label-font-weight);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+/* Tighten bottom margin when the required note follows */
+.a1-fieldset__legend--has-note {
+  margin-bottom: var(--base-spacing-4);
+}
+
+/* ─── Required note (* Required field) ───────────────────────────────────── */
+
+.a1-fieldset__required-note {
+  margin: 0 0 var(--base-spacing-12);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-xs);
+  color: var(--semantic-color-text-muted);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-fieldset__required-note__asterisk {
+  color: var(--semantic-color-status-info-background);
+}
+
+/* ─── Body ───────────────────────────────────────────────────────────────── */
+
+.a1-fieldset__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-16);
+}
+
+/* ─── Surface variant ────────────────────────────────────────────────────── */
+
+.a1-fieldset--surface {
+  background: var(--semantic-color-surface-page);
+  border: var(--component-card-border-width) solid var(--semantic-color-border-subtle);
+  border-radius: var(--component-card-border-radius);
+  box-shadow: var(--component-card-shadow);
+  padding: var(--component-card-padding);
+}
+
+/*
+ * float: left is the standard hack to pull <legend> out of its special
+ * browser rendering (where it would otherwise sit on top of the border).
+ * With float the legend becomes a normal block at the top of the card.
+ */
+.a1-fieldset--surface > .a1-fieldset__legend {
+  float: left;
+  width: 100%;
+}
+
+/* Clear the legend float so subsequent content flows below it */
+.a1-fieldset--surface > .a1-fieldset__required-note,
+.a1-fieldset--surface > .a1-fieldset__body {
+  clear: left;
+}

package/src/components/figure/Figure.jsx

@@ -0,0 +1,63 @@
+import "./figure.css";
+import { Bleed } from "../bleed/Bleed.jsx";
+
+const rounded = ["none", "sm", "md", "lg"];
+const captionPositions = ["start", "center"];
+const spacings = ["sm", "md", "lg"];
+const sizes = ["xs", "sm", "md", "lg"];
+const alignments = ["start", "center", "end"];
+
+export function Figure({
+  src,
+  alt = "",
+  caption,
+  captionSrOnly = false,
+  captionPosition = "start",
+  radius,
+  size,
+  align,
+  marginTop,
+  marginBottom,
+  bleed,
+  className = "",
+  imgClassName = "",
+  style,
+  imgStyle,
+  ...props
+}) {
+  const classes = [
+    "a1-figure",
+    radius != null && rounded.includes(radius) && `a1-figure--rounded-${radius}`,
+    captionPositions.includes(captionPosition) && captionPosition !== "start" && `a1-figure--caption-${captionPosition}`,
+    sizes.includes(size) && `a1-figure--${size}`,
+    alignments.includes(align) && align !== "start" && `a1-figure--align-${align}`,
+    spacings.includes(marginTop) && `a1-figure--mt-${marginTop}`,
+    spacings.includes(marginBottom) && `a1-figure--mb-${marginBottom}`,
+    className,
+  ].filter(Boolean).join(" ");
+
+  const captionClasses = [
+    captionSrOnly ? "a1-sr-only" : "a1-figure__caption",
+  ].join(" ");
+
+  const figure = (
+    <figure className={classes} style={style} {...props}>
+      <img
+        src={src}
+        alt={alt}
+        className={["a1-figure__img", imgClassName].filter(Boolean).join(" ")}
+        style={imgStyle}
+      />
+      {caption && (
+        <figcaption className={captionClasses}>{caption}</figcaption>
+      )}
+    </figure>
+  );
+
+  if (bleed) {
+    const inlineValue = bleed === true ? undefined : bleed;
+    return <Bleed inline={inlineValue}>{figure}</Bleed>;
+  }
+
+  return figure;
+}

package/src/components/figure/figure.css

@@ -0,0 +1,97 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   Figure
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@import "../../utilities/sr-only.css";
+
+.a1-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-8);
+}
+
+.a1-figure__img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--base-radius-container);
+}
+
+.a1-figure__caption {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--semantic-font-weight-body);
+  line-height: var(--semantic-font-line-height-body);
+  color: var(--semantic-color-text-muted);
+  font-style: italic;
+}
+
+/* ── Rounded modifier ──────────────────────────────────────────────────────── */
+
+.a1-figure--rounded .a1-figure__img {
+  border-radius: var(--base-radius-container);
+}
+
+.a1-figure--rounded-none .a1-figure__img {
+  border-radius: 0;
+}
+
+.a1-figure--rounded-sm .a1-figure__img {
+  border-radius: var(--base-radius-sm);
+}
+
+.a1-figure--rounded-md .a1-figure__img {
+  border-radius: var(--base-radius-md);
+}
+
+.a1-figure--rounded-lg .a1-figure__img {
+  border-radius: var(--base-radius-lg);
+}
+
+/* ── Margin ──────────────────────────────────────────────────────────────── */
+
+.a1-figure--mt-sm { margin-top: var(--base-spacing-8); }
+.a1-figure--mt-md { margin-top: var(--base-spacing-16); }
+.a1-figure--mt-lg { margin-top: var(--base-spacing-24); }
+
+.a1-figure--mb-sm { margin-bottom: var(--base-spacing-8); }
+.a1-figure--mb-md { margin-bottom: var(--base-spacing-16); }
+.a1-figure--mb-lg { margin-bottom: var(--base-spacing-24); }
+
+/* ── Alignment ───────────────────────────────────────────────────────────── */
+
+/* start/end: constrain the figure itself and shift via margin */
+.a1-figure--align-end { margin-inline-start: auto; }
+
+/* center: figure stays full-width; size constrains img + caption */
+.a1-figure--align-center { align-items: center; }
+
+/* ── Size ────────────────────────────────────────────────────────────────── */
+
+/* Default: constrain the figure element */
+.a1-figure--xs { max-width: 12rem; }
+.a1-figure--sm { max-width: 20rem; }
+.a1-figure--md { max-width: 30rem; }
+.a1-figure--lg { max-width: 40rem; }
+
+/* Center override: transfer the constraint to img + caption instead */
+.a1-figure--align-center { max-width: none; }
+
+.a1-figure--align-center.a1-figure--xs .a1-figure__img,
+.a1-figure--align-center.a1-figure--xs .a1-figure__caption { max-width: 12rem; }
+
+.a1-figure--align-center.a1-figure--sm .a1-figure__img,
+.a1-figure--align-center.a1-figure--sm .a1-figure__caption { max-width: 20rem; }
+
+.a1-figure--align-center.a1-figure--md .a1-figure__img,
+.a1-figure--align-center.a1-figure--md .a1-figure__caption { max-width: 30rem; }
+
+.a1-figure--align-center.a1-figure--lg .a1-figure__img,
+.a1-figure--align-center.a1-figure--lg .a1-figure__caption { max-width: 40rem; }
+
+/* ── Caption position ──────────────────────────────────────────────────────── */
+
+.a1-figure--caption-center .a1-figure__caption {
+  text-align: center;
+}

package/src/components/grid/Grid.jsx

@@ -1,9 +1,20 @@
 import "./grid.css";
 
 const SPACING_KEYS = [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 64, 96, 128];
+const gapSizes = {
+  sm:  "var(--base-spacing-8)",
+  md:  "var(--base-spacing-16)",
+  lg:  "var(--base-spacing-24)",
+  xl:  "var(--base-spacing-32)",
+  xxl: "var(--base-spacing-64)",
+};
+const layouts = ["default", "bento"];
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 
 function resolveGap(key) {
   if (key == null) return undefined;
+  if (gapSizes[key]) return gapSizes[key];
+
   const n = Number(key);
   return SPACING_KEYS.includes(n) ? `var(--base-spacing-${n})` : undefined;
 }
@@ -13,11 +24,18 @@ export function Grid({
   gap,
   rowGap,
   columnGap,
+  layout = "default",
+  autoRows,
   className = "",
   children,
   ...props
 }) {
   const classes = ["a1-grid"];
+  const resolvedLayout = layouts.includes(layout) ? layout : "default";
+
+  if (resolvedLayout !== "default") {
+    classes.push(`a1-grid--${resolvedLayout}`);
+  }
 
   let inlineCols;
   if (typeof columns === "number") {
@@ -36,6 +54,7 @@ export function Grid({
 
   const style = {
     ...(inlineCols != null ? { "--a1-grid-cols": inlineCols } : {}),
+    ...(autoRows ? { "--a1-grid-auto-rows": autoRows } : {}),
     ...(rowGapVal  ? { rowGap: rowGapVal }    : {}),
     ...(colGapVal  ? { columnGap: colGapVal } : {}),
     ...props.style,
@@ -57,13 +76,28 @@ export function GridItem({
 }) {
   const classes = ["a1-grid-item"];
 
-  if (span === "full") {
+  if (span && typeof span === "object") {
+    for (const [bp, value] of Object.entries(span)) {
+      if (!breakpoints.includes(bp)) continue;
+      if (value === "full") {
+        classes.push(`a1-grid-item--${bp}-span-full`);
+      } else if (typeof value === "number") {
+        classes.push(`a1-grid-item--${bp}-span-${value}`);
+      }
+    }
+  } else if (span === "full") {
     classes.push("a1-grid-item--span-full");
   } else if (typeof span === "number") {
     classes.push(`a1-grid-item--span-${span}`);
   }
 
-  if (typeof rowSpan === "number") {
+  if (rowSpan && typeof rowSpan === "object") {
+    for (const [bp, value] of Object.entries(rowSpan)) {
+      if (breakpoints.includes(bp) && typeof value === "number") {
+        classes.push(`a1-grid-item--${bp}-row-span-${value}`);
+      }
+    }
+  } else if (typeof rowSpan === "number") {
     classes.push(`a1-grid-item--row-span-${rowSpan}`);
   }