@roadlittledawn/docs-design-system-react 0.3.0 → 0.5.0

package/dist/styles.css

@@ -209,6 +209,42 @@
   --dds-collapser-icon-color: #6b7280; /* gray-500 */
   --dds-collapser-text: #374151; /* gray-700 */
   --dds-collapser-content-padding: 1rem; /* p-4 */
+
+  /* Tabs */
+  --dds-tabs-margin: 1rem 0;
+  --dds-tabs-border: #e5e7eb; /* gray-200 */
+  --dds-tabs-tab-padding: 0.75rem 1rem;
+  --dds-tabs-tab-bg: transparent;
+  --dds-tabs-tab-text: #6b7280; /* gray-500 */
+  --dds-tabs-tab-size: 0.875rem;
+  --dds-tabs-tab-text-hover: #374151; /* gray-700 */
+  --dds-tabs-tab-bg-hover: transparent;
+  --dds-tabs-tab-text-active: #111827; /* gray-900 */
+  --dds-tabs-tab-bg-active: transparent;
+  --dds-tabs-tab-border-active: #3b82f6; /* blue-500 */
+  --dds-tabs-panel-padding: 1.25rem 0;
+  --dds-tabs-panel-text: #111827; /* gray-900 */
+
+  /* Popover */
+  --dds-popover-bg: #ffffff;
+  --dds-popover-border: #e5e7eb; /* gray-200 */
+  --dds-popover-radius: 0.5rem; /* rounded-lg */
+  --dds-popover-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --dds-popover-text: #374151; /* gray-700 */
+  --dds-popover-title-color: #111827; /* gray-900 */
+  --dds-popover-eyebrow-color: #6b7280; /* gray-500 */
+  --dds-popover-link-color: #2563eb; /* blue-600 */
+  --dds-popover-link-color-hover: #1e40af; /* blue-800 */
+  --dds-popover-width-sm: 240px;
+  --dds-popover-width-md: 320px;
+  --dds-popover-width-lg: 480px;
+  --dds-popover-padding: 1rem;
+  --dds-popover-image-height: 120px;
+  --dds-popover-title-size: 0.9375rem; /* ~15px */
+  --dds-popover-text-size: 0.875rem; /* text-sm */
+  --dds-popover-eyebrow-size: 0.6875rem; /* ~11px */
 }
 /* ==========================================================================
    Dark Mode Tokens
@@ -297,6 +333,17 @@
   --dds-collapser-icon-color: #9ca3af; /* gray-400 */
   --dds-collapser-text: #e5e7eb; /* gray-200 */
 
+  /* Tabs */
+  --dds-tabs-border: #4b5563; /* gray-600 */
+  --dds-tabs-tab-bg: transparent;
+  --dds-tabs-tab-text: #9ca3af; /* gray-400 */
+  --dds-tabs-tab-text-hover: #e5e7eb; /* gray-200 */
+  --dds-tabs-tab-bg-hover: transparent;
+  --dds-tabs-tab-text-active: #f9fafb; /* gray-50 */
+  --dds-tabs-tab-bg-active: transparent;
+  --dds-tabs-tab-border-active: #60a5fa; /* blue-400 */
+  --dds-tabs-panel-text: #e5e7eb; /* gray-200 */
+
   /* CodeBlock */
   --dds-code-block-bg: #0a0a0a;
   --dds-code-block-border: #2e2e2e; /* hsla(0,0%,18%,1) */
@@ -339,6 +386,18 @@
   --dds-prism-keyword: #60a5fa; /* blue-400 */
   --dds-prism-function: #a78bfa; /* violet-400 */
   --dds-prism-regex: #fb923c; /* orange-400 */
