@vadimcomanescu/nadicode-design-system 2.0.8 → 4.0.0

package/dist/chunk-Q5IYBNA7.js

@@ -0,0 +1,56 @@
+import { Heading } from './chunk-WI547C47.js';
+import { Card, CardHeader, CardContent } from './chunk-AH6YSYYT.js';
+import { ZapIcon } from './chunk-FLF5AMNO.js';
+import { SparklesIcon } from './chunk-CGUCH322.js';
+import { SettingsIcon } from './chunk-OITJWGFV.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultFeatures = [
+  {
+    title: "Customizable",
+    description: "Extensive customization options, allowing you to tailor every aspect to meet your specific needs.",
+    icon: /* @__PURE__ */ jsx(ZapIcon, { size: 24, "aria-hidden": true })
+  },
+  {
+    title: "You have full control",
+    description: "From design elements to functionality, you have complete control to create a unique and personalized experience.",
+    icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 24, "aria-hidden": true })
+  },
+  {
+    title: "Powered By AI",
+    description: "Elements to functionality, you have complete control to create a unique experience.",
+    icon: /* @__PURE__ */ jsx(SparklesIcon, { size: 24, "aria-hidden": true })
+  }
+];
+function FeatureGridBlock({
+  title = "Built to cover your needs",
+  description = "Libero sapiente aliquam quibusdam aspernatur, praesentium iusto repellendus.",
+  features = defaultFeatures,
+  className
+} = {}) {
+  return /* @__PURE__ */ jsx("section", { className: className ?? "bg-background py-16 md:py-32 dark:bg-transparent", children: /* @__PURE__ */ jsxs("div", { className: "@container mx-auto max-w-5xl px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-4xl lg:text-5xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-4", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { className: "lg:max-w-full lg:grid-cols-3 lg:divide-x lg:divide-y-0 mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-sm *:text-center md:mt-16", children: features.map((feature, i) => /* @__PURE__ */ jsxs("div", { className: "group shadow-sm", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "pb-4", children: [
+        /* @__PURE__ */ jsx(CardDecorator, { children: feature.icon }),
+        /* @__PURE__ */ jsx(Heading, { level: 3, size: "title", className: "mt-6 font-medium", children: feature.title })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm", children: feature.description }) })
+    ] }, i)) })
+  ] }) });
+}
+var CardDecorator = ({ children }) => /* @__PURE__ */ jsxs("div", { className: "mask-radial-from-40% mask-radial-to-60% relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-text-primary)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-text-primary)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-text-primary)15%,transparent)] dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-text-primary)20%,transparent)]", children: [
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] dark:opacity-50"
+    }
+  ),
+  /* @__PURE__ */ jsx("div", { className: "bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t", children })
+] });
+
+export { FeatureGridBlock };

package/dist/chunk-QJCE7NZF.js

@@ -0,0 +1,85 @@
+import { useSidebar, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './chunk-J2DCQDXO.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from './chunk-CQEUNASC.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { ChevronsUpDownIcon } from './chunk-SW6QPJM4.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function getInitials(name) {
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+var EMPTY_ITEMS = [];
+function NavUser({ user, items = EMPTY_ITEMS, footer }) {
+  const { isMobile } = useSidebar();
+  const initials = getInitials(user.name);
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        className: "data-[state=open]:bg-surface-hover",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+            user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg text-xs", children: initials })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-text-primary", children: user.name }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-tertiary", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronsUpDownIcon,
+            {
+              size: 16,
+              className: "ml-auto text-text-tertiary"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-[var(--radix-dropdown-menu-trigger-width)] min-w-56 rounded-lg",
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1.5 py-1.5", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [
+              user.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatar, alt: user.name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg text-xs", children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-text-primary", children: user.name }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-tertiary", children: user.email })
+            ] })
+          ] }) }),
+          items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((item) => /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                asChild: !!item.href,
+                onClick: item.onClick,
+                children: item.href ? /* @__PURE__ */ jsxs("a", { href: item.href, children: [
+                  item.icon,
+                  item.label
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  item.icon,
+                  item.label
+                ] })
+              },
+              item.label
+            )) })
+          ] }),
+          !!footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            footer
+          ] })
+        ]
+      }
+    )
+  ] }) }) });
+}
+
+export { NavUser };

package/dist/chunk-QW5II6YK.js

