react-restyle-components 0.4.39 → 0.4.41

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';

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

@@ -1,11 +1,16 @@
-"use strict";import{styled as i,css as t,keyframes as o}from"styled-components";import{tokens as s}from"../../utils/designTokens";import{breakpoints as d}from"../../utils/abstracts";const c=o`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+import { breakpoints } from '../../utils/abstracts';
+// Animations
+const pulse = keyframes `
   0%, 100% {
     opacity: 1;
   }
   50% {
     opacity: 0.4;
   }
-`,l=o`
+`;
+const wave = keyframes `
   0% {
     transform: translateX(-100%);
   }
@@ -15,14 +20,16 @@
   100% {
     transform: translateX(100%);
   }
-`,x=o`
+`;
+const shimmer = keyframes `
   0% {
     background-position: -200% 0;
   }
   100% {
     background-position: 200% 0;
   }
-`,u=o`
+`;
+const glow = keyframes `
   0%, 100% {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
     opacity: 0.8;
@@ -31,9 +38,48 @@
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     opacity: 1;
   }
-`,p=e=>e==="dark"?{base:"#374151",highlight:"#4b5563",wave:"rgba(255, 255, 255, 0.1)"}:{base:"#e5e7eb",highlight:"#f3f4f6",wave:"rgba(255, 255, 255, 0.6)"},$={xs:{width:"40px",height:"12px"},sm:{width:"80px",height:"16px"},md:{width:"120px",height:"20px"},lg:{width:"180px",height:"24px"},xl:{width:"240px",height:"32px"}};export const avatarSizes={xs:"24px",sm:"32px",md:"48px",lg:"64px",xl:"96px"};const m=(e,r,a)=>{const n=p(a);switch(e){case"pulse":return t`
-        animation: ${c} ${r}ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
-      `;case"wave":return t`
+`;
+// Theme colors
+const getThemeColors = (theme) => {
+    if (theme === 'dark') {
+        return {
+            base: '#374151',
+            highlight: '#4b5563',
+            wave: 'rgba(255, 255, 255, 0.1)',
+        };
+    }
+    // light or auto (defaults to light)
+    return {
+        base: '#e5e7eb',
+        highlight: '#f3f4f6',
+        wave: 'rgba(255, 255, 255, 0.6)',
+    };
+};
+// Size presets
+const sizePresets = {
+    xs: { width: '40px', height: '12px' },
+    sm: { width: '80px', height: '16px' },
+    md: { width: '120px', height: '20px' },
+    lg: { width: '180px', height: '24px' },
+    xl: { width: '240px', height: '32px' },
+};
+// Avatar size presets
+export const avatarSizes = {
+    xs: '24px',
+    sm: '32px',
+    md: '48px',
+    lg: '64px',
+    xl: '96px',
+};
+const getAnimationStyles = (animation, duration, theme) => {
+    const colors = getThemeColors(theme);
+    switch (animation) {
+        case 'pulse':
+            return css `
+        animation: ${pulse} ${duration}ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      `;
+        case 'wave':
+            return css `
         position: relative;
         overflow: hidden;
         
@@ -47,57 +93,91 @@
           background: linear-gradient(
             90deg,
             transparent 0%,
-            ${n.wave} 50%,
+            ${colors.wave} 50%,
             transparent 100%
           );
-          animation: ${l} ${r}ms ease-in-out infinite;
+          animation: ${wave} ${duration}ms ease-in-out infinite;
         }
-      `;case"shimmer":return t`
+      `;
+        case 'shimmer':
+            return css `
         background: linear-gradient(
           90deg,
-          ${n.base} 0%,
-          ${n.highlight} 20%,
-          ${n.highlight} 40%,
-          ${n.base} 100%
+          ${colors.base} 0%,
+          ${colors.highlight} 20%,
+          ${colors.highlight} 40%,
+          ${colors.base} 100%
         );
         background-size: 400% 100%;
-        animation: ${x} ${r}ms linear infinite;
-      `;case"glow":return t`
-        animation: ${u} ${r}ms ease-in-out infinite;
-      `;default:return t``}},f=(e,r)=>{switch(e){case"circular":case"avatar":return t`
+        animation: ${shimmer} ${duration}ms linear infinite;
+      `;
+        case 'glow':
+            return css `
+        animation: ${glow} ${duration}ms ease-in-out infinite;
+      `;
+        case 'none':
+        default:
+            return css ``;
+    }
+};
+const getVariantStyles = (variant, borderRadius) => {
+    switch (variant) {
+        case 'circular':
+        case 'avatar':
+            return css `
         border-radius: 50%;
-      `;case"text":return t`
+      `;
+        case 'text':
+            return css `
         border-radius: 6px;
-      `;case"button":return t`
-        border-radius: ${s.borderRadius050||"6px"};
-      `;case"badge":return t`
+      `;
+        case 'button':
+            return css `
+        border-radius: ${tokens.borderRadius050 || '6px'};
+      `;
+        case 'badge':
+            return css `
         border-radius: 9999px;
-      `;case"rounded":return t`
-        border-radius: ${r||s.borderRadius100||"12px"};
-      `;default:return t`
+      `;
+        case 'rounded':
+            return css `
+        border-radius: ${borderRadius || tokens.borderRadius100 || '12px'};
+      `;
+        case 'rectangular':
+        default:
+            return css `
         border-radius: 4px;
-      `}};export const SkeletonElement=i.div`
+      `;
+    }
+};
+export const SkeletonElement = styled.div `
   display: block;
   flex-shrink: 0;
-  background-color: ${({$animation:e,$theme:r})=>{const a=p(r);return e==="shimmer"?"transparent":a.base}};
-  width: ${({$width:e})=>typeof e=="number"?`${e}px`:e};
-  height: ${({$height:e,$aspectRatio:r})=>r?"auto":typeof e=="number"?`${e}px`:e};
+  background-color: ${({ $animation, $theme }) => {
+    const colors = getThemeColors($theme);
+    return $animation === 'shimmer' ? 'transparent' : colors.base;
+}};
+  width: ${({ $width }) => (typeof $width === 'number' ? `${$width}px` : $width)};
+  height: ${({ $height, $aspectRatio }) => $aspectRatio ? 'auto' : (typeof $height === 'number' ? `${$height}px` : $height)};
   
-  ${({$aspectRatio:e})=>e&&t`
-      aspect-ratio: ${e};
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
     `}
   
-  ${({$variant:e,$borderRadius:r})=>f(e,r)}
-  ${({$animation:e,$duration:r,$theme:a})=>m(e,r,a)}
+  ${({ $variant, $borderRadius }) => getVariantStyles($variant, $borderRadius)}
+  ${({ $animation, $duration, $theme }) => getAnimationStyles($animation, $duration, $theme)}
   
   /* Stagger animation */
-  ${({$staggerIndex:e})=>e!==void 0&&t`
-      animation-delay: ${e*100}ms;
+  ${({ $staggerIndex }) => $staggerIndex !== undefined &&
+    css `
+      animation-delay: ${$staggerIndex * 100}ms;
     `}
   
   /* Responsive */
-  ${({$responsive:e})=>e&&t`
-      ${d.sm} {
+  ${({ $responsive }) => $responsive &&
+    css `
+      ${breakpoints.sm} {
         width: 100%;
       }
     `}
@@ -110,40 +190,49 @@
       animation: none;
     }
   }
-`,SkeletonWrapper=i.div`
+`;
+export const SkeletonWrapper = styled.div `
   display: flex;
-  flex-direction: ${({$direction:e})=>e};
-  gap: ${({$gap:e})=>e};
-`,SkeletonGroupContainer=i.div`
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+`;
+export const SkeletonGroupContainer = styled.div `
   display: flex;
-  flex-direction: ${({$direction:e})=>e};
-  gap: ${({$gap:e})=>e};
-  align-items: ${({$align:e})=>e==="start"?"flex-start":e==="end"?"flex-end":e==="stretch"?"stretch":"center"};
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
+  align-items: ${({ $align }) => $align === 'start' ? 'flex-start' :
+    $align === 'end' ? 'flex-end' :
+        $align === 'stretch' ? 'stretch' : 'center'};
   
-  ${({$wrap:e})=>e&&t`
+  ${({ $wrap }) => $wrap &&
+    css `
       flex-wrap: wrap;
     `}
   
   /* Responsive stacking */
-  ${({$responsive:e,$direction:r})=>e&&r==="row"&&t`
-      ${d.sm} {
+  ${({ $responsive, $direction }) => $responsive &&
+    $direction === 'row' &&
+    css `
+      ${breakpoints.sm} {
         flex-direction: column;
         align-items: stretch;
       }
     `}
-`,SkeletonCardContainer=i.div`
-  background: ${({$theme:e})=>e==="dark"?"#1f2937":"#ffffff"};
-  border-radius: ${s.borderRadius100||"12px"};
+`;
+export const SkeletonCardContainer = styled.div `
+  background: ${({ $theme }) => $theme === 'dark' ? '#1f2937' : '#ffffff'};
+  border-radius: ${tokens.borderRadius100 || '12px'};
   padding: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  border: 1px solid ${({$theme:e})=>e==="dark"?"#374151":"#f3f4f6"};
+  border: 1px solid ${({ $theme }) => $theme === 'dark' ? '#374151' : '#f3f4f6'};
   overflow: hidden;
   
-  ${d.sm} {
+  ${breakpoints.sm} {
     padding: 12px;
   }
-`,SkeletonTextContainer=i.div`
+`;
+export const SkeletonTextContainer = styled.div `
   display: flex;
   flex-direction: column;
-  gap: ${({$gap:e})=>e};
+  gap: ${({ $gap }) => $gap};
 `;

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

@@ -1 +1,2 @@
-"use strict";export{Skeleton,SkeletonGroup,SkeletonText,SkeletonAvatar,SkeletonCard}from"./Skeleton";export*from"./types";
+export { Skeleton, SkeletonGroup, SkeletonText, SkeletonAvatar, SkeletonCard, } from './Skeleton';
+export * from './types';

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

@@ -1 +1,4 @@
-"use strict";export const SKELETON_VARIANTS=["rectangular","circular","text","rounded","button","avatar","badge"],SKELETON_ANIMATIONS=["pulse","wave","shimmer","glow","none"],SKELETON_SIZES=["xs","sm","md","lg","xl"],SKELETON_THEMES=["light","dark","auto"];
+export const SKELETON_VARIANTS = ['rectangular', 'circular', 'text', 'rounded', 'button', 'avatar', 'badge'];
+export const SKELETON_ANIMATIONS = ['pulse', 'wave', 'shimmer', 'glow', 'none'];
+export const SKELETON_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const SKELETON_THEMES = ['light', 'dark', 'auto'];