@carrier-dpx/air-react-library 0.7.13 → 0.7.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/AppBar/AppBar.figma.tsx

@@ -6,7 +6,7 @@
 
 import figma from "@figma/code-connect";
 import AppBar from "./AppBar";
-import { Toolbar } from "@mui/material";
+import Toolbar from "../Toolbar";
 import IconButton from "@mui/material/IconButton";
 import Typography from "../Typography";
 import Button from "../Button";
@@ -52,32 +52,21 @@ figma.connect(
        * Maps Figma's "elevation" boolean property to React's "elevation" prop
        */
       elevation: figma.boolean("elevation"),
-
-      /**
-       * POSITION
-       * AppBar position prop (optional)
-       */
-      position: figma.enum("position", {
-        static: "static",
-        fixed: "fixed",
-        absolute: "absolute",
-        sticky: "sticky",
-        relative: "relative",
-      }),
     },
 
     /**
      * CODE EXAMPLE TEMPLATE
      * 
      * Shows how AppBar should be used with Toolbar and content
+     * Note: position is set to "static" by default (not mapped from Figma)
      */
-    example: ({ size, color, divider, elevation, position }) => (
+    example: ({ size, color, divider, elevation }) => (
       <AppBar 
         size={size} 
         color={color} 
         divider={divider} 
         elevation={elevation}
-        position={position}
+        position="static"
       >
         <Toolbar>
           <IconButton

package/src/components/AppBar/AppBar.tsx

@@ -50,6 +50,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       }
     };
 
+    const appBarHeight = getHeight();
+
     return (
       <MuiAppBar
         {...rest}
@@ -58,7 +60,10 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
         sx={(theme) =>
           ({
             ...getSxStyles(theme, sx),
-            height: getHeight(),
+            height: appBarHeight,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
             ...(divider && {
               borderBottom: `1px solid ${theme.palette.divider}`,
             }),
@@ -82,6 +87,13 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
               backgroundColor: theme.palette.base?.dark,
               color: theme.palette.base?.contrastText,
             }),
+            // Ensure Toolbar inside matches AppBar height and centers content
+            "& .MuiToolbar-root": {
+              minHeight: appBarHeight,
+              height: appBarHeight,
+              display: "flex",
+              alignItems: "center",
+            },
           } as CSSObject)
         }
         ref={ref}

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+
+import MuiToolbar, {
+  ToolbarProps as MuiToolbarProps,
+} from "@mui/material/Toolbar";
+
+export interface ToolbarProps extends MuiToolbarProps {}
+
+/** Toolbar
+ *
+ * `import Toolbar from '@carrier-dpx/air-react-library/Toolbar'`
+ * `import { Toolbar } from '@carrier-dpx/air-react-library'`
+ */
+
+const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>((props, ref) => {
+  return <MuiToolbar {...props} ref={ref} />;
+});
+
+Toolbar.displayName = "Toolbar";
+
+export default Toolbar;

package/src/components/Toolbar/index.ts

@@ -0,0 +1,4 @@
+export { default } from "./Toolbar";
+export { default as Toolbar } from "./Toolbar";
+export * from "./Toolbar";
+export type { ToolbarProps } from "./Toolbar";

package/src/index.ts

@@ -24,6 +24,8 @@ export type { BottomNavigationProps } from "./components/BottomNavigation";
 export type { BottomNavigationActionProps } from "./components/BottomNavigation/BottomNavigationAction";
 export { default as AppBar } from "./components/AppBar";
 export type { AppBarProps } from "./components/AppBar";
+export { default as Toolbar } from "./components/Toolbar";
+export type { ToolbarProps } from "./components/Toolbar";
 export * from "./components/theme";
 
 // Demo Icons - exported from main index to avoid deep-path imports