@recursica/mantine-adapter 0.19.0 → 0.21.0

package/src/components/Flex/Flex.tsx

@@ -4,7 +4,10 @@ import {
   type FlexProps as MantineFlexProps,
   createPolymorphicComponent,
 } from "@mantine/core";
-import { type RecursicaSpacing } from "../../utils/filterStylingProps";
+import {
+  type RecursicaSpacing,
+  mapLayoutProps,
+} from "../../utils/filterStylingProps";
 import styles from "./Flex.module.css";
 
 export interface RecursicaFlexProps {
@@ -27,7 +30,7 @@ export interface RecursicaFlexProps {
 export type FlexProps = MantineFlexProps & RecursicaFlexProps;
 
 const _Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
-  { children, gap = "rec-default", ...rest },
+  { children, gap = "rec-default", rowGap, columnGap, ...rest },
   ref,
 ) {
   const mergedClassNames: Partial<Record<string, string>> = {
@@ -54,8 +57,10 @@ const _Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
       ref={ref}
       className={finalClass}
       classNames={mergedClassNames}
-      gap={gap}
-      {...rest}
+      {...mapLayoutProps({ gap, rowGap, columnGap, ...rest } as Record<
+        string,
+        unknown
+      >)}
     >
       {children}
     </MantineFlex>

package/src/components/Group/Group.tsx

@@ -3,7 +3,10 @@ import {
   Group as MantineGroup,
   type GroupProps as MantineGroupProps,
 } from "@mantine/core";
-import { type RecursicaSpacing } from "../../utils/filterStylingProps";
+import {
+  type RecursicaSpacing,
+  mapLayoutProps,
+} from "../../utils/filterStylingProps";
 import styles from "./Group.module.css";
 
 export interface RecursicaGroupProps {
@@ -53,8 +56,7 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
       ref={ref}
       className={finalClass}
       classNames={mergedClassNames}
-      gap={gap}
-      {...rest}
+      {...mapLayoutProps({ gap, ...rest } as Record<string, unknown>)}
     >
       {children}
     </MantineGroup>

package/src/components/Stack/Stack.tsx

@@ -2,8 +2,12 @@ import { forwardRef } from "react";
 import {
   Stack as MantineStack,
   type StackProps as MantineStackProps,
+  createPolymorphicComponent,
 } from "@mantine/core";
-import { type RecursicaSpacing } from "../../utils/filterStylingProps";
+import {
+  type RecursicaSpacing,
+  mapLayoutProps,
+} from "../../utils/filterStylingProps";
 import styles from "./Stack.module.css";
 
 export interface RecursicaStackProps {
@@ -23,7 +27,7 @@ export interface RecursicaStackProps {
  */
 export type StackProps = MantineStackProps & RecursicaStackProps;
 
-export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
+const _Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
   { children, gap = "rec-default", ...rest },
   ref,
 ) {
@@ -51,12 +55,12 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
       ref={ref}
       className={finalClass}
       classNames={mergedClassNames}
-      gap={gap}
-      {...rest}
+      {...mapLayoutProps({ gap, ...rest } as Record<string, unknown>)}
     >
       {children}
     </MantineStack>
   );
 });
+_Stack.displayName = "Stack";
 
-Stack.displayName = "Stack";
+export const Stack = createPolymorphicComponent<"div", StackProps>(_Stack);

package/src/components/Toast/Toast.module.css

@@ -23,6 +23,12 @@
   );
   gap: var(--recursica_ui-kit_components_toast_properties_spacing);
 
+  /* Hide Mantine's native colored vertical line */
+  &::before {
+    display: none;
+    content: none;
+  }
+
   & .icon {
     width: var(--recursica_ui-kit_components_toast_properties_icon) !important;
     height: var(--recursica_ui-kit_components_toast_properties_icon) !important;

package/src/utils/filterStylingProps.ts

@@ -91,7 +91,7 @@ const LAYOUT_PROPS = new Set([
   "right",
 ]);
 
-const SPACING_MAP: Record<string, string> = {
+export const SPACING_MAP: Record<string, string> = {
   "rec-none": "var(--recursica_brand_dimensions_general_none)",
   "rec-sm": "var(--recursica_brand_dimensions_general_sm)",
   "rec-default": "var(--recursica_brand_dimensions_general_default)",
@@ -108,6 +108,22 @@ export type RecursicaOverStyled<T> =
       ForbiddenStyles & { overStyled?: false | undefined })
   | (T & { overStyled: true });
 
+export function mapLayoutProps<T extends Record<string, unknown>>(props: T): T {
+  const mapped = { ...props };
+  for (const [key, value] of Object.entries(mapped)) {
+    if (
+      typeof value === "string" &&
+      value.startsWith("rec-") &&
+      LAYOUT_PROPS.has(key)
+    ) {
+      if (value in SPACING_MAP) {
+        (mapped as Record<string, unknown>)[key] = SPACING_MAP[value];
+      }
+    }
+  }
+  return mapped;
+}
+
 export function filterStylingProps<T extends Record<string, unknown>>(
   props: T,
   overStyled?: boolean,