@carrier-dpx/air-react-library 0.7.31 → 0.7.32

package/src/components/Radio/styles.ts

@@ -0,0 +1,107 @@
+import { Theme } from "@mui/material";
+
+export const baseRadioSx = (theme: Theme, disableHover: boolean) => ({
+  "&.Mui-disabled": {
+    svg: {
+      stroke: theme.palette.base?.text.disabled,
+    },
+    fill: theme.palette.base?.text.disabled,
+    stroke: theme.palette.base?.text.disabled,
+  },
+  svg: {
+    stroke: theme.palette.base?.state.active,
+    strokeWidth: 0,
+  },
+  p: 0,
+  ...(disableHover && {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+    "&.Mui-checked:hover": {
+      backgroundColor: "transparent",
+    },
+  }),
+  fill: theme.palette.primary?.main,
+  stroke: theme.palette.base?.standardInputLine,
+  "&.Mui-checked": {
+    stroke: theme.palette.primary?.main,
+  },
+  "&.MuiRadio-colorError": {
+    fill: theme.palette.error?.main,
+    stroke: theme.palette.base?.standardInputLine,
+    "&.Mui-checked": {
+      stroke: theme.palette.error?.main,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.text.disabled,
+      stroke: theme.palette.base?.text.disabled,
+    },
+  },
+  "&.MuiRadio-colorWarning": {
+    fill: theme.palette.warning?.main,
+    stroke: theme.palette.base?.standardInputLine,
+    "&.Mui-checked": {
+      stroke: theme.palette.warning?.main,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.text.disabled,
+      stroke: theme.palette.base?.text.disabled,
+    },
+  },
+  "&.MuiRadio-colorSuccess": {
+    fill: theme.palette.success?.main,
+    stroke: theme.palette.base?.standardInputLine,
+    "&.Mui-checked": {
+      stroke: theme.palette.success?.main,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.text.disabled,
+      stroke: theme.palette.base?.text.disabled,
+    },
+  },
+  "&.MuiRadio-colorInfo": {
+    fill: theme.palette.info?.main,
+    stroke: theme.palette.base?.standardInputLine,
+    "&.Mui-checked": {
+      stroke: theme.palette.info?.main,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.text.disabled,
+      stroke: theme.palette.base?.text.disabled,
+    },
+  },
+  "&.MuiRadio-colorBase": {
+    fill: theme.palette.base?.main,
+    stroke: theme.palette.base?.state.active,
+    "&.Mui-checked": {
+      stroke: theme.palette.base?.main,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.state.disabledContent,
+      stroke: theme.palette.base?.state.disabledContent,
+    },
+  },
+  "&.MuiRadio-colorSecondary": {
+    fill: theme.palette.secondary.main,
+    stroke: theme.palette.base?.standardInputLine,
+    "&.Mui-checked": {
+      stroke: theme.palette.secondary.dark,
+      color: theme.palette.secondary.dark,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.state.disabledContent,
+      stroke: theme.palette.base?.state.disabledContent,
+    },
+  },
+  colorSecondary: {
+    fill: theme.palette.secondary?.main,
+    "&.Mui-checked": {
+      color: theme.palette.secondary?.dark,
+      stroke: theme.palette.secondary?.dark,
+    },
+    "&.Mui-disabled": {
+      fill: theme.palette.base?.text.disabled,
+      stroke: theme.palette.base?.text.disabled,
+    },
+  },
+});

package/src/components/StatusLed/StatusLed.tsx

