react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/components/FormField/components/ToggleInput.js

@@ -1 +1,36 @@
-"use strict";import{jsx as t,Fragment as b,jsxs as a}from"react/jsx-runtime";import T,{useState as j,useEffect as v}from"react";import y from"classnames";import{Label as V}from"../../../core-components/atoms/Label/Label";import e from"../../../tc.module.css";import{cn as l}from"../../../utils";import"../toggle.css";export const ToggleInput=T.forwardRef(({id:f,label:c,error:g,required:p,value:s,onChange:o,disabled:i,isToggleLabel:h=!0,className:n,labelProps:u,...k},w)=>{const[r,m]=j(s??!1);v(()=>{s!==void 0&&m(s)},[s]);const N=()=>{if(i)return;const d=!r;m(d),o&&o(d)},x=y("wrg-toggle",{"wrg-toggle--checked":r,"wrg-toggle--disabled":i},n);return a("div",{className:l(e["w-full"],n),children:[c&&t(V,{id:f,required:p,label:c,...u}),a("div",{onClick:N,className:x,children:[t("div",{className:l("wrg-toggle-container",{[e["bg-green-700"]]:r,[e["bg-black"]]:!r}),children:h&&a(b,{children:[t("div",{className:l("wrg-toggle-check"),children:t("span",{className:l(e["text-white"],e["ml-1"]),children:"Yes"})}),t("div",{className:l("wrg-toggle-uncheck"),children:t("span",{className:l(e["dark:text-black"]),children:"No"})})]})}),t("div",{className:l("wrg-toggle-circle",e["dark:bg-black"],{"ml-1":r,"mr-1":!r})}),t("input",{ref:w,type:"checkbox","aria-label":"Toggle Button",className:l("wrg-toggle-input"),checked:r,readOnly:!0,...k})]}),g&&t("p",{className:l(e["mt-1"],e["text-sm"],e["text-red-600"],e["dark:text-red-400"]),children:g})]})});ToggleInput.displayName="ToggleInput";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Label } from '../../../core-components/atoms/Label/Label';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+import '../toggle.css';
+export const ToggleInput = React.forwardRef(({ id, label, error, required, value, onChange, disabled, isToggleLabel = true, className, labelProps, ...props }, ref) => {
+    const [toggleValue, setToggleValue] = useState(value ?? false);
+    useEffect(() => {
+        if (value !== undefined) {
+            setToggleValue(value);
+        }
+    }, [value]);
+    const handleToggleClick = () => {
+        if (disabled)
+            return;
+        const newValue = !toggleValue;
+        setToggleValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+    const toggleClasses = classNames('wrg-toggle', {
+        'wrg-toggle--checked': toggleValue,
+        'wrg-toggle--disabled': disabled,
+    }, className);
+    return (_jsxs("div", { className: cn(s['w-full'], className), children: [label && (_jsx(Label, { id: id, required: required, label: label, ...labelProps })), _jsxs("div", { onClick: handleToggleClick, className: toggleClasses, children: [_jsx("div", { className: cn('wrg-toggle-container', {
+                            [s['bg-green-700']]: toggleValue,
+                            [s['bg-black']]: !toggleValue,
+                        }), children: isToggleLabel && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('wrg-toggle-check'), children: _jsx("span", { className: cn(s['text-white'], s['ml-1']), children: "Yes" }) }), _jsx("div", { className: cn('wrg-toggle-uncheck'), children: _jsx("span", { className: cn(s['dark:text-black']), children: "No" }) })] })) }), _jsx("div", { className: cn('wrg-toggle-circle', s['dark:bg-black'], {
+                            'ml-1': toggleValue,
+                            'mr-1': !toggleValue,
+                        }) }), _jsx("input", { ref: ref, type: "checkbox", "aria-label": "Toggle Button", className: cn('wrg-toggle-input'), checked: toggleValue, readOnly: true, ...props })] }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
+});
+ToggleInput.displayName = 'ToggleInput';

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

@@ -1 +1,11 @@
-"use strict";export{PasswordInput}from"./PasswordInput";export{ToggleInput}from"./ToggleInput";export{RadioInput}from"./RadioInput";export{CheckboxInput}from"./CheckboxInput";export{CheckboxGroupInput}from"./CheckboxGroupInput";export{DatePickerInput}from"./DatePickerInput";export{DropdownInput}from"./DropdownInput";export{TextDropdownInput}from"./TextDropdownInput";export{PinInput}from"./PinInput";export{OtpInput}from"./OtpInput";export{CssMultilineInput}from"./CssMultilineInput";
+export { PasswordInput } from './PasswordInput';
+export { ToggleInput } from './ToggleInput';
+export { RadioInput } from './RadioInput';
+export { CheckboxInput } from './CheckboxInput';
+export { CheckboxGroupInput } from './CheckboxGroupInput';
+export { DatePickerInput } from './DatePickerInput';
+export { DropdownInput } from './DropdownInput';
+export { TextDropdownInput } from './TextDropdownInput';
+export { PinInput } from './PinInput';
+export { OtpInput } from './OtpInput';
+export { CssMultilineInput } from './CssMultilineInput';

package/lib/src/core-components/src/components/FormField/css-properties.js

@@ -1 +1,161 @@
-"use strict";export const properties=[{alignContent:["flex-start","flex-end","center","stretch","space-between","space-around"]},{alignItems:["flex-start","flex-end","center","stretch","baseline"]},{alignSelf:["auto","flex-start","flex-end","center","baseline","stretch"]},{flex:["number"]},{flexDirection:["row","row-reverse","column","column-reverse"]},{flexWrap:["nowrap","wrap","wrap-reverse"]},{flexFlow:["number"]},{flexGrow:["number"]},{flexShrink:["number"]},{flexBasis:["number"]},{justifyContent:[,"flex-start","flex-end","center","space-around","space-between","space-evenly"]},{gap:["number"]},{rowGap:["number"]},{columnGap:["number"]},{aspectRatio:["number"]},{bottom:["number"]},{display:["flex","none"]},{left:["number"]},{position:["absolute","relative"]},{right:["number"]},{top:["number"]},{overflow:["hidden"]},{zIndex:["number"]},{height:["number"]},{maxHeight:["number"]},{maxWidth:["number"]},{minHeight:["number"]},{minWidth:["number"]},{width:["number"]},{backgroundColor:["string"]},{color:["string"]},{opacity:["number"]},{fontSize:["number"]},{fontFamily:["string"]},{fontStyle:["string","normal"]},{fontWeight:[,"number","thin","hairline","ultralight","extralight","light","normal","medium","semibold","demibold","bold","ultrabold","extrabold","heavy","black"]},{letterSpacing:["number"]},{lineHeight:["number"]},{maxLines:["number"]},{textAlign:["left","right","center","justify"]},{textDecoration:[,"line-through","underline","none","line-through underline","underline line-through"]},{textDecorationColor:["string"]},{textDecorationStyle:["dashed","dotted","solid","string"]},{textIndent:["any"]},{textOverflow:["ellipsis"]},{textTransform:["capitalize","lowercase","uppercase"]},{verticalAlign:["sub","super"]},{objectFit:["string"]},{objectPosition:["number"]},{objectPositionX:["number"]},{objectPositionY:["number"]},{margin:["number"]},{marginHorizontal:["number"]},{marginVertical:["number"]},{marginTop:["number"]},{marginRight:["number"]},{marginBottom:["number"]},{marginLeft:["number"]},{padding:["number"]},{paddingHorizontal:["number"]},{paddingVertical:["number"]},{paddingTop:["number"]},{paddingRight:["number"]},{paddingBottom:["number"]},{paddingLeft:["number"]},{transform:["string"]},{transformOrigin:["number"]},{transformOriginX:["number"]},{transformOriginY:["number"]},{border:["number"]},{borderWidth:["number"]},{borderColor:["string"]},{borderStyle:["dashed","dotted","solid"]},{borderTop:["number"]},{borderTopColor:["string"]},{borderTopStyle:["dashed","dotted","solid"]},{borderTopWidth:["number"]},{borderRight:["number"]},{borderRightColor:["string"]},{borderRightStyle:["dashed","dotted","solid"]},{borderRightWidth:["number"]},{borderBottom:["number"]},{borderBottomColor:["string"]},{borderBottomStyle:["dashed","dotted","solid"]},{borderBottomWidth:["number"]},{borderLeft:["number"]},{borderLeftColor:["string"]},{borderLeftStyle:["dashed","dotted","solid"]},{borderLeftWidth:["number"]},{borderTopLeftRadius:["number"]},{borderTopRightRadius:["number"]},{borderBottomRightRadius:["number"]},{borderBottomLeftRadius:["number"]},{borderRadius:["number"]}];
+/* eslint-disable no-sparse-arrays */
+export const properties = [
+    {
+        alignContent: [
+            'flex-start',
+            'flex-end',
+            'center',
+            'stretch',
+            'space-between',
+            'space-around',
+        ],
+    },
+    { alignItems: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'] },
+    {
+        alignSelf: [
+            'auto',
+            'flex-start',
+            'flex-end',
+            'center',
+            'baseline',
+            'stretch',
+        ],
+    },
+    { flex: ['number'] },
+    { flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'] },
+    { flexWrap: ['nowrap', 'wrap', 'wrap-reverse'] },
+    { flexFlow: ['number'] },
+    { flexGrow: ['number'] },
+    { flexShrink: ['number'] },
+    { flexBasis: ['number'] },
+    {
+        justifyContent: [
+            ,
+            'flex-start',
+            'flex-end',
+            'center',
+            'space-around',
+            'space-between',
+            'space-evenly',
+        ],
+    },
+    { gap: ['number'] },
+    { rowGap: ['number'] },
+    { columnGap: ['number'] },
+    // Layout
+    { aspectRatio: ['number'] },
+    { bottom: ['number'] },
+    { display: ['flex', 'none'] },
+    { left: ['number'] },
+    { position: ['absolute', 'relative'] },
+    { right: ['number'] },
+    { top: ['number'] },
+    { overflow: ['hidden'] },
+    { zIndex: ['number'] },
+    // Dimension
+    { height: ['number'] },
+    { maxHeight: ['number'] },
+    { maxWidth: ['number'] },
+    { minHeight: ['number'] },
+    { minWidth: ['number'] },
+    { width: ['number'] },
+    // Color
+    { backgroundColor: ['string'] },
+    { color: ['string'] },
+    { opacity: ['number'] },
+    // Text
+    { fontSize: ['number'] },
+    { fontFamily: ['string'] },
+    { fontStyle: ['string', 'normal'] },
+    {
+        fontWeight: [
+            ,
+            'number',
+            'thin',
+            'hairline',
+            'ultralight',
+            'extralight',
+            'light',
+            'normal',
+            'medium',
+            'semibold',
+            'demibold',
+            'bold',
+            'ultrabold',
+            'extrabold',
+            'heavy',
+            'black',
+        ],
+    },
+    { letterSpacing: ['number'] },
+    { lineHeight: ['number'] },
+    { maxLines: ['number'] },
+    { textAlign: ['left', 'right', 'center', 'justify'] },
+    {
+        textDecoration: [
+            ,
+            'line-through',
+            'underline',
+            'none',
+            'line-through underline',
+            'underline line-through',
+        ],
+    },
+    { textDecorationColor: ['string'] },
+    { textDecorationStyle: ['dashed', 'dotted', 'solid', 'string'] },
+    { textIndent: ['any'] },
+    { textOverflow: ['ellipsis'] },
+    { textTransform: ['capitalize', 'lowercase', 'uppercase'] },
+    { verticalAlign: ['sub', 'super'] },
+    // Sizing/positioning
+    { objectFit: ['string'] },
+    { objectPosition: ['number'] },
+    { objectPositionX: ['number'] },
+    { objectPositionY: ['number'] },
+    // Margin/padding
+    { margin: ['number'] },
+    { marginHorizontal: ['number'] },
+    { marginVertical: ['number'] },
+    { marginTop: ['number'] },
+    { marginRight: ['number'] },
+    { marginBottom: ['number'] },
+    { marginLeft: ['number'] },
+    { padding: ['number'] },
+    { paddingHorizontal: ['number'] },
+    { paddingVertical: ['number'] },
+    { paddingTop: ['number'] },
+    { paddingRight: ['number'] },
+    { paddingBottom: ['number'] },
+    { paddingLeft: ['number'] },
+    // Transformations
+    { transform: ['string'] },
+    { transformOrigin: ['number'] },
+    { transformOriginX: ['number'] },
+    { transformOriginY: ['number'] },
+    // Borders
+    { border: ['number'] },
+    { borderWidth: ['number'] },
+    { borderColor: ['string'] },
+    { borderStyle: ['dashed', 'dotted', 'solid'] },
+    { borderTop: ['number'] },
+    { borderTopColor: ['string'] },
+    { borderTopStyle: ['dashed', 'dotted', 'solid'] },
+    { borderTopWidth: ['number'] },
+    { borderRight: ['number'] },
+    { borderRightColor: ['string'] },
+    { borderRightStyle: ['dashed', 'dotted', 'solid'] },
+    { borderRightWidth: ['number'] },
+    { borderBottom: ['number'] },
+    { borderBottomColor: ['string'] },
+    { borderBottomStyle: ['dashed', 'dotted', 'solid'] },
+    { borderBottomWidth: ['number'] },
+    { borderLeft: ['number'] },
+    { borderLeftColor: ['string'] },
+    { borderLeftStyle: ['dashed', 'dotted', 'solid'] },
+    { borderLeftWidth: ['number'] },
+    { borderTopLeftRadius: ['number'] },
+    { borderTopRightRadius: ['number'] },
+    { borderBottomRightRadius: ['number'] },
+    { borderBottomLeftRadius: ['number'] },
+    { borderRadius: ['number'] },
+];

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

@@ -1 +1,2 @@
-"use strict";export*from"./FormField";export*from"./components";
+export * from './FormField';
+export * from './components';

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

@@ -1 +1,79 @@
-"use strict";import{jsx as o,Fragment as h}from"react/jsx-runtime";import{Suspense as u}from"react";import y from"lodash";import{Tooltip as v}from"../Tooltip";import C from"@loadable/component";import n from"../../tc.module.css";import{cn as c}from"../../utils";const L=({src:i,className:r,style:m,...t})=>typeof i=="string"?o("img",{src:i,className:c(n.icon,r),style:m,...t,alt:""}):o("div",{className:c(n.icon,r),style:m,...t,children:i}),S=({nameIcon:i,classNames:r={},styles:m={},...t})=>o("span",{className:c(n.icon,t.className,r.icon),style:m.icon,"aria-hidden":"true",children:"\u26AB"});export const Icon=({nameIcon:i,propsIcon:r,className:m,tooltip:t="",isDisable:l=!1,classNames:e={},styles:a={},onClick:f})=>{try{const s={...r,color:l?"#808080":r?.color||"rgb(36 48 63)"},b=i.startsWith("IoIo")?"io":i.startsWith("Io")?"io5":i.replace(/([a-z0-9])([A-Z])/g,"$1 $2").split(" ")[0].toLowerCase(),g={fa:()=>import("react-icons/fa"),md:()=>import("react-icons/md"),io:()=>import("react-icons/io"),fi:()=>import("react-icons/fi"),bs:()=>import("react-icons/bs"),hi:()=>import("react-icons/hi"),go:()=>import("react-icons/go"),si:()=>import("react-icons/si"),ti:()=>import("react-icons/ti"),wi:()=>import("react-icons/wi"),di:()=>import("react-icons/di"),ri:()=>import("react-icons/ri"),fc:()=>import("react-icons/fc"),gr:()=>import("react-icons/gr"),lu:()=>import("react-icons/lu"),gi:()=>import("react-icons/gi"),tb:()=>import("react-icons/tb"),rx:()=>import("react-icons/rx"),im:()=>import("react-icons/im"),cg:()=>import("react-icons/cg"),io5:()=>import("react-icons/io5"),ai:()=>import("react-icons/ai"),vsc:()=>import("react-icons/vsc"),bi:()=>import("react-icons/bi"),fa2:()=>import("react-icons/fa"),ci:()=>import("react-icons/ci"),lib:()=>import("react-icons/lib"),lia:()=>import("react-icons/lia"),pi:()=>import("react-icons/pi"),tfi:()=>import("react-icons/tfi"),fa6:()=>import("react-icons/fa6")}[b]||(()=>import("react-icons/md")),d=C(g,{resolveComponent:p=>p[i]!=null?p[i]:p[Object.keys(p.default)[0]]});return o("div",{className:c(n.iconContainer,m,e.container),style:a.container,onClick:()=>{l||f&&f()},children:y.isEmpty(t)?o(u,{fallback:o("div",{children:"Loading..."}),children:o(d,{...s,className:c(n.icon,e.icon),style:a.icon})}):o(v,{content:t,children:o(d,{...s,className:c(n.icon,e.icon),style:a.icon})})})}catch{return o(h,{})}};Icon.SSR=S,Icon.Compat=L;
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import _ from 'lodash';
+import { Tooltip } from '../Tooltip';
+import loadable from '@loadable/component';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+const CompatIcon = ({ src, className, style, ...props }) => {
+    if (typeof src === 'string') {
+        return (_jsx("img", { src: src, className: cn(s.icon, className), style: style, ...props, alt: "" }));
+    }
+    return (_jsx("div", { className: cn(s.icon, className), style: style, ...props, children: src }));
+};
+const SSRIcon = ({ nameIcon, classNames = {}, styles = {}, ...props }) => {
+    return (_jsx("span", { className: cn(s.icon, props.className, classNames.icon), style: styles.icon, "aria-hidden": "true", children: "\u26AB" }));
+};
+export const Icon = ({ nameIcon, propsIcon, className, tooltip = '', isDisable = false, classNames = {}, styles = {}, onClick, }) => {
+    try {
+        const iconProps = {
+            ...propsIcon,
+            color: isDisable ? '#808080' : propsIcon?.color || 'rgb(36 48 63)',
+        };
+        const lib = nameIcon.startsWith('IoIo')
+            ? 'io'
+            : nameIcon.startsWith('Io')
+                ? 'io5'
+                : nameIcon
+                    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+                    .split(' ')[0]
+                    .toLowerCase();
+        const iconLibraries = {
+            fa: () => import('react-icons/fa'),
+            md: () => import('react-icons/md'),
+            io: () => import('react-icons/io'),
+            fi: () => import('react-icons/fi'),
+            bs: () => import('react-icons/bs'),
+            hi: () => import('react-icons/hi'),
+            go: () => import('react-icons/go'),
+            si: () => import('react-icons/si'),
+            ti: () => import('react-icons/ti'),
+            wi: () => import('react-icons/wi'),
+            di: () => import('react-icons/di'),
+            ri: () => import('react-icons/ri'),
+            fc: () => import('react-icons/fc'),
+            gr: () => import('react-icons/gr'),
+            lu: () => import('react-icons/lu'),
+            gi: () => import('react-icons/gi'),
+            tb: () => import('react-icons/tb'),
+            rx: () => import('react-icons/rx'),
+            im: () => import('react-icons/im'),
+            cg: () => import('react-icons/cg'),
+            io5: () => import('react-icons/io5'),
+            ai: () => import('react-icons/ai'),
+            vsc: () => import('react-icons/vsc'),
+            bi: () => import('react-icons/bi'),
+            fa2: () => import('react-icons/fa'),
+            ci: () => import('react-icons/ci'),
+            lib: () => import('react-icons/lib'),
+            lia: () => import('react-icons/lia'),
+            pi: () => import('react-icons/pi'),
+            tfi: () => import('react-icons/tfi'),
+            fa6: () => import('react-icons/fa6'),
+        };
+        const loadLibrary = iconLibraries[lib] || (() => import('react-icons/md'));
+        const ElementIcon = loadable(loadLibrary, {
+            resolveComponent: (el) => el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
+        });
+        return (_jsx("div", { className: cn(s.iconContainer, className, classNames.container), style: styles.container, onClick: () => {
+                if (!isDisable)
+                    onClick && onClick();
+            }, children: !_.isEmpty(tooltip) ? (_jsx(Tooltip, { content: tooltip, children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon, classNames.icon), style: styles.icon }) })) : (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon, classNames.icon), style: styles.icon }) })) }));
+    }
+    catch (error) {
+        return _jsx(_Fragment, {});
+    }
+};
+// Attach sub-components
+Icon.SSR = SSRIcon;
+Icon.Compat = CompatIcon;

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

