funuicss 3.8.8 → 3.8.10

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.
Files changed (22) hide show
  1. package/css/fun.css +311 -1
  2. package/index.d.ts +2 -0
  3. package/index.js +6 -2
  4. package/package.json +1 -1
  5. package/ui/button/Button.d.ts +4 -4
  6. package/ui/button/Button.js +187 -82
  7. package/ui/carousel/Carousel.d.ts +3 -0
  8. package/ui/carousel/Carousel.js +140 -16
  9. package/ui/feature/Feature.d.ts +26 -39
  10. package/ui/feature/Feature.js +87 -148
  11. package/ui/flex/Flex.d.ts +11 -10
  12. package/ui/flex/Flex.js +102 -6
  13. package/ui/form/Form.d.ts +21 -12
  14. package/ui/form/Form.js +428 -319
  15. package/ui/input/Input.d.ts +16 -21
  16. package/ui/input/Input.js +156 -1345
  17. package/ui/notification/Notification.js +6 -2
  18. package/ui/products/ProductDetail.js +31 -23
  19. package/ui/products/Store.js +5 -5
  20. package/ui/sidebar/SideBar.js +1 -2
  21. package/ui/specials/CircleGroup.d.ts +2 -1
  22. package/ui/specials/CircleGroup.js +3 -3
