@stevederico/skateboard-ui 2.9.8 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+2.10.0
+
+  Fix landing page feature icons
+  Add FeatureIcon DynamicIcon resolver
+  Export canResolveIcon utility
+
+2.9.9
+
+  Add proportional radius cascade
+  Add radius-2xl/3xl/4xl tokens
+
 2.9.8
 
   Add useUser hook

package/core/DynamicIcon.jsx

@@ -45,4 +45,14 @@ const DynamicIcon = ({ name, size = 24, color = "currentColor", strokeWidth = 2,
   return <Icon size={size} color={color} strokeWidth={strokeWidth} className={cn(className)} {...props} />;
 };
 
+/**
+ * Check if a name string resolves to a valid Lucide icon.
+ *
+ * @param {string} name - Icon name to check
+ * @returns {boolean} True if name resolves to an icon
+ */
+export function canResolveIcon(name) {
+  return resolveIcon(name) !== null;
+}
+
 export default DynamicIcon;

package/package.json

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

package/styles.css

@@ -145,10 +145,13 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);

package/views/LandingView.jsx

@@ -2,13 +2,26 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from 'next-themes';
 import { getState } from "../core/Context.jsx";
-import DynamicIcon from '../core/DynamicIcon.jsx';
+import DynamicIcon, { canResolveIcon } 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';
 
+/**
+ * Renders a feature icon from a name string or emoji.
+ * Resolves Lucide icon names (kebab-case), falls back to raw text (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} />;
+  return <span>{name}</span>;
+}
+
 /**
  * Default landing page with hero section, features grid, pricing card,
  * CTA section, and footer.
@@ -85,7 +98,9 @@ export default function LandingView() {
                 <Card key={index} className="text-center">
                   <CardHeader className="items-center">
                     <div className="w-full flex justify-center">
-                      <Badge variant="secondary" className="text-2xl mb-2 h-auto px-3 py-1">{feature.icon}</Badge>
+                      <Badge variant="secondary" className="text-2xl mb-2 h-auto px-3 py-1">
+                        <FeatureIcon name={feature.icon} />
+                      </Badge>
                     </div>
                     <CardTitle className="text-xl font-bold">{feature.title}</CardTitle>
                     <CardDescription>{feature.description}</CardDescription>