@homebound/beam 3.7.0 → 3.9.0

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 (11) hide show
  1. package/dist/Css.json +7 -6
  2. package/dist/index.cjs +1898 -1874
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +404 -292
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +134 -72
  7. package/dist/index.d.ts +134 -72
  8. package/dist/index.js +1334 -1315
  9. package/dist/index.js.map +1 -1
  10. package/dist/truss.css +11 -33
  11. package/package.json +22 -16
package/dist/truss.css CHANGED
@@ -31,18 +31,12 @@
31
31
  .bcGray300 { border-color: rgba(221, 220, 220, 1); }
32
32
  /* @truss p:2000 c:bcGray400 */
33
33
  .bcGray400 { border-color: rgba(201, 201, 201, 1); }
34
- /* @truss p:2000 c:bcGray600 */
35
- .bcGray600 { border-color: rgba(141, 141, 141, 1); }
36
34
  /* @truss p:2000 c:bcGray700 */
37
35
  .bcGray700 { border-color: rgba(100, 100, 100, 1); }
38
- /* @truss p:2000 c:bcRed400 */
39
- .bcRed400 { border-color: rgba(248, 113, 113, 1); }
40
- /* @truss p:2000 c:bcRed600 */
41
- .bcRed600 { border-color: rgba(220, 38, 38, 1); }
42
36
  /* @truss p:2000 c:bcTransparent */
43
37
  .bcTransparent { border-color: rgba(0,0,0,0); }
44
38
  /* @truss p:2000 c:bcWhite */
45
- .bcWhite { border-color: rgba(255,255,255,1); }
39
+ .bcWhite { border-color: rgba(255, 255, 255, 1); }
46
40
  /* @truss p:2000 c:borderColor_currentColor */
47
41
  .borderColor_currentColor { border-color: currentColor; }
48
42
  /* @truss p:2000 c:borderRadius_0_0_0_8px */
@@ -191,6 +185,8 @@
191
185
  .animationDuration_800ms { animation-duration: 800ms; }
192
186
  /* @truss p:3000 c:animationIterationCount_infinite */
193
187
  .animationIterationCount_infinite { animation-iteration-count: infinite; }
188
+ /* @truss p:3000 c:animationName_loadingDots */
189
+ .animationName_loadingDots { animation-name: loadingDots; }
194
190
  /* @truss p:3000 c:animationName_spin */
195
191
  .animationName_spin { animation-name: spin; }
196
192
  /* @truss p:3000 c:animationTimingFunction_linear */
@@ -213,16 +209,12 @@
213
209
  .backgroundSize_100_100 { background-size: 100% 100%; }
214
210
  /* @truss p:3000 c:bgBlue100 */
215
211
  .bgBlue100 { background-color: rgba(219, 234, 254, 1); }
216
- /* @truss p:3000 c:bgBlue200 */
217
- .bgBlue200 { background-color: rgba(191, 219, 254, 1); }
218
212
  /* @truss p:3000 c:bgBlue50 */
219
213
  .bgBlue50 { background-color: rgba(239, 246, 255, 1); }
220
214
  /* @truss p:3000 c:bgBlue600 */
221
215
  .bgBlue600 { background-color: rgba(37, 99, 235, 1); }
222
216
  /* @truss p:3000 c:bgBlue700 */
223
217
  .bgBlue700 { background-color: rgba(29, 78, 216, 1); }
224
- /* @truss p:3000 c:bgBlue800 */
225
- .bgBlue800 { background-color: rgba(30, 64, 175, 1); }
226
218
  /* @truss p:3000 c:bgBlue900 */
227
219
  .bgBlue900 { background-color: rgba(30, 58, 138, 1); }
228
220
  /* @truss p:3000 c:bgGray100 */
@@ -235,8 +227,6 @@
235
227
  .bgGray400 { background-color: rgba(201, 201, 201, 1); }
236
228
  /* @truss p:3000 c:bgGray50 */
237
229
  .bgGray50 { background-color: rgba(255, 253, 253, 1); }
238
- /* @truss p:3000 c:bgGray600 */
239
- .bgGray600 { background-color: rgba(141, 141, 141, 1); }
240
230
  /* @truss p:3000 c:bgGray700 */
