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

package/src/components/tabs/tabs.css

@@ -1,10 +1,58 @@
 /* ─── Tabs ────────────────────────────────────────────────────────────────── */
 
 .a1-tabs {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 
+/* ─── Tab list wrapper ────────────────────────────────────────────────────── */
+
+/*
+ * Wrapper is a flex row — scroll buttons are flex siblings of the tab list.
+ * Line variant: border-bottom lives on wrapper (always full-width).
+ * Folder variant: border-bottom, padding, and align-items live on wrapper.
+ */
+
+.a1-tab-list-wrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+.a1-tab-list-wrapper--line {
+  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-subtle);
+}
+
+.a1-tab-list-wrapper--folder {
+  align-items: flex-end;
+  gap: var(--base-spacing-4);
+  padding: var(--base-spacing-8) var(--base-spacing-8) 0;
+  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
+}
+
+/* ─── Scroll buttons (line variant only) ─────────────────────────────────── */
+
+.a1-tab-list__scroll-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--component-tab-scroll-button-width);
+  background: var(--semantic-color-surface-page);
+  border: none;
+  cursor: pointer;
+  color: var(--semantic-color-text-muted);
+  padding: 0;
+}
+
+.a1-tab-list__scroll-btn:hover {
+  color: var(--semantic-color-text-default);
+}
+
+.a1-tab-list__scroll-btn .a1-icon {
+  font-size: var(--component-tab-scroll-button-icon-size);
+}
+
 /* ─── Tab list ────────────────────────────────────────────────────────────── */
 
 .a1-tab-list {
@@ -12,10 +60,20 @@
   flex-shrink: 0;
 }
 
+/* Line variant gets overflow scroll; the tab list scrolls, wrapper border stays full-width */
+.a1-tab-list--scrollable {
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.a1-tab-list--scrollable::-webkit-scrollbar {
+  display: none;
+}
+
 /* ── Line variant ───────────────────────────────────────────────────────── */
 
 .a1-tab-list--line {
-  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-subtle);
   gap: 0;
 }
 
@@ -24,8 +82,7 @@
 .a1-tab-list--folder {
   align-items: flex-end;
   gap: var(--base-spacing-4);
-  padding: var(--base-spacing-8) var(--base-spacing-8) 0;
-  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
+  flex: 1;
 }
 
 /* ─── Tab button ──────────────────────────────────────────────────────────── */
@@ -48,12 +105,53 @@
   border-radius: var(--base-radius-control);
 }
 
