mta-design-system 0.1.0

package/dist/mcp/src/index.cjs

@@ -0,0 +1,1351 @@
+#!/usr/bin/env node
+"use strict";
+
+// mcp/src/index.ts
+var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
+
+// mcp/src/server.ts
+var import_server = require("@modelcontextprotocol/sdk/server/index.js");
+var import_types = require("@modelcontextprotocol/sdk/types.js");
+
+// shared/registry.ts
+var componentRegistry = [
+  // ==================== BASE UI COMPONENTS ====================
+  {
+    name: "Button",
+    category: "ui",
+    description: "A versatile button component with multiple variants and sizes.",
+    sourcePath: "src/components/ui/button.tsx",
+    props: [
+      { name: "variant", type: "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'", required: false, default: "'default'", description: "Button visual style" },
+      { name: "size", type: "'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'", required: false, default: "'default'", description: "Button size" },
+      { name: "asChild", type: "boolean", required: false, default: "false", description: "Render as child element" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" },
+      { name: "disabled", type: "boolean", required: false, description: "Disable the button" }
+    ],
+    examples: [
+      {
+        title: "Basic Button",
+        code: `import { Button } from 'mta-design-system';
+
+<Button>Click me</Button>`
+      },
+      {
+        title: "Button Variants",
+        code: `<Button variant="default">Default</Button>
+<Button variant="destructive">Destructive</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>`
+      },
+      {
+        title: "Button Sizes",
+        code: `<Button size="sm">Small</Button>
+<Button size="default">Default</Button>
+<Button size="lg">Large</Button>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+    themable: false
+  },
+  {
+    name: "Alert",
+    category: "ui",
+    description: "Displays a callout for user attention.",
+    sourcePath: "src/components/ui/alert.tsx",
+    props: [
+      { name: "variant", type: "'default' | 'destructive'", required: false, default: "'default'", description: "Alert visual style" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic Alert",
+        code: `import { Alert, AlertTitle, AlertDescription } from 'mta-design-system';
+
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+</Alert>`
+      },
+      {
+        title: "Destructive Alert",
+        code: `<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+</Alert>`
+      }
+    ],
+    dependencies: ["class-variance-authority"],
+    themable: false
+  },
+  {
+    name: "Card",
+    category: "ui",
+    description: "Displays a card with header, content, and footer sections.",
+    sourcePath: "src/components/ui/card.tsx",
+    props: [
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic Card",
+        code: `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'mta-design-system';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>`
+      }
+    ],
+    dependencies: [],
+    themable: false
+  },
+  {
+    name: "Input",
+    category: "ui",
+    description: "A text input component for forms.",
+    sourcePath: "src/components/ui/input.tsx",
+    props: [
+      { name: "type", type: "string", required: false, default: "'text'", description: "Input type" },
+      { name: "placeholder", type: "string", required: false, description: "Placeholder text" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" },
+      { name: "disabled", type: "boolean", required: false, description: "Disable the input" }
+    ],
+    examples: [
+      {
+        title: "Basic Input",
+        code: `import { Input } from 'mta-design-system';
+
+<Input placeholder="Enter your name" />`
+      }
+    ],
+    dependencies: [],
+    themable: false
+  },
+  {
+    name: "Label",
+    category: "ui",
+    description: "A label component for form fields.",
+    sourcePath: "src/components/ui/label.tsx",
+    props: [
+      { name: "htmlFor", type: "string", required: false, description: "ID of the associated form element" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic Label",
+        code: `import { Label } from 'mta-design-system';
+
+<Label htmlFor="email">Email</Label>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-label"],
+    themable: false
+  },
+  {
+    name: "Dialog",
+    category: "ui",
+    description: "A modal dialog component.",
+    sourcePath: "src/components/ui/dialog.tsx",
+    props: [
+      { name: "open", type: "boolean", required: false, description: "Controlled open state" },
+      { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Callback when open state changes" }
+    ],
+    examples: [
+      {
+        title: "Basic Dialog",
+        code: `import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from 'mta-design-system';
+
+<Dialog>
+  <DialogTrigger>Open Dialog</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure?</DialogTitle>
+      <DialogDescription>This action cannot be undone.</DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button>Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-dialog"],
+    themable: false
+  },
+  {
+    name: "Select",
+    category: "ui",
+    description: "A dropdown select component.",
+    sourcePath: "src/components/ui/select.tsx",
+    props: [
+      { name: "value", type: "string", required: false, description: "Selected value" },
+      { name: "onValueChange", type: "(value: string) => void", required: false, description: "Callback when value changes" },
+      { name: "disabled", type: "boolean", required: false, description: "Disable the select" }
+    ],
+    examples: [
+      {
+        title: "Basic Select",
+        code: `import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'mta-design-system';
+
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select an option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="option1">Option 1</SelectItem>
+    <SelectItem value="option2">Option 2</SelectItem>
+  </SelectContent>
+</Select>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-select"],
+    themable: false
+  },
+  {
+    name: "Switch",
+    category: "ui",
+    description: "A toggle switch component.",
+    sourcePath: "src/components/ui/switch.tsx",
+    props: [
+      { name: "checked", type: "boolean", required: false, description: "Controlled checked state" },
+      { name: "onCheckedChange", type: "(checked: boolean) => void", required: false, description: "Callback when checked state changes" },
+      { name: "disabled", type: "boolean", required: false, description: "Disable the switch" }
+    ],
+    examples: [
+      {
+        title: "Basic Switch",
+        code: `import { Switch } from 'mta-design-system';
+
+<Switch />`
+      }
+    ],
+    dependencies: ["@radix-ui/react-switch"],
+    themable: false
+  },
+  {
+    name: "Tooltip",
+    category: "ui",
+    description: "A tooltip component for displaying additional information.",
+    sourcePath: "src/components/ui/tooltip.tsx",
+    props: [
+      { name: "content", type: "ReactNode", required: false, description: "Tooltip content" },
+      { name: "delayDuration", type: "number", required: false, default: "400", description: "Delay before showing tooltip" }
+    ],
+    examples: [
+      {
+        title: "Basic Tooltip",
+        code: `import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'mta-design-system';
+
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger>Hover me</TooltipTrigger>
+    <TooltipContent>Tooltip content</TooltipContent>
+  </Tooltip>
+</TooltipProvider>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-tooltip"],
+    themable: false
+  },
+  {
+    name: "Table",
+    category: "ui",
+    description: "A table component for displaying data.",
+    sourcePath: "src/components/ui/table.tsx",
+    props: [
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic Table",
+        code: `import { Table, TableHeader, TableHead, TableBody, TableRow, TableCell } from 'mta-design-system';
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Email</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`
+      }
+    ],
+    dependencies: [],
+    themable: false
+  },
+  {
+    name: "Progress",
+    category: "ui",
+    description: "A progress bar component.",
+    sourcePath: "src/components/ui/progress.tsx",
+    props: [
+      { name: "value", type: "number", required: false, description: "Progress value (0-100)" },
+      { name: "max", type: "number", required: false, default: "100", description: "Maximum value" }
+    ],
+    examples: [
+      {
+        title: "Basic Progress",
+        code: `import { Progress } from 'mta-design-system';
+
+<Progress value={60} />`
+      }
+    ],
+    dependencies: ["@radix-ui/react-progress"],
+    themable: false
+  },
+  {
+    name: "Spinner",
+    category: "ui",
+    description: "A loading spinner component.",
+    sourcePath: "src/components/ui/spinner.tsx",
+    props: [
+      { name: "size", type: "'sm' | 'default' | 'lg'", required: false, default: "'default'", description: "Spinner size" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic Spinner",
+        code: `import { Spinner } from 'mta-design-system';
+
+<Spinner />`
+      }
+    ],
+    dependencies: [],
+    themable: false
+  },
+  {
+    name: "Calendar",
+    category: "ui",
+    description: "A calendar component for date selection.",
+    sourcePath: "src/components/ui/calendar.tsx",
+    props: [
+      { name: "selected", type: "Date", required: false, description: "Selected date" },
+      { name: "onSelect", type: "(date: Date | undefined) => void", required: false, description: "Callback when date is selected" },
+      { name: "mode", type: "'single' | 'multiple' | 'range'", required: false, default: "'single'", description: "Selection mode" }
+    ],
+    examples: [
+      {
+        title: "Basic Calendar",
+        code: `import { Calendar } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<Calendar />`
+      }
+    ],
+    dependencies: ["react-day-picker", "date-fns"],
+    themable: false
+  },
+  {
+    name: "Popover",
+    category: "ui",
+    description: "A popover component for displaying floating content.",
+    sourcePath: "src/components/ui/popover.tsx",
+    props: [
+      { name: "open", type: "boolean", required: false, description: "Controlled open state" },
+      { name: "onOpenChange", type: "(open: boolean) => void", required: false, description: "Callback when open state changes" }
+    ],
+    examples: [
+      {
+        title: "Basic Popover",
+        code: `import { Popover, PopoverTrigger, PopoverContent } from 'mta-design-system';
+
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>Popover content</PopoverContent>
+</Popover>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-popover"],
+    themable: false
+  },
+  {
+    name: "Command",
+    category: "ui",
+    description: "A command menu component for search and actions.",
+    sourcePath: "src/components/ui/command.tsx",
+    props: [
+      { name: "value", type: "string", required: false, description: "Selected value" },
+      { name: "onValueChange", type: "(value: string) => void", required: false, description: "Callback when value changes" },
+      { name: "placeholder", type: "string", required: false, description: "Search placeholder" }
+    ],
+    examples: [
+      {
+        title: "Basic Command",
+        code: `import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from 'mta-design-system';
+
+<Command>
+  <CommandInput placeholder="Search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Option 1</CommandItem>
+      <CommandItem>Option 2</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>`
+      }
+    ],
+    dependencies: ["cmdk"],
+    themable: false
+  },
+  // ==================== CLAIMMIND THEMED COMPONENTS ====================
+  {
+    name: "ClaimMindButton",
+    category: "claimmind",
+    description: "A themed button component with brand colors (Default, Owlexa, BPJS themes).",
+    sourcePath: "src/stories/claimmind/Button.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "variant", type: "'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'", required: false, default: "'default'", description: "Button visual style" },
+      { name: "size", type: "'default' | 'sm' | 'lg' | 'icon'", required: false, default: "'default'", description: "Button size" },
+      { name: "label", type: "string", required: false, description: "Button label text" },
+      { name: "loading", type: "boolean", required: false, default: "false", description: "Show loading spinner" },
+      { name: "leftIconName", type: "LucideIconName", required: false, description: "Icon name for left side" },
+      { name: "rightIconName", type: "LucideIconName", required: false, description: "Icon name for right side" }
+    ],
+    examples: [
+      {
+        title: "Basic ClaimMindButton",
+        code: `import { ClaimMindButton } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindButton theme="Default">Click me</ClaimMindButton>`
+      },
+      {
+        title: "Themed Buttons",
+        code: `<ClaimMindButton theme="Default">ClaimMind</ClaimMindButton>
+<ClaimMindButton theme="Owlexa">Owlexa</ClaimMindButton>
+<ClaimMindButton theme="BPJS">BPJS</ClaimMindButton>`
+      },
+      {
+        title: "Loading State",
+        code: `<ClaimMindButton loading>Processing...</ClaimMindButton>`
+      },
+      {
+        title: "With Icons",
+        code: `import { ClaimMindButton } from 'mta-design-system';
+
+<ClaimMindButton leftIconName="Mail">Send Email</ClaimMindButton>
+<ClaimMindButton rightIconName="ChevronRight">Continue</ClaimMindButton>`
+      }
+    ],
+    dependencies: ["lucide-react"],
+    themable: true
+  },
+  {
+    name: "ClaimMindInput",
+    category: "claimmind",
+    description: "A themed input component with brand colors.",
+    sourcePath: "src/stories/claimmind/Input.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "type", type: "string", required: false, default: "'text'", description: "Input type" },
+      { name: "placeholder", type: "string", required: false, description: "Placeholder text" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic ClaimMindInput",
+        code: `import { ClaimMindInput } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindInput theme="Default" placeholder="Enter text..." />`
+      }
+    ],
+    dependencies: [],
+    themable: true
+  },
+  {
+    name: "ClaimMindCard",
+    category: "claimmind",
+    description: "A themed card component with optional top border accent.",
+    sourcePath: "src/stories/claimmind/Card.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "showTopBorder", type: "boolean", required: false, default: "false", description: "Show colored top border" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Basic ClaimMindCard",
+        code: `import { ClaimMindCard, CardHeader, CardTitle, CardContent } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindCard theme="Owlexa" showTopBorder>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Card content goes here</p>
+  </CardContent>
+</ClaimMindCard>`
+      }
+    ],
+    dependencies: [],
+    themable: true
+  },
+  {
+    name: "ClaimMindAlert",
+    category: "claimmind",
+    description: "A themed alert component with brand colors.",
+    sourcePath: "src/stories/claimmind/Alert.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "variant", type: "'info' | 'success' | 'warning' | 'error'", required: false, default: "'info'", description: "Alert type" },
+      { name: "title", type: "string", required: false, description: "Alert title" },
+      { name: "description", type: "string", required: false, description: "Alert description" }
+    ],
+    examples: [
+      {
+        title: "ClaimMindAlert Variants",
+        code: `import { ClaimMindAlert } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindAlert theme="Default" variant="success" title="Success!" description="Operation completed." />
+<ClaimMindAlert theme="Owlexa" variant="error" title="Error" description="Something went wrong." />`
+      }
+    ],
+    dependencies: ["lucide-react"],
+    themable: true
+  },
+  {
+    name: "ClaimMindSpinner",
+    category: "claimmind",
+    description: "A themed loading spinner component.",
+    sourcePath: "src/stories/claimmind/Spinner.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "size", type: "'sm' | 'default' | 'lg'", required: false, default: "'default'", description: "Spinner size" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "ClaimMindSpinner",
+        code: `import { ClaimMindSpinner } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindSpinner theme="BPJS" size="lg" />`
+      }
+    ],
+    dependencies: [],
+    themable: true
+  },
+  {
+    name: "ClaimMindSelect",
+    category: "claimmind",
+    description: "A themed select dropdown component.",
+    sourcePath: "src/stories/claimmind/Select.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "placeholder", type: "string", required: false, description: "Placeholder text" },
+      { name: "options", type: "Array<{ value: string; label: string }>", required: true, description: "Select options" },
+      { name: "value", type: "string", required: false, description: "Selected value" },
+      { name: "onValueChange", type: "(value: string) => void", required: false, description: "Value change callback" }
+    ],
+    examples: [
+      {
+        title: "ClaimMindSelect",
+        code: `import { ClaimMindSelect } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+];
+
+<ClaimMindSelect
+  theme="Default"
+  options={options}
+  placeholder="Select an option"
+/>`
+      }
+    ],
+    dependencies: ["@radix-ui/react-select"],
+    themable: true
+  },
+  {
+    name: "ClaimMindCombobox",
+    category: "claimmind",
+    description: "A themed combobox component with search functionality.",
+    sourcePath: "src/stories/claimmind/Combobox.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "placeholder", type: "string", required: false, description: "Search placeholder" },
+      { name: "options", type: "Array<{ value: string; label: string }>", required: true, description: "Combobox options" },
+      { name: "value", type: "string", required: false, description: "Selected value" },
+      { name: "onValueChange", type: "(value: string) => void", required: false, description: "Value change callback" }
+    ],
+    examples: [
+      {
+        title: "ClaimMindCombobox",
+        code: `import { ClaimMindCombobox } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+];
+
+<ClaimMindCombobox
+  theme="Owlexa"
+  options={options}
+  placeholder="Search fruits..."
+/>`
+      }
+    ],
+    dependencies: ["cmdk", "@radix-ui/react-popover"],
+    themable: true
+  },
+  {
+    name: "ClaimMindDatePicker",
+    category: "claimmind",
+    description: "A themed date picker component.",
+    sourcePath: "src/stories/claimmind/DatePicker.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "placeholder", type: "string", required: false, description: "Placeholder text" },
+      { name: "value", type: "Date", required: false, description: "Selected date" },
+      { name: "onChange", type: "(date: Date | undefined) => void", required: false, description: "Date change callback" }
+    ],
+    examples: [
+      {
+        title: "ClaimMindDatePicker",
+        code: `import { ClaimMindDatePicker } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindDatePicker theme="Default" placeholder="Pick a date" />`
+      }
+    ],
+    dependencies: ["react-day-picker", "date-fns", "@radix-ui/react-popover"],
+    themable: true
+  },
+  {
+    name: "ClaimMindTable",
+    category: "claimmind",
+    description: "A themed table component for data display.",
+    sourcePath: "src/stories/claimmind/Table.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "ClaimMindTable",
+        code: `import { ClaimMindTable, TableHeader, TableHead, TableBody, TableRow, TableCell } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<ClaimMindTable theme="BPJS">
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</ClaimMindTable>`
+      }
+    ],
+    dependencies: [],
+    themable: true
+  },
+  // ==================== MOLECULES ====================
+  {
+    name: "Chat",
+    category: "molecules",
+    description: "A floating chat widget component with theme support.",
+    sourcePath: "src/stories/claimmind/molecules/Chat.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "variant", type: "'float' | 'bottom-side'", required: false, default: "'float'", description: "Chat widget position" },
+      { name: "title", type: "string", required: false, default: "'Chat Support'", description: "Chat window title" },
+      { name: "messages", type: "ChatMessage[]", required: false, description: "Chat messages array" },
+      { name: "onSendMessage", type: "(message: string) => void", required: false, description: "Send message callback" },
+      { name: "isOpen", type: "boolean", required: false, description: "Control open state" },
+      { name: "onToggle", type: "() => void", required: false, description: "Toggle callback" },
+      { name: "placeholder", type: "string", required: false, description: "Input placeholder" }
+    ],
+    examples: [
+      {
+        title: "Chat Widget",
+        code: `import { Chat } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+const messages = [
+  { id: '1', text: 'Hello!', sender: 'bot' as const, timestamp: new Date() },
+  { id: '2', text: 'Hi there!', sender: 'user' as const, timestamp: new Date() },
+];
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Chat
+      theme="Owlexa"
+      variant="float"
+      messages={messages}
+      isOpen={isOpen}
+      onToggle={() => setIsOpen(!isOpen)}
+      onSendMessage={(msg) => console.log(msg)}
+    />
+  );
+}`
+      }
+    ],
+    dependencies: ["lucide-react"],
+    themable: true
+  },
+  {
+    name: "DashboardCard",
+    category: "molecules",
+    description: "A themed dashboard card for displaying metrics.",
+    sourcePath: "src/stories/claimmind/molecules/DashboardCard.tsx",
+    props: [
+      { name: "label", type: "string", required: true, description: 'Card label (e.g., "Total Claims")' },
+      { name: "value", type: "string | number", required: true, description: "Value to display" },
+      { name: "iconName", type: "LucideIconName", required: false, description: "Icon name from lucide-react" },
+      { name: "icon", type: "ReactNode", required: false, description: "Custom icon element" },
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "colorVariant", type: "'primary' | 'secondary' | 'tertiary' | 'success' | 'danger'", required: false, default: "'primary'", description: "Icon color variant" }
+    ],
+    examples: [
+      {
+        title: "DashboardCard",
+        code: `import { DashboardCard } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<DashboardCard
+  label="Total Claims"
+  value="1,234"
+  iconName="FileText"
+  theme="Default"
+  colorVariant="primary"
+/>`
+      }
+    ],
+    dependencies: ["lucide-react"],
+    themable: true
+  },
+  {
+    name: "Title",
+    category: "molecules",
+    description: "A themed title component with underline accent.",
+    sourcePath: "src/stories/claimmind/molecules/Title.tsx",
+    props: [
+      { name: "children", type: "ReactNode", required: true, description: "Title content" },
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "as", type: "'h1' | 'h2' | 'h3' | 'h4'", required: false, default: "'h2'", description: "HTML heading tag" },
+      { name: "underline", type: "boolean", required: false, default: "true", description: "Show underline accent" },
+      { name: "className", type: "string", required: false, description: "Additional CSS classes" }
+    ],
+    examples: [
+      {
+        title: "Title Component",
+        code: `import { Title } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<Title theme="Owlexa" as="h1" underline>
+  Welcome to ClaimMind
+</Title>`
+      }
+    ],
+    dependencies: [],
+    themable: true
+  },
+  {
+    name: "SyncProgress",
+    category: "molecules",
+    description: "A themed sync progress card showing synchronization status.",
+    sourcePath: "src/stories/claimmind/molecules/SyncProgress.tsx",
+    props: [
+      { name: "progress", type: "number", required: true, description: "Progress percentage (0-100)" },
+      { name: "status", type: "'syncing' | 'completed' | 'failed'", required: false, default: "'syncing'", description: "Sync status" },
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "message", type: "string", required: false, description: "Status message" },
+      { name: "onCancel", type: "() => void", required: false, description: "Cancel callback" }
+    ],
+    examples: [
+      {
+        title: "SyncProgress Card",
+        code: `import { SyncProgress } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+<SyncProgress
+  progress={65}
+  status="syncing"
+  theme="BPJS"
+  message="Syncing data from server..."
+  onCancel={() => console.log('Cancelled')}
+/>`
+      }
+    ],
+    dependencies: ["lucide-react"],
+    themable: true
+  },
+  // ==================== PAGES ====================
+  {
+    name: "LoginPage",
+    category: "pages",
+    description: "A complete login page template with theme support.",
+    sourcePath: "src/stories/claimmind/pages/LoginPage.tsx",
+    props: [
+      { name: "theme", type: "'Default' | 'Owlexa' | 'BPJS'", required: false, default: "'Default'", description: "Brand theme" },
+      { name: "title", type: "string", required: false, default: "'Login ke ClaimMind'", description: "Page title" },
+      { name: "description", type: "string", required: false, description: "Page description" }
+    ],
+    examples: [
+      {
+        title: "LoginPage",
+        code: `import { LoginPage } from 'mta-design-system';
+import 'mta-design-system/styles.css';
+
+// In your Next.js app
+export default function Login() {
+  return (
+    <LoginPage
+      theme="Owlexa"
+      title="Welcome to Owlexa"
+      description="Enter your credentials to access your account."
+    />
+  );
+}`
+      }
+    ],
+    dependencies: ["lucide-react"],
+    themable: true
+  }
+];
+function getComponentByName(name) {
+  return componentRegistry.find(
+    (c) => c.name.toLowerCase() === name.toLowerCase() || c.name.toLowerCase().replace("claimmind", "") === name.toLowerCase()
+  );
+}
+function searchComponents(query) {
+  const lowerQuery = query.toLowerCase();
+  return componentRegistry.filter(
+    (c) => c.name.toLowerCase().includes(lowerQuery) || c.description.toLowerCase().includes(lowerQuery) || c.props.some((p) => p.name.toLowerCase().includes(lowerQuery))
+  );
+}
+
+// mcp/src/resources/components.ts
+var componentsResource = {
+  uri: "mta://components",
+  name: "MTA Design System Components",
+  description: "Complete list of all components in the MTA Design System",
+  mimeType: "application/json",
+  content: JSON.stringify({
+    components: componentRegistry.map((c) => ({
+      name: c.name,
+      category: c.category,
+      description: c.description,
+      themable: c.themable,
+      dependencies: c.dependencies
+    })),
+    total: componentRegistry.length
+  }, null, 2)
+};
+function getComponentResource(name) {
+  const component = getComponentByName(name);
+  if (!component) {
+    return null;
+  }
+  return {
+    uri: `mta://components/${name.toLowerCase()}`,
+    name: `${component.name} Component`,
+    description: component.description,
+    mimeType: "application/json",
+    content: JSON.stringify(component, null, 2)
+  };
+}
+
+// mcp/src/resources/themes.ts
+var themes = [
+  {
+    name: "Default",
+    primary: "#0284c7",
+    secondary: "#0ea5e9",
+    tertiary: "hsl(203, 97%, 77%)",
+    success: "#22c55e",
+    danger: "#ef4444",
+    background: "#f0f9ff",
+    cssVariables: {
+      "--claimmind-primary": "#0284c7",
+      "--claimmind-secondary": "#0ea5e9",
+      "--claimmind-tertiary": "hsl(203, 97%, 77%)",
+      "--claimmind-success": "#22c55e",
+      "--claimmind-danger": "#ef4444",
+      "--claimmind-background": "#f0f9ff"
+    }
+  },
+  {
+    name: "Owlexa",
+    primary: "#0ea5e9",
+    secondary: "#38bdf8",
+    tertiary: "#7dd3fc",
+    success: "#10b981",
+    danger: "#f43f5e",
+    background: "#f0f9ff",
+    cssVariables: {
+      "--owlexa-primary": "#0ea5e9",
+      "--owlexa-secondary": "#38bdf8",
+      "--owlexa-tertiary": "#7dd3fc",
+      "--owlexa-success": "#10b981",
+      "--owlexa-danger": "#f43f5e",
+      "--owlexa-background": "#f0f9ff"
+    }
+  },
+  {
+    name: "BPJS",
+    primary: "#059669",
+    secondary: "#10b981",
+    tertiary: "#34d399",
+    success: "#16a34a",
+    danger: "#dc2626",
+    background: "#ecfdf5",
+    cssVariables: {
+      "--bpjs-primary": "#059669",
+      "--bpjs-secondary": "#10b981",
+      "--bpjs-tertiary": "#34d399",
+      "--bpjs-success": "#16a34a",
+      "--bpjs-danger": "#dc2626",
+      "--bpjs-background": "#ecfdf5"
+    }
+  }
+];
+var themesResource = {
+  uri: "mta://themes",
+  name: "MTA Design System Themes",
+  description: "All available brand themes in the MTA Design System",
+  mimeType: "application/json",
+  content: JSON.stringify({
+    themes: themes.map((t) => ({
+      name: t.name,
+      primary: t.primary,
+      secondary: t.secondary,
+      tertiary: t.tertiary,
+      success: t.success,
+      danger: t.danger,
+      background: t.background
+    })),
+    total: themes.length
+  }, null, 2)
+};
+function getThemeResource(name) {
+  const theme = themes.find((t) => t.name.toLowerCase() === name.toLowerCase());
+  if (!theme) {
+    return null;
+  }
+  return {
+    uri: `mta://themes/${name.toLowerCase()}`,
+    name: `${theme.name} Theme`,
+    description: `${theme.name} brand theme tokens and CSS variables`,
+    mimeType: "application/json",
+    content: JSON.stringify(theme, null, 2)
+  };
+}
+function getThemeVariablesCss(themeName) {
+  if (themeName) {
+    const theme = themes.find((t) => t.name.toLowerCase() === themeName.toLowerCase());
+    if (!theme) return "";
+    return `:root {
+${Object.entries(theme.cssVariables).map(([key, value]) => `  ${key}: ${value};`).join("\n")}
+}`;
+  }
+  return themes.map((theme) => `/* ${theme.name} Theme */
+:root {
+${Object.entries(theme.cssVariables).map(([key, value]) => `  ${key}: ${value};`).join("\n")}
+}`).join("\n\n");
+}
+
+// mcp/src/resources/examples.ts
+var examplesResource = {
+  uri: "mta://examples",
+  name: "MTA Design System Examples",
+  description: "Usage examples for all components",
+  mimeType: "application/json",
+  content: JSON.stringify({
+    examples: componentRegistry.map((c) => ({
+      name: c.name,
+      category: c.category,
+      examples: c.examples
+    })),
+    total: componentRegistry.length
+  }, null, 2)
+};
+function getExamplesResource(componentName) {
+  const component = getComponentByName(componentName);
+  if (!component) {
+    return null;
+  }
+  return {
+    uri: `mta://examples/${componentName.toLowerCase()}`,
+    name: `${component.name} Examples`,
+    description: `Usage examples for ${component.name}`,
+    mimeType: "application/json",
+    content: JSON.stringify({
+      component: component.name,
+      examples: component.examples
+    }, null, 2)
+  };
+}
+function generateCodeSnippet(componentName, options = {}) {
+  const component = getComponentByName(componentName);
+  if (!component) {
+    return `// Component "${componentName}" not found`;
+  }
+  const propsArray = [];
+  if (component.themable && options.theme) {
+    propsArray.push(`theme="${options.theme}"`);
+  }
+  if (options.props) {
+    for (const [key, value] of Object.entries(options.props)) {
+      if (typeof value === "string") {
+        propsArray.push(`${key}="${value}"`);
+      } else if (typeof value === "boolean") {
+        if (value) propsArray.push(key);
+      } else if (typeof value === "number") {
+        propsArray.push(`${key}={${value}}`);
+      } else {
+        propsArray.push(`${key}={${JSON.stringify(value)}}`);
+      }
+    }
+  }
+  const propsString = propsArray.length > 0 ? " " + propsArray.join(" ") : "";
+  const hasChildren = !["Input", "Spinner", "Progress", "Switch"].includes(componentName);
+  const importStatement = `import { ${component.name} } from 'mta-design-system';
+import 'mta-design-system/styles.css';`;
+  let usage;
+  if (hasChildren) {
+    usage = `<${component.name}${propsString}>
+  Content here
+</${component.name}>`;
+  } else {
+    usage = `<${component.name}${propsString} />`;
+  }
+  return `${importStatement}
+
+// Usage
+${usage}`;
+}
+function generateFullComponentCode(componentName, options = {}) {
+  const component = getComponentByName(componentName);
+  if (!component) {
+    return `// Component "${componentName}" not found`;
+  }
+  const snippet = generateCodeSnippet(componentName, options);
+  if (options.includeState) {
+    const stateHooks = [];
+    if (["Select", "ClaimMindSelect", "Combobox", "ClaimMindCombobox"].includes(componentName)) {
+      stateHooks.push(`const [value, setValue] = useState<string>('');`);
+    }
+    if (["Switch", "ClaimMindSwitch"].includes(componentName)) {
+      stateHooks.push(`const [checked, setChecked] = useState<boolean>(false);`);
+    }
+    if (["Dialog", "ClaimMindDialog"].includes(componentName)) {
+      stateHooks.push(`const [open, setOpen] = useState<boolean>(false);`);
+    }
+    if (componentName === "Chat") {
+      stateHooks.push(`const [isOpen, setIsOpen] = useState<boolean>(false);`);
+      stateHooks.push(`const [messages, setMessages] = useState<ChatMessage[]>([]);`);
+    }
+    if (stateHooks.length > 0) {
+      const hooksSection = stateHooks.join("\n  ");
+      return `import { useState } from 'react';
+${snippet.replace("// Usage", `// State
+  ${hooksSection}
+
+  // Usage`)}`;
+    }
+  }
+  return snippet;
+}
+
+// mcp/src/server.ts
+var server = new import_server.Server(
+  {
+    name: "mta-design-system",
+    version: "0.1.0"
+  },
+  {
+    capabilities: {
+      resources: {},
+      tools: {}
+    }
+  }
+);
+server.setRequestHandler(import_types.ListResourcesRequestSchema, async () => {
+  return {
+    resources: [
+      // Main resources
+      {
+        uri: "mta://components",
+        name: "MTA Design System Components",
+        description: "Complete list of all components",
+        mimeType: "application/json"
+      },
+      {
+        uri: "mta://themes",
+        name: "MTA Design System Themes",
+        description: "All available brand themes",
+        mimeType: "application/json"
+      },
+      {
+        uri: "mta://examples",
+        name: "MTA Design System Examples",
+        description: "Usage examples for all components",
+        mimeType: "application/json"
+      },
+      // Individual themes
+      ...["Default", "Owlexa", "BPJS"].map((name) => ({
+        uri: `mta://themes/${name.toLowerCase()}`,
+        name: `${name} Theme`,
+        description: `${name} brand theme tokens`,
+        mimeType: "application/json"
+      }))
+    ]
+  };
+});
+server.setRequestHandler(import_types.ReadResourceRequestSchema, async (request) => {
+  const { uri } = request.params;
+  if (uri === "mta://components") {
+    return { contents: [componentsResource] };
+  }
+  if (uri.startsWith("mta://components/")) {
+    const name = uri.replace("mta://components/", "");
+    const resource = getComponentResource(name);
+    if (!resource) {
+      throw new Error(`Component not found: ${name}`);
+    }
+    return { contents: [resource] };
+  }
+  if (uri === "mta://themes") {
+    return { contents: [themesResource] };
+  }
+  if (uri.startsWith("mta://themes/")) {
+    const name = uri.replace("mta://themes/", "");
+    const resource = getThemeResource(name);
+    if (!resource) {
+      throw new Error(`Theme not found: ${name}`);
+    }
+    return { contents: [resource] };
+  }
+  if (uri === "mta://examples") {
+    return { contents: [examplesResource] };
+  }
+  if (uri.startsWith("mta://examples/")) {
+    const name = uri.replace("mta://examples/", "");
+    const resource = getExamplesResource(name);
+    if (!resource) {
+      throw new Error(`Examples not found for: ${name}`);
+    }
+    return { contents: [resource] };
+  }
+  throw new Error(`Unknown resource: ${uri}`);
+});
+server.setRequestHandler(import_types.ListToolsRequestSchema, async () => {
+  return {
+    tools: [
+      {
+        name: "search-components",
+        description: "Search for components by name, description, or props",
+        inputSchema: {
+          type: "object",
+          properties: {
+            query: {
+              type: "string",
+              description: "Search query (component name, description, or prop name)"
+            }
+          },
+          required: ["query"]
+        }
+      },
+      {
+        name: "get-component-props",
+        description: "Get the TypeScript props interface for a component",
+        inputSchema: {
+          type: "object",
+          properties: {
+            componentName: {
+              type: "string",
+              description: 'Name of the component (e.g., "Button", "ClaimMindButton")'
+            }
+          },
+          required: ["componentName"]
+        }
+      },
+      {
+        name: "generate-code",
+        description: "Generate usage code snippet for a component",
+        inputSchema: {
+          type: "object",
+          properties: {
+            componentName: {
+              type: "string",
+              description: "Name of the component"
+            },
+            theme: {
+              type: "string",
+              enum: ["Default", "Owlexa", "BPJS"],
+              description: "Theme to use (for themed components)"
+            },
+            props: {
+              type: "object",
+              description: "Props to include in the generated code"
+            },
+            includeState: {
+              type: "boolean",
+              description: "Include React state hooks if applicable"
+            }
+          },
+          required: ["componentName"]
+        }
+      },
+      {
+        name: "get-theme-variables",
+        description: "Get CSS custom properties for a theme",
+        inputSchema: {
+          type: "object",
+          properties: {
+            theme: {
+              type: "string",
+              enum: ["Default", "Owlexa", "BPJS"],
+              description: "Theme name (leave empty for all themes)"
+            }
+          }
+        }
+      }
+    ]
+  };
+});
+server.setRequestHandler(import_types.CallToolRequestSchema, async (request) => {
+  const { name, arguments: args } = request.params;
+  switch (name) {
+    case "search-components": {
+      const { query } = args;
+      const results = searchComponents(query);
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify({
+              query,
+              total: results.length,
+              components: results.map((c) => ({
+                name: c.name,
+                category: c.category,
+                description: c.description,
+                themable: c.themable
+              }))
+            }, null, 2)
+          }
+        ]
+      };
+    }
+    case "get-component-props": {
+      const { componentName } = args;
+      const component = getComponentByName(componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Component "${componentName}" not found. Available components: ${componentRegistry.map((c) => c.name).join(", ")}`
+            }
+          ],
+          isError: true
+        };
+      }
+      const propsInterface = component.props.map((p) => {
+        const required = p.required ? "" : "?";
+        const defaultComment = p.default ? ` // default: ${p.default}` : "";
+        return `  ${p.name}${required}: ${p.type};${defaultComment}`;
+      }).join("\n");
+      return {
+        content: [
+          {
+            type: "text",
+            text: `interface ${component.name}Props {
+${propsInterface}
+}
+
+// ${component.description}`
+          }
+        ]
+      };
+    }
+    case "generate-code": {
+      const { componentName, theme, props, includeState } = args;
+      const component = getComponentByName(componentName);
+      if (!component) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Component "${componentName}" not found.`
+            }
+          ],
+          isError: true
+        };
+      }
+      const code = generateFullComponentCode(componentName, {
+        theme,
+        props,
+        includeState
+      });
+      return {
+        content: [
+          {
+            type: "text",
+            text: code
+          }
+        ]
+      };
+    }
+    case "get-theme-variables": {
+      const { theme } = args;
+      const css = getThemeVariablesCss(theme);
+      return {
+        content: [
+          {
+            type: "text",
+            text: css || "Theme not found."
+          }
+        ]
+      };
+    }
+    default:
+      throw new Error(`Unknown tool: ${name}`);
+  }
+});
+
+// mcp/src/index.ts
+async function main() {
+  const transport = new import_stdio.StdioServerTransport();
+  await server.connect(transport);
+  console.error("MTA Design System MCP Server running on stdio");
+}
+main().catch((error) => {
+  console.error("Fatal error in main():", error);
+  process.exit(1);
+});
+//# sourceMappingURL=index.cjs.map