@recursica/mantine-adapter 0.21.0 → 0.23.0

package/src/components/Tabs/Tabs.module.css

@@ -35,6 +35,9 @@
   --tabs-vertical-padding: var(
     --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_vertical-padding
   );
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs_variants_orientation_horizontal_properties_tab-content-alignment
+  );
 }
 
 .root[data-orientation="horizontal"] .list {
@@ -59,6 +62,9 @@
   --tabs-vertical-padding: var(
     --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_vertical-padding
   );
+  --tabs-content-alignment: var(
+    --recursica_ui-kit_components_tabs_variants_orientation_vertical_properties_tab-content-alignment
+  );
 }
 
 .root[data-orientation="vertical"] .list {
@@ -85,17 +91,23 @@
   --tabs-color: var(
     --recursica_ui-kit_components_tabs_variants_styles_default_properties_active_colors_border-color
   ) !important;
+  --tabs-hover-color: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_properties_hover-color
+  );
+  --tabs-hover-opacity: var(
+    --recursica_ui-kit_components_tabs_variants_styles_default_properties_hover-opacity
+  );
 }
 
 .root[data-variant="default"][data-orientation="horizontal"] .list {
   margin-bottom: var(
-    --recursica_ui-kit_components_tabs_variants_styles_default_orientation_horizontal_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_horizontal_properties_tabs-content-gap
   );
 }
 
 .root[data-variant="default"][data-orientation="vertical"] .list {
   margin-right: var(
-    --recursica_ui-kit_components_tabs_variants_styles_default_orientation_vertical_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_default_variants_orientation_vertical_properties_tabs-content-gap
   );
 }
 
@@ -116,17 +128,23 @@
   --tabs-color: var(
     --recursica_ui-kit_components_tabs_variants_styles_outline_properties_active_colors_border-color
   ) !important;
+  --tabs-hover-color: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_properties_hover-color
+  );
+  --tabs-hover-opacity: var(
+    --recursica_ui-kit_components_tabs_variants_styles_outline_properties_hover-opacity
+  );
 }
 
 .root[data-variant="outline"][data-orientation="horizontal"] .list {
   margin-bottom: var(
-    --recursica_ui-kit_components_tabs_variants_styles_outline_orientation_horizontal_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_horizontal_properties_tabs-content-gap
   );
 }
 
 .root[data-variant="outline"][data-orientation="vertical"] .list {
   margin-right: var(
-    --recursica_ui-kit_components_tabs_variants_styles_outline_orientation_vertical_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_outline_variants_orientation_vertical_properties_tabs-content-gap
   );
 }
 
@@ -141,17 +159,23 @@
   --tabs-border-radius: var(
     --recursica_ui-kit_components_tabs_variants_styles_pills_properties_border-radius
   );
+  --tabs-hover-color: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_properties_hover-color
+  );
+  --tabs-hover-opacity: var(
+    --recursica_ui-kit_components_tabs_variants_styles_pills_properties_hover-opacity
+  );
 }
 
 .root[data-variant="pills"][data-orientation="horizontal"] .list {
   margin-bottom: var(
-    --recursica_ui-kit_components_tabs_variants_styles_pills_orientation_horizontal_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_horizontal_properties_tabs-content-gap
   );
 }
 
 .root[data-variant="pills"][data-orientation="vertical"] .list {
   margin-right: var(
-    --recursica_ui-kit_components_tabs_variants_styles_pills_orientation_vertical_properties_tabs-content-gap
+    --recursica_ui-kit_components_tabs_variants_styles_pills_variants_orientation_vertical_properties_tabs-content-gap
   );
 }
 
@@ -165,8 +189,7 @@
   gap: var(--tabs-element-gap);
   display: flex;
   align-items: center;
-  /* Alignment can be mapped if defined */
-  justify-content: flex-start;
+  justify-content: var(--tabs-content-alignment);
   cursor: pointer;
   position: relative;
 
@@ -386,10 +409,8 @@
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background-color: var(
-    --recursica_ui-kit_components_tabs_properties_hover-color
-  );
-  opacity: var(--recursica_ui-kit_components_tabs_properties_hover-opacity);
+  background-color: var(--tabs-hover-color);
+  opacity: var(--tabs-hover-opacity);
   pointer-events: none;
   z-index: 0;
 }

package/src/components/TextArea/TextArea.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_textarea_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_textarea_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_textarea_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_textarea_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.
@@ -9,29 +31,6 @@
   display: flex;
   position: relative;
   width: 100%;
