@recursica/mantine-adapter 0.45.0 → 0.47.0

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -5,7 +5,6 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
-  omitUnsupportedProps,
   mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
@@ -22,7 +21,7 @@ export type SegmentedControlProps = RecursicaOverStyled<
     | "color"
     | "classNames"
     | "className"
-    | "disabled"
+    | "data"
   > & {
     className?: string;
     classNames?: Partial<Record<string, string>>;
@@ -53,27 +52,39 @@ 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 = [],
+      ...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 = [
-      // SegmentedControl only supports per-item disabling via the `data` array (each item may set
-      // its own `disabled`); a top-level `disabled` is intentionally unsupported (typed as `never`
-      // in RecursicaSegmentedControlProps) because Mantine's top-level `disabled` would disable
-      // the whole control uniformly instead of per-item.
-      "disabled",
-    ] as const satisfies readonly (keyof MantineSegmentedControlProps)[];
-
-    const sanitizedProps = omitUnsupportedProps(
-      filterStylingProps(rest, overStyled) as Record<string, unknown>,
-      UNSUPPORTED_PROPS,
-    ) as Partial<typeof rest>;
+    const sanitizedProps = filterStylingProps(rest, overStyled) as Partial<
+      typeof rest
+    >;
     const restRecord = sanitizedProps as Record<string, unknown>;
 
     const stylingParams = useSegmentedControlClassNames(restRecord);
 
+    // Mantine's own data item has no icon slot; compose one into `label` (already a ReactNode)
+    // so Mantine's native innerLabel wrapper lays it out using the icon-size/gap tokens already
+    // wired in SegmentedControl.module.css.
+    const mappedData = data.map((item) =>
+      typeof item === "string" || !item.icon
+        ? item
+        : {
+            ...item,
+            label: (
+              <>
+                {item.icon}
+                {item.label}
+              </>
+            ),
+          },
+    );
+
     return (
       <MantineSegmentedControl
         ref={ref}
@@ -86,6 +97,7 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         orientation={orientation}
         fullWidth={fullWidth}
         data-orientation={orientation}
+        data={mappedData}
       />
     );
   },

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
@@ -40,3 +51,5 @@ All Recursica components in the `@recursica/mantine-adapter` package adhere stri
 ## 4. Key Integration Features & Constraints
 
 The `variant`, `size`, `radius`, and `color` props are not available on this component, since appearance is fully controlled by the design system tokens. The active segment is shown as a floating indicator that moves behind the selected label, with a divider rendered between adjacent segments.
+
+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

@@ -57,3 +57,16 @@ This document contains specific design decisions, architectural constraints, and
 - The thumb's focus box-shadow layers the ring on top of its existing `thumb-elevation` shadow rather than replacing it.
 - `.sliderMark[data-filled]` has no default-state "-active" step-indicator token anymore (only `disabled`/`error` define one); it reuses `colors_track-active` so filled marks stay visually tied to the filled portion of the track. Worth a design review if a distinct filled-mark color is expected.
 - `markLabel` was already mapped in the `classNames` prop but had no matching `.sliderMarkLabel` rule in this file, so Mantine silently fell back to its own default theme grey instead of any recursica token. Added a `.sliderMarkLabel` rule reusing the min-max-label typography tokens with `color: inherit`, matching the mui-adapter's equivalent.
+
+## 7. Formatted Current Value, Label Overrides, Trailing Icon
+
+**Decision:** The floating `.currentValue` display (see §5) always rendered the raw numeric value, even when `tooltipLabel` was a formatter function — a caller mapping values onto custom text (e.g. 0-4 → XS/S/M/L/XL) got the formatted tooltip while dragging but the raw number next to the track otherwise.
+**Implementation:**
+
+- `.currentValue` now runs `resolvedValue` through `tooltipLabel` when it's a function, so both displays agree. No change when `tooltipLabel` is absent or a static node — still the raw number.
+- `minLabel`/`maxLabel` (new `adapter-common` props) override the `.minMaxGuide` text at either end of the track, falling back to the numeric `min`/`max`.
+- `trailingIcon` (new `adapter-common` prop) renders a second icon on the opposite side of the track from the existing `icon`, reusing the same `.iconWrapper` styling (disabled/error/focus states already target `.iconWrapper` generically, so no new CSS was needed).
+
+## 8. No Dual-Thumb / Range Support
+
+**Decision:** Requested (a caller passing `[number, number]` for `value`/`onChange`, backed by Mantine's separate `RangeSlider` component), declined — no current use case needs it. `Slider` stays single-thumb only; `value`/`onChange` remain typed as `number`.

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

@@ -51,7 +51,8 @@ const SliderReadOnlyValue: React.FC<{ value: number }> = ({ value }) => {
  * Recursica Slider component wrapping Mantine'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) {
@@ -84,10 +85,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,
@@ -176,6 +180,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}
@@ -214,7 +231,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}>
@@ -234,10 +251,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>
 
@@ -255,6 +272,8 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                 data-error={error ? "true" : undefined}
               />
             )}
+
+            {trailingIconEl}
           </div>
         }
       />

package/src/components/Slider/USAGE.md

@@ -39,4 +39,4 @@ All Recursica components in the `@recursica/mantine-adapter` package adhere stri
 
 ## 4. Key Integration Features & Constraints
 
-The `label` prop is passed through to the surrounding form label rather than Mantine'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.
+The `label` prop is passed through to the surrounding form label rather than Mantine'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

@@ -19,7 +19,7 @@ import { type RecursicaSwitchGroupProps as BaseRecursicaSwitchGroupProps } from
 export interface RecursicaSwitchGroupProps
   extends Omit<
       MantineSwitchGroupProps,
-      "size" | "labelProps" | "defaultValue" | "value" | "onChange"
+      "size" | "labelProps" | "defaultValue" | "value"
     >,
     Omit<
       RecursicaFormControlWrapperProps,