@stevederico/skateboard-ui 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+2.14.0
+
+  Switch icons to Lucide React
+  Update DynamicIcon Lucide loader
+  Remove Tabler icon imports
+
 2.13.0
 
   Fix DynamicIcon per-icon imports

package/components/ThemeToggle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme } from 'next-themes';
-import { IconSun, IconMoon } from '@tabler/icons-react';
+import { Sun, Moon } from 'lucide-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
-        ? <IconSun size={iconSize} />
-        : <IconMoon size={iconSize} />
+        ? <Sun size={iconSize} />
+        : <Moon 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 { IconSparkles, IconCircleCheck } from '@tabler/icons-react';
+import { Sparkles, CircleCheck } from 'lucide-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">
-                    <IconCircleCheck className="size-5 text-primary shrink-0" />
+                    <CircleCheck 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}>
-            <IconSparkles className="size-4" />
+            <Sparkles className="size-4" />
             Upgrade to {product.title}
           </Button>
         </DrawerFooter>

package/core/DynamicIcon.jsx

@@ -14,6 +14,19 @@ function toPascalCase(str) {
     .join("");
 }
 
+/**
+ * Convert a PascalCase or camelCase string to kebab-case.
+ *
+ * @param {string} str - Input string
+ * @returns {string} kebab-case version
+ */
+function toKebabCase(str) {
+  return str
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+}
+
 /** Cache of resolved icon components keyed by name */
 const iconCache = new Map();
 
@@ -21,44 +34,53 @@ const iconCache = new Map();
 const importCache = new Map();
 
 /**
- * Load a single Tabler icon by its PascalCase name (e.g. "IconLock").
+ * Load a single Lucide icon by its kebab-case file name (e.g. "arrow-right").
  * Each icon is imported individually (~1KB) instead of loading the entire
- * icon library (~400KB). Results are cached for instant subsequent lookups.
+ * icon library. Results are cached for instant subsequent lookups.
  *
- * @param {string} iconName - PascalCase icon name with "Icon" prefix
+ * @param {string} kebabName - kebab-case icon file name
+ * @param {string} cacheKey - PascalCase name used as cache key
  * @returns {Promise<React.ComponentType|null>} Icon component or null
  */
