@strategicos/ui 0.5.0 → 0.6.1

package/src/components/multi-select.tsx

@@ -0,0 +1,210 @@
+"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,
+  onOpenChange,
+  ...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
+  /** Avisa quando a lista abre e fecha. Útil para gravar a seleção uma vez só,
+   *  ao fechar, em vez de a cada clique. */
+  onOpenChange?: (open: boolean) => void
+  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) }; onOpenChange?.(o) }}>
+      <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} selecionado{selectedOptions.length === 1 ? "" : "s"}</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/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 }

package/src/components/stat.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+import { Badge } from "./badge.js"
+
+/**
+ * Indicador numérico, como os "StatsGrid" do Mantine: rótulo, valor em
+ * destaque, contexto e, opcionalmente, um selo de variação e um ícone.
+ *
+ *   <Stat
+ *     label="Total após a reforma"
+ *     value="R$ 1.890.000"
+ *     description="2024 — primeira fase"
+ *     delta="−R$ 560k"
+ *     deltaTone="success"
+ *     icon={<TrendingDown />}
+ *   />
+ *
+ * Use num grid (ex.: `grid gap-4 sm:grid-cols-2 xl:grid-cols-4`).
+ */
+function Stat({
+  label,
+  value,
+  description,
+  delta,
+  deltaTone = "secondary",
+  icon,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"div">, "children"> & {
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  /** Variação ou etiqueta curta, num selo. */
+  delta?: React.ReactNode
+  deltaTone?: "secondary" | "success" | "warning" | "destructive" | "info"
+  icon?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="stat"
+      className={cn("flex flex-col gap-1 rounded-lg border border-border bg-card p-4 shadow-card", className)}
+      {...props}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <p className="text-sm text-muted-foreground">{label}</p>
+        {icon && (
+          <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4">
+            {icon}
+          </span>
+        )}
+      </div>
+      <p className="text-2xl leading-tight font-semibold text-foreground tabular-nums">{value}</p>
+      {(description || delta) && (
+        <div className="mt-1 flex flex-wrap items-center gap-2">
+          {/* normal-case: o Badge é em caixa alta, o que distorce valores ("p.p." → "P.P."). */}
+          {delta && <Badge variant={deltaTone} className="normal-case">{delta}</Badge>}
+          {description && <span className="text-xs text-muted-foreground">{description}</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Stat }