generated from kevisual/vite-react-template
refactor: update UI components to use base-ui library and improve accessibility
- Refactored Dialog component to use base-ui's dialog implementation, enhancing structure and accessibility features. - Updated Input component to utilize base-ui's input, improving styling and consistency. - Reworked Label component for better accessibility and styling. - Refined Select component to leverage base-ui's select, enhancing usability and visual consistency. - Modified Separator component to use base-ui's separator, improving styling. - Enhanced Sonner component to include custom icons and improved theming. - Refactored Table component for better structure and accessibility. - Updated Tabs component to utilize base-ui's tabs, improving styling and functionality. - Introduced Checkbox component using base-ui's checkbox, enhancing accessibility and styling.
This commit is contained in:
@@ -1,24 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { cva, type VariantProps } 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<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
||||
return (
|
||||
<label
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
|
||||
Reference in New Issue
Block a user