@carrier-dpx/air-react-library 0.6.0 → 0.7.0

package/src/components/Icon/icons/demo/iconRegistry.ts

@@ -0,0 +1,97 @@
+/**
+ * Icon Registry
+ * 
+ * Maps icon names to their SVG content.
+ * This allows us to render icons without creating individual React components.
+ * 
+ * For 700 icons, you would generate this file programmatically from your SVG folder.
+ */
+
+import { FC } from "react";
+
+// Import SVG content as strings or React components
+// Note: Your build system needs to support SVG imports
+// If not, you can inline the SVG content here or use a loader
+
+// For now, we'll create simple components inline
+// In production, you'd generate these from SVG files
+
+const DeviceManagerSvg: FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M2.49805 18.041C3.75805 18.2505 4.74948 19.2419 4.95898 20.502C5.00427 20.7744 4.77614 21 4.5 21H3C2.44772 21 2 20.5523 2 20V18.5C2 18.2239 2.22564 17.9957 2.49805 18.041Z" fill="currentColor"/>
+    <path d="M2.5 14.0176C5.97085 14.2618 8.73818 17.0292 8.98242 20.5C9.00176 20.7754 8.77612 21 8.5 21H7.5C7.22396 21 7.003 20.7756 6.97559 20.501C6.7411 18.1393 4.86065 16.2589 2.49902 16.0244C2.22437 15.997 2 15.776 2 15.5V14.5C2 14.2239 2.22457 13.9982 2.5 14.0176Z" fill="currentColor"/>
+    <path d="M2.5 10.0107C8.17278 10.2648 12.7351 14.8187 12.9893 20.5C13.0015 20.7758 12.7761 21 12.5 21H11.5C11.2239 21 11.0014 20.7757 10.9863 20.5C10.7359 15.928 7.07198 12.2641 2.5 12.0137C2.22427 11.9986 2 11.7761 2 11.5V10.5C2 10.2239 2.22424 9.99852 2.5 10.0107Z" fill="currentColor"/>
+    <path d="M9.09863 3.00488C9.32763 3.02757 9.54289 3.12883 9.70703 3.29297L11.4141 5H19C20.6569 5 22 6.34315 22 8V19.5C22 20.3284 21.3284 21 20.5 21H16C15.4477 21 15 20.5523 15 20C15 19.4477 15.4477 19 16 19H20V8C20 7.44772 19.5523 7 19 7H11C10.7348 7 10.4805 6.89457 10.293 6.70703L8.58594 5H4V7C4 7.55228 3.55228 8 3 8C2.44772 8 2 7.55228 2 7V4.5C2 3.67157 2.67157 3 3.5 3H9L9.09863 3.00488Z" fill="currentColor"/>
+  </svg>
+);
+
+const HomeSvg: FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M11.4775 2.33597C11.7769 2.25498 12.0907 2.24493 12.3936 2.3057L12.5225 2.33597L12.6826 2.38871C13.0467 2.52881 13.3532 2.7853 13.5967 2.97464L20.3789 8.25003C20.7873 8.56768 21.1481 8.83746 21.4121 9.19437C21.6289 9.48753 21.7903 9.81791 21.8887 10.169C21.9784 10.4897 21.9967 10.8234 22 11.1885V17.7998C22 18.3431 22.001 18.8108 21.9697 19.1944C21.9374 19.5896 21.8655 19.9831 21.6729 20.3614C21.3853 20.9257 20.9266 21.3853 20.3623 21.6729C19.9841 21.8656 19.5905 21.9365 19.1953 21.9688C18.8117 22.0001 18.3432 22 17.7998 22H6.2002C5.65675 22 5.18831 22.0001 4.80469 21.9688C4.40952 21.9365 4.01591 21.8656 3.6377 21.6729C3.07338 21.3853 2.61471 20.9257 2.32715 20.3614C2.1345 19.9831 2.06257 19.5896 2.03027 19.1944C2.01464 19.0028 2.00763 18.7901 2.00391 18.5577L2 17.7998V11.1885C2.00325 10.8234 2.02155 10.4897 2.11133 10.169C2.20966 9.81791 2.37114 9.48752 2.58789 9.19437C2.8519 8.83747 3.21269 8.56768 3.62109 8.25003L10.4033 2.97464C10.6816 2.75819 11.0423 2.45384 11.4775 2.33597ZM11.9932 4.28128C11.9181 4.33146 11.8184 4.40766 11.6318 4.55277L4.84961 9.82816C4.35264 10.2147 4.25877 10.2985 4.19629 10.3828C4.12408 10.4805 4.0699 10.5911 4.03711 10.708C4.0088 10.8092 4 10.934 4 11.5645V17.7998L4.00293 18.5254C4.00602 18.7261 4.01284 18.8905 4.02441 19.0323C4.0466 19.3034 4.0842 19.4047 4.10938 19.4541C4.20522 19.642 4.35802 19.7949 4.5459 19.8907C4.59536 19.9158 4.69642 19.9534 4.96777 19.9756C5.25108 19.9988 5.62379 20 6.2002 20H8V14.5996C8 14.3362 7.99889 14.0782 8.0166 13.8614C8.03529 13.6329 8.0796 13.3631 8.21777 13.0918C8.40947 12.7157 8.71564 12.4095 9.0918 12.2178C9.36296 12.0797 9.63289 12.0353 9.86133 12.0166C10.0781 11.9989 10.3363 12 10.5996 12H13.4004C13.6637 12 13.9219 11.9989 14.1387 12.0166C14.3671 12.0353 14.637 12.0797 14.9082 12.2178C15.2374 12.3856 15.513 12.6409 15.7051 12.9541L15.7822 13.0918L15.8691 13.294C15.9408 13.4951 15.9694 13.6899 15.9834 13.8614C16.0011 14.0782 16 14.3362 16 14.5996V20H17.7998C18.3762 20 18.7489 19.9988 19.0322 19.9756C19.3036 19.9534 19.4046 19.9158 19.4541 19.8907C19.642 19.7949 19.7948 19.642 19.8906 19.4541C19.9158 19.4047 19.9534 19.3034 19.9756 19.0323C19.9987 18.749 20 18.3762 20 17.7998V11.5645C20 10.934 19.9912 10.8092 19.9629 10.708C19.9301 10.5911 19.8759 10.4805 19.8037 10.3828C19.7412 10.2985 19.6474 10.2147 19.1504 9.82816L12.3682 4.55277C12.1816 4.40765 12.0819 4.33146 12.0068 4.28128C12.0045 4.27969 12.0022 4.27783 12 4.2764C11.9978 4.27783 11.9955 4.2797 11.9932 4.28128ZM10.5996 14C10.3035 14 10.1409 14.0003 10.0244 14.0098C10.0201 14.0102 10.0156 14.0104 10.0117 14.0108C10.0113 14.015 10.0111 14.0197 10.0107 14.0244C10.0012 14.141 10 14.3033 10 14.5996V20H14V14.5996C14 14.3033 13.9988 14.141 13.9893 14.0244C13.9889 14.0197 13.9877 14.015 13.9873 14.0108C13.9837 14.0104 13.9796 14.0101 13.9756 14.0098C13.8591 14.0003 13.6965 14 13.4004 14H10.5996Z" fill="currentColor"/>
+  </svg>
+);
+
+const SiteSvg: FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M15.7559 3.97363C16.3079 3.97385 16.7558 4.42155 16.7559 4.97363V6.60352H21.0391C21.5911 6.60367 22.0389 7.05143 22.0391 7.60352V15.3965H22.3721C22.9242 15.3966 23.372 15.8444 23.3721 16.3965C23.3719 16.9485 22.9241 17.3964 22.3721 17.3965H16.7559V19.0264H17.3379C17.89 19.0265 18.3378 19.4742 18.3379 20.0264C18.3377 20.5784 17.89 21.0262 17.3379 21.0264H6.66211C6.11002 21.0263 5.66227 20.5784 5.66211 20.0264C5.66219 19.4742 6.10996 19.0265 6.66211 19.0264H7.24512V17.3965H1.62793C1.07577 17.3965 0.628127 16.9486 0.62793 16.3965C0.628012 15.8443 1.0757 15.3965 1.62793 15.3965H1.96191V7.60352C1.96203 7.05133 2.4097 6.60352 2.96191 6.60352H7.24512V4.97363C7.2452 4.42142 7.69288 3.97363 8.24512 3.97363H15.7559ZM9.24512 19.0225H14.7559V5.97363H9.24512V19.0225ZM3.96191 15.3877H7.16211V8.60352H3.96191V15.3877ZM16.8379 15.3877H20.0391V8.60352H16.8379V15.3877Z" fill="currentColor"/>
+  </svg>
+);
+
+const WarningSvg: FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12 16C12.2833 16 12.5212 16.0954 12.7129 16.2871C12.9046 16.4788 13 16.7167 13 17C13 17.2833 12.9046 17.5212 12.7129 17.7129C12.5212 17.9046 12.2833 18 12 18C11.7167 18 11.4788 17.9045 11.2871 17.7129C11.0955 17.5212 11 17.2833 11 17C11 16.7167 11.0955 16.4788 11.2871 16.2871C11.4788 16.0955 11.7167 16 12 16Z" fill="currentColor"/>
+    <path d="M12 10C12.2833 10 12.5212 10.0954 12.7129 10.2871C12.9046 10.4788 13 10.7167 13 11V14C13 14.2833 12.9046 14.5212 12.7129 14.7129C12.5212 14.9046 12.2833 15 12 15C11.7167 15 11.4788 14.9045 11.2871 14.7129C11.0955 14.5212 11 14.2833 11 14V11C11 10.7167 11.0955 10.4788 11.2871 10.2871C11.4788 10.0955 11.7167 10 12 10Z" fill="currentColor"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M12 3C12.1666 3 12.329 3.04172 12.4873 3.125C12.6456 3.20833 12.775 3.33334 12.875 3.5L22.125 19.5C22.225 19.6667 22.271 19.8377 22.2627 20.0127C22.2544 20.1876 22.2083 20.3501 22.125 20.5C22.0417 20.6499 21.9252 20.7707 21.7754 20.8623C21.6255 20.9539 21.4586 20.9999 21.2754 21H2.72462C2.54144 20.9999 2.37452 20.9539 2.22462 20.8623C2.0748 20.7707 1.95828 20.6499 1.87501 20.5C1.79171 20.3501 1.74567 20.1876 1.73732 20.0127C1.72898 19.8377 1.77501 19.6667 1.87501 19.5L11.125 3.5C11.225 3.33334 11.3544 3.20833 11.5127 3.125C11.671 3.04173 11.8334 3 12 3ZM4.45021 19H19.5498L12 6L4.45021 19Z" fill="currentColor"/>
+  </svg>
+);
+
+// AlertIcon uses the same SVG as WarningIcon
+const AlertSvg = WarningSvg;
+
+export interface IconInfo {
+  name: string;
+  component: FC<React.SVGProps<SVGSVGElement>>;
+  variant?: "outlined" | "filled";
+}
+
+export const iconRegistry: Record<string, IconInfo> = {
+  devicemanager: {
+    name: "devicemanager",
+    component: DeviceManagerSvg,
+    variant: "outlined",
+  },
+  home: {
+    name: "home",
+    component: HomeSvg,
+    variant: "outlined",
+  },
+  site: {
+    name: "site",
+    component: SiteSvg,
+    variant: "outlined",
+  },
+  warning: {
+    name: "warning",
+    component: WarningSvg,
+    variant: "outlined",
+  },
+  alert: {
+    name: "alert",
+    component: AlertSvg,
+    variant: "outlined",
+  },
+};
+
+/**
+ * Get an icon component by name
+ */
+export const getIcon = (name: string): IconInfo | undefined => {
+  return iconRegistry[name.toLowerCase()];
+};
+
+/**
+ * Get all available icon names
+ */
+export const getIconNames = (): string[] => {
+  return Object.keys(iconRegistry);
+};

