funuicss 3.0.7 → 3.0.9

package/css/fun.css

@@ -2379,6 +2379,7 @@ h6, .h6 {
 
 
 
+
 .fixedBottom {
   position: fixed;
   bottom: 0;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.7",
+  "version": "3.0.9",
   "name": "funuicss",
   "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!",
   "main": "index.js",

package/ui/carousel/Carousel.js

@@ -47,6 +47,18 @@ var Carousel = function (_a) {
     var scrollRef = (0, react_1.useRef)(null);
     var _f = (0, react_1.useState)('start'), scrollPosition = _f[0], setScrollPosition = _f[1];
     var _g = (0, react_1.useState)(false), isPhone = _g[0], setIsPhone = _g[1];
+    var _h = (0, react_1.useState)(false), isScrollable = _h[0], setIsScrollable = _h[1];
+    var checkScrollable = function () {
+        var container = scrollRef.current;
+        if (container) {
+            setIsScrollable(container.scrollWidth > container.clientWidth);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        checkScrollable();
+        window.addEventListener('resize', checkScrollable); // Also listen to window resize
+        return function () { return window.removeEventListener('resize', checkScrollable); };
+    }, [children]);
     (0, react_1.useEffect)(function () {
         if ((0, Functions_1.isTouchDevice)()) {
             setIsPhone(true);
@@ -90,7 +102,7 @@ var Carousel = function (_a) {
     }, []);
     return (react_1.default.createElement("div", { className: "carousel-wrapper ".concat(funcss) },
         react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "nowrap", alignItems: "center" },
-            !isPhone && (react_1.default.createElement("div", null,
+            !isPhone && isScrollable && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('left'); } },
                     react_1.default.createElement(pi_1.PiCaretLeft, { size: 24 })))),
             react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
@@ -102,7 +114,7 @@ var Carousel = function (_a) {
                     scrollBehavior: 'smooth',
                 } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
                 react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
-            !isPhone && (react_1.default.createElement("div", null,
+            !isPhone && isScrollable && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
                     react_1.default.createElement(pi_1.PiCaretRight, { size: 24 }))))),
         showDashes && (react_1.default.createElement("div", { className: "center padding-top-10" },

package/ui/chart/Bar.js

@@ -43,15 +43,27 @@ var CustomTooltip = function (_a) {
     return null;
 };
 var Bars = function (_a) {
-    var data = _a.data, series = _a.series, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? 300 : _c, _d = _a.layout, layout = _d === void 0 ? 'horizontal' : _d, _e = _a.margin, margin = _e === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _e, _f = _a.barRadius, barRadius = _f === void 0 ? 6 : _f, _g = _a.barSize, barSize = _g === void 0 ? 30 : _g, _h = _a.barGap, barGap = _h === void 0 ? 4 : _h, _j = _a.barCategoryGap, barCategoryGap = _j === void 0 ? '10%' : _j, _k = _a.showXAxis, showXAxis = _k === void 0 ? true : _k, _l = _a.showYAxis, showYAxis = _l === void 0 ? true : _l, _m = _a.xAxisProps, xAxisProps = _m === void 0 ? {} : _m, _o = _a.yAxisProps, yAxisProps = _o === void 0 ? {} : _o, _p = _a.xInterval, xInterval = _p === void 0 ? 0 : _p, _q = _a.yInterval, yInterval = _q === void 0 ? 0 : _q, _r = _a.showGrid, showGrid = _r === void 0 ? true : _r, _s = _a.gridProps, gridProps = _s === void 0 ? {} : _s, _t = _a.showTooltip, showTooltip = _t === void 0 ? true : _t, tooltipFormatter = _a.tooltipFormatter, _u = _a.showLegend, showLegend = _u === void 0 ? true : _u, _v = _a.legendProps, legendProps = _v === void 0 ? {} : _v, _w = _a.isAnimationActive, isAnimationActive = _w === void 0 ? true : _w, funcss = _a.funcss;
-    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { className: funcss || '', width: width, height: height },
-        react_1.default.createElement(recharts_1.BarChart, { data: data, layout: layout, margin: margin, barGap: barGap, barCategoryGap: barCategoryGap },
+    var data = _a.data, series = _a.series, _b = _a.width, width = _b === void 0 ? '100%' : _b, height = _a.height, _c = _a.layout, layout = _c === void 0 ? 'horizontal' : _c, _d = _a.margin, margin = _d === void 0 ? {} : _d, _e = _a.barRadius, barRadius = _e === void 0 ? 6 : _e, _f = _a.barSize, barSize = _f === void 0 ? 30 : _f, _g = _a.barGap, barGap = _g === void 0 ? 4 : _g, _h = _a.barCategoryGap, barCategoryGap = _h === void 0 ? '10%' : _h, _j = _a.showXAxis, showXAxis = _j === void 0 ? true : _j, _k = _a.showYAxis, showYAxis = _k === void 0 ? true : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, _o = _a.xInterval, xInterval = _o === void 0 ? 0 : _o, _p = _a.yInterval, yInterval = _p === void 0 ? 0 : _p, _q = _a.showGrid, showGrid = _q === void 0 ? true : _q, _r = _a.gridProps, gridProps = _r === void 0 ? {} : _r, _s = _a.showTooltip, showTooltip = _s === void 0 ? true : _s, tooltipFormatter = _a.tooltipFormatter, _t = _a.showLegend, showLegend = _t === void 0 ? true : _t, _u = _a.legendProps, legendProps = _u === void 0 ? {} : _u, _v = _a.isAnimationActive, isAnimationActive = _v === void 0 ? true : _v, funcss = _a.funcss;
+    var isVertical = layout === 'vertical';
+    // Smart default margins
+    var defaultMargin = {
+        top: 20,
+        right: 30,
+        bottom: isVertical ? 30 : 50,
+        left: isVertical ? 100 : 40,
+    };
+    var mergedMargin = __assign(__assign({}, defaultMargin), margin);
+    // Smart height for vertical layout based on data length
+    var autoHeight = isVertical ? Math.max(300, data.length * 45) : 300;
+    var resolvedHeight = height || autoHeight;
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { className: funcss || '', width: width, height: resolvedHeight },
+        react_1.default.createElement(recharts_1.BarChart, { data: data, layout: layout, margin: mergedMargin, barGap: barGap, barCategoryGap: barCategoryGap },
             showGrid && react_1.default.createElement(recharts_1.CartesianGrid, __assign({ strokeDasharray: "3 3" }, gridProps)),
-            layout === 'horizontal' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: "category", dataKey: "label", interval: xInterval }, xAxisProps))),
-                showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: "number", interval: yInterval }, yAxisProps))))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: "category", dataKey: "label", interval: yInterval }, yAxisProps))),
-                showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: "number", interval: xInterval }, xAxisProps))))),
+            isVertical ? (react_1.default.createElement(react_1.default.Fragment, null,
+                showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: "category", dataKey: "label", interval: 0, tick: __assign({ angle: 0, fontSize: 12, textAnchor: 'start', dx: -5, dy: 4, fill: '#555' }, (yAxisProps.tick || {})), tickMargin: 10 }, yAxisProps))),
+                showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: "number", interval: xInterval, tick: { fontSize: 12 } }, xAxisProps))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: "category", dataKey: "label", interval: 0, tick: __assign({ fontSize: 12, angle: 0, fill: '#555' }, xAxisProps.tick), tickMargin: 8 }, xAxisProps))),
+                showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: "number", interval: yInterval, tick: { fontSize: 12 } }, yAxisProps))))),
             showTooltip && (react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter })),
             showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
             series.map(function (s) { return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey, dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), radius: layout === 'horizontal'

package/ui/drop/Dropdown.d.ts

@@ -4,6 +4,8 @@ type Direction = 'dropdown' | 'dropup';
 interface DropdownItem {
     label: React.ReactNode;
     onClick?: () => void;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 }
 interface DropdownProps {
     direction?: Direction;

package/ui/drop/Dropdown.js

@@ -33,8 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
 var Dropdown = function (_a) {
     var _b = _a.direction, direction = _b === void 0 ? 'dropdown' : _b, _c = _a.position, position = _c === void 0 ? 'left' : _c, button = _a.button, items = _a.items, _d = _a.hoverable, hoverable = _d === void 0 ? true : _d, _e = _a.openOnHover, openOnHover = _e === void 0 ? true : _e, _f = _a.closableOnlyOutside, closableOnlyOutside = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight;
     var containerRef = (0, react_1.useRef)(null);
@@ -70,6 +74,10 @@ var Dropdown = function (_a) {
                         if (!openOnHover)
                             setOpen(false);
                     }
-                } }, item.label)); }))));
+                } },
+                react_1.default.createElement(Flex_1.default, { wrap: 'nowrap', gap: 0.2, alignItems: 'center', justify: 'flex-start' },
+                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, (item === null || item === void 0 ? void 0 : item.startIcon) || ''),
+                    item.label,
+                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, (item === null || item === void 0 ? void 0 : item.endIcon) || '')))); }))));
 };
 exports.default = Dropdown;

package/ui/richtext/RichText.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import 'quill/dist/quill.bubble.css';
-import 'quill/dist/quill.snow.css';
 interface RichTextProps {
     value: string;
     onChange: (content: string) => void;

package/ui/richtext/RichText.js

@@ -39,8 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_quilljs_1 = require("react-quilljs");
-require("quill/dist/quill.bubble.css");
-require("quill/dist/quill.snow.css");
+// import 'quill/dist/quill.bubble.css';
+// import 'quill/dist/quill.snow.css';
 var md_1 = require("react-icons/md");
 var Emojis_1 = require("../../utils/Emojis");
 var Dropdown_1 = __importDefault(require("../drop/Dropdown"));
@@ -60,6 +60,18 @@ var RichText = function (_a) {
         placeholder: placeholder,
         modules: modules || defaultModules,
     }), quill = _f.quill, quillRef = _f.quillRef;
+    (0, react_1.useEffect)(function () {
+        var cssPath = theme === 'bubble' ?
+            '/node_modules/quill/dist/quill.bubble.css' :
+            '/node_modules/quill/dist/quill.snow.css';
+        var existingLink = document.querySelector("link[href*=\"".concat(theme, "\"]"));
+        if (!existingLink) {
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = cssPath;
+            document.head.appendChild(link);
+        }
+    }, [theme]);
     (0, react_1.useEffect)(function () {
         if (!quill)
             return;