react-restyle-components 0.4.47 → 0.4.49

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.js

@@ -1 +1,147 @@
-"use strict";import{jsx as t,jsxs as d,Fragment as C}from"react/jsx-runtime";import{useEffect as W,useState as b,useCallback as x}from"react";import{Container as z}from"reactstrap";import e from"../../../tc.module.css";import{cn as o}from"../../../utils";export const ModalConfirm=({visible:g=!1,title:k="Confirm",message:c,submitTitle:v="Send",closeTitle:T="Close",isClick:S=!0,isClose:R=!0,animationDuration:a=200,classNames:n={},styles:l={},onClick:u,onClose:p})=>{const[h,m]=b(!1),[i,y]=b(!1),[A,w]=b(!1);W(()=>{g?(m(!0),requestAnimationFrame(()=>{y(!0)})):h&&s()},[g]);const s=x(()=>{w(!0),y(!1),setTimeout(()=>{m(!1),w(!1)},a)},[a]),f=x(()=>{s(),setTimeout(()=>{p&&p()},a)},[s,p,a]),B=x(()=>{s(),setTimeout(()=>{u&&u()},a)},[s,u,a]),M={opacity:i?1:0,transition:`opacity ${a}ms ease-out`,backdropFilter:i?"blur(4px)":"blur(0px)",WebkitBackdropFilter:i?"blur(4px)":"blur(0px)"},j={opacity:i?1:0,transform:i?"scale(1) translateY(0)":"scale(0.95) translateY(-10px)",transition:`opacity ${a}ms ease-out, transform ${a}ms ease-out`};return t(C,{children:t(z,{children:h&&d(C,{children:[t("div",{className:o(e.fixed,e["inset-0"],e["z-40"],e["bg-black"],n.overlay),style:{backgroundColor:"rgba(0, 0, 0, 0.5)",...M,...l.overlay},onClick:f}),t("div",{className:o(e.flex,e["justify-center"],e["items-center"],e["overflow-x-hidden"],e["overflow-y-auto"],e.fixed,e["inset-0"],e["z-50"],e["outline-none"],e["focus:outline-none"],e["p-4"],n.container),style:l.container,children:t("div",{className:o(e.relative,e["w-full"],n.wrapper),style:{maxWidth:"28rem",...j,...l.wrapper},children:d("div",{className:o(e["border-0"],e["rounded-lg"],e["shadow-lg"],e.relative,e.flex,e["flex-col"],e["w-full"],e["bg-white"],e["outline-none"],e["focus:outline-none"],n.content),style:{boxShadow:"0 25px 50px -12px rgba(0, 0, 0, 0.25)",borderRadius:"16px",...l.content},children:[d("div",{className:o(e.flex,e["items-center"],e["justify-between"],e["p-4"],e["border-b"],e["border-solid"],e["border-gray-300"],n.header),style:{borderTopLeftRadius:"16px",borderTopRightRadius:"16px",background:"linear-gradient(to right, #f8fafc, #f1f5f9)",...l.header},children:[t("h3",{className:o(e["text-xl"],e["font-semibold"],n.title),style:{color:"#1e293b",margin:0,...l.title},children:k}),t("button",{className:o(e.flex,e["items-center"],e["justify-center"],e["border-0"],e["outline-none"],e["focus:outline-none"],n.closeButton),style:{width:"32px",height:"32px",borderRadius:"8px",backgroundColor:"transparent",color:"#64748b",fontSize:"24px",lineHeight:1,cursor:"pointer",transition:"all 0.15s ease",...l.closeButton},onMouseEnter:r=>{r.currentTarget.style.backgroundColor="#fee2e2",r.currentTarget.style.color="#dc2626"},onMouseLeave:r=>{r.currentTarget.style.backgroundColor="transparent",r.currentTarget.style.color="#64748b"},onClick:f,"aria-label":"Close modal",children:t("span",{style:{marginTop:"-2px"},children:"\xD7"})})]}),t("div",{className:o(e.flex,e["p-4"],n.body),style:{padding:"24px",...l.body},children:t("div",{className:o(e.flex,e["w-full"]),children:typeof c=="string"?t("span",{style:{color:"#475569",fontSize:"15px",lineHeight:1.6},children:c}):c})}),d("div",{className:o(e.flex,e["items-center"],e["justify-end"],e["p-4"],e["border-t"],e["border-solid"],e["border-gray-300"],n.footer),style:{borderBottomLeftRadius:"16px",borderBottomRightRadius:"16px",backgroundColor:"#f8fafc",gap:"12px",flexWrap:"wrap",...l.footer},children:[R&&t("button",{className:o(n.cancelButton),type:"button",style:{backgroundColor:"#e2e8f0",color:"#475569",fontWeight:600,fontSize:"14px",padding:"10px 20px",borderRadius:"8px",border:"none",cursor:"pointer",transition:"all 0.15s ease",minWidth:"100px",...l.cancelButton},onMouseEnter:r=>{r.currentTarget.style.backgroundColor="#cbd5e1"},onMouseLeave:r=>{r.currentTarget.style.backgroundColor="#e2e8f0"},onClick:f,children:T}),S&&t("button",{className:o(n.submitButton),type:"button",style:{background:"linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",color:"white",fontWeight:600,fontSize:"14px",padding:"10px 20px",borderRadius:"8px",border:"none",cursor:"pointer",transition:"all 0.15s ease",boxShadow:"0 4px 12px rgba(34, 197, 94, 0.3)",minWidth:"100px",...l.submitButton},onMouseEnter:r=>{r.currentTarget.style.transform="translateY(-1px)",r.currentTarget.style.boxShadow="0 6px 16px rgba(34, 197, 94, 0.4)"},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(0)",r.currentTarget.style.boxShadow="0 4px 12px rgba(34, 197, 94, 0.3)"},onClick:B,children:v})]})]})})})]})})})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback } from 'react';
+import { Container } from 'reactstrap';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, animationDuration = 200, classNames = {}, styles = {}, onClick, onClose, }) => {
+    const [showModal, setShowModal] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    useEffect(() => {
+        if (visible) {
+            setShowModal(true);
+            // Trigger animation after mount
+            requestAnimationFrame(() => {
+                setIsAnimating(true);
+            });
+        }
+        else if (showModal) {
+            handleCloseAnimation();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
+    const handleCloseAnimation = useCallback(() => {
+        setIsClosing(true);
+        setIsAnimating(false);
+        setTimeout(() => {
+            setShowModal(false);
+            setIsClosing(false);
+        }, animationDuration);
+    }, [animationDuration]);
+    const handleClose = useCallback(() => {
+        handleCloseAnimation();
+        setTimeout(() => {
+            onClose && onClose();
+        }, animationDuration);
+    }, [handleCloseAnimation, onClose, animationDuration]);
+    const handleSubmit = useCallback(() => {
+        handleCloseAnimation();
+        setTimeout(() => {
+            onClick && onClick();
+        }, animationDuration);
+    }, [handleCloseAnimation, onClick, animationDuration]);
+    // Animation styles
+    const overlayAnimationStyle = {
+        opacity: isAnimating ? 1 : 0,
+        transition: `opacity ${animationDuration}ms ease-out`,
+        backdropFilter: isAnimating ? 'blur(4px)' : 'blur(0px)',
+        WebkitBackdropFilter: isAnimating ? 'blur(4px)' : 'blur(0px)',
+    };
+    const contentAnimationStyle = {
+        opacity: isAnimating ? 1 : 0,
+        transform: isAnimating
+            ? 'scale(1) translateY(0)'
+            : 'scale(0.95) translateY(-10px)',
+        transition: `opacity ${animationDuration}ms ease-out, transform ${animationDuration}ms ease-out`,
+    };
+    return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: {
+                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                            ...overlayAnimationStyle,
+                            ...styles.overlay,
+                        }, onClick: handleClose }), _jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], s['p-4'], classNames.container), style: styles.container, children: _jsx("div", { className: cn(s['relative'], s['w-full'], classNames.wrapper), style: {
+                                maxWidth: '28rem',
+                                ...contentAnimationStyle,
+                                ...styles.wrapper,
+                            }, children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-full'], s['bg-white'], s['outline-none'], s['focus:outline-none'], classNames.content), style: {
+                                    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+                                    borderRadius: '16px',
+                                    ...styles.content,
+                                }, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-4'], s['border-b'], s['border-solid'], s['border-gray-300'], classNames.header), style: {
+                                            borderTopLeftRadius: '16px',
+                                            borderTopRightRadius: '16px',
+                                            background: 'linear-gradient(to right, #f8fafc, #f1f5f9)',
+                                            ...styles.header,
+                                        }, children: [_jsx("h3", { className: cn(s['text-xl'], s['font-semibold'], classNames.title), style: {
+                                                    color: '#1e293b',
+                                                    margin: 0,
+                                                    ...styles.title,
+                                                }, children: title }), _jsx("button", { className: cn(s['flex'], s['items-center'], s['justify-center'], s['border-0'], s['outline-none'], s['focus:outline-none'], classNames.closeButton), style: {
+                                                    width: '32px',
+                                                    height: '32px',
+                                                    borderRadius: '8px',
+                                                    backgroundColor: 'transparent',
+                                                    color: '#64748b',
+                                                    fontSize: '24px',
+                                                    lineHeight: 1,
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.15s ease',
+                                                    ...styles.closeButton,
+                                                }, onMouseEnter: (e) => {
+                                                    e.currentTarget.style.backgroundColor = '#fee2e2';
+                                                    e.currentTarget.style.color = '#dc2626';
+                                                }, onMouseLeave: (e) => {
+                                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                                    e.currentTarget.style.color = '#64748b';
+                                                }, onClick: handleClose, "aria-label": "Close modal", children: _jsx("span", { style: { marginTop: '-2px' }, children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-4'], classNames.body), style: {
+                                            padding: '24px',
+                                            ...styles.body,
+                                        }, children: _jsx("div", { className: cn(s['flex'], s['w-full']), children: typeof message === 'string' ? (_jsx("span", { style: {
+                                                    color: '#475569',
+                                                    fontSize: '15px',
+                                                    lineHeight: 1.6,
+                                                }, children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-4'], s['border-t'], s['border-solid'], s['border-gray-300'], classNames.footer), style: {
+                                            borderBottomLeftRadius: '16px',
+                                            borderBottomRightRadius: '16px',
+                                            backgroundColor: '#f8fafc',
+                                            gap: '12px',
+                                            flexWrap: 'wrap',
+                                            ...styles.footer,
+                                        }, children: [isClose && (_jsx("button", { className: cn(classNames.cancelButton), type: "button", style: {
+                                                    backgroundColor: '#e2e8f0',
+                                                    color: '#475569',
+                                                    fontWeight: 600,
+                                                    fontSize: '14px',
+                                                    padding: '10px 20px',
+                                                    borderRadius: '8px',
+                                                    border: 'none',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.15s ease',
+                                                    minWidth: '100px',
+                                                    ...styles.cancelButton,
+                                                }, onMouseEnter: (e) => {
+                                                    e.currentTarget.style.backgroundColor = '#cbd5e1';
+                                                }, onMouseLeave: (e) => {
+                                                    e.currentTarget.style.backgroundColor = '#e2e8f0';
+                                                }, onClick: handleClose, children: closeTitle })), isClick && (_jsx("button", { className: cn(classNames.submitButton), type: "button", style: {
+                                                    background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
+                                                    color: 'white',
+                                                    fontWeight: 600,
+                                                    fontSize: '14px',
+                                                    padding: '10px 20px',
+                                                    borderRadius: '8px',
+                                                    border: 'none',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.15s ease',
+                                                    boxShadow: '0 4px 12px rgba(34, 197, 94, 0.3)',
+                                                    minWidth: '100px',
+                                                    ...styles.submitButton,
+                                                }, onMouseEnter: (e) => {
+                                                    e.currentTarget.style.transform = 'translateY(-1px)';
+                                                    e.currentTarget.style.boxShadow =
+                                                        '0 6px 16px rgba(34, 197, 94, 0.4)';
+                                                }, onMouseLeave: (e) => {
+                                                    e.currentTarget.style.transform = 'translateY(0)';
+                                                    e.currentTarget.style.boxShadow =
+                                                        '0 4px 12px rgba(34, 197, 94, 0.3)';
+                                                }, onClick: handleSubmit, children: submitTitle }))] })] }) }) })] })) }) }));
+};

package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.js

@@ -1 +1,12 @@
-"use strict";import{jsx as r,jsxs as p}from"react/jsx-runtime";import{useCallback as l,useRef as m,useState as f}from"react";import{HexColorPicker as u}from"react-colorful";import{useClickOutside as d}from"../../../hooks";import"./color-picker.css";export const ColorPicker=({color:s,onChange:i,classNames:o={},styles:e={}})=>{const t=m(),[a,c]=f(!1),n=l(()=>c(!1),[]);return d(t,n),p("div",{className:`picker ${o.container||""}`,style:e.container,children:[r("div",{className:`swatch ${o.swatch||""}`,style:{backgroundColor:s,...e.swatch},onClick:()=>c(!0)}),a&&r("div",{className:`popover ${o.popover||""}`,style:e.popover,ref:t,children:r(u,{color:s,onChange:i})})]})};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useClickOutside } from '../../../hooks';
+import './color-picker.css';
+export const ColorPicker = ({ color, onChange, classNames = {}, styles = {} }) => {
+    const popover = useRef();
+    const [isOpen, toggle] = useState(false);
+    const close = useCallback(() => toggle(false), []);
+    useClickOutside(popover, close);
+    return (_jsxs("div", { className: `picker ${classNames.container || ''}`, style: styles.container, children: [_jsx("div", { className: `swatch ${classNames.swatch || ''}`, style: { backgroundColor: color, ...styles.swatch }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: `popover ${classNames.popover || ''}`, style: styles.popover, ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
+};

package/lib/src/core-components/src/components/Picker/color-picker-modal/color-picker-modal.component.js

@@ -1 +1,40 @@
-"use strict";import{jsx as e,jsxs as s,Fragment as w}from"react/jsx-runtime";import{useCallback as d,useRef as y,useState as h,useEffect as O}from"react";import{HexColorPicker as _}from"react-colorful";import{useClickOutside as j}from"../../../hooks";import{TooltipProvider as T,Tooltip as L}from"../../Tooltip";import{DEFAULT_BG_COLOR as c,DEFAULT_TEXT_COLOR as R,STANDARD_COLORS as S}from"../../../helpers/constants";import"./color-picker-modal.css";export const ColorPickerModal=({color:n,isVisible:x=!1,testId:v="color-picker",tooltip:k="",tooltipSide:g="bottom",onChange:l,onNoFill:m,onClose:f})=>{const u=y(),[o,r]=h(n),[a,p]=h(x),i=d(()=>{a&&(p(!1),f&&f(o))},[a,f,o]);j(u,i),O(()=>{a||r(n||c)},[n,a]);const C=d(t=>{r(t),l(t)},[l]),N=d(t=>{r(t),l(t),i()},[l,i]),b=d(()=>{m&&m(c,R),r(c),l(c),i()},[m,l,i]);return s("div",{className:"picker-modal","data-testid":v,children:[e(T,{children:e(L,{content:k,className:"text-white bg-black p-2",side:g,children:e("div",{"data-testid":"swatch",className:`${o!==""?"swatch-modal":"swatch-modal diagonal-line"} z-10`,style:{backgroundColor:o},onClick:()=>p(!0)})})}),a&&s(w,{children:[e("div",{className:"flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ",children:e("div",{className:"relative w-auto h-auto mx-auto my-auto bg-white rounded-md",children:e("div",{className:"border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none",children:s("div",{className:"flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal",ref:u,children:[e(_,{"data-testid":"colorPicker",color:o,onChange:C}),s("div",{className:"flex flex-col mt-4",children:[e("span",{className:"font-serif",children:"Standard Colors"}),e("div",{className:"flex gap-2 mt-2",children:S?.map(t=>e("div",{className:"rounded-full w-8 h-8 cursor-pointer gap-2",style:{backgroundColor:t},onClick:()=>N(t),"data-testid":`standard-color-${t}`},t))})]}),e("div",{className:"flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer",onClick:b,"data-testid":"no-fill",children:e("span",{className:"font-serif",children:"No Fill"})})]})})})}),e("div",{className:"opacity-25 fixed inset-0 z-40 bg-black"})]})]})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useClickOutside } from '../../../hooks';
+import { TooltipProvider, Tooltip } from '../../Tooltip';
+import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../../helpers/constants';
+import './color-picker-modal.css';
+export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {
+    const popover = useRef();
+    const [currentColor, setCurrentColor] = useState(color);
+    const [isOpen, toggle] = useState(isVisible);
+    const close = useCallback(() => {
+        if (isOpen) {
+            toggle(false);
+            onClose && onClose(currentColor);
+        }
+    }, [isOpen, onClose, currentColor]);
+    useClickOutside(popover, close);
+    useEffect(() => {
+        if (!isOpen) {
+            setCurrentColor(color || DEFAULT_BG_COLOR);
+        }
+    }, [color, isOpen]);
+    const handleColorChange = useCallback((color) => {
+        setCurrentColor(color);
+        onChange(color);
+    }, [onChange]);
+    const handleStandardColorClick = useCallback((color) => {
+        setCurrentColor(color);
+        onChange(color);
+        close();
+    }, [onChange, close]);
+    const handleNoFillClick = useCallback(() => {
+        onNoFill && onNoFill(DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR);
+        setCurrentColor(DEFAULT_BG_COLOR);
+        onChange(DEFAULT_BG_COLOR);
+        close();
+    }, [onNoFill, onChange, close]);
+    return (_jsxs("div", { className: "picker-modal", "data-testid": testId, children: [_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: tooltip, className: 'text-white bg-black p-2', side: tooltipSide, children: _jsx("div", { "data-testid": "swatch", className: `${currentColor !== '' ? 'swatch-modal' : 'swatch-modal diagonal-line'} z-10`, style: { backgroundColor: currentColor }, onClick: () => toggle(true) }) }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ", children: _jsx("div", { className: "relative w-auto h-auto mx-auto my-auto bg-white rounded-md", children: _jsx("div", { className: "border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none", children: _jsxs("div", { className: "flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal", ref: popover, children: [_jsx(HexColorPicker, { "data-testid": "colorPicker", color: currentColor, onChange: handleColorChange }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("span", { className: "font-serif", children: "Standard Colors" }), _jsx("div", { className: "flex gap-2 mt-2", children: STANDARD_COLORS?.map((color) => (_jsx("div", { className: "rounded-full w-8 h-8 cursor-pointer gap-2", style: { backgroundColor: color }, onClick: () => handleStandardColorClick(color), "data-testid": `standard-color-${color}` }, color))) })] }), _jsx("div", { className: "flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer", onClick: handleNoFillClick, "data-testid": "no-fill", children: _jsx("span", { className: "font-serif", children: "No Fill" }) })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
+};

package/lib/src/core-components/src/components/Picker/index.js

@@ -1 +1,2 @@
-"use strict";export*from"./color-picker/color-picker.component";export*from"./color-picker-modal/color-picker-modal.component";
+export * from './color-picker/color-picker.component';
+export * from './color-picker-modal/color-picker-modal.component';

package/lib/src/core-components/src/components/Selection/index.js

@@ -1 +1,4 @@
-"use strict";export*from"./multi-select/multi-select.component";export*from"./multi-select-with-field/multi-select-with-field.component";export*from"./multi-selection-dropdown/multi-selection-dropdown.component";export*from"./single-select/single-select.component";
+export * from './multi-select/multi-select.component';
+export * from './multi-select-with-field/multi-select-with-field.component';
+export * from './multi-selection-dropdown/multi-selection-dropdown.component';
+export * from './single-select/single-select.component';

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.js

@@ -1 +1,49 @@
-"use strict";import{jsx as o,jsxs as p,Fragment as v}from"react/jsx-runtime";import{useState as g,useEffect as b,useRef as O}from"react";import e from"../../../tc.module.css";import{cn as n}from"../../../utils";export const MultiSelect=({options:a=[],selectedItems:f=[],hasError:h=!1,classNames:t={},styles:r={},onSelect:w})=>{const[d,c]=g([]),[i,x]=g(!1),k=l=>{b(()=>{function s(u){l.current&&!l.current.contains(u.target)&&i&&x(!1)}return document.addEventListener("mousedown",s),()=>{document.removeEventListener("mousedown",s)}},[l,i])};b(()=>{c(f)},[f]);const m=O(null);return k(m),o(v,{children:p("div",{className:n(e.flex,e["dark:bg-boxdark"],e["dark:text-white"],e["flex-col"],e["w-full"],e["rounded-md"],e.border,{[e["border-red"]]:h,[e["border-gray-300"]]:!h},t.container),style:r.container,ref:m,children:[o("span",{className:n(e["p-2"],e["shadow-sm"],t.trigger),style:r.trigger,onClick:()=>{x(!i)},children:d?.length>0?d?.join(","):"Select"}),o("div",{className:n(e.flex,{[e.show]:i,[e.hidden]:!i},e.relative),children:a?a?.length>0&&o("div",{className:n(e.flex,e.absolute,e["rounded-sm"],e["w-full"],t.dropdown),style:{zIndex:999,...r.dropdown},children:o("ul",{className:n(e.flex,e["flex-col"],e["gap-1"],e["w-full"],e["bg-white"],e["shadow-md"],e["rounded-md"],e.border,e["border-gray-200"],e["list-none"],e["m-0"],e["p-0"],t.list),style:r.list,children:a?.map((l,s)=>o("li",{className:n(e.flex,e["gap-2"],e["p-2"],t.listItem),style:r.listItem,children:p("label",{className:n(e.flex,e["gap-2"],t.label),style:r.label,children:[o("input",{className:n(e.flex,e["h-4"],e["w-4"],t.checkbox),style:r.checkbox,type:"checkbox",checked:d?.includes(l),onChange:()=>{d?.includes(l)?c(d?.filter(u=>u!=l)):d?.length>0?c(d?.concat([l])):c([l])},onBlur:()=>{i||w(d)}}),o("span",{className:n(e.flex,e["h-4"],t.itemText),style:r.itemText,children:l})]})},s))})}):null})]})})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, classNames = {}, styles = {}, onSelect, }) => {
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    useEffect(() => {
+        setSelectedOptions(selectedItems);
+    }, [selectedItems]);
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
+                [s['border-red']]: hasError,
+                [s['border-gray-300']]: !hasError,
+            }, classNames.container), style: styles.container, ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['shadow-sm'], classNames.trigger), style: styles.trigger, onClick: () => {
+                        setIsListOpen(!isListOpen);
+                    }, children: selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select' }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full'], classNames.dropdown), style: { zIndex: 999, ...styles.dropdown }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0'], classNames.list), style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], classNames.listItem), style: styles.listItem, children: _jsxs("label", { className: cn(s['flex'], s['gap-2'], classNames.label), style: styles.label, children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4'], classNames.checkbox), style: styles.checkbox, type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
+                                                    if (selectedOptions?.includes(item)) {
+                                                        setSelectedOptions(selectedOptions?.filter((e) => e != item));
+                                                    }
+                                                    else {
+                                                        if (selectedOptions?.length > 0) {
+                                                            setSelectedOptions(selectedOptions?.concat([item]));
+                                                        }
+                                                        else {
+                                                            setSelectedOptions([item]);
+                                                        }
+                                                    }
+                                                }, onBlur: () => {
+                                                    if (!isListOpen)
+                                                        onSelect(selectedOptions);
+                                                } }), _jsx("span", { className: cn(s['flex'], s['h-4'], classNames.itemText), style: styles.itemText, children: item })] }) }, index))) }) }))
+                        : null })] }) }));
+};

