Add ToggleButtonGroup to RAC Tailwind starter kit

starters/tailwind/src/ToggleButton.tsx

@@ -5,7 +5,7 @@ import { focusRing } from './utils';
 
 let styles = tv({
   extend: focusRing,
-  base: 'px-5 py-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none',
+  base: 'px-5 py-2 [&:has(svg:only-child)]:px-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none',
   variants: {
     isSelected: {
       false: 'bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100 forced-colors:!bg-[ButtonFace] forced-colors:!text-[ButtonText]',

starters/tailwind/src/ToggleButtonGroup.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+const styles = tv({
+  base: 'flex gap-1',
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col'
+    }
+  }
+});
+
+export function ToggleButtonGroup(props: ToggleButtonGroupProps) {
+  return (
+    <RACToggleButtonGroup
+      {...props}
+      className={styles({orientation: props.orientation || 'horizontal', className: props.className})} />
+  );
+}

starters/tailwind/stories/ToggleButtonGroup.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { ToggleButton } from '../src/ToggleButton';
+import { ToggleButtonGroup } from '../src/ToggleButtonGroup';
+import { Bold, Italic, Underline } from 'lucide-react'
+
+const meta: Meta<typeof ToggleButtonGroup> = {
+  component: ToggleButtonGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+export const Example = (args: any) => (
+  <ToggleButtonGroup {...args}>
+    <ToggleButton id="bold" aria-label="Bold"><Bold className="w-4 h-4" /></ToggleButton>
+    <ToggleButton id="italic" aria-label="Italic"><Italic className="w-4 h-4" /></ToggleButton>
+    <ToggleButton id="underline" aria-label="Underline"><Underline className="w-4 h-4" /></ToggleButton>
+  </ToggleButtonGroup>
+);
+
+Example.args = {
+  selectionMode: 'multiple'
+};