react-restyle-components 0.4.36 → 0.4.38

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

@@ -1,147 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { Children, forwardRef, useMemo, useRef, useState, useCallback, createContext, useContext, } from 'react';
-import { cn } from '../../utils';
-import s from '../../tc.module.css';
-import { GridWrapper, GridContainer, GridItem, SkeletonItem, EmptyState, ScrollArrow, ScrollDots, ScrollDot, } from './elements';
-import { gapSizeValues, } from './types';
-import { calcColumns, getGapValue, getResponsiveColumns, useWindowWidth, useElementResize, useScrollToKeyboardFocus, useScrollNavigation, getItemCount, } from './utils';
-// Grid context for nested components
-const GridContext = createContext(null);
-export const useGridContext = () => useContext(GridContext);
-// Arrow icons
-const ChevronLeftIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }));
-const ChevronRightIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
-// Empty icon
-const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" })] }));
-// Default empty state
-const DefaultEmptyState = () => (_jsxs(EmptyState, { children: [_jsx(EmptyIcon, {}), _jsx("p", { className: cn(s['text-gray-500'], s['text-sm']), children: "No items to display" })] }));
-// Default skeleton renderer
-const DefaultSkeleton = ({ aspectRatio }) => (_jsx(SkeletonItem, { "$aspectRatio": aspectRatio }));
-export const DynamicGrid = forwardRef(function DynamicGridComponent(props, fRef) {
-    const { children, 
-    // Layout
-    minWidth = 10, maxWidth, columns: fixedColumns, responsiveColumns, maxColumns = Infinity, maxRows, autoFit = false, modulo = 1, 
-    // Spacing
-    gap = 'md', rowGap, columnGap, 
-    // Styling
-    variant = 'default', alignItems, justifyItems, alignContent, justifyContent, 
-    // Scroll
-    scroll, scrollEnabled, 
-    // Animation
-    animation, 
-    // Item config
-    itemConfig, 
-    // Accessibility
-    role = 'none', elementRole, ariaLabel, 
-    // State
-    isLoading = false, skeletonCount = 6, renderSkeleton, emptyState, 
-    // Events
-    onLayoutChange, onScrollChange, 
-    // Styling
-    className, style, containerClassName, itemClassName, ...rest } = props;
-    const innerRef = useRef(null);
-    const gridRef = useRef(null);
-    const [elementWidth, setElementWidth] = useState(0);
-    const windowWidth = useWindowWidth();
-    // Merge scroll config
-    const scrollConfig = useMemo(() => scroll?.enabled || scrollEnabled
-        ? {
-            enabled: true,
-            scrollHint: scroll?.scrollHint ?? 0.5,
-            hideScrollbar: scroll?.hideScrollbar ?? false,
-            scrollSnapAlign: scroll?.scrollSnapAlign ?? 'start',
-            smoothScroll: scroll?.smoothScroll ?? true,
-            showArrows: scroll?.showArrows ?? true,
-            showDots: scroll?.showDots ?? false,
-            ...scroll,
-        }
-        : undefined, [scroll, scrollEnabled]);
-    // Handle element resize
-    const handleResize = useCallback((width) => {
-        setElementWidth(width);
-    }, []);
-    useElementResize(innerRef, handleResize);
-    // Calculate columns
-    const calculatedColumns = useMemo(() => {
-        // Use fixed columns if provided
-        if (fixedColumns)
-            return fixedColumns;
-        // Use responsive columns if provided
-        if (responsiveColumns) {
-            return getResponsiveColumns(responsiveColumns, windowWidth);
-        }
-        // Calculate based on container width
-        const gapValue = getGapValue(gap);
-        return calcColumns({
-            minWidth,
-            elementWidth,
-            gap: gapValue,
-            modulo,
-            maxColumns,
-            scrollHint: scrollConfig?.scrollHint,
-        });
-    }, [
-        fixedColumns,
-        responsiveColumns,
-        windowWidth,
-        minWidth,
-        elementWidth,
-        gap,
-        modulo,
-        maxColumns,
-        scrollConfig?.scrollHint,
-    ]);
-    // Handle keyboard focus scroll
-    useScrollToKeyboardFocus(gridRef, scrollConfig);
-    // Scroll navigation
-    const itemCount = getItemCount(children);
-    const scrollNav = useScrollNavigation(gridRef, itemCount, calculatedColumns);
-    // Notify layout changes
-    React.useEffect(() => {
-        if (onLayoutChange) {
-            const rows = Math.ceil(itemCount / calculatedColumns);
-            onLayoutChange(calculatedColumns, rows);
-        }
-    }, [calculatedColumns, itemCount, onLayoutChange]);
-    // Get gap values
-    const gapValue = getGapValue(gap);
-    const rowGapValue = rowGap ? gapSizeValues[rowGap] : undefined;
-    const columnGapValue = columnGap ? gapSizeValues[columnGap] : undefined;
-    // Process children
-    const processedChildren = useMemo(() => {
-        const childArray = Children.toArray(children);
-        return childArray.map((child, index) => (_jsx(GridItem, { "$animation": animation, "$animationIndex": index, "$borderRadius": itemConfig?.borderRadius, "$padding": itemConfig?.padding, "$aspectRatio": itemConfig?.aspectRatio, className: itemClassName, children: child }, index)));
-    }, [children, animation, itemConfig, itemClassName]);
-    // Render as list items if role is list
-    const gridRole = role || elementRole || 'none';
-    const renderChildren = useMemo(() => {
-        if (gridRole === 'list') {
-            return processedChildren.map((child, index) => (_jsx("li", { style: { display: 'contents' }, children: child }, index)));
-        }
-        return processedChildren;
-    }, [processedChildren, gridRole]);
-    // Render skeletons
-    const skeletons = useMemo(() => {
-        if (!isLoading)
-            return null;
-        return Array.from({ length: skeletonCount }, (_, index) => (_jsx(GridItem, { "$animation": { enabled: true, type: 'fade', duration: 200 }, "$animationIndex": index, "$borderRadius": itemConfig?.borderRadius, "$aspectRatio": itemConfig?.aspectRatio, children: renderSkeleton ? (renderSkeleton()) : (_jsx(DefaultSkeleton, { aspectRatio: itemConfig?.aspectRatio })) }, `skeleton-${index}`)));
-    }, [isLoading, skeletonCount, renderSkeleton, itemConfig]);
-    // Check if empty
-    const isEmpty = !isLoading && itemCount === 0;
-    // Grid context value
-    const contextValue = useMemo(() => ({
-        columns: calculatedColumns,
-        gap: gapValue,
-        variant,
-        itemConfig,
-    }), [calculatedColumns, gapValue, variant, itemConfig]);
-    return (_jsx(GridContext.Provider, { value: contextValue, children: _jsxs(GridWrapper, { ref: innerRef, "$variant": variant, className: cn(containerClassName, className), style: style, "data-aui": "dynamic-grid", ...rest, children: [_jsx(GridContainer, { ref: gridRef, as: gridRole === 'list' ? 'ul' : 'div', role: gridRole === 'grid' ? 'grid' : undefined, "aria-label": ariaLabel, "$columns": calculatedColumns, "$minWidth": minWidth, "$maxWidth": maxWidth, "$gap": gapValue, "$rowGap": rowGapValue, "$columnGap": columnGapValue, "$autoFit": autoFit, "$maxRows": maxRows, "$alignItems": alignItems, "$justifyItems": justifyItems, "$alignContent": alignContent, "$justifyContent": justifyContent, "$scroll": scrollConfig, "$animation": animation, "$variant": variant, children: isLoading ? skeletons : isEmpty ? null : renderChildren }), isEmpty && (emptyState || _jsx(DefaultEmptyState, {})), scrollConfig?.enabled && scrollConfig.showArrows && !isEmpty && (_jsxs(_Fragment, { children: [_jsx(ScrollArrow, { "$direction": "left", "$visible": scrollNav.canScrollLeft, onClick: scrollNav.scrollLeft, "aria-label": "Scroll left", disabled: !scrollNav.canScrollLeft, children: _jsx(ChevronLeftIcon, {}) }), _jsx(ScrollArrow, { "$direction": "right", "$visible": scrollNav.canScrollRight, onClick: scrollNav.scrollRight, "aria-label": "Scroll right", disabled: !scrollNav.canScrollRight, children: _jsx(ChevronRightIcon, {}) })] })), scrollConfig?.enabled && scrollConfig.showDots && !isEmpty && (_jsx(ScrollDots, { children: Array.from({ length: scrollNav.totalPages }, (_, index) => (_jsx(ScrollDot, { "$active": index === scrollNav.currentPage, onClick: () => scrollNav.scrollTo(index), "aria-label": `Go to page ${index + 1}` }, index))) }))] }) }));
-});
-// Grid Item component for advanced usage
-export const DynamicGridItem = forwardRef(function DynamicGridItemComponent({ children, colSpan, rowSpan, order, alignSelf, justifySelf, className, ...rest }, ref) {
-    const gridContext = useGridContext();
-    return (_jsx(GridItem, { ref: ref, "$colSpan": colSpan, "$rowSpan": rowSpan, "$order": order, "$alignSelf": alignSelf, "$justifySelf": justifySelf, "$borderRadius": gridContext?.itemConfig?.borderRadius, "$padding": gridContext?.itemConfig?.padding, className: className, ...rest, children: children }));
-});
-DynamicGrid.displayName = 'DynamicGrid';
-DynamicGridItem.displayName = 'DynamicGridItem';
+"use strict";"use client";import{jsx as e,jsxs as R,Fragment as ye}from"react/jsx-runtime";import Ce,{Children as $e,forwardRef as T,useMemo as s,useRef as K,useState as Re,useCallback as Se,createContext as we,useContext as xe}from"react";import{cn as q}from"../../utils";import J from"../../tc.module.css";import{GridWrapper as be,GridContainer as ke,GridItem as j,SkeletonItem as ve,EmptyState as Ge,ScrollArrow as O,ScrollDots as Ie,ScrollDot as De}from"./elements";import{gapSizeValues as Q}from"./types";import{calcColumns as Le,getGapValue as U,getResponsiveColumns as We,useWindowWidth as je,useElementResize as Ne,useScrollToKeyboardFocus as Ae,useScrollNavigation as Ee,getItemCount as Ve}from"./utils";const X=we(null);export const useGridContext=()=>xe(X);const Fe=()=>e("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"15 18 9 12 15 6"})}),He=()=>e("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e("polyline",{points:"9 18 15 12 9 6"})}),_e=()=>R("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}),e("line",{x1:"9",y1:"9",x2:"15",y2:"15"}),e("line",{x1:"15",y1:"9",x2:"9",y2:"15"})]}),ze=()=>R(Ge,{children:[e(_e,{}),e("p",{className:q(J["text-gray-500"],J["text-sm"]),children:"No items to display"})]}),Be=({aspectRatio:S})=>e(ve,{$aspectRatio:S});export const DynamicGrid=T(function(w,N){const{children:c,minWidth:d=10,maxWidth:x,columns:m,responsiveColumns:u,maxColumns:p=1/0,maxRows:b,autoFit:h=!1,modulo:A=1,gap:k="md",rowGap:E,columnGap:V,variant:f="default",alignItems:Y,justifyItems:Z,alignContent:ee,justifyContent:te,scroll:r,scrollEnabled:F,animation:v,itemConfig:o,role:oe="none",elementRole:ne,ariaLabel:re,isLoading:g=!1,skeletonCount:H=6,renderSkeleton:G,emptyState:ie,onLayoutChange:I,onScrollChange:Pe,className:le,style:ae,containerClassName:se,itemClassName:_,...ce}=w,z=K(null),D=K(null),[B,de]=Re(0),P=je(),l=s(()=>r?.enabled||F?{enabled:!0,scrollHint:r?.scrollHint??.5,hideScrollbar:r?.hideScrollbar??!1,scrollSnapAlign:r?.scrollSnapAlign??"start",smoothScroll:r?.smoothScroll??!0,showArrows:r?.showArrows??!0,showDots:r?.showDots??!1,...r}:void 0,[r,F]),me=Se(n=>{de(n)},[]);Ne(z,me);const a=s(()=>{if(m)return m;if(u)return We(u,P);const n=U(k);return Le({minWidth:d,elementWidth:B,gap:n,modulo:A,maxColumns:p,scrollHint:l?.scrollHint})},[m,u,P,d,B,k,A,p,l?.scrollHint]);Ae(D,l);const y=Ve(c),i=Ee(D,y,a);Ce.useEffect(()=>{if(I){const n=Math.ceil(y/a);I(a,n)}},[a,y,I]);const L=U(k),ue=E?Q[E]:void 0,pe=V?Q[V]:void 0,W=s(()=>$e.toArray(c).map((t,M)=>e(j,{$animation:v,$animationIndex:M,$borderRadius:o?.borderRadius,$padding:o?.padding,$aspectRatio:o?.aspectRatio,className:_,children:t},M)),[c,v,o,_]),C=oe||ne||"none",he=s(()=>C==="list"?W.map((n,t)=>e("li",{style:{display:"contents"},children:n},t)):W,[W,C]),fe=s(()=>g?Array.from({length:H},(n,t)=>e(j,{$animation:{enabled:!0,type:"fade",duration:200},$animationIndex:t,$borderRadius:o?.borderRadius,$aspectRatio:o?.aspectRatio,children:G?G():e(Be,{aspectRatio:o?.aspectRatio})},`skeleton-${t}`)):null,[g,H,G,o]),$=!g&&y===0,ge=s(()=>({columns:a,gap:L,variant:f,itemConfig:o}),[a,L,f,o]);return e(X.Provider,{value:ge,children:R(be,{ref:z,$variant:f,className:q(se,le),style:ae,"data-aui":"dynamic-grid",...ce,children:[e(ke,{ref:D,as:C==="list"?"ul":"div",role:C==="grid"?"grid":void 0,"aria-label":re,$columns:a,$minWidth:d,$maxWidth:x,$gap:L,$rowGap:ue,$columnGap:pe,$autoFit:h,$maxRows:b,$alignItems:Y,$justifyItems:Z,$alignContent:ee,$justifyContent:te,$scroll:l,$animation:v,$variant:f,children:g?fe:$?null:he}),$&&(ie||e(ze,{})),l?.enabled&&l.showArrows&&!$&&R(ye,{children:[e(O,{$direction:"left",$visible:i.canScrollLeft,onClick:i.scrollLeft,"aria-label":"Scroll left",disabled:!i.canScrollLeft,children:e(Fe,{})}),e(O,{$direction:"right",$visible:i.canScrollRight,onClick:i.scrollRight,"aria-label":"Scroll right",disabled:!i.canScrollRight,children:e(He,{})})]}),l?.enabled&&l.showDots&&!$&&e(Ie,{children:Array.from({length:i.totalPages},(n,t)=>e(De,{$active:t===i.currentPage,onClick:()=>i.scrollTo(t),"aria-label":`Go to page ${t+1}`},t))})]})})}),DynamicGridItem=T(function({children:w,colSpan:N,rowSpan:c,order:d,alignSelf:x,justifySelf:m,className:u,...p},b){const h=useGridContext();return e(j,{ref:b,$colSpan:N,$rowSpan:c,$order:d,$alignSelf:x,$justifySelf:m,$borderRadius:h?.itemConfig?.borderRadius,$padding:h?.itemConfig?.padding,className:u,...p,children:w})});DynamicGrid.displayName="DynamicGrid",DynamicGridItem.displayName="DynamicGridItem";

package/lib/src/core-components/src/components/DynamicGrid/GridContainer.d.ts

@@ -9,4 +9,3 @@ declare const GridContainer: import("styled-components/dist/types").IStyledCompo
     $scroll: ScrollProps;
 }>> & string;
 export default GridContainer;
