@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.8

package/dist/chunk-RKQPU75I.js

@@ -0,0 +1,126 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-55HD4L6G.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function resolveActiveSection(sections, activeSectionId) {
+  const directMatch = sections.find((section) => section.id === activeSectionId && section.isAvailable !== false);
+  if (directMatch) {
+    return directMatch;
+  }
+  const firstAvailable = sections.find((section) => section.isAvailable !== false);
+  if (firstAvailable) {
+    return firstAvailable;
+  }
+  return sections[0] ?? null;
+}
+function SettingsPageKit({
+  title = "Settings",
+  description = "Manage account, workspace, and preference sections with explicit save-state contracts.",
+  sections,
+  activeSectionId,
+  onSectionChange,
+  renderSection,
+  saveState = "default",
+  validationMessage,
+  fatalErrorMessage,
+  savedMessage = "Changes saved successfully.",
+  onSave,
+  onDiscard,
+  saveLabel = "Save changes",
+  discardLabel = "Discard",
+  className
+}) {
+  const activeSection = resolveActiveSection(sections, activeSectionId);
+  const showActions = Boolean(onSave || onDiscard);
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[280px_1fr]", children: [
+      /* @__PURE__ */ jsx("aside", { "aria-label": "Settings sections", className: "space-y-3", children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Sections" }) }),
+        /* @__PURE__ */ jsx(CardContent, { className: "space-y-2", children: sections.map((section) => {
+          const isUnavailable = section.isAvailable === false;
+          const isActive = activeSection?.id === section.id;
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: isActive ? "secondary" : "ghost",
+                className: "w-full justify-start",
+                "aria-pressed": isActive,
+                disabled: isUnavailable,
+                onClick: () => {
+                  if (!isUnavailable && section.id !== activeSection?.id) {
+                    onSectionChange?.(section.id);
+                  }
+                },
+                children: section.label
+              }
+            ),
+            isUnavailable && section.unavailableReason ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "px-2 text-text-tertiary", children: section.unavailableReason }) : null
+          ] }, section.id);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        saveState === "loading" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Loading settings content" }) : null,
+        saveState === "dirty" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Unsaved changes" }) : null,
+        saveState === "saving" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Saving changes\u2026" }) : null,
+        saveState === "saved" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-success", children: savedMessage }) : null,
+        saveState === "validation-error" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+            children: validationMessage ?? "Please resolve validation errors before saving."
+          }
+        ) : null,
+        saveState === "fatal-error" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+            children: fatalErrorMessage ?? "Settings failed to load. Retry or contact support."
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: activeSection?.label ?? "Settings section" }),
+            activeSection?.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: activeSection.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: activeSection ? renderSection(activeSection) : /* @__PURE__ */ jsxs(Empty, { children: [
+            /* @__PURE__ */ jsx(EmptyTitle, { children: "No settings sections" }),
+            /* @__PURE__ */ jsx(EmptyDescription, { children: "Add at least one section to render settings content." })
+          ] }) })
+        ] }),
+        showActions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+          onDiscard ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              onClick: onDiscard,
+              disabled: saveState === "saving" || saveState === "loading",
+              children: discardLabel
+            }
+          ) : null,
+          onSave ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: onSave,
+              disabled: saveState === "saving" || saveState === "loading",
+              children: saveLabel
+            }
+          ) : null
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+
+export { SettingsPageKit };

package/dist/chunk-U4GYSYGN.js

