@assistant-ui/mcp-docs-server 0.2.2 → 0.2.3

package/.docs/raw/docs/ui/select.mdx

@@ -1,254 +0,0 @@
----
-title: Select
-description: A dropdown select component with composable sub-components.
-links:
-  - label: Radix UI Select (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/components/select
-  - label: Base UI Select (base styles)
-    url: https://base-ui.com/react/components/select
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  SelectSample,
-  SelectDisabledItemsSample,
-  SelectPlaceholderSample,
-  SelectDisabledSample,
-  SelectGroupsSample,
-  SelectVariantsSample,
-  SelectSizesSample,
-  SelectScrollableSample,
-} from "@/components/docs/samples/select";
-import * as SelectRadixSamples from "@/components/docs/samples/select.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<FlavorSwitcher />
-
-<Flavored radix={<SelectRadixSamples.SelectSample />} base={<SelectSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["select"]} />
-
-## Usage
-
-```tsx
-import { Select } from "@/components/assistant-ui/select";
-
-const options = [
-  { value: "apple", label: "Apple" },
-  { value: "banana", label: "Banana" },
-  { value: "orange", label: "Orange" },
-];
-
-export function FruitPicker() {
-  const [value, setValue] = useState("apple");
-
-  return (
-    <Select
-      value={value}
-      onValueChange={setValue}
-      options={options}
-      placeholder="Select a fruit..."
-    />
-  );
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop on `SelectTrigger` to change the visual style.
-
-<Flavored radix={<SelectRadixSamples.SelectVariantsSample />} base={<SelectVariantsSample />} />
-
-```tsx
-<SelectTrigger variant="outline" /> // Border (default)
-<SelectTrigger variant="ghost" />   // No border
-<SelectTrigger variant="muted" />   // Solid background
-```
-
-### Sizes
-
-Use the `size` prop on `SelectTrigger` to change the height.
-
-<Flavored radix={<SelectRadixSamples.SelectSizesSample />} base={<SelectSizesSample />} />
-
-```tsx
-<SelectTrigger size="default" /> // 36px (default)
-<SelectTrigger size="sm" />      // 32px
-```
-
-### Scrollable
-
-Long lists automatically become scrollable.
-
-<PreviewCode file="components/docs/samples/select" name="SelectScrollableSample" base={<SelectScrollableSample />}>
-  <SelectRadixSamples.SelectScrollableSample />
-</PreviewCode>
-
-### Groups
-
-Use the composable API for grouped options:
-
-<PreviewCode file="components/docs/samples/select" name="SelectGroupsSample" base={<SelectGroupsSample />}>
-  <SelectRadixSamples.SelectGroupsSample />
-</PreviewCode>
-
-### Disabled Items
-
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledItemsSample" base={<SelectDisabledItemsSample />}>
-  <SelectRadixSamples.SelectDisabledItemsSample />
-</PreviewCode>
-
-### With Placeholder
-
-<PreviewCode file="components/docs/samples/select" name="SelectPlaceholderSample" base={<SelectPlaceholderSample />}>
-  <SelectRadixSamples.SelectPlaceholderSample />
-</PreviewCode>
-
-### Disabled Select
-
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledSample" base={<SelectDisabledSample />}>
-  <SelectRadixSamples.SelectDisabledSample />
-</PreviewCode>
-
-## API Reference
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `Select` | A convenience component that renders a complete select with options. |
-| `SelectRoot` | The root component that manages state. |
-| `SelectTrigger` | The button that opens the dropdown. Accepts `variant` and `size` props. |
-| `SelectValue` | Renders the selected value or placeholder. |
-| `SelectContent` | The dropdown content container with animations. |
-| `SelectItem` | An individual selectable item. |
-| `SelectGroup` | Groups related items together. |
-| `SelectLabel` | A label for a group of items. |
-| `SelectSeparator` | A visual separator between items or groups. |
-| `SelectScrollUpButton` | Scroll indicator for long lists. |
-| `SelectScrollDownButton` | Scroll indicator for long lists. |
-
-With the Base UI flavor, `SelectValue` resolves the trigger label from the `items` prop on `SelectRoot`; pass the same array you map into `SelectItem` children. The Radix flavor reads the label from the selected item's text automatically.
-
-### Select
-
-A convenience component that renders a complete select with options.
-
-<ParametersTable
-  type="SelectProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The controlled value of the select.",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string) => void",
-      required: true,
-      description: "Callback when the selected value changes.",
-    },
-    {
-      name: "options",
-      type: "SelectOption[]",
-      required: true,
-      description: "Array of options to display.",
-    },
-    {
-      name: "placeholder",
-      type: "string",
-      description: "Placeholder text when no value is selected.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes for the trigger.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the select is disabled.",
-    },
-  ]}
-/>
-
-### SelectOption
-
-<ParametersTable
-  type="SelectOption"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The value of the option.",
-    },
-    {
-      name: "label",
-      type: "ReactNode",
-      required: true,
-      description: "The display label for the option.",
-    },
-    {
-      name: "textValue",
-      type: "string",
-      description: "Optional text value for typeahead. Defaults to label if it's a string.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the option is disabled.",
-    },
-  ]}
-/>
-
-### SelectTrigger
-
-The button that opens the dropdown.
-
-<ParametersTable
-  type="SelectTriggerProps"
-  parameters={[
-    {
-      name: "variant",
-      type: '"outline" | "ghost" | "muted"',
-      default: '"outline"',
-      description: "The visual style of the trigger.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "The size of the trigger.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `selectTriggerVariants` | Styles for the select trigger button. |
-
-```tsx
-import { selectTriggerVariants } from "@/components/assistant-ui/select";
-
-<button className={selectTriggerVariants({ variant: "ghost", size: "sm" })}>
-  Custom Trigger
-</button>
-```

package/.docs/raw/docs/ui/tabs.mdx

@@ -1,271 +0,0 @@
----
-title: Tabs
-description: A multi-variant tabs component for organizing content into switchable panels.
-links:
-  - label: Radix UI Tabs (Radix styles)
-    url: https://www.radix-ui.com/primitives/docs/components/tabs
-  - label: Base UI Tabs (base styles)
-    url: https://base-ui.com/react/components/tabs
-platforms: ["react"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  TabsSample,
-  TabsVariantsSample,
-  TabsSizesSample,
-  TabsWithIconsSample,
-  TabsControlledSample,
-  TabsAsLinkSample,
-  TabsAnimatedIndicatorSample,
-} from "@/components/docs/samples/tabs";
-import * as TabsRadixSamples from "@/components/docs/samples/tabs.radix";
-import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
-
-<Callout>
-  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
-</Callout>
-
-<FlavorSwitcher />
-
-<Flavored radix={<TabsRadixSamples.TabsSample />} base={<TabsSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["tabs"]} />
-
-## Usage
-
-```tsx
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@/components/assistant-ui/tabs";
-
-export function Example() {
-  return (
-    <Tabs defaultValue="account">
-      <TabsList>
-        <TabsTrigger value="account">Account</TabsTrigger>
-        <TabsTrigger value="password">Password</TabsTrigger>
-      </TabsList>
-      <TabsContent value="account">Account settings here.</TabsContent>
-      <TabsContent value="password">Password settings here.</TabsContent>
-    </Tabs>
-  );
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop on `TabsList` to change the visual style. Child components inherit the variant automatically.
-
-<Flavored radix={<TabsRadixSamples.TabsVariantsSample />} base={<TabsVariantsSample />} />
-
-```tsx
-<TabsList variant="default" />  // Muted background with shadow (default)
-<TabsList variant="line" />     // Underline indicator
-<TabsList variant="ghost" />    // Transparent with hover states
-<TabsList variant="pills" />    // Rounded pill buttons
-<TabsList variant="outline" />  // Border with background on active
-```
-
-### Sizes
-
-Use the `size` prop on `TabsList` to change the tab height. Child components inherit the size automatically.
-
-<Flavored radix={<TabsRadixSamples.TabsSizesSample />} base={<TabsSizesSample />} />
-
-```tsx
-<TabsList size="sm" />      // 32px height
-<TabsList size="default" /> // 36px height
-<TabsList size="lg" />      // 40px height
-```
-
-### With Icons
-
-Tabs automatically style SVG icons placed inside triggers.
-
-<PreviewCode file="components/docs/samples/tabs" name="TabsWithIconsSample" base={<TabsWithIconsSample />}>
-  <TabsRadixSamples.TabsWithIconsSample />
-</PreviewCode>
-
-### Controlled
-
-Use `value` and `onValueChange` for controlled tab state.
-
-<PreviewCode file="components/docs/samples/tabs" name="TabsControlledSample" base={<TabsControlledSample />}>
-  <TabsRadixSamples.TabsControlledSample />
-</PreviewCode>
-
-### As Link
-
-Compose with `render` (Base UI) or `asChild` (Radix) on `TabsTrigger` to render as a different element, like a navigation link.
-
-<PreviewCode file="components/docs/samples/tabs" name="TabsAsLinkSample" base={<TabsAsLinkSample />}>
-  <TabsRadixSamples.TabsAsLinkSample />
-</PreviewCode>
-
-### Animated Indicator
-
-All variants feature smooth animated indicators that slide between tabs:
-
-| Variant | Indicator Style |
-|---------|-----------------|
-| `default` | Sliding background with shadow |
-| `line` | Sliding underline |
-| `ghost` | Sliding background with hover effect |
-| `pills` | Sliding pill background |
-| `outline` | Sliding border |
-
-<PreviewCode file="components/docs/samples/tabs" name="TabsAnimatedIndicatorSample" base={<TabsAnimatedIndicatorSample />}>
-  <TabsRadixSamples.TabsAnimatedIndicatorSample />
-</PreviewCode>
-
-## API Reference
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `Tabs` | The root component that manages tab state. |
-| `TabsList` | The container for tab triggers. Set `variant` and `size` here. |
-| `TabsTrigger` | An individual tab button. Inherits variant/size from TabsList. |
-| `TabsContent` | The content panel for a tab. |
-
-### Tabs
-
-The root component that manages tab state.
-
-<ParametersTable
-  type="TabsProps"
-  parameters={[
-    {
-      name: "defaultValue",
-      type: "string",
-      description: "The default active tab value (uncontrolled).",
-    },
-    {
-      name: "value",
-      type: "string",
-      description: "The controlled active tab value.",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string) => void",
-      description: "Callback when the active tab changes.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### TabsList
-
-The container for tab triggers. Set `variant` and `size` here to style all child components.
-
-<ParametersTable
-  type="TabsListProps"
-  parameters={[
-    {
-      name: "variant",
-      type: '"default" | "line" | "ghost" | "pills" | "outline"',
-      default: '"default"',
-      description: "The visual style of the tabs. Child components inherit this automatically.",
-    },
-    {
-      name: "size",
-      type: '"sm" | "default" | "lg"',
-      default: '"default"',
-      description: "The size of the tabs. Child components inherit this automatically.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### TabsTrigger
-
-An individual tab button.
-
-<ParametersTable
-  type="TabsTriggerProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The unique value for this tab.",
-    },
-    {
-      name: "render",
-      type: "ReactElement | function",
-      description: "Base UI: compose as a different element instead of rendering a button.",
-    },
-    {
-      name: "asChild",
-      type: "boolean",
-      default: "false",
-      description: "Radix: merge props with a child element instead of rendering a button.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the tab is disabled.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### TabsContent
-
-The content panel for a tab.
-
-<ParametersTable
-  type="TabsContentProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "The value matching the corresponding TabsTrigger.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `tabsListVariants` | Styles for the tabs list container. |
-| `tabsActiveIndicatorVariants` | Styles for the animated active indicator. |
-
-```tsx
-import {
-  tabsListVariants,
-  tabsActiveIndicatorVariants,
-} from "@/components/assistant-ui/tabs";
-
-<div className={tabsListVariants({ variant: "ghost", size: "sm" })}>
-  Custom Tabs Container
-</div>
-```