Desenvolvedores
src_
components_
ui_
Label.jsx

Explicação detalhada 💡

Este arquivo define um componente Label que utiliza o Radix UI e a biblioteca class-variance-authority (cva) para criar um rótulo estilizado e flexível. Vamos quebrar o código em partes para melhor compreensão.

Código: Importação das dependências 🧩

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"

Aqui, estamos importando as seguintes dependências:

  • React: para poder criar componentes React.
  • LabelPrimitive: é o módulo do Radix UI que contém a implementação do Label.
  • cva: a função da biblioteca class-variance-authority, usada para criar variantes de classes dinâmicas, facilitando o controle do estilo com base em diferentes estados ou propriedades.
  • cn: é uma função utilitária para combinar classes CSS de maneira condicional.

Definição das variantes do Label ⚙️

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
  • A constante labelVariants usa a função cva para criar variantes de classes CSS. Estas classes são combinadas com base nos estados do componente (como quando está desabilitado).
  • text-sm: define o tamanho do texto como pequeno.
  • font-medium: aplica uma espessura de fonte média.
  • leading-none: ajusta o espaçamento entre as linhas para o mínimo.
  • peer-disabled:cursor-not-allowed: define o cursor como não permitido quando o elemento está desabilitado.
  • peer-disabled:opacity-70: define a opacidade como 70% quando o elemento está desabilitado.

Componente Label 💬

const Label = React.forwardRef(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))

Este trecho define o componente Label que:

  • Usa React.forwardRef para encaminhar a referência ref para o componente subjacente do Radix UI.
  • Combina as classes labelVariants() com a classe adicional className, permitindo a personalização do estilo.
  • ...props passa todas as propriedades recebidas pelo componente Label para o componente LabelPrimitive.Root (como htmlFor, children, etc.).

Exemplo de uso 💻

Aqui está um exemplo de como você pode usar o componente Label em um formulário React:

<Label htmlFor="username">Nome de usuário:</Label>
<input id="username" type="text" />

Código Completo 📄

"use client"
 
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva } from "class-variance-authority";
 
import { cn } from "@/lib/utils"
 
const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
 
const Label = React.forwardRef(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName
 
export { Label }
Input.jsxRadioGroup.jsx