@lglab/compose-ui-mcp 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# Compose UI MCP Server
+
+MCP (Model Context Protocol) server that exposes [Compose UI](https://compose-ui.dev) library documentation to AI tools like Claude, Cursor etc...
+
+## Documentation
+
+To get started, check out the [Compose UI documentation](https://www.compose-ui.dev/overview/mcp).
+
+## License
+
+Licensed under the [MIT license](https://github.com/LGLabGreg/compose-ui/blob/main/LICENSE.md).

package/dist/assets/llms/accordion.md

@@ -0,0 +1,184 @@
+# Accordion
+
+A set of collapsible panels with headings.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionRoot,
+  AccordionTrigger,
+} from '@lglab/compose-ui/accordion'
+import { ChevronDown } from 'lucide-react'
+
+const items = [
+  {
+    title: 'What is Compose UI?',
+    content:
+      'Compose UI is a collection of accessible React components built with Base UI and Tailwind CSS, ready to use in your design systems and web apps.',
+  },
+  {
+    title: 'How do I get started?',
+    content:
+      'Head to the "Quick start" guide in the docs. Install the package and start using components right away.',
+  },
+  {
+    title: 'Can I use it for my project?',
+    content: 'Of course! Compose UI is free and open source.',
+  },
+]
+
+export default function BasicExample() {
+  return (
+    <AccordionRoot className='w-full max-w-md'>
+      {items.map((item) => (
+        <AccordionItem key={item.title} value={item.title}>
+          <AccordionHeader>
+            <AccordionTrigger className='group'>
+              {item.title}
+              <ChevronDown className='h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-180' />
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionPanel>
+            <div className='pb-4 text-sm'>
+              <p>{item.content}</p>
+            </div>
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  )
+}
+```
+
+### Icon
+
+```tsx
+import {
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionRoot,
+  AccordionTrigger,
+} from '@lglab/compose-ui/accordion'
+import { Plus } from 'lucide-react'
+
+const items = [
+  {
+    title: 'What is Compose UI?',
+    content:
+      'Compose UI is a collection of accessible React components built with Base UI and Tailwind CSS, ready to use in your design systems and web apps.',
+  },
+  {
+    title: 'How do I get started?',
+    content:
+      'Head to the "Quick start" guide in the docs. Install the package and start using components right away.',
+  },
+  {
+    title: 'Can I use it for my project?',
+    content: 'Of course! Compose UI is free and open source.',
+  },
+]
+
+export default function BasicExample() {
+  return (
+    <AccordionRoot className='w-full max-w-md'>
+      {items.map((item) => (
+        <AccordionItem key={item.title} value={item.title}>
+          <AccordionHeader>
+            <AccordionTrigger className='group'>
+              {item.title}
+              <Plus className='size-5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-45 group-data-panel-open:scale-105' />
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionPanel>
+            <div className='pb-4 text-sm'>
+              <p>{item.content}</p>
+            </div>
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  )
+}
+```
+
+### Multiple
+
+```tsx
+import {
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionRoot,
+  AccordionTrigger,
+} from '@lglab/compose-ui/accordion'
+import { ChevronDown } from 'lucide-react'
+
+const items = [
+  {
+    title: 'Installation',
+    content:
+      'Install Compose UI using your preferred package manager: npm, pnpm, yarn, or bun.',
+  },
+  {
+    title: 'Styling',
+    content:
+      'Import the default styles and register Compose UI as a Tailwind source in your main CSS file.',
+  },
+  {
+    title: 'Usage',
+    content:
+      'Import components directly from the package and start using them in your React application.',
+  },
+  {
+    title: 'Customization',
+    content:
+      'Override the default theme by setting CSS variables. All components accept className props for additional styling.',
+  },
+]
+
+export default function MultipleExample() {
+  return (
+    <AccordionRoot multiple className='w-full max-w-md'>
+      {items.map((item) => (
+        <AccordionItem key={item.title} value={item.title}>
+          <AccordionHeader>
+            <AccordionTrigger className='group'>
+              {item.title}
+              <ChevronDown className='h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-180' />
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionPanel>
+            <div className='pb-4 text-sm'>
+              <p>{item.content}</p>
+            </div>
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Accordion Documentation](https://base-ui.com/react/components/accordion)
+- [API Reference](https://base-ui.com/react/components/accordion#api-reference)

package/dist/assets/llms/alert-dialog.md

@@ -0,0 +1,306 @@
+# Alert Dialog
+
+A dialog that requires a user response to proceed.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { AlertDialog } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import {
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@lglab/compose-ui/alert-dialog'
+
+export default function BasicExample() {
+  return (
+    <AlertDialogRoot>
+      <AlertDialogTrigger variant='destructive'>Discard draft</AlertDialogTrigger>
+      <AlertDialogPortal>
+        <AlertDialogBackdrop />
+        <AlertDialogPopup>
+          <AlertDialogTitle>Discard draft?</AlertDialogTitle>
+          <AlertDialogDescription>
+            You can&apos;t undo this action.
+          </AlertDialogDescription>
+          <div className='mt-6 flex justify-end gap-2'>
+            <AlertDialogClose>Cancel</AlertDialogClose>
+            <AlertDialogClose variant='destructive'>Discard</AlertDialogClose>
+          </div>
+        </AlertDialogPopup>
+      </AlertDialogPortal>
+    </AlertDialogRoot>
+  )
+}
+```
+
+### Close confirmation
+
+```tsx
+import {
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+} from '@lglab/compose-ui/alert-dialog'
+import { Button } from '@lglab/compose-ui/button'
+import {
+  DialogBackdrop,
+  DialogClose,
+  DialogPopup,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from '@lglab/compose-ui/dialog'
+import { useState } from 'react'
+
+export default function CloseConfirmationExample() {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [confirmationOpen, setConfirmationOpen] = useState(false)
+  const [textareaValue, setTextareaValue] = useState('')
+
+  return (
+    <DialogRoot
+      open={dialogOpen}
+      onOpenChange={(open) => {
+        if (!open && textareaValue) {
+          setConfirmationOpen(true)
+        } else {
+          setTextareaValue('')
+          setDialogOpen(open)
+        }
+      }}
+    >
+      <DialogTrigger>Send Message</DialogTrigger>
+      <DialogPortal>
+        <DialogBackdrop />
+        <DialogPopup>
+          <DialogTitle>New Message</DialogTitle>
+          <form
+            className='mt-4 flex flex-col gap-6'
+            onSubmit={(event) => {
+              event.preventDefault()
+              setDialogOpen(false)
+            }}
+          >
+            <textarea
+              required
+              className='min-h-48 w-full rounded-md border px-3.5 py-2'
+              placeholder="What's on your mind?"
+              value={textareaValue}
+              onChange={(event) => setTextareaValue(event.target.value)}
+            />
+            <div className='flex justify-end gap-2'>
+              <DialogClose>Cancel</DialogClose>
+              <Button type='submit'>Send</Button>
+            </div>
+          </form>
+        </DialogPopup>
+      </DialogPortal>
+
+      <AlertDialogRoot open={confirmationOpen} onOpenChange={setConfirmationOpen}>
+        <AlertDialogPortal>
+          <AlertDialogPopup>
+            <AlertDialogTitle>Discard message?</AlertDialogTitle>
+            <AlertDialogDescription>Your tweet will be lost.</AlertDialogDescription>
+            <div className='mt-6 flex items-center justify-end gap-2'>
+              <AlertDialogClose>Go back</AlertDialogClose>
+              <AlertDialogClose
+                variant='destructive'
+                onClick={() => {
+                  setConfirmationOpen(false)
+                  setDialogOpen(false)
+                }}
+              >
+                Discard
+              </AlertDialogClose>
+            </div>
+          </AlertDialogPopup>
+        </AlertDialogPortal>
+      </AlertDialogRoot>
+    </DialogRoot>
+  )
+}
+```
+
+### Detached triggers
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@lglab/compose-ui/alert-dialog'
+
+const demoAlertDialog = AlertDialog.createHandle()
+
+export default function DetachedTriggersExample() {
+  return (
+    <>
+      <AlertDialogTrigger handle={demoAlertDialog} variant='destructive'>
+        Discard draft
+      </AlertDialogTrigger>
+
+      <AlertDialogRoot handle={demoAlertDialog}>
+        <AlertDialogPortal>
+          <AlertDialogBackdrop />
+          <AlertDialogPopup>
+            <AlertDialogTitle>Discard draft?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+            <div className='mt-6 flex justify-end gap-2'>
+              <AlertDialogClose>Cancel</AlertDialogClose>
+              <AlertDialogClose variant='destructive'>Discard</AlertDialogClose>
+            </div>
+          </AlertDialogPopup>
+        </AlertDialogPortal>
+      </AlertDialogRoot>
+    </>
+  )
+}
+```
+
+### Multiple triggers
+
+```tsx
+import {
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@lglab/compose-ui/alert-dialog'
+
+export default function MultipleTriggersExample() {
+  return (
+    <AlertDialogRoot>
+      <div className='flex flex-wrap gap-2'>
+        <AlertDialogTrigger variant='destructive'>Delete Item 1</AlertDialogTrigger>
+        <AlertDialogTrigger variant='destructive'>Delete Item 2</AlertDialogTrigger>
+        <AlertDialogTrigger variant='destructive'>Delete Item 3</AlertDialogTrigger>
+      </div>
+      <AlertDialogPortal>
+        <AlertDialogBackdrop />
+        <AlertDialogPopup>
+          <AlertDialogTitle>Delete item?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete the item.
+          </AlertDialogDescription>
+          <div className='mt-6 flex justify-end gap-2'>
+            <AlertDialogClose>Cancel</AlertDialogClose>
+            <AlertDialogClose variant='destructive'>Delete</AlertDialogClose>
+          </div>
+        </AlertDialogPopup>
+      </AlertDialogPortal>
+    </AlertDialogRoot>
+  )
+}
+```
+
+### Controlled mode with multiple triggers
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@lglab/compose-ui/alert-dialog'
+import * as React from 'react'
+
+const demoAlertDialog = AlertDialog.createHandle<{ itemName: string }>()
+
+export default function ControlledMultipleExample() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <div className='flex flex-wrap gap-2'>
+        <AlertDialogTrigger
+          handle={demoAlertDialog}
+          payload={{ itemName: 'Item 1' }}
+          variant='destructive'
+        >
+          Delete Item 1
+        </AlertDialogTrigger>
+        <AlertDialogTrigger
+          handle={demoAlertDialog}
+          payload={{ itemName: 'Item 2' }}
+          variant='destructive'
+        >
+          Delete Item 2
+        </AlertDialogTrigger>
+        <AlertDialogTrigger
+          handle={demoAlertDialog}
+          payload={{ itemName: 'Item 3' }}
+          variant='destructive'
+        >
+          Delete Item 3
+        </AlertDialogTrigger>
+      </div>
+
+      <AlertDialogRoot handle={demoAlertDialog} open={open} onOpenChange={setOpen}>
+        {({ payload: currentPayload }) => {
+          const payload = currentPayload as { itemName: string } | undefined
+          return (
+            <AlertDialogPortal>
+              <AlertDialogBackdrop />
+              <AlertDialogPopup>
+                <AlertDialogTitle>Delete item?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  {payload && 'itemName' in payload
+                    ? `Are you sure you want to delete ${payload.itemName}? This action cannot be undone.`
+                    : 'This action cannot be undone. This will permanently delete the item.'}
+                </AlertDialogDescription>
+                <div className='mt-6 flex justify-end gap-2'>
+                  <AlertDialogClose>Cancel</AlertDialogClose>
+                  <AlertDialogClose variant='destructive'>Delete</AlertDialogClose>
+                </div>
+              </AlertDialogPopup>
+            </AlertDialogPortal>
+          )
+        }}
+      </AlertDialogRoot>
+    </>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Alert Dialog Documentation](https://base-ui.com/react/components/alert-dialog)
+- [API Reference](https://base-ui.com/react/components/alert-dialog#api-reference)