@recursica/mantine-adapter 0.22.0 → 0.24.0

package/src/components/Radio/Radio.tsx

@@ -9,7 +9,10 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { type RequireAccessibleLabel } from "../../utils/RequireAccessibleLabel";
+import {
+  type RequireAccessibleLabel,
+  type RecursicaRadioProps,
+} from "@recursica/adapter-common";
 import {
   FormControlLayout,
   type FormControlLayoutProps,
@@ -32,19 +35,21 @@ const RadioIcon: React.FC<{
   </svg>
 );
 
-export type RecursicaRadioProps = RequireAccessibleLabel<
-  Omit<
-    MantineRadioProps,
-    "size" | "color" | "radius" | "iconColor" | "variant"
-  > &
-    ReadOnlyControlProps &
-    Pick<
-      FormControlLayoutProps,
-      "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
-    >
->;
-
-export type RadioProps = RecursicaOverStyled<RecursicaRadioProps>;
+export type RadioWrapperProps = Omit<
+  MantineRadioProps,
+  "size" | "color" | "radius" | "iconColor" | "variant"
+> &
+  RecursicaRadioProps &
+  ReadOnlyControlProps &
+  Pick<
+    FormControlLayoutProps,
+    "formLayout" | "labelSize" | "controlMaxWidth" | "controlMinWidth"
+  >;
+
+export type RecursicaRadioPropsAlias =
+  RequireAccessibleLabel<RadioWrapperProps>;
+
+export type RadioProps = RecursicaOverStyled<RecursicaRadioPropsAlias>;
 
 type RadioComponent = React.ForwardRefExoticComponent<
   RadioProps & React.RefAttributes<HTMLInputElement>

package/src/components/Radio/RadioGroup.tsx

@@ -13,13 +13,16 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./Radio.module.css";
 
+import { type RecursicaRadioGroupProps as BaseRecursicaRadioGroupProps } from "@recursica/adapter-common";
+
 export interface RecursicaRadioGroupProps
   extends Omit<MantineRadioGroupProps, "size" | "labelProps">,
     Omit<
       RecursicaFormControlWrapperProps,
       "controlMaxWidth" | "controlMinWidth"
     >,
-    ReadOnlyControlProps {}
+    ReadOnlyControlProps,
+    BaseRecursicaRadioGroupProps {}
 
 export type RadioGroupProps = RecursicaOverStyled<RecursicaRadioGroupProps>;
 

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

@@ -22,42 +22,33 @@
   word-break: break-word;
   padding: 0; /* HARDCODE: read-only fields have no specific padding defined by tokens, zeroing it. */
   font-family: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_font-family,
-    inherit
+    --recursica_ui-kit_components_read-only-field_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_font-size,
-    1rem
+    --recursica_ui-kit_components_read-only-field_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_font-weight,
-    normal
+    --recursica_ui-kit_components_read-only-field_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_letter-spacing,
-    normal
+    --recursica_ui-kit_components_read-only-field_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_line-height,
-    1.5
+    --recursica_ui-kit_components_read-only-field_properties_text_line-height
   );
   font-style: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_font-style,
-    normal
+    --recursica_ui-kit_components_read-only-field_properties_text_font-style
   );
   text-decoration: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_text-decoration,
-    none
+    --recursica_ui-kit_components_read-only-field_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_read-only-field_properties_text_text-transform,
-    none
+    --recursica_ui-kit_components_read-only-field_properties_text_text-transform
   );
   color: var(
     --recursica_ui-kit_components_read-only-field_properties_colors_text
   );
   min-height: var(
-    --recursica_ui-kit_components_read-only-field_properties_min-height,
-    32px
+    --recursica_ui-kit_components_read-only-field_properties_min-height
   );
 }

package/src/components/ReadOnlyField/ReadOnlyField.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { forwardRef } from "react";
 import {
-  ReadOnlyFieldType,
   EmptyValueRenderer,
   type ReadOnlyControlProps,
 } from "@recursica/adapter-common";
@@ -16,21 +15,15 @@ import {
 import { ReadOnlyTextField } from "./ReadOnlyTextField";
 import styles from "./ReadOnlyField.module.css";
 
+import { type RecursicaReadOnlyFieldProps as BaseRecursicaReadOnlyFieldProps } from "@recursica/adapter-common";
+
 export interface RecursicaReadOnlyFieldProps
   extends Omit<
       FormControlWrapperProps,
       "children" | "overStyled" | "controlMaxWidth" | "controlMinWidth"
     >,
-    Pick<ReadOnlyControlProps, "emptyValueComponent"> {
-  /** The specific value to be rendered in read-only mode explicitly matching the original field input */
-  value?: any;
-  /** The data type formatting rules bounding how the string is presented to the user */
-  type?: ReadOnlyFieldType;
-  /** Pass the native maximum width design variable dynamically bounding the specific wrapper width exclusively. */
-  controlMaxWidth?: string | undefined;
-  /** Pass the native minimum width design variable dynamically bounding the specific wrapper width exclusively. */
-  controlMinWidth?: string | undefined;
-}
+    Pick<ReadOnlyControlProps, "emptyValueComponent">,
+    BaseRecursicaReadOnlyFieldProps {}
 
 export type ReadOnlyFieldProps =
   RecursicaOverStyled<RecursicaReadOnlyFieldProps>;

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;
@@ -156,10 +143,7 @@
     --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
   );
 }
 
@@ -169,35 +153,27 @@
     --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

@@ -9,17 +9,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<

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.