@sproutsocial/racine 31.7.5 → 31.7.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 31.7.6
+
+### Patch Changes
+
+- Updated dependencies [a217f73]
+- Updated dependencies [9c3cfaf]
+  - @sproutsocial/seeds-react-stack@1.0.24
+  - @sproutsocial/seeds-react-tabs@1.4.15
+
 ## 31.7.5
 
 ### Patch Changes

package/dist/components.css

@@ -263,230 +263,238 @@
  *   <button class="seeds-btn seeds-btn-primary">Click me</button>
  *   <button class="seeds-btn seeds-btn-primary seeds-btn-lg">Large</button>
  *   <button class="seeds-btn seeds-btn-primary seeds-btn-disabled" disabled>Disabled</button>
+ *
+ * All rules are wrapped in `@layer components` so that:
+ * 1. Consumer Tailwind utilities (unlayered) win the cascade over these styles.
+ * 2. Other component CSS also in `@layer components` (e.g. tabs.css) can
+ *    override button base styles by appearing later in source order, without
+ *    needing higher specificity.
  */
 
 @layer components {
 
-.seeds-btn {
-  display: inline-block;
-  box-sizing: border-box;
-  text-align: center;
-  font-family: var(--font-family);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--radius-500);
-  cursor: pointer;
-  text-decoration: none;
-  line-height: 1rem;
-  white-space: nowrap;
-  font-weight: var(--font-weight-bold);
-  transition-property: all;
-  transition-duration: var(--duration-fast);
-  margin: 0;
-  padding: var(--space-300);
-  font-size: var(--font-size-200);
-}
+  .seeds-btn {
+    display: inline-block;
+    box-sizing: border-box;
+    text-align: center;
+    font-family: var(--font-family);
+    border-width: 1px;
+    border-style: solid;
+    border-radius: var(--radius-500);
+    cursor: pointer;
+    text-decoration: none;
+    line-height: 1rem;
+    white-space: nowrap;
+    font-weight: var(--font-weight-bold);
+    transition-property: all;
+    transition-duration: var(--duration-fast);
+    margin: 0;
+    padding: var(--space-300);
+    font-size: var(--font-size-200);
+  }
 
-.seeds-btn:focus {
-  outline: none;
-  box-shadow:
-    0 0 0 1px var(--color-button-primary-bg-base),
-    0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
-}
+  .seeds-btn:focus {
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
+  }
 
-/* KNOWN ISSUE: `small` currently renders identically to the default size — both use
+  /* KNOWN ISSUE: `small` currently renders identically to the default size — both use
    --space-300 / --font-size-200 (only --lg differs). So size="small" has no visual
    effect for ANY appearance. A real fix needs distinct small tokens confirmed against
    Figma (24px target); left out of scope intentionally. */
-.seeds-btn-sm {
-  padding: var(--space-300);
-  font-size: var(--font-size-200);
-}
+  .seeds-btn-sm {
+    padding: var(--space-300);
+    font-size: var(--font-size-200);
+  }
 
-.seeds-btn-lg {
-  padding: var(--space-350);
-  font-size: var(--font-size-300);
-}
+  .seeds-btn-lg {
+    padding: var(--space-350);
+    font-size: var(--font-size-300);
+  }
 
-.seeds-btn-primary {
-  background-color: var(--color-button-primary-bg-base);
-  color: var(--color-button-primary-text-base);
-  border-color: var(--color-button-primary-border-base);
-}
+  .seeds-btn-primary {
+    background-color: var(--color-button-primary-bg-base);
+    color: var(--color-button-primary-text-base);
+    border-color: var(--color-button-primary-border-base);
+  }
 
-.seeds-btn-primary:hover {
-  background-color: var(--color-button-primary-bg-hover);
-  color: var(--color-button-primary-text-hover);
-}
+  .seeds-btn-primary:hover {
+    background-color: var(--color-button-primary-bg-hover);
+    color: var(--color-button-primary-text-hover);
+  }
 
-.seeds-btn-primary:active {
-  background-color: var(--color-button-primary-bg-active);
-}
+  .seeds-btn-primary:active {
+    background-color: var(--color-button-primary-bg-active);
+  }
 
