@fldev-solution/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fldev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# @fldev-solution/ui
+
+Primitivos e hooks do kernel de UI da fldev. Blocos compostos (login,
+DataTable, LineChart…) não vêm por aqui: vêm pelo registry do shadcn, em
+<https://ui.fldev.com.br/r/index.json>. O que todo produto usa igual vai por
+npm; o que todo produto ajusta vai por registry.
+
+```bash
+npm i @fldev-solution/ui
+```
+
+```tsx
+import { Button, Alert, Field, Input, useModo } from "@fldev-solution/ui";
+```
+
+## CSS: a ordem importa
+
+Os componentes não carregam cor própria: leem tokens semânticos que a marca
+define. Sem o `tokens.css` de uma marca importado **antes**, nada tem cor.
+
+```css
+@import "tailwindcss";
+@import "@fontsource-variable/inter";        /* a fonte que a marca declara */
+@import "./design-system/tokens/tokens.css"; /* valores — da marca */
+@import "@fldev-solution/ui/styles.css";     /* nomes de utility — do kernel */
+@source "../node_modules/@fldev-solution/ui/dist";
+```
+
+O `@source` é obrigatório: o Tailwind v4 não varre `node_modules`, e sem ele
+as classes usadas dentro dos componentes não entram no CSS final. Ajuste o
+caminho relativo ao arquivo CSS.
+
+O tema de uma marca também vem pelo registry:
+
+```bash
+npx shadcn add https://ui.fldev.com.br/r/brand-demo-teal.json
+```
+
+## Modo e marca
+
+`useModo` alterna claro/escuro. `useBrand` também troca a marca na raiz — use
+só em white-label, e nunca em página que mostra duas marcas ao mesmo tempo:
+escrever `data-brand` na raiz faz o documento inteiro casar com o seletor de
+todas as marcas.
+
+## Requisitos
+
+React 18+ e Tailwind CSS v4.

package/dist/index.d.ts

