@carrier-dpx/air-react-library 0.7.26 → 0.7.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carrier-dpx/air-react-library",
3
- "version": "0.7.26",
3
+ "version": "0.7.27",
4
4
  "description": "Air web React component library for Figma Make",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Figma Code Connect Configuration for AccountCircleIcon
3
+ *
4
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=56-325
5
+ */
6
+
7
+ import figma from "@figma/code-connect";
8
+ import Icon from "../../Icon";
9
+ import { AccountCircleIcon } from "./AccountCircleIcon";
10
+
11
+ figma.connect(
12
+ AccountCircleIcon,
13
+ "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=56-325",
14
+ {
15
+ props: {
16
+ /**
17
+ * STYLE/VARIANT MAPPING
18
+ * Maps Figma's "Style" property to React's "variant" prop
19
+ * Figma: Style="Outlined" → React: variant="outlined"
20
+ * Figma: Style="Filled" → React: variant="filled"
21
+ */
22
+ variant: figma.enum("Style", {
23
+ Outlined: "outlined",
24
+ Filled: "filled",
25
+ }),
26
+ },
27
+ example: ({ variant }) => (
28
+ <Icon fontSize="medium">
29
+ <AccountCircleIcon variant={variant} />
30
+ </Icon>
31
+ ),
32
+ }
33
+ );
@@ -0,0 +1,20 @@
1
+ import { FC, SVGProps } from "react";
2
+
3
+ export interface AccountCircleIconProps extends SVGProps<SVGSVGElement> {
4
+ variant?: "outlined" | "filled";
5
+ }
6
+
7
+ export const AccountCircleIcon: FC<AccountCircleIconProps> = ({ variant = "outlined", style, ...props }) => {
8
+ return (
9
+ <svg
10
+ viewBox="0 0 24 24"
11
+ fill="none"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ style={{ width: "1em", height: "1em", display: "block", ...style }}
14
+ {...props}
15
+ >
16
+ <path fillRule="evenodd" clipRule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="currentColor"/>
17
+ <path fillRule="evenodd" clipRule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor"/>
18
+ </svg>
19
+ );
20
+ };
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Figma Code Connect Configuration for ChevronLeftIcon
3
+ *
4
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=12-149
5
+ */
6
+
7
+ import figma from "@figma/code-connect";
8
+ import Icon from "../../Icon";
9
+ import { ChevronLeftIcon } from "./ChevronLeftIcon";
10
+
11
+ figma.connect(
12
+ ChevronLeftIcon,
13
+ "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=12-149",
14
+ {
15
+ props: {
16
+ /**
17
+ * STYLE/VARIANT MAPPING
18
+ * Maps Figma's "Style" property to React's "variant" prop
19
+ * Figma: Style="Outlined" → React: variant="outlined"
20
+ * Figma: Style="Filled" → React: variant="filled"
21
+ */
22
+ variant: figma.enum("Style", {
23
+ Outlined: "outlined",
24
+ Filled: "filled",
25
+ }),
26
+ },
27
+ example: ({ variant }) => (
28
+ <Icon fontSize="medium">
29
+ <ChevronLeftIcon variant={variant} />
30
+ </Icon>
31
+ ),
32
+ }
33
+ );
@@ -0,0 +1,19 @@
1
+ import { FC, SVGProps } from "react";
2
+
3
+ export interface ChevronLeftIconProps extends SVGProps<SVGSVGElement> {
4
+ variant?: "outlined" | "filled";
5
+ }
6
+
7
+ export const ChevronLeftIcon: FC<ChevronLeftIconProps> = ({ variant = "outlined", style, ...props }) => {
8
+ return (
9
+ <svg
10
+ viewBox="0 0 24 24"
11
+ fill="none"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ style={{ width: "1em", height: "1em", display: "block", ...style }}
14
+ {...props}
15
+ >
16
+ <path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="currentColor"/>
17
+ </svg>
18
+ );
19
+ };
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Figma Code Connect Configuration for NotificationsIcon
3
+ *
4
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=47-218
5
+ */
6
+
7
+ import figma from "@figma/code-connect";
8
+ import Icon from "../../Icon";
9
+ import { NotificationsIcon } from "./NotificationsIcon";
10
+
11
+ figma.connect(
12
+ NotificationsIcon,
13
+ "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=47-218",
14
+ {
15
+ props: {
16
+ /**
17
+ * STYLE/VARIANT MAPPING
18
+ * Maps Figma's "Style" property to React's "variant" prop
19
+ * Figma: Style="Outlined" → React: variant="outlined"
20
+ * Figma: Style="Filled" → React: variant="filled"
21
+ */
22
+ variant: figma.enum("Style", {
23
+ Outlined: "outlined",
24
+ Filled: "filled",
25
+ }),
26
+ },
27
+ example: ({ variant }) => (
28
+ <Icon fontSize="medium">
29
+ <NotificationsIcon variant={variant} />
30
+ </Icon>
31
+ ),
32
+ }
33
+ );
@@ -0,0 +1,20 @@
1
+ import { FC, SVGProps } from "react";
2
+
3
+ export interface NotificationsIconProps extends SVGProps<SVGSVGElement> {
4
+ variant?: "outlined" | "filled";
5
+ }
6
+
7
+ export const NotificationsIcon: FC<NotificationsIconProps> = ({ variant = "outlined", style, ...props }) => {
8
+ return (
9
+ <svg
10
+ viewBox="0 0 24 24"
11
+ fill="none"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ style={{ width: "1em", height: "1em", display: "block", ...style }}
14
+ {...props}
15
+ >
16
+ <path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="currentColor"/>
17
+ <path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="currentColor"/>
18
+ </svg>
19
+ );
20
+ };
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="black"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="black"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="black"/>
3
+ </svg>
@@ -61,6 +61,26 @@ const MoreVerticalSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props })
61
61
  </svg>
