@promptui-lib/figma-parser 0.1.2 → 0.1.4

package/README.md

@@ -1,8 +1,4 @@
-<p align="center">
-  <img src="./logo.png" alt="PromptUI Logo" width="200" />
-</p>
-
-<h1 align="center">PromptUI</h1>
+<h1 align="center">🎨 PromptUI</h1>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@promptui-lib/cli"><img src="https://img.shields.io/npm/v/@promptui-lib/cli.svg" alt="npm version" /></a>
@@ -356,6 +352,92 @@ Create `promptui.config.json`:
 
 ---
 
+## Figma Support
+
+### What We Extract from Figma
+
+| Element | Supported | Notes |
+|---------|-----------|-------|
+| **Colors** | ✅ Yes | RGB, Hex, tokens |
+| **Spacing** | ✅ Yes | Padding, margin, gap |
+| **Typography** | ✅ Yes | Font size, weight, family |
+| **Border Radius** | ✅ Yes | All corners |
+| **Shadows** | ✅ Yes | Drop shadow, inner shadow |
+| **Layout** | ✅ Yes | Auto Layout → Flexbox |
+| **SVG/Icons** | ✅ Yes | Exported as inline SVG |
+| **Images** | ⚠️ Partial | Placeholder generated |
+| **Gradients** | ⚠️ Partial | Linear gradients |
+| **Animations** | ❌ No | Not available via Figma API |
+| **Prototype Links** | ❌ No | Prototype data only |
+
+### Bootstrap Components Mapping
+
+Name your Figma frames to auto-map to Bootstrap components:
+
+| Figma Frame Name | Bootstrap Output |
+|------------------|------------------|
+| `#Alert` | `<div class="alert">` |
+| `#Badge` | `<span class="badge">` |
+| `#Breadcrumb` | `<nav class="breadcrumb">` |
+| `#Button` | `<button class="btn">` |
+| `#ButtonGroup` | `<div class="btn-group">` |
+| `#Card` | `<div class="card">` |
+| `#Carousel` | `<div class="carousel">` |
+| `#Collapse` | `<div class="collapse">` |
+| `#Dropdown` | `<div class="dropdown">` |
+| `#ListGroup` | `<ul class="list-group">` |
+| `#Modal` | `<div class="modal">` |
+| `#Navbar` | `<nav class="navbar">` |
+| `#Nav` or `#Tabs` | `<ul class="nav">` |
+| `#Offcanvas` | `<div class="offcanvas">` |
+| `#Pagination` | `<nav class="pagination">` |
+| `#Progress` | `<div class="progress">` |
+| `#Spinner` | `<div class="spinner">` |
+| `#Toast` | `<div class="toast">` |
+| `#Tooltip` | `data-bs-toggle="tooltip"` |
+
+### Material UI Components Mapping
+
+| Figma Frame Name | MUI Output |
+|------------------|------------|
+| `#Alert` | `<Alert>` |
+| `#Avatar` | `<Avatar>` |
+| `#Badge` | `<Badge>` |
+| `#Breadcrumb` | `<Breadcrumbs>` |
+| `#Button` | `<Button>` |
+| `#Card` | `<Card>` |
+| `#Checkbox` | `<Checkbox>` |
+| `#Chip` | `<Chip>` |
+| `#Dialog` or `#Modal` | `<Dialog>` |
+| `#Drawer` | `<Drawer>` |
+| `#Input` or `#TextField` | `<TextField>` |
+| `#List` | `<List>` |
+| `#Menu` | `<Menu>` |
+| `#Pagination` | `<Pagination>` |
+| `#Progress` | `<LinearProgress>` |
+| `#Radio` | `<Radio>` |
+| `#Select` | `<Select>` |
+| `#Slider` | `<Slider>` |
+| `#Snackbar` | `<Snackbar>` |
+| `#Switch` | `<Switch>` |
+| `#Table` | `<Table>` |
+| `#Tabs` | `<Tabs>` |
+| `#Tooltip` | `<Tooltip>` |
+
+### Form Components
+
+| Figma Frame Name | React + SCSS | Bootstrap | MUI |
+|------------------|--------------|-----------|-----|
+| `#Input` | `<input>` | `<input class="form-control">` | `<TextField>` |
+| `#Select` | `<select>` | `<select class="form-select">` | `<Select>` |
+| `#Checkbox` | `<input type="checkbox">` | `<input class="form-check-input">` | `<Checkbox>` |
+| `#Radio` | `<input type="radio">` | `<input class="form-check-input">` | `<Radio>` |
+| `#Switch` | `<input type="checkbox">` | `<div class="form-switch">` | `<Switch>` |
+| `#Textarea` | `<textarea>` | `<textarea class="form-control">` | `<TextField multiline>` |
+| `#FormGroup` | `<div class="form-group">` | `<div class="mb-3">` | `<FormControl>` |
+
+---
+
 ## For Designers
 
 ### Figma Rules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptui-lib/figma-parser",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "description": "Figma API client and parser for PromptUI",
   "license": "UNLICENSED",
@@ -30,7 +30,7 @@
     "dist"
   ],
   "dependencies": {
-    "@promptui-lib/core": "0.1.2"
+    "@promptui-lib/core": "0.1.4"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",