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

package/package.json

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

package/src/components/Backdrop/Backdrop.figma.tsx

@@ -0,0 +1,30 @@
+/**
+ * Figma Code Connect Configuration for Backdrop Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6643-52207
+ * 
+ * Note: This component has no props in design - it's a simple backdrop overlay component
+ */
+
+import figma from "@figma/code-connect";
+import Backdrop from "./Backdrop";
+
+figma.connect(
+  Backdrop,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6643-52207",
+  {
+    props: {
+      // No props in design - Backdrop is used as-is
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how Backdrop should be used
+     */
+    example: () => (
+      <Backdrop open={true}>
+        {/* Content goes here */}
+      </Backdrop>
+    ),
+  }
+);

package/src/components/Backdrop/Backdrop.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from "react";
+
+import {
+  Backdrop as MuiBackdrop,
+  BackdropProps as MuiBackdropProps,
+  CSSObject,
+} from "@mui/material";
+import { getSxStyles } from "../utils/styles";
+
+export interface BackdropProps extends MuiBackdropProps {}
+
+/** The Backdrop component signals a state change and provides emphasis to contextual or actionable content.
+ *
+ * `import Backdrop from '@carrier-io/air-react/Backdrop'`
+ */
+
+const Backdrop = forwardRef<unknown, BackdropProps>((props, ref) => {
+  return (
+    <MuiBackdrop
+      {...props}
+      sx={(theme) =>
+        ({
+          backgroundColor: theme.palette.base?.backdropOverlay,
+          ...getSxStyles(theme, props.sx),
+        } as CSSObject)
+      }
+      ref={ref}
+    />
+  );
+});
+
+Backdrop.displayName = "Backdrop";
+
+export default Backdrop;
+export type { BackdropProps };

package/src/components/Backdrop/index.ts

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

package/src/components/Checkbox/Checkbox.figma.tsx

@@ -0,0 +1,128 @@
+/**
+ * Figma Code Connect Configuration for Checkbox Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6543-43052
+ * 
+ * Figma Properties:
+ * - size (medium-40px, small-32px)
+ * - checked (true, false)
+ * - indeterminate (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 Checkbox from "./Checkbox";
+import { FormControlLabel } from "@mui/material";
+
+figma.connect(
+  Checkbox,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6543-43052",
+  {
+    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"),
+
+      /**
+       * INDETERMINATE STATE
+       * Maps Figma's "indeterminate" boolean to React's "indeterminate" prop
+       */
+      indeterminate: figma.boolean("indeterminate"),
+
+      /**
+       * 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 Checkbox should be used, optionally with FormControlLabel for labels
+     */
+    example: ({ size, checked, indeterminate, disabled, color, labelPosition, showLabel, label }) => {
+      const checkbox = (
+        <Checkbox
+          size={size}
+          checked={checked}
+          indeterminate={indeterminate}
+          disabled={disabled}
+          color={color}
+        />
+      );
+
+      // If label should be shown, wrap with FormControlLabel
+      if (showLabel && label) {
+        return (
+          <FormControlLabel
+            control={checkbox}
+            label={label}
+            labelPlacement={labelPosition || "end"}
+          />
+        );
+      }
+
+      return checkbox;
+    },
+  }
+);

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,134 @@
+import { forwardRef, Ref } from "react";
+
+import MuiCheckbox, {
+  CheckboxProps as MuiCheckboxProps,
+} from "@mui/material/Checkbox";
+import { TouchRippleActions } from "@mui/material/ButtonBase/TouchRipple";
+import { CSSObject, Theme, useTheme } from "@mui/material/styles";
+
+import { baseCheckboxSx, disableHoverSx } from "./styles";
+import { getSxStyles } from "../utils/styles";
+
+export interface CheckboxProps extends Omit<MuiCheckboxProps, "color"> {
+  /**
+   *
+   * The color of the component. It supports both default and custom theme colors, which can be added as shown in the <a href="https://mui.com/material-ui/customization/palette/#adding-new-colors">palette customization guide</a>.
+   * @default primary
+   */
+  color?:
+    | "base"
+    | "primary"
+    | "secondary"
+    | "warning"
+    | "success"
+    | "info"
+    | "error";
+  /**
+   *
+   * A ref that points to the TouchRipple element.
+   */
+  touchRippleRef?: Ref<TouchRippleActions>;
+
+  disableHover?: boolean;
+}
+
+const defaultUncheckedCheckboxIcon = (theme: Theme) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="4"
+      y="4"
+      width="16"
+      height="16"
+      rx="3"
+      stroke={theme.palette?.base?.state.active}
+      strokeWidth="2"
+    />
+  </svg>
+);
+
+const defaultCheckedCheckboxIcon = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7 3C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7ZM16.7388 9.67396C17.111 9.26595 17.082 8.63345 16.674 8.26123C16.266 7.88902 15.6335 7.91803 15.2612 8.32604L10.4994 13.5457L8.71334 11.7277C8.32628 11.3338 7.69314 11.3282 7.29918 11.7152C6.90521 12.1023 6.89961 12.7354 7.28666 13.1294L9.81298 15.7008C10.0055 15.8968 10.2702 16.0049 10.5448 15.9998C10.8195 15.9947 11.0799 15.8769 11.2651 15.674L16.7388 9.67396Z"
+    />
+  </svg>
+);
+
+const defaultIndeterminateCheckboxIcon = (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7 3C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H8Z"
+    />
+  </svg>
+);
+
+/** The Checkbox component allows users to select one or more items from a set or list.
+ *
+ * // Default import
+ * import Checkbox from '@carrier-io/air-react/Checkbox'
+ *
+ * // Named import
+ * import { Checkbox } from '@carrier-io/air-react'
+ */
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ color = "primary", disableHover = false, ...rest }, ref) => {
+    const theme = useTheme();
+    return (
+      <MuiCheckbox
+        color={color as any}
+        icon={defaultUncheckedCheckboxIcon(theme)}
+        checkedIcon={defaultCheckedCheckboxIcon}
+        indeterminateIcon={defaultIndeterminateCheckboxIcon}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, rest.sx),
+            p: 1,
+            ...(rest.checked &&
+              rest.disabled && {
+                svg: { fill: () => theme.palette.base?.main },
+              }),
+            ...(rest.disabled === true && {
+              svg: {
+                rect: { stroke: () => theme.palette.base?.text.disabled },
+              },
+            }),
+            ...(rest.size === "small" && {
+              svg: { width: "16px", height: "16px" },
+            }),
+            ...(disableHover && disableHoverSx),
+            ...baseCheckboxSx,
+          } as CSSObject)
+        }
+        disableRipple={true}
+        ref={ref}
+        {...rest}
+      />
+    );
+  }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;
+export type { CheckboxProps };

