## Overview [#overview]
The toolbar is fully compositional — compose `Files.Toolbar.Title`, `Files.Toolbar.Search`, `Files.Toolbar.Sort`, and other pieces inside `Files.Toolbar` in any order. Omit pieces you don't need, reorder them, or inject custom elements between them.
## Usage [#usage]
```tsx
import { Files } from "@tilt-legal/cubitt-components/composites";
```
```tsx
```
`Files.Toolbar.Title` includes `mr-auto` by default, which pushes all subsequent items to the right side of the toolbar.
## Examples [#examples]
### Default [#default]
Standard toolbar with all pieces including upload.
```tsx
import { Files } from "@tilt-legal/cubitt-components/composites";
export function Example() {
return (
);
}
```
### Size [#size]
The `size` prop controls the density of all toolbar items. Use `sm` for compact layouts, `md` (default) for standard density, or `lg` for touch interfaces.
```tsx
import { Files } from "@tilt-legal/cubitt-components/composites";
export function Example() {
return (
);
}
```
### With Custom Children [#with-custom-children]
Replace `Files.Toolbar.Title` with your own title and inject custom controls anywhere in the toolbar. This example replicates an attachment-picker-style toolbar with a source selector dropdown and a filter button.
```tsx
import {
Button,
Menu,
MenuContent,
MenuRadioGroup,
MenuRadioItem,
MenuTrigger,
} from "@tilt-legal/cubitt-components/primitives";
import { Files } from "@tilt-legal/cubitt-components/composites";
import { BarsFilter, ChevronDown } from "@tilt-legal/cubitt-icons/ui/outline";
const ATTACH_SOURCES = ["Files", "Instructions"];
export function Example() {
const [source, setSource] = useState("Files");
return (
Attach
);
}
```
## API Reference [#api-reference]
### Files.Toolbar [#filestoolbar]
Flex layout container for toolbar sub-components. Distributes the specified `size` to all child toolbar items for consistent density across buttons, inputs, and toggles.
| Prop | Type | Default | Description |
| ----------- | ---------------------- | ------------ | ------------------------------------------------------------------------------------------------------------ |
| `children` | `ReactNode` | **Required** | Toolbar items. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls the size of all toolbar items. Small (`sm`) for compact layouts, large (`lg`) for touch interfaces. |
| `className` | `string` | – | Additional CSS classes. |
### Files.Toolbar.Title [#filestoolbartitle]
Page heading with animated file count. Includes `mr-auto` to push subsequent items right.
| Prop | Type | Default | Description |
| ----------- | ----------- | --------- | ----------------------- |
| `children` | `ReactNode` | `"Files"` | Custom title text. |
| `className` | `string` | – | Additional CSS classes. |
### Files.Toolbar.Search [#filestoolbarsearch]
Debounced search input. Reads search state from context.
| Prop | Type | Default | Description |
| ----------- | ------------------------ | ----------- | ----------------------------------------------------------------------------------------- |
| `variant` | `"default" \| "compact"` | `"compact"` | `compact` collapses into an expandable icon button. `default` renders a full-width input. |
| `className` | `string` | – | Additional CSS classes. |
### Files.Toolbar.Sort [#filestoolbarsort]
Sort dropdown menu with Name, Size, Updated options. Toggles ascending/descending on re-click. Reads sort state from context.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ----------------------- |
| `className` | `string` | – | Additional CSS classes. |
### Files.Toolbar.ViewToggle [#filestoolbarviewtoggle]
Grid/list segmented toggle group. Reads view state from context.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ----------------------- |
| `className` | `string` | – | Additional CSS classes. |
### Files.Toolbar.PanelToggle [#filestoolbarpaneltoggle]
Toggle button for the details panel sidebar. Reads panel open state from context.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ----------------------- |
| `className` | `string` | – | Additional CSS classes. |
### Files.Toolbar.Upload [#filestoolbarupload]
Upload button with optional size limit enforcement and error toasts. Renders nothing when the `Files` root has `readOnly` set.
| Prop | Type | Default | Description |
| ----------- | ------------------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
| `onUpload` | `(files: File[]) => void` | **Required** | Upload handler. |
| `accept` | `MimeTypePatterns` | – | Passed to the native file input to filter the browser's file picker. No runtime validation is performed. |
| `maxSizeMB` | `MaxSizeMB` | `null` | Maximum file size in megabytes. `null` for unlimited. |
| `disabled` | `boolean` | `false` | Disables the upload button. |
| `className` | `string` | – | Additional CSS classes. |