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

package/dist/index.cjs

@@ -16,7 +16,11 @@ __export(layout_exports, {
   MainNav: () => MainNav,
   TopBanner: () => TopBanner
 });
-function MainNav({ currentPath, isPortfolioPage = false }) {
+function MainNav({
+  currentPath,
+  isPortfolioPage = false,
+  navLinks = []
+}) {
   const [theme, setTheme] = react.useState(() => {
     if (typeof document !== "undefined") {
       return document.documentElement.getAttribute("data-theme") || "light";
@@ -64,13 +68,6 @@ function MainNav({ currentPath, isPortfolioPage = false }) {
     document.documentElement.setAttribute("data-theme", newTheme);
     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) => {
     if (href === "/") return currentPath === "/";
     return currentPath.startsWith(href);
@@ -172,7 +169,9 @@ function MainNav({ currentPath, isPortfolioPage = false }) {
                   "li",
                   {
                     className: `transition-all duration-300 ${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"
+                    },
                     children: /* @__PURE__ */ jsxRuntime.jsxs(
                       "a",
                       {
@@ -298,6 +297,7 @@ function TopBanner() {
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
+  AuthorMeta: () => AuthorMeta,
   Toast: () => ToastContainer
 });
 var icons = {
@@ -399,6 +399,30 @@ function ToastContainer() {
     }
   );
 }
+function AuthorMeta({ author, linkable = false }) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+    author.avatar && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: author.avatar,
+        alt: author.name,
+        className: "h-4 w-4 rounded-full object-cover"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: author.name })
+  ] });
+  if (linkable && author.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: author.url,
+        className: "flex items-center gap-1 transition-colors hover:text-[var(--color-primary)]",
+        children: content
+      }
+    );
+  }
+  return content;
+}
 
 // src/components/patterns/index.ts
 var patterns_exports = {};
@@ -408,6 +432,7 @@ __export(patterns_exports, {
   ContentPage: () => ContentPage,
   FeatureShowcase: () => FeatureShowcase,
   IndustryGrid: () => IndustryGrid,
+  ListCard: () => ListCard,
   PageHero: () => PageHero,
   ProcessSteps: () => ProcessSteps,
   ProductCard: () => ProductCard,
@@ -819,9 +844,14 @@ function IndustryGrid({ industries, title, cols = 3 }) {
     )) })
   ] }) });
 }
-function ContentPage({ title, subtitle, lastUpdated, children }) {
+function ContentPage({
+  title,
+  subtitle,
+  lastUpdated,
+  children
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "pt-32 pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container-xl container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "pt-32 pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container-md container", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-4 text-4xl font-bold text-[var(--color-text-primary)] md:text-5xl", children: title }),
       subtitle && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-2 text-xl text-[var(--color-text-secondary)]", children: subtitle }),
       lastUpdated && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[var(--color-text-muted)]", children: [
@@ -829,7 +859,7 @@ function ContentPage({ title, subtitle, lastUpdated, children }) {
         lastUpdated
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container-xl container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-lg lg:max-w-3/4", children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container-md container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose max-w-full", children }) }) })
   ] });
 }
 function useMultiLineTypewriter(lines, typingSpeed = 20, initialDelay = 800, isVisible = true) {
@@ -1363,6 +1393,87 @@ var FeatureShowcase = ({
     )) })
   ] }) });
 };
+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
+}) {
+  const animationStyle = animationDelay ? { animationDelay: `${animationDelay}s` } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      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,
+      children: [
+        thumbnail && !specialImageComponent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `relative aspect-video w-full overflow-hidden rounded-t-lg ${imageBgClass}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: thumbnail,
+                alt: imageAlt,
+                className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("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", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: imageDark,
+              alt: title,
+              className: "dark-mode-hidden h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: imageLight,
+              alt: title,
+              className: "dark-mode-visible h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col p-6", children: [
+          meta && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs text-[var(--color-text-muted)]", children: [
+            meta.author && /* @__PURE__ */ jsxRuntime.jsx(AuthorMeta, { author: meta.author }),
+            meta.date && meta.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+            meta.date && /* @__PURE__ */ jsxRuntime.jsx("span", { children: meta.date })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading mb-2 text-xl font-semibold text-[var(--color-text-primary)]", children: title }),
+          tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium text-[var(--color-primary)]", children: tagline }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 flex-1 text-sm leading-relaxed text-[var(--color-text-secondary)]", children: description }),
+          tags && tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap gap-2 pt-4", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              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)]",
+              children: tag
+            },
+            tag
+          )) }),
+          children
+        ] }),
+        footerSlot
+      ]
+    }
+  );
+}
 function BeforeAfter({ data }) {
   const [sliderPosition, setSliderPosition] = react.useState(data.default_offset || 0.5);
   const [isDragging, setIsDragging] = react.useState(false);
@@ -3043,6 +3154,7 @@ var easings = {
   exit: "cubic-bezier(0.4, 0, 1, 1)"
 };
 
+exports.AuthorMeta = AuthorMeta;
 exports.BeforeAfter = BeforeAfter;
 exports.CTAButton = CTAButton;
 exports.CaseStudyBreakdown = CaseStudyBreakdown;
@@ -3056,6 +3168,7 @@ exports.ImageGrid = ImageGrid;
 exports.ImageGridModal = ImageGridModal;
 exports.IndustryGrid = IndustryGrid;
 exports.Layout = layout_exports;
+exports.ListCard = ListCard;
 exports.MainNav = MainNav;
 exports.PageHero = PageHero;
 exports.Patterns = patterns_exports;