@recursica/mui-adapter 0.9.0 → 0.10.0

package/src/components/Card/Card.tsx

@@ -12,7 +12,17 @@ import {
 } from "@recursica/adapter-common";
 
 // ==== CARD CONTAINER ====
-export type CardProps = RecursicaOverStyled<MuiCardProps & RecursicaCardProps>;
+export type CardProps = RecursicaOverStyled<
+  MuiCardProps & 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.
@@ -23,6 +33,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

@@ -21,7 +21,10 @@ export const CheckboxGroupContext = React.createContext<{
 import { type RecursicaCheckboxGroupProps as BaseRecursicaCheckboxGroupProps } from "@recursica/adapter-common";
 
 export interface RecursicaCheckboxGroupProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+  extends Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "onChange" | "defaultValue"
+    >,
     Omit<
       RecursicaFormControlWrapperProps,
       | "controlMaxWidth"
@@ -29,6 +32,7 @@ export interface RecursicaCheckboxGroupProps
       | "onChange"
       | "classes"
       | "withAsterisk"
+      | "defaultValue"
     >,
     ReadOnlyControlProps,
     BaseRecursicaCheckboxGroupProps {}
@@ -112,7 +116,7 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
         activeComponent={
           <CheckboxGroupContext.Provider
             value={{
-              value: value !== undefined ? value : defaultValue,
+              value: (value !== undefined ? value : defaultValue) as any[],
               onChange: handleChange,
               name: restRecord.name as string | undefined,
               readOnly: readOnly || !!(restRecord as any).disabled,

package/src/components/Container/Container.tsx

@@ -6,16 +6,18 @@
  * (Stack, Group, Flex), Container explicitly ALLOWS the `sx` prop as an escape hatch
  * for advanced layout positioning.
  */
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Container as MUIContainer,
   type ContainerProps as MUIContainerProps,
 } from "@mui/material";
 
+import { type WithRecursicaSpacing } from "../../utils/filterStylingProps";
 import { type RecursicaContainerProps } from "@recursica/adapter-common";
 
-export type ContainerProps = Omit<MUIContainerProps, "maxWidth"> &
-  RecursicaContainerProps;
+export type ContainerProps = WithRecursicaSpacing<
+  Omit<MUIContainerProps, "maxWidth"> & RecursicaContainerProps
+>;
 
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   function Container({ children, size, ...rest }, ref) {

package/src/components/Dropdown/Dropdown.tsx

@@ -20,16 +20,9 @@ export interface RecursicaDropdownProps
       MuiSelectProps,
       "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps"
     >,
-    Pick<
+    Omit<
       RecursicaFormControlWrapperProps,
-      | "assistiveText"
-      | "assistiveWithIcon"
-      | "formLayout"
-      | "labelSize"
-      | "labelAlignment"
-      | "labelOptionalText"
-      | "labelWithEditIcon"
-      | "onLabelEditClick"
+      "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
     BaseRecursicaDropdownProps {}

package/src/components/Flex/Flex.tsx

@@ -8,17 +8,20 @@
  * Like Stack and Group, this is a primitive layout component. It strictly filters out the
  * `sx` prop using `OmitSx` and `filterSxProp` to enforce the use of standard layout scales.
  */
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { Box as MUIBox, type BoxProps as MUIBoxProps } from "@mui/material";
 import {
   SPACING_MAP,
   type OmitSx,
   filterSxProp,
+  type WithRecursicaSpacing,
 } from "../../utils/filterStylingProps";
 
 import { type RecursicaFlexProps } from "@recursica/adapter-common";
 
-export type FlexProps = OmitSx<MUIBoxProps & RecursicaFlexProps>;
+export type FlexProps = WithRecursicaSpacing<
+  OmitSx<MUIBoxProps & RecursicaFlexProps>
+>;
 
 export const Flex = forwardRef<HTMLDivElement, FlexProps>(function Flex(
   {

package/src/components/Group/Group.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 RecursicaGroupProps } from "@recursica/adapter-common";
 
-export type GroupProps = OmitSx<
-  Omit<MUIStackProps, "spacing" | "direction"> & RecursicaGroupProps
+export type GroupProps = WithRecursicaSpacing<
+  OmitSx<Omit<MUIStackProps, "spacing" | "direction"> & RecursicaGroupProps>
 >;
 
 export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(

package/src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { Link as MUILink, type LinkProps as MUILinkProps } from "@mui/material";
 import {
   filterStylingProps,

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/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/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) {

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/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, className, ...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,11 @@ import { type RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from "@recu
 export interface RecursicaTextAreaProps
   extends Omit<
       MuiTextareaProps,
-      "size" | "variant" | "radius" | "wrapperProps"
+      "size" | "variant" | "radius" | "wrapperProps" | "maxRows" | "minRows"
     >,
-    Pick<
+    Omit<
       RecursicaFormControlWrapperProps,
-      | "assistiveText"
-      | "assistiveWithIcon"
-      | "formLayout"
-      | "labelSize"
-      | "labelAlignment"
-      | "labelOptionalText"
-      | "labelWithEditIcon"
-      | "onLabelEditClick"
+      "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
     BaseRecursicaTextAreaProps {}

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/index.ts

@@ -1,3 +1,14 @@
 import "@recursica/adapter-common/style.css";
 export * from "./components";
 export * from "@recursica/adapter-common";
+
+export type {
+  RecursicaAutocompleteProps,
+  RecursicaDropdownProps,
+  RecursicaFormControlWrapperProps,
+  RecursicaNumberInputProps,
+  RecursicaSliderProps,
+  RecursicaTextAreaProps,
+  RecursicaTextFieldProps,
+  RecursicaToastProps,
+} from "./components";

package/src/utils/filterStylingProps.ts

@@ -57,6 +57,7 @@ export {
   type RecursicaOverStyled,
   type BlockedStylingKeys,
   type ForbiddenStyles,
+  type WithRecursicaSpacing,
 } from "@recursica/adapter-common";
 
 const LAYOUT_PROPS = new Set([