react-restyle-components 0.4.22 → 0.4.24

package/lib/src/core-components/src/components/DynamicGrid/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/DynamicGrid/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAmC,MAAM,OAAO,CAAC;AACzE,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,aAAa,EAGb,YAAY,EACb,MAAM,SAAS,CAAC;AAYjB;;GAEG;AACH,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAiB,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,OAAO,QAAS,MAAM,KAAG,MAAkB,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,WAAW,QAAS,OAAO,GAAG,aAAa,KAAG,MAK1D,CAAC;AAEF;;GAEG;AACH,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAKD,eAAO,MAAM,WAAW,qEAOrB,iBAAiB,KAAG,MAetB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,sBACZ,iBAAiB,eACvB,MAAM,KAClB,MAuBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,QAAO,MAiBjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,QACtB,UAAU,WAAW,CAAC,oBACT,MAAM,UAAU,MAAM,KAAK,IAAI,KAChD,IAuBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,QAC9B,UAAU,WAAW,CAAC,WAClB,YAAY,KACpB,IA8BF,CAAC;AAEF;;GAEG;AACH,UAAU,yBAAyB;IACjC,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,QACzB,UAAU,WAAW,CAAC,aAChB,MAAM,WACR,MAAM,KACd,yBA6DF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,aAAc,MAAM,SAAS,KAAG,MAIxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,QAAO,MACiB,CAAC"}

package/lib/src/core-components/src/components/DynamicGrid/utils.js

@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useState } from 'react';
+import { gapSizeValues, gapSizes, } from './types';
+// Breakpoint values in pixels
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 375,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1440,
+};
+/**
+ * Convert pixels to rem
+ */
+export const pxToRem = (px) => px / 16;
+/**
+ * Convert rem to pixels
+ */
+export const remToPx = (rem) => rem * 16;
+/**
+ * Get gap value from GapSize or LegacyGapSize
+ */
+export const getGapValue = (gap) => {
+    if (typeof gap === 'number') {
+        return gapSizes[gap] || gapSizes[1];
+    }
+    return gapSizeValues[gap] || gapSizeValues.md;
+};
+const moduloColumns = (columns, modulo) => Math.floor(columns / modulo) * modulo;
+export const calcColumns = ({ minWidth, elementWidth, gap, modulo, maxColumns, scrollHint = 0, }) => {
+    if (elementWidth === 0)
+        return 1;
+    const gapSize = parseFloat(gap);
+    const elementWidthInRem = pxToRem(elementWidth);
+    const columns = Math.min(Math.floor((elementWidthInRem + gapSize - minWidth * scrollHint) /
+        (minWidth + gapSize)), maxColumns);
+    return Math.max(1, moduloColumns(columns, modulo));
+};
+/**
+ * Get responsive columns based on window width
+ */
+export const getResponsiveColumns = (responsiveColumns, windowWidth) => {
+    let columns = 1;
+    if (responsiveColumns.xs !== undefined && windowWidth >= BREAKPOINTS.xs) {
+        columns = responsiveColumns.xs;
+    }
+    if (responsiveColumns.sm !== undefined && windowWidth >= BREAKPOINTS.sm) {
+        columns = responsiveColumns.sm;
+    }
+    if (responsiveColumns.md !== undefined && windowWidth >= BREAKPOINTS.md) {
+        columns = responsiveColumns.md;
+    }
+    if (responsiveColumns.lg !== undefined && windowWidth >= BREAKPOINTS.lg) {
+        columns = responsiveColumns.lg;
+    }
+    if (responsiveColumns.xl !== undefined && windowWidth >= BREAKPOINTS.xl) {
+        columns = responsiveColumns.xl;
+    }
+    if (responsiveColumns['2xl'] !== undefined && windowWidth >= BREAKPOINTS['2xl']) {
+        columns = responsiveColumns['2xl'];
+    }
+    return columns;
+};
+/**
+ * Hook to get current window width
+ */
+export const useWindowWidth = () => {
+    const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            setWidth(window.innerWidth);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return width;
+};
+/**
+ * Hook to observe element resize
+ */
+export const useElementResize = (ref, callback) => {
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Initial size
+        callback(element.clientWidth, element.clientHeight);
+        if (!window.ResizeObserver)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            window.requestAnimationFrame(() => {
+                const entry = entries[0];
+                if (entry) {
+                    callback(entry.contentRect.width, entry.contentRect.height);
+                }
+            });
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref, callback]);
+};
+/**
+ * Hook to handle keyboard focus scrolling in scroll mode
+ */
+export const useScrollToKeyboardFocus = (ref, scroll) => {
+    const scrollToFocused = useCallback((keyboardEvent) => {
+        const { target } = keyboardEvent;
+        if (target instanceof HTMLElement &&
+            scroll?.enabled &&
+            keyboardEvent.key === 'Tab') {
+            target.scrollIntoView({
+                inline: 'center',
+                block: 'nearest',
+                behavior: scroll.smoothScroll !== false ? 'smooth' : 'auto',
+            });
+        }
+    }, [scroll]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.addEventListener('keyup', scrollToFocused);
+        return () => {
+            element.removeEventListener('keyup', scrollToFocused);
+        };
+    }, [scrollToFocused, ref]);
+};
+export const useScrollNavigation = (ref, itemCount, columns) => {
+    const [scrollState, setScrollState] = useState({
+        canScrollLeft: false,
+        canScrollRight: true,
+        currentPage: 0,
+    });
+    const totalPages = Math.ceil(itemCount / columns);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const handleScroll = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = element;
+            const canScrollLeft = scrollLeft > 0;
+            const canScrollRight = scrollLeft + clientWidth < scrollWidth - 1;
+            const currentPage = Math.round(scrollLeft / clientWidth);
+            setScrollState({ canScrollLeft, canScrollRight, currentPage });
+        };
+        element.addEventListener('scroll', handleScroll);
+        handleScroll(); // Initial check
+        return () => element.removeEventListener('scroll', handleScroll);
+    }, [ref]);
+    const scrollTo = useCallback((index) => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const { clientWidth } = element;
+        element.scrollTo({
+            left: index * clientWidth,
+            behavior: 'smooth',
+        });
+    }, [ref]);
+    const scrollLeft = useCallback(() => {
+        if (scrollState.currentPage > 0) {
+            scrollTo(scrollState.currentPage - 1);
+        }
+    }, [scrollState.currentPage, scrollTo]);
+    const scrollRight = useCallback(() => {
+        if (scrollState.currentPage < totalPages - 1) {
+            scrollTo(scrollState.currentPage + 1);
+        }
+    }, [scrollState.currentPage, totalPages, scrollTo]);
+    return {
+        ...scrollState,
+        totalPages,
+        scrollTo,
+        scrollLeft,
+        scrollRight,
+    };
+};
+/**
+ * Get item count from children
+ */
+export const getItemCount = (children) => {
+    if (!children)
+        return 0;
+    if (Array.isArray(children))
+        return children.filter(Boolean).length;
+    return 1;
+};
+/**
+ * Generate unique ID for accessibility
+ */
+export const generateGridId = () => `grid-${Math.random().toString(36).substr(2, 9)}`;

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