@@ -0,0 +1,120 @@
+import { useSafeTimeout } from './chunk-MDAYDDTC.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { Spinner } from './chunk-ZLSWCV55.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Field, FieldLabel, FieldContent } from './chunk-RX5EUODB.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ContactBlock({
+  onSubmit,
+  title = "Get in touch",
+  description = "Have a question or want to work together? Drop us a message.",
+  className,
+  namePlaceholder = "Your name",
+  emailPlaceholder = "you@example.com",
+  messagePlaceholder = "Tell us what you need...",
+  successTitle = "Message sent",
+  submitLabel = "Send message"
+}) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [status, setStatus] = useState("idle");
+  const setSafeTimeout = useSafeTimeout();
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!name.trim() || !email.trim() || !message.trim()) return;
+    setStatus("loading");
+    try {
+      await onSubmit?.({ name, email, message });
+    } catch {
+    }
+    setSafeTimeout(() => {
+      setStatus("success");
+      setSafeTimeout(() => {
+        setStatus("idle");
+        setName("");
+        setEmail("");
+        setMessage("");
+      }, 2e3);
+    }, 800);
+  };
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-text-primary", children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-text-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "glass-panel rounded-xl border border-border/50 p-6 sm:p-8", children: status === "success" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-success/10 text-success", children: /* @__PURE__ */ jsx(CheckIcon, { size: 24 }) }),
+      /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "text-text-primary", children: successTitle }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body", className: "text-text-secondary", children: [
+        "We",
+        "'",
+        "ll get back to you soon."
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { children: "Name" }),
+        /* @__PURE__ */ jsx(FieldContent, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: "name",
+            placeholder: namePlaceholder,
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            required: true
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { children: "Email" }),
+        /* @__PURE__ */ jsx(FieldContent, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            name: "email",
+            type: "email",
+            placeholder: emailPlaceholder,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            required: true
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { children: "Message" }),
+        /* @__PURE__ */ jsx(FieldContent, { children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            name: "message",
+            placeholder: messagePlaceholder,
+            rows: 4,
+            value: message,
+            onChange: (e) => setMessage(e.target.value),
+            required: true
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          className: "w-full",
+          variant: "accent",
+          disabled: status === "loading",
+          children: status === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }),
+            "Sending..."
+          ] }) : submitLabel
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+export { ContactBlock };

package/dist/chunk-UGV45DH3.js

@@ -0,0 +1,18 @@
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx } from 'react/jsx-runtime';
+
+function NativeSelect({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      ref,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-border bg-surface px-4 py-1.5 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 text-text-primary appearance-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { NativeSelect };

package/dist/chunk-VBZQ4DBE.js

@@ -0,0 +1,52 @@
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-WI547C47.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import Image from 'next/image';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultMembers = [
+  {
+    name: "M\xE9schac Irung",
+    role: "Creator",
+    avatar: "https://avatars.githubusercontent.com/u/47919550?v=4"
+  },
+  {
+    name: "Th\xE9o Balick",
+    role: "Frontend Dev",
+    avatar: "https://avatars.githubusercontent.com/u/68236786?v=4"
+  },
+  {
+    name: "Glodie Lukose",
+    role: "Frontend Dev",
+    avatar: "https://avatars.githubusercontent.com/u/99137927?v=4"
+  },
+  {
+    name: "Bernard Ngandu",
+    role: "Backend Dev",
+    avatar: "https://avatars.githubusercontent.com/u/31113941?v=4"
+  }
+];
+var defaultSections = [
+  { heading: "Leadership", members: defaultMembers },
+  { heading: "Engineering", members: defaultMembers },
+  { heading: "Marketing", members: defaultMembers }
+];
+function TeamBlock({
+  title = "Our team",
+  sections = defaultSections,
+  className
+}) {
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("section", { className: className ?? "py-12 md:py-32", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl px-8 lg:px-0", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 2, size: "display", className: "mb-8 md:mb-16", children: title }),
+    sections.map((section, sIdx) => /* @__PURE__ */ jsxs("div", { className: sIdx > 0 ? "mt-6" : void 0, children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "eyebrow", className: "mb-6", children: section.heading }),
+      /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 80, className: "grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4", children: section.members.map((member, index) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-background size-20 rounded-full border p-0.5 shadow shadow-sm", children: /* @__PURE__ */ jsx(Image, { className: "aspect-square rounded-full object-cover", src: member.avatar, alt: member.name, height: 460, width: 460 }) }),
+        /* @__PURE__ */ jsx("span", { className: "mt-2 block text-sm truncate", children: member.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-text-tertiary block text-xs truncate", children: member.role })
+      ] }, index)) })
+    ] }, section.heading))
+  ] }) }) });
+}
+
+export { TeamBlock };

