@recursica/mantine-adapter 0.20.0 → 0.22.0

package/src/components/TextField/TextField.module.css

@@ -1,3 +1,25 @@
+/* EXEMPTIONS:
+   - state-specific border-size variables are ignored because a uniform 1px border is applied globally to prevent 
+     unexpected layout shift or flickering during focus, disabled, or error state transitions. */
+/* recursica-ignore: --recursica_ui-kit_components_text-field_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_text-field_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_text-field_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_text-field_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_text-field_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_text-field_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.
@@ -15,22 +37,18 @@
 
   /* Override Mantine native Input variables governing section spacing padding mathematics safely */
   --input-left-section-size: calc(
-    var(--recursica_ui-kit_components_text-field_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_text-field_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(
+        --recursica_ui-kit_components_text-field_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_text-field_properties_icon-size) +
+      var(--recursica_ui-kit_components_text-field_properties_icon-text-gap)
   );
   --input-right-section-size: calc(
-    var(--recursica_ui-kit_components_text-field_properties_icon-size) +
-      (
-        var(
-            --recursica_ui-kit_components_text-field_properties_horizontal-padding
-          ) *
-          2
-      )
+    var(
+        --recursica_ui-kit_components_text-field_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_text-field_properties_icon-size) +
+      var(--recursica_ui-kit_components_text-field_properties_icon-text-gap)
   );
 }
 
@@ -122,10 +140,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_text-field_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+  );
+}
+
 .section :global(svg) {
   width: var(--recursica_ui-kit_components_text-field_properties_icon-size);
   height: var(--recursica_ui-kit_components_text-field_properties_icon-size);

package/src/components/TextField/TextField.tsx

@@ -90,9 +90,13 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         : styles.section;
     }
 
+    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_text-field_properties_max-width)"
         controlMinWidth="var(--recursica_ui-kit_components_text-field_properties_min-width)"

package/src/components/TimePicker/TimePicker.module.css

@@ -0,0 +1,44 @@
+/*
+ * EXEMPTIONS:
+ * - TimePicker is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_icon-size */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_icon-text-gap */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_placeholder-opacity */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_width */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_default_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_default_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_colors_text */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_focus_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_focus_properties_colors_text */

package/src/components/Timeline/Timeline.module.css

@@ -1,3 +1,9 @@
+/* EXEMPTIONS:
+   - timeline-bullet_variants_types_avatar_properties_avatar-size is ignored because under the avatar timeline variant,
+     the bullet container size uses fallback bullet-size configurations to maintain vertical alignment with the 
+     inactive/active connector line, while the nested Avatar subcomponent handles its own sizing natively. */
+/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_avatar-size */
+
 .root {
   display: flex;
   flex-direction: column;

package/src/components/Toast/Toast.module.css

@@ -1,6 +1,13 @@
+/* EXEMPTIONS:
+   - elevation levels layer-1, layer-2, and layer-3 are ignored because all toasts explicitly use the standard 
+     layer-0 elevation shadow for styling consistency. */
+/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-1 */
+/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-2 */
+/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-3 */
+
 /* HARDCODED VALUES:
    - border-style: none. To ensure the notification doesn't render unwanted borders unless specified.
-*/
+ */
 
 /* ======================================
    TOAST / NOTIFICATION ROOT
@@ -23,6 +30,12 @@
   );
   gap: var(--recursica_ui-kit_components_toast_properties_spacing);
 
+  /* Hide Mantine's native colored vertical line */
+  &::before {
+    display: none;
+    content: none;
+  }
+
   & .icon {
     width: var(--recursica_ui-kit_components_toast_properties_icon) !important;
     height: var(--recursica_ui-kit_components_toast_properties_icon) !important;
@@ -48,6 +61,54 @@
       --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_button
     );
   }
+
+  /* Error Variant styling */
+  &[data-variant="error"] {
+    background-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_background
+    );
+
+    & .icon {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text
+      ) !important;
+    }
+    & .title,
+    & .description {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text
+      );
+    }
+    & .closeButton {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_button
+      );
+    }
+  }
+
+  /* Success Variant styling */
+  &[data-variant="success"] {
+    background-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_background
+    );
+
+    & .icon {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text
+      ) !important;
+    }
+    & .title,
+    & .description {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text
+      );
+    }
+    & .closeButton {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_button
+      );
+    }
+  }
 }
 
 /* ======================================

package/src/components/Toast/Toast.tsx

@@ -14,7 +14,7 @@ export interface RecursicaToastProps {
    * The visual variant of the toast.
    * @default "default"
    */
-  variant?: "default";
+  variant?: "default" | "error" | "success";
 
   /**
    * Loading state is natively unsupported by Recursica UI Kit.

package/src/components/Tooltip/Tooltip.module.css

@@ -1,3 +1,12 @@
+/* EXEMPTIONS:
+   - beak-inset is ignored because Tooltip positioning calculations are handled dynamically by Mantine/Floating UI at the React runtime.
+   - beak-size is ignored because Mantine's tooltip 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_tooltip_properties_beak-inset = 8px */
+/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-size = 16px */
+
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the tooltip border (Mantine uses Box
      which may not set border-style natively). Same pattern as Menu / HoverCard.

package/src/components/TransferList/TransferList.module.css

@@ -0,0 +1,41 @@
+/*
+ * EXEMPTIONS:
+ * - TransferList is a "Coming Soon" stub component.
+ * - It renders a placeholder and has no active implementation or CSS stylesheet yet.
+ * - The following tokens generated by Figma are ignored until the component is fully built.
+ */
+
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_filter-items-gap */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_gap */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontFamily */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontSize */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontStyle */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_fontWeight */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_letterSpacing */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_lineHeight */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_textCase */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_header-style_textDecoration */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_height */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_title-filter-gap */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_width */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_layouts_side-by-side_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_layouts_stacked_properties_top-bottom-margin */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_default_properties_colors_header-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_colors_header-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_colors_header-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_background */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_border-color */
+/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_focus_properties_colors_header-color */

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./Accordion";
+export * from "./AutoComplete/AutoComplete";
 export * from "./Avatar";
 export * from "./Badge/Badge";
 export * from "./Breadcrumb/Breadcrumb";