├── .github
    └── FUNDING.yml
├── .gitignore
├── .prettierignore
├── LICENSE
├── README.md
├── eslint.config.js
├── package.json
├── pnpm-lock.yaml
├── prettier.config.js
├── src
    ├── Alignment.tsx
    ├── Gap.tsx
    ├── Types.d.ts
    ├── __tests__
    │   ├── index.native.test.tsx
    │   └── index.test.tsx
    ├── index.native.tsx
    └── index.tsx
├── tsconfig.json
├── tsdown.config.js
└── vitest.config.ts


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: cpojer
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .eslintcache
2 | .pnpm-debug.log
3 | /lib/
4 | /node_modules/
5 | tsconfig.tsbuildinfo
6 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | lib
2 | node_modules
3 | pnpm-lock.yaml
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2025 Nakazawa Tech
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # `@nkzw/stack`
  2 | 
  3 | _Zero-dependency, type-safe Stack component for streamlining flexbox usage in React & React Native._
  4 | 
  5 | You always end up with visual clutter and boilerplate when using flexbox, no matter which styling solution you choose. `<Stack />` supports all flexbox properties directly as named props, making your flexbox components visually cleaner and easier to read. For most use cases, you'll only need prop shorthands like `gap`, `vertical`, `center`, and `padding`:
  6 | 
  7 | ```tsx
  8 | import Stack from '@nkzw/stack';
  9 | 
 10 | <Stack vertical gap center>
 11 |   <div>Apple</div> // Use on web
 12 |   <View>Banana</View> // Use in React Native
 13 |   <Item>Kiwi</Item>
 14 | </Stack>;
 15 | ```
 16 | 
 17 | Other benefits include:
 18 | 
 19 | - **Minimal API:** Easily control direction, spacing, alignment, and more using shorthand props.
 20 | - **Sensible Defaults:** Ships with sensible cross-platform defaults for React & React Native.
 21 | - **Consistent spacing:** Enforces 4px grid for gap & padding values via TypeScript.
 22 | - **Flexible padding:** Automatically derives padding from gap or accepts custom values.
 23 | - **Polymorphic by design:** Render as any HTML or custom component via the `as` prop while maintaining full type safety.
 24 | 
 25 | ## Installation
 26 | 
 27 | ```bash
 28 | npm install @nkzw/stack
 29 | ```
 30 | 
 31 | ## Flexbox Defaults
 32 | 
 33 | Using a `<Stack />` component without any props renders it like this:
 34 | 
 35 | ```tsx
 36 | <div
 37 |   style={{
 38 |     display: 'flex',
 39 |     flexDirection: 'row',
 40 |     flexWrap: 'nowrap',
 41 |     justifyContent: 'flex-start',
 42 |   }}
 43 | />
 44 | ```
 45 | 
 46 | Unlike the default flexbox styles on web, `justify-content` is using `flex-start` instead of `start`. Flexbox on web and on React Natie use different default values for `flexDirection`, `alignContent` and `flexShrink`. `<Stack />` uses these defaults for both platforms:
 47 | 
 48 | - `flexDirection: 'row'`
 49 | - `alignContent: 'flex-start'`
 50 | 
 51 | `flexShrink` is set to `1` by default on web and `0` on React Native.
 52 | 
 53 | ## Props
 54 | 
 55 | Props for `<Stack /> are meant to be mostly static and passed as shorthand only, without any values.
 56 | 
 57 | ```tsx
 58 | type StackProps = {
 59 |   alignCenter?: boolean; // `align-items: center`
 60 |   alignEnd?: boolean; // `align-items: flex-end`
 61 |   alignStart?: boolean; // `align-items: center`
 62 |   around?: boolean; // `justify-content: space-around`
 63 |   as: ElementType; // The element to render, defaults to `<div />` on the web, and `<View />` on React Native.
 64 |   baseline?: boolean; // `align-items: baseline`
 65 |   between?: boolean; // `justify-content: space-between`
 66 |   center?: boolean; // `justify-content: center`
 67 |   children?: ReactNode;
 68 |   columnGap?: Gap; // `column-gap: <Gap>`
 69 |   content?: AlignContent; // `align-content: start | end | center | stretch | space-between | space-around | space-evenly`
 70 |   end?: boolean; // `justify-content: flex-end`
 71 |   evenly?: boolean; // `justify-content: space-evenly`
 72 |   flex1?: boolean; // `flex: 1`
 73 |   gap?: Gap; // `gap: <Gap>`
 74 |   horizontalPadding?: Gap; // `padding-left` and `padding-right` set to the same value as `gap` when boolean or a <Gap> value.
 75 |   inline?: boolean; // `display: inline-flex` (*web only*)
 76 |   padding?: Gap; // `padding: <Gap>` or `padding: 8px` when `gap` is `true`.
 77 |   reverse?: boolean; // `flex-direction: row-reverse` or `flex-direction: column-reverse` when `vertical` is `true`.
 78 |   rowGap?: Gap; // `row-gap: <Gap>`
 79 |   safe?: boolean; // When used with `center` or `end`: `justify-content: safe center | safe flex-end`
 80 |   self?: AlignSelf; // `align-self: center | end | start | stretch | baseline`
 81 |   shrink0?: boolean; // `flex-shrink: 0`
 82 |   stretch?: boolean; // `flex-grow: 1`
 83 |   vertical?: boolean; // `flex-direction: column`
 84 |   verticalPadding?: Gap; // `padding-top` and `padding-bottom` set to the same value as `gap` when true or a <Gap> value.
 85 |   wrap?: boolean; // `flex-wrap: wrap`
 86 | };
 87 | ```
 88 | 
 89 | ## Usage
 90 | 
 91 | ### Vertical Layout and Gap
 92 | 
 93 | ```tsx
 94 | import Stack from '@nkzw/stack';
 95 | 
 96 | // Horizontal layout (default).
 97 | <Stack gap={16}>
 98 |   <div>Apple</div>
 99 |   <div>Banana</div>
