@recursica/mui-adapter 0.14.0 → 0.16.0

package/src/components/Panel/USAGE.md

@@ -0,0 +1,103 @@
+# Panel - Usage Guide
+
+This document describes how to integrate and use the `Panel` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Panel } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Panel } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Panel>
+      <Text>This is a clean, structured visual container.</Text>
+    </Panel>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+## 1. Mapping to MUI Drawer
+
+**Decision:** Panel maps to MUI's `Drawer` component, not `Paper` or `Card`.
+
+**Implementation:** Per the Recursica design system specification, "Panels slide in or expand from the edge of the screen to reveal additional content or functionality." This is the exact behavior of MUI's `Drawer` component, which provides:
+
+- Slide-in animation from any screen edge (using the `anchor` prop)
+- Backdrop/overlay support
+- Focus trap and overlay portal management
+- Internal scroll lock when open
+
+---
+
+## 2. Token Namespace: `panel`
+
+**Decision:** The CSS module exclusively uses variables from the `--recursica_ui-kit_components_panel_*` namespace.
+
+**Implementation:** The Recursica token system defines the `panel` namespace covering:
+
+- Geometry: border-radius, border-size, min-width (200px), max-width (960px)
+- Content padding: content-horizontal-padding (xl), content-vertical-padding (lg)
+- Header/Footer padding: header-footer-horizontal-padding (xl), header-footer-vertical-padding (md)
+- Spacing: header-close-gap (md), footer-button-gap (md)
+- Divider: divider-size (1px), divider-color
+- Elevation: elevation-3
+- Colors (layer-aware): background, border-color, content, divider-color, header-footer-background, title
+- Non-CSS: header-style ("h3")
+
+No tokens from other component namespaces are referenced.
+
+---
+
+## 3. Default Placement Override
+
+**Decision:** Use `placement` instead of `position` for configuring slide-out direction, and default it to `"right"`.
+
+**Implementation:** The prop was renamed from `position` to `placement` to prevent collision with the CSS `position` keyword, which is strictly blocked by the styling gatekeeper (`BLOCKED_STYLING_KEYS`). This allows configuring the drawer direction natively while maintaining strict design-system boundaries. The `placement="right"` default is mapped internally to MUI Drawer's `anchor` prop before any other sanitized props are applied. Right-side panels are the most common pattern for supplementary content, settings, and detail views.
+
+---
+
+## 4. Custom Panel.Footer
+
+**Decision:** A custom `Panel.Footer` sub-component is provided. MUI's Drawer does not have a native footer.
+
+**Implementation:** `Panel.Footer` is a `<div>` with styling referencing Recursica CSS variables for:
+
+- `header-footer-background` and `header-footer-padding` tokens
+- Top divider using `divider-size` and `divider-color`
+- `footer-button-gap` for action button spacing
+- `margin-top: auto` to push the footer to the bottom
+
+---
+
+## 5. Visibility Mapping (`opened` -> `open`)
+
+**Decision:** Accept `opened` prop to match the standard Recursica component API.
+
+**Implementation:** MUI Drawer natively expects the `open` boolean prop. The wrapper maps the incoming framework-agnostic `opened` prop to MUI's `open={Boolean(opened)}`, allowing consistent usage across both adapter implementations.

package/src/components/Radio/USAGE.md

@@ -0,0 +1,36 @@
+# Radio - Usage Guide
+
+This document describes how to integrate and use the `Radio` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Radio } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Radio } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <Radio label="Option 1" name="radio-group" value="1" defaultChecked />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/ReadOnlyField/USAGE.md

@@ -0,0 +1,36 @@
+# ReadOnlyField - Usage Guide
+
+This document describes how to integrate and use the `ReadOnlyField` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { ReadOnlyField } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { ReadOnlyField } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <ReadOnlyField label="API Key" value="sk_test_123456789" copyable />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/SegmentedControl/USAGE.md

@@ -0,0 +1,36 @@
+# SegmentedControl - Usage Guide
+
+This document describes how to integrate and use the `SegmentedControl` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { SegmentedControl } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { SegmentedControl } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <SegmentedControl data={["Preview", "Code", "Edit"]} />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Slider/USAGE.md

@@ -0,0 +1,36 @@
+# Slider - Usage Guide
+
+This document describes how to integrate and use the `Slider` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Slider } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Slider } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <Slider defaultValue={50} min={0} max={100} label="Volume" />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Stack/USAGE.md

