@umituz/web-dashboard 2.0.7 → 2.0.8

package/dist/onboarding/components/AppFocusStep.js

@@ -1,86 +0,0 @@
-"use client";
-
-// src/domains/onboarding/components/AppFocusStep.tsx
-import { Check } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
-import { jsx, jsxs } 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__ */ 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 type of app are you building?" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Select all that apply - you can change this later" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: types.map((type) => {
-      const isSelected = type.id === "mobile" ? state.hasMobileApp : state.hasWebApp;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => {
-            if (type.id === "mobile") {
-              updateState({ hasMobileApp: !state.hasMobileApp });
-            } else {
-              updateState({ hasWebApp: !state.hasWebApp });
-            }
-          },
-          className: cn(
-            "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__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "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__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "font-bold text-foreground text-lg", children: type.label }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: type.description })
-            ] }),
-            /* @__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" })
-              }
-            )
-          ]
-        },
-        type.id
-      );
-    }) }),
-    (state.hasMobileApp || state.hasWebApp) && /* @__PURE__ */ jsx("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." })
-  ] });
-};
-var AppFocusStep_default = AppFocusStep;
-export {
-  AppFocusStep,
-  AppFocusStep_default as default
-};
-//# sourceMappingURL=AppFocusStep.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/domains/onboarding/components/AppFocusStep.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport type { OnboardingState } from \"../types/onboarding\";\n\ninterface AppFocusStepProps {\n  /** Current onboarding state */\n  state: OnboardingState;\n  /** Update state function */\n  updateState: (updates: Partial<OnboardingState>) => void;\n  /** Custom app type options */\n  appTypes?: Array<{\n    id: string;\n    label: string;\n    description: string;\n    icon: string;\n  }>;\n}\n\n/**\n * App Focus Selection Step\n *\n * Second step - select which app types to focus on (mobile/web)\n */\nexport const AppFocusStep = ({\n  state,\n  updateState,\n  appTypes,\n}: AppFocusStepProps) => {\n  // Default app types\n  const defaultAppTypes = [\n    {\n      id: \"mobile\",\n      label: \"Mobile App\",\n      description: \"iOS or Android application\",\n      icon: \"📱\",\n    },\n    {\n      id: \"web\",\n      label: \"Web App\",\n      description: \"Web application or website\",\n      icon: \"💻\",\n    },\n  ];\n\n  const types = appTypes || defaultAppTypes;\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 type of app are you building?\n        </h1>\n        <p className=\"text-muted-foreground\">\n          Select all that apply - you can change this later\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-4\">\n        {types.map((type) => {\n          const isSelected = type.id === \"mobile\" ? state.hasMobileApp : state.hasWebApp;\n\n          return (\n            <button\n              key={type.id}\n              onClick={() => {\n                if (type.id === \"mobile\") {\n                  updateState({ hasMobileApp: !state.hasMobileApp });\n                } else {\n                  updateState({ hasWebApp: !state.hasWebApp });\n                }\n              }}\n              className={cn(\n                \"w-full flex items-center gap-4 p-6 rounded-2xl border bg-background text-left transition-all\",\n                isSelected ? \"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 shrink-0 transition-transform\",\n                  isSelected && \"scale-110\"\n                )}\n              >\n                {type.icon}\n              </div>\n\n              <div className=\"flex-1\">\n                <p className=\"font-bold text-foreground text-lg\">{type.label}</p>\n                <p className=\"text-sm text-muted-foreground\">{type.description}</p>\n              </div>\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 ? \"border-primary bg-primary text-white\" : \"border-muted-foreground/30\"\n                )}\n              >\n                {isSelected && <Check className=\"h-4 w-4\" />}\n              </div>\n            </button>\n          );\n        })}\n      </div>\n\n      {(state.hasMobileApp || state.hasWebApp) && (\n        <p className=\"mt-8 text-center text-sm text-muted-foreground animate-in fade-in slide-in-from-bottom-2 duration-500\">\n          ✨ Great choice! We'll tailor your experience accordingly.\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default AppFocusStep;\n"],"mappings":";;;AAAA,SAAS,aAAa;AACtB,SAAS,UAAU;AA+Cb,SACE,KADF;AAzBC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AAEvB,QAAM,kBAAkB;AAAA,IACtB;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,QAAQ,YAAY;AAE1B,SACE,qBAAC,SAAI,WAAU,mBACb;AAAA,yBAAC,SAAI,WAAU,qBACb;AAAA,0BAAC,QAAG,WAAU,4DAA2D,gDAEzE;AAAA,MACA,oBAAC,OAAE,WAAU,yBAAwB,+DAErC;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,0BACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAM,aAAa,KAAK,OAAO,WAAW,MAAM,eAAe,MAAM;AAErE,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,gBAAI,KAAK,OAAO,UAAU;AACxB,0BAAY,EAAE,cAAc,CAAC,MAAM,aAAa,CAAC;AAAA,YACnD,OAAO;AACL,0BAAY,EAAE,WAAW,CAAC,MAAM,UAAU,CAAC;AAAA,YAC7C;AAAA,UACF;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,aAAa,uDAAuD;AAAA,UACtE;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc;AAAA,gBAChB;AAAA,gBAEC,eAAK;AAAA;AAAA,YACR;AAAA,YAEA,qBAAC,SAAI,WAAU,UACb;AAAA,kCAAC,OAAE,WAAU,qCAAqC,eAAK,OAAM;AAAA,cAC7D,oBAAC,OAAE,WAAU,iCAAiC,eAAK,aAAY;AAAA,eACjE;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,aAAa,yCAAyC;AAAA,gBACxD;AAAA,gBAEC,wBAAc,oBAAC,SAAM,WAAU,WAAU;AAAA;AAAA,YAC5C;AAAA;AAAA;AAAA,QAlCK,KAAK;AAAA,MAmCZ;AAAA,IAEJ,CAAC,GACH;AAAA,KAEE,MAAM,gBAAgB,MAAM,cAC5B,oBAAC,OAAE,WAAU,yGAAwG,4EAErH;AAAA,KAEJ;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

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

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { OnboardingWizardProps } from '../types/onboarding.js';
-import 'lucide-react';
-import 'react';
-
-/**
- * Onboarding Wizard Component
- *
- * Main onboarding container with step management
- */
-declare const OnboardingWizard: ({ config, initialState, onComplete, onCancel, }: OnboardingWizardProps) => react_jsx_runtime.JSX.Element;
-
-export { OnboardingWizard, OnboardingWizard as default };

