@atlaskit/primitives 1.0.0 → 1.0.2

package/dist/types-ts4.5/components/inline.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
-import { type InlineXCSS } from '../xcss/xcss';
-export interface InlineProps<T extends ElementType = 'div'> {
+import { BasePrimitiveProps } from './types';
+export type InlineProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
      */
@@ -40,14 +40,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
      * Renders a separator string between each child.
      */
     separator?: string;
-    /**
-     * Safe subset of styles that can be applied as a classname.
-     */
-    xcss?: InlineXCSS | Array<InlineXCSS | false | undefined>;
-    /**
-     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
-     */
-    testId?: string;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -56,7 +48,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
      * Forwarded ref element
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-}
+} & BasePrimitiveProps;
 export type AlignInline = 'start' | 'center' | 'end';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';
@@ -76,5 +68,51 @@ export type Grow = 'hug' | 'fill';
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator" | "xcss"> & import("react").RefAttributes<any>>>;
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Inline. Defaults to `div`.
+     */
+    as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline | undefined;
+    /**
+     * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+     */
+    shouldWrap?: boolean | undefined;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: "space-between" | undefined;
+    /**
+     * Used to set whether the container should grow to fill the available space.
+     */
+    grow?: Grow | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    space?: "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" | undefined;
+    /**
+     * Represents the space between rows when content wraps.
+     * Used to override the `space` value in between rows.
+     */
+    rowSpace?: "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" | undefined;
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string | undefined;
+    /**
+     * Elements to be rendered inside the Inline.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "as" | "children" | keyof BasePrimitiveProps | "space" | "separator" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

package/dist/types-ts4.5/components/stack.d.ts

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import { ElementType, ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
-export interface StackProps<T extends ElementType = 'div'> {
+import type { BasePrimitiveProps } from './types';
+export type StackProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Stack. Defaults to `div`.
      */
@@ -26,10 +27,6 @@ export interface StackProps<T extends ElementType = 'div'> {
      * Represents the space between each child.
      */
     space?: Space;
-    /**
-     * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
-     */
-    testId?: string;
     /**
      * Elements to be rendered inside the Stack.
      */
@@ -38,7 +35,7 @@ export interface StackProps<T extends ElementType = 'div'> {
      * Forwarded ref element
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
-}
+} & BasePrimitiveProps;
 export type AlignInline = 'start' | 'center' | 'end';
 export type AlignBlock = 'start' | 'center' | 'end';
 export type Spread = 'space-between';
