@vadimcomanescu/nadicode-design-system 5.0.2 → 6.0.1

package/dist/chunk-ACIJEUAH.js

@@ -0,0 +1,213 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { RoleBadge } from './chunk-OHCQPI3W.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem } from './chunk-ETS5O4ZQ.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-4TF4QFIM.js';
+import { Skeleton } from './chunk-RASEB2XI.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
+import { PlusIcon } from './chunk-E7RBK6ML.js';
+import { SearchIcon } from './chunk-T6BRD7TS.js';
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useBoundProp } from '@json-render/react';
+import { useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ROLES = ["owner", "admin", "member", "guest"];
+var DEFAULT_MEMBERS = [
+  { id: "dm-1", name: "Sofia Reyes", email: "sofia@acme.com", role: "owner", avatar: null, joinedAt: "2025-06-01T00:00:00Z", status: "active" },
+  { id: "dm-2", name: "Marcus Chen", email: "marcus@acme.com", role: "admin", avatar: null, joinedAt: "2025-08-15T00:00:00Z", status: "active" },
+  { id: "dm-3", name: "Aisha Patel", email: "aisha@acme.com", role: "member", avatar: null, joinedAt: "2025-11-20T00:00:00Z", status: "active" },
+  { id: "dm-4", name: "Jordan Lee", email: "jordan@acme.com", role: "guest", avatar: null, joinedAt: null, status: "pending" }
+];
+function deriveState(state, members) {
+  if (state) return state;
+  if (members.length === 0) return "empty";
+  return "has-data";
+}
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+var STATUS_LABELS = {
+  active: "Active",
+  pending: "Pending",
+  deactivated: "Deactivated"
+};
+function StatusBadge({ status }) {
+  if (!status || status === "active") return null;
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: "outline",
+      className: cn(
+        status === "pending" && "border-warning/40 text-warning",
+        status === "deactivated" && "border-destructive/40 text-destructive/80"
+      ),
+      children: STATUS_LABELS[status] ?? status
+    }
+  );
+}
+function TeamManagementBlock({
+  props,
+  emit,
+  bindings
+}) {
+  const members = props.members ?? DEFAULT_MEMBERS;
+  const title = props.title ?? "Team Members";
+  const description = props.description;
+  const errorMessage = props.errorMessage;
+  const className = props.className;
+  const [, setBoundSearchQuery] = useBoundProp(
+    props.searchQuery,
+    bindings?.searchQuery
+  );
+  const [localSearchQuery, setLocalSearchQuery] = useState("");
+  const isBoundSearch = !!bindings?.searchQuery;
+  const searchQuery = isBoundSearch ? props.searchQuery ?? "" : localSearchQuery;
+  const setSearchQuery = isBoundSearch ? setBoundSearchQuery : setLocalSearchQuery;
+  const [, setBoundSelectedMemberId] = useBoundProp(
+    props.selectedMemberId,
+    bindings?.selectedMemberId
+  );
+  const [, setBoundSelectedRole] = useBoundProp(
+    props.selectedRole,
+    bindings?.selectedRole
+  );
+  const resolvedState = deriveState(props.state, members);
+  const filteredMembers = useMemo(() => {
+    if (!searchQuery.trim()) return members;
+    const q = searchQuery.toLowerCase();
+    return members.filter(
+      (m) => m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q) || m.role.toLowerCase().includes(q)
+    );
+  }, [members, searchQuery]);
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
+        description ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: () => emit("invite"),
+          "aria-label": "Invite member",
+          children: [
+            /* @__PURE__ */ jsx(PlusIcon, { size: 16, className: "mr-2" }),
+            "Invite"
+          ]
+        }
+      )
+    ] }),
+    resolvedState !== "loading" && resolvedState !== "error" && members.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(SearchIcon, { size: 16, className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": "Search members",
+          placeholder: "Search by name, email, or role...",
+          value: searchQuery,
+          className: "pl-9",
+          onChange: (e) => {
+            setSearchQuery(e.target.value);
+            emit("searchChange");
+          }
+        }
+      )
+    ] }) : null,
+    resolvedState === "loading" ? /* @__PURE__ */ jsx("div", { className: "space-y-3", "aria-label": "Loading team members", children: Array.from({ length: 3 }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border border-border p-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-full" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-48" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-16" })
+    ] }, i)) }) : null,
+    resolvedState === "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: errorMessage ?? "Unable to load team members. Please try again."
+      }
+    ) : null,
+    resolvedState === "empty" || resolvedState === "has-data" && filteredMembers.length === 0 ? /* @__PURE__ */ jsxs(Empty, { children: [
+      /* @__PURE__ */ jsx(UsersIcon, { size: 40, className: "text-text-tertiary" }),
+      /* @__PURE__ */ jsx(EmptyTitle, { children: searchQuery.trim() ? "No members found" : "No team members" }),
+      /* @__PURE__ */ jsx(EmptyDescription, { children: searchQuery.trim() ? "Try a different search term." : "Invite your first team member to get started." })
+    ] }) : null,
+    resolvedState === "has-data" && filteredMembers.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border rounded-lg border border-border", role: "list", children: filteredMembers.map((member) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center gap-4 px-4 py-3",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10", children: [
+            member.avatar ? /* @__PURE__ */ jsx(AvatarImage, { src: member.avatar, alt: member.name }) : null,
+            /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(member.name) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium truncate", children: member.name }),
+            /* @__PURE__ */ jsx(Typography, { variant: "muted", className: "truncate text-xs", children: member.email })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 sm:flex", children: [
+            /* @__PURE__ */ jsx(StatusBadge, { status: member.status }),
+            /* @__PURE__ */ jsx(RoleBadge, { role: member.role })
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                "aria-label": `Actions for ${member.name}`,
+                children: /* @__PURE__ */ jsx(EllipsisIcon, { size: 16 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Actions" }),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { children: "Change role" }),
+                /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: ROLES.map((role) => /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    disabled: role === member.role,
+                    onClick: () => {
+                      setBoundSelectedMemberId(member.id);
+                      setBoundSelectedRole(role);
+                      emit("roleChange");
+                    },
+                    children: [
+                      role.charAt(0).toUpperCase() + role.slice(1),
+                      role === member.role ? " (current)" : ""
+                    ]
+                  },
+                  role
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  className: "text-destructive focus:text-destructive",
+                  onClick: () => {
+                    setBoundSelectedMemberId(member.id);
+                    emit("removeMember");
+                  },
+                  children: "Remove member"
+                }
+              )
+            ] })
+          ] })
+        ]
+      },
+      member.id
+    )) }) : null
+  ] });
+}
+
+export { TeamManagementBlock };

