@sproutsocial/racine 31.7.3 → 31.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +68 -0
  2. package/dist/components.css +179 -0
  3. package/package.json +61 -61
package/CHANGELOG.md CHANGED
@@ -1,5 +1,73 @@
1
1
  # Change Log
2
2
 
3
+ ## 31.7.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [917a951]
8
+ - Updated dependencies [6611f6a]
9
+ - Updated dependencies [ca608f7]
10
+ - Updated dependencies [6216473]
11
+ - @sproutsocial/seeds-react-icon@2.4.3
12
+ - @sproutsocial/seeds-react-numeral@1.0.51
13
+ - @sproutsocial/seeds-react-system-props@3.1.2
14
+ - @sproutsocial/seeds-react-partner-logo@1.7.16
15
+ - @sproutsocial/seeds-react-segmented-control@1.1.25
16
+ - @sproutsocial/seeds-react-accordion@0.4.51
17
+ - @sproutsocial/seeds-react-badge@2.0.37
18
+ - @sproutsocial/seeds-react-banner@1.1.25
19
+ - @sproutsocial/seeds-react-breadcrumb@1.1.10
20
+ - @sproutsocial/seeds-react-button@2.2.4
21
+ - @sproutsocial/seeds-react-card@1.1.45
22
+ - @sproutsocial/seeds-react-chart-legend@1.0.44
23
+ - @sproutsocial/seeds-react-checkbox@1.3.45
24
+ - @sproutsocial/seeds-react-content-header@0.2.23
25
+ - @sproutsocial/seeds-react-data-table@2.6.26
26
+ - @sproutsocial/seeds-react-datepicker@1.0.42
27
+ - @sproutsocial/seeds-react-drawer@2.2.11
28
+ - @sproutsocial/seeds-react-indicator@1.0.43
29
+ - @sproutsocial/seeds-react-input@1.5.30
30
+ - @sproutsocial/seeds-react-link@1.1.16
31
+ - @sproutsocial/seeds-react-list@0.3.30
32
+ - @sproutsocial/seeds-react-modal@2.5.26
33
+ - @sproutsocial/seeds-react-pagination@0.1.24
34
+ - @sproutsocial/seeds-react-panel@1.0.4
35
+ - @sproutsocial/seeds-react-peek-in@0.3.3
36
+ - @sproutsocial/seeds-react-rating@1.0.44
37
+ - @sproutsocial/seeds-react-select@1.1.44
38
+ - @sproutsocial/seeds-react-switch@1.2.42
39
+ - @sproutsocial/seeds-react-table@1.0.45
40
+ - @sproutsocial/seeds-react-toast@1.0.45
41
+ - @sproutsocial/seeds-react-token@1.5.10
42
+ - @sproutsocial/seeds-react-token-input@1.4.52
43
+ - @sproutsocial/seeds-react-tooltip@1.1.30
44
+ - @sproutsocial/seeds-react-avatar@1.1.20
45
+ - @sproutsocial/seeds-react-box@1.1.24
46
+ - @sproutsocial/seeds-react-character-counter@1.0.5
47
+ - @sproutsocial/seeds-react-chat-bubble@0.2.3
48
+ - @sproutsocial/seeds-react-container@0.3.18
49
+ - @sproutsocial/seeds-react-content-block@0.5.18
50
+ - @sproutsocial/seeds-react-duration@1.0.27
51
+ - @sproutsocial/seeds-react-empty-state@1.0.26
52
+ - @sproutsocial/seeds-react-fieldset@1.0.26
53
+ - @sproutsocial/seeds-react-form-field@1.1.20
54
+ - @sproutsocial/seeds-react-grid@0.2.8
55
+ - @sproutsocial/seeds-react-image@1.0.24
56
+ - @sproutsocial/seeds-react-keyboard-key@1.0.26
57
+ - @sproutsocial/seeds-react-label@1.0.26
58
+ - @sproutsocial/seeds-react-loader@1.0.26
59
+ - @sproutsocial/seeds-react-loader-button@1.0.49
60
+ - @sproutsocial/seeds-react-message@1.0.52
61
+ - @sproutsocial/seeds-react-popout@2.5.12
62
+ - @sproutsocial/seeds-react-progress@0.2.11
63
+ - @sproutsocial/seeds-react-radio@1.3.26
64
+ - @sproutsocial/seeds-react-skeleton@1.1.24
65
+ - @sproutsocial/seeds-react-stack@1.0.23
66
+ - @sproutsocial/seeds-react-tabs@1.4.14
67
+ - @sproutsocial/seeds-react-text@1.5.1
68
+ - @sproutsocial/seeds-react-textarea@1.0.25
69
+ - @sproutsocial/seeds-react-visually-hidden@1.0.25
70
+
3
71
  ## 31.7.3
