@varialkit/table 0.1.1

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@varialkit/table",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./examples": "./examples/index.tsx"
+  },
+  "files": [
+    "src",
+    "docs.md",
+    "examples",
+    "examples.tsx"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.21.2",
+    "@varialkit/button": "0.1.1",
+    "@varialkit/checkbox": "0.1.1",
+    "@varialkit/dropdown": "0.1.1",
+    "@varialkit/icons": "0.1.1",
+    "@varialkit/menu": "0.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.10",
+    "react": "19.0.0"
+  }
+}

package/src/Table.scss

@@ -0,0 +1,531 @@
+.solara-table {
+  width: 100%;
+  overflow-x: auto;
+  /* Map table presentation to the shared theme token system. */
+  --solara-table-text-primary: var(--color-text-primary, #0f172a);
+  --solara-table-text-secondary: var(--color-text-secondary, #475569);
+  --solara-table-text-tertiary: var(--color-text-tertiary, #94a3b8);
+  --solara-table-text-muted: var(--color-text-secondary, #64748b);
+  --solara-table-surface-base: var(--color-surface-0, #ffffff);
+  --solara-table-surface-header: var(--color-surface-100, #f8fafc);
+  --solara-table-surface-hover: var(--color-surface-100, #f8fafc);
+  --solara-table-border-color: var(--color-divider-primary, #e2e8f0);
+  color: var(--solara-table-text-primary);
+  /* Row state variables are theme-overridable so selection/expansion colors stay consistent app-wide. */
+  --solara-table-row-hover-bg: var(--color-surface-100, #f8fafc);
+  --solara-table-row-selected-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 14%,
+    transparent
+  );
+  --solara-table-row-selected-hover-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 18%,
+    transparent
+  );
+  --solara-table-row-expanded-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 8%,
+    transparent
+  );
+  --solara-table-row-expanded-hover-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 12%,
+    transparent
+  );
+  --solara-table-row-expanded-selected-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 22%,
+    transparent
+  );
+  --solara-table-row-subrow-bg: color-mix(
+    in srgb,
+    var(--color-surface-200, #f1f5f9) 65%,
+    transparent
+  );
+  --solara-table-row-subrow-expanded-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 10%,
+    var(--color-surface-100, #f8fafc)
+  );
+  --solara-table-row-subrow-selected-bg: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 20%,
+    transparent
+  );
+  --solara-table-row-expanded-accent: color-mix(
+    in srgb,
+    var(--color-accent-primary, #2563eb) 40%,
+    transparent
+  );
+  /* Grid layout tokens are density-aware and can be overridden per surface. */
+  --solara-table-grid-gap: 0.75rem;
+  --solara-table-grid-row-gap: var(--solara-table-grid-gap);
+  --solara-table-grid-column-gap: var(--solara-table-grid-gap);
+  --solara-table-grid-details-gap: 0.5rem;
+  --solara-table-grid-details-padding: 0.75rem;
+  --solara-table-grid-media-min-height: 180px;
+}
+
+.solara-table--split-sticky {
+  /* Split layout handles horizontal scroll inside the center pane. */
+  overflow-x: visible;
+}
+.solara-table--split-sticky {
+  overflow-x: visible;
+}
+
+.solara-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.solara-table__head th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--solara-table-text-secondary);
+  background: var(--solara-table-header-bg, var(--solara-table-surface-header));
+}
+
+.solara-table__cell,
+.solara-table__header-cell {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--solara-table-border-color);
+  font-size: 0.875rem;
+}
+
+.solara-table__row:hover {
+  /* Hover sets the default row background; explicit state classes below can override it. */
+  --solara-table-row-bg: var(
+    --solara-table-row-hover-bg,
+    var(--solara-table-surface-hover)
+  );
+}
+
+.solara-table__row > .solara-table__cell,
+.solara-table__row > .solara-table__actions-cell {
+  /* Apply a single resolved row color to each cell so pinning/split panes stay visually aligned. */
+  background: var(--solara-table-row-bg, transparent);
+}
+
+.solara-table__row--selected {
+  --solara-table-row-bg: var(--solara-table-row-selected-bg);
+}
+
+.solara-table__row--selected:hover {
+  --solara-table-row-bg: var(--solara-table-row-selected-hover-bg);
+}
+
+.solara-table__row--expanded {
+  --solara-table-row-bg: var(--solara-table-row-expanded-bg);
+}
+
+.solara-table__row--expanded:hover {
+  --solara-table-row-bg: var(--solara-table-row-expanded-hover-bg);
+}
+
+.solara-table__row--expanded.solara-table__row--selected {
+  --solara-table-row-bg: var(--solara-table-row-expanded-selected-bg);
+}
+
+.solara-table__row--subrow {
+  --solara-table-row-bg: var(--solara-table-row-subrow-bg);
+}
+
+.solara-table__row--subrow.solara-table__row--in-expanded-group {
+  --solara-table-row-bg: var(--solara-table-row-subrow-expanded-bg);
+}
+
+.solara-table__row--subrow.solara-table__row--selected {
+  --solara-table-row-bg: var(--solara-table-row-subrow-selected-bg);
+}
+
+.solara-table__row--expanded > .solara-table__cell:first-child,
+.solara-table__row--expanded > .solara-table__actions-cell:first-child {
+  /* Subtle leading edge to indicate the parent row controls expanded content. */
+  box-shadow: inset 2px 0 0 var(--solara-table-row-expanded-accent);
+}
+
+.solara-table__row--clickable {
+  cursor: pointer;
+}
+
+.solara-table__cell--pinned,
+.solara-table__header-cell--pinned {
+  position: sticky;
+  left: 0;
+  /* Prefer row background when set so pinned cells inherit selected/expanded states. */
+  background: var(
+    --solara-table-row-bg,
+    var(
+      --solara-table-pinned-bg,
+      var(--solara-table-header-bg, var(--solara-table-surface-header))
+    )
+  );
+  z-index: 2;
+  box-shadow: var(--solara-table-pinned-shadow, 1px 0 0 var(--solara-table-border-color));
+}
+
+.solara-table__header-cell--pinned {
+  z-index: 3;
+}
+
+.solara-table__empty td {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--solara-table-text-muted);
+}
+
+.solara-table__sort {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.solara-table__sort-indicator {
+  font-size: 0.75rem;
+  color: var(--solara-table-text-tertiary);
+  display: inline-flex;
+  align-items: center;
+}
+
+.solara-table--sticky-header .solara-table__head th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(
+    --solara-table-sticky-header-bg,
+    var(--solara-table-header-bg, var(--solara-table-surface-header))
+  );
+  box-shadow: var(--solara-table-sticky-header-shadow, 0 1px 0 var(--solara-table-border-color));
+}
+
+.solara-table--transparent-sticky .solara-table__head th,
+.solara-table--transparent-sticky .solara-table__cell--pinned,
+.solara-table--transparent-sticky .solara-table__header-cell--pinned {
+  background: transparent !important;
+  box-shadow: none;
+}
+
+.solara-table--transparent-background .solara-table__table,
+.solara-table--transparent-background .solara-table__head,
+.solara-table--transparent-background .solara-table__body,
+.solara-table--transparent-background tr,
+.solara-table--transparent-background th,
+.solara-table--transparent-background td {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.solara-table__header-actions-cell {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  vertical-align: middle;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--solara-table-border-color);
+}
+
+.solara-table__header-action-button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+.solara-table__header-actions-stack {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.solara-table__actions-cell {
+  width: 1%;
+  border-bottom: 1px solid var(--solara-table-border-color);
+}
+
+.solara-table__actions-col {
+  width: 1%;
+}
+
+.solara-table__grid-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.solara-table__grid {
+  display: grid;
+  row-gap: var(--solara-table-grid-row-gap);
+  column-gap: var(--solara-table-grid-column-gap);
+}
+
+.solara-table__grid--masonry {
+  display: block;
+  column-gap: var(--solara-table-grid-column-gap);
+}
+
+.solara-table__grid--masonry > * {
+  /* Keep each card intact so media/details don't split across columns. */
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  margin-bottom: var(--solara-table-grid-row-gap);
+}
+
+.solara-table__grid--masonry > *:last-child {
+  margin-bottom: 0;
+}
+
+.solara-table__grid--masonry .solara-table__grid-cell--media {
+  min-height: 0;
+}
+
+.solara-table__grid--masonry .solara-table__grid-cell--media > .solara-table__grid-cell-value {
+  height: auto;
+}
+
+.solara-table__grid--masonry .solara-table__grid-cell--media > .solara-table__grid-cell-value > img,
+.solara-table__grid--masonry .solara-table__grid-cell--media > .solara-table__grid-cell-value > video {
+  height: auto;
+  object-fit: contain;
+}
+
+.solara-table__grid-row {
+  border: 1px solid var(--solara-table-border-color);
+  border-radius: 12px;
+  overflow: hidden;
+  display: grid;
+  gap: 0;
+  background: var(--solara-table-row-bg, var(--solara-table-surface-base));
+}
+
+.solara-table__grid-cell {
+  display: grid;
+  gap: 0.125rem;
+}
+
+.solara-table__grid-row-details {
+  display: grid;
+  gap: var(--solara-table-grid-details-gap);
+  padding: var(--solara-table-grid-details-padding);
+}
+
+.solara-table__grid-cell--media {
+  min-height: var(--solara-table-grid-media-min-height);
+}
+
+.solara-table__grid-cell--unpadded {
+  padding: 0;
+}
+
+.solara-table__grid-cell--media > .solara-table__grid-cell-value {
+  height: 100%;
+  /* Prevent inline-media baseline whitespace artifacts in media-first cards. */
+  line-height: 0;
+}
+
+.solara-table__grid-cell--media > .solara-table__grid-cell-value > img,
+.solara-table__grid-cell--media > .solara-table__grid-cell-value > video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.solara-table__grid-cell-label {
+  font-size: 0.75rem;
+  color: var(--solara-table-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.solara-table__grid-cell-value {
+  font-size: 0.875rem;
+  color: var(--solara-table-text-primary);
+}
+
+.solara-table__grid-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--solara-table-text-muted);
+}
+
+.solara-table__split-header,
+.solara-table__split-body {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.solara-table__pane {
+  /* Let panes size to their content; center pane flexes to fill. */
+  width: max-content;
+}
+
+.solara-table__pane--left,
+.solara-table__pane--right {
+  flex: 0 0 auto;
+}
+
+.solara-table__pane--center {
+  width: 100%;
+}
+
+.solara-table__header-scroll {
+  /* Header scroll is synced with the center body scroll. */
+  overflow: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.solara-table__body-center {
+  /* The only horizontally scrollable pane. */
+  overflow: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.solara-table__body-side {
+  /* Pinned panes: vertical scroll only, no horizontal scroll. */
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 0 0 auto;
+  scrollbar-width: none;
+}
+
+.solara-table__body-side::-webkit-scrollbar {
+  display: none;
+}
+
+.solara-table__menu-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.solara-table__menu-row--simple {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.solara-table__menu-toggle {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  padding: 0.35rem 0.5rem;
+  border-radius: 8px;
+}
+
+.solara-table__menu-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.solara-table__menu-toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.solara-table__menu-row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.solara-table__menu-icon-button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+.solara-table__menu-icon-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.solara-table__menu-visibility {
+  font-size: 0.75rem;
+  color: var(--solara-table-text-secondary);
+}
+
+.solara-table__menu-visibility--hidden {
+  color: var(--solara-table-text-tertiary);
+}
+
+.solara-table--density-compact .solara-table__cell,
+.solara-table--density-compact .solara-table__header-cell {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.solara-table--density-compact {
+  /* Compact mode tightens list padding and grid card rhythm together. */
+  --solara-table-grid-gap: 0.5rem;
+  --solara-table-grid-details-gap: 0.375rem;
+  --solara-table-grid-details-padding: 0.625rem;
+  --solara-table-grid-media-min-height: 160px;
+}
+
+.solara-table--density-compact .solara-table__header-actions-cell,
+.solara-table--density-compact .solara-table__actions-cell {
+  padding: 0.5rem 0.75rem;
+}
+
+.solara-table--density-compact .solara-table__grid-cell-value {
+  font-size: 0.8125rem;
+}
+
+.solara-table--density-spacious .solara-table__cell,
+.solara-table--density-spacious .solara-table__header-cell {
+  padding: 1rem 1.25rem;
+  font-size: 0.9375rem;
+}
+
+.solara-table--density-spacious {
+  /* Spacious mode increases both table breathing room and grid card spacing. */
+  --solara-table-grid-gap: 1rem;
+  --solara-table-grid-details-gap: 0.625rem;
+  --solara-table-grid-details-padding: 1rem;
+  --solara-table-grid-media-min-height: 220px;
+}
+
+.solara-table--density-spacious .solara-table__header-actions-cell,
+.solara-table--density-spacious .solara-table__actions-cell {
+  padding: 1rem 1.25rem;
+}
+
+.solara-table--density-spacious .solara-table__grid-cell-value {
+  font-size: 0.9375rem;
+}