### Cubitt Project Navigation Source: https://cubitt-docs.vercel.app/icon-gallery Provides links to different sections of the Cubitt documentation, including releases, introduction, installation, core features, guides, and components. ```html

Core Logos Icons

Guides URL State Management

Components Accordion Alert Alert Dialog Avatar Avatar Group Badge Breadcrumb Button Card Checkbox Dialog Feedback Button Form Input Label Mime Type Icon Pagination Radio Group Segmented Control Select Sonner Stepper Switch Table Tabs Textarea Toggle Toggle Group Tooltip

Data Table Overview Features Advanced Filter Column View Selection Toolbar API Reference Tilt Mark `⌘``K` Releases ``` -------------------------------- ### Install Cubitt Packages Source: https://cubitt-docs.vercel.app/installation Installs the latest versions of Cubitt icons, components, and logos using pnpm. ```bash pnpm add @tilt-legal/cubitt-icons @tilt-legal/cubitt-components @tilt-legal/cubitt-logos ``` -------------------------------- ### Install Cubitt Icons Source: https://cubitt-docs.vercel.app/core/icons Installs the Cubitt icons package using pnpm. This is the first step to using the icon components in your project. ```bash pnpm add @tilt-legal/cubitt-icons ``` -------------------------------- ### Basic Textarea Example Source: https://cubitt-docs.vercel.app/components/textarea A simple example of rendering a Textarea component with a placeholder. ```jsx

```

--------------------------------

### Cubitt Basic Card Example

Source: https://cubitt-docs.vercel.app/components/card

A basic example of the Cubitt Card component, showcasing its structure with a title, description, content, and footer.

```typescript
Card(
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>,
  <CardContent>Card Content</CardContent>,
  <CardFooter>Card Footer</CardFooter>
)
```

--------------------------------

### Cubitt Alert Component Examples

Source: https://cubitt-docs.vercel.app/components/alert

Provides examples of the Cubitt Alert component with different variants: default, destructive, info, warning, and success. Each example shows a typical use case for displaying user feedback.

```typescript
<Alert variant="default">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
</Alert>
```

```typescript
<Alert variant="info">
  <Terminal />
  <AlertTitle>New features available</AlertTitle>
  <AlertDescription>
    We've added new components to the library. Check out the latest documentation for details.
  </AlertDescription>
</Alert>
```

```typescript
<Alert variant="destructive">
  <Terminal />
  <AlertTitle>Unable to process your payment</AlertTitle>
  <AlertDescription>
    Please verify your billing information and try again.
  </AlertDescription>
</Alert>
```

```typescript
<Alert variant="warning">
  <Terminal />
  <AlertTitle>Storage space running low</AlertTitle>
  <AlertDescription>
    You're using 85% of your available storage. Consider upgrading your plan or deleting unused files.
  </AlertDescription>
</Alert>
```

```typescript
<Alert variant="success">
  <Terminal />
  <AlertTitle>Successfully deployed</AlertTitle>
  <AlertDescription>
    Your application has been deployed to production. All systems are running normally.
  </AlertDescription>
</Alert>
```

--------------------------------

### Install NuqsProvider for URL State Management

Source: https://cubitt-docs.vercel.app/guides/url-state

Wrap your application with NuqsProvider in the root layout to enable URL state management for Cubitt components. This is a necessary setup step for the feature to work across your application.

```tsx
// app/layout.tsx
import { NuqsProvider } from "@tilt-legal/cubitt-components";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NuqsProvider>{children}</NuqsProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Stepper Examples

Source: https://cubitt-docs.vercel.app/components/stepper

Demonstrates various configurations of the Stepper component, including basic usage with titles and descriptions, vertical orientation, mixed elements, progress bar style, and URL state synchronization.

```javascript
1
### Step One
Desc for step one
2
### Step Two
Desc for step two
3
### Step Three
Desc for step three
```

```javascript
2
Shuffle
```

```javascript
1
### Step One
2
### Step Two
3
### Step Three
4
### Step Four
```

```javascript
1
### Account
2
### Profile
3
### Settings
```

--------------------------------

### URL State Management Example

Source: https://cubitt-docs.vercel.app/components/pagination

