@atlaskit/ds-explorations 0.1.4 → 1.0.0

package/report.api.md

@@ -1,20 +1,29 @@
+<!-- API Report Version: 2.3 -->
+
 ## API Report File for "@atlaskit/ds-explorations"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
+/// <reference types="react" />
+
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
-import { HTMLAttributes } from 'react';
 import { jsx } from '@emotion/react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
@@ -78,6 +87,9 @@ const backgroundHoverColorMap: {
   'discovery.bold': SerializedStyles;
   information: SerializedStyles;
   'information.bold': SerializedStyles;
+  'elevation.surface': SerializedStyles;
+  'elevation.surface.raised': SerializedStyles;
+  'elevation.surface.overlay': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -138,6 +150,57 @@ const borderWidthMap: {
   '3px': SerializedStyles;
 };
 
+// @public (undocumented)
+type BoxComponent<T extends ElementType = 'div'> = (<
+  T extends ElementType = 'div'
+>(
+  props: UNSAFE_BoxProps<T>,
+) => ReactElement | null) &
+  FC<UNSAFE_BoxProps<T>>;
+
+// @public (undocumented)
+type BoxPropsBase<T extends ElementType> = {
+  as?: T;
+  children?: NonTextChildren | boolean | null;
+  className?: string;
+  backgroundColor?: BackgroundColor;
+  borderStyle?: BorderStyle;
+  borderWidth?: BorderWidth;
+  borderColor?: BorderColor;
+  borderRadius?: BorderRadius;
+  flexDirection?: FlexDirection;
+  alignItems?: FlexAlignItems;
+  justifyContent?: FlexJustifyContent;
+  overflow?: Overflow;
+  padding?: Padding;
+  paddingBlock?: PaddingBlock;
+  paddingInline?: PaddingInline;
+  width?: Width;
+  height?: Height;
+  display?: Display;
+  position?: Position;
+  ref?: ComponentPropsWithRef<T>['ref'];
+};
+
+// @public (undocumented)
+type ColumnGap = keyof typeof columnGapMap;
+
+// @public
+const columnGapMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
+
 // @public (undocumented)
 type Display = keyof typeof displayMap;
 
@@ -172,6 +235,8 @@ const flexAlignItemsMap_2: {
   baseline: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -180,6 +245,8 @@ const flexAlignItemsMap_3: {
   baseline: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -212,6 +279,8 @@ const flexJustifyContentMap_2: {
   center: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -219,6 +288,24 @@ const flexJustifyContentMap_3: {
   center: SerializedStyles;
   flexStart: SerializedStyles;
   flexEnd: SerializedStyles;
+  start: SerializedStyles;
+  end: SerializedStyles;
+};
+
+// @public (undocumented)
+type FlexWrap = keyof typeof flexWrapMap;
+
+// @public (undocumented)
+type FlexWrap_2 = keyof typeof flexWrapMap_2;
+
+// @public (undocumented)
+const flexWrapMap: {
+  wrap: SerializedStyles;
+};
+
+// @public (undocumented)
+const flexWrapMap_2: {
+  wrap: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -238,18 +325,36 @@ type FontWeight = keyof typeof fontWeightMap;
 const fontWeightMap: {
   '400': SerializedStyles;
   '500': SerializedStyles;
+  '600': SerializedStyles;
   '700': SerializedStyles;
 };
 
 // @public (undocumented)
-type GlobalSpacingToken = keyof typeof UNSAFE_SPACING_SCALE;
+type Height = keyof typeof heightMap;
+
+// @public (undocumented)
+const heightMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
 
 // @public (undocumented)
 interface InlineProps extends BasePrimitiveProps {
   alignItems?: FlexAlignItems_2;
-  children: ReactNode;
+  children: NonTextChildren;
   divider?: ReactNode;
-  gap: GlobalSpacingToken;
+  flexWrap?: FlexWrap;
+  gap: ColumnGap;
   justifyContent?: FlexJustifyContent_2;
 }
 
@@ -261,7 +366,7 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
   // (undocumented)
   appearance?: InteractionBackgroundColor;
   // (undocumented)
-  children?: ReactNode;
+  children: ReactNode;
 }
 
 // @public (undocumented)
@@ -278,6 +383,77 @@ const lineHeightMap: {
   '40px': SerializedStyles;
 };
 
+// @public (undocumented)
+type NonTextChildren = (JSX.Element | false | null)[] | JSX.Element;
+
+// @public (undocumented)
+type Overflow = keyof typeof overflowMap;
+
+// @public (undocumented)
+const overflowMap: {
+  auto: SerializedStyles;
+};
+
+// @public (undocumented)
+type Padding = keyof typeof paddingMap;
+
+// @public (undocumented)
+type PaddingBlock = keyof typeof paddingBlockMap;
+
+// @public (undocumented)
+const paddingBlockMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
+
+// @public (undocumented)
+type PaddingInline = keyof typeof paddingInlineMap;
+
+// @public (undocumented)
+const paddingInlineMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
+
+// @public
+const paddingMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
+
+// @public (undocumented)
+type Position = keyof typeof positionMap;
+
 // @public (undocumented)
 const positionMap: {
   absolute: SerializedStyles;
@@ -285,11 +461,34 @@ const positionMap: {
   static: SerializedStyles;
 };
 
+// @public (undocumented)
+type PropsToOmit = 'as' | 'className' | 'style';
+
+// @public (undocumented)
+type RowGap = keyof typeof rowGapMap;
+
+// @public
+const rowGapMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
+
 // @public (undocumented)
 interface StackProps extends BasePrimitiveProps {
   alignItems?: FlexAlignItems_3;
-  children: ReactNode;
-  gap: GlobalSpacingToken;
+  children: NonTextChildren;
+  flexWrap?: FlexWrap_2;
+  gap: RowGap;
   justifyContent?: FlexJustifyContent_3;
 }
 
@@ -334,33 +533,15 @@ const textTransformMap: {
 };
 
 // @internal
-export const UNSAFE_Box: ForwardRefExoticComponent<
-  UNSAFE_BoxProps<HTMLElement> & RefAttributes<HTMLElement>
->;
+export const UNSAFE_Box: BoxComponent;
 
 // @public (undocumented)
-export interface UNSAFE_BoxProps<T extends HTMLElement = HTMLElement>
-  extends Omit<HTMLAttributes<T>, 'style' | 'as' | 'className'>,
-    BasePrimitiveProps {
-  alignItems?: FlexAlignItems;
-  as?: ElementType;
-  backgroundColor?: [BackgroundColor, string];
-  borderColor?: [BorderColor, string];
-  borderRadius?: BorderRadius;
-  borderStyle?: BorderStyle;
-  borderWidth?: BorderWidth;
-  children?: ReactNode;
-  className?: string;
-  display?: Display;
-  flexDirection?: FlexDirection;
-  height?: GlobalSpacingToken;
-  justifyContent?: FlexJustifyContent;
-  padding?: GlobalSpacingToken;
-  paddingBlock?: GlobalSpacingToken;
-  paddingInline?: GlobalSpacingToken;
-  position?: keyof typeof positionMap;
-  width?: GlobalSpacingToken;
-}
+export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<
+  ComponentPropsWithoutRef<T>,
+  PropsToOmit
+> &
+  BasePrimitiveProps &
+  BoxPropsBase<T>;
 
 // @public
 export const UNSAFE_Inline: ForwardRefExoticComponent<
@@ -374,22 +555,6 @@ export const UNSAFE_InteractionSurface: ({
   testId,
 }: InteractionSurfaceProps) => jsx.JSX.Element;
 
-// @public (undocumented)
-export const UNSAFE_SPACING_SCALE: {
-  'sp-0': number;
-  'sp-25': number;
-  'sp-50': number;
-  'sp-75': number;
-  'sp-100': number;
-  'sp-150': number;
-  'sp-200': number;
-  'sp-300': number;
-  'sp-400': number;
-  'sp-500': number;
-  'sp-600': number;
-  'sp-800': number;
-};
-
 // @public
 export const UNSAFE_Stack: ForwardRefExoticComponent<
   StackProps & RefAttributes<HTMLDivElement>
@@ -402,7 +567,7 @@ export const UNSAFE_Text: FC<UNSAFE_TextProps>;
 export interface UNSAFE_TextProps extends BasePrimitiveProps {
   as?: AsElement;
   children: ReactNode;
-  color?: [TextColor, string];
+  color?: TextColor;
   fontSize?: FontSize;
   fontWeight?: FontWeight;
   lineHeight?: LineHeight;
@@ -422,5 +587,26 @@ const verticalAlignMap: {
   bottom: SerializedStyles;
 };
 
+// @public (undocumented)
+type Width = keyof typeof widthMap;
+
+// @public (undocumented)
+const widthMap: {
+  'scale.0': SerializedStyles;
+  'scale.025': SerializedStyles;
+  'scale.050': SerializedStyles;
+  'scale.075': SerializedStyles;
+  'scale.100': SerializedStyles;
+  'scale.150': SerializedStyles;
+  'scale.200': SerializedStyles;
+  'scale.250': SerializedStyles;
+  'scale.300': SerializedStyles;
+  'scale.400': SerializedStyles;
+  'scale.500': SerializedStyles;
+  'scale.600': SerializedStyles;
+};
+
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -3,94 +3,82 @@
 exports[`@atlaskit/design-system-explorations bg styles are generated correctly 1`] = `
 "const backgroundColorMap = {
   disabled: css({
-    backgroundColor: token('color.background.disabled', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.disabled', '#091e4289'),
   }),
   'inverse.subtle': css({
-    backgroundColor: token(
-      'color.background.inverse.subtle',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
   }),
   input: css({
-    backgroundColor: token('color.background.input', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.input', '#FAFBFC'),
   }),
   neutral: css({
-    backgroundColor: token('color.background.neutral', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.neutral', '#DFE1E6'),
   }),
   'neutral.subtle': css({
-    backgroundColor: token(
-      'color.background.neutral.subtle',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.neutral.subtle', 'transparent'),
   }),
   'neutral.bold': css({
-    backgroundColor: token('color.background.neutral.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.neutral.bold', '#42526E'),
   }),
   'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.brand.bold', '#0052CC'),
   }),
   selected: css({
-    backgroundColor: token('color.background.selected', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.selected', '#DEEBFF'),
   }),
   'selected.bold': css({
-    backgroundColor: token('color.background.selected.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.selected.bold', '#0052CC'),
   }),
   danger: css({
-    backgroundColor: token('color.background.danger', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.danger', '#FFEBE6'),
   }),
   'danger.bold': css({
-    backgroundColor: token('color.background.danger.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.danger.bold', '#DE350B'),
   }),
   warning: css({
-    backgroundColor: token('color.background.warning', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.warning', '#FFFAE6'),
   }),
   'warning.bold': css({
-    backgroundColor: token('color.background.warning.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.warning.bold', '#FFAB00'),
   }),
   success: css({
-    backgroundColor: token('color.background.success', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.success', '#E3FCEF'),
   }),
   'success.bold': css({
-    backgroundColor: token('color.background.success.bold', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.success.bold', '#00875A'),
   }),
   discovery: css({
-    backgroundColor: token('color.background.discovery', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.discovery', '#EAE6FF'),
   }),
   'discovery.bold': css({
-    backgroundColor: token(
-      'color.background.discovery.bold',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.discovery.bold', '#5243AA'),
   }),
   information: css({
-    backgroundColor: token('color.background.information', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.background.information', '#DEEBFF'),
   }),
   'information.bold': css({
-    backgroundColor: token(
-      'color.background.information.bold',
-      'var(--ds-bg-fb)',
-    ),
+    backgroundColor: token('color.background.information.bold', '#0052CC'),
   }),
   'color.blanket': css({
-    backgroundColor: token('color.blanket', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.blanket', '#091e4289'),
   }),
   'color.blanket.selected': css({
-    backgroundColor: token('color.blanket.selected', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.blanket.selected', '#388BFF14'),
   }),
   'color.blanket.danger': css({
-    backgroundColor: token('color.blanket.danger', 'var(--ds-bg-fb)'),
+    backgroundColor: token('color.blanket.danger', '#EF5C4814'),
   }),
   'elevation.surface': css({
-    backgroundColor: token('elevation.surface', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface', '#FFFFFF'),
   }),
   'elevation.surface.sunken': css({
-    backgroundColor: token('elevation.surface.sunken', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
   }),
   'elevation.surface.raised': css({
-    backgroundColor: token('elevation.surface.raised', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
   }),
   'elevation.surface.overlay': css({
-    backgroundColor: token('elevation.surface.overlay', 'var(--ds-bg-fb)'),
+    backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
   }),
 };
 
@@ -101,43 +89,43 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
 exports[`@atlaskit/design-system-explorations border styles are generated correctly 1`] = `
 "const borderColorMap = {
   'color.border': css({
-    borderColor: token('color.border', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border', '#091e4221'),
   }),
   bold: css({
-    borderColor: token('color.border.bold', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.bold', '#344563'),
   }),
   inverse: css({
-    borderColor: token('color.border.inverse', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.inverse', '#FFFFFF'),
   }),
   focused: css({
-    borderColor: token('color.border.focused', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.focused', '#4C9AFF'),
   }),
   input: css({
-    borderColor: token('color.border.input', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.input', '#FAFBFC'),
   }),
   disabled: css({
-    borderColor: token('color.border.disabled', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.disabled', '#FAFBFC'),
   }),
   brand: css({
-    borderColor: token('color.border.brand', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.brand', '#0052CC'),
   }),
   selected: css({
-    borderColor: token('color.border.selected', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.selected', '#0052CC'),
   }),
   danger: css({
-    borderColor: token('color.border.danger', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.danger', '#FF5630'),
   }),
   warning: css({
-    borderColor: token('color.border.warning', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.warning', '#FFC400'),
   }),
   success: css({
-    borderColor: token('color.border.success', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.success', '#00875A'),
   }),
   discovery: css({
-    borderColor: token('color.border.discovery', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.discovery', '#998DD9'),
   }),
   information: css({
-    borderColor: token('color.border.information', 'var(--ds-bo-fb)'),
+    borderColor: token('color.border.information', '#0065FF'),
   }),
 };
 
@@ -327,43 +315,43 @@ type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 exports[`@atlaskit/design-system-explorations text styles are generated correctly 1`] = `
 "const textColorMap = {
   'color.text': css({
-    color: token('color.text', 'var(--ds-co-fb)'),
+    color: token('color.text', '#172B4D'),
   }),
   subtle: css({
-    color: token('color.text.subtle', 'var(--ds-co-fb)'),
+    color: token('color.text.subtle', '#42526E'),
   }),
   subtlest: css({
-    color: token('color.text.subtlest', 'var(--ds-co-fb)'),
+    color: token('color.text.subtlest', '#7A869A'),
   }),
   disabled: css({
-    color: token('color.text.disabled', 'var(--ds-co-fb)'),
+    color: token('color.text.disabled', '#A5ADBA'),
   }),
   inverse: css({
-    color: token('color.text.inverse', 'var(--ds-co-fb)'),
+    color: token('color.text.inverse', '#FFFFFF'),
   }),
   brand: css({
-    color: token('color.text.brand', 'var(--ds-co-fb)'),
+    color: token('color.text.brand', '#0065FF'),
   }),
   selected: css({
-    color: token('color.text.selected', 'var(--ds-co-fb)'),
+    color: token('color.text.selected', '#0052CC'),
   }),
   danger: css({
-    color: token('color.text.danger', 'var(--ds-co-fb)'),
+    color: token('color.text.danger', '#DE350B'),
   }),
   warning: css({
-    color: token('color.text.warning', 'var(--ds-co-fb)'),
+    color: token('color.text.warning', '#974F0C'),
   }),
   'warning.inverse': css({
-    color: token('color.text.warning.inverse', 'var(--ds-co-fb)'),
+    color: token('color.text.warning.inverse', '#172B4D'),
   }),
   success: css({
-    color: token('color.text.success', 'var(--ds-co-fb)'),
+    color: token('color.text.success', '#006644'),
   }),
   discovery: css({
-    color: token('color.text.discovery', 'var(--ds-co-fb)'),
+    color: token('color.text.discovery', '#403294'),
   }),
   information: css({
-    color: token('color.text.information', 'var(--ds-co-fb)'),
+    color: token('color.text.information', '#0052CC'),
   }),
 };