@strategicos/ui 0.5.0 → 0.6.0

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+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.
+ */
+declare function SegmentedControl({ data, value, onValueChange, size, fullWidth, 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;
+}): React.JSX.Element;
+export { SegmentedControl };
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/components/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,aAAa,EACb,IAAgB,EAChB,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE;IACD,IAAI,EAAE,oBAAoB,EAAE,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,qBAoCA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/segmented-control.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+/**
+ * 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, }) {
+    return (_jsx(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), children: data.map(item => (_jsxs(ToggleGroupPrimitive.Item, { 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"), children: [item.icon, item.label] }, item.value))) }));
+}
+export { SegmentedControl };
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../src/components/segmented-control.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE9D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAYpC;;;;;;;;;;;;;GAaG;AACH,SAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,aAAa,EACb,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,GAWxB;IACC,OAAO,CACL,KAAC,oBAAoB,CAAC,IAAI,IACxB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK;QACZ,mEAAmE;QACnE,aAAa,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC;YAAE,aAAa,CAAC,CAAC,CAAC,CAAA,CAAC,CAAC,EAC/C,QAAQ,EAAE,QAAQ,gBACN,SAAS,eACX,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CACX,kFAAkF,EAClF,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EACnC,SAAS,CACV,YAEA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChB,MAAC,oBAAoB,CAAC,IAAI,IAExB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,YAAY,CAAC,eACpB,wBAAwB,EAClC,SAAS,EAAE,EAAE,CACX,ybAAyb,EACzb,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACrC,SAAS,IAAI,QAAQ,CACtB,aAEA,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,KAAK,KAZN,IAAI,CAAC,KAAK,CAaW,CAC7B,CAAC,GACwB,CAC7B,CAAA;AACH,CAAC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/stat.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * 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`).
+ */
+declare function Stat({ label, value, description, delta, deltaTone, 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;
+}): React.JSX.Element;
+export { Stat };
+//# sourceMappingURL=stat.d.ts.map