package/ui/feature/Feature.d.ts CHANGED
@@ -9,13 +9,11 @@ type FeatureItem = {
9
9
  titleWeight?: number;
10
10
  titleColor?: string;
11
11
  titleClassName?: string;
12
- titleVariant?: string;
13
12
  description?: React.ReactNode;
14
13
  descriptionSize?: string;
15
14
  descriptionWeight?: number;
16
15
  descriptionColor?: string;
17
16
  descriptionClassName?: string;
18
- descriptionVariant?: string;
19
17
  imageUrl?: string;
20
18
  imageAlt?: string;
21
19
  imageClassName?: string;
@@ -23,21 +21,28 @@ type FeatureItem = {
23
21
  content?: React.ReactNode;
24
22
  className?: string;
25
23
  style?: React.CSSProperties;
26
- cardBg?: string;
27
- cardPadding?: string;
28
- cardRounded?: string;
29
- cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
30
- cardBorder?: boolean;
31
- cardBorderColor?: string;
32
- cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
33
24
  ctaText?: string;
34
25
  ctaUrl?: string;
35
- ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
36
26
  ctaOnClick?: () => void;
37
- ctaCss?: string;
38
27
  ctaClassName?: string;
39
28
  customRender?: () => React.ReactNode;
40
29
  };
30
+ interface CarouselOptions {
31
+ isCarousel?: boolean;
32
+ scrollNumber?: number;
33
+ gap?: number;
34
+ carouselFuncss?: string;
35
+ 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
+ }
41
46
  type FeatureProps = {
42
47
  variant?: string;
43
48
  layout?: 'checklist' | 'centered' | 'grid';
@@ -47,33 +52,23 @@ type FeatureProps = {
47
52
  titleColor?: string;
48
53
  titleClassName?: string;
49
54
  titleAlign?: 'left' | 'center' | 'right';
50
- titleVariant?: string;
51
55
  subtitle?: React.ReactNode;
52
56
  subtitleSize?: string;
53
57
  subtitleWeight?: number;
54
58
  subtitleColor?: string;
55
59
  subtitleClassName?: string;
56
- subtitleVariant?: string;
57
60
  description?: React.ReactNode;
58
61
  descriptionSize?: string;
59
62
  descriptionWeight?: number;
60
63
  descriptionColor?: string;
61
64
  descriptionClassName?: string;
62
- descriptionVariant?: string;
63
65
  features?: FeatureItem[] | string;
64
- columns?: number;
65
- gap?: string;
66
- itemGap?: string;
66
+ gap?: number;
67
+ itemMaxWidth?: string;
67
68
  align?: 'start' | 'center' | 'end' | 'stretch';
68
69
  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
69
70
  wrap?: boolean;
70
- bg?: string;
71
- padding?: string;
72
- className?: string;
73
- style?: React.CSSProperties;
74
- containerClassName?: string;
75
- containerStyle?: React.CSSProperties;
76
- cardBg?: string;
71
+ card?: boolean;
77
72
  cardPadding?: string;
78
73
  cardRounded?: string;
79
74
  cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
@@ -81,27 +76,28 @@ type FeatureProps = {
81
76
  cardBorderColor?: string;
82
77
  cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
83
78
  cardClassName?: string;
79
+ padding?: string;
80
+ className?: string;
81
+ style?: React.CSSProperties;
82
+ containerClassName?: string;
83
+ containerStyle?: React.CSSProperties;
84
84
  iconColor?: string;
85
85
  iconSize?: number;
86
86
  iconClassName?: string;
87
87
  itemTitleSize?: string;
88
88
  itemTitleWeight?: number;
89
89
  itemTitleColor?: string;
90
- itemTitleVariant?: string;
91
90
  itemDescriptionSize?: string;
92
91
  itemDescriptionWeight?: number;
93
92
  itemDescriptionColor?: string;
94
- itemDescriptionVariant?: string;
95
93
  checkmarkIcon?: string;
96
94
  checkmarkColor?: string;
97
95
  checkmarkSize?: number;
98
96
  checkmarkClassName?: string;
99
97
  ctaText?: string;
100
98
  ctaUrl?: string;
101
- ctaVariant?: 'primary' | 'secondary' | 'accent' | 'text' | 'outline';
102
99
  ctaOnClick?: () => void;
103
100
  ctaClassName?: string;
104
- ctaCss?: string;
105
101
  ctaAlign?: 'left' | 'center' | 'right';
106
102
  ctaStringPrefix?: string;
107
103
  ctaStringSuffix?: string;
@@ -110,21 +106,12 @@ type FeatureProps = {
110
106
  ctaIconSize?: number;
111
107
  ctaIsLoading?: boolean;
112
108
  ctaStatus?: 'success' | 'warning' | 'info' | 'error';
113
- pattern?: 'grid' | 'dots' | 'diagonal' | 'none';
114
- patternOpacity?: number;
115
- patternColor?: string;
116
- patternSize?: string;
117
- fade?: boolean;
118
- fadeColor?: string;
119
- fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
120
- fadeRadial?: boolean;
121
- hoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
109
+ ctaBg?: string;
122
110
  children?: React.ReactNode;
123
111
  id?: string;
124
112
  funcss?: string;
125
113
  sectionClass?: string;
126
114
  maxWidth?: string;
127
- responsiveColumns?: string;
128
- };
115
+ } & CarouselOptions;
129
116
  declare const Feature: React.FC<FeatureProps>;
130
117
  export default Feature;
package/ui/feature/Feature.js CHANGED
@@ -54,6 +54,7 @@ var componentUtils_1 = require("../../utils/componentUtils");
54
54
  var Text_1 = __importDefault(require("../text/Text"));
55
55
  var Button_1 = __importDefault(require("../button/Button"));
56
56
  var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
57
+ var Carousel_1 = __importDefault(require("../carousel/Carousel")); // Import the Carousel component
57
58
  var useDynamicIcon = function (iconString) {
58
59
  var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
59
60
  var _b = (0, react_1.useState)(false), hasValidIcon = _b[0], setHasValidIcon = _b[1];
@@ -121,12 +122,25 @@ var FeatureIcon = function (_a) {
121
122
  }
122
123
  return null;
123
124
  };
125
+ // Helper function to convert shorthand flex values to proper CSS values
126
+ var convertFlexValue = function (value) {
127
+ if (!value)
128
+ return undefined;
129
+ var flexMap = {
130
+ 'start': 'flex-start',
131
+ 'end': 'flex-end',
132
+ 'center': 'center',
133
+ 'between': 'space-between',
134
+ 'around': 'space-around',
135
+ 'stretch': 'stretch',
136
+ };
137
+ return flexMap[value] || value;
138
+ };
124
139
  var Feature = function (localProps) {
125
140
  var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Feature', localProps.variant).mergeWithLocal;
126
141
  var mergedProps = mergeWithLocal(localProps).props;
127
142
  var final = mergedProps;
128
143
  var _a = (0, react_1.useState)([]), featuresArray = _a[0], setFeaturesArray = _a[1];
129
- var _b = (0, react_1.useState)({}), responsiveColumns = _b[0], setResponsiveColumns = _b[1];
130
144
  // Parse features
131
145
  (0, react_1.useEffect)(function () {
132
146
  if (typeof final.features === 'string') {
@@ -146,21 +160,6 @@ var Feature = function (localProps) {
146
160
  setFeaturesArray([]);
147
161
  }
148
162
  }, [final.features]);
149
- // Parse responsive columns
150
- (0, react_1.useEffect)(function () {
151
- if (final.responsiveColumns) {
152
- try {
153
- var parsed = JSON.parse(final.responsiveColumns);
154
- if (parsed && typeof parsed === 'object') {
155
- setResponsiveColumns(parsed);
156
- }
157
- }
158
- catch (error) {
159
- console.error('Error parsing responsive columns:', error);
160
- setResponsiveColumns({});
161
- }
162
- }
163
- }, [final.responsiveColumns]);
164
163
  var getSpacingValue = function (value, defaultValue) {
165
164
  if (defaultValue === void 0) { defaultValue = '0'; }
166
165
  if (!value)
@@ -170,33 +169,20 @@ var Feature = function (localProps) {
170
169
  }
171
170
  return value;
172
171
  };
173
- var getButtonVariantClass = function (variant) {
174
- if (!variant)
175
- return '';
176
- var variantClasses = {
177
- 'primary': 'btn-primary',
178
- 'secondary': 'btn-secondary',
179
- 'accent': 'btn-accent',
180
- 'text': 'btn-text',
181
- 'outline': 'btn-outline',
182
- };
183
- return variantClasses[variant] || "btn-".concat(variant);
184
- };
185
172
  var renderItemCTA = function (item) {
186
173
  if (!item.ctaText)
187
174
  return null;
188
- var ctaVariant = item.ctaVariant || 'text';
189
- var ctaClassName = item.ctaClassName || '';
190
- var ctaCss = item.ctaCss || '';
191
- var buttonClass = getButtonVariantClass(ctaVariant);
192
- return (react_1.default.createElement("a", { href: item.ctaUrl, onClick: item.ctaOnClick, className: "btn ".concat(buttonClass, " ").concat(ctaClassName, " ").concat(ctaCss, " feature-section__item-cta text-sm"), style: {
175
+ return (react_1.default.createElement("a", { href: item.ctaUrl, onClick: item.ctaOnClick, className: "feature-section__item-cta ".concat(item.ctaClassName || ''), style: {
193
176
  marginTop: '1rem',
194
177
  display: 'inline-block',
195
178
  textDecoration: 'none',
179
+ color: 'var(--primary)',
180
+ fontWeight: 500,
181
+ fontSize: '0.875rem',
196
182
  } }, item.ctaText));
197
183
  };
198
184
  var renderFeatureItem = function (item, index) {
199
- var _a, _b;
185
+ var _a;
200
186
  if (item.customRender) {
201
187
  return item.customRender();
202
188
  }
@@ -207,144 +193,93 @@ var Feature = function (localProps) {
207
193
  var checkmarkColor = final.checkmarkColor || 'success';
208
194
  var checkmarkSize = final.checkmarkSize || 20;
209
195
  var checkmarkClassName = final.checkmarkClassName || '';
210
- var cardBg = item.cardBg || final.cardBg;
211
- var cardPadding = item.cardPadding || final.cardPadding || '1.5rem';
212
- var cardRounded = item.cardRounded || final.cardRounded || '0.5rem';
213
- var cardShadow = item.cardShadow || final.cardShadow || 'md';
214
- var cardBorder = (_b = (_a = item.cardBorder) !== null && _a !== void 0 ? _a : final.cardBorder) !== null && _b !== void 0 ? _b : true;
215
- var cardBorderColor = item.cardBorderColor || final.cardBorderColor || 'var(--borderRgb)';
216
- var cardHoverEffect = item.cardHoverEffect || final.cardHoverEffect || 'none';
196
+ var cardPadding = final.cardPadding || '1.5rem';
197
+ var cardRounded = final.cardRounded || '0.5rem';
198
+ var cardShadow = final.cardShadow || 'md';
199
+ var cardBorder = (_a = final.cardBorder) !== null && _a !== void 0 ? _a : true;
200
+ var cardBorderColor = final.cardBorderColor || 'var(--borderRgb)';
201
+ var cardHoverEffect = final.cardHoverEffect || 'none';
217
202
  var titleSize = item.titleSize || final.itemTitleSize || '1.125rem';
218
203
  var titleWeight = item.titleWeight || final.itemTitleWeight || 600;
219
204
  var titleColor = item.titleColor || final.itemTitleColor || 'var(--text-color)';
220
205
  var titleClassName = item.titleClassName || '';
221
- var titleVariant = item.titleVariant || final.itemTitleVariant; // Updated
222
206
  var descriptionSize = item.descriptionSize || final.itemDescriptionSize || '0.875rem';
223
207
  var descriptionWeight = item.descriptionWeight || final.itemDescriptionWeight || 400;
224
208
  var descriptionColor = item.descriptionColor || final.itemDescriptionColor || 'var(--text-muted)';
225
209
  var descriptionClassName = item.descriptionClassName || '';
226
- var descriptionVariant = item.descriptionVariant || final.itemDescriptionVariant; // Updated
227
- var isGridLayout = final.layout === 'grid';
228
210
  var featureContent = (react_1.default.createElement("div", { className: "feature-section__item ".concat(item.className || ''), style: item.style },
229
- (item.icon || item.imageUrl || final.layout === 'checklist') && (react_1.default.createElement("div", { className: "feature-section__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature-section__image ".concat(item.imageClassName || final.imageClassName || ''), style: __assign(__assign({ width: "".concat(iconSize, "px"), height: "".concat(iconSize, "px"), objectFit: 'cover', borderRadius: '50%' }, item.imageStyle), final.imageStyle) })) : (react_1.default.createElement("div", { className: "feature-section__icon-wrapper" },
211
+ (item.icon || item.imageUrl || final.layout === 'checklist') && (react_1.default.createElement("div", { className: "feature-section__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature-section__image ".concat(item.imageClassName || ''), style: __assign({ width: "".concat(iconSize, "px"), height: "".concat(iconSize, "px"), objectFit: 'cover', borderRadius: '50%' }, item.imageStyle) })) : (react_1.default.createElement("div", { className: "feature-section__icon-wrapper" },
230
212
  react_1.default.createElement(FeatureIcon, { icon: item.icon, iconColor: iconColor, iconSize: iconSize, iconClassName: iconClassName, layout: final.layout, checklistIcon: checkmarkIcon, checklistColor: checkmarkColor, checklistSize: checkmarkSize, checklistClassName: checkmarkClassName }))))),
231
- item.title && (react_1.default.createElement(Text_1.default, { variant: titleVariant, block: true, size: titleSize, weight: titleWeight, color: titleColor, funcss: "feature-section__title ".concat(titleClassName), style: { marginBottom: '0.75rem' } }, item.title)),
232
- item.description && (react_1.default.createElement(Text_1.default, { variant: descriptionVariant, block: true, size: descriptionSize, weight: descriptionWeight, color: descriptionColor, funcss: "feature-section__description ".concat(descriptionClassName) }, item.description)),
213
+ item.title && (react_1.default.createElement(Text_1.default, { block: true, size: titleSize, weight: titleWeight, color: titleColor, funcss: "feature-section__title ".concat(titleClassName), style: { marginBottom: '0.75rem' } }, item.title)),
214
+ item.description && (react_1.default.createElement(Text_1.default, { block: true, size: descriptionSize, weight: descriptionWeight, color: descriptionColor, funcss: "feature-section__description ".concat(descriptionClassName) }, item.description)),
233
215
  item.content && (react_1.default.createElement("div", { className: "feature-section__additional-content", style: { marginTop: '1rem' } }, item.content)),
234
216
  renderItemCTA(item)));
235
- // For grid layout with cards
236
- if (isGridLayout && cardBg) {
217
+ // Apply card styling if card prop is true
218
+ if (final.card) {
237
219
  var cardClasses = [
238
220
  'feature-section__card',
239
- cardHoverEffect !== 'none' ? "feature-section__card--hover-".concat(cardHoverEffect) : '',
221
+ 'card',
222
+ cardHoverEffect !== 'none' ? "card--hover-".concat(cardHoverEffect) : '',
240
223
  item.className || '',
224
+ final.cardClassName || '',
241
225
  ].filter(Boolean).join(' ');
242
- var cardStyles = __assign({ padding: getSpacingValue(cardPadding, '1.5rem'), borderRadius: cardRounded, backgroundColor: cardBg ? (0, getCssVariable_1.getCssVariableValue)(cardBg) || cardBg : undefined, boxShadow: cardShadow !== 'none' ? (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(cardShadow)) || undefined : undefined, border: cardBorder ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(cardBorderColor) || cardBorderColor) : 'none', height: '100%' }, item.style);
226
+ var cardStyles = __assign({ padding: getSpacingValue(cardPadding, '1.5rem'), borderRadius: cardRounded, boxShadow: cardShadow !== 'none' ? (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(cardShadow)) || undefined : undefined, border: cardBorder ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(cardBorderColor) || cardBorderColor) : 'none', height: '100%', maxWidth: final.itemMaxWidth || '100%' }, item.style);
243
227
  return (react_1.default.createElement("div", { key: index, className: cardClasses, style: cardStyles }, featureContent));
244
228
  }
245
- return featureContent;
229
+ // Regular item without card
230
+ return (react_1.default.createElement("div", { key: index, className: "feature-section__item-wrapper ".concat(item.className || ''), style: __assign({ maxWidth: final.itemMaxWidth || '100%' }, item.style) }, featureContent));
246
231
  };
247
- var getResponsiveGridColumns = function () {
248
- var defaultColumns = final.columns || 3;
249
- if (Object.keys(responsiveColumns).length === 0) {
250
- return "repeat(".concat(defaultColumns, ", 1fr)");
251
- }
252
- return {
253
- base: "repeat(".concat(responsiveColumns.sm || defaultColumns, ", 1fr)"),
254
- sm: "repeat(".concat(responsiveColumns.sm || defaultColumns, ", 1fr)"),
255
- md: "repeat(".concat(responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
256
- lg: "repeat(".concat(responsiveColumns.lg || responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
257
- xl: "repeat(".concat(responsiveColumns.xl || responsiveColumns.lg || responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
258
- };
259
- };
260
- var getGridStyles = function () {
261
- var gap = getSpacingValue(final.gap, '2rem');
262
- var itemGap = getSpacingValue(final.itemGap, '1rem');
263
- var baseStyle = {
264
- display: 'grid',
265
- gap: gap,
266
- alignItems: final.align || 'stretch',
267
- justifyContent: final.justify || 'start',
268
- };
269
- var columns = getResponsiveGridColumns();
270
- if (typeof columns === 'string') {
271
- return __assign(__assign({}, baseStyle), { gridTemplateColumns: columns });
272
- }
273
- return baseStyle;
274
- };
275
- var getPatternStyle = function () {
276
- if (!final.pattern || final.pattern === 'none')
277
- return {};
278
- var opacity = final.patternOpacity || 0.05;
279
- var color = final.patternColor || 'borderRgb';
280
- var size = final.patternSize || '20px';
281
- var colorValue = (0, getCssVariable_1.getCssVariableValue)(color) || 'rgba(var(--borderRgb), 0.1)';
282
- var backgroundImage = '';
283
- var backgroundSize = size;
284
- switch (final.pattern) {
285
- case 'grid':
286
- backgroundImage = "linear-gradient(to right, ".concat(colorValue, " ").concat(opacity, " 1px, transparent 1px),\n linear-gradient(to bottom, ").concat(colorValue, " ").concat(opacity, " 1px, transparent 1px)");
287
- backgroundSize = "".concat(size, " ").concat(size);
288
- break;
289
- case 'dots':
290
- backgroundImage = "radial-gradient(".concat(colorValue, " ").concat(opacity, " 1px, transparent 1px)");
291
- backgroundSize = "".concat(size, " ").concat(size);
292
- break;
293
- case 'diagonal':
294
- backgroundImage = "repeating-linear-gradient(45deg, ".concat(colorValue, " ").concat(opacity, ", ").concat(colorValue, " ").concat(opacity, " 1px, transparent 1px, transparent 20px)");
295
- backgroundSize = "".concat(size, " ").concat(size);
296
- break;
297
- }
298
- return {
299
- backgroundImage: backgroundImage,
300
- backgroundSize: backgroundSize,
301
- };
302
- };
303
- var getFadeStyle = function () {
304
- if (!final.fade)
305
- return {};
306
- var color = final.fadeColor || 'page-bg';
307
- var fadeColor = (0, getCssVariable_1.getCssVariableValue)(color) || color;
308
- if (final.fadeRadial) {
309
- return {
310
- background: "radial-gradient(ellipse at center, transparent 30%, ".concat(fadeColor, " 70%)"),
311
- };
312
- }
313
- var direction = final.fadeDirection || 'bottom';
314
- var gradients = {
315
- top: 'to top',
316
- bottom: 'to bottom',
317
- left: 'to left',
318
- right: 'to right',
319
- };
320
- return {
321
- background: "linear-gradient(".concat(gradients[direction], ", transparent 0%, ").concat(fadeColor, " 90%)"),
322
- };
323
- };
324
- var getTextAlign = function (align) {
325
- return {
326
- textAlign: align || 'center',
327
- };
328
- };
329
- var renderFeaturesContent = function () {
232
+ var renderFlexFeatures = function () {
330
233
  if (featuresArray.length === 0)
331
234
  return null;
332
- var gridStyles = getGridStyles();
333
- var isCentered = final.layout === 'centered';
334
- var maxWidth = final.maxWidth || (isCentered ? '48rem' : '100%');
335
- if (isCentered) {
235
+ var gapValue = final.gap !== undefined ? "".concat(final.gap * 0.25, "rem") : '2rem';
236
+ var flexGap = gapValue;
237
+ if (final.layout === 'centered') {
238
+ var maxWidth = final.maxWidth || '48rem';
336
239
  return (react_1.default.createElement("div", { className: "feature-section__centered-container", style: {
337
240
  maxWidth: maxWidth,
338
241
  margin: '0 auto',
339
242
  } }, featuresArray.map(function (item, index) { return renderFeatureItem(item, index); })));
340
243
  }
341
- return (react_1.default.createElement("div", { className: "feature-section__grid", style: __assign(__assign({}, gridStyles), { maxWidth: final.maxWidth || '100%', margin: '0 auto' }) }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__grid-item" }, renderFeatureItem(item, index))); })));
244
+ // Use Flex layout with proper flexbox values
245
+ return (react_1.default.createElement("div", { className: "feature-section__flex-container", style: {
246
+ display: 'flex',
247
+ flexWrap: final.wrap !== false ? 'wrap' : 'nowrap',
248
+ gap: flexGap,
249
+ alignItems: convertFlexValue(final.align) || 'stretch',
250
+ justifyContent: convertFlexValue(final.justify) || 'flex-start',
251
+ maxWidth: final.maxWidth || '100%',
252
+ margin: '0 auto',
253
+ } }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__flex-item" }, renderFeatureItem(item, index))); })));
254
+ };
255
+ var renderCarouselFeatures = function () {
256
+ if (featuresArray.length === 0)
257
+ return null;
258
+ // Prepare carousel items
259
+ var carouselItems = featuresArray.map(function (item, index) {
260
+ return renderFeatureItem(item, index);
261
+ });
262
+ return (react_1.default.createElement("div", { className: "feature-section__carousel-container ".concat(final.carouselContainerClassName || ''), style: final.carouselContainerStyle },
263
+ react_1.default.createElement(Carousel_1.default, { scrollNumber: final.scrollNumber, gap: final.gap || 1, funcss: final.carouselFuncss, showDashes: final.showDashes, allowVerticalOverflow: final.allowVerticalOverflow, itemPadding: final.itemPadding || '0.5rem', controlerSize: final.controlerSize, controlerIconSize: final.controlerIconSize, infiniteScroll: final.infiniteScroll, infiniteScrollSpeed: final.infiniteScrollSpeed, infiniteScrollDirection: final.infiniteScrollDirection }, carouselItems)));
264
+ };
265
+ var renderFeaturesContent = function () {
266
+ if (featuresArray.length === 0)
267
+ return null;
268
+ // Use carousel if isCarousel is true
269
+ if (final.isCarousel) {
270
+ return renderCarouselFeatures();
271
+ }
272
+ // Otherwise use flex layout
273
+ return renderFlexFeatures();
342
274
  };
343
275
  var getLayoutClasses = function () {
344
276
  var classes = ['feature-section'];
345
277
  if (final.layout) {
346
278
  classes.push("feature-section--".concat(final.layout));
347
279
  }
280
+ if (final.isCarousel) {
281
+ classes.push('feature-section--carousel');
282
+ }
348
283
  if (final.className) {
349
284
  classes.push(final.className);
350
285
  }
@@ -358,23 +293,27 @@ var Feature = function (localProps) {
358
293
  };
359
294
  var getContainerStyles = function () {
360
295
  var padding = getSpacingValue(final.padding, '3rem 0');
361
- return __assign(__assign({ position: 'relative', padding: padding, backgroundColor: final.bg ? (0, getCssVariable_1.getCssVariableValue)(final.bg) || final.bg : undefined, overflow: 'hidden' }, getPatternStyle()), final.style);
296
+ return __assign({ padding: padding }, final.style);
297
+ };
298
+ var getTextAlign = function (align) {
299
+ return {
300
+ textAlign: align || 'center',
301
+ };
362
302
  };
363
303
  return (react_1.default.createElement("section", { id: final.id, className: getLayoutClasses(), style: getContainerStyles() },
364
- final.fade && (react_1.default.createElement("div", { className: "feature-section__fade-overlay", style: __assign(__assign({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 0, pointerEvents: 'none' }) })),
365
- react_1.default.createElement("div", { className: "feature-section__container ".concat(final.containerClassName || ''), style: __assign({ position: 'relative', zIndex: 1, maxWidth: final.maxWidth || '1280px', margin: '0 auto', padding: '0 1rem' }, final.containerStyle) },
304
+ react_1.default.createElement("div", { className: "feature-section__container ".concat(final.containerClassName || ''), style: __assign({ maxWidth: final.maxWidth || '1280px', margin: '0 auto', padding: '0 1rem' }, final.containerStyle) },
366
305
  (final.title || final.subtitle || final.description) && (react_1.default.createElement("div", { className: "feature-section__header", style: __assign({ marginBottom: '3rem', maxWidth: final.layout === 'centered' ? '48rem' : '100%', marginLeft: 'auto', marginRight: 'auto' }, getTextAlign(final.titleAlign)) },
367
- final.subtitle && (react_1.default.createElement(Text_1.default, { variant: final.subtitleVariant, block: true, size: final.subtitleSize || 'sm', weight: final.subtitleWeight || 600, color: final.subtitleColor || 'var(--primary)', funcss: "feature-section__subtitle ".concat(final.subtitleClassName || ''), style: {
306
+ final.subtitle && (react_1.default.createElement(Text_1.default, { block: true, size: final.subtitleSize || 'sm', weight: final.subtitleWeight || 600, color: final.subtitleColor || 'var(--primary)', funcss: "feature-section__subtitle ".concat(final.subtitleClassName || ''), style: {
368
307
  textTransform: 'uppercase',
369
308
  letterSpacing: '0.05em',
370
309
  marginBottom: '0.5rem',
371
- }, text: final.subtitle })),
372
- final.title && (react_1.default.createElement(Text_1.default, { variant: final.titleVariant, block: true, size: final.titleSize || 'xl', weight: final.titleWeight || 700, color: final.titleColor || 'var(--text-color)', funcss: "feature-section__main-title ".concat(final.titleClassName || ''), style: { marginBottom: '1rem' }, text: final.title })),
373
- final.description && (react_1.default.createElement(Text_1.default, { variant: final.descriptionVariant, block: true, size: final.descriptionSize || 'sm', weight: final.descriptionWeight || 400, color: final.descriptionColor || 'var(--text-muted)', funcss: "feature-section__section-description ".concat(final.descriptionClassName || ''), text: final.description })))),
310
+ } }, final.subtitle)),
311
+ final.title && (react_1.default.createElement(Text_1.default, { block: true, size: final.titleSize || 'xl', weight: final.titleWeight || 700, color: final.titleColor || 'var(--text-color)', funcss: "feature-section__main-title ".concat(final.titleClassName || ''), style: { marginBottom: '1rem' } }, final.title)),
312
+ final.description && (react_1.default.createElement(Text_1.default, { block: true, size: final.descriptionSize || 'sm', weight: final.descriptionWeight || 400, color: final.descriptionColor || 'var(--text-muted)', funcss: "feature-section__section-description ".concat(final.descriptionClassName || '') }, final.description)))),
374
313
  react_1.default.createElement("div", { className: "feature-section__content" },
375
314
  renderFeaturesContent(),
376
315
  final.children),
377
316
  final.ctaText && (react_1.default.createElement("div", { className: "feature-section__cta-container", style: __assign({ marginTop: '2.5rem' }, getTextAlign(final.ctaAlign)) },
378
- react_1.default.createElement(Button_1.default, { variant: final.ctaVariant, onClick: final.ctaOnClick || (function () { return final.ctaUrl && (window.location.href = final.ctaUrl); }), funcss: "feature-section__cta ".concat(final.ctaClassName || '', " ").concat(final.ctaCss || ''), stringPrefix: final.ctaStringPrefix, stringSuffix: final.ctaStringSuffix, startIcon: final.ctaStartIcon, endIcon: final.ctaEndIcon, iconSize: final.ctaIconSize, isLoading: final.ctaIsLoading, status: final.ctaStatus, url: final.ctaUrl }, final.ctaText))))));
317
+ react_1.default.createElement(Button_1.default, { onClick: final.ctaOnClick || (function () { return final.ctaUrl && (window.location.href = final.ctaUrl); }), funcss: "feature-section__cta ".concat(final.ctaClassName || ''), stringPrefix: final.ctaStringPrefix, stringSuffix: final.ctaStringSuffix, startIcon: final.ctaStartIcon, endIcon: final.ctaEndIcon, iconSize: final.ctaIconSize, bg: final.ctaBg || 'primary', isLoading: final.ctaIsLoading, status: final.ctaStatus, url: final.ctaUrl }, final.ctaText))))));
379
318
  };
380
319
  exports.default = Feature;
package/ui/flex/Flex.d.ts CHANGED
@@ -5,21 +5,22 @@ interface FlexProps {
5
5
  id?: string;
6
6
  children?: React.ReactNode;
7
7
  style?: React.CSSProperties;
8
- direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
9
- wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
10
- justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
11
- alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
12
- alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
8
+ direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse' | 'col';
9
+ wrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | 'no-wrap';
10
+ justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'between' | 'around' | 'evenly';
11
+ alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'start' | 'end' | 'normal';
12
+ alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'start' | 'end' | 'between' | 'around';
13
13
  gap?: number | string;
14
- gapX?: number;
15
- gapY?: number;
16
- gapUnit?: 'rem' | 'px' | 'em';
14
+ gapX?: number | string;
15
+ gapY?: number | string;
16
+ gapUnit?: 'rem' | 'px' | 'em' | '%';
17
17
  responsiveSmall?: boolean;
18
18
  responsiveMedium?: boolean;
19
19
  responsiveLarge?: boolean;
20
20
  width?: string;
21
21
  height?: string;
22
- fit?: Boolean;
22
+ fit?: boolean;
23
+ inline?: boolean;
23
24
  }
24
- export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, fit, width, height, ...rest }: FlexProps): React.JSX.Element;
25
+ export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, fit, inline, width, height, ...rest }: FlexProps): React.JSX.Element;
25
26
  export {};
package/ui/flex/Flex.js CHANGED
@@ -37,17 +37,113 @@ function Flex(_a) {
37
37
  // Gap
38
38
  gap = _a.gap, gapX = _a.gapX, gapY = _a.gapY, _e = _a.gapUnit, gapUnit = _e === void 0 ? 'rem' : _e,
39
39
  // Responsive
40
- responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, fit = _a.fit,
40
+ responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, fit = _a.fit, inline = _a.inline,
41
41
  // Size
42
- width = _a.width, height = _a.height, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fit", "width", "height"]);
42
+ width = _a.width, height = _a.height, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fit", "inline", "width", "height"]);
43
+ // Helper function to normalize flex values
44
+ var normalizeFlexValue = function (value, type) {
45
+ if (type === void 0) { type = 'justify'; }
46
+ if (!value)
47
+ return undefined;
48
+ var mapping = {
49
+ // Justify content mapping
50
+ 'start': 'flex-start',
51
+ 'end': 'flex-end',
52
+ 'between': 'space-between',
53
+ 'around': 'space-around',
54
+ 'evenly': 'space-evenly',
55
+ // Align items/content mapping
56
+ 'normal': 'normal',
57
+ // For alignContent, 'between' and 'around' are already correct
58
+ };
59
+ // If it's a shorthand, return the mapped value
60
+ if (mapping[value]) {
61
+ return mapping[value];
62
+ }
63
+ // If it's already a valid CSS value, return it as is
64
+ return value;
65
+ };
66
+ // Normalize direction shorthand
67
+ var getDirection = function () {
68
+ if (direction === 'col')
69
+ return 'column';
70
+ return direction;
71
+ };
72
+ // Normalize wrap shorthand
73
+ var getWrap = function () {
74
+ if (wrap === 'no-wrap')
75
+ return 'nowrap';
76
+ return wrap;
77
+ };
78
+ // Helper to format gap values
79
+ var formatGapValue = function (value) {
80
+ if (value === undefined || value === null)
81
+ return undefined;
82
+ // If it's already a string with unit, return as is
83
+ if (typeof value === 'string' && (value.includes('px') || value.includes('rem') || value.includes('em') || value.includes('%'))) {
84
+ return value;
85
+ }
86
+ // Otherwise, add the specified unit
87
+ return "".concat(value).concat(gapUnit);
88
+ };
43
89
  var combinedClassName = [
44
90
  className,
45
91
  funcss,
46
- responsiveSmall && 'responsiveSmall',
47
- responsiveMedium && 'responsiveMedium',
48
- responsiveLarge && 'responsiveLarge',
92
+ responsiveSmall && 'responsive-small',
93
+ responsiveMedium && 'responsive-medium',
94
+ responsiveLarge && 'responsive-large',
95
+ inline && 'inline-flex',
49
96
  ]
50
97
  .filter(Boolean)
51
98
  .join(' ');
52
- return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap ? "".concat(gap).concat(gapUnit) : 0, columnGap: gapX ? "".concat(gapX).concat(gapUnit) : gap ? "".concat(gap).concat(gapUnit) : 0, rowGap: gapY ? "".concat(gapY).concat(gapUnit) : gap ? "".concat(gap).concat(gapUnit) : 0, width: fit ? "100%" : width ? width : 'fit-content', height: fit ? "100%" : height ? height : 'fit-content' }, style) }, rest), children));
99
+ // Build styles dynamically
100
+ var flexStyles = {
101
+ display: inline ? 'inline-flex' : 'flex',
102
+ flexDirection: getDirection(),
103
+ flexWrap: getWrap(),
104
+ };
105
+ // Only add justify if provided
106
+ if (justify) {
107
+ flexStyles.justifyContent = normalizeFlexValue(justify, 'justify');
108
+ }
109
+ // Only add alignItems if provided
110
+ if (alignItems) {
111
+ flexStyles.alignItems = normalizeFlexValue(alignItems, 'align');
112
+ }
113
+ // Only add alignContent if provided
114
+ if (alignContent) {
115
+ flexStyles.alignContent = normalizeFlexValue(alignContent, 'align');
116
+ }
117
+ // Handle gap properties
118
+ var formattedGap = formatGapValue(gap);
119
+ var formattedGapX = formatGapValue(gapX);
120
+ var formattedGapY = formatGapValue(gapY);
121
+ if (formattedGap) {
122
+ flexStyles.gap = formattedGap;
123
+ }
124
+ // Only set columnGap/rowGap if explicitly provided or if gap is set but gapX/gapY not
125
+ if (formattedGapX !== undefined) {
126
+ flexStyles.columnGap = formattedGapX;
127
+ }
128
+ else if (formattedGap) {
129
+ flexStyles.columnGap = formattedGap;
130
+ }
131
+ if (formattedGapY !== undefined) {
132
+ flexStyles.rowGap = formattedGapY;
133
+ }
134
+ else if (formattedGap) {
135
+ flexStyles.rowGap = formattedGap;
136
+ }
137
+ // Handle width and height
138
+ if (fit) {
139
+ flexStyles.width = '100%';
140
+ flexStyles.height = '100%';
141
+ }
142
+ else {
143
+ if (width)
144
+ flexStyles.width = width;
145
+ if (height)
146
+ flexStyles.height = height;
147
+ }
148
+ return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign(__assign({}, flexStyles), style) }, rest), children));
53
149
  }