@recursica/mui-adapter 0.9.1 → 0.11.0

package/src/components/Modal/Modal.tsx

@@ -65,7 +65,8 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
     if (
       React.isValidElement(child) &&
       (child.type === ModalFooter ||
-        (child.type as any)?.displayName === "Modal.Footer")
+        (child.type as unknown as { displayName?: string })?.displayName ===
+          "Modal.Footer")
     ) {
       footer = child;
     } else {
@@ -81,7 +82,11 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
         paper: styles.inner,
       }}
       {...(sanitizedProps as MuiDialogProps)}
-      open={opened || (sanitizedProps as any).open}
+      open={
+        opened ||
+        ((sanitizedProps as Record<string, unknown>).open as boolean) ||
+        false
+      }
       onClose={onClose}
     >
       {(title || withCloseButton) && (
@@ -117,6 +122,7 @@ const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(
 
     return (
       <MuiDialogTitle
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={`${styles.title} ${className || ""}`}
         {...(sanitizedProps as MuiDialogTitleProps)}
@@ -159,10 +165,10 @@ const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(
   return (
     <MuiDialogContent
       ref={(node) => {
-        if (typeof ref === "function") ref(node as any);
+        if (typeof ref === "function") ref(node as HTMLDivElement);
         else if (ref)
           (ref as React.MutableRefObject<HTMLDivElement | null>).current =
-            node as any;
+            node as HTMLDivElement;
         if (internalRef)
           (
             internalRef as React.MutableRefObject<HTMLDivElement | null>
@@ -193,6 +199,7 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
 
     return (
       <MuiDialogActions
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={`${styles.footer} ${className || ""}`}
         {...(sanitizedProps as MuiDialogActionsProps)}

package/src/components/Panel/PANEL_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,64 @@
+# Panel – Implementation Notes
+
+Decisions and design tweaks strictly tailored for the UI Kit's Panel wrapped against `@mui/material`. This is a living document that tracks _why_ specific logic decisions exist.
+
+---
+
+## 1. Mapping to MUI Drawer
+
+**Decision:** Panel maps to MUI's `Drawer` component, not `Paper` or `Card`.
+
+**Implementation:** Per the Recursica design system specification, "Panels slide in or expand from the edge of the screen to reveal additional content or functionality." This is the exact behavior of MUI's `Drawer` component, which provides:
+
+- Slide-in animation from any screen edge (using the `anchor` prop)
+- Backdrop/overlay support
+- Focus trap and overlay portal management
+- Internal scroll lock when open
+
+---
+
+## 2. Token Namespace: `panel`
+
+**Decision:** The CSS module exclusively uses variables from the `--recursica_ui-kit_components_panel_*` namespace.
+
+**Implementation:** The Recursica token system defines the `panel` namespace covering:
+
+- Geometry: border-radius, border-size, min-width (200px), max-width (960px)
+- Content padding: content-horizontal-padding (xl), content-vertical-padding (lg)
+- Header/Footer padding: header-footer-horizontal-padding (xl), header-footer-vertical-padding (md)
+- Spacing: header-close-gap (md), footer-button-gap (md)
+- Divider: divider-size (1px), divider-color
+- Elevation: elevation-3
+- Colors (layer-aware): background, border-color, content, divider-color, header-footer-background, title
+- Non-CSS: header-style ("h3")
+
+No tokens from other component namespaces are referenced.
+
+---
+
+## 3. Default Placement Override
+
+**Decision:** Use `placement` instead of `position` for configuring slide-out direction, and default it to `"right"`.
+
+**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 MUI Drawer's `anchor` prop before any other sanitized props are applied. Right-side panels are the most common pattern for supplementary content, settings, and detail views.
+
+---
+
+## 4. Custom Panel.Footer
+
+**Decision:** A custom `Panel.Footer` sub-component is provided. MUI's Drawer does not have a native footer.
+
+**Implementation:** `Panel.Footer` is a `<div>` with styling referencing Recursica CSS variables for:
+
+- `header-footer-background` and `header-footer-padding` tokens
+- Top divider using `divider-size` and `divider-color`
+- `footer-button-gap` for action button spacing
+- `margin-top: auto` to push the footer to the bottom
+
+---
+
+## 5. Visibility Mapping (`opened` -> `open`)
+
+**Decision:** Accept `opened` prop to match the standard Recursica component API.
+
+**Implementation:** MUI Drawer natively expects the `open` boolean prop. The wrapper maps the incoming framework-agnostic `opened` prop to MUI's `open={Boolean(opened)}`, allowing consistent usage across both adapter implementations.

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.",
@@ -45,7 +45,7 @@ const meta: Meta = {
     docs: {
       description: {
         component: `
-The \`Panel\` component slides in or expands from the edge of the screen to reveal additional content or functionality. Built on Mantine's \`Drawer\`, it enforces Recursica design tokens for styling.
+The \`Panel\` component slides in or expands from the edge of the screen to reveal additional content or functionality. Built on Mui's \`Drawer\`, it enforces Recursica design tokens for styling.
 
 ### Anatomy
 1. **Header** — Title and close icon, remains fixed on scroll
@@ -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 Mui Drawer.
  */
+export interface RecursicaPanelProps
+  extends Omit<
+      MuiDrawerProps,
+      "classes" | "position" | "style" | "anchor" | "open"
+    >,
+    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,14 +55,12 @@ export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
  */
 const PanelBase = function Panel({
   overStyled = false,
-  position = "right",
+  placement = "right",
   keepMounted = true,
   wrapHeaderText = false,
+  opened,
   ...rest
-}: PanelProps & {
-  position?: "left" | "right" | "top" | "bottom";
-  opened?: boolean;
-}) {
+}: PanelProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
   // Bind CSS module classes to Mui's internal classNames API
@@ -85,9 +90,9 @@ const PanelBase = function Panel({
 
   return (
     <MuiDrawer
-      anchor={position} /* Recursica default: right; Mui default: left */
+      anchor={placement} /* Recursica default: right; Mui default: left */
       keepMounted={keepMounted}
-      open={Boolean(rest.opened)}
+      open={Boolean(opened)}
       {...(sanitizedProps as unknown as MuiDrawerProps)}
       classes={mergedClassNames}
     />

package/src/components/Radio/Radio.tsx

@@ -147,6 +147,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     // We omit Mui's sizing/coloring so we rely strictly on variables from Radio.module.css
     const radioNode = (
       <MuiRadio
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         icon={<RadioIcon />}
         checkedIcon={<RadioIcon className={styles.checked} />}

package/src/components/Radio/index.ts

@@ -1 +1,2 @@
 export * from "./Radio";
+export * from "./RadioGroup";

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -81,7 +81,7 @@ export const ReadOnlyField = React.forwardRef<
   }
 
   // Type coercions securely bounding the output values cleanly explicitly.
-  let displayValue: React.ReactNode = value;
+  let displayValue: React.ReactNode = value as any;
 
   if (type === "boolean" || type === "switch") {
     displayValue = value ? "True" : "False";

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -108,7 +108,11 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         data-orientation={orientation}
         exclusive
         value={value}
-        onChange={handleChange as any}
+        onChange={
+          handleChange as React.ComponentProps<
+            typeof MuiSegmentedControl
+          >["onChange"]
+        }
         {...(sanitizedProps as Omit<
           MuiSegmentedControlProps,
           "variant" | "size" | "value" | "onChange"

package/src/components/Slider/Slider.tsx

@@ -129,7 +129,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       if (!isNaN(parsed)) {
         // Clamp input value to bounds
         const clamped = Math.max(min, Math.min(max, parsed));
-        handleValueChange(null as any, clamped);
+        handleValueChange(null as unknown as Event, clamped);
       }
     };
 
@@ -211,7 +211,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
         label={label}
         assistiveText={assistiveText}
         assistiveWithIcon={assistiveWithIcon}
-        error={error as any}
+        error={!!error}
         required={required}
         id={id}
         readOnly={readOnly}
@@ -239,14 +239,22 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                 disabled={disabled}
                 value={resolvedValue}
                 onChange={handleValueChange}
-                onChangeCommitted={onChangeEnd as any}
+                onChangeCommitted={
+                  onChangeEnd as unknown as (
+                    event: Event | React.SyntheticEvent,
+                    value: number | number[],
+                  ) => void
+                }
                 min={min}
                 max={max}
                 step={step}
                 valueLabelDisplay={tooltipLabel === null ? "off" : "auto"}
                 valueLabelFormat={
                   typeof tooltipLabel === "function"
-                    ? (tooltipLabel as any)
+                    ? (tooltipLabel as unknown as (
+                        value: number,
+                        index: number,
+                      ) => React.ReactNode)
                     : undefined
                 }
                 {...(sanitizedProps as unknown as MuiSliderProps)}

package/src/components/Stack/Stack.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Stack as MUIStack,
   type StackProps as MUIStackProps,
@@ -7,12 +7,13 @@ import {
   SPACING_MAP,
   type OmitSx,
   filterSxProp,
+  type WithRecursicaSpacing,
 } from "../../utils/filterStylingProps";
 
 import { type RecursicaStackProps } from "@recursica/adapter-common";
 
-export type StackProps = OmitSx<
-  Omit<MUIStackProps, "spacing"> & RecursicaStackProps
+export type StackProps = WithRecursicaSpacing<
+  OmitSx<Omit<MUIStackProps, "spacing"> & RecursicaStackProps>
 >;
 
 export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(

package/src/components/Stepper/Stepper.tsx

@@ -19,7 +19,11 @@ import styles from "./Stepper.module.css";
 
 import { type RecursicaStepperProps } from "@recursica/adapter-common";
 
-export type StepperProps = RecursicaOverStyled<RecursicaStepperProps>;
+export interface RecursicaStepperPropsExtended
+  extends Omit<Partial<MuiStepperProps>, "size">,
+    RecursicaStepperProps {}
+
+export type StepperProps = RecursicaOverStyled<RecursicaStepperPropsExtended>;
 
 export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
   function Stepper(props, ref) {
@@ -42,6 +46,7 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
         data-orientation={orientation}
       >
         <MuiStepper
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           orientation={orientation}
           connector={

package/src/components/Switch/Switch.tsx

@@ -37,7 +37,7 @@ export type RecursicaSwitchPropsAlias =
 
 export type SwitchProps = RecursicaOverStyled<RecursicaSwitchPropsAlias>;
 
-type SwitchComponent = any;
+type SwitchComponent = React.ComponentType<SwitchProps>;
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   function Switch(props, ref) {
@@ -137,6 +137,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     // We omit Mui's sizing/coloring so we rely strictly on variables from Switch.module.css
     const switchNode = (
       <MuiSwitch
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={!label ? `${finalClass} ${styles.inner}` : styles.inner}
         classes={mergedClassNames}

package/src/components/Switch/SwitchGroup.tsx

@@ -28,7 +28,11 @@ export interface RecursicaSwitchGroupProps
     >,
     Omit<
       RecursicaFormControlWrapperProps,
-      "controlMaxWidth" | "controlMinWidth" | "classes" | "onChange"
+      | "controlMaxWidth"
+      | "controlMinWidth"
+      | "classes"
+      | "onChange"
+      | "defaultValue"
     >,
     ReadOnlyControlProps,
     BaseRecursicaSwitchGroupProps {}

package/src/components/Switch/index.ts

@@ -1 +1,2 @@
 export * from "./Switch";
+export * from "./SwitchGroup";

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

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

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

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Table } from "./Table";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof Table> = {
-  title: "UI-Kit/🚧 Table",
+  title: "UI-Kit/Table",
   component: Table,
   tags: ["autodocs"],
 };
@@ -12,6 +11,39 @@ export default meta;
 
 type Story = StoryObj<typeof Table>;
 
+const elements = [
+  { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
+  { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
+  { position: 8, mass: 15.999, symbol: "O", name: "Oxygen" },
+  { position: 9, mass: 18.998, symbol: "F", name: "Fluorine" },
+  { position: 10, mass: 20.18, symbol: "Ne", name: "Neon" },
+];
+
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Table" />,
+  render: () => {
+    const rows = elements.map((element) => (
+      <Table.Row key={element.name}>
+        <Table.Cell>{element.position}</Table.Cell>
+        <Table.Cell>{element.name}</Table.Cell>
+        <Table.Cell>{element.symbol}</Table.Cell>
+        <Table.Cell>{element.mass}</Table.Cell>
+      </Table.Row>
+    ));
+
+    return (
+      <Table.Container>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Cell>Element position</Table.Cell>
+              <Table.Cell>Element name</Table.Cell>
+              <Table.Cell>Symbol</Table.Cell>
+              <Table.Cell>Atomic mass</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>{rows}</Table.Body>
+        </Table>
+      </Table.Container>
+    );
+  },
 };

package/src/components/Table/Table.tsx

@@ -1,9 +1,65 @@
-import React from "react";
+import { forwardRef } from "react";
+import {
+  Table as MuiTable,
+  type TableProps as MuiTableProps,
+  TableBody as MuiTableBody,
+  TableCell as MuiTableCell,
+  TableContainer as MuiTableContainer,
+  TableHead as MuiTableHead,
+  TableRow as MuiTableRow,
+  TableFooter as MuiTableFooter,
+  TableSortLabel as MuiTableSortLabel,
+} from "@mui/material";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
 import { type RecursicaTableProps } from "@recursica/adapter-common";
+import styles from "./Table.module.css";
 
-export type TableProps = React.HTMLAttributes<HTMLDivElement> &
-  RecursicaTableProps;
+export type TableProps = RecursicaOverStyled<
+  MuiTableProps & RecursicaTableProps
+>;
 
-export const Table: React.FC<TableProps> = (props) => {
-  return <div {...props}>Table</div>;
+const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { overStyled = false, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  const rootClass = styles.root;
+  const finalClass = classNameProp
+    ? `${rootClass} ${classNameProp}`
+    : rootClass;
+
+  return (
+    <MuiTable
+      ref={ref}
+      className={finalClass}
+      {...(sanitizedProps as unknown as MuiTableProps)}
+    />
+  );
+});
+
+TableBase.displayName = "Table";
+
+type TableComponent = typeof TableBase & {
+  Body: typeof MuiTableBody;
+  Cell: typeof MuiTableCell;
+  Container: typeof MuiTableContainer;
+  Head: typeof MuiTableHead;
+  Row: typeof MuiTableRow;
+  Footer: typeof MuiTableFooter;
+  SortLabel: typeof MuiTableSortLabel;
 };
+
+export const Table = TableBase as TableComponent;
+Table.Body = MuiTableBody;
+Table.Cell = MuiTableCell;
+Table.Container = MuiTableContainer;
+Table.Head = MuiTableHead;
+Table.Row = MuiTableRow;
+Table.Footer = MuiTableFooter;
+Table.SortLabel = MuiTableSortLabel;

package/src/components/Tabs/Tabs.tsx

@@ -13,7 +13,11 @@ import styles from "./Tabs.module.css";
 
 import { type RecursicaTabsProps } from "@recursica/adapter-common";
 
-export type TabsProps = RecursicaOverStyled<RecursicaTabsProps>;
+export interface RecursicaTabsPropsExtended
+  extends Omit<MuiTabsProps, "variant">,
+    RecursicaTabsProps {}
+
+export type TabsProps = RecursicaOverStyled<RecursicaTabsPropsExtended>;
 
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
   function Tabs(props, ref) {

package/src/components/Text/Text.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
+import { type TypographyProps as MuiTypographyProps } from "@mui/material";
 import { Typography } from "../Typography/Typography";
 import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
 import { type RecursicaTextProps } from "@recursica/adapter-common";
 
-export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
+export type TextProps = RecursicaOverStyled<
+  Omit<MuiTypographyProps, "variant" | "classes"> & RecursicaTextProps
+>;
 
 export const Text = forwardRef<HTMLElement, TextProps>(function Text(
   { variant = "body", ...rest },

package/src/components/TextArea/TextArea.tsx

@@ -18,18 +18,18 @@ import { type RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from "@recu
 export interface RecursicaTextAreaProps
   extends Omit<
       MuiTextareaProps,
-      "size" | "variant" | "radius" | "wrapperProps"
+      | keyof React.HTMLAttributes<HTMLDivElement>
+      | "size"
+      | "variant"
+      | "radius"
+      | "wrapperProps"
+      | "maxRows"
+      | "minRows"
+      | "classes"
     >,
-    Pick<
+    Omit<
       RecursicaFormControlWrapperProps,
-      | "assistiveText"
-      | "assistiveWithIcon"
-      | "formLayout"
-      | "labelSize"
-      | "labelAlignment"
-      | "labelOptionalText"
-      | "labelWithEditIcon"
-      | "onLabelEditClick"
+      "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
     BaseRecursicaTextAreaProps {}
@@ -129,6 +129,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiTextarea
             multiline
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             inputRef={ref as any}
             classes={mergedClassNames}
             disabled={disabled}

package/src/components/TextField/TextField.tsx

@@ -137,7 +137,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         required={required}
         id={id}
         readOnly={readOnly}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         readOnlyComponent={readOnlyComponent as any}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         emptyValueComponent={(emptyValueComponent as any) || undefined}
         readOnlyType="text"
         readOnlyValue={value !== undefined ? value : defaultValue}

package/src/components/Timeline/index.ts

@@ -1 +1,2 @@
 export * from "./Timeline";
+export * from "./TimelineItem";

package/src/components/Title/Title.tsx

@@ -1,9 +1,12 @@
 import React, { forwardRef } from "react";
+import { type TypographyProps as MuiTypographyProps } from "@mui/material";
 import { Typography } from "../Typography/Typography";
 import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
 import { type RecursicaTitleProps } from "@recursica/adapter-common";
 
-export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
+export type TitleProps = RecursicaOverStyled<
+  Omit<MuiTypographyProps, "variant" | "classes"> & RecursicaTitleProps
+>;
 
 export const Title = forwardRef<HTMLElement, TitleProps>(function Title(
   { order = 1, component, ...rest },

package/src/components/Typography/index.ts

@@ -0,0 +1 @@
+export * from "./Typography";

package/src/components/index.ts

@@ -45,3 +45,4 @@ export * from "./Title";
 export * from "./Toast";
 export * from "./Tooltip";
 export * from "./TransferList";
+export * from "./Typography";