pixel-react 1.20.20 → 1.20.22

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.js

@@ -1 +1,207 @@
-import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import{useState as l}from"react";import"./MultiRadialChart.scss.js";import r from"../../Typography/Typography.js";const n=(e,t,a,l,r)=>{const n=e+a*Math.cos(l),i=t+a*Math.sin(l),o=e+a*Math.cos(r),s=t+a*Math.sin(r);return`M ${n} ${i} A ${a} ${a} 0 ${r-l>Math.PI?1:0} 1 ${o} ${s}`},i=({radius:i,lineWidth:o,lineCap:s,barValues:c,labelHeading:d,legendType:u="numberLegend",isLegendDetails:f=!0,isPillValueVisible:p=!0,chartToLegendGap:h="16px",legendGap:m="8px",labelFontSize:b=12,subLabelFontSize:g=8,gapBetweenArch:y=10,capsuleStyle:v={padding:"4px"}})=>{const[x,M]=l({visible:!1,x:0,y:0,content:"",isArc:!1}),[$,N]=l(null),L=(e,t)=>Array.isArray(e.arcColor)?`url(#gradient-${t})`:e.arcColor,k=e=>Array.isArray(e.arcColor)?e.arcColor[0]:e.arcColor,z=c.map(e=>{if("string"==typeof e.value){const t=(e=>{if("string"!=typeof e)return e;{const t=e.trim().match(/^([\d.]+)\s*([a-zA-Z%]*)$/);if(!t)return 0;const a=parseFloat(t[1]??"0"),l=t[2]?.toUpperCase()||"";if(isNaN(a))return 0;switch(l){case"TB":return 1024*a*1024;case"GB":return 1024*a;case"MB":default:return a;case"KB":return a/1024}}})(e.value),a=isNaN(t)?0:t;return{...e,normalizedValue:a,labelValue:Number.isInteger(a)?a:a.toFixed(2)}}return{...e,normalizedValue:e.value,labelValue:Number.isInteger(e.value)?e.value:e.value?.toFixed(2)}}),C=z.reduce((e,t)=>e+t.normalizedValue,0),V=i,S=o+y,A=2*(V+S*(z.length-1)+o),I=[...z].reverse(),B=d.trim().split(" "),P=(e,t,a)=>{const{clientX:l,clientY:r}=e;M({visible:!0,x:l,y:r,content:t,isArc:a})},w=e=>{const{clientX:t,clientY:a}=e;M(e=>({...e,x:t,y:a}))},E=()=>{M({visible:!1,x:0,y:0,content:"",isArc:!1})};return e("div",{className:"ff-multi-radial-chart-container "+("numberLegend"===u?"ff-multi-radial-chart-number":"ff-multi-radial-chart-pill"),style:{gap:h},children:[t("div",{className:"relative",style:{width:A,height:A},children:e("svg",{width:A,height:A,viewBox:`0 0 ${A} ${A}`,className:"absolute top-0 left-0",children:[t("defs",{children:c.map((e,a)=>Array.isArray(e.arcColor)?t("linearGradient",{id:`gradient-${a}`,x1:"0%",y1:"0%",x2:"100%",y2:"0%",gradientTransform:"rotate(90)",children:e.arcColor.map((a,l)=>t("stop",{offset:l/(e.arcColor.length-1)*100+"%",stopColor:a},l))},`gradient-${a}`):null)}),e("g",{transform:`translate(${A/2+1}, ${A/2+1})`,children:[I.map((a,l)=>{const r=z.length-1-l,i=2*(a.normalizedValue/C)*Math.PI;let c=-Math.PI/2,d=c+i;a.normalizedValue===C&&(c=0,d=2*Math.PI);const u=V+S*r,f=n(0,0,u,0,2*Math.PI),p={opacity:null!==$?a.barLabel===$?1:.2:1,transition:"opacity 0.3s ease"};if(0===a.normalizedValue){const l=u*Math.cos(-Math.PI/2),n=u*Math.sin(-Math.PI/2);return e("g",{children:[t("path",{d:f,fill:"none",stroke:a.arcBackgroundColor,strokeWidth:o,className:"transition-all duration-300",style:p}),t("circle",{cx:l,cy:n,r:o+1,fill:L({...a,label:a.barLabel||"",key:a.labelValue?.toString()||""},r),onMouseEnter:e=>P(e,`${a.barLabel||"Data"}: ${a.value}`,!0),onMouseMove:w,onMouseLeave:E,style:p})]},r)}const h=n(0,0,u,c,d);return e("g",{children:[t("path",{d:f,fill:"none",stroke:a.arcBackgroundColor,strokeWidth:o,className:"transition-all duration-300",style:p}),t("path",{d:h,fill:"none",stroke:L({...a,label:a.barLabel||"",key:a.labelValue?.toString()||""},r),strokeWidth:o,strokeLinecap:"square"===s?"butt":"round",onMouseEnter:e=>P(e,`${a.barLabel||"Data"}: ${a.value}`,!0),onMouseMove:w,onMouseLeave:E,style:{pointerEvents:"stroke",...p}})]},r)}),t("text",{x:"0",y:`-${o+y+2}`,fill:(()=>{if(!x.visible)return"";const e=x.content.split(":")[0]?.trim();if(void 0===e)return"";const t=z.find(t=>t.barLabel===e);if(!t)return"";const a={...t,label:t.barLabel,key:t.labelValue?.toString()??""};return k(a)})(),textAnchor:"middle",dominantBaseline:"central",children:x.visible?e(a,{children:[t("tspan",{x:"0",dy:"0",className:"ff-center-text-tooltip",children:(T=x.content.split(":")[1]?.trim()||"",D=9,T.length>D?T.slice(0,D)+"...":T)}),x.content.split(":")[0]?.split(" ").map((e,a)=>t("tspan",{x:"0",dy:0===a?`${o+y+5}`:18,className:"ff-center-text-tooltip",children:e},a))]}):t(a,{children:B.map((a,l)=>{if(0===l){const[r,...n]=a.split(" ");return e("tspan",{children:[t("tspan",{x:"0",dy:"0",style:{fontSize:`${b}px`},className:"ff-center-first-text",children:r}),t("tspan",{x:"0",dy:18,style:{fontSize:`${g}px`},className:"ff-center-text",children:n.join(" ")})]},l)}return t("tspan",{x:"0",dy:0===l?0:18,className:"ff-center-text",style:{fontSize:`${g}px`},children:a},l)})})})]})]})}),x.visible&&t("div",{className:"ff-multi-radial-tooltip",style:{position:"fixed",top:`${x.y+10}px`,left:`${x.x+15}px`,zIndex:1e3,pointerEvents:"none"},children:x.content}),f&&((a,l)=>{switch(l){case"numberLegend":return t("div",{className:"ff-legend-container ff-number-legend",style:{gap:m},children:a.map((a,l)=>e("div",{className:"ff-legend-item",onMouseEnter:e=>{N(a.barLabel||a.label),P(e,`${a.barLabel||"Data"}: ${a.value}`,!1)},onMouseMove:w,onMouseLeave:()=>{N(null),E()},children:[t(r,{fontSize:20,fontWeight:"semi-bold",className:"ff-legend-value",color:k(a),children:a.key.padStart(2,"0")}),t(r,{fontSize:10,className:"ff-legend-key",color:"var(--text-color)",children:a.label})]},l))});case"pillLegend":return t("div",{className:"ff-legend-container ff-pill-legend",style:{gap:m},children:a.slice().reverse().map((a,l)=>e("div",{className:"ff-legend-item",onMouseEnter:e=>{N(a.barLabel||a.label),P(e,`${a.barLabel||"Data"}: ${a.value}`,!1)},onMouseMove:w,onMouseLeave:()=>{N(null),E()},children:[t("span",{className:"ff-legend-capsule",style:{backgroundColor:k(a)},children:t(r,{fontSize:10,color:"var(--tooltip-text-color)",style:v,children:p&&a.value})}),t(r,{className:"ff-legend-key",children:a.label})]},l))});default:return null}})(z.map(e=>({...e,label:e?.barLabel,key:e.labelValue?.toString()})),u)]});var T,D};export{i as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import './MultiRadialChart.scss';
+import Typography from '../../Typography';
+const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
+    const startX = centerX + radius * Math.cos(startAngle);
+    const startY = centerY + radius * Math.sin(startAngle);
+    const endX = centerX + radius * Math.cos(endAngle);
+    const endY = centerY + radius * Math.sin(endAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+const MultiRadialChart = ({ radius, lineWidth, lineCap, barValues, labelHeading, legendType = 'numberLegend', isLegendDetails = true, isPillValueVisible = true, chartToLegendGap = '16px', legendGap = '8px', labelFontSize = 12, subLabelFontSize = 8, gapBetweenArch = 10, capsuleStyle = { padding: '4px' }, }) => {
+    const [tooltip, setTooltip] = useState({
+        visible: false,
+        x: 0,
+        y: 0,
+        content: '',
+        isArc: false,
+    });
+    const [hoveredLegend, setHoveredLegend] = useState(null);
+    const renderGradients = () => (_jsx("defs", { children: barValues.map((bar, i) => Array.isArray(bar.arcColor) ? (_jsx("linearGradient", { id: `gradient-${i}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", gradientTransform: "rotate(90)", children: bar.arcColor.map((color, idx) => (_jsx("stop", { offset: `${(idx / (bar.arcColor.length - 1)) * 100}%`, stopColor: color }, idx))) }, `gradient-${i}`)) : null) }));
+    const getArcColor = (bar, index) => Array.isArray(bar.arcColor) ? `url(#gradient-${index})` : bar.arcColor;
+    const getLegendColor = (bar) => Array.isArray(bar.arcColor) ? bar.arcColor[0] : bar.arcColor;
+    const parseValueToMB = (value) => {
+        if (typeof value === 'string') {
+            const match = value.trim().match(/^([\d.]+)\s*([a-zA-Z%]*)$/);
+            if (!match)
+                return 0;
+            const numericValue = parseFloat(match[1] ?? '0');
+            const unit = match[2]?.toUpperCase() || '';
+            if (isNaN(numericValue))
+                return 0;
+            switch (unit) {
+                case 'TB':
+                    return numericValue * 1024 * 1024;
+                case 'GB':
+                    return numericValue * 1024;
+                case 'MB':
+                    return numericValue;
+                case 'KB':
+                    return numericValue / 1024;
+                default:
+                    return numericValue;
+            }
+        }
+        else {
+            return value;
+        }
+    };
+    const normalizedBarValues = barValues.map((item) => {
+        if (typeof item.value === 'string') {
+            const parsedValue = parseValueToMB(item.value);
+            const normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
+            return {
+                ...item,
+                normalizedValue,
+                labelValue: Number.isInteger(normalizedValue)
+                    ? normalizedValue
+                    : normalizedValue.toFixed(2),
+            };
+        }
+        return {
+            ...item,
+            normalizedValue: item.value,
+            labelValue: Number.isInteger(item.value)
+                ? item.value
+                : item.value?.toFixed(2),
+        };
+    });
+    const totalBarValue = normalizedBarValues.reduce((acc, status) => acc + status.normalizedValue, 0);
+    const baseRadius = radius;
+    const radiusIncrement = lineWidth + gapBetweenArch;
+    const maxRadius = baseRadius + radiusIncrement * (normalizedBarValues.length - 1);
+    const svgSize = 2 * (maxRadius + lineWidth);
+    const reversedBarValues = [...normalizedBarValues].reverse();
+    const labelLines = labelHeading.trim().split(' ');
+    const renderLegend = (legendData, legendType) => {
+        switch (legendType) {
+            case 'numberLegend':
+                return (_jsx("div", { className: "ff-legend-container ff-number-legend", style: { gap: legendGap }, children: legendData.map((item, index) => (_jsxs("div", { className: "ff-legend-item", onMouseEnter: (e) => {
+                            setHoveredLegend(item.barLabel || item.label);
+                            handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
+                        }, onMouseMove: handleMouseMove, onMouseLeave: () => {
+                            setHoveredLegend(null);
+                            handleMouseLeave();
+                        }, children: [_jsx(Typography, { fontSize: 20, fontWeight: "semi-bold", className: "ff-legend-value", color: getLegendColor(item), children: item.key.padStart(2, '0') }), _jsx(Typography, { fontSize: 10, className: "ff-legend-key", color: "var(--text-color)", children: item.label })] }, index))) }));
+            case 'pillLegend':
+                return (_jsx("div", { className: "ff-legend-container ff-pill-legend", style: { gap: legendGap }, children: legendData
+                        .slice()
+                        .reverse()
+                        .map((item, index) => (_jsxs("div", { className: "ff-legend-item", onMouseEnter: (e) => {
+                            setHoveredLegend(item.barLabel || item.label);
+                            handleMouseEnter(e, `${item.barLabel || 'Data'}: ${item.value}`, false);
+                        }, onMouseMove: handleMouseMove, onMouseLeave: () => {
+                            setHoveredLegend(null);
+                            handleMouseLeave();
+                        }, children: [_jsx("span", { className: "ff-legend-capsule", style: { backgroundColor: getLegendColor(item) }, children: _jsx(Typography, { fontSize: 10, color: "var(--tooltip-text-color)", style: capsuleStyle, children: isPillValueVisible && item.value }) }), _jsx(Typography, { className: "ff-legend-key", children: item.label })] }, index))) }));
+            default:
+                return null;
+        }
+    };
+    const handleMouseEnter = (e, content, isArc) => {
+        const { clientX, clientY } = e;
+        setTooltip({
+            visible: true,
+            x: clientX,
+            y: clientY,
+            content: content,
+            isArc,
+        });
+    };
+    const handleMouseMove = (e) => {
+        const { clientX, clientY } = e;
+        setTooltip((prev) => ({
+            ...prev,
+            x: clientX,
+            y: clientY,
+        }));
+    };
+    const handleMouseLeave = () => {
+        setTooltip({ visible: false, x: 0, y: 0, content: '', isArc: false });
+    };
+    const textData = (text, maxLength) => {
+        return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+    };
+    const getArcColorFromTooltip = () => {
+        if (!tooltip.visible)
+            return '';
+        const valueString = tooltip.content.split(':')[0]?.trim();
+        if (valueString === undefined)
+            return '';
+        const matchingBar = normalizedBarValues.find((val) => val.barLabel === valueString);
+        if (!matchingBar)
+            return '';
+        const chartItem = {
+            ...matchingBar,
+            label: matchingBar.barLabel,
+            key: matchingBar.labelValue?.toString() ?? '',
+        };
+        return getLegendColor(chartItem);
+    };
+    const DEFAULT_LINE_HEIGHT = 18;
+    return (_jsxs("div", { className: `ff-multi-radial-chart-container ${legendType === 'numberLegend'
+            ? 'ff-multi-radial-chart-number'
+            : 'ff-multi-radial-chart-pill'}`, style: { gap: chartToLegendGap }, children: [_jsx("div", { className: "relative", style: { width: svgSize, height: svgSize }, children: _jsxs("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, className: "absolute top-0 left-0", children: [renderGradients(), _jsxs("g", { transform: `translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`, children: [reversedBarValues.map((values, i) => {
+                                    const originalIndex = normalizedBarValues.length - 1 - i;
+                                    const percentage = values.normalizedValue / totalBarValue;
+                                    const angleIncrement = percentage * 2 * Math.PI;
+                                    let startAngle = -Math.PI / 2;
+                                    let endAngle = startAngle + angleIncrement;
+                                    if (values.normalizedValue === totalBarValue) {
+                                        startAngle = 0;
+                                        endAngle = 2 * Math.PI;
+                                    }
+                                    const currentRadius = baseRadius + radiusIncrement * originalIndex;
+                                    const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
+                                    const arcStyle = {
+                                        opacity: hoveredLegend !== null
+                                            ? values.barLabel === hoveredLegend
+                                                ? 1
+                                                : 0.2
+                                            : 1,
+                                        transition: 'opacity 0.3s ease',
+                                    };
+                                    // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
+                                    if (values.normalizedValue === 0) {
+                                        const dotX = currentRadius * Math.cos(-Math.PI / 2);
+                                        const dotY = currentRadius * Math.sin(-Math.PI / 2);
+                                        return (_jsxs("g", { children: [_jsx("path", { d: backGroundArcPath, fill: "none", stroke: values.arcBackgroundColor, strokeWidth: lineWidth, className: "transition-all duration-300", style: arcStyle }), _jsx("circle", { cx: dotX, cy: dotY, r: lineWidth + 1, fill: getArcColor({
+                                                        ...values,
+                                                        label: values.barLabel || '',
+                                                        key: values.labelValue?.toString() || '',
+                                                    }, originalIndex), onMouseEnter: (e) => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: arcStyle })] }, originalIndex));
+                                    }
+                                    const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
+                                    return (_jsxs("g", { children: [_jsx("path", { d: backGroundArcPath, fill: "none", stroke: values.arcBackgroundColor, strokeWidth: lineWidth, className: "transition-all duration-300", style: arcStyle }), _jsx("path", { d: foregroundArcPath, fill: "none", stroke: getArcColor({
+                                                    ...values,
+                                                    label: values.barLabel || '',
+                                                    key: values.labelValue?.toString() || '',
+                                                }, originalIndex), strokeWidth: lineWidth, strokeLinecap: lineCap === 'square' ? 'butt' : 'round', onMouseEnter: (e) => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`, true), onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'stroke', ...arcStyle } })] }, originalIndex));
+                                }), _jsx("text", { x: "0", y: `-${lineWidth + gapBetweenArch + 2}`, fill: getArcColorFromTooltip(), textAnchor: "middle", dominantBaseline: "central", children: tooltip.visible ? (_jsxs(_Fragment, { children: [_jsx("tspan", { x: "0", dy: "0", className: "ff-center-text-tooltip", children: textData(tooltip.content.split(':')[1]?.trim() || '', 9) }), tooltip.content
+                                                .split(':')[0]
+                                                ?.split(' ')
+                                                .map((word, i) => (_jsx("tspan", { x: "0", dy: i === 0
+                                                    ? `${lineWidth + gapBetweenArch + 5}`
+                                                    : DEFAULT_LINE_HEIGHT, className: "ff-center-text-tooltip", children: word }, i)))] })) : (_jsx(_Fragment, { children: labelLines.map((line, index) => {
+                                            if (index === 0) {
+                                                const [firstWord, ...restWords] = line.split(' ');
+                                                return (_jsxs("tspan", { children: [_jsx("tspan", { x: "0", dy: "0", style: { fontSize: `${labelFontSize}px` }, className: "ff-center-first-text", children: firstWord }), _jsx("tspan", { x: "0", dy: DEFAULT_LINE_HEIGHT, style: { fontSize: `${subLabelFontSize}px` }, className: "ff-center-text", children: restWords.join(' ') })] }, index));
+                                            }
+                                            return (_jsx("tspan", { x: "0", dy: index === 0 ? 0 : DEFAULT_LINE_HEIGHT, className: "ff-center-text", style: { fontSize: `${subLabelFontSize}px` }, children: line }, index));
+                                        }) })) })] })] }) }), tooltip.visible && (_jsx("div", { className: "ff-multi-radial-tooltip", style: {
+                    position: 'fixed',
+                    top: `${tooltip.y + 10}px`,
+                    left: `${tooltip.x + 15}px`,
+                    zIndex: 1000,
+                    pointerEvents: 'none',
+                }, children: tooltip.content })), isLegendDetails &&
+                renderLegend(normalizedBarValues.map((value) => ({
+                    ...value,
+                    label: value?.barLabel,
+                    key: value.labelValue?.toString(),
+                })), legendType)] }));
+};
+export default MultiRadialChart;
+//# sourceMappingURL=MultiRadialChart.js.map

package/lib/components/Charts/PieChart/PieChart.js

@@ -1 +1,134 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l}from"react";import"./PieChart.scss.js";import a from"../../Typography/Typography.js";const r=(e,t,l,a)=>{if(0===t)return{endAngle:l,backgroundArcPath:"",foregroundArcPath:"",percentage:0};const r=e/t,n=l+2*r*Math.PI;if(1===r){const e=`\n      M ${a} 0 \n      A ${a} ${a} 0 1 1 ${-a} 0 \n      A ${a} ${a} 0 1 1 ${a} 0 \n      Z\n    `;return{endAngle:n,backgroundArcPath:e,foregroundArcPath:e,percentage:r}}const i=(({x:e,y:t,radius:l,startAngle:a,endAngle:r})=>{const n=e+l*Math.cos(a),i=t+l*Math.sin(a),o=e+l*Math.cos(r),s=t+l*Math.sin(r);return`M ${n} ${i} A ${l} ${l} 0 ${r-a>Math.PI?1:0} 1 ${o} ${s} L ${e} ${t} Z`})({x:0,y:0,radius:a,startAngle:l,endAngle:n});return{endAngle:n,backgroundArcPath:i,foregroundArcPath:i,percentage:r}},n=({radius:n=15,colors:i=[],data:o=[],chartBorder:s=!1})=>{const[c,h]=l(null),[d,u]=l({x:0,y:0}),[f,g]=l(null),p=o.map(e=>{let t;if("string"==typeof e.value){const l=parseFloat(e.value);t=isNaN(l)?0:l}else t=e.value;return{...e,value:t,labelValue:Number.isInteger(t)?e.value:t.toFixed(2)}}),v=p.reduce((e,t)=>e+t.value,0),$=1===p.filter(e=>e.value>0).length;let m=-Math.PI/2;const y=2*(n+5),M=s&&p.length>0?[{label:p[0]?.label||"",value:p.slice(1).reduce((e,t)=>e+t.value,0)},...p.slice(1)]:p,A=e=>{const{clientX:t,clientY:l}=e;u({x:t,y:l})},b=(e,t,l,a=!1)=>{g(l),a||h({label:e.label,value:e.value,color:t})},x=()=>{h(null),g(null)},N=e=>({transform:f===e?"scale(1.1)":"scale(1)",transition:"transform 0.3s ease, opacity 0.3s ease",opacity:null===f||f===e?1:.5}),k=p.map((l,r)=>e("div",{className:"ff-pie-chart-legend-item",onMouseEnter:()=>b(l,i[r%i.length]||"",r,!0),onMouseLeave:x,children:[t(a,{as:"div",fontSize:24,fontWeight:"semi-bold",lineHeight:"36px",color:i[r%i.length]||"",children:l.labelValue}),t(a,{as:"div",fontSize:10,fontWeight:"regular",lineHeight:"18px",className:"ff-pie-chart-legend-value",children:l.label})]},l.label));if(0===v){return e("div",{className:"ff-pie-chart-container",onMouseMove:A,children:[t("div",{className:""+(s?"ff-pie-chart-border":""),style:{width:y,height:y},children:t("svg",{width:y,height:y,viewBox:`0 0 ${y} ${y}`,children:t("g",{transform:`translate(${n+5}, ${n+5})`,children:t("path",{d:`M ${n} 0 A ${n} ${n} 0 1 1 ${-n} 0 A ${n} ${n} 0 1 1 ${n} 0 Z`,fill:"var(--tooltip-bg-color)",stroke:"white",strokeWidth:.5,opacity:.2})})})}),c&&e("div",{className:"ff-pie-chart-tooltip",style:{top:d.y,left:d.x},children:[c.label," : ",c.value]}),t("div",{className:"ff-pie-chart-legend",children:k})]})}return e("div",{className:"ff-pie-chart-container",onMouseMove:A,children:[t("div",{className:""+(s?"ff-pie-chart-border":""),style:{width:y,height:y},children:t("svg",{width:y,height:y,viewBox:`0 0 ${y} ${y}`,children:t("g",{transform:`translate(${n+5}, ${n+5})`,children:M.map((l,a)=>{if(l.value>0){const o=i[a%i.length]||"",{endAngle:s,backgroundArcPath:c}=r(l.value,v,m,n);return m=s,e("g",$?{onMouseEnter:()=>b(l,o,a),onMouseLeave:x,style:N(a),children:[t("path",{d:c,fill:o,stroke:"white",strokeWidth:.5}),t("line",{x1:0,y1:n,x2:0,y2:0,stroke:"white",strokeWidth:2})]}:{children:[t("path",{d:c,fill:o,stroke:"white",strokeWidth:.5,onMouseEnter:()=>b(l,o,a),onMouseLeave:x,style:N(a)}),t("text",{x:n/2*Math.cos((m+s)/2),y:n/2*Math.sin((m+s)/2),fill:"white",textAnchor:"middle",dominantBaseline:"central"})]},l.label)}return null})})})}),c&&e("div",{className:"ff-pie-chart-tooltip",style:{top:d.y,left:d.x},children:[c.label," : ",c.value]}),t("div",{className:"ff-pie-chart-legend",children:k})]})};export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import './PieChart.scss';
+import Typography from '../../Typography';
+const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
+    const startX = x + radius * Math.cos(startAngle);
+    const startY = y + radius * Math.sin(startAngle);
+    const endX = x + radius * Math.cos(endAngle);
+    const endY = y + radius * Math.sin(endAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} L ${x} ${y} Z`;
+};
+const calculateArcAngles = (value, total, currentAngle, radius) => {
+    if (total === 0) {
+        return {
+            endAngle: currentAngle,
+            backgroundArcPath: '',
+            foregroundArcPath: '',
+            percentage: 0,
+        };
+    }
+    const percentage = value / total;
+    const angleIncrement = percentage * 2 * Math.PI;
+    const startAngle = currentAngle;
+    const endAngle = startAngle + angleIncrement;
+    if (percentage === 1) {
+        const path = `
+      M ${radius} 0 
+      A ${radius} ${radius} 0 1 1 ${-radius} 0 
+      A ${radius} ${radius} 0 1 1 ${radius} 0 
+      Z
+    `;
+        return {
+            endAngle,
+            backgroundArcPath: path,
+            foregroundArcPath: path,
+            percentage,
+        };
+    }
+    const path = calculateArc({
+        x: 0,
+        y: 0,
+        radius,
+        startAngle,
+        endAngle,
+    });
+    return {
+        endAngle,
+        backgroundArcPath: path,
+        foregroundArcPath: path,
+        percentage,
+    };
+};
+const PieChart = ({ radius = 15, colors = [], data = [], chartBorder = false, }) => {
+    const [tooltip, setTooltip] = useState(null);
+    const [tooltipPosition, setTooltipPosition] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const normalizedData = data.map((item) => {
+        let normalizedValue;
+        if (typeof item.value === 'string') {
+            const parsedValue = parseFloat(item.value);
+            normalizedValue = isNaN(parsedValue) ? 0 : parsedValue;
+        }
+        else {
+            normalizedValue = item.value;
+        }
+        return {
+            ...item,
+            value: normalizedValue,
+            labelValue: Number.isInteger(normalizedValue)
+                ? item.value
+                : normalizedValue.toFixed(2),
+        };
+    });
+    const total = normalizedData.reduce((acc, item) => acc + item.value, 0);
+    const nonZeroCount = normalizedData.filter((item) => item.value > 0).length;
+    const isSingleSegment = nonZeroCount === 1;
+    let currentAngle = -Math.PI / 2;
+    const svgSize = 2 * (radius + 5);
+    const chartData = chartBorder && normalizedData.length > 0
+        ? [
+            {
+                label: normalizedData[0]?.label || '',
+                value: normalizedData
+                    .slice(1)
+                    .reduce((acc, item) => acc + item.value, 0),
+            },
+            ...normalizedData.slice(1),
+        ]
+        : normalizedData;
+    const handleMouseMove = (e) => {
+        const { clientX: x, clientY: y } = e;
+        setTooltipPosition({ x, y });
+    };
+    const handleMouseEnter = (item, color, index, isLegend = false) => {
+        setHoveredIndex(index);
+        if (!isLegend) {
+            setTooltip({ label: item.label, value: item.value, color });
+        }
+    };
+    const handleMouseLeave = () => {
+        setTooltip(null);
+        setHoveredIndex(null);
+    };
+    const getSegmentStyle = (index) => ({
+        transform: hoveredIndex === index ? 'scale(1.1)' : 'scale(1)',
+        transition: 'transform 0.3s ease, opacity 0.3s ease',
+        opacity: hoveredIndex === null || hoveredIndex === index ? 1 : 0.5,
+    });
+    const legendItems = normalizedData.map((item, index) => (_jsxs("div", { className: "ff-pie-chart-legend-item", onMouseEnter: () => handleMouseEnter(item, colors[index % colors.length] || '', index, true), onMouseLeave: handleMouseLeave, children: [_jsx(Typography, { as: "div", fontSize: 24, fontWeight: "semi-bold", lineHeight: "36px", color: colors[index % colors.length] || '', children: item.labelValue }), _jsx(Typography, { as: "div", fontSize: 10, fontWeight: "regular", lineHeight: "18px", className: "ff-pie-chart-legend-value", children: item.label })] }, item.label)));
+    if (total === 0) {
+        const fullCirclePath = `M ${radius} 0 A ${radius} ${radius} 0 1 1 ${-radius} 0 A ${radius} ${radius} 0 1 1 ${radius} 0 Z`;
+        return (_jsxs("div", { className: "ff-pie-chart-container", onMouseMove: handleMouseMove, children: [_jsx("div", { className: `${chartBorder ? 'ff-pie-chart-border' : ''}`, style: { width: svgSize, height: svgSize }, children: _jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, children: _jsx("g", { transform: `translate(${radius + 5}, ${radius + 5})`, children: _jsx("path", { d: fullCirclePath, fill: "var(--tooltip-bg-color)", stroke: "white", strokeWidth: 0.5, opacity: 0.2 }) }) }) }), tooltip && (_jsxs("div", { className: "ff-pie-chart-tooltip", style: { top: tooltipPosition.y, left: tooltipPosition.x }, children: [tooltip.label, " : ", tooltip.value] })), _jsx("div", { className: "ff-pie-chart-legend", children: legendItems })] }));
+    }
+    return (_jsxs("div", { className: "ff-pie-chart-container", onMouseMove: handleMouseMove, children: [_jsx("div", { className: `${chartBorder ? 'ff-pie-chart-border' : ''}`, style: { width: svgSize, height: svgSize }, children: _jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, children: _jsx("g", { transform: `translate(${radius + 5}, ${radius + 5})`, children: chartData.map((item, index) => {
+                            if (item.value > 0) {
+                                const color = colors[index % colors.length] || '';
+                                const { endAngle, backgroundArcPath } = calculateArcAngles(item.value, total, currentAngle, radius);
+                                currentAngle = endAngle;
+                                if (isSingleSegment) {
+                                    return (_jsxs("g", { onMouseEnter: () => handleMouseEnter(item, color, index), onMouseLeave: handleMouseLeave, style: getSegmentStyle(index), children: [_jsx("path", { d: backgroundArcPath, fill: color, stroke: "white", strokeWidth: 0.5 }), _jsx("line", { x1: 0, y1: radius, x2: 0, y2: 0, stroke: "white", strokeWidth: 2 })] }, item.label));
+                                }
+                                else {
+                                    return (_jsxs("g", { children: [_jsx("path", { d: backgroundArcPath, fill: color, stroke: "white", strokeWidth: 0.5, onMouseEnter: () => handleMouseEnter(item, color, index), onMouseLeave: handleMouseLeave, style: getSegmentStyle(index) }), _jsx("text", { x: (radius / 2) * Math.cos((currentAngle + endAngle) / 2), y: (radius / 2) * Math.sin((currentAngle + endAngle) / 2), fill: "white", textAnchor: "middle", dominantBaseline: "central" })] }, item.label));
+                                }
+                            }
+                            return null;
+                        }) }) }) }), tooltip && (_jsxs("div", { className: "ff-pie-chart-tooltip", style: { top: tooltipPosition.y, left: tooltipPosition.x }, children: [tooltip.label, " : ", tooltip.value] })), _jsx("div", { className: "ff-pie-chart-legend", children: legendItems })] }));
+};
+export default PieChart;
+//# sourceMappingURL=PieChart.js.map

package/lib/components/Charts/RadialChart/RadialChart.js

@@ -1 +1,89 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMemo as r}from"react";import"./RadialChart.scss.js";import e from"../../Tooltip/Tooltip.js";const s=({x:t,y:a,radius:r,startAngle:e,endAngle:s})=>{const n=t+r*Math.cos(e),o=a+r*Math.sin(e),l=t+r*Math.cos(s),i=a+r*Math.sin(s);return`M ${n} ${o} A ${r} ${r} 0 ${s-e>Math.PI?1:0} 1 ${l} ${i}`},n=({radius:n=15,lineWidth:o=5,statusValues:l=[],onClick:i=()=>{},fontSize:c=6,gap:d=12})=>{const{colorMapping:u,backgroundColorMapping:g}=r(()=>({colorMapping:{passed:"var(--status-success-text-color)",failed:"var(--status-rejected-text-color)",warning:"var(--status-warning-text-color)",skipped:"var(--status-skipped-text-color)"},backgroundColorMapping:{passed:"var(--status-success-bg-color)",failed:"var(--status-rejected-bg-color)",warning:"var(--status-warning-bg-color)",skipped:"var(--status-skipped-bg-color)"}}),[]),h=l.reduce((t,a)=>t+a.value,0);let p=-Math.PI/2;const A=2*(n+o);return t("div",{className:"ff-radial-chart-container",style:{"--fontSize":`${c}px`,gap:`${d}px`},children:l.map((r,l)=>{const c=r.status.toLowerCase(),{endAngle:d,backgroundArcPath:$,foregroundArcPath:f,percentage:M}=((t,a,r,e)=>{if(0===a)return{endAngle:r,backgroundArcPath:s({x:0,y:0,radius:e,startAngle:0,endAngle:2*Math.PI}),foregroundArcPath:"",percentage:0};const n=t/a;let o=r,l=o+2*n*Math.PI;return t===a&&(o=0,l=2*Math.PI),{endAngle:l,backgroundArcPath:s({x:0,y:0,radius:e,startAngle:0,endAngle:2*Math.PI}),foregroundArcPath:s({x:0,y:0,radius:e,startAngle:o,endAngle:l}),percentage:n}})(r.value,h,p,n);return p=d,t(e,{title:`${r.status}: ${Math.round(100*M)}%`,zIndex:1e3,children:t("svg",{width:A,height:A,viewBox:`0 0 ${A} ${A}`,onClick:()=>i(r),role:"img","aria-label":`${r.status}: ${Math.round(100*M)}%`,children:a("g",{transform:`translate(${n+o}, ${n+o})`,children:[t("path",{d:$,fill:"none",stroke:g[c],strokeWidth:o}),t("path",{d:f,fill:"none",stroke:u[c],strokeWidth:o}),t("text",{x:"0",y:"0",fill:u[c],textAnchor:"middle",dominantBaseline:"central",children:`${Math.round(100*M)}%`})]})},r.status)},`status.status-${l}`)})})};export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import './RadialChart.scss';
+import Tooltip from '../../Tooltip';
+const useColorMappings = () => useMemo(() => {
+    return {
+        colorMapping: {
+            passed: 'var(--status-success-text-color)',
+            failed: 'var(--status-rejected-text-color)',
+            warning: 'var(--status-warning-text-color)',
+            skipped: 'var(--status-skipped-text-color)',
+        },
+        backgroundColorMapping: {
+            passed: 'var(--status-success-bg-color)',
+            failed: 'var(--status-rejected-bg-color)',
+            warning: 'var(--status-warning-bg-color)',
+            skipped: 'var(--status-skipped-bg-color)',
+        },
+    };
+}, []);
+// Function to generate SVG arc paths
+const calculateArc = ({ x, y, radius, startAngle, endAngle, }) => {
+    const startX = x + radius * Math.cos(startAngle);
+    const startY = y + radius * Math.sin(startAngle);
+    const endX = x + radius * Math.cos(endAngle);
+    const endY = y + radius * Math.sin(endAngle);
+    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+    return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+// Function to calculate arc paths and angles
+const calculateArcAngles = (statusValue, total, currentAngle, radius) => {
+    if (total === 0) {
+        const backgroundArcPath = calculateArc({
+            x: 0,
+            y: 0,
+            radius,
+            startAngle: 0,
+            endAngle: 2 * Math.PI,
+        });
+        return {
+            endAngle: currentAngle,
+            backgroundArcPath,
+            foregroundArcPath: '',
+            percentage: 0,
+        };
+    }
+    const percentage = statusValue / total;
+    const angleIncrement = percentage * 2 * Math.PI;
+    let startAngle = currentAngle;
+    let endAngle = startAngle + angleIncrement;
+    // Scenario when statusValue is equal to total
+    if (statusValue === total) {
+        startAngle = 0;
+        endAngle = 2 * Math.PI;
+    }
+    const backgroundArcPath = calculateArc({
+        x: 0,
+        y: 0,
+        radius,
+        startAngle: 0,
+        endAngle: 2 * Math.PI,
+    });
+    const foregroundArcPath = calculateArc({
+        x: 0,
+        y: 0,
+        radius,
+        startAngle,
+        endAngle,
+    });
+    return { endAngle, backgroundArcPath, foregroundArcPath, percentage };
+};
+// RadialChart component
+const RadialChart = ({ radius = 15, lineWidth = 5, statusValues = [], onClick = () => { }, fontSize = 6, gap = 12, }) => {
+    const { colorMapping, backgroundColorMapping } = useColorMappings();
+    const total = statusValues.reduce((acc, status) => acc + status.value, 0);
+    let currentAngle = -Math.PI / 2;
+    const svgSize = 2 * (radius + lineWidth);
+    return (_jsx("div", { className: "ff-radial-chart-container", style: {
+            '--fontSize': `${fontSize}px`,
+            gap: `${gap}px`,
+        }, children: statusValues.map((status, index) => {
+            const normalizedStatus = status.status.toLowerCase();
+            const { endAngle, backgroundArcPath, foregroundArcPath, percentage } = calculateArcAngles(status.value, total, currentAngle, radius);
+            currentAngle = endAngle;
+            return (_jsx(Tooltip, { title: `${status.status}: ${Math.round(percentage * 100)}%`, zIndex: 1000, children: _jsx("svg", { width: svgSize, height: svgSize, viewBox: `0 0 ${svgSize} ${svgSize}`, onClick: () => onClick(status), role: "img", "aria-label": `${status.status}: ${Math.round(percentage * 100)}%`, children: _jsxs("g", { transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`, children: [_jsx("path", { d: backgroundArcPath, fill: "none", stroke: backgroundColorMapping[normalizedStatus], strokeWidth: lineWidth }), _jsx("path", { d: foregroundArcPath, fill: "none", stroke: colorMapping[normalizedStatus], strokeWidth: lineWidth }), _jsx("text", { x: "0", y: "0", fill: colorMapping[normalizedStatus], textAnchor: "middle", dominantBaseline: "central", children: `${Math.round(percentage * 100)}%` })] }) }, status.status) }, `status.status-${index}`));
+        }) }));
+};
+export default RadialChart;
+//# sourceMappingURL=RadialChart.js.map

package/lib/components/ChatModal/ChatModal.js

@@ -1 +1,44 @@
-import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import{useState as e}from"react";import"./ChatModal.scss.js";import{createPortal as d}from"react-dom";import a from"../Icon/Icon.js";import n from"../Typography/Typography.js";import c from"../../_virtual/index.js";import l from"../Tooltip/Tooltip.js";const r=({iconName:r,iconPosition:{top:m,left:h,bottom:s,right:p},hoverIconPosition:{top:v,left:f,bottom:g,right:x},modalPosition:{top:y,left:N,bottom:C,right:$},modalWidth:b,modalHeight:u,headerContent:j="Header Content",footerContent:w="Footer Content",iconWidth:T,iconHeight:k,modalHeading:H="Ask Fia",children:_,onClearChat:I})=>{const[P,W]=e(!1),[F,A]=e(!1);return o(i,{children:[o("div",{style:{top:void 0!==m?`${m}px`:void 0,left:void 0!==h?`${h}px`:void 0,bottom:void 0!==s?`${s}px`:void 0,right:void 0!==p?`${p}px`:void 0},className:"ff-dynamic-icon-container",children:[t(a,{className:"ff-dynamic-icon",name:r,onClick:()=>{A(o=>!o),setTimeout(()=>W(o=>!o),10)},height:k,width:T}),t("div",{style:{top:void 0!==v?`${v}px`:void 0,left:void 0!==f?`${f}px`:void 0,bottom:void 0!==g?`${g}px`:void 0,right:void 0!==x?`${x}px`:void 0},className:"ff-chat-icon-hover",children:t(a,{name:"ask_fia_icon",height:32,width:82})})]}),F&&d(t("div",{className:c("ff-dynamic-modal",{open:P}),style:{top:void 0!==y?`${y}px`:void 0,left:void 0!==N?`${N}px`:void 0,bottom:void 0!==C?`${C}px`:void 0,right:void 0!==$?`${$}px`:void 0,position:"fixed",height:u,width:b},children:o("div",{className:"ff-dynamic-modal-content",children:[j&&t("div",{className:"ff-dynamic-modal-header",children:o("div",{className:"header-container",children:[o("div",{className:"header-left",children:[t(a,{height:16,width:16,name:"fia_icon"}),t(n,{fontWeight:"medium",children:H})]}),o("div",{className:"header-right",children:[t("span",{className:"action",children:t(l,{title:"Clear chat",placement:"bottom",children:t(a,{height:16,width:16,name:"delete",color:"var(--tooltip-text-color)",onClick:I})})}),t("span",{className:"action",children:t(l,{title:"Close",placement:"bottom",children:t(a,{height:16,width:16,name:"close",color:"var(--tooltip-text-color)",onClick:()=>(W(!1),void setTimeout(()=>A(!1),300))})})})]})]})}),t("div",{className:"ff-dynamic-modal-body",children:_}),w&&t("div",{className:"ff-dynamic-modal-footer",children:w})]})}),document.body)]})};export{r as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import './ChatModal.scss';
+import { createPortal } from 'react-dom';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+const ChatModal = ({ iconName, iconPosition: { top: iconTop, left: iconLeft, bottom: iconBottom, right: iconRight, }, hoverIconPosition: { top: iconhoverTop, left: iconhoverLeft, bottom: iconhoverBottom, right: iconhoverRight, }, modalPosition: { top: modalTop, left: modalLeft, bottom: modalBottom, right: modalRight, }, modalWidth, modalHeight, headerContent = 'Header Content', footerContent = 'Footer Content', iconWidth, iconHeight, modalHeading = 'Ask Fia', children, onClearChat, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const openModal = () => {
+        setIsVisible((prev) => !prev);
+        setTimeout(() => setIsOpen((prev) => !prev), 10);
+    };
+    const closeModal = () => {
+        setIsOpen(false);
+        setTimeout(() => setIsVisible(false), 300);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    top: iconTop !== undefined ? `${iconTop}px` : undefined,
+                    left: iconLeft !== undefined ? `${iconLeft}px` : undefined,
+                    bottom: iconBottom !== undefined ? `${iconBottom}px` : undefined,
+                    right: iconRight !== undefined ? `${iconRight}px` : undefined,
+                }, className: "ff-dynamic-icon-container", children: [_jsx(Icon, { className: `ff-dynamic-icon`, name: iconName, onClick: openModal, height: iconHeight, width: iconWidth }), _jsx("div", { style: {
+                            top: iconhoverTop !== undefined ? `${iconhoverTop}px` : undefined,
+                            left: iconhoverLeft !== undefined ? `${iconhoverLeft}px` : undefined,
+                            bottom: iconhoverBottom !== undefined
+                                ? `${iconhoverBottom}px`
+                                : undefined,
+                            right: iconhoverRight !== undefined ? `${iconhoverRight}px` : undefined,
+                        }, className: `ff-chat-icon-hover`, children: _jsx(Icon, { name: "ask_fia_icon", height: 32, width: 82 }) })] }), isVisible &&
+                createPortal(_jsx("div", { className: classNames('ff-dynamic-modal', { open: isOpen }), style: {
+                        top: modalTop !== undefined ? `${modalTop}px` : undefined,
+                        left: modalLeft !== undefined ? `${modalLeft}px` : undefined,
+                        bottom: modalBottom !== undefined ? `${modalBottom}px` : undefined,
+                        right: modalRight !== undefined ? `${modalRight}px` : undefined,
+                        position: 'fixed',
+                        height: modalHeight,
+                        width: modalWidth,
+                    }, children: _jsxs("div", { className: "ff-dynamic-modal-content", children: [headerContent && (_jsx("div", { className: "ff-dynamic-modal-header", children: _jsxs("div", { className: "header-container", children: [_jsxs("div", { className: "header-left", children: [_jsx(Icon, { height: 16, width: 16, name: "fia_icon" }), _jsx(Typography, { fontWeight: "medium", children: modalHeading })] }), _jsxs("div", { className: "header-right", children: [_jsx("span", { className: "action", children: _jsx(Tooltip, { title: "Clear chat", placement: "bottom", children: _jsx(Icon, { height: 16, width: 16, name: "delete", color: "var(--tooltip-text-color)", onClick: onClearChat }) }) }), _jsx("span", { className: "action", children: _jsx(Tooltip, { title: "Close", placement: "bottom", children: _jsx(Icon, { height: 16, width: 16, name: "close", color: "var(--tooltip-text-color)", onClick: () => closeModal() }) }) })] })] }) })), _jsx("div", { className: "ff-dynamic-modal-body", children: children }), footerContent && (_jsx("div", { className: "ff-dynamic-modal-footer", children: footerContent }))] }) }), document.body)] }));
+};
+export default ChatModal;
+//# sourceMappingURL=ChatModal.js.map

package/lib/components/ChatModalAi/ChatModalAi.js

@@ -1 +1,63 @@
-import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import{forwardRef as e,useState as d,useRef as r,useImperativeHandle as a,useEffect as n}from"react";import"./ChatModalAi.scss.js";import{createPortal as c}from"react-dom";import l from"../Typography/Typography.js";import m from"../Icon/Icon.js";import h from"../../_virtual/index.js";const s=e(({iconName:e,hoverTitle:s,iconPosition:{top:v,left:f,bottom:p,right:u},hoverIconPosition:{top:x,left:y,bottom:g,right:$},modalPosition:{top:b,left:N,bottom:T,right:C},modalWidth:j,modalHeight:H,headerContent:I="Header Content",footerContent:P="Footer Content",iconWidth:W,iconHeight:w,children:M,onVisibilityChange:k},z)=>{const[A,F]=d(!1),[S,V]=d(!1),_=r(null),q=()=>{_.current&&clearTimeout(_.current),F(!1),_.current=setTimeout(()=>{V(!1),k?.(!1)},300)};return a(z,()=>({closeModal:q})),n(()=>()=>{_.current&&clearTimeout(_.current)},[]),o(i,{children:[o("div",{style:{top:void 0!==v?`${v}px`:void 0,left:void 0!==f?`${f}px`:void 0,bottom:void 0!==p?`${p}px`:void 0,right:void 0!==u?`${u}px`:void 0},className:"ff-ai-dynamic-icon-container",children:[t(m,{className:"ff-ai-dynamic-icon",name:e,onClick:()=>{_.current&&clearTimeout(_.current),V(o=>!o),k?.(!S),_.current=setTimeout(()=>F(o=>!o),10)},height:w,width:W}),t("div",{style:{top:void 0!==x?`${x}px`:void 0,left:void 0!==y?`${y}px`:void 0,bottom:void 0!==g?`${g}px`:void 0,right:void 0!==$?`${$}px`:void 0},className:"ff-ai-chat-icon-hover",children:t("div",{className:"ai-hover-leaf",children:t(l,{fontWeight:"bold",fontSize:14,color:"var(--chatbot-leaf-text)",children:s})})})]}),S&&c(t("div",{className:h("ff-ai-dynamic-modal",{open:A}),style:{top:void 0!==b?`${b}px`:void 0,left:void 0!==N?`${N}px`:void 0,bottom:void 0!==T?`${T}px`:void 0,right:void 0!==C?`${C}px`:void 0,position:"fixed",height:H,width:j},children:o("div",{className:"ff-ai-dynamic-modal-content",children:[I&&t("div",{className:"ff-ai-dynamic-modal-header",children:I}),t("div",{className:"ff-ai-dynamic-modal-body",children:M}),P&&t("div",{className:"ff-ai-dynamic-modal-footer",children:P})]})}),document.body)]})});export{s as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import './ChatModalAi.scss';
+import { createPortal } from 'react-dom';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import classNames from 'classnames';
+const ChatModalAi = forwardRef(({ iconName, hoverTitle, iconPosition: { top: iconTop, left: iconLeft, bottom: iconBottom, right: iconRight, }, hoverIconPosition: { top: iconhoverTop, left: iconhoverLeft, bottom: iconhoverBottom, right: iconhoverRight, }, modalPosition: { top: modalTop, left: modalLeft, bottom: modalBottom, right: modalRight, }, modalWidth, modalHeight, headerContent = 'Header Content', footerContent = 'Footer Content', iconWidth, iconHeight, children, onVisibilityChange, }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const timerRef = useRef(null);
+    const openModal = () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setIsVisible((prev) => !prev);
+        onVisibilityChange?.(!isVisible);
+        timerRef.current = setTimeout(() => setIsOpen((prev) => !prev), 10);
+    };
+    const closeModal = () => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setIsOpen(false);
+        timerRef.current = setTimeout(() => {
+            setIsVisible(false);
+            onVisibilityChange?.(false);
+        }, 300);
+    };
+    useImperativeHandle(ref, () => ({
+        closeModal,
+    }));
+    useEffect(() => {
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    top: iconTop !== undefined ? `${iconTop}px` : undefined,
+                    left: iconLeft !== undefined ? `${iconLeft}px` : undefined,
+                    bottom: iconBottom !== undefined ? `${iconBottom}px` : undefined,
+                    right: iconRight !== undefined ? `${iconRight}px` : undefined,
+                }, className: "ff-ai-dynamic-icon-container", children: [_jsx(Icon, { className: "ff-ai-dynamic-icon", name: iconName, onClick: openModal, height: iconHeight, width: iconWidth }), _jsx("div", { style: {
+                            top: iconhoverTop !== undefined ? `${iconhoverTop}px` : undefined,
+                            left: iconhoverLeft !== undefined ? `${iconhoverLeft}px` : undefined,
+                            bottom: iconhoverBottom !== undefined
+                                ? `${iconhoverBottom}px`
+                                : undefined,
+                            right: iconhoverRight !== undefined
+                                ? `${iconhoverRight}px`
+                                : undefined,
+                        }, className: "ff-ai-chat-icon-hover", children: _jsx("div", { className: "ai-hover-leaf", children: _jsx(Typography, { fontWeight: "bold", fontSize: 14, color: "var(--chatbot-leaf-text)", children: hoverTitle }) }) })] }), isVisible &&
+                createPortal(_jsx("div", { className: classNames('ff-ai-dynamic-modal', { open: isOpen }), style: {
+                        top: modalTop !== undefined ? `${modalTop}px` : undefined,
+                        left: modalLeft !== undefined ? `${modalLeft}px` : undefined,
+                        bottom: modalBottom !== undefined ? `${modalBottom}px` : undefined,
+                        right: modalRight !== undefined ? `${modalRight}px` : undefined,
+                        position: 'fixed',
+                        height: modalHeight,
+                        width: modalWidth,
+                    }, children: _jsxs("div", { className: "ff-ai-dynamic-modal-content", children: [headerContent && (_jsx("div", { className: "ff-ai-dynamic-modal-header", children: headerContent })), _jsx("div", { className: "ff-ai-dynamic-modal-body", children: children }), footerContent && (_jsx("div", { className: "ff-ai-dynamic-modal-footer", children: footerContent }))] }) }), document.body)] }));
+});
+export default ChatModalAi;
+//# sourceMappingURL=ChatModalAi.js.map

package/lib/components/Checkbox/Checkbox.js

@@ -1 +1,23 @@
-import{jsxs as e,jsx as c}from"react/jsx-runtime";import{useState as o,useEffect as a}from"react";import"./Checkbox.scss.js";import s from"../../_virtual/index.js";import r from"../Icon/Icon.js";import"../../assets/styles/_colors.scss.js";import t from"../Typography/Typography.js";const i=({id:i,name:f,label:l,disabled:n=!1,checked:h=!1,partial:m=!1,onChange:p,variant:b,isDefaultHover:d=!1,labelFontSize:k=12})=>{const[x,y]=o(h);return a(()=>{y(h)},[h]),e("label",{className:"ff-checkbox--overlay",htmlFor:i,children:[c("input",{type:"checkbox",className:"ff-checkbox-input",id:i,name:f,checked:x,onChange:p,disabled:n}),c("span",{className:s("ff-checkbox-custom",{"ff-checkbox-checked":x,"ff-storybook-checkbox--partial":m&&!x,[`ff-checkbox--${b}`]:b,[`ff-checkbox-checked--${b}`]:x&&b,"ff-checkbox-hover-shadow":d,"ff-checkbox-disabled":n}),children:x&&c(r,{name:"tick",color:"var(--primary-icon-color)",className:"ff-tick-icon"})}),l&&c(t,{as:"span",fontSize:k,children:l})]})};export{i as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './Checkbox.scss';
+import classNames from 'classnames';
+import Icon from '../Icon';
+import '../../assets/styles/_colors.scss';
+import Typography from '../Typography';
+const Checkbox = ({ id, name, label, disabled = false, checked: initialChecked = false, partial = false, onChange, variant, isDefaultHover = false, labelFontSize = 12, }) => {
+    const [checked, setChecked] = useState(initialChecked);
+    useEffect(() => {
+        setChecked(initialChecked);
+    }, [initialChecked]);
+    return (_jsxs("label", { className: "ff-checkbox--overlay", htmlFor: id, children: [_jsx("input", { type: "checkbox", className: "ff-checkbox-input", id: id, name: name, checked: checked, onChange: onChange, disabled: disabled }), _jsx("span", { className: classNames('ff-checkbox-custom', {
+                    'ff-checkbox-checked': checked,
+                    'ff-storybook-checkbox--partial': partial && !checked,
+                    [`ff-checkbox--${variant}`]: variant,
+                    [`ff-checkbox-checked--${variant}`]: checked && variant,
+                    'ff-checkbox-hover-shadow': isDefaultHover,
+                    'ff-checkbox-disabled': disabled,
+                }), children: checked && (_jsx(Icon, { name: "tick", color: "var(--primary-icon-color)", className: "ff-tick-icon" })) }), label && _jsx(Typography, { as: "span", fontSize: labelFontSize, children: label })] }));
+};
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map