@recursica/mantine-adapter 0.20.0 → 0.22.0

package/src/components/HoverCard/HoverCard.module.css

@@ -6,7 +6,12 @@
      the Recursica beak-size token (16px). See COMPONENT_ISSUES.md for details.
    - All structural layout (display, position, overflow) is deferred to Mantine's native
      behavior. We only override visual design tokens (colors, typography, spacing, borders).
-*/
+/* EXEMPTIONS:
+   - beak-size is ignored here because Mantine's popover arrows compute their sizing and positional offsets
+     dynamically within the React rendering engine (requires inline pixel number rather than standard CSS variables).
+     The beak size is checked in JS against a fixed value of 16px. If this variable changes, the TSX components
+     need to be reviewed/re-compiled. */
+/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size = 16px */
 
 /* ======================================
    DROPDOWN CONTAINER
@@ -14,14 +19,14 @@
 
 .dropdown {
   background-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_background
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_background
   );
   border-style: solid; /* HARDCODE: Mantine Paper does not set border-style natively */
   border-width: var(
     --recursica_ui-kit_components_hover-card-popover_properties_border-size
   );
   border-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_border-color
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
   );
   border-radius: var(
     --recursica_ui-kit_components_hover-card-popover_properties_border-radius
@@ -70,7 +75,9 @@
     --recursica_ui-kit_components_hover-card-popover_properties_content-text_text-transform
   );
 
-  color: var(--recursica_ui-kit_components_hover-card-popover_colors_content);
+  color: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_content
+  );
 }
 
 /* ======================================
@@ -79,6 +86,6 @@
 
 .arrow {
   border-color: var(
-    --recursica_ui-kit_components_hover-card-popover_colors_border-color
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
   );
 }

package/src/components/Label/Label.module.css

@@ -1,8 +1,14 @@
+/* EXEMPTIONS:
+   - layouts_stacked sizes width variables are ignored because stacked labels naturally occupy 100% width block-level 
+     real estate in HTML rendering, making explicit width properties redundant. */
+
 /* HARDCODED VALUES:
    - display: flex helps us leverage flex 'order' to perfectly position Mantine's injected asterisk.
    - align-items: baseline ensures text logic lines up nicely if font sizes differ slightly.
    - margin/padding resets.
-*/
+ */
+/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_default_properties_width */
+/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_small_properties_width */
 
 .root {
   display: flex;
@@ -95,7 +101,9 @@
   line-height: var(
     --recursica_ui-kit_components_label_properties_optional-text_line-height
   );
-  font-style: normal;
+  font-style: var(
+    --recursica_ui-kit_components_label_properties_optional-text_font-style
+  );
   text-decoration: var(
     --recursica_ui-kit_components_label_properties_optional-text_text-decoration,
     none
@@ -106,7 +114,7 @@
   );
   color: inherit;
   opacity: var(
-    --recursica_ui-kit_components_label_properties_colors_optional-text-opacity
+    --recursica_ui-kit_components_label_properties_optional-text-opacity
   );
 }
 

package/src/components/Link/Link.module.css

@@ -1,3 +1,11 @@
+/* EXEMPTIONS:
+   - text_text-transform across multiple link states (default, hover, visited, visited-hover) is ignored 
+     because links naturally inherit casing directly from text children rather than requiring custom CSS transforms. */
+/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_default_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_hover_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_visited_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_link_variants_states_visited-hover_properties_text_text-transform */
+
 /* 
 HARDCODED VALUES:
 - display: inline-flex; (Base layout to align icon and text correctly)

package/src/components/Menu/Menu.module.css

@@ -1,3 +1,8 @@
+/* EXEMPTIONS:
+   - colors_selected-item_supporting-text-color is ignored because selected menu items do not render 
+     supporting secondary text, making selected state overrides for supporting text colors obsolete. */
+/* recursica-ignore: --recursica_ui-kit_components_menu-item_properties_colors_selected-item_supporting-text-color */
+
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the dropdown border (Mantine uses Paper which may not set border natively).
    - opacity: 0.5 on disabled items. Recursica has no dedicated disabled-opacity token for menu items.
@@ -27,11 +32,12 @@
   box-shadow: var(--recursica_ui-kit_components_menu_properties_elevation);
 
   min-width: var(--recursica_ui-kit_components_menu_properties_min-width);
+  max-height: var(--recursica_ui-kit_components_menu_properties_max-height);
   max-width: var(--recursica_ui-kit_components_menu_properties_max-width);
 
-  padding: var(
-    --recursica_ui-kit_components_menu-item_properties_divider-item-gap
-  );
+  /* HARDCODE: Figma UI Kit does not export padding tokens for the Menu container itself. 
+     If added in the future, it would be mapped here. */
+  padding: 8px;
 }
 
 /* ======================================
@@ -83,9 +89,7 @@
   color: var(
     --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_text
   );
-  opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_opacity
-  );
+  opacity: 1;
 }
 
 /* Override Mantine's native hover background to use our overlay technique */
@@ -104,7 +108,7 @@
   z-index: 0;
   pointer-events: none;
   background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_hover-color
