@strategicos/ui 0.2.0 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;GAUG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,qBAa3D;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/textarea.js

@@ -1,18 +1,25 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+import { useFieldControl } from "./field.js";
 /**
  * Campo multilinha. Espelha os tokens do <Input> — mesma borda, mesmo raio,
- * mesmo anel de foco, mesmo tratamento de desabilitado e de aria-invalid — para
- * que um campo de texto longo não pareça de outro sistema ao lado de um curto.
+ * mesmo foco, mesmo tratamento de desabilitado e de aria-invalid — para que um
+ * campo de texto longo não pareça de outro sistema ao lado de um curto.
  *
  * Difere do Input só no que a multilinha exige: sem altura fixa, com padding
  * vertical maior e `leading-relaxed`.
  *
+ * `autosize`: a altura acompanha o texto (CSS `field-sizing: content`, sem
+ * JS). Limite a altura com `max-h-*` no className. Navegadores sem suporte
+ * (Firefox, hoje) mantêm a altura de `rows`.
+ *
  * Não confundir com o InlineTextarea do gerenciador: aquele é um editor inline
  * (sem borda até o hover, salva no blur), um padrão deliberadamente diferente.
  */
-function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("w-full min-w-0 resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-base leading-relaxed transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+function Textarea({ className, autosize = false, ...props }) {
+    const controlProps = useFieldControl(props);
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("w-full min-w-0 resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-base leading-relaxed transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:placeholder:text-destructive/60 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80", autosize && "field-sizing-content min-h-16 overflow-y-auto", className), ...controlProps }));
 }
 export { Textarea };
 //# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAEpC;;;;;;;;;;GAUG;AACH,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC;IACzE,OAAO,CACL,gCACY,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,ohBAAohB,EACphB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C;;;;;;;;;;;;;;GAcG;AACH,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACkD;IAC1D,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC3C,OAAO,CACL,gCACY,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,4aAA4a,EAC5a,QAAQ,IAAI,+CAA+C,EAC3D,SAAS,CACV,KACG,YAAY,GAChB,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/tooltip.js

@@ -12,7 +12,7 @@ function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-lg bg-foreground px-2.5 py-1 text-sm text-background has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })] }) }));
 }
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.js.map

package/package.json

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

package/src/components/alert.tsx

@@ -4,13 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../lib/utils.js"
 
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-1 rounded-lg px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-3 *:[svg]:row-span-2 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-5",
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        default: "bg-muted text-foreground",
+        // Status: fundo em /10 da cor; título e ícone na cor, texto neutro.
+        info:        "bg-info/10 *:data-[slot=alert-title]:text-info *:[svg]:text-info",
+        success:     "bg-success/10 *:data-[slot=alert-title]:text-success *:[svg]:text-success",
+        warning:     "bg-warning/10 *:data-[slot=alert-title]:text-warning-strong *:[svg]:text-warning",
+        destructive: "bg-destructive/10 *:data-[slot=alert-title]:text-destructive *:[svg]:text-destructive",
       },
     },
     defaultVariants: {
@@ -39,7 +42,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "font-semibold group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -55,7 +58,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        "text-sm text-balance text-foreground/80 md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className
       )}
       {...props}
@@ -67,7 +70,7 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
+      className={cn("absolute top-2.5 right-2.5", className)}
       {...props}
     />
   )

package/src/components/badge.tsx

@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "../lib/utils.js"
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 text-[11px] font-bold tracking-[0.025em] whitespace-nowrap uppercase transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {

package/src/components/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground shadow-card ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-lg border border-border bg-card py-4 text-sm text-card-foreground shadow-card has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-title"
       className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "font-heading text-base leading-snug font-semibold group-data-[size=sm]/card:text-sm",
         className
       )}
       {...props}
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-lg border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}

