Align props with figma

app/components/NavigationItem/NavigationItem.container.tsx

@@ -3,18 +3,22 @@
 import { memo } from "react";
 import NavigationItemView from "./NavigationItem.view";
 import type { NavigationItemProps } from "./NavigationItem.types";
+import { normalizeNavigationItemVariant, normalizeNavigationItemSize } from "../../../lib/propNormalization";
 
 const NavigationItemContainer = memo<NavigationItemProps>(
   ({
     href = "#",
     children,
-    variant = "default",
-    size = "default",
+    variant: variantProp = "default",
+    size: sizeProp = "default",
     className = "",
     disabled = false,
     isActive = false,
     ...props
   }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const variant = normalizeNavigationItemVariant(variantProp);
+    const size = normalizeNavigationItemSize(sizeProp);
     // Variant styles
     const variantStyles: Record<string, string> = {
       default:

app/components/NavigationItem/NavigationItem.types.ts

@@ -1,11 +1,22 @@
+export type NavigationItemVariantValue = "default" | "Default";
+export type NavigationItemSizeValue = "default" | "xsmall" | "Default" | "XSmall";
+
 export interface NavigationItemProps extends Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   "isActive"
 > {
   href?: string;
   children?: React.ReactNode;
-  variant?: "default";
-  size?: "default" | "xsmall";
+  /**
+   * Navigation item variant. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  variant?: NavigationItemVariantValue;
+  /**
+   * Navigation item size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: NavigationItemSizeValue;
   className?: string;
   disabled?: boolean;
   isActive?: boolean;