create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/snippet.md

@@ -0,0 +1,64 @@
+# Snippet
+
+Lightweight inline code display for terminal commands and short code references.
+
+The `Snippet` component provides a lightweight way to display terminal commands and short code snippets with copy functionality. Built on top of InputGroup, it's designed for brief code references in text.
+
+See `scripts/snippet.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add snippet
+```
+
+## Features
+
+- Composable architecture with InputGroup
+- Optional prefix text (e.g., `$` for terminal commands)
+- Built-in copy button
+- Compact design for chat/markdown
+
+## Examples
+
+### Without Prefix
+
+See `scripts/snippet-plain.tsx` for this example.
+
+## Props
+
+### `<Snippet />`
+
+| Prop       | Type                                      | Default  | Description                                          |
+| ---------- | ----------------------------------------- | -------- | ---------------------------------------------------- |
+| `code`     | `string`                                  | Required | The code content to display.                         |
+| `children` | `React.ReactNode`                         | -        | Child elements like SnippetAddon, SnippetInput, etc. |
+| `...props` | `React.ComponentProps<typeof InputGroup>` | -        | Spread to the InputGroup component.                  |
+
+### `<SnippetAddon />`
+
+| Prop       | Type                                           | Default | Description                              |
+| ---------- | ---------------------------------------------- | ------- | ---------------------------------------- |
+| `...props` | `React.ComponentProps<typeof InputGroupAddon>` | -       | Spread to the InputGroupAddon component. |
+
+### `<SnippetText />`
+
+| Prop       | Type                                          | Default | Description                             |
+| ---------- | --------------------------------------------- | ------- | --------------------------------------- |
+| `...props` | `React.ComponentProps<typeof InputGroupText>` | -       | Spread to the InputGroupText component. |
+
+### `<SnippetInput />`
+
+| Prop       | Type                                                  | Default | Description                                                                        |
+| ---------- | ----------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
+| `...props` | `Omit<React.ComponentProps<typeof InputGroupInput>, ` | -       | Spread to the InputGroupInput component. Value and readOnly are set automatically. |
+
+### `<SnippetCopyButton />`
+
+| Prop       | Type                                            | Default | Description                               |
+| ---------- | ----------------------------------------------- | ------- | ----------------------------------------- |
+| `onCopy`   | `() => void`                                    | -       | Callback fired after a successful copy.   |
+| `onError`  | `(error: Error) => void`                        | -       | Callback fired if copying fails.          |
+| `timeout`  | `number`                                        | `2000`  | How long to show the copied state (ms).   |
+| `children` | `React.ReactNode`                               | -       | Custom button content.                    |
+| `...props` | `React.ComponentProps<typeof InputGroupButton>` | -       | Spread to the InputGroupButton component. |

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/sources.md

