@gtivr4/a1-design-system-react 0.1.0

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

@@ -0,0 +1,283 @@
+/* ── Container ─────────────────────────────────────────────────────────── */
+
+.a1-side-nav {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: var(--component-side-nav-width, 280px);
+  height: 100%;
+  background: var(--semantic-color-surface-panel);
+  border-inline-end: 1px 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);
+}
+
+/* ── Header row — logo/content inline with close or collapse button ─────── */
+
+.a1-side-nav__header-row {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  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;
+}
+
+.a1-side-nav__header-content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Close button: xs/sm/md only */
+.a1-side-nav .a1-side-nav__close-btn {
+  display: none;
+  flex-shrink: 0;
+}
+
+@media (max-width: 1024px) {
+  .a1-side-nav .a1-side-nav__close-btn {
+    display: inline-flex;
+  }
+}
+
+/* Collapse button: lg/xl only */
+.a1-side-nav .a1-side-nav__collapse-btn {
+  display: none;
+  flex-shrink: 0;
+}
+
+@media (min-width: 1025px) {
+  .a1-side-nav .a1-side-nav__collapse-btn {
+    display: inline-flex;
+  }
+}
+
+/* ── Nav scroll area ───────────────────────────────────────────────────── */
+
+.a1-side-nav__nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--component-side-nav-padding-block, var(--base-spacing-8))
+    var(--component-side-nav-padding-inline, var(--base-spacing-8));
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-2);
+}
+
+/* ── Footer ─────────────────────────────────────────────────────────────── */
+
+.a1-side-nav__footer {
+  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);
+}
+
+/* ── Item — shared by SideNavItem and SideNavGroup trigger ─────────────── */
+
+.a1-side-nav-item {
+  box-sizing: border-box;
+  display: flex;
+  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);
+  padding-block: var(--base-spacing-4);
+  padding-inline-start: calc(
+    var(--component-side-nav-item-padding-inline, var(--base-spacing-8)) +
+    var(--component-side-nav-item-indent, var(--base-spacing-20)) * var(--a1-side-nav-depth, 0)
+  );
+  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);
+  font-family: var(--semantic-font-family-body);
+  font-size: var(--semantic-font-size-body-sm, 14px);
+  line-height: 1.5;
+  color: var(--semantic-color-text-default);
+  text-decoration: none;
+  text-align: start;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  background: transparent;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.a1-side-nav-item:hover {
+  background: color-mix(in srgb, var(--semantic-color-surface-panel), var(--semantic-color-text-default) 6%);
+}
+
+.a1-side-nav-item:active {
+  background: color-mix(in srgb, var(--semantic-color-surface-panel), var(--semantic-color-text-default) 12%);
+}
+
+.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);
+}
+
+/* ── Active state ──────────────────────────────────────────────────────── */
+
+.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;
+}
+
+.a1-side-nav-item--active:hover {
+  background: color-mix(in srgb, transparent, var(--semantic-color-text-accent) 16%);
+}
+
+/* ── Icon & label ──────────────────────────────────────────────────────── */
+
+.a1-side-nav-item__icon {
+  font-size: var(--component-side-nav-item-icon-size, var(--base-spacing-20));
+  flex-shrink: 0;
+}
+
+.a1-side-nav-item__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Group ─────────────────────────────────────────────────────────────── */
+
+.a1-side-nav-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-2);
+}
+
+.a1-side-nav-group__chevron {
+  font-size: 18px;
+  flex-shrink: 0;
+  color: var(--semantic-color-text-muted);
+  transition: transform 200ms ease;
+}
+
+.a1-side-nav-group__trigger--open .a1-side-nav-group__chevron {
+  transform: rotate(90deg);
+}
+
+/* ── Expand / collapse animation (CSS grid trick) ──────────────────────── */
+
+.a1-side-nav-group__children {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease;
+}
+
+.a1-side-nav-group__children--open {
+  grid-template-rows: 1fr;
+}
+
+.a1-side-nav-group__children-inner {
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-2);
+}
+
+/* ── Responsive overlay behavior ───────────────────────────────────────── */
+
+/* Scrim — sm/md only (xs nav is full-width, lg+ nav is persistent) */
+@media (max-width: 480px) {
+  .a1-side-nav__scrim {
+    display: none;
+  }
+}
+
+@media (min-width: 1025px) {
+  .a1-side-nav__scrim {
+    display: none;
+  }
+}
+
+/* xs + sm + md (≤1024px): fixed overlay, slides in from the start edge */
+@media (max-width: 1024px) {
+  .a1-side-nav {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: 200;
+    transform: translateX(-100%);
+    transition: transform 250ms ease;
+    will-change: transform;
+  }
+
+  .a1-side-nav--placement-end {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    transform: translateX(100%);
+  }
+
+  .a1-side-nav--open {
+    transform: translateX(0);
+    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.18);
+  }
+
+  .a1-side-nav--placement-end.a1-side-nav--open {
+    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
+  }
+}
+
+/* xs only (≤480px): full viewport width */
+@media (max-width: 480px) {
+  .a1-side-nav {
+    width: 100%;
+    max-width: 100vw;
+    border-inline-end: none;
+  }
+
+  .a1-side-nav--placement-end {
+    border-inline-start: none;
+  }
+}
+
+/* ── Collapsed state (lg/xl only) ──────────────────────────────────────── */
+
+@media (min-width: 1025px) {
+  .a1-side-nav {
+    transition: width 250ms ease;
+  }
+
+  .a1-side-nav--collapsed {
+    width: var(--component-side-nav-collapsed-width, 52px);
+  }
+
+  /* Stack header content above the expand button when collapsed */
+  .a1-side-nav--collapsed .a1-side-nav__header-row {
+    flex-direction: column;
+    align-items: center;
+    padding: var(--base-spacing-8) var(--base-spacing-4);
+    gap: var(--base-spacing-4);
+  }
+
+  /* Hide footer in collapsed state */
+  .a1-side-nav--collapsed .a1-side-nav__footer {
+    display: none;
+  }
+
+  /* Center items and remove indentation in collapsed state */
+  .a1-side-nav--collapsed .a1-side-nav-item {
+    justify-content: center;
+    padding-inline: var(--base-spacing-8);
+  }
+
+  /* Hide labels, chevrons, and group children in collapsed state */
+  .a1-side-nav--collapsed .a1-side-nav-item__label,
+  .a1-side-nav--collapsed .a1-side-nav-group__chevron,
+  .a1-side-nav--collapsed .a1-side-nav-group__children {
+    display: none;
+  }
+}

