@atlaskit/primitives 0.8.2 → 0.8.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.8.4
+
+### Patch Changes
+
+- [`7127e85932a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7127e85932a) - Update codegen to explicitly list spacing prop values as string unions for compatibility with extract-react-types.
+
+## 0.8.3
+
+### Patch Changes
+
+- [`64e7c72773e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64e7c72773e) - Update type to allow typehints for CSS color property.
+
 ## 0.8.2
 
 ### Patch Changes

package/constellation/inline/code.mdx

@@ -0,0 +1,11 @@
+---
+title: Inline
+description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+order: 1
+---
+
+import InlineProps from '!!extract-react-types-loader!../../src/components/internal/extract-react-types/inline-props'
+
+## Props
+
+<PropsTable heading="" props={InlineProps} />

package/constellation/inline/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: Inline is an abstraction to lay-out a group of elements horizontally.
+description: Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
 order: 0
 ---
 
@@ -18,7 +18,7 @@ import InlineAs from '../../examples/constellation/inline/as';
 ## Basic
 
 Inline is an abstraction to efficiently lay-out a group of elements horizontally.  
-Use the given props to configure display behaviour using scalable recommendations of the Atlassian Design System.
+Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />
 
@@ -36,8 +36,8 @@ For a different space value between rows use the `rowSpace` prop, as shown in th
 
 ## Alignment
 
-To control the alignment of items you can use the `alignBlock` and `alignInline` props which, respectively, control
-aligment in the block and inline directions.
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
+alignment in the block and inline directions respectively.
 
 ### Block alignment
 
@@ -61,13 +61,13 @@ When the number of items goes beyond the available space `shouldWrap` can be use
 
 ## Separator
 
-For logically related elements it's possible to specify an arbitrary `separator` value.
+For logically related elements it's possible to specify a `separator` value.
 
 <Example Component={InlineSeparator} packageName="@atlaskit/primitives/inline" />
 
 ## Width control
 
-By default an `Inline` will have its width influenced by the context where it appears.  
+By default an `Inline` will have its width influenced by the context where it appears.
 
 To control that the `grow` prop can be used with the values:
 

package/constellation/overview/examples.mdx

@@ -1,9 +1,7 @@
 ---
 title: Overview
-description: Overview of primitives..
+description: Coming soon.
 order: 0
 ---
 
-## Default
-
-This is placeholder text.
+*Coming soon.*

package/constellation/stack/code.mdx

@@ -1,9 +1,11 @@
 ---
-title: Box
-description: A stack is...
+title: Stack
+description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
 order: 1
 ---
 
+import StackProps from '!!extract-react-types-loader!../../src/components/internal/extract-react-types/stack-props'
+
 ## Props
 
-*Coming soon*
+<PropsTable heading="" props={StackProps} />

package/constellation/stack/examples.mdx

@@ -1,7 +1,62 @@
 ---
 title: Stack
-description: Stack primitive...
+description: Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
 order: 0
 ---
 
-*Coming soon*
+import StackBasic from '../../examples/constellation/stack/basic';
+import StackSpaceBasic from '../../examples/constellation/stack/space-basic';
+import StackAlignBlock from '../../examples/constellation/stack/align-block';
+import StackAlignInline from '../../examples/constellation/stack/align-inline';
+import StackSpread from '../../examples/constellation/stack/spread';
+import StackGrow from '../../examples/constellation/stack/grow';
+import StackAs from '../../examples/constellation/stack/as';
+
+## Basic
+
+Stack is an abstraction to lay-out a group of elements vertically.
+Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
+
+<Example Component={StackBasic} packageName="@atlaskit/primitives/stack" />
+
+## Space
+
+Spacing between items can be controlled with the `space` prop:
+
+<Example Component={StackSpaceBasic} packageName="@atlaskit/primitives/stack" />
+
+## Alignment
+
+To control the alignment of items you can use the `alignBlock` and `alignInline` props which control
+alignment in the block and inline directions respectively.
+
+### Block alignment
+
+<Example Component={StackAlignBlock} packageName="@atlaskit/primitives/stack" />
+
+### Inline alignment
+
+<Example Component={StackAlignInline} packageName="@atlaskit/primitives/stack" />
+
+## Spread
+
+Elements can be set to stay together next to each other (default behaviour) or spread equally in the space available.
+
+<Example Component={StackSpread} packageName="@atlaskit/primitives/stack" />
+
+## Width control
+
+By default a `Stack` will have its width influenced by the context where it appears.  
+
+To control that the `grow` prop can be used with the values:
+
+* `hug` (default) to use space only as required by its children, or
+* `fill` to take all space provided by the parent element.
+
+<Example Component={StackGrow} packageName="@atlaskit/primitives/stack" />
+
+## Output element
+
+It's possible to control the rendered HTML element with the `as` prop.
+
+<Example Component={StackAs} packageName="@atlaskit/primitives/stack" />

package/dist/cjs/components/internal/extract-react-types/inline-props.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Inline;
+function Inline(_) {}

package/dist/cjs/components/internal/extract-react-types/stack-props.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Inline;
+function Inline(_) {}

package/dist/cjs/internal/style-maps.partial.js

@@ -32,7 +32,7 @@ exports.dimensionMap = dimensionMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.8.2",
+	"version": "0.8.4",
 	"sideEffects": false
 }

package/dist/es2019/components/internal/extract-react-types/inline-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

package/dist/es2019/components/internal/extract-react-types/stack-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

package/dist/es2019/internal/style-maps.partial.js

@@ -22,7 +22,7 @@ export const dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.8.2",
+	"version": "0.8.4",
 	"sideEffects": false
 }

package/dist/esm/components/internal/extract-react-types/inline-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

package/dist/esm/components/internal/extract-react-types/stack-props.js

@@ -0,0 +1 @@
+export default function Inline(_) {}

package/dist/esm/internal/style-maps.partial.js

@@ -23,7 +23,7 @@ export var dimensionMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.8.2",
+	"version": "0.8.4",
 	"sideEffects": false
 }

package/dist/types/components/inline.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { type Gap, type RowGap } from '../internal/style-maps.partial';
 export interface InlineProps<T extends ElementType = 'div'> {
     /**
@@ -50,7 +50,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
     /**
      * Forwarded ref element
      */
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';

package/dist/types/components/internal/extract-react-types/inline-props.d.ts

@@ -0,0 +1,2 @@
+import type { InlineProps } from '../../inline';
+export default function Inline(_: InlineProps): void;

package/dist/types/components/internal/extract-react-types/stack-props.d.ts

@@ -0,0 +1,2 @@
+import type { StackProps } from '../../stack';
+export default function Inline(_: StackProps): void;

package/dist/types/components/stack.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { type Gap } from '../internal/style-maps.partial';
 export interface StackProps<T extends ElementType = 'div'> {
     /**
@@ -37,7 +37,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     /**
      * Forwarded ref element
      */
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end';

package/dist/types/internal/style-maps.partial.d.ts

@@ -28,7 +28,7 @@ export declare type MaxHeight = keyof typeof dimensionMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b8ac4fd29ba83e2ab1c2713c35915067>>
+ * @codegen <<SignedSource::06b49ea9175072486628ad5a39dd0c4b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "space"]
@@ -50,13 +50,13 @@ export declare const paddingMap: {
     readonly 'space.800': "var(--ds-space-800)";
     readonly 'space.1000': "var(--ds-space-1000)";
 };
-export declare type Padding = keyof typeof paddingMap;
-export declare type PaddingBlock = keyof typeof paddingMap;
-export declare type PaddingBlockStart = keyof typeof paddingMap;
-export declare type PaddingBlockEnd = keyof typeof paddingMap;
-export declare type PaddingInline = keyof typeof paddingMap;
-export declare type PaddingInlineStart = keyof typeof paddingMap;
-export declare type PaddingInlineEnd = keyof typeof paddingMap;
+export declare type Padding = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type PaddingBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type PaddingBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type PaddingBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type PaddingInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type PaddingInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type PaddingInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
 export declare const spaceMap: {
     readonly 'space.0': "var(--ds-space-0)";
     readonly 'space.025': "var(--ds-space-025)";
@@ -73,8 +73,8 @@ export declare const spaceMap: {
     readonly 'space.800': "var(--ds-space-800)";
     readonly 'space.1000': "var(--ds-space-1000)";
 };
-export declare type Gap = keyof typeof spaceMap;
-export declare type RowGap = keyof typeof spaceMap;
+export declare type Gap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
+export declare type RowGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
 /**
  * @codegenEnd
  */
@@ -381,9 +381,10 @@ export declare type TokenisedProps = {
     alignSelf?: AlignSelf;
     backgroundColor?: BackgroundColor;
     borderColor?: BorderColor;
-    borderStyle?: BorderStyle;
     borderRadius?: BorderRadius;
+    borderStyle?: BorderStyle;
     borderWidth?: BorderWidth;
+    color?: TextColor;
     display?: Display;
     flex?: Flex;
     flexDirection?: FlexDirection;
@@ -391,23 +392,22 @@ export declare type TokenisedProps = {
     flexShrink?: FlexShrink;
     height?: Height;
     layer?: Layer;
-    maxWidth?: MaxWidth;
     maxHeight?: MaxHeight;
-    minWidth?: MinWidth;
+    maxWidth?: MaxWidth;
     minHeight?: MinHeight;
+    minWidth?: MinWidth;
     overflow?: Overflow;
-    overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
+    overflowInline?: OverflowInline;
     padding?: Padding;
     paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
     paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockStart?: PaddingBlockStart;
     paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
     paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineStart?: PaddingInlineStart;
     position?: Position;
     shadow?: Shadow;
-    textColor?: TextColor;
     width?: Width;
 };
 declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap"];

package/extract-react-types/stack-props.tsx

@@ -0,0 +1,3 @@
+import type { StackProps } from '../src/components/stack';
+
+export default function Stack(_: StackProps) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -29,15 +29,6 @@
             "type": "alpha"
           }
         },
-        {
-          "title": "Box",
-          "folder": "box",
-          "slug": "primitives/box",
-          "id": "@atlaskit/primitives/box",
-          "status": {
-            "type": "alpha"
-          }
-        },
         {
           "title": "Inline",
           "folder": "inline",
@@ -97,6 +88,7 @@
     "@atlaskit/icon": "*",
     "@atlaskit/icon-object": "*",
     "@atlaskit/lozenge": "*",
+    "@atlaskit/radio": "^5.4.9",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "*",
     "@atlaskit/theme": "*",

package/report.api.md

@@ -347,7 +347,21 @@ const flexShrinkMap: {
 };
 
 // @public (undocumented)
-type Gap = keyof typeof spaceMap;
+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';
 
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -386,7 +400,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
   as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow;
-  ref?: ComponentPropsWithRef<T>['ref'];
+  ref?: React.ComponentPropsWithRef<T>['ref'];
   rowSpace?: RowGap;
   separator?: string;
   shouldWrap?: boolean;
@@ -459,43 +473,123 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
-
-// @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
-
-// @public
-const paddingMap: {
-  readonly 'space.0': 'var(--ds-space-0)';
-  readonly 'space.025': 'var(--ds-space-025)';
-  readonly 'space.050': 'var(--ds-space-050)';
-  readonly 'space.075': 'var(--ds-space-075)';
-  readonly 'space.100': 'var(--ds-space-100)';
-  readonly 'space.150': 'var(--ds-space-150)';
-  readonly 'space.200': 'var(--ds-space-200)';
-  readonly 'space.250': 'var(--ds-space-250)';
-  readonly 'space.300': 'var(--ds-space-300)';
-  readonly 'space.400': 'var(--ds-space-400)';
-  readonly 'space.500': 'var(--ds-space-500)';
-  readonly 'space.600': 'var(--ds-space-600)';
-  readonly 'space.800': 'var(--ds-space-800)';
-  readonly 'space.1000': 'var(--ds-space-1000)';
-};
+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';
+
+// @public (undocumented)
+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';
+
+// @public (undocumented)
+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';
+
+// @public (undocumented)
+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';
+
+// @public (undocumented)
+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';
+
+// @public (undocumented)
+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';
+
+// @public (undocumented)
+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';
 
 // @public (undocumented)
 type Position = keyof typeof positionMap;
@@ -514,7 +608,21 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type RowGap = keyof typeof spaceMap;
+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';
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
@@ -539,24 +647,6 @@ const shadowMap: {
   readonly raised: 'var(--ds-shadow-raised)';
 };
 
-// @public (undocumented)
-const spaceMap: {
-  readonly 'space.0': 'var(--ds-space-0)';
-  readonly 'space.025': 'var(--ds-space-025)';
-  readonly 'space.050': 'var(--ds-space-050)';
-  readonly 'space.075': 'var(--ds-space-075)';
-  readonly 'space.100': 'var(--ds-space-100)';
-  readonly 'space.150': 'var(--ds-space-150)';
-  readonly 'space.200': 'var(--ds-space-200)';
-  readonly 'space.250': 'var(--ds-space-250)';
-  readonly 'space.300': 'var(--ds-space-300)';
-  readonly 'space.400': 'var(--ds-space-400)';
-  readonly 'space.500': 'var(--ds-space-500)';
-  readonly 'space.600': 'var(--ds-space-600)';
-  readonly 'space.800': 'var(--ds-space-800)';
-  readonly 'space.1000': 'var(--ds-space-1000)';
-};
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -588,7 +678,7 @@ export interface StackProps<T extends ElementType = 'div'> {
   as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow_2;
-  ref?: ComponentPropsWithRef<T>['ref'];
+  ref?: React.ComponentPropsWithRef<T>['ref'];
   space?: Gap;
   spread?: Spread_2;
   testId?: string;
@@ -637,9 +727,10 @@ type TokenisedProps = {
   alignSelf?: AlignSelf;
   backgroundColor?: BackgroundColor;
   borderColor?: BorderColor;
-  borderStyle?: BorderStyle;
   borderRadius?: BorderRadius;
+  borderStyle?: BorderStyle;
   borderWidth?: BorderWidth;
+  color?: TextColor;
   display?: Display;
   flex?: Flex;
   flexDirection?: FlexDirection;
@@ -647,23 +738,22 @@ type TokenisedProps = {
   flexShrink?: FlexShrink;
   height?: Height;
   layer?: Layer;
-  maxWidth?: MaxWidth;
   maxHeight?: MaxHeight;
-  minWidth?: MinWidth;
+  maxWidth?: MaxWidth;
   minHeight?: MinHeight;
+  minWidth?: MinWidth;
   overflow?: Overflow;
-  overflowInline?: OverflowInline;
   overflowBlock?: OverflowBlock;
+  overflowInline?: OverflowInline;
   padding?: Padding;
   paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
   paddingBlockEnd?: PaddingBlockEnd;
+  paddingBlockStart?: PaddingBlockStart;
   paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
   paddingInlineEnd?: PaddingInlineEnd;
+  paddingInlineStart?: PaddingInlineStart;
   position?: Position;
   shadow?: Shadow;
-  textColor?: TextColor;
   width?: Width;
 };
 

package/scripts/spacing-codegen-template.tsx

@@ -48,9 +48,8 @@ export const createSpacingStylesFromTemplate = (
   const { cssProperties, propNameFormatter } =
     spacingProperties[spacingProperty]!;
 
-  return (
-    prettier.format(
-      `
+  return prettier.format(
+    `
   export const ${spacingProperty}Map = {
     ${activeTokens
       .sort((a, b) =>
@@ -65,22 +64,22 @@ export const createSpacingStylesFromTemplate = (
           token.fallback,
         )}`;
       })}
-    } as const;`,
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'typescript',
-        plugins: [parserTypeScript],
-      },
-    ) +
-    (cssProperties
-      .map(
-        cssProperty =>
-          `\nexport type ${capitalize(
-            cssProperty,
-          )} = keyof typeof ${spacingProperty}Map;`,
-      )
-      .join('') +
-      '\n')
+    } as const;` +
+      (cssProperties
+        .map(
+          cssProperty =>
+            // TODO: Update to use `keyof` when ERT supports it: https://github.com/atlassian/extract-react-types/issues/149
+            `\nexport type ${capitalize(cssProperty)} = ${activeTokens
+              .map(token => `'${token.name}'`)
+              .join(' | ')}`,
+        )
+        .join('') +
+        '\n'),
+    {
+      singleQuote: true,
+      trailingComma: 'all',
+      parser: 'typescript',
+      plugins: [parserTypeScript],
+    },
   );
 };

package/tmp/api-report-tmp.d.ts

@@ -322,7 +322,7 @@ const flexShrinkMap: {
 };
 
 // @public (undocumented)
-type Gap = keyof typeof spaceMap;
+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';
 
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
@@ -343,7 +343,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow;
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
     rowSpace?: RowGap;
     separator?: string;
     shouldWrap?: boolean;
@@ -416,43 +416,25 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
+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';
 
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
+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';
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
+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';
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
+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';
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
+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';
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
+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';
 
 // @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
-
-// @public
-const paddingMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
-};
+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';
 
 // @public (undocumented)
 type Position = keyof typeof positionMap;
@@ -471,7 +453,7 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type RowGap = keyof typeof spaceMap;
+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';
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
@@ -491,24 +473,6 @@ const shadowMap: {
     readonly raised: "var(--ds-shadow-raised)";
 };
 
-// @public (undocumented)
-const spaceMap: {
-    readonly 'space.0': "var(--ds-space-0)";
-    readonly 'space.025': "var(--ds-space-025)";
-    readonly 'space.050': "var(--ds-space-050)";
-    readonly 'space.075': "var(--ds-space-075)";
-    readonly 'space.100': "var(--ds-space-100)";
-    readonly 'space.150': "var(--ds-space-150)";
-    readonly 'space.200': "var(--ds-space-200)";
-    readonly 'space.250': "var(--ds-space-250)";
-    readonly 'space.300': "var(--ds-space-300)";
-    readonly 'space.400': "var(--ds-space-400)";
-    readonly 'space.500': "var(--ds-space-500)";
-    readonly 'space.600': "var(--ds-space-600)";
-    readonly 'space.800': "var(--ds-space-800)";
-    readonly 'space.1000': "var(--ds-space-1000)";
-};
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -525,7 +489,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow_2;
-    ref?: ComponentPropsWithRef<T>['ref'];
+    ref?: React.ComponentPropsWithRef<T>['ref'];
     space?: Gap;
     spread?: Spread_2;
     testId?: string;
@@ -574,9 +538,10 @@ type TokenisedProps = {
     alignSelf?: AlignSelf;
     backgroundColor?: BackgroundColor;
     borderColor?: BorderColor;
-    borderStyle?: BorderStyle;
     borderRadius?: BorderRadius;
+    borderStyle?: BorderStyle;
     borderWidth?: BorderWidth;
+    color?: TextColor;
     display?: Display;
     flex?: Flex;
     flexDirection?: FlexDirection;
@@ -584,23 +549,22 @@ type TokenisedProps = {
     flexShrink?: FlexShrink;
     height?: Height;
     layer?: Layer;
-    maxWidth?: MaxWidth;
     maxHeight?: MaxHeight;
-    minWidth?: MinWidth;
+    maxWidth?: MaxWidth;
     minHeight?: MinHeight;
+    minWidth?: MinWidth;
     overflow?: Overflow;
-    overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
+    overflowInline?: OverflowInline;
     padding?: Padding;
     paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
     paddingBlockEnd?: PaddingBlockEnd;
+    paddingBlockStart?: PaddingBlockStart;
     paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
     paddingInlineEnd?: PaddingInlineEnd;
+    paddingInlineStart?: PaddingInlineStart;
     position?: Position;
     shadow?: Shadow;
-    textColor?: TextColor;
     width?: Width;
 };
 

package/constellation/inline/props.mdx

@@ -1,3 +0,0 @@
-## Props
-
-*Coming soon*

package/constellation/inline/usage.mdx

@@ -1,7 +0,0 @@
----
-order: 2
----
-
-## Usage
-
-*Coming soon*