@strategicos/ui 0.4.1 → 0.6.0

package/src/components/dialog.tsx

@@ -47,21 +47,39 @@ function DialogOverlay({
   )
 }
 
+/** Posição e tamanho por breakpoint. No celular (`fullscreen`, o padrão) o
+ *  diálogo ocupa a tela inteira e rola por dentro, como os modais do Mantine
+ *  com `fullScreen` em telas pequenas; a partir de `sm` volta a ser centrado.
+ *  `centered` mantém o diálogo centrado também no celular, para conteúdos
+ *  curtos. Sem `translate` no celular: ele criaria um bloco de contenção e o
+ *  botão de fechar (`fixed`) rolaria junto com o conteúdo. */
+const dialogPlacement = {
+  fullscreen:
+    "inset-0 h-dvh w-full overflow-y-auto rounded-none content-start sm:inset-auto sm:top-1/2 sm:left-1/2 sm:h-auto sm:max-h-[calc(100dvh-2rem)] sm:max-w-[440px] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg",
+  centered:
+    "top-1/2 left-1/2 max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg sm:max-w-[440px]",
+}
+
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  mobile = "fullscreen",
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
+  /** Comportamento abaixo de `sm`. Padrão: tela cheia. */
+  mobile?: "fullscreen" | "centered"
 }) {
   return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-mobile={mobile}
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-[440px] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed z-50 grid gap-4 bg-popover p-4 text-sm text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          dialogPlacement[mobile],
           className
         )}
         {...props}
@@ -71,7 +89,7 @@ function DialogContent({
           <DialogPrimitive.Close data-slot="dialog-close" asChild>
             <Button
               variant="ghost"
-              className="absolute top-3 right-3"
+              className={cn("top-3 right-3 z-10", mobile === "fullscreen" ? "fixed sm:absolute" : "absolute")}
               size="icon-sm"
             >
               <XIcon

package/src/components/dropzone.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+import { UploadIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Área de envio de arquivos, como o Dropzone do Mantine: arrastar e soltar, ou
+ * clicar (e Enter/Espaço) para abrir o seletor do sistema.
+ *
+ *   <Dropzone
+ *     accept=".txt,.xml,.zip"
+ *     maxSize={50 * 1024 * 1024}
+ *     onDrop={files => enviar(files)}
+ *     onReject={msg => toast.error(msg)}
+ *     title="Importar arquivos fiscais"
+ *     description="SPED (.txt), NF-e (.xml) ou pacote .zip, até 50 MB"
+ *   />
+ *
+ * `children` substitui o conteúdo padrão (ícone, título e descrição).
+ * A validação de tipo e tamanho é só uma conveniência: o servidor valida de
+ * novo.
+ */
+function Dropzone({
+  onDrop,
+  onReject,
+  accept,
+  multiple = false,
+  maxSize,
+  disabled = false,
+  loading = false,
+  title = "Arraste arquivos ou clique para escolher",
+  description,
+  icon,
+  className,
+  children,
+}: {
+  onDrop: (files: File[]) => void
+  /** Chamado com uma mensagem quando algum arquivo é recusado (tipo/tamanho). */
+  onReject?: (message: string) => void
+  /** Mesmo formato do atributo `accept` do input (ex.: ".pdf,image/*"). */
+  accept?: string
+  multiple?: boolean
+  /** Tamanho máximo por arquivo, em bytes. */
+  maxSize?: number
+  disabled?: boolean
+  /** Enquanto envia: bloqueia novos envios e mostra o estado ocupado. */
+  loading?: boolean
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  className?: string
+  children?: React.ReactNode
+}) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = React.useState(false)
+  const blocked = disabled || loading
+
+  function matchesAccept(file: File) {
+    if (!accept) return true
+    const name = file.name.toLowerCase()
+    return accept.split(",").map(s => s.trim().toLowerCase()).some(rule => {
+      if (rule.startsWith(".")) return name.endsWith(rule)
+      if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1))
+      return file.type === rule
+    })
+  }
+
+  function handleFiles(list: FileList | null) {
+    if (!list || list.length === 0 || blocked) return
+    const files = Array.from(list).slice(0, multiple ? undefined : 1)
+    const ok: File[] = []
+    for (const f of files) {
+      if (!matchesAccept(f)) onReject?.(`"${f.name}" não é de um tipo aceito.`)
+      else if (maxSize && f.size > maxSize) onReject?.(`"${f.name}" passa do limite de ${Math.round(maxSize / 1024 / 1024)} MB.`)
+      else ok.push(f)
+    }
+    if (ok.length) onDrop(ok)
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={blocked ? -1 : 0}
+      aria-disabled={blocked || undefined}
+      aria-busy={loading || undefined}
+      data-slot="dropzone"
+      data-dragging={dragging || undefined}
+      onClick={() => !blocked && inputRef.current?.click()}
+      onKeyDown={e => {
+        if (blocked) return
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); inputRef.current?.click() }
+      }}
+      onDragOver={e => { e.preventDefault(); if (!blocked) setDragging(true) }}
+      onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragging(false) }}
+      onDrop={e => { e.preventDefault(); setDragging(false); handleFiles(e.dataTransfer.files) }}
+      className={cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-6 py-8 text-center transition-colors outline-none hover:border-primary/50 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring/50 data-dragging:border-primary data-dragging:bg-primary/5 aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:hover:border-border aria-disabled:hover:bg-transparent",
+        className
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        className="hidden"
+        onChange={e => { handleFiles(e.target.files); e.target.value = "" }}
+      />
+      {children ?? (
+        <>
+          <span className="flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5">
+            {icon ?? <UploadIcon />}
+          </span>
+          <p className="text-sm font-medium text-foreground">{title}</p>
+          {description && <p className="text-xs text-muted-foreground">{description}</p>}
+        </>
+      )}
+    </div>
+  )
+}
+
+export { Dropzone }

