@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/Switch/SwitchGroup.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { forwardRef } from "react";
 import {
-  Switch as MuiSwitch,
-  type SwitchGroupProps as MuiSwitchGroupProps,
+  FormGroup as MuiFormGroup,
+  type FormGroupProps as MuiFormGroupProps,
 } from "@mui/material";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
@@ -13,13 +13,25 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Switch.module.css";
 
+import { type RecursicaSwitchGroupProps as BaseRecursicaSwitchGroupProps } from "@recursica/adapter-common";
+
 export interface RecursicaSwitchGroupProps
-  extends Omit<MuiSwitchGroupProps, "size" | "labelProps">,
+  extends Omit<
+      MuiFormGroupProps,
+      | "size"
+      | "labelProps"
+      | "onChange"
+      | "classes"
+      | "ref"
+      | "value"
+      | "defaultValue"
+    >,
     Omit<
       RecursicaFormControlWrapperProps,
-      "controlMaxWidth" | "controlMinWidth"
+      "controlMaxWidth" | "controlMinWidth" | "classes" | "onChange"
     >,
-    ReadOnlyControlProps {}
+    ReadOnlyControlProps,
+    BaseRecursicaSwitchGroupProps {}
 
 export type SwitchGroupProps = RecursicaOverStyled<RecursicaSwitchGroupProps>;
 
@@ -43,7 +55,7 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
       assistiveWithIcon,
       error,
       required,
-      withAsterisk,
+      // removed withAsterisk
       id,
       className,
       style,
@@ -53,6 +65,8 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
       emptyValueComponent,
       value,
       defaultValue,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onChange,
       ...rest
     } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -81,7 +95,6 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
         assistiveWithIcon={assistiveWithIcon}
         error={error}
         required={required}
-        withAsterisk={withAsterisk}
         id={id}
         readOnly={readOnly && !!readOnlyComponent}
         readOnlyComponent={readOnlyComponent}
@@ -90,22 +103,18 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
         readOnlyValue={value !== undefined ? value : defaultValue}
         readOnlyNativeProps={props}
         activeComponent={
-          <div
+          <MuiFormGroup
             ref={ref}
-            /* Natively bind local disabled lock dynamically */
-            {...(sanitizedProps as unknown as MuiSwitchGroupProps)}
-            disabled={readOnly || (restRecord as any).disabled}
-            value={value}
-            defaultValue={defaultValue}
+            {...(sanitizedProps as unknown as MuiFormGroupProps)}
+            className={`${styles.groupRoot} ${(sanitizedProps as any).className || ""}`.trim()}
+            data-layout={formLayout}
           >
-            <div className={styles.groupRoot} data-layout={formLayout}>
-              {children}
-            </div>
-          </div>
+            {children}
+          </MuiFormGroup>
         }
       />
     );
   },
 );
 
-const SwitchGroup = (() => {}) as any; // SwitchGroup.displayName = "SwitchGroup";
+SwitchGroup.displayName = "SwitchGroup";

package/src/components/Table/Table.stories.tsx

@@ -6,28 +6,10 @@ const meta: Meta<typeof Table> = {
   title: "UI-Kit/🚧 Table",
   component: Table,
   tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
-  },
 };
 
 export default meta;