100 |   <div>Kiwi</div>
101 | </Stack>
102 | 
103 | // Vertical layout.
104 | <Stack vertical gap={16}>
105 |   <div>Apple</div>
106 |   <div>Banana</div>
107 |   <div>Kiwi</div>
108 | </Stack>
109 | 
110 | // Using boolean gap (uses default gap of 8px).
111 | <Stack vertical gap>
112 |   <div>Apple</div>
113 |   <div>Banana</div>
114 | </Stack>
115 | ```
116 | 
117 | Or with React Native:
118 | 
119 | ```tsx
120 | import Stack from '@nkzw/stack/native';
121 | 
122 | <Stack vertical gap={16}>
123 |   <Text>Apple</Text>
124 |   <Text>Banana</Text>
125 |   <Text>Kiwi</Text>
126 | </Stack>;
127 | ```
128 | 
129 | If you are using NativeWind, `<Stack />` will automatically support `className`:
130 | 
131 | ```tsx
132 | <Stack vertical gap={16} className="rounded-md border border-gray-300">
133 |   <Text>Apple</Text>
134 |   <Text>Banana</Text>
135 |   <Text>Kiwi</Text>
136 | </Stack>
137 | ```
138 | 
139 | There is also a shorthand for vertical stacks:
140 | 
141 | ```tsx
142 | import { VStack } from '@nkzw/stack';
143 | 
144 | <VStack gap={16}> // Same as `<Stack vertical gap={16}>`.
145 |   <div>Apple</div>
146 |   <div>Banana</div>
147 |   <div>Kiwi</div>
148 | </VStack>;
149 | ```
150 | 
151 | ### Padding
152 | 
153 | ```tsx
154 | // Add padding equal to the gap.
155 | <Stack gap={16} padding>
156 |   <div>Content</div>
157 | </Stack>
158 | 
159 | // Custom padding value.
160 | <Stack gap={16} padding={24}>
161 |   <div>Content</div>
162 | </Stack>
163 | 
164 | // Padding using the default gap value.
165 | <Stack gap padding>
166 |   <div>Content</div>
167 | </Stack>
168 | ```
169 | 
170 | ## Advanced Gap Control
171 | 
172 | ### Row and Column Gaps
173 | 
174 | ```tsx
175 | // Different gaps for rows and columns.
176 | <Stack rowGap={8} columnGap={16}>
177 |   <div>Apple</div>
178 |   <div>Banana</div>
179 |   <div>Kiwi</div>
180 |   <div>Item 4</div>
181 | </Stack>
182 | 
183 | // Vertical layout with row gap.
184 | <Stack vertical rowGap={20}>
185 |   <div>Apple</div>
186 |   <div>Banana</div>
187 | </Stack>
188 | ```
189 | 
190 | ### Directional Padding
191 | 
192 | ```tsx
193 | // Vertical padding only.
194 | <Stack gap={16} verticalPadding>
195 |   <div>Content</div>
196 | </Stack>
197 | 
198 | // Horizontal padding only.
199 | <Stack gap={16} horizontalPadding>
200 |   <div>Content</div>
201 | </Stack>
202 | 
203 | // Custom directional padding.
204 | <Stack verticalPadding={24} horizontalPadding={32}>
205 |   <div>Content</div>
206 | </Stack>
207 | 
208 | // Mix with gaps.
209 | <Stack rowGap={12} columnGap={20} verticalPadding horizontalPadding={32}>
210 |   <div>Content</div>
211 | </Stack>
212 | ```
213 | 
214 | ## Justification (Main Axis)
215 | 
216 | ```tsx
217 | // Center items.
218 | <Stack center>
219 |   <div>Centered</div>
220 | </Stack>
221 | 
222 | // Align to end.
223 | <Stack end>
224 |   <div>At end</div>
225 | </Stack>
226 | 
227 | // Space around items.
228 | <Stack around>
229 |   <div>Apple</div>
230 |   <div>Banana</div>
231 | </Stack>
232 | 
233 | // Align between.
234 | <Stack between>
235 |   <div>Between</div>
236 | </Stack>
237 | 
238 | // Space evenly.
239 | <Stack evenly>
240 |   <div>Apple</div>
241 |   <div>Banana</div>
242 | </Stack>
243 | 
244 | // Space between (default).
245 | <Stack>
246 |   <div>Apple</div>
247 |   <div>Banana</div>
248 | </Stack>
249 | ```
250 | 
251 | On web, the `safe` prop is supported too:
252 | 
253 | ```tsx
254 | // Renders with `justify-content: safe center`.
255 | <Stack center safe>
256 |   <div>Centered</div>
257 | </Stack>
258 | 
259 | // Renders with `justify-content: safe flex-end`.
260 | <Stack end safe>
261 |   <div>At end</div>
262 | </Stack>
263 | ```
264 | 
265 | ## Alignment (Cross Axis)
266 | 
267 | ```tsx
268 | // Center align items.
269 | <Stack alignCenter>
270 |   <div>Centered</div>
271 | </Stack>
272 | 
273 | // Align to start.
274 | <Stack alignStart>
275 |   <div>At start</div>
276 | </Stack>
277 | 
278 | // Align to end.
279 | <Stack alignEnd>
280 |   <div>At end</div>
281 | </Stack>
282 | 
283 | // Baseline alignment.
284 | <Stack baseline>
285 |   <div style={{ fontSize: '12px' }}>Small</div>
286 |   <div style={{ fontSize: '24px' }}>Large</div>
287 | </Stack>
288 | ```
289 | 
290 | ## Flex Properties
291 | 
292 | ```tsx
293 | // Take all available space.
294 | <Stack flex1>
295 |   <div>Full width/height</div>
296 | </Stack>
297 | 
298 | // Grow to fill container.
299 | <Stack stretch>
300 |   <div>Stretched</div>
301 | </Stack>
302 | 
303 | // Prevent shrinking.
304 | <Stack shrink0>
305 |   <div>Won't shrink</div>
306 | </Stack>
307 | ```
308 | 
309 | ## Self Alignment
310 | 
311 | ```tsx
312 | // Align self to center.
313 | <Stack self="center">
314 |   <div>Self-centered</div>
315 | </Stack>
316 | 
317 | // Other self alignment options.
318 | <Stack self="start">
319 |   <div>Self at start</div>
320 | </Stack>
321 | 
322 | <Stack self="end">
323 |   <div>Self at end</div>
324 | </Stack>
325 | 
326 | <Stack self="stretch">
327 |   <div>Self stretched</div>
328 | </Stack>
329 | ```
330 | 
331 | ## Content Alignment
332 | 
333 | ```tsx
334 | <Stack content="center">
335 |   <div>Content</div>
336 | </Stack>
337 | 
338 | <Stack content="start">
339 |   <div>Content</div>
340 | </Stack>
341 | ```
342 | 
343 | ## Layout Options
344 | 
345 | ```tsx
346 | // Inline flex.
347 | <Stack inline>
348 |   <div>Inline flex</div>
349 | </Stack>
350 | 
351 | // Reverse direction.
352 | <Stack reverse>
353 |   <div>Apple (appears last)</div>
354 |   <div>Banana (appears first)</div>
355 | </Stack>
356 | 
357 | // Vertical reverse.
358 | <Stack vertical reverse>
359 |   <div>Apple (appears at bottom)</div>
360 |   <div>Banana (appears at top)</div>
361 | </Stack>
362 | 
363 | // Wrap (`flex-wrap: nowrap` is the default).
364 | <Stack wrap>
365 |   <div>Apple</div>
366 |   <div>Banana</div>
367 |   <div>Kiwi</div>
368 | </Stack>
369 | ```
370 | 
371 | ## Gap Values
372 | 
373 | Available gap values: `1`, `2`, `4`, `8`, `12`, `16`, `20`, `24`, `28`, `32`, `36`, `40`, `44`, `48`, or `true` for default.
374 | 
375 | You can set the default gap value globally:
376 | 
377 | ```tsx
378 | import { setDefaultGap } from '@nkzw/stack';
379 | 
380 | setDefaultGap(12); // Now gap={true} will use 12px.
381 | ```
382 | 
383 | ## Render as different elements or custom commponents
384 | 
385 | ```tsx
386 | <Stack as="section" gap={16}>
387 |   <div>Content</div>
388 | </Stack>
389 | ```
390 | 
391 | Stack carries over component props from custom components in a type-safe manner:
392 | 
393 | ```tsx
394 | <Stack as="nav" center gap={24}>
395 |   <Stack as={Link} to="/home">Home</Stack>
396 |   <Stack as={Link} to="/about">About</a>
397 | </Stack>
398 | ```
399 | 
400 | ## Examples
401 | 
402 | ### Card Layout
403 | 
404 | ```tsx
405 | <Stack
406 |   vertical
407 |   gap={16}
408 |   padding={24}
409 |   style={{ border: '1px solid #ccc', borderRadius: '16px' }}
410 | >
411 |   <h2>Card Title</h2>
412 |   <p>Card content goes here</p>
413 |   <Stack gap={8}>
414 |     <button>Action 1</button>
415 |     <button>Action 2</button>
416 |   </Stack>
417 | </Stack>
418 | ```
419 | 
420 | ### Navigation Bar
421 | 
422 | ```tsx
423 | <Stack alignCenter padding={16} style={{ backgroundColor: '#f5f5f5' }}>
424 |   <h1>Logo</h1>
425 |   <Stack gap={24} flex1 center>
426 |     <a href="/home">Home</a>
427 |     <a href="/about">About</a>
428 |     <a href="/contact">Contact</a>
429 |   </Stack>
430 |   <button>Sign In</button>
431 | </Stack>
432 | ```
433 | 
434 | ### Form Layout
435 | 
436 | ```tsx
437 | <Stack as="form" vertical gap={16} padding={24}>
438 |   <Stack vertical gap>
439 |     <label>Name</label>
440 |     <input type="text" />
441 |   </Stack>
442 |   <Stack vertical gap>
443 |     <label>Email</label>
444 |     <input type="email" />
445 |   </Stack>
446 |   <Stack gap end>
447 |     <button type="button">Cancel</button>
448 |     <button type="submit">Submit</button>
449 |   </Stack>
450 | </Stack>
451 | ```
452 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import nkzw from '@nkzw/eslint-config';
2 | 
3 | export default [...nkzw, { ignores: ['lib/**/*'] }];
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@nkzw/stack",
 3 |   "version": "2.1.1",
 4 |   "description": "Zero-dependency, type-safe Stack component for streamlining flexbox usage in React & React Native.",
 5 |   "homepage": "https://github.com/nkzw-tech/stack",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/nkzw-tech/stack"
 9 |   },
10 |   "license": "MIT",
11 |   "author": {
12 |     "name": "Christoph Nakazawa",
13 |     "email": "christoph.pojer@gmail.com"
14 |   },
15 |   "type": "module",
16 |   "exports": {
17 |     ".": {
18 |       "react-native": "./lib/index.native.js",
19 |       "default": "./lib/index.js"
20 |     }
21 |   },
22 |   "main": "./lib/index.js",
23 |   "types": "./lib/index.d.ts",
24 |   "files": [
25 |     "lib"
26 |   ],
27 |   "scripts": {
28 |     "build": "mkdir -p lib && tsdown --clean --platform=browser src/index.tsx && tsdown --no-clean src/index.native.tsx",
29 |     "format": "prettier --experimental-cli --write .",
30 |     "lint": "eslint --cache .",
31 |     "lint:format": "prettier --experimental-cli --cache --check .",
32 |     "test": "npm-run-all --parallel tsc:check lint lint:format vitest:run",
33 |     "tsc:check": "tsc",
34 |     "vitest:run": "vitest run"
35 |   },
36 |   "devDependencies": {
37 |     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
38 |     "@nkzw/eslint-config": "^3.0.1",
39 |     "@prettier/plugin-oxc": "^0.0.4",
40 |     "@testing-library/react": "^16.3.0",
41 |     "@types/node": "^24.0.3",
42 |     "@types/react": "^19.1.8",
43 |     "@typescript-eslint/eslint-plugin": "^8.35.0",
44 |     "@typescript-eslint/parser": "^8.35.0",
45 |     "@vitejs/plugin-react": "^4.6.0",
46 |     "eslint": "^9.29.0",
47 |     "happy-dom": "^18.0.1",
48 |     "nativewind": "^4.1.23",
49 |     "npm-run-all2": "^8.0.4",
50 |     "prettier": "^3.6.0",
51 |     "prettier-plugin-packagejson": "^2.5.15",
52 |     "react": "^19.1.0",
53 |     "react-native": "^0.80.0",
54 |     "tsdown": "^0.12.8",
55 |     "typescript": "^5.8.3",
56 |     "vitest": "^3.2.4"
57 |   },
58 |   "peerDependencies": {
59 |     "nativewind": "^4.1.23",
60 |     "react": ">=17.0.0",
61 |     "react-native": ">=0.67.0"
62 |   },
63 |   "peerDependenciesMeta": {
64 |     "nativewind": {
65 |       "optional": true
66 |     },
67 |     "react-native": {
68 |       "optional": true
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: [
3 |     '@prettier/plugin-oxc',
4 |     '@ianvs/prettier-plugin-sort-imports',
5 |     'prettier-plugin-packagejson',
6 |   ],
7 |   singleQuote: true,
8 | };
9 | 


--------------------------------------------------------------------------------
/src/Alignment.tsx:
--------------------------------------------------------------------------------
 1 | import { AlignContent, AlignSelf } from './Types.js';
 2 | 
 3 | export function resolveAlignment<
 4 |   T extends AlignContent | AlignSelf,
 5 |   S extends Exclude<T, 'start' | 'end'> | 'flex-start' | 'flex-end' | undefined,
 6 | >(value: T | undefined): S {
 7 |   return (value === 'start'
 8 |     ? 'flex-start'
 9 |     : value === 'end'
10 |       ? 'flex-end'
11 |       : value) as unknown as S;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/Gap.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Spacing scale used for layout gaps and paddings.
 3 |  * Values represent pixel-based increments (e.g., 8 = 8px).
 4 |  * Use `true` to apply a the default gap (8px).
 5 |  * You can set the default gap using `setDefaultGap()`.
 6 |  */
 7 | export type Gap =
 8 |   | 0
 9 |   | 1
10 |   | 2
11 |   | 4
12 |   | 8
13 |   | 12
14 |   | 16
15 |   | 20
16 |   | 24
17 |   | 28
18 |   | 32
19 |   | 36
20 |   | 40
21 |   | 44
22 |   | 48
23 |   | true;
24 | 
25 | let defaultGap = 8;
26 | 
27 | export function setDefaultGap(gap: number) {
28 |   defaultGap = gap;
29 | }
30 | 
31 | export function resolveGap(gap: Gap | undefined) {
32 |   return gap === true ? defaultGap : gap;
33 | }
34 | 


--------------------------------------------------------------------------------
/src/Types.d.ts:
--------------------------------------------------------------------------------
 1 | import { ElementType, ComponentProps, ReactNode } from 'react';
 2 | import { Gap } from './Gap.tsx';
 3 | 
 4 | export type AlignContent =
 5 |   /** Items packed to the start of the container */
 6 |   | 'start'
 7 |   /** Items packed to the end of the container */
 8 |   | 'end'
 9 |   /** Items centered along the container */
10 |   | 'center'
11 |   /** Items stretched to fill the container */
12 |   | 'stretch'
13 |   /** Items spaced evenly with first and last item at edges */
14 |   | 'space-between'
15 |   /** Items spaced with equal space around each */
16 |   | 'space-around'
17 |   /** Items spaced with equal space between and around */
18 |   | 'space-evenly';
19 | 
20 | export type AlignSelf =
21 |   /** Aligns this element to the center of the cross axis. */
22 |   | 'center'
23 |   /** Aligns this element to the end of the cross axis. */
24 |   | 'end'
25 |   /** Aligns this element to the start of the cross axis. */
26 |   | 'start'
27 |   /** Stretches this element to fill the container along the cross axis. */
28 |   | 'stretch'
29 |   /** Aligns this element based on its text baseline. */
30 |   | 'baseline';
31 | 
32 | export type StackPropsInternal = {
33 |   /** Aligns items to the center of the cross axis (`align-items: center`). */
34 |   alignCenter?: boolean;
35 |   /** Aligns items to the end of the cross axis (`align-items: flex-end`). */
36 |   alignEnd?: boolean;
37 |   /** Aligns items to the start of the cross axis (`align-items: flex-start`). */
38 |   alignStart?: boolean;
39 |   /** Distributes space evenly around items (`justify-content: space-around`). */
40 |   around?: boolean;
41 |   /** Aligns items based on their text baselines (`align-items: baseline`). */
42 |   baseline?: boolean;
43 |   /** Distributes items with space between them (`justify-content: space-between`). */
44 |   between?: boolean;
45 |   /** Centers items along the main axis (`justify-content: center`). */
46 |   center?: boolean;
47 |   children?: ReactNode;
48 |   /** Sets spacing column gap elements (`column-gap: <Gap>`). Accepts 0–48px in steps of 4, or `true` to apply a default of 8px. */
49 |   columnGap?: Gap;
50 |   /** Defines how multiple rows align along the cross axis (`align-content: ...`). */
51 |   content?: AlignContent;
52 |   /** Aligns items to the end of the main axis (`justify-content: flex-end`). */
53 |   end?: boolean;
54 |   /** Evenly distributes items with equal space between and around (`justify-content: space-evenly`). */
55 |   evenly?: boolean;
56 |   /** Sets `flex: 1` to allow the container to grow and fill available space. */
57 |   flex1?: boolean;
58 |   /** Sets spacing between elements (`gap: <Gap>`). Accepts 0–48px in steps of 4, or `true` to apply a default of 8px. */
59 |   gap?: Gap;
60 |   /** Applies left and right padding (`padding-left: <Gap>; padding-right: <Gap>`). Accepts 0–48px in steps of 4, or `true` to apply a default of 8px. */
61 |   horizontalPadding?: Gap;
62 |   /** Displays as `inline-flex` instead of `flex` (web only). */
63 |   inline?: boolean;
64 |   /** Applies padding (`padding: <Gap>`). Accepts 0–48px in steps of 4, or `true` to apply a default of 8px. */
65 |   padding?: Gap;
66 |   /** Reverses the order of items along the main axis, respects `vertical` setting. */
67 |   reverse?: boolean;
68 |   /** Sets spacing row gap elements (`row-gap: <Gap>`). Accepts 0–48px in steps of 4, or `true` to apply a default of 8px. */
69 |   rowGap?: Gap;
70 |   /** Adds `safe` zone alignment to `center` or `end` (`justify-content: safe ...`). */
71 |   safe?: boolean;
72 |   /** Controls individual item alignment (`align-self: ...`). */
73 |   self?: AlignSelf;
74 |   /** Prevents items from shrinking (`flex-shrink: 0`). */
75 |   shrink0?: boolean;
76 |   /** Enables stretching to fill remaining space (`flex-grow: 1`). */
77 |   stretch?: boolean;
78 |   /** Stacks items vertically (`flex-direction: column`). */
79 |   vertical?: boolean;
80 |   /** Applies top and bottom padding (`padding-top: <Gap>; padding-bottom: <Gap>`). Accepts 0–48px in steps of 4, or `true` to apply a default of 8px. */
81 |   verticalPadding?: Gap;
82 |   /** Enables wrapping of items onto multiple lines (`flex-wrap: wrap`). */
83 |   wrap?: boolean;
84 | };
85 | 
86 | export type AcceptsStyle<C extends ElementType> =
87 |   'style' extends keyof ComponentProps<C> ? C : never;
88 | 
89 | export type AsProp<Component extends ElementType> = {
90 |   /** The element to render, defaults to `<div />` on the web, and `<View />` on React Native. */
91 |   as?: Component;
92 | };
93 | 
94 | export type PropsToOmit<
95 |   Component extends ElementType,
96 |   Props,
97 | > = keyof (AsProp<Component> & Props);
98 | 


--------------------------------------------------------------------------------
/src/__tests__/index.native.test.tsx:
--------------------------------------------------------------------------------
  1 | import { beforeEach, expect, vi, test } from 'vitest';
  2 | import { render } from '@testing-library/react';
  3 | import Stack, { setDefaultGap } from '../index.native.tsx';
  4 | import { createElement } from 'react';
  5 | import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
  6 | 
  7 | const flattenStyle = (style: StyleProp<ViewStyle>) =>
  8 |   Array.isArray(style)
  9 |     ? // @ts-expect-error: We only care about one level of styles.
 10 |       style.reduce((object, item) => ({ ...object, ...item }), {})
 11 |     : style;
 12 | 
 13 | vi.mock('react-native', () => {
 14 |   return {
 15 |     View: ({ children, style, ...props }: ViewProps) =>
 16 |       createElement('view', { ...props, style: flattenStyle(style) }, children),
 17 |   };
 18 | });
 19 | 
 20 | beforeEach(() => {
 21 |   setDefaultGap(8);
 22 | });
 23 | 
 24 | test('renders with default props', () => {
 25 |   const { container } = render(<Stack>Content</Stack>);
 26 |   expect(container.firstChild).toMatchInlineSnapshot(`
 27 |     <view
 28 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
 29 |     >
 30 |       Content
 31 |     </view>
 32 |   `);
 33 | });
 34 | 
 35 | test('renders with gap', () => {
 36 |   const { container } = render(<Stack gap={16}>Content</Stack>);
 37 |   expect(container.firstChild).toMatchInlineSnapshot(`
 38 |     <view
 39 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px;"
 40 |     >
 41 |       Content
 42 |     </view>
 43 |   `);
 44 | });
 45 | 
 46 | test('renders with gap=true (uses default)', () => {
 47 |   const { container } = render(<Stack gap>Content</Stack>);
 48 |   expect(container.firstChild).toMatchInlineSnapshot(`
 49 |     <view
 50 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;"
 51 |     >
 52 |       Content
 53 |     </view>
 54 |   `);
 55 | });
 56 | 
 57 | test('renders with vertical layout', () => {
 58 |   const { container } = render(<Stack vertical>Content</Stack>);
 59 |   expect(container.firstChild).toMatchInlineSnapshot(`
 60 |     <view
 61 |       style="flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;"
 62 |     >
 63 |       Content
 64 |     </view>
 65 |   `);
 66 | });
 67 | 
 68 | test('renders with reverse layout', () => {
 69 |   const { container } = render(<Stack reverse>Content</Stack>);
 70 |   expect(container.firstChild).toMatchInlineSnapshot(`
 71 |     <view
 72 |       style="flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start;"
 73 |     >
 74 |       Content
 75 |     </view>
 76 |   `);
 77 | });
 78 | 
 79 | test('renders with vertical reverse layout', () => {
 80 |   const { container } = render(
 81 |     <Stack reverse vertical>
 82 |       Content
 83 |     </Stack>,
 84 |   );
 85 |   expect(container.firstChild).toMatchInlineSnapshot(`
 86 |     <view
 87 |       style="flex-direction: column-reverse; flex-wrap: nowrap; justify-content: flex-start;"
 88 |     >
 89 |       Content
 90 |     </view>
 91 |   `);
 92 | });
 93 | 
 94 | test('renders with inline display', () => {
 95 |   const { container } = render(<Stack inline>Content</Stack>);
 96 |   expect(container.firstChild).toMatchInlineSnapshot(`
 97 |     <view
 98 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
 99 |     >
