Add support for Dropdowns

src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,53 @@
+import { Menu } from '@headlessui/react';
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+
+export interface DropdownProps {
+  /**
+   * The color of the button, only works when the variant is `color` or `hover`
+   */
+  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  /**
+   * Value of the textarea
+   */
+  trigger: ReactNode;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * Custom classes for the label
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Dropdown = ({
+  className,
+  color,
+  trigger,
+  children,
+  ...props
+}: DropdownProps) => {
+  return (
+    <div className="dropdown">
+      <Menu>
+        <Menu.Button as={React.Fragment}>{trigger}</Menu.Button>
+        <Menu.Items
+          className={clsx(
+            'dropdown-menu',
+            color,
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </Menu.Items>
+      </Menu>
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/Dropdown/index.ts

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

src/components/DropdownItem/DropdownItem.tsx

@@ -0,0 +1,70 @@
+import { Menu } from '@headlessui/react';
+import clsx from 'clsx';
+import React, { ElementType, ReactNode, useMemo } from 'react';
+
+export interface DropdownItemProps<T> {
+  /**
+   * The color of the button, only works when the variant is `color` or `hover`
+   */
+  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  /**
+   * Button disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If we have a href, it's an anchor.
+   */
+  href?: string;
+  /**
+   * Custom classes for the label
+   */
+  className?: string;
+  /**
+   * As what the component should be rendered
+   */
+  as?: T;
+  /**
+   * Custom classes for the label
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export function Dropdown<T>({
+  href,
+  className,
+  as,
+  color,
+  disabled = false,
+  children,
+  ...props
+}: DropdownItemProps<T>) {
+  const Component = useMemo(() => (as ? as : (href ? 'a' : 'button')) as ElementType, [as, href]);
+
+  return (
+    <Menu.Item>
+      {({ active }) => (
+        <Component
+          type="button"
+          className={clsx(
+            'dropdown-item',
+            {
+              'active': active,
+            },
+            color,
+            className
+          )}
+          href={href}
+          disabled={disabled}
+          {...props}
+        >
+          {children}
+        </Component>
+      )}
+    </Menu.Item>
+  );
+};
+
+export default Dropdown;

src/components/DropdownItem/index.ts

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

src/components/index.ts

@@ -67,6 +67,12 @@ export type { DialogFooterProps } from '@components/DialogFooter';
 export { default as DialogHeader } from '@components/DialogHeader';
 export type { DialogHeaderProps } from '@components/DialogHeader';
 
+export { default as Dropdown } from '@components/Dropdown';
+export type { DropdownProps } from '@components/Dropdown';
+
+export { default as DropdownItem } from '@components/DropdownItem';
+export type { DropdownItemProps } from '@components/DropdownItem';
+
 export { default as InputAddon } from '@components/InputAddon';
 export type { InputAddonProps } from '@components/InputAddon';
 

src/docs/App.tsx

@@ -14,6 +14,7 @@ import CardDemo from './pages/Components/CardDemo';
 import CheckboxDemo from './pages/Forms/CheckboxDemo';
 import ContainerDemo from './pages/Layout/ContainerDemo';
 import DialogDemo from './pages/Components/DialogDemo';
+import DropdownDemo from './pages/Components/DropdownDemo';
 import FormControlDemo from './pages/Forms/FormControlDemo';
 import GridDemo from './pages/Layout/GridDemo';
 import InputDemo from './pages/Forms/InputDemo';
@@ -47,6 +48,7 @@ function App() {
         <Route path="/checkbox" element={<CheckboxDemo />} />
         <Route path="/container" element={<ContainerDemo />} />
         <Route path="/dialog" element={<DialogDemo />} />
+        <Route path="/dropdown" element={<DropdownDemo />} />
         <Route path="/formcontrol" element={<FormControlDemo />} />
         <Route path="/grid" element={<GridDemo />} />
         <Route path="/input" element={<InputDemo />} />

src/docs/components/Layout.tsx

@@ -45,10 +45,11 @@ export default function Layout({ children }) {
             <ListItem primary="Avatar" onClick={() => navigate('/avatar')} />
             <ListItem primary="Bottom Bar" onClick={() => navigate('/bottombar')} />
             <ListItem primary="Breadcrumb" onClick={() => navigate('/breadcrumb')} />
-            <ListItem primary="Button Group" onClick={() => navigate('/buttongroup')} />
             <ListItem primary="Button" onClick={() => navigate('/button')} />
+            <ListItem primary="Button Group" onClick={() => navigate('/buttongroup')} />
             <ListItem primary="Card" onClick={() => navigate('/card')} />
             <ListItem primary="Dialog" onClick={() => navigate('/dialog')} />
+            <ListItem primary="Dropdown" onClick={() => navigate('/dropdown')} />
             <ListItem primary="Label" onClick={() => navigate('/label')} />
             <ListItem primary="List" onClick={() => navigate('/list')} />
             <ListItem primary="Menu" onClick={() => navigate('/menu')} />

src/docs/pages/Components/DropdownDemo.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+import DemoBox from "@docs/components/DemoBox";
+
+import {
+  Button,
+  Dropdown,
+  DropdownItem
+} from "@components";
+
+export default function GridDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <h2>Dialog</h2>
+      <DemoBox>
+        <Dropdown
+          trigger={
+            <Button>Open dropdown</Button>
+          }
+        >
+          <DropdownItem>Hello</DropdownItem>
+        </Dropdown>
+      </DemoBox>
+      <h3>Color</h3>
+      <DemoBox>
+        <Dropdown
+          color="indigo"
+          trigger={
+            <Button>Open dropdown</Button>
+          }
+        >
+          <DropdownItem>Hello</DropdownItem>
+          <DropdownItem>World</DropdownItem>
+          <DropdownItem color="red">Delete</DropdownItem>
+        </Dropdown>
+      </DemoBox>
+    </>
+  );
+}

src/index.ts

@@ -67,6 +67,12 @@ export type { DialogFooterProps } from '@components/DialogFooter';
 export { default as DialogHeader } from '@components/DialogHeader';
 export type { DialogHeaderProps } from '@components/DialogHeader';
 
+export { default as Dropdown } from '@components/Dropdown';
+export type { DropdownProps } from '@components/Dropdown';
+
+export { default as DropdownItem } from '@components/DropdownItem';
+export type { DropdownItemProps } from '@components/DropdownItem';
+
 export { default as InputAddon } from '@components/InputAddon';
 export type { InputAddonProps } from '@components/InputAddon';