package/src/components/Checkbox/index.ts

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

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,111 @@
+import { Theme } from "@mui/material";
+
+export const disableHoverSx = {
+  "&:hover": {
+    backgroundColor: "transparent",
+  },
+  "&.Mui-checked:hover": {
+    backgroundColor: "transparent",
+  },
+};
+
+export const baseCheckboxSx = {
+  "&:hover": {
+    backgroundColor: (theme: Theme) =>
+      theme.palette.base?.state.disabledBackground,
+  },
+  "&.Mui-checked": {
+    fill: (theme: Theme) => theme.palette.primary?.main,
+
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.primary?.outlinedHoverBackground,
+    },
+  },
+  "&.MuiCheckbox-colorPrimary": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.primary?.main,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.primary?.outlinedHoverBackground,
+    },
+  },
+  "&.MuiCheckbox-colorBase": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.base?.dark,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) => theme.palette.base?.state.hover,
+    },
+  },
+  "&.Mui-disabled": {
+    fill: (theme: Theme) => theme.palette.base?.text.disabled,
+  },
+  "&.MuiCheckbox-colorSecondary": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.secondary?.dark,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.secondary?.outlinedHoverBackground,
+    },
+  },
+  "&.MuiCheckbox-colorWarning": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.warning?.main,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.warning?.outlinedHoverBackground,
+    },
+  },
+  "&.MuiCheckbox-colorSuccess": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.success?.main,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.success?.outlinedHoverBackground,
+    },
+  },
+  "&.MuiCheckbox-colorInfo": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.info?.main,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.info?.outlinedHoverBackground,
+    },
+  },
+  "&.MuiCheckbox-colorError": {
+    "&.Mui-checked": {
+      fill: (theme: Theme) => theme.palette.error?.main,
+    },
+    "&.Mui-disabled": {
+      fill: (theme: Theme) => theme.palette.base?.text.disabled,
+    },
+    "&:hover": {
+      backgroundColor: (theme: Theme) =>
+        theme.palette.error?.outlinedHoverBackground,
+    },
+  },
+};

