rl-core-front 0.14.3 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/input.tsx

@@ -4,22 +4,79 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
-const Input = React.forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+/**
+ * O `prefix` sai do tipo base de propósito: o React o declara como `string`
+ * porque existe um `prefix` de RDFa em todo elemento HTML — atributo que
+ * ninguém escreve num `<input>`, e cujo tipo impediria passar um ícone aqui.
+ */
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /**
+   * Marca fixa colada à esquerda do campo — `R$`, `@`, `https://`.
+   *
+   * Dentro da borda, e não num rótulo acima: a unidade é do valor, e lida
+   * longe dele ela vira decoração que some quando o formulário fica cheio. É
+   * também o que evita quem digita repetir a marca no próprio texto.
+   */
+  prefix?: React.ReactNode;
+  /** Mesma ideia à direita — `%`, `kg`, `/mês`. */
+  suffix?: React.ReactNode;
+}
+
+/** A marca não é campo: não recebe clique nem foco, e o cursor vai para o input. */
+const Affix = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): React.JSX.Element => (
+  <span
+    aria-hidden
+    className={cn(
+      "pointer-events-none absolute inset-y-0 flex items-center text-sm text-muted-foreground",
+      className,
+    )}
+  >
+    {children}
+  </span>
+);
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, prefix, suffix, ...props }, ref) => {
+    const campo = (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+          // Abre espaço para a marca em vez de deixar o texto passar por baixo
+          // dela. Largura fixa e não `w-auto`: a marca é curta por definição, e
+          // medir a real exigiria ler o DOM a cada render.
+          prefix && "pl-10",
+          suffix && "pr-10",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+
+    // Sem marca o `<input>` volta a ser o elemento raiz: envolver todo campo
+    // do produto num `div` mudaria a largura de quem já usa `Input` dentro de
+    // um flex, e a maioria não tem marca nenhuma.
+    if (!prefix && !suffix) {
+      return campo;
+    }
+
+    return (
+      <div className="relative w-full">
+        {prefix && <Affix className="left-3">{prefix}</Affix>}
+        {campo}
+        {suffix && <Affix className="right-3">{suffix}</Affix>}
+      </div>
+    );
+  },
+);
 Input.displayName = "Input";
 
 export { Input };