# ProviderPicker

Provider and model selection compound component.

```tsx
import { ProviderPicker } from "@arlopass/react-ui";
```

---

### Parts

| Name | Element | Purpose |
| --- | --- | --- |
| `ProviderPicker.Root` | div | Manages provider/model selection state. Reads from useProviders when uncontrolled. |
| `ProviderPicker.ProviderSelect` | select | Dropdown for choosing an AI provider. |
| `ProviderPicker.ModelSelect` | select | Dropdown for choosing a model from the selected provider. |
| `ProviderPicker.SubmitButton` | button | Confirms the selected provider/model pair. |

---

### Uncontrolled usage

Inside a `<ArlopassProvider>`, `ProviderPicker.Root` automatically reads from `useProviders`. No props needed.

```tsx title="ProviderPicker"
import { ArlopassProvider } from "@arlopass/react";
import { ProviderPicker } from "@arlopass/react-ui";

function Picker() {
  return (
    <ArlopassProvider>
      <ProviderPicker.Root>
        <ProviderPicker.ProviderSelect />
        <ProviderPicker.ModelSelect />
        <ProviderPicker.SubmitButton>Connect</ProviderPicker.SubmitButton>
      </ProviderPicker.Root>
    </ArlopassProvider>
  );
}
```

---

### Controlled usage

Pass props to take full control over the provider list and selection callbacks.

```tsx title="Controlled"
import { useProviders } from "@arlopass/react";
import { ProviderPicker } from "@arlopass/react-ui";

function ControlledPicker() {
  const { providers, selectedProvider, selectProvider, isLoading, error } =
    useProviders();

return (
    <ProviderPicker.Root
      providers={providers}
      selectedProvider={selectedProvider}
      isLoading={isLoading}
      error={error}
      onProviderChange={(id) => console.log("provider:", id)}
      onModelChange={(id) => console.log("model:", id)}
      onSelect={(providerId, modelId) =>
        selectProvider({ providerId, modelId })
      }
    >
      <ProviderPicker.ProviderSelect />
      <ProviderPicker.ModelSelect />
      <ProviderPicker.SubmitButton>Select</ProviderPicker.SubmitButton>
    </ProviderPicker.Root>
  );
}
```

### ProviderPicker.Root — controlled props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `providers` | `readonly ProviderDescriptor[]` | — | List of available providers and their models. |
| `selectedProvider` | ` { providerId: string; modelId: string } | null` | — | Currently selected provider/model pair. |
| `isLoading` | `boolean` | — | True while fetching providers or selecting. |
| `error` | `ArlopassSDKError | null` | — | Error from the last provider operation. |
| `onProviderChange` | `(providerId: string) => void` | — | Called when the user selects a different provider. |
| `onModelChange` | `(modelId: string) => void` | — | Called when the user selects a different model. |
| `onSelect` | `(providerId: string, modelId: string) => void` | — | Called when the user confirms the selection. |

---

### Data attributes

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data-state` | ` "ready" | "loading" | "error"` | `"ready"` | Set on ProviderPicker.Root. Reflects the current loading/error state.