@roadlittledawn/docs-design-system-react 0.7.0 → 0.9.1

package/dist/styles.css

@@ -258,6 +258,34 @@
   --dds-list-badge-shadow: inset 0 0 0 1px #bfc2c7;
   --dds-list-connector-line: #eceef2; /* gray-200 */
   --dds-list-text: #374151; /* gray-700 */
+
+  /* Table */
+  --dds-table-margin: 1rem 0;
+  --dds-table-radius: 0.5rem; /* rounded-lg */
+  --dds-table-font-size: 0.875rem; /* text-sm */
+  --dds-table-bg: transparent;
+  --dds-table-text: #374151; /* gray-700 */
+  --dds-table-border: #e5e7eb; /* gray-200 */
+  --dds-table-row-border: #e5e7eb; /* gray-200 */
+  --dds-table-row-hover-bg: #f9fafb; /* gray-50 */
+  --dds-table-header-bg: #f3f4f6; /* gray-100 */
+  --dds-table-sticky-bg: var(--dds-table-header-bg); /* used as sticky header background; should be opaque */
+  --dds-table-sticky-hover-bg: var(--dds-table-header-hover-bg); /* used as sticky sortable header hover; should be opaque */
+  --dds-table-header-text: #111827; /* gray-900 */
+  --dds-table-header-font-size: 0.8125rem; /* ~13px */
+  --dds-table-header-border: #d1d5db; /* gray-300 */
+  --dds-table-header-hover-bg: #e5e7eb; /* gray-200 */
+  --dds-table-header-hover-text: #111827; /* gray-900 */
+  --dds-table-header-active-text: #1d4ed8; /* blue-700 */
+  --dds-table-cell-padding: 0.75rem 1rem;
+  --dds-table-focus-ring: #3b82f6; /* blue-500 */
+
+  /* Grid */
+  --dds-grid-gap-sm: 1rem; /* gap-4 */
+  --dds-grid-gap-md: 1.5rem; /* gap-6 */
+  --dds-grid-gap-lg: 2.5rem; /* gap-10 */
+  --dds-grid-divider-color: #e5e7eb; /* gray-200 */
+  --dds-grid-sticky-top: 1rem;
 }
 /* ==========================================================================
    Dark Mode Tokens
@@ -419,6 +447,25 @@
   --dds-list-badge-shadow: inset 0 0 0 1px #353a42;
   --dds-list-connector-line: #353a42; /* gray-600 */
   --dds-list-text: #e5e7eb; /* gray-200 */
+
+  /* Table */
+  --dds-table-bg: transparent;
+  --dds-table-text: #d1d5db; /* gray-300 */
+  --dds-table-border: #4b5563; /* gray-600 */
+  --dds-table-row-border: #374151; /* gray-700 */
+  --dds-table-row-hover-bg: rgba(255, 255, 255, 0.04);
+  --dds-table-header-bg: rgba(255, 255, 255, 0.06);
+  --dds-table-sticky-bg: #1f2937; /* gray-800 — opaque fallback for sticky header */
+  --dds-table-sticky-hover-bg: #263347; /* slightly lighter opaque hover for sticky header */
+  --dds-table-header-text: #f9fafb; /* gray-50 */
+  --dds-table-header-border: #4b5563; /* gray-600 */
+  --dds-table-header-hover-bg: rgba(255, 255, 255, 0.1);
+  --dds-table-header-hover-text: #f9fafb; /* gray-50 */
+  --dds-table-header-active-text: #93c5fd; /* blue-300 */
+  --dds-table-focus-ring: #60a5fa; /* blue-400 */
+
+  /* Grid */
+  --dds-grid-divider-color: #4b5563; /* gray-600 */
 }
 /* Auto dark mode — follows OS preference, opt-out with .dds-light */
 @media (prefers-color-scheme: dark) {
@@ -575,6 +622,25 @@
     --dds-list-badge-shadow: inset 0 0 0 1px #353a42;
     --dds-list-connector-line: #353a42; /* gray-600 */
     --dds-list-text: #e5e7eb; /* gray-200 */
+
+    /* Table */
+    --dds-table-bg: transparent;
+    --dds-table-text: #d1d5db;
+    --dds-table-border: #4b5563;
+    --dds-table-row-border: #374151;
+    --dds-table-row-hover-bg: rgba(255, 255, 255, 0.04);
+    --dds-table-header-bg: rgba(255, 255, 255, 0.06);
+    --dds-table-sticky-bg: #1f2937;
+    --dds-table-sticky-hover-bg: #263347;
+    --dds-table-header-text: #f9fafb;
+    --dds-table-header-border: #4b5563;
+    --dds-table-header-hover-bg: rgba(255, 255, 255, 0.1);
+    --dds-table-header-hover-text: #f9fafb;
+    --dds-table-header-active-text: #93c5fd;
+    --dds-table-focus-ring: #60a5fa;
+
+    /* Grid */
+    --dds-grid-divider-color: #4b5563; /* gray-600 */
   }
 }
 /* Explicit dark mode via data attribute (overrides OS preference) */
@@ -713,6 +779,22 @@
   --dds-popover-eyebrow-color: #9ca3af;
   --dds-popover-link-color: #60a5fa;
   --dds-popover-link-color-hover: #93c5fd;
+
+  /* Table */
+  --dds-table-bg: transparent;
+  --dds-table-text: #d1d5db;
+  --dds-table-border: #4b5563;
+  --dds-table-row-border: #374151;
+  --dds-table-row-hover-bg: rgba(255, 255, 255, 0.04);
+  --dds-table-header-bg: rgba(255, 255, 255, 0.06);
+  --dds-table-sticky-bg: #1f2937;
+  --dds-table-sticky-hover-bg: #263347;
+  --dds-table-header-text: #f9fafb;
+  --dds-table-header-border: #4b5563;
+  --dds-table-header-hover-bg: rgba(255, 255, 255, 0.1);
+  --dds-table-header-hover-text: #f9fafb;
+  --dds-table-header-active-text: #93c5fd;
+  --dds-table-focus-ring: #60a5fa;
 }
 /* Import PrismJS theme */
 /**
@@ -1832,4 +1914,226 @@ a.no-text-decoration {
     }
   }
 }
+/* Table wrapper — enables responsive horizontal scroll */
+.dds-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--dds-table-border);
+  border-radius: var(--dds-table-radius);
+  margin: var(--dds-table-margin);
+}
+/* When stickyHeader is true the wrapper also scrolls vertically so that
+   position:sticky on th elements activates within the same scroll container. */
+.dds-table-scrollable {
+  overflow-y: auto;
+}
+/* Remove outer border for borderless variant — only row borders remain */
+.dds-table-borderless {
+  border: none;
+  border-radius: 0;
+}
+.dds-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--dds-table-font-size);
+  color: var(--dds-table-text);
+  background-color: var(--dds-table-bg);
+}
+/* -----------------------------------------------------------------------
+   Header
+   ----------------------------------------------------------------------- */
+.dds-table-head {
+  background-color: var(--dds-table-header-bg);
+}
+.dds-table-head-sticky th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--dds-table-sticky-bg, var(--dds-table-header-bg));
+}
+/* When headerBg is set via inline style, the sticky cells must inherit it */
+.dds-table-head-sticky[style] th {
+  background-color: inherit;
+}
+/* Sticky sortable header hover: keep background opaque to avoid bleed-through
+   when the global .dds-table-th-sortable:hover uses a semi-transparent color. */
+.dds-table-head-sticky th.dds-table-th-sortable:hover {
+  background-color: var(
+    --dds-table-sticky-hover-bg,
+    var(--dds-table-sticky-bg, var(--dds-table-header-bg))
+  );
+}
+/* -----------------------------------------------------------------------
+   Cells — shared
+   ----------------------------------------------------------------------- */
+.dds-table-th,
+.dds-table-td {
+  padding: var(--dds-table-cell-padding);
+  text-align: left;
+  vertical-align: top;
+}
+/* Alignment helpers */
+.dds-table-align-left  { text-align: left; }
+.dds-table-align-center { text-align: center; }
+.dds-table-align-right { text-align: right; }
+/* -----------------------------------------------------------------------
+   Header cell
+   ----------------------------------------------------------------------- */
+.dds-table-th {
+  font-weight: var(--dds-font-semibold);
+  font-size: var(--dds-table-header-font-size);
+  color: var(--dds-table-header-text);
+  border-bottom: 2px solid var(--dds-table-header-border);
+  white-space: nowrap;
+}
+/* Default variant: left/right column borders */
+.dds-table-wrapper:not(.dds-table-borderless) .dds-table-th + .dds-table-th,
+.dds-table-wrapper:not(.dds-table-borderless) .dds-table-td + .dds-table-td {
+  border-left: 1px solid var(--dds-table-border);
+}
+/* -----------------------------------------------------------------------
+   Sortable column header
+   ----------------------------------------------------------------------- */
+.dds-table-th-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.dds-table-th-sortable:hover {
+  background-color: var(--dds-table-header-hover-bg);
+  color: var(--dds-table-header-hover-text);
+}
+.dds-table-th-sortable:focus-visible {
+  outline: 2px solid var(--dds-table-focus-ring);
+  outline-offset: -2px;
+}
+.dds-table-th-active {
+  color: var(--dds-table-header-active-text);
+}
+.dds-table-th-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.dds-table-sort-icon {
+  font-size: 0.75em;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+.dds-table-th-active .dds-table-sort-icon {
+  opacity: 1;
+}
+/* -----------------------------------------------------------------------
+   Body rows
+   ----------------------------------------------------------------------- */
+.dds-table-body .dds-table-row {
+  border-top: 1px solid var(--dds-table-row-border);
+  transition: background-color 150ms ease-in-out;
+}
+.dds-table-body .dds-table-row:hover {
+  background-color: var(--dds-table-row-hover-bg);
+}
+/* =============================================================================
+   Grid — multi-column layout component
+   ============================================================================= */
+/* Base grid container */
+.dds-grid {
+  display: grid;
+  grid-template-columns: var(--dds-grid-template-columns, repeat(2, 1fr));
+  gap: var(--dds-grid-gap, var(--dds-grid-gap-md));
+  align-items: var(--dds-grid-align, stretch);
+}
+/* Optional top border */
+.dds-grid-has-top-border {
+  border-top: var(--dds-grid-top-border-thickness, 1px) solid
+    var(--dds-grid-top-border-color, var(--dds-grid-divider-color));
+  padding-top: var(--dds-grid-gap, var(--dds-grid-gap-md));
+}
+/* Optional bottom border */
+.dds-grid-has-bottom-border {
+  border-bottom: var(--dds-grid-bottom-border-thickness, 1px) solid
+    var(--dds-grid-bottom-border-color, var(--dds-grid-divider-color));
+  padding-bottom: var(--dds-grid-gap, var(--dds-grid-gap-md));
+}
+/* Column divider — vertical line between columns */
+.dds-grid-has-column-divider .dds-grid-column + .dds-grid-column {
+  border-left: var(--dds-grid-column-divider-thickness, 1px) solid
+    var(--dds-grid-column-divider-color, var(--dds-grid-divider-color));
+  padding-left: var(--dds-grid-gap, var(--dds-grid-gap-md));
+}
+/* Individual column */
+.dds-grid-column {
+  /* Prevent grid cells from overflowing (e.g. wide code blocks) */
+  min-width: 0;
+}
+/* Sticky column — column div stretches to full row height so that border-left
+   covers the entire row. The CONTENT inside is what scrolls sticky, via the
+   inner wrapper. */
+.dds-grid-column-sticky {
+  /* No align-self override — stretches naturally to row height */
+}
+/* Inner wrapper that provides the actual sticky scroll behaviour */
+.dds-grid-column-sticky-inner {
+  position: sticky;
+  top: var(--dds-grid-sticky-top, 1rem);
+}
+/* =============================================================================
+   Responsive stacking — columns collapse to a single vertical track
+   ============================================================================= */
+/* Stack at sm breakpoint (≤ 640 px) */
+@media (max-width: 640px) {
+  .dds-grid-stack-sm {
+    grid-template-columns: 1fr;
+  }
+
+  /* Column divider becomes a horizontal rule when stacked */
+  .dds-grid-stack-sm.dds-grid-has-column-divider .dds-grid-column + .dds-grid-column {
+    border-left: none;
+    padding-left: 0;
+    border-top: var(--dds-grid-column-divider-thickness, 1px) solid
+      var(--dds-grid-column-divider-color, var(--dds-grid-divider-color));
+    padding-top: var(--dds-grid-gap, var(--dds-grid-gap-md));
+  }
+
+  /* Sticky inner wrapper no-ops when stacked */
+  .dds-grid-stack-sm .dds-grid-column-sticky-inner {
+    position: static;
+  }
+}
+/* Stack at md breakpoint (≤ 768 px) */
+@media (max-width: 768px) {
+  .dds-grid-stack-md {
+    grid-template-columns: 1fr;
+  }
+
+  .dds-grid-stack-md.dds-grid-has-column-divider .dds-grid-column + .dds-grid-column {
+    border-left: none;
+    padding-left: 0;
+    border-top: var(--dds-grid-column-divider-thickness, 1px) solid
+      var(--dds-grid-column-divider-color, var(--dds-grid-divider-color));
+    padding-top: var(--dds-grid-gap, var(--dds-grid-gap-md));
+  }
+
+  .dds-grid-stack-md .dds-grid-column-sticky-inner {
+    position: static;
+  }
+}
+/* Stack at lg breakpoint (≤ 1024 px) */
+@media (max-width: 1024px) {
+  .dds-grid-stack-lg {
+    grid-template-columns: 1fr;
+  }
+
+  .dds-grid-stack-lg.dds-grid-has-column-divider .dds-grid-column + .dds-grid-column {
+    border-left: none;
+    padding-left: 0;
+    border-top: var(--dds-grid-column-divider-thickness, 1px) solid
+      var(--dds-grid-column-divider-color, var(--dds-grid-divider-color));
+    padding-top: var(--dds-grid-gap, var(--dds-grid-gap-md));
+  }
+
+  .dds-grid-stack-lg .dds-grid-column-sticky-inner {
+    position: static;
+  }
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.7.0",
+  "version": "0.9.1",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {