@latte-macchiat-io/latte-vanilla-components 0.0.451 → 0.0.453
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/package.json
CHANGED
|
@@ -17,18 +17,8 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> &
|
|
|
17
17
|
|
|
18
18
|
export const Box = ({ align, vAlign, children, variant, isLight, className, direction, isReversed, paddingTop }: BoxProps) => {
|
|
19
19
|
return (
|
|
20
|
-
<div
|
|
21
|
-
className={
|
|
22
|
-
box({
|
|
23
|
-
align,
|
|
24
|
-
direction,
|
|
25
|
-
variant,
|
|
26
|
-
isReversed,
|
|
27
|
-
paddingTop,
|
|
28
|
-
}),
|
|
29
|
-
className
|
|
30
|
-
)}>
|
|
31
|
-
<div className={boxContent({ vAlign, isLight })}>{children}</div>
|
|
20
|
+
<div className={cn(box({ variant, paddingTop }), className)}>
|
|
21
|
+
<div className={boxContent({ vAlign, isLight, align, direction, isReversed })}>{children}</div>
|
|
32
22
|
</div>
|
|
33
23
|
);
|
|
34
24
|
};
|
|
@@ -54,39 +54,6 @@ export const box = recipe({
|
|
|
54
54
|
backgroundColor: themeContract.section.variant.transparent.backgroundColor,
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
|
-
direction: {
|
|
58
|
-
column: {
|
|
59
|
-
flexDirection: 'column',
|
|
60
|
-
},
|
|
61
|
-
row: {
|
|
62
|
-
flexDirection: 'column',
|
|
63
|
-
|
|
64
|
-
'@media': {
|
|
65
|
-
[queries.md]: {
|
|
66
|
-
flexDirection: 'row',
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
|
|
72
|
-
isReversed: {
|
|
73
|
-
true: {
|
|
74
|
-
selectors: {
|
|
75
|
-
'&': {
|
|
76
|
-
flexDirection: 'column-reverse',
|
|
77
|
-
},
|
|
78
|
-
},
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
|
|
82
|
-
align: {
|
|
83
|
-
left: { textAlign: 'left' },
|
|
84
|
-
center: {
|
|
85
|
-
textAlign: 'center',
|
|
86
|
-
alignItems: 'center',
|
|
87
|
-
},
|
|
88
|
-
right: { textAlign: 'right', alignItems: 'end' },
|
|
89
|
-
},
|
|
90
57
|
|
|
91
58
|
paddingTop: {
|
|
92
59
|
small: {},
|
|
@@ -104,9 +71,7 @@ export const box = recipe({
|
|
|
104
71
|
},
|
|
105
72
|
|
|
106
73
|
defaultVariants: {
|
|
107
|
-
align: 'left',
|
|
108
74
|
paddingTop: 'small',
|
|
109
|
-
direction: 'column',
|
|
110
75
|
variant: 'primary',
|
|
111
76
|
},
|
|
112
77
|
});
|
|
@@ -116,7 +81,6 @@ export const boxContent = recipe({
|
|
|
116
81
|
{
|
|
117
82
|
flex: 1,
|
|
118
83
|
display: 'flex',
|
|
119
|
-
position: 'relative',
|
|
120
84
|
flexDirection: 'column',
|
|
121
85
|
},
|
|
122
86
|
],
|
|
@@ -127,6 +91,39 @@ export const boxContent = recipe({
|
|
|
127
91
|
center: { justifyContent: 'center' },
|
|
128
92
|
spaceBetween: { justifyContent: 'space-between' },
|
|
129
93
|
},
|
|
94
|
+
direction: {
|
|
95
|
+
column: {
|
|
96
|
+
flexDirection: 'column',
|
|
97
|
+
},
|
|
98
|
+
row: {
|
|
99
|
+
flexDirection: 'column',
|
|
100
|
+
|
|
101
|
+
'@media': {
|
|
102
|
+
[queries.md]: {
|
|
103
|
+
flexDirection: 'row',
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
isReversed: {
|
|
110
|
+
true: {
|
|
111
|
+
selectors: {
|
|
112
|
+
'&': {
|
|
113
|
+
flexDirection: 'column-reverse',
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
align: {
|
|
120
|
+
left: { textAlign: 'left' },
|
|
121
|
+
center: {
|
|
122
|
+
textAlign: 'center',
|
|
123
|
+
alignItems: 'center',
|
|
124
|
+
},
|
|
125
|
+
right: { textAlign: 'right', alignItems: 'end' },
|
|
126
|
+
},
|
|
130
127
|
isLight: {
|
|
131
128
|
true: {
|
|
132
129
|
color: themeContract.colors.textLight,
|
|
@@ -138,6 +135,8 @@ export const boxContent = recipe({
|
|
|
138
135
|
},
|
|
139
136
|
defaultVariants: {
|
|
140
137
|
vAlign: 'top',
|
|
138
|
+
align: 'left',
|
|
139
|
+
direction: 'column',
|
|
141
140
|
isLight: false,
|
|
142
141
|
},
|
|
143
142
|
});
|