@recursica/mantine-adapter 0.23.0 → 0.26.0

package/src/components/DatePicker/DatePicker.tsx

@@ -9,6 +9,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./DatePicker.module.css";
 
+import { type RecursicaDatePickerProps as BaseRecursicaDatePickerProps } from "@recursica/adapter-common";
+
 export interface RecursicaDatePickerProps
   extends Omit<
       DatePickerInputProps,
@@ -31,7 +33,8 @@ export interface RecursicaDatePickerProps
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
     >,
-    ReadOnlyControlProps {}
+    ReadOnlyControlProps,
+    BaseRecursicaDatePickerProps {}
 
 export type DatePickerProps = RecursicaOverStyled<RecursicaDatePickerProps>;
 

package/src/components/Dropdown/Dropdown.tsx

@@ -12,6 +12,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Dropdown.module.css";
 
+import { type RecursicaDropdownProps as BaseRecursicaDropdownProps } from "@recursica/adapter-common";
+
 export interface RecursicaDropdownProps
   extends Omit<
       MantineSelectProps,
@@ -28,10 +30,8 @@ export interface RecursicaDropdownProps
       | "labelWithEditIcon"
       | "onLabelEditClick"
     >,
-    ReadOnlyControlProps {
-  /** Internal hook for Selects to override raw layout width properties when necessary */
-  containerWidth?: React.CSSProperties["width"];
-}
+    ReadOnlyControlProps,
+    BaseRecursicaDropdownProps {}
 
 export type DropdownProps = RecursicaOverStyled<RecursicaDropdownProps>;
 

package/src/components/Flex/Flex.tsx

@@ -4,21 +4,10 @@ import {
   type FlexProps as MantineFlexProps,
   createPolymorphicComponent,
 } from "@mantine/core";
-import {
-  type RecursicaSpacing,
-  mapLayoutProps,
-} from "../../utils/filterStylingProps";
+import { mapLayoutProps } from "../../utils/filterStylingProps";
 import styles from "./Flex.module.css";
 
-export interface RecursicaFlexProps {
-  /**
-   * Children components inside the Flex container
-   */
-  children?: React.ReactNode;
-  gap?: MantineFlexProps["gap"] | RecursicaSpacing;
-  rowGap?: MantineFlexProps["gap"] | RecursicaSpacing;
-  columnGap?: MantineFlexProps["gap"] | RecursicaSpacing;
-}
+import { type RecursicaFlexProps } from "@recursica/adapter-common";
 
 /**
  * Flex layout wrapper.

package/src/components/FormControlLayout/FormControlLayout.module.css

@@ -34,39 +34,27 @@
 /* Stacked Layout constraints */
 .root[data-form-layout="stacked"] .leftSection {
   padding-bottom: var(
-    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding,
-    var(
-      --recursica_ui-kit_globals_form_properties_label-field-gap-vertical,
-      8px
-    )
+    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_bottom-padding
   );
   min-height: var(
-    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height,
-    auto
+    --recursica_ui-kit_components_label_variants_layouts_stacked_properties_min-height
   );
 }
 
 /* SideBySide Layout constraints */
 .root[data-form-layout="side-by-side"] .leftSection {
   padding-top: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding,
-    0
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding
   );
   padding-bottom: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding,
-    0
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_vertical-padding
   );
   min-height: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_min-height,
-    auto
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_min-height
   );
   /* In side-by-side, the label column exists to the left of its input, so we use the gutter gap here. */
   margin-right: var(
-    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter,
-    var(
-      --recursica_ui-kit_globals_form_properties_label-field-gap-horizontal,
-      16px
-    )
+    --recursica_ui-kit_components_label_variants_layouts_side-by-side_properties_gutter
   );
 }
 

package/src/components/FormControlLayout/FormControlLayout.tsx

@@ -1,15 +1,11 @@
 import React, { forwardRef } from "react";
 import styles from "./FormControlLayout.module.css";
 
+import { type RecursicaFormControlLayoutProps } from "@recursica/adapter-common";
+
 export interface FormControlLayoutProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  formLayout?: "stacked" | "side-by-side";
