@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.
@@ -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
- type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
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
- interface BasePrimitiveProps {
185
+ type BasePrimitiveProps = {
151
186
  testId?: string;
152
- UNSAFE_style?: CSSProperties;
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>, 'UNSAFE_style' | 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
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
- type CustomStyles = Pick<CSSProperties, 'flex' | 'flexBasis' | 'float' | 'height' | 'insetBlockStart' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'width'>;
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
- customStyles?: CustomStyles;
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
  ```