@adam-milo/icons 1.0.46 → 1.0.51

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 +1 -1
  2. package/dist/index.d.mts +0 -62
  3. package/dist/index.d.ts +0 -62
  4. package/dist/index.js +0 -13
  5. package/dist/index.mjs +0 -13
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -2,7 +2,7 @@
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.
5
+ > **Latest Update**: Enhanced accessibility and improved TypeScript definitions.
6
6
 
7
7
  ## Installation
8
8
 
package/dist/index.d.mts CHANGED
@@ -8,65 +8,15 @@ declare const availableIcons: IconName[];
8
8
  type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
9
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
- /**
12
- * The name of the icon from Radix UI icons
13
- */
14
11
  name: IconName;
15
- /**
16
- * Size variant from design system
17
- * @default 'md'
18
- */
19
12
  size?: IconSize;
20
- /**
21
- * Color variant from design system
22
- * @default 'text'
23
- */
24
13
  color?: IconColor;
25
- /**
26
- * Accessible label for the icon. Required for standalone/clickable icons.
27
- * For decorative icons, set `decorative` to true instead.
28
- */
29
14
  'aria-label'?: string;
30
- /**
31
- * If true, marks the icon as decorative (aria-hidden="true").
32
- * Use this for icons that are purely decorative or accompanied by visible text.
33
- * @default false
34
- */
35
15
  decorative?: boolean;
36
- /**
37
- * Custom data-testid for testing purposes
38
- */
39
16
  'data-testid'?: string;
40
- /**
41
- * Custom data-cy attribute for Cypress testing
42
- */
43
17
  'data-cy'?: string;
44
18
  }
45
- /**
46
- * Icon component that provides access to all Radix UI icons with built-in accessibility support.
47
- *
48
- * @example
49
- * ```tsx
50
- * // Decorative icon (with text label)
51
- * <Icon name="PlusIcon" decorative />
52
- *
53
- * // Standalone icon (requires aria-label)
54
- * <Icon name="TrashIcon" aria-label="Delete item" size="lg" />
55
- *
56
- * // Icon with color and size
57
- * <Icon name="CheckIcon" color="clickable" size="xl" aria-label="Success" />
58
- *
59
- * // Icon with custom Cypress test ID
60
- * <Icon name="ErrorIcon" color="error" data-cy="error-icon" decorative />
61
- * ```
62
- */
63
19
  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
20
  declare const figmaIconMapping: {
71
21
  readonly Trash: "TrashIcon";
72
22
  readonly Delete: "TrashIcon";
@@ -116,19 +66,7 @@ declare const figmaIconMapping: {
116
66
  readonly Bell: "BellIcon";
117
67
  readonly Notification: "BellIcon";
118
68
  };
119
- /**
120
- * Type for Figma icon names
121
- */
122
69
  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
70
  declare function getRadixIconName(figmaName: FigmaIconName): IconName;
133
71
 
134
72
  export { type FigmaIconName, Icon, type IconColor, type IconName, type IconProps, type IconSize, availableIcons, figmaIconMapping, getRadixIconName };
package/dist/index.d.ts CHANGED
@@ -8,65 +8,15 @@ declare const availableIcons: IconName[];
8
8
  type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
9
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
- /**
12
- * The name of the icon from Radix UI icons
13
- */
14
11
  name: IconName;
15
- /**
16
- * Size variant from design system
17
- * @default 'md'
18
- */
19
12
  size?: IconSize;
20
- /**
21
- * Color variant from design system
22
- * @default 'text'
23
- */
24
13
  color?: IconColor;
25
- /**
26
- * Accessible label for the icon. Required for standalone/clickable icons.
27
- * For decorative icons, set `decorative` to true instead.
28
- */
29
14
  'aria-label'?: string;
30
- /**
31
- * If true, marks the icon as decorative (aria-hidden="true").
32
- * Use this for icons that are purely decorative or accompanied by visible text.
33
- * @default false
34
- */
35
15
  decorative?: boolean;
36
- /**
37
- * Custom data-testid for testing purposes
38
- */
39
16
  'data-testid'?: string;
40
- /**
41
- * Custom data-cy attribute for Cypress testing
42
- */
43
17
  'data-cy'?: string;
44
18
  }
