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

package/src/components/stack/Stack.jsx

@@ -0,0 +1,100 @@
+import "./stack.css";
+import { resolveSpacing } from "../structure-utils.js";
+
+const directions = ["column", "column-reverse", "row", "row-reverse"];
+const alignments = ["stretch", "start", "center", "end", "baseline"];
+const justifications = ["start", "center", "end", "between", "around", "evenly"];
+const semanticGaps = ["xs", "sm", "md", "lg"];
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+
+function resolveGap(gap) {
+  if (semanticGaps.includes(gap)) return `var(--semantic-spacing-gap-${gap})`;
+  return resolveSpacing(gap);
+}
+
+function isResponsive(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function resolveBaseDirection(direction) {
+  if (!isResponsive(direction)) return directions.includes(direction) ? direction : "column";
+  return directions.includes(direction.xs) ? direction.xs : "column";
+}
+
+function getResponsiveDirectionStyle(direction) {
+  const base = resolveBaseDirection(direction);
+  let lastKnown = base;
+  return breakpoints.slice(1).reduce((style, bp) => {
+    if (isResponsive(direction) && directions.includes(direction[bp])) {
+      lastKnown = direction[bp];
+    }
+    style[`--a1-stack-direction-${bp}`] = lastKnown;
+    return style;
+  }, {});
+}
+
+function resolveBaseJustify(justify) {
+  if (!isResponsive(justify)) return justifications.includes(justify) ? justify : "start";
+  return justifications.includes(justify.xs) ? justify.xs : "start";
+}
+
+function getResponsiveJustifyStyle(justify) {
+  if (!isResponsive(justify)) return {};
+  const base = resolveBaseJustify(justify);
+  let lastKnown = base;
+  return breakpoints.slice(1).reduce((style, bp) => {
+    if (justifications.includes(justify[bp])) lastKnown = justify[bp];
+    style[`--a1-stack-justify-${bp}`] = justifyMap[lastKnown];
+    return style;
+  }, {});
+}
+
+const justifyMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+};
+
+const alignMap = {
+  stretch: "stretch",
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline",
+};
+
+export function Stack({
+  as: Component = "div",
+  direction = "column",
+  gap = 16,
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  className = "",
+  children,
+  ...props
+}) {
+  const resolvedDirection = resolveBaseDirection(direction);
+  const resolvedAlign = alignments.includes(align) ? align : "stretch";
+  const resolvedJustify = resolveBaseJustify(justify);
+
+  const style = {
+    "--a1-stack-direction": resolvedDirection,
+    "--a1-stack-gap": resolveGap(gap),
+    "--a1-stack-align": alignMap[resolvedAlign],
+    "--a1-stack-justify": justifyMap[resolvedJustify],
+    "--a1-stack-wrap": wrap ? "wrap" : "nowrap",
+    ...getResponsiveDirectionStyle(direction),
+    ...getResponsiveJustifyStyle(justify),
+    ...props.style,
+  };
+
+  return (
+    <Component className={["a1-stack", className].filter(Boolean).join(" ")} style={style} {...props}>
+      {children}
+    </Component>
+  );
+}

package/src/components/stack/stack.css

@@ -0,0 +1,37 @@
+.a1-stack {
+  display: flex;
+  flex-direction: var(--a1-stack-direction-responsive, var(--a1-stack-direction, column));
+  flex-wrap: var(--a1-stack-wrap, nowrap);
+  align-items: var(--a1-stack-align, stretch);
+  justify-content: var(--a1-stack-justify-responsive, var(--a1-stack-justify, flex-start));
+  gap: var(--a1-stack-gap, var(--base-spacing-16));
+  min-width: 0;
+}
+
+@media (--bp-sm-up) {
+  .a1-stack {
+    --a1-stack-direction-responsive: var(--a1-stack-direction-sm, var(--a1-stack-direction, column));
+    --a1-stack-justify-responsive: var(--a1-stack-justify-sm, var(--a1-stack-justify, flex-start));
+  }
+}
+
+@media (--bp-md-up) {
+  .a1-stack {
+    --a1-stack-direction-responsive: var(--a1-stack-direction-md, var(--a1-stack-direction-sm, var(--a1-stack-direction, column)));
+    --a1-stack-justify-responsive: var(--a1-stack-justify-md, var(--a1-stack-justify-sm, var(--a1-stack-justify, flex-start)));
+  }
+}
+
+@media (--bp-lg-up) {
+  .a1-stack {
+    --a1-stack-direction-responsive: var(--a1-stack-direction-lg, var(--a1-stack-direction-md, var(--a1-stack-direction-sm, var(--a1-stack-direction, column))));
+    --a1-stack-justify-responsive: var(--a1-stack-justify-lg, var(--a1-stack-justify-md, var(--a1-stack-justify-sm, var(--a1-stack-justify, flex-start))));
+  }
+}
+
+@media (--bp-xl) {
+  .a1-stack {
+    --a1-stack-direction-responsive: var(--a1-stack-direction-xl, var(--a1-stack-direction-lg, var(--a1-stack-direction-md, var(--a1-stack-direction-sm, var(--a1-stack-direction, column)))));
+    --a1-stack-justify-responsive: var(--a1-stack-justify-xl, var(--a1-stack-justify-lg, var(--a1-stack-justify-md, var(--a1-stack-justify-sm, var(--a1-stack-justify, flex-start)))));
+  }
+}

