mini-starter/mini/src/components/ui/label.tsx

import { View, Text } from '@tarojs/components'
import { cn } from '@/utils/cn'
import { cva, type VariantProps } from 'class-variance-authority'
import { forwardRef } from 'react'

const labelVariants = cva(
  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
  {
    variants: {
      variant: {
        default: 'text-gray-900',
        secondary: 'text-gray-600',
        destructive: 'text-red-600',
      },
      size: {
        default: 'text-sm',
        sm: 'text-xs',
        lg: 'text-base',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

export interface LabelProps {
  className?: string
  variant?: VariantProps<typeof labelVariants>['variant']
  size?: VariantProps<typeof labelVariants>['size']
  children: React.ReactNode
  required?: boolean
  htmlFor?: string
}

const Label = forwardRef<HTMLLabelElement, LabelProps>(
  ({ className, variant, size, children, required, htmlFor, ...props }, ref) => {
    return (
      <View className="mb-2">
        <Text
          className={cn(labelVariants({ variant, size, className }))}
          {...props}
        >
          {children}
          {required && <Text className="text-red-500 ml-1">*</Text>}
        </Text>
      </View>
    )
  }
)

Label.displayName = 'Label'

export { Label, labelVariants }