100 |       Content
101 |     </view>
102 |   `);
103 | });
104 | 
105 | test('renders with wrap', () => {
106 |   const { container } = render(<Stack wrap>Content</Stack>);
107 |   expect(container.firstChild).toMatchInlineSnapshot(`
108 |     <view
109 |       style="flex-direction: row; flex-wrap: wrap; justify-content: flex-start;"
110 |     >
111 |       Content
112 |     </view>
113 |   `);
114 | });
115 | 
116 | test('renders with alignStart', () => {
117 |   const { container } = render(<Stack alignStart>Content</Stack>);
118 |   expect(container.firstChild).toMatchInlineSnapshot(`
119 |     <view
120 |       style="align-items: flex-start; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
121 |     >
122 |       Content
123 |     </view>
124 |   `);
125 | });
126 | 
127 | test('renders with alignCenter', () => {
128 |   const { container } = render(<Stack alignCenter>Content</Stack>);
129 |   expect(container.firstChild).toMatchInlineSnapshot(`
130 |     <view
131 |       style="align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
132 |     >
133 |       Content
134 |     </view>
135 |   `);
136 | });
137 | 
138 | test('renders with alignEnd', () => {
139 |   const { container } = render(<Stack alignEnd>Content</Stack>);
140 |   expect(container.firstChild).toMatchInlineSnapshot(`
141 |     <view
142 |       style="align-items: flex-end; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
143 |     >
144 |       Content
145 |     </view>
146 |   `);
147 | });
148 | 
149 | test('renders with center justification', () => {
150 |   const { container } = render(<Stack center>Content</Stack>);
151 |   expect(container.firstChild).toMatchInlineSnapshot(`
152 |     <view
153 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: center;"
154 |     >
155 |       Content
156 |     </view>
157 |   `);
158 | });
159 | 
160 | test('renders with between justification', () => {
161 |   const { container } = render(<Stack between>Content</Stack>);
162 |   expect(container.firstChild).toMatchInlineSnapshot(`
163 |     <view
164 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: space-between;"
165 |     >
166 |       Content
167 |     </view>
168 |   `);
169 | });
170 | 
171 | test('renders with end justification', () => {
172 |   const { container } = render(<Stack end>Content</Stack>);
173 |   expect(container.firstChild).toMatchInlineSnapshot(`
174 |     <view
175 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;"
176 |     >
177 |       Content
178 |     </view>
179 |   `);
180 | });
181 | 
182 | test('renders with flex1', () => {
183 |   const { container } = render(<Stack flex1>Content</Stack>);
184 |   expect(container.firstChild).toMatchInlineSnapshot(`
185 |     <view
186 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; flex-basis: 0%;"
187 |     >
188 |       Content
189 |     </view>
190 |   `);
191 | });
192 | 
193 | test('renders with stretch', () => {
194 |   const { container } = render(<Stack stretch>Content</Stack>);
195 |   expect(container.firstChild).toMatchInlineSnapshot(`
196 |     <view
197 |       style="flex-direction: row; flex-grow: 1; flex-wrap: nowrap; justify-content: flex-start;"
198 |     >
199 |       Content
200 |     </view>
201 |   `);
202 | });
203 | 
204 | test('renders with self alignment start', () => {
205 |   const { container } = render(<Stack self="start">Content</Stack>);
206 |   expect(container.firstChild).toMatchInlineSnapshot(`
207 |     <view
208 |       style="align-self: flex-start; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
209 |     >
210 |       Content
211 |     </view>
212 |   `);
213 | });
214 | 
215 | test('renders with self alignment center', () => {
216 |   const { container } = render(<Stack self="center">Content</Stack>);
217 |   expect(container.firstChild).toMatchInlineSnapshot(`
218 |     <view
219 |       style="align-self: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
220 |     >
221 |       Content
222 |     </view>
223 |   `);
224 | });
225 | 
226 | test('renders with padding and gap', () => {
227 |   const { container } = render(
228 |     <Stack gap={16} padding>
229 |       Content
230 |     </Stack>,
231 |   );
232 |   expect(container.firstChild).toMatchInlineSnapshot(`
233 |     <view
234 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 16px;"
235 |     >
236 |       Content
237 |     </view>
238 |   `);
239 | });
240 | 
241 | test('renders with verticalPadding and gap', () => {
242 |   const { container } = render(
243 |     <Stack gap={24} verticalPadding>
244 |       Content
245 |     </Stack>,
246 |   );
247 |   expect(container.firstChild).toMatchInlineSnapshot(`
248 |     <view
249 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 24px; padding-bottom: 24px; padding-top: 24px;"
250 |     >
251 |       Content
252 |     </view>
253 |   `);
254 | });
255 | 
256 | test('renders with horizontalPadding and gap', () => {
257 |   const { container } = render(
258 |     <Stack gap={32} horizontalPadding>
259 |       Content
260 |     </Stack>,
261 |   );
262 |   expect(container.firstChild).toMatchInlineSnapshot(`
263 |     <view
264 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 32px; padding-right: 32px; padding-left: 32px;"
265 |     >
266 |       Content
267 |     </view>
268 |   `);
269 | });
270 | 
271 | test('renders with custom style', () => {
272 |   const { container } = render(
273 |     <Stack style={{ backgroundColor: 'red', margin: 10 }}>Content</Stack>,
274 |   );
275 |   expect(container.firstChild).toMatchInlineSnapshot(`
276 |     <view
277 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; background-color: red; margin: 10px;"
278 |     >
279 |       Content
280 |     </view>
281 |   `);
282 | });
283 | 
284 | test('renders with className', () => {
285 |   const { container } = render(<Stack className="custom-class">Content</Stack>);
286 | 
287 |   expect(container.firstChild).toMatchInlineSnapshot(`
288 |     <view
289 |       class="custom-class"
290 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
291 |     >
292 |       Content
293 |     </view>
294 |   `);
295 | });
296 | 
297 | test('renders with multiple props combined', () => {
298 |   const { container } = render(
299 |     <Stack alignCenter flex1 gap={16} padding vertical wrap>
300 |       Content
301 |     </Stack>,
302 |   );
303 |   expect(container.firstChild).toMatchInlineSnapshot(`
304 |     <view
305 |       style="align-items: center; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; gap: 16px; padding: 16px; flex-basis: 0%;"
306 |     >
307 |       Content
308 |     </view>
309 |   `);
310 | });
311 | 
312 | test('passes through native attributes', () => {
313 |   const { container } = render(
314 |     <Stack collapsable={false} data-testid="stack">
315 |       Content
316 |     </Stack>,
317 |   );
318 |   expect(container.firstChild).toMatchInlineSnapshot(`
319 |     <view
320 |       data-testid="stack"
321 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
322 |     >
323 |       Content
324 |     </view>
325 |   `);
326 | });
327 | 
328 | test('changes default gap when gap=true', () => {
329 |   setDefaultGap(24);
330 |   const { container } = render(<Stack gap={true}>Content</Stack>);
331 |   expect(container.firstChild).toMatchInlineSnapshot(`
332 |     <view
333 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 24px;"
334 |     >
335 |       Content
336 |     </view>
337 |   `);
338 | });
339 | 
340 | test('supports shrink0', () => {
341 |   const { container } = render(<Stack shrink0>Content</Stack>);
342 |   expect(container.firstChild).toMatchInlineSnapshot(`
343 |     <view
344 |       style="flex-direction: row; flex-shrink: 0; flex-wrap: nowrap; justify-content: flex-start;"
345 |     >
346 |       Content
347 |     </view>
348 |   `);
349 | });
350 | 
351 | test('renders with around justification', () => {
352 |   const { container } = render(<Stack around>Content</Stack>);
353 |   expect(container.firstChild).toMatchInlineSnapshot(`
354 |     <view
355 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"
356 |     >
357 |       Content
358 |     </view>
359 |   `);
360 | });
361 | 
362 | test('renders with evenly justification', () => {
363 |   const { container } = render(<Stack evenly>Content</Stack>);
364 |   expect(container.firstChild).toMatchInlineSnapshot(`
365 |     <view
366 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly;"
367 |     >
368 |       Content
369 |     </view>
370 |   `);
371 | });
372 | 
373 | test('renders with baseline alignment', () => {
374 |   const { container } = render(<Stack baseline>Content</Stack>);
375 |   expect(container.firstChild).toMatchInlineSnapshot(`
376 |     <view
377 |       style="align-items: baseline; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
378 |     >
379 |       Content
380 |     </view>
381 |   `);
382 | });
383 | 
384 | test('renders with rowGap only', () => {
385 |   const { container } = render(<Stack rowGap={16}>Content</Stack>);
386 |   expect(container.firstChild).toMatchInlineSnapshot(`
387 |     <view
388 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 16px;"
389 |     >
390 |       Content
391 |     </view>
392 |   `);
393 | });
394 | 
395 | test('renders with columnGap only', () => {
396 |   const { container } = render(<Stack columnGap={20}>Content</Stack>);
397 |   expect(container.firstChild).toMatchInlineSnapshot(`
398 |     <view
399 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; column-gap: 20px;"
400 |     >
401 |       Content
402 |     </view>
403 |   `);
404 | });
405 | 
406 | test('renders with both rowGap and columnGap', () => {
407 |   const { container } = render(
408 |     <Stack columnGap={24} rowGap={16}>
409 |       Content
410 |     </Stack>,
411 |   );
412 |   expect(container.firstChild).toMatchInlineSnapshot(`
413 |     <view
414 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 16px; column-gap: 24px;"
415 |     >
416 |       Content
417 |     </view>
418 |   `);
419 | });
420 | 
421 | test('prefers rowGap/columnGap over gap when both are provided', () => {
422 |   const { container } = render(
423 |     <Stack columnGap={24} gap={8} rowGap={16}>
424 |       Content
425 |     </Stack>,
426 |   );
427 |   expect(container.firstChild).toMatchInlineSnapshot(`
428 |     <view
429 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 16px; column-gap: 24px;"
430 |     >
431 |       Content
432 |     </view>
433 |   `);
434 | });
435 | 
436 | test('renders with verticalPadding=true using gap value', () => {
437 |   const { container } = render(
438 |     <Stack gap={16} verticalPadding>
439 |       Content
440 |     </Stack>,
441 |   );
442 |   expect(container.firstChild).toMatchInlineSnapshot(`
443 |     <view
444 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-bottom: 16px; padding-top: 16px;"
445 |     >
446 |       Content
447 |     </view>
448 |   `);
449 | });
450 | 
451 | test('renders with horizontalPadding=true using gap value', () => {
452 |   const { container } = render(
453 |     <Stack gap={16} horizontalPadding>
454 |       Content
455 |     </Stack>,
456 |   );
457 |   expect(container.firstChild).toMatchInlineSnapshot(`
458 |     <view
459 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-right: 16px; padding-left: 16px;"
460 |     >
461 |       Content
462 |     </view>
463 |   `);
464 | });
465 | 
466 | test('renders with verticalPadding=true using rowGap value', () => {
467 |   const { container } = render(
468 |     <Stack rowGap={20} verticalPadding>
469 |       Content
470 |     </Stack>,
471 |   );
472 |   expect(container.firstChild).toMatchInlineSnapshot(`
473 |     <view
474 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 20px; padding-bottom: 20px; padding-top: 20px;"
475 |     >
476 |       Content
477 |     </view>
478 |   `);
479 | });
480 | 
481 | test('renders with horizontalPadding=true using columnGap value', () => {
482 |   const { container } = render(
483 |     <Stack columnGap={24} horizontalPadding>
484 |       Content
485 |     </Stack>,
486 |   );
487 |   expect(container.firstChild).toMatchInlineSnapshot(`
488 |     <view
489 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; column-gap: 24px; padding-right: 24px; padding-left: 24px;"
490 |     >
491 |       Content
492 |     </view>
493 |   `);
494 | });
495 | 
496 | test('renders with specific verticalPadding value', () => {
497 |   const { container } = render(
498 |     <Stack gap={16} verticalPadding={32}>
499 |       Content
500 |     </Stack>,
501 |   );
502 |   expect(container.firstChild).toMatchInlineSnapshot(`
503 |     <view
504 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-bottom: 32px; padding-top: 32px;"
505 |     >
506 |       Content
507 |     </view>
508 |   `);
509 | });
510 | 
511 | test('renders with specific horizontalPadding value', () => {
512 |   const { container } = render(
513 |     <Stack gap={16} horizontalPadding={28}>
514 |       Content
515 |     </Stack>,
516 |   );
517 |   expect(container.firstChild).toMatchInlineSnapshot(`
518 |     <view
519 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-right: 28px; padding-left: 28px;"
520 |     >
521 |       Content
522 |     </view>
523 |   `);
524 | });
525 | 
526 | test('renders with padding=true overriding other padding props', () => {
527 |   const { container } = render(
528 |     <Stack gap={16} horizontalPadding={28} padding verticalPadding={32}>
529 |       Content
530 |     </Stack>,
531 |   );
532 |   expect(container.firstChild).toMatchInlineSnapshot(`
533 |     <view
534 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 16px;"
535 |     >
536 |       Content
537 |     </view>
538 |   `);
539 | });
540 | 
541 | test('renders with padding numeric value overriding other padding props', () => {
542 |   const { container } = render(
543 |     <Stack gap={16} horizontalPadding padding={40} verticalPadding>
544 |       Content
545 |     </Stack>,
546 |   );
547 |   expect(container.firstChild).toMatchInlineSnapshot(`
548 |     <view
549 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 40px;"
550 |     >
551 |       Content
552 |     </view>
553 |   `);
554 | });
555 | 
556 | test('renders with complex gap and padding combination', () => {
557 |   const { container } = render(
558 |     <Stack columnGap={20} horizontalPadding={32} rowGap={12} verticalPadding>
559 |       Content
560 |     </Stack>,
561 |   );
562 |   expect(container.firstChild).toMatchInlineSnapshot(`
563 |     <view
564 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 12px; column-gap: 20px; padding: 12px 32px;"
565 |     >
566 |       Content
567 |     </view>
568 |   `);
569 | });
570 | 
571 | test('it renders with custom component', () => {
572 |   const { container } = render(<Stack as={View}>Content</Stack>);
573 | 
574 |   expect(container.firstChild).toMatchInlineSnapshot(`
575 |     <view
576 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
577 |     >
578 |       Content
579 |     </view>
580 |   `);
581 | });
582 | 
583 | test('it works with custom Link component', () => {
584 |   const Link = ({
585 |     children,
586 |     title,
587 |     ...props
588 |   }: {
589 |     children: React.ReactNode;
590 |     style?: ViewStyle;
591 |     title: string;
592 |   }) => (
593 |     <View {...props}>
594 |       {title}
595 |       {children}
596 |     </View>
597 |   );
598 | 
599 |   const { container } = render(
600 |     <Stack as={Link} title="Banana">
601 |       Content
602 |     </Stack>,
603 |   );
604 | 
605 |   expect(container.firstChild).toMatchInlineSnapshot(`
606 |     <view
607 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
608 |     >
609 |       Banana
610 |       Content
611 |     </view>
612 |   `);
613 | });
614 | 
615 | test('does not work if the component does not have a style prop', () => {
616 |   const NoStyle = ({
617 |     children,
618 |     title,
619 |   }: {
620 |     children: React.ReactNode;
621 |     title: string;
622 |   }) => (
623 |     <View>
624 |       {title}
625 |       {children}
626 |     </View>
627 |   );
628 | 
629 |   const { container } = render(
630 |     // @ts-expect-error: NoStyle does not accept style prop.
631 |     <Stack as={NoStyle} title="Banana">
632 |       Content
633 |     </Stack>,
634 |   );
635 | 
636 |   expect(container.firstChild).toMatchInlineSnapshot(
637 |     `
638 |     <view>
639 |       Banana
640 |       Content
641 |     </view>
642 |   `,
643 |   );
644 | });
645 | 
646 | test('supports the `ref` prop', () => {
647 |   const ref = { current: null };
648 |   const { container } = render(<Stack ref={ref}>Content</Stack>);
649 | 
650 |   expect(container.firstChild).toMatchInlineSnapshot(`
651 |     <view
652 |       style="flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
653 |     >
654 |       Content
655 |     </view>
656 |   `);
657 | });
658 | 


--------------------------------------------------------------------------------
/src/__tests__/index.test.tsx:
--------------------------------------------------------------------------------
  1 | import { beforeEach, expect, test } from 'vitest';
  2 | import { render } from '@testing-library/react';
  3 | import Stack, { setDefaultGap, VStack } from '../index.tsx';
  4 | import { CSSProperties } from 'react';
  5 | 
  6 | beforeEach(() => {
  7 |   setDefaultGap(8);
  8 | });
  9 | 
 10 | test('renders with default props', () => {
 11 |   const { container } = render(<Stack>Content</Stack>);
 12 |   expect(container.firstChild).toMatchInlineSnapshot(`
 13 |     <div
 14 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
 15 |     >
 16 |       Content
 17 |     </div>
 18 |   `);
 19 | });
 20 | 
 21 | test('renders with gap', () => {
 22 |   const { container } = render(<Stack gap={16}>Content</Stack>);
 23 |   expect(container.firstChild).toMatchInlineSnapshot(`
 24 |     <div
 25 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px;"
 26 |     >
 27 |       Content
 28 |     </div>
 29 |   `);
 30 | });
 31 | 
 32 | test('renders with gap=true (uses default)', () => {
 33 |   const { container } = render(<Stack gap>Content</Stack>);
 34 |   expect(container.firstChild).toMatchInlineSnapshot(`
 35 |     <div
 36 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;"
 37 |     >
 38 |       Content
 39 |     </div>
 40 |   `);
 41 | });
 42 | 
 43 | test('renders with vertical layout', () => {
 44 |   const { container } = render(<Stack vertical>Content</Stack>);
 45 |   expect(container.firstChild).toMatchInlineSnapshot(`
 46 |     <div
 47 |       style="display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;"
 48 |     >
 49 |       Content
 50 |     </div>
 51 |   `);
 52 | });
 53 | 
 54 | test('renders with reverse layout', () => {
 55 |   const { container } = render(<Stack reverse>Content</Stack>);
 56 |   expect(container.firstChild).toMatchInlineSnapshot(`
 57 |     <div
 58 |       style="display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start;"
 59 |     >
 60 |       Content
 61 |     </div>
 62 |   `);
 63 | });
 64 | 
 65 | test('renders with vertical reverse layout', () => {
 66 |   const { container } = render(
 67 |     <Stack reverse vertical>
 68 |       Content
 69 |     </Stack>,
 70 |   );
 71 |   expect(container.firstChild).toMatchInlineSnapshot(`
 72 |     <div
 73 |       style="display: flex; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: flex-start;"
 74 |     >
 75 |       Content
 76 |     </div>
 77 |   `);
 78 | });
 79 | 
 80 | test('renders with inline display', () => {
 81 |   const { container } = render(<Stack inline>Content</Stack>);
 82 |   expect(container.firstChild).toMatchInlineSnapshot(`
 83 |     <div
 84 |       style="display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
 85 |     >
 86 |       Content
 87 |     </div>
 88 |   `);
 89 | });
 90 | 
 91 | test('renders with wrap', () => {
 92 |   const { container } = render(<Stack wrap>Content</Stack>);
 93 |   expect(container.firstChild).toMatchInlineSnapshot(`
 94 |     <div
 95 |       style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;"
 96 |     >
 97 |       Content
 98 |     </div>
 99 |   `);
100 | });
101 | 
102 | test('renders with alignStart', () => {
103 |   const { container } = render(<Stack alignStart>Content</Stack>);
104 |   expect(container.firstChild).toMatchInlineSnapshot(`
105 |     <div
106 |       style="align-items: flex-start; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
107 |     >
108 |       Content
109 |     </div>
110 |   `);
111 | });
112 | 
113 | test('renders with alignCenter', () => {
114 |   const { container } = render(<Stack alignCenter>Content</Stack>);
115 |   expect(container.firstChild).toMatchInlineSnapshot(`
116 |     <div
117 |       style="align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
118 |     >
119 |       Content
120 |     </div>
121 |   `);
122 | });
123 | 
124 | test('renders with alignEnd', () => {
125 |   const { container } = render(<Stack alignEnd>Content</Stack>);
126 |   expect(container.firstChild).toMatchInlineSnapshot(`
127 |     <div
128 |       style="align-items: flex-end; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
129 |     >
130 |       Content
131 |     </div>
132 |   `);
133 | });
134 | 
135 | test('renders with center justification', () => {
136 |   const { container } = render(<Stack center>Content</Stack>);
137 |   expect(container.firstChild).toMatchInlineSnapshot(`
138 |     <div
139 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;"
140 |     >
141 |       Content
142 |     </div>
143 |   `);
144 | });
145 | 
146 | test('renders with safe center justification', () => {
147 |   const { container } = render(
148 |     <Stack center safe>
149 |       Content
150 |     </Stack>,
151 |   );
152 |   expect(container.firstChild).toMatchInlineSnapshot(`
153 |     <div
154 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: safe center;"
155 |     >
156 |       Content
157 |     </div>
158 |   `);
159 | });
160 | 
161 | test('renders with safe end justification', () => {
162 |   const { container } = render(
163 |     <Stack end safe>
164 |       Content
165 |     </Stack>,
166 |   );
167 |   expect(container.firstChild).toMatchInlineSnapshot(`
168 |     <div
169 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: safe flex-end;"
170 |     >
171 |       Content
172 |     </div>
173 |   `);
174 | });
175 | 
176 | test('renders with between justification', () => {
177 |   const { container } = render(<Stack between>Content</Stack>);
178 |   expect(container.firstChild).toMatchInlineSnapshot(`
179 |     <div
180 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;"
181 |     >
182 |       Content
183 |     </div>
184 |   `);
185 | });
186 | 
187 | test('renders with end justification', () => {
188 |   const { container } = render(<Stack end>Content</Stack>);
189 |   expect(container.firstChild).toMatchInlineSnapshot(`
190 |     <div
191 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;"
192 |     >
193 |       Content
194 |     </div>
195 |   `);
196 | });
197 | 
198 | test('renders with flex1', () => {
199 |   const { container } = render(<Stack flex1>Content</Stack>);
200 |   expect(container.firstChild).toMatchInlineSnapshot(`
201 |     <div
202 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; flex-basis: 0%;"
203 |     >
204 |       Content
205 |     </div>
206 |   `);
207 | });
208 | 
209 | test('renders with stretch', () => {
210 |   const { container } = render(<Stack stretch>Content</Stack>);
211 |   expect(container.firstChild).toMatchInlineSnapshot(`
212 |     <div
213 |       style="display: flex; flex-direction: row; flex-grow: 1; flex-wrap: nowrap; justify-content: flex-start;"
214 |     >
215 |       Content
216 |     </div>
217 |   `);
218 | });
219 | 
220 | test('renders with self alignment start', () => {
221 |   const { container } = render(<Stack self="start">Content</Stack>);
222 |   expect(container.firstChild).toMatchInlineSnapshot(`
223 |     <div
224 |       style="align-self: flex-start; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
225 |     >
226 |       Content
227 |     </div>
228 |   `);
229 | });
230 | 
231 | test('renders with self alignment center', () => {
232 |   const { container } = render(<Stack self="center">Content</Stack>);
233 |   expect(container.firstChild).toMatchInlineSnapshot(`
234 |     <div
235 |       style="align-self: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
236 |     >
237 |       Content
238 |     </div>
239 |   `);
240 | });
241 | 
242 | test('renders with padding and gap', () => {
243 |   const { container } = render(
244 |     <Stack gap={16} padding>
245 |       Content
246 |     </Stack>,
247 |   );
248 |   expect(container.firstChild).toMatchInlineSnapshot(`
249 |     <div
250 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 16px;"
251 |     >
252 |       Content
253 |     </div>
254 |   `);
255 | });
256 | 
257 | test('renders with verticalPadding and gap', () => {
258 |   const { container } = render(
259 |     <Stack gap={24} verticalPadding>
260 |       Content
261 |     </Stack>,
262 |   );
263 |   expect(container.firstChild).toMatchInlineSnapshot(`
264 |     <div
265 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 24px; padding-bottom: 24px; padding-top: 24px;"
266 |     >
267 |       Content
268 |     </div>
269 |   `);
270 | });
271 | 
272 | test('renders with horizontalPadding and gap', () => {
273 |   const { container } = render(
274 |     <Stack gap={32} horizontalPadding>
275 |       Content
276 |     </Stack>,
277 |   );
278 |   expect(container.firstChild).toMatchInlineSnapshot(`
279 |     <div
280 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 32px; padding-right: 32px; padding-left: 32px;"
281 |     >
282 |       Content
283 |     </div>
284 |   `);
285 | });
286 | 
287 | test('renders with custom style', () => {
288 |   const { container } = render(
289 |     <Stack style={{ backgroundColor: 'red', margin: 10 }}>Content</Stack>,
290 |   );
291 |   expect(container.firstChild).toMatchInlineSnapshot(`
292 |     <div
293 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; background-color: red; margin: 10px;"
294 |     >
295 |       Content
296 |     </div>
297 |   `);
298 | });
299 | 
300 | test('renders with className', () => {
301 |   const { container } = render(<Stack className="custom-class">Content</Stack>);
302 |   expect(container.firstChild).toMatchInlineSnapshot(`
303 |     <div
304 |       class="custom-class"
305 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
306 |     >
307 |       Content
308 |     </div>
309 |   `);
310 | });
311 | 
312 | test('renders with multiple props combined', () => {
313 |   const { container } = render(
314 |     <Stack alignCenter flex1 gap={16} padding vertical wrap>
315 |       Content
316 |     </Stack>,
317 |   );
318 |   expect(container.firstChild).toMatchInlineSnapshot(`
319 |     <div
320 |       style="align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; gap: 16px; padding: 16px; flex-basis: 0%;"
321 |     >
322 |       Content
323 |     </div>
324 |   `);
325 | });
326 | 
327 | test('passes through HTML attributes', () => {
328 |   const { container } = render(
329 |     <Stack data-testid="stack" onClick={() => {}}>
330 |       Content
331 |     </Stack>,
332 |   );
333 |   expect(container.firstChild).toMatchInlineSnapshot(`
334 |     <div
335 |       data-testid="stack"
336 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
337 |     >
338 |       Content
339 |     </div>
340 |   `);
341 | });
342 | 
343 | test('changes default gap when gap=true', () => {
344 |   setDefaultGap(24);
345 |   const { container } = render(<Stack gap={true}>Content</Stack>);
346 |   expect(container.firstChild).toMatchInlineSnapshot(`
347 |     <div
348 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 24px;"
349 |     >
350 |       Content
351 |     </div>
352 |   `);
353 | });
354 | 
355 | test('supports shrink0', () => {
356 |   const { container } = render(<Stack shrink0>Content</Stack>);
357 |   expect(container.firstChild).toMatchInlineSnapshot(`
358 |     <div
359 |       style="display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: nowrap; justify-content: flex-start;"
360 |     >
361 |       Content
362 |     </div>
363 |   `);
364 | });
365 | 
366 | test('renders with around justification', () => {
367 |   const { container } = render(<Stack around>Content</Stack>);
368 |   expect(container.firstChild).toMatchInlineSnapshot(`
369 |     <div
370 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"
371 |     >
372 |       Content
373 |     </div>
374 |   `);
375 | });
376 | 
377 | test('renders with evenly justification', () => {
378 |   const { container } = render(<Stack evenly>Content</Stack>);
379 |   expect(container.firstChild).toMatchInlineSnapshot(`
380 |     <div
381 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly;"
382 |     >
383 |       Content
384 |     </div>
385 |   `);
386 | });
387 | 
388 | test('renders with baseline alignment', () => {
389 |   const { container } = render(<Stack baseline>Content</Stack>);
390 |   expect(container.firstChild).toMatchInlineSnapshot(`
391 |     <div
392 |       style="align-items: baseline; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
393 |     >
394 |       Content
395 |     </div>
396 |   `);
397 | });
398 | 
399 | test('renders with rowGap only', () => {
400 |   const { container } = render(<Stack rowGap={16}>Content</Stack>);
401 |   expect(container.firstChild).toMatchInlineSnapshot(`
402 |     <div
403 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 16px;"
404 |     >
405 |       Content
406 |     </div>
407 |   `);
408 | });
409 | 
410 | test('renders with columnGap only', () => {
411 |   const { container } = render(<Stack columnGap={20}>Content</Stack>);
412 |   expect(container.firstChild).toMatchInlineSnapshot(`
413 |     <div
414 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; column-gap: 20px;"
415 |     >
416 |       Content
417 |     </div>
418 |   `);
419 | });
420 | 
421 | test('renders with both rowGap and columnGap', () => {
422 |   const { container } = render(
423 |     <Stack columnGap={24} rowGap={16}>
424 |       Content
425 |     </Stack>,
426 |   );
427 |   expect(container.firstChild).toMatchInlineSnapshot(`
428 |     <div
429 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 16px; column-gap: 24px;"
430 |     >
431 |       Content
432 |     </div>
433 |   `);
434 | });
435 | 
436 | test('prefers rowGap/columnGap over gap when both are provided', () => {
437 |   const { container } = render(
438 |     <Stack columnGap={24} gap={8} rowGap={16}>
439 |       Content
440 |     </Stack>,
441 |   );
442 |   expect(container.firstChild).toMatchInlineSnapshot(`
443 |     <div
444 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 16px; column-gap: 24px;"
445 |     >
446 |       Content
447 |     </div>
448 |   `);
449 | });
450 | 
451 | test('renders with verticalPadding=true using gap value', () => {
452 |   const { container } = render(
453 |     <Stack gap={16} verticalPadding>
454 |       Content
455 |     </Stack>,
456 |   );
457 |   expect(container.firstChild).toMatchInlineSnapshot(`
458 |     <div
459 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-bottom: 16px; padding-top: 16px;"
460 |     >
461 |       Content
462 |     </div>
463 |   `);
464 | });
465 | 
466 | test('renders with horizontalPadding=true using gap value', () => {
467 |   const { container } = render(
468 |     <Stack gap={16} horizontalPadding>
469 |       Content
470 |     </Stack>,
471 |   );
472 |   expect(container.firstChild).toMatchInlineSnapshot(`
473 |     <div
474 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-right: 16px; padding-left: 16px;"
475 |     >
476 |       Content
477 |     </div>
478 |   `);
479 | });
480 | 
481 | test('renders with verticalPadding=true using rowGap value', () => {
482 |   const { container } = render(
483 |     <Stack rowGap={20} verticalPadding>
484 |       Content
485 |     </Stack>,
486 |   );
487 |   expect(container.firstChild).toMatchInlineSnapshot(`
488 |     <div
489 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 20px; padding-bottom: 20px; padding-top: 20px;"
490 |     >
491 |       Content
492 |     </div>
493 |   `);
494 | });
495 | 
496 | test('renders with horizontalPadding=true using columnGap value', () => {
497 |   const { container } = render(
498 |     <Stack columnGap={24} horizontalPadding>
499 |       Content
500 |     </Stack>,
501 |   );
502 |   expect(container.firstChild).toMatchInlineSnapshot(`
503 |     <div
504 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; column-gap: 24px; padding-right: 24px; padding-left: 24px;"
505 |     >
506 |       Content
507 |     </div>
508 |   `);
509 | });
510 | 
511 | test('renders with specific verticalPadding value', () => {
512 |   const { container } = render(
513 |     <Stack gap={16} verticalPadding={32}>
514 |       Content
515 |     </Stack>,
516 |   );
517 |   expect(container.firstChild).toMatchInlineSnapshot(`
518 |     <div
519 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-bottom: 32px; padding-top: 32px;"
520 |     >
521 |       Content
522 |     </div>
523 |   `);
524 | });
525 | 
526 | test('renders with specific horizontalPadding value', () => {
527 |   const { container } = render(
528 |     <Stack gap={16} horizontalPadding={28}>
529 |       Content
530 |     </Stack>,
531 |   );
532 |   expect(container.firstChild).toMatchInlineSnapshot(`
533 |     <div
534 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding-right: 28px; padding-left: 28px;"
535 |     >
536 |       Content
537 |     </div>
538 |   `);
539 | });
540 | 
541 | test('renders with padding=true overriding other padding props', () => {
542 |   const { container } = render(
543 |     <Stack gap={16} horizontalPadding={28} padding verticalPadding={32}>
544 |       Content
545 |     </Stack>,
546 |   );
547 |   expect(container.firstChild).toMatchInlineSnapshot(`
548 |     <div
549 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 16px;"
550 |     >
551 |       Content
552 |     </div>
553 |   `);
554 | });
555 | 
556 | test('renders with padding numeric value overriding other padding props', () => {
557 |   const { container } = render(
558 |     <Stack gap={16} horizontalPadding padding={40} verticalPadding>
559 |       Content
560 |     </Stack>,
561 |   );
562 |   expect(container.firstChild).toMatchInlineSnapshot(`
563 |     <div
564 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 40px;"
565 |     >
566 |       Content
567 |     </div>
568 |   `);
569 | });
570 | 
571 | test('renders with complex gap and padding combination', () => {
572 |   const { container } = render(
573 |     <Stack columnGap={20} horizontalPadding={32} rowGap={12} verticalPadding>
574 |       Content
575 |     </Stack>,
576 |   );
577 |   expect(container.firstChild).toMatchInlineSnapshot(`
578 |     <div
579 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; row-gap: 12px; column-gap: 20px; padding: 12px 32px;"
580 |     >
581 |       Content
582 |     </div>
583 |   `);
584 | });
585 | 
586 | test('it renders with custom component', () => {
587 |   const { container } = render(
588 |     <Stack as="a" href="https://nkzw.tech">
589 |       Content
590 |     </Stack>,
591 |   );
592 | 
593 |   expect(container.firstChild).toMatchInlineSnapshot(`
594 |     <a
595 |       href="https://nkzw.tech"
596 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
597 |     >
598 |       Content
599 |     </a>
600 |   `);
601 | });
602 | 
603 | test('it works with custom Link component', () => {
604 |   type Route = '/banana' | '/apple';
605 | 
606 |   const Link = ({
607 |     children,
608 |     to,
609 |     ...props
610 |   }: {
611 |     children: React.ReactNode;
612 |     style?: CSSProperties;
613 |     to: Route;
614 |   }) => (
615 |     <a href={to} {...props}>
616 |       {children}
617 |     </a>
618 |   );
619 | 
620 |   const { container } = render(
621 |     <Stack as={Link} to="/banana">
622 |       Content
623 |     </Stack>,
624 |   );
625 | 
626 |   expect(container.firstChild).toMatchInlineSnapshot(`
627 |     <a
628 |       href="/banana"
629 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
630 |     >
631 |       Content
632 |     </a>
633 |   `);
634 | });
635 | 
636 | test('does not work if the component does not have a style prop', () => {
637 |   const NoStyle = ({
638 |     children,
639 |     to,
640 |   }: {
641 |     children: React.ReactNode;
642 |     to: string;
643 |   }) => <a href={to}>{children}</a>;
644 | 
645 |   const { container } = render(
646 |     // @ts-expect-error: NoStyle does not accept style prop.
647 |     <Stack as={NoStyle} to="/banana">
648 |       Content
649 |     </Stack>,
650 |   );
651 | 
652 |   expect(container.firstChild).toMatchInlineSnapshot(
653 |     `
654 |     <a
655 |       href="/banana"
656 |     >
657 |       Content
658 |     </a>
659 |   `,
660 |   );
661 | });
662 | 
663 | test('exports a VStack component that is vertical by default', () => {
664 |   const { container } = render(<VStack>Content</VStack>);
665 | 
666 |   expect(container.firstChild).toMatchInlineSnapshot(`
667 |     <div
668 |       style="display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;"
669 |     >
670 |       Content
671 |     </div>
672 |   `);
673 | });
674 | 
675 | test('VStack does not support a vertical prop', () => {
676 |   // @ts-expect-error
677 |   const { container } = render(<VStack vertical={false}>Content</VStack>);
678 | 
679 |   expect(container.firstChild).toMatchInlineSnapshot(`
680 |     <div
681 |       style="display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;"
682 |     >
683 |       Content
684 |     </div>
685 |   `);
686 | });
687 | 
688 | test('supports the `ref` prop', () => {
689 |   const ref = { current: null };
690 |   const { container } = render(<Stack ref={ref}>Content</Stack>);
691 | 
692 |   expect(container.firstChild).toMatchInlineSnapshot(`
693 |     <div
694 |       style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;"
695 |     >
696 |       Content
697 |     </div>
698 |   `);
699 | });
700 | 


--------------------------------------------------------------------------------
/src/index.native.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ComponentProps,
  3 |   ComponentPropsWithRef,
  4 |   ElementType,
  5 |   useMemo,
  6 | } from 'react';
  7 | import { resolveGap } from './Gap.tsx';
  8 | import { View, ViewStyle } from 'react-native';
  9 | import {
 10 |   AcceptsStyle,
 11 |   AsProp,
 12 |   PropsToOmit,
 13 |   StackPropsInternal,
 14 | } from './Types.js';
 15 | import { resolveAlignment } from './Alignment.tsx';
 16 | export { setDefaultGap, type Gap } from './Gap.tsx';
 17 | 
 18 | export type StackProps<Component extends ElementType = typeof View> =
 19 |   AcceptsStyle<Component> extends never
 20 |     ? never
 21 |     : AsProp<Component> &
 22 |         StackPropsInternal &
 23 |         Omit<
 24 |           ComponentProps<Component>,
 25 |           PropsToOmit<Component, StackPropsInternal>
 26 |         > &
 27 |         Partial<Pick<ComponentPropsWithRef<Component>, 'ref'>>;
 28 | 
 29 | let Stack = function Stack<Component extends ElementType = typeof View>({
 30 |   alignCenter,
 31 |   alignEnd,
 32 |   alignStart,
 33 |   around,
 34 |   as,
 35 |   baseline,
 36 |   between,
 37 |   center,
 38 |   columnGap: _columnGap,
 39 |   content,
 40 |   end,
 41 |   evenly,
 42 |   flex1,
 43 |   gap: _gap,
 44 |   horizontalPadding,
 45 |   inline,
 46 |   padding,
 47 |   reverse,
 48 |   rowGap: _rowGap,
 49 |   safe,
 50 |   self,
 51 |   shrink0,
 52 |   stretch,
 53 |   style,
 54 |   vertical,
 55 |   verticalPadding,
 56 |   wrap,
 57 |   ...props
 58 | }: StackProps<Component> & { className?: string }) {
 59 |   const baseStyle = useMemo(() => {
 60 |     const baseStyle: ViewStyle = {
 61 |       alignContent: resolveAlignment(content),
 62 |       alignItems: alignStart
 63 |         ? 'flex-start'
 64 |         : alignCenter
 65 |           ? 'center'
 66 |           : alignEnd
 67 |             ? 'flex-end'
 68 |             : baseline
 69 |               ? 'baseline'
 70 |               : undefined,
 71 |       alignSelf: resolveAlignment(self),
 72 |       flex: flex1 ? 1 : undefined,
 73 |       flexDirection: vertical
 74 |         ? reverse
 75 |           ? 'column-reverse'
 76 |           : 'column'
 77 |         : reverse
 78 |           ? 'row-reverse'
 79 |           : 'row',
 80 |       flexGrow: stretch ? 1 : undefined,
 81 |       flexShrink: shrink0 ? 0 : undefined,
 82 |       flexWrap: wrap ? 'wrap' : 'nowrap',
 83 |       justifyContent: center
 84 |         ? 'center'
 85 |         : end
 86 |           ? 'flex-end'
 87 |           : between
 88 |             ? 'space-between'
 89 |             : evenly
 90 |               ? 'space-evenly'
 91 |               : around
 92 |                 ? 'space-around'
 93 |                 : 'flex-start',
 94 |     };
 95 | 
 96 |     const gap = resolveGap(_gap);
 97 |     const rowGap = resolveGap(_rowGap);
 98 |     const columnGap = resolveGap(_columnGap);
 99 | 
100 |     if (rowGap != null) {
101 |       baseStyle.rowGap = rowGap;
102 |     }
103 |     if (columnGap != null) {
104 |       baseStyle.columnGap = columnGap;
105 |     }
106 |     if (gap != null && rowGap == null && columnGap == null) {
107 |       baseStyle.gap = gap;
108 |     }
109 | 
110 |     const vGap = rowGap ?? gap;
111 |     const hGap = columnGap ?? gap;
112 |     if (padding === true) {
113 |       if (vGap != null) {
114 |         baseStyle.paddingTop = baseStyle.paddingBottom = vGap;
115 |       }
116 |       if (hGap != null) {
117 |         baseStyle.paddingLeft = baseStyle.paddingRight = hGap;
118 |       }
119 |     } else if (padding != null) {
120 |       baseStyle.padding = padding;
121 |     } else {
122 |       if (verticalPadding != null || vGap != null) {
123 |         const paddingValue = verticalPadding === true ? vGap : verticalPadding;
124 |         baseStyle.paddingTop = baseStyle.paddingBottom = paddingValue;
125 |       }
126 | 
127 |       if (horizontalPadding != null || hGap != null) {
128 |         const paddingValue =
129 |           horizontalPadding === true ? hGap : horizontalPadding;
130 |         baseStyle.paddingLeft = baseStyle.paddingRight = paddingValue;
131 |       }
132 |     }
133 | 
134 |     return baseStyle;
135 |   }, [
136 |     _columnGap,
137 |     _gap,
138 |     _rowGap,
139 |     alignCenter,
140 |     alignEnd,
141 |     alignStart,
142 |     around,
143 |     baseline,
144 |     between,
145 |     center,
146 |     content,
147 |     end,
148 |     evenly,
149 |     flex1,
150 |     horizontalPadding,
151 |     padding,
152 |     reverse,
153 |     self,
154 |     shrink0,
155 |     stretch,
156 |     vertical,
157 |     verticalPadding,
158 |     wrap,
159 |   ]);
160 | 
161 |   const Component = as || View;
162 |   return <Component style={[baseStyle, style]} {...props} />;
163 | };
164 | 
165 | try {
166 |   // eslint-disable-next-line @typescript-eslint/no-require-imports
167 |   const { cssInterop } = require('nativewind');
168 | 
169 |   Stack = cssInterop(Stack, {
170 |     className: {
171 |       target: 'style',
172 |     },
173 |   });
174 | } catch {
175 |   /* empty */
176 | }
177 | 
178 | export default Stack;
179 | 
180 | export const VStack = <Component extends ElementType = 'div'>(
181 |   props: StackProps<Component> & { vertical?: never },
182 | ) => <Stack {...props} vertical />;
183 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
  1 | import { ComponentProps, CSSProperties, ElementType, useMemo } from 'react';
  2 | import {
  3 |   AcceptsStyle,
  4 |   AsProp,
  5 |   PropsToOmit,
  6 |   StackPropsInternal,
  7 | } from './Types.js';
  8 | import { resolveGap } from './Gap.tsx';
  9 | import { resolveAlignment } from './Alignment.tsx';
 10 | export { setDefaultGap, type Gap } from './Gap.tsx';
 11 | 
 12 | export type StackProps<Component extends ElementType = 'div'> =
 13 |   AcceptsStyle<Component> extends never
 14 |     ? never
 15 |     : AsProp<Component> &
 16 |         StackPropsInternal &
 17 |         Omit<
 18 |           ComponentProps<Component>,
 19 |           PropsToOmit<Component, StackPropsInternal>
 20 |         >;
 21 | 
 22 | export default function Stack<Component extends ElementType = 'div'>({
 23 |   alignCenter,
 24 |   alignEnd,
 25 |   alignStart,
 26 |   around,
 27 |   as,
 28 |   baseline,
 29 |   between,
 30 |   center,
 31 |   columnGap: _columnGap,
 32 |   content,
 33 |   end,
 34 |   evenly,
 35 |   flex1,
 36 |   gap: _gap,
 37 |   horizontalPadding,
 38 |   inline,
 39 |   padding,
 40 |   reverse,
 41 |   rowGap: _rowGap,
 42 |   safe,
 43 |   self,
 44 |   shrink0,
 45 |   stretch,
 46 |   style,
 47 |   vertical,
 48 |   verticalPadding,
 49 |   wrap,
 50 |   ...props
 51 | }: StackProps<Component>) {
 52 |   const baseStyle = useMemo(() => {
 53 |     const baseStyle: CSSProperties = {
 54 |       alignContent: resolveAlignment(content),
 55 |       alignItems: alignStart
 56 |         ? 'flex-start'
 57 |         : alignCenter
 58 |           ? 'center'
 59 |           : alignEnd
 60 |             ? 'flex-end'
 61 |             : baseline
 62 |               ? 'baseline'
 63 |               : undefined,
 64 |       alignSelf: resolveAlignment(self),
 65 |       display: inline ? 'inline-flex' : 'flex',
 66 |       flex: flex1 ? 1 : undefined,
 67 |       flexDirection: vertical
 68 |         ? reverse
 69 |           ? 'column-reverse'
 70 |           : 'column'
 71 |         : reverse
 72 |           ? 'row-reverse'
 73 |           : 'row',
 74 |       flexGrow: stretch ? 1 : undefined,
 75 |       flexShrink: shrink0 ? 0 : undefined,
 76 |       flexWrap: wrap ? 'wrap' : 'nowrap',
 77 |       justifyContent: center
 78 |         ? `${safe ? 'safe ' : ''}center`
 79 |         : end
 80 |           ? `${safe ? 'safe ' : ''}flex-end`
 81 |           : between
 82 |             ? 'space-between'
 83 |             : evenly
 84 |               ? 'space-evenly'
 85 |               : around
 86 |                 ? 'space-around'
 87 |                 : 'flex-start',
 88 |     };
 89 | 
 90 |     const gap = resolveGap(_gap);
 91 |     const rowGap = resolveGap(_rowGap);
 92 |     const columnGap = resolveGap(_columnGap);
 93 | 
 94 |     if (rowGap != null) {
 95 |       baseStyle.rowGap = rowGap;
 96 |     }
 97 |     if (columnGap != null) {
 98 |       baseStyle.columnGap = columnGap;
 99 |     }
100 |     if (gap != null && rowGap == null && columnGap == null) {
101 |       baseStyle.gap = gap;
102 |     }
103 | 
104 |     const vGap = rowGap ?? gap;
105 |     const hGap = columnGap ?? gap;
106 |     if (padding === true) {
107 |       if (vGap != null) {
108 |         baseStyle.paddingTop = baseStyle.paddingBottom = vGap;
109 |       }
110 |       if (hGap != null) {
111 |         baseStyle.paddingLeft = baseStyle.paddingRight = hGap;
112 |       }
113 |     } else if (padding != null) {
114 |       baseStyle.padding = padding;
115 |     } else {
116 |       if (verticalPadding != null || vGap != null) {
117 |         const paddingValue = verticalPadding === true ? vGap : verticalPadding;
118 |         baseStyle.paddingTop = baseStyle.paddingBottom = paddingValue;
119 |       }
120 | 
121 |       if (horizontalPadding != null || hGap != null) {
122 |         const paddingValue =
123 |           horizontalPadding === true ? hGap : horizontalPadding;
124 |         baseStyle.paddingLeft = baseStyle.paddingRight = paddingValue;
125 |       }
126 |     }
127 | 
128 |     return baseStyle;
129 |   }, [
130 |     _columnGap,
131 |     _gap,
132 |     _rowGap,
133 |     alignCenter,
134 |     alignEnd,
135 |     alignStart,
136 |     around,
137 |     baseline,
138 |     between,
139 |     center,
140 |     content,
141 |     end,
142 |     evenly,
143 |     flex1,
144 |     horizontalPadding,
145 |     inline,
146 |     padding,
147 |     reverse,
148 |     safe,
149 |     self,
150 |     shrink0,
151 |     stretch,
152 |     vertical,
153 |     verticalPadding,
154 |     wrap,
155 |   ]);
156 | 
157 |   const Component = as || 'div';
158 |   return <Component style={{ ...baseStyle, ...style }} {...props} />;
159 | }
160 | 
161 | export const VStack = <Component extends ElementType = 'div'>(
162 |   props: StackProps<Component> & { vertical?: never },
163 | ) => <Stack {...props} vertical />;
164 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "allowImportingTsExtensions": true,
 5 |     "checkJs": true,
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "incremental": false,
 9 |     "isolatedModules": true,
10 |     "jsx": "preserve",
11 |     "lib": ["dom", "dom.iterable", "esnext"],
12 |     "module": "nodenext",
13 |     "moduleResolution": "nodenext",
14 |     "noEmit": true,
15 |     "noImplicitOverride": true,
16 |     "noUnusedLocals": true,
17 |     "plugins": [
18 |       {
19 |         "lint": {
20 |           "unknownProperties": "error"
21 |         }
22 |       }
23 |     ],
24 |     "resolveJsonModule": true,
25 |     "resolvePackageJsonExports": true,
26 |     "skipLibCheck": true,
27 |     "strict": true,
28 |     "target": "es2024"
29 |   },
30 |   "exclude": ["lib/", "node_modules"],
31 |   "include": ["src/**/*.ts", "src/**/*.tsx"]
32 | }
33 | 


--------------------------------------------------------------------------------
/tsdown.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'tsdown';
 2 | 
 3 | export default defineConfig({
 4 |   dts: {
 5 |     compilerOptions: {
 6 |       removeComments: false,
 7 |     },
 8 |     isolatedDeclarations: false,
 9 |   },
10 |   format: 'esm',
11 |   outDir: './lib',
12 |   outputOptions: {
13 |     polyfillRequire: false,
14 |   },
15 | });
16 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import react from '@vitejs/plugin-react';
 2 | import { defineConfig } from 'vitest/config';
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [react()],
 6 |   test: {
 7 |     environment: 'happy-dom',
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------