@sproutsocial/racine 33.0.0 → 33.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 33.0.1
+
+### Patch Changes
+
+- Updated dependencies [a757aff]
+  - @sproutsocial/seeds-react-popout@2.5.27
+  - @sproutsocial/seeds-react-accordion@0.4.71
+
 ## 33.0.0
 
 ### Major Changes

package/dist/components.css

@@ -6162,6 +6162,142 @@
   }
 }
 
+/* --- seeds-react-token-input --- */
+/**
+ * Seeds TokenInput 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-token-input"><input /></div>
+ *   <div class="seeds-token-input seeds-token-input-invalid"><input /></div>
+ *
+ * Rules live in `@layer components` so that consumer Tailwind utilities win in
+ * the cascade and can override these component styles, rather than tying/beating
+ * them on specificity.
+ */
+
+@layer components {
+  .seeds-token-input {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+    cursor: text;
+    width: 100%;
+    border: 1px solid var(--color-form-border-base);
+    border-radius: var(--radius-500);
+    margin: 0;
+    padding: var(--space-300);
+    padding-top: var(--space-200);
+    background-color: var(--color-form-bg-base);
+    color: var(--color-text-body);
+    transition:
+      border-color var(--duration-fast) var(--ease-ease_in),
+      box-shadow var(--duration-fast) var(--ease-ease_in);
+    font-size: var(--font-size-200);
+    line-height: 16px;
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-normal);
+    appearance: none;
+  }
+
+  .seeds-token-input button {
+    margin: var(--space-200) var(--space-200) 0 0;
+  }
+
+  .seeds-token-input input,
+  .seeds-token-input textarea {
+    font-size: var(--font-size-200);
+    line-height: 16px;
+    outline: none;
+    border: none;
+    flex: 1;
+    padding: 0;
+    padding-top: var(--space-100);
+    margin: var(--space-200) var(--space-300) var(--space-100) 0;
+    color: var(--color-text-body);
+    background-color: var(--color-form-bg-base);
+    /* This matches the height of the token so size does not change as tokens are added */
+    min-height: 20px;
+  }
+
+  .seeds-token-input input::-webkit-search-cancel-button,
+  .seeds-token-input textarea::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  /* Explicitly removes double focus ring — focus is passed up from the input to
+     the parent container (.seeds-token-input-focused). */
+  .seeds-token-input input:focus,
+  .seeds-token-input textarea:focus {
+    box-shadow: none;
+  }
+
+  /* https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
+  .seeds-token-input input::-ms-clear,
+  .seeds-token-input textarea::-ms-clear {
+    display: none;
+  }
+
+  /* Fix for red ring when input is marked required in Firefox */
+  .seeds-token-input input:not(output):not(:focus):-moz-ui-invalid,
+  .seeds-token-input textarea:not(output):not(:focus):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .seeds-token-input input::placeholder,
+  .seeds-token-input textarea::placeholder {
+    color: var(--color-form-placeholder-base);
+    font-style: italic;
+  }
+
+  .seeds-token-input textarea {
+    font-family: var(--font-family);
+  }
+
+  /* Accessory spacing */
+  .seeds-token-input-has-before {
+    padding-left: 40px;
+  }
+
+  .seeds-token-input-has-after {
+    padding-right: 40px;
+  }
+
+  /* Focus ring on the container (mirrors the focusRing mixin) */
+  .seeds-token-input-focused {
+    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);
+  }
+
+  /* State borders — declared after base so border-color wins */
+  .seeds-token-input-invalid {
+    border-color: var(--color-form-border-error);
+  }
+
+  .seeds-token-input-warning {
+    border-color: var(--color-form-border-warning);
+  }
+
+  /* Disabled */
+  .seeds-token-input-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-token-input-disabled input,
+  .seeds-token-input-disabled textarea {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
 /* --- seeds-react-tooltip --- */
 /**
  * Seeds Tooltip component classes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "33.0.0",
+  "version": "33.0.1",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@size-limit/file": "^11.1.6",
-    "@sproutsocial/seeds-react-accordion": "^0.4.70",
+    "@sproutsocial/seeds-react-accordion": "^0.4.71",
     "@sproutsocial/seeds-react-avatar": "^1.2.2",
     "@sproutsocial/seeds-react-badge": "^2.0.48",
     "@sproutsocial/seeds-react-banner": "^1.1.38",
@@ -112,7 +112,7 @@
     "@sproutsocial/seeds-react-panel": "^1.2.4",
     "@sproutsocial/seeds-react-peek-in": "^0.6.4",
     "@sproutsocial/seeds-react-partner-logo": "^1.7.26",
-    "@sproutsocial/seeds-react-popout": "^2.5.26",
+    "@sproutsocial/seeds-react-popout": "^2.5.27",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
     "@sproutsocial/seeds-react-progress": "^0.2.21",
     "@sproutsocial/seeds-react-radio": "^1.3.37",
@@ -158,7 +158,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.4",
+    "@sproutsocial/seeds-react-menu": "^1.18.5",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-space": "^0.8.1",
     "@sproutsocial/seeds-testing": "*",