@atlaskit/primitives 0.4.2 → 0.6.0

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

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
@@ -12,11 +14,13 @@ import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { JSXElementConstructor } from 'react';
 import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
+import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -42,6 +46,12 @@ const alignSelfMap: {
     readonly baseline: SerializedStyles;
 };
 
+// @public (undocumented)
+type AllowedBoxStyles = keyof SafeCSSObject;
+
+// @public (undocumented)
+type AllowedInlineStyles = 'backgroundColor' | 'padding';
+
 // @public (undocumented)
 type BackgroundColor = keyof typeof backgroundColorMap;
 
@@ -156,7 +166,7 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
     backgroundColor?: BackgroundColor;
     shadow?: Shadow;
     borderStyle?: BorderStyle;
-    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
+    borderWidth?: BorderWidth;
     borderColor?: BorderColor;
     borderRadius?: BorderRadius;
     layer?: Layer;
@@ -167,16 +177,16 @@ type BaseBoxPropsFoundation<T extends ElementType> = {
     overflow?: Overflow;
     overflowInline?: OverflowInline;
     overflowBlock?: OverflowBlock;
-    padding?: Padding | ResponsiveObject<Padding>;
-    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
-    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
-    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
-    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
-    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
-    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
+    padding?: Padding;
+    paddingBlock?: PaddingBlock;
+    paddingBlockStart?: PaddingBlockStart;
+    paddingBlockEnd?: PaddingBlockEnd;
+    paddingInline?: PaddingInline;
+    paddingInlineStart?: PaddingInlineStart;
+    paddingInlineEnd?: PaddingInlineEnd;
     width?: Width;
     height?: Height;
-    display?: Display | ResponsiveObject<Display>;
+    display?: Display;
     position?: Position;
     ref?: ComponentPropsWithRef<T>['ref'];
 };
