@recursica/adapter-mui-v7 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @recursica/adapter-mui-v7
 
+## 1.3.0
+
+### Major Changes
+
+- 07418dd: `Pagination` now renders Recursica Buttons whose style and size come from the Forge manifest, so `RecursicaThemeProvider` needs the `manifest` prop or Pagination throws; MUI's `Pagination` props are no longer passed through.
+- 07418dd: `Grid` is now `LayoutGrid` (`LayoutGrid.Col`) and follows Forge's breakpoint-aware layout grids (columns, gutters, margin); it no longer accepts the `columns` prop. Use MUI's Grid directly for a fixed N-column grid.
+
+### Minor Changes
+
+- 07418dd: New opt-in `breakpointsFromRecManifest` builds MUI `theme.breakpoints.values` from the Forge manifest's layout grids.
+
+### Patch Changes
+
+- fbaba46: Updated @recursica/adapter-common, adapter-tester and storybook-template. FileUpload is capped at the form-field max-width, FileInput keeps a fixed height with a file, and vertical Stepper no longer adds extra step spacing.
+
+  Panel rounds only the corners facing the page and its width follows the Forge max-width token capped to the viewport. RadioGroup/CheckboxGroup side-by-side layouts stack vertically, vertical SegmentedControl uses a concentric container radius, and the Menu WithSubmenus story no longer forces a width.
+
 ## 1.1.0
 
 ### Minor Changes

package/OVERSTYLING.md

@@ -42,6 +42,6 @@ Available Recursica layout tokens:
 
 ## Primitive Layout Components Exemption
 
-Unlike complex UI components (Buttons, Tabs, Inputs) which are strictly protected, **Primitive Layout Components** (`Flex`, `Stack`, `Group`, `Container`, `Grid`) are entirely exempt from the `RecursicaOverStyled` gatekeeper.
+Unlike complex UI components (Buttons, Tabs, Inputs) which are strictly protected, **Primitive Layout Components** (`Flex`, `Stack`, `Group`, `Container`, `LayoutGrid`) are entirely exempt from the `RecursicaOverStyled` gatekeeper.
 
 Because the entire functional purpose of these components is structural layout composition, developers are free to pass any standard MUI width, height, padding, margin, gap, and alignment property directly to them without needing to flag `overStyled={true}`. The internal custom token mapper (such as converting `gap="rec-md"`) is still active natively on these wrappers.

package/SETUP.md

@@ -36,11 +36,12 @@ Before consuming Recursica components, integrate the CSS and design tokens into
    ```tsx
    import { StyledEngineProvider } from "@mui/material/styles";
    import { RecursicaThemeProvider } from "@recursica/adapter-mui-v7";
+   import manifest from "./path/to/recursica_manifest.json";
 
    function App() {
      return (
        <StyledEngineProvider injectFirst>
-         <RecursicaThemeProvider theme="light">
+         <RecursicaThemeProvider theme="light" manifest={manifest}>
            {/* Your App Components */}
          </RecursicaThemeProvider>
        </StyledEngineProvider>
@@ -48,13 +49,35 @@ Before consuming Recursica components, integrate the CSS and design tokens into
    }
    ```
 
+   Pass the parsed `recursica_manifest.json` from your Forge export as `manifest`. Components that are configured by it (currently `Pagination`, for its Button variants) read it from here and throw if it's missing.
+
 3. **Integrate Google Fonts**: Integrating custom fonts depends on how you load fonts in your project and which fonts are specified in your `recursica_variables_scoped.css` (since it is project-dependent). We suggest loading them via Google Fonts, as shown in this example:
 
    ```css
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
    ```
 
-4. **Configure PostCSS Plugin (Optional but Recommended)**: It is highly recommended (but optional) to install the `@recursica/recursica-postcss-vars` plugin to verify that Recursica CSS variables are properly connected in case they change.
+4. **Align MUI's breakpoints with Forge's (Optional but Recommended)**: Forge defines your layout grids (columns, gutters, margin) per breakpoint, and they switch via plain CSS `@media`. MUI's responsive props (`size={{ xs: 12, md: 6 }}`) switch at `theme.breakpoints` instead, which Forge never edits. If the two differ, a page changes layout at two different widths. `breakpointsFromRecManifest` builds breakpoint values from the `recursica_manifest.json` in your Forge export, so both switch at the same widths:
+
+   ```tsx
+   import { ThemeProvider, createTheme } from "@mui/material/styles";
+   import { breakpointsFromRecManifest } from "@recursica/adapter-mui-v7";
+   import manifest from "./path/to/recursica_manifest.json";
+
+   // e.g. { mobile: 0, tablet: 481, default: 781 } when Forge defines extra grids
+   const theme = createTheme({
+     breakpoints: {
+       values: {
+         ...createTheme().breakpoints.values,
+         ...breakpointsFromRecManifest(manifest),
+       },
+     },
+   });
+   ```
+
+   Each non-default grid starts at its `min-width` (a grid with only a `max-width` starts at `0`), and the `default` grid is named `default` and starts one pixel past the widest `max-width`. If your manifest only defines the `default` grid (the stock export), it returns `{}` and your theme is unchanged. MUI's `values` replaces its defaults instead of merging, hence the spread of `createTheme().breakpoints.values`; use Forge's names (`mobile`, `tablet`, ...) in responsive props to switch where Forge does. TypeScript needs a module augmentation of MUI's `BreakpointOverrides` to accept custom names. The result is a plain object you can edit, and nothing applies it automatically. See the [LayoutGrid usage guide](src/components/LayoutGrid/USAGE.md).
+
+5. **Configure PostCSS Plugin (Optional but Recommended)**: It is highly recommended (but optional) to install the `@recursica/recursica-postcss-vars` plugin to verify that Recursica CSS variables are properly connected in case they change.
 
    Install the plugin as a dev dependency:
 
@@ -75,7 +98,7 @@ Before consuming Recursica components, integrate the CSS and design tokens into
    };
    ```
 
-5. **Configure ESLint Plugin (Optional but Recommended)**: It is highly recommended (but optional) to install `eslint-plugin-recursica`, which flags use of the `overStyled` escape-hatch prop so it stays easy to audit.
+6. **Configure ESLint Plugin (Optional but Recommended)**: It is highly recommended (but optional) to install `eslint-plugin-recursica`, which flags use of the `overStyled` escape-hatch prop so it stays easy to audit.
 
    Install the plugin as a dev dependency: