@stevederico/skateboard-ui 5.4.0 → 5.6.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+5.6.0
+
+  Add Sheet onUserClose
+
+5.5.0
+
+  Enlarge tap targets
+
 5.4.0
 
   Use shadcn dark palette

package/dist/components/Sheet.d.ts

@@ -11,6 +11,8 @@ export interface SheetProps {
     title?: string;
     minHeight?: string;
     children?: ReactNode;
+    /** Called when the person closes the sheet (swipe, outside tap, Escape), not when code calls hide(). */
+    onUserClose?: () => void;
 }
 /**
  * Bottom sheet (drawer) component with imperative open/close API.
@@ -21,6 +23,7 @@ export interface SheetProps {
  * @param {string} [props.title=""] - Sheet header title
  * @param {string} [props.minHeight="auto"] - Minimum sheet height CSS value
  * @param {React.ReactNode} props.children - Sheet body content
+ * @param {Function} [props.onUserClose] - Called when the person closes the sheet, not when code calls hide()
  * @param {React.Ref} ref - Ref exposing { show, hide, open, close, toggle }
  * @returns {JSX.Element} Drawer sheet
  *

package/dist/components/Sheet.js

@@ -10,6 +10,7 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../ui/drawer.
  * @param {string} [props.title=""] - Sheet header title
  * @param {string} [props.minHeight="auto"] - Minimum sheet height CSS value
  * @param {React.ReactNode} props.children - Sheet body content
+ * @param {Function} [props.onUserClose] - Called when the person closes the sheet, not when code calls hide()
  * @param {React.Ref} ref - Ref exposing { show, hide, open, close, toggle }
  * @returns {JSX.Element} Drawer sheet
  *
@@ -30,7 +31,7 @@ import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../ui/drawer.
  * }
  */
 const MySheet = forwardRef(function MySheet(props, ref) {
-    const { title = "", minHeight = "auto", children } = props;
+    const { title = "", minHeight = "auto", children, onUserClose } = props;
     const [isOpen, setIsOpen] = useState(false);
     useImperativeHandle(ref, () => ({
         show: () => setIsOpen(true),
@@ -39,6 +40,10 @@ const MySheet = forwardRef(function MySheet(props, ref) {
         close: () => setIsOpen(false),
         toggle: () => setIsOpen(prev => !prev)
     }));
-    return (_jsx(Drawer, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DrawerContent, { style: { minHeight }, children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) }), _jsx("div", { className: "px-4 pb-4", children: children })] }) }));
+    return (_jsx(Drawer, { open: isOpen, onOpenChange: (open) => {
+            setIsOpen(open);
+            if (!open)
+                onUserClose?.();
+        }, children: _jsxs(DrawerContent, { style: { minHeight }, children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) }), _jsx("div", { className: "px-4 pb-4", children: children })] }) }));
 });
 export default MySheet;

package/dist/components/ThemeToggle.js

@@ -14,7 +14,7 @@ export default function ThemeToggle({ className = "", iconSize = 16, variant = "
         return null;
     const isDarkMode = resolvedTheme === 'dark';
     const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');
-    return (_jsx(Button, { variant: variant === "landing" ? "outline" : "ghost", size: "icon", onClick: toggleTheme, className: cn(className), "aria-label": "Toggle dark mode", ...props, children: isDarkMode
+    return (_jsx(Button, { variant: variant === "landing" ? "outline" : "ghost", size: "icon", onClick: toggleTheme, className: cn("size-11", className), "aria-label": "Toggle dark mode", ...props, children: isDarkMode
             ? _jsx(Sun, { size: iconSize })
             : _jsx(Moon, { size: iconSize }) }));
 }

package/dist/components/layout/TabBar.js

@@ -20,6 +20,6 @@ export default function TabBar({ className, ...props }) {
     ];
     return (_jsx("nav", { className: cn("fixed md:hidden bottom-0 inset-x-0 bg-background z-50", className), role: "navigation", "aria-label": "Main navigation", ...props, children: _jsx("div", { className: "flex justify-around items-center pt-2 pb-4", children: tabs.map((tab) => {
                 const isActive = currentPage === tab.match;
-                return (_jsxs(Link, { to: tab.to, className: cn("flex flex-col items-center gap-0.5 px-3 transition-colors", isActive ? "text-foreground" : "text-muted-foreground"), "aria-label": tab.title, "aria-current": isActive ? 'page' : undefined, children: [_jsx(ConstantsIcon, { name: tab.icon, size: 24, strokeWidth: isActive ? 2 : 1.5 }), _jsx("span", { className: "text-xs", children: tab.title })] }, tab.title));
+                return (_jsxs(Link, { to: tab.to, className: cn("flex min-h-11 min-w-11 flex-col items-center justify-center gap-0.5 px-3 transition-colors", isActive ? "text-foreground" : "text-muted-foreground"), "aria-label": tab.title, "aria-current": isActive ? 'page' : undefined, children: [_jsx(ConstantsIcon, { name: tab.icon, size: 24, strokeWidth: isActive ? 2 : 1.5 }), _jsx("span", { className: "text-xs", children: tab.title })] }, tab.title));
             }) }) }));
 }

package/dist/components/views/SettingsView.js

@@ -58,5 +58,5 @@ export default function SettingsView() {
                                             else {
                                                 navigate('/signin');
                                             }
-                                        }, children: "Sign In" }) })] }) })), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-3", children: [_jsx(Avatar, { children: _jsx(AvatarFallback, { className: "bg-app text-white uppercase font-medium text-sm", children: user.name?.split(' ').map(w => w[0]).join('') || "NA" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 capitalize", children: [user.name || "No User", subscription?.status === "active" && _jsx(Badge, { children: "Pro" })] }), _jsx(CardDescription, { className: "font-normal normal-case", children: user.email || "no@user.com" })] })] }), _jsx(CardAction, { children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", children: "Sign Out" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign Out" }), _jsx(AlertDialogDescription, { children: "Are you sure you want to sign out? You'll need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { onClick: signOutClicked, children: "Sign Out" })] })] })] }) })] }) })), _jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Support" }), _jsx(CardDescription, { children: "How can we help?" }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => { window.location.href = `mailto:${constants.companyEmail}`; }, children: "Contact" }) })] }) }), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["Billing", subscription?.status === "active" ? (_jsx(Badge, { children: "Active" })) : subscription?.status === "canceled" ? (_jsx(Badge, { variant: "destructive", children: "Canceled" })) : (_jsx(Badge, { variant: "secondary", children: "Free" }))] }), _jsx(CardDescription, { children: getBillingDescription() }), _jsx(CardAction, { children: stripeID ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => { showManage(stripeID); }, children: "Manage" })) : (_jsx(Button, { variant: "gradient", size: "sm", onClick: () => { showCheckout(user.email); }, children: "Subscribe" })) })] }) }))] }), _jsx("div", { className: "mt-8 text-center pb-24 md:pb-8", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["v", constants.version || '0.0.0'] }) })] }));
+                                        }, children: "Sign In" }) })] }) })), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-3", children: [_jsx(Avatar, { children: _jsx(AvatarFallback, { className: "bg-app text-white uppercase font-medium text-sm", children: user.name?.split(' ').map(w => w[0]).join('') || "NA" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 capitalize", children: [user.name || "No User", subscription?.status === "active" && _jsx(Badge, { children: "Pro" })] }), _jsx(CardDescription, { className: "font-normal normal-case", children: user.email || "no@user.com" })] })] }), _jsx(CardAction, { children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", className: "min-h-11 px-4", children: "Sign Out" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign Out" }), _jsx(AlertDialogDescription, { children: "Are you sure you want to sign out? You'll need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { onClick: signOutClicked, children: "Sign Out" })] })] })] }) })] }) })), _jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Support" }), _jsx(CardDescription, { children: "How can we help?" }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => { window.location.href = `mailto:${constants.companyEmail}`; }, children: "Contact" }) })] }) }), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["Billing", subscription?.status === "active" ? (_jsx(Badge, { children: "Active" })) : subscription?.status === "canceled" ? (_jsx(Badge, { variant: "destructive", children: "Canceled" })) : (_jsx(Badge, { variant: "secondary", children: "Free" }))] }), _jsx(CardDescription, { children: getBillingDescription() }), _jsx(CardAction, { children: stripeID ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => { showManage(stripeID); }, children: "Manage" })) : (_jsx(Button, { variant: "gradient", size: "sm", onClick: () => { showCheckout(user.email); }, children: "Subscribe" })) })] }) }))] }), _jsx("div", { className: "mt-8 text-center pb-24 md:pb-8", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["v", constants.version || '0.0.0'] }) })] }));
 }

package/package.json

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