@recursica/mantine-adapter 0.26.0 → 0.27.0

package/dist/src/components/Text/Text.d.ts

@@ -1,6 +1,7 @@
+import { TextProps as MantineTextProps } from '@mantine/core';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaTextProps } from '@recursica/adapter-common';
-export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
+export type TextProps = RecursicaOverStyled<Omit<MantineTextProps, "variant"> & RecursicaTextProps>;
 /**
  * A generalized typographical wrapper limiting text properties to bounded Recursica UI-kit tokens inherently.
  * Do not use for semantic headings; use the explicit `<Title>` component for `<h1>` - `<h6>`.
@@ -14,7 +15,7 @@ export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
  */
 export declare const Text: (<C = "p">(props: import('@mantine/core').PolymorphicComponentProps<C, TextProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<((TextProps & {
     component?: any;
-}) & Omit<Omit<any, "ref">, "variant" | "children" | "overStyled" | "component"> & {
+}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "span" | "color" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "attributes" | "overStyled" | "inherit" | "inline" | "size" | "__staticSelector" | "component" | "gradient" | "lineClamp" | "truncate"> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (TextProps & {

package/dist/src/components/TextArea/TextArea.d.ts

@@ -3,7 +3,7 @@ import { TextareaProps as MantineTextareaProps } from '@mantine/core';
 import { ReadOnlyControlProps, RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-export interface RecursicaTextAreaProps extends Omit<MantineTextareaProps, "size" | "variant" | "radius" | "wrapperProps">, Pick<RecursicaFormControlWrapperProps, "assistiveText" | "assistiveWithIcon" | "formLayout" | "labelSize" | "labelAlignment" | "labelOptionalText" | "labelWithEditIcon" | "onLabelEditClick">, ReadOnlyControlProps, BaseRecursicaTextAreaProps {
+export interface RecursicaTextAreaProps extends Omit<MantineTextareaProps, "size" | "variant" | "radius" | "wrapperProps">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaTextAreaProps {
 }
 export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/src/components/TextField/TextField.d.ts

@@ -6,8 +6,4 @@ import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormCont
 export interface RecursicaTextFieldProps extends Omit<InputProps, "size" | "variant" | "radius" | "wrapperProps">, Pick<InputWrapperProps, "label" | "error" | "required" | "withAsterisk" | "id">, Omit<React.ComponentPropsWithoutRef<"input">, "size" | "style" | "className" | "id">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaTextFieldProps {
 }
 export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;
-export declare const TextField: React.ForwardRefExoticComponent<(Omit<Omit<RecursicaTextFieldProps, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
-    overStyled?: false | undefined;
-}, "ref"> | Omit<RecursicaTextFieldProps & {
-    overStyled: true;
-}, "ref">) & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/Title/Title.d.ts

@@ -1,6 +1,7 @@
+import { TitleProps as MantineTitleProps } from '@mantine/core';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaTitleProps } from '@recursica/adapter-common';
-export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
+export type TitleProps = RecursicaOverStyled<Omit<MantineTitleProps, "size"> & RecursicaTitleProps>;
 /**
  * Enforces highly accessible structural markup utilizing semantic `<h1>` through `<h6>` tags securely bound directly to Recursica typographic scales.
  */

package/dist/src/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from '@recursica/adapter-common';
+export type { RecursicaCheckboxGroupProps, RecursicaDatePickerProps, RecursicaDropdownProps, RecursicaNumberInputProps, RecursicaRadioGroupProps, RecursicaReadOnlyFieldProps, RecursicaReadOnlyTextFieldProps, RecursicaSliderProps, RecursicaSwitchGroupProps, RecursicaTextAreaProps, RecursicaTextFieldProps, } from './components';

package/dist/src/utils/filterStylingProps.d.ts

@@ -22,7 +22,7 @@
  * @returns Sanitized component props safe for internal styling merging
  */
 export declare const BLOCKED_STYLING_KEYS: readonly ["className", "classNames", "style", "styles", "vars", "p", "px", "py", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "bd", "bdw", "bds", "bdc", "bdr", "shadow", "w", "miw", "maw", "h", "mih", "mah"];
-export { type RecursicaSpacing, type RecursicaSize, type RecursicaOverStyled, type BlockedStylingKeys, type ForbiddenStyles, } from '@recursica/adapter-common';
+export { type RecursicaSpacing, type RecursicaSize, type RecursicaOverStyled, type BlockedStylingKeys, type ForbiddenStyles, type WithRecursicaSpacing, } from '@recursica/adapter-common';
 export declare const SPACING_MAP: Record<string, string>;
 export declare function mapLayoutProps<T extends Record<string, unknown>>(props: T): T;
 export declare function filterStylingProps<T extends Record<string, unknown>>(props: T, overStyled?: boolean): Partial<T>;

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.26.0",
+  "version": "0.27.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",
@@ -58,7 +58,6 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.1",
     "@eslint/js": "^9.25.0",
-    "@recursica/adapter-common": "*",
     "@recursica/recursica-postcss-vars": "*",
     "@recursica/storybook-template": "*",
     "@recursica/token-analyzer": "*",
@@ -93,6 +92,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@recursica/adapter-common": "*",
     "@recursica/official-release": "*"
   },
   "peerDependencies": {

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Accordion as MantineAccordion,
   type AccordionProps as MantineAccordionProps,

package/src/components/AutoComplete/AutoComplete.tsx

@@ -18,7 +18,13 @@ import { type RecursicaAutocompleteProps as BaseRecursicaAutocompleteProps } fro
 export interface RecursicaAutoCompleteProps
   extends Omit<
       MantineAutocompleteProps,
-      "size" | "variant" | "radius" | "wrapperProps"
+      | "size"
+      | "variant"
+      | "radius"
+      | "wrapperProps"
+      | "data"
+      | "defaultValue"
+      | "value"
     >,
     Pick<
       InputWrapperProps,
@@ -29,7 +35,10 @@ export interface RecursicaAutoCompleteProps
       "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
-    BaseRecursicaAutocompleteProps {}
+    BaseRecursicaAutocompleteProps {
+  /** Current input value */
+  value?: string;
+}
 
 export type AutoCompleteProps = RecursicaOverStyled<RecursicaAutoCompleteProps>;
 
@@ -140,8 +149,8 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
             ref={ref}
             classNames={mergedClassNames}
             disabled={disabled}
-            value={value}
-            defaultValue={defaultValue}
+            value={value as any}
+            defaultValue={defaultValue as any}
             wrapperProps={{
               "data-disabled": disabled ? "true" : undefined,
               "data-error": error ? "true" : undefined,

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Avatar as MantineAvatar,
   type AvatarProps as MantineAvatarProps,

package/src/components/Card/CARD_IMPLEMENTATION_NOTES.md

@@ -8,3 +8,10 @@ Because Mantine natively constructs `Card` bounding boxes with generic inner `<C
 - `<Card.Footer>` explicitly hooks `--recursica_ui-kit_components_card_properties_footer-background` and corresponding padding variables.
 
 Mantine's generic `<Card.Section>` calculates negative margins implicitly. Because of this, it is crucial that our local CSS module declares `--card-padding: var(--recursica_ui-kit_components_card_properties_padding)` directly on `.root` so that all generic or explicit section wrappers natively stretch across the bounding box properly.
+
+## Layout Alignment Exceptions
+
+To allow Cards to fit cleanly inside dynamic/flex layouts (like dashboard panels, grid tracks, or sidebar layout segments), the Card wrapper implements a custom gatekeeper bypass for outer styling properties:
+
+- Exposes a safe subset of flexbox/dimensions styling properties (`flex`, `flexGrow`, `flexShrink`, `flexBasis`, `grow`, `h`, `height`) on the root `<Card>` component to allow proper sizing alongside layout siblings.
+- Sets `<Card.Content>` to `flex-grow: 1;` by default via CSS modules. Since the root `<Card>` has `display: flex; flex-direction: column;`, this makes the content area expand to fill all vertical space, pushing `<Card.Footer>` to align at the absolute bottom of the bounding box.

package/src/components/Card/Card.module.css

@@ -89,6 +89,7 @@
   flex-direction: column;
   gap: var(--recursica_ui-kit_components_card_properties_vertical-gutter);
   padding: 0;
+  flex-grow: 1;
 
   /* Direct Figma Typography Mapping */
   font-family: var(

package/src/components/Card/Card.tsx

@@ -19,7 +19,15 @@ import {
 // ==== CARD CONTAINER ====
 export type CardProps = RecursicaOverStyled<
   MantineCardProps & RecursicaCardProps
->;
+> & {
+  flex?: string | number;
+  flexGrow?: string | number;
+  flexShrink?: string | number;
+  flexBasis?: string | number;
+  grow?: string | number;
+  h?: string | number;
+  height?: string | number;
+};
 
 /**
  * The root Card elevation box. It establishes the global background color, border radius, nested component gap, and outer shadow governed by the current `Layer` context.
@@ -30,6 +38,22 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
+  // Expose outer layout/flexbox properties on Card to allow structuring alongside siblings
+  const safeCardLayoutKeys = [
+    "flex",
+    "flexGrow",
+    "flexShrink",
+    "flexBasis",
+    "grow",
+    "h",
+    "height",
+  ] as const;
+  safeCardLayoutKeys.forEach((key) => {
+    if (key in rest && !(key in sanitizedProps)) {
+      (sanitizedProps as any)[key] = (rest as any)[key];
+    }
+  });
+
   const mergedClassNames: Partial<Record<string, string>> = {
     root: styles.root,
   };

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -16,7 +16,10 @@ import styles from "./Checkbox.module.css";
 import { type RecursicaCheckboxGroupProps as BaseRecursicaCheckboxGroupProps } from "@recursica/adapter-common";
 
 export interface RecursicaCheckboxGroupProps
-  extends Omit<MantineCheckboxGroupProps, "size" | "labelProps">,
+  extends Omit<
+      MantineCheckboxGroupProps,
+      "size" | "labelProps" | "defaultValue" | "value" | "onChange"
+    >,
     Omit<
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
@@ -99,8 +102,8 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
             /* Natively bind local disabled lock dynamically */
             {...(sanitizedProps as unknown as MantineCheckboxGroupProps)}
             disabled={readOnly || (restRecord as any).disabled}
-            value={value}
-            defaultValue={defaultValue}
+            value={value as any}
+            defaultValue={defaultValue as any}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
               {children}

package/src/components/Container/Container.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import styles from "./Container.module.css";
 
+import { type WithRecursicaSpacing } from "../../utils/filterStylingProps";
 import { type RecursicaContainerProps } from "@recursica/adapter-common";
 
 /**
@@ -14,8 +15,9 @@ import { type RecursicaContainerProps } from "@recursica/adapter-common";
  * 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.
  */
-export type ContainerProps = Omit<MantineContainerProps, "size"> &
-  RecursicaContainerProps;
+export type ContainerProps = WithRecursicaSpacing<
+  Omit<MantineContainerProps, "size"> & RecursicaContainerProps
+>;
 
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   function Container({ children, size, ...rest }, ref) {

package/src/components/DatePicker/DatePicker.tsx

@@ -38,7 +38,7 @@ export interface RecursicaDatePickerProps
 
 export type DatePickerProps = RecursicaOverStyled<RecursicaDatePickerProps>;
 
-export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
+export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
   function DatePicker(props, ref) {
     const {
       overStyled = false,
@@ -148,9 +148,7 @@ export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
             ref={ref}
             classNames={mergedClassNames}
             disabled={disabled}
-            // @ts-expect-error Mantine 8 DatePickerInput types are overly complex for unified wrappers
             value={value}
-            // @ts-expect-error Mantine 8 DatePickerInput types are overly complex for unified wrappers
             defaultValue={defaultValue}
             label={undefined} // Disable Mantine's native label
             description={undefined} // Disable Mantine's native description

package/src/components/Dropdown/Dropdown.tsx

@@ -17,18 +17,11 @@ import { type RecursicaDropdownProps as BaseRecursicaDropdownProps } from "@recu
 export interface RecursicaDropdownProps
   extends Omit<
       MantineSelectProps,
-      "size" | "variant" | "radius" | "wrapperProps"
+      "size" | "variant" | "radius" | "wrapperProps" | "data"
     >,
-    Pick<
+    Omit<
       RecursicaFormControlWrapperProps,
-      | "assistiveText"
-      | "assistiveWithIcon"
-      | "formLayout"
-      | "labelSize"
-      | "labelAlignment"
-      | "labelOptionalText"
-      | "labelWithEditIcon"
-      | "onLabelEditClick"
+      "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
     BaseRecursicaDropdownProps {}
@@ -157,7 +150,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             disabled={disabled}
             value={value}
             defaultValue={defaultValue}
-            data={data || []}
+            data={(data as any) || []}
             label={undefined}
             description={undefined}
             error={undefined}

package/src/components/Flex/Flex.tsx

@@ -4,7 +4,10 @@ import {
   type FlexProps as MantineFlexProps,
   createPolymorphicComponent,
 } from "@mantine/core";
-import { mapLayoutProps } from "../../utils/filterStylingProps";
+import {
+  mapLayoutProps,
+  type WithRecursicaSpacing,
+} from "../../utils/filterStylingProps";
 import styles from "./Flex.module.css";
 
 import { type RecursicaFlexProps } from "@recursica/adapter-common";
@@ -16,7 +19,9 @@ import { type RecursicaFlexProps } from "@recursica/adapter-common";
  * 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.
  */
-export type FlexProps = MantineFlexProps & RecursicaFlexProps;
+export type FlexProps = WithRecursicaSpacing<
+  MantineFlexProps & RecursicaFlexProps
+>;
 
 const _Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
   { children, gap = "rec-default", rowGap, columnGap, ...rest },

package/src/components/FormControlWrapper/FormControlWrapper.tsx

@@ -10,6 +10,7 @@ import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
 import styles from "./FormControlWrapper.module.css";
 
 import { type RecursicaFormControlWrapperProps } from "@recursica/adapter-common";
+export type { RecursicaFormControlWrapperProps };
 
 export type FormControlWrapperProps = RecursicaOverStyled<
   Omit<InputWrapperProps, "labelProps" | "inputWrapperOrder"> &

package/src/components/Group/Group.tsx

@@ -3,7 +3,10 @@ import {
   Group as MantineGroup,
   type GroupProps as MantineGroupProps,
 } from "@mantine/core";
-import { mapLayoutProps } from "../../utils/filterStylingProps";
+import {
+  mapLayoutProps,
+  type WithRecursicaSpacing,
+} from "../../utils/filterStylingProps";
 import styles from "./Group.module.css";
 
 import { type RecursicaGroupProps } from "@recursica/adapter-common";
@@ -15,7 +18,9 @@ import { type RecursicaGroupProps } from "@recursica/adapter-common";
  * 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.
  */
-export type GroupProps = MantineGroupProps & RecursicaGroupProps;
+export type GroupProps = WithRecursicaSpacing<
+  MantineGroupProps & RecursicaGroupProps
+>;
 
 export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
   { children, gap = "rec-default", ...rest },

package/src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Anchor as MantineAnchor,
   type AnchorProps as MantineAnchorProps,
@@ -13,7 +13,7 @@ import styles from "./Link.module.css";
 import { type RecursicaLinkProps } from "@recursica/adapter-common";
 
 export type LinkProps = RecursicaOverStyled<
-  Omit<MantineAnchorProps, "underline"> & RecursicaLinkProps
+  Omit<MantineAnchorProps, "underline"> & Omit<RecursicaLinkProps, "component">
 >;
 
 const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
@@ -49,7 +49,7 @@ const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
       classNames={mergedClassNames}
       underline="never"
       {...(icon ? { "data-has-icon": "" } : {})}
-      {...sanitizedProps}
+      {...(sanitizedProps as any)}
     >
       {icon && (
         <span className={styles.iconWrapper} aria-hidden>

package/src/components/Panel/PANEL_IMPLEMENTATION_NOTES.md

@@ -55,11 +55,11 @@ Other stylesNames (`overlay`, `root`, `inner`, `close`) are left to Mantine defa
 
 ---
 
-## 4. Default Position Override
+## 4. Default Placement Override
 
-**Decision:** Recursica defaults `position` to `"right"`. Mantine defaults to `"left"`.
+**Decision:** Use `placement` instead of `position` for configuring slide-out direction, and default it to `"right"`.
 
-**Implementation:** The `position="right"` default is set before the prop spread, so developer-provided `position` values still take precedence. Right-side panels are the most common pattern for supplementary content, settings, and detail views.
+**Implementation:** The prop was renamed from `position` to `placement` to prevent collision with the CSS `position` keyword, which is strictly blocked by the styling gatekeeper (`BLOCKED_STYLING_KEYS`). This allows configuring the drawer direction natively while maintaining strict design-system boundaries. The `placement="right"` default is mapped internally to Mantine Drawer's `position` prop before any other sanitized props are applied. Right-side panels are the most common pattern for supplementary content, settings, and detail views.
 
 ---
 

package/src/components/Panel/Panel.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta = {
   component: Panel,
   tags: ["autodocs"],
   argTypes: {
-    position: {
+    placement: {
       control: "select",
       options: ["left", "right", "top", "bottom"],
       description: "Side of the screen the panel slides in from.",
@@ -58,7 +58,7 @@ The \`Panel\` component slides in or expands from the edge of the screen to reve
 const [opened, { open, close }] = useDisclosure(false);
 
 <Button onClick={open}>Open Panel</Button>
-<Panel opened={opened} onClose={close} title="Settings" position="right">
+<Panel opened={opened} onClose={close} title="Settings" placement="right">
   Content goes here
   <Panel.Footer>
     <Button variant="outline">Cancel</Button>
@@ -78,7 +78,7 @@ type Story = StoryObj<PanelStoryArgs>;
 
 export const Default: Story = {
   args: {
-    position: "right",
+    placement: "right",
     title: "Panel Title",
     withOverlay: true,
     withCloseButton: true,
@@ -98,7 +98,7 @@ export const Default: Story = {
           opened={opened}
           onClose={() => setOpened(false)}
           title="Panel Title"
-          position="right"
+          placement="right"
           wrapHeaderText={wrapHeaderText}
         >
           <Text>
@@ -118,9 +118,9 @@ export const Default: Story = {
   },
 };
 
-export const LeftPosition: Story = {
+export const LeftPlacement: Story = {
   args: {
-    position: "left",
+    placement: "left",
     title: "Navigation",
     withOverlay: true,
     withCloseButton: true,
@@ -153,7 +153,7 @@ export const LeftPosition: Story = {
 
 export const ScrollableContent: Story = {
   args: {
-    position: "right",
+    placement: "right",
     title: "Scrollable Panel",
     withOverlay: true,
     withCloseButton: true,
@@ -195,7 +195,7 @@ export const ScrollableContent: Story = {
 
 export const LongTitle: Story = {
   args: {
-    position: "right",
+    placement: "right",
     title:
       "This is a ridiculously long panel title designed to test how the header CSS handles text overflow and whether it truncates correctly or breaks the layout",
     withOverlay: true,

package/src/components/Panel/Panel.tsx

@@ -13,11 +13,18 @@ import styles from "./Panel.module.css";
 // PANEL (Drawer)
 // ============================================================
 
-import { type RecursicaPanelProps } from "@recursica/adapter-common";
+import { type RecursicaPanelProps as BaseRecursicaPanelProps } from "@recursica/adapter-common";
 
 /**
  * Recursica Panel root props. Extends Mantine Drawer.
  */
+export interface RecursicaPanelProps
+  extends Omit<
+      MantineDrawerProps,
+      "size" | "styles" | "classNames" | "style" | "position"
+    >,
+    BaseRecursicaPanelProps {}
+
 export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
 
 /**
@@ -29,7 +36,7 @@ export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
  * cluttering the main interface.
  *
  * ```tsx
- * <Panel opened={opened} onClose={close} title="Panel Title" position="right">
+ * <Panel opened={opened} onClose={close} title="Panel Title" placement="right">
  *   <Panel.Body>
  *     Content goes here
  *   </Panel.Body>
@@ -48,7 +55,7 @@ export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
  */
 const PanelBase = function Panel({
   overStyled = false,
-  position = "right",
+  placement = "right",
   keepMounted = true,
   wrapHeaderText = false,
   ...rest
@@ -82,7 +89,7 @@ const PanelBase = function Panel({
 
   return (
     <MantineDrawer
-      position={position} /* Recursica default: right; Mantine default: left */
+      position={placement} /* Recursica default: right; Mantine default: left */
       keepMounted={keepMounted}
       closeOnClickOutside={rest.closeOnClickOutside ?? Boolean(rest.opened)}
       {...(sanitizedProps as unknown as MantineDrawerProps)}

package/src/components/Radio/RadioGroup.tsx

@@ -16,7 +16,10 @@ import styles from "./Radio.module.css";
 import { type RecursicaRadioGroupProps as BaseRecursicaRadioGroupProps } from "@recursica/adapter-common";
 
 export interface RecursicaRadioGroupProps
-  extends Omit<MantineRadioGroupProps, "size" | "labelProps">,
+  extends Omit<
+      MantineRadioGroupProps,
+      "size" | "labelProps" | "defaultValue" | "value" | "onChange"
+    >,
     Omit<
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
@@ -98,8 +101,8 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
             /* Natively bind local disabled lock dynamically */
             {...(sanitizedProps as unknown as MantineRadioGroupProps)}
             disabled={readOnly || (restRecord as any).disabled}
-            value={value}
-            defaultValue={defaultValue}
+            value={value as any}
+            defaultValue={defaultValue as any}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
               {children}

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -55,7 +55,11 @@ export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
       ? (Renderer as any).check(value)
       : EmptyValueRenderer.check(value);
 
-    const displayValue = isValueEmpty ? <Renderer value={value} /> : value;
+    const displayValue = isValueEmpty ? (
+      <Renderer value={value as any} />
+    ) : (
+      value
+    );
 
     switch (type) {
       case "boolean":

package/src/components/Stack/Stack.tsx

@@ -4,7 +4,10 @@ import {
   type StackProps as MantineStackProps,
   createPolymorphicComponent,
 } from "@mantine/core";
-import { mapLayoutProps } from "../../utils/filterStylingProps";
+import {
+  mapLayoutProps,
+  type WithRecursicaSpacing,
+} from "../../utils/filterStylingProps";
 import styles from "./Stack.module.css";
 
 import { type RecursicaStackProps } from "@recursica/adapter-common";
@@ -16,7 +19,9 @@ import { type RecursicaStackProps } from "@recursica/adapter-common";
  * 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.
  */
-export type StackProps = MantineStackProps & RecursicaStackProps;
+export type StackProps = WithRecursicaSpacing<
+  MantineStackProps & RecursicaStackProps
+>;
 
 const _Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
   { children, gap = "rec-default", ...rest },

package/src/components/Stepper/Stepper.tsx

@@ -11,7 +11,11 @@ import styles from "./Stepper.module.css";
 
 import { type RecursicaStepperProps } from "@recursica/adapter-common";
 
-export type StepperProps = RecursicaOverStyled<RecursicaStepperProps>;
+export interface RecursicaStepperPropsExtended
+  extends Omit<MantineStepperProps, "size">,
+    RecursicaStepperProps {}
+
+export type StepperProps = RecursicaOverStyled<RecursicaStepperPropsExtended>;
 
 const _Stepper = forwardRef<HTMLDivElement, StepperProps>(
   function Stepper(props, ref) {

package/src/components/Switch/SwitchGroup.tsx

@@ -16,7 +16,10 @@ import styles from "./Switch.module.css";
 import { type RecursicaSwitchGroupProps as BaseRecursicaSwitchGroupProps } from "@recursica/adapter-common";
 
 export interface RecursicaSwitchGroupProps
-  extends Omit<MantineSwitchGroupProps, "size" | "labelProps">,
+  extends Omit<
+      MantineSwitchGroupProps,
+      "size" | "labelProps" | "defaultValue" | "value" | "onChange"
+    >,
     Omit<
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
@@ -98,8 +101,8 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
             /* Natively bind local disabled lock dynamically */
             {...(sanitizedProps as unknown as MantineSwitchGroupProps)}
             disabled={readOnly || (restRecord as any).disabled}
-            value={value}
-            defaultValue={defaultValue}
+            value={value as any}
+            defaultValue={defaultValue as any}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
               {children}

package/src/components/Table/Table.module.css

@@ -0,0 +1,7 @@
+/* HARDCODED VALUES:
+ * None. This is a generic layout wrapper.
+ */
+
+.root {
+  /* Mantine Table handles table layout natively. */
+}