From f069e4647fdab653f09003ba7e38c6f06b306a10 Mon Sep 17 00:00:00 2001
From: Fabio Biondi <info@fabiobiondi.com>
Date: Sun, 29 Jan 2023 03:08:02 +0100
Subject: [PATCH] feat(component): add ButtonGroup component

---
 .../components/button-group/button-group.tsx  | 14 ++++++++++
 packages/daisy/src/index.ts                   |  1 +
 .../components/button-group/button-group.tsx  | 13 +++++++++
 packages/headless/src/index.ts                |  1 +
 packages/website/src/components/menu/menu.tsx |  1 +
 .../routes/docs/daisy/button-group/index.tsx  | 25 +++++++++++++++++
 .../headless/button-group/button-group.css    |  5 ++++
 .../docs/headless/button-group/index.tsx      | 28 +++++++++++++++++++
 8 files changed, 88 insertions(+)
 create mode 100644 packages/daisy/src/components/button-group/button-group.tsx
 create mode 100644 packages/headless/src/components/button-group/button-group.tsx
 create mode 100644 packages/website/src/routes/docs/daisy/button-group/index.tsx
 create mode 100644 packages/website/src/routes/docs/headless/button-group/button-group.css
 create mode 100644 packages/website/src/routes/docs/headless/button-group/index.tsx

diff --git a/packages/daisy/src/components/button-group/button-group.tsx b/packages/daisy/src/components/button-group/button-group.tsx
new file mode 100644
index 000000000..f3816b756
--- /dev/null
+++ b/packages/daisy/src/components/button-group/button-group.tsx
@@ -0,0 +1,14 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+import { ButtonGroup as HeadlessButtonGroup } from '@qwik-ui/headless';
+
+export type ButtonGroupProps = HTMLAttributes<HTMLElement>;
+
+export const ButtonGroup = component$(
+  (props: ButtonGroupProps) => {
+    return (
+      <HeadlessButtonGroup {...props} class="btn-group" >
+        <Slot />
+      </HeadlessButtonGroup>
+    );
+  }
+);
diff --git a/packages/daisy/src/index.ts b/packages/daisy/src/index.ts
index ef76212ba..a70a3575d 100644
--- a/packages/daisy/src/index.ts
+++ b/packages/daisy/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components/button/button';
+export * from './components/button-group/button-group';
 export * from './components/collapse/collapse';
 export * from './components/drawer/drawer';
 export * from './components/tabs';
diff --git a/packages/headless/src/components/button-group/button-group.tsx b/packages/headless/src/components/button-group/button-group.tsx
new file mode 100644
index 000000000..504236726
--- /dev/null
+++ b/packages/headless/src/components/button-group/button-group.tsx
@@ -0,0 +1,13 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+
+export type ButtonGroupProps = HTMLAttributes<HTMLElement>;
+
+export const ButtonGroup = component$(
+  (props: ButtonGroupProps) => {
+    return (
+      <div {...props}>
+        <Slot />
+      </div>
+    );
+  }
+);
diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts
index 7cbe5a1ee..7da4a6a45 100644
--- a/packages/headless/src/index.ts
+++ b/packages/headless/src/index.ts
@@ -1,4 +1,5 @@
 export * from './components/button/button';
+export * from './components/button-group/button-group';
 export * from './components/collapse/collapse';
 export * from './components/drawer';
 export * from './components/tabs/tabs';
diff --git a/packages/website/src/components/menu/menu.tsx b/packages/website/src/components/menu/menu.tsx
index 3a77671e0..fb0c5f6a5 100644
--- a/packages/website/src/components/menu/menu.tsx
+++ b/packages/website/src/components/menu/menu.tsx
@@ -4,6 +4,7 @@ import styles from './menu.css?inline';
 
 export const generateMenu = (library: string) => [
   { label: 'Button', path: `/docs/${library.toLowerCase()}/button` },
+  { label: 'ButtonGroup', path: `/docs/${library.toLowerCase()}/button-group` },
   { label: 'Collapse', path: `/docs/${library.toLowerCase()}/collapse` },
   { label: 'Drawer', path: `/docs/${library.toLowerCase()}/drawer` },
   { label: 'Select', path: `/docs/${library.toLowerCase()}/select` },
diff --git a/packages/website/src/routes/docs/daisy/button-group/index.tsx b/packages/website/src/routes/docs/daisy/button-group/index.tsx
new file mode 100644
index 000000000..5806b24f6
--- /dev/null
+++ b/packages/website/src/routes/docs/daisy/button-group/index.tsx
@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { Button, ButtonGroup } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the ButtonGroup</h2>
+
+      <h1>Basic Example</h1>
+      <ButtonGroup>
+        <Button>BUTTON 1</Button>
+        <Button>BUTTON 2</Button>
+        <Button>BUTTON 3</Button>
+      </ButtonGroup>
+
+      <hr/>
+      <h1>With custom styles</h1>
+      <ButtonGroup style="border: 0.2rem solid black; padding: 1rem;">
+        <Button>BUTTON 1</Button>
+        <Button>BUTTON 2</Button>
+        <Button>BUTTON 3</Button>
+      </ButtonGroup>
+    </>
+  );
+});
diff --git a/packages/website/src/routes/docs/headless/button-group/button-group.css b/packages/website/src/routes/docs/headless/button-group/button-group.css
new file mode 100644
index 000000000..f9d3c388b
--- /dev/null
+++ b/packages/website/src/routes/docs/headless/button-group/button-group.css
@@ -0,0 +1,5 @@
+.custom-btn-group {
+  display: inline-flex;
+  padding: 1rem;
+  gap: 3rem;
+}
diff --git a/packages/website/src/routes/docs/headless/button-group/index.tsx b/packages/website/src/routes/docs/headless/button-group/index.tsx
new file mode 100644
index 000000000..527f54352
--- /dev/null
+++ b/packages/website/src/routes/docs/headless/button-group/index.tsx
@@ -0,0 +1,28 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Button, ButtonGroup } from '@qwik-ui/headless';
+import styles from './button-group.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <>
+      <h2>This is the documentation for the ButtonGroup</h2>
+
+      <h1>Basic Example</h1>
+      <ButtonGroup>
+        <Button>BUTTON 1</Button>
+        <Button>BUTTON 2</Button>
+        <Button>BUTTON 3</Button>
+      </ButtonGroup>
+
+      <hr/>
+      <h1>With custom styles</h1>
+      <ButtonGroup class="custom-btn-group" style="border: 2px solid black">
+        <Button>BUTTON 1</Button>
+        <Button>BUTTON 2</Button>
+        <Button>BUTTON 3</Button>
+      </ButtonGroup>
+    </>
+  );
+});