@stevederico/skateboard-ui 2.10.1 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+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
+  Remove barrel import lucide-react
+  Hoist LandingView static values
+  Add FeatureIcon emoji fallback
+
 2.10.1
 
   Add Geist font files self-hosted

package/core/DynamicIcon.jsx

@@ -1,28 +1,11 @@
-import React from "react";
-import * as LucideIcons from "lucide-react";
+import React, { useState, useEffect } from "react";
 import { cn } from "../shadcn/lib/utils.js";
 
 /**
- * Render a Lucide icon by name string.
+ * Convert a kebab-case, snake_case, or space-separated string to PascalCase.
  *
- * Accepts kebab-case, snake_case, or PascalCase icon names and resolves
- * them to the matching lucide-react component. Supports className merging
- * via shadcn cn() utility.
- *
- * @param {Object} props
- * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
- * @param {number} [props.size=24] - Icon size in pixels
- * @param {string} [props.color='currentColor'] - Icon stroke color
- * @param {number} [props.strokeWidth=2] - Stroke width
- * @param {string} [props.className] - Additional CSS classes
- * @returns {JSX.Element|null} Rendered icon or null if name not found
- *
- * @example
- * import DynamicIcon from '@stevederico/skateboard-ui/DynamicIcon';
- *
- * <DynamicIcon name="home" size={24} />
- * <DynamicIcon name="arrow-right" size={20} color="red" />
- * <DynamicIcon name="settings" className="text-muted-foreground" />
+ * @param {string} str - Input string
+ * @returns {string} PascalCase version
  */
 function toPascalCase(str) {
   return str
@@ -31,28 +14,112 @@ function toPascalCase(str) {
     .join("");
 }
 
-function resolveIcon(name) {
-  const candidates = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+let iconsModule = null;
+let iconsPromise = null;
+
+/**
+ * Lazily load the lucide-react module on first use.
+ * Subsequent calls return the cached module immediately.
+ *
+ * @returns {Promise<Object>} The lucide-react module
+ */
+function loadIcons() {
+  if (iconsModule) return Promise.resolve(iconsModule);
+  if (!iconsPromise) {
+    iconsPromise = import("lucide-react").then((mod) => {
+      iconsModule = mod;
+      return mod;
+    });
+  }
+  return iconsPromise;
+}
+
+/**
+ * Resolve icon name to a Lucide component from the cached module.
+ *
+ * @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
+ */
+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 (LucideIcons[candidate]) return LucideIcons[candidate];
+    if (mod[candidate]) return mod[candidate];
   }
   return null;
 }
 
-const DynamicIcon = ({ name, size = 24, color = "currentColor", strokeWidth = 2, className, ...props }) => {
-  const Icon = resolveIcon(name);
-  if (!Icon) return null;
-  return <Icon size={size} color={color} strokeWidth={strokeWidth} className={cn(className)} {...props} />;
-};
-
 /**
  * Check if a name string resolves to a valid Lucide icon.
+ * Returns false until the icon module has been loaded.
  *
  * @param {string} name - Icon name to check
  * @returns {boolean} True if name resolves to an icon
  */
 export function canResolveIcon(name) {
-  return resolveIcon(name) !== null;
+  if (!iconsModule) return false;
+  return resolveIcon(iconsModule, name) !== null;
 }
 
+/**
+ * Render a Lucide icon by name string with 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).
+ *
+ * @param {Object} props
+ * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
+ * @param {number} [props.size=24] - Icon size in pixels
+ * @param {string} [props.color='currentColor'] - Icon stroke color
+ * @param {number} [props.strokeWidth=2] - Stroke width
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element|null} Rendered icon or null if loading/not found
+ *
+ * @example
+ * import DynamicIcon from '@stevederico/skateboard-ui/DynamicIcon';
+ *
+ * <DynamicIcon name="home" size={24} />
+ * <DynamicIcon name="arrow-right" size={20} color="red" />
+ * <DynamicIcon name="settings" className="text-muted-foreground" />
+ */
+const DynamicIcon = ({
+  name,
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  className,
+  ...props
+}) => {
+  const [Icon, setIcon] = useState(() => {
+    if (iconsModule) return resolveIcon(iconsModule, name);
+    return null;
+  });
+
+  useEffect(() => {
+    if (Icon) return;
+    loadIcons().then((mod) => {
+      const resolved = resolveIcon(mod, name);
+      setIcon(() => resolved);
+    });
+  }, [name, Icon]);
+
+  if (!Icon) return null;
+
+  return (
+    <Icon
+      size={size}
+      color={color}
+      strokeWidth={strokeWidth}
+      className={cn(className)}
+      {...props}
+    />
+  );
+};
+
 export default DynamicIcon;

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.10.1",
+  "version": "2.12.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

