@promptui-lib/codegen 0.1.0 → 0.1.3

package/dist/frameworks/flutter.template.js

@@ -0,0 +1,217 @@
+/**
+ * Flutter Template
+ * Generates Flutter/Dart widgets from Figma designs
+ */
+/**
+ * Mapping of tokens to Flutter values
+ */
+const TOKEN_TO_FLUTTER = {
+    // Colors
+    '$color-primary': 'Theme.of(context).primaryColor',
+    '$color-secondary': 'Theme.of(context).colorScheme.secondary',
+    '$color-success': 'Colors.green',
+    '$color-error': 'Colors.red',
+    '$color-warning': 'Colors.orange',
+    '$color-bg-primary': 'Colors.white',
+    '$color-bg-secondary': 'Colors.grey[100]',
+    '$color-text-primary': 'Colors.black87',
+    '$color-text-secondary': 'Colors.black54',
+    '$color-text-inverse': 'Colors.white',
+    // Spacing
+    '$spacing-xs': '4',
+    '$spacing-sm': '8',
+    '$spacing-md': '16',
+    '$spacing-lg': '24',
+    '$spacing-xl': '32',
+    '$spacing-2xl': '48',
+    // Border radius
+    '$radius-none': '0',
+    '$radius-small': '4',
+    '$radius-medium': '8',
+    '$radius-large': '12',
+    '$radius-xl': '16',
+    '$radius-full': '999',
+    // Font sizes
+    '$font-size-xs': '10',
+    '$font-size-sm': '12',
+    '$font-size-md': '14',
+    '$font-size-lg': '16',
+    '$font-size-xl': '20',
+    '$font-size-2xl': '24',
+    '$font-size-h1': '32',
+    '$font-size-h2': '28',
+    // Font weights
+    '$font-weight-regular': 'FontWeight.w400',
+    '$font-weight-medium': 'FontWeight.w500',
+    '$font-weight-semibold': 'FontWeight.w600',
+    '$font-weight-bold': 'FontWeight.w700',
+};
+/**
+ * Converts CSS value to Flutter
+ */
+function cssToFlutter(property, value) {
+    // Token mapping
+    if (value.startsWith('$')) {
+        return TOKEN_TO_FLUTTER[value] ?? value;
+    }
+    // Parse numeric values
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+        return numValue.toString();
+    }
+    return value;
+}
+/**
+ * Generates EdgeInsets from padding/margin
+ */
+function generateEdgeInsets(styles) {
+    const padding = {};
+    for (const style of styles) {
+        const value = cssToFlutter(style.property, style.token ?? style.value);
+        if (style.property === 'padding') {
+            return `EdgeInsets.all(${value})`;
+        }
+        if (style.property === 'padding-top')
+            padding.top = value;
+        if (style.property === 'padding-bottom')
+            padding.bottom = value;
+        if (style.property === 'padding-left')
+            padding.left = value;
+        if (style.property === 'padding-right')
+            padding.right = value;
+    }
+    if (Object.keys(padding).length > 0) {
+        const top = padding.top ?? '0';
+        const right = padding.right ?? '0';
+        const bottom = padding.bottom ?? '0';
+        const left = padding.left ?? '0';
+        if (top === bottom && left === right) {
+            if (top === left) {
+                return `EdgeInsets.all(${top})`;
+            }
+            return `EdgeInsets.symmetric(vertical: ${top}, horizontal: ${left})`;
+        }
+        return `EdgeInsets.only(top: ${top}, right: ${right}, bottom: ${bottom}, left: ${left})`;
+    }
+    return null;
+}
+/**
+ * Gets Flutter widget for element type
+ */
+function getFlutterWidget(node) {
+    switch (node.tag) {
+        case 'button':
+            return 'ElevatedButton';
+        case 'img':
+            return 'Image.network';
+        case 'input':
+            return 'TextField';
+        case 'span':
+        case 'p':
+        case 'h1':
+        case 'h2':
+        case 'h3':
+            return 'Text';
+        default:
+            return 'Container';
+    }
+}
+/**
+ * Generates Flutter widget code
+ */
+function generateFlutterWidget(node, styles, indent = 4) {
+    const spaces = ' '.repeat(indent);
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    // Determine widget type
+    const widget = getFlutterWidget(node);
+    // Build properties
+    const props = [];
+    // Padding
+    const padding = generateEdgeInsets(nodeStyles);
+    if (padding) {
+        props.push(`padding: ${padding}`);
+    }
+    // Background color
+    const bgColor = nodeStyles.find(s => s.property === 'background-color');
+    if (bgColor) {
+        const color = cssToFlutter('background-color', bgColor.token ?? bgColor.value);
+        props.push(`color: ${color}`);
+    }
+    // Border radius
+    const borderRadius = nodeStyles.find(s => s.property === 'border-radius');
+    if (borderRadius) {
+        const radius = cssToFlutter('border-radius', borderRadius.token ?? borderRadius.value);
+        props.push(`borderRadius: BorderRadius.circular(${radius})`);
+    }
+    // Children
+    const children = node.children.map(child => {
+        if (typeof child === 'string' || (typeof child === 'object' && 'type' in child && child.type === 'text')) {
+            const text = typeof child === 'string' ? child : child.value;
+            return `${spaces}  Text('${text}')`;
+        }
+        return generateFlutterWidget(child, styles, indent + 2);
+    });
+    // Build widget
+    if (widget === 'Container') {
+        const decoration = [];
+        if (bgColor) {
+            decoration.push(`color: ${cssToFlutter('background-color', bgColor.token ?? bgColor.value)}`);
+        }
+        if (borderRadius) {
+            decoration.push(`borderRadius: BorderRadius.circular(${cssToFlutter('border-radius', borderRadius.token ?? borderRadius.value)})`);
+        }
+        const hasDecoration = decoration.length > 0;
+        const containerProps = [];
+        if (padding)
+            containerProps.push(`padding: ${padding}`);
+        if (hasDecoration) {
+            containerProps.push(`decoration: BoxDecoration(\n${spaces}    ${decoration.join(',\n' + spaces + '    ')},\n${spaces}  )`);
+        }
+        if (children.length === 1) {
+            containerProps.push(`child: ${children[0].trim()}`);
+        }
+        else if (children.length > 1) {
+            // Use Column or Row based on flex-direction
+            const flexDir = nodeStyles.find(s => s.property === 'flex-direction');
+            const layout = flexDir?.value === 'row' ? 'Row' : 'Column';
+            containerProps.push(`child: ${layout}(\n${spaces}    children: [\n${children.join(',\n')},\n${spaces}    ],\n${spaces}  )`);
+        }
+        return `${spaces}Container(\n${spaces}  ${containerProps.join(',\n' + spaces + '  ')},\n${spaces})`;
+    }
+    if (widget === 'Text') {
+        const text = node.children[0];
+        const textContent = typeof text === 'string' ? text : text?.value ?? '';
+        return `${spaces}Text('${textContent}')`;
+    }
+    if (widget === 'ElevatedButton') {
+        const buttonChild = children.length > 0 ? children[0].trim() : "Text('Button')";
+        return `${spaces}ElevatedButton(\n${spaces}  onPressed: () {},\n${spaces}  child: ${buttonChild},\n${spaces})`;
+    }
+    return `${spaces}Container()`;
+}
+/**
+ * Generates Flutter StatelessWidget
+ */
+export function generateFlutterComponent(ast) {
+    // Create styles map
+    const stylesMap = new Map();
+    for (const block of ast.styles) {
+        stylesMap.set(block.selector, block.properties);
+    }
+    // Widget code
+    const widgetBody = generateFlutterWidget(ast.jsx, stylesMap);
+    return `/// ${ast.name}
+/// Generated by PromptUI (Flutter)
+
+import 'package:flutter/material.dart';
+
+class ${ast.name} extends StatelessWidget {
+  const ${ast.name}({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ${widgetBody.trim()};
+  }
+}
+`;
+}

