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

package/src/components/segmented-control/segmented.css

@@ -1,6 +1,7 @@
 /* ─── Segmented control ───────────────────────────────────────────────────── */
 
 .a1-segmented {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: stretch;
   background: var(--semantic-color-surface-raised);
@@ -69,6 +70,18 @@
   padding-inline: var(--component-segmented-segment-padding-block);
 }
 
+/* ─── Dark mode ───────────────────────────────────────────────────────────── */
+
+.a1-theme-dark .a1-segment:not([aria-checked="true"]),
+.a1-inverse .a1-segment:not([aria-checked="true"]) {
+  color: var(--base-color-neutral-300);
+}
+
+.a1-theme-dark .a1-segment:hover:not([aria-checked="true"]),
+.a1-inverse .a1-segment:hover:not([aria-checked="true"]) {
+  color: var(--base-color-neutral-100);
+}
+
 /* ─── Full width ──────────────────────────────────────────────────────────── */
 
 .a1-segmented--full-width .a1-segment {

package/src/components/side-nav/SideNav.jsx

@@ -17,7 +17,7 @@ const SideNavCtx = createContext({ collapsed: false, onExpand: null });
  * @param {boolean} [props.active] - Marks this item as the current page
  * @param {string} [props.className]
  */
-export function SideNavItem({ as: Component = "a", icon, label, active, className = "", ...props }) {
+export function SideNavItem({ as: Component = "a", icon, label, badge, active, className = "", ...props }) {
   const depth = useContext(DepthCtx);
   const { collapsed } = useContext(SideNavCtx);
 
@@ -37,6 +37,7 @@ export function SideNavItem({ as: Component = "a", icon, label, active, classNam
     >
       {icon && <Icon name={icon} className="a1-side-nav-item__icon" />}
       <span className="a1-side-nav-item__label">{label}</span>
+      {badge && !collapsed && <span className="a1-side-nav-item__badge">{badge}</span>}
     </Component>
   );
 }
@@ -112,7 +113,8 @@ export function SideNavGroup({ icon, label, defaultOpen = false, open: controlle
  * - sm/md (481–1024px): fixed-width overlay with scrim; built-in close (✕) button
  * - lg/xl (≥1025px): persistent in the document flow; built-in collapse (‹/›) toggle
  *
- * The close/collapse button is rendered inline with the header content.
+ * The close button is rendered inline with the header content. The desktop
+ * collapse button can be rendered in the header or footer.
  *
  * @param {object} props
  * @param {React.ReactNode | ((collapsed: boolean) => React.ReactNode)} [props.header]
@@ -125,6 +127,7 @@ export function SideNavGroup({ icon, label, defaultOpen = false, open: controlle
  * @param {boolean} [props.defaultCollapsed=false] - Initial collapsed state for lg/xl (uncontrolled)
  * @param {boolean} [props.collapsed] - Controlled collapsed state for lg/xl
  * @param {function} [props.onCollapsedChange] - Called with next boolean when collapsed state changes
+ * @param {"header"|"footer"} [props.collapseButtonPlacement="header"] - Where the desktop collapse button appears
  * @param {"start"|"end"} [props.placement="start"] - Side of the viewport/layout where the nav appears
  * @param {string} [props.className]
  */
@@ -132,6 +135,7 @@ export function SideNav({
   header, footer, children,
   open = false, onClose,
   collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange,
+  collapseButtonPlacement = "header",
   placement = "start",
   className = "", ...props
 }) {
@@ -157,10 +161,12 @@ export function SideNav({
   }, [open, onClose]);
 
   const resolvedHeader = typeof header === "function" ? header(isCollapsed) : header;
+  const resolvedFooter = typeof footer === "function" ? footer(isCollapsed) : footer;
 
   const navClasses = [
     "a1-side-nav",
     `a1-side-nav--placement-${placement}`,
+    collapseButtonPlacement === "footer" && "a1-side-nav--collapse-footer",
     open && "a1-side-nav--open",
     isCollapsed && "a1-side-nav--collapsed",
     className,
@@ -189,19 +195,33 @@ export function SideNav({
             className="a1-side-nav__close-btn"
             onClick={onClose}
           />
-          <IconButton
-            icon={collapseIcon}
-            label={isCollapsed ? "Expand navigation" : "Collapse navigation"}
-            className="a1-side-nav__collapse-btn"
-            onClick={toggleCollapse}
-          />
+          {collapseButtonPlacement === "header" && (
+            <IconButton
+              icon={collapseIcon}
+              label={isCollapsed ? "Expand navigation" : "Collapse navigation"}
+              className="a1-side-nav__collapse-btn"
+              onClick={toggleCollapse}
+            />
+          )}
         </div>
 
         <SideNavCtx.Provider value={{ collapsed: isCollapsed, onExpand: handleExpand }}>
           <div className="a1-side-nav__nav">{children}</div>
         </SideNavCtx.Provider>
 
-        {footer && <div className="a1-side-nav__footer">{footer}</div>}
+        {(resolvedFooter || collapseButtonPlacement === "footer") && (
+          <div className="a1-side-nav__footer">
+            {resolvedFooter && <div className="a1-side-nav__footer-content">{resolvedFooter}</div>}
+            {collapseButtonPlacement === "footer" && (
+              <IconButton
+                icon={collapseIcon}
+                label={isCollapsed ? "Expand navigation" : "Collapse navigation"}
+                className="a1-side-nav__collapse-btn"
+                onClick={toggleCollapse}
+              />
+            )}
+          </div>
+        )}
       </nav>
     </>
   );

package/src/components/side-nav/scrim.css

@@ -8,7 +8,7 @@
   backdrop-filter: blur(var(--component-scrim-blur));
   opacity: 0;
   pointer-events: none;
-  transition: opacity 250ms ease;
+  transition: opacity var(--semantic-motion-duration-slow) var(--semantic-motion-easing-standard);
 }
 
 .a1-scrim--visible {

package/src/components/side-nav/side-nav.css

@@ -4,16 +4,16 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  width: var(--component-side-nav-width, 280px);
+  width: var(--component-side-nav-width);
   height: 100%;
   background: var(--semantic-color-surface-panel);
-  border-inline-end: 1px solid var(--semantic-color-border-subtle);
+  border-inline-end: var(--component-side-nav-border-width) solid var(--semantic-color-border-subtle);
   overflow: hidden;
 }
 
 .a1-side-nav--placement-end {
   border-inline-end: none;
-  border-inline-start: 1px solid var(--semantic-color-border-subtle);
+  border-inline-start: var(--component-side-nav-border-width) solid var(--semantic-color-border-subtle);
 }
 
 /* ── Header row — logo/content inline with close or collapse button ─────── */
@@ -25,8 +25,8 @@
   align-items: center;
   gap: var(--base-spacing-4);
   padding: var(--base-spacing-8) var(--base-spacing-8) var(--base-spacing-8) var(--base-spacing-12);
-  border-block-end: 1px solid var(--semantic-color-border-subtle);
-  min-height: 52px;
+  border-block-end: var(--component-side-nav-border-width) solid var(--semantic-color-border-subtle);
+  min-height: var(--component-side-nav-header-min-height);
 }
 
 .a1-side-nav__header-content {
@@ -40,7 +40,7 @@
   flex-shrink: 0;
 }
 
-@media (max-width: 1024px) {
+@media (--bp-md-down) {
   .a1-side-nav .a1-side-nav__close-btn {
     display: inline-flex;
   }
@@ -52,7 +52,7 @@
   flex-shrink: 0;
 }
 
-@media (min-width: 1025px) {
+@media (--bp-lg-up) {
   .a1-side-nav .a1-side-nav__collapse-btn {
     display: inline-flex;
   }
@@ -77,7 +77,18 @@
   flex-shrink: 0;
   padding: var(--component-side-nav-padding-block, var(--base-spacing-8))
     var(--component-side-nav-padding-inline, var(--base-spacing-8));
-  border-block-start: 1px solid var(--semantic-color-border-subtle);
+  border-block-start: var(--component-side-nav-border-width) solid var(--semantic-color-border-subtle);
+}
+
+.a1-side-nav--collapse-footer .a1-side-nav__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-4);
+}
+
+.a1-side-nav__footer-content {
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 /* ── Item — shared by SideNavItem and SideNavGroup trigger ─────────────── */
@@ -88,7 +99,7 @@
   align-items: center;
   gap: var(--component-side-nav-item-gap, var(--base-spacing-8));
   width: 100%;
-  min-height: var(--component-side-nav-item-height, 36px);
+  min-height: var(--component-side-nav-item-height);
   padding-block: var(--base-spacing-4);
   padding-inline-start: calc(
     var(--component-side-nav-item-padding-inline, var(--base-spacing-8)) +
@@ -96,10 +107,10 @@
   );
   padding-inline-end: var(--component-side-nav-item-padding-inline, var(--base-spacing-8));
   border: none;
-  border-radius: var(--component-side-nav-item-border-radius, 6px);
+  border-radius: var(--component-side-nav-item-border-radius);
   font-family: var(--semantic-font-family-body);
-  font-size: var(--semantic-font-size-body-sm, 14px);
-  line-height: 1.5;
+  font-size: var(--semantic-font-size-body-sm);
+  line-height: var(--component-side-nav-item-font-line-height);
   color: var(--semantic-color-text-default);
   text-decoration: none;
   text-align: start;
@@ -107,7 +118,9 @@
   overflow: hidden;
   cursor: pointer;
   background: transparent;
-  transition: background 150ms ease, color 150ms ease;
+  transition:
+    background var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard),
+    color var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
 }
 
 .a1-side-nav-item:hover {
@@ -119,8 +132,8 @@
 }
 
 .a1-side-nav-item:focus-visible {
-  outline: var(--component-side-nav-item-focus-ring-width, 3px) solid var(--semantic-color-text-accent);
-  outline-offset: var(--component-side-nav-item-focus-ring-offset, -2px);
+  outline: var(--component-side-nav-item-focus-ring-width) solid var(--semantic-color-text-accent);
+  outline-offset: var(--component-side-nav-item-focus-ring-offset);
 }
 
 /* ── Active state ──────────────────────────────────────────────────────── */
@@ -128,7 +141,7 @@
 .a1-side-nav-item--active {
   background: color-mix(in srgb, transparent, var(--semantic-color-text-accent) 10%);
   color: var(--semantic-color-text-accent);
-  font-weight: 500;
+  font-weight: var(--component-side-nav-item-active-font-weight);
 }
 
 .a1-side-nav-item--active:hover {
@@ -149,6 +162,11 @@
   text-overflow: ellipsis;
 }
 
+.a1-side-nav-item__badge {
+  flex-shrink: 0;
+  line-height: 1;
+}
+
 /* ── Group ─────────────────────────────────────────────────────────────── */
 
 .a1-side-nav-group {
@@ -158,10 +176,10 @@
 }
 
 .a1-side-nav-group__chevron {
-  font-size: 18px;
+  font-size: var(--component-side-nav-item-chevron-size);
   flex-shrink: 0;
   color: var(--semantic-color-text-muted);
-  transition: transform 200ms ease;
+  transition: transform var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard);
 }
 
 .a1-side-nav-group__trigger--open .a1-side-nav-group__chevron {
@@ -173,7 +191,7 @@
 .a1-side-nav-group__children {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms ease;
+  transition: grid-template-rows var(--semantic-motion-duration-normal) var(--semantic-motion-easing-standard);
 }
 
 .a1-side-nav-group__children--open {
@@ -191,27 +209,27 @@
 /* ── Responsive overlay behavior ───────────────────────────────────────── */
 
 /* Scrim — sm/md only (xs nav is full-width, lg+ nav is persistent) */
-@media (max-width: 480px) {
+@media (--bp-xs) {
   .a1-side-nav__scrim {
     display: none;
   }
 }
 
-@media (min-width: 1025px) {
+@media (--bp-lg-up) {
   .a1-side-nav__scrim {
     display: none;
   }
 }
 
 /* xs + sm + md (≤1024px): fixed overlay, slides in from the start edge */
-@media (max-width: 1024px) {
+@media (--bp-md-down) {
   .a1-side-nav {
     position: fixed;
     inset-block: 0;
     inset-inline-start: 0;
-    z-index: 200;
+    z-index: var(--component-side-nav-overlay-z-index);
     transform: translateX(-100%);
-    transition: transform 250ms ease;
+    transition: transform var(--semantic-motion-duration-slow) var(--semantic-motion-easing-standard);
     will-change: transform;
   }
 
@@ -223,16 +241,16 @@
 
   .a1-side-nav--open {
     transform: translateX(0);
-    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.18);
+    box-shadow: var(--component-side-nav-overlay-shadow-start);
   }
 
   .a1-side-nav--placement-end.a1-side-nav--open {
-    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
+    box-shadow: var(--component-side-nav-overlay-shadow-end);
   }
 }
 
 /* xs only (≤480px): full viewport width */
-@media (max-width: 480px) {
+@media (--bp-xs) {
   .a1-side-nav {
     width: 100%;
     max-width: 100vw;
@@ -246,13 +264,21 @@
 
 /* ── Collapsed state (lg/xl only) ──────────────────────────────────────── */
 
-@media (min-width: 1025px) {
+@media (--bp-lg-up) {
+  /*
+   * Sticky sidebar: the nav sticks to the viewport top and never scrolls with
+   * the page. Internal nav content scrolls via .a1-side-nav__nav (overflow-y:
+   * auto). The header row and footer remain anchored at all times.
+   */
   .a1-side-nav {
-    transition: width 250ms ease;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    transition: width var(--semantic-motion-duration-slow) var(--semantic-motion-easing-standard);
   }
 
   .a1-side-nav--collapsed {
-    width: var(--component-side-nav-collapsed-width, 52px);
+    width: var(--component-side-nav-collapsed-width);
   }
 
   /* Stack header content above the expand button when collapsed */
@@ -263,11 +289,23 @@
     gap: var(--base-spacing-4);
   }
 
-  /* Hide footer in collapsed state */
-  .a1-side-nav--collapsed .a1-side-nav__footer {
+  /* Hide footer in collapsed state unless it owns the collapse button */
+  .a1-side-nav--collapsed:not(.a1-side-nav--collapse-footer) .a1-side-nav__footer {
     display: none;
   }
 
+  .a1-side-nav--collapsed.a1-side-nav--collapse-footer .a1-side-nav__footer {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--base-spacing-4);
+    gap: var(--base-spacing-2);
+  }
+
+  .a1-side-nav--collapsed.a1-side-nav--collapse-footer .a1-side-nav__footer-content {
+    flex: none;
+  }
+
   /* Center items and remove indentation in collapsed state */
   .a1-side-nav--collapsed .a1-side-nav-item {
     justify-content: center;

package/src/components/snackbar/Snackbar.jsx

@@ -0,0 +1,56 @@
+import "./snackbar.css";
+import { Button } from "../button/Button.jsx";
+import { IconButton } from "../icon-button/IconButton.jsx";
+
+const variants = ["default", "success", "info", "warn", "error"];
+const positions = ["bottom", "bottom-left", "bottom-right", "top", "top-left", "top-right"];
+
+export function Snackbar({
+  open = false,
+  children,
+  actionLabel,
+  onAction,
+  onClose,
+  variant = "default",
+  position = "bottom",
+  inverse = true,
+  role,
+  className = "",
+  ...props
+}) {
+  if (!open) return null;
+
+  const resolvedVariant = variants.includes(variant) ? variant : "default";
+  const resolvedPosition = positions.includes(position) ? position : "bottom";
+  const classes = [
+    "a1-snackbar",
+    inverse && "a1-inverse",
+    `a1-snackbar--${resolvedVariant}`,
+    `a1-snackbar--${resolvedPosition}`,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div
+      className={classes}
+      role={role ?? (resolvedVariant === "error" ? "alert" : "status")}
+      aria-live={resolvedVariant === "error" ? "assertive" : "polite"}
+      {...props}
+    >
+      <div className="a1-snackbar__content">{children}</div>
+      {(actionLabel && onAction) && (
+        <Button size="sm" variant="tertiary" onClick={onAction}>
+          {actionLabel}
+        </Button>
+      )}
+      {onClose && (
+        <IconButton
+          icon="close"
+          label="Dismiss"
+          variant="tertiary"
+          onClick={onClose}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/snackbar/snackbar.css

@@ -0,0 +1,113 @@
+@keyframes a1-snackbar-in {
+  from {
+    opacity: 0;
+    translate: 0 8px;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+.a1-snackbar {
+  position: fixed;
+  z-index: var(--component-snackbar-z-index, 1100);
+  box-sizing: border-box;
+  width: min(420px, calc(100vw - var(--base-spacing-32)));
+  min-height: 56px;
+  padding: var(--base-spacing-12) var(--base-spacing-24);
+  border: 1px solid var(--a1-snackbar-border);
+  border-radius: var(--component-card-border-radius);
+  background: var(--a1-snackbar-background);
+  color: var(--a1-snackbar-foreground);
+  box-shadow: var(--semantic-shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.18));
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+  animation: a1-snackbar-in var(--semantic-motion-duration-standard, 200ms) var(--semantic-motion-easing-standard, ease-out) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a1-snackbar {
+    animation: none;
+  }
+}
+
+.a1-snackbar--bottom,
+.a1-snackbar--top {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.a1-snackbar--bottom,
+.a1-snackbar--bottom-left,
+.a1-snackbar--bottom-right {
+  bottom: var(--base-spacing-24);
+}
+
+.a1-snackbar--top,
+.a1-snackbar--top-left,
+.a1-snackbar--top-right {
+  top: var(--base-spacing-24);
+}
+
+.a1-snackbar--bottom-left,
+.a1-snackbar--top-left {
+  left: var(--base-spacing-24);
+}
+
+.a1-snackbar--bottom-right,
+.a1-snackbar--top-right {
+  right: var(--base-spacing-24);
+}
+
+.a1-snackbar__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.a1-snackbar--default,
+.a1-snackbar--info {
+  --a1-snackbar-background: var(--semantic-color-surface-inverse, var(--base-color-neutral-900));
+  --a1-snackbar-border: var(--semantic-color-surface-inverse, var(--base-color-neutral-900));
+  --a1-snackbar-foreground: var(--semantic-color-text-default, var(--base-color-neutral-0));
+}
+
+.a1-snackbar--success {
+  --a1-snackbar-background: var(--semantic-color-status-success-background);
+  --a1-snackbar-border: var(--semantic-color-status-success-border, var(--semantic-color-status-success-background));
+  --a1-snackbar-foreground: var(--semantic-color-status-success-foreground);
+}
+
+.a1-snackbar--warn {
+  --a1-snackbar-background: var(--semantic-color-status-warn-background);
+  --a1-snackbar-border: var(--semantic-color-status-warn-border, var(--semantic-color-status-warn-background));
+  --a1-snackbar-foreground: var(--semantic-color-status-warn-foreground);
+}
+
+.a1-snackbar--error {
+  --a1-snackbar-background: var(--semantic-color-status-error-background);
+  --a1-snackbar-border: var(--semantic-color-status-error-border, var(--semantic-color-status-error-background));
+  --a1-snackbar-foreground: var(--semantic-color-status-error-foreground);
+}
+
+@media (max-width: 720px) {
+  .a1-snackbar {
+    right: var(--base-spacing-16);
+    left: var(--base-spacing-16);
+    width: auto;
+    transform: none;
+  }
+
+  .a1-snackbar--bottom,
+  .a1-snackbar--bottom-left,
+  .a1-snackbar--bottom-right {
+    bottom: var(--base-spacing-16);
+  }
+
+  .a1-snackbar--top,
+  .a1-snackbar--top-left,
+  .a1-snackbar--top-right {
+    top: var(--base-spacing-16);
+  }
+}

package/src/components/spacer/Spacer.jsx

@@ -0,0 +1,36 @@
+import "./spacer.css";
+
+const sizes = ["xs", "sm", "md", "lg", "xl", "xxl"];
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+
+const sizeMap = {
+  xs:  "var(--base-spacing-8)",
+  sm:  "var(--base-spacing-16)",
+  md:  "var(--base-spacing-24)",
+  lg:  "var(--base-spacing-40)",
+  xl:  "var(--base-spacing-64)",
+  xxl: "var(--base-spacing-96)",
+};
+
+function isResponsive(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function resolveBase(size) {
+  if (!isResponsive(size)) return sizeMap[size] ?? sizeMap.md;
+  return sizeMap[size.xs] ?? sizeMap.md;
+}
+
+export function Spacer({ size = "md", ...props }) {
+  const style = { "--a1-spacer-size": resolveBase(size) };
+
+  if (isResponsive(size)) {
+    let lastKnown = resolveBase(size);
+    breakpoints.slice(1).forEach((bp) => {
+      if (sizes.includes(size[bp])) lastKnown = sizeMap[size[bp]];
+      style[`--a1-spacer-size-${bp}`] = lastKnown;
+    });
+  }
+
+  return <div className="a1-spacer" role="none" aria-hidden="true" style={style} {...props} />;
+}

package/src/components/spacer/spacer.css

@@ -0,0 +1,44 @@
+/* ══════════════════════════════════════════════════════════════════════════
+   Spacer
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.a1-spacer {
+  display: block;
+  height: var(--a1-spacer-responsive-size, var(--a1-spacer-size, 0px));
+}
+
+@media (--bp-sm-up) {
+  .a1-spacer {
+    --a1-spacer-responsive-size: var(--a1-spacer-size-sm, var(--a1-spacer-size));
+  }
+}
+
+@media (--bp-md-up) {
+  .a1-spacer {
+    --a1-spacer-responsive-size: var(
+      --a1-spacer-size-md,
+      var(--a1-spacer-size-sm, var(--a1-spacer-size))
+    );
+  }
+}
+
+@media (--bp-lg-up) {
+  .a1-spacer {
+    --a1-spacer-responsive-size: var(
+      --a1-spacer-size-lg,
+      var(--a1-spacer-size-md, var(--a1-spacer-size-sm, var(--a1-spacer-size)))
+    );
+  }
+}
+
+@media (--bp-xl) {
+  .a1-spacer {
+    --a1-spacer-responsive-size: var(
+      --a1-spacer-size-xl,
+      var(
+        --a1-spacer-size-lg,
+        var(--a1-spacer-size-md, var(--a1-spacer-size-sm, var(--a1-spacer-size)))
+      )
+    );
+  }
+}