react-restyle-components 0.4.36 → 0.4.38

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

@@ -1,216 +1,4 @@
-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: `
+"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:`
         @keyframes spin {
           from {
             transform: rotate(0deg);
@@ -243,5 +31,4 @@ export const LoadingAnimateSpin = ({ classWarper = '', className = '', variant =
             opacity: 0.8;
           }
         }
-      ` }), renderLoader()] }));
-};
+      `}),M()]})};

package/lib/src/core-components/src/components/Masonry/Masonry.d.ts

@@ -4,4 +4,3 @@ export declare const Masonry: <T extends MasonryItem>(props: MasonryProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined;
 }) => React.ReactElement;
 export declare const MasonryImageComponent: React.ForwardRefExoticComponent<MasonryImageProps & React.RefAttributes<HTMLImageElement>>;
-//# sourceMappingURL=Masonry.d.ts.map

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

@@ -1,73 +1 @@
-'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';
+"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";

package/lib/src/core-components/src/components/Masonry/elements.d.ts

@@ -28,4 +28,3 @@ export declare const MasonryCard: import("styled-components/dist/types").IStyled
 }>> & string;
 export declare const MasonryCardImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const MasonryCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-//# sourceMappingURL=elements.d.ts.map

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

@@ -1,7 +1,4 @@
-import { styled, css, keyframes } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-// Animations
-const fadeIn = keyframes `
+"use strict";import{styled as t,css as n,keyframes as a}from"styled-components";import{tokens as e}from"../../utils/designTokens";const s=a`
   from {
     opacity: 0;
     transform: translateY(10px);
@@ -10,44 +7,38 @@ const fadeIn = keyframes `
     opacity: 1;
     transform: translateY(0);
   }
-`;
-const shimmer = keyframes `
+`,x=a`
   0% {
     background-position: -200% 0;
   }
   100% {
     background-position: 200% 0;
   }
-`;
-export const MasonryContainer = styled.div `
+`;export const MasonryContainer=t.div`
   display: flex;
   width: 100%;
   box-sizing: border-box;
-  gap: ${({ $gutter }) => $gutter}px;
-`;
-export const MasonryColumn = styled.div `
+  gap: ${({$gutter:o})=>o}px;
+`,MasonryColumn=t.div`
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  gap: ${({ $gutter }) => $gutter}px;
-`;
-export const MasonryItemWrapper = styled.div `
+  gap: ${({$gutter:o})=>o}px;
+`,MasonryItemWrapper=t.div`
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
   
-  ${({ $minHeight }) => $minHeight &&
-    css `
-      min-height: ${$minHeight}px;
+  ${({$minHeight:o})=>o&&n`
+      min-height: ${o}px;
     `}
   
   /* Animation */
-  ${({ $animated, $animationDuration, $staggerIndex, $staggerDelay }) => $animated &&
-    css `
+  ${({$animated:o,$animationDuration:i,$staggerIndex:r,$staggerDelay:p})=>o&&n`
       opacity: 0;
-      animation: ${fadeIn} ${$animationDuration}ms ease-out forwards;
-      animation-delay: ${$staggerIndex * $staggerDelay}ms;
+      animation: ${s} ${i}ms ease-out forwards;
+      animation-delay: ${r*p}ms;
     `}
   
   /* Reduce motion */
@@ -55,41 +46,37 @@ export const MasonryItemWrapper = styled.div `
     animation: none;
     opacity: 1;
   }
-`;
-export const MasonryImage = styled.img `
+`,MasonryImage=t.img`
   width: 100%;
   height: auto;
   display: block;
-  object-fit: ${({ $objectFit }) => $objectFit};
-  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
+  object-fit: ${({$objectFit:o})=>o};
+  border-radius: ${({$borderRadius:o})=>typeof o=="number"?`${o}px`:o};
   transition: opacity 0.3s ease;
   
-  ${({ $isLoading }) => $isLoading &&
-    css `
+  ${({$isLoading:o})=>o&&n`
       opacity: 0;
     `}
-`;
-export const ImagePlaceholder = styled.div `
+`,ImagePlaceholder=t.div`
   width: 100%;
-  height: ${({ $height }) => $height ? (typeof $height === 'number' ? `${$height}px` : $height) : '200px'};
+  height: ${({$height:o})=>o?typeof o=="number"?`${o}px`:o:"200px"};
   background: linear-gradient(
     90deg,
-    ${tokens.surface || '#f0f0f0'} 25%,
-    ${tokens.outlineSoft || '#e5e5e5'} 50%,
-    ${tokens.surface || '#f0f0f0'} 75%
+    ${e.surface||"#f0f0f0"} 25%,
+    ${e.outlineSoft||"#e5e5e5"} 50%,
+    ${e.surface||"#f0f0f0"} 75%
   );
   background-size: 400% 100%;
-  animation: ${shimmer} 1.5s ease-in-out infinite;
-  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
-`;
-export const EmptyState = styled.div `
+  animation: ${x} 1.5s ease-in-out infinite;
+  border-radius: ${({$borderRadius:o})=>typeof o=="number"?`${o}px`:o};
+`,EmptyState=t.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
   text-align: center;
-  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6b7280'};
+  color: ${e.onSurface?`${e.onSurface}80`:"#6b7280"};
   font-size: 14px;
   
   svg {
@@ -98,11 +85,9 @@ export const EmptyState = styled.div `
     margin-bottom: 16px;
     opacity: 0.5;
   }
-`;
-// Card style for default item rendering
-export const MasonryCard = styled.div `
+`,MasonryCard=t.div`
   background: white;
-  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
+  border-radius: ${({$borderRadius:o})=>typeof o=="number"?`${o}px`:o};
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -111,12 +96,10 @@ export const MasonryCard = styled.div `
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   }
-`;
-export const MasonryCardImage = styled.img `
+`,MasonryCardImage=t.img`
   width: 100%;
   height: auto;
   display: block;
-`;
-export const MasonryCardContent = styled.div `
+`,MasonryCardContent=t.div`
   padding: 12px 16px;
 `;

package/lib/src/core-components/src/components/Masonry/hooks.d.ts

@@ -18,4 +18,3 @@ export declare function useImageLoading(): {
     isLoading: (id: string | number) => boolean;
     isLoaded: (id: string | number) => boolean;
 };
-//# sourceMappingURL=hooks.d.ts.map

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

@@ -1,100 +1 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-// Breakpoint values in pixels
-const BREAKPOINT_VALUES = {
-    xs: 0,
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
-};
-/**
- * Hook to get responsive value based on current viewport width
- */
-export function useResponsiveValue(value, defaultValue) {
-    const [currentValue, setCurrentValue] = useState(() => {
-        if (typeof value === 'number')
-            return value;
-        return getResponsiveValue(value, defaultValue, typeof window !== 'undefined' ? window.innerWidth : 1024);
-    });
-    useEffect(() => {
-        if (typeof value === 'number') {
-            setCurrentValue(value);
-            return;
-        }
-        const handleResize = () => {
-            const width = window.innerWidth;
-            setCurrentValue(getResponsiveValue(value, defaultValue, width));
-        };
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [value, defaultValue]);
-    return currentValue;
-}
-function getResponsiveValue(breakpoints, defaultValue, width) {
-    const sortedBreakpoints = Object.entries(BREAKPOINT_VALUES)
-        .sort(([, a], [, b]) => b - a);
-    for (const [key, breakpointWidth] of sortedBreakpoints) {
-        if (width >= breakpointWidth && breakpoints[key] !== undefined) {
-            return breakpoints[key];
-        }
-    }
-    return defaultValue;
-}
-/**
- * Hook to distribute items into columns
- */
-export function useColumnDistribution(items, columnCount, sequential = false) {
-    return useMemo(() => {
-        const columns = Array.from({ length: columnCount }, () => []);
-        if (sequential) {
-            // Sequential: place items in order, filling columns one by one
-            items.forEach((item, index) => {
-                const columnIndex = item.column !== undefined
-                    ? Math.min(item.column, columnCount - 1)
-                    : index % columnCount;
-                columns[columnIndex].push(item);
-            });
-        }
-        else {
-            // Balanced: distribute items to shortest column
-            const columnHeights = Array(columnCount).fill(0);
-            items.forEach((item) => {
-                let targetColumn;
-                if (item.column !== undefined) {
-                    // Respect specified column
-                    targetColumn = Math.min(item.column, columnCount - 1);
-                }
-                else {
-                    // Find shortest column
-                    targetColumn = columnHeights.indexOf(Math.min(...columnHeights));
-                }
-                columns[targetColumn].push(item);
-                // Increment height (use 1 as placeholder, actual heights vary)
-                columnHeights[targetColumn]++;
-            });
-        }
-        return columns;
-    }, [items, columnCount, sequential]);
-}
-/**
- * Hook to track image loading states
- */
-export function useImageLoading() {
-    const [loadingStates, setLoadingStates] = useState({});
-    const [loadedImages, setLoadedImages] = useState(new Set());
-    const setLoading = useCallback((id, isLoading) => {
-        setLoadingStates(prev => ({ ...prev, [id]: isLoading }));
-        if (!isLoading) {
-            setLoadedImages(prev => new Set(prev).add(id));
-        }
-    }, []);
-    const isLoading = useCallback((id) => {
-        return loadingStates[id] ?? true;
-    }, [loadingStates]);
-    const isLoaded = useCallback((id) => {
-        return loadedImages.has(id);
-    }, [loadedImages]);
-    return { setLoading, isLoading, isLoaded };
-}
+"use strict";import{useState as c,useEffect as m,useCallback as f,useMemo as w}from"react";const g={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536};export function useResponsiveValue(n,t){const[s,o]=c(()=>typeof n=="number"?n:h(n,t,typeof window<"u"?window.innerWidth:1024));return m(()=>{if(typeof n=="number"){o(n);return}const e=()=>{const r=window.innerWidth;o(h(n,t,r))};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[n,t]),s}function h(n,t,s){const o=Object.entries(g).sort(([,e],[,r])=>r-e);for(const[e,r]of o)if(s>=r&&n[e]!==void 0)return n[e];return t}export function useColumnDistribution(n,t,s=!1){return w(()=>{const o=Array.from({length:t},()=>[]);if(s)n.forEach((e,r)=>{const i=e.column!==void 0?Math.min(e.column,t-1):r%t;o[i].push(e)});else{const e=Array(t).fill(0);n.forEach(r=>{let i;r.column!==void 0?i=Math.min(r.column,t-1):i=e.indexOf(Math.min(...e)),o[i].push(r),e[i]++})}return o},[n,t,s])}export function useImageLoading(){const[n,t]=c({}),[s,o]=c(new Set),e=f((d,a)=>{t(u=>({...u,[d]:a})),a||o(u=>new Set(u).add(d))},[]),r=f(d=>n[d]??!0,[n]),i=f(d=>s.has(d),[s]);return{setLoading:e,isLoading:r,isLoaded:i}}

package/lib/src/core-components/src/components/Masonry/index.d.ts

@@ -1,4 +1,3 @@
 export { Masonry, MasonryImageComponent as MasonryImage } from './Masonry';
 export * from './types';
 export { useResponsiveValue, useColumnDistribution, useImageLoading } from './hooks';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1 @@
-export { Masonry, MasonryImageComponent as MasonryImage } from './Masonry';
-export * from './types';
-export { useResponsiveValue, useColumnDistribution, useImageLoading } from './hooks';
+"use strict";export{Masonry,MasonryImageComponent as MasonryImage}from"./Masonry";export*from"./types";export{useResponsiveValue,useColumnDistribution,useImageLoading}from"./hooks";

package/lib/src/core-components/src/components/Masonry/types.d.ts

@@ -114,4 +114,3 @@ export interface MasonryImageProps {
     /** Border radius */
     borderRadius?: string | number;
 }
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-export {};
+"use strict";export{};

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts

@@ -98,4 +98,3 @@ export interface ModalProps {
     children: React.ReactNode;
 }
 export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;
-//# sourceMappingURL=modal.component.d.ts.map