@carrier-dpx/air-react-library 0.7.37 → 0.7.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.7.37",
+  "version": "0.7.39",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -45,6 +45,7 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@mui/icons-material": "^5.0.0 || ^7.0.0",
+    "@mui/lab": "^5.0.0-alpha",
     "@mui/material": "^5.0.0 || ^7.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -53,6 +54,8 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@figma/code-connect": "^1.4.0",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/lab": "^5.0.0-alpha.177",
     "@mui/material": "^5.15.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -50,4 +50,3 @@ const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
 Breadcrumbs.displayName = "Breadcrumbs";
 
 export default Breadcrumbs;
-export type { BreadcrumbsProps };

package/src/components/Tabs/Tab.horizontal.figma.tsx

@@ -0,0 +1,185 @@
+/**
+ * Figma Code Connect Configuration for Tab Component (Horizontal)
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=23369-17683
+ * 
+ * Figma Properties:
+ * - selected (true, false)
+ * - indicatorWidth (content, full)
+ * - invertIndicator (true, false)
+ * - disabled (true, false)
+ * - state (enabled, hover, focus) - visual state, not a prop
+ * - label (true, false) - boolean hide/show
+ * - startAdornment (true, false) - boolean hide/show
+ * - endAdornment (true, false) - boolean hide/show
+ * 
+ * Note: indicatorWidth and invertIndicator are Tabs-level props, but are included
+ * here as they may be visually represented in Figma's Tab component.
+ */
+
+import figma from "@figma/code-connect";
+import Tab from "./Tab";
+
+figma.connect(
+  Tab,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=23369-17683",
+  {
+    props: {
+      /**
+       * SELECTED STATE
+       * Maps Figma's "selected" boolean to React's "selected" prop
+       */
+      selected: figma.boolean("selected"),
+
+      /**
+       * INDICATOR WIDTH
+       * Maps Figma's "indicatorWidth" property
+       * Note: This is typically a Tabs-level prop, but may be visually represented in Figma
+       */
+      indicatorWidth: figma.enum("indicatorWidth", {
+        content: "content",
+        full: "full",
+      }),
+
+      /**
+       * INVERT INDICATOR
+       * Maps Figma's "invertIndicator" boolean
+       * Note: This is typically a Tabs-level prop, but may be visually represented in Figma
+       */
+      invertIndicator: figma.boolean("invertIndicator"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to React's "disabled" prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * LABEL VISIBILITY
+       * Maps Figma's "label" boolean - controls visibility of label text
+       */
+      showLabel: figma.boolean("label"),
+
+      /**
+       * LABEL TEXT CONTENT
+       * Maps text content from nested "Label" Typography component
+       */
+      labelText: figma.nestedProps("Label", {
+        children: figma.children("Label"),
+      }),
+
+      /**
+       * START ADORNMENT VISIBILITY
+       * Maps Figma's "startAdornment" boolean - controls visibility of start icon
+       */
+      showStartAdornment: figma.boolean("startAdornment"),
+
+      /**
+       * START ADORNMENT ICON INSTANCE
+       * Maps nested Icon component instance when startAdornment is visible
+       * Uses figma.instance() to get the Icon component instance
+       */
+      startIcon: figma.instance("startAdornment"),
+
+      /**
+       * END ADORNMENT VISIBILITY
+       * Maps Figma's "endAdornment" boolean - controls visibility of end icon
+       */
+      showEndAdornment: figma.boolean("endAdornment"),
+
+      /**
+       * END ADORNMENT ICON INSTANCE
+       * Maps nested Icon component instance when endAdornment is visible
+       * Uses figma.instance() to get the Icon component instance
+       */
+      endIcon: figma.instance("endAdornment"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Horizontal Tab - handles label, startAdornment, and endAdornment visibility
+     */
+    example: ({ selected, disabled, showLabel, labelText, showStartAdornment, startIcon, showEndAdornment, endIcon }) => {
+      // Handle case with label and both adornments
+      // Note: MUI Tab only supports one icon, so we prioritize startAdornment
+      if (showLabel && labelText && labelText.children && showStartAdornment && startIcon && showEndAdornment && endIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+            icon={startIcon}
+            iconPosition="start"
+          />
+        );
+      }
+
+      // Handle case with label and startAdornment only
+      if (showLabel && labelText && labelText.children && showStartAdornment && startIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+            icon={startIcon}
+            iconPosition="start"
+          />
+        );
+      }
+
+      // Handle case with label and endAdornment only
+      if (showLabel && labelText && labelText.children && showEndAdornment && endIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+            icon={endIcon}
+            iconPosition="end"
+          />
+        );
+      }
+
+      // Handle case with label only
+      if (showLabel && labelText && labelText.children) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+          />
+        );
+      }
+
+      // Handle case with startAdornment only (no label)
+      if (showStartAdornment && startIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            icon={startIcon}
+          />
+        );
+      }
+
+      // Handle case with endAdornment only (no label)
+      if (showEndAdornment && endIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            icon={endIcon}
+          />
+        );
+      }
+
+      // Default case - no label, no adornments
+      return (
+        <Tab
+          selected={selected}
+          disabled={disabled}
+        />
+      );
+    },
+  }
+);

package/src/components/Tabs/Tab.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, Ref } from "react";
+
+import MuiTab, { TabProps as MuiTabProps } from "@mui/material/Tab";
+import { TouchRippleActions } from "@mui/material/ButtonBase/TouchRipple";
+import { CSSObject, Theme } from "@mui/material/styles";
+import { getSxStyles } from "../utils/styles";
+
+export interface TabProps extends MuiTabProps {
+  /**
+   *
+   * A ref that points to the TouchRipple element.
+   */
+  touchRippleRef?: Ref<TouchRippleActions>;
+}
+
+/** Tab
+ *
+ * `import Tab from '@carrier-io/air-react/Tab'`
+ */
+const Tab = forwardRef<HTMLDivElement, TabProps>(({ sx, ...rest }, ref) => {
+  return (
+    <MuiTab
+      sx={(theme: Theme) =>
+        ({
+          ...getSxStyles(theme, sx),
+          ...theme.typography.body2Semibold,
+          textTransform: "capitalize",
+          // Default/unselected: label and icon use base.state.active
+          color: theme.palette.base?.state.active,
+          "& .MuiTab-iconWrapper": {
+            color: theme.palette.base?.state.active,
+          },
+          // Hover state: label and icon use base.text.primary
+          "&:hover": {
+            color: theme.palette.base?.text.primary,
+            "& .MuiTab-iconWrapper": {
+              color: theme.palette.base?.text.primary,
+            },
+          },
+          // Selected tab: label and icon use base.text.primary
+          "&.Mui-selected": {
+            color: theme.palette.base?.text.primary,
+            "& .MuiTab-iconWrapper": {
+              color: theme.palette.base?.text.primary,
+            },
+          },
+          // Disabled tab: label and icon use base.text.disabled
+          "&.Mui-disabled": {
+            color: theme.palette.base?.text.disabled,
+            "& .MuiTab-iconWrapper": {
+              color: theme.palette.base?.state.disabledContent,
+            },
+          },
+        } as CSSObject)
+      }
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+Tab.displayName = "Tab";
+
+export default Tab;
+export type { TabProps };

package/src/components/Tabs/Tab.vertical.figma.tsx

@@ -0,0 +1,171 @@
+/**
+ * Figma Code Connect Configuration for Tab Component (Vertical)
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=23626-42929
+ * 
+ * Figma Properties:
+ * - selected (true, false)
+ * - invertIndicator (true, false)
+ * - disabled (true, false)
+ * - state (enabled, hover, focus) - visual state, not a prop
+ * - label (true, false) - boolean hide/show
+ * - startAdornment (true, false) - boolean hide/show
+ * - endAdornment (true, false) - boolean hide/show
+ */
+
+import figma from "@figma/code-connect";
+import Tab from "./Tab";
+
+figma.connect(
+  Tab,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=23626-42929",
+  {
+    props: {
+      /**
+       * SELECTED STATE
+       * Maps Figma's "selected" boolean to React's "selected" prop
+       */
+      selected: figma.boolean("selected"),
+
+      /**
+       * INVERT INDICATOR
+       * Maps Figma's "invertIndicator" boolean
+       * Note: This is typically a Tabs-level prop, but may be visually represented in Figma
+       */
+      invertIndicator: figma.boolean("invertIndicator"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to React's "disabled" prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * LABEL VISIBILITY
+       * Maps Figma's "label" boolean - controls visibility of label text
+       */
+      showLabel: figma.boolean("label"),
+
+      /**
+       * LABEL TEXT CONTENT
+       * Maps text content from nested "Label" Typography component
+       */
+      labelText: figma.nestedProps("Label", {
+        children: figma.children("Label"),
+      }),
+
+      /**
+       * START ADORNMENT VISIBILITY
+       * Maps Figma's "startAdornment" boolean - controls visibility of start icon
+       */
+      showStartAdornment: figma.boolean("startAdornment"),
+
+      /**
+       * START ADORNMENT ICON INSTANCE
+       * Maps nested Icon component instance when startAdornment is visible
+       * Uses figma.instance() to get the Icon component instance
+       */
+      startIcon: figma.instance("startAdornment"),
+
+      /**
+       * END ADORNMENT VISIBILITY
+       * Maps Figma's "endAdornment" boolean - controls visibility of end icon
+       */
+      showEndAdornment: figma.boolean("endAdornment"),
+
+      /**
+       * END ADORNMENT ICON INSTANCE
+       * Maps nested Icon component instance when endAdornment is visible
+       * Uses figma.instance() to get the Icon component instance
+       */
+      endIcon: figma.instance("endAdornment"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Vertical Tab - handles label, startAdornment, and endAdornment visibility
+     */
+    example: ({ selected, disabled, showLabel, labelText, showStartAdornment, startIcon, showEndAdornment, endIcon }) => {
+      // Handle case with label and both adornments
+      // Note: MUI Tab only supports one icon, so we prioritize startAdornment
+      if (showLabel && labelText && labelText.children && showStartAdornment && startIcon && showEndAdornment && endIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+            icon={startIcon}
+            iconPosition="start"
+          />
+        );
+      }
+
+      // Handle case with label and startAdornment only
+      if (showLabel && labelText && labelText.children && showStartAdornment && startIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+            icon={startIcon}
+            iconPosition="start"
+          />
+        );
+      }
+
+      // Handle case with label and endAdornment only
+      if (showLabel && labelText && labelText.children && showEndAdornment && endIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+            icon={endIcon}
+            iconPosition="end"
+          />
+        );
+      }
+
+      // Handle case with label only
+      if (showLabel && labelText && labelText.children) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            label={labelText.children}
+          />
+        );
+      }
+
+      // Handle case with startAdornment only (no label)
+      if (showStartAdornment && startIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            icon={startIcon}
+          />
+        );
+      }
+
+      // Handle case with endAdornment only (no label)
+      if (showEndAdornment && endIcon) {
+        return (
+          <Tab
+            selected={selected}
+            disabled={disabled}
+            icon={endIcon}
+          />
+        );
+      }
+
+      // Default case - no label, no adornments
+      return (
+        <Tab
+          selected={selected}
+          disabled={disabled}
+        />
+      );
+    },
+  }
+);