+
+  /* Popover */
+  --dds-popover-bg: #1f2937; /* gray-800 */
+  --dds-popover-border: #4b5563; /* gray-600 */
+  --dds-popover-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --dds-popover-text: #e5e7eb; /* gray-200 */
+  --dds-popover-title-color: #f9fafb; /* gray-50 */
+  --dds-popover-eyebrow-color: #9ca3af; /* gray-400 */
+  --dds-popover-link-color: #60a5fa; /* blue-400 */
+  --dds-popover-link-color-hover: #93c5fd; /* blue-300 */
 }
 /* Auto dark mode — follows OS preference, opt-out with .dds-light */
 @media (prefers-color-scheme: dark) {
@@ -422,6 +481,17 @@
     --dds-collapser-icon-color: #9ca3af;
     --dds-collapser-text: #e5e7eb;
 
+    /* Tabs */
+    --dds-tabs-border: #4b5563;
+    --dds-tabs-tab-bg: transparent;
+    --dds-tabs-tab-text: #9ca3af;
+    --dds-tabs-tab-text-hover: #e5e7eb;
+    --dds-tabs-tab-bg-hover: transparent;
+    --dds-tabs-tab-text-active: #f9fafb;
+    --dds-tabs-tab-bg-active: transparent;
+    --dds-tabs-tab-border-active: #60a5fa;
+    --dds-tabs-panel-text: #e5e7eb;
+
     /* CodeBlock */
     --dds-code-block-bg: #0a0a0a;
     --dds-code-block-border: #262626;
@@ -464,6 +534,18 @@
     --dds-prism-keyword: #60a5fa;
     --dds-prism-function: #a78bfa;
     --dds-prism-regex: #fb923c;
+
+    /* Popover */
+    --dds-popover-bg: #1f2937;
+    --dds-popover-border: #4b5563;
+    --dds-popover-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+      0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    --dds-popover-text: #e5e7eb;
+    --dds-popover-title-color: #f9fafb;
+    --dds-popover-eyebrow-color: #9ca3af;
+    --dds-popover-link-color: #60a5fa;
+    --dds-popover-link-color-hover: #93c5fd;
   }
 }
 /* Explicit dark mode via data attribute (overrides OS preference) */
@@ -589,6 +671,18 @@
   --dds-prism-keyword: #60a5fa;
   --dds-prism-function: #a78bfa;
   --dds-prism-regex: #fb923c;
+
+  /* Popover */
+  --dds-popover-bg: #1f2937;
+  --dds-popover-border: #4b5563;
+  --dds-popover-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.4),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --dds-popover-text: #e5e7eb;
+  --dds-popover-title-color: #f9fafb;
+  --dds-popover-eyebrow-color: #9ca3af;
+  --dds-popover-link-color: #60a5fa;
+  --dds-popover-link-color-hover: #93c5fd;
 }
 /* Import PrismJS theme */
 /**
@@ -1279,6 +1373,50 @@ a.no-text-decoration {
 .dds-code-block-content .token.variable {
   color: var(--dds-prism-regex);
 }
+.dds-tabs {
+  margin: var(--dds-tabs-margin);
+}
+.dds-tabs-list {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--dds-tabs-border);
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.dds-tabs-list::-webkit-scrollbar {
+  display: none;
+}
+.dds-tab {
+  padding: var(--dds-tabs-tab-padding);
+  background-color: var(--dds-tabs-tab-bg);
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--dds-tabs-tab-text);
+  font-size: var(--dds-tabs-tab-size);
+  font-weight: var(--dds-font-medium);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--dds-transition-colors);
+}
+.dds-tab:hover {
+  color: var(--dds-tabs-tab-text-hover);
+  background-color: var(--dds-tabs-tab-bg-hover);
+}
+.dds-tab-active {
+  color: var(--dds-tabs-tab-text-active);
+  background-color: var(--dds-tabs-tab-bg-active);
+  border-bottom-color: var(--dds-tabs-tab-border-active);
+}
+.dds-tab-active:hover {
+  background-color: var(--dds-tabs-tab-bg-active);
+}
+.dds-tab-panel {
+  padding: var(--dds-tabs-panel-padding);
+  color: var(--dds-tabs-panel-text);
+}
 .dds-typography {
   color: var(--dds-heading-color);
 }
@@ -1328,4 +1466,226 @@ a.no-text-decoration {
   margin-bottom: 0.25rem; /* mb-1 */
   vertical-align: middle;
 }