+
 type Story = StoryObj<typeof Table>;
 
 export const Default: Story = {

package/src/components/Table/Table.tsx

@@ -1,6 +1,8 @@
 import React from "react";
+import { type RecursicaTableProps } from "@recursica/adapter-common";
 
-export type TableProps = React.HTMLAttributes<HTMLDivElement>;
+export type TableProps = React.HTMLAttributes<HTMLDivElement> &
+  RecursicaTableProps;
 
 export const Table: React.FC<TableProps> = (props) => {
   return <div {...props}>Table</div>;

package/src/components/Tabs/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,4 @@
+# Tabs Implementation Notes
+
+- **Compositional API Dropped:** Mantine uses `<Tabs.List>`, `<Tabs.Tab>`, and `<Tabs.Panel>` natively with implicit context from `<Tabs>`. MUI relies on `@mui/lab/TabContext` and separates `Tabs` and `TabPanel`.
+- **Monolithic API Adopted:** Following architectural review, we have opted to drop the broken dot-notation wrappers for `mui-adapter`. We now natively export `Tabs` (MUI List), `Tab` (MUI Item), and `TabPanel` (from `@mui/lab`). Developers must use `TabContext` (from `@mui/lab`) to manage state, just like native MUI. Storybook and visual regression tests have been updated to reflect this divergence while retaining core property mapping compatibility.

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,5 +1,7 @@
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tabs } from "./Tabs";
+import { Tabs, Tab, TabPanel } from "./Tabs";
+import { TabContext } from "@mui/lab";
 import { Flex } from "../Flex/Flex";
 
 const meta: Meta<typeof Tabs> = {
@@ -34,16 +36,26 @@ export default meta;
 type Story = StoryObj<typeof Tabs>;
 
 const InteractiveTabs = (
-  args: React.ComponentProps<typeof Tabs> & { disabled?: boolean },
+  args: React.ComponentProps<typeof Tabs> & {
+    disabled?: boolean;
+    inverted?: boolean;
+  },
 ) => {
+  const [value, setValue] = useState("gallery");
+
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+  };
+
   return (
     <Flex w={600} h={300}>
-      <Tabs defaultValue="gallery" {...args}>
-        <Tabs.List>
-          <Tabs.Tab
+      <TabContext value={value}>
+        <Tabs onChange={handleChange} {...args}>
+          <Tab
             value="gallery"
+            label="Gallery"
             disabled={args.disabled}
-            leftSection={
+            icon={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -52,19 +64,21 @@ const InteractiveTabs = (
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
+                width={16}
+                height={16}
               >
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                 <circle cx="8.5" cy="8.5" r="1.5"></circle>
                 <polyline points="21 15 16 10 5 21"></polyline>
               </svg>
             }
-          >
-            Gallery
-          </Tabs.Tab>
-          <Tabs.Tab
+            iconPosition="start"
+          />
+          <Tab
             value="messages"
+            label="Messages"
             disabled={args.disabled}
-            leftSection={
+            icon={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -73,17 +87,19 @@ const InteractiveTabs = (
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
+                width={16}
+                height={16}
               >
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
               </svg>
             }
-          >
-            Messages
-          </Tabs.Tab>
-          <Tabs.Tab
+            iconPosition="start"
+          />
+          <Tab
             value="settings"
+            label="Settings"
             disabled={args.disabled}
-            leftSection={
+            icon={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -92,22 +108,23 @@ const InteractiveTabs = (
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
+                width={16}
+                height={16}
               >
                 <circle cx="12" cy="12" r="3"></circle>
                 <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
               </svg>
             }
-          >
-            Settings
-          </Tabs.Tab>
-        </Tabs.List>
+            iconPosition="start"
+          />
+        </Tabs>
 
-        <Tabs.Panel value="gallery">Gallery tab content</Tabs.Panel>
+        <TabPanel value="gallery">Gallery tab content</TabPanel>
 
-        <Tabs.Panel value="messages">Messages tab content</Tabs.Panel>
+        <TabPanel value="messages">Messages tab content</TabPanel>
 
-        <Tabs.Panel value="settings">Settings tab content</Tabs.Panel>
-      </Tabs>
+        <TabPanel value="settings">Settings tab content</TabPanel>
+      </TabContext>
     </Flex>
   );
 };

package/src/components/Tabs/Tabs.tsx

@@ -2,8 +2,8 @@ import { forwardRef } from "react";
 import {
   Tabs as MuiTabs,
   type TabsProps as MuiTabsProps,
-  type ListProps as MuiTabsListProps,
-  type TabsProps as MuiTabsTabProps,
+  Tab as MuiTab,
+  type TabProps as MuiTabProps,
 } from "@mui/material";
 import {
   filterStylingProps,
@@ -11,95 +11,78 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Tabs.module.css";
 
-export interface RecursicaTabsProps
-  extends Omit<MuiTabsProps, "variant" | "classNames" | "color" | "radius"> {
-  variant?: "default" | "outline" | "pills";
-}
+import { type RecursicaTabsProps } from "@recursica/adapter-common";
 
 export type TabsProps = RecursicaOverStyled<RecursicaTabsProps>;
 
-const _Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {
-  const {
-    variant = "default",
-    orientation = "horizontal",
-    overStyled = false,
-    className,
-    ...rest
-  } = props;
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  function Tabs(props, ref) {
+    const {
+      variant = "default",
+      orientation = "horizontal",
+      overStyled = false,
+      className,
+      ...rest
+    } = props;
 
-  const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = filterStylingProps(rest, overStyled);
 
-  return (
-    <MuiTabs
-      ref={ref}
-      variant={variant}
-      orientation={orientation}
-      className={`${styles.root} ${className || ""}`}
-      data-variant={variant}
-      data-orientation={orientation}
-      classes={{
-        list: styles.list,
-        tab: styles.tab,
-        panel: styles.panel,
-      }}
-      {...(sanitizedProps as MuiTabsProps)}
-    />
-  );
-});
-
-_Tabs.displayName = "Tabs";
-
-export type TabsListProps = RecursicaOverStyled<MuiTabsListProps>;
-
-const _TabsList = forwardRef<HTMLDivElement, TabsListProps>(
-  function TabsList(props, ref) {
-    const { overStyled = false, ...rest } = props;
     return (
-      <div
+      <MuiTabs
         ref={ref}
-        {...(filterStylingProps(rest, overStyled) as MuiTabsListProps)}
+        orientation={orientation}
+        className={`${styles.root} ${className || ""}`}
+        data-variant={variant}
+        data-orientation={orientation}
+        classes={{
+          flexContainer: styles.list,
+          indicator: styles.indicator,
+        }}
+        {...(sanitizedProps as MuiTabsProps)}
       />
     );
   },
 );
-_TabsList.displayName = "Tabs.List";
 
-export type TabsTabProps = RecursicaOverStyled<MuiTabsTabProps>;
+Tabs.displayName = "Tabs";
+
+export type TabProps = RecursicaOverStyled<MuiTabProps>;
+
+export const Tab = forwardRef<HTMLDivElement, TabProps>(
+  function Tab(props, ref) {
+    const { overStyled = false, className, ...rest } = props;
+    const sanitizedProps = filterStylingProps(rest, overStyled);
 
-const _TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
-  function TabsTab(props, ref) {
-    const { overStyled = false, ...rest } = props;
     return (
-      <div
+      <MuiTab
         ref={ref}
-        {...(filterStylingProps(rest, overStyled) as MuiTabsTabProps)}
+        className={`${styles.tab} ${className || ""}`}
+        {...(sanitizedProps as MuiTabProps)}
       />
     );
   },
 );
-_TabsTab.displayName = "Tabs.Tab";
 
-export type TabsPanelProps = RecursicaOverStyled<MuiTabsPanelProps>;
+Tab.displayName = "Tab";
+
+import { TabPanel as MuiTabPanel } from "@mui/lab";
+import type { TabPanelProps as MuiTabPanelProps } from "@mui/lab";
+
+export type TabPanelProps = RecursicaOverStyled<MuiTabPanelProps>;
+
+export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+  function TabPanel(props, ref) {
+    const { overStyled = false, className, ...rest } = props;
+    const sanitizedProps = filterStylingProps(rest, overStyled);
 
-const _TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
-  function TabsPanel(props, ref) {
-    const { overStyled = false, ...rest } = props;
     return (
-      <div
+      <MuiTabPanel
         ref={ref}
-        {...(filterStylingProps(rest, overStyled) as MuiTabsPanelProps)}
+        className={`${styles.panel} ${className || ""}`}
+        {...(sanitizedProps as MuiTabPanelProps)}
       />
     );
   },
 );
-_TabsPanel.displayName = "Tabs.Panel";
 
-export const Tabs: typeof _Tabs & {
-  List: typeof _TabsList;
-  Tab: typeof _TabsTab;
-  Panel: typeof _TabsPanel;
-} = Object.assign(_Tabs, {
-  List: _TabsList,
-  Tab: _TabsTab,
-  Panel: _TabsPanel,
-});
+TabPanel.displayName = "TabPanel";

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

@@ -13,23 +13,6 @@ const meta: Meta<typeof Text> = {
           "The standard `<Text>` component controls common body sizing scales and implicit paragraphs governed by the active theme layer. For semantic headings (`h1` through `h6`), use `<Title>` instead.",
       },
     },
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "variant",
-        "children",
-        "component",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
   },
   argTypes: {
     variant: {
@@ -45,6 +28,11 @@ const meta: Meta<typeof Text> = {
       description:
         "Controls the standard logical boundary definitions natively extracted from Figma.",
     },
+    c: {
+      control: "text",
+      description:
+        "Standard Mantine color string mapped via internal boundaries. Example: `dimmed`",
+    },
   },
 };
 

package/src/components/Text/Text.tsx

@@ -1,21 +1,7 @@
 import React, { forwardRef } from "react";
 import { Typography } from "../Typography/Typography";
 import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
-import { type TypographyProps as MuiTypographyProps } from "@mui/material";
-
-export type TextVariant =
-  | "body"
-  | "body-small"
-  | "caption"
-  | "overline"
-  | "subtitle"
-  | "subtitle-small";
-
-export type RecursicaTextProps = Omit<MuiTypographyProps, "variant"> & {
-  variant?: TextVariant;
-  children?: React.ReactNode;
-  component?: React.ElementType;
-};
+import { type RecursicaTextProps } from "@recursica/adapter-common";
 
 export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
 

package/src/components/TextArea/TextArea.tsx

@@ -4,7 +4,7 @@ import {
   type TextFieldProps as MuiTextareaProps,
 } from "@mui/material";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
-import { TextField } from "@mui/material";
+// Removed unused TextField import
 import {
   filterStylingProps,
   type RecursicaOverStyled,
@@ -13,6 +13,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./TextArea.module.css";
 
+import { type RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from "@recursica/adapter-common";
+
 export interface RecursicaTextAreaProps
   extends Omit<
       MuiTextareaProps,
@@ -29,14 +31,8 @@ export interface RecursicaTextAreaProps
       | "labelWithEditIcon"
       | "onLabelEditClick"
     >,
-    ReadOnlyControlProps {
-  /** Maximum rows for autosize textarea to grow */
-  maxRows?: number;
-  /** Minimum rows of autosize textarea */
-  minRows?: number;
-  /** If set, enables textarea height growing with its content */
-  autosize?: boolean;
-}
+    ReadOnlyControlProps,
+    BaseRecursicaTextAreaProps {}
 
 export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
 
@@ -58,6 +54,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       assistiveWithIcon,
       error,
       required,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       withAsterisk,
       id,
       className,
@@ -121,7 +118,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         assistiveWithIcon={assistiveWithIcon}
         error={error}
         required={required}
-        withAsterisk={withAsterisk}
         id={id}
         readOnly={readOnly}
         readOnlyComponent={readOnlyComponent}
@@ -133,20 +129,14 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiTextarea
             multiline
-            ref={ref}
+            inputRef={ref as any}
             classes={mergedClassNames}
             disabled={disabled}
             value={value}
             defaultValue={defaultValue}
             label={undefined}
-            description={undefined}
             error={undefined}
             required={undefined}
-            withAsterisk={undefined}
-            wrapperProps={{
-              "data-disabled": disabled ? "true" : undefined,
-              "data-error": error ? "true" : undefined,
-            }}
             {...(sanitizedProps as unknown as MuiTextareaProps)}
           />
         }

package/src/components/TextField/TextField.stories.tsx

@@ -1,9 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { TextField } from "./TextField";
 import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
-
 const meta: Meta<typeof TextField> = {
   title: "UI-Kit/TextField",
   component: TextField,
@@ -15,7 +12,7 @@ const meta: Meta<typeof TextField> = {
 The \`TextField\` primitive functions as a universal text entry input natively integrated directly into the unified \`FormControlWrapper\` architecture.
 
 ### Architectural Decoupling
-Recursica forcibly overrides the internal MUI \`InputBase\` defaults injecting an untamed input layout primitive perfectly mapped back into our rigid design systems. State modifiers (e.g. Focus, Errors) hook flawlessly back onto our CSS module mapping variable colors strictly accurately.
+Recursica forcibly overrides the internal Mantine \`Input.Wrapper\` defaults injecting an untamed \`<Input>\` layout primitive perfectly mapped back into our rigid design systems. State modifiers (e.g. Focus, Errors) hook flawlessly back onto our CSS module mapping variable colors strictly accurately.
 
 ### Examples
 Always structure horizontal architectures via the generic \`formLayout\` parameter.
@@ -29,21 +26,6 @@ Always structure horizontal architectures via the generic \`formLayout\` paramet
 `,
       },
     },
-    controls: {
-      include: [
-        "disabled",
-        "error",
-        "required",
-        "label",
-        "assistiveText",
-        "readOnly",
-        "formLayout",
-        "labelSize",
-        "labelAlignment",
-        "labelOptionalText",
-        "labelWithEditIcon",
-      ],
-    },
   },
   argTypes: {
     ...formControlArgTypes,
@@ -86,7 +68,6 @@ export const Default: Story = {
     assistiveText:
       "Tokens are stored identically locally and strictly ephemeral.",
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const FormsSideBySide: Story = {
@@ -97,7 +78,6 @@ export const FormsSideBySide: Story = {
       "Specify the exact cluster administrative credentials enforcing strict domain policies. This violently long string tests native textual wrapping safely mapping alongside inputs.",
     formLayout: "side-by-side",
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const WithLeadingIcon: Story = {
@@ -120,7 +100,6 @@ export const WithLeadingIcon: Story = {
       </svg>
     ),
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const WithTrailingIcon: Story = {
@@ -142,7 +121,6 @@ export const WithTrailingIcon: Story = {
       </svg>
     ),
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const Disabled: Story = {
@@ -151,7 +129,6 @@ export const Disabled: Story = {
     placeholder: "Disabled primitive map...",
     disabled: true,
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const ErrorState: Story = {
@@ -163,7 +140,6 @@ export const ErrorState: Story = {
       "Critical runtime node disconnect detected traversing DOM architecture.",
     required: true,
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const StaticReadOnly: Story = {
@@ -173,7 +149,6 @@ export const StaticReadOnly: Story = {
     value: "Explicitly Uneditable Bound Output",
     readOnly: true,
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };
 
 export const EditableReadOnly: Story = {
@@ -184,5 +159,4 @@ export const EditableReadOnly: Story = {
     readOnly: true,
     labelWithEditIcon: true,
   },
-  render: ({ ...args }: any) => <TextField {...args} />,
 };

package/src/components/TextField/TextField.tsx

@@ -9,6 +9,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./TextField.module.css";
 
+import { type RecursicaTextFieldProps as BaseRecursicaTextFieldProps } from "@recursica/adapter-common";
+
 export interface RecursicaTextFieldProps
   extends Omit<
       InputBaseProps,
@@ -33,12 +35,8 @@ export interface RecursicaTextFieldProps
       | "labelWithEditIcon"
       | "onLabelEditClick"
     >,
-    ReadOnlyControlProps {
-  /** Renders a section on the left side of the input (e.g. icon). Maps to Mantine's leftSection natively. */
-  leftSection?: React.ReactNode;
-  /** Renders a section on the right side of the input (e.g. clear button). Maps to Mantine's rightSection natively. */
-  rightSection?: React.ReactNode;
-}
+    ReadOnlyControlProps,
+    BaseRecursicaTextFieldProps {}
 
 export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;