@moontra/moonui-mcp-server
Version:
Model Context Protocol server for MoonUI component library - AI-native component access
1,327 lines (1,325 loc) • 186 kB
JavaScript
#!/usr/bin/env node
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
// src/server.ts
var import_server = require("@modelcontextprotocol/sdk/server/index.js");
var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
var import_types = require("@modelcontextprotocol/sdk/types.js");
var import_debug11 = __toESM(require("debug"));
// src/metadata/complete-registry.ts
var ALL_COMPONENTS = [
// ==================== FOUNDATION COMPONENTS ====================
{
id: "alert",
name: "Alert",
category: "Foundation",
description: "Display important messages with contextual feedback",
package: "@moontra/moonui",
imports: ["Alert", "AlertDescription", "AlertTitle"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
variants: ["default", "destructive"],
props: [
{ name: "variant", type: "string", required: false, default: "default", description: "Alert variant" },
{ name: "className", type: "string", required: false, description: "Additional CSS classes" }
],
examples: [],
useCases: [
{ id: "error", name: "Error Alert", description: "Show error messages", tags: ["error", "warning"], complexity: "basic" },
{ id: "success", name: "Success Alert", description: "Show success messages", tags: ["success", "confirmation"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["alert", "notification", "message", "warning", "error", "info", "success"],
relatedComponents: ["toast", "dialog"]
},
{
id: "aspect-ratio",
name: "AspectRatio",
category: "Foundation",
description: "Maintain consistent aspect ratios for media content",
package: "@moontra/moonui",
imports: ["AspectRatio"],
dependencies: ["@radix-ui/react-aspect-ratio"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "ratio", type: "number", required: false, default: "1", description: "Aspect ratio value" }
],
examples: [],
useCases: [
{ id: "image", name: "Image Container", description: "Maintain image aspect ratio", tags: ["image", "media"], complexity: "basic" },
{ id: "video", name: "Video Container", description: "Maintain video aspect ratio", tags: ["video", "media"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["aspect", "ratio", "image", "video", "media", "container", "responsive"],
relatedComponents: ["image", "video"]
},
{
id: "avatar",
name: "Avatar",
category: "Foundation",
description: "Display user profile images with fallback support",
package: "@moontra/moonui",
imports: ["Avatar", "AvatarImage", "AvatarFallback"],
dependencies: ["@radix-ui/react-avatar"],
hasProVersion: true,
isFree: true,
isPro: false,
isMixed: true,
props: [
{ name: "src", type: "string", required: false, description: "Image source URL" },
{ name: "alt", type: "string", required: false, description: "Alt text for image" },
{ name: "fallback", type: "string", required: false, description: "Fallback text" }
],
examples: [],
useCases: [
{ id: "user", name: "User Avatar", description: "Display user profile picture", tags: ["user", "profile"], complexity: "basic" },
{ id: "team", name: "Team Member", description: "Show team member avatar", tags: ["team", "member"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["avatar", "user", "profile", "image", "picture", "photo", "icon"],
relatedComponents: ["image", "badge"]
},
{
id: "badge",
name: "Badge",
category: "Foundation",
description: "Small count and labeling component",
package: "@moontra/moonui",
imports: ["Badge", "badgeVariants"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
variants: ["default", "secondary", "destructive", "outline"],
props: [
{ name: "variant", type: "string", required: false, default: "default", description: "Badge variant" },
{ name: "className", type: "string", required: false, description: "Additional CSS classes" }
],
examples: [],
useCases: [
{ id: "status", name: "Status Badge", description: "Show status indicators", tags: ["status", "state"], complexity: "basic" },
{ id: "count", name: "Count Badge", description: "Display counts or numbers", tags: ["count", "number"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["badge", "tag", "label", "chip", "status", "indicator", "count"],
relatedComponents: ["button", "tag"]
},
{
id: "button",
name: "Button",
category: "Foundation",
description: "Interactive button component with multiple variants and states",
package: "@moontra/moonui",
imports: ["Button", "buttonVariants"],
dependencies: [],
hasProVersion: true,
isFree: true,
isPro: false,
isMixed: true,
variants: ["default", "destructive", "outline", "secondary", "ghost", "link"],
sizes: ["default", "sm", "lg", "icon"],
props: [
{ name: "variant", type: "string", required: false, default: "default", description: "Button variant style" },
{ name: "size", type: "string", required: false, default: "default", description: "Button size" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable button" },
{ name: "asChild", type: "boolean", required: false, default: "false", description: "Render as child component" }
],
examples: [],
useCases: [
{ id: "submit", name: "Form Submit", description: "Submit form button", tags: ["form", "submit"], complexity: "basic" },
{ id: "action", name: "Action Button", description: "Trigger actions", tags: ["action", "click"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["button", "click", "action", "submit", "cta", "press", "tap", "interactive"],
relatedComponents: ["link", "icon-button", "toggle"]
},
{
id: "checkbox",
name: "Checkbox",
category: "Foundation",
description: "Allow users to select one or more items from a set",
package: "@moontra/moonui",
imports: ["Checkbox"],
dependencies: ["@radix-ui/react-checkbox"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "checked", type: "boolean", required: false, description: "Checked state" },
{ name: "onCheckedChange", type: "function", required: false, description: "Change handler" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable checkbox" }
],
examples: [],
useCases: [
{ id: "terms", name: "Terms Agreement", description: "Accept terms checkbox", tags: ["terms", "agreement"], complexity: "basic" },
{ id: "multi-select", name: "Multiple Selection", description: "Select multiple options", tags: ["select", "multiple"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["checkbox", "check", "select", "toggle", "option", "choice", "tick"],
relatedComponents: ["radio-group", "switch", "toggle"]
},
{
id: "input",
name: "Input",
category: "Foundation",
description: "Text input field with various types and states",
package: "@moontra/moonui",
imports: ["Input"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "type", type: "string", required: false, default: "text", description: "Input type" },
{ name: "placeholder", type: "string", required: false, description: "Placeholder text" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable input" },
{ name: "value", type: "string", required: false, description: "Input value" },
{ name: "onChange", type: "function", required: false, description: "Change handler" }
],
examples: [],
useCases: [
{ id: "email", name: "Email Input", description: "Email address input", tags: ["email", "form"], complexity: "basic" },
{ id: "search", name: "Search Input", description: "Search field", tags: ["search", "find"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["input", "text", "field", "form", "entry", "type", "textbox"],
relatedComponents: ["textarea", "select", "label"]
},
{
id: "label",
name: "Label",
category: "Foundation",
description: "Accessible label for form controls",
package: "@moontra/moonui",
imports: ["Label"],
dependencies: ["@radix-ui/react-label"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "htmlFor", type: "string", required: false, description: "ID of labeled element" },
{ name: "className", type: "string", required: false, description: "Additional CSS classes" }
],
examples: [],
useCases: [
{ id: "form-label", name: "Form Label", description: "Label for form fields", tags: ["form", "label"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["label", "text", "form", "caption", "title", "description"],
relatedComponents: ["input", "select", "textarea"]
},
{
id: "radio-group",
name: "Radio Group",
category: "Foundation",
description: "Allow users to select a single option from a set",
package: "@moontra/moonui",
imports: ["RadioGroup", "RadioGroupItem"],
dependencies: ["@radix-ui/react-radio-group"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "string", required: false, description: "Selected value" },
{ name: "onValueChange", type: "function", required: false, description: "Change handler" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable radio group" }
],
examples: [],
useCases: [
{ id: "options", name: "Option Selection", description: "Select one option", tags: ["select", "option"], complexity: "basic" },
{ id: "preference", name: "User Preference", description: "Choose user preference", tags: ["preference", "choice"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["radio", "option", "select", "choice", "single", "group"],
relatedComponents: ["checkbox", "select", "toggle"]
},
{
id: "select",
name: "Select",
category: "Foundation",
description: "Display a list of options for the user to pick from",
package: "@moontra/moonui",
imports: ["Select", "SelectContent", "SelectItem", "SelectTrigger", "SelectValue"],
dependencies: ["@radix-ui/react-select"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "string", required: false, description: "Selected value" },
{ name: "onValueChange", type: "function", required: false, description: "Change handler" },
{ name: "placeholder", type: "string", required: false, description: "Placeholder text" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable select" }
],
examples: [],
useCases: [
{ id: "country", name: "Country Select", description: "Select country", tags: ["country", "location"], complexity: "basic" },
{ id: "category", name: "Category Select", description: "Choose category", tags: ["category", "filter"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["select", "dropdown", "picker", "option", "choice", "menu", "list"],
relatedComponents: ["combobox", "radio-group", "dropdown-menu"]
},
{
id: "slider",
name: "Slider",
category: "Foundation",
description: "Input for selecting a value from a range",
package: "@moontra/moonui",
imports: ["Slider"],
dependencies: ["@radix-ui/react-slider"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "number[]", required: false, description: "Slider value" },
{ name: "onValueChange", type: "function", required: false, description: "Change handler" },
{ name: "min", type: "number", required: false, default: "0", description: "Minimum value" },
{ name: "max", type: "number", required: false, default: "100", description: "Maximum value" },
{ name: "step", type: "number", required: false, default: "1", description: "Step increment" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable slider" }
],
examples: [],
useCases: [
{ id: "volume", name: "Volume Control", description: "Adjust volume level", tags: ["volume", "audio"], complexity: "basic" },
{ id: "price", name: "Price Range", description: "Select price range", tags: ["price", "range"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["slider", "range", "input", "control", "adjust", "value", "scale"],
relatedComponents: ["progress", "input"]
},
{
id: "switch",
name: "Switch",
category: "Foundation",
description: "Toggle between checked and unchecked states",
package: "@moontra/moonui",
imports: ["Switch"],
dependencies: ["@radix-ui/react-switch"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "checked", type: "boolean", required: false, description: "Checked state" },
{ name: "onCheckedChange", type: "function", required: false, description: "Change handler" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable switch" }
],
examples: [],
useCases: [
{ id: "settings", name: "Settings Toggle", description: "Enable/disable settings", tags: ["settings", "toggle"], complexity: "basic" },
{ id: "theme", name: "Theme Switch", description: "Dark/light mode toggle", tags: ["theme", "mode"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["switch", "toggle", "on", "off", "enable", "disable", "boolean"],
relatedComponents: ["checkbox", "toggle", "radio-group"]
},
{
id: "textarea",
name: "Textarea",
category: "Foundation",
description: "Multi-line text input field",
package: "@moontra/moonui",
imports: ["Textarea"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "placeholder", type: "string", required: false, description: "Placeholder text" },
{ name: "value", type: "string", required: false, description: "Textarea value" },
{ name: "onChange", type: "function", required: false, description: "Change handler" },
{ name: "rows", type: "number", required: false, default: "4", description: "Number of rows" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable textarea" }
],
examples: [],
useCases: [
{ id: "comment", name: "Comment Box", description: "User comments", tags: ["comment", "feedback"], complexity: "basic" },
{ id: "description", name: "Description Field", description: "Long text descriptions", tags: ["description", "text"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["textarea", "text", "input", "multiline", "field", "form", "content"],
relatedComponents: ["input", "editor"]
},
{
id: "toggle",
name: "Toggle",
category: "Foundation",
description: "Toggle button with pressed state",
package: "@moontra/moonui",
imports: ["Toggle"],
dependencies: ["@radix-ui/react-toggle"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "pressed", type: "boolean", required: false, description: "Pressed state" },
{ name: "onPressedChange", type: "function", required: false, description: "Press change handler" },
{ name: "disabled", type: "boolean", required: false, default: "false", description: "Disable toggle" }
],
examples: [],
useCases: [
{ id: "format", name: "Text Format", description: "Bold/italic toggle", tags: ["format", "text"], complexity: "basic" },
{ id: "favorite", name: "Favorite Toggle", description: "Mark as favorite", tags: ["favorite", "like"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["toggle", "button", "press", "state", "switch", "on", "off"],
relatedComponents: ["button", "switch", "checkbox"]
},
{
id: "separator",
name: "Separator",
category: "Foundation",
description: "Visual divider between content sections",
package: "@moontra/moonui",
imports: ["Separator"],
dependencies: ["@radix-ui/react-separator"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "orientation", type: "string", required: false, default: "horizontal", description: "Separator orientation" },
{ name: "className", type: "string", required: false, description: "Additional CSS classes" }
],
examples: [],
useCases: [
{ id: "section", name: "Section Divider", description: "Divide content sections", tags: ["section", "divider"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["separator", "divider", "line", "border", "hr", "split"],
relatedComponents: ["spacer"]
},
{
id: "tags-input",
name: "Tags Input",
category: "Foundation",
description: "Input field for adding multiple tags",
package: "@moontra/moonui",
imports: ["TagsInput"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "string[]", required: false, description: "Tag values" },
{ name: "onChange", type: "function", required: false, description: "Change handler" },
{ name: "placeholder", type: "string", required: false, description: "Placeholder text" }
],
examples: [],
useCases: [
{ id: "skills", name: "Skills Tags", description: "Add user skills", tags: ["skills", "tags"], complexity: "intermediate" },
{ id: "keywords", name: "Keywords", description: "Add keywords", tags: ["keywords", "meta"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["tags", "input", "chips", "labels", "keywords", "multiple"],
relatedComponents: ["input", "badge"]
},
{
id: "color-picker",
name: "Color Picker",
category: "Foundation",
description: "Interactive color selection tool",
package: "@moontra/moonui",
imports: ["ColorPicker"],
dependencies: [],
hasProVersion: true,
isFree: true,
isPro: false,
isMixed: true,
props: [
{ name: "value", type: "string", required: false, description: "Color value" },
{ name: "onChange", type: "function", required: false, description: "Change handler" }
],
examples: [],
useCases: [
{ id: "theme", name: "Theme Color", description: "Select theme colors", tags: ["theme", "color"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["color", "picker", "palette", "rgb", "hex", "hsl", "select"],
relatedComponents: ["input", "slider"]
},
{
id: "date-picker",
name: "Date Picker",
category: "Foundation",
description: "Calendar-based date selection component",
package: "@moontra/moonui",
imports: ["DatePicker"],
dependencies: ["date-fns"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "Date", required: false, description: "Selected date" },
{ name: "onChange", type: "function", required: false, description: "Change handler" }
],
examples: [],
useCases: [
{ id: "booking", name: "Date Booking", description: "Select booking date", tags: ["booking", "date"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["date", "picker", "calendar", "time", "day", "month", "year"],
relatedComponents: ["calendar", "input"]
},
{
id: "simple-editor",
name: "Simple Editor",
category: "Foundation",
description: "Basic text editor with formatting options",
package: "@moontra/moonui",
imports: ["SimpleEditor"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "string", required: false, description: "Editor content" },
{ name: "onChange", type: "function", required: false, description: "Change handler" }
],
examples: [],
useCases: [
{ id: "notes", name: "Note Editor", description: "Simple note taking", tags: ["notes", "editor"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["editor", "text", "wysiwyg", "format", "rich", "content"],
relatedComponents: ["textarea", "rich-text-editor"]
},
// ==================== LAYOUT COMPONENTS ====================
{
id: "accordion",
name: "Accordion",
category: "Layout",
description: "Collapsible content panels for organizing information",
package: "@moontra/moonui",
imports: ["Accordion", "AccordionContent", "AccordionItem", "AccordionTrigger"],
dependencies: ["@radix-ui/react-accordion"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "type", type: "string", required: false, default: "single", description: "Single or multiple panels" },
{ name: "collapsible", type: "boolean", required: false, default: "false", description: "Allow closing all panels" }
],
examples: [],
useCases: [
{ id: "faq", name: "FAQ Section", description: "Frequently asked questions", tags: ["faq", "questions"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["accordion", "collapse", "expand", "panel", "faq", "toggle"],
relatedComponents: ["collapsible", "tabs"]
},
{
id: "breadcrumb",
name: "Breadcrumb",
category: "Layout",
description: "Navigation aid showing current page location",
package: "@moontra/moonui",
imports: ["Breadcrumb", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbList", "BreadcrumbPage", "BreadcrumbSeparator"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "navigation", name: "Page Navigation", description: "Show page hierarchy", tags: ["navigation", "path"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["breadcrumb", "navigation", "path", "trail", "hierarchy", "location"],
relatedComponents: ["navigation-menu", "link"]
},
{
id: "card",
name: "Card",
category: "Layout",
description: "Container component for grouping related content",
package: "@moontra/moonui",
imports: ["Card", "CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "className", type: "string", required: false, description: "Additional CSS classes" }
],
examples: [],
useCases: [
{ id: "content", name: "Content Card", description: "Display grouped content", tags: ["content", "container"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["card", "container", "box", "panel", "section", "wrapper"],
relatedComponents: ["dialog", "sheet", "popover"]
},
{
id: "collapsible",
name: "Collapsible",
category: "Layout",
description: "Interactive component that can be expanded or collapsed",
package: "@moontra/moonui",
imports: ["Collapsible", "CollapsibleContent", "CollapsibleTrigger"],
dependencies: ["@radix-ui/react-collapsible"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "open", type: "boolean", required: false, description: "Open state" },
{ name: "onOpenChange", type: "function", required: false, description: "Open change handler" }
],
examples: [],
useCases: [
{ id: "details", name: "Show Details", description: "Expandable details section", tags: ["details", "expand"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["collapsible", "expand", "collapse", "toggle", "accordion", "fold"],
relatedComponents: ["accordion", "disclosure"]
},
{
id: "table",
name: "Table",
category: "Layout",
description: "Display data in rows and columns",
package: "@moontra/moonui",
imports: ["Table", "TableBody", "TableCaption", "TableCell", "TableHead", "TableHeader", "TableRow"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "data", name: "Data Table", description: "Display tabular data", tags: ["data", "table"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["table", "data", "grid", "rows", "columns", "spreadsheet"],
relatedComponents: ["data-table", "list"]
},
{
id: "tabs",
name: "Tabs",
category: "Layout",
description: "Organize content into multiple panels",
package: "@moontra/moonui",
imports: ["Tabs", "TabsContent", "TabsList", "TabsTrigger"],
dependencies: ["@radix-ui/react-tabs"],
hasProVersion: true,
isFree: true,
isPro: false,
isMixed: true,
props: [
{ name: "defaultValue", type: "string", required: false, description: "Default active tab" },
{ name: "value", type: "string", required: false, description: "Controlled active tab" },
{ name: "onValueChange", type: "function", required: false, description: "Tab change handler" }
],
examples: [],
useCases: [
{ id: "content", name: "Content Tabs", description: "Organize content sections", tags: ["content", "sections"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["tabs", "panel", "navigation", "sections", "switcher", "pages"],
relatedComponents: ["accordion", "navigation-menu"]
},
// ==================== NAVIGATION & OVERLAYS ====================
{
id: "command",
name: "Command",
category: "Navigation & Overlays",
description: "Command menu with search and keyboard navigation",
package: "@moontra/moonui",
imports: ["Command", "CommandDialog", "CommandEmpty", "CommandGroup", "CommandInput", "CommandItem", "CommandList", "CommandSeparator"],
dependencies: ["cmdk"],
hasProVersion: true,
isFree: true,
isPro: false,
isMixed: true,
props: [],
examples: [],
useCases: [
{ id: "search", name: "Command Search", description: "Quick search interface", tags: ["search", "command"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["command", "search", "palette", "menu", "keyboard", "shortcut"],
relatedComponents: ["combobox", "search"]
},
{
id: "dialog",
name: "Dialog",
category: "Navigation & Overlays",
description: "Modal dialog overlay for important content",
package: "@moontra/moonui",
imports: ["Dialog", "DialogContent", "DialogDescription", "DialogHeader", "DialogTitle", "DialogTrigger", "DialogFooter"],
dependencies: ["@radix-ui/react-dialog"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "open", type: "boolean", required: false, description: "Open state" },
{ name: "onOpenChange", type: "function", required: false, description: "Open change handler" }
],
examples: [],
useCases: [
{ id: "confirm", name: "Confirmation Dialog", description: "Confirm user actions", tags: ["confirm", "modal"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["dialog", "modal", "popup", "overlay", "window", "alert"],
relatedComponents: ["alert-dialog", "sheet", "popover"]
},
{
id: "dropdown-menu",
name: "Dropdown Menu",
category: "Navigation & Overlays",
description: "Menu of actions triggered by a button",
package: "@moontra/moonui",
imports: ["DropdownMenu", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuLabel", "DropdownMenuSeparator", "DropdownMenuTrigger"],
dependencies: ["@radix-ui/react-dropdown-menu"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "actions", name: "Action Menu", description: "List of actions", tags: ["menu", "actions"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["dropdown", "menu", "actions", "context", "options", "list"],
relatedComponents: ["context-menu", "popover", "select"]
},
{
id: "pagination",
name: "Pagination",
category: "Navigation & Overlays",
description: "Navigate through multiple pages of content",
package: "@moontra/moonui",
imports: ["Pagination", "PaginationContent", "PaginationItem", "PaginationLink", "PaginationNext", "PaginationPrevious"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "list", name: "List Pagination", description: "Navigate list pages", tags: ["pages", "navigation"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["pagination", "pages", "navigation", "next", "previous", "numbers"],
relatedComponents: ["data-table", "list"]
},
{
id: "popover",
name: "Popover",
category: "Navigation & Overlays",
description: "Floating panel for displaying additional content",
package: "@moontra/moonui",
imports: ["Popover", "PopoverContent", "PopoverTrigger"],
dependencies: ["@radix-ui/react-popover"],
hasProVersion: true,
isFree: true,
isPro: false,
isMixed: true,
props: [
{ name: "open", type: "boolean", required: false, description: "Open state" },
{ name: "onOpenChange", type: "function", required: false, description: "Open change handler" }
],
examples: [],
useCases: [
{ id: "info", name: "Info Popover", description: "Show additional info", tags: ["info", "tooltip"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["popover", "popup", "floating", "tooltip", "overlay", "panel"],
relatedComponents: ["tooltip", "dialog", "dropdown-menu"]
},
{
id: "tooltip",
name: "Tooltip",
category: "Navigation & Overlays",
description: "Contextual information on hover or focus",
package: "@moontra/moonui",
imports: ["Tooltip", "TooltipContent", "TooltipProvider", "TooltipTrigger"],
dependencies: ["@radix-ui/react-tooltip"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "help", name: "Help Tooltip", description: "Show help text", tags: ["help", "info"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["tooltip", "hint", "hover", "info", "help", "tip"],
relatedComponents: ["popover", "hover-card"]
},
// ==================== FEEDBACK COMPONENTS ====================
{
id: "progress",
name: "Progress",
category: "Feedback",
description: "Display progress of an operation",
package: "@moontra/moonui",
imports: ["Progress"],
dependencies: ["@radix-ui/react-progress"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "value", type: "number", required: false, description: "Progress value (0-100)" }
],
examples: [],
useCases: [
{ id: "loading", name: "Loading Progress", description: "Show loading progress", tags: ["loading", "progress"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["progress", "loading", "bar", "status", "completion", "percentage"],
relatedComponents: ["skeleton", "spinner"]
},
{
id: "skeleton",
name: "Skeleton",
category: "Feedback",
description: "Placeholder for loading content",
package: "@moontra/moonui",
imports: ["Skeleton"],
dependencies: [],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [
{ name: "className", type: "string", required: false, description: "Additional CSS classes" }
],
examples: [],
useCases: [
{ id: "loading", name: "Loading Placeholder", description: "Show loading state", tags: ["loading", "placeholder"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["skeleton", "loading", "placeholder", "shimmer", "pulse"],
relatedComponents: ["progress", "spinner"]
},
{
id: "toast",
name: "Toast",
category: "Feedback",
description: "Brief notification messages",
package: "@moontra/moonui",
imports: ["Toast", "ToastAction", "ToastDescription", "ToastProvider", "ToastTitle", "ToastViewport", "useToast"],
dependencies: ["@radix-ui/react-toast"],
hasProVersion: false,
isFree: true,
isPro: false,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "notification", name: "Success Toast", description: "Show success message", tags: ["notification", "message"], complexity: "basic" }
],
commonErrors: [],
aiTags: ["toast", "notification", "message", "alert", "snackbar", "feedback"],
relatedComponents: ["alert", "notification"]
},
// ==================== PRO COMPONENTS ====================
// Data & Analytics
{
id: "data-table",
name: "DataTable",
category: "Data & Analytics",
description: "Advanced data table with sorting, filtering, and pagination",
package: "@moontra/moonui-pro",
imports: ["DataTable"],
dependencies: ["@tanstack/react-table"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [
{ name: "data", type: "array", required: true, description: "Table data" },
{ name: "columns", type: "array", required: true, description: "Column definitions" }
],
examples: [],
useCases: [
{ id: "admin", name: "Admin Table", description: "Manage data", tags: ["admin", "data"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["table", "data", "grid", "sort", "filter", "pagination", "advanced"],
relatedComponents: ["table", "virtual-list"]
},
{
id: "advanced-chart",
name: "AdvancedChart",
category: "Data & Analytics",
description: "Interactive charts with multiple visualization types",
package: "@moontra/moonui-pro",
imports: ["AdvancedChart"],
dependencies: ["recharts"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [
{ name: "data", type: "array", required: true, description: "Chart data" },
{ name: "type", type: "string", required: true, description: "Chart type" }
],
examples: [],
useCases: [
{ id: "analytics", name: "Analytics Chart", description: "Display analytics", tags: ["analytics", "chart"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["chart", "graph", "visualization", "analytics", "data", "statistics"],
relatedComponents: ["dashboard", "metrics"]
},
{
id: "dashboard",
name: "Dashboard",
category: "Data & Analytics",
description: "Complete dashboard layout with widgets and metrics",
package: "@moontra/moonui-pro",
imports: ["Dashboard", "DashboardGrid", "MetricCard", "ChartWidget"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "admin", name: "Admin Dashboard", description: "Admin panel", tags: ["admin", "dashboard"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["dashboard", "admin", "panel", "metrics", "widgets", "analytics"],
relatedComponents: ["data-table", "advanced-chart"]
},
// Navigation Pro
{
id: "command-pro",
name: "Command AI+",
category: "Navigation",
description: "AI-powered command palette with smart suggestions",
package: "@moontra/moonui-pro",
imports: ["CommandPro"],
dependencies: ["cmdk"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "ai-search", name: "AI Search", description: "Smart search", tags: ["ai", "search"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["command", "ai", "search", "palette", "smart", "suggestions"],
relatedComponents: ["command", "search"]
},
{
id: "sidebar",
name: "Sidebar",
category: "Navigation",
description: "Collapsible sidebar navigation",
package: "@moontra/moonui-pro",
imports: ["Sidebar", "SidebarContent", "SidebarFooter", "SidebarHeader", "SidebarNav"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "app-nav", name: "App Navigation", description: "App sidebar", tags: ["navigation", "menu"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["sidebar", "navigation", "menu", "drawer", "panel", "nav"],
relatedComponents: ["navbar", "navigation-menu"]
},
{
id: "navbar",
name: "Navbar",
category: "Navigation",
description: "Responsive navigation bar with mobile support",
package: "@moontra/moonui-pro",
imports: ["Navbar", "NavbarBrand", "NavbarContent", "NavbarItem", "NavbarMenu"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "header", name: "Site Header", description: "Website header", tags: ["header", "navigation"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["navbar", "header", "navigation", "menu", "topbar", "nav"],
relatedComponents: ["sidebar", "navigation-menu"]
},
// Content Management Pro
{
id: "advanced-forms",
name: "Advanced Forms",
category: "Content Management",
description: "Form builder with validation and dynamic fields",
package: "@moontra/moonui-pro",
imports: ["AdvancedForm", "FormBuilder"],
dependencies: ["react-hook-form", "zod"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "dynamic", name: "Dynamic Form", description: "Build forms dynamically", tags: ["form", "builder"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["form", "builder", "validation", "dynamic", "fields", "advanced"],
relatedComponents: ["form-wizard", "input"]
},
{
id: "moonui-form-wizard",
name: "Form Wizard",
category: "Content Management",
description: "Multi-step form with progress tracking",
package: "@moontra/moonui-pro",
imports: ["FormWizard", "FormWizardStep"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "onboarding", name: "User Onboarding", description: "Multi-step onboarding", tags: ["wizard", "steps"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["wizard", "form", "steps", "multi-step", "progress", "onboarding"],
relatedComponents: ["advanced-forms", "stepper"]
},
{
id: "moonui-quiz-form",
name: "Quiz Form",
category: "Content Management",
description: "Interactive quiz with scoring and feedback",
package: "@moontra/moonui-pro",
imports: ["QuizForm", "QuizQuestion"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "quiz", name: "Online Quiz", description: "Create quizzes", tags: ["quiz", "test"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["quiz", "form", "test", "questions", "survey", "feedback"],
relatedComponents: ["form-wizard", "radio-group"]
},
{
id: "moonui-credit-card-input",
name: "Credit Card Input",
category: "Content Management",
description: "Secure credit card input with validation",
package: "@moontra/moonui-pro",
imports: ["CreditCardInput"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "payment", name: "Payment Form", description: "Accept payments", tags: ["payment", "credit"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["credit", "card", "payment", "input", "secure", "validation"],
relatedComponents: ["input", "form"]
},
{
id: "moonui-phone-number-input",
name: "Phone Number Input",
category: "Content Management",
description: "International phone number input with country codes",
package: "@moontra/moonui-pro",
imports: ["PhoneNumberInput"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "contact", name: "Contact Form", description: "Phone input", tags: ["phone", "contact"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["phone", "number", "input", "international", "country", "mobile"],
relatedComponents: ["input", "select"]
},
{
id: "rich-text-editor",
name: "Rich Text Editor",
category: "Content Management",
description: "Full-featured text editor with formatting and media",
package: "@moontra/moonui-pro",
imports: ["RichTextEditor"],
dependencies: ["@tiptap/react"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "blog", name: "Blog Editor", description: "Write blog posts", tags: ["editor", "blog"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["editor", "rich", "text", "wysiwyg", "format", "media"],
relatedComponents: ["simple-editor", "textarea"]
},
{
id: "file-upload-pro",
name: "File Upload Pro",
category: "Content Management",
description: "Advanced file upload with drag-drop and preview",
package: "@moontra/moonui-pro",
imports: ["FileUploadPro"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "upload", name: "File Manager", description: "Upload files", tags: ["upload", "file"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["upload", "file", "drag", "drop", "preview", "media"],
relatedComponents: ["input", "dropzone"]
},
// Project Management Pro
{
id: "kanban",
name: "Kanban",
category: "Project Management",
description: "Drag-and-drop kanban board for task management",
package: "@moontra/moonui-pro",
imports: ["Kanban", "KanbanBoard", "KanbanColumn", "KanbanCard"],
dependencies: ["@dnd-kit/sortable"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "tasks", name: "Task Board", description: "Manage tasks", tags: ["kanban", "tasks"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["kanban", "board", "tasks", "drag", "drop", "project"],
relatedComponents: ["draggable-list", "card"]
},
{
id: "timeline",
name: "Timeline",
category: "Project Management",
description: "Visual timeline for events and milestones",
package: "@moontra/moonui-pro",
imports: ["Timeline", "TimelineItem"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "history", name: "Event History", description: "Show timeline", tags: ["timeline", "events"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["timeline", "events", "history", "milestones", "chronological"],
relatedComponents: ["stepper", "progress"]
},
{
id: "calendar",
name: "Calendar",
category: "Project Management",
description: "Full calendar with events and scheduling",
package: "@moontra/moonui-pro",
imports: ["Calendar", "CalendarEvent"],
dependencies: ["date-fns"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "schedule", name: "Event Calendar", description: "Schedule events", tags: ["calendar", "events"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["calendar", "schedule", "events", "date", "appointment", "booking"],
relatedComponents: ["date-picker", "timeline"]
},
// Performance & Utility Pro
{
id: "virtual-list",
name: "Virtual List",
category: "Performance & Utility",
description: "Efficiently render large lists with virtualization",
package: "@moontra/moonui-pro",
imports: ["VirtualList"],
dependencies: ["@tanstack/react-virtual"],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "large-list", name: "Large Data List", description: "Render big lists", tags: ["list", "virtual"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["virtual", "list", "scroll", "performance", "large", "data"],
relatedComponents: ["data-table", "list"]
},
{
id: "memory-efficient-data",
name: "Memory Efficient Data",
category: "Performance & Utility",
description: "Optimize memory usage for large datasets",
package: "@moontra/moonui-pro",
imports: ["MemoryEfficientData"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "big-data", name: "Big Data Handler", description: "Handle large data", tags: ["memory", "data"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["memory", "efficient", "data", "performance", "optimization"],
relatedComponents: ["virtual-list", "data-table"]
},
{
id: "lazy-component",
name: "Lazy Component",
category: "Performance & Utility",
description: "Lazy load components for better performance",
package: "@moontra/moonui-pro",
imports: ["LazyComponent"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "lazy", name: "Lazy Loading", description: "Load on demand", tags: ["lazy", "performance"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["lazy", "load", "performance", "async", "dynamic", "import"],
relatedComponents: ["suspense", "skeleton"]
},
{
id: "optimized-image",
name: "Optimized Image",
category: "Performance & Utility",
description: "Image component with lazy loading and optimization",
package: "@moontra/moonui-pro",
imports: ["OptimizedImage"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "gallery", name: "Image Gallery", description: "Optimized images", tags: ["image", "optimize"], complexity: "intermediate" }
],
commonErrors: [],
aiTags: ["image", "optimize", "lazy", "loading", "performance", "picture"],
relatedComponents: ["image", "media-gallery"]
},
{
id: "performance-monitor",
name: "Performance Monitor",
category: "Performance & Utility",
description: "Monitor app performance metrics in real-time",
package: "@moontra/moonui-pro",
imports: ["PerformanceMonitor"],
dependencies: [],
hasProVersion: false,
isFree: false,
isPro: true,
isMixed: false,
props: [],
examples: [],
useCases: [
{ id: "monitor", name: "App Monitor", description: "Track performance", tags: ["monitor", "metrics"], complexity: "advanced" }
],
commonErrors: [],
aiTags: ["performance", "monitor", "metrics", "debug", "profiler", "stats"],
relatedComponents: ["performance-debugger", "dashboard"]
},
{
id: "performance-debugger",
name: "Performance Debugger",
category: "Performance & Utility",
description: "Debug performance issues with detailed insights",
package: "@moontra/moonui-pro",
imports: ["