@nimblegiant/stilts 0.2.0-alpha.3 → 0.2.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimblegiant/stilts",
-  "version": "0.2.0-alpha.3",
+  "version": "0.2.0-alpha.4",
   "description": "Nimble Giant's whimsical yet disciplined design system",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -82,4 +82,4 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   }
-}
+}

package/src/components/layout/MainNav.tsx

@@ -4,13 +4,22 @@ import { Sun, Moon, Menu, X, ArrowRight } from "lucide-react";
 interface MainNavProps {
   currentPath: string;
   isPortfolioPage?: boolean;
+  navLinks?: { href: string; label: string }[];
 }
 
-export default function MainNav({ currentPath, isPortfolioPage = false }: MainNavProps) {
+export default function MainNav({
+  currentPath,
+  isPortfolioPage = false,
+  navLinks = [],
+}: MainNavProps) {
   const [theme, setTheme] = useState<"light" | "dark">(() => {
     // Initialize theme from document during first render (client-side only)
     if (typeof document !== "undefined") {
-      return (document.documentElement.getAttribute("data-theme") as "light" | "dark") || "light";
+      return (
+        (document.documentElement.getAttribute("data-theme") as
+          | "light"
+          | "dark") || "light"
+      );
     }
     return "light";
   });
@@ -64,14 +73,6 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
     localStorage.setItem("theme", newTheme);
   }, [theme]);
 