package/dist/{chunk-LQLFA2EL.js → chunk-VDONTZZX.js}

@@ -39,7 +39,7 @@ var defaultConfig = {
     color: "rgb(var(--chart-1))"
   }
 };
-function HeatmapBlock({
+function HeatmapChartBlock({
   data = defaultData,
   config = defaultConfig,
   title = "User Activity Heatmap",
@@ -62,4 +62,4 @@ function HeatmapBlock({
   ] });
 }
 
-export { HeatmapBlock };
+export { HeatmapChartBlock };

package/dist/chunk-VEO56RH4.js

@@ -0,0 +1,105 @@
+import { Heading } from './chunk-WI547C47.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { PlusIcon } from './chunk-E7RBK6ML.js';
+import { WrenchIcon } from './chunk-AWIJHDNK.js';
+import { RefreshCWIcon } from './chunk-Q7LVUGFL.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var typeConfig = {
+  added: {
+    icon: /* @__PURE__ */ jsx(PlusIcon, { size: 12 }),
+    label: "Added",
+    color: "text-success bg-success/10"
+  },
+  fixed: {
+    icon: /* @__PURE__ */ jsx(WrenchIcon, { size: 12 }),
+    label: "Fixed",
+    color: "text-info bg-info/10"
+  },
+  changed: {
+    icon: /* @__PURE__ */ jsx(RefreshCWIcon, { size: 12 }),
+    label: "Changed",
+    color: "text-warning bg-warning/10"
+  }
+};
+var defaultEntries = [
+  {
+    version: "2.1.0",
+    date: "Feb 9, 2026",
+    changes: [
+      { type: "added", text: "ScrollFadeIn, MeteorShower, and AuroraEffect animation components" },
+      { type: "added", text: "FAQ, Comparison, Contact, and Newsletter blocks" },
+      { type: "changed", text: "Upgraded motion library to v12 with new easing tokens" }
+    ]
+  },
+  {
+    version: "2.0.0",
+    date: "Feb 1, 2026",
+    changes: [
+      { type: "added", text: "Arctic Glow palette replacing Synthetic Coral" },
+      { type: "added", text: "Light and dark theme support via CSS custom properties" },
+      { type: "fixed", text: "WCAG contrast ratios for all semantic colors" },
+      { type: "changed", text: "Migrated from Tailwind CSS 3 to 4" }
+    ]
+  },
+  {
+    version: "1.5.0",
+    date: "Jan 15, 2026",
+    changes: [
+      { type: "added", text: "Dashboard page with chart collection" },
+      { type: "fixed", text: "Dialog focus trap on mobile Safari" }
+    ]
+  }
+];
+function ChangelogBlock({
+  entries = defaultEntries,
+  title = "Changelog",
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl px-6", children: [
+    !!title && /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "mb-12 text-text-primary", children: title }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-2 bottom-0 w-px bg-border" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-12", children: entries.map((entry, entryIndex) => /* @__PURE__ */ jsx(ScrollFadeIn, { delay: entryIndex * 0.08, children: /* @__PURE__ */ jsxs("div", { className: "relative flex gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full glass-panel", children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 mb-4", children: [
+            /* @__PURE__ */ jsxs(Badge, { variant: "primary", className: "font-mono text-xs", children: [
+              "v",
+              entry.version
+            ] }),
+            entryIndex === 0 && /* @__PURE__ */ jsx(Badge, { variant: "accent", className: "text-[10px]", children: "Latest" }),
+            /* @__PURE__ */ jsx("time", { className: "text-xs text-text-tertiary", children: entry.date })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: entry.changes.map((change, changeIndex) => {
+            const config = typeConfig[change.type];
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "flex items-start gap-2 text-sm text-text-secondary",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded",
+                        config.color
+                      ),
+                      children: config.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: change.text })
+                ]
+              },
+              changeIndex
+            );
+          }) })
+        ] })
+      ] }) }, entry.version)) })
+    ] })
+  ] }) });
+}
+
+export { ChangelogBlock };