@@ -2,23 +2,42 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from 'next-themes';
 import { getState } from "../core/Context.jsx";
-import DynamicIcon, { canResolveIcon } from '../core/DynamicIcon.jsx';
+import DynamicIcon from '../core/DynamicIcon.jsx';
 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';
 import { Separator } from '../shadcn/ui/separator.jsx';
 
+const CURRENT_YEAR = new Date().getFullYear();
+
+const DEFAULT_NAV_LINKS = [
+  { label: 'Features', href: '#features' },
+];
+
+const DEFAULT_NAV_LINKS_SUFFIX = [
+  { label: 'Terms', href: '/terms' },
+];
+
+const PRICING_LINK = { label: 'Pricing', href: '#pricing' };
+
+const PRIVACY_LINK = { label: 'Privacy', href: '/privacy' };
+const TERMS_LINK = { label: 'Terms', href: '/terms' };
+const EULA_LINK = { label: 'EULA', href: '/eula' };
+
 /**
  * Renders a feature icon from a name string or emoji.
- * Resolves Lucide icon names (kebab-case), falls back to raw text (emoji).
+ * If the name looks like an icon identifier (ASCII letters, digits, hyphens),
+ * renders it via DynamicIcon with lazy loading. Otherwise treats it as
+ * raw text (e.g. an emoji).
  *
  * @param {Object} props
  * @param {string} props.name - Icon name (kebab-case) or emoji string
  * @returns {JSX.Element} Icon component or text span
  */
 function FeatureIcon({ name }) {
-  if (canResolveIcon(name)) return <DynamicIcon name={name} size={24} />;
+  const isIconName = /^[a-z][a-z0-9-]*$/i.test(name);
+  if (isIconName) return <DynamicIcon name={name} size={24} />;
   return <span>{name}</span>;
 }
 
@@ -57,9 +76,9 @@ export default function LandingView() {
 
           <div className="hidden md:flex gap-6">
             {(constants.navLinks || [
-              { label: 'Features', href: '#features' },
-              ...(constants.stripeProducts?.length > 0 ? [{ label: 'Pricing', href: '#pricing' }] : []),
-              { label: 'Terms', href: '/terms' },
+              ...DEFAULT_NAV_LINKS,
+              ...(constants.stripeProducts?.length > 0 ? [PRICING_LINK] : []),
+              ...DEFAULT_NAV_LINKS_SUFFIX,
             ]).map((link, index) => (
               <a key={index} href={link.href} className="text-muted-foreground hover:text-foreground transition-colors font-semibold">{link.label}</a>
             ))}
@@ -171,14 +190,14 @@ export default function LandingView() {
           <Separator className="mb-8" />
           <div className="flex justify-center gap-8 mb-6">
             {(constants.footerLinks || [
-              ...(constants.privacyPolicy ? [{ label: 'Privacy', href: '/privacy' }] : []),
-              ...(constants.termsOfService ? [{ label: 'Terms', href: '/terms' }] : []),
-              ...(constants.EULA ? [{ label: 'EULA', href: '/eula' }] : []),
+              ...(constants.privacyPolicy ? [PRIVACY_LINK] : []),
+              ...(constants.termsOfService ? [TERMS_LINK] : []),
+              ...(constants.EULA ? [EULA_LINK] : []),
             ]).map((link, index) => (
               <a key={index} href={link.href} className="text-muted-foreground hover:text-foreground transition-colors font-semibold">{link.label}</a>
             ))}
           </div>
-          <p className="text-center text-muted-foreground">&copy; {new Date().getFullYear()} {constants.companyName}. {constants.copyrightText || 'All rights reserved.'}</p>
+          <p className="text-center text-muted-foreground">&copy; {CURRENT_YEAR} {constants.companyName}. {constants.copyrightText || 'All rights reserved.'}</p>
         </div>
       </footer>
     </div>