package/lib/src/core-components/src/components/Selection/multi-select-with-field/multi-select-with-field.component.js

@@ -1 +1,58 @@
-"use strict";import{jsx as l,jsxs as h,Fragment as w}from"react/jsx-runtime";import{useState as x,useEffect as g,useRef as N}from"react";import k from"lodash";import e from"../../../tc.module.css";import{cn as c}from"../../../utils";export const MultiSelectWithField=({displayField:r="",options:m=[],selectedItems:i=[],hasError:p=!1,onSelect:C})=>{const[s,a]=x([]),[o,d]=x(!1),b=t=>{g(()=>{function f(n){t.current&&!t.current.contains(n.target)&&o&&d(!1)}return document.addEventListener("mousedown",f),()=>{document.removeEventListener("mousedown",f)}},[t,o])};g(()=>{a(i)},[i]);const u=N(null);return b(u),l(w,{children:h("div",{className:c(e.flex,e["dark:bg-boxdark"],e["dark:text-white"],e["flex-col"],e["w-full"],e["rounded-md"],e.border,{[e["border-red"]]:p,[e["border-gray-300"]]:!p}),ref:u,children:[l("span",{className:c(e["p-2"],e["shadow-sm"]),onClick:()=>{d(!o)},children:s?.length>0?`${s?.length} Items`:"Select"}),l("div",{className:c(e.flex,e["mx-2"],o?e.show:e.hidden),children:m?m?.length>0&&l("ul",{className:c(e.flex,e["flex-col"],e["gap-1"],e["p-2"]),children:m?.map((t,f)=>h("li",{className:c(e.flex,e["items-center"]),children:[l("input",{className:c(e.flex,e["bg-black"]),type:"checkbox",checked:!k.isEmpty(s?.find(n=>n[r]?.toUpperCase()==t[r]?.toUpperCase())),onChange:()=>{k.isEmpty(s?.find(n=>n[r]?.toUpperCase()==t[r]?.toUpperCase()))?s?.length>0?a(s?.concat([t])):a([t]):a(s?.filter(n=>n[r]?.toUpperCase()!=t[r]?.toUpperCase()))},onBlur:()=>{o||C(s)}})," ",l("span",{className:c(e.flex,e["ml-2"],e["dark:text-white"],e["text-center"]),children:t[r]})]},f))}):null})]})})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import { useState, useEffect, useRef } from 'react';
+import _ from 'lodash';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    useEffect(() => {
+        setSelectedOptions(selectedItems);
+    }, [selectedItems]);
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
+                [s['border-red']]: hasError,
+                [s['border-gray-300']]: !hasError,
+            }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['shadow-sm']), onClick: () => {
+                        setIsListOpen(!isListOpen);
+                    }, children: selectedOptions?.length > 0
+                        ? `${selectedOptions?.length} Items`
+                        : 'Select' }), _jsx("div", { className: cn(s['flex'], s['mx-2'], isListOpen ? s['show'] : s['hidden']), children: options
+                        ? options?.length > 0 && (_jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['p-2']), children: options?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['items-center']), children: [_jsx("input", { className: cn(s['flex'], s['bg-black']), type: "checkbox", checked: !_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
+                                            item[displayField]?.toUpperCase()))
+                                            ? true
+                                            : false, onChange: () => {
+                                            if (!_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
+                                                item[displayField]?.toUpperCase()))) {
+                                                setSelectedOptions(selectedOptions?.filter((e) => e[displayField]?.toUpperCase() !=
+                                                    item[displayField]?.toUpperCase()));
+                                            }
+                                            else {
+                                                if (selectedOptions?.length > 0) {
+                                                    setSelectedOptions(selectedOptions?.concat([item]));
+                                                }
+                                                else {
+                                                    setSelectedOptions([item]);
+                                                }
+                                            }
+                                        }, onBlur: () => {
+                                            if (!isListOpen)
+                                                onSelect(selectedOptions);
+                                        } }), ' ', _jsx("span", { className: cn(s['flex'], s['ml-2'], s['dark:text-white'], s['text-center']), children: item[displayField] })] }, index))) }))
+                        : null })] }) }));
+};

