react-restyle-components 0.4.39 → 0.4.40

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

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

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

@@ -1,11 +1,16 @@
-"use strict";import{styled as a,css as o,keyframes as n}from"styled-components";import{breakpoints as d}from"../../utils/abstracts";import{tokens as r}from"../../utils/designTokens";const c=n`
+import { styled, css, keyframes } from 'styled-components';
+import { breakpoints } from '../../utils/abstracts';
+import { tokens } from '../../utils/designTokens';
+// Animation keyframes
+const fadeIn = keyframes `
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-`,f=n`
+`;
+const slideIn = keyframes `
   from {
     opacity: 0;
     transform: translateY(20px);
@@ -14,7 +19,8 @@
     opacity: 1;
     transform: translateY(0);
   }
-`,p=n`
+`;
+const scaleIn = keyframes `
   from {
     opacity: 0;
     transform: scale(0.9);
@@ -23,91 +29,121 @@
     opacity: 1;
     transform: scale(1);
   }
-`,u=n`
+`;
+const shimmer = keyframes `
   0% {
     background-position: -200% 0;
   }
   100% {
     background-position: 200% 0;
   }
-`,b=(e,t)=>{switch(e){case"fade":return o`
-        animation: ${c} ${t}ms ease-out forwards;
-      `;case"slide":return o`
-        animation: ${f} ${t}ms ease-out forwards;
-      `;case"scale":return o`
-        animation: ${p} ${t}ms ease-out forwards;
-      `;default:return""}};export const GridWrapper=a.div`
+`;
+// Get animation based on type
+const getAnimation = (type, duration) => {
+    switch (type) {
+        case 'fade':
+            return css `
+        animation: ${fadeIn} ${duration}ms ease-out forwards;
+      `;
+        case 'slide':
+            return css `
+        animation: ${slideIn} ${duration}ms ease-out forwards;
+      `;
+        case 'scale':
+            return css `
+        animation: ${scaleIn} ${duration}ms ease-out forwards;
+      `;
+        default:
+            return '';
+    }
+};
+// Main grid container
+export const GridWrapper = styled.div `
   position: relative;
   width: 100%;
 
   /* Variant: contained */