package/src/components/empty-state.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Estado vazio: ícone, título, explicação e uma ação. Para listas sem itens,
+ * buscas sem resultado e telas que ainda não têm conteúdo.
+ *
+ *   <EmptyState
+ *     icon={<FileText />}
+ *     title="Nenhum documento ainda"
+ *     description="Crie um documento ou importe uma apresentação para começar."
+ *     action={<Button><Plus /> Novo documento</Button>}
+ *   />
+ *
+ * `bordered` desenha a moldura tracejada, para quando o vazio ocupa o lugar de
+ * uma área (lista, quadro) e precisa mostrar o contorno dela.
+ */
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  bordered = false,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"div">, "title"> & {
+  icon?: React.ReactNode
+  title: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  bordered?: boolean
+}) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-2 px-6 py-12 text-center",
+        bordered && "rounded-lg border-2 border-dashed border-border",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className="mb-1 flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-6">
+          {icon}
+        </span>
+      )}
+      <p className="text-base font-semibold text-foreground">{title}</p>
+      {description && <p className="max-w-sm text-sm text-muted-foreground">{description}</p>}
+      {action && <div className="mt-3 flex flex-wrap items-center justify-center gap-2">{action}</div>}
+    </div>
+  )
+}
+
+export { EmptyState }

package/src/components/multi-select.tsx

