feat: Added new Theme Button

packages/ui/src/components.ts

@@ -6,3 +6,4 @@ export { SearchButton } from './components/SearchButton/SearchButton';
 export { SearchForm } from './components/SearchForm/SearchForm';
 export { SearchInput } from './components/SearchInput/SearchInput';
 export { ThemeSwitch } from './components/ThemeSwitch/ThemeSwitch';
+export { ThemeButton } from './components/ThemeButton/ThemeButton';

packages/ui/src/components/Navigation/data/NavigationContext.ts

@@ -55,6 +55,11 @@ export interface NavigationProps {
      * The logo image class name
      */
     logo?: string;
+
+    /**
+     * The popover content container class name
+     */
+    popover?: string;
   }
 }
 

packages/ui/src/components/Navigation/parts/NavigationPart_Actions.tsx

@@ -1,4 +1,4 @@
-import { ThemeSwitch, SearchButton } from '@do-ob/ui/components';
+import { ThemeButton, SearchButton } from '@do-ob/ui/components';
 import { SocialIcons } from '@do-ob/ui/icons';
 import { Link, Button, Divider } from '@nextui-org/react';
 import { NavigationContext } from '../data/NavigationContext';
@@ -24,6 +24,7 @@ export function NavigationPart_Actions() {
                 variant="light"
                 aria-label={social.type}
                 href={social.url}
+                isExternal={true}
                 isIconOnly
               >
                 <Icon className="size-5 dark:fill-white" />
@@ -39,12 +40,12 @@ export function NavigationPart_Actions() {
       <section className="flex h-full flex-row items-center justify-center gap-2 [&>div]:flex [&>div]:items-center">
         {search ? (
           <div>
-            <SearchButton />
+            <SearchButton size="sm" variant="flat" />
           </div>
         ) : null}
         {modeToggle ? (
           <div>
-            <ThemeSwitch />
+            <ThemeButton size="sm" variant="flat" />
           </div>
         ) : null}
       </section>

packages/ui/src/components/Navigation/parts/NavigationPart_Links.tsx

@@ -37,7 +37,7 @@ function LinkBranch({ links, level }: { links: LinkType[], level: number }) {
         orientation="vertical"
         className="absolute top-0 h-full"
         style={{
-          display: level === 1 ? 'none' : 'block',
+          display: level <= 2 ? 'none' : 'block',
           left: `${pl - 1}rem`,
         }}
       />
@@ -59,7 +59,8 @@ function LinkBranch({ links, level }: { links: LinkType[], level: number }) {
   ));
 }
 
-function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
+function LinkTrunk({ link, colors, className }: { link: LinkType, colors?: string, className?: string }) {
+
   return (
     <Popover
       placement="bottom"
@@ -75,11 +76,15 @@ function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
           </Button>
         </PopoverTrigger>
       </NavbarMenuItem>
-      <PopoverContent className={clsx(colors, 'min-w-64 items-start p-4')}>
-        <Button as={Link} href={link.url} className="w-full justify-start rounded bg-transparent px-4 py-2 text-lg font-bold text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10">
+      <PopoverContent className={clsx(colors, 'min-w-64 items-start p-4', className)}>
+        <Button
+          as={Link}
+          href={link.url}
+          className="w-full justify-start rounded bg-transparent px-4 py-2 text-xl font-bold text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10"
+        >
           {link.title}
         </Button>
-        <Divider className="my-1" />
+        <Divider className="my-2" />
         <LinkBranch links={link.links ?? []} level={1} />
       </PopoverContent>
     </Popover>
@@ -91,12 +96,12 @@ function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
  */
 export function NavigationPart_Links() {
 
-  const { links = [], colors } = useContext(NavigationContext);
+  const { links = [], colors, classNames } = useContext(NavigationContext);
 
   return links.length ? links.map((link) => !link.links?.length ? (
     <LinkLeaf key={link.title} link={link} />
   ) : (
-    <LinkTrunk key={link.title} link={link} colors={colors[0]} />
+    <LinkTrunk key={link.title} link={link} colors={colors[0]} className={classNames?.popover} />
   )) : (
     <NavbarMenuItem>
       &nbsp;

packages/ui/src/components/SearchButton/SearchButton.tsx

@@ -1,46 +1,39 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalContent } from '@nextui-org/react';
+import { Button, ButtonProps, Modal, ModalHeader, ModalBody, useDisclosure, ModalContent } from '@nextui-org/react';
 import { SearchAction, search } from '@do-ob/ui/actions';
 import { SearchForm } from '../SearchForm/SearchForm';
 
 /**
  * Navigation Brand properties
  */
-export interface SearchButtonProps {
+export interface SearchButtonProps extends ButtonProps {
   /**
    * The search action
    * 
    * @default '#'
    */
   action?: SearchAction;
-
-  /**
-   * The size of the search button.
-   * 
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg';
 }
 
 /**
  * Navigation Search component
  */
 export function SearchButton({
   action = search,
-  size = 'md',
+  ...props
 }: SearchButtonProps) {
 
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   return (<>
-    <Button isIconOnly onPress={onOpen} size="sm" aria-label="Search website" variant="faded">
+    <Button isIconOnly onPress={onOpen} aria-label="Search website" {...props}>
       <MagnifyingGlassIcon className="size-5"  />
     </Button>
     <Modal
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       title="Search"
-      size={size}
+      size="lg"
       hideCloseButton
     >
       <ModalContent>

packages/ui/src/components/ThemeButton/ThemeButton.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ThemeButton } from './ThemeButton';
+
+const meta = {
+  component: ThemeButton,
+  tags: [ 'autodocs' ]
+} satisfies Meta<typeof ThemeButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/ui/src/components/ThemeButton/ThemeButton.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useContext } from 'react';
+import { Button, ButtonProps } from '@nextui-org/react';
+import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';
+
+import { DoobUiContext } from '@do-ob/ui/context';
+
+/**
+ * Theme switch properties.
+ */
+export interface ThemeButtonProps extends ButtonProps {
+  /**
+   * The theme switch label.
+   */
+  children?: string;
+}
+
+/**
+ * This button is used to toggle the theme of the application. It toggles between 'light' and 'dark'
+ * class names that are applied to the html element of the document.
+ */
+export function ThemeButton({
+  children,
+  ...props
+}: ThemeButtonProps) {
+
+  const { mode, modeToggle } = useContext(DoobUiContext);
+
+  return (
+    <Button
+      onClick={modeToggle}
+      startContent={mode === 'dark' ? <MoonIcon className="size-2/3" /> : <SunIcon className="size-2/3" />}
+      isIconOnly={!children}
+      aria-label="Toggle theme"
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}

packages/ui/src/components/ThemeSwitch/ThemeSwitch.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import ThemeSwitch from './ThemeSwitch';
+import { ThemeSwitch } from './ThemeSwitch';
 
 const meta = {
   component: ThemeSwitch,

packages/ui/src/components/ThemeSwitch/ThemeSwitch.tsx

@@ -37,5 +37,3 @@ export function ThemeSwitch({
     </Switch>
   );
 }
-
-export default ThemeSwitch;

packages/ui/src/provider.tsx

@@ -1,10 +1,12 @@
 'use client';
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { NextUIProvider, NextUIProviderProps } from '@nextui-org/react';
+import { NextUIProvider, NextUIProviderProps as NextUIProviderPropsOriginal } from '@nextui-org/react';
 import { DoobUiContext } from '@do-ob/ui/context';
 import type { ThemeMode } from '@do-ob/ui/types';
 import { useMode } from '@do-ob/ui/hooks';
 
+export type NextUIProviderProps = Omit<NextUIProviderPropsOriginal, 'children'>;
+
 export interface DoobUiProviderProps {
   /**
    * Set the image component to utilize for optimization