@recursica/mantine-adapter 0.21.0 → 0.23.0

package/src/components/Checkbox/Checkbox.module.css

@@ -16,7 +16,7 @@
     0
   );
   margin: 0; /* HARDCODE: structural reset; consider token if layout needs change */
-  display: flex !important;
+  display: flex;
   flex-direction: column;
   gap: var(
     --recursica_ui-kit_components_checkbox-group_properties_item-gap,
@@ -68,53 +68,52 @@
 }
 
 .inner {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0 !important; /* HARDCODE: structural reset */
-  width: var(--recursica_ui-kit_components_checkbox_properties_size) !important;
-  height: var(
-    --recursica_ui-kit_components_checkbox_properties_size
-  ) !important;
-  /* Mathematically syncs the physical input checkbox bounding block visually with the center of the text's first line natively. */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0; /* HARDCODE: structural reset */
+  width: var(--recursica_ui-kit_components_checkbox_properties_size);
+  height: var(--recursica_ui-kit_components_checkbox_properties_size);
+  /* Apply font-size to this element so that an 'em' based line-height token evaluates to the correct exact pixel value. */
+  font-size: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_font-size
+  );
+  /* Mathematically syncs the physical input checkbox bounding block visually with the center of the text's first line.
+     NOTE: Since the Figma line-height token resolves to an 'em' length (e.g. 1.05em), we CANNOT multiply it by font-size in CSS. 
+     Instead, it naturally evaluates to the correct height because we applied the font-size above. */
   margin-top: calc(
     (
         var(
             --recursica_ui-kit_components_checkbox-item_properties_text_line-height
-          ) *
-          var(
-            --recursica_ui-kit_components_checkbox-item_properties_text_font-size
           ) -
           var(--recursica_ui-kit_components_checkbox_properties_size)
       ) /
       2
-  ) !important;
+  );
 }
 
 /* Base explicit reset masking underlying framework defaults */
 .input {
   cursor: pointer; /* HARDCODE: core interaction behavior */
   appearance: none; /* HARDCODE: reset native widget */
-  box-sizing: border-box !important; /* HARDCODE: ensures size includes borders */
-  width: var(--recursica_ui-kit_components_checkbox_properties_size) !important;
-  height: var(
-    --recursica_ui-kit_components_checkbox_properties_size
-  ) !important;
+  box-sizing: border-box; /* HARDCODE: ensures size includes borders */
+  width: var(--recursica_ui-kit_components_checkbox_properties_size);
+  height: var(--recursica_ui-kit_components_checkbox_properties_size);
   border-radius: var(
     --recursica_ui-kit_components_checkbox_properties_border-radius
-  ) !important;
+  );
   border-width: var(
     --recursica_ui-kit_components_checkbox_properties_border-size
-  ) !important;
+  );
   border-style: solid; /* HARDCODE: normalize primitive border-style */
 
   /* Standard unchecked state */
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-unchecked
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_border-unchecked
-  ) !important;
+  );
   transition: all 0.2s ease; /* HARDCODE: consider global transition token */
 }
 
@@ -122,18 +121,18 @@
 .input:checked {
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-checked
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_border-checked
-  ) !important;
+  );
 }
 .input[data-indeterminate] {
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_background-indeterminate
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_border-indeterminate
-  ) !important;
+  );
 }
 
 /* Disabled State */
@@ -141,48 +140,44 @@
   cursor: not-allowed; /* HARDCODE: disabled state default */
   opacity: var(
     --recursica_ui-kit_components_checkbox_properties_disabled-opacity
-  ) !important;
+  );
   background-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_disabled-background
-  ) !important;
+  );
   border-color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_disabled-border
-  ) !important;
+  );
 }
 
 .icon {
-  width: var(
-    --recursica_ui-kit_components_checkbox_properties_icon-size
-  ) !important;
-  height: var(
-    --recursica_ui-kit_components_checkbox_properties_icon-size
-  ) !important;
+  width: var(--recursica_ui-kit_components_checkbox_properties_icon-size);
+  height: var(--recursica_ui-kit_components_checkbox_properties_icon-size);
   color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_icon-color
-  ) !important;
+  );
 }
 .input:disabled + .icon {
   color: var(
     --recursica_ui-kit_components_checkbox_properties_colors_disabled-icon
-  ) !important;
+  );
 }
 
 .labelWrapper {
-  padding: 0 !important; /* HARDCODE: structural layout reset */
-  margin: 0 !important; /* HARDCODE: structural layout reset */
+  padding: 0; /* HARDCODE: structural layout reset */
+  margin: 0; /* HARDCODE: structural layout reset */
   flex: 1;
   min-width: 0; /* HARDCODE: forces text wrap boundary in flex child */
 }
 
 .label {
   cursor: pointer; /* HARDCODE: interactive affordance */
-  padding: 0 !important; /* HARDCODE: reset layout */
-  margin: 0 !important; /* HARDCODE: reset layout */
+  padding: 0; /* HARDCODE: reset layout */
+  margin: 0; /* HARDCODE: reset layout */
   word-wrap: break-word;
   white-space: normal;
   color: var(
-    --recursica_ui-kit_components_checkbox-item_properties_text_color
-  ) !important;
+    --recursica_ui-kit_components_checkbox-item_properties_colors_text
+  );
   font-family: var(
     --recursica_ui-kit_components_checkbox-item_properties_text_font-family
   );
@@ -195,10 +190,43 @@
   line-height: var(
     --recursica_ui-kit_components_checkbox-item_properties_text_line-height
   );
+  font-style: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_font-style
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_letter-spacing
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_checkbox-item_properties_text_text-transform
+  );
 }
-.root[data-disabled] .label {
+.root:has(input:disabled) .label {
   cursor: not-allowed; /* HARDCODE: disabled interaction */
   opacity: var(
-    --recursica_ui-kit_components_checkbox_properties_disabled-opacity
+    --recursica_ui-kit_components_checkbox-item_properties_disabled-opacity
+  );
+  color: var(
+    --recursica_ui-kit_components_checkbox-item_properties_colors_disabled-text
+  );
+}
+
+/* CheckboxGroup Layouts */
+.groupRoot {
+  display: flex;
+}
+.groupRoot[data-layout="stacked"] {
+  flex-direction: column;
+  gap: var(
+    --recursica_ui-kit_components_checkbox-group_variants_layouts_stacked_properties_label-field-gap
+  );
+}
+.groupRoot[data-layout="side-by-side"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(
+    --recursica_ui-kit_components_checkbox-group_variants_layouts_side-by-side_properties_gutter
   );
 }

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -24,6 +24,9 @@ To render a solitary component natively:
     },
   },
   argTypes: {
+    disabled: {
+      control: "boolean",
+    },
     readOnly: {
       control: "boolean",
       description:

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -100,15 +100,7 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
             defaultValue={defaultValue}
           >
             <div className={styles.groupRoot} data-layout={formLayout}>
-              {/* If the exact group is read-only natively, we inject disabled hooks dynamically over children? Mantine handles native context directly! */}
-              {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>
           </MantineCheckbox.Group>
         }

package/src/components/Chip/Chip.module.css

@@ -1,3 +1,18 @@
+/* EXEMPTIONS:
+   - close-icon-color, leading-icon-color, and select-specific state icon variables are ignored because 
+     Chip uses explicit state color definitions (e.g. unselected, selected, error, error-selected variant colors) 
+     to drive pixel-perfect hover and click transitions, rather than generic single-color overrides.
+   - text-size is ignored since actual chip sizing is dynamically driven by precise vertical padding and line-heights. */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_text-size */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_icon */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_error-selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_styles_unselected_properties_colors_selected-icon-color */
+
 /* HARDCODED VALUES
    border-style: solid;  (Baseline reset)
    box-sizing: border-box; (Baseline reset)
@@ -6,7 +21,7 @@
    outline: none; (Accessible fallback)
    padding: 0; (Override mantine default)
    background: transparent; (Override mantine default)
-*/
+ */
 
 .root {
   /* Set preset layout variables to override mantine defaults safely */
@@ -58,6 +73,9 @@
   font-weight: var(
     --recursica_ui-kit_components_chip_properties_text_font-weight
   );
+  font-style: var(
+    --recursica_ui-kit_components_chip_properties_text_font-style
+  );
   letter-spacing: var(
     --recursica_ui-kit_components_chip_properties_text_letter-spacing
   );

package/src/components/DatePicker/DATEPICKER_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,16 @@
+# DatePicker Implementation Notes
+
+## Architecture Overview
+
+The `DatePicker` component is a wrapper around the `@mantine/dates` `DatePickerInput` component, implementing the `FormControlWrapper` macro structure for Recursica. This ensures that the component visually and structurally aligns with standard Recursica input primitives.
+
+## Structural Constraints
+
+1. **Naked Input Usage**: We intentionally pass `label={undefined}`, `description={undefined}`, and `error={undefined}` to the Mantine `DatePickerInput` component. This suppresses Mantine's internal macro form wrapping and ensures that only our `WithReadOnlyWrapper` > `FormControlWrapper` orchestrates labels, description text, and ARIA state error boundaries.
+2. **Read-Only Implementation**: Since the value type for `DatePickerInput` can be a date object, string, or array, the `WithReadOnlyWrapper` attempts to safely cast the output value using standard `String(value)`. For production apps utilizing heavy date formatting logic, developers can pass a custom `readOnlyComponent` explicitly to bypass this default cast.
+3. **Calendar Portal/Dropdown (Figma Token Issue)**: The Recursica UI Kit's `date-picker` component in Figma fails to export any explicit structural or color properties for the calendar popover itself (e.g. elevation, surface background, selected day colors). To solve this organically within the framework without breaking strict token adherence, we manually override the Mantine `.dropdown` and `.day[data-selected]` classes using `--recursica_ui-kit_components_hover-card-popover` tokens for elevation/padding/surfaces, and `--recursica_ui-kit_components_button_variants_styles_solid` tokens for the selected primary blue day. This guarantees strict visual adherence to the system until explicitly mapped tokens are provided in the UI Kit.
+
+## Styling Quirks
+
+- The `DatePickerInput` mimics Mantine's `Input` structure natively (`.input`, `.wrapper`, `.section`). We attach our `styles.input` and `styles.root` classes exactly like `TextField`.
+- The global layout margin override (`.layoutOverride`) utilizes `--form-control-margin-bottom` driven by specific stacked/side-by-side design tokens.

package/src/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,286 @@
+/* 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_date-picker_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_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_date-picker_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_date-picker_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.
+   - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
+   - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
+*/
+
+.root {
+  display: flex;
+  position: relative;
+  width: var(--recursica_ui-kit_components_date-picker_properties_width, 100%);
+  min-height: var(
+    --recursica_ui-kit_components_date-picker_properties_min-height
+  );
+
+  /* Override Mantine native Input variables governing section spacing padding mathematics safely */
+  --input-left-section-size: calc(
+    var(
+        --recursica_ui-kit_components_date-picker_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_date-picker_properties_icon-size) +
+      var(--recursica_ui-kit_components_date-picker_properties_icon-text-gap)
+  );
+  --input-right-section-size: calc(
+    var(
+        --recursica_ui-kit_components_date-picker_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_date-picker_properties_icon-size) +
+      var(--recursica_ui-kit_components_date-picker_properties_icon-text-gap)
+  );
+}
+
+.input {
+  /* Structural Overrides */
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+
+  /* Box Geometry */
+  min-height: var(
+    --recursica_ui-kit_components_date-picker_properties_min-height
+  );
+  padding-top: var(
+    --recursica_ui-kit_components_date-picker_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_date-picker_properties_vertical-padding
+  );
+  padding-left: var(
+    --recursica_ui-kit_components_date-picker_properties_horizontal-padding
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_date-picker_properties_horizontal-padding
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_date-picker_properties_border-radius
+  );
+  border-width: 1px;
+  border-style: solid;
+
+  /* Strict Typography Unification */
+  font-family: var(
+    --recursica_ui-kit_components_date-picker_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_date-picker_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_date-picker_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_date-picker_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_date-picker_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_date-picker_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_date-picker_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_date-picker_properties_text_text-transform
+  );
+
+  /* Base State Default Execution */
+  background-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_text
+  );
+
+  outline: none;
+}
+
+.input::placeholder {
+  opacity: var(
+    --recursica_ui-kit_components_date-picker_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;
+  height: 100%;
+}
+
+.section[data-position="left"] {
+  justify-content: flex-start;
+  padding-left: var(
+    --recursica_ui-kit_components_date-picker_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_date-picker_properties_horizontal-padding
+  );
+}
+
+.section :global(svg) {
+  width: var(--recursica_ui-kit_components_date-picker_properties_icon-size);
+  height: var(--recursica_ui-kit_components_date-picker_properties_icon-size);
+  color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_default_properties_colors_leading-icon
+  );
+}
+
+/* -------------------------------------
+   STATE CASCADE ARCHITECTURE
+-------------------------------------- */
+
+/* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+.input:focus-within,
+.input:focus {
+  border-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_background
+  );
+  color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_text
+  );
+}
+
+.root:focus-within .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_focus_properties_colors_leading-icon
+  );
+}
+
+/* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-error] .input {
+  border-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_text
+  ) !important;
+}
+
+.root[data-error] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_error_properties_colors_leading-icon
+  ) !important;
+}
+
+/* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-disabled] .input {
+  border-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_date-picker_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_date-picker_variants_states_disabled_properties_colors_leading-icon
+  ) !important;
+}
+
+/* =========================================
+   CALENDAR POPOVER OVERRIDES
+   Maps generic popover & solid button tokens
+   to enforce Recursica's global styling.
+   ========================================= */
+
+.dropdown {
+  background-color: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_background
+  );
+  border: var(
+      --recursica_ui-kit_components_hover-card-popover_properties_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_hover-card-popover_properties_colors_border-color
+    );
+  border-radius: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_border-radius
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_elevation
+  );
+  padding: var(
+      --recursica_ui-kit_components_hover-card-popover_properties_vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_hover-card-popover_properties_horizontal-padding
+    );
+  font-family: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_content-text_font-family
+  );
+}
+
+.calendarHeader {
+  color: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_content
+  );
+}
+
+.day {
+  color: var(
+    --recursica_ui-kit_components_hover-card-popover_properties_colors_content
+  );
+  border-radius: var(--recursica_brand_dimensions_border-radii_default, 4px);
+}
+
+.day[data-selected],
+.day[data-selected]:hover {
+  background-color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background
+  );
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text
+  );
+}