@umituz/web-dashboard 2.0.3 → 2.0.7

package/dist/onboarding/components/PlanStep.js

@@ -0,0 +1,167 @@
+"use client";
+
+// src/domains/onboarding/components/PlanStep.tsx
+import { Check } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { jsx, jsxs } 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__ */ jsxs("div", { className: "w-full max-w-5xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "Choose your plan" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: "Start with a 14-day free trial - no credit card required" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-2 mb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex bg-muted rounded-full p-1.5 border border-border", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => updateState({ billingCycle: "monthly" }),
+          className: cn(
+            "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__ */ jsxs(
+        "button",
+        {
+          onClick: () => updateState({ billingCycle: "yearly" }),
+          className: cn(
+            "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__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "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__ */ jsx("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__ */ jsxs(
+        "button",
+        {
+          onClick: () => updateState({ selectedPlan: plan.id }),
+          className: cn(
+            "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__ */ jsx("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__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-2xl font-black text-foreground", children: plan.name }),
+              plan.badge && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full",
+                    plan.badgeColor
+                  ),
+                  children: plan.badge
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-8 font-medium", children: plan.description }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 mb-8", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-5xl font-black text-foreground", children: [
+                "$",
+                Math.round(planPrice)
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-muted-foreground", children: "/mo" })
+            ] }),
+            /* @__PURE__ */ jsx("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__ */ jsxs("li", { className: "flex items-start gap-3 text-sm font-medium", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary" }) }),
+                /* @__PURE__ */ jsx("span", { className: cn("text-foreground/90", bold && "font-black"), children: text })
+              ] }, i);
+            }) })
+          ]
+        },
+        plan.id
+      );
+    }) }),
+    state.selectedPlan && /* @__PURE__ */ jsxs("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"
+    ] })
+  ] });
+};
+var PlanStep_default = PlanStep;
+export {
+  PlanStep,
+  PlanStep_default as default
+};
+//# sourceMappingURL=PlanStep.js.map

