Align props with figma

app/components/MenuBarItem/MenuBarItem.container.tsx

@@ -3,19 +3,24 @@
 import { memo } from "react";
 import MenuBarItemView from "./MenuBarItem.view";
 import type { MenuBarItemProps } from "./MenuBarItem.types";
+import { normalizeMenuBarItemVariant } from "../../../lib/propNormalization";
 
 const MenuBarItemContainer = memo<MenuBarItemProps>(
   ({
     href = "#",
     children,
-    variant = "default",
-    size = "default",
+    variant: variantProp = "default",
+    size: sizeProp = "default",
     className = "",
     disabled = false,
     isActive = false,
     ariaLabel,
     ...props
   }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const variant = normalizeMenuBarItemVariant(variantProp);
+    // Size has many values, normalize by lowercasing
+    const size = (sizeProp?.toLowerCase() || "default") as typeof sizeProp;
     const variantStyles: Record<string, string> = {
       default:
         "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",

app/components/MenuBarItem/MenuBarItem.types.ts

@@ -1,18 +1,40 @@
+export type MenuBarItemSizeValue =
+  | "default"
+  | "xsmall"
+  | "xsmallUseCases"
+  | "home"
+  | "homeMd"
+  | "homeUseCases"
+  | "large"
+  | "largeUseCases"
+  | "homeXlarge"
+  | "xlarge"
+  | "Default"
+  | "XSmall"
+  | "XSmallUseCases"
+  | "Home"
+  | "HomeMd"
+  | "HomeUseCases"
+  | "Large"
+  | "LargeUseCases"
+  | "HomeXlarge"
+  | "XLarge";
+
+export type MenuBarItemVariantValue = "default" | "home" | "Default" | "Home";
+
 export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   children?: React.ReactNode;
-  variant?: "default" | "home";
-  size?:
-    | "default"
-    | "xsmall"
-    | "xsmallUseCases"
-    | "home"
-    | "homeMd"
-    | "homeUseCases"
-    | "large"
-    | "largeUseCases"
-    | "homeXlarge"
-    | "xlarge";
+  /**
+   * Menu bar item variant. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  variant?: MenuBarItemVariantValue;
+  /**
+   * Menu bar item size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: MenuBarItemSizeValue;
   className?: string;
   disabled?: boolean;
   isActive?: boolean;