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:
2026-02-09 00:29:46 +08:00
parent f117302a98
commit 4a9bbf1911
19 changed files with 974 additions and 671 deletions

View File

@@ -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 }