import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { H as c, C as l, a as d, T as i, K as n } from "../index-sdOMz8GW.js";
import { Layout as t, Layers3 as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const f = () => {
  const r = [
    {
      name: "xs",
      value: "480px",
      description: "Extra small devices"
    },
    {
      name: "sm",
      value: "640px",
      description: "Small devices (landscape phones)"
    },
    {
      name: "md",
      value: "768px",
      description: "Medium devices (tablets)"
    },
    {
      name: "lg",
      value: "1024px",
      description: "Large devices (desktops)"
    },
    {
      name: "xl",
      value: "1280px",
      description: "Extra large devices"
    },
    {
      name: "2xl",
      value: "1440px",
      description: "2X large screens"
    },
    {
      name: "3xl",
      value: "1780px",
      description: "3X large screens"
    },
    {
      name: "4xl",
      value: "2160px",
      description: "4X large screens (4K UHD)"
    }
  ], o = [
    {
      name: "Base",
      value: "0",
      description: "Default layer for most elements"
    },
    {
      name: "Dropdown",
      value: "10",
      description: "Dropdown menus and popovers"
    },
    { name: "Sticky", value: "20", description: "Sticky positioned elements" },
    { name: "Fixed", value: "30", description: "Fixed positioned elements" },
    {
      name: "Modal Backdrop",
      value: "40",
      description: "Modal overlay backgrounds"
    },
    { name: "Modal", value: "50", description: "Modal dialogs and drawers" },
    { name: "Popover", value: "60", description: "Tooltips and popovers" },
    { name: "Toast", value: "70", description: "Toast notifications" },
    {
      name: "Tooltip",
      value: "80",
      description: "Tooltips (highest priority)"
    }
  ];
  return /* @__PURE__ */ a("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
    /* @__PURE__ */ e(
      c,
      {
        title: "Layout Principles",
        description: "Responsive design patterns and layout guidelines for consistent experiences.",
        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-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(t, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ a("div", { className: "space-y-8", children: [
      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Responsive Breakpoints", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md", children: /* @__PURE__ */ e(t, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Responsive Breakpoints" })
        ] }),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: r.map((s) => /* @__PURE__ */ e(
          "div",
          {
            className: "space-y-3 p-4 bg-muted/20 rounded-lg border border-border",
            children: /* @__PURE__ */ a("div", { className: "space-y-1", children: [
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(n, { variant: "outline", className: "font-mono", children: s.name }),
                /* @__PURE__ */ e(i, { tag: "h3", className: "font-semibold", children: s.description })
              ] }),
              /* @__PURE__ */ e("div", { className: "space-y-1", children: /* @__PURE__ */ a(
                i,
                {
                  tag: "h4",
                  className: "text-muted text-sm font-semibold",
                  children: [
                    "Min-width: ",
                    s.value
                  ]
                }
              ) })
            ] })
          },
          s.name
        )) })
      ] }) }) }),
      /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Z-Index Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md", children: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Z-Index Scale" })
        ] }),
        /* @__PURE__ */ e("div", { className: "space-y-2", children: o.map((s) => /* @__PURE__ */ e(
          "div",
          {
            className: "flex items-center justify-between p-3 bg-muted/20 rounded",
            children: /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
              /* @__PURE__ */ e(
                n,
                {
                  variant: "outline",
                  className: "font-mono w-12 justify-center",
                  children: s.value
                }
              ),
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ e("div", { className: "font-semibold", children: s.name }),
                /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: s.description })
              ] })
            ] })
          },
          s.name
        )) })
      ] }) }) })
    ] })
  ] });
};
export {
  f as default
};