-  labelSize?: "default" | "small" | "md";
-  controlMaxWidth?: string;
-  controlMinWidth?: string;
-  leftSection?: React.ReactNode;
-  children?: React.ReactNode;
-}
+  extends React.HTMLAttributes<HTMLDivElement>,
+    RecursicaFormControlLayoutProps {}
 
 /**
  * A layout component used to correctly position form inputs alongside their labels.

package/src/components/FormControlWrapper/FormControlWrapper.tsx

@@ -4,25 +4,12 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { Label, type RecursicaLabelProps } from "../Label/Label";
+import { Label } from "../Label/Label";
 import { FormControlLayout } from "../FormControlLayout/FormControlLayout";
 import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
 import styles from "./FormControlWrapper.module.css";
 
-export interface RecursicaFormControlWrapperProps extends RecursicaLabelProps {
-  /** Overall structural flow mapping the Form Control natively cascading down to Label and Input logic. */
-  formLayout?: "stacked" | "side-by-side";
-  /** Securely replaces standard Mantine descriptions safely providing standard Assistive properties. */
-  assistiveText?: React.ReactNode;
-  /** Explicit toggle to suppress the Info icon rendering natively alongside the assistiveText. Defaults to true. */
-  assistiveWithIcon?: boolean;
-  /** Custom action area to render alongside the label instead of the default edit icon. */
-  labelActionArea?: React.ReactNode;
-  /** Pass the native maximum width design variable dynamically bounding the specific wrapper width exclusively. */
-  controlMaxWidth: string | undefined;
-  /** Pass the native minimum width design variable dynamically bounding the specific wrapper width exclusively. */
-  controlMinWidth: string | undefined;
-}
+import { type RecursicaFormControlWrapperProps } from "@recursica/adapter-common";
 
 export type FormControlWrapperProps = RecursicaOverStyled<
   Omit<InputWrapperProps, "labelProps" | "inputWrapperOrder"> &

package/src/components/Group/Group.tsx

@@ -3,21 +3,10 @@ import {
   Group as MantineGroup,
   type GroupProps as MantineGroupProps,
 } from "@mantine/core";
-import {
-  type RecursicaSpacing,
-  mapLayoutProps,
-} from "../../utils/filterStylingProps";
+import { mapLayoutProps } from "../../utils/filterStylingProps";
 import styles from "./Group.module.css";
 
-export interface RecursicaGroupProps {
-  /**
-   * Children components inside the group
-   */
-  children?: React.ReactNode;
-  gap?: MantineGroupProps["gap"] | RecursicaSpacing;
-  rowGap?: MantineGroupProps["gap"] | RecursicaSpacing;
-  columnGap?: MantineGroupProps["gap"] | RecursicaSpacing;
-}
+import { type RecursicaGroupProps } from "@recursica/adapter-common";
 
 /**
  * Group flex layout wrapper.

package/src/components/HoverCard/HoverCard.tsx

@@ -17,14 +17,7 @@ import styles from "./HoverCard.module.css";
 /**
  * Recursica-specific props for HoverCard.
  */
