@atlaskit/primitives
Advanced tools
Comparing version 0.0.2 to 0.1.0
# @atlaskit/primitives | ||
## 0.1.0 | ||
### Minor Changes | ||
- [`eeb8baa5d74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eeb8baa5d74) - - Create `Stack` component | ||
- Create `Inline` component | ||
## 0.0.2 | ||
@@ -4,0 +11,0 @@ |
"use strict"; | ||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
Object.defineProperty(exports, "Inline", { | ||
enumerable: true, | ||
get: function get() { | ||
return _inline.default; | ||
} | ||
exports.default = void 0; | ||
var _react = require("react"); | ||
var _react2 = require("@emotion/react"); | ||
/** @jsx jsx */ | ||
var alignItemsMap = { | ||
center: (0, _react2.css)({ | ||
alignItems: 'center' | ||
}), | ||
baseline: (0, _react2.css)({ | ||
alignItems: 'baseline' | ||
}), | ||
start: (0, _react2.css)({ | ||
alignItems: 'flex-start' | ||
}), | ||
end: (0, _react2.css)({ | ||
alignItems: 'flex-end' | ||
}) | ||
}; | ||
var justifyContentMap = { | ||
start: (0, _react2.css)({ | ||
justifyContent: 'flex-start' | ||
}), | ||
center: (0, _react2.css)({ | ||
justifyContent: 'center' | ||
}), | ||
end: (0, _react2.css)({ | ||
justifyContent: 'flex-end' | ||
}), | ||
'space-between': (0, _react2.css)({ | ||
justifyContent: 'space-between' | ||
}) | ||
}; | ||
var flexGrowMap = { | ||
hug: (0, _react2.css)({ | ||
flexGrow: 0 | ||
}), | ||
fill: (0, _react2.css)({ | ||
flexGrow: 1 | ||
}) | ||
}; | ||
var flexWrapStyles = (0, _react2.css)({ | ||
flexWrap: 'wrap' | ||
}); | ||
var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline")); | ||
/** | ||
* 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': (0, _react2.css)({ | ||
gap: "var(--ds-space-0, 0px)" | ||
}), | ||
'025': (0, _react2.css)({ | ||
gap: "var(--ds-space-025, 2px)" | ||
}), | ||
'050': (0, _react2.css)({ | ||
gap: "var(--ds-space-050, 4px)" | ||
}), | ||
'075': (0, _react2.css)({ | ||
gap: "var(--ds-space-075, 6px)" | ||
}), | ||
'100': (0, _react2.css)({ | ||
gap: "var(--ds-space-100, 8px)" | ||
}), | ||
'1000': (0, _react2.css)({ | ||
gap: "var(--ds-space-1000, 80px)" | ||
}), | ||
'150': (0, _react2.css)({ | ||
gap: "var(--ds-space-150, 12px)" | ||
}), | ||
'200': (0, _react2.css)({ | ||
gap: "var(--ds-space-200, 16px)" | ||
}), | ||
'250': (0, _react2.css)({ | ||
gap: "var(--ds-space-250, 20px)" | ||
}), | ||
'300': (0, _react2.css)({ | ||
gap: "var(--ds-space-300, 24px)" | ||
}), | ||
'400': (0, _react2.css)({ | ||
gap: "var(--ds-space-400, 32px)" | ||
}), | ||
'500': (0, _react2.css)({ | ||
gap: "var(--ds-space-500, 40px)" | ||
}), | ||
'600': (0, _react2.css)({ | ||
gap: "var(--ds-space-600, 48px)" | ||
}), | ||
'800': (0, _react2.css)({ | ||
gap: "var(--ds-space-800, 64px)" | ||
}) | ||
}; | ||
/** | ||
* @codegenEnd | ||
*/ | ||
var baseStyles = (0, _react2.css)({ | ||
display: 'flex', | ||
boxSizing: 'border-box', | ||
flexDirection: 'row' | ||
}); | ||
var separatorStyles = (0, _react2.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 (0, _react2.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__*/(0, _react.memo)( /*#__PURE__*/(0, _react.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' ? (0, _react2.jsx)(Separator, null, separator) : separator; | ||
var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) { | ||
return (0, _react2.jsx)(_react.Fragment, { | ||
key: index | ||
}, separator && index > 0 ? separatorComponent : null, child); | ||
}) : rawChildren; | ||
var justifyContent = spread || alignInline; | ||
return (0, _react2.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'; | ||
var _default = Inline; | ||
exports.default = _default; |
"use strict"; | ||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
Object.defineProperty(exports, "Stack", { | ||
enumerable: true, | ||
get: function get() { | ||
return _stack.default; | ||
} | ||
exports.default = void 0; | ||
var _react = require("react"); | ||
var _react2 = require("@emotion/react"); | ||
/** @jsx jsx */ | ||
var justifyContentMap = { | ||
start: (0, _react2.css)({ | ||
justifyContent: 'start' | ||
}), | ||
center: (0, _react2.css)({ | ||
justifyContent: 'center' | ||
}), | ||
end: (0, _react2.css)({ | ||
justifyContent: 'end' | ||
}), | ||
'space-between': (0, _react2.css)({ | ||
justifyContent: 'space-between' | ||
}) | ||
}; | ||
var alignItemsMap = { | ||
start: (0, _react2.css)({ | ||
alignItems: 'start' | ||
}), | ||
center: (0, _react2.css)({ | ||
alignItems: 'center' | ||
}), | ||
end: (0, _react2.css)({ | ||
alignItems: 'end' | ||
}) | ||
}; | ||
var flexGrowMap = { | ||
hug: (0, _react2.css)({ | ||
flexGrow: 0 | ||
}), | ||
fill: (0, _react2.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': (0, _react2.css)({ | ||
gap: "var(--ds-space-0, 0px)" | ||
}), | ||
'025': (0, _react2.css)({ | ||
gap: "var(--ds-space-025, 2px)" | ||
}), | ||
'050': (0, _react2.css)({ | ||
gap: "var(--ds-space-050, 4px)" | ||
}), | ||
'075': (0, _react2.css)({ | ||
gap: "var(--ds-space-075, 6px)" | ||
}), | ||
'100': (0, _react2.css)({ | ||
gap: "var(--ds-space-100, 8px)" | ||
}), | ||
'1000': (0, _react2.css)({ | ||
gap: "var(--ds-space-1000, 80px)" | ||
}), | ||
'150': (0, _react2.css)({ | ||
gap: "var(--ds-space-150, 12px)" | ||
}), | ||
'200': (0, _react2.css)({ | ||
gap: "var(--ds-space-200, 16px)" | ||
}), | ||
'250': (0, _react2.css)({ | ||
gap: "var(--ds-space-250, 20px)" | ||
}), | ||
'300': (0, _react2.css)({ | ||
gap: "var(--ds-space-300, 24px)" | ||
}), | ||
'400': (0, _react2.css)({ | ||
gap: "var(--ds-space-400, 32px)" | ||
}), | ||
'500': (0, _react2.css)({ | ||
gap: "var(--ds-space-500, 40px)" | ||
}), | ||
'600': (0, _react2.css)({ | ||
gap: "var(--ds-space-600, 48px)" | ||
}), | ||
'800': (0, _react2.css)({ | ||
gap: "var(--ds-space-800, 64px)" | ||
}) | ||
}; | ||
/** | ||
* @codegenEnd | ||
*/ | ||
var baseStyles = (0, _react2.css)({ | ||
display: 'flex', | ||
boxSizing: 'border-box', | ||
flexDirection: 'column' | ||
}); | ||
var _stack = _interopRequireDefault(require("@atlaskit/ds-explorations/stack")); | ||
/** | ||
* __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__*/(0, _react.memo)( /*#__PURE__*/(0, _react.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 (0, _react2.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'; | ||
var _default = Stack; | ||
exports.default = _default; |
"use strict"; | ||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
Object.defineProperty(exports, "__esModule", { | ||
@@ -15,3 +16,3 @@ value: true | ||
get: function get() { | ||
return _inline.Inline; | ||
return _inline.default; | ||
} | ||
@@ -22,7 +23,7 @@ }); | ||
get: function get() { | ||
return _stack.Stack; | ||
return _stack.default; | ||
} | ||
}); | ||
var _stack = require("./components/stack.partial"); | ||
var _stack = _interopRequireDefault(require("./components/stack.partial")); | ||
var _box = require("./components/box"); | ||
var _inline = require("./components/inline.partial"); | ||
var _inline = _interopRequireDefault(require("./components/inline.partial")); |
{ | ||
"name": "@atlaskit/primitives", | ||
"version": "0.0.2", | ||
"version": "0.1.0", | ||
"sideEffects": false | ||
} |
@@ -1,2 +0,158 @@ | ||
// 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'; | ||
const alignItemsMap = { | ||
center: css({ | ||
alignItems: 'center' | ||
}), | ||
baseline: css({ | ||
alignItems: 'baseline' | ||
}), | ||
start: css({ | ||
alignItems: 'flex-start' | ||
}), | ||
end: css({ | ||
alignItems: 'flex-end' | ||
}) | ||
}; | ||
const justifyContentMap = { | ||
start: css({ | ||
justifyContent: 'flex-start' | ||
}), | ||
center: css({ | ||
justifyContent: 'center' | ||
}), | ||
end: css({ | ||
justifyContent: 'flex-end' | ||
}), | ||
'space-between': css({ | ||
justifyContent: 'space-between' | ||
}) | ||
}; | ||
const flexGrowMap = { | ||
hug: css({ | ||
flexGrow: 0 | ||
}), | ||
fill: css({ | ||
flexGrow: 1 | ||
}) | ||
}; | ||
const 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>> | ||
*/ | ||
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: 'row' | ||
}); | ||
const separatorStyles = css({ | ||
color: "var(--ds-text-subtle, #42526E)", | ||
marginBlock: "var(--ds-space-0, 0px)", | ||
marginInline: `-${"var(--ds-space-025, 2px)"}`, | ||
pointerEvents: 'none', | ||
userSelect: 'none' | ||
}); | ||
const Separator = ({ | ||
children | ||
}) => 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> | ||
* ``` | ||
* | ||
*/ | ||
const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({ | ||
alignInline, | ||
alignBlock: alignItems, | ||
shouldWrap = false, | ||
spread, | ||
grow, | ||
space, | ||
separator, | ||
testId, | ||
children: rawChildren | ||
}, ref) => { | ||
const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator; | ||
const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => { | ||
return jsx(Fragment, { | ||
key: index | ||
}, separator && index > 0 ? separatorComponent : null, child); | ||
}) : rawChildren; | ||
const 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; |
@@ -1,2 +0,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; |
@@ -1,3 +0,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'; |
{ | ||
"name": "@atlaskit/primitives", | ||
"version": "0.0.2", | ||
"version": "0.1.0", | ||
"sideEffects": false | ||
} |
@@ -1,2 +0,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; |
@@ -1,2 +0,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; |
@@ -1,3 +0,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'; |
{ | ||
"name": "@atlaskit/primitives", | ||
"version": "0.0.2", | ||
"version": "0.1.0", | ||
"sideEffects": false | ||
} |
@@ -1,1 +0,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; |
@@ -1,1 +0,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; |
@@ -1,3 +0,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'; |
{ | ||
"name": "@atlaskit/primitives", | ||
"version": "0.0.2", | ||
"version": "0.1.0", | ||
"description": "Primitives are token-backed low-level building blocks.", | ||
@@ -52,2 +52,3 @@ "author": "Atlassian Pty Ltd", | ||
"@atlaskit/ds-lib": "*", | ||
"@atlaskit/heading": "*", | ||
"@atlaskit/ssr": "*", | ||
@@ -90,2 +91,2 @@ "@atlaskit/visual-regression": "*", | ||
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0" | ||
} | ||
} |
@@ -19,11 +19,110 @@ <!-- API Report Version: 2.3 --> | ||
import { default as Box } from '@atlaskit/ds-explorations/box'; | ||
import { default as Inline } from '@atlaskit/ds-explorations/inline'; | ||
import { default as Stack } from '@atlaskit/ds-explorations/stack'; | ||
import { ForwardRefExoticComponent } from 'react'; | ||
import { MemoExoticComponent } from 'react'; | ||
import { ReactNode } from 'react'; | ||
import { RefAttributes } from 'react'; | ||
import { SerializedStyles } from '@emotion/react'; | ||
// @public (undocumented) | ||
type AlignBlock = 'center' | 'end' | 'start'; | ||
// @public (undocumented) | ||
type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start'; | ||
// @public (undocumented) | ||
type AlignInline = 'center' | 'end' | 'start'; | ||
// @public (undocumented) | ||
type AlignInline_2 = 'center' | 'end' | 'start'; | ||
export { Box }; | ||
export { Inline }; | ||
// @public (undocumented) | ||
type Grow = 'fill' | 'hug'; | ||
export { Stack }; | ||
// @public (undocumented) | ||
type Grow_2 = 'fill' | 'hug'; | ||
// @public | ||
export const Inline: MemoExoticComponent< | ||
ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>> | ||
>; | ||
// @public (undocumented) | ||
interface InlineProps { | ||
alignBlock?: AlignBlock_2; | ||
alignInline?: AlignInline_2; | ||
children: ReactNode; | ||
grow?: Grow_2; | ||
separator?: string; | ||
shouldWrap?: boolean; | ||
space?: Space_2; | ||
spread?: Spread_2; | ||
testId?: string; | ||
} | ||
// @public (undocumented) | ||
type Space = keyof typeof spaceMap; | ||
// @public (undocumented) | ||
type Space_2 = keyof typeof spaceMap_2; | ||
// @public | ||
const spaceMap: { | ||
'0': SerializedStyles; | ||
'025': SerializedStyles; | ||
'050': SerializedStyles; | ||
'075': SerializedStyles; | ||
'100': SerializedStyles; | ||
'1000': SerializedStyles; | ||
'150': SerializedStyles; | ||
'200': SerializedStyles; | ||
'250': SerializedStyles; | ||
'300': SerializedStyles; | ||
'400': SerializedStyles; | ||
'500': SerializedStyles; | ||
'600': SerializedStyles; | ||
'800': SerializedStyles; | ||
}; | ||
// @public | ||
const spaceMap_2: { | ||
'0': SerializedStyles; | ||
'025': SerializedStyles; | ||
'050': SerializedStyles; | ||
'075': SerializedStyles; | ||
'100': SerializedStyles; | ||
'1000': SerializedStyles; | ||
'150': SerializedStyles; | ||
'200': SerializedStyles; | ||
'250': SerializedStyles; | ||
'300': SerializedStyles; | ||
'400': SerializedStyles; | ||
'500': SerializedStyles; | ||
'600': SerializedStyles; | ||
'800': SerializedStyles; | ||
}; | ||
// @public (undocumented) | ||
type Spread = 'space-between'; | ||
// @public (undocumented) | ||
type Spread_2 = 'space-between'; | ||
// @public | ||
export const Stack: MemoExoticComponent< | ||
ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>> | ||
>; | ||
// @public (undocumented) | ||
interface StackProps { | ||
alignBlock?: AlignBlock; | ||
alignInline?: AlignInline; | ||
children: ReactNode; | ||
grow?: Grow; | ||
space?: Space; | ||
spread?: Spread; | ||
testId?: string; | ||
} | ||
// (No @packageDocumentation comment for this package) | ||
@@ -30,0 +129,0 @@ ``` |
@@ -8,13 +8,108 @@ ## API Report File for "@atlaskit/primitives" | ||
import { default as Box } from '@atlaskit/ds-explorations/box'; | ||
import { default as Inline } from '@atlaskit/ds-explorations/inline'; | ||
import { default as Stack } from '@atlaskit/ds-explorations/stack'; | ||
import { ForwardRefExoticComponent } from 'react'; | ||
import { MemoExoticComponent } from 'react'; | ||
import { ReactNode } from 'react'; | ||
import { RefAttributes } from 'react'; | ||
import { SerializedStyles } from '@emotion/react'; | ||
// @public (undocumented) | ||
type AlignBlock = 'center' | 'end' | 'start'; | ||
// @public (undocumented) | ||
type AlignBlock_2 = 'baseline' | 'center' | 'end' | 'start'; | ||
// @public (undocumented) | ||
type AlignInline = 'center' | 'end' | 'start'; | ||
// @public (undocumented) | ||
type AlignInline_2 = 'center' | 'end' | 'start'; | ||
export { Box } | ||
export { Inline } | ||
// @public (undocumented) | ||
type Grow = 'fill' | 'hug'; | ||
export { Stack } | ||
// @public (undocumented) | ||
type Grow_2 = 'fill' | 'hug'; | ||
// @public | ||
export const Inline: MemoExoticComponent<ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>>; | ||
// @public (undocumented) | ||
interface InlineProps { | ||
alignBlock?: AlignBlock_2; | ||
alignInline?: AlignInline_2; | ||
children: ReactNode; | ||
grow?: Grow_2; | ||
separator?: string; | ||
shouldWrap?: boolean; | ||
space?: Space_2; | ||
spread?: Spread_2; | ||
testId?: string; | ||
} | ||
// @public (undocumented) | ||
type Space = keyof typeof spaceMap; | ||
// @public (undocumented) | ||
type Space_2 = keyof typeof spaceMap_2; | ||
// @public | ||
const spaceMap: { | ||
'0': SerializedStyles; | ||
'025': SerializedStyles; | ||
'050': SerializedStyles; | ||
'075': SerializedStyles; | ||
'100': SerializedStyles; | ||
'1000': SerializedStyles; | ||
'150': SerializedStyles; | ||
'200': SerializedStyles; | ||
'250': SerializedStyles; | ||
'300': SerializedStyles; | ||
'400': SerializedStyles; | ||
'500': SerializedStyles; | ||
'600': SerializedStyles; | ||
'800': SerializedStyles; | ||
}; | ||
// @public | ||
const spaceMap_2: { | ||
'0': SerializedStyles; | ||
'025': SerializedStyles; | ||
'050': SerializedStyles; | ||
'075': SerializedStyles; | ||
'100': SerializedStyles; | ||
'1000': SerializedStyles; | ||
'150': SerializedStyles; | ||
'200': SerializedStyles; | ||
'250': SerializedStyles; | ||
'300': SerializedStyles; | ||
'400': SerializedStyles; | ||
'500': SerializedStyles; | ||
'600': SerializedStyles; | ||
'800': SerializedStyles; | ||
}; | ||
// @public (undocumented) | ||
type Spread = 'space-between'; | ||
// @public (undocumented) | ||
type Spread_2 = 'space-between'; | ||
// @public | ||
export const Stack: MemoExoticComponent<ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>>; | ||
// @public (undocumented) | ||
interface StackProps { | ||
alignBlock?: AlignBlock; | ||
alignInline?: AlignInline; | ||
children: ReactNode; | ||
grow?: Grow; | ||
space?: Space; | ||
spread?: Spread; | ||
testId?: string; | ||
} | ||
// (No @packageDocumentation comment for this package) | ||
``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
127918
4001
14