@@ -0,0 +1,206 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+import { Badge } from "./badge.js"
+import { useFieldControl } from "./field.js"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js"
+
+export type MultiSelectOption = {
+  value: string
+  label: string
+  /** Agrupa as opções sob um título (ex.: o eixo de uma ação). */
+  group?: string
+  /** Bolinha de cor antes do rótulo. */
+  color?: string
+  disabled?: boolean
+}
+
+/**
+ * Seleção de vários itens com busca, como o MultiSelect do Mantine.
+ *
+ *   <MultiSelect
+ *     options={eixos.map(e => ({ value: e.id, label: e.name, color: e.color }))}
+ *     value={selecionados}
+ *     onValueChange={setSelecionados}
+ *     placeholder="Todos os eixos"
+ *   />
+ *
+ * Teclado: digite para filtrar, ↑/↓ para andar, Enter para marcar/desmarcar,
+ * Esc para fechar. Dentro de um <Field>, o gatilho recebe o id e os aria-*.
+ */
+function MultiSelect({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Selecione",
+  searchPlaceholder = "Buscar…",
+  emptyText = "Nada encontrado.",
+  maxDisplayed = 2,
+  searchable = true,
+  size = "default",
+  disabled = false,
+  className,
+  contentClassName,
+  ...props
+}: {
+  options: MultiSelectOption[]
+  value: string[]
+  onValueChange: (value: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  /** Quantos selecionados aparecem como selo antes de virar "N selecionados". */
+  maxDisplayed?: number
+  searchable?: boolean
+  size?: "sm" | "default"
+  disabled?: boolean
+  className?: string
+  contentClassName?: string
+  id?: string
+  "aria-label"?: string
+  "aria-describedby"?: string
+  "aria-invalid"?: React.AriaAttributes["aria-invalid"]
+}) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+  const [active, setActive] = React.useState(0)
+  const listId = React.useId()
+
+  const selected = new Set(value)
+  const q = query.trim().toLowerCase()
+  const filtered = q ? options.filter(o => o.label.toLowerCase().includes(q)) : options
+  const selectable = filtered.filter(o => !o.disabled)
+
+  function toggle(v: string) {
+    onValueChange(selected.has(v) ? value.filter(x => x !== v) : [...value, v])
+  }
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive(i => Math.min(i + 1, selectable.length - 1)) }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive(i => Math.max(i - 1, 0)) }
+    else if (e.key === "Enter") { e.preventDefault(); const o = selectable[active]; if (o) toggle(o.value) }
+  }
+
+  // Grupos na ordem em que aparecem nas opções.
+  const groups: { name: string | undefined; items: MultiSelectOption[] }[] = []
+  for (const o of filtered) {
+    const g = groups.find(x => x.name === o.group)
+    if (g) g.items.push(o)
+    else groups.push({ name: o.group, items: [o] })
+  }
+
+  const selectedOptions = options.filter(o => selected.has(o.value))
+
+  return (
+    <Popover open={open} onOpenChange={o => { setOpen(o); if (!o) { setQuery(""); setActive(0) } }}>
+      <PopoverTrigger asChild disabled={disabled}>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listId}
+          data-slot="multi-select-trigger"
+          data-size={size}
+          {...controlProps}
+          className={cn(
+            "flex w-full min-w-0 cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent pr-2.5 pl-3 text-left text-sm transition-colors outline-none focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-[size=default]:h-9 data-[size=sm]:h-7.5 data-[state=open]:border-ring dark:bg-input/30",
+            className
+          )}
+        >
+          <span className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+            {selectedOptions.length === 0 ? (
+              <span className="truncate text-muted-foreground">{placeholder}</span>
+            ) : selectedOptions.length <= maxDisplayed ? (
+              selectedOptions.map(o => (
+                <Badge key={o.value} variant="secondary" className="max-w-[10rem] normal-case">
+                  <span className="truncate">{o.label}</span>
+                </Badge>
+              ))
+            ) : (
+              <span className="truncate">{selectedOptions.length} selecionados</span>
+            )}
+          </span>
+          <ChevronDownIcon className="size-4 shrink-0 opacity-70" />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        className={cn("w-(--radix-popover-trigger-width) min-w-60 p-0", contentClassName)}
+        onKeyDown={onKeyDown}
+      >
+        {searchable && (
+          <div className="flex items-center gap-2 border-b border-border px-3">
+            <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+            <input
+              autoFocus
+              value={query}
+              onChange={e => { setQuery(e.target.value); setActive(0) }}
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+              aria-controls={listId}
+              className="h-9 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            />
+          </div>
+        )}
+
+        <div id={listId} role="listbox" aria-multiselectable className="max-h-64 overflow-y-auto overscroll-contain p-1">
+          {filtered.length === 0 ? (
+            <p className="px-2.5 py-6 text-center text-sm text-muted-foreground">{emptyText}</p>
+          ) : (
+            groups.map(g => (
+              <div key={g.name ?? "_"} role="group" aria-label={g.name}>
+                {g.name && <p className="px-2.5 pt-2 pb-1 text-xs font-medium text-muted-foreground">{g.name}</p>}
+                {g.items.map(o => {
+                  const isSelected = selected.has(o.value)
+                  const isActive = selectable[active]?.value === o.value
+                  return (
+                    <div
+                      key={o.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      aria-disabled={o.disabled || undefined}
+                      data-active={isActive || undefined}
+                      onMouseEnter={() => { const i = selectable.indexOf(o); if (i >= 0) setActive(i) }}
+                      onClick={() => !o.disabled && toggle(o.value)}
+                      className="flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm select-none data-active:bg-accent aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+                    >
+                      <span
+                        className={cn(
+                          "flex size-4 shrink-0 items-center justify-center rounded border",
+                          isSelected ? "border-primary bg-primary text-primary-foreground" : "border-input"
+                        )}
+                      >
+                        {isSelected && <CheckIcon className="size-3 stroke-3" />}
+                      </span>
+                      {o.color && <span className="size-2 shrink-0 rounded-full" style={{ background: o.color }} />}
+                      <span className="truncate">{o.label}</span>
+                    </div>
+                  )
+                })}
+              </div>
+            ))
+          )}
+        </div>
+
+        {value.length > 0 && (
+          <div className="flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground">
+            <span>{value.length} selecionado{value.length === 1 ? "" : "s"}</span>
+            <button
+              type="button"
+              onClick={() => onValueChange([])}
+              className="cursor-pointer rounded font-medium text-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring/50"
+            >
+              Limpar
+            </button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { MultiSelect }

package/src/components/page-header.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Cabeçalho de página: título, descrição e ações à direita. É a abertura de
+ * toda tela de produto — o header do app mostra só o caminho (breadcrumb),
+ * então o título e a explicação da página vivem aqui.
+ *
+ *   <PageHeader
+ *     title="Painel Executivo"
+ *     description="Arquivos da empresa compartilhados com a diretoria."
+ *     actions={<Button>Enviar arquivo</Button>}
+ *   />
+ *
+ * No celular as ações descem para baixo do título.
+ */
+function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"div">, "title"> & {
+  title: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="page-header"
+      className={cn("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6", className)}
+      {...props}
+    >
+      <div className="min-w-0">
+        <h1 className="text-xl leading-tight font-semibold text-foreground sm:text-2xl">{title}</h1>
+        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+    </div>
+  )
+}
+
+export { PageHeader }

package/src/components/popover.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+/** Painel flutuante ancorado num gatilho (Radix Popover), com a mesma
+ *  superfície dos menus e do Select. */
+function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-lg bg-popover p-3 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent }

package/src/components/progress.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+const tones = {
+  default: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+}
+
+/** Barra de progresso (0–100), como o Progress do Mantine. */
+function Progress({
+  value,
+  tone = "default",
+  size = "default",
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "value"> & {
+  /** 0 a 100. Valores fora da faixa são limitados. */
+  value: number
+  tone?: keyof typeof tones
+  size?: "sm" | "default" | "lg"
+}) {
+  const pct = Math.max(0, Math.min(100, value))
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      value={pct}
+      className={cn(
+        "relative w-full overflow-hidden rounded-full bg-muted",
+        size === "sm" ? "h-1" : size === "lg" ? "h-3" : "h-2",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className={cn("h-full rounded-full transition-[width] duration-300", tones[tone])}
+        style={{ width: `${pct}%` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/components/segmented-control.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+export type SegmentedControlItem = {
+  value: string
+  label: React.ReactNode
+  /** Ícone antes do rótulo. */
+  icon?: React.ReactNode
+  disabled?: boolean
+  /** Rótulo acessível quando `label` não é texto. */
+  "aria-label"?: string
+}
+
+/**
+ * Escolha exclusiva entre poucas opções, como o SegmentedControl do Mantine:
+ * trilho cinza com a opção ativa destacada. Para trocar o MODO de ver o mesmo
+ * conteúdo (Lista | Quadro, 30d | 60d | 90d). Para navegar entre conteúdos
+ * diferentes, use Tabs.
+ *
+ *   <SegmentedControl
+ *     value={view}
+ *     onValueChange={setView}
+ *     data={[{ value: "lista", label: "Lista" }, { value: "quadro", label: "Quadro" }]}
+ *   />
+ *
+ * Sempre há uma opção ativa: clicar na ativa não a desmarca.
+ */
+function SegmentedControl({
+  data,
+  value,
+  onValueChange,
+  size = "default",
+  fullWidth = false,
+  disabled,
+  className,
+  "aria-label": ariaLabel,
+}: {
+  data: SegmentedControlItem[]
+  value: string
+  onValueChange: (value: string) => void
+  size?: "sm" | "default"
+  /** Ocupa a largura disponível, com as opções em partes iguais. */
+  fullWidth?: boolean
+  disabled?: boolean
+  className?: string
+  "aria-label"?: string
+}) {
+  return (
+    <ToggleGroupPrimitive.Root
+      type="single"
+      value={value}
+      // O Radix desmarca ao clicar na opção ativa (valor vazio): ignora.
+      onValueChange={v => { if (v) onValueChange(v) }}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      data-slot="segmented-control"
+      className={cn(
+        "inline-flex items-center gap-0.5 rounded-lg bg-muted p-0.5 text-muted-foreground",
+        size === "sm" ? "h-7.5" : "h-9",
+        fullWidth ? "flex w-full" : "w-fit",
+        className
+      )}
+    >
+      {data.map(item => (
+        <ToggleGroupPrimitive.Item
+          key={item.value}
+          value={item.value}
+          disabled={item.disabled}
+          aria-label={item["aria-label"]}
+          data-slot="segmented-control-item"
+          className={cn(
+            "inline-flex h-full cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 font-medium whitespace-nowrap transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm dark:data-[state=on]:bg-input/60 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            size === "sm" ? "text-xs" : "text-sm",
+            fullWidth && "flex-1"
+          )}
+        >
+          {item.icon}
+          {item.label}
+        </ToggleGroupPrimitive.Item>
+      ))}
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+export { SegmentedControl }