@sproutsocial/racine 31.7.14 → 31.7.15

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 31.7.15
+
+### Patch Changes
+
+- Updated dependencies [a0b98f1]
+- Updated dependencies [ea120a6]
+- Updated dependencies [690479a]
+- Updated dependencies [c36361c]
+- Updated dependencies [a635951]
+  - @sproutsocial/seeds-react-character-counter@1.0.8
+  - @sproutsocial/seeds-react-grid@0.2.13
+  - @sproutsocial/seeds-react-duration@1.0.32
+  - @sproutsocial/seeds-react-image@1.0.29
+  - @sproutsocial/seeds-react-empty-state@1.0.31
+  - @sproutsocial/seeds-react-avatar@1.1.25
+  - @sproutsocial/seeds-react-message@1.0.59
+
 ## 31.7.14
 
 ### Patch Changes

package/dist/components.css

@@ -751,6 +751,41 @@
 }
 
 /* end @layer components */
+/* --- seeds-react-character-counter --- */
+/**
+ * Seeds CharacterCounter 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-character-counter" role="status">5</div>
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities
+ * (e.g. `mx-200`, `p-300`) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-character-counter {
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: 1;
+    font-weight: var(--font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-subtext);
+  }
+
+  .seeds-character-counter-mini {
+    font-size: var(--font-size-100);
+  }
+
+  .seeds-character-counter-overlimit {
+    color: var(--color-text-error);
+  }
+}
+
 /* --- seeds-react-chat-bubble --- */
 /**
  * Seeds ChatBubble component classes
@@ -1275,6 +1310,95 @@
   }
 }
 
+/* --- seeds-react-duration --- */
+/**
+ * Seeds Duration 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 (consistent with other Seeds
+ * components). font-variant-numeric has no design token, so this rule uses none.
+ *
+ * Usage:
+ *   <span class="seeds-duration">1m 30s</span>
+ */
+
+@layer components {
+  .seeds-duration {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* --- seeds-react-empty-state --- */
+/**
+ * Seeds EmptyState 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-empty-state">...</div>
+ *
+ * Rules live in @layer components so that consumer Tailwind utilities
+ * (e.g. mx-200, p-300) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-empty-state {
+    max-width: 400px;
+    margin-inline: auto;
+  }
+
+  .seeds-empty-state-media {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: var(--space-450);
+  }
+
+  .seeds-empty-state-content {
+    text-align: center;
+  }
+
+  .seeds-empty-state-headline {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+  }
+
+  .seeds-empty-state-subtext {
+    margin: 0;
+    margin-top: var(--space-400);
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .seeds-empty-state-actions {
+    margin-top: var(--space-450);
+  }
+
+  /* -empty MUST follow the base rule: equal specificity, source order wins */
+  .seeds-empty-state-actions-empty {
+    margin-top: 0;
+  }
+
+  .seeds-empty-state-secondary-action {
+    margin-top: var(--space-400);
+  }
+}
+
 /* --- seeds-react-fieldset --- */
 /**
  * Seeds Fieldset component classes
@@ -1378,6 +1502,95 @@
   }
 }
 
+/* --- seeds-react-grid --- */
+/**
+ * Seeds Grid component classes.
+ *
+ * Scalar column/gap values are applied inline by GridTailwind (jsdom-safe and
+ * they win over these rules). These rules provide sane defaults and drive the
+ * responsive cases: GridTailwind sets --sg-* custom properties per breakpoint
+ * and the media queries below promote them, resolving the sm -> md -> lg -> xl
+ * cascade. Breakpoints match @sproutsocial/seeds-react-theme
+ * (sm 640 / md 768 / lg 1024 / xl 1280).
+ *
+ * All rules are wrapped in `@layer components` so consumer Tailwind utilities
+ * (unlayered) win the cascade, matching button.css.
+ */
+
+@layer components {
+  .seeds-grid {
+    display: grid;
+    grid-template-columns: var(--sg-cols, repeat(1, 1fr));
+    row-gap: var(--sg-row-gap, 0);
+    column-gap: var(--sg-col-gap, 0);
+  }
+
+  @media (min-width: 640px) {
+    .seeds-grid {
+      grid-template-columns: var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)));
+      row-gap: var(--sg-row-gap-sm, var(--sg-row-gap, 0));
+      column-gap: var(--sg-col-gap-sm, var(--sg-col-gap, 0));
+    }
+  }
+
+  @media (min-width: 768px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-md,
+        var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr)))
+      );
+      row-gap: var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)));
+      column-gap: var(
+        --sg-col-gap-md,
+        var(--sg-col-gap-sm, var(--sg-col-gap, 0))
+      );
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-lg,
+        var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
+      );
+      row-gap: var(
+        --sg-row-gap-lg,
+        var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
+      );
+      column-gap: var(
+        --sg-col-gap-lg,
+        var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
+      );
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .seeds-grid {
+      grid-template-columns: var(
+        --sg-cols-xl,
+        var(
+          --sg-cols-lg,
+          var(--sg-cols-md, var(--sg-cols-sm, var(--sg-cols, repeat(1, 1fr))))
+        )
+      );
+      row-gap: var(
+        --sg-row-gap-xl,
+        var(
+          --sg-row-gap-lg,
+          var(--sg-row-gap-md, var(--sg-row-gap-sm, var(--sg-row-gap, 0)))
+        )
+      );
+      column-gap: var(
+        --sg-col-gap-xl,
+        var(
+          --sg-col-gap-lg,
+          var(--sg-col-gap-md, var(--sg-col-gap-sm, var(--sg-col-gap, 0)))
+        )
+      );
+    }
+  }
+}
+
 /* --- seeds-react-icon --- */
 /**
  * Seeds Icon component classes
@@ -1416,6 +1629,26 @@
   }
 }
 
+/* --- seeds-react-image --- */
+/**
+ * Seeds Image component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Usage:
+ *   <img class="seeds-image" />
+ *   <img class="seeds-image seeds-image-loading" />
+ */
+
+@layer components {
+  .seeds-image {
+    display: block;
+  }
+
+  .seeds-image-loading {
+    opacity: 0;
+  }
+}
+
 /* --- seeds-react-indicator --- */
 /**
  * Seeds Indicator component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "31.7.14",
+  "version": "31.7.15",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -74,14 +74,14 @@
   "dependencies": {
     "@size-limit/file": "^11.1.6",
     "@sproutsocial/seeds-react-accordion": "^0.4.59",
-    "@sproutsocial/seeds-react-avatar": "^1.1.24",
+    "@sproutsocial/seeds-react-avatar": "^1.1.25",
     "@sproutsocial/seeds-react-badge": "^2.0.42",
     "@sproutsocial/seeds-react-banner": "^1.1.31",
     "@sproutsocial/seeds-react-box": "^1.1.28",
     "@sproutsocial/seeds-react-breadcrumb": "^1.1.14",
     "@sproutsocial/seeds-react-button": "^2.3.4",
     "@sproutsocial/seeds-react-card": "^1.1.50",
-    "@sproutsocial/seeds-react-character-counter": "^1.0.7",
+    "@sproutsocial/seeds-react-character-counter": "^1.0.8",
     "@sproutsocial/seeds-react-chart-legend": "^1.0.49",
     "@sproutsocial/seeds-react-chat-bubble": "^0.2.5",
     "@sproutsocial/seeds-react-checkbox": "^1.3.50",
@@ -92,14 +92,14 @@
     "@sproutsocial/seeds-react-data-table": "^2.6.32",
     "@sproutsocial/seeds-react-datepicker": "^1.0.47",
     "@sproutsocial/seeds-react-drawer": "^2.2.17",
-    "@sproutsocial/seeds-react-duration": "^1.0.31",
-    "@sproutsocial/seeds-react-empty-state": "^1.0.30",
+    "@sproutsocial/seeds-react-duration": "^1.0.32",
+    "@sproutsocial/seeds-react-empty-state": "^1.0.31",
     "@sproutsocial/seeds-react-fieldset": "^1.0.31",
     "@sproutsocial/seeds-react-form-field": "^1.1.25",
-    "@sproutsocial/seeds-react-grid": "^0.2.12",
+    "@sproutsocial/seeds-react-grid": "^0.2.13",
     "@sproutsocial/seeds-react-hooks": "^3.2.7",
     "@sproutsocial/seeds-react-icon": "^2.4.8",
-    "@sproutsocial/seeds-react-image": "^1.0.28",
+    "@sproutsocial/seeds-react-image": "^1.0.29",
     "@sproutsocial/seeds-react-indicator": "^1.0.48",
     "@sproutsocial/seeds-react-input": "^1.5.37",
     "@sproutsocial/seeds-react-keyboard-key": "^1.0.30",
@@ -108,7 +108,7 @@
     "@sproutsocial/seeds-react-list": "^0.3.36",
     "@sproutsocial/seeds-react-loader": "^1.0.30",
     "@sproutsocial/seeds-react-loader-button": "^1.0.55",
-    "@sproutsocial/seeds-react-message": "^1.0.58",
+    "@sproutsocial/seeds-react-message": "^1.0.59",
     "@sproutsocial/seeds-react-mixins": "^4.3.12",
     "@sproutsocial/seeds-react-modal": "^2.5.32",
     "@sproutsocial/seeds-react-narrative-kit": "^0.6.3",