@@ -1 +1,2 @@
-"use strict";export*from"./Icon";export*from"./types";
+export * from './Icon';
+export * from './types';

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

@@ -1 +1,9 @@
-"use strict";export const ICON_SIZES=["xsmall","small","normal","medium","large","xlarge","xxlarge"];
+export const ICON_SIZES = [
+    'xsmall',
+    'small',
+    'normal',
+    'medium',
+    'large',
+    'xlarge',
+    'xxlarge',
+];

package/lib/src/core-components/src/components/Loader/loader.component.js

@@ -1,4 +1,216 @@
-"use strict";import{jsx as d,jsxs as y}from"react/jsx-runtime";import e from"../../tc.module.css";import{cn as n}from"../../utils";const P={sm:{wrapper:n(e["w-4"],e["h-4"]),spinner:n(e["w-4"],e["h-4"]),dots:n(e["w-1"],e["h-1"]),bars:n(e["w-1"],e["h-6"]),pulse:n(e["w-4"],e["h-4"])},md:{wrapper:n(e["w-8"],e["h-8"]),spinner:n(e["w-8"],e["h-8"]),dots:n(e["w-2"],e["h-2"]),bars:n(e["w-1"],e["h-8"]),pulse:n(e["w-8"],e["h-8"])},lg:{wrapper:n(e["w-10"],e["h-10"]),spinner:n(e["w-10"],e["h-10"]),dots:n(e["w-3"],e["h-3"]),bars:n(e["w-2"],e["h-10"]),pulse:n(e["w-10"],e["h-10"])}},b=t=>{const s={blue:"rgb(59 130 246)",green:"rgb(34 197 94)",gray:"rgb(156 163 175)",primary:"rgb(59 130 246)",white:"rgb(255 255 255)",black:"rgb(0 0 0)"};return s[t]?s[t]:t.startsWith("#")||t.startsWith("rgb")||t.startsWith("hsl")||t.startsWith("rgba")||t.startsWith("hsla")||/^[a-z]+$/i.test(t)?t:s.blue},R=t=>{const s=t.match(/rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(s)return[parseInt(s[1]),parseInt(s[2]),parseInt(s[3])];if(t.startsWith("#")){const r=t.slice(1);if(r.length===3){const c=parseInt(r[0]+r[0],16),o=parseInt(r[1]+r[1],16),u=parseInt(r[2]+r[2],16);return[c,o,u]}else if(r.length===6){const c=parseInt(r.slice(0,2),16),o=parseInt(r.slice(2,4),16),u=parseInt(r.slice(4,6),16);return[c,o,u]}}if(typeof document<"u")try{const r=document.createElement("div");r.style.color=t,document.body.appendChild(r);const c=window.getComputedStyle(r).color;document.body.removeChild(r);const o=c.match(/\d+/g);if(o&&o.length>=3)return[parseInt(o[0]),parseInt(o[1]),parseInt(o[2])]}catch{}return[255,255,255]},D=(t,s)=>{if(s)return s;if(!t)return"10px";let r;if(t.endsWith("rem"))r=parseFloat(t)*16;else if(t.endsWith("px"))r=parseFloat(t);else if(t.endsWith("em"))r=parseFloat(t)*16;else return"10px";return`${Math.max(2,Math.min(16,Math.round(r*.156)))}px`};export const LoadingAnimateSpin=({classWarper:t="",className:s="",variant:r="spinner",size:c="md",color:o="blue",borderWidth:u,width:x,height:C,textFontSize:I="1.125rem",loadingText:f,classNames:a={},styles:l={},"aria-label":m="Loading"})=>{const h=P[c],W=()=>{const i=b(o),[p,$,j]=R(i),g=`rgba(${p}, ${$}, ${j}, 0.15)`,w=x||"4rem",S=C||"4rem",B=D(w,u);return y("div",{className:n(e.flex,e["flex-col"],e["items-center"],e["justify-center"],s,a.container),style:l.container,"aria-label":m,role:"status",children:[d("div",{className:n(h.spinner,e["rounded-full"],e["animate-spin"],a.spinner),style:{width:w,height:S,borderWidth:B,borderStyle:"solid",borderTopColor:i,borderRightColor:i,borderBottomColor:g,borderLeftColor:g,animation:"spin 1s linear infinite",...l.spinner}}),f&&d("p",{className:n(e["mt-4"],e["text-white"],e["text-lg"],e["font-semibold"],e["animate-pulse"],a.text),style:{marginTop:"1rem",color:i,fontSize:I,fontWeight:600,animation:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",...l.text},children:f})]})},v=()=>{const i=b(o);return d("div",{className:n(e.flex,e["gap-2"],e["items-center"],s,a.container),style:l.container,"aria-label":m,role:"status",children:[0,1,2].map(p=>d("div",{className:n(h.dots,e["rounded-full"],a.dot),style:{backgroundColor:i,animation:"bounce 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite",animationDelay:`${p*.16}s`,animationFillMode:"both",...l.dot}},p))})},k=()=>{const i=b(o);return d("div",{className:n(e.flex,e["gap-1"],e["items-center"],s,a.container),style:l.container,"aria-label":m,role:"status",children:[0,1,2].map(p=>d("div",{className:n(h.bars,e.rounded,a.bar),style:{backgroundColor:i,borderRadius:"0.125rem",animation:"pulse 1.2s ease-in-out infinite",animationDelay:`${p*.15}s`,animationFillMode:"both",...l.bar}},p))})},F=()=>{const i=b(o);return d("div",{className:n(h.pulse,e["rounded-full"],s,a.pulse),style:{backgroundColor:i,animation:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",animationFillMode:"both",...l.pulse},"aria-label":m,role:"status"})},M=()=>{switch(r){case"dots":return v();case"bars":return k();case"pulse":return F();default:return W()}};return y("div",{className:n(e.flex,e["justify-center"],e["items-center"],t,a.wrapper),style:l.wrapper,children:[d("style",{children:`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+const sizeClasses = {
+    sm: {
+        wrapper: cn(s['w-4'], s['h-4']),
+        spinner: cn(s['w-4'], s['h-4']),
+        dots: cn(s['w-1'], s['h-1']),
+        bars: cn(s['w-1'], s['h-6']),
+        pulse: cn(s['w-4'], s['h-4']),
+    },
+    md: {
+        wrapper: cn(s['w-8'], s['h-8']),
+        spinner: cn(s['w-8'], s['h-8']),
+        dots: cn(s['w-2'], s['h-2']),
+        bars: cn(s['w-1'], s['h-8']),
+        pulse: cn(s['w-8'], s['h-8']),
+    },
+    lg: {
+        wrapper: cn(s['w-10'], s['h-10']),
+        spinner: cn(s['w-10'], s['h-10']),
+        dots: cn(s['w-3'], s['h-3']),
+        bars: cn(s['w-2'], s['h-10']),
+        pulse: cn(s['w-10'], s['h-10']),
+    },
+};
+const getColorValue = (color) => {
+    const colors = {
+        blue: 'rgb(59 130 246)',
+        green: 'rgb(34 197 94)',
+        gray: 'rgb(156 163 175)',
+        primary: 'rgb(59 130 246)',
+        white: 'rgb(255 255 255)',
+        black: 'rgb(0 0 0)',
+    };
+    // If it's a predefined color, return the mapped value
+    if (colors[color]) {
+        return colors[color];
+    }
+    // If it's already a valid CSS color (hex, rgb, rgba, hsl, named color, etc.), return it as-is
+    // Check if it looks like a CSS color value (starts with #, rgb, rgba, hsl, hsla, or is a valid CSS color name)
+    if (color.startsWith('#') ||
+        color.startsWith('rgb') ||
+        color.startsWith('hsl') ||
+        color.startsWith('rgba') ||
+        color.startsWith('hsla') ||
+        /^[a-z]+$/i.test(color) // Named colors like 'coral', 'tomato', etc.
+    ) {
+        return color;
+    }
+    // Default fallback
+    return colors.blue;
+};
+// Helper function to extract RGB values from any color format for opacity borders
+const extractRgbForOpacity = (colorValue) => {
+    // Handle rgb/rgba format: rgb(59 130 246) or rgba(59, 130, 246, 0.5)
+    const rgbMatch = colorValue.match(/rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (rgbMatch) {
+        return [
+            parseInt(rgbMatch[1]),
+            parseInt(rgbMatch[2]),
+            parseInt(rgbMatch[3]),
+        ];
+    }
+    // Handle hex format: #3b82f6 or #3bf
+    if (colorValue.startsWith('#')) {
+        const hex = colorValue.slice(1);
+        if (hex.length === 3) {
+            // Short hex: #3bf -> #33bbff
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            return [r, g, b];
+        }
+        else if (hex.length === 6) {
+            // Full hex: #3b82f6
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            return [r, g, b];
+        }
+    }
+    // For named colors or other formats, create a temporary element to get computed color
+    // This is a fallback for named CSS colors like 'coral', 'tomato', etc.
+    if (typeof document !== 'undefined') {
+        try {
+            const tempEl = document.createElement('div');
+            tempEl.style.color = colorValue;
+            document.body.appendChild(tempEl);
+            const computedColor = window.getComputedStyle(tempEl).color;
+            document.body.removeChild(tempEl);
+            const computedRgb = computedColor.match(/\d+/g);
+            if (computedRgb && computedRgb.length >= 3) {
+                return [
+                    parseInt(computedRgb[0]),
+                    parseInt(computedRgb[1]),
+                    parseInt(computedRgb[2]),
+                ];
+            }
+        }
+        catch (e) {
+            // Fallback if DOM manipulation fails
+        }
+    }
+    // Default fallback to white
+    return [255, 255, 255];
+};
+// Helper to calculate proportional border width based on spinner size
+// Default ratio: 10px border for 4rem (64px) spinner = ~15.6%
+const calculateBorderWidth = (sizeValue, explicitBorderWidth) => {
+    // If explicit borderWidth is provided, use it
+    if (explicitBorderWidth) {
+        return explicitBorderWidth;
+    }
+    // Default border width if no size specified
+    if (!sizeValue) {
+        return '10px';
+    }
+    // Parse the size value to pixels
+    let sizeInPx;
+    if (sizeValue.endsWith('rem')) {
+        sizeInPx = parseFloat(sizeValue) * 16;
+    }
+    else if (sizeValue.endsWith('px')) {
+        sizeInPx = parseFloat(sizeValue);
+    }
+    else if (sizeValue.endsWith('em')) {
+        sizeInPx = parseFloat(sizeValue) * 16;
+    }
+    else {
+        // Fallback for unknown units
+        return '10px';
+    }
+    // Calculate proportional border (about 15.6% of size, min 2px, max 16px)
+    const borderPx = Math.max(2, Math.min(16, Math.round(sizeInPx * 0.156)));
+    return `${borderPx}px`;
+};
+export const LoadingAnimateSpin = ({ classWarper = '', className = '', variant = 'spinner', size = 'md', color = 'blue', borderWidth, width, height, textFontSize = '1.125rem', loadingText, classNames = {}, styles = {}, 'aria-label': ariaLabel = 'Loading', }) => {
+    const sizeConfig = sizeClasses[size];
+    const renderSpinner = () => {
+        const colorValue = getColorValue(color);
+        // Extract RGB values for opacity border - making it more subtle
+        const [r, g, b] = extractRgbForOpacity(colorValue);
+        const baseBorderColor = `rgba(${r}, ${g}, ${b}, 0.15)`;
+        // Calculate spinner dimensions
+        const spinnerWidth = width || '4rem';
+        const spinnerHeight = height || '4rem';
+        // Calculate proportional border width based on spinner size
+        const calculatedBorderWidth = calculateBorderWidth(spinnerWidth, borderWidth);
+        return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], className, classNames.container), style: styles.container, "aria-label": ariaLabel, role: "status", children: [_jsx("div", { className: cn(sizeConfig.spinner, s['rounded-full'], s['animate-spin'], classNames.spinner), style: {
+                        width: spinnerWidth,
+                        height: spinnerHeight,
+                        borderWidth: calculatedBorderWidth,
+                        borderStyle: 'solid',
+                        borderTopColor: colorValue,
+                        borderRightColor: colorValue,
+                        borderBottomColor: baseBorderColor,
+                        borderLeftColor: baseBorderColor,
+                        animation: 'spin 1s linear infinite',
+                        ...styles.spinner,
+                    } }), loadingText && (_jsx("p", { className: cn(s['mt-4'], s['text-white'], s['text-lg'], s['font-semibold'], s['animate-pulse'], classNames.text), style: {
+                        marginTop: '1rem',
+                        color: colorValue,
+                        fontSize: textFontSize,
+                        fontWeight: 600,
+                        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        ...styles.text,
+                    }, children: loadingText }))] }));
+    };
+    const renderDots = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(s['flex'], s['gap-2'], s['items-center'], className, classNames.container), style: styles.container, "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.dots, s['rounded-full'], classNames.dot), style: {
+                    backgroundColor: colorValue,
+                    animation: `bounce 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite`,
+                    animationDelay: `${i * 0.16}s`,
+                    animationFillMode: 'both',
+                    ...styles.dot,
+                } }, i))) }));
+    };
+    const renderBars = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(s['flex'], s['gap-1'], s['items-center'], className, classNames.container), style: styles.container, "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.bars, s.rounded, classNames.bar), style: {
+                    backgroundColor: colorValue,
+                    borderRadius: '0.125rem',
+                    animation: `pulse 1.2s ease-in-out infinite`,
+                    animationDelay: `${i * 0.15}s`,
+                    animationFillMode: 'both',
+                    ...styles.bar,
+                } }, i))) }));
+    };
+    const renderPulse = () => {
+        const colorValue = getColorValue(color);
+        return (_jsx("div", { className: cn(sizeConfig.pulse, s['rounded-full'], className, classNames.pulse), style: {
+                backgroundColor: colorValue,
+                animation: `pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,
+                animationFillMode: 'both',
+                ...styles.pulse,
+            }, "aria-label": ariaLabel, role: "status" }));
+    };
+    const renderLoader = () => {
+        switch (variant) {
+            case 'dots':
+                return renderDots();
+            case 'bars':
+                return renderBars();
+            case 'pulse':
+                return renderPulse();
+            case 'spinner':
+            default:
+                return renderSpinner();
+        }
+    };
+    return (_jsxs("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], classWarper, classNames.wrapper), style: styles.wrapper, children: [_jsx("style", { children: `
         @keyframes spin {
           from {
             transform: rotate(0deg);
@@ -31,4 +243,5 @@
             opacity: 0.8;
           }
         }
-      `}),M()]})};
+      ` }), renderLoader()] }));
+};

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

