import * as React from "react" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/registry/bases/base/lib/utils" import { Separator } from "@/registry/bases/base/ui/separator" function ItemGroup({ className, ...props }: React.ComponentProps<"div">) { return (

) } function ItemSeparator({ className, ...props }: React.ComponentProps) { return ( ) } const itemVariants = cva( "cn-item group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors", { variants: { variant: { default: "cn-item-variant-default", outline: "cn-item-variant-outline", muted: "cn-item-variant-muted", }, size: { default: "cn-item-size-default", sm: "cn-item-size-sm", xs: "cn-item-size-xs", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Item({ className, variant = "default", size = "default", render, ...props }: useRender.ComponentProps<"div"> & VariantProps) { return useRender({ defaultTagName: "div", props: mergeProps<"div">( { className: cn(itemVariants({ variant, size, className })), }, props ), render, state: { slot: "item", variant, size, }, }) } const itemMediaVariants = cva( "cn-item-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", { variants: { variant: { default: "cn-item-media-variant-default", icon: "cn-item-media-variant-icon", image: "cn-item-media-variant-image", }, }, defaultVariants: { variant: "default", }, } ) function ItemMedia({ className, variant = "default", ...props }: React.ComponentProps<"div"> & VariantProps) { return (

) } function ItemContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function ItemTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function ItemDescription({ className, ...props }: React.ComponentProps<"p">) { return (

a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className )} {...props} /> ) } function ItemActions({ className, ...props }: React.ComponentProps<"div">) { return (

) } function ItemHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function ItemFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, }