@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.1

package/dist/chunk-MOFWXBTK.js

@@ -0,0 +1,112 @@
+import { Skeleton } from './chunk-RASEB2XI.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-7UY24UWL.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { LoaderCircleIcon } from './chunk-BRP6D56U.js';
+import { Alert, AlertTitle, AlertDescription } from './chunk-6CLSVCWP.js';
+import { useMemo, useState } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function CheckoutFormInner({
+  returnUrl,
+  emit
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [message, setMessage] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setIsLoading(true);
+    setMessage(null);
+    const { error } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: `${window.location.origin}${returnUrl}`
+      }
+    });
+    if (error) {
+      const msg = error.type === "card_error" || error.type === "validation_error" ? error.message ?? "An unexpected error occurred." : "An unexpected error occurred.";
+      setMessage(msg);
+      emit("error");
+    } else {
+      emit("complete");
+    }
+    setIsLoading(false);
+  };
+  const handleReady = () => {
+    emit("ready");
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6", children: [
+      /* @__PURE__ */ jsx(PaymentElement, { id: "payment-element", options: { layout: "tabs" }, onReady: handleReady }),
+      !!message && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: message })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: isLoading || !stripe || !elements,
+        className: "w-full",
+        type: "submit",
+        children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(LoaderCircleIcon, { size: 16, className: "mr-2 animate-spin" }),
+          "Processing..."
+        ] }) : "Pay Now"
+      }
+    ) })
+  ] });
+}
+function CheckoutForm({
+  props,
+  emit
+}) {
+  const publishableKey = props.publishableKey;
+  const clientSecret = props.clientSecret;
+  const amount = props.amount ?? 2e3;
+  const currency = props.currency ?? "usd";
+  const returnUrl = props.returnUrl ?? "/settings/billing";
+  const appearance = props.appearance;
+  const stripePromise = useMemo(
+    () => loadStripe(publishableKey),
+    [publishableKey]
+  );
+  const elementsOptions = useMemo(() => ({
+    clientSecret,
+    ...appearance ? {
+      appearance: {
+        theme: appearance.theme ?? void 0,
+        variables: appearance.variables ?? void 0
+      }
+    } : {}
+  }), [clientSecret, appearance]);
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Payment Details" }),
+      /* @__PURE__ */ jsxs(CardDescription, { children: [
+        "Complete your purchase of $",
+        amount / 100,
+        " ",
+        currency.toUpperCase(),
+        "."
+      ] })
+    ] }),
+    clientSecret ? /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: /* @__PURE__ */ jsx(
+      CheckoutFormInner,
+      {
+        returnUrl,
+        emit
+      }
+    ) }) : /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary text-center", children: "Preparing payment form..." })
+    ] })
+  ] });
+}
+
+export { CheckoutForm };

package/dist/{chunk-X5AEOQAL.js → chunk-MZGGA75L.js}

@@ -1,8 +1,6 @@
-import { m } from './chunk-PD2YEH3H.js';
 import { cn } from './chunk-QYZT24TS.js';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { useReducedMotion, useMotionValue, useMotionTemplate } from 'motion/react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var CSS_ACCENT_095 = "rgb(var(--color-accent) / 0.95)";
@@ -97,42 +95,5 @@ function MouseGlow({
   }
   return element;
 }
