feat(component): add ButtonGroup component (#103)

Author: fabiobiondi

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>
+    );
+  }
+);

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';

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>
+    );
+  }
+);

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';

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` },

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>
+    </>
+  );
+});

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;
+}

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>
+    </>
+  );
+});