Demonstrates how to implement URL state management for the Pagination component. This requires client-side rendering.

```javascript
import { Pagination, PaginationContent, PaginationLink, PaginationRoot } from "@cubitt/react";

function MyPaginatedComponent() {
  const [page, setPage] = React.useState(1);
  const totalPages = 10;

return (
    <PaginationRoot
      currentPage={page}
      totalPages={totalPages}
      onPageChange={setPage}
      paramName="page" // Syncs with URL parameter 'page'
      shallow={true} // Uses shallow routing
    >
      <PaginationContent>
        <PaginationLink href="#" onClick={() => setPage(page - 1)} disabled={page === 1}>Previous</PaginationLink>
        {[...Array(totalPages)].map((_, index) => (
          <PaginationLink
            key={index + 1}
            isActive={index + 1 === page}
            onClick={() => setPage(index + 1)}
          >
            {index + 1}
          </PaginationLink>
        ))}
        <PaginationLink href="#" onClick={() => setPage(page + 1)} disabled={page === totalPages}>Next</PaginationLink>
      </PaginationContent>
    </PaginationRoot>
  );
}
```

--------------------------------

### Tabs Component Usage Examples

Source: https://cubitt-docs.vercel.app/components/tabs

Illustrates various configurations and states of the Tabs component, including size, orientation, disabled state, animations, and URL state synchronization.

```javascript
// Example for Sizes
// <Tabs size="lg">...</Tabs>

// Example for Vertical orientation
// <Tabs orientation="vertical">...</Tabs>

// Example for Direction
// <Tabs dir="rtl">...</Tabs>

// Example for Disabled state
// <Tabs><TabsTrigger value="account" disabled>Account</TabsTrigger>...</Tabs>

// Example for Height Animation
// <Tabs animationPreset="scale">...</Tabs>

// Example for URL State
// <Tabs paramName="demo-tab" value={currentTab} onValueChange={setCurrentTab}>...</Tabs>
```

--------------------------------

### Label Component Examples

Source: https://cubitt-docs.vercel.app/components/label

Illustrates various use cases and configurations for the Label component, including association with input fields, switches, select dropdowns, and textareas. It also showcases different size and orientation options.

```html
Email
```

```html
Enable notifications
```

```html
Accept terms and conditions
```

```html
Vertical orientation
Horizontal orientation
```

```html
Country
Select a country
```

```html
Message
```

--------------------------------

### Mime Type Icon Examples

Source: https://cubitt-docs.vercel.app/components/mime-type

Provides visual examples of the MimeTypeIcon component in action, showcasing its ability to display icons for various file types (PDF, DOC, JPEG, ZIP, XLSX, PPTX, MP4, RAR) using both MIME types and file names, as well as demonstrating different size variations and a file list integration.

```html

<MimeTypeIcon mimeType="application/pdf" />
<MimeTypeIcon mimeType="application/msword" />
<MimeTypeIcon mimeType="image/jpeg" />
<MimeTypeIcon mimeType="application/zip" />
```

```html

<MimeTypeIcon fileName="report.xlsx" />
<MimeTypeIcon fileName="slides.pptx" />
<MimeTypeIcon fileName="video.mp4" />
<MimeTypeIcon fileName="archive.rar" />
```

```html

<MimeTypeIcon mimeType="application/pdf" size="small" />
<MimeTypeIcon mimeType="application/pdf" />
<MimeTypeIcon mimeType="application/pdf" size="large" />
<MimeTypeIcon mimeType="application/pdf" size="extra-large" />
```

```html

<div>
  <MimeTypeIcon mimeType="application/pdf" /> contract.pdf 2.4 MB
</div>
<div>
  <MimeTypeIcon fileName="budget.xlsx" /> budget.xlsx 1.2 MB
</div>
<div>
  <MimeTypeIcon fileName="presentation.pptx" /> presentation.pptx 5.8 MB
</div>
<div>
  <MimeTypeIcon mimeType="image/png" /> logo.png 384 KB
</div>
<div>
  <MimeTypeIcon mimeType="application/zip" /> backup.zip 12.5 MB
</div>
```

--------------------------------

### SelectionToolbar Usage Example

Source: https://cubitt-docs.vercel.app/data-table/selection-toolbar