package/dist/onboarding/components/PlanStep.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/onboarding/components/PlanStep.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport type { OnboardingState, PlanOption } from \"../types/onboarding\";\n\ninterface PlanStepProps {\n  /** Current onboarding state */\n  state: OnboardingState;\n  /** Update state function */\n  updateState: (updates: Partial<OnboardingState>) => void;\n  /** Plan options */\n  plans?: PlanOption[];\n}\n\n/**\n * Plan Selection Step\n *\n * Fourth step - select subscription plan\n */\nexport const PlanStep = ({\n  state,\n  updateState,\n  plans,\n}: PlanStepProps) => {\n  // Default plans\n  const defaultPlans: PlanOption[] = [\n    {\n      id: \"standard\",\n      name: \"Standard\",\n      badge: \"Most Popular\",\n      badgeColor: \"bg-muted text-muted-foreground\",\n      description: \"Perfect for individuals and small businesses\",\n      price: 12,\n      features: [\n        { text: \"3 Social Accounts\", bold: true },\n        \"100 posts per month\",\n        \"Basic Analytics\",\n        \"Email Support\",\n      ],\n    },\n    {\n      id: \"pro\",\n      name: \"Pro\",\n      badge: \"Best Value\",\n      badgeColor: \"bg-primary text-primary-foreground\",\n      description: \"For growing businesses and teams\",\n      price: 29,\n      features: [\n        { text: \"15 Social Accounts\", bold: true },\n        \"Unlimited posts\",\n        \"Advanced Analytics\",\n        \"AI Caption Suggestions\",\n        { text: \"5 Team Members\", bold: true },\n        \"Priority Support\",\n      ],\n      highlight: true,\n    },\n    {\n      id: \"enterprise\",\n      name: \"Enterprise\",\n      badge: \"Custom\",\n      badgeColor: \"bg-purple-600 text-white\",\n      description: \"For large organizations with custom needs\",\n      price: 99,\n      features: [\n        { text: \"Unlimited Accounts\", bold: true },\n        \"Unlimited everything\",\n        \"Custom Integrations\",\n        \"Dedicated Account Manager\",\n        \"24/7 Phone Support\",\n        \"SLA Guarantee\",\n      ],\n    },\n  ];\n\n  const planOptions = plans || defaultPlans;\n\n  // Calculate price with billing cycle discount\n  const getPlanPrice = (plan: PlanOption) => {\n    const basePrice = plan.price;\n    return state.billingCycle === \"yearly\" ? basePrice * 12 * 0.8 : basePrice; // 20% discount\n  };\n\n  return (\n    <div className=\"w-full max-w-5xl\">\n      <div className=\"text-center mb-8\">\n        <h1 className=\"text-3xl md:text-4xl font-extrabold text-foreground mb-3\">\n          Choose your plan\n        </h1>\n        <p className=\"text-muted-foreground text-lg\">\n          Start with a 14-day free trial - no credit card required\n        </p>\n      </div>\n\n      {/* Billing Cycle Toggle */}\n      <div className=\"flex items-center justify-center gap-2 mb-12\">\n        <div className=\"flex bg-muted rounded-full p-1.5 border border-border\">\n          <button\n            onClick={() => updateState({ billingCycle: \"monthly\" })}\n            className={cn(\n              \"px-6 py-2 rounded-full text-sm font-bold transition-all\",\n              state.billingCycle === \"monthly\"\n                ? \"bg-primary text-primary-foreground shadow-lg shadow-primary/20\"\n                : \"text-muted-foreground hover:text-foreground\"\n            )}\n          >\n            Monthly\n          </button>\n          <button\n            onClick={() => updateState({ billingCycle: \"yearly\" })}\n            className={cn(\n              \"px-6 py-2 rounded-full text-sm font-bold transition-all flex items-center gap-2\",\n              state.billingCycle === \"yearly\"\n                ? \"bg-primary text-primary-foreground shadow-lg shadow-primary/20\"\n                : \"text-muted-foreground hover:text-foreground\"\n            )}\n          >\n            Yearly\n            <span\n              className={cn(\n                \"text-[10px] px-1.5 py-0.5 rounded-full transition-colors\",\n                state.billingCycle === \"yearly\" ? \"bg-white/20 text-white\" : \"bg-green-500/10 text-green-600\"\n              )}\n            >\n              Save 20%\n            </span>\n          </button>\n        </div>\n      </div>\n\n      {/* Plans Grid */}\n      <div className=\"grid md:grid-cols-3 gap-8\">\n        {planOptions.map((plan) => {\n          const isSelected = state.selectedPlan === plan.id;\n          const planPrice = getPlanPrice(plan);\n\n          return (\n            <button\n              key={plan.id}\n              onClick={() => updateState({ selectedPlan: plan.id })}\n              className={cn(\n                \"bg-background border-2 rounded-[32px] p-8 text-left transition-all hover:translate-y-[-4px] relative\",\n                isSelected\n                  ? \"border-primary ring-4 ring-primary/10\"\n                  : \"border-border hover:border-primary/40\",\n                plan.highlight && \"shadow-xl\"\n              )}\n            >\n              {plan.highlight && (\n                <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\">\n                  Recommended\n                </div>\n              )}\n\n              <div className=\"flex items-center justify-between mb-4\">\n                <h3 className=\"text-2xl font-black text-foreground\">{plan.name}</h3>\n                {plan.badge && (\n                  <div\n                    className={cn(\n                      \"text-[10px] font-black uppercase tracking-widest px-3 py-1 rounded-full\",\n                      plan.badgeColor\n                    )}\n                  >\n                    {plan.badge}\n                  </div>\n                )}\n              </div>\n\n              <p className=\"text-muted-foreground mb-8 font-medium\">{plan.description}</p>\n\n              <div className=\"flex items-baseline gap-1 mb-8\">\n                <span className=\"text-5xl font-black text-foreground\">\n                  ${Math.round(planPrice)}\n                </span>\n                <span className=\"text-lg font-bold text-muted-foreground\">/mo</span>\n              </div>\n\n              <ul className=\"space-y-4\">\n                {plan.features.map((feature, i) => {\n                  const text = typeof feature === \"string\" ? feature : feature.text;\n                  const bold = typeof feature !== \"string\" && feature.bold;\n\n                  return (\n                    <li key={i} className=\"flex items-start gap-3 text-sm font-medium\">\n                      <div className=\"w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5\">\n                        <Check className=\"h-3 w-3 text-primary\" />\n                      </div>\n                      <span className={cn(\"text-foreground/90\", bold && \"font-black\")}>\n                        {text}\n                      </span>\n                    </li>\n                  );\n                })}\n              </ul>\n            </button>\n          );\n        })}\n      </div>\n\n      {state.selectedPlan && (\n        <p className=\"mt-8 text-center text-sm text-muted-foreground animate-in fade-in\">\n          ✨ Great choice! You selected the {planOptions.find((p) => p.id === state.selectedPlan)?.name} plan\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default PlanStep;\n"],"mappings":"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","names":[]}