-.seeds-btn-secondary {
-  background-color: var(--color-button-secondary-bg-base);
-  color: var(--color-button-secondary-text-base);
-  border-color: var(--color-button-secondary-border-base);
-}
+  .seeds-btn-secondary {
+    background-color: var(--color-button-secondary-bg-base);
+    color: var(--color-button-secondary-text-base);
+    border-color: var(--color-button-secondary-border-base);
+  }
 
-.seeds-btn-secondary:hover {
-  background-color: var(--color-button-secondary-bg-hover);
-  color: var(--color-button-secondary-text-hover);
-}
+  .seeds-btn-secondary:hover {
+    background-color: var(--color-button-secondary-bg-hover);
+    color: var(--color-button-secondary-text-hover);
+  }
 
-.seeds-btn-secondary:active {
-  background-color: var(--color-button-secondary-bg-active);
-}
+  .seeds-btn-secondary:active {
+    background-color: var(--color-button-secondary-bg-active);
+  }
 
-.seeds-btn-destructive {
-  background-color: var(--color-button-destructive-bg-base);
-  color: var(--color-button-destructive-text-base);
-  border-color: var(--color-button-destructive-border-base);
-}
+  .seeds-btn-destructive {
+    background-color: var(--color-button-destructive-bg-base);
+    color: var(--color-button-destructive-text-base);
+    border-color: var(--color-button-destructive-border-base);
+  }
 
-.seeds-btn-destructive:hover {
-  background-color: var(--color-button-destructive-bg-hover);
-  color: var(--color-button-destructive-text-hover);
-}
+  .seeds-btn-destructive:hover {
+    background-color: var(--color-button-destructive-bg-hover);
+    color: var(--color-button-destructive-text-hover);
+  }
 
-.seeds-btn-destructive:active {
-  background-color: var(--color-button-destructive-bg-active);
-}
+  .seeds-btn-destructive:active {
+    background-color: var(--color-button-destructive-bg-active);
+  }
 
-.seeds-btn-placeholder {
-  background-color: var(--color-button-placeholder-bg-base);
-  color: var(--color-button-placeholder-text-base);
-  border-color: var(--color-button-placeholder-border-base);
-  border-style: dashed;
-}
+  .seeds-btn-placeholder {
+    background-color: var(--color-button-placeholder-bg-base);
+    color: var(--color-button-placeholder-text-base);
+    border-color: var(--color-button-placeholder-border-base);
+    border-style: dashed;
+  }
 
-.seeds-btn-placeholder:hover {
-  background-color: var(--color-button-placeholder-bg-hover);
-  color: var(--color-button-placeholder-text-hover);
-}
+  .seeds-btn-placeholder:hover {
+    background-color: var(--color-button-placeholder-bg-hover);
+    color: var(--color-button-placeholder-text-hover);
+  }
 
-.seeds-btn-unstyled {
-  background-color: var(--color-button-unstyled-bg-base);
-  color: var(--color-button-unstyled-text-base);
-  border-color: transparent;
-}
+  .seeds-btn-unstyled {
+    background-color: var(--color-button-unstyled-bg-base);
+    color: var(--color-button-unstyled-text-base);
+    border-color: transparent;
+  }
 
-.seeds-btn-unstyled:hover {
-  color: var(--color-button-unstyled-text-hover);
-}
+  .seeds-btn-unstyled:hover {
+    color: var(--color-button-unstyled-text-hover);
+  }
 
-/* AI brand appearances — built on the shared --color-gradient-ai* tokens.
+  /* AI brand appearances — built on the shared --color-gradient-ai* tokens.
    Rendered only via this Tailwind/CSS path (see ButtonHybrid routing guard). */
-.seeds-btn-ai-primary {
-  background-color: transparent;
-  background-image: var(--color-button-ai-primary-bg-base);
-  /* Cover the full border box (incl. the base 1px transparent border) and don't
+  .seeds-btn-ai-primary {
+    background-color: transparent;
+    background-image: var(--color-button-ai-primary-bg-base);
+    /* Cover the full border box (incl. the base 1px transparent border) and don't
      tile — otherwise the gradient repeats as a 1px strip along each edge. */
-  background-origin: border-box;
-  background-repeat: no-repeat;
-  color: var(--color-button-ai-primary-text-base);
-  border-color: transparent;
-}
+    background-origin: border-box;
+    background-repeat: no-repeat;
+    color: var(--color-button-ai-primary-text-base);
+    border-color: transparent;
+  }
 
-.seeds-btn-ai-secondary {
-  /* White base shows through the 20% gradient tint to produce the soft fill. */
-  background-color: #fff;
-  background-image: var(--color-button-ai-secondary-bg-base);
-  background-origin: border-box;
-  background-repeat: no-repeat;
-  color: var(--color-button-ai-secondary-text-base);
-  border-color: transparent;
-}
+  .seeds-btn-ai-secondary {
+    /* White base shows through the 20% gradient tint to produce the soft fill. */
+    background-color: #fff;
+    background-image: var(--color-button-ai-secondary-bg-base);
+    background-origin: border-box;
+    background-repeat: no-repeat;
+    color: var(--color-button-ai-secondary-text-base);
+    border-color: transparent;
+  }
 
-.seeds-btn-ai-outline {
-  position: relative;
-  background-color: transparent;
-  color: var(--color-button-ai-outline-text-base);
-  border-color: transparent;
-}
+  .seeds-btn-ai-outline {
+    position: relative;
+    background-color: transparent;
+    color: var(--color-button-ai-outline-text-base);
+    border-color: transparent;
+  }
 
-/* Rounded gradient border via a masked ::before so it respects border-radius
+  /* Rounded gradient border via a masked ::before so it respects border-radius
    and does not tint the label/icon. */
-.seeds-btn-ai-outline::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background: var(--color-gradient-ai);
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  pointer-events: none;
-}
+  .seeds-btn-ai-outline::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: var(--color-gradient-ai);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
 
-/* Subtle, brand-consistent hover across all three AI appearances. */
-.seeds-btn-ai-primary:hover,
-.seeds-btn-ai-secondary:hover,
-.seeds-btn-ai-outline:hover {
-  filter: brightness(0.96);
-}
+  /* Subtle, brand-consistent hover across all three AI appearances. */
+  .seeds-btn-ai-primary:hover,
+  .seeds-btn-ai-secondary:hover,
+  .seeds-btn-ai-outline:hover {
+    filter: brightness(0.96);
+  }
 
-/* Active (sustained selected) state — mirrors styled-components: hover text color + active background */
-.seeds-btn-primary.seeds-btn-active {
-  color: var(--color-button-primary-text-hover);
-  background-color: var(--color-button-primary-bg-active);
-}
+  /* Active (sustained selected) state — mirrors styled-components: hover text color + active background */
+  .seeds-btn-primary.seeds-btn-active {
+    color: var(--color-button-primary-text-hover);
+    background-color: var(--color-button-primary-bg-active);
+  }
 
-.seeds-btn-secondary.seeds-btn-active {
-  color: var(--color-button-secondary-text-hover);
-  background-color: var(--color-button-secondary-bg-active);
-}
+  .seeds-btn-secondary.seeds-btn-active {
+    color: var(--color-button-secondary-text-hover);
+    background-color: var(--color-button-secondary-bg-active);
+  }
 
-.seeds-btn-destructive.seeds-btn-active {
-  color: var(--color-button-destructive-text-hover);
-  background-color: var(--color-button-destructive-bg-active);
-}
+  .seeds-btn-destructive.seeds-btn-active {
+    color: var(--color-button-destructive-text-hover);
+    background-color: var(--color-button-destructive-bg-active);
+  }
 
-.seeds-btn-placeholder.seeds-btn-active {
-  color: var(--color-button-placeholder-text-hover);
-  background-color: var(--color-button-placeholder-bg-active);
-}
+  .seeds-btn-placeholder.seeds-btn-active {
+    color: var(--color-button-placeholder-text-hover);
+    background-color: var(--color-button-placeholder-bg-active);
+  }
 
-/* unstyled active: only text color changes (no background token) */
-.seeds-btn-unstyled.seeds-btn-active {
-  color: var(--color-button-unstyled-text-hover);
-}
+  /* unstyled active: only text color changes (no background token) */
+  .seeds-btn-unstyled.seeds-btn-active {
+    color: var(--color-button-unstyled-text-hover);
+  }
 
-.seeds-btn-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
+  .seeds-btn-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 
-.seeds-btn-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--radius-pill);
-  min-width: var(--space-600);
-  min-height: var(--space-600);
-  padding: var(--space-300);
-  color: var(--color-button-pill-text-base);
-}
+  .seeds-btn-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-pill);
+    min-width: var(--space-600);
+    min-height: var(--space-600);
+    padding: var(--space-300);
+    color: var(--color-button-pill-text-base);
+  }
 
-.seeds-btn-pill:hover,
-.seeds-btn-pill:focus:active {
-  background-color: transparent;
-  color: var(--color-button-pill-text-hover);
-  box-shadow: inset 0px 0px 0px 1px var(--color-button-pill-border-hover);
-}
+  .seeds-btn-pill:hover,
+  .seeds-btn-pill:focus:active {
+    background-color: transparent;
+    color: var(--color-button-pill-text-hover);
+    box-shadow: inset 0px 0px 0px 1px var(--color-button-pill-border-hover);
+  }
+
+  .seeds-btn-pill.seeds-btn-active {
+    color: var(--color-button-pill-text-hover);
+    background-color: var(--color-button-pill-bg-active);
+  }
 
-.seeds-btn-pill.seeds-btn-active {
-  color: var(--color-button-pill-text-hover);
-  background-color: var(--color-button-pill-bg-active);
 }
 
