@recursica/mui-adapter 0.9.1 → 0.11.0

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

@@ -8,20 +8,31 @@ export type TypographyProps = RecursicaOverStyled<Omit<MuiTypographyProps, "vari
     typographyClass: string;
     component?: React.ElementType;
 }>;
-export declare const Typography: React.ForwardRefExoticComponent<(Omit<Omit<Omit<MuiTypographyProps, "variant"> & {
+export declare const Typography: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<Omit<MuiTypographyProps, "variant"> & {
     /**
      * Internal typography class mapping
      */
     typographyClass: string;
     component?: React.ElementType;
-}, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
+}>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
     overStyled?: false | undefined;
-}, "ref"> | Omit<Omit<MuiTypographyProps, "variant"> & {
+}, "ref"> | Omit<Omit<Omit<MuiTypographyProps, "variant"> & {
     /**
      * Internal typography class mapping
      */
     typographyClass: string;
     component?: React.ElementType;
+}, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+    m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
 } & {
     overStyled: true;
 }, "ref">) & React.RefAttributes<HTMLElement>>;

package/dist/src/components/Typography/index.d.ts

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

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

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

package/dist/src/index.d.ts

@@ -1,2 +1,86 @@
-export * from './components';
+import * as rawComponents from "./components";
 export * from '@recursica/adapter-common';
+export declare const Box: <C extends React.ElementType = "div">(props: rawComponents.BoxProps<C> & {
+    ref?: React.ForwardedRef<any>;
+}) => React.ReactElement | null;
+export declare const Flex: import('react').ForwardRefExoticComponent<Omit<rawComponents.FlexProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Group: import('react').ForwardRefExoticComponent<Omit<rawComponents.GroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Stack: import('react').ForwardRefExoticComponent<Omit<rawComponents.StackProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Container: import('react').ForwardRefExoticComponent<Omit<rawComponents.ContainerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Typography: import('react').ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<Omit<import('@mui/material').TypographyProps, "variant"> & {
+    typographyClass: string;
+    component?: React.ElementType;
+}>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<Omit<import('@mui/material').TypographyProps, "variant"> & {
+    typographyClass: string;
+    component?: React.ElementType;
+}, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+    m?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mx?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    my?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mt?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mb?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    ml?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    mr?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    gap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    rowGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+    columnGap?: string | number | import('@recursica/adapter-common').RecursicaSpacing;
+} & {
+    overStyled: true;
+}, "ref">) & import('react').RefAttributes<HTMLElement>>;
+export declare const FileInput: import('react').FC<rawComponents.FileInputProps>;
+export declare const FileUpload: import('react').FC<rawComponents.FileUploadProps>;
+export declare const Accordion: typeof rawComponents.Accordion;
+export declare const AccordionItem: typeof rawComponents.AccordionItem;
+export declare const AccordionControl: typeof rawComponents.AccordionControl;
+export declare const AccordionPanel: typeof rawComponents.AccordionPanel;
+export declare const AssistiveElement: typeof rawComponents.AssistiveElement;
+export declare const Autocomplete: typeof rawComponents.Autocomplete;
+export declare const Avatar: typeof rawComponents.Avatar;
+export declare const Badge: typeof rawComponents.Badge;
+export declare const Breadcrumb: typeof rawComponents.Breadcrumb;
+export declare const Button: typeof rawComponents.Button;
+export declare const Card: typeof rawComponents.Card;
+export declare const Checkbox: typeof rawComponents.Checkbox;
+export declare const CheckboxGroup: typeof rawComponents.CheckboxGroup;
+export declare const Chip: typeof rawComponents.Chip;
+export declare const DatePicker: typeof rawComponents.DatePicker;
+export declare const Dropdown: typeof rawComponents.Dropdown;
+export declare const FormControlLayout: typeof rawComponents.FormControlLayout;
+export declare const FormControlWrapper: typeof rawComponents.FormControlWrapper;
+export declare const HoverCard: typeof rawComponents.HoverCard;
+export declare const Label: typeof rawComponents.Label;
+export declare const Link: typeof rawComponents.Link;
+export declare const Loader: typeof rawComponents.Loader;
+export declare const Menu: typeof rawComponents.Menu;
+export declare const MenuItem: typeof rawComponents.MenuItem;
+export declare const MenuDivider: typeof rawComponents.MenuDivider;
+export declare const Modal: typeof rawComponents.Modal;
+export declare const NumberInput: typeof rawComponents.NumberInput;
+export declare const Pagination: typeof rawComponents.Pagination;
+export declare const Panel: typeof rawComponents.Panel;
+export declare const PanelFooter: typeof rawComponents.PanelFooter;
+export declare const Radio: typeof rawComponents.Radio;
+export declare const RadioGroup: typeof rawComponents.RadioGroup;
+export declare const ReadOnlyField: typeof rawComponents.ReadOnlyField;
+export declare const SegmentedControl: typeof rawComponents.SegmentedControl;
+export declare const Slider: typeof rawComponents.Slider;
+export declare const Stepper: typeof rawComponents.Stepper;
+export declare const Switch: typeof rawComponents.Switch;
+export declare const SwitchGroup: typeof rawComponents.SwitchGroup;
+export declare const Table: typeof rawComponents.Table;
+export declare const Tab: typeof rawComponents.Tab;
+export declare const TabPanel: typeof rawComponents.TabPanel;
+export declare const Tabs: typeof rawComponents.Tabs;
+export declare const Text: typeof rawComponents.Text;
+export declare const TextArea: typeof rawComponents.TextArea;
+export declare const TextField: typeof rawComponents.TextField;
+export declare const TimePicker: typeof rawComponents.TimePicker;
+export declare const Timeline: typeof rawComponents.Timeline;
+export declare const TimelineItem: typeof rawComponents.TimelineItem;
+export declare const Title: typeof rawComponents.Title;
+export declare const Toast: typeof rawComponents.Toast;
+export declare const Tooltip: typeof rawComponents.Tooltip;
+export declare const TransferList: typeof rawComponents.TransferList;
+export type { RecursicaAutocompleteProps, RecursicaDropdownProps, RecursicaFormControlWrapperProps, RecursicaNumberInputProps, RecursicaSliderProps, RecursicaTextAreaProps, RecursicaTextFieldProps, RecursicaToastProps, } from './components';

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

