@atlaskit/primitives 0.15.2 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.16.0
+
+### Minor Changes
+
+- [`fe3ef707163`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe3ef707163) - Initial Pressable primitive (not ready for production)
+
+## 0.15.3
+
+### Patch Changes
+
+- [`27f6081edf2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27f6081edf2) - Regenerates codegen hashes to surface changes to tokens
+
 ## 0.15.2
 
 ### Patch Changes

package/dist/cjs/components/internal/base-box.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../../xcss/style-maps.partial");
-var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId"];
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "css"];
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 // Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
@@ -24,7 +24,8 @@ var _excluded = ["as", "className", "children", "backgroundColor", "padding", "p
  * @internal
  */
 var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var as = _ref.as,
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     className = _ref.className,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -37,8 +38,9 @@ var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInlineEnd = _ref.paddingInlineEnd,
     style = _ref.style,
     testId = _ref.testId,
+    css = _ref.css,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var Component = as || 'div';
+  var Component = as;
   var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
     style: style,
     ref: ref

package/dist/cjs/components/pressable.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _baseBox = _interopRequireDefault(require("./internal/base-box"));
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
+/** @jsx jsx */
+var defaultStyles = (0, _react2.css)({
+  cursor: 'pointer'
+});
+
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    backgroundColor = _ref.backgroundColor,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    isDisabled = _ref.isDisabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)(_focusRing.default, null, (0, _react2.jsx)(_baseBox.default, (0, _extends2.default)({}, htmlAttributes, {
+    ref: ref,
+    testId: testId,
+    type: type,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    as: "button",
+    css: defaultStyles,
+    disabled: isDisabled
+  }), children));
+});
+var _default = Pressable;
+exports.default = _default;

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "Inline", {
     return _inline.default;
   }
 });
+Object.defineProperty(exports, "Pressable", {
+  enumerable: true,
+  get: function get() {
+    return _pressable.default;
+  }
+});
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
@@ -41,6 +47,7 @@ Object.defineProperty(exports, "xcss", {
   }
 });
 var _box = _interopRequireDefault(require("./components/box"));
+var _pressable = _interopRequireDefault(require("./components/pressable"));
 var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));

package/dist/cjs/version.json

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

package/dist/cjs/xcss/style-maps.partial.js

@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
+ * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
  */
 var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -303,17 +303,17 @@ exports.layerMap = layerMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
+ * @codegen <<SignedSource::ffa10f95df2d9bbc0f5d91f9d19b9a69>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::25105916a589322f57c322068cb0074a>>
  */
 var borderWidthMap = {
   'border.width': "var(--ds-border-width, 1px)",
   'border.width.0': "var(--ds-border-width-0, 0px)",
-  'border.width.050': "var(--ds-border-width-050, 1px)",
-  'border.width.100': "var(--ds-border-width-100, 2px)"
+  'border.width.indicator': "var(--ds-border-width-indicator, 3px)",
+  'border.width.outline': "var(--ds-border-width-outline, 2px)"
 };
 exports.borderWidthMap = borderWidthMap;
 var borderRadiusMap = {

package/dist/es2019/components/internal/base-box.js

@@ -16,7 +16,7 @@ import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-map
  * @internal
  */
 export const BaseBox = /*#__PURE__*/forwardRef(({
-  as,
+  as = 'div',
   className,
   children,
   backgroundColor,
@@ -29,9 +29,10 @@ export const BaseBox = /*#__PURE__*/forwardRef(({
   paddingInlineEnd,
   style,
   testId,
+  css,
   ...htmlAttributes
 }, ref) => {
-  const Component = as || 'div';
+  const Component = as;
   const node = jsx(Component, _extends({
     style: style,
     ref: ref

package/dist/es2019/components/pressable.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+import BaseBox from './internal/base-box';
+const defaultStyles = css({
+  cursor: 'pointer'
+});
+
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+const Pressable = /*#__PURE__*/forwardRef(({
+  children,
+  backgroundColor,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  isDisabled,
+  type = 'button',
+  testId,
+  ...htmlAttributes
+}, ref) => {
+  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+    ref: ref,
+    testId: testId,
+    type: type,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    as: "button",
+    css: defaultStyles,
+    disabled: isDisabled
+  }), children));
+});
+export default Pressable;

package/dist/es2019/index.js

@@ -1,4 +1,5 @@
 export { default as Box } from './components/box';
+export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/es2019/version.json

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

package/dist/es2019/xcss/style-maps.partial.js

@@ -48,11 +48,11 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
+ * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
  */
 export const borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -283,17 +283,17 @@ export const layerMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
+ * @codegen <<SignedSource::ffa10f95df2d9bbc0f5d91f9d19b9a69>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::25105916a589322f57c322068cb0074a>>
  */
 export const borderWidthMap = {
   'border.width': "var(--ds-border-width, 1px)",
   'border.width.0': "var(--ds-border-width-0, 0px)",
-  'border.width.050': "var(--ds-border-width-050, 1px)",
-  'border.width.100': "var(--ds-border-width-100, 2px)"
+  'border.width.indicator': "var(--ds-border-width-indicator, 3px)",
+  'border.width.outline': "var(--ds-border-width-outline, 2px)"
 };
 export const borderRadiusMap = {
   'border.radius.050': "var(--ds-border-radius-050, 2px)",

package/dist/esm/components/internal/base-box.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId"];
+var _excluded = ["as", "className", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "css"];
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef } from 'react';
@@ -18,7 +18,8 @@ import { backgroundColorStylesMap, paddingStylesMap } from '../../xcss/style-map
  * @internal
  */
 export var BaseBox = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var as = _ref.as,
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     className = _ref.className,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -31,8 +32,9 @@ export var BaseBox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingInlineEnd = _ref.paddingInlineEnd,
     style = _ref.style,
     testId = _ref.testId,
+    css = _ref.css,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var Component = as || 'div';
+  var Component = as;
   var node = jsx(Component, _extends({
     style: style,
     ref: ref

package/dist/esm/components/pressable.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId"];
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+import BaseBox from './internal/base-box';
+var defaultStyles = css({
+  cursor: 'pointer'
+});
+
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    backgroundColor = _ref.backgroundColor,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    isDisabled = _ref.isDisabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    testId = _ref.testId,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  return jsx(FocusRing, null, jsx(BaseBox, _extends({}, htmlAttributes, {
+    ref: ref,
+    testId: testId,
+    type: type,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    as: "button",
+    css: defaultStyles,
+    disabled: isDisabled
+  }), children));
+});
+export default Pressable;

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { default as Box } from './components/box';
+export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';

package/dist/esm/version.json

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

package/dist/esm/xcss/style-maps.partial.js

@@ -49,11 +49,11 @@ export var spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
+ * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
  */
 export var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -284,17 +284,17 @@ export var layerMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
+ * @codegen <<SignedSource::ffa10f95df2d9bbc0f5d91f9d19b9a69>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::25105916a589322f57c322068cb0074a>>
  */
 export var borderWidthMap = {
   'border.width': "var(--ds-border-width, 1px)",
   'border.width.0': "var(--ds-border-width-0, 0px)",
-  'border.width.050': "var(--ds-border-width-050, 1px)",
-  'border.width.100': "var(--ds-border-width-100, 2px)"
+  'border.width.indicator': "var(--ds-border-width-indicator, 3px)",
+  'border.width.outline': "var(--ds-border-width-outline, 2px)"
 };
 export var borderRadiusMap = {
   'border.radius.050': "var(--ds-border-radius-050, 2px)",

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

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } fr
 import { BackgroundColor, type Space } from '../../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from '../types';
 export type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
-export type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+export type As = 'article' | 'aside' | 'button' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { type ReactElement, type ReactNode } from 'react';
+import { type BaseBoxProps } from './internal/base-box';
+export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+    /**
+     * `children` should be defined to ensure buttons are not empty,
+     * because they should have labels.
+     */
+    children: ReactNode;
+    isDisabled?: boolean;
+};
+type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+declare const Pressable: PressableComponent;
+export default Pressable;

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

@@ -10,9 +10,11 @@ export type BasePrimitiveProps = {
      */
     style?: CSSProperties;
 };
+type BoxXCSSArray = Array<BoxXCSSArray | BoxXCSS | false | undefined>;
 export type PublicBoxPropsBase = {
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
+    xcss?: BoxXCSS | BoxXCSSArray;
 };
+export {};

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 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';

package/dist/types/xcss/style-maps.partial.d.ts

@@ -50,11 +50,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
+ * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -291,17 +291,17 @@ export type Layer = keyof typeof layerMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
+ * @codegen <<SignedSource::ffa10f95df2d9bbc0f5d91f9d19b9a69>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::25105916a589322f57c322068cb0074a>>
  */
 export declare const borderWidthMap: {
     readonly 'border.width': "var(--ds-border-width)";
     readonly 'border.width.0': "var(--ds-border-width-0)";
-    readonly 'border.width.050': "var(--ds-border-width-050)";
-    readonly 'border.width.100': "var(--ds-border-width-100)";
+    readonly 'border.width.indicator': "var(--ds-border-width-indicator)";
+    readonly 'border.width.outline': "var(--ds-border-width-outline)";
 };
 export type BorderWidth = keyof typeof borderWidthMap;
 export declare const borderRadiusMap: {

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

@@ -11,7 +11,7 @@ declare const uniqueSymbol: unique symbol;
  * @returns a collection of styles that can be applied to the respective primitive
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | XCSSArray) => ParsedXcss;
 type CSSMediaQueries = {
     [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
 };
@@ -27,6 +27,7 @@ declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+type XCSSArray = Array<XCSS | XCSSArray | 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';
 /**

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

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ElementType, FC, ReactElement, ReactNode } fr
 import { BackgroundColor, type Space } from '../../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from '../types';
 export type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
-export type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+export type As = 'article' | 'aside' | 'button' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { type ReactElement, type ReactNode } from 'react';
+import { type BaseBoxProps } from './internal/base-box';
+export type PressableProps = Omit<BaseBoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
+    /**
+     * `children` should be defined to ensure buttons are not empty,
+     * because they should have labels.
+     */
+    children: ReactNode;
+    isDisabled?: boolean;
+};
+type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
+/**
+ * __Pressable__
+ *
+ * A Pressable is a primitive component that renders a `<button>`.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+declare const Pressable: PressableComponent;
+export default Pressable;

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

@@ -10,9 +10,11 @@ export type BasePrimitiveProps = {
      */
     style?: CSSProperties;
 };
+type BoxXCSSArray = Array<BoxXCSSArray | BoxXCSS | false | undefined>;
 export type PublicBoxPropsBase = {
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
+    xcss?: BoxXCSS | BoxXCSSArray;
 };
+export {};

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

@@ -1,4 +1,5 @@
 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';

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -50,11 +50,11 @@ export type Space = keyof typeof spaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::80db0ba91b44837306516b95e9cf080e>>
+ * @codegen <<SignedSource::65b57f72ff07d4c4245a3eafe8cef786>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c829bed8504655cd09b971d338d7f3a1>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -291,17 +291,17 @@ export type Layer = keyof typeof layerMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
+ * @codegen <<SignedSource::ffa10f95df2d9bbc0f5d91f9d19b9a69>>
  * @codegenId border
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["width", "radius"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::25105916a589322f57c322068cb0074a>>
  */
 export declare const borderWidthMap: {
     readonly 'border.width': "var(--ds-border-width)";
     readonly 'border.width.0': "var(--ds-border-width-0)";
-    readonly 'border.width.050': "var(--ds-border-width-050)";
-    readonly 'border.width.100': "var(--ds-border-width-100)";
+    readonly 'border.width.indicator': "var(--ds-border-width-indicator)";
+    readonly 'border.width.outline': "var(--ds-border-width-outline)";
 };
 export type BorderWidth = keyof typeof borderWidthMap;
 export declare const borderRadiusMap: {

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

@@ -11,7 +11,7 @@ declare const uniqueSymbol: unique symbol;
  * @returns a collection of styles that can be applied to the respective primitive
  */
 type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
-export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+export declare const parseXcss: (args: XCSS | XCSSArray) => ParsedXcss;
 type CSSMediaQueries = {
     [MQ in MediaQuery]?: Omit<SafeCSSObject, MediaQuery>;
 };
@@ -27,6 +27,7 @@ declare const inlineWrapper: (style: any) => {
     readonly [uniqueSymbol]: InlineStyles;
 };
 type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+type XCSSArray = Array<XCSS | XCSSArray | 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';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -102,7 +102,8 @@
     "./responsive": "./src/responsive/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.10.0",
+    "@atlaskit/focus-ring": "^1.3.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -112,26 +113,14 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "*",
-    "@atlaskit/badge": "*",
-    "@atlaskit/button": "*",
-    "@atlaskit/code": "*",
-    "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "*",
-    "@atlaskit/heading": "*",
-    "@atlaskit/icon": "*",
-    "@atlaskit/icon-object": "*",
-    "@atlaskit/logo": "*",
-    "@atlaskit/lozenge": "*",
-    "@atlaskit/radio": "^5.6.0",
-    "@atlaskit/range": "^7.1.0",
     "@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",
-    "@atlassian/gemini-visual-regression": "^0.0.35",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "csstype": "^3.1.0",

package/report.api.md

@@ -50,6 +50,7 @@ type AllowedBoxStyles = keyof SafeCSSObject;
 type As =
   | 'article'
   | 'aside'
+  | 'button'
   | 'dialog'
   | 'div'
   | 'footer'
@@ -261,8 +262,8 @@ type BorderWidth = keyof typeof borderWidthMap;
 const borderWidthMap: {
   readonly 'border.width': 'var(--ds-border-width)';
   readonly 'border.width.0': 'var(--ds-border-width-0)';
-  readonly 'border.width.050': 'var(--ds-border-width-050)';
-  readonly 'border.width.100': 'var(--ds-border-width-100)';
+  readonly 'border.width.indicator': 'var(--ds-border-width-indicator)';
+  readonly 'border.width.outline': 'var(--ds-border-width-outline)';
 };
 
 // @public
@@ -296,6 +297,9 @@ type BoxXCSS = {
   readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public (undocumented)
+type BoxXCSSArray = Array<BoxXCSS | BoxXCSSArray | false | undefined>;
+
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -413,9 +417,27 @@ const media: {
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
 
+// @public
+export const Pressable: PressableComponent;
+
+// @public (undocumented)
+type PressableComponent = (
+  props: PressableProps,
+  displayName: string,
+) => ReactElement | null;
+
+// @public (undocumented)
+export type PressableProps = Omit<
+  BaseBoxProps<'button'>,
+  'as' | 'children' | 'disabled' | 'role' | 'style'
+> & {
+  children: ReactNode;
+  isDisabled?: boolean;
+};
+
 // @public (undocumented)
 type PublicBoxPropsBase = {
-  xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
+  xcss?: BoxXCSS | BoxXCSSArray;
 };
 
 // @public (undocumented)

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

@@ -36,7 +36,7 @@ type AlignInline_2 = 'center' | 'end' | 'start';
 type AllowedBoxStyles = keyof SafeCSSObject;
 
 // @public (undocumented)
-type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
+type As = 'article' | 'aside' | 'button' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
 
 // @public (undocumented)
 type AutoComplete<T extends string> = Omit<string, T> | T;
@@ -232,8 +232,8 @@ type BorderWidth = keyof typeof borderWidthMap;
 const borderWidthMap: {
     readonly 'border.width': "var(--ds-border-width)";
     readonly 'border.width.0': "var(--ds-border-width-0)";
-    readonly 'border.width.050': "var(--ds-border-width-050)";
-    readonly 'border.width.100': "var(--ds-border-width-100)";
+    readonly 'border.width.indicator': "var(--ds-border-width-indicator)";
+    readonly 'border.width.outline': "var(--ds-border-width-outline)";
 };
 
 // @public
@@ -258,6 +258,9 @@ type BoxXCSS = {
     readonly [uniqueSymbol]: BoxStyles;
 };
 
+// @public (undocumented)
+type BoxXCSSArray = Array<BoxXCSS | BoxXCSSArray | false | undefined>;
+
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -356,9 +359,21 @@ const media: {
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
 
+// @public
+export const Pressable: PressableComponent;
+
+// @public (undocumented)
+type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
+
+// @public (undocumented)
+export type PressableProps = Omit<BaseBoxProps<'button'>, 'as' | 'children' | 'disabled' | 'role' | 'style'> & {
+    children: ReactNode;
+    isDisabled?: boolean;
+};
+
 // @public (undocumented)
 type PublicBoxPropsBase = {
-    xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
+    xcss?: BoxXCSS | BoxXCSSArray;
 };
 
 // @public (undocumented)