@recursica/mui-adapter 0.1.0 → 0.3.0

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

@@ -1,3 +1,9 @@
 import { default as React } from 'react';
-export type ContainerProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Container: React.FC<ContainerProps>;
+import { ContainerProps as MUIContainerProps } from '@mui/material';
+import { RecursicaSpacing } from '../../utils/filterStylingProps';
+export interface RecursicaContainerProps {
+    children?: React.ReactNode;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | RecursicaSpacing | (string & {}) | number;
+}
+export type ContainerProps = Omit<MUIContainerProps, "maxWidth"> & RecursicaContainerProps;
+export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,26 @@
 import { default as React } from 'react';
-export type FlexProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Flex: React.FC<FlexProps>;
+import { BoxProps as MUIBoxProps } from '@mui/material';
+import { RecursicaSpacing, OmitSx } from '../../utils/filterStylingProps';
+export interface RecursicaFlexProps {
+    /**
+     * Content to render inside the flex container.
+     */
+    children?: React.ReactNode;
+    /**
+     * The gap between flex items. Accepts standard MUI spacing or Recursica gap tokens
+     * (e.g. "rec-md").
+     */
+    gap?: string | number | RecursicaSpacing;
+    /**
+     * The vertical gap between flex items when wrapping. Accepts standard MUI spacing
+     * or Recursica gap tokens.
+     */
+    rowGap?: string | number | RecursicaSpacing;
+    /**
+     * The horizontal gap between flex items when wrapping. Accepts standard MUI spacing
+     * or Recursica gap tokens.
+     */
+    columnGap?: string | number | RecursicaSpacing;
+}
+export type FlexProps = OmitSx<MUIBoxProps & RecursicaFlexProps>;
+export declare const Flex: React.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,11 @@
 import { default as React } from 'react';
-export type GroupProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Group: React.FC<GroupProps>;
+import { StackProps as MUIStackProps } from '@mui/material';
+import { RecursicaSpacing, OmitSx } from '../../utils/filterStylingProps';
+export interface RecursicaGroupProps {
+    children?: React.ReactNode;
+    gap?: MUIStackProps["spacing"] | RecursicaSpacing;
+    rowGap?: MUIStackProps["spacing"] | RecursicaSpacing;
+    columnGap?: MUIStackProps["spacing"] | RecursicaSpacing;
+}
+export type GroupProps = OmitSx<Omit<MUIStackProps, "spacing" | "direction"> & RecursicaGroupProps>;
+export declare const Group: React.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,14 @@
 import { default as React } from 'react';
-export type LinkProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Link: React.FC<LinkProps>;
+import { LinkProps as MUILinkProps } from '@mui/material';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface RecursicaLinkProps {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    component?: React.ElementType;
+}
+export type LinkProps = RecursicaOverStyled<Omit<MUILinkProps, "underline"> & RecursicaLinkProps>;
+export declare const Link: React.ForwardRefExoticComponent<(Omit<Omit<Omit<MUILinkProps, "underline"> & RecursicaLinkProps, "style" | "className" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "backgroundColor" | "sx"> & import('../../utils/filterStylingProps').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<MUILinkProps, "underline"> & RecursicaLinkProps & {
+    overStyled: true;
+}, "ref">) & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -1,3 +1,9 @@
 import { default as React } from 'react';
-export type StackProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Stack: React.FC<StackProps>;
+import { StackProps as MUIStackProps } from '@mui/material';
+import { RecursicaSpacing, OmitSx } from '../../utils/filterStylingProps';
+export interface RecursicaStackProps {
+    children?: React.ReactNode;
+    gap?: MUIStackProps["spacing"] | RecursicaSpacing;
+}
+export type StackProps = OmitSx<Omit<MUIStackProps, "spacing"> & RecursicaStackProps>;
+export declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,19 @@
 import { default as React } from 'react';
