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/notification/Notification.js CHANGED
@@ -217,7 +217,11 @@ var NotificationContent = function (_a) {
217
217
  var NotificationFooter = function (_a) {
218
218
  var globalProps = _a.globalProps, onClose = _a.onClose;
219
219
  var ctaText = globalProps.ctaText, ctaUrl = globalProps.ctaUrl, ctaVariant = globalProps.ctaVariant, ctaOnClick = globalProps.ctaOnClick, ctaClassName = globalProps.ctaClassName, ctaCss = globalProps.ctaCss, _b = globalProps.ctaAlign, ctaAlign = _b === void 0 ? 'right' : _b;
220
- var handleCTAClick = function () {
220
+ var handleCTAClick = function (url) {
221
+ if (url) {
222
+ window.open(url, '_blank');
223
+ return;
224
+ }
221
225
  if (ctaOnClick) {
222
226
  ctaOnClick();
223
227
  }
@@ -233,7 +237,7 @@ var NotificationFooter = function (_a) {
233
237
  justifyContent: ctaAlign === 'left' ? 'flex-start' : ctaAlign === 'center' ? 'center' : 'flex-end',
234
238
  gap: getSpacingValue('0.75rem'), // Using getSpacingValue for consistency
235
239
  } },
236
- ctaText && (react_1.default.createElement(Button_1.default, { url: ctaUrl, onClick: handleCTAClick, funcss: "".concat(ctaClassName || '', " ").concat(ctaCss || ''), text: ctaText })),
240
+ ctaText && (react_1.default.createElement(Button_1.default, { url: ctaUrl, onClick: function () { return handleCTAClick(ctaUrl); }, funcss: "".concat(ctaClassName || '', " ").concat(ctaCss || ''), text: ctaText })),
237
241
  onClose && (react_1.default.createElement(Button_1.default, { onClick: onClose, funcss: "notification__close-btn", text: "Dismiss", style: {
238
242
  color: 'var(--text-muted)',
239
243
  opacity: 0.7,
package/ui/products/ProductDetail.js CHANGED
@@ -57,8 +57,6 @@ var Text_1 = __importDefault(require("../text/Text"));
57
57
  var Flex_1 = __importDefault(require("../flex/Flex"));
58
58
  var Button_1 = __importDefault(require("../button/Button"));
59
59
  var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
60
- var Input_1 = __importDefault(require("../input/Input"));
61
- var Circle_1 = __importDefault(require("../specials/Circle"));
62
60
  var Carousel_1 = __importDefault(require("../carousel/Carousel"));
63
61
  var Select_1 = __importDefault(require("../select/Select"));
64
62
  var io5_1 = require("react-icons/io5");
@@ -68,8 +66,8 @@ var ProductDetail = function (_a) {
68
66
  var _c = (0, react_1.useState)(0), selectedImageIndex = _c[0], setSelectedImageIndex = _c[1];
69
67
  var _d = (0, react_1.useState)(''), selectedColor = _d[0], setSelectedColor = _d[1];
70
68
  var _e = (0, react_1.useState)(''), selectedSize = _e[0], setSelectedSize = _e[1];
71
- var _f = (0, react_1.useState)(1), quantity = _f[0], setQuantity = _f[1];
72
- var _g = (0, react_1.useState)(false), showFullDescription = _g[0], setShowFullDescription = _g[1];
69
+ var _f = (0, react_1.useState)(false), showFullDescription = _f[0], setShowFullDescription = _f[1];
70
+ var _g = (0, react_1.useState)(false), canAddToCart = _g[0], setCanAddToCart = _g[1];
73
71
  var hasDiscount = product.comparePrice && product.comparePrice > product.price;
74
72
  var discountPercent = hasDiscount
75
73
  ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
@@ -83,13 +81,28 @@ var ProductDetail = function (_a) {
83
81
  return "".concat(productCurrency).concat(price.toFixed(2));
84
82
  };
85
83
  var handleAddToCart = function () {
86
- onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, quantity, {
84
+ // Always add with quantity 1
85
+ onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(product, 1, {
87
86
  color: selectedColor,
88
87
  size: selectedSize,
89
88
  });
90
89
  setOpen(false);
91
90
  };
92
- var totalPrice = ((product.price || 0) * quantity).toFixed(2);
91
+ // Validate if all required selections are made
92
+ (0, react_1.useEffect)(function () {
93
+ var isValid = true;
94
+ // Check if color selection is required and selected
95
+ if (product.colors && product.colors.length > 0) {
96
+ isValid = isValid && selectedColor !== '';
97
+ }
98
+ // Check if size selection is required and selected
99
+ if (product.sizes && product.sizes.length > 0) {
100
+ isValid = isValid && selectedSize !== '';
101
+ }
102
+ // Also check stock availability
103
+ isValid = isValid && stockAvailable;
104
+ setCanAddToCart(isValid);
105
+ }, [selectedColor, selectedSize, stockAvailable, product.colors, product.sizes]);
93
106
  // Function to safely process description
94
107
  var processDescription = function (description) {
95
108
  if (!description)
@@ -177,9 +190,11 @@ var ProductDetail = function (_a) {
177
190
  react_1.default.createElement(Text_1.default, { size: 'xs', opacity: 4 },
178
191
  product.stock,
179
192
  " units available"))),
180
- ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1 },
193
+ ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1, direction: "column" },
181
194
  product.colors && product.colors.length > 0 && (react_1.default.createElement("div", { className: "col" },
182
- react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" }, "Color"),
195
+ react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" },
196
+ "Color",
197
+ react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-left-1" }, "*")),
183
198
  react_1.default.createElement(Select_1.default, { fullWidth: true, options: __spreadArray([
184
199
  { text: 'Select Color', value: '' }
185
200
  ], product.colors.map(function (color) { return ({
@@ -192,12 +207,16 @@ var ProductDetail = function (_a) {
192
207
  backgroundColor: color.code,
193
208
  border: selectedColor === color.name ? '2px solid var(--primary)' : '1px solid var(--border)'
194
209
  } }))
195
- }); }), true), value: selectedColor, onChange: function (e) { return setSelectedColor(e); }, bordered: true }))),
210
+ }); }), true), value: selectedColor, onChange: function (e) { return setSelectedColor(e); }, bordered: true }),
211
+ selectedColor === '' && (react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-top-1" }, "Please select a color")))),
196
212
  product.sizes && product.sizes.length > 0 && (react_1.default.createElement("div", { className: "col" },
197
- react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" }, "Size"),
213
+ react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" },
214
+ "Size",
215
+ react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-left-1" }, "*")),
198
216
  react_1.default.createElement(Select_1.default, { fullWidth: true, options: __spreadArray([
199
217
  { text: 'Select Size', value: '' }
200
- ], product.sizes.map(function (size) { return ({ text: size, value: size }); }), true), value: selectedSize, onChange: function (e) { return setSelectedSize(e); }, bordered: true }))))),
218
+ ], product.sizes.map(function (size) { return ({ text: size, value: size }); }), true), value: selectedSize, onChange: function (e) { return setSelectedSize(e); }, bordered: true }),
219
+ selectedSize === '' && (react_1.default.createElement(Text_1.default, { size: "xs", color: "error", funcss: "margin-top-1" }, "Please select a size")))))),
201
220
  processedDescription && (react_1.default.createElement(Div_1.default, null,
202
221
  react_1.default.createElement(Text_1.default, { text: "Description", size: "lg", weight: 600, funcss: "margin-bottom-1" }),
203
222
  react_1.default.createElement("div", { className: "article text-sm ".concat(hasHTML ? '' : 'whitespace-pre-wrap'), dangerouslySetInnerHTML: { __html: displayDescription } }),
@@ -264,17 +283,6 @@ var ProductDetail = function (_a) {
264
283
  react_1.default.createElement(Div_1.default, null,
265
284
  react_1.default.createElement(Text_1.default, { text: "Tags", size: "xs", opacity: 4, block: true }),
266
285
  react_1.default.createElement(Text_1.default, { text: product.tags.join(', '), size: "sm", block: true, lineHeight: '1', truncate: 1 }))))))))), footer: react_1.default.createElement(RowFlex_1.default, { gap: 1, justify: 'flex-end', funcss: 'pt' },
267
- react_1.default.createElement(RowFlex_1.default, { gap: 0.5, alignItems: "center" },
268
- react_1.default.createElement(Circle_1.default, { body: react_1.default.createElement(pi_1.PiMinus, null), onClick: function () { return setQuantity(Math.max(1, quantity - 1)); }, funcss: quantity <= 1 ? "disabled" : "" }),
269
- react_1.default.createElement("div", { className: "w-90" },
270
- react_1.default.createElement(Input_1.default, { type: "number", value: quantity, onChange: function (e) {
271
- var value = parseInt(e.target.value);
272
- if (!isNaN(value)) {
273
- setQuantity(Math.max(1, value));
274
- }
275
- }, funcss: "text-center", bordered: true })),
276
- react_1.default.createElement(Circle_1.default, { onClick: function () { return setQuantity(quantity + 1); }, bg: 'lighter' },
277
- react_1.default.createElement(pi_1.PiPlus, null))),
278
- react_1.default.createElement(Button_1.default, { text: "Add to Cart - ".concat(currency).concat(totalPrice), bg: "primary", raised: true, onClick: handleAddToCart, disabled: !stockAvailable })) }));
286
+ react_1.default.createElement(Button_1.default, { text: "Add to Cart", startIcon: react_1.default.createElement(pi_1.PiBag, null), bg: "primary", raised: true, onClick: handleAddToCart, disabled: !canAddToCart, funcss: !canAddToCart ? "opacity-6" : "" })) }));
279
287
  };
