import { jsxs as s, Fragment as r, jsx as e } from "react/jsx-runtime";
import { H as i, T as t, C as l, a as n, c as d, aj as a } from "../index-sdOMz8GW.js";
import { FolderTree as o } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const u = () => /* @__PURE__ */ s(r, { children: [
  /* @__PURE__ */ e(
    i,
    {
      title: "File Structure",
      description: "Understand the theme system's file organization and important architectural notes.",
      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-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ s("section", { className: "space-y-8", children: [
    /* @__PURE__ */ s("div", { className: "text-center", children: [
      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Theme File Organization" }),
      /* @__PURE__ */ e(
        t,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Key directories and files in the theme system"
        }
      )
    ] }),
    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(n, { title: "Directory Tree", children: /* @__PURE__ */ e(
      d,
      {
        language: "markdown",
        code: `ui/tucu-ui/src/
├── themes/
│   ├── components/
│   │   ├── theme-provider/
│   │   │   ├── index.tsx
│   │   │   ├── single-app-theme-provider.tsx
│   │   │   ├── mfe-app-theme-provider.tsx
│   │   │   └── theme-wrapper.tsx
│   │   └── settings/
│   │       ├── settings-button.tsx
│   │       ├── settings-drawer.tsx
│   │       ├── switch-mode.tsx
│   │       └── lang-selector.tsx
│   ├── hooks/
│   │   ├── use-theme.tsx
│   │   ├── use-theme-color.ts
│   │   └── use-direction.ts
│   ├── config/
│   │   └── index.ts
│   ├── auth/
│   ├── pages/
│   ├── router/
│   ├── types/
│   └── index.ts
└── assets/css/
    └── globals.css`
      }
    ) }) })
  ] }),
  /* @__PURE__ */ s("section", { className: "space-y-8", children: [
    /* @__PURE__ */ s("div", { className: "text-center", children: [
      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Important Notes" }),
      /* @__PURE__ */ e(
        t,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Key architectural details to keep in mind"
        }
      )
    ] }),
    /* @__PURE__ */ s("div", { className: "space-y-4", children: [
      /* @__PURE__ */ s(a, { variant: "info", dismissible: !1, children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold text-sm mb-2", children: "Spacing Classes" }),
        /* @__PURE__ */ s(t, { tag: "p", className: "text-xs", children: [
          "All spacing classes use arbitrary values (e.g.,",
          " ",
          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded", children: "p-[16px]" }),
          ") instead of Tailwind defaults to maintain original spacing values."
        ] })
      ] }),
      /* @__PURE__ */ s(a, { variant: "warning", dismissible: !1, children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold text-sm mb-2", children: "Theme Persistence" }),
        /* @__PURE__ */ s(t, { tag: "p", className: "text-xs", children: [
          "Theme settings are automatically persisted to localStorage using Zustand's persist middleware. Storage key:",
          " ",
          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded", children: "theme-storage" }),
          "."
        ] })
      ] }),
      /* @__PURE__ */ s(a, { variant: "success", dismissible: !1, children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold text-sm mb-2", children: "CSS Variables" }),
        /* @__PURE__ */ e(t, { tag: "p", className: "text-xs", children: "Theme colors are injected as CSS variables on the document root. These variables are used by Tailwind utilities and can be referenced directly in CSS or inline styles." })
      ] })
    ] })
  ] })
] });
export {
  u as default
};
