{
  "id": "flex-layout",
  "type": "div",
  "bindings": {
    "className": {
      "source": ["direction", "align", "justify", "wrap", "gap", "className"],
      "transform": "const [direction, align, justify, wrap, gap, customClass] = data; const directionClass = direction === 'column' ? 'flex-col' : 'flex-row'; const alignClasses = { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch' }; const justifyClasses = { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between', around: 'justify-around', evenly: 'justify-evenly' }; const gapClasses = { none: 'gap-0', xs: 'gap-1', sm: 'gap-2', md: 'gap-4', lg: 'gap-6', xl: 'gap-8' }; const wrapClass = wrap ? 'flex-wrap' : ''; const baseClasses = `flex ${directionClass} ${alignClasses[align || 'start']} ${justifyClasses[justify || 'start']} ${gapClasses[gap || 'md']} ${wrapClass} ${customClass || ''}`.trim(); return baseClasses.replace(/\\s+/g, ' ')"
    },
    "children": {
      "source": "children",
      "transform": "data"
    }
  }
}
