@atlaskit/primitives 0.8.8 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 0.8.9
14
+
15
+ ### Patch Changes
16
+
17
+ - [`da1727baf77`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da1727baf77) - Allow non tokenised values to be passed through for tokenisable properties like `padding`. Adds type hinting for zIndex CSS property.
18
+
3
19
  ## 0.8.8
4
20
 
5
21
  ### Patch Changes
@@ -1,7 +1,38 @@
1
1
  ---
2
2
  title: Box
3
- description: Box primitive...
3
+ description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
4
4
  order: 0
5
5
  ---
6
6
 
7
- *Coming soon*
7
+ import BoxBasic from '../../examples/constellation/box/basic';
8
+ import BoxPadding from '../../examples/constellation/box/padding';
9
+ import BoxBackgroundColor from '../../examples/constellation/box/background-color';
10
+ import BoxXcss from '../../examples/constellation/box/xcss';
11
+
12
+ ## Basic
13
+
14
+ Box is a general-purpose container with controlled use of design tokens. Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
15
+
16
+ <Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
17
+
18
+ ## Padding
19
+
20
+ Padding props can be used to access spacing design token and control internal layout. The following example demonstrates how each prop works individually:
21
+
22
+ <Example Component={BoxPadding} packageName="@atlaskit/primitives/box" />
23
+
24
+ *Note*: The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). It might be less intuitive at first but they are adequate to properly support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
25
+
26
+ ## Background color
27
+
28
+ `Box` accepts a wide variety of background colors, referenced as semantic design tokens.
29
+
30
+ <Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
31
+
32
+ ## xCSS
33
+
34
+ Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value.
35
+
36
+ <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
37
+
38
+ For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.
@@ -40,7 +40,6 @@ var tokensMap = {
40
40
  insetInline: _styleMaps.insetMap,
41
41
  insetInlineEnd: _styleMaps.insetMap,
42
42
  insetInlineStart: _styleMaps.insetMap,
43
- layer: _styleMaps.layerMap,
44
43
  left: _styleMaps.dimensionMap,
45
44
  maxBlockSize: _styleMaps.dimensionMap,
46
45
  maxHeight: _styleMaps.dimensionMap,
@@ -68,7 +67,8 @@ var tokensMap = {
68
67
  right: _styleMaps.dimensionMap,
69
68
  rowGap: _styleMaps.spaceMap,
70
69
  top: _styleMaps.dimensionMap,
71
- width: _styleMaps.dimensionMap
70
+ width: _styleMaps.dimensionMap,
71
+ zIndex: _styleMaps.layerMap
72
72
  };
73
73
  var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
74
74
  var isSafeEnvToThrow = function isSafeEnvToThrow() {
@@ -117,11 +117,8 @@ var transformStyles = function transformStyles(styleObj) {
117
117
  if (!tokenValue) {
118
118
  var message = "Invalid token alias: ".concat(value);
119
119
  (0, _warnOnce.default)(message);
120
- if (isSafeEnvToThrow()) {
121
- throw new Error(message);
122
- }
123
120
  }
124
- styleObj[key] = tokenValue;
121
+ styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
125
122
  });
126
123
  return styleObj;
127
124
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.8",
3
+ "version": "0.9.0",
4
4
  "sideEffects": false
5
5
  }
@@ -29,7 +29,6 @@ const tokensMap = {
29
29
  insetInline: insetMap,
30
30
  insetInlineEnd: insetMap,
31
31
  insetInlineStart: insetMap,
32
- layer: layerMap,
33
32
  left: dimensionMap,
34
33
  maxBlockSize: dimensionMap,
35
34
  maxHeight: dimensionMap,
@@ -57,7 +56,8 @@ const tokensMap = {
57
56
  right: dimensionMap,
58
57
  rowGap: spaceMap,
59
58
  top: dimensionMap,
60
- width: dimensionMap
59
+ width: dimensionMap,
60
+ zIndex: layerMap
61
61
  };
62
62
  const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
63
63
  const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
@@ -101,11 +101,8 @@ const transformStyles = styleObj => {
101
101
  if (!tokenValue) {
102
102
  const message = `Invalid token alias: ${value}`;
103
103
  warnOnce(message);
104
- if (isSafeEnvToThrow()) {
105
- throw new Error(message);
106
- }
107
104
  }
108
- styleObj[key] = tokenValue;
105
+ styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
109
106
  });
110
107
  return styleObj;
111
108
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.8",
3
+ "version": "0.9.0",
4
4
  "sideEffects": false
5
5
  }
@@ -31,7 +31,6 @@ var tokensMap = {
31
31
  insetInline: insetMap,
32
32
  insetInlineEnd: insetMap,
33
33
  insetInlineStart: insetMap,
34
- layer: layerMap,
35
34
  left: dimensionMap,
36
35
  maxBlockSize: dimensionMap,
37
36
  maxHeight: dimensionMap,
@@ -59,7 +58,8 @@ var tokensMap = {
59
58
  right: dimensionMap,
60
59
  rowGap: spaceMap,
61
60
  top: dimensionMap,
62
- width: dimensionMap
61
+ width: dimensionMap,
62
+ zIndex: layerMap
63
63
  };
64
64
  var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
65
65
  var isSafeEnvToThrow = function isSafeEnvToThrow() {
@@ -108,11 +108,8 @@ var transformStyles = function transformStyles(styleObj) {
108
108
  if (!tokenValue) {
109
109
  var message = "Invalid token alias: ".concat(value);
110
110
  warnOnce(message);
111
- if (isSafeEnvToThrow()) {
112
- throw new Error(message);
113
- }
114
111
  }
115
- styleObj[key] = tokenValue;
112
+ styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
116
113
  });
117
114
  return styleObj;
118
115
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.8",
3
+ "version": "0.9.0",
4
4
  "sideEffects": false
5
5
  }
@@ -449,7 +449,6 @@ export declare type TokenisedProps = {
449
449
  insetInline?: InsetInline;
450
450
  insetInlineEnd?: InsetInlineEnd;
451
451
  insetInlineStart?: InsetInlineStart;
452
- layer?: Layer;
453
452
  left?: Left;
454
453
  maxBlockSize?: MaxBlockSize;
455
454
  maxHeight?: MaxHeight;
@@ -474,9 +473,10 @@ export declare type TokenisedProps = {
474
473
  rowGap?: RowGap;
475
474
  top?: Top;
476
475
  width?: Width;
476
+ zIndex?: Layer;
477
477
  };
478
478
  declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
479
- declare type SpacingProperty = typeof spacingProperties[number];
479
+ declare type SpacingProperty = (typeof spacingProperties)[number];
480
480
  declare type SpacingToken = keyof typeof paddingMap;
481
481
  declare type BackgroundColorToken = keyof typeof backgroundColorMap;
482
482
  declare type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.8.8",
3
+ "version": "0.9.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,6 +29,15 @@
29
29
  "type": "alpha"
30
30
  }
31
31
  },
32
+ {
33
+ "title": "Box",
34
+ "folder": "box",
35
+ "slug": "primitives/box",
36
+ "id": "@atlaskit/primitives/box",
37
+ "status": {
38
+ "type": "alpha"
39
+ }
40
+ },
32
41
  {
33
42
  "title": "Inline",
34
43
  "folder": "inline",
@@ -67,8 +76,8 @@
67
76
  "./responsive": "./src/helpers/responsive/index.tsx"
68
77
  },
69
78
  "dependencies": {
70
- "@atlaskit/ds-lib": "^2.1.2",
71
- "@atlaskit/tokens": "^1.2.0",
79
+ "@atlaskit/ds-lib": "^2.2.0",
80
+ "@atlaskit/tokens": "^1.3.0",
72
81
  "@babel/runtime": "^7.0.0",
73
82
  "@emotion/react": "^11.7.1",
74
83
  "@emotion/serialize": "^1.1.0"
@@ -87,18 +96,21 @@
87
96
  "@atlaskit/heading": "*",
88
97
  "@atlaskit/icon": "*",
89
98
  "@atlaskit/icon-object": "*",
99
+ "@atlaskit/logo": "*",
90
100
  "@atlaskit/lozenge": "*",
91
- "@atlaskit/radio": "^5.4.9",
101
+ "@atlaskit/radio": "^5.5.0",
102
+ "@atlaskit/range": "^7.1.0",
92
103
  "@atlaskit/ssr": "*",
93
104
  "@atlaskit/tag": "*",
94
105
  "@atlaskit/theme": "*",
95
106
  "@atlaskit/visual-regression": "*",
96
107
  "@atlaskit/webdriver-runner": "*",
97
108
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
98
- "@atlassian/codegen": "^0.0.1",
109
+ "@atlassian/codegen": "^0.1.0",
110
+ "@atlassian/gemini-visual-regression": "^0.0.6",
99
111
  "@testing-library/react": "^12.1.5",
100
112
  "csstype": "^3.1.0",
101
- "prettier": "^2.7.0",
113
+ "prettier": "^2.8.0",
102
114
  "react-dom": "^16.8.0",
103
115
  "ts-node": "^10.9.1",
104
116
  "typescript": "4.5.5",
package/report.api.md CHANGED
@@ -940,7 +940,6 @@ type TokenisedProps = {
940
940
  insetInline?: InsetInline;
941
941
  insetInlineEnd?: InsetInlineEnd;
942
942
  insetInlineStart?: InsetInlineStart;
943
- layer?: Layer;
944
943
  left?: Left;
945
944
  maxBlockSize?: MaxBlockSize;
946
945
  maxHeight?: MaxHeight;
@@ -965,6 +964,7 @@ type TokenisedProps = {
965
964
  rowGap?: RowGap;
966
965
  top?: Top;
967
966
  width?: Width;
967
+ zIndex?: Layer;
968
968
  };
969
969
 
970
970
  // @public (undocumented)
@@ -1,673 +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 { ComponentPropsWithRef } from 'react';
11
- import type * as CSS_2 from 'csstype';
12
- import type { CSSProperties } from 'react';
13
- import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
14
- import { ElementType } from 'react';
15
- import { FC } from 'react';
16
- import { ForwardRefExoticComponent } from 'react';
17
- import { JSXElementConstructor } from 'react';
18
- import { MemoExoticComponent } from 'react';
19
- import { ReactElement } from 'react';
20
- import { ReactNode } from 'react';
21
- import { RefAttributes } from 'react';
22
- import { SerializedStyles } from '@emotion/serialize';
23
-
24
- // @public (undocumented)
25
- type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
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 AlignSelf = keyof typeof alignSelfMap;
38
-
39
- // @public
40
- const alignSelfMap: {
41
- readonly center: "center";
42
- readonly start: "start";
43
- readonly stretch: "stretch";
44
- readonly end: "end";
45
- readonly baseline: "baseline";
46
- };
47
-
48
- // @public (undocumented)
49
- type AllowedBoxStyles = keyof SafeCSSObject;
50
-
51
- // @public (undocumented)
52
- type AllowedInlineStyles = 'backgroundColor' | 'padding';
53
-
54
- // @public (undocumented)
55
- type BackgroundColor = keyof typeof backgroundColorMap;
56
-
57
- // @public (undocumented)
58
- const backgroundColorMap: {
59
- readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
60
- readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
61
- readonly 'accent.red.subtle': "var(--ds-background-accent-red-subtle)";
62
- readonly 'accent.red.bolder': "var(--ds-background-accent-red-bolder)";
63
- readonly 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
64
- readonly 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
65
- readonly 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
66
- readonly 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
67
- readonly 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
68
- readonly 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
69
- readonly 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
70
- readonly 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
71
- readonly 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
72
- readonly 'accent.green.subtler': "var(--ds-background-accent-green-subtler)";
73
- readonly 'accent.green.subtle': "var(--ds-background-accent-green-subtle)";
74
- readonly 'accent.green.bolder': "var(--ds-background-accent-green-bolder)";
75
- readonly 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
76
- readonly 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
77
- readonly 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
78
- readonly 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
79
- readonly 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
80
- readonly 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
81
- readonly 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
82
- readonly 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
83
- readonly 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
84
- readonly 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
85
- readonly 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
86
- readonly 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
87
- readonly 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
88
- readonly 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
89
- readonly 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
90
- readonly 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
91
- readonly 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
92
- readonly 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
93
- readonly 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
94
- readonly 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
95
- readonly disabled: "var(--ds-background-disabled)";
96
- readonly input: "var(--ds-background-input)";
97
- readonly 'input.hovered': "var(--ds-background-input-hovered)";
98
- readonly 'input.pressed': "var(--ds-background-input-pressed)";
99
- readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
100
- readonly 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
101
- readonly 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
102
- readonly neutral: "var(--ds-background-neutral)";
103
- readonly 'neutral.hovered': "var(--ds-background-neutral-hovered)";
104
- readonly 'neutral.pressed': "var(--ds-background-neutral-pressed)";
105
- readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
106
- readonly 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
107
- readonly 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
108
- readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
109
- readonly 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
110
- readonly 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
111
- readonly selected: "var(--ds-background-selected)";
112
- readonly 'selected.hovered': "var(--ds-background-selected-hovered)";
113
- readonly 'selected.pressed': "var(--ds-background-selected-pressed)";
114
- readonly 'selected.bold': "var(--ds-background-selected-bold)";
115
- readonly 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
116
- readonly 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
117
- readonly 'brand.bold': "var(--ds-background-brand-bold)";
118
- readonly 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
119
- readonly 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
120
- readonly danger: "var(--ds-background-danger)";
121
- readonly 'danger.hovered': "var(--ds-background-danger-hovered)";
122
- readonly 'danger.pressed': "var(--ds-background-danger-pressed)";
123
- readonly 'danger.bold': "var(--ds-background-danger-bold)";
124
- readonly 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
125
- readonly 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
126
- readonly warning: "var(--ds-background-warning)";
127
- readonly 'warning.hovered': "var(--ds-background-warning-hovered)";
128
- readonly 'warning.pressed': "var(--ds-background-warning-pressed)";
129
- readonly 'warning.bold': "var(--ds-background-warning-bold)";
130
- readonly 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
131
- readonly 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
132
- readonly success: "var(--ds-background-success)";
133
- readonly 'success.hovered': "var(--ds-background-success-hovered)";
134
- readonly 'success.pressed': "var(--ds-background-success-pressed)";
135
- readonly 'success.bold': "var(--ds-background-success-bold)";
136
- readonly 'success.bold.hovered': "var(--ds-background-success-bold-hovered)";
137
- readonly 'success.bold.pressed': "var(--ds-background-success-bold-pressed)";
138
- readonly discovery: "var(--ds-background-discovery)";
139
- readonly 'discovery.hovered': "var(--ds-background-discovery-hovered)";
140
- readonly 'discovery.pressed': "var(--ds-background-discovery-pressed)";
141
- readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
142
- readonly 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
143
- readonly 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
144
- readonly information: "var(--ds-background-information)";
145
- readonly 'information.hovered': "var(--ds-background-information-hovered)";
146
- readonly 'information.pressed': "var(--ds-background-information-pressed)";
147
- readonly 'information.bold': "var(--ds-background-information-bold)";
148
- readonly 'information.bold.hovered': "var(--ds-background-information-bold-hovered)";
149
- readonly 'information.bold.pressed': "var(--ds-background-information-bold-pressed)";
150
- readonly 'color.blanket': "var(--ds-blanket)";
151
- readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
152
- readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
153
- readonly 'elevation.surface': "var(--ds-surface)";
154
- readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
155
- readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
156
- readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
157
- readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
158
- readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
159
- readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
160
- readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
161
- readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
162
- readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
163
- };
164
-
165
- // @public (undocumented)
166
- type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
167
-
168
- // @public (undocumented)
169
- type BaseBoxPropsFoundation<T extends ElementType> = {
170
- as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
171
- className?: string;
172
- children?: ReactNode;
173
- backgroundColor?: BackgroundColor;
174
- padding?: Padding;
175
- paddingBlock?: PaddingBlock;
176
- paddingBlockStart?: PaddingBlockStart;
177
- paddingBlockEnd?: PaddingBlockEnd;
178
- paddingInline?: PaddingInline;
179
- paddingInlineStart?: PaddingInlineStart;
180
- paddingInlineEnd?: PaddingInlineEnd;
181
- ref?: ComponentPropsWithRef<T>['ref'];
182
- };
183
-
184
- // @public (undocumented)
185
- type BasePrimitiveProps = {
186
- testId?: string;
187
- style?: CSSProperties;
188
- };
189
-
190
- // @public (undocumented)
191
- type BlockSize = keyof typeof dimensionMap;
192
-
193
- // @public (undocumented)
194
- type BorderColor = keyof typeof borderColorMap;
195
-
196
- // @public
197
- const borderColorMap: {
198
- readonly 'color.border': "var(--ds-border)";
199
- readonly 'accent.red': "var(--ds-border-accent-red)";
200
- readonly 'accent.orange': "var(--ds-border-accent-orange)";
201
- readonly 'accent.yellow': "var(--ds-border-accent-yellow)";
202
- readonly 'accent.green': "var(--ds-border-accent-green)";
203
- readonly 'accent.teal': "var(--ds-border-accent-teal)";
204
- readonly 'accent.blue': "var(--ds-border-accent-blue)";
205
- readonly 'accent.purple': "var(--ds-border-accent-purple)";
206
- readonly 'accent.magenta': "var(--ds-border-accent-magenta)";
207
- readonly 'accent.gray': "var(--ds-border-accent-gray)";
208
- readonly disabled: "var(--ds-border-disabled)";
209
- readonly focused: "var(--ds-border-focused)";
210
- readonly input: "var(--ds-border-input)";
211
- readonly inverse: "var(--ds-border-inverse)";
212
- readonly selected: "var(--ds-border-selected)";
213
- readonly brand: "var(--ds-border-brand)";
214
- readonly danger: "var(--ds-border-danger)";
215
- readonly warning: "var(--ds-border-warning)";
216
- readonly success: "var(--ds-border-success)";
217
- readonly discovery: "var(--ds-border-discovery)";
218
- readonly information: "var(--ds-border-information)";
219
- readonly bold: "var(--ds-border-bold)";
220
- };
221
-
222
- // @public (undocumented)
223
- type BorderRadius = keyof typeof borderRadiusMap;
224
-
225
- // @public (undocumented)
226
- const borderRadiusMap: {
227
- readonly 'radius.050': "var(--ds-radius-050)";
228
- readonly 'radius.100': "var(--ds-radius-100)";
229
- readonly 'radius.200': "var(--ds-radius-200)";
230
- readonly 'radius.300': "var(--ds-radius-300)";
231
- readonly 'radius.400': "var(--ds-radius-400)";
232
- readonly 'radius.round': "var(--ds-radius-round)";
233
- };
234
-
235
- // @public (undocumented)
236
- type BorderStyle = keyof typeof borderStyleMap;
237
-
238
- // @public (undocumented)
239
- const borderStyleMap: {
240
- readonly none: "none";
241
- readonly solid: "solid";
242
- };
243
-
244
- // @public (undocumented)
245
- type BorderWidth = keyof typeof borderWidthMap;
246
-
247
- // @public
248
- const borderWidthMap: {
249
- readonly 'width.0': "var(--ds-width-0)";
250
- readonly 'width.050': "var(--ds-width-050)";
251
- readonly 'width.100': "var(--ds-width-100)";
252
- };
253
-
254
- // @public (undocumented)
255
- type Bottom = keyof typeof dimensionMap;
256
-
257
- // @public
258
- export const Box: BoxComponent;
259
-
260
- // @public (undocumented)
261
- type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
262
-
263
- // @public (undocumented)
264
- export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
265
-
266
- // @public (undocumented)
267
- type BoxStyles = SerializedStyles & {
268
- [boxTag]: true;
269
- };
270
-
271
- // @public (undocumented)
272
- const boxTag: unique symbol;
273
-
274
- // @public (undocumented)
275
- type BoxXCSS = {
276
- readonly symbol: typeof uniqueSymbol;
277
- readonly styles: BoxStyles;
278
- };
279
-
280
- // @public (undocumented)
281
- type ColumnGap = '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';
282
-
283
- // @public (undocumented)
284
- type CSSPseudos = {
285
- [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
286
- };
287
-
288
- // @public
289
- const dimensionMap: {
290
- readonly '100%': "100%";
291
- readonly 'size.100': "16px";
292
- readonly 'size.200': "24px";
293
- readonly 'size.300': "32px";
294
- readonly 'size.400': "40px";
295
- readonly 'size.500': "48px";
296
- readonly 'size.600': "96px";
297
- readonly 'size.1000': "192px";
298
- };
299
-
300
- // @public (undocumented)
301
- type Display = keyof typeof displayMap;
302
-
303
- // @public (undocumented)
304
- const displayMap: {
305
- readonly flex: "flex";
306
- readonly block: "block";
307
- readonly inline: "inline";
308
- readonly inlineBlock: "inline-block";
309
- readonly inlineFlex: "inline-flex";
310
- };
311
-
312
- // @public (undocumented)
313
- type Flex = keyof typeof flexMap;
314
-
315
- // @public (undocumented)
316
- type FlexDirection = keyof typeof flexDirectionMap;
317
-
318
- // @public (undocumented)
319
- const flexDirectionMap: {
320
- readonly row: "row";
321
- readonly column: "column";
322
- };
323
-
324
- // @public (undocumented)
325
- type FlexGrow = keyof typeof flexGrowMap;
326
-
327
- // @public (undocumented)
328
- const flexGrowMap: {
329
- readonly '0': 0;
330
- readonly '1': 1;
331
- };
332
-
333
- // @public (undocumented)
334
- const flexMap: {
335
- readonly '1': 1;
336
- };
337
-
338
- // @public (undocumented)
339
- type FlexShrink = keyof typeof flexShrinkMap;
340
-
341
- // @public (undocumented)
342
- const flexShrinkMap: {
343
- readonly '0': 0;
344
- readonly '1': 1;
345
- };
346
-
347
- // @public (undocumented)
348
- type 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';
349
-
350
- // @public (undocumented)
351
- type Grow = 'fill' | 'hug';
352
-
353
- // @public (undocumented)
354
- type Grow_2 = 'fill' | 'hug';
355
-
356
- // @public (undocumented)
357
- type Height = keyof typeof dimensionMap;
358
-
359
- // @public
360
- export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
361
-
362
- // @public (undocumented)
363
- export interface InlineProps<T extends ElementType = 'div'> {
364
- alignBlock?: AlignBlock;
365
- alignInline?: AlignInline;
366
- as?: 'div' | 'ol' | 'span' | 'ul';
367
- children: ReactNode;
368
- grow?: Grow;
369
- ref?: React.ComponentPropsWithRef<T>['ref'];
370
- rowSpace?: RowGap;
371
- separator?: string;
372
- shouldWrap?: boolean;
373
- space?: Gap;
374
- spread?: Spread;
375
- testId?: string;
376
- }
377
-
378
- // @public (undocumented)
379
- type InlineSize = keyof typeof dimensionMap;
380
-
381
- // @public (undocumented)
382
- type InlineStyles = SerializedStyles & {
383
- [inlineTag]: true;
384
- };
385
-
386
- // @public (undocumented)
387
- const inlineTag: unique symbol;
388
-
389
- // @public (undocumented)
390
- type Inset = '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';
391
-
392
- // @public (undocumented)
393
- type InsetBlock = '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';
394
-
395
- // @public (undocumented)
396
- type InsetBlockEnd = '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';
397
-
398
- // @public (undocumented)
399
- type InsetBlockStart = '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';
400
-
401
- // @public (undocumented)
402
- type InsetInline = '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';
403
-
404
- // @public (undocumented)
405
- type InsetInlineEnd = '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';
406
-
407
- // @public (undocumented)
408
- type InsetInlineStart = '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';
409
-
410
- // @public (undocumented)
411
- type Layer = keyof typeof layerMap;
412
-
413
- // @public (undocumented)
414
- const layerMap: {
415
- readonly card: 100;
416
- readonly navigation: 200;
417
- readonly dialog: 300;
418
- readonly layer: 400;
419
- readonly blanket: 500;
420
- readonly modal: 510;
421
- readonly flag: 600;
422
- readonly spotlight: 700;
423
- readonly tooltip: 800;
424
- };
425
-
426
- // @public (undocumented)
427
- type Left = keyof typeof dimensionMap;
428
-
429
- // @public (undocumented)
430
- type MaxBlockSize = keyof typeof dimensionMap;
431
-
432
- // @public (undocumented)
433
- type MaxHeight = keyof typeof dimensionMap;
434
-
435
- // @public (undocumented)
436
- type MaxInlineSize = keyof typeof dimensionMap;
437
-
438
- // @public (undocumented)
439
- type MaxWidth = keyof typeof dimensionMap;
440
-
441
- // @public (undocumented)
442
- type MinBlockSize = keyof typeof dimensionMap;
443
-
444
- // @public (undocumented)
445
- type MinHeight = keyof typeof dimensionMap;
446
-
447
- // @public (undocumented)
448
- type MinInlineSize = keyof typeof dimensionMap;
449
-
450
- // @public (undocumented)
451
- type MinWidth = keyof typeof dimensionMap;
452
-
453
- // @public (undocumented)
454
- type Overflow = keyof typeof overflowMap;
455
-
456
- // @public (undocumented)
457
- type OverflowBlock = keyof typeof overflowBlockMap;
458
-
459
- // @public (undocumented)
460
- const overflowBlockMap: {
461
- readonly auto: "auto";
462
- readonly hidden: "hidden";
463
- };
464
-
465
- // @public (undocumented)
466
- type OverflowInline = keyof typeof overflowInlineMap;
467
-
468
- // @public (undocumented)
469
- const overflowInlineMap: {
470
- readonly auto: "auto";
471
- readonly hidden: "hidden";
472
- };
473
-
474
- // @public (undocumented)
475
- const overflowMap: {
476
- readonly auto: "auto";
477
- readonly hidden: "hidden";
478
- };
479
-
480
- // @public (undocumented)
481
- type Padding = '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';
482
-
483
- // @public (undocumented)
484
- type PaddingBlock = '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';
485
-
486
- // @public (undocumented)
487
- type PaddingBlockEnd = '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';
488
-
489
- // @public (undocumented)
490
- type PaddingBlockStart = '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';
491
-
492
- // @public (undocumented)
493
- type PaddingInline = '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';
494
-
495
- // @public (undocumented)
496
- type PaddingInlineEnd = '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';
497
-
498
- // @public (undocumented)
499
- type PaddingInlineStart = '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';
500
-
501
- // @public (undocumented)
502
- type Position = keyof typeof positionMap;
503
-
504
- // @public (undocumented)
505
- const positionMap: {
506
- readonly absolute: "absolute";
507
- readonly fixed: "fixed";
508
- readonly relative: "relative";
509
- readonly static: "static";
510
- };
511
-
512
- // @public (undocumented)
513
- type PublicBoxPropsBase = {
514
- xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
515
- };
516
-
517
- // @public (undocumented)
518
- type Right = keyof typeof dimensionMap;
519
-
520
- // @public (undocumented)
521
- type 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';
522
-
523
- // @public (undocumented)
524
- type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
525
-
526
- // @public (undocumented)
527
- type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
528
-
529
- // @public (undocumented)
530
- type Shadow = keyof typeof shadowMap;
531
-
532
- // @public (undocumented)
533
- const shadowMap: {
534
- readonly overflow: "var(--ds-shadow-overflow)";
535
- readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
536
- readonly 'overflow.spread': "var(--ds-shadow-overflow-spread)";
537
- readonly overlay: "var(--ds-shadow-overlay)";
538
- readonly raised: "var(--ds-shadow-raised)";
539
- };
540
-
541
- // @public (undocumented)
542
- type Spread = 'space-between';
543
-
544
- // @public (undocumented)
545
- type Spread_2 = 'space-between';
546
-
547
- // @public
548
- export const Stack: MemoExoticComponent<ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
549
-
550
- // @public (undocumented)
551
- export interface StackProps<T extends ElementType = 'div'> {
552
- alignBlock?: AlignBlock_2;
553
- alignInline?: AlignInline_2;
554
- as?: 'div' | 'ol' | 'span' | 'ul';
555
- children: ReactNode;
556
- grow?: Grow_2;
557
- ref?: React.ComponentPropsWithRef<T>['ref'];
558
- space?: Gap;
559
- spread?: Spread_2;
560
- testId?: string;
561
- }
562
-
563
- // @public (undocumented)
564
- type TextColor = keyof typeof textColorMap;
565
-
566
- // @public (undocumented)
567
- const textColorMap: {
568
- readonly 'color.text': "var(--ds-text)";
569
- readonly 'accent.red': "var(--ds-text-accent-red)";
570
- readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
571
- readonly 'accent.orange': "var(--ds-text-accent-orange)";
572
- readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
573
- readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
574
- readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
575
- readonly 'accent.green': "var(--ds-text-accent-green)";
576
- readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
577
- readonly 'accent.teal': "var(--ds-text-accent-teal)";
578
- readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
579
- readonly 'accent.blue': "var(--ds-text-accent-blue)";
580
- readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
581
- readonly 'accent.purple': "var(--ds-text-accent-purple)";
582
- readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
583
- readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
584
- readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
585
- readonly 'accent.gray': "var(--ds-text-accent-gray)";
586
- readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
587
- readonly disabled: "var(--ds-text-disabled)";
588
- readonly inverse: "var(--ds-text-inverse)";
589
- readonly selected: "var(--ds-text-selected)";
590
- readonly brand: "var(--ds-text-brand)";
591
- readonly danger: "var(--ds-text-danger)";
592
- readonly warning: "var(--ds-text-warning)";
593
- readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
594
- readonly success: "var(--ds-text-success)";
595
- readonly discovery: "var(--ds-text-discovery)";
596
- readonly information: "var(--ds-text-information)";
597
- readonly subtlest: "var(--ds-text-subtlest)";
598
- readonly subtle: "var(--ds-text-subtle)";
599
- };
600
-
601
- // @public (undocumented)
602
- type TokenisedProps = {
603
- alignSelf?: AlignSelf;
604
- backgroundColor?: BackgroundColor;
605
- blockSize?: BlockSize;
606
- borderColor?: BorderColor;
607
- borderRadius?: BorderRadius;
608
- borderStyle?: BorderStyle;
609
- borderWidth?: BorderWidth;
610
- bottom?: Bottom;
611
- boxShadow?: Shadow;
612
- color?: TextColor;
613
- columnGap?: ColumnGap;
614
- display?: Display;
615
- flex?: Flex;
616
- flexDirection?: FlexDirection;
617
- flexGrow?: FlexGrow;
618
- flexShrink?: FlexShrink;
619
- gap?: Gap;
620
- height?: Height;
621
- inlineSize?: InlineSize;
622
- inset?: Inset;
623
- insetBlock?: InsetBlock;
624
- insetBlockEnd?: InsetBlockEnd;
625
- insetBlockStart?: InsetBlockStart;
626
- insetInline?: InsetInline;
627
- insetInlineEnd?: InsetInlineEnd;
628
- insetInlineStart?: InsetInlineStart;
629
- layer?: Layer;
630
- left?: Left;
631
- maxBlockSize?: MaxBlockSize;
632
- maxHeight?: MaxHeight;
633
- maxInlineSize?: MaxInlineSize;
634
- maxWidth?: MaxWidth;
635
- minBlockSize?: MinBlockSize;
636
- minHeight?: MinHeight;
637
- minInlineSize?: MinInlineSize;
638
- minWidth?: MinWidth;
639
- overflow?: Overflow;
640
- overflowBlock?: OverflowBlock;
641
- overflowInline?: OverflowInline;
642
- padding?: Padding;
643
- paddingBlock?: PaddingBlock;
644
- paddingBlockEnd?: PaddingBlockEnd;
645
- paddingBlockStart?: PaddingBlockStart;
646
- paddingInline?: PaddingInline;
647
- paddingInlineEnd?: PaddingInlineEnd;
648
- paddingInlineStart?: PaddingInlineStart;
649
- position?: Position;
650
- right?: Right;
651
- rowGap?: RowGap;
652
- top?: Top;
653
- width?: Width;
654
- };
655
-
656
- // @public (undocumented)
657
- type Top = keyof typeof dimensionMap;
658
-
659
- // @public (undocumented)
660
- const uniqueSymbol: unique symbol;
661
-
662
- // @public (undocumented)
663
- type Width = keyof typeof dimensionMap;
664
-
665
- // @public (undocumented)
666
- 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<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
667
- readonly symbol: typeof uniqueSymbol;
668
- readonly styles: 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"> & RefAttributes<any>>> ? InlineStyles : never;
669
- };
670
-
671
- // (No @packageDocumentation comment for this package)
672
-
673
- ```