@spark-web/row 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @spark-web/row
+
+## 1.0.0
+
+### Major Changes
+
+- [#27](https://github.com/brighte-labs/spark-web/pull/27)
+  [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
+  Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
+
+### Patch Changes
+
+- Updated dependencies
+  [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
+  - @spark-web/box@1.0.0
+  - @spark-web/divider@1.0.0
+  - @spark-web/theme@1.0.0
+  - @spark-web/utils@1.0.0

package/README.md

@@ -0,0 +1,130 @@
+---
+title: Row
+storybookPath: page-layout-row--default
+---
+
+Used to distribute children horizontally, with even spacing between each child.
+
+```jsx live
+<Row gap="large">
+  <Placeholder />
+  <Placeholder />
+  <Placeholder />
+</Row>
+```
+
+## Examples
+
+### Gap
+
+The spacing between children can be adjusted using the `gap` prop.
+
+```jsx live
+<Inline gap="xxlarge">
+  <Row gap="small">
+    <Placeholder />
+    <Placeholder />
+    <Placeholder />
+  </Row>
+  <Row gap="medium">
+    <Placeholder />
+    <Placeholder />
+    <Placeholder />
+  </Row>
+  <Row gap="large">
+    <Placeholder />
+    <Placeholder />
+    <Placeholder />
+  </Row>
+  <Row gap="xlarge">
+    <Placeholder />
+    <Placeholder />
+    <Placeholder />
+  </Row>
+</Inline>
+```
+
+### Vertical alignment
+
+Items can be aligned vertically using the `alignY` prop.
+
+```jsx live
+<Stack gap="medium" align="center" dividers>
+  <Row gap="small" alignY="top">
+    <Placeholder />
+    <Placeholder label="top" height={64} width={128} />
+    <Placeholder />
+  </Row>
+  <Row gap="small" alignY="center">
+    <Placeholder />
+    <Placeholder label="center" height={64} width={128} />
+    <Placeholder />
+  </Row>
+  <Row gap="small" alignY="bottom">
+    <Placeholder />
+    <Placeholder label="bottom" height={64} width={128} />
+    <Placeholder />
+  </Row>
+  <Row gap="small" alignY="stretch">
+    <Placeholder />
+    <Placeholder label="stretch" height={64} width={128} />
+    <Placeholder />
+  </Row>
+</Stack>
+```
+
+### Horizontal alignment
+
+Items can be aligned horizontally using the `align` prop.
+
+```jsx live
+<Stack gap="medium" dividers>
+  <Row gap="small" align="left">
+    <Placeholder label="left" width={128} />
+    <Placeholder />
+    <Placeholder />
+  </Row>
+  <Row gap="small" align="center">
+    <Placeholder />
+    <Placeholder label="center" width={128} />
+    <Placeholder />
+  </Row>
+  <Row gap="small" align="right">
+    <Placeholder />
+    <Placeholder />
+    <Placeholder label="right" width={128} />
+  </Row>
+</Stack>
+```
+
+### Dividers
+
+Use the `dividers` property to render a [Divider](/package/divider) between each
+element in the Row.
+
+```jsx live
+<Row gap="medium" dividers>
+  <Text>First item</Text>
+  <Text>Second item</Text>
+  <Text>Third item</Text>
+</Row>
+```
+
+## Props
+
+| Prop      | Type                               | Default   | Description                                           |
+| --------- | ---------------------------------- | --------- | ----------------------------------------------------- |
+| align?    | [ResponsiveProp<Align\>][align]    | 'left'    | Horizontally align items within the container.        |
+| alignY?   | [ResponsiveProp<AlignY\>][align-y] | 'stretch' | Vertically align items within the container.          |
+| dividers? | boolean                            |           | Sets whether to place a divider between each element. |
+
+`Row` props also include [`Box`](/package/box) props and are not listed here
+(excludes `display`, `alignItems`, `flexDirection`, `justifyContent` and
+`flexWrap`).
+
+Extra props are also passed into the underlying [`Box`](/package/box) component.
+
+[align]:
+  https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/inline/src/Inline.tsx#spark-web/packages/inline/src/Inline.tsx-20
+[align-y]:
+  https://bitbucket.org/brighte-energy/energy/src/537c678a81090af545969504776c6b3d2e67743e/spark-web/packages/inline/src/Inline.tsx#spark-web/packages/inline/src/Inline.tsx-22

package/dist/declarations/src/Row.d.ts

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@spark-web/box';
+import type { ResponsiveProp } from '@spark-web/theme';
+import type { ReactElement } from 'react';
+import type { Align, AlignY } from './alignment';
+declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'>;
+export declare type RowProps = {
+    /** Horizontally align items within the container. */
+    align?: ResponsiveProp<Align>;
+    /** Vertically align items within the container. */
+    alignY?: ResponsiveProp<AlignY>;
+    /** Place a divider between each element. */
+    dividers?: boolean;
+} & ValidBoxProps;
+export declare const Row: <Comp extends import("react").ElementType<any> = "div">(props: {
+    as?: Comp | undefined;
+    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;
+} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
+    /** Horizontally align items within the container. */
+    align?: ResponsiveProp<"left" | "right" | "center"> | undefined;
+    /** Vertically align items within the container. */
+    alignY?: ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined;
+    /** Place a divider between each element. */
+    dividers?: boolean | undefined;
+} & ValidBoxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/declarations/src/alignment.d.ts

@@ -0,0 +1,26 @@
+declare const alignLookup: {
+    readonly left: "start";
+    readonly center: "center";
+    readonly right: "end";
+};
+declare const alignYLookup: {
+    readonly top: "start";
+    readonly center: "center";
+    readonly bottom: "end";
+    readonly stretch: "stretch";
+};
+export declare type Align = keyof typeof alignLookup;
+export declare type AlignY = keyof typeof alignYLookup;
+export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"left" | "right" | "center"> | undefined) => "center" | "end" | "start" | {
+    mobile: "center" | "end" | "start" | undefined;
+    tablet: "center" | "end" | "start" | undefined;
+    desktop: "center" | "end" | "start" | undefined;
+    wide: "center" | "end" | "start" | undefined;
+} | undefined;
+export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "stretch" | "center"> | undefined) => "stretch" | "center" | "end" | "start" | {
+    mobile: "stretch" | "center" | "end" | "start" | undefined;
+    tablet: "stretch" | "center" | "end" | "start" | undefined;
+    desktop: "stretch" | "center" | "end" | "start" | undefined;
+    wide: "stretch" | "center" | "end" | "start" | undefined;
+} | undefined;
+export {};

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Row } from './Row';
+export type { RowProps } from './Row';