@@ -0,0 +1,258 @@
+import { ClassValue } from 'clsx';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { RowData } from '@tanstack/react-table';
+import * as react from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, ReactElement, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Conjunto de features do DataTable do kernel: ordenação, filtro de coluna,
+ * filtro global e paginação — nada além. Em v9 a feature precisa ser
+ * registrada para o estado dela existir; registrar o que não se usa é peso
+ * morto no bundle.
+ *
+ * Slots de row model vêm DEPOIS da feature que os requer.
+ */
+declare const dataTableFeatures: {
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    rowPaginationFeature: _tanstack_react_table.TableFeature;
+    paginatedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+};
+type DataTableFeatures = typeof dataTableFeatures;
+/**
+ * Column helper já amarrado às features do kernel. Sem isso, cada consumidor
+ * escreve `createColumnHelper<typeof dataTableFeatures, Linha>()` à mão e
+ * erra o primeiro parâmetro — que é justamente o que o v9 usa para saber
+ * quais APIs de coluna existem.
+ */
+declare function criarColumnHelper<TLinha extends RowData>(): _tanstack_react_table.ColumnHelper<{
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    columnFilteringFeature: _tanstack_react_table.TableFeature;
+    globalFilteringFeature: _tanstack_react_table.TableFeature;
+    filteredRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    rowPaginationFeature: _tanstack_react_table.TableFeature;
+    paginatedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+}, TLinha>;
+
+type Modo = "light" | "dark";
+/**
+ * Alterna claro/escuro no elemento raiz. É o que quase todo produto precisa:
+ * a marca é fixa, só o modo muda.
+ */
+declare function useModo(inicial?: Modo): {
+    modo: Modo;
+    setModo: react.Dispatch<react.SetStateAction<Modo>>;
+    alternarModo: () => void;
+};
+/**
+ * Para white-label: aplica marca E modo no elemento raiz.
+ *
+ * Cuidado: escrever `data-brand` na raiz faz o documento inteiro casar com
+ * `[data-brand="x"]`. Se a página mostra mais de uma marca ao mesmo tempo,
+ * use `useModo` e ponha `data-brand` no contêiner de cada marca — senão
+ * seletores escopados passam a casar tudo.
+ */
+declare function useBrand(marcaInicial: string, modoInicial?: Modo): {
+    marca: string;
+    setMarca: react.Dispatch<react.SetStateAction<string>>;
+    modo: Modo;
+    setModo: react.Dispatch<react.SetStateAction<Modo>>;
+    alternarModo: () => void;
+};
+
+declare const botao: (props?: ({
+    variante?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    tamanho?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof botao> {
+    carregando?: boolean;
+}
+declare function Button({ className, variante, tamanho, carregando, disabled, children, ...props }: ButtonProps): react.JSX.Element;
+
+/**
+ * As quatro famílias são estruturalmente idênticas — só o token muda. Isso é
+ * de propósito: alerta que difere em layout entre níveis ensina o usuário a
+ * ler layout em vez de cor, e aí o nível deixa de comunicar.
+ */
+declare const alerta: (props?: ({
+    nivel?: "success" | "info" | "warning" | "danger" | null | undefined;
+    variante?: "surface" | "solid" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alerta> {
+    titulo?: ReactNode;
+    icone?: ReactNode;
+}
+declare function Alert({ className, nivel, variante, titulo, icone, children, ...props }: AlertProps): react.JSX.Element;
+
+interface DialogProps {
+    aberto: boolean;
+    onFechar: () => void;
+    titulo: ReactNode;
+    descricao?: ReactNode;
+    children?: ReactNode;
+    rodape?: ReactNode;
+    tamanho?: "sm" | "md" | "lg" | "full";
+    /** Impede fechar por Esc ou clique no backdrop. Use só em fluxo destrutivo. */
+    persistente?: boolean;
+    className?: string;
+}
+/**
+ * Modal sobre o <dialog> nativo — sem dependência de biblioteca.
+ *
+ * O elemento nativo já entrega, correto e de graça: armadilha de foco, o
+ * resto da página inerte, Esc para fechar, camada de topo acima de qualquer
+ * z-index, e ::backdrop. Reimplementar isso em React é como a maioria das
+ * libs de modal nasce com bug de acessibilidade.
+ *
+ * O que ele NÃO entrega e está resolvido aqui: travar o scroll do body,
+ * fechar por clique no backdrop, e o modo persistente.
+ */
+declare function Dialog({ aberto, onFechar, titulo, descricao, children, rodape, tamanho, persistente, className, }: DialogProps): react.JSX.Element;
+
+declare const selo: (props?: ({
+    nivel?: "brand" | "success" | "info" | "warning" | "danger" | "neutral" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof selo> {
+}
+declare function Badge({ className, nivel, ...props }: BadgeProps): react.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label: ReactNode;
+    ajuda?: ReactNode;
+}
+/**
+ * Checkbox nativo com aparência própria via `appearance-none`, não um `<div>`
+ * fingindo ser checkbox. Mantém de graça: teclado, formulário, leitores de
+ * tela, autofill e estado indeterminado.
+ */
+declare function Checkbox({ label, ajuda, className, id: idExterno, ...props }: CheckboxProps): react.JSX.Element;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    invalido?: boolean;
+}
+declare function Input({ className, invalido, ...props }: InputProps): react.JSX.Element;
+
+interface FieldProps {
+    label: ReactNode;
+    /** Texto de apoio. Some quando há erro — dois textos competindo confunde. */
+    ajuda?: ReactNode;
+    erro?: ReactNode;
+    obrigatorio?: boolean;
+    className?: string;
+    /** Recebe id, aria-describedby e aria-invalid já ligados. */
+    children: (props: {
+        id: string;
+        "aria-describedby": string | undefined;
+        "aria-invalid": boolean | undefined;
+    }) => ReactElement;
+}
+/**
+ * Amarra label, ajuda e erro ao controle com os ids corretos. Existe porque
+ * `aria-describedby` escrito à mão em cada formulário erra — e erra silencioso.
+ */
+declare function Field({ label, ajuda, erro, obrigatorio, className, children }: FieldProps): react.JSX.Element;
+
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    invalido?: boolean;
+    /** "new-password" em cadastro e redefinição; "current-password" no login. */
+    autoComplete?: "current-password" | "new-password";
+}
+/**
+ * Campo de senha com alternância de visibilidade.
+ *
+ * O `autoComplete` é obrigatório e tipado: gerenciador de senha que não sabe
+ * distinguir login de cadastro salva a senha errada, e isso aparece como
+ * "o site quebrou meu gerenciador", nunca como bug de UI.
+ */
+declare function PasswordInput({ className, invalido, autoComplete, ...props }: PasswordInputProps): react.JSX.Element;
+
+declare function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>): react.JSX.Element;
+declare function THead({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TR({ className, selecionada, ...props }: HTMLAttributes<HTMLTableRowElement> & {
+    selecionada?: boolean;
+}): react.JSX.Element;
+declare function TH({ className, numerica, ...props }: ThHTMLAttributes<HTMLTableCellElement> & {
+    numerica?: boolean;
+}): react.JSX.Element;
+declare function TD({ className, numerica, ...props }: TdHTMLAttributes<HTMLTableCellElement> & {
+    numerica?: boolean;
+}): react.JSX.Element;
+
+interface EmptyStateProps {
+    titulo: ReactNode;
+    descricao?: ReactNode;
+    acao?: ReactNode;
+    icone?: ReactNode;
+    className?: string;
+}
+/**
+ * Estado vazio pede três coisas: dizer o que falta, por que está vazio, e o
+ * próximo passo. "Nenhum resultado" sozinho é um beco sem saída.
+ */
+declare function EmptyState({ titulo, descricao, acao, icone, className }: EmptyStateProps): react.JSX.Element;
+
+interface PaginationProps {
+    pagina: number;
+    totalPaginas: number;
+    totalLinhas: number;
+    podeVoltar: boolean;
+    podeAvancar: boolean;
+    onVoltar: () => void;
+    onAvancar: () => void;
+    className?: string;
+}
+declare function Pagination({ pagina, totalPaginas, totalLinhas, podeVoltar, podeAvancar, onVoltar, onAvancar, className, }: PaginationProps): react.JSX.Element;
+
+interface SparklineProps {
+    valores: number[];
+    /** Token de cor da série. Padrão: a cor primária da marca. */
+    cor?: string;
+    largura?: number;
+    altura?: number;
+    className?: string;
+    rotulo: string;
+}
+/**
+ * Linha de 2px com marcador de fim. Sem eixo, sem grade — sparkline é forma,
+ * não gráfico: mostra direção, não valor. O valor fica na métrica ao lado.
+ */
+declare function Sparkline({ valores, cor, largura, altura, className, rotulo, }: SparklineProps): react.JSX.Element | null;
+
+declare function Spinner({ className }: {
+    className?: string;
+}): react.JSX.Element;
+
+type DirecaoDelta = "subiu" | "caiu" | "estavel";
+type SentidoDelta = "bom" | "ruim" | "neutro";
+interface StatTileProps {
+    rotulo: ReactNode;
+    valor: ReactNode;
+    unidade?: ReactNode;
+    delta?: {
+        texto: string;
+        direcao: DirecaoDelta;
+        sentido: SentidoDelta;
+    };
+    apoio?: ReactNode;
+    grafico?: ReactNode;
+    className?: string;
+}
+/**
+ * Métrica sem gráfico. Quando a história é UM número, gráfico é ruído — esta
+ * é a forma certa, não um gráfico de uma barra.
+ *
+ * O número usa algarismos proporcionais de propósito: tabular-nums em número
+ * grande e solto deixa "121" frouxo. Tabular só onde há alinhamento vertical.
+ */
+declare function StatTile({ rotulo, valor, unidade, delta, apoio, grafico, className }: StatTileProps): react.JSX.Element;
+
+export { Alert, type AlertProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, type DataTableFeatures, Dialog, type DialogProps, type DirecaoDelta, EmptyState, type EmptyStateProps, Field, type FieldProps, Input, type InputProps, type Modo, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type SentidoDelta, Sparkline, type SparklineProps, Spinner, StatTile, type StatTileProps, TBody, TD, TH, THead, TR, Table, alerta as alertVariants, selo as badgeVariants, botao as buttonVariants, cn, criarColumnHelper, dataTableFeatures, useBrand, useModo };

package/dist/index.js

@@ -0,0 +1,523 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { tableFeatures, rowPaginationFeature, globalFilteringFeature, columnFilteringFeature, rowSortingFeature, createPaginatedRowModel, createFilteredRowModel, createSortedRowModel, createColumnHelper } from '@tanstack/react-table';
+import { useState, useEffect, useCallback, useRef, useId } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var dataTableFeatures = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  columnFilteringFeature,
+  globalFilteringFeature,
+  filteredRowModel: createFilteredRowModel(),
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel()
+});
+function criarColumnHelper() {
+  return createColumnHelper();
+}
+function useModo(inicial = "light") {
+  const [modo, setModo] = useState(inicial);
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", modo === "dark");
+  }, [modo]);
+  const alternarModo = useCallback(
+    () => setModo((m) => m === "dark" ? "light" : "dark"),
+    []
+  );
+  return { modo, setModo, alternarModo };
+}
+function useBrand(marcaInicial, modoInicial = "light") {
+  const [marca, setMarca] = useState(marcaInicial);
+  const { modo, setModo, alternarModo } = useModo(modoInicial);
+  useEffect(() => {
+    document.documentElement.dataset.brand = marca;
+  }, [marca]);
+  return { marca, setMarca, modo, setModo, alternarModo };
+}
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Carregando",
+      className: cn(
+        "inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-none",
+        className
+      )
+    }
+  );
+}
+var botao = cva(
+  // O anel de foco usa ring-ring/ring-offset-background: foco visível é
+  // requisito WCAG, não enfeite — por isso não é removível por variante.
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variante: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background text-foreground hover:bg-muted",
+        ghost: "text-foreground hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+      },
+      tamanho: {
+        sm: "h-8 rounded-md px-3 text-[0.8125rem]",
+        md: "h-9 rounded-md px-4 text-sm",
+        lg: "h-10 rounded-lg px-6 text-sm",
+        icon: "size-9 rounded-md"
+      }
+    },
+    defaultVariants: { variante: "primary", tamanho: "md" }
+  }
+);
+function Button({
+  className,
+  variante,
+  tamanho,
+  carregando = false,
+  disabled,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(botao({ variante, tamanho }), className),
+      disabled: disabled ?? carregando,
+      "aria-busy": carregando || void 0,
+      ...props,
+      children: [
+        carregando ? /* @__PURE__ */ jsx(Spinner, {}) : null,
+        children
+      ]
+    }
+  );
+}
+var alerta = cva(
+  "relative flex w-full gap-3 rounded-lg border px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      nivel: {
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      },
+      variante: { surface: "", solid: "" }
+    },
+    compoundVariants: [
+      { nivel: "success", variante: "surface", class: "bg-success border-success-border text-success-foreground" },
+      { nivel: "info", variante: "surface", class: "bg-info border-info-border text-info-foreground" },
+      { nivel: "warning", variante: "surface", class: "bg-warning border-warning-border text-warning-foreground" },
+      { nivel: "danger", variante: "surface", class: "bg-danger border-danger-border text-danger-foreground" },
+      { nivel: "success", variante: "solid", class: "bg-success-solid border-transparent text-success-solid-foreground" },
+      { nivel: "info", variante: "solid", class: "bg-info-solid border-transparent text-info-solid-foreground" },
+      { nivel: "warning", variante: "solid", class: "bg-warning-solid border-transparent text-warning-solid-foreground" },
+      { nivel: "danger", variante: "solid", class: "bg-danger-solid border-transparent text-danger-solid-foreground" }
+    ],
+    defaultVariants: { nivel: "info", variante: "surface" }
+  }
+);
+function Alert({ className, nivel, variante, titulo, icone, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: nivel === "danger" ? "alert" : "status",
+      className: cn(alerta({ nivel, variante }), className),
+      ...props,
+      children: [
+        icone,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          titulo ? /* @__PURE__ */ jsx("p", { className: "font-semibold", children: titulo }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: cn(titulo && "mt-1 opacity-90"), children }) : null
+        ] })
+      ]
+    }
+  );
+}
+var TAMANHO = {
+  sm: "max-w-sm",
+  md: "max-w-lg",
+  lg: "max-w-3xl",
+  full: "max-w-[min(96vw,80rem)] h-[min(92vh,60rem)]"
+};
+function Dialog({
+  aberto,
+  onFechar,
+  titulo,
+  descricao,
+  children,
+  rodape,
+  tamanho = "md",
+  persistente = false,
+  className
+}) {
+  const ref = useRef(null);
+  const id = useId();
+  const idTitulo = `${id}-titulo`;
+  const idDescricao = `${id}-descricao`;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (aberto && !el.open) el.showModal();
+    if (!aberto && el.open) el.close();
+  }, [aberto]);
+  useEffect(() => {
+    if (!aberto) return;
+    const anterior = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = anterior;
+    };
+  }, [aberto]);
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref,
+      "aria-labelledby": idTitulo,
+      "aria-describedby": descricao ? idDescricao : void 0,
+      onCancel: (e) => {
+        if (persistente) e.preventDefault();
+        else onFechar();
+      },
+      onClose: () => {
+        if (aberto) onFechar();
+      },
+      onClick: (e) => {
+        if (!persistente && e.target === ref.current) onFechar();
+      },
+      className: cn(
+        "m-auto w-[calc(100vw-2rem)] rounded-lg border border-border bg-card p-0 text-card-foreground shadow-lg",
+        "backdrop:bg-overlay backdrop:backdrop-blur-[2px]",
+        TAMANHO[tamanho],
+        // open:flex, não flex. Um <dialog> fechado é display:none pela folha
+        // do navegador; uma classe com display:flex sobrescreve isso e o modal
+        // passa a renderizar no fluxo da página o tempo todo.
+        tamanho === "full" && "open:flex open:flex-col",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-4 border-b border-border px-5 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h2", { id: idTitulo, className: "text-base font-semibold", children: titulo }),
+            descricao ? /* @__PURE__ */ jsx("p", { id: idDescricao, className: "mt-0.5 text-sm text-muted-foreground", children: descricao }) : null
+          ] }),
+          persistente ? null : /* @__PURE__ */ jsx(Button, { variante: "ghost", tamanho: "icon", onClick: onFechar, "aria-label": "Fechar", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", strokeLinecap: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("px-5 py-4", tamanho === "full" && "min-h-0 flex-1 overflow-auto"), children }),
+        rodape ? /* @__PURE__ */ jsx("footer", { className: "flex justify-end gap-2 border-t border-border px-5 py-3", children: rodape }) : null
+      ]
+    }
+  );
+}
+var selo = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap",
+  {
+    variants: {
+      nivel: {
+        neutral: "bg-muted border-border text-muted-foreground",
+        brand: "bg-accent border-transparent text-accent-foreground",
+        success: "bg-success border-success-border text-success-foreground",
+        info: "bg-info border-info-border text-info-foreground",
+        warning: "bg-warning border-warning-border text-warning-foreground",
+        danger: "bg-danger border-danger-border text-danger-foreground"
+      }
+    },
+    defaultVariants: { nivel: "neutral" }
+  }
+);
+function Badge({ className, nivel, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(selo({ nivel }), className), ...props });
+}
+function Checkbox({ label, ajuda, className, id: idExterno, ...props }) {
+  const gerado = useId();
+  const id = idExterno ?? gerado;
+  const idAjuda = `${id}-ajuda`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "relative mt-0.5 inline-grid shrink-0 place-items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          id,
+          "aria-describedby": ajuda ? idAjuda : void 0,
+          className: cn(
+            "peer size-4 appearance-none rounded border border-input bg-background",
+            "checked:border-primary checked:bg-primary",
+            "indeterminate:border-primary indeterminate:bg-primary",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            "disabled:cursor-not-allowed disabled:opacity-50"
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute size-3 text-primary-foreground opacity-0 peer-checked:opacity-100",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M3 8.5l3.5 3.5L13 5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm text-foreground", children: label }),
+      ajuda ? /* @__PURE__ */ jsx("p", { id: idAjuda, className: "text-xs text-muted-foreground", children: ajuda }) : null
+    ] })
+  ] });
+}
+function Input({ className, invalido, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm text-foreground transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        invalido && "border-danger-solid ring-danger-solid/20",
+        className
+      ),
+      "aria-invalid": invalido || void 0,
+      ...props
+    }
+  );
+}
+function Field({ label, ajuda, erro, obrigatorio, className, children }) {
+  const id = useId();
+  const idAjuda = `${id}-ajuda`;
+  const idErro = `${id}-erro`;
+  const descritores = [erro ? idErro : null, ajuda && !erro ? idAjuda : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "block text-sm font-medium text-foreground", children: [
+      label,
+      obrigatorio ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-danger-solid", "aria-hidden": "true", children: "*" }) : null
+    ] }),
+    children({
+      id,
+      "aria-describedby": descritores || void 0,
+      "aria-invalid": erro ? true : void 0
+    }),
+    erro ? /* @__PURE__ */ jsx("p", { id: idErro, className: "text-xs text-danger-foreground", children: erro }) : ajuda ? /* @__PURE__ */ jsx("p", { id: idAjuda, className: "text-xs text-muted-foreground", children: ajuda }) : null
+  ] });
+}
+var OLHO = "M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10Z";
+var RISCO = "M4 16 16 4";
+function PasswordInput({ className, invalido, autoComplete, ...props }) {
+  const [visivel, setVisivel] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: visivel ? "text" : "password",
+        autoComplete,
+        "aria-invalid": invalido || void 0,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-background py-1 pr-10 pl-3 text-sm text-foreground transition-colors",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          invalido && "border-danger-solid",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisivel((v) => !v),
+        "aria-pressed": visivel,
+        "aria-label": visivel ? "Ocultar senha" : "Mostrar senha",
+        className: cn(
+          "absolute top-1/2 right-1 -translate-y-1/2 rounded p-1.5 text-muted-foreground",
+          "hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("path", { d: OLHO }),
+          /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "2.2" }),
+          visivel ? /* @__PURE__ */ jsx("path", { d: RISCO, strokeLinecap: "round" }) : null
+        ] })
+      }
+    )
+  ] });
+}
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: cn("w-full caption-bottom border-collapse text-sm", className), ...props }) });
+}
+function THead({ className, ...props }) {
+  return /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b [&_tr]:border-border", className), ...props });
+}
+function TBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
+}
+function TR({
+  className,
+  selecionada,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-selecionada": selecionada || void 0,
+      "aria-selected": selecionada,
+      className: cn(
+        "border-b border-border transition-colors hover:bg-muted/60",
+        selecionada && "bg-accent/60",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TH({
+  className,
+  numerica,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "h-9 px-3 text-left align-middle text-xs font-semibold text-muted-foreground",
+        numerica && "text-right",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TD({
+  className,
+  numerica,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        "px-3 py-2 align-middle leading-[1.4] text-foreground",
+        numerica && "text-right tabular-nums",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyState({ titulo, descricao, acao, icone, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-2 px-6 py-12 text-center", className), children: [
+    icone ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icone }) : null,
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: titulo }),
+    descricao ? /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: descricao }) : null,
+    acao ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: acao }) : null
+  ] });
+}
+function Pagination({
+  pagina,
+  totalPaginas,
+  totalLinhas,
+  podeVoltar,
+  podeAvancar,
+  onVoltar,
+  onAvancar,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Pagina\xE7\xE3o",
+      className: cn("flex items-center justify-between gap-4 border-t border-border px-3 py-2", className),
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground tabular-nums", "aria-live": "polite", children: [
+          "P\xE1gina ",
+          pagina,
+          " de ",
+          totalPaginas,
+          " \xB7 ",
+          totalLinhas,
+          " registros"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variante: "outline", tamanho: "sm", onClick: onVoltar, disabled: !podeVoltar, children: "Anterior" }),
+          /* @__PURE__ */ jsx(Button, { variante: "outline", tamanho: "sm", onClick: onAvancar, disabled: !podeAvancar, children: "Pr\xF3xima" })
+        ] })
+      ]
+    }
+  );
+}
+function Sparkline({
+  valores,
+  cor = "var(--primary)",
+  largura = 120,
+  altura = 32,
+  className,
+  rotulo
+}) {
+  const id = useId();
+  if (valores.length < 2) return null;
+  const min = Math.min(...valores);
+  const max = Math.max(...valores);
+  const span = max - min || 1;
+  const pad = 4;
+  const x = (i) => pad + i / (valores.length - 1) * (largura - pad * 2);
+  const y = (v) => altura - pad - (v - min) / span * (altura - pad * 2);
+  const d = valores.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(2)},${y(v).toFixed(2)}`).join(" ");
+  const ultimoX = x(valores.length - 1);
+  const ultimoY = y(valores[valores.length - 1]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${largura} ${altura}`,
+      width: largura,
+      height: altura,
+      className: cn("overflow-visible", className),
+      role: "img",
+      "aria-labelledby": id,
+      children: [
+        /* @__PURE__ */ jsx("title", { id, children: rotulo }),
+        /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: cor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: ultimoX, cy: ultimoY, r: "4", fill: cor, stroke: "var(--card)", strokeWidth: "2" })
+      ]
+    }
+  );
+}
+var SETA = { subiu: "M10 4v12M10 4l-5 5M10 4l5 5", caiu: "M10 16V4M10 16l-5-5M10 16l5-5", estavel: "M4 10h12" };
+function StatTile({ rotulo, valor, unidade, delta, apoio, grafico, className }) {
+  const corDelta = delta?.sentido === "bom" ? "text-success-foreground" : delta?.sentido === "ruim" ? "text-danger-foreground" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-card p-4", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: rotulo }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-end justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-3xl leading-none font-semibold text-foreground", children: [
+        valor,
+        unidade ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-base font-normal text-muted-foreground", children: unidade }) : null
+      ] }),
+      grafico
+    ] }),
+    delta || apoio ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2 text-xs", children: [
+      delta ? (
+        /* Ícone + texto, nunca cor sozinha: quem não distingue verde de
+           vermelho precisa da seta e da palavra. */
+        /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1 font-medium", corDelta), children: [
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "size-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: SETA[delta.direcao] }) }),
+          delta.texto
+        ] })
+      ) : null,
+      apoio ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: apoio }) : null
+    ] }) : null
+  ] });
+}
+
+export { Alert, Badge, Button, Checkbox, Dialog, EmptyState, Field, Input, Pagination, PasswordInput, Sparkline, Spinner, StatTile, TBody, TD, TH, THead, TR, Table, alerta as alertVariants, selo as badgeVariants, botao as buttonVariants, cn, criarColumnHelper, dataTableFeatures, useBrand, useModo };

