@lglab/compose-ui-mcp 0.0.1

package/dist/assets/llms/pagination.md

@@ -0,0 +1,514 @@
+# Pagination
+
+A composable pagination component for navigating through paginated content. Use with tables, search results, or any paginated data.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { // eslint-disable-next-line react-refresh/only-export-components
+  usePagination, PaginationRoot, PaginationContent, PaginationItem, PaginationButton, PaginationPrevious, PaginationNext, PaginationFirst, PaginationLast, PaginationEllipsis } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Default
+
+```tsx
+import {
+  PaginationButton,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationRoot,
+  usePagination,
+} from '@lglab/compose-ui/pagination'
+import { ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react'
+import { useState } from 'react'
+
+export default function DefaultExample() {
+  const [currentPage, setCurrentPage] = useState(1)
+  const totalPages = 5
+
+  const { pages, canGoPrevious, canGoNext, goToPrevious, goToNext, goToPage } =
+    usePagination({
+      currentPage,
+      totalPages,
+      onPageChange: setCurrentPage,
+    })
+
+  return (
+    <PaginationRoot className='mx-auto'>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious onClick={goToPrevious} disabled={!canGoPrevious}>
+            <ChevronLeft className='size-4' />
+          </PaginationPrevious>
+        </PaginationItem>
+
+        {pages.map((page, i) => (
+          <PaginationItem key={i}>
+            {page === 'ellipsis' ? (
+              <PaginationEllipsis>
+                <Ellipsis className='size-4' />
+              </PaginationEllipsis>
+            ) : (
+              <PaginationButton
+                isActive={page === currentPage}
+                onClick={() => goToPage(page)}
+              >
+                {page}
+              </PaginationButton>
+            )}
+          </PaginationItem>
+        ))}
+
+        <PaginationItem>
+          <PaginationNext onClick={goToNext} disabled={!canGoNext}>
+            <ChevronRight className='size-4' />
+          </PaginationNext>
+        </PaginationItem>
+      </PaginationContent>
+    </PaginationRoot>
+  )
+}
+```
+
+### With Ellipsis
+
+```tsx
+import {
+  PaginationButton,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationRoot,
+  usePagination,
+} from '@lglab/compose-ui/pagination'
+import { ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react'
+import { useState } from 'react'
+
+export default function WithEllipsisExample() {
+  const [currentPage, setCurrentPage] = useState(5)
+  const totalPages = 20
+
+  const { pages, canGoPrevious, canGoNext, goToPrevious, goToNext, goToPage } =
+    usePagination({
+      currentPage,
+      totalPages,
+      onPageChange: setCurrentPage,
+    })
+
+  return (
+    <PaginationRoot>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious onClick={goToPrevious} disabled={!canGoPrevious}>
+            <ChevronLeft className='size-4' />
+          </PaginationPrevious>
+        </PaginationItem>
+
+        {pages.map((page, i) => (
+          <PaginationItem key={i}>
+            {page === 'ellipsis' ? (
+              <PaginationEllipsis>
+                <Ellipsis className='size-4' />
+              </PaginationEllipsis>
+            ) : (
+              <PaginationButton
+                isActive={page === currentPage}
+                onClick={() => goToPage(page)}
+              >
+                {page}
+              </PaginationButton>
+            )}
+          </PaginationItem>
+        ))}
+
+        <PaginationItem>
+          <PaginationNext onClick={goToNext} disabled={!canGoNext}>
+            <ChevronRight className='size-4' />
+          </PaginationNext>
+        </PaginationItem>
+      </PaginationContent>
+    </PaginationRoot>
+  )
+}
+```
+
+### With First/Last
+
+```tsx
+import {
+  PaginationButton,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationRoot,
+  usePagination,
+} from '@lglab/compose-ui/pagination'
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Ellipsis,
+} from 'lucide-react'
+import { useState } from 'react'
+
+export default function WithFirstLastExample() {
+  const [currentPage, setCurrentPage] = useState(10)
+  const totalPages = 20
+
+  const {
+    pages,
+    canGoPrevious,
+    canGoNext,
+    goToPrevious,
+    goToNext,
+    goToFirst,
+    goToLast,
+    goToPage,
+  } = usePagination({
+    currentPage,
+    totalPages,
+    onPageChange: setCurrentPage,
+  })
+
+  return (
+    <PaginationRoot>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationFirst onClick={goToFirst} disabled={!canGoPrevious}>
+            <ChevronsLeft className='size-4' />
+          </PaginationFirst>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationPrevious onClick={goToPrevious} disabled={!canGoPrevious}>
+            <ChevronLeft className='size-4' />
+          </PaginationPrevious>
+        </PaginationItem>
+
+        {pages.map((page, i) => (
+          <PaginationItem key={i}>
+            {page === 'ellipsis' ? (
+              <PaginationEllipsis>
+                <Ellipsis className='size-4' />
+              </PaginationEllipsis>
+            ) : (
+              <PaginationButton
+                isActive={page === currentPage}
+                onClick={() => goToPage(page)}
+              >
+                {page}
+              </PaginationButton>
+            )}
+          </PaginationItem>
+        ))}
+
+        <PaginationItem>
+          <PaginationNext onClick={goToNext} disabled={!canGoNext}>
+            <ChevronRight className='size-4' />
+          </PaginationNext>
+        </PaginationItem>
+
+        <PaginationItem>
+          <PaginationLast onClick={goToLast} disabled={!canGoNext}>
+            <ChevronsRight className='size-4' />
+          </PaginationLast>
+        </PaginationItem>
+      </PaginationContent>
+    </PaginationRoot>
+  )
+}
+```
+
+### Page Size
+
+```tsx
+import {
+  PaginationButton,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationRoot,
+  usePagination,
+} from '@lglab/compose-ui/pagination'
+import {
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+} from '@lglab/compose-ui/select'
+import { Check, ChevronLeft, ChevronRight, ChevronsUpDown, Ellipsis } from 'lucide-react'
+import { useState } from 'react'
+
+export default function WithPageSizeExample() {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+
+  const totalItems = 235
+  const totalPages = Math.ceil(totalItems / pageSize)
+
+  const {
+    pages,
+    canGoPrevious,
+    canGoNext,
+    goToPrevious,
+    goToNext,
+    goToPage,
+    pageSizeOptions,
+    setPageSize: handleSetPageSize,
+  } = usePagination({
+    currentPage,
+    totalPages,
+    onPageChange: setCurrentPage,
+    pageSize,
+    onPageSizeChange: (size) => {
+      setPageSize(size)
+      setCurrentPage(1)
+    },
+  })
+
+  const pageSizeItems = pageSizeOptions.map((size) => ({
+    label: `${size} per page`,
+    value: size,
+  }))
+
+  return (
+    <div className='flex flex-wrap gap-2 items-center'>
+      <PaginationRoot>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious onClick={goToPrevious} disabled={!canGoPrevious}>
+              <ChevronLeft className='size-4' />
+            </PaginationPrevious>
+          </PaginationItem>
+
+          {pages.map((page, i) => (
+            <PaginationItem key={i}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis>
+                  <Ellipsis className='size-4' />
+                </PaginationEllipsis>
+              ) : (
+                <PaginationButton
+                  isActive={page === currentPage}
+                  onClick={() => goToPage(page)}
+                >
+                  {page}
+                </PaginationButton>
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem>
+            <PaginationNext onClick={goToNext} disabled={!canGoNext}>
+              <ChevronRight className='size-4' />
+            </PaginationNext>
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationRoot>
+
+      <SelectRoot
+        value={pageSize}
+        onValueChange={(value) => value && handleSetPageSize(value)}
+        items={pageSizeItems}
+      >
+        <SelectTrigger aria-label='Select page size' className='min-w-32 min-h-8'>
+          <SelectValue placeholder='Page size' />
+          <SelectIcon>
+            <ChevronsUpDown className='size-4' />
+          </SelectIcon>
+        </SelectTrigger>
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectList>
+                {pageSizeItems.map(({ label, value }) => (
+                  <SelectItem key={value} value={value}>
+                    <SelectItemText>{label}</SelectItemText>
+                    <SelectItemIndicator>
+                      <Check className='size-3.5' />
+                    </SelectItemIndicator>
+                  </SelectItem>
+                ))}
+              </SelectList>
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+      </SelectRoot>
+    </div>
+  )
+}
+```
+
+### Sizes
+
+```tsx
+import {
+  PaginationButton,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationRoot,
+  usePagination,
+} from '@lglab/compose-ui/pagination'
+import { ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react'
+import { useState } from 'react'
+
+export default function SizesExample() {
+  const [currentPage, setCurrentPage] = useState(1)
+  const totalPages = 5
+
+  const { pages, canGoPrevious, canGoNext, goToPrevious, goToNext, goToPage } =
+    usePagination({
+      currentPage,
+      totalPages,
+      onPageChange: setCurrentPage,
+    })
+
+  return (
+    <div className='flex flex-col gap-6 items-center'>
+      <PaginationRoot>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious onClick={goToPrevious} disabled={!canGoPrevious}>
+              <ChevronLeft className='size-4' />
+            </PaginationPrevious>
+          </PaginationItem>
+
+          {pages.map((page, i) => (
+            <PaginationItem key={i}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis>
+                  <Ellipsis className='size-4' />
+                </PaginationEllipsis>
+              ) : (
+                <PaginationButton
+                  isActive={page === currentPage}
+                  onClick={() => goToPage(page)}
+                >
+                  {page}
+                </PaginationButton>
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem>
+            <PaginationNext onClick={goToNext} disabled={!canGoNext}>
+              <ChevronRight className='size-4' />
+            </PaginationNext>
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationRoot>
+
+      <PaginationRoot>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              size='icon'
+              onClick={goToPrevious}
+              disabled={!canGoPrevious}
+            >
+              <ChevronLeft className='size-4' />
+            </PaginationPrevious>
+          </PaginationItem>
+
+          {pages.map((page, i) => (
+            <PaginationItem key={i}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis size='icon'>
+                  <Ellipsis className='size-4' />
+                </PaginationEllipsis>
+              ) : (
+                <PaginationButton
+                  size='icon'
+                  isActive={page === currentPage}
+                  onClick={() => goToPage(page)}
+                >
+                  {page}
+                </PaginationButton>
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem>
+            <PaginationNext size='icon' onClick={goToNext} disabled={!canGoNext}>
+              <ChevronRight className='size-4' />
+            </PaginationNext>
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationRoot>
+
+      <PaginationRoot>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              size='icon-lg'
+              onClick={goToPrevious}
+              disabled={!canGoPrevious}
+            >
+              <ChevronLeft className='size-4' />
+            </PaginationPrevious>
+          </PaginationItem>
+
+          {pages.map((page, i) => (
+            <PaginationItem key={i}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis size='icon-lg'>
+                  <Ellipsis className='size-4' />
+                </PaginationEllipsis>
+              ) : (
+                <PaginationButton
+                  size='icon-lg'
+                  isActive={page === currentPage}
+                  onClick={() => goToPage(page)}
+                >
+                  {page}
+                </PaginationButton>
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem>
+            <PaginationNext size='icon-lg' onClick={goToNext} disabled={!canGoNext}>
+              <ChevronRight className='size-4' />
+            </PaginationNext>
+          </PaginationItem>
+        </PaginationContent>
+      </PaginationRoot>
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Pagination Documentation](https://base-ui.com/react/components/pagination)
+- [API Reference](https://base-ui.com/react/components/pagination#api-reference)

package/dist/assets/llms/popover.md

@@ -0,0 +1,206 @@
+# Popover
+
+An accessible popup anchored to a button.
+
+## Installation
+
+```bash
+npm install @lglab/compose-ui
+```
+
+## Import
+
+```tsx
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose, PopoverViewport } from '@lglab/compose-ui'
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  PopoverArrow,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@lglab/compose-ui/popover'
+import { Bell } from 'lucide-react'
+
+export default function DefaultExample() {
+  return (
+    <PopoverRoot>
+      <PopoverTrigger
+        render={(props) => (
+          <Button {...props} variant='outline' size='icon'>
+            <Bell className='size-4' aria-label='Notifications' />
+          </Button>
+        )}
+      />
+      <PopoverPortal>
+        <PopoverPositioner>
+          <PopoverPopup className='space-y-0.5'>
+            <PopoverArrow />
+            <PopoverTitle>Notifications</PopoverTitle>
+            <PopoverDescription>You are all caught up. Good job!</PopoverDescription>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </PopoverRoot>
+  )
+}
+```
+
+### Open on Hover
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  PopoverArrow,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@lglab/compose-ui/popover'
+import { Bell } from 'lucide-react'
+
+export default function OpenOnHoverExample() {
+  return (
+    <PopoverRoot>
+      <PopoverTrigger
+        openOnHover
+        delay={300}
+        render={(props) => (
+          <Button {...props} variant='outline' size='icon'>
+            <Bell className='size-4' aria-label='Notifications' />
+          </Button>
+        )}
+      />
+      <PopoverPortal>
+        <PopoverPositioner>
+          <PopoverPopup className='space-y-0.5'>
+            <PopoverArrow />
+            <PopoverTitle>Notifications</PopoverTitle>
+            <PopoverDescription>
+              Hover over the bell icon to see this popover. It opens after a 300ms delay.
+            </PopoverDescription>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </PopoverRoot>
+  )
+}
+```
+
+### With Close Button
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@lglab/compose-ui/popover'
+import { Bell } from 'lucide-react'
+
+export default function WithCloseExample() {
+  return (
+    <PopoverRoot>
+      <PopoverTrigger
+        render={(props) => (
+          <Button {...props} variant='outline' size='icon'>
+            <Bell className='size-4' aria-label='Notifications' />
+          </Button>
+        )}
+      />
+      <PopoverPortal>
+        <PopoverPositioner>
+          <PopoverPopup className='space-y-0.5'>
+            <PopoverArrow />
+            <PopoverTitle>Notifications</PopoverTitle>
+            <PopoverDescription>
+              You have 3 new notifications. Click the close button to dismiss this
+              popover.
+            </PopoverDescription>
+            <div className='mt-4 flex justify-end'>
+              <PopoverClose
+                render={(props) => (
+                  <Button {...props} variant='outline' size='sm'>
+                    Close
+                  </Button>
+                )}
+              />
+            </div>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </PopoverRoot>
+  )
+}
+```
+
+### Sides
+
+```tsx
+import { Button } from '@lglab/compose-ui/button'
+import {
+  PopoverArrow,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from '@lglab/compose-ui/popover'
+
+const sides = ['left', 'bottom', 'top', 'right'] as const
+
+export default function SidesExample() {
+  return (
+    <div className='flex flex-wrap gap-2 items-center'>
+      {sides.map((side) => (
+        <PopoverRoot key={side}>
+          <PopoverTrigger
+            render={(props) => (
+              <Button {...props} variant='outline' className='capitalize'>
+                {side}
+              </Button>
+            )}
+          />
+          <PopoverPortal>
+            <PopoverPositioner side={side}>
+              <PopoverPopup className='space-y-0.5'>
+                <PopoverArrow />
+                <PopoverTitle>Popover on {side}</PopoverTitle>
+                <PopoverDescription>
+                  This popover is positioned on the {side} side.
+                </PopoverDescription>
+              </PopoverPopup>
+            </PopoverPositioner>
+          </PopoverPortal>
+        </PopoverRoot>
+      ))}
+    </div>
+  )
+}
+```
+
+## Resources
+
+- [Base UI Popover Documentation](https://base-ui.com/react/components/popover)
+- [API Reference](https://base-ui.com/react/components/popover#api-reference)