From fe3af52a5435bd9ea37646d797f1b3305250725a Mon Sep 17 00:00:00 2001
From: Brian Richter <brian@aviary.tech>
Date: Thu, 30 Jan 2025 11:28:57 -0800
Subject: [PATCH] feat(c): dropdown direction added

---
 .gitignore                                 |  1 +
 src/components/checkbox/Checkbox.tsx       | 29 +++++--
 src/components/dropdown/Dropdown.tsx       | 97 ++++++++++++++++++----
 src/components/label/Label.tsx             |  2 +-
 src/components/navigation/NavMenu.tsx      | 78 ++++++-----------
 src/docs/App.tsx                           | 32 ++++++-
 src/docs/pages/components/DropdownPage.tsx | 28 +++++++
 src/docs/pages/components/NavMenuPage.tsx  | 49 +++++++++++
 8 files changed, 235 insertions(+), 81 deletions(-)

diff --git a/.gitignore b/.gitignore
index de4d1f0..5f6c423 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 dist
 node_modules
+tmp
\ No newline at end of file
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
index 56883fc..a69d618 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/src/components/checkbox/Checkbox.tsx
@@ -10,28 +10,39 @@ export interface CheckboxProps
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   ({ className, label, id, ...props }, ref) => {
+    const checkboxId = id || React.useId();
+
     return (
-      <div className="flex items-center gap-2">
-        <div className="relative inline-flex items-center">
+      <div className="flex items-center">
+        <div className="relative flex items-center">
           <input
             type="checkbox"
+            id={checkboxId}
             ref={ref}
-            id={id}
             className={cn(
-              "peer h-4 w-4 appearance-none rounded border border-gray-700 bg-gray-800 transition-colors",
-              "checked:border-blue-500 checked:bg-blue-500",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
+              "peer h-4 w-4 appearance-none rounded border",
+              "border-gray-300 dark:border-gray-600",
+              "bg-white dark:bg-gray-800",
+              "checked:bg-blue-500 dark:checked:bg-blue-600",
+              "checked:border-blue-500 dark:checked:border-blue-600",
+              "focus:outline-none focus:ring-2 focus:ring-blue-500/30 dark:focus:ring-blue-600/30",
               "disabled:cursor-not-allowed disabled:opacity-50",
               className
             )}
             {...props}
           />
-          <Check className="absolute h-3 w-3 text-white opacity-0 peer-checked:opacity-100" />
+          <Check 
+            className={cn(
+              "absolute left-0 top-0 h-4 w-4 stroke-[3] text-white opacity-0 transition-opacity",
+              "peer-checked:opacity-100",
+              "pointer-events-none"
+            )} 
+          />
         </div>
         {label && (
           <label 
-            htmlFor={id} 
-            className="text-sm text-gray-300 cursor-pointer select-none"
+            htmlFor={checkboxId}
+            className="ml-2 text-sm text-gray-900 dark:text-gray-100"
           >
             {label}
           </label>
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
index 0f76f39..ef2b23d 100644
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/dropdown/Dropdown.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../../utils/cn";
 import { ZINDEX } from "../../utils/z-index";
 
@@ -6,6 +7,8 @@ export interface DropdownProps {
   trigger: React.ReactNode;
   children: React.ReactNode;
   align?: "left" | "right";
+  direction?: "down" | "up";
+  variant?: "default" | "nav";
   className?: string;
 }
 
@@ -13,10 +16,13 @@ export const Dropdown: React.FC<DropdownProps> = ({
   trigger,
   children,
   align = "left",
+  direction = "down",
+  variant = "default",
   className,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const triggerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -25,30 +31,87 @@ export const Dropdown: React.FC<DropdownProps> = ({
       }
     };
 
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
     document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+    if (variant === "nav") {
+      document.addEventListener("keydown", handleEscape);
+    }
+    
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (variant === "nav") {
+        document.removeEventListener("keydown", handleEscape);
+      }
+    };
+  }, [variant]);
+
+  const triggerClasses = cn({
+    "cursor-pointer": true,
+    "flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 transition-colors": 
+      variant === "nav",
+  });
+
+  const menuClasses = cn(
+    "absolute rounded-lg shadow-lg min-w-[8rem] py-1",
+    variant === "default" && [
+      "bg-white dark:bg-gray-900",
+      "border border-gray-200 dark:border-gray-800",
+    ],
+    variant === "nav" && [
+      "bg-white dark:bg-gray-800",
+      "border border-gray-200 dark:border-gray-700",
+      "w-48 rounded-md",
+    ],
+    {
+      "left-0": align === "left",
+      "right-0": align === "right",
+      "top-full mt-2": direction === "down",
+      "bottom-full mb-2": direction === "up",
+    },
+    className
+  );
+
+  // Get position for the dropdown menu
+  const getDropdownPosition = () => {
+    if (!triggerRef.current) return {};
+    const rect = triggerRef.current.getBoundingClientRect();
+    
+    return {
+      position: 'fixed' as const,
+      left: rect.left,
+      right: window.innerWidth - rect.right,
+      ...(direction === 'down' 
+        ? { top: rect.bottom + 8 }
+        : { bottom: window.innerHeight - rect.top + 8 }
+      ),
+    };
+  };
 
   return (
     <div className="relative inline-block" ref={dropdownRef}>
-      <div onClick={() => setIsOpen(!isOpen)}>{trigger}</div>
-      {isOpen && (
+      <div 
+        ref={triggerRef}
+        onClick={() => setIsOpen(!isOpen)} 
+        className={triggerClasses}
+      >
+        {trigger}
+      </div>
+      {isOpen && createPortal(
         <div
-          className={cn(
-            "absolute mt-2 rounded-lg shadow-lg",
-            "bg-white dark:bg-gray-900",
-            "border border-gray-200 dark:border-gray-800",
-            "min-w-[8rem] py-1",
-            {
-              "left-0": align === "left",
-              "right-0": align === "right",
-            },
-            className
-          )}
-          style={{ zIndex: ZINDEX.dropdown }}
+          className={menuClasses}
+          style={{
+            ...getDropdownPosition(),
+            zIndex: ZINDEX.dropdown,
+          }}
         >
           {children}
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
index bdcb8d8..d6b1e30 100644
--- a/src/components/label/Label.tsx
+++ b/src/components/label/Label.tsx
@@ -8,7 +8,7 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-300",
+        "text-sm font-medium text-gray-900 dark:text-gray-100",
         className
       )}
       {...props}
diff --git a/src/components/navigation/NavMenu.tsx b/src/components/navigation/NavMenu.tsx
index 376da52..e01c292 100644
--- a/src/components/navigation/NavMenu.tsx
+++ b/src/components/navigation/NavMenu.tsx
@@ -1,67 +1,37 @@
 import * as React from "react";
 import { cn } from "../../utils/cn";
 import { ChevronDown } from "lucide-react";
-import { ZINDEX } from "../../utils/z-index";
+import { Dropdown, DropdownProps } from "../dropdown/Dropdown";
 
-export interface NavMenuProps {
+export interface NavMenuProps extends Omit<DropdownProps, 'variant' | 'trigger'> {
   trigger: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
 }
 
 export const NavMenu: React.FC<NavMenuProps> = ({
   trigger,
   children,
-  className,
+  direction = "down",
+  ...props
 }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    // Close menu when pressing escape
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-      setIsOpen(false); // Ensure menu is closed on unmount
-    };
-  }, []);
-
   return (
-    <div className="relative" ref={menuRef}>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors"
-      >
-        {trigger}
-        <ChevronDown className="h-4 w-4" />
-      </button>
-      {isOpen && (
-        <div
-          className={cn(
-            "absolute right-0 mt-2 w-48 rounded-md bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5",
-            className
-          )}
-          style={{ zIndex: ZINDEX.dropdown }}
-        >
-          {children}
-        </div>
-      )}
-    </div>
+    <Dropdown
+      trigger={
+        <>
+          {trigger}
+          <ChevronDown 
+            className={cn(
+              "h-4 w-4 transition-transform duration-200",
+              direction === "up" && "rotate-180"
+            )} 
+          />
+        </>
+      }
+      variant="nav"
+      direction={direction}
+      {...props}
+    >
+      {children}
+    </Dropdown>
   );
 };
 
@@ -72,7 +42,9 @@ export const NavMenuItem = React.forwardRef<
   <button
     ref={ref}
     className={cn(
-      "flex w-full items-center rounded-md px-2 py-1.5 text-sm text-gray-300 hover:bg-gray-700 focus:outline-none",
+      "flex w-full items-center rounded-md px-2 py-1.5 text-sm",
+      "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700",
+      "focus:outline-none",
       className
     )}
     {...props}
diff --git a/src/docs/App.tsx b/src/docs/App.tsx
index 9922411..2276083 100644
--- a/src/docs/App.tsx
+++ b/src/docs/App.tsx
@@ -33,7 +33,37 @@ import { FeaturesPage } from "./pages/FeaturesPage";
 import { Toaster } from 'react-hot-toast';
 
 export const App = () => {
-  const [currentPage, setCurrentPage] = React.useState("getting-started");
+  const [currentPage, setCurrentPage] = React.useState(() => {
+    // First try to get page from URL hash
+    const hashPage = window.location.hash.slice(1);
+    if (hashPage) return hashPage;
+    
+    // Then try localStorage
+    const savedPage = localStorage.getItem('currentPage');
+    if (savedPage) return savedPage;
+    
+    // Default to a starting page
+    return 'getting-started';
+  });
+
+  // Update hash and localStorage when page changes
+  React.useEffect(() => {
+    window.location.hash = currentPage;
+    localStorage.setItem('currentPage', currentPage);
+  }, [currentPage]);
+
+  // Handle hash changes from browser back/forward
+  React.useEffect(() => {
+    const handleHashChange = () => {
+      const page = window.location.hash.slice(1);
+      if (page) {
+        setCurrentPage(page);
+      }
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
 
   const renderPage = () => {
     switch (currentPage) {
diff --git a/src/docs/pages/components/DropdownPage.tsx b/src/docs/pages/components/DropdownPage.tsx
index 589a84e..9330979 100644
--- a/src/docs/pages/components/DropdownPage.tsx
+++ b/src/docs/pages/components/DropdownPage.tsx
@@ -19,6 +19,12 @@ export const DropdownPage = () => {
       defaultValue: "left",
       description: "The alignment of the dropdown menu",
     },
+    {
+      name: "direction",
+      type: "'down' | 'up'",
+      defaultValue: "down",
+      description: "Direction for the menu to expand",
+    },
     {
       name: "className",
       type: "string",
@@ -108,6 +114,28 @@ const MyComponent = () => (
               <DropdownItem>Action</DropdownItem>
             </Dropdown>
           </ComponentDemo>
+
+          <ComponentDemo
+            title="Upward Direction"
+            description="Dropdown menu that expands upward"
+            code={`<Dropdown
+  trigger={<Button>Upward Menu</Button>}
+  direction="up"
+>
+  <DropdownItem>Option 1</DropdownItem>
+  <DropdownItem>Option 2</DropdownItem>
+</Dropdown>`}
+          >
+            <div className="text-center mt-16">
+              <Dropdown
+                trigger={<Button>Upward Menu</Button>}
+                direction="up"
+              >
+                <DropdownItem>Option 1</DropdownItem>
+                <DropdownItem>Option 2</DropdownItem>
+              </Dropdown>
+            </div>
+          </ComponentDemo>
         </div>
       </section>
     </div>
diff --git a/src/docs/pages/components/NavMenuPage.tsx b/src/docs/pages/components/NavMenuPage.tsx
index 744e4aa..efc4026 100644
--- a/src/docs/pages/components/NavMenuPage.tsx
+++ b/src/docs/pages/components/NavMenuPage.tsx
@@ -20,6 +20,12 @@ export const NavMenuPage = () => {
       required: true,
       description: "Menu items",
     },
+    {
+      name: "direction",
+      type: "'down' | 'up'",
+      defaultValue: "down",
+      description: "Direction for the menu to expand",
+    },
     {
       name: "className",
       type: "string",
@@ -120,6 +126,49 @@ const MyComponent = () => (
               </NavMenu>
             </div>
           </ComponentDemo>
+
+          <ComponentDemo
+            title="Direction"
+            description="NavMenu can expand upward or downward"
+            code={`<NavMenu 
+  trigger="Options" 
+  direction="up"
+>
+  <NavMenuItem>Option 1</NavMenuItem>
+  <NavMenuItem>Option 2</NavMenuItem>
+  <NavMenuItem>Option 3</NavMenuItem>
+</NavMenu>
+
+<NavMenu 
+  trigger="Options" 
+  direction="down"
+>
+  <NavMenuItem>Option 1</NavMenuItem>
+  <NavMenuItem>Option 2</NavMenuItem>
+  <NavMenuItem>Option 3</NavMenuItem>
+</NavMenu>`}
+          >
+            <div className="flex flex-col gap-4 items-center">
+              <div className="mt-16">
+                <NavMenu 
+                  trigger="Upward Menu" 
+                  direction="up"
+                >
+                  <NavMenuItem>Option 1</NavMenuItem>
+                  <NavMenuItem>Option 2</NavMenuItem>
+                  <NavMenuItem>Option 3</NavMenuItem>
+                </NavMenu>
+              </div>
+              <NavMenu 
+                trigger="Downward Menu" 
+                direction="down"
+              >
+                <NavMenuItem>Option 1</NavMenuItem>
+                <NavMenuItem>Option 2</NavMenuItem>
+                <NavMenuItem>Option 3</NavMenuItem>
+              </NavMenu>
+            </div>
+          </ComponentDemo>
         </div>
       </section>
     </div>