-export type TextProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Text: React.FC<TextProps>;
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+import { TypographyProps as MuiTypographyProps } from '@mui/material';
+export type TextVariant = "body" | "body-small" | "caption" | "overline" | "subtitle" | "subtitle-small";
+export type RecursicaTextProps = Omit<MuiTypographyProps, "variant"> & {
+    variant?: TextVariant;
+    children?: React.ReactNode;
+    component?: React.ElementType;
+};
+export type TextProps = RecursicaOverStyled<RecursicaTextProps>;
+export declare const Text: React.ForwardRefExoticComponent<(Omit<Omit<RecursicaTextProps, "style" | "className" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "backgroundColor" | "sx"> & import('../../utils/filterStylingProps').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<MuiTypographyProps, "variant"> & {
+    variant?: TextVariant;
+    children?: React.ReactNode;
+    component?: React.ElementType;
+} & {
+    overStyled: true;
+}, "ref">) & React.RefAttributes<HTMLElement>>;

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

@@ -1,3 +1,18 @@
 import { default as React } from 'react';
-export type TitleProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Title: React.FC<TitleProps>;
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+import { TypographyProps as MuiTypographyProps } from '@mui/material';
+export type RecursicaTitleProps = Omit<MuiTypographyProps, "variant"> & {
+    order?: 1 | 2 | 3 | 4 | 5 | 6;
+    children?: React.ReactNode;
+    component?: React.ElementType;
+};
+export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
+export declare const Title: React.ForwardRefExoticComponent<(Omit<Omit<RecursicaTitleProps, "style" | "className" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "backgroundColor" | "sx"> & import('../../utils/filterStylingProps').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<MuiTypographyProps, "variant"> & {
+    order?: 1 | 2 | 3 | 4 | 5 | 6;
+    children?: React.ReactNode;
+    component?: React.ElementType;
+} & {
+    overStyled: true;
+}, "ref">) & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { TypographyProps as MuiTypographyProps } from '@mui/material';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export type TypographyProps = RecursicaOverStyled<Omit<MuiTypographyProps, "variant"> & {
+    /**
+     * Internal typography class mapping
+     */
+    typographyClass: string;
+    component?: React.ElementType;
+}>;
+export declare const Typography: React.ForwardRefExoticComponent<(Omit<Omit<Omit<MuiTypographyProps, "variant"> & {
+    /**
+     * Internal typography class mapping
+     */
+    typographyClass: string;
+    component?: React.ElementType;
+}, "style" | "className" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "backgroundColor" | "sx"> & import('../../utils/filterStylingProps').ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<MuiTypographyProps, "variant"> & {
+    /**
+     * Internal typography class mapping
+     */
+    typographyClass: string;
+    component?: React.ElementType;
+} & {
+    overStyled: true;
+}, "ref">) & React.RefAttributes<HTMLElement>>;

package/dist/src/utils/filterStylingProps.d.ts