-  const navLinks = [
-    { href: "/", label: "HOME" },
-    { href: "/about", label: "ABOUT" },
-    { href: "/services", label: "SERVICES" },
-    { href: "/products", label: "PRODUCTS" },
-    { href: "/contact", label: "CONTACT" },
-  ];
-
   const isActive = (href: string) => {
     if (href === "/") return currentPath === "/";
     return currentPath.startsWith(href);
@@ -91,7 +92,9 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
         role="navigation"
         aria-label="Main navigation"
         className={`fixed top-0 right-0 left-0 z-[var(--z-nav)] border-b border-[var(--color-border)]/0 transition-all duration-300 ease-out ${
-          isScrolled ? "bg-[var(--color-surface-overlay)]/0 backdrop-blur-sm" : "bg-transparent"
+          isScrolled
+            ? "bg-[var(--color-surface-overlay)]/0 backdrop-blur-sm"
+            : "bg-transparent"
         } `}
       >
         <div className="container-xl container flex h-20 items-center justify-between sm:p-6 lg:p-14">
@@ -103,7 +106,11 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
           >
             {/* Light mode logo (dark logo on light bg) */}
             <img
-              src={showLightText ? "/images/logo-light.svg" : "/images/logo-dark.svg"}
+              src={
+                showLightText
+                  ? "/images/logo-light.svg"
+                  : "/images/logo-dark.svg"
+              }
               alt=""
               aria-hidden="true"
               className="h-10 w-auto"
@@ -174,7 +181,9 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
                 ? "text-white/70 hover:text-white"
                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
             } `}
-            aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+            aria-label={
+              isMenuOpen ? "Close navigation menu" : "Open navigation menu"
+            }
             aria-expanded={isMenuOpen}
             aria-controls="mobile-menu"
           >
@@ -194,7 +203,9 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
         aria-modal="true"
         aria-label="Navigation menu"
         className={`fixed inset-0 z-[calc(var(--z-nav)-1)] transition-all duration-300 ease-out md:hidden ${
-          isMenuOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+          isMenuOpen
+            ? "pointer-events-auto opacity-100"
+            : "pointer-events-none opacity-0"
         } `}
       >
         {/* Backdrop */}
@@ -216,9 +227,15 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
                   <li
                     key={link.href}
                     className={`transition-all duration-300 ${
-                      isMenuOpen ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"
+                      isMenuOpen
+                        ? "translate-x-0 opacity-100"
+                        : "translate-x-8 opacity-0"
                     } `}
-                    style={{ transitionDelay: isMenuOpen ? `${index * 50 + 100}ms` : "0ms" }}
+                    style={{
+                      transitionDelay: isMenuOpen
+                        ? `${index * 50 + 100}ms`
+                        : "0ms",
+                    }}
                   >
                     <a
                       href={link.href}
@@ -233,7 +250,9 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
                       {link.label}
                       <ArrowRight
                         className={`h-4 w-4 transition-all duration-200 ${
-                          isActive(link.href) ? "opacity-50" : "opacity-0 group-hover:opacity-30"
+                          isActive(link.href)
+                            ? "opacity-50"
+                            : "opacity-0 group-hover:opacity-30"
                         } `}
                         aria-hidden="true"
                       />
@@ -246,7 +265,9 @@ export default function MainNav({ currentPath, isPortfolioPage = false }: MainNa
             {/* Footer section with theme toggle */}
             <div
               className={`border-t border-[var(--color-border)] pt-6 transition-all duration-300 ${
-                isMenuOpen ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
+                isMenuOpen
+                  ? "translate-y-0 opacity-100"
+                  : "translate-y-4 opacity-0"
               } `}
               style={{ transitionDelay: isMenuOpen ? "300ms" : "0ms" }}
             >

package/src/components/patterns/ContentPage.tsx

@@ -10,26 +10,35 @@ interface ContentPageProps {
   children: React.ReactNode;
 }
 
-export default function ContentPage({ title, subtitle, lastUpdated, children }: ContentPageProps) {
+export default function ContentPage({
+  title,
+  subtitle,
+  lastUpdated,
+  children,
+}: ContentPageProps) {
   return (
     <>
       <section className="pt-32 pb-12">
-        <div className="container-xl container">
+        <div className="container-md container">
           <h1 className="mb-4 text-4xl font-bold text-[var(--color-text-primary)] md:text-5xl">
             {title}
           </h1>
           {subtitle && (
-            <h2 className="mb-2 text-xl text-[var(--color-text-secondary)]">{subtitle}</h2>
+            <h2 className="mb-2 text-xl text-[var(--color-text-secondary)]">
+              {subtitle}
+            </h2>
           )}
           {lastUpdated && (
-            <p className="text-[var(--color-text-muted)]">Last updated: {lastUpdated}</p>
+            <p className="text-[var(--color-text-muted)]">
+              Last updated: {lastUpdated}
+            </p>
           )}
         </div>
       </section>
 
       <section className="py-12">
-        <div className="container-xl container">
-          <div className="prose prose-lg lg:max-w-3/4">{children}</div>
+        <div className="container-md container">
+          <div className="prose max-w-full">{children}</div>
         </div>
       </section>
     </>

package/src/components/patterns/ListCard.tsx

@@ -0,0 +1,134 @@
+import { ReactNode } from "react";
+import { AuthorMeta, Author } from "../ui/AuthorMeta";
+
+export interface ListCardProps {
+  href: string;
+  title: string;
+  description: string;
+  tagline?: string;
+  thumbnail?: string;
+  tags?: string[];
+  meta?: {
+    date?: string;
+    author?: Author;
+  };
+  imageAlt?: string;
+  animationDelay?: number;
+  specialImageComponent?: boolean;
+  imageBgClass?: string;
+  imageDark?: string;
+  imageLight?: string;
+  children?: ReactNode;
+  footerSlot?: ReactNode;
+}
+
+/**
+ * ListCard Component
+ * Displays a card with optional image, title, description, meta, and tags
+ * Used for products, blog posts, and other list items
+ */
+export function ListCard({
+  href,
+  title,
+  description,
+  tagline,
+  thumbnail,
+  tags,
+  meta,
+  imageAlt = "Card image",
+  animationDelay,
+  specialImageComponent = false,
+  imageBgClass = "bg-[var(--color-surface-muted)]",
+  children,
+  imageDark, 
+  imageLight,
+  footerSlot,
+}: ListCardProps) {
+  const animationStyle = animationDelay
+    ? { animationDelay: `${animationDelay}s` }
+    : undefined;
+
+  return (
+    <a
+      href={href}
+      className="hero-animate group flex flex-col overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] opacity-0 shadow-sm transition-all duration-300 hover:border-[var(--color-primary)] hover:shadow-lg"
+      style={animationStyle}
+    >
+      {/* Image/Thumbnail */}
+      {thumbnail && !specialImageComponent && (
+        <div
+          className={`relative aspect-video w-full overflow-hidden rounded-t-lg ${imageBgClass}`}
+        >
+          <img
+            src={thumbnail}
+            alt={imageAlt}
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        </div>
+      )}
+
+      {/* Special image component slot */}
+      <div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-t-lg bg-gradient-to-br from-[var(--color-dot-magenta)] via-[var(--color-dot-purple)] to-[var(--color-dot-turquoise)] p-12">
+        <img
+          src={imageDark}
+          alt={title}
+          className="dark-mode-hidden h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
+        />
+        <img
+          src={imageLight}
+          alt={title}
+          className="dark-mode-visible h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
+        />
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 flex-col p-6">
+        {/* Meta (optional - for date, author) */}
+        {meta && (
+          <div className="mb-2 flex items-center gap-2 text-xs text-[var(--color-text-muted)]">
+            {meta.author && <AuthorMeta author={meta.author} />}
+            {meta.date && meta.author && <span>•</span>}
+            {meta.date && <span>{meta.date}</span>}
+          </div>
+        )}
+
+        {/* Title */}
+        <h3 className="font-heading mb-2 text-xl font-semibold text-[var(--color-text-primary)]">
+          {title}
+        </h3>
+        {tagline && (
+          <p className="mb-3 text-sm font-medium text-[var(--color-primary)]">
+            {tagline}
+          </p>
+        )}
+
+        {/* Description */}
+        <p className="mb-4 flex-1 text-sm leading-relaxed text-[var(--color-text-secondary)]">
+          {description}
+        </p>
+
+        {/* Tags */}
+        {tags && tags.length > 0 && (
+          <div className="mt-auto flex flex-wrap gap-2 pt-4">
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="rounded-full border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)]"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Custom content slot */}
+        {children}
+      </div>
+
+      {/* Footer slot */}
+      {footerSlot}
+    </a>
+  );
+}
+
+export default ListCard;

package/src/components/patterns/index.ts

@@ -2,23 +2,29 @@
  * Pattern Components
  */
 
-export { default as PageHero } from './PageHero';
-export { default as VideoHero } from './VideoHero';
-export { default as TeamGrid } from './TeamGrid';
-export { default as ServiceSection } from './ServiceSection';
-export { default as ProcessSteps } from './ProcessSteps';
-export { default as StatBar } from './StatBar';
-export { default as IndustryGrid } from './IndustryGrid';
-export { default as ContentPage } from './ContentPage';
-export { TerminalWindow, TerminalChrome } from './TerminalWindow';
-export type { TerminalLine, TerminalWindowProps, TerminalChromeProps } from './TerminalWindow';
-export { default as TerminalHero } from './TerminalHero';
-export type { TerminalHeroProps } from './TerminalHero';
-export { CTAButton } from './CTAButton';
-export type { CTAButtonProps } from './CTAButton';
-export { ProductCard } from './ProductCard';
-export type { ProductCardProps } from './ProductCard';
-export { CodeBlock } from './CodeBlock';
-export type { CodeBlockProps } from './CodeBlock';
-export { FeatureShowcase } from './FeatureShowcase';
-export type { FeatureShowcaseProps, Feature } from './FeatureShowcase';
+export { default as PageHero } from "./PageHero";
+export { default as VideoHero } from "./VideoHero";
+export { default as TeamGrid } from "./TeamGrid";
+export { default as ServiceSection } from "./ServiceSection";
+export { default as ProcessSteps } from "./ProcessSteps";
+export { default as StatBar } from "./StatBar";
+export { default as IndustryGrid } from "./IndustryGrid";
+export { default as ContentPage } from "./ContentPage";
+export { TerminalWindow, TerminalChrome } from "./TerminalWindow";
+export type {
+  TerminalLine,
+  TerminalWindowProps,
+  TerminalChromeProps,
+} from "./TerminalWindow";
+export { default as TerminalHero } from "./TerminalHero";
+export type { TerminalHeroProps } from "./TerminalHero";
+export { CTAButton } from "./CTAButton";
+export type { CTAButtonProps } from "./CTAButton";
+export { ProductCard } from "./ProductCard";
+export type { ProductCardProps } from "./ProductCard";
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";
+export { FeatureShowcase } from "./FeatureShowcase";
+export type { FeatureShowcaseProps, Feature } from "./FeatureShowcase";
+export { ListCard } from "./ListCard";
+export type { ListCardProps } from "./ListCard";

package/src/components/ui/AuthorMeta.tsx

@@ -0,0 +1,44 @@
+export interface Author {
+  name: string;
+  url?: string;
+  avatar?: string;
+}
+
+export interface AuthorMetaProps {
+  author: Author;
+  linkable?: boolean;
+}
+
+/**
+ * AuthorMeta Component
+ * Displays author information with optional avatar
+ */
+export function AuthorMeta({ author, linkable = false }: AuthorMetaProps) {
+  const content = (
+    <span className="flex items-center gap-1">
+      {author.avatar && (
+        <img
+          src={author.avatar}
+          alt={author.name}
+          className="h-4 w-4 rounded-full object-cover"
+        />
+      )}
+      <span>{author.name}</span>
+    </span>
+  );
+
+  if (linkable && author.url) {
+    return (
+      <a
+        href={author.url}
+        className="flex items-center gap-1 transition-colors hover:text-[var(--color-primary)]"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}
+
+export default AuthorMeta;

package/src/components/ui/index.ts

@@ -2,4 +2,6 @@
  * UI Components
  */
 
-export { default as Toast } from './Toast';
+export { default as Toast } from "./Toast";
+export { AuthorMeta } from "./AuthorMeta";
+export type { AuthorMetaProps, Author } from "./AuthorMeta";