@hopper-ui/styled-system 0.2.1 → 0.2.2

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 (86) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/StyledSystemProvider.css +132 -1
  3. package/dist/StyledSystemProvider.d.ts +42 -4
  4. package/dist/StyledSystemProvider.js +25 -26
  5. package/dist/chunk-2ITAI3PJ.js +270 -0
  6. package/dist/chunk-35LDZFKX.js +29 -0
  7. package/dist/chunk-3YM73BQP.js +6 -0
  8. package/dist/chunk-7HCELIKZ.js +41 -0
  9. package/dist/chunk-FYKLSVLR.js +39 -0
  10. package/dist/chunk-GYREQTEK.js +30 -0
  11. package/dist/chunk-I37Y2R7V.js +4 -0
  12. package/dist/chunk-IK6W4ZXH.js +11 -0
  13. package/dist/chunk-IP7TYBR3.js +19 -0
  14. package/dist/chunk-JBWKRDVA.js +27 -0
  15. package/dist/chunk-JQBON2KA.js +23 -0
  16. package/dist/chunk-KUUJ37DW.js +96 -0
  17. package/dist/chunk-LU33LZMJ.js +55 -0
  18. package/dist/chunk-OHW5NUAW.js +59 -0
  19. package/dist/chunk-Q3NLRNZN.js +881 -0
  20. package/dist/chunk-RIR7BXVF.js +711 -0
  21. package/dist/chunk-STEDL5VQ.js +25 -0
  22. package/dist/chunk-U3SI5QXV.js +911 -0
  23. package/dist/chunk-U5R6ZXH3.js +46 -0
  24. package/dist/chunk-V7X6ANEM.js +14 -0
  25. package/dist/chunk-X5OXC6DN.js +9 -0
  26. package/dist/chunk-XUHDFZZL.js +10 -0
  27. package/dist/chunk-YPIK2HRL.js +6 -0
  28. package/dist/chunk-ZO3DYLQJ.js +32 -0
  29. package/dist/chunk-ZQUJDDQL.js +84 -0
  30. package/dist/chunk-ZUVKM5DV.js +13 -0
  31. package/dist/color-scheme/ColorSchemeContext.d.ts +12 -0
  32. package/dist/color-scheme/ColorSchemeContext.js +1 -0
  33. package/dist/color-scheme/useColorScheme.d.ts +6 -0
  34. package/dist/color-scheme/useColorScheme.js +2 -0
  35. package/dist/color-scheme/useColorSchemeValue.d.ts +3 -0
  36. package/dist/color-scheme/useColorSchemeValue.js +2 -0
  37. package/dist/global-styles/BodyStyleProvider.d.ts +5 -0
  38. package/dist/global-styles/BodyStyleProvider.js +8 -0
  39. package/dist/html-wrappers/html.css +132 -0
  40. package/dist/{StyledSystemProvider-173b78af.d.ts → html-wrappers/html.d.ts} +8 -53
  41. package/dist/html-wrappers/html.js +10 -0
  42. package/dist/html-wrappers/htmlElement.css +132 -0
  43. package/dist/html-wrappers/htmlElement.d.ts +12 -0
  44. package/dist/html-wrappers/htmlElement.js +9 -0
  45. package/dist/index.css +132 -1
  46. package/dist/index.d.ts +23 -2385
  47. package/dist/index.js +26 -26
  48. package/dist/responsive/BreakpointContext.d.ts +10 -0
  49. package/dist/responsive/BreakpointContext.js +2 -0
  50. package/dist/responsive/BreakpointProvider.d.ts +12 -0
  51. package/dist/responsive/BreakpointProvider.js +5 -0
  52. package/dist/responsive/Breakpoints.d.ts +10 -0
  53. package/dist/responsive/Breakpoints.js +1 -0
  54. package/dist/responsive/useResponsiveValue.d.ts +11 -0
  55. package/dist/responsive/useResponsiveValue.js +4 -0
  56. package/dist/styled-system-props.d.ts +1246 -3
  57. package/dist/styled-system-props.js +1 -3
  58. package/dist/styled-system-root-css-class.js +1 -3
  59. package/dist/tokens/TokenProvider.d.ts +20 -0
  60. package/dist/tokens/TokenProvider.js +8 -0
  61. package/dist/tokens/generated/dark-semantic-tokens.d.ts +272 -0
  62. package/dist/tokens/generated/dark-semantic-tokens.js +1 -0
  63. package/dist/tokens/generated/light-semantic-tokens.d.ts +883 -0
  64. package/dist/tokens/generated/light-semantic-tokens.js +1 -0
  65. package/dist/tokens/generated/styled-system-to-token-mappings.d.ts +913 -0
  66. package/dist/tokens/generated/styled-system-to-token-mappings.js +1 -0
  67. package/dist/{styled-system-props-1c231c50.d.ts → tokens/token-mappings.d.ts} +2 -1258
  68. package/dist/tokens/token-mappings.js +6 -0
  69. package/dist/tokens/tokens.d.ts +1154 -0
  70. package/dist/tokens/tokens.js +3 -0
  71. package/dist/useStyledSystem.css +125 -1
  72. package/dist/useStyledSystem.d.ts +4 -1
  73. package/dist/useStyledSystem.js +8 -5
  74. package/dist/utils/assertion.d.ts +15 -0
  75. package/dist/utils/assertion.js +1 -0
  76. package/dist/utils/useInsertStyleElement.d.ts +6 -0
  77. package/dist/utils/useInsertStyleElement.js +3 -0
  78. package/dist/utils/useIsomorphicInsertionEffect.d.ts +16 -0
  79. package/dist/utils/useIsomorphicInsertionEffect.js +1 -0
  80. package/dist/utils/useIsomorphicLayoutEffect.d.ts +16 -0
  81. package/dist/utils/useIsomorphicLayoutEffect.js +1 -0
  82. package/dist/utils/useMediaQuery.d.ts +4 -0
  83. package/dist/utils/useMediaQuery.js +1 -0
  84. package/dist/utils/useThemeComputedStyle.d.ts +14 -0
  85. package/dist/utils/useThemeComputedStyle.js +2 -0
  86. package/package.json +1 -1
