@mdxui/named 8.1.0 → 8.2.1

package/dist/view/index.js

@@ -196,7 +196,7 @@ function Hero({
   const hasHeroImage = !!rightImageSrc && isRenderableSrc(rightImageSrc);
   return /* @__PURE__ */ jsx4("section", { className: cn("relative py-12 md:py-16 px-6 lg:px-12 bg-background", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-0 sm:p-16 rounded-none sm:rounded-3xl md:[background:linear-gradient(180deg,var(--card)_0%,transparent_83.55%)]", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:gap-16 items-start mb-16 lg:mb-20", hasHeroImage && "lg:grid-cols-2"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-6 lg:pt-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("space-y-6 lg:pt-8", !hasHeroImage && "mx-auto max-w-3xl text-center"), children: [
         /* @__PURE__ */ jsx4(ScrollReveal, { direction: "down", delay: 0.1, children: /* @__PURE__ */ jsx4("div", { className: "inline-block", children: /* @__PURE__ */ jsxs(
           "a",
           {
@@ -211,8 +211,8 @@ function Hero({
           }
         ) }) }),
         /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx4("h1", { className: "font-halant font-normal text-[clamp(56px,6vw,72px)] leading-tight tracking-tight text-foreground", children: heading }) }),
-        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx4("p", { className: "text-lg leading-relaxed max-w-lg", children: description }) }),
-        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col sm:flex-row gap-3 pt-4", children: /* @__PURE__ */ jsx4(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsxs("a", { href: ctaHref, children: [
+        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx4("p", { className: cn("text-lg leading-relaxed max-w-lg", !hasHeroImage && "mx-auto"), children: description }) }),
+        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col sm:flex-row gap-3 pt-4", !hasHeroImage && "sm:justify-center"), children: /* @__PURE__ */ jsx4(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsxs("a", { href: ctaHref, children: [
           ctaText,
           /* @__PURE__ */ jsx4(HiChevronRight, { className: "w-4 h-4" })
         ] }) }) }) })
@@ -400,7 +400,7 @@ function Features({ heading = "How It Works", description = "Priya handles the r
           code: feature.code,
           language: feature.language,
           themes: "github-dark-default",
-          className: "bg-[#0d1117] rounded-lg p-6 lg:p-8 text-sm leading-relaxed text-[#e6edf3]"
+          className: "bg-(--color-code) rounded-lg p-6 lg:p-8 text-sm leading-relaxed text-(--color-code-fg)"
         }
       ) })
     ] }) }, index)) })
