@pittorica/stack-react 0.21.0 → 0.22.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/dist/Stack.d.ts +6 -16
- package/dist/Stack.d.ts.map +1 -1
- package/dist/Stack.stories.d.ts +9 -0
- package/dist/Stack.stories.d.ts.map +1 -0
- package/dist/Stack.test.d.ts +5 -0
- package/dist/Stack.test.d.ts.map +1 -0
- package/dist/index.d.ts +1 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +123 -12711
- package/package.json +27 -32
- package/.turbo/turbo-build.log +0 -18
- package/dist/index.cjs +0 -12713
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/stack-react.css +0 -72
- package/dist/stack.css.d.ts +0 -80
- package/dist/stack.css.d.ts.map +0 -1
- package/src/Stack.tsx +0 -77
- package/src/index.ts +0 -12
- package/src/stack.css.ts +0 -73
- package/tsconfig.app.json +0 -33
- package/tsconfig.json +0 -7
- package/tsconfig.node.json +0 -26
- package/vite.config.ts +0 -37
package/dist/stack-react.css
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
.r0kzzx0 {
|
|
2
|
-
display: flex;
|
|
3
|
-
}
|
|
4
|
-
.r0kzzx1 {
|
|
5
|
-
flex-direction: row;
|
|
6
|
-
}
|
|
7
|
-
.r0kzzx2 {
|
|
8
|
-
flex-direction: row-reverse;
|
|
9
|
-
}
|
|
10
|
-
.r0kzzx3 {
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
}
|
|
13
|
-
.r0kzzx4 {
|
|
14
|
-
flex-direction: column-reverse;
|
|
15
|
-
}
|
|
16
|
-
.r0kzzx5 {
|
|
17
|
-
align-items: flex-start;
|
|
18
|
-
}
|
|
19
|
-
.r0kzzx6 {
|
|
20
|
-
align-items: center;
|
|
21
|
-
}
|
|
22
|
-
.r0kzzx7 {
|
|
23
|
-
align-items: flex-end;
|
|
24
|
-
}
|
|
25
|
-
.r0kzzx8 {
|
|
26
|
-
align-items: stretch;
|
|
27
|
-
}
|
|
28
|
-
.r0kzzx9 {
|
|
29
|
-
justify-content: flex-start;
|
|
30
|
-
}
|
|
31
|
-
.r0kzzxa {
|
|
32
|
-
justify-content: center;
|
|
33
|
-
}
|
|
34
|
-
.r0kzzxb {
|
|
35
|
-
justify-content: flex-end;
|
|
36
|
-
}
|
|
37
|
-
.r0kzzxc {
|
|
38
|
-
justify-content: space-between;
|
|
39
|
-
}
|
|
40
|
-
.r0kzzxd {
|
|
41
|
-
justify-content: space-around;
|
|
42
|
-
}
|
|
43
|
-
.r0kzzxe {
|
|
44
|
-
justify-content: space-evenly;
|
|
45
|
-
}
|
|
46
|
-
.r0kzzxf {
|
|
47
|
-
gap: 0;
|
|
48
|
-
}
|
|
49
|
-
.r0kzzxg {
|
|
50
|
-
gap: 0.25rem;
|
|
51
|
-
}
|
|
52
|
-
.r0kzzxh {
|
|
53
|
-
gap: 0.5rem;
|
|
54
|
-
}
|
|
55
|
-
.r0kzzxi {
|
|
56
|
-
gap: 1rem;
|
|
57
|
-
}
|
|
58
|
-
.r0kzzxj {
|
|
59
|
-
gap: 1.5rem;
|
|
60
|
-
}
|
|
61
|
-
.r0kzzxk {
|
|
62
|
-
gap: 2rem;
|
|
63
|
-
}
|
|
64
|
-
.r0kzzxl {
|
|
65
|
-
gap: 3rem;
|
|
66
|
-
}
|
|
67
|
-
.r0kzzxm {
|
|
68
|
-
gap: 4rem;
|
|
69
|
-
}
|
|
70
|
-
.r0kzzxn {
|
|
71
|
-
gap: 6rem;
|
|
72
|
-
}
|
package/dist/stack.css.d.ts
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
export declare const stackStyle: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
2
|
-
direction: {
|
|
3
|
-
horizontal: {
|
|
4
|
-
flexDirection: "row";
|
|
5
|
-
};
|
|
6
|
-
'horizontal-reversed': {
|
|
7
|
-
flexDirection: "row-reverse";
|
|
8
|
-
};
|
|
9
|
-
vertical: {
|
|
10
|
-
flexDirection: "column";
|
|
11
|
-
};
|
|
12
|
-
'vertical-reversed': {
|
|
13
|
-
flexDirection: "column-reverse";
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
align: {
|
|
17
|
-
start: {
|
|
18
|
-
alignItems: "flex-start";
|
|
19
|
-
};
|
|
20
|
-
center: {
|
|
21
|
-
alignItems: "center";
|
|
22
|
-
};
|
|
23
|
-
end: {
|
|
24
|
-
alignItems: "flex-end";
|
|
25
|
-
};
|
|
26
|
-
stretch: {
|
|
27
|
-
alignItems: "stretch";
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
justify: {
|
|
31
|
-
start: {
|
|
32
|
-
justifyContent: "flex-start";
|
|
33
|
-
};
|
|
34
|
-
center: {
|
|
35
|
-
justifyContent: "center";
|
|
36
|
-
};
|
|
37
|
-
end: {
|
|
38
|
-
justifyContent: "flex-end";
|
|
39
|
-
};
|
|
40
|
-
spaceBetween: {
|
|
41
|
-
justifyContent: "space-between";
|
|
42
|
-
};
|
|
43
|
-
spaceAround: {
|
|
44
|
-
justifyContent: "space-around";
|
|
45
|
-
};
|
|
46
|
-
spaceEvenly: {
|
|
47
|
-
justifyContent: "space-evenly";
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
gap: {
|
|
51
|
-
none: {
|
|
52
|
-
gap: number;
|
|
53
|
-
};
|
|
54
|
-
xsmall: {
|
|
55
|
-
gap: "0.25rem";
|
|
56
|
-
};
|
|
57
|
-
small: {
|
|
58
|
-
gap: "0.5rem";
|
|
59
|
-
};
|
|
60
|
-
medium: {
|
|
61
|
-
gap: "1rem";
|
|
62
|
-
};
|
|
63
|
-
large: {
|
|
64
|
-
gap: "1.5rem";
|
|
65
|
-
};
|
|
66
|
-
xlarge: {
|
|
67
|
-
gap: "2rem";
|
|
68
|
-
};
|
|
69
|
-
xxlarge: {
|
|
70
|
-
gap: "3rem";
|
|
71
|
-
};
|
|
72
|
-
xxxlarge: {
|
|
73
|
-
gap: "4rem";
|
|
74
|
-
};
|
|
75
|
-
xxxxlarge: {
|
|
76
|
-
gap: "6rem";
|
|
77
|
-
};
|
|
78
|
-
};
|
|
79
|
-
}>;
|
|
80
|
-
//# sourceMappingURL=stack.css.d.ts.map
|
package/dist/stack.css.d.ts.map
DELETED
|
@@ -1 +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/src/Stack.tsx
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
|
|
5
|
-
import { Box, type BoxProps } from '@pittorica/box-react';
|
|
6
|
-
import { SPACING_TOKENS, type SpacingToken } from '@pittorica/styles';
|
|
7
|
-
|
|
8
|
-
import { stackStyle } from './stack.css.js';
|
|
9
|
-
|
|
10
|
-
export const STACK_DIRECTIONS = [
|
|
11
|
-
'horizontal',
|
|
12
|
-
'horizontal-reversed',
|
|
13
|
-
'vertical',
|
|
14
|
-
'vertical-reversed',
|
|
15
|
-
] as const;
|
|
16
|
-
|
|
17
|
-
export type StackDirection = (typeof STACK_DIRECTIONS)[number];
|
|
18
|
-
|
|
19
|
-
export const STACK_ALIGNS = ['start', 'center', 'end', 'stretch'] as const;
|
|
20
|
-
|
|
21
|
-
export type StackAlign = (typeof STACK_ALIGNS)[number];
|
|
22
|
-
|
|
23
|
-
export const STACK_JUSTIFIES = [
|
|
24
|
-
'start',
|
|
25
|
-
'center',
|
|
26
|
-
'end',
|
|
27
|
-
'spaceBetween',
|
|
28
|
-
'spaceAround',
|
|
29
|
-
'spaceEvenly',
|
|
30
|
-
] as const;
|
|
31
|
-
|
|
32
|
-
export type StackJustify = (typeof STACK_JUSTIFIES)[number];
|
|
33
|
-
|
|
34
|
-
export interface StackProps extends Omit<
|
|
35
|
-
BoxProps,
|
|
36
|
-
'as' | 'display' | 'flexDirection' | 'alignItems' | 'justifyContent' | 'gap'
|
|
37
|
-
> {
|
|
38
|
-
direction?: StackDirection;
|
|
39
|
-
align?: StackAlign;
|
|
40
|
-
justify?: StackJustify;
|
|
41
|
-
gap?: SpacingToken | string;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export const Stack: React.FC<StackProps> = ({
|
|
45
|
-
direction = 'horizontal',
|
|
46
|
-
align = 'center',
|
|
47
|
-
justify = 'center',
|
|
48
|
-
gap,
|
|
49
|
-
className,
|
|
50
|
-
...props
|
|
51
|
-
}) => {
|
|
52
|
-
const isGapToken = gap && SPACING_TOKENS.includes(gap as SpacingToken);
|
|
53
|
-
const stackClass = isGapToken
|
|
54
|
-
? stackStyle({
|
|
55
|
-
direction,
|
|
56
|
-
align,
|
|
57
|
-
justify,
|
|
58
|
-
gap: gap as SpacingToken,
|
|
59
|
-
})
|
|
60
|
-
: stackStyle({
|
|
61
|
-
direction,
|
|
62
|
-
align,
|
|
63
|
-
justify,
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<Box
|
|
68
|
-
as="div"
|
|
69
|
-
className={clsx(stackClass, className)}
|
|
70
|
-
style={{
|
|
71
|
-
...(!SPACING_TOKENS.includes(gap as SpacingToken) && { gap: gap }),
|
|
72
|
-
...props.style,
|
|
73
|
-
}}
|
|
74
|
-
{...props}
|
|
75
|
-
/>
|
|
76
|
-
);
|
|
77
|
-
};
|
package/src/index.ts
DELETED
package/src/stack.css.ts
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { recipe } from '@vanilla-extract/recipes';
|
|
2
|
-
|
|
3
|
-
export const stackStyle = recipe({
|
|
4
|
-
base: {
|
|
5
|
-
display: 'flex',
|
|
6
|
-
},
|
|
7
|
-
variants: {
|
|
8
|
-
direction: {
|
|
9
|
-
horizontal: {
|
|
10
|
-
flexDirection: 'row',
|
|
11
|
-
},
|
|
12
|
-
'horizontal-reversed': {
|
|
13
|
-
flexDirection: 'row-reverse',
|
|
14
|
-
},
|
|
15
|
-
vertical: {
|
|
16
|
-
flexDirection: 'column',
|
|
17
|
-
},
|
|
18
|
-
'vertical-reversed': {
|
|
19
|
-
flexDirection: 'column-reverse',
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
align: {
|
|
23
|
-
start: {
|
|
24
|
-
alignItems: 'flex-start',
|
|
25
|
-
},
|
|
26
|
-
center: {
|
|
27
|
-
alignItems: 'center',
|
|
28
|
-
},
|
|
29
|
-
end: {
|
|
30
|
-
alignItems: 'flex-end',
|
|
31
|
-
},
|
|
32
|
-
stretch: {
|
|
33
|
-
alignItems: 'stretch',
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
justify: {
|
|
37
|
-
start: {
|
|
38
|
-
justifyContent: 'flex-start',
|
|
39
|
-
},
|
|
40
|
-
center: {
|
|
41
|
-
justifyContent: 'center',
|
|
42
|
-
},
|
|
43
|
-
end: {
|
|
44
|
-
justifyContent: 'flex-end',
|
|
45
|
-
},
|
|
46
|
-
spaceBetween: {
|
|
47
|
-
justifyContent: 'space-between',
|
|
48
|
-
},
|
|
49
|
-
spaceAround: {
|
|
50
|
-
justifyContent: 'space-around',
|
|
51
|
-
},
|
|
52
|
-
spaceEvenly: {
|
|
53
|
-
justifyContent: 'space-evenly',
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
gap: {
|
|
57
|
-
none: { gap: 0 },
|
|
58
|
-
xsmall: { gap: '0.25rem' },
|
|
59
|
-
small: { gap: '0.5rem' },
|
|
60
|
-
medium: { gap: '1rem' },
|
|
61
|
-
large: { gap: '1.5rem' },
|
|
62
|
-
xlarge: { gap: '2rem' },
|
|
63
|
-
xxlarge: { gap: '3rem' },
|
|
64
|
-
xxxlarge: { gap: '4rem' },
|
|
65
|
-
xxxxlarge: { gap: '6rem' },
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
defaultVariants: {
|
|
69
|
-
direction: 'horizontal',
|
|
70
|
-
align: 'center',
|
|
71
|
-
justify: 'center',
|
|
72
|
-
},
|
|
73
|
-
});
|
package/tsconfig.app.json
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"outDir": "dist",
|
|
4
|
-
"rootDir": "src",
|
|
5
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
6
|
-
"target": "ES2022",
|
|
7
|
-
"useDefineForClassFields": true,
|
|
8
|
-
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
9
|
-
"module": "ESNext",
|
|
10
|
-
"types": ["vite/client"],
|
|
11
|
-
"skipLibCheck": true,
|
|
12
|
-
|
|
13
|
-
/* Bundler mode */
|
|
14
|
-
"moduleResolution": "bundler",
|
|
15
|
-
"allowImportingTsExtensions": false,
|
|
16
|
-
"verbatimModuleSyntax": true,
|
|
17
|
-
"moduleDetection": "force",
|
|
18
|
-
"noEmit": false,
|
|
19
|
-
"emitDeclarationOnly": true,
|
|
20
|
-
"declaration": true,
|
|
21
|
-
"declarationMap": true,
|
|
22
|
-
"jsx": "react-jsx",
|
|
23
|
-
|
|
24
|
-
/* Linting */
|
|
25
|
-
"strict": true,
|
|
26
|
-
"noUnusedLocals": true,
|
|
27
|
-
"noUnusedParameters": true,
|
|
28
|
-
"erasableSyntaxOnly": true,
|
|
29
|
-
"noFallthroughCasesInSwitch": true,
|
|
30
|
-
"noUncheckedSideEffectImports": true
|
|
31
|
-
},
|
|
32
|
-
"include": ["src"]
|
|
33
|
-
}
|
package/tsconfig.json
DELETED
package/tsconfig.node.json
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
4
|
-
"target": "ES2023",
|
|
5
|
-
"lib": ["ES2023"],
|
|
6
|
-
"module": "ESNext",
|
|
7
|
-
"types": ["node"],
|
|
8
|
-
"skipLibCheck": true,
|
|
9
|
-
|
|
10
|
-
/* Bundler mode */
|
|
11
|
-
"moduleResolution": "bundler",
|
|
12
|
-
"allowImportingTsExtensions": false,
|
|
13
|
-
"verbatimModuleSyntax": true,
|
|
14
|
-
"moduleDetection": "force",
|
|
15
|
-
"noEmit": true,
|
|
16
|
-
|
|
17
|
-
/* Linting */
|
|
18
|
-
"strict": true,
|
|
19
|
-
"noUnusedLocals": true,
|
|
20
|
-
"noUnusedParameters": true,
|
|
21
|
-
"erasableSyntaxOnly": true,
|
|
22
|
-
"noFallthroughCasesInSwitch": true,
|
|
23
|
-
"noUncheckedSideEffectImports": true
|
|
24
|
-
},
|
|
25
|
-
"include": ["vite.config.ts"]
|
|
26
|
-
}
|
package/vite.config.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import path from 'node:path';
|
|
2
|
-
|
|
3
|
-
import { defineConfig } from 'vite';
|
|
4
|
-
import dts from 'vite-plugin-dts';
|
|
5
|
-
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
|
|
6
|
-
import react from '@vitejs/plugin-react';
|
|
7
|
-
|
|
8
|
-
// https://vite.dev/config/
|
|
9
|
-
export default defineConfig({
|
|
10
|
-
plugins: [
|
|
11
|
-
vanillaExtractPlugin(),
|
|
12
|
-
react({
|
|
13
|
-
babel: {
|
|
14
|
-
plugins: [['babel-plugin-react-compiler']],
|
|
15
|
-
},
|
|
16
|
-
}),
|
|
17
|
-
dts({
|
|
18
|
-
insertTypesEntry: true,
|
|
19
|
-
include: ['src'],
|
|
20
|
-
rollupTypes: false,
|
|
21
|
-
outDir: 'dist',
|
|
22
|
-
tsconfigPath: './tsconfig.app.json',
|
|
23
|
-
}),
|
|
24
|
-
],
|
|
25
|
-
|
|
26
|
-
build: {
|
|
27
|
-
lib: {
|
|
28
|
-
entry: path.resolve(import.meta.dirname, 'src/index.ts'),
|
|
29
|
-
name: '@pittorica/stack-react',
|
|
30
|
-
formats: ['es', 'cjs'],
|
|
31
|
-
fileName: (format: string): string =>
|
|
32
|
-
`index.${format === 'es' ? 'js' : 'cjs'}`,
|
|
33
|
-
},
|
|
34
|
-
sourcemap: true,
|
|
35
|
-
minify: false,
|
|
36
|
-
},
|
|
37
|
-
});
|