package/dist/frameworks/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * Framework Templates
- * Templates de geração para diferentes frameworks UI
+ * Templates for generating different UI frameworks
  */
-export type FrameworkType = 'react' | 'mui' | 'tailwind' | 'bootstrap';
+export type FrameworkType = 'react' | 'mui' | 'tailwind' | 'bootstrap' | 'flutter' | 'swiftui';
 export interface IFrameworkConfig {
     name: FrameworkType;
     displayName: string;
@@ -16,4 +16,6 @@ export declare const FRAMEWORKS: Record<FrameworkType, IFrameworkConfig>;
 export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
 export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
 export { generateBootstrapComponent } from './bootstrap.template.js';
+export { generateFlutterComponent } from './flutter.template.js';
+export { generateSwiftUIComponent } from './swiftui.template.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/frameworks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/frameworks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAqC9D,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/frameworks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/F,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAqD9D,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/frameworks/index.js

@@ -1,6 +1,6 @@
 /**
  * Framework Templates
- * Templates de geração para diferentes frameworks UI
+ * Templates for generating different UI frameworks
  */
 export const FRAMEWORKS = {
     react: {
@@ -39,7 +39,25 @@ export const FRAMEWORKS = {
         styleExtension: null, // Bootstrap classes
         imports: ["import type { ReactNode } from 'react';"],
     },
+    flutter: {
+        name: 'flutter',
+        displayName: 'Flutter',
+        description: 'Flutter/Dart StatelessWidget components',
+        fileExtension: 'dart',
+        styleExtension: null, // Inline styles
+        imports: ["import 'package:flutter/material.dart';"],
+    },
+    swiftui: {
+        name: 'swiftui',
+        displayName: 'SwiftUI',
+        description: 'SwiftUI View structs for iOS/macOS',
+        fileExtension: 'swift',
+        styleExtension: null, // Inline modifiers
+        imports: ['import SwiftUI'],
+    },
 };
 export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
 export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
 export { generateBootstrapComponent } from './bootstrap.template.js';
+export { generateFlutterComponent } from './flutter.template.js';
+export { generateSwiftUIComponent } from './swiftui.template.js';

package/dist/frameworks/mui.template.d.ts

@@ -1,10 +1,10 @@
 /**
  * Material UI Template
- * Gera componentes React com MUI sx props
+ * Generates React components with MUI components and sx props
  */
 import type { IComponentAST } from '@promptui-lib/core';
 /**
- * Gera componente React com MUI
+ * Generates React component with MUI
  */
 export declare function generateMuiComponent(ast: IComponentAST): string;
 /**

package/dist/frameworks/mui.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mui.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/mui.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,oBAAoB,CAAC;AA6QlF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CA+C/D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAwB5D"}
+{"version":3,"file":"mui.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/mui.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,oBAAoB,CAAC;AA2RlF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAgE/D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAwB5D"}

package/dist/frameworks/mui.template.js

@@ -1,7 +1,8 @@
 /**
  * Material UI Template
- * Gera componentes React com MUI sx props
+ * Generates React components with MUI components and sx props
  */
+import { getComponentMapping, extractComponentType } from '../mappings/index.js';
 /**
  * Mapeamento de tokens SCSS → MUI theme
  */
@@ -232,22 +233,47 @@ function generateMuiJSX(node, styles, indent = 2) {
     ].join('\n');
 }
 /**
- * Gera componente React com MUI
+ * Gets MUI component mapping based on component name
+ */
+function getMuiMapping(componentName) {
+    const componentType = extractComponentType(componentName);
+    if (!componentType)
+        return null;
+    const mapping = getComponentMapping(componentType);
+    if (!mapping)
+        return null;
+    return mapping.mui;
+}
+/**
+ * Generates React component with MUI
  */
 export function generateMuiComponent(ast) {
-    // Cria mapa de estilos por selector
+    // Create styles map by selector
     const stylesMap = new Map();
     for (const block of ast.styles) {
         stylesMap.set(block.selector, block.properties);
     }
+    // Check for component mapping
+    const mapping = getMuiMapping(ast.name);
     // Props interface
     const propsInterface = `export interface I${ast.name}Props {
   children?: ReactNode;
   className?: string;
   sx?: SxProps<Theme>;
 }`;
-    // JSX
-    const jsx = generateMuiJSX(ast.jsx, stylesMap);
+    // JSX - use mapping if available
+    let jsx;
+    if (mapping) {
+        const propsStr = mapping.props
+            ? Object.entries(mapping.props).map(([k, v]) => `${k}="${v}"`).join(' ')
+            : '';
+        jsx = `    <${mapping.component} ${propsStr}>
+      {children}
+    </${mapping.component}>`;
+    }
+    else {
+        jsx = generateMuiJSX(ast.jsx, stylesMap);
+    }
     // Component
     const component = `export const ${ast.name} = ({
   children,
@@ -258,12 +284,15 @@ export function generateMuiComponent(ast) {
 ${jsx}
   );
 };`;
-    // Imports
-    const imports = [
+    // Imports - include component-specific imports
+    const baseImports = [
         "import type { ReactNode } from 'react';",
         "import { Box, Stack, Typography, Button } from '@mui/material';",
         "import type { SxProps, Theme } from '@mui/material/styles';",
     ];
+    const imports = mapping?.imports
+        ? [...new Set([...baseImports, ...mapping.imports])]
+        : baseImports;
     return [
         '/**',
         ` * ${ast.name}`,

package/dist/frameworks/swiftui.template.d.ts

@@ -0,0 +1,10 @@
+/**
+ * SwiftUI Template
+ * Generates SwiftUI views from Figma designs
+ */
+import type { IComponentAST } from '@promptui-lib/core';
+/**
+ * Generates SwiftUI View struct
+ */
+export declare function generateSwiftUIComponent(ast: IComponentAST): string;
+//# sourceMappingURL=swiftui.template.d.ts.map

package/dist/frameworks/swiftui.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swiftui.template.d.ts","sourceRoot":"","sources":["../../src/frameworks/swiftui.template.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,oBAAoB,CAAC;AA0PlF;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAyBnE"}

package/dist/frameworks/swiftui.template.js

@@ -0,0 +1,247 @@
+/**
+ * SwiftUI Template
+ * Generates SwiftUI views from Figma designs
+ */
+/**
+ * Mapping of tokens to SwiftUI values
+ */
+const TOKEN_TO_SWIFTUI = {
+    // Colors
+    '$color-primary': '.blue',
+    '$color-secondary': '.gray',
+    '$color-success': '.green',
+    '$color-error': '.red',
+    '$color-warning': '.orange',
+    '$color-bg-primary': '.white',
+    '$color-bg-secondary': 'Color(.systemGray6)',
+    '$color-text-primary': '.primary',
+    '$color-text-secondary': '.secondary',
+    '$color-text-inverse': '.white',
+    // Spacing
+    '$spacing-xs': '4',
+    '$spacing-sm': '8',
+    '$spacing-md': '16',
+    '$spacing-lg': '24',
+    '$spacing-xl': '32',
+    '$spacing-2xl': '48',
+    // Border radius
+    '$radius-none': '0',
+    '$radius-small': '4',
+    '$radius-medium': '8',
+    '$radius-large': '12',
+    '$radius-xl': '16',
+    '$radius-full': '999',
+    // Font sizes
+    '$font-size-xs': '.caption2',
+    '$font-size-sm': '.caption',
+    '$font-size-md': '.body',
+    '$font-size-lg': '.headline',
+    '$font-size-xl': '.title2',
+    '$font-size-2xl': '.title',
+    '$font-size-h1': '.largeTitle',
+    '$font-size-h2': '.title',
+    // Font weights
+    '$font-weight-regular': '.regular',
+    '$font-weight-medium': '.medium',
+    '$font-weight-semibold': '.semibold',
+    '$font-weight-bold': '.bold',
+};
+/**
+ * Converts CSS value to SwiftUI
+ */
+function cssToSwiftUI(property, value) {
+    // Token mapping
+    if (value.startsWith('$')) {
+        return TOKEN_TO_SWIFTUI[value] ?? value;
+    }
+    // Parse numeric values
+    const numValue = parseFloat(value);
+    if (!isNaN(numValue)) {
+        return numValue.toString();
+    }
+    // Color hex to SwiftUI
+    if (value.startsWith('#')) {
+        return `Color(hex: "${value}")`;
+    }
+    return value;
+}
+/**
+ * Gets SwiftUI view for element type
+ */
+function getSwiftUIView(node) {
+    switch (node.tag) {
+        case 'button':
+            return 'Button';
+        case 'img':
+            return 'Image';
+        case 'input':
+            return 'TextField';
+        case 'span':
+        case 'p':
+        case 'h1':
+        case 'h2':
+        case 'h3':
+            return 'Text';
+        default:
+            return 'VStack'; // Default container
+    }
+}
+/**
+ * Generates SwiftUI modifiers from styles
+ */
+function generateModifiers(styles, indent) {
+    const spaces = ' '.repeat(indent);
+    const modifiers = [];
+    for (const style of styles) {
+        const value = cssToSwiftUI(style.property, style.token ?? style.value);
+        switch (style.property) {
+            case 'padding':
+                modifiers.push(`${spaces}.padding(${value})`);
+                break;
+            case 'padding-top':
+                modifiers.push(`${spaces}.padding(.top, ${value})`);
+                break;
+            case 'padding-bottom':
+                modifiers.push(`${spaces}.padding(.bottom, ${value})`);
+                break;
+            case 'padding-left':
+                modifiers.push(`${spaces}.padding(.leading, ${value})`);
+                break;
+            case 'padding-right':
+                modifiers.push(`${spaces}.padding(.trailing, ${value})`);
+                break;
+            case 'background-color':
+                modifiers.push(`${spaces}.background(${value})`);
+                break;
+            case 'border-radius':
+                modifiers.push(`${spaces}.cornerRadius(${value})`);
+                break;
+            case 'color':
+                modifiers.push(`${spaces}.foregroundColor(${value})`);
+                break;
+            case 'font-size':
+                modifiers.push(`${spaces}.font(${value})`);
+                break;
+            case 'font-weight':
+                modifiers.push(`${spaces}.fontWeight(${value})`);
+                break;
+            case 'width':
+                if (value !== 'auto') {
+                    modifiers.push(`${spaces}.frame(width: ${value})`);
+                }
+                break;
+            case 'height':
+                if (value !== 'auto') {
+                    modifiers.push(`${spaces}.frame(height: ${value})`);
+                }
+                break;
+        }
+    }
+    return modifiers;
+}
+/**
+ * Generates SwiftUI view code
+ */
+function generateSwiftUIView(node, styles, indent = 8) {
+    const spaces = ' '.repeat(indent);
+    const nodeStyles = styles.get(`.${node.className}`) ?? [];
+    // Determine view type
+    const view = getSwiftUIView(node);
+    // Get flex direction for layout
+    const flexDir = nodeStyles.find(s => s.property === 'flex-direction');
+    const layout = flexDir?.value === 'row' ? 'HStack' : 'VStack';
+    // Get alignment
+    const alignItems = nodeStyles.find(s => s.property === 'align-items');
+    let alignment = '';
+    if (alignItems) {
+        switch (alignItems.value) {
+            case 'center':
+                alignment = ', alignment: .center';
+                break;
+            case 'flex-start':
+                alignment = flexDir?.value === 'row' ? ', alignment: .top' : ', alignment: .leading';
+                break;
+            case 'flex-end':
+                alignment = flexDir?.value === 'row' ? ', alignment: .bottom' : ', alignment: .trailing';
+                break;
+        }
+    }
+    // Get gap/spacing
+    const gap = nodeStyles.find(s => s.property === 'gap');
+    const spacing = gap ? cssToSwiftUI('gap', gap.token ?? gap.value) : '0';
+    // Generate modifiers
+    const modifiers = generateModifiers(nodeStyles, indent);
+    // Children
+    const children = node.children.map(child => {
+        if (typeof child === 'string' || (typeof child === 'object' && 'type' in child && child.type === 'text')) {
+            const text = typeof child === 'string' ? child : child.value;
+            return `${spaces}    Text("${text}")`;
+        }
+        return generateSwiftUIView(child, styles, indent + 4);
+    });
+    // Build view
+    if (view === 'Text') {
+        const text = node.children[0];
+        const textContent = typeof text === 'string' ? text : text?.value ?? '';
+        const textView = `${spaces}Text("${textContent}")`;
+        if (modifiers.length > 0) {
+            return textView + '\n' + modifiers.join('\n');
+        }
+        return textView;
+    }
+    if (view === 'Button') {
+        const buttonLabel = children.length > 0 ? children[0].trim() : 'Text("Button")';
+        const buttonView = `${spaces}Button(action: {}) {\n${spaces}    ${buttonLabel}\n${spaces}}`;
+        if (modifiers.length > 0) {
+            return buttonView + '\n' + modifiers.join('\n');
+        }
+        return buttonView;
+    }
+    if (view === 'Image') {
+        return `${spaces}Image(systemName: "photo")\n${spaces}    .resizable()\n${spaces}    .aspectRatio(contentMode: .fit)`;
+    }
+    // Container (VStack/HStack)
+    if (children.length === 0) {
+        const emptyView = `${spaces}${layout}(spacing: ${spacing}${alignment}) {}`;
+        if (modifiers.length > 0) {
+            return emptyView + '\n' + modifiers.join('\n');
+        }
+        return emptyView;
+    }
+    const containerView = [
+        `${spaces}${layout}(spacing: ${spacing}${alignment}) {`,
+        ...children,
+        `${spaces}}`,
+    ].join('\n');
+    if (modifiers.length > 0) {
+        return containerView + '\n' + modifiers.join('\n');
+    }
+    return containerView;
+}
+/**
+ * Generates SwiftUI View struct
+ */
+export function generateSwiftUIComponent(ast) {
+    // Create styles map
+    const stylesMap = new Map();
+    for (const block of ast.styles) {
+        stylesMap.set(block.selector, block.properties);
+    }
+    // View body
+    const viewBody = generateSwiftUIView(ast.jsx, stylesMap);
+    return `/// ${ast.name}
+/// Generated by PromptUI (SwiftUI)
+
+import SwiftUI
+
+struct ${ast.name}: View {
+    var body: some View {
+${viewBody}
+    }
+}
+
+#Preview {
+    ${ast.name}()
+}
+`;
+}

package/dist/index.d.ts

@@ -5,4 +5,5 @@
 export * from './generators/index.js';
 export * from './writers/index.js';
 export * from './frameworks/index.js';
+export * from './mappings/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -5,3 +5,4 @@
 export * from './generators/index.js';
 export * from './writers/index.js';
 export * from './frameworks/index.js';
+export * from './mappings/index.js';