Add ButtonGroup and Toolbar component

src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,46 @@
+import { ElementType, ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface ButtonGroupProps {
+  /**
+   * The button size.
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * Button contents.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export function ButtonGroup({
+  size = 'md',
+  children,
+  className,
+  ...props
+}: ButtonGroupProps) {
+  return (
+    <div
+      className={clsx(
+        'btn-group',
+        {
+          [`btn-group-${size}`]: size !== 'md',
+        },
+        className
+      )}
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ButtonGroup;

src/components/ButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';

src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+export interface ToolbarProps {
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * Button contents.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export function Toolbar({
+  children,
+  className,
+  ...props
+}: ToolbarProps) {
+  return (
+    <div
+      className={clsx(
+        'btn-toolbar',
+        className
+      )}
+      role="toolbar"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Toolbar;

src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';

src/components/index.ts

@@ -22,6 +22,9 @@ export type { BottomBarItemProps } from '@components/BottomBarItem';
 export { default as Button } from '@components/Button';
 export type { ButtonProps } from '@components/Button';
 
+export { default as ButtonGroup } from '@components/ButtonGroup';
+export type { ButtonGroupProps } from '@components/ButtonGroup';
+
 export { default as Card } from '@components/Card';
 export type { CardProps } from '@components/Card';
 
@@ -161,3 +164,6 @@ export type { SelectItemProps } from '@components/SelectItem';
 
 export { default as SelectLabel } from '@components/SelectLabel';
 export type { SelectLabelProps } from '@components/SelectLabel';
+
+export { default as Toolbar } from '@components/Toolbar';
+export type { ToolbarProps } from '@components/Toolbar';

src/index.ts

@@ -22,6 +22,9 @@ export type { BottomBarItemProps } from '@components/BottomBarItem';
 export { default as Button } from '@components/Button';
 export type { ButtonProps } from '@components/Button';
 
+export { default as ButtonGroup } from '@components/ButtonGroup';
+export type { ButtonGroupProps } from '@components/ButtonGroup';
+
 export { default as Card } from '@components/Card';
 export type { CardProps } from '@components/Card';
 
@@ -162,4 +165,7 @@ export type { SelectItemProps } from '@components/SelectItem';
 export { default as SelectLabel } from '@components/SelectLabel';
 export type { SelectLabelProps } from '@components/SelectLabel';
 
+export { default as Toolbar } from '@components/Toolbar';
+export type { ToolbarProps } from '@components/Toolbar';
+
 export { default as useColor } from '@hooks/useColor';