@atlaskit/primitives 0.4.2 → 0.6.0

package/dist/types/components/internal/base-box.partial.d.ts

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
 import { Layer } from '../../constants';
-import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
 export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -32,9 +31,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     color?: TextColor;
     /**
-     * @private
-     * @deprecated Use `xcss` to achieve this functionality.
-     * Token representing background color with a fallback.
+     * Token representing background color with a built-in fallback value.
      */
     backgroundColor?: BackgroundColor;
     /**
@@ -54,7 +51,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @deprecated Use `xcss` to achieve this functionality.
      * Defines border width.
      */
-    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
+    borderWidth?: BorderWidth;
     /**
      * @private
      * @deprecated Use `xcss` to achieve this functionality.
@@ -125,37 +122,37 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: Padding | ResponsiveObject<Padding>;
+    padding?: Padding;
     /**
      * Tokens representing CSS shorthand `paddingBlock`.
      *
      * @see paddingBlockStart
      * @see paddingBlockEnd
      */
-    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
+    paddingBlock?: PaddingBlock;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
+    paddingBlockStart?: PaddingBlockStart;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
+    paddingBlockEnd?: PaddingBlockEnd;
     /**
      * Tokens representing CSS shorthand `paddingInline`.
      *
      * @see paddingInlineStart
      * @see paddingInlineEnd
      */
-    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
+    paddingInline?: PaddingInline;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
+    paddingInlineStart?: PaddingInlineStart;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
+    paddingInlineEnd?: PaddingInlineEnd;
     /**
      * @private
      * @deprecated Use `xcss` to achieve this functionality.
@@ -173,7 +170,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @deprecated Use `xcss` to achieve this functionality.
      * Defines display type and layout. Defaults to `block`.
      */
-    display?: Display | ResponsiveObject<Display>;
+    display?: Display;
     /**
      * @private
      * @deprecated Use `xcss` to achieve this functionality.
@@ -203,9 +200,9 @@ declare const borderStyleMap: {
 };
 export declare type BorderWidth = keyof typeof borderWidthMap;
 declare 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': import("@emotion/react").SerializedStyles;
+    readonly 'size.050': import("@emotion/react").SerializedStyles;
+    readonly 'size.100': import("@emotion/react").SerializedStyles;
 };
 declare type BorderRadius = keyof typeof borderRadiusMap;
 declare const borderRadiusMap: {
@@ -239,11 +236,11 @@ declare const alignSelfMap: {
 };
 export declare type Display = keyof typeof displayMap;
 declare const displayMap: {
-    readonly block: "block";
-    readonly inline: "inline";
-    readonly flex: "flex";
-    readonly 'inline-flex': "inline-flex";
-    readonly 'inline-block': "inline-block";
+    readonly block: import("@emotion/react").SerializedStyles;
+    readonly inline: import("@emotion/react").SerializedStyles;
+    readonly flex: import("@emotion/react").SerializedStyles;
+    readonly 'inline-flex': import("@emotion/react").SerializedStyles;
+    readonly 'inline-block': import("@emotion/react").SerializedStyles;
 };
 declare type Position = keyof typeof positionMap;
 declare const positionMap: {
@@ -345,35 +342,37 @@ export declare type MaxHeight = keyof typeof maxHeightMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
+ * @codegen <<SignedSource::6da0ceaa2c227230e3a93bc724ff8648>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding"]
  * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
 declare 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': import("@emotion/react").SerializedStyles;
+        readonly 'space.025': import("@emotion/react").SerializedStyles;
+        readonly 'space.050': import("@emotion/react").SerializedStyles;
+        readonly 'space.075': import("@emotion/react").SerializedStyles;
+        readonly 'space.100': import("@emotion/react").SerializedStyles;
+        readonly 'space.150': import("@emotion/react").SerializedStyles;
+        readonly 'space.200': import("@emotion/react").SerializedStyles;
+        readonly 'space.250': import("@emotion/react").SerializedStyles;
+        readonly 'space.300': import("@emotion/react").SerializedStyles;
+        readonly 'space.400': import("@emotion/react").SerializedStyles;
+        readonly 'space.500': import("@emotion/react").SerializedStyles;
+        readonly 'space.600': import("@emotion/react").SerializedStyles;
+        readonly 'space.800': import("@emotion/react").SerializedStyles;
+        readonly 'space.1000': import("@emotion/react").SerializedStyles;
+    };
 };
-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 = keyof typeof paddingMap.padding;
+export declare type PaddingBlock = keyof typeof paddingMap.paddingBlock;
+export declare type PaddingBlockStart = keyof typeof paddingMap.paddingBlockStart;
+export declare type PaddingBlockEnd = keyof typeof paddingMap.paddingBlockEnd;
+export declare type PaddingInline = keyof typeof paddingMap.paddingInline;
+export declare type PaddingInlineStart = keyof typeof paddingMap.paddingInlineStart;
+export declare type PaddingInlineEnd = keyof typeof paddingMap.paddingInlineEnd;
 /**
  * @codegenEnd
  */

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

