@carrier-dpx/air-react-library 0.7.36 → 0.7.38

package/package.json

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

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>
+    ),
+  }
+);

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,160 @@
+import { forwardRef, Ref } from "react";
+
+import MuiTabs, { TabsProps as MuiTabsProps } from "@mui/material/Tabs";
+import { TouchRippleActions } from "@mui/material/ButtonBase/TouchRipple";
+import { baseTabsSx } from "./styles";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import TabScrollButton, {
+  TabScrollButtonProps,
+} from "@mui/material/TabScrollButton";
+
+export interface TabsProps extends Omit<MuiTabsProps, "centered" | "variant"> {
+  /**
+   *
+   * A ref that points to the TouchRipple element.
+   */
+  touchRippleRef?: Ref<TouchRippleActions>;
+  /**
+   *
+   * 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";
+
+  /**
+   * Determines additional display behavior of the tabs:
+   *
+   * - `scrollable` will invoke scrolling properties and allow for horizontally
+   *   scrolling (or swiping) of the tab bar.
+   * - `fullWidth` will make the tabs grow to use all the available space,
+   *   which should be used for small views, like on mobile.
+   * - `group-left` will align the tabs to the left within the available space.
+   * - `group-center` will center-align the tabs within the available space.
+   * - `group-right` will align the tabs to the right within the available space.
+   * @default 'group-left'
+   */
+  variant?:
+    | "scrollable"
+    | "full-width"
+    | "group-left"
+    | "group-center"
+    | "group-right";
+}
+
+const indicatorInvertStyle = {
+  bottom: "unset",
+  top: 0,
+  borderBottomRightRadius: 4,
+  borderBottomLeftRadius: 4,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+};
+
+const ScrollButton = ({
+  direction,
+  onClick,
+  orientation = "horizontal",
+  ...props
+}: TabScrollButtonProps) => {
+  return (
+    <TabScrollButton
+      orientation={orientation}
+      {...props}
+      direction={direction}
+      onClick={onClick}
+    >
+      {direction === "left" ? (
+        <ChevronLeftIcon fontSize="small" />
+      ) : (
+        <ChevronRightIcon fontSize="small" />
+      )}
+    </TabScrollButton>
+  );
+};
+
+/** The Tabs component is useful for organizing views of related content and allowing users to switch between them.
+ *
+ * `import { Tabs, Tab, TabContext, TabList, TabPanel, TabScrollButton } from '@carrier-io/air-react'`
+ */
+
+const Tabs = forwardRef<HTMLButtonElement, TabsProps>(
+  (
+    {
+      invertIndicator,
+      indicatorVariant = "line",
+      indicatorWidth = "content",
+      variant = "group-left",
+      visibleScrollbar = false,
+      ...props
+    },
+    ref
+  ) => {
+    const rootClassNames = `${
+      indicatorWidth === "full"
+        ? "MuiTab-indicator__full"
+        : "MuiTab-indicator__content"
+    }`;
+    const indicatorClassNames = `${
+      indicatorVariant === "line"
+        ? "MuiTab-indicator__line"
+        : "MuiTab-indicator__standard"
+    }`;
+
+    let justifyContentValue: "left" | "right" | "center" | undefined;
+    let componentVariant: "standard" | "scrollable" | "fullWidth" | undefined =
+      "standard";
+
+    switch (variant) {
+      case "group-center":
+        justifyContentValue = "center";
+        break;
+      case "group-left":
+        justifyContentValue = "left";
+        break;
+      case "group-right":
+        justifyContentValue = "right";
+        break;
+      case "full-width":
+        justifyContentValue = undefined;
+        componentVariant = "fullWidth";
+        break;
+      default:
+        justifyContentValue = undefined;
+        componentVariant = variant;
+        break;
+    }
+
+    return (
+      <MuiTabs
+        {...props}
+        ref={ref}
+        visibleScrollbar={visibleScrollbar}
+        ScrollButtonComponent={ScrollButton}
+        variant={componentVariant}
+        allowScrollButtonsMobile={props.allowScrollButtonsMobile || false}
+        sx={baseTabsSx(justifyContentValue)}
+        className={[rootClassNames, indicatorClassNames].join(" ")}
+        TabIndicatorProps={{
+          ...(invertIndicator ? { style: indicatorInvertStyle } : undefined),
+          ...props.TabIndicatorProps,
+        }}
+      />
+    );
+  }
+);
+
+Tabs.displayName = "Tabs";
+
+export default Tabs;
+export type { TabsProps };

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

