Toggle Group Component! 🚀

[brunoalano]

This PR creates a new toggle-group component, based on Radix implementation. The component is unstyled and uses the CVA library. Also works on dark mode.

This PR can replace the #570 button group implementation, following the Radix implementation.

[vercel]

@brunoalano is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 30, 2023 5:22pm

[ibrahimbutt]

@brunoalano this does not seem to work with the form component?

<FormControl>
  <ToggleGroup type="single" defaultValue="left" {...field}>
    <ToggleGroupItem value="left">Left</ToggleGroupItem>
    <ToggleGroupItem value="center">Center</ToggleGroupItem>
    <ToggleGroupItem value="right">Right</ToggleGroupItem>
  </ToggleGroup>
<FormControl>

I have the above, and the items are not clickable.

Update: This makes the items clickable, but the middle item is not clickable. Furthermore, the last item is only clickable in the space between the label and the right border.

<FormField control={form.control} name="type" render={({field}) => (<FormItem>
    <FormLabel className={"text-gray-500"}>Type</FormLabel>
    <FormControl>
      <ToggleGroup className={"w-full z-50"} type="single" value={field.value} defaultValue={field.value}
        onValueChange={(value) => {
          if (value) field.onChange(value);
        }}
       {...field}
      >
        <ToggleGroupItem className={"flex-1"} value="Cash">Cash</ToggleGroupItem>
        <ToggleGroupItem className={"flex-1"} value="Checking">Checking</ToggleGroupItem>
        <ToggleGroupItem className={"flex-1"} value="Savings">Savings</ToggleGroupItem>
      </ToggleGroup>
    </FormControl>
    <FormMessage/>
  </FormItem>)}
/>

[shadcn]

@brunoalano Appreciate the help implementing this. Please note that I've merged #1547 with the new toggle group component. I'm going to mark this one as done but feel free to reopen if you think we can improve the current implementation. Thank you.