241
231
  .bgGray700 { background-color: rgba(100, 100, 100, 1); }
242
232
  /* @truss p:3000 c:bgGray800 */
@@ -257,12 +247,10 @@
257
247
  .bgRed700 { background-color: rgba(185, 28, 28, 1); }
258
248
  /* @truss p:3000 c:bgRed800 */
259
249
  .bgRed800 { background-color: rgba(153, 27, 27, 1); }
260
- /* @truss p:3000 c:bgRed900 */
261
- .bgRed900 { background-color: rgba(127, 29, 29, 1); }
262
250
  /* @truss p:3000 c:bgTransparent */
263
251
  .bgTransparent { background-color: rgba(0,0,0,0); }
264
252
  /* @truss p:3000 c:bgWhite */
265
- .bgWhite { background-color: rgba(255,255,255,1); }
253
+ .bgWhite { background-color: rgba(255, 255, 255, 1); }
266
254
  /* @truss p:3000 c:bgYellow100 */
267
255
  .bgYellow100 { background-color: rgba(254, 249, 195, 1); }
268
256
  /* @truss p:3000 c:bgYellow200 */
@@ -271,16 +259,10 @@
271
259
  .bgYellow300 { background-color: rgba(253, 224, 71, 1); }
272
260
  /* @truss p:3000 c:bgYellow400 */
273
261
  .bgYellow400 { background-color: rgba(250, 204, 21, 1); }
274
- /* @truss p:3000 c:bgYellow900 */
275
- .bgYellow900 { background-color: rgba(113, 63, 18, 1); }
276
262
  /* @truss p:3000 c:bgc_rgba_36_36_36_0_6 */
277
263
  .bgc_rgba_36_36_36_0_6 { background-color: rgba(36,36,36,0.6); }
278
- /* @truss p:3000 c:blue200 */
279
- .blue200 { color: rgba(191, 219, 254, 1); }
280
264
  /* @truss p:3000 c:blue300 */
281
265
  .blue300 { color: rgba(147, 197, 253, 1); }
282
- /* @truss p:3000 c:blue400 */
283
- .blue400 { color: rgba(96, 165, 250, 1); }
284
266
  /* @truss p:3000 c:blue500 */
285
267
  .blue500 { color: rgba(59, 130, 246, 1); }
286
268
  /* @truss p:3000 c:blue600 */
@@ -302,9 +284,9 @@
302
284
  /* @truss p:3000 c:bshBasic */
303
285
  .bshBasic { box-shadow: 0px 4px 8px rgba(53, 53, 53, 0.08), 0px 2px 16px rgba(53, 53, 53, 0.03);; }
304
286
  /* @truss p:3000 c:bshDanger */
305
- .bshDanger { box-shadow: 0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(153, 27, 27, 1); }
287
+ .bshDanger { box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(153, 27, 27, 1); }
306
288
  /* @truss p:3000 c:bshFocus */
307
- .bshFocus { box-shadow: 0px 0px 0px 2px rgba(255,255,255,1), 0px 0px 0px 4px rgba(29, 78, 216, 1); }
289
+ .bshFocus { box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(29, 78, 216, 1); }
308
290
  /* @truss p:3000 c:bshModal */
309
291
  .bshModal { box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 10px 10px -5px rgba(0,0,0,0.04); }
310
292
  /* @truss p:3000 c:cg3 */
@@ -473,8 +455,6 @@
473
455
  .pointerEvents_none { pointer-events: none; }
474
456
  /* @truss p:3000 c:red200 */
475
457
  .red200 { color: rgba(254, 202, 202, 1); }
476
- /* @truss p:3000 c:red400 */
477
- .red400 { color: rgba(248, 113, 113, 1); }
478
458
  /* @truss p:3000 c:red500 */
479
459
  .red500 { color: rgba(239, 68, 68, 1); }
480
460
  /* @truss p:3000 c:red600 */
@@ -528,7 +508,7 @@
528
508
  /* @truss p:3000 c:wbo_vertical */
529
509
  .wbo_vertical { -webkit-box-orient: vertical; }
530
510
  /* @truss p:3000 c:white */
531
- .white { color: rgba(255,255,255,1); }
511
+ .white { color: rgba(255, 255, 255, 1); }
532
512
  /* @truss p:3000 c:whiteSpace_initial */