@@ -25,9 +25,12 @@ export declare const BLOCKED_STYLING_KEYS: readonly ["className", "classes", "st
 export type BlockedStylingKeys = (typeof BLOCKED_STYLING_KEYS)[number];
 export type RecursicaSpacing = "rec-none" | "rec-sm" | "rec-default" | "rec-md" | "rec-lg" | "rec-xl" | "rec-2xl";
 export type RecursicaSize = "small" | "default" | "large";
+export declare const SPACING_MAP: Record<string, string>;
 export type ForbiddenStyles = {
     [K in BlockedStylingKeys]?: never;
 };
+export type OmitSx<T> = Omit<T, "sx">;
+export declare function filterSxProp<T extends Record<string, unknown>>(props: T): Omit<T, "sx">;
 export type RecursicaOverStyled<T> = (Omit<T, BlockedStylingKeys> & ForbiddenStyles & {
     overStyled?: false | undefined;
 }) | (T & {

package/package.json

@@ -4,14 +4,16 @@
   "private": false,
   "homepage": "https://github.com/borderux/recursica/tree/main/packages/mui-adapter",
   "author": "hi@borderux.com",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/borderux/recursica/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/borderux/recursica.git"
+    "url": "git+https://github.com/borderux/recursica.git",
+    "directory": "packages/mui-adapter"
   },
-  "version": "0.1.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -61,7 +63,6 @@
     "@storybook/addon-a11y": "^10.3.3",
     "@storybook/addon-docs": "^10.3.3",
     "@storybook/addon-mcp": "^0.4.2",
-    "@storybook/addon-onboarding": "^10.3.3",
     "@storybook/addon-vitest": "^10.3.3",
     "@storybook/react-vite": "^10.3.3",
     "@types/react": "^19.1.2",
@@ -81,6 +82,7 @@
     "storybook": "^10.3.3",
     "storybook-dark-mode": "^5.0.0",
     "strip-literal": "^3.0.0",
+    "ts-morph": "^28.0.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5",

package/src/Introduction.stories.tsx

@@ -0,0 +1,183 @@
+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";
+
+import { Container, Box, Group, Title, Text, Link } from "./components";
+
+function IntroductionContent() {
+  return (
+    <Container size="md" style={{ padding: "32px 0", maxWidth: 640 }}>
+      <Group gap="rec-md" mb={2}>
+        <MuiLogo width={40} height={40} />
+        <Box>
+          <Title order={1} m={0}>
+            Recursica Design System (MUI Adapter)
+          </Title>
+          <Link href="https://mui.com" target="_blank" rel="noreferrer">
+            mui.com
+          </Link>
+        </Box>
+      </Group>
+      <Text mb={4}>
+        This Storybook showcases the Recursica design system implemented for the{" "}
+        <strong>Material UI (MUI) Kit</strong>. It provides reusable components
+        that map our design tokens to MUI's robust component layer.
+      </Text>
+
+      <Box component="section" sx={{ mb: 4 }}>
+        <Title order={2} mb={1}>
+          Looking for another UI Kit?
+        </Title>
+        <Text>
+          Are you using a different UI Kit (like Mantine)? Recursica provides
+          multiple adapters for different frameworks.
+        </Text>
+        <Box sx={{ mt: 2 }}>
+          <a
+            href="./?path=/story/introduction--adapters"
+            target="_parent"
+            className="adapter-btn"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor:
+                "var(--recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background)",
+              color:
+                "var(--recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text)",
+              textDecoration: "none",
+              borderRadius:
+                "var(--recursica_ui-kit_components_button_variants_sizes_default_properties_border-radius)",
+              height:
+                "var(--recursica_ui-kit_components_button_variants_sizes_default_properties_height)",
+              padding:
+                "0 var(--recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding)",
+              fontFamily:
+                "var(--recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family)",
+              fontSize:
+                "var(--recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size)",
+              fontWeight:
+                "var(--recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight)",
+              boxShadow:
+                "var(--recursica_ui-kit_components_button_variants_styles_solid_properties_elevation)",
+              border:
+                "var(--recursica_ui-kit_components_button_variants_styles_solid_properties_border-size) solid var(--recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color)",
+              transition: "opacity 0.2s ease",
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.opacity = "0.85";
+              e.currentTarget.style.color =
+                "var(--recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover)";
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.opacity = "1";
+              e.currentTarget.style.color =
+                "var(--recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text)";
+            }}
+          >
+            View Supported Adapters
+          </a>
+        </Box>
+      </Box>
+
+      <Box component="section" sx={{ mb: 4 }}>
+        <Title order={2} mb={1}>
+          Installation
+        </Title>
+        <Text>To install the MUI adapter in your project, run:</Text>
+        <Box
+          component="pre"
+          sx={{
+            p: 1.5,
+            bgcolor: "grey.100",
+            borderRadius: 1,
+            fontSize: 13,
+            mt: 1,
+          }}
+        >
+          <code>
+            npm install @recursica/mui-adapter @mui/material @emotion/react
+            @emotion/styled
+          </code>
+        </Box>
+      </Box>
+
+      <Box component="section" sx={{ mb: 4 }}>
+        <Title order={2} mb={1}>
+          Tokens
+        </Title>
+        <Text>
+          Raw design tokens (colors, sizes, font weights, opacities, etc.) that
+          feed the theme and components. These are the primitive values defined
+          in your token set and exposed as CSS custom properties.
+        </Text>
+      </Box>
+
+      <Box component="section" sx={{ mb: 4 }}>
+        <Title order={2} mb={1}>
+          Theme
+        </Title>
+        <Text>
+          Brand and theme layer built on top of tokens. Typography types,
+          dimensions, and layout grids are defined here. Theme uses the tokens
+          and exposes both CSS variables and helper classes (e.g. typography
+          classes) for consistent styling across the product.
+        </Text>
+      </Box>
+
+      <Box component="section" sx={{ mb: 4 }}>
+        <Title order={2} mb={1}>
+          Configuring Recursica
+        </Title>
+        <Text>
+          To modify the Recursica configuration (tokens, brand, theme), go to{" "}
+          <Link href={FORGE_URL} target="_blank" rel="noopener noreferrer">
+            {FORGE_URL}
+          </Link>
+          . Changes there drive the tokens and theme you see in this Storybook.
+        </Text>
+      </Box>
+
+      <Box component="section" sx={{ mb: 4 }}>
+        <Title order={2} mb={1}>
+          Documentation
+        </Title>
+        <Text>
+          For full documentation, guides, and API reference, visit{" "}
+          <Link href={DOCS_URL} target="_blank" rel="noopener noreferrer">
+            {DOCS_URL}
+          </Link>
+          .
+        </Text>
+      </Box>
+    </Container>
+  );
+}
+
+const meta = {
+  title: "Introduction",
+} satisfies Meta;
+
+export default meta;
+
+export const Welcome = {
+  render: () => <IntroductionContent />,
+};
+
+export const Adapters = {
+  render: () => <AdaptersContent />,
+};
+
+export const OverStyling = {
+  name: "Over Styling",
+  render: () => <OverStylingInfo />,
+};
+
+export const VersionInfoStory = {
+  name: "Version Info",
+  render: () => <VersionInfo />,
+};