-} /* end @layer components */
+/* end @layer components */
 /* --- seeds-react-collapsible --- */
 /**
  * Seeds Collapsible component classes
@@ -3320,6 +3328,107 @@
   }
 }
 
+/* --- seeds-react-stack --- */
+/**
+ * Seeds Stack component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-stack seeds-stack-vertical seeds-stack-align-left seeds-stack-space-300">…</div>
+ */
+
+/*
+ * Wrapped in @layer components so consumer Tailwind utilities (which live in
+ * @layer utilities, ordered after components) can override these component
+ * styles. Unlayered rules would always win the cascade regardless of source
+ * order, preventing overrides like className="inline-flex mx-200".
+ */
+@layer components {
+  .seeds-stack {
+    display: flex;
+  }
+
+  .seeds-stack-vertical {
+    flex-direction: column;
+  }
+
+  .seeds-stack-horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* vertical: align controls the cross axis (align-items) */
+  .seeds-stack-vertical.seeds-stack-align-left {
+    align-items: flex-start;
+  }
+
+  .seeds-stack-vertical.seeds-stack-align-center {
+    align-items: center;
+  }
+
+  .seeds-stack-vertical.seeds-stack-align-right {
+    align-items: flex-end;
+  }
+
+  .seeds-stack-vertical.seeds-stack-align-stretch {
+    align-items: stretch;
+  }
+
+  /* horizontal: align-items stays center; align controls justify-content */
+  .seeds-stack-horizontal.seeds-stack-align-center {
+    justify-content: center;
+  }
+
+  .seeds-stack-horizontal.seeds-stack-align-right {
+    justify-content: flex-end;
+  }
+
+  /* stretch + horizontal: stretch each child to fill (replicates flexBasis: 100%) */
+  .seeds-stack-horizontal.seeds-stack-align-stretch > * {
+    flex-basis: 100%;
+  }
+
+  /* spacing via gap (replaces the per-child margins of the styled-components path) */
+  .seeds-stack-space-0 {
+    gap: var(--space-0);
+  }
+
+  .seeds-stack-space-100 {
+    gap: var(--space-100);
+  }
+
+  .seeds-stack-space-200 {
+    gap: var(--space-200);
+  }
+
+  .seeds-stack-space-300 {
+    gap: var(--space-300);
+  }
+
+  .seeds-stack-space-350 {
+    gap: var(--space-350);
+  }
+
+  .seeds-stack-space-400 {
+    gap: var(--space-400);
+  }
+
+  .seeds-stack-space-450 {
+    gap: var(--space-450);
+  }
+
+  .seeds-stack-space-500 {
+    gap: var(--space-500);
+  }
+
+  .seeds-stack-space-600 {
+    gap: var(--space-600);
+  }
+}
+
 /* --- seeds-react-switch --- */
 /**
  * Seeds Switch component classes
@@ -3461,6 +3570,130 @@
   }
 }
 
+/* --- seeds-react-tabs --- */
+/**
+ * Seeds Tabs component classes
+ * CSS-class implementation of the tab list container and tab buttons, mirroring
+ * the styled-components version in styles.ts. Used by the Tailwind path of the
+ * hybrid Tabs component.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support. Tab buttons render on top of
+ * the .seeds-btn / .seeds-btn-unstyled classes from button.css — both files
+ * are in `@layer components`, so source order (tabs imported after button)
+ * determines which overrides win.
+ *
+ * All rules are wrapped in `@layer components` so consumer Tailwind utilities
+ * (which are unlayered) win the cascade over these component styles. Without the
+ * layer, equal-specificity utilities like `mx-200`, `p-300`, or `inline-flex`
+ * would be decided by source order and could silently lose to the component CSS.
+ */
+
+@layer components {
+  .seeds-tab-container {
+    display: inline-flex;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+    max-width: 100%;
+    min-height: min-content;
+    flex-shrink: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    scroll-padding-inline: 48px;
+    scroll-behavior: smooth;
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-tab-container-fullwidth {
+    display: flex;
+  }
+
+  .seeds-tab-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .seeds-tab-container[data-fade-right] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      black 0,
+      black calc(100% - 48px),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      black 0,
+      black calc(100% - 48px),
+      transparent
+    );
+  }
+
+  .seeds-tab-container[data-fade-left] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black 100%
+    );
+    mask-image: linear-gradient(to right, transparent, black 48px, black 100%);
+  }
+
+  .seeds-tab-container[data-fade-left][data-fade-right] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black calc(100% - 48px),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 48px,
+      black calc(100% - 48px),
+      transparent
+    );
+  }
+
+  .seeds-tab-button {
+    margin-bottom: -1px;
+    padding: var(--space-350) var(--space-350);
+    color: var(--color-text-headline);
+    border-radius: 0;
+    border-width: 0 0 3px;
+    /* Reserve the 3px indicator while keeping it invisible until selected, so
+       selecting a tab causes no layout shift (matches the styled-components path,
+       which inherits transparent borders from .seeds-btn-unstyled). */
+    border-color: transparent;
+    width: 100%;
+  }
+
+  .seeds-tab-button-fullwidth {
+    flex-grow: 1;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .seeds-tab-button-selected {
+    color: var(--color-link-base);
+    border-color: transparent transparent var(--color-button-primary-bg-base);
+  }
+
+  .seeds-tab-button-selected:hover {
+    color: var(--color-link-hover);
+  }
+
+  .seeds-tab-button:focus,
+  .seeds-tab-button:active {
+    box-shadow: none;
+  }
+
+  .seeds-tab-button:active {
+    transform: none;
+  }
+}
+
 /* --- seeds-react-text --- */
 /**
  * Seeds Text component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.7.5",
+  "version": "31.7.6",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -126,11 +126,11 @@
     "@sproutsocial/seeds-react-spot-illustration": "^1.2.4",
     "@sproutsocial/seeds-react-select": "^1.1.44",
     "@sproutsocial/seeds-react-skeleton": "^1.1.24",
-    "@sproutsocial/seeds-react-stack": "^1.0.23",
+    "@sproutsocial/seeds-react-stack": "^1.0.24",
     "@sproutsocial/seeds-react-switch": "^1.2.43",
     "@sproutsocial/seeds-react-system-props": "^3.1.2",
     "@sproutsocial/seeds-react-table": "^1.0.45",
-    "@sproutsocial/seeds-react-tabs": "^1.4.14",
+    "@sproutsocial/seeds-react-tabs": "^1.4.15",
     "@sproutsocial/seeds-react-text": "^1.5.1",
     "@sproutsocial/seeds-react-textarea": "^1.0.25",
     "@sproutsocial/seeds-react-toast": "^1.0.45",