-function loadIcon(iconName) {
-  if (iconCache.has(iconName)) return Promise.resolve(iconCache.get(iconName));
-  if (importCache.has(iconName)) return importCache.get(iconName);
+function loadIcon(kebabName, cacheKey) {
+  if (iconCache.has(cacheKey)) return Promise.resolve(iconCache.get(cacheKey));
+  if (importCache.has(cacheKey)) return importCache.get(cacheKey);
 
-  const promise = import(`@tabler/icons-react/dist/esm/icons/${iconName}.mjs`)
+  const promise = import(`/node_modules/lucide-react/dist/esm/icons/${kebabName}.js`)
     .then((mod) => {
-      const Icon = mod.default || mod[iconName] || null;
-      iconCache.set(iconName, Icon);
-      importCache.delete(iconName);
+      const Icon = mod.default || null;
+      iconCache.set(cacheKey, Icon);
+      importCache.delete(cacheKey);
       return Icon;
     })
     .catch(() => {
-      iconCache.set(iconName, null);
-      importCache.delete(iconName);
+      iconCache.set(cacheKey, null);
+      importCache.delete(cacheKey);
       return null;
     });
 
-  importCache.set(iconName, promise);
+  importCache.set(cacheKey, promise);
   return promise;
 }
 
 /**
- * Resolve a kebab-case icon name to a Tabler PascalCase module name.
- * e.g. "layout-dashboard" → "IconLayoutDashboard"
+ * Resolve an icon name in any format to a PascalCase name and kebab-case file path.
+ * e.g. "layout-dashboard" → { pascal: "LayoutDashboard", kebab: "layout-dashboard" }
+ *      "LayoutDashboard"  → { pascal: "LayoutDashboard", kebab: "layout-dashboard" }
+ *
+ * Strips legacy "Icon" prefix from Tabler-style names for backwards compatibility.
  *
  * @param {string} name - Icon name in any case format
- * @returns {string} Tabler PascalCase name with "Icon" prefix
+ * @returns {{ pascal: string, kebab: string }} Resolved icon name pair
  */
-function toTablerName(name) {
-  if (name.startsWith("Icon")) return name;
-  return "Icon" + toPascalCase(name);
+function toIconName(name) {
+  let stripped = name;
+  if (stripped.startsWith("Icon") && stripped.length > 4 && stripped[4] === stripped[4].toUpperCase()) {
+    stripped = stripped.slice(4);
+  }
+  const pascal = /[-_\s]/.test(stripped) ? toPascalCase(stripped) : stripped;
+  const kebab = toKebabCase(pascal);
+  return { pascal, kebab };
 }
 
 /**
@@ -69,19 +91,19 @@ function toTablerName(name) {
  * @returns {boolean} True if icon is cached and valid
  */
 export function canResolveIcon(name) {
-  const tablerName = toTablerName(name);
-  return iconCache.has(tablerName) && iconCache.get(tablerName) !== null;
+  const { pascal } = toIconName(name);
+  return iconCache.has(pascal) && iconCache.get(pascal) !== null;
 }
 
 /**
- * Render a Tabler icon by name string with per-icon lazy loading.
+ * Render a Lucide icon by name string with per-icon lazy loading.
  *
- * Each icon is imported individually from @tabler/icons-react (~1KB per icon)
+ * Each icon is imported individually from lucide-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.
+ * or legacy prefixed ("IconLayoutDashboard") names.
  *
  * @param {Object} props
  * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
@@ -106,16 +128,16 @@ const DynamicIcon = ({
   className,
   ...props
 }) => {
-  const tablerName = toTablerName(name);
+  const { pascal, kebab } = toIconName(name);
 
-  const [Icon, setIcon] = useState(() => iconCache.get(tablerName) || null);
+  const [Icon, setIcon] = useState(() => iconCache.get(pascal) || null);
 
   useEffect(() => {
     if (Icon) return;
-    loadIcon(tablerName).then((resolved) => {
+    loadIcon(kebab, pascal).then((resolved) => {
       if (resolved) setIcon(() => resolved);
     });
-  }, [tablerName, Icon]);
+  }, [pascal, kebab, Icon]);
 
   if (!Icon) return null;
 

package/layout/Sidebar.jsx

@@ -15,7 +15,7 @@ import {
   SidebarRail,
   useSidebar,
 } from "../shadcn/ui/sidebar";
-import { IconSettings } from '@tabler/icons-react';
+import { Settings } from 'lucide-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")}
             >
-              <IconSettings size={20} strokeWidth={2} />
+              <Settings size={20} strokeWidth={2} />
               <span>Settings</span>
             </SidebarMenuButton>
           </SidebarMenuItem>

package/package.json

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

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 { IconSun, IconMoon, IconCheck } from '@tabler/icons-react';
+import { Sun, Moon, Check } from 'lucide-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 ? <IconSun size={18} /> : <IconMoon size={18} />}
+              {isDarkMode ? <Sun size={18} /> : <Moon 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">
-                          <IconCheck size={16} className="text-primary shrink-0" />
+                          <Check 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">
-                          <IconCheck size={16} className="text-primary shrink-0" />
+                          <Check 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 { IconSun, IconMoon } from '@tabler/icons-react';
+import { Sun, Moon } from 'lucide-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 ? <IconSun size={20} /> : <IconMoon size={20} />}
+          {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
         </Button>
       </Header>
 

package/.claude/settings.local.json

@@ -1,16 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(for file in App.jsx AppSidebar.jsx Context.jsx Layout.jsx TabBar.jsx TextView.jsx SettingsView.jsx SignInView.jsx LandingView.jsx UpgradeSheet.jsx PaymentView.jsx SignUpView.jsx)",
-      "Bash(do)",
-      "Bash(if [ -f \"$file\" ])",
-      "Bash(then)",
-      "Bash(node --check:*)",
-      "Bash(echo:*)",
-      "Bash(fi)",
-      "Bash(done)",
-      "Bash(git commit:*)",
-      "Bash(git push:*)"
-    ]
-  }
-}