package/dist/{chunk-PD6WW7E5.js → chunk-BRESMZ6G.js}

@@ -1,7 +1,6 @@
 import { CountingNumber } from './chunk-F3T2U7YL.js';
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
 import { Heading } from './chunk-UXX6HHPS.js';
-import { siteConfig } from './chunk-A7NUWD76.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var defaultStats = [
@@ -9,11 +8,9 @@ var defaultStats = [
   { value: 22, label: "Active Users", suffix: " Million", prefix: null },
   { value: 500, label: "Powered Apps", prefix: "+", suffix: null }
 ];
-var defaultTitle = `${siteConfig.name} in numbers`;
-var defaultDescription = `The numbers speak for themselves. ${siteConfig.name} powers the next generation of AI interfaces with premium design tokens, glass effects, and accessible components.`;
 function StatsMarketingBlock({ props }) {
-  const title = props.title ?? defaultTitle;
-  const description = props.description ?? defaultDescription;
+  const title = props.title ?? "Your Platform in numbers";
+  const description = props.description ?? "The numbers speak for themselves. Premium design tokens, glass effects, and accessible components powering the next generation of interfaces.";
   const stats = props.stats ?? defaultStats;
   return /* @__PURE__ */ jsx("section", { className: "py-12 md:py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl space-y-8 px-6 md:space-y-16", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-auto max-w-xl space-y-6 text-center", children: [

package/dist/{chunk-Q4CRHV5T.js → chunk-BVOJIX27.js}

@@ -1,6 +1,5 @@
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
 import { Heading } from './chunk-UXX6HHPS.js';
-import { siteConfig } from './chunk-A7NUWD76.js';
 import { Separator } from './chunk-CUZJIDU7.js';
 import { Input } from './chunk-AP3XXYAY.js';
 import { ScrollFadeIn } from './chunk-I23DDSU7.js';
@@ -8,8 +7,10 @@ import { Button } from './chunk-7KIDDF3I.js';
 import { TwitterIcon } from './chunk-LCDDAE7J.js';
 import { LinkedinIcon } from './chunk-2IZC7HSV.js';
 import { GithubIcon } from './chunk-WGPK3FQ7.js';
+import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { useBoundProp } from '@json-render/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var CURRENT_YEAR = (/* @__PURE__ */ new Date()).getFullYear();
@@ -18,19 +19,41 @@ var SOCIAL_ICON_MAP = {
   github: { icon: /* @__PURE__ */ jsx(GithubIcon, { size: 16 }), label: "GitHub" },
   linkedin: { icon: /* @__PURE__ */ jsx(LinkedinIcon, { size: 16 }), label: "LinkedIn" }
 };
+var defaultProductLinks = [
+  { name: "Components", href: "#" },
+  { name: "Blocks", href: "#" },
+  { name: "Themes", href: "#" },
+  { name: "Showcase", href: "#" }
+];
+var defaultCompanyLinks = [
+  { name: "About", href: "#" },
+  { name: "Blog", href: "#" },
+  { name: "Careers", href: "#" },
+  { name: "Contact", href: "#" }
+];
+var defaultLegalLinks = [
+  { name: "Privacy", href: "#" },
+  { name: "Terms", href: "#" },
+  { name: "License", href: "#" }
+];
 var defaultSocialLinks = [
   { platform: "twitter", href: "#" },
   { platform: "github", href: "#" },
   { platform: "linkedin", href: "#" }
 ];
-function FooterBlock({ props }) {
-  const brandName = props.brandName ?? siteConfig.name;
+function FooterBlock({ props, bindings, emit }) {
+  const brandName = props.brandName ?? "Your Brand";
   const brandDescription = props.brandDescription ?? "The ultimate design system for building futuristic, high-contrast AI interfaces.";
   const newsletterPlaceholder = props.newsletterPlaceholder ?? "Enter your email";
-  const productLinks = props.productLinks ?? siteConfig.nav.footer.product;
-  const companyLinks = props.companyLinks ?? siteConfig.nav.footer.company;
-  const legalLinks = props.legalLinks ?? siteConfig.nav.footer.legal;
+  const productLinks = props.productLinks ?? defaultProductLinks;
+  const companyLinks = props.companyLinks ?? defaultCompanyLinks;
+  const legalLinks = props.legalLinks ?? defaultLegalLinks;
   const socialLinks = props.socialLinks ?? defaultSocialLinks;
+  const [boundEmail, setBoundEmail] = useBoundProp(props.email, bindings?.email);
+  const [localEmail, setLocalEmail] = useState("");
+  const isEmailBound = !!bindings?.email;
+  const newsletterEmail = isEmailBound ? boundEmail ?? "" : localEmail;
+  const setNewsletterEmail = isEmailBound ? setBoundEmail : setLocalEmail;
   const t = useTranslations("blocks.footerBlock");
   return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("footer", { className: "bg-background py-12 lg:py-16 border-t border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
@@ -40,10 +63,32 @@ function FooterBlock({ props }) {
           /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-text-primary", children: brandName })
         ] }),
         /* @__PURE__ */ jsx("p", { className: "max-w-xs text-text-secondary", children: brandDescription }),
-        /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm flex-col gap-2 sm:flex-row", children: [
-          /* @__PURE__ */ jsx(Input, { placeholder: newsletterPlaceholder, type: "email", className: "bg-surface/50 border-border/50" }),
-          /* @__PURE__ */ jsx(Button, { variant: "primary", children: t("subscribe") })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: (e) => {
+              e.preventDefault();
+              if (!newsletterEmail.trim()) return;
+              emit("subscribe");
+            },
+            className: "flex max-w-sm flex-col gap-2 sm:flex-row",
+            children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  name: "email",
+                  placeholder: newsletterPlaceholder,
+                  type: "email",
+                  value: newsletterEmail,
+                  onChange: (e) => setNewsletterEmail(e.target.value),
+                  required: true,
+                  className: "bg-surface/50 border-border/50"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", children: t("subscribe") })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: 60, className: "grid grid-cols-2 gap-8 lg:col-span-2 sm:grid-cols-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [

package/dist/{chunk-PYRHNONA.js → chunk-CJDVIJEF.js}

@@ -1,4 +1,4 @@
-import { createAvatarDataUri, LOCAL_NIKE_LOGO_SRC } from './chunk-OWWQP3YW.js';
+import { createAvatarDataUri } from './chunk-4DQMGKPG.js';
 import { Shine } from './chunk-DARC2ACH.js';
 import { ShimmeringText } from './chunk-SGI25ZJ6.js';
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
@@ -42,6 +42,7 @@ function TestimonialsBlock({ props }) {
   const title = props.title ?? "Build by makers, loved by thousand developers";
   const description = props.description ?? "Gemini is evolving to be more than just the models. It supports an entire to the APIs and platforms helping developers and businesses innovate.";
   const testimonials = props.testimonials ?? defaultTestimonials;
+  const featuredCompanyLogo = props.featuredCompanyLogo ?? null;
   const featured = React.useMemo(() => testimonials.find((t) => t.featured) ?? testimonials[0], [testimonials]);
   const rest = React.useMemo(() => testimonials.filter((t) => t !== featured), [testimonials, featured]);
   return /* @__PURE__ */ jsx("section", { className: "py-16 md:py-32", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl space-y-8 px-6 md:space-y-16", children: [
@@ -59,16 +60,16 @@ function TestimonialsBlock({ props }) {
     ] }),
     /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: 80, direction: "up", distance: 16, className: "grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2", children: [
       !!featured && /* @__PURE__ */ jsx(Shine, { enableOnHover: true, loop: true, loopDelay: 200, color: "var(--color-accent)", opacity: 0.12, className: "sm:col-span-2 lg:row-span-2", children: /* @__PURE__ */ jsxs(Card, { className: "grid grid-rows-[auto_1fr] gap-8 h-full sm:p-6", children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(
+        featuredCompanyLogo ? /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(
           "img",
           {
             className: "h-6 w-fit dark:invert",
-            src: LOCAL_NIKE_LOGO_SRC,
-            alt: "Nike Logo",
+            src: featuredCompanyLogo,
+            alt: "Company Logo",
             height: "24",
             width: "auto"
           }
-        ) }),
+        ) }) : null,
         /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("blockquote", { className: "grid h-full grid-rows-[1fr_auto] gap-6", children: [
           /* @__PURE__ */ jsx("p", { className: "text-xl font-medium", children: featured.quote }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-center gap-4", children: [

package/dist/{chunk-FSU7ZM5V.js → chunk-CJT7SZNI.js}

@@ -3,10 +3,10 @@ import { Typography } from './chunk-Q7PCHHVJ.js';
 import { Spinner } from './chunk-ZLSWCV55.js';
 import { Heading } from './chunk-UXX6HHPS.js';
 import { Input } from './chunk-AP3XXYAY.js';
-import { useSafeTimeout } from './chunk-MDAYDDTC.js';
 import { ScrollFadeIn } from './chunk-I23DDSU7.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { Alert, AlertDescription } from './chunk-6CLSVCWP.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { useState } from 'react';
 import { useBoundProp } from '@json-render/react';
@@ -15,30 +15,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function NewsletterBlock({ props, bindings, emit }) {
   const title = props.title ?? "Stay in the loop";
   const description = props.description ?? "Get notified about new components, updates, and design system tips. No spam.";
+  const state = props.state ?? "idle";
+  const error = props.error ?? null;
   const [boundEmail, setBoundEmail] = useBoundProp(props.email, bindings?.email);
   const [localEmail, setLocalEmail] = useState("");
   const isEmailBound = !!bindings?.email;
   const email = isEmailBound ? boundEmail ?? "" : localEmail;
   const setEmail = isEmailBound ? setBoundEmail : setLocalEmail;
-  const [status, setStatus] = useState("idle");
-  const setSafeTimeout = useSafeTimeout();
-  const handleSubmit = async (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
     if (!email.trim()) return;
-    setStatus("loading");
     emit("subscribe");
-    setSafeTimeout(() => {
-      setStatus("success");
-      setSafeTimeout(() => {
-        setStatus("idle");
-        setEmail("");
-      }, 3e3);
-    }, 600);
   };
   return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24"), children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-xl px-6", children: /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx(Shine, { enableOnHover: true, loop: true, loopDelay: 300, color: "var(--color-accent)", opacity: 0.1, children: /* @__PURE__ */ jsxs("div", { className: "glass-panel rounded-2xl border border-border/50 p-8 text-center sm:p-12", children: [
     /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-text-primary", children: title }),
     /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-4 text-text-secondary", children: description }),
-    status === "success" ? /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center justify-center gap-2 text-success", children: [
+    state === "success" ? /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center justify-center gap-2 text-success", children: [
       /* @__PURE__ */ jsx(CheckIcon, { size: 20 }),
       /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
         "You",
@@ -68,14 +60,15 @@ function NewsletterBlock({ props, bindings, emit }) {
             {
               type: "submit",
               variant: "accent",
-              disabled: status === "loading",
+              disabled: state === "loading",
               className: "shrink-0",
-              children: status === "loading" ? /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }) : "Subscribe"
+              children: state === "loading" ? /* @__PURE__ */ jsx(Spinner, { className: "h-4 w-4" }) : "Subscribe"
             }
           )
         ]
       }
     ),
+    !!error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", className: "mt-4", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
     /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-4 text-text-tertiary", children: "Unsubscribe anytime. We respect your inbox." })
   ] }) }) }) }) });
 }

package/dist/{chunk-PQBVNNEG.js → chunk-DEILZQEX.js}

@@ -9,6 +9,7 @@ import { CheckIcon } from './chunk-CXACRCZ4.js';
 import { Badge } from './chunk-S4JAHKOP.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { useTranslations } from 'next-intl';
+import { useBoundProp } from '@json-render/react';
 import { useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -47,13 +48,18 @@ var defaultPlans = [
     badge: null
   }
 ];
-function PricingBlock({ props, emit }) {
+function PricingBlock({ props, emit, bindings }) {
   const title = props.title ?? "Simple, transparent pricing";
   const description = props.description ?? "Choose the plan that's right for you. Change or cancel anytime.";
   const plans = props.plans ?? defaultPlans;
   const showBillingToggle = props.showBillingToggle ?? true;
   const t = useTranslations("blocks.pricingBlock");
-  const [isYearly, setIsYearly] = useState(false);
+  const [, setBoundSelectedPlanName] = useBoundProp(props.selectedPlanName, bindings?.selectedPlanName);
+  const [, setBoundIsYearly] = useBoundProp(props.isYearly, bindings?.isYearly);
+  const [localIsYearly, setLocalIsYearly] = useState(false);
+  const isYearlyBound = !!bindings?.isYearly;
+  const isYearly = isYearlyBound ? props.isYearly ?? false : localIsYearly;
+  const setIsYearly = isYearlyBound ? setBoundIsYearly : setLocalIsYearly;
   return /* @__PURE__ */ jsx("section", { 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 }),
@@ -97,7 +103,10 @@ function PricingBlock({ props, emit }) {
                 feature
               ] }, feature)) })
             ] }),
