@recursica/mantine-adapter 0.19.0 → 0.20.0
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/CHANGELOG.md +6 -0
- package/dist/mantine-adapter.cjs +1 -1
- package/dist/mantine-adapter.cjs.map +1 -1
- package/dist/mantine-adapter.css +1 -1
- package/dist/mantine-adapter.js +661 -658
- package/dist/mantine-adapter.js.map +1 -1
- package/dist/src/components/Stack/Stack.d.ts +9 -1
- package/dist/src/utils/filterStylingProps.d.ts +2 -0
- package/package.json +1 -1
- package/src/Introduction.stories.tsx +77 -103
- package/src/OverStyling.tsx +216 -171
- package/src/components/Button/Button.module.css +21 -4
- package/src/components/Button/Button.stories.tsx +14 -0
- package/src/components/Flex/Flex.tsx +9 -4
- package/src/components/Group/Group.tsx +5 -3
- package/src/components/Stack/Stack.tsx +9 -5
- package/src/utils/filterStylingProps.ts +17 -1
package/src/OverStyling.tsx
CHANGED
|
@@ -1,186 +1,231 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Container,
|
|
3
|
-
Paper,
|
|
4
|
-
Title,
|
|
5
|
-
Text,
|
|
6
|
-
List,
|
|
7
|
-
Divider,
|
|
8
|
-
Group,
|
|
9
|
-
Code,
|
|
10
|
-
} from "@mantine/core";
|
|
1
|
+
import { Container, Card, Title, Text, Group, Stack } from "./components";
|
|
11
2
|
import { Button } from "./components/Button/Button";
|
|
12
3
|
|
|
13
4
|
export const OverStylingInfo = () => {
|
|
14
5
|
return (
|
|
15
|
-
<Container size="md"
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
6
|
+
<Container size="md" style={{ padding: "32px 0" }}>
|
|
7
|
+
<Card>
|
|
8
|
+
<Card.Content>
|
|
9
|
+
<Title order={1} mb="rec-md">
|
|
10
|
+
Over Styling (<code>overStyled</code>)
|
|
11
|
+
</Title>
|
|
12
|
+
<Text mb="rec-md">
|
|
13
|
+
By default, all Recursica components are strictly sandboxed. This
|
|
14
|
+
means they are protected against arbitrary styling configurations
|
|
15
|
+
(like passing generic React <code>style</code> objects, custom{" "}
|
|
16
|
+
<code>classNames</code> injections, or using deep Mantine layout
|
|
17
|
+
hooks like <code>bg</code> and <code>c</code>). This strict
|
|
18
|
+
compile-time and run-time enforcement guarantees that your design
|
|
19
|
+
system tokens remain true across your application.
|
|
20
|
+
</Text>
|
|
21
|
+
<Text mb="rec-md">
|
|
22
|
+
However, there may be edge cases where a developer absolutely must
|
|
23
|
+
modify a component beyond what the design tokens natively allow. For
|
|
24
|
+
this, we provide the <strong>escape hatch</strong> property:{" "}
|
|
25
|
+
<code>overStyled={`{true}`}</code>.
|
|
26
|
+
</Text>
|
|
35
27
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
28
|
+
<Title order={3} mb="rec-sm">
|
|
29
|
+
The Core Philosophy
|
|
30
|
+
</Title>
|
|
31
|
+
<Text mb="rec-sm">
|
|
32
|
+
**You should not over-style components.** Using{" "}
|
|
33
|
+
<code>overStyled</code> explicitly signifies that you are breaking
|
|
34
|
+
design system rules.
|
|
35
|
+
</Text>
|
|
36
|
+
<Stack
|
|
37
|
+
component="ol"
|
|
38
|
+
style={{ paddingLeft: "24px" }}
|
|
39
|
+
mb="rec-xl"
|
|
40
|
+
gap="rec-sm"
|
|
41
|
+
>
|
|
42
|
+
<li>
|
|
43
|
+
<Text>
|
|
44
|
+
<strong>Technical Debt:</strong> If over-styling is required, it
|
|
45
|
+
should be treated as a short-term workaround. Ideally, the
|
|
46
|
+
component will be refactored once the required layouts or
|
|
47
|
+
variants are officially integrated into the core Recursica
|
|
48
|
+
component library.
|
|
49
|
+
</Text>
|
|
50
|
+
</li>
|
|
51
|
+
<li>
|
|
52
|
+
<Text>
|
|
53
|
+
<strong>Auditing & Searching:</strong> Because this pattern
|
|
54
|
+
creates technical debt, we enforce the explicit{" "}
|
|
55
|
+
<code>overStyled</code> boolean. This provides a highly
|
|
56
|
+
auditable, easily searchable string. Product managers and
|
|
57
|
+
engineers can quickly grep the codebase for{" "}
|
|
58
|
+
<code>overStyled</code> (or the <code>RecursicaOverStyled</code>{" "}
|
|
59
|
+
typings) to hunt down components that don't match standard
|
|
60
|
+
patterns.
|
|
61
|
+
</Text>
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
<Text>
|
|
65
|
+
<strong>Highly Custom Components:</strong> If your application
|
|
66
|
+
genuinely requires massive custom layouts that the UI kit cannot
|
|
67
|
+
support, <strong>do not hack the Recursica component</strong>.
|
|
68
|
+
Instead, it is highly encouraged that you import the underlying
|
|
69
|
+
primitive component directly from <code>@mantine/core</code> and
|
|
70
|
+
construct your independent feature there. While you can utilize
|
|
71
|
+
raw Recursica CSS variables on these custom components, note
|
|
72
|
+
that they are not guaranteed to be accurately maintained as
|
|
73
|
+
Recursica evolves. Keep strict components strict!
|
|
74
|
+
</Text>
|
|
75
|
+
</li>
|
|
76
|
+
</Stack>
|
|
71
77
|
|
|
72
|
-
|
|
78
|
+
<Stack
|
|
79
|
+
style={{ height: 1, backgroundColor: "#eaeaea" }}
|
|
80
|
+
mb="rec-xl"
|
|
81
|
+
/>
|
|
73
82
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
83
|
+
<Title order={3} mb="rec-sm">
|
|
84
|
+
Permitted Layout Properties
|
|
85
|
+
</Title>
|
|
86
|
+
<Text mb="rec-sm">
|
|
87
|
+
Unlike deep styling bounds (colors, typography, padding,
|
|
88
|
+
dimensions), external <strong>layout spacing properties</strong>{" "}
|
|
89
|
+
like Margins (<code>m</code>, <code>mt</code>, <code>mb</code>,{" "}
|
|
90
|
+
<code>mx</code>) are safely <strong>permitted by default</strong>.
|
|
91
|
+
This allows integrators to structurally compose components alongside
|
|
92
|
+
siblings without breaching internal token boundaries.
|
|
93
|
+
</Text>
|
|
94
|
+
<Text mb="rec-xl">
|
|
95
|
+
When using layout properties, you have the flexibility to use either
|
|
96
|
+
ecosystem seamlessly:
|
|
97
|
+
</Text>
|
|
98
|
+
<Stack
|
|
99
|
+
component="ol"
|
|
100
|
+
style={{ paddingLeft: "24px" }}
|
|
101
|
+
mb="rec-md"
|
|
102
|
+
gap="rec-sm"
|
|
103
|
+
>
|
|
104
|
+
<li>
|
|
105
|
+
<Text>
|
|
106
|
+
<strong>Mantine Core Values:</strong> Passing standard Mantine
|
|
107
|
+
sizes (like <code>mt="md"</code>) passes straight through to
|
|
108
|
+
Mantine natively, allowing you to interface completely normally
|
|
109
|
+
with a parent application's existing Mantine Theme setup that
|
|
110
|
+
might fall outside Recursica's scope.
|
|
111
|
+
</Text>
|
|
112
|
+
</li>
|
|
113
|
+
<li>
|
|
114
|
+
<Text>
|
|
115
|
+
<strong>Recursica Strict Tokens:</strong> Passing our custom
|
|
116
|
+
prefixed tokens (like <code>mt="rec-md"</code>) signals our
|
|
117
|
+
internal layout interceptor to securely translate the value
|
|
118
|
+
directly to our native <code>recursica_brand_dimensions</code>{" "}
|
|
119
|
+
CSS variables. This ensures strict design token measurements
|
|
120
|
+
while sharing the exact same prop interface!
|
|
121
|
+
</Text>
|
|
122
|
+
</li>
|
|
123
|
+
</Stack>
|
|
124
|
+
<Text mb="rec-sm" overStyled fw={500}>
|
|
125
|
+
Available Recursica Layout Tokens:
|
|
126
|
+
</Text>
|
|
127
|
+
<Stack
|
|
128
|
+
component="ul"
|
|
129
|
+
style={{ paddingLeft: "24px" }}
|
|
130
|
+
mb="rec-xl"
|
|
131
|
+
gap="rec-none"
|
|
132
|
+
>
|
|
133
|
+
<li>
|
|
134
|
+
<Text>
|
|
135
|
+
<code>rec-none</code> (0px limit)
|
|
136
|
+
</Text>
|
|
137
|
+
</li>
|
|
138
|
+
<li>
|
|
139
|
+
<Text>
|
|
140
|
+
<code>rec-sm</code> (0.5x scaling)
|
|
141
|
+
</Text>
|
|
142
|
+
</li>
|
|
143
|
+
<li>
|
|
144
|
+
<Text>
|
|
145
|
+
<code>rec-default</code> (1.0x scaling)
|
|
146
|
+
</Text>
|
|
147
|
+
</li>
|
|
148
|
+
<li>
|
|
149
|
+
<Text>
|
|
150
|
+
<code>rec-md</code> (1.5x scaling)
|
|
151
|
+
</Text>
|
|
152
|
+
</li>
|
|
153
|
+
<li>
|
|
154
|
+
<Text>
|
|
155
|
+
<code>rec-lg</code> (2.0x scaling)
|
|
156
|
+
</Text>
|
|
157
|
+
</li>
|
|
158
|
+
<li>
|
|
159
|
+
<Text>
|
|
160
|
+
<code>rec-xl</code> (3.0x scaling)
|
|
161
|
+
</Text>
|
|
162
|
+
</li>
|
|
163
|
+
<li>
|
|
164
|
+
<Text>
|
|
165
|
+
<code>rec-2xl</code> (4.0x scaling)
|
|
166
|
+
</Text>
|
|
167
|
+
</li>
|
|
168
|
+
</Stack>
|
|
132
169
|
|
|
133
|
-
|
|
170
|
+
<Stack
|
|
171
|
+
style={{ height: 1, backgroundColor: "#eaeaea" }}
|
|
172
|
+
mb="rec-xl"
|
|
173
|
+
/>
|
|
134
174
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
175
|
+
<Title order={3} mb="rec-sm">
|
|
176
|
+
Primitive Layout Components Exemption
|
|
177
|
+
</Title>
|
|
178
|
+
<Text mb="rec-sm">
|
|
179
|
+
Unlike complex UI components (Buttons, Tabs, Inputs) which are
|
|
180
|
+
strictly protected, <strong>Primitive Layout Components</strong> (
|
|
181
|
+
<code>Flex</code>, <code>Stack</code>, <code>Group</code>,{" "}
|
|
182
|
+
<code>Container</code>) are entirely exempt from the{" "}
|
|
183
|
+
<code>RecursicaOverStyled</code> gatekeeper.
|
|
184
|
+
</Text>
|
|
185
|
+
<Text mb="rec-xl">
|
|
186
|
+
Because the entire functional purpose of these components is
|
|
187
|
+
structural layout composition, developers are free to pass any
|
|
188
|
+
standard Mantine width, height, padding, margin, gap, and alignment
|
|
189
|
+
property directly to them without needing to flag{" "}
|
|
190
|
+
<code>overStyled={`{true}`}</code>. The internal custom token mapper
|
|
191
|
+
(such as converting <code>gap="rec-md"</code>) is still active
|
|
192
|
+
natively on these wrappers.
|
|
193
|
+
</Text>
|
|
154
194
|
|
|
155
|
-
|
|
195
|
+
<Stack
|
|
196
|
+
style={{ height: 1, backgroundColor: "#eaeaea" }}
|
|
197
|
+
mb="rec-xl"
|
|
198
|
+
/>
|
|
156
199
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
200
|
+
<Title order={3} mb="rec-md">
|
|
201
|
+
Live Example
|
|
202
|
+
</Title>
|
|
203
|
+
<Text mb="rec-xl">
|
|
204
|
+
Below is a side-by-side comparison. The first is a standard
|
|
205
|
+
Recursica Button protected by the design tokens mapping. The second
|
|
206
|
+
flagrantly forces <code>overStyled={`{true}`}</code>, allowing
|
|
207
|
+
Mantine's native styling generics to punch right through the sandbox
|
|
208
|
+
layout.
|
|
209
|
+
</Text>
|
|
166
210
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
211
|
+
<Group gap="rec-xl">
|
|
212
|
+
<Stack gap="rec-sm">
|
|
213
|
+
<Text overStyled size="sm" c="dimmed">
|
|
214
|
+
Strict Baseline (Default)
|
|
215
|
+
</Text>
|
|
216
|
+
<Button variant="solid">Standard UI Kit Button</Button>
|
|
217
|
+
</Stack>
|
|
218
|
+
<Stack gap="rec-sm">
|
|
219
|
+
<Text overStyled size="sm" c="dimmed">
|
|
220
|
+
overStyled={`{true}`}
|
|
221
|
+
</Text>
|
|
222
|
+
<Button overStyled={true} bg="pink" c="black" radius="xl">
|
|
223
|
+
Unsafe Pink Marketing Button
|
|
224
|
+
</Button>
|
|
225
|
+
</Stack>
|
|
226
|
+
</Group>
|
|
227
|
+
</Card.Content>
|
|
228
|
+
</Card>
|
|
184
229
|
</Container>
|
|
185
230
|
);
|
|
186
231
|
};
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
overflow: hidden; /* Truncation bounding box */
|
|
7
7
|
position: relative;
|
|
8
8
|
transition: all 0.2s ease;
|
|
9
|
+
width: fit-content; /* Prevent stretching in flex columns */
|
|
9
10
|
|
|
10
11
|
/* Shared Defaults */
|
|
11
12
|
font-family: var(
|
|
@@ -37,7 +38,6 @@
|
|
|
37
38
|
/* Internal Mantine reset & layout logic for Truncation */
|
|
38
39
|
.root > * {
|
|
39
40
|
min-width: 0;
|
|
40
|
-
width: 100%;
|
|
41
41
|
position: relative;
|
|
42
42
|
z-index: 1;
|
|
43
43
|
}
|
|
@@ -52,7 +52,6 @@
|
|
|
52
52
|
.labelText {
|
|
53
53
|
display: block;
|
|
54
54
|
min-width: 0;
|
|
55
|
-
width: 100%;
|
|
56
55
|
overflow: hidden;
|
|
57
56
|
text-overflow: ellipsis;
|
|
58
57
|
white-space: nowrap;
|
|
@@ -76,6 +75,11 @@
|
|
|
76
75
|
--recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding
|
|
77
76
|
);
|
|
78
77
|
}
|
|
78
|
+
.root[data-size="default"] .labelText {
|
|
79
|
+
max-width: var(
|
|
80
|
+
--recursica_ui-kit_components_button_variants_sizes_default_properties_max-label-width
|
|
81
|
+
);
|
|
82
|
+
}
|
|
79
83
|
.root[data-size="small"] {
|
|
80
84
|
border-radius: var(
|
|
81
85
|
--recursica_ui-kit_components_button_variants_sizes_small_properties_border-radius
|
|
@@ -111,6 +115,11 @@
|
|
|
111
115
|
)
|
|
112
116
|
);
|
|
113
117
|
}
|
|
118
|
+
.root[data-size="small"] .labelText {
|
|
119
|
+
max-width: var(
|
|
120
|
+
--recursica_ui-kit_components_button_variants_sizes_small_properties_max-label-width
|
|
121
|
+
);
|
|
122
|
+
}
|
|
114
123
|
|
|
115
124
|
/* Icon Resets */
|
|
116
125
|
.iconWrapper {
|
|
@@ -167,8 +176,16 @@
|
|
|
167
176
|
}
|
|
168
177
|
|
|
169
178
|
/* Disabled */
|
|
170
|
-
.root:disabled {
|
|
171
|
-
opacity: var(
|
|
179
|
+
.root[data-size="default"]:disabled {
|
|
180
|
+
opacity: var(
|
|
181
|
+
--recursica_ui-kit_components_button_variants_sizes_default_properties_disabled-opacity
|
|
182
|
+
);
|
|
183
|
+
cursor: not-allowed;
|
|
184
|
+
}
|
|
185
|
+
.root[data-size="small"]:disabled {
|
|
186
|
+
opacity: var(
|
|
187
|
+
--recursica_ui-kit_components_button_variants_sizes_small_properties_disabled-opacity
|
|
188
|
+
);
|
|
172
189
|
cursor: not-allowed;
|
|
173
190
|
}
|
|
174
191
|
|
|
@@ -112,3 +112,17 @@ export const PolymorphicAsLink: Story = {
|
|
|
112
112
|
target: "_blank",
|
|
113
113
|
},
|
|
114
114
|
};
|
|
115
|
+
|
|
116
|
+
export const TruncatedLabel: Story = {
|
|
117
|
+
args: {
|
|
118
|
+
children:
|
|
119
|
+
"This is an exceptionally long button label designed to demonstrate how the component handles text overflow by applying an ellipsis rather than breaking the layout or wrapping to multiple lines.",
|
|
120
|
+
variant: "solid",
|
|
121
|
+
size: "default",
|
|
122
|
+
},
|
|
123
|
+
render: (args: ButtonStoryProps) => (
|
|
124
|
+
<div style={{ maxWidth: "250px" }}>
|
|
125
|
+
<Button {...args} />
|
|
126
|
+
</div>
|
|
127
|
+
),
|
|
128
|
+
};
|
|
@@ -4,7 +4,10 @@ import {
|
|
|
4
4
|
type FlexProps as MantineFlexProps,
|
|
5
5
|
createPolymorphicComponent,
|
|
6
6
|
} from "@mantine/core";
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
type RecursicaSpacing,
|
|
9
|
+
mapLayoutProps,
|
|
10
|
+
} from "../../utils/filterStylingProps";
|
|
8
11
|
import styles from "./Flex.module.css";
|
|
9
12
|
|
|
10
13
|
export interface RecursicaFlexProps {
|
|
@@ -27,7 +30,7 @@ export interface RecursicaFlexProps {
|
|
|
27
30
|
export type FlexProps = MantineFlexProps & RecursicaFlexProps;
|
|
28
31
|
|
|
29
32
|
const _Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
|
|
30
|
-
{ children, gap = "rec-default", ...rest },
|
|
33
|
+
{ children, gap = "rec-default", rowGap, columnGap, ...rest },
|
|
31
34
|
ref,
|
|
32
35
|
) {
|
|
33
36
|
const mergedClassNames: Partial<Record<string, string>> = {
|
|
@@ -54,8 +57,10 @@ const _Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
|
|
|
54
57
|
ref={ref}
|
|
55
58
|
className={finalClass}
|
|
56
59
|
classNames={mergedClassNames}
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
{...mapLayoutProps({ gap, rowGap, columnGap, ...rest } as Record<
|
|
61
|
+
string,
|
|
62
|
+
unknown
|
|
63
|
+
>)}
|
|
59
64
|
>
|
|
60
65
|
{children}
|
|
61
66
|
</MantineFlex>
|
|
@@ -3,7 +3,10 @@ import {
|
|
|
3
3
|
Group as MantineGroup,
|
|
4
4
|
type GroupProps as MantineGroupProps,
|
|
5
5
|
} from "@mantine/core";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
type RecursicaSpacing,
|
|
8
|
+
mapLayoutProps,
|
|
9
|
+
} from "../../utils/filterStylingProps";
|
|
7
10
|
import styles from "./Group.module.css";
|
|
8
11
|
|
|
9
12
|
export interface RecursicaGroupProps {
|
|
@@ -53,8 +56,7 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
|
|
|
53
56
|
ref={ref}
|
|
54
57
|
className={finalClass}
|
|
55
58
|
classNames={mergedClassNames}
|
|
56
|
-
|
|
57
|
-
{...rest}
|
|
59
|
+
{...mapLayoutProps({ gap, ...rest } as Record<string, unknown>)}
|
|
58
60
|
>
|
|
59
61
|
{children}
|
|
60
62
|
</MantineGroup>
|
|
@@ -2,8 +2,12 @@ import { forwardRef } from "react";
|
|
|
2
2
|
import {
|
|
3
3
|
Stack as MantineStack,
|
|
4
4
|
type StackProps as MantineStackProps,
|
|
5
|
+
createPolymorphicComponent,
|
|
5
6
|
} from "@mantine/core";
|
|
6
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
type RecursicaSpacing,
|
|
9
|
+
mapLayoutProps,
|
|
10
|
+
} from "../../utils/filterStylingProps";
|
|
7
11
|
import styles from "./Stack.module.css";
|
|
8
12
|
|
|
9
13
|
export interface RecursicaStackProps {
|
|
@@ -23,7 +27,7 @@ export interface RecursicaStackProps {
|
|
|
23
27
|
*/
|
|
24
28
|
export type StackProps = MantineStackProps & RecursicaStackProps;
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
const _Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
|
|
27
31
|
{ children, gap = "rec-default", ...rest },
|
|
28
32
|
ref,
|
|
29
33
|
) {
|
|
@@ -51,12 +55,12 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
|
|
|
51
55
|
ref={ref}
|
|
52
56
|
className={finalClass}
|
|
53
57
|
classNames={mergedClassNames}
|
|
54
|
-
|
|
55
|
-
{...rest}
|
|
58
|
+
{...mapLayoutProps({ gap, ...rest } as Record<string, unknown>)}
|
|
56
59
|
>
|
|
57
60
|
{children}
|
|
58
61
|
</MantineStack>
|
|
59
62
|
);
|
|
60
63
|
});
|
|
64
|
+
_Stack.displayName = "Stack";
|
|
61
65
|
|
|
62
|
-
Stack
|
|
66
|
+
export const Stack = createPolymorphicComponent<"div", StackProps>(_Stack);
|
|
@@ -91,7 +91,7 @@ const LAYOUT_PROPS = new Set([
|
|
|
91
91
|
"right",
|
|
92
92
|
]);
|
|
93
93
|
|
|
94
|
-
const SPACING_MAP: Record<string, string> = {
|
|
94
|
+
export const SPACING_MAP: Record<string, string> = {
|
|
95
95
|
"rec-none": "var(--recursica_brand_dimensions_general_none)",
|
|
96
96
|
"rec-sm": "var(--recursica_brand_dimensions_general_sm)",
|
|
97
97
|
"rec-default": "var(--recursica_brand_dimensions_general_default)",
|
|
@@ -108,6 +108,22 @@ export type RecursicaOverStyled<T> =
|
|
|
108
108
|
ForbiddenStyles & { overStyled?: false | undefined })
|
|
109
109
|
| (T & { overStyled: true });
|
|
110
110
|
|
|
111
|
+
export function mapLayoutProps<T extends Record<string, unknown>>(props: T): T {
|
|
112
|
+
const mapped = { ...props };
|
|
113
|
+
for (const [key, value] of Object.entries(mapped)) {
|
|
114
|
+
if (
|
|
115
|
+
typeof value === "string" &&
|
|
116
|
+
value.startsWith("rec-") &&
|
|
117
|
+
LAYOUT_PROPS.has(key)
|
|
118
|
+
) {
|
|
119
|
+
if (value in SPACING_MAP) {
|
|
120
|
+
(mapped as Record<string, unknown>)[key] = SPACING_MAP[value];
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return mapped;
|
|
125
|
+
}
|
|
126
|
+
|
|
111
127
|
export function filterStylingProps<T extends Record<string, unknown>>(
|
|
112
128
|
props: T,
|
|
113
129
|
overStyled?: boolean,
|