@stevederico/skateboard-ui 2.11.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # CHANGELOG
 
+2.13.0
+
+  Fix DynamicIcon per-icon imports
+  Remove lucide-react from views
+  Switch views to Tabler icons
+
+2.12.0
+
+  Add skip-to-content link
+  Add selection styling brand color
+  Add content-auto utility class
+  Add button active press feedback
+  Add main landmark id
+
 2.11.0
 
   Fix DynamicIcon lazy loading

package/components/ThemeToggle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme } from 'next-themes';
-import { Sun, Moon } from 'lucide-react';
+import { IconSun, IconMoon } from '@tabler/icons-react';
 import { Button } from '../shadcn/ui/button.jsx';
 import { cn } from '../shadcn/lib/utils.js';
 
@@ -45,8 +45,8 @@ export default function ThemeToggle({ className = "", iconSize = 16, variant = "
       {...props}
     >
       {isDarkMode
-        ? <Sun size={iconSize} />
-        : <Moon size={iconSize} />
+        ? <IconSun size={iconSize} />
+        : <IconMoon size={iconSize} />
       }
     </Button>
   );

package/components/UpgradeSheet.jsx

@@ -16,7 +16,7 @@ import { Separator } from "../shadcn/ui/separator"
 import { Button } from "../shadcn/ui/button"
 import { getState } from "../core/Context.jsx";
 import { showCheckout } from '../core/Utilities.js';
-import { Sparkles, CircleCheck } from 'lucide-react';
+import { IconSparkles, IconCircleCheck } from '@tabler/icons-react';
 
 /**
  * Premium upgrade drawer with pricing and checkout button.
@@ -104,7 +104,7 @@ const UpgradeSheet = forwardRef(function UpgradeSheet(props, ref) {
               <div className="w-full space-y-3">
                 {product.features?.map((feature, index) => (
                   <div key={index} className="flex items-center gap-3">
-                    <CircleCheck className="size-5 text-primary shrink-0" />
+                    <IconCircleCheck className="size-5 text-primary shrink-0" />
                     <span className="text-sm">{feature}</span>
                   </div>
                 ))}
@@ -115,7 +115,7 @@ const UpgradeSheet = forwardRef(function UpgradeSheet(props, ref) {
 
         <DrawerFooter>
           <Button className="w-full" size="lg" onClick={handleUpgrade}>
-            <Sparkles className="size-4" />
+            <IconSparkles className="size-4" />
             Upgrade to {product.title}
           </Button>
         </DrawerFooter>

package/core/DynamicIcon.jsx

@@ -14,64 +14,74 @@ function toPascalCase(str) {
     .join("");
 }
 
-let iconsModule = null;
-let iconsPromise = null;
+/** Cache of resolved icon components keyed by name */
+const iconCache = new Map();
+
+/** Cache of in-flight import promises keyed by module name */
+const importCache = new Map();
 
 /**
- * Lazily load the lucide-react module on first use.
- * Subsequent calls return the cached module immediately.
+ * Load a single Tabler icon by its PascalCase name (e.g. "IconLock").
+ * Each icon is imported individually (~1KB) instead of loading the entire
+ * icon library (~400KB). Results are cached for instant subsequent lookups.
  *
- * @returns {Promise<Object>} The lucide-react module
+ * @param {string} iconName - PascalCase icon name with "Icon" prefix
+ * @returns {Promise<React.ComponentType|null>} Icon component or null
  */
-function loadIcons() {
-  if (iconsModule) return Promise.resolve(iconsModule);
-  if (!iconsPromise) {
-    iconsPromise = import("lucide-react").then((mod) => {
-      iconsModule = mod;
-      return mod;
+function loadIcon(iconName) {
+  if (iconCache.has(iconName)) return Promise.resolve(iconCache.get(iconName));
+  if (importCache.has(iconName)) return importCache.get(iconName);
+
+  const promise = import(`@tabler/icons-react/dist/esm/icons/${iconName}.mjs`)
+    .then((mod) => {
+      const Icon = mod.default || mod[iconName] || null;
+      iconCache.set(iconName, Icon);
+      importCache.delete(iconName);
+      return Icon;
+    })
+    .catch(() => {
+      iconCache.set(iconName, null);
+      importCache.delete(iconName);
+      return null;
     });
-  }
-  return iconsPromise;
+
+  importCache.set(iconName, promise);
+  return promise;
 }
 
 /**
- * Resolve icon name to a Lucide component from the cached module.
+ * Resolve a kebab-case icon name to a Tabler PascalCase module name.
+ * e.g. "layout-dashboard" → "IconLayoutDashboard"
  *
- * @param {Object} mod - The lucide-react module
- * @param {string} name - Icon name (kebab-case, snake_case, or PascalCase)
- * @returns {React.ComponentType|null} Icon component or null
+ * @param {string} name - Icon name in any case format
+ * @returns {string} Tabler PascalCase name with "Icon" prefix
  */
-function resolveIcon(mod, name) {
-  if (!mod) return null;
-  const candidates = [
-    name,
-    toPascalCase(name),
-    name.charAt(0).toUpperCase() + name.slice(1),
-  ];
-  for (const candidate of candidates) {
-    if (mod[candidate]) return mod[candidate];
-  }
-  return null;
+function toTablerName(name) {
+  if (name.startsWith("Icon")) return name;
+  return "Icon" + toPascalCase(name);
 }
 
 /**
- * Check if a name string resolves to a valid Lucide icon.
- * Returns false until the icon module has been loaded.
+ * Check if a name string has been resolved to a valid icon.
+ * Returns false for unloaded or invalid icons.
  *
  * @param {string} name - Icon name to check
- * @returns {boolean} True if name resolves to an icon
+ * @returns {boolean} True if icon is cached and valid
  */
 export function canResolveIcon(name) {
-  if (!iconsModule) return false;
-  return resolveIcon(iconsModule, name) !== null;
+  const tablerName = toTablerName(name);
+  return iconCache.has(tablerName) && iconCache.get(tablerName) !== null;
 }
 
 /**
- * Render a Lucide icon by name string with lazy loading.
+ * Render a Tabler icon by name string with per-icon lazy loading.
  *
- * Loads lucide-react on first render via dynamic import, then caches the
- * module for all subsequent uses. Shows nothing while loading (typically
- * under 50ms from cache).
+ * Each icon is imported individually from @tabler/icons-react (~1KB per icon)
+ * instead of loading the entire library. Resolved icons are cached in memory
+ * for instant rendering on subsequent uses.
+ *
+ * Accepts kebab-case ("layout-dashboard"), PascalCase ("LayoutDashboard"),
+ * or prefixed ("IconLayoutDashboard") names.
  *
  * @param {Object} props
  * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
@@ -96,18 +106,16 @@ const DynamicIcon = ({
   className,
   ...props
 }) => {
-  const [Icon, setIcon] = useState(() => {
-    if (iconsModule) return resolveIcon(iconsModule, name);
-    return null;
-  });
+  const tablerName = toTablerName(name);
+
+  const [Icon, setIcon] = useState(() => iconCache.get(tablerName) || null);
 
   useEffect(() => {
     if (Icon) return;
-    loadIcons().then((mod) => {
-      const resolved = resolveIcon(mod, name);
-      setIcon(() => resolved);
+    loadIcon(tablerName).then((resolved) => {
+      if (resolved) setIcon(() => resolved);
     });
-  }, [name, Icon]);
+  }, [tablerName, Icon]);
 
   if (!Icon) return null;
 
@@ -116,7 +124,7 @@ const DynamicIcon = ({
       size={size}
       color={color}
       strokeWidth={strokeWidth}
-      className={cn(className)}
+      className={className}
       {...props}
     />
   );

package/layout/Layout.jsx

@@ -40,6 +40,9 @@ export default function Layout({ children }) {
 
   return (
     <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md focus:ring-2 focus:ring-ring">
+        Skip to content
+      </a>
       <SidebarProvider
         defaultOpen={!constants.sidebarCollapsed}
         style={{
@@ -47,7 +50,7 @@ export default function Layout({ children }) {
           '--header-height': '3.5rem',
         }}>
         {showSidebar && <Sidebar variant="inset" />}
-        <SidebarInset className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
+        <SidebarInset id="main" className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
           <Outlet />
         </SidebarInset>
       </SidebarProvider>

package/layout/Sidebar.jsx

@@ -15,7 +15,7 @@ import {
   SidebarRail,
   useSidebar,
 } from "../shadcn/ui/sidebar";
-import { Settings } from "lucide-react";
+import { IconSettings } from '@tabler/icons-react';
 
 /**
  * Desktop navigation sidebar using shadcn primitives.
@@ -111,7 +111,7 @@ export default function Sidebar({ variant = "inset", ...props }) {
               className="data-active:font-normal"
               onClick={() => navigate("/app/settings")}
             >
-              <Settings size={20} strokeWidth={2} />
+              <IconSettings size={20} strokeWidth={2} />
               <span>Settings</span>
             </SidebarMenuButton>
           </SidebarMenuItem>

package/package.json

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

package/shadcn/ui/button.jsx

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js"
 
 const buttonVariants = cva(
-  "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none active:scale-[0.98]",
   {
     variants: {
       variant: {

package/styles.css

@@ -209,6 +209,16 @@
   code, pre, kbd {
     font-family: 'Geist Mono', ui-monospace, monospace;
   }
+  ::selection {
+    background-color: color-mix(in oklch, var(--color-app) 20%, transparent);
+  }
+}
+
+@layer utilities {
+  .content-auto {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 200px;
+  }
 }
 
 #root {

package/views/LandingView.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from 'next-themes';
 import { getState } from "../core/Context.jsx";
 import DynamicIcon from '../core/DynamicIcon.jsx';
-import { Sun, Moon, Check } from 'lucide-react';
+import { IconSun, IconMoon, IconCheck } from '@tabler/icons-react';
 import { Button } from '../shadcn/ui/button.jsx';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../shadcn/ui/card.jsx';
 import { Badge } from '../shadcn/ui/badge.jsx';
@@ -86,7 +86,7 @@ export default function LandingView() {
 
           <div className="flex gap-3 items-center">
             <Button variant="outline" size="icon" onClick={() => setTheme(isDarkMode ? 'light' : 'dark')} aria-label="Toggle dark mode">
-              {isDarkMode ? <Sun size={18} /> : <Moon size={18} />}
+              {isDarkMode ? <IconSun size={18} /> : <IconMoon size={18} />}
             </Button>
             <Button variant="default" onClick={() => navigate('/app')}>
               {constants.cta}
@@ -146,13 +146,13 @@ export default function LandingView() {
                     <ul className="text-left space-y-4 mb-8">
                       {(constants.stripeProducts[0]?.features || []).map((feature, index) => (
                         <li key={index} className="flex items-center gap-2">
-                          <Check size={16} className="text-primary shrink-0" />
+                          <IconCheck size={16} className="text-primary shrink-0" />
                           {feature}
                         </li>
                       ))}
                       {(constants.pricing?.extras || []).map((extra, index) => (
                         <li key={`extra-${index}`} className="flex items-center gap-2">
-                          <Check size={16} className="text-primary shrink-0" />
+                          <IconCheck size={16} className="text-primary shrink-0" />
                           {extra}
                         </li>
                       ))}

package/views/SettingsView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getState } from '../core/Context.jsx';
 import { useTheme } from 'next-themes';
-import { Sun, Moon } from 'lucide-react';
+import { IconSun, IconMoon } from '@tabler/icons-react';
 import Header from '../layout/Header.jsx';
 import { Avatar, AvatarFallback } from '../shadcn/ui/avatar.jsx';
 import { Badge } from '../shadcn/ui/badge.jsx';
@@ -62,7 +62,7 @@ export default function SettingsView() {
     <div className="flex-1">
       <Header title="Settings">
         <Button variant="ghost" size="icon" onClick={() => setTheme(isDarkMode ? 'light' : 'dark')} aria-label="Toggle dark mode">
-          {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
+          {isDarkMode ? <IconSun size={20} /> : <IconMoon size={20} />}
         </Button>
       </Header>