@@ -0,0 +1,41 @@
+# Stack - Usage Guide
+
+This document describes how to integrate and use the `Stack` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Stack } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Stack } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Stack gap="md" align="stretch">
+      <Text>Item 1</Text>
+      <Text>Item 2</Text>
+    </Stack>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Stepper/USAGE.md

@@ -0,0 +1,48 @@
+# Stepper - Usage Guide
+
+This document describes how to integrate and use the `Stepper` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Stepper } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Stepper } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Stepper active={1}>
+      <Stepper.Step label="First step" description="Create account" />
+      <Stepper.Step label="Second step" description="Verify email" />
+    </Stepper>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+- **Compositional API Dropped:** Mantine manages stepper state and content via `<Stepper.Step>` and `<Stepper.Completed>`. MUI delegates content rendering to the developer and focuses purely on the stepper visual layout using `<Step>`, `<StepLabel>`, etc.
+- **Monolithic API Adopted:** Following architectural review, we have abandoned the fabricated context wrappers for `mui-adapter`. We now natively export `Stepper`, `Step`, `StepLabel`, `StepButton`, and `StepConnector` wrapping their `@mui/material` counterparts. Developers are expected to manage the active step logic and content rendering outside the `Stepper` component, consistent with MUI patterns. Storybook tests have been updated to reflect this divergence while retaining core visual compatibility.

package/src/components/Switch/USAGE.md

@@ -0,0 +1,36 @@
+# Switch - Usage Guide
+
+This document describes how to integrate and use the `Switch` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Switch } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Switch } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <Switch label="Enable notifications" defaultChecked />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Table/USAGE.md

@@ -0,0 +1,51 @@
+# Table - Usage Guide
+
+This document describes how to integrate and use the `Table` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Table } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from 'react';
+import { Table } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Email</Table.Tr>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        <Table.Tr>
+          <Table.Td>Jane Doe</Table.Tr>
+          <Table.Td>jane@example.com</Table.Tr>
+        </Table.Tr>
+      </Table.Tbody>
+    </Table>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Tabs/USAGE.md

@@ -0,0 +1,52 @@
+# Tabs - Usage Guide
+
+This document describes how to integrate and use the `Tabs` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Tabs } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Tabs } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Tabs defaultValue="home">
+      <Tabs.List>
+        <Tabs.Tab value="home">Home</Tabs.Tab>
+        <Tabs.Tab value="profile">Profile</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="home">Home content</Tabs.Panel>
+      <Tabs.Panel value="profile">Profile content</Tabs.Panel>
+    </Tabs>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+- **Compositional API Dropped:** Mantine uses `<Tabs.List>`, `<Tabs.Tab>`, and `<Tabs.Panel>` natively with implicit context from `<Tabs>`. MUI relies on `@mui/lab/TabContext` and separates `Tabs` and `TabPanel`.
+- **Monolithic API Adopted:** Following architectural review, we have opted to drop the broken dot-notation wrappers for `mui-adapter`. We now natively export `Tabs` (MUI List), `Tab` (MUI Item), and `TabPanel` (from `@mui/lab`). Developers must use `TabContext` (from `@mui/lab`) to manage state, just like native MUI. Storybook and visual regression tests have been updated to reflect this divergence while retaining core property mapping compatibility.

package/src/components/Text/USAGE.md

@@ -0,0 +1,40 @@
+# Text - Usage Guide
+
+This document describes how to integrate and use the `Text` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Text } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Text } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Text size="md" color="dimmed">
+      This is some styled body text.
+    </Text>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/TextArea/USAGE.md

@@ -0,0 +1,38 @@
+# TextArea - Usage Guide
+
+This document describes how to integrate and use the `TextArea` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { TextArea } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { TextArea } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <TextArea label="Comments" placeholder="Leave your comments here..." />
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/TextField/USAGE.md

@@ -0,0 +1,38 @@
+# TextField - Usage Guide
+
+This document describes how to integrate and use the `TextField` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { TextField } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { TextField } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <TextField label="Username" placeholder="Enter your username" required />
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/TimePicker/USAGE.md

@@ -0,0 +1,36 @@
+# TimePicker - Usage Guide
+
+This document describes how to integrate and use the `TimePicker` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { TimePicker } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { TimePicker } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <TimePicker label="Select Time" placeholder="Pick a time" />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Timeline/USAGE.md

@@ -0,0 +1,41 @@
+# Timeline - Usage Guide
+
+This document describes how to integrate and use the `Timeline` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Timeline } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Timeline } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Timeline active={1}>
+      <Timeline.Item title="Step 1">Created branch</Timeline.Item>
+      <Timeline.Item title="Step 2">Pushed changes</Timeline.Item>
+    </Timeline>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.