diff --git a/docs/appkit/v0/.source-ref b/docs/appkit/v0/.source-ref deleted file mode 100644 index 6ca7fec..0000000 --- a/docs/appkit/v0/.source-ref +++ /dev/null @@ -1 +0,0 @@ -databricks/appkit@v0.23.0 (v0) diff --git a/docs/appkit/v0/_prerequisites.mdx b/docs/appkit/v0/_prerequisites.mdx deleted file mode 100644 index 5844c1d..0000000 --- a/docs/appkit/v0/_prerequisites.mdx +++ /dev/null @@ -1,4 +0,0 @@ -## Prerequisites - -- [Node.js](https://nodejs.org) v22+ environment with `npm` -- Databricks CLI (v0.295.0 or higher): install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial). diff --git a/docs/appkit/v0/api/appkit-ui/data/DataTable.mdx b/docs/appkit/v0/api/appkit-ui/data/DataTable.mdx deleted file mode 100644 index 4c6402c..0000000 --- a/docs/appkit/v0/api/appkit-ui/data/DataTable.mdx +++ /dev/null @@ -1,66 +0,0 @@ -# DataTable - -Production-ready data table with automatic data fetching and state management - -## Example - -```tsx -"use client"; - -import { DataTable } from "@databricks/appkit-ui/react"; - -export default function DataTableExample() { - return ( - - ); -} -``` - -## DataTable - -Production-ready data table with automatic data fetching and state management - -Features: - -- Automatic column generation from data structure -- Integrated with useAnalyticsQuery for data fetching -- Built-in loading, error, and empty states -- Dynamic filtering, sorting and pagination -- Column visibility controls -- Responsive design -- Supports opinionated mode (auto columns) and full-control mode (`children(table)`) - -**Source:** [`packages/appkit-ui/src/react/table/data-table.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/table/data-table.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ---------------------- | --------------------------------------------- | -------- | ------- | --------------------------------------------------------- | -| `queryKey` | `string` | ✓ | - | The query key to fetch the data | -| `parameters` | `Record` | ✓ | - | The parameters to pass to the query | -| `filterColumn` | `string` | | - | The column to filter by | -| `filterPlaceholder` | `string` | | - | Optional placeholder for the filter input | -| `transform` | `((data: any[]) => any[])` | | - | Optional function to transform data before creating table | -| `labels` | `DataTableLabels` | | - | Optional labels for the DataTable component | -| `ariaLabel` | `string` | | - | Optional accessibility label for the DataTable component | -| `testId` | `string` | | - | Optional test ID for the DataTable component | -| `className` | `string` | | - | Optional CSS class name for the DataTable component | -| `enableRowSelection` | `boolean` | | - | Enable row selection with checkboxes | -| `onRowSelectionChange` | `((rowSelection: RowSelectionState) => void)` | | - | Callback function to handle row selection changes | -| `children` | `((table: Table) => ReactNode)` | | - | Optional children for full control mode | -| `pageSize` | `number` | | - | Number of rows to display per page | -| `pageSizeOptions` | `number[]` | | - | Options for the page size selector | - -### Usage - -```tsx -import { DataTable } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/data/_category_.json b/docs/appkit/v0/api/appkit-ui/data/_category_.json deleted file mode 100644 index 693fb36..0000000 --- a/docs/appkit/v0/api/appkit-ui/data/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Data components", - "position": 3 -} diff --git a/docs/appkit/v0/api/appkit-ui/files/DirectoryList.mdx b/docs/appkit/v0/api/appkit-ui/files/DirectoryList.mdx deleted file mode 100644 index c241cec..0000000 --- a/docs/appkit/v0/api/appkit-ui/files/DirectoryList.mdx +++ /dev/null @@ -1,35 +0,0 @@ -# DirectoryList - -Card-wrapped directory listing with loading, error, and empty states - -## DirectoryList - -Card-wrapped directory listing with loading, error, and empty states - -**Source:** [`packages/appkit-ui/src/react/file-browser/directory-list.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/file-browser/directory-list.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| -------------------- | ------------------------------------------------------------------------------------------------ | -------- | ------- | ---------------------------------------------------------------------------------- | -| `entries` | `DirectoryEntry[]` | ✓ | - | Directory entries to display | -| `loading` | `boolean` | | - | Whether the directory is currently loading | -| `error` | `string \| null` | | - | Error message to display | -| `onEntryClick` | `(entry: DirectoryEntry) => void` | ✓ | - | Called when an entry is clicked | -| `onNavigateToParent` | `(() => void)` | | - | Called when the back/parent button is clicked | -| `onRetry` | `(() => void)` | | - | Called when the retry button is clicked | -| `isAtRoot` | `boolean` | | - | Whether the user is at the root directory (hides back button) | -| `selectedPath` | `string \| null` | | - | Currently selected file path for highlighting | -| `resolveEntryPath` | `(entry: DirectoryEntry) => string` | ✓ | - | Resolves a DirectoryEntry to its full path | -| `headerContent` | `ReactNode` | | - | Content rendered between the back button and the entry list (e.g., NewFolderInput) | -| `hasCurrentPath` | `boolean` | | - | Whether a current path is set (affects empty state message) | -| `formatSize` | `((bytes: number) => string)` | | - | Custom file size formatter | -| `labels` | `Pick` | | - | Customizable labels | - -### Usage - -```tsx -import { DirectoryList } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/files/FileBreadcrumb.mdx b/docs/appkit/v0/api/appkit-ui/files/FileBreadcrumb.mdx deleted file mode 100644 index 784dd19..0000000 --- a/docs/appkit/v0/api/appkit-ui/files/FileBreadcrumb.mdx +++ /dev/null @@ -1,26 +0,0 @@ -# FileBreadcrumb - -Path-aware breadcrumb navigation built on top of Breadcrumb primitives - -## FileBreadcrumb - -Path-aware breadcrumb navigation built on top of Breadcrumb primitives - -**Source:** [`packages/appkit-ui/src/react/file-browser/file-breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/file-browser/file-breadcrumb.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------------------- | ------------------------- | -------- | ------- | -------------------------------------------------------------------- | -| `rootLabel` | `string` | ✓ | - | Label for the root breadcrumb item | -| `segments` | `string[]` | ✓ | - | Path segments after the root | -| `onNavigateToRoot` | `() => void` | ✓ | - | Called when the root breadcrumb is clicked | -| `onNavigateToSegment` | `(index: number) => void` | ✓ | - | Called when a segment breadcrumb is clicked (receives segment index) | - -### Usage - -```tsx -import { FileBreadcrumb } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/files/FileEntry.mdx b/docs/appkit/v0/api/appkit-ui/files/FileEntry.mdx deleted file mode 100644 index 5286ce0..0000000 --- a/docs/appkit/v0/api/appkit-ui/files/FileEntry.mdx +++ /dev/null @@ -1,26 +0,0 @@ -# FileEntry - -Single file or directory row with icon, name, size, and selection state - -## FileEntry - -Single file or directory row with icon, name, size, and selection state - -**Source:** [`packages/appkit-ui/src/react/file-browser/file-entry.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/file-browser/file-entry.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------ | ----------------------------- | -------- | ------- | ------------------------------------------------------- | -| `entry` | `DirectoryEntry` | ✓ | - | The directory entry to render | -| `entryPath` | `string` | ✓ | - | Resolved full path for this entry | -| `isSelected` | `boolean` | | - | Whether this entry is currently selected | -| `formatSize` | `((bytes: number) => string)` | | - | Custom file size formatter (defaults to formatFileSize) | - -### Usage - -```tsx -import { FileEntry } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/files/FilePreviewPanel.mdx b/docs/appkit/v0/api/appkit-ui/files/FilePreviewPanel.mdx deleted file mode 100644 index a114815..0000000 --- a/docs/appkit/v0/api/appkit-ui/files/FilePreviewPanel.mdx +++ /dev/null @@ -1,31 +0,0 @@ -# FilePreviewPanel - -Preview panel displaying file metadata, image/text preview, and download/delete actions - -## FilePreviewPanel - -Preview panel displaying file metadata, image/text preview, and download/delete actions - -**Source:** [`packages/appkit-ui/src/react/file-browser/file-preview-panel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/file-browser/file-preview-panel.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- | ------------------------------------------------------------------------- | -| `selectedFile` | `string \| null` | ✓ | - | Full path of the selected file (null when nothing is selected) | -| `preview` | `FilePreview \| null` | ✓ | - | Preview data for the selected file | -| `previewLoading` | `boolean` | | - | Whether the preview is loading | -| `onDownload` | `((filePath: string) => void)` | | - | Called when the download button is clicked | -| `onDelete` | `((filePath: string) => void)` | | - | Called when the delete button is clicked | -| `deleting` | `boolean` | | - | Whether a delete operation is in progress | -| `imagePreviewSrc` | `string \| ((filePath: string) => string)` | | - | Image preview source — string URL or function that receives the file path | -| `formatSize` | `((bytes: number) => string)` | | - | Custom file size formatter (defaults to formatFileSize) | -| `labels` | `Pick` | | - | Customizable labels | - -### Usage - -```tsx -import { FilePreviewPanel } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/files/NewFolderInput.mdx b/docs/appkit/v0/api/appkit-ui/files/NewFolderInput.mdx deleted file mode 100644 index aaed057..0000000 --- a/docs/appkit/v0/api/appkit-ui/files/NewFolderInput.mdx +++ /dev/null @@ -1,29 +0,0 @@ -# NewFolderInput - -Inline folder-name input with create/cancel actions - -## NewFolderInput - -Inline folder-name input with create/cancel actions - -**Source:** [`packages/appkit-ui/src/react/file-browser/new-folder-input.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/file-browser/new-folder-input.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ----------- | -------------------------------------------------------------- | -------- | ------- | -------------------------------------- | -| `value` | `string` | ✓ | - | Current folder name value | -| `onChange` | `(value: string) => void` | ✓ | - | Called when folder name changes | -| `onCreate` | `() => void` | ✓ | - | Called when the user confirms creation | -| `onCancel` | `() => void` | ✓ | - | Called when the user cancels | -| `creating` | `boolean` | | - | Whether folder creation is in progress | -| `autoFocus` | `boolean` | | `true` | Auto-focus the input on mount | -| `labels` | `Pick` | | - | Customizable labels | - -### Usage - -```tsx -import { NewFolderInput } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/files/_category_.json b/docs/appkit/v0/api/appkit-ui/files/_category_.json deleted file mode 100644 index b2af66f..0000000 --- a/docs/appkit/v0/api/appkit-ui/files/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Files (UC) components", - "position": 6 -} diff --git a/docs/appkit/v0/api/appkit-ui/genie/GenieChat.mdx b/docs/appkit/v0/api/appkit-ui/genie/GenieChat.mdx deleted file mode 100644 index 8541426..0000000 --- a/docs/appkit/v0/api/appkit-ui/genie/GenieChat.mdx +++ /dev/null @@ -1,40 +0,0 @@ -# GenieChat - -Full-featured chat interface for a single Databricks AI/BI Genie space. Handles message streaming, conversation history, and auto-reconnection via SSE. - -## Example - -```tsx -import { GenieChat } from "@databricks/appkit-ui/react"; - -export default function GenieChatExample() { - return ( -
- -
- ); -} -``` - -## GenieChat - -Full-featured chat interface for a single Databricks AI/BI Genie space. Handles message streaming, conversation history, and auto-reconnection via SSE. - -**Source:** [`packages/appkit-ui/src/react/genie/genie-chat.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-chat.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------- | -------- | -------- | ------- | ----------------------------------------------------------------------------------- | -| `alias` | `string` | ✓ | - | Genie space alias (must match a key registered with the genie plugin on the server) | -| `basePath` | `string` | | - | Base API path | -| `placeholder` | `string` | | - | Placeholder text for the input | -| `className` | `string` | | - | Additional CSS class for the root container | - -### Usage - -```tsx -import { GenieChat } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/genie/GenieChatInput.mdx b/docs/appkit/v0/api/appkit-ui/genie/GenieChatInput.mdx deleted file mode 100644 index c4dec98..0000000 --- a/docs/appkit/v0/api/appkit-ui/genie/GenieChatInput.mdx +++ /dev/null @@ -1,26 +0,0 @@ -# GenieChatInput - -Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline). - -## GenieChatInput - -Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline). - -**Source:** [`packages/appkit-ui/src/react/genie/genie-chat-input.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-chat-input.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------- | --------------------------- | -------- | ------------------- | ---------------------------------------------- | -| `onSend` | `(content: string) => void` | ✓ | - | Callback fired when the user submits a message | -| `disabled` | `boolean` | | `false` | Disable the input and send button | -| `placeholder` | `string` | | `Ask a question...` | Placeholder text shown in the textarea | -| `className` | `string` | | - | Additional CSS class for the container | - -### Usage - -```tsx -import { GenieChatInput } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/genie/GenieChatMessage.mdx b/docs/appkit/v0/api/appkit-ui/genie/GenieChatMessage.mdx deleted file mode 100644 index 3a6fc4b..0000000 --- a/docs/appkit/v0/api/appkit-ui/genie/GenieChatMessage.mdx +++ /dev/null @@ -1,24 +0,0 @@ -# GenieChatMessage - -Renders a single Genie message bubble with optional expandable SQL query attachments. - -## GenieChatMessage - -Renders a single Genie message bubble with optional expandable SQL query attachments. - -**Source:** [`packages/appkit-ui/src/react/genie/genie-chat-message.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-chat-message.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ----------- | ------------------ | -------- | ------- | ---------------------------- | -| `message` | `GenieMessageItem` | ✓ | - | The message object to render | -| `className` | `string` | | - | Additional CSS class | - -### Usage - -```tsx -import { GenieChatMessage } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/genie/GenieChatMessageList.mdx b/docs/appkit/v0/api/appkit-ui/genie/GenieChatMessageList.mdx deleted file mode 100644 index 4afc477..0000000 --- a/docs/appkit/v0/api/appkit-ui/genie/GenieChatMessageList.mdx +++ /dev/null @@ -1,27 +0,0 @@ -# GenieChatMessageList - -Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator. - -## GenieChatMessageList - -Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator. - -**Source:** [`packages/appkit-ui/src/react/genie/genie-chat-message-list.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-chat-message-list.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------------------- | -------------------- | -------- | ------- | --------------------------------------------------------------------------- | -| `messages` | `GenieMessageItem[]` | ✓ | - | Array of messages to display | -| `status` | `enum` | ✓ | - | Current chat status (controls loading indicators and skeleton placeholders) | -| `className` | `string` | | - | Additional CSS class for the scroll area | -| `hasPreviousPage` | `boolean` | | `false` | Whether a previous page of older messages exists | -| `onFetchPreviousPage` | `(() => void)` | | - | Callback to fetch the previous page of messages | - -### Usage - -```tsx -import { GenieChatMessageList } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/genie/GenieQueryVisualization.mdx b/docs/appkit/v0/api/appkit-ui/genie/GenieQueryVisualization.mdx deleted file mode 100644 index 722631d..0000000 --- a/docs/appkit/v0/api/appkit-ui/genie/GenieQueryVisualization.mdx +++ /dev/null @@ -1,28 +0,0 @@ -# GenieQueryVisualization - -Renders a chart + data table for a Genie query result. - -## GenieQueryVisualization - -Renders a chart + data table for a Genie query result. - -- When a chart type can be inferred: shows Tabs with "Chart" (default) and "Table" -- When no chart fits: shows only the data table -- When data is empty/malformed: renders nothing - -**Source:** [`packages/appkit-ui/src/react/genie/genie-query-visualization.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-query-visualization.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ----------- | ------------------------ | -------- | ------- | ----------------------------------------- | -| `data` | `GenieStatementResponse` | ✓ | - | Raw statement_response from the Genie API | -| `className` | `string` | | - | Additional CSS classes | - -### Usage - -```tsx -import { GenieQueryVisualization } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/genie/_category_.json b/docs/appkit/v0/api/appkit-ui/genie/_category_.json deleted file mode 100644 index 8243be6..0000000 --- a/docs/appkit/v0/api/appkit-ui/genie/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Genie components", - "position": 5 -} diff --git a/docs/appkit/v0/api/appkit-ui/index.md b/docs/appkit/v0/api/appkit-ui/index.md deleted file mode 100644 index 9496fab..0000000 --- a/docs/appkit/v0/api/appkit-ui/index.md +++ /dev/null @@ -1,15 +0,0 @@ -# @databricks/appkit-ui - -The library provides a set of UI primitives for building Databricks apps in [React](https://react.dev/). - -The full list of components is available in the UI components section. Use the component list to inspect props, events, and examples for every exported primitive. - -## UI components - -The UI components and their examples originate from the [Shadcn UI](https://github.com/shadcn-ui/ui) project. - -## Data components - -The data components are built on top of the [Apache ECharts](https://echarts.apache.org/) library. - -They support both query mode (queryKey + parameters) and data mode (static data). diff --git a/docs/appkit/v0/api/appkit-ui/styling.md b/docs/appkit/v0/api/appkit-ui/styling.md deleted file mode 100644 index 9c87e79..0000000 --- a/docs/appkit/v0/api/appkit-ui/styling.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -sidebar_position: 7 ---- - -# Styling - -This guide covers how to style AppKit UI components using CSS variables and theming. - -## CSS import - -In your main CSS file, import the AppKit UI styles: - -```css -@import "@databricks/appkit-ui/styles.css"; -``` - -This provides a default theme for your app using CSS variables. - -## Customizing theme - -AppKit UI uses CSS variables for theming, supporting both light and dark modes automatically. - -### Full variable list - -You can customize the theme by overriding CSS variables. See the [CSS variables](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/styles/globals.css) for the full list of variables. - -:::warning Important -If you change any variable, you must change it for **both light and dark mode** to ensure consistent appearance across color schemes. -::: - -## Color system - -AppKit UI uses the OKLCH color space for better perceptual uniformity. The format is: - -``` -oklch(lightness chroma hue) -``` - -Where: - -- **lightness**: 0-1 (0 = black, 1 = white) -- **chroma**: 0-0.4 (saturation) -- **hue**: 0-360 (color angle) - -## Semantic color variables - -### Core colors - -- `--background` / `--foreground` - Main background and text -- `--card` / `--card-foreground` - Card backgrounds -- `--popover` / `--popover-foreground` - Popover/dropdown backgrounds - -### Interactive colors - -- `--primary` / `--primary-foreground` - Primary actions -- `--secondary` / `--secondary-foreground` - Secondary actions -- `--muted` / `--muted-foreground` - Muted/disabled states -- `--accent` / `--accent-foreground` - Accent highlights - -### Status colors - -- `--destructive` / `--destructive-foreground` - Destructive actions -- `--success` / `--success-foreground` - Success states -- `--warning` / `--warning-foreground` - Warning states - -### UI elements - -- `--border` - Border colors -- `--input` - Input field borders -- `--ring` - Focus ring colors -- `--radius` - Border radius - -### Charts - -- `--chart-1` through `--chart-5` - Chart color palette - -### Sidebar - -- `--sidebar-*` - Sidebar-specific colors - -## See also - -- [API Reference](/docs/api/appkit-ui) - Complete UI components API documentation diff --git a/docs/appkit/v0/api/appkit-ui/ui/Accordion.mdx b/docs/appkit/v0/api/appkit-ui/ui/Accordion.mdx deleted file mode 100644 index c7b82be..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/Accordion.mdx +++ /dev/null @@ -1,100 +0,0 @@ -# Accordion - -Collapsible content sections organized in a vertical stack - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## Accordion - -Collapsible content sections organized in a vertical stack - -**Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------------- | ---------------------------------------------------------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `type` | `enum` | ✓ | - | - | -| `value` | `string \| string[]` | | - | The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded. | -| `defaultValue` | `string \| string[]` | | - | The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. | -| `onValueChange` | `((value: string) => void) \| ((value: string[]) => void)` | | - | The callback that fires when the state of the accordion changes. | -| `collapsible` | `boolean` | | `false` | Whether an accordion item can be collapsed after it has been opened. | -| `disabled` | `boolean` | | - | Whether or not an accordion is disabled from user interaction. @defaultValue false | -| `orientation` | `enum` | | `vertical` | The layout in which the Accordion operates. | -| `dir` | `enum` | | - | The language read direction. | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { Accordion } from "@databricks/appkit-ui"; - -; -``` - -## AccordionContent - -Content area that expands and collapses within an accordion item - -**Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------ | --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `asChild` | `boolean` | | - | - | -| `forceMount` | `true` | | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | - -### Usage - -```tsx -import { AccordionContent } from "@databricks/appkit-ui"; - -; -``` - -## AccordionItem - -Individual collapsible section within an accordion - -**Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ---------- | -------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `boolean` | | - | Whether or not an accordion is disabled from user interaction. @defaultValue false | -| `value` | `string \| string[]` | | - | The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded. | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AccordionItem } from "@databricks/appkit-ui"; - -; -``` - -## AccordionTrigger - -Clickable button that triggers accordion content visibility - -**Source:** [`packages/appkit-ui/src/react/ui/accordion.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/accordion.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AccordionTrigger } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/Alert.mdx b/docs/appkit/v0/api/appkit-ui/ui/Alert.mdx deleted file mode 100644 index 2371ba4..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/Alert.mdx +++ /dev/null @@ -1,65 +0,0 @@ -# Alert - -Displays important information with optional icon and multiple variants - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## Alert - -Displays important information with optional icon and multiple variants - -**Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | ------------------------------------ | -------- | ------- | ----------- | -| `variant` | `"default" \| "destructive" \| null` | | - | - | - -### Usage - -```tsx -import { Alert } from "@databricks/appkit-ui"; - -; -``` - -## AlertDescription - -Descriptive text content for an alert component - -**Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { AlertDescription } from "@databricks/appkit-ui"; - -; -``` - -## AlertTitle - -Title text for an alert component - -**Source:** [`packages/appkit-ui/src/react/ui/alert.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { AlertTitle } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/AlertDialog.mdx b/docs/appkit/v0/api/appkit-ui/ui/AlertDialog.mdx deleted file mode 100644 index d379c5c..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/AlertDialog.mdx +++ /dev/null @@ -1,234 +0,0 @@ -# AlertDialog - -Modal dialog that interrupts the user with critical information requiring immediate action - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## AlertDialog - -Modal dialog that interrupts the user with critical information requiring immediate action - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| -------------- | --------------------------- | -------- | ------- | ----------- | -| `defaultOpen` | `boolean` | | - | - | -| `open` | `boolean` | | - | - | -| `onOpenChange` | `((open: boolean) => void)` | | - | - | - -### Usage - -```tsx -import { AlertDialog } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogAction - -Primary action button that confirms the alert - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AlertDialogAction } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogCancel - -Cancel button that dismisses the alert dialog - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AlertDialogCancel } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogContent - -Main content container for the alert dialog - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------------ | -------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `asChild` | `boolean` | | - | - | -| `forceMount` | `true` | | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | -| `onEscapeKeyDown` | `((event: KeyboardEvent) => void)` | | - | Event handler called when the escape key is down. Can be prevented. | -| `onFocusOutside` | `((event: FocusOutsideEvent) => void)` | | - | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. | -| `onOpenAutoFocus` | `((event: Event) => void)` | | - | Event handler called when auto-focusing on open. Can be prevented. | -| `onCloseAutoFocus` | `((event: Event) => void)` | | - | Event handler called when auto-focusing on close. Can be prevented. | - -### Usage - -```tsx -import { AlertDialogContent } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogDescription - -Descriptive text explaining the alert - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AlertDialogDescription } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogFooter - -Footer section containing action buttons - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { AlertDialogFooter } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogHeader - -Header section containing title and description - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { AlertDialogHeader } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogOverlay - -Background overlay that dims content behind the alert dialog - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------ | --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `asChild` | `boolean` | | - | - | -| `forceMount` | `true` | | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | - -### Usage - -```tsx -import { AlertDialogOverlay } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogPortal - -Portal container for rendering alert dialog content outside the DOM hierarchy - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ------------ | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `container` | `Element \| DocumentFragment \| null` | | - | Specify a container element to portal the content into. | -| `forceMount` | `true` | | - | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | - -### Usage - -```tsx -import { AlertDialogPortal } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogTitle - -Title heading for the alert dialog - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AlertDialogTitle } from "@databricks/appkit-ui"; - -; -``` - -## AlertDialogTrigger - -Button that triggers the alert dialog to open - -**Source:** [`packages/appkit-ui/src/react/ui/alert-dialog.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/alert-dialog.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AlertDialogTrigger } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/AspectRatio.mdx b/docs/appkit/v0/api/appkit-ui/ui/AspectRatio.mdx deleted file mode 100644 index 23ffe7e..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/AspectRatio.mdx +++ /dev/null @@ -1,30 +0,0 @@ -# AspectRatio - -Container that maintains a specific aspect ratio for its content - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## AspectRatio - -Container that maintains a specific aspect ratio for its content - -**Source:** [`packages/appkit-ui/src/react/ui/aspect-ratio.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/aspect-ratio.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `ratio` | `number` | | - | - | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AspectRatio } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/Avatar.mdx b/docs/appkit/v0/api/appkit-ui/ui/Avatar.mdx deleted file mode 100644 index cc6647e..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/Avatar.mdx +++ /dev/null @@ -1,71 +0,0 @@ -# Avatar - -Displays user profile picture or initials in a circular container - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## Avatar - -Displays user profile picture or initials in a circular container - -**Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { Avatar } from "@databricks/appkit-ui"; - -; -``` - -## AvatarFallback - -Fallback content displayed when avatar image fails to load - -**Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `delayMs` | `number` | | - | - | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AvatarFallback } from "@databricks/appkit-ui"; - -; -``` - -## AvatarImage - -Image element for the avatar - -**Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| ----------------------- | ---------------------------------------- | -------- | ------- | ----------- | -| `onLoadingStatusChange` | `((status: ImageLoadingStatus) => void)` | | - | - | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { AvatarImage } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/Badge.mdx b/docs/appkit/v0/api/appkit-ui/ui/Badge.mdx deleted file mode 100644 index a961a83..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/Badge.mdx +++ /dev/null @@ -1,30 +0,0 @@ -# Badge - -Small label for displaying status, categories, or counts - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## Badge - -Small label for displaying status, categories, or counts - -**Source:** [`packages/appkit-ui/src/react/ui/badge.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/badge.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | ---------------------------------------------------------------- | -------- | ------- | ----------- | -| `variant` | `"default" \| "destructive" \| "secondary" \| "outline" \| null` | | - | - | -| `asChild` | `boolean` | | `false` | - | - -### Usage - -```tsx -import { Badge } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/Breadcrumb.mdx b/docs/appkit/v0/api/appkit-ui/ui/Breadcrumb.mdx deleted file mode 100644 index 4205795..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/Breadcrumb.mdx +++ /dev/null @@ -1,137 +0,0 @@ -# Breadcrumb - -Navigation component showing the current page's location in the site hierarchy - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## Breadcrumb - -Navigation component showing the current page's location in the site hierarchy - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { Breadcrumb } from "@databricks/appkit-ui"; - -; -``` - -## BreadcrumbEllipsis - -Ellipsis indicator for collapsed breadcrumb items - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { BreadcrumbEllipsis } from "@databricks/appkit-ui"; - -; -``` - -## BreadcrumbItem - -Individual item in the breadcrumb trail - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { BreadcrumbItem } from "@databricks/appkit-ui"; - -; -``` - -## BreadcrumbLink - -Clickable link within a breadcrumb item - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | --------- | -------- | ------- | ----------- | -| `asChild` | `boolean` | | - | - | - -### Usage - -```tsx -import { BreadcrumbLink } from "@databricks/appkit-ui"; - -; -``` - -## BreadcrumbList - -Ordered list container for breadcrumb items - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { BreadcrumbList } from "@databricks/appkit-ui"; - -; -``` - -## BreadcrumbPage - -Current page indicator in the breadcrumb trail - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { BreadcrumbPage } from "@databricks/appkit-ui"; - -; -``` - -## BreadcrumbSeparator - -Visual separator between breadcrumb items - -**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx) - -### Props - -This component extends standard HTML element attributes. - -### Usage - -```tsx -import { BreadcrumbSeparator } from "@databricks/appkit-ui"; - -; -``` diff --git a/docs/appkit/v0/api/appkit-ui/ui/Button.mdx b/docs/appkit/v0/api/appkit-ui/ui/Button.mdx deleted file mode 100644 index 90bf36f..0000000 --- a/docs/appkit/v0/api/appkit-ui/ui/Button.mdx +++ /dev/null @@ -1,31 +0,0 @@ -# Button - -Clickable button with multiple variants and sizes - -## Example - -import { DocExample } from "@site/src/components/DocExample"; - - - -## Button - -Clickable button with multiple variants and sizes - -**Source:** [`packages/appkit-ui/src/react/ui/button.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/button.tsx) - -### Props - -| Prop | Type | Required | Default | Description | -| --------- | ------------------------------------------------------------------------------------- | -------- | ------- | ----------- | -| `variant` | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null` | | - | - | -| `size` | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null` | | - | - | -| `asChild` | `boolean` | | `false` | - | - -### Usage - -```tsx -import { Button } from "@databricks/appkit-ui"; - -