@spark-web/row 2.0.0-rc.0 → 2.0.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @spark-web/row
 
+## 2.0.0-rc.2
+
+### Major Changes
+
+- add parser
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/divider@2.0.0-rc.2
+  - @spark-web/theme@4.0.0-rc.2
+  - @spark-web/utils@2.0.0-rc.2
+  - @spark-web/box@2.0.0-rc.2
+
+## 2.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/divider@2.0.0-rc.1
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+  - @spark-web/box@2.0.0-rc.1
+
 ## 2.0.0-rc.0
 
 ### Major Changes

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<"center" | "right" | "left"> | undefined) => "center" | "start" | "end" | {
+    mobile: "center" | "start" | "end" | undefined;
+    tablet: "center" | "start" | "end" | undefined;
+    desktop: "center" | "start" | "end" | undefined;
+    wide: "center" | "start" | "end" | undefined;
+} | undefined;
+export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"center" | "top" | "bottom" | "stretch"> | undefined) => "center" | "start" | "stretch" | "end" | {
+    mobile: "center" | "start" | "stretch" | "end" | undefined;
+    tablet: "center" | "start" | "stretch" | "end" | undefined;
+    desktop: "center" | "start" | "stretch" | "end" | undefined;
+    wide: "center" | "start" | "stretch" | "end" | undefined;
+} | undefined;
+export {};

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

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

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

@@ -0,0 +1,30 @@
+import type { BoxProps } from '@spark-web/box';
+import type { ResponsiveProp } from '@spark-web/theme';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactElement } from 'react';
+import type { Align, AlignY } from "./alignment.js";
+declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
+export declare type RowProps = {
+    /** Horizontally align items within the container. */
+    align?: ResponsiveProp<Align>;
+    /** Vertically align items within the container. */
+    alignY?: ResponsiveProp<AlignY>;
+    /** Sets data attributes for the element. */
+    data?: DataAttributeMap;
+    /** Place a divider between each element. */
+    dividers?: boolean;
+} & ValidBoxProps;
+export declare const Row: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
+    as?: Comp | undefined;
+    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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | 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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[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<"center" | "right" | "left"> | undefined;
+    /** Vertically align items within the container. */
+    alignY?: ResponsiveProp<"center" | "top" | "bottom" | "stretch"> | undefined;
+    /** Sets data attributes for the element. */
+    data?: DataAttributeMap | undefined;
+    /** Place a divider between each element. */
+    dividers?: boolean | undefined;
+} & ValidBoxProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

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

@@ -1,2 +1,2 @@
-export * from "../src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXJvdy5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXJvdy5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

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

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var box = require('@spark-web/box');
+var divider = require('@spark-web/divider');
+var ts = require('@spark-web/utils/ts');
+var react = require('react');
+var theme = require('@spark-web/theme');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+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", "data", "dividers"];
+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,
+    data = _ref.data,
+    dividers = _ref.dividers,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var justifyContent = alignToJustifyContent(align);
+  var alignItems = alignYToAlignItems(alignY);
+  var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: forwardedRef,
+    display: 'flex',
+    alignItems: alignItems,
+    justifyContent: justifyContent
+  });
+
+  // bail early w/o dividers to avoid unnecessary map
+  if (!dividers) {
+    return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+      data: data
+    }, rootProps), {}, {
+      children: children
+    }));
+  }
+
+  // map over children to insert dividers
+  // remove falsy values before mapping, keeps the index in sync
+  var childArray = react.Children.toArray(children);
+  return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    data: data
+  }, rootProps), {}, {
+    children: childArray.map(function (child, idx) {
+      return jsxRuntime.jsxs(react.Fragment, {
+        children: [dividers && idx ? jsxRuntime.jsx(divider.Divider, {
+          vertical: true
+        }) : null, child]
+      }, child.key || idx);
+    })
+  }));
+});
+
+exports.Row = Row;

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

@@ -1,16 +1,7 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
-
-// this re-exports the source file
-module.exports = require("../src/index.ts");
-
-unregister();
+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,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var box = require('@spark-web/box');
+var divider = require('@spark-web/divider');
+var ts = require('@spark-web/utils/ts');
+var react = require('react');
+var theme = require('@spark-web/theme');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+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", "data", "dividers"];
+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,
+    data = _ref.data,
+    dividers = _ref.dividers,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var justifyContent = alignToJustifyContent(align);
+  var alignItems = alignYToAlignItems(alignY);
+  var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: forwardedRef,
+    display: 'flex',
+    alignItems: alignItems,
+    justifyContent: justifyContent
+  });
+
+  // bail early w/o dividers to avoid unnecessary map
+  if (!dividers) {
+    return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+      data: data
+    }, rootProps), {}, {
+      children: children
+    }));
+  }
+
+  // map over children to insert dividers
+  // remove falsy values before mapping, keeps the index in sync
+  var childArray = react.Children.toArray(children);
+  return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
+    data: data
+  }, rootProps), {}, {
+    children: childArray.map(function (child, idx) {
+      return jsxRuntime.jsxs(react.Fragment, {
+        children: [dividers && idx ? jsxRuntime.jsx(divider.Divider, {
+          vertical: true
+        }) : null, child]
+      }, child.key || idx);
+    })
+  }));
+});
+
+exports.Row = Row;

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

@@ -0,0 +1,68 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { Box } from '@spark-web/box';
+import { Divider } from '@spark-web/divider';
+import { forwardRefWithAs } from '@spark-web/utils/ts';
+import { Children, Fragment } from 'react';
+import { createResponsiveMapFn } from '@spark-web/theme';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+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", "data", "dividers"];
+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,
+    data = _ref.data,
+    dividers = _ref.dividers,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var justifyContent = alignToJustifyContent(align);
+  var alignItems = alignYToAlignItems(alignY);
+  var rootProps = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: forwardedRef,
+    display: 'flex',
+    alignItems: alignItems,
+    justifyContent: justifyContent
+  });
+
+  // bail early w/o dividers to avoid unnecessary map
+  if (!dividers) {
+    return jsx(Box, _objectSpread(_objectSpread({
+      data: data
+    }, rootProps), {}, {
+      children: 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, _objectSpread(_objectSpread({
+    data: data
+  }, rootProps), {}, {
+    children: childArray.map(function (child, idx) {
+      return jsxs(Fragment, {
+        children: [dividers && idx ? jsx(Divider, {
+          vertical: true
+        }) : null, child]
+      }, child.key || idx);
+    })
+  }));
+});
+
+export { Row };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/row",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,10 +17,10 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.13.5",
-    "@spark-web/box": "^2.0.0-rc.0",
-    "@spark-web/divider": "^2.0.0-rc.0",
-    "@spark-web/theme": "^4.0.0-rc.0",
-    "@spark-web/utils": "^2.0.0-rc.0"
+    "@spark-web/box": "^2.0.0-rc.2",
+    "@spark-web/divider": "^2.0.0-rc.2",
+    "@spark-web/theme": "^4.0.0-rc.2",
+    "@spark-web/utils": "^2.0.0-rc.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",