@@ -75,3 +75,4 @@ const StatusLed: React.FC<StatusLedProps> = ({
 };
 
 export default StatusLed;
+export type { StatusLedProps };

package/src/components/Switch/Switch.figma.tsx

@@ -0,0 +1,120 @@
+/**
+ * Figma Code Connect Configuration for Switch Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6564-39128
+ * 
+ * Figma Properties:
+ * - size (medium-40px, small-32px)
+ * - checked (true, false)
+ * - disabled (true, false)
+ * - color (primary, secondary, base, error, warning, success, info)
+ * - state (enabled, hover, focus) - visual state, not a prop
+ * - labelPosition (end, start, top, bottom)
+ * - showLabel (true, false)
+ * - ✏️ Text (text label with layer name "Label")
+ */
+
+import figma from "@figma/code-connect";
+import Switch from "./Switch";
+import { FormControlLabel } from "@mui/material";
+
+figma.connect(
+  Switch,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6564-39128",
+  {
+    props: {
+      /**
+       * SIZE MAPPING
+       * Maps Figma's "size" property to React's "size" prop
+       * Figma: medium (40px), small (32px)
+       */
+      size: figma.enum("size", {
+        "medium-40px": "medium",
+        "small-32px": "small",
+        // Handle cases where Figma might show just the size name
+        medium: "medium",
+        small: "small",
+      }),
+
+      /**
+       * CHECKED STATE
+       * Maps Figma's "checked" boolean to React's "checked" prop
+       */
+      checked: figma.boolean("checked"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to React's "disabled" prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * COLOR MAPPING
+       * Maps Figma's "color" property to React's "color" prop
+       */
+      color: figma.enum("color", {
+        primary: "primary",
+        secondary: "secondary",
+        base: "base",
+        error: "error",
+        warning: "warning",
+        success: "success",
+        info: "info",
+      }),
+
+      /**
+       * LABEL POSITION
+       * Maps Figma's "labelPosition" property
+       * Used with FormControlLabel to position the label
+       */
+      labelPosition: figma.enum("labelPosition", {
+        end: "end",
+        start: "start",
+        top: "top",
+        bottom: "bottom",
+      }),
+
+      /**
+       * LABEL VISIBILITY
+       * Maps Figma's "showLabel" boolean property
+       * When true, shows the label; when false, hides it
+       */
+      showLabel: figma.boolean("showLabel"),
+
+      /**
+       * LABEL TEXT CONTENT
+       * Maps text property "✏️ Text" from the "Label" layer
+       * The text property must be surfaced from the "Label" layer
+       */
+      label: figma.string("✏️ Text"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how Switch should be used, optionally with FormControlLabel for labels
+     */
+    example: ({ size, checked, disabled, color, labelPosition, showLabel, label }) => {
+      const switchComponent = (
+        <Switch
+          size={size}
+          checked={checked}
+          disabled={disabled}
+          color={color}
+        />
+      );
+
+      // If label should be shown, wrap with FormControlLabel
+      if (showLabel && label) {
+        return (
+          <FormControlLabel
+            control={switchComponent}
+            label={label}
+            labelPlacement={labelPosition || "end"}
+          />
+        );
+      }
+
+      return switchComponent;
+    },
+  }
+);

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,479 @@
+import { forwardRef, Ref } from "react";
+
+import {
+  alpha,
+  Switch as MuiSwitch,
+  SwitchProps as MuiSwitchProps,
+} from "@mui/material";
+
+import { styled } from "@mui/material/styles";
+import { TouchRippleActions } from "@mui/material/ButtonBase/TouchRipple";
+
+import {
+  activeShadowAlpha,
+  baseMargin,
+  basePadding,
+  baseTransitionDuration,
+  baseShadowVariant,
+  TrackWidthMap,
+  TrackHeightMap,
+  ThumbSizeMap,
+  ShadowRadiusMap,
+} from "../utils/SwitchUtils";
+import fleetPalette from "../theme/constants/colors";
+
+export interface SwitchProps extends Omit<MuiSwitchProps, "color"> {
+  /**
+   *
+   * Colors that make sense for this component
+   * @default primary
+   */
+  color?:
+    | "base"
+    | "primary"
+    | "secondary"
+    | "warning"
+    | "success"
+    | "info"
+    | "error";
+  /**
+   *
+   * A ref that points to the TouchRipple element.
+   */
+  touchRippleRef?: Ref<TouchRippleActions>;
+}
+
+// overriding MUI switch style to match Air switch style
+const StyledMuiSwitch = styled(MuiSwitch)<MuiSwitchProps>(({ theme }) => ({
+  "&.MuiSwitch-root": {
+    "& .MuiSwitch-switchBase": {
+      "& + .MuiSwitch-track": {
+        backgroundColor: theme.palette.base?.state.disabledContent,
+        borderRadius: 10,
+        opacity: 1,
+      },
+
+      "& .MuiSwitch-thumb, & > svg": {
+        borderRadius: "100%",
+        boxShadow: theme.shadows[baseShadowVariant],
+        boxSizing: "border-box",
+      },
+
+      "& .MuiSwitch-thumb, & > svg, & + .MuiSwitch-track": {
+        transition: theme.transitions.create(["background-color", "color"], {
+          duration: theme.transitions.duration.standard,
+          easing: theme.transitions.easing.easeInOut,
+        }),
+      },
+
+      "& > svg": {
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.action.disabled,
+      },
+
+      //Common white token applied to Checked Thumb for all colors
+      "&.Mui-checked .MuiSwitch-thumb": {
+        backgroundColor: theme.palette.base?.common.white,
+      },
+
+      "&.Mui-checked:not(.Mui-disabled)": {
+        "&.MuiSwitch-colorDefault": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.primary.main,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+          },
+
+          color: theme.palette.primary.main,
+        },
+
+        "&.MuiSwitch-colorError": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.error.main,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.error.main,
+            color: theme.palette.error.contrastText,
+          },
+
+          color: theme.palette.error.main,
+        },
+        "&.MuiSwitch-colorBase": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.base?.state.active,
+            opacity: 1,
+          },
+
+          "&:hover, &.Mui-focusVisible": {
+            "&.MuiSwitch-colorBase": {
+              "& .MuiSwitch-thumb, & > svg": {
+                boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                  fleetPalette.base?.dark,
+                  activeShadowAlpha
+                )},
+                ${theme.shadows[baseShadowVariant]}`,
+              },
+            },
+          },
+          "&.Mui-disabled": {
+            "&.MuiSwitch-colorBase": {
+              "& + .MuiSwitch-track": {
+                backgroundColor: theme.palette.base?.state.disabledBackground,
+                opacity: 1,
+              },
+              "& .MuiSwitch-thumb": {
+                backgroundColor: theme.palette.base?.background.paper,
+              },
+            },
+          },
+        },
+
+        "&.MuiSwitch-colorInfo": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.info.main,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.info.main,
+            color: theme.palette.info.contrastText,
+          },
+
+          color: theme.palette.info.main,
+        },
+
+        "&.MuiSwitch-colorPrimary": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.primary.main,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+          },
+
+          color: theme.palette.primary.main,
+        },
+
+        "&.MuiSwitch-colorSecondary": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.secondary.light,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.secondary.main,
+            color: theme.palette.secondary.contrastText,
+          },
+
+          color: theme.palette.secondary.main,
+        },
+
+        "&.MuiSwitch-colorSuccess": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.success.main,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.success.main,
+            color: theme.palette.success.contrastText,
+          },
+
+          color: theme.palette.success.main,
+        },
+
+        "&.MuiSwitch-colorWarning": {
+          "& + .MuiSwitch-track": {
+            backgroundColor: theme.palette.warning.main,
+            opacity: 1,
+          },
+
+          "& > svg": {
+            backgroundColor: theme.palette.warning.main,
+            color: theme.palette.warning.contrastText,
+          },
+
+          color: theme.palette.warning.main,
+        },
+      },
+
+      "&.Mui-disabled": {
+        "& + .MuiSwitch-track": {
+          backgroundColor: theme.palette.action.disabledBackground,
+          opacity: 1,
+        },
+
+        "& .MuiSwitch-thumb": {
+          color: theme.palette.background.default,
+        },
+
+        "& > svg": {
+          backgroundColor: theme.palette.background.default,
+          color: theme.palette.action.disabled,
+        },
+      },
+
+      margin: baseMargin,
+      padding: basePadding,
+      transitionDuration: baseTransitionDuration,
+    },
+    overflow: "visible",
+    padding: basePadding,
+  },
+
+  "&.MuiSwitch-sizeMedium": {
+    "& .MuiSwitch-switchBase": {
+      "&.Mui-checked": {
+        "&:hover, &.Mui-focusVisible": {
+          "&.MuiSwitch-colorDefault": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.primary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorError": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.error.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorInfo": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.info.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorPrimary": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.primary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorSecondary": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.secondary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorSuccess": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.success.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorWarning": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${alpha(
+                theme.palette.warning.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+        },
+
+        transform: "translateX(18px)",
+      },
+
+      "&:hover .MuiSwitch-thumb, &.Mui-focusVisible .MuiSwitch-thumb, &:hover > svg, &.Mui-focusVisible > svg":
+        {
+          boxShadow: `
+                0 0 0 ${ShadowRadiusMap.medium} ${theme.palette.action.hover},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+        },
+    },
+
+    "& .MuiSwitch-thumb, & svg": {
+      height: ThumbSizeMap.medium,
+      width: ThumbSizeMap.medium,
+    },
+
+    height: TrackHeightMap.medium,
+    width: TrackWidthMap.medium,
+  },
+
+  "&.MuiSwitch-sizeSmall": {
+    "& .MuiSwitch-switchBase": {
+      "&.Mui-checked": {
+        "&:hover, &.Mui-focusVisible": {
+          "&.MuiSwitch-colorDefault": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.primary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorError": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.error.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+          "&.MuiSwitch-colorBase": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.secondary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorInfo": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.info.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorPrimary": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.primary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorSecondary": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.secondary.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorSuccess": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.success.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+
+          "&.MuiSwitch-colorWarning": {
+            "& .MuiSwitch-thumb, & > svg": {
+              boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${alpha(
+                theme.palette.warning.main,
+                activeShadowAlpha
+              )},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+            },
+          },
+        },
+
+        transform: "translateX(16px)",
+      },
+
+      "&:hover .MuiSwitch-thumb, &.Mui-focusVisible .MuiSwitch-thumb, &:hover > svg, &.Mui-focusVisible > svg":
+        {
+          boxShadow: `
+                0 0 0 ${ShadowRadiusMap.small} ${theme.palette.action.hover},
+                ${theme.shadows[baseShadowVariant]}
+              `,
+        },
+    },
+
+    "& .MuiSwitch-thumb, & svg": {
+      height: ThumbSizeMap.small,
+      width: ThumbSizeMap.small,
+    },
+
+    height: TrackHeightMap.small,
+    width: TrackWidthMap.small,
+  },
+}));
+
+/** The Switch component turns the state of a single setting on or off.
+ *
+ * `import Switch from '@carrier-io/air-react/Switch'`;
+ */
+
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ color = "primary", ...otherProps }, ref) => {
+    return <StyledMuiSwitch color={color as any} {...otherProps} ref={ref} />;
+  }
+);
+
+Switch.displayName = "Switch";
+
+export default Switch;
+export type { SwitchProps };

package/src/components/Switch/index.ts

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