package/dist/spark-web-row.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

package/dist/spark-web-row.cjs.dev.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var React = require('react');
+var box = require('@spark-web/box');
+var divider = require('@spark-web/divider');
+var ts = require('@spark-web/utils/ts');
+var theme = require('@spark-web/theme');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var alignLookup = {
+  left: 'start',
+  center: 'center',
+  right: 'end'
+};
+var alignYLookup = {
+  top: 'start',
+  center: 'center',
+  bottom: 'end',
+  stretch: 'stretch'
+};
+var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
+var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
+
+var _excluded = ["align", "alignY", "children", "dividers"];
+var __jsx = React__default["default"].createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$alignY = _ref.alignY,
+      alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
+      children = _ref.children,
+      dividers = _ref.dividers,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var justifyContent = alignToJustifyContent(align);
+  var alignItems = alignYToAlignItems(alignY);
+
+  var rootProps = _objectSpread({
+    ref: forwardedRef,
+    display: 'flex',
+    alignItems: alignItems,
+    justifyContent: justifyContent
+  }, props); // bail early w/o dividers to avoid unnecessary map
+
+
+  if (!dividers) {
+    return __jsx(box.Box, rootProps, children);
+  } // map over children to insert dividers
+  // remove falsy values before mapping, keeps the index in sync
+
+
+  var childArray = React.Children.toArray(children);
+  return __jsx(box.Box, rootProps, childArray.map(function (child, idx) {
+    return __jsx(React.Fragment, {
+      key: child.key || idx
+    }, dividers && idx ? __jsx(divider.Divider, {
+      vertical: true
+    }) : null, child);
+  }));
+});
+
+exports.Row = Row;

