import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as d, T as s, C as m, K as i } from "../index-sdOMz8GW.js";
import { ListChecks as p, AlertTriangle as u, Check as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => {
  const o = [
    {
      name: "Input",
      status: "complete",
      features: [
        "label + htmlFor association",
        "aria-required on required fields",
        "aria-invalid on error",
        "aria-describedby for helperText/error",
        "Auto-generated IDs via useId()"
      ]
    },
    {
      name: "Button",
      status: "complete",
      features: [
        "aria-busy during loading",
        "aria-label support",
        "aria-describedby support",
        "Loading visually hides text without removing DOM",
        "Focus ring visible on all variants"
      ]
    },
    {
      name: "Modal",
      status: "partial",
      features: [
        'role="dialog" + aria-modal="true"',
        "aria-labelledby + aria-describedby",
        "Escape key closes",
        "Focus restore on close",
        "⚠️ Missing: Focus trapping (Tab can escape)"
      ]
    },
    {
      name: "Drawer",
      status: "complete",
      features: [
        'role="dialog" + aria-modal="true"',
        "Full focus trap (Tab/Shift+Tab cycles)",
        "Escape key closes",
        "Focus first element on open",
        "Focus restore on close"
      ]
    },
    {
      name: "Alert",
      status: "complete",
      features: [
        'role="alert"',
        'aria-live="assertive" + aria-atomic',
        "Dismiss button with aria-label",
        "Supports custom aria-label prop",
        "Dismissible toggle via prop"
      ]
    },
    {
      name: "Tabs",
      status: "complete",
      features: [
        'role="tablist" / role="tab" / role="tabpanel"',
        "aria-selected on active tab",
        "aria-controls linking tab↔panel",
        "ArrowRight/Left + Home/End navigation",
        "tabIndex roving (0 on active, -1 on others)"
      ]
    },
    {
      name: "Select",
      status: "complete",
      features: [
        'role="combobox" + aria-haspopup="listbox"',
        'role="listbox" + role="option"',
        "aria-expanded + aria-activedescendant",
        "Arrow/Enter/Space/Escape keyboard",
        "Focus restore on close"
      ]
    },
    {
      name: "Checkbox",
      status: "complete",
      features: [
        "label + htmlFor association",
        "aria-invalid on error",
        "aria-describedby for helperText/error",
        "Auto-generated IDs via useId()",
        "Standard checkbox keyboard (Space)"
      ]
    }
  ], l = (a) => a === "complete" ? /* @__PURE__ */ e(i, { variant: "soft", color: "success", size: "small", children: "Complete" }) : /* @__PURE__ */ e(i, { variant: "soft", color: "warning", size: "small", children: "Partial" });
  return /* @__PURE__ */ t(c, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "Component Status",
        description: "Detailed accessibility compliance status for each component — verified against the actual source code 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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { 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("section", { className: "space-y-8", children: [
      /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Per-Component Breakdown" }),
        /* @__PURE__ */ e(
          s,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "7 of 8 core components have full accessibility — Modal needs focus trapping"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: o.map((a) => /* @__PURE__ */ e(
        m,
        {
          className: "group hover:shadow-large transition-all duration-300",
          children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
              /* @__PURE__ */ e(s, { tag: "h3", className: "font-semibold text-lg", children: a.name }),
              l(a.status)
            ] }),
            /* @__PURE__ */ e("div", { className: "space-y-1.5", children: a.features.map((r, n) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
              r.startsWith("⚠️") ? /* @__PURE__ */ e(u, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }) : /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
              /* @__PURE__ */ e(
                s,
                {
                  tag: "span",
                  className: "text-sm text-gray-600 dark:text-gray-400",
                  children: r.replace("⚠️ ", "")
                }
              )
            ] }, n)) })
          ] })
        },
        a.name
      )) })
    ] })
  ] });
};
export {
  w as default
};
