@recursica/mui-adapter 0.29.0 → 0.31.0

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -6,7 +6,6 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
-  omitUnsupportedProps,
   mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
@@ -23,9 +22,7 @@ export type SegmentedControlProps = RecursicaOverStyled<
     | "color"
     | "classNames"
     | "className"
-    | "disabled"
     | "value"
-    | "onChange"
   > & {
     className?: string;
     classNames?: Partial<Record<string, string>>;
@@ -61,21 +58,13 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
       fullWidth,
       data = [],
       value,
+      disabled,
       onChange,
       ...rest
     },
     ref,
   ) {
-    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
-    // through even if a caller forces them via plain JavaScript, bypassing the Omit<> above.
-    const UNSUPPORTED_PROPS = [
-      "disabled", // Recursica controls per-item disabled state via `data.disabled`, not the group
-    ] as const satisfies readonly (keyof MuiSegmentedControlProps)[];
-
-    const sanitizedProps = omitUnsupportedProps(
-      filterStylingProps(rest, overStyled),
-      UNSUPPORTED_PROPS,
-    );
+    const sanitizedProps = filterStylingProps(rest, overStyled);
     const restRecord = sanitizedProps as Record<string, unknown>;
 
     const stylingParams = useSegmentedControlClassNames(restRecord);
@@ -94,12 +83,12 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     const activeValue = value !== undefined ? value : uncontrolledValue;
 
     const handleChange = (
-      _event: React.MouseEvent<HTMLElement>,
+      event: React.MouseEvent<HTMLElement>,
       newValue: string | null,
     ) => {
       if (newValue !== null) {
         setUncontrolledValue(newValue);
-        onChange?.(newValue);
+        onChange?.(event, newValue);
       }
     };
 
@@ -116,6 +105,7 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         fullWidth={fullWidth}
         data-orientation={orientation}
         exclusive
+        disabled={disabled}
         value={activeValue}
         onChange={
           handleChange as React.ComponentProps<
@@ -126,7 +116,12 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         {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;
+          // `undefined` (not `false`) for items with no per-item override, so the group-level
+          // `disabled` above can cascade through MUI's ToggleButtonGroupContext instead of being
+          // masked by an explicit `false` on every ToggleButton.
+          const itemDisabled =
+            typeof item === "string" ? undefined : item.disabled;
+          const itemIcon = typeof item === "string" ? undefined : item.icon;
 
           return (
             <ToggleButton
@@ -135,7 +130,10 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
               disabled={itemDisabled}
               className={stylingParams.classNames.control}
             >
-              <div className={stylingParams.classNames.label}>{itemLabel}</div>
+              <div className={stylingParams.classNames.label}>
+                {itemIcon}
+                {itemLabel}
+              </div>
             </ToggleButton>
           );
         })}

package/src/components/SegmentedControl/USAGE.md