Demonstrates how to import and use the SelectionToolbar component with various action types like edit, archive, and delete. It includes configuration for action labels, icons, confirmation messages, and success messages.

```typescript
import { SelectionToolbar } from "@tilt-legal/cubitt-components";

function MyToolbar() {
  const actions = [
    {
      id: "edit",
      label: "Edit",
      icon: PenWriting,
      onClick: () => {},
      successMessage: "Items updated successfully",
    },
    {
      id: "archive",
      label: "Archive",
      icon: Archive,
      onClick: () => {},
      successMessage: "Items archived",
    },
    {
      id: "delete",
      label: "Delete",
      icon: Trash2,
      variant: "destructive" as const,
      confirmationMessage: `Are you sure you want to delete these items?`,
      confirmText: "Delete",
      cancelText: "Cancel",
      onClick: () => {},
      successMessage: "Items deleted successfully",
    },
  ];
  return (
    <SelectionToolbar
      selectedCount={selectedCount}
      totalCount={totalCount}
      actions={actions}
      onClear={() => setSelectedCount(0)}
      position="container"
    />
  );
}
```

--------------------------------

### DataTableV2 Usage Example

Source: https://cubitt-docs.vercel.app/data-table/overview

Demonstrates how to import and use the DataTableV2 component with custom data and column definitions. Requires '@tilt-legal/cubitt-components'.

```typescript
import { DataTableV2, ColumnDef } from "@tilt-legal/cubitt-components";

// Define your data type
type Employee = {
  id: string;
  name: string;
  email: string;
  role: string;
  status: "Active" | "Inactive";
};

// Define your columns
const columns: ColumnDef<Employee>[] = [
  {
    header: "Name",
    accessorKey: "name",
  },
  {
    header: "Email",
    accessorKey: "email",
  },
  {
    header: "Role",
    accessorKey: "role",
  },
  {
    header: "Status",
    accessorKey: "status",
  },
];

// Basic table
function MyTable() {
  return <DataTableV2 data={employees} columns={columns} />;
}
```

--------------------------------

### Cubitt Card with Actions Example

Source: https://cubitt-docs.vercel.app/components/card

Demonstrates how to use `CardAction` within the Cubitt Card component's header to include contextual buttons or controls.

```typescript
Card(
  <CardHeader>
    <CardTitle>Notification Settings</CardTitle>
    <CardDescription>Choose what you want to be notified about</CardDescription>
    <CardAction>Push notifications</CardAction>
    <CardAction>Email notifications</CardAction>
  </CardHeader>
)
```

--------------------------------

### Tooltip Usage

Source: https://cubitt-docs.vercel.app/components/tooltip

Demonstrates how to use the Tooltip component from the @tilt-legal/cubitt-components library. It requires importing Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, and Button components. The example shows a button that triggers a tooltip with custom content on hover.

```javascript
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  Button,
} from "@tilt-legal/cubitt-components";
```

```javascript
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="secondary">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

--------------------------------

### Button Component Usage

Source: https://cubitt-docs.vercel.app/components/button

Demonstrates how to import and use the Button component from the '@components/ui/button' module. Includes examples for basic usage and using the 'asChild' prop to render a link as a button.

```typescript
import { Button } from "@/components/ui/button";
```

```typescript
<Button variant="outline">Button</Button>
```

```typescript
import { Link } from "next/link";
import { Button } from "@/components/ui/button";

export function LinkAsButton() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  );
}
```

--------------------------------

### Cubitt Table Component Usage

Source: https://cubitt-docs.vercel.app/components/table

Demonstrates how to import and use the Table component from the @tilt-legal/cubitt-components library to display tabular data. Includes setup for Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, and TableRow.

```javascript
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@tilt-legal/cubitt-components";
```

```html
<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

--------------------------------

### Cubitt Packages Overview

Source: https://cubitt-docs.vercel.app/introduction

Lists the available Cubitt packages, their descriptions, and their publishing status. This includes icon components, core React components, and brand assets.

