@adam-milo/icons 1.0.1 → 1.0.6

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.
Files changed (6) hide show
  1. package/README.md +2 -0
  2. package/dist/index.d.mts +71 -2
  3. package/dist/index.d.ts +71 -2
  4. package/dist/index.js +66 -2
  5. package/dist/index.mjs +64 -2
  6. package/package.json +10 -10
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  Icon components for the Adam Milo Design System. Built on top of [Radix UI Icons](https://www.radix-ui.com/icons).
4
4
 
5
+ > **Latest Update**: Enhanced accessibility support and improved TypeScript definitions.
6
+
5
7
  ## Installation
6
8
 
7
9
  ```bash
package/dist/index.d.mts CHANGED
@@ -6,7 +6,7 @@ export * from '@radix-ui/react-icons';
6
6
  type IconName = keyof typeof RadixIcons;
7
7
  declare const availableIcons: IconName[];
8
8
  type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
9
- type IconColor = 'text' | 'action' | 'clickable' | 'popup' | 'error' | 'toggle' | 'secondary' | 'system-text' | 'icon-secondary' | 'card';
9
+ type IconColor = 'text' | 'action' | 'clickable' | 'popup' | 'error' | 'toggle' | 'secondary' | 'system-text' | 'icon-secondary' | 'card' | 'teal';
10
10
  interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
11
11
  /**
12
12
  * The name of the icon from Radix UI icons
@@ -61,5 +61,74 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
61
61
  * ```
62
62
  */
63
63
  declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
64
+ /**
65
+ * Figma to Radix icon mapping
66
+ * Maps Figma icon names (from design specs) to Radix UI icon names
67
+ *
68
+ * Based on Figma design: node-id=40239-8043
69
+ */
70
+ declare const figmaIconMapping: {
71
+ readonly Trash: "TrashIcon";
72
+ readonly Delete: "TrashIcon";
73
+ readonly Add: "PlusIcon";
74
+ readonly Plus: "PlusIcon";
75
+ readonly Close: "Cross2Icon";
76
+ readonly X: "Cross2Icon";
77
+ readonly Edit: "Pencil1Icon";
78
+ readonly Pencil: "Pencil1Icon";
79
+ readonly Copy: "CopyIcon";
80
+ readonly Download: "DownloadIcon";
81
+ readonly Upload: "UploadIcon";
82
+ readonly Share: "Share1Icon";
83
+ readonly Back: "ChevronLeftIcon";
84
+ readonly Forward: "ChevronRightIcon";
85
+ readonly Up: "ChevronUpIcon";
86
+ readonly Down: "ChevronDownIcon";
87
+ readonly Home: "HomeIcon";
88
+ readonly Menu: "HamburgerMenuIcon";
89
+ readonly ExternalLink: "ExternalLinkIcon";
90
+ readonly Date: "CalendarIcon";
91
+ readonly Calendar: "CalendarIcon";
92
+ readonly Show: "EyeOpenIcon";
93
+ readonly Hide: "EyeNoneIcon";
94
+ readonly EyeOpen: "EyeOpenIcon";
95
+ readonly EyeClosed: "EyeNoneIcon";
96
+ readonly Search: "MagnifyingGlassIcon";
97
+ readonly Check: "CheckIcon";
98
+ readonly CheckCircle: "CheckCircledIcon";
99
+ readonly File: "FileIcon";
100
+ readonly FileText: "FileTextIcon";
101
+ readonly Document: "FileTextIcon";
102
+ readonly Folder: "FolderIcon";
103
+ readonly Settings: "GearIcon";
104
+ readonly Gear: "GearIcon";
105
+ readonly User: "PersonIcon";
106
+ readonly Person: "PersonIcon";
107
+ readonly Tooltip: "InfoCircledIcon";
108
+ readonly Info: "InfoCircledIcon";
109
+ readonly Help: "QuestionMarkCircledIcon";
110
+ readonly Question: "QuestionMarkCircledIcon";
111
+ readonly Warning: "ExclamationTriangleIcon";
112
+ readonly Error: "CrossCircledIcon";
113
+ readonly Success: "CheckCircledIcon";
114
+ readonly Email: "EnvelopeClosedIcon";
115
+ readonly Envelope: "EnvelopeClosedIcon";
116
+ readonly Bell: "BellIcon";
117
+ readonly Notification: "BellIcon";
118
+ };
119
+ /**
120
+ * Type for Figma icon names
121
+ */
122
+ type FigmaIconName = keyof typeof figmaIconMapping;
123
+ /**
124
+ * Get Radix icon name from Figma icon name
125
+ *
126
+ * @example
127
+ * ```ts
128
+ * const radixName = getRadixIconName('Trash'); // Returns 'TrashIcon'
129
+ * const radixName = getRadixIconName('Show'); // Returns 'EyeOpenIcon'
130
+ * ```
131
+ */
132
+ declare function getRadixIconName(figmaName: FigmaIconName): IconName;
64
133
 
65
- export { Icon, type IconColor, type IconName, type IconProps, type IconSize, availableIcons };
134
+ export { type FigmaIconName, Icon, type IconColor, type IconName, type IconProps, type IconSize, availableIcons, figmaIconMapping, getRadixIconName };
package/dist/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export * from '@radix-ui/react-icons';
6
6
  type IconName = keyof typeof RadixIcons;
7
7
  declare const availableIcons: IconName[];
8
8
  type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
9
- type IconColor = 'text' | 'action' | 'clickable' | 'popup' | 'error' | 'toggle' | 'secondary' | 'system-text' | 'icon-secondary' | 'card';
9
+ type IconColor = 'text' | 'action' | 'clickable' | 'popup' | 'error' | 'toggle' | 'secondary' | 'system-text' | 'icon-secondary' | 'card' | 'teal';
10
10
  interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
11
11
  /**
12
12
  * The name of the icon from Radix UI icons
@@ -61,5 +61,74 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
61
61
  * ```
62
62
  */
63
63
  declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
64
+ /**
65
+ * Figma to Radix icon mapping
66
+ * Maps Figma icon names (from design specs) to Radix UI icon names
67
+ *
68
+ * Based on Figma design: node-id=40239-8043
69
+ */
70
+ declare const figmaIconMapping: {
71
+ readonly Trash: "TrashIcon";
72
+ readonly Delete: "TrashIcon";
73
+ readonly Add: "PlusIcon";
74
+ readonly Plus: "PlusIcon";
75
+ readonly Close: "Cross2Icon";
76
+ readonly X: "Cross2Icon";
77
+ readonly Edit: "Pencil1Icon";
78
+ readonly Pencil: "Pencil1Icon";
79
+ readonly Copy: "CopyIcon";
80
+ readonly Download: "DownloadIcon";
81
+ readonly Upload: "UploadIcon";
82
+ readonly Share: "Share1Icon";
83
+ readonly Back: "ChevronLeftIcon";
84
+ readonly Forward: "ChevronRightIcon";
85
+ readonly Up: "ChevronUpIcon";
86
+ readonly Down: "ChevronDownIcon";
87
+ readonly Home: "HomeIcon";
88
+ readonly Menu: "HamburgerMenuIcon";
89
+ readonly ExternalLink: "ExternalLinkIcon";
90
+ readonly Date: "CalendarIcon";
91
+ readonly Calendar: "CalendarIcon";
92
+ readonly Show: "EyeOpenIcon";
93
+ readonly Hide: "EyeNoneIcon";
94
+ readonly EyeOpen: "EyeOpenIcon";
95
+ readonly EyeClosed: "EyeNoneIcon";
96
+ readonly Search: "MagnifyingGlassIcon";
97
+ readonly Check: "CheckIcon";
98
+ readonly CheckCircle: "CheckCircledIcon";
99
+ readonly File: "FileIcon";
100
+ readonly FileText: "FileTextIcon";
101
+ readonly Document: "FileTextIcon";
102
+ readonly Folder: "FolderIcon";
103
+ readonly Settings: "GearIcon";
104
+ readonly Gear: "GearIcon";
105
+ readonly User: "PersonIcon";
106
+ readonly Person: "PersonIcon";
107
+ readonly Tooltip: "InfoCircledIcon";
108
+ readonly Info: "InfoCircledIcon";
109
+ readonly Help: "QuestionMarkCircledIcon";
110
+ readonly Question: "QuestionMarkCircledIcon";
111
+ readonly Warning: "ExclamationTriangleIcon";
112
+ readonly Error: "CrossCircledIcon";
113
+ readonly Success: "CheckCircledIcon";
114
+ readonly Email: "EnvelopeClosedIcon";
115
+ readonly Envelope: "EnvelopeClosedIcon";
116
+ readonly Bell: "BellIcon";
117
+ readonly Notification: "BellIcon";
118
+ };
119
+ /**
120
+ * Type for Figma icon names
121
+ */
122
+ type FigmaIconName = keyof typeof figmaIconMapping;
123
+ /**
124
+ * Get Radix icon name from Figma icon name
125
+ *
126
+ * @example
127
+ * ```ts
128
+ * const radixName = getRadixIconName('Trash'); // Returns 'TrashIcon'
129
+ * const radixName = getRadixIconName('Show'); // Returns 'EyeOpenIcon'
130
+ * ```
131
+ */
132
+ declare function getRadixIconName(figmaName: FigmaIconName): IconName;
64
133
 
65
- export { Icon, type IconColor, type IconName, type IconProps, type IconSize, availableIcons };
134
+ export { type FigmaIconName, Icon, type IconColor, type IconName, type IconProps, type IconSize, availableIcons, figmaIconMapping, getRadixIconName };
package/dist/index.js CHANGED
@@ -32,7 +32,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
32
32
  var index_exports = {};
33
33
  __export(index_exports, {
34
34
  Icon: () => Icon,
35
- availableIcons: () => availableIcons
35
+ availableIcons: () => availableIcons,
36
+ figmaIconMapping: () => figmaIconMapping,
37
+ getRadixIconName: () => getRadixIconName
36
38
  });
37
39
  module.exports = __toCommonJS(index_exports);
38
40
  var import_react = require("react");
@@ -64,7 +66,9 @@ var colorMap = {
64
66
  secondary: "var(--color-secondary)",
65
67
  "system-text": "var(--color-system-text)",
66
68
  "icon-secondary": "var(--color-icon-secondary)",
67
- card: "var(--color-card)"
69
+ card: "var(--color-card)",
70
+ teal: "var(--color-dialog-icon-teal, #42B8C6)"
71
+ // Verify dialog envelope – Figma teal
68
72
  };
69
73
  var Icon = (0, import_react.forwardRef)(
70
74
  ({
@@ -110,9 +114,69 @@ var Icon = (0, import_react.forwardRef)(
110
114
  }
111
115
  );
112
116
  Icon.displayName = "Icon";
117
+ var figmaIconMapping = {
118
+ // Action icons
119
+ Trash: "TrashIcon",
120
+ Delete: "TrashIcon",
121
+ Add: "PlusIcon",
122
+ Plus: "PlusIcon",
123
+ Close: "Cross2Icon",
124
+ X: "Cross2Icon",
125
+ Edit: "Pencil1Icon",
126
+ Pencil: "Pencil1Icon",
127
+ Copy: "CopyIcon",
128
+ Download: "DownloadIcon",
129
+ Upload: "UploadIcon",
130
+ Share: "Share1Icon",
131
+ // Navigation icons
132
+ Back: "ChevronLeftIcon",
133
+ Forward: "ChevronRightIcon",
134
+ Up: "ChevronUpIcon",
135
+ Down: "ChevronDownIcon",
136
+ Home: "HomeIcon",
137
+ Menu: "HamburgerMenuIcon",
138
+ ExternalLink: "ExternalLinkIcon",
139
+ // Form icons
140
+ Date: "CalendarIcon",
141
+ Calendar: "CalendarIcon",
142
+ Show: "EyeOpenIcon",
143
+ Hide: "EyeNoneIcon",
144
+ EyeOpen: "EyeOpenIcon",
145
+ EyeClosed: "EyeNoneIcon",
146
+ Search: "MagnifyingGlassIcon",
147
+ Check: "CheckIcon",
148
+ CheckCircle: "CheckCircledIcon",
149
+ // File icons
150
+ File: "FileIcon",
151
+ FileText: "FileTextIcon",
152
+ Document: "FileTextIcon",
153
+ Folder: "FolderIcon",
154
+ // UI icons
155
+ Settings: "GearIcon",
156
+ Gear: "GearIcon",
157
+ User: "PersonIcon",
158
+ Person: "PersonIcon",
159
+ Tooltip: "InfoCircledIcon",
160
+ Info: "InfoCircledIcon",
161
+ Help: "QuestionMarkCircledIcon",
162
+ Question: "QuestionMarkCircledIcon",
163
+ Warning: "ExclamationTriangleIcon",
164
+ Error: "CrossCircledIcon",
165
+ Success: "CheckCircledIcon",
166
+ // Communication icons
167
+ Email: "EnvelopeClosedIcon",
168
+ Envelope: "EnvelopeClosedIcon",
169
+ Bell: "BellIcon",
170
+ Notification: "BellIcon"
171
+ };
172
+ function getRadixIconName(figmaName) {
173
+ return figmaIconMapping[figmaName];
174
+ }
113
175
  // Annotate the CommonJS export names for ESM import in node:
114
176
  0 && (module.exports = {
115
177
  Icon,
116
178
  availableIcons,
179
+ figmaIconMapping,
180
+ getRadixIconName,
117
181
  ...require("@radix-ui/react-icons")
118
182
  });
package/dist/index.mjs CHANGED
@@ -28,7 +28,9 @@ var colorMap = {
28
28
  secondary: "var(--color-secondary)",
29
29
  "system-text": "var(--color-system-text)",
30
30
  "icon-secondary": "var(--color-icon-secondary)",
31
- card: "var(--color-card)"
31
+ card: "var(--color-card)",
32
+ teal: "var(--color-dialog-icon-teal, #42B8C6)"
33
+ // Verify dialog envelope – Figma teal
32
34
  };
33
35
  var Icon = forwardRef(
34
36
  ({
@@ -74,7 +76,67 @@ var Icon = forwardRef(
74
76
  }
75
77
  );
76
78
  Icon.displayName = "Icon";
79
+ var figmaIconMapping = {
80
+ // Action icons
81
+ Trash: "TrashIcon",
82
+ Delete: "TrashIcon",
83
+ Add: "PlusIcon",
84
+ Plus: "PlusIcon",
85
+ Close: "Cross2Icon",
86
+ X: "Cross2Icon",
87
+ Edit: "Pencil1Icon",
88
+ Pencil: "Pencil1Icon",
89
+ Copy: "CopyIcon",
90
+ Download: "DownloadIcon",
91
+ Upload: "UploadIcon",
92
+ Share: "Share1Icon",
93
+ // Navigation icons
94
+ Back: "ChevronLeftIcon",
95
+ Forward: "ChevronRightIcon",
96
+ Up: "ChevronUpIcon",
97
+ Down: "ChevronDownIcon",
98
+ Home: "HomeIcon",
99
+ Menu: "HamburgerMenuIcon",
100
+ ExternalLink: "ExternalLinkIcon",
101
+ // Form icons
102
+ Date: "CalendarIcon",
103
+ Calendar: "CalendarIcon",
104
+ Show: "EyeOpenIcon",
105
+ Hide: "EyeNoneIcon",
106
+ EyeOpen: "EyeOpenIcon",
107
+ EyeClosed: "EyeNoneIcon",
108
+ Search: "MagnifyingGlassIcon",
109
+ Check: "CheckIcon",
110
+ CheckCircle: "CheckCircledIcon",
111
+ // File icons
112
+ File: "FileIcon",
113
+ FileText: "FileTextIcon",
114
+ Document: "FileTextIcon",
115
+ Folder: "FolderIcon",
116
+ // UI icons
117
+ Settings: "GearIcon",
118
+ Gear: "GearIcon",
119
+ User: "PersonIcon",
120
+ Person: "PersonIcon",
121
+ Tooltip: "InfoCircledIcon",
122
+ Info: "InfoCircledIcon",
123
+ Help: "QuestionMarkCircledIcon",
124
+ Question: "QuestionMarkCircledIcon",
125
+ Warning: "ExclamationTriangleIcon",
126
+ Error: "CrossCircledIcon",
127
+ Success: "CheckCircledIcon",
128
+ // Communication icons
129
+ Email: "EnvelopeClosedIcon",
130
+ Envelope: "EnvelopeClosedIcon",
131
+ Bell: "BellIcon",
132
+ Notification: "BellIcon"
133
+ };
134
+ function getRadixIconName(figmaName) {
135
+ return figmaIconMapping[figmaName];
136
+ }
77
137
  export {
78
138
  Icon,
79
- availableIcons
139
+ availableIcons,
140
+ figmaIconMapping,
141
+ getRadixIconName
80
142
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adam-milo/icons",
3
- "version": "1.0.1",
3
+ "version": "1.0.6",
4
4
  "description": "Icon components for the Adam Milo Design System",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -33,28 +33,28 @@
33
33
  "license": "MIT",
34
34
  "repository": {
35
35
  "type": "git",
36
- "url": "git+https://github.com/adam-milo-smart/adam-milo-design-system.git",
36
+ "url": "git+https://github.com/adam-milo/adam-milo-design-system.git",
37
37
  "directory": "packages/icons"
38
38
  },
39
- "homepage": "https://github.com/adam-milo-smart/adam-milo-design-system#readme",
39
+ "homepage": "https://github.com/adam-milo/adam-milo-design-system#readme",
40
40
  "bugs": {
41
- "url": "https://github.com/adam-milo-smart/adam-milo-design-system/issues"
41
+ "url": "https://github.com/adam-milo/adam-milo-design-system/issues"
42
42
  },
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  },
46
46
  "peerDependencies": {
47
- "react": "^18.0.0",
48
- "react-dom": "^18.0.0"
47
+ "react": "^18.0.0 || ^19.0.0",
48
+ "react-dom": "^18.0.0 || ^19.0.0"
49
49
  },
50
50
  "dependencies": {
51
51
  "@radix-ui/react-icons": "^1.3.0"
52
52
  },
53
53
  "devDependencies": {
54
- "@types/react": "^18.2.45",
55
- "@types/react-dom": "^18.2.18",
56
- "react": "^18.2.0",
57
- "react-dom": "^18.2.0",
54
+ "@types/react": "^19.0.0",
55
+ "@types/react-dom": "^19.0.0",
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0",
58
58
  "tsup": "^8.0.1",
59
59
  "typescript": "^5.3.3"
60
60
  }