-export interface RecursicaHoverCardProps {
-  /**
-   * Whether to display a beak (arrow) pointing from the dropdown to the target.
-   * This is the Recursica equivalent of Mantine's `withArrow`.
-   * When both `withBeak` and `withArrow` are provided, `withBeak` takes precedence.
-   */
-  withBeak?: boolean;
-}
+import { type RecursicaHoverCardProps } from "@recursica/adapter-common";
 
 /**
  * Recursica HoverCard component wrapping Mantine's composable HoverCard.

package/src/components/Label/Label.module.css

@@ -47,16 +47,13 @@
     --recursica_ui-kit_components_label_properties_label-text_line-height
   );
   font-style: var(
-    --recursica_ui-kit_components_label_properties_label-text_font-style,
-    normal
+    --recursica_ui-kit_components_label_properties_label-text_font-style
   );
   text-decoration: var(
-    --recursica_ui-kit_components_label_properties_label-text_text-decoration,
-    none
+    --recursica_ui-kit_components_label_properties_label-text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_label_properties_label-text_text-transform,
-    none
+    --recursica_ui-kit_components_label_properties_label-text_text-transform
   );
 }
 
@@ -105,12 +102,10 @@
     --recursica_ui-kit_components_label_properties_optional-text_font-style
   );
   text-decoration: var(
-    --recursica_ui-kit_components_label_properties_optional-text_text-decoration,
-    none
+    --recursica_ui-kit_components_label_properties_optional-text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_label_properties_optional-text_text-transform,
-    none
+    --recursica_ui-kit_components_label_properties_optional-text_text-transform
   );
   color: inherit;
   opacity: var(

package/src/components/Label/Label.tsx

@@ -6,20 +6,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Label.module.css";
 
-export interface RecursicaLabelProps {
-  /** Specifies the sizing metrics natively mapping the Label boundaries. */
-  labelSize?: "default" | "small" | "md";
-  /** Overall alignment directive for the label strings natively forcing Left/Right justification. */
-  labelAlignment?: "left" | "right";
-  /** Injects an indicator text block alongside the label. Can be boolean (`true` maps to '(Optional)') or custom React nodes. */
-  labelOptionalText?: boolean | React.ReactNode;
-  /** When true, forces the native Edit Icon to replace the standard asterisk visually. */
-  labelWithEditIcon?: boolean;
-  /** Custom action area to render alongside the label instead of the default edit icon. */
-  labelActionArea?: React.ReactNode;
-  /** Interaction hook invoked whenever a generated edit icon block natively triggers a click event. */
-  onLabelEditClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
+import { type RecursicaLabelProps } from "@recursica/adapter-common";
 
 export type LabelProps = RecursicaOverStyled<
   Omit<InputLabelProps, "size"> & RecursicaLabelProps

package/src/components/Link/Link.module.css

@@ -16,9 +16,8 @@ HARDCODED VALUES:
 */
 
 .root {
-  /* HARDCODE: base layout to support optional icon gaps */
-  display: inline-flex;
-  align-items: center;
+  /* HARDCODE: base layout */
+  display: inline;
   cursor: pointer;
 
   /* HARDCODE: Reset underline and color so we can explicitly use our tokens */
@@ -53,6 +52,8 @@ HARDCODED VALUES:
 }
 
 .root[data-has-icon] {
+  display: inline-flex;
+  align-items: center;
   gap: var(--recursica_ui-kit_components_link_properties_icon-text-gap);
 }
 

package/src/components/Link/Link.stories.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { Meta, StoryObj } from "@storybook/react";
 import { Link } from "./Link";