```markdown
Package | Description | Status  
---|---|---  
[@tilt-legal/cubitt-icons](https://cubitt-docs.vercel.app/packages/icons) | React SVG icon components | ✅ Published  
[@tilt-legal/cubitt-components](https://cubitt-docs.vercel.app/packages/components) | Core React components | ✅ Published  
[@tilt-legal/cubitt-logos](https://cubitt-docs.vercel.app/packages/logos) | Brand assets and logos | ✅ Published  
```

--------------------------------

### Cubitt Checkbox Examples

Source: https://cubitt-docs.vercel.app/components/checkbox

Provides examples of different Checkbox states: default, checked by default, and disabled.

```javascript
// Default checkbox
<Checkbox />

// Checked by default
<Checkbox defaultChecked={true} />

// Disabled checkbox
<Checkbox disabled />
```

--------------------------------

### Cubitt Packages Overview

Source: https://cubitt-docs.vercel.app/index

Lists the available Cubitt packages, their descriptions, and their published status. This includes icon components, core React components, and brand assets.

--------------------------------

### Cubitt Input Component Usage

Source: https://cubitt-docs.vercel.app/components/input

Demonstrates the basic import and usage of the Input component from the '@tilt-legal/cubitt-components' library.

```javascript
import { Input } from "@tilt-legal/cubitt-components";

<Input placeholder="Enter your email" />
```

--------------------------------

### DataTableV2 Pagination Example

Source: https://cubitt-docs.vercel.app/data-table/features

Shows a basic table structure with pagination controls, indicating the presence of multiple pages and navigation elements.

```javascript
Name | Email | Role | Department | Status  
---|---|---|---|---
John Doe 1 | john.doe1@example.com | Developer | Engineering | Active  
Jane Smith 2 | jane.smith2@example.com | Designer | Design | Active  
Bob Johnson 3 | bob.johnson3@example.com | Manager | Engineering | Inactive  
Alice Brown 4 | alice.brown4@example.com | Analyst | Marketing | Pending  
Charlie Wilson 5 | charlie.wilson5@example.com | Developer | Engineering | Active  
  *   * 1
  * 2
  * 3
  * 4
  * 5
  * 
```

--------------------------------

### Switch Usage Patterns and Guidelines

Source: https://cubitt-docs.vercel.app/components/switch

Provides guidance on how and when to use the Switch component, including best practices for binary states, immediate effects, settings, labeling, layout, content, and visual design.

```apidoc
Usage Patterns:
  - Binary states: Use Switch for clear on/off, enable/disable, or show/hide toggles.
  - Immediate effect: Use when the change takes effect immediately (unlike checkboxes in forms).
  - Settings and preferences: Ideal for user preference toggles and configuration options.
  - Clear labeling: Always provide descriptive labels that indicate what the switch controls.

When to Use Switch vs Checkbox:
  - Switch: For settings that take immediate effect and have a clear on/off state.
  - Checkbox: For form submissions, multiple selections, or actions that require confirmation.

Layout Guidelines:
  - Label association: Always use proper `id` and `htmlFor` attributes for accessibility.
  - Consistent positioning: Place switches consistently on the right side of labels in settings.
  - Spacing: Use appropriate spacing between switches and their labels (`gap-2` or `gap-3`).
  - Grouping: Group related switches together with clear section headings.

Content Guidelines:
  - Action-oriented labels: Use labels that clearly describe what the switch does.
  - Positive framing: Frame labels positively ("Enable notifications" vs "Disable notifications").
  - Helpful descriptions: Provide additional context for complex or potentially confusing settings.
  - Consistent terminology: Use consistent language across similar switches.

Visual Design:
  - Card layouts: Consider wrapping switches in cards for complex settings interfaces.
  - Visual feedback: Use hover states and visual cues to indicate interactivity.
  - State indication: Ensure checked and unchecked states are visually distinct.
  - Focus indicators: Maintain clear focus indicators for keyboard navigation.
```

--------------------------------

### Toggle Component Usage

Source: https://cubitt-docs.vercel.app/components/toggle

Demonstrates the basic import and usage of the Toggle component.

```javascript
import { Toggle } from "@tilt-legal/cubitt-components";
```

```javascript
<Toggle />
```

--------------------------------

### Accordion Component Usage

Source: https://cubitt-docs.vercel.app/components/accordion

