thailife-react 0.0.18 → 0.0.20
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 +75 -66
- package/dist/styles/index.css +601 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -1,81 +1,104 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Thailife React UI Library
|
|
2
2
|
|
|
3
|
-
A modern
|
|
3
|
+
A modern UI library built with React and CSS.
|
|
4
4
|
|
|
5
|
-
## 🚀
|
|
6
|
-
|
|
7
|
-
- **Modern React**: Built with React 18+ and TypeScript
|
|
8
|
-
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development
|
|
9
|
-
- **Accessible**: Components follow accessibility best practices
|
|
10
|
-
- **TypeScript**: Full TypeScript support with proper type definitions
|
|
11
|
-
- **Customizable**: Easy to customize and extend
|
|
12
|
-
|
|
13
|
-
## 📦 Installation
|
|
5
|
+
## 🚀 Installation
|
|
14
6
|
|
|
15
7
|
```bash
|
|
16
8
|
npm install thailife-react
|
|
17
|
-
# or
|
|
18
|
-
yarn add thailife-react
|
|
19
|
-
# or
|
|
20
|
-
pnpm add thailife-react
|
|
21
9
|
```
|
|
22
10
|
|
|
23
|
-
##
|
|
24
|
-
|
|
25
|
-
### Tailwind CSS
|
|
11
|
+
## 📦 Usage
|
|
26
12
|
|
|
27
|
-
|
|
13
|
+
### 1. Import CSS
|
|
28
14
|
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
|
|
15
|
+
```typescript
|
|
16
|
+
// Import the CSS file for styling
|
|
17
|
+
import "thailife-react/dist/styles/index.css";
|
|
32
18
|
```
|
|
33
19
|
|
|
34
|
-
|
|
20
|
+
### 2. Use Components
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { Button, Input, Checkbox } from "thailife-react";
|
|
24
|
+
|
|
25
|
+
function App() {
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
<Button variant="contained" color="primary">
|
|
29
|
+
Click me
|
|
30
|
+
</Button>
|
|
31
|
+
|
|
32
|
+
<Input label="Email" placeholder="Enter your email" />
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
};
|
|
34
|
+
<Checkbox label="I agree to terms" />
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
41
38
|
```
|
|
42
39
|
|
|
43
|
-
|
|
40
|
+
### 3. Access CSS Classes
|
|
44
41
|
|
|
45
|
-
```
|
|
46
|
-
|
|
42
|
+
```tsx
|
|
43
|
+
import { cssClasses } from "thailife-react";
|
|
44
|
+
|
|
45
|
+
// Use predefined CSS classes
|
|
46
|
+
<div className={cssClasses.button}>Custom Button</div>
|
|
47
|
+
<div className={cssClasses.inputContainer}>Custom Input Container</div>
|
|
47
48
|
```
|
|
48
49
|
|
|
49
|
-
##
|
|
50
|
+
## 🎨 Available Components
|
|
50
51
|
|
|
51
|
-
|
|
52
|
+
- **Button** - Various button variants and sizes
|
|
53
|
+
- **Input** - Text input with validation states
|
|
54
|
+
- **Checkbox** - Checkbox with label and helper text
|
|
55
|
+
- **Radio** - Radio button with label and helper text
|
|
56
|
+
- **Select** - Dropdown select with options
|
|
57
|
+
- **Textarea** - Multi-line text input
|
|
58
|
+
- **InputFile** - File upload component
|
|
52
59
|
|
|
53
|
-
|
|
54
|
-
import { Button } from "thailife-react";
|
|
60
|
+
## 🎯 CSS Architecture
|
|
55
61
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
The library uses:
|
|
63
|
+
|
|
64
|
+
- **CSS Variables** for theming
|
|
65
|
+
- **BEM Methodology** for naming conventions
|
|
66
|
+
- **Component-based** CSS structure
|
|
67
|
+
- **Utility classes** for common patterns
|
|
68
|
+
|
|
69
|
+
## 🔧 Customization
|
|
70
|
+
|
|
71
|
+
### Override CSS Variables
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
:root {
|
|
75
|
+
--color-primary: #your-custom-color;
|
|
76
|
+
--spacing-4: 1.5rem;
|
|
77
|
+
--font-size-base: 1.1rem;
|
|
62
78
|
}
|
|
63
79
|
```
|
|
64
80
|
|
|
65
|
-
###
|
|
81
|
+
### Custom Component Styles
|
|
66
82
|
|
|
67
|
-
```
|
|
68
|
-
|
|
83
|
+
```css
|
|
84
|
+
/* Override button styles */
|
|
85
|
+
.btn {
|
|
86
|
+
border-radius: 8px;
|
|
87
|
+
font-weight: 600;
|
|
88
|
+
}
|
|
69
89
|
|
|
70
|
-
|
|
71
|
-
|
|
90
|
+
/* Add custom variants */
|
|
91
|
+
.btn--custom {
|
|
92
|
+
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
|
93
|
+
color: white;
|
|
72
94
|
}
|
|
73
95
|
```
|
|
74
96
|
|
|
75
|
-
##
|
|
97
|
+
## 🚨 Important Notes
|
|
76
98
|
|
|
77
|
-
|
|
78
|
-
|
|
99
|
+
1. **CSS Import Required** - You must import the CSS file for components to work
|
|
100
|
+
2. **Browser Support** - CSS variables require modern browsers (IE11+)
|
|
101
|
+
3. **No Runtime Dependencies** - Pure CSS, no JavaScript overhead
|
|
79
102
|
|
|
80
103
|
## 🔧 Development
|
|
81
104
|
|
|
@@ -83,27 +106,13 @@ function App() {
|
|
|
83
106
|
# Install dependencies
|
|
84
107
|
npm install
|
|
85
108
|
|
|
86
|
-
# Build
|
|
109
|
+
# Build library
|
|
87
110
|
npm run build
|
|
88
111
|
|
|
89
112
|
# Start Storybook
|
|
90
113
|
npm run storybook
|
|
91
|
-
|
|
92
|
-
# Run tests
|
|
93
|
-
npm test
|
|
94
|
-
|
|
95
|
-
# Lint code
|
|
96
|
-
npm run lint
|
|
97
114
|
```
|
|
98
115
|
|
|
99
|
-
##
|
|
100
|
-
|
|
101
|
-
MIT License - see [LICENSE](LICENSE) for details.
|
|
102
|
-
|
|
103
|
-
## 🤝 Contributing
|
|
104
|
-
|
|
105
|
-
Contributions are welcome! Please read our contributing guidelines before submitting a pull request.
|
|
106
|
-
|
|
107
|
-
## 📞 Support
|
|
116
|
+
## 📄 License
|
|
108
117
|
|
|
109
|
-
|
|
118
|
+
MIT License - see LICENSE file for details.
|
|
@@ -0,0 +1,601 @@
|
|
|
1
|
+
/* CSS Variables for Theme */
|
|
2
|
+
:root {
|
|
3
|
+
/* Colors */
|
|
4
|
+
--color-primary: #007AC2;
|
|
5
|
+
--color-error: #ff1100;
|
|
6
|
+
--color-dark: #333333;
|
|
7
|
+
--color-light: #666666;
|
|
8
|
+
--color-white: #ffffff;
|
|
9
|
+
--color-black: #000000;
|
|
10
|
+
|
|
11
|
+
/* Gray Scale */
|
|
12
|
+
--color-gray-50: #f9fafb;
|
|
13
|
+
--color-gray-100: #f3f4f6;
|
|
14
|
+
--color-gray-200: #e5e7eb;
|
|
15
|
+
--color-gray-300: #d1d5db;
|
|
16
|
+
--color-gray-400: #9ca3af;
|
|
17
|
+
--color-gray-500: #6b7280;
|
|
18
|
+
--color-gray-600: #4b5563;
|
|
19
|
+
--color-gray-700: #374151;
|
|
20
|
+
--color-gray-800: #1f2937;
|
|
21
|
+
--color-gray-900: #111827;
|
|
22
|
+
|
|
23
|
+
/* Spacing */
|
|
24
|
+
--spacing-0: 0;
|
|
25
|
+
--spacing-1: 0.25rem;
|
|
26
|
+
--spacing-2: 0.5rem;
|
|
27
|
+
--spacing-3: 0.75rem;
|
|
28
|
+
--spacing-4: 1rem;
|
|
29
|
+
--spacing-5: 1.25rem;
|
|
30
|
+
--spacing-6: 1.5rem;
|
|
31
|
+
--spacing-8: 2rem;
|
|
32
|
+
--spacing-10: 2.5rem;
|
|
33
|
+
--spacing-12: 3rem;
|
|
34
|
+
--spacing-16: 4rem;
|
|
35
|
+
--spacing-18: 4.5rem;
|
|
36
|
+
--spacing-20: 5rem;
|
|
37
|
+
--spacing-24: 6rem;
|
|
38
|
+
--spacing-32: 8rem;
|
|
39
|
+
--spacing-40: 10rem;
|
|
40
|
+
--spacing-48: 12rem;
|
|
41
|
+
--spacing-56: 14rem;
|
|
42
|
+
--spacing-64: 16rem;
|
|
43
|
+
--spacing-88: 22rem;
|
|
44
|
+
|
|
45
|
+
/* Font Sizes */
|
|
46
|
+
--font-size-xs: 0.75rem;
|
|
47
|
+
--font-size-sm: 0.875rem;
|
|
48
|
+
--font-size-base: 1rem;
|
|
49
|
+
--font-size-lg: 1.125rem;
|
|
50
|
+
--font-size-xl: 1.25rem;
|
|
51
|
+
--font-size-2xl: 1.5rem;
|
|
52
|
+
--font-size-3xl: 1.875rem;
|
|
53
|
+
--font-size-4xl: 2.25rem;
|
|
54
|
+
--font-size-5xl: 3rem;
|
|
55
|
+
--font-size-6xl: 3.75rem;
|
|
56
|
+
|
|
57
|
+
/* Font Families */
|
|
58
|
+
--font-family-sans: "Inter", system-ui, sans-serif;
|
|
59
|
+
--font-family-serif: "Georgia", "Cambria", "Times New Roman", "Times", serif;
|
|
60
|
+
--font-family-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
|
|
61
|
+
|
|
62
|
+
/* Border Radius */
|
|
63
|
+
--border-radius-none: 0;
|
|
64
|
+
--border-radius-sm: 0.125rem;
|
|
65
|
+
--border-radius-base: 0.25rem;
|
|
66
|
+
--border-radius-md: 0.375rem;
|
|
67
|
+
--border-radius-lg: 0.5rem;
|
|
68
|
+
--border-radius-xl: 0.75rem;
|
|
69
|
+
--border-radius-2xl: 1rem;
|
|
70
|
+
--border-radius-3xl: 1.5rem;
|
|
71
|
+
--border-radius-full: 9999px;
|
|
72
|
+
|
|
73
|
+
/* Shadows */
|
|
74
|
+
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
75
|
+
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
76
|
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
|
|
77
|
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
78
|
+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
79
|
+
|
|
80
|
+
/* Transitions */
|
|
81
|
+
--transition-fast: 150ms ease-in-out;
|
|
82
|
+
--transition-base: 300ms ease-in-out;
|
|
83
|
+
--transition-slow: 500ms ease-in-out;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Reset and Base Styles */
|
|
87
|
+
* {
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Button Component */
|
|
92
|
+
.btn {
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
border: none;
|
|
97
|
+
/* border-radius: var(--border-radius-md); */
|
|
98
|
+
font-family: var(--font-family-sans);
|
|
99
|
+
font-weight: 500;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
transition: all var(--transition-base);
|
|
102
|
+
outline: none;
|
|
103
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
104
|
+
font-size: var(--font-size-sm);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.btn:focus-visible {
|
|
108
|
+
outline: 2px solid var(--color-primary);
|
|
109
|
+
outline-offset: 2px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.btn:disabled {
|
|
113
|
+
opacity: 0.5;
|
|
114
|
+
cursor: not-allowed;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Button Variants */
|
|
118
|
+
.btn--contained {
|
|
119
|
+
background-color: var(--color-primary);
|
|
120
|
+
color: var(--color-white);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.btn--contained:hover:not(:disabled) {
|
|
124
|
+
background-color: #005a8f;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.btn--outlined {
|
|
128
|
+
background-color: transparent;
|
|
129
|
+
border: 1px solid var(--color-primary);
|
|
130
|
+
color: var(--color-primary);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.btn--outlined:hover:not(:disabled) {
|
|
134
|
+
background-color: rgba(0, 122, 194, 0.1);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.btn--link {
|
|
138
|
+
background-color: transparent;
|
|
139
|
+
color: var(--color-primary);
|
|
140
|
+
text-decoration: underline;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.btn--link:hover:not(:disabled) {
|
|
144
|
+
text-decoration: none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Button Sizes */
|
|
148
|
+
.btn--sm {
|
|
149
|
+
padding: var(--spacing-3) var(--spacing-3);
|
|
150
|
+
font-size: var(--font-size-sm);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.btn--md {
|
|
154
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
155
|
+
font-size: var(--font-size-sm);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.btn--lg {
|
|
159
|
+
padding: var(--spacing-3) var(--spacing-6);
|
|
160
|
+
font-size: var(--font-size-base);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Button Colors */
|
|
164
|
+
.btn--error {
|
|
165
|
+
background-color: var(--color-error);
|
|
166
|
+
color: var(--color-white);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.btn--dark {
|
|
170
|
+
background-color: var(--color-dark);
|
|
171
|
+
color: var(--color-white);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.btn--light {
|
|
175
|
+
background-color: var(--color-light);
|
|
176
|
+
color: var(--color-white);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Button Full Width */
|
|
180
|
+
.btn--full-width {
|
|
181
|
+
width: 100%;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Input Component */
|
|
185
|
+
.input-container {
|
|
186
|
+
display: flex;
|
|
187
|
+
flex-direction: column;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.input-container--full-width {
|
|
191
|
+
width: 100%;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.input-label {
|
|
195
|
+
margin-bottom: var(--spacing-1);
|
|
196
|
+
font-size: var(--font-size-sm);
|
|
197
|
+
font-weight: 500;
|
|
198
|
+
color: var(--color-gray-700);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.input {
|
|
202
|
+
border: 1px solid var(--color-gray-300);
|
|
203
|
+
/* border-radius: var(--border-radius-md); */
|
|
204
|
+
transition: border-color var(--transition-base);
|
|
205
|
+
outline: none;
|
|
206
|
+
font-family: var(--font-family-sans);
|
|
207
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
208
|
+
font-size: var(--font-size-sm);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.input:focus {
|
|
212
|
+
border-color: var(--color-primary);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.input:disabled {
|
|
216
|
+
opacity: 0.5;
|
|
217
|
+
cursor: not-allowed;
|
|
218
|
+
background-color: var(--color-gray-50);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.input--error {
|
|
222
|
+
border-color: var(--color-error);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.input--error:focus {
|
|
226
|
+
border-color: var(--color-error);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.input--full-width {
|
|
230
|
+
width: 100%;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.input-helper-text {
|
|
234
|
+
margin-top: var(--spacing-1);
|
|
235
|
+
font-size: var(--font-size-xs);
|
|
236
|
+
color: var(--color-gray-500);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.input-helper-text--error {
|
|
240
|
+
color: var(--color-error);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Checkbox Component */
|
|
244
|
+
.checkbox-container {
|
|
245
|
+
display: flex;
|
|
246
|
+
align-items: flex-start;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.checkbox-container--full-width {
|
|
250
|
+
width: 100%;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.checkbox-wrapper {
|
|
254
|
+
display: flex;
|
|
255
|
+
align-items: center;
|
|
256
|
+
height: var(--spacing-5);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.checkbox {
|
|
260
|
+
/* border-radius: var(--border-radius-md); */
|
|
261
|
+
border: 1px solid var(--color-gray-300);
|
|
262
|
+
transition: all var(--transition-base);
|
|
263
|
+
outline: none;
|
|
264
|
+
width: var(--spacing-5);
|
|
265
|
+
height: var(--spacing-5);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.checkbox:focus {
|
|
269
|
+
outline: none;
|
|
270
|
+
box-shadow: 0 0 0 2px var(--color-primary);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.checkbox:disabled {
|
|
274
|
+
opacity: 0.5;
|
|
275
|
+
cursor: not-allowed;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.checkbox--error {
|
|
279
|
+
border-color: var(--color-error);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.checkbox--error:focus {
|
|
283
|
+
box-shadow: 0 0 0 2px var(--color-error);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.checkbox-label-container {
|
|
287
|
+
margin-left: var(--spacing-3);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.checkbox-label {
|
|
291
|
+
font-weight: 500;
|
|
292
|
+
color: var(--color-gray-700);
|
|
293
|
+
cursor: pointer;
|
|
294
|
+
font-size: var(--font-size-sm);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* Radio Component */
|
|
298
|
+
.radio-container {
|
|
299
|
+
display: flex;
|
|
300
|
+
align-items: flex-start;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.radio-container--full-width {
|
|
304
|
+
width: 100%;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.radio-wrapper {
|
|
308
|
+
display: flex;
|
|
309
|
+
align-items: center;
|
|
310
|
+
height: var(--spacing-5);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.radio {
|
|
314
|
+
border: 2px solid var(--color-gray-300);
|
|
315
|
+
transition: all var(--transition-base);
|
|
316
|
+
outline: none;
|
|
317
|
+
width: var(--spacing-5);
|
|
318
|
+
height: var(--spacing-5);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.radio:focus {
|
|
322
|
+
outline: none;
|
|
323
|
+
box-shadow: 0 0 0 2px var(--color-primary);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.radio:disabled {
|
|
327
|
+
opacity: 0.5;
|
|
328
|
+
cursor: not-allowed;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.radio--error {
|
|
332
|
+
border-color: var(--color-error);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.radio--error:focus {
|
|
336
|
+
box-shadow: 0 0 0 2px var(--color-error);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.radio-label-container {
|
|
340
|
+
margin-left: var(--spacing-3);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.radio-label {
|
|
344
|
+
font-weight: 500;
|
|
345
|
+
color: var(--color-gray-700);
|
|
346
|
+
cursor: pointer;
|
|
347
|
+
font-size: var(--font-size-sm);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
/* Select Component */
|
|
351
|
+
.select-container {
|
|
352
|
+
display: flex;
|
|
353
|
+
flex-direction: column;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.select-container--full-width {
|
|
357
|
+
width: 100%;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.select-label {
|
|
361
|
+
margin-bottom: var(--spacing-1);
|
|
362
|
+
font-size: var(--font-size-sm);
|
|
363
|
+
font-weight: 500;
|
|
364
|
+
color: var(--color-gray-700);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.select-wrapper {
|
|
368
|
+
position: relative;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.select {
|
|
372
|
+
border: 1px solid var(--color-gray-300);
|
|
373
|
+
/* border-radius: var(--border-radius-md); */
|
|
374
|
+
transition: border-color var(--transition-base);
|
|
375
|
+
outline: none;
|
|
376
|
+
appearance: none;
|
|
377
|
+
background-color: var(--color-white);
|
|
378
|
+
font-family: var(--font-family-sans);
|
|
379
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
380
|
+
font-size: var(--font-size-sm);
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.select:focus {
|
|
384
|
+
border-color: var(--color-primary);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.select:disabled {
|
|
388
|
+
opacity: 0.5;
|
|
389
|
+
cursor: not-allowed;
|
|
390
|
+
background-color: var(--color-gray-50);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.select--error {
|
|
394
|
+
border-color: var(--color-error);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.select--error:focus {
|
|
398
|
+
border-color: var(--color-error);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.select--full-width {
|
|
402
|
+
width: 100%;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.select-icon {
|
|
406
|
+
position: absolute;
|
|
407
|
+
top: 0;
|
|
408
|
+
right: 0;
|
|
409
|
+
bottom: 0;
|
|
410
|
+
display: flex;
|
|
411
|
+
align-items: center;
|
|
412
|
+
padding-right: var(--spacing-3);
|
|
413
|
+
pointer-events: none;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* Textarea Component */
|
|
417
|
+
.textarea-container {
|
|
418
|
+
display: flex;
|
|
419
|
+
flex-direction: column;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.textarea-container--full-width {
|
|
423
|
+
width: 100%;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.textarea-label {
|
|
427
|
+
margin-bottom: var(--spacing-1);
|
|
428
|
+
font-size: var(--font-size-sm);
|
|
429
|
+
font-weight: 500;
|
|
430
|
+
color: var(--color-gray-700);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.textarea {
|
|
434
|
+
border: 1px solid var(--color-gray-300);
|
|
435
|
+
/* border-radius: var(--border-radius-md); */
|
|
436
|
+
transition: border-color var(--transition-base);
|
|
437
|
+
outline: none;
|
|
438
|
+
resize: vertical;
|
|
439
|
+
font-family: var(--font-family-sans);
|
|
440
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
441
|
+
font-size: var(--font-size-sm);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.textarea:focus {
|
|
445
|
+
border-color: var(--color-primary);
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
.textarea:disabled {
|
|
449
|
+
opacity: 0.5;
|
|
450
|
+
cursor: not-allowed;
|
|
451
|
+
background-color: var(--color-gray-50);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.textarea--error {
|
|
455
|
+
border-color: var(--color-error);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.textarea--error:focus {
|
|
459
|
+
border-color: var(--color-error);
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.textarea--full-width {
|
|
463
|
+
width: 100%;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/* InputFile Component */
|
|
467
|
+
.input-file-container {
|
|
468
|
+
display: flex;
|
|
469
|
+
flex-direction: column;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.input-file-container--full-width {
|
|
473
|
+
width: 100%;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.input-file-label {
|
|
477
|
+
margin-bottom: var(--spacing-1);
|
|
478
|
+
font-size: var(--font-size-sm);
|
|
479
|
+
font-weight: 500;
|
|
480
|
+
color: var(--color-gray-700);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.input-file-wrapper {
|
|
484
|
+
position: relative;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.input-file-hidden {
|
|
488
|
+
position: absolute;
|
|
489
|
+
top: 0;
|
|
490
|
+
left: 0;
|
|
491
|
+
width: 100%;
|
|
492
|
+
height: 100%;
|
|
493
|
+
opacity: 0;
|
|
494
|
+
cursor: pointer;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.input-file-upload-area {
|
|
498
|
+
border: 2px dashed var(--color-gray-300);
|
|
499
|
+
transition: all var(--transition-base);
|
|
500
|
+
cursor: pointer;
|
|
501
|
+
display: flex;
|
|
502
|
+
align-items: center;
|
|
503
|
+
justify-content: center;
|
|
504
|
+
padding: var(--spacing-2) var(--spacing-4);
|
|
505
|
+
font-size: var(--font-size-base);
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
.input-file-upload-area:hover {
|
|
509
|
+
border-color: var(--color-primary);
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.input-file-upload-area:focus-within {
|
|
513
|
+
border-color: var(--color-primary);
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.input-file-upload-area--error {
|
|
517
|
+
border-color: var(--color-error);
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
.input-file-upload-area--error:hover {
|
|
521
|
+
border-color: var(--color-error);
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.input-file-upload-area--error:focus-within {
|
|
525
|
+
border-color: var(--color-error);
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.input-file-upload-area--full-width {
|
|
529
|
+
width: 100%;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.input-file-button-text {
|
|
533
|
+
color: var(--color-gray-600);
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.input-file-multiple-text {
|
|
537
|
+
margin-left: var(--spacing-1);
|
|
538
|
+
font-size: var(--font-size-xs);
|
|
539
|
+
color: var(--color-gray-500);
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/* Utility Classes */
|
|
543
|
+
.text-center {
|
|
544
|
+
text-align: center;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.text-left {
|
|
548
|
+
text-align: left;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.text-right {
|
|
552
|
+
text-align: right;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.font-bold {
|
|
556
|
+
font-weight: bold;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
.font-normal {
|
|
560
|
+
font-weight: normal;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.font-light {
|
|
564
|
+
font-weight: 300;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.rounded {
|
|
568
|
+
border-radius: var(--border-radius-md);
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.rounded-sm {
|
|
572
|
+
border-radius: var(--border-radius-sm);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.rounded-lg {
|
|
576
|
+
border-radius: var(--border-radius-lg);
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.rounded-full {
|
|
580
|
+
border-radius: var(--border-radius-full);
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
.shadow {
|
|
584
|
+
box-shadow: var(--shadow-base);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.shadow-sm {
|
|
588
|
+
box-shadow: var(--shadow-sm);
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.shadow-md {
|
|
592
|
+
box-shadow: var(--shadow-md);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.shadow-lg {
|
|
596
|
+
box-shadow: var(--shadow-lg);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.shadow-xl {
|
|
600
|
+
box-shadow: var(--shadow-xl);
|
|
601
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "thailife-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20",
|
|
4
4
|
"description": "A modern UI library built with React and CSS",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
|
+
"style": "dist/styles/index.css",
|
|
8
9
|
"type": "module",
|
|
9
10
|
"files": [
|
|
10
11
|
"dist"
|
|
@@ -80,6 +81,7 @@
|
|
|
80
81
|
"react": "^18.3.1",
|
|
81
82
|
"react-dom": "^18.3.1",
|
|
82
83
|
"rollup": "^4.1.0",
|
|
84
|
+
"rollup-plugin-copy": "3.5.0",
|
|
83
85
|
"storybook": "^7.5.0",
|
|
84
86
|
"ts-jest": "^29.1.0",
|
|
85
87
|
"typescript": "^5.2.0",
|