import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
import { H as a, T as t, aj as d, C as i, a as n } from "../index-sdOMz8GW.js";
import { Shield as s, AlertTriangle as l } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => /* @__PURE__ */ r(o, { children: [
  /* @__PURE__ */ e(
    a,
    {
      title: "ThemeProvider Required",
      description: "Essential prerequisite for using the layout system and theme hooks. All layout components depend on the theme context.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(s, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ r("div", { className: "text-center", children: [
    /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "ThemeProvider Required" }),
    /* @__PURE__ */ e(
      t,
      {
        tag: "p",
        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
        children: "Essential prerequisite for using the layout system and theme hooks"
      }
    )
  ] }),
  /* @__PURE__ */ e(d, { variant: "warning", children: /* @__PURE__ */ r("div", { children: [
    /* @__PURE__ */ r("div", { className: "flex items-center gap-2 font-semibold", children: [
      /* @__PURE__ */ e(l, { className: "h-4 w-4" }),
      "ThemeProvider Required"
    ] }),
    /* @__PURE__ */ r("div", { children: [
      "Before using any layout components or theme hooks, you MUST wrap your application with ThemeProvider. All layout components and theme hooks depend on the theme context provided by ThemeProvider. Located in",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded text-xs", children: "ui/tucu-ui/src/themes/components/theme-provider" }),
      "."
    ] })
  ] }) }),
  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Routing System", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
    /* @__PURE__ */ r(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
      /* @__PURE__ */ e("strong", { children: "ThemeProvider" }),
      " includes",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded text-xs", children: "BrowserRouter" }),
      " ",
      "from React Router and handles routing automatically. You have two options:"
    ] }),
    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
      /* @__PURE__ */ r("div", { className: "p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800", children: [
        /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold mb-2", children: "1. Automatic Routing (Default)" }),
        /* @__PURE__ */ r(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-700 dark:text-gray-300 mb-2",
            children: [
              "Provide ",
              /* @__PURE__ */ e("code", { children: "menuItems" }),
              " with ",
              /* @__PURE__ */ e("code", { children: "component" }),
              " ",
              "prop. ThemeProvider will automatically generate routes from your menu items."
            ]
          }
        ),
        /* @__PURE__ */ r(
          t,
          {
            tag: "p",
            className: "text-xs text-gray-600 dark:text-gray-400",
            children: [
              /* @__PURE__ */ e("strong", { children: "Use when:" }),
              " You want routing based on menu items. Each menu item with a ",
              /* @__PURE__ */ e("code", { children: "component" }),
              " prop becomes a route."
            ]
          }
        )
      ] }),
      /* @__PURE__ */ r("div", { className: "p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800", children: [
        /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold mb-2", children: "2. Custom Routing" }),
        /* @__PURE__ */ r(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-700 dark:text-gray-300 mb-2",
            children: [
              "Provide ",
              /* @__PURE__ */ e("code", { children: "customRoutes" }),
              " prop with your own",
              " ",
              /* @__PURE__ */ e("code", { children: "<Routes>" }),
              " component. This gives you full control over routing."
            ]
          }
        ),
        /* @__PURE__ */ r(
          t,
          {
            tag: "p",
            className: "text-xs text-gray-600 dark:text-gray-400",
            children: [
              /* @__PURE__ */ e("strong", { children: "Use when:" }),
              " You need custom routing logic, landing pages without navigation, or complex routing scenarios."
            ]
          }
        )
      ] })
    ] })
  ] }) }) })
] });
export {
  b as default
};
