@atlaskit/ds-explorations 2.1.1 → 2.1.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 (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/es2019/version.json +1 -1
  4. package/dist/esm/version.json +1 -1
  5. package/dist/types-ts4.5/components/box.partial.d.ts +355 -0
  6. package/dist/types-ts4.5/components/inline.partial.d.ts +108 -0
  7. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +49 -0
  8. package/dist/types-ts4.5/components/stack.partial.d.ts +92 -0
  9. package/dist/types-ts4.5/components/surface-provider.d.ts +15 -0
  10. package/dist/types-ts4.5/components/text.partial.d.ts +156 -0
  11. package/dist/types-ts4.5/components/types.d.ts +13 -0
  12. package/dist/types-ts4.5/constants.d.ts +12 -0
  13. package/dist/types-ts4.5/index.d.ts +9 -0
  14. package/dist/types-ts4.5/internal/color-map.d.ts +36 -0
  15. package/dist/types-ts4.5/internal/role-to-element.d.ts +32 -0
  16. package/dist/types-ts4.5/internal/spacing-scale.d.ts +24 -0
  17. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 2.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
8
+
3
9
  ## 2.1.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/types-ts4.5/components/box.partial.d.ts ADDED
@@ -0,0 +1,355 @@
1
+ /** @jsx jsx */
2
+ import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
3
+ import { Layer } from '../constants';
4
+ import type { BasePrimitiveProps } from './types';
5
+ /**
6
+ * @private
7
+ * @deprecated DSP-8009: This type is scheduled for deletion.
8
+ * Please use `Box` from `@atlaskit/primitives` instead.
9
+ */
10
+ export type BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BoxPropsBase<T>;
11
+ type BoxPropsBase<T extends ElementType> = {
12
+ /**
13
+ * The DOM element to render as the Box. Defaults to `div`.
14
+ */
15
+ as?: T;
16
+ /**
17
+ * Elements to be rendered inside the Box.
18
+ */
19
+ children?: ReactNode;
20
+ /**
21
+ * The HTML className attribute.
22
+ *
23
+ * Before using this prop please ensure:
24
+ * - The styles cannot otherwise be achieved through `Box` directly.
25
+ * - The use case needs custom styles that cannot be designed or implemented differently
26
+ *
27
+ * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
28
+ *
29
+ * @see `@atlaskit/eslint-plugin-design-system`
30
+ */
31
+ className?: string;
32
+ /**
33
+ * Token representing background color with a fallback.
34
+ */
35
+ backgroundColor?: BackgroundColor;
36
+ /**
37
+ * Token representing shadow with a fallback
38
+ */
39
+ shadow?: Shadow;
40
+ /**
41
+ * Defines border style.
42
+ */
43
+ borderStyle?: BorderStyle;
44
+ /**
45
+ * Defines border width.
46
+ */
47
+ borderWidth?: BorderWidth;
48
+ /**
49
+ * Token representing border color with a fallback.
50
+ */
51
+ borderColor?: BorderColor;
52
+ /**
53
+ * Defines border radius.
54
+ */
55
+ borderRadius?: BorderRadius;
56
+ /**
57
+ * Used for providing a z-index.
58
+ */
59
+ layer?: Layer;
60
+ /**
61
+ * Defines the main axis direction.
62
+ * @deprecated
63
+ */
64
+ flexDirection?: FlexDirection;
65
+ /**
66
+ * Used to align children along the cross axis.
67
+ * @deprecated
68
+ */
69
+ alignItems?: FlexAlignItems;
70
+ /**
71
+ * Used to align children along the main axis.
72
+ * @deprecated
73
+ */
74
+ justifyContent?: FlexJustifyContent;
75
+ /**
76
+ * Defines what happens if content overflows the box.
77
+ */
78
+ overflow?: Overflow;
79
+ /**
80
+ * Shorthand for `paddingBlock` and `paddingInline` together.
81
+ *
82
+ * @see paddingBlock
83
+ * @see paddingInline
84
+ */
85
+ padding?: Padding;
86
+ /**
87
+ * Token representing CSS `paddingBlock`.
88
+ */
89
+ paddingBlock?: PaddingBlock;
90
+ /**
91
+ * Token representing CSS `paddingInline`.
92
+ */
93
+ paddingInline?: PaddingInline;
94
+ /**
95
+ * Token representing width.
96
+ * @experimental The existing tokens will be replaced to better reflect dimensions.
97
+ */
98
+ width?: Width;
99
+ /**
100
+ * Token representing height.
101
+ * @experimental The existing tokens will be replaced to better reflect dimensions.
102
+ */
103
+ height?: Height;
104
+ /**
105
+ * Defines display type and layout. Defaults to `flex`.
106
+ */
107
+ display?: Display;
108
+ /**
109
+ * CSS position property.
110
+ */
111
+ position?: Position;
112
+ ref?: ComponentPropsWithRef<T>['ref'];
113
+ };
114
+ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
115
+ /**
116
+ * __Box__
117
+ *
118
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
119
+ * Renders a `div` by default.
120
+ *
121
+ * @private
122
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
123
+ * Please use `Box` from `@atlaskit/primitives` instead.
124
+ */
125
+ export declare const Box: BoxComponent;
126
+ export default Box;
127
+ type BorderStyle = keyof typeof borderStyleMap;
128
+ declare const borderStyleMap: {
129
+ none: import("@emotion/react").SerializedStyles;
130
+ solid: import("@emotion/react").SerializedStyles;
131
+ dashed: import("@emotion/react").SerializedStyles;
132
+ dotted: import("@emotion/react").SerializedStyles;
133
+ };
134
+ type BorderWidth = keyof typeof borderWidthMap;
135
+ declare const borderWidthMap: {
136
+ '0px': import("@emotion/react").SerializedStyles;
137
+ '1px': import("@emotion/react").SerializedStyles;
138
+ '2px': import("@emotion/react").SerializedStyles;
139
+ '3px': import("@emotion/react").SerializedStyles;
140
+ };
141
+ type BorderRadius = keyof typeof borderRadiusMap;
142
+ declare const borderRadiusMap: {
143
+ normal: import("@emotion/react").SerializedStyles;
144
+ rounded: import("@emotion/react").SerializedStyles;
145
+ badge: import("@emotion/react").SerializedStyles;
146
+ };
147
+ /**
148
+ * @experimental - this is likely to be removed
149
+ */
150
+ type FlexDirection = keyof typeof flexDirectionMap;
151
+ declare const flexDirectionMap: {
152
+ column: import("@emotion/react").SerializedStyles;
153
+ row: import("@emotion/react").SerializedStyles;
154
+ };
155
+ /**
156
+ * @experimental - this is likely to be removed
157
+ */
158
+ type FlexAlignItems = keyof typeof flexAlignItemsMap;
159
+ declare const flexAlignItemsMap: {
160
+ center: import("@emotion/react").SerializedStyles;
161
+ baseline: import("@emotion/react").SerializedStyles;
162
+ flexStart: import("@emotion/react").SerializedStyles;
163
+ flexEnd: import("@emotion/react").SerializedStyles;
164
+ start: import("@emotion/react").SerializedStyles;
165
+ end: import("@emotion/react").SerializedStyles;
166
+ };
167
+ /**
168
+ * @experimental - this is likely to be removed
169
+ */
170
+ type FlexJustifyContent = keyof typeof flexJustifyContentMap;
171
+ declare const flexJustifyContentMap: {
172
+ center: import("@emotion/react").SerializedStyles;
173
+ flexStart: import("@emotion/react").SerializedStyles;
174
+ flexEnd: import("@emotion/react").SerializedStyles;
175
+ start: import("@emotion/react").SerializedStyles;
176
+ end: import("@emotion/react").SerializedStyles;
177
+ };
178
+ type Display = keyof typeof displayMap;
179
+ declare const displayMap: {
180
+ block: import("@emotion/react").SerializedStyles;
181
+ inline: import("@emotion/react").SerializedStyles;
182
+ flex: import("@emotion/react").SerializedStyles;
183
+ inlineFlex: import("@emotion/react").SerializedStyles;
184
+ inlineBlock: import("@emotion/react").SerializedStyles;
185
+ };
186
+ type Position = keyof typeof positionMap;
187
+ declare const positionMap: {
188
+ absolute: import("@emotion/react").SerializedStyles;
189
+ fixed: import("@emotion/react").SerializedStyles;
190
+ relative: import("@emotion/react").SerializedStyles;
191
+ static: import("@emotion/react").SerializedStyles;
192
+ };
193
+ type Overflow = keyof typeof overflowMap;
194
+ declare const overflowMap: {
195
+ auto: import("@emotion/react").SerializedStyles;
196
+ hidden: import("@emotion/react").SerializedStyles;
197
+ };
198
+ /**
199
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
200
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
201
+ * @codegenId dimensions
202
+ * @codegenCommand yarn codegen-styles
203
+ * @codegenParams ["width", "height"]
204
+ */
205
+ declare const widthMap: {
206
+ '100%': import("@emotion/react").SerializedStyles;
207
+ 'size.100': import("@emotion/react").SerializedStyles;
208
+ 'size.1000': import("@emotion/react").SerializedStyles;
209
+ 'size.200': import("@emotion/react").SerializedStyles;
210
+ 'size.300': import("@emotion/react").SerializedStyles;
211
+ 'size.400': import("@emotion/react").SerializedStyles;
212
+ 'size.500': import("@emotion/react").SerializedStyles;
213
+ 'size.600': import("@emotion/react").SerializedStyles;
214
+ };
215
+ export type Width = keyof typeof widthMap;
216
+ declare const heightMap: {
217
+ '100%': import("@emotion/react").SerializedStyles;
218
+ 'size.100': import("@emotion/react").SerializedStyles;
219
+ 'size.1000': import("@emotion/react").SerializedStyles;
220
+ 'size.200': import("@emotion/react").SerializedStyles;
221
+ 'size.300': import("@emotion/react").SerializedStyles;
222
+ 'size.400': import("@emotion/react").SerializedStyles;
223
+ 'size.500': import("@emotion/react").SerializedStyles;
224
+ 'size.600': import("@emotion/react").SerializedStyles;
225
+ };
226
+ export type Height = keyof typeof heightMap;
227
+ /**
228
+ * @codegenEnd
229
+ */
230
+ /**
231
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
232
+ * @codegen <<SignedSource::0ba10ee53636df14b0db65fa1adbc94c>>
233
+ * @codegenId spacing
234
+ * @codegenCommand yarn codegen-styles
235
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
236
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
237
+ */
238
+ declare const paddingMap: {
239
+ 'space.0': import("@emotion/react").SerializedStyles;
240
+ 'space.025': import("@emotion/react").SerializedStyles;
241
+ 'space.050': import("@emotion/react").SerializedStyles;
242
+ 'space.075': import("@emotion/react").SerializedStyles;
243
+ 'space.100': import("@emotion/react").SerializedStyles;
244
+ 'space.1000': import("@emotion/react").SerializedStyles;
245
+ 'space.150': import("@emotion/react").SerializedStyles;
246
+ 'space.200': import("@emotion/react").SerializedStyles;
247
+ 'space.250': import("@emotion/react").SerializedStyles;
248
+ 'space.300': import("@emotion/react").SerializedStyles;
249
+ 'space.400': import("@emotion/react").SerializedStyles;
250
+ 'space.500': import("@emotion/react").SerializedStyles;
251
+ 'space.600': import("@emotion/react").SerializedStyles;
252
+ 'space.800': import("@emotion/react").SerializedStyles;
253
+ };
254
+ export type Padding = keyof typeof paddingMap;
255
+ declare const paddingBlockMap: {
256
+ 'space.0': import("@emotion/react").SerializedStyles;
257
+ 'space.025': import("@emotion/react").SerializedStyles;
258
+ 'space.050': import("@emotion/react").SerializedStyles;
259
+ 'space.075': import("@emotion/react").SerializedStyles;
260
+ 'space.100': import("@emotion/react").SerializedStyles;
261
+ 'space.1000': import("@emotion/react").SerializedStyles;
262
+ 'space.150': import("@emotion/react").SerializedStyles;
263
+ 'space.200': import("@emotion/react").SerializedStyles;
264
+ 'space.250': import("@emotion/react").SerializedStyles;
265
+ 'space.300': import("@emotion/react").SerializedStyles;
266
+ 'space.400': import("@emotion/react").SerializedStyles;
267
+ 'space.500': import("@emotion/react").SerializedStyles;
268
+ 'space.600': import("@emotion/react").SerializedStyles;
269
+ 'space.800': import("@emotion/react").SerializedStyles;
270
+ };
271
+ export type PaddingBlock = keyof typeof paddingBlockMap;
272
+ declare const paddingInlineMap: {
273
+ 'space.0': import("@emotion/react").SerializedStyles;
274
+ 'space.025': import("@emotion/react").SerializedStyles;
275
+ 'space.050': import("@emotion/react").SerializedStyles;
276
+ 'space.075': import("@emotion/react").SerializedStyles;
277
+ 'space.100': import("@emotion/react").SerializedStyles;
278
+ 'space.1000': import("@emotion/react").SerializedStyles;
279
+ 'space.150': import("@emotion/react").SerializedStyles;
280
+ 'space.200': import("@emotion/react").SerializedStyles;
281
+ 'space.250': import("@emotion/react").SerializedStyles;
282
+ 'space.300': import("@emotion/react").SerializedStyles;
283
+ 'space.400': import("@emotion/react").SerializedStyles;
284
+ 'space.500': import("@emotion/react").SerializedStyles;
285
+ 'space.600': import("@emotion/react").SerializedStyles;
286
+ 'space.800': import("@emotion/react").SerializedStyles;
287
+ };
288
+ export type PaddingInline = keyof typeof paddingInlineMap;
289
+ /**
290
+ * @codegenEnd
291
+ */
292
+ /**
293
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
294
+ * @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
295
+ * @codegenId colors
296
+ * @codegenCommand yarn codegen-styles
297
+ * @codegenParams ["border", "background", "shadow"]
298
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
299
+ */
300
+ declare const borderColorMap: {
301
+ readonly 'color.border': import("@emotion/react").SerializedStyles;
302
+ readonly disabled: import("@emotion/react").SerializedStyles;
303
+ readonly focused: import("@emotion/react").SerializedStyles;
304
+ readonly input: import("@emotion/react").SerializedStyles;
305
+ readonly inverse: import("@emotion/react").SerializedStyles;
306
+ readonly selected: import("@emotion/react").SerializedStyles;
307
+ readonly brand: import("@emotion/react").SerializedStyles;
308
+ readonly danger: import("@emotion/react").SerializedStyles;
309
+ readonly warning: import("@emotion/react").SerializedStyles;
310
+ readonly success: import("@emotion/react").SerializedStyles;
311
+ readonly discovery: import("@emotion/react").SerializedStyles;
312
+ readonly information: import("@emotion/react").SerializedStyles;
313
+ readonly bold: import("@emotion/react").SerializedStyles;
314
+ };
315
+ export type BorderColor = keyof typeof borderColorMap;
316
+ declare const backgroundColorMap: {
317
+ readonly disabled: import("@emotion/react").SerializedStyles;
318
+ readonly input: import("@emotion/react").SerializedStyles;
319
+ readonly 'inverse.subtle': import("@emotion/react").SerializedStyles;
320
+ readonly neutral: import("@emotion/react").SerializedStyles;
321
+ readonly 'neutral.subtle': import("@emotion/react").SerializedStyles;
322
+ readonly 'neutral.bold': import("@emotion/react").SerializedStyles;
323
+ readonly selected: import("@emotion/react").SerializedStyles;
324
+ readonly 'selected.bold': import("@emotion/react").SerializedStyles;
325
+ readonly 'brand.bold': import("@emotion/react").SerializedStyles;
326
+ readonly danger: import("@emotion/react").SerializedStyles;
327
+ readonly 'danger.bold': import("@emotion/react").SerializedStyles;
328
+ readonly warning: import("@emotion/react").SerializedStyles;
329
+ readonly 'warning.bold': import("@emotion/react").SerializedStyles;
330
+ readonly success: import("@emotion/react").SerializedStyles;
331
+ readonly 'success.bold': import("@emotion/react").SerializedStyles;
332
+ readonly discovery: import("@emotion/react").SerializedStyles;
333
+ readonly 'discovery.bold': import("@emotion/react").SerializedStyles;
334
+ readonly information: import("@emotion/react").SerializedStyles;
335
+ readonly 'information.bold': import("@emotion/react").SerializedStyles;
336
+ readonly 'color.blanket': import("@emotion/react").SerializedStyles;
337
+ readonly 'color.blanket.selected': import("@emotion/react").SerializedStyles;
338
+ readonly 'color.blanket.danger': import("@emotion/react").SerializedStyles;
339
+ readonly 'elevation.surface': import("@emotion/react").SerializedStyles;
340
+ readonly 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
341
+ readonly 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
342
+ readonly 'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
343
+ };
344
+ export type BackgroundColor = keyof typeof backgroundColorMap;
345
+ declare const shadowMap: {
346
+ readonly overflow: import("@emotion/react").SerializedStyles;
347
+ readonly 'overflow.perimeter': import("@emotion/react").SerializedStyles;
348
+ readonly 'overflow.spread': import("@emotion/react").SerializedStyles;
349
+ readonly overlay: import("@emotion/react").SerializedStyles;
350
+ readonly raised: import("@emotion/react").SerializedStyles;
351
+ };
352
+ export type Shadow = keyof typeof shadowMap;
353
+ /**
354
+ * @codegenEnd
355
+ */
package/dist/types-ts4.5/components/inline.partial.d.ts ADDED
@@ -0,0 +1,108 @@
1
+ /** @jsx jsx */
2
+ import { ReactNode } from 'react';
3
+ import type { BasePrimitiveProps } from './types';
4
+ /**
5
+ * @private
6
+ * @deprecated DSP-8009: This type is scheduled for deletion.
7
+ * Please use `Inline` from `@atlaskit/primitives` instead.
8
+ */
9
+ export interface InlineProps extends BasePrimitiveProps {
10
+ /**
11
+ * Used to align children along the cross axis.
12
+ */
13
+ alignItems?: FlexAlignItems;
14
+ /**
15
+ * Used to align children along the main axis.
16
+ */
17
+ justifyContent?: FlexJustifyContent;
18
+ /**
19
+ * Sets whether children are forced onto one line or can wrap onto multiple lines
20
+ */
21
+ flexWrap?: FlexWrap;
22
+ /**
23
+ * Token representing gap between children.
24
+ */
25
+ gap: ColumnGap;
26
+ /**
27
+ * Renders a divider between children.
28
+ * If a string is provided it will automatically be wrapped in a `<Text>` component.
29
+ */
30
+ divider?: ReactNode;
31
+ /**
32
+ * Elements to be rendered inside the Inline.
33
+ */
34
+ children: ReactNode;
35
+ }
36
+ type FlexAlignItems = keyof typeof flexAlignItemsMap;
37
+ declare const flexAlignItemsMap: {
38
+ center: import("@emotion/react").SerializedStyles;
39
+ baseline: import("@emotion/react").SerializedStyles;
40
+ flexStart: import("@emotion/react").SerializedStyles;
41
+ flexEnd: import("@emotion/react").SerializedStyles;
42
+ start: import("@emotion/react").SerializedStyles;
43
+ end: import("@emotion/react").SerializedStyles;
44
+ };
45
+ type FlexJustifyContent = keyof typeof flexJustifyContentMap;
46
+ declare const flexJustifyContentMap: {
47
+ center: import("@emotion/react").SerializedStyles;
48
+ flexStart: import("@emotion/react").SerializedStyles;
49
+ 'space-between': import("@emotion/react").SerializedStyles;
50
+ flexEnd: import("@emotion/react").SerializedStyles;
51
+ start: import("@emotion/react").SerializedStyles;
52
+ end: import("@emotion/react").SerializedStyles;
53
+ spaceBetween: import("@emotion/react").SerializedStyles;
54
+ };
55
+ type FlexWrap = keyof typeof flexWrapMap;
56
+ declare const flexWrapMap: {
57
+ wrap: import("@emotion/react").SerializedStyles;
58
+ };
59
+ /**
60
+ * __Inline__
61
+ *
62
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
63
+ * Renders a `div` by default.
64
+ *
65
+ * @private
66
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
67
+ * Please use `Inline` from `@atlaskit/primitives` instead.
68
+ *
69
+ * @example
70
+ * ```tsx
71
+ * const App = () => (
72
+ * <Inline gap="space.100">
73
+ * <Button />
74
+ * <Button />
75
+ * </Inline>
76
+ * )
77
+ * ```
78
+ */
79
+ declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
80
+ export default Inline;
81
+ /**
82
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
83
+ * @codegen <<SignedSource::75d680a1c3c5679ef743f39217148d11>>
84
+ * @codegenId spacing
85
+ * @codegenCommand yarn codegen-styles
86
+ * @codegenParams ["columnGap"]
87
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
88
+ */
89
+ declare const columnGapMap: {
90
+ 'space.0': import("@emotion/react").SerializedStyles;
91
+ 'space.025': import("@emotion/react").SerializedStyles;
92
+ 'space.050': import("@emotion/react").SerializedStyles;
93
+ 'space.075': import("@emotion/react").SerializedStyles;
94
+ 'space.100': import("@emotion/react").SerializedStyles;
95
+ 'space.1000': import("@emotion/react").SerializedStyles;
96
+ 'space.150': import("@emotion/react").SerializedStyles;
97
+ 'space.200': import("@emotion/react").SerializedStyles;
98
+ 'space.250': import("@emotion/react").SerializedStyles;
99
+ 'space.300': import("@emotion/react").SerializedStyles;
100
+ 'space.400': import("@emotion/react").SerializedStyles;
101
+ 'space.500': import("@emotion/react").SerializedStyles;
102
+ 'space.600': import("@emotion/react").SerializedStyles;
103
+ 'space.800': import("@emotion/react").SerializedStyles;
104
+ };
105
+ export type ColumnGap = keyof typeof columnGapMap;
106
+ /**
107
+ * @codegenEnd
108
+ */
package/dist/types-ts4.5/components/interaction-surface.partial.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ /** @jsx jsx */
2
+ import { ReactNode } from 'react';
3
+ import { jsx } from '@emotion/react';
4
+ import { BasePrimitiveProps } from './types';
5
+ interface InteractionSurfaceProps extends BasePrimitiveProps {
6
+ children: ReactNode;
7
+ appearance?: InteractionBackgroundColor;
8
+ }
9
+ /**
10
+ *
11
+ * @example
12
+ * ```js
13
+ * // a minimal icon button
14
+ * <Box as="button">
15
+ * <InteractionSurface>
16
+ * <WarningIcon label="icon button" />
17
+ * </InteractionSurface>
18
+ * </Box>
19
+ * ```
20
+ */
21
+ declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
22
+ export default InteractionSurface;
23
+ declare const backgroundHoverColorMap: {
24
+ input: import("@emotion/react").SerializedStyles;
25
+ 'inverse.subtle': import("@emotion/react").SerializedStyles;
26
+ neutral: import("@emotion/react").SerializedStyles;
27
+ 'neutral.subtle': import("@emotion/react").SerializedStyles;
28
+ 'neutral.bold': import("@emotion/react").SerializedStyles;
29
+ selected: import("@emotion/react").SerializedStyles;
30
+ 'selected.bold': import("@emotion/react").SerializedStyles;
31
+ 'brand.bold': import("@emotion/react").SerializedStyles;
32
+ danger: import("@emotion/react").SerializedStyles;
33
+ 'danger.bold': import("@emotion/react").SerializedStyles;
34
+ warning: import("@emotion/react").SerializedStyles;
35
+ 'warning.bold': import("@emotion/react").SerializedStyles;
36
+ success: import("@emotion/react").SerializedStyles;
37
+ 'success.bold': import("@emotion/react").SerializedStyles;
38
+ discovery: import("@emotion/react").SerializedStyles;
39
+ 'discovery.bold': import("@emotion/react").SerializedStyles;
40
+ information: import("@emotion/react").SerializedStyles;
41
+ 'information.bold': import("@emotion/react").SerializedStyles;
42
+ 'elevation.surface': import("@emotion/react").SerializedStyles;
43
+ 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
44
+ 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
45
+ };
46
+ type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
47
+ /**
48
+ * @codegenEnd
49
+ */
package/dist/types-ts4.5/components/stack.partial.d.ts ADDED
@@ -0,0 +1,92 @@
1
+ /** @jsx jsx */
2
+ import { ReactNode } from 'react';
3
+ import { BasePrimitiveProps } from './types';
4
+ /**
5
+ * @private
6
+ * @deprecated DSP-8009: This type is scheduled for deletion.
7
+ * Please use `Stack` from `@atlaskit/primitives` instead.
8
+ */
9
+ export interface StackProps extends BasePrimitiveProps {
10
+ /**
11
+ * Used to align children along the cross axis.
12
+ */
13
+ alignItems?: FlexAlignItems;
14
+ /**
15
+ * Used to align children along the main axis.
16
+ */
17
+ justifyContent?: FlexJustifyContent;
18
+ /**
19
+ * Sets whether children are forced onto one line or can wrap onto multiple lines
20
+ */
21
+ flexWrap?: FlexWrap;
22
+ /**
23
+ * Token representing gap between children.
24
+ */
25
+ gap: RowGap;
26
+ /**
27
+ * Elements to be rendered inside the Stack.
28
+ */
29
+ children: ReactNode;
30
+ }
31
+ type FlexAlignItems = keyof typeof flexAlignItemsMap;
32
+ declare const flexAlignItemsMap: {
33
+ center: import("@emotion/react").SerializedStyles;
34
+ baseline: import("@emotion/react").SerializedStyles;
35
+ flexStart: import("@emotion/react").SerializedStyles;
36
+ flexEnd: import("@emotion/react").SerializedStyles;
37
+ start: import("@emotion/react").SerializedStyles;
38
+ end: import("@emotion/react").SerializedStyles;
39
+ };
40
+ type FlexJustifyContent = keyof typeof flexJustifyContentMap;
41
+ declare const flexJustifyContentMap: {
42
+ center: import("@emotion/react").SerializedStyles;
43
+ flexStart: import("@emotion/react").SerializedStyles;
44
+ flexEnd: import("@emotion/react").SerializedStyles;
45
+ start: import("@emotion/react").SerializedStyles;
46
+ end: import("@emotion/react").SerializedStyles;
47
+ };
48
+ type FlexWrap = keyof typeof flexWrapMap;
49
+ declare const flexWrapMap: {
50
+ wrap: import("@emotion/react").SerializedStyles;
51
+ };
52
+ /**
53
+ * __Stack__
54
+ *
55
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
56
+ * Renders a `div` by default.
57
+ *
58
+ * @private
59
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
60
+ * Please use `Stack` from `@atlaskit/primitives` instead.
61
+ *
62
+ */
63
+ declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
64
+ export default Stack;
65
+ /**
66
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
67
+ * @codegen <<SignedSource::b762b9e20e785c1909a1c59c2791a66e>>
68
+ * @codegenId spacing
69
+ * @codegenCommand yarn codegen-styles
70
+ * @codegenParams ["rowGap"]
71
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
72
+ */
73
+ declare const rowGapMap: {
74
+ 'space.0': import("@emotion/react").SerializedStyles;
75
+ 'space.025': import("@emotion/react").SerializedStyles;
76
+ 'space.050': import("@emotion/react").SerializedStyles;
77
+ 'space.075': import("@emotion/react").SerializedStyles;
78
+ 'space.100': import("@emotion/react").SerializedStyles;
79
+ 'space.1000': import("@emotion/react").SerializedStyles;
80
+ 'space.150': import("@emotion/react").SerializedStyles;
81
+ 'space.200': import("@emotion/react").SerializedStyles;
82
+ 'space.250': import("@emotion/react").SerializedStyles;
83
+ 'space.300': import("@emotion/react").SerializedStyles;
84
+ 'space.400': import("@emotion/react").SerializedStyles;
85
+ 'space.500': import("@emotion/react").SerializedStyles;
86
+ 'space.600': import("@emotion/react").SerializedStyles;
87
+ 'space.800': import("@emotion/react").SerializedStyles;
88
+ };
89
+ export type RowGap = keyof typeof rowGapMap;
90
+ /**
91
+ * @codegenEnd
92
+ */
package/dist/types-ts4.5/components/surface-provider.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * __Surface context__
4
+ *
5
+ * A surface context provides context information on the current background (if set).
6
+ */
7
+ export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
8
+ /**
9
+ * __useSurface__
10
+ *
11
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
12
+ *
13
+ * @see SurfaceContext
14
+ */
15
+ export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
package/dist/types-ts4.5/components/text.partial.d.ts ADDED
@@ -0,0 +1,156 @@
1
+ /** @jsx jsx */
2
+ import { FC, ReactNode } from 'react';
3
+ import type { BasePrimitiveProps } from './types';
4
+ declare const asAllowlist: readonly [
5
+ "span",
6
+ "div",
7
+ "p",
8
+ "strong"
9
+ ];
10
+ type AsElement = (typeof asAllowlist)[number];
11
+ export interface TextProps extends BasePrimitiveProps {
12
+ /**
13
+ * HTML tag to be rendered. Defaults to `span`.
14
+ */
15
+ as?: AsElement;
16
+ /**
17
+ * Elements rendered within the Text element
18
+ */
19
+ children: ReactNode;
20
+ /**
21
+ * Text color
22
+ */
23
+ color?: TextColor;
24
+ /**
25
+ * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
26
+ */
27
+ id?: string;
28
+ /**
29
+ * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
30
+ */
31
+ fontSize?: FontSize;
32
+ /**
33
+ * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
34
+ */
35
+ fontWeight?: FontWeight;
36
+ /**
37
+ * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
38
+ */
39
+ lineHeight?: LineHeight;
40
+ /**
41
+ * Truncates text with an ellipsis when text overflows its parent container
42
+ * (i.e. `width` has been set on parent that is shorter than text length).
43
+ */
44
+ shouldTruncate?: boolean;
45
+ /**
46
+ * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
47
+ */
48
+ textAlign?: TextAlign;
49
+ /**
50
+ * Text transform https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
51
+ */
52
+ textTransform?: TextTransform;
53
+ /**
54
+ * Vertical align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
55
+ */
56
+ verticalAlign?: VerticalAlign;
57
+ }
58
+ type TextAlign = keyof typeof textAlignMap;
59
+ declare const textAlignMap: {
60
+ center: import("@emotion/react").SerializedStyles;
61
+ end: import("@emotion/react").SerializedStyles;
62
+ start: import("@emotion/react").SerializedStyles;
63
+ };
64
+ type TextTransform = keyof typeof textTransformMap;
65
+ declare const textTransformMap: {
66
+ none: import("@emotion/react").SerializedStyles;
67
+ lowercase: import("@emotion/react").SerializedStyles;
68
+ uppercase: import("@emotion/react").SerializedStyles;
69
+ };
70
+ type VerticalAlign = keyof typeof verticalAlignMap;
71
+ declare const verticalAlignMap: {
72
+ top: import("@emotion/react").SerializedStyles;
73
+ middle: import("@emotion/react").SerializedStyles;
74
+ bottom: import("@emotion/react").SerializedStyles;
75
+ };
76
+ /**
77
+ * __Text__
78
+ *
79
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
80
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
81
+ * It renders a `span` by default.
82
+ *
83
+ * @internal
84
+ */
85
+ declare const Text: FC<TextProps>;
86
+ export default Text;
87
+ /**
88
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
89
+ * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
90
+ * @codegenId typography
91
+ * @codegenCommand yarn codegen-styles
92
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
93
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
94
+ */
95
+ declare const fontSizeMap: {
96
+ 'size.050': import("@emotion/react").SerializedStyles;
97
+ 'size.075': import("@emotion/react").SerializedStyles;
98
+ 'size.100': import("@emotion/react").SerializedStyles;
99
+ 'size.200': import("@emotion/react").SerializedStyles;
100
+ 'size.300': import("@emotion/react").SerializedStyles;
101
+ 'size.400': import("@emotion/react").SerializedStyles;
102
+ 'size.500': import("@emotion/react").SerializedStyles;
103
+ 'size.600': import("@emotion/react").SerializedStyles;
104
+ };
105
+ export type FontSize = keyof typeof fontSizeMap;
106
+ declare const fontWeightMap: {
107
+ bold: import("@emotion/react").SerializedStyles;
108
+ medium: import("@emotion/react").SerializedStyles;
109
+ regular: import("@emotion/react").SerializedStyles;
110
+ semibold: import("@emotion/react").SerializedStyles;
111
+ };
112
+ export type FontWeight = keyof typeof fontWeightMap;
113
+ declare const fontFamilyMap: {
114
+ monospace: import("@emotion/react").SerializedStyles;
115
+ sans: import("@emotion/react").SerializedStyles;
116
+ };
117
+ export type FontFamily = keyof typeof fontFamilyMap;
118
+ declare const lineHeightMap: {
119
+ 'lineHeight.100': import("@emotion/react").SerializedStyles;
120
+ 'lineHeight.200': import("@emotion/react").SerializedStyles;
121
+ 'lineHeight.300': import("@emotion/react").SerializedStyles;
122
+ 'lineHeight.400': import("@emotion/react").SerializedStyles;
123
+ 'lineHeight.500': import("@emotion/react").SerializedStyles;
124
+ 'lineHeight.600': import("@emotion/react").SerializedStyles;
125
+ };
126
+ export type LineHeight = keyof typeof lineHeightMap;
127
+ /**
128
+ * @codegenEnd
129
+ */
130
+ /**
131
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
132
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
133
+ * @codegenId colors
134
+ * @codegenCommand yarn codegen-styles
135
+ * @codegenParams ["text"]
136
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
137
+ */
138
+ declare const textColorMap: {
139
+ readonly 'color.text': import("@emotion/react").SerializedStyles;
140
+ readonly disabled: import("@emotion/react").SerializedStyles;
141
+ readonly inverse: import("@emotion/react").SerializedStyles;
142
+ readonly selected: import("@emotion/react").SerializedStyles;
143
+ readonly brand: import("@emotion/react").SerializedStyles;
144
+ readonly danger: import("@emotion/react").SerializedStyles;
145
+ readonly warning: import("@emotion/react").SerializedStyles;
146
+ readonly 'warning.inverse': import("@emotion/react").SerializedStyles;
147
+ readonly success: import("@emotion/react").SerializedStyles;
148
+ readonly discovery: import("@emotion/react").SerializedStyles;
149
+ readonly information: import("@emotion/react").SerializedStyles;
150
+ readonly subtlest: import("@emotion/react").SerializedStyles;
151
+ readonly subtle: import("@emotion/react").SerializedStyles;
152
+ };
153
+ export type TextColor = keyof typeof textColorMap;
154
+ /**
155
+ * @codegenEnd
156
+ */
package/dist/types-ts4.5/components/types.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { CSSProperties } from 'react';
2
+ export interface BasePrimitiveProps {
3
+ /**
4
+ * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
5
+ */
6
+ testId?: string;
7
+ /**
8
+ * Inline styles to be applied to the primitive.
9
+ * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
10
+ * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
11
+ */
12
+ UNSAFE_style?: CSSProperties;
13
+ }
package/dist/types-ts4.5/constants.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const LAYERS: {
2
+ readonly card: 100;
3
+ readonly navigation: 200;
4
+ readonly dialog: 300;
5
+ readonly layer: 400;
6
+ readonly blanket: 500;
7
+ readonly modal: 510;
8
+ readonly flag: 600;
9
+ readonly spotlight: 700;
10
+ readonly tooltip: 800;
11
+ };
12
+ export type Layer = keyof typeof LAYERS;
package/dist/types-ts4.5/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export { default as UNSAFE_Box } from './components/box.partial';
2
+ export { default as UNSAFE_Text } from './components/text.partial';
3
+ export { default as UNSAFE_Inline } from './components/inline.partial';
4
+ export { default as UNSAFE_Stack } from './components/stack.partial';
5
+ export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
6
+ export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
7
+ export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
8
+ export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
9
+ export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';
package/dist/types-ts4.5/internal/color-map.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ *
4
+ * The color map is used to map a background color token to a matching text color that will meet contrast.
5
+ *
6
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
7
+ * @codegenCommand yarn codegen-styles
8
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
9
+ */
10
+ declare const _default: {
11
+ readonly 'neutral.bold': "inverse";
12
+ readonly 'neutral.bold.hovered': "inverse";
13
+ readonly 'neutral.bold.pressed': "inverse";
14
+ readonly 'selected.bold': "inverse";
15
+ readonly 'selected.bold.hovered': "inverse";
16
+ readonly 'selected.bold.pressed': "inverse";
17
+ readonly 'brand.bold': "inverse";
18
+ readonly 'brand.bold.hovered': "inverse";
19
+ readonly 'brand.bold.pressed': "inverse";
20
+ readonly 'danger.bold': "inverse";
21
+ readonly 'danger.bold.hovered': "inverse";
22
+ readonly 'danger.bold.pressed': "inverse";
23
+ readonly 'warning.bold': "warning.inverse";
24
+ readonly 'warning.bold.hovered': "warning.inverse";
25
+ readonly 'warning.bold.pressed': "warning.inverse";
26
+ readonly 'success.bold': "inverse";
27
+ readonly 'success.bold.hovered': "inverse";
28
+ readonly 'success.bold.pressed': "inverse";
29
+ readonly 'discovery.bold': "inverse";
30
+ readonly 'discovery.bold.hovered': "inverse";
31
+ readonly 'discovery.bold.pressed': "inverse";
32
+ readonly 'information.bold': "inverse";
33
+ readonly 'information.bold.hovered': "inverse";
34
+ readonly 'information.bold.pressed': "inverse";
35
+ };
36
+ export default _default;
package/dist/types-ts4.5/internal/role-to-element.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * Adapted straight from react-mui, with a small change.
4
+ * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js
5
+ */
6
+ declare const roleToElementType: {
7
+ readonly article: "article";
8
+ readonly banner: "header";
9
+ readonly blockquote: "blockquote";
10
+ readonly button: "button";
11
+ readonly code: "code";
12
+ readonly complementary: "aside";
13
+ readonly contentinfo: "footer";
14
+ readonly deletion: "del";
15
+ readonly emphasis: "em";
16
+ readonly figure: "figure";
17
+ readonly insertion: "ins";
18
+ readonly form: "form";
19
+ readonly link: "a";
20
+ readonly list: "ul";
21
+ readonly listitem: "li";
22
+ readonly main: "main";
23
+ readonly navigation: "nav";
24
+ readonly region: "section";
25
+ readonly strong: "strong";
26
+ readonly presentation: "div";
27
+ readonly group: "fieldset";
28
+ };
29
+ type RoleMap = typeof roleToElementType;
30
+ export type Role = keyof RoleMap;
31
+ export type SupportedElements = RoleMap[Role] & keyof JSX.IntrinsicElements;
32
+ export default roleToElementType;
package/dist/types-ts4.5/internal/spacing-scale.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ /**
2
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
+ *
4
+ * Internal codegen of the spacing scale values. Only used for internal examples.
5
+ *
6
+ * @codegen <<SignedSource::885d6c601dfa9fccaf33a7bd461ef59d>>
7
+ * @codegenCommand yarn codegen-styles
8
+ */
9
+ export declare const spacingScale: readonly [
10
+ "space.0",
11
+ "space.025",
12
+ "space.050",
13
+ "space.075",
14
+ "space.100",
15
+ "space.150",
16
+ "space.200",
17
+ "space.250",
18
+ "space.300",
19
+ "space.400",
20
+ "space.500",
21
+ "space.600",
22
+ "space.800",
23
+ "space.1000"
24
+ ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
5
5
  "license": "Apache-2.0",
6
6
  "atlassian": {