react-restyle-components 0.4.39 → 0.4.40

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

@@ -1,38 +1,126 @@
-"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};
+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};
       border: 2px solid transparent;
 
       &:hover:not(:disabled) {
-        background: ${o.hover};
+        background: ${config.hover};
       }
-    `}if(e==="outlined"){const o=d.outlined;return i`
-      background: ${n?o.hover:"transparent"};
-      color: ${o.text};
-      border: 2px solid ${o.border};
+    `;
+    }
+    if (variant === 'outlined') {
+        const config = colorSet.outlined;
+        return css `
+      background: ${selected ? config.hover : 'transparent'};
+      color: ${config.text};
+      border: 2px solid ${config.border};
 
       &:hover:not(:disabled) {
-        background: ${o.hover};
+        background: ${config.hover};
       }
-    `}const l=d.soft;return i`
-    background: ${n?l.hover:l.bg};
-    color: ${l.text};
+    `;
+    }
+    // soft
+    const config = colorSet.soft;
+    return css `
+    background: ${selected ? config.hover : config.bg};
+    color: ${config.text};
     border: 2px solid transparent;
 
     &:hover:not(:disabled) {
-      background: ${l.hover};
+      background: ${config.hover};
     }
-  `};export const ChipElement=a.button`
+  `;
+};
+export const ChipElement = styled.button `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  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};
+  gap: ${({ $size }) => sizeConfig[$size].gap};
+  height: ${({ $size }) => sizeConfig[$size].height};
+  padding: ${({ $size }) => sizeConfig[$size].padding};
+  font-size: ${({ $size }) => sizeConfig[$size].fontSize};
   font-weight: 500;
   font-family: inherit;
-  border-radius: ${({$size:e})=>f[e].borderRadius};
+  border-radius: ${({ $size }) => sizeConfig[$size].borderRadius};
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
@@ -41,16 +129,19 @@
   position: relative;
   overflow: hidden;
 
-  ${({$variant:e,$color:r,$selected:n})=>p(e,r,n)}
+  ${({ $variant, $color, $selected }) => getVariantStyles($variant, $color, $selected)}
 
   /* Selected state visual indicator */
-  ${({$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};
+  ${({ $selected, $color, $variant }) => $selected &&
+    $variant === 'outlined' &&
+    css `
+      border-color: ${colorConfig[$color].outlined.text};
+      box-shadow: 0 0 0 1px ${colorConfig[$color].outlined.text};
     `}
   
   /* Disabled state */
-  ${({$disabled:e})=>e&&i`
+  ${({ $disabled }) => $disabled &&
+    css `
       opacity: 0.5;
       cursor: not-allowed;
     `}
@@ -58,25 +149,28 @@
   /* Focus visible */
   &:focus-visible {
     box-shadow:
-      0 0 0 2px ${t.surface||"#fff"},
-      0 0 0 4px ${t.primary||"#454cbf"};
+      0 0 0 2px ${tokens.surface || '#fff'},
+      0 0 0 4px ${tokens.primary || '#454cbf'};
   }
 
   /* Active state */
   &:active:not(:disabled) {
     transform: scale(0.97);
   }
-`,IconWrapper=a.span`
+`;
+export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({$size:e})=>f[e].iconSize};
-  height: ${({$size:e})=>f[e].iconSize};
+  width: ${({ $size }) => sizeConfig[$size].iconSize};
+  height: ${({ $size }) => sizeConfig[$size].iconSize};
 
-  ${({$side:e})=>e==="left"?i`
+  ${({ $side }) => $side === 'left'
+    ? css `
           margin-left: -2px;
-        `:i`
+        `
+    : css `
           margin-right: -2px;
         `}
 
@@ -84,29 +178,31 @@
     width: 100%;
     height: 100%;
   }
-`,AvatarWrapper=a.span`
+`;
+export const AvatarWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({$size:e})=>e==="small"?"18px":e==="large"?"28px":"24px"};
-  height: ${({$size:e})=>e==="small"?"18px":e==="large"?"28px":"24px"};
+  width: ${({ $size }) => $size === 'small' ? '18px' : $size === 'large' ? '28px' : '24px'};
+  height: ${({ $size }) => $size === 'small' ? '18px' : $size === 'large' ? '28px' : '24px'};
   border-radius: 50%;
   overflow: hidden;
-  margin-left: ${({$size:e})=>e==="small"?"-4px":e==="large"?"-10px":"-6px"};
+  margin-left: ${({ $size }) => $size === 'small' ? '-4px' : $size === 'large' ? '-10px' : '-6px'};
 
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-`,DeleteButton=a.span`
+`;
+export const DeleteButton = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({$size:e})=>e==="small"?"14px":e==="large"?"18px":"16px"};
-  height: ${({$size:e})=>e==="small"?"14px":e==="large"?"18px":"16px"};
+  width: ${({ $size }) => $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px'};
+  height: ${({ $size }) => $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px'};
   border-radius: 50%;
   margin-right: -4px;
   transition: all 0.2s ease;
@@ -119,21 +215,25 @@
     width: 100%;
     height: 100%;
   }
-`,ChipLabel=a.span`
+`;
+export const ChipLabel = styled.span `
   line-height: 1;
-`,ChipGroupElement=a.div`
+`;
+export const ChipGroupElement = styled.div `
   display: flex;
-  flex-direction: ${({$direction:e})=>e};
-  gap: ${({$gap:e})=>e};
+  flex-direction: ${({ $direction }) => $direction};
+  gap: ${({ $gap }) => $gap};
 
-  ${({$wrap:e})=>e&&i`
+  ${({ $wrap }) => $wrap &&
+    css `
       flex-wrap: wrap;
     `}
 
-  ${({$scrollable:e,$direction:r})=>e&&i`
-      overflow-x: ${r==="row"?"auto":"visible"};
-      overflow-y: ${r==="column"?"auto":"visible"};
-      padding-bottom: ${r==="row"?"4px":"0"};
+  ${({ $scrollable, $direction }) => $scrollable &&
+    css `
+      overflow-x: ${$direction === 'row' ? 'auto' : 'visible'};
+      overflow-y: ${$direction === 'column' ? 'auto' : 'visible'};
+      padding-bottom: ${$direction === 'row' ? '4px' : '0'};
 
       /* Custom scrollbar */
       &::-webkit-scrollbar {
@@ -146,7 +246,7 @@
       }
 
       &::-webkit-scrollbar-thumb {
-        background: ${t.outline||"#d1d5db"};
+        background: ${tokens.outline || '#d1d5db'};
         border-radius: 2px;
       }
     `}

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

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

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

@@ -1 +1,4 @@
-"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"];
+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'];

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

@@ -1 +1,25 @@
-"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";
+'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';

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

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

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

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

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

@@ -1 +1,4 @@
-"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"];
+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'];

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

@@ -1 +1,147 @@
-"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";
+'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';