react-restyle-components 0.4.46 → 0.4.47

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.js

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

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

@@ -1,3 +1 @@
-export { DynamicGrid, DynamicGridItem, useGridContext } from './DynamicGrid';
-export * from './types';
-export { getGapValue, calcColumns, getResponsiveColumns } from './utils';
+"use strict";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,28 +1 @@
-// 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'];
+"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"];