@recursica/mui-adapter 0.30.0 → 0.31.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.30.0",
+  "version": "0.31.0",
   "publishConfig": {
     "access": "public"
   },
@@ -102,7 +102,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@recursica/adapter-common": "^0.21.0",
+    "@recursica/adapter-common": "^0.22.0",
     "@recursica/official-release": "^2.8.0",
     "dayjs": "^1.11.21"
   },

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.