free-astro-components 0.0.31 → 0.0.33
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/README.md +5 -2
- package/package.json +1 -1
- package/src/components/Tab.astro +94 -0
- package/src/components/TabItem.astro +17 -0
- package/src/css/main.css +1 -0
- package/src/index.js +2 -0
- package/src/pages/index.astro +32 -193
- package/src/types/index.d.ts +9 -1
- package/src/utils/tab.ts +32 -0
- package/src/data/icons-categories.ts +0 -41
- package/src/layouts/Layout.astro +0 -32
- package/src/pages/buttons.astro +0 -143
- package/src/pages/controls.astro +0 -70
- package/src/pages/icons.astro +0 -74
- package/src/pages copy/icons.astro +0 -74
- package/src/pages copy/index.astro +0 -196
package/README.md
CHANGED
|
@@ -24,6 +24,9 @@ Explore and utilize a variety of components that can help you build your web pro
|
|
|
24
24
|
- A textarea component for larger text input.
|
|
25
25
|
- **Select**
|
|
26
26
|
- A select dropdown component.
|
|
27
|
+
- **Tab**
|
|
28
|
+
- A tab component for organizing content into tabs.
|
|
29
|
+
- **TabItem**: A subcomponent for individual tab items.
|
|
27
30
|
|
|
28
31
|
## Getting Started
|
|
29
32
|
|
|
@@ -33,14 +36,14 @@ Explore and utilize a variety of components that can help you build your web pro
|
|
|
33
36
|
|
|
34
37
|
2. **Installation:**
|
|
35
38
|
|
|
36
|
-
- To use these components in your Astro.js project, follow the instructions
|
|
39
|
+
- To use these components in your Astro.js project, follow the [installation instructions](https://free-astro-components.vercel.app/guide/installation).
|
|
37
40
|
|
|
38
41
|
3. **Usage:**
|
|
39
42
|
- Detailed documentation and code examples are available on the website to help you integrate and customize each component.
|
|
40
43
|
|
|
41
44
|
## Documentation
|
|
42
45
|
|
|
43
|
-
|
|
46
|
+
For detailed guides and information, visit the [Documentation](https://free-astro-components.vercel.app/guide/installation) page.
|
|
44
47
|
|
|
45
48
|
## Credits
|
|
46
49
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
---
|
|
2
|
+
import '../css/main.css'
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
tabs?: { label: string; active?: boolean }[]
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { tabs = [{ label: 'tab 1', active: true }, { label: 'tab 1' }] } =
|
|
9
|
+
Astro.props
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
<div data-tab class="ac-tab">
|
|
13
|
+
<ul data-tab-header class="ac-tab-header">
|
|
14
|
+
{
|
|
15
|
+
tabs.map((tab) => (
|
|
16
|
+
<li>
|
|
17
|
+
<button
|
|
18
|
+
class="ac-tab-button"
|
|
19
|
+
data-tab-button
|
|
20
|
+
data-active={tab.active}
|
|
21
|
+
>
|
|
22
|
+
{tab.label}
|
|
23
|
+
</button>
|
|
24
|
+
</li>
|
|
25
|
+
))
|
|
26
|
+
}
|
|
27
|
+
</ul>
|
|
28
|
+
<div data-tab-body>
|
|
29
|
+
<slot />
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<style>
|
|
34
|
+
.ac-tab {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
gap: var(--ac-spacing-4);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ac-tab-header {
|
|
41
|
+
align-items: center;
|
|
42
|
+
box-shadow: inset 0 -2px 0 0 rgb(var(--ac-color-200));
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: start;
|
|
45
|
+
list-style: none;
|
|
46
|
+
margin: 0;
|
|
47
|
+
overflow-x: auto;
|
|
48
|
+
padding: 0;
|
|
49
|
+
width: 100%;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.ac-tab-button {
|
|
53
|
+
align-items: center;
|
|
54
|
+
appearance: none;
|
|
55
|
+
background-color: var(--ac-transparent);
|
|
56
|
+
border-bottom-width: var(--ac-border-2);
|
|
57
|
+
border-color: var(--ac-transparent);
|
|
58
|
+
color: rgb(var(--ac-color-500));
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
display: flex;
|
|
61
|
+
font-family: var(--ac-font-sans);
|
|
62
|
+
font-size: var(--ac-text-sm);
|
|
63
|
+
gap: var(--ac-spacing-2);
|
|
64
|
+
justify-content: center;
|
|
65
|
+
padding: var(--ac-spacing-2) var(--ac-spacing-4);
|
|
66
|
+
transition: all 0.3s ease-in-out;
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
border-color: rgb(var(--ac-color-400));
|
|
70
|
+
color: var(--ac-primary-hover);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&[data-active] {
|
|
74
|
+
border-color: rgb(var(--ac-primary));
|
|
75
|
+
color: rgb(var(--ac-primary));
|
|
76
|
+
font-weight: var(--ac-font-medium);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
</style>
|
|
80
|
+
|
|
81
|
+
<script>
|
|
82
|
+
import { DOMLoaded } from '../utils/utils'
|
|
83
|
+
import { handleTabButtonClick } from '../utils/tab.ts'
|
|
84
|
+
|
|
85
|
+
DOMLoaded(() => {
|
|
86
|
+
const tabsButtons = document.querySelectorAll(
|
|
87
|
+
'[data-tab-button]'
|
|
88
|
+
) as NodeListOf<HTMLButtonElement>
|
|
89
|
+
|
|
90
|
+
tabsButtons.forEach((button) => {
|
|
91
|
+
button.addEventListener('click', () => handleTabButtonClick(button))
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
</script>
|
package/src/css/main.css
CHANGED
package/src/index.js
CHANGED
|
@@ -6,3 +6,5 @@ export { default as Switch } from './components/Switch.astro'
|
|
|
6
6
|
export { default as Input } from './components/Input.astro'
|
|
7
7
|
export { default as Textarea } from './components/Textarea.astro'
|
|
8
8
|
export { default as Select } from './components/Select.astro'
|
|
9
|
+
export { default as Tab } from './components/Tab.astro'
|
|
10
|
+
export { default as TabItem } from './components/TabItem.astro'
|
package/src/pages/index.astro
CHANGED
|
@@ -1,205 +1,44 @@
|
|
|
1
1
|
---
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import Textarea from '../components/Textarea.astro'
|
|
5
|
-
import Select from '../components/Select.astro'
|
|
2
|
+
import Tab from '../components/Tab.astro'
|
|
3
|
+
import TabItem from '../components/TabItem.astro'
|
|
6
4
|
---
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
<!doctype html>
|
|
7
|
+
<html lang="en" class="dark">
|
|
8
|
+
<head>
|
|
9
|
+
<meta charset="UTF-8" />
|
|
10
|
+
<meta name="description" content="Astro description" />
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
13
|
+
<meta name="generator" content={Astro.generator} />
|
|
14
|
+
<title>Free Astro Components</title>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<main class="content">
|
|
18
|
+
<h1>Tabs</h1>
|
|
11
19
|
|
|
12
|
-
<div>
|
|
13
|
-
<h2>Inputs</h2>
|
|
14
20
|
<div class="controls-wrapper">
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<Input
|
|
22
|
-
label="Input label"
|
|
23
|
-
value="Value"
|
|
24
|
-
placeholder="Placeholder"
|
|
25
|
-
helperText="Helper text"
|
|
26
|
-
/>
|
|
27
|
-
|
|
28
|
-
<Input
|
|
29
|
-
label="Input label"
|
|
30
|
-
placeholder="Placeholder"
|
|
31
|
-
helperText="Helper text"
|
|
32
|
-
disabled
|
|
33
|
-
/>
|
|
34
|
-
|
|
35
|
-
<Input
|
|
36
|
-
label="Input label"
|
|
37
|
-
value="Value"
|
|
38
|
-
placeholder="Placeholder"
|
|
39
|
-
helperText="Helper text"
|
|
40
|
-
disabled
|
|
41
|
-
/>
|
|
42
|
-
|
|
43
|
-
<Input
|
|
44
|
-
label="Input label"
|
|
45
|
-
value="Value"
|
|
46
|
-
placeholder="Placeholder"
|
|
47
|
-
helperText="Helper text"
|
|
48
|
-
readonly
|
|
49
|
-
/>
|
|
50
|
-
|
|
51
|
-
<Input
|
|
52
|
-
label="Input label"
|
|
53
|
-
placeholder="Placeholder"
|
|
54
|
-
helperText="Helper text"
|
|
55
|
-
status="error"
|
|
56
|
-
/>
|
|
57
|
-
|
|
58
|
-
<Input
|
|
59
|
-
label="Input label"
|
|
60
|
-
placeholder="Placeholder"
|
|
61
|
-
helperText="Helper text"
|
|
62
|
-
status="success"
|
|
63
|
-
/>
|
|
64
|
-
|
|
65
|
-
<Input
|
|
66
|
-
type="search"
|
|
67
|
-
label="Input label"
|
|
68
|
-
placeholder="Buscar aquí"
|
|
69
|
-
helperText="Helper text"
|
|
70
|
-
/>
|
|
71
|
-
|
|
72
|
-
<Input
|
|
73
|
-
type="password"
|
|
74
|
-
label="Input label"
|
|
75
|
-
placeholder="Escribe tu contraseña"
|
|
76
|
-
helperText="Helper text"
|
|
77
|
-
/>
|
|
78
|
-
<Input
|
|
79
|
-
icon="star"
|
|
80
|
-
label="Input label"
|
|
81
|
-
placeholder="Input with icon"
|
|
82
|
-
helperText="Helper text"
|
|
83
|
-
/>
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
<h2>Textarea</h2>
|
|
87
|
-
<div class="controls-wrapper">
|
|
88
|
-
<Textarea
|
|
89
|
-
label="Textarea label"
|
|
90
|
-
placeholder="Placeholder"
|
|
91
|
-
helperText="Helper text"
|
|
92
|
-
/>
|
|
93
|
-
|
|
94
|
-
<Textarea
|
|
95
|
-
label="Textarea label"
|
|
96
|
-
value="Value"
|
|
97
|
-
placeholder="Placeholder"
|
|
98
|
-
helperText="Helper text"
|
|
99
|
-
/>
|
|
100
|
-
|
|
101
|
-
<Textarea
|
|
102
|
-
label="Textarea label"
|
|
103
|
-
placeholder="Placeholder"
|
|
104
|
-
helperText="Helper text"
|
|
105
|
-
disabled
|
|
106
|
-
/>
|
|
107
|
-
|
|
108
|
-
<Textarea
|
|
109
|
-
label="Textarea label"
|
|
110
|
-
value="Value"
|
|
111
|
-
placeholder="Placeholder"
|
|
112
|
-
helperText="Helper text"
|
|
113
|
-
disabled
|
|
114
|
-
/>
|
|
115
|
-
|
|
116
|
-
<Textarea
|
|
117
|
-
label="Textarea label"
|
|
118
|
-
value="Value"
|
|
119
|
-
placeholder="Placeholder"
|
|
120
|
-
helperText="Helper text"
|
|
121
|
-
readonly
|
|
122
|
-
/>
|
|
123
|
-
|
|
124
|
-
<Textarea
|
|
125
|
-
label="Textarea label"
|
|
126
|
-
placeholder="Placeholder"
|
|
127
|
-
helperText="Helper text"
|
|
128
|
-
status="error"
|
|
129
|
-
/>
|
|
130
|
-
|
|
131
|
-
<Textarea
|
|
132
|
-
label="Textarea label"
|
|
133
|
-
placeholder="Placeholder"
|
|
134
|
-
helperText="Helper text"
|
|
135
|
-
status="success"
|
|
136
|
-
/>
|
|
137
|
-
<Textarea
|
|
138
|
-
icon="star"
|
|
139
|
-
label="Textarea label"
|
|
140
|
-
placeholder="Textarea with icon"
|
|
141
|
-
helperText="Helper text"
|
|
142
|
-
/>
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
<h2>Select</h2>
|
|
146
|
-
<div class="controls-wrapper">
|
|
147
|
-
<Select
|
|
148
|
-
label="Select label"
|
|
149
|
-
placeholder="Select an option"
|
|
150
|
-
helperText="Helper text"
|
|
151
|
-
/>
|
|
152
|
-
<Select
|
|
153
|
-
label="Select label"
|
|
154
|
-
placeholder="Select an option"
|
|
155
|
-
options={[
|
|
156
|
-
{ label: 'Option 1', value: '1' },
|
|
157
|
-
{ label: 'Option 2', value: '2', selected: true },
|
|
158
|
-
{ label: 'Option 3', value: '3' },
|
|
159
|
-
]}
|
|
160
|
-
helperText="Helper text"
|
|
161
|
-
/>
|
|
162
|
-
<Select
|
|
163
|
-
label="Select label"
|
|
164
|
-
placeholder="Select an option"
|
|
165
|
-
helperText="Helper text"
|
|
166
|
-
disabled
|
|
167
|
-
/>
|
|
168
|
-
<Select
|
|
169
|
-
label="Select label"
|
|
170
|
-
placeholder="Select an option"
|
|
171
|
-
options={[
|
|
172
|
-
{ label: 'Option 1', value: '1' },
|
|
173
|
-
{ label: 'Option 2', value: '2', selected: true },
|
|
174
|
-
{ label: 'Option 3', value: '3' },
|
|
21
|
+
<Tab
|
|
22
|
+
tabs={[
|
|
23
|
+
{ label: 'Tab 1', active: true },
|
|
24
|
+
{ label: 'Tab 2' },
|
|
25
|
+
{ label: 'Tab 2' },
|
|
175
26
|
]}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
placeholder="Select an option"
|
|
182
|
-
helperText="Helper text"
|
|
183
|
-
status="error"
|
|
184
|
-
/>
|
|
185
|
-
<Select
|
|
186
|
-
label="Select label"
|
|
187
|
-
placeholder="Select an option"
|
|
188
|
-
options={[
|
|
189
|
-
{ label: 'Option 1', value: '1' },
|
|
190
|
-
{ label: 'Option 2', value: '2', selected: true },
|
|
191
|
-
{ label: 'Option 3', value: '3' },
|
|
192
|
-
]}
|
|
193
|
-
helperText="Helper text"
|
|
194
|
-
status="success"
|
|
195
|
-
/>
|
|
27
|
+
>
|
|
28
|
+
<TabItem active> Tab 1 </TabItem>
|
|
29
|
+
<TabItem> Tab 2 </TabItem>
|
|
30
|
+
<TabItem> Tab 3 </TabItem>
|
|
31
|
+
</Tab>
|
|
196
32
|
</div>
|
|
197
|
-
</
|
|
198
|
-
</
|
|
199
|
-
</
|
|
33
|
+
</main>
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
|
200
36
|
|
|
201
37
|
<style>
|
|
202
|
-
|
|
38
|
+
html,
|
|
39
|
+
body {
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
203
42
|
|
|
204
43
|
.content {
|
|
205
44
|
padding: var(--ac-spacing-8) var(--ac-spacing-8) 500px;
|
package/src/types/index.d.ts
CHANGED
|
@@ -28,4 +28,12 @@ export const Textarea: Textarea
|
|
|
28
28
|
|
|
29
29
|
// Select component
|
|
30
30
|
export type Select = typeof import('../index.js').Select
|
|
31
|
-
export const Select: Select
|
|
31
|
+
export const Select: Select
|
|
32
|
+
|
|
33
|
+
// Tab component
|
|
34
|
+
export type Tab = typeof import('../index.js').Tab
|
|
35
|
+
export const Tab: Tab
|
|
36
|
+
|
|
37
|
+
// TabItem component
|
|
38
|
+
export type TabItem = typeof import('../index.js').TabItem
|
|
39
|
+
export const TabItem: TabItem
|
package/src/utils/tab.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export const handleTabButtonClick = (button: HTMLButtonElement) => {
|
|
2
|
+
const tab = button.closest('[data-tab]') as HTMLElement
|
|
3
|
+
|
|
4
|
+
const tabButtons = tab.querySelectorAll(
|
|
5
|
+
':scope > [data-tab-header] [data-tab-button]',
|
|
6
|
+
) as NodeListOf<HTMLElement>
|
|
7
|
+
const tabPanes = tab.querySelectorAll(
|
|
8
|
+
':scope > [data-tab-body] > [data-tab-pane]',
|
|
9
|
+
) as NodeListOf<HTMLElement>
|
|
10
|
+
|
|
11
|
+
desactivateAll(tabButtons, tabPanes)
|
|
12
|
+
activateTab(button, tabButtons, tabPanes)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const desactivateAll = (
|
|
16
|
+
tabButtons: NodeListOf<HTMLElement>,
|
|
17
|
+
tabPanes: NodeListOf<HTMLElement>,
|
|
18
|
+
) => {
|
|
19
|
+
tabButtons.forEach((button) => button.removeAttribute('data-active'))
|
|
20
|
+
tabPanes.forEach((pane) => pane.removeAttribute('data-active'))
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const activateTab = (
|
|
24
|
+
button: HTMLButtonElement,
|
|
25
|
+
tabButtons: NodeListOf<HTMLElement>,
|
|
26
|
+
tabPanes: NodeListOf<HTMLElement>,
|
|
27
|
+
) => {
|
|
28
|
+
const index = Array.from(tabButtons).indexOf(button)
|
|
29
|
+
|
|
30
|
+
button.setAttribute('data-active', 'true')
|
|
31
|
+
if (tabPanes[index]) tabPanes[index].setAttribute('data-active', 'true')
|
|
32
|
+
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
export const iconsCategories: string[] = [
|
|
2
|
-
'home',
|
|
3
|
-
'user',
|
|
4
|
-
'dashboard',
|
|
5
|
-
'security',
|
|
6
|
-
'help-&-support',
|
|
7
|
-
'links-&-share',
|
|
8
|
-
'layouts',
|
|
9
|
-
'alignments',
|
|
10
|
-
'upload-&-download',
|
|
11
|
-
'calendar',
|
|
12
|
-
'edit',
|
|
13
|
-
'border-&-layer',
|
|
14
|
-
'folder',
|
|
15
|
-
'file',
|
|
16
|
-
'botes-&-clipboard',
|
|
17
|
-
'shapes',
|
|
18
|
-
'settings',
|
|
19
|
-
'arrows',
|
|
20
|
-
'bag',
|
|
21
|
-
'time',
|
|
22
|
-
'audio',
|
|
23
|
-
'video-&-camera',
|
|
24
|
-
'photos',
|
|
25
|
-
'phone',
|
|
26
|
-
'controller',
|
|
27
|
-
'email',
|
|
28
|
-
'notification',
|
|
29
|
-
'laptop-&-desktop',
|
|
30
|
-
'other-devices',
|
|
31
|
-
'internet-&-script',
|
|
32
|
-
'browser',
|
|
33
|
-
'cloud',
|
|
34
|
-
'travel',
|
|
35
|
-
'validation',
|
|
36
|
-
'shopping',
|
|
37
|
-
'money-&-payment',
|
|
38
|
-
'health',
|
|
39
|
-
'graph',
|
|
40
|
-
'emoji',
|
|
41
|
-
]
|
package/src/layouts/Layout.astro
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import '../css/main.css'
|
|
3
|
-
|
|
4
|
-
interface Props {
|
|
5
|
-
title: string
|
|
6
|
-
class?: string
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const { title } = Astro.props
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
<!doctype html>
|
|
13
|
-
<html lang="en" class="dark">
|
|
14
|
-
<head>
|
|
15
|
-
<meta charset="UTF-8" />
|
|
16
|
-
<meta name="description" content="Astro description" />
|
|
17
|
-
<meta name="viewport" content="width=device-width" />
|
|
18
|
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
19
|
-
<meta name="generator" content={Astro.generator} />
|
|
20
|
-
<title>{title}</title>
|
|
21
|
-
</head>
|
|
22
|
-
<body>
|
|
23
|
-
<slot />
|
|
24
|
-
</body>
|
|
25
|
-
</html>
|
|
26
|
-
|
|
27
|
-
<style>
|
|
28
|
-
html,
|
|
29
|
-
body {
|
|
30
|
-
margin: 0;
|
|
31
|
-
}
|
|
32
|
-
</style>
|
package/src/pages/buttons.astro
DELETED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Layout from '../layouts/Layout.astro'
|
|
3
|
-
import Button from '../components/Button.astro'
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
<Layout title="Welcome to Astro.">
|
|
7
|
-
<main class="content">
|
|
8
|
-
<h1>Buttons</h1>
|
|
9
|
-
|
|
10
|
-
<div>
|
|
11
|
-
<p>Primary buttons</p>
|
|
12
|
-
<div>
|
|
13
|
-
<Button size="small" icon="arrow-right" label="Primary Button" />
|
|
14
|
-
<Button icon="arrow-right" label="Primary Button" />
|
|
15
|
-
<Button size="small" icon="arrow-right" />
|
|
16
|
-
<Button icon="arrow-right" />
|
|
17
|
-
</div>
|
|
18
|
-
<div>
|
|
19
|
-
<Button
|
|
20
|
-
href="#"
|
|
21
|
-
size="small"
|
|
22
|
-
icon="arrow-right"
|
|
23
|
-
label="Primary Button"
|
|
24
|
-
/>
|
|
25
|
-
<Button href="#" icon="arrow-right" label="Primary Button" />
|
|
26
|
-
<Button href="#" size="small" icon="arrow-right" />
|
|
27
|
-
<Button href="#" icon="arrow-right" />
|
|
28
|
-
</div>
|
|
29
|
-
<div>
|
|
30
|
-
<Button
|
|
31
|
-
size="small"
|
|
32
|
-
icon="arrow-right"
|
|
33
|
-
label="Primary Button"
|
|
34
|
-
disabled
|
|
35
|
-
/>
|
|
36
|
-
<Button icon="arrow-right" label="Primary Button" disabled />
|
|
37
|
-
<Button size="small" icon="arrow-right" disabled />
|
|
38
|
-
<Button icon="arrow-right" disabled />
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
<p>Dark buttons</p>
|
|
42
|
-
|
|
43
|
-
<div>
|
|
44
|
-
<Button
|
|
45
|
-
variant="dark"
|
|
46
|
-
size="small"
|
|
47
|
-
icon="arrow-right"
|
|
48
|
-
label="dark Button"
|
|
49
|
-
/>
|
|
50
|
-
<Button variant="dark" icon="arrow-right" label="dark Button" />
|
|
51
|
-
<Button variant="dark" size="small" icon="arrow-right" />
|
|
52
|
-
<Button variant="dark" icon="arrow-right" />
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<div>
|
|
56
|
-
<Button
|
|
57
|
-
variant="dark"
|
|
58
|
-
size="small"
|
|
59
|
-
icon="arrow-right"
|
|
60
|
-
label="dark Button"
|
|
61
|
-
disabled
|
|
62
|
-
/>
|
|
63
|
-
<Button
|
|
64
|
-
variant="dark"
|
|
65
|
-
icon="arrow-right"
|
|
66
|
-
label="dark Button"
|
|
67
|
-
disabled
|
|
68
|
-
/>
|
|
69
|
-
<Button variant="dark" size="small" icon="arrow-right" disabled />
|
|
70
|
-
<Button variant="dark" icon="arrow-right" disabled />
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<p>Secondary buttons</p>
|
|
74
|
-
<div>
|
|
75
|
-
<Button size="small" icon="arrow-right" label="Primary Button" />
|
|
76
|
-
<Button icon="arrow-right" label="Primary Button" />
|
|
77
|
-
<Button size="small" icon="arrow-right" />
|
|
78
|
-
<Button icon="arrow-right" />
|
|
79
|
-
<Button
|
|
80
|
-
variant="secondary"
|
|
81
|
-
size="small"
|
|
82
|
-
icon="arrow-right"
|
|
83
|
-
label="Primary Button"
|
|
84
|
-
/>
|
|
85
|
-
<Button variant="secondary" icon="arrow-right" label="Primary Button" />
|
|
86
|
-
<Button variant="secondary" size="small" icon="arrow-right" />
|
|
87
|
-
<Button variant="secondary" icon="arrow-right" />
|
|
88
|
-
</div>
|
|
89
|
-
<div>
|
|
90
|
-
<Button
|
|
91
|
-
variant="secondary"
|
|
92
|
-
size="small"
|
|
93
|
-
icon="arrow-right"
|
|
94
|
-
label="Primary Button"
|
|
95
|
-
disabled
|
|
96
|
-
/>
|
|
97
|
-
<Button
|
|
98
|
-
variant="secondary"
|
|
99
|
-
icon="arrow-right"
|
|
100
|
-
label="Primary Button"
|
|
101
|
-
disabled
|
|
102
|
-
/>
|
|
103
|
-
<Button variant="secondary" size="small" icon="arrow-right" disabled />
|
|
104
|
-
<Button variant="secondary" icon="arrow-right" disabled />
|
|
105
|
-
</div>
|
|
106
|
-
<p>light buttons</p>
|
|
107
|
-
<div>
|
|
108
|
-
<Button
|
|
109
|
-
variant="light"
|
|
110
|
-
size="small"
|
|
111
|
-
icon="arrow-right"
|
|
112
|
-
label="light Button"
|
|
113
|
-
/>
|
|
114
|
-
<Button variant="light" icon="arrow-right" label="light Button" />
|
|
115
|
-
<Button variant="light" size="small" icon="arrow-right" />
|
|
116
|
-
<Button variant="light" icon="arrow-right" />
|
|
117
|
-
</div>
|
|
118
|
-
<div>
|
|
119
|
-
<Button
|
|
120
|
-
variant="light"
|
|
121
|
-
size="small"
|
|
122
|
-
icon="arrow-right"
|
|
123
|
-
label="light Button"
|
|
124
|
-
disabled
|
|
125
|
-
/>
|
|
126
|
-
<Button
|
|
127
|
-
variant="light"
|
|
128
|
-
icon="arrow-right"
|
|
129
|
-
label="light Button"
|
|
130
|
-
disabled
|
|
131
|
-
/>
|
|
132
|
-
<Button variant="light" size="small" icon="arrow-right" disabled />
|
|
133
|
-
<Button variant="light" icon="arrow-right" disabled />
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
</main>
|
|
137
|
-
</Layout>
|
|
138
|
-
|
|
139
|
-
<style>
|
|
140
|
-
.content {
|
|
141
|
-
padding: var(--ac-spacing-8);
|
|
142
|
-
}
|
|
143
|
-
</style>
|
package/src/pages/controls.astro
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Layout from '../layouts/Layout.astro'
|
|
3
|
-
import Checkbox from '../components/Checkbox.astro'
|
|
4
|
-
import Radio from '../components/Radio.astro'
|
|
5
|
-
import Switch from '../components/Switch.astro'
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<Layout title="Welcome to Astro.">
|
|
9
|
-
<main class="content">
|
|
10
|
-
<h1>Controls</h1>
|
|
11
|
-
|
|
12
|
-
<div>
|
|
13
|
-
<h2>Checkbox</h2>
|
|
14
|
-
<div>
|
|
15
|
-
<Checkbox label="Checkbox" />
|
|
16
|
-
<br />
|
|
17
|
-
<br />
|
|
18
|
-
<Checkbox label="Checkbox checked" checked />
|
|
19
|
-
<br />
|
|
20
|
-
<br />
|
|
21
|
-
<Checkbox label="Checkbox disabled" disabled />
|
|
22
|
-
<br />
|
|
23
|
-
<br />
|
|
24
|
-
<Checkbox label="Checkbox checked disabled" checked disabled />
|
|
25
|
-
<br />
|
|
26
|
-
<br />
|
|
27
|
-
<Checkbox label="Checkbox error" error />
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
<div>
|
|
31
|
-
<h2>Radiobutton</h2>
|
|
32
|
-
<div>
|
|
33
|
-
<Radio label="Radiobutton" />
|
|
34
|
-
<br />
|
|
35
|
-
<br />
|
|
36
|
-
<Radio label="Radiobutton checked" checked />
|
|
37
|
-
<br />
|
|
38
|
-
<br />
|
|
39
|
-
<Radio label="Radiobutton disabled" disabled />
|
|
40
|
-
<br />
|
|
41
|
-
<br />
|
|
42
|
-
<Radio label="Radiobutton checked disabled" checked disabled />
|
|
43
|
-
<br />
|
|
44
|
-
<br />
|
|
45
|
-
<Radio label="Radiobutton error" error />
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<div>
|
|
49
|
-
<h2>Switch</h2>
|
|
50
|
-
<div>
|
|
51
|
-
<Switch label="Switch Off" />
|
|
52
|
-
<br />
|
|
53
|
-
<br />
|
|
54
|
-
<Switch label="Switch On" checked />
|
|
55
|
-
<br />
|
|
56
|
-
<br />
|
|
57
|
-
<Switch label="Switch Off disabled" disabled />
|
|
58
|
-
<br />
|
|
59
|
-
<br />
|
|
60
|
-
<Switch label="Switch On disabled" checked disabled />
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
</main>
|
|
64
|
-
</Layout>
|
|
65
|
-
|
|
66
|
-
<style>
|
|
67
|
-
.content {
|
|
68
|
-
padding: var(--ac-spacing-8);
|
|
69
|
-
}
|
|
70
|
-
</style>
|
package/src/pages/icons.astro
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { icons } from '../data/icons.ts'
|
|
3
|
-
import { iconsCategories } from '../data/icons-categories.ts'
|
|
4
|
-
import Layout from '../layouts/Layout.astro'
|
|
5
|
-
import Icon from '../components/Icon.astro'
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<Layout title="Welcome to Astro.">
|
|
9
|
-
<main class="content">
|
|
10
|
-
<h1>Icons</h1>
|
|
11
|
-
|
|
12
|
-
<div>
|
|
13
|
-
<ul>
|
|
14
|
-
{
|
|
15
|
-
iconsCategories.map((category) => {
|
|
16
|
-
const categoryIcons = icons.filter(
|
|
17
|
-
(icon) => icon.category === category
|
|
18
|
-
)
|
|
19
|
-
|
|
20
|
-
return categoryIcons.length > 0 ? (
|
|
21
|
-
<li>
|
|
22
|
-
<h3>{category}</h3>
|
|
23
|
-
<ul class="icon-list">
|
|
24
|
-
{categoryIcons.map((icon) => (
|
|
25
|
-
<li class="icon-wrapper">
|
|
26
|
-
<Icon icon={icon.name} />
|
|
27
|
-
<span>{icon.name}</span>
|
|
28
|
-
</li>
|
|
29
|
-
))}
|
|
30
|
-
</ul>
|
|
31
|
-
</li>
|
|
32
|
-
) : null
|
|
33
|
-
})
|
|
34
|
-
}
|
|
35
|
-
</ul>
|
|
36
|
-
</div>
|
|
37
|
-
</main>
|
|
38
|
-
</Layout>
|
|
39
|
-
|
|
40
|
-
<style>
|
|
41
|
-
/*@import '../css/preflight.css';*/
|
|
42
|
-
|
|
43
|
-
.content {
|
|
44
|
-
padding: var(--ac-spacing-8);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.icon-list {
|
|
48
|
-
display: grid;
|
|
49
|
-
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
50
|
-
gap: 1rem;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.icon-wrapper {
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
align-items: center;
|
|
57
|
-
border: 1px solid rgba(var(--ac-primary), 0.75);
|
|
58
|
-
border-radius: var(--ac-rounded-xl);
|
|
59
|
-
padding: var(--ac-spacing-4);
|
|
60
|
-
gap: var(--ac-spacing-2);
|
|
61
|
-
font-size: var(--ac-text-sm);
|
|
62
|
-
background-color: rgba(var(--ac-primary), 0.1);
|
|
63
|
-
|
|
64
|
-
svg {
|
|
65
|
-
width: var(--ac-spacing-8);
|
|
66
|
-
height: var(--ac-spacing-8);
|
|
67
|
-
color: rgb(var(--ac-primary));
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
span {
|
|
71
|
-
color: rgba(var(--ac-dark), 0.75);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
</style>
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { icons } from '../data/icons.ts'
|
|
3
|
-
import { iconsCategories } from '../data/icons-categories.ts'
|
|
4
|
-
import Layout from '../layouts/Layout.astro'
|
|
5
|
-
import Icon from '../components/Icon.astro'
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<Layout title="Welcome to Astro.">
|
|
9
|
-
<main class="content">
|
|
10
|
-
<h1>Icons</h1>
|
|
11
|
-
|
|
12
|
-
<div>
|
|
13
|
-
<ul>
|
|
14
|
-
{
|
|
15
|
-
iconsCategories.map((category) => {
|
|
16
|
-
const categoryIcons = icons.filter(
|
|
17
|
-
(icon) => icon.category === category
|
|
18
|
-
)
|
|
19
|
-
|
|
20
|
-
return categoryIcons.length > 0 ? (
|
|
21
|
-
<li>
|
|
22
|
-
<h3>{category}</h3>
|
|
23
|
-
<ul class="icon-list">
|
|
24
|
-
{categoryIcons.map((icon) => (
|
|
25
|
-
<li class="icon-wrapper">
|
|
26
|
-
<Icon icon={icon.name} />
|
|
27
|
-
<span>{icon.name}</span>
|
|
28
|
-
</li>
|
|
29
|
-
))}
|
|
30
|
-
</ul>
|
|
31
|
-
</li>
|
|
32
|
-
) : null
|
|
33
|
-
})
|
|
34
|
-
}
|
|
35
|
-
</ul>
|
|
36
|
-
</div>
|
|
37
|
-
</main>
|
|
38
|
-
</Layout>
|
|
39
|
-
|
|
40
|
-
<style>
|
|
41
|
-
/*@import '../css/preflight.css';*/
|
|
42
|
-
|
|
43
|
-
.content {
|
|
44
|
-
padding: var(--ac-spacing-8);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.icon-list {
|
|
48
|
-
display: grid;
|
|
49
|
-
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
50
|
-
gap: 1rem;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.icon-wrapper {
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
align-items: center;
|
|
57
|
-
border: 1px solid rgba(var(--ac-primary), 0.75);
|
|
58
|
-
border-radius: var(--ac-rounded-xl);
|
|
59
|
-
padding: var(--ac-spacing-4);
|
|
60
|
-
gap: var(--ac-spacing-2);
|
|
61
|
-
font-size: var(--ac-text-sm);
|
|
62
|
-
background-color: rgba(var(--ac-primary), 0.1);
|
|
63
|
-
|
|
64
|
-
svg {
|
|
65
|
-
width: var(--ac-spacing-8);
|
|
66
|
-
height: var(--ac-spacing-8);
|
|
67
|
-
color: rgb(var(--ac-primary));
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
span {
|
|
71
|
-
color: rgba(var(--ac-dark), 0.75);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
</style>
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { icons } from '../data/icons.ts'
|
|
3
|
-
import { iconsCategories } from '../data/icons-categories.ts'
|
|
4
|
-
import Layout from '../layouts/Layout.astro'
|
|
5
|
-
import Button from '../components/Button.astro'
|
|
6
|
-
import Icon from '../components/Icon.astro'
|
|
7
|
-
import Checkbox from '../components/Checkbox.astro'
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
<Layout title="Welcome to Astro.">
|
|
11
|
-
<main class="content">
|
|
12
|
-
<h1>Components</h1>
|
|
13
|
-
|
|
14
|
-
<div>
|
|
15
|
-
<h2 class="text-2xl">Buttons</h2>
|
|
16
|
-
<p>Primary buttons</p>
|
|
17
|
-
<div>
|
|
18
|
-
<Button size="small" icon="arrow-right" label="Primary Button" />
|
|
19
|
-
<Button icon="arrow-right" label="Primary Button" />
|
|
20
|
-
<Button size="small" icon="arrow-right" />
|
|
21
|
-
<Button icon="arrow-right" />
|
|
22
|
-
</div>
|
|
23
|
-
<div>
|
|
24
|
-
<Button
|
|
25
|
-
href="#"
|
|
26
|
-
size="small"
|
|
27
|
-
icon="arrow-right"
|
|
28
|
-
label="Primary Button"
|
|
29
|
-
/>
|
|
30
|
-
<Button href="#" icon="arrow-right" label="Primary Button" />
|
|
31
|
-
<Button href="#" size="small" icon="arrow-right" />
|
|
32
|
-
<Button href="#" icon="arrow-right" />
|
|
33
|
-
</div>
|
|
34
|
-
<div>
|
|
35
|
-
<Button
|
|
36
|
-
size="small"
|
|
37
|
-
icon="arrow-right"
|
|
38
|
-
label="Primary Button"
|
|
39
|
-
disabled
|
|
40
|
-
/>
|
|
41
|
-
<Button icon="arrow-right" label="Primary Button" disabled />
|
|
42
|
-
<Button size="small" icon="arrow-right" disabled />
|
|
43
|
-
<Button icon="arrow-right" disabled />
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<p>Dark buttons</p>
|
|
47
|
-
|
|
48
|
-
<div>
|
|
49
|
-
<Button
|
|
50
|
-
variant="dark"
|
|
51
|
-
size="small"
|
|
52
|
-
icon="arrow-right"
|
|
53
|
-
label="dark Button"
|
|
54
|
-
/>
|
|
55
|
-
<Button variant="dark" icon="arrow-right" label="dark Button" />
|
|
56
|
-
<Button variant="dark" size="small" icon="arrow-right" />
|
|
57
|
-
<Button variant="dark" icon="arrow-right" />
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
<div>
|
|
61
|
-
<Button
|
|
62
|
-
variant="dark"
|
|
63
|
-
size="small"
|
|
64
|
-
icon="arrow-right"
|
|
65
|
-
label="dark Button"
|
|
66
|
-
disabled
|
|
67
|
-
/>
|
|
68
|
-
<Button
|
|
69
|
-
variant="dark"
|
|
70
|
-
icon="arrow-right"
|
|
71
|
-
label="dark Button"
|
|
72
|
-
disabled
|
|
73
|
-
/>
|
|
74
|
-
<Button variant="dark" size="small" icon="arrow-right" disabled />
|
|
75
|
-
<Button variant="dark" icon="arrow-right" disabled />
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
<div class="dark-bg">
|
|
79
|
-
<p>Secondary buttons</p>
|
|
80
|
-
<div>
|
|
81
|
-
<Button
|
|
82
|
-
variant="secondary"
|
|
83
|
-
size="small"
|
|
84
|
-
icon="arrow-right"
|
|
85
|
-
label="Primary Button"
|
|
86
|
-
/>
|
|
87
|
-
<Button
|
|
88
|
-
variant="secondary"
|
|
89
|
-
icon="arrow-right"
|
|
90
|
-
label="Primary Button"
|
|
91
|
-
/>
|
|
92
|
-
<Button variant="secondary" size="small" icon="arrow-right" />
|
|
93
|
-
<Button variant="secondary" icon="arrow-right" />
|
|
94
|
-
</div>
|
|
95
|
-
<div>
|
|
96
|
-
<Button
|
|
97
|
-
variant="secondary"
|
|
98
|
-
size="small"
|
|
99
|
-
icon="arrow-right"
|
|
100
|
-
label="Primary Button"
|
|
101
|
-
disabled
|
|
102
|
-
/>
|
|
103
|
-
<Button
|
|
104
|
-
variant="secondary"
|
|
105
|
-
icon="arrow-right"
|
|
106
|
-
label="Primary Button"
|
|
107
|
-
disabled
|
|
108
|
-
/>
|
|
109
|
-
<Button
|
|
110
|
-
variant="secondary"
|
|
111
|
-
size="small"
|
|
112
|
-
icon="arrow-right"
|
|
113
|
-
disabled
|
|
114
|
-
/>
|
|
115
|
-
<Button variant="secondary" icon="arrow-right" disabled />
|
|
116
|
-
</div>
|
|
117
|
-
<p>light buttons</p>
|
|
118
|
-
<div>
|
|
119
|
-
<Button
|
|
120
|
-
variant="light"
|
|
121
|
-
size="small"
|
|
122
|
-
icon="arrow-right"
|
|
123
|
-
label="light Button"
|
|
124
|
-
/>
|
|
125
|
-
<Button variant="light" icon="arrow-right" label="light Button" />
|
|
126
|
-
<Button variant="light" size="small" icon="arrow-right" />
|
|
127
|
-
<Button variant="light" icon="arrow-right" />
|
|
128
|
-
</div>
|
|
129
|
-
<div>
|
|
130
|
-
<Button
|
|
131
|
-
variant="light"
|
|
132
|
-
size="small"
|
|
133
|
-
icon="arrow-right"
|
|
134
|
-
label="light Button"
|
|
135
|
-
disabled
|
|
136
|
-
/>
|
|
137
|
-
<Button
|
|
138
|
-
variant="light"
|
|
139
|
-
icon="arrow-right"
|
|
140
|
-
label="light Button"
|
|
141
|
-
disabled
|
|
142
|
-
/>
|
|
143
|
-
<Button variant="light" size="small" icon="arrow-right" disabled />
|
|
144
|
-
<Button variant="light" icon="arrow-right" disabled />
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
|
|
148
|
-
<h2 class="text-2xl">Checkbox</h2>
|
|
149
|
-
<div>
|
|
150
|
-
<Checkbox />
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</main>
|
|
154
|
-
</Layout>
|
|
155
|
-
|
|
156
|
-
<style>
|
|
157
|
-
/*@import '../css/preflight.css';*/
|
|
158
|
-
|
|
159
|
-
.content {
|
|
160
|
-
padding: var(--ac-spacing-8);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.dark-bg {
|
|
164
|
-
background-color: rgb(var(--ac-dark));
|
|
165
|
-
color: rgb(var(--ac-white));
|
|
166
|
-
padding: var(--ac-spacing-8);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.icon-list {
|
|
170
|
-
display: grid;
|
|
171
|
-
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
172
|
-
gap: 1rem;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.icon-wrapper {
|
|
176
|
-
display: flex;
|
|
177
|
-
flex-direction: column;
|
|
178
|
-
align-items: center;
|
|
179
|
-
border: 1px solid rgba(var(--ac-primary), 0.75);
|
|
180
|
-
border-radius: var(--ac-rounded-xl);
|
|
181
|
-
padding: var(--ac-spacing-4);
|
|
182
|
-
gap: var(--ac-spacing-2);
|
|
183
|
-
font-size: var(--ac-text-sm);
|
|
184
|
-
background-color: rgba(var(--ac-primary), 0.1);
|
|
185
|
-
|
|
186
|
-
svg {
|
|
187
|
-
width: var(--ac-spacing-8);
|
|
188
|
-
height: var(--ac-spacing-8);
|
|
189
|
-
color: rgb(var(--ac-primary));
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
span {
|
|
193
|
-
color: rgba(var(--ac-dark), 0.75);
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
</style>
|