@awenovations/aura 0.0.44 → 0.0.46
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/dist/icon/icon-registry.d.ts +6 -0
- package/dist/icon/icon-registry.js +12 -0
- package/dist/icon/icon.stories.svelte +43 -0
- package/dist/icon/icon.svelte +11 -1
- package/dist/icon/icon.svelte.d.ts +1 -1
- package/dist/icon/props.d.ts +1 -0
- package/dist/icons/meta.json +1 -1
- package/dist/text-field/text-field.svelte +1 -1
- package/dist/tokens/_variables.css +1 -1
- package/package.json +17 -3
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { SvelteComponent } from 'svelte';
|
|
2
|
+
type IconComponent = typeof SvelteComponent;
|
|
3
|
+
export declare function registerIcon(name: string, component: IconComponent): void;
|
|
4
|
+
export declare function registerIcons(icons: Record<string, IconComponent>): void;
|
|
5
|
+
export declare function getIcon(name: string): IconComponent | undefined;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const registry = new Map();
|
|
2
|
+
export function registerIcon(name, component) {
|
|
3
|
+
registry.set(name, component);
|
|
4
|
+
}
|
|
5
|
+
export function registerIcons(icons) {
|
|
6
|
+
for (const [name, component] of Object.entries(icons)) {
|
|
7
|
+
registry.set(name, component);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
export function getIcon(name) {
|
|
11
|
+
return registry.get(name);
|
|
12
|
+
}
|
|
@@ -4,6 +4,15 @@
|
|
|
4
4
|
import Icon from './icon.svelte';
|
|
5
5
|
import { iconSizes } from './props.ts';
|
|
6
6
|
import Tooltip from '../tooltip/tooltip.svelte';
|
|
7
|
+
import { registerIcons } from './icon-registry';
|
|
8
|
+
import { ArrowRight, CircleCheck, Settings, Trash2 } from 'lucide-svelte';
|
|
9
|
+
|
|
10
|
+
registerIcons({
|
|
11
|
+
'arrow-right': ArrowRight,
|
|
12
|
+
'circle-check': CircleCheck,
|
|
13
|
+
'lucide-settings': Settings,
|
|
14
|
+
'trash-2': Trash2
|
|
15
|
+
});
|
|
7
16
|
|
|
8
17
|
export const meta = {
|
|
9
18
|
title: 'AURA/Icon',
|
|
@@ -121,3 +130,37 @@
|
|
|
121
130
|
size: 'large'
|
|
122
131
|
}}
|
|
123
132
|
/>
|
|
133
|
+
|
|
134
|
+
<Story name="Lucide Icons">
|
|
135
|
+
<div style="display: flex; gap: 20px; align-items: center;">
|
|
136
|
+
<Tooltip placement="bottom" content="arrow-right (small)">
|
|
137
|
+
<Icon name="arrow-right" size="small" />
|
|
138
|
+
</Tooltip>
|
|
139
|
+
<Tooltip placement="bottom" content="circle-check (medium)">
|
|
140
|
+
<Icon name="circle-check" size="medium" />
|
|
141
|
+
</Tooltip>
|
|
142
|
+
<Tooltip placement="bottom" content="lucide-settings (large)">
|
|
143
|
+
<Icon name="lucide-settings" size="large" />
|
|
144
|
+
</Tooltip>
|
|
145
|
+
<Tooltip placement="bottom" content="trash-2 (medium)">
|
|
146
|
+
<Icon name="trash-2" size="medium" />
|
|
147
|
+
</Tooltip>
|
|
148
|
+
</div>
|
|
149
|
+
</Story>
|
|
150
|
+
|
|
151
|
+
<Story name="Lucide + Built-in Mix">
|
|
152
|
+
<div style="display: flex; gap: 20px; align-items: center;">
|
|
153
|
+
<Tooltip placement="bottom" content="lucide: circle-check">
|
|
154
|
+
<Icon name="circle-check" size="medium" />
|
|
155
|
+
</Tooltip>
|
|
156
|
+
<Tooltip placement="bottom" content="built-in: checkmark">
|
|
157
|
+
<Icon name="checkmark" size="medium" />
|
|
158
|
+
</Tooltip>
|
|
159
|
+
<Tooltip placement="bottom" content="lucide: lucide-settings">
|
|
160
|
+
<Icon name="lucide-settings" size="medium" />
|
|
161
|
+
</Tooltip>
|
|
162
|
+
<Tooltip placement="bottom" content="built-in: settings">
|
|
163
|
+
<Icon name="settings" size="medium" />
|
|
164
|
+
</Tooltip>
|
|
165
|
+
</div>
|
|
166
|
+
</Story>
|
package/dist/icon/icon.svelte
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type * as Props from './props';
|
|
3
|
+
import { getIcon } from './icon-registry';
|
|
3
4
|
|
|
4
5
|
export let forceColor: boolean = false;
|
|
5
6
|
export let size: Props.IconSize = 'medium';
|
|
6
7
|
export let name: string = undefined;
|
|
7
8
|
$: hasColor = name?.includes('-color') || forceColor;
|
|
9
|
+
$: registeredIcon = name ? getIcon(name) : undefined;
|
|
8
10
|
</script>
|
|
9
11
|
|
|
10
12
|
<div
|
|
@@ -12,9 +14,12 @@
|
|
|
12
14
|
class:isLarge={size === 'large'}
|
|
13
15
|
class:isMedium={size === 'medium'}
|
|
14
16
|
class:isSmall={size === 'small'}
|
|
17
|
+
class:isRegistered={!!registeredIcon}
|
|
15
18
|
>
|
|
16
19
|
<slot>
|
|
17
|
-
{#if
|
|
20
|
+
{#if registeredIcon}
|
|
21
|
+
<svelte:component this={registeredIcon} />
|
|
22
|
+
{:else if name}
|
|
18
23
|
<div
|
|
19
24
|
class="icon"
|
|
20
25
|
class:color={hasColor}
|
|
@@ -29,6 +34,8 @@
|
|
|
29
34
|
* by setting the background */
|
|
30
35
|
/* Color icons need to be set via a background rather than a mask so we
|
|
31
36
|
* don't remove the color */
|
|
37
|
+
/* Registered icons (e.g. lucide) use stroke="currentColor",
|
|
38
|
+
* so we set color to match the aura icon color variable */
|
|
32
39
|
}
|
|
33
40
|
.aura-icon .icon,
|
|
34
41
|
.aura-icon :global(svg) {
|
|
@@ -67,4 +74,7 @@
|
|
|
67
74
|
background: var(--icon-url);
|
|
68
75
|
background-repeat: no-repeat;
|
|
69
76
|
background-position: center;
|
|
77
|
+
}
|
|
78
|
+
.aura-icon.isRegistered {
|
|
79
|
+
color: var(--icon-color, var(--aura-secondary-30, currentColor));
|
|
70
80
|
}</style>
|
package/dist/icon/props.d.ts
CHANGED
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1771186624564,"icons":[{"name":"apple","size":"large"},{"name":"apple","size":"medium"},{"name":"apple","size":"small"},{"name":"arrow-circle-left","size":"large"},{"name":"arrow-circle-left","size":"medium"},{"name":"arrow-circle-left","size":"small"},{"name":"bug","size":"large"},{"name":"bug","size":"medium"},{"name":"bug","size":"small"},{"name":"caret-down","size":"large"},{"name":"caret-down","size":"medium"},{"name":"caret-down","size":"small"},{"name":"checkmark","size":"large"},{"name":"checkmark","size":"medium"},{"name":"checkmark","size":"small"},{"name":"circle-plus","size":"large"},{"name":"circle-plus","size":"medium"},{"name":"circle-plus","size":"small"},{"name":"copy","size":"large"},{"name":"copy","size":"medium"},{"name":"copy","size":"small"},{"name":"eye-open","size":"large"},{"name":"eye-open","size":"medium"},{"name":"eye-open","size":"small"},{"name":"github","size":"large"},{"name":"github","size":"medium"},{"name":"github","size":"small"},{"name":"globe","size":"large"},{"name":"globe","size":"medium"},{"name":"globe","size":"small"},{"name":"google-color","size":"large"},{"name":"google-color","size":"medium"},{"name":"google-color","size":"small"},{"name":"linkedin","size":"large"},{"name":"linkedin","size":"medium"},{"name":"linkedin","size":"small"},{"name":"microsoft-color","size":"large"},{"name":"microsoft-color","size":"medium"},{"name":"microsoft-color","size":"small"},{"name":"pencil","size":"large"},{"name":"pencil","size":"medium"},{"name":"pencil","size":"small"},{"name":"plan","size":"large"},{"name":"plan","size":"medium"},{"name":"plan","size":"small"},{"name":"play","size":"large"},{"name":"play","size":"medium"},{"name":"play","size":"small"},{"name":"settings","size":"large"},{"name":"settings","size":"medium"},{"name":"settings","size":"small"},{"name":"trash","size":"large"},{"name":"trash","size":"medium"},{"name":"trash","size":"small"},{"name":"user-story","size":"large"},{"name":"user-story","size":"medium"},{"name":"user-story","size":"small"},{"name":"x","size":"large"},{"name":"x","size":"medium"},{"name":"x","size":"small"}]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awenovations/aura",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.46",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run transform-tokens && vite build && npm run package",
|
|
@@ -30,6 +30,11 @@
|
|
|
30
30
|
"./package.json": "./package.json",
|
|
31
31
|
"./button.svelte": "./dist/button/button.svelte",
|
|
32
32
|
"./icon.svelte": "./dist/icon/icon.svelte",
|
|
33
|
+
"./icon-registry": {
|
|
34
|
+
"types": "./dist/icon/icon-registry.d.ts",
|
|
35
|
+
"svelte": "./dist/icon/icon-registry.js",
|
|
36
|
+
"default": "./dist/icon/icon-registry.js"
|
|
37
|
+
},
|
|
33
38
|
"./container.svelte": "./dist/container/container.svelte",
|
|
34
39
|
"./dialog.svelte": "./dist/dialog/dialog.svelte",
|
|
35
40
|
"./dropdown.svelte": "./dist/dropdown/dropdown.svelte",
|
|
@@ -61,12 +66,12 @@
|
|
|
61
66
|
"@storybook/addon-essentials": "^8.5.6",
|
|
62
67
|
"@storybook/addon-interactions": "^8.5.6",
|
|
63
68
|
"@storybook/addon-links": "^8.5.6",
|
|
69
|
+
"@storybook/addon-svelte-csf": "^5.0.0",
|
|
70
|
+
"@storybook/addon-themes": "^8.5.6",
|
|
64
71
|
"@storybook/blocks": "^8.5.6",
|
|
65
72
|
"@storybook/svelte": "^8.5.6",
|
|
66
73
|
"@storybook/sveltekit": "^8.5.6",
|
|
67
74
|
"@storybook/test": "^8.5.6",
|
|
68
|
-
"@storybook/addon-svelte-csf": "^5.0.0",
|
|
69
|
-
"@storybook/addon-themes": "^8.5.6",
|
|
70
75
|
"@sveltejs/adapter-auto": "^3.2.2",
|
|
71
76
|
"@sveltejs/kit": "^2.5.27",
|
|
72
77
|
"@sveltejs/package": "^2.3.7",
|
|
@@ -77,6 +82,7 @@
|
|
|
77
82
|
"eslint-config-prettier": "^9.1.0",
|
|
78
83
|
"eslint-plugin-storybook": "^0.11.3",
|
|
79
84
|
"eslint-plugin-svelte": "^2.45.1",
|
|
85
|
+
"lucide-svelte": "^0.564.0",
|
|
80
86
|
"prettier": "^3.3.2",
|
|
81
87
|
"prettier-plugin-svelte": "^3.2.6",
|
|
82
88
|
"publint": "^0.2.8",
|
|
@@ -96,6 +102,14 @@
|
|
|
96
102
|
"svelte": "./dist/index.js",
|
|
97
103
|
"types": "./dist/index.d.ts",
|
|
98
104
|
"type": "module",
|
|
105
|
+
"peerDependencies": {
|
|
106
|
+
"lucide-svelte": ">=0.300.0"
|
|
107
|
+
},
|
|
108
|
+
"peerDependenciesMeta": {
|
|
109
|
+
"lucide-svelte": {
|
|
110
|
+
"optional": true
|
|
111
|
+
}
|
|
112
|
+
},
|
|
99
113
|
"dependencies": {
|
|
100
114
|
"@floating-ui/dom": "^1.6.6",
|
|
101
115
|
"classnames": "^2.5.1",
|