@convertcompany/ui NPM

@convertcompany/ui

Biblioteca de componentes da Convert Company, baseada no ShadCN UI, com variações visuais e funcionais internas para projetos React.

📦 Instalação

npm install @convertcompany/ui

🔧 Uso

✅ Componentes leves (importação padrão)

Você pode importar diretamente da raiz:

import { Button, Input, Accordion } from "@convertcompany/ui";

Lista de componentes disponíveis por padrão:

Accordion
Badge
Button
Callout
Card
Checkbox
Collapsible
ContextMenu
CopyToClipboard
Dialog
Dropdown
InputOtp
Input
Link
Popover
Progress
Radio
ScrollArea
Select
Separator
Sheet
Skeleton
Switch
Table
Tabs
Tag
Textarea
Tooltip
Typography

📌 `AutoComplete`

Componente de seleção única com suporte a busca (autocomplete) e ícones.

✅ Props

Propriedade	Tipo	Descrição
`options`	`{ label: string; value: string; icon?: React.ComponentType }[]`	Lista de opções para selecionar.
`onValueChange`	`(value: string \\| null) => void`	Callback ao selecionar ou limpar a opção.
`value`	`string \\| null`	Valor selecionado atual.
`placeholder`	`string`	Texto exibido quando nada estiver selecionado.
`emptyStateText`	`string`	Mensagem exibida quando nenhuma opção for encontrada.
`modalPopover`	`boolean`	Define se o popover deve ser modal.
`className`	`string`	Classe CSS adicional para o botão de trigger.
`children`	`React.ReactNode`	Se passado, sobrescreve o botão padrão e permite customização do trigger.
`...props`	`React.ButtonHTMLAttributes<HTMLButtonElement>`	Atributos extras aplicados ao botão (quando não há children).

📋 Exemplo de uso

<AutoComplete
  options={[
    { label: "Admin", value: "admin" },
    { label: "Usuário", value: "user" },
  ]}
  value={role}
  onValueChange={setRole}
/>

🧩 `MultiSelect`

Componente de seleção múltipla com suporte a badges, busca, seleção total e limite de seleção.

✅ Props

Propriedade	Tipo	Descrição
`options`	`{ label: string; value: string; icon?: React.ComponentType }[]`	Lista de opções.
`onValueChange`	`(value: string[]) => void`	Callback com os valores selecionados.
`defaultValue`	`string[]`	Valores iniciais selecionados.
`placeholder`	`string`	Texto exibido quando nenhuma opção estiver selecionada.
`selectAllText`	`string`	Texto exibido para a opção "Selecionar tudo".
`emptyStateText`	`string`	Mensagem exibida quando nenhuma opção for encontrada.
`maxCount`	`number`	Quantidade máxima de badges mostradas antes de resumir com "+X opções".
`maxSelections`	`number`	Limita o número máximo de seleções possíveis.
`modalPopover`	`boolean`	Define se o popover deve ser modal.
`renderOutside`	`boolean`	Exibe os badges abaixo do botão, fora do trigger.
`className`	`string`	Classe CSS adicional para o botão de trigger.
`canSelectAll`	`boolean`	Exibe a opção de "Selecionar tudo".
`canClear`	`boolean`	Permite limpar todas as seleções.
`canCreate`	`boolean`	(Reservado para futura criação de opções customizadas)
`showActionFooter`	`boolean`	Exibe rodapé com botões "Limpar" e "Fechar".
`listSelectedOptions`	`boolean`	Mostra itens já selecionados na lista de opções.
`renderValues`	`(items: { value: string; onRemove: () => void }[]) => ReactNode`	Função customizada para renderizar os badges selecionados.
`...props`	`React.ButtonHTMLAttributes<HTMLButtonElement>`	Atributos extras aplicados ao botão.

📋 Exemplo de uso

<MultiSelect
  options={[
    { label: "Facebook", value: "fb" },
    { label: "Instagram", value: "ig" },
    { label: "WhatsApp", value: "wa" },
  ]}
  defaultValue={["wa"]}
  onValueChange={setChannels}
  maxSelections={2}
/>

⚠️ Componentes pesados (importar via subpaths)

Esses componentes têm dependências maiores e não estão incluídos automaticamente no bundle principal. Você deve importar separadamente:

import { PhoneInput } from "@convertcompany/ui/phone-input";
import { Toaster } from "@convertcompany/ui/toast";
import { Command, CommandInput, CommandItem } from "@convertcompany/ui/command";

Subpaths disponíveis:

@convertcompany/ui/phone-input → Usa react-phone-number-input
@convertcompany/ui/toast → Usa sonner
@convertcompany/ui/command → Usa cmdk

🎨 Configuração do TailwindCSS

`tailwind.config.ts`

import preset from "@convertcompany/ui/preset";

export default {
  content: [...preset.content, "./index.html", "./src/**/*.{js,ts,jsx,tsx}", "./playground/**/*.{js,ts,jsx,tsx}"],
  presets: [preset],
};

`index.css`

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 0.7rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-background: 255, 255, 255;
    --color-foreground: 18, 18, 18;
    --color-muted-foreground: 107, 114, 128;
    --color-card: 255, 255, 255;
    --color-primary: 31, 169, 97;
    --color-primary-foreground: 255, 255, 255;
    --color-secondary: 242, 242, 242;
    --color-muted: 149, 167, 184;
    --color-border: 227, 227, 229;
    --color-popover: 0, 0, 0;
    --color-popover-foreground: 255, 255, 255;
    --color-ring: var(--color-primary);
    --color-success: 22, 163, 74;
    --color-success-foreground: 255, 255, 255;
    --color-warning: 252, 211, 77;
    --color-warning-foreground: 69, 26, 3;
    --color-danger: 220, 38, 38;
    --color-danger-foreground: 255, 255, 255;
    --color-info: 56, 189, 248;
    --color-info-foreground: 8, 47, 73;
    --color-vertt-muted: 244, 232, 255;
    --color-vertt-lighter: 193, 132, 252;
    --color-vertt-light: 168, 85, 247;
    --color-vertt: 145, 51, 234;
    --color-vertt-dark: 122, 34, 206;
    --color-vertt-darker: 102, 33, 168;
  }

  .dark {
    --color-background: 11, 22, 33;
    --color-foreground: 255, 255, 255;
    --color-muted-foreground: 223, 225, 229;
    --color-card: 33, 44, 55;
    --color-secondary: 22, 33, 44;
    --color-border: 255, 255, 255, 0.07;
    --color-vertt-muted: 214, 171, 255, 0.1;
    --color-vertt: 168, 85, 247;
  }
}

@layer base {
  * {
    border-color: rgba(var(--color-border));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(var(--color-muted), 0.2);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(var(--color-muted), 0.25);
    border-radius: 2.5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-muted), 0.35);
  }
}