@srcroot/ui 0.0.46 → 0.0.49

package/dist/index.js

@@ -336,7 +336,7 @@ export function cn(...inputs: ClassValue[]) {
   }
   async installDependencies() {
     const cfg = this.config;
-    const spinner = ora("Installing dependencies...").start();
+    const spinner = ora("Checking dependencies...").start();
     const deps = [
       "clsx",
       "tailwind-merge",
@@ -347,15 +347,25 @@ export function cn(...inputs: ClassValue[]) {
       deps.push("tailwindcss-animate");
     }
     try {
-      await execa(cfg.packageManager, [cfg.installCmd, ...deps], {
+      const packageJsonPath = path3.join(cfg.cwd, "package.json");
+      const pkg = await fs3.readJson(packageJsonPath);
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      const missingDeps = deps.filter((dep) => !allDeps[dep]);
+      if (missingDeps.length === 0) {
+        spinner.succeed("Dependencies already installed");
+        return;
+      }
+      spinner.text = "Installing dependencies...";
+      await execa(cfg.packageManager, [cfg.installCmd, ...missingDeps], {
         cwd: cfg.cwd,
         stdio: "pipe"
       });
-      spinner.succeed(`Installed ${deps.length} dependencies`);
+      spinner.succeed(`Installed ${missingDeps.length} dependencies`);
     } catch (error) {
       spinner.fail("Failed to install dependencies");
+      const missingDeps = deps;
       logger.warn(`
-Manually run: ${cfg.packageManager} ${cfg.installCmd} ${deps.join(" ")}`);
+Manually run: ${cfg.packageManager} ${cfg.installCmd} ${missingDeps.join(" ")}`);
     }
   }
   printSuccess() {

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.46",
+  "version": "0.0.49",
   "description": "A UI library with polymorphic, accessible React components",
+  "author": "Shifaul Islam",
+  "license": "MIT",
   "type": "module",
   "bin": {
     "srcroot-ui": "./dist/index.js"

package/src/registry/ui/dropdown-menu.tsx

@@ -277,7 +277,7 @@ const DropdownMenuItem = React.forwardRef<
             tabIndex={disabled ? -1 : 0}
             aria-disabled={disabled}
             className={cn(
-                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer",
                 inset && "pl-8",
                 disabled && "pointer-events-none opacity-50",
                 className

package/src/registry/ui/sheet.tsx

@@ -181,7 +181,7 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
                 >
                     {children}
                     <button
-                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
                         onClick={() => context.onOpenChange(false)}
                     >
                         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

package/src/registry/ui/sidebar.tsx

@@ -63,7 +63,7 @@ const SidebarProvider = React.forwardRef<
 
     React.useEffect(() => {
         const checkMobile = () => {
-            setIsMobile(window.innerWidth < 1024) // lg breakpoint
+            setIsMobile(window.innerWidth < 768) // md breakpoint
         }
         checkMobile()
         window.addEventListener("resize", checkMobile)
@@ -169,7 +169,7 @@ const Sidebar = React.forwardRef<
             <div
                 ref={ref}
                 className={cn(
-                    "group peer hidden md:block text-sidebar-foreground",
+                    "group peer md:block text-sidebar-foreground",
                     className
                 )}
                 data-state={state}
@@ -192,7 +192,7 @@ const Sidebar = React.forwardRef<
                 {/* Actual Fixed Sidebar */}
                 <div
                     className={cn(
-                        "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex",
+                        "duration-200 fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] ease-linear md:flex",
                         side === "left"
                             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
                             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -448,14 +448,10 @@ const SidebarMenuButton = React.forwardRef<
         },
         ref
     ) => {
-        const Comp = "button"
-        // manual asChild handling
-        // const Comp = asChild ? Slot : "button"
-        // But we want to avoid Slot if possible per user request?
-        // Actually, if I can use the same cloneElement approach:
+        const { isMobile, state, setOpen } = useSidebar()
 
         const buttonClass = cn(
-            "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+            "cursor-pointer peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
             "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground",
             "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
             "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:group-data-[collapsible=icon]:hidden",
@@ -464,6 +460,13 @@ const SidebarMenuButton = React.forwardRef<
 
         // If tooltip is needed, we should implement it. For now, ignoring complexity of tooltip.
 
+        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+            props.onClick?.(e)
+            if (!isMobile && state === "collapsed") {
+                setOpen(true)
+            }
+        }
+
         if (asChild) {
             const child = React.Children.only(props.children) as React.ReactElement<any>
 
@@ -474,6 +477,10 @@ const SidebarMenuButton = React.forwardRef<
                 "data-sidebar": "menu-button",
                 "data-size": size,
                 ...props,
+                onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+                    handleClick(e)
+                    child.props.onClick?.(e)
+                },
                 children: child.props.children
             })
         }
@@ -485,6 +492,7 @@ const SidebarMenuButton = React.forwardRef<
                 data-size={size}
                 data-active={isActive}
                 className={buttonClass}
+                onClick={handleClick}
                 {...props}
             />
         )

package/src/registry/ui/table.tsx

@@ -23,9 +23,9 @@ import { cn } from "@/lib/utils"
 
 const Table = React.forwardRef<
     HTMLTableElement,
-    React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
+    React.HTMLAttributes<HTMLTableElement> & { containerClassName?: string }
+>(({ className, containerClassName, ...props }, ref) => (
+    <div className={cn("relative w-full overflow-auto", containerClassName)}>
         <table
             ref={ref}
             className={cn("w-full caption-bottom text-sm", className)}