@@ -1 +1,73 @@
-"use strict";"use client";import{jsx as t,jsxs as u,Fragment as j}from"react/jsx-runtime";import{forwardRef as E,useCallback as w,useState as z,useEffect as B}from"react";import{MasonryContainer as G,MasonryColumn as V,MasonryItemWrapper as A,MasonryImage as D,ImagePlaceholder as v,EmptyState as J,MasonryCard as K,MasonryCardContent as O}from"./elements";import{useResponsiveValue as F,useColumnDistribution as Q,useImageLoading as U}from"./hooks";const X=()=>u("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:[t("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),t("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),t("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"}),t("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"})]});export const Masonry=E(function(m,g){const{items:r,columns:h=3,gutter:y=16,renderItem:f,sequential:p=!1,animationDuration:i=300,animated:x=!0,staggerDelay:a=50,classNames:o={},styles:n={},className:$,style:I,onImageLoad:s,onLayoutComplete:L,minItemHeight:k,loadingPlaceholder:Y,emptyState:H}=m,M=F(h,3),N=F(y,16),T=Q(r,M,p),{setLoading:d,isLoading:b}=U();let W=0;B(()=>{if(r.length>0){const e=setTimeout(()=>{L?.()},i+a*r.length);return()=>clearTimeout(e)}},[r,i,a,L]);const R=w((e,c)=>{const l=c.currentTarget;d(e.id,!1),s?.(e,l.naturalWidth,l.naturalHeight)},[d,s]),_=w((e,c,l)=>e.src?u(K,{$borderRadius:8,children:[b(e.id)&&t(v,{$height:e.height,$borderRadius:8}),t(D,{src:e.src,alt:e.alt||"",$objectFit:"cover",$borderRadius:0,$isLoading:b(e.id),onLoad:C=>R(e,C),onError:()=>d(e.id,!1)}),e.content&&t(O,{children:e.content})]}):e.content?e.content:null,[b,R,d]),P=f||_;return r.length===0?t(J,{className:o.root,style:n.root,children:H||u(j,{children:[t(X,{}),t("span",{children:"No items to display"})]})}):t(G,{ref:g,$gutter:N,className:$||o.root,style:{...n.root,...I},role:"grid","aria-label":"Masonry layout",children:T.map((e,c)=>t(V,{$gutter:N,$columnCount:M,className:o.column,style:n.column,role:"gridcell",children:e.map((l,C)=>{const q=W++;return t(A,{$animated:x,$animationDuration:i,$staggerIndex:q,$staggerDelay:a,$minHeight:k,className:o.item,style:n.item,children:P(l,C,c)},l.id)})},c))})});Masonry.displayName="Masonry";export const MasonryImageComponent=E(function(m,g){const{src:r,alt:h="",className:y,style:f,onLoad:p,onError:i,objectFit:x="cover",borderRadius:a=8}=m,[o,n]=z(!0),$=s=>{n(!1),p?.(s)},I=s=>{n(!1),i?.(s)};return u(j,{children:[o&&t(v,{$borderRadius:a}),t(D,{ref:g,src:r,alt:h,className:y,style:f,$objectFit:x,$borderRadius:a,$isLoading:o,onLoad:$,onError:I})]})});MasonryImageComponent.displayName="MasonryImage";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, useEffect } from 'react';
+import { MasonryContainer, MasonryColumn, MasonryItemWrapper, MasonryImage, ImagePlaceholder, EmptyState, MasonryCard, MasonryCardContent, } from './elements';
+import { useResponsiveValue, useColumnDistribution, useImageLoading } from './hooks';
+// Default empty icon
+const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })] }));
+export const Masonry = forwardRef(function MasonryComponent(props, ref) {
+    const { items, columns = 3, gutter = 16, renderItem, sequential = false, animationDuration = 300, animated = true, staggerDelay = 50, classNames = {}, styles = {}, className, style, onImageLoad, onLayoutComplete, minItemHeight, loadingPlaceholder, emptyState, } = props;
+    // Get responsive values
+    const columnCount = useResponsiveValue(columns, 3);
+    const gutterSize = useResponsiveValue(gutter, 16);
+    // Distribute items into columns
+    const columnData = useColumnDistribution(items, columnCount, sequential);
+    // Image loading state
+    const { setLoading, isLoading } = useImageLoading();
+    // Track global item index for stagger animation
+    let globalIndex = 0;
+    // Layout complete callback
+    useEffect(() => {
+        if (items.length > 0) {
+            const timeout = setTimeout(() => {
+                onLayoutComplete?.();
+            }, animationDuration + staggerDelay * items.length);
+            return () => clearTimeout(timeout);
+        }
+    }, [items, animationDuration, staggerDelay, onLayoutComplete]);
+    // Handle image load
+    const handleImageLoad = useCallback((item, e) => {
+        const img = e.currentTarget;
+        setLoading(item.id, false);
+        onImageLoad?.(item, img.naturalWidth, img.naturalHeight);
+    }, [setLoading, onImageLoad]);
+    // Default render function
+    const defaultRenderItem = useCallback((item, index, columnIndex) => {
+        if (item.src) {
+            // Image item
+            return (_jsxs(MasonryCard, { "$borderRadius": 8, children: [isLoading(item.id) && (_jsx(ImagePlaceholder, { "$height": item.height, "$borderRadius": 8 })), _jsx(MasonryImage, { src: item.src, alt: item.alt || '', "$objectFit": "cover", "$borderRadius": 0, "$isLoading": isLoading(item.id), onLoad: (e) => handleImageLoad(item, e), onError: () => setLoading(item.id, false) }), item.content && (_jsx(MasonryCardContent, { children: item.content }))] }));
+        }
+        // Content item
+        if (item.content) {
+            return item.content;
+        }
+        return null;
+    }, [isLoading, handleImageLoad, setLoading]);
+    // Use custom render or default
+    const render = renderItem || defaultRenderItem;
+    // Empty state
+    if (items.length === 0) {
+        return (_jsx(EmptyState, { className: classNames.root, style: styles.root, children: emptyState || (_jsxs(_Fragment, { children: [_jsx(EmptyIcon, {}), _jsx("span", { children: "No items to display" })] })) }));
+    }
+    return (_jsx(MasonryContainer, { ref: ref, "$gutter": gutterSize, className: className || classNames.root, style: { ...styles.root, ...style }, role: "grid", "aria-label": "Masonry layout", children: columnData.map((columnItems, columnIndex) => (_jsx(MasonryColumn, { "$gutter": gutterSize, "$columnCount": columnCount, className: classNames.column, style: styles.column, role: "gridcell", children: columnItems.map((item, itemIndex) => {
+                const currentGlobalIndex = globalIndex++;
+                return (_jsx(MasonryItemWrapper, { "$animated": animated, "$animationDuration": animationDuration, "$staggerIndex": currentGlobalIndex, "$staggerDelay": staggerDelay, "$minHeight": minItemHeight, className: classNames.item, style: styles.item, children: render(item, itemIndex, columnIndex) }, item.id));
+            }) }, columnIndex))) }));
+});
+// Display name
+Masonry.displayName = 'Masonry';
+// MasonryImage component for standalone use
+export const MasonryImageComponent = forwardRef(function MasonryImageComponent(props, ref) {
+    const { src, alt = '', className, style, onLoad, onError, objectFit = 'cover', borderRadius = 8, } = props;
+    const [isLoading, setIsLoading] = useState(true);
+    const handleLoad = (e) => {
+        setIsLoading(false);
+        onLoad?.(e);
+    };
+    const handleError = (e) => {
+        setIsLoading(false);
+        onError?.(e);
+    };
+    return (_jsxs(_Fragment, { children: [isLoading && _jsx(ImagePlaceholder, { "$borderRadius": borderRadius }), _jsx(MasonryImage, { ref: ref, src: src, alt: alt, className: className, style: style, "$objectFit": objectFit, "$borderRadius": borderRadius, "$isLoading": isLoading, onLoad: handleLoad, onError: handleError })] }));
+});
+MasonryImageComponent.displayName = 'MasonryImage';