react-restyle-components 0.4.47 → 0.4.49

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

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

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

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

@@ -1 +1,100 @@
-"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}}
+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.js

@@ -1 +1,3 @@
-"use strict";export{Masonry,MasonryImageComponent as MasonryImage}from"./Masonry";export*from"./types";export{useResponsiveValue,useColumnDistribution,useImageLoading}from"./hooks";
+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.js

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

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

@@ -70,6 +70,8 @@ export interface ModalProps {
     overlayOpacity?: number;
     /** Overlay background color */
     overlayColor?: string;
+    /** Base z-index for overlay/content stack */
+    zIndex?: number;
     /** Click overlay to close */
     closeOnOverlayClick?: boolean;
     /** Close on Escape key */
@@ -97,4 +99,4 @@ export interface ModalProps {
     /** Modal content */
     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;
+export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, zIndex, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;

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

@@ -1 +1,123 @@
-"use strict";import{jsx as a,jsxs as y,Fragment as Q}from"react/jsx-runtime";import{useEffect as x,useState as M}from"react";import e from"../../../tc.module.css";import{cn as r}from"../../../utils";export const Modal=({visible:h,title:d="",className:E="",contentClassName:Y="",headerClassName:$="",style:R={},contentStyle:W={},onClose:t,isAutoClose:s=!1,autoCloseDelay:b=1e3,size:f="md",position:c="center",showCloseButton:v=!0,closeButton:_,overlayOpacity:B=.5,overlayColor:F,closeOnOverlayClick:I=!0,closeOnEscape:w=!0,showHeader:N=!0,headerBgColor:S,headerTextColor:k,borderRadius:p="0.5rem",maxWidth:H,contentPadding:P="1rem",headerPadding:q="1rem",animationDuration:i=300,classNames:n={},styles:o={},children:z})=>{const[m,j]=M(h),[u,T]=M(!1);x(()=>{h?(j(!0),setTimeout(()=>T(!0),10)):(T(!1),setTimeout(()=>j(!1),i))},[h,i]),x(()=>{if(m&&s){const g=setTimeout(()=>{t&&t()},typeof s=="number"?s:b);return()=>clearTimeout(g)}},[m,s,b,t]),x(()=>{if(!w||!m)return;const l=g=>{g.key==="Escape"&&t&&t()};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[m,w,t]);const L=l=>{I&&l.target===l.currentTarget&&t&&t()},G=()=>{t&&t()},J={sm:"28rem",md:"32rem",lg:"42rem",xl:"56rem",full:"95%"},K={center:e["items-center"],top:e["items-start"],bottom:e["items-end"]},O=H||(f!=="full"?J[f]:"95%");return m?y(Q,{children:[a("div",{className:r(e.fixed,e["inset-0"],e["z-40"],e["bg-black"],n.overlay),style:{opacity:u?B:0,transition:`opacity ${i}ms ease-in-out`,backgroundColor:F||void 0,...o.overlay},onClick:L}),a("div",{className:r(e.flex,e["justify-center"],K[c],e["overflow-x-hidden"],e["overflow-y-auto"],e.fixed,e["inset-0"],e["z-50"],e["outline-none"],e["focus:outline-none"],E,n.container),style:{...R,transition:`opacity ${i}ms ease-in-out`,opacity:u?1:0,...o.container},onClick:L,children:a("div",{className:r(e.relative,e["w-full"],e["my-5"],e["mx-auto"],n.wrapper),style:{maxWidth:O,marginLeft:f==="full"?"1rem":void 0,marginRight:f==="full"?"1rem":void 0,transform:u?c==="center"?"scale(1)":"translateY(0)":c==="center"?"scale(0.95)":c==="top"?"translateY(-20px)":"translateY(20px)",transition:`transform ${i}ms ease-out, opacity ${i}ms ease-out`,opacity:u?1:0,...o.wrapper},onClick:l=>l.stopPropagation(),children:y("div",{className:r(e["border-0"],e["shadow-xl"],e.relative,e.flex,e["flex-col"],e["bg-white"],e["outline-none"],e["focus:outline-none"],Y,n.content),style:{borderRadius:p,...W,...o.content},children:[N&&y("div",{className:r(e.flex,e["items-center"],e["justify-between"],e["border-b"],e["border-solid"],e["border-gray-200"],$,n.header),style:{padding:q,backgroundColor:S,borderTopLeftRadius:p,borderTopRightRadius:p,borderBottom:d||v?void 0:"none",...o.header},children:[d&&a("h3",{className:r(e["text-xl"],e["font-semibold"],e["m-0"],e["flex-1"],n.title),style:{color:k,...o.title},children:d}),v&&a("button",{type:"button",className:r(e["p-1"],e["ml-4"],e["border-0"],e["bg-transparent"],e["cursor-pointer"],e["outline-none"],e["focus:outline-none"],e["transition-colors"],e["hover:bg-gray-100"],e.rounded,n.closeButton),onClick:G,"aria-label":"Close modal",style:{marginLeft:d?"1rem":0,marginRight:d?0:"auto",...o.closeButton},children:_||a("span",{className:r(e.block,e["text-2xl"],e["leading-none"],e["font-light"]),style:{color:k||"#1f2937",height:"1.5rem",width:"1.5rem",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1},children:"\xD7"})})]}),a("div",{className:r(e.flex,e["flex-col"],e["w-full"],e["h-auto"],e["overflow-y-auto"],n.body),style:{padding:P,...o.body},children:z})]})})})]}):null};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, zIndex = 11000, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
+    const [showModal, setShowModal] = useState(visible);
+    const [isAnimating, setIsAnimating] = useState(false);
+    useEffect(() => {
+        if (visible) {
+            setShowModal(true);
+            setTimeout(() => setIsAnimating(true), 10);
+        }
+        else {
+            setIsAnimating(false);
+            setTimeout(() => setShowModal(false), animationDuration);
+        }
+    }, [visible, animationDuration]);
+    useEffect(() => {
+        if (showModal && isAutoClose) {
+            const delay = typeof isAutoClose === 'number' ? isAutoClose : autoCloseDelay;
+            const timer = setTimeout(() => {
+                onClose && onClose();
+            }, delay);
+            return () => clearTimeout(timer);
+        }
+    }, [showModal, isAutoClose, autoCloseDelay, onClose]);
+    useEffect(() => {
+        if (!closeOnEscape || !showModal)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose && onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [showModal, closeOnEscape, onClose]);
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose && onClose();
+        }
+    };
+    const handleClose = () => {
+        onClose && onClose();
+    };
+    const sizeMaxWidths = {
+        sm: '28rem',
+        md: '32rem',
+        lg: '42rem',
+        xl: '56rem',
+        full: '95%',
+    };
+    const positionClasses = {
+        center: s['items-center'],
+        top: s['items-start'],
+        bottom: s['items-end'],
+    };
+    const modalMaxWidth = maxWidth || (size !== 'full' ? sizeMaxWidths[size] : '95%');
+    const baseZIndex = zIndex ?? 11000;
+    const overlayZIndex = styles.overlay?.zIndex ?? baseZIndex;
+    const containerZIndex = styles.container?.zIndex ??
+        (typeof style.zIndex === 'number' ? style.zIndex : undefined) ??
+        baseZIndex + 1;
+    if (!showModal)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: {
+                    opacity: isAnimating ? overlayOpacity : 0,
+                    transition: `opacity ${animationDuration}ms ease-in-out`,
+                    backgroundColor: overlayColor || undefined,
+                    zIndex: overlayZIndex,
+                    ...styles.overlay,
+                }, onClick: handleOverlayClick }), _jsx("div", { className: cn(s['flex'], s['justify-center'], positionClasses[position], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], className, classNames.container), style: {
+                    ...style,
+                    transition: `opacity ${animationDuration}ms ease-in-out`,
+                    opacity: isAnimating ? 1 : 0,
+                    zIndex: containerZIndex,
+                    ...styles.container,
+                }, onClick: handleOverlayClick, children: _jsx("div", { className: cn(s['relative'], s['w-full'], s['my-5'], s['mx-auto'], classNames.wrapper), style: {
+                        maxWidth: modalMaxWidth,
+                        marginLeft: size === 'full' ? '1rem' : undefined,
+                        marginRight: size === 'full' ? '1rem' : undefined,
+                        transform: isAnimating
+                            ? position === 'center'
+                                ? 'scale(1)'
+                                : position === 'top'
+                                    ? 'translateY(0)'
+                                    : 'translateY(0)'
+                            : position === 'center'
+                                ? 'scale(0.95)'
+                                : position === 'top'
+                                    ? 'translateY(-20px)'
+                                    : 'translateY(20px)',
+                        transition: `transform ${animationDuration}ms ease-out, opacity ${animationDuration}ms ease-out`,
+                        opacity: isAnimating ? 1 : 0,
+                        ...styles.wrapper,
+                    }, onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(s['border-0'], s['shadow-xl'], s['relative'], s['flex'], s['flex-col'], s['bg-white'], s['outline-none'], s['focus:outline-none'], contentClassName, classNames.content), style: {
+                            borderRadius,
+                            ...contentStyle,
+                            ...styles.content,
+                        }, children: [showHeader && (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['border-b'], s['border-solid'], s['border-gray-200'], headerClassName, classNames.header), style: {
+                                    padding: headerPadding,
+                                    backgroundColor: headerBgColor,
+                                    borderTopLeftRadius: borderRadius,
+                                    borderTopRightRadius: borderRadius,
+                                    borderBottom: title || showCloseButton ? undefined : 'none',
+                                    ...styles.header,
+                                }, children: [title && (_jsx("h3", { className: cn(s['text-xl'], s['font-semibold'], s['m-0'], s['flex-1'], classNames.title), style: { color: headerTextColor, ...styles.title }, children: title })), showCloseButton && (_jsx("button", { type: "button", className: cn(s['p-1'], s['ml-4'], s['border-0'], s['bg-transparent'], s['cursor-pointer'], s['outline-none'], s['focus:outline-none'], s['transition-colors'], s['hover:bg-gray-100'], s['rounded'], classNames.closeButton), onClick: handleClose, "aria-label": "Close modal", style: {
+                                            marginLeft: title ? '1rem' : 0,
+                                            marginRight: title ? 0 : 'auto',
+                                            ...styles.closeButton,
+                                        }, children: closeButton || (_jsx("span", { className: cn(s['block'], s['text-2xl'], s['leading-none'], s['font-light']), style: {
+                                                color: headerTextColor || '#1f2937',
+                                                height: '1.5rem',
+                                                width: '1.5rem',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                lineHeight: 1,
+                                            }, children: "\u00D7" })) }))] })), _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['h-auto'], s['overflow-y-auto'], classNames.body), style: {
+                                    padding: contentPadding,
+                                    ...styles.body,
+                                }, children: children })] }) }) })] }));
+};

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

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