@umituz/web-dashboard 2.0.7 → 2.0.9

package/dist/onboarding/components/index.js

@@ -1,738 +0,0 @@
-"use client";
-
-// src/domains/onboarding/components/OnboardingWizard.tsx
-import { useState as useState4, useCallback } from "react";
-import { useNavigate as useNavigate2 } from "react-router-dom";
-import { Check, Loader2 } from "lucide-react";
-import { cn as cn2 } from "@umituz/web-design-system/utils";
-import { Button as Button3 } from "@umituz/web-design-system/atoms";
-
-// src/domains/layouts/components/DashboardLayout.tsx
-import { useState as useState3, useEffect } from "react";
-import { useLocation as useLocation2, Outlet, Navigate } from "react-router-dom";
-import { Skeleton } from "@umituz/web-design-system/atoms";
-
-// src/domains/layouts/components/DashboardSidebar.tsx
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Button } from "@umituz/web-design-system/atoms";
-
-// src/domains/layouts/components/BrandLogo.tsx
-import { cn } from "@umituz/web-design-system/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var BrandLogo = ({ className, size = 32 }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 100 100",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className: cn("shrink-0", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "15",
-            y: "65",
-            width: "70",
-            height: "15",
-            rx: "4",
-            fill: "hsl(var(--primary))"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "25",
-            y: "25",
-            width: "12",
-            height: "40",
-            rx: "2",
-            fill: "hsl(var(--primary))"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "44",
-            y: "35",
-            width: "12",
-            height: "30",
-            rx: "2",
-            fill: "hsl(var(--primary))"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "63",
-            y: "20",
-            width: "12",
-            height: "45",
-            rx: "2",
-            fill: "hsl(var(--primary))"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: "20",
-            y: "45",
-            width: "60",
-            height: "10",
-            rx: "2",
-            fill: "hsl(var(--secondary))"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "20",
-            r: "5",
-            fill: "hsl(var(--secondary))"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/domains/layouts/components/DashboardSidebar.tsx
-import { PenTool, Menu, ChevronLeft, ChevronDown, ChevronRight } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-
-// src/domains/layouts/components/DashboardHeader.tsx
-import React, { useState as useState2 } from "react";
-import {
-  Bell,
-  X,
-  Sun,
-  Moon,
-  Menu as Menu2,
-  User,
-  Settings,
-  LogOut,
-  ChevronDown as ChevronDown2,
-  CreditCard
-} from "lucide-react";
-import { Button as Button2 } from "@umituz/web-design-system/atoms";
-import { useNavigate } from "react-router-dom";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-
-// src/domains/layouts/components/DashboardLayout.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-
-// src/domains/onboarding/components/OnboardingWizard.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var StepProgress = ({ currentStep, totalSteps, completedSteps = [] }) => {
-  return /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-0 flex-1 justify-center", children: Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {
-    const isCompleted = completedSteps.includes(step) || step < currentStep;
-    const isCurrent = step === currentStep;
-    return /* @__PURE__ */ jsxs5("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: cn2(
-            "w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors",
-            isCompleted || isCurrent ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
-          ),
-          children: isCompleted ? /* @__PURE__ */ jsx5(Check, { className: "h-4 w-4" }) : step
-        }
-      ),
-      step < totalSteps && /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: cn2(
-            "w-12 h-0.5 mx-1",
-            step < currentStep ? "bg-primary" : "bg-border"
-          )
-        }
-      )
-    ] }, step);
-  }) });
-};
-var StepNavigation = ({
-  currentStep,
-  totalSteps,
-  canGoNext,
-  isSaving = false,
-  nextLabel,
-  prevLabel,
-  onNext,
-  onPrev,
-  allowSkip = false,
-  onSkip
-}) => {
-  const t = (key) => key;
-  return /* @__PURE__ */ jsxs5("footer", { className: "bg-background border-t border-border px-8 py-6 flex items-center justify-between", children: [
-    currentStep > 1 ? /* @__PURE__ */ jsxs5(
-      Button3,
-      {
-        variant: "ghost",
-        onClick: onPrev,
-        className: "rounded-full px-6",
-        disabled: isSaving,
-        children: [
-          "\u2190 ",
-          prevLabel || t("onboarding.buttons.back")
-        ]
-      }
-    ) : /* @__PURE__ */ jsx5("div", {}),
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
-      allowSkip && onSkip && currentStep < totalSteps && /* @__PURE__ */ jsx5(
-        Button3,
-        {
-          variant: "ghost",
-          onClick: onSkip,
-          className: "rounded-full px-6",
-          disabled: isSaving,
-          children: t("onboarding.buttons.skip")
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        Button3,
-        {
-          onClick: onNext,
-          className: "rounded-full px-12 h-12 text-base font-bold",
-          disabled: !canGoNext || isSaving,
-          children: isSaving ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            /* @__PURE__ */ jsx5(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-            t("onboarding.buttons.finalizing")
-          ] }) : currentStep === totalSteps ? nextLabel || t("onboarding.buttons.getStarted") : t("onboarding.buttons.next")
-        }
-      )
-    ] })
-  ] });
-};
-var OnboardingWizard = ({
-  config,
-  initialState,
-  onComplete,
-  onCancel
-}) => {
-  const navigate = useNavigate2();
-  const [currentStep, setCurrentStep] = useState4(1);
-  const [saving, setSaving] = useState4(false);
-  const [completedSteps, setCompletedSteps] = useState4([]);
-  const [state, setState] = useState4({
-    currentStep: 1,
-    connectedPlatforms: [],
-    billingCycle: "monthly",
-    stepData: {},
-    ...initialState
-  });
-  const totalSteps = config.steps.length;
-  const canGoNext = useCallback(() => {
-    const currentStepConfig2 = config.steps[currentStep - 1];
-    if (currentStepConfig2?.validate) {
-      return currentStepConfig2.validate(state);
-    }
-    return true;
-  }, [config.steps, currentStep, state]);
-  const goToNext = useCallback(async () => {
-    if (currentStep < totalSteps) {
-      setCompletedSteps((prev) => [...prev, currentStep]);
-      setCurrentStep((prev) => prev + 1);
-      setState((prev) => ({ ...prev, currentStep: prev.currentStep + 1 }));
-    } else {
-      setSaving(true);
-      try {
-        await onComplete?.(state);
-        navigate(config.completeRoute);
-      } catch (error) {
-        console.error("Onboarding completion error:", error);
-        setSaving(false);
-      }
-    }
-  }, [currentStep, totalSteps, state, onComplete, navigate, config.completeRoute]);
-  const goToPrev = useCallback(() => {
-    if (currentStep > 1) {
-      setCurrentStep((prev) => prev - 1);
-      setState((prev) => ({ ...prev, currentStep: prev.currentStep - 1 }));
-    }
-  }, [currentStep]);
-  const goToStep = useCallback((step) => {
-    if (step >= 1 && step <= totalSteps) {
-      setCurrentStep(step);
-      setState((prev) => ({ ...prev, currentStep: step }));
-    }
-  }, [totalSteps]);
-  const updateState = useCallback((updates) => {
-    setState((prev) => ({ ...prev, ...updates }));
-  }, []);
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    navigate(config.cancelRoute || "/");
-  }, [onCancel, navigate, config.cancelRoute]);
-  const handleSkip = useCallback(() => {
-    if (currentStep < totalSteps) {
-      goToNext();
-    }
-  }, [currentStep, totalSteps, goToNext]);
-  const currentStepConfig = config.steps[currentStep - 1];
-  const StepContent = currentStepConfig?.component;
-  return /* @__PURE__ */ jsxs5("div", { className: "min-h-screen bg-secondary flex flex-col", children: [
-    /* @__PURE__ */ jsxs5("header", { className: "bg-background border-b border-border px-6 py-3 flex items-center", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mr-8", children: [
-        /* @__PURE__ */ jsx5(BrandLogo, { size: 28 }),
-        /* @__PURE__ */ jsx5("span", { className: "font-bold text-foreground", children: config.brandName })
-      ] }),
-      config.showProgress !== false && /* @__PURE__ */ jsx5(
-        StepProgress,
-        {
-          currentStep,
-          totalSteps,
-          completedSteps
-        }
-      ),
-      /* @__PURE__ */ jsx5("div", { className: "w-24" })
-    ] }),
-    /* @__PURE__ */ jsx5("main", { className: "flex-1 flex flex-col items-center justify-center px-4 py-12", children: /* @__PURE__ */ jsx5("div", { className: "w-full max-w-4xl", children: StepContent ? (
-      // Check if it's a function component (has call signature)
-      typeof StepContent === "function" ? /* @__PURE__ */ jsx5(
-        StepContent,
-        {
-          state,
-          updateState,
-          goToNext,
-          goToPrev,
-          goToStep,
-          config
-        }
-      ) : (
-        // Otherwise it's a ReactElement
-        StepContent
-      )
-    ) : null }) }),
-    /* @__PURE__ */ jsx5(
-      StepNavigation,
-      {
-        currentStep,
-        totalSteps,
-        canGoNext: canGoNext(),
-        isSaving: saving,
-        onNext: goToNext,
-        onPrev: goToPrev,
-        allowSkip: config.allowSkip,
-        onSkip: handleSkip
-      }
-    )
-  ] });
-};
-
-// src/domains/onboarding/components/UserTypeStep.tsx
-import { Check as Check2 } from "lucide-react";
-import { cn as cn3 } from "@umituz/web-design-system/utils";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var UserTypeStep = ({
-  state,
-  updateState,
-  options = []
-}) => {
-  const defaultOptions = [
-    {
-      id: "founder",
-      label: "Founder",
-      description: "Building your own startup or business"
-    },
-    {
-      id: "creator",
-      label: "Content Creator",
-      description: "Creating content for social media and platforms"
-    },
-    {
-      id: "agency",
-      label: "Agency",
-      description: "Managing multiple client accounts"
-    },
-    {
-      id: "enterprise",
-      label: "Enterprise",
-      description: "Large scale organization with teams"
-    },
-    {
-      id: "small-business",
-      label: "Small Business",
-      description: "Local or niche business owner"
-    },
-    {
-      id: "personal",
-      label: "Personal",
-      description: "Individual looking to grow personal brand"
-    }
-  ];
-  const userTypeOptions = options.length > 0 ? options : defaultOptions;
-  return /* @__PURE__ */ jsxs6("div", { className: "w-full max-w-xl", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "text-center mb-10", children: [
-      /* @__PURE__ */ jsx6("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "What describes you best?" }),
-      /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "Select the option that best describes your situation" })
-    ] }),
-    /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 gap-3", children: userTypeOptions.map((option) => {
-      const isSelected = state.selectedUserType === option.id;
-      const hasBadge = option.badge != null;
-      const hasIcon = option.icon != null;
-      return /* @__PURE__ */ jsxs6(
-        "button",
-        {
-          onClick: () => updateState({ selectedUserType: option.id }),
-          className: cn3(
-            "w-full flex items-center gap-4 p-5 rounded-2xl border bg-background text-left transition-all group",
-            isSelected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40 hover:bg-muted/50"
-          ),
-          children: [
-            /* @__PURE__ */ jsx6(
-              "div",
-              {
-                className: cn3(
-                  "w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
-                  isSelected ? "border-primary bg-primary text-white" : "border-muted-foreground/30"
-                ),
-                children: isSelected && /* @__PURE__ */ jsx6(Check2, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxs6("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx6("p", { className: "font-bold text-foreground", children: option.label }),
-                hasBadge && /* @__PURE__ */ jsx6("span", { className: "text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-primary/10 text-primary", children: option.badge })
-              ] }),
-              /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground mt-0.5", children: option.description })
-            ] }),
-            hasIcon && option.icon && /* @__PURE__ */ jsx6("div", { className: "w-10 h-10 rounded-xl bg-muted flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx6(option.icon, { className: "h-5 w-5 text-muted-foreground" }) })
-          ]
-        },
-        option.id
-      );
-    }) })
-  ] });
-};
-
-// src/domains/onboarding/components/AppFocusStep.tsx
-import { Check as Check3 } from "lucide-react";
-import { cn as cn4 } from "@umituz/web-design-system/utils";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var AppFocusStep = ({
-  state,
-  updateState,
-  appTypes
-}) => {
-  const defaultAppTypes = [
-    {
-      id: "mobile",
-      label: "Mobile App",
-      description: "iOS or Android application",
-      icon: "\u{1F4F1}"
-    },
-    {
-      id: "web",
-      label: "Web App",
-      description: "Web application or website",
-      icon: "\u{1F4BB}"
-    }
-  ];
-  const types = appTypes || defaultAppTypes;
-  return /* @__PURE__ */ jsxs7("div", { className: "w-full max-w-xl", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "text-center mb-10", children: [
-      /* @__PURE__ */ jsx7("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "What type of app are you building?" }),
-      /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground", children: "Select all that apply - you can change this later" })
-    ] }),
-    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-4", children: types.map((type) => {
-      const isSelected = type.id === "mobile" ? state.hasMobileApp : state.hasWebApp;
-      return /* @__PURE__ */ jsxs7(
-        "button",
-        {
-          onClick: () => {
-            if (type.id === "mobile") {
-              updateState({ hasMobileApp: !state.hasMobileApp });
-            } else {
-              updateState({ hasWebApp: !state.hasWebApp });
-            }
-          },
-          className: cn4(
-            "w-full flex items-center gap-4 p-6 rounded-2xl border bg-background text-left transition-all",
-            isSelected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40"
-          ),
-          children: [
-            /* @__PURE__ */ jsx7(
-              "div",
-              {
-                className: cn4(
-                  "w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl shrink-0 transition-transform",
-                  isSelected && "scale-110"
-                ),
-                children: type.icon
-              }
-            ),
-            /* @__PURE__ */ jsxs7("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx7("p", { className: "font-bold text-foreground text-lg", children: type.label }),
-              /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: type.description })
-            ] }),
-            /* @__PURE__ */ jsx7(
-              "div",
-              {
-                className: cn4(
-                  "w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
-                  isSelected ? "border-primary bg-primary text-white" : "border-muted-foreground/30"
-                ),
-                children: isSelected && /* @__PURE__ */ jsx7(Check3, { className: "h-4 w-4" })
-              }
-            )
-          ]
-        },
-        type.id
-      );
-    }) }),
-    (state.hasMobileApp || state.hasWebApp) && /* @__PURE__ */ jsx7("p", { className: "mt-8 text-center text-sm text-muted-foreground animate-in fade-in slide-in-from-bottom-2 duration-500", children: "\u2728 Great choice! We'll tailor your experience accordingly." })
-  ] });
-};
-
-// src/domains/onboarding/components/PlatformsStep.tsx
-import { cn as cn5 } from "@umituz/web-design-system/utils";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var PlatformsStep = ({
-  state,
-  updateState,
-  platforms
-}) => {
-  const defaultPlatforms = [
-    { id: "instagram", name: "Instagram", icon: "\u{1F4F8}", color: "bg-gradient-to-br from-purple-500 to-pink-500" },
-    { id: "twitter", name: "Twitter / X", icon: "\u{1F426}", color: "bg-black" },
-    { id: "facebook", name: "Facebook", icon: "\u{1F44D}", color: "bg-blue-600" },
-    { id: "linkedin", name: "LinkedIn", icon: "\u{1F4BC}", color: "bg-blue-700" },
-    { id: "tiktok", name: "TikTok", icon: "\u{1F3B5}", color: "bg-black" },
-    { id: "youtube", name: "YouTube", icon: "\u{1F4FA}", color: "bg-red-600" },
-    { id: "pinterest", name: "Pinterest", icon: "\u{1F4CC}", color: "bg-red-700" },
-    { id: "threads", name: "Threads", icon: "\u{1F9F5}", color: "bg-black" }
-  ];
-  const platformOptions = platforms || defaultPlatforms;
-  const togglePlatform = (id) => {
-    const isConnected = state.connectedPlatforms.includes(id);
-    updateState({
-      connectedPlatforms: isConnected ? state.connectedPlatforms.filter((p) => p !== id) : [...state.connectedPlatforms, id]
-    });
-  };
-  return /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-4xl", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "text-center mb-10", children: [
-      /* @__PURE__ */ jsx8("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "Connect your platforms" }),
-      /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground", children: "Select the platforms you want to manage - you can add more later" })
-    ] }),
-    /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: platformOptions.map((platform) => {
-      const isConnected = state.connectedPlatforms.includes(platform.id);
-      return /* @__PURE__ */ jsxs8(
-        "button",
-        {
-          onClick: () => togglePlatform(platform.id),
-          className: cn5(
-            "group bg-background border rounded-2xl p-6 flex flex-col items-center gap-4 transition-all hover:scale-[1.02]",
-            isConnected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40"
-          ),
-          children: [
-            /* @__PURE__ */ jsx8(
-              "div",
-              {
-                className: cn5(
-                  "w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl group-hover:scale-110 transition-transform",
-                  platform.color
-                ),
-                children: platform.icon
-              }
-            ),
-            /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center", children: [
-              /* @__PURE__ */ jsx8("span", { className: "font-bold text-foreground text-sm", children: platform.name }),
-              /* @__PURE__ */ jsx8(
-                "span",
-                {
-                  className: cn5(
-                    "text-[10px] font-bold uppercase tracking-wider mt-1 transition-colors",
-                    isConnected ? "text-primary" : "text-muted-foreground"
-                  ),
-                  children: isConnected ? "Connected" : "Connect"
-                }
-              )
-            ] })
-          ]
-        },
-        platform.id
-      );
-    }) }),
-    state.connectedPlatforms.length > 0 && /* @__PURE__ */ jsxs8("p", { className: "mt-8 text-center text-sm text-muted-foreground animate-in fade-in", children: [
-      "\u2728 ",
-      state.connectedPlatforms.length,
-      " platform",
-      state.connectedPlatforms.length > 1 ? "s" : "",
-      " selected"
-    ] })
-  ] });
-};
-
-// src/domains/onboarding/components/PlanStep.tsx
-import { Check as Check4 } from "lucide-react";
-import { cn as cn6 } from "@umituz/web-design-system/utils";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var PlanStep = ({
-  state,
-  updateState,
-  plans
-}) => {
-  const defaultPlans = [
-    {
-      id: "standard",
-      name: "Standard",
-      badge: "Most Popular",
-      badgeColor: "bg-muted text-muted-foreground",
-      description: "Perfect for individuals and small businesses",
-      price: 12,
-      features: [
-        { text: "3 Social Accounts", bold: true },
-        "100 posts per month",
-        "Basic Analytics",
-        "Email Support"
-      ]
-    },
-    {
-      id: "pro",
-      name: "Pro",
-      badge: "Best Value",
-      badgeColor: "bg-primary text-primary-foreground",
-      description: "For growing businesses and teams",
-      price: 29,
-      features: [
-        { text: "15 Social Accounts", bold: true },
-        "Unlimited posts",
-        "Advanced Analytics",
-        "AI Caption Suggestions",
-        { text: "5 Team Members", bold: true },
-        "Priority Support"
-      ],
-      highlight: true
-    },
-    {
-      id: "enterprise",
-      name: "Enterprise",
-      badge: "Custom",
-      badgeColor: "bg-purple-600 text-white",
-      description: "For large organizations with custom needs",
-      price: 99,
-      features: [
-        { text: "Unlimited Accounts", bold: true },
-        "Unlimited everything",
-        "Custom Integrations",
-        "Dedicated Account Manager",
-        "24/7 Phone Support",
-        "SLA Guarantee"
-      ]
-    }
-  ];
-  const planOptions = plans || defaultPlans;
-  const getPlanPrice = (plan) => {
-    const basePrice = plan.price;
-    return state.billingCycle === "yearly" ? basePrice * 12 * 0.8 : basePrice;
-  };
-  return /* @__PURE__ */ jsxs9("div", { className: "w-full max-w-5xl", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "text-center mb-8", children: [
-      /* @__PURE__ */ jsx9("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "Choose your plan" }),
-      /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground text-lg", children: "Start with a 14-day free trial - no credit card required" })
-    ] }),
-    /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center gap-2 mb-12", children: /* @__PURE__ */ jsxs9("div", { className: "flex bg-muted rounded-full p-1.5 border border-border", children: [
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          onClick: () => updateState({ billingCycle: "monthly" }),
-          className: cn6(
-            "px-6 py-2 rounded-full text-sm font-bold transition-all",
-            state.billingCycle === "monthly" ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: "Monthly"
-        }
-      ),
-      /* @__PURE__ */ jsxs9(
-        "button",
-        {
-          onClick: () => updateState({ billingCycle: "yearly" }),
-          className: cn6(
-            "px-6 py-2 rounded-full text-sm font-bold transition-all flex items-center gap-2",
-            state.billingCycle === "yearly" ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20" : "text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            "Yearly",
-            /* @__PURE__ */ jsx9(
-              "span",
-              {
-                className: cn6(
-                  "text-[10px] px-1.5 py-0.5 rounded-full transition-colors",
-                  state.billingCycle === "yearly" ? "bg-white/20 text-white" : "bg-green-500/10 text-green-600"
-                ),
-                children: "Save 20%"
-              }
-            )
-          ]
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx9("div", { className: "grid md:grid-cols-3 gap-8", children: planOptions.map((plan) => {
-      const isSelected = state.selectedPlan === plan.id;
-      const planPrice = getPlanPrice(plan);
-      return /* @__PURE__ */ jsxs9(
-        "button",
-        {
-          onClick: () => updateState({ selectedPlan: plan.id }),
-          className: cn6(
-            "bg-background border-2 rounded-[32px] p-8 text-left transition-all hover:translate-y-[-4px] relative",
-            isSelected ? "border-primary ring-4 ring-primary/10" : "border-border hover:border-primary/40",
-            plan.highlight && "shadow-xl"
-          ),
-          children: [
-            plan.highlight && /* @__PURE__ */ jsx9("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary to-purple-600 text-white text-[10px] font-black uppercase tracking-widest px-4 py-1 rounded-full", children: "Recommended" }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ jsx9("h3", { className: "text-2xl font-black text-foreground", children: plan.name }),
-              plan.badge && /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  className: cn6(
-                    "text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full",
-                    plan.badgeColor
-                  ),
-                  children: plan.badge
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground mb-8 font-medium", children: plan.description }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-baseline gap-1 mb-8", children: [
-              /* @__PURE__ */ jsxs9("span", { className: "text-5xl font-black text-foreground", children: [
-                "$",
-                Math.round(planPrice)
-              ] }),
-              /* @__PURE__ */ jsx9("span", { className: "text-lg font-bold text-muted-foreground", children: "/mo" })
-            ] }),
-            /* @__PURE__ */ jsx9("ul", { className: "space-y-4", children: plan.features.map((feature, i) => {
-              const text = typeof feature === "string" ? feature : feature.text;
-              const bold = typeof feature !== "string" && feature.bold;
-              return /* @__PURE__ */ jsxs9("li", { className: "flex items-start gap-3 text-sm font-medium", children: [
-                /* @__PURE__ */ jsx9("div", { className: "w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5", children: /* @__PURE__ */ jsx9(Check4, { className: "h-3 w-3 text-primary" }) }),
-                /* @__PURE__ */ jsx9("span", { className: cn6("text-foreground/90", bold && "font-black"), children: text })
-              ] }, i);
-            }) })
-          ]
-        },
-        plan.id
-      );
-    }) }),
-    state.selectedPlan && /* @__PURE__ */ jsxs9("p", { className: "mt-8 text-center text-sm text-muted-foreground animate-in fade-in", children: [
-      "\u2728 Great choice! You selected the ",
-      planOptions.find((p) => p.id === state.selectedPlan)?.name,
-      " plan"
-    ] })
-  ] });
-};
-export {
-  AppFocusStep,
-  OnboardingWizard,
-  PlanStep,
-  PlatformsStep,
-  UserTypeStep
-};
-//# sourceMappingURL=index.js.map