Demonstrates how to import and use the Accordion component from the '@tilt-legal/cubitt-components' library. It shows a basic setup with a single, collapsible item.

```javascript
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@tilt-legal/cubitt-components";
```

```jsx
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Cubitt Logos Usage

Source: https://cubitt-docs.vercel.app/core/logos

Provides examples of how to import and use Mobius and Tilt logos in your project. Demonstrates different variants, colors, and sizes.

```javascript
import { MobiusLogo, TiltLogo } from "@tilt-legal/cubitt-logos";
// Mobius full logo with gradient
<MobiusLogo variant="full" color="gradient" size="4rem" />
// Mobius mark (square) with mono color
<MobiusLogo variant="mark" color="mono" size="3rem" />
// Tilt full logo
<TiltLogo variant="full" size="6rem" />
// Tilt mark (square)
<TiltLogo variant="mark" size="3rem" />
```

--------------------------------

### Select Usage Patterns

Source: https://cubitt-docs.vercel.app/components/select

Guidelines on how to effectively use the Select component for single selection, categorization, and visual separation.

```APIDOC
Usage Patterns:
  - Single selection: Use Select for choosing one option from a list
  - Categorization: Use SelectGroup and SelectLabel to organize related options
  - Visual separation: Use SelectSeparator to create logical groupings
  - Placeholder text: Always provide helpful placeholder text to guide users
```

--------------------------------

### Cubitt Tech Stack

Source: https://cubitt-docs.vercel.app/introduction

Details the technology stack used for Cubitt, including package management, build tools, development environment, versioning, publishing, and CI/CD.

```markdown
  * **Package Management** : pnpm + Workspaces
  * **Build Tools** : Turbo + TypeScript (tsc)
  * **Development** : TypeScript + React
  * **Versioning** : Changesets
  * **Publishing** : GitHub Packages (private)
  * **CI/CD** : GitHub Actions
```

--------------------------------

### Cubitt Card with Inlay Example

Source: https://cubitt-docs.vercel.app/components/card

Illustrates the use of `CardInlay` within the Cubitt Card component to create visual separation for nested content or settings.

```typescript
Card(
  <CardHeader>
    <CardTitle>Settings</CardTitle>
    <CardDescription>Manage your preferences</CardDescription>
  </CardHeader>,
  <CardInlay>
    <CardContent>
      Email notifications
      Marketing emails
    </CardContent>
  </CardInlay>,
  <CardFooter>
    <CardAction>Save Settings</CardAction>
  </CardFooter>
)
```

--------------------------------

### Stepper Component Basic Usage

Source: https://cubitt-docs.vercel.app/components/stepper

Demonstrates the basic import and usage of the Stepper component and its related elements for creating a multi-step process.

```javascript
import {
  Stepper,
  StepperIndicator,
  StepperItem,
  StepperTitle,
  StepperTrigger,
} from "@tilt-legal/cubitt-components";
```

```javascript
<Stepper defaultValue={1}>
  <StepperItem step={1}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Step One</StepperTitle>
    </StepperTrigger>
  </StepperItem>
</Stepper>
```

--------------------------------

### URL State Management Checkbox

Source: https://cubitt-docs.vercel.app/components/checkbox

An example of a checkbox that synchronizes its state with a URL parameter, enabling state persistence across page reloads or sharing.

```javascript
import React from 'react';
import { Checkbox } from '@your-ui-library/checkbox';

function UrlStateCheckbox() {
  return (
    <Checkbox paramName="demo-terms" shallow>
      Accept terms and conditions
    </Checkbox>
  );
}
```

--------------------------------

### URL State Best Practices: Parameter Naming

Source: https://cubitt-docs.vercel.app/guides/url-state

Demonstrates the importance of using descriptive parameter names for better URL state management.

```javascript
// Good: Clear what the param represents
<Input paramName="productSearch" />
// Bad: Too generic
<Input paramName="q" />
```

--------------------------------

### Avatar Group Examples

Source: https://cubitt-docs.vercel.app/components/avatar-group

Illustrates different ways to use the Avatar Group component, including variations like 'With Count' and 'Inverted Overlap'.

```jsx
// Example for 'With Count'
<AvatarGroup>
  <Avatar name="Agnes") />
  <Avatar name="Bert") />
  <Avatar name="Cody" count={3} />
</AvatarGroup>

// Example for 'Inverted Overlap'
<AvatarGroup invertOverlap>
  <Avatar name="Agnes") />
  <Avatar name="Bert") />
  <Avatar name="Cody" />
</AvatarGroup>
```

--------------------------------

### Cubitt Pagination Component Usage

Source: https://cubitt-docs.vercel.app/components/pagination

Demonstrates how to import and use the basic Pagination component from the @tilt-legal/cubitt-components library. It shows the necessary imports and the root component with current and total page numbers.

```javascript
import {
  Pagination,
  PaginationRoot,
  PaginationContent,
  PaginationLink,
} from "@tilt-legal/cubitt-components";
```

```javascript
<PaginationRoot currentPage={1} totalPages={10}>
  {/* Pagination items will be automatically rendered */}
</PaginationRoot>
```

--------------------------------

### DataTable Filter Usage

Source: https://cubitt-docs.vercel.app/data-table/filter

Demonstrates how to import and use the DataTableFilter and DataTableV2 components from the @tilt-legal/cubitt-components library. Includes setup for client-side filtering with createTSTColumns and createTSTFilters.

```javascript
import {
  useDataTableFilters,
  DataTableFilter,
  ColumnConfig,
  // For client-side filtering only:
  createTSTColumns,
  createTSTFilters,
} from "@tilt-legal/cubitt-components";
```

```javascript
<DataTableFilter
  columns={columns}
  filters={filters}
  actions={actions}
  strategy="client"
/>
<DataTableV2
  data={data}
  columns={tstColumns}
  columnFilters={tstFilters}
  enableFiltering
  enableSorting
/>
```

--------------------------------

### Cubitt Select Component Usage

Source: https://cubitt-docs.vercel.app/components/select

Demonstrates the basic import and usage of the Cubitt Select component, including its various sub-components like SelectTrigger, SelectContent, and SelectItem.

```javascript
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@tilt-legal/cubitt-components";
```

```javascript
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>
```

--------------------------------

### Controlled Pagination Example

Source: https://cubitt-docs.vercel.app/data-table/features

Demonstrates how to control pagination state in the DataTableV2 component using React's useState hook. This allows for external management of the current page and page size.

```javascript
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 10,
});
<DataTableV2
  data={data}
  columns={columns}
  enablePagination
  pagination={pagination}
  onPaginationChange={setPagination}
/>;
```

--------------------------------

### Cubitt Tech Stack

Source: https://cubitt-docs.vercel.app/index

Details the technology stack used for Cubitt, covering package management, build tools, development environment, versioning, publishing, and CI/CD.

--------------------------------

### React Memory Management for Data Tables

Source: https://cubitt-docs.vercel.app/data-table/advanced

Provides examples of memory management techniques in React Data Tables, including cleaning up selections when data changes and limiting the selection size to maintain performance.

```javascript
// Clean up selections when data changes
useEffect(() => {
  if (dataVersion !== previousDataVersion) {
    setSelection({});
  }
}, [dataVersion, previousDataVersion]);
// Limit selection size for performance
const maxSelection = 1000;
const handleSelectionChange = useCallback(
  (newSelection: IdRowSelectionState) => {
    const selectedCount = Object.keys(newSelection).length;
    if (selectedCount > maxSelection) {
      toast.error(`Maximum ${maxSelection} items can be selected`);
      return;
    }
    setSelection(newSelection);
  },
  []
);
```

--------------------------------

### Select Size Guidelines

Source: https://cubitt-docs.vercel.app/components/select

Recommendations for using different sizes of the Select component based on layout and space constraints.

```APIDOC
Size Guidelines:
  - Default: Use for most standard forms and interfaces
  - Small (sm): Use in compact layouts, tables, or when space is limited
  - Width: Consider setting appropriate widths with className (e.g., `max-w-3xs`, `w-full`)