@@ -114,5 +114,5 @@ type TextareaSpecificProps = {
 export interface FormFieldProps extends BaseFormFieldProps, SafeHTMLAttributes, FieldEventHandlers, Partial<InputSpecificProps>, Partial<TextareaSpecificProps> {
     [key: string]: any;
 }
-export declare const FormField: React.ForwardRefExoticComponent<Omit<FormFieldProps, "ref"> & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const FormField: React.ForwardRefExoticComponent<Omit<FormFieldProps, "ref"> & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 //# sourceMappingURL=FormField.d.ts.map

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import _ from 'lodash';
-import { Tooltip } from '../Tooltip/tooltip.component';
+import { Tooltip } from '../Tooltip';
 import loadable from '@loadable/component';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MasonryProps, MasonryItem, MasonryImageProps } from './types';
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Masonry/Masonry.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAY1E,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAarE,eAAO,MAAM,OAAO;;MAyJf,MAAM,YAAY,CAAC;AAMxB,eAAO,MAAM,qBAAqB,4FA2CjC,CAAC"}

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

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

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const MasonryContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $gutter: number;
+}>> & string;
+export declare const MasonryColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $gutter: number;
+    $columnCount: number;
+}>> & string;
+export declare const MasonryItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $animated: boolean;
+    $animationDuration: number;
+    $staggerIndex: number;
+    $staggerDelay: number;
+    $minHeight?: number | undefined;
+}>> & string;
+export declare const MasonryImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    $objectFit: string;
+    $borderRadius: string | number;
+    $isLoading: boolean;
+}>> & string;
+export declare const ImagePlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height?: string | number | undefined;
+    $borderRadius: string | number;
+}>> & string;
+export declare const EmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MasonryCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $borderRadius: string | number;
+}>> & 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Masonry/elements.tsx"],"names":[],"mappings":";AAyBA,eAAO,MAAM,gBAAgB;aAClB,MAAM;YAMhB,CAAC;AAEF,eAAO,MAAM,aAAa;aACf,MAAM;kBACD,MAAM;YAOrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;eAClB,OAAO;wBACE,MAAM;mBACX,MAAM;mBACN,MAAM;;YA2BtB,CAAC;AAEF,eAAO,MAAM,YAAY;gBACX,MAAM;mBACH,MAAM,GAAG,MAAM;gBAClB,OAAO;YAepB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;mBAEZ,MAAM,GAAG,MAAM;YAe/B,CAAC;AAEF,eAAO,MAAM,UAAU,6NAgBtB,CAAC;AAGF,eAAO,MAAM,WAAW;mBACP,MAAM,GAAG,MAAM;YAa/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,oOAI5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAE9B,CAAC"}

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