@@ -22,7 +22,7 @@
  * @returns Sanitized component props safe for internal styling merging
  */
 export declare const BLOCKED_STYLING_KEYS: readonly ["className", "classes", "style", "sx", "color", "bgcolor", "backgroundColor", "typography", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "borderColor", "borderRadius", "boxShadow", "display", "position", "zIndex"];
-export { type RecursicaSpacing, type RecursicaSize, type RecursicaOverStyled, type BlockedStylingKeys, type ForbiddenStyles, } from '@recursica/adapter-common';
+export { type RecursicaSpacing, type RecursicaSize, type RecursicaOverStyled, type BlockedStylingKeys, type ForbiddenStyles, type WithRecursicaSpacing, } from '@recursica/adapter-common';
 export declare const SPACING_MAP: Record<string, string>;
 export type OmitSx<T> = Omit<T, "sx">;
 export declare function filterSxProp<T extends Record<string, unknown>>(props: T): Omit<T, "sx">;

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.9.1",
+  "version": "0.11.0",
   "publishConfig": {
     "access": "public"
   },

package/src/OverStyling.tsx

@@ -1,8 +1,25 @@
 import { Paper, Divider } from "@mui/material";
-import { Container, Stack, Box, Text, Title } from "./components";
-import { Button } from "./components/Button/Button";
+import {
+  Container,
+  Stack,
+  Box,
+  Text as RawText,
+  Title,
+  Switch as RawSwitch,
+} from "./components";
+import { Button as RawButton } from "./components/Button/Button";
+import {
+  useGlobalOverStyled,
+  toggleGlobalOverStyled,
+  wrapComponent,
+} from "@recursica/adapter-common";
+
+const Button = wrapComponent(RawButton);
+const Text = wrapComponent(RawText);
+const Switch = wrapComponent(RawSwitch);
 
 export const OverStylingInfo = () => {
+  const isHighlightActive = useGlobalOverStyled();
   return (
     <Container size="md" style={{ padding: "32px 0" }}>
       <Paper variant="outlined" sx={{ p: 4, borderRadius: 2 }}>
@@ -172,6 +189,50 @@ export const OverStylingInfo = () => {
 
         <Divider sx={{ mb: 4 }} />
 
+        <Title order={6} mb={1}>
+          Visual Auditing & Highlights (Development Only)
+        </Title>
+        <Text mb={2}>
+          To make it easy to spot technical debt and design system violations,
+          Recursica automatically tracks any component that uses the{" "}
+          <code>overStyled={`{true}`}</code> prop.
+        </Text>
+        <Text mb={2}>
+          In <strong>development builds</strong>, you can highlight all
+          over-styled components on the page. Open your browser's developer
+          console and run:
+        </Text>
+        <Box
+          component="pre"
+          sx={{
+            p: 1.5,
+            bgcolor: "grey.100",
+            borderRadius: 1,
+            fontSize: 13,
+            mt: 1,
+            mb: 2,
+          }}
+        >
+          <code>recursica.toggleOverStyled()</code>
+        </Box>
+        <Stack direction="row" alignItems="center" gap="rec-sm" mb="rec-md">
+          <Switch
+            label="Highlight Over-Styled Components"
+            checked={isHighlightActive}
+            onChange={() => toggleGlobalOverStyled()}
+          />
+        </Stack>
+        <Text mb={4}>
+          This toggles a <strong>cyan 2px box shadow</strong> outline around the
+          children of all over-styled components. The wrapping elements use{" "}
+          <code>display: contents</code> under the hood to ensure they occupy
+          zero DOM space and do not affect flex, grid, or absolute positioning
+          flow. In production builds, this debugging helper is completely
+          disabled and stripped with zero performance overhead.
+        </Text>
+
+        <Divider sx={{ mb: 4 }} />
+
         <Title order={6} mb={2}>
           Live Example
         </Title>

package/src/components/Accordion/Accordion.tsx

@@ -175,6 +175,7 @@ export const AccordionItem = forwardRef<
           </>
         ) : (
           children
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
         )) as any
       }
     </MuiAccordion>