62
62
  );
63
63
 
64
+ const NotificationsSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
65
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
66
+ <path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="currentColor"/>
67
+ <path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="currentColor"/>
68
+ </svg>
69
+ );
70
+
71
+ const AccountCircleSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
72
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
73
+ <path fillRule="evenodd" clipRule="evenodd" d="M12 6C13.93 6 15.5 7.57 15.5 9.5C15.5 11.43 13.93 13 12 13C10.07 13 8.5 11.43 8.5 9.5C8.5 7.57 10.07 6 12 6ZM12 8C11.17 8 10.5 8.67 10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8Z" fill="currentColor"/>
74
+ <path fillRule="evenodd" clipRule="evenodd" d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 17C10.26 17 8.65961 17.56 7.34961 18.5C8.65961 19.44 10.26 20 12 20C13.74 20 15.3404 19.44 16.6504 18.5C15.3404 17.56 13.74 17 12 17ZM12 4C7.58 4 4 7.58 4 12C4 13.95 4.70035 15.7301 5.86035 17.1201C7.55033 15.8002 9.68007 15 12 15C14.3199 15 16.4497 15.8002 18.1396 17.1201C19.2996 15.7301 20 13.95 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor"/>
75
+ </svg>
76
+ );
77
+
78
+ const ChevronLeftSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
79
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
80
+ <path d="M14.2998 6.4248C14.5831 6.4248 14.8167 6.51686 15 6.7002C15.1833 6.88352 15.2754 7.1171 15.2754 7.40039C15.2753 7.68345 15.1831 7.91638 15 8.09961L11.0996 12L15 15.9004C15.1831 16.0836 15.2753 16.3166 15.2754 16.5996C15.2754 16.8829 15.1832 17.1165 15 17.2998C14.8167 17.4831 14.5831 17.5752 14.2998 17.5752C14.0165 17.5752 13.7829 17.4831 13.5996 17.2998L9 12.7002C8.9 12.6002 8.82878 12.4917 8.78711 12.375C8.74548 12.2584 8.72461 12.1333 8.72461 12C8.72461 11.8667 8.74547 11.7416 8.78711 11.625C8.82878 11.5083 8.9 11.3998 9 11.2998L13.5996 6.7002C13.7829 6.5169 14.0165 6.42484 14.2998 6.4248Z" fill="currentColor"/>
81
+ </svg>
82
+ );
83
+
64
84
  // WarningTriangle SVG (previously WarningIcon)
65
85
 
66
86
  export interface IconInfo {
@@ -100,6 +120,21 @@ export const iconRegistry: Record<string, IconInfo> = {
100
120
  component: MoreVerticalSvg,
101
121
  variant: "outlined",
102
122
  },
123
+ notifications: {
124
+ name: "notifications",
125
+ component: NotificationsSvg,
126
+ variant: "outlined",
127
+ },
128
+ accountcircle: {
129
+ name: "accountcircle",
130
+ component: AccountCircleSvg,
131
+ variant: "outlined",
132
+ },
133
+ chevronleft: {
134
+ name: "chevronleft",
135
+ component: ChevronLeftSvg,
136
+ variant: "outlined",
137
+ },
103
138
  };
104
139
 
105
140
  /**
@@ -24,3 +24,12 @@ export type { MenuIconProps } from "./MenuIcon";
24
24
 
25
25
  export { MoreVerticalIcon } from "./MoreVerticalIcon";
26
26
  export type { MoreVerticalIconProps } from "./MoreVerticalIcon";
27
+
28
+ export { NotificationsIcon } from "./NotificationsIcon";
29
+ export type { NotificationsIconProps } from "./NotificationsIcon";
30
+
31
+ export { AccountCircleIcon } from "./AccountCircleIcon";
32
+ export type { AccountCircleIconProps } from "./AccountCircleIcon";
33
+
34
+ export { ChevronLeftIcon } from "./ChevronLeftIcon";
35
+ export type { ChevronLeftIconProps } from "./ChevronLeftIcon";
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14 20C14 20.55 13.8038 21.0204 13.4121 21.4121C13.0204 21.8038 12.55 22 12 22C11.45 22 10.9796 21.8038 10.5879 21.4121C10.1962 21.0204 10 20.55 10 20H14Z" fill="black"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2002C14.8333 4.53353 15.9167 5.23751 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H19C19.2833 17 19.5212 17.0954 19.7129 17.2871C19.9046 17.4788 20 17.7167 20 18C20 18.2833 19.9046 18.5212 19.7129 18.7129C19.5212 18.9046 19.2833 19 19 19H5C4.71667 19 4.47878 18.9046 4.28711 18.7129C4.09544 18.5212 4 18.2833 4 18C4 17.7167 4.09544 17.4788 4.28711 17.2871C4.47878 17.0954 4.71667 17 5 17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08332 5.23751 9.16669 4.53353 10.5 4.2002V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2ZM12 6C10.9 6 9.95814 6.39147 9.1748 7.1748C8.39147 7.95814 8 8.9 8 10V17H16V10C16 8.9 15.6085 7.95814 14.8252 7.1748C14.0419 6.39147 13.1 6 12 6Z" fill="black"/>
4
+ </svg>
package/src/index.ts CHANGED
@@ -42,6 +42,9 @@ export {
42
42
  WarningTriangle,
43
43
  MenuIcon,
44
44
  MoreVerticalIcon,
45
+ NotificationsIcon,
46
+ AccountCircleIcon,
47
+ ChevronLeftIcon,
45
48
  SvgIcon,
46
49
  iconRegistry,
47
50
  getIcon,
@@ -54,6 +57,9 @@ export type {
54
57
  WarningTriangleProps,
55
58
  MenuIconProps,
56
59
  MoreVerticalIconProps,
60
+ NotificationsIconProps,
61
+ AccountCircleIconProps,
62
+ ChevronLeftIconProps,
57
63
  SvgIconProps,
58
64
  IconInfo,
59
65
  } from "./components/Icon/icons/demo";