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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -16,8 +16,8 @@
     "access": "public"
   },
   "scripts": {
-    "figma:connect": "figma connect",
-    "figma:publish": "figma connect publish"
+    "figma:connect": "npx figma connect",
+    "figma:publish": "npx figma connect publish"
   },
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@figma/code-connect": "^1.0.0",
+    "@figma/code-connect": "^1.3.13",
     "@mui/material": "^5.15.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

package/src/components/BottomNavigation/BottomNavigation.figma.tsx

@@ -0,0 +1,63 @@
+/**
+ * Figma Code Connect Configuration for BottomNavigation Component
+ * 
+ * This connects Figma's BottomNavigation component to the React BottomNavigation component.
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6572-50307
+ * 
+ * Figma Properties:
+ * - showLabels (on, selected-only, off) → showLabel prop
+ */
+
+import figma from "@figma/code-connect";
+import BottomNavigation from "./BottomNavigation";
+// Import BottomNavigationAction so Figma Code Connect can resolve component instances
+import BottomNavigationAction from "./BottomNavigationAction";
+
+figma.connect(
+  BottomNavigation,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6572-50307",
+  {
+    props: {
+      /**
+       * SHOW LABELS
+       * Maps Figma's "showLabels" property to React's "showLabel" prop
+       * Figma: on, selected-only, off
+       * React: "On", "Selected Only", "Off"
+       */
+      showLabel: figma.enum("showLabels", {
+        on: "On",
+        "selected-only": "Selected Only",
+        off: "Off",
+      }),
+      /**
+       * CHILDREN
+       * Maps nested BottomNavigationAction instances from Figma
+       * Each "Nav Item X" is an instance of the BottomNavigationAction component
+       * We map each one individually using the exact layer names, then combine them
+       */
+      navItem1: figma.children("Nav Item 1"),
+      navItem2: figma.children("Nav Item 2"),
+      navItem3: figma.children("Nav Item 3"),
+      navItem4: figma.children("Nav Item 4"),
+      navItem5: figma.children("Nav Item 5"),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how BottomNavigation should be used with BottomNavigationAction children
+     */
+    example: ({ showLabel, navItem1, navItem2, navItem3, navItem4, navItem5 }) => (
+      <BottomNavigation
+        showLabel={showLabel}
+        value={0}
+        onChange={() => {}}
+      >
+        {navItem1}
+        {navItem2}
+        {navItem3}
+        {navItem4}
+        {navItem5}
+      </BottomNavigation>
+    ),
+  }
+);

package/src/components/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+
+import {
+  BottomNavigation as MuiBottomNavigation,
+  BottomNavigationProps as MuiBottomNavigationProps,
+} from "@mui/material";
+import { CSSObject } from "@mui/material/styles";
+import { getSxStyles } from "../utils/styles";
+
+export interface BottomNavigationProps
+  extends Omit<MuiBottomNavigationProps, "showLabels"> {
+  /**
+   *
+   * Labels will be visible based on the selection.
+   */
+  showLabel?: "On" | "Selected Only" | "Off";
+}
+
+/** The BottomNavigation component provides a persistent and convenient way for users to visit primary destinations in an app.
+ *
+ * `import BottomNavigation from '@carrier-io/air-react/BottomNavigation'`
+ * `import BottomNavigationAction from '@carrier-io/air-react/BottomNavigationAction'`
+ */
+
+const BottomNavigation = forwardRef<HTMLDivElement, BottomNavigationProps>(
+  ({ sx, ...props }, ref) => {
+    return (
+      <MuiBottomNavigation
+        {...props}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, sx),
+            // Theme-aware background: adapts to light/dark themes
+            backgroundColor: theme.palette.base?.background.paper,
+          } as CSSObject)
+        }
+        ref={ref}
+      />
+    );
+  }
+);
+
+BottomNavigation.displayName = "BottomNavigation";
+
+export default BottomNavigation;

package/src/components/BottomNavigation/BottomNavigationAction.figma.tsx