package/dist/chunk-VJ5VD4UT.js

@@ -0,0 +1,91 @@
+import { useRef, useCallback, useSyncExternalStore, useEffect } from 'react';
+import { useStickToBottom } from 'use-stick-to-bottom';
+
+// src/hooks/use-scroll-to-bottom.ts
+var AT_BOTTOM_THRESHOLD_PX = 100;
+var USER_SCROLL_DEBOUNCE_MS = 150;
+var SERVER_SNAPSHOT = true;
+function useScrollToBottom() {
+  const {
+    scrollRef,
+    contentRef,
+    scrollToBottom: stbScrollToBottom
+  } = useStickToBottom({
+    resize: "smooth",
+    initial: "smooth"
+  });
+  const endRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  const isUserScrollingRef = useRef(false);
+  const checkIfAtBottom = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return true;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    return scrollTop + clientHeight >= scrollHeight - AT_BOTTOM_THRESHOLD_PX;
+  }, [scrollRef]);
+  const subscribe = useCallback((onStoreChange) => {
+    const container = scrollRef.current;
+    if (!container) return () => {
+    };
+    isAtBottomRef.current = checkIfAtBottom();
+    let scrollTimeout;
+    function handleScroll() {
+      isUserScrollingRef.current = true;
+      clearTimeout(scrollTimeout);
+      isAtBottomRef.current = checkIfAtBottom();
+      scrollTimeout = setTimeout(() => {
+        isUserScrollingRef.current = false;
+      }, USER_SCROLL_DEBOUNCE_MS);
+      onStoreChange();
+    }
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      clearTimeout(scrollTimeout);
+    };
+  }, [checkIfAtBottom, scrollRef]);
+  const getServerSnapshot = useCallback(() => SERVER_SNAPSHOT, []);
+  const isAtBottom = useSyncExternalStore(subscribe, checkIfAtBottom, getServerSnapshot);
+  const scrollToBottom = useCallback(
+    (behavior = "smooth") => {
+      stbScrollToBottom(behavior);
+    },
+    [stbScrollToBottom]
+  );
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    function scrollIfNeeded() {
+      if (isAtBottomRef.current && !isUserScrollingRef.current) {
+        requestAnimationFrame(() => {
+          stbScrollToBottom("instant");
+          isAtBottomRef.current = true;
+        });
+      }
+    }
+    const mutationObserver = new MutationObserver(scrollIfNeeded);
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    const resizeObserver = new ResizeObserver(scrollIfNeeded);
+    resizeObserver.observe(container);
+    for (const child of container.children) {
+      resizeObserver.observe(child);
+    }
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [scrollRef, stbScrollToBottom]);
+  return {
+    containerRef: scrollRef,
+    contentRef,
+    endRef,
+    isAtBottom,
+    scrollToBottom
+  };
+}
+
+export { useScrollToBottom };

package/dist/{chunk-RWNJ54CI.js → chunk-VN475YZS.js}

@@ -1,4 +1,4 @@
-import { getShaderPreset } from './chunk-DF47R6LN.js';
+import { getShaderPreset } from './chunk-AWIG4QN6.js';
 import { useTheme } from './chunk-HJC6U46F.js';
 import { useMemo } from 'react';
 

package/dist/chunk-VNNAL4A6.js