+    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-color
   );
   opacity: 0;
   transition: opacity 150ms ease;
@@ -112,8 +116,7 @@
 
 .item:hover:not([data-disabled])::after {
   opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-opacity
   );
 }
 
@@ -125,8 +128,12 @@
   color: var(
     --recursica_ui-kit_components_menu-item_properties_colors_selected-item_text
   );
-  opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_opacity
+  opacity: 1;
+}
+
+.item[data-selected]::after {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_hover-color
   );
 }
 
@@ -138,15 +145,21 @@
 }
 .item[data-hovered]::after {
   opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_hover-opacity
+  );
+}
+
+.item[data-hovered][data-selected]::after {
+  opacity: var(
+    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_hover-opacity
   );
 }
 
 /* Disabled item */
 .item[data-disabled] {
-  /* HARDCODE: 0.5 opacity fallback; no dedicated disabled-opacity token for menu items */
-  opacity: 0.5;
+  opacity: var(
+    --recursica_ui-kit_components_menu-item_properties_disabled-opacity
+  );
 }
 
 /* ======================================
@@ -166,7 +179,46 @@
 .itemSection {
   position: relative;
   z-index: 1;
-  color: inherit;
+}
+
+.itemSection[data-position="left"] {
+  width: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-leading-size
+  );
+  height: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-leading-size
+  );
+  margin-right: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-text-gap
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_leading-icon-color
+  );
+}
+
+.itemSection[data-position="right"] {
+  width: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-trailing-size
+  );
+  height: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-trailing-size
+  );
+  margin-left: var(--recursica_ui-kit_components_menu-item_properties_text-gap);
+  color: var(
+    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_trailing-icon-color
+  );
+}
+
+.item[data-selected] .itemSection[data-position="left"] {
+  color: var(
+    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_leading-icon-color
+  );
+}
+
+.item[data-selected] .itemSection[data-position="right"] {
+  color: var(
+    --recursica_ui-kit_components_menu-item_properties_colors_selected-item_trailing-icon-color
+  );
 }
 
 /* ======================================
@@ -174,19 +226,12 @@
    ====================================== */
 
 .divider {
-  height: var(
-    --recursica_ui-kit_components_menu-item_properties_divider-height
-  );
+  height: var(--recursica_ui-kit_components_menu_properties_divider-height);
   background-color: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_divider-color
+    --recursica_ui-kit_components_menu_properties_colors_divider-color
   );
-  opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_divider-opacity
-  );
-  margin: var(
-      --recursica_ui-kit_components_menu-item_properties_divider-item-gap
-    )
-    0;
+  opacity: var(--recursica_ui-kit_components_menu_properties_divider-opacity);
+  margin: 8px 0;
 }
 
 /* ======================================
@@ -228,9 +273,7 @@
   color: var(
     --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_supporting-text-color
   );
-  opacity: var(
-    --recursica_ui-kit_components_menu-item_properties_colors_unselected-item_supporting-text-opacity
-  );
+  opacity: 0.7;
 }
 
 /* ======================================

package/src/components/Modal/Modal.module.css

@@ -1,3 +1,10 @@
+/* EXEMPTIONS:
+   - content-style and header-style parent variables represent raw JSON styling objects rather than 
+     direct CSS variables and cannot be applied directly in standard CSS files.
+     Sub-properties are fully and individually mapped to elements natively. */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style */
+/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style */
+
 .root {
 }
 
@@ -7,82 +14,120 @@
 
 .content {
   /* Geometric Bounds */
-  min-width: var(
-    --recursica_ui-kit_components_modal_properties_min-width
-  ) !important;
-  max-width: var(
-    --recursica_ui-kit_components_modal_properties_max-width
-  ) !important;
-  min-height: var(
-    --recursica_ui-kit_components_modal_properties_min-height
-  ) !important;
+  min-width: var(--recursica_ui-kit_components_modal_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_modal_properties_max-width);
+  min-height: var(--recursica_ui-kit_components_modal_properties_min-height);
 
   /* Restrict max-height to either the UI Kit max or the viewport bounds to force internal scrolling */
   max-height: min(
     var(--recursica_ui-kit_components_modal_properties_max-height),
     calc(100vh - 4rem)
-  ) !important;
-  overflow: hidden !important;
+  );
+  overflow: hidden;
 
   /* Box model */
   border-radius: var(
     --recursica_ui-kit_components_modal_properties_border-radius
-  ) !important;
-  border-width: var(
-    --recursica_ui-kit_components_modal_properties_border-size
-  ) !important;
+  );
+  border-width: var(--recursica_ui-kit_components_modal_properties_border-size);
   border-color: var(
-    --recursica_ui-kit_components_modal_colors_border-color
-  ) !important;
-  border-style: solid !important;
+    --recursica_ui-kit_components_modal_properties_colors_border-color
+  );
+  border-style: solid;
 
   /* Appearance */
   background-color: var(
-    --recursica_ui-kit_components_modal_colors_background
-  ) !important;
-  box-shadow: var(
-    --recursica_ui-kit_components_modal_properties_elevation
-  ) !important;
+    --recursica_ui-kit_components_modal_properties_colors_background
+  );
+  box-shadow: var(--recursica_ui-kit_components_modal_properties_elevation);
 
   /* Internal Flex container to trap header and let body scroll */