@@ -0,0 +1,122 @@
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+// Animations
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const shimmer = keyframes `
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+export const MasonryContainer = styled.div `
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  gap: ${({ $gutter }) => $gutter}px;
+`;
+export const MasonryColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: ${({ $gutter }) => $gutter}px;
+`;
+export const MasonryItemWrapper = styled.div `
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  
+  ${({ $minHeight }) => $minHeight &&
+    css `
+      min-height: ${$minHeight}px;
+    `}
+  
+  /* Animation */
+  ${({ $animated, $animationDuration, $staggerIndex, $staggerDelay }) => $animated &&
+    css `
+      opacity: 0;
+      animation: ${fadeIn} ${$animationDuration}ms ease-out forwards;
+      animation-delay: ${$staggerIndex * $staggerDelay}ms;
+    `}
+  
+  /* Reduce motion */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 1;
+  }
+`;
+export const MasonryImage = styled.img `
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: ${({ $objectFit }) => $objectFit};
+  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
+  transition: opacity 0.3s ease;
+  
+  ${({ $isLoading }) => $isLoading &&
+    css `
+      opacity: 0;
+    `}
+`;
+export const ImagePlaceholder = styled.div `
+  width: 100%;
+  height: ${({ $height }) => $height ? (typeof $height === 'number' ? `${$height}px` : $height) : '200px'};
+  background: linear-gradient(
+    90deg,
+    ${tokens.surface || '#f0f0f0'} 25%,
+    ${tokens.outlineSoft || '#e5e5e5'} 50%,
+    ${tokens.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 `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6b7280'};
+  font-size: 14px;
+  
+  svg {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+`;
+// Card style for default item rendering
+export const MasonryCard = styled.div `
+  background: white;
+  border-radius: ${({ $borderRadius }) => typeof $borderRadius === 'number' ? `${$borderRadius}px` : $borderRadius};
+  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;
+  
+  &:hover {
+    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 `
+  width: 100%;
+  height: auto;
+  display: block;
+`;
+export const MasonryCardContent = styled.div `
+  padding: 12px 16px;
+`;

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

@@ -0,0 +1,21 @@
+import { MasonryBreakpoints } from './types';
+/**
+ * Hook to get responsive value based on current viewport width
+ */
+export declare function useResponsiveValue<T extends number>(value: T | MasonryBreakpoints, defaultValue: T): T;
+/**
+ * Hook to distribute items into columns
+ */
+export declare function useColumnDistribution<T extends {
+    id: string | number;
+    column?: number;
+}>(items: T[], columnCount: number, sequential?: boolean): T[][];
+/**
+ * Hook to track image loading states
+ */
+export declare function useImageLoading(): {
+    setLoading: (id: string | number, isLoading: boolean) => void;
+    isLoading: (id: string | number) => boolean;
+    isLoaded: (id: string | number) => boolean;
+};
+//# sourceMappingURL=hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Masonry/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAY3C;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EACjD,KAAK,EAAE,CAAC,GAAG,kBAAkB,EAC7B,YAAY,EAAE,CAAC,GACd,CAAC,CAuBH;AAmBD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS;IAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAC,EACpF,KAAK,EAAE,CAAC,EAAE,EACV,WAAW,EAAE,MAAM,EACnB,UAAU,GAAE,OAAe,GAC1B,CAAC,EAAE,EAAE,CAmCP;AAED;;GAEG;AACH,wBAAgB,eAAe;qBAIO,MAAM,GAAG,MAAM,aAAa,OAAO;oBAOpC,MAAM,GAAG,MAAM;mBAIhB,MAAM,GAAG,MAAM;EAKlD"}

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

@@ -0,0 +1,100 @@
+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 };
+}

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

@@ -0,0 +1,4 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Masonry/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,qBAAqB,IAAI,YAAY,EAAC,MAAM,WAAW,CAAC;AACzE,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,kBAAkB,EAAE,qBAAqB,EAAE,eAAe,EAAC,MAAM,SAAS,CAAC"}

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

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