-import { Text } from "@mantine/core";
 
 const meta: Meta<typeof Link> = {
   title: "UI-Kit/Link",
@@ -52,8 +51,8 @@ export const Polymorphic: Story = {
 
 export const InlineText: Story = {
   render: () => (
-    <Text>
+    <p>
       Here is some text with an <Link href="#">inline link</Link> inside it.
-    </Text>
+    </p>
   ),
 };

package/src/components/Link/Link.tsx

@@ -10,16 +10,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Link.module.css";
 
-export interface RecursicaLinkProps {
-  /**
-   * Optional leading icon to display next to the link text.
-   */
-  icon?: React.ReactNode;
-  /**
-   * The text or elements to display inside the link.
-   */
-  children?: React.ReactNode;
-}
+import { type RecursicaLinkProps } from "@recursica/adapter-common";
 
 export type LinkProps = RecursicaOverStyled<
   Omit<MantineAnchorProps, "underline"> & RecursicaLinkProps

package/src/components/Loader/Loader.module.css

@@ -1,8 +1,7 @@
 .root {
   /* Default inheritance mapped from component variables if not explicitly overridden by variants */
   --loader-color: var(
-    --recursica_ui-kit_components_loader_properties_indicator-color,
-    currentColor
+    --recursica_ui-kit_components_loader_properties_indicator-color
   );
 }
 

package/src/components/Loader/Loader.tsx

@@ -6,16 +6,10 @@ import {
 import {
   filterStylingProps,
   type RecursicaOverStyled,
-  type RecursicaSize,
 } from "../../utils/filterStylingProps";
 import styles from "./Loader.module.css";
 
-export interface RecursicaLoaderProps {
-  /** Map to the component styles defined in variables */
-  variant?: "oval" | "bars" | "dots";
-  /** Map to Recursica sizes */
-  size?: "sm" | "md" | "lg" | RecursicaSize;
-}
+import { type RecursicaLoaderProps } from "@recursica/adapter-common";
 
 export type LoaderProps = RecursicaOverStyled<
   Omit<MantineLoaderProps, "variant" | "size" | "type"> & RecursicaLoaderProps

package/src/components/Menu/Menu.tsx

@@ -18,6 +18,8 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Menu.module.css";
 
+import { type RecursicaMenuProps } from "@recursica/adapter-common";
+
 // ============================================================
 // MENU ROOT
 // ============================================================
@@ -38,7 +40,9 @@ import styles from "./Menu.module.css";
  * </Menu>
  * ```
  */
-export type MenuProps = RecursicaOverStyled<MantineMenuProps>;
+export type MenuProps = RecursicaOverStyled<
+  MantineMenuProps & RecursicaMenuProps
+>;
 
 const MenuBase = function Menu({ overStyled = false, ...rest }: MenuProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);

package/src/components/Modal/Modal.tsx

@@ -9,13 +9,15 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Modal.module.css";
 
+import { type RecursicaModalProps } from "@recursica/adapter-common";
+
 /**
  * Properties for the strictly-tokenized Modal component.
  * Native Mantine abstract properties like `size`, `radius`, and `shadow` have been stripped out
  * because they directly conflict with the non-negotiable pixel boundaries defined in the Recursica UI Kit.
  */
 export type ModalProps = RecursicaOverStyled<
-  Omit<MantineModalProps, "size" | "radius" | "shadow">
+  Omit<MantineModalProps, "size" | "radius" | "shadow"> & RecursicaModalProps
 >;
 
 /**

package/src/components/NumberInput/NumberInput.tsx

@@ -12,6 +12,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./NumberInput.module.css";
 
+import { type RecursicaNumberInputProps as BaseRecursicaNumberInputProps } from "@recursica/adapter-common";
+
 export interface RecursicaNumberInputProps
   extends Omit<
       MantineNumberInputProps,
@@ -28,10 +30,8 @@ export interface RecursicaNumberInputProps
       | "labelWithEditIcon"
       | "onLabelEditClick"
     >,
-    ReadOnlyControlProps {
-  /** Enables/disables the controls to increment and decrement the value */
-  hideControls?: boolean;
-}
+    ReadOnlyControlProps,
+    BaseRecursicaNumberInputProps {}
 
 export type NumberInputProps = RecursicaOverStyled<RecursicaNumberInputProps>;
 

package/src/components/Pagination/Pagination.module.css

@@ -98,42 +98,33 @@
 
   /* Typography */
   font-family: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family,
-    var(--recursica_brand_fonts_primary)
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size,
-    var(--recursica_brand_dimensions_text-size_default)
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style,
-    normal
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight,
-    500
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing,
-    0
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height,
-    1.5
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration,
-    none
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform,
-    none
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform
   );
 
   /* Dimensions */
   border-radius: var(
-    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius,
-    4px
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius
   );
   height: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_height
@@ -192,8 +183,7 @@
 
 .control:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
   );
 }
 
@@ -270,8 +260,7 @@
 }
 .control[data-variant="text"]:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
   );
 }
 
@@ -296,8 +285,7 @@
   display: flex;
   align-items: center;
   gap: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap,
-    4px
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap
   );
 }
 

package/src/components/Pagination/Pagination.stories.tsx

@@ -40,14 +40,6 @@ export const WithEdges: Story = {
   },
 };
 
-export const Compositional: Story = {
-  render: () => (
-    <Pagination.Root total={10}>
-      <Pagination.Items />
-    </Pagination.Root>
-  ),
-};
-
 export const WithTextLabels: Story = {
   args: {
     withEdges: true,

package/src/components/Pagination/Pagination.tsx

@@ -18,10 +18,11 @@ import {
   PaginationIcon,
 } from "./Pagination.icons";
 
-export type PaginationProps = RecursicaOverStyled<MantinePaginationProps> & {
-  /** If set to true, displays text labels alongside the icons for next/previous/first/last edges. */
-  withLabels?: boolean;
-};
+import { type RecursicaPaginationProps } from "@recursica/adapter-common";
+
+export type PaginationProps = RecursicaOverStyled<
+  MantinePaginationProps & RecursicaPaginationProps
+>;
 
 export type PaginationRootProps =
   RecursicaOverStyled<MantinePaginationRootProps>;

package/src/components/Panel/Panel.tsx

@@ -13,14 +13,7 @@ import styles from "./Panel.module.css";
 // PANEL (Drawer)
 // ============================================================
 
-export interface RecursicaPanelProps extends MantineDrawerProps {
-  /**
-   * If true, forces the header text to a single line and truncates with an ellipsis.
-   * Note: While the prop is named `wrapHeaderText` for backward compatibility,
-   * setting it to `true` actually PREVENTS wrapping (it forces truncation).
-   */
-  wrapHeaderText?: boolean;
-}
+import { type RecursicaPanelProps } from "@recursica/adapter-common";
 
 /**
  * Recursica Panel root props. Extends Mantine Drawer.

package/src/components/Popover/Popover.tsx

@@ -17,14 +17,7 @@ import styles from "./Popover.module.css";
 /**
  * Recursica-specific props for Popover.
  */
-export interface RecursicaPopoverProps {
-  /**
-   * Whether to display a beak (arrow) pointing from the dropdown to the target.
-   * This is the Recursica equivalent of Mantine's `withArrow`.
-   * When both `withBeak` and `withArrow` are provided, `withBeak` takes precedence.
-   */
-  withBeak?: boolean;
-}
+import { type RecursicaPopoverProps } from "@recursica/adapter-common";
 
 /**
  * Recursica Popover component wrapping Mantine's composable Popover.

package/src/components/Radio/Radio.module.css

@@ -12,15 +12,13 @@
 /* --- GROUP STYLES --- */
 .groupRoot {
   padding: var(
-    --recursica_ui-kit_components_radio-button-group_properties_padding,
-    0
+    --recursica_ui-kit_components_radio-button-group_properties_padding
   );
   margin: 0; /* HARDCODE: structural reset; consider token if layout needs change */
   display: flex;
   flex-direction: column;
   gap: var(
-    --recursica_ui-kit_components_radio-button-group_properties_item-gap,
-    16px
+    --recursica_ui-kit_components_radio-button-group_properties_item-gap
   );
 }
 
@@ -49,10 +47,7 @@
 .groupRoot[data-layout="stacked"] {
   flex-direction: column;
   margin-top: var(
-    --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_label-field-gap,
-    var(
-      --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
-    )
+    --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_label-field-gap
   );
   margin-bottom: var(
     --recursica_ui-kit_components_radio-button-group_variants_layouts_stacked_properties_top-bottom-margin
@@ -214,7 +209,6 @@
     --recursica_ui-kit_components_radio-button-item_properties_colors_disabled-text
   );
   opacity: var(
-    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity,
-    var(--recursica_ui-kit_components_radio-button_properties_disabled-opacity)
+    --recursica_ui-kit_components_radio-button-item_properties_disabled-opacity
   );
 }

package/src/components/Radio/Radio.tsx

@@ -9,7 +9,10 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  type RequireAccessibleLabel,
+  type RecursicaRadioProps,
+} from "@recursica/adapter-common";
 import {
   FormControlLayout,
   type FormControlLayoutProps,
@@ -32,19 +35,21 @@ const RadioIcon: React.FC<{
   </svg>
 );
 
-export type RecursicaRadioProps = RequireAccessibleLabel<
-  Omit<
-    MantineRadioProps,
-    "size" | "color" | "radius" | "iconColor" | "variant"
-  > &
-    ReadOnlyControlProps &
-    Pick<
-      FormControlLayoutProps,
-      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
-    >
->;
-
-export type RadioProps = RecursicaOverStyled<RecursicaRadioProps>;
+export type RadioWrapperProps = Omit<
+  MantineRadioProps,
+  "size" | "color" | "radius" | "iconColor" | "variant"
+> &
+  RecursicaRadioProps &
+  ReadOnlyControlProps &
+  Pick<
+    FormControlLayoutProps,
+    "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+  >;
+
+export type RecursicaRadioPropsAlias =
+  RequireAccessibleLabel<RadioWrapperProps>;
+
+export type RadioProps = RecursicaOverStyled<RecursicaRadioPropsAlias>;
 
 type RadioComponent = React.ForwardRefExoticComponent<
   RadioProps & React.RefAttributes<HTMLInputElement>