@recursica/mantine-adapter 0.43.0 → 0.44.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.43.0",
+  "version": "0.44.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -23,4 +23,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Neutralize Mantine's built-in margin-inline (--mantine-spacing-xs default) so .root's gap alone controls spacing */
+  margin-inline: 0;
 }

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -56,12 +56,6 @@ export const Default: Story = {
   },
 };
 
-export const StaticExample: Story = {
-  args: {
-    items: ["Store", "Electronics", "Computers", "Laptops"],
-  },
-};
-
 export const CustomSeparator: Story = {
   args: {
     items: ["Root", "Branch", "Leaf"],

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -35,6 +35,21 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         | undefined,
     );
 
+    // Mantine's Breadcrumbs, unlike MUI's, doesn't hide the separator from screen
+    // readers by default — it's a plain text node. Match MUI's built-in aria-hidden,
+    // letting a caller override it via attributes.separator["aria-hidden"] if needed.
+    const callerAttributes = (sanitizedProps as Record<string, unknown>)
+      .attributes as
+      | Partial<Record<string, Record<string, unknown>>>
+      | undefined;
+    const mergedAttributes = {
+      ...callerAttributes,
+      separator: {
+        "aria-hidden": true,
+        ...callerAttributes?.separator,
+      },
+    };
+
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;
     const finalClass = classNameProp
@@ -47,6 +62,7 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         {...(sanitizedProps as unknown as MantineBreadcrumbsProps)}
         className={finalClass}
         classNames={mergedClassNames}
+        attributes={mergedAttributes}
       />
     );
   },

package/src/components/Dropdown/DROPDOWN_IMPLEMENTATION_NOTES.md

@@ -5,3 +5,5 @@ The `Dropdown` component is mapped explicitly to Mantine's `<Select>` following
 1. **Naked Primitive Mapping:** Mantine's `Select` natively executes macro-label generation. To decouple it, we explicitly disable internal labels (`label={undefined}`) and inject it purely inside our generic `FormControlWrapper`.
 2. **Strict Dropdown Design Tokens:** The adapter implements strictly sandboxed styling utilizing only `--recursica_ui-kit_components_dropdown_...` variables. It explicitly does NOT inherit general `text-field` tokens despite geometric similarities, ensuring dropdown menus can be themed independently.
 3. **Dropdown Appendages:** To correctly map Mantine's detached Popover `.dropdown` and list `.option` items, we targeted focus and geometric bindings appending standard padding structures matched to the dropdown height overrides dynamically into our `Dropdown.module.css`.
+4. **Popup Vertical Padding:** The gap above/below the option list inside `.dropdown` is explicitly set from the same `--recursica_..._dropdown_properties_vertical-padding` token the closed control uses — it was previously left to Mantine's own untokenized `--combobox-padding` (4px) default.
+5. **Clear Button Styling:** Mantine's native clear button (`clearButtonProps`, shown when `clearable` + a value are both present) is a bare `CloseButton` with its own hardcoded gray icon/hover styling by default. `Dropdown.tsx` merges in a `.clearButton` class (Dropdown.module.css) that overrides it with the same icon-size/trailing-icon-color/focus-ring tokens as the rest of the right section, using the double-class-selector specificity trick (same as Chip.module.css's `.root.root`) to beat Mantine's own CSS module rule without `!important`.

package/src/components/Dropdown/Dropdown.module.css

@@ -169,6 +169,39 @@
   );
 }
 
+/* Mantine's own clear button (rendered via `clearButtonProps`, see Dropdown.tsx) is a bare
+   `CloseButton` by default — its own module CSS hardcodes a gray icon color and a circular gray
+   hover background, neither of which is Recursica-token-driven. The double class selector (same
+   specificity-boosting trick as Chip.module.css's `.root.root`) beats that default without
+   needing `!important`. Same icon-size/trailing-icon tokens as the rest of this section, same
+   focus-visible ring technique as Chip's own `.removeIcon` — the established inline icon-button
+   pattern elsewhere in this adapter. */
+.clearButton.clearButton {
+  width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  min-width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  min-height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  border-radius: 50%;
+  background: transparent;
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_trailing-icon
+  );
+  outline: none;
+}
+
+.clearButton.clearButton:hover {
+  background: transparent;
+}
+
+.clearButton.clearButton:focus-visible {
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}
+
 /* -------------------------------------
    STATE CASCADE ARCHITECTURE
 -------------------------------------- */