@@ -0,0 +1,89 @@
+/**
+ * Figma Code Connect Configuration for BottomNavigationAction Component
+ * 
+ * This connects Figma's BottomNavigationAction component to the React BottomNavigationAction component.
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6572-50288
+ * 
+ * Figma Properties:
+ * - selected (true, false) → selected prop
+ * - disabled (true, false) → disabled prop
+ * - focus (true, false) → Visual state (not a prop)
+ * - showLabel (true, false) → labelvisibility prop ("On" when true, "Off" when false)
+ * - ✏️ label (text property) → label prop (Typography component)
+ * - Icon (nested component) → icon prop
+ */
+
+import figma from "@figma/code-connect";
+import BottomNavigationAction from "./BottomNavigationAction";
+import Typography from "../Typography";
+import Icon from "../Icon";
+
+figma.connect(
+  BottomNavigationAction,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6572-50288",
+  {
+    props: {
+      /**
+       * SELECTED STATE
+       * Maps Figma's "selected" boolean to React's "selected" prop
+       */
+      selected: figma.boolean("selected"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to React's "disabled" prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * LABEL VISIBILITY
+       * Maps Figma's "showLabel" boolean as an enum to React's "labelvisibility" prop
+       * Figma: showLabel=true → React: labelvisibility="On"
+       * Figma: showLabel=false → React: labelvisibility="Off"
+       */
+      labelvisibility: figma.enum("showLabel", {
+        true: "On",
+        false: "Off",
+      }),
+
+
+      /**
+       * LABEL TEXT
+       * Maps text property "✏️ Label" from BottomNavigationAction component
+       * This requires the "✏️ Label" text property to be surfaced from the "Label" layer
+       * Similar to Navbar Item which uses figma.string("✏️ Label")
+       * The label is rendered as a Typography component in React
+       */
+      label: figma.string("✏️ Label"),
+
+
+      /**
+       * ICON NESTED PROPERTIES
+       * Access Icon's fontSize and SVG through nested properties
+       */
+      icon: figma.nestedProps("Icon", {
+        fontSize: figma.enum("fontSize", {
+          "medium": "medium",
+          "large": "large",
+          "small": "small",
+          "xsmall": "xsmall",
+        }),
+        children: figma.instance("SVG"), // The SVG instance swap
+      }),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how BottomNavigationAction should be used
+     */
+    example: ({ selected, disabled, labelvisibility, label, icon }) => (
+      <BottomNavigationAction
+        selected={selected}
+        disabled={disabled}
+        labelvisibility={labelvisibility}
+        icon={<Icon fontSize={icon.fontSize}>{icon.children}</Icon>}
+        label={<Typography variant="body3Semibold">{label}</Typography>}
+      />
+    ),
+  }
+);

package/src/components/BottomNavigation/BottomNavigationAction.tsx

@@ -0,0 +1,110 @@
+import { forwardRef } from "react";
+
+import {
+  BottomNavigationAction as MuiBottomNavigationAction,
+  BottomNavigationActionProps as MuiBottomNavigationActionProps,
+} from "@mui/material";
+import { CSSObject } from "@mui/material/styles";
+import { getSxStyles } from "../utils/styles";
+
+export const BottomNavigationLabelOptions = {
+  On: "On",
+  Off: "Off",
+  SelectedOnly: "Selected Only",
+};
+
+export interface BottomNavigationActionProps
+  extends MuiBottomNavigationActionProps {
+  /**
+   *
+   * Labels will be visible based on the selection.
+   */
+
+  labelvisibility?: "On" | "Selected Only" | "Off";
+
+  /**
+   *
+   * selected will be used to which item is selected.
+   */
+
+  selected?: boolean;
+}
+
+/** BottomNavigationAction
+ *
+ * `import BottomNavigationAction from '@carrier-io/air-react/BottomNavigationAction'`
+ */
+
+const labelStyles = (props: BottomNavigationActionProps) => {
+  if (props.labelvisibility === BottomNavigationLabelOptions.On) {
+    return { opacity: "1", paddingTop: "0px" };
+  } else if (
+    props.labelvisibility === BottomNavigationLabelOptions.SelectedOnly &&
+    props.selected === true
+  ) {
+    return { opacity: "1" };
+  } else {
+    return { opacity: "0" };
+  }
+};
+
+const verticalAlignStyles = () => {
+  return { paddingTop: "0px" };
+};
+
+const BottomNavigationAction = forwardRef<
+  HTMLButtonElement,
+  BottomNavigationActionProps
+>(({ sx, ...props }, ref) => {
+  return (
+    <MuiBottomNavigationAction
+      sx={(theme) =>
+        ({
+          ...getSxStyles(theme, sx),
+          "& .MuiBottomNavigationAction-iconOnly": { ...labelStyles(props) },
+          "& .Mui-selected": { ...labelStyles(props) },
+          "&.MuiButtonBase-root": { ...verticalAlignStyles() },
+          // Theme-aware colors: unselected uses secondary, selected uses primary.main
+          color: theme.palette.base?.text.secondary,
+          // Consistent label sizing prevents container resizing on selection
+          "& .MuiBottomNavigationAction-label": {
+            lineHeight: "1.2",
+            fontSize: theme.typography.body2.fontSize,
+            // Hide label container when Off or when SelectedOnly and not selected
+            ...((props.labelvisibility === BottomNavigationLabelOptions.Off ||
+              (props.labelvisibility ===
+                BottomNavigationLabelOptions.SelectedOnly &&
+                !props.selected)) && {
+              height: 0,
+              minHeight: 0,
+              padding: 0,
+              margin: 0,
+              overflow: "hidden",
+            }),
+          },
+          // Selected state: primary.main color for icon and label
+          "&.Mui-selected": {
+            color: theme.palette.primary.main,
+            "& .MuiBottomNavigationAction-icon": {
+              color: theme.palette.primary.main,
+            },
+            "& .MuiBottomNavigationAction-label": {
+              color: theme.palette.primary.main,
+              lineHeight: "1.2",
+              fontSize: theme.typography.body2.fontSize,
+            },
+          },
+          "&.Mui-disabled": {
+            color: theme.palette.base?.text.disabled,
+          },
+        } as CSSObject)
+      }
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+BottomNavigationAction.displayName = "BottomNavigationAction";
+
+export default BottomNavigationAction;

package/src/components/BottomNavigation/index.ts

@@ -0,0 +1,7 @@
+// BottomNavigation component family exports
+export { default } from "./BottomNavigation"; // For: import BottomNavigation from "BottomNavigation"
+export { default as BottomNavigation } from "./BottomNavigation"; // For: import { BottomNavigation } from "BottomNavigation"
+export * from "./BottomNavigation"; // For: BottomNavigationProps, etc.
+
+export { default as BottomNavigationAction } from "./BottomNavigationAction";
+export * from "./BottomNavigationAction";

package/src/components/Box/Box.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+
+import MuiBox, { BoxProps as MuiBoxProps } from "@mui/material/Box";
+import { AllSystemCSSProperties, ResponsiveStyleValue } from "@mui/system";
+
+export interface BoxProps extends MuiBoxProps {
+  /**
+   *
+   * Specifies how to capitalize an element's text
+   */
+  textTransform?: ResponsiveStyleValue<AllSystemCSSProperties["textTransform"]>;
+}
+
+/** The Box component serves as a wrapper component for most of the CSS utility needs.
+ *
+ * // Default import
+ * import Box from '@carrier-io/air-react/Box'
+ *
+ * // Named import
+ * import { Box } from '@carrier-io/air-react'
+ */
+
+const Box = forwardRef<unknown, BoxProps>((props: BoxProps, ref) => {
+  return <MuiBox {...props} ref={ref} />;
+});
+
+Box.displayName = "Box";
+
+export default Box;

package/src/components/Box/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./Box";
+export { default as Box } from "./Box";
+export * from "./Box";

package/src/components/Button/Button.figma.tsx

@@ -92,10 +92,11 @@ figma.connect(
 
       /**
        * BUTTON TEXT/CHILDREN
-       * Maps the text content from the "Button Label" layer
-       * Uses figma.children() to capture nested text content
+       * Maps text property "✏️ Text" from Button component
+       * The text property must be surfaced from the "Button Label" layer
+       * Similar to BottomNavigationAction which uses figma.string("✏️ Label")
        */
-      children: figma.children("Button Label"),
+      children: figma.string("✏️ Text"),
 
       /**
        * START ICON

package/src/components/Icon/ArrowLeftIcon.figma.tsx

@@ -13,20 +13,21 @@ import Icon from "./Icon";
 // Placeholder - replace with actual ArrowLeftIcon import
 const ArrowLeftIcon = ({ variant, ...props }: any) => <span {...props}>ArrowLeftIcon</span>;
 
-figma.connect(
-  ArrowLeftIcon,
-  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=ARROW-LEFT-ICON-NODE-ID",
-  {
-    props: {
-      variant: figma.enum("variant", {
-        outlined: "outlined",
-        filled: "filled",
-      }),
-    },
-    example: ({ variant }) => (
-      <Icon fontSize="medium">
-        <ArrowLeftIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   ArrowLeftIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=ARROW-LEFT-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <ArrowLeftIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/ArrowRightIcon.figma.tsx

@@ -13,20 +13,21 @@ import Icon from "./Icon";
 // Placeholder - replace with actual ArrowRightIcon import
 const ArrowRightIcon = ({ variant, ...props }: any) => <span {...props}>ArrowRightIcon</span>;
 
-figma.connect(
-  ArrowRightIcon,
-  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=ARROW-RIGHT-ICON-NODE-ID",
-  {
-    props: {
-      variant: figma.enum("variant", {
-        outlined: "outlined",
-        filled: "filled",
-      }),
-    },
-    example: ({ variant }) => (
-      <Icon fontSize="medium">
-        <ArrowRightIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   ArrowRightIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=ARROW-RIGHT-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <ArrowRightIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/CheckIcon.figma.tsx

@@ -13,20 +13,21 @@ import Icon from "./Icon";
 // Placeholder - replace with actual CheckIcon import
 const CheckIcon = ({ variant, ...props }: any) => <span {...props}>CheckIcon</span>;
 
-figma.connect(
-  CheckIcon,
-  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=CHECK-ICON-NODE-ID",
-  {
-    props: {
-      variant: figma.enum("variant", {
-        outlined: "outlined",
-        filled: "filled",
-      }),
-    },
-    example: ({ variant }) => (
-      <Icon fontSize="medium">
-        <CheckIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   CheckIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=CHECK-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <CheckIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/CloseIcon.figma.tsx

@@ -13,20 +13,21 @@ import Icon from "./Icon";
 // Placeholder - replace with actual CloseIcon import
 const CloseIcon = ({ variant, ...props }: any) => <span {...props}>CloseIcon</span>;
 
-figma.connect(
-  CloseIcon,
-  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=CLOSE-ICON-NODE-ID",
-  {
-    props: {
-      variant: figma.enum("variant", {
-        outlined: "outlined",
-        filled: "filled",
-      }),
-    },
-    example: ({ variant }) => (
-      <Icon fontSize="medium">
-        <CloseIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   CloseIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=CLOSE-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <CloseIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/HomeIcon.figma.tsx

@@ -13,20 +13,21 @@ import Icon from "./Icon";
 // Placeholder - replace with actual HomeIcon import
 const HomeIcon = ({ variant, ...props }: any) => <span {...props}>HomeIcon</span>;
 
-figma.connect(
-  HomeIcon,
-  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=HOME-ICON-NODE-ID",
-  {
-    props: {
-      variant: figma.enum("variant", {
-        outlined: "outlined",
-        filled: "filled",
-      }),
-    },
-    example: ({ variant }) => (
-      <Icon fontSize="medium">
-        <HomeIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);
+// TODO: Uncomment and update with real Figma URL when ready
+// figma.connect(
+//   HomeIcon,
+//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=HOME-ICON-NODE-ID",
+//   {
+//     props: {
+//       variant: figma.enum("variant", {
+//         outlined: "outlined",
+//         filled: "filled",
+//       }),
+//     },
+//     example: ({ variant }) => (
+//       <Icon fontSize="medium">
+//         <HomeIcon variant={variant} />
+//       </Icon>
+//     ),
+//   }
+// );

package/src/components/Icon/Icon.figma.tsx

@@ -0,0 +1,68 @@
+/**
+ * Figma Code Connect Configuration for Icon Component
+ * 
+ * This connects Figma's Icon component to the React Icon wrapper component.
+ * The Icon wrapper handles fontSize and wraps icon components passed as children.
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6594-47648
+ * 
+ * Figma Properties:
+ * - fontSize: large (28px), medium (24px), small (20px), xsmall (16px)
+ *   Note: Figma enum values are "large", "medium", "small", "xsmall" (without px)
+ * - SVG: Instance swap property for swapping icon components
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+
+figma.connect(
+  Icon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6594-47648",
+  {
+    props: {
+      /**
+       * FONT SIZE MAPPING
+       * Maps Figma's fontSize property to React's fontSize prop
+       * 
+       * NOTE: If Figma enum values include "px" (e.g., "large: 32px"), 
+       * update the left side of the mapping to match exactly what Figma shows.
+       * 
+       * Common patterns:
+       * - "large" → "large" (if enum value is just "large")
+       * - "large: 32px" → "large" (if enum value includes px)
+       * - "32px" → "large" (if enum value is just the px value)
+       */
+      fontSize: figma.enum("fontSize", {
+        // Map Figma enum values to React fontSize prop values
+        // If Figma shows "large: 32px", use the left side as shown in Figma
+        "large": "large",
+        "medium": "medium", 
+        "small": "small",
+        "xsmall": "xsmall",
+        // Alternative: If Figma enum values include px, try these:
+        "large: 32px": "large",
+        "medium: 24px": "medium",
+        "small: 20px": "small",
+        "xsmall: 16px": "xsmall",
+      }),
+
+      /**
+       * SVG INSTANCE SWAP
+       * Maps Figma's "SVG" instance swap property to React children
+       * The property name is "SVG" (the layer it swaps is named "placeholder")
+       * When users swap the SVG instance in Figma, it maps to the icon component passed as children
+       */
+      children: figma.instance("SVG"),
+    },
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows the Icon wrapper with fontSize and the swapped icon component as children
+     * fontSize defaults to "medium" if not provided
+     */
+    example: ({ fontSize = "medium", children }) => (
+      <Icon fontSize={fontSize}>
+        {children}
+      </Icon>
+    ),
+  }
+);