@recursica/mui-adapter 0.36.0 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @recursica/mui-adapter
 
+## 0.38.0
+
+### Minor Changes
+
+- c31d5ae: Added an `animate` prop to `Loader` (default `true`) — set `false` to freeze its CSS animation for a deterministic render, e.g. a visual-regression snapshot. The `Static*` Loader stories now use it, and the animated `Default`/`LayerTwoOval` stories are excluded from adapter-tester's visual regression.
+
+### Patch Changes
+
+- c31d5ae: Fixed `Table` currency columns so header and footer cells right-align to match value cells. `Table.Th`/`Table.Cell` header context now supports `variant="currency"`.
+- c31d5ae: Added `leftSection` support to `TimePicker` for an optional leading icon, matching `TextField`'s convention.
+- Updated dependencies [c31d5ae]
+- Updated dependencies [c31d5ae]
+- Updated dependencies [c31d5ae]
+  - @recursica/adapter-common@0.27.0
+
+## 0.37.0
+
+### Minor Changes
+
+- 786d870: Version bumped
+
 ## 0.36.0
 
 ### Minor Changes

package/SETUP.md

@@ -24,16 +24,14 @@ npm install @mui/material@>=7.0.0 @emotion/react@>=11.14.0 @emotion/styled@>=11.
 
 Before consuming Recursica components, integrate the CSS and design tokens into your application:
 
-1. **Theme Files Setup**: When you install `@recursica/mui-adapter`, a postinstall script automatically creates default theme files (including `recursica_variables_scoped.css` and JSON config files) in your project root. If they are missing, simply run `npm install` to create them. To customize or update these variables, you should use [Forge Recursica](https://forge.recursica.com) to export the updated theme files into your project.
-   > [!IMPORTANT] > **AI Agent Directive**: The theme files (`recursica_variables_scoped.css` and associated JSON files) are created at the project root automatically via `npm install`. If they are not present, instruct the user to run `npm install`. Do NOT attempt to generate, mock, or write a placeholder CSS/JSON file yourself. When updates to these files are needed, instruct the user to export them from [Forge Recursica](https://forge.recursica.com) and replace the existing ones.
-2. **Integrate CSS**: Import `recursica_variables_scoped.css` and the MUI adapter CSS `style.css` into your application entrypoint (e.g., `main.tsx` or `App.tsx`).
+1. **Integrate CSS**: Import `recursica_variables_scoped.css` and the MUI adapter CSS `style.css` into your application entrypoint (e.g., `main.tsx` or `App.tsx`).
 
    ```tsx
    import "./path/to/recursica_variables_scoped.css"; // Recursica theme variables
    import "@recursica/mui-adapter/style.css"; // MUI adapter styles
    ```
 
-3. **Configure MUI's CSS Injection & Theme Provider**: Because the Recursica UI components use native CSS modules, they must be given a higher priority than MUI's default engine styles. You **must** wrap your application root in `<StyledEngineProvider injectFirst>` and `<RecursicaThemeProvider theme="light">` to correctly cascade design token properties. By default `RecursicaThemeProvider` also wraps its children in a `<Layer layer={0}>` (via the `initLayer0` prop, which defaults to `true`), so the base page surface/border/elevation variables resolve automatically with no extra setup:
+2. **Configure MUI's CSS Injection & Theme Provider**: Because the Recursica UI components use native CSS modules, they must be given a higher priority than MUI's default engine styles. You **must** wrap your application root in `<StyledEngineProvider injectFirst>` and `<RecursicaThemeProvider theme="light">` to correctly cascade design token properties. By default `RecursicaThemeProvider` also wraps its children in a `<Layer layer={0}>` (via the `initLayer0` prop, which defaults to `true`), so the base page surface/border/elevation variables resolve automatically with no extra setup:
 
    ```tsx
    import { StyledEngineProvider } from "@mui/material/styles";
@@ -50,13 +48,13 @@ Before consuming Recursica components, integrate the CSS and design tokens into
    }
    ```
 
-4. **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:
+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");
    ```
 
-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.
+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.
 
    Install the plugin as a dev dependency:
 
@@ -76,3 +74,19 @@ 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.
+
+   Install the plugin as a dev dependency:
+
+   ```bash
+   npm install eslint-plugin-recursica --save-dev
+   ```
+
+   Then, add it to your `eslint.config.js`:
+
+   ```javascript
+   import recursica from "eslint-plugin-recursica";
+
+   export default [recursica.configs.recommended];
+   ```

package/dist/index.d.ts

@@ -2165,6 +2165,12 @@ export declare interface RecursicaLoaderProps {
     variant?: "oval" | "bars" | "dots";
     /** Map to Recursica sizes */
     size?: "sm" | "md" | "lg" | RecursicaSize;
+    /** Freezes the loader's CSS animation when `false` — the loader still
+     * renders its normal shape, just without motion. Defaults to `true` (the
+     * normal, animated loader). Use `false` for a deterministic rendering,
+     * e.g. a visual-regression snapshot, where a moving animation would
+     * otherwise diff differently every run. */
+    animate?: boolean;
 }
 
 /**
@@ -2449,6 +2455,8 @@ export declare interface RecursicaTableHeaderCellProps {
     sorted?: "asc" | "desc" | false;
     /** Disables the header cell, dimming it and applying the disabled cell colors */
     disabled?: boolean;
+    /** `"currency"` right-aligns the header cell to match a currency column's value cells */
+    variant?: "default" | "currency";
 }
 
 /**
@@ -2591,6 +2599,8 @@ declare interface RecursicaTimePickerProps_2 {
     minTime?: string;
     /** Maximum possible time string. Format is `HH:mm` normally, or `HH:mm:ss` when `withSeconds` is true. */
     maxTime?: string;
+    /** Section rendered inside the time field on the left (e.g. icon). Naming rationale: see `RecursicaTextFieldProps.leftSection`. */
+    leftSection?: default_2.ReactNode;
 }
 
 export declare interface RecursicaToastProps extends RecursicaToastProps_2 {