@@ -0,0 +1,88 @@
+/**
+ * Figma Code Connect Configuration for Tabs Component (Vertical)
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=23641-53725
+ * 
+ * Figma Properties:
+ * - scrollable (true, false)
+ * - 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=23641-53725",
+  {
+    props: {
+      /**
+       * SCROLLABLE VARIANT
+       * Maps Figma's "scrollable" boolean to React's "variant" prop
+       * When true, variant="scrollable", otherwise variant="group-left" (default)
+       */
+      scrollable: figma.boolean("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
+     * Vertical Tabs - sets orientation="vertical"
+     */
+    example: ({ scrollable, disabled, tab1, tab2, tab3, tab4, tab5, tab6, tab7, tab8 }) => {
+      let variant: "scrollable" | "group-left" = "group-left";
+      if (scrollable) {
+        variant = "scrollable";
+      }
+
+      return (
+        <Tabs
+          orientation="vertical"
+          variant={variant}
+          disabled={disabled}
+          value={0}
+          onChange={() => {}}
+        >
+          {tab1}
+          {tab2}
+          {tab3}
+          {tab4}
+          {tab5}
+          {tab6}
+          {tab7}
+          {tab8}
+        </Tabs>
+      );
+    },
+  }
+);

package/src/components/Tabs/index.ts

@@ -0,0 +1,19 @@
+// Tabs component family exports
+export { default } from "./Tabs"; // For: import Tabs from "Tabs"
+export { default as Tabs } from "./Tabs"; // For: import { Tabs } from "Tabs"
+export * from "./Tabs"; // For: TabsProps, etc.
+
+export { default as Tab } from "./Tab";
+export * from "./Tab";
+
+export { default as TabContext } from "./TabContext";
+export * from "./TabContext";
+
+export { default as TabList } from "./TabList";
+export * from "./TabList";
+
+export { default as TabPanel } from "./TabPanel";
+export * from "./TabPanel";
+
+export { default as TabScrollButton } from "./TabScrollButton";
+export * from "./TabScrollButton";

package/src/components/Tabs/styles.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from "@mui/material";
+
+export const baseTabsSx = (
+  justifyContentValue: "left" | "right" | "center" | undefined
+): CSSObject => ({
+  "& .MuiTabs-flexContainer": {
+    justifyContent: justifyContentValue,
+  },
+});

package/src/components/Tag/Tag.figma.tsx

