{
  "categories": [
    "Input",
    "Data",
    "Overlay",
    "Layout",
    "Feedback",
    "Media",
    "Navigation"
  ],
  "count": 37,
  "components": [
    {
      "id": "button",
      "label": "Button",
      "category": "Input",
      "template": [
        "[ OK ]"
      ],
      "width": 6,
      "height": 1
    },
    {
      "id": "input",
      "label": "Input",
      "category": "Input",
      "template": [
        "[____________]"
      ],
      "width": 14,
      "height": 1
    },
    {
      "id": "select",
      "label": "Select",
      "category": "Input",
      "template": [
        "[▾           ]"
      ],
      "width": 14,
      "height": 1
    },
    {
      "id": "checkbox",
      "label": "Checkbox",
      "category": "Input",
      "template": [
        "[✓] Label"
      ],
      "width": 9,
      "height": 1
    },
    {
      "id": "radio",
      "label": "Radio",
      "category": "Input",
      "template": [
        "(●) Option"
      ],
      "width": 10,
      "height": 1
    },
    {
      "id": "toggle",
      "label": "Toggle",
      "category": "Input",
      "template": [
        "[●━━━━━]"
      ],
      "width": 8,
      "height": 1
    },
    {
      "id": "table",
      "label": "Table",
      "category": "Data",
      "template": [
        "┌──────┬──────┬──────┐",
        "│ Head │ Head │ Head │",
        "├──────┼──────┼──────┤",
        "│ Cell │ Cell │ Cell │",
        "│ Cell │ Cell │ Cell │",
        "└──────┴──────┴──────┘"
      ],
      "width": 22,
      "height": 6
    },
    {
      "id": "modal",
      "label": "Modal",
      "category": "Overlay",
      "template": [
        "┌────────────[×]──────┐",
        "│ Modal Title         │",
        "│                     │",
        "│ Content goes here   │",
        "│                     │",
        "│         [ Cancel ]  [ OK ] │",
        "└─────────────────────┘"
      ],
      "width": 25,
      "height": 7
    },
    {
      "id": "browser",
      "label": "Browser",
      "category": "Layout",
      "template": [
        "┌─────────────────────────────┐",
        "│ ◄ ► ⟳  [___________________]│",
        "├─────────────────────────────┤",
        "│                             │",
        "│                             │",
        "│                             │",
        "└─────────────────────────────┘"
      ],
      "width": 33,
      "height": 7
    },
    {
      "id": "card",
      "label": "Card",
      "category": "Layout",
      "template": [
        "┌──────────────────┐",
        "│ Card Title       │",
        "│                  │",
        "│ Card content     │",
        "│ goes here.       │",
        "│                  │",
        "│ [ Action ]       │",
        "└──────────────────┘"
      ],
      "width": 20,
      "height": 8
    },
    {
      "id": "navbar",
      "label": "Navbar",
      "category": "Layout",
      "template": [
        "┌─────────────────────────────────┐",
        "│ ≡  Logo            Search    ☆  │",
        "└─────────────────────────────────┘"
      ],
      "width": 35,
      "height": 3
    },
    {
      "id": "tabs",
      "label": "Tabs",
      "category": "Layout",
      "template": [
        "┌──────┐  ────────  ────────",
        "│ Tab1 │   Tab 2     Tab 3  ",
        "├──────┴──────────────────┐",
        "│ Content                  │",
        "└──────────────────────────┘"
      ],
      "width": 30,
      "height": 5
    },
    {
      "id": "progress",
      "label": "Progress",
      "category": "Feedback",
      "template": [
        "▓▓▓▓▓▓░░░░░░░░ 42%"
      ],
      "width": 18,
      "height": 1
    },
    {
      "id": "icon",
      "label": "Icon",
      "category": "Media",
      "template": [
        "★"
      ],
      "width": 1,
      "height": 1
    },
    {
      "id": "image",
      "label": "Image",
      "category": "Media",
      "template": [
        "╔══════════════╗",
        "║              ║",
        "║   [ img ]    ║",
        "║              ║",
        "╚══════════════╝"
      ],
      "width": 16,
      "height": 5
    },
    {
      "id": "divider",
      "label": "Divider",
      "category": "Layout",
      "template": [
        "─────────────────────"
      ],
      "width": 21,
      "height": 1
    },
    {
      "id": "alert",
      "label": "Alert",
      "category": "Feedback",
      "template": [
        "┌──────────────────────────┐",
        "│ ⚠  Warning message here  │",
        "└──────────────────────────┘"
      ],
      "width": 28,
      "height": 3
    },
    {
      "id": "breadcrumb",
      "label": "Breadcrumb",
      "category": "Navigation",
      "template": [
        "Home > Section > Page"
      ],
      "width": 21,
      "height": 1
    },
    {
      "id": "avatar",
      "label": "Avatar",
      "category": "Media",
      "template": [
        "╭──╮",
        "│DH│",
        "╰──╯"
      ],
      "width": 4,
      "height": 3
    },
    {
      "id": "list",
      "label": "List",
      "category": "Data",
      "template": [
        "• Item one",
        "• Item two",
        "• Item three"
      ],
      "width": 12,
      "height": 3
    },
    {
      "id": "stepper",
      "label": "Stepper",
      "category": "Navigation",
      "template": [
        "● ─────── ○ ─────── ○"
      ],
      "width": 21,
      "height": 1
    },
    {
      "id": "rating",
      "label": "Rating",
      "category": "Feedback",
      "template": [
        "★★★☆☆"
      ],
      "width": 5,
      "height": 1
    },
    {
      "id": "skeleton",
      "label": "Skeleton",
      "category": "Feedback",
      "template": [
        "░░░░░░░░░░░░░░░░░░░░",
        "░░░░░░░░░░░░░░",
        "░░░░░░░░░░░░░░░░░"
      ],
      "width": 20,
      "height": 3
    },
    {
      "id": "search",
      "label": "Search",
      "category": "Input",
      "template": [
        "( Search          )"
      ],
      "width": 19,
      "height": 1
    },
    {
      "id": "segmented",
      "label": "Segmented",
      "category": "Input",
      "template": [
        "[ Day | Week | Month ]"
      ],
      "width": 22,
      "height": 1
    },
    {
      "id": "slider",
      "label": "Slider",
      "category": "Input",
      "template": [
        "──────●────────"
      ],
      "width": 15,
      "height": 1
    },
    {
      "id": "textarea",
      "label": "Text area",
      "category": "Input",
      "template": [
        "┌────────────────────┐",
        "│ Write something... │",
        "│                    │",
        "│                    │",
        "└────────────────────┘"
      ],
      "width": 22,
      "height": 5
    },
    {
      "id": "datepicker",
      "label": "Date picker",
      "category": "Input",
      "template": [
        "┌─ October ────────────┐",
        "│ Mo Tu We Th Fr Sa Su │",
        "│           1  2  3  4 │",
        "│  5  6  7  8  9 10 11 │",
        "│ 12 13 14 15 16 17 18 │",
        "└──────────────────────┘"
      ],
      "width": 24,
      "height": 6
    },
    {
      "id": "tabbar",
      "label": "Tab bar",
      "category": "Navigation",
      "template": [
        "┌─────────────────────────────────┐",
        "│ Home   Search   Saved   Profile │",
        "└─────────────────────────────────┘"
      ],
      "width": 35,
      "height": 3
    },
    {
      "id": "pagination",
      "label": "Pagination",
      "category": "Navigation",
      "template": [
        "‹ Prev   1  2  3  …  9   Next ›"
      ],
      "width": 31,
      "height": 1
    },
    {
      "id": "sidebar",
      "label": "Sidebar",
      "category": "Layout",
      "template": [
        "┌───────────┐",
        "│ ▸ Inbox   │",
        "│   Drafts  │",
        "│   Sent    │",
        "│   Archive │",
        "└───────────┘"
      ],
      "width": 13,
      "height": 6
    },
    {
      "id": "accordion",
      "label": "Accordion",
      "category": "Layout",
      "template": [
        "▾ Section one       ",
        "  Content goes here.",
        "▸ Section two       ",
        "▸ Section three     "
      ],
      "width": 20,
      "height": 4
    },
    {
      "id": "toast",
      "label": "Toast",
      "category": "Feedback",
      "template": [
        "┌─────────────────────────┐",
        "│ ✓ Saved to your project │",
        "└─────────────────────────┘"
      ],
      "width": 27,
      "height": 3
    },
    {
      "id": "tooltip",
      "label": "Tooltip",
      "category": "Feedback",
      "template": [
        "┌─────────────┐",
        "│ Helpful tip │",
        "└──────┬──────┘",
        "       ▼       "
      ],
      "width": 15,
      "height": 4
    },
    {
      "id": "tags",
      "label": "Tags",
      "category": "Data",
      "template": [
        "(Design) (Text) (Free)"
      ],
      "width": 22,
      "height": 1
    },
    {
      "id": "chart",
      "label": "Bar chart",
      "category": "Data",
      "template": [
        "   █            ",
        "   █   ▄     █  ",
        "   █   █  ▄  █  ",
        "───┴───┴──┴──┴──"
      ],
      "width": 16,
      "height": 4
    },
    {
      "id": "code",
      "label": "Code block",
      "category": "Media",
      "template": [
        "┌─ code ───────────────────┐",
        "│ const screen = sketch(); │",
        "│ paste(screen);           │",
        "└──────────────────────────┘"
      ],
      "width": 28,
      "height": 4
    }
  ]
}