Button Group

1import { cva, type VariantProps } from "class-variance-authority";2import { cn } from "@/lib/utils";3import { Separator } from "@/components/ui/separator";4import { sprawlify } from "@sprawlify/solid";5import type { ComponentProps } from "solid-js";6import { splitProps } from "solid-js";78const buttonGroupVariants = cva(9  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",10  {11    variants: {12      orientation: {13        horizontal:14          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",15        vertical:16          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",17      },18    },19    defaultVariants: {20      orientation: "horizontal",21    },22  },23);2425function ButtonGroup(26  props: ComponentProps<typeof sprawlify.div> & VariantProps<typeof buttonGroupVariants>,27) {28  const [local, others] = splitProps(props, ["orientation", "class"]);29  const orientation = () => local.orientation;3031  return (32    <sprawlify.div33      data-scope="button-group"34      data-part="root"35      role="group"36      data-slot="button-group"37      data-orientation={orientation()}38      class={cn(buttonGroupVariants({ orientation: orientation() }), local.class)}39      {...others}40    />41  );42}4344function ButtonGroupText(props: ComponentProps<typeof sprawlify.div>) {45  const [local, others] = splitProps(props, ["class"]);4647  return (48    <sprawlify.div49      class={cn(50        "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",51        local.class,52      )}53      {...others}54    />55  );56}5758function ButtonGroupSeparator(props: ComponentProps<typeof Separator>) {59  const [local, others] = splitProps(props, ["orientation", "class"]);60  const orientation = () => local.orientation ?? "vertical";6162  return (63    <Separator64      data-scope="button-group"65      data-part="separator"66      data-slot="button-group-separator"67      orientation={orientation()}68      class={cn(69        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",70        local.class,71      )}72      {...others}73    />74  );75}7677export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };78