import { jsxs as s, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as d, T as r, C as i, y as a } from "../index-sdOMz8GW.js";
import { Terminal as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => {
  const n = [
    {
      prop: "className",
      type: "string",
      default: "—",
      description: "Tailwind CSS classes for styling. Use w-*/h-* for sizing, text-* for color."
    },
    {
      prop: "size",
      type: "number | string",
      default: "24",
      description: "Icon size in pixels. Sets both width and height. Alternative to className sizing."
    },
    {
      prop: "color",
      type: "string",
      default: "currentColor",
      description: "SVG stroke color. Inherits from parent text color by default."
    },
    {
      prop: "strokeWidth",
      type: "number",
      default: "2",
      description: "Width of SVG strokes. Use 1.5 for thinner lines, 2.5 for bolder."
    },
    {
      prop: "fill",
      type: "string",
      default: "none",
      description: 'SVG fill color. Most Lucide icons are stroke-based (fill="none").'
    },
    {
      prop: "absoluteStrokeWidth",
      type: "boolean",
      default: "false",
      description: "When true, strokeWidth stays constant regardless of icon size."
    }
  ], l = [
    {
      prop: "className",
      type: "string",
      default: "—",
      description: "Tailwind CSS classes for sizing (w-*/h-*) and color (text-*)."
    },
    {
      prop: "width / height",
      type: "number | string",
      default: "—",
      description: "SVG width and height attributes. className sizing is preferred."
    },
    {
      prop: "fill",
      type: "string",
      default: "varies",
      description: "SVG fill. Some icons use currentColor, others have hardcoded brand colors."
    },
    {
      prop: "stroke",
      type: "string",
      default: "varies",
      description: "SVG stroke color. Depends on icon type (fill-based vs stroke-based)."
    },
    {
      prop: "...SVGAttributes",
      type: "SVGAttributes<SVGElement>",
      default: "—",
      description: "All standard SVG attributes: opacity, style, onClick, aria-*, etc."
    }
  ], o = [
    {
      key: "prop",
      label: "Prop",
      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
    },
    {
      key: "type",
      label: "Type",
      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
    },
    {
      key: "default",
      label: "Default",
      render: (t) => t === "—" ? /* @__PURE__ */ e("span", { className: "text-gray-400", children: "—" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
    },
    {
      key: "description",
      label: "Description"
    }
  ];
  return /* @__PURE__ */ s(c, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "Icon System API",
        description: "Complete props reference for both Lucide namespace icons and custom Tucu icons. Each system has a slightly different API surface.",
        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-cyan-500 via-blue-500 to-indigo-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__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Lucide Icons Props" }),
        /* @__PURE__ */ e(
          r,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Props available on LucideIcons.* components"
          }
        )
      ] }),
      /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(a, { columns: o, data: n }) }) })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Custom Tucu Icons Props" }),
        /* @__PURE__ */ e(
          r,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Props available on named custom icon exports"
          }
        )
      ] }),
      /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(a, { columns: o, data: l }) }) })
    ] })
  ] });
};
export {
  b as default
};
