@recursica/mantine-adapter 0.38.1 → 0.39.0

package/ARCHITECTURE.md

@@ -13,3 +13,6 @@ This document describes the high-level architecture and philosophy of the `@recu
 
 - Components map closely to Mantine's structure but enforce Recursica design tokens.
 - We avoid over-styling; components only diverge from Mantine defaults when dictated by the Recursica design system.
+- Each component adheres to the underlying UI-kit prop signature so that they can easily replace components in the existing code-base
+- Recursica defines a set of common props that are shared across all framework adapters. These sometimes serve the same purpose as existing UI-kit props. In that case, the Recursica prop takes precedence and are the preferred way to achieve the desired effect.
+- Adapter props are removed from the underlying UI-kit when it leads to behavior that Recursica does not support. Recursica is opinionated about the behavior of its components and does not support all of the behavior of the underlying UI-kit.

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @recursica/mantine-adapter
 
+## 0.39.0
+
+### Minor Changes
+
+- 106bc34: Accordion: closed silent prop-contract conflicts where native `expanded`/`onChange`/`expandIcon`/`icon` could override Recursica's own computed state, made `variant` a real predefined union instead of a bare string, and formally supported a per-item `disabled` prop in both adapters.
+  Also documented `children` across all Accordion sub-components in `RecursicaAccordionProps.ts`, including a new `RecursicaAccordionPanelProps` interface for the Panel.
+- 106bc34: AssistiveElement: `assistiveVariant="error"` now defaults `role="alert"` in both adapters so
+  error text is announced by assistive tech as it appears or changes (an explicit `role` still
+  wins). Also (MUI only) closed a prop-contract conflict where native `error`/`component` could
+  silently override Recursica's own computed values, added the missing `RecursicaOverStyled`
+  wrapper, and hardened a CSS specificity tie against MUI's own `.Mui-error` color. Documented
+  `children` in `RecursicaAssistiveElementProps.ts` and added implementation notes to both adapters.
+
+### Patch Changes
+
+- 106bc34: AutoComplete (Mantine): fixed error state not turning the border red — the `wrapperProps` `data-error` hack (copied from `Input`-based components) targets Mantine's `Input.Wrapper` for `InputBase`-based components like `Autocomplete`, not the input's own root box, so it never reached the CSS. Now passes `error` as a boolean directly to Mantine's `Autocomplete`, which sets the border-triggering attribute natively without duplicating the assistive error text.
+- 106bc34: Avatar (MUI): fixed `variant` being fed into MUI's native shape prop instead of a color treatment, making it a silent no-op. Also documented `children` in the shared prop types and added missing mui-adapter implementation notes.
+- 106bc34: Switch: attached `SwitchGroup` as the `Switch.Group` compound export (it existed standalone but was never attached), and tightened `RecursicaSwitchGroupProps` value types from `unknown[]` to `string[]`.
+- 106bc34: SwitchGroup: fixed `side-by-side` layout always rendering as if stacked — the group was capped to the switch-item label's own 200px max-width, narrower than the mandatory 224px label column, guaranteeing a wrap.
+- 106bc34: Switch (Mantine): fixed the focus ring rendering Mantine's default blue instead of Recursica's focus token — suppressed the native outline and drew the real ring on the track.
+- Updated dependencies [106bc34]
+- Updated dependencies [106bc34]
+- Updated dependencies [106bc34]
+- Updated dependencies [106bc34]
+- Updated dependencies [106bc34]
+  - @recursica/adapter-common@0.15.0
+
 ## 0.38.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -123,7 +123,7 @@ export declare const AccordionControl: typeof rawComponents.AccordionControl;
 
 declare const AccordionControl_2: ForwardRefExoticComponent<AccordionControlWrapperProps & RefAttributes<HTMLButtonElement>>;
 
-declare type AccordionControlWrapperProps = RecursicaOverStyled<AccordionControlProps & RecursicaAccordionControlProps>;
+declare type AccordionControlWrapperProps = RecursicaOverStyled<Omit<AccordionControlProps, "icon"> & RecursicaAccordionControlProps>;
 
 export declare const AccordionItem: typeof rawComponents.AccordionItem;
 
@@ -135,7 +135,7 @@ export declare const AccordionPanel: typeof rawComponents.AccordionPanel;
 
 declare const AccordionPanel_2: ForwardRefExoticComponent<AccordionPanelWrapperProps & RefAttributes<HTMLDivElement>>;
 
-declare type AccordionPanelWrapperProps = RecursicaOverStyled<AccordionPanelProps>;
+declare type AccordionPanelWrapperProps = RecursicaOverStyled<AccordionPanelProps & RecursicaAccordionPanelProps>;
 
 declare type AccordionProps = RecursicaOverStyled<Omit<AccordionProps_2, "value" | "defaultValue" | "onChange" | "multiple" | "variant"> & RecursicaAccordionProps>;
 
@@ -160,7 +160,7 @@ export declare const Avatar: typeof rawComponents.Avatar;
  */
 declare const Avatar_2: (<C = "div">(props: PolymorphicComponentProps<C, AvatarProps>) => React.ReactElement) & Omit<FunctionComponent<((AvatarProps & {
 component?: any;
-}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "attributes" | "overStyled" | "name" | "icon" | "size" | "component" | "alt" | "src" | "gradient" | "imageProps" | "autoContrast" | "allowedInitialsColors"> & {
+}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "attributes" | "overStyled" | "icon" | "name" | "size" | "component" | "alt" | "src" | "gradient" | "imageProps" | "autoContrast" | "allowedInitialsColors"> & {
 ref?: any;
 renderRoot?: (props: any) => any;
 }) | (AvatarProps & {
@@ -220,7 +220,7 @@ export declare const Button: typeof rawComponents.Button;
  */
 declare const Button_2: (<C = "button">(props: PolymorphicComponentProps<C, ButtonProps>) => default_2.ReactElement) & Omit<default_2.FunctionComponent<((ButtonProps & {
     component?: any;
-}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "color" | "children" | "radius" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "attributes" | "overStyled" | "disabled" | "icon" | "justify" | "size" | "component" | "rightSection" | "data-disabled" | "gradient" | "autoContrast" | "loading" | "loaderProps" | "loaderVariant" | "loaderSize" | "useRecursicaLoader"> & {
+}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "color" | "children" | "radius" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "attributes" | "overStyled" | "disabled" | "icon" | "justify" | "data-disabled" | "size" | "component" | "rightSection" | "gradient" | "autoContrast" | "loading" | "loaderProps" | "loaderVariant" | "loaderSize" | "useRecursicaLoader"> & {
     ref?: any;
     renderRoot?: (props: any) => any;
 }) | (ButtonProps & {
@@ -838,7 +838,7 @@ declare type MenuDropdownProps = RecursicaOverStyled<MenuDropdownProps_2>;
  */
 declare const MenuItem: (<C = "button">(props: PolymorphicComponentProps<C, MenuItemProps>) => React.ReactElement) & Omit<FunctionComponent<((MenuItemProps & {
 component?: any;
-}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "overStyled" | "disabled" | "component" | "leftSection" | "rightSection" | "data-disabled" | "closeMenuOnClick"> & {
+}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "overStyled" | "disabled" | "data-disabled" | "component" | "leftSection" | "rightSection" | "closeMenuOnClick"> & {
 ref?: any;
 renderRoot?: (props: any) => any;
 }) | (MenuItemProps & {
@@ -900,7 +900,7 @@ declare type MenuSubDropdownProps = RecursicaOverStyled<MenuSubDropdownProps_2>;
  */
 declare const MenuSubItem: (<C = "button">(props: PolymorphicComponentProps<C, MenuSubItemProps>) => React.ReactElement) & Omit<FunctionComponent<((MenuSubItemProps & {
 component?: any;
-}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "overStyled" | "disabled" | "component" | "leftSection" | "rightSection" | "data-disabled" | "closeMenuOnClick"> & {
+}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap" | "top" | "left" | "bottom" | "right" | "variant" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "overStyled" | "disabled" | "data-disabled" | "component" | "leftSection" | "rightSection" | "closeMenuOnClick"> & {
 ref?: any;
 renderRoot?: (props: any) => any;
 }) | (MenuSubItemProps & {
@@ -1544,6 +1544,8 @@ export declare const RECURSICA_COMPONENTS: readonly ["Accordion", "AssistiveElem
  * Props for the Recursica Accordion Control component.
  */
 export declare interface RecursicaAccordionControlProps {
+    /** The control's label content */
+    children?: default_2.ReactNode;
     /** Leading icon displayed inside the control boundary */
     leftIcon?: default_2.ReactNode;
 }
@@ -1552,7 +1554,14 @@ export declare interface RecursicaAccordionControlProps {
  * Props for the Recursica Accordion Item component.
  */
 export declare interface RecursicaAccordionItemProps {
-    /** The text or element label for the item control */
+    /**
+     * When `title` is set, this is the panel content — the control and panel are constructed
+     * automatically, with `children` becoming the panel body. When `title` is omitted, this is
+     * expected to be a manually composed `Accordion.Control`/`Accordion.Panel` pair instead.
+     */
+    children?: default_2.ReactNode;
+    /** The text or element label for the item control. When set, the control and panel are
+     * constructed automatically; omit it to compose the control and panel manually instead. */
     title?: default_2.ReactNode;
     /** Leading icon for the item control */
     leftIcon?: default_2.ReactNode;
@@ -1560,14 +1569,30 @@ export declare interface RecursicaAccordionItemProps {
     divider?: boolean;
     /** Unique value identifier for this item */
     value?: string;
+    /** Disables interaction with this item — it can't be expanded or collapsed, and is dimmed */
+    disabled?: boolean;
+}
+
+/**
+ * Props for the Recursica Accordion Panel component.
+ */
+export declare interface RecursicaAccordionPanelProps {
+    /** The panel's content, shown when the item is expanded */
+    children?: default_2.ReactNode;
 }
 
 /**
  * Props for the Recursica Accordion container component.
  */
 export declare interface RecursicaAccordionProps {
-    /** The styling variant of the accordion */
-    variant?: string;
+    /** The `Accordion.Item` elements that make up the accordion */
+    children?: default_2.ReactNode;
+    /**
+     * The styling variant of the accordion. `"default"` is the only variant with dedicated
+     * Recursica styling today; any other string is accepted for advanced/custom theming but
+     * has no guaranteed styling.
+     */
+    variant?: "default" | (string & {});
     /** Current expanded value(s) in controlled mode */
     value?: string | string[];
     /** Initial expanded value(s) in uncontrolled mode */
@@ -1576,7 +1601,8 @@ export declare interface RecursicaAccordionProps {
     onChange?: (value: string | string[] | null) => void;
     /** Allow multiple panels to be open simultaneously */
     multiple?: boolean;
-    /** Custom chevron icon to replace the default expand/collapse indicator */
+    /** Custom chevron icon to replace the default expand/collapse indicator. Applies to every
+     * item; a single item's control can still override it individually. */
     chevron?: default_2.ReactNode;
 }
 
@@ -1584,9 +1610,14 @@ export declare interface RecursicaAccordionProps {
  * Props for the Recursica AssistiveElement component.
  */
 export declare interface RecursicaAssistiveElementProps {
-    /** The semantic variant driving the icon and text colors */
+    /** The helper or error text content */
+    children?: default_2.ReactNode;
+    /** The semantic variant driving the icon and text colors. `"error"` also defaults the
+     * element's `role` to `"alert"` so assistive tech announces it as it appears or changes —
+     * pass an explicit `role` to override. */
     assistiveVariant?: "help" | "error";
-    /** Explicitly toggle the rendering of the variant-specific SVG icon */
+    /** Explicitly toggle the rendering of the variant-specific SVG icon. There is no slot for a
+     * custom icon — the icon is always the fixed one belonging to the current `assistiveVariant`. */
     assistiveWithIcon?: boolean;
 }
 
@@ -1623,6 +1654,8 @@ export declare interface RecursicaAutocompleteProps {
  * Props for the Recursica Avatar component.
  */
 export declare interface RecursicaAvatarProps {
+    /** Initials or other text fallback, shown when neither `src` nor `icon` is set */
+    children?: default_2.ReactNode;
     /** Size of the avatar */
     size?: "small" | "default" | "large";
     /** Visual variant style */
@@ -2073,8 +2106,13 @@ declare interface RecursicaRadioGroupProps_2 {
     value?: unknown;
     /** Initial selected value in uncontrolled mode */
     defaultValue?: unknown;
-    /** Callback triggered when active value changes */
-    onChange?: (event: any, value: string) => void;
+    /**
+     * Callback triggered when active value changes.
+     * Single-argument by design (no event): matches Mantine's native RadioGroup
+     * onChange, the cross-adapter source of truth. mui-adapter's RadioGroup
+     * normalizes MUI's native two-argument (event, value) callback down to this.
+     */
+    onChange?: (value: string) => void;
 }
 
 /**
@@ -2206,12 +2244,12 @@ export declare interface RecursicaSwitchGroupProps extends Omit<SwitchGroupProps
  * Props for the Recursica SwitchGroup component.
  */
 declare interface RecursicaSwitchGroupProps_2 {
-    /** Checked values list in controlled mode */
-    value?: unknown[];
+    /** Checked values list in controlled mode — each entry matches a child Switch's own `value` */
+    value?: string[];
     /** Checked default values list in uncontrolled mode */
-    defaultValue?: unknown[];
+    defaultValue?: string[];
     /** Callback triggered when any switch toggles state */
-    onChange?: (value: unknown[]) => void;
+    onChange?: (value: string[]) => void;
 }
 
 /**