package/src/components/Icon/icons/demo/index.ts

@@ -0,0 +1,23 @@
+// Generic SvgIcon component - use this for dynamic icon loading
+export { SvgIcon } from "./SvgIcon";
+export type { SvgIconProps } from "./SvgIcon";
+
+// Icon registry for programmatic access
+export { iconRegistry, getIcon, getIconNames } from "./iconRegistry";
+export type { IconInfo } from "./iconRegistry";
+
+// Individual icon components (for Figma Code Connect or direct usage)
+export { DeviceManagerIcon } from "./DeviceManagerIcon";
+export type { DeviceManagerIconProps } from "./DeviceManagerIcon";
+
+export { HomeIcon } from "./HomeIcon";
+export type { HomeIconProps } from "./HomeIcon";
+
+export { SiteIcon } from "./SiteIcon";
+export type { SiteIconProps } from "./SiteIcon";
+
+export { WarningIcon } from "./WarningIcon";
+export type { WarningIconProps } from "./WarningIcon";
+
+export { AlertIcon } from "./AlertIcon";
+export type { AlertIconProps } from "./AlertIcon";

package/src/components/Icon/icons/demo/site_outlined.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7559 3.97363C16.3079 3.97385 16.7558 4.42155 16.7559 4.97363V6.60352H21.0391C21.5911 6.60367 22.0389 7.05143 22.0391 7.60352V15.3965H22.3721C22.9242 15.3966 23.372 15.8444 23.3721 16.3965C23.3719 16.9485 22.9241 17.3964 22.3721 17.3965H16.7559V19.0264H17.3379C17.89 19.0265 18.3378 19.4742 18.3379 20.0264C18.3377 20.5784 17.89 21.0262 17.3379 21.0264H6.66211C6.11002 21.0263 5.66227 20.5784 5.66211 20.0264C5.66219 19.4742 6.10996 19.0265 6.66211 19.0264H7.24512V17.3965H1.62793C1.07577 17.3965 0.628127 16.9486 0.62793 16.3965C0.628012 15.8443 1.0757 15.3965 1.62793 15.3965H1.96191V7.60352C1.96203 7.05133 2.4097 6.60352 2.96191 6.60352H7.24512V4.97363C7.2452 4.42142 7.69288 3.97363 8.24512 3.97363H15.7559ZM9.24512 19.0225H14.7559V5.97363H9.24512V19.0225ZM3.96191 15.3877H7.16211V8.60352H3.96191V15.3877ZM16.8379 15.3877H20.0391V8.60352H16.8379V15.3877Z" fill="black"/>
+</svg>