+/* ── Icon styles ─────────────────────────────────────────────────────────── */
+
+.a1-tab__icon {
+  font-size: var(--component-tab-icon-size);
+  flex-shrink: 0;
+}
+
+.a1-tab--icon-above {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--base-spacing-4);
+  white-space: normal;
+  text-align: center;
+}
+
+.a1-tab--icon-above .a1-tab__icon {
+  font-size: var(--component-tab-icon-above-size);
+}
+
+/* ── Count badge ─────────────────────────────────────────────────────────── */
+
+.a1-tab__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--component-tab-count-min-width);
+  height: var(--component-tab-count-height);
+  padding: 0 var(--component-tab-count-padding-inline);
+  border-radius: var(--component-tab-count-border-radius);
+  font-size: var(--component-tab-count-font-size);
+  font-weight: var(--base-font-weight-medium);
+  line-height: var(--component-tab-count-line-height);
+  background: var(--semantic-color-surface-raised);
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-tab[aria-selected="true"] .a1-tab__count {
+  background: color-mix(in srgb, var(--semantic-color-action-background) 12%, transparent);
+  color: var(--semantic-color-action-background);
+}
+
 /* ── Line tab ───────────────────────────────────────────────────────────── */
 
 .a1-tab--line {
   padding: var(--component-tab-padding-block) var(--component-tab-padding-inline);
   font-size: var(--semantic-font-size-body-sm);
-  font-weight: var(--component-tab-font-weight-default);
+  font-weight: var(--base-font-weight-medium);
   color: var(--semantic-color-text-muted);
   border-bottom: var(--component-tab-indicator-size) solid transparent;
   margin-bottom: var(--component-tab-margin-bottom);
@@ -66,8 +164,8 @@
 
 .a1-tab--line[aria-selected="true"] {
   color: var(--semantic-color-action-background);
-  font-weight: var(--component-tab-font-weight-active);
   border-bottom-color: var(--semantic-color-action-background);
+  cursor: default;
 }
 
 /* ── Folder tab ─────────────────────────────────────────────────────────── */
@@ -75,14 +173,15 @@
 .a1-tab--folder {
   padding: var(--component-tab-padding-block) var(--component-tab-padding-inline);
   font-size: var(--semantic-font-size-body-sm);
-  font-weight: var(--component-tab-font-weight-default);
+  font-weight: var(--base-font-weight-medium);
   color: var(--semantic-color-text-muted);
   background: var(--semantic-color-surface-panel);
   border: var(--component-tab-border-width) solid var(--semantic-color-border-default);
-  border-bottom: none;
+  border-bottom: var(--component-tab-border-width) solid transparent;
   border-radius: var(--base-radius-lg) var(--base-radius-lg) 0 0;
   margin-bottom: var(--component-tab-margin-bottom);
   position: relative;
+  overflow: visible;
 }
 
 .a1-tab--folder:hover:not([aria-selected="true"]) {
@@ -93,9 +192,184 @@
 .a1-tab--folder[aria-selected="true"] {
   background: var(--semantic-color-surface-page);
   color: var(--semantic-color-text-default);
-  font-weight: var(--component-tab-font-weight-active);
   border-color: var(--semantic-color-border-strong);
+  border-bottom-color: var(--semantic-color-surface-page);
   z-index: var(--component-tab-z-index-active);
+  cursor: default;
+}
+
+/* Outward curves at active folder tab bottom corners */
+.a1-tab--folder[aria-selected="true"]::before,
+.a1-tab--folder[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  bottom: var(--component-tab-margin-bottom);
+  width: var(--base-radius-lg);
+  height: var(--base-radius-lg);
+  pointer-events: none;
+  z-index: var(--component-tab-z-index-active);
+  background: var(--semantic-color-surface-page);
+}
+
+.a1-tab--folder[aria-selected="true"]::before {
+  left: calc(-1 * var(--base-radius-lg));
+  border-right: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
+  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
+  border-bottom-right-radius: var(--base-radius-lg);
+}
+
+.a1-tab--folder[aria-selected="true"]::after {
+  right: calc(-1 * var(--base-radius-lg));
+  border-left: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
+  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
+  border-bottom-left-radius: var(--base-radius-lg);
+}
+
+/* ── Progress variant ───────────────────────────────────────────────────── */
+
+.a1-tab-list-wrapper--progress {
+  border-bottom: none;
+}
+
+.a1-tab-list--progress {
+  counter-reset: progress-step;
+  gap: 0;
+  align-items: flex-start;
+  flex: 1;
+}
+
+/* Custom properties for responsive step geometry */
+.a1-tab--progress {
+  --_step-pad-top: var(--base-spacing-8);
+  --_step-size: var(--component-tab-progress-step-size);
+}
+
+@media (--bp-md-up) {
+  .a1-tab--progress {
+    --_step-pad-top: var(--base-spacing-16);
+    --_step-size: var(--component-tab-progress-step-size-md);
+  }
+}
+
+.a1-tab--progress {
+  counter-increment: progress-step;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--base-spacing-6);
+  padding: var(--_step-pad-top) var(--base-spacing-4) var(--base-spacing-8);
+  font-size: var(--semantic-font-size-body-sm);
+  font-weight: var(--base-font-weight-medium);
+  color: var(--semantic-color-text-muted);
+  background: transparent;
+  border: none;
+  position: relative;
+  white-space: normal;
+  text-align: center;
+  cursor: pointer;
+}
+
+.a1-tab--progress:hover {
+  color: var(--semantic-color-text-default);
+}
+
+/* Connecting line — left half (coming from previous step) */
+.a1-tab--progress:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: calc(var(--_step-pad-top) + var(--_step-size) / 2);
+  left: 0;
+  width: 50%;
+  height: var(--component-tab-progress-line-height);
+  background: var(--semantic-color-border-subtle);
+  z-index: 0;
+}
+
+/* Connecting line — right half (going to next step) */
+.a1-tab--progress:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--_step-pad-top) + var(--_step-size) / 2);
+  right: 0;
+  width: 50%;
+  height: var(--component-tab-progress-line-height);
+  background: var(--semantic-color-border-subtle);
+  z-index: 0;
+}
+
+/* Color the line going INTO a completed or in-progress step */
+.a1-tab--progress.a1-tab--status-completed:not(:first-child)::before,
+.a1-tab--progress.a1-tab--status-in-progress:not(:first-child)::before {
+  background: var(--semantic-color-status-success-background);
+}
+
+/* Color the line going OUT of a completed step */
+.a1-tab--progress.a1-tab--status-completed:not(:last-child)::after {
+  background: var(--semantic-color-status-success-background);
+}
+
+/* Step circle */
+.a1-tab__step {
+  width: var(--_step-size);
+  height: var(--_step-size);
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--component-tab-progress-step-font-size);
+  font-weight: var(--base-font-weight-semibold);
+  position: relative;
+  z-index: 1;
+  background: var(--semantic-color-surface-page);
+  border: var(--component-tab-progress-step-border-width) solid var(--semantic-color-border-default);
+  color: var(--semantic-color-text-muted);
+  transition:
+    background var(--semantic-motion-duration-fast),
+    border-color var(--semantic-motion-duration-fast),
+    box-shadow var(--semantic-motion-duration-fast);
+}
+
+/* Step number via CSS counter (hidden when completed — icon replaces it) */
+.a1-tab__step::before {
+  content: counter(progress-step);
+}
+
+/* in-progress state */
+.a1-tab--status-in-progress .a1-tab__step {
+  background: var(--semantic-color-action-background);
+  border-color: var(--semantic-color-action-background);
+  color: var(--semantic-color-surface-page);
+}
+
+/* completed state */
+.a1-tab--status-completed .a1-tab__step {
+  background: var(--semantic-color-status-success-background);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-foreground);
+}
+
+.a1-tab--status-completed .a1-tab__step::before {
+  content: none;
+}
+
+.a1-tab--status-completed .a1-tab__step .a1-icon {
+  font-size: var(--component-tab-progress-completed-icon-size);
+}
+
+/* Selected (active view) — ring around step circle */
+.a1-tab--progress[aria-selected="true"] {
+  color: var(--semantic-color-text-default);
+  cursor: default;
+}
+
+.a1-tab--progress[aria-selected="true"] .a1-tab__step {
+  box-shadow: var(--component-tab-progress-selected-ring);
+}
+
+/* Selected todo step gets accent border + color */
+.a1-tab--progress[aria-selected="true"]:not(.a1-tab--status-completed):not(.a1-tab--status-in-progress) .a1-tab__step {
+  border-color: var(--semantic-color-action-background);
+  color: var(--semantic-color-action-background);
 }
 
 /* ─── Level 2 ─────────────────────────────────────────────────────────────── */
