funuicss 3.1.0 β 3.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 +225 -125
- package/package.json +1 -1
- package/ui/modal/Modal.js +3 -3
- package/ui/progress/Bar.d.ts +2 -1
- package/ui/progress/Bar.js +5 -4
package/README.md
CHANGED
|
@@ -1,162 +1,262 @@
|
|
|
1
|
+
# FunUi
|
|
2
|
+
|
|
1
3
|
<p align="center">
|
|
2
|
-
<img src="https://funui.netlify.app/logo.png" width="
|
|
4
|
+
<img src="https://funui.netlify.app/logo.png" width="80px" alt="FunUi Logo">
|
|
3
5
|
</p>
|
|
4
|
-
<h1 align="center">The React & Next Js Ui Library</h1>
|
|
5
6
|
|
|
6
|
-
<
|
|
7
|
-
|
|
7
|
+
<h1 align="center">The React & Next.js UI Library</h1>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<em>A modern, modular, and responsive UI framework built for React and Next.js applications</em>
|
|
8
11
|
</p>
|
|
9
12
|
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
</ul>
|
|
13
|
+
<p align="center">
|
|
14
|
+
<a href="https://funui.netlify.app">π Documentation</a> β’
|
|
15
|
+
<a href="https://funui.netlify.app/components">π¦ Components</a> β’
|
|
16
|
+
<a href="https://funui.netlify.app/gettingstarted">π Getting Started</a>
|
|
17
|
+
</p>
|
|
16
18
|
|
|
17
|
-
|
|
18
|
-
https://funui.netlify.app
|
|
19
|
+
---
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
## β¨ Why Choose FunUi?
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
- **𧩠Modular Architecture** - Import only the components you need, keeping your bundle size optimized
|
|
24
|
+
- **π± Responsive Design** - Built with flexbox for seamless adaptation across all screen sizes
|
|
25
|
+
- **β‘ Easy Integration** - Get started in minutes with simple installation and CSS import
|
|
26
|
+
- **π¨ Customizable** - Extensive theming options and utility classes for complete design control
|
|
27
|
+
- **βοΈ React Native** - Designed specifically for React and Next.js ecosystems
|
|
24
28
|
|
|
25
|
-
|
|
26
|
-
npm install funuicss
|
|
27
|
-
</pre>
|
|
29
|
+
## π Quick Start
|
|
28
30
|
|
|
29
|
-
|
|
30
|
-
Install the package via NPM
|
|
31
|
+
### Installation
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
Choose your preferred package manager:
|
|
34
|
+
|
|
35
|
+
**npm**
|
|
36
|
+
```bash
|
|
37
|
+
npm install funuicss
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**yarn**
|
|
41
|
+
```bash
|
|
33
42
|
yarn add funuicss
|
|
34
|
-
|
|
43
|
+
```
|
|
35
44
|
|
|
45
|
+
**pnpm**
|
|
46
|
+
```bash
|
|
47
|
+
pnpm add funuicss
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Setup
|
|
51
|
+
|
|
52
|
+
Import the CSS file in your application's entry point (e.g., `_app.js`, `_app.jsx`, `index.js`):
|
|
36
53
|
|
|
37
|
-
|
|
38
|
-
Import the css file at your entry point to apply our classes,for example: _app.js, _app.jsx, index.js, index,jsx files
|
|
39
|
-
<pre>
|
|
54
|
+
```javascript
|
|
40
55
|
import 'funuicss/css/fun.css'
|
|
41
|
-
|
|
56
|
+
```
|
|
42
57
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
## π Usage Examples
|
|
59
|
+
|
|
60
|
+
### Complete Login Form
|
|
61
|
+
|
|
62
|
+
Here's a comprehensive example showing multiple FunUi components working together:
|
|
47
63
|
|
|
48
64
|
```jsx
|
|
49
65
|
import React from 'react'
|
|
50
|
-
import Text from 'funuicss
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
block
|
|
66
|
-
/>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</div>
|
|
86
|
-
<div className="section">
|
|
87
|
-
<Button
|
|
88
|
-
text={"Let's go"}
|
|
89
|
-
raised
|
|
90
|
-
fullWidth
|
|
91
|
-
bg='primary800'
|
|
92
|
-
/>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
)
|
|
100
|
-
}
|
|
66
|
+
import { Text, Input, Button, Section } from 'funuicss'
|
|
67
|
+
|
|
68
|
+
export default function LoginForm() {
|
|
69
|
+
return (
|
|
70
|
+
<div className="central height-500-min">
|
|
71
|
+
<div className="width-300-max fit">
|
|
72
|
+
{/* Header Section */}
|
|
73
|
+
<div className="margin-bottom-40">
|
|
74
|
+
<Text
|
|
75
|
+
text="Welcome"
|
|
76
|
+
heading="h2"
|
|
77
|
+
block
|
|
78
|
+
/>
|
|
79
|
+
<Text
|
|
80
|
+
text="Sign in to continue!"
|
|
81
|
+
block
|
|
82
|
+
/>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
{/* Email Field */}
|
|
86
|
+
<Section gap={1.5}>
|
|
87
|
+
<Text
|
|
88
|
+
text="Email"
|
|
89
|
+
funcss="margin-bottom-10"
|
|
90
|
+
block
|
|
91
|
+
size="small"
|
|
92
|
+
bold
|
|
93
|
+
color="primary"
|
|
94
|
+
/>
|
|
95
|
+
<Input
|
|
96
|
+
type="email"
|
|
97
|
+
fullWidth
|
|
98
|
+
bordered
|
|
99
|
+
/>
|
|
100
|
+
</Section>
|
|
101
101
|
|
|
102
|
+
{/* Password Field */}
|
|
103
|
+
<Section gap={1}>
|
|
104
|
+
<Text
|
|
105
|
+
text="Password"
|
|
106
|
+
funcss="margin-bottom-10"
|
|
107
|
+
block
|
|
108
|
+
size="small"
|
|
109
|
+
bold
|
|
110
|
+
color="primary"
|
|
111
|
+
/>
|
|
112
|
+
<Input
|
|
113
|
+
type="password"
|
|
114
|
+
fullWidth
|
|
115
|
+
bordered
|
|
116
|
+
/>
|
|
117
|
+
</Section>
|
|
118
|
+
|
|
119
|
+
{/* Forgot Password Link */}
|
|
120
|
+
<div className="section">
|
|
121
|
+
<Link href="/#">
|
|
122
|
+
<Text
|
|
123
|
+
text="Forgot password!"
|
|
124
|
+
size="small"
|
|
125
|
+
underline
|
|
126
|
+
color="primary"
|
|
127
|
+
/>
|
|
128
|
+
</Link>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
{/* Submit Button */}
|
|
132
|
+
<div className="section">
|
|
133
|
+
<Button
|
|
134
|
+
text="Let's go"
|
|
135
|
+
raised
|
|
136
|
+
fullWidth
|
|
137
|
+
bg="primary800"
|
|
138
|
+
/>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
)
|
|
143
|
+
}
|
|
102
144
|
```
|
|
103
145
|
|
|
104
|
-
|
|
105
|
-
|
|
146
|
+
### Button Components
|
|
147
|
+
|
|
148
|
+
Create beautiful buttons with various styles:
|
|
106
149
|
|
|
107
150
|
```jsx
|
|
108
151
|
import React from 'react'
|
|
109
|
-
import Button from 'funuicss
|
|
152
|
+
import { Button } from 'funuicss'
|
|
110
153
|
|
|
111
|
-
export default function
|
|
112
|
-
return (
|
|
113
|
-
<
|
|
114
|
-
|
|
154
|
+
export default function ButtonExamples() {
|
|
155
|
+
return (
|
|
156
|
+
<div>
|
|
157
|
+
{/* Outlined Button */}
|
|
158
|
+
<Button
|
|
159
|
+
bg="primary"
|
|
160
|
+
outlined
|
|
161
|
+
text="Outlined Button"
|
|
162
|
+
/>
|
|
163
|
+
|
|
164
|
+
{/* Raised Button */}
|
|
165
|
+
<Button
|
|
166
|
+
bg="secondary"
|
|
167
|
+
raised
|
|
168
|
+
text="Raised Button"
|
|
169
|
+
/>
|
|
170
|
+
|
|
171
|
+
{/* Full Width Button */}
|
|
172
|
+
<Button
|
|
173
|
+
bg="success"
|
|
174
|
+
fullWidth
|
|
175
|
+
text="Full Width Button"
|
|
176
|
+
/>
|
|
177
|
+
</div>
|
|
178
|
+
)
|
|
115
179
|
}
|
|
116
180
|
```
|
|
117
181
|
|
|
182
|
+
### Input Components
|
|
118
183
|
|
|
119
|
-
|
|
120
|
-
<p> This is a simple input</p>
|
|
184
|
+
Flexible input components for forms:
|
|
121
185
|
|
|
122
186
|
```jsx
|
|
123
187
|
import React from 'react'
|
|
124
|
-
import Input from 'funuicss
|
|
125
|
-
|
|
126
|
-
export default function
|
|
127
|
-
return (
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
188
|
+
import { Input } from 'funuicss'
|
|
189
|
+
|
|
190
|
+
export default function InputExamples() {
|
|
191
|
+
return (
|
|
192
|
+
<div>
|
|
193
|
+
{/* Basic Input */}
|
|
194
|
+
<Input
|
|
195
|
+
type="text"
|
|
196
|
+
label="Basic Input"
|
|
197
|
+
funcss="full-width"
|
|
198
|
+
/>
|
|
199
|
+
|
|
200
|
+
{/* Bordered Input */}
|
|
201
|
+
<Input
|
|
202
|
+
type="text"
|
|
203
|
+
bordered
|
|
204
|
+
label="Bordered Input"
|
|
205
|
+
funcss="full-width section"
|
|
206
|
+
/>
|
|
207
|
+
|
|
208
|
+
{/* Email Input */}
|
|
209
|
+
<Input
|
|
210
|
+
type="email"
|
|
211
|
+
bordered
|
|
212
|
+
label="Email Address"
|
|
213
|
+
funcss="full-width section"
|
|
214
|
+
placeholder="Enter your email"
|
|
215
|
+
/>
|
|
216
|
+
</div>
|
|
217
|
+
)
|
|
142
218
|
}
|
|
143
219
|
```
|
|
144
|
-
<p>
|
|
145
|
-
<h2>Documentaion</h2>
|
|
146
|
-
<div>Check our <a href="https://funui.netlify.app"> Documentation </a> for more examples and explanation</div>
|
|
147
|
-
<p>
|
|
148
|
-
<ul>
|
|
149
|
-
<li><a href="https://funui.netlify.app"> Documentation </a></li>
|
|
150
|
-
<li><a href="https://funui.netlify.app/gettingstarted"> Installing </a></li>
|
|
151
|
-
<li><a href="https://funui.netlify.app/components"> Components </a></li>
|
|
152
|
-
<li><a href="https://funui.netlify.app/darkmode"> Dark Mode </a></li>
|
|
153
|
-
<li><a href="https://funui.netlify.app/icons"> Icons </a></li>
|
|
154
|
-
<li><a href="https://funui.netlify.app/notifications"> Notifications </a></li>
|
|
155
|
-
</ul>
|
|
156
|
-
</p>
|
|
157
|
-
</p>
|
|
158
220
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
221
|
+
## π Documentation
|
|
222
|
+
|
|
223
|
+
Explore comprehensive guides and examples:
|
|
224
|
+
|
|
225
|
+
- **[π Full Documentation](https://funui.netlify.app)** - Complete API reference and guides
|
|
226
|
+
- **[π Getting Started](https://funui.netlify.app/gettingstarted)** - Installation and setup instructions
|
|
227
|
+
- **[𧩠Components](https://funui.netlify.app/components)** - Browse all available components
|
|
228
|
+
- **[π¨ Theming](https://funui.netlify.app/theming)** - Customization and styling guide
|
|
229
|
+
|
|
230
|
+
## π Features
|
|
231
|
+
|
|
232
|
+
### Core Components
|
|
233
|
+
- **Button** - Various styles including outlined, raised, and full-width
|
|
234
|
+
- **Input** - Form inputs with labels, borders, and validation states
|
|
235
|
+
- **Text** - Typography component with heading support
|
|
236
|
+
- **Section** - Layout component for spacing and organization
|
|
237
|
+
|
|
238
|
+
### Utility Classes
|
|
239
|
+
- Responsive layout utilities
|
|
240
|
+
- Spacing and margin controls
|
|
241
|
+
- Color and theme variants
|
|
242
|
+
- Flexbox positioning helpers
|
|
243
|
+
|
|
244
|
+
## π€ Contributing
|
|
245
|
+
|
|
246
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details on how to get started.
|
|
247
|
+
|
|
248
|
+
## π License
|
|
249
|
+
|
|
250
|
+
This project is licensed under the [MIT License](https://github.com/FunUi-io/FunUi/blob/main/LICENSE.txt).
|
|
251
|
+
|
|
252
|
+
## π Links
|
|
253
|
+
|
|
254
|
+
- [Official Website](https://funui.netlify.app)
|
|
255
|
+
- [GitHub Repository](https://github.com/FunUi-io/FunUi)
|
|
256
|
+
- [NPM Package](https://www.npmjs.com/package/funuicss)
|
|
257
|
+
|
|
258
|
+
---
|
|
259
|
+
|
|
260
|
+
<p align="center">
|
|
261
|
+
Made with β€οΈ by the FunUi Team
|
|
162
262
|
</p>
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.
|
|
2
|
+
"version": "3.2.0",
|
|
3
3
|
"name": "funuicss",
|
|
4
4
|
"description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appealβall achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
|
|
5
5
|
"main": "index.js",
|
package/ui/modal/Modal.js
CHANGED
|
@@ -86,8 +86,8 @@ function Modal(_a) {
|
|
|
86
86
|
return null;
|
|
87
87
|
return (React.createElement("div", { className: "modal ".concat(backdrop ? 'backdrop' : '', " ").concat(position || ''), id: modalId, onClick: handleClickOutside },
|
|
88
88
|
React.createElement("div", __assign({ className: "modal-content ".concat(funcss || '', " ").concat(flat ? 'flat' : ''), style: {
|
|
89
|
-
animation: "".concat(duration || 0.
|
|
90
|
-
maxWidth: maxWidth || "
|
|
89
|
+
animation: "".concat(duration || 0.3, "s ").concat(animation || 'SlideDown'),
|
|
90
|
+
maxWidth: maxWidth || "700px",
|
|
91
91
|
maxHeight: maxHeight || "fit-content",
|
|
92
92
|
width: width || '100%',
|
|
93
93
|
height: height || "fit-content",
|
|
@@ -97,5 +97,5 @@ function Modal(_a) {
|
|
|
97
97
|
: "" })),
|
|
98
98
|
React.createElement(Content_1.default, { funcss: bodycss || '' }, body || children),
|
|
99
99
|
footer ? (React.createElement(Action_1.default, { funcss: footercss || '' }, footer)) : (React.createElement(Action_1.default, { funcss: 'text-right' },
|
|
100
|
-
React.createElement(Button_1.default, { bg: '
|
|
100
|
+
React.createElement(Button_1.default, { bg: 'success', endIcon: okIcon || React.createElement(pi_1.PiPaperPlaneRight, null), raised: true, onClick: handleOkClick }, onOkText || 'OK'))))));
|
|
101
101
|
}
|
package/ui/progress/Bar.d.ts
CHANGED
|
@@ -10,8 +10,9 @@ interface ProgressBarProps {
|
|
|
10
10
|
rounded?: boolean;
|
|
11
11
|
type?: 'linear' | 'circle';
|
|
12
12
|
size?: number;
|
|
13
|
+
fontSize?: number;
|
|
13
14
|
strokeWidth?: number;
|
|
14
15
|
}
|
|
15
16
|
export default function ProgressBar({ funcss, progress, height, children, content, raised, rounded, bg, // default CSS class name
|
|
16
|
-
type, size, strokeWidth, }: ProgressBarProps): React.JSX.Element;
|
|
17
|
+
type, size, fontSize, strokeWidth, }: ProgressBarProps): React.JSX.Element;
|
|
17
18
|
export {};
|
package/ui/progress/Bar.js
CHANGED
|
@@ -40,7 +40,7 @@ var pi_1 = require("react-icons/pi");
|
|
|
40
40
|
function ProgressBar(_a) {
|
|
41
41
|
var funcss = _a.funcss, progress = _a.progress, _b = _a.height, height = _b === void 0 ? 16 : _b, children = _a.children, content = _a.content, raised = _a.raised, rounded = _a.rounded, _c = _a.bg, bg = _c === void 0 ? 'primary' : _c, // default CSS class name
|
|
42
42
|
_d = _a.type, // default CSS class name
|
|
43
|
-
type = _d === void 0 ? 'linear' : _d, _e = _a.size, size = _e === void 0 ? 60 : _e, _f = _a.strokeWidth, strokeWidth = _f === void 0 ? 6 : _f;
|
|
43
|
+
type = _d === void 0 ? 'linear' : _d, _e = _a.size, size = _e === void 0 ? 60 : _e, fontSize = _a.fontSize, _f = _a.strokeWidth, strokeWidth = _f === void 0 ? 6 : _f;
|
|
44
44
|
var clampedProgress = Math.min(100, Math.max(0, progress));
|
|
45
45
|
var isComplete = clampedProgress >= 100;
|
|
46
46
|
var effectiveBg = isComplete ? 'success' : bg;
|
|
@@ -57,12 +57,12 @@ function ProgressBar(_a) {
|
|
|
57
57
|
var radius = (size - strokeWidth) / 2;
|
|
58
58
|
var circumference = 2 * Math.PI * radius;
|
|
59
59
|
var offset = circumference - (clampedProgress / 100) * circumference;
|
|
60
|
-
return (React.createElement("div", { className: "relative flex justify-center items-center "
|
|
60
|
+
return (React.createElement("div", { className: "relative flex justify-center items-center ", style: { width: size, height: size } },
|
|
61
61
|
React.createElement("svg", { width: size, height: size, className: "rotate-[-90deg]" },
|
|
62
62
|
React.createElement("circle", { cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", stroke: "#e5e7eb" // light gray background stroke
|
|
63
63
|
}),
|
|
64
64
|
React.createElement("circle", { cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", className: effectiveBg, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", style: { transition: 'stroke-dashoffset 0.4s ease, stroke 0.3s ease' } })),
|
|
65
|
-
React.createElement("div", { className: "absolute text-center font-bold text-sm", style: {
|
|
65
|
+
React.createElement("div", { className: "absolute text-center font-bold text-sm ".concat(funcss), style: {
|
|
66
66
|
top: '50%',
|
|
67
67
|
left: '50%',
|
|
68
68
|
transform: 'translate(-50%, -50%)',
|
|
@@ -71,7 +71,8 @@ function ProgressBar(_a) {
|
|
|
71
71
|
justifyContent: 'center',
|
|
72
72
|
width: size,
|
|
73
73
|
height: size,
|
|
74
|
-
|
|
74
|
+
fontSize: fontSize ? fontSize + "rem" : '',
|
|
75
|
+
} }, isComplete ? React.createElement(pi_1.PiCheck, { className: "text-success800", size: (fontSize || size / 2.2) }) : renderContent())));
|
|
75
76
|
}
|
|
76
77
|
// Linear bar
|
|
77
78
|
return (React.createElement("div", { className: "progressBar ".concat(raised ? 'raised' : '', " ").concat(rounded ? 'rounded' : '', " ").concat(funcss || '') },
|