-  min-height: var(
-    --recursica_ui-kit_components_text-field_properties_min-height
-  );
-
-  /* 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
-      )
-  );
-  --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
-      )
-  );
 }
 
 .input {
@@ -40,63 +39,69 @@
   box-sizing: border-box;
   margin: 0;
 
-  /* Box Geometry */
-  min-height: var(
-    --recursica_ui-kit_components_text-field_properties_min-height
+  /* Sizing driven by rows token */
+  min-height: calc(
+    var(--recursica_ui-kit_components_textarea_properties_rows) *
+      var(--recursica_ui-kit_components_textarea_properties_text_line-height) +
+      2 *
+      var(--recursica_ui-kit_components_textarea_properties_vertical-padding) +
+      2px
   );
+
+  /* Box Geometry */
   padding-top: var(
-    --recursica_ui-kit_components_text-field_properties_vertical-padding
+    --recursica_ui-kit_components_textarea_properties_vertical-padding
   );
   padding-bottom: var(
-    --recursica_ui-kit_components_text-field_properties_vertical-padding
+    --recursica_ui-kit_components_textarea_properties_vertical-padding
   );
   padding-left: var(
-    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+    --recursica_ui-kit_components_textarea_properties_horizontal-padding
   );
   padding-right: var(
-    --recursica_ui-kit_components_text-field_properties_horizontal-padding
+    --recursica_ui-kit_components_textarea_properties_horizontal-padding
   );
   border-radius: var(
-    --recursica_ui-kit_components_text-field_properties_border-radius
+    --recursica_ui-kit_components_textarea_properties_border-radius
   );
   border-width: 1px;
   border-style: solid;
 
   /* Strict Typography Unification */
   font-family: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-family
+    --recursica_ui-kit_components_textarea_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-size
+    --recursica_ui-kit_components_textarea_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-style
+    --recursica_ui-kit_components_textarea_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_text-field_properties_text_font-weight
+    --recursica_ui-kit_components_textarea_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_text-field_properties_text_letter-spacing
+    --recursica_ui-kit_components_textarea_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_text-field_properties_text_line-height
+    --recursica_ui-kit_components_textarea_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_text-field_properties_text_text-decoration
+    --recursica_ui-kit_components_textarea_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_text-field_properties_text_text-transform
+    --recursica_ui-kit_components_textarea_properties_text_text-transform
   );
 
   /* Base State Default Execution */
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_background
   );
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_border-color
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_text
+    --recursica_ui-kit_components_textarea_variants_states_default_properties_colors_text
   );
 
   outline: none;
@@ -104,119 +109,52 @@
 
 .input::placeholder {
   opacity: var(
-    --recursica_ui-kit_components_text-field_properties_placeholder-opacity
+    --recursica_ui-kit_components_textarea_properties_placeholder-opacity
   );
   color: inherit;
 }
 
-/* Dynamic Padding Overrides */
-.root[data-with-left-section] .input {
-  padding-left: var(--input-left-section-size);
-}
-
-.root[data-with-right-section] .input {
-  padding-right: var(--input-right-section-size);
-}
-
-/* Flexible End-Caps (Icons, actions) */
-.section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.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);
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_leading-icon
-  );
-}
-
-.section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_default_properties_colors_trailing-icon
-  );
-}
-
 /* -------------------------------------
    STATE CASCADE ARCHITECTURE
 -------------------------------------- */
 
-/* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+/* Focus State Mapping (Triggered internally via browser focus rules) */
 .input:focus-within,
 .input:focus {
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_background
   );
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_text
-  );
-}
-
-.root:focus-within .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_leading-icon
-  );
-}
-
-.root:focus-within .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_focus_properties_colors_trailing-icon
+    --recursica_ui-kit_components_textarea_variants_states_focus_properties_colors_text
   );
 }
 
 /* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
 .root[data-error] .input {
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_background
-  ) !important;
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_text
-  ) !important;
-}
-
-.root[data-error] .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_leading-icon
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_background
   ) !important;
-}
-
-.root[data-error] .section[data-position="right"] :global(svg) {
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_error_properties_colors_trailing-icon
+    --recursica_ui-kit_components_textarea_variants_states_error_properties_colors_text
   ) !important;
 }
 
 /* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
 .root[data-disabled] .input {
   border-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_border-color
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_border-color
   ) !important;
   background-color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_background
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_background
   ) !important;
   color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_text
+    --recursica_ui-kit_components_textarea_variants_states_disabled_properties_colors_text
   ) !important;
   cursor: not-allowed;
 }
-
-.root[data-disabled] .section[data-position="left"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_leading-icon
-  ) !important;
-}
-
-.root[data-disabled] .section[data-position="right"] :global(svg) {
-  color: var(
-    --recursica_ui-kit_components_text-field_variants_states_disabled_properties_colors_trailing-icon
-  ) !important;
-}

package/src/components/TextArea/TextArea.stories.tsx

@@ -26,6 +26,9 @@ const meta: Meta<TextAreaStoryProps> = {
     autosize: false,
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     ...formControlArgTypes,
     readOnly: {
       control: "boolean",

package/src/components/TextArea/TextArea.tsx

@@ -98,12 +98,16 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         : styles.input;
     }
 
+    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)"
+        controlMaxWidth="var(--recursica_ui-kit_components_textarea_properties_max-width)"
+        controlMinWidth="var(--recursica_ui-kit_components_textarea_properties_min-width)"
         overStyled={overStyled as true}
         formLayout={formLayout}
         labelSize={labelSize}

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
@@ -54,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.