funuicss 2.5.14 → 2.6.1

package/ui/appbar/AppBar.d.ts

@@ -12,6 +12,9 @@ interface NavbarProps {
     sidebarTrigger?: React.ReactNode;
     transparent?: boolean;
     sideBar?: number;
+    hasSidebar?: boolean;
+    sidebarOpen?: boolean;
+    openSidebar?: () => void;
 }
-export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, left, center, right, sideBar, sidebarTrigger, transparent, }: NavbarProps): React.JSX.Element;
+export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, left, center, right, sideBar, sidebarTrigger, transparent, hasSidebar, openSidebar, sidebarOpen }: NavbarProps): React.JSX.Element;
 export {};

package/ui/appbar/AppBar.js

@@ -43,9 +43,9 @@ var react_1 = require("react");
 var navigation_1 = require("next/navigation"); // <-- Updated import
 var Hamburger_1 = __importDefault(require("./Hamburger"));
 function AppBar(_a) {
-    var fixedTop = _a.fixedTop, funcss = _a.funcss, padding = _a.padding, fixedBottom = _a.fixedBottom, justify = _a.justify, left = _a.left, center = _a.center, right = _a.right, sideBar = _a.sideBar, sidebarTrigger = _a.sidebarTrigger, transparent = _a.transparent;
-    var _b = (0, react_1.useState)(false), isMobileMenuOpen = _b[0], setIsMobileMenuOpen = _b[1];
-    var _c = (0, react_1.useState)(false), isMobileScreen = _c[0], setIsMobileScreen = _c[1];
+    var fixedTop = _a.fixedTop, funcss = _a.funcss, padding = _a.padding, fixedBottom = _a.fixedBottom, justify = _a.justify, left = _a.left, center = _a.center, right = _a.right, sideBar = _a.sideBar, sidebarTrigger = _a.sidebarTrigger, transparent = _a.transparent, hasSidebar = _a.hasSidebar, openSidebar = _a.openSidebar, _b = _a.sidebarOpen, sidebarOpen = _b === void 0 ? false : _b;
+    var _c = (0, react_1.useState)(false), isMobileMenuOpen = _c[0], setIsMobileMenuOpen = _c[1];
+    var _d = (0, react_1.useState)(false), isMobileScreen = _d[0], setIsMobileScreen = _d[1];
     var pathname = (0, navigation_1.usePathname)(); // <-- New hook to detect path changes
     var toggleMenu = function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); };
     var closeMenu = function () { return setIsMobileMenuOpen(false); };
@@ -69,7 +69,9 @@ function AppBar(_a) {
         var isOpen = _a.isOpen;
         return React.createElement(Hamburger_1.default, { isOpen: isOpen });
     };
-    return (React.createElement("nav", { className: "navigation-bar\n        ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n        ").concat(funcss || '', "\n        ").concat(fixedTop ? 'fixed_top_navbar' : '', "\n        ").concat(sideBar ? 'there_is_sidebar' : '', "\n        ").concat(transparent ? 'transparent' : '', "\n        ").concat(fixedBottom ? 'fixedBottom' : '', "\n      "), style: {
+    return (React.createElement("nav", { 
+        // the id will be used to get the height for the sidebar in the sidebar file
+        id: 'appBar', className: "navigation-bar\n        ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n        ").concat(funcss || '', "\n        ").concat(fixedTop ? 'fixed_top_navbar' : '', "\n        ").concat(sideBar ? 'there_is_sidebar' : '', "\n        ").concat(transparent ? 'transparent' : '', "\n        ").concat(fixedBottom ? 'fixedBottom' : '', "\n      "), style: {
             padding: "".concat(padding || ''),
             justifyContent: "".concat(justify || ''),
         } },
@@ -79,5 +81,7 @@ function AppBar(_a) {
                 React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
         React.createElement("div", { className: "linkWrapper" }, center),
         React.createElement("div", { className: "linkWrapper" }, right),
-        isMobileScreen && !isMobileMenuOpen && (React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen })))));
+        isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, hasSidebar ?
+            React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: openSidebar }, sidebarTrigger || React.createElement(Trigger, { isOpen: sidebarOpen }))
+            : React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))));
 }

package/ui/appbar/AppBar.tsx

@@ -17,6 +17,9 @@ interface NavbarProps {
   sidebarTrigger?: React.ReactNode;
   transparent?: boolean;
   sideBar?: number;
+  hasSidebar?: boolean;
+  sidebarOpen?: boolean;
+  openSidebar?: () => void;
 }
 
 export default function AppBar({
@@ -31,6 +34,9 @@ export default function AppBar({
   sideBar,
   sidebarTrigger,
   transparent,
+  hasSidebar,
+  openSidebar,
+  sidebarOpen = false
 }: NavbarProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isMobileScreen, setIsMobileScreen] = useState(false);
@@ -64,6 +70,8 @@ export default function AppBar({
 
   return (
     <nav
+    // the id will be used to get the height for the sidebar in the sidebar file
+    id='appBar'
       className={`navigation-bar
         ${isMobileMenuOpen ? 'navbar-mobile-open' : ''}
         ${funcss || ''}
@@ -90,9 +98,17 @@ export default function AppBar({
       <div className="linkWrapper">{right}</div>
 
       {isMobileScreen && !isMobileMenuOpen && (
-        <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
+       <>
+       {
+        hasSidebar ? 
+         <span className="sidebar-trigger pointer hover-text-primary" onClick={openSidebar}>
+          {sidebarTrigger  || <Trigger isOpen={sidebarOpen} />}
+        </span>
+        :  <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
           {sidebarTrigger || <Trigger isOpen={isMobileMenuOpen} />}
         </span>
+       }
+       </>
       )}
     </nav>
   );

package/ui/chart/Bar.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+type DataItem = {
+    label: string;
+    [key: string]: any;
+};
+type ChartSeries = {
+    dataKey: string;
+    label?: string;
+    color?: string;
+};
+interface BarsProps {
+    data: DataItem[];
+    series: ChartSeries[];
+    showGrid?: boolean;
+    funcss?: string;
+    showLegend?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    barRadius?: number;
+    barSize?: number;
+}
+declare const Bars: React.FC<BarsProps>;
+export default Bars;

package/ui/chart/Bar.js

@@ -0,0 +1,56 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var recharts_1 = require("recharts");
+// Resolve 'primary' to actual CSS variable value like var(--primary)
+var resolveColor = function (color) {
+    if (!color)
+        return getCssVar('--primary') || '#8884d8';
+    if (color.startsWith('#'))
+        return color;
+    return getCssVar("--".concat(color)) || color;
+};
+// Helper to get CSS variable value from :root
+var getCssVar = function (varName) {
+    if (typeof window === 'undefined')
+        return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+};
+var Bars = function (_a) {
+    var data = _a.data, series = _a.series, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? true : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? false : _e, _f = _a.barRadius, barRadius = _f === void 0 ? 6 : _f, funcss = _a.funcss, _g = _a.barSize, barSize = _g === void 0 ? 30 : _g, rest = __rest(_a, ["data", "series", "showGrid", "showLegend", "showXAxis", "showYAxis", "barRadius", "funcss", "barSize"]);
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, __assign({ className: funcss || "" }, rest, { width: "100%" }),
+        react_1.default.createElement(recharts_1.BarChart, { data: data },
+            showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
+            showXAxis && react_1.default.createElement(recharts_1.XAxis, { dataKey: "label" }),
+            showYAxis && react_1.default.createElement(recharts_1.YAxis, null),
+            react_1.default.createElement(recharts_1.Tooltip, null),
+            showLegend && react_1.default.createElement(recharts_1.Legend, null),
+            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: [barRadius, barRadius, 0, 0], barSize: barSize })); }))));
+};
+exports.default = Bars;

package/ui/chart/Bar.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  CartesianGrid,
+  ResponsiveContainer,
+} from 'recharts';
+
+type DataItem = {
+  label: string;
+  [key: string]: any;
+};
+
+type ChartSeries = {
+  dataKey: string;
+  label?: string;
+  color?: string; // Can be a CSS variable name like 'primary' or a hex code
+};
+
+interface BarsProps {
+  data: DataItem[];
+  series: ChartSeries[];
+  showGrid?: boolean;
+  funcss?: string,
+  showLegend?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  barRadius?: number;
+  barSize?: number;
+}
+
+// Resolve 'primary' to actual CSS variable value like var(--primary)
+const resolveColor = (color?: string): string => {
+  if (!color) return getCssVar('--primary') || '#8884d8';
+  if (color.startsWith('#')) return color;
+  return getCssVar(`--${color}`) || color;
+};
+
+// Helper to get CSS variable value from :root
+const getCssVar = (varName: string): string => {
+  if (typeof window === 'undefined') return '';
+  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+};
+
+const Bars: React.FC<BarsProps> = ({
+  data,
+  series,
+  showGrid = true,
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = false,
+  barRadius = 6,
+  funcss,
+  barSize = 30,
+  ...rest
+}) => {
+  return (
+    <ResponsiveContainer className={funcss || ``} {...rest} width="100%" >
+      <BarChart data={data}>
+        {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+        {showXAxis && <XAxis dataKey="label" />}
+        {showYAxis && <YAxis />}
+        <Tooltip />
+        {showLegend && <Legend />}
+        {series.map((s) => (
+          <Bar
+            key={s.dataKey}
+            dataKey={s.dataKey}
+            name={s.label || s.dataKey}
+            fill={resolveColor(s.color)}
+            radius={[barRadius, barRadius, 0, 0]}
+            barSize={barSize}
+          />
+        ))}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default Bars;

package/ui/chart/Line.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+type DataItem = {
+    label: string;
+    [key: string]: any;
+};
+type ChartSeries = {
+    dataKey: string;
+    label?: string;
+    color?: string;
+    strokeWidth?: number;
+    dot?: boolean;
+    fromColor?: string;
+    toColor?: string;
+};
+interface AreaChartProps {
+    data: DataItem[];
+    series: ChartSeries[];
+    fromColor?: string;
+    toColor?: string;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    funcss?: string;
+    curveType?: 'linear' | 'monotone' | 'step' | 'basis';
+}
+declare const Lines: React.FC<AreaChartProps>;
+export default Lines;

package/ui/chart/Line.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var recharts_1 = require("recharts");
+var getCssVar = function (varName) {
+    var _a;
+    if (typeof window === 'undefined')
+        return '';
+    return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+};
+var resolveStrokeColor = function (color) {
+    if (!color)
+        return getCssVar('primary') || '#8884d8';
+    if (color.startsWith('#'))
+        return color;
+    return getCssVar(color) || color;
+};
+var Lines = function (_a) {
+    var data = _a.data, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? true : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? false : _e, funcss = _a.funcss, _f = _a.curveType, curveType = _f === void 0 ? 'monotone' : _f;
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", className: funcss },
+        react_1.default.createElement(recharts_1.AreaChart, { data: data },
+            react_1.default.createElement("defs", null,
+                react_1.default.createElement("linearGradient", { id: "colorUv", x1: "0", y1: "0", x2: "0", y2: "1" },
+                    react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(fromColor || 'primary'), stopOpacity: 0.8 }),
+                    react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
+            showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
+            showXAxis && react_1.default.createElement(recharts_1.XAxis, { dataKey: "label", angle: 45 }),
+            showYAxis && react_1.default.createElement(recharts_1.YAxis, null),
+            react_1.default.createElement(recharts_1.Tooltip, null),
+            showLegend && react_1.default.createElement(recharts_1.Legend, null),
+            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(#colorUv)", fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
+};
+exports.default = Lines;

package/ui/chart/Line.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  CartesianGrid,
+  ResponsiveContainer,
+} from 'recharts';
+
+type DataItem = {
+  label: string;
+  [key: string]: any;
+};
+
+type ChartSeries = {
+  dataKey: string;
+  label?: string;
+  color?: string;
+  strokeWidth?: number;
+  dot?: boolean;
+  fromColor?: string;
+  toColor?: string;
+};
+
+interface AreaChartProps {
+  data: DataItem[];
+  series: ChartSeries[];
+  fromColor?: string;
+  toColor?: string;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  funcss?: string;
+  curveType?: 'linear' | 'monotone' | 'step' | 'basis';
+}
+
+const getCssVar = (varName: string): string => {
+  if (typeof window === 'undefined') return '';
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${varName}`)?.trim() || '';
+};
+ 
+
+
+
+const resolveStrokeColor = (color?: string): string => {
+  if (!color) return getCssVar('primary') || '#8884d8';
+  if (color.startsWith('#')) return color;
+  return getCssVar(color) || color;
+};
+
+const Lines: React.FC<AreaChartProps> = ({
+  data,
+  series,
+  fromColor,
+  toColor,
+  showGrid = true,
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = false,
+  funcss,
+  curveType = 'monotone',
+}) => {
+  return (
+    <ResponsiveContainer width="100%"  className={funcss}>
+      <AreaChart data={data}>
+
+
+ <defs>
+    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="5%" stopColor={getCssVar(fromColor || 'primary')} stopOpacity={0.8}/>
+      <stop offset="95%" stopColor={getCssVar(toColor || 'primary200')} stopOpacity={0}/>
+    </linearGradient>
+  </defs>
+
+        {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+        {showXAxis && <XAxis dataKey="label" angle={45} />}
+        {showYAxis && <YAxis />}
+        <Tooltip />
+        {showLegend && <Legend />}
+        {series.map((s, index) => (
+          <Area
+            key={s.dataKey}
+            type={curveType}
+            dataKey={s.dataKey}
+            name={s.label || s.dataKey}
+            stroke={resolveStrokeColor(s.color)}
+            fill="url(#colorUv)"
+            fillOpacity={1}
+            strokeWidth={s.strokeWidth || 2}
+            dot={s.dot !== false ? { r: 4 } : false}
+            activeDot={{ r: 8 }}
+          />
+        ))}
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default Lines;

package/ui/chart/Pie.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type PieDataItem = {
+    label: string;
+    value: number;
+    color?: string;
+};
+interface PieChartProps {
+    data: PieDataItem[];
+    donut?: boolean;
+    showLegend?: boolean;
+    funcss?: string;
+    width?: number | string;
+    height?: number | string;
+}
+declare const ChartPie: React.FC<PieChartProps>;
+export default ChartPie;

package/ui/chart/Pie.js

@@ -0,0 +1,39 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var recharts_1 = require("recharts");
+var getCssVar = function (varName) {
+    var _a;
+    if (typeof window === 'undefined')
+        return '';
+    return (((_a = getComputedStyle(document.documentElement)
+        .getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '');
+};
+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;
+    var resolveColor = function (input, fallback) {
+        if (fallback === void 0) { fallback = '#8884d8'; }
+        if (!input)
+            return getCssVar('primary') || fallback;
+        if (input.startsWith('#'))
+            return input;
+        return getCssVar(input) || input;
+    };
+    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, null),
+        showLegend && react_1.default.createElement(recharts_1.Legend, null),
+        react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: 100, innerRadius: donut ? 60 : 0, label: true }, 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 no width or height is set, use ResponsiveContainer
+    if (!width && !height) {
+        return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));
+    }
+    return (react_1.default.createElement("div", { className: funcss, style: {
+            width: typeof width === 'number' ? "".concat(width, "px") : width || '100%',
+            height: typeof height === 'number' ? "".concat(height, "px") : height || '300px',
+        } }, chart));
+};
+exports.default = ChartPie;

package/ui/chart/Pie.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React from 'react';
+import {
+  PieChart as RePieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+
+type PieDataItem = {
+  label: string;
+  value: number;
+  color?: string;
+};
+
+interface PieChartProps {
+  data: PieDataItem[];
+  donut?: boolean;
+  showLegend?: boolean;
+  funcss?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+const getCssVar = (varName: string): string => {
+  if (typeof window === 'undefined') return '';
+  return (
+    getComputedStyle(document.documentElement)
+      .getPropertyValue(`--${varName}`)
+      ?.trim() || ''
+  );
+};
+
+const ChartPie: React.FC<PieChartProps> = ({
+  data,
+  donut = false,
+  showLegend = true,
+  funcss = '',
+  width,
+  height,
+}) => {
+  const resolveColor = (input?: string, fallback = '#8884d8') => {
+    if (!input) return getCssVar('primary') || fallback;
+    if (input.startsWith('#')) return input;
+    return getCssVar(input) || input;
+  };
+
+  const chart = (
+    <RePieChart width={typeof width === 'number' ? width : undefined} height={typeof height === 'number' ? height : undefined}>
+      <Tooltip />
+      {showLegend && <Legend />}
+      <Pie
+        data={data}
+        dataKey="value"
+        nameKey="label"
+        cx="50%"
+        cy="50%"
+        outerRadius={100}
+        innerRadius={donut ? 60 : 0}
+        label
+      >
+        {data.map((entry, index) => (
+          <Cell
+            key={`cell-${index}`}
+            fill={resolveColor(entry.color)}
+            stroke="#ffffff"
+            strokeWidth={1}
+          />
+        ))}
+      </Pie>
+    </RePieChart>
+  );
+
+  // If no width or height is set, use ResponsiveContainer
+  if (!width && !height) {
+    return (
+      <ResponsiveContainer width="100%" height={300} className={funcss}>
+        {chart}
+      </ResponsiveContainer>
+    );
+  }
+
+  return (
+    <div
+      className={funcss}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width || '100%',
+        height: typeof height === 'number' ? `${height}px` : height || '300px',
+      }}
+    >
+      {chart}
+    </div>
+  );
+};
+
+export default ChartPie;

package/ui/input/Input.js

@@ -123,7 +123,8 @@ var Input = function (_a) {
                     }, value: value }, rest))));
         return (react_1.default.createElement("div", { className: "_upload_container" },
             react_1.default.createElement("label", { htmlFor: id || "fileInput", className: "_upload_label" },
-                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null, "\u21EA")),
+                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(pi_1.PiCloudArrowUp, null))),
                 react_1.default.createElement("div", { className: "_upload_text", style: {
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',

package/ui/input/Input.tsx

@@ -306,7 +306,7 @@ const Input: React.FC<InputProps> = ({
     return (
           <div className="_upload_container">
           <label htmlFor={id || "fileInput"} className="_upload_label">
-            <div className="_upload_icon">{ icon || <>&#8682;</>}</div> 
+            <div className="_upload_icon">{ icon || <><PiCloudArrowUp /></>}</div> 
             <div className="_upload_text"    style={{
             whiteSpace: 'nowrap',
             overflow: 'hidden',

package/ui/sidebar/SideBar.d.ts

@@ -1,15 +1,24 @@
-import { ReactNode } from 'react';
-import * as React from 'react';
-interface FunLoaderProps {
+import React, { ReactNode } from 'react';
+interface SideBarLink {
+    uri: string;
+    icon: React.ReactNode;
+    text: string;
+    section: string;
+}
+interface SideBarProps {
     funcss?: string;
-    position?: "left" | "right";
-    glassy?: boolean;
+    position?: 'left' | 'right';
     open?: boolean;
     header?: ReactNode;
     content?: ReactNode;
-    close?: ReactNode;
     footer?: ReactNode;
-    fixed?: boolean;
+    top?: number;
+    sidebarWidth?: number;
+    sidebarCss?: string;
+    bodyCss?: string;
+    links?: SideBarLink[];
+    children?: ReactNode;
+    onClose?: () => void;
 }
-export default function SideBar({ funcss, position, glassy, header, open, content, close, footer, fixed, ...rest }: FunLoaderProps): React.JSX.Element;
+export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, sidebarCss, bodyCss, links, children, onClose, }: SideBarProps): React.JSX.Element;
 export {};