This commit is contained in:
David Arranz 2025-11-16 11:58:31 +01:00
parent 8dd8e3e5f4
commit 8806d1845b

View File

@ -1,8 +1,7 @@
import { Slot } from "@radix-ui/react-slot" import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority" import { Separator } from "@repo/shadcn-ui/components/separator";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { cn } from "@repo/shadcn-ui/lib/utils" import { type VariantProps, cva } from "class-variance-authority";
import { Separator } from "@repo/shadcn-ui/components/separator"
const buttonGroupVariants = cva( const buttonGroupVariants = cva(
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
@ -19,7 +18,7 @@ const buttonGroupVariants = cva(
orientation: "horizontal", orientation: "horizontal",
}, },
} }
) );
function ButtonGroup({ function ButtonGroup({
className, className,
@ -28,13 +27,13 @@ function ButtonGroup({
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) { }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
return ( return (
<div <div
role="group"
data-slot="button-group"
data-orientation={orientation}
className={cn(buttonGroupVariants({ orientation }), className)} className={cn(buttonGroupVariants({ orientation }), className)}
data-orientation={orientation}
data-slot="button-group"
role="group"
{...props} {...props}
/> />
) );
} }
function ButtonGroupText({ function ButtonGroupText({
@ -42,9 +41,9 @@ function ButtonGroupText({
asChild = false, asChild = false,
...props ...props
}: React.ComponentProps<"div"> & { }: React.ComponentProps<"div"> & {
asChild?: boolean asChild?: boolean;
}) { }) {
const Comp = asChild ? Slot : "div" const Comp = asChild ? Slot : "div";
return ( return (
<Comp <Comp
@ -54,7 +53,7 @@ function ButtonGroupText({
)} )}
{...props} {...props}
/> />
) );
} }
function ButtonGroupSeparator({ function ButtonGroupSeparator({
@ -64,20 +63,15 @@ function ButtonGroupSeparator({
}: React.ComponentProps<typeof Separator>) { }: React.ComponentProps<typeof Separator>) {
return ( return (
<Separator <Separator
data-slot="button-group-separator"
orientation={orientation}
className={cn( className={cn(
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
className className
)} )}
data-slot="button-group-separator"
orientation={orientation}
{...props} {...props}
/> />
) );
} }
export { export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
buttonGroupVariants,
}