generated from kevisual/vite-react-template
abearxiong
4a9bbf1911
- 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.
105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import * as React from "react"
|
|
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function Avatar({
|
|
className,
|
|
size = "default",
|
|
...props
|
|
}: AvatarPrimitive.Root.Props & {
|
|
size?: "default" | "sm" | "lg"
|
|
}) {
|
|
return (
|
|
<AvatarPrimitive.Root
|
|
data-slot="avatar"
|
|
data-size={size}
|
|
className={cn(
|
|
"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
|
return (
|
|
<AvatarPrimitive.Image
|
|
data-slot="avatar-image"
|
|
className={cn(
|
|
"rounded-full aspect-square size-full object-cover",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AvatarFallback({
|
|
className,
|
|
...props
|
|
}: AvatarPrimitive.Fallback.Props) {
|
|
return (
|
|
<AvatarPrimitive.Fallback
|
|
data-slot="avatar-fallback"
|
|
className={cn(
|
|
"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
|
return (
|
|
<span
|
|
data-slot="avatar-badge"
|
|
className={cn(
|
|
"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
|
|
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
|
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
|
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="avatar-group"
|
|
className={cn(
|
|
"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AvatarGroupCount({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
data-slot="avatar-group-count"
|
|
className={cn("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export {
|
|
Avatar,
|
|
AvatarImage,
|
|
AvatarFallback,
|
|
AvatarGroup,
|
|
AvatarGroupCount,
|
|
AvatarBadge,
|
|
}
|