-//# sourceMappingURL=GridContainer.d.ts.map

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

@@ -1,7 +1,6 @@
-import { styled, css } from 'styled-components';
-const GridContainer = styled.div `
+"use strict";import{styled as n,css as i}from"styled-components";const a=n.div`
   display: grid;
-  gap: ${({ $gap }) => $gap};
+  gap: ${({$gap:l})=>l};
 
   & > li {
     display: flex;
@@ -13,31 +12,27 @@ const GridContainer = styled.div `
     }
   }
 
-  ${({ $autoFit, $columns, $gap }) => $autoFit &&
-    css `
+  ${({$autoFit:l,$columns:o,$gap:t})=>l&&i`
       & > *:only-child {
         width: 100%;
-        max-width: calc((100% - ${$columns - 1} * ${$gap}) / ${$columns});
+        max-width: calc((100% - ${o-1} * ${t}) / ${o});
       }
     `}
 
-  ${({ $minWidth, $columns, $autoFit }) => css `
+  ${({$minWidth:l,$columns:o,$autoFit:t})=>i`
       grid-template-columns: repeat(
-        ${$autoFit ? 'auto-fit' : $columns},
-        minmax(${$minWidth}rem, 1fr)
+        ${t?"auto-fit":o},
+        minmax(${l}rem, 1fr)
       );
     `};
 
-  ${({ $maxRows, $columns, $scroll }) => $maxRows &&
-    !$scroll &&
-    css `
-      & > *:nth-child(n + ${$columns * $maxRows + 1}) {
+  ${({$maxRows:l,$columns:o,$scroll:t})=>l&&!t&&i`
+      & > *:nth-child(n + ${o*l+1}) {
         display: none;
       }
     `}
 
-  ${({ $scroll, $minWidth, $columns, $gap, $maxRows }) => $scroll &&
-    css `
+  ${({$scroll:l,$minWidth:o,$columns:t,$gap:r,$maxRows:e})=>l&&i`
       &&& {
         scroll-behavior: smooth;
         overflow-x: scroll;
@@ -51,8 +46,7 @@ const GridContainer = styled.div `
           outline-offset: -2px;
         }
 
-        ${$scroll.hideScrollbar &&
-        css `
+        ${l.hideScrollbar&&i`
           scrollbar-width: none;
           -ms-overflow-style: none;
           &::-webkit-scrollbar {
@@ -63,18 +57,18 @@ const GridContainer = styled.div `
         `}
 
         grid-template-columns: unset;
-        grid-template-rows: repeat(${$maxRows || 1}, max-content);
+        grid-template-rows: repeat(${e||1}, max-content);
         grid-auto-columns: max(
           calc(
-            (100% - ${$columns + ($scroll.scrollHint || 0) - 1} * ${$gap}) /
-              ${$columns + ($scroll.scrollHint || 0)}
+            (100% - ${t+(l.scrollHint||0)-1} * ${r}) /
+              ${t+(l.scrollHint||0)}
           ),
-          ${$minWidth}rem
+          ${o}rem
         );
       }
 
       &&& > * {
-        scroll-snap-align: ${$scroll.scrollSnapAlign || 'start'};
+        scroll-snap-align: ${l.scrollSnapAlign||"start"};
       }
 
       &&& > *:first-child {
@@ -85,5 +79,4 @@ const GridContainer = styled.div `
         scroll-snap-align: end;
       }
     `}
-`;
-export default GridContainer;
+`;export default a;

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

@@ -46,4 +46,3 @@ export declare const ScrollDot: import("styled-components/dist/types").IStyledCo
     $active: boolean;
 }>> & string;
 export declare const LoadingOverlay: 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