@stevederico/skateboard-ui 5.3.0 → 5.5.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+5.5.0
+
+  Enlarge tap targets
+
+5.4.0
+
+  Use shadcn dark palette
+
 5.3.0
 
   Drop header divider

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.3.0",
+  "version": "5.5.0",
   "type": "module",
   "exports": {
     ".": {

package/styles.css

@@ -168,75 +168,75 @@
 }
 
 .dark {
-  --background: oklch(0.05 0 0);
+  --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.19 0 0);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.19 0 0);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.05 0 0);
-  --secondary: oklch(0.28 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.28 0 0);
-  --muted-foreground: oklch(0.8 0 0);
-  --accent: oklch(0.28 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.5 0 0);
-  --input: oklch(0.5 0 0);
-  --ring: oklch(0.439 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.18 0 0);
+  --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.22 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.35 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 /* Fallback: Apply dark theme before JS hydrates for users who prefer dark mode */
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
-    --background: oklch(0.05 0 0);
+    --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.19 0 0);
+    --card: oklch(0.205 0 0);
     --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.19 0 0);
+    --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
     --primary: oklch(0.985 0 0);
-    --primary-foreground: oklch(0.05 0 0);
-    --secondary: oklch(0.28 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
     --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.28 0 0);
-    --muted-foreground: oklch(0.8 0 0);
-    --accent: oklch(0.28 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.396 0.141 25.723);
     --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.5 0 0);
-    --input: oklch(0.5 0 0);
-    --ring: oklch(0.439 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.18 0 0);
+    --sidebar: oklch(0.205 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.22 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.35 0 0);
-    --sidebar-ring: oklch(0.439 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
   }
 }