-function MouseSpotlight({ children, className, color = "rgb(var(--color-text-primary) / 0.06)", size = 250, ref }) {
-  const prefersReduced = useReducedMotion();
-  const mouseX = useMotionValue(0);
-  const mouseY = useMotionValue(0);
-  const handleMouseMove = React.useCallback(
-    (e) => {
-      if (prefersReduced) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      mouseX.set(e.clientX - rect.left);
-      mouseY.set(e.clientY - rect.top);
-    },
-    [prefersReduced, mouseX, mouseY]
-  );
-  const bgImage = useMotionTemplate`radial-gradient(
-    ${size}px circle at ${mouseX}px ${mouseY}px,
-    ${color},
-    transparent 80%
-  )`;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      onMouseMove: handleMouseMove,
-      className: cn("group relative", className),
-      children: [
-        !prefersReduced && /* @__PURE__ */ jsx(
-          m.div,
-          {
-            className: "pointer-events-none absolute -inset-px rounded-xl opacity-0 transition duration-300 group-hover:opacity-100",
-            style: { background: bgImage }
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
 
-export { MouseGlow, MouseSpotlight };
+export { MouseGlow };

package/dist/chunk-N334RMNE.js

@@ -0,0 +1,39 @@
+import { CircleIcon } from './chunk-GCUTJI7M.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { jsx } from 'react/jsx-runtime';
+
+function RadioGroup({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid gap-2", className),
+      ...props,
+      ref
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "aspect-square h-4 w-4 rounded-full border border-border text-primary shadow transition-[border-color,box-shadow] duration-fast ease-out-cubic hover:border-accent/50 active:scale-95 focus:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 touch-target-44",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { size: 10, className: "fill-current text-current" }) })
+    }
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/dist/chunk-NBDUZA66.js

@@ -0,0 +1,235 @@
+import { STANDALONE_ROUTES } from './chunk-GC7QKZQW.js';
+
+// src/lib/json-render/showcase-spec.ts
+var ROUTE_COMPONENTS = {
+  "/landing": "PageShell",
+  "/login": "PageShell",
+  "/changelog": "PageShell",
+  "/dashboard": "DashboardBlock",
+  "/pricing": "PageShell",
+  "/onboarding": "OnboardingFlowBlock",
+  "/blog/example": "PageShell"
+};
+var ROUTE_TREES = {
+  "/login": {
+    root: "shell",
+    elements: {
+      shell: { type: "PageShell", props: { className: null }, children: ["auth"] },
+      auth: { type: "AuthLayout", props: { mode: "login", error: null, labels: null, className: null }, on: { submit: { action: "noop" } } }
+    }
+  },
+  "/dashboard": {
+    root: "root",
+    elements: {
+      root: {
+        type: "DashboardBlock",
+        props: {
+          title: null,
+          navItems: null,
+          recentSalesTitle: null,
+          recentSalesDescription: null,
+          transactionsTitle: null,
+          transactionsDescription: null,
+          className: null
+        },
+        on: { openSettings: { action: "noop" }, closeSettings: { action: "noop" } }
+      }
+    }
+  },
+  "/changelog": {
+    root: "shell",
+    elements: {
+      shell: { type: "PageShell", props: { className: null }, children: ["header", "changelog", "footer"] },
+      header: { type: "HeaderBlock", props: { menuItems: null, loginLabel: null, signUpLabel: null, loginHref: null, signUpHref: null } },
+      changelog: {
+        type: "ChangelogBlock",
+        props: {
+          heading: "What\u2019s new",
+          headingDescription: "All the latest updates, improvements, and fixes to the Nadicode design system.",
+          title: null,
+          entries: null
+        }
+      },
+      footer: { type: "FooterBlock", props: { brandName: null, brandDescription: null, newsletterPlaceholder: null, productLinks: null, companyLinks: null, legalLinks: null, socialLinks: null } }
+    }
+  },
+  "/landing": {
+    root: "shell",
+    elements: {
+      shell: { type: "PageShell", props: { className: null }, children: ["header", "hero", "logoCloud", "features", "stats", "pricing", "testimonials", "cta", "faq", "newsletter", "footer"] },
+      header: { type: "HeaderBlock", props: { menuItems: null, loginLabel: null, signUpLabel: null, loginHref: null, signUpHref: null } },
+      hero: { type: "HeroBlock", props: { variant: null, headline: null, subheadline: null, primaryAction: null, secondaryAction: null, announcement: null }, on: { primaryAction: { action: "noop" }, secondaryAction: { action: "noop" } } },
+      logoCloud: { type: "LogoCloud", props: { title: null, logos: null, className: null } },
+      features: { type: "FeatureBlock", props: { variant: null, badge: null, title: null, description: null, features: null } },
+      stats: { type: "StatsMarketingBlock", props: { title: null, description: null, stats: null } },
+      pricing: { type: "PricingBlock", props: { title: null, description: null, showBillingToggle: null, plans: null }, on: { selectPlan: { action: "noop" } } },
+      testimonials: { type: "TestimonialsBlock", props: { title: null, description: null, testimonials: null } },
+      cta: { type: "CallToActionBlock", props: { title: null, description: null, primaryAction: null, secondaryAction: null } },
+      faq: { type: "FAQBlock", props: { title: null, description: null, items: null }, on: { expand: { action: "noop" } } },
+      newsletter: { type: "NewsletterBlock", props: { title: null, description: null, email: null }, on: { subscribe: { action: "noop" } } },
+      footer: { type: "FooterBlock", props: { brandDescription: null, brandName: null, socialLinks: null, newsletterPlaceholder: null, productLinks: null, companyLinks: null, legalLinks: null } }
+    }
+  },
+  "/pricing": {
+    root: "shell",
+    elements: {
+      shell: { type: "PageShell", props: { className: null }, children: ["header", "pricing", "comparison", "faq", "footer"] },
+      header: { type: "HeaderBlock", props: { menuItems: null, loginLabel: null, signUpLabel: null, loginHref: null, signUpHref: null } },
+      pricing: {
+        type: "PricingBlock",
+        props: {
+          title: null,
+          description: null,
+          showBillingToggle: null,
+          plans: null
+        },
+        on: { selectPlan: { action: "noop" } }
+      },
+      comparison: {
+        type: "ComparisonBlock",
+        props: {
+          title: null,
+          description: null,
+          plans: null
+        }
+      },
+      faq: {
+        type: "FAQBlock",
+        props: {
+          title: "Pricing FAQ",
+          description: null,
+          items: [
+            { question: "Can I switch plans later?", answer: "Yes, you can upgrade or downgrade at any time. When upgrading, you\u2019ll be charged the prorated difference. Downgrades take effect at the end of your billing cycle." },
+            { question: "Do you offer refunds?", answer: "We offer a 14-day money-back guarantee on all paid plans. If you\u2019re not satisfied, contact support for a full refund." },
+            { question: "What payment methods do you accept?", answer: "We accept all major credit cards, PayPal, and wire transfers for Enterprise plans." },
+            { question: "Is there a free trial?", answer: "The Starter plan is free forever. For Pro, you can try all features for 14 days before committing." }
+          ]
+        },
+        on: { expand: { action: "noop" } }
+      },
+      footer: { type: "FooterBlock", props: { brandName: null, brandDescription: null, newsletterPlaceholder: null, productLinks: null, companyLinks: null, legalLinks: null, socialLinks: null } }
+    }
+  },
+  "/blog/example": {
+    root: "shell",
+    elements: {
+      shell: { type: "PageShell", props: { className: null }, children: ["header", "blog", "newsletter", "footer"] },
+      header: { type: "HeaderBlock", props: { menuItems: null, loginLabel: null, signUpLabel: null, loginHref: null, signUpHref: null } },
+      blog: {
+        type: "BlogDetailBlock",
+        on: { backToIndex: { action: "noop" } },
+        props: {
+          title: "Building a Token-Driven Design System with Tailwind CSS 4",
+          author: "Nadia",
+          authorFallback: "NA",
+          publishedAt: "Feb 9, 2026",
+          readTimeLabel: "8 min read",
+          tags: ["Design Systems", "Tutorial"],
+          heroImage: null,
+          excerpt: "How we built a centralized token architecture that powers both light and dark themes, keeps components consistent, and scales from startup to enterprise.",
+          className: "pt-32 pb-16 mx-auto max-w-3xl px-6",
+          backLabel: null,
+          bodyHtml: [
+            "<h2>The Problem with Scattered Tokens</h2>",
+            "<p>Most design systems start by defining colors directly in Tailwind\u2019s config. This works fine at first, but once you add dark mode, brand variants, or multiple products, you end up with duplicated values scattered across config files, CSS, and component code.</p>",
+            "<p>Our approach uses a single JavaScript file as the source of truth. Every color, spacing value, and shadow is defined once and flows through the system automatically.</p>",
+            "<h2>The Three-File Architecture</h2>",
+            "<p>The token system follows a linear flow: definition, CSS generation, and Tailwind integration. Here\u2019s how the three files work together:</p>",
+            "<pre><code>tokens.config.js  \u2192 Master definitions (JS object)\nindex.css          \u2192 CSS custom properties (:root / .dark)\ntailwind.config.js \u2192 Theme extension via CSS var references</code></pre>",
+            "<h3>Step 1: Define tokens in plain JavaScript</h3>",
+            "<p>The config file exports a structured object with all design decisions. Colors use space-separated RGB values for Tailwind\u2019s opacity modifier syntax.</p>",
+            "<pre><code>export const colorTokens = {\n  dark: {\n    background: &quot;15 17 20&quot;,\n    surface: &quot;25 28 33&quot;,\n    primary: &quot;225 231 237&quot;,     // Arctic Glow gray.12\n    accent: &quot;10 158 111&quot;,        // Jade Vault accent\n    success: &quot;61 214 140&quot;,      // Green.9\n  },\n  light: {\n    background: &quot;251 252 253&quot;,\n    surface: &quot;240 243 246&quot;,\n    primary: &quot;26 34 48&quot;,        // Gray.12\n    accent: &quot;5 150 105&quot;,         // Jade Vault accent\n    success: &quot;27 148 80&quot;,       // Green.9\n  },\n}</code></pre>",
+            "<h3>Step 2: Generate CSS custom properties</h3>",
+            "<p>The CSS file maps tokens to custom properties. Light values go on :root, dark values activate when the .dark class is present.</p>",
+            "<pre><code>:root {\n  --background: 251 252 253;\n  --primary: 26 34 48;\n}\n\n.dark {\n  --background: 15 17 20;\n  --primary: 225 231 237;\n}</code></pre>",
+            "<h2>Results</h2>",
+            "<p>With this architecture, changing a brand color means editing one line in tokens.config.js. The change cascades through CSS variables to every component automatically. Dark mode is just a different set of values for the same variable names.</p>",
+            "<p>This pattern has scaled from 20 components to over 100, across light and dark themes, without a single hardcoded color value in component code.</p>"
+          ].join("\n")
+        }
+      },
+      newsletter: {
+        type: "NewsletterBlock",
+        props: {
+          title: "Enjoyed this article?",
+          description: "Get more design system insights delivered to your inbox.",
+          email: null
+        },
+        on: { subscribe: { action: "noop" } }
+      },
+      footer: { type: "FooterBlock", props: { brandName: null, brandDescription: null, newsletterPlaceholder: null, productLinks: null, companyLinks: null, legalLinks: null, socialLinks: null } }
+    }
+  },
+  "/onboarding": {
+    root: "root",
+    elements: {
+      root: {
+        type: "OnboardingFlowBlock",
+        props: {
+          heading: null,
+          subheading: null,
+          completionHeading: null,
+          completionDescription: null,
+          completionButtonLabel: null,
+          welcomeStepTitle: null,
+          welcomeStepDescription: null,
+          welcomeHeading: null,
+          welcomeBody: null,
+          profileStepTitle: null,
+          profileStepDescription: null,
+          displayNameLabel: null,
+          displayNamePlaceholder: null,
+          organizationLabel: null,
+          organizationPlaceholder: null,
+          bioLabel: null,
+          bioPlaceholder: null,
+          preferencesStepTitle: null,
+          preferencesStepDescription: null,
+          frameworkLabel: null,
+          frameworkPlaceholder: null,
+          frameworkOptions: null,
+          teamSizeLabel: null,
+          teamSizePlaceholder: null,
+          teamSizeOptions: null,
+          useCaseLabel: null,
+          useCasePlaceholder: null,
+          useCaseOptions: null,
+          reviewStepTitle: null,
+          reviewHeading: null,
+          reviewBody: null,
+          displayName: null,
+          organization: null,
+          bio: null,
+          framework: null,
+          teamSize: null,
+          useCase: null
+        },
+        on: { complete: { action: "noop" } }
+      }
+    }
+  }
+};
+function buildRoutes() {
+  const routes = {};
+  for (const route of STANDALONE_ROUTES) {
+    const componentType = ROUTE_COMPONENTS[route.path];
+    if (!componentType) throw new Error(`No component registered for route ${route.path}`);
+    const tree = ROUTE_TREES[route.path];
+    routes[route.path] = {
+      metadata: {
+        title: route.title,
+        ...route.description && { description: route.description }
+      },
+      page: tree ?? {
+        root: "root",
+        elements: { root: { type: componentType, props: {} } }
+      }
+    };
+  }
+  return routes;
+}
+var showcaseSpec = {
+  routes: buildRoutes()
+};
+
+export { ROUTE_COMPONENTS, showcaseSpec };

package/dist/{chunk-Q3CKH7RH.js → chunk-NDQO7AO6.js}

@@ -1,4 +1,3 @@
-import { toast } from './chunk-5Y4BOIYO.js';
 import { Textarea } from './chunk-4OBE2FS2.js';
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
@@ -9,6 +8,7 @@ import { Button } from './chunk-7KIDDF3I.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({
@@ -25,29 +25,30 @@ var profileFormSchema = z.object({
 var defaultFormValues = {
   bio: "I own a computer."
 };
-function CreateBlock({
-  title = "Create Profile",
-  description = "Example of a complex form with Zod validation.",
-  submitLabel = "Update profile",
-  onSubmit: onSubmitProp,
-  className
-}) {
+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 [, 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,
+    defaultValues: {
+      ...defaultFormValues,
+      ...props.username ? { username: props.username } : {},
+      ...props.email ? { email: props.email } : {},
+      ...props.bio ? { bio: props.bio } : {}
+    },
     mode: "onChange"
   });
   function handleSubmit(data) {
-    if (onSubmitProp) {
-      onSubmitProp(data);
-      return;
-    }
-    toast({
-      title: "You submitted the following values:",
-      description: /* @__PURE__ */ jsx("pre", { className: "mt-2 w-full max-w-[340px] overflow-x-auto rounded-md bg-surface-active p-4", children: /* @__PURE__ */ jsx("code", { className: "text-text-primary", children: JSON.stringify(data, null, 2) }) })
-    });
+    if (bindings?.username) setBoundUsername(data.username);
+    if (bindings?.email) setBoundEmail(data.email);
+    if (bindings?.bio) setBoundBio(data.bio);
+    emit("submit");
   }
-  return /* @__PURE__ */ jsxs(Card, { className: className ?? "w-full max-w-2xl mx-auto", children: [
+  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 })