package/src/components/Icon/icons/demo/warning_outlined.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16C12.2833 16 12.5212 16.0954 12.7129 16.2871C12.9046 16.4788 13 16.7167 13 17C13 17.2833 12.9046 17.5212 12.7129 17.7129C12.5212 17.9046 12.2833 18 12 18C11.7167 18 11.4788 17.9045 11.2871 17.7129C11.0955 17.5212 11 17.2833 11 17C11 16.7167 11.0955 16.4788 11.2871 16.2871C11.4788 16.0955 11.7167 16 12 16Z" fill="black"/>
+<path d="M12 10C12.2833 10 12.5212 10.0954 12.7129 10.2871C12.9046 10.4788 13 10.7167 13 11V14C13 14.2833 12.9046 14.5212 12.7129 14.7129C12.5212 14.9046 12.2833 15 12 15C11.7167 15 11.4788 14.9045 11.2871 14.7129C11.0955 14.5212 11 14.2833 11 14V11C11 10.7167 11.0955 10.4788 11.2871 10.2871C11.4788 10.0955 11.7167 10 12 10Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C12.1666 3 12.329 3.04172 12.4873 3.125C12.6456 3.20833 12.775 3.33334 12.875 3.5L22.125 19.5C22.225 19.6667 22.271 19.8377 22.2627 20.0127C22.2544 20.1876 22.2083 20.3501 22.125 20.5C22.0417 20.6499 21.9252 20.7707 21.7754 20.8623C21.6255 20.9539 21.4586 20.9999 21.2754 21H2.72462C2.54144 20.9999 2.37452 20.9539 2.22462 20.8623C2.0748 20.7707 1.95828 20.6499 1.87501 20.5C1.79171 20.3501 1.74567 20.1876 1.73732 20.0127C1.72898 19.8377 1.77501 19.6667 1.87501 19.5L11.125 3.5C11.225 3.33334 11.3544 3.20833 11.5127 3.125C11.671 3.04173 11.8334 3 12 3ZM4.45021 19H19.5498L12 6L4.45021 19Z" fill="black"/>
+</svg>