@@ -0,0 +1,193 @@
+# Sources
+
+A component that allows a user to view the sources or citations used to generate a response.
+
+The `Sources` component allows a user to view the sources or citations used to generate a response.
+
+See `scripts/sources.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add sources
+```
+
+## Usage with AI SDK
+
+Build a simple web search agent with Perplexity Sonar.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { Source, Sources, SourcesContent, SourcesTrigger } from "@/components/ai-elements/sources";
+import {
+  Input,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
+import { useState } from "react";
+import { DefaultChatTransport } from "ai";
+
+const SourceDemo = () => {
+  const [input, setInput] = useState("");
+  const { messages, sendMessage, status } = useChat({
+    transport: new DefaultChatTransport({
+      api: "/api/sources",
+    }),
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (input.trim()) {
+      sendMessage({ text: input });
+      setInput("");
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex-1 overflow-auto mb-4">
+          <Conversation>
+            <ConversationContent>
+              {messages.map((message) => (
+                <div key={message.id}>
+                  {message.role === "assistant" && (
+                    <Sources>
+                      <SourcesTrigger
+                        count={message.parts.filter((part) => part.type === "source-url").length}
+                      />
+                      {message.parts.map((part, i) => {
+                        switch (part.type) {
+                          case "source-url":
+                            return (
+                              <SourcesContent key={`${message.id}-${i}`}>
+                                <Source
+                                  key={`${message.id}-${i}`}
+                                  href={part.url}
+                                  title={part.url}
+                                />
+                              </SourcesContent>
+                            );
+                        }
+                      })}
+                    </Sources>
+                  )}
+                  <Message from={message.role} key={message.id}>
+                    <MessageContent>
+                      {message.parts.map((part, i) => {
+                        switch (part.type) {
+                          case "text":
+                            return (
+                              <MessageResponse key={`${message.id}-${i}`}>
+                                {part.text}
+                              </MessageResponse>
+                            );
+                          default:
+                            return null;
+                        }
+                      })}
+                    </MessageContent>
+                  </Message>
+                </div>
+              ))}
+            </ConversationContent>
+            <ConversationScrollButton />
+          </Conversation>
+        </div>
+
+        <Input onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
+          <PromptInputTextarea
+            value={input}
+            placeholder="Ask a question and search the..."
+            onChange={(e) => setInput(e.currentTarget.value)}
+            className="pr-12"
+          />
+          <PromptInputSubmit
+            status={status === "streaming" ? "streaming" : "ready"}
+            disabled={!input.trim()}
+            className="absolute bottom-1 right-1"
+          />
+        </Input>
+      </div>
+    </div>
+  );
+};
+
+export default SourceDemo;
+```
+
+Add the following route to your backend:
+
+```tsx title="api/chat/route.ts"
+import { convertToModelMessages, streamText, UIMessage } from "ai";
+import { perplexity } from "@ai-sdk/perplexity";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: "perplexity/sonar",
+    system:
+      "You are a helpful assistant. Keep your responses short (< 100 words) unless you are asked for more details. ALWAYS USE SEARCH.",
+    messages: await convertToModelMessages(messages),
+  });
+
+  return result.toUIMessageStreamResponse({
+    sendSources: true,
+  });
+}
+```
+
+## Features
+
+- Collapsible component that allows a user to view the sources or citations used to generate a response
+- Customizable trigger and content components
+- Support for custom sources or citations
+- Responsive design with mobile-friendly controls
+- Clean, modern styling with customizable themes
+
+## Examples
+
+### Custom rendering
+
+See `scripts/sources-custom.tsx` for this example.
+
+## Props
+
+### `<Sources />`
+
+| Prop       | Type                                   | Default | Description                                 |
+| ---------- | -------------------------------------- | ------- | ------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the root div. |
+
+### `<SourcesTrigger />`
+
+| Prop       | Type                                              | Default  | Description                                                     |
+| ---------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |
+| `count`    | `number`                                          | Required | The number of sources to display in the trigger.                |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | -        | Any other props are spread to the CollapsibleTrigger component. |
+
+### `<SourcesContent />`
+
+| Prop       | Type                                   | Default | Description                                          |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the content container. |
+
+### `<Source />`
+
+| Prop       | Type                                            | Default | Description                                       |
+| ---------- | ----------------------------------------------- | ------- | ------------------------------------------------- |
+| `...props` | `React.AnchorHTMLAttributes<HTMLAnchorElement>` | -       | Any other props are spread to the anchor element. |

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/speech-input.md

@@ -0,0 +1,160 @@
+# Speech Input
+
+A button component that captures voice input and converts it to text, with cross-browser support.
+
+The `SpeechInput` component provides an easy-to-use interface for capturing voice input in your application. It uses the Web Speech API for real-time transcription in supported browsers (Chrome, Edge), and falls back to MediaRecorder with an external transcription service for browsers that don't support Web Speech API (Firefox, Safari).
+
+See `scripts/speech-input.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add speech-input
+```
+
+## Features
+
+- Built on Web Speech API (SpeechRecognition) with MediaRecorder fallback
+- Cross-browser support (Chrome, Edge, Firefox, Safari)
+- Continuous speech recognition with interim results
+- Visual feedback with pulse animation when listening
+- Loading state during transcription processing
+- Automatic browser compatibility detection
+- Final transcript extraction and callbacks
+- Error handling and automatic state management
+- Extends shadcn/ui Button component
+- Full TypeScript support
+
+## Props
+
+### `<SpeechInput />`
+
+The component extends the shadcn/ui Button component, so all Button props are available.
+
+| Prop                    | Type                                   | Default | Description                                                                                                                                                                                |
+| ----------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `onTranscriptionChange` | `(text: string) => void`               | -       | Callback fired when final transcription text is available. Only fires for completed phrases, not interim results.                                                                          |
+| `onAudioRecorded`       | `(audioBlob: Blob) => Promise<string>` | -       | Callback for MediaRecorder fallback. Required for Firefox/Safari support. Receives recorded audio blob and should return transcribed text from an external service (e.g., OpenAI Whisper). |
+| `lang`                  | `string`                               | -       | Language for speech recognition.                                                                                                                                                           |
+| `...props`              | `React.ComponentProps<typeof Button>`  | -       | Any other props are spread to the Button component, including variant, size, disabled, etc.                                                                                                |
+
+## Behavior
+
+### Speech Recognition Modes
+
+The component automatically detects browser capabilities and uses the best available method:
+
+| Browser         | Mode           | Behavior                                               |
+| --------------- | -------------- | ------------------------------------------------------ |
+| Chrome, Edge    | Web Speech API | Real-time transcription, no server required            |
+| Firefox, Safari | MediaRecorder  | Records audio, sends to external transcription service |
+| Unsupported     | Disabled       | Button is disabled                                     |
+
+### Web Speech API Mode (Chrome, Edge)
+
+Uses the Web Speech API with the following configuration:
+
+- **Continuous**: Set to `true` to keep recognition active until manually stopped
+- **Interim Results**: Set to `true` to receive partial results during speech
+- **Language**: Configurable via `lang` prop, defaults to `"en-US"`
+
+### MediaRecorder Mode (Firefox, Safari)
+
+When the Web Speech API is unavailable, the component falls back to recording audio:
+
+1. Records audio using `MediaRecorder` API
+2. On stop, creates an audio blob (`audio/webm`)
+3. Calls `onAudioRecorded` with the blob
+4. Waits for transcription result
+5. Passes result to `onTranscriptionChange`
+
+**Note**: The `onAudioRecorded` prop is required for this mode to work. Without it, the button will be disabled in Firefox/Safari.
+
+### Transcription Processing
+
+The component only calls `onTranscriptionChange` with **final transcripts**. Interim results (Web Speech API) are ignored to prevent incomplete text from being processed.
+
+### Visual States
+
+- **Default State**: Standard button appearance with microphone icon
+- **Listening State**: Pulsing animation with accent colors to indicate active listening
+- **Processing State**: Loading spinner while waiting for transcription (MediaRecorder mode)
+- **Disabled State**: Button is disabled when no API is available or required props are missing
+
+### Lifecycle
+
+1. **Mount**: Detects available APIs and initializes appropriate mode
+2. **Click**: Toggles between listening/recording and stopped states
+3. **Stop (MediaRecorder)**: Processes audio and waits for transcription
+4. **Unmount**: Stops recognition/recording and releases microphone
+
+## Browser Support
+
+The component provides cross-browser support through a two-tier system:
+
+| Browser | API Used       | Requirements           |
+| ------- | -------------- | ---------------------- |
+| Chrome  | Web Speech API | None                   |
+| Edge    | Web Speech API | None                   |
+| Firefox | MediaRecorder  | `onAudioRecorded` prop |
+| Safari  | MediaRecorder  | `onAudioRecorded` prop |
+
+For full cross-browser support, provide the `onAudioRecorded` callback that sends audio to a transcription service like OpenAI Whisper, Google Cloud Speech-to-Text, or AssemblyAI.
+
+## Accessibility
+
+- Uses semantic button element via shadcn/ui Button
+- Visual feedback for listening state
+- Keyboard accessible (can be triggered with Space/Enter)
+- Screen reader friendly with proper button semantics
+
+## Usage with MediaRecorder Fallback
+
+To support Firefox and Safari, provide an `onAudioRecorded` callback that sends audio to a transcription service:
+
+```tsx
+const handleAudioRecorded = async (audioBlob: Blob): Promise<string> => {
+  const formData = new FormData();
+  formData.append("file", audioBlob, "audio.webm");
+  formData.append("model", "whisper-1");
+
+  const response = await fetch("https://api.openai.com/v1/audio/transcriptions", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
+    },
+    body: formData,
+  });
+
+  const data = await response.json();
+  return data.text;
+};
+
+<SpeechInput
+  onTranscriptionChange={(text) => console.log(text)}
+  onAudioRecorded={handleAudioRecorded}
+/>;
+```
+
+## Notes
+
+- Requires a secure context (HTTPS or localhost)
+- Browser may prompt user for microphone permission
+- Only final transcripts trigger the `onTranscriptionChange` callback
+- Language is configurable via the `lang` prop
+- Continuous recognition continues until button is clicked again
+- Errors are logged to console and automatically stop recognition/recording
+- MediaRecorder fallback requires the `onAudioRecorded` prop to be provided
+- Audio is recorded in `audio/webm` format for the MediaRecorder fallback
+
+## TypeScript
+
+The component includes full TypeScript definitions for the Web Speech API:
+
+- `SpeechRecognition`
+- `SpeechRecognitionEvent`
+- `SpeechRecognitionResult`
+- `SpeechRecognitionAlternative`
+- `SpeechRecognitionErrorEvent`
+
+These types are properly declared for both standard and webkit-prefixed implementations.

package/dist/templates/claude-config/app/.agents/skills/ai-elements/references/stack-trace.md

@@ -0,0 +1,218 @@
+# Stack Trace
+
+Displays formatted JavaScript/Node.js error stack traces with syntax highlighting and collapsible frames.
+
+The `StackTrace` component displays formatted JavaScript/Node.js error stack traces with clickable file paths, internal frame dimming, and collapsible content.
+
+See `scripts/stack-trace.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add stack-trace
+```
+
+## Usage with AI SDK
+
+Build an error display tool that shows stack traces from AI-generated code using the [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import {
+  StackTrace,
+  StackTraceHeader,
+  StackTraceError,
+  StackTraceErrorType,
+  StackTraceErrorMessage,
+  StackTraceActions,
+  StackTraceCopyButton,
+  StackTraceExpandButton,
+  StackTraceContent,
+  StackTraceFrames,
+} from "@/components/ai-elements/stack-trace";
+
+export default function Page() {
+  const { messages } = useChat({
+    api: "/api/run-code",
+  });
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      {messages.map((message) => {
+        const toolInvocations = message.parts?.filter((part) => part.type === "tool-invocation");
+
+        return toolInvocations?.map((tool) => {
+          if (tool.toolName === "runCode" && tool.result?.error) {
+            return (
+              <StackTrace key={tool.toolCallId} trace={tool.result.error} defaultOpen>
+                <StackTraceHeader>
+                  <StackTraceError>
+                    <StackTraceErrorType />
+                    <StackTraceErrorMessage />
+                  </StackTraceError>
+                  <StackTraceActions>
+                    <StackTraceCopyButton />
+                    <StackTraceExpandButton />
+                  </StackTraceActions>
+                </StackTraceHeader>
+                <StackTraceContent>
+                  <StackTraceFrames />
+                </StackTraceContent>
+              </StackTrace>
+            );
+          }
+          return null;
+        });
+      })}
+    </div>
+  );
+}
+```
+
+Add the following route to your backend:
+
+```tsx title="api/run-code/route.ts"
+import { streamText, tool } from "ai";
+import { z } from "zod";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: "openai/gpt-4o",
+    messages,
+    tools: {
+      runCode: tool({
+        description: "Execute JavaScript code and return any errors",
+        parameters: z.object({
+          code: z.string(),
+        }),
+        execute: async ({ code }) => {
+          try {
+            // Execute code in sandbox
+            eval(code);
+            return { success: true };
+          } catch (error) {
+            return { error: (error as Error).stack };
+          }
+        },
+      }),
+    },
+  });
+
+  return result.toDataStreamResponse();
+}
+```
+
+## Features
+
+- Parses standard JavaScript/Node.js stack trace format
+- Highlights error type in red
+- Dims internal frames (node_modules, node: paths)
+- Collapsible content with smooth animation
+- Copy full stack trace to clipboard
+- Clickable file paths with line/column numbers
+
+## Examples
+
+### Collapsed by Default
+
+See `scripts/stack-trace-collapsed.tsx` for this example.
+
+### Hide Internal Frames
+
+See `scripts/stack-trace-no-internal.tsx` for this example.
+
+## Props
+
+### `<StackTrace />`
+
+| Prop              | Type                                                     | Default | Description                                                                                   |
+| ----------------- | -------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `trace`           | `string`                                                 | -       | The raw stack trace string to parse and display.                                              |
+| `open`            | `boolean`                                                | -       | Controlled open state.                                                                        |
+| `defaultOpen`     | `boolean`                                                | `false` | Whether the content is expanded by default.                                                   |
+| `onOpenChange`    | `(open: boolean) => void`                                | -       | Callback when open state changes.                                                             |
+| `onFilePathClick` | `(path: string, line?: number, column?: number) => void` | -       | Callback when a file path is clicked. Receives the file path, line number, and column number. |
+| `children`        | `React.ReactNode`                                        | -       | Child elements (StackTraceHeader, StackTraceContent, etc.).                                   |
+| `className`       | `string`                                                 | -       | Additional CSS classes.                                                                       |
+| `...props`        | `React.HTMLAttributes<HTMLDivElement>`                   | -       | Any other props are spread to the root div.                                                   |
+
+### `<StackTraceHeader />`
+
+| Prop        | Type                                              | Default | Description                                                       |
+| ----------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                                 | -       | Header content (typically StackTraceError and StackTraceActions). |
+| `className` | `string`                                          | -       | Additional CSS classes.                                           |
+| `...props`  | `React.ComponentProps<typeof CollapsibleTrigger>` | -       | Any other props are spread to the CollapsibleTrigger.             |
+
+### `<StackTraceError />`
+
+| Prop        | Type                                   | Default | Description                                                               |
+| ----------- | -------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                      | -       | Error content (typically StackTraceErrorType and StackTraceErrorMessage). |
+| `className` | `string`                               | -       | Additional CSS classes.                                                   |
+| `...props`  | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div.                          |
+
+### `<StackTraceErrorType />`
+
+| Prop        | Type                                    | Default | Description                                              |
+| ----------- | --------------------------------------- | ------- | -------------------------------------------------------- |
+| `children`  | `React.ReactNode`                       | -       | Custom content. Defaults to the parsed error type (e.g., |
+| `className` | `string`                                | -       | Additional CSS classes.                                  |
+| `...props`  | `React.HTMLAttributes<HTMLSpanElement>` | -       | Any other props are spread to the span element.          |
+
+### `<StackTraceErrorMessage />`
+
+| Prop        | Type                                    | Default | Description                                           |
+| ----------- | --------------------------------------- | ------- | ----------------------------------------------------- |
+| `children`  | `React.ReactNode`                       | -       | Custom content. Defaults to the parsed error message. |
+| `className` | `string`                                | -       | Additional CSS classes.                               |
+| `...props`  | `React.HTMLAttributes<HTMLSpanElement>` | -       | Any other props are spread to the span element.       |
+
+### `<StackTraceActions />`
+
+| Prop        | Type                                   | Default | Description                                                                 |
+| ----------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                      | -       | Action buttons (typically StackTraceCopyButton and StackTraceExpandButton). |
+| `className` | `string`                               | -       | Additional CSS classes.                                                     |
+| `...props`  | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div.                            |
+
+### `<StackTraceCopyButton />`
+
+| Prop        | Type                                  | Default | Description                                                              |
+| ----------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `onCopy`    | `() => void`                          | -       | Callback fired after a successful copy.                                  |
+| `onError`   | `(error: Error) => void`              | -       | Callback fired if copying fails.                                         |
+| `timeout`   | `number`                              | `2000`  | How long to show the copied state (ms).                                  |
+| `children`  | `React.ReactNode`                     | -       | Custom content for the button. Defaults to copy/check icons.             |
+| `className` | `string`                              | -       | Additional CSS classes.                                                  |
+| `...props`  | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<StackTraceExpandButton />`
+
+| Prop        | Type                                   | Default | Description                                      |
+| ----------- | -------------------------------------- | ------- | ------------------------------------------------ |
+| `className` | `string`                               | -       | Additional CSS classes.                          |
+| `...props`  | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div. |
+
+### `<StackTraceContent />`
+
+| Prop        | Type                                              | Default | Description                                                                             |
+| ----------- | ------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `maxHeight` | `number`                                          | `400`   | Maximum height of the content area. Enables scrolling when content exceeds this height. |
+| `children`  | `React.ReactNode`                                 | -       | Content to display (typically StackTraceFrames).                                        |
+| `className` | `string`                                          | -       | Additional CSS classes.                                                                 |
+| `...props`  | `React.ComponentProps<typeof CollapsibleContent>` | -       | Any other props are spread to the CollapsibleContent.                                   |
+
+### `<StackTraceFrames />`
+
+| Prop                 | Type                                   | Default | Description                                                  |
+| -------------------- | -------------------------------------- | ------- | ------------------------------------------------------------ |
+| `showInternalFrames` | `boolean`                              | `true`  | Whether to show internal frames (node_modules, node: paths). |
+| `className`          | `string`                               | -       | Additional CSS classes.                                      |
+| `...props`           | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div.             |