package/lib/src/core-components/src/components/Selection/multi-selection-dropdown/multi-selection-dropdown.component.js

@@ -1 +1,43 @@
-"use strict";import{jsx as s,jsxs as n}from"react/jsx-runtime";import{useEffect as b,useRef as v,useState as i}from"react";import e from"../../../tc.module.css";import{cn as r}from"../../../utils";import{Icon as d}from"../../Icon/Icon";export const MultiSelectionDropdown=({options:m=[],onSelect:w,onClear:p})=>{const[o,u]=i([]),[f,h]=i(!1),[a,x]=i(""),c=v(null);return b(()=>{const t=l=>{c.current&&!c.current.contains(l.target)&&h(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[]),n("div",{className:r(e.relative),ref:c,children:[n("button",{onClick:()=>h(!f),className:r(e["w-full"],e.flex,e["justify-between"],e["items-center"],e["px-2"],e["py-2"],e.border,e["border-gray-300"],e["bg-white"],e["rounded-md"],e["shadow-sm"],e["focus:outline-none"]),children:[s("div",{className:r(e.flex,e["flex-wrap"],e["gap-2"]),children:o?.length>0?o?.map((t,l)=>s("span",{className:r(e["bg-blue-500"],e["text-white"],e["text-sm"],e["px-2"],e["py-1"],e.rounded),children:t},l?.toString())):s("span",{className:r(e["text-gray-500"]),children:"Select Items"})}),s(d,{nameIcon:"FaChevronDown",propsIcon:{color:"#ffffff",size:18}})]}),f&&n("div",{className:r(e.absolute,e["z-10"],e["w-full"],e["mt-1"],e["bg-white"],e.border,e["border-gray-300"],e["rounded-md"],e["shadow-lg"],e["max-h-60"],e["overflow-y-auto"]),children:[s("div",{className:r(e["p-2"],e["top-0"],e["bg-white"],e["z-10"],e["border-b"],e.relative),children:n("div",{className:r(e.flex,e["items-center"],e.border,e["border-gray-300"],e["rounded-md"]),children:[s("input",{type:"text",placeholder:"Search...",value:a,onChange:t=>x(t.target.value),className:r(e.flex,e["w-full"],e["p-2"],e["focus:outline-none"])}),o?.length>0&&s("button",{onClick:()=>{u([]),x(""),p&&p()},className:r(e.flex,e["w-fit"],e["pr-2"],e["text-sm"],e["hover:text-red"],e["whitespace-nowrap"]),children:"Clear Selection"})]})}),s("ul",{className:r(e["py-2"]),children:m?.filter(t=>t.toLowerCase().includes(a.toLowerCase()))?.length>0?m?.filter(t=>t.toLowerCase().includes(a.toLowerCase())).map((t,l)=>n("li",{onClick:()=>{u([...o,t]),w([...o,t])},className:r(e.flex,e["items-center"],e["justify-between"],e["px-4"],e["py-2"],e["cursor-pointer"],e["hover:bg-gray-100"]),children:[n("div",{className:r(e.flex,e["items-center"],e["gap-2"]),children:[s(d,{nameIcon:"FaAlignJustify",propsIcon:{color:"#000000",size:18}}),s("span",{children:t})]}),o?.some(g=>g===t)&&s(d,{nameIcon:"FaCheck",propsIcon:{color:"#000000",size:18}})]},l?.toString())):s("li",{className:r(e["px-4"],e["py-2"],e["text-gray-500"],e["text-sm"]),children:"No items found"})})]})]})};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+import { Icon } from '../../Icon/Icon';
+export const MultiSelectionDropdown = ({ options = [], onSelect, onClear, }) => {
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const dropdownRef = useRef(null);
+    // **Close dropdown if user clicks outside**
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    return (_jsxs("div", { className: cn(s['relative']), ref: dropdownRef, children: [_jsxs("button", { onClick: () => setIsOpen(!isOpen), className: cn(s['w-full'], s['flex'], s['justify-between'], s['items-center'], s['px-2'], s['py-2'], s['border'], s['border-gray-300'], s['bg-white'], s['rounded-md'], s['shadow-sm'], s['focus:outline-none']), children: [_jsx("div", { className: cn(s['flex'], s['flex-wrap'], s['gap-2']), children: selectedItems?.length > 0 ? (selectedItems?.map((item, key) => (_jsx("span", { className: cn(s['bg-blue-500'], s['text-white'], s['text-sm'], s['px-2'], s['py-1'], s['rounded']), children: item }, key?.toString())))) : (_jsx("span", { className: cn(s['text-gray-500']), children: "Select Items" })) }), _jsx(Icon, { nameIcon: 'FaChevronDown', propsIcon: {
+                            color: '#ffffff',
+                            size: 18,
+                        } })] }), isOpen && (_jsxs("div", { className: cn(s['absolute'], s['z-10'], s['w-full'], s['mt-1'], s['bg-white'], s['border'], s['border-gray-300'], s['rounded-md'], s['shadow-lg'], s['max-h-60'], s['overflow-y-auto']), children: [_jsx("div", { className: cn(s['p-2'], s['top-0'], s['bg-white'], s['z-10'], s['border-b'], s['relative']), children: _jsxs("div", { className: cn(s['flex'], s['items-center'], s['border'], s['border-gray-300'], s['rounded-md']), children: [_jsx("input", { type: "text", placeholder: "Search...", value: search, onChange: (e) => setSearch(e.target.value), className: cn(s['flex'], s['w-full'], s['p-2'], s['focus:outline-none']) }), selectedItems?.length > 0 && (_jsx("button", { onClick: () => {
+                                        setSelectedItems([]);
+                                        setSearch('');
+                                        onClear && onClear();
+                                    }, className: cn(s['flex'], s['w-fit'], s['pr-2'], s['text-sm'], s['hover:text-red'], s['whitespace-nowrap']), children: "Clear Selection" }))] }) }), _jsx("ul", { className: cn(s['py-2']), children: options?.filter((child) => child.toLowerCase().includes(search.toLowerCase()))?.length > 0 ? (options
+                            ?.filter((child) => child.toLowerCase().includes(search.toLowerCase()))
+                            .map((item, key) => (_jsxs("li", { onClick: () => {
+                                setSelectedItems([...selectedItems, item]);
+                                onSelect([...selectedItems, item]);
+                            }, className: cn(s['flex'], s['items-center'], s['justify-between'], s['px-4'], s['py-2'], s['cursor-pointer'], s['hover:bg-gray-100']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['gap-2']), children: [_jsx(Icon, { nameIcon: 'FaAlignJustify', propsIcon: {
+                                                color: '#000000',
+                                                size: 18,
+                                            } }), _jsx("span", { children: item })] }), selectedItems?.some((selected) => selected === item) && (_jsx(Icon, { nameIcon: 'FaCheck', propsIcon: {
+                                        color: '#000000',
+                                        size: 18,
+                                    } }))] }, key?.toString())))) : (_jsx("li", { className: cn(s['px-4'], s['py-2'], s['text-gray-500'], s['text-sm']), children: "No items found" })) })] }))] }));
+};

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.js