@@ -40,6 +40,7 @@ figma.connect(
        * purple -> primary, cyan -> info, orange -> warning, pink -> error
        */
       color: figma.enum("color", {
+        base: "base",
         purple: "primary",
         primary: "primary",
         info: "info",

package/src/index.ts

@@ -63,6 +63,15 @@ export { default as Tag } from "./components/Tag";
 export type { TagProps } from "./components/Tag";
 export { default as Breadcrumbs, BreadcrumbLink } from "./components/Breadcrumbs";
 export type { BreadcrumbsProps, BreadcrumbLinkProps } from "./components/Breadcrumbs";
+export * from "./components/Tabs";
+export type {
+  TabsProps,
+  TabProps,
+  TabListProps,
+  TabPanelProps,
+  TabContextProps,
+  TabScrollButtonProps,
+} from "./components/Tabs";
 export * from "./components/theme";
 
 // Demo Icons - exported from main index to avoid deep-path imports

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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for ArrowLeft Icon
- * 
- * NOTE: Import ArrowLeftIcon from your actual icon library package.
- * Example: import { ArrowLeftIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { ArrowLeftIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual ArrowLeftIcon import
-const ArrowLeftIcon = ({ variant, ...props }: any) => <span {...props}>ArrowLeftIcon</span>;
-
-// 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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for ArrowRight Icon
- * 
- * NOTE: Import ArrowRightIcon from your actual icon library package.
- * Example: import { ArrowRightIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { ArrowRightIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual ArrowRightIcon import
-const ArrowRightIcon = ({ variant, ...props }: any) => <span {...props}>ArrowRightIcon</span>;
-
-// 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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for Check Icon
- * 
- * NOTE: Import CheckIcon from your actual icon library package.
- * Example: import { CheckIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { CheckIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual CheckIcon import
-const CheckIcon = ({ variant, ...props }: any) => <span {...props}>CheckIcon</span>;
-
-// 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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for Close Icon
- * 
- * NOTE: Import CloseIcon from your actual icon library package.
- * Example: import { CloseIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { CloseIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual CloseIcon import
-const CloseIcon = ({ variant, ...props }: any) => <span {...props}>CloseIcon</span>;
-
-// 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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for Home Icon
- * 
- * NOTE: Import HomeIcon from your actual icon library package.
- * Example: import { HomeIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { HomeIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual HomeIcon import
-const HomeIcon = ({ variant, ...props }: any) => <span {...props}>HomeIcon</span>;
-
-// 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/InfoIcon.figma.tsx

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for Info Icon
- * 
- * NOTE: Import InfoIcon from your actual icon library package.
- * Example: import { InfoIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { InfoIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual InfoIcon import
-const InfoIcon = ({ variant, ...props }: any) => <span {...props}>InfoIcon</span>;
-
-// TODO: Uncomment and update with real Figma URL when ready
-// figma.connect(
-//   InfoIcon,
-//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=INFO-ICON-NODE-ID",
-//   {
-//     props: {
-//       variant: figma.enum("variant", {
-//         outlined: "outlined",
-//         filled: "filled",
-//       }),
-//     },
-//     example: ({ variant }) => (
-//       <Icon fontSize="medium">
-//         <InfoIcon variant={variant} />
-//       </Icon>
-//     ),
-//   }
-// );

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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for Menu Icon
- * 
- * NOTE: Import MenuIcon from your actual icon library package.
- * Example: import { MenuIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { MenuIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual MenuIcon import
-const MenuIcon = ({ variant, ...props }: any) => <span {...props}>MenuIcon</span>;
-
-// TODO: Uncomment and update with real Figma URL when ready
-// figma.connect(
-//   MenuIcon,
-//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=MENU-ICON-NODE-ID",
-//   {
-//     props: {
-//       variant: figma.enum("variant", {
-//         outlined: "outlined",
-//         filled: "filled",
-//       }),
-//     },
-//     example: ({ variant }) => (
-//       <Icon fontSize="medium">
-//         <MenuIcon variant={variant} />
-//       </Icon>
-//     ),
-//   }
-// );

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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for Search Icon
- * 
- * NOTE: Import SearchIcon from your actual icon library package.
- * Example: import { SearchIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { SearchIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual SearchIcon import
-const SearchIcon = ({ variant, ...props }: any) => <span {...props}>SearchIcon</span>;
-
-// TODO: Uncomment and update with real Figma URL when ready
-// figma.connect(
-//   SearchIcon,
-//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=SEARCH-ICON-NODE-ID",
-//   {
-//     props: {
-//       variant: figma.enum("variant", {
-//         outlined: "outlined",
-//         filled: "filled",
-//       }),
-//     },
-//     example: ({ variant }) => (
-//       <Icon fontSize="medium">
-//         <SearchIcon variant={variant} />
-//       </Icon>
-//     ),
-//   }
-// );

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

@@ -1,61 +0,0 @@
-/**
- * Figma Code Connect Configuration for Settings Icon
- * 
- * This connects Figma's SettingsIcon component to the React SettingsIcon component.
- * The icon component is wrapped in the Icon wrapper for fontSize control.
- * 
- * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=31-2
- * 
- * NOTE: Import SettingsIcon from your actual icon library package.
- * Example: import { SettingsIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { SettingsIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual SettingsIcon import
-const SettingsIcon = ({ variant, ...props }: any) => <span {...props}>SettingsIcon</span>;
-
-figma.connect(
-  SettingsIcon,
-  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=31-2",
-  {
-    props: {
-      /**
-       * STYLE MAPPING
-       * Maps Figma's "Style" property to the icon component's "variant" prop
-       * Figma uses "Style" with values "Outlined" and "Filled"
-       * React icon component expects "variant" with values "outlined" and "filled"
-       */
-      variant: figma.enum("Style", {
-        Outlined: "outlined",
-        Filled: "filled",
-      }),
-      
-      /**
-       * FONT SIZE MAPPING (optional)
-       * If your Figma icon component has a fontSize property, map it here
-       * Otherwise, fontSize is set on the Icon wrapper component
-       */
-      // fontSize: figma.enum("fontSize", {
-      //   "xsmall-12px": "xsmall",
-      //   "small-16px": "small",
-      //   "medium-24px": "medium",
-      //   "large-32px": "large",
-      // }),
-    },
-    /**
-     * EXAMPLE CODE TEMPLATE
-     * Shows the icon component wrapped in Icon for fontSize control.
-     * The Icon wrapper handles fontSize (xsmall, small, medium, large).
-     * The icon component handles variant (outlined, filled).
-     */
-    example: ({ variant }) => (
-      <Icon fontSize="medium">
-        <SettingsIcon variant={variant} />
-      </Icon>
-    ),
-  }
-);

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

@@ -1,33 +0,0 @@
-/**
- * Figma Code Connect Configuration for User Icon
- * 
- * NOTE: Import UserIcon from your actual icon library package.
- * Example: import { UserIcon } from '@carrier-io/icons';
- */
-
-import figma from "@figma/code-connect";
-import Icon from "./Icon";
-// TODO: Import from your actual icon library
-// import { UserIcon } from '@carrier-io/icons';
-
-// Placeholder - replace with actual UserIcon import
-const UserIcon = ({ variant, ...props }: any) => <span {...props}>UserIcon</span>;
-
-// TODO: Uncomment and update with real Figma URL when ready
-// figma.connect(
-//   UserIcon,
-//   "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=USER-ICON-NODE-ID",
-//   {
-//     props: {
-//       variant: figma.enum("variant", {
-//         outlined: "outlined",
-//         filled: "filled",
-//       }),
-//     },
-//     example: ({ variant }) => (
-//       <Icon fontSize="medium">
-//         <UserIcon variant={variant} />
-//       </Icon>
-//     ),
-//   }
-// );