45
- /**
46
- * Icon component that provides access to all Radix UI icons with built-in accessibility support.
47
- *
48
- * @example
49
- * ```tsx
50
- * // Decorative icon (with text label)
51
- * <Icon name="PlusIcon" decorative />
52
- *
53
- * // Standalone icon (requires aria-label)
54
- * <Icon name="TrashIcon" aria-label="Delete item" size="lg" />
55
- *
56
- * // Icon with color and size
57
- * <Icon name="CheckIcon" color="clickable" size="xl" aria-label="Success" />
58
- *
59
- * // Icon with custom Cypress test ID
60
- * <Icon name="ErrorIcon" color="error" data-cy="error-icon" decorative />
61
- * ```
62
- */
63
19
  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
20
  declare const figmaIconMapping: {
71
21
  readonly Trash: "TrashIcon";
72
22
  readonly Delete: "TrashIcon";
@@ -116,19 +66,7 @@ declare const figmaIconMapping: {
116
66
  readonly Bell: "BellIcon";
117
67
  readonly Notification: "BellIcon";
118
68
  };
119
- /**
120
- * Type for Figma icon names
121
- */
122
69
  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
70
  declare function getRadixIconName(figmaName: FigmaIconName): IconName;
133
71
 
134
72
  export { type FigmaIconName, Icon, type IconColor, type IconName, type IconProps, type IconSize, availableIcons, figmaIconMapping, getRadixIconName };
package/dist/index.js CHANGED
@@ -44,17 +44,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
44
44
  var availableIcons = Object.keys(RadixIcons);
45
45
  var sizeMap = {
46
46
  xs: 12,
47
- // --font-size-10
48
47
  sm: 14,
49
- // --font-size-9
50
48
  md: 16,
51
- // --font-size-8 (default)
52
49
  lg: 20,
53
- // --spacing-5
54
50
  xl: 24,
55
- // --spacing-6
56
51
  "2xl": 32
57
- // --spacing-8
58
52
  };
59
53
  var colorMap = {
60
54
  text: "var(--color-text)",
@@ -68,7 +62,6 @@ var colorMap = {
68
62
  "icon-secondary": "var(--color-icon-secondary)",
69
63
  card: "var(--color-card)",
70
64
  teal: "var(--color-dialog-icon-teal, #42B8C6)"
71
- // Verify dialog envelope – Figma teal
72
65
  };
73
66
  var Icon = (0, import_react.forwardRef)(
74
67
  ({
@@ -115,7 +108,6 @@ var Icon = (0, import_react.forwardRef)(
115
108
  );
116
109
  Icon.displayName = "Icon";
117
110
  var figmaIconMapping = {
118
- // Action icons
119
111
  Trash: "TrashIcon",
120
112
  Delete: "TrashIcon",
121
113
  Add: "PlusIcon",
@@ -128,7 +120,6 @@ var figmaIconMapping = {
128
120
  Download: "DownloadIcon",
129
121
  Upload: "UploadIcon",
130
122
  Share: "Share1Icon",
131
- // Navigation icons
132
123
  Back: "ChevronLeftIcon",
133
124
  Forward: "ChevronRightIcon",
134
125
  Up: "ChevronUpIcon",
@@ -136,7 +127,6 @@ var figmaIconMapping = {
136
127
  Home: "HomeIcon",
137
128
  Menu: "HamburgerMenuIcon",
138
129
  ExternalLink: "ExternalLinkIcon",
139
- // Form icons
140
130
  Date: "CalendarIcon",
141
131
  Calendar: "CalendarIcon",
142
132
  Show: "EyeOpenIcon",
@@ -146,12 +136,10 @@ var figmaIconMapping = {
146
136
  Search: "MagnifyingGlassIcon",
147
137
  Check: "CheckIcon",
148
138
  CheckCircle: "CheckCircledIcon",
149
- // File icons
150
139
  File: "FileIcon",
151
140
  FileText: "FileTextIcon",
152
141
  Document: "FileTextIcon",
153
142
  Folder: "FolderIcon",
154
- // UI icons
155
143
  Settings: "GearIcon",
156
144
  Gear: "GearIcon",
157
145
  User: "PersonIcon",
@@ -163,7 +151,6 @@ var figmaIconMapping = {
163
151
  Warning: "ExclamationTriangleIcon",
164
152
  Error: "CrossCircledIcon",
165
153
  Success: "CheckCircledIcon",
166
- // Communication icons
167
154
  Email: "EnvelopeClosedIcon",
168
155
  Envelope: "EnvelopeClosedIcon",
169
156
  Bell: "BellIcon",
package/dist/index.mjs CHANGED
@@ -6,17 +6,11 @@ import { jsx } from "react/jsx-runtime";
6
6
  var availableIcons = Object.keys(RadixIcons);
7
7
  var sizeMap = {
8
8
  xs: 12,
9
- // --font-size-10
10
9
  sm: 14,
11
- // --font-size-9
12
10
  md: 16,
13
- // --font-size-8 (default)
14
11
  lg: 20,
15
- // --spacing-5
16
12
  xl: 24,
17
- // --spacing-6
18
13
  "2xl": 32
19
- // --spacing-8
20
14
  };
21
15
  var colorMap = {
22
16
  text: "var(--color-text)",
@@ -30,7 +24,6 @@ var colorMap = {
30
24
  "icon-secondary": "var(--color-icon-secondary)",
31
25
  card: "var(--color-card)",
32
26
  teal: "var(--color-dialog-icon-teal, #42B8C6)"
33
- // Verify dialog envelope – Figma teal
34
27
  };
35
28
  var Icon = forwardRef(
36
29
  ({
@@ -77,7 +70,6 @@ var Icon = forwardRef(
77
70
  );
78
71
  Icon.displayName = "Icon";
79
72
  var figmaIconMapping = {
80
- // Action icons
81
73
  Trash: "TrashIcon",
82
74
  Delete: "TrashIcon",
83
75
  Add: "PlusIcon",
@@ -90,7 +82,6 @@ var figmaIconMapping = {
90
82
  Download: "DownloadIcon",
91
83
  Upload: "UploadIcon",
92
84
  Share: "Share1Icon",
93
- // Navigation icons
94
85
  Back: "ChevronLeftIcon",
95
86
  Forward: "ChevronRightIcon",
96
87
  Up: "ChevronUpIcon",
@@ -98,7 +89,6 @@ var figmaIconMapping = {
98
89
  Home: "HomeIcon",
99
90
  Menu: "HamburgerMenuIcon",
100
91
  ExternalLink: "ExternalLinkIcon",
101
- // Form icons
102
92
  Date: "CalendarIcon",
103
93
  Calendar: "CalendarIcon",
104
94
  Show: "EyeOpenIcon",
@@ -108,12 +98,10 @@ var figmaIconMapping = {
108
98
  Search: "MagnifyingGlassIcon",
109
99
  Check: "CheckIcon",
110
100
  CheckCircle: "CheckCircledIcon",
111
- // File icons
112
101
  File: "FileIcon",
113
102
  FileText: "FileTextIcon",
114
103
  Document: "FileTextIcon",
115
104
  Folder: "FolderIcon",
116
- // UI icons
117
105
  Settings: "GearIcon",
118
106
  Gear: "GearIcon",
119
107
  User: "PersonIcon",
@@ -125,7 +113,6 @@ var figmaIconMapping = {
125
113
  Warning: "ExclamationTriangleIcon",
126
114
  Error: "CrossCircledIcon",
127
115
  Success: "CheckCircledIcon",
128
- // Communication icons
129
116
  Email: "EnvelopeClosedIcon",
130
117
  Envelope: "EnvelopeClosedIcon",
131
118
  Bell: "BellIcon",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@adam-milo/icons",
3
- "version": "1.0.46",
4
- "description": "Icon components for the Adam Milo Design System",
3
+ "version": "1.0.51",
4
+ "description": "Icon components for the Adam Milo Design System.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
7
7
  "types": "./dist/index.d.ts",