@@ -0,0 +1,96 @@
+import { MarketingShellPageKit } from './chunk-Z233ZQZE.js';
+import { TeamBlock } from './chunk-VBZQ4DBE.js';
+import { ContactBlock } from './chunk-U4GYSYGN.js';
+import { FAQBlock } from './chunk-NEHCPO53.js';
+import { CallToActionBlock } from './chunk-GJPTPLCQ.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { cn } from './chunk-QYZT24TS.js';
+import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_SECTION_ORDER = [
+  "narrative",
+  "team",
+  "contact",
+  "faq",
+  "cta"
+];
+var DEFAULTS_BY_VARIANT = {
+  "company-about": {
+    narrative: {
+      title: "Built by practitioners who ship with contracts first.",
+      description: "We partner with teams that need high-quality interfaces and predictable release confidence."
+    },
+    team: {
+      title: "Leadership team"
+    },
+    contact: null,
+    faq: {},
+    cta: {
+      title: "Interested in working together?",
+      description: "Share your route goals and we will propose a rollout plan.",
+      primaryAction: { label: "Talk to us", href: "/contact" }
+    }
+  },
+  "company-contact": {
+    narrative: {
+      title: "Talk to our delivery team",
+      description: "Tell us what you are building, we will recommend an implementation path."
+    },
+    team: null,
+    contact: {
+      title: "Contact request",
+      description: "We respond within one business day.",
+      submitLabel: "Send request"
+    },
+    faq: {},
+    cta: {
+      title: "Prefer self-serve?",
+      description: "Start with our templates and scale with support as needed.",
+      primaryAction: { label: "View templates", href: "/templates" }
+    }
+  }
+};
+var SECTION_CLASS = "mx-auto w-full max-w-6xl px-6";
+function normalizeSectionOrder(sectionOrder) {
+  if (!sectionOrder || sectionOrder.length === 0) {
+    return DEFAULT_SECTION_ORDER;
+  }
+  return [...new Set(sectionOrder)];
+}
+function CompanySuitePageKit({
+  shell,
+  variant = "company-about",
+  sectionOrder,
+  narrative,
+  team,
+  contact,
+  faq,
+  cta,
+  className
+}) {
+  const defaults = DEFAULTS_BY_VARIANT[variant];
+  const resolvedNarrative = narrative ?? defaults.narrative ?? { title: "Company overview" };
+  const resolvedTeam = team === void 0 ? defaults.team : team;
+  const resolvedContact = contact === void 0 ? defaults.contact : contact;
+  const resolvedFaq = faq === void 0 ? defaults.faq : faq;
+  const resolvedCta = cta === void 0 ? defaults.cta : cta;
+  const orderedSections = normalizeSectionOrder(sectionOrder);
+  const sectionById = {
+    narrative: resolvedNarrative === null ? null : /* @__PURE__ */ jsx("section", { "data-testid": "company-section-narrative", className: SECTION_CLASS, children: /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: resolvedNarrative.title }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+        resolvedNarrative.description ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: resolvedNarrative.description }) : null,
+        resolvedNarrative.content ? /* @__PURE__ */ jsx("div", { children: resolvedNarrative.content }) : null
+      ] })
+    ] }) }),
+    team: resolvedTeam === null ? null : /* @__PURE__ */ jsx("section", { "data-testid": "company-section-team", className: SECTION_CLASS, children: /* @__PURE__ */ jsx(TeamBlock, { ...resolvedTeam }) }),
+    contact: resolvedContact === null ? null : /* @__PURE__ */ jsx("section", { "data-testid": "company-section-contact", className: SECTION_CLASS, children: /* @__PURE__ */ jsx(ContactBlock, { ...resolvedContact }) }),
+    faq: resolvedFaq === null ? null : /* @__PURE__ */ jsx("section", { "data-testid": "company-section-faq", className: SECTION_CLASS, children: /* @__PURE__ */ jsx(FAQBlock, { ...resolvedFaq }) }),
+    cta: resolvedCta === null ? null : /* @__PURE__ */ jsx("section", { "data-testid": "company-section-cta", className: cn(SECTION_CLASS, "pb-16"), children: /* @__PURE__ */ jsx(CallToActionBlock, { ...resolvedCta }) })
+  };
+  return /* @__PURE__ */ jsx(MarketingShellPageKit, { ...shell, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-10 pb-10", className), children: orderedSections.map((sectionId) => /* @__PURE__ */ jsx(React.Fragment, { children: sectionById[sectionId] }, sectionId)) }) });
+}
+
+export { CompanySuitePageKit };

package/dist/chunk-RMGDDOCD.js

@@ -0,0 +1,138 @@
+import { MarketingShellPageKit } from './chunk-Z233ZQZE.js';
+import { PricingBlock } from './chunk-VNNAL4A6.js';
+import { FAQBlock } from './chunk-NEHCPO53.js';
+import { CallToActionBlock } from './chunk-GJPTPLCQ.js';
+import { ComparisonBlock } from './chunk-VZCB4APK.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.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 React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var STATE_BADGE_LABELS = {
+  "billing-toggle": "Billing toggle",
+  "loading-action": "Loading actions",
+  "empty-plan": "Empty plan state"
+};
+var EMPTY_PLAN_ACTIONS = [];
+var EMPTY_PLANS = [];
+var DEFAULT_COMPARISON = {};
+var DEFAULT_FAQ = {};
+var DEFAULT_CTA = {
+  title: "Need a custom rollout?",
+  description: "Talk to our team for multi-team migration and governance support.",
+  primaryAction: { label: "Contact sales", href: "/contact" }
+};
+var DEFAULT_EMPTY_STATE = {
+  title: "No plans available",
+  description: "Configure at least one plan to render pricing actions."
+};
+function PricingPageKit({
+  shell,
+  state = "default",
+  title = "Choose the plan that fits your team.",
+  description = "Use stable pricing blocks while keeping plan copy, links, and billing behavior app-owned.",
+  plans = EMPTY_PLANS,
+  billing,
+  comparison = DEFAULT_COMPARISON,
+  faq = DEFAULT_FAQ,
+  cta = DEFAULT_CTA,
+  planActions = EMPTY_PLAN_ACTIONS,
+  emptyState = DEFAULT_EMPTY_STATE,
+  loadingMessage = "Preparing checkout actions...",
+  className
+}) {
+  const [selectedBilling, setSelectedBilling] = React.useState("monthly");
+  const supportsYearly = billing?.supportsYearly ?? true;
+  const monthlyLabel = billing?.monthlyLabel ?? "Monthly";
+  const yearlyLabel = billing?.yearlyLabel ?? "Yearly";
+  const yearlyBadgeLabel = billing?.yearlyBadgeLabel ?? "Save";
+  const isLoadingActions = state === "loading-action";
+  const shouldRenderEmpty = state === "empty-plan" || plans.length === 0;
+  return /* @__PURE__ */ jsx(MarketingShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("mx-auto w-full max-w-6xl space-y-8 px-6 pb-16", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description }),
+      state !== "default" ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: STATE_BADGE_LABELS[state] }) }) : null
+    ] }),
+    state === "billing-toggle" ? /* @__PURE__ */ jsxs(Card, { "data-testid": "pricing-billing-controls", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Billing interval" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 rounded-md border border-border/70 bg-surface/60 p-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: selectedBilling === "monthly" ? "primary" : "ghost",
+              onClick: () => setSelectedBilling("monthly"),
+              children: monthlyLabel
+            }
+          ),
+          supportsYearly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: selectedBilling === "yearly" ? "primary" : "ghost",
+                onClick: () => setSelectedBilling("yearly"),
+                children: yearlyLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(Badge, { variant: "accent", children: yearlyBadgeLabel })
+          ] }) : null
+        ] }),
+        billing?.note ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: billing.note }) : null
+      ] })
+    ] }) : null,
+    isLoadingActions ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "pricing-loading-action",
+        role: "status",
+        className: "rounded-md border border-border/70 bg-surface/70 px-4 py-3 text-sm text-text-secondary",
+        children: loadingMessage
+      }
+    ) : null,
+    shouldRenderEmpty ? /* @__PURE__ */ jsxs(Card, { "data-testid": "pricing-empty-state", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: emptyState.title }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "muted", children: emptyState.description }) })
+    ] }) : /* @__PURE__ */ jsx(
+      PricingBlock,
+      {
+        title: "Pricing plans",
+        description: "All plans are rendered from declared data inputs.",
+        plans,
+        showBillingToggle: state === "billing-toggle" && supportsYearly
+      }
+    ),
+    planActions.length > 0 ? /* @__PURE__ */ jsxs(Card, { "data-testid": "pricing-plan-actions", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Checkout actions" }) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "grid gap-3 sm:grid-cols-2", children: planActions.map((action) => {
+        const isDisabled = isLoadingActions || action.disabled;
+        return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border/70 p-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              disabled: isDisabled,
+              onClick: action.onAction,
+              className: "w-full",
+              children: action.label
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-2 break-all text-text-tertiary", children: action.href })
+        ] }, action.id);
+      }) })
+    ] }) : null,
+    comparison === null ? null : /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(ComparisonBlock, { ...comparison }) }),
+    faq === null ? null : /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(FAQBlock, { ...faq }) }),
+    cta === null ? null : /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(CallToActionBlock, { ...cta }) })
+  ] }) });
+}
+
+export { PricingPageKit };

