@atlaskit/primitives 0.9.0 → 0.9.1

package/dist/esm/{internal → xcss}/xcss.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -40,6 +41,9 @@ var tokensMap = {
   minHeight: dimensionMap,
   minInlineSize: dimensionMap,
   minWidth: dimensionMap,
+  outlineOffset: paddingMap,
+  outlineWidth: borderWidthMap,
+  outlineColor: borderColorMap,
   overflow: overflowMap,
   overflowBlock: overflowBlockMap,
   overflowInline: overflowInlineMap,
@@ -61,7 +65,7 @@ var tokensMap = {
   width: dimensionMap,
   zIndex: layerMap
 };
-var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+var uniqueSymbol = Symbol('UNSAFE_INTERNAL_styles');
 var isSafeEnvToThrow = function isSafeEnvToThrow() {
   return (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && _typeof(process.env) === 'object' && process.env.NODE_ENV !== 'production';
 };
@@ -115,10 +119,7 @@ var transformStyles = function transformStyles(styleObj) {
 };
 var baseXcss = function baseXcss(style) {
   var transformedStyles = transformStyles(style);
-  return {
-    symbol: uniqueSymbol,
-    styles: cssEmotion(transformedStyles)
-  };
+  return _defineProperty({}, uniqueSymbol, cssEmotion(transformedStyles));
 };
 
 /**
@@ -132,9 +133,8 @@ export var parseXcss = function parseXcss(args) {
       return x && parseXcss(x);
     }).filter(Boolean);
   }
-  var symbol = args.symbol,
-    styles = args.styles;
-  if ((typeof process === "undefined" ? "undefined" : _typeof(process)) && process.env.NODE_ENV === 'development' && symbol !== uniqueSymbol) {
+  var styles = args[uniqueSymbol];
+  if ((typeof process === "undefined" ? "undefined" : _typeof(process)) && process.env.NODE_ENV === 'development' && typeof styles === 'undefined') {
     throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
   }
   return styles;
@@ -146,6 +146,18 @@ var boxWrapper = function boxWrapper(style) {
 var inlineWrapper = function inlineWrapper(style) {
   return xcss(style);
 };
+/**
+ * ### xcss
+ *
+ * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
+ * CSS application.
+ *
+ * ```tsx
+ * const styles = xcss({
+ *   padding: 'space.100'
+ * })
+ * ```
+ */
 export function xcss(style) {
   return baseXcss(style);
 }

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
-import { type Gap, type RowGap } from '../internal/style-maps.partial';
+import { type Gap, type RowGap } from '../xcss/style-maps.partial';
 export interface InlineProps<T extends ElementType = 'div'> {
     /**
      * The DOM element to render as the Inline. Defaults to `div`.

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { BackgroundColor, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from '../../internal/style-maps.partial';
+import { BackgroundColor, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from '../../xcss/style-maps.partial';
 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> = {

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
-import { type Gap } from '../internal/style-maps.partial';
+import { type Gap } from '../xcss/style-maps.partial';
 export interface StackProps<T extends ElementType = 'div'> {
     /**
      * The DOM element to render as the Stack. Defaults to `div`.

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { type BoxXCSS } from '../internal/xcss';
+import { type BoxXCSS } from '../xcss/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.

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Box, type BoxProps } from './components/box';
 export { default as Inline, type InlineProps } from './components/inline';
-export { xcss } from './internal/xcss';
+export { xcss } from './xcss/xcss';
 export { default as Stack, type StackProps } from './components/stack';

package/dist/types/{internal → xcss}/style-maps.partial.d.ts

@@ -458,6 +458,9 @@ export declare type TokenisedProps = {
     minHeight?: MinHeight;
     minInlineSize?: MinInlineSize;
     minWidth?: MinWidth;
+    outlineColor?: BorderColor;
+    outlineOffset?: Padding;
+    outlineWidth?: BorderWidth;
     overflow?: Overflow;
     overflowBlock?: OverflowBlock;
     overflowInline?: OverflowInline;

package/dist/types/{internal → xcss}/xcss.d.ts

@@ -17,34 +17,41 @@ declare type CSSPseudos = {
 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;
+    readonly [uniqueSymbol]: BoxStyles;
 };
 declare const inlineWrapper: (style: any) => {
-    readonly symbol: typeof uniqueSymbol;
-    readonly styles: InlineStyles;
+    readonly [uniqueSymbol]: InlineStyles;
 };
 declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
 declare type AllowedBoxStyles = keyof SafeCSSObject;
 declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
+/**
+ * ### xcss
+ *
+ * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
+ * CSS application.
+ *
+ * ```tsx
+ * const styles = xcss({
+ *   padding: 'space.100'
+ * })
+ * ```
+ */
 export declare 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): {
-    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;
+    readonly [uniqueSymbol]: 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;
+    readonly [uniqueSymbol]: BoxStyles;
 };
 declare const inlineTag: unique symbol;
 export declare type InlineStyles = SerializedStyles & {
     [inlineTag]: true;
 };
 export declare type InlineXCSS = {
-    readonly symbol: typeof uniqueSymbol;
-    readonly styles: InlineStyles;
+    readonly [uniqueSymbol]: InlineStyles;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -55,6 +55,15 @@
           "status": {
             "type": "alpha"
           }
+        },
+        {
+          "title": "xCSS",
+          "folder": "xcss",
+          "slug": "primitives/xcss",
+          "id": "@atlaskit/primitives/xcss",
+          "status": {
+            "type": "alpha"
+          }
         }
       ]
     }
@@ -142,4 +151,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -311,8 +311,7 @@ const boxTag: unique symbol;
 
 // @public (undocumented)
 type BoxXCSS = {
-  readonly symbol: typeof uniqueSymbol;
-  readonly styles: BoxStyles;
+  readonly [uniqueSymbol]: BoxStyles;
 };
 
 // @public (undocumented)
@@ -949,6 +948,9 @@ type TokenisedProps = {
   minHeight?: MinHeight;
   minInlineSize?: MinInlineSize;
   minWidth?: MinWidth;
+  outlineColor?: BorderColor;
+  outlineOffset?: Padding;
+  outlineWidth?: BorderWidth;
   overflow?: Overflow;
   overflowBlock?: OverflowBlock;
   overflowInline?: OverflowInline;
@@ -976,7 +978,7 @@ const uniqueSymbol: unique symbol;
 // @public (undocumented)
 type Width = keyof typeof dimensionMap;
 
-// @public (undocumented)
+// @public
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
   style: Primitive extends typeof Box
     ?
@@ -988,8 +990,9 @@ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
         | ScopedSafeCSSObject<AllowedInlineStyles>[]
     : never,
 ): {
-  readonly symbol: typeof uniqueSymbol;
-  readonly styles: Primitive extends (<T extends ElementType<any> = 'div'>(
+  readonly [uniqueSymbol]: Primitive extends (<
+    T extends ElementType<any> = 'div',
+  >(
     props: BoxProps<T>,
   ) => ReactElement<any, JSXElementConstructor<any> | string> | null) &
     FC<BoxProps<'div'>>