package/dist/spark-web-row.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-row.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-row.cjs.dev.js");
+}

package/dist/spark-web-row.cjs.prod.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+var React = require('react');
+var box = require('@spark-web/box');
+var divider = require('@spark-web/divider');
+var ts = require('@spark-web/utils/ts');
+var theme = require('@spark-web/theme');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var alignLookup = {
+  left: 'start',
+  center: 'center',
+  right: 'end'
+};
+var alignYLookup = {
+  top: 'start',
+  center: 'center',
+  bottom: 'end',
+  stretch: 'stretch'
+};
+var alignToJustifyContent = theme.createResponsiveMapFn(alignLookup);
+var alignYToAlignItems = theme.createResponsiveMapFn(alignYLookup);
+
+var _excluded = ["align", "alignY", "children", "dividers"];
+var __jsx = React__default["default"].createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Row = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$alignY = _ref.alignY,
+      alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
+      children = _ref.children,
+      dividers = _ref.dividers,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var justifyContent = alignToJustifyContent(align);
+  var alignItems = alignYToAlignItems(alignY);
+
+  var rootProps = _objectSpread({
+    ref: forwardedRef,
+    display: 'flex',
+    alignItems: alignItems,
+    justifyContent: justifyContent
+  }, props); // bail early w/o dividers to avoid unnecessary map
+
+
+  if (!dividers) {
+    return __jsx(box.Box, rootProps, children);
+  } // map over children to insert dividers
+  // remove falsy values before mapping, keeps the index in sync
+
+
+  var childArray = React.Children.toArray(children);
+  return __jsx(box.Box, rootProps, childArray.map(function (child, idx) {
+    return __jsx(React.Fragment, {
+      key: child.key || idx
+    }, dividers && idx ? __jsx(divider.Divider, {
+      vertical: true
+    }) : null, child);
+  }));
+});
+
+exports.Row = Row;

package/dist/spark-web-row.esm.js

@@ -0,0 +1,65 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import React, { Children, Fragment } from 'react';
+import { Box } from '@spark-web/box';
+import { Divider } from '@spark-web/divider';
+import { forwardRefWithAs } from '@spark-web/utils/ts';
+import { createResponsiveMapFn } from '@spark-web/theme';
+
+var alignLookup = {
+  left: 'start',
+  center: 'center',
+  right: 'end'
+};
+var alignYLookup = {
+  top: 'start',
+  center: 'center',
+  bottom: 'end',
+  stretch: 'stretch'
+};
+var alignToJustifyContent = createResponsiveMapFn(alignLookup);
+var alignYToAlignItems = createResponsiveMapFn(alignYLookup);
+
+var _excluded = ["align", "alignY", "children", "dividers"];
+var __jsx = React.createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Row = forwardRefWithAs(function (_ref, forwardedRef) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align,
+      _ref$alignY = _ref.alignY,
+      alignY = _ref$alignY === void 0 ? 'stretch' : _ref$alignY,
+      children = _ref.children,
+      dividers = _ref.dividers,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var justifyContent = alignToJustifyContent(align);
+  var alignItems = alignYToAlignItems(alignY);
+
+  var rootProps = _objectSpread({
+    ref: forwardedRef,
+    display: 'flex',
+    alignItems: alignItems,
+    justifyContent: justifyContent
+  }, props); // bail early w/o dividers to avoid unnecessary map
+
+
+  if (!dividers) {
+    return __jsx(Box, rootProps, children);
+  } // map over children to insert dividers
+  // remove falsy values before mapping, keeps the index in sync
+
+
+  var childArray = Children.toArray(children);
+  return __jsx(Box, rootProps, childArray.map(function (child, idx) {
+    return __jsx(Fragment, {
+      key: child.key || idx
+    }, dividers && idx ? __jsx(Divider, {
+      vertical: true
+    }) : null, child);
+  }));
+});
+
+export { Row };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@spark-web/row",
+  "license": "MIT",
+  "version": "1.0.0",
+  "main": "dist/spark-web-row.cjs.js",
+  "module": "dist/spark-web-row.esm.js",
+  "devDependencies": {
+    "@types/react": "^17.0.12"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.6",
+    "@emotion/css": "^11.7.1",
+    "@spark-web/box": "^1.0.0",
+    "@spark-web/divider": "^1.0.0",
+    "@spark-web/theme": "^1.0.0",
+    "@spark-web/utils": "^1.0.0",
+    "react": "^17.0.2"
+  },
+  "engines": {
+    "node": ">= 14.13"
+  }
+}

