@likec4/styles 1.27.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 (137) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +46 -0
  3. package/build.config.ts +27 -0
  4. package/dev.ts +36 -0
  5. package/dist/css/conditions.mjs +36 -0
  6. package/dist/css/css.d.ts +22 -0
  7. package/dist/css/css.mjs +45 -0
  8. package/dist/css/cva.d.ts +6 -0
  9. package/dist/css/cva.mjs +87 -0
  10. package/dist/css/cx.d.ts +5 -0
  11. package/dist/css/cx.mjs +15 -0
  12. package/dist/css/index.d.ts +5 -0
  13. package/dist/css/index.mjs +4 -0
  14. package/dist/css/sva.d.ts +4 -0
  15. package/dist/css/sva.mjs +41 -0
  16. package/dist/helpers.mjs +336 -0
  17. package/dist/jsx/aspect-ratio.d.ts +10 -0
  18. package/dist/jsx/aspect-ratio.mjs +14 -0
  19. package/dist/jsx/bleed.d.ts +10 -0
  20. package/dist/jsx/bleed.mjs +14 -0
  21. package/dist/jsx/box.d.ts +10 -0
  22. package/dist/jsx/box.mjs +14 -0
  23. package/dist/jsx/center.d.ts +10 -0
  24. package/dist/jsx/center.mjs +14 -0
  25. package/dist/jsx/circle.d.ts +10 -0
  26. package/dist/jsx/circle.mjs +14 -0
  27. package/dist/jsx/container.d.ts +10 -0
  28. package/dist/jsx/container.mjs +14 -0
  29. package/dist/jsx/cq.d.ts +10 -0
  30. package/dist/jsx/cq.mjs +14 -0
  31. package/dist/jsx/divider.d.ts +10 -0
  32. package/dist/jsx/divider.mjs +14 -0
  33. package/dist/jsx/factory-helper.mjs +22 -0
  34. package/dist/jsx/factory.d.ts +3 -0
  35. package/dist/jsx/factory.mjs +80 -0
  36. package/dist/jsx/flex.d.ts +10 -0
  37. package/dist/jsx/flex.mjs +14 -0
  38. package/dist/jsx/float.d.ts +10 -0
  39. package/dist/jsx/float.mjs +14 -0
  40. package/dist/jsx/grid-item.d.ts +10 -0
  41. package/dist/jsx/grid-item.mjs +14 -0
  42. package/dist/jsx/grid.d.ts +10 -0
  43. package/dist/jsx/grid.mjs +14 -0
  44. package/dist/jsx/hstack.d.ts +10 -0
  45. package/dist/jsx/hstack.mjs +14 -0
  46. package/dist/jsx/index.d.ts +24 -0
  47. package/dist/jsx/index.mjs +22 -0
  48. package/dist/jsx/is-valid-prop.d.ts +11 -0
  49. package/dist/jsx/is-valid-prop.mjs +17 -0
  50. package/dist/jsx/link-overlay.d.ts +10 -0
  51. package/dist/jsx/link-overlay.mjs +14 -0
  52. package/dist/jsx/spacer.d.ts +10 -0
  53. package/dist/jsx/spacer.mjs +14 -0
  54. package/dist/jsx/square.d.ts +10 -0
  55. package/dist/jsx/square.mjs +14 -0
  56. package/dist/jsx/stack.d.ts +10 -0
  57. package/dist/jsx/stack.mjs +14 -0
  58. package/dist/jsx/visually-hidden.d.ts +10 -0
  59. package/dist/jsx/visually-hidden.mjs +14 -0
  60. package/dist/jsx/vstack.d.ts +10 -0
  61. package/dist/jsx/vstack.mjs +14 -0
  62. package/dist/jsx/wrap.d.ts +10 -0
  63. package/dist/jsx/wrap.mjs +14 -0
  64. package/dist/patterns/aspect-ratio.d.ts +21 -0
  65. package/dist/patterns/aspect-ratio.mjs +38 -0
  66. package/dist/patterns/bleed.d.ts +22 -0
  67. package/dist/patterns/bleed.mjs +24 -0
  68. package/dist/patterns/box.d.ts +21 -0
  69. package/dist/patterns/box.mjs +15 -0
  70. package/dist/patterns/center.d.ts +21 -0
  71. package/dist/patterns/center.mjs +21 -0
  72. package/dist/patterns/circle.d.ts +21 -0
  73. package/dist/patterns/circle.mjs +25 -0
  74. package/dist/patterns/container.d.ts +21 -0
  75. package/dist/patterns/container.mjs +21 -0
  76. package/dist/patterns/cq.d.ts +22 -0
  77. package/dist/patterns/cq.mjs +21 -0
  78. package/dist/patterns/divider.d.ts +23 -0
  79. package/dist/patterns/divider.mjs +25 -0
  80. package/dist/patterns/flex.d.ts +27 -0
  81. package/dist/patterns/flex.mjs +26 -0
  82. package/dist/patterns/float.d.ts +24 -0
  83. package/dist/patterns/float.mjs +52 -0
  84. package/dist/patterns/grid-item.d.ts +26 -0
  85. package/dist/patterns/grid-item.mjs +25 -0
  86. package/dist/patterns/grid.d.ts +25 -0
  87. package/dist/patterns/grid.mjs +27 -0
  88. package/dist/patterns/hstack.d.ts +22 -0
  89. package/dist/patterns/hstack.mjs +24 -0
  90. package/dist/patterns/index.d.ts +21 -0
  91. package/dist/patterns/index.mjs +20 -0
  92. package/dist/patterns/link-overlay.d.ts +21 -0
  93. package/dist/patterns/link-overlay.mjs +24 -0
  94. package/dist/patterns/spacer.d.ts +21 -0
  95. package/dist/patterns/spacer.mjs +21 -0
  96. package/dist/patterns/square.d.ts +21 -0
  97. package/dist/patterns/square.mjs +24 -0
  98. package/dist/patterns/stack.d.ts +24 -0
  99. package/dist/patterns/stack.mjs +24 -0
  100. package/dist/patterns/visually-hidden.d.ts +21 -0
  101. package/dist/patterns/visually-hidden.mjs +18 -0
  102. package/dist/patterns/vstack.d.ts +22 -0
  103. package/dist/patterns/vstack.mjs +24 -0
  104. package/dist/patterns/wrap.d.ts +25 -0
  105. package/dist/patterns/wrap.mjs +25 -0
  106. package/dist/recipes/action-btn.d.ts +43 -0
  107. package/dist/recipes/action-btn.mjs +41 -0
  108. package/dist/recipes/create-recipe.mjs +82 -0
  109. package/dist/recipes/index.d.ts +2 -0
  110. package/dist/recipes/index.mjs +1 -0
  111. package/dist/styles.css +1601 -0
  112. package/dist/tokens/index.d.ts +9 -0
  113. package/dist/tokens/index.mjs +5044 -0
  114. package/dist/tokens/tokens.d.ts +45 -0
  115. package/dist/types/composition.d.ts +164 -0
  116. package/dist/types/conditions.d.ts +328 -0
  117. package/dist/types/csstype.d.ts +21298 -0
  118. package/dist/types/global.d.ts +20 -0
  119. package/dist/types/index.d.ts +8 -0
  120. package/dist/types/jsx.d.ts +52 -0
  121. package/dist/types/parts.d.ts +8 -0
  122. package/dist/types/pattern.d.ts +78 -0
  123. package/dist/types/prop-type.d.ts +232 -0
  124. package/dist/types/recipe.d.ts +181 -0
  125. package/dist/types/selectors.d.ts +59 -0
  126. package/dist/types/static-css.d.ts +56 -0
  127. package/dist/types/style-props.d.ts +7499 -0
  128. package/dist/types/system-types.d.ts +193 -0
  129. package/package.json +85 -0
  130. package/panda.config.ts +6 -0
  131. package/postcss.d.mts +6 -0
  132. package/postcss.mjs +2 -0
  133. package/preset.d.mts +2746 -0
  134. package/preset.mjs +2746 -0
  135. package/preset.ts +3 -0
  136. package/vite.d.mts +5 -0
  137. package/vite.mjs +5 -0
