@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -6,28 +6,11 @@ const meta: Meta<typeof TimePicker> = {
   title: "UI-Kit/🚧 TimePicker",
   component: TimePicker,
   tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
-  },
+  argTypes: {},
 };
 
 export default meta;
+
 type Story = StoryObj<typeof TimePicker>;
 
 export const Default: Story = {

package/src/components/TimePicker/TimePicker.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import "./TimePicker.module.css";
+import { type RecursicaTimePickerProps } from "@recursica/adapter-common";
 
-export type TimePickerProps = React.HTMLAttributes<HTMLDivElement>;
+export type TimePickerProps = React.HTMLAttributes<HTMLDivElement> &
+  RecursicaTimePickerProps;
 
 export const TimePicker: React.FC<TimePickerProps> = (props) => {
   return <div {...props}>TimePicker</div>;

package/src/components/Timeline/Timeline.tsx

@@ -9,13 +9,16 @@ import {
 import styles from "./Timeline.module.css";
 import { TimelineItem } from "./TimelineItem";
 
+import { type RecursicaTimelineProps } from "@recursica/adapter-common";
+
 /**
  * Properties for the strictly-tokenized Timeline component.
  * Native Mui abstract properties like `color`, `radius`, `bulletSize`, and `lineWidth`
  * have been stripped out to strictly enforce the structural mappings of the Recursica UI Kit.
  */
 export type TimelineProps = RecursicaOverStyled<
-  Omit<MuiTimelineProps, "color" | "radius" | "bulletSize" | "lineWidth">
+  Omit<MuiTimelineProps, "color" | "radius" | "bulletSize" | "lineWidth"> &
+    RecursicaTimelineProps
 >;
 
 interface TimelineComponent

package/src/components/Timeline/TimelineItem.tsx

@@ -8,18 +8,7 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Timeline.module.css";
 
-export interface RecursicaTimelineItemProps {
-  /**
-   * Timestamp text displayed below the description.
-   */
-  timestamp?: React.ReactNode;
-  /**
-   * The structural styling variant of the bullet container.
-   * Maps to the UI Kit structural tokens.
-   * @default "default"
-   */
-  bulletVariant?: "default" | "avatar" | "icon" | "icon-alternative";
-}
+import { type RecursicaTimelineItemProps } from "@recursica/adapter-common";
 
 export type TimelineItemProps = RecursicaOverStyled<
   Omit<MuiTimelineItemProps, "radius" | "color" | "lineVariant"> &

package/src/components/Title/Title.stories.tsx

@@ -13,24 +13,6 @@ const meta: Meta<typeof Title> = {
           "The semantic `<Title>` abstraction intrinsically links pure `h1-h6` tag generation with exact Recursica design boundaries to preserve SEO and screen reader trees uniformly globally.",
       },
     },
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "order",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
   },
   argTypes: {
     order: {

package/src/components/Title/Title.tsx

@@ -1,13 +1,7 @@
 import React, { forwardRef } from "react";
 import { Typography } from "../Typography/Typography";
 import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
-import { type TypographyProps as MuiTypographyProps } from "@mui/material";
-
-export type RecursicaTitleProps = Omit<MuiTypographyProps, "variant"> & {
-  order?: 1 | 2 | 3 | 4 | 5 | 6;
-  children?: React.ReactNode;
-  component?: React.ElementType;
-};
+import { type RecursicaTitleProps } from "@recursica/adapter-common";
 
 export type TitleProps = RecursicaOverStyled<RecursicaTitleProps>;
 

package/src/components/Toast/Toast.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "The `Toast` component is a standalone visual component wrapping Mantine's `Notification`. Note that this component is visually decoupled from `@mantine/notifications` and is meant to be used when you need to render a static or manually-controlled notification panel. If you need dynamic notification popups, you should use `@mantine/notifications` and configure its provider to use our styles.",
+          "The `Toast` component is a standalone visual component wrapping Mui's `Alert`. Note that this component is visually decoupled from `@mui/material/Snackbar` and is meant to be used when you need to render a static or manually-controlled notification panel.",
       },
     },
   },