package/src/components/checkbox.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import { CheckIcon, MinusIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+
+/** Caixa de seleção (Radix Checkbox), no tamanho padrão do Mantine: 20px,
+ *  raio de 4px, marcada na cor primária. Aceita `checked="indeterminate"`.
+ *  Para rótulo, associe um <Label htmlFor> ao `id` do Checkbox. */
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer group/checkbox inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-input bg-background text-primary-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-checked:border-primary data-checked:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary dark:bg-input/30",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="flex items-center justify-center">
+        <CheckIcon className="size-3.5 stroke-3 group-data-[state=indeterminate]/checkbox:hidden" />
+        <MinusIcon className="hidden size-3.5 stroke-3 group-data-[state=indeterminate]/checkbox:block" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/components/field.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+import { Label } from "./label.js"
+
+/**
+ * Invólucro de um campo de formulário, como o Input.Wrapper do Mantine:
+ * rótulo, descrição, o controle e a mensagem de erro, nessa ordem.
+ *
+ * O controle dentro dele (Input, Textarea, PasswordInput, SelectTrigger) é
+ * ligado automaticamente: recebe o `id` do rótulo, o `aria-describedby` com a
+ * descrição e o erro, o `aria-invalid` quando há erro e o `required`. Nada
+ * disso precisa ser repetido na tela.
+ *
+ *   <Field label="E-mail" description="Usado nos avisos" error={erro} required>
+ *     <Input type="email" value={email} onChange={…} />
+ *   </Field>
+ */
+
+type FieldContextValue = {
+  id: string
+  describedBy?: string
+  invalid: boolean
+  required: boolean
+}
+
+const FieldContext = React.createContext<FieldContextValue | null>(null)
+
+type ControlProps = {
+  id?: string
+  "aria-describedby"?: string
+  "aria-invalid"?: React.AriaAttributes["aria-invalid"]
+}
+
+/** Mescla nas props do controle o que vem do Field em volta (se houver).
+ *  O que a tela passar explicitamente vence. `withRequired: false` para
+ *  controles em que `required` não é atributo válido (o SelectTrigger é um
+ *  <button>). */
+function useFieldControl<P extends ControlProps & { required?: boolean }>(
+  props: P,
+  { withRequired = true }: { withRequired?: boolean } = {}
+): P {
+  const field = React.useContext(FieldContext)
+  if (!field) return props
+  const describedBy = [props["aria-describedby"], field.describedBy].filter(Boolean).join(" ") || undefined
+  return {
+    ...props,
+    id: props.id ?? field.id,
+    "aria-describedby": describedBy,
+    "aria-invalid": props["aria-invalid"] ?? (field.invalid || undefined),
+    ...(withRequired && { required: props.required ?? (field.required || undefined) }),
+  }
+}
+
+function Field({
+  label,
+  description,
+  error,
+  required = false,
+  id,
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<"div">, "id"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  /** Mensagem de erro. Quando presente, o controle fica com aria-invalid. */
+  error?: React.ReactNode
+  /** Mostra o asterisco no rótulo e marca o controle como obrigatório. */
+  required?: boolean
+  /** id do controle. Sem ele, um id é gerado. */
+  id?: string
+}) {
+  const autoId = React.useId()
+  const controlId = id ?? autoId
+  const descriptionId = description ? `${controlId}-description` : undefined
+  const errorId = error ? `${controlId}-error` : undefined
+
+  const value = React.useMemo<FieldContextValue>(
+    () => ({
+      id: controlId,
+      describedBy: [descriptionId, errorId].filter(Boolean).join(" ") || undefined,
+      invalid: !!error,
+      required,
+    }),
+    [controlId, descriptionId, errorId, error, required]
+  )
+
+  return (
+    <div
+      data-slot="field"
+      data-invalid={error ? true : undefined}
+      className={cn("grid content-start gap-1.5", className)}
+      {...props}
+    >
+      {label && (
+        <Label htmlFor={controlId}>
+          {label}
+          {required && <span aria-hidden className="-ml-1 text-destructive">*</span>}
+        </Label>
+      )}
+      {description && (
+        <p id={descriptionId} data-slot="field-description" className="-mt-0.5 text-xs leading-snug text-muted-foreground">
+          {description}
+        </p>
+      )}
+      <FieldContext.Provider value={value}>{children}</FieldContext.Provider>
+      {error && (
+        <p id={errorId} data-slot="field-error" className="text-xs leading-snug text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export { Field, useFieldControl }

package/src/components/input.tsx

@@ -1,19 +1,59 @@
+"use client"
+
 import * as React from "react"
 
 import { cn } from "../lib/utils.js"
+import { useFieldControl } from "./field.js"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
+/** Classes do campo. Foco e erro seguem o Mantine: só a borda muda de cor,
+ *  sem halo em volta. */
+const inputClassName =
+  "h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:placeholder:text-destructive/60 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80"
+
+const sectionClassName =
+  "absolute inset-y-0 flex w-9 items-center justify-center text-muted-foreground [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+type InputProps = React.ComponentProps<"input"> & {
+  /** Conteúdo à esquerda, dentro do campo (ex.: ícone de busca). Não recebe
+   *  cliques: o clique passa para o campo. */
+  leftSection?: React.ReactNode
+  /** Conteúdo à direita, dentro do campo (ex.: botão de limpar). Recebe
+   *  cliques. */
+  rightSection?: React.ReactNode
+  /** Classes do invólucro, que só existe quando há seção. Use para largura e
+   *  posição no layout (flex-1, w-64…); `className` vai sempre no <input>. */
+  wrapperClassName?: string
+}
+
+function Input({ className, type, leftSection, rightSection, wrapperClassName, ...props }: InputProps) {
+  const controlProps = useFieldControl(props)
+
+  const input = (
     <input
       type={type}
       data-slot="input"
-      className={cn(
-        "h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
+      className={cn(inputClassName, !!leftSection && "pl-9", !!rightSection && "pr-9", className)}
+      {...controlProps}
     />
   )
+
+  if (!leftSection && !rightSection) return input
+
+  return (
+    <div data-slot="input-wrapper" className={cn("relative w-full min-w-0", wrapperClassName)}>
+      {leftSection && (
+        <span data-slot="input-left-section" className={cn(sectionClassName, "pointer-events-none left-0")}>
+          {leftSection}
+        </span>
+      )}
+      {input}
+      {rightSection && (
+        <span data-slot="input-right-section" className={cn(sectionClassName, "right-0")}>
+          {rightSection}
+        </span>
+      )}
+    </div>
+  )
 }
 
-export { Input }
+export { Input, inputClassName, type InputProps }

package/src/components/pagination.tsx

@@ -1,7 +1,6 @@
 import { ChevronLeft, ChevronRight } from "lucide-react"
 
 import { cn } from "../lib/utils.js"
-import { Button } from "./button.js"
 
 interface PaginationProps {
   page: number
@@ -13,6 +12,24 @@ interface PaginationProps {
   className?: string
 }
 
+type Item = number | "dots"
+
+/** Páginas visíveis, no padrão do Mantine: a primeira e a última sempre, a
+ *  atual com uma vizinha de cada lado, e reticências no lugar dos buracos.
+ *  O total de itens é fixo (7 quando há buraco), para os botões não pularem
+ *  de posição enquanto se navega. */
+function pageItems(page: number, totalPages: number): Item[] {
+  const range = (a: number, b: number) => Array.from({ length: b - a + 1 }, (_, i) => a + i)
+  if (totalPages <= 7) return range(1, totalPages)
+
+  if (page <= 4) return [...range(1, 5), "dots", totalPages]
+  if (page >= totalPages - 3) return [1, "dots", ...range(totalPages - 4, totalPages)]
+  return [1, "dots", page - 1, page, page + 1, "dots", totalPages]
+}
+
+const control =
+  "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-border bg-background text-sm font-medium tabular-nums 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 disabled:hover:bg-background"
+
 export function Pagination({
   page,
   totalPages,
@@ -28,35 +45,54 @@ export function Pagination({
   const to = Math.min(page * pageSize, total)
 
   return (
-    <div className={cn("flex items-center justify-between gap-3 pt-3", className)}>
-      <p className="text-xs text-muted-foreground">
+    <div className={cn("flex flex-wrap items-center justify-between gap-3 pt-3", className)}>
+      <p className="text-xs text-muted-foreground tabular-nums">
         {from}–{to} de {total}
       </p>
-      <div className="flex items-center gap-2">
-        <Button
-          size="icon"
-          variant="outline"
-          className="size-8"
+      <nav aria-label="Paginação" className="flex items-center gap-1.5">
+        <button
+          type="button"
+          className={control}
           disabled={page <= 1 || loading}
           onClick={() => onPageChange(page - 1)}
           aria-label="Página anterior"
         >
           <ChevronLeft className="size-4" />
-        </Button>
-        <span className="text-xs text-muted-foreground tabular-nums">
-          Página {page} de {totalPages}
-        </span>
-        <Button
-          size="icon"
-          variant="outline"
-          className="size-8"
+        </button>
+
+        {pageItems(page, totalPages).map((item, i) =>
+          item === "dots" ? (
+            <span key={`dots-${i}`} aria-hidden className="inline-flex size-8 items-center justify-center text-sm text-muted-foreground">
+              …
+            </span>
+          ) : (
+            <button
+              key={item}
+              type="button"
+              className={cn(
+                control,
+                item === page && "border-primary bg-primary text-primary-foreground hover:bg-primary-hover"
+              )}
+              disabled={loading}
+              aria-current={item === page ? "page" : undefined}
+              aria-label={`Página ${item}`}
+              onClick={() => item !== page && onPageChange(item)}
+            >
+              {item}
+            </button>
+          )
+        )}
+
+        <button
+          type="button"
+          className={control}
           disabled={page >= totalPages || loading}
           onClick={() => onPageChange(page + 1)}
           aria-label="Próxima página"
         >
           <ChevronRight className="size-4" />
-        </Button>
-      </div>
+        </button>
+      </nav>
     </div>
   )
 }

package/src/components/password-input.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import { EyeIcon, EyeOffIcon } from "lucide-react"
+
+import { Input, type InputProps } from "./input.js"
+
+/** Campo de senha com o botão de mostrar/ocultar à direita, como o
+ *  PasswordInput do Mantine. Aceita as mesmas props do Input, menos `type` e
+ *  `rightSection`, que ele controla. */
+function PasswordInput({ disabled, ...props }: Omit<InputProps, "type" | "rightSection">) {
+  const [visible, setVisible] = React.useState(false)
+
+  return (
+    <Input
+      {...props}
+      disabled={disabled}
+      type={visible ? "text" : "password"}
+      rightSection={
+        <button
+          type="button"
+          onClick={() => setVisible(v => !v)}
+          disabled={disabled}
+          aria-label={visible ? "Ocultar senha" : "Mostrar senha"}
+          aria-pressed={visible}
+          className="flex size-7 cursor-pointer items-center justify-center rounded-md transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {visible ? <EyeOffIcon /> : <EyeIcon />}
+        </button>
+      }
+    />
+  )
+}
+
+export { PasswordInput }

package/src/components/select.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "../lib/utils.js"
+import { useFieldControl } from "./field.js"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 function Select({
@@ -44,10 +45,10 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2.5 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-7.5 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2.5 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring data-[state=open]:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-7.5 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
-      {...props}
+      {...useFieldControl(props, { withRequired: false })}
     >
       {children}
       <SelectPrimitive.Icon asChild>

package/src/components/switch.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils.js"
+
+/** Interruptor liga/desliga (Radix Switch), no tamanho padrão do Mantine:
+ *  trilho de 38×20px e polegar de 14px. Ligado usa a cor primária.
+ *  Para rótulo, associe um <Label htmlFor> ao `id` do Switch. */
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9.5 shrink-0 cursor-pointer items-center rounded-full border border-input bg-muted p-0.5 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-primary data-checked:bg-primary dark:bg-input/40",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block size-3.5 rounded-full bg-background shadow-sm ring-1 ring-foreground/10 transition-transform data-checked:translate-x-4.5 data-unchecked:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/table.tsx

@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2.5 text-left align-middle font-bold whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "px-2.5 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}

package/src/components/textarea.tsx

@@ -1,27 +1,40 @@
+"use client"
+
 import * as React from "react"
 
 import { cn } from "../lib/utils.js"
+import { useFieldControl } from "./field.js"
 
 /**
  * Campo multilinha. Espelha os tokens do <Input> — mesma borda, mesmo raio,
- * mesmo anel de foco, mesmo tratamento de desabilitado e de aria-invalid — para
- * que um campo de texto longo não pareça de outro sistema ao lado de um curto.
+ * mesmo foco, mesmo tratamento de desabilitado e de aria-invalid — para que um
+ * campo de texto longo não pareça de outro sistema ao lado de um curto.
  *
  * Difere do Input só no que a multilinha exige: sem altura fixa, com padding
  * vertical maior e `leading-relaxed`.
  *
+ * `autosize`: a altura acompanha o texto (CSS `field-sizing: content`, sem
+ * JS). Limite a altura com `max-h-*` no className. Navegadores sem suporte
+ * (Firefox, hoje) mantêm a altura de `rows`.
+ *
  * Não confundir com o InlineTextarea do gerenciador: aquele é um editor inline
  * (sem borda até o hover, salva no blur), um padrão deliberadamente diferente.
  */
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function Textarea({
+  className,
+  autosize = false,
+  ...props
+}: React.ComponentProps<"textarea"> & { autosize?: boolean }) {
+  const controlProps = useFieldControl(props)
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "w-full min-w-0 resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-base leading-relaxed transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "w-full min-w-0 resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-base leading-relaxed transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:placeholder:text-destructive/60 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80",
+        autosize && "field-sizing-content min-h-16 overflow-y-auto",
         className
       )}
-      {...props}
+      {...controlProps}
     />
   )
 }