@@ -24,7 +24,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     /**
      * Represents the space between each child.
      */
-    space?: Space;
+    space?: Gap;
     /**
      * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
      */
@@ -33,6 +33,9 @@ export interface StackProps<T extends ElementType = 'div'> {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
     ref?: ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
@@ -41,29 +44,31 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-declare const spaceMap: {
-    readonly '0': import("@emotion/react").SerializedStyles;
-    readonly '025': import("@emotion/react").SerializedStyles;
-    readonly '050': import("@emotion/react").SerializedStyles;
-    readonly '075': import("@emotion/react").SerializedStyles;
-    readonly '100': import("@emotion/react").SerializedStyles;
-    readonly '150': import("@emotion/react").SerializedStyles;
-    readonly '200': import("@emotion/react").SerializedStyles;
-    readonly '250': import("@emotion/react").SerializedStyles;
-    readonly '300': import("@emotion/react").SerializedStyles;
-    readonly '400': import("@emotion/react").SerializedStyles;
-    readonly '500': import("@emotion/react").SerializedStyles;
-    readonly '600': import("@emotion/react").SerializedStyles;
-    readonly '800': import("@emotion/react").SerializedStyles;
-    readonly '1000': import("@emotion/react").SerializedStyles;
+declare const stackSpaceMap: {
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
+export declare type Gap = keyof typeof stackSpaceMap.gap;
 /**
  * __Stack__
  *
@@ -78,5 +83,5 @@ export declare type Space = keyof typeof spaceMap;
  * ```
  *
  */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "space" | "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow" | "space"> & import("react").RefAttributes<any>>>;
 export default Stack;

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

@@ -1,6 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { SafeCSS } from '../internal/xcss';
-import type { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
+import { type BoxXCSS } from '../internal/xcss';
 export declare type BasePrimitiveProps = {
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
@@ -12,53 +11,8 @@ export declare type BasePrimitiveProps = {
     style?: CSSProperties;
 };
 export declare type PublicBoxPropsBase = {
-    /**
-     * Defines border width.
-     */
-    borderWidth?: BorderWidth;
-    /**
-     * Defines display type and layout. Defaults to `block`.
-     */
-    display?: Display;
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Padding;
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     *
-     * @see paddingBlockStart
-     * @see paddingBlockEnd
-     */
-    paddingBlock?: PaddingBlock;
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: PaddingBlockStart;
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: PaddingBlockEnd;
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     *
-     * @see paddingInlineStart
-     * @see paddingInlineEnd
-     */
-    paddingInline?: PaddingInline;
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: PaddingInlineStart;
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: PaddingInlineEnd;
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: SafeCSS;
+    xcss?: BoxXCSS;
 };

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
-import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos } from '@emotion/serialize';
+import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos, SerializedStyles } from '@emotion/serialize';
+import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps';
 declare const uniqueSymbol: unique symbol;
 /**
@@ -7,16 +9,43 @@ declare const uniqueSymbol: unique symbol;
  * @internal
  */
 export declare const transformStyles: (styleObj?: CSSObject | CSSObject[] | undefined) => CSSObject | CSSObject[] | undefined;
-declare type XCSS = ReturnType<typeof xcss>;
-export declare type SafeCSS = XCSS | XCSS[];
-export declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
-export declare const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
-    readonly symbol: typeof uniqueSymbol;
-    readonly styles: import("@emotion/react").SerializedStyles;
-};
 /**
  * @internal used in primitives
  * @returns
  */
 export declare const parseXcss: (args: SafeCSS) => ReturnType<typeof cssEmotion>;
+declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+declare type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
+declare const boxWrapper: (style: any) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+declare const inlineWrapper: (style: any) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: InlineStyles;
+};
+declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+declare type SafeCSS = XCSS | XCSS[];
+declare type AllowedBoxStyles = keyof SafeCSSObject;
+declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
+export declare 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: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
+};
+declare const boxTag: unique symbol;
+export declare type BoxStyles = SerializedStyles & {
+    [boxTag]: true;
+};
+export declare type BoxXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+declare const inlineTag: unique symbol;
+export declare type InlineStyles = SerializedStyles & {
+    [inlineTag]: true;
+};
+export declare type InlineXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: InlineStyles;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -41,8 +41,7 @@
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "@emotion/serialize": "^1.1.0",
-    "tiny-invariant": "^1.2.0"
+    "@emotion/serialize": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"