@stevederico/skateboard-ui 4.6.0 → 4.10.0

package/dist/App.d.ts

@@ -14,6 +14,7 @@ export interface AppOverrides {
     signUp?: ComponentType<any>;
     signOut?: ComponentType<any>;
     notFound?: ComponentType<any>;
+    authOverlay?: ComponentType<any>;
 }
 /** Configuration accepted by createSkateboardApp. */
 export interface CreateSkateboardAppConfig {
@@ -46,6 +47,7 @@ export interface CreateSkateboardAppConfig {
  * @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
  * @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
  * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
+ * @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
  *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';

package/dist/App.js

@@ -77,6 +77,7 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  * @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
  * @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
  * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
+ * @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
  *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
@@ -112,5 +113,6 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
     document.documentElement.classList.toggle('dark', isDark);
     const container = document.getElementById('root');
     const root = createRoot(container);
-    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlay, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlay, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] })) }) }) }));
+    const AuthOverlayComponent = overrides?.authOverlay || AuthOverlay;
+    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] })) }) }) }));
 }

package/dist/ui/command.js

@@ -9,7 +9,7 @@ function Command({ className, ...props }) {
     return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className), ...props }));
 }
 function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
-    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className), showCloseButton: showCloseButton, children: children })] }));
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("rounded-xl! self-start justify-self-center mt-[33vh] overflow-hidden p-0", className), showCloseButton: showCloseButton, children: children })] }));
 }
 function CommandInput({ className, ...props }) {
     return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));

package/dist/ui/context-menu.js

@@ -213,7 +213,7 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
                         match.focus();
                     }
                 }
-            }, className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function ContextMenuGroup({ className, ...props }) {
     return _jsx("div", { role: "group", "data-slot": "context-menu-group", className: className, ...props });
@@ -387,6 +387,6 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
                         match.focus();
                     }
                 }
-            }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-none data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/ui/dropdown-menu.js

@@ -84,12 +84,31 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
     const { onTypeaheadKeyDown } = useTypeahead();
     const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the menu fails the contains() check and
+        // is treated as an outside click — closing the menu before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
         };
     }, [mounted, layers]);
     // Focus the first item once the popup is actually visible — a
@@ -186,7 +205,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
                         match.focus();
                     }
                 }
-            }, className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function DropdownMenuGroup({ className, ...props }) {
     return _jsx("div", { role: "group", "data-slot": "dropdown-menu-group", className: className, ...props });
@@ -294,12 +313,31 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
     const { onTypeaheadKeyDown } = useTypeahead();
     const hasPointerMoved = usePointerMoved();
     React.useEffect(() => {
-        const node = containerRef.current;
-        if (!node)
+        if (!mounted)
             return;
-        layers.current.add(node);
+        // The popup is portaled and attaches a frame late (Portal defers its child to
+        // its own effect), so containerRef.current is null when this effect first runs
+        // and the deps don't change once it attaches. Retry each frame until the node
+        // exists, then register it. Without this the dismiss handler's `layers` set
+        // stays empty, so a pointerdown INSIDE the menu fails the contains() check and
+        // is treated as an outside click — closing the menu before the item's onClick
+        // fires (real mouse only; a synthetic click with no pointerdown masks it).
+        let raf = 0;
+        let added = null;
+        const attach = () => {
+            const node = containerRef.current;
+            if (!node) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            added = node;
+            layers.current.add(node);
+        };
+        attach();
         return () => {
-            layers.current.delete(node);
+            cancelAnimationFrame(raf);
+            if (added)
+                layers.current.delete(added);
         };
     }, [mounted, layers]);
     const didFocus = React.useRef(false);
@@ -372,6 +410,6 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
                         match.focus();
                     }
                 }
-            }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-none data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/ui/hover-card.js

@@ -114,6 +114,6 @@ function HoverCardContent({ className, style, ref, side = "bottom", sideOffset =
             }, onMouseLeave: (e) => {
                 onMouseLeave?.(e);
                 scheduleClose();
-            }, className: cn("isolate z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
+            }, className: cn("isolate z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
 }
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/ui/menubar.js

@@ -252,7 +252,7 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
                         match.focus();
                     }
                 }
-            }, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function MenubarLabel({ className, inset, ...props }) {
     return (_jsx("div", { "data-slot": "menubar-label", "data-inset": inset ? "" : undefined, className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className), ...props }));
@@ -413,6 +413,6 @@ function MenubarSubContent({ className, children, onKeyDown, ...props }) {
                         active.click();
                     }
                 }
-            }, className: cn("z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/ui/popover.js

@@ -125,7 +125,7 @@ function PopoverContent({ className, style, ref, align = "center", alignOffset =
                 top: pos?.y ?? 0,
                 visibility: pos ? "visible" : "hidden",
                 ["--transform-origin"]: pos?.transformOrigin ?? "center",
-            }, className: cn("isolate z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
+            }, className: cn("isolate z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
 }
 function PopoverHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));

package/dist/ui/select.js

@@ -207,7 +207,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
                         match.focus();
                     }
                 }
-            }, className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
+            }, className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx("div", { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "4.6.0",
+  "version": "4.10.0",
   "type": "module",
   "exports": {
     ".": {