funuicss 3.8.13 → 3.8.14
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/css/fun.css +0 -152
- package/package.json +1 -1
- package/ui/feature/Feature.d.ts +40 -70
- package/ui/feature/Feature.js +913 -175
- package/ui/text/Text.d.ts +3 -0
- package/ui/text/Text.js +15 -2
- package/utils/componentUtils.d.ts +2 -2
- package/utils/componentUtils.js +361 -310
package/css/fun.css
CHANGED
|
@@ -4163,158 +4163,6 @@ opacity: 1;
|
|
|
4163
4163
|
|
|
4164
4164
|
|
|
4165
4165
|
|
|
4166
|
-
.vista {
|
|
4167
|
-
width: 100%;
|
|
4168
|
-
}
|
|
4169
|
-
|
|
4170
|
-
/* Padding presets */
|
|
4171
|
-
.padding-sm {
|
|
4172
|
-
padding: 2rem 1rem;
|
|
4173
|
-
}
|
|
4174
|
-
|
|
4175
|
-
.padding-lg {
|
|
4176
|
-
padding: 5rem 1.5rem;
|
|
4177
|
-
}
|
|
4178
|
-
|
|
4179
|
-
/* Background options */
|
|
4180
|
-
.bg-white {
|
|
4181
|
-
background-color: white;
|
|
4182
|
-
}
|
|
4183
|
-
|
|
4184
|
-
.bg-light {
|
|
4185
|
-
background-color: #f9f9f9;
|
|
4186
|
-
}
|
|
4187
|
-
|
|
4188
|
-
.bg-dark {
|
|
4189
|
-
background-color: #1e1e1e;
|
|
4190
|
-
color: white;
|
|
4191
|
-
}
|
|
4192
|
-
/*
|
|
4193
|
-
.vista{
|
|
4194
|
-
display: flex;
|
|
4195
|
-
align-items: center;
|
|
4196
|
-
justify-content: center;
|
|
4197
|
-
}
|
|
4198
|
-
|
|
4199
|
-
.vista-container {
|
|
4200
|
-
max-width: 1200px;
|
|
4201
|
-
margin: 0 auto;
|
|
4202
|
-
display: flex;
|
|
4203
|
-
flex-wrap: wrap;
|
|
4204
|
-
align-items: center;
|
|
4205
|
-
gap: 2rem;
|
|
4206
|
-
justify-content: center;
|
|
4207
|
-
}
|
|
4208
|
-
|
|
4209
|
-
.grid-bg {
|
|
4210
|
-
position: relative;
|
|
4211
|
-
background-size: 40px 40px;
|
|
4212
|
-
background-repeat: repeat;
|
|
4213
|
-
}
|
|
4214
|
-
|
|
4215
|
-
|
|
4216
|
-
/* 🔶 2. Dotted Background */
|
|
4217
|
-
.bg-pattern-dots {
|
|
4218
|
-
background-size: 20px 20px;
|
|
4219
|
-
}
|
|
4220
|
-
|
|
4221
|
-
/* 🔷 3. Diagonal Lines */
|
|
4222
|
-
.bg-pattern-diagonal {
|
|
4223
|
-
background-size: 20px 20px;
|
|
4224
|
-
}
|
|
4225
|
-
|
|
4226
|
-
/* 🔶 4. Checkerboard Pattern */
|
|
4227
|
-
.bg-pattern-checkerboard {
|
|
4228
|
-
background-size: 40px 40px;
|
|
4229
|
-
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
|
|
4230
|
-
}
|
|
4231
|
-
|
|
4232
|
-
/* 🟦 7. Horizontal Lines Only */
|
|
4233
|
-
.bg-pattern-horizontal {
|
|
4234
|
-
background-size: 100% 40px;
|
|
4235
|
-
}
|
|
4236
|
-
|
|
4237
|
-
/* 🟥 8. Vertical Lines Only */
|
|
4238
|
-
.bg-pattern-vertical {
|
|
4239
|
-
background-size: 40px 100%;
|
|
4240
|
-
}
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
.vista.centered .vista-container {
|
|
4245
|
-
flex-direction: column;
|
|
4246
|
-
text-align: center;
|
|
4247
|
-
gap: 0.5rem;
|
|
4248
|
-
}
|
|
4249
|
-
|
|
4250
|
-
.vista.stacked .vista-container {
|
|
4251
|
-
flex-direction: column;
|
|
4252
|
-
}
|
|
4253
|
-
|
|
4254
|
-
.vista.imageLeft .vista-container,
|
|
4255
|
-
.vista.imageRight .vista-container {
|
|
4256
|
-
flex-direction: row;
|
|
4257
|
-
}
|
|
4258
|
-
|
|
4259
|
-
.vista.reverse .vista-container {
|
|
4260
|
-
flex-direction: row-reverse;
|
|
4261
|
-
}
|
|
4262
|
-
|
|
4263
|
-
/* Text alignment */
|
|
4264
|
-
.vista.text-left .vista-text {
|
|
4265
|
-
text-align: left;
|
|
4266
|
-
}
|
|
4267
|
-
.vista.text-center .vista-text {
|
|
4268
|
-
text-align: center;
|
|
4269
|
-
}
|
|
4270
|
-
.vista.text-right .vista-text {
|
|
4271
|
-
text-align: right;
|
|
4272
|
-
}
|
|
4273
|
-
|
|
4274
|
-
|
|
4275
|
-
.vista-subtitle {
|
|
4276
|
-
font-size: 1.125rem;
|
|
4277
|
-
opacity: 0.8;
|
|
4278
|
-
margin-bottom: 1.5rem;
|
|
4279
|
-
}
|
|
4280
|
-
|
|
4281
|
-
.vista-image img {
|
|
4282
|
-
width: 100%;
|
|
4283
|
-
}
|
|
4284
|
-
|
|
4285
|
-
/* Responsive behavior */
|
|
4286
|
-
@media screen and (max-width: 768px) {
|
|
4287
|
-
.vista-container {
|
|
4288
|
-
flex-direction: column !important;
|
|
4289
|
-
text-align: center;
|
|
4290
|
-
}
|
|
4291
|
-
|
|
4292
|
-
.vista.reverse .vista-container {
|
|
4293
|
-
flex-direction: column !important;
|
|
4294
|
-
}
|
|
4295
|
-
|
|
4296
|
-
.vista-text,
|
|
4297
|
-
.vista-image {
|
|
4298
|
-
text-align: center;
|
|
4299
|
-
}
|
|
4300
|
-
}
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
/* Responsive */
|
|
4304
|
-
@media screen and (max-width: 768px) {
|
|
4305
|
-
.vista-container {
|
|
4306
|
-
flex-direction: column !important;
|
|
4307
|
-
text-align: center;
|
|
4308
|
-
}
|
|
4309
|
-
|
|
4310
|
-
.vista.reverse .vista-container {
|
|
4311
|
-
flex-direction: column !important;
|
|
4312
|
-
}
|
|
4313
|
-
} */
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
4166
|
/* Base Animation Setup */
|
|
4319
4167
|
.animated {
|
|
4320
4168
|
animation-duration: 0.4s;
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.8.
|
|
2
|
+
"version": "3.8.14",
|
|
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/feature/Feature.d.ts
CHANGED
|
@@ -1,31 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
type
|
|
2
|
+
type ContentItem = {
|
|
3
3
|
icon?: string | React.ReactNode;
|
|
4
4
|
iconColor?: string;
|
|
5
5
|
iconSize?: number;
|
|
6
|
-
iconClassName?: string;
|
|
7
6
|
title?: React.ReactNode;
|
|
8
|
-
titleSize?: string;
|
|
9
|
-
titleWeight?: number;
|
|
10
|
-
titleColor?: string;
|
|
11
|
-
titleClassName?: string;
|
|
12
7
|
description?: React.ReactNode;
|
|
13
|
-
descriptionSize?: string;
|
|
14
|
-
descriptionWeight?: number;
|
|
15
|
-
descriptionColor?: string;
|
|
16
|
-
descriptionClassName?: string;
|
|
17
8
|
imageUrl?: string;
|
|
18
9
|
imageAlt?: string;
|
|
19
|
-
imageClassName?: string;
|
|
20
|
-
imageStyle?: React.CSSProperties;
|
|
21
|
-
content?: React.ReactNode;
|
|
22
10
|
className?: string;
|
|
23
11
|
style?: React.CSSProperties;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
12
|
+
customerName?: string;
|
|
13
|
+
company?: string;
|
|
14
|
+
avatar?: string;
|
|
15
|
+
role?: string;
|
|
16
|
+
project?: string;
|
|
17
|
+
rating?: number;
|
|
18
|
+
date?: string;
|
|
19
|
+
featured?: boolean;
|
|
20
|
+
content?: string;
|
|
29
21
|
};
|
|
30
22
|
interface CarouselOptions {
|
|
31
23
|
isCarousel?: boolean;
|
|
@@ -33,85 +25,63 @@ interface CarouselOptions {
|
|
|
33
25
|
gap?: number;
|
|
34
26
|
carouselFuncss?: string;
|
|
35
27
|
showDashes?: boolean;
|
|
36
|
-
allowVerticalOverflow?: boolean;
|
|
37
|
-
itemPadding?: string;
|
|
38
|
-
controlerSize?: number;
|
|
39
|
-
controlerIconSize?: number;
|
|
40
|
-
infiniteScroll?: boolean;
|
|
41
|
-
infiniteScrollSpeed?: number;
|
|
42
|
-
infiniteScrollDirection?: 'left' | 'right' | 'alternate';
|
|
43
|
-
carouselContainerClassName?: string;
|
|
44
|
-
carouselContainerStyle?: React.CSSProperties;
|
|
45
28
|
}
|
|
46
29
|
type FeatureProps = {
|
|
47
30
|
variant?: string;
|
|
48
31
|
layout?: 'checklist' | 'centered' | 'grid';
|
|
49
32
|
title?: React.ReactNode;
|
|
50
|
-
titleSize?:
|
|
51
|
-
titleWeight?: number;
|
|
33
|
+
titleSize?: 'base' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
52
34
|
titleColor?: string;
|
|
53
|
-
titleClassName?: string;
|
|
54
35
|
titleAlign?: 'left' | 'center' | 'right';
|
|
55
36
|
subtitle?: React.ReactNode;
|
|
56
|
-
subtitleSize?:
|
|
57
|
-
subtitleWeight?: number;
|
|
37
|
+
subtitleSize?: 'base' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
58
38
|
subtitleColor?: string;
|
|
59
|
-
subtitleClassName?: string;
|
|
60
39
|
description?: React.ReactNode;
|
|
61
|
-
descriptionSize?:
|
|
62
|
-
descriptionWeight?: number;
|
|
40
|
+
descriptionSize?: 'base' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
63
41
|
descriptionColor?: string;
|
|
64
|
-
|
|
65
|
-
|
|
42
|
+
isTestimonial?: boolean;
|
|
43
|
+
items?: ContentItem[] | string;
|
|
44
|
+
bucket?: string;
|
|
45
|
+
bucketPage?: number;
|
|
46
|
+
bucketSize?: number;
|
|
66
47
|
gap?: number;
|
|
67
48
|
itemMaxWidth?: string;
|
|
68
|
-
align?: 'start' | 'center' | 'end'
|
|
49
|
+
align?: 'start' | 'center' | 'end';
|
|
69
50
|
justify?: 'start' | 'center' | 'end' | 'between' | 'around';
|
|
70
51
|
wrap?: boolean;
|
|
71
52
|
card?: boolean;
|
|
72
53
|
cardPadding?: string;
|
|
73
54
|
cardRounded?: string;
|
|
74
55
|
cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
|
|
75
|
-
cardBorder?: boolean;
|
|
76
|
-
cardBorderColor?: string;
|
|
77
|
-
cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
|
|
78
56
|
cardClassName?: string;
|
|
79
|
-
padding?: string;
|
|
80
|
-
className?: string;
|
|
81
|
-
style?: React.CSSProperties;
|
|
82
|
-
containerClassName?: string;
|
|
83
|
-
containerStyle?: React.CSSProperties;
|
|
84
57
|
iconColor?: string;
|
|
85
58
|
iconSize?: number;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
59
|
+
itemTitleSize?: 'base' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
60
|
+
itemDescriptionSize?: 'base' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
61
|
+
showStars?: boolean;
|
|
62
|
+
ratingIcon?: string;
|
|
63
|
+
starColor?: string;
|
|
64
|
+
showQuote?: boolean;
|
|
65
|
+
quoteIcon?: string | React.ReactNode;
|
|
66
|
+
quoteColor?: string;
|
|
67
|
+
showDate?: boolean;
|
|
68
|
+
showCompany?: boolean;
|
|
69
|
+
showRole?: boolean;
|
|
70
|
+
showCTA?: boolean;
|
|
71
|
+
contentLimit?: number;
|
|
72
|
+
showExpand?: boolean;
|
|
73
|
+
expandText?: string;
|
|
74
|
+
collapseText?: string;
|
|
97
75
|
ctaText?: string;
|
|
98
76
|
ctaUrl?: string;
|
|
99
|
-
ctaOnClick?: () => void;
|
|
100
|
-
ctaClassName?: string;
|
|
101
|
-
ctaAlign?: 'left' | 'center' | 'right';
|
|
102
|
-
ctaStringPrefix?: string;
|
|
103
|
-
ctaStringSuffix?: string;
|
|
104
|
-
ctaStartIcon?: React.ReactNode;
|
|
105
|
-
ctaEndIcon?: React.ReactNode;
|
|
106
|
-
ctaIconSize?: number;
|
|
107
|
-
ctaIsLoading?: boolean;
|
|
108
|
-
ctaStatus?: 'success' | 'warning' | 'info' | 'error';
|
|
109
77
|
ctaBg?: string;
|
|
110
|
-
|
|
78
|
+
ctaAlign?: 'left' | 'center' | 'right';
|
|
79
|
+
padding?: string;
|
|
80
|
+
className?: string;
|
|
81
|
+
containerClassName?: string;
|
|
82
|
+
maxWidth?: string;
|
|
111
83
|
id?: string;
|
|
112
84
|
funcss?: string;
|
|
113
|
-
sectionClass?: string;
|
|
114
|
-
maxWidth?: string;
|
|
115
85
|
} & CarouselOptions;
|
|
116
86
|
declare const Feature: React.FC<FeatureProps>;
|
|
117
87
|
export default Feature;
|