@sproutsocial/seeds-react-stack 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-stack/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     5.54 KB
+CJS dist/index.js.map 8.36 KB
+CJS ⚡️ Build success in 108ms
+ESM dist/esm/index.js     3.75 KB
+ESM dist/esm/index.js.map 8.25 KB
+ESM ⚡️ Build success in 115ms
+DTS Build start
+DTS ⚡️ Build success in 25718ms
+DTS dist/index.d.ts  1.02 KB
+DTS dist/index.d.mts 1.02 KB
+Done in 34.50s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-stack
+
+## 1.0.0
+
+### Major Changes
+
+- bd8d03d: Migrate Stack to its own seeds-react-stack component

package/dist/esm/index.js

@@ -0,0 +1,140 @@
+// src/Stack.tsx
+import "react";
+import { Children } from "react";
+
+// src/utils.ts
+import { theme } from "@sproutsocial/seeds-react-theme";
+var breakpoints = theme.breakpoints;
+var LENGTH = breakpoints.length + 1;
+var normalizeResponsiveProp = (value) => {
+  if (["string", "number"].includes(typeof value)) {
+    return Array(LENGTH).fill(value);
+  }
+  if (value.length) {
+    switch (value.length) {
+      case 1:
+        return Array(LENGTH).fill(value[0]);
+      case 2:
+        return [value[0], ...Array(LENGTH - 1).fill(value[1])];
+      case 3:
+        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];
+      case 4:
+        return [
+          value[0],
+          value[1],
+          value[2],
+          ...Array(LENGTH - 3).fill(value[3])
+        ];
+      case 5:
+        return value;
+      default:
+        throw new Error(
+          `Invalid responsive prop length: ${JSON.stringify(value)}`
+        );
+    }
+  } else {
+    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);
+  }
+};
+
+// src/Stack.tsx
+import Box from "@sproutsocial/seeds-react-box";
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+var stackStyles = {
+  horizontal: {
+    left: {
+      alignItems: "center"
+    },
+    center: {
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    right: {
+      alignItems: "center",
+      justifyContent: "flex-end"
+    },
+    stretch: {
+      alignItems: "center"
+    }
+  },
+  vertical: {
+    left: {
+      flexDirection: "column",
+      alignItems: "flex-start"
+    },
+    center: {
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    right: {
+      flexDirection: "column",
+      alignItems: "flex-end"
+    },
+    stretch: {
+      flexDirection: "column",
+      alignItems: "stretch"
+    }
+  }
+};
+var Stack = ({
+  children,
+  space = 300,
+  align = "left",
+  direction = "vertical",
+  ...rest
+}) => {
+  const stackItems = Children.toArray(children);
+  const responsiveAlignment = normalizeResponsiveProp(align);
+  const responsiveDirection = normalizeResponsiveProp(direction);
+  const responsiveSpace = normalizeResponsiveProp(space);
+  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
+  const styleProps = {
+    alignItems: [...initialValue],
+    flexDirection: [...initialValue],
+    justifyContent: [...initialValue]
+  };
+  const childFlexBasis = [...initialValue];
+  const childMarginProps = {
+    marginLeft: [...initialValue],
+    marginTop: [...initialValue]
+  };
+  initialValue.forEach((_, i) => {
+    const currentDirection = responsiveDirection[i];
+    const currentAlignment = responsiveAlignment[i];
+    const currentSpace = responsiveSpace[i];
+    if (currentDirection && currentAlignment) {
+      const styles = stackStyles[currentDirection][currentAlignment];
+      Object.keys(styleProps).forEach((key) => {
+        styleProps[key][i] = styles[key] || "initial";
+      });
+    }
+    const flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : null;
+    childFlexBasis[i] = flexBasis;
+    const margin = currentDirection === "horizontal" ? "marginLeft" : "marginTop";
+    const opposite = currentDirection === "horizontal" ? "marginTop" : "marginLeft";
+    childMarginProps[margin][i] = currentSpace;
+    childMarginProps[opposite][i] = 0;
+  });
+  return /* @__PURE__ */ jsx(Box, { display: "flex", ...styleProps, ...rest, children: stackItems.map((item, i) => /* @__PURE__ */ createElement(
+    Box,
+    {
+      flexBasis: childFlexBasis,
+      ...i !== 0 ? childMarginProps : {},
+      key: i
+    },
+    item
+  )) });
+};
+var Stack_default = Stack;
+
+// src/StackTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Stack_default;
+export {
+  Stack_default as Stack,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Stack.tsx","../../src/utils.ts","../../src/StackTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Children } from \"react\";\nimport { normalizeResponsiveProp } from \"./utils\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\nconst stackStyles = {\n  horizontal: {\n    left: {\n      alignItems: \"center\",\n    },\n    center: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    right: {\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n    },\n    stretch: {\n      alignItems: \"center\",\n    },\n  },\n  vertical: {\n    left: {\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n    },\n    center: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n    },\n    right: {\n      flexDirection: \"column\",\n      alignItems: \"flex-end\",\n    },\n    stretch: {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n    },\n  },\n};\n\nconst Stack = ({\n  children,\n  space = 300,\n  align = \"left\",\n  direction = \"vertical\",\n  ...rest\n}: TypeStackProps) => {\n  const stackItems = Children.toArray(children);\n  const responsiveAlignment = normalizeResponsiveProp(align);\n  const responsiveDirection = normalizeResponsiveProp(direction);\n  const responsiveSpace = normalizeResponsiveProp(space);\n  const initialValue = [\"initial\", \"initial\", \"initial\", \"initial\", \"initial\"];\n\n  // TODO: rely on styled system to solve this during the refactor\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const styleProps: any = {\n    alignItems: [...initialValue],\n    flexDirection: [...initialValue],\n    justifyContent: [...initialValue],\n  };\n  const childFlexBasis: (string | null)[] = [...initialValue];\n  const childMarginProps = {\n    marginLeft: [...initialValue],\n    marginTop: [...initialValue],\n  };\n\n  initialValue.forEach((_, i) => {\n    const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;\n    const currentAlignment = responsiveAlignment[\n      i\n    ] as keyof (typeof stackStyles)[\"horizontal\"];\n    const currentSpace = responsiveSpace[i];\n\n    if (currentDirection && currentAlignment) {\n      const styles: { [key: string]: string } =\n        stackStyles[currentDirection][currentAlignment];\n      Object.keys(styleProps).forEach((key: string) => {\n        styleProps[key][i] = styles[key] || \"initial\";\n      });\n    }\n\n    const flexBasis =\n      currentAlignment === \"stretch\" && currentDirection === \"horizontal\"\n        ? \"100%\"\n        : null;\n    childFlexBasis[i] = flexBasis;\n\n    const margin =\n      currentDirection === \"horizontal\" ? \"marginLeft\" : \"marginTop\";\n\n    const opposite =\n      currentDirection === \"horizontal\" ? \"marginTop\" : \"marginLeft\";\n    childMarginProps[margin][i] = currentSpace;\n    // styled system can pass numbers that map to theme values and TS doesn't like it\n    childMarginProps[opposite][i] = 0 as unknown as string;\n  });\n\n  return (\n    <Box display=\"flex\" {...styleProps} {...rest}>\n      {stackItems.map((item, i) => (\n        <Box\n          flexBasis={childFlexBasis}\n          {...(i !== 0 ? childMarginProps : {})}\n          key={i}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default Stack;\n","import { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\n\nconst breakpoints = theme.breakpoints;\nconst LENGTH = breakpoints.length + 1;\n\nexport const normalizeResponsiveProp = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: TypeResponsive<any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): TypeResponsive<any> => {\n  if ([\"string\", \"number\"].includes(typeof value)) {\n    return Array(LENGTH).fill(value);\n  }\n\n  if (value.length) {\n    switch (value.length) {\n      case 1:\n        return Array(LENGTH).fill(value[0]);\n      case 2:\n        return [value[0], ...Array(LENGTH - 1).fill(value[1])];\n      case 3:\n        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];\n      case 4:\n        return [\n          value[0],\n          value[1],\n          value[2],\n          ...Array(LENGTH - 3).fill(value[3]),\n        ];\n      case 5:\n        return value;\n      default:\n        throw new Error(\n          `Invalid responsive prop length: ${JSON.stringify(value)}`\n        );\n    }\n  } else {\n    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);\n  }\n};\n","import * as React from \"react\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeSpaceLiterals =\n  | 0\n  | 100\n  | 200\n  | 300\n  | 350\n  | 400\n  | 450\n  | 500\n  | 600\n  | string;\n\ntype TypeDirection = \"vertical\" | \"horizontal\";\n\ntype TypeAlignment = \"left\" | \"center\" | \"right\" | \"stretch\";\n\nexport interface TypeStackProps extends TypeBoxProps {\n  /** Amount of space between items in the stack */\n  space?: TypeResponsive<TypeSpaceLiterals>;\n\n  /** Alignment of the items in the stack (horizontal or vertical) */\n  align?: TypeResponsive<TypeAlignment>;\n\n  /** Axis upon which the stack is laid out (left, center, right, or stretch) */\n  direction?: TypeResponsive<TypeDirection>;\n  children: React.ReactNode;\n}\n","import Stack from \"./Stack\";\n\nexport default Stack;\nexport { Stack };\nexport * from \"./StackTypes\";\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeResponsive } from '@sproutsocial/seeds-react-system-props';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+type TypeSpaceLiterals = 0 | 100 | 200 | 300 | 350 | 400 | 450 | 500 | 600 | string;
+type TypeDirection = "vertical" | "horizontal";
+type TypeAlignment = "left" | "center" | "right" | "stretch";
+interface TypeStackProps extends TypeBoxProps {
+    /** Amount of space between items in the stack */
+    space?: TypeResponsive<TypeSpaceLiterals>;
+    /** Alignment of the items in the stack (horizontal or vertical) */
+    align?: TypeResponsive<TypeAlignment>;
+    /** Axis upon which the stack is laid out (left, center, right, or stretch) */
+    direction?: TypeResponsive<TypeDirection>;
+    children: React.ReactNode;
+}
+
+declare const Stack: ({ children, space, align, direction, ...rest }: TypeStackProps) => react_jsx_runtime.JSX.Element;
+
+export { Stack, type TypeSpaceLiterals, type TypeStackProps, Stack as default };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeResponsive } from '@sproutsocial/seeds-react-system-props';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+type TypeSpaceLiterals = 0 | 100 | 200 | 300 | 350 | 400 | 450 | 500 | 600 | string;
+type TypeDirection = "vertical" | "horizontal";
+type TypeAlignment = "left" | "center" | "right" | "stretch";
+interface TypeStackProps extends TypeBoxProps {
+    /** Amount of space between items in the stack */
+    space?: TypeResponsive<TypeSpaceLiterals>;
+    /** Alignment of the items in the stack (horizontal or vertical) */
+    align?: TypeResponsive<TypeAlignment>;
+    /** Axis upon which the stack is laid out (left, center, right, or stretch) */
+    direction?: TypeResponsive<TypeDirection>;
+    children: React.ReactNode;
+}
+
+declare const Stack: ({ children, space, align, direction, ...rest }: TypeStackProps) => react_jsx_runtime.JSX.Element;
+
+export { Stack, type TypeSpaceLiterals, type TypeStackProps, Stack as default };

package/dist/index.js

@@ -0,0 +1,177 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Stack: () => Stack_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Stack.tsx
+var React = require("react");
+var import_react = require("react");
+
+// src/utils.ts
+var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
+var breakpoints = import_seeds_react_theme.theme.breakpoints;
+var LENGTH = breakpoints.length + 1;
+var normalizeResponsiveProp = (value) => {
+  if (["string", "number"].includes(typeof value)) {
+    return Array(LENGTH).fill(value);
+  }
+  if (value.length) {
+    switch (value.length) {
+      case 1:
+        return Array(LENGTH).fill(value[0]);
+      case 2:
+        return [value[0], ...Array(LENGTH - 1).fill(value[1])];
+      case 3:
+        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];
+      case 4:
+        return [
+          value[0],
+          value[1],
+          value[2],
+          ...Array(LENGTH - 3).fill(value[3])
+        ];
+      case 5:
+        return value;
+      default:
+        throw new Error(
+          `Invalid responsive prop length: ${JSON.stringify(value)}`
+        );
+    }
+  } else {
+    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);
+  }
+};
+
+// src/Stack.tsx
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("react");
+var stackStyles = {
+  horizontal: {
+    left: {
+      alignItems: "center"
+    },
+    center: {
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    right: {
+      alignItems: "center",
+      justifyContent: "flex-end"
+    },
+    stretch: {
+      alignItems: "center"
+    }
+  },
+  vertical: {
+    left: {
+      flexDirection: "column",
+      alignItems: "flex-start"
+    },
+    center: {
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    right: {
+      flexDirection: "column",
+      alignItems: "flex-end"
+    },
+    stretch: {
+      flexDirection: "column",
+      alignItems: "stretch"
+    }
+  }
+};
+var Stack = ({
+  children,
+  space = 300,
+  align = "left",
+  direction = "vertical",
+  ...rest
+}) => {
+  const stackItems = import_react.Children.toArray(children);
+  const responsiveAlignment = normalizeResponsiveProp(align);
+  const responsiveDirection = normalizeResponsiveProp(direction);
+  const responsiveSpace = normalizeResponsiveProp(space);
+  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
+  const styleProps = {
+    alignItems: [...initialValue],
+    flexDirection: [...initialValue],
+    justifyContent: [...initialValue]
+  };
+  const childFlexBasis = [...initialValue];
+  const childMarginProps = {
+    marginLeft: [...initialValue],
+    marginTop: [...initialValue]
+  };
+  initialValue.forEach((_, i) => {
+    const currentDirection = responsiveDirection[i];
+    const currentAlignment = responsiveAlignment[i];
+    const currentSpace = responsiveSpace[i];
+    if (currentDirection && currentAlignment) {
+      const styles = stackStyles[currentDirection][currentAlignment];
+      Object.keys(styleProps).forEach((key) => {
+        styleProps[key][i] = styles[key] || "initial";
+      });
+    }
+    const flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : null;
+    childFlexBasis[i] = flexBasis;
+    const margin = currentDirection === "horizontal" ? "marginLeft" : "marginTop";
+    const opposite = currentDirection === "horizontal" ? "marginTop" : "marginLeft";
+    childMarginProps[margin][i] = currentSpace;
+    childMarginProps[opposite][i] = 0;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { display: "flex", ...styleProps, ...rest, children: stackItems.map((item, i) => /* @__PURE__ */ (0, import_react2.createElement)(
+    import_seeds_react_box.default,
+    {
+      flexBasis: childFlexBasis,
+      ...i !== 0 ? childMarginProps : {},
+      key: i
+    },
+    item
+  )) });
+};
+var Stack_default = Stack;
+
+// src/StackTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Stack_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stack
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Stack.tsx","../src/utils.ts","../src/StackTypes.ts"],"sourcesContent":["import Stack from \"./Stack\";\n\nexport default Stack;\nexport { Stack };\nexport * from \"./StackTypes\";\n","import * as React from \"react\";\nimport { Children } from \"react\";\nimport { normalizeResponsiveProp } from \"./utils\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\nconst stackStyles = {\n  horizontal: {\n    left: {\n      alignItems: \"center\",\n    },\n    center: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    right: {\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n    },\n    stretch: {\n      alignItems: \"center\",\n    },\n  },\n  vertical: {\n    left: {\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n    },\n    center: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n    },\n    right: {\n      flexDirection: \"column\",\n      alignItems: \"flex-end\",\n    },\n    stretch: {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n    },\n  },\n};\n\nconst Stack = ({\n  children,\n  space = 300,\n  align = \"left\",\n  direction = \"vertical\",\n  ...rest\n}: TypeStackProps) => {\n  const stackItems = Children.toArray(children);\n  const responsiveAlignment = normalizeResponsiveProp(align);\n  const responsiveDirection = normalizeResponsiveProp(direction);\n  const responsiveSpace = normalizeResponsiveProp(space);\n  const initialValue = [\"initial\", \"initial\", \"initial\", \"initial\", \"initial\"];\n\n  // TODO: rely on styled system to solve this during the refactor\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const styleProps: any = {\n    alignItems: [...initialValue],\n    flexDirection: [...initialValue],\n    justifyContent: [...initialValue],\n  };\n  const childFlexBasis: (string | null)[] = [...initialValue];\n  const childMarginProps = {\n    marginLeft: [...initialValue],\n    marginTop: [...initialValue],\n  };\n\n  initialValue.forEach((_, i) => {\n    const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;\n    const currentAlignment = responsiveAlignment[\n      i\n    ] as keyof (typeof stackStyles)[\"horizontal\"];\n    const currentSpace = responsiveSpace[i];\n\n    if (currentDirection && currentAlignment) {\n      const styles: { [key: string]: string } =\n        stackStyles[currentDirection][currentAlignment];\n      Object.keys(styleProps).forEach((key: string) => {\n        styleProps[key][i] = styles[key] || \"initial\";\n      });\n    }\n\n    const flexBasis =\n      currentAlignment === \"stretch\" && currentDirection === \"horizontal\"\n        ? \"100%\"\n        : null;\n    childFlexBasis[i] = flexBasis;\n\n    const margin =\n      currentDirection === \"horizontal\" ? \"marginLeft\" : \"marginTop\";\n\n    const opposite =\n      currentDirection === \"horizontal\" ? \"marginTop\" : \"marginLeft\";\n    childMarginProps[margin][i] = currentSpace;\n    // styled system can pass numbers that map to theme values and TS doesn't like it\n    childMarginProps[opposite][i] = 0 as unknown as string;\n  });\n\n  return (\n    <Box display=\"flex\" {...styleProps} {...rest}>\n      {stackItems.map((item, i) => (\n        <Box\n          flexBasis={childFlexBasis}\n          {...(i !== 0 ? childMarginProps : {})}\n          key={i}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default Stack;\n","import { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\n\nconst breakpoints = theme.breakpoints;\nconst LENGTH = breakpoints.length + 1;\n\nexport const normalizeResponsiveProp = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: TypeResponsive<any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): TypeResponsive<any> => {\n  if ([\"string\", \"number\"].includes(typeof value)) {\n    return Array(LENGTH).fill(value);\n  }\n\n  if (value.length) {\n    switch (value.length) {\n      case 1:\n        return Array(LENGTH).fill(value[0]);\n      case 2:\n        return [value[0], ...Array(LENGTH - 1).fill(value[1])];\n      case 3:\n        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];\n      case 4:\n        return [\n          value[0],\n          value[1],\n          value[2],\n          ...Array(LENGTH - 3).fill(value[3]),\n        ];\n      case 5:\n        return value;\n      default:\n        throw new Error(\n          `Invalid responsive prop length: ${JSON.stringify(value)}`\n        );\n    }\n  } else {\n    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);\n  }\n};\n","import * as React from \"react\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeSpaceLiterals =\n  | 0\n  | 100\n  | 200\n  | 300\n  | 350\n  | 400\n  | 450\n  | 500\n  | 600\n  | string;\n\ntype TypeDirection = \"vertical\" | \"horizontal\";\n\ntype TypeAlignment = \"left\" | \"center\" | \"right\" | \"stretch\";\n\nexport interface TypeStackProps extends TypeBoxProps {\n  /** Amount of space between items in the stack */\n  space?: TypeResponsive<TypeSpaceLiterals>;\n\n  /** Alignment of the items in the stack (horizontal or vertical) */\n  align?: TypeResponsive<TypeAlignment>;\n\n  /** Axis upon which the stack is laid out (left, center, right, or stretch) */\n  direction?: TypeResponsive<TypeDirection>;\n  children: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAyB;;;ACDzB,+BAAsB;AAItB,IAAM,cAAc,+BAAM;AAC1B,IAAM,SAAS,YAAY,SAAS;AAE7B,IAAM,0BAA0B,CAErC,UAEwB;AACxB,MAAI,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAO,KAAK,GAAG;AAC/C,WAAO,MAAM,MAAM,EAAE,KAAK,KAAK;AAAA,EACjC;AAEA,MAAI,MAAM,QAAQ;AAChB,YAAQ,MAAM,QAAQ;AAAA,MACpB,KAAK;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,MAAM,CAAC,CAAC;AAAA,MACpC,KAAK;AACH,eAAO,CAAC,MAAM,CAAC,GAAG,GAAG,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;AAAA,MACvD,KAAK;AACH,eAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;AAAA,MACjE,KAAK;AACH,eAAO;AAAA,UACL,MAAM,CAAC;AAAA,UACP,MAAM,CAAC;AAAA,UACP,MAAM,CAAC;AAAA,UACP,GAAG,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;AAAA,QACpC;AAAA,MACF,KAAK;AACH,eAAO;AAAA,MACT;AACE,cAAM,IAAI;AAAA,UACR,mCAAmC,KAAK,UAAU,KAAK,CAAC;AAAA,QAC1D;AAAA,IACJ;AAAA,EACF,OAAO;AACL,UAAM,IAAI,MAAM,iCAAiC,KAAK,UAAU,KAAK,CAAC,EAAE;AAAA,EAC1E;AACF;;;ADtCA,6BAAgB;AAkGZ;AAEI,IAAAA,gBAAA;AAjGR,IAAM,cAAc;AAAA,EAClB,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IACA,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACL,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IACA,SAAS;AAAA,MACP,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,EACF;AACF;AAEA,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAG;AACL,MAAsB;AACpB,QAAM,aAAa,sBAAS,QAAQ,QAAQ;AAC5C,QAAM,sBAAsB,wBAAwB,KAAK;AACzD,QAAM,sBAAsB,wBAAwB,SAAS;AAC7D,QAAM,kBAAkB,wBAAwB,KAAK;AACrD,QAAM,eAAe,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAI3E,QAAM,aAAkB;AAAA,IACtB,YAAY,CAAC,GAAG,YAAY;AAAA,IAC5B,eAAe,CAAC,GAAG,YAAY;AAAA,IAC/B,gBAAgB,CAAC,GAAG,YAAY;AAAA,EAClC;AACA,QAAM,iBAAoC,CAAC,GAAG,YAAY;AAC1D,QAAM,mBAAmB;AAAA,IACvB,YAAY,CAAC,GAAG,YAAY;AAAA,IAC5B,WAAW,CAAC,GAAG,YAAY;AAAA,EAC7B;AAEA,eAAa,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,mBAAmB,oBAAoB,CAAC;AAC9C,UAAM,mBAAmB,oBACvB,CACF;AACA,UAAM,eAAe,gBAAgB,CAAC;AAEtC,QAAI,oBAAoB,kBAAkB;AACxC,YAAM,SACJ,YAAY,gBAAgB,EAAE,gBAAgB;AAChD,aAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,QAAgB;AAC/C,mBAAW,GAAG,EAAE,CAAC,IAAI,OAAO,GAAG,KAAK;AAAA,MACtC,CAAC;AAAA,IACH;AAEA,UAAM,YACJ,qBAAqB,aAAa,qBAAqB,eACnD,SACA;AACN,mBAAe,CAAC,IAAI;AAEpB,UAAM,SACJ,qBAAqB,eAAe,eAAe;AAErD,UAAM,WACJ,qBAAqB,eAAe,cAAc;AACpD,qBAAiB,MAAM,EAAE,CAAC,IAAI;AAE9B,qBAAiB,QAAQ,EAAE,CAAC,IAAI;AAAA,EAClC,CAAC;AAED,SACE,4CAAC,uBAAAC,SAAA,EAAI,SAAQ,QAAQ,GAAG,YAAa,GAAG,MACrC,qBAAW,IAAI,CAAC,MAAM,MACrB;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACV,GAAI,MAAM,IAAI,mBAAmB,CAAC;AAAA,MACnC,KAAK;AAAA;AAAA,IAEJ;AAAA,EACH,CACD,GACH;AAEJ;AAEA,IAAO,gBAAQ;;;AEnHf,IAAAC,SAAuB;;;AHEvB,IAAO,cAAQ;","names":["import_react","Box","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-stack",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sproutsocial/seeds-react-stack",
+  "version": "1.0.0",
+  "description": "Seeds React Stack",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-box": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-text": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Stack.stories.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Text from "@sproutsocial/seeds-react-text";
+import Stack from "./Stack";
+
+const meta: Meta<typeof Stack> = {
+  title: "Components/Stack",
+  component: Stack,
+  argTypes: {
+    align: {
+      options: ["left", "center", "right", "stretch"],
+      control: {
+        type: "select",
+      },
+    },
+    direction: {
+      options: ["horizontal", "vertical"],
+      control: {
+        type: "select",
+      },
+    },
+  },
+  args: {
+    align: undefined,
+    direction: undefined,
+  },
+};
+export default meta;
+
+interface ItemProps {
+  children: React.ReactNode;
+}
+
+const Item: React.FC<ItemProps> = (props) => (
+  <Text as="p" color="text.body" {...props} />
+);
+
+type Story = StoryObj<typeof Stack>;
+
+export const DefaultStory: Story = {
+  name: "Default (Vertical)",
+  args: {
+    // ...existing code...
+  },
+  render: (args) => (
+    <Stack p={400} {...args}>
+      <Item>This</Item>
+      <Item>is</Item>
+      <Item>the</Item>
+      <Item>stack</Item>
+      <Item>component</Item>
+    </Stack>
+  ),
+};
+
+export const ResponsiveDirection: Story = {
+  name: "Responsive direction",
+  args: {
+    direction: ["vertical", "horizontal", "vertical"],
+  },
+  render: (args) => (
+    <Stack p={400} {...args}>
+      <Item>Stack</Item>
+      <Item>is</Item>
+      <Item>a</Item>
+      <Item>layout</Item>
+      <Item>utility</Item>
+    </Stack>
+  ),
+};
+
+export const ResponsiveAlignment: Story = {
+  name: "Responsive alignment",
+  args: {
+    align: ["left", "center", "stretch"],
+  },
+  render: (args) => (
+    <Stack p={400} {...args}>
+      <Item>Stack</Item>
+      <Item>is</Item>
+      <Item>a</Item>
+      <Item>layout</Item>
+      <Item>utility</Item>
+    </Stack>
+  ),
+};
+
+export const ResponsiveSpace: Story = {
+  name: "Responsive space",
+  args: {
+    space: [300, 450, 600],
+  },
+  render: (args) => (
+    <Stack p={400} {...args}>
+      <Item>Stack</Item>
+      <Item>is</Item>
+      <Item>a</Item>
+      <Item>layout</Item>
+      <Item>utility</Item>
+    </Stack>
+  ),
+};

package/src/Stack.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { Children } from "react";
+import { normalizeResponsiveProp } from "./utils";
+import Box from "@sproutsocial/seeds-react-box";
+import type { TypeStackProps } from "./StackTypes";
+
+const stackStyles = {
+  horizontal: {
+    left: {
+      alignItems: "center",
+    },
+    center: {
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    right: {
+      alignItems: "center",
+      justifyContent: "flex-end",
+    },
+    stretch: {
+      alignItems: "center",
+    },
+  },
+  vertical: {
+    left: {
+      flexDirection: "column",
+      alignItems: "flex-start",
+    },
+    center: {
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    right: {
+      flexDirection: "column",
+      alignItems: "flex-end",
+    },
+    stretch: {
+      flexDirection: "column",
+      alignItems: "stretch",
+    },
+  },
+};
+
+const Stack = ({
+  children,
+  space = 300,
+  align = "left",
+  direction = "vertical",
+  ...rest
+}: TypeStackProps) => {
+  const stackItems = Children.toArray(children);
+  const responsiveAlignment = normalizeResponsiveProp(align);
+  const responsiveDirection = normalizeResponsiveProp(direction);
+  const responsiveSpace = normalizeResponsiveProp(space);
+  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
+
+  // TODO: rely on styled system to solve this during the refactor
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const styleProps: any = {
+    alignItems: [...initialValue],
+    flexDirection: [...initialValue],
+    justifyContent: [...initialValue],
+  };
+  const childFlexBasis: (string | null)[] = [...initialValue];
+  const childMarginProps = {
+    marginLeft: [...initialValue],
+    marginTop: [...initialValue],
+  };
+
+  initialValue.forEach((_, i) => {
+    const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;
+    const currentAlignment = responsiveAlignment[
+      i
+    ] as keyof (typeof stackStyles)["horizontal"];
+    const currentSpace = responsiveSpace[i];
+
+    if (currentDirection && currentAlignment) {
+      const styles: { [key: string]: string } =
+        stackStyles[currentDirection][currentAlignment];
+      Object.keys(styleProps).forEach((key: string) => {
+        styleProps[key][i] = styles[key] || "initial";
+      });
+    }
+
+    const flexBasis =
+      currentAlignment === "stretch" && currentDirection === "horizontal"
+        ? "100%"
+        : null;
+    childFlexBasis[i] = flexBasis;
+
+    const margin =
+      currentDirection === "horizontal" ? "marginLeft" : "marginTop";
+
+    const opposite =
+      currentDirection === "horizontal" ? "marginTop" : "marginLeft";
+    childMarginProps[margin][i] = currentSpace;
+    // styled system can pass numbers that map to theme values and TS doesn't like it
+    childMarginProps[opposite][i] = 0 as unknown as string;
+  });
+
+  return (
+    <Box display="flex" {...styleProps} {...rest}>
+      {stackItems.map((item, i) => (
+        <Box
+          flexBasis={childFlexBasis}
+          {...(i !== 0 ? childMarginProps : {})}
+          key={i}
+        >
+          {item}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default Stack;

package/src/StackTypes.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import type { TypeResponsive } from "@sproutsocial/seeds-react-system-props";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+export type TypeSpaceLiterals =
+  | 0
+  | 100
+  | 200
+  | 300
+  | 350
+  | 400
+  | 450
+  | 500
+  | 600
+  | string;
+
+type TypeDirection = "vertical" | "horizontal";
+
+type TypeAlignment = "left" | "center" | "right" | "stretch";
+
+export interface TypeStackProps extends TypeBoxProps {
+  /** Amount of space between items in the stack */
+  space?: TypeResponsive<TypeSpaceLiterals>;
+
+  /** Alignment of the items in the stack (horizontal or vertical) */
+  align?: TypeResponsive<TypeAlignment>;
+
+  /** Axis upon which the stack is laid out (left, center, right, or stretch) */
+  direction?: TypeResponsive<TypeDirection>;
+  children: React.ReactNode;
+}

package/src/__tests__/Stack.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { Text } from "@sproutsocial/seeds-react-text";
+import Stack from "../Stack";
+
+interface ItemProps {
+  [key: string]: any;
+}
+
+const Item = (props: ItemProps) => (
+  <Text as="div" color="text.body" bg="container.background.base" {...props}>
+    {props.children}
+  </Text>
+);
+
+describe("Stack", () => {
+  it("should render properly", async () => {
+    const { container, runA11yCheck } = render(
+      <Stack>
+        <Item>Hello world!</Item>
+      </Stack>
+    );
+    expect(container).toBeTruthy();
+    await runA11yCheck();
+  });
+});

package/src/__tests__/Stack.typetest.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import Stack from "../Stack";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function StackTypes() {
+  return (
+    <>
+      <Stack space={300} align="center" direction="horizontal">
+        <Box>Seeds</Box>
+        <Box>Design</Box>
+        <Box>System</Box>
+      </Stack>
+      {/* @ts-expect-error - test that invalid children are rejected */}
+      <Stack />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Stack from "./Stack";
+
+export default Stack;
+export { Stack };
+export * from "./StackTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/utils.ts

@@ -0,0 +1,42 @@
+import { theme } from "@sproutsocial/seeds-react-theme";
+
+import type { TypeResponsive } from "@sproutsocial/seeds-react-system-props";
+
+const breakpoints = theme.breakpoints;
+const LENGTH = breakpoints.length + 1;
+
+export const normalizeResponsiveProp = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: TypeResponsive<any>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): TypeResponsive<any> => {
+  if (["string", "number"].includes(typeof value)) {
+    return Array(LENGTH).fill(value);
+  }
+
+  if (value.length) {
+    switch (value.length) {
+      case 1:
+        return Array(LENGTH).fill(value[0]);
+      case 2:
+        return [value[0], ...Array(LENGTH - 1).fill(value[1])];
+      case 3:
+        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];
+      case 4:
+        return [
+          value[0],
+          value[1],
+          value[2],
+          ...Array(LENGTH - 3).fill(value[3]),
+        ];
+      case 5:
+        return value;
+      default:
+        throw new Error(
+          `Invalid responsive prop length: ${JSON.stringify(value)}`
+        );
+    }
+  } else {
+    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);
+  }
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));