@spark-web/row 1.0.2 → 1.0.5

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.
Files changed (12) hide show
  1. package/README.md +10 -7
  2. package/dist/declarations/src/Row.d.ts +8 -3
  3. package/dist/declarations/src/alignment.d.ts +10 -10
  4. package/dist/spark-web-row.cjs.dev.js +8 -3
  5. package/dist/spark-web-row.cjs.prod.js +8 -3
  6. package/dist/spark-web-row.esm.js +8 -3
  7. package/package.json +16 -10
  8. package/CHANGELOG.md +0 -51
  9. package/src/Row.stories.tsx +0 -27
  10. package/src/Row.tsx +0 -60
  11. package/src/alignment.ts +0 -15
  12. package/src/index.ts +0 -5
package/README.md CHANGED
@@ -112,11 +112,12 @@ element in the Row.
112
112
 
113
113
  ## Props
114
114
 
115
- | Prop | Type | Default | Description |
116
- | --------- | ---------------------------------- | --------- | ----------------------------------------------------- |
117
- | align? | [ResponsiveProp<Align\>][align] | 'left' | Horizontally align items within the container. |
118
- | alignY? | [ResponsiveProp<AlignY\>][align-y] | 'stretch' | Vertically align items within the container. |
119
- | dividers? | boolean | | Sets whether to place a divider between each element. |
115
+ | Prop | Type | Default | Description |
116
+ | --------- | -------------------------------------- | --------- | ----------------------------------------------------- |
117
+ | align? | [ResponsiveProp\<Align>][align] | 'left' | Horizontally align items within the container. |
118
+ | alignY? | [ResponsiveProp\<AlignY>][align-y] | 'stretch' | Vertically align items within the container. |
119
+ | dividers? | boolean | | Sets whether to place a divider between each element. |
120
+ | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
120
121
 
121
122
  `Row` props also include [`Box`](/package/box) props and are not listed here
122
123
  (excludes `display`, `alignItems`, `flexDirection`, `justifyContent` and
@@ -125,6 +126,8 @@ element in the Row.
125
126
  Extra props are also passed into the underlying [`Box`](/package/box) component.
126
127
 
127
128
  [align]:
128
- https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/inline/src/Inline.tsx#spark-web/packages/inline/src/Inline.tsx-20
129
+ https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L16
129
130
  [align-y]:
130
- https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/inline/src/Inline.tsx#spark-web/packages/inline/src/Inline.tsx-22
131
+ https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L18
132
+ [data-attribute-map]:
133
+ https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
package/dist/declarations/src/Row.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { BoxProps } from '@spark-web/box';
2
2
  import type { ResponsiveProp } from '@spark-web/theme';
3
+ import type { DataAttributeMap } from '@spark-web/utils/internal';
3
4
  import type { ReactElement } from 'react';
4
5
  import type { Align, AlignY } from './alignment';
5
6
  declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'>;
@@ -8,17 +9,21 @@ export declare type RowProps = {
8
9
  align?: ResponsiveProp<Align>;
9
10
  /** Vertically align items within the container. */
10
11
  alignY?: ResponsiveProp<AlignY>;
12
+ /** Allows setting of data attributes on the underlying element. */
13
+ data?: DataAttributeMap;
11
14
  /** Place a divider between each element. */
12
15
  dividers?: boolean;
13
16
  } & ValidBoxProps;
14
17
  export declare const Row: <Comp extends import("react").ElementType<any> = "div">(props: {
15
18
  as?: Comp | undefined;
16
- ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "circle" | "svg" | "animate" | "animateMotion" | "animateTransform" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
19
+ ref?: import("react").Ref<Comp extends "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
17
20
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
18
21
  /** Horizontally align items within the container. */
19
- align?: ResponsiveProp<"left" | "right" | "center"> | undefined;
22
+ align?: ResponsiveProp<"right" | "left" | "center"> | undefined;
20
23
  /** Vertically align items within the container. */
21
- alignY?: ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined;
24
+ alignY?: ResponsiveProp<"top" | "bottom" | "center" | "stretch"> | undefined;
25
+ /** Allows setting of data attributes on the underlying element. */
26
+ data?: DataAttributeMap | undefined;
22
27
  /** Place a divider between each element. */
23
28
  dividers?: boolean | undefined;
24
29
  } & ValidBoxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/declarations/src/alignment.d.ts CHANGED
@@ -11,16 +11,16 @@ declare const alignYLookup: {
11
11
  };
12
12
  export declare type Align = keyof typeof alignLookup;
13
13
  export declare type AlignY = keyof typeof alignYLookup;
14
- export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"left" | "right" | "center"> | undefined) => "center" | "end" | "start" | {
15
- mobile: "center" | "end" | "start" | undefined;
16
- tablet: "center" | "end" | "start" | undefined;
17
- desktop: "center" | "end" | "start" | undefined;
18
- wide: "center" | "end" | "start" | undefined;
14
+ export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"right" | "left" | "center"> | undefined) => "center" | "start" | "end" | {
15
+ mobile: "center" | "start" | "end" | undefined;
16
+ tablet: "center" | "start" | "end" | undefined;
17
+ desktop: "center" | "start" | "end" | undefined;
18
+ wide: "center" | "start" | "end" | undefined;
19
19
  } | undefined;
20
- export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined) => "stretch" | "center" | "end" | "start" | {
21
- mobile: "stretch" | "center" | "end" | "start" | undefined;
22
- tablet: "stretch" | "center" | "end" | "start" | undefined;
23
- desktop: "stretch" | "center" | "end" | "start" | undefined;
24
- wide: "stretch" | "center" | "end" | "start" | undefined;
20
+ export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"top" | "bottom" | "center" | "stretch"> | undefined) => "center" | "stretch" | "start" | "end" | {
21
+ mobile: "center" | "stretch" | "start" | "end" | undefined;
22
+ tablet: "center" | "stretch" | "start" | "end" | undefined;
23
+ desktop: "center" | "stretch" | "start" | "end" | undefined;
24
+ wide: "center" | "stretch" | "start" | "end" | undefined;
25
25
  } | undefined;
