@recursica/mantine-adapter 0.28.0 → 0.30.0

package/dist/src/components/Panel/Panel.d.ts

@@ -4,7 +4,7 @@ import { RecursicaPanelProps as BaseRecursicaPanelProps } from '@recursica/adapt
 /**
  * Recursica Panel root props. Extends Mantine Drawer.
  */
-export interface RecursicaPanelProps extends Omit<MantineDrawerProps, "size" | "styles" | "classNames" | "style" | "position">, BaseRecursicaPanelProps {
+export interface RecursicaPanelProps extends Omit<MantineDrawerProps, "size" | "styles" | "classNames" | "style" | "position" | "opened">, BaseRecursicaPanelProps {
 }
 export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
 /**

package/dist/src/components/Popover/Popover.d.ts

@@ -17,7 +17,9 @@ import { RecursicaPopoverProps } from '@recursica/adapter-common';
  * </Popover>
  * ```
  */
-export type PopoverProps = RecursicaOverStyled<MantinePopoverProps & RecursicaPopoverProps>;
+export type PopoverProps = Omit<RecursicaOverStyled<Omit<MantinePopoverProps, "position"> & RecursicaPopoverProps>, "position"> & {
+    position?: MantinePopoverProps["position"];
+};
 declare const PopoverBase: {
     ({ overStyled, withBeak, ...rest }: PopoverProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/src/components/Tree/Tree.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface TreeProps extends React.ComponentPropsWithoutRef<"div"> {
+    overStyled?: boolean;
+}
+/**
+ * Placeholder component for Tree (Coming Soon).
+ */
+export declare const Tree: React.ForwardRefExoticComponent<RecursicaOverStyled<TreeProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Tree/index.d.ts

@@ -0,0 +1 @@
+export * from './Tree';

package/dist/src/components/index.d.ts

@@ -47,3 +47,4 @@ export * from './Title/Title';
 export * from './Toast';
 export * from './Tooltip/Tooltip';
 export * from './TransferList/TransferList';
+export * from './Tree';

package/dist/src/index.d.ts

@@ -151,4 +151,5 @@ export declare const Title: typeof rawComponents.Title;
 export declare const Toast: typeof rawComponents.Toast;
 export declare const Tooltip: typeof rawComponents.Tooltip;
 export declare const TransferList: typeof rawComponents.TransferList;
+export declare const Tree: typeof rawComponents.Tree;
 export type { RecursicaCheckboxGroupProps, RecursicaDatePickerProps, RecursicaDropdownProps, RecursicaNumberInputProps, RecursicaRadioGroupProps, RecursicaReadOnlyFieldProps, RecursicaReadOnlyTextFieldProps, RecursicaSliderProps, RecursicaSwitchGroupProps, RecursicaTextAreaProps, RecursicaTextFieldProps, } from './components';

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.28.0",
+  "version": "0.30.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",
@@ -52,7 +52,7 @@
     "build-storybook": "storybook build -o storybook-static",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6011",
-    "analyze-tokens": "analyze-tokens --css recursica_variables_scoped.css --dir src/components --output token-analysis.json",
+    "analyze-tokens": "analyze-tokens --css @recursica/official-release/recursica_variables_scoped.css --dir src/components --output token-analysis.json",
     "prebuild": "npm run analyze-tokens"
   },
   "devDependencies": {

package/src/components/Button/Button.module.css

@@ -356,9 +356,23 @@
   color: var(
     --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-hover
   );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color-hover
+  );
   box-shadow: var(
     --recursica_ui-kit_components_button_variants_styles_solid_properties_hover-elevation
   );
+
+  .iconWrapper {
+    color: var(
+      --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_icon-color-hover
+    );
+  }
+}
+.root[data-variant="solid"]:disabled {
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_disabled-elevation
+  );
 }
 
 /* OUTLINE */
@@ -389,9 +403,23 @@
   color: var(
     --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-hover
   );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_border-color-hover
