@recursica/mantine-adapter 0.50.1 → 0.50.4

package/src/components/NumberInput/NumberInput.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future NumberInput component tests. Add tests here if/when needed.

package/src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Pagination component tests. Add tests here if/when needed.

package/src/components/Panel/Panel.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Panel component tests. Add tests here if/when needed.

package/src/components/Popover/Popover.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Popover component tests. Add tests here if/when needed.

package/src/components/Radio/Radio.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Radio component tests. Add tests here if/when needed.

package/src/components/ReadOnlyField/ReadOnlyField.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future ReadOnlyField component tests. Add tests here if/when needed.

package/src/components/SegmentedControl/SegmentedControl.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future SegmentedControl component tests. Add tests here if/when needed.

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Slider component tests. Add tests here if/when needed.

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Stack component tests. Add tests here if/when needed.

package/src/components/Stack/Stack.tsx

@@ -10,18 +10,18 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Stack.module.css";
 
-import { type RecursicaStackProps } from "@recursica/adapter-common";
-
 /**
  * Stack flex layout wrapper.
  *
  * Note: Unlike complex UI components, primitive layout components (Flex, Stack, Group, Container)
  * DO NOT use the `RecursicaOverStyled` gatekeeper. Developers must be able to freely pass
  * width, height, padding, margins, and flexbox alignment props to construct structural layouts.
+ *
+ * No formal Recursica prop contract here: this simply passes through Mantine's own
+ * `StackProps` (gap/align/justify are all native to Mantine), layered only with rec-
+ * spacing token support via `WithRecursicaSpacing`.
  */
-export type StackProps = WithRecursicaSpacing<
-  MantineStackProps & RecursicaStackProps
->;
+export type StackProps = WithRecursicaSpacing<MantineStackProps>;
 
 const _Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
   { children, gap = "rec-default", ...rest },

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Stepper component tests. Add tests here if/when needed.

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Switch component tests. Add tests here if/when needed.

package/src/components/Table/Table.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Table component tests. Add tests here if/when needed.

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Tabs component tests. Add tests here if/when needed.

