@recursica/mui-adapter 0.10.0 → 0.12.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/DatePicker/DatePicker.d.ts

@@ -1,4 +1,20 @@
 import { default as React } from 'react';
 import { RecursicaDatePickerProps } from '@recursica/adapter-common';
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement> & RecursicaDatePickerProps;
+export type DatePickerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "onChange" | "defaultValue"> & RecursicaDatePickerProps & {
+    disabled?: boolean;
+    label?: React.ReactNode;
+    assistiveText?: string;
+    error?: React.ReactNode;
+    required?: boolean;
+    withAsterisk?: boolean;
+    placeholder?: string;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+    readOnly?: boolean;
+    formLayout?: "stacked" | "side-by-side";
+    leftSection?: React.ReactNode;
+    labelWithEditIcon?: boolean;
+    onLabelEditClick?: () => void;
+};
 export declare const DatePicker: React.FC<DatePickerProps>;

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" | "error">, 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/FormControlWrapper/FormControlWrapper.d.ts

@@ -1,10 +1,11 @@
 import { default as React } from 'react';
 import { FormControlProps } from '@mui/material';
 import { RecursicaFormControlWrapperProps as BaseRecursicaFormControlWrapperProps } from '@recursica/adapter-common';
-export interface RecursicaFormControlWrapperProps extends Omit<FormControlProps, "margin" | "variant" | "size" | "color">, BaseRecursicaFormControlWrapperProps {
+export interface RecursicaFormControlWrapperProps extends Omit<FormControlProps, "margin" | "variant" | "size" | "color" | "error">, BaseRecursicaFormControlWrapperProps {
     overStyled?: boolean;
     label?: React.ReactNode;
     focused?: boolean;
+    error?: React.ReactNode;
 }
 export type FormControlWrapperProps = RecursicaFormControlWrapperProps;
 export declare const FormControlWrapper: React.ForwardRefExoticComponent<Omit<RecursicaFormControlWrapperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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" | "error">, 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/TextField/TextField.d.ts

@@ -3,7 +3,7 @@ import { InputBaseProps } from '@mui/material';
 import { ReadOnlyControlProps, RecursicaTextFieldProps as BaseRecursicaTextFieldProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-export interface RecursicaTextFieldProps extends Omit<InputBaseProps, "color" | "size" | "startAdornment" | "endAdornment" | "autoComplete">, Omit<React.ComponentPropsWithoutRef<"input">, keyof InputBaseProps | "size" | "color" | "style" | "className" | "id">, Pick<RecursicaFormControlWrapperProps, "label" | "error" | "required" | "id" | "assistiveText" | "assistiveWithIcon" | "formLayout" | "labelSize" | "labelAlignment" | "labelOptionalText" | "labelWithEditIcon" | "onLabelEditClick">, ReadOnlyControlProps, BaseRecursicaTextFieldProps {
+export interface RecursicaTextFieldProps extends Omit<InputBaseProps, "color" | "size" | "startAdornment" | "endAdornment" | "autoComplete" | "error">, Omit<React.ComponentPropsWithoutRef<"input">, keyof InputBaseProps | "size" | "color" | "style" | "className" | "id">, Pick<RecursicaFormControlWrapperProps, "label" | "error" | "required" | "id" | "assistiveText" | "assistiveWithIcon" | "formLayout" | "labelSize" | "labelAlignment" | "labelOptionalText" | "labelWithEditIcon" | "onLabelEditClick">, ReadOnlyControlProps, BaseRecursicaTextFieldProps {
 }
 export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;
 export declare const TextField: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<RecursicaTextFieldProps>, 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/Tree/Tree.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface TreeProps extends React.ComponentPropsWithoutRef<"div"> {
+    overStyled?: boolean;
+}
+/**
+ * Placeholder component for Tree (Coming Soon).
+ */
+export declare const Tree: React.ForwardRefExoticComponent<RecursicaOverStyled<TreeProps> & React.RefAttributes<HTMLDivElement>>;

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

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

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

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

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

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

package/dist/src/index.d.ts

@@ -1,3 +1,87 @@
-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 declare const Tree: typeof rawComponents.Tree;
 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.12.0",
   "publishConfig": {
     "access": "public"
   },
@@ -56,7 +56,7 @@
     "build-storybook": "storybook build -o storybook-static",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6012",
-    "analyze-tokens": "analyze-tokens --css recursica_variables_scoped.css --dir src/components --output token-analysis.json",
+    "analyze-tokens": "analyze-tokens --css @recursica/official-release/recursica_variables_scoped.css --dir src/components --output token-analysis.json",
     "prebuild": "npm run analyze-tokens"
   },
   "devDependencies": {

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

@@ -37,6 +37,7 @@ const ChevronIcon = () => (
 const AccordionContext = createContext<{
   value: string | string[] | null;
   onChange: (val: string) => void;
+  chevron?: React.ReactNode;
 } | null>(null);
 
 // ==== ACCORDION CONTAINER ====
@@ -53,6 +54,7 @@ const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
       defaultValue,
       onChange,
       multiple = false,
+      chevron,
       children,
       ...rest
     },
@@ -90,7 +92,7 @@ const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
 
     return (
       <AccordionContext.Provider
-        value={{ value: activeValue, onChange: handleItemChange }}
+        value={{ value: activeValue, onChange: handleItemChange, chevron }}
       >
         <div
           ref={ref}
@@ -175,6 +177,7 @@ export const AccordionItem = forwardRef<
           </>
         ) : (
           children
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
         )) as any
       }
     </MuiAccordion>
@@ -201,15 +204,14 @@ export const AccordionControl = forwardRef<
   const finalClass =
     [styles.control, classNameProp].filter(Boolean).join(" ") || undefined;
 
+  const ctx = useContext(AccordionContext);
+  const resolvedChevron = ctx?.chevron ?? <ChevronIcon />;
+
   return (
     <MuiAccordionSummary
       ref={ref}
       className={finalClass}
-      expandIcon={
-        <span className={styles.chevron}>
-          <ChevronIcon />
-        </span>
-      }
+      expandIcon={<span className={styles.chevron}>{resolvedChevron}</span>}
       {...(sanitizedProps as unknown as MuiAccordionSummaryProps)}
     >
       {leftIcon && (

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/Checkbox/CheckboxGroup.tsx

@@ -11,6 +11,7 @@ import styles from "./Checkbox.module.css";
 
 import { FormGroup as MuiFormGroup } from "@mui/material";
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const CheckboxGroupContext = React.createContext<{
   value?: any[];
   onChange?: (event: React.SyntheticEvent, value: any) => void;

package/src/components/Container/Container.tsx

@@ -20,7 +20,7 @@ export type ContainerProps = WithRecursicaSpacing<
 >;
 
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
-  function Container({ children, size, ...rest }, ref) {
+  function Container({ children, size, fluid, ...rest }, ref) {
     const mapSize: Record<string, "xs" | "sm" | "md" | "lg" | "xl"> = {
       "rec-sm": "sm",
       "rec-default": "md",
@@ -30,8 +30,11 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
       "rec-2xl": "xl",
     };
 
-    const resolvedSize =
-      typeof size === "string" && mapSize[size] ? mapSize[size] : size;
+    const resolvedSize = fluid
+      ? false
+      : typeof size === "string" && mapSize[size]
+        ? mapSize[size]
+        : size;
 
     return (
       <MUIContainer

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from "./DatePicker";
 import { formControlArgTypes } from "../../../.storybook/commonArgTypes";

package/src/components/DatePicker/DatePicker.tsx

@@ -1,10 +1,47 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
 import "./DatePicker.module.css";
 import { type RecursicaDatePickerProps } from "@recursica/adapter-common";
 
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement> &
-  RecursicaDatePickerProps;
+export type DatePickerProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "value" | "onChange" | "defaultValue"
+> &
+  RecursicaDatePickerProps & {
+    disabled?: boolean;
+    label?: React.ReactNode;
+    assistiveText?: string;
+    error?: React.ReactNode;
+    required?: boolean;
+    withAsterisk?: boolean;
+    placeholder?: string;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+    readOnly?: boolean;
+    formLayout?: "stacked" | "side-by-side";
+    leftSection?: React.ReactNode;
+    labelWithEditIcon?: boolean;
+    onLabelEditClick?: () => void;
+  };
 
-export const DatePicker: React.FC<DatePickerProps> = (props) => {
+export const DatePicker: React.FC<DatePickerProps> = ({
+  disabled,
+  label,
+  assistiveText,
+  error,
+  required,
+  withAsterisk,
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  readOnly,
+  formLayout,
+  leftSection,
+  labelWithEditIcon,
+  onLabelEditClick,
+  ...props
+}) => {
   return <div {...props}>DatePicker</div>;
 };

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -42,12 +42,6 @@ const meta: Meta<DropdownStoryProps> = {
     clearable: {
       control: "boolean",
     },
-    checked: {
-      table: { disable: true },
-    },
-    defaultChecked: {
-      table: { disable: true },
-    },
     containerWidth: {
       table: { disable: true },
     },