feat(c): updates

aviarytech · Jan 30, 2025 · 7745489 · 7745489
1 parent 7a6b0cd
commit 7745489
Show file tree

Hide file tree

Showing 24 changed files with 697 additions and 378 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@tailwindcss/cli": "^4.0.1",
     "@tailwindcss/postcss": "^4.0.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -53,8 +54,8 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "docs:dev": "bun run src/docs/server.ts",
-    "docs:build": "bun build src/docs/index.tsx --outdir dist/docs && cp src/docs/index.html dist/docs/index.html && bunx postcss src/docs/index.css -o dist/docs/index.css",
+    "docs:dev": "bun run --watch src/docs/server.ts",
+    "docs:build": "bun build src/docs/index.tsx --outdir dist/docs && cp src/docs/index.html dist/docs/index.html",
     "docs:preview": "bun run src/docs/server.ts --prod"
   },
   "keywords": [

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
-  },
+  }
 } 
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -3,16 +3,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils/cn";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-blue-500 text-white hover:bg-blue-600",
-        destructive: "bg-red-500/20 text-red-300 hover:bg-red-500/30",
-        outline: "border border-gray-700 bg-transparent hover:bg-gray-700",
-        ghost: "hover:bg-gray-700",
-        link: "text-blue-400 hover:text-blue-300 underline-offset-4 hover:underline",
-        amber: "bg-amber-500/20 text-amber-300 border border-amber-500/30 hover:bg-amber-500/30",
+        default: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
+        destructive: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600",
+        outline: "border border-gray-300 dark:border-gray-600 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-gray-100",
+        ghost: "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-gray-100",
+        link: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline-offset-4 hover:underline",
+        amber: "bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600",
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -35,9 +35,11 @@ export interface ButtonProps
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, asChild, ...props }, ref) => {
+    const Comp = asChild ? 'span' : 'button';
+
     return (
-      <button
+      <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}

diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { cn } from "../../utils/cn";
-import { ChevronDown } from "lucide-react";
 import { ZINDEX } from "../../utils/z-index";
 
 export interface DropdownProps {
@@ -31,12 +30,19 @@ export const Dropdown: React.FC<DropdownProps> = ({
   }, []);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className="relative inline-block" ref={dropdownRef}>
       <div onClick={() => setIsOpen(!isOpen)}>{trigger}</div>
       {isOpen && (
         <div
           className={cn(
-            "absolute right-0 mt-2 rounded-md bg-gray-800 shadow-lg",
+            "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 }}
@@ -55,7 +61,10 @@ export const DropdownItem = 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 px-3 py-2 text-sm",
+      "text-gray-700 dark:text-gray-200",
+      "hover:bg-gray-100 dark:hover:bg-gray-800",
+      "focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800",
       className
     )}
     {...props}

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -10,7 +10,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md px-3 py-1 text-sm shadow-sm transition-colors",
+          "bg-white dark:bg-gray-800",
+          "text-gray-900 dark:text-gray-100",
+          "border border-gray-300 dark:border-gray-700",
+          "placeholder:text-gray-500 dark:placeholder:text-gray-400",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
+          "disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

diff --git a/src/components/modal/Dialog.tsx b/src/components/modal/Dialog.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "../../utils/cn";
+import { ZINDEX } from "../../utils/z-index";
 
 export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
   open?: boolean;
@@ -11,20 +12,25 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(
     if (!open) return null;
 
     return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center">
-        <div 
-          className="fixed inset-0" 
-          onClick={onClose}
-        />
-        <div
-          ref={ref}
-          className={cn(
-            "relative bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4",
-            className
-          )}
-          {...props}
-        >
-          {children}
+      <div
+        className="fixed inset-0 bg-black/50"
+        style={{ zIndex: ZINDEX.dialog }}
+        onClick={onClose}
+      >
+        <div className="fixed inset-0 flex items-center justify-center p-4">
+          <div
+            ref={ref}
+            className={cn(
+              "relative rounded-lg shadow-lg",
+              "bg-white dark:bg-gray-900",
+              "border border-gray-200 dark:border-gray-800",
+              className
+            )}
+            onClick={(e) => e.stopPropagation()}
+            {...props}
+          >
+            {children}
+          </div>
         </div>
       </div>
     );
@@ -36,7 +42,10 @@ export const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttribute
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("p-6 border-b border-gray-700", className)}
+      className={cn(
+        "p-6 border-b border-gray-200 dark:border-gray-800",
+        className
+      )}
       {...props}
     />
   )
@@ -47,7 +56,10 @@ export const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttribut
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("p-6", className)}
+      className={cn(
+        "p-6",
+        className
+      )}
       {...props}
     />
   )