package/src/components/Toast/Toast.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import {
-  Snackbar as MuiNotification,
-  type SnackbarProps as MuiNotificationProps,
+  Alert as MuiAlert,
+  AlertTitle as MuiAlertTitle,
+  IconButton as MuiIconButton,
+  type AlertProps as MuiAlertProps,
 } from "@mui/material";
 import {
   filterStylingProps,
@@ -9,51 +11,63 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Toast.module.css";
 
-export interface RecursicaToastProps {
-  /**
-   * The visual variant of the toast.
-   * @default "default"
-   */
-  variant?: "default" | "error" | "success";
+import { type RecursicaToastProps as BaseRecursicaToastProps } from "@recursica/adapter-common";
 
-  /**
-   * Loading state is natively unsupported by Recursica UI Kit.
-   * If a loading state is required, pass a `<Loader size="sm" />` directly into the `icon` prop.
-   */
-  loading?: false;
+export interface RecursicaToastProps extends BaseRecursicaToastProps {
+  withCloseButton?: boolean;
+  title?: React.ReactNode;
+  icon?: React.ReactNode;
+  onClose?: () => void;
 }
 
 /**
- * Toast component wrapping Mui's Notification.
+ * Toast component wrapping Mui's Alert.
  *
  * Can be used as a standalone visual component to display a notification or message.
  */
 export type ToastProps = RecursicaOverStyled<
-  Omit<MuiNotificationProps, "color" | "radius" | "variant" | "loading"> &
+  Omit<MuiAlertProps, "color" | "radius" | "variant" | "onClose"> &
     RecursicaToastProps
 >;
 
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
 export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
   function Toast(
     {
       overStyled = false,
       variant = "default",
       withCloseButton = true,
+      title,
+      icon,
+      children,
+      onClose,
+      className,
       ...rest
     },
     ref,
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
 
-    // Bind CSS module classes to Mui's internal classNames API
     const mergedClassNames: Partial<Record<string, string>> = {
       root: styles.root,
-      body: styles.body,
-      title: styles.title,
-      description: styles.description,
-      closeButton: styles.closeButton,
+      message: styles.body,
       icon: styles.icon,
-      loader: styles.loader,
+      action: styles.closeButton,
     };
 
     const classNamesProp = (sanitizedProps as Record<string, unknown>)
@@ -73,19 +87,39 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
       });
     }
 
+    const handleClose = () => {
+      if (onClose) onClose();
+    };
+
     return (
-      <MuiNotification
+      <MuiAlert
         ref={ref}
-        withCloseButton={withCloseButton}
-        withBorder={false} // Border is handled via CSS or tokens if needed
+        icon={icon}
         data-variant={variant}
+        className={`${className || ""}`}
         classes={mergedClassNames}
-        loading={false}
+        action={
+          withCloseButton ? (
+            <MuiIconButton
+              size="small"
+              aria-label="close"
+              color="inherit"
+              onClick={handleClose}
+            >
+              <CloseIcon />
+            </MuiIconButton>
+          ) : undefined
+        }
         {...(sanitizedProps as unknown as Omit<
-          MuiNotificationProps,
-          "color" | "radius" | "variant" | "loading"
+          MuiAlertProps,
+          "color" | "radius" | "variant" | "onClose"
         >)}
-      />
+      >
+        {title && (
+          <MuiAlertTitle className={styles.title}>{title}</MuiAlertTitle>
+        )}
+        <div className={styles.description}>{children}</div>
+      </MuiAlert>
     );
   },
 );

package/src/components/Tooltip/Tooltip.tsx

@@ -15,15 +15,7 @@ import styles from "./Tooltip.module.css";
 /**
  * Recursica-specific props for Tooltip.
  */
-export interface RecursicaTooltipProps {
-  /**
-   * Whether to display a beak (arrow) pointing from the tooltip to the target.
-   * This is the Recursica equivalent of Mui's `withArrow`.
-   * When both `withBeak` and `withArrow` are provided, `withBeak` takes precedence.
-   * @default true
-   */
-  withBeak?: boolean;
-}
+import { type RecursicaTooltipProps } from "@recursica/adapter-common";
 
 /**
  * Recursica Tooltip component wrapping Mui's Tooltip.
@@ -49,9 +41,12 @@ export type TooltipProps = RecursicaOverStyled<
 const TooltipBase = function Tooltip({
   overStyled = false,
   withBeak = true,
+  label,
+  opened,
   ...rest
-}: TooltipProps) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
+}: TooltipProps & { label?: React.ReactNode; opened?: boolean }) {
+  const { title, ...restProps } = rest;
+  const sanitizedProps = filterStylingProps(restProps, overStyled);
 
   // Bind CSS module classes to Mui's internal classNames API
   const mergedClassNames: Partial<Record<string, string>> = {
@@ -75,16 +70,6 @@ const TooltipBase = function Tooltip({
     });
   }
 
-  // arrowSize must be a JS number prop — Mui uses it for inline width/height
-  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
-  // Default to 16 to match the Recursica beak-size token (16px).
-  const arrowSize =
-    ((sanitizedProps as Record<string, unknown>).arrowSize as
-      | number
-      | undefined) ?? 16;
-
-  // Resolve withBeak (Recursica) vs withArrow (Mui).
-  // withBeak takes precedence when both are provided.
   const withArrow = (sanitizedProps as Record<string, unknown>).withArrow as
     | boolean
     | undefined;
@@ -92,26 +77,15 @@ const TooltipBase = function Tooltip({
 
   return (
     <MuiTooltip
+      title={label || title || ""}
+      open={opened}
       placement="top" /* Recursica default; Mui defaults to "bottom" */
