pure-react-ui 1.4.5 → 1.4.7
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 +102 -0
- package/lib/components/Button/Button.css +170 -0
- package/lib/components/Button/Button.d.ts +11 -0
- package/lib/components/Button/Button.d.ts.map +1 -0
- package/lib/components/Button/Button.js +30 -0
- package/lib/components/Button/Button.js.map +1 -0
- package/lib/components/Card/Card.css +116 -0
- package/lib/components/Card/Card.d.ts +16 -0
- package/lib/components/Card/Card.d.ts.map +1 -0
- package/lib/components/Card/Card.js +29 -0
- package/lib/components/Card/Card.js.map +1 -0
- package/lib/components/Modal/Modal.css +197 -0
- package/lib/components/Modal/Modal.d.ts +16 -0
- package/lib/components/Modal/Modal.d.ts.map +1 -0
- package/lib/components/Modal/Modal.js +45 -0
- package/lib/components/Modal/Modal.js.map +1 -0
- package/lib/index.d.ts +7 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +4 -0
- package/lib/index.js.map +1 -0
- package/package.json +38 -54
- package/dist/components/Button/Button.d.ts +0 -4
- package/dist/components/Button/Button.d.ts.map +0 -1
- package/dist/components/Button/Button.types.d.ts +0 -14
- package/dist/components/Button/Button.types.d.ts.map +0 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +0 -1
- package/dist/index.esm.js +0 -54
- package/dist/index.esm.js.map +0 -1
- package/dist/index.js +0 -56
- package/dist/index.js.map +0 -1
- package/dist/setupTests.d.ts +0 -2
- package/dist/setupTests.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Pure React UI
|
|
2
|
+
|
|
3
|
+
A pure React UI component library built with TypeScript. No external dependencies required (except React and ReactDOM as peer dependencies).
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install pure-react-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Components
|
|
12
|
+
|
|
13
|
+
### Button
|
|
14
|
+
|
|
15
|
+
A versatile button component with multiple variants and sizes.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Button } from 'pure-react-ui';
|
|
19
|
+
|
|
20
|
+
<Button variant="primary" size="medium" onClick={handleClick}>
|
|
21
|
+
Click Me
|
|
22
|
+
</Button>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
**Props:**
|
|
26
|
+
- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' (default: 'primary')
|
|
27
|
+
- `size`: 'small' | 'medium' | 'large' (default: 'medium')
|
|
28
|
+
- `fullWidth`: boolean (default: false)
|
|
29
|
+
- `loading`: boolean (default: false)
|
|
30
|
+
- All standard button HTML attributes
|
|
31
|
+
|
|
32
|
+
### Card
|
|
33
|
+
|
|
34
|
+
A flexible card component for displaying content.
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Card } from 'pure-react-ui';
|
|
38
|
+
|
|
39
|
+
<Card
|
|
40
|
+
title="Card Title"
|
|
41
|
+
subtitle="Card Subtitle"
|
|
42
|
+
image="/path/to/image.jpg"
|
|
43
|
+
hoverable
|
|
44
|
+
shadow="medium"
|
|
45
|
+
>
|
|
46
|
+
Card content goes here
|
|
47
|
+
</Card>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
**Props:**
|
|
51
|
+
- `title`: string (optional)
|
|
52
|
+
- `subtitle`: string (optional)
|
|
53
|
+
- `image`: string (optional)
|
|
54
|
+
- `imageAlt`: string (optional)
|
|
55
|
+
- `footer`: React.ReactNode (optional)
|
|
56
|
+
- `hoverable`: boolean (default: false)
|
|
57
|
+
- `shadow`: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
|
|
58
|
+
- `onClick`: () => void (optional)
|
|
59
|
+
|
|
60
|
+
### Modal
|
|
61
|
+
|
|
62
|
+
A modal dialog component with overlay and keyboard support.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { Modal } from 'pure-react-ui';
|
|
66
|
+
|
|
67
|
+
<Modal
|
|
68
|
+
isOpen={isOpen}
|
|
69
|
+
onClose={() => setIsOpen(false)}
|
|
70
|
+
title="Modal Title"
|
|
71
|
+
size="medium"
|
|
72
|
+
>
|
|
73
|
+
Modal content goes here
|
|
74
|
+
</Modal>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
**Props:**
|
|
78
|
+
- `isOpen`: boolean (required)
|
|
79
|
+
- `onClose`: () => void (required)
|
|
80
|
+
- `title`: string (optional)
|
|
81
|
+
- `size`: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
|
|
82
|
+
- `closeOnOverlayClick`: boolean (default: true)
|
|
83
|
+
- `closeOnEscape`: boolean (default: true)
|
|
84
|
+
- `showCloseButton`: boolean (default: true)
|
|
85
|
+
|
|
86
|
+
## Styling
|
|
87
|
+
|
|
88
|
+
All components include their own CSS files and use CSS classes with the `pure-` prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:
|
|
89
|
+
|
|
90
|
+
- **Button**: `pure-button`, `pure-button--primary`, `pure-button--secondary`, etc.
|
|
91
|
+
- **Card**: `pure-card`, `pure-card--hoverable`, `pure-card--shadow-medium`, etc.
|
|
92
|
+
- **Modal**: `pure-modal`, `pure-modal__overlay`, `pure-modal__header`, etc.
|
|
93
|
+
|
|
94
|
+
Each component has its own CSS file located in:
|
|
95
|
+
- `lib/components/Button/Button.css`
|
|
96
|
+
- `lib/components/Card/Card.css`
|
|
97
|
+
- `lib/components/Modal/Modal.css`
|
|
98
|
+
|
|
99
|
+
## License
|
|
100
|
+
|
|
101
|
+
MIT
|
|
102
|
+
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/* Pure Button Component Styles */
|
|
2
|
+
.pure-button {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: 0.5rem;
|
|
7
|
+
padding: 0.625rem 1.25rem;
|
|
8
|
+
font-size: 1rem;
|
|
9
|
+
font-weight: 500;
|
|
10
|
+
line-height: 1.5;
|
|
11
|
+
text-align: center;
|
|
12
|
+
text-decoration: none;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
vertical-align: middle;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
user-select: none;
|
|
17
|
+
border: 1px solid transparent;
|
|
18
|
+
border-radius: 0.375rem;
|
|
19
|
+
transition: all 0.2s ease-in-out;
|
|
20
|
+
background-color: #007bff;
|
|
21
|
+
color: #ffffff;
|
|
22
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pure-button:hover:not(.pure-button--disabled) {
|
|
26
|
+
background-color: #0056b3;
|
|
27
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|
28
|
+
transform: translateY(-1px);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.pure-button:active:not(.pure-button--disabled) {
|
|
32
|
+
transform: translateY(0);
|
|
33
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.pure-button:focus {
|
|
37
|
+
outline: none;
|
|
38
|
+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Variants */
|
|
42
|
+
.pure-button--primary {
|
|
43
|
+
background-color: #007bff;
|
|
44
|
+
color: #ffffff;
|
|
45
|
+
border-color: #007bff;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.pure-button--primary:hover:not(.pure-button--disabled) {
|
|
49
|
+
background-color: #0056b3;
|
|
50
|
+
border-color: #0056b3;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.pure-button--secondary {
|
|
54
|
+
background-color: #6c757d;
|
|
55
|
+
color: #ffffff;
|
|
56
|
+
border-color: #6c757d;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pure-button--secondary:hover:not(.pure-button--disabled) {
|
|
60
|
+
background-color: #545b62;
|
|
61
|
+
border-color: #545b62;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.pure-button--success {
|
|
65
|
+
background-color: #28a745;
|
|
66
|
+
color: #ffffff;
|
|
67
|
+
border-color: #28a745;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.pure-button--success:hover:not(.pure-button--disabled) {
|
|
71
|
+
background-color: #218838;
|
|
72
|
+
border-color: #218838;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.pure-button--danger {
|
|
76
|
+
background-color: #dc3545;
|
|
77
|
+
color: #ffffff;
|
|
78
|
+
border-color: #dc3545;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.pure-button--danger:hover:not(.pure-button--disabled) {
|
|
82
|
+
background-color: #c82333;
|
|
83
|
+
border-color: #c82333;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.pure-button--warning {
|
|
87
|
+
background-color: #ffc107;
|
|
88
|
+
color: #212529;
|
|
89
|
+
border-color: #ffc107;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.pure-button--warning:hover:not(.pure-button--disabled) {
|
|
93
|
+
background-color: #e0a800;
|
|
94
|
+
border-color: #e0a800;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.pure-button--info {
|
|
98
|
+
background-color: #17a2b8;
|
|
99
|
+
color: #ffffff;
|
|
100
|
+
border-color: #17a2b8;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.pure-button--info:hover:not(.pure-button--disabled) {
|
|
104
|
+
background-color: #138496;
|
|
105
|
+
border-color: #138496;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Sizes */
|
|
109
|
+
.pure-button--small {
|
|
110
|
+
padding: 0.375rem 0.75rem;
|
|
111
|
+
font-size: 0.875rem;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.pure-button--medium {
|
|
115
|
+
padding: 0.625rem 1.25rem;
|
|
116
|
+
font-size: 1rem;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.pure-button--large {
|
|
120
|
+
padding: 0.875rem 1.75rem;
|
|
121
|
+
font-size: 1.125rem;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Full Width */
|
|
125
|
+
.pure-button--full-width {
|
|
126
|
+
width: 100%;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* Loading State */
|
|
130
|
+
.pure-button--loading {
|
|
131
|
+
position: relative;
|
|
132
|
+
pointer-events: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.pure-button__spinner {
|
|
136
|
+
display: inline-block;
|
|
137
|
+
width: 1rem;
|
|
138
|
+
height: 1rem;
|
|
139
|
+
border: 2px solid currentColor;
|
|
140
|
+
border-right-color: transparent;
|
|
141
|
+
border-radius: 50%;
|
|
142
|
+
animation: pure-button-spin 0.6s linear infinite;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@keyframes pure-button-spin {
|
|
146
|
+
to {
|
|
147
|
+
transform: rotate(360deg);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.pure-button__content {
|
|
152
|
+
display: inline-flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: 0.5rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Disabled State */
|
|
158
|
+
.pure-button--disabled,
|
|
159
|
+
.pure-button:disabled {
|
|
160
|
+
opacity: 0.65;
|
|
161
|
+
cursor: not-allowed;
|
|
162
|
+
pointer-events: none;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.pure-button--disabled:hover,
|
|
166
|
+
.pure-button:disabled:hover {
|
|
167
|
+
transform: none;
|
|
168
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
169
|
+
}
|
|
170
|
+
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Button.css';
|
|
3
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
|
+
variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
5
|
+
size?: 'small' | 'medium' | 'large';
|
|
6
|
+
fullWidth?: boolean;
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export declare const Button: React.FC<ButtonProps>;
|
|
11
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+CxC,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Button.css';
|
|
3
|
+
export const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, disabled, children, className = '', onClick, ...props }) => {
|
|
4
|
+
const baseClass = 'pure-button';
|
|
5
|
+
const variantClass = `pure-button--${variant}`;
|
|
6
|
+
const sizeClass = `pure-button--${size}`;
|
|
7
|
+
const fullWidthClass = fullWidth ? 'pure-button--full-width' : '';
|
|
8
|
+
const loadingClass = loading ? 'pure-button--loading' : '';
|
|
9
|
+
const disabledClass = (disabled || loading) ? 'pure-button--disabled' : '';
|
|
10
|
+
const combinedClassName = [
|
|
11
|
+
baseClass,
|
|
12
|
+
variantClass,
|
|
13
|
+
sizeClass,
|
|
14
|
+
fullWidthClass,
|
|
15
|
+
loadingClass,
|
|
16
|
+
disabledClass,
|
|
17
|
+
className
|
|
18
|
+
].filter(Boolean).join(' ');
|
|
19
|
+
const handleClick = (e) => {
|
|
20
|
+
if (disabled || loading) {
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
onClick?.(e);
|
|
25
|
+
};
|
|
26
|
+
return (React.createElement("button", { className: combinedClassName, disabled: disabled || loading, onClick: handleClick, ...props },
|
|
27
|
+
loading && React.createElement("span", { className: "pure-button__spinner" }),
|
|
28
|
+
React.createElement("span", { className: "pure-button__content" }, children)));
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAUtB,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,aAAa,CAAC;IAChC,MAAM,YAAY,GAAG,gBAAgB,OAAO,EAAE,CAAC;IAC/C,MAAM,SAAS,GAAG,gBAAgB,IAAI,EAAE,CAAC;IACzC,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;IAClE,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3E,MAAM,iBAAiB,GAAG;QACxB,SAAS;QACT,YAAY;QACZ,SAAS;QACT,cAAc;QACd,YAAY;QACZ,aAAa;QACb,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,WAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC7D,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,gCACE,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,OAAO,EAAE,WAAW,KAChB,KAAK;QAER,OAAO,IAAI,8BAAM,SAAS,EAAC,sBAAsB,GAAG;QACrD,8BAAM,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAQ,CACjD,CACV,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/* Pure Card Component Styles */
|
|
2
|
+
.pure-card {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
background-color: #ffffff;
|
|
6
|
+
border: 1px solid #e0e0e0;
|
|
7
|
+
border-radius: 0.5rem;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
transition: all 0.3s ease-in-out;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Shadow Variants */
|
|
13
|
+
.pure-card--shadow-none {
|
|
14
|
+
box-shadow: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.pure-card--shadow-small {
|
|
18
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.pure-card--shadow-medium {
|
|
22
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pure-card--shadow-large {
|
|
26
|
+
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Hoverable */
|
|
30
|
+
.pure-card--hoverable:hover {
|
|
31
|
+
transform: translateY(-4px);
|
|
32
|
+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Clickable */
|
|
36
|
+
.pure-card--clickable {
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.pure-card--clickable:active {
|
|
41
|
+
transform: translateY(-2px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Image Container */
|
|
45
|
+
.pure-card__image-container {
|
|
46
|
+
width: 100%;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
background-color: #f5f5f5;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.pure-card__image {
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: auto;
|
|
54
|
+
display: block;
|
|
55
|
+
object-fit: cover;
|
|
56
|
+
transition: transform 0.3s ease-in-out;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pure-card--hoverable:hover .pure-card__image {
|
|
60
|
+
transform: scale(1.05);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Header */
|
|
64
|
+
.pure-card__header {
|
|
65
|
+
padding: 1.25rem 1.5rem 0.75rem;
|
|
66
|
+
border-bottom: 1px solid #f0f0f0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.pure-card__title {
|
|
70
|
+
margin: 0 0 0.5rem 0;
|
|
71
|
+
font-size: 1.25rem;
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
line-height: 1.4;
|
|
74
|
+
color: #212529;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.pure-card__subtitle {
|
|
78
|
+
margin: 0;
|
|
79
|
+
font-size: 0.875rem;
|
|
80
|
+
line-height: 1.5;
|
|
81
|
+
color: #6c757d;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Body */
|
|
85
|
+
.pure-card__body {
|
|
86
|
+
padding: 1.5rem;
|
|
87
|
+
flex: 1;
|
|
88
|
+
color: #495057;
|
|
89
|
+
line-height: 1.6;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Footer */
|
|
93
|
+
.pure-card__footer {
|
|
94
|
+
padding: 0.75rem 1.5rem;
|
|
95
|
+
border-top: 1px solid #f0f0f0;
|
|
96
|
+
background-color: #fafafa;
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: flex-end;
|
|
100
|
+
gap: 0.5rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Responsive */
|
|
104
|
+
@media (max-width: 768px) {
|
|
105
|
+
.pure-card__header,
|
|
106
|
+
.pure-card__body,
|
|
107
|
+
.pure-card__footer {
|
|
108
|
+
padding-left: 1rem;
|
|
109
|
+
padding-right: 1rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.pure-card__title {
|
|
113
|
+
font-size: 1.125rem;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Card.css';
|
|
3
|
+
export interface CardProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
subtitle?: string;
|
|
6
|
+
image?: string;
|
|
7
|
+
imageAlt?: string;
|
|
8
|
+
footer?: React.ReactNode;
|
|
9
|
+
hoverable?: boolean;
|
|
10
|
+
shadow?: 'none' | 'small' | 'medium' | 'large';
|
|
11
|
+
className?: string;
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
onClick?: () => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const Card: React.FC<CardProps>;
|
|
16
|
+
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsDpC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Card.css';
|
|
3
|
+
export const Card = ({ title, subtitle, image, imageAlt, footer, hoverable = false, shadow = 'medium', className = '', children, onClick }) => {
|
|
4
|
+
const baseClass = 'pure-card';
|
|
5
|
+
const hoverableClass = hoverable ? 'pure-card--hoverable' : '';
|
|
6
|
+
const shadowClass = `pure-card--shadow-${shadow}`;
|
|
7
|
+
const clickableClass = onClick ? 'pure-card--clickable' : '';
|
|
8
|
+
const combinedClassName = [
|
|
9
|
+
baseClass,
|
|
10
|
+
hoverableClass,
|
|
11
|
+
shadowClass,
|
|
12
|
+
clickableClass,
|
|
13
|
+
className
|
|
14
|
+
].filter(Boolean).join(' ');
|
|
15
|
+
const handleClick = () => {
|
|
16
|
+
if (onClick) {
|
|
17
|
+
onClick();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
return (React.createElement("div", { className: combinedClassName, onClick: handleClick },
|
|
21
|
+
image && (React.createElement("div", { className: "pure-card__image-container" },
|
|
22
|
+
React.createElement("img", { src: image, alt: imageAlt || title || 'Card image', className: "pure-card__image" }))),
|
|
23
|
+
(title || subtitle) && (React.createElement("div", { className: "pure-card__header" },
|
|
24
|
+
title && React.createElement("h3", { className: "pure-card__title" }, title),
|
|
25
|
+
subtitle && React.createElement("p", { className: "pure-card__subtitle" }, subtitle))),
|
|
26
|
+
React.createElement("div", { className: "pure-card__body" }, children),
|
|
27
|
+
footer && (React.createElement("div", { className: "pure-card__footer" }, footer))));
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAepB,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,QAAQ,EACjB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,OAAO,EACR,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,WAAW,CAAC;IAC9B,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/D,MAAM,WAAW,GAAG,qBAAqB,MAAM,EAAE,CAAC;IAClD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAE7D,MAAM,iBAAiB,GAAG;QACxB,SAAS;QACT,cAAc;QACd,WAAW;QACX,cAAc;QACd,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,WAAW;QACpD,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,IAAI,KAAK,IAAI,YAAY,EAAE,SAAS,EAAC,kBAAkB,GAAG,CACpF,CACP;QACA,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACtB,6BAAK,SAAS,EAAC,mBAAmB;YAC/B,KAAK,IAAI,4BAAI,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAM;YACtD,QAAQ,IAAI,2BAAG,SAAS,EAAC,qBAAqB,IAAE,QAAQ,CAAK,CAC1D,CACP;QACD,6BAAK,SAAS,EAAC,iBAAiB,IAC7B,QAAQ,CACL;QACL,MAAM,IAAI,CACT,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,MAAM,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/* Pure Modal Component Styles */
|
|
2
|
+
.pure-modal__overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
z-index: 1000;
|
|
13
|
+
padding: 1rem;
|
|
14
|
+
animation: pure-modal-overlay-fade-in 0.2s ease-out;
|
|
15
|
+
overflow-y: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@keyframes pure-modal-overlay-fade-in {
|
|
19
|
+
from {
|
|
20
|
+
opacity: 0;
|
|
21
|
+
}
|
|
22
|
+
to {
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.pure-modal {
|
|
28
|
+
background-color: #ffffff;
|
|
29
|
+
border-radius: 0.5rem;
|
|
30
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
max-height: 90vh;
|
|
34
|
+
width: 100%;
|
|
35
|
+
animation: pure-modal-slide-in 0.3s ease-out;
|
|
36
|
+
position: relative;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes pure-modal-slide-in {
|
|
41
|
+
from {
|
|
42
|
+
opacity: 0;
|
|
43
|
+
transform: translateY(-20px) scale(0.95);
|
|
44
|
+
}
|
|
45
|
+
to {
|
|
46
|
+
opacity: 1;
|
|
47
|
+
transform: translateY(0) scale(1);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Size Variants */
|
|
52
|
+
.pure-modal--small {
|
|
53
|
+
max-width: 400px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pure-modal--medium {
|
|
57
|
+
max-width: 600px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.pure-modal--large {
|
|
61
|
+
max-width: 900px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.pure-modal--fullscreen {
|
|
65
|
+
max-width: 100%;
|
|
66
|
+
max-height: 100vh;
|
|
67
|
+
height: 100vh;
|
|
68
|
+
border-radius: 0;
|
|
69
|
+
margin: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Header */
|
|
73
|
+
.pure-modal__header {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: space-between;
|
|
77
|
+
padding: 1.5rem;
|
|
78
|
+
border-bottom: 1px solid #e0e0e0;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.pure-modal__title {
|
|
83
|
+
margin: 0;
|
|
84
|
+
font-size: 1.5rem;
|
|
85
|
+
font-weight: 600;
|
|
86
|
+
line-height: 1.4;
|
|
87
|
+
color: #212529;
|
|
88
|
+
flex: 1;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.pure-modal__close-button {
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
width: 2rem;
|
|
96
|
+
height: 2rem;
|
|
97
|
+
padding: 0;
|
|
98
|
+
margin-left: 1rem;
|
|
99
|
+
background: transparent;
|
|
100
|
+
border: none;
|
|
101
|
+
border-radius: 0.25rem;
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
color: #6c757d;
|
|
104
|
+
transition: all 0.2s ease-in-out;
|
|
105
|
+
flex-shrink: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.pure-modal__close-button:hover {
|
|
109
|
+
background-color: #f0f0f0;
|
|
110
|
+
color: #212529;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.pure-modal__close-button:active {
|
|
114
|
+
background-color: #e0e0e0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.pure-modal__close-button:focus {
|
|
118
|
+
outline: none;
|
|
119
|
+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.pure-modal__close-icon {
|
|
123
|
+
font-size: 1.5rem;
|
|
124
|
+
line-height: 1;
|
|
125
|
+
font-weight: 300;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Body */
|
|
129
|
+
.pure-modal__body {
|
|
130
|
+
padding: 1.5rem;
|
|
131
|
+
overflow-y: auto;
|
|
132
|
+
flex: 1;
|
|
133
|
+
color: #495057;
|
|
134
|
+
line-height: 1.6;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Responsive */
|
|
138
|
+
@media (max-width: 768px) {
|
|
139
|
+
.pure-modal__overlay {
|
|
140
|
+
padding: 0;
|
|
141
|
+
align-items: flex-end;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pure-modal {
|
|
145
|
+
max-height: 95vh;
|
|
146
|
+
border-radius: 0.5rem 0.5rem 0 0;
|
|
147
|
+
animation: pure-modal-slide-up 0.3s ease-out;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes pure-modal-slide-up {
|
|
151
|
+
from {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
transform: translateY(100%);
|
|
154
|
+
}
|
|
155
|
+
to {
|
|
156
|
+
opacity: 1;
|
|
157
|
+
transform: translateY(0);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.pure-modal--small,
|
|
162
|
+
.pure-modal--medium,
|
|
163
|
+
.pure-modal--large {
|
|
164
|
+
max-width: 100%;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.pure-modal__header {
|
|
168
|
+
padding: 1rem 1.25rem;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.pure-modal__title {
|
|
172
|
+
font-size: 1.25rem;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.pure-modal__body {
|
|
176
|
+
padding: 1.25rem;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Scrollbar Styling */
|
|
181
|
+
.pure-modal__body::-webkit-scrollbar {
|
|
182
|
+
width: 8px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.pure-modal__body::-webkit-scrollbar-track {
|
|
186
|
+
background: #f1f1f1;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.pure-modal__body::-webkit-scrollbar-thumb {
|
|
190
|
+
background: #c1c1c1;
|
|
191
|
+
border-radius: 4px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.pure-modal__body::-webkit-scrollbar-thumb:hover {
|
|
195
|
+
background: #a8a8a8;
|
|
196
|
+
}
|
|
197
|
+
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Modal.css';
|
|
3
|
+
export interface ModalProps {
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
title?: string;
|
|
7
|
+
size?: 'small' | 'medium' | 'large' | 'fullscreen';
|
|
8
|
+
closeOnOverlayClick?: boolean;
|
|
9
|
+
closeOnEscape?: boolean;
|
|
10
|
+
showCloseButton?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
overlayClassName?: string;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
export declare const Modal: React.FC<ModalProps>;
|
|
16
|
+
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4EtC,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import './Modal.css';
|
|
3
|
+
export const Modal = ({ isOpen, onClose, title, size = 'medium', closeOnOverlayClick = true, closeOnEscape = true, showCloseButton = true, className = '', overlayClassName = '', children }) => {
|
|
4
|
+
const modalRef = useRef(null);
|
|
5
|
+
const overlayRef = useRef(null);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
if (!isOpen)
|
|
8
|
+
return;
|
|
9
|
+
const handleEscape = (e) => {
|
|
10
|
+
if (closeOnEscape && e.key === 'Escape') {
|
|
11
|
+
onClose();
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const handleClickOutside = (e) => {
|
|
15
|
+
if (closeOnOverlayClick &&
|
|
16
|
+
overlayRef.current &&
|
|
17
|
+
modalRef.current &&
|
|
18
|
+
e.target === overlayRef.current) {
|
|
19
|
+
onClose();
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
document.addEventListener('keydown', handleEscape);
|
|
23
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
24
|
+
document.body.style.overflow = 'hidden';
|
|
25
|
+
return () => {
|
|
26
|
+
document.removeEventListener('keydown', handleEscape);
|
|
27
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
28
|
+
document.body.style.overflow = '';
|
|
29
|
+
};
|
|
30
|
+
}, [isOpen, closeOnEscape, closeOnOverlayClick, onClose]);
|
|
31
|
+
if (!isOpen)
|
|
32
|
+
return null;
|
|
33
|
+
const baseClass = 'pure-modal';
|
|
34
|
+
const sizeClass = `pure-modal--${size}`;
|
|
35
|
+
const combinedClassName = [baseClass, sizeClass, className].filter(Boolean).join(' ');
|
|
36
|
+
const combinedOverlayClassName = ['pure-modal__overlay', overlayClassName].filter(Boolean).join(' ');
|
|
37
|
+
return (React.createElement("div", { className: combinedOverlayClassName, ref: overlayRef },
|
|
38
|
+
React.createElement("div", { className: combinedClassName, ref: modalRef },
|
|
39
|
+
(title || showCloseButton) && (React.createElement("div", { className: "pure-modal__header" },
|
|
40
|
+
title && React.createElement("h2", { className: "pure-modal__title" }, title),
|
|
41
|
+
showCloseButton && (React.createElement("button", { className: "pure-modal__close-button", onClick: onClose, "aria-label": "Close modal" },
|
|
42
|
+
React.createElement("span", { className: "pure-modal__close-icon" }, "\u00D7"))))),
|
|
43
|
+
React.createElement("div", { className: "pure-modal__body" }, children))));
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { Button } from './components/Button/Button';
|
|
2
|
+
export type { ButtonProps } from './components/Button/Button';
|
|
3
|
+
export { Card } from './components/Card/Card';
|
|
4
|
+
export type { CardProps } from './components/Card/Card';
|
|
5
|
+
export { Modal } from './components/Modal/Modal';
|
|
6
|
+
export type { ModalProps } from './components/Modal/Modal';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC"}
|
package/lib/index.js
ADDED
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,54 +1,38 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "pure-react-ui",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"description": "A
|
|
5
|
-
"main": "
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
"test": "
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"@
|
|
34
|
-
"@
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"@typescript-eslint/parser": "^8.51.0",
|
|
40
|
-
"eslint": "^9.39.2",
|
|
41
|
-
"jest": "^30.2.0",
|
|
42
|
-
"jest-environment-jsdom": "^30.2.0",
|
|
43
|
-
"postcss": "^8.5.6",
|
|
44
|
-
"prettier": "^3.7.4",
|
|
45
|
-
"react": "^19.2.3",
|
|
46
|
-
"react-dom": "^19.2.3",
|
|
47
|
-
"rollup": "^4.54.0",
|
|
48
|
-
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
49
|
-
"rollup-plugin-postcss": "^4.0.2",
|
|
50
|
-
"ts-jest": "^29.4.6",
|
|
51
|
-
"tslib": "^2.8.1",
|
|
52
|
-
"typescript": "^5.9.3"
|
|
53
|
-
}
|
|
54
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "pure-react-ui",
|
|
3
|
+
"version": "1.4.7",
|
|
4
|
+
"description": "A pure React UI component library with Button, Card, and Modal components",
|
|
5
|
+
"main": "lib/index.js",
|
|
6
|
+
"types": "lib/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"lib",
|
|
9
|
+
"README.md"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "tsc && node scripts/copy-css.js",
|
|
13
|
+
"prepublishOnly": "npm run build",
|
|
14
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"react",
|
|
18
|
+
"typescript",
|
|
19
|
+
"ui",
|
|
20
|
+
"components",
|
|
21
|
+
"button",
|
|
22
|
+
"card",
|
|
23
|
+
"modal",
|
|
24
|
+
"pure"
|
|
25
|
+
],
|
|
26
|
+
"author": "",
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": ">=16.8.0",
|
|
30
|
+
"react-dom": ">=16.8.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@types/react": "^18.2.0",
|
|
34
|
+
"@types/react-dom": "^18.2.0",
|
|
35
|
+
"typescript": "^5.0.0"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmDxC,CAAC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'outline' | 'ghost';
|
|
3
|
-
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
|
-
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
-
variant?: ButtonVariant;
|
|
6
|
-
size?: ButtonSize;
|
|
7
|
-
fullWidth?: boolean;
|
|
8
|
-
loading?: boolean;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
children: ReactNode;
|
|
11
|
-
leftIcon?: ReactNode;
|
|
12
|
-
rightIcon?: ReactNode;
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=Button.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC7G,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
|
package/dist/index.d.ts
DELETED
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC"}
|
package/dist/index.esm.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
function styleInject(css, ref) {
|
|
4
|
-
if ( ref === void 0 ) ref = {};
|
|
5
|
-
var insertAt = ref.insertAt;
|
|
6
|
-
|
|
7
|
-
if (typeof document === 'undefined') { return; }
|
|
8
|
-
|
|
9
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
10
|
-
var style = document.createElement('style');
|
|
11
|
-
style.type = 'text/css';
|
|
12
|
-
|
|
13
|
-
if (insertAt === 'top') {
|
|
14
|
-
if (head.firstChild) {
|
|
15
|
-
head.insertBefore(style, head.firstChild);
|
|
16
|
-
} else {
|
|
17
|
-
head.appendChild(style);
|
|
18
|
-
}
|
|
19
|
-
} else {
|
|
20
|
-
head.appendChild(style);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
if (style.styleSheet) {
|
|
24
|
-
style.styleSheet.cssText = css;
|
|
25
|
-
} else {
|
|
26
|
-
style.appendChild(document.createTextNode(css));
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
var css_248z = ".Button-module_button__2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module_button--primary__0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module_button--primary__0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module_button--secondary__iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module_button--secondary__iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module_button--success__1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module_button--success__1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module_button--danger__y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module_button--danger__y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module_button--warning__cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module_button--warning__cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module_button--outline__eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module_button--outline__eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--ghost__nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module_button--ghost__nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--sm__-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module_button--md__-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module_button--lg__p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module_button--full-width__XyuwA{width:100%}.Button-module_button--loading__lNyfH{opacity:.8;pointer-events:none}.Button-module_button__2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__icon__e6c-f,.Button-module_button__text__JjFiL{align-items:center;display:flex;justify-content:center}.Button-module_button__spinner__1soI4{height:20px;position:absolute;width:20px}.Button-module_spinner__ZExvW{animation:Button-module_rotate__TQjyl 2s linear infinite;height:100%;width:100%}.Button-module_spinner-path__Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module_dash__NItHE 1.5s ease-in-out infinite}@keyframes Button-module_rotate__TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module_dash__NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}";
|
|
31
|
-
var styles = {"button":"Button-module_button__2ZuB7","button--primary":"Button-module_button--primary__0eqDM","button--secondary":"Button-module_button--secondary__iK3TS","button--success":"Button-module_button--success__1WVzM","button--danger":"Button-module_button--danger__y2uGS","button--warning":"Button-module_button--warning__cp3iP","button--outline":"Button-module_button--outline__eVhnr","button--ghost":"Button-module_button--ghost__nktSD","button--sm":"Button-module_button--sm__-XOLs","button--md":"Button-module_button--md__-GRga","button--lg":"Button-module_button--lg__p-URz","button--full-width":"Button-module_button--full-width__XyuwA","button--loading":"Button-module_button--loading__lNyfH","button__icon":"Button-module_button__icon__e6c-f","button__text":"Button-module_button__text__JjFiL","button__spinner":"Button-module_button__spinner__1soI4","spinner":"Button-module_spinner__ZExvW","rotate":"Button-module_rotate__TQjyl","spinner-path":"Button-module_spinner-path__Zk3SN","dash":"Button-module_dash__NItHE"};
|
|
32
|
-
styleInject(css_248z);
|
|
33
|
-
|
|
34
|
-
const Button = ({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, children, leftIcon, rightIcon, className = '', ...props }) => {
|
|
35
|
-
const classes = [
|
|
36
|
-
styles.button,
|
|
37
|
-
styles[`button--${variant}`],
|
|
38
|
-
styles[`button--${size}`],
|
|
39
|
-
fullWidth && styles['button--full-width'],
|
|
40
|
-
loading && styles['button--loading'],
|
|
41
|
-
className
|
|
42
|
-
].filter(Boolean).join(' ');
|
|
43
|
-
return (React.createElement("button", { className: classes, disabled: disabled || loading, ...props },
|
|
44
|
-
loading && (React.createElement("span", { className: styles['button__spinner'] },
|
|
45
|
-
React.createElement("svg", { className: styles['spinner'], viewBox: "0 0 50 50" },
|
|
46
|
-
React.createElement("circle", { className: styles['spinner-path'], cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" })))),
|
|
47
|
-
!loading && leftIcon && (React.createElement("span", { className: styles['button__icon'] }, leftIcon)),
|
|
48
|
-
React.createElement("span", { className: styles['button__text'] }, children),
|
|
49
|
-
!loading && rightIcon && (React.createElement("span", { className: styles['button__icon'] }, rightIcon))));
|
|
50
|
-
};
|
|
51
|
-
Button.displayName = 'Button';
|
|
52
|
-
|
|
53
|
-
export { Button };
|
|
54
|
-
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\r\nimport { ButtonProps } from './Button.types';\r\nimport styles from \"./Button.module.css\";\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n fullWidth = false,\r\n loading = false,\r\n disabled = false,\r\n children,\r\n leftIcon,\r\n rightIcon,\r\n className = '',\r\n ...props\r\n}) => {\r\n const classes = [\r\n styles.button,\r\n styles[`button--${variant}`],\r\n styles[`button--${size}`],\r\n fullWidth && styles['button--full-width'],\r\n loading && styles['button--loading'],\r\n className\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <button\r\n className={classes}\r\n disabled={disabled || loading}\r\n {...props}\r\n >\r\n {loading && (\r\n <span className={styles['button__spinner']}>\r\n {/* Loading spinner */}\r\n <svg className={styles['spinner']} viewBox=\"0 0 50 50\">\r\n <circle\r\n className={styles['spinner-path']}\r\n cx=\"25\"\r\n cy=\"25\"\r\n r=\"20\"\r\n fill=\"none\"\r\n strokeWidth=\"4\"\r\n />\r\n </svg>\r\n </span>\r\n )}\r\n {!loading && leftIcon && (\r\n <span className={styles['button__icon']}>{leftIcon}</span>\r\n )}\r\n <span className={styles['button__text']}>{children}</span>\r\n {!loading && rightIcon && (\r\n <span className={styles['button__icon']}>{rightIcon}</span>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nButton.displayName = 'Button';"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/index.js
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
|
|
5
|
-
function styleInject(css, ref) {
|
|
6
|
-
if ( ref === void 0 ) ref = {};
|
|
7
|
-
var insertAt = ref.insertAt;
|
|
8
|
-
|
|
9
|
-
if (typeof document === 'undefined') { return; }
|
|
10
|
-
|
|
11
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
12
|
-
var style = document.createElement('style');
|
|
13
|
-
style.type = 'text/css';
|
|
14
|
-
|
|
15
|
-
if (insertAt === 'top') {
|
|
16
|
-
if (head.firstChild) {
|
|
17
|
-
head.insertBefore(style, head.firstChild);
|
|
18
|
-
} else {
|
|
19
|
-
head.appendChild(style);
|
|
20
|
-
}
|
|
21
|
-
} else {
|
|
22
|
-
head.appendChild(style);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
if (style.styleSheet) {
|
|
26
|
-
style.styleSheet.cssText = css;
|
|
27
|
-
} else {
|
|
28
|
-
style.appendChild(document.createTextNode(css));
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
var css_248z = ".Button-module_button__2ZuB7{align-items:center;border:none;border-radius:var(--pure-radius-md);cursor:pointer;display:inline-flex;font-family:var(--pure-font-family);font-size:var(--pure-font-size-md);font-weight:500;gap:var(--pure-spacing-sm);justify-content:center;overflow:hidden;position:relative;text-decoration:none;transition:all var(--pure-transition-base)}.Button-module_button--primary__0eqDM{background-color:var(--pure-color-primary);color:var(--pure-color-white)}.Button-module_button--primary__0eqDM:hover:not(:disabled){background-color:var(--pure-color-primary-hover)}.Button-module_button--secondary__iK3TS{background-color:var(--pure-color-secondary);color:var(--pure-color-white)}.Button-module_button--secondary__iK3TS:hover:not(:disabled){background-color:var(--pure-color-secondary-hover)}.Button-module_button--success__1WVzM{background-color:var(--pure-color-success);color:var(--pure-color-white)}.Button-module_button--success__1WVzM:hover:not(:disabled){background-color:var(--pure-color-success-hover)}.Button-module_button--danger__y2uGS{background-color:var(--pure-color-danger);color:var(--pure-color-white)}.Button-module_button--danger__y2uGS:hover:not(:disabled){background-color:var(--pure-color-danger-hover)}.Button-module_button--warning__cp3iP{background-color:var(--pure-color-warning);color:var(--pure-color-white)}.Button-module_button--warning__cp3iP:hover:not(:disabled){background-color:var(--pure-color-warning-hover)}.Button-module_button--outline__eVhnr{background-color:transparent;border:1px solid var(--pure-color-primary);color:var(--pure-color-primary)}.Button-module_button--outline__eVhnr:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--ghost__nktSD{background-color:transparent;color:var(--pure-color-primary)}.Button-module_button--ghost__nktSD:hover:not(:disabled){background-color:var(--pure-color-primary-light)}.Button-module_button--sm__-XOLs{font-size:var(--pure-font-size-sm);padding:var(--pure-spacing-xs) var(--pure-spacing-sm)}.Button-module_button--md__-GRga{font-size:var(--pure-font-size-md);padding:var(--pure-spacing-sm) var(--pure-spacing-md)}.Button-module_button--lg__p-URz{font-size:var(--pure-font-size-lg);padding:var(--pure-spacing-md) var(--pure-spacing-lg)}.Button-module_button--full-width__XyuwA{width:100%}.Button-module_button--loading__lNyfH{opacity:.8;pointer-events:none}.Button-module_button__2ZuB7:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__icon__e6c-f,.Button-module_button__text__JjFiL{align-items:center;display:flex;justify-content:center}.Button-module_button__spinner__1soI4{height:20px;position:absolute;width:20px}.Button-module_spinner__ZExvW{animation:Button-module_rotate__TQjyl 2s linear infinite;height:100%;width:100%}.Button-module_spinner-path__Zk3SN{stroke:currentColor;stroke-linecap:round;animation:Button-module_dash__NItHE 1.5s ease-in-out infinite}@keyframes Button-module_rotate__TQjyl{to{transform:rotate(1turn)}}@keyframes Button-module_dash__NItHE{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}";
|
|
33
|
-
var styles = {"button":"Button-module_button__2ZuB7","button--primary":"Button-module_button--primary__0eqDM","button--secondary":"Button-module_button--secondary__iK3TS","button--success":"Button-module_button--success__1WVzM","button--danger":"Button-module_button--danger__y2uGS","button--warning":"Button-module_button--warning__cp3iP","button--outline":"Button-module_button--outline__eVhnr","button--ghost":"Button-module_button--ghost__nktSD","button--sm":"Button-module_button--sm__-XOLs","button--md":"Button-module_button--md__-GRga","button--lg":"Button-module_button--lg__p-URz","button--full-width":"Button-module_button--full-width__XyuwA","button--loading":"Button-module_button--loading__lNyfH","button__icon":"Button-module_button__icon__e6c-f","button__text":"Button-module_button__text__JjFiL","button__spinner":"Button-module_button__spinner__1soI4","spinner":"Button-module_spinner__ZExvW","rotate":"Button-module_rotate__TQjyl","spinner-path":"Button-module_spinner-path__Zk3SN","dash":"Button-module_dash__NItHE"};
|
|
34
|
-
styleInject(css_248z);
|
|
35
|
-
|
|
36
|
-
const Button = ({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, children, leftIcon, rightIcon, className = '', ...props }) => {
|
|
37
|
-
const classes = [
|
|
38
|
-
styles.button,
|
|
39
|
-
styles[`button--${variant}`],
|
|
40
|
-
styles[`button--${size}`],
|
|
41
|
-
fullWidth && styles['button--full-width'],
|
|
42
|
-
loading && styles['button--loading'],
|
|
43
|
-
className
|
|
44
|
-
].filter(Boolean).join(' ');
|
|
45
|
-
return (React.createElement("button", { className: classes, disabled: disabled || loading, ...props },
|
|
46
|
-
loading && (React.createElement("span", { className: styles['button__spinner'] },
|
|
47
|
-
React.createElement("svg", { className: styles['spinner'], viewBox: "0 0 50 50" },
|
|
48
|
-
React.createElement("circle", { className: styles['spinner-path'], cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" })))),
|
|
49
|
-
!loading && leftIcon && (React.createElement("span", { className: styles['button__icon'] }, leftIcon)),
|
|
50
|
-
React.createElement("span", { className: styles['button__text'] }, children),
|
|
51
|
-
!loading && rightIcon && (React.createElement("span", { className: styles['button__icon'] }, rightIcon))));
|
|
52
|
-
};
|
|
53
|
-
Button.displayName = 'Button';
|
|
54
|
-
|
|
55
|
-
exports.Button = Button;
|
|
56
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\r\nimport { ButtonProps } from './Button.types';\r\nimport styles from \"./Button.module.css\";\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n variant = 'primary',\r\n size = 'md',\r\n fullWidth = false,\r\n loading = false,\r\n disabled = false,\r\n children,\r\n leftIcon,\r\n rightIcon,\r\n className = '',\r\n ...props\r\n}) => {\r\n const classes = [\r\n styles.button,\r\n styles[`button--${variant}`],\r\n styles[`button--${size}`],\r\n fullWidth && styles['button--full-width'],\r\n loading && styles['button--loading'],\r\n className\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <button\r\n className={classes}\r\n disabled={disabled || loading}\r\n {...props}\r\n >\r\n {loading && (\r\n <span className={styles['button__spinner']}>\r\n {/* Loading spinner */}\r\n <svg className={styles['spinner']} viewBox=\"0 0 50 50\">\r\n <circle\r\n className={styles['spinner-path']}\r\n cx=\"25\"\r\n cy=\"25\"\r\n r=\"20\"\r\n fill=\"none\"\r\n strokeWidth=\"4\"\r\n />\r\n </svg>\r\n </span>\r\n )}\r\n {!loading && leftIcon && (\r\n <span className={styles['button__icon']}>{leftIcon}</span>\r\n )}\r\n <span className={styles['button__text']}>{children}</span>\r\n {!loading && rightIcon && (\r\n <span className={styles['button__icon']}>{rightIcon}</span>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nButton.displayName = 'Button';"],"names":[],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;ACrBO,MAAM,MAAM,GAA0B,CAAC,EAC1C,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,MAAM,CAAC,MAAM;AACb,QAAA,MAAM,CAAC,CAAA,QAAA,EAAW,OAAO,CAAA,CAAE,CAAC;AAC5B,QAAA,MAAM,CAAC,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE,CAAC;AACzB,QAAA,SAAS,IAAI,MAAM,CAAC,oBAAoB,CAAC;AACzC,QAAA,OAAO,IAAI,MAAM,CAAC,iBAAiB,CAAC;QACpC;KACH,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAE3B,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAA,GACzB,KAAK,EAAA;QAER,OAAO,KACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAA;YAEtC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,EAAC,WAAW,EAAA;AAClD,gBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACI,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EAAA,CACjB,CACA,CACH,CACV;AACA,QAAA,CAAC,OAAO,IAAI,QAAQ,KACjB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAQ,CAC7D;QACD,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAQ;AACzD,QAAA,CAAC,OAAO,IAAI,SAAS,KAClB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,EAAG,SAAS,CAAQ,CAC9D,CACI;AAEjB;AAEA,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;","x_google_ignoreList":[0]}
|
package/dist/setupTests.d.ts
DELETED
package/dist/setupTests.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}
|