@hive-ui/stack 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import { BoxProps } from "@hive-ui/box";
+import * as _$react from "react";
+import { ResponsiveValue, SpaceOptions } from "@hive-ui/style-props";
+
+//#region src/Stack.d.ts
+type StackProps = Pick<BoxProps<"div">, "element" | "children" | "alignItems" | "flexWrap"> & {
+  orientation: ResponsiveValue<"horizontal" | "vertical">;
+  spacing: SpaceOptions;
+};
+declare const Stack: _$react.ForwardRefExoticComponent<Pick<BoxProps<"div">, "alignItems" | "children" | "element" | "flexWrap"> & {
+  orientation: ResponsiveValue<"horizontal" | "vertical">;
+  spacing: SpaceOptions;
+} & _$react.RefAttributes<HTMLElement>>;
+//#endregion
+export { Stack, type StackProps };

package/dist/index.mjs

@@ -0,0 +1,60 @@
+import { Box } from "@hive-ui/box";
+import { Children, createElement, forwardRef, isValidElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Stack.tsx
+const getStackDisplay = (orientation) => {
+	if (Array.isArray(orientation)) return orientation.map((value) => {
+		if (value === "horizontal") return "flex";
+		return "block";
+	});
+	if (orientation === "horizontal") return "flex";
+	return "block";
+};
+const Stack = forwardRef(({ element = "STACK", children, orientation, spacing, ...props }, ref) => {
+	const [childrenCount, validChildren] = useMemo(() => {
+		const filteredChildren = Children.toArray(children).filter((child) => isValidElement(child) || typeof child === "string");
+		return [filteredChildren.length, filteredChildren];
+	}, [children]);
+	const stackStyles = useMemo(() => {
+		return {
+			display: getStackDisplay(orientation),
+			alignItems: "center",
+			flexWrap: "wrap"
+		};
+	}, [orientation]);
+	const childMargins = useMemo(() => {
+		let styles = {};
+		if (Array.isArray(orientation)) {
+			const marginRight = [];
+			const marginBottom = [];
+			orientation.forEach((value, i) => {
+				marginRight[i] = value === "horizontal" ? spacing : "space0";
+				marginBottom[i] = value === "horizontal" ? "space0" : spacing;
+			});
+			styles = {
+				marginRight,
+				marginBottom
+			};
+		}
+		if (orientation === "horizontal") styles = { marginRight: spacing };
+		if (orientation === "vertical") styles = { marginBottom: spacing };
+		return styles;
+	}, [orientation, spacing]);
+	return /* @__PURE__ */ jsx(Box, {
+		...props,
+		...stackStyles,
+		as: "div",
+		element,
+		ref,
+		children: validChildren.map((child, index) => {
+			const childKey = isValidElement(child) && child.key != null ? child.key : `stack-${index}`;
+			return /* @__PURE__ */ createElement(Box, {
+				element: `${element}_CHILD`,
+				...childrenCount !== index + 1 ? childMargins : null,
+				key: childKey
+			}, child);
+		})
+	});
+});
+//#endregion
+export { Stack };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hive-ui/stack",
+  "version": "0.1.0",
+  "description": "Hive UI Stack Component",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "dependencies": {
+    "@hive-ui/box": "^0.1.0",
+    "@hive-ui/style-props": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.2",
+    "@typescript/native-preview": "7.0.0-dev.20260509.2",
+    "bumpp": "^11.1.0",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.1.20",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.20"
+  },
+  "peerDependencies": {
+    "react": "19.2.6"
+  }
+}