@@ -23,6 +23,17 @@ export default function Demo() {
 }
 ```
 
+Each `data` item may also be an object with an optional `icon`, rendered ahead of the label:
+
+```tsx
+<SegmentedControl
+  data={[
+    { value: "daily", label: "Daily", icon: <CheckIcon /> },
+    { value: "weekly", label: "Weekly" },
+  ]}
+/>
+```
+
 ---
 
 ## 3. Design System Integration
@@ -34,3 +45,5 @@ All Recursica components in the `@recursica/mui-adapter` package adhere strictly
 > - **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.
+
+A top-level `disabled` disables every item at once; an individual item can still be disabled on its own via `data[].disabled`.

package/src/components/Slider/IMPLEMENTATION_NOTES.md

@@ -27,3 +27,13 @@ This document contains specific design decisions, architectural constraints, and
 ## 4. Mark Label Color
 
 **Root cause:** MUI's `.sliderMarkLabel` already inherited the container text color using the min-max-label typography tokens. Mantine's equivalent class (`styles.sliderMarkLabel`) was referenced in `Slider.tsx`'s `classNames` map but was never defined in Mantine's `Slider.module.css`, so Mantine silently fell back to its own default theme grey instead of any recursica token. Fixed in `mantine-adapter` by adding the missing `.sliderMarkLabel` rule (same tokens/inherit-color approach as MUI) rather than copying Mantine's undefined behavior into MUI.
+
+## 5. Formatted Current Value, Label Overrides, Trailing Icon
+
+**Symptom:** `.currentValue` always rendered the raw numeric value, even when `tooltipLabel` was a formatter function (already used for MUI's own `valueLabelFormat`) — a caller mapping values onto custom text got the formatted tooltip while dragging but the raw number next to the track otherwise. Same bug as `mantine-adapter`.
+
+**Fix:** `.currentValue` now runs `resolvedValue` through `tooltipLabel` when it's a function, reusing the same formatter passed to `valueLabelFormat`. Added `minLabel`/`maxLabel` (new `adapter-common` props) to override the `.minMaxGuide` text at either end of the track, and `trailingIcon` (new `adapter-common` prop) to render a second icon opposite the existing `icon`, reusing the same `.iconWrapper` styling.
+
+## 6. No Dual-Thumb / Range Support
+
+**Decision:** Requested (MUI's `Slider` already accepts `number[]` for `value`/`onChange` and renders multiple thumbs natively), declined — no current use case needs it. `Slider` stays single-thumb only; `value`/`onChange` remain typed as `number` and arrays continue to be collapsed to `value[0]`.

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

@@ -146,6 +146,50 @@ export const WithMarks: Story = {
   },
 };
 
+export const WithIconsAndLabels: Story = {
+  args: {
+    label: "Volume",
+    assistiveText:
+      "Icons flank the track; min/max labels replace the raw bounds.",
+    defaultValue: 60,
+    minLabel: "Quiet",
+    maxLabel: "Loud",
+    tooltipLabel: (value: number) => `${value}%`,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+      </svg>
+    ),
+    trailingIcon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+        <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
+      </svg>
+    ),
+  },
+};
+
 export const FormLayouts: Story = {
   render: () => (
     <div

package/src/components/Slider/Slider.tsx

@@ -48,7 +48,8 @@ const SliderReadOnlyValue: React.FC<{ value: number }> = ({ value }) => {
  * Recursica Slider component wrapping Mui's Slider.
  *
  * Implements a bidirectional text input field next to the slider track, responsive layouts,
- * custom typography-bound min/max labels, an optional leading icon, and an explicit read-only layout.
+ * custom typography-bound min/max labels (optionally overridden via `minLabel`/`maxLabel`),
+ * optional leading/trailing icons, and an explicit read-only layout.
  */
 export const Slider = forwardRef<HTMLDivElement, SliderProps>(
   function Slider(props, ref) {
@@ -82,10 +83,13 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       value,
       defaultValue,
       icon,
+      trailingIcon,
       showInput = false,
       showMinMaxLabels = true,
       min = 0,
       max = 100,
+      minLabel,
+      maxLabel,
       step = 1,
       onChange,
       onChangeEnd,
@@ -220,6 +224,19 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       </span>
     ) : null;
 
+    const trailingIconEl = trailingIcon ? (
+      <span className={styles.iconWrapper} aria-hidden>
+        {trailingIcon}
+      </span>
+    ) : null;
+
+    // Duplicates the raw numeric value next to the track by default; when `tooltipLabel` is a
+    // formatter, reuse it here too so both displays agree instead of one showing raw numbers.
+    const displayValue =
+      typeof tooltipLabel === "function"
+        ? tooltipLabel(resolvedValue)
+        : resolvedValue;
+
     return (
       <WithReadOnlyWrapper
         ref={ref}
@@ -258,7 +275,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
             {leadingIcon}
 
             {showMinMaxLabels && (
-              <span className={styles.minMaxGuide}>{min}</span>
+              <span className={styles.minMaxGuide}>{minLabel ?? min}</span>
             )}
 
             <div className={styles.sliderTrackWrapper}>
@@ -295,10 +312,10 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
             <div className={styles.rightGuideContainer}>
               {!showInput && (
-                <span className={styles.currentValue}>{resolvedValue}</span>
+                <span className={styles.currentValue}>{displayValue}</span>
               )}
               {showMinMaxLabels && (
-                <span className={styles.minMaxGuide}>{max}</span>
+                <span className={styles.minMaxGuide}>{maxLabel ?? max}</span>
               )}
             </div>
 
@@ -316,6 +333,8 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                 data-error={error ? "true" : undefined}
               />
             )}
+
+            {trailingIconEl}
           </div>
         }
       />

package/src/components/Slider/USAGE.md

@@ -34,3 +34,9 @@ All Recursica components in the `@recursica/mui-adapter` package adhere strictly
 > - **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
+
+The `label` prop is passed through to the surrounding form label rather than MUI's dragging tooltip; use `tooltipLabel` to set the label shown while dragging. When `showInput` is enabled, a numeric text input is rendered alongside the track and stays in sync with the slider's value. Set `showMinMaxLabels` to `false` to hide the min/max guides shown at either end of the track. Otherwise, the current value is displayed near the track instead — pass `tooltipLabel` as a formatter function (`(value) => ReactNode`) and that same formatter is reused for this display, instead of always showing the raw number. `minLabel`/`maxLabel` override the text shown at either end of the track (defaults to the numeric `min`/`max`). `icon` renders a leading icon next to the track; `trailingIcon` renders one on the opposite side.

package/src/components/Switch/SwitchGroup.tsx

@@ -43,7 +43,11 @@ export interface RecursicaSwitchGroupProps
       | "defaultValue"
     >,
     ReadOnlyControlProps,
-    BaseRecursicaSwitchGroupProps {}
+    BaseRecursicaSwitchGroupProps {
+  // MUI has no native switch-group concept to match (its own `FormGroup` is layout-only, no
+  // value/onChange) — this signature is Recursica's own, same as TransferList/Accordion/CheckboxGroup.
+  onChange?: (value: string[]) => void;
+}
 
 export type SwitchGroupProps = RecursicaOverStyled<RecursicaSwitchGroupProps>;