@atlaskit/primitives 0.0.2 → 0.1.1

package/dist/es2019/components/stack.partial.js

@@ -1,2 +1,131 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+const flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+const spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
+});
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  alignInline: alignItems,
+  alignBlock,
+  spread,
+  grow,
+  space,
+  children,
+  testId
+}, ref) => {
+  const justifyContent = spread || alignBlock;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.1",
 	"sideEffects": false
 }

package/dist/esm/components/inline.partial.js

@@ -1,2 +1,159 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+var alignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  start: css({
+    alignItems: 'flex-start'
+  }),
+  end: css({
+    alignItems: 'flex-end'
+  })
+};
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'flex-start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+var flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+var flexWrapStyles = css({
+  flexWrap: 'wrap'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var separatorStyles = css({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: "-".concat("var(--ds-space-025, 2px)"),
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Separator = function Separator(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: separatorStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var alignInline = _ref2.alignInline,
+    alignItems = _ref2.alignBlock,
+    _ref2$shouldWrap = _ref2.shouldWrap,
+    shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
+    spread = _ref2.spread,
+    grow = _ref2.grow,
+    space = _ref2.space,
+    separator = _ref2.separator,
+    testId = _ref2.testId,
+    rawChildren = _ref2.children;
+  var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
+  var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  var justifyContent = spread || alignInline;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;

package/dist/esm/components/internal/box.partial.js

@@ -72,28 +72,28 @@ var borderStyleMap = {
   })
 };
 var borderWidthMap = {
-  '0px': css({
-    borderWidth: '0px'
+  'size.050': css({
+    borderWidth: "var(--ds-width-050, 1px)"
   }),
-  '1px': css({
-    borderWidth: '1px'
-  }),
-  '2px': css({
-    borderWidth: '2px'
-  }),
-  '3px': css({
-    borderWidth: '3px'
+  'size.100': css({
+    borderWidth: "var(--ds-width-100, 2px)"
   })
 };
 var borderRadiusMap = {
-  normal: css({
-    borderRadius: '3px'
+  'radius.100': css({
+    borderRadius: "var(--ds-radius-200, 2px)"
+  }),
+  'radius.200': css({
+    borderRadius: "var(--ds-radius-200, 3px)"
+  }),
+  'radius.round': css({
+    borderRadius: "var(--ds-radius-round, 50%)"
   }),
-  rounded: css({
-    borderRadius: '50%'
+  'radius.300': css({
+    borderRadius: "var(--ds-radius-300, 8px)"
   }),
-  badge: css({
-    borderRadius: '8px'
+  'radius.400': css({
+    borderRadius: "var(--ds-radius-400, 16px)"
   })
 };
 

package/dist/esm/components/stack.partial.js

@@ -1,2 +1,130 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+var spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
+});
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var alignItems = _ref.alignInline,
+    alignBlock = _ref.alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId;
+  var justifyContent = spread || alignBlock;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { Stack } from './components/stack.partial';
+export { default as Stack } from './components/stack.partial';
 export { Box } from './components/box';
-export { Inline } from './components/inline.partial';
+export { default as Inline } from './components/inline.partial';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.1",
 	"sideEffects": false
 }

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

@@ -1 +1,86 @@
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface InlineProps {
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+     */
+    shouldWrap?: boolean;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the content should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * Represents the space between each child.
+     */
+    space?: Space;
+    /**
+     * Renders a separator string between each child.
+     */
+    separator?: string;
+    /**
+     * 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.
+     */
+    children: ReactNode;
+}
+export declare type AlignInline = 'start' | 'center' | 'end';
+export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
+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::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const spaceMap: {
+    '0': import("@emotion/react").SerializedStyles;
+    '025': import("@emotion/react").SerializedStyles;
+    '050': import("@emotion/react").SerializedStyles;
+    '075': import("@emotion/react").SerializedStyles;
+    '100': import("@emotion/react").SerializedStyles;
+    '1000': import("@emotion/react").SerializedStyles;
+    '150': import("@emotion/react").SerializedStyles;
+    '200': import("@emotion/react").SerializedStyles;
+    '250': import("@emotion/react").SerializedStyles;
+    '300': import("@emotion/react").SerializedStyles;
+    '400': import("@emotion/react").SerializedStyles;
+    '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
+    '800': import("@emotion/react").SerializedStyles;
+};
+export declare type Space = keyof typeof spaceMap;
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Inline;

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

@@ -126,16 +126,16 @@ declare const borderStyleMap: {
 };
 declare type BorderWidth = keyof typeof borderWidthMap;
 declare const borderWidthMap: {
-    '0px': import("@emotion/react").SerializedStyles;
-    '1px': import("@emotion/react").SerializedStyles;
-    '2px': import("@emotion/react").SerializedStyles;
-    '3px': import("@emotion/react").SerializedStyles;
+    'size.050': import("@emotion/react").SerializedStyles;
+    'size.100': import("@emotion/react").SerializedStyles;
 };
 declare type BorderRadius = keyof typeof borderRadiusMap;
 declare const borderRadiusMap: {
-    normal: import("@emotion/react").SerializedStyles;
-    rounded: import("@emotion/react").SerializedStyles;
-    badge: import("@emotion/react").SerializedStyles;
+    'radius.100': import("@emotion/react").SerializedStyles;
+    'radius.200': import("@emotion/react").SerializedStyles;
+    'radius.round': import("@emotion/react").SerializedStyles;
+    'radius.300': import("@emotion/react").SerializedStyles;
+    'radius.400': import("@emotion/react").SerializedStyles;
 };
 /**
  * @experimental - this is likely to be removed

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

@@ -1 +1,77 @@
-export { default as Stack } from '@atlaskit/ds-explorations/stack';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface StackProps {
+    /**
+     * Used to align children along the main axis.
+     */
+    alignBlock?: AlignBlock;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignInline?: AlignInline;
+    /**
+     * Used to distribute the children along the main axis.
+     */
+    spread?: Spread;
+    /**
+     * Used to set whether the content should grow to fill the available space.
+     */
+    grow?: Grow;
+    /**
+     * 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.
+     */
+    children: ReactNode;
+}
+export declare type AlignInline = 'start' | 'center' | 'end';
+export declare type AlignBlock = 'start' | 'center' | 'end';
+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::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+declare const spaceMap: {
+    '0': import("@emotion/react").SerializedStyles;
+    '025': import("@emotion/react").SerializedStyles;
+    '050': import("@emotion/react").SerializedStyles;
+    '075': import("@emotion/react").SerializedStyles;
+    '100': import("@emotion/react").SerializedStyles;
+    '1000': import("@emotion/react").SerializedStyles;
+    '150': import("@emotion/react").SerializedStyles;
+    '200': import("@emotion/react").SerializedStyles;
+    '250': import("@emotion/react").SerializedStyles;
+    '300': import("@emotion/react").SerializedStyles;
+    '400': import("@emotion/react").SerializedStyles;
+    '500': import("@emotion/react").SerializedStyles;
+    '600': import("@emotion/react").SerializedStyles;
+    '800': import("@emotion/react").SerializedStyles;
+};
+export declare type Space = keyof typeof spaceMap;
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default Stack;