package/src/components/Navbar/ExtraNavigation/ExtraNavigation.tsx

@@ -0,0 +1,86 @@
+import { FC } from "react";
+import { styled } from "@mui/material/styles";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import { useNavbarContext } from "../hooks/useNavbarContext";
+import btnStyles from "../NavbarButtons/styles";
+import extraNavigationStyles from "./styles";
+import { ExtraNavigationProps } from "./types";
+import Button from "../../Button";
+import Box from "../../Box";
+import { NavigationButton } from "../NavbarButtons";
+import { NavbarButtonClasses } from "../NavbarButtons/types";
+import Divider from "../../Divider";
+import { NavigationItemType } from "../Navigation";
+
+/**
+ * The ExtraNavigation component allows adding extra navigation buttons.
+ *
+ * //Named Import
+ * `import { ExtraNavigation } from '@carrier-io/air-react'`
+ */
+
+const ButtonStyled = styled(Button)(btnStyles[NavbarButtonClasses.NavbarBtn]);
+const ContainerStyled = styled(Box)(extraNavigationStyles.container);
+
+export const ExtraNavigation: FC<ExtraNavigationProps> = ({
+  items,
+  disableTooltip = false,
+  expanded = false,
+  onClickExpanded,
+  disableRipple = false,
+  disableTouchRipple = false,
+  ...rest
+}) => {
+  const { openedDrawer } = useNavbarContext();
+
+  return (
+    <ContainerStyled {...rest}>
+      {items?.length > 0 && (
+        <>
+          <ButtonStyled
+            variant="text"
+            onClick={() => onClickExpanded?.()}
+            disableRipple={disableRipple}
+            disableTouchRipple={disableTouchRipple}
+          >
+            {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            &nbsp; External Apps
+          </ButtonStyled>
+          {expanded &&
+            items?.map((item, idx) => {
+              if (item.type === "DIVIDER") {
+                return (
+                  <Divider
+                    key={`divider_${idx.toString()}`}
+                    sx={{ margin: "9px 0" }}
+                  >
+                    {item.children}
+                  </Divider>
+                );
+              }
+
+              const { id, icon, label } = item as NavigationItemType;
+
+              return (
+                <NavigationButton
+                  key={id}
+                  data={{
+                    id,
+                    label,
+                  }}
+                  onClick={() => item.onClick?.()}
+                  disableTooltip={disableTooltip}
+                  disableRipple={disableRipple}
+                  disableTouchRipple={disableTouchRipple}
+                  withOffset={openedDrawer}
+                >
+                  {icon}
+                </NavigationButton>
+              );
+            })}
+        </>
+      )}
+    </ContainerStyled>
+  );
+};

package/src/components/Navbar/ExtraNavigation/index.ts

@@ -0,0 +1,2 @@
+export * from "./ExtraNavigation";
+export * from "./types";

package/src/components/Navbar/ExtraNavigation/styles.tsx

@@ -0,0 +1,10 @@
+import { CSSObject } from "@mui/material";
+
+export default {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+  },
+} as {
+  [key in "container"]: CSSObject;
+};