4
72
 
5
73
  ### Patch Changes
package/dist/components.css CHANGED
@@ -929,6 +929,44 @@
929
929
  }
930
930
  }
931
931
 
932
+ /* --- seeds-react-icon --- */
933
+ /**
934
+ * Seeds Icon component classes
935
+ * Use these instead of writing out individual Tailwind utility classes.
936
+ *
937
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
938
+ * CSS variable definitions and dark mode support.
939
+ *
940
+ * The dynamic `size` prop is applied through the `--icon-size` custom property,
941
+ * set inline by IconTailwind (e.g. style={{ "--icon-size": "16px" }}).
942
+ *
943
+ * Usage:
944
+ * <span class="Icon seeds-icon" style="--icon-size: 16px">
945
+ * <svg class="Icon-svg" />
946
+ * </span>
947
+ */
948
+
949
+ @layer components {
950
+ .seeds-icon {
951
+ display: inline-block;
952
+ color: inherit;
953
+ vertical-align: middle;
954
+ line-height: var(--icon-size);
955
+ }
956
+
957
+ .seeds-icon,
958
+ .seeds-icon .Icon-svg {
959
+ height: var(--icon-size);
960
+ fill: currentColor;
961
+ }
962
+
963
+ /* width only applied when fixedWidth */
964
+ .seeds-icon-fixed-width,
965
+ .seeds-icon-fixed-width .Icon-svg {
966
+ width: var(--icon-size);
967
+ }
968
+ }
969
+
932
970
  /* --- seeds-react-link --- */
933
971
  /**
934
972
  * Seeds Link component classes
@@ -2282,6 +2320,65 @@
2282
2320
 
2283
2321
  }
2284
2322
 
2323
+ /* --- seeds-react-numeral --- */
2324
+ /**
2325
+ * Seeds Numeral component classes
2326
+ * Use these instead of writing out individual Tailwind utility classes.
2327
+ *
2328
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
2329
+ * CSS variable definitions and dark mode support.
2330
+ *
2331
+ * Usage:
2332
+ * <span class="seeds-numeral">1,234</span>
2333
+ * <span class="seeds-numeral seeds-numeral-abbr">1.2K</span>
2334
+ */
2335
+
2336
+ @layer components {
2337
+ .seeds-numeral {
2338
+ font-variant-numeric: tabular-nums;
2339
+ }
2340
+
2341
+ .seeds-numeral-abbr {
2342
+ border-bottom: 1px dotted var(--color-container-border-base);
2343
+ }
2344
+ }
2345
+
2346
+ /* --- seeds-react-partner-logo --- */
2347
+ /**
2348
+ * Seeds Partner Logo component classes
2349
+ * Use these instead of writing out individual Tailwind utility classes.
2350
+ *
2351
+ * Ships as a separate CSS file (pulled in by consumers via the package css
2352
+ * export) — not imported from TS, matching the Button component.
2353
+ *
2354
+ * Sizing is runtime-computed (logo size lookup or the height prop), so it is
2355
+ * applied through inline CSS custom properties set on the element's style attr:
2356
+ * --seeds-partner-logo-height container height + line-height + svg height
2357
+ * --seeds-partner-logo-svg-width svg width (unset => auto => sizes from viewBox)
2358
+ *
2359
+ * Usage:
2360
+ * <span class="seeds-partner-logo logo" style="--seeds-partner-logo-height: 16px">
2361
+ * <svg class="logo-svg">…</svg>
2362
+ * </span>
2363
+ */
2364
+
2365
+ @layer components {
2366
+ .seeds-partner-logo {
2367
+ display: inline-block;
2368
+ color: inherit;
2369
+ vertical-align: middle;
2370
+ height: var(--seeds-partner-logo-height);
2371
+ line-height: var(--seeds-partner-logo-height);
2372
+ }
2373
+
2374
+ .seeds-partner-logo .logo-svg {
2375
+ height: var(--seeds-partner-logo-height);
2376
+ /* unset => auto => svg sizes from its viewBox aspect ratio,
2377
+ matching stylesForSize's empty width declaration */
2378
+ width: var(--seeds-partner-logo-svg-width, auto);
2379
+ }
2380
+ }
2381
+
2285
2382
  /* --- seeds-react-profile --- */
