funuicss 3.0.2 → 3.0.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.2",
+  "version": "3.0.4",
   "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/chart/Line.d.ts

@@ -25,6 +25,9 @@ interface AreaChartProps {
     showYAxis?: boolean;
     funcss?: string;
     curveType?: 'linear' | 'monotone' | 'step' | 'basis';
+    rotateLabel: string;
+    xLabelSize: string | number;
+    yLabelSize: string | number;
     height?: number | string;
     width?: number | string;
     margin?: {

package/ui/chart/Line.js

@@ -46,7 +46,7 @@ var CustomTooltip = function (_a) {
     return null;
 };
 var Lines = function (_a) {
-    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o;
+    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize;
     var gradientId = id || 'colorUv';
     return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: width, height: height, className: funcss },
         react_1.default.createElement(recharts_1.AreaChart, { data: data, margin: margin },
@@ -56,8 +56,8 @@ var Lines = function (_a) {
                     react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
             showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
             !showGrid && horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })),
-            showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: 0, padding: { left: 10, right: 10 }, fontSize: "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
-            showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: "0.8rem" }, yAxisProps))),
+            showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: 0, padding: { left: 10, right: 10 }, fontSize: xLabelSize || "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: rotateLabel || -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
+            showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: yLabelSize || "0.8rem" }, yAxisProps))),
             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, index) { return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey, type: curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: "url(#".concat(gradientId, ")"), fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));

package/ui/chart/Pie.d.ts

@@ -10,6 +10,7 @@ interface PieChartProps {
     showLegend?: boolean;
     funcss?: string;
     width?: number | string;
+    legendCss: string;
     height?: number | string;
     outerRadius?: number;
     innerRadius?: number;

package/ui/chart/Pie.js

@@ -47,10 +47,10 @@ var CustomTooltip = function (_a) {
     return null;
 };
 var ChartPie = function (_a) {
-    var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height, _e = _a.outerRadius, outerRadius = _e === void 0 ? 100 : _e, innerRadius = _a.innerRadius, tooltipFormatter = _a.tooltipFormatter, _f = _a.legendProps, legendProps = _f === void 0 ? {} : _f;
+    var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height, _e = _a.outerRadius, outerRadius = _e === void 0 ? 100 : _e, innerRadius = _a.innerRadius, tooltipFormatter = _a.tooltipFormatter, legendCss = _a.legendCss, _f = _a.legendProps, legendProps = _f === void 0 ? {} : _f;
     var chart = (react_1.default.createElement(recharts_1.PieChart, { width: typeof width === 'number' ? width : undefined, height: typeof height === 'number' ? height : undefined },
         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)),
+        showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps, { className: legendCss || "" })),
         react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: outerRadius, innerRadius: donut ? innerRadius !== null && innerRadius !== void 0 ? innerRadius : outerRadius * 0.6 : 0, label: false, labelLine: false }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color), stroke: "#ffffff", strokeWidth: 1 })); }))));
     if (!width && !height) {
         return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));

package/ui/richtext/RichText.js

@@ -48,6 +48,7 @@ var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
 var Circle_1 = __importDefault(require("../specials/Circle"));
 var Tip_1 = __importDefault(require("../tooltip/Tip"));
+var Flex_1 = __importDefault(require("../flex/Flex"));
 var RichText = function (_a) {
     var value = _a.value, onChange = _a.onChange, _b = _a.showEmojis, showEmojis = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Write something...' : _c, afterEmoji = _a.afterEmoji, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, modules = _a.modules, _e = _a.theme, theme = _e === void 0 ? 'bubble' : _e, fontFamily = _a.fontFamily, maxValue = _a.maxValue;
     var savedRange = (0, react_1.useRef)(null);
@@ -105,30 +106,33 @@ var RichText = function (_a) {
     var renderEmojiSection = function (title, emojis) { return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "mb-2 mt-2 text-sm" }, title),
         react_1.default.createElement(RowFlex_1.default, { gap: 0.3 }, emojis.map(function (emoji, i) { return (react_1.default.createElement("span", { key: i, className: "h6 pointer", onClick: function () { return insertEmoji(emoji); } }, emoji)); })))); };
-    return (react_1.default.createElement("div", { className: funcss },
+    return (react_1.default.createElement("div", { className: "fit round-edge ".concat(funcss), style: { position: "relative", overflow: "visible" } },
         react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container p-0" },
             react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? 'bubble-editor' : 'snow-editor', style: {
                     fontFamily: fontFamily || 'inherit',
                 } })),
-        maxValue && quill && (react_1.default.createElement("div", { className: "text-xs mt-1 text-right text-gray-500" },
-            quill.getText().trim().length,
-            "/",
-            maxValue)),
-        (showEmojis || afterEmoji) && (react_1.default.createElement(RowFlex_1.default, { gap: 0.5, funcss: "mt-1" },
-            showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
-                    react_1.default.createElement(Circle_1.default, { funcss: "bg border" },
-                        react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
-                    react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
-                    {
-                        label: (react_1.default.createElement("div", { className: "w-200 h-300", style: { overflowY: 'auto' } },
-                            renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
-                            renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
-                            renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
-                            renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
-                            renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
-                            renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
-                    },
-                ] })),
-            afterEmoji))));
+        (showEmojis || maxValue) && (react_1.default.createElement("div", { className: 'p-1', style: { height: 'fit-content', top: "calc(100%)", width: "100%" } },
+            react_1.default.createElement(Flex_1.default, { justify: 'space-between', gap: 1, alignItems: 'center' },
+                (showEmojis || afterEmoji) ? (react_1.default.createElement("div", null,
+                    react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
+                        showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
+                                react_1.default.createElement(Circle_1.default, { size: 2, funcss: "bg border" },
+                                    react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
+                                react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
+                                {
+                                    label: (react_1.default.createElement("div", { className: "w-200 h-200", style: { overflowY: 'auto' } },
+                                        renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
+                                        renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
+                                        renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
+                                        renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
+                                        renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
+                                        renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
+                                },
+                            ] })),
+                        afterEmoji))) : (react_1.default.createElement("div", null)),
+                (maxValue && quill) ? (react_1.default.createElement("div", { className: "text-xs text-right" },
+                    react_1.default.createElement("span", { className: "text-primary" }, quill.getText().trim().length),
+                    " /",
+                    maxValue)) : (react_1.default.createElement("div", null)))))));
 };
 exports.default = RichText;