package/src/components/Text/Text.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "./Text";
-import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof Text> = {
   title: "UI-Kit/Text",
@@ -46,25 +45,13 @@ export const Default: Story = {
     children:
       "This is standard body typography controlled by the central UI-kit boundaries exclusively.",
   },
-  render: ({ ...args }) => (
-    <Layer layer={0} style={{ padding: "48px" }}>
-      <Text {...args} />
-    </Layer>
-  ),
+  render: ({ ...args }) => <Text {...args} />,
 };
 
 export const StaticVariations: Story = {
   args: {},
   render: () => (
-    <Layer
-      layer={0}
-      style={{
-        padding: "48px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
-      }}
-    >
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
       <Text variant="body">
         Body (Base paragraph and generic information flow)
       </Text>
@@ -83,6 +70,6 @@ export const StaticVariations: Story = {
       <Text variant="subtitle-small">
         Subtitle Small (Section anchors deep in hierarchy)
       </Text>
-    </Layer>
+    </div>
   ),
 };

package/src/components/Text/Text.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Text component tests. Add tests here if/when needed.

package/src/components/TextArea/TextArea.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future TextArea component tests. Add tests here if/when needed.

package/src/components/TextField/TextField.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future TextField component tests. Add tests here if/when needed.

package/src/components/TimePicker/TimePicker.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future TimePicker component tests. Add tests here if/when needed.

package/src/components/Timeline/Timeline.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Timeline component tests. Add tests here if/when needed.

package/src/components/Title/Title.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Title } from "./Title";
-import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof Title> = {
   title: "UI-Kit/Title",
@@ -33,31 +32,19 @@ export const Default: Story = {
     order: 1,
     children: "Semantic H1 Document Boundary",
   },
-  render: ({ ...args }) => (
-    <Layer layer={0} style={{ padding: "48px" }}>
-      <Title {...args} />
-    </Layer>
-  ),
+  render: ({ ...args }) => <Title {...args} />,
 };
 
 export const StaticVariations: Story = {
   args: {},
   render: () => (
-    <Layer
-      layer={0}
-      style={{
-        padding: "48px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-      }}
-    >
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
       <Title order={1}>H1 Title</Title>
       <Title order={2}>H2 Title</Title>
       <Title order={3}>H3 Title</Title>
       <Title order={4}>H4 Title</Title>
       <Title order={5}>H5 Title</Title>
       <Title order={6}>H6 Title</Title>
-    </Layer>
+    </div>
   ),
 };

package/src/components/Title/Title.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Title component tests. Add tests here if/when needed.

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Toast component tests. Add tests here if/when needed.

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Tooltip component tests. Add tests here if/when needed.

package/src/components/TransferList/TransferList.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future TransferList component tests. Add tests here if/when needed.

package/src/components/Tree/Tree.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Tree component tests. Add tests here if/when needed.

package/src/utils/filterStylingProps.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import {
+  BLOCKED_STYLING_KEYS,
+  SPACING_MAP,
+  filterStylingProps,
+  mapLayoutProps,
+} from "./filterStylingProps";
+
+describe("filterStylingProps", () => {
+  it("strips every blocked styling key by default", () => {
+    const props = Object.fromEntries(
+      BLOCKED_STYLING_KEYS.map((key) => [key, "should-be-removed"]),
+    );
+
+    const sanitized = filterStylingProps(props);
+
+    for (const key of BLOCKED_STYLING_KEYS) {
+      expect(sanitized).not.toHaveProperty(key);
+    }
+  });
+
+  it("keeps props that aren't blocked styling keys", () => {
+    const sanitized = filterStylingProps({
+      disabled: true,
+      "aria-label": "Submit",
+    });
+
+    expect(sanitized).toEqual({ disabled: true, "aria-label": "Submit" });
+  });
+
+  it("keeps layout props (e.g. margin) untouched when not a rec- token", () => {
+    const sanitized = filterStylingProps({ m: "16px" });
+
+    expect(sanitized).toEqual({ m: "16px" });
+  });
+
+  it("maps rec- spacing tokens on layout props to their CSS variable", () => {
+    const sanitized = filterStylingProps({ m: "rec-lg", gap: "rec-sm" });
+
+    expect(sanitized).toEqual({
+      m: SPACING_MAP["rec-lg"],
+      gap: SPACING_MAP["rec-sm"],
+    });
+  });
+
+  it("does not map rec- tokens on props that aren't layout props", () => {
+    const sanitized = filterStylingProps({ "data-testid": "rec-lg" });
+
+    expect(sanitized).toEqual({ "data-testid": "rec-lg" });
+  });
+
+  it("leaves an unrecognized rec- value alone", () => {
+    const sanitized = filterStylingProps({ m: "rec-not-a-real-token" });
+
+    expect(sanitized).toEqual({ m: "rec-not-a-real-token" });
+  });
+
+  it("bypasses all filtering when overStyled is true", () => {
+    const props = { className: "custom", bg: "red", m: "rec-lg" };
+
+    expect(filterStylingProps(props, true)).toEqual(props);
+  });
+
+  it("does not mutate the input props object", () => {
+    const props = { className: "custom", m: "rec-lg" };
+
+    filterStylingProps(props);
+
+    expect(props).toEqual({ className: "custom", m: "rec-lg" });
+  });
+});
+
+describe("mapLayoutProps", () => {
+  it("maps rec- spacing tokens on layout props", () => {
+    expect(mapLayoutProps({ mt: "rec-xl" })).toEqual({
+      mt: SPACING_MAP["rec-xl"],
+    });
+  });
+
+  it("leaves non-layout props untouched even if they look like a token", () => {
+    expect(mapLayoutProps({ variant: "rec-xl" })).toEqual({
+      variant: "rec-xl",
+    });
+  });
+});

package/src/utils/filterStylingProps.ts

@@ -84,6 +84,7 @@ const LAYOUT_PROPS = new Set([
   "gap",
   "rowGap",
   "columnGap",
+  "gutter",
   "top",
   "left",
   "bottom",