import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { H as d, C as s, a as m, T as i, x as a } from "../index-sdOMz8GW.js";
import { Component as c, Layers as p, Zap as h, Maximize as f } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => {
  const l = [
    { name: "Default", component: /* @__PURE__ */ e(a, { children: "Default" }) },
    {
      name: "Hover",
      component: /* @__PURE__ */ e(a, { className: "hover:bg-primary/90", children: "Hover" })
    },
    {
      name: "Active",
      component: /* @__PURE__ */ e(a, { className: "active:bg-primary/95", children: "Active" })
    },
    { name: "Disabled", component: /* @__PURE__ */ e(a, { disabled: !0, children: "Disabled" }) }
  ], o = [
    { name: "Solid", component: /* @__PURE__ */ e(a, { variant: "solid", children: "Solid" }) },
    { name: "Ghost", component: /* @__PURE__ */ e(a, { variant: "ghost", children: "Ghost" }) },
    {
      name: "Transparent",
      component: /* @__PURE__ */ e(a, { variant: "transparent", children: "Transparent" })
    }
  ], r = [
    { name: "Tiny", component: /* @__PURE__ */ e(a, { size: "tiny", children: "Tiny" }) },
    { name: "Mini", component: /* @__PURE__ */ e(a, { size: "mini", children: "Mini" }) },
    { name: "Small", component: /* @__PURE__ */ e(a, { size: "small", children: "Small" }) },
    { name: "Medium", component: /* @__PURE__ */ e(a, { size: "medium", children: "Medium" }) },
    { name: "Large", component: /* @__PURE__ */ e(a, { size: "large", children: "Large" }) }
  ];
  return /* @__PURE__ */ t("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(
      d,
      {
        title: "Component Anatomy",
        description: "Understanding component states, variants, and sizes for consistent implementation.",
        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ t("div", { className: "space-y-8", children: [
      /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Component States", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md", children: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Component States" })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 sm:gap-6", children: l.map((n) => /* @__PURE__ */ t("div", { className: "text-center space-y-2", children: [
          n.component,
          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: n.name })
        ] }, n.name)) })
      ] }) }) }),
      /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Component Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 shadow-md", children: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Component Variants" })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 sm:gap-6", children: o.map((n) => /* @__PURE__ */ t("div", { className: "text-center space-y-2", children: [
          n.component,
          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: n.name })
        ] }, n.name)) })
      ] }) }) }),
      /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Component Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-cyan-500 to-sky-500 shadow-md", children: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Component Sizes" })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex flex-wrap items-end gap-4 sm:gap-6", children: r.map((n) => /* @__PURE__ */ t("div", { className: "text-center space-y-2", children: [
          n.component,
          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: n.name })
        ] }, n.name)) })
      ] }) }) })
    ] })
  ] });
};
export {
  b as default
};
