import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
import { H as d, C as l, a as t, T as i, ac as s, P as n, A as o, c as r } from "../index-sdOMz8GW.js";
import { ListMinus as h, Home as p, Settings as u, User as b, Star as N } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const v = () => /* @__PURE__ */ a(m, { children: [
  /* @__PURE__ */ e(
    d,
    {
      title: "ListItem",
      description: `A list item component for displaying items in dropdowns and menus with
          support for icons, labels, and custom content.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Basic List Items" }),
      /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
        /* @__PURE__ */ e(s, { id: "1", label: "Item 1" }),
        /* @__PURE__ */ e(s, { id: "2", label: "Item 2" }),
        /* @__PURE__ */ e(s, { id: "3", label: "Item 3" })
      ] })
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Icons" }),
      /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
        /* @__PURE__ */ e(
          s,
          {
            id: "1",
            label: "Home",
            icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" })
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            id: "2",
            label: "Settings",
            icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            id: "3",
            label: "Profile",
            icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" })
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "States" }),
      /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
        /* @__PURE__ */ e(s, { id: "1", label: "Active Item", active: !0 }),
        /* @__PURE__ */ e(s, { id: "2", label: "Normal Item" }),
        /* @__PURE__ */ e(s, { id: "3", label: "Disabled Item", disabled: !0 })
      ] })
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
      /* @__PURE__ */ e("ul", { className: "space-y-1", children: /* @__PURE__ */ e(
        s,
        {
          id: "1",
          content: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
            /* @__PURE__ */ e("span", { children: "Custom Content" })
          ] })
        }
      ) })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    n,
    {
      componentName: "ListItem",
      defaultValues: { label: "List Item", active: !1, disabled: !1 },
      excludeProps: ["onClick", "content", "icon", "id"],
      children: (c) => /* @__PURE__ */ e(s, { ...c })
    }
  ),
  /* @__PURE__ */ e(o, { componentName: "ListItem" }),
  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    r,
    {
      language: "tsx",
      code: `import { ListItem, LucideIcons } from '@e-burgos/tucu-ui';

// Basic usage
<ul>
  <ListItem id="1" label="Item 1" />
  <ListItem id="2" label="Item 2" />
</ul>

// With icons
<ListItem
  id="1"
  label="Home"
  icon={<LucideIcons.Home className="w-4 h-4" />}
/>

// With states
<ListItem id="1" label="Active" active />
<ListItem id="2" label="Disabled" disabled />

// With custom content
<ListItem
  id="1"
  content={
    <div className="flex items-center gap-2">
      <LucideIcons.Star className="w-4 h-4" />
      <span>Custom</span>
    </div>
  }
/>

// With onClick
<ListItem
  id="1"
  label="Clickable"
  onClick={() => handleClick()}
/>`
    }
  ) }) }) })
] });
export {
  v as default
};
