@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/ReadOnlyField/ReadOnlyField.stories.tsx

@@ -1,12 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ReadOnlyField } from "./ReadOnlyField";
 import { EmptyValueRenderer } from "@recursica/adapter-common";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
 
 const meta: Meta<typeof ReadOnlyField> = {
-  title: "UI-Kit/ReadOnlyField",
+  title: "UI Kit/ReadOnlyField",
   component: ReadOnlyField,
   tags: ["autodocs"],
   parameters: {
@@ -16,17 +14,6 @@ const meta: Meta<typeof ReadOnlyField> = {
           "The ReadOnlyField safely natively wraps data sets bypassing active HTML interaction hooks while natively retaining exact bounding visual layouts defined by internal Design System Tokens. Useful for creating strict data-review profiles or conditional form read-overs.",
       },
     },
-    controls: {
-      include: [
-        "type",
-        "labelWithEditIcon",
-        "formLayout",
-        "labelSize",
-        "labelAlignment",
-        "labelOptionalText",
-        "required",
-      ],
-    },
   },
   args: {
     label: "Read Only Label",
@@ -35,14 +22,14 @@ const meta: Meta<typeof ReadOnlyField> = {
     type: "text",
   },
   argTypes: {
-    ...formControlArgTypes,
     type: {
       control: "select",
-      options: ["text", "number", "boolean", "switch", "date"], // Add more as we support them
+      options: ["text", "number"], // Add more as we support them
     },
     labelWithEditIcon: {
       control: "boolean",
     },
+    // We cannot natively control a React.ElementType through standard primitive storybook panels.
   },
 };
 
@@ -55,7 +42,6 @@ type Story = StoryObj<typeof ReadOnlyField>;
  */
 export const Default: Story = {
   args: {},
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 /**
@@ -66,7 +52,6 @@ export const EmptyValue: Story = {
     value: "",
     label: "Empty String Evaluated Automatically (Default 'N/A')",
   },
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 const CustomEmptyTextRenderer: React.FC<{ value?: any }> & {
@@ -83,7 +68,6 @@ export const CustomEmptyText: Story = {
     label: "Custom Empty Text Default",
     emptyValueComponent: CustomEmptyTextRenderer,
   },
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 const CustomEmptyCheckRenderer: React.FC<{ value?: any }> & {
@@ -102,7 +86,6 @@ export const CustomEmptyRenderer: Story = {
     label: "Custom Logic Evaluation Binding",
     emptyValueComponent: CustomEmptyCheckRenderer,
   },
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 /**
@@ -113,7 +96,6 @@ export const StackedDefault: Story = {
     formLayout: "stacked",
     value: "Some fixed readable text",
   },
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 /**
@@ -124,7 +106,6 @@ export const SideBySide: Story = {
     formLayout: "side-by-side",
     value: "Some fixed readable text mapping horizontally",
   },
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 /**
@@ -136,7 +117,6 @@ export const WithEditIcon: Story = {
     required: true,
     value: "Editable fixed structure",
   },
-  render: ({ ...args }: any) => <ReadOnlyField {...args} />,
 };
 
 /**
@@ -145,46 +125,35 @@ export const WithEditIcon: Story = {
  */
 export const DataTypes: Story = {
   args: {},
-  render: ({ ...args }: any) => (
+  render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
       <ReadOnlyField
-        {...args}
         label="Text Mapping"
         type="text"
         value="Standard string output"
       />
+      <ReadOnlyField label="Number Mapping" type="number" value={1234567.89} />
       <ReadOnlyField
-        {...args}
-        label="Number Mapping"
-        type="number"
-        value={1234567.89}
-      />
-      <ReadOnlyField
-        {...args}
         label="Date Mapping"
         type="date"
         value={new Date("2026-04-28T12:00:00Z").toLocaleDateString()}
       />
       <ReadOnlyField
-        {...args}
         label="Boolean Mapping (True)"
         type="boolean"
         value={true}
       />
       <ReadOnlyField
-        {...args}
         label="Boolean Mapping (False)"
         type="boolean"
         value={false}
       />
       <ReadOnlyField
-        {...args}
         label="Switch Mapping (True -> On)"
         type="switch"
         value={true}
       />
       <ReadOnlyField
-        {...args}
         label="Switch Mapping (False -> Off)"
         type="switch"
         value={false}

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -7,14 +7,14 @@ import {
 } from "../FormControlWrapper/FormControlWrapper";
 import styles from "./ReadOnlyField.module.css";
 
+import { type RecursicaReadOnlyFieldProps as BaseRecursicaReadOnlyFieldProps } from "@recursica/adapter-common";
+
 export type ReadOnlyFieldProps = Omit<
   RecursicaFormControlWrapperProps,
-  "error" | "focused"
+  "error" | "focused" | "controlMaxWidth" | "controlMinWidth"
 > &
-  ReadOnlyControlProps & {
-    value?: any;
-    type?: "text" | "boolean" | "number" | "switch" | "date";
-  };
+  ReadOnlyControlProps &
+  BaseRecursicaReadOnlyFieldProps;
 
 export const ReadOnlyField = React.forwardRef<
   HTMLDivElement,
@@ -61,7 +61,7 @@ export const ReadOnlyField = React.forwardRef<
         className={`${styles.root} ${className || ""}`}
         {...wrapperProps}
       >
-        <span className={styles.text}>N/A</span>
+        <p className={styles.text}>N/A</p>
       </FormControlWrapper>
     );
   }
@@ -88,12 +88,8 @@ export const ReadOnlyField = React.forwardRef<
     if (type === "switch") {
       displayValue = value ? "On" : "Off";
     }
-  } else if (typeof value === "object") {
-    try {
-      displayValue = JSON.stringify(value);
-    } catch {
-      displayValue = String(value);
-    }
+  } else if (Array.isArray(value)) {
+    displayValue = value.join(", ");
   } else {
     displayValue = String(value);
   }