@@ -1 +1,87 @@
-"use strict";import{jsx as l,jsxs as v,Fragment as O}from"react/jsx-runtime";import{useState as p,useEffect as x,useRef as F}from"react";import{Icon as E}from"../../Icon/Icon";import e from"../../../tc.module.css";import{cn as i}from"../../../utils";export const SingleSelect=({options:d=[],displayKey:f="title",displayValue:h="",hasError:b=!1,className:L="",style:j={},classNames:s={},styles:a={},onSelect:g})=>{const[I,w]=p(""),[r,m]=p(!1),[c,u]=p(-1),C=t=>{x(()=>{function n(o){t.current&&!t.current.contains(o.target)&&r&&m(!1)}return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[t,r])},k=F(null);return C(k),x(()=>{if(h&&w(h),!r)return;const t=n=>{if(n.key==="ArrowDown")u(o=>o<d.length-1?o+1:0);else if(n.key==="ArrowUp")u(o=>o>0?o-1:d.length-1);else if(n.key==="Enter"&&c>=0){const o=d[c];w(o[f]),g(o),m(!1)}};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[r,c,d,f,g,h]),x(()=>{r&&u(-1)},[r]),l(O,{children:v("div",{className:i(e.flex,e["dark:bg-boxdark"],e["dark:text-white"],e["flex-col"],e["w-full"],e["rounded-md"],e.border,{[e["border-red"]]:b,[e["border-gray-300"]]:!b},L,s.container),ref:k,style:{...j,...a.container},children:[v("span",{className:i(e["p-2"],e["shadow-sm"],e.flex,e["justify-between"],e["items-center"],s.trigger),onClick:()=>{m(!r)},tabIndex:0,style:{cursor:"pointer",...a.trigger},children:[I||"Select",l("span",{className:s.icon,style:a.icon,children:r?l(E,{nameIcon:"FaChevronUp",propsIcon:{size:16}}):l(E,{nameIcon:"FaChevronDown",propsIcon:{size:16}})})]}),l("div",{className:i(e.flex,{[e.show]:r,[e.hidden]:!r},e.relative),children:d?d?.length>0&&l("div",{className:i(e.flex,e.absolute,e["rounded-sm"],e["w-full"],s.dropdown),style:{zIndex:999,top:"calc(100% + 0.5rem)",left:0,right:0,margin:0,padding:0,animation:"fadeIn 0.15s ease-out",transformOrigin:"top",...a.dropdown},children:l("ul",{className:i(e.flex,e["flex-col"],e["gap-1"],e["w-full"],e["bg-white"],e["shadow-md"],e["rounded-md"],e.border,e["border-gray-200"],e["list-none"],e["m-0"],e["p-0"],s.list),style:a.list,children:d?.map((t,n)=>l("li",{className:i(e.flex,e["gap-2"],e["p-2"],c===n&&e["bg-blue-100"],s.listItem),style:{cursor:"pointer",background:c===n?"#e0e7ff":void 0,...a.listItem},onClick:()=>{w(t[f]),g(t),m(!1)},onMouseEnter:()=>u(n),children:l("label",{className:i(e.flex,e["gap-2"]),children:l("span",{className:i(e.flex,e["h-4"],s.itemText),style:a.itemText,children:t[f]})})},n))})}):null})]})})};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Icon } from '../../Icon/Icon';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const SingleSelect = ({ options = [], displayKey = 'title', displayValue = '', hasError = false, className = '', style = {}, classNames = {}, styles = {}, onSelect, }) => {
+    const [value, setValue] = useState('');
+    const [isListOpen, setIsListOpen] = useState(false);
+    // Arrow navigation state
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    // Keyboard navigation
+    useEffect(() => {
+        if (displayValue)
+            setValue(displayValue);
+        if (!isListOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+            }
+            else if (e.key === 'ArrowUp') {
+                setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+            }
+            else if (e.key === 'Enter' && highlightedIndex >= 0) {
+                const item = options[highlightedIndex];
+                setValue(item[displayKey]);
+                onSelect(item);
+                setIsListOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        isListOpen,
+        highlightedIndex,
+        options,
+        displayKey,
+        onSelect,
+        displayValue,
+    ]);
+    // Reset highlight when list opens/closes
+    useEffect(() => {
+        if (isListOpen)
+            setHighlightedIndex(-1);
+    }, [isListOpen]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
+                [s['border-red']]: hasError,
+                [s['border-gray-300']]: !hasError,
+            }, className, classNames.container), ref: wrapperRef, style: { ...style, ...styles.container }, children: [_jsxs("span", { className: cn(s['p-2'], s['shadow-sm'], s['flex'], s['justify-between'], s['items-center'], classNames.trigger), onClick: () => {
+                        setIsListOpen(!isListOpen);
+                    }, tabIndex: 0, style: { cursor: 'pointer', ...styles.trigger }, children: [value ? value : 'Select', _jsx("span", { className: classNames.icon, style: styles.icon, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: { size: 16 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: { size: 16 } })) })] }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full'], classNames.dropdown), style: {
+                                zIndex: 999,
+                                top: 'calc(100% + 0.5rem)',
+                                left: 0,
+                                right: 0,
+                                margin: 0,
+                                padding: 0,
+                                animation: 'fadeIn 0.15s ease-out',
+                                transformOrigin: 'top',
+                                ...styles.dropdown,
+                            }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0'], classNames.list), style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], highlightedIndex === index && s['bg-blue-100'], classNames.listItem), style: {
+                                        cursor: 'pointer',
+                                        background: highlightedIndex === index ? '#e0e7ff' : undefined,
+                                        ...styles.listItem,
+                                    }, onClick: () => {
+                                        setValue(item[displayKey]);
+                                        onSelect(item);
+                                        setIsListOpen(false);
+                                    }, onMouseEnter: () => setHighlightedIndex(index), children: _jsx("label", { className: cn(s['flex'], s['gap-2']), children: _jsx("span", { className: cn(s['flex'], s['h-4'], classNames.itemText), style: styles.itemText, children: item[displayKey] }) }) }, index))) }) }))
+                        : null })] }) }));
+};