package/src/components/Tabs/TabContext.tsx

@@ -0,0 +1,15 @@
+import MuiTabContext, {
+  TabContextProps as MuiTabContextProps,
+} from "@mui/lab/TabContext";
+
+export interface TabContextProps extends MuiTabContextProps {}
+
+/** TabContext
+ *
+ * `import { TabContext } from '@carrier-io/air-react'`
+ */
+export default function TabContext(props: TabContextProps) {
+  return <MuiTabContext {...props} />;
+}
+
+export type { TabContextProps };

package/src/components/Tabs/TabList.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from "react";
+
+import MuiTabList, { TabListProps as MuiTabListProps } from "@mui/lab/TabList";
+
+export interface TabListProps extends MuiTabListProps {
+  /**
+   *
+   * Invert the indicator on the tab. Default set to bottom for "horizontal" orientation and right for "vertical" orientation.
+   */
+  invertIndicator?: boolean;
+
+  /**
+   * indicator variant
+   * @default "line"
+   */
+  indicatorVariant?: "line" | "standard";
+
+  /**
+   * indicator width
+   */
+  indicatorWidth?: "content" | "full";
+}
+
+/** TabList
+ *
+ * `import { TabList } from '@carrier-io/air-react'`
+ */
+
+const indicatorInvertStyle = {
+  right: "unset",
+  borderBottomRightRadius: 4,
+  borderBottomLeftRadius: 0,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 4,
+};
+
+const TabList = forwardRef<HTMLButtonElement, TabListProps>(
+  ({ invertIndicator, indicatorVariant, indicatorWidth, ...props }, ref) => {
+    const rootClassNames = `${
+      indicatorWidth === "full"
+        ? "MuiTab-indicator__full"
+        : "MuiTab-indicator__content"
+    }`;
+    const indicatorClassNames = `${
+      indicatorVariant === "line"
+        ? "MuiTab-indicator__line"
+        : "MuiTab-indicator__standard"
+    }`;
+    return (
+      <MuiTabList
+        {...props}
+        ref={ref}
+        TabIndicatorProps={{
+          ...(invertIndicator ? { style: indicatorInvertStyle } : undefined),
+          ...props.TabIndicatorProps,
+        }}
+        className={[rootClassNames, indicatorClassNames].join(" ")}
+      />
+    );
+  }
+);
+
+TabList.displayName = "TabList";
+
+export default TabList;
+export type { TabListProps };