package/src/components/Autocomplete/Autocomplete.tsx

@@ -18,6 +18,7 @@ import { type RecursicaAutocompleteProps as BaseRecursicaAutocompleteProps } fro
 
 export interface RecursicaAutocompleteProps
   extends Omit<
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       MuiAutocompleteProps<any, any, any, any, "div">,
       | "variant"
       | "size"
@@ -32,6 +33,7 @@ export interface RecursicaAutocompleteProps
       | "controlMaxWidth"
       | "controlMinWidth"
       | "error"
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       | keyof MuiAutocompleteProps<any, any, any, any, "div">
     >,
     ReadOnlyControlProps,

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Avatar as MuiAvatar,
   type AvatarProps as MuiAvatarProps,
@@ -74,7 +74,7 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
       ref={ref}
       className={classNameProp}
       classes={mergedClassNames}
-      variant={mapVariant[variant] as any}
+      variant={mapVariant[variant] as unknown as MuiAvatarProps["variant"]}
       src={src}
       data-variant={variant}
       data-size={size}
@@ -98,4 +98,4 @@ _Avatar.displayName = "Avatar";
  *
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
  */
-export const Avatar = _Avatar as any;
+export const Avatar = _Avatar;

package/src/components/Badge/Badge.tsx

@@ -66,4 +66,4 @@ _Badge.displayName = "Badge";
  *
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
  */
-export const Badge = _Badge as any;
+export const Badge = _Badge;

package/src/components/Card/CARD_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,15 @@
+# Card Implementation Notes
+
+## Architecture Overrides
+
+Because MUI natively constructs `Card` bounding boxes using `<Paper>` components (which lack the precise edge-to-edge layouts native to Mantine's sections), we implemented custom margins for edge-to-edge section components:
+
+- `<Card.Header>` explicitly hooks `--recursica_ui-kit_components_card_properties_header-background` and corresponding padding variables, stretching edge-to-edge via negative margin resets.
+- `<Card.Footer>` explicitly hooks `--recursica_ui-kit_components_card_properties_footer-background` and corresponding padding variables.
+
+## Layout Alignment Exceptions
+
+To allow Cards to fit cleanly inside dynamic/flex layouts (like dashboard panels, grid tracks, or sidebar layout segments), the Card wrapper implements a custom gatekeeper bypass for outer styling properties:
+
+- Exposes a safe subset of flexbox/dimensions styling properties (`flex`, `flexGrow`, `flexShrink`, `flexBasis`, `grow`, `h`, `height`) on the root `<Card>` component to allow proper sizing alongside layout siblings.
+- Sets `<Card.Content>` to `flex-grow: 1;` by default via CSS modules. Since the root `<Card>` has `display: flex; flex-direction: column;`, this makes the content area expand to fill all vertical space, pushing `<Card.Footer>` to align at the absolute bottom of the bounding box.

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

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

package/src/components/Card/Card.tsx

@@ -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,24 @@ 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 Record<string, unknown>)[key] = (
+        rest as Record<string, unknown>
+      )[key];
+    }
+  });
+
   const mergedClassNames: Partial<Record<string, string>> = {
     root: styles.root,
   };
@@ -167,7 +195,7 @@ CardContent.displayName = "CardContent";
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
  * Use dot-notation sub-components for structured card layouts.
  */
-const PolymorphicCard = CardBase as any;
+const PolymorphicCard = CardBase;
 
 // Attach static components for dot-notation access
 const _card = PolymorphicCard as unknown as Record<string, unknown>;

package/src/components/Checkbox/Checkbox.tsx

@@ -133,7 +133,12 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         }
       } else {
         if (restRecord.onChange) {
-          (restRecord.onChange as any)(e, e.target.checked);
+          (
+            restRecord.onChange as (
+              event: React.ChangeEvent<HTMLInputElement>,
+              checked: boolean,
+            ) => void
+          )(e, e.target.checked);
         }
       }
     };

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

@@ -18,18 +18,17 @@ import { type RecursicaDropdownProps as BaseRecursicaDropdownProps } from "@recu
 export interface RecursicaDropdownProps
   extends Omit<
       MuiSelectProps,
-      "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps"
+      | keyof React.HTMLAttributes<HTMLDivElement>
+      | "size"
+      | "variant"
+      | "classes"
+      | "inputProps"
+      | "SelectDisplayProps"
+      | "ref"
     >,
-    Pick<
+    Omit<
       RecursicaFormControlWrapperProps,
-      | "assistiveText"
-      | "assistiveWithIcon"
-      | "formLayout"
-      | "labelSize"
-      | "labelAlignment"
-      | "labelOptionalText"
-      | "labelWithEditIcon"
-      | "onLabelEditClick"
+      "controlMaxWidth" | "controlMinWidth"
     >,
     ReadOnlyControlProps,
     BaseRecursicaDropdownProps {}
@@ -167,7 +166,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             inputProps={{
               "data-disabled": disabled ? "true" : undefined,
               "data-error": error ? "true" : undefined,
-              ...(restRecord.inputProps as any),
+              ...(restRecord.inputProps as Record<string, unknown>),
             }}
             {...(sanitizedProps as unknown as MuiSelectProps)}
           >

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/HoverCard/HoverCard.tsx

@@ -63,7 +63,10 @@ const HoverCardBase = function HoverCard({
 
   React.Children.forEach(children, (child) => {
     if (isValidElement(child)) {
-      const childElement = child as any;
+      const childElement = child as unknown as {
+        type?: { displayName?: string };
+        props: { children?: React.ReactNode };
+      };
       if (childElement.type?.displayName === "HoverCardTarget") {
         targetNode = childElement.props.children;
       } else if (childElement.type?.displayName === "HoverCardDropdown") {
@@ -83,7 +86,7 @@ const HoverCardBase = function HoverCard({
   return (
     <MuiTooltip
       title={dropdownNode}
-      placement={position as any}
+      placement={position as unknown as MuiTooltipProps["placement"]}
       arrow={withBeak}
       enterDelay={openDelay}
       leaveDelay={closeDelay}
@@ -100,8 +103,8 @@ const HoverCardBase = function HoverCard({
           ],
         },
       }}
-      classes={mergedClassNames as any}
-      {...(sanitizedProps as any)}
+      classes={mergedClassNames as unknown as MuiTooltipProps["classes"]}
+      {...(sanitizedProps as unknown as Record<string, unknown>)}
     >
       {/* Tooltip requires a single valid React element child that accepts a ref */}
       {isValidElement(targetNode) ? targetNode : <span>{targetNode}</span>}

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/Menu/Menu.stories.tsx

@@ -13,7 +13,7 @@ import { Menu, MenuItem, MenuDivider } from "./Menu";
 import { Button } from "../Button";
 import { ListSubheader } from "@mui/material";
 
-const SettingsIcon = (props: any) => (
+const SettingsIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -31,7 +31,7 @@ const SettingsIcon = (props: any) => (
   </svg>
 );
 
-const SearchIcon = (props: any) => (
+const SearchIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -49,7 +49,7 @@ const SearchIcon = (props: any) => (
   </svg>
 );
 
-const MessageIcon = (props: any) => (
+const MessageIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -66,7 +66,7 @@ const MessageIcon = (props: any) => (
   </svg>
 );
 
-const ImageIcon = (props: any) => (
+const ImageIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -85,7 +85,7 @@ const ImageIcon = (props: any) => (
   </svg>
 );
 
-const TrashIcon = (props: any) => (
+const TrashIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -103,7 +103,7 @@ const TrashIcon = (props: any) => (
   </svg>
 );
 
-const ArrowsIcon = (props: any) => (
+const ArrowsIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -123,7 +123,7 @@ const ArrowsIcon = (props: any) => (
   </svg>
 );
 
-type MenuStoryArgs = Record<string, any>;
+type MenuStoryArgs = Record<string, unknown>;
 
 const meta: Meta = {
   title: "UI-Kit/Menu",
@@ -135,7 +135,13 @@ export default meta;
 
 type Story = StoryObj<MenuStoryArgs>;
 
-const InteractiveMenu = ({ children, openDelay, ...args }: any) => {
+interface InteractiveMenuProps {
+  children?: React.ReactNode;
+  opened?: boolean;
+  [key: string]: unknown;
+}
+
+const InteractiveMenu = ({ children, ...args }: InteractiveMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);