package/src/Row.stories.tsx

@@ -0,0 +1,27 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Placeholder } from '../../../docs/components/example-helpers';
+import type { RowProps } from './Row';
+import { Row } from './Row';
+
+export default {
+  title: 'Page & Layout / Row',
+  component: Row,
+} as ComponentMeta<typeof Row>;
+
+const RowStory: ComponentStory<typeof Row> = (
+  args: Omit<RowProps, 'className'>
+) => <Row {...args} />;
+
+export const Default = RowStory.bind({});
+
+Default.args = {
+  gap: 'large',
+  children: (
+    <>
+      <Placeholder height={40} />
+      <Placeholder height={40} />
+      <Placeholder height={40} />
+    </>
+  ),
+} as RowProps;

package/src/Row.tsx

@@ -0,0 +1,60 @@
+import type { BoxProps } from '@spark-web/box';
+import { Box } from '@spark-web/box';
+import { Divider } from '@spark-web/divider';
+import type { ResponsiveProp } from '@spark-web/theme';
+import { forwardRefWithAs } from '@spark-web/utils/ts';
+import type { ReactElement } from 'react';
+import { Children, Fragment } from 'react';
+
+import type { Align, AlignY } from './alignment';
+import { alignToJustifyContent, alignYToAlignItems } from './alignment';
+
+type ValidBoxProps = Omit<
+  BoxProps,
+  'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'
+>;
+
+export type RowProps = {
+  /** Horizontally align items within the container. */
+  align?: ResponsiveProp<Align>;
+  /** Vertically align items within the container. */
+  alignY?: ResponsiveProp<AlignY>;
+  /** Place a divider between each element. */
+  dividers?: boolean;
+} & ValidBoxProps;
+
+export const Row = forwardRefWithAs<'div', RowProps>(
+  (
+    { align = 'left', alignY = 'stretch', children, dividers, ...props },
+    forwardedRef
+  ) => {
+    const justifyContent = alignToJustifyContent(align);
+    const alignItems = alignYToAlignItems(alignY);
+    const rootProps = {
+      ref: forwardedRef,
+      display: 'flex',
+      alignItems,
+      justifyContent,
+      ...props,
+    } as const;
+
+    // bail early w/o dividers to avoid unnecessary map
+    if (!dividers) {
+      return <Box {...rootProps}>{children}</Box>;
+    }
+
+    // map over children to insert dividers
+    // remove falsy values before mapping, keeps the index in sync
+    const childArray = Children.toArray(children) as ReactElement[];
+    return (
+      <Box {...rootProps}>
+        {childArray.map((child, idx) => (
+          <Fragment key={child.key || idx}>
+            {dividers && idx ? <Divider vertical /> : null}
+            {child}
+          </Fragment>
+        ))}
+      </Box>
+    );
+  }
+);

package/src/alignment.ts

@@ -0,0 +1,15 @@
+import { createResponsiveMapFn } from '@spark-web/theme';
+
+const alignLookup = { left: 'start', center: 'center', right: 'end' } as const;
+const alignYLookup = {
+  top: 'start',
+  center: 'center',
+  bottom: 'end',
+  stretch: 'stretch',
+} as const;
+
+export type Align = keyof typeof alignLookup;
+export type AlignY = keyof typeof alignYLookup;
+
+export const alignToJustifyContent = createResponsiveMapFn(alignLookup);
+export const alignYToAlignItems = createResponsiveMapFn(alignYLookup);

package/src/index.ts

@@ -0,0 +1,5 @@
+export { Row } from './Row';
+
+// types
+
+export type { RowProps } from './Row';