package/dist/onboarding/components/PlatformsStep.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OnboardingState } from '../types/onboarding.js';
+import 'lucide-react';
+import 'react';
+
+interface PlatformsStepProps {
+    /** Current onboarding state */
+    state: OnboardingState;
+    /** Update state function */
+    updateState: (updates: Partial<OnboardingState>) => void;
+    /** Platform options */
+    platforms?: Array<{
+        id: string;
+        name: string;
+        icon: string;
+        color?: string;
+    }>;
+}
+/**
+ * Platform Selection Step
+ *
+ * Third step - select social media platforms to connect
+ */
+declare const PlatformsStep: ({ state, updateState, platforms, }: PlatformsStepProps) => react_jsx_runtime.JSX.Element;
+
+export { PlatformsStep, PlatformsStep as default };

package/dist/onboarding/components/PlatformsStep.js

@@ -0,0 +1,86 @@
+"use client";
+
+// src/domains/onboarding/components/PlatformsStep.tsx
+import { cn } from "@umituz/web-design-system/utils";
+import { jsx, jsxs } 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__ */ jsxs("div", { className: "w-full max-w-4xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-10", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "Connect your platforms" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Select the platforms you want to manage - you can add more later" })
+    ] }),
+    /* @__PURE__ */ jsx("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__ */ jsxs(
+        "button",
+        {
+          onClick: () => togglePlatform(platform.id),
+          className: cn(
+            "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__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "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__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground text-sm", children: platform.name }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "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__ */ jsxs("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"
+    ] })
+  ] });
+};
+var PlatformsStep_default = PlatformsStep;
+export {
+  PlatformsStep,
+  PlatformsStep_default as default
+};
+//# sourceMappingURL=PlatformsStep.js.map

