react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,126 +1,38 @@
-import { styled, css } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-// Size configurations
-const sizeConfig = {
-    small: {
-        height: '24px',
-        padding: '0 8px',
-        fontSize: '0.75rem',
-        iconSize: '14px',
-        gap: '4px',
-        borderRadius: '12px',
-    },
-    medium: {
-        height: '32px',
-        padding: '0 12px',
-        fontSize: '0.8125rem',
-        iconSize: '16px',
-        gap: '6px',
-        borderRadius: '16px',
-    },
-    large: {
-        height: '40px',
-        padding: '0 16px',
-        fontSize: '0.875rem',
-        iconSize: '18px',
-        gap: '8px',
-        borderRadius: '20px',
-    },
-};
-// Color configurations
-const colorConfig = {
-    default: {
-        filled: { bg: tokens.onSurface || '#1a1a2e', text: '#fff', hover: '#2d2d42' },
-        outlined: {
-            border: tokens.outline || '#d1d5db',
-            text: tokens.onSurface || '#1a1a2e',
-            hover: '#f3f4f6',
-        },
-        soft: {
-            bg: tokens.surface || '#f3f4f6',
-            text: tokens.onSurface || '#1a1a2e',
-            hover: '#e5e7eb',
-        },
-    },
-    primary: {
-        filled: { bg: tokens.primary || '#454cbf', text: '#fff', hover: '#3d44a5' },
-        outlined: {
-            border: tokens.primary || '#454cbf',
-            text: tokens.primary || '#454cbf',
-            hover: '#e7e8f8',
-        },
-        soft: { bg: '#e7e8f8', text: tokens.primary || '#454cbf', hover: '#d4d6f4' },
-    },
-    success: {
-        filled: { bg: '#10b981', text: '#fff', hover: '#059669' },
-        outlined: { border: '#10b981', text: '#10b981', hover: '#ecfdf5' },
-        soft: { bg: '#ecfdf5', text: '#065f46', hover: '#d1fae5' },
-    },
-    warning: {
-        filled: { bg: '#f59e0b', text: '#fff', hover: '#d97706' },
-        outlined: { border: '#f59e0b', text: '#f59e0b', hover: '#fffbeb' },
-        soft: { bg: '#fffbeb', text: '#92400e', hover: '#fef3c7' },
-    },
-    error: {
-        filled: { bg: '#ef4444', text: '#fff', hover: '#dc2626' },
-        outlined: { border: '#ef4444', text: '#ef4444', hover: '#fef2f2' },
-        soft: { bg: '#fef2f2', text: '#991b1b', hover: '#fee2e2' },
-    },
-    info: {
-        filled: { bg: '#3b82f6', text: '#fff', hover: '#2563eb' },
-        outlined: { border: '#3b82f6', text: '#3b82f6', hover: '#e7f3ff' },
-        soft: { bg: '#e7f3ff', text: '#1e40af', hover: '#dbeafe' },
-    },
-};
-const getVariantStyles = (variant, color, selected) => {
-    const colorSet = colorConfig[color];
-    if (variant === 'filled') {
-        const config = colorSet.filled;
-        return css `
-      background: ${selected ? config.hover : config.bg};
-      color: ${config.text};
+"use strict";import{styled as a,css as i}from"styled-components";import{tokens as t}from"../../utils/designTokens";const f={small:{height:"24px",padding:"0 8px",fontSize:"0.75rem",iconSize:"14px",gap:"4px",borderRadius:"12px"},medium:{height:"32px",padding:"0 12px",fontSize:"0.8125rem",iconSize:"16px",gap:"6px",borderRadius:"16px"},large:{height:"40px",padding:"0 16px",fontSize:"0.875rem",iconSize:"18px",gap:"8px",borderRadius:"20px"}},s={default:{filled:{bg:t.onSurface||"#1a1a2e",text:"#fff",hover:"#2d2d42"},outlined:{border:t.outline||"#d1d5db",text:t.onSurface||"#1a1a2e",hover:"#f3f4f6"},soft:{bg:t.surface||"#f3f4f6",text:t.onSurface||"#1a1a2e",hover:"#e5e7eb"}},primary:{filled:{bg:t.primary||"#454cbf",text:"#fff",hover:"#3d44a5"},outlined:{border:t.primary||"#454cbf",text:t.primary||"#454cbf",hover:"#e7e8f8"},soft:{bg:"#e7e8f8",text:t.primary||"#454cbf",hover:"#d4d6f4"}},success:{filled:{bg:"#10b981",text:"#fff",hover:"#059669"},outlined:{border:"#10b981",text:"#10b981",hover:"#ecfdf5"},soft:{bg:"#ecfdf5",text:"#065f46",hover:"#d1fae5"}},warning:{filled:{bg:"#f59e0b",text:"#fff",hover:"#d97706"},outlined:{border:"#f59e0b",text:"#f59e0b",hover:"#fffbeb"},soft:{bg:"#fffbeb",text:"#92400e",hover:"#fef3c7"}},error:{filled:{bg:"#ef4444",text:"#fff",hover:"#dc2626"},outlined:{border:"#ef4444",text:"#ef4444",hover:"#fef2f2"},soft:{bg:"#fef2f2",text:"#991b1b",hover:"#fee2e2"}},info:{filled:{bg:"#3b82f6",text:"#fff",hover:"#2563eb"},outlined:{border:"#3b82f6",text:"#3b82f6",hover:"#e7f3ff"},soft:{bg:"#e7f3ff",text:"#1e40af",hover:"#dbeafe"}}},p=(e,r,n)=>{const d=s[r];if(e==="filled"){const o=d.filled;return i`
+      background: ${n?o.hover:o.bg};
+      color: ${o.text};
       border: 2px solid transparent;
 
       &:hover:not(:disabled) {
-        background: ${config.hover};
+        background: ${o.hover};
       }
-    `;
-    }
-    if (variant === 'outlined') {
-        const config = colorSet.outlined;
-        return css `
-      background: ${selected ? config.hover : 'transparent'};
-      color: ${config.text};
-      border: 2px solid ${config.border};
+    `}if(e==="outlined"){const o=d.outlined;return i`
+      background: ${n?o.hover:"transparent"};
+      color: ${o.text};
+      border: 2px solid ${o.border};
 
       &:hover:not(:disabled) {
-        background: ${config.hover};
+        background: ${o.hover};
       }
-    `;
-    }
-    // soft
-    const config = colorSet.soft;
-    return css `
-    background: ${selected ? config.hover : config.bg};
-    color: ${config.text};
+    `}const l=d.soft;return i`
+    background: ${n?l.hover:l.bg};
+    color: ${l.text};
     border: 2px solid transparent;
 
     &:hover:not(:disabled) {
-      background: ${config.hover};
+      background: ${l.hover};
     }
-  `;
-};
-export const ChipElement = styled.button `
+  `};export const ChipElement=a.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ $size }) => sizeConfig[$size].gap};
-  height: ${({ $size }) => sizeConfig[$size].height};
-  padding: ${({ $size }) => sizeConfig[$size].padding};
-  font-size: ${({ $size }) => sizeConfig[$size].fontSize};
+  gap: ${({$size:e})=>f[e].gap};
+  height: ${({$size:e})=>f[e].height};
+  padding: ${({$size:e})=>f[e].padding};
+  font-size: ${({$size:e})=>f[e].fontSize};
   font-weight: 500;
   font-family: inherit;
-  border-radius: ${({ $size }) => sizeConfig[$size].borderRadius};
+  border-radius: ${({$size:e})=>f[e].borderRadius};
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
@@ -129,19 +41,16 @@ export const ChipElement = styled.button `
   position: relative;
   overflow: hidden;
 
-  ${({ $variant, $color, $selected }) => getVariantStyles($variant, $color, $selected)}
+  ${({$variant:e,$color:r,$selected:n})=>p(e,r,n)}
 
   /* Selected state visual indicator */
-  ${({ $selected, $color, $variant }) => $selected &&
-    $variant === 'outlined' &&
-    css `
-      border-color: ${colorConfig[$color].outlined.text};
-      box-shadow: 0 0 0 1px ${colorConfig[$color].outlined.text};
+  ${({$selected:e,$color:r,$variant:n})=>e&&n==="outlined"&&i`
+      border-color: ${s[r].outlined.text};
+      box-shadow: 0 0 0 1px ${s[r].outlined.text};
     `}
   
   /* Disabled state */
-  ${({ $disabled }) => $disabled &&
-    css `
+  ${({$disabled:e})=>e&&i`
       opacity: 0.5;
       cursor: not-allowed;
     `}
@@ -149,28 +58,25 @@ export const ChipElement = styled.button `
   /* Focus visible */
   &:focus-visible {
     box-shadow:
-      0 0 0 2px ${tokens.surface || '#fff'},
-      0 0 0 4px ${tokens.primary || '#454cbf'};
+      0 0 0 2px ${t.surface||"#fff"},
+      0 0 0 4px ${t.primary||"#454cbf"};
   }
 
   /* Active state */
   &:active:not(:disabled) {
     transform: scale(0.97);
   }
-`;
-export const IconWrapper = styled.span `
+`,IconWrapper=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({ $size }) => sizeConfig[$size].iconSize};
-  height: ${({ $size }) => sizeConfig[$size].iconSize};
+  width: ${({$size:e})=>f[e].iconSize};
+  height: ${({$size:e})=>f[e].iconSize};
 
-  ${({ $side }) => $side === 'left'
-    ? css `
+  ${({$side:e})=>e==="left"?i`
           margin-left: -2px;
-        `
-    : css `
+        `:i`
           margin-right: -2px;
         `}
 
@@ -178,31 +84,29 @@ export const IconWrapper = styled.span `
     width: 100%;
     height: 100%;
   }
-`;
-export const AvatarWrapper = styled.span `
+`,AvatarWrapper=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({ $size }) => $size === 'small' ? '18px' : $size === 'large' ? '28px' : '24px'};
-  height: ${({ $size }) => $size === 'small' ? '18px' : $size === 'large' ? '28px' : '24px'};
+  width: ${({$size:e})=>e==="small"?"18px":e==="large"?"28px":"24px"};
+  height: ${({$size:e})=>e==="small"?"18px":e==="large"?"28px":"24px"};
   border-radius: 50%;
   overflow: hidden;
-  margin-left: ${({ $size }) => $size === 'small' ? '-4px' : $size === 'large' ? '-10px' : '-6px'};
+  margin-left: ${({$size:e})=>e==="small"?"-4px":e==="large"?"-10px":"-6px"};
 
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-`;
-export const DeleteButton = styled.span `
+`,DeleteButton=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({ $size }) => $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px'};
-  height: ${({ $size }) => $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px'};
+  width: ${({$size:e})=>e==="small"?"14px":e==="large"?"18px":"16px"};
+  height: ${({$size:e})=>e==="small"?"14px":e==="large"?"18px":"16px"};
   border-radius: 50%;
   margin-right: -4px;
   transition: all 0.2s ease;
@@ -215,25 +119,21 @@ export const DeleteButton = styled.span `
     width: 100%;
     height: 100%;
   }
-`;
-export const ChipLabel = styled.span `
+`,ChipLabel=a.span`
   line-height: 1;
-`;
-export const ChipGroupElement = styled.div `
+`,ChipGroupElement=a.div`
   display: flex;
-  flex-direction: ${({ $direction }) => $direction};
-  gap: ${({ $gap }) => $gap};
+  flex-direction: ${({$direction:e})=>e};
+  gap: ${({$gap:e})=>e};
 
-  ${({ $wrap }) => $wrap &&
-    css `
+  ${({$wrap:e})=>e&&i`
       flex-wrap: wrap;
     `}
 
-  ${({ $scrollable, $direction }) => $scrollable &&
-    css `
-      overflow-x: ${$direction === 'row' ? 'auto' : 'visible'};
-      overflow-y: ${$direction === 'column' ? 'auto' : 'visible'};
-      padding-bottom: ${$direction === 'row' ? '4px' : '0'};
+  ${({$scrollable:e,$direction:r})=>e&&i`
+      overflow-x: ${r==="row"?"auto":"visible"};
+      overflow-y: ${r==="column"?"auto":"visible"};
+      padding-bottom: ${r==="row"?"4px":"0"};
 
       /* Custom scrollbar */
       &::-webkit-scrollbar {
@@ -246,7 +146,7 @@ export const ChipGroupElement = styled.div `
       }
 
       &::-webkit-scrollbar-thumb {
-        background: ${tokens.outline || '#d1d5db'};
+        background: ${t.outline||"#d1d5db"};
         border-radius: 2px;
       }
     `}

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

@@ -1,2 +1 @@
-export { Chip, ChipGroup } from './Chip';
-export * from './types';
+"use strict";export{Chip,ChipGroup}from"./Chip";export*from"./types";

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

@@ -1,4 +1 @@
-export const CHIP_VARIANTS = ['filled', 'outlined', 'soft'];
-export const CHIP_SIZES = ['small', 'medium', 'large'];
-export const CHIP_COLORS = ['default', 'primary', 'success', 'warning', 'error', 'info'];
-export const CHIP_TYPES = ['button', 'selection', 'filter', 'input'];
+"use strict";export const CHIP_VARIANTS=["filled","outlined","soft"],CHIP_SIZES=["small","medium","large"],CHIP_COLORS=["default","primary","success","warning","error","info"],CHIP_TYPES=["button","selection","filter","input"];

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

@@ -1,25 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { DividerContainer, DividerLine, DividerLabel } from './elements';
-export const Divider = forwardRef(function DividerComponent(props, ref) {
-    const { orientation = 'horizontal', variant = 'solid', size = 'thin', color = 'default', inset = '0', centerInset = false, label, labelPosition = 'center', className, ...rest } = props;
-    const hasLabel = Boolean(label);
-    // Calculate flex values for label positioning
-    const getFlexValues = () => {
-        if (!hasLabel)
-            return { start: 1, end: 0 };
-        switch (labelPosition) {
-            case 'start':
-                return { start: 0, end: 1 };
-            case 'end':
-                return { start: 1, end: 0 };
-            case 'center':
-            default:
-                return { start: 1, end: 1 };
-        }
-    };
-    const flexValues = getFlexValues();
-    return (_jsxs(DividerContainer, { ref: ref, "$orientation": orientation, "$variant": variant, "$size": size, "$color": color, "$inset": inset, "$centerInset": centerInset, "$hasLabel": hasLabel, role: "separator", "aria-orientation": orientation, "data-aui": "divider", className: className, ...rest, children: [flexValues.start > 0 && (_jsx(DividerLine, { "$orientation": orientation, "$variant": variant, "$size": size, "$color": color, "$flex": flexValues.start })), hasLabel && (_jsx(DividerLabel, { "$color": color, children: label })), flexValues.end > 0 && (_jsx(DividerLine, { "$orientation": orientation, "$variant": variant, "$size": size, "$color": color, "$flex": flexValues.end }))] }));
-});
-Divider.displayName = 'Divider';
+"use strict";"use client";import{jsx as s,jsxs as x}from"react/jsx-runtime";import{forwardRef as h}from"react";import{DividerContainer as p,DividerLine as l,DividerLabel as D}from"./elements";export const Divider=h(function(c,d){const{orientation:e="horizontal",variant:a="solid",size:i="thin",color:t="default",inset:$="0",centerInset:f=!1,label:o,labelPosition:u="center",className:v,...m}=c,n=!!o,r=(()=>{if(!n)return{start:1,end:0};switch(u){case"start":return{start:0,end:1};case"end":return{start:1,end:0};default:return{start:1,end:1}}})();return x(p,{ref:d,$orientation:e,$variant:a,$size:i,$color:t,$inset:$,$centerInset:f,$hasLabel:n,role:"separator","aria-orientation":e,"data-aui":"divider",className:v,...m,children:[r.start>0&&s(l,{$orientation:e,$variant:a,$size:i,$color:t,$flex:r.start}),n&&s(D,{$color:t,children:o}),r.end>0&&s(l,{$orientation:e,$variant:a,$size:i,$color:t,$flex:r.end})]})});Divider.displayName="Divider";

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

@@ -1,103 +1,66 @@
-import { styled, css } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-// Size values
-const sizeValues = {
-    thin: '1px',
-    medium: '2px',
-    thick: '4px',
-};
-// Color values
-const colorValues = {
-    default: tokens.outline || '#e9ecef',
-    primary: tokens.primary || '#454cbf',
-    subtle: tokens.outlineSoft || '#f1f3f5',
-    dark: '#374151',
-};
-export const DividerContainer = styled.div `
+"use strict";import{styled as i,css as t}from"styled-components";import{tokens as n}from"../../utils/designTokens";const o={thin:"1px",medium:"2px",thick:"4px"},c={default:n.outline||"#e9ecef",primary:n.primary||"#454cbf",subtle:n.outlineSoft||"#f1f3f5",dark:"#374151"};export const DividerContainer=i.div`
   display: flex;
   align-items: center;
   
-  ${({ $orientation, $inset, $centerInset }) => $orientation === 'horizontal'
-    ? css `
-          width: ${$centerInset
-        ? `calc(100% - (${$inset} * 2))`
-        : `calc(100% - ${$inset})`};
-          margin-left: ${$inset};
-          ${$centerInset && `margin-right: ${$inset};`}
+  ${({$orientation:a,$inset:e,$centerInset:r})=>a==="horizontal"?t`
+          width: ${r?`calc(100% - (${e} * 2))`:`calc(100% - ${e})`};
+          margin-left: ${e};
+          ${r&&`margin-right: ${e};`}
           flex-direction: row;
-        `
-    : css `
+        `:t`
           height: 100%;
-          margin-top: ${$inset};
-          ${$centerInset && `margin-bottom: ${$inset};`}
+          margin-top: ${e};
+          ${r&&`margin-bottom: ${e};`}
           flex-direction: column;
         `}
-`;
-export const DividerLine = styled.div `
-  flex: ${({ $flex }) => $flex ?? 1};
+`,DividerLine=i.div`
+  flex: ${({$flex:a})=>a??1};
   
-  ${({ $orientation, $size, $variant, $color }) => $orientation === 'horizontal'
-    ? css `
-          height: ${sizeValues[$size]};
+  ${({$orientation:a,$size:e,$variant:r,$color:d})=>a==="horizontal"?t`
+          height: ${o[e]};
           width: 100%;
-        `
-    : css `
-          width: ${sizeValues[$size]};
+        `:t`
+          width: ${o[e]};
           height: 100%;
         `}
   
   /* Variant styles */
-  ${({ $variant, $color }) => {
-    const colorValue = colorValues[$color];
-    switch ($variant) {
-        case 'solid':
-            return css `
-          background-color: ${colorValue};
-        `;
-        case 'dashed':
-            return css `
+  ${({$variant:a,$color:e})=>{const r=c[e];switch(a){case"solid":return t`
+          background-color: ${r};
+        `;case"dashed":return t`
           background-image: repeating-linear-gradient(
             90deg,
-            ${colorValue},
-            ${colorValue} 8px,
+            ${r},
+            ${r} 8px,
             transparent 8px,
             transparent 16px
           );
-        `;
-        case 'dotted':
-            return css `
+        `;case"dotted":return t`
           background-image: repeating-linear-gradient(
             90deg,
-            ${colorValue},
-            ${colorValue} 4px,
+            ${r},
+            ${r} 4px,
             transparent 4px,
             transparent 12px
           );
-        `;
-        case 'gradient':
-            return css `
+        `;case"gradient":return t`
           background: linear-gradient(
             90deg,
             transparent 0%,
-            ${colorValue} 20%,
-            ${colorValue} 80%,
+            ${r} 20%,
+            ${r} 80%,
             transparent 100%
           );
-        `;
-        default:
-            return css `
-          background-color: ${colorValue};
-        `;
-    }
-}}
-`;
-export const DividerLabel = styled.span `
-  padding: 0 ${tokens.spacing150 || '0.75rem'};
+        `;default:return t`
+          background-color: ${r};
+        `}}}
+`,DividerLabel=i.span`
+  padding: 0 ${n.spacing150||"0.75rem"};
   font-size: 0.75rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: ${({ $color }) => $color === 'dark' ? '#9ca3af' : tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
+  color: ${({$color:a})=>a==="dark"?"#9ca3af":n.onSurface?`${n.onSurface}80`:"#6c757d"};
   white-space: nowrap;
   flex-shrink: 0;
 `;

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

@@ -1,2 +1 @@
-export { Divider } from './Divider';
-export * from './types';
+"use strict";export{Divider}from"./Divider";export*from"./types";

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

@@ -1,4 +1 @@
-export const DIVIDER_ORIENTATIONS = ['horizontal', 'vertical'];
-export const DIVIDER_VARIANTS = ['solid', 'dashed', 'dotted', 'gradient'];
-export const DIVIDER_SIZES = ['thin', 'medium', 'thick'];
-export const DIVIDER_COLORS = ['default', 'primary', 'subtle', 'dark'];
+"use strict";export const DIVIDER_ORIENTATIONS=["horizontal","vertical"],DIVIDER_VARIANTS=["solid","dashed","dotted","gradient"],DIVIDER_SIZES=["thin","medium","thick"],DIVIDER_COLORS=["default","primary","subtle","dark"];

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