package/src/{OverStyling.stories.tsx → OverStyling.tsx}

@@ -1,21 +1,14 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Container,
-  Paper,
-  Typography as Text,
-  Divider,
-  Stack,
-  Box,
-} from "@mui/material";
+import { Paper, Divider } from "@mui/material";
+import { Container, Stack, Box, Text, Title } from "./components";
 import { Button } from "./components/Button/Button";
 
-const OverStylingInfo = () => {
+export const OverStylingInfo = () => {
   return (
-    <Container maxWidth="md" sx={{ py: 4 }}>
+    <Container size="md" style={{ padding: "32px 0" }}>
       <Paper variant="outlined" sx={{ p: 4, borderRadius: 2 }}>
-        <Text variant="h4" mb={2}>
+        <Title order={4} mb={2}>
           Over Styling (<code>overStyled</code>)
-        </Text>
+        </Title>
         <Text mb={2}>
           By default, all Recursica components are strictly sandboxed. This
           means they are protected against arbitrary styling configurations
@@ -32,9 +25,9 @@ const OverStylingInfo = () => {
           <code>overStyled={`{true}`}</code>.
         </Text>
 
-        <Text variant="h6" mb={1} mt={4}>
+        <Title order={6} mb={1} mt={4}>
           The Core Philosophy
-        </Text>
+        </Title>
         <Text mb={1}>
           **You should not over-style components.** Using{" "}
           <code>overStyled</code> explicitly signifies that you are breaking
@@ -78,9 +71,9 @@ const OverStylingInfo = () => {
 
         <Divider sx={{ mb: 4 }} />
 
-        <Text variant="h6" mb={1}>
+        <Title order={6} mb={1}>
           Permitted Layout Properties
-        </Text>
+        </Title>
         <Text mb={1}>
           Unlike deep styling bounds (colors, typography, padding, dimensions),
           external <strong>layout spacing properties</strong> like Margins (
@@ -114,7 +107,7 @@ const OverStylingInfo = () => {
             </Text>
           </li>
         </Box>
-        <Text mb={1} sx={{ fontWeight: 500 }}>
+        <Text mb={1} overStyled sx={{ fontWeight: 500 }}>
           Available Recursica Layout Tokens:
         </Text>
         <Box component="ul" sx={{ pl: 4, mb: 4 }}>
@@ -157,9 +150,9 @@ const OverStylingInfo = () => {
 
         <Divider sx={{ mb: 4 }} />
 
-        <Text variant="h6" mb={1}>
+        <Title order={6} mb={1}>
           Primitive Layout Components Exemption
-        </Text>
+        </Title>
         <Text mb={1}>
           Unlike complex UI components (Buttons, Tabs, Inputs) which are
           strictly protected, <strong>Primitive Layout Components</strong> (
@@ -179,9 +172,9 @@ const OverStylingInfo = () => {
 
         <Divider sx={{ mb: 4 }} />
 
-        <Text variant="h6" mb={2}>
+        <Title order={6} mb={2}>
           Live Example
-        </Text>
+        </Title>
         <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
@@ -189,26 +182,27 @@ const OverStylingInfo = () => {
           styling generics to punch right through the sandbox layout.
         </Text>
 
-        <Stack direction="row" spacing={4}>
+        <Stack direction="row" gap="rec-default">
           <Box>
             <Text
               variant="caption"
+              overStyled
               sx={{ color: "text.secondary", mb: 1, display: "block" }}
             >
               Strict Baseline (Default)
             </Text>
-            {/* Note: In mui-adapter, Button is currently a stub so we just pass standard React props */}
             <Button>Standard UI Kit Button</Button>
           </Box>
           <Box>
             <Text
               variant="caption"
+              overStyled
               sx={{ color: "text.secondary", mb: 1, display: "block" }}
             >
               overStyled={`{true}`}
             </Text>
-            {/* Note: Button props are just standard HTML div props for the stub */}
             <Button
+              overStyled={true}
               style={{
                 backgroundColor: "pink",
                 color: "black",
@@ -224,12 +218,3 @@ const OverStylingInfo = () => {
     </Container>
   );
 };
-
-const meta: Meta<typeof OverStylingInfo> = {
-  title: "Introduction/Over Styling",
-  component: OverStylingInfo,
-};
-
-export default meta;
-
-export const Default: StoryObj<typeof OverStylingInfo> = {};

package/src/Version.tsx

@@ -0,0 +1,37 @@
+import ReactMarkdown from "react-markdown";
+import { Paper, Divider } from "@mui/material";
+import { Container, Title, Group, Link, Box } from "./components";
+import pkg from "../package.json";
+import changelog from "../CHANGELOG.md?raw";
+
+export const VersionInfo = () => {
+  return (
+    <Container size="md" style={{ padding: "32px 0" }}>
+      <Paper variant="outlined" sx={{ p: 4, borderRadius: 2 }}>
+        <Title order={1} mb={1}>
+          MUI Adapter v{pkg.version}
+        </Title>
+        <Group mb={4} gap="rec-md">
+          <Link
+            href="https://github.com/borderux/recursica"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub Repository
+          </Link>
+          <Link
+            href="https://recursica.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation & Website
+          </Link>
+        </Group>
+        <Divider sx={{ mb: 4 }} />
+        <Box className="markdown-body">
+          <ReactMarkdown>{changelog}</ReactMarkdown>
+        </Box>
+      </Paper>
+    </Container>
+  );
+};

package/src/components/Accordion/Accordion.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Accordion> = {
   title: "UI-Kit/🚧 Accordion",
   component: Accordion,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/AssistiveElement/AssistiveElement.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof AssistiveElement> = {
   title: "UI-Kit/🚧 AssistiveElement",
   component: AssistiveElement,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Avatar/Avatar.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Avatar> = {
   title: "UI-Kit/🚧 Avatar",
   component: Avatar,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;