package/dist/onboarding/components/PlatformsStep.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/onboarding/components/PlatformsStep.tsx"],"sourcesContent":["import { cn } from \"@umituz/web-design-system/utils\";\nimport type { OnboardingState } from \"../types/onboarding\";\n\ninterface PlatformsStepProps {\n  /** Current onboarding state */\n  state: OnboardingState;\n  /** Update state function */\n  updateState: (updates: Partial<OnboardingState>) => void;\n  /** Platform options */\n  platforms?: Array<{\n    id: string;\n    name: string;\n    icon: string;\n    color?: string;\n  }>;\n}\n\n/**\n * Platform Selection Step\n *\n * Third step - select social media platforms to connect\n */\nexport const PlatformsStep = ({\n  state,\n  updateState,\n  platforms,\n}: PlatformsStepProps) => {\n  // Default platforms\n  const defaultPlatforms = [\n    { id: \"instagram\", name: \"Instagram\", icon: \"📸\", color: \"bg-gradient-to-br from-purple-500 to-pink-500\" },\n    { id: \"twitter\", name: \"Twitter / X\", icon: \"🐦\", color: \"bg-black\" },\n    { id: \"facebook\", name: \"Facebook\", icon: \"👍\", color: \"bg-blue-600\" },\n    { id: \"linkedin\", name: \"LinkedIn\", icon: \"💼\", color: \"bg-blue-700\" },\n    { id: \"tiktok\", name: \"TikTok\", icon: \"🎵\", color: \"bg-black\" },\n    { id: \"youtube\", name: \"YouTube\", icon: \"📺\", color: \"bg-red-600\" },\n    { id: \"pinterest\", name: \"Pinterest\", icon: \"📌\", color: \"bg-red-700\" },\n    { id: \"threads\", name: \"Threads\", icon: \"🧵\", color: \"bg-black\" },\n  ];\n\n  const platformOptions = platforms || defaultPlatforms;\n\n  const togglePlatform = (id: string) => {\n    const isConnected = state.connectedPlatforms.includes(id);\n    updateState({\n      connectedPlatforms: isConnected\n        ? state.connectedPlatforms.filter((p) => p !== id)\n        : [...state.connectedPlatforms, id],\n    });\n  };\n\n  return (\n    <div className=\"w-full max-w-4xl\">\n      <div className=\"text-center mb-10\">\n        <h1 className=\"text-3xl md:text-4xl font-extrabold text-foreground mb-3\">\n          Connect your platforms\n        </h1>\n        <p className=\"text-muted-foreground\">\n          Select the platforms you want to manage - you can add more later\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n        {platformOptions.map((platform) => {\n          const isConnected = state.connectedPlatforms.includes(platform.id);\n\n          return (\n            <button\n              key={platform.id}\n              onClick={() => togglePlatform(platform.id)}\n              className={cn(\n                \"group bg-background border rounded-2xl p-6 flex flex-col items-center gap-4 transition-all hover:scale-[1.02]\",\n                isConnected ? \"border-primary ring-2 ring-primary/20 bg-primary/5\" : \"border-border hover:border-primary/40\"\n              )}\n            >\n              <div\n                className={cn(\n                  \"w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl group-hover:scale-110 transition-transform\",\n                  platform.color\n                )}\n              >\n                {platform.icon}\n              </div>\n\n              <div className=\"flex flex-col items-center\">\n                <span className=\"font-bold text-foreground text-sm\">{platform.name}</span>\n                <span\n                  className={cn(\n                    \"text-[10px] font-bold uppercase tracking-wider mt-1 transition-colors\",\n                    isConnected ? \"text-primary\" : \"text-muted-foreground\"\n                  )}\n                >\n                  {isConnected ? \"Connected\" : \"Connect\"}\n                </span>\n              </div>\n            </button>\n          );\n        })}\n      </div>\n\n      {state.connectedPlatforms.length > 0 && (\n        <p className=\"mt-8 text-center text-sm text-muted-foreground animate-in fade-in\">\n          ✨ {state.connectedPlatforms.length} platform{state.connectedPlatforms.length > 1 ? \"s\" : \"\"} selected\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default PlatformsStep;\n"],"mappings":";;;AAAA,SAAS,UAAU;AAoDb,SACE,KADF;AA9BC,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AAExB,QAAM,mBAAmB;AAAA,IACvB,EAAE,IAAI,aAAa,MAAM,aAAa,MAAM,aAAM,OAAO,gDAAgD;AAAA,IACzG,EAAE,IAAI,WAAW,MAAM,eAAe,MAAM,aAAM,OAAO,WAAW;AAAA,IACpE,EAAE,IAAI,YAAY,MAAM,YAAY,MAAM,aAAM,OAAO,cAAc;AAAA,IACrE,EAAE,IAAI,YAAY,MAAM,YAAY,MAAM,aAAM,OAAO,cAAc;AAAA,IACrE,EAAE,IAAI,UAAU,MAAM,UAAU,MAAM,aAAM,OAAO,WAAW;AAAA,IAC9D,EAAE,IAAI,WAAW,MAAM,WAAW,MAAM,aAAM,OAAO,aAAa;AAAA,IAClE,EAAE,IAAI,aAAa,MAAM,aAAa,MAAM,aAAM,OAAO,aAAa;AAAA,IACtE,EAAE,IAAI,WAAW,MAAM,WAAW,MAAM,aAAM,OAAO,WAAW;AAAA,EAClE;AAEA,QAAM,kBAAkB,aAAa;AAErC,QAAM,iBAAiB,CAAC,OAAe;AACrC,UAAM,cAAc,MAAM,mBAAmB,SAAS,EAAE;AACxD,gBAAY;AAAA,MACV,oBAAoB,cAChB,MAAM,mBAAmB,OAAO,CAAC,MAAM,MAAM,EAAE,IAC/C,CAAC,GAAG,MAAM,oBAAoB,EAAE;AAAA,IACtC,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,SAAI,WAAU,oBACb;AAAA,yBAAC,SAAI,WAAU,qBACb;AAAA,0BAAC,QAAG,WAAU,4DAA2D,oCAEzE;AAAA,MACA,oBAAC,OAAE,WAAU,yBAAwB,8EAErC;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,wDACZ,0BAAgB,IAAI,CAAC,aAAa;AACjC,YAAM,cAAc,MAAM,mBAAmB,SAAS,SAAS,EAAE;AAEjE,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM,eAAe,SAAS,EAAE;AAAA,UACzC,WAAW;AAAA,YACT;AAAA,YACA,cAAc,uDAAuD;AAAA,UACvE;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,SAAS;AAAA,gBACX;AAAA,gBAEC,mBAAS;AAAA;AAAA,YACZ;AAAA,YAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,kCAAC,UAAK,WAAU,qCAAqC,mBAAS,MAAK;AAAA,cACnE;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,cAAc,iBAAiB;AAAA,kBACjC;AAAA,kBAEC,wBAAc,cAAc;AAAA;AAAA,cAC/B;AAAA,eACF;AAAA;AAAA;AAAA,QA1BK,SAAS;AAAA,MA2BhB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEC,MAAM,mBAAmB,SAAS,KACjC,qBAAC,OAAE,WAAU,qEAAoE;AAAA;AAAA,MAC5E,MAAM,mBAAmB;AAAA,MAAO;AAAA,MAAU,MAAM,mBAAmB,SAAS,IAAI,MAAM;AAAA,MAAG;AAAA,OAC9F;AAAA,KAEJ;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}