-  ${({$variant:e})=>e==="contained"&&o`
+  ${({ $variant }) => $variant === 'contained' &&
+    css `
       background: linear-gradient(
         135deg,
-        ${r.surface||"#ffffff"} 0%,
+        ${tokens.surface || '#ffffff'} 0%,
         #f8f9fa 100%
       );
-      border: 1px solid ${r.outline||"#e9ecef"};
-      border-radius: ${r.borderRadius100||"8px"};
-      padding: ${r.spacing200||"1rem"};
+      border: 1px solid ${tokens.outline || '#e9ecef'};
+      border-radius: ${tokens.borderRadius100 || '8px'};
+      padding: ${tokens.spacing200 || '1rem'};
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     `}
 
   /* Variant: card */
-  ${({$variant:e})=>e==="card"&&o`
-      background: ${r.surface||"#ffffff"};
-      border-radius: ${r.borderRadius200||"16px"};
-      padding: ${r.spacing300||"1.5rem"};
+  ${({ $variant }) => $variant === 'card' &&
+    css `
+      background: ${tokens.surface || '#ffffff'};
+      border-radius: ${tokens.borderRadius200 || '16px'};
+      padding: ${tokens.spacing300 || '1.5rem'};
       box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
     `}
-`,GridContainer=a.div`
+`;
+// Grid container with all layout logic
+export const GridContainer = styled.div `
   display: grid;
   width: 100%;
-  gap: ${({$gap:e,$rowGap:t,$columnGap:i})=>t||i?`${t||e} ${i||e}`:e};
+  gap: ${({ $gap, $rowGap, $columnGap }) => $rowGap || $columnGap
+    ? `${$rowGap || $gap} ${$columnGap || $gap}`
+    : $gap};
 
   /* Grid alignment */
-  ${({$alignItems:e})=>e&&o`
-      align-items: ${e};
+  ${({ $alignItems }) => $alignItems &&
+    css `
+      align-items: ${$alignItems};
     `}
 
-  ${({$justifyItems:e})=>e&&o`
-      justify-items: ${e};
+  ${({ $justifyItems }) => $justifyItems &&
+    css `
+      justify-items: ${$justifyItems};
     `}
 
-  ${({$alignContent:e})=>e&&o`
-      align-content: ${e};
+  ${({ $alignContent }) => $alignContent &&
+    css `
+      align-content: ${$alignContent};
     `}
 
-  ${({$justifyContent:e})=>e&&o`
-      justify-content: ${e};
+  ${({ $justifyContent }) => $justifyContent &&
+    css `
+      justify-content: ${$justifyContent};
     `}
 
   /* Grid template columns */
-  ${({$minWidth:e,$maxWidth:t,$columns:i,$autoFit:s})=>o`
+  ${({ $minWidth, $maxWidth, $columns, $autoFit }) => css `
     grid-template-columns: repeat(
-      ${s?"auto-fit":i},
-      minmax(${e}rem, ${t?`${t}rem`:"1fr"})
+      ${$autoFit ? 'auto-fit' : $columns},
+      minmax(${$minWidth}rem, ${$maxWidth ? `${$maxWidth}rem` : '1fr'})
     );
   `}
 
   /* Auto-fit single child centering */
-  ${({$autoFit:e,$columns:t,$gap:i})=>e&&o`
+  ${({ $autoFit, $columns, $gap }) => $autoFit &&
+    css `
       & > *:only-child {
         width: 100%;
-        max-width: calc((100% - ${t-1} * ${i}) / ${t});
+        max-width: calc((100% - ${$columns - 1} * ${$gap}) / ${$columns});
       }
     `}
 
   /* Max rows limit (hide overflow) */
-  ${({$maxRows:e,$columns:t,$scroll:i})=>e&&!i?.enabled&&o`
-      & > *:nth-child(n + ${t*e+1}) {
+  ${({ $maxRows, $columns, $scroll }) => $maxRows &&
+    !$scroll?.enabled &&
+    css `
+      & > *:nth-child(n + ${$columns * $maxRows + 1}) {
         display: none;
       }
     `}
 
   /* Scroll mode */
-  ${({$scroll:e,$minWidth:t,$columns:i,$gap:s,$maxRows:l})=>e?.enabled&&o`
-      scroll-behavior: ${e.smoothScroll!==!1?"smooth":"auto"};
+  ${({ $scroll, $minWidth, $columns, $gap, $maxRows }) => $scroll?.enabled &&
+    css `
+      scroll-behavior: ${$scroll.smoothScroll !== false ? 'smooth' : 'auto'};
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       grid-auto-flow: column;
@@ -120,7 +156,8 @@
       }
 
       /* Hide scrollbar if configured */
-      ${e.hideScrollbar&&o`
+      ${$scroll.hideScrollbar &&
+        css `
         scrollbar-width: none;
         -ms-overflow-style: none;
 
@@ -132,9 +169,10 @@
       `}
 
       /* Custom scrollbar styling */
-      ${!e.hideScrollbar&&o`
+      ${!$scroll.hideScrollbar &&
+        css `
         scrollbar-width: thin;
-        scrollbar-color: ${r.outline||"#dee2e6"} transparent;
+        scrollbar-color: ${tokens.outline || '#dee2e6'} transparent;
 
         &::-webkit-scrollbar {
           height: 6px;
@@ -146,27 +184,27 @@
         }
 
         &::-webkit-scrollbar-thumb {
-          background: ${r.outline||"#dee2e6"};
+          background: ${tokens.outline || '#dee2e6'};
           border-radius: 3px;
 
           &:hover {
-            background: ${r.primary||"#454cbf"};
+            background: ${tokens.primary || '#454cbf'};
           }
         }
       `}
 
       grid-template-columns: unset;
-      grid-template-rows: repeat(${l||1}, max-content);
+      grid-template-rows: repeat(${$maxRows || 1}, max-content);
       grid-auto-columns: max(
         calc(
-          (100% - ${i+(e.scrollHint||0)-1} * ${s}) /
-            ${i+(e.scrollHint||0)}
+          (100% - ${$columns + ($scroll.scrollHint || 0) - 1} * ${$gap}) /
+            ${$columns + ($scroll.scrollHint || 0)}
         ),
-        ${t}rem
+        ${$minWidth}rem
       );
 
       & > * {
-        scroll-snap-align: ${e.scrollSnapAlign||"start"};
+        scroll-snap-align: ${$scroll.scrollSnapAlign || 'start'};
       }
 
       & > *:first-child {
@@ -189,116 +227,135 @@
       height: auto;
     }
   }
-`,GridItem=a.div`
+`;
+// Grid item wrapper with animations
+export const GridItem = styled.div `
   display: flex;
   flex-direction: column;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 
-  ${({$colSpan:e})=>e&&o`
-      grid-column: span ${e};
+  ${({ $colSpan }) => $colSpan &&
+    css `
+      grid-column: span ${$colSpan};
     `}
 
-  ${({$rowSpan:e})=>e&&o`
-      grid-row: span ${e};
+  ${({ $rowSpan }) => $rowSpan &&
+    css `
+      grid-row: span ${$rowSpan};
     `}
 
-  ${({$order:e})=>e!==void 0&&o`
-      order: ${e};
+  ${({ $order }) => $order !== undefined &&
+    css `
+      order: ${$order};
     `}
 
-  ${({$alignSelf:e})=>e&&o`
-      align-self: ${e};
+  ${({ $alignSelf }) => $alignSelf &&
+    css `
+      align-self: ${$alignSelf};
     `}
 
-  ${({$justifySelf:e})=>e&&o`
-      justify-self: ${e};
+  ${({ $justifySelf }) => $justifySelf &&
+    css `
+      justify-self: ${$justifySelf};
     `}
 
-  ${({$borderRadius:e})=>e&&o`
-      border-radius: ${e};
+  ${({ $borderRadius }) => $borderRadius &&
+    css `
+      border-radius: ${$borderRadius};
       overflow: hidden;
     `}
 
-  ${({$padding:e})=>e&&o`
-      padding: ${e};
+  ${({ $padding }) => $padding &&
+    css `
+      padding: ${$padding};
     `}
 
-  ${({$aspectRatio:e})=>e&&o`
-      aspect-ratio: ${e};
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
     `}
 
   /* Animation */
-  ${({$animation:e,$animationIndex:t=0})=>e?.enabled&&e.type!=="none"&&o`
+  ${({ $animation, $animationIndex = 0 }) => $animation?.enabled &&
+    $animation.type !== 'none' &&
+    css `
       opacity: 0;
-      animation-delay: ${t*(e.staggerDelay||50)}ms;
-      ${b(e.type,e.duration||300)}
+      animation-delay: ${$animationIndex * ($animation.staggerDelay || 50)}ms;
+      ${getAnimation($animation.type, $animation.duration || 300)}
     `}
 
   & > * {
     width: 100%;
     height: 100%;
   }
-`,SkeletonItem=a.div`
+`;
+// Skeleton loader
+export const SkeletonItem = styled.div `
   background: linear-gradient(
     90deg,
-    ${r.surface||"#f0f0f0"} 25%,
+    ${tokens.surface || '#f0f0f0'} 25%,
     #e8e8e8 50%,
-    ${r.surface||"#f0f0f0"} 75%
+    ${tokens.surface || '#f0f0f0'} 75%
   );
   background-size: 200% 100%;
-  animation: ${u} 1.5s infinite;
-  border-radius: ${({$borderRadius:e})=>e||r.borderRadius100||"8px"};
+  animation: ${shimmer} 1.5s infinite;
+  border-radius: ${({ $borderRadius }) => $borderRadius || tokens.borderRadius100 || '8px'};
   min-height: 100px;
 
-  ${({$aspectRatio:e})=>e&&o`
-      aspect-ratio: ${e};
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
     `}
-`,EmptyState=a.div`
+`;
+// Empty state container
+export const EmptyState = styled.div `
   grid-column: 1 / -1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: ${r.spacing400||"2rem"};
+  padding: ${tokens.spacing400 || '2rem'};
   text-align: center;
-  color: ${r.onSurface?`${r.onSurface}80`:"#6c757d"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
 
   svg {
     width: 64px;
     height: 64px;
-    margin-bottom: ${r.spacing200||"1rem"};
+    margin-bottom: ${tokens.spacing200 || '1rem'};
     opacity: 0.5;
   }
-`,ScrollArrow=a.button`
+`;
+// Navigation arrows for scroll mode
+export const ScrollArrow = styled.button `
   position: absolute;
   top: 50%;
-  ${({$direction:e})=>e==="left"?"left: -16px;":"right: -16px;"}
+  ${({ $direction }) => ($direction === 'left' ? 'left: -16px;' : 'right: -16px;')}
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: ${r.surface||"#ffffff"};
-  border: 1px solid ${r.outline||"#e9ecef"};
+  background: ${tokens.surface || '#ffffff'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${r.onSurface||"#1a1a2e"};
-  opacity: ${({$visible:e})=>e?1:0};
-  visibility: ${({$visible:e})=>e?"visible":"hidden"};
+  color: ${tokens.onSurface || '#1a1a2e'};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
   transition: all 0.2s ease;
   z-index: 10;
 
   &:hover {
-    background: ${r.primary||"#454cbf"};
-    color: ${r.white||"#ffffff"};
-    border-color: ${r.primary||"#454cbf"};
+    background: ${tokens.primary || '#454cbf'};
+    color: ${tokens.white || '#ffffff'};
+    border-color: ${tokens.primary || '#454cbf'};
     transform: translateY(-50%) scale(1.05);
   }
 
   &:focus-visible {
-    outline: 2px solid ${r.primary||"#454cbf"};
+    outline: 2px solid ${tokens.primary || '#454cbf'};
     outline-offset: 2px;
   }
 
@@ -308,34 +365,39 @@
   }
 
   /* Hide on mobile */
-  ${d.xs} {
+  ${breakpoints.xs} {
     display: none;
   }
-`,ScrollDots=a.div`
+`;
+// Pagination dots for scroll mode
+export const ScrollDots = styled.div `
   display: flex;
   justify-content: center;
-  gap: ${r.spacing100||"0.5rem"};
-  margin-top: ${r.spacing200||"1rem"};
-`,ScrollDot=a.button`
+  gap: ${tokens.spacing100 || '0.5rem'};
+  margin-top: ${tokens.spacing200 || '1rem'};
+`;
+export const ScrollDot = styled.button `
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: none;
-  background: ${({$active:e})=>e?r.primary||"#454cbf":r.outline||"#dee2e6"};
+  background: ${({ $active }) => $active ? tokens.primary || '#454cbf' : tokens.outline || '#dee2e6'};
   cursor: pointer;
   transition: all 0.2s ease;
   padding: 0;
 
   &:hover {
-    background: ${r.primary||"#454cbf"};
+    background: ${tokens.primary || '#454cbf'};
     transform: scale(1.2);
   }
 
   &:focus-visible {
-    outline: 2px solid ${r.primary||"#454cbf"};
+    outline: 2px solid ${tokens.primary || '#454cbf'};
     outline-offset: 2px;
   }
-`,LoadingOverlay=a.div`
+`;
+// Loading overlay
+export const LoadingOverlay = styled.div `
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.8);

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

@@ -1 +1,3 @@
-"use strict";export{DynamicGrid,DynamicGridItem,useGridContext}from"./DynamicGrid";export*from"./types";export{getGapValue,calcColumns,getResponsiveColumns}from"./utils";
+export { DynamicGrid, DynamicGridItem, useGridContext } from './DynamicGrid';
+export * from './types';
+export { getGapValue, calcColumns, getResponsiveColumns } from './utils';

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

@@ -1 +1,28 @@
-"use strict";export const GAP_SIZES=["none","xs","sm","md","lg","xl","2xl"],gapSizeValues={none:"0",xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.5rem","2xl":"2rem"},gapSizes={0:"0.5rem",1:"0.75rem",2:"1rem",3:"1.5rem",4:"2rem"},GRID_VARIANTS=["default","contained","card","masonry"],GRID_ALIGNMENTS=["start","center","end","stretch"],GRID_JUSTIFY=["start","center","end","space-between","space-around","space-evenly"],SCROLL_SNAP_TYPES=["start","center","end"],GRID_ROLES=["none","list","grid"];
+// Gap sizes with semantic naming
+export const GAP_SIZES = ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+export const gapSizeValues = {
+    none: '0',
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '0.75rem',
+    lg: '1rem',
+    xl: '1.5rem',
+    '2xl': '2rem', // 32px
+};
+export const gapSizes = {
+    0: '0.5rem',
+    1: '0.75rem',
+    2: '1rem',
+    3: '1.5rem',
+    4: '2rem',
+};
+// Grid variants
+export const GRID_VARIANTS = ['default', 'contained', 'card', 'masonry'];
+// Grid alignment options
+export const GRID_ALIGNMENTS = ['start', 'center', 'end', 'stretch'];
+// Grid justify options
+export const GRID_JUSTIFY = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
+// Scroll snap types
+export const SCROLL_SNAP_TYPES = ['start', 'center', 'end'];
+// Grid role types
+export const GRID_ROLES = ['none', 'list', 'grid'];