button-group

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import { Polymorphic } from "@kobalte/core/polymorphic";
3 
4import type * as SeparatorPrimitive from "@kobalte/core/separator";
5import { cn } from "~/lib/utils.ts";
6import type { VariantProps } from "class-variance-authority";
7import { cva } from "class-variance-authority";
8import type { Component, ComponentProps, ValidComponent } from "solid-js";
9import { mergeProps, splitProps } from "solid-js";
10 
11import { Separator } from "./separator.tsx";
12 
13// Kobalte's Select root wraps its trigger in a `<div role="group">`, so
14// unlike radix the trigger is never a direct child of the group — the
15// `[&>*>[data-slot=select-trigger]]` selectors reach one level deeper to
16// keep the joined rounding and collapsed borders working.
17const buttonGroupVariants = cva(
18  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>*>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
19  {
20    variants: {
21      orientation: {
22        horizontal:
23          "[&>[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 [&>*:not(:first-child)>[data-slot=select-trigger]]:rounded-l-none [&>*:not(:first-child)>[data-slot=select-trigger]]:border-l-0 [&>*:not(:last-child)>[data-slot=select-trigger]]:rounded-r-none",
24        vertical:
25          "[&>[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 [&>*:not(:first-child)>[data-slot=select-trigger]]:rounded-t-none [&>*:not(:first-child)>[data-slot=select-trigger]]:border-t-0 [&>*:not(:last-child)>[data-slot=select-trigger]]:rounded-b-none",
26      },
27    },
28    defaultVariants: {
29      orientation: "horizontal",
30    },
31  },
32);
33 
34type ButtonGroupProps =
35  & ComponentProps<"div">
36  & VariantProps<typeof buttonGroupVariants>;
37 
38const ButtonGroup: Component<ButtonGroupProps> = (props) => {
39  const [local, others] = splitProps(props, ["class", "orientation"]);
40  return (
41    <div
42      role="group"
43      data-slot="button-group"
44      data-orientation={local.orientation ?? "horizontal"}
45      class={cn(
46        buttonGroupVariants({ orientation: local.orientation }),
47// … truncated