package/src/components/Navbar/ExtraNavigation/types.ts

@@ -0,0 +1,43 @@
+import { NavigationDividerType, NavigationItemType } from "../Navigation";
+import { BoxProps } from "../../Box";
+
+export interface ExtraNavigationProps
+  extends Pick<BoxProps, "children" | "sx"> {
+  /**
+   * Extra navigation elements.
+   */
+  items: ExtraNavigationItem[];
+  /**
+   * Show all items.
+   * @default false
+   */
+  expanded?: boolean;
+  /**
+   * Callback fired when expand button is clicked.
+   */
+  onClickExpanded?: () => void;
+  /**
+   * Allow show tooltip.
+   * @default false
+   */
+  disableTooltip?: boolean;
+  /**
+   * Allow ripple effect.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * Allow ripple touch effect.
+   * @default false
+   */
+  disableTouchRipple?: boolean;
+}
+
+export interface ExtraNavigationItemType
+  extends Omit<NavigationItemType, "path"> {
+  onClick?: () => void;
+}
+
+export type ExtraNavigationItem =
+  | ExtraNavigationItemType
+  | NavigationDividerType;

package/src/components/Navbar/Navbar.figma.tsx

@@ -0,0 +1,118 @@
+/**
+ * Figma Code Connect Configuration for Navbar Component
+ * 
+ * This connects Figma's Navbar component to the React Navbar component.
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37601-412630
+ * 
+ * Figma Properties:
+ * - expanded (true, false) - Controls drawer expanded state → disableHoverListener (inverted)
+ *   When expanded=false, drawer is locked (disableHoverListener=true)
+ *   When expanded=true, drawer can expand on hover (disableHoverListener=false)
+ * - activeButtonType (basic, indicator) - Active button style type → Navigation.activeButtonType
+ * - background (true, false) - Show/hide background layer → transparentBackground (inverted)
+ * - logo (true, false) - Show/hide logo layer → controls Navbar.Logo visibility
+ * - carrierLogo (true, false) - Show/hide carrierLogo layer → NavbarFooter.showCarrierLogo
+ * - helpButton (true, false) - Show/hide helpButton layer → controls help button visibility
+ * - border (true, false) - Show/hide border → border
+ * 
+ * Note: Navigation items are nested "Item" component instances that map to Navigation.items array
+ */
+
+import figma from "@figma/code-connect";
+import { Navbar } from "./Navbar";
+import { Navigation } from "./Navigation";
+import { NavbarFooter } from "./NavbarFooter";
+import { NavbarLogo } from "./NavbarLogo";
+
+figma.connect(
+  Navbar,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37601-412630",
+  {
+    props: {
+      /**
+       * EXPANDED STATE → DISABLE HOVER LISTENER
+       * Maps Figma's "expanded" property to React's disableHoverListener prop (inverted)
+       * Figma: expanded=false means drawer is collapsed/locked
+       * React: disableHoverListener=true means drawer cannot expand on hover
+       * So we invert: expanded=false → disableHoverListener=true
+       */
+      expanded: figma.boolean("expanded"),
+
+      /**
+       * BACKGROUND VISIBILITY
+       * Maps Figma's "background" boolean to React's transparentBackground prop
+       * Figma: background=true means background is visible (not transparent)
+       * React: transparentBackground=true means background is transparent
+       * So we invert: background=false → transparentBackground=true
+       */
+      background: figma.boolean("background"),
+
+      /**
+       * BORDER
+       * Maps Figma's "border" boolean to React's border prop
+       */
+      border: figma.boolean("border"),
+
+      /**
+       * ACTIVE BUTTON TYPE
+       * Maps Figma's "activeButtonType" property - passed to Navigation component
+       */
+      activeButtonType: figma.enum("activeButtonType", {
+        basic: "basic",
+        indicator: "indicator",
+      }),
+
+      /**
+       * LOGO VISIBILITY
+       * Maps Figma's "logo" boolean - controls NavbarLogo visibility
+       */
+      logo: figma.boolean("logo"),
+
+      /**
+       * CARRIER LOGO VISIBILITY
+       * Maps Figma's "carrierLogo" boolean - passed to NavbarFooter.showCarrierLogo
+       */
+      carrierLogo: figma.boolean("carrierLogo"),
+
+      /**
+       * HELP BUTTON VISIBILITY
+       * Maps Figma's "helpButton" boolean - controls help button visibility
+       */
+      helpButton: figma.boolean("helpButton"),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how the Navbar component should be used in React code
+     * Composes Navbar.Logo, Navbar.Navigation, and Navbar.Footer as children
+     */
+    example: ({ expanded, activeButtonType, background, border, logo, carrierLogo }) => {
+      // Invert expanded: Figma expanded=false → React disableHoverListener=true
+      const disableHoverListener = !expanded;
+      
+      // Invert background: Figma background=true → React transparentBackground=false
+      const transparentBackground = !background;
+      
+      return (
+        <Navbar
+          disableHoverListener={disableHoverListener}
+          transparentBackground={transparentBackground}
+          border={border}
+        >
+          <NavbarLogo label="Logo">
+            {/* Logo content - conditionally rendered based on logo prop */}
+          </NavbarLogo>
+          <Navigation
+            activeButtonType={activeButtonType}
+            currentPathname="/"
+            items={[]}
+            onClick={() => {}}
+          />
+          <NavbarFooter showCarrierLogo={carrierLogo}>
+            {/* Footer content */}
+          </NavbarFooter>
+        </Navbar>
+      );
+    },
+  }
+);

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from "react";
+import clsx from "clsx";
+import { styled } from "@mui/material/styles";
+import { NavbarProps } from "./types";
+import styles from "./styles";
+import Box from "../Box";
+import { NavbarProvider } from "./NavbarProvider";
+import { NavbarLogo } from "./NavbarLogo";
+import { Navigation } from "./Navigation";
+import { ExtraNavigation } from "./ExtraNavigation";
+import { NavbarFooter } from "./NavbarFooter";
+import { NavbarFooterButton, NavigationButton } from "./NavbarButtons";
+import {
+  navSetWideMode,
+  navSetMaxWidthPx,
+  navSetChildHeightPx,
+  navSetBackgroundTransparent,
+  navSetChildMarginPx,
+  navSetBorder,
+} from "./constants";
+import { CSSObject } from "@mui/material";
+import { getSxStyles } from "../utils/styles";
+
+const NavbarContainerStyled = styled(Box)(styles.container);
+
+/** The NavBar pattern is a collapsible surface containing supplementary content or actions that is anchored to the edge of the screen.
+ *  //Named Import
+ * `import { Navbar } from '@carrier-io/air-react'`
+ */
+export const Navbar = ({
+  disableHoverListener = true,
+  onDrawerSizeChanged,
+  children,
+  heightOffset = 0,
+  tooltipProps,
+  wideMode,
+  transparentBackground,
+  childMargin,
+  childHeight,
+  maxOpenWidth,
+  border = true,
+  sx,
+  ...rest
+}: NavbarProps) => {
+  const [openedDrawer, setOpenedDrawer] = useState<boolean>(false);
+  const [update, setUpdate] = useState<boolean>(false);
+
+  const handleOpenDrawer = (): void => {
+    if (!disableHoverListener) {
+      setOpenedDrawer(!openedDrawer);
+      if (onDrawerSizeChanged) {
+        onDrawerSizeChanged(!openedDrawer);
+      }
+    }
+  };
+
+  //This sets the override flag for getting the correct values out of nav constants
+  useEffect(() => {
+    navSetWideMode(wideMode ?? false);
+    setUpdate(!update);
+  }, [wideMode]);
+  useEffect(() => {
+    navSetBackgroundTransparent(!!transparentBackground);
+    setUpdate(!update);
+  }, [transparentBackground]);
+  useEffect(() => {
+    if (!!childMargin) navSetChildMarginPx(childMargin);
+    setUpdate(!update);
+  }, [childMargin]);
+  useEffect(() => {
+    if (!!childHeight) navSetChildHeightPx(childHeight);
+    setUpdate(!update);
+  }, [childHeight]);
+  useEffect(() => {
+    if (!!maxOpenWidth) navSetMaxWidthPx(maxOpenWidth);
+    setUpdate(!update);
+  }, [maxOpenWidth]);
+  useEffect(() => {
+    navSetBorder(!!border);
+    setUpdate(!update);
+  }, [border]);
+
+  return (
+    <NavbarProvider value={{ openedDrawer, tooltipProps }}>
+      <NavbarContainerStyled
+        {...rest}
+        className={clsx({
+          opened: openedDrawer,
+        })}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, sx),
+            height: "calc(100% - " + heightOffset + "px)",
+          } as CSSObject)
+        }
+        onMouseEnter={() => !openedDrawer && handleOpenDrawer()}
+        onMouseLeave={() => openedDrawer && handleOpenDrawer()}
+      >
+        {children && <Box sx={{ width: "100%" }}>{children}</Box>}
+      </NavbarContainerStyled>
+    </NavbarProvider>
+  );
+};
+
+Navbar.Logo = NavbarLogo;
+Navbar.Navigation = Navigation;
+Navbar.ExtraNavigation = ExtraNavigation;
+Navbar.Footer = NavbarFooter;
+Navbar.NavButton = NavigationButton;
+Navbar.NavFooterButton = NavbarFooterButton;

package/src/components/Navbar/NavbarButtons/Item.figma.tsx

@@ -0,0 +1,117 @@
+/**
+ * Figma Code Connect Configuration for Navbar Item Component
+ * 
+ * This connects Figma's "Item" component to the React NavigationButton component.
+ * Items are used within the Navbar Navigation component.
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37601-412122
+ * 
+ * Figma Properties:
+ * - activeButtonType (basic, indicator) → NavigationButton.activeButtonType
+ * - expanded (true, false) → Visual state (Navbar expands on hover by default)
+ * - selected (true, false) → NavigationButton.active
+ * - disabled (true, false) → NavigationButton.disabled
+ * - state (enabled, hover, focus) → Visual state (not a prop)
+ * - invertIndicator (true, false) → May affect styling
+ * - tooltip (true, false) → NavigationButton.disableTooltip (inverted)
+ * - divider (true, false) → If true, renders Divider component below Item
+ * 
+ * Structure:
+ * - Label layer: Contains the text label
+ * - Icon: Nested within UnstyledButton component, swapped via Icon component instance
+ */
+
+import figma from "@figma/code-connect";
+import { NavigationButton } from "./NavigationButton";
+import Divider from "../../Divider";
+
+figma.connect(
+  NavigationButton,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37601-412122",
+  {
+    props: {
+      /**
+       * ACTIVE BUTTON TYPE
+       * Maps Figma's "activeButtonType" property to NavigationButton.activeButtonType
+       */
+      activeButtonType: figma.enum("activeButtonType", {
+        basic: "basic",
+        indicator: "indicator",
+      }),
+
+      /**
+       * SELECTED STATE
+       * Maps Figma's "selected" boolean to NavigationButton.active prop
+       */
+      active: figma.boolean("selected"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to NavigationButton.disabled prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * TOOLTIP VISIBILITY
+       * Maps Figma's "tooltip" boolean to NavigationButton.disableTooltip (inverted)
+       * Figma: tooltip=true means tooltip is visible
+       * React: disableTooltip=true means tooltip is disabled
+       */
+      tooltip: figma.boolean("tooltip"),
+
+      /**
+       * DIVIDER FLAG
+       * Maps Figma's "divider" boolean - if true, renders Divider below
+       */
+      divider: figma.boolean("divider"),
+
+      /**
+       * LABEL TEXT
+       * Maps text property "✏️ Label" from Item component
+       */
+      label: figma.string("✏️ Label"),
+
+      /**
+       * ITEM ID
+       * Maps text property "🆔 ID" from Item component
+       */
+      id: figma.string("🆔 ID"),
+
+      /**
+       * ICON
+       * Maps Icon component instance from Item component
+       * Since Icon component properties are surfaced to Item, the instance swap property
+       * should be named after the component ("Icon"), not the layer name ("Start Icon")
+       */
+      children: figma.instance("Icon"),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how NavigationButton should be used
+     * If divider=true, renders Divider component below the NavigationButton
+     * 
+     * NOTE: Instance name for id mapping may need iteration after testing in Figma Make.
+     * Currently generating id from label as fallback.
+     */
+    example: ({ activeButtonType, active, disabled, tooltip, divider, label, id, children }) => {
+      const disableTooltip = !tooltip;
+      
+      if (divider) {
+        return <Divider sx={{ margin: "9px 0" }} />;
+      }
+      
+      return (
+        <NavigationButton
+          data={{ id: id, label: label }}
+          activeButtonType={activeButtonType}
+          active={active}
+          disabled={disabled}
+          disableTooltip={disableTooltip}
+          onClick={() => {}}
+        >
+          {children}
+        </NavigationButton>
+      );
+    },
+  }
+);