package/dist/components/stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../src/components/stat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;GAcG;AACH,iBAAS,IAAI,CAAC,EACZ,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAuB,EACvB,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAA;IACxE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,qBAyBA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/stat.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    return (_jsxs("div", { "data-slot": "stat", className: cn("flex flex-col gap-1 rounded-lg border border-border bg-card p-4 shadow-card", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), icon && (_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4", children: icon }))] }), _jsx("p", { className: "text-2xl leading-tight font-semibold text-foreground tabular-nums", children: value }), (description || delta) && (_jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [delta && _jsx(Badge, { variant: deltaTone, className: "normal-case", children: delta }), description && _jsx("span", { className: "text-xs text-muted-foreground", children: description })] }))] }));
+}
+export { Stat };
+//# sourceMappingURL=stat.js.map

package/dist/components/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sourceRoot":"","sources":["../../src/components/stat.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC;;;;;;;;;;;;;;GAcG;AACH,SAAS,IAAI,CAAC,EACZ,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,SAAS,GAAG,WAAW,EACvB,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EAST;IACC,OAAO,CACL,4BACY,MAAM,EAChB,SAAS,EAAE,EAAE,CAAC,6EAA6E,EAAE,SAAS,CAAC,KACnG,KAAK,aAET,eAAK,SAAS,EAAC,wCAAwC,aACrD,YAAG,SAAS,EAAC,+BAA+B,YAAE,KAAK,GAAK,EACvD,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,2GAA2G,YACxH,IAAI,GACA,CACR,IACG,EACN,YAAG,SAAS,EAAC,mEAAmE,YAAE,KAAK,GAAK,EAC3F,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,CACzB,eAAK,SAAS,EAAC,wCAAwC,aAEpD,KAAK,IAAI,KAAC,KAAK,IAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAC,aAAa,YAAE,KAAK,GAAS,EAC3E,WAAW,IAAI,eAAM,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAQ,IAChF,CACP,IACG,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/tabs.d.ts

@@ -3,8 +3,8 @@ import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "line" | null | undefined;
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "line" | "default" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation">): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strategicos/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Componentes React da Strategicos (shadcn + Radix + Tailwind v4).",
   "license": "UNLICENSED",
   "repository": {

package/src/components/accordion.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+
+/** Seções que abrem e fecham (Radix Accordion), no estilo do Accordion do
+ *  Mantine: itens separados por fio, chevron à direita. */
+function Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b border-border last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion flex flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left text-sm font-medium text-foreground transition-colors outline-none hover:text-foreground/80 focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:shrink-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="size-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]/accordion:rotate-180" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/chip.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+
+/**
+ * Pílulas selecionáveis, como o Chip do Mantine: filtros por categoria, status
+ * e afins. Selecionada, a pílula ganha o fundo claro da cor primária e um ✓.
+ *
+ *   <ChipGroup type="single" value={categoria} onValueChange={setCategoria}>
+ *     <Chip value="todas">Todas</Chip>
+ *     <Chip value="legislacao">Legislação</Chip>
+ *   </ChipGroup>
+ *
+ *   <ChipGroup type="multiple" value={status} onValueChange={setStatus}>
+ *     <Chip value="todo" count={8}>A fazer</Chip>
+ *   </ChipGroup>
+ *
+ * Em `single`, clicar na selecionada não a desmarca (sempre há uma ativa).
+ * Os valores não podem ser vazios: o Radix trata "" como "nada selecionado".
+ * `scrollable` deixa o grupo numa linha só, rolando na horizontal no celular.
+ */
+
+type ChipGroupProps =
+  | {
+      type: "single"
+      value: string
+      onValueChange: (value: string) => void
+    }
+  | {
+      type: "multiple"
+      value: string[]
+      onValueChange: (value: string[]) => void
+    }
+
+function ChipGroup({
+  className,
+  children,
+  scrollable = false,
+  "aria-label": ariaLabel,
+  ...props
+}: ChipGroupProps & {
+  className?: string
+  children: React.ReactNode
+  scrollable?: boolean
+  "aria-label"?: string
+}) {
+  const shared = {
+    "aria-label": ariaLabel,
+    "data-slot": "chip-group",
+    className: cn(
+      "flex gap-1.5",
+      scrollable ? "no-scrollbar -mx-1 overflow-x-auto px-1 py-0.5" : "flex-wrap",
+      className
+    ),
+  }
+  if (props.type === "single") {
+    const { value, onValueChange } = props
+    return (
+      <ToggleGroupPrimitive.Root
+        type="single"
+        value={value}
+        onValueChange={v => { if (v) onValueChange(v) }}
+        {...shared}
+      >
+        {children}
+      </ToggleGroupPrimitive.Root>
+    )
+  }
+  return (
+    <ToggleGroupPrimitive.Root type="multiple" value={props.value} onValueChange={props.onValueChange} {...shared}>
+      {children}
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function Chip({
+  value,
+  count,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & {
+  /** Número exibido depois do rótulo (ex.: quantidade de itens). */
+  count?: number
+}) {
+  return (
+    <ToggleGroupPrimitive.Item
+      value={value}
+      data-slot="chip"
+      className={cn(
+        "group/chip inline-flex h-7.5 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background px-3 text-sm whitespace-nowrap text-foreground transition-colors outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:border-primary/50 data-[state=on]:bg-primary/10 data-[state=on]:text-primary-strong dark:bg-transparent",
+        className
+      )}
+      {...props}
+    >
+      <CheckIcon className="hidden size-3.5 shrink-0 stroke-3 group-data-[state=on]/chip:block" />
+      {children}
+      {count !== undefined && (
+        <span className="text-xs text-muted-foreground tabular-nums group-data-[state=on]/chip:text-primary-strong/80">
+          {count}
+        </span>
+      )}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ChipGroup, Chip }

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 }