@strategicos/ui 0.3.0 → 0.4.0

package/README.md

@@ -15,7 +15,7 @@ import { cn } from "@strategicos/ui/utils"
 
 ## Componentes
 
-`alert` · `alert-dialog` · `avatar` · `badge` · `button` · `card` · `checkbox` · `dialog` · `dropdown-menu` · `input` · `label` · `pagination` · `select` · `separator` · `sheet` · `sidebar` · `skeleton` · `sonner` · `switch` · `table` · `tabs` · `textarea` · `tooltip`
+`alert` · `alert-dialog` · `avatar` · `badge` · `button` · `card` · `checkbox` · `dialog` · `dropdown-menu` · `field` · `input` · `label` · `pagination` · `password-input` · `select` · `separator` · `sheet` · `sidebar` · `skeleton` · `sonner` · `switch` · `table` · `tabs` · `textarea` · `tooltip`
 
 Utilitários: `@strategicos/ui/utils` (`cn`) e `@strategicos/ui/hooks/use-mobile` (`useIsMobile`).
 
@@ -29,6 +29,23 @@ Utilitários: `@strategicos/ui/utils` (`cn`) e `@strategicos/ui/hooks/use-mobile
 
 Botões de ícone: `icon-xs` 24px, `icon-sm` 30px, `icon` 36px, `icon-lg` 42px.
 
+## Formulários
+
+`Field` monta rótulo, descrição, controle e erro, e liga tudo ao controle de dentro (`id`, `aria-describedby`, `aria-invalid`, `required`). Funciona com `Input`, `PasswordInput`, `Textarea` e `SelectTrigger`.
+
+```tsx
+import { Field } from "@strategicos/ui/field"
+import { Input } from "@strategicos/ui/input"
+
+<Field label="E-mail" description="Usado nos avisos" error={erro} required>
+  <Input type="email" value={email} onChange={e => setEmail(e.target.value)} />
+</Field>
+```
+
+- `Input` aceita `leftSection` e `rightSection` (ícones ou botões dentro do campo). Quando há seção, use `wrapperClassName` para largura e posição.
+- `PasswordInput` traz o botão de mostrar/ocultar a senha.
+- `Textarea autosize` cresce com o texto. Limite a altura com `max-h-*`.
+
 ## Variantes de status
 
 `Badge` e `Alert` aceitam `variant="info" | "success" | "warning" | "destructive"`. O Badge também aceita `default`, `secondary`, `outline`, `ghost` e `link`.

package/dist/components/field.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+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>). */
+declare function useFieldControl<P extends ControlProps & {
+    required?: boolean;
+}>(props: P, { withRequired }?: {
+    withRequired?: boolean;
+}): P;
+declare function Field({ label, description, error, required, 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;
+}): React.JSX.Element;
+export { Field, useFieldControl };
+//# sourceMappingURL=field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA4B9B,KAAK,YAAY,GAAG;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;CACtD,CAAA;AAED;;;iBAGiB;AACjB,iBAAS,eAAe,CAAC,CAAC,SAAS,YAAY,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EACtE,KAAK,EAAE,CAAC,EACR,EAAE,YAAmB,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAO,GACvD,CAAC,CAWH;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,qBA0CA;AAED,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/field.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+const FieldContext = React.createContext(null);
+/** 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(props, { withRequired = true } = {}) {
+    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 }) {
+    const autoId = React.useId();
+    const controlId = id ?? autoId;
+    const descriptionId = description ? `${controlId}-description` : undefined;
+    const errorId = error ? `${controlId}-error` : undefined;
+    const value = React.useMemo(() => ({
+        id: controlId,
+        describedBy: [descriptionId, errorId].filter(Boolean).join(" ") || undefined,
+        invalid: !!error,
+        required,
+    }), [controlId, descriptionId, errorId, error, required]);
+    return (_jsxs("div", { "data-slot": "field", "data-invalid": error ? true : undefined, className: cn("grid content-start gap-1.5", className), ...props, children: [label && (_jsxs(Label, { htmlFor: controlId, children: [label, required && _jsx("span", { "aria-hidden": true, className: "-ml-1 text-destructive", children: "*" })] })), description && (_jsx("p", { id: descriptionId, "data-slot": "field-description", className: "-mt-0.5 text-xs leading-snug text-muted-foreground", children: description })), _jsx(FieldContext.Provider, { value: value, children: children }), error && (_jsx("p", { id: errorId, "data-slot": "field-error", className: "text-xs leading-snug text-destructive", children: error }))] }));
+}
+export { Field, useFieldControl };
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/components/field.tsx"],"names":[],"mappings":"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"}

package/dist/components/input.d.ts

@@ -1,4 +1,18 @@
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
-export { Input };
+/** Classes do campo. Foco e erro seguem o Mantine: só a borda muda de cor,
+ *  sem halo em volta. */
+declare 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";
+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;
+};
+declare function Input({ className, type, leftSection, rightSection, wrapperClassName, ...props }: InputProps): React.JSX.Element;
+export { Input, inputClassName, type InputProps };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAY1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;yBACyB;AACzB,QAAA,MAAM,cAAc,sgBACif,CAAA;AAKrgB,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAChD;gDAC4C;IAC5C,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;mBACe;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;gFAC4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBA6BpG;AAED,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,CAAA"}

package/dist/components/input.js

@@ -1,7 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-function Input({ className, type, ...props }) {
-    return (_jsx("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 }));
+import { useFieldControl } from "./field.js";
+/** 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";
+function Input({ className, type, leftSection, rightSection, wrapperClassName, ...props }) {
+    const controlProps = useFieldControl(props);
+    const input = (_jsx("input", { type: type, "data-slot": "input", className: cn(inputClassName, !!leftSection && "pl-9", !!rightSection && "pr-9", className), ...controlProps }));
+    if (!leftSection && !rightSection)
+        return input;
+    return (_jsxs("div", { "data-slot": "input-wrapper", className: cn("relative w-full min-w-0", wrapperClassName), children: [leftSection && (_jsx("span", { "data-slot": "input-left-section", className: cn(sectionClassName, "pointer-events-none left-0"), children: leftSection })), input, rightSection && (_jsx("span", { "data-slot": "input-right-section", className: cn(sectionClassName, "right-0"), children: rightSection }))] }));
 }
-export { Input };
+export { Input, inputClassName };
 //# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAEpC,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiC;IACzE,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,eACA,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,2mBAA2mB,EAC3mB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C;yBACyB;AACzB,MAAM,cAAc,GAClB,mgBAAmgB,CAAA;AAErgB,MAAM,gBAAgB,GACpB,qIAAqI,CAAA;AAcvI,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAc;IACnG,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE3C,MAAM,KAAK,GAAG,CACZ,gBACE,IAAI,EAAE,IAAI,eACA,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC,WAAW,IAAI,MAAM,EAAE,CAAC,CAAC,YAAY,IAAI,MAAM,EAAE,SAAS,CAAC,KACvF,YAAY,GAChB,CACH,CAAA;IAED,IAAI,CAAC,WAAW,IAAI,CAAC,YAAY;QAAE,OAAO,KAAK,CAAA;IAE/C,OAAO,CACL,4BAAe,eAAe,EAAC,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,aACtF,WAAW,IAAI,CACd,4BAAgB,oBAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,4BAA4B,CAAC,YAC/F,WAAW,GACP,CACR,EACA,KAAK,EACL,YAAY,IAAI,CACf,4BAAgB,qBAAqB,EAAC,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,YAC7E,YAAY,GACR,CACR,IACG,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,cAAc,EAAmB,CAAA"}

package/dist/components/password-input.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { 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. */
+declare function PasswordInput({ disabled, ...props }: Omit<InputProps, "type" | "rightSection">): React.JSX.Element;
+export { PasswordInput };
+//# sourceMappingURL=password-input.d.ts.map

package/dist/components/password-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../src/components/password-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAEnD;;wCAEwC;AACxC,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,cAAc,CAAC,qBAsBvF;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/password-input.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Input } 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 }) {
+    const [visible, setVisible] = React.useState(false);
+    return (_jsx(Input, { ...props, disabled: disabled, type: visible ? "text" : "password", rightSection: _jsx("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", children: visible ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }) }));
+}
+export { PasswordInput };
+//# sourceMappingURL=password-input.js.map

package/dist/components/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.js","sourceRoot":"","sources":["../../src/components/password-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAElD,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAA;AAEnD;;wCAEwC;AACxC,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA6C;IACtF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnD,OAAO,CACL,KAAC,KAAK,OACA,KAAK,EACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EACnC,YAAY,EACV,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAClC,QAAQ,EAAE,QAAQ,gBACN,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,kBACzC,OAAO,EACrB,SAAS,EAAC,uOAAuO,YAEhP,OAAO,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GAChC,GAEX,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAKpD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,qBAqBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,KAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAyBtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IAGrD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,qBAyBA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAc7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAc/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAMpD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,qBAqBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,KAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAyBtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IAGrD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC9B,qBAyBA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAc7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAc/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}

package/dist/components/select.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
@@ -13,7 +14,7 @@ function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "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", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-70" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "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 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), ...useFieldControl(props, { withRequired: false }), children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-70" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", align = "start", ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("p-1 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""), children: children }), _jsx(SelectScrollDownButton, {})] }) }));

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"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"}

package/dist/components/textarea.d.ts

@@ -1,15 +1,21 @@
 import * as React from "react";
 /**
  * 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.
  */
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+declare function Textarea({ className, autosize, ...props }: React.ComponentProps<"textarea"> & {
+    autosize?: boolean;
+}): React.JSX.Element;
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

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/package.json

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

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/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/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}
     />
   )
 }