package/src/components/tabs/Tabs.jsx

@@ -0,0 +1,102 @@
+import { createContext, useContext, useId } from "react";
+import "./tabs.css";
+
+const TabsContext = createContext(null);
+
+/* ─── Tabs ─────────────────────────────────────────────────────────────────── */
+
+export function Tabs({
+  children,
+  value,
+  onChange,
+  variant = "line",
+  level = 1,
+}) {
+  const uid = useId();
+  return (
+    <TabsContext.Provider value={{ value, onChange, variant, level, uid }}>
+      <div className={`a1-tabs a1-tabs--level-${level}`}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+/* ─── TabList ───────────────────────────────────────────────────────────────── */
+
+export function TabList({ children }) {
+  const { variant } = useContext(TabsContext);
+
+  const handleKeyDown = (e) => {
+    const tabs = Array.from(e.currentTarget.querySelectorAll('[role="tab"]:not([disabled])'));
+    const idx = tabs.indexOf(document.activeElement);
+    if (idx === -1) return;
+
+    let next = -1;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      next = (idx + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      next = (idx - 1 + tabs.length) % tabs.length;
+    } else if (e.key === "Home") {
+      next = 0;
+    } else if (e.key === "End") {
+      next = tabs.length - 1;
+    }
+
+    if (next !== -1) {
+      e.preventDefault();
+      tabs[next].focus();
+      tabs[next].click();
+    }
+  };
+
+  return (
+    <div
+      role="tablist"
+      className={`a1-tab-list a1-tab-list--${variant}`}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ─── Tab ───────────────────────────────────────────────────────────────────── */
+
+export function Tab({ children, value: tabValue }) {
+  const { value, onChange, variant, uid } = useContext(TabsContext);
+  const isSelected = value === tabValue;
+
+  return (
+    <button
+      role="tab"
+      type="button"
+      id={`${uid}-tab-${tabValue}`}
+      aria-selected={isSelected}
+      aria-controls={`${uid}-panel-${tabValue}`}
+      tabIndex={isSelected ? 0 : -1}
+      className={`a1-tab a1-tab--${variant}`}
+      onClick={() => onChange?.(tabValue)}
+    >
+      {children}
+    </button>
+  );
+}
+
+/* ─── TabPanel ──────────────────────────────────────────────────────────────── */
+
+export function TabPanel({ children, value: panelValue }) {
+  const { value, variant, uid } = useContext(TabsContext);
+  if (value !== panelValue) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      id={`${uid}-panel-${panelValue}`}
+      aria-labelledby={`${uid}-tab-${panelValue}`}
+      className={`a1-tab-panel a1-tab-panel--${variant}`}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/tabs/tabs.css

@@ -0,0 +1,135 @@
+/* ─── Tabs ────────────────────────────────────────────────────────────────── */
+
+.a1-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Tab list ────────────────────────────────────────────────────────────── */
+
+.a1-tab-list {
+  display: flex;
+  flex-shrink: 0;
+}
+
+/* ── Line variant ───────────────────────────────────────────────────────── */
+
+.a1-tab-list--line {
+  border-bottom: var(--component-tab-border-width) solid var(--semantic-color-border-subtle);
+  gap: 0;
+}
+
+/* ── Folder variant ─────────────────────────────────────────────────────── */
+
+.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);
+}
+
+/* ─── Tab button ──────────────────────────────────────────────────────────── */
+
+.a1-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: var(--component-paragraph-font-family);
+  transition: color var(--semantic-motion-duration-fast), background var(--semantic-motion-duration-fast);
+}
+
+.a1-tab:focus-visible {
+  outline: var(--component-tab-focus-ring-width) solid var(--semantic-color-action-background);
+  outline-offset: var(--component-tab-focus-ring-offset);
+  border-radius: var(--base-radius-control);
+}
+
+/* ── 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);
+  color: var(--semantic-color-text-muted);
+  border-bottom: var(--component-tab-indicator-size) solid transparent;
+  margin-bottom: var(--component-tab-margin-bottom);
+}
+
+.a1-tab--line:hover:not([aria-selected="true"]) {
+  color: var(--semantic-color-text-default);
+  background: var(--semantic-color-surface-panel);
+}
+
+.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);
+}
+
+/* ── Folder tab ─────────────────────────────────────────────────────────── */
+
+.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);
+  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-radius: var(--base-radius-lg) var(--base-radius-lg) 0 0;
+  margin-bottom: var(--component-tab-margin-bottom);
+  position: relative;
+}
+
+.a1-tab--folder:hover:not([aria-selected="true"]) {
+  background: var(--semantic-color-surface-raised);
+  color: var(--semantic-color-text-default);
+}
+
+.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);
+  z-index: var(--component-tab-z-index-active);
+}
+
+/* ─── Level 2 ─────────────────────────────────────────────────────────────── */
+
+.a1-tabs--level-2 .a1-tab--line {
+  padding: var(--component-tab-padding-block-sm) var(--component-tab-padding-inline-sm);
+  font-size: var(--semantic-font-size-body-xs);
+}
+
+.a1-tabs--level-2 .a1-tab--folder {
+  padding: var(--component-tab-padding-block-sm) var(--component-tab-padding-inline-sm);
+  font-size: var(--semantic-font-size-body-xs);
+  border-radius: var(--base-radius-control) var(--base-radius-control) 0 0;
+}
+
+.a1-tabs--level-2 .a1-tab-list--folder {
+  padding: var(--base-spacing-4) var(--base-spacing-4) 0;
+}
+
+/* ─── Tab panel ───────────────────────────────────────────────────────────── */
+
+.a1-tab-panel--line {
+  padding: var(--base-spacing-16) 0;
+}
+
+.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);
+}
+
+.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);
+}

package/src/index.js

@@ -0,0 +1,20 @@
+export { Notification } from "./components/notification/Notification.jsx";
+export { IconButton } from "./components/icon-button/IconButton.jsx";
+export { Button } from "./components/button/Button.jsx";
+export { ButtonContainer } from "./components/button-container/ButtonContainer.jsx";
+export { Card } from "./components/card/Card.jsx";
+export { Dialog } from "./components/dialog/Dialog.jsx";
+export { Heading } from "./components/heading/Heading.jsx";
+export { Icon } from "./components/icon/Icon.jsx";
+export { Link } from "./components/link/Link.jsx";
+export { Paragraph } from "./components/paragraph/Paragraph.jsx";
+export { MessageBanner, MessageBadge, MessageEmptyState } from "./components/message/Message.jsx";
+export { Pagination } from "./components/pagination/Pagination.jsx";
+export { SegmentedControl } from "./components/segmented-control/SegmentedControl.jsx";
+export { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs.jsx";
+export { Grid, GridItem } from "./components/grid/Grid.jsx";
+export { Inverse } from "./components/inverse/Inverse.jsx";
+export { PageLayout } from "./components/page-layout/PageLayout.jsx";
+export { LabelsProvider, useLabel } from "./components/labels/Labels.jsx";
+export { Menu, MenuSection } from "./components/menu/Menu.jsx";
+export { SideNav, SideNavItem, SideNavGroup } from "./components/side-nav/SideNav.jsx";