@recursica/mui-adapter 0.6.0 → 0.7.0

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

@@ -1,6 +1,6 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { AssistiveElement } from "./AssistiveElement";
+import { Layer } from "@recursica/adapter-common";
 
 const meta: Meta<typeof AssistiveElement> = {
   title: "UI-Kit/AssistiveElement",
@@ -13,9 +13,6 @@ const meta: Meta<typeof AssistiveElement> = {
           "The `AssistiveElement` is a semantic structural primitive designed to standardize Helper and Error descriptive blocks natively beneath form components globally. By explicitly wiring to the `--recursica_ui-kit_components_assistive-element` layout tokens, this component safely injects custom SVGs (Alerts vs Info circles) alongside constrained flex-wrapping typography strings, preserving flawless line-height and alignment logic entirely decoupled from underlying input engine frameworks.",
       },
     },
-    controls: {
-      include: ["assistiveVariant", "assistiveWithIcon", "children"],
-    },
   },
   argTypes: {
     assistiveVariant: {
@@ -40,10 +37,10 @@ export const DefaultHelp: Story = {
     assistiveWithIcon: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ ...args }: any) => (
-    <div style={{ padding: "48px" }}>
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={0} style={{ padding: "48px" }}>
       <AssistiveElement {...args} />
-    </div>
+    </Layer>
   ),
 };
 
@@ -55,10 +52,10 @@ export const ErrorState: Story = {
     assistiveWithIcon: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ ...args }: any) => (
-    <div style={{ padding: "48px" }}>
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={0} style={{ padding: "48px" }}>
       <AssistiveElement {...args} />
-    </div>
+    </Layer>
   ),
 };
 
@@ -70,23 +67,9 @@ export const NoIconHelp: Story = {
     assistiveWithIcon: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ ...args }: any) => (
-    <div style={{ padding: "48px" }}>
-      <AssistiveElement {...args} />
-    </div>
-  ),
-};
-
-export const Docs: Story = {
-  args: {
-    children: "Docs explicitly mapped configuration.",
-    assistiveVariant: "help",
-    assistiveWithIcon: true,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ ...args }: any) => (
-    <div style={{ padding: "48px" }}>
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={0} style={{ padding: "48px" }}>
       <AssistiveElement {...args} />
-    </div>
+    </Layer>
   ),
 };

package/src/components/AssistiveElement/AssistiveElement.tsx

@@ -3,11 +3,11 @@ import { FormHelperText, type FormHelperTextProps } from "@mui/material";
 import { filterStylingProps } from "../../utils/filterStylingProps";
 import styles from "./AssistiveElement.module.css";
 
-export interface AssistiveElementProps extends FormHelperTextProps {
-  /** Governs the semantic rendering block (changes icon and CSS structural hooks natively). */
-  assistiveVariant?: "help" | "error";
-  /** Renders the structural mapping icon inline beside the text natively. */
-  assistiveWithIcon?: boolean;
+import { type RecursicaAssistiveElementProps } from "@recursica/adapter-common";
+
+export interface AssistiveElementProps
+  extends FormHelperTextProps,
+    RecursicaAssistiveElementProps {
   overStyled?: boolean;
 }
 
@@ -29,8 +29,6 @@ export const AssistiveElement = React.forwardRef<
   const HelpIcon = () => (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -38,17 +36,15 @@ export const AssistiveElement = React.forwardRef<
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <circle cx="12" cy="12" r="10"></circle>
-      <line x1="12" y1="16" x2="12" y2="12"></line>
-      <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
     </svg>
   );
 
   const ErrorIcon = () => (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -56,9 +52,9 @@ export const AssistiveElement = React.forwardRef<
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <circle cx="12" cy="12" r="10"></circle>
-      <line x1="12" y1="8" x2="12" y2="12"></line>
-      <line x1="12" y1="16" x2="12.01" y2="16"></line>
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
     </svg>
   );
 

package/src/components/Autocomplete/Autocomplete.module.css

@@ -30,7 +30,7 @@
 .root {
   display: flex;
   position: relative;
-  width: 100%;
+  width: 100% !important; /* Override MUI default 300px width */
   min-height: var(
     --recursica_ui-kit_components_autocomplete_properties_min-height
   );
@@ -71,16 +71,16 @@
   );
   padding-top: var(
     --recursica_ui-kit_components_autocomplete_properties_vertical-padding
-  );
+  ) !important;
   padding-bottom: var(
     --recursica_ui-kit_components_autocomplete_properties_vertical-padding
-  );
+  ) !important;
   padding-left: var(
     --recursica_ui-kit_components_autocomplete_properties_horizontal-padding
-  );
+  ) !important;
   padding-right: var(
     --recursica_ui-kit_components_autocomplete_properties_horizontal-padding
-  );
+  ) !important;
   border-radius: var(
     --recursica_ui-kit_components_autocomplete_properties_border-radius
   );
@@ -129,10 +129,17 @@
 
 /* Reset internal MUI <input> node padding to safely allow the wrapper to manage geometry */
 .input :global(input.MuiInputBase-input) {
-  padding: 0;
+  padding: 0 !important;
   height: 100%;
   margin: 0;
   box-sizing: border-box;
+  color: inherit;
+}
+
+/* Ensure MUI standard variant pseudo-elements (underlines) are destroyed completely */
+.input::before,
+.input::after {
+  display: none !important;
 }
 
 .input::placeholder {
@@ -143,12 +150,10 @@
 }
 
 /* Dynamic Padding Overrides */
-.root[data-with-left-section] .input {
-  padding-left: var(--input-left-section-size);
-}
-
-.root[data-with-right-section] .input {
-  padding-right: var(--input-right-section-size);
+/* MUI naturally flexes adornments, so we don't need absolute padding overrides for the wrapper.
+   Instead, we apply gap to the input wrapper to space out the adornments and the input natively. */
+.input {
+  gap: var(--recursica_ui-kit_components_autocomplete_properties_icon-text-gap);
 }
 
 /* Flexible End-Caps (Icons, actions) */
@@ -160,16 +165,10 @@
 
 .section[data-position="left"] {
   justify-content: flex-start;
-  padding-left: var(
-    --recursica_ui-kit_components_autocomplete_properties_horizontal-padding
-  );
 }
 
 .section[data-position="right"] {
   justify-content: flex-end;
-  padding-right: var(
-    --recursica_ui-kit_components_autocomplete_properties_horizontal-padding
-  );
 }
 
 .section :global(svg) {

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Autocomplete } from "./Autocomplete";
+import { Autocomplete as AutoComplete } from "./Autocomplete";
 import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
 
-const meta: Meta<typeof Autocomplete> = {
-  title: "UI-Kit/Autocomplete",
-  component: Autocomplete,
+const meta: Meta<typeof AutoComplete> = {
+  title: "UI-Kit/AutoComplete",
+  component: AutoComplete,
   tags: ["autodocs"],
   parameters: {
     docs: {
       description: {
         component: `
-The \`Autocomplete\` primitive provides a text input with a dropdown menu for displaying suggestions as the user types.
+The \`AutoComplete\` primitive provides a text input with a dropdown menu for displaying suggestions as the user types.
 
 ### Architectural Decoupling
 Recursica wraps the internal Mantine \`<Autocomplete>\` component inside the \`WithReadOnlyWrapper\`, ensuring it integrates perfectly with the strict design system form architecture.
@@ -18,7 +18,7 @@ Recursica wraps the internal Mantine \`<Autocomplete>\` component inside the \`W
 ### Examples
 Always structure horizontal architectures via the generic \`formLayout\` parameter.
 \`\`\`tsx
-<Autocomplete 
+<AutoComplete 
   label="Country" 
   assistiveText="Select your country of residence." 
   data={["United States", "Canada", "Mexico", "United Kingdom", "France"]}
@@ -60,7 +60,7 @@ Always structure horizontal architectures via the generic \`formLayout\` paramet
 
 export default meta;
 
-type Story = StoryObj<typeof Autocomplete>;
+type Story = StoryObj<typeof AutoComplete>;
 
 export const Default: Story = {
   args: {
@@ -185,12 +185,3 @@ export const EditableReadOnly: Story = {
     labelWithEditIcon: true,
   },
 };
-
-export const Docs: Story = {
-  args: {
-    label: "Documentation Mode",
-    placeholder: "Docs layout validation...",
-    data: ["Doc A", "Doc B"],
-    assistiveText: "Explicitly requested docs story.",
-  },
-};

package/src/components/Autocomplete/Autocomplete.tsx

@@ -3,7 +3,7 @@ import {
   Autocomplete as MuiAutocomplete,
   type AutocompleteProps as MuiAutocompleteProps,
   TextField as MuiTextField,
-  type InputWrapperProps,
+  // removed InputWrapperProps
 } from "@mui/material";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
@@ -14,25 +14,28 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Autocomplete.module.css";
 
+import { type RecursicaAutocompleteProps as BaseRecursicaAutocompleteProps } from "@recursica/adapter-common";
+
 export interface RecursicaAutocompleteProps
   extends Omit<
-      MuiAutocompleteProps<any, any, any, any>,
-      "size" | "variant" | "radius" | "wrapperProps" | "renderInput"
-    >,
-    Pick<
-      InputWrapperProps,
-      "label" | "error" | "required" | "withAsterisk" | "id"
+      MuiAutocompleteProps<any, any, any, any, "div">,
+      | "variant"
+      | "size"
+      | "wrapperProps"
+      | "radius"
+      | "renderInput"
+      | "classes"
+      | "defaultValue"
     >,
     Omit<
       RecursicaFormControlWrapperProps,
-      "controlMaxWidth" | "controlMinWidth"
+      | "controlMaxWidth"
+      | "controlMinWidth"
+      | "error"
+      | keyof MuiAutocompleteProps<any, any, any, any, "div">
     >,
-    ReadOnlyControlProps {
-  data?: any[];
-  leftSection?: React.ReactNode;
-  rightSection?: React.ReactNode;
-  placeholder?: string;
-}
+    ReadOnlyControlProps,
+    BaseRecursicaAutocompleteProps {}
 
 export type AutocompleteProps = RecursicaOverStyled<RecursicaAutocompleteProps>;
 
@@ -54,6 +57,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
       assistiveWithIcon,
       error,
       required,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       withAsterisk,
       id,
       className,
@@ -112,11 +116,6 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
       ? `${styles.layoutOverride} ${className}`
       : styles.layoutOverride;
 
-    const sectionClass =
-      classNamesProp && (classNamesProp as any).section
-        ? `${styles.section} ${(classNamesProp as any).section}`
-        : styles.section;
-
     return (
       <WithReadOnlyWrapper
         className={wrapperClass}
@@ -133,10 +132,10 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
         label={label}
         assistiveText={assistiveText}
         assistiveWithIcon={assistiveWithIcon}
-        error={error}
+        error={!!error}
         required={required}
-        withAsterisk={withAsterisk}
         id={id}
+        disabled={disabled}
         readOnly={readOnly}
         readOnlyComponent={readOnlyComponent}
         emptyValueComponent={emptyValueComponent}
@@ -147,50 +146,33 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiAutocomplete
             ref={ref}
+            freeSolo
+            disableClearable
             classes={mergedClassNames}
             disabled={disabled}
             value={value}
             defaultValue={defaultValue}
             forcePopupIcon={false}
-            disableClearable={true}
+            data-error={error ? "true" : undefined}
+            data-disabled={disabled ? "true" : undefined}
+            data-with-left-section={leftSection ? "true" : undefined}
+            data-with-right-section={rightSection ? "true" : undefined}
             ListboxProps={{
               ...ListboxProps,
               className: mergedClassNames.listbox,
             }}
             options={data || []}
             renderInput={(params) => {
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
               const { InputProps, ...restParams } = params;
               return (
                 <MuiTextField
                   {...restParams}
                   placeholder={placeholder}
                   variant="standard"
-                  InputProps={{
-                    ...InputProps,
-                    disableUnderline: true,
-                    startAdornment: leftSection ? (
-                      <span className={sectionClass}>{leftSection}</span>
-                    ) : (
-                      InputProps.startAdornment
-                    ),
-                    endAdornment: rightSection ? (
-                      <>
-                        {InputProps.endAdornment}
-                        <span className={sectionClass}>{rightSection}</span>
-                      </>
-                    ) : (
-                      InputProps.endAdornment
-                    ),
-                  }}
                 />
               );
             }}
-            {...(sanitizedProps as unknown as MuiAutocompleteProps<
-              any,
-              any,
-              any,
-              any
-            >)}
           />
         }
       />

package/src/components/Avatar/Avatar.tsx

@@ -9,11 +9,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Avatar.module.css";
 
-export interface RecursicaAvatarProps {
-  size?: "small" | "default" | "large";
-  variant?: "solid" | "outline" | "ghost";
-  icon?: React.ReactNode;
-}
+import { type RecursicaAvatarProps } from "@recursica/adapter-common";
 
 export type AvatarProps = RecursicaOverStyled<
   Omit<MuiAvatarProps, "variant" | "size" | "color" | "radius"> &
@@ -38,12 +34,6 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     ghost: "transparent",
   } as const;
 
-  const mapSize = {
-    default: "md",
-    small: "sm",
-    large: "lg",
-  } as const;
-
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
@@ -84,8 +74,7 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
       ref={ref}
       className={classNameProp}
       classes={mergedClassNames}
-      variant={mapVariant[variant]}
-      size={mapSize[size]}
+      variant={mapVariant[variant] as any}
       src={src}
       data-variant={variant}
       data-size={size}

package/src/components/Badge/Badge.tsx

@@ -9,10 +9,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Badge.module.css";
 
-export interface RecursicaBadgeProps {
-  /** Map to the component styles defined in variables */
-  variant?: "alert" | "primary-color" | "success" | "warning";
-}
+import { type RecursicaBadgeProps } from "@recursica/adapter-common";
 
 export type BadgeProps = RecursicaOverStyled<
   Omit<MuiBadgeProps, "variant" | "size" | "color" | "radius"> &
@@ -54,7 +51,7 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   return (
     <MuiBadge
       ref={ref}
-      variant="filled" // We manage visual style purely through our CSS variables mapping
+      variant="standard" // We manage visual style purely through our CSS variables mapping
       data-variant={variant}
       {...sanitizedProps}
       className={finalClass}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -9,10 +9,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Breadcrumb.module.css";
 
-// Currently there are no Recursica prop additions specific to Breadcrumbs (like size or variant)
-// according to recursica_ui-kit.json
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface RecursicaBreadcrumbProps {}
+import { type RecursicaBreadcrumbProps } from "@recursica/adapter-common";
 
 export type BreadcrumbProps = RecursicaOverStyled<
   Omit<MuiBreadcrumbsProps, "variant" | "size"> & RecursicaBreadcrumbProps

package/src/components/Button/Button.module.css

@@ -66,49 +66,7 @@
   font-size: inherit;
   line-height: inherit;
 }
-.root[data-loading="true"] .labelText {
-  visibility: hidden;
-}
-
-/* 
- * Keep the loader fully opaque, but make the background transparent 
- * to create contrast for solid variants without changing the loader color. 
- */
-.root[data-loading="true"] {
-  opacity: 1;
-}
-
-.root[data-size="default"][data-variant="solid"][data-loading="true"] {
-  background-color: color-mix(
-    in srgb,
-    var(
-        --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background
-      )
-      calc(
-        var(
-            --recursica_ui-kit_components_button_variants_sizes_default_properties_disabled-opacity
-          ) *
-          100%
-      ),
-    transparent
-  );
-}
-
-.root[data-size="small"][data-variant="solid"][data-loading="true"] {
-  background-color: color-mix(
-    in srgb,
-    var(
-        --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background
-      )
-      calc(
-        var(
-            --recursica_ui-kit_components_button_variants_sizes_small_properties_disabled-opacity
-          ) *
-          100%
-      ),
-    transparent
-  );
-}
+/* Removed data-loading background override to rely on native disabled opacities like Mantine */
 
 /* ==== SIZES ==== */
 .root[data-size="default"] {
@@ -164,22 +122,13 @@
 
   /* Override specific typography for small */
   font-family: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-family,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-size,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-weight,
-    var(
-      --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight
-    )
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-weight
   );
 }
 .root[data-size="small"][data-content="label"] {
@@ -254,20 +203,30 @@
 }
 
 /* MUI uses .MuiButton-startIcon and .MuiButton-endIcon */
-.root[data-size="default"] .MuiButton-startIcon,
-.root[data-size="default"] .MuiButton-endIcon {
+.root[data-size="default"] .MuiButton-startIcon {
   margin-left: 0;
   margin-right: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap
   );
 }
-.root[data-size="small"] .MuiButton-startIcon,
-.root[data-size="small"] .MuiButton-endIcon {
+.root[data-size="default"] .MuiButton-endIcon {
+  margin-right: 0;
+  margin-left: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap
+  );
+}
+.root[data-size="small"] .MuiButton-startIcon {
   margin-left: 0;
   margin-right: var(
     --recursica_ui-kit_components_button_variants_sizes_small_properties_icon-text-gap
   );
 }
+.root[data-size="small"] .MuiButton-endIcon {
+  margin-right: 0;
+  margin-left: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_icon-text-gap
+  );
+}
 
 /* Icon-only logic overrides */
 .root[data-content="icon-only"] .labelText {
@@ -318,8 +277,7 @@
 }
 .root:hover:not(:disabled):not(:global(.Mui-disabled))::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
   );
 }
 

package/src/components/Button/Button.stories.tsx

@@ -48,29 +48,6 @@ const meta: Meta<ButtonStoryProps> = {
     loaderVariant: "oval",
     loaderSize: undefined,
   },
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "variant",
-        "size",
-        "children",
-        "component",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-        "loading",
-        "useRecursicaLoader",
-        "loaderVariant",
-        "loaderSize",
-      ],
-    },
-  },
 };
 
 export default meta;
@@ -130,6 +107,30 @@ export const TextWithIcon: Story = {
   },
 };
 
+export const IconOnly: Story = {
+  args: {
+    variant: "solid",
+    size: "default",
+    "aria-label": "Search",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    ),
+  },
+};
+
 export const LayerOneSolid: Story = {
   args: {
     children: "Layer 1 Solid",