feat: add button-group

apps/docs/content/components/button-group.mdx

@@ -0,0 +1,24 @@
+---
+title: Button Group
+description: Displays a button group.
+
+
+slug: button-group
+
+primaryTag: WIP
+---
+
+<ComponentPreview name="button-group/preview" />
+
+
+### Examples
+
+<ComponentPreview name="button-group/preview" />
+
+### Variants
+
+<ComponentPreview name="button-group/variants" />
+
+### Orientation
+
+<ComponentPreview name="button-group/orientation" />

apps/docs/content/components/command.mdx

@@ -9,19 +9,6 @@ primaryTag: WIP
 
 <ComponentPreview name="command/preview" />
 
-### Usage
-
-```bash
-import {
-	Command,
-	CommandGroup,
-	CommandItem,
-	CommandItemDescription,
-	CommandSearch,
-} from "@dv/ui/components"
-
-```
-
 ### Examples
 
 ## Uncontrolled 

apps/docs/src/examples/button-group/orientation.tsx

@@ -0,0 +1,11 @@
+import { Button, ButtonGroup } from "@dv/ui/components"
+
+export default function Example() {
+	return (
+		<ButtonGroup orientation="vertical">
+			<Button>One</Button>
+			<Button>Two</Button>
+			<Button>Three</Button>
+		</ButtonGroup>
+	)
+}

apps/docs/src/examples/button-group/preview.tsx

@@ -0,0 +1,11 @@
+import { Button, ButtonGroup } from "@dv/ui/components"
+
+export default function Example() {
+	return (
+		<ButtonGroup variant="outline">
+			<Button>One</Button>
+			<Button>Two</Button>
+			<Button>Three</Button>
+		</ButtonGroup>
+	)
+}

apps/docs/src/examples/button-group/variants.tsx

@@ -0,0 +1,26 @@
+import { Button, ButtonGroup, Heading } from "@dv/ui/components"
+
+export default function Example() {
+	return (
+		<div className="flex flex-col gap-4">
+			<Heading level={3}>Solid Button Group</Heading>
+			<ButtonGroup variant="solid">
+				<Button>One</Button>
+				<Button>Two</Button>
+				<Button>Three</Button>
+			</ButtonGroup>
+			<Heading level={3}>Ghost Button Group</Heading>
+			<ButtonGroup variant="ghost">
+				<Button>One</Button>
+				<Button>Two</Button>
+				<Button>Three</Button>
+			</ButtonGroup>
+			<Heading level={3}>Outline Button Group</Heading>
+			<ButtonGroup variant="outline">
+				<Button>One</Button>
+				<Button>Two</Button>
+				<Button>Three</Button>
+			</ButtonGroup>
+		</div>
+	)
+}

apps/docs/src/examples/index.ts

