@recursica/mui-adapter 0.10.0 → 0.11.0

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

@@ -7,4 +7,19 @@ export type AvatarProps = RecursicaOverStyled<Omit<MuiAvatarProps, "variant" | "
  *
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
  */
-export declare const Avatar: any;
+export declare const Avatar: import('react').ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<Omit<MuiAvatarProps, "color" | "variant" | "size" | "radius"> & RecursicaAvatarProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<Omit<MuiAvatarProps, "color" | "variant" | "size" | "radius"> & RecursicaAvatarProps, "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<HTMLDivElement>>;

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

@@ -7,4 +7,19 @@ export type BadgeProps = RecursicaOverStyled<Omit<MuiBadgeProps, "variant" | "si
  *
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
  */
-export declare const Badge: any;
+export declare const Badge: import('react').ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<Omit<MuiBadgeProps, "color" | "variant" | "size" | "radius"> & RecursicaBadgeProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<Omit<MuiBadgeProps, "color" | "variant" | "size" | "radius"> & RecursicaBadgeProps, "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<HTMLDivElement>>;

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

@@ -36,7 +36,42 @@ export declare const CardContent: import('react').ForwardRefExoticComponent<Card
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
  * Use dot-notation sub-components for structured card layouts.
  */
-declare const PolymorphicCard: any;
+declare const PolymorphicCard: import('react').ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<import('@mui/material').CardOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "classes" | "style" | "sx" | "children" | "variant" | "elevation" | "square" | "raised"> & {
+    component?: React.ElementType | undefined;
+} & RecursicaCardProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {
+    overStyled?: false | undefined;
+} & {
+    flex?: string | number;
+    flexGrow?: string | number;
+    flexShrink?: string | number;
+    flexBasis?: string | number;
+    grow?: string | number;
+    h?: string | number;
+    height?: string | number;
+}, "ref"> | Omit<Omit<import('@mui/material').CardOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "classes" | "style" | "sx" | "children" | "variant" | "elevation" | "square" | "raised"> & {
+    component?: React.ElementType | undefined;
+} & RecursicaCardProps, "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;
+} & {
+    flex?: string | number;
+    flexGrow?: string | number;
+    flexShrink?: string | number;
+    flexBasis?: string | number;
+    grow?: string | number;
+    h?: string | number;
+    height?: string | number;
+}, "ref">) & import('react').RefAttributes<HTMLDivElement>>;
 export declare const Card: typeof PolymorphicCard & {
     Section: typeof CardSection;
     Header: typeof CardHeader;

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

@@ -3,7 +3,7 @@ import { SelectProps as MuiSelectProps } from '@mui/material';
 import { ReadOnlyControlProps, RecursicaDropdownProps as BaseRecursicaDropdownProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-export interface RecursicaDropdownProps extends Omit<MuiSelectProps, "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaDropdownProps {
+export interface RecursicaDropdownProps extends Omit<MuiSelectProps, keyof React.HTMLAttributes<HTMLDivElement> | "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps" | "ref">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaDropdownProps {
 }
 export type DropdownProps = RecursicaOverStyled<RecursicaDropdownProps>;
 export declare const Dropdown: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<RecursicaDropdownProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {

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

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

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

@@ -5,6 +5,6 @@ import { FormControlLayoutProps } from '../FormControlLayout/FormControlLayout';
 export type SwitchWrapperProps = Omit<MuiSwitchProps, "size" | "color" | "radius" | "variant"> & RecursicaSwitchProps & ReadOnlyControlProps & Pick<FormControlLayoutProps, "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth">;
 export type RecursicaSwitchPropsAlias = RequireAccessibleLabel<SwitchWrapperProps>;
 export type SwitchProps = RecursicaOverStyled<RecursicaSwitchPropsAlias>;
-type SwitchComponent = any;
+type SwitchComponent = React.ComponentType<SwitchProps>;
 export declare const Switch: SwitchComponent;
 export {};

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

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

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

@@ -3,7 +3,7 @@ import { TextFieldProps as MuiTextareaProps } from '@mui/material';
 import { ReadOnlyControlProps, RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-export interface RecursicaTextAreaProps extends Omit<MuiTextareaProps, "size" | "variant" | "radius" | "wrapperProps" | "maxRows" | "minRows">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaTextAreaProps {
+export interface RecursicaTextAreaProps extends Omit<MuiTextareaProps, keyof React.HTMLAttributes<HTMLDivElement> | "size" | "variant" | "radius" | "wrapperProps" | "maxRows" | "minRows" | "classes">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaTextAreaProps {
 }
 export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
 export declare const TextArea: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<RecursicaTextAreaProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {

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

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

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,3 +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/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.10.0",
+  "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

@@ -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.tsx

@@ -45,7 +45,9 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
   ] as const;
   safeCardLayoutKeys.forEach((key) => {
     if (key in rest && !(key in sanitizedProps)) {
-      (sanitizedProps as any)[key] = (rest as any)[key];
+      (sanitizedProps as Record<string, unknown>)[key] = (
+        rest as Record<string, unknown>
+      )[key];
     }
   });
 
@@ -193,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/Dropdown/Dropdown.tsx

@@ -18,7 +18,13 @@ 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"
     >,
     Omit<
       RecursicaFormControlWrapperProps,
@@ -160,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/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/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);
 

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/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/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"