@authdog/react-elements 0.0.11 → 0.0.13

package/src/components/core/navbar.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import type React from "react"
-
-import { useState } from "react"
-import * as LucideIcons from "lucide-react"
+import { useState, useEffect } from "react"
+import { User, Settings, LogOut, Menu } from "lucide-react"
+import type { LucideProps } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
@@ -56,33 +56,39 @@ export function Navbar({
   onLogout = () => console.log("Logout clicked"),
 }: NavbarProps) {
   const [open, setOpen] = useState(false)
-  const UserIcon = LucideIcons.User as any
-  const SettingsIcon = LucideIcons.Settings as any
-  const LogOutIcon = LucideIcons.LogOut as any
-  const MenuIcon = LucideIcons.Menu as any
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const iconProps: LucideProps = {
+    className: "mr-2 h-4 w-4",
+    "aria-hidden": "true"
+  }
+
+  const renderIcon = (Icon: any) => {
+    if (!isMounted) return null
+    return <Icon {...iconProps} />
+  }
 
   return (
     <header className={cn("border-b bg-background", className)}>
       <div className="container flex h-16 items-center justify-between px-4 md:px-6">
         <div className="flex items-center gap-4">
-          {/* <Link href="/" className="flex items-center gap-2">
-            <span className="text-xl font-bold">{logoText}</span>
-          </Link> */}
+          <span className="text-xl font-bold">{logoText}</span>
           <nav className="hidden md:flex gap-6">
             {items?.map((item, index) => (
-            //   <Link
-            //     key={index}
-            //     href={item.href}
-            //     className={cn(
-            //       "text-sm font-medium transition-colors hover:text-primary",
-            //       item.disabled && "cursor-not-allowed opacity-80",
-            //     )}
-            //   >
-            //     {item.title}
-            //   </Link>
-                <a href={item?.href}>
-                    {item.title}
-                </a>
+              <a
+                key={index}
+                href={item.href}
+                className={cn(
+                  "text-sm font-medium transition-colors hover:text-primary",
+                  item.disabled && "cursor-not-allowed opacity-80"
+                )}
+              >
+                {item.title}
+              </a>
             ))}
           </nav>
         </div>
@@ -107,17 +113,17 @@ export function Navbar({
               <DropdownMenuSeparator />
               <DropdownMenuGroup>
                 <DropdownMenuItem>
-                  <UserIcon className="mr-2 h-4 w-4" />
+                  {renderIcon(User)}
                   <span>Profile</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
-                  <SettingsIcon className="mr-2 h-4 w-4" />
+                  {renderIcon(Settings)}
                   <span>Settings</span>
                 </DropdownMenuItem>
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={onLogout}>
-                <LogOutIcon className="mr-2 h-4 w-4" />
+                {renderIcon(LogOut)}
                 <span>Log out</span>
               </DropdownMenuItem>
             </DropdownMenuContent>
@@ -125,24 +131,23 @@ export function Navbar({
           <Sheet open={open} onOpenChange={setOpen}>
             <SheetTrigger asChild>
               <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open Menu">
-                <MenuIcon className="h-5 w-5" />
+                {renderIcon(Menu)}
               </Button>
             </SheetTrigger>
             <SheetContent side="left" className="pr-0">
               <nav className="grid gap-2 py-6">
                 {items?.map((item, index) => (
-                //   <Link
-                //     key={index}
-                //     href={item.href}
-                //     className={cn(
-                //       "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",
-                //       item.disabled && "cursor-not-allowed opacity-80",
-                //     )}
-                //     onClick={() => setOpen(false)}
-                //   >
-                //     {item.title}
-                //   </Link>
-                <a href="https://www.goo.bar" />
+                  <a
+                    key={index}
+                    href={item.href}
+                    className={cn(
+                      "flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",
+                      item.disabled && "cursor-not-allowed opacity-80"
+                    )}
+                    onClick={() => setOpen(false)}
+                  >
+                    {item.title}
+                  </a>
                 ))}
               </nav>
             </SheetContent>

package/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@authdog/react-elements/lib/utils";
+import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

package/tsup.config.ts

@@ -6,8 +6,13 @@ export default defineConfig({
     "src/components/ui/*.tsx",
     "src/lib/*.ts"
   ], // Build all entry points
-  format: ["cjs", "esm"],
-  dts: true,
+  format: ["esm", "cjs"],
+  dts: {
+    resolve: true,
+    entry: {
+      index: "src/index.ts",
+    },
+  },
   splitting: false,
   sourcemap: true,
   minify: true,
@@ -16,8 +21,14 @@ export default defineConfig({
   external: ["react", "react-dom"],
   outDir: "dist",
   platform: "browser",
-  outExtension: ({ format }) => ({
-    js: format === "esm" ? ".mjs" : ".js",
-  }),
+  esbuildOptions(options) {
+    options.banner = {
+      js: '"use client";',
+    };
+    options.define = {
+      'process.env.NODE_ENV': '"production"',
+    };
+    options.resolveExtensions = ['.tsx', '.ts', '.jsx', '.js', '.json'];
+  },
   onSuccess: "cp src/global.css dist/global.css && cp postcss.config.mjs dist/postcss.config.mjs && cp tailwind.config.ts dist/tailwind.config.ts"
 }); 

package/dist/components/ui/avatar.d.mts

@@ -1,9 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
-
-export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/ui/avatar.d.ts

@@ -1,9 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
-
-export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/ui/button.d.mts

@@ -1,14 +0,0 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
-
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-
-export { Button, type ButtonProps, buttonVariants };

package/dist/components/ui/button.d.ts

@@ -1,14 +0,0 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
-
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-
-export { Button, type ButtonProps, buttonVariants };

package/dist/components/ui/dropdown-menu.d.mts

@@ -1,28 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
-
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,28 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-
-declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
-
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/sheet.d.mts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-
-declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): react_jsx_runtime.JSX.Element;
-declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-    side?: "top" | "right" | "bottom" | "left";
-}): react_jsx_runtime.JSX.Element;
-declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): react_jsx_runtime.JSX.Element;
-declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): react_jsx_runtime.JSX.Element;
-
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/components/ui/sheet.d.ts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-
-declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): react_jsx_runtime.JSX.Element;
-declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-    side?: "top" | "right" | "bottom" | "left";
-}): react_jsx_runtime.JSX.Element;
-declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): react_jsx_runtime.JSX.Element;
-declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): react_jsx_runtime.JSX.Element;
-
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/dist/lib/utils.d.mts

@@ -1,5 +0,0 @@
-import { ClassValue } from 'clsx';
-
-declare function cn(...inputs: ClassValue[]): string;
-
-export { cn };

package/dist/lib/utils.d.ts

@@ -1,5 +0,0 @@
-import { ClassValue } from 'clsx';
-
-declare function cn(...inputs: ClassValue[]): string;
-
-export { cn };