@@ -0,0 +1,328 @@
1
+ /* eslint-disable */
2
+ import type { AnySelector, Selectors } from './selectors';
3
+
4
+ export interface Conditions {
5
+ /** `&:is(:hover, [data-hover])` */
6
+ "_hover": string
7
+ /** `&:is(:focus, [data-focus])` */
8
+ "_focus": string
9
+ /** `&:focus-within` */
10
+ "_focusWithin": string
11
+ /** `&:is(:focus-visible, [data-focus-visible])` */
12
+ "_focusVisible": string
13
+ /** `&:is(:disabled, [disabled], [data-disabled])` */
14
+ "_disabled": string
15
+ /** `&:is(:active, [data-active])` */
16
+ "_active": string
17
+ /** `&:visited` */
18
+ "_visited": string
19
+ /** `&:target` */
20
+ "_target": string
21
+ /** `&:is(:read-only, [data-read-only])` */
22
+ "_readOnly": string
23
+ /** `&:read-write` */
24
+ "_readWrite": string
25
+ /** `&:is(:empty, [data-empty])` */
26
+ "_empty": string
27
+ /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */
28
+ "_checked": string
29
+ /** `&:enabled` */
30
+ "_enabled": string
31
+ /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
32
+ "_expanded": string
33
+ /** `&[data-highlighted]` */
34
+ "_highlighted": string
35
+ /** `&[data-complete]` */
36
+ "_complete": string
37
+ /** `&[data-incomplete]` */
38
+ "_incomplete": string
39
+ /** `&[data-dragging]` */
40
+ "_dragging": string
41
+ /** `&::before` */
42
+ "_before": string
43
+ /** `&::after` */
44
+ "_after": string
45
+ /** `&::first-letter` */
46
+ "_firstLetter": string
47
+ /** `&::first-line` */
48
+ "_firstLine": string
49
+ /** `&::marker` */
50
+ "_marker": string
51
+ /** `&::selection` */
52
+ "_selection": string
53
+ /** `&::file-selector-button` */
54
+ "_file": string
55
+ /** `&::backdrop` */
56
+ "_backdrop": string
57
+ /** `&:first-child` */
58
+ "_first": string
59
+ /** `&:last-child` */
60
+ "_last": string
61
+ /** `&:only-child` */
62
+ "_only": string
63
+ /** `&:nth-child(even)` */
64
+ "_even": string
65
+ /** `&:nth-child(odd)` */
66
+ "_odd": string
67
+ /** `&:first-of-type` */
68
+ "_firstOfType": string
69
+ /** `&:last-of-type` */
70
+ "_lastOfType": string
71
+ /** `&:only-of-type` */
72
+ "_onlyOfType": string
73
+ /** `.peer:is(:focus, [data-focus]) ~ &` */
74
+ "_peerFocus": string
75
+ /** `.peer:is(:hover, [data-hover]) ~ &` */
76
+ "_peerHover": string
77
+ /** `.peer:is(:active, [data-active]) ~ &` */
78
+ "_peerActive": string
79
+ /** `.peer:focus-within ~ &` */
80
+ "_peerFocusWithin": string
81
+ /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
82
+ "_peerFocusVisible": string
83
+ /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
84
+ "_peerDisabled": string
85
+ /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
86
+ "_peerChecked": string
87
+ /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
88
+ "_peerInvalid": string
89
+ /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
90
+ "_peerExpanded": string
91
+ /** `.peer:placeholder-shown ~ &` */
92
+ "_peerPlaceholderShown": string
93
+ /** `.group:is(:focus, [data-focus]) &` */
94
+ "_groupFocus": string
95
+ /** `.group:is(:hover, [data-hover]) &` */
96
+ "_groupHover": string
97
+ /** `.group:is(:active, [data-active]) &` */
98
+ "_groupActive": string
99
+ /** `.group:focus-within &` */
100
+ "_groupFocusWithin": string
101
+ /** `.group:is(:focus-visible, [data-focus-visible]) &` */
102
+ "_groupFocusVisible": string
103
+ /** `.group:is(:disabled, [disabled], [data-disabled]) &` */
104
+ "_groupDisabled": string
105
+ /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
106
+ "_groupChecked": string
107
+ /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
108
+ "_groupExpanded": string
109
+ /** `.group:is(:invalid, [data-invalid]) &` */
110
+ "_groupInvalid": string
111
+ /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */
112
+ "_indeterminate": string
113
+ /** `&:is(:required, [data-required], [aria-required=true])` */
114
+ "_required": string
115
+ /** `&:is(:valid, [data-valid])` */
116
+ "_valid": string
117
+ /** `&:is(:invalid, [data-invalid])` */
118
+ "_invalid": string
119
+ /** `&:autofill` */
120
+ "_autofill": string
121
+ /** `&:is(:in-range, [data-in-range])` */
122
+ "_inRange": string
123
+ /** `&:is(:out-of-range, [data-outside-range])` */
124
+ "_outOfRange": string
125
+ /** `&::placeholder, &[data-placeholder]` */
126
+ "_placeholder": string
127
+ /** `&:is(:placeholder-shown, [data-placeholder-shown])` */
128
+ "_placeholderShown": string
129
+ /** `&:is([aria-pressed=true], [data-pressed])` */
130
+ "_pressed": string
131
+ /** `&:is([aria-selected=true], [data-selected])` */
132
+ "_selected": string
133
+ /** `&:is([aria-grabbed=true], [data-grabbed])` */
134
+ "_grabbed": string
135
+ /** `&[data-state=under-value]` */
136
+ "_underValue": string
137
+ /** `&[data-state=over-value]` */
138
+ "_overValue": string
139
+ /** `&[data-state=at-value]` */
140
+ "_atValue": string
141
+ /** `&:default` */
142
+ "_default": string
143
+ /** `&:optional` */
144
+ "_optional": string
145
+ /** `&:is([open], [data-open], [data-state="open"])` */
146
+ "_open": string
147
+ /** `&:is([closed], [data-closed], [data-state="closed"])` */
148
+ "_closed": string
149
+ /** `&:is(:fullscreen, [data-fullscreen])` */
150
+ "_fullscreen": string
151
+ /** `&:is([data-loading], [aria-busy=true])` */
152
+ "_loading": string
153
+ /** `&:is([hidden], [data-hidden])` */
154
+ "_hidden": string
155
+ /** `&:is([aria-current=true], [data-current])` */
156
+ "_current": string
157
+ /** `&[aria-current=page]` */
158
+ "_currentPage": string
159
+ /** `&[aria-current=step]` */
160
+ "_currentStep": string
161
+ /** `&[data-today]` */
162
+ "_today": string
163
+ /** `&[data-unavailable]` */
164
+ "_unavailable": string
165
+ /** `&[data-range-start]` */
166
+ "_rangeStart": string
167
+ /** `&[data-range-end]` */
168
+ "_rangeEnd": string
169
+ /** `&[data-now]` */
170
+ "_now": string
171
+ /** `&[data-topmost]` */
172
+ "_topmost": string
173
+ /** `@media (prefers-reduced-motion: reduce)` */
174
+ "_motionReduce": string
175
+ /** `@media (prefers-reduced-motion: no-preference)` */
176
+ "_motionSafe": string
177
+ /** `@media print` */
178
+ "_print": string
179
+ /** `@media (orientation: landscape)` */
180
+ "_landscape": string
181
+ /** `@media (orientation: portrait)` */
182
+ "_portrait": string
183
+ /** `[data-mantine-color-scheme="dark"] &` */
184
+ "_dark": string
185
+ /** `[data-mantine-color-scheme="light"] &` */
186
+ "_light": string
187
+ /** `@media (prefers-color-scheme: dark)` */
188
+ "_osDark": string
189
+ /** `@media (prefers-color-scheme: light)` */
190
+ "_osLight": string
191
+ /** `@media (forced-colors: active)` */
192
+ "_highContrast": string
193
+ /** `@media (prefers-contrast: less)` */
194
+ "_lessContrast": string
195
+ /** `@media (prefers-contrast: more)` */
196
+ "_moreContrast": string
197
+ /** `[dir=ltr] &` */
198
+ "_ltr": string
199
+ /** `[dir=rtl] &` */
200
+ "_rtl": string
201
+ /** `&::-webkit-scrollbar` */
202
+ "_scrollbar": string
203
+ /** `&::-webkit-scrollbar-thumb` */
204
+ "_scrollbarThumb": string
205
+ /** `&::-webkit-scrollbar-track` */
206
+ "_scrollbarTrack": string
207
+ /** `&[data-orientation=horizontal]` */
208
+ "_horizontal": string
209
+ /** `&[data-orientation=vertical]` */
210
+ "_vertical": string
211
+ /** `& :where(svg)` */
212
+ "_icon": string
213
+ /** `@starting-style` */
214
+ "_starting": string
215
+ /** `.likec4-root:is([data-likec4-reduced-graphics]) &` */
216
+ "_reduceGraphics": string
217
+ /** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) &` */
218
+ "_reduceGraphicsOnPan": string
219
+ /** `.likec4-root:not([data-likec4-reduced-graphics]) &` */
220
+ "_noReduceGraphics": string
221
+ /** `:is(.likec4-root[data-likec4-diagram-panning]) &` */
222
+ "_whenPanning": string
223
+ /** `:where([data-likec4-zoom-small]) &` */
224
+ "_smallZoom": string
225
+ /** `:where([data-compound-transparent]) &` */
226
+ "_compoundTransparent": string
227
+ /** `:where([data-likec4-edge-active="true"]) &` */
228
+ "_edgeActive": string
229
+ /** `:where([data-likec4-hovered="true"]) &` */
230
+ "_whenHovered": string
231
+ /** `:where(.react-flow__node.selected, .react-flow__edge.selected) &` */
232
+ "_whenSelected": string
233
+ /** `:where([data-likec4-dimmed]) &` */
234
+ "_whenDimmed": string
235
+ /** `:where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &` */
236
+ "_whenFocused": string
237
+ /** `:where([data-likec4-shape-size='xs']) &` */
238
+ "_shapeSizeXs": string
239
+ /** `:where([data-likec4-shape-size='sm']) &` */
240
+ "_shapeSizeSm": string
241
+ /** `:where([data-likec4-shape-size='md']) &` */
242
+ "_shapeSizeMd": string
243
+ /** `:where([data-likec4-shape-size='lg']) &` */
244
+ "_shapeSizeLg": string
245
+ /** `:where([data-likec4-shape-size='xl']) &` */
246
+ "_shapeSizeXl": string
247
+ /** `:where([data-likec4-shape='rectangle']) &` */
248
+ "_shapeRectangle": string
249
+ /** `:where([data-likec4-shape='person']) &` */
250
+ "_shapePerson": string
251
+ /** `:where([data-likec4-shape='browser']) &` */
252
+ "_shapeBrowser": string
253
+ /** `:where([data-likec4-shape='mobile']) &` */
254
+ "_shapeMobile": string
255
+ /** `:where([data-likec4-shape='cylinder']) &` */
256
+ "_shapeCylinder": string
257
+ /** `:where([data-likec4-shape='storage']) &` */
258
+ "_shapeStorage": string
259
+ /** `:where([data-likec4-shape='queue']) &` */
260
+ "_shapeQueue": string
261
+ /** `@media screen and (min-width: 36rem)` */
262
+ "xs": string
263
+ /** `@media screen and (min-width: 36rem) and (max-width: 47.9975rem)` */
264
+ "xsOnly": string
265
+ /** `@media screen and (max-width: 35.9975rem)` */
266
+ "xsDown": string
267
+ /** `@media screen and (min-width: 48rem)` */
268
+ "sm": string
269
+ /** `@media screen and (min-width: 48rem) and (max-width: 61.9975rem)` */
270
+ "smOnly": string
271
+ /** `@media screen and (max-width: 47.9975rem)` */
272
+ "smDown": string
273
+ /** `@media screen and (min-width: 62rem)` */
274
+ "md": string
275
+ /** `@media screen and (min-width: 62rem) and (max-width: 74.9975rem)` */
276
+ "mdOnly": string
277
+ /** `@media screen and (max-width: 61.9975rem)` */
278
+ "mdDown": string
279
+ /** `@media screen and (min-width: 75rem)` */
280
+ "lg": string
281
+ /** `@media screen and (min-width: 75rem) and (max-width: 87.9975rem)` */
282
+ "lgOnly": string
283
+ /** `@media screen and (max-width: 74.9975rem)` */
284
+ "lgDown": string
285
+ /** `@media screen and (min-width: 88rem)` */
286
+ "xl": string
287
+ /** `@media screen and (min-width: 88rem)` */
288
+ "xlOnly": string
289
+ /** `@media screen and (max-width: 87.9975rem)` */
290
+ "xlDown": string
291
+ /** `@media screen and (min-width: 36rem) and (max-width: 47.9975rem)` */
292
+ "xsToSm": string
293
+ /** `@media screen and (min-width: 36rem) and (max-width: 61.9975rem)` */
294
+ "xsToMd": string
295
+ /** `@media screen and (min-width: 36rem) and (max-width: 74.9975rem)` */
296
+ "xsToLg": string
297
+ /** `@media screen and (min-width: 36rem) and (max-width: 87.9975rem)` */
298
+ "xsToXl": string
299
+ /** `@media screen and (min-width: 48rem) and (max-width: 61.9975rem)` */
300
+ "smToMd": string
301
+ /** `@media screen and (min-width: 48rem) and (max-width: 74.9975rem)` */
302
+ "smToLg": string
303
+ /** `@media screen and (min-width: 48rem) and (max-width: 87.9975rem)` */
304
+ "smToXl": string
305
+ /** `@media screen and (min-width: 62rem) and (max-width: 74.9975rem)` */
306
+ "mdToLg": string
307
+ /** `@media screen and (min-width: 62rem) and (max-width: 87.9975rem)` */
308
+ "mdToXl": string
309
+ /** `@media screen and (min-width: 75rem) and (max-width: 87.9975rem)` */
310
+ "lgToXl": string
311
+ /** The base (=no conditions) styles to apply */
312
+ "base": string
313
+ }
314
+
315
+ export type ConditionalValue<V> =
316
+ | V
317
+ | Array<V | null>
318
+ | {
319
+ [K in keyof Conditions]?: ConditionalValue<V>
320
+ }
321
+
322
+ export type Nested<P> = P & {
323
+ [K in Selectors]?: Nested<P>
324
+ } & {
325
+ [K in AnySelector]?: Nested<P>
326
+ } & {
327
+ [K in keyof Conditions]?: Nested<P>
328
+ }