280
288
  exports.default = ProductDetail;
package/ui/products/Store.js CHANGED
@@ -750,16 +750,16 @@ var Store = function (localProps) {
750
750
  maxWidth: "1500px"
751
751
  } },
752
752
  react_1.default.createElement(Flex_1.default, { width: '100%', justify: 'center', gap: 2 },
753
- showFilters && !isMobile && (react_1.default.createElement(View_1.default, { funcss: "w-250" },
754
- react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: 'bb', alignItems: "center" },
753
+ showFilters && !isMobile && (react_1.default.createElement(View_1.default, { funcss: "w-200" },
754
+ react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: 'bb mb', alignItems: "center" },
755
755
  react_1.default.createElement(Text_1.default, { text: "Filters", size: "h5" }),
756
- react_1.default.createElement(Button_1.default, { text: "Clear", onClick: clearFilters, small: true, bg: "transparent", color: "text-light" })),
757
- react_1.default.createElement(Accordion_1.default, { items: filterAccordionItems, allowMultiple: true, titleClass: "text-sm", contentClass: "text-sm" }))),
756
+ react_1.default.createElement(Button_1.default, { text: "Clear", onClick: clearFilters, small: true, bg: "lighter", startIcon: react_1.default.createElement(pi_1.PiX, null) })),
757
+ react_1.default.createElement(Accordion_1.default, { border: false, funcss: 'bg borderless', items: filterAccordionItems, allowMultiple: true, titleClass: "text-sm", contentClass: "text-sm" }))),
758
758
  react_1.default.createElement("div", { className: 'col fit' },
759
759
  showFilters && isMobile && (react_1.default.createElement(Div_1.default, { funcss: "mobile-filters-button mb-4" },
760
760
  react_1.default.createElement(Button_1.default, { startIcon: react_1.default.createElement(pi_1.PiFunnel, null), text: "Filters", onClick: function () { return setShowMobileFilters(true); }, bg: "light", color: "text", raised: true, funcss: "w-full" }))),
761
761
  react_1.default.createElement(Flex_1.default, { gap: 1, width: '100%', funcss: 'mb-4', justify: 'space-between' },
762
- showSearch && (react_1.default.createElement("div", { className: "w-300" },
762
+ showSearch && (react_1.default.createElement("div", { className: "w-400" },
763
763
  react_1.default.createElement(Input_1.default, { label: "Search products...", value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, startIcon: react_1.default.createElement(pi_1.PiMagnifyingGlass, null), borderless: true }))),
764
764
  showCart && (react_1.default.createElement("button", { onClick: function () { return setIsCartOpen(true); }, className: "cart-icon relative", type: "button", "aria-label": "Shopping cart (".concat(totalItems, " items)"), disabled: showLoading },
765
765
  react_1.default.createElement(sl_1.SlHandbag, { size: 30 }),
package/ui/sidebar/SideBar.js CHANGED
@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  exports.default = SideBar;
41
41
  var react_1 = __importStar(require("react"));
42
- var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
43
42
  var Text_1 = __importDefault(require("../text/Text"));
44
43
  var navigation_1 = require("next/navigation");
45
44
  var theme_1 = require("../theme/theme");
@@ -142,7 +141,7 @@ function SideBar(_a) {
142
141
  _b[position] = 0,
143
142
  _b.padding = '1rem',
144
143
  _b) },
145
- react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: "pl-2 pr-2" }, header && react_1.default.createElement("div", null, header)),
144
+ header && react_1.default.createElement("div", null, header),
146
145
  react_1.default.createElement("section", { className: "sidebar-body mt-3" },
147
146
  links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {
148
147
  var section = _a[0], sectionLinks = _a[1];
package/ui/specials/CircleGroup.d.ts CHANGED
@@ -4,6 +4,7 @@ interface AvatarGroupProps {
4
4
  size?: number;
5
5
  overlap?: number;
6
6
  maxVisible?: number;
7
+ funcss?: string;
7
8
  }
8
- export default function CircleGroup({ avatars, size, overlap, maxVisible, }: AvatarGroupProps): React.JSX.Element;
9
+ export default function CircleGroup({ avatars, size, overlap, maxVisible, funcss, }: AvatarGroupProps): React.JSX.Element;
9
10
  export {};
package/ui/specials/CircleGroup.js CHANGED
@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.default = CircleGroup;
8
8
  var react_1 = __importDefault(require("react"));
9
9
  function CircleGroup(_a) {
10
- var avatars = _a.avatars, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.overlap, overlap = _c === void 0 ? 0.8 : _c, _d = _a.maxVisible, maxVisible = _d === void 0 ? avatars.length : _d;
10
+ var avatars = _a.avatars, _b = _a.size, size = _b === void 0 ? 2 : _b, _c = _a.overlap, overlap = _c === void 0 ? 0.8 : _c, _d = _a.maxVisible, maxVisible = _d === void 0 ? avatars.length : _d, _e = _a.funcss, funcss = _e === void 0 ? '' : _e;
11
11
  var displayed = avatars.slice(0, maxVisible);
12
12
  var extra = avatars.length - maxVisible;
13
- return (react_1.default.createElement("div", { className: "flex", style: { direction: 'ltr' } },
13
+ return (react_1.default.createElement("div", { className: "flex ".concat(funcss), style: { direction: 'ltr' } },
14
14
  displayed.map(function (avatar, i) { return (react_1.default.createElement("div", { key: i, style: {
15
15
  marginLeft: i === 0 ? '0' : "-".concat(overlap, "rem"),
16
16
  zIndex: avatars.length - i,
17
17
  } }, react_1.default.cloneElement(avatar, { size: size }))); }),
18
- extra > 0 && (react_1.default.createElement("div", { className: "avatar lighter text-small flex ", style: {
18
+ extra > 0 && (react_1.default.createElement("div", { className: "avatar lighter flex ", style: {
19
19
  width: "".concat(size, "rem"),
20
20
  height: "".concat(size, "rem"),
21
21
  marginLeft: "-".concat(overlap, "rem"),