@@ -124,6 +124,66 @@ export function Example() {
 export function Example() {
 	return <Button variant="subtle">Button</Button>
 }
+`,
+  },
+  "button-group/orientation": {
+	  component: lazy(() => import("~/examples/button-group/orientation.tsx")),
+	  code: `import { Button, ButtonGroup } from "@dv/ui/components"
+
+export function Example() {
+	return (
+		<ButtonGroup orientation="vertical">
+			<Button>One</Button>
+			<Button>Two</Button>
+			<Button>Three</Button>
+		</ButtonGroup>
+	)
+}
+`,
+  },
+  "button-group/preview": {
+	  component: lazy(() => import("~/examples/button-group/preview.tsx")),
+	  code: `import { Button, ButtonGroup } from "@dv/ui/components"
+
+export function Example() {
+	return (
+		<ButtonGroup variant="outline">
+			<Button>One</Button>
+			<Button>Two</Button>
+			<Button>Three</Button>
+		</ButtonGroup>
+	)
+}
+`,
+  },
+  "button-group/variants": {
+	  component: lazy(() => import("~/examples/button-group/variants.tsx")),
+	  code: `import { Button, ButtonGroup, Heading } from "@dv/ui/components"
+
+export function Example() {
+	return (
+		<div className="flex flex-col gap-4">
+			<Heading level={3}>Solid Button Group</Heading>
+			<ButtonGroup variant="solid">
+				<Button>One</Button>
+				<Button>Two</Button>
+				<Button>Three</Button>
+			</ButtonGroup>
+			<Heading level={3}>Ghost Button Group</Heading>
+			<ButtonGroup variant="ghost">
+				<Button>One</Button>
+				<Button>Two</Button>
+				<Button>Three</Button>
+			</ButtonGroup>
+			<Heading level={3}>Outline Button Group</Heading>
+			<ButtonGroup variant="outline">
+				<Button>One</Button>
+				<Button>Two</Button>
+				<Button>Three</Button>
+			</ButtonGroup>
+		</div>
+	)
+}
 `,
   },
   "calendar/custom-duration": {

packages/styles/package.json

@@ -50,6 +50,12 @@
         "default": "./dist/es/components/button/index.mjs"
       }
     },
+    "./components/button-group": {
+      "import": {
+        "types": "./dist/es/components/button-group/index.d.mts",
+        "default": "./dist/es/components/button-group/index.mjs"
+      }
+    },
     "./components/calendar": {
       "import": {
         "types": "./dist/es/components/calendar/index.d.mts",

packages/styles/src/components/button-group/index.ts

@@ -0,0 +1 @@
+export * from "./variants"

packages/styles/src/components/button-group/variants.ts

@@ -0,0 +1,47 @@
+import { tv } from "tailwind-variants"
+import { buttonVariants } from "../button"
+import { cn } from "@dv/ui/utils"
+
+export const buttonGroupVariants = tv({
+	slots: {
+		buttonGroup: "flex items-center",
+		...buttonVariants.slots,
+		button: cn(
+			buttonVariants.slots.button,
+			"first:rounded-r-none first:rounded-l-md last:rounded-r-md last:rounded-l-none",
+		),
+	},
+	defaultVariants: {
+		orientation: "horizontal",
+		gap: 0,
+		...buttonVariants.defaultVariants,
+	},
+	variants: {
+		...buttonVariants.variants,
+		// variants: {
+		// 	...buttonVariants.variants.variant,
+		// 	outline: "first:bg-red-500 last:bg-red-500 ",
+		// 	// solid: "solid",
+		// },
+		variant: {
+			...buttonVariants.variants.variant,
+		},
+		orientation: {
+			horizontal: { buttonGroup: "flex-row" },
+			vertical: { buttonGroup: "flex-col" },
+		},
+		gap: {
+			0: { buttonGroup: "gap-0" },
+			1: { buttonGroup: "gap-1" },
+			2: { buttonGroup: "gap-2" },
+			3: { buttonGroup: "gap-3" },
+			4: { buttonGroup: "gap-4" },
+			5: { buttonGroup: "gap-5" },
+			6: { buttonGroup: "gap-6" },
+			7: { buttonGroup: "gap-7" },
+			8: { buttonGroup: "gap-8" },
+			9: { buttonGroup: "gap-9" },
+			10: { buttonGroup: "gap-10" },
+		},
+	},
+})

packages/styles/tsconfig.json

@@ -1,11 +1,11 @@
 {
-  "extends": "@dv/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "paths": {
-      "tailwind-variants": ["../../node_modules/tailwind-variants"]
-    }
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+	"extends": "@dv/typescript-config/react-library.json",
+	"compilerOptions": {
+		"outDir": "dist",
+		"paths": {
+			"tailwind-variants": ["../../node_modules/tailwind-variants"]
+		}
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
 }

packages/ui/src/components/ui/button-group/button-group-context.ts

@@ -0,0 +1,4 @@
+import { buttonGroupVariants } from "@dv/styles/components/button-group"
+import { createStyleContext } from "../../../utils/create-style-context"
+
+export const buttonGroupContext = createStyleContext(buttonGroupVariants)

packages/ui/src/components/ui/button-group/button-group.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react"
+
+import { buttonGroupContext } from "./button-group-context"
+
+interface ButtonGroupProps {
+	/** The children of the button group. */
+	children: ReactNode
+
+	/** The styles of the button group. */
+	className?: string
+}
+
+const { withProvider } = buttonGroupContext
+
+/** Displays a group of buttons with matching styles. */
+const UnstyledButtonGroup = ({ children, className, ...props }: ButtonGroupProps) => {
+	return <div {...props}>{children}</div>
+}
+
+const ButtonGroup = withProvider(UnstyledButtonGroup, "buttonGroup")
+
+export { ButtonGroup }

packages/ui/src/components/ui/button-group/index.ts

@@ -0,0 +1 @@
+export * from "./button-group"

packages/ui/src/components/ui/button/button.tsx

@@ -47,6 +47,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 	},
 )
 
-Button.displayName = "Button"
-
 export { type ButtonProps, Button }

packages/ui/src/components/ui/index.ts

@@ -3,6 +3,7 @@
 export * from "./badge"
 export * from "./breadcrumbs"
 export * from "./button"
+export * from "./button-group"
 export * from "./calendar"
 export * from "./card"
 export * from "./checkbox"