@@ -469,6 +469,7 @@ function Pricing({
 import { Check as Check2 } from "lucide-react";
 import Image2 from "next/image";
 import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var hasTierImage = (tier) => !!tier.image && isRenderableSrc(tier.image);
 var defaultTiers = [
   {
     title: "Business",
@@ -486,8 +487,6 @@ var defaultTiers = [
       { text: "Custom workflows" },
       { text: "Advanced analytics" }
     ],
-    image: "/images/hero/hero-main.png",
-    imageAlt: "Business Plan",
     featured: true
   },
   {
@@ -510,18 +509,28 @@ function PricingTiers({
   securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
   className
 }) {
+  const columnCount = tiers.reduce((count, tier) => count + (tier.featured && hasTierImage(tier) ? 2 : 1), 0);
+  const gridColumns = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+    5: "lg:grid-cols-5",
+    6: "lg:grid-cols-6"
+  }[columnCount] ?? "lg:grid-cols-3";
+  const gridMaxWidth = !tiers.some(hasTierImage) && tiers.length <= 2 ? "max-w-4xl mx-auto" : void 0;
   return /* @__PURE__ */ jsx8("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
     /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs4("div", { className: "text-center my-16 sm:my-12", children: [
       /* @__PURE__ */ jsx8("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }),
       /* @__PURE__ */ jsx8("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
     ] }) }),
-    /* @__PURE__ */ jsx8("ul", { className: "grid gap-6 lg:grid-cols-3 lg:items-stretch", children: tiers.map((tier, index) => /* @__PURE__ */ jsx8("li", { className: tier.featured ? "lg:col-span-2 flex" : "lg:col-span-1 flex", children: /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.2 + index * 0.1, className: "w-full", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8("ul", { className: cn("grid gap-6 lg:items-stretch", gridColumns, gridMaxWidth), children: tiers.map((tier, index) => /* @__PURE__ */ jsx8("li", { className: tier.featured && hasTierImage(tier) ? "lg:col-span-2 flex" : "lg:col-span-1 flex", children: /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.2 + index * 0.1, className: "w-full", children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: tier.featured ? "bg-card flex w-full h-full flex-col-reverse rounded-3xl border border-border feature-card-shadow md:flex-row" : "bg-card w-full h-full rounded-3xl border border-border feature-card-shadow p-6 md:p-8",
         children: tier.featured ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-          tier.image && isRenderableSrc(tier.image) && /* @__PURE__ */ jsx8("div", { className: "hidden xl:block xl:w-1/2 pl-6 md:pl-8 py-6 md:py-8", children: /* @__PURE__ */ jsx8("div", { className: "h-full rounded-lg overflow-hidden relative min-h-96", children: /* @__PURE__ */ jsx8(Image2, { src: tier.image, alt: tier.imageAlt || tier.title, fill: true, className: "object-cover", sizes: "(max-width: 1280px) 0vw, 50vw" }) }) }),
-          /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col p-6 md:p-8", tier.image && isRenderableSrc(tier.image) && "xl:w-1/2"), children: [
+          hasTierImage(tier) && /* @__PURE__ */ jsx8("div", { className: "hidden xl:block xl:w-1/2 pl-6 md:pl-8 py-6 md:py-8", children: /* @__PURE__ */ jsx8("div", { className: "h-full rounded-lg overflow-hidden relative min-h-96", children: /* @__PURE__ */ jsx8(Image2, { src: tier.image, alt: tier.imageAlt || tier.title, fill: true, className: "object-cover", sizes: "(max-width: 1280px) 0vw, 50vw" }) }) }),
+          /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col p-6 md:p-8", hasTierImage(tier) && "xl:w-1/2"), children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsx8("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
               /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground mt-3", children: tier.description }),
@@ -761,11 +770,11 @@ function Footer({
     }
     form.reset();
   };
-  return /* @__PURE__ */ jsx13("footer", { className: cn("py-16 px-6 lg:px-12 bg-[#111011] text-white", className), children: /* @__PURE__ */ jsxs8("div", { className: "max-w-7xl mx-auto", children: [
+  return /* @__PURE__ */ jsx13("footer", { className: cn("py-16 px-6 lg:px-12 bg-(--color-footer) text-(--color-footer-fg)", className), children: /* @__PURE__ */ jsxs8("div", { className: "max-w-7xl mx-auto", children: [
     /* @__PURE__ */ jsxs8("div", { className: "grid md:grid-cols-5 gap-12 mb-12", children: [
       /* @__PURE__ */ jsxs8("div", { className: "md:col-span-2", children: [
-        /* @__PURE__ */ jsx13(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx13("div", { className: "text-3xl font-base text-white font-halant", children: logo }) }),
-        /* @__PURE__ */ jsx13("p", { className: "max-w-md text-sm leading-relaxed text-white/70 mb-6", children: description }),
+        /* @__PURE__ */ jsx13(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx13("div", { className: "text-3xl font-base text-(--color-footer-fg) font-halant", children: logo }) }),
+        /* @__PURE__ */ jsx13("p", { className: "max-w-md text-sm leading-relaxed text-(--color-footer-fg)/70 mb-6", children: description }),
         /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-4", children: socialLinks.map((link) => {
           const Icon = link.icon;
           return /* @__PURE__ */ jsx13(
@@ -774,7 +783,7 @@ function Footer({
               href: link.href,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "text-white/70 transition-colors hover:text-white",
+              className: "text-(--color-footer-fg)/70 transition-colors hover:text-(--color-footer-fg)",
               "aria-label": link.label,
               children: /* @__PURE__ */ jsx13(Icon, { className: "w-5 h-5" })
             },
@@ -783,11 +792,11 @@ function Footer({
         }) })
       ] }),
       /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx13("h3", { className: "font-semibold text-base mb-4 text-white", children: "Quick Links" }),
-        /* @__PURE__ */ jsx13("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(Link2, { href: link.href, className: "text-sm text-white/70 transition-colors hover:text-white", children: link.label }) }, link.label)) })
+        /* @__PURE__ */ jsx13("h3", { className: "font-semibold text-base mb-4 text-(--color-footer-fg)", children: "Quick Links" }),
+        /* @__PURE__ */ jsx13("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(Link2, { href: link.href, className: "text-sm text-(--color-footer-fg)/70 transition-colors hover:text-(--color-footer-fg)", children: link.label }) }, link.label)) })
       ] }),
       /* @__PURE__ */ jsx13("div", { className: "w-full md:col-span-2 md:flex md:flex-col md:items-end", children: /* @__PURE__ */ jsxs8("div", { className: "w-full md:max-w-sm", children: [
-        /* @__PURE__ */ jsx13("h3", { className: "font-semibold text-base mb-4 text-white", children: contactTitle }),
+        /* @__PURE__ */ jsx13("h3", { className: "font-semibold text-base mb-4 text-(--color-footer-fg)", children: contactTitle }),
         /* @__PURE__ */ jsxs8("form", { onSubmit: handleEmailSubmit, className: "relative", children: [
           /* @__PURE__ */ jsx13(
             Input,
@@ -796,14 +805,14 @@ function Footer({
               name: "email",
               placeholder: emailPlaceholder,
               required: true,
-              className: "w-full bg-white/10 border-white/20 text-white placeholder:text-white/50 pr-12"
+              className: "w-full bg-(--color-footer-fg)/10 border-(--color-footer-fg)/20 text-(--color-footer-fg) placeholder:text-(--color-footer-fg)/50 pr-12"
             }
           ),
           /* @__PURE__ */ jsx13(
             "button",
             {
               type: "submit",
-              className: "absolute right-1 top-1/2 -translate-y-1/2 bg-white text-gray-900 hover:bg-white/90 active:bg-[#111011] active:text-white px-3 py-3 rounded-md transition-colors",
+              className: "absolute right-1 top-1/2 -translate-y-1/2 bg-(--color-footer-fg) text-(--color-footer) hover:bg-(--color-footer-fg)/90 active:bg-(--color-footer) active:text-(--color-footer-fg) px-3 py-3 rounded-md transition-colors",
               "aria-label": "Submit email",
               children: /* @__PURE__ */ jsx13(FaArrowRight, { className: "w-3 h-3" })
             }
@@ -811,7 +820,7 @@ function Footer({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: "border-t border-white/10 pt-8", children: /* @__PURE__ */ jsx13("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx13("p", { className: "text-sm text-white/60", children: copyrightText }) }) })
+    /* @__PURE__ */ jsx13("div", { className: "border-t border-(--color-footer-fg)/10 pt-8", children: /* @__PURE__ */ jsx13("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx13("p", { className: "text-sm text-(--color-footer-fg)/60", children: copyrightText }) }) })
   ] }) });
 }
 
@@ -1059,7 +1068,7 @@ function ExecFeatures({
         {
           code: feature.code,
           language: feature.language,
-          className: "rounded-[2px] border border-(--color-border) bg-[#0d1117] p-5 text-left text-xs leading-relaxed text-[#e6edf3]"
+          className: "rounded-[2px] border border-(--color-border) bg-(--color-code) p-5 text-left text-xs leading-relaxed text-(--color-code-fg)"
         }
       ) })
     ] }) }) }, index)) })
@@ -1384,7 +1393,12 @@ import { jsx as jsx25 } from "react/jsx-runtime";
 var baseClasses3 = "inline-flex items-center justify-center gap-2 whitespace-nowrap uppercase tracking-[0.14em] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-ring) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 cursor-pointer rounded-[4px]";
 var variantClasses3 = {
   default: "bg-(--color-btn-primary-to) text-(--color-btn-primary-fg) hover:bg-(--color-accent)",
-  bone: "bg-(--color-placard) text-(--color-accent-field) hover:bg-(--color-accent-fg)",
+  /* `bone` lives ON the painted accent fields (closing room, featured
+     edition) — it paints in the field's own type color (--color-accent-fg,
+     light over the clamped-deep fields in BOTH modes), never the placard:
+     placards follow the theme's card and go dark after hours, which sank
+     this button dark-on-dark. */
+  bone: "bg-(--color-accent-fg) text-(--color-accent-field) hover:bg-(--color-accent-fg)/90",
   secondary: "bg-transparent text-(--color-fg) border border-(--color-border-strong) hover:bg-(--color-hover)"
 };
 var sizeClasses3 = {