```

--------------------------------

### Cubitt Component Documentation Links

Source: https://cubitt-docs.vercel.app/introduction

Provides links to the documentation for various Cubitt UI components, such as Accordion, Alert, Button, Card, and more.

```html
[Accordion](https://cubitt-docs.vercel.app/components/accordion)[Alert](https://cubitt-docs.vercel.app/components/alert)[Alert Dialog](https://cubitt-docs.vercel.app/components/alert-dialog)[Avatar](https://cubitt-docs.vercel.app/components/avatar)[Avatar Group](https://cubitt-docs.vercel.app/components/avatar-group)[Badge](https://cubitt-docs.vercel.app/components/badge)[Breadcrumb](https://cubitt-docs.vercel.app/components/breadcrumb)[Button](https://cubitt-docs.vercel.app/components/button)[Card](https://cubitt-docs.vercel.app/components/card)[Checkbox](https://cubitt-docs.vercel.app/components/checkbox)[Dialog](https://cubitt-docs.vercel.app/components/dialog)[Feedback Button](https://cubitt-docs.vercel.app/components/feedback-button)[Form](https://cubitt-docs.vercel.app/components/form)[Input](https://cubitt-docs.vercel.app/components/input)[Label](https://cubitt-docs.vercel.app/components/label)[Mime Type Icon](https://cubitt-docs.vercel.app/components/mime-type)[Pagination](https://cubitt-docs.vercel.app/components/pagination)[Radio Group](https://cubitt-docs.vercel.app/components/radio-group)[Segmented Control](https://cubitt-docs.vercel.app/components/segmented-control)[Select](https://cubitt-docs.vercel.app/components/select)[Sonner](https://cubitt-docs.vercel.app/components/sonner)[Stepper](https://cubitt-docs.vercel.app/components/stepper)[Switch](https://cubitt-docs.vercel.app/components/switch)[Table](https://cubitt-docs.vercel.app/components/table)[Tabs](https://cubitt-docs.vercel.app/components/tabs)[Textarea](https://cubitt-docs.vercel.app/components/textarea)[Toggle](https://cubitt-docs.vercel.app/components/toggle)[Toggle Group](https://cubitt-docs.vercel.app/components/toggle-group)[Tooltip](https://cubitt-docs.vercel.app/components/tooltip)
```

--------------------------------

### Mime Type Icon Usage

Source: https://cubitt-docs.vercel.app/components/mime-type

Demonstrates how to import and use the MimeTypeIcon component from the Cubitt library, showing examples of rendering icons based on MIME type or file name, and applying custom classes.

```javascript
import { MimeTypeIcon } from "@tilt-legal/cubitt-components";
```

```javascript
<MimeTypeIcon mimeType="application/pdf" />
```

```javascript
<MimeTypeIcon fileName="document.pdf" />
```

```javascript
<MimeTypeIcon mimeType="image/png" className="size-6" />
```

--------------------------------

### Stepper with URL State Management (nuqs)

Source: https://cubitt-docs.vercel.app/components/stepper

Illustrates how to synchronize the Stepper's state with the URL using the nuqs library, including default and advanced configuration options.

```javascript
// Current step synced with ?step=2
<Stepper defaultValue={1} paramName="step">
  <StepperItem step={1}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Account Setup</StepperTitle>
    </StepperTrigger>
  </StepperItem>
  <StepperItem step={2}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Profile Info</StepperTitle>
    </StepperTrigger>
  </StepperItem>
  <StepperItem step={3}>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle>Complete</StepperTitle>
    </StepperTrigger>
  </StepperItem>
</Stepper>
```

```javascript
// Advanced options:
<Stepper
  paramName="wizard"
  shallow={true}           // Use shallow routing (no page refresh)
  clearOnDefault={true}    // Remove param when value equals default
  throttleMs={300}         // Debounce URL updates
  defaultValue={1}
>
  {/* ... */}
</Stepper>
```

--------------------------------

### Cubitt Components Overview

Source: https://cubitt-docs.vercel.app/packages/icons

This section lists all available UI components in the Cubitt library, such as Accordion, Alert, Button, Card, Input, Table, and more. Each component has its own documentation page detailing its usage and API.

```react
import { Accordion } from '@cubitt/components/accordion';
import { Alert } from '@cubitt/components/alert';
import { Button } from '@cubitt/components/button';
import { Card } from '@cubitt/components/card';
import { Input } from '@cubitt/components/input';
import { Table } from '@cubitt/components/table';
```