@recursica/adapter-mui-v7 1.0.1 → 1.0.2

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica-adapter-mui-v7.git"
   },
-  "version": "1.0.1",
+  "version": "1.0.2",
   "publishConfig": {
     "access": "public"
   },

package/src/Introduction.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta } from "@storybook/react-vite";
 import { AdaptersContent, MuiLogo } from "@recursica/storybook-template";
 import { VersionInfo } from "./Version";
-import { OverStylingInfo } from "./OverStyling";
 
 const DOCS_URL = "https://recursica.com";
 const FORGE_URL = "https://forge.recursica.com";
@@ -173,11 +172,6 @@ export const Adapters = {
   render: () => <AdaptersContent />,
 };
 
-export const OverStyling = {
-  name: "Over Styling",
-  render: () => <OverStylingInfo />,
-};
-
 export const VersionInfoStory = {
   name: "Version Info",
   render: () => <VersionInfo />,

package/src/components/RecursicaThemeProvider/USAGE.md

@@ -52,9 +52,3 @@ import { RecursicaThemeProvider, Layer } from "@recursica/adapter-mui-v7";
 > - **Required for setup**: `RecursicaThemeProvider` must wrap your entire application, once, near the root, inside `<StyledEngineProvider injectFirst>`. See [SETUP.md](../../../SETUP.md) for the full setup sequence.
 > - **`initLayer0` (default `true`)**: Automatically wraps `children` in a layer-0 [`Layer`](../Layer/USAGE.md). `RecursicaThemeProvider` itself only sets `data-recursica-theme` (`"light"` or `"dark"`, defaults to `"light"`) on `document.documentElement` — without a `Layer` in the tree (either the automatic one or one you add yourself with `initLayer0={false}`), none of Recursica's surface CSS variables resolve.
 > - **Runtime theme switching**: Changing the `theme` prop re-runs the effect and updates `data-recursica-theme` immediately, so you can drive light/dark switching from application state.
-
----
-
-## 4. Key Integration Features & Constraints
-
-`RecursicaThemeProvider` also wires up the `overStyled` development-mode visual auditing helper (see [OVERSTYLING.md](../../../OVERSTYLING.md)) — `recursica.toggleOverStyled()` in the browser console only works once this provider has mounted.

package/src/components/index.ts

@@ -1,6 +1,9 @@
+export * from "@recursica/adapter-common";
+
 export * from "./Accordion";
 export * from "./AssistiveElement";
 export * from "./AutoComplete";
+export type { RecursicaAutocompleteProps } from "./AutoComplete";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./Breadcrumb";
@@ -10,12 +13,17 @@ export * from "./Checkbox";
 export * from "./Chip";
 export * from "./Container";
 export * from "./DatePicker";
+export type { RecursicaDatePickerProps } from "./DatePicker";
 export * from "./Dropdown";
+export type { RecursicaDropdownProps } from "./Dropdown";
 export * from "./FileInput";
+export type { RecursicaFileInputProps } from "./FileInput";
 export * from "./FileUpload";
+export type { RecursicaFileUploadProps } from "./FileUpload";
 export * from "./Flex";
 export * from "./FormControlLayout";
 export * from "./FormControlWrapper";
+export type { RecursicaFormControlWrapperProps } from "./FormControlWrapper";
 export * from "./Grid";
 export * from "./Group";
 export * from "./Heading";
@@ -26,25 +34,35 @@ export * from "./Loader";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NumberInput";
+export type { RecursicaNumberInputProps } from "./NumberInput";
 export * from "./Pagination";
 export * from "./Panel";
+export type { RecursicaPanelProps } from "./Panel";
 export * from "./Popover";
 export * from "./Radio";
+export type { RecursicaRadioGroupProps } from "./Radio";
 export * from "./ReadOnlyField";
 export * from "./SegmentedControl";
 export * from "./Slider";
+export type { RecursicaSliderProps } from "./Slider";
 export * from "./Stack";
 export * from "./Stepper";
 export * from "./Switch";
+export type { RecursicaSwitchGroupProps } from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
 export * from "./TextArea";
+export type { RecursicaTextAreaProps } from "./TextArea";
 export * from "./TextField";
+export type { RecursicaTextFieldProps } from "./TextField";
 export * from "./TimePicker";
+export type { RecursicaTimePickerProps } from "./TimePicker";
 export * from "./Timeline";
 export * from "./Toast";
+export type { RecursicaToastProps } from "./Toast";
 export * from "./Tooltip";
 export * from "./TransferList";
+export type { RecursicaTransferListProps } from "./TransferList";
 export * from "./Typography";
 export * from "./Tree";

package/src/index.ts

@@ -1,194 +1,3 @@
 import "@recursica/adapter-common/style.css";
-import * as rawComponents from "./components";
-import { wrapComponent } from "@recursica/adapter-common";
 
-export * from "@recursica/adapter-common";
-
-// Expose unwrapped structural layout primitives to preserve their polymorphic types
-export const Flex = rawComponents.Flex;
-export const Grid = rawComponents.Grid;
-export const GridCol = rawComponents.GridCol;
-export const Group = rawComponents.Group;
-export const Stack = rawComponents.Stack;
-export const Container = rawComponents.Container;
-export const Typography = rawComponents.Typography;
-
-// Statically wrap and export components to inject overStyled visual highlight in dev mode
-export const Accordion = wrapComponent(
-  rawComponents.Accordion,
-) as typeof rawComponents.Accordion;
-export const AccordionItem = wrapComponent(
-  rawComponents.AccordionItem,
-) as typeof rawComponents.AccordionItem;
-export const AccordionControl = wrapComponent(
-  rawComponents.AccordionControl,
-) as typeof rawComponents.AccordionControl;
-export const AccordionPanel = wrapComponent(
-  rawComponents.AccordionPanel,
-) as typeof rawComponents.AccordionPanel;
-export const AssistiveElement = wrapComponent(
-  rawComponents.AssistiveElement,
-) as typeof rawComponents.AssistiveElement;
-export const AutoComplete = wrapComponent(
-  rawComponents.AutoComplete,
-) as typeof rawComponents.AutoComplete;
-export const Avatar = wrapComponent(
-  rawComponents.Avatar,
-) as typeof rawComponents.Avatar;
-export const Badge = wrapComponent(
-  rawComponents.Badge,
-) as typeof rawComponents.Badge;
-export const Breadcrumb = wrapComponent(
-  rawComponents.Breadcrumb,
-) as typeof rawComponents.Breadcrumb;
-export const Button = wrapComponent(
-  rawComponents.Button,
-) as typeof rawComponents.Button;
-export const Card = wrapComponent(
-  rawComponents.Card,
-) as typeof rawComponents.Card;
-export const Checkbox = wrapComponent(
-  rawComponents.Checkbox,
-) as typeof rawComponents.Checkbox;
-export const CheckboxGroup = wrapComponent(
-  rawComponents.CheckboxGroup,
-) as typeof rawComponents.CheckboxGroup;
-export const Chip = wrapComponent(
-  rawComponents.Chip,
-) as typeof rawComponents.Chip;
-export const DatePicker = wrapComponent(
-  rawComponents.DatePicker,
-) as typeof rawComponents.DatePicker;
-export const Dropdown = wrapComponent(
-  rawComponents.Dropdown,
-) as typeof rawComponents.Dropdown;
-export const FileInput = wrapComponent(
-  rawComponents.FileInput,
-) as typeof rawComponents.FileInput;
-export const FileUpload = wrapComponent(
-  rawComponents.FileUpload,
-) as typeof rawComponents.FileUpload;
-export const FormControlLayout = wrapComponent(
-  rawComponents.FormControlLayout,
-) as typeof rawComponents.FormControlLayout;
-export const FormControlWrapper = wrapComponent(
-  rawComponents.FormControlWrapper,
-) as typeof rawComponents.FormControlWrapper;
-export const Heading = wrapComponent(
-  rawComponents.Heading,
-) as typeof rawComponents.Heading;
-export const HoverCard = wrapComponent(
-  rawComponents.HoverCard,
-) as typeof rawComponents.HoverCard;
-export const Label = wrapComponent(
-  rawComponents.Label,
-) as typeof rawComponents.Label;
-export const Link = wrapComponent(
-  rawComponents.Link,
-) as typeof rawComponents.Link;
-export const Loader = wrapComponent(
-  rawComponents.Loader,
-) as typeof rawComponents.Loader;
-export const Menu = wrapComponent(
-  rawComponents.Menu,
-) as typeof rawComponents.Menu;
-export const MenuItem = wrapComponent(
-  rawComponents.MenuItem,
-) as typeof rawComponents.MenuItem;
-export const MenuDivider = wrapComponent(
-  rawComponents.MenuDivider,
-) as typeof rawComponents.MenuDivider;
-export const Modal = wrapComponent(
-  rawComponents.Modal,
-) as typeof rawComponents.Modal;
-export const NumberInput = wrapComponent(
-  rawComponents.NumberInput,
-) as typeof rawComponents.NumberInput;
-export const Pagination = wrapComponent(
-  rawComponents.Pagination,
-) as typeof rawComponents.Pagination;
-export const Panel = wrapComponent(
-  rawComponents.Panel,
-) as typeof rawComponents.Panel;
-export const PanelFooter = wrapComponent(
-  rawComponents.PanelFooter,
-) as typeof rawComponents.PanelFooter;
-export const Popover = wrapComponent(
-  rawComponents.Popover,
-) as typeof rawComponents.Popover;
-export const Radio = wrapComponent(
-  rawComponents.Radio,
-) as typeof rawComponents.Radio;
-export const RadioGroup = wrapComponent(
-  rawComponents.RadioGroup,
-) as typeof rawComponents.RadioGroup;
-export const ReadOnlyField = wrapComponent(
-  rawComponents.ReadOnlyField,
-) as typeof rawComponents.ReadOnlyField;
-export const SegmentedControl = wrapComponent(
-  rawComponents.SegmentedControl,
-) as typeof rawComponents.SegmentedControl;
-export const Slider = wrapComponent(
-  rawComponents.Slider,
-) as typeof rawComponents.Slider;
-export const Stepper = wrapComponent(
-  rawComponents.Stepper,
-) as typeof rawComponents.Stepper;
-export const Switch = wrapComponent(
-  rawComponents.Switch,
-) as typeof rawComponents.Switch;
-export const SwitchGroup = wrapComponent(
-  rawComponents.SwitchGroup,
-) as typeof rawComponents.SwitchGroup;
-export const Table = wrapComponent(
-  rawComponents.Table,
-) as typeof rawComponents.Table;
-export const Tab = wrapComponent(rawComponents.Tab) as typeof rawComponents.Tab;
-export const TabPanel = wrapComponent(
-  rawComponents.TabPanel,
-) as typeof rawComponents.TabPanel;
-export const Tabs = wrapComponent(
-  rawComponents.Tabs,
-) as typeof rawComponents.Tabs;
-export const Text = wrapComponent(
-  rawComponents.Text,
-) as typeof rawComponents.Text;
-export const TextArea = wrapComponent(
-  rawComponents.TextArea,
-) as typeof rawComponents.TextArea;
-export const TextField = wrapComponent(
-  rawComponents.TextField,
-) as typeof rawComponents.TextField;
-export const TimePicker = wrapComponent(
-  rawComponents.TimePicker,
-) as typeof rawComponents.TimePicker;
-export const Timeline = wrapComponent(
-  rawComponents.Timeline,
-) as typeof rawComponents.Timeline;
-export const TimelineItem = wrapComponent(
-  rawComponents.TimelineItem,
-) as typeof rawComponents.TimelineItem;
-export const Toast = wrapComponent(
-  rawComponents.Toast,
-) as typeof rawComponents.Toast;
-export const Tooltip = wrapComponent(
-  rawComponents.Tooltip,
-) as typeof rawComponents.Tooltip;
-export const TransferList = wrapComponent(
-  rawComponents.TransferList,
-) as typeof rawComponents.TransferList;
-export const Tree = wrapComponent(
-  rawComponents.Tree,
-) as typeof rawComponents.Tree;
-
-export type {
-  RecursicaAutocompleteProps,
-  RecursicaDropdownProps,
-  RecursicaFormControlWrapperProps,
-  RecursicaNumberInputProps,
-  RecursicaSliderProps,
-  RecursicaTextAreaProps,
-  RecursicaTextFieldProps,
-  RecursicaTimePickerProps,
-  RecursicaToastProps,
-} from "./components";
+export * from "./components";

package/src/OverStyling.tsx

@@ -1,87 +0,0 @@
-import ReactMarkdown from "react-markdown";
-import { Box, Paper, Divider } from "@mui/material";
-import {
-  Container,
-  Stack,
-  Text as RawText,
-  Heading,
-  Switch as RawSwitch,
-} from "./components";
-import { Button as RawButton } from "./components/Button/Button";
-import {
-  useGlobalOverStyled,
-  toggleGlobalOverStyled,
-  wrapComponent,
-} from "@recursica/adapter-common";
-import overStylingDoc from "../OVERSTYLING.md?raw";
-
-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 }}>
-        <Box className="markdown-body">
-          <ReactMarkdown>{overStylingDoc}</ReactMarkdown>
-        </Box>
-
-        <Divider sx={{ my: 4 }} />
-
-        <Heading order={6} mb={2}>
-          Try It Yourself
-        </Heading>
-
-        <Stack direction="row" alignItems="center" spacing="rec-sm" mb="rec-md">
-          <Switch
-            label="Highlight Over-Styled Components"
-            checked={isHighlightActive}
-            onChange={() => toggleGlobalOverStyled()}
-          />
-        </Stack>
-
-        <Text mb={4}>
-          Below is a side-by-side comparison. The first is a standard Recursica
-          Button protected by the design tokens mapping. The second flagrantly
-          forces <code>overStyled={`{true}`}</code>, allowing MUI's native
-          styling generics to punch right through the sandbox layout.
-        </Text>
-
-        <Stack direction="row" spacing="rec-default">
-          <Box>
-            <Text
-              variant="caption"
-              overStyled
-              sx={{ color: "text.secondary", mb: 1, display: "block" }}
-            >
-              Strict Baseline (Default)
-            </Text>
-            <Button>Standard UI Kit Button</Button>
-          </Box>
-          <Box>
-            <Text
-              variant="caption"
-              overStyled
-              sx={{ color: "text.secondary", mb: 1, display: "block" }}
-            >
-              overStyled={`{true}`}
-            </Text>
-            <Button
-              overStyled={true}
-              style={{
-                backgroundColor: "pink",
-                color: "black",
-                borderRadius: "24px",
-                padding: "8px 16px",
-              }}
-            >
-              Unsafe Pink Marketing Button
-            </Button>
-          </Box>
-        </Stack>
-      </Paper>
-    </Container>
-  );
-};