feat: sync button group

apps/docs/src/config/docs.ts

@@ -67,6 +67,10 @@ export const docsConfig: Config = {
           title: "Button",
           href: "/docs/components/button"
         },
+        {
+          title: "Button Group",
+          href: "/docs/components/button-group"
+        },
         {
           title: "Checkbox",
           href: "/docs/components/checkbox"

apps/docs/src/registry/__index__.tsx

@@ -508,6 +508,132 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "button-group-dropdown-menu": {
+    name: "button-group-dropdown-menu",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group","dropdown-menu"],
+    component: lazy(() => import("~/registry/examples/button-group-dropdown-menu.tsx")),
+    files: [{
+      path: "registry/examples/button-group-dropdown-menu.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-input-group": {
+    name: "button-group-input-group",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group","input-group"],
+    component: lazy(() => import("~/registry/examples/button-group-input-group.tsx")),
+    files: [{
+      path: "registry/examples/button-group-input-group.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-input": {
+    name: "button-group-input",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group","input"],
+    component: lazy(() => import("~/registry/examples/button-group-input.tsx")),
+    files: [{
+      path: "registry/examples/button-group-input.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-nested": {
+    name: "button-group-nested",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group"],
+    component: lazy(() => import("~/registry/examples/button-group-nested.tsx")),
+    files: [{
+      path: "registry/examples/button-group-nested.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-orientation": {
+    name: "button-group-orientation",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group"],
+    component: lazy(() => import("~/registry/examples/button-group-orientation.tsx")),
+    files: [{
+      path: "registry/examples/button-group-orientation.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-select": {
+    name: "button-group-select",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group","select"],
+    component: lazy(() => import("~/registry/examples/button-group-select.tsx")),
+    files: [{
+      path: "registry/examples/button-group-select.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-separator": {
+    name: "button-group-separator",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group"],
+    component: lazy(() => import("~/registry/examples/button-group-separator.tsx")),
+    files: [{
+      path: "registry/examples/button-group-separator.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-size": {
+    name: "button-group-size",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group"],
+    component: lazy(() => import("~/registry/examples/button-group-size.tsx")),
+    files: [{
+      path: "registry/examples/button-group-size.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "button-group-split": {
+    name: "button-group-split",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["button","button-group"],
+    component: lazy(() => import("~/registry/examples/button-group-split.tsx")),
+    files: [{
+      path: "registry/examples/button-group-split.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "button-icon": {
     name: "button-icon",
     description: "",

apps/docs/src/registry/examples/_registry.ts

@@ -177,6 +177,105 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "button-group-dropdown-menu",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group", "dropdown-menu"],
+    files: [
+      {
+        path: "examples/button-group-dropdown-menu.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-input-group",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group", "input-group"],
+    files: [
+      {
+        path: "examples/button-group-input-group.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-input",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group", "input"],
+    files: [
+      {
+        path: "examples/button-group-input.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-nested",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group"],
+    files: [
+      {
+        path: "examples/button-group-nested.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-orientation",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group"],
+    files: [
+      {
+        path: "examples/button-group-orientation.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-select",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group", "select"],
+    files: [
+      {
+        path: "examples/button-group-select.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-separator",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group"],
+    files: [
+      {
+        path: "examples/button-group-separator.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-size",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group"],
+    files: [
+      {
+        path: "examples/button-group-size.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "button-group-split",
+    type: "registry:example",
+    registryDependencies: ["button", "button-group"],
+    files: [
+      {
+        path: "examples/button-group-split.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "button-icon",
     type: "registry:example",

apps/docs/src/registry/examples/button-group-dropdown-menu.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import {
+  AlertTriangleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  ShareIcon,
+  TrashIcon,
+  UserRoundXIcon,
+  VolumeOffIcon
+} from "lucide-solid"
+
+import { Button } from "~/registry/ui/button"
+import { ButtonGroup } from "~/registry/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "~/registry/ui/dropdown-menu"
+
+export default function ButtonGroupDropdown() {
+  return (
+    <ButtonGroup>
+      <Button variant="outline">Follow</Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger as={Button} class="!pl-2" variant="outline">
+          <ChevronDownIcon />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="[--radius:1rem]">
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <VolumeOffIcon />
+              Mute Conversation
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CheckIcon />
+              Mark as Read
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <AlertTriangleIcon />
+              Report Conversation
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <UserRoundXIcon />
+              Block User
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <ShareIcon />
+              Share Conversation
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CopyIcon />
+              Copy Conversation
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem variant="destructive">
+              <TrashIcon />
+              Delete Conversation
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
+  )
+}

apps/docs/src/registry/examples/button-group-input-group.tsx

@@ -0,0 +1,50 @@
+import { createSignal } from "solid-js"
+
+import { AudioLinesIcon, PlusIcon } from "lucide-solid"
+
+import { Button } from "~/registry/ui/button"
+import { ButtonGroup } from "~/registry/ui/button-group"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from "~/registry/ui/input-group"
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/registry/ui/tooltip"
+
+export default function ButtonGroupInputGroup() {
+  const [voiceEnabled, setVoiceEnabled] = createSignal(false)
+
+  return (
+    <ButtonGroup class="[--radius:9999rem]">
+      <ButtonGroup>
+        <Button size="icon" variant="outline">
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <InputGroup>
+          <InputGroupInput
+            disabled={voiceEnabled()}
+            placeholder={voiceEnabled() ? "Record and send audio..." : "Send a message..."}
+          />
+          <InputGroupAddon align="inline-end">
+            <Tooltip>
+              <TooltipTrigger
+                aria-pressed={voiceEnabled}
+                as={InputGroupButton}
+                class="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
+                data-active={voiceEnabled}
+                onClick={() => setVoiceEnabled(!voiceEnabled)}
+                size="icon-xs"
+              >
+                <AudioLinesIcon />
+              </TooltipTrigger>
+              <TooltipContent>Voice Mode</TooltipContent>
+            </Tooltip>
+          </InputGroupAddon>
+        </InputGroup>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}

apps/docs/src/registry/examples/button-group-input.tsx

@@ -0,0 +1,16 @@
+import { SearchIcon } from "lucide-solid"
+
+import { Button } from "~/registry/ui/button"
+import { ButtonGroup } from "~/registry/ui/button-group"
+import { Input } from "~/registry/ui/input"
+
+export default function ButtonGroupInput() {
+  return (
+    <ButtonGroup>
+      <Input placeholder="Search..." />
+      <Button aria-label="Search" variant="outline">
+        <SearchIcon />
+      </Button>
+    </ButtonGroup>
+  )
+}