package/dist/styled-system-props.js CHANGED
@@ -1,3 +1 @@
1
- var e="UNSAFE_";
2
-
3
- export { e as UnsafePrefix };
1
+ export { UnsafePrefix } from './chunk-I37Y2R7V.js';
package/dist/styled-system-root-css-class.js CHANGED
@@ -1,3 +1 @@
1
- var e={name:"@hopper-ui/styled-system",author:"Workleap",version:"0.2.1",description:"The styled-system package.",license:"Apache-2.0",repository:{type:"git",url:"git+https://github.com/gsoft-inc/wl-hopper.git",directory:"packages/styled-system"},publishConfig:{access:"public",provenance:!0},type:"module",sideEffects:["*.css"],main:"dist/index.js",types:"dist/index.d.ts",style:"dist/index.css",exports:{".":{import:"./dist/index.js",types:"./dist/index.d.ts",default:"./dist/index.js"},"./index.css":"./dist/index.css"},files:["/dist","CHANGELOG.md","README.md"],scripts:{dev:"tsup --config ./tsup.dev.ts",build:"tsup --config ./tsup.build.ts",test:"jest"},peerDependencies:{react:"*","react-dom":"*"},dependencies:{clsx:"2.0.0","react-aria":"3.30.0"},devDependencies:{"@hopper-ui/tokens":"workspace:*","@swc/core":"1.3.96","@swc/helpers":"0.5.3","@swc/jest":"0.2.29","@testing-library/jest-dom":"6.1.4","@testing-library/react":"14.1.0","@types/jest":"29.5.8","@types/react-dom":"18.2.17","@types/react-test-renderer":"18.0.6","@types/react":"18.2.38","@workleap/eslint-plugin":"3.0.0","@workleap/swc-configs":"2.1.2","@workleap/tsup-configs":"3.0.1","@workleap/typescript-configs":"3.0.2","identity-obj-proxy":"3.0.0","jest-environment-jsdom":"29.7.0",jest:"29.7.0","postcss-modules":"6.0.0",postcss:"8.4.31","react-dom":"18.2.0","react-test-renderer":"18.2.0",react:"18.2.0","ts-jest":"29.1.1",tsup:"7.2.0","type-fest":"4.7.1",typescript:"5.2.2"}};var t="hop",r=`${t}-${e.version.replaceAll(".","-")}`;
2
-
3
- export { t as HopperRootCssClass, r as StyledSystemRootCssClass };
1
+ export { HopperRootCssClass, StyledSystemRootCssClass } from './chunk-ZQUJDDQL.js';
package/dist/tokens/TokenProvider.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ /** The TokenProvider injects tokens in the document's head.
2
+ * This is a component and not a hook, so it's easier to conditionally call it
3
+ * @example
4
+ * assuming different versions of the design system loaded at the same time, one with version 1, the other with version 2.0.0
5
+ * <head>
6
+ * <style id="hop-tokens-1.0.0">
7
+ * .hop-1-0-0 {
8
+ * --token: red
9
+ * }
10
+ * </style>
11
+ * <style id="hop-tokens-2.0.0">
12
+ * .hop-2-0-0 {
13
+ * --token: blue
14
+ * }
15
+ * </style>
16
+ * </head>
17
+ */
18
+ declare function TokenProvider(): null;
19
+
20
+ export { TokenProvider };
package/dist/tokens/TokenProvider.js ADDED
@@ -0,0 +1,8 @@
1
+ export { TokenProvider } from '../chunk-ZO3DYLQJ.js';
2
+ import '../chunk-IK6W4ZXH.js';
3
+ import '../chunk-2ITAI3PJ.js';
4
+ import '../chunk-Q3NLRNZN.js';
5
+ import '../chunk-JBWKRDVA.js';
6
+ import '../chunk-YPIK2HRL.js';
7
+ import '../chunk-ZQUJDDQL.js';
8
+ import '../chunk-U5R6ZXH3.js';
package/dist/tokens/generated/dark-semantic-tokens.d.ts ADDED
@@ -0,0 +1,272 @@
1
+ /**
2
+ * This file is generated by Style Dictionary. Do not edit directly.
3
+ */
4
+ declare const DarkSemanticTokens: {
5
+ "--hop-upsell-border-active": string;
6
+ "--hop-upsell-text-active": string;
7
+ "--hop-upsell-icon-weakest": string;
8
+ "--hop-upsell-icon-weak": string;
9
+ "--hop-upsell-border": string;
10
+ "--hop-upsell-surface-hover": string;
11
+ "--hop-upsell-border-disabled": string;
12
+ "--hop-upsell-icon-active": string;
13
+ "--hop-upsell-surface-weak": string;
14
+ "--hop-upsell-surface-disabled": string;
15
+ "--hop-upsell-text": string;
16
+ "--hop-upsell-icon": string;
17
+ "--hop-upsell-text-hover": string;
18
+ "--hop-upsell-text-disabled": string;
19
+ "--hop-upsell-surface-active": string;
20
+ "--hop-upsell-surface": string;
21
+ "--hop-danger-border-active": string;
22
+ "--hop-danger-icon-active": string;
23
+ "--hop-danger-text-active": string;
24
+ "--hop-danger-surface": string;
25
+ "--hop-danger-text-hover": string;
26
+ "--hop-danger-surface-disabled": string;
27
+ "--hop-danger-surface-hover": string;
28
+ "--hop-danger-surface-strong": string;
29
+ "--hop-danger-surface-strong-hover": string;
30
+ "--hop-danger-surface-weak": string;
31
+ "--hop-danger-border-strong": string;
32
+ "--hop-danger-icon": string;
33
+ "--hop-danger-icon-weak": string;
34
+ "--hop-danger-text": string;
35
+ "--hop-danger-surface-active": string;
36
+ "--hop-danger-text-weak": string;
37
+ "--hop-danger-text-strong": string;
38
+ "--hop-danger-text-strong-hover": string;
39
+ "--hop-danger-icon-strong": string;
40
+ "--hop-danger-icon-hover": string;
41
+ "--hop-danger-text-disabled": string;
42
+ "--hop-danger-icon-disabled": string;
43
+ "--hop-danger-border": string;
44
+ "--hop-primary-icon-active": string;
45
+ "--hop-primary-border-active": string;
46
+ "--hop-primary-text-active": string;
47
+ "--hop-primary-icon-strong": string;
48
+ "--hop-primary-icon-strong-hover": string;
49
+ "--hop-primary-icon": string;
50
+ "--hop-primary-border-focus": string;
51
+ "--hop-primary-border": string;
52
+ "--hop-primary-icon-hover": string;
53
+ "--hop-primary-icon-disabled": string;
54
+ "--hop-primary-surface-disabled": string;
55
+ "--hop-primary-surface-focus": string;
56
+ "--hop-primary-text-disabled": string;
57
+ "--hop-primary-surface": string;
58
+ "--hop-primary-surface-weak": string;
59
+ "--hop-primary-surface-strong": string;
60
+ "--hop-primary-surface-strong-hover": string;
61
+ "--hop-primary-surface-strong-active": string;
62
+ "--hop-primary-text": string;
63
+ "--hop-primary-surface-hover": string;
64
+ "--hop-primary-text-strong": string;
65
+ "--hop-primary-text-strong-hover": string;
66
+ "--hop-primary-text-hover": string;
67
+ "--hop-primary-surface-active": string;
68
+ "--hop-decorative-option9-border": string;
69
+ "--hop-decorative-option9-icon": string;
70
+ "--hop-decorative-option9-surface-weakest": string;
71
+ "--hop-decorative-option9-surface-weak": string;
72
+ "--hop-decorative-option9-surface-weak-hover": string;
73
+ "--hop-decorative-option9-surface-strong": string;
74
+ "--hop-decorative-option9-surface-hover": string;
75
+ "--hop-decorative-option9-surface": string;
76
+ "--hop-decorative-option9-text": string;
77
+ "--hop-decorative-option9-text-weak": string;
78
+ "--hop-decorative-option8-border": string;
79
+ "--hop-decorative-option8-icon": string;
80
+ "--hop-decorative-option8-surface-weakest": string;
81
+ "--hop-decorative-option8-surface-weak": string;
82
+ "--hop-decorative-option8-surface-weak-hover": string;
83
+ "--hop-decorative-option8-surface-strong": string;
84
+ "--hop-decorative-option8-surface-hover": string;
85
+ "--hop-decorative-option8-text-weak": string;
86
+ "--hop-decorative-option8-surface": string;
87
+ "--hop-decorative-option8-text": string;
88
+ "--hop-decorative-option7-border": string;
89
+ "--hop-decorative-option7-icon": string;
90
+ "--hop-decorative-option7-surface-weakest": string;
91
+ "--hop-decorative-option7-surface-weak": string;
92
+ "--hop-decorative-option7-surface-weak-hover": string;
93
+ "--hop-decorative-option7-surface-strong": string;
94
+ "--hop-decorative-option7-surface-hover": string;
95
+ "--hop-decorative-option7-surface": string;
96
+ "--hop-decorative-option7-text-weak": string;
97
+ "--hop-decorative-option7-text": string;
98
+ "--hop-decorative-option5-text-weak": string;
99
+ "--hop-decorative-option5-text": string;
100
+ "--hop-decorative-option5-surface-weakest": string;
101
+ "--hop-decorative-option5-surface-weak": string;
102
+ "--hop-decorative-option5-surface-weak-hover": string;
103
+ "--hop-decorative-option5-surface-strong": string;
104
+ "--hop-decorative-option5-surface-hover": string;
105
+ "--hop-decorative-option5-surface": string;
106
+ "--hop-decorative-option5-border": string;
107
+ "--hop-decorative-option5-icon": string;
108
+ "--hop-decorative-option6-surface-weakest": string;
109
+ "--hop-decorative-option6-surface-weak": string;
110
+ "--hop-decorative-option6-surface-weak-hover": string;
111
+ "--hop-decorative-option6-surface-strong": string;
112
+ "--hop-decorative-option6-surface-hover": string;
113
+ "--hop-decorative-option6-surface": string;
114
+ "--hop-decorative-option6-border": string;
115
+ "--hop-decorative-option6-icon": string;
116
+ "--hop-decorative-option6-text": string;
117
+ "--hop-decorative-option6-text-weak": string;
118
+ "--hop-decorative-option4-surface-weakest": string;
119
+ "--hop-decorative-option4-surface-weak": string;
120
+ "--hop-decorative-option4-surface-weak-hover": string;
121
+ "--hop-decorative-option4-surface-strong": string;
122
+ "--hop-decorative-option4-surface-hover": string;
123
+ "--hop-decorative-option4-surface": string;
124
+ "--hop-decorative-option4-border": string;
125
+ "--hop-decorative-option4-icon": string;
126
+ "--hop-decorative-option4-text-weak": string;
127
+ "--hop-decorative-option4-text": string;
128
+ "--hop-decorative-option3-surface-strong": string;
129
+ "--hop-decorative-option3-surface-weakest": string;
130
+ "--hop-decorative-option3-surface-weak": string;
131
+ "--hop-decorative-option3-surface-weak-hover": string;
132
+ "--hop-decorative-option3-surface-hover": string;
133
+ "--hop-decorative-option3-surface": string;
134
+ "--hop-decorative-option3-border": string;
135
+ "--hop-decorative-option3-icon": string;
136
+ "--hop-decorative-option3-text": string;
137
+ "--hop-decorative-option3-text-weak": string;
138
+ "--hop-decorative-option2-surface-weakest": string;
139
+ "--hop-decorative-option2-surface-weak": string;
140
+ "--hop-decorative-option2-surface-weak-hover": string;
141
+ "--hop-decorative-option2-surface-strong": string;
142
+ "--hop-decorative-option2-surface-hover": string;
143
+ "--hop-decorative-option2-surface": string;
144
+ "--hop-decorative-option2-text": string;
145
+ "--hop-decorative-option2-text-weak": string;
146
+ "--hop-decorative-option2-border": string;
147
+ "--hop-decorative-option2-icon": string;
148
+ "--hop-decorative-option1-surface-strong": string;
149
+ "--hop-decorative-option1-surface-weakest": string;
150
+ "--hop-decorative-option1-surface-weak": string;
151
+ "--hop-decorative-option1-surface-weak-hover": string;
152
+ "--hop-decorative-option1-surface-hover": string;
153
+ "--hop-decorative-option1-surface": string;
154
+ "--hop-decorative-option1-text-weak": string;
155
+ "--hop-decorative-option1-border": string;
156
+ "--hop-decorative-option1-icon": string;
157
+ "--hop-decorative-option1-text": string;
158
+ "--hop-neutral-text-hover": string;
159
+ "--hop-neutral-surface-weakest-hover": string;
160
+ "--hop-neutral-text-weak": string;
161
+ "--hop-neutral-surface-disabled": string;
162
+ "--hop-neutral-surface-active": string;
163
+ "--hop-neutral-surface-weak": string;
164
+ "--hop-neutral-surface": string;
165
+ "--hop-neutral-text-disabled": string;
166
+ "--hop-neutral-text-active": string;
167
+ "--hop-neutral-text-strong": string;
168
+ "--hop-neutral-text": string;
169
+ "--hop-neutral-text-weakest": string;
170
+ "--hop-neutral-border-disabled": string;
171
+ "--hop-neutral-border-strong-hover": string;
172
+ "--hop-neutral-border-strong": string;
173
+ "--hop-neutral-surface-strong": string;
174
+ "--hop-neutral-surface-hover": string;
175
+ "--hop-neutral-icon-disabled": string;
176
+ "--hop-neutral-icon": string;
177
+ "--hop-neutral-icon-weak": string;
178
+ "--hop-neutral-border": string;
179
+ "--hop-neutral-border-weak": string;
180
+ "--hop-neutral-icon-weakest": string;
181
+ "--hop-neutral-icon-strong": string;
182
+ "--hop-neutral-icon-hover": string;
183
+ "--hop-neutral-icon-active": string;
184
+ "--hop-neutral-border-hover": string;
185
+ "--hop-neutral-border-active": string;
186
+ "--hop-neutral-surface-weak-hover": string;
187
+ "--hop-neutral-border-weakest": string;
188
+ "--hop-neutral-surface-weakest": string;
189
+ "--hop-warning-icon-weakest": string;
190
+ "--hop-warning-icon-weak": string;
191
+ "--hop-warning-text-weak": string;
192
+ "--hop-warning-surface": string;
193
+ "--hop-warning-surface-strong": string;
194
+ "--hop-warning-surface-weak": string;
195
+ "--hop-warning-border": string;
196
+ "--hop-warning-icon": string;
197
+ "--hop-warning-text": string;
198
+ "--hop-success-border": string;
199
+ "--hop-success-icon-weak": string;
200
+ "--hop-success-icon-weakest": string;
201
+ "--hop-success-text-weak": string;
202
+ "--hop-success-surface": string;
203
+ "--hop-success-surface-strong": string;
204
+ "--hop-success-text-hover": string;
205
+ "--hop-success-text": string;
206
+ "--hop-success-icon": string;
207
+ "--hop-success-surface-weak": string;
208
+ "--hop-information-icon-weakest": string;
209
+ "--hop-information-surface-strong": string;
210
+ "--hop-information-icon-weak": string;
211
+ "--hop-information-text": string;
212
+ "--hop-information-surface": string;
213
+ "--hop-information-surface-weak": string;
214
+ "--hop-information-text-weak": string;
215
+ "--hop-information-icon": string;
216
+ "--hop-information-border": string;
217
+ "--hop-status-neutral-surface-strong": string;
218
+ "--hop-status-neutral-text": string;
219
+ "--hop-status-neutral-icon": string;
220
+ "--hop-status-neutral-surface": string;
221
+ "--hop-status-progress-surface-strong": string;
222
+ "--hop-status-progress-icon": string;
223
+ "--hop-status-progress-surface": string;
224
+ "--hop-status-progress-text": string;
225
+ "--hop-status-option6-surface-strong": string;
226
+ "--hop-status-option6-icon": string;
227
+ "--hop-status-option6-surface": string;
228
+ "--hop-status-option6-text": string;
229
+ "--hop-status-option5-surface-strong": string;
230
+ "--hop-status-option5-icon": string;
231
+ "--hop-status-option5-surface": string;
232
+ "--hop-status-option5-text": string;
233
+ "--hop-status-option1-surface-strong": string;
234
+ "--hop-status-option1-icon": string;
235
+ "--hop-status-option1-surface": string;
236
+ "--hop-status-option1-text": string;
237
+ "--hop-status-option2-surface-strong": string;
238
+ "--hop-status-option2-text": string;
239
+ "--hop-status-option2-surface": string;
240
+ "--hop-status-option2-icon": string;
241
+ "--hop-status-option3-surface-strong": string;
242
+ "--hop-status-option3-icon": string;
243
+ "--hop-status-option3-surface": string;
244
+ "--hop-status-option3-text": string;
245
+ "--hop-status-option4-surface-strong": string;
246
+ "--hop-status-option4-icon": string;
247
+ "--hop-status-option4-surface": string;
248
+ "--hop-status-option4-text": string;
249
+ "--hop-status-inactive-surface-strong": string;
250
+ "--hop-status-inactive-icon": string;
251
+ "--hop-status-inactive-surface": string;
252
+ "--hop-status-inactive-text": string;
253
+ "--hop-status-caution-surface-strong": string;
254
+ "--hop-status-caution-icon": string;
255
+ "--hop-status-caution-surface": string;
256
+ "--hop-status-caution-text": string;
257
+ "--hop-status-negative-surface-strong": string;
258
+ "--hop-status-negative-icon": string;
259
+ "--hop-status-negative-surface": string;
260
+ "--hop-status-negative-text": string;
261
+ "--hop-status-positive-icon": string;
262
+ "--hop-status-positive-surface-strong": string;
263
+ "--hop-status-positive-surface": string;
264
+ "--hop-status-positive-text": string;
265
+ "--hop-dataviz-unavailable": string;
266
+ "--hop-dataviz-unavailable-weak": string;
267
+ "--hop-dataviz-unavailable-strong": string;
268
+ "--hop-dataviz-text-onlight": string;
269
+ "--hop-dataviz-text-ondark": string;
270
+ };
271
+
272
+ export { DarkSemanticTokens };
package/dist/tokens/generated/dark-semantic-tokens.js ADDED
@@ -0,0 +1 @@
1
+ export { DarkSemanticTokens } from '../../chunk-2ITAI3PJ.js';