funuicss 3.0.9 β 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/css/fun.css +11 -22
- package/package.json +1 -1
- package/ui/modal/Modal.js +5 -5
- package/ui/progress/Bar.d.ts +2 -1
- package/ui/progress/Bar.js +5 -4
- package/ui/video/Video.js +2 -2
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/css/fun.css
CHANGED
|
@@ -2774,7 +2774,7 @@ color: var(--text-color);
|
|
|
2774
2774
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
|
|
2775
2775
|
}
|
|
2776
2776
|
|
|
2777
|
-
.
|
|
2777
|
+
._center-play-icon{
|
|
2778
2778
|
position: absolute;
|
|
2779
2779
|
top: 50%;
|
|
2780
2780
|
left: 50%;
|
|
@@ -2793,41 +2793,30 @@ color: var(--text-color);
|
|
|
2793
2793
|
|
|
2794
2794
|
|
|
2795
2795
|
|
|
2796
|
-
.
|
|
2796
|
+
._play-button {
|
|
2797
2797
|
display: flex;
|
|
2798
2798
|
align-items: center;
|
|
2799
2799
|
justify-content: center;
|
|
2800
|
-
width:
|
|
2801
|
-
height:
|
|
2802
|
-
border:
|
|
2800
|
+
width: 3rem;
|
|
2801
|
+
height: 3rem;
|
|
2802
|
+
border: 2px solid var(--borderColor) !important;
|
|
2803
2803
|
border-radius: 50%;
|
|
2804
|
-
background: var(--
|
|
2804
|
+
background-color: var(--raiseOpaque);
|
|
2805
2805
|
backdrop-filter: var(--raiseBackdrop) !important;
|
|
2806
2806
|
transition: transform 0.3s ease;
|
|
2807
|
-
animation: pulse 2s infinite;
|
|
2808
2807
|
cursor: pointer;
|
|
2808
|
+
z-index: 2;
|
|
2809
2809
|
|
|
2810
2810
|
}
|
|
2811
2811
|
|
|
2812
|
-
.
|
|
2813
|
-
|
|
2814
|
-
background: var(--primary);
|
|
2812
|
+
._play-button:hover {
|
|
2813
|
+
background-color: var(--primary) !important;
|
|
2815
2814
|
color: var(--white) !important;
|
|
2816
2815
|
border-color: var(--primary400);
|
|
2817
2816
|
color: var(--text-color);
|
|
2818
2817
|
}
|
|
2819
2818
|
|
|
2820
|
-
|
|
2821
|
-
0% {
|
|
2822
|
-
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
|
|
2823
|
-
}
|
|
2824
|
-
70% {
|
|
2825
|
-
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
|
|
2826
|
-
}
|
|
2827
|
-
100% {
|
|
2828
|
-
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
2829
|
-
}
|
|
2830
|
-
}
|
|
2819
|
+
|
|
2831
2820
|
|
|
2832
2821
|
.styled-slider {
|
|
2833
2822
|
appearance: none;
|
|
@@ -4272,7 +4261,6 @@ opacity: 0.9;
|
|
|
4272
4261
|
}
|
|
4273
4262
|
.modal-body {
|
|
4274
4263
|
height: 100%;
|
|
4275
|
-
overflow: auto;
|
|
4276
4264
|
}
|
|
4277
4265
|
|
|
4278
4266
|
.modal-action {
|
|
@@ -6662,3 +6650,4 @@ background-color: rgba(0, 0, 0, 0.2);
|
|
|
6662
6650
|
}
|
|
6663
6651
|
|
|
6664
6652
|
|
|
6653
|
+
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.0
|
|
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,16 +86,16 @@ 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 ||
|
|
91
|
-
maxHeight: maxHeight ||
|
|
89
|
+
animation: "".concat(duration || 0.3, "s ").concat(animation || 'SlideDown'),
|
|
90
|
+
maxWidth: maxWidth || "700px",
|
|
91
|
+
maxHeight: maxHeight || "fit-content",
|
|
92
92
|
width: width || '100%',
|
|
93
|
-
height: height ||
|
|
93
|
+
height: height || "fit-content",
|
|
94
94
|
} }, rest),
|
|
95
95
|
title && (React.createElement(Header_1.default, { funcss: titlecss || '', title: title, close: !hideClose ?
|
|
96
96
|
React.createElement("div", { onClick: function () { return setOpen(false); }, className: "".concat(closecss || '', " pointer hover-text-error") }, close || React.createElement(pi_1.PiX, { size: 25 }))
|
|
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 || '') },
|
package/ui/video/Video.js
CHANGED
|
@@ -274,8 +274,8 @@ function Video(_a) {
|
|
|
274
274
|
react_1.default.createElement("input", { type: "range", min: 0, max: duration, value: currentTime, onChange: handleProgressBarChange, className: "width-100-p videoSlider styled-slider m-0", "aria-label": "Progress bar", style: { '--progress': "".concat((currentTime / duration) * 100) } })),
|
|
275
275
|
react_1.default.createElement("div", { className: "video_time" },
|
|
276
276
|
react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(duration - currentTime)), funcss: 'm-0', size: "sm" })))),
|
|
277
|
-
react_1.default.createElement("div", { className: "
|
|
278
|
-
react_1.default.createElement("div", { className: '
|
|
277
|
+
react_1.default.createElement("div", { className: "_center-play-icon animated fade-in", onClick: handlePlayPauseToggle },
|
|
278
|
+
react_1.default.createElement("div", { className: '_play-button' }, isPlaying ? react_1.default.createElement(pi_1.PiPause, { size: 20 }) : react_1.default.createElement(pi_1.PiPlay, { size: 20 }))),
|
|
279
279
|
react_1.default.createElement(RowFlex_1.default, { funcss: 'animated slide-up', gap: 1, justify: "center" },
|
|
280
280
|
react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
|
|
281
281
|
react_1.default.createElement(ToolTip_1.default, null,
|