package/src/components/switch/Switch.jsx

@@ -0,0 +1,114 @@
+import { useId, useState, useContext } from "react";
+import { FieldsetContext } from "../fieldset/FieldsetContext.js";
+import "./switch.css";
+
+const SIZES           = ["comfortable", "default", "compact"];
+const LABEL_POSITIONS = ["end", "start"];
+
+export function Switch({
+  label,
+  hint,
+  error,
+  size,
+  labelPosition,
+  disabled        = false,
+  checked,
+  defaultChecked  = false,
+  onChange,
+  id: providedId,
+  className       = "",
+  name,
+  value,
+  ...props
+}) {
+  const ctx    = useContext(FieldsetContext);
+  const autoId = useId();
+  const id     = providedId ?? autoId;
+  const hintId  = `${id}-hint`;
+  const errorId = `${id}-error`;
+
+  const resolvedSize     = SIZES.includes(size)           ? size          : (ctx?.size ?? "default");
+  const resolvedPosition = LABEL_POSITIONS.includes(labelPosition) ? labelPosition : "end";
+
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = checked !== undefined ? checked : internalChecked;
+
+  function handleChange(e) {
+    if (checked === undefined) setInternalChecked(e.target.checked);
+    onChange?.(e.target.checked, e);
+  }
+
+  const classes = [
+    "a1-switch",
+    `a1-switch--${resolvedSize}`,
+    label    && `a1-switch--label-${resolvedPosition}`,
+    error    && "a1-switch--error",
+    disabled && "a1-switch--disabled",
+    className,
+  ].filter(Boolean).join(" ");
+
+  const describedBy = [
+    error ? errorId : hint ? hintId : null,
+  ].filter(Boolean).join(" ") || undefined;
+
+  /* The input is sr-only — the <span className="a1-switch__track"> provides
+     all visual affordance. CSS uses input + track (adjacent sibling) to
+     respond to :checked, :focus-visible, :disabled, etc. on a real element
+     where ::before transitions are fully supported. */
+  const input = (
+    <input
+      type="checkbox"
+      role="switch"
+      id={id}
+      className="a1-switch__input"
+      checked={isChecked}
+      disabled={disabled}
+      onChange={handleChange}
+      aria-describedby={describedBy}
+      aria-invalid={error ? "true" : undefined}
+      name={name}
+      value={value}
+      {...props}
+    />
+  );
+
+  const track = (
+    <span
+      className={`a1-switch__track${isChecked ? " a1-switch__track--on" : ""}`}
+      aria-hidden="true"
+    />
+  );
+
+  return (
+    <div className={classes}>
+      {label ? (
+        <label className="a1-switch__row">
+          {input}
+          {track}
+          <div className="a1-switch__content">
+            <span className="a1-switch__label">{label}</span>
+            {hint && !error && (
+              <p className="a1-switch__message a1-switch__message--hint" id={hintId}>{hint}</p>
+            )}
+            {error && (
+              <p className="a1-switch__message a1-switch__message--error" id={errorId} role="alert">{error}</p>
+            )}
+          </div>
+        </label>
+      ) : (
+        <>
+          <label className="a1-switch__row">
+            {input}
+            {track}
+          </label>
+          {hint && !error && (
+            <p className="a1-switch__message a1-switch__message--hint" id={hintId}>{hint}</p>
+          )}
+          {error && (
+            <p className="a1-switch__message a1-switch__message--error" id={errorId} role="alert">{error}</p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/switch/switch.css

@@ -0,0 +1,276 @@
+/* ─── Switch ───────────────────────────────────────────────────────────────── */
+
+.a1-switch {
+  /* Size tokens — default */
+  --a1-sw-track-width:  var(--component-switch-track-width);
+  --a1-sw-track-height: var(--component-switch-track-height);
+  --a1-sw-thumb:        var(--component-switch-thumb-size);    /* track-height - 2*gap */
+  --a1-sw-gap:          var(--component-switch-gap);
+  --a1-sw-row-gap:      var(--component-switch-row-gap);     /* gap between track and label content */
+  --a1-sw-row-py:       var(--component-switch-row-padding-block);
+  --a1-sw-row-px:       var(--component-switch-row-padding-inline);
+  --a1-sw-content-gap:  var(--component-switch-content-gap);     /* gap between label text and hint */
+  --a1-sw-group-gap:    var(--component-switch-group-gap);     /* outer flex gap (for no-label hint/error) */
+  --a1-sw-label-size:   var(--semantic-font-size-body-md);
+  --a1-sw-msg-size:     var(--semantic-font-size-body-xs);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-sw-group-gap);
+}
+
+/* ─── Sizes ───────────────────────────────────────────────────────────────── */
+
+.a1-switch--comfortable {
+  --a1-sw-track-width:  var(--component-switch-comfortable-track-width);
+  --a1-sw-track-height: var(--component-switch-comfortable-track-height);
+  --a1-sw-thumb:        var(--component-switch-comfortable-thumb-size);
+  --a1-sw-gap:          var(--component-switch-comfortable-gap);
+  --a1-sw-row-gap:      var(--component-switch-comfortable-row-gap);
+  --a1-sw-row-py:       var(--component-switch-comfortable-row-padding-block);
+  --a1-sw-row-px:       var(--component-switch-comfortable-row-padding-inline);
+  --a1-sw-content-gap:  var(--component-switch-comfortable-content-gap);
+  --a1-sw-group-gap:    var(--component-switch-comfortable-group-gap);
+  --a1-sw-label-size:   var(--semantic-font-size-body-md);
+  --a1-sw-msg-size:     var(--semantic-font-size-body-sm);
+}
+
+.a1-switch--comfortable .a1-switch__label {
+  font-weight: var(--base-font-weight-bold);
+}
+
+@media (--bp-md-up) {
+  .a1-switch--comfortable {
+    --a1-sw-label-size: var(--semantic-font-size-body-lg);
+  }
+}
+
+.a1-switch--compact {
+  --a1-sw-track-width:  var(--component-switch-compact-track-width);
+  --a1-sw-track-height: var(--component-switch-compact-track-height);
+  --a1-sw-thumb:        var(--component-switch-compact-thumb-size);
+  --a1-sw-gap:          var(--component-switch-compact-gap);
+  --a1-sw-row-gap:      var(--component-switch-compact-row-gap);
+  --a1-sw-row-py:       var(--component-switch-compact-row-padding-block);
+  --a1-sw-row-px:       var(--component-switch-compact-row-padding-inline);
+  --a1-sw-content-gap:  var(--component-switch-compact-content-gap);
+  --a1-sw-group-gap:    var(--component-switch-compact-group-gap);
+  --a1-sw-label-size:   var(--semantic-font-size-body-sm);
+  --a1-sw-msg-size:     var(--semantic-font-size-body-xs);
+}
+
+/* ─── Input — sr-only ────────────────────────────────────────────────────────
+   Hidden from sighted users; the adjacent .a1-switch__track span provides all
+   visual affordance. Keyboard and screen-reader users interact with the input
+   directly. position:absolute removes it from flex flow without hiding it from
+   assistive technology.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.a1-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Label row ───────────────────────────────────────────────────────────── */
+
+.a1-switch__row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--a1-sw-row-gap);
+  cursor: pointer;
+  padding: var(--a1-sw-row-py) var(--a1-sw-row-px);
+  margin-inline: calc(-1 * var(--a1-sw-row-px));
+  border-radius: var(--base-radius-md);
+  transition: background-color var(--semantic-motion-duration-fast);
+}
+
+.a1-switch--disabled .a1-switch__row {
+  cursor: not-allowed;
+}
+
+.a1-switch--label-start .a1-switch__row {
+  flex-direction: row-reverse;
+}
+
+/* ─── Hover — row background ─────────────────────────────────────────────── */
+
+.a1-switch:not(.a1-switch--disabled) .a1-switch__row:hover {
+  background-color: var(--a1-field-hover-background);
+}
+
+/* ─── Active — checked state deepens the row ─────────────────────────────── */
+
+.a1-switch:not(.a1-switch--disabled) .a1-switch__row:has(.a1-switch__track--on):active {
+  background-color: var(--a1-field-active-background);
+}
+
+/* ─── Label content block ─────────────────────────────────────────────────── */
+
+.a1-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a1-sw-content-gap);
+}
+
+/* ─── Label text ──────────────────────────────────────────────────────────── */
+
+.a1-switch__label {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-sw-label-size);
+  font-weight: var(--base-font-weight-regular);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+  user-select: none;
+}
+
+.a1-switch--disabled .a1-switch__label {
+  color: var(--semantic-color-text-muted);
+}
+
+/* ─── Track ───────────────────────────────────────────────────────────────────
+   box-sizing: content-box keeps the thumb travel formula correct:
+     travel = track-width − track-height
+   The 1px border adds to the outer visual size without affecting the content
+   area used for positioning ::before (the thumb).
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.a1-switch__track {
+  box-sizing: content-box;
+  display: block;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--a1-sw-track-width);
+  height: var(--a1-sw-track-height);
+  border-radius: var(--a1-sw-track-height);
+  border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
+  background-color: var(--semantic-color-surface-page);
+  cursor: pointer;
+  transition:
+    background-color var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard),
+    border-color     var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard);
+}
+
+/* ─── Thumb ───────────────────────────────────────────────────────────────── */
+
+.a1-switch__track::before {
+  content: "";
+  position: absolute;
+  top: var(--a1-sw-gap);
+  left: var(--a1-sw-gap);
+  width: var(--a1-sw-thumb);
+  height: var(--a1-sw-thumb);
+  border-radius: 50%;
+  background-color: var(--semantic-color-status-info-background);
+  box-shadow: var(--component-switch-thumb-shadow);
+  transform: translateX(0);
+  transition:
+    transform         var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard),
+    background-color  var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard);
+}
+
+/* ─── Hover — off-state border darkens ───────────────────────────────────── */
+
+.a1-switch:not(.a1-switch--disabled) .a1-switch__row:hover
+  .a1-switch__track:not(.a1-switch__track--on) {
+  border-color: var(--a1-field-hover-border-color);
+}
+
+/* ─── Checked ─────────────────────────────────────────────────────────────── */
+
+.a1-switch__track--on {
+  background-color: var(--semantic-color-status-info-background);
+  border-color: var(--semantic-color-status-info-background);
+}
+
+.a1-switch__track--on::before {
+  background-color: var(--base-color-neutral-0);
+  transform: translateX(calc(var(--a1-sw-track-width) - var(--a1-sw-track-height)));
+}
+
+/* ─── Focus ring on track ─────────────────────────────────────────────────── */
+
+.a1-switch__input:focus-visible + .a1-switch__track {
+  outline: var(--component-field-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: var(--component-field-focus-ring-offset);
+}
+
+/* ─── Error ───────────────────────────────────────────────────────────────── */
+
+.a1-switch--error:not(.a1-switch--disabled) .a1-switch__track:not(.a1-switch__track--on) {
+  border-color: var(--semantic-color-status-error-border);
+}
+
+/* ─── Disabled ────────────────────────────────────────────────────────────── */
+
+.a1-switch__input:disabled + .a1-switch__track {
+  background-color: var(--semantic-color-surface-raised);
+  border-color: var(--semantic-color-border-subtle);
+  cursor: not-allowed;
+}
+
+.a1-switch__input:disabled + .a1-switch__track::before {
+  background-color: var(--semantic-color-border-default);
+  box-shadow: none;
+}
+
+.a1-switch__input:checked:disabled + .a1-switch__track {
+  background-color: var(--semantic-color-border-default);
+  border-color: var(--semantic-color-border-default);
+}
+
+.a1-switch__input:checked:disabled + .a1-switch__track::before {
+  background-color: var(--semantic-color-surface-raised);
+}
+
+/* ─── Hint / error messages ───────────────────────────────────────────────── */
+
+.a1-switch__message {
+  margin: 0;
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--a1-sw-msg-size);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-switch__message--hint  { color: var(--semantic-color-text-muted); }
+.a1-switch__message--error {
+  color: var(--semantic-color-status-error-background);
+  font-weight: var(--component-switch-message-error-font-weight);
+}
+
+/* ─── Accessible theme — on/off icon stamped onto the thumb ──────────────────
+   Off = "O" (open circle / power-off); On = "|" (vertical bar / power-on).
+   The ::after travels with the thumb using the same translateX transition.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.a1-theme-accessible .a1-switch__track::after {
+  content: "O";
+  position: absolute;
+  top: var(--a1-sw-gap);
+  left: var(--a1-sw-gap);
+  width: var(--a1-sw-thumb);
+  height: var(--a1-sw-thumb);
+  border-radius: 50%;
+  color: var(--semantic-color-status-info-foreground);
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--component-switch-accessible-icon-size);
+  font-weight: var(--base-font-weight-bold);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  transition: transform var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard);
+}
+
+.a1-theme-accessible .a1-switch__track--on::after {
+  content: "|";
+  transform: translateX(calc(var(--a1-sw-track-width) - var(--a1-sw-track-height)));
+  color: var(--semantic-color-status-info-background);
+}

package/src/components/system-banner/SystemBanner.jsx

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