funuicss 3.8.14 → 3.8.16

package/ui/accordion/Accordion.js

@@ -44,6 +44,42 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -55,10 +91,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var getCssVariable_1 = require("../../utils/getCssVariable");
-var componentUtils_1 = require("../../utils/componentUtils");
-var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 var pi_1 = require("react-icons/pi");
+// Mock utilities - replace with your actual imports
+var getCssVariableValue = function (varName) {
+    if (typeof window === 'undefined')
+        return '';
+    return getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName)).trim();
+};
+var useComponentConfiguration = function (componentName, variant) {
+    return {
+        mergeWithLocal: function (localProps) { return ({ props: localProps }); }
+    };
+};
+var getDynamicIcon = function (iconString) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        // Mock implementation - replace with your actual icon loader
+        return [2 /*return*/, null];
+    });
+}); };
 // Custom hook for dynamic icons
 var useDynamicIcon = function (iconString) {
     var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
@@ -69,7 +119,7 @@ var useDynamicIcon = function (iconString) {
             setHasValidIcon(false);
             return;
         }
-        (0, getDynamicIcon_1.getDynamicIcon)(iconString).then(function (node) {
+        getDynamicIcon(iconString).then(function (node) {
             if (node) {
                 setIconNode(node);
                 setHasValidIcon(true);
@@ -89,10 +139,8 @@ var AccordionIcon = function (_a) {
     var colorToUse = isExpandIcon ? expandIconColor : iconColor;
     var sizeToUse = isExpandIcon ? expandIconSize : iconSize;
     var classNameToUse = isExpandIcon ? expandIconClassName : iconClassName;
-    // Handle string icons (dynamic)
     var isStringIcon = iconToUse && typeof iconToUse === 'string';
     var _j = useDynamicIcon(isStringIcon ? iconToUse : undefined), dynamicIconNode = _j.iconNode, hasValidDynamicIcon = _j.hasValidIcon;
-    // Get color class from color name
     var getColorClass = function (color) {
         if (!color)
             return '';
@@ -117,15 +165,12 @@ var AccordionIcon = function (_a) {
         }
         return react_1.default.cloneElement(iconElement, props);
     };
-    // If it's a React element icon
     if (iconToUse && typeof iconToUse !== 'string' && react_1.default.isValidElement(iconToUse)) {
         return renderIconWithProps(iconToUse, "".concat(isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon', " ").concat(classNameToUse, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), sizeToUse);
     }
-    // If it's a string icon (dynamic)
     if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
         return renderIconWithProps(dynamicIconNode, "".concat(isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon', " ").concat(classNameToUse, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), sizeToUse);
     }
-    // Default expand icon (PiCaretDown)
     if (isExpandIcon && !iconToUse) {
         return (react_1.default.createElement(pi_1.PiCaretDown, { className: "accordion-expand-icon ".concat(expandIconClassName || '', " ").concat(colorClass, " ").concat(isOpen && rotate ? 'accordion-rotated' : '').trim(), style: {
                 fontSize: expandIconSize,
@@ -137,10 +182,8 @@ var AccordionIcon = function (_a) {
 // Accordion Item Component
 var AccordionItem = function (_a) {
     var item = _a.item, index = _a.index, isOpen = _a.isOpen, onToggle = _a.onToggle, globalProps = _a.globalProps, _b = _a.animationDuration, animationDuration = _b === void 0 ? 300 : _b, _c = _a.animationEasing, animationEasing = _c === void 0 ? 'ease' : _c;
-    // Merge item props with global props (item props take precedence)
     var mergedProps = __assign(__assign({}, globalProps), item);
     var itemClass = mergedProps.itemClass, titleClass = mergedProps.titleClass, iconClass = mergedProps.iconClass, contentClass = mergedProps.contentClass, activeClass = mergedProps.activeClass, icon = mergedProps.icon, iconColor = mergedProps.iconColor, iconSize = mergedProps.iconSize, iconClassName = mergedProps.iconClassName, _d = mergedProps.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, expandIcon = mergedProps.expandIcon, expandIconColor = mergedProps.expandIconColor, expandIconSize = mergedProps.expandIconSize, expandIconClassName = mergedProps.expandIconClassName, _e = mergedProps.expandIconRotate, expandIconRotate = _e === void 0 ? true : _e, titleSize = mergedProps.titleSize, titleWeight = mergedProps.titleWeight, titleColor = mergedProps.titleColor, contentSize = mergedProps.contentSize, contentWeight = mergedProps.contentWeight, contentColor = mergedProps.contentColor, disabled = mergedProps.disabled, customRender = mergedProps.customRender;
-    // Get background class from color name
     var getBgClass = function (color) {
         if (!color)
             return '';
@@ -153,7 +196,6 @@ var AccordionItem = function (_a) {
         }
         return '';
     };
-    // Get border class from color name
     var getBorderClass = function (color) {
         if (!color)
             return '';
@@ -164,13 +206,11 @@ var AccordionItem = function (_a) {
         if (colorNames.includes(color)) {
             return "border-".concat(color);
         }
-        // Special handling for borderColor
         if (color === 'borderColor') {
             return 'border-default';
         }
         return '';
     };
-    // Get text size class
     var getTextSizeClass = function (size) {
         if (!size)
             return 'text-sm';
@@ -183,7 +223,6 @@ var AccordionItem = function (_a) {
         }
         return 'text-sm';
     };
-    // Get text color class
     var getTextColorClass = function (color) {
         if (!color)
             return 'text-default';
@@ -210,17 +249,14 @@ var AccordionItem = function (_a) {
     var titleContent = typeof item.title === 'string' ? (react_1.default.createElement("div", { className: "\n        ".concat(getTextSizeClass(titleSize), " \n        ").concat(getTextColorClass(titleColor), "\n        ").concat(titleClass || '', "\n      ").trim(), style: {
             fontWeight: titleWeight || 400,
         } }, item.title)) : item.title;
-    // Get container classes
     var getContainerClasses = function () {
         var classes = ['accordion-item'];
-        // Background
         if (globalProps.bg) {
             var bgClass = getBgClass(globalProps.bg);
             if (bgClass) {
                 classes.push(bgClass);
             }
         }
-        // Border
         if (globalProps.border) {
             classes.push('border');
             var borderClass = getBorderClass(globalProps.borderColor);
@@ -228,7 +264,6 @@ var AccordionItem = function (_a) {
                 classes.push(borderClass);
             }
         }
-        // Border radius
         if (globalProps.borderRadius) {
             var radius = getSpacingValue(globalProps.borderRadius);
             if (radius === '0.25rem')
@@ -240,18 +275,15 @@ var AccordionItem = function (_a) {
             else if (radius === '1rem')
                 classes.push('rounded-xl');
         }
-        // Shadow
         if (globalProps.shadow && globalProps.shadow !== 'none') {
             classes.push("shadow-".concat(globalProps.shadow));
         }
-        // State classes
         if (isOpen) {
             classes.push(activeClass || 'active');
         }
         if (disabled) {
             classes.push('disabled');
         }
-        // Custom classes
         if (itemClass) {
             classes.push(itemClass);
         }
@@ -259,7 +291,7 @@ var AccordionItem = function (_a) {
     };
     return (react_1.default.createElement("div", { className: getContainerClasses(), style: {
             marginBottom: getSpacingValue(globalProps.gap) || '0.5rem',
-            overflow: 'visible', // Add overflow hidden to prevent content overflow
+            overflow: 'visible',
         } },
         react_1.default.createElement("div", { className: "accordion-header ".concat(titleClass || ''), onClick: !disabled ? function () { return onToggle(index); } : undefined, role: "button", tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, onKeyDown: function (e) {
                 if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
@@ -288,7 +320,7 @@ var AccordionItem = function (_a) {
                 transition: "max-height ".concat(animationDuration, "ms ").concat(animationEasing),
                 padding: isOpen ? getSpacingValue(globalProps.padding) || '0.5rem 0' : '0',
                 backgroundColor: globalProps.contentBg ? getBgClass(globalProps.contentBg) : '',
-                borderTop: isOpen && globalProps.border ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(globalProps.borderColor) || 'var(--borderColor)') : 'none',
+                borderTop: isOpen && globalProps.border ? "1px solid ".concat(getCssVariableValue(globalProps.borderColor) || 'var(--borderColor)') : 'none',
             } },
             react_1.default.createElement("div", { className: "\n            accordion-inner\n            ".concat(getTextSizeClass(contentSize), "\n            ").concat(getTextColorClass(contentColor), "\n          ").trim(), style: {
                     opacity: isOpen ? 1 : 0,
@@ -299,12 +331,10 @@ var AccordionItem = function (_a) {
 };
 // Main Accordion Component
 var Accordion = function (localProps) {
-    // Merge props with configuration
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Accordion', localProps.variant).mergeWithLocal;
+    var mergeWithLocal = useComponentConfiguration('Accordion', localProps.variant).mergeWithLocal;
     var mergedProps = mergeWithLocal(localProps).props;
     var final = mergedProps;
-    var _a = (0, react_1.useState)([]), openIndexes = _a[0], setOpenIndexes = _a[1];
-    var _b = (0, react_1.useState)([]), itemsArray = _b[0], setItemsArray = _b[1];
+    var _a = (0, react_1.useState)([]), itemsArray = _a[0], setItemsArray = _a[1];
     // Parse items from JSON string if needed
     (0, react_1.useEffect)(function () {
         if (typeof final.items === 'string') {
@@ -324,35 +354,38 @@ var Accordion = function (localProps) {
             setItemsArray([]);
         }
     }, [final.items]);
-    // Initialize open indexes
-    (0, react_1.useEffect)(function () {
+    // Initialize open indexes using useMemo to compute initial value
+    var initialOpenIndexes = react_1.default.useMemo(function () {
         if (final.allowMultiple) {
-            setOpenIndexes(final.defaultOpenIndexes || []);
+            return final.defaultOpenIndexes || [];
         }
         else {
-            setOpenIndexes(final.defaultOpenIndexes && final.defaultOpenIndexes.length > 0
+            return final.defaultOpenIndexes && final.defaultOpenIndexes.length > 0
                 ? [final.defaultOpenIndexes[0]]
-                : []);
+                : [];
         }
-    }, [final.defaultOpenIndexes, final.allowMultiple]);
+    }, [final.allowMultiple, final.defaultOpenIndexes]);
+    var _b = (0, react_1.useState)(initialOpenIndexes), openIndexes = _b[0], setOpenIndexes = _b[1];
     var toggleIndex = function (index) {
-        var newOpenIndexes = [];
-        if (final.allowMultiple) {
-            if (openIndexes.includes(index)) {
-                newOpenIndexes = openIndexes.filter(function (i) { return i !== index; });
+        setOpenIndexes(function (prevOpenIndexes) {
+            var newOpenIndexes = [];
+            if (final.allowMultiple) {
+                if (prevOpenIndexes.includes(index)) {
+                    newOpenIndexes = prevOpenIndexes.filter(function (i) { return i !== index; });
+                }
+                else {
+                    newOpenIndexes = __spreadArray(__spreadArray([], prevOpenIndexes, true), [index], false);
+                }
             }
             else {
-                newOpenIndexes = __spreadArray(__spreadArray([], openIndexes, true), [index], false);
+                newOpenIndexes = prevOpenIndexes.includes(index) ? [] : [index];
             }
-        }
-        else {
-            newOpenIndexes = openIndexes.includes(index) ? [] : [index];
-        }
-        setOpenIndexes(newOpenIndexes);
-        // Call callback if provided
-        if (final.onItemToggle) {
-            final.onItemToggle(index, !openIndexes.includes(index));
-        }
+            // Call callback if provided
+            if (final.onItemToggle) {
+                final.onItemToggle(index, !prevOpenIndexes.includes(index));
+            }
+            return newOpenIndexes;
+        });
     };
     var getContainerClasses = function () {
         var classes = ['accordion'];
@@ -364,6 +397,14 @@ var Accordion = function (localProps) {
         }
         return classes.filter(Boolean).join(' ');
     };
+    var getSpacingValue = function (value) {
+        if (!value)
+            return '';
+        if (/^\d+$/.test(value)) {
+            return "".concat(parseInt(value) * 0.25, "rem");
+        }
+        return value;
+    };
     var getContainerStyles = function () {
         var styles = {};
         if (final.margin) {
@@ -377,14 +418,6 @@ var Accordion = function (localProps) {
         }
         return styles;
     };
-    var getSpacingValue = function (value) {
-        if (!value)
-            return '';
-        if (/^\d+$/.test(value)) {
-            return "".concat(parseInt(value) * 0.25, "rem");
-        }
-        return value;
-    };
     if (itemsArray.length === 0) {
         return null;
     }
@@ -392,6 +425,572 @@ var Accordion = function (localProps) {
 };
 exports.default = Accordion;
 // 'use client';
+// import React, { useState, useEffect } from 'react';
+// import { getCssVariableValue } from '../../utils/getCssVariable';
+// import { useComponentConfiguration } from '../../utils/componentUtils';
+// import RowFlex from '../specials/RowFlex';
+// import { getDynamicIcon } from '../../utils/getDynamicIcon';
+// import { PiCaretDown } from 'react-icons/pi';
+// // Define types for dynamic icons
+// type AccordionItemType = {
+//   // Core content
+//   title: string | React.ReactNode;
+//   content: React.ReactNode;
+//   icon?: string | React.ReactNode;
+//   // Customization per item
+//   itemClass?: string;
+//   titleClass?: string;
+//   iconClass?: string;
+//   contentClass?: string;
+//   activeClass?: string;
+//   // Icon customization per item
+//   iconColor?: string;
+//   iconSize?: number;
+//   iconClassName?: string;
+//   expandIcon?: string | React.ReactNode;
+//   expandIconColor?: string;
+//   expandIconSize?: number;
+//   expandIconClassName?: string;
+//   // Title styling per item
+//   titleSize?: string;
+//   titleWeight?: number;
+//   titleColor?: string;
+//   // Content styling per item
+//   contentSize?: string;
+//   contentWeight?: number;
+//   contentColor?: string;
+//   // Animation
+//   animationDuration?: number;
+//   animationEasing?: string;
+//   // Advanced
+//   disabled?: boolean;
+//   customRender?: (isOpen: boolean) => React.ReactNode;
+// };
+// type AccordionProps = {
+//   // Core props
+//   items: AccordionItemType[] | string; // Support JSON string
+//   allowMultiple?: boolean;
+//   defaultOpenIndexes?: number[];
+//   variant?: string;
+//   // Icons
+//   icon?: string | React.ReactNode;
+//   iconColor?: string;
+//   iconSize?: number;
+//   iconClassName?: string;
+//   iconPosition?: 'left' | 'right' | 'none';
+//   expandIcon?: string | React.ReactNode;
+//   expandIconColor?: string;
+//   expandIconSize?: number;
+//   expandIconClassName?: string;
+//   expandIconRotate?: boolean;
+//   // Styling
+//   itemClass?: string;
+//   titleClass?: string;
+//   iconClass?: string;
+//   contentClass?: string;
+//   activeClass?: string;
+//   // Title styling
+//   titleSize?: string;
+//   titleWeight?: number;
+//   titleColor?: string;
+//   titleClassName?: string;
+//   // Content styling
+//   contentSize?: string;
+//   contentWeight?: number;
+//   contentColor?: string;
+//   contentClassName?: string;
+//   // Layout
+//   gap?: string;
+//   padding?: string;
+//   margin?: string;
+//   border?: boolean;
+//   borderColor?: string;
+//   borderRadius?: string;
+//   shadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+//   // Animation
+//   animationDuration?: number;
+//   animationEasing?: string;
+//   // Advanced
+//   className?: string;
+//   funcss?: string;
+//   style?: React.CSSProperties;
+//   // Callbacks
+//   onItemToggle?: (index: number, isOpen: boolean) => void;
+//   onAllClose?: () => void;
+//   onAllOpen?: () => void;
+// };
+// // Custom hook for dynamic icons
+// const useDynamicIcon = (iconString?: string) => {
+//   const [iconNode, setIconNode] = useState<React.ReactNode>(null);
+//   const [hasValidIcon, setHasValidIcon] = useState(false);
+//   useEffect(() => {
+//     if (!iconString || typeof iconString !== 'string' || iconString.trim() === '') {
+//       setIconNode(null);
+//       setHasValidIcon(false);
+//       return;
+//     }
+//     getDynamicIcon(iconString).then((node) => {
+//       if (node) {
+//         setIconNode(node);
+//         setHasValidIcon(true);
+//       } else {
+//         setIconNode(null);
+//         setHasValidIcon(false);
+//       }
+//     });
+//   }, [iconString]);
+//   return { iconNode, hasValidIcon };
+// };
+// // Icon component with dynamic icon support
+// const AccordionIcon: React.FC<{
+//   icon?: string | React.ReactNode;
+//   iconColor?: string;
+//   iconSize?: number;
+//   iconClassName?: string;
+//   isExpandIcon?: boolean;
+//   expandIcon?: string | React.ReactNode;
+//   expandIconColor?: string;
+//   expandIconSize?: number;
+//   expandIconClassName?: string;
+//   isOpen?: boolean;
+//   rotate?: boolean;
+// }> = ({ 
+//   icon,
+//   iconColor,
+//   iconSize = 15,
+//   iconClassName = '',
+//   isExpandIcon = false,
+//   expandIcon,
+//   expandIconColor,
+//   expandIconSize = 15,
+//   expandIconClassName = '',
+//   isOpen = false,
+//   rotate = true
+// }) => {
+//   const iconToUse = isExpandIcon ? expandIcon : icon;
+//   const colorToUse = isExpandIcon ? expandIconColor : iconColor;
+//   const sizeToUse = isExpandIcon ? expandIconSize : iconSize;
+//   const classNameToUse = isExpandIcon ? expandIconClassName : iconClassName;
+//   // Handle string icons (dynamic)
+//   const isStringIcon = iconToUse && typeof iconToUse === 'string';
+//   const { iconNode: dynamicIconNode, hasValidIcon: hasValidDynamicIcon } = useDynamicIcon(
+//     isStringIcon ? iconToUse as string : undefined
+//   );
+//   // Get color class from color name
+//   const getColorClass = (color?: string): string => {
+//     if (!color) return '';
+//     if (color.startsWith('text-') || color.startsWith('bg-') || color.startsWith('border-')) {
+//       return color;
+//     }
+//     const colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+//     if (colorNames.includes(color)) {
+//       return `text-${color}`;
+//     }
+//     return '';
+//   };
+//   const colorClass = getColorClass(colorToUse);
+//   const renderIconWithProps = (iconElement: React.ReactNode, className: string, size?: number) => {
+//     if (!React.isValidElement(iconElement)) return iconElement;
+//     const props: any = {
+//       className: `${className} ${colorClass}`.trim(),
+//     };
+//     if (size !== undefined) {
+//       props.size = size;
+//     }
+//     return React.cloneElement(iconElement, props);
+//   };
+//   // If it's a React element icon
+//   if (iconToUse && typeof iconToUse !== 'string' && React.isValidElement(iconToUse)) {
+//     return renderIconWithProps(
+//       iconToUse,
+//       `${isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon'} ${classNameToUse} ${isOpen && rotate ? 'accordion-rotated' : ''}`.trim(),
+//       sizeToUse
+//     );
+//   }
+//   // If it's a string icon (dynamic)
+//   if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
+//     return renderIconWithProps(
+//       dynamicIconNode,
+//       `${isExpandIcon ? 'accordion-expand-icon' : 'accordion-icon'} ${classNameToUse} ${isOpen && rotate ? 'accordion-rotated' : ''}`.trim(),
+//       sizeToUse
+//     );
+//   }
+//   // Default expand icon (PiCaretDown)
+//   if (isExpandIcon && !iconToUse) {
+//     return (
+//       <PiCaretDown
+//         className={`accordion-expand-icon ${expandIconClassName || ''} ${colorClass} ${isOpen && rotate ? 'accordion-rotated' : ''}`.trim()}
+//         style={{
+//           fontSize: expandIconSize,
+//           transition: 'transform 0.3s ease',
+//         }}
+//       />
+//     );
+//   }
+//   return null;
+// };
+// // Accordion Item Component
+// const AccordionItem: React.FC<{
+//   item: AccordionItemType;
+//   index: number;
+//   isOpen: boolean;
+//   onToggle: (index: number) => void;
+//   globalProps: any;
+//   animationDuration?: number;
+//   animationEasing?: string;
+// }> = ({ item, index, isOpen, onToggle, globalProps, animationDuration = 300, animationEasing = 'ease' }) => {
+//   // Merge item props with global props (item props take precedence)
+//   const mergedProps = {
+//     ...globalProps,
+//     ...item
+//   };
+//   const {
+//     itemClass,
+//     titleClass,
+//     iconClass,
+//     contentClass,
+//     activeClass,
+//     icon,
+//     iconColor,
+//     iconSize,
+//     iconClassName,
+//     iconPosition = 'left',
+//     expandIcon,
+//     expandIconColor,
+//     expandIconSize,
+//     expandIconClassName,
+//     expandIconRotate = true,
+//     titleSize,
+//     titleWeight,
+//     titleColor,
+//     contentSize,
+//     contentWeight,
+//     contentColor,
+//     disabled,
+//     customRender
+//   } = mergedProps;
+//   // Get background class from color name
+//   const getBgClass = (color?: string): string => {
+//     if (!color) return '';
+//     if (color.startsWith('bg-')) {
+//       return color;
+//     }
+//     const colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+//     if (colorNames.includes(color)) {
+//       return `bg-${color}`;
+//     }
+//     return '';
+//   };
+//   // Get border class from color name
+//   const getBorderClass = (color?: string): string => {
+//     if (!color) return '';
+//     if (color.startsWith('border-')) {
+//       return color;
+//     }
+//     const colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+//     if (colorNames.includes(color)) {
+//       return `border-${color}`;
+//     }
+//     // Special handling for borderColor
+//     if (color === 'borderColor') {
+//       return 'border-default';
+//     }
+//     return '';
+//   };
+//   // Get text size class
+//   const getTextSizeClass = (size?: string): string => {
+//     if (!size) return 'text-sm';
+//     if (size.startsWith('text-')) {
+//       return size;
+//     }
+//     const validSizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];
+//     if (validSizes.includes(size)) {
+//       return `text-${size}`;
+//     }
+//     return 'text-sm';
+//   };
+//   // Get text color class
+//   const getTextColorClass = (color?: string): string => {
+//     if (!color) return 'text-default';
+//     if (color.startsWith('text-')) {
+//       return color;
+//     }
+//     const colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light', 'default', 'muted'];
+//     if (colorNames.includes(color)) {
+//       return `text-${color}`;
+//     }
+//     return 'text-default';
+//   };
+//   const getSpacingValue = (value?: string): string => {
+//     if (!value) return '';
+//     if (/^\d+$/.test(value)) {
+//       return `${parseInt(value) * 0.25}rem`;
+//     }
+//     return value;
+//   };
+//   if (customRender) {
+//     return customRender(isOpen);
+//   }
+//   const titleContent = typeof item.title === 'string' ? (
+//     <div 
+//       className={`
+//         ${getTextSizeClass(titleSize)} 
+//         ${getTextColorClass(titleColor)}
+//         ${titleClass || ''}
+//       `.trim()}
+//       style={{
+//         fontWeight: titleWeight || 400,
+//       }}
+//     >
+//       {item.title}
+//     </div>
+//   ) : item.title;
+//   // Get container classes
+//   const getContainerClasses = (): string => {
+//     const classes = ['accordion-item'];
+//     // Background
+//     if (globalProps.bg) {
+//       const bgClass = getBgClass(globalProps.bg);
+//       if (bgClass) {
+//         classes.push(bgClass);
+//       }
+//     }
+//     // Border
+//     if (globalProps.border) {
+//       classes.push('border');
+//       const borderClass = getBorderClass(globalProps.borderColor);
+//       if (borderClass) {
+//         classes.push(borderClass);
+//       }
+//     }
+//     // Border radius
+//     if (globalProps.borderRadius) {
+//       const radius = getSpacingValue(globalProps.borderRadius);
+//       if (radius === '0.25rem') classes.push('rounded-sm');
+//       else if (radius === '0.5rem') classes.push('rounded-md');
+//       else if (radius === '0.75rem') classes.push('rounded-lg');
+//       else if (radius === '1rem') classes.push('rounded-xl');
+//     }
+//     // Shadow
+//     if (globalProps.shadow && globalProps.shadow !== 'none') {
+//       classes.push(`shadow-${globalProps.shadow}`);
+//     }
+//     // State classes
+//     if (isOpen) {
+//       classes.push(activeClass || 'active');
+//     }
+//     if (disabled) {
+//       classes.push('disabled');
+//     }
+//     // Custom classes
+//     if (itemClass) {
+//       classes.push(itemClass);
+//     }
+//     return classes.filter(Boolean).join(' ');
+//   };
+//   return (
+//     <div 
+//       className={getContainerClasses()}
+//       style={{
+//         marginBottom: getSpacingValue(globalProps.gap) || '0.5rem',
+//         overflow: 'visible', // Add overflow hidden to prevent content overflow
+//       }}
+//     >
+//       <div
+//         className={`accordion-header ${titleClass || ''}`}
+//         onClick={!disabled ? () => onToggle(index) : undefined}
+//         role="button"
+//         tabIndex={disabled ? -1 : 0}
+//         aria-expanded={isOpen}
+//         onKeyDown={(e) => {
+//           if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+//             e.preventDefault();
+//             onToggle(index);
+//           }
+//         }}
+//         style={{
+//           cursor: disabled ? 'not-allowed' : 'pointer',
+//           opacity: disabled ? 0.6 : 1,
+//           padding: getSpacingValue(globalProps.padding) || '0',
+//           display: 'flex',
+//           alignItems: 'center',
+//           justifyContent: 'space-between',
+//         }}
+//       >
+//         <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1 }}>
+//           {iconPosition === 'left' && (
+//             <AccordionIcon
+//               icon={icon}
+//               iconColor={iconColor}
+//               iconSize={iconSize}
+//               iconClassName={iconClass || iconClassName}
+//               isOpen={isOpen}
+//             />
+//           )}
+//           <div className="col" style={{ flex: 1 }}>
+//             {titleContent}
+//           </div>
+//           {iconPosition === 'right' && (
+//             <AccordionIcon
+//               icon={icon}
+//               iconColor={iconColor}
+//               iconSize={iconSize}
+//               iconClassName={iconClass || iconClassName}
+//               isOpen={isOpen}
+//             />
+//           )}
+//         </div>
+//         <div style={{ lineHeight: 0 }}>
+//           <AccordionIcon
+//             isExpandIcon
+//             expandIcon={expandIcon}
+//             expandIconColor={expandIconColor}
+//             expandIconSize={expandIconSize}
+//             expandIconClassName={expandIconClassName}
+//             isOpen={isOpen}
+//             rotate={expandIconRotate}
+//           />
+//         </div>
+//       </div>
+//       <div
+//         className={`accordion-content ${contentClass || ''} ${isOpen ? 'open' : ''}`}
+//         style={{
+//           maxHeight: isOpen ? '10000px' : '0',
+//           overflow: 'visible',
+//           opacity: isOpen ? 1 : 0,
+//           visibility: isOpen ? 'visible' : 'hidden',
+//           transition: `max-height ${animationDuration}ms ${animationEasing}`,
+//           padding: isOpen ? getSpacingValue(globalProps.padding) || '0.5rem 0' : '0',
+//           backgroundColor: globalProps.contentBg ? getBgClass(globalProps.contentBg) : '',
+//           borderTop: isOpen && globalProps.border ? `1px solid ${getCssVariableValue(globalProps.borderColor) || 'var(--borderColor)'}` : 'none',
+//         }}
+//       >
+//         <div 
+//           className={`
+//             accordion-inner
+//             ${getTextSizeClass(contentSize)}
+//             ${getTextColorClass(contentColor)}
+//           `.trim()}
+//           style={{
+//             opacity: isOpen ? 1 : 0,
+//             transition: `opacity ${animationDuration}ms ${animationEasing}`,
+//             fontWeight: contentWeight || 400,
+//             lineHeight: 1.6,
+//           }}
+//         >
+//           {item.content}
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+// // Main Accordion Component
+// const Accordion: React.FC<AccordionProps> = (localProps) => {
+//   // Merge props with configuration
+//   const { mergeWithLocal } = useComponentConfiguration('Accordion', localProps.variant);
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const final = mergedProps;
+//   const [openIndexes, setOpenIndexes] = useState<number[]>([]);
+//   const [itemsArray, setItemsArray] = useState<AccordionItemType[]>([]);
+//   // Parse items from JSON string if needed
+//   useEffect(() => {
+//     if (typeof final.items === 'string') {
+//       try {
+//         const parsed = JSON.parse(final.items);
+//         setItemsArray(Array.isArray(parsed) ? parsed : [parsed]);
+//       } catch (error) {
+//         console.error('Error parsing items JSON:', error);
+//         setItemsArray([]);
+//       }
+//     } else if (Array.isArray(final.items)) {
+//       setItemsArray(final.items);
+//     } else {
+//       setItemsArray([]);
+//     }
+//   }, [final.items]);
+//   // Initialize open indexes
+//   useEffect(() => {
+//     if (final.allowMultiple) {
+//       setOpenIndexes(final.defaultOpenIndexes || []);
+//     } else {
+//       setOpenIndexes(final.defaultOpenIndexes && final.defaultOpenIndexes.length > 0 
+//         ? [final.defaultOpenIndexes[0]] 
+//         : []);
+//     }
+//   }, [final.defaultOpenIndexes, final.allowMultiple]);
+//   const toggleIndex = (index: number) => {
+//     let newOpenIndexes: number[] = [];
+//     if (final.allowMultiple) {
+//       if (openIndexes.includes(index)) {
+//         newOpenIndexes = openIndexes.filter((i) => i !== index);
+//       } else {
+//         newOpenIndexes = [...openIndexes, index];
+//       }
+//     } else {
+//       newOpenIndexes = openIndexes.includes(index) ? [] : [index];
+//     }
+//     setOpenIndexes(newOpenIndexes);
+//     // Call callback if provided
+//     if (final.onItemToggle) {
+//       final.onItemToggle(index, !openIndexes.includes(index));
+//     }
+//   };
+//   const getContainerClasses = (): string => {
+//     const classes = ['accordion'];
+//     if (final.className) {
+//       classes.push(final.className);
+//     }
+//     if (final.funcss) {
+//       classes.push(final.funcss);
+//     }
+//     return classes.filter(Boolean).join(' ');
+//   };
+//   const getContainerStyles = (): React.CSSProperties => {
+//     const styles: React.CSSProperties = {};
+//     if (final.margin) {
+//       const marginValue = getSpacingValue(final.margin);
+//       if (marginValue) {
+//         styles.margin = marginValue;
+//       }
+//     }
+//     if (final.style) {
+//       Object.assign(styles, final.style);
+//     }
+//     return styles;
+//   };
+//   const getSpacingValue = (value?: string): string => {
+//     if (!value) return '';
+//     if (/^\d+$/.test(value)) {
+//       return `${parseInt(value) * 0.25}rem`;
+//     }
+//     return value;
+//   };
+//   if (itemsArray.length === 0) {
+//     return null;
+//   }
+//   return (
+//     <div 
+//       className={getContainerClasses()}
+//       style={getContainerStyles()}
+//     >
+//       {itemsArray.map((item, index) => (
+//         <AccordionItem
+//           key={index}
+//           item={item}
+//           index={index}
+//           isOpen={openIndexes.includes(index)}
+//           onToggle={toggleIndex}
+//           globalProps={final}
+//           animationDuration={final.animationDuration}
+//           animationEasing={final.animationEasing}
+//         />
+//       ))}
+//     </div>
+//   );
+// };
+// export default Accordion;
+// export type { AccordionItemType, AccordionProps };
+// 'use client';
 // import React, { useState } from 'react';
 // import { PiCaretDown } from 'react-icons/pi';
 // import RowFlex from '../specials/RowFlex';