-      multiline /* Always allow text wrapping within max-width */
-      arrowSize={arrowSize}
-      withArrow={resolvedWithArrow}
+      arrow={resolvedWithArrow}
       classes={mergedClassNames}
-      {...(sanitizedProps as unknown as MuiTooltipProps)}
+      {...(sanitizedProps as unknown as Omit<MuiTooltipProps, "title">)}
     />
   );
 };
 TooltipBase.displayName = "Tooltip";
 
-// ============================================================
-// DOT NOTATION EXPORT
-// ============================================================
-
-type TooltipComponent = typeof TooltipBase & {
-  Floating: typeof MuiTooltip.Floating;
-  Group: typeof MuiTooltip.Group;
-};
-
-export const Tooltip = TooltipBase as TooltipComponent;
-Tooltip.Floating = MuiTooltip.Floating;
-Tooltip.Group = MuiTooltip.Group;
+export const Tooltip = TooltipBase;

package/src/components/TransferList/TransferList.stories.tsx

@@ -6,28 +6,10 @@ const meta: Meta<typeof TransferList> = {
   title: "UI-Kit/🚧 TransferList",
   component: TransferList,
   tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
-    },
-  },
 };
 
 export default meta;
+
 type Story = StoryObj<typeof TransferList>;
 
 export const Default: Story = {

package/src/components/TransferList/TransferList.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import "./TransferList.module.css";
+import { type RecursicaTransferListProps } from "@recursica/adapter-common";
 
-export type TransferListProps = React.HTMLAttributes<HTMLDivElement>;
+export type TransferListProps = React.HTMLAttributes<HTMLDivElement> &
+  RecursicaTransferListProps;
 
 export const TransferList: React.FC<TransferListProps> = (props) => {
   return <div {...props}>TransferList</div>;

package/src/utils/RequireAccessibleLabel.ts

@@ -1,12 +1 @@
-import { ReactNode } from "react";
-
-/**
- * Enforces accessibility by strictly requiring at least one form of labeling:
- * either a visual \`label\`, an \`aria-label\`, or an \`aria-labelledby\`.
- */
-export type RequireAccessibleLabel<T> = T &
-  (
-    | { label: ReactNode; "aria-label"?: string; "aria-labelledby"?: string }
-    | { label?: ReactNode; "aria-label": string; "aria-labelledby"?: string }
-    | { label?: ReactNode; "aria-label"?: string; "aria-labelledby": string }
-  );
+export { type RequireAccessibleLabel } from "@recursica/adapter-common";

package/src/utils/filterStylingProps.ts

@@ -51,19 +51,13 @@ export const BLOCKED_STYLING_KEYS = [
   "position",
   "zIndex",
 ] as const;
-
-export type BlockedStylingKeys = (typeof BLOCKED_STYLING_KEYS)[number];
-
-export type RecursicaSpacing =
-  | "rec-none"
-  | "rec-sm"
-  | "rec-default"
-  | "rec-md"
-  | "rec-lg"
-  | "rec-xl"
-  | "rec-2xl";
-
-export type RecursicaSize = "small" | "default" | "large";
+export {
+  type RecursicaSpacing,
+  type RecursicaSize,
+  type RecursicaOverStyled,
+  type BlockedStylingKeys,
+  type ForbiddenStyles,
+} from "@recursica/adapter-common";
 
 const LAYOUT_PROPS = new Set([
   "m",
@@ -99,8 +93,6 @@ export const SPACING_MAP: Record<string, string> = {
   "rec-2xl": "var(--recursica_brand_dimensions_general_2xl)",
 };
 
-export type ForbiddenStyles = { [K in BlockedStylingKeys]?: never };
-
 export type OmitSx<T> = Omit<T, "sx">;
 
 export function filterSxProp<T extends Record<string, unknown>>(
@@ -113,11 +105,6 @@ export function filterSxProp<T extends Record<string, unknown>>(
   return sanitized as Omit<T, "sx">;
 }
 
-export type RecursicaOverStyled<T> =
-  | (Omit<T, BlockedStylingKeys> &
-      ForbiddenStyles & { overStyled?: false | undefined })
-  | (T & { overStyled: true });
-
 export function filterStylingProps<T extends Record<string, unknown>>(
   props: T,
   overStyled?: boolean,