diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx new file mode 100644 index 0000000..9409e62 --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +}; + +export default ButtonGroup; diff --git a/src/components/ButtonGroup/index.ts b/src/components/ButtonGroup/index.ts new file mode 100644 index 0000000..62d576b --- /dev/null +++ b/src/components/ButtonGroup/index.ts @@ -0,0 +1,2 @@ +export { default } from './ButtonGroup'; +export type { ButtonGroupProps } from './ButtonGroup'; diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx new file mode 100644 index 0000000..d0e419b --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +}; + +export default Toolbar; diff --git a/src/components/Toolbar/index.ts b/src/components/Toolbar/index.ts new file mode 100644 index 0000000..869178f --- /dev/null +++ b/src/components/Toolbar/index.ts @@ -0,0 +1,2 @@ +export { default } from './Toolbar'; +export type { ToolbarProps } from './Toolbar'; diff --git a/src/components/index.ts b/src/components/index.ts index 88948ca..0532d2d 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/index.ts b/src/index.ts index fac052d..fde634b 100644 --- a/src/index.ts +++ b/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';