package/dist/onboarding/components/OnboardingWizard.js

@@ -1,332 +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
-      }
-    )
-  ] });
-};
-var OnboardingWizard_default = OnboardingWizard;
-export {
-  OnboardingWizard,
-  OnboardingWizard_default as default
-};
-//# sourceMappingURL=OnboardingWizard.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/domains/onboarding/components/OnboardingWizard.tsx","../../../src/domains/layouts/components/DashboardLayout.tsx","../../../src/domains/layouts/components/DashboardSidebar.tsx","../../../src/domains/layouts/components/BrandLogo.tsx","../../../src/domains/layouts/components/DashboardHeader.tsx"],"sourcesContent":["import { useState, useCallback } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { Check, Loader2 } from \"lucide-react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\nimport { Button } from \"@umituz/web-design-system/atoms\";\nimport { BrandLogo } from \"../../layouts/components\";\nimport type {\n  OnboardingConfig,\n  OnboardingState,\n  OnboardingWizardProps,\n  StepProgressProps,\n  StepNavigationProps,\n} from \"../types/onboarding\";\n\n/**\n * Step Progress Component\n */\nconst StepProgress = ({ currentStep, totalSteps, completedSteps = [] }: StepProgressProps) => {\n  return (\n    <div className=\"flex items-center gap-0 flex-1 justify-center\">\n      {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {\n        const isCompleted = completedSteps.includes(step) || step < currentStep;\n        const isCurrent = step === currentStep;\n\n        return (\n          <div key={step} className=\"flex items-center\">\n            <div\n              className={cn(\n                \"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors\",\n                isCompleted || isCurrent\n                  ? \"bg-primary text-primary-foreground\"\n                  : \"bg-muted text-muted-foreground\"\n              )}\n            >\n              {isCompleted ? <Check className=\"h-4 w-4\" /> : step}\n            </div>\n            {step < totalSteps && (\n              <div\n                className={cn(\n                  \"w-12 h-0.5 mx-1\",\n                  step < currentStep ? \"bg-primary\" : \"bg-border\"\n                )}\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\n/**\n * Step Navigation Component\n */\nconst StepNavigation = ({\n  currentStep,\n  totalSteps,\n  canGoNext,\n  isSaving = false,\n  nextLabel,\n  prevLabel,\n  onNext,\n  onPrev,\n  allowSkip = false,\n  onSkip,\n}: StepNavigationProps) => {\n  const t = (key: string) => key; // Simple i18n fallback\n\n  return (\n    <footer className=\"bg-background border-t border-border px-8 py-6 flex items-center justify-between\">\n      {currentStep > 1 ? (\n        <Button\n          variant=\"ghost\"\n          onClick={onPrev}\n          className=\"rounded-full px-6\"\n          disabled={isSaving}\n        >\n          ← {prevLabel || t(\"onboarding.buttons.back\")}\n        </Button>\n      ) : (\n        <div />\n      )}\n\n      <div className=\"flex items-center gap-3\">\n        {allowSkip && onSkip && currentStep < totalSteps && (\n          <Button\n            variant=\"ghost\"\n            onClick={onSkip}\n            className=\"rounded-full px-6\"\n            disabled={isSaving}\n          >\n            {t(\"onboarding.buttons.skip\")}\n          </Button>\n        )}\n\n        <Button\n          onClick={onNext}\n          className=\"rounded-full px-12 h-12 text-base font-bold\"\n          disabled={!canGoNext || isSaving}\n        >\n          {isSaving ? (\n            <>\n              <Loader2 className=\"h-4 w-4 mr-2 animate-spin\" />\n              {t(\"onboarding.buttons.finalizing\")}\n            </>\n          ) : currentStep === totalSteps ? (\n            nextLabel || t(\"onboarding.buttons.getStarted\")\n          ) : (\n            t(\"onboarding.buttons.next\")\n          )}\n        </Button>\n      </div>\n    </footer>\n  );\n};\n\n/**\n * Onboarding Wizard Component\n *\n * Main onboarding container with step management\n */\nexport const OnboardingWizard = ({\n  config,\n  initialState,\n  onComplete,\n  onCancel,\n}: OnboardingWizardProps) => {\n  const navigate = useNavigate();\n  const [currentStep, setCurrentStep] = useState(1);\n  const [saving, setSaving] = useState(false);\n  const [completedSteps, setCompletedSteps] = useState<number[]>([]);\n\n  // State management\n  const [state, setState] = useState<OnboardingState>({\n    currentStep: 1,\n    connectedPlatforms: [],\n    billingCycle: \"monthly\",\n    stepData: {},\n    ...initialState,\n  });\n\n  const totalSteps = config.steps.length;\n\n  // Validate current step\n  const canGoNext = useCallback(() => {\n    const currentStepConfig = config.steps[currentStep - 1];\n    if (currentStepConfig?.validate) {\n      return currentStepConfig.validate(state);\n    }\n    return true;\n  }, [config.steps, currentStep, state]);\n\n  // Navigation handlers\n  const goToNext = useCallback(async () => {\n    if (currentStep < totalSteps) {\n      setCompletedSteps((prev) => [...prev, currentStep]);\n      setCurrentStep((prev) => prev + 1);\n      setState((prev) => ({ ...prev, currentStep: prev.currentStep + 1 }));\n    } else {\n      // Complete onboarding\n      setSaving(true);\n      try {\n        await onComplete?.(state);\n        navigate(config.completeRoute);\n      } catch (error) {\n        console.error(\"Onboarding completion error:\", error);\n        setSaving(false);\n      }\n    }\n  }, [currentStep, totalSteps, state, onComplete, navigate, config.completeRoute]);\n\n  const goToPrev = useCallback(() => {\n    if (currentStep > 1) {\n      setCurrentStep((prev) => prev - 1);\n      setState((prev) => ({ ...prev, currentStep: prev.currentStep - 1 }));\n    }\n  }, [currentStep]);\n\n  const goToStep = useCallback((step: number) => {\n    if (step >= 1 && step <= totalSteps) {\n      setCurrentStep(step);\n      setState((prev) => ({ ...prev, currentStep: step }));\n    }\n  }, [totalSteps]);\n\n  const updateState = useCallback((updates: Partial<OnboardingState>) => {\n    setState((prev) => ({ ...prev, ...updates }));\n  }, []);\n\n  const handleCancel = useCallback(() => {\n    onCancel?.();\n    navigate(config.cancelRoute || \"/\");\n  }, [onCancel, navigate, config.cancelRoute]);\n\n  const handleSkip = useCallback(() => {\n    if (currentStep < totalSteps) {\n      goToNext();\n    }\n  }, [currentStep, totalSteps, goToNext]);\n\n  // Render current step content\n  const currentStepConfig = config.steps[currentStep - 1];\n  const StepContent = currentStepConfig?.component;\n\n  return (\n    <div className=\"min-h-screen bg-secondary flex flex-col\">\n      {/* Header */}\n      <header className=\"bg-background border-b border-border px-6 py-3 flex items-center\">\n        <div className=\"flex items-center gap-2 mr-8\">\n          <BrandLogo size={28} />\n          <span className=\"font-bold text-foreground\">{config.brandName}</span>\n        </div>\n\n        {config.showProgress !== false && (\n          <StepProgress\n            currentStep={currentStep}\n            totalSteps={totalSteps}\n            completedSteps={completedSteps}\n          />\n        )}\n\n        <div className=\"w-24\" />\n      </header>\n\n      {/* Main Content */}\n      <main className=\"flex-1 flex flex-col items-center justify-center px-4 py-12\">\n        <div className=\"w-full max-w-4xl\">\n          {StepContent ? (\n            // Check if it's a function component (has call signature)\n            typeof StepContent === 'function' ? (\n              <StepContent\n                state={state}\n                updateState={updateState}\n                goToNext={goToNext}\n                goToPrev={goToPrev}\n                goToStep={goToStep}\n                config={config}\n              />\n            ) : (\n              // Otherwise it's a ReactElement\n              StepContent\n            )\n          ) : null}\n        </div>\n      </main>\n\n      {/* Footer Navigation */}\n      <StepNavigation\n        currentStep={currentStep}\n        totalSteps={totalSteps}\n        canGoNext={canGoNext()}\n        isSaving={saving}\n        onNext={goToNext}\n        onPrev={goToPrev}\n        allowSkip={config.allowSkip}\n        onSkip={handleSkip}\n      />\n    </div>\n  );\n};\n\nexport default OnboardingWizard;\n","import { useState, useEffect } from \"react\";\nimport { useLocation, Outlet, Navigate } from \"react-router-dom\";\nimport { Skeleton } from \"@umituz/web-design-system/atoms\";\nimport { DashboardSidebar } from \"./DashboardSidebar\";\nimport { DashboardHeader } from \"./DashboardHeader\";\nimport type { DashboardLayoutConfig } from \"../types/layout\";\nimport type { DashboardNotification } from \"../types/notification\";\nimport type { DashboardUser } from \"../types/user\";\n\ninterface DashboardLayoutProps {\n  /** Layout configuration */\n  config: DashboardLayoutConfig;\n  /** Auth user */\n  user?: DashboardUser;\n  /** Auth loading state */\n  authLoading?: boolean;\n  /** Authenticated state */\n  isAuthenticated?: boolean;\n  /** Notifications */\n  notifications?: DashboardNotification[];\n  /** Logout function */\n  onLogout?: () => Promise<void>;\n  /** Mark all as read function */\n  onMarkAllRead?: () => void;\n  /** Dismiss notification function */\n  onDismissNotification?: (id: string) => void;\n  /** Login route for redirect */\n  loginRoute?: string;\n}\n\n/**\n * Dashboard Layout Component\n *\n * Main layout wrapper for dashboard pages.\n * Provides sidebar, header, and content area with responsive design.\n *\n * Features:\n * - Collapsible sidebar\n * - Mobile menu overlay\n * - Breadcrumb page titles\n * - Loading skeletons\n * - Auth protection\n *\n * @param props - Dashboard layout props\n */\nexport const DashboardLayout = ({\n  config,\n  user,\n  authLoading = false,\n  isAuthenticated = true,\n  notifications = [],\n  onLogout,\n  onMarkAllRead,\n  onDismissNotification,\n  loginRoute = \"/login\",\n}: DashboardLayoutProps) => {\n  const location = useLocation();\n  const [collapsed, setCollapsed] = useState(false);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    setLoading(true);\n    const timer = setTimeout(() => setLoading(false), 300);\n    return () => clearTimeout(timer);\n  }, [location.pathname]);\n\n  useEffect(() => {\n    setMobileOpen(false);\n  }, [location.pathname]);\n\n  if (authLoading) return null;\n  if (!isAuthenticated) return <Navigate to={loginRoute} replace />;\n\n  const activeItem = config.sidebarGroups\n    .flatMap((group) => group.items)\n    .find((i) => i.path === location.pathname);\n\n  const getTitle = () => {\n    if (!activeItem) return config.extraTitleMap?.[location.pathname] || \"Dashboard\";\n    return activeItem.label; // Note: In real app, this would be translated\n  };\n\n  const currentTitle = getTitle();\n\n  return (\n    <div className=\"flex h-screen w-full bg-background font-sans\">\n      {/* Desktop Sidebar */}\n      <aside\n        className={`hidden md:flex flex-col shrink-0 border-r border-sidebar-border bg-sidebar transition-all duration-300 ${\n          collapsed ? \"w-16\" : \"w-60\"\n        }`}\n      >\n        <DashboardSidebar\n          collapsed={collapsed}\n          setCollapsed={setCollapsed}\n          sidebarGroups={config.sidebarGroups}\n          brandName={config.brandName}\n          brandTagline={config.brandTagline}\n          user={user}\n        />\n      </aside>\n\n      {/* Mobile Menu Overlay */}\n      {mobileOpen && (\n        <div className=\"fixed inset-0 z-50 md:hidden\">\n          <div className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\" onClick={() => setMobileOpen(false)} />\n          <aside className=\"absolute left-0 top-0 h-full w-60 border-r border-sidebar-border bg-sidebar shadow-xl\">\n            <DashboardSidebar\n              collapsed={false}\n              setCollapsed={() => setMobileOpen(false)}\n              sidebarGroups={config.sidebarGroups}\n              brandName={config.brandName}\n              brandTagline={config.brandTagline}\n              user={user}\n            />\n          </aside>\n        </div>\n      )}\n\n      {/* Main Content Area */}\n      <div className=\"flex flex-1 flex-col overflow-hidden min-w-0\">\n        <DashboardHeader\n          collapsed={collapsed}\n          setCollapsed={setCollapsed}\n          setMobileOpen={setMobileOpen}\n          title={currentTitle}\n          user={user}\n          notifications={notifications}\n          onLogout={onLogout}\n          onMarkAllRead={onMarkAllRead}\n          onDismissNotification={onDismissNotification}\n        />\n\n        <main className=\"flex-1 overflow-y-auto p-4 md:p-8\">\n          {loading ? (\n            <div className=\"mx-auto w-full max-w-7xl space-y-6\">\n              <Skeleton className=\"h-8 w-1/3 rounded-xl\" />\n              <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n                {Array.from({ length: 4 }).map((_, i) => (\n                  <Skeleton key={i} className=\"h-28 rounded-2xl\" />\n                ))}\n              </div>\n              <Skeleton className=\"h-64 rounded-[32px]\" />\n            </div>\n          ) : (\n            <Outlet />\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n\nexport default DashboardLayout;\n","import { useState } from \"react\";\nimport { Link, useLocation } from \"react-router-dom\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"@umituz/web-design-system/atoms\";\nimport { BrandLogo } from \"./BrandLogo\";\nimport { PenTool, Menu, ChevronLeft, ChevronDown, ChevronRight } from \"lucide-react\";\nimport type { DashboardSidebarProps } from \"../types/layout\";\nimport type { DashboardUser } from \"../types/user\";\nimport type { SidebarGroup } from \"../types/sidebar\";\nimport { filterSidebarItems } from \"../utils/dashboard\";\n\ninterface DashboardSidebarPropsExtended extends DashboardSidebarProps {\n  /** Sidebar groups configuration */\n  sidebarGroups: SidebarGroup[];\n  /** Brand name */\n  brandName?: string;\n  /** Brand tagline */\n  brandTagline?: string;\n  /** Create post route */\n  createPostRoute?: string;\n  /** Auth user */\n  user?: DashboardUser;\n}\n\n/**\n * Dashboard Sidebar Component\n *\n * Displays collapsible sidebar with navigation menu items.\n * Supports app-based filtering (mobile/web) and collapsible groups.\n *\n * @param props - Dashboard sidebar props\n */\nexport const DashboardSidebar = ({\n  collapsed,\n  setCollapsed,\n  sidebarGroups,\n  brandName = \"App\",\n  brandTagline = \"grow smarter\",\n  createPostRoute = \"/dashboard/create\",\n  user,\n}: DashboardSidebarPropsExtended) => {\n  const location = useLocation();\n  const { t } = useTranslation();\n  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});\n\n  const toggleGroup = (title: string) => {\n    setCollapsedGroups(prev => ({\n      ...prev,\n      [title]: !prev[title]\n    }));\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      {/* Brand Section */}\n      <div className=\"flex h-16 items-center gap-3 border-b border-sidebar-border px-4 transition-all duration-300\">\n        <BrandLogo size={32} />\n        {!collapsed && (\n          <div className=\"flex flex-col -gap-1\">\n            <span className=\"text-2xl font-black text-sidebar-foreground tracking-tighter leading-none\">{brandName}</span>\n            <span className=\"text-[11px] font-bold text-primary/70 lowercase tracking-tight mt-2 ml-1 select-none underline decoration-primary/40 underline-offset-[6px] decoration-2\">\n              {brandTagline}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Create Button */}\n      <div className=\"px-3 py-4 border-b border-sidebar-border/50\">\n        <Link to={createPostRoute}>\n          <Button\n            variant=\"default\"\n            className={`w-full gap-3 shadow-glow transition-all active:scale-95 group overflow-hidden rounded-xl ${\n              collapsed ? \"px-0 justify-center h-10 w-10 mx-auto\" : \"justify-start px-4 h-11\"\n            }`}\n            title={collapsed ? t('sidebar.createPost') : undefined}\n          >\n            <PenTool className={`shrink-0 transition-transform duration-300 ${collapsed ? \"h-5 w-5\" : \"h-4 w-4 group-hover:scale-110\"}`} />\n            {!collapsed && <span className=\"font-bold tracking-tight\">{t('sidebar.createPost')}</span>}\n          </Button>\n        </Link>\n      </div>\n\n      {/* Navigation */}\n      <nav className=\"flex-1 overflow-y-auto px-2 py-3 scrollbar-hide\">\n        <div className=\"space-y-6\">\n          {sidebarGroups.map((group) => {\n            const filteredItems = filterSidebarItems(group.items, user);\n\n            if (filteredItems.length === 0) return null;\n\n            const isGroupCollapsed = collapsedGroups[group.title];\n\n            return (\n              <div key={group.title} className=\"space-y-1\">\n                {!collapsed && (\n                  <button\n                    onClick={() => toggleGroup(group.title)}\n                    className=\"w-full flex items-center justify-between px-3 mb-2 group/header\"\n                  >\n                    <span className=\"text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/40 group-hover/header:text-sidebar-foreground/70 transition-colors\">\n                      {group.title === \"sidebar.ai\" ? `${brandName} AI` : t(group.title)}\n                    </span>\n                    {isGroupCollapsed ? (\n                      <ChevronRight className=\"h-3 w-3 text-sidebar-foreground/30 flex-shrink-0 group-hover/header:text-sidebar-foreground/50 transition-colors\" />\n                    ) : (\n                      <ChevronDown className=\"h-3 w-3 text-sidebar-foreground/30 flex-shrink-0 group-hover/header:text-sidebar-foreground/50 transition-colors\" />\n                    )}\n                  </button>\n                )}\n\n                {(!isGroupCollapsed || collapsed) && filteredItems.map((item) => {\n                  const active = location.pathname === item.path;\n                  return (\n                    <Link\n                      key={item.path}\n                      to={item.path}\n                      className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${\n                        active\n                          ? \"bg-sidebar-accent text-sidebar-accent-foreground shadow-sm\"\n                          : \"text-sidebar-foreground/70 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground\"\n                      } ${collapsed ? \"justify-center\" : \"\"}`}\n                      title={collapsed ? t(item.label) : undefined}\n                    >\n                      <item.icon className={`h-4 w-4 shrink-0 transition-transform ${active && \"scale-110\"}`} />\n                      {!collapsed && <span>{t(item.label)}</span>}\n                    </Link>\n                  );\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </nav>\n\n      {/* Collapse Toggle */}\n      <div className=\"border-t border-sidebar-border p-3\">\n        <div className={`flex items-center ${collapsed ? \"justify-center\" : \"justify-between\"}`}>\n          {!collapsed && (\n            <p className=\"text-[10px] uppercase tracking-wider text-sidebar-foreground/40 font-bold px-2\">\n              {t('sidebar.system')}\n            </p>\n          )}\n          <Button variant=\"ghost\" size=\"icon\" onClick={() => setCollapsed(!collapsed)} className=\"text-sidebar-foreground/70\">\n            {collapsed ? <Menu className=\"h-4 w-4\" /> : <ChevronLeft className=\"h-4 w-4\" />}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n","import React from \"react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\n\ninterface BrandLogoProps {\n  className?: string;\n  size?: number;\n}\n\n/**\n * BrandLogo Component\n *\n * Displays the application brand logo as an SVG.\n * Supports custom sizing and styling through className.\n *\n * @param className - Optional CSS classes for styling\n * @param size - Width and height in pixels (default: 32)\n */\nexport const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\"shrink-0\", className)}\n    >\n      {/* Solid Foundation / Platform */}\n      <rect\n        x=\"15\"\n        y=\"65\"\n        width=\"70\"\n        height=\"15\"\n        rx=\"4\"\n        fill=\"hsl(var(--primary))\"\n      />\n\n      {/* Assembly Paths / Structure */}\n      <rect\n        x=\"25\"\n        y=\"25\"\n        width=\"12\"\n        height=\"40\"\n        rx=\"2\"\n        fill=\"hsl(var(--primary))\"\n      />\n      <rect\n        x=\"44\"\n        y=\"35\"\n        width=\"12\"\n        height=\"30\"\n        rx=\"2\"\n        fill=\"hsl(var(--primary))\"\n      />\n      <rect\n        x=\"63\"\n        y=\"20\"\n        width=\"12\"\n        height=\"45\"\n        rx=\"2\"\n        fill=\"hsl(var(--primary))\"\n      />\n\n      {/* Modern Accent - The 'Assembly' Bridge */}\n      <rect\n        x=\"20\"\n        y=\"45\"\n        width=\"60\"\n        height=\"10\"\n        rx=\"2\"\n        fill=\"hsl(var(--secondary))\"\n      />\n\n      {/* Connection Point / Beacon */}\n      <circle\n        cx=\"50\"\n        cy=\"20\"\n        r=\"5\"\n        fill=\"hsl(var(--secondary))\"\n      />\n    </svg>\n  );\n};\n","import React, { useState } from \"react\";\nimport {\n  Bell, X, Sun, Moon, Menu, User, Settings, LogOut,\n  ChevronDown, CreditCard\n} from \"lucide-react\";\nimport { Button } from \"@umituz/web-design-system/atoms\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport type { DashboardHeaderProps } from \"../types/layout\";\nimport type { DashboardNotification } from \"../types/notification\";\nimport type { DashboardUser } from \"../types/user\";\nimport { formatNotificationTime } from \"../utils/dashboard\";\n\ninterface DashboardHeaderPropsExtended extends DashboardHeaderProps {\n  /** Auth user */\n  user?: DashboardUser;\n  /** Notifications */\n  notifications?: DashboardNotification[];\n  /** Logout function */\n  onLogout?: () => Promise<void>;\n  /** Mark all as read function */\n  onMarkAllRead?: () => void;\n  /** Dismiss notification function */\n  onDismissNotification?: (id: string) => void;\n  /** Settings route */\n  settingsRoute?: string;\n  /** Profile route */\n  profileRoute?: string;\n  /** Billing route */\n  billingRoute?: string;\n}\n\n/**\n * Dashboard Header Component\n *\n * Displays top navigation bar with theme toggle, notifications,\n * user menu, and organisation selector.\n *\n * @param props - Dashboard header props\n */\nexport const DashboardHeader = ({\n  collapsed,\n  setCollapsed,\n  setMobileOpen,\n  title,\n  user,\n  notifications = [],\n  onLogout,\n  onMarkAllRead,\n  onDismissNotification,\n  settingsRoute = \"/dashboard/settings\",\n  profileRoute = \"/dashboard/profile\",\n  billingRoute = \"/dashboard/billing\",\n}: DashboardHeaderPropsExtended) => {\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const [notifOpen, setNotifOpen] = useState(false);\n  const [profileOpen, setProfileOpen] = useState(false);\n\n  const unreadCount = notifications.filter((n) => !n.read).length;\n\n  const markAllRead = () => {\n    onMarkAllRead?.();\n  };\n\n  const handleLogout = async () => {\n    try {\n      await onLogout?.();\n      navigate(\"/login\");\n    } catch {\n      // Error handling can be added by parent component\n    }\n  };\n\n  // Placeholder components - these should be provided by the consuming app\n  const ThemeToggle = () => {\n    const [resolvedTheme, setResolvedTheme] = React.useState<\"light\" | \"dark\">(\"light\");\n\n    return (\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={() => setResolvedTheme(resolvedTheme === \"light\" ? \"dark\" : \"light\")}\n        className=\"text-muted-foreground h-9 w-9\"\n        title={resolvedTheme === \"dark\" ? t('common.tooltips.switchLight') : t('common.tooltips.switchDark')}\n      >\n        {resolvedTheme === \"dark\" ? <Sun className=\"h-4 w-4\" /> : <Moon className=\"h-4 w-4\" />}\n      </Button>\n    );\n  };\n\n  return (\n    <header className=\"flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 z-30\">\n      <div className=\"flex items-center gap-3\">\n        <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" onClick={() => setMobileOpen(true)}>\n          <Menu className=\"h-5 w-5\" />\n        </Button>\n        {collapsed && (\n          <Button variant=\"ghost\" size=\"icon\" className=\"hidden md:inline-flex\" onClick={() => setCollapsed(false)}>\n            <Menu className=\"h-5 w-5\" />\n          </Button>\n        )}\n        <h2 className=\"text-sm font-semibold text-foreground\">\n          {title}\n        </h2>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        {/* Theme Toggle */}\n        <ThemeToggle />\n\n        {/* Notifications */}\n        <div className=\"relative\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"text-muted-foreground relative h-9 w-9\"\n            onClick={() => {\n              setNotifOpen(!notifOpen);\n              setProfileOpen(false);\n            }}\n          >\n            <Bell className=\"h-4 w-4\" />\n            {unreadCount > 0 && (\n              <span className=\"absolute top-2 right-2 flex h-2 w-2\">\n                <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-destructive opacity-75\"></span>\n                <span className=\"relative inline-flex rounded-full h-2 w-2 bg-destructive\"></span>\n              </span>\n            )}\n          </Button>\n\n          {notifOpen && (\n            <>\n              <div className=\"fixed inset-0 z-40\" onClick={() => setNotifOpen(false)} />\n              <div className=\"absolute top-12 right-0 w-80 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200\">\n                <div className=\"flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50\">\n                  <h3 className=\"text-xs font-bold uppercase tracking-wider text-foreground\">{t('dashboard.notifications.title')}</h3>\n                  {unreadCount > 0 && (\n                    <button onClick={markAllRead} className=\"text-[10px] font-bold text-primary hover:underline uppercase\">{t('dashboard.notifications.markAllRead')}</button>\n                  )}\n                </div>\n\n                <div className=\"max-h-[400px] overflow-y-auto\">\n                  {notifications.map((n) => (\n                    <div key={n.id} className={`px-4 py-3 border-b border-border last:border-0 flex items-start gap-3 transition-colors hover:bg-muted/30 ${!n.read ? \"bg-primary/5\" : \"\"}`}>\n                      <div className=\"flex-1 min-w-0\">\n                        <p className=\"text-sm text-foreground leading-snug\">{n.text}</p>\n                        <p className=\"text-[10px] text-muted-foreground mt-1 flex items-center gap-1\">\n                          <span className=\"inline-block w-1 h-1 rounded-full bg-muted-foreground/30\" />\n                          {formatNotificationTime(n.createdAt, t)}\n                        </p>\n                      </div>\n                      <button\n                        onClick={() => onDismissNotification?.(n.id)}\n                        className=\"text-muted-foreground/50 hover:text-foreground shrink-0 transition-colors\"\n                      >\n                        <X className=\"h-3 w-3\" />\n                      </button>\n                    </div>\n                  ))}\n                  {notifications.length === 0 && (\n                    <div className=\"px-4 py-10 text-center\">\n                      <div className=\"mx-auto w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3\">\n                        <Bell className=\"h-5 w-5 text-muted-foreground/50\" />\n                      </div>\n                      <p className=\"text-sm text-muted-foreground\">{t('dashboard.notifications.none')}</p>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n\n        <div className=\"h-6 w-px bg-border mx-1\" />\n\n        <div className=\"relative\">\n          <button\n            onClick={() => {\n              setProfileOpen(!profileOpen);\n              setNotifOpen(false);\n            }}\n            className=\"flex items-center gap-2 p-1 pl-1 rounded-full hover:bg-muted transition-colors group\"\n          >\n            <div className=\"w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[10px] font-bold text-primary overflow-hidden border border-primary/20 ring-primary/20 group-hover:ring-4 transition-all\">\n              {user?.avatar && <img src={user.avatar} alt=\"User\" className=\"w-full h-full object-cover\" />}\n            </div>\n            <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${profileOpen && \"rotate-180\"}`} />\n          </button>\n\n          {profileOpen && (\n            <>\n              <div className=\"fixed inset-0 z-40\" onClick={() => setProfileOpen(false)} />\n              <div className=\"absolute top-12 right-0 w-56 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200 p-1.5\">\n                <div className=\"px-3 py-2 border-b border-border/50 mb-1\">\n                  <p className=\"text-sm font-bold text-foreground\">{user?.name || t(\"common.roles.user\")}</p>\n                  <p className=\"text-xs text-muted-foreground truncate\">{user?.email}</p>\n                </div>\n\n                <div className=\"space-y-0.5\">\n                  <button\n                    onClick={() => { navigate(profileRoute); setProfileOpen(false); }}\n                    className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors\"\n                  >\n                    <User className=\"h-4 w-4 text-muted-foreground\" />\n                    {t('common.profile')}\n                  </button>\n                  <button\n                    onClick={() => { navigate(billingRoute); setProfileOpen(false); }}\n                    className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors\"\n                  >\n                    <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n                    {t('common.billing')}\n                  </button>\n                  <button\n                    onClick={() => { navigate(settingsRoute); setProfileOpen(false); }}\n                    className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors\"\n                  >\n                    <Settings className=\"h-4 w-4 text-muted-foreground\" />\n                    {t('common.settings')}\n                  </button>\n                </div>\n\n                <div className=\"h-px bg-border my-1.5\" />\n\n                <button\n                  onClick={handleLogout}\n                  className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-destructive hover:bg-destructive/10 rounded-lg transition-colors font-medium\"\n                >\n                  <LogOut className=\"h-4 w-4\" />\n                  {t('common.logout')}\n                </button>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </header>\n  );\n};\n"],"mappings":"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","names":["useState","useNavigate","cn","Button","useState","useLocation","jsx","jsxs","useState","Menu","ChevronDown","Button","useTranslation","jsx","jsxs","jsx","jsxs","Fragment","jsx","jsxs","cn","Button","useNavigate","useState","currentStepConfig"]}

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

@@ -1,21 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { OnboardingState, PlanOption } from '../types/onboarding.js';
-import 'lucide-react';
-import 'react';
-
-interface PlanStepProps {
-    /** Current onboarding state */
-    state: OnboardingState;
-    /** Update state function */
-    updateState: (updates: Partial<OnboardingState>) => void;
-    /** Plan options */
-    plans?: PlanOption[];
-}
-/**
- * Plan Selection Step
- *
- * Fourth step - select subscription plan
- */
-declare const PlanStep: ({ state, updateState, plans, }: PlanStepProps) => react_jsx_runtime.JSX.Element;
-
-export { PlanStep, PlanStep as default };