@@ -111,10 +385,73 @@
   border-radius: var(--base-radius-control) var(--base-radius-control) 0 0;
 }
 
-.a1-tabs--level-2 .a1-tab-list--folder {
+.a1-tabs--level-2 .a1-tab-list-wrapper--folder {
   padding: var(--base-spacing-4) var(--base-spacing-4) 0;
 }
 
+/* Level-2 folder curves (smaller radius) */
+.a1-tabs--level-2 .a1-tab--folder[aria-selected="true"]::before {
+  left: calc(-1 * var(--base-radius-control));
+  width: var(--base-radius-control);
+  height: var(--base-radius-control);
+  border-bottom-right-radius: var(--base-radius-control);
+}
+
+.a1-tabs--level-2 .a1-tab--folder[aria-selected="true"]::after {
+  right: calc(-1 * var(--base-radius-control));
+  width: var(--base-radius-control);
+  height: var(--base-radius-control);
+  border-bottom-left-radius: var(--base-radius-control);
+}
+
+/* ─── Responsive tab labels (xs/sm: icon-only for inactive tabs) ─────────── */
+
+@media (--bp-sm-down) {
+  .a1-tab {
+    position: relative;
+  }
+
+  /* Visually hide label on inactive tabs — kept in DOM for accessibility */
+  .a1-tab[aria-selected="false"] .a1-tab__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+}
+
+/* ─── Responsive font sizes ───────────────────────────────────────────────── */
+
+@media (--bp-md-up) {
+  .a1-tab--line,
+  .a1-tab--folder,
+  .a1-tab--progress {
+    font-size: var(--semantic-font-size-body-md);
+  }
+
+  .a1-tabs--level-2 .a1-tab--line,
+  .a1-tabs--level-2 .a1-tab--folder {
+    font-size: var(--semantic-font-size-body-sm);
+  }
+}
+
+@media (--bp-lg-up) {
+  .a1-tab--line,
+  .a1-tab--folder,
+  .a1-tab--progress {
+    font-size: var(--semantic-font-size-body-lg);
+  }
+
+  .a1-tabs--level-2 .a1-tab--line,
+  .a1-tabs--level-2 .a1-tab--folder {
+    font-size: var(--semantic-font-size-body-md);
+  }
+}
+
 /* ─── Tab panel ───────────────────────────────────────────────────────────── */
 
 .a1-tab-panel--line {
@@ -123,13 +460,13 @@
 
 .a1-tab-panel--folder {
   background: var(--semantic-color-surface-page);
-  border: var(--component-tab-border-width) solid var(--semantic-color-border-strong);
-  border-top: none;
-  border-radius: 0 0 var(--base-radius-lg) var(--base-radius-lg);
-  padding: var(--base-spacing-16);
+  padding: var(--base-spacing-16) 0 0;
 }
 
 .a1-tabs--level-2 .a1-tab-panel--folder {
-  border-radius: 0 0 var(--base-radius-control) var(--base-radius-control);
-  padding: var(--base-spacing-12);
+  padding: var(--base-spacing-12) 0 0;
+}
+
+.a1-tab-panel--progress {
+  padding: var(--base-spacing-24) 0;
 }

package/src/components/token-select/TokenSelect.jsx

@@ -0,0 +1,159 @@
+import { useId, useRef, useState } from "react";
+import { Menu, MenuSection } from "../menu/Menu.jsx";
+import { Icon } from "../icon/Icon.jsx";
+import "./token-select.css";
+
+// Parse "var(--base-color-accent-500)" → { ramp: "accent", stop: 500 }
+function parseRef(value) {
+  const m = value?.match(/^var\(--base-color-([a-z]+)-(\d+)\)$/);
+  return m ? { ramp: m[1], stop: parseInt(m[2]) } : null;
+}
+
+// Identify which ramp token a raw hex value corresponds to
+function identifyToken(hex, rampColors) {
+  const n = hex?.toLowerCase();
+  if (!n?.startsWith("#")) return null;
+  for (const [ramp, stops] of Object.entries(rampColors)) {
+    for (const [stop, color] of Object.entries(stops)) {
+      if (color?.toLowerCase() === n) return { ramp, stop: parseInt(stop) };
+    }
+  }
+  return null;
+}
+
+function TokenItem({ ramp, stop, hex, selected, onSelect }) {
+  return (
+    <button
+      type="button"
+      className={`a1-token-item${selected ? " a1-token-item--selected" : ""}`}
+      onClick={() => onSelect(ramp, stop)}
+    >
+      <span className="a1-token-item__swatch" style={{ background: hex }} aria-hidden="true" />
+      <span className="a1-token-item__name">{ramp}-{stop}</span>
+      <span className="a1-token-item__hex">{hex}</span>
+      {selected && <Icon name="check" className="a1-token-item__check" />}
+    </button>
+  );
+}
+
+const SIZES = ["comfortable", "default", "compact"];
+
+export function TokenSelect({
+  label,
+  value,
+  onChange,
+  rampColors = {},
+  rampLabels = {},
+  suggestedRamp,
+  size = "compact",
+  disabled = false,
+  id: providedId,
+  className = "",
+}) {
+  const autoId = useId();
+  const id = providedId ?? autoId;
+  const triggerRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  const rampNames = Object.keys(rampColors);
+  const primary = (suggestedRamp && rampColors[suggestedRamp]) ? suggestedRamp : (rampNames[0] ?? "");
+  const others = rampNames.filter((r) => r !== primary);
+
+  const stops = Object.keys(rampColors[primary] ?? rampColors[rampNames[0]] ?? {})
+    .map(Number)
+    .filter((n) => !isNaN(n))
+    .sort((a, b) => a - b);
+
+  const ref = parseRef(value);
+  const identified = ref ?? identifyToken(value, rampColors);
+  const resolvedHex = ref
+    ? (rampColors[ref.ramp]?.[ref.stop] ?? null)
+    : (/^#[0-9a-f]{3,8}$/i.test(value) ? value : null);
+
+  const varName = !identified && value?.match(/^var\(\s*(--[^,)\s]+)/)?.[1];
+  const displayLabel = identified
+    ? `${identified.ramp}-${identified.stop}`
+    : varName ?? "Choose…";
+
+  const resolvedSize = SIZES.includes(size) ? size : "compact";
+
+  function handleSelect(ramp, stop) {
+    onChange?.(`var(--base-color-${ramp}-${stop})`);
+    setOpen(false);
+  }
+
+  const classes = [
+    "a1-field",
+    `a1-field--${resolvedSize}`,
+    "a1-token-select",
+    disabled && "a1-field--disabled",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes}>
+      {label && (
+        <label className="a1-field__label" htmlFor={id}>{label}</label>
+      )}
+      <div className="a1-field__control">
+        <button
+          ref={triggerRef}
+          id={id}
+          type="button"
+          className="a1-field__select a1-token-select__trigger"
+          disabled={disabled}
+          onClick={() => setOpen((v) => !v)}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+        >
+          {resolvedHex && (
+            <span
+              className="a1-token-select__swatch"
+              style={{ background: resolvedHex }}
+              aria-hidden="true"
+            />
+          )}
+          <span className="a1-token-select__value">{displayLabel}</span>
+        </button>
+        <span className="a1-field__chevron" aria-hidden="true">
+          <Icon name="expand_more" />
+        </span>
+      </div>
+
+      <Menu
+        open={open}
+        onClose={() => setOpen(false)}
+        anchorRef={triggerRef}
+        aria-label={label ?? "Select a token"}
+      >
+        <MenuSection label={rampLabels[primary] ?? primary}>
+          {stops.map((stop) => (
+            <TokenItem
+              key={stop}
+              ramp={primary}
+              stop={stop}
+              hex={rampColors[primary]?.[stop] ?? "#ccc"}
+              selected={identified?.ramp === primary && identified?.stop === stop}
+              onSelect={handleSelect}
+            />
+          ))}
+        </MenuSection>
+
+        {others.map((ramp) => (
+          <MenuSection key={ramp} label={rampLabels[ramp] ?? ramp}>
+            {stops.map((stop) => (
+              <TokenItem
+                key={stop}
+                ramp={ramp}
+                stop={stop}
+                hex={rampColors[ramp]?.[stop] ?? "#ccc"}
+                selected={identified?.ramp === ramp && identified?.stop === stop}
+                onSelect={handleSelect}
+              />
+            ))}
+          </MenuSection>
+        ))}
+      </Menu>
+    </div>
+  );
+}