package/dist/chunk-RNCX4JIE.js

@@ -0,0 +1,70 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Alert, AlertTitle, AlertDescription } from './chunk-GJUR6HT3.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { LoaderCircleIcon } from './chunk-BRP6D56U.js';
+import { useState } from 'react';
+import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function CheckoutForm({ amount = 2e3, currency = "usd", returnUrl = "/settings/billing" }) {
+  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: {
+        // Make sure to change this to your payment completion page
+        return_url: `${window.location.origin}${returnUrl}`
+      }
+    });
+    if (error.type === "card_error" || error.type === "validation_error") {
+      setMessage(error.message ?? "An unexpected error occurred.");
+    } else {
+      setMessage("An unexpected error occurred.");
+    }
+    setIsLoading(false);
+  };
+  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(),
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6", children: [
+        /* @__PURE__ */ jsx(PaymentElement, { id: "payment-element", options: { layout: "tabs" } }),
+        !!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"
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { CheckoutForm };

package/dist/chunk-RWCL5OPX.js

@@ -0,0 +1,112 @@
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-WI547C47.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Card, CardHeader, CardContent } from './chunk-AH6YSYYT.js';
+import { SparklesIcon } from './chunk-CGUCH322.js';
+import { RocketIcon } from './chunk-QPXTBZWN.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { AlertTriangleIcon } from './chunk-SXHYB7JB.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sectionStyles = [
+  { border: "border-destructive/30", badgeVariant: "destructive" },
+  { border: "border-accent/30", badgeVariant: "accent" },
+  { border: "border-success/30", badgeVariant: "accent" }
+];
+var defaultSections = [
+  {
+    icon: /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 20, "aria-hidden": true }),
+    label: "The Problem",
+    title: "Manual processes drain your team",
+    description: "Repetitive tasks consume valuable hours that could be spent on strategic work.",
+    bullets: [
+      "Hours lost to data entry and reporting",
+      "Inconsistent quality from manual processes",
+      "Scaling requires proportional headcount"
+    ]
+  },
+  {
+    icon: /* @__PURE__ */ jsx(SparklesIcon, { size: 20, "aria-hidden": true }),
+    label: "Our Solution",
+    title: "AI workers that integrate seamlessly",
+    description: "Purpose-built digital workers that slot into your existing workflows.",
+    bullets: [
+      "Trained on your specific business processes",
+      "Real-time monitoring and quality assurance",
+      "Seamless integration with existing tools"
+    ]
+  },
+  {
+    icon: /* @__PURE__ */ jsx(RocketIcon, { size: 20, "aria-hidden": true }),
+    label: "The Output",
+    title: "Measurable business impact",
+    description: "Concrete results from day one, with continuous improvement over time.",
+    bullets: [
+      "70% reduction in processing time",
+      "99.5% accuracy on routine tasks",
+      "ROI positive within 90 days"
+    ]
+  }
+];
+function SolutionShowcaseBlock({
+  title = "How we deliver results",
+  description = "A proven three-stage approach that transforms how your team operates.",
+  badge,
+  sections = defaultSections,
+  className
+}) {
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      !!badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mb-4", children: badge }),
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-4xl lg:text-5xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-text-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 120, className: "mt-12 flex flex-col gap-8 md:mt-16", children: sections.map((section, i) => {
+      const style = sectionStyles[i % sectionStyles.length];
+      return /* @__PURE__ */ jsxs(
+        Card,
+        {
+          className: cn(
+            "glass-panel border-l-4 p-6 sm:p-8",
+            style.border
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 p-0 pb-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                section.icon && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: section.icon }),
+                /* @__PURE__ */ jsx(Badge, { variant: style.badgeVariant, children: section.label })
+              ] }),
+              /* @__PURE__ */ jsx(Heading, { level: 3, size: "subsection", className: "text-xl sm:text-2xl", children: section.title })
+            ] }),
+            /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-text-secondary", children: section.description }),
+              /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: section.bullets.map((bullet, j) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "flex items-start gap-2 text-sm text-text-secondary",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      CheckIcon,
+                      {
+                        size: 16,
+                        className: "mt-0.5 shrink-0 text-accent",
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: bullet })
+                  ]
+                },
+                j
+              )) })
+            ] })
+          ]
+        },
+        i
+      );
+    }) })
+  ] }) }) });
+}
+
+export { SolutionShowcaseBlock };

package/dist/chunk-S5OY2B63.js

@@ -0,0 +1,28 @@
+import { TwoFactorChallengeBlock } from './chunk-W7FXDRQJ.js';
+import { TwoFactorSetupBlock } from './chunk-IXQGKJU4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function TwoFactorPageKit({
+  mode = "challenge",
+  challengeProps,
+  setupProps,
+  errorMessage,
+  className,
+  cardClassName
+}) {
+  const pageContent = mode === "setup" ? /* @__PURE__ */ jsx(TwoFactorSetupBlock, { className: cn("w-full", cardClassName), ...setupProps }) : /* @__PURE__ */ jsx(TwoFactorChallengeBlock, { className: cn("w-full", cardClassName), ...challengeProps });
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-dvh w-full bg-background px-4 py-12 md:px-8 md:py-20", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-5xl flex-col items-center justify-center gap-4", children: [
+    errorMessage ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        className: "w-full max-w-sm rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+        children: errorMessage
+      }
+    ) : null,
+    pageContent
+  ] }) });
+}
+
+export { TwoFactorPageKit };