@spark-web/columns 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @spark-web/columns
|
|
2
2
|
|
|
3
|
+
## 1.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
8
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
9
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
10
|
+
config
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
14
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
15
|
+
- @spark-web/theme@2.0.0
|
|
16
|
+
- @spark-web/box@1.0.1
|
|
17
|
+
- @spark-web/utils@1.0.1
|
|
18
|
+
|
|
3
19
|
## 1.0.0
|
|
4
20
|
|
|
5
21
|
### Major Changes
|
|
@@ -18,7 +18,7 @@ export declare type ColumnsProps = {
|
|
|
18
18
|
} & ValidBoxProps;
|
|
19
19
|
export declare const Columns: <Comp extends import("react").ElementType<any> = "div">(props: {
|
|
20
20
|
as?: Comp | undefined;
|
|
21
|
-
ref?: import("react").Ref<Comp extends "symbol" | "
|
|
21
|
+
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
22
22
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
23
23
|
/** Vertically align items within the container. */
|
|
24
24
|
alignY?: ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined;
|
|
@@ -5,10 +5,10 @@ declare const alignYLookup: {
|
|
|
5
5
|
readonly stretch: "stretch";
|
|
6
6
|
};
|
|
7
7
|
export declare type AlignY = keyof typeof alignYLookup;
|
|
8
|
-
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined) => "
|
|
9
|
-
mobile: "
|
|
10
|
-
tablet: "
|
|
11
|
-
desktop: "
|
|
12
|
-
wide: "
|
|
8
|
+
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined) => "start" | "stretch" | "center" | "end" | {
|
|
9
|
+
mobile: "start" | "stretch" | "center" | "end" | undefined;
|
|
10
|
+
tablet: "start" | "stretch" | "center" | "end" | undefined;
|
|
11
|
+
desktop: "start" | "stretch" | "center" | "end" | undefined;
|
|
12
|
+
wide: "start" | "stretch" | "center" | "end" | undefined;
|
|
13
13
|
} | undefined;
|
|
14
14
|
export {};
|
|
@@ -2,18 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var _slicedToArray = require('@babel/runtime/helpers/
|
|
7
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/
|
|
8
|
-
var React = require('react');
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
7
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
9
8
|
var css = require('@emotion/css');
|
|
10
9
|
var box = require('@spark-web/box');
|
|
11
10
|
var theme = require('@spark-web/theme');
|
|
12
11
|
var ts = require('@spark-web/utils/ts');
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
12
|
+
var react = require('react');
|
|
13
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
17
14
|
|
|
18
15
|
var alignYLookup = {
|
|
19
16
|
top: 'start',
|
|
@@ -24,7 +21,6 @@ var alignYLookup = {
|
|
|
24
21
|
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
25
22
|
|
|
26
23
|
var _excluded = ["alignY", "collapseBelow", "gap", "template"];
|
|
27
|
-
var __jsx = React__default["default"].createElement;
|
|
28
24
|
var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
29
25
|
var _ref$alignY = _ref.alignY,
|
|
30
26
|
alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
|
|
@@ -38,7 +34,7 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
38
34
|
utils = _useTheme.utils;
|
|
39
35
|
|
|
40
36
|
var alignItems = alignYToAlignItems(alignY);
|
|
41
|
-
var count =
|
|
37
|
+
var count = react.Children.count(props.children);
|
|
42
38
|
var gridTemplateColumns = template ? template.map(function (c) {
|
|
43
39
|
return "".concat(c, "fr");
|
|
44
40
|
}).join(' ') : "repeat(".concat(count, ", 1fr)");
|
|
@@ -52,7 +48,7 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
52
48
|
collapseOnDesktop = _utils$responsiveRang2[2],
|
|
53
49
|
collapseOnWide = _utils$responsiveRang2[3];
|
|
54
50
|
|
|
55
|
-
return
|
|
51
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread({
|
|
56
52
|
ref: forwardedRef,
|
|
57
53
|
className: css.css(utils.resolveResponsiveProps({
|
|
58
54
|
alignItems: alignItems,
|
|
@@ -2,18 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var _slicedToArray = require('@babel/runtime/helpers/
|
|
7
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/
|
|
8
|
-
var React = require('react');
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
7
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
9
8
|
var css = require('@emotion/css');
|
|
10
9
|
var box = require('@spark-web/box');
|
|
11
10
|
var theme = require('@spark-web/theme');
|
|
12
11
|
var ts = require('@spark-web/utils/ts');
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
12
|
+
var react = require('react');
|
|
13
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
17
14
|
|
|
18
15
|
var alignYLookup = {
|
|
19
16
|
top: 'start',
|
|
@@ -24,7 +21,6 @@ var alignYLookup = {
|
|
|
24
21
|
var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
|
|
25
22
|
|
|
26
23
|
var _excluded = ["alignY", "collapseBelow", "gap", "template"];
|
|
27
|
-
var __jsx = React__default["default"].createElement;
|
|
28
24
|
var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
29
25
|
var _ref$alignY = _ref.alignY,
|
|
30
26
|
alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
|
|
@@ -38,7 +34,7 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
38
34
|
utils = _useTheme.utils;
|
|
39
35
|
|
|
40
36
|
var alignItems = alignYToAlignItems(alignY);
|
|
41
|
-
var count =
|
|
37
|
+
var count = react.Children.count(props.children);
|
|
42
38
|
var gridTemplateColumns = template ? template.map(function (c) {
|
|
43
39
|
return "".concat(c, "fr");
|
|
44
40
|
}).join(' ') : "repeat(".concat(count, ", 1fr)");
|
|
@@ -52,7 +48,7 @@ var Columns = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
52
48
|
collapseOnDesktop = _utils$responsiveRang2[2],
|
|
53
49
|
collapseOnWide = _utils$responsiveRang2[3];
|
|
54
50
|
|
|
55
|
-
return
|
|
51
|
+
return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread({
|
|
56
52
|
ref: forwardedRef,
|
|
57
53
|
className: css.css(utils.resolveResponsiveProps({
|
|
58
54
|
alignItems: alignItems,
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
2
|
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
|
|
3
3
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
|
-
import React, { Children } from 'react';
|
|
5
4
|
import { css } from '@emotion/css';
|
|
6
5
|
import { Box } from '@spark-web/box';
|
|
7
6
|
import { createResponsiveMapFn, useTheme } from '@spark-web/theme';
|
|
8
7
|
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
8
|
+
import { Children } from 'react';
|
|
9
|
+
import { jsx } from 'react/jsx-runtime';
|
|
9
10
|
|
|
10
11
|
var alignYLookup = {
|
|
11
12
|
top: 'start',
|
|
@@ -16,7 +17,6 @@ var alignYLookup = {
|
|
|
16
17
|
var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
|
|
17
18
|
|
|
18
19
|
var _excluded = ["alignY", "collapseBelow", "gap", "template"];
|
|
19
|
-
var __jsx = React.createElement;
|
|
20
20
|
var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
21
21
|
var _ref$alignY = _ref.alignY,
|
|
22
22
|
alignY = _ref$alignY === void 0 ? 'top' : _ref$alignY,
|
|
@@ -44,7 +44,7 @@ var Columns = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
|
44
44
|
collapseOnDesktop = _utils$responsiveRang2[2],
|
|
45
45
|
collapseOnWide = _utils$responsiveRang2[3];
|
|
46
46
|
|
|
47
|
-
return
|
|
47
|
+
return /*#__PURE__*/jsx(Box, _objectSpread({
|
|
48
48
|
ref: forwardedRef,
|
|
49
49
|
className: css(utils.resolveResponsiveProps({
|
|
50
50
|
alignItems: alignItems,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/columns",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.1",
|
|
5
5
|
"main": "dist/spark-web-columns.cjs.js",
|
|
6
6
|
"module": "dist/spark-web-columns.esm.js",
|
|
7
7
|
"devDependencies": {
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@babel/runtime": "^7.14.6",
|
|
12
12
|
"@emotion/css": "^11.7.1",
|
|
13
|
-
"@spark-web/box": "^1.0.
|
|
14
|
-
"@spark-web/theme": "^
|
|
15
|
-
"@spark-web/utils": "^1.0.
|
|
13
|
+
"@spark-web/box": "^1.0.1",
|
|
14
|
+
"@spark-web/theme": "^2.0.0",
|
|
15
|
+
"@spark-web/utils": "^1.0.1",
|
|
16
16
|
"react": "^17.0.2"
|
|
17
17
|
},
|
|
18
18
|
"engines": {
|