package/src/components/Radio/Radio.figma.tsx

@@ -0,0 +1,120 @@
+/**
+ * Figma Code Connect Configuration for Radio Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6558-39273
+ * 
+ * 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 Radio from "./Radio";
+import { FormControlLabel } from "@mui/material";
+
+figma.connect(
+  Radio,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6558-39273",
+  {
+    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 Radio should be used, optionally with FormControlLabel for labels
+     */
+    example: ({ size, checked, disabled, color, labelPosition, showLabel, label }) => {
+      const radio = (
+        <Radio
+          size={size}
+          checked={checked}
+          disabled={disabled}
+          color={color}
+        />
+      );
+
+      // If label should be shown, wrap with FormControlLabel
+      if (showLabel && label) {
+        return (
+          <FormControlLabel
+            control={radio}
+            label={label}
+            labelPlacement={labelPosition || "end"}
+          />
+        );
+      }
+
+      return radio;
+    },
+  }
+);

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,97 @@
+import { forwardRef } from "react";
+
+import MuiRadio, { RadioProps as MuiRadioProps } from "@mui/material/Radio";
+import { CSSObject, Theme, useTheme } from "@mui/material/styles";
+
+import { baseRadioSx } from "./styles";
+import { getSxStyles } from "../utils/styles";
+
+export interface RadioProps extends Omit<MuiRadioProps, "color"> {
+  /**
+   *
+   * Colors that make sense for this component
+   * @default primary
+   */
+  color?:
+    | "base"
+    | "primary"
+    | "secondary"
+    | "warning"
+    | "success"
+    | "info"
+    | "error";
+  disableHover?: boolean;
+}
+
+const defaultRadioIcon = (size: RadioProps["size"], theme: Theme) => (
+  <svg
+    width={size === "small" ? "20" : "24"}
+    height={size === "small" ? "20" : "24"}
+    viewBox="-1 -1 20 20"
+    fill="none"
+    stroke={theme.palette?.base?.state.active ?? "#666666"}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
+      fill={theme.palette?.base?.state.active ?? "#666666"}
+    />
+  </svg>
+);
+
+const defaultCheckedRadioIcon = (size: RadioProps["size"]) => (
+  <svg
+    width={size === "small" ? "20" : "24"}
+    height={size === "small" ? "20" : "24"}
+    viewBox="-1 -1 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9 12C10.6569 12 12 10.6569 12 9C12 7.34315 10.6569 6 9 6C7.34315 6 6 7.34315 6 9C6 10.6569 7.34315 12 9 12ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
+    />
+  </svg>
+);
+
+/** The Radio component allows users to make a mutually exclusive choice from a set or list.
+ *
+ * // Default import
+ * import Radio from '@carrier-io/air-react/Radio'
+ *
+ * // Named import
+ * import { Radio } from '@carrier-io/air-react'
+ */
+
+const Radio = forwardRef<HTMLButtonElement, RadioProps>(
+  ({ sx, disableHover = true, color = "primary", ...rest }, ref) => {
+    const theme = useTheme();
+    const radioSX = (theme: Theme) =>
+      ({
+        ...getSxStyles(theme, sx),
+        ...(rest.size === "small"
+          ? { height: 32, width: 32 }
+          : { height: 40, width: 40 }),
+        ...baseRadioSx(theme, disableHover),
+      } as CSSObject);
+
+    return (
+      <MuiRadio
+        color={color as any}
+        disableRipple={true}
+        checkedIcon={rest.checkedIcon ?? defaultCheckedRadioIcon(rest.size)}
+        icon={rest.icon ?? defaultRadioIcon(rest.size, theme)}
+        {...rest}
+        sx={radioSX}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Radio.displayName = "Radio";
+
+export default Radio;
+export type { RadioProps };

package/src/components/Radio/index.ts

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