-            /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: plan.variant, onClick: () => emit("selectPlan"), children: plan.action }) })
+            /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: plan.variant, onClick: () => {
+              setBoundSelectedPlanName(plan.name);
+              emit("selectPlan");
+            }, children: plan.action }) })
           ]
         },
         plan.name

package/dist/chunk-DORWHCRI.js

@@ -0,0 +1,112 @@
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from './chunk-UN2SJ42K.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-7UY24UWL.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Alert, AlertDescription } from './chunk-6CLSVCWP.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useBoundProp } from '@json-render/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var profileFormSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters."
+  }).max(30, {
+    message: "Username must not be longer than 30 characters."
+  }),
+  email: z.string({
+    error: "Please select an email to display."
+  }).email(),
+  bio: z.string().max(160).min(4)
+});
+var defaultFormValues = {
+  bio: "I own a computer."
+};
+var DEFAULT_EMAIL_OPTIONS = [
+  { value: "user@example.com", label: "user@example.com" }
+];
+function CreateBlock({ props, emit, bindings }) {
+  const title = props.title ?? "Create Profile";
+  const description = props.description ?? "Example of a complex form with Zod validation.";
+  const submitLabel = props.submitLabel ?? "Update profile";
+  const state = props.state ?? "idle";
+  const error = props.error ?? null;
+  const emailOptions = props.emailOptions ?? DEFAULT_EMAIL_OPTIONS;
+  const [, setBoundUsername] = useBoundProp(props.username, bindings?.username);
+  const [, setBoundEmail] = useBoundProp(props.email, bindings?.email);
+  const [, setBoundBio] = useBoundProp(props.bio, bindings?.bio);
+  const form = useForm({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: {
+      ...defaultFormValues,
+      ...props.username ? { username: props.username } : {},
+      ...props.email ? { email: props.email } : {},
+      ...props.bio ? { bio: props.bio } : {}
+    },
+    mode: "onChange"
+  });
+  function handleSubmit(data) {
+    setBoundUsername(data.username);
+    setBoundEmail(data.email);
+    setBoundBio(data.bio);
+    emit("submit");
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      !!error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", className: "mb-4", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
+      /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 60, className: "space-y-8 text-text-primary", children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "contents", children: [
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "username",
+            render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+              /* @__PURE__ */ jsx(FormLabel, { children: "Username" }),
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: "shadcn", ...field }) }),
+              /* @__PURE__ */ jsx(FormDescription, { children: "Public display name." }),
+              /* @__PURE__ */ jsx(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "email",
+            render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+              /* @__PURE__ */ jsx(FormLabel, { children: "Email" }),
+              /* @__PURE__ */ jsxs(Select, { onValueChange: field.onChange, defaultValue: field.value, children: [
+                /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select email" }) }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: emailOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+              ] }),
+              /* @__PURE__ */ jsx(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormField,
+          {
+            control: form.control,
+            name: "bio",
+            render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+              /* @__PURE__ */ jsx(FormLabel, { children: "Bio" }),
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, { placeholder: "Bio...", ...field }) }),
+              /* @__PURE__ */ jsx(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: state === "submitting", children: state === "submitting" ? "Submitting..." : submitLabel })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+export { CreateBlock };