@abstraks-dev/ui-library 2.1.0 → 2.2.0
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 +258 -3
- package/dist/__tests__/Camera.test.js +1 -1
- package/dist/icons/Camera.js +1 -1
- package/dist/icons/Check.js +33 -0
- package/dist/icons/ChevronDownCircle.js +33 -0
- package/dist/icons/ChevronLeft.js +33 -0
- package/dist/icons/ChevronRight.js +33 -0
- package/dist/icons/ChevronRightCircle.js +33 -0
- package/dist/icons/ChevronUpCircle.js +33 -0
- package/dist/icons/index.js +42 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -5,27 +5,282 @@ A comprehensive React UI component library with modern styling and robust testin
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install ui-library
|
|
8
|
+
npm install @abstraks-dev/ui-library
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```jsx
|
|
14
|
-
import {
|
|
15
|
-
|
|
14
|
+
import {
|
|
15
|
+
Button,
|
|
16
|
+
Card,
|
|
17
|
+
TextInput,
|
|
18
|
+
Header,
|
|
19
|
+
Hero,
|
|
20
|
+
Alert,
|
|
21
|
+
} from '@abstraks-dev/ui-library';
|
|
22
|
+
import '@abstraks-dev/ui-library/dist/styles/main.css';
|
|
16
23
|
|
|
17
24
|
function App() {
|
|
18
25
|
return (
|
|
19
26
|
<div>
|
|
27
|
+
<Header />
|
|
28
|
+
<Hero title='Welcome' subtitle='Get started with our UI library' />
|
|
29
|
+
<Alert type='success' message='Library loaded successfully!' />
|
|
20
30
|
<Card>
|
|
21
31
|
<TextInput label='Name' placeholder='Enter your name' />
|
|
22
32
|
<Button variant='primary'>Submit</Button>
|
|
33
|
+
<Button variant='transparent'>Cancel</Button>
|
|
23
34
|
</Card>
|
|
24
35
|
</div>
|
|
25
36
|
);
|
|
26
37
|
}
|
|
27
38
|
```
|
|
28
39
|
|
|
40
|
+
## Available Components
|
|
41
|
+
|
|
42
|
+
### Core Components
|
|
43
|
+
|
|
44
|
+
#### Button
|
|
45
|
+
|
|
46
|
+
Multiple variants and sizes with accessibility support.
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
<Button variant="primary" size="md">Primary Button</Button>
|
|
50
|
+
<Button variant="secondary" size="lg">Secondary Button</Button>
|
|
51
|
+
<Button variant="transparent" size="sm">Transparent Button</Button>
|
|
52
|
+
<Button variant="error" isOutline={true}>Error Outline</Button>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Available variants: `primary`, `secondary`, `success`, `error`, `warning`, `transparent`
|
|
56
|
+
Available sizes: `xs`, `sm`, `md`, `lg`, `xl`
|
|
57
|
+
|
|
58
|
+
#### Card
|
|
59
|
+
|
|
60
|
+
Container component for grouping related content.
|
|
61
|
+
|
|
62
|
+
```jsx
|
|
63
|
+
<Card>
|
|
64
|
+
<h3>Card Title</h3>
|
|
65
|
+
<p>Card content goes here</p>
|
|
66
|
+
</Card>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
#### Header
|
|
70
|
+
|
|
71
|
+
Navigation header with authentication support.
|
|
72
|
+
|
|
73
|
+
```jsx
|
|
74
|
+
<Header />
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
#### Hero
|
|
78
|
+
|
|
79
|
+
Hero section component for landing pages.
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
<Hero
|
|
83
|
+
title='Welcome to Our App'
|
|
84
|
+
subtitle='Build amazing experiences with our UI library'
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Form Components
|
|
89
|
+
|
|
90
|
+
#### TextInput
|
|
91
|
+
|
|
92
|
+
Text input with label and validation support.
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
<TextInput label='Email' placeholder='Enter your email' type='email' />
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
#### TextArea
|
|
99
|
+
|
|
100
|
+
Multi-line text input.
|
|
101
|
+
|
|
102
|
+
```jsx
|
|
103
|
+
<TextArea label='Message' placeholder='Enter your message' rows={4} />
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
#### Checkbox
|
|
107
|
+
|
|
108
|
+
Checkbox input with label.
|
|
109
|
+
|
|
110
|
+
```jsx
|
|
111
|
+
<Checkbox name='subscribe' label='Subscribe to newsletter' />
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
#### Radio
|
|
115
|
+
|
|
116
|
+
Radio button input.
|
|
117
|
+
|
|
118
|
+
```jsx
|
|
119
|
+
<Radio name="gender" value="male" label="Male" />
|
|
120
|
+
<Radio name="gender" value="female" label="Female" />
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### Select
|
|
124
|
+
|
|
125
|
+
Dropdown select component.
|
|
126
|
+
|
|
127
|
+
```jsx
|
|
128
|
+
<Select
|
|
129
|
+
label='Country'
|
|
130
|
+
options={[
|
|
131
|
+
{ value: 'us', label: 'United States' },
|
|
132
|
+
{ value: 'ca', label: 'Canada' },
|
|
133
|
+
]}
|
|
134
|
+
/>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
#### FileInput
|
|
138
|
+
|
|
139
|
+
File upload component.
|
|
140
|
+
|
|
141
|
+
```jsx
|
|
142
|
+
<FileInput label='Upload Document' accept='.pdf,.doc,.docx' />
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Layout Components
|
|
146
|
+
|
|
147
|
+
#### Form
|
|
148
|
+
|
|
149
|
+
Form wrapper with validation support.
|
|
150
|
+
|
|
151
|
+
```jsx
|
|
152
|
+
<Form onSubmit={handleSubmit}>
|
|
153
|
+
<TextInput label='Name' />
|
|
154
|
+
<Button type='submit'>Submit</Button>
|
|
155
|
+
</Form>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
#### Tabs
|
|
159
|
+
|
|
160
|
+
Tabbed content component.
|
|
161
|
+
|
|
162
|
+
```jsx
|
|
163
|
+
<Tabs>
|
|
164
|
+
<Tab label='Tab 1'>Content 1</Tab>
|
|
165
|
+
<Tab label='Tab 2'>Content 2</Tab>
|
|
166
|
+
</Tabs>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Feedback Components
|
|
170
|
+
|
|
171
|
+
#### Alert
|
|
172
|
+
|
|
173
|
+
Alert messages with different types.
|
|
174
|
+
|
|
175
|
+
```jsx
|
|
176
|
+
<Alert type="success" message="Operation completed!" />
|
|
177
|
+
<Alert type="error" message="Something went wrong!" />
|
|
178
|
+
<Alert type="warning" message="Please check your input!" />
|
|
179
|
+
<Alert type="info" message="New features available!" />
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
#### Error
|
|
183
|
+
|
|
184
|
+
Error message component.
|
|
185
|
+
|
|
186
|
+
```jsx
|
|
187
|
+
<Error severity='error'>Please fill in all required fields</Error>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
#### Loader
|
|
191
|
+
|
|
192
|
+
Loading spinner component.
|
|
193
|
+
|
|
194
|
+
```jsx
|
|
195
|
+
<Loader size='large' />
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### Navigation Components
|
|
199
|
+
|
|
200
|
+
#### Search
|
|
201
|
+
|
|
202
|
+
Search input with results.
|
|
203
|
+
|
|
204
|
+
```jsx
|
|
205
|
+
<Search placeholder='Search...' onSearch={handleSearch} />
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
#### SideMenu
|
|
209
|
+
|
|
210
|
+
Collapsible side navigation menu.
|
|
211
|
+
|
|
212
|
+
```jsx
|
|
213
|
+
<SideMenu />
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Utility Components
|
|
217
|
+
|
|
218
|
+
#### Avatar
|
|
219
|
+
|
|
220
|
+
User avatar component.
|
|
221
|
+
|
|
222
|
+
```jsx
|
|
223
|
+
<Avatar src='user-photo.jpg' alt='John Doe' size='large' />
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
#### Anchor
|
|
227
|
+
|
|
228
|
+
Accessible link component.
|
|
229
|
+
|
|
230
|
+
```jsx
|
|
231
|
+
<Anchor href='/about'>About Us</Anchor>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Typography Components
|
|
235
|
+
|
|
236
|
+
#### Heading
|
|
237
|
+
|
|
238
|
+
Semantic heading component.
|
|
239
|
+
|
|
240
|
+
```jsx
|
|
241
|
+
<Heading level={1} variant="primary">Main Title</Heading>
|
|
242
|
+
<Heading level={2} variant="secondary">Subtitle</Heading>
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
#### Paragraph
|
|
246
|
+
|
|
247
|
+
Paragraph text component.
|
|
248
|
+
|
|
249
|
+
```jsx
|
|
250
|
+
<Paragraph size='large'>This is a paragraph with large text.</Paragraph>
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
#### Label
|
|
254
|
+
|
|
255
|
+
Form label component.
|
|
256
|
+
|
|
257
|
+
```jsx
|
|
258
|
+
<Label htmlFor='email' required>
|
|
259
|
+
Email Address
|
|
260
|
+
</Label>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
### Icons
|
|
264
|
+
|
|
265
|
+
The library includes a comprehensive set of icons:
|
|
266
|
+
|
|
267
|
+
```jsx
|
|
268
|
+
import {
|
|
269
|
+
Heart,
|
|
270
|
+
Home,
|
|
271
|
+
Search,
|
|
272
|
+
ArrowRight,
|
|
273
|
+
CheckCircle,
|
|
274
|
+
LoadingSpinner
|
|
275
|
+
} from '@abstraks-dev/ui-library';
|
|
276
|
+
|
|
277
|
+
<Heart size={24} color="red" />
|
|
278
|
+
<Home size={20} />
|
|
279
|
+
<ArrowRight dimensions={16} />
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
Available icons: `AccountBox`, `AccountCircle`, `ArrowIcon`, `ArrowRight`, `BookOpen`, `CameraIcon`, `CaretDown`, `CheckCircle`, `ChevronDown`, `Close`, `Comment`, `EditSquare`, `Ellipses`, `Explore`, `Filter`, `Group`, `GroupReview`, `Hamburger`, `Heart`, `Home`, `LoadingSpinner`, `LogOut`, `Magnify`, `News`, `PlusCircle`, `Review`, `SaveIcon`, `TrashX`
|
|
283
|
+
|
|
29
284
|
## Development
|
|
30
285
|
|
|
31
286
|
### Setup
|
|
@@ -24,7 +24,7 @@ describe('Camera Icon', () => {
|
|
|
24
24
|
const svg = document.querySelector('svg');
|
|
25
25
|
expect(svg).toHaveAttribute('width', '24');
|
|
26
26
|
expect(svg).toHaveAttribute('height', '24');
|
|
27
|
-
expect(svg).toHaveAttribute('viewBox', '0
|
|
27
|
+
expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
|
|
28
28
|
expect(svg).toHaveAttribute('fill', '#333333');
|
|
29
29
|
expect(svg).toHaveClass('icon');
|
|
30
30
|
expect(svg).toHaveClass('camera-icon');
|
package/dist/icons/Camera.js
CHANGED
|
@@ -11,7 +11,7 @@ const CameraIcon = ({
|
|
|
11
11
|
componentName = 'camera-icon',
|
|
12
12
|
additionalClassName = '',
|
|
13
13
|
dimensions = 24,
|
|
14
|
-
viewBox = '0
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
15
|
fill = '#333333'
|
|
16
16
|
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
17
|
className: `icon ${componentName} ${additionalClassName}`,
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Check = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const Check = ({
|
|
11
|
+
componentName = 'check-close',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.Check = Check;
|
|
26
|
+
Check.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = Check;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.ChevronDownCircle = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const ChevronDownCircle = ({
|
|
11
|
+
componentName = 'chevron-down-circle',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.ChevronDownCircle = ChevronDownCircle;
|
|
26
|
+
ChevronDownCircle.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = ChevronDownCircle;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.ChevronLeft = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const ChevronLeft = ({
|
|
11
|
+
componentName = 'chevron-left',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.ChevronLeft = ChevronLeft;
|
|
26
|
+
ChevronLeft.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = ChevronLeft;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.ChevronRight = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const ChevronRight = ({
|
|
11
|
+
componentName = 'chevron-right',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.ChevronRight = ChevronRight;
|
|
26
|
+
ChevronRight.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = ChevronRight;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.ChevronRightCircle = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const ChevronRightCircle = ({
|
|
11
|
+
componentName = 'chevron-right-circle',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M507-480 384-357l56 57 180-180-180-180-56 57 123 123ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.ChevronRightCircle = ChevronRightCircle;
|
|
26
|
+
ChevronRightCircle.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = ChevronRightCircle;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.ChevronUpCircle = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const ChevronUpCircle = ({
|
|
11
|
+
componentName = 'chevron-up-circle',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "m357-384 123-123 123 123 57-56-180-180-180 180 57 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.ChevronUpCircle = ChevronUpCircle;
|
|
26
|
+
ChevronUpCircle.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = ChevronUpCircle;
|
package/dist/icons/index.js
CHANGED
|
@@ -45,6 +45,12 @@ Object.defineProperty(exports, "CaretDown", {
|
|
|
45
45
|
return _CaretDown.CaretDown;
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
+
Object.defineProperty(exports, "Check", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () {
|
|
51
|
+
return _Check.Check;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
48
54
|
Object.defineProperty(exports, "CheckCircle", {
|
|
49
55
|
enumerable: true,
|
|
50
56
|
get: function () {
|
|
@@ -57,6 +63,36 @@ Object.defineProperty(exports, "ChevronDown", {
|
|
|
57
63
|
return _ChevronDown.ChevronDown;
|
|
58
64
|
}
|
|
59
65
|
});
|
|
66
|
+
Object.defineProperty(exports, "ChevronDownCircle", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _ChevronDownCircle.ChevronDownCircle;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(exports, "ChevronLeft", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
get: function () {
|
|
75
|
+
return _ChevronLeft.ChevronLeft;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
Object.defineProperty(exports, "ChevronRight", {
|
|
79
|
+
enumerable: true,
|
|
80
|
+
get: function () {
|
|
81
|
+
return _ChevronRight.ChevronRight;
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
Object.defineProperty(exports, "ChevronRightCircle", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () {
|
|
87
|
+
return _ChevronRightCircle.ChevronRightCircle;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
Object.defineProperty(exports, "ChevronUpCircle", {
|
|
91
|
+
enumerable: true,
|
|
92
|
+
get: function () {
|
|
93
|
+
return _ChevronUpCircle.ChevronUpCircle;
|
|
94
|
+
}
|
|
95
|
+
});
|
|
60
96
|
Object.defineProperty(exports, "Close", {
|
|
61
97
|
enumerable: true,
|
|
62
98
|
get: function () {
|
|
@@ -178,8 +214,14 @@ var _ArrowRight = require("./ArrowRight");
|
|
|
178
214
|
var _BookOpen = require("./BookOpen");
|
|
179
215
|
var _Camera = require("./Camera");
|
|
180
216
|
var _CaretDown = require("./CaretDown");
|
|
217
|
+
var _Check = require("./Check");
|
|
181
218
|
var _CheckCircle = require("./CheckCircle");
|
|
182
219
|
var _ChevronDown = require("./ChevronDown");
|
|
220
|
+
var _ChevronDownCircle = require("./ChevronDownCircle");
|
|
221
|
+
var _ChevronLeft = require("./ChevronLeft");
|
|
222
|
+
var _ChevronRight = require("./ChevronRight");
|
|
223
|
+
var _ChevronRightCircle = require("./ChevronRightCircle");
|
|
224
|
+
var _ChevronUpCircle = require("./ChevronUpCircle");
|
|
183
225
|
var _Close = require("./Close");
|
|
184
226
|
var _Comment = require("./Comment");
|
|
185
227
|
var _EditSquare = require("./EditSquare");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abstraks-dev/ui-library",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "User Interface library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -78,8 +78,8 @@
|
|
|
78
78
|
"animate.css": "^4.1.1",
|
|
79
79
|
"libphonenumber-js": "^1.12.10",
|
|
80
80
|
"react-transition-group": "^4.4.5",
|
|
81
|
-
"uuid": "^
|
|
82
|
-
"validator": "^13.15.
|
|
81
|
+
"uuid": "^13.0.0",
|
|
82
|
+
"validator": "^13.15.20"
|
|
83
83
|
},
|
|
84
84
|
"bugs": {
|
|
85
85
|
"url": "https://github.com/Abstraks-co/ui-library/issues"
|