diff --git a/src/components/modal/DialogVariants.tsx b/src/components/modal/DialogVariants.tsx
@@ -15,23 +15,39 @@ interface AlertDialogProps extends React.HTMLAttributes<HTMLDivElement> {
 export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
   ({ className, open, onClose, title, description, variant = "info", actions, ...props }, ref) => {
     const icons = {
-      info: <Info className="h-5 w-5 text-blue-400" />,
-      success: <CheckCircle className="h-5 w-5 text-green-400" />,
-      warning: <AlertTriangle className="h-5 w-5 text-yellow-400" />,
-      error: <XCircle className="h-5 w-5 text-red-400" />,
+      info: <Info className="h-5 w-5 text-blue-600 dark:text-blue-400" />,
+      success: <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-500" />,
+      warning: <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-500" />,
+      error: <XCircle className="h-5 w-5 text-red-600 dark:text-red-500" />,
     };
 
     return (
-      <Dialog open={open} onClose={onClose} className={cn("max-w-md", className)} {...props}>
-        <DialogHeader className="flex items-start gap-3">
+      <Dialog 
+        open={open} 
+        onClose={onClose} 
+        className={cn(
+          "max-w-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100",
+          className
+        )} 
+        {...props}
+      >
+        <DialogHeader className="flex items-start gap-3 bg-white dark:bg-gray-900">
           {icons[variant]}
           <div>
-            <h3 className="text-lg font-semibold">{title}</h3>
-            {description && <p className="mt-1 text-sm text-gray-400">{description}</p>}
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              {title}
+            </h3>
+            {description && (
+              <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                {description}
+              </p>
+            )}
           </div>
         </DialogHeader>
         {actions && (
-          <DialogContent className="flex justify-end gap-3">{actions}</DialogContent>
+          <DialogContent className="flex justify-end gap-3 bg-gray-50 dark:bg-gray-900">
+            {actions}
+          </DialogContent>
         )}
       </Dialog>
     );

diff --git a/src/components/navigation/NavMenu.tsx b/src/components/navigation/NavMenu.tsx
@@ -24,8 +24,21 @@ export const NavMenu: React.FC<NavMenuProps> = ({
       }
     };
 
+    // Close menu when pressing escape
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
     document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+      setIsOpen(false); // Ensure menu is closed on unmount
+    };
   }, []);
 
   return (
@@ -43,7 +56,7 @@ export const NavMenu: React.FC<NavMenuProps> = ({
             "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.navMenu }}
+          style={{ zIndex: ZINDEX.dropdown }}
         >
           {children}
         </div>

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -1,28 +1,30 @@
 import * as React from "react";
 import { cn } from "../../utils/cn";
-import { ZINDEX } from "../../utils/z-index";
 
 export interface SelectProps
   extends React.SelectHTMLAttributes<HTMLSelectElement> {}
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   ({ className, children, ...props }, ref) => {
     return (
-      <div
-        className="absolute w-full rounded-md bg-gray-800 mt-1 shadow-lg"
-        style={{ zIndex: ZINDEX.select }}
+      <select
+        ref={ref}
+        className={cn(
+          "flex h-9 w-full rounded-md px-3 py-1 text-sm shadow-sm transition-colors",
+          // Light mode styles
+          "bg-white border-gray-200 text-gray-900",
+          // Dark mode styles
+          "dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100",
+          // Focus styles
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500",
+          // Disabled styles
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
       >
-        <select
-          ref={ref}
-          className={cn(
-            "flex h-9 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </select>
-      </div>
+        {children}
+      </select>
     );
   }
 );