package/lib/src/core-components/src/components/Skeleton/Skeleton.js

@@ -1 +1,51 @@
-"use strict";"use client";import{jsx as a,jsxs as f}from"react/jsx-runtime";import{forwardRef as c,useMemo as b}from"react";import{SkeletonElement as h,SkeletonWrapper as _,SkeletonGroupContainer as j,SkeletonCardContainer as G,SkeletonTextContainer as I,avatarSizes as L}from"./elements";const y={xs:{width:40,height:12},sm:{width:80,height:16},md:{width:120,height:20},lg:{width:180,height:24},xl:{width:240,height:32}};export const Skeleton=c(function(o,s){const{width:i,height:l,variant:n="rectangular",animation:r="shimmer",size:t="md",count:e=1,gap:p="10px",duration:m=1500,borderRadius:$,theme:d="light",stagger:C=!1,responsive:v=!1,aspectRatio:x,className:k,style:A,...S}=o,w=i??y[t].width,N=l??y[t].height,R=b(()=>Array(e).fill(null).map((u,z)=>z),[e]);return e===1?a(h,{ref:s,$width:w,$height:N,$variant:n,$animation:r,$duration:m,$borderRadius:$,$theme:d,$responsive:v,$aspectRatio:x,"aria-busy":"true","aria-live":"polite","aria-label":"Loading...",role:"progressbar","data-testid":"skeleton",className:k,style:A,...S}):a(_,{ref:s,$gap:p,$direction:"column","data-testid":"skeleton-wrapper",className:k,...S,children:R.map(u=>a(h,{$width:w,$height:N,$variant:n,$animation:r,$duration:m,$borderRadius:$,$theme:d,$responsive:v,$aspectRatio:x,$staggerIndex:C?u:void 0,"aria-busy":"true",role:"progressbar"},u))})});Skeleton.displayName="Skeleton";export const SkeletonGroup=c(function(o,s){const{children:i,direction:l="column",gap:n="12px",align:r="stretch",wrap:t=!1,responsive:e=!1,className:p,...m}=o;return a(j,{ref:s,$direction:l,$gap:n,$align:r,$wrap:t,$responsive:e,"data-testid":"skeleton-group",className:p,...m,children:i})});SkeletonGroup.displayName="SkeletonGroup";export const SkeletonText=c(function(o,s){const{lines:i=3,lastLineWidth:l="60%",gap:n="10px",animation:r="shimmer",theme:t="light",className:e,...p}=o,m=b(()=>Array(i).fill(null).map(($,d)=>d),[i]);return a(I,{ref:s,$gap:n,"data-testid":"skeleton-text",className:e,...p,children:m.map($=>a(h,{$width:$===i-1?l:"100%",$height:16,$variant:"text",$animation:r,$duration:1500,$theme:t,$responsive:!1,$staggerIndex:$,"aria-busy":"true",role:"progressbar"},$))})});SkeletonText.displayName="SkeletonText";export const SkeletonAvatar=c(function(o,s){const{size:i="md",animation:l="shimmer",theme:n="light",className:r,...t}=o,e=L[i];return a(h,{ref:s,$width:e,$height:e,$variant:"avatar",$animation:l,$duration:1500,$theme:n,$responsive:!1,"aria-busy":"true","aria-label":"Loading avatar...",role:"progressbar","data-testid":"skeleton-avatar",className:r,...t})});SkeletonAvatar.displayName="SkeletonAvatar";export const SkeletonCard=c(function(o,s){const{hasImage:i=!0,imageHeight:l=180,textLines:n=3,hasActions:r=!0,animation:t="shimmer",theme:e="light",className:p,...m}=o;return f(G,{ref:s,$theme:e,"data-testid":"skeleton-card",className:p,...m,children:[i&&a(h,{$width:"100%",$height:l,$variant:"rounded",$animation:t,$duration:1500,$theme:e,$responsive:!1,style:{marginBottom:16}}),f(SkeletonGroup,{gap:"10px",style:{marginBottom:r?16:0},children:[a(h,{$width:"70%",$height:20,$variant:"text",$animation:t,$duration:1500,$theme:e,$responsive:!1}),Array(n-1).fill(null).map(($,d)=>a(h,{$width:d===n-2?"50%":"90%",$height:14,$variant:"text",$animation:t,$duration:1500,$theme:e,$responsive:!1,$staggerIndex:d+1},d))]}),r&&f(SkeletonGroup,{direction:"row",gap:"10px",children:[a(h,{$width:80,$height:36,$variant:"button",$animation:t,$duration:1500,$theme:e,$responsive:!1}),a(h,{$width:80,$height:36,$variant:"button",$animation:t,$duration:1500,$theme:e,$responsive:!1})]})]})});SkeletonCard.displayName="SkeletonCard";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { SkeletonElement, SkeletonWrapper, SkeletonGroupContainer, SkeletonCardContainer, SkeletonTextContainer, avatarSizes, } from './elements';
+// Size presets for base Skeleton
+const sizePresets = {
+    xs: { width: 40, height: 12 },
+    sm: { width: 80, height: 16 },
+    md: { width: 120, height: 20 },
+    lg: { width: 180, height: 24 },
+    xl: { width: 240, height: 32 },
+};
+export const Skeleton = forwardRef(function SkeletonComponent(props, ref) {
+    const { width, height, variant = 'rectangular', animation = 'shimmer', size = 'md', count = 1, gap = '10px', duration = 1500, borderRadius, theme = 'light', stagger = false, responsive = false, aspectRatio, className, style, ...rest } = props;
+    // Determine dimensions
+    const finalWidth = width ?? sizePresets[size].width;
+    const finalHeight = height ?? sizePresets[size].height;
+    const elements = useMemo(() => Array(count)
+        .fill(null)
+        .map((_, index) => index), [count]);
+    if (count === 1) {
+        return (_jsx(SkeletonElement, { ref: ref, "$width": finalWidth, "$height": finalHeight, "$variant": variant, "$animation": animation, "$duration": duration, "$borderRadius": borderRadius, "$theme": theme, "$responsive": responsive, "$aspectRatio": aspectRatio, "aria-busy": "true", "aria-live": "polite", "aria-label": "Loading...", role: "progressbar", "data-testid": "skeleton", className: className, style: style, ...rest }));
+    }
+    return (_jsx(SkeletonWrapper, { ref: ref, "$gap": gap, "$direction": "column", "data-testid": "skeleton-wrapper", className: className, ...rest, children: elements.map((key) => (_jsx(SkeletonElement, { "$width": finalWidth, "$height": finalHeight, "$variant": variant, "$animation": animation, "$duration": duration, "$borderRadius": borderRadius, "$theme": theme, "$responsive": responsive, "$aspectRatio": aspectRatio, "$staggerIndex": stagger ? key : undefined, "aria-busy": "true", role: "progressbar" }, key))) }));
+});
+Skeleton.displayName = 'Skeleton';
+export const SkeletonGroup = forwardRef(function SkeletonGroupComponent(props, ref) {
+    const { children, direction = 'column', gap = '12px', align = 'stretch', wrap = false, responsive = false, className, ...rest } = props;
+    return (_jsx(SkeletonGroupContainer, { ref: ref, "$direction": direction, "$gap": gap, "$align": align, "$wrap": wrap, "$responsive": responsive, "data-testid": "skeleton-group", className: className, ...rest, children: children }));
+});
+SkeletonGroup.displayName = 'SkeletonGroup';
+// Preset: Text lines skeleton
+export const SkeletonText = forwardRef(function SkeletonTextComponent(props, ref) {
+    const { lines = 3, lastLineWidth = '60%', gap = '10px', animation = 'shimmer', theme = 'light', className, ...rest } = props;
+    const lineElements = useMemo(() => Array(lines).fill(null).map((_, i) => i), [lines]);
+    return (_jsx(SkeletonTextContainer, { ref: ref, "$gap": gap, "data-testid": "skeleton-text", className: className, ...rest, children: lineElements.map((index) => (_jsx(SkeletonElement, { "$width": index === lines - 1 ? lastLineWidth : '100%', "$height": 16, "$variant": "text", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, "$staggerIndex": index, "aria-busy": "true", role: "progressbar" }, index))) }));
+});
+SkeletonText.displayName = 'SkeletonText';
+// Preset: Avatar skeleton
+export const SkeletonAvatar = forwardRef(function SkeletonAvatarComponent(props, ref) {
+    const { size = 'md', animation = 'shimmer', theme = 'light', className, ...rest } = props;
+    const avatarSize = avatarSizes[size];
+    return (_jsx(SkeletonElement, { ref: ref, "$width": avatarSize, "$height": avatarSize, "$variant": "avatar", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, "aria-busy": "true", "aria-label": "Loading avatar...", role: "progressbar", "data-testid": "skeleton-avatar", className: className, ...rest }));
+});
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+// Preset: Card skeleton
+export const SkeletonCard = forwardRef(function SkeletonCardComponent(props, ref) {
+    const { hasImage = true, imageHeight = 180, textLines = 3, hasActions = true, animation = 'shimmer', theme = 'light', className, ...rest } = props;
+    return (_jsxs(SkeletonCardContainer, { ref: ref, "$theme": theme, "data-testid": "skeleton-card", className: className, ...rest, children: [hasImage && (_jsx(SkeletonElement, { "$width": "100%", "$height": imageHeight, "$variant": "rounded", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, style: { marginBottom: 16 } })), _jsxs(SkeletonGroup, { gap: "10px", style: { marginBottom: hasActions ? 16 : 0 }, children: [_jsx(SkeletonElement, { "$width": "70%", "$height": 20, "$variant": "text", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false }), Array(textLines - 1).fill(null).map((_, i) => (_jsx(SkeletonElement, { "$width": i === textLines - 2 ? '50%' : '90%', "$height": 14, "$variant": "text", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false, "$staggerIndex": i + 1 }, i)))] }), hasActions && (_jsxs(SkeletonGroup, { direction: "row", gap: "10px", children: [_jsx(SkeletonElement, { "$width": 80, "$height": 36, "$variant": "button", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false }), _jsx(SkeletonElement, { "$width": 80, "$height": 36, "$variant": "button", "$animation": animation, "$duration": 1500, "$theme": theme, "$responsive": false })] }))] }));
+});
+SkeletonCard.displayName = 'SkeletonCard';