+  );
   box-shadow: var(
     --recursica_ui-kit_components_button_variants_styles_outline_properties_hover-elevation
   );
+
+  .iconWrapper {
+    color: var(
+      --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_icon-color-hover
+    );
+  }
+}
+.root[data-variant="outline"]:disabled {
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_disabled-elevation
+  );
 }
 
 /* TEXT */
@@ -422,7 +450,21 @@
   color: var(
     --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-hover
   );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color-hover
+  );
   box-shadow: var(
     --recursica_ui-kit_components_button_variants_styles_text_properties_hover-elevation
   );
+
+  .iconWrapper {
+    color: var(
+      --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color-hover
+    );
+  }
+}
+.root[data-variant="text"]:disabled {
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_disabled-elevation
+  );
 }

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from "./DatePicker";
 import { formControlArgTypes } from "../../../.storybook/commonArgTypes";

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

@@ -42,12 +42,6 @@ const meta: Meta<DropdownStoryProps> = {
     clearable: {
       control: "boolean",
     },
-    checked: {
-      table: { disable: true },
-    },
-    defaultChecked: {
-      table: { disable: true },
-    },
     containerWidth: {
       table: { disable: true },
     },

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -21,8 +21,6 @@ const meta: Meta<typeof NumberInput> = {
       control: "select",
       options: ["small", "default", "large"],
     },
-    checked: { table: { disable: true } },
-    defaultChecked: { table: { disable: true } },
     assistiveWithIcon: { table: { disable: true } },
     labelOptionalText: { table: { disable: true } },
     labelWithEditIcon: { table: { disable: true } },

package/src/components/Panel/Panel.tsx

@@ -21,7 +21,7 @@ import { type RecursicaPanelProps as BaseRecursicaPanelProps } from "@recursica/
 export interface RecursicaPanelProps
   extends Omit<
       MantineDrawerProps,
-      "size" | "styles" | "classNames" | "style" | "position"
+      "size" | "styles" | "classNames" | "style" | "position" | "opened"
     >,
     BaseRecursicaPanelProps {}
 

package/src/components/Popover/Popover.tsx

@@ -35,9 +35,14 @@ import { type RecursicaPopoverProps } from "@recursica/adapter-common";
  * </Popover>
  * ```
  */
-export type PopoverProps = RecursicaOverStyled<
-  MantinePopoverProps & RecursicaPopoverProps
->;
+export type PopoverProps = Omit<
+  RecursicaOverStyled<
+    Omit<MantinePopoverProps, "position"> & RecursicaPopoverProps
+  >,
+  "position"
+> & {
+  position?: MantinePopoverProps["position"];
+};
 
 const PopoverBase = function Popover({
   overStyled = false,

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -3,6 +3,7 @@
    - background-color: transparent; on label hover (overriding Mantine)
    - Scope prefix .root to enforce Figma tokens over Mantine's inline calculation without using !important
 */
+/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius */
 
 .root {
   background-color: var(

package/src/components/Slider/Slider.module.css

@@ -5,6 +5,7 @@
  * - transform: translateX(-50%); (Mantine's standard step marks positioning alignment offset)
  * - outline: none; border-style: solid; (Standard focus reset and border outlines)
  */
+/* recursica-ignore: --recursica_ui-kit_components_slider_properties_input-border-size */
 
 /* ==========================================
    1. Baseline, Reset & Layout Overrides
@@ -356,6 +357,34 @@
    6. State-Specific Overrides (Disabled, Error)
    ========================================== */
 
+/* Focus states */
+.sliderRoot:has(.sliderThumb:focus) .sliderTrack,
+.sliderRoot:focus-within .sliderTrack {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_track
+  );
+}
+
+.sliderRoot:has(.sliderThumb:focus) .sliderMark,
+.sliderRoot:focus-within .sliderMark {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_step-indicator-color
+  );
+}
+
+.sliderRoot:has(.sliderThumb:focus) .sliderMark[data-filled],
+.sliderRoot:focus-within .sliderMark[data-filled] {
+  background-color: var(
+    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_step-indicator-color-active
+  );
+}
+
+.sliderContainer:focus-within .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_slider_variants_states_focus_properties_colors_icon-color
+  );
+}
+
 /* Disabled state */
 .sliderContainer[data-disabled="true"] .iconWrapper {
   color: var(

package/src/components/Table/Table.module.css

@@ -1,7 +1,392 @@
 /* HARDCODED VALUES:
- * None. This is a generic layout wrapper.
+ * - border-collapse: separate; border-spacing: 0; (To support custom border-radius on table elements)
+ * - overflow: hidden; (To prevent content from bleeding outside the rounded table border)
  */
 
 .root {
-  /* Mantine Table handles table layout natively. */
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(
+    --recursica_ui-kit_components_table_properties_border-radius
+  );
+  border: var(--recursica_ui-kit_components_table_properties_border-size) solid
+    var(--recursica_ui-kit_components_table_properties_colors_border-color);
+  overflow: hidden;
+}
+
+/* ==========================================
+   1. General Cell Dividers & Padding Defaults
+   ========================================== */
+
+.root th,
+.root td {
+  padding: var(--recursica_ui-kit_components_table_properties_row-padding)
+    var(--recursica_ui-kit_components_table_properties_padding);
+  border-bottom: var(
+      --recursica_ui-kit_components_table_properties_row-divider-size
+    )
+    solid
+    var(--recursica_ui-kit_components_table_properties_colors_row-divider-color);
+}
+
+.root th + th,
+.root td + td {
+  border-left: var(
+      --recursica_ui-kit_components_table_properties_column-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table_properties_colors_column-divider-color
+    );
+}
+
+/* ==========================================
+   2. Row Highlighting & Selection Styles
+   ========================================== */
+
+/* Striped rows */
+.root tbody tr:nth-of-type(even) td {
+  background-color: color-mix(
+    in srgb,
+    var(--recursica_ui-kit_components_table_properties_colors_striped-color)
+      calc(
+        var(
+            --recursica_ui-kit_components_table_properties_opacities_striped-opacity
+          ) *
+          100%
+      ),
+    transparent
+  );
+}
+
+/* Selected rows */
+.root tbody tr[data-selected] td {
+  background-color: color-mix(
+    in srgb,
+    var(--recursica_ui-kit_components_table_properties_colors_selected-color)
+      calc(
+        var(
+            --recursica_ui-kit_components_table_properties_opacities_selected-opacity
+          ) *
+          100%
+      ),
+    transparent
+  );
+}
+
+/* Hover rows */
+.root tbody tr:hover td {
+  background-color: color-mix(
+    in srgb,
+    var(
+        --recursica_ui-kit_components_table_properties_colors_highlight-on-hover-color
+      )
+      calc(
+        var(
+            --recursica_ui-kit_components_table_properties_opacities_highlight-on-hover-opacity
+          ) *
+          100%
+      ),
+    transparent
+  );
+}
+
+/* ==========================================
+   3. Table Headers (th)
+   ========================================== */
+
+.root thead th {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_cell-color-enabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_text-color-enabled
+  );
+  padding: var(
+      --recursica_ui-kit_components_table-header_properties_padding-vertical
+    )
+    var(
+      --recursica_ui-kit_components_table-header_properties_padding-horizontal
+    );
+  margin-top: var(
+    --recursica_ui-kit_components_table-header_properties_vertical-margin
+  );
+  margin-bottom: var(
+    --recursica_ui-kit_components_table-header_properties_vertical-margin
+  );
+  border-bottom: var(
+      --recursica_ui-kit_components_table-header_properties_horizontal-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-header_properties_colors_horizontal-divider-color
+    );
+
+  /* Unsorted text style by default */
+  font-family: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_text-transform
+  );
+}
+
+.root thead th + th {
+  border-left: var(
+      --recursica_ui-kit_components_table-header_properties_vertical-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-header_properties_colors_vertical-divider-color
+    );
+}
+
+/* Unsorted specific state overrides */
+.root thead th:not([data-sorted="true"]) {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_unsorted-cell-color
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_unsorted-text-color
+  );
+}
+
+/* Sorted specific state overrides */
+.root thead th[data-sorted="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_sorted-cell-color
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_sorted-text-color
+  );
+
+  font-family: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_text-transform
+  );
+}
+
+/* Disabled Header */
+.root thead th[data-disabled="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_cell-color-disabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_text-color-disabled
+  );
+}
+
+/* Header sort icon & gap spacing helper */
+.root thead th .sortIcon {
+  width: var(--recursica_ui-kit_components_table-header_properties_icon-size);
+  height: var(--recursica_ui-kit_components_table-header_properties_icon-size);
+  margin-left: var(
+    --recursica_ui-kit_components_table-header_properties_label-sort-gap
+  );
+}
+
+/* ==========================================
+   4. Table Cells (td)
+   ========================================== */
+
+.root tbody td {
+  background-color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_cell-color-enabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_text-color-enabled
+  );
+  padding: var(
+      --recursica_ui-kit_components_table-cell_properties_padding-vertical
+    )
+    var(--recursica_ui-kit_components_table-cell_properties_padding-horizontal);
+  max-width: var(--recursica_ui-kit_components_table-cell_properties_max-width);
+
+  /* Standard text style */
+  font-family: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_line-height
+  );
+  text-align: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_text-align
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_text-transform
+  );
+}
+
+/* Currency formatted cell layout override */
+.root tbody td[data-currency="true"] {
+  font-family: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_line-height
+  );
+  text-align: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_text-align
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_text-transform
+  );
+}
+
+/* Disabled Cells */
+.root tbody tr[data-disabled="true"] td,
+.root tbody td[data-disabled="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_cell-color-disabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_text-color-disabled
+  );
+}
+
+/* ==========================================
+   5. Table Footers (tfoot td)
+   ========================================== */
+
+.root tfoot td {
+  background-color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_cell-color-enabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_text-color-enabled
+  );
+  padding: var(
+      --recursica_ui-kit_components_table-footer_properties_padding-vertical
+    )
+    var(
+      --recursica_ui-kit_components_table-footer_properties_padding-horizontal
+    );
+  margin-top: var(
+    --recursica_ui-kit_components_table-footer_properties_vertical-margin
+  );
+  margin-bottom: var(
+    --recursica_ui-kit_components_table-footer_properties_vertical-margin
+  );
+  border-top: var(
+      --recursica_ui-kit_components_table-footer_properties_horizontal-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-footer_properties_colors_horizontal-divider-color
+    );
+
+  /* Footer typography style */
+  font-family: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_text-transform
+  );
+}
+
+.root tfoot td + td {
+  border-left: var(
+      --recursica_ui-kit_components_table-footer_properties_vertical-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-footer_properties_colors_vertical-divider-color
+    );
+}
+
+/* Disabled Footer Row/Cells */
+.root tfoot tr[data-disabled="true"] td,
+.root tfoot td[data-disabled="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_cell-color-disabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_text-color-disabled
+  );
 }

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

@@ -1,6 +1,8 @@
 /* 
   Recursica Tabs CSS module natively binding to Figma variables.
 */
+/* recursica-ignore: --recursica_ui-kit_components_tabs_properties_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_tabs_properties_hover-opacity */
 
 .root {
   width: 100%;

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

@@ -14,7 +14,12 @@
    ====================================== */
 
 .root {
-  border-style: none; /* HARDCODE: Reset to ensure clean shadow boundaries */
+  border-radius: var(
+    --recursica_ui-kit_components_toast_properties_border-radius
+  );
+  border-width: var(--recursica_ui-kit_components_toast_properties_border-size);
+  border-style: solid;
+  border-color: transparent;
   box-shadow: var(
     --recursica_ui-kit_components_toast_properties_elevation_layer-0
   );