@recursica/mantine-adapter 0.21.0 → 0.23.0

package/src/components/Radio/Radio.stories.tsx

@@ -18,6 +18,9 @@ The \`Radio\` component represents a fundamental standalone boolean selection no
     },
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     checked: {
       control: "boolean",
     },

package/src/components/Radio/RadioGroup.tsx

@@ -99,14 +99,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
             defaultValue={defaultValue}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
-              {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                  return React.cloneElement(child as React.ReactElement<any>, {
-                    disabled: readOnly || (child.props as any).disabled,
-                  });
-                }
-                return child;
-              })}
+              {children}
             </div>
           </MantineRadio.Group>
         }

package/src/components/ReadOnlyField/ReadOnlyField.module.css

@@ -1,3 +1,17 @@
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_read-only-field_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_read-only-field_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
 /* HARDCODED VALUES:
    - margin: 0; padding: overrides native paragraph margins mapping back to form element flows.
 */

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -14,6 +14,7 @@ import {
   FormControlWrapper,
 } from "../FormControlWrapper/FormControlWrapper";
 import { ReadOnlyTextField } from "./ReadOnlyTextField";
+import styles from "./ReadOnlyField.module.css";
 
 export interface RecursicaReadOnlyFieldProps
   extends Omit<
@@ -40,7 +41,15 @@ export type ReadOnlyFieldProps =
  */
 export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
   function ReadOnlyField(
-    { value, type = "text", emptyValueComponent, overStyled = false, ...rest },
+    {
+      value,
+      type = "text",
+      emptyValueComponent,
+      overStyled = false,
+      className,
+      style,
+      ...rest
+    },
     ref,
   ) {
     let content: React.ReactNode = null;
@@ -87,10 +96,16 @@ export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
         break;
     }
 
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
     return (
       <FormControlWrapper
         ref={ref}
         overStyled={overStyled as true}
+        className={wrapperClass}
+        style={style}
         {...(sanitizedProps as any)}
       >
         {content}

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

@@ -1,77 +1,104 @@
 /* HARDCODED VALUES:
    - border-style: solid; on container and indicator
    - background-color: transparent; on label hover (overriding Mantine)
-   - !important usage to strictly enforce Figma tokens over Mantine's inline calculation
+   - Scope prefix .root to enforce Figma tokens over Mantine's inline calculation without using !important
 */
 
 .root {
   background-color: var(
-    --recursica_ui-kit_components_segmented-control_properties_container_colors_background
-  ) !important;
+    --recursica_ui-kit_components_segmented-control_properties_colors_background
+  );
   border: var(
-      --recursica_ui-kit_components_segmented-control_properties_container_border-size
+      --recursica_ui-kit_components_segmented-control_properties_border-size
     )
     solid
     var(
-      --recursica_ui-kit_components_segmented-control_properties_container_colors_border-color
+      --recursica_ui-kit_components_segmented-control_properties_colors_border-color
     );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control_properties_container_border-radius
-  ) !important;
+    --recursica_ui-kit_components_segmented-control_properties_border-radius
+  );
   padding: var(
-      --recursica_ui-kit_components_segmented-control_properties_container_padding-vertical
+      --recursica_ui-kit_components_segmented-control_properties_padding-vertical
     )
     var(
-      --recursica_ui-kit_components_segmented-control_properties_container_padding-horizontal
-    ) !important;
+      --recursica_ui-kit_components_segmented-control_properties_padding-horizontal
+    );
   box-shadow: var(
-    --recursica_ui-kit_components_segmented-control_properties_container_elevation
+    --recursica_ui-kit_components_segmented-control_properties_elevation,
+    none
   );
   gap: var(--recursica_ui-kit_components_segmented-control_properties_item-gap);
 }
 
-.label {
+.root .label {
   padding-left: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
-  ) !important;
+  );
   padding-right: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
-  ) !important;
+  );
   height: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_height
-  ) !important;
+  );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
-  ) !important;
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-radius,
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
+    )
+  );
+
+  border: var(
+      --recursica_ui-kit_components_segmented-control-item_properties_unselected_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_border-color
+    );
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_background
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_elevation
+  );
 
   font-family: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-family
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-family,
+    inherit
   );
   font-size: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-size
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-size,
+    inherit
   );
   font-style: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-style
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-style,
+    inherit
   );
   font-weight: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_font-weight
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_font-weight,
+    inherit
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_letter-spacing
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_letter-spacing,
+    inherit
   );
   line-height: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_line-height
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_line-height,
+    inherit
   );
   text-decoration: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_text-decoration
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-decoration,
+    inherit
   );
   text-transform: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_text_text-transform
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected-text_text-transform,
+    inherit
   );
 
   color: var(
-    --recursica_ui-kit_components_segmented-control_properties_colors_text
-  ) !important;
+    --recursica_ui-kit_components_segmented-control-item_properties_unselected_colors_text-color,
+    inherit
+  );
 
   display: flex;
   align-items: center;
@@ -79,7 +106,7 @@
 }
 
 /* Mantine natively wraps label contents in an innerLabel span */
-.label :global(.mantine-SegmentedControl-innerLabel) {
+.root .label :global(.mantine-SegmentedControl-innerLabel) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -88,7 +115,7 @@
   );
 }
 
-.label svg {
+.root .label svg {
   width: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size
   );
@@ -99,40 +126,78 @@
 }
 
 /* Mantine adds a background on hover, we must strictly strip it */
-.label:hover {
-  background-color: transparent !important;
+.root .label:hover {
+  background-color: transparent;
 }
 
 /* Mantine adds separators via ::before on the .control */
-.control::before {
+.root .control::before {
   background-color: var(
     --recursica_ui-kit_components_segmented-control_properties_colors_divider-color
-  ) !important;
+  );
+  width: var(
+    --recursica_ui-kit_components_segmented-control_properties_divider-size
+  );
 }
 
 /* Indicator (the moving selected block) */
-.indicator {
+.root .indicator {
   background-color: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
-  ) !important;
+  );
   border: var(
       --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size
     )
     solid
     var(
       --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color
-    ) !important;
+    );
   box-shadow: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
-  ) !important;
+  );
   border-radius: var(
-    --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
-  ) !important;
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_border-radius,
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
+    )
+  );
 }
 
 /* Selected label text color override */
-.control[data-active] .label {
+.root .control[data-active] .label {
   color: var(
     --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
-  ) !important;
+  );
+  font-family: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-family,
+    inherit
+  );
+  font-size: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-size,
+    inherit
+  );
+  font-style: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-style,
+    inherit
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_font-weight,
+    inherit
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_letter-spacing,
+    inherit
+  );
+  line-height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_line-height,
+    inherit
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-decoration,
+    inherit
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected-text_text-transform,
+    inherit
+  );
 }

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -21,9 +21,7 @@ const meta: Meta<typeof SegmentedControl> = {
     fullWidth: {
       control: "boolean",
     },
-    disabled: {
-      control: "boolean",
-    },
+    disabled: { table: { disable: true } },
     data: { table: { disable: true } },
     defaultChecked: { table: { disable: true } },
   },
@@ -37,7 +35,6 @@ export const Default: Story = {
     data: ["React", "Angular", "Vue", "Svelte"],
     orientation: "horizontal",
     fullWidth: false,
-    disabled: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: any) => {

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -14,12 +14,23 @@ export interface RecursicaSegmentedControlProps {
   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;
 }
 
 export type SegmentedControlProps = RecursicaOverStyled<
   Omit<
     MantineSegmentedControlProps,
-    "variant" | "size" | "radius" | "color" | "classNames" | "className"
+    | "variant"
+    | "size"
+    | "radius"
+    | "color"
+    | "classNames"
+    | "className"
+    | "disabled"
   > & {
     className?: string;
     classNames?: Partial<Record<string, string>>;
@@ -70,9 +81,12 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     ref,
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
-    const stylingParams = useSegmentedControlClassNames(
-      sanitizedProps as Record<string, unknown>,
-    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Explicitly prevent consumers from bypassing the disabled restriction
+    delete restRecord["disabled"];
+
+    const stylingParams = useSegmentedControlClassNames(restRecord);
 
     return (
       <MantineSegmentedControl

package/src/components/Slider/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,49 @@
+# Slider Implementation Notes
+
+This document contains specific design decisions, architectural constraints, and hacks required to bridge the Recursica design system with Mantine's underlying `Slider` primitive.
+
+## 1. Bidirectional State Synchronization
+
+**Decision:** Maintain a highly responsive, bidirectional connection between the sliding track value and the adjacent numeric text input.
+**Implementation:**
+
+- The slider track requires a clean `number` state, whereas the text box requires a `string` state (`inputValue`) to allow typing intermediate characters like decimals (`2.`), negative signs (`-`), or empty text without breaking standard React input binding.
+- A `useEffect` hook continuously feeds the outer numeric state changes back into the text input value as a string representation.
+- Input changes instantly parsed as float clamp bounds securely. On blur (`onBlur`), the input state is automatically sanitized and reset to the clean, clamped string representation of the final track value.
+
+## 2. Outer Form Control Wrapper Integration
+
+**Decision:** Bypass Mantine's native `Input.Wrapper` and `label` properties.
+**Implementation:**
+
+- Universal form wrappers like `<FormControlWrapper>` and `<WithReadOnlyWrapper>` handle the outer layout architecture, including labels, assistive text, error states, and optional edit-triggering fields.
+- Therefore, we map the outer form label directly to the `label` property of the `Slider` (delegated to the wrapper), and rename Mantine's internal dragging tooltip label property to `tooltipLabel`.
+
+## 3. Custom Min-Max Labels and Step Indicators
+
+**Decision:** Enforce rigid typography tokens on lower bounds and custom mark indicators.
+**Implementation:**
+
+- Mantine's native mark and step structures are fully styles-mapped back to our scoped variables in `Slider.module.css`.
+- Min and Max numeric guides are rendered directly to the left and right of the slider track, centered vertically and spaced automatically using standard input gaps, while dynamically fetching custom typography tokens for min-max labels to avoid hardcoded formatting constraints.
+
+## 4. Visual Overrides for Stacked and Side-by-Side Spacing
+
+**Decision:** Enforce layout margins dynamically based on container orientation parameters.
+**Implementation:**
+
+- Using custom layouts (e.g. `stacked` and `side-by-side`), we override the margins by assigning the component-specific Figma spacing variables to the unified `--form-control-margin-bottom` property.
+
+## 5. Right-Aligned Floating Current Value
+
+**Decision:** Position the current active value of the slider directly above the max guide (or right-side element) on the right side of the track.
+**Implementation:**
+
+- Wrap the max guide element in a relative layout container (`.rightGuideContainer`) to provide a positioning anchor.
+- Place the active value element (`.currentValue`) inside `.rightGuideContainer` and position it absolutely (`bottom: calc(100% + var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical, 8px))`, `right: 0`).
+- This absolute positioning strategy guarantees that the active value floats cleanly above the track's right side, while aligning it vertically on the Y-axis to sit in perfect baseline alignment with the component's left-aligned form label.
+- Set typography using the Figma-aligned component-specific read-only value variables (`--recursica_ui-kit_components_slider_properties_read-only-value_...`).
+- Allow the text color of both the floating current value (`.currentValue`) and the component's read-only value (`.readOnlyValue`) to naturally inherit from their parent states/form globals, automatically supporting default (`--form-field-text-valued`), disabled (`--form-field-disabled-text`), and error colors without explicit color overrides, matching the min/max guides.
+- If `showInput` is enabled, the floating `.currentValue` is hidden since the active value is already displayed and editable within the adjacent numeric text input, avoiding visual redundancy.
+- In `side-by-side` form layouts, the `.currentValue` is positioned inline (static positioning) to the right of the max label rather than floating above it, centered vertically with the max label and aligned right to the container. This uses CSS flexbox ordering (`order: 2` for `.currentValue` and `order: 1` for `.minMaxGuide`) to visually swap their positions while preserving clean, semantic DOM ordering.
+- To ensure perfect, pixel-perfect vertical track alignment between sliders that show numeric text inputs (`showInput={true}`) and sliders that display the active inline value (`showInput={false}`), the `.currentValue` element is globally given a width equal to the input width (`var(--recursica_ui-kit_components_slider_properties_input-width)`) and right-aligned (`text-align: right`). In `side-by-side` layouts, `.rightGuideContainer`'s flex gap is also matched to the horizontal input-to-track gap (`var(--recursica_ui-kit_components_slider_properties_input-gap)`), making the horizontal space occupied by the rightmost elements exactly identical in both component modes.