@sproutsocial/racine 31.7.25 → 31.7.27

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Change Log
 
+## 31.7.27
+
+### Patch Changes
+
+- Updated dependencies [736b022]
+- Updated dependencies [8842be3]
+- Updated dependencies [9d7c36d]
+  - @sproutsocial/seeds-react-character-counter@1.1.0
+  - @sproutsocial/seeds-react-avatar@1.2.0
+  - @sproutsocial/seeds-react-hooks@3.4.0
+  - @sproutsocial/seeds-react-message@1.0.66
+  - @sproutsocial/seeds-react-drawer@2.2.23
+  - @sproutsocial/seeds-react-input@1.5.43
+  - @sproutsocial/seeds-react-panel@1.2.2
+  - @sproutsocial/seeds-react-peek-in@0.6.2
+  - @sproutsocial/seeds-react-popout@2.5.24
+  - @sproutsocial/seeds-react-token@1.5.21
+  - @sproutsocial/seeds-react-token-input@1.4.65
+  - @sproutsocial/seeds-react-accordion@0.4.68
+
+## 31.7.26
+
+### Patch Changes
+
+- Updated dependencies [ffdb036]
+- Updated dependencies [e39bbd7]
+- Updated dependencies [32c2ae7]
+  - @sproutsocial/seeds-react-chart-legend@1.0.54
+  - @sproutsocial/seeds-react-list@0.4.0
+  - @sproutsocial/seeds-react-checkbox@1.3.55
+  - @sproutsocial/seeds-react-message@1.0.65
+  - @sproutsocial/seeds-react-accordion@0.4.67
+
 ## 31.7.25
 
 ### Patch Changes

package/dist/components.css

@@ -289,6 +289,55 @@
   }
 }
 
+/* --- seeds-react-avatar --- */
+/**
+ * Seeds DualAvatar 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, plus avatar.css for the
+ * two Avatars themselves.
+ *
+ * Usage:
+ *   <div class="seeds-dual-avatar" style="--seeds-dual-avatar-offset: 4px">
+ *     <div class="seeds-avatar ...">JD</div>
+ *     <div class="seeds-avatar seeds-dual-avatar-secondary ...">JR</div>
+ *   </div>
+ *
+ * The overhang is driven by the --seeds-dual-avatar-offset custom property, set
+ * inline by the component as a fraction of its `size` prop and inherited by the
+ * secondary avatar.
+ *
+ * This file sits alongside avatar.css rather than inside src/DualAvatar/ because
+ * racine's stylesheet aggregation globs `src/*.css` per package and does not
+ * recurse into subdirectories.
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities win in
+ * the cascade and can override these component styles.
+ */
+
+@layer components {
+  .seeds-dual-avatar {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .seeds-avatar.seeds-dual-avatar-secondary {
+    position: absolute;
+    right: calc(-1 * var(--seeds-dual-avatar-offset));
+    bottom: calc(-1 * var(--seeds-dual-avatar-offset));
+  }
+
+  /*
+   * An image secondary has no border of its own (.seeds-avatar sets border: none),
+   * so it needs a ring to separate it from the primary underneath.
+   */
+  .seeds-avatar.seeds-dual-avatar-secondary:not(.seeds-avatar-fallback) {
+    box-shadow: 0 0 0 1px var(--color-container-bg-base);
+  }
+}
+
 /* --- seeds-react-badge --- */
 /**
  * Seeds Badge component classes
@@ -1017,6 +1066,56 @@
   }
 }
 
+/* --- seeds-react-chart-legend --- */
+@layer components {
+  .seeds-chart-legend {
+    --chart-legend-label-color: var(--color-text-subtext);
+    --chart-legend-swatch-gap: var(--space-300);
+    --chart-legend-swatch-size: var(--space-350);
+    --chart-legend-label-gap: var(--space-450);
+    --chart-legend-font-family: var(--font-family);
+    --chart-legend-font-size: var(--font-size-200);
+    --chart-legend-line-height: var(--line-height-200);
+  }
+
+  .seeds-chart-legend-inline {
+    display: flex;
+    justify-content: center;
+  }
+
+  .seeds-chart-legend-label {
+    display: flex;
+    align-items: center;
+    color: var(--chart-legend-label-color, var(--color-text-subtext));
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+
+  .seeds-chart-legend-inline
+    .seeds-chart-legend-label
+    + .seeds-chart-legend-label {
+    margin-left: var(--chart-legend-label-gap, var(--space-450));
+  }
+
+  .seeds-chart-legend-swatch {
+    margin-right: var(--chart-legend-swatch-gap, var(--space-300));
+    width: var(--chart-legend-swatch-size, var(--space-350));
+    height: var(--chart-legend-swatch-size, var(--space-350));
+    border-radius: 4px;
+  }
+
+  .seeds-chart-legend-text {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--chart-legend-font-family, var(--font-family));
+    font-size: var(--chart-legend-font-size, var(--font-size-200));
+    line-height: var(--chart-legend-line-height, var(--line-height-200));
+    word-break: break-word;
+    hyphens: auto;
+  }
+}
+
 /* --- seeds-react-chat-bubble --- */
 /**
  * Seeds ChatBubble component classes
@@ -1079,6 +1178,195 @@
   }
 }
 
+/* --- seeds-react-checkbox --- */
+/**
+ * Seeds Checkbox 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 (default appearance): rendered by CheckboxTailwind on top of
+ * `@base-ui/react`'s Checkbox —
+ *   <span class="seeds-checkbox">
+ *     <button class="seeds-checkbox-input" role="checkbox">
+ *       <span class="seeds-checkbox-indicator">
+ *         <Icon class="seeds-checkbox-icon" />
+ *       </span>
+ *     </button>
+ *     <span class="seeds-checkbox-label">Label</span>
+ *   </span>
+ *
+ * The default-appearance box is base-ui's `Checkbox.Root` (`<button
+ * role="checkbox">`) and the mark is a real `<Icon>` inside
+ * `Checkbox.Indicator`. State is read from base-ui's ARIA contract
+ * (`aria-checked` = "true" | "mixed" | "false") and its `data-disabled`
+ * attribute, so there is no imperative `indeterminate` sync and no mask-image
+ * pseudo-element — which is what made the previous indeterminate rendering
+ * unreliable.
+ *
+ * All rules are wrapped in `@layer components` so consuming Tailwind utility
+ * classes (e.g. `mx-200`, `p-300`, `inline-flex`) win the cascade over these
+ * component styles.
+ */
+
+@layer components {
+/* ----------------------------------------------------------------------------
+ * Default appearance
+ * ------------------------------------------------------------------------- */
+
+.seeds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  transition: all var(--duration-fast) var(--ease-ease_in);
+}
+
+/* Whole control dims when the control is disabled (matches container opacity).
+   base-ui sets both the native `disabled` attribute and `data-disabled`. */
+.seeds-checkbox:has(.seeds-checkbox-input:disabled),
+.seeds-checkbox:has(.seeds-checkbox-input[data-disabled]) {
+  opacity: 0.4;
+}
+
+/* The box — base-ui's Checkbox.Root <button>. `color` sets the grey mark used
+   for the hover preview; the selected state overrides the mark color below. */
+.seeds-checkbox .seeds-checkbox-input {
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: var(--space-400);
+  height: var(--space-400);
+  border: 1px solid var(--color-form-border-base);
+  border-radius: var(--radius-400);
+  background-color: var(--color-form-bg-base);
+  color: var(--color-form-border-base);
+  transition: all var(--duration-fast) var(--ease-ease_in);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.seeds-checkbox .seeds-checkbox-input:disabled,
+.seeds-checkbox .seeds-checkbox-input[data-disabled] {
+  cursor: not-allowed;
+}
+
+/* Selected (checked or indeterminate): filled box. The mark color is set here
+   (not on the icon) so it inherits through the seeds Icon's unlayered
+   `.Icon { color: inherit }` rule, which would otherwise win the cascade over a
+   layered color on `.seeds-checkbox-icon`. `--color-icon-inverse` resolves to
+   white in light mode and black in dark mode — matching the SC component's
+   `icon.inverse` checked-mark color (styles.tsx:137). */
+.seeds-checkbox .seeds-checkbox-input[aria-checked="true"],
+.seeds-checkbox .seeds-checkbox-input[aria-checked="mixed"] {
+  border-color: var(--color-form-border-selected);
+  background-color: var(--color-form-bg-selected);
+  color: var(--color-icon-inverse);
+}
+
+/* Focus ring. The visible box is base-ui's Checkbox.Root <button>, but base-ui
+   also renders a separate hidden <input> for form participation, and focus (on
+   click or Tab) can land on that <input> rather than the button. A plain
+   `.seeds-checkbox-input:focus` only matched the button, so the ring never
+   painted and the box looked unfocusable. Track focus anywhere inside the
+   control and paint the ring on the visible box regardless of which element
+   actually holds focus: base-ui mirrors focus state onto the Root button as
+   `data-focused`, and the `:has(:focus)` wrapper rules catch focus on either
+   the button or the hidden <input>. `:focus` (not `:focus-visible`) keeps parity
+   with the styled-components `focusRing` mixin, which shows the ring on both
+   keyboard focus and click (styles.tsx:115-117). */
+.seeds-checkbox .seeds-checkbox-input[data-focused],
+.seeds-checkbox:has(.seeds-checkbox-input:focus) .seeds-checkbox-input,
+.seeds-checkbox:has(input:focus) .seeds-checkbox-input {
+  box-shadow:
+    0 0 0 1px var(--color-button-primary-bg-base),
+    0 0px 0px 4px
+      color-mix(
+        in srgb,
+        var(--color-button-primary-bg-base),
+        transparent 70%
+      );
+  outline: none;
+}
+
+.seeds-checkbox .seeds-checkbox-input:focus::-moz-focus-inner {
+  border: 0;
+}
+
+/* The mark — a real <Icon> inside Checkbox.Indicator (kept mounted). Hidden by
+   default; shown (inverse) when selected, previewed (grey) on hover. */
+.seeds-checkbox .seeds-checkbox-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.seeds-checkbox .seeds-checkbox-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  color: currentColor;
+  pointer-events: none;
+  transition: var(--duration-fast) var(--ease-ease_inout);
+}
+
+.seeds-checkbox .seeds-checkbox-icon,
+.seeds-checkbox .seeds-checkbox-icon .Icon-svg {
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+}
+
+/* Selected: inverse mark, shown. The mark inherits its color from the box's
+   `color: var(--color-icon-inverse)` above (via the Icon's unlayered
+   `color: inherit`), so only opacity is toggled here. */
+.seeds-checkbox .seeds-checkbox-input[aria-checked="true"] .seeds-checkbox-icon,
+.seeds-checkbox
+  .seeds-checkbox-input[aria-checked="mixed"]
+  .seeds-checkbox-icon {
+  opacity: 1;
+}
+
+/* Hover previews the mark (grey, via the box `color`) unless the control is
+   disabled and unchecked. */
+.seeds-checkbox
+  .seeds-checkbox-input:not(:disabled):not([data-disabled]):hover
+  .seeds-checkbox-icon {
+  opacity: 1;
+}
+
+.seeds-checkbox
+  .seeds-checkbox-input[aria-checked="false"]:disabled:hover
+  .seeds-checkbox-icon,
+.seeds-checkbox
+  .seeds-checkbox-input[aria-checked="false"][data-disabled]:hover
+  .seeds-checkbox-icon {
+  opacity: 0;
+}
+
+.seeds-checkbox-label {
+  margin-left: var(--space-300);
+  font-size: var(--font-size-200);
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text-headline);
+}
+
+.seeds-checkbox:has(.seeds-checkbox-input:disabled) .seeds-checkbox-label {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+} /* end @layer components */
+
 /* --- seeds-react-collapsible --- */
 /**
  * Seeds Collapsible component classes
@@ -2204,6 +2492,120 @@
   }
 }
 
+/* --- seeds-react-list --- */
+/**
+ * Seeds List 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:
+ *   <ul class="seeds-list">
+ *     <li class="seeds-list-item">…</li>
+ *     <li class="seeds-list-item seeds-list-item-bordered">…</li>
+ *   </ul>
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities
+ * (e.g. mt-300, p-300) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  /* List container: strip the browser's default list chrome. */
+  .seeds-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* List item: rounded row that stacks with top spacing. The legacy component
+     applies `mt={300}` to every item (including the first), so the class does
+     the same rather than collapsing the first item's margin. */
+  .seeds-list-item {
+    box-sizing: border-box;
+    margin-top: var(--space-300);
+    border-radius: var(--radius-outer);
+  }
+
+  /* Bordered items read as a card/button: 1px container border + padding.
+     borderWidths[500] resolves to 1px; no --border-width var is emitted. */
+  .seeds-list-item-bordered {
+    border: 1px solid var(--color-container-border-base);
+    padding: var(--space-300);
+  }
+
+  /* ListItemContent ---------------------------------------------------- */
+
+  /* Outer row: main content left, aside/actions right, baseline-aligned. */
+  .seeds-list-item-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    border-radius: var(--radius-outer);
+  }
+
+  /* Main content grows to fill; icon sits to the left of the text block. */
+  .seeds-list-item-content-main {
+    display: flex;
+    flex: 1;
+  }
+
+  /* Icon spacing previously came from Icon's mr={300} system prop. */
+  .seeds-list-item-content-icon {
+    margin-right: var(--space-300);
+  }
+
+  .seeds-list-item-content-text {
+    flex: 1;
+  }
+
+  /* Details byline spacing previously came from its mt={200} system prop.
+     The details node is a Text.Byline, so it also carries `.seeds-text`, whose
+     `margin: 0` sits later in the aggregated component layer and would reset a
+     single-class rule. Qualify with the parent to raise specificity above
+     `.seeds-text` while staying inside the components layer (consumer utilities
+     still win). */
+  .seeds-list-item-content .seeds-list-item-content-details {
+    margin-top: var(--space-200);
+  }
+
+  /* Aside/actions cluster on the right; does not shrink. */
+  .seeds-list-item-content-aside {
+    display: flex;
+    align-items: center;
+    gap: var(--space-300);
+    flex-shrink: 0;
+  }
+
+  .seeds-list-item-content-actions {
+    display: flex;
+    align-items: center;
+  }
+
+  /* ListItemButton ----------------------------------------------------- */
+
+  /* Container reads as a card. radii[500] resolves to 6px (--radius-inner). */
+  .seeds-list-item-button {
+    position: relative;
+    box-sizing: border-box;
+    border: 1px solid var(--color-container-border-base);
+    padding: var(--space-300);
+    border-radius: var(--radius-inner);
+    background-color: var(--color-container-bg-base);
+    color: var(--color-text-body);
+  }
+
+  /* Transparent overlay button that captures clicks across the whole card. */
+  .seeds-list-item-button-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 /* --- seeds-react-loader --- */
 /**
  * Seeds Loader component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.7.25",
+  "version": "31.7.27",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -73,51 +73,51 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.66",
-    "@sproutsocial/seeds-react-avatar": "^1.1.29",
+    "@sproutsocial/seeds-react-accordion": "^0.4.68",
+    "@sproutsocial/seeds-react-avatar": "^1.2.0",
     "@sproutsocial/seeds-react-badge": "^2.0.46",
     "@sproutsocial/seeds-react-banner": "^1.1.36",
     "@sproutsocial/seeds-react-box": "^1.1.32",
     "@sproutsocial/seeds-react-breadcrumb": "^1.1.18",
     "@sproutsocial/seeds-react-button": "^2.3.9",
     "@sproutsocial/seeds-react-card": "^1.1.55",
-    "@sproutsocial/seeds-react-character-counter": "^1.0.10",
-    "@sproutsocial/seeds-react-chart-legend": "^1.0.53",
+    "@sproutsocial/seeds-react-character-counter": "^1.1.0",
+    "@sproutsocial/seeds-react-chart-legend": "^1.0.54",
     "@sproutsocial/seeds-react-chat-bubble": "^0.2.7",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.54",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.55",
     "@sproutsocial/seeds-react-collapsible": "^2.0.1",
     "@sproutsocial/seeds-react-container": "^0.3.26",
     "@sproutsocial/seeds-react-content-block": "^0.6.1",
     "@sproutsocial/seeds-react-content-header": "^0.3.1",
     "@sproutsocial/seeds-react-data-table": "^2.6.38",
     "@sproutsocial/seeds-react-datepicker": "^1.0.51",
-    "@sproutsocial/seeds-react-drawer": "^2.2.22",
+    "@sproutsocial/seeds-react-drawer": "^2.2.23",
     "@sproutsocial/seeds-react-duration": "^1.0.36",
     "@sproutsocial/seeds-react-empty-state": "^1.0.35",
     "@sproutsocial/seeds-react-fieldset": "^1.0.35",
     "@sproutsocial/seeds-react-form-field": "^1.1.29",
     "@sproutsocial/seeds-react-grid": "^0.2.17",
-    "@sproutsocial/seeds-react-hooks": "^3.3.2",
+    "@sproutsocial/seeds-react-hooks": "^3.4.0",
     "@sproutsocial/seeds-react-icon": "^2.5.2",
     "@sproutsocial/seeds-react-image": "^1.0.33",
     "@sproutsocial/seeds-react-indicator": "^1.0.52",
-    "@sproutsocial/seeds-react-input": "^1.5.42",
+    "@sproutsocial/seeds-react-input": "^1.5.43",
     "@sproutsocial/seeds-react-keyboard-key": "^1.0.34",
     "@sproutsocial/seeds-react-label": "^1.0.34",
     "@sproutsocial/seeds-react-link": "^1.1.24",
-    "@sproutsocial/seeds-react-list": "^0.3.41",
+    "@sproutsocial/seeds-react-list": "^0.4.0",
     "@sproutsocial/seeds-react-loader": "^1.0.34",
     "@sproutsocial/seeds-react-loader-button": "^1.0.60",
-    "@sproutsocial/seeds-react-message": "^1.0.64",
+    "@sproutsocial/seeds-react-message": "^1.0.66",
     "@sproutsocial/seeds-react-mixins": "^4.3.16",
     "@sproutsocial/seeds-react-modal": "^2.6.1",
     "@sproutsocial/seeds-react-narrative-kit": "^0.6.7",
     "@sproutsocial/seeds-react-numeral": "^1.0.60",
     "@sproutsocial/seeds-react-pagination": "^0.1.33",
-    "@sproutsocial/seeds-react-panel": "^1.2.1",
-    "@sproutsocial/seeds-react-peek-in": "^0.6.1",
+    "@sproutsocial/seeds-react-panel": "^1.2.2",
+    "@sproutsocial/seeds-react-peek-in": "^0.6.2",
     "@sproutsocial/seeds-react-partner-logo": "^1.7.24",
-    "@sproutsocial/seeds-react-popout": "^2.5.23",
+    "@sproutsocial/seeds-react-popout": "^2.5.24",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
     "@sproutsocial/seeds-react-progress": "^0.2.19",
     "@sproutsocial/seeds-react-radio": "^1.3.35",
@@ -134,8 +134,8 @@
     "@sproutsocial/seeds-react-text": "^1.5.5",
     "@sproutsocial/seeds-react-textarea": "^1.0.33",
     "@sproutsocial/seeds-react-toast": "^1.0.54",
-    "@sproutsocial/seeds-react-token": "^1.5.20",
-    "@sproutsocial/seeds-react-token-input": "^1.4.64",
+    "@sproutsocial/seeds-react-token": "^1.5.21",
+    "@sproutsocial/seeds-react-token-input": "^1.4.65",
     "@sproutsocial/seeds-react-tooltip": "^1.1.39",
     "@sproutsocial/seeds-react-theme": "^4.5.1",
     "@sproutsocial/seeds-react-theme-provider": "^1.1.29",
@@ -163,7 +163,7 @@
     "@sproutsocial/seeds-motion": "^1.8.2",
     "@sproutsocial/seeds-networkcolor": "^2.22.0",
     "@sproutsocial/seeds-partner-logos": "^2.4.1",
-    "@sproutsocial/seeds-react-menu": "^1.18.0",
+    "@sproutsocial/seeds-react-menu": "^1.18.2",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",