2286
2383
  /**
2287
2384
  * Seeds InlineProfile component classes
@@ -2496,6 +2593,88 @@
2496
2593
  }
2497
2594
  }
2498
2595
 
2596
+ /* --- seeds-react-segmented-control --- */
2597
+ /**
2598
+ * Seeds SegmentedControl component classes
2599
+ * Use these instead of writing out individual Tailwind utility classes.
2600
+ *
2601
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
2602
+ * CSS variable definitions and dark mode support. Dark mode works
2603
+ * automatically because the variables below are redefined under
2604
+ * [data-theme="dark"] in theme-all.css.
2605
+ *
2606
+ * Usage:
2607
+ * <div class="seeds-segmented-control">
2608
+ * <button class="seeds-segmented-control-item" data-state="on">One</button>
2609
+ * <button class="seeds-segmented-control-item" data-state="off">Two</button>
2610
+ * </div>
2611
+ */
2612
+
2613
+ /* Rules live in the Tailwind `components` cascade layer so that consumer
2614
+ utility classes (which Tailwind v4 emits in the later `utilities` layer, or
2615
+ unlayered) can override the component's own styles. Without this layer the
2616
+ unlayered component rules would always win the cascade and classes like
2617
+ `p-300`, `mx-200`, or `inline-flex` could not override them. */
2618
+ @layer components {
2619
+ .seeds-segmented-control {
2620
+ display: flex;
2621
+ border: 1px solid var(--color-button-secondary-border-base);
2622
+ border-radius: var(--radius-outer);
2623
+ padding: var(--space-100);
2624
+ font-family: var(--font-family);
2625
+ }
2626
+
2627
+ .seeds-segmented-control-disabled {
2628
+ opacity: 0.4;
2629
+ pointer-events: none;
2630
+ }
2631
+
2632
+ .seeds-segmented-control-item {
2633
+ flex: 1 1 auto;
2634
+ display: flex;
2635
+ align-items: center;
2636
+ justify-content: center;
2637
+ text-align: center;
2638
+ border: 0;
2639
+ cursor: pointer;
2640
+ color: var(--color-text-body);
2641
+ background: transparent;
2642
+ font-size: var(--font-size-200);
2643
+ font-weight: var(--font-weight-semibold);
2644
+ /* Matches default line height of Icon. Also matches the overall height of
2645
+ Input, Select, and Button. */
2646
+ line-height: 16px;
2647
+ border-radius: var(--radius-inner);
2648
+ /* To match the height of buttons... 350 padding - 2px top and bottom padding
2649
+ of the parent - 1px border on top and bottom */
2650
+ padding: calc(var(--space-350) - 6px);
2651
+ transition: all var(--duration-fast);
2652
+ }
2653
+
2654
+ .seeds-segmented-control-item + .seeds-segmented-control-item {
2655
+ margin-left: var(--space-100);
2656
+ }
2657
+
2658
+ .seeds-segmented-control-item:hover {
2659
+ background-color: var(--color-listItem-bg-hover);
2660
+ }
2661
+
2662
+ .seeds-segmented-control-item[data-state="on"] {
2663
+ color: var(--color-text-inverse);
2664
+ background-color: var(--color-listItem-bg-selected);
2665
+ }
2666
+
2667
+ .seeds-segmented-control-item[data-state="on"]:hover {
2668
+ background-color: var(--color-listItem-bg-selected);
2669
+ }
2670
+
2671
+ .seeds-segmented-control-item:disabled,
2672
+ .seeds-segmented-control-item[data-disabled] {
2673
+ opacity: 0.4;
2674
+ pointer-events: none;
2675
+ }
2676
+ }
2677
+
2499
2678
  /* --- seeds-react-select --- */
2500
2679
  /**
2501
2680
  * Seeds Select component classes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "31.7.3",
3
+ "version": "31.7.4",
4
4
  "license": "MIT",
5
5
  "engines": {
6
6
  "node": ">=18"
@@ -73,74 +73,74 @@
73
73
  },
74
74
  "dependencies": {
75
75
  "@size-limit/file": "^11.1.6",
76
- "@sproutsocial/seeds-react-accordion": "^0.4.50",
77
- "@sproutsocial/seeds-react-avatar": "^1.1.19",
78
- "@sproutsocial/seeds-react-badge": "^2.0.36",
79
- "@sproutsocial/seeds-react-banner": "^1.1.24",
80
- "@sproutsocial/seeds-react-box": "^1.1.23",
81
- "@sproutsocial/seeds-react-breadcrumb": "^1.1.9",
82
- "@sproutsocial/seeds-react-button": "^2.2.3",
83
- "@sproutsocial/seeds-react-card": "^1.1.44",
84
- "@sproutsocial/seeds-react-character-counter": "^1.0.4",
85
- "@sproutsocial/seeds-react-chart-legend": "^1.0.43",
86
- "@sproutsocial/seeds-react-chat-bubble": "^0.2.2",
87
- "@sproutsocial/seeds-react-checkbox": "^1.3.44",
76
+ "@sproutsocial/seeds-react-accordion": "^0.4.51",
77
+ "@sproutsocial/seeds-react-avatar": "^1.1.20",
78
+ "@sproutsocial/seeds-react-badge": "^2.0.37",
79
+ "@sproutsocial/seeds-react-banner": "^1.1.25",
80
+ "@sproutsocial/seeds-react-box": "^1.1.24",
81
+ "@sproutsocial/seeds-react-breadcrumb": "^1.1.10",
82
+ "@sproutsocial/seeds-react-button": "^2.2.4",
83
+ "@sproutsocial/seeds-react-card": "^1.1.45",
84
+ "@sproutsocial/seeds-react-character-counter": "^1.0.5",
85
+ "@sproutsocial/seeds-react-chart-legend": "^1.0.44",
86
+ "@sproutsocial/seeds-react-chat-bubble": "^0.2.3",
87
+ "@sproutsocial/seeds-react-checkbox": "^1.3.45",
88
88
  "@sproutsocial/seeds-react-collapsible": "^2.0.1",
89
- "@sproutsocial/seeds-react-container": "^0.3.17",
90
- "@sproutsocial/seeds-react-content-block": "^0.5.17",
91
- "@sproutsocial/seeds-react-content-header": "^0.2.22",
92
- "@sproutsocial/seeds-react-data-table": "^2.6.25",
93
- "@sproutsocial/seeds-react-datepicker": "^1.0.41",
94
- "@sproutsocial/seeds-react-drawer": "^2.2.10",
95
- "@sproutsocial/seeds-react-duration": "^1.0.26",
96
- "@sproutsocial/seeds-react-empty-state": "^1.0.25",
97
- "@sproutsocial/seeds-react-fieldset": "^1.0.25",
98
- "@sproutsocial/seeds-react-form-field": "^1.1.19",
99
- "@sproutsocial/seeds-react-grid": "^0.2.7",
89
+ "@sproutsocial/seeds-react-container": "^0.3.18",
90
+ "@sproutsocial/seeds-react-content-block": "^0.5.18",
91
+ "@sproutsocial/seeds-react-content-header": "^0.2.23",
92
+ "@sproutsocial/seeds-react-data-table": "^2.6.26",
93
+ "@sproutsocial/seeds-react-datepicker": "^1.0.42",
94
+ "@sproutsocial/seeds-react-drawer": "^2.2.11",
95
+ "@sproutsocial/seeds-react-duration": "^1.0.27",
96
+ "@sproutsocial/seeds-react-empty-state": "^1.0.26",
97
+ "@sproutsocial/seeds-react-fieldset": "^1.0.26",
98
+ "@sproutsocial/seeds-react-form-field": "^1.1.20",
99
+ "@sproutsocial/seeds-react-grid": "^0.2.8",
100
100
  "@sproutsocial/seeds-react-hooks": "^3.2.4",
101
- "@sproutsocial/seeds-react-icon": "^2.4.2",
102
- "@sproutsocial/seeds-react-image": "^1.0.23",
103
- "@sproutsocial/seeds-react-indicator": "^1.0.42",
104
- "@sproutsocial/seeds-react-input": "^1.5.29",
105
- "@sproutsocial/seeds-react-keyboard-key": "^1.0.25",
106
- "@sproutsocial/seeds-react-label": "^1.0.25",
107
- "@sproutsocial/seeds-react-link": "^1.1.15",
108
- "@sproutsocial/seeds-react-list": "^0.3.29",
109
- "@sproutsocial/seeds-react-loader": "^1.0.25",
110
- "@sproutsocial/seeds-react-loader-button": "^1.0.48",
111
- "@sproutsocial/seeds-react-message": "^1.0.51",
101
+ "@sproutsocial/seeds-react-icon": "^2.4.3",
102
+ "@sproutsocial/seeds-react-image": "^1.0.24",
103
+ "@sproutsocial/seeds-react-indicator": "^1.0.43",
104
+ "@sproutsocial/seeds-react-input": "^1.5.30",
105
+ "@sproutsocial/seeds-react-keyboard-key": "^1.0.26",
106
+ "@sproutsocial/seeds-react-label": "^1.0.26",
107
+ "@sproutsocial/seeds-react-link": "^1.1.16",
108
+ "@sproutsocial/seeds-react-list": "^0.3.30",
109
+ "@sproutsocial/seeds-react-loader": "^1.0.26",
110
+ "@sproutsocial/seeds-react-loader-button": "^1.0.49",
111
+ "@sproutsocial/seeds-react-message": "^1.0.52",
112
112
  "@sproutsocial/seeds-react-mixins": "^4.3.9",
113
- "@sproutsocial/seeds-react-modal": "^2.5.25",
113
+ "@sproutsocial/seeds-react-modal": "^2.5.26",
114
114
  "@sproutsocial/seeds-react-narrative-kit": "^0.6.0",
115
- "@sproutsocial/seeds-react-numeral": "^1.0.50",
116
- "@sproutsocial/seeds-react-pagination": "^0.1.23",
117
- "@sproutsocial/seeds-react-panel": "^1.0.3",
118
- "@sproutsocial/seeds-react-peek-in": "^0.3.2",
119
- "@sproutsocial/seeds-react-partner-logo": "^1.7.15",
120
- "@sproutsocial/seeds-react-popout": "^2.5.11",
115
+ "@sproutsocial/seeds-react-numeral": "^1.0.51",
116
+ "@sproutsocial/seeds-react-pagination": "^0.1.24",
117
+ "@sproutsocial/seeds-react-panel": "^1.0.4",
118
+ "@sproutsocial/seeds-react-peek-in": "^0.3.3",
119
+ "@sproutsocial/seeds-react-partner-logo": "^1.7.16",
120
+ "@sproutsocial/seeds-react-popout": "^2.5.12",
121
121
  "@sproutsocial/seeds-react-portal": "^1.2.0",
122
- "@sproutsocial/seeds-react-progress": "^0.2.10",
123
- "@sproutsocial/seeds-react-radio": "^1.3.25",
124
- "@sproutsocial/seeds-react-rating": "^1.0.43",
125
- "@sproutsocial/seeds-react-segmented-control": "^1.1.24",
122
+ "@sproutsocial/seeds-react-progress": "^0.2.11",
123
+ "@sproutsocial/seeds-react-radio": "^1.3.26",
124
+ "@sproutsocial/seeds-react-rating": "^1.0.44",
125
+ "@sproutsocial/seeds-react-segmented-control": "^1.1.25",
126
126
  "@sproutsocial/seeds-react-spot-illustration": "^1.2.4",
127
- "@sproutsocial/seeds-react-select": "^1.1.43",
128
- "@sproutsocial/seeds-react-skeleton": "^1.1.23",
129
- "@sproutsocial/seeds-react-stack": "^1.0.22",
130
- "@sproutsocial/seeds-react-switch": "^1.2.41",
131
- "@sproutsocial/seeds-react-system-props": "^3.1.1",
132
- "@sproutsocial/seeds-react-table": "^1.0.44",
133
- "@sproutsocial/seeds-react-tabs": "^1.4.13",
134
- "@sproutsocial/seeds-react-text": "^1.5.0",
135
- "@sproutsocial/seeds-react-textarea": "^1.0.24",
136
- "@sproutsocial/seeds-react-toast": "^1.0.44",
137
- "@sproutsocial/seeds-react-token": "^1.5.9",
138
- "@sproutsocial/seeds-react-token-input": "^1.4.51",
139
- "@sproutsocial/seeds-react-tooltip": "^1.1.29",
127
+ "@sproutsocial/seeds-react-select": "^1.1.44",
128
+ "@sproutsocial/seeds-react-skeleton": "^1.1.24",
129
+ "@sproutsocial/seeds-react-stack": "^1.0.23",
130
+ "@sproutsocial/seeds-react-switch": "^1.2.42",
131
+ "@sproutsocial/seeds-react-system-props": "^3.1.2",
132
+ "@sproutsocial/seeds-react-table": "^1.0.45",
133
+ "@sproutsocial/seeds-react-tabs": "^1.4.14",
134
+ "@sproutsocial/seeds-react-text": "^1.5.1",
135
+ "@sproutsocial/seeds-react-textarea": "^1.0.25",
136
+ "@sproutsocial/seeds-react-toast": "^1.0.45",
137
+ "@sproutsocial/seeds-react-token": "^1.5.10",
138
+ "@sproutsocial/seeds-react-token-input": "^1.4.52",
139
+ "@sproutsocial/seeds-react-tooltip": "^1.1.30",
140
140
  "@sproutsocial/seeds-react-theme": "^4.2.0",
141
141
  "@sproutsocial/seeds-react-theme-provider": "^1.1.22",
142
142
  "@sproutsocial/seeds-react-utilities": "^4.3.0",
143
- "@sproutsocial/seeds-react-visually-hidden": "^1.0.24",
143
+ "@sproutsocial/seeds-react-visually-hidden": "^1.0.25",
144
144
  "scroll-into-view-if-needed": "^2.2.20",
145
145
  "lodash.uniqueid": "^4.0.1",
146
146
  "styled-system": "^5.1.5",
@@ -163,7 +163,7 @@
163
163
  "@sproutsocial/seeds-motion": "^1.8.2",
164
164
  "@sproutsocial/seeds-networkcolor": "^2.22.0",
165
165
  "@sproutsocial/seeds-partner-logos": "^2.4.1",
166
- "@sproutsocial/seeds-react-menu": "^1.16.3",
166
+ "@sproutsocial/seeds-react-menu": "^1.16.4",
167
167
  "@sproutsocial/seeds-react-testing-library": "*",
168
168
  "@sproutsocial/seeds-space": "^0.8.1",
169
169
  "@sproutsocial/seeds-testing": "*",