@@ -104,7 +100,7 @@ export const ReadOnlyField = React.forwardRef<
       className={`${styles.root} ${className || ""}`}
       {...wrapperProps}
     >
-      <span className={styles.text}>{displayValue}</span>
+      <p className={styles.text}>{displayValue}</p>
     </FormControlWrapper>
   );
 });

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -25,8 +25,7 @@
       --recursica_ui-kit_components_segmented-control_properties_padding-horizontal
     );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control_properties_elevation,
-    none
+    --recursica_ui-kit_components_segmented-control_properties_elevation
   );
   gap: var(--recursica_ui-kit_components_segmented-control_properties_item-gap);
 }
@@ -42,10 +41,7 @@
     --recursica_ui-kit_components_segmented-control-item_properties_item_height
   );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius,
-    var(
-      --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
-    )
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius
   );
 
   border: var(
@@ -63,41 +59,32 @@
   );
 
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform
   );
 
   color: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color
   );
 
   display: flex;
@@ -140,8 +127,8 @@
   );
 }
 
-/* Indicator (the moving selected block) */
-.root .indicator {
+/* Indicator mapping (MUI ToggleButton applies .Mui-selected to the button instead of rendering a sliding indicator) */
+.root .control.Mui-selected {
   background-color: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
   );
@@ -156,48 +143,37 @@
     --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
   );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius,
-    var(
-      --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
-    )
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius
   );
 }
 
 /* Selected label text color override */