@@ -265,9 +275,9 @@ type BorderWidth_2 = keyof typeof borderWidthMap_2;
 
 // @public (undocumented)
 const borderWidthMap: {
-    readonly 'size.0': "var(--ds-width-0)";
-    readonly 'size.050': "var(--ds-width-050)";
-    readonly 'size.100': "var(--ds-width-100)";
+    readonly 'size.0': SerializedStyles;
+    readonly 'size.050': SerializedStyles;
+    readonly 'size.100': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -281,19 +291,24 @@ const borderWidthMap_2: {
 export const Box: BoxComponent;
 
 // @public (undocumented)
-const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
+type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 
 // @public (undocumented)
-type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
+export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
 
 // @public (undocumented)
-export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
+type BoxStyles = SerializedStyles_2 & {
+    [boxTag]: true;
+};
 
 // @public (undocumented)
-type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
+const boxTag: unique symbol;
 
-// @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
+// @public (undocumented)
+type BoxXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
 
 // @public (undocumented)
 const dimensionMap: {
@@ -312,11 +327,11 @@ type Display = keyof typeof displayMap;
 
 // @public (undocumented)
 const displayMap: {
-    readonly block: "block";
-    readonly inline: "inline";
-    readonly flex: "flex";
-    readonly 'inline-flex': "inline-flex";
-    readonly 'inline-block': "inline-block";
+    readonly block: SerializedStyles;
+    readonly inline: SerializedStyles;
+    readonly flex: SerializedStyles;
+    readonly 'inline-flex': SerializedStyles;
+    readonly 'inline-block': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -345,6 +360,12 @@ const flexShrinkMap: {
     readonly '1': SerializedStyles;
 };
 
+// @public (undocumented)
+type Gap = keyof typeof inlineSpaceMap.gap;
+
+// @public (undocumented)
+type Gap_2 = keyof typeof stackSpaceMap.gap;
+
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
 
@@ -379,16 +400,43 @@ export interface InlineProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow;
-    // (undocumented)
     ref?: ComponentPropsWithRef<T>['ref'];
-    rowSpace?: RowSpace;
+    rowSpace?: RowGap;
     separator?: string;
     shouldWrap?: boolean;
-    space?: Space;
+    space?: Gap;
     spread?: Spread;
     testId?: string;
 }
 
+// @public
+const inlineSpaceMap: {
+    [k: string]: {
+        readonly '0': SerializedStyles;
+        readonly '025': SerializedStyles;
+        readonly '050': SerializedStyles;
+        readonly '075': SerializedStyles;
+        readonly '100': SerializedStyles;
+        readonly '150': SerializedStyles;
+        readonly '200': SerializedStyles;
+        readonly '250': SerializedStyles;
+        readonly '300': SerializedStyles;
+        readonly '400': SerializedStyles;
+        readonly '500': SerializedStyles;
+        readonly '600': SerializedStyles;
+        readonly '800': SerializedStyles;
+        readonly '1000': SerializedStyles;
+    };
+};
+
+// @public (undocumented)
+type InlineStyles = SerializedStyles_2 & {
+    [inlineTag]: true;
+};
+
+// @public (undocumented)
+const inlineTag: unique symbol;
+
 // @public (undocumented)
 type Layer = keyof typeof LAYERS;
 
@@ -445,45 +493,47 @@ const overflowMap: {
 };
 
 // @public (undocumented)
-type Padding = keyof typeof paddingMap;
+type Padding = keyof typeof paddingMap.padding;
 
 // @public (undocumented)
 type Padding_2 = keyof typeof paddingMap_2;
 
 // @public (undocumented)
-type PaddingBlock = keyof typeof paddingMap;
+type PaddingBlock = keyof typeof paddingMap.paddingBlock;
 
 // @public (undocumented)
-type PaddingBlockEnd = keyof typeof paddingMap;
+type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
 
 // @public (undocumented)
-type PaddingBlockStart = keyof typeof paddingMap;
+type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
 
 // @public (undocumented)
-type PaddingInline = keyof typeof paddingMap;
+type PaddingInline = keyof typeof paddingMap.paddingInline;
 
 // @public (undocumented)
-type PaddingInlineEnd = keyof typeof paddingMap;
+type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
 
 // @public (undocumented)
-type PaddingInlineStart = keyof typeof paddingMap;
+type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
 
 // @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)";
+    [k: string]: {
+        readonly 'space.0': SerializedStyles;
+        readonly 'space.025': SerializedStyles;
+        readonly 'space.050': SerializedStyles;
+        readonly 'space.075': SerializedStyles;
+        readonly 'space.100': SerializedStyles;
+        readonly 'space.150': SerializedStyles;
+        readonly 'space.200': SerializedStyles;
+        readonly 'space.250': SerializedStyles;
+        readonly 'space.300': SerializedStyles;
+        readonly 'space.400': SerializedStyles;
+        readonly 'space.500': SerializedStyles;
+        readonly 'space.600': SerializedStyles;
+        readonly 'space.800': SerializedStyles;
+        readonly 'space.1000': SerializedStyles;
+    };
 };
 
 // @public (undocumented)
@@ -517,47 +567,17 @@ const positionMap: {
 
 // @public (undocumented)
 type PublicBoxPropsBase = {
-    borderWidth?: BorderWidth;
-    display?: Display;
-    padding?: Padding;
-    paddingBlock?: PaddingBlock;
-    paddingBlockStart?: PaddingBlockStart;
-    paddingBlockEnd?: PaddingBlockEnd;
-    paddingInline?: PaddingInline;
-    paddingInlineStart?: PaddingInlineStart;
-    paddingInlineEnd?: PaddingInlineEnd;
-    xcss?: SafeCSS;
+    xcss?: BoxXCSS;
 };
 
-// @public
-type ResponsiveObject<T> = Partial<Record<Breakpoint, T>>;
-
-// @public (undocumented)
-type RowSpace = keyof typeof rowSpaceMap;
-
 // @public (undocumented)
-const rowSpaceMap: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
-};
+type RowGap = keyof typeof inlineSpaceMap.rowGap;
 
 // @public (undocumented)
-type SafeCSS = XCSS | XCSS[];
+type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 
 // @public (undocumented)
 type Shadow = keyof typeof shadowMap;
@@ -571,48 +591,6 @@ const shadowMap: {
     readonly raised: SerializedStyles;
 };
 
-// @public (undocumented)
-type Space = keyof typeof spaceMap;
-
-// @public (undocumented)
-type Space_2 = keyof typeof spaceMap_2;
-
-// @public
-const spaceMap: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
-};
-
-// @public
-const spaceMap_2: {
-    readonly '0': SerializedStyles;
-    readonly '025': SerializedStyles;
-    readonly '050': SerializedStyles;
-    readonly '075': SerializedStyles;
-    readonly '100': SerializedStyles;
-    readonly '150': SerializedStyles;
-    readonly '200': SerializedStyles;
-    readonly '250': SerializedStyles;
-    readonly '300': SerializedStyles;
-    readonly '400': SerializedStyles;
-    readonly '500': SerializedStyles;
-    readonly '600': SerializedStyles;
-    readonly '800': SerializedStyles;
-    readonly '1000': SerializedStyles;
-};
-
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -629,13 +607,32 @@ export interface StackProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow_2;
-    // (undocumented)
     ref?: ComponentPropsWithRef<T>['ref'];
-    space?: Space_2;
+    space?: Gap_2;
     spread?: Spread_2;
     testId?: string;
 }
 
