@ansiversa/components 0.0.86 → 0.0.87
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/index.ts +1 -0
- package/package.json +1 -1
- package/src/AvIcon.astro +151 -0
- package/src/AvNavbarActions.astro +4 -4
- package/src/styles/global.css +5 -4
package/index.ts
CHANGED
|
@@ -9,6 +9,7 @@ export { default as AvDivider } from './src/AvDivider.astro';
|
|
|
9
9
|
export { default as AvFeatureItem } from './src/AvFeatureItem.astro';
|
|
10
10
|
export { default as AvFeatureList } from './src/AvFeatureList.astro';
|
|
11
11
|
export { default as AvFooter } from './src/AvFooter.astro';
|
|
12
|
+
export { default as AvIcon } from './src/AvIcon.astro';
|
|
12
13
|
export { default as AvInput } from './src/AvInput.astro';
|
|
13
14
|
export { default as AvSelect } from './src/AvSelect.astro';
|
|
14
15
|
export { default as AvTextarea } from './src/AvTextarea.astro';
|
package/package.json
CHANGED
package/src/AvIcon.astro
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
export interface Props {
|
|
3
|
+
name:
|
|
4
|
+
| "apps"
|
|
5
|
+
| "pricing"
|
|
6
|
+
| "about"
|
|
7
|
+
| "home"
|
|
8
|
+
| "search"
|
|
9
|
+
| "refresh"
|
|
10
|
+
| "plus"
|
|
11
|
+
| "edit"
|
|
12
|
+
| "trash"
|
|
13
|
+
| "heart"
|
|
14
|
+
| "heart-filled"
|
|
15
|
+
| "eye"
|
|
16
|
+
| "eye-off"
|
|
17
|
+
| "chevron-left"
|
|
18
|
+
| "chevron-right"
|
|
19
|
+
| "chevron-up"
|
|
20
|
+
| "chevron-down";
|
|
21
|
+
size?: "sm" | "md" | "lg";
|
|
22
|
+
title?: string;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const { name, size = "md", title, className } = Astro.props as Props;
|
|
27
|
+
|
|
28
|
+
const sizeMap = { sm: 16, md: 20, lg: 24 } as const;
|
|
29
|
+
const px = sizeMap[size] ?? 20;
|
|
30
|
+
|
|
31
|
+
const baseClass = `av-icon av-icon--${size}`;
|
|
32
|
+
const cls = className ? `${baseClass} ${className}` : baseClass;
|
|
33
|
+
|
|
34
|
+
const ariaHidden = title ? undefined : "true";
|
|
35
|
+
const role = title ? "img" : undefined;
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
<span class={cls} role={role} aria-hidden={ariaHidden}>
|
|
39
|
+
<svg
|
|
40
|
+
width={px}
|
|
41
|
+
height={px}
|
|
42
|
+
viewBox="0 0 24 24"
|
|
43
|
+
fill="none"
|
|
44
|
+
stroke="currentColor"
|
|
45
|
+
stroke-width="2"
|
|
46
|
+
stroke-linecap="round"
|
|
47
|
+
stroke-linejoin="round"
|
|
48
|
+
>
|
|
49
|
+
{title && <title>{title}</title>}
|
|
50
|
+
|
|
51
|
+
{name === "home" && (
|
|
52
|
+
<>
|
|
53
|
+
<path d="M3 11.5L12 4l9 7.5" />
|
|
54
|
+
<path d="M5 10.5V20h14v-9.5" />
|
|
55
|
+
</>
|
|
56
|
+
)}
|
|
57
|
+
|
|
58
|
+
{name === "apps" && (
|
|
59
|
+
<>
|
|
60
|
+
<rect x="3" y="3" width="7" height="7" rx="2" />
|
|
61
|
+
<rect x="14" y="3" width="7" height="7" rx="2" />
|
|
62
|
+
<rect x="3" y="14" width="7" height="7" rx="2" />
|
|
63
|
+
<rect x="14" y="14" width="7" height="7" rx="2" />
|
|
64
|
+
</>
|
|
65
|
+
)}
|
|
66
|
+
|
|
67
|
+
{name === "pricing" && (
|
|
68
|
+
<>
|
|
69
|
+
<path d="M6 3h7.586a2 2 0 0 1 1.414.586l4.414 4.414a2 2 0 0 1 0 2.828L13 18.242a2 2 0 0 1-2.828 0L3.586 11.657A2 2 0 0 1 3 10.243V6a3 3 0 0 1 3-3Z" />
|
|
70
|
+
<path d="M9 6h.01" />
|
|
71
|
+
</>
|
|
72
|
+
)}
|
|
73
|
+
|
|
74
|
+
{name === "about" && (
|
|
75
|
+
<>
|
|
76
|
+
<circle cx="12" cy="8" r="3.25" />
|
|
77
|
+
<path d="M6 19v-.5a5.5 5.5 0 0 1 11 0V19" />
|
|
78
|
+
<path d="M12 12.5v2" />
|
|
79
|
+
</>
|
|
80
|
+
)}
|
|
81
|
+
|
|
82
|
+
{name === "search" && (
|
|
83
|
+
<>
|
|
84
|
+
<circle cx="11" cy="11" r="7" />
|
|
85
|
+
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
86
|
+
</>
|
|
87
|
+
)}
|
|
88
|
+
|
|
89
|
+
{name === "refresh" && (
|
|
90
|
+
<>
|
|
91
|
+
<path d="M3 12a9 9 0 1 0 3-6.7" />
|
|
92
|
+
<polyline points="3 4 3 10 9 10" />
|
|
93
|
+
</>
|
|
94
|
+
)}
|
|
95
|
+
|
|
96
|
+
{name === "plus" && (
|
|
97
|
+
<>
|
|
98
|
+
<line x1="12" y1="5" x2="12" y2="19" />
|
|
99
|
+
<line x1="5" y1="12" x2="19" y2="12" />
|
|
100
|
+
</>
|
|
101
|
+
)}
|
|
102
|
+
|
|
103
|
+
{name === "edit" && (
|
|
104
|
+
<>
|
|
105
|
+
<path d="M12 20h9" />
|
|
106
|
+
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5z" />
|
|
107
|
+
</>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
{name === "trash" && (
|
|
111
|
+
<>
|
|
112
|
+
<polyline points="3 6 5 6 21 6" />
|
|
113
|
+
<path d="M19 6l-1 14H6L5 6" />
|
|
114
|
+
<path d="M10 11v6" />
|
|
115
|
+
<path d="M14 11v6" />
|
|
116
|
+
<path d="M9 6V4h6v2" />
|
|
117
|
+
</>
|
|
118
|
+
)}
|
|
119
|
+
|
|
120
|
+
{name === "heart" && (
|
|
121
|
+
<>
|
|
122
|
+
<path d="M12 20.5 5.3 13.8a5 5 0 0 1 7-7l.7.7.7-.7a5 5 0 0 1 7 7L12 20.5Z" />
|
|
123
|
+
</>
|
|
124
|
+
)}
|
|
125
|
+
|
|
126
|
+
{name === "heart-filled" && (
|
|
127
|
+
<>
|
|
128
|
+
<path d="M12 20.5 5.3 13.8a5 5 0 0 1 7-7l.7.7.7-.7a5 5 0 0 1 7 7L12 20.5Z" fill="currentColor" stroke="none" />
|
|
129
|
+
</>
|
|
130
|
+
)}
|
|
131
|
+
|
|
132
|
+
{name === "eye" && (
|
|
133
|
+
<>
|
|
134
|
+
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" />
|
|
135
|
+
<circle cx="12" cy="12" r="3" />
|
|
136
|
+
</>
|
|
137
|
+
)}
|
|
138
|
+
|
|
139
|
+
{name === "eye-off" && (
|
|
140
|
+
<>
|
|
141
|
+
<path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.77 21.77 0 0 1 5.06-5.94m3.07-1.6A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.77 21.77 0 0 1-2.25 3.2" />
|
|
142
|
+
<line x1="1" y1="1" x2="23" y2="23" />
|
|
143
|
+
</>
|
|
144
|
+
)}
|
|
145
|
+
|
|
146
|
+
{name === "chevron-left" && <polyline points="15 18 9 12 15 6" />}
|
|
147
|
+
{name === "chevron-right" && <polyline points="9 18 15 12 9 6" />}
|
|
148
|
+
{name === "chevron-up" && <polyline points="18 15 12 9 6 15" />}
|
|
149
|
+
{name === "chevron-down" && <polyline points="6 9 12 15 18 9" />}
|
|
150
|
+
</svg>
|
|
151
|
+
</span>
|
|
@@ -46,7 +46,7 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
|
|
|
46
46
|
|
|
47
47
|
const iconMap: Record<string, string> = {
|
|
48
48
|
Apps: `
|
|
49
|
-
<svg class="av-icon" viewBox='0 0 24 24'>
|
|
49
|
+
<svg class="av-icon" width="16" height="16" viewBox='0 0 24 24' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
50
50
|
<rect x='3' y='3' width='7' height='7' rx='2'/>
|
|
51
51
|
<rect x='14' y='3' width='7' height='7' rx='2'/>
|
|
52
52
|
<rect x='3' y='14' width='7' height='7' rx='2'/>
|
|
@@ -54,20 +54,20 @@ const iconMap: Record<string, string> = {
|
|
|
54
54
|
</svg>
|
|
55
55
|
`,
|
|
56
56
|
Pricing: `
|
|
57
|
-
<svg class="av-icon" viewBox='0 0 24 24'>
|
|
57
|
+
<svg class="av-icon" width="16" height="16" viewBox='0 0 24 24' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
58
58
|
<path d='M6 3h7.586a2 2 0 0 1 1.414.586l4.414 4.414a2 2 0 0 1 0 2.828L13 18.242a2 2 0 0 1-2.828 0L3.586 11.657A2 2 0 0 1 3 10.243V6a3 3 0 0 1 3-3Z'/>
|
|
59
59
|
<path d='M9 6h.01'/>
|
|
60
60
|
</svg>
|
|
61
61
|
`,
|
|
62
62
|
About: `
|
|
63
|
-
<svg class="av-icon" viewBox='0 0 24 24'>
|
|
63
|
+
<svg class="av-icon" width="16" height="16" viewBox='0 0 24 24' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
64
64
|
<circle cx='12' cy='8' r='3.25'/>
|
|
65
65
|
<path d='M6 19v-.5a5.5 5.5 0 0 1 11 0V19'/>
|
|
66
66
|
<path d='M12 12.5v2'/>
|
|
67
67
|
</svg>
|
|
68
68
|
`,
|
|
69
69
|
default: `
|
|
70
|
-
<svg class="av-icon" viewBox='0 0 24 24'>
|
|
70
|
+
<svg class="av-icon" width="16" height="16" viewBox='0 0 24 24' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
71
71
|
<circle cx='12' cy='12' r='9'/>
|
|
72
72
|
</svg>
|
|
73
73
|
`,
|
package/src/styles/global.css
CHANGED
|
@@ -602,10 +602,11 @@
|
|
|
602
602
|
}
|
|
603
603
|
|
|
604
604
|
.av-icon {
|
|
605
|
-
display:
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
605
|
+
display: inline-flex;
|
|
606
|
+
align-items: center;
|
|
607
|
+
justify-content: center;
|
|
608
|
+
line-height: 0;
|
|
609
|
+
flex: 0 0 auto;
|
|
609
610
|
}
|
|
610
611
|
|
|
611
612
|
/* Mobile: only icons */
|