package/dist/styles.css

@@ -0,0 +1,89 @@
+/* Ponte entre os tokens semânticos (que o brand-forge escreve em :root) e as
+   utilities do Tailwind v4. Divisão de responsabilidade: o brand-forge é dono
+   dos VALORES, o kernel é dono dos NOMES de utility que seus componentes usam.
+
+   Importe DEPOIS do tokens.css da marca. */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-success: var(--success);
+  --color-success-border: var(--success-border);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-solid: var(--success-solid);
+  --color-success-solid-foreground: var(--success-solid-foreground);
+  --color-info: var(--info);
+  --color-info-border: var(--info-border);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-solid: var(--info-solid);
+  --color-info-solid-foreground: var(--info-solid-foreground);
+  --color-warning: var(--warning);
+  --color-warning-border: var(--warning-border);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-solid: var(--warning-solid);
+  --color-warning-solid-foreground: var(--warning-solid-foreground);
+  --color-danger: var(--danger);
+  --color-danger-border: var(--danger-border);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-danger-solid: var(--danger-solid);
+  --color-danger-solid-foreground: var(--danger-solid-foreground);
+
+  /* Véu atrás de modal. A marca pode emitir --overlay; enquanto não emite, o
+     fallback é preto a 50% — véu escurece nos dois modos, então não segue
+     --background nem --foreground. Fica aqui, na ponte, e não no componente. */
+  --color-overlay: var(--overlay, oklch(0% 0 0 / 0.5));
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* A família precisa ser reaplicada em cada contêiner de marca, não só no
+     body: em página multi-marca a marca vive abaixo do body, e font-family
+     herdada já vem resolvida — o token da marca nunca chegaria. */
+  /* Guarda contra o mesmo erro em qualquer dialog do produto: nenhuma
+     utility de display deve conseguir revelar um dialog fechado. */
+  dialog:not([open]) {
+    display: none;
+  }
+
+  body,
+  [data-brand] {
+    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@fldev-solution/ui",
+  "version": "0.1.0",
+  "description": "Kernel de UI compartilhado entre os SaaS da fldev. Primitivos, hooks e utilitários; blocos compostos vão pelo registry.",
+  "license": "MIT",
+  "homepage": "https://ui.fldev.com.br",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FLDEV-Solution/fldev-ui.git",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "react",
+    "tailwindcss",
+    "design-system",
+    "shadcn",
+    "multi-brand"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^9.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}