Button Group

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import type { ComponentProps } from "svelte";
4import { Separator } from "../separator"
5
6interface Props extends ComponentProps<typeof Separator> {}
7
8let { class: className, orientation = "vertical", ...rest }: Props = $props()
9</script>
10
11<Separator
12  data-scope="button-group"
13  data-part="separator"
14  data-slot="button-group-separator"
15  {orientation}
16  class={cn("bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className)}
17  {...rest}
18/>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> { }
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  class={cn("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", className)}
14  {...rest}
15>
16  {@render children?.()}
17</Sprawlify>

1<script module lang="ts">
2import { cva } from "class-variance-authority"
3export const buttonGroupVariants = cva(
4  "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",
5  {
6    variants: {
7      orientation: {
8        horizontal: "[&>[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",
9        vertical: "[&>[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",
10      },
11    },
12    defaultVariants: { orientation: "horizontal" },
13  }
14)
15</script>
16
17<script lang="ts">
18import { cn } from "@/lib/utils"
19import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
20import type { HTMLAttributes } from "svelte/elements"
21import type { VariantProps } from "class-variance-authority"
22
23interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof buttonGroupVariants>, PolymorphicProps<"div"> {}
24
25let { class: className, orientation = "horizontal", children, ...rest }: Props = $props()
26</script>
27
28<Sprawlify
29  as="div"
30  data-scope="button-group"
31  data-part="root"
32  role="group"
33  data-slot="button-group"
34  data-orientation={orientation}
35  class={cn(buttonGroupVariants({ orientation, className }))}
36  {...rest}
37>
38  {@render children?.()}
39</Sprawlify>

1export { default as ButtonGroup, buttonGroupVariants } from "./button-group.svelte";2export { default as ButtonGroupSeparator } from "./button-group-separator.svelte";3export { default as ButtonGroupText } from "./button-group-text.svelte";4