+/* ==========================================================================
+   Popover Component
+   Uses the native Popover API for top-layer rendering.
+   Positioning is handled via inline styles set by JS (getBoundingClientRect).
+   ========================================================================== */
+/* Trigger */
+.dds-popover-trigger {
+  display: inline;
+  cursor: default;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: currentColor;
+  text-underline-offset: 3px;
+  border-radius: 2px;
+  outline-offset: 2px;
+}
+.dds-popover-trigger:focus-visible {
+  outline: 2px solid var(--dds-link-color);
+}
+/* ==========================================================================
+   Popover panel — rendered in the top layer via Popover API
+   ========================================================================== */
+.dds-popover {
+  /* Reset browser popover defaults */
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: visible;
+  inset: unset; /* we set top/left via JS */
+
+  /* Layout */
+  position: fixed;
+  width: var(--dds-popover-width-md);
+  max-width: calc(100vw - 16px);
+
+  /* Appearance */
+  background: var(--dds-popover-bg);
+  border: 1px solid var(--dds-popover-border);
+  border-radius: var(--dds-popover-radius);
+  box-shadow: var(--dds-popover-shadow);
+  color: var(--dds-popover-text);
+  font-size: var(--dds-popover-text-size);
+  line-height: var(--dds-line-height-relaxed);
+
+  /* Hidden by default (Popover API manages this, but we set it for fallback) */
+  display: none;
+}
+/* Popover API open state */
+.dds-popover:popover-open {
+  display: block;
+}
+/* ==========================================================================
+   Entry / exit animations
+   ========================================================================== */
+@keyframes dds-popover-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes dds-popover-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.dds-popover:popover-open {
+  animation: dds-popover-in-bottom 150ms ease forwards;
+}
+.dds-popover:popover-open[data-placement="top"] {
+  animation: dds-popover-in-top 150ms ease forwards;
+}
+/* @starting-style enables the entry animation when the element first enters the top layer */
+@starting-style {
+  .dds-popover:popover-open {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  .dds-popover:popover-open[data-placement="top"] {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+.dds-popover-sm {
+  width: var(--dds-popover-width-sm);
+}
+.dds-popover-md {
+  width: var(--dds-popover-width-md);
+}
+.dds-popover-lg {
+  width: var(--dds-popover-width-lg);
+}
+/* ==========================================================================
+   Shared inner elements
+   ========================================================================== */
+.dds-popover-eyebrow {
+  display: block;
+  font-size: var(--dds-popover-eyebrow-size);
+  font-weight: var(--dds-font-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dds-popover-eyebrow-color);
+  margin-bottom: 0.25rem;
+}
+.dds-popover-title {
+  margin: 0 0 0.5rem;
+  font-size: var(--dds-popover-title-size);
+  font-weight: var(--dds-font-semibold);
+  color: var(--dds-popover-title-color);
+  line-height: var(--dds-line-height-tight);
+}
+.dds-popover-title dfn {
+  font-style: normal;
+}
+.dds-popover-body {
+  color: var(--dds-popover-text);
+  font-size: var(--dds-popover-text-size);
+  line-height: var(--dds-line-height-relaxed);
+}
+.dds-popover-body p {
+  margin: 0;
+}
+.dds-popover-body a {
+  color: var(--dds-popover-link-color);
+}
+.dds-popover-body a:hover {
+  color: var(--dds-popover-link-color-hover);
+}
+/* ==========================================================================
+   Glossary template
+   ========================================================================== */
+.dds-popover-glossary {
+  padding: var(--dds-popover-padding);
+}
+/* ==========================================================================
+   Preview template
+   ========================================================================== */
+.dds-popover-preview {
+  /* no padding at top — image goes edge-to-edge */
+}
+.dds-popover-preview-image-wrap {
+  width: 100%;
+  height: var(--dds-popover-image-height);
+  overflow: hidden;
+  border-radius: var(--dds-popover-radius) var(--dds-popover-radius) 0 0;
+  background: var(--dds-popover-border);
+}
+.dds-popover-preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.dds-popover-preview-body {
+  padding: var(--dds-popover-padding);
+}
+.dds-popover-preview-link {
+  display: inline-block;
+  margin-top: 0.5rem;
+  font-size: var(--dds-popover-text-size);
+  font-weight: var(--dds-font-medium);
+  color: var(--dds-popover-link-color);
+  text-decoration: none;
+}
+.dds-popover-preview-link:hover {
+  color: var(--dds-popover-link-color-hover);
+  text-decoration: underline;
+}
+/* ==========================================================================
+   Mobile — bottom sheet on small screens
+   At ≤ 640px the popover slides up from the bottom of the viewport
+   regardless of JS-computed position.
+   ========================================================================== */
+@media (max-width: 640px) {
+  .dds-popover:popover-open {
+    /* Override JS-set position — anchor to bottom of viewport */
+    top: auto !important;
+    left: 0 !important;
+    bottom: 0;
+    width: 100% !important;
+    max-width: 100%;
+    border-radius: var(--dds-popover-radius) var(--dds-popover-radius) 0 0;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    animation: dds-popover-sheet-in 200ms ease forwards;
+  }
+
+  .dds-popover-preview-image-wrap {
+    border-radius: var(--dds-popover-radius) var(--dds-popover-radius) 0 0;
+  }
+}
+@keyframes dds-popover-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@starting-style {
+  @media (max-width: 640px) {
+    .dds-popover:popover-open {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+}
 

package/package.json

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