+// @public
+const stackSpaceMap: {
+    [k: string]: {
+        readonly '0': SerializedStyles;
+        readonly '025': SerializedStyles;
+        readonly '050': SerializedStyles;
+        readonly '075': SerializedStyles;
+        readonly '100': SerializedStyles;
+        readonly '150': SerializedStyles;
+        readonly '200': SerializedStyles;
+        readonly '250': SerializedStyles;
+        readonly '300': SerializedStyles;
+        readonly '400': SerializedStyles;
+        readonly '500': SerializedStyles;
+        readonly '600': SerializedStyles;
+        readonly '800': SerializedStyles;
+        readonly '1000': SerializedStyles;
+    };
+};
+
 // @public (undocumented)
 type TextColor = keyof typeof textColorMap;
 
@@ -755,12 +752,9 @@ const widthMap: {
 };
 
 // @public (undocumented)
-type XCSS = ReturnType<typeof xcss>;
-
-// @public (undocumented)
-export const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
+export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
     readonly symbol: typeof uniqueSymbol;
-    readonly styles: SerializedStyles;
+    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;
 };
 
 // (No @packageDocumentation comment for this package)

package/dist/cjs/components/internal/types.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BOX_RESPONSIVE_PROPS = void 0;
-var BOX_RESPONSIVE_PROPS = ['borderWidth', 'display', 'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'];
-exports.BOX_RESPONSIVE_PROPS = BOX_RESPONSIVE_PROPS;

package/dist/cjs/components/internal/utils.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isStaticStyleProp = exports.isResponsiveStyleProp = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var isResponsiveStyleProp = function isResponsiveStyleProp(propertyValue) {
-  return (0, _typeof2.default)(propertyValue) === 'object';
-};
-exports.isResponsiveStyleProp = isResponsiveStyleProp;
-var isStaticStyleProp = function isStaticStyleProp(propertyValue) {
-  return typeof propertyValue === 'string';
-};
-exports.isStaticStyleProp = isStaticStyleProp;

package/dist/es2019/components/internal/types.js

@@ -1 +0,0 @@
-export const BOX_RESPONSIVE_PROPS = ['borderWidth', 'display', 'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'];

package/dist/es2019/components/internal/utils.js

@@ -1,2 +0,0 @@
-export const isResponsiveStyleProp = propertyValue => typeof propertyValue === 'object';
-export const isStaticStyleProp = propertyValue => typeof propertyValue === 'string';

package/dist/esm/components/internal/types.js

@@ -1 +0,0 @@
-export var BOX_RESPONSIVE_PROPS = ['borderWidth', 'display', 'padding', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd'];

package/dist/esm/components/internal/utils.js

@@ -1,7 +0,0 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-export var isResponsiveStyleProp = function isResponsiveStyleProp(propertyValue) {
-  return _typeof(propertyValue) === 'object';
-};
-export var isStaticStyleProp = function isStaticStyleProp(propertyValue) {
-  return typeof propertyValue === 'string';
-};

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

@@ -1,8 +0,0 @@
-import { SerializedStyles } from '@emotion/react';
-import { ResponsiveCSSObject, ResponsiveObject } from '../../helpers/responsive';
-export declare const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
-export declare type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-export declare type StaticResponsiveCSSObject = ResponsiveCSSObject & {
-    static: SerializedStyles;
-};
-export declare type GenericPropertyValue = string | ResponsiveObject<string> | undefined;

package/dist/types/components/internal/utils.d.ts

@@ -1,3 +0,0 @@
-import { GenericPropertyValue } from './types';
-export declare const isResponsiveStyleProp: (propertyValue: GenericPropertyValue) => propertyValue is object;
-export declare const isStaticStyleProp: (propertyValue: GenericPropertyValue) => propertyValue is string;