26
26
  export {};
package/dist/spark-web-row.cjs.dev.js CHANGED
@@ -25,13 +25,14 @@ var alignYLookup = {
25
25
  var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
26
26
  var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
27
27
 
28
- var _excluded = ["align", "alignY", "children", "dividers"];
28
+ var _excluded = ["align", "alignY", "children", "data", "dividers"];
29
29
  var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
30
30
  var _ref$align = _ref.align,
31
31
  align = _ref$align === void 0 ? 'left' : _ref$align,
32
32
  _ref$alignY = _ref.alignY,
33
33
  alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
34
34
  children = _ref.children,
35
+ data = _ref.data,
35
36
  dividers = _ref.dividers,
36
37
  props = _objectWithoutProperties(_ref, _excluded);
37
38
 
@@ -47,7 +48,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
47
48
 
48
49
 
49
50
  if (!dividers) {
50
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
51
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
52
+ data: data
53
+ }, rootProps), {}, {
51
54
  children: children
52
55
  }));
53
56
  } // map over children to insert dividers
@@ -55,7 +58,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
55
58
 
56
59
 
57
60
  var childArray = react.Children.toArray(children);
58
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
61
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
62
+ data: data
63
+ }, rootProps), {}, {
59
64
  children: childArray.map(function (child, idx) {
60
65
  return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
61
66
  children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {
package/dist/spark-web-row.cjs.prod.js CHANGED
@@ -25,13 +25,14 @@ var alignYLookup = {
25
25
  var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
26
26
  var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
27
27
 
28
- var _excluded = ["align", "alignY", "children", "dividers"];
28
+ var _excluded = ["align", "alignY", "children", "data", "dividers"];
29
29
  var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
30
30
  var _ref$align = _ref.align,
31
31
  align = _ref$align === void 0 ? 'left' : _ref$align,
32
32
  _ref$alignY = _ref.alignY,
33
33
  alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
34
34
  children = _ref.children,
35
+ data = _ref.data,
35
36
  dividers = _ref.dividers,
36
37
  props = _objectWithoutProperties(_ref, _excluded);
37
38
 
@@ -47,7 +48,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
47
48
 
48
49
 
49
50
  if (!dividers) {
50
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
51
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
52
+ data: data
53
+ }, rootProps), {}, {
51
54
  children: children
52
55
  }));
53
56
  } // map over children to insert dividers
@@ -55,7 +58,9 @@ var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
55
58
 
56
59
 
57
60
  var childArray = react.Children.toArray(children);
58
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
61
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
62
+ data: data
63
+ }, rootProps), {}, {
59
64
  children: childArray.map(function (child, idx) {
60
65
  return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
61
66
  children: [dividers && idx ? /*#__PURE__*/jsxRuntime.jsx(divider.Divider, {
package/dist/spark-web-row.esm.js CHANGED
@@ -21,13 +21,14 @@ var alignYLookup = {
21
21
  var alignToJustifyContent = createResponsiveMapFn(alignLookup);
22
22
  var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
23
23
 
24
- var _excluded = ["align", "alignY", "children", "dividers"];
24
+ var _excluded = ["align", "alignY", "children", "data", "dividers"];
25
25
  var Row = forwardRefWithAs(function (_ref, forwardedRef) {
26
26
  var _ref$align = _ref.align,
27
27
  align = _ref$align === void 0 ? 'left' : _ref$align,
28
28
  _ref$alignY = _ref.alignY,
29
29
  alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
30
30
  children = _ref.children,
31
+ data = _ref.data,
31
32
  dividers = _ref.dividers,
32
33
  props = _objectWithoutProperties(_ref, _excluded);
33
34
 
@@ -43,7 +44,9 @@ var Row = forwardRefWithAs(function (_ref, forwardedRef) {
43
44
 
44
45
 
45
46
  if (!dividers) {
46
- return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, rootProps), {}, {
47
+ return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
48
+ data: data
49
+ }, rootProps), {}, {
47
50
  children: children
48
51
  }));
49
52
  } // map over children to insert dividers
@@ -51,7 +54,9 @@ var Row = forwardRefWithAs(function (_ref, forwardedRef) {
51
54
 
52
55
 
53
56
  var childArray = Children.toArray(children);
54
- return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, rootProps), {}, {
57
+ return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
58
+ data: data
59
+ }, rootProps), {}, {
55
60
  children: childArray.map(function (child, idx) {
56
61
  return /*#__PURE__*/jsxs(Fragment, {
57
62
  children: [dividers && idx ? /*#__PURE__*/jsx(Divider, {
package/package.json CHANGED
@@ -1,21 +1,27 @@
1
1
  {
2
2
  "name": "@spark-web/row",
3
+ "version": "1.0.5",
3
4
  "license": "MIT",
4
- "version": "1.0.2",
5
5
  "main": "dist/spark-web-row.cjs.js",
6
6
  "module": "dist/spark-web-row.esm.js",
7
- "devDependencies": {
8
- "@types/react": "^17.0.12"
9
- },
7
+ "files": [
8
+ "dist"
9
+ ],
10
10
  "dependencies": {
11
- "@babel/runtime": "^7.14.6",
12
- "@emotion/css": "^11.7.1",
13
- "@spark-web/box": "^1.0.2",
14
- "@spark-web/divider": "^1.0.2",
15
- "@spark-web/theme": "^2.0.1",
16
- "@spark-web/utils": "^1.0.2",
11
+ "@babel/runtime": "^7.18.0",
12
+ "@emotion/css": "^11.9.0",
13
+ "@spark-web/box": "^1.0.5",
14
+ "@spark-web/divider": "^1.0.5",
15
+ "@spark-web/theme": "^3.0.1",
16
+ "@spark-web/utils": "^1.1.3"
17
+ },
18
+ "devDependencies": {
19
+ "@types/react": "^17.0.12",
17
20
  "react": "^17.0.2"
18
21
  },
22
+ "peerDependencies": {
23
+ "react": ">=17.0.2"
24
+ },
19
25
  "engines": {
20
26
  "node": ">= 14.13"
21
27
  }
package/CHANGELOG.md DELETED
@@ -1,51 +0,0 @@
1
- # @spark-web/row
2
-
3
- ## 1.0.2
4
-
5
- ### Patch Changes
6
-
7
- - [#40](https://github.com/brighte-labs/spark-web/pull/40)
8
- [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
9
- Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
10
- @babel/transform-runtime
11
-
12
- - Updated dependencies
13
- [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
14
- - @spark-web/box@1.0.2
15
- - @spark-web/divider@1.0.2
16
- - @spark-web/theme@2.0.1
17
- - @spark-web/utils@1.0.2
18
-
19
- ## 1.0.1
20
-
21
- ### Patch Changes
22
-
23
- - [#36](https://github.com/brighte-labs/spark-web/pull/36)
24
- [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
25
- Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
26
- config
27
-
28
- - Updated dependencies
29
- [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
30
- [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
31
- - @spark-web/theme@2.0.0
32
- - @spark-web/box@1.0.1
33
- - @spark-web/divider@1.0.1
34
- - @spark-web/utils@1.0.1
35
-
36
- ## 1.0.0
37
-
38
- ### Major Changes
39
-
40
- - [#27](https://github.com/brighte-labs/spark-web/pull/27)
41
- [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
42
- Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
43
-
44
- ### Patch Changes
45
-
46
- - Updated dependencies
47
- [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
48
- - @spark-web/box@1.0.0
49
- - @spark-web/divider@1.0.0
50
- - @spark-web/theme@1.0.0
51
- - @spark-web/utils@1.0.0
package/src/Row.stories.tsx DELETED
@@ -1,27 +0,0 @@
1
- import type { ComponentMeta, ComponentStory } from '@storybook/react';
2
-
3
- import { Placeholder } from '../../../docs/components/example-helpers';
4
- import type { RowProps } from './Row';
5
- import { Row } from './Row';
6
-
7
- export default {
8
- title: 'Page & Layout / Row',
9
- component: Row,
10
- } as ComponentMeta<typeof Row>;
11
-
12
- const RowStory: ComponentStory<typeof Row> = (
13
- args: Omit<RowProps, 'className'>
14
- ) => <Row {...args} />;
15
-
16
- export const Default = RowStory.bind({});
17
-
18
- Default.args = {
19
- gap: 'large',
20
- children: (
21
- <>
22
- <Placeholder height={40} />
23
- <Placeholder height={40} />
24
- <Placeholder height={40} />
25
- </>
26
- ),
27
- } as RowProps;
package/src/Row.tsx DELETED
@@ -1,60 +0,0 @@
1
- import type { BoxProps } from '@spark-web/box';
2
- import { Box } from '@spark-web/box';
3
- import { Divider } from '@spark-web/divider';
4
- import type { ResponsiveProp } from '@spark-web/theme';
5
- import { forwardRefWithAs } from '@spark-web/utils/ts';
6
- import type { ReactElement } from 'react';
7
- import { Children, Fragment } from 'react';
8
-
9
- import type { Align, AlignY } from './alignment';
10
- import { alignToJustifyContent, alignYToAlignItems } from './alignment';
11
-
12
- type ValidBoxProps = Omit<
13
- BoxProps,
14
- 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'
15
- >;
16
-
17
- export type RowProps = {
18
- /** Horizontally align items within the container. */
19
- align?: ResponsiveProp<Align>;
20
- /** Vertically align items within the container. */
21
- alignY?: ResponsiveProp<AlignY>;
22
- /** Place a divider between each element. */
23
- dividers?: boolean;
24
- } & ValidBoxProps;
25
-
26
- export const Row = forwardRefWithAs<'div', RowProps>(
27
- (
28
- { align = 'left', alignY = 'stretch', children, dividers, ...props },
29
- forwardedRef
30
- ) => {
31
- const justifyContent = alignToJustifyContent(align);
32
- const alignItems = alignYToAlignItems(alignY);
33
- const rootProps = {
34
- ref: forwardedRef,
35
- display: 'flex',
36
- alignItems,
37
- justifyContent,
38
- ...props,
39
- } as const;
40
-
41
- // bail early w/o dividers to avoid unnecessary map
42
- if (!dividers) {
43
- return <Box {...rootProps}>{children}</Box>;
44
- }
45
-
46
- // map over children to insert dividers
47
- // remove falsy values before mapping, keeps the index in sync
48
- const childArray = Children.toArray(children) as ReactElement[];
49
- return (
50
- <Box {...rootProps}>
51
- {childArray.map((child, idx) => (
52
- <Fragment key={child.key || idx}>
53
- {dividers && idx ? <Divider vertical /> : null}
54
- {child}
55
- </Fragment>
56
- ))}
57
- </Box>
58
- );
59
- }
60
- );
package/src/alignment.ts DELETED
@@ -1,15 +0,0 @@
1
- import { createResponsiveMapFn } from '@spark-web/theme';
2
-
3
- const alignLookup = { left: 'start', center: 'center', right: 'end' } as const;
4
- const alignYLookup = {
5
- top: 'start',
6
- center: 'center',
7
- bottom: 'end',
8
- stretch: 'stretch',
9
- } as const;
10
-
11
- export type Align = keyof typeof alignLookup;
12
- export type AlignY = keyof typeof alignYLookup;
13
-
14
- export const alignToJustifyContent = createResponsiveMapFn(alignLookup);
15
- export const alignYToAlignItems = createResponsiveMapFn(alignYLookup);
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- export { Row } from './Row';
2
-
3
- // types
4
-
5
- export type { RowProps } from './Row';