@@ -46,7 +43,7 @@ export type Grow = 'hug' | 'fill';
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -57,5 +54,38 @@ export type Grow = 'hug' | 'fill';
  * ```
  *
  */
-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>>>;
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+    /**
+     * The DOM element to render as the Stack. Defaults to `div`.
+     */
+    as?: "div" | "ol" | "span" | "ul" | undefined;
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock | undefined;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline | undefined;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: "space-between" | undefined;
+    /**
+     * Used to set whether the container should grow to fill the available space.
+     */
+    grow?: Grow | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    space?: "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" | undefined;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
+    ref?: any;
+} & BasePrimitiveProps, "as" | "children" | keyof BasePrimitiveProps | "space" | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;

package/dist/types-ts4.5/components/types.d.ts

@@ -9,12 +9,8 @@ export type BasePrimitiveProps = {
      * Inline styles to be applied to the primitive.
      */
     style?: CSSProperties;
-};
-type BoxXCSSArray = Array<BoxXCSSArray | BoxXCSS | false | undefined>;
-export type PublicBoxPropsBase = {
     /**
-     * Safe subset of styles that can be applied as a classname.
+     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
-    xcss?: BoxXCSS | BoxXCSSArray;
+    xcss?: BoxXCSS | BoxXCSS[];
 };
-export {};

package/dist/types-ts4.5/index.d.ts

@@ -1,6 +1,9 @@
+export type { Dimension, BackgroundColor, Space, BorderColor, BorderRadius, BorderWidth, Layer, Shadow, } from './xcss/style-maps.partial';
 export { default as Box, type BoxProps } from './components/box';
 export { default as Pressable, type PressableProps, } from './components/pressable';
 export { default as Inline, type InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack, type StackProps } from './components/stack';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';
+export { default as Flex, type FlexProps } from './components/flex';
+export { default as Grid, type GridProps } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './responsive';

package/dist/types-ts4.5/responsive/media-helper.d.ts

@@ -13,10 +13,25 @@ export declare const UNSAFE_media: {
          * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
          */
         readonly xxs: "@media all";
+        /**
+         * Used for mobile viewports.
+         */
         readonly xs: "@media (min-width: 30rem)";
+        /**
+         * Used for tablet viewports.
+         */
         readonly sm: "@media (min-width: 48rem)";
+        /**
+         * Used for laptop viewports.
+         */
         readonly md: "@media (min-width: 64rem)";
+        /**
+         * Used for desktop viewports.
+         */
         readonly lg: "@media (min-width: 90rem)";
+        /**
+         * Used for wide screen desktop viewports.
+         */
         readonly xl: "@media (min-width: 110rem)";
     };
     /**
@@ -66,10 +81,25 @@ export declare const media: {
          * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
          */
         readonly xxs: "@media all";
+        /**
+         * Used for mobile viewports.
+         */
         readonly xs: "@media (min-width: 30rem)";
+        /**
+         * Used for tablet viewports.
+         */
         readonly sm: "@media (min-width: 48rem)";
+        /**
+         * Used for laptop viewports.
+         */
         readonly md: "@media (min-width: 64rem)";
+        /**
+         * Used for desktop viewports.
+         */
         readonly lg: "@media (min-width: 90rem)";
+        /**
+         * Used for wide screen desktop viewports.
+         */
         readonly xl: "@media (min-width: 110rem)";
     };
 };

package/dist/types-ts4.5/xcss/xcss.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
-import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
+import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
 import type * as CSS from 'csstype';
-import { Box, Inline } from '../index';
+import { Box } from '../index';
 import type { MediaQuery } from '../responsive/types';
 import { TokenisedProps } from './style-maps.partial';
 declare const uniqueSymbol: unique symbol;
@@ -23,11 +23,11 @@ type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>
 declare const boxWrapper: (style: any) => {
     readonly [uniqueSymbol]: BoxStyles;
 };
-declare const inlineWrapper: (style: any) => {
-    readonly [uniqueSymbol]: InlineStyles;
+declare const spaceWrapper: (style: any) => {
+    readonly [uniqueSymbol]: SpaceStyles;
 };
-type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
-type XCSSArray = Array<XCSS | XCSSArray | false | undefined>;
+type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof spaceWrapper>;
+type XCSSArray = Array<XCSS | false | undefined>;
 type AllowedBoxStyles = keyof SafeCSSObject;
 type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'margin' | 'marginBlock' | 'marginBlockEnd' | 'marginBlockStart' | 'marginInline' | 'marginInlineEnd' | 'marginInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
 /**
@@ -42,21 +42,18 @@ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' |
  * })
  * ```
  */
-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<Spacing> | ScopedSafeCSSObject<Spacing>[] : 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" | "xcss"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
+export declare function xcss<Primitive extends typeof Box | void = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends void ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : 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 void ? SpaceStyles : never;
 };
 declare const boxTag: unique symbol;
+declare const spaceTag: unique symbol;
 export type BoxStyles = SerializedStyles & {
     [boxTag]: true;
 };
+export type SpaceStyles = SerializedStyles & {
+    [spaceTag]: true;
+};
 export type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
-};
-declare const inlineTag: unique symbol;
-export type InlineStyles = SerializedStyles & {
-    [inlineTag]: true;
-};
-export type InlineXCSS = {
-    readonly [uniqueSymbol]: InlineStyles;
-};
+} | false | undefined;
 export {};

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

@@ -2,10 +2,7 @@
 import React, { ReactNode } from 'react';
 
 import { As } from '../src/components/internal/base-box';
-import {
-  BasePrimitiveProps,
-  PublicBoxPropsBase,
-} from '../src/components/types';
+import { BasePrimitiveProps } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -82,11 +79,6 @@ export default function Box(
      */
     children?: ReactNode;
 
-    /**
-     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
-     */
-    xcss?: PublicBoxPropsBase['xcss'];
-
     /**
      * Forwarded ref element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -17,7 +17,7 @@
       "category": "Primitives",
       "name": "Primitives",
       "status": {
-        "type": "alpha"
+        "type": "closed-beta"
       },
       "pages": [
         {
@@ -56,6 +56,24 @@
             "type": "closed-beta"
           }
         },
+        {
+          "title": "Flex",
+          "folder": "flex",
+          "slug": "primitives/flex",
+          "id": "@atlaskit/primitives/flex",
+          "status": {
+            "type": "closed-beta"
+          }
+        },
+        {
+          "title": "Grid",
+          "folder": "grid",
+          "slug": "primitives/grid",
+          "id": "@atlaskit/primitives/grid",
+          "status": {
+            "type": "closed-beta"
+          }
+        },
         {
           "title": "xCSS",
           "folder": "xcss",
@@ -71,7 +89,7 @@
           "slug": "primitives/responsive",
           "id": "@atlaskit/primitives/responsive",
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
         }
       ]
@@ -116,8 +134,6 @@
     "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "*",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "*",
-    "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",