@promptui-lib/codegen 0.1.4 → 0.1.5

package/dist/mappings/component-mappings.js

@@ -18,6 +18,11 @@ export const COMPONENT_MAPPINGS = {
             props: { variant: 'contained' },
             imports: ["import { Button } from '@mui/material';"],
         },
+        antd: {
+            component: 'Button',
+            props: { type: 'primary' },
+            imports: ["import { Button } from 'antd';"],
+        },
         tailwind: {
             tag: 'button',
             classes: ['px-4', 'py-2', 'rounded-lg', 'font-medium'],
@@ -45,6 +50,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'ButtonGroup',
             imports: ["import { ButtonGroup } from '@mui/material';"],
         },
+        antd: {
+            component: 'Space.Compact',
+            imports: ["import { Space, Button } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['inline-flex', 'rounded-lg', 'overflow-hidden'],
@@ -73,6 +82,11 @@ export const COMPONENT_MAPPINGS = {
             props: { severity: 'info' },
             imports: ["import { Alert } from '@mui/material';"],
         },
+        antd: {
+            component: 'Alert',
+            props: { type: 'info', showIcon: 'true' },
+            imports: ["import { Alert } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['p-4', 'rounded-lg', 'border'],
@@ -104,6 +118,11 @@ export const COMPONENT_MAPPINGS = {
             props: { size: 'small' },
             imports: ["import { Chip } from '@mui/material';"],
         },
+        antd: {
+            component: 'Badge',
+            props: { count: '0' },
+            imports: ["import { Badge } from 'antd';"],
+        },
         tailwind: {
             tag: 'span',
             classes: ['px-2', 'py-1', 'text-xs', 'font-medium', 'rounded-full'],
@@ -134,6 +153,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Card',
             imports: ["import { Card, CardContent } from '@mui/material';"],
         },
+        antd: {
+            component: 'Card',
+            imports: ["import { Card } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['rounded-lg', 'shadow-md', 'overflow-hidden', 'bg-white'],
@@ -162,6 +185,11 @@ export const COMPONENT_MAPPINGS = {
             component: 'Dialog',
             imports: ["import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';"],
         },
+        antd: {
+            component: 'Modal',
+            props: { open: 'false' },
+            imports: ["import { Modal } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['fixed', 'inset-0', 'z-50', 'flex', 'items-center', 'justify-center'],
@@ -187,6 +215,11 @@ export const COMPONENT_MAPPINGS = {
             component: 'Dialog',
             imports: ["import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';"],
         },
+        antd: {
+            component: 'Modal',
+            props: { open: 'false' },
+            imports: ["import { Modal } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['fixed', 'inset-0', 'z-50', 'flex', 'items-center', 'justify-center'],
@@ -213,6 +246,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'AppBar',
             imports: ["import { AppBar, Toolbar } from '@mui/material';"],
         },
+        antd: {
+            component: 'Layout.Header',
+            imports: ["import { Layout, Menu } from 'antd';"],
+        },
         tailwind: {
             tag: 'nav',
             classes: ['flex', 'items-center', 'justify-between', 'px-6', 'py-4'],
@@ -237,6 +274,11 @@ export const COMPONENT_MAPPINGS = {
             component: 'Tabs',
             imports: ["import { Tabs, Tab } from '@mui/material';"],
         },
+        antd: {
+            component: 'Menu',
+            props: { mode: 'horizontal' },
+            imports: ["import { Menu } from 'antd';"],
+        },
         tailwind: {
             tag: 'nav',
             classes: ['flex', 'space-x-4'],
@@ -261,6 +303,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Tabs',
             imports: ["import { Tabs, Tab } from '@mui/material';"],
         },
+        antd: {
+            component: 'Tabs',
+            imports: ["import { Tabs } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['flex', 'border-b'],
@@ -286,6 +332,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Breadcrumbs',
             imports: ["import { Breadcrumbs, Link } from '@mui/material';"],
         },
+        antd: {
+            component: 'Breadcrumb',
+            imports: ["import { Breadcrumb } from 'antd';"],
+        },
         tailwind: {
             tag: 'nav',
             classes: ['flex', 'items-center', 'space-x-2', 'text-sm'],
@@ -310,6 +360,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Pagination',
             imports: ["import { Pagination } from '@mui/material';"],
         },
+        antd: {
+            component: 'Pagination',
+            imports: ["import { Pagination } from 'antd';"],
+        },
         tailwind: {
             tag: 'nav',
             classes: ['flex', 'items-center', 'space-x-1'],
@@ -336,6 +390,10 @@ export const COMPONENT_MAPPINGS = {
             props: { variant: 'outlined', fullWidth: 'true' },
             imports: ["import { TextField } from '@mui/material';"],
         },
+        antd: {
+            component: 'Input',
+            imports: ["import { Input } from 'antd';"],
+        },
         tailwind: {
             tag: 'input',
             classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg', 'focus:ring-2', 'focus:outline-none'],
@@ -363,6 +421,10 @@ export const COMPONENT_MAPPINGS = {
             props: { variant: 'outlined' },
             imports: ["import { TextField } from '@mui/material';"],
         },
+        antd: {
+            component: 'Input',
+            imports: ["import { Input } from 'antd';"],
+        },
         tailwind: {
             tag: 'input',
             classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg'],
@@ -388,6 +450,11 @@ export const COMPONENT_MAPPINGS = {
             props: { multiline: 'true', rows: '4' },
             imports: ["import { TextField } from '@mui/material';"],
         },
+        antd: {
+            component: 'Input.TextArea',
+            props: { rows: '4' },
+            imports: ["import { Input } from 'antd';"],
+        },
         tailwind: {
             tag: 'textarea',
             classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg', 'resize-y'],
@@ -413,6 +480,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Select',
             imports: ["import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';"],
         },
+        antd: {
+            component: 'Select',
+            imports: ["import { Select } from 'antd';"],
+        },
         tailwind: {
             tag: 'select',
             classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg', 'bg-white'],
@@ -439,6 +510,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Checkbox',
             imports: ["import { Checkbox, FormControlLabel } from '@mui/material';"],
         },
+        antd: {
+            component: 'Checkbox',
+            imports: ["import { Checkbox } from 'antd';"],
+        },
         tailwind: {
             tag: 'input',
             classes: ['w-4', 'h-4', 'rounded', 'border-gray-300'],
@@ -465,6 +540,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Radio',
             imports: ["import { Radio, RadioGroup, FormControlLabel } from '@mui/material';"],
         },
+        antd: {
+            component: 'Radio',
+            imports: ["import { Radio } from 'antd';"],
+        },
         tailwind: {
             tag: 'input',
             classes: ['w-4', 'h-4', 'border-gray-300'],
@@ -490,6 +569,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Switch',
             imports: ["import { Switch, FormControlLabel } from '@mui/material';"],
         },
+        antd: {
+            component: 'Switch',
+            imports: ["import { Switch } from 'antd';"],
+        },
         tailwind: {
             tag: 'button',
             classes: ['relative', 'inline-flex', 'h-6', 'w-11', 'rounded-full', 'transition-colors'],
@@ -514,6 +597,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'FormControl',
             imports: ["import { FormControl, FormLabel } from '@mui/material';"],
         },
+        antd: {
+            component: 'Form.Item',
+            imports: ["import { Form } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['mb-4'],
@@ -542,6 +629,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'CircularProgress',
             imports: ["import { CircularProgress } from '@mui/material';"],
         },
+        antd: {
+            component: 'Spin',
+            imports: ["import { Spin } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['animate-spin', 'rounded-full', 'border-2', 'border-t-transparent'],
@@ -570,6 +661,11 @@ export const COMPONENT_MAPPINGS = {
             component: 'CircularProgress',
             imports: ["import { CircularProgress } from '@mui/material';"],
         },
+        antd: {
+            component: 'Spin',
+            props: { spinning: 'true' },
+            imports: ["import { Spin } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['animate-spin', 'rounded-full', 'border-2', 'border-t-transparent'],
@@ -597,6 +693,11 @@ export const COMPONENT_MAPPINGS = {
             component: 'LinearProgress',
             imports: ["import { LinearProgress } from '@mui/material';"],
         },
+        antd: {
+            component: 'Progress',
+            props: { percent: '0' },
+            imports: ["import { Progress } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['w-full', 'bg-gray-200', 'rounded-full', 'h-2'],
@@ -623,6 +724,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Snackbar',
             imports: ["import { Snackbar, Alert } from '@mui/material';"],
         },
+        antd: {
+            component: 'message',
+            imports: ["import { message } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['fixed', 'bottom-4', 'right-4', 'p-4', 'rounded-lg', 'shadow-lg'],
@@ -648,6 +753,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Snackbar',
             imports: ["import { Snackbar } from '@mui/material';"],
         },
+        antd: {
+            component: 'message',
+            imports: ["import { message } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['fixed', 'bottom-4', 'left-1/2', '-translate-x-1/2', 'p-4', 'rounded-lg'],
@@ -673,6 +782,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Tooltip',
             imports: ["import { Tooltip } from '@mui/material';"],
         },
+        antd: {
+            component: 'Tooltip',
+            imports: ["import { Tooltip } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['relative', 'group'],
@@ -699,6 +812,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Menu',
             imports: ["import { Menu, MenuItem, Button } from '@mui/material';"],
         },
+        antd: {
+            component: 'Dropdown',
+            imports: ["import { Dropdown } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['relative', 'inline-block'],
@@ -723,6 +840,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Menu',
             imports: ["import { Menu, MenuItem } from '@mui/material';"],
         },
+        antd: {
+            component: 'Menu',
+            imports: ["import { Menu } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['absolute', 'mt-2', 'py-2', 'bg-white', 'rounded-lg', 'shadow-lg'],
@@ -747,6 +868,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'List',
             imports: ["import { List, ListItem, ListItemText } from '@mui/material';"],
         },
+        antd: {
+            component: 'List',
+            imports: ["import { List } from 'antd';"],
+        },
         tailwind: {
             tag: 'ul',
             classes: ['divide-y', 'rounded-lg', 'border'],
@@ -771,6 +896,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'List',
             imports: ["import { List, ListItem } from '@mui/material';"],
         },
+        antd: {
+            component: 'List',
+            imports: ["import { List } from 'antd';"],
+        },
         tailwind: {
             tag: 'ul',
             classes: ['space-y-2'],
@@ -795,6 +924,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Table',
             imports: ["import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';"],
         },
+        antd: {
+            component: 'Table',
+            imports: ["import { Table } from 'antd';"],
+        },
         tailwind: {
             tag: 'table',
             classes: ['w-full', 'text-left', 'border-collapse'],
@@ -819,6 +952,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Accordion',
             imports: ["import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';"],
         },
+        antd: {
+            component: 'Collapse',
+            imports: ["import { Collapse } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['divide-y', 'border', 'rounded-lg'],
@@ -843,6 +980,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Collapse',
             imports: ["import { Collapse } from '@mui/material';"],
         },
+        antd: {
+            component: 'Collapse',
+            imports: ["import { Collapse } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['overflow-hidden', 'transition-all'],
@@ -869,6 +1010,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Box',
             imports: ["import { Box, IconButton } from '@mui/material';"],
         },
+        antd: {
+            component: 'Carousel',
+            imports: ["import { Carousel } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['relative', 'overflow-hidden'],
@@ -894,6 +1039,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Drawer',
             imports: ["import { Drawer } from '@mui/material';"],
         },
+        antd: {
+            component: 'Drawer',
+            imports: ["import { Drawer } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['fixed', 'inset-y-0', 'left-0', 'w-64', 'transform', '-translate-x-full'],
@@ -919,6 +1068,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Drawer',
             imports: ["import { Drawer } from '@mui/material';"],
         },
+        antd: {
+            component: 'Drawer',
+            imports: ["import { Drawer } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['fixed', 'inset-y-0', 'left-0', 'w-64', 'bg-white', 'shadow-lg'],
@@ -944,6 +1097,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Avatar',
             imports: ["import { Avatar } from '@mui/material';"],
         },
+        antd: {
+            component: 'Avatar',
+            imports: ["import { Avatar } from 'antd';"],
+        },
         tailwind: {
             tag: 'img',
             classes: ['w-10', 'h-10', 'rounded-full', 'object-cover'],
@@ -969,6 +1126,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Chip',
             imports: ["import { Chip } from '@mui/material';"],
         },
+        antd: {
+            component: 'Tag',
+            imports: ["import { Tag } from 'antd';"],
+        },
         tailwind: {
             tag: 'span',
             classes: ['inline-flex', 'items-center', 'px-3', 'py-1', 'rounded-full', 'text-sm'],
@@ -995,6 +1156,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Slider',
             imports: ["import { Slider } from '@mui/material';"],
         },
+        antd: {
+            component: 'Slider',
+            imports: ["import { Slider } from 'antd';"],
+        },
         tailwind: {
             tag: 'input',
             classes: ['w-full', 'h-2', 'rounded-lg', 'appearance-none', 'cursor-pointer'],
@@ -1019,6 +1184,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Divider',
             imports: ["import { Divider } from '@mui/material';"],
         },
+        antd: {
+            component: 'Divider',
+            imports: ["import { Divider } from 'antd';"],
+        },
         tailwind: {
             tag: 'hr',
             classes: ['border-gray-200'],
@@ -1043,6 +1212,10 @@ export const COMPONENT_MAPPINGS = {
             component: 'Skeleton',
             imports: ["import { Skeleton } from '@mui/material';"],
         },
+        antd: {
+            component: 'Skeleton',
+            imports: ["import { Skeleton } from 'antd';"],
+        },
         tailwind: {
             tag: 'div',
             classes: ['animate-pulse', 'bg-gray-200', 'rounded'],
@@ -1062,6 +1235,329 @@ export const COMPONENT_MAPPINGS = {
             modifiers: ['.fill(Color.gray.opacity(0.3))', '.shimmering()'],
         },
     },
+    // ============= ANT DESIGN SPECIFIC =============
+    datepicker: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-control'],
+            wrapper: 'type="date"',
+        },
+        mui: {
+            component: 'DatePicker',
+            imports: ["import { DatePicker } from '@mui/x-date-pickers';"],
+        },
+        antd: {
+            component: 'DatePicker',
+            imports: ["import { DatePicker } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'datepicker',
+        },
+        flutter: {
+            widget: 'showDatePicker',
+        },
+        swiftui: {
+            view: 'DatePicker',
+        },
+    },
+    timepicker: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-control'],
+            wrapper: 'type="time"',
+        },
+        mui: {
+            component: 'TimePicker',
+            imports: ["import { TimePicker } from '@mui/x-date-pickers';"],
+        },
+        antd: {
+            component: 'TimePicker',
+            imports: ["import { TimePicker } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['w-full', 'px-3', 'py-2', 'border', 'rounded-lg'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'timepicker',
+        },
+        flutter: {
+            widget: 'showTimePicker',
+        },
+        swiftui: {
+            view: 'DatePicker',
+            modifiers: ['.datePickerStyle(.compact)'],
+        },
+    },
+    upload: {
+        bootstrap: {
+            tag: 'input',
+            classes: ['form-control'],
+            wrapper: 'type="file"',
+        },
+        mui: {
+            component: 'Button',
+            props: { component: 'label' },
+            imports: ["import { Button } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Upload',
+            imports: ["import { Upload, Button } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'input',
+            classes: ['block', 'w-full', 'text-sm', 'file:mr-4', 'file:py-2', 'file:px-4', 'file:rounded', 'file:border-0'],
+        },
+        scss: {
+            tag: 'input',
+            baseClass: 'upload',
+        },
+        flutter: {
+            widget: 'ElevatedButton',
+            props: { onPressed: 'pickFile' },
+        },
+        swiftui: {
+            view: 'Button',
+            modifiers: ['.fileImporter(isPresented: $isPresented)'],
+        },
+    },
+    rate: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['d-flex'],
+        },
+        mui: {
+            component: 'Rating',
+            imports: ["import { Rating } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Rate',
+            imports: ["import { Rate } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['flex', 'items-center', 'space-x-1'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'rate',
+        },
+        flutter: {
+            widget: 'Row',
+        },
+        swiftui: {
+            view: 'HStack',
+        },
+    },
+    tree: {
+        bootstrap: {
+            tag: 'ul',
+            classes: ['list-unstyled'],
+        },
+        mui: {
+            component: 'TreeView',
+            imports: ["import { TreeView, TreeItem } from '@mui/x-tree-view';"],
+        },
+        antd: {
+            component: 'Tree',
+            imports: ["import { Tree } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'ul',
+            classes: ['space-y-1', 'pl-4'],
+        },
+        scss: {
+            tag: 'ul',
+            baseClass: 'tree',
+        },
+        flutter: {
+            widget: 'ExpansionTile',
+        },
+        swiftui: {
+            view: 'OutlineGroup',
+        },
+    },
+    transfer: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['d-flex', 'gap-3'],
+        },
+        mui: {
+            component: 'TransferList',
+            imports: ["import { List, ListItem, Checkbox, Button, Grid } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Transfer',
+            imports: ["import { Transfer } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['flex', 'items-center', 'gap-4'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'transfer',
+        },
+        flutter: {
+            widget: 'Row',
+        },
+        swiftui: {
+            view: 'HStack',
+        },
+    },
+    popover: {
+        bootstrap: {
+            tag: 'div',
+            classes: [],
+            wrapper: 'data-bs-toggle="popover"',
+        },
+        mui: {
+            component: 'Popover',
+            imports: ["import { Popover } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Popover',
+            imports: ["import { Popover } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['relative'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'popover',
+        },
+        flutter: {
+            widget: 'PopupMenuButton',
+        },
+        swiftui: {
+            view: 'Button',
+            modifiers: ['.popover(isPresented: $isPresented)'],
+        },
+    },
+    steps: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['d-flex', 'justify-content-between'],
+        },
+        mui: {
+            component: 'Stepper',
+            imports: ["import { Stepper, Step, StepLabel } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Steps',
+            imports: ["import { Steps } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['flex', 'items-center', 'justify-between'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'steps',
+        },
+        flutter: {
+            widget: 'Stepper',
+        },
+        swiftui: {
+            view: 'HStack',
+        },
+    },
+    timeline: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['d-flex', 'flex-column'],
+        },
+        mui: {
+            component: 'Timeline',
+            imports: ["import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@mui/lab';"],
+        },
+        antd: {
+            component: 'Timeline',
+            imports: ["import { Timeline } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['relative', 'border-l', 'border-gray-200', 'ml-3'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'timeline',
+        },
+        flutter: {
+            widget: 'Column',
+        },
+        swiftui: {
+            view: 'VStack',
+            modifiers: ['.alignment(.leading)'],
+        },
+    },
+    tag: {
+        bootstrap: {
+            tag: 'span',
+            classes: ['badge'],
+        },
+        mui: {
+            component: 'Chip',
+            props: { size: 'small' },
+            imports: ["import { Chip } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Tag',
+            imports: ["import { Tag } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'span',
+            classes: ['inline-flex', 'items-center', 'px-2', 'py-1', 'text-xs', 'rounded'],
+        },
+        scss: {
+            tag: 'span',
+            baseClass: 'tag',
+        },
+        flutter: {
+            widget: 'Chip',
+        },
+        swiftui: {
+            view: 'Text',
+            modifiers: ['.padding(4)', '.background(Color.gray.opacity(0.2))', '.cornerRadius(4)'],
+        },
+    },
+    segmented: {
+        bootstrap: {
+            tag: 'div',
+            classes: ['btn-group'],
+            wrapper: 'role="group"',
+        },
+        mui: {
+            component: 'ToggleButtonGroup',
+            imports: ["import { ToggleButtonGroup, ToggleButton } from '@mui/material';"],
+        },
+        antd: {
+            component: 'Segmented',
+            imports: ["import { Segmented } from 'antd';"],
+        },
+        tailwind: {
+            tag: 'div',
+            classes: ['inline-flex', 'rounded-lg', 'overflow-hidden', 'border'],
+        },
+        scss: {
+            tag: 'div',
+            baseClass: 'segmented',
+        },
+        flutter: {
+            widget: 'SegmentedButton',
+        },
+        swiftui: {
+            view: 'Picker',
+            modifiers: ['.pickerStyle(.segmented)'],
+        },
+    },
 };
 /**
  * Get component mapping by name (case-insensitive)