@atlaskit/primitives 1.0.1 → 1.0.3

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 (62) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/constellation/box/code.mdx +8 -0
  3. package/constellation/box/examples.mdx +8 -1
  4. package/constellation/flex/code.mdx +14 -2
  5. package/constellation/flex/examples.mdx +9 -0
  6. package/constellation/grid/code.mdx +19 -0
  7. package/constellation/grid/examples.mdx +46 -0
  8. package/constellation/inline/code.mdx +8 -0
  9. package/constellation/inline/examples.mdx +9 -1
  10. package/constellation/overview/index.mdx +8 -0
  11. package/constellation/responsive/01-show/examples.mdx +31 -0
  12. package/constellation/responsive/02-hide/examples.mdx +30 -0
  13. package/constellation/responsive/03-breakpoints/examples.mdx +51 -0
  14. package/constellation/responsive/examples.mdx +12 -23
  15. package/constellation/stack/code.mdx +8 -0
  16. package/constellation/stack/examples.mdx +9 -1
  17. package/constellation/xcss/examples.mdx +8 -0
  18. package/dist/cjs/components/flex.js +7 -3
  19. package/dist/cjs/components/grid.js +127 -0
  20. package/dist/cjs/components/inline.js +16 -48
  21. package/dist/cjs/components/stack.js +19 -39
  22. package/dist/cjs/index.js +13 -0
  23. package/dist/cjs/version.json +1 -1
  24. package/dist/cjs/xcss/style-maps.partial.js +8 -2
  25. package/dist/cjs/xcss/xcss.js +1 -1
  26. package/dist/es2019/components/flex.js +6 -3
  27. package/dist/es2019/components/grid.js +118 -0
  28. package/dist/es2019/components/inline.js +15 -49
  29. package/dist/es2019/components/stack.js +18 -40
  30. package/dist/es2019/index.js +2 -1
  31. package/dist/es2019/responsive/build-media-query-css.js +0 -1
  32. package/dist/es2019/version.json +1 -1
  33. package/dist/es2019/xcss/style-maps.partial.js +8 -2
  34. package/dist/es2019/xcss/xcss.js +1 -1
  35. package/dist/esm/components/flex.js +7 -3
  36. package/dist/esm/components/grid.js +119 -0
  37. package/dist/esm/components/inline.js +16 -49
  38. package/dist/esm/components/stack.js +19 -40
  39. package/dist/esm/index.js +2 -1
  40. package/dist/esm/version.json +1 -1
  41. package/dist/esm/xcss/style-maps.partial.js +8 -2
  42. package/dist/esm/xcss/xcss.js +1 -1
  43. package/dist/types/components/flex.d.ts +17 -8
  44. package/dist/types/components/grid.d.ts +154 -0
  45. package/dist/types/components/inline.d.ts +50 -12
  46. package/dist/types/components/stack.d.ts +38 -8
  47. package/dist/types/index.d.ts +2 -1
  48. package/dist/types/xcss/style-maps.partial.d.ts +8 -2
  49. package/dist/types/xcss/xcss.d.ts +11 -14
  50. package/dist/types-ts4.5/components/flex.d.ts +17 -8
  51. package/dist/types-ts4.5/components/grid.d.ts +154 -0
  52. package/dist/types-ts4.5/components/inline.d.ts +50 -12
  53. package/dist/types-ts4.5/components/stack.d.ts +38 -8
  54. package/dist/types-ts4.5/index.d.ts +2 -1
  55. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +8 -2
  56. package/dist/types-ts4.5/xcss/xcss.d.ts +11 -14
  57. package/extract-react-types/flex-props.tsx +80 -0
  58. package/extract-react-types/grid-props.tsx +102 -0
  59. package/package.json +47 -40
  60. package/report.api.md +276 -59
  61. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +24 -0
  62. package/tmp/api-report-tmp.d.ts +0 -670
@@ -1,670 +0,0 @@
1
- ## API Report File for "@atlaskit/primitives"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- /// <reference types="react" />
8
-
9
- import { ComponentPropsWithoutRef } from 'react';
10
- import type * as CSS_2 from 'csstype';
11
- import type { CSSProperties } from 'react';
12
- import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
13
- import { ElementType } from 'react';
14
- import { FC } from 'react';
15
- import { ForwardRefExoticComponent } from 'react';
16
- import { JSXElementConstructor } from 'react';
17
- import { MemoExoticComponent } from 'react';
18
- import { ReactElement } from 'react';
19
- import { ReactNode } from 'react';
20
- import { RefAttributes } from 'react';
21
- import type { SerializedStyles } from '@emotion/serialize';
22
- import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
23
-
24
- // @public (undocumented)
25
- type AlignBlock = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
26
-
27
- // @public (undocumented)
28
- type AlignBlock_2 = 'center' | 'end' | 'start';
29
-
30
- // @public (undocumented)
31
- type AlignInline = 'center' | 'end' | 'start';
32
-
33
- // @public (undocumented)
34
- type AlignInline_2 = 'center' | 'end' | 'start';
35
-
36
- // @public (undocumented)
37
- type AlignItems = keyof typeof alignItemsMap;
38
-
39
- // @public (undocumented)
40
- const alignItemsMap: {
41
- readonly start: SerializedStyles_2;
42
- readonly center: SerializedStyles_2;
43
- readonly baseline: SerializedStyles_2;
44
- readonly end: SerializedStyles_2;
45
- };
46
-
47
- // @public (undocumented)
48
- type AllowedBoxStyles = keyof SafeCSSObject;
49
-
50
- // @public (undocumented)
51
- type As = 'article' | 'aside' | 'button' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
52
-
53
- // @public (undocumented)
54
- type AutoComplete<T extends string> = Omit<string, T> | T;
55
-
56
- // @public (undocumented)
57
- export type BackgroundColor = keyof typeof backgroundColorMap;
58
-
59
- // @public (undocumented)
60
- const backgroundColorMap: {
61
- readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
62
- readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
63
- readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
64
- readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
65
- readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
66
- readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
67
- readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
68
- readonly 'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder)";
69
- readonly 'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
70
- readonly 'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
71
- readonly 'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
72
- readonly 'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
73
- readonly 'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
74
- readonly 'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
75
- readonly 'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
76
- readonly 'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
77
- readonly 'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
78
- readonly 'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler)";
79
- readonly 'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle)";
80
- readonly 'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder)";
81
- readonly 'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
82
- readonly 'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
83
- readonly 'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
84
- readonly 'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
85
- readonly 'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
86
- readonly 'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
87
- readonly 'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
88
- readonly 'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
89
- readonly 'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
90
- readonly 'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
91
- readonly 'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
92
- readonly 'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
93
- readonly 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
94
- readonly 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
95
- readonly 'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
96
- readonly 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
97
- readonly 'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
98
- readonly 'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
99
- readonly 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
100
- readonly 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
101
- readonly 'color.background.disabled': "var(--ds-background-disabled)";
102
- readonly 'color.background.input': "var(--ds-background-input)";
103
- readonly 'color.background.input.hovered': "var(--ds-background-input-hovered)";
104
- readonly 'color.background.input.pressed': "var(--ds-background-input-pressed)";
105
- readonly 'color.background.inverse.subtle': "var(--ds-background-inverse-subtle)";
106
- readonly 'color.background.inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
107
- readonly 'color.background.inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
108
- readonly 'color.background.neutral': "var(--ds-background-neutral)";
109
- readonly 'color.background.neutral.hovered': "var(--ds-background-neutral-hovered)";
110
- readonly 'color.background.neutral.pressed': "var(--ds-background-neutral-pressed)";
111
- readonly 'color.background.neutral.subtle': "var(--ds-background-neutral-subtle)";
112
- readonly 'color.background.neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
113
- readonly 'color.background.neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
114
- readonly 'color.background.neutral.bold': "var(--ds-background-neutral-bold)";
115
- readonly 'color.background.neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
116
- readonly 'color.background.neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
117
- readonly 'color.background.selected': "var(--ds-background-selected)";
118
- readonly 'color.background.selected.hovered': "var(--ds-background-selected-hovered)";
119
- readonly 'color.background.selected.pressed': "var(--ds-background-selected-pressed)";
120
- readonly 'color.background.selected.bold': "var(--ds-background-selected-bold)";
121
- readonly 'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
122
- readonly 'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
123
- readonly 'color.background.brand.bold': "var(--ds-background-brand-bold)";
124
- readonly 'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
125
- readonly 'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
126
- readonly 'color.background.danger': "var(--ds-background-danger)";
127
- readonly 'color.background.danger.hovered': "var(--ds-background-danger-hovered)";
128
- readonly 'color.background.danger.pressed': "var(--ds-background-danger-pressed)";
129
- readonly 'color.background.danger.bold': "var(--ds-background-danger-bold)";
130
- readonly 'color.background.danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
131
- readonly 'color.background.danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
132
- readonly 'color.background.warning': "var(--ds-background-warning)";
133
- readonly 'color.background.warning.hovered': "var(--ds-background-warning-hovered)";
134
- readonly 'color.background.warning.pressed': "var(--ds-background-warning-pressed)";
135
- readonly 'color.background.warning.bold': "var(--ds-background-warning-bold)";
136
- readonly 'color.background.warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
137
- readonly 'color.background.warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
138
- readonly 'color.background.success': "var(--ds-background-success)";
139
- readonly 'color.background.success.hovered': "var(--ds-background-success-hovered)";
140
- readonly 'color.background.success.pressed': "var(--ds-background-success-pressed)";
141
- readonly 'color.background.success.bold': "var(--ds-background-success-bold)";
142
- readonly 'color.background.success.bold.hovered': "var(--ds-background-success-bold-hovered)";
143
- readonly 'color.background.success.bold.pressed': "var(--ds-background-success-bold-pressed)";
144
- readonly 'color.background.discovery': "var(--ds-background-discovery)";
145
- readonly 'color.background.discovery.hovered': "var(--ds-background-discovery-hovered)";
146
- readonly 'color.background.discovery.pressed': "var(--ds-background-discovery-pressed)";
147
- readonly 'color.background.discovery.bold': "var(--ds-background-discovery-bold)";
148
- readonly 'color.background.discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
149
- readonly 'color.background.discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
150
- readonly 'color.background.information': "var(--ds-background-information)";
151
- readonly 'color.background.information.hovered': "var(--ds-background-information-hovered)";
152
- readonly 'color.background.information.pressed': "var(--ds-background-information-pressed)";
153
- readonly 'color.background.information.bold': "var(--ds-background-information-bold)";
154
- readonly 'color.background.information.bold.hovered': "var(--ds-background-information-bold-hovered)";
155
- readonly 'color.background.information.bold.pressed': "var(--ds-background-information-bold-pressed)";
156
- readonly 'color.blanket': "var(--ds-blanket)";
157
- readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
158
- readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
159
- readonly 'elevation.surface': "var(--ds-surface)";
160
- readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
161
- readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
162
- readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
163
- readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
164
- readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
165
- readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
166
- readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
167
- readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
168
- readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
169
- };
170
-
171
- // @public (undocumented)
172
- type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
173
-
174
- // @public (undocumented)
175
- type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
176
- as?: As;
177
- className?: string;
178
- children?: ReactNode;
179
- backgroundColor?: BackgroundColor;
180
- padding?: Space;
181
- paddingBlock?: Space;
182
- paddingBlockStart?: Space;
183
- paddingBlockEnd?: Space;
184
- paddingInline?: Space;
185
- paddingInlineStart?: Space;
186
- paddingInlineEnd?: Space;
187
- ref?: React.ComponentPropsWithRef<T>['ref'];
188
- };
189
-
190
- // @public (undocumented)
191
- type BasePrimitiveProps = {
192
- testId?: string;
193
- style?: CSSProperties;
194
- xcss?: BoxXCSS | BoxXCSS[];
195
- };
196
-
197
- // @public (undocumented)
198
- export type BorderColor = keyof typeof borderColorMap;
199
-
200
- // @public
201
- const borderColorMap: {
202
- readonly 'color.border': "var(--ds-border)";
203
- readonly 'color.border.accent.lime': "var(--ds-border-accent-lime)";
204
- readonly 'color.border.accent.red': "var(--ds-border-accent-red)";
205
- readonly 'color.border.accent.orange': "var(--ds-border-accent-orange)";
206
- readonly 'color.border.accent.yellow': "var(--ds-border-accent-yellow)";
207
- readonly 'color.border.accent.green': "var(--ds-border-accent-green)";
208
- readonly 'color.border.accent.teal': "var(--ds-border-accent-teal)";
209
- readonly 'color.border.accent.blue': "var(--ds-border-accent-blue)";
210
- readonly 'color.border.accent.purple': "var(--ds-border-accent-purple)";
211
- readonly 'color.border.accent.magenta': "var(--ds-border-accent-magenta)";
212
- readonly 'color.border.accent.gray': "var(--ds-border-accent-gray)";
213
- readonly 'color.border.disabled': "var(--ds-border-disabled)";
214
- readonly 'color.border.focused': "var(--ds-border-focused)";
215
- readonly 'color.border.input': "var(--ds-border-input)";
216
- readonly 'color.border.inverse': "var(--ds-border-inverse)";
217
- readonly 'color.border.selected': "var(--ds-border-selected)";
218
- readonly 'color.border.brand': "var(--ds-border-brand)";
219
- readonly 'color.border.danger': "var(--ds-border-danger)";
220
- readonly 'color.border.warning': "var(--ds-border-warning)";
221
- readonly 'color.border.success': "var(--ds-border-success)";
222
- readonly 'color.border.discovery': "var(--ds-border-discovery)";
223
- readonly 'color.border.information': "var(--ds-border-information)";
224
- readonly 'color.border.bold': "var(--ds-border-bold)";
225
- };
226
-
227
- // @public (undocumented)
228
- export type BorderRadius = keyof typeof borderRadiusMap;
229
-
230
- // @public (undocumented)
231
- const borderRadiusMap: {
232
- readonly 'border.radius.050': "var(--ds-border-radius-050)";
233
- readonly 'border.radius': "var(--ds-border-radius)";
234
- readonly 'border.radius.100': "var(--ds-border-radius-100)";
235
- readonly 'border.radius.200': "var(--ds-border-radius-200)";
236
- readonly 'border.radius.300': "var(--ds-border-radius-300)";
237
- readonly 'border.radius.400': "var(--ds-border-radius-400)";
238
- readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
239
- };
240
-
241
- // @public (undocumented)
242
- export type BorderWidth = keyof typeof borderWidthMap;
243
-
244
- // @public
245
- const borderWidthMap: {
246
- readonly 'border.width': "var(--ds-border-width)";
247
- readonly 'border.width.0': "var(--ds-border-width-0)";
248
- readonly 'border.width.indicator': "var(--ds-border-width-indicator)";
249
- readonly 'border.width.outline': "var(--ds-border-width-outline)";
250
- };
251
-
252
- // @public
253
- export const Box: BoxComponent;
254
-
255
- // @public (undocumented)
256
- type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
257
-
258
- // @public (undocumented)
259
- export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'>;
260
-
261
- // @public (undocumented)
262
- type BoxStyles = SerializedStyles & {
263
- [boxTag]: true;
264
- };
265
-
266
- // @public (undocumented)
267
- const boxTag: unique symbol;
268
-
269
- // @public (undocumented)
270
- type BoxXCSS = false | {
271
- readonly [uniqueSymbol]: BoxStyles;
272
- };
273
-
274
- // @public
275
- export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
276
-
277
- // @public (undocumented)
278
- type CSSMediaQueries = {
279
- [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
280
- };
281
-
282
- // @public (undocumented)
283
- type CSSPseudos = {
284
- [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, CSS_2.Pseudos | MediaQuery>;
285
- };
286
-
287
- // @public (undocumented)
288
- export type Dimension = keyof typeof dimensionMap;
289
-
290
- // @public
291
- const dimensionMap: {
292
- readonly '100%': "100%";
293
- readonly 'size.100': "1rem";
294
- readonly 'size.200': "1.5rem";
295
- readonly 'size.300': "2rem";
296
- readonly 'size.400': "2.5rem";
297
- readonly 'size.500': "3rem";
298
- readonly 'size.600': "6rem";
299
- readonly 'size.1000': "12rem";
300
- };
301
-
302
- // @public (undocumented)
303
- type Direction = keyof typeof flexDirectionMap;
304
-
305
- // @public
306
- export const Flex: MemoExoticComponent<ForwardRefExoticComponent<Pick<{
307
- as?: "div" | "ol" | "span" | "ul" | undefined;
308
- justifyContent?: "center" | "end" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | undefined;
309
- alignItems?: "baseline" | "center" | "end" | "start" | undefined;
310
- gap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
311
- rowGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
312
- direction?: "column" | "row" | undefined;
313
- wrap?: "nowrap" | "wrap" | undefined;
314
- children: ReactNode;
315
- ref?: any;
316
- } & BasePrimitiveProps, "alignItems" | "as" | "children" | "direction" | "gap" | "justifyContent" | "rowGap" | "wrap" | keyof BasePrimitiveProps> & RefAttributes<any>>>;
317
-
318
- // @public (undocumented)
319
- const flexDirectionMap: {
320
- readonly column: SerializedStyles_2;
321
- readonly row: SerializedStyles_2;
322
- };
323
-
324
- // @public (undocumented)
325
- export type FlexProps<T extends ElementType = 'div'> = {
326
- as?: 'div' | 'ol' | 'span' | 'ul';
327
- justifyContent?: JustifyContent;
328
- alignItems?: AlignItems;
329
- gap?: Space;
330
- rowGap?: Space;
331
- direction?: Direction;
332
- wrap?: Wrap;
333
- children: ReactNode;
334
- ref?: React.ComponentPropsWithRef<T>['ref'];
335
- } & BasePrimitiveProps;
336
-
337
- // @public (undocumented)
338
- const flexWrapMap: {
339
- readonly wrap: SerializedStyles_2;
340
- readonly nowrap: SerializedStyles_2;
341
- };
342
-
343
- // @public (undocumented)
344
- type Grow = 'fill' | 'hug';
345
-
346
- // @public (undocumented)
347
- type Grow_2 = 'fill' | 'hug';
348
-
349
- // @public
350
- export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId" | "xcss"> & RefAttributes<any>>>;
351
-
352
- // @public (undocumented)
353
- export interface InlineProps<T extends ElementType = 'div'> {
354
- alignBlock?: AlignBlock;
355
- alignInline?: AlignInline;
356
- as?: 'div' | 'li' | 'ol' | 'span' | 'ul';
357
- children: ReactNode;
358
- grow?: Grow;
359
- ref?: React.ComponentPropsWithRef<T>['ref'];
360
- rowSpace?: Space;
361
- separator?: string;
362
- shouldWrap?: boolean;
363
- space?: Space;
364
- spread?: Spread;
365
- testId?: string;
366
- xcss?: Array<InlineXCSS | false | undefined> | InlineXCSS;
367
- }
368
-
369
- // @public (undocumented)
370
- type InlineStyles = SerializedStyles & {
371
- [inlineTag]: true;
372
- };
373
-
374
- // @public (undocumented)
375
- const inlineTag: unique symbol;
376
-
377
- // @public (undocumented)
378
- type InlineXCSS = {
379
- readonly [uniqueSymbol]: InlineStyles;
380
- };
381
-
382
- // @public (undocumented)
383
- type JustifyContent = keyof typeof justifyContentMap;
384
-
385
- // @public (undocumented)
386
- const justifyContentMap: {
387
- readonly start: SerializedStyles_2;
388
- readonly center: SerializedStyles_2;
389
- readonly end: SerializedStyles_2;
390
- readonly 'space-between': SerializedStyles_2;
391
- readonly 'space-around': SerializedStyles_2;
392
- readonly 'space-evenly': SerializedStyles_2;
393
- readonly stretch: SerializedStyles_2;
394
- };
395
-
396
- // @public (undocumented)
397
- export type Layer = keyof typeof layerMap;
398
-
399
- // @public
400
- const layerMap: {
401
- readonly card: 100;
402
- readonly navigation: 200;
403
- readonly dialog: 300;
404
- readonly layer: 400;
405
- readonly blanket: 500;
406
- readonly modal: 510;
407
- readonly flag: 600;
408
- readonly spotlight: 700;
409
- readonly tooltip: 800;
410
- };
411
-
412
- // @public
413
- const media: {
414
- readonly above: {
415
- readonly xxs: "@media all";
416
- readonly xs: "@media (min-width: 30rem)";
417
- readonly sm: "@media (min-width: 48rem)";
418
- readonly md: "@media (min-width: 64rem)";
419
- readonly lg: "@media (min-width: 90rem)";
420
- readonly xl: "@media (min-width: 110rem)";
421
- };
422
- };
423
-
424
- // @public
425
- type MediaQuery = (typeof media.above)[Breakpoint];
426
-
427
- // @public
428
- export const Pressable: PressableComponent;
429
-
430
- // @public (undocumented)
431
- type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
432
-
433
- // @public (undocumented)
434
- export type PressableProps = Omit<BaseBoxProps<'button'>, 'as' | 'children' | 'disabled' | 'role' | 'style'> & {
435
- children: ReactNode;
436
- isDisabled?: boolean;
437
- };
438
-
439
- // @public (undocumented)
440
- type SafeCSSObject = CSSPseudos & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
441
-
442
- // @public (undocumented)
443
- type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
444
-
445
- // @public (undocumented)
446
- export type Shadow = keyof typeof shadowMap;
447
-
448
- // @public (undocumented)
449
- const shadowMap: {
450
- readonly 'elevation.shadow.overflow': "var(--ds-shadow-overflow)";
451
- readonly 'elevation.shadow.overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
452
- readonly 'elevation.shadow.overflow.spread': "var(--ds-shadow-overflow-spread)";
453
- readonly 'elevation.shadow.overlay': "var(--ds-shadow-overlay)";
454
- readonly 'elevation.shadow.raised': "var(--ds-shadow-raised)";
455
- };
456
-
457
- // @public (undocumented)
458
- export type Space = keyof typeof spaceMap;
459
-
460
- // @public
461
- const spaceMap: {
462
- 'space.0': "var(--ds-space-0)";
463
- 'space.025': "var(--ds-space-025)";
464
- 'space.050': "var(--ds-space-050)";
465
- 'space.075': "var(--ds-space-075)";
466
- 'space.100': "var(--ds-space-100)";
467
- 'space.150': "var(--ds-space-150)";
468
- 'space.200': "var(--ds-space-200)";
469
- 'space.250': "var(--ds-space-250)";
470
- 'space.300': "var(--ds-space-300)";
471
- 'space.400': "var(--ds-space-400)";
472
- 'space.500': "var(--ds-space-500)";
473
- 'space.600': "var(--ds-space-600)";
474
- 'space.800': "var(--ds-space-800)";
475
- 'space.1000': "var(--ds-space-1000)";
476
- };
477
-
478
- // @public (undocumented)
479
- type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
480
-
481
- // @public (undocumented)
482
- type Spread = 'space-between';
483
-
484
- // @public (undocumented)
485
- type Spread_2 = 'space-between';
486
-
487
- // @public
488
- export const Stack: MemoExoticComponent<ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
489
-
490
- // @public (undocumented)
491
- export interface StackProps<T extends ElementType = 'div'> {
492
- alignBlock?: AlignBlock_2;
493
- alignInline?: AlignInline_2;
494
- as?: 'div' | 'ol' | 'span' | 'ul';
495
- children: ReactNode;
496
- grow?: Grow_2;
497
- ref?: React.ComponentPropsWithRef<T>['ref'];
498
- space?: Space;
499
- spread?: Spread_2;
500
- testId?: string;
501
- }
502
-
503
- // @public (undocumented)
504
- type TextColor = keyof typeof textColorMap;
505
-
506
- // @public (undocumented)
507
- const textColorMap: {
508
- readonly 'color.text': "var(--ds-text)";
509
- readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
510
- readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
511
- readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
512
- readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
513
- readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
514
- readonly 'color.text.accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
515
- readonly 'color.text.accent.yellow': "var(--ds-text-accent-yellow)";
516
- readonly 'color.text.accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
517
- readonly 'color.text.accent.green': "var(--ds-text-accent-green)";
518
- readonly 'color.text.accent.green.bolder': "var(--ds-text-accent-green-bolder)";
519
- readonly 'color.text.accent.teal': "var(--ds-text-accent-teal)";
520
- readonly 'color.text.accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
521
- readonly 'color.text.accent.blue': "var(--ds-text-accent-blue)";
522
- readonly 'color.text.accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
523
- readonly 'color.text.accent.purple': "var(--ds-text-accent-purple)";
524
- readonly 'color.text.accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
525
- readonly 'color.text.accent.magenta': "var(--ds-text-accent-magenta)";
526
- readonly 'color.text.accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
527
- readonly 'color.text.accent.gray': "var(--ds-text-accent-gray)";
528
- readonly 'color.text.accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
529
- readonly 'color.text.disabled': "var(--ds-text-disabled)";
530
- readonly 'color.text.inverse': "var(--ds-text-inverse)";
531
- readonly 'color.text.selected': "var(--ds-text-selected)";
532
- readonly 'color.text.brand': "var(--ds-text-brand)";
533
- readonly 'color.text.danger': "var(--ds-text-danger)";
534
- readonly 'color.text.warning': "var(--ds-text-warning)";
535
- readonly 'color.text.warning.inverse': "var(--ds-text-warning-inverse)";
536
- readonly 'color.text.success': "var(--ds-text-success)";
537
- readonly 'color.text.discovery': "var(--ds-text-discovery)";
538
- readonly 'color.text.information': "var(--ds-text-information)";
539
- readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
540
- readonly 'color.text.subtle': "var(--ds-text-subtle)";
541
- };
542
-
543
- // @public (undocumented)
544
- type TokenisedProps = {
545
- backgroundColor?: BackgroundColor;
546
- blockSize?: AutoComplete<Dimension>;
547
- borderColor?: BorderColor;
548
- borderRadius?: BorderRadius;
549
- borderWidth?: BorderWidth;
550
- bottom?: AutoComplete<Space>;
551
- boxShadow?: Shadow;
552
- color?: TextColor;
553
- columnGap?: Space;
554
- gap?: Space;
555
- height?: AutoComplete<Dimension>;
556
- inlineSize?: AutoComplete<Dimension>;
557
- inset?: Space;
558
- insetBlock?: Space;
559
- insetBlockEnd?: Space;
560
- insetBlockStart?: Space;
561
- insetInline?: Space;
562
- insetInlineEnd?: Space;
563
- insetInlineStart?: Space;
564
- left?: AutoComplete<Space>;
565
- maxBlockSize?: AutoComplete<Dimension>;
566
- maxHeight?: AutoComplete<Dimension>;
567
- maxInlineSize?: AutoComplete<Dimension>;
568
- maxWidth?: AutoComplete<Dimension>;
569
- minBlockSize?: AutoComplete<Dimension>;
570
- minHeight?: AutoComplete<Dimension>;
571
- minInlineSize?: AutoComplete<Dimension>;
572
- minWidth?: AutoComplete<Dimension>;
573
- outlineColor?: BorderColor;
574
- outlineOffset?: Space;
575
- outlineWidth?: BorderWidth;
576
- padding?: Space;
577
- paddingBlock?: Space;
578
- paddingBlockEnd?: Space;
579
- paddingBlockStart?: Space;
580
- paddingInline?: Space;
581
- paddingInlineEnd?: Space;
582
- paddingInlineStart?: Space;
583
- right?: AutoComplete<Space>;
584
- rowGap?: Space;
585
- top?: AutoComplete<Space>;
586
- width?: AutoComplete<Dimension>;
587
- zIndex?: Layer;
588
- };
589
-
590
- // @public (undocumented)
591
- const uniqueSymbol: unique symbol;
592
-
593
- // @public
594
- export const UNSAFE_BREAKPOINTS_CONFIG: {
595
- readonly xxs: {
596
- readonly gridItemGutter: "var(--ds-space-200)";
597
- readonly gridMargin: "var(--ds-space-200)";
598
- readonly min: "0rem";
599
- readonly max: "29.99rem";
600
- };
601
- readonly xs: {
602
- readonly gridItemGutter: "var(--ds-space-200)";
603
- readonly gridMargin: "var(--ds-space-200)";
604
- readonly min: "30rem";
605
- readonly max: "47.99rem";
606
- };
607
- readonly sm: {
608
- readonly gridItemGutter: "var(--ds-space-200)";
609
- readonly gridMargin: "var(--ds-space-300)";
610
- readonly min: "48rem";
611
- readonly max: "63.99rem";
612
- };
613
- readonly md: {
614
- readonly gridItemGutter: "var(--ds-space-300)";
615
- readonly gridMargin: "var(--ds-space-400)";
616
- readonly min: "64rem";
617
- readonly max: "89.99rem";
618
- };
619
- readonly lg: {
620
- readonly gridItemGutter: "var(--ds-space-400)";
621
- readonly gridMargin: "var(--ds-space-400)";
622
- readonly min: "90rem";
623
- readonly max: "109.99rem";
624
- };
625
- readonly xl: {
626
- readonly gridItemGutter: "var(--ds-space-400)";
627
- readonly gridMargin: "var(--ds-space-500)";
628
- readonly min: "110rem";
629
- readonly max: null;
630
- };
631
- };
632
-
633
- // @internal
634
- export const UNSAFE_media: {
635
- above: {
636
- readonly xxs: "@media all";
637
- readonly xs: "@media (min-width: 30rem)";
638
- readonly sm: "@media (min-width: 48rem)";
639
- readonly md: "@media (min-width: 64rem)";
640
- readonly lg: "@media (min-width: 90rem)";
641
- readonly xl: "@media (min-width: 110rem)";
642
- };
643
- below: {
644
- readonly xs: "@media not all and (min-width: 30rem)";
645
- readonly sm: "@media not all and (min-width: 48rem)";
646
- readonly md: "@media not all and (min-width: 64rem)";
647
- readonly lg: "@media not all and (min-width: 90rem)";
648
- readonly xl: "@media not all and (min-width: 110rem)";
649
- };
650
- only: {
651
- readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
652
- readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
653
- readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
654
- readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
655
- readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
656
- readonly xl: "@media (min-width: 110rem)";
657
- };
658
- };
659
-
660
- // @public (undocumented)
661
- type Wrap = keyof typeof flexWrapMap;
662
-
663
- // @public
664
- export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
665
- readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId" | "xcss"> & RefAttributes<any>>> ? InlineStyles : never;
666
- };
667
-
668
- // (No @packageDocumentation comment for this package)
669
-
670
- ```