-.root .control[data-active] .label {
+.root .control.Mui-selected .label {
   color: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
   );
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform,
-    inherit
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform
   );
 }

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import {
   ToggleButtonGroup as MuiSegmentedControl,
+  ToggleButton,
   type ToggleButtonGroupProps as MuiSegmentedControlProps,
 } from "@mui/material";
 import {
@@ -9,17 +10,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./SegmentedControl.module.css";
 
-export interface RecursicaSegmentedControlProps {
-  /** The orientation of the control */
-  orientation?: "horizontal" | "vertical";
-  /** If true, the control will take up the full width of its container */
-  fullWidth?: boolean;
-  /**
-   * SegmentedControl should NOT be allowed to be disabled by design.
-   * This component explicitly disables the `disabled` prop.
-   */
-  disabled?: never;
-}
+import { type RecursicaSegmentedControlProps } from "@recursica/adapter-common";
 
 export type SegmentedControlProps = RecursicaOverStyled<
   Omit<
@@ -31,6 +22,8 @@ export type SegmentedControlProps = RecursicaOverStyled<
     | "classNames"
     | "className"
     | "disabled"
+    | "value"
+    | "onChange"
   > & {
     className?: string;
     classNames?: Partial<Record<string, string>>;
@@ -77,7 +70,15 @@ function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
 
 const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   function SegmentedControl(
-    { overStyled = false, orientation = "horizontal", fullWidth, ...rest },
+    {
+      overStyled = false,
+      orientation = "horizontal",
+      fullWidth,
+      data = [],
+      value,
+      onChange,
+      ...rest
+    },
     ref,
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -88,6 +89,15 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
 
     const stylingParams = useSegmentedControlClassNames(restRecord);
 
+    const handleChange = (
+      _event: React.MouseEvent<HTMLElement>,
+      newValue: string | null,
+    ) => {
+      if (newValue !== null && onChange) {
+        onChange(newValue);
+      }
+    };
+
     return (
       <MuiSegmentedControl
         ref={ref}
@@ -96,11 +106,31 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         orientation={orientation}
         fullWidth={fullWidth}
         data-orientation={orientation}
+        exclusive
+        value={value}
+        onChange={handleChange as any}
         {...(sanitizedProps as Omit<
           MuiSegmentedControlProps,
-          "variant" | "size"
+          "variant" | "size" | "value" | "onChange"
         >)}
-      />
+      >
+        {data.map((item) => {
+          const itemValue = typeof item === "string" ? item : item.value;
+          const itemLabel = typeof item === "string" ? item : item.label;
+          const itemDisabled = typeof item === "string" ? false : item.disabled;
+
+          return (
+            <ToggleButton
+              key={itemValue}
+              value={itemValue}
+              disabled={itemDisabled}
+              className={stylingParams.classNames.control}
+            >
+              <div className={stylingParams.classNames.label}>{itemLabel}</div>
+            </ToggleButton>
+          );
+        })}
+      </MuiSegmentedControl>
     );
   },
 );

package/src/components/Slider/Slider.module.css

@@ -233,10 +233,7 @@
   position: absolute;
   bottom: calc(
     100% +
-      var(
-        --recursica_ui-kit_globals_form_properties_label-field-gap-vertical,
-        8px
-      )
+      var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical)
   );
   right: 0;
   white-space: nowrap;

package/src/components/Slider/Slider.stories.tsx

@@ -65,8 +65,8 @@ export const Default: Story = {
   args: {
     label: "Auditory Threshold",
     assistiveText: "Specify the maximum decibel frequency boundary.",
-    defaultValue: 40,
-    min: 0,
+    defaultValue: 60,
+    min: 10,
     max: 100,
     step: 1,
     showMinMaxLabels: true,
@@ -92,7 +92,7 @@ export const Disabled: Story = {
     label: "Decommissioned Server Node",
     assistiveText: "Modifications to this environment are frozen.",
     defaultValue: 35,
-    disabled: true,
+    disabled: false,
   },
 };
 

package/src/components/Slider/Slider.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useState, useEffect } from "react";
 import {
   Slider as MuiSlider,
   type SliderProps as MuiSliderProps,
-  type InputWrapperProps,
 } from "@mui/material";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
@@ -14,28 +13,24 @@ import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 
 import styles from "./Slider.module.css";
 
+import { type RecursicaSliderProps as BaseRecursicaSliderProps } from "@recursica/adapter-common";
+
 export interface RecursicaSliderProps
   extends Omit<
-      Omit<MuiSliderProps, "size" | "color">,
-      "variant" | "radius" | "wrapperProps" | "classNames" | "styles" | "label"
+      MuiSliderProps,
+      "size" | "color" | "classes" | "onChange" | "onChangeCommitted"
     >,
     Omit<
       RecursicaFormControlWrapperProps,
-      "controlMaxWidth" | "controlMinWidth"
+      | "controlMaxWidth"
+      | "controlMinWidth"
+      | "error"
+      | "required"
+      | "withAsterisk"
+      | keyof MuiSliderProps
     >,
