react-restyle-components 0.4.22 → 0.4.24

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

@@ -0,0 +1,409 @@
+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;
+  }
+`;
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const scaleIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const shimmer = keyframes `
+  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 `
+  position: relative;
+  width: 100%;
+
+  /* Variant: contained */
+  ${({ $variant }) => $variant === 'contained' &&
+    css `
+      background: linear-gradient(
+        135deg,
+        ${tokens.surface || '#ffffff'} 0%,
+        #f8f9fa 100%
+      );
+      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 }) => $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);
+    `}
+`;
+// Grid container with all layout logic
+export const GridContainer = styled.div `
+  display: grid;
+  width: 100%;
+  gap: ${({ $gap, $rowGap, $columnGap }) => $rowGap || $columnGap
+    ? `${$rowGap || $gap} ${$columnGap || $gap}`
+    : $gap};
+
+  /* Grid alignment */
+  ${({ $alignItems }) => $alignItems &&
+    css `
+      align-items: ${$alignItems};
+    `}
+
+  ${({ $justifyItems }) => $justifyItems &&
+    css `
+      justify-items: ${$justifyItems};
+    `}
+
+  ${({ $alignContent }) => $alignContent &&
+    css `
+      align-content: ${$alignContent};
+    `}
+
+  ${({ $justifyContent }) => $justifyContent &&
+    css `
+      justify-content: ${$justifyContent};
+    `}
+
+  /* Grid template columns */
+  ${({ $minWidth, $maxWidth, $columns, $autoFit }) => css `
+    grid-template-columns: repeat(
+      ${$autoFit ? 'auto-fit' : $columns},
+      minmax(${$minWidth}rem, ${$maxWidth ? `${$maxWidth}rem` : '1fr'})
+    );
+  `}
+
+  /* Auto-fit single child centering */
+  ${({ $autoFit, $columns, $gap }) => $autoFit &&
+    css `
+      & > *:only-child {
+        width: 100%;
+        max-width: calc((100% - ${$columns - 1} * ${$gap}) / ${$columns});
+      }
+    `}
+
+  /* Max rows limit (hide overflow) */
+  ${({ $maxRows, $columns, $scroll }) => $maxRows &&
+    !$scroll?.enabled &&
+    css `
+      & > *:nth-child(n + ${$columns * $maxRows + 1}) {
+        display: none;
+      }
+    `}
+
+  /* Scroll mode */
+  ${({ $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;
+      -webkit-overflow-scrolling: touch;
+
+      /* Prevent overflow from hiding focus outline */
+      & > *:focus,
+      & > li > *:focus {
+        outline-offset: -2px;
+      }
+
+      /* Hide scrollbar if configured */
+      ${$scroll.hideScrollbar &&
+        css `
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+          height: 0;
+          background: transparent;
+        }
+      `}
+
+      /* Custom scrollbar styling */
+      ${!$scroll.hideScrollbar &&
+        css `
+        scrollbar-width: thin;
+        scrollbar-color: ${tokens.outline || '#dee2e6'} transparent;
+
+        &::-webkit-scrollbar {
+          height: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: ${tokens.outline || '#dee2e6'};
+          border-radius: 3px;
+
+          &:hover {
+            background: ${tokens.primary || '#454cbf'};
+          }
+        }
+      `}
+
+      grid-template-columns: unset;
+      grid-template-rows: repeat(${$maxRows || 1}, max-content);
+      grid-auto-columns: max(
+        calc(
+          (100% - ${$columns + ($scroll.scrollHint || 0) - 1} * ${$gap}) /
+            ${$columns + ($scroll.scrollHint || 0)}
+        ),
+        ${$minWidth}rem
+      );
+
+      & > * {
+        scroll-snap-align: ${$scroll.scrollSnapAlign || 'start'};
+      }
+
+      & > *:first-child {
+        scroll-snap-align: start;
+      }
+
+      & > *:last-child {
+        scroll-snap-align: end;
+      }
+    `}
+
+  /* List item styling */
+  & > li {
+    display: flex;
+    box-sizing: border-box;
+    list-style: none;
+
+    & > * {
+      width: 100%;
+      height: auto;
+    }
+  }
+`;
+// 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 }) => $colSpan &&
+    css `
+      grid-column: span ${$colSpan};
+    `}
+
+  ${({ $rowSpan }) => $rowSpan &&
+    css `
+      grid-row: span ${$rowSpan};
+    `}
+
+  ${({ $order }) => $order !== undefined &&
+    css `
+      order: ${$order};
+    `}
+
+  ${({ $alignSelf }) => $alignSelf &&
+    css `
+      align-self: ${$alignSelf};
+    `}
+
+  ${({ $justifySelf }) => $justifySelf &&
+    css `
+      justify-self: ${$justifySelf};
+    `}
+
+  ${({ $borderRadius }) => $borderRadius &&
+    css `
+      border-radius: ${$borderRadius};
+      overflow: hidden;
+    `}
+
+  ${({ $padding }) => $padding &&
+    css `
+      padding: ${$padding};
+    `}
+
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
+    `}
+
+  /* Animation */
+  ${({ $animation, $animationIndex = 0 }) => $animation?.enabled &&
+    $animation.type !== 'none' &&
+    css `
+      opacity: 0;
+      animation-delay: ${$animationIndex * ($animation.staggerDelay || 50)}ms;
+      ${getAnimation($animation.type, $animation.duration || 300)}
+    `}
+
+  & > * {
+    width: 100%;
+    height: 100%;
+  }
+`;
+// Skeleton loader
+export const SkeletonItem = styled.div `
+  background: linear-gradient(
+    90deg,
+    ${tokens.surface || '#f0f0f0'} 25%,
+    #e8e8e8 50%,
+    ${tokens.surface || '#f0f0f0'} 75%
+  );
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s infinite;
+  border-radius: ${({ $borderRadius }) => $borderRadius || tokens.borderRadius100 || '8px'};
+  min-height: 100px;
+
+  ${({ $aspectRatio }) => $aspectRatio &&
+    css `
+      aspect-ratio: ${$aspectRatio};
+    `}
+`;
+// Empty state container
+export const EmptyState = styled.div `
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: ${tokens.spacing400 || '2rem'};
+  text-align: center;
+  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
+
+  svg {
+    width: 64px;
+    height: 64px;
+    margin-bottom: ${tokens.spacing200 || '1rem'};
+    opacity: 0.5;
+  }
+`;
+// Navigation arrows for scroll mode
+export const ScrollArrow = styled.button `
+  position: absolute;
+  top: 50%;
+  ${({ $direction }) => ($direction === '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'};
+  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')};
+  transition: all 0.2s ease;
+  z-index: 10;
+
+  &:hover {
+    background: ${tokens.primary || '#454cbf'};
+    color: ${tokens.white || '#ffffff'};
+    border-color: ${tokens.primary || '#454cbf'};
+    transform: translateY(-50%) scale(1.05);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  /* Hide on mobile */
+  ${breakpoints.xs} {
+    display: none;
+  }
+`;
+// Pagination dots for scroll mode
+export const ScrollDots = styled.div `
+  display: flex;
+  justify-content: center;
+  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 }) => $active ? tokens.primary || '#454cbf' : tokens.outline || '#dee2e6'};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+
+  &:hover {
+    background: ${tokens.primary || '#454cbf'};
+    transform: scale(1.2);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.primary || '#454cbf'};
+    outline-offset: 2px;
+  }
+`;
+// Loading overlay
+export const LoadingOverlay = styled.div `
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  z-index: 20;
+`;

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

@@ -0,0 +1,4 @@
+export { DynamicGrid, DynamicGridItem, useGridContext } from './DynamicGrid';
+export * from './types';
+export { getGapValue, calcColumns, getResponsiveColumns } from './utils';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,173 @@
+import React from 'react';
+export declare const GAP_SIZES: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl"];
+export type GapSize = (typeof GAP_SIZES)[number];
+export declare const gapSizeValues: Record<GapSize, string>;
+export type LegacyGapSize = 0 | 1 | 2 | 3 | 4;
+export declare const gapSizes: Record<LegacyGapSize, string>;
+export declare const GRID_VARIANTS: readonly ["default", "contained", "card", "masonry"];
+export type GridVariant = (typeof GRID_VARIANTS)[number];
+export declare const GRID_ALIGNMENTS: readonly ["start", "center", "end", "stretch"];
+export type GridAlignment = (typeof GRID_ALIGNMENTS)[number];
+export declare const GRID_JUSTIFY: readonly ["start", "center", "end", "space-between", "space-around", "space-evenly"];
+export type GridJustify = (typeof GRID_JUSTIFY)[number];
+export declare const SCROLL_SNAP_TYPES: readonly ["start", "center", "end"];
+export type ScrollSnapType = (typeof SCROLL_SNAP_TYPES)[number];
+export declare const GRID_ROLES: readonly ["none", "list", "grid"];
+export type GridRole = (typeof GRID_ROLES)[number];
+export interface ResponsiveColumns {
+    /** Columns for extra small screens (< 375px) */
+    xs?: number;
+    /** Columns for small screens (≥ 375px) */
+    sm?: number;
+    /** Columns for medium screens (≥ 768px) */
+    md?: number;
+    /** Columns for large screens (≥ 1024px) */
+    lg?: number;
+    /** Columns for extra large screens (≥ 1280px) */
+    xl?: number;
+    /** Columns for 2xl screens (≥ 1440px) */
+    '2xl'?: number;
+}
+export interface ScrollConfig {
+    /** Enable horizontal scroll mode */
+    enabled?: boolean;
+    /** Amount of next item visible as scroll hint (0-1) */
+    scrollHint?: number;
+    /** Hide the scrollbar */
+    hideScrollbar?: boolean;
+    /** Scroll snap alignment */
+    scrollSnapAlign?: ScrollSnapType;
+    /** Enable smooth scrolling */
+    smoothScroll?: boolean;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Show pagination dots */
+    showDots?: boolean;
+}
+export interface AnimationConfig {
+    /** Enable item animations */
+    enabled?: boolean;
+    /** Animation type */
+    type?: 'fade' | 'slide' | 'scale' | 'none';
+    /** Animation duration in ms */
+    duration?: number;
+    /** Stagger delay between items in ms */
+    staggerDelay?: number;
+}
+export interface GridItemConfig {
+    /** Minimum width of each item (in rem) */
+    minWidth?: number;
+    /** Maximum width of each item (in rem) */
+    maxWidth?: number;
+    /** Aspect ratio (e.g., '16/9', '1/1', '4/3') */
+    aspectRatio?: string;
+    /** Item padding */
+    padding?: string;
+    /** Item border radius */
+    borderRadius?: string;
+}
+export interface DynamicGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children elements */
+    children?: React.ReactNode;
+    /** Minimum width of grid items (in rem) */
+    minWidth?: number;
+    /** Maximum width of grid items (in rem) */
+    maxWidth?: number;
+    /** Fixed number of columns (overrides responsive) */
+    columns?: number;
+    /** Responsive column configuration */
+    responsiveColumns?: ResponsiveColumns;
+    /** Maximum number of columns */
+    maxColumns?: number;
+    /** Maximum number of rows to display */
+    maxRows?: number;
+    /** Use auto-fit for flexible column sizing */
+    autoFit?: boolean;
+    /** Column modulo (columns must be divisible by this) */
+    modulo?: number;
+    /** Gap between items */
+    gap?: GapSize | LegacyGapSize;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: GapSize;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: GapSize;
+    /** Visual variant */
+    variant?: GridVariant;
+    /** Item alignment */
+    alignItems?: GridAlignment;
+    /** Item justification */
+    justifyItems?: GridAlignment;
+    /** Content alignment */
+    alignContent?: GridAlignment;
+    /** Content justification */
+    justifyContent?: GridJustify;
+    /** Scroll configuration */
+    scroll?: ScrollConfig;
+    /** @deprecated Use scroll.enabled instead */
+    scrollEnabled?: boolean;
+    /** Animation configuration */
+    animation?: AnimationConfig;
+    /** Grid item configuration */
+    itemConfig?: GridItemConfig;
+    /** ARIA role for the grid */
+    role?: GridRole;
+    /** @deprecated Use role instead */
+    elementRole?: GridRole;
+    /** ARIA label */
+    ariaLabel?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Number of skeleton items to show when loading */
+    skeletonCount?: number;
+    /** Custom skeleton component */
+    renderSkeleton?: () => React.ReactNode;
+    /** Empty state content */
+    emptyState?: React.ReactNode;
+    /** Called when grid layout changes */
+    onLayoutChange?: (columns: number, rows: number) => void;
+    /** Called when scroll position changes */
+    onScrollChange?: (scrollLeft: number, scrollWidth: number) => void;
+    /** Additional class name */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Container class name */
+    containerClassName?: string;
+    /** Item wrapper class name */
+    itemClassName?: string;
+}
+export interface GridContextValue {
+    columns: number;
+    gap: string;
+    variant: GridVariant;
+    itemConfig?: GridItemConfig;
+}
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Span multiple columns */
+    colSpan?: number;
+    /** Span multiple rows */
+    rowSpan?: number;
+    /** Order in the grid */
+    order?: number;
+    /** Self alignment */
+    alignSelf?: GridAlignment;
+    /** Self justification */
+    justifySelf?: GridAlignment;
+}
+export interface ScrollProps {
+    /** Enable horizontal scroll mode */
+    enabled?: boolean;
+    /** Amount of next item visible as scroll hint (0-1) */
+    scrollHint?: number;
+    /** Hide the scrollbar */
+    hideScrollbar?: boolean;
+    /** Scroll snap alignment */
+    scrollSnapAlign?: ScrollSnapType;
+    /** Enable smooth scrolling */
+    smoothScroll?: boolean;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Show pagination dots */
+    showDots?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/DynamicGrid/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+// 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'];

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

@@ -0,0 +1,65 @@
+import React, { RefObject } from 'react';
+import { ResponsiveColumns, GapSize, LegacyGapSize, ScrollConfig } from './types';
+/**
+ * Convert pixels to rem
+ */
+export declare const pxToRem: (px: number) => number;
+/**
+ * Convert rem to pixels
+ */
+export declare const remToPx: (rem: number) => number;
+/**
+ * Get gap value from GapSize or LegacyGapSize
+ */
+export declare const getGapValue: (gap: GapSize | LegacyGapSize) => string;
+/**
+ * Calculate columns based on container width and configuration
+ */
+interface CalcColumnsConfig {
+    minWidth: number;
+    elementWidth: number;
+    gap: string;
+    modulo: number;
+    maxColumns: number;
+    scrollHint?: number;
+}
+export declare const calcColumns: ({ minWidth, elementWidth, gap, modulo, maxColumns, scrollHint, }: CalcColumnsConfig) => number;
+/**
+ * Get responsive columns based on window width
+ */
+export declare const getResponsiveColumns: (responsiveColumns: ResponsiveColumns, windowWidth: number) => number;
+/**
+ * Hook to get current window width
+ */
+export declare const useWindowWidth: () => number;
+/**
+ * Hook to observe element resize
+ */
+export declare const useElementResize: (ref: RefObject<HTMLElement>, callback: (width: number, height: number) => void) => void;
+/**
+ * Hook to handle keyboard focus scrolling in scroll mode
+ */
+export declare const useScrollToKeyboardFocus: (ref: RefObject<HTMLElement>, scroll?: ScrollConfig) => void;
+/**
+ * Hook for scroll navigation (arrows and dots)
+ */
+interface UseScrollNavigationReturn {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    currentPage: number;
+    totalPages: number;
+    scrollTo: (index: number) => void;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+}
+export declare const useScrollNavigation: (ref: RefObject<HTMLElement>, itemCount: number, columns: number) => UseScrollNavigationReturn;
+/**
+ * Get item count from children
+ */
+export declare const getItemCount: (children: React.ReactNode) => number;
+/**
+ * Generate unique ID for accessibility
+ */
+export declare const generateGridId: () => string;
+export {};
+//# sourceMappingURL=utils.d.ts.map