Kobana UI

Modal que lista registros e permite selecionar um via radio, confirmando a escolha.

Instalação

npx @kobana/ui add record-picker-dialog

Dependências instaladas automaticamente: dialog, radio-group, button, input, label (shadcn/ui), lucide-react

Importação

import { RecordPickerDialog } from "@/components/kobana/record-picker-dialog"
import type { PickerRecord } from "@/components/kobana/record-picker-dialog"

Props

Prop	Tipo	Default	Descrição
`open`	`boolean`	—	Controla a visibilidade do dialog
`onOpenChange`	`(open: boolean) => void`	—	Callback chamado quando o estado de abertura muda
`records`	`PickerRecord[]`	—	Lista de registros a serem exibidos para seleção
`selectedId`	`string`	—	Id do registro atualmente selecionado
`onSelect`	`(id: string) => void`	—	Callback chamado ao confirmar, recebe o id escolhido
`title`	`string`	`"Selecionar registro"`	Título do dialog
`description`	`string`	—	Descrição exibida abaixo do título
`confirmLabel`	`string`	`"Confirmar"`	Texto do botão de confirmação
`cancelLabel`	`string`	`"Cancelar"`	Texto do botão de cancelar
`emptyText`	`string`	`"Nenhum registro encontrado."`	Texto exibido quando não há registros
`onSearch`	`(query: string) => void`	—	Callback de busca. Quando definido, exibe um campo de busca
`searchPlaceholder`	`string`	`"Buscar..."`	Placeholder do campo de busca

PickerRecord

Campo	Tipo	Descrição
`id`	`string`	Identificador único do registro
`title`	`string`	Título principal exibido em destaque
`subtitle`	`string`	Subtítulo opcional exibido abaixo do título
`meta`	`string`	Informação auxiliar opcional exibida à direita (ex: valor, data)

Uso

import { useState } from "react"
import { RecordPickerDialog } from "@/components/kobana/record-picker-dialog"
import type { PickerRecord } from "@/components/kobana/record-picker-dialog"

const records: PickerRecord[] = [
  { id: "1", title: "INV-001", subtitle: "Acme Ltda", meta: "R$ 1.250,00" },
  { id: "2", title: "INV-002", subtitle: "Globex S/A", meta: "R$ 3.480,00" },
]

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <RecordPickerDialog
      open={open}
      onOpenChange={setOpen}
      records={records}
      title="Selecionar fatura"
      description="Escolha uma fatura da lista para continuar."
      onSelect={(id) => console.log("selecionado:", id)}
    />
  )
}

Os campos title, subtitle e meta devem ser pré-formatados pelo chamador — o componente é agnóstico ao domínio (valores, datas e documentos são formatados antes de montar os registros). Para busca server-side, passe onSearch e atualize a prop records com os resultados filtrados.

RecordPickerDialog

Instalação

Importação

Props

PickerRecord

Uso

On this page