package/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from "react";
+
+import MuiTabPanel, {
+  TabPanelProps as MuiTabPanelProps,
+} from "@mui/lab/TabPanel";
+import { Theme } from "@mui/material/styles";
+import { getSxStyles } from "../utils/styles";
+
+export interface TabPanelProps extends MuiTabPanelProps {}
+
+/** TabPanel
+ *
+ * `import { TabPanel } from '@carrier-io/air-react'`
+ */
+
+const TabPanel = forwardRef<unknown, TabPanelProps>(({ sx, ...props }, ref) => {
+  return (
+    <MuiTabPanel
+      sx={
+        ((theme: Theme) => ({
+          ...getSxStyles(theme, sx),
+          // Apply base.text.primary color to panel content for dark theme support
+          color: theme.palette.base?.text.primary || theme.palette.text.primary,
+        })) as any
+      }
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+TabPanel.displayName = "TabPanel";
+
+export default TabPanel;
+export type { TabPanelProps };

package/src/components/Tabs/TabScrollButton.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+
+import MuiTabScrollButton, {
+  TabScrollButtonProps as MuiTabScrollButtonProps,
+} from "@mui/material/TabScrollButton";
+
+export interface TabScrollButtonProps extends MuiTabScrollButtonProps {}
+
+/** TabScrollButton
+ *
+ * `import { TabScrollButton } from '@carrier-io/air-react'`
+ */
+
+const TabScrollButton = forwardRef<HTMLDivElement, TabScrollButtonProps>(
+  (props, ref) => {
+    return <MuiTabScrollButton {...props} ref={ref} />;
+  }
+);
+
+TabScrollButton.displayName = "TabScrollButton";
+
+export default TabScrollButton;
+export type { TabScrollButtonProps };

package/src/components/Tabs/Tabs.horizontal.figma.tsx

@@ -0,0 +1,86 @@
+/**
+ * Figma Code Connect Configuration for Tabs Component (Horizontal)
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=17801-86244
+ * 
+ * Figma Properties:
+ * - variant (group-left, group-center, group-right, full-width, scrollable)
+ * - disabled (true, false)
+ * - divider (true, false)
+ * 
+ * Structure:
+ * - Tab 1-8: Multiple Tab instances with numbered layer names
+ */
+
+import figma from "@figma/code-connect";
+import Tabs from "./Tabs";
+import Tab from "./Tab";
+
+figma.connect(
+  Tabs,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=17801-86244",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       * Maps Figma's "variant" property to React's "variant" prop
+       */
+      variant: figma.enum("variant", {
+        "group-left": "group-left",
+        "group-center": "group-center",
+        "group-right": "group-right",
+        "full-width": "full-width",
+        scrollable: "scrollable",
+      }),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to React's "disabled" prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * DIVIDER VISIBILITY
+       * Maps Figma's "divider" boolean - controls divider visibility
+       */
+      divider: figma.boolean("divider"),
+
+      /**
+       * TAB CHILDREN
+       * Maps nested Tab instances from Figma
+       * Each "Tab X" is an instance of the Tab component
+       */
+      tab1: figma.children("Tab 1"),
+      tab2: figma.children("Tab 2"),
+      tab3: figma.children("Tab 3"),
+      tab4: figma.children("Tab 4"),
+      tab5: figma.children("Tab 5"),
+      tab6: figma.children("Tab 6"),
+      tab7: figma.children("Tab 7"),
+      tab8: figma.children("Tab 8"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Horizontal Tabs - sets orientation="horizontal"
+     */
+    example: ({ variant, disabled, tab1, tab2, tab3, tab4, tab5, tab6, tab7, tab8 }) => (
+      <Tabs
+        orientation="horizontal"
+        variant={variant}
+        disabled={disabled}
+        value={0}
+        onChange={() => {}}
+      >
+        {tab1}
+        {tab2}
+        {tab3}
+        {tab4}
+        {tab5}
+        {tab6}
+        {tab7}
+        {tab8}
+      </Tabs>
+    ),
+  }
+);