@@ -254,6 +287,17 @@
     --recursica_ui-kit_components_dropdown_properties_border-radius
   );
   overflow: hidden;
+
+  /* The visible top/bottom gap before/after the option list was previously left to Mantine's own
+     untokenized `--combobox-padding` default (4px) — wire it to the same dropdown vertical-padding
+     token the closed control itself uses instead (mirrors the mui-adapter fix to the equivalent
+     gap there, which came from MUI's own untokenized 8px `.MuiList-padding` default). */
+  padding-top: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  );
 }
 
 .option {
@@ -277,10 +321,8 @@
   cursor: pointer;
 }
 
-/* No per-option selected/hovered tokens exist in the schema; use the generic overlay tint
-   (same technique as Table's row hover) to highlight the active option. */
-.option[data-selected="true"],
-.option[data-combobox-selected="true"],
+/* No per-option hovered token exists in the schema; use the generic overlay tint (same technique
+   as Table's row hover) to highlight a hovered-but-not-selected option. */
 .option[data-hovered="true"],
 .option:hover {
   background-color: color-mix(
@@ -290,3 +332,18 @@
     transparent
   );
 }
+
+/* No dedicated dropdown-option "selected" token exists in the schema either, but the menu-item
+   component's selected-state colors are the closest real token family for the same concept (a
+   selected row in a list) — reused here rather than the neutral hover tint above, which is what
+   previously made the selected option read as grey instead of Recursica's brand color. Matches
+   the mui-adapter fix for the same gap. */
+.option[data-selected="true"],
+.option[data-combobox-selected="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_text-color
+  );
+}

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -65,6 +65,27 @@ export const SearchableClearable: Story = {
   },
 };
 
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Destination",
+    leftSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+        <circle cx="12" cy="10" r="3"></circle>
+      </svg>
+    ),
+  },
+};
+
 export const StaticError: Story = {
   args: {
     error: "You must choose a valid destination.",

package/src/components/Dropdown/Dropdown.tsx

@@ -68,6 +68,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       value,
       defaultValue,
       data,
+      clearButtonProps,
       ...rest
     } = props;
     const sanitizedProps = omitUnsupportedProps(
@@ -76,6 +77,21 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
+    // Mantine's own clear button (rendered when `clearable` + a value are both present) otherwise
+    // renders unstyled — bare `CloseButton` defaults, no Recursica icon-button treatment. Merge in
+    // our own class (see `.clearButton` in Dropdown.module.css) alongside anything the caller
+    // already passed, same merge shape as `mergeClassNames` but for a single `className` string
+    // rather than a per-slot classNames map.
+    const consumerClearButtonProps = clearButtonProps as
+      | Record<string, unknown>
+      | undefined;
+    const mergedClearButtonProps = {
+      ...consumerClearButtonProps,
+      className: consumerClearButtonProps?.className
+        ? `${styles.clearButton} ${consumerClearButtonProps.className as string}`
+        : styles.clearButton,
+    };
+
     // Securely map core native blocks down ensuring nested CSS modules map precisely
     const mergedClassNames = mergeClassNames(
       {
@@ -139,6 +155,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             value={value}
             defaultValue={defaultValue}
             data={(data as unknown as MantineSelectProps["data"]) || []}
+            clearButtonProps={mergedClearButtonProps}
             label={undefined}
             description={undefined}
             error={undefined}

package/src/components/Dropdown/USAGE.md

@@ -45,3 +45,4 @@ All Recursica components in the `@recursica/mantine-adapter` package adhere stri
 ## 4. Notes
 
 - `Dropdown` is styled independently from `TextField`; even though they look similar, they are themed using separate design tokens.
+- Pass `leftSection` for a leading icon, and `clearable` (with a value present) to show a clear button — both render using the dropdown's own icon-color tokens.

package/src/components/Menu/Menu.stories.tsx

@@ -199,7 +199,9 @@ export const Default: Story = {
     position: "bottom-start",
     withArrow: false,
     offset: 5,
-    opened: undefined,
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
@@ -230,6 +232,9 @@ export const Default: Story = {
 export const WithDisabledItems: Story = {
   args: {
     position: "bottom-start",
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
@@ -258,6 +263,9 @@ export const WithSubmenus: Story = {
   args: {
     position: "bottom-start",
     width: 200,
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {