@pittorica/stack-react 0.8.2

package/dist/stack.css.d.ts

@@ -0,0 +1,80 @@
+export declare const stackStyle: import('@vanilla-extract/recipes').RuntimeFn<{
+    direction: {
+        horizontal: {
+            flexDirection: "row";
+        };
+        'horizontal-reversed': {
+            flexDirection: "row-reverse";
+        };
+        vertical: {
+            flexDirection: "column";
+        };
+        'vertical-reversed': {
+            flexDirection: "column-reverse";
+        };
+    };
+    align: {
+        start: {
+            alignItems: "flex-start";
+        };
+        center: {
+            alignItems: "center";
+        };
+        end: {
+            alignItems: "flex-end";
+        };
+        stretch: {
+            alignItems: "stretch";
+        };
+    };
+    justify: {
+        start: {
+            justifyContent: "flex-start";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        end: {
+            justifyContent: "flex-end";
+        };
+        spaceBetween: {
+            justifyContent: "space-between";
+        };
+        spaceAround: {
+            justifyContent: "space-around";
+        };
+        spaceEvenly: {
+            justifyContent: "space-evenly";
+        };
+    };
+    gap: {
+        none: {
+            gap: number;
+        };
+        xsmall: {
+            gap: "0.25rem";
+        };
+        small: {
+            gap: "0.5rem";
+        };
+        medium: {
+            gap: "1rem";
+        };
+        large: {
+            gap: "1.5rem";
+        };
+        xlarge: {
+            gap: "2rem";
+        };
+        xxlarge: {
+            gap: "3rem";
+        };
+        xxxlarge: {
+            gap: "4rem";
+        };
+        xxxxlarge: {
+            gap: "6rem";
+        };
+    };
+}>;
+//# sourceMappingURL=stack.css.d.ts.map

package/dist/stack.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.css.d.ts","sourceRoot":"","sources":["../src/stack.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsErB,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pittorica/stack-react",
+  "version": "0.8.2",
+  "private": false,
+  "author": {
+    "name": "Davide Di Criscito"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.js",
+  "dependencies": {
+    "@vanilla-extract/recipes": "^0.5.7",
+    "clsx": "^2.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@pittorica/box-react": "0.8.2",
+    "@pittorica/styles": "0.8.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  }
+}

package/src/Stack.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+import { Box, type BoxProps } from '@pittorica/box-react';
+import { SPACING_TOKENS, type SpacingToken } from '@pittorica/styles';
+
+import { stackStyle } from './stack.css.js';
+
+export const STACK_DIRECTIONS = [
+  'horizontal',
+  'horizontal-reversed',
+  'vertical',
+  'vertical-reversed',
+] as const;
+
+export type StackDirection = (typeof STACK_DIRECTIONS)[number];
+
+export const STACK_ALIGNS = ['start', 'center', 'end', 'stretch'] as const;
+
+export type StackAlign = (typeof STACK_ALIGNS)[number];
+
+export const STACK_JUSTIFIES = [
+  'start',
+  'center',
+  'end',
+  'spaceBetween',
+  'spaceAround',
+  'spaceEvenly',
+] as const;
+
+export type StackJustify = (typeof STACK_JUSTIFIES)[number];
+
+export interface StackProps extends Omit<
+  BoxProps,
+  'as' | 'display' | 'flexDirection' | 'alignItems' | 'justifyContent' | 'gap'
+> {
+  direction?: StackDirection;
+  align?: StackAlign;
+  justify?: StackJustify;
+  gap?: SpacingToken | string;
+}
+
+export const Stack: React.FC<StackProps> = ({
+  direction = 'horizontal',
+  align = 'center',
+  justify = 'center',
+  gap,
+  className,
+  ...props
+}) => {
+  const isGapToken = gap && SPACING_TOKENS.includes(gap as SpacingToken);
+  const stackClass = isGapToken
+    ? stackStyle({
+        direction,
+        align,
+        justify,
+        gap: gap as SpacingToken,
+      })
+    : stackStyle({
+        direction,
+        align,
+        justify,
+      });
+
+  return (
+    <Box
+      as="div"
+      className={clsx(stackClass, className)}
+      style={{
+        ...(!SPACING_TOKENS.includes(gap as SpacingToken) && { gap: gap }),
+        ...props.style,
+      }}
+      {...props}
+    />
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './stack.css.js';
+export * from './Stack.js';

package/src/stack.css.ts

@@ -0,0 +1,73 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+export const stackStyle = recipe({
+  base: {
+    display: 'flex',
+  },
+  variants: {
+    direction: {
+      horizontal: {
+        flexDirection: 'row',
+      },
+      'horizontal-reversed': {
+        flexDirection: 'row-reverse',
+      },
+      vertical: {
+        flexDirection: 'column',
+      },
+      'vertical-reversed': {
+        flexDirection: 'column-reverse',
+      },
+    },
+    align: {
+      start: {
+        alignItems: 'flex-start',
+      },
+      center: {
+        alignItems: 'center',
+      },
+      end: {
+        alignItems: 'flex-end',
+      },
+      stretch: {
+        alignItems: 'stretch',
+      },
+    },
+    justify: {
+      start: {
+        justifyContent: 'flex-start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      end: {
+        justifyContent: 'flex-end',
+      },
+      spaceBetween: {
+        justifyContent: 'space-between',
+      },
+      spaceAround: {
+        justifyContent: 'space-around',
+      },
+      spaceEvenly: {
+        justifyContent: 'space-evenly',
+      },
+    },
+    gap: {
+      none: { gap: 0 },
+      xsmall: { gap: '0.25rem' },
+      small: { gap: '0.5rem' },
+      medium: { gap: '1rem' },
+      large: { gap: '1.5rem' },
+      xlarge: { gap: '2rem' },
+      xxlarge: { gap: '3rem' },
+      xxxlarge: { gap: '4rem' },
+      xxxxlarge: { gap: '6rem' },
+    },
+  },
+  defaultVariants: {
+    direction: 'horizontal',
+    align: 'center',
+    justify: 'center',
+  },
+});

package/tsconfig.app.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler']],
+      },
+    }),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      rollupTypes: false,
+      outDir: 'dist',
+      tsconfigPath: './tsconfig.app.json',
+    }),
+  ],
+
+  build: {
+    lib: {
+      entry: path.resolve(import.meta.dirname, 'src/index.ts'),
+      name: '@pittorica/stack-react',
+      formats: ['es', 'cjs'],
+      fileName: (format: string): string =>
+        `index.${format === 'es' ? 'js' : 'cjs'}`,
+    },
+    sourcemap: true,
+    minify: false,
+  },
+});