From c7bc7c06bca0ea92e5e89ce14b29d1557d01f82a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 19 Nov 2024 17:21:41 -0800
Subject: [PATCH] Add ToggleButtonGroup to RAC Tailwind starter kit

---
 starters/tailwind/src/ToggleButton.tsx        |  2 +-
 starters/tailwind/src/ToggleButtonGroup.tsx   | 21 +++++++++++++++
 .../stories/ToggleButtonGroup.stories.tsx     | 27 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 starters/tailwind/src/ToggleButtonGroup.tsx
 create mode 100644 starters/tailwind/stories/ToggleButtonGroup.stories.tsx

diff --git a/starters/tailwind/src/ToggleButton.tsx b/starters/tailwind/src/ToggleButton.tsx
index d8d7d8c86ce..4f6bce13a27 100644
--- a/starters/tailwind/src/ToggleButton.tsx
+++ b/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]',
diff --git a/starters/tailwind/src/ToggleButtonGroup.tsx b/starters/tailwind/src/ToggleButtonGroup.tsx
new file mode 100644
index 00000000000..9f90a89a19a
--- /dev/null
+++ b/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})} />
+  );
+}
diff --git a/starters/tailwind/stories/ToggleButtonGroup.stories.tsx b/starters/tailwind/stories/ToggleButtonGroup.stories.tsx
new file mode 100644
index 00000000000..90e3ea2b9a4
--- /dev/null
+++ b/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'
+};