533
513
  .whiteSpace_initial { white-space: initial; }
534
514
  /* @truss p:3000 c:whiteSpace_normal */
@@ -567,8 +547,6 @@
567
547
  .z_999999 { z-index: 999999; }
568
548
  /* @truss p:3000.5 c:ai_var */
569
549
  .ai_var { align-items: var(--alignItems); }
570
- /* @truss p:3000.5 c:animationName_var */
571
- .animationName_var { animation-name: var(--animationName); }
572
550
  /* @truss p:3000.5 c:backgroundImage_var */
573
551
  .backgroundImage_var { background-image: var(--backgroundImage); }
574
552
  /* @truss p:3000.5 c:bgColor_var */
@@ -1031,8 +1009,8 @@
1031
1009
  .top_var { top: var(--top); }
1032
1010
  /* @truss p:4000.5 c:w_var */
1033
1011
  .w_var { width: var(--width); }
1034
- /* @truss p:8000 c:selection_bgGray800 */
1035
- .selection_bgGray800::selection { background-color: rgba(53, 53, 53, 1); }
1012
+ /* @truss p:8000.5 c:selection_bgColor_var */
1013
+ .selection_bgColor_var::selection { background-color: var(--selection_backgroundColor); }
1036
1014
  /* @truss @property */
1037
1015
  @property --background { syntax: "*"; inherits: false; }
1038
1016
  /* @truss @property */
@@ -1044,8 +1022,6 @@
1044
1022
  /* @truss @property */
1045
1023
  @property --alignItems { syntax: "*"; inherits: false; }
1046
1024
  /* @truss @property */
1047
- @property --animationName { syntax: "*"; inherits: false; }
1048
- /* @truss @property */
1049
1025
  @property --backgroundImage { syntax: "*"; inherits: false; }
1050
1026
  /* @truss @property */
1051
1027
  @property --backgroundColor { syntax: "*"; inherits: false; }
@@ -1143,6 +1119,8 @@
1143
1119
  @property --top { syntax: "*"; inherits: false; }
1144
1120
  /* @truss @property */
1145
1121
  @property --width { syntax: "*"; inherits: false; }
1122
+ /* @truss @property */
1123
+ @property --selection_backgroundColor { syntax: "*"; inherits: false; }
1146
1124
  /* @truss arbitrary:start */
1147
1125
  .beam-bhp:hover:not(:has(.beam-bhc:hover)) .beam-bhc {
1148
1126
  border-style: solid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homebound/beam",
3
- "version": "3.7.0",
3
+ "version": "3.9.0",
4
4
  "type": "module",
5
5
  "author": "Homebound",
6
6
  "license": "MIT",
@@ -32,19 +32,24 @@
32
32
  },
33
33
  "scripts": {
34
34
  "start": "yarn storybook",
35
- "build": "yarn tsup-node --config tsup.config.ts && yarn copy:truss",
36
- "build:truss": "truss",
35
+ "build": "yarn generate:design-tokens && yarn tsup-node --config tsup.config.ts && yarn copy:truss",
36
+ "build:truss": "yarn generate:design-tokens && truss",
37
+ "generate:design-tokens": "tsx scripts/generate-design-tokens.ts",
38
+ "validate:tokens": "tsx scripts/validate-tokens.ts",
39
+ "check:token-drift": "tsx scripts/check-token-drift.ts",
37
40
  "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build",
38
41
  "test": "vitest run",
39
42
  "test:watch": "vitest",
40
43
  "lint": "eslint --ext js,ts,tsx src",
41
- "lint:fix": "eslint --ext js,ts,tsx --fix src",
44
+ "lint:ci": "eslint --ext js,ts,tsx src --cache --cache-location .eslintcache --quiet",
45
+ "lint:fix": "eslint --ext js,ts,tsx --fix --cache --cache-location .eslintcache src",
46
+ "lint:fix:files": "eslint --ext js,ts,tsx --fix --cache --cache-location .eslintcache",
42
47
  "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9000",
43
48
  "chromatic": "chromatic --project-token=074248da7284 --exit-once-uploaded --only-changed",
44
49
  "copy": "npx copyfiles -u 1 \"./src/**/*.css\" \"./dist/\"",
45
50
  "copy:truss": "cp \"./src/Css.json\" \"./dist/Css.json\"",
46
51
  "copy-to-internal-frontend": "cp -r dist/* ~/homebound/internal-frontend/node_modules/@homebound/beam/dist/",
47
- "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\"",
52
+ "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\" \"tokens/**/*.json\"",
48
53
  "type-check": "yarn tsc"
49
54
  },
50
55
  "dependencies": {
@@ -62,8 +67,8 @@
62
67
  "react-aria": "^3.47.0",
63
68
  "react-day-picker": "8.0.7",
64
69
  "react-popper": "^2.3.0",
65
- "react-router": "^5.3.4",
66
- "react-router-dom": "^5.3.4",
70
+ "react-router": "^6.28.0",
71
+ "react-router-dom": "^6.28.0",
67
72
  "react-stately": "^3.45.0",
68
73
  "react-virtuoso": "^4.2.2",
69
74
  "temporal-polyfill": "^0.3.2",
@@ -75,7 +80,7 @@
75
80
  "peerDependencies": {
76
81
  "mobx-react": ">=7",
77
82
  "react": ">=16",
78
- "react-router-dom": ">=5.2"
83
+ "react-router-dom": ">=6"
79
84
  },
80
85
  "peerDependenciesMeta": {
81
86
  "mobx-react": {
@@ -87,14 +92,14 @@
87
92
  },
88
93
  "devDependencies": {
89
94
  "@homebound/eslint-config": "^1.10.2",
90
- "@homebound/rtl-react-router-utils": "1.3.0",
95
+ "@homebound/rtl-react-router-utils": "2.0.0",
91
96
  "@homebound/rtl-utils": "^2.71.0",
92
- "@homebound/truss": "2.24.0",
97
+ "@homebound/truss": "2.25.0",
93
98
  "@homebound/tsconfig": "^1.1.1",
94
99
  "@semantic-release/exec": "^7.1.0",
95
100
  "@semantic-release/git": "^10.0.1",
96
- "@storybook/addon-links": "^10.2.19",
97
- "@storybook/react-vite": "^10.2.19",
101
+ "@storybook/addon-links": "^10.4.0",
102
+ "@storybook/react-vite": "^10.4.0",
98
103
  "@testing-library/dom": "^10.4.1",
99
104
  "@testing-library/jest-dom": "^6.9.1",
100
105
  "@testing-library/react": "^16.3.2",
@@ -104,12 +109,11 @@
104
109
  "@types/react": "^18.3.11",
105
110
  "@types/react-beautiful-dnd": "^13.1.3",
106
111
  "@types/react-dom": "^18.3.1",
107
- "@types/react-router-dom": "^5.3.3",
108
112
  "array-move": "^4.0.0",
109
113
  "chromatic": "^15.3.0",
110
114
  "conventional-changelog-conventionalcommits": "^9.3.0",
111
115
  "eslint": "^8.52.0",
112
- "eslint-plugin-storybook": "^10.2.19",
116
+ "eslint-plugin-storybook": "^10.4.0",
113
117
  "husky": "^5.1.1",
114
118
  "jsdom": "^29.0.0",
115
119
  "mobx": "^6.15.0",
@@ -119,8 +123,9 @@
119
123
  "react": "^18.3.1",
120
124
  "react-dom": "^18.2.0",
121
125
  "semantic-release": "^24.2.9",
122
- "storybook": "^10.2.19",
126
+ "storybook": "^10.4.0",
123
127
  "tsup": "^8.5.1",
128
+ "tsx": "^4.21.0",
124
129
  "typescript": "5.9.3",
125
130
  "vite": "^8.0.0",
126
131
  "vitest": "^4.1.0",
@@ -128,7 +133,8 @@
128
133
  },
129
134
  "resolutions": {
130
135
  "@types/react": "18.0.28",
131
- "react-router": "5.3.4",
136
+ "react-router": "6.28.0",
137
+ "react-router-dom": "6.28.0",
132
138
  "@typescript-eslint/eslint-plugin": "^7.18.0",
133
139
  "@typescript-eslint/parser": "^7.18.0",
134
140
  "@vitest/expect": "^4.1.0"