@@ -0,0 +1,110 @@
+import { Shine } from './chunk-DARC2ACH.js';
+import { CountingNumber } from './chunk-F3T2U7YL.js';
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Switch } from './chunk-R7N7YLFT.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultPlans = [
+  {
+    name: "Starter",
+    description: "Perfect for hobbyists and side projects.",
+    price: "$0",
+    period: "/forever",
+    features: ["1,000 requests/mo", "Community support", "1 project", "Basic analytics"],
+    action: "Get Started",
+    variant: "outline"
+  },
+  {
+    name: "Pro",
+    description: "For professional developers and small teams.",
+    price: (isYearly) => isYearly ? "$29" : "$39",
+    period: "/month",
+    features: ["100,000 requests/mo", "Priority support", "Unlimited projects", "Advanced analytics", "Custom domains"],
+    action: "Upgrade to Pro",
+    variant: "accent",
+    popular: true
+  },
+  {
+    name: "Enterprise",
+    description: "Custom solutions for large organizations.",
+    price: "Custom",
+    period: "",
+    features: ["Unlimited requests", "24/7 Dedicated support", "SSO & Audit logs", "SLA guarantees", "On-premise deployment"],
+    action: "Contact Sales",
+    variant: "outline"
+  }
+];
+function resolvePrice(price, isYearly) {
+  return typeof price === "function" ? price(isYearly) : price;
+}
+function PricingBlock({
+  title = "Simple, transparent pricing",
+  description = "Choose the plan that's right for you. Change or cancel anytime.",
+  plans = defaultPlans,
+  showBillingToggle = true,
+  className
+}) {
+  const t = useTranslations("blocks.pricingBlock");
+  const [isYearly, setIsYearly] = useState(false);
+  return /* @__PURE__ */ jsx("section", { className: className ?? "py-16 md:py-24", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "mb-4 sm:text-4xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mb-8 text-lg text-text-secondary", children: description }),
+      !!showBillingToggle && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", !isYearly ? "text-text-primary" : "text-text-tertiary"), children: t("monthly") }),
+        /* @__PURE__ */ jsx(Switch, { checked: isYearly, onCheckedChange: setIsYearly, "aria-label": t("toggleYearlyBilling") }),
+        /* @__PURE__ */ jsxs("span", { className: cn("text-sm font-medium", isYearly ? "text-text-primary" : "text-text-tertiary"), children: [
+          t("yearly"),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-accent", children: t("savePercent") })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 120, className: "grid gap-8 md:grid-cols-3", children: plans.map((plan) => {
+      const priceStr = resolvePrice(plan.price, isYearly);
+      const card = /* @__PURE__ */ jsxs(
+        Card,
+        {
+          interactive: true,
+          className: cn(
+            "flex flex-col relative overflow-hidden transition-all duration-300",
+            plan.popular ? "border-accent shadow-lg shadow-accent/5 z-10" : "border-border/50 hover:border-border"
+          ),
+          children: [
+            plan.popular && /* @__PURE__ */ jsx("div", { className: "absolute -top-4 left-0 ring-0 w-full flex justify-center", children: /* @__PURE__ */ jsx(Badge, { variant: "accent", className: "shadow-lg", children: t("mostPopular") }) }),
+            /* @__PURE__ */ jsxs(CardHeader, { className: "pb-8 pt-8", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-xl font-semibold text-text-primary", children: plan.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: plan.description })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-8 flex items-baseline", children: [
+                priceStr === "Custom" ? /* @__PURE__ */ jsx("span", { className: "text-4xl font-extrabold text-text-primary", children: priceStr }) : /* @__PURE__ */ jsxs("span", { className: "text-4xl font-extrabold text-text-primary tabular-nums", children: [
+                  "$",
+                  /* @__PURE__ */ jsx(CountingNumber, { number: parseInt(priceStr.slice(1), 10), inViewOnce: true })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-text-tertiary", children: plan.period })
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-4 text-sm text-text-secondary", children: [
+                /* @__PURE__ */ jsx("div", { className: cn("flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary"), children: /* @__PURE__ */ jsx(CheckIcon, { size: 12 }) }),
+                feature
+              ] }, feature)) })
+            ] }),
+            /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: plan.variant, children: plan.action }) })
+          ]
+        },
+        plan.name
+      );
+      return plan.popular ? /* @__PURE__ */ jsx(Shine, { enable: true, loop: true, loopDelay: 3e3, color: "var(--color-accent)", opacity: 0.12, duration: 1500, children: card }, plan.name) : /* @__PURE__ */ jsx("div", { children: card }, plan.name);
+    }) })
+  ] }) });
+}
+
+export { PricingBlock };