@atlaskit/primitives 0.4.1 → 0.4.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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/components/box.js +15 -11
- package/dist/cjs/components/internal/base-box.partial.js +3 -3
- package/dist/cjs/index.js +7 -0
- package/dist/cjs/internal/style-maps.js +130 -0
- package/dist/cjs/internal/xcss.js +110 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/box.js +14 -6
- package/dist/es2019/components/internal/base-box.partial.js +2 -2
- package/dist/es2019/index.js +1 -0
- package/dist/es2019/internal/style-maps.js +117 -0
- package/dist/es2019/internal/xcss.js +97 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/box.js +16 -8
- package/dist/esm/components/internal/base-box.partial.js +3 -3
- package/dist/esm/index.js +1 -0
- package/dist/esm/internal/style-maps.js +117 -0
- package/dist/esm/internal/xcss.js +100 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/components/box.d.ts +4 -3
- package/dist/types/components/internal/base-box.partial.d.ts +42 -3
- package/dist/types/components/types.d.ts +9 -14
- package/dist/types/index.d.ts +1 -0
- package/dist/types/internal/style-maps.d.ts +151 -0
- package/dist/types/internal/xcss.d.ts +22 -0
- package/package.json +3 -2
- package/report.api.md +200 -33
- package/tmp/api-report-tmp.d.ts +198 -8
package/tmp/api-report-tmp.d.ts
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
import { ComponentPropsWithoutRef } from 'react';
|
|
8
8
|
import { ComponentPropsWithRef } from 'react';
|
|
9
9
|
import type { CSSProperties } from 'react';
|
|
10
|
+
import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
|
|
11
|
+
import { CSSPseudos } from '@emotion/serialize';
|
|
10
12
|
import { ElementType } from 'react';
|
|
11
13
|
import { FC } from 'react';
|
|
12
14
|
import { ForwardRefExoticComponent } from 'react';
|
|
@@ -43,6 +45,9 @@ const alignSelfMap: {
|
|
|
43
45
|
// @public (undocumented)
|
|
44
46
|
type BackgroundColor = keyof typeof backgroundColorMap;
|
|
45
47
|
|
|
48
|
+
// @public (undocumented)
|
|
49
|
+
type BackgroundColor_2 = keyof typeof backgroundColorMap_2;
|
|
50
|
+
|
|
46
51
|
// @public (undocumented)
|
|
47
52
|
const backgroundColorMap: {
|
|
48
53
|
readonly 'accent.red.subtlest': SerializedStyles;
|
|
@@ -110,7 +115,37 @@ const backgroundColorMap: {
|
|
|
110
115
|
};
|
|
111
116
|
|
|
112
117
|
// @public (undocumented)
|
|
113
|
-
|
|
118
|
+
const backgroundColorMap_2: {
|
|
119
|
+
readonly disabled: "var(--ds-background-disabled)";
|
|
120
|
+
readonly input: "var(--ds-background-input)";
|
|
121
|
+
readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
|
|
122
|
+
readonly neutral: "var(--ds-background-neutral)";
|
|
123
|
+
readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
|
|
124
|
+
readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
|
|
125
|
+
readonly selected: "var(--ds-background-selected)";
|
|
126
|
+
readonly 'selected.bold': "var(--ds-background-selected-bold)";
|
|
127
|
+
readonly 'brand.bold': "var(--ds-background-brand-bold)";
|
|
128
|
+
readonly danger: "var(--ds-background-danger)";
|
|
129
|
+
readonly 'danger.bold': "var(--ds-background-danger-bold)";
|
|
130
|
+
readonly warning: "var(--ds-background-warning)";
|
|
131
|
+
readonly 'warning.bold': "var(--ds-background-warning-bold)";
|
|
132
|
+
readonly success: "var(--ds-background-success)";
|
|
133
|
+
readonly 'success.bold': "var(--ds-background-success-bold)";
|
|
134
|
+
readonly discovery: "var(--ds-background-discovery)";
|
|
135
|
+
readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
|
|
136
|
+
readonly information: "var(--ds-background-information)";
|
|
137
|
+
readonly 'information.bold': "var(--ds-background-information-bold)";
|
|
138
|
+
readonly 'color.blanket': "var(--ds-blanket)";
|
|
139
|
+
readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
|
|
140
|
+
readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
|
|
141
|
+
readonly 'elevation.surface': "var(--ds-surface)";
|
|
142
|
+
readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
|
|
143
|
+
readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
|
|
144
|
+
readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
// @public (undocumented)
|
|
148
|
+
type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
|
|
114
149
|
|
|
115
150
|
// @public (undocumented)
|
|
116
151
|
type BaseBoxPropsFoundation<T extends ElementType> = {
|
|
@@ -147,14 +182,17 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
|
|
|
147
182
|
};
|
|
148
183
|
|
|
149
184
|
// @public (undocumented)
|
|
150
|
-
|
|
185
|
+
type BasePrimitiveProps = {
|
|
151
186
|
testId?: string;
|
|
152
|
-
|
|
153
|
-
}
|
|
187
|
+
style?: CSSProperties;
|
|
188
|
+
};
|
|
154
189
|
|
|
155
190
|
// @public (undocumented)
|
|
156
191
|
type BorderColor = keyof typeof borderColorMap;
|
|
157
192
|
|
|
193
|
+
// @public (undocumented)
|
|
194
|
+
type BorderColor_2 = keyof typeof borderColorMap_2;
|
|
195
|
+
|
|
158
196
|
// @public
|
|
159
197
|
const borderColorMap: {
|
|
160
198
|
readonly 'color.border': SerializedStyles;
|
|
@@ -181,6 +219,23 @@ const borderColorMap: {
|
|
|
181
219
|
readonly bold: SerializedStyles;
|
|
182
220
|
};
|
|
183
221
|
|
|
222
|
+
// @public (undocumented)
|
|
223
|
+
const borderColorMap_2: {
|
|
224
|
+
readonly 'color.border': "var(--ds-border)";
|
|
225
|
+
readonly disabled: "var(--ds-border-disabled)";
|
|
226
|
+
readonly focused: "var(--ds-border-focused)";
|
|
227
|
+
readonly input: "var(--ds-border-input)";
|
|
228
|
+
readonly inverse: "var(--ds-border-inverse)";
|
|
229
|
+
readonly selected: "var(--ds-border-selected)";
|
|
230
|
+
readonly brand: "var(--ds-border-brand)";
|
|
231
|
+
readonly danger: "var(--ds-border-danger)";
|
|
232
|
+
readonly warning: "var(--ds-border-warning)";
|
|
233
|
+
readonly success: "var(--ds-border-success)";
|
|
234
|
+
readonly discovery: "var(--ds-border-discovery)";
|
|
235
|
+
readonly information: "var(--ds-border-information)";
|
|
236
|
+
readonly bold: "var(--ds-border-bold)";
|
|
237
|
+
};
|
|
238
|
+
|
|
184
239
|
// @public (undocumented)
|
|
185
240
|
type BorderRadius = keyof typeof borderRadiusMap;
|
|
186
241
|
|
|
@@ -205,6 +260,9 @@ const borderStyleMap: {
|
|
|
205
260
|
// @public (undocumented)
|
|
206
261
|
type BorderWidth = keyof typeof borderWidthMap;
|
|
207
262
|
|
|
263
|
+
// @public (undocumented)
|
|
264
|
+
type BorderWidth_2 = keyof typeof borderWidthMap_2;
|
|
265
|
+
|
|
208
266
|
// @public (undocumented)
|
|
209
267
|
const borderWidthMap: {
|
|
210
268
|
readonly 'size.0': "var(--ds-width-0)";
|
|
@@ -212,6 +270,13 @@ const borderWidthMap: {
|
|
|
212
270
|
readonly 'size.100': "var(--ds-width-100)";
|
|
213
271
|
};
|
|
214
272
|
|
|
273
|
+
// @public (undocumented)
|
|
274
|
+
const borderWidthMap_2: {
|
|
275
|
+
readonly 'size.0': "var(--ds-width-0)";
|
|
276
|
+
readonly 'size.050': "var(--ds-width-050)";
|
|
277
|
+
readonly 'size.100': "var(--ds-width-100)";
|
|
278
|
+
};
|
|
279
|
+
|
|
215
280
|
// @public
|
|
216
281
|
export const Box: BoxComponent;
|
|
217
282
|
|
|
@@ -222,7 +287,7 @@ const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "padd
|
|
|
222
287
|
type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
|
|
223
288
|
|
|
224
289
|
// @public (undocumented)
|
|
225
|
-
export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, '
|
|
290
|
+
export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
|
|
226
291
|
|
|
227
292
|
// @public (undocumented)
|
|
228
293
|
type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
|
|
@@ -230,8 +295,17 @@ type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
|
|
|
230
295
|
// @public
|
|
231
296
|
type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
|
|
232
297
|
|
|
233
|
-
// @public
|
|
234
|
-
|
|
298
|
+
// @public (undocumented)
|
|
299
|
+
const dimensionMap: {
|
|
300
|
+
readonly '100%': "100%";
|
|
301
|
+
readonly 'size.100': "16px";
|
|
302
|
+
readonly 'size.200': "24px";
|
|
303
|
+
readonly 'size.300': "32px";
|
|
304
|
+
readonly 'size.400': "40px";
|
|
305
|
+
readonly 'size.500': "48px";
|
|
306
|
+
readonly 'size.600': "96px";
|
|
307
|
+
readonly 'size.1000': "192px";
|
|
308
|
+
};
|
|
235
309
|
|
|
236
310
|
// @public (undocumented)
|
|
237
311
|
type Display = keyof typeof displayMap;
|
|
@@ -280,6 +354,9 @@ type Grow_2 = 'fill' | 'hug';
|
|
|
280
354
|
// @public (undocumented)
|
|
281
355
|
type Height = keyof typeof heightMap;
|
|
282
356
|
|
|
357
|
+
// @public (undocumented)
|
|
358
|
+
type Height_2 = keyof typeof dimensionMap;
|
|
359
|
+
|
|
283
360
|
// @public (undocumented)
|
|
284
361
|
const heightMap: {
|
|
285
362
|
readonly '100%': SerializedStyles;
|
|
@@ -328,6 +405,18 @@ const LAYERS: {
|
|
|
328
405
|
readonly tooltip: 800;
|
|
329
406
|
};
|
|
330
407
|
|
|
408
|
+
// @public (undocumented)
|
|
409
|
+
type MaxHeight = keyof typeof dimensionMap;
|
|
410
|
+
|
|
411
|
+
// @public (undocumented)
|
|
412
|
+
type MaxWidth = keyof typeof dimensionMap;
|
|
413
|
+
|
|
414
|
+
// @public (undocumented)
|
|
415
|
+
type MinHeight = keyof typeof dimensionMap;
|
|
416
|
+
|
|
417
|
+
// @public (undocumented)
|
|
418
|
+
type MinWidth = keyof typeof dimensionMap;
|
|
419
|
+
|
|
331
420
|
// @public (undocumented)
|
|
332
421
|
type Overflow = keyof typeof overflowMap;
|
|
333
422
|
|
|
@@ -358,6 +447,9 @@ const overflowMap: {
|
|
|
358
447
|
// @public (undocumented)
|
|
359
448
|
type Padding = keyof typeof paddingMap;
|
|
360
449
|
|
|
450
|
+
// @public (undocumented)
|
|
451
|
+
type Padding_2 = keyof typeof paddingMap_2;
|
|
452
|
+
|
|
361
453
|
// @public (undocumented)
|
|
362
454
|
type PaddingBlock = keyof typeof paddingMap;
|
|
363
455
|
|
|
@@ -394,6 +486,24 @@ const paddingMap: {
|
|
|
394
486
|
readonly 'space.1000': "var(--ds-space-1000)";
|
|
395
487
|
};
|
|
396
488
|
|
|
489
|
+
// @public (undocumented)
|
|
490
|
+
const paddingMap_2: {
|
|
491
|
+
readonly 'space.0': "var(--ds-space-0)";
|
|
492
|
+
readonly 'space.025': "var(--ds-space-025)";
|
|
493
|
+
readonly 'space.050': "var(--ds-space-050)";
|
|
494
|
+
readonly 'space.075': "var(--ds-space-075)";
|
|
495
|
+
readonly 'space.100': "var(--ds-space-100)";
|
|
496
|
+
readonly 'space.150': "var(--ds-space-150)";
|
|
497
|
+
readonly 'space.200': "var(--ds-space-200)";
|
|
498
|
+
readonly 'space.250': "var(--ds-space-250)";
|
|
499
|
+
readonly 'space.300': "var(--ds-space-300)";
|
|
500
|
+
readonly 'space.400': "var(--ds-space-400)";
|
|
501
|
+
readonly 'space.500': "var(--ds-space-500)";
|
|
502
|
+
readonly 'space.600': "var(--ds-space-600)";
|
|
503
|
+
readonly 'space.800': "var(--ds-space-800)";
|
|
504
|
+
readonly 'space.1000': "var(--ds-space-1000)";
|
|
505
|
+
};
|
|
506
|
+
|
|
397
507
|
// @public (undocumented)
|
|
398
508
|
type Position = keyof typeof positionMap;
|
|
399
509
|
|
|
@@ -416,7 +526,7 @@ type PublicBoxPropsBase = {
|
|
|
416
526
|
paddingInline?: PaddingInline;
|
|
417
527
|
paddingInlineStart?: PaddingInlineStart;
|
|
418
528
|
paddingInlineEnd?: PaddingInlineEnd;
|
|
419
|
-
|
|
529
|
+
xcss?: SafeCSS;
|
|
420
530
|
};
|
|
421
531
|
|
|
422
532
|
// @public
|
|
@@ -443,6 +553,12 @@ const rowSpaceMap: {
|
|
|
443
553
|
readonly '1000': SerializedStyles;
|
|
444
554
|
};
|
|
445
555
|
|
|
556
|
+
// @public (undocumented)
|
|
557
|
+
type SafeCSS = XCSS | XCSS[];
|
|
558
|
+
|
|
559
|
+
// @public (undocumented)
|
|
560
|
+
type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
|
|
561
|
+
|
|
446
562
|
// @public (undocumented)
|
|
447
563
|
type Shadow = keyof typeof shadowMap;
|
|
448
564
|
|
|
@@ -523,6 +639,9 @@ export interface StackProps<T extends ElementType = 'div'> {
|
|
|
523
639
|
// @public (undocumented)
|
|
524
640
|
type TextColor = keyof typeof textColorMap;
|
|
525
641
|
|
|
642
|
+
// @public (undocumented)
|
|
643
|
+
type TextColor_2 = keyof typeof textColorMap_2;
|
|
644
|
+
|
|
526
645
|
// @public (undocumented)
|
|
527
646
|
const textColorMap: {
|
|
528
647
|
readonly 'color.text': SerializedStyles;
|
|
@@ -558,9 +677,71 @@ const textColorMap: {
|
|
|
558
677
|
readonly subtle: SerializedStyles;
|
|
559
678
|
};
|
|
560
679
|
|
|
680
|
+
// @public (undocumented)
|
|
681
|
+
const textColorMap_2: {
|
|
682
|
+
readonly 'color.text': "var(--ds-text)";
|
|
683
|
+
readonly 'accent.red': "var(--ds-text-accent-red)";
|
|
684
|
+
readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
|
|
685
|
+
readonly 'accent.orange': "var(--ds-text-accent-orange)";
|
|
686
|
+
readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
|
|
687
|
+
readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
|
|
688
|
+
readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
|
|
689
|
+
readonly 'accent.green': "var(--ds-text-accent-green)";
|
|
690
|
+
readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
|
|
691
|
+
readonly 'accent.teal': "var(--ds-text-accent-teal)";
|
|
692
|
+
readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
|
|
693
|
+
readonly 'accent.blue': "var(--ds-text-accent-blue)";
|
|
694
|
+
readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
|
|
695
|
+
readonly 'accent.purple': "var(--ds-text-accent-purple)";
|
|
696
|
+
readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
|
|
697
|
+
readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
|
|
698
|
+
readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
|
|
699
|
+
readonly 'accent.gray': "var(--ds-text-accent-gray)";
|
|
700
|
+
readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
|
|
701
|
+
readonly disabled: "var(--ds-text-disabled)";
|
|
702
|
+
readonly inverse: "var(--ds-text-inverse)";
|
|
703
|
+
readonly selected: "var(--ds-text-selected)";
|
|
704
|
+
readonly brand: "var(--ds-text-brand)";
|
|
705
|
+
readonly danger: "var(--ds-text-danger)";
|
|
706
|
+
readonly warning: "var(--ds-text-warning)";
|
|
707
|
+
readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
|
|
708
|
+
readonly success: "var(--ds-text-success)";
|
|
709
|
+
readonly discovery: "var(--ds-text-discovery)";
|
|
710
|
+
readonly information: "var(--ds-text-information)";
|
|
711
|
+
readonly subtlest: "var(--ds-text-subtlest)";
|
|
712
|
+
readonly subtle: "var(--ds-text-subtle)";
|
|
713
|
+
};
|
|
714
|
+
|
|
715
|
+
// @public (undocumented)
|
|
716
|
+
type TokenisedProps = {
|
|
717
|
+
backgroundColor?: BackgroundColor_2;
|
|
718
|
+
borderColor?: BorderColor_2;
|
|
719
|
+
borderWidth?: BorderWidth_2;
|
|
720
|
+
color?: TextColor_2;
|
|
721
|
+
height?: Height_2;
|
|
722
|
+
minHeight?: MinHeight;
|
|
723
|
+
minWidth?: MinWidth;
|
|
724
|
+
maxHeight?: MaxHeight;
|
|
725
|
+
maxWidth?: MaxWidth;
|
|
726
|
+
padding?: Padding_2;
|
|
727
|
+
paddingBlock?: Padding_2;
|
|
728
|
+
paddingInline?: Padding_2;
|
|
729
|
+
paddingBlockStart?: Padding_2;
|
|
730
|
+
paddingBlockEnd?: Padding_2;
|
|
731
|
+
paddingInlineStart?: Padding_2;
|
|
732
|
+
paddingInlineEnd?: Padding_2;
|
|
733
|
+
width?: Width_2;
|
|
734
|
+
};
|
|
735
|
+
|
|
736
|
+
// @public (undocumented)
|
|
737
|
+
const uniqueSymbol: unique symbol;
|
|
738
|
+
|
|
561
739
|
// @public (undocumented)
|
|
562
740
|
type Width = keyof typeof widthMap;
|
|
563
741
|
|
|
742
|
+
// @public (undocumented)
|
|
743
|
+
type Width_2 = keyof typeof dimensionMap;
|
|
744
|
+
|
|
564
745
|
// @public
|
|
565
746
|
const widthMap: {
|
|
566
747
|
readonly '100%': SerializedStyles;
|
|
@@ -573,6 +754,15 @@ const widthMap: {
|
|
|
573
754
|
readonly 'size.1000': SerializedStyles;
|
|
574
755
|
};
|
|
575
756
|
|
|
757
|
+
// @public (undocumented)
|
|
758
|
+
type XCSS = ReturnType<typeof xcss>;
|
|
759
|
+
|
|
760
|
+
// @public (undocumented)
|
|
761
|
+
export const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
|
|
762
|
+
readonly symbol: typeof uniqueSymbol;
|
|
763
|
+
readonly styles: SerializedStyles;
|
|
764
|
+
};
|
|
765
|
+
|
|
576
766
|
// (No @packageDocumentation comment for this package)
|
|
577
767
|
|
|
578
768
|
```
|