package/dist/onboarding/components/UserTypeStep.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OnboardingState } from '../types/onboarding.js';
+import { ComponentType } from 'react';
+import 'lucide-react';
+
+interface UserTypeOption {
+    id: string;
+    label: string;
+    description: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    badge?: string;
+}
+interface UserTypeStepProps {
+    /** Current onboarding state */
+    state: OnboardingState;
+    /** Update state function */
+    updateState: (updates: Partial<OnboardingState>) => void;
+    /** User type options */
+    options?: UserTypeOption[];
+}
+/**
+ * User Type Selection Step
+ *
+ * First step of onboarding - select user type/category
+ */
+declare const UserTypeStep: ({ state, updateState, options, }: UserTypeStepProps) => react_jsx_runtime.JSX.Element;
+
+export { UserTypeStep, UserTypeStep as default };

package/dist/onboarding/components/UserTypeStep.js

@@ -0,0 +1,93 @@
+"use client";
+
+// src/domains/onboarding/components/UserTypeStep.tsx
+import { Check } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { jsx, jsxs } 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__ */ jsxs("div", { className: "w-full max-w-xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-10", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl md:text-4xl font-extrabold text-foreground mb-3", children: "What describes you best?" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Select the option that best describes your situation" })
+    ] }),
+    /* @__PURE__ */ jsx("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__ */ jsxs(
+        "button",
+        {
+          onClick: () => updateState({ selectedUserType: option.id }),
+          className: cn(
+            "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__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "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__ */ jsx(Check, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-bold text-foreground", children: option.label }),
+                hasBadge && /* @__PURE__ */ jsx("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__ */ jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: option.description })
+            ] }),
+            hasIcon && option.icon && /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-muted flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(option.icon, { className: "h-5 w-5 text-muted-foreground" }) })
+          ]
+        },
+        option.id
+      );
+    }) })
+  ] });
+};
+var UserTypeStep_default = UserTypeStep;
+export {
+  UserTypeStep,
+  UserTypeStep_default as default
+};
+//# sourceMappingURL=UserTypeStep.js.map

package/dist/onboarding/components/UserTypeStep.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/domains/onboarding/components/UserTypeStep.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport type { OnboardingState } from \"../types/onboarding\";\nimport type { ComponentType } from \"react\";\n\ninterface UserTypeOption {\n  id: string;\n  label: string;\n  description: string;\n  icon?: ComponentType<{ className?: string }>;\n  badge?: string;\n}\n\ninterface UserTypeStepProps {\n  /** Current onboarding state */\n  state: OnboardingState;\n  /** Update state function */\n  updateState: (updates: Partial<OnboardingState>) => void;\n  /** User type options */\n  options?: UserTypeOption[];\n}\n\n/**\n * User Type Selection Step\n *\n * First step of onboarding - select user type/category\n */\nexport const UserTypeStep = ({\n  state,\n  updateState,\n  options = [],\n}: UserTypeStepProps) => {\n  // Default options if not provided\n  const defaultOptions: UserTypeOption[] = [\n    {\n      id: \"founder\",\n      label: \"Founder\",\n      description: \"Building your own startup or business\",\n    },\n    {\n      id: \"creator\",\n      label: \"Content Creator\",\n      description: \"Creating content for social media and platforms\",\n    },\n    {\n      id: \"agency\",\n      label: \"Agency\",\n      description: \"Managing multiple client accounts\",\n    },\n    {\n      id: \"enterprise\",\n      label: \"Enterprise\",\n      description: \"Large scale organization with teams\",\n    },\n    {\n      id: \"small-business\",\n      label: \"Small Business\",\n      description: \"Local or niche business owner\",\n    },\n    {\n      id: \"personal\",\n      label: \"Personal\",\n      description: \"Individual looking to grow personal brand\",\n    },\n  ];\n\n  const userTypeOptions = options.length > 0 ? options : defaultOptions;\n\n  return (\n    <div className=\"w-full max-w-xl\">\n      <div className=\"text-center mb-10\">\n        <h1 className=\"text-3xl md:text-4xl font-extrabold text-foreground mb-3\">\n          What describes you best?\n        </h1>\n        <p className=\"text-muted-foreground\">\n          Select the option that best describes your situation\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-3\">\n        {userTypeOptions.map((option) => {\n          const isSelected = state.selectedUserType === option.id;\n          const hasBadge = option.badge != null;\n          const hasIcon = option.icon != null;\n\n          return (\n            <button\n              key={option.id}\n              onClick={() => updateState({ selectedUserType: option.id })}\n              className={cn(\n                \"w-full flex items-center gap-4 p-5 rounded-2xl border bg-background text-left transition-all group\",\n                isSelected\n                  ? \"border-primary ring-2 ring-primary/20 bg-primary/5\"\n                  : \"border-border hover:border-primary/40 hover:bg-muted/50\"\n              )}\n            >\n              <div\n                className={cn(\n                  \"w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors\",\n                  isSelected\n                    ? \"border-primary bg-primary text-white\"\n                    : \"border-muted-foreground/30\"\n                )}\n              >\n                {isSelected && <Check className=\"h-4 w-4\" />}\n              </div>\n\n              <div className=\"flex-1\">\n                <div className=\"flex items-center gap-2\">\n                  <p className=\"font-bold text-foreground\">{option.label}</p>\n                  {hasBadge && (\n                    <span className=\"text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-primary/10 text-primary\">\n                      {option.badge}\n                    </span>\n                  )}\n                </div>\n                <p className=\"text-sm text-muted-foreground mt-0.5\">\n                  {option.description}\n                </p>\n              </div>\n\n              {hasIcon && option.icon && (\n                <div className=\"w-10 h-10 rounded-xl bg-muted flex items-center justify-center shrink-0\">\n                  <option.icon className=\"h-5 w-5 text-muted-foreground\" />\n                </div>\n              )}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default UserTypeStep;\n"],"mappings":";;;AAAA,SAAS,aAAa;AACtB,SAAS,UAAU;AAqEb,SACE,KADF;AA3CC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AACb,MAAyB;AAEvB,QAAM,iBAAmC;AAAA,IACvC;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IACf;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,kBAAkB,QAAQ,SAAS,IAAI,UAAU;AAEvD,SACE,qBAAC,SAAI,WAAU,mBACb;AAAA,yBAAC,SAAI,WAAU,qBACb;AAAA,0BAAC,QAAG,WAAU,4DAA2D,sCAEzE;AAAA,MACA,oBAAC,OAAE,WAAU,yBAAwB,kEAErC;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,0BACZ,0BAAgB,IAAI,CAAC,WAAW;AAC/B,YAAM,aAAa,MAAM,qBAAqB,OAAO;AACrD,YAAM,WAAW,OAAO,SAAS;AACjC,YAAM,UAAU,OAAO,QAAQ;AAE/B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM,YAAY,EAAE,kBAAkB,OAAO,GAAG,CAAC;AAAA,UAC1D,WAAW;AAAA,YACT;AAAA,YACA,aACI,uDACA;AAAA,UACN;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,aACI,yCACA;AAAA,gBACN;AAAA,gBAEC,wBAAc,oBAAC,SAAM,WAAU,WAAU;AAAA;AAAA,YAC5C;AAAA,YAEA,qBAAC,SAAI,WAAU,UACb;AAAA,mCAAC,SAAI,WAAU,2BACb;AAAA,oCAAC,OAAE,WAAU,6BAA6B,iBAAO,OAAM;AAAA,gBACtD,YACC,oBAAC,UAAK,WAAU,sGACb,iBAAO,OACV;AAAA,iBAEJ;AAAA,cACA,oBAAC,OAAE,WAAU,wCACV,iBAAO,aACV;AAAA,eACF;AAAA,YAEC,WAAW,OAAO,QACjB,oBAAC,SAAI,WAAU,2EACb,8BAAC,OAAO,MAAP,EAAY,WAAU,iCAAgC,GACzD;AAAA;AAAA;AAAA,QArCG,OAAO;AAAA,MAuCd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/onboarding/components/index.d.ts

@@ -0,0 +1,9 @@
+export { OnboardingWizard } from './OnboardingWizard.js';
+export { UserTypeStep } from './UserTypeStep.js';
+export { AppFocusStep } from './AppFocusStep.js';
+export { PlatformsStep } from './PlatformsStep.js';
+export { PlanStep } from './PlanStep.js';
+import 'react/jsx-runtime';
+import '../types/onboarding.js';
+import 'lucide-react';
+import 'react';