-    Pick<InputWrapperProps, "error" | "required" | "withAsterisk">,
-    ReadOnlyControlProps {
-  /** The form control label displayed above or beside the slider track. */
-  label?: React.ReactNode;
-  /** Floating tooltip shown above the thumb when dragging. Replaces Mui's `label`. */
-  tooltipLabel?: MuiSliderProps["label"];
-  /** An optional icon rendered to the left of the slider track. */
-  icon?: React.ReactNode;
-  /** Whether to render a numeric input field side-by-side or stacked with the track. Defaults to false. */
-  showInput?: boolean;
-  /** Whether to render min and max labels below the track. Defaults to true. */
-  showMinMaxLabels?: boolean;
-}
+    ReadOnlyControlProps,
+    BaseRecursicaSliderProps {}
 
 export type SliderProps = RecursicaOverStyled<RecursicaSliderProps>;
 
@@ -73,6 +68,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       assistiveWithIcon,
       error,
       required,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       withAsterisk,
       id,
       className,
@@ -96,12 +92,18 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
     // Bidirectional state linking the slider track value to the input field string representation
     const [internalValue, setInternalValue] = useState<number>(() => {
-      if (value !== undefined) return value;
-      if (defaultValue !== undefined) return defaultValue;
+      if (value !== undefined) return Array.isArray(value) ? value[0] : value;
+      if (defaultValue !== undefined)
+        return Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
       return min;
     });
 
-    const resolvedValue = value !== undefined ? value : internalValue;
+    const resolvedValue =
+      value !== undefined
+        ? Array.isArray(value)
+          ? value[0]
+          : value
+        : internalValue;
     const [inputValue, setInputValue] = useState<string>(
       resolvedValue.toString(),
     );
@@ -111,12 +113,12 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       setInputValue(resolvedValue.toString());
     }, [resolvedValue]);
 
-    const handleValueChange = (e: Event, val: number | number[]) => {
+    const handleValueChange = (_e: Event, val: number | number[]) => {
       const singleVal = Array.isArray(val) ? val[0] : val;
       if (value === undefined) {
         setInternalValue(singleVal);
       }
-      onChange?.(singleVal as any);
+      onChange?.(singleVal);
     };
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -209,9 +211,8 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
         label={label}
         assistiveText={assistiveText}
         assistiveWithIcon={assistiveWithIcon}
-        error={error}
+        error={error as any}
         required={required}
-        withAsterisk={withAsterisk}
         id={id}
         readOnly={readOnly}
         readOnlyComponent={readOnlyComponent || SliderReadOnlyValue}
@@ -270,7 +271,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                 onBlur={handleInputBlur}
                 min={min}
                 max={max}
-                step={step}
+                step={step ?? undefined}
                 disabled={disabled}
                 data-error={error ? "true" : undefined}
               />

package/src/components/Stack/Stack.stories.tsx

@@ -17,32 +17,11 @@ const meta: Meta<StackStoryProps> = {
           "Stack is a flex vertical layout container that maps directly to Mantine's Stack component allowing safe layout property passing.",
       },
     },
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "gap",
-        "alignItems",
-        "justifyContent",
-        "defaultChecked",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
   },
   args: {
     gap: "rec-default",
-    alignItems: "stretch",
-    justifyContent: "flex-start",
+    align: "stretch",
+    justify: "flex-start",
   },
   argTypes: {
     gap: {
@@ -63,12 +42,12 @@ const meta: Meta<StackStoryProps> = {
       ],
       description: "Gap between elements",
     },
-    alignItems: {
+    align: {
       control: "select",
       options: ["flex-start", "center", "flex-end", "stretch"],
       description: "Align-items property",
     },
-    justifyContent: {
+    justify: {
       control: "select",
       options: [
         "flex-start",

package/src/components/Stack/Stack.tsx

@@ -4,16 +4,12 @@ import {
   type StackProps as MUIStackProps,
 } from "@mui/material";
 import {
-  type RecursicaSpacing,
   SPACING_MAP,
   type OmitSx,
   filterSxProp,
 } from "../../utils/filterStylingProps";
 
-export interface RecursicaStackProps {
-  children?: React.ReactNode;
-  gap?: MUIStackProps["spacing"] | RecursicaSpacing;
-}
+import { type RecursicaStackProps } from "@recursica/adapter-common";
 
 export type StackProps = OmitSx<
   Omit<MUIStackProps, "spacing"> & RecursicaStackProps

package/src/components/Stepper/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,4 @@
+# Stepper Implementation Notes
+
+- **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.