-  display: flex !important;
-  flex-direction: column !important;
+  display: flex;
+  flex-direction: column;
 }
 
 .header {
   padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding) !important;
-  background-color: transparent !important; /* Inherit from content */
+    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  background-color: transparent; /* Inherit from content */
 }
 
 .title {
-  /* Typography Class Injection */
-  composes: recursica_brand_typography_h2 from global;
-  color: var(--recursica_ui-kit_components_modal_colors_title) !important;
+  color: var(--recursica_ui-kit_components_modal_properties_colors_title);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_modal_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_modal_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_modal_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_modal_properties_header-style_textDecoration
+  );
 }
 
 .bodyWrapper {
   /* This is the container that overrides Mantine's native Body. It strips padding and acts as a flex column. */
-  padding: 0 !important;
+  padding: 0;
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
-  overflow: hidden !important;
-  min-height: 0 !important; /* Critical for flex child scrolling constraint */
+  overflow: hidden;
+  min-height: 0; /* Critical for flex child scrolling constraint */
 }
 
 .scrollArea {
   padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding) !important;
+    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
 
   /* Internal scrolling */
   flex: 1 1 auto;
-  overflow-y: auto !important;
-  min-height: 0 !important; /* Critical for flex child scrolling constraint */
+  overflow-y: auto;
+  min-height: 0; /* Critical for flex child scrolling constraint */
 
-  /* Typography */
-  composes: recursica_brand_typography_body from global;
-  color: var(--recursica_ui-kit_components_modal_colors_content) !important;
+  color: var(--recursica_ui-kit_components_modal_properties_colors_content);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_modal_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_modal_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_modal_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_modal_properties_content-style_textDecoration
+  );
 
   /* Ensure button gap token is easily usable if developers use standard spacing */
   --modal-button-gap: var(
@@ -94,29 +139,29 @@
   border-top: var(
       --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
     )
-    solid transparent !important;
+    solid transparent;
   border-bottom: var(
       --recursica_ui-kit_components_modal_properties_scroll-divider-thickness
     )
-    solid transparent !important;
+    solid transparent;
 }
 
 .scrollArea[data-scrolled-top] {
   border-top-color: var(
-    --recursica_ui-kit_components_modal_colors_scroll-divider
-  ) !important;
+    --recursica_ui-kit_components_modal_properties_colors_scroll-divider
+  );
 }
 
 .scrollArea[data-scrolled-bottom] {
   border-bottom-color: var(
-    --recursica_ui-kit_components_modal_colors_scroll-divider
-  ) !important;
+    --recursica_ui-kit_components_modal_properties_colors_scroll-divider
+  );
 }
 
 .footer {
   padding: var(--recursica_ui-kit_components_modal_properties_vertical-padding)
-    var(--recursica_ui-kit_components_modal_properties_horizontal-padding) !important;
-  background-color: transparent !important;
+    var(--recursica_ui-kit_components_modal_properties_horizontal-padding);
+  background-color: transparent;
   display: flex;
   justify-content: flex-end;
   gap: var(--recursica_ui-kit_components_modal_properties_button-gap);

package/src/components/NumberInput/NumberInput.module.css

@@ -1,3 +1,25 @@
+/* EXEMPTIONS:
+   - state-specific border-size variables are ignored because the input box uses a uniform static boundary to prevent 
+     unexpected layout shifts or flickering when switching between active, focused, or error states. */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_border-size */
+
+/* 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_number-input_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
 /* HARDCODED VALUES:
    - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
@@ -16,22 +38,18 @@
 
   /* Override Mantine native Input variables governing section spacing padding mathematics safely */
   --input-left-section-size: calc(
-    var(--recursica_ui-kit_components_number-input_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_number-input_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(
+        --recursica_ui-kit_components_number-input_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-size) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-text-gap)
   );
   --input-right-section-size: calc(
-    var(--recursica_ui-kit_components_number-input_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_number-input_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(
+        --recursica_ui-kit_components_number-input_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-size) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-text-gap)
   );
 }
 
@@ -123,10 +141,23 @@
 .section {
   display: flex;
   align-items: center;
-  justify-content: center;
   height: 100%;
 }
 
+.section[data-position="left"] {
+  justify-content: flex-start;
+  padding-left: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+}
+
 .section :global(svg) {
   width: var(--recursica_ui-kit_components_number-input_properties_icon-size);
   height: var(--recursica_ui-kit_components_number-input_properties_icon-size);

package/src/components/NumberInput/NumberInput.tsx

@@ -84,9 +84,13 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       control: styles.control,
     };
 
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
     return (
       <WithReadOnlyWrapper
-        className={className}
+        className={wrapperClass}
         style={style as React.CSSProperties}
         controlMaxWidth="var(--recursica_ui-kit_components_number-input_properties_max-width)"
         controlMinWidth="var(--recursica_ui-kit_components_number-input_properties_min-width)"