funuicss 2.5.3 → 2.5.5

package/ui/loader/Loader.js

@@ -49,7 +49,7 @@ var React = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 function FunLoader(_a) {
     var funcss = _a.funcss, size = _a.size, fixed = _a.fixed, backdrop = _a.backdrop, color = _a.color, variant = _a.variant, rest = __rest(_a, ["funcss", "size", "fixed", "backdrop", "color", "variant"]);
-    return (React.createElement("div", __assign({ className: "".concat(fixed ? 'fixedLoader' : '', " ").concat(backdrop && fixed ? 'backdropLoader' : '') }, rest), variant === 'simple' ?
+    return (React.createElement("div", __assign({ style: { lineHeight: "0" }, className: "".concat(fixed ? 'fixedLoader' : '', " ").concat(backdrop && fixed ? 'backdropLoader' : '') }, rest), variant === 'simple' ?
         React.createElement("span", { className: "rotate ".concat(funcss ? funcss : '', "  text-").concat(color ? color : '') },
             React.createElement(pi_1.PiSpinnerDuotone, { style: { fontSize: size + "px", display: 'block' } }))
         : variant === 'duotone' ?

package/ui/loader/Loader.tsx

@@ -20,7 +20,7 @@ export default function FunLoader({
   ...rest
 }: FunLoaderProps) {
   return (
-    <div className={`${fixed ? 'fixedLoader' : ''} ${backdrop && fixed ? 'backdropLoader' : ''}`} {...rest}>
+    <div style={{lineHeight:"0"}} className={`${fixed ? 'fixedLoader' : ''} ${backdrop && fixed ? 'backdropLoader' : ''}`} {...rest}>
       
      {
         variant === 'simple'?

package/ui/progress/Bar.d.ts

@@ -4,11 +4,14 @@ interface ProgressBarProps {
     progress: number;
     height?: number;
     children?: React.ReactNode;
-    content?: React.ReactNode;
+    content?: ((progress: number) => React.ReactNode) | React.ReactNode;
     bg?: string;
-    lined?: boolean;
     raised?: boolean;
     rounded?: boolean;
+    type?: 'linear' | 'circle';
+    size?: number;
+    strokeWidth?: number;
 }
-export default function ProgressBar({ funcss, progress, height, children, content, raised, rounded, bg, lined, }: ProgressBarProps): React.JSX.Element;
+export default function ProgressBar({ funcss, progress, height, children, content, raised, rounded, bg, // default CSS class name
+type, size, strokeWidth, }: ProgressBarProps): React.JSX.Element;
 export {};

package/ui/progress/Bar.js

@@ -24,20 +24,60 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
 function ProgressBar(_a) {
-    var funcss = _a.funcss, progress = _a.progress, height = _a.height, children = _a.children, content = _a.content, raised = _a.raised, rounded = _a.rounded, bg = _a.bg, lined = _a.lined;
-    return (React.createElement(React.Fragment, null, lined ? (React.createElement("div", { className: " ".concat(funcss, " progressBar lined ").concat(bg) },
-        children,
-        " ",
-        content,
-        React.createElement("div", { className: " ".concat(funcss, " ").concat(bg, " linedProgress  ").concat(raised ? 'raised' : '', " ").concat(rounded ? 'rounded' : ''), style: { width: "".concat(progress < 101 ? progress : '', "%"), height: "".concat(height, "px") } }))) : (React.createElement("div", { className: "progressBar ".concat(raised ? 'raised' : '', " ").concat(rounded ? 'rounded' : '') },
-        React.createElement("div", { className: " ".concat(funcss, " progressInner ").concat(bg, " ").concat(rounded ? 'rounded' : ''), style: {
-                width: "".concat(progress < 101 ? progress : '', "%"),
+    var funcss = _a.funcss, progress = _a.progress, _b = _a.height, height = _b === void 0 ? 16 : _b, children = _a.children, content = _a.content, raised = _a.raised, rounded = _a.rounded, _c = _a.bg, bg = _c === void 0 ? 'primary' : _c, // default CSS class name
+    _d = _a.type, // default CSS class name
+    type = _d === void 0 ? 'linear' : _d, _e = _a.size, size = _e === void 0 ? 60 : _e, _f = _a.strokeWidth, strokeWidth = _f === void 0 ? 6 : _f;
+    var clampedProgress = Math.min(100, Math.max(0, progress));
+    var isComplete = clampedProgress >= 100;
+    var effectiveBg = isComplete ? 'success' : bg;
+    var renderContent = function () {
+        if (React.isValidElement(content))
+            return content;
+        if (typeof content === 'function')
+            return content(clampedProgress);
+        if (typeof content === 'string')
+            return content;
+        return "".concat(clampedProgress, "%");
+    };
+    if (type === 'circle') {
+        var radius = (size - strokeWidth) / 2;
+        var circumference = 2 * Math.PI * radius;
+        var offset = circumference - (clampedProgress / 100) * circumference;
+        return (React.createElement("div", { className: "relative flex justify-center items-center ".concat(funcss), style: { width: size, height: size } },
+            React.createElement("svg", { width: size, height: size, className: "rotate-[-90deg]" },
+                React.createElement("circle", { cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", stroke: "#e5e7eb" // light gray background stroke
+                 }),
+                React.createElement("circle", { cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", className: effectiveBg, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", style: { transition: 'stroke-dashoffset 0.4s ease, stroke 0.3s ease' } })),
+            React.createElement("div", { className: "absolute text-center font-bold text-sm", style: {
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: size,
+                    height: size,
+                } }, isComplete ? React.createElement(pi_1.PiCheck, { className: "text-success800", size: size / 2.2 }) : renderContent())));
+    }
+    // Linear bar
+    return (React.createElement("div", { className: "progressBar ".concat(raised ? 'raised' : '', " ").concat(rounded ? 'rounded' : '', " ").concat(funcss || '') },
+        React.createElement("div", { className: "progressInner ".concat(rounded ? 'rounded' : '', " ").concat(effectiveBg), style: {
+                width: "".concat(clampedProgress, "%"),
                 height: "".concat(height, "px"),
-                padding: "".concat(progress > 0 ? '0 1rem' : ''),
+                padding: '0 1rem',
+                transition: 'width 0.3s ease, background-color 0.3s ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                fontWeight: 'bold',
+                color: '#fff',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
             } },
-            children,
+            isComplete ? React.createElement(pi_1.PiCheck, null) : renderContent(),
             " ",
-            content)))));
+            children)));
 }
 exports.default = ProgressBar;

package/ui/progress/Bar.tsx

@@ -1,52 +1,113 @@
 import * as React from 'react';
+import { PiCheck } from 'react-icons/pi';
 
 interface ProgressBarProps {
   funcss?: string;
   progress: number;
   height?: number;
   children?: React.ReactNode;
-  content?: React.ReactNode;
-  bg?: string;
-  lined?: boolean;
-  raised?:boolean ,
-  rounded?:boolean
+  content?: ((progress: number) => React.ReactNode) | React.ReactNode;
+  bg?: string; // Now CSS class names, e.g. 'primary', 'success'
+  raised?: boolean;
+  rounded?: boolean;
+  type?: 'linear' | 'circle';
+  size?: number;
+  strokeWidth?: number;
 }
 
 export default function ProgressBar({
   funcss,
   progress,
-  height,
+  height = 16,
   children,
   content,
   raised,
   rounded,
-  bg,
-  lined,
+  bg = 'primary', // default CSS class name
+  type = 'linear',
+  size = 60,
+  strokeWidth = 6,
 }: ProgressBarProps) {
-  return (
-    <>
-      {lined ? (
-        <div className={` ${funcss} progressBar lined ${bg}`}>
-          {children} {content}
-          <div
-            className={` ${funcss} ${bg} linedProgress  ${raised ? 'raised' : ''} ${rounded ? 'rounded' : ''}`}
-            style={{ width: `${progress < 101 ? progress : ''}%`, height: `${height}px` }}
-          ></div>
-        </div>
-      ) : (
-    <div className={`progressBar ${raised ? 'raised' : ''} ${rounded ? 'rounded' : ''}`}>
-          <div
-            className={` ${funcss} progressInner ${bg} ${rounded ? 'rounded' : ''}`}
-            style={{
-              width: `${progress < 101 ? progress : ''}%`,
-              height: `${height}px`,
-              padding: `${progress > 0 ? '0 1rem' : ''}`,
-            }}
-          >
-            {children} {content}
-          </div>
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  const isComplete = clampedProgress >= 100;
+  const effectiveBg = isComplete ? 'success' : bg;
+
+  const renderContent = () => {
+    if (React.isValidElement(content)) return content;
+    if (typeof content === 'function') return content(clampedProgress);
+    if (typeof content === 'string') return content;
+    return `${clampedProgress}%`;
+  };
+
+  if (type === 'circle') {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (clampedProgress / 100) * circumference;
+
+    return (
+      <div className={`relative flex justify-center items-center ${funcss}`} style={{ width: size, height: size }}>
+        <svg width={size} height={size} className="rotate-[-90deg]">
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            stroke="#e5e7eb" // light gray background stroke
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            className={effectiveBg}
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+            style={{ transition: 'stroke-dashoffset 0.4s ease, stroke 0.3s ease' }}
+          />
+        </svg>
+        <div
+          className="absolute text-center font-bold text-sm"
+          style={{
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: size,
+            height: size,
+          }}
+        >
+          {isComplete ? <PiCheck className="text-success800" size={size / 2.2} /> : renderContent()}
         </div>
-      )}
-    </>
+      </div>
+    );
+  }
+
+  // Linear bar
+  return (
+    <div className={`progressBar ${raised ? 'raised' : ''} ${rounded ? 'rounded' : ''} ${funcss || ''}`}>
+      <div
+        className={`progressInner ${rounded ? 'rounded' : ''} ${effectiveBg}`}
+        style={{
+          width: `${clampedProgress}%`,
+          height: `${height}px`,
+          padding: '0 1rem',
+          transition: 'width 0.3s ease, background-color 0.3s ease',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          fontWeight: 'bold',
+          color: '#fff',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {isComplete ? <PiCheck /> : renderContent()} {children}
+      </div>
+    </div>
   );
 }

package/ui/theme/theme.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ThemeProviderProps {
+    theme: 'light' | 'dark';
+    children: React.ReactNode;
+}
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export default ThemeProvider;

package/ui/theme/theme.js

@@ -0,0 +1,56 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ThemeProvider = function (_a) {
+    var theme = _a.theme, children = _a.children;
+    (0, react_1.useEffect)(function () {
+        var root = document.documentElement;
+        var lightTheme = {
+            '--page-bg': '#FFFFFF',
+            '--text-color': '#000000',
+            '--raiseThemes': '#FFFFFF',
+        };
+        var darkTheme = {
+            '--page-bg': '#121212',
+            '--text-color': '#FFFFFF',
+            '--raiseThemes': '#202020',
+            '--borderColor': '#333333',
+            '--lighter': '#202020',
+        };
+        var selectedTheme = theme === 'dark' ? darkTheme : lightTheme;
+        Object.entries(selectedTheme).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            root.style.setProperty(key, value);
+        });
+    }, [theme]);
+    return (react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
+            backgroundColor: 'var(--page-bg)',
+            color: 'var(--text-color)',
+            minHeight: '100vh',
+        } }, children));
+};
+exports.default = ThemeProvider;

package/ui/theme/theme.tsx

@@ -0,0 +1,48 @@
+'use client';
+import React, { useEffect } from 'react';
+
+interface ThemeProviderProps {
+  theme: 'light' | 'dark';
+  children: React.ReactNode;
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
+  useEffect(() => {
+    const root = document.documentElement;
+
+    const lightTheme = {
+      '--page-bg': '#FFFFFF',
+      '--text-color': '#000000',
+      '--raiseThemes': '#FFFFFF',
+    };
+
+    const darkTheme = {
+      '--page-bg': '#121212',
+      '--text-color': '#FFFFFF',
+      '--raiseThemes': '#202020',
+      '--borderColor': '#333333',
+      '--lighter': '#202020',
+    };
+
+    const selectedTheme = theme === 'dark' ? darkTheme : lightTheme;
+
+    Object.entries(selectedTheme).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  }, [theme]);
+
+  return (
+    <div
+      className={`theme-${theme}`}
+      style={{
+        backgroundColor: 'var(--page-bg)',
+        color: 'var(--text-color)',
+        minHeight: '100vh',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ThemeProvider;

package/ui/tooltip/Tip.js

@@ -48,13 +48,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 function Tip(_a) {
     var tip = _a.tip, funcss = _a.funcss, children = _a.children, content = _a.content, message = _a.message, animation = _a.animation, duration = _a.duration, rest = __rest(_a, ["tip", "funcss", "children", "content", "message", "animation", "duration"]);
-    // Calculate width only if content is a string
     var text = message || content || children;
-    // Check if content is a plain string to calculate width
-    var isString = typeof text === 'string';
-    var minWidth = isString
-        ? "".concat(text.replace(/\s+/g, '').length * 8, "px")
-        : 'auto';
-    return (React.createElement("span", __assign({ className: "tip-".concat(tip, " tip ").concat(funcss ? funcss : ''), style: { animation: " ".concat(duration ? duration : 0, "s ").concat(animation ? animation : ''), minWidth: minWidth } }, rest), text));
+    return (React.createElement("span", __assign({ className: "tip-".concat(tip, " tip ").concat(funcss ? funcss : ''), style: { animation: " ".concat(duration ? duration : 0, "s ").concat(animation ? animation : '') } }, rest), text));
 }
 exports.default = Tip;

package/ui/tooltip/Tip.tsx

@@ -20,17 +20,11 @@ export default function Tip({
   duration,
   ...rest
 }: TipProps) {
-  // Calculate width only if content is a string
   const text = message || content || children;
-  // Check if content is a plain string to calculate width
-  const isString = typeof text === 'string';
-  const minWidth = isString
-    ? `${text.replace(/\s+/g, '').length * 8}px`
-    : 'auto';
   return (
     <span
       className={`tip-${tip} tip ${funcss ? funcss : ''}`}
-      style={{ animation: ` ${duration ? duration : 0}s ${animation ? animation : ''}`, minWidth: minWidth }}
+      style={{ animation: ` ${duration ? duration : 0}s ${animation ? animation : ''}`}}
       {...rest}
     >
       {text}