@auronui/styles 1.0.0

package/components/table.css

@@ -0,0 +1,341 @@
+/* ==========================================================================
+   Table — Data display component for structured tabular data.
+   ==========================================================================
+
+   Reka UI data-attribute mapping (Phase 8 audit):
+   - table__row[data-state="checked"] ← Reka UI Checkbox emits data-state="checked" — already correct
+   - table__column[data-allows-sorting="true"] ← custom attribute emitted by Vue component — keep
+   - table__column-resizer[data-resizing="true"] ← custom attribute emitted by Vue component — keep
+   - :focus-visible paired with [data-focus-visible="true"] on column, row, cell, column-resizer
+   - :hover paired with [data-resizing="true"] on column-resizer (expand hit area on hover)
+   - [data-disabled] / [aria-disabled="true"] paired on rows for Reka UI + ARIA compat
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Table Root — Outer container for table + optional footer.
+   Primary variant: gray background with the table body as a white card inside.
+   -------------------------------------------------------------------------- */
+.table-root {
+  @apply relative grid w-full overflow-clip;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* --------------------------------------------------------------------------
+   Scroll Container — Allows the table to scroll horizontally while the
+   wrapper and footer remain at full width. The parent grid with
+   minmax(0, 1fr) creates a hard width boundary that table layout
+   cannot push beyond.
+   -------------------------------------------------------------------------- */
+.table__scroll-container {
+  @apply overflow-x-auto;
+  /* Custom scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: oklch(0% 0 0 / 0.15);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: oklch(0% 0 0 / 0.25);
+  }
+
+  /* Dark mode scrollbar */
+  :is([data-theme="dark"], .dark) & {
+    scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background: oklch(100% 0 0 / 0.15);
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: oklch(100% 0 0 / 0.25);
+    }
+  }
+}
+
+.table-root--primary {
+  @apply bg-surface-secondary px-1 pb-1;
+  border-radius: calc(var(--radius) * 2.5);
+}
+
+.table-root--secondary {
+  /* No background, padding, or rounding on the root */
+}
+
+/* Secondary: header is a standalone rounded card.
+   Background is on cells (not <thead>) because Firefox does not support */
+.table-root--secondary .table__header {
+  @apply border-b-0 bg-transparent;
+}
+
+.table-root--secondary .table__column {
+  @apply bg-surface-secondary;
+}
+
+.table-root--secondary .table__column:first-child {
+  @apply rounded-tl-2xl rounded-bl-2xl;
+}
+
+.table-root--secondary .table__column:last-child {
+  @apply rounded-tr-2xl rounded-br-2xl;
+}
+
+/* Secondary: body has no shadow or rounded corners */
+.table-root--secondary .table__body {
+  @apply shadow-none;
+
+  /* Non-virtualized */
+  & tr:first-child td:first-child,
+  & tr:first-child td:last-child,
+  & tr:last-child td:first-child,
+  & tr:last-child td:last-child {
+    @apply rounded-none;
+  }
+
+  /* Virtualized: undo the rounding applied by .table__body:not(tbody) */
+  &:not(tbody) {
+    @apply overflow-visible rounded-none;
+  }
+}
+
+/* Secondary: rows are transparent and keep bottom border on every row */
+.table-root--secondary .table__row {
+  .table__cell {
+    @apply border-b border-separator-tertiary/50 bg-transparent;
+  }
+
+  @media (hover: hover) {
+    &:hover .table__cell,
+ .table__cell {
+      @apply bg-default/50;
+    }
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Content (<table> element) — the white card inside the root
+   -------------------------------------------------------------------------- */
+.table__content {
+  @apply w-full border-separate border-spacing-0 text-sm;
+}
+
+/* Primary variant: table gets the white surface card look */
+.table-root--primary .table__content {
+  @apply overflow-clip;
+}
+
+/* --------------------------------------------------------------------------
+   Table Header (<thead>)
+   -------------------------------------------------------------------------- */
+.table__header {
+  @apply border-b border-separator/50 bg-surface-secondary;
+}
+
+/* --------------------------------------------------------------------------
+   Table Column (<th>)
+   -------------------------------------------------------------------------- */
+.table__column {
+  @apply relative px-4 py-2.5 text-left text-xs font-medium text-muted;
+
+  /* Separator between columns — a short vertical line on the right edge */
+  &::after {
+    content: "";
+    @apply pointer-events-none absolute top-1/2 right-0 h-4 w-px -translate-y-1/2 rounded-sm bg-separator;
+  }
+
+  &:last-child:not(:only-child)::after {
+    content: none;
+  }
+
+  /* Sortable columns */
+  &[data-allows-sorting="true"] {
+    cursor: var(--cursor-interactive);
+  }
+
+  @media (hover: hover) {
+    &[data-allows-sorting="true"]:hover,
+    &[data-allows-sorting="true"]:hover {
+      @apply text-foreground;
+    }
+  }
+
+  /* Focus visible — inset shadow for consistent table focus styling */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply rounded-lg outline-none;
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Body (<tbody>)
+   -------------------------------------------------------------------------- */
+.table__body {
+  /* Non-virtualized: round corners via first/last cells
+     (border-radius on <tbody> itself has no effect) */
+  & tr:first-child td:first-child {
+    @apply rounded-tl-2xl;
+  }
+  & tr:first-child td:last-child {
+    @apply rounded-tr-2xl;
+  }
+  & tr:last-child td:first-child {
+    @apply rounded-bl-2xl;
+  }
+  & tr:last-child td:last-child {
+    @apply rounded-br-2xl;
+  }
+
+  /* Virtualized: elements are divs, not tr/td. VirtualizerItem wrappers
+     break :first-child/:last-child on rows and cells, so round the body
+     itself and clip overflow instead. */
+  &:not(tbody) {
+    @apply relative h-full overflow-clip rounded-2xl;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Row (<tr>)
+   -------------------------------------------------------------------------- */
+.table__row {
+  @apply relative h-full;
+
+  /* Bottom separator */
+  @apply border-b border-separator/50;
+
+  /* Last row in body has no bottom border */
+  &:last-child {
+    @apply border-b-0;
+  }
+
+  /* Hover state — applied to cells so Firefox clips bg to border-radius */
+  @media (hover: hover) {
+    &:hover .table__cell,
+ .table__cell {
+      @apply bg-surface/40;
+    }
+  }
+
+  /* Selected state */
+  &[data-state="checked"] .table__cell {
+    @apply bg-surface/10;
+  }
+
+  /* Disabled state */
+  &[aria-disabled="true"],
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+
+  /* Focus visible — use outline instead of ring for better table row rendering */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+
+  /* Dragging state */
+  &[data-dragging="true"] {
+    @apply opacity-50;
+  }
+
+  /* Drop target state */
+  &[data-drop-target="true"] .table__cell {
+    @apply bg-accent-soft;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Cell (<td>)
+   -------------------------------------------------------------------------- */
+.table__cell {
+  @apply h-full bg-surface px-4 py-3 align-middle text-sm text-foreground;
+
+  @apply border-b border-separator-tertiary/50;
+
+  /* Focus visible — inset shadow so focus stays within the cell boundaries */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply rounded-lg outline-none;
+    box-shadow: inset 0 0 0 2px var(--color-focus);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Table Footer (div outside <table>, sits on gray bg)
+   -------------------------------------------------------------------------- */
+.table__footer {
+  @apply flex items-center px-4 py-2.5;
+}
+
+/* --------------------------------------------------------------------------
+   Resizable Container — wraps table to enable column resizing via React Aria.
+   -------------------------------------------------------------------------- */
+.table__resizable-container {
+  @apply relative overflow-auto;
+}
+
+/* --------------------------------------------------------------------------
+   Column Resizer — drag handle between resizable columns.
+   Replaces the ::after separator when present.
+   -------------------------------------------------------------------------- */
+.table__column-resizer {
+  /* Match the ::after separator: absolute, right edge, short vertical line */
+  @apply absolute top-1/2 right-0 h-4 w-px -translate-y-1/2 rounded-sm bg-separator;
+  /* Make it interactive — wider hit area with transparent padding */
+  @apply box-content translate-x-1/2 cursor-col-resize touch-none px-2;
+  /* Reset appearance */
+  @apply border-none bg-clip-content outline-none;
+
+  &:hover,
+  &[data-resizing="true"] {
+    @apply h-full w-0.5 bg-accent;
+  }
+
+  &[data-resizing="true"] {
+    @apply h-full w-0.5 bg-accent;
+  }
+
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply h-full w-0.5 bg-focus;
+  }
+}
+
+/* Hide the ::after separator when a resizer is present in the column */
+.table__column:has(.table__column-resizer)::after {
+  content: none;
+}
+
+/* --------------------------------------------------------------------------
+   Load More Item — sentinel row for infinite scrolling.
+   Non-virtualized: <tr> with <td colSpan=N> inside.
+   Virtualized: <div> with <div role="rowheader"> inside.
+   -------------------------------------------------------------------------- */
+.table__load-more {
+  & td,
+  & [role="rowheader"] {
+    @apply py-3 text-center;
+    & > * {
+      @apply mx-auto;
+    }
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Load More Content — styled container for the loading indicator inside
+   the load-more sentinel row.
+   -------------------------------------------------------------------------- */
+.table__load-more-content {
+  @apply flex items-center justify-center gap-2 py-2;
+}

package/components/tabs.css

@@ -0,0 +1,262 @@
+/* Base tabs component */
+.tabs {
+  @apply flex gap-2;
+
+  /* Orientation styles */
+  &[data-orientation="horizontal"] {
+    @apply flex-col;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply flex-row;
+  }
+}
+
+/* Tab list container */
+.tabs__list-container {
+  @apply relative;
+}
+
+/* Tab list */
+.tabs__list {
+  @apply relative inline-flex bg-default p-1;
+
+  border-radius: calc(var(--radius-2xl) + 0.25rem);
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    @apply w-full flex-row;
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply flex-col gap-1;
+
+    .tabs__tab {
+      @apply min-w-20;
+    }
+  }
+}
+
+/* Individual tab */
+.tabs__tab {
+  position: relative;
+  z-index: 1;
+  cursor: var(--cursor-interactive);
+
+  @apply flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium outline-none no-highlight;
+  @apply text-foreground/50;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 300ms var(--ease-smooth),
+    opacity 300ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Selected state */
+  &[data-state="active"] {
+    @apply text-segment-foreground font-semibold opacity-100;
+  }
+
+  /* Hide separator when this tab is selected */
+  &[data-state="active"] .tabs__separator {
+    opacity: 0;
+  }
+
+  /* Hide separator when previous sibling is selected */
+  &[data-state="active"] + .tabs__tab .tabs__separator {
+    opacity: 0;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover: brighten inactive tabs only */
+  @media (hover: hover) {
+    &:not([data-state="active"]):not([data-disabled]):hover {
+      @apply text-foreground/75;
+    }
+  }
+
+  /* Focus states */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}
+
+/* Tab separator */
+.tabs__separator {
+  @apply bg-muted/25;
+
+  border-radius: 4px;
+  position: absolute;
+  pointer-events: none;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: opacity 300ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Horizontal tabs - vertical separator */
+  .tabs__list[data-orientation="horizontal"] & {
+    left: 0;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical tabs - horizontal separator */
+  .tabs__list[data-orientation="vertical"] & {
+    top: 0;
+    left: 5%;
+    width: 90%;
+    height: 1px;
+  }
+}
+
+/* Tab panel */
+.tabs__panel {
+  @apply w-full p-2 outline-none;
+
+  &[data-state="active"] {
+    animation: tabs-panel-enter 200ms var(--ease-smooth) both;
+    @apply motion-reduce:animate-none;
+  }
+
+  /* Orientation spacing */
+  &[data-orientation="horizontal"] {
+    @apply mt-4;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply ml-4;
+  }
+}
+
+@keyframes tabs-panel-enter {
+  from {
+    opacity: 0;
+    translate: 0 6px;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+/* Tab indicator - driven by Reka UI's CSS custom properties */
+.tabs__indicator {
+  box-shadow: var(--shadow-surface);
+  position: absolute;
+  /* inset matches the list's p-1 (0.25rem) so the pill gap is consistent on all sides */
+  top: 0.25rem;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--radius-3xl);
+
+  /* Horizontal (default): Reka sets --reka-tabs-indicator-size = tab width,
+     --reka-tabs-indicator-position = tab offsetLeft */
+  width: var(--reka-tabs-indicator-size, 0px);
+  height: calc(100% - 0.5rem);
+  translate: var(--reka-tabs-indicator-position, 0px) 0;
+
+  @apply bg-segment;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition-duration: 300ms;
+  transition-property: translate, width, height;
+  transition-timing-function: var(--ease-out-fluid);
+  @apply motion-reduce:transition-none;
+}
+
+/* Vertical orientation: size = height, position = offsetTop */
+.tabs[data-orientation="vertical"] .tabs__indicator {
+  top: 0;
+  left: 0.25rem;
+  width: calc(100% - 0.5rem);
+  height: var(--reka-tabs-indicator-size, 0px);
+  translate: 0 var(--reka-tabs-indicator-position, 0px);
+}
+
+/* ==========================================================================
+   Secondary Variant
+   ========================================================================== */
+
+.tabs--secondary {
+  /* Tab list - remove background, add bottom/left border */
+  .tabs__list {
+    @apply bg-transparent p-0;
+
+    border-radius: 0;
+
+    /* Horizontal orientation - bottom border, scrollable */
+    &[data-orientation="horizontal"] {
+      @apply border-b border-border;
+
+      max-width: 100%;
+      overflow-x: auto;
+      overflow-y: clip;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    /* Vertical orientation - left border */
+    &[data-orientation="vertical"] {
+      @apply border-l border-border;
+    }
+  }
+
+  /* Tab - adjust for secondary variant */
+  .tabs__tab {
+    @apply rounded-none;
+
+    /* Selected state - use text-foreground */
+    &[data-state="active"] {
+      @apply text-foreground;
+    }
+  }
+
+  /* Hide separators in secondary variant */
+  .tabs__separator {
+    display: none;
+  }
+
+  /* Tab indicator - line style */
+  .tabs__indicator {
+    @apply bg-accent;
+
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  /* Horizontal orientation - bottom line indicator */
+  &[data-orientation="horizontal"] .tabs__indicator {
+    top: auto;
+    bottom: 0;
+    height: 2px;
+  }
+
+  /* Vertical orientation - left line indicator */
+  &[data-orientation="vertical"] .tabs__indicator {
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+}

package/components/tag-group.css

@@ -0,0 +1,66 @@
+/* Base styles */
+.tag-group {
+  @apply relative flex flex-col gap-1.5;
+}
+
+.tag-group__list {
+  @apply relative flex flex-wrap items-center gap-1.5 rounded-field border bg-field px-3 py-2;
+
+  min-height: 2.5rem;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  transition:
+    background-color 300ms var(--ease-smooth),
+    border-color 300ms var(--ease-smooth),
+    box-shadow 300ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover:not(:focus-within):not([data-disabled]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  &:focus-within {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  &[data-invalid] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+  }
+
+  &[data-disabled] {
+    @apply status-disabled;
+  }
+}
+
+/* Seamless text input inside the tag list */
+.tag-group [data-slot="input"] {
+  flex: 1;
+  min-width: 8rem;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: inherit;
+  padding: 0;
+
+  &::placeholder {
+    color: var(--color-field-placeholder);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.tag-group [data-slot="description"],
+.tag-group [data-slot="error-message"] {
+  @apply px-1;
+}