import { jsxs as l, Fragment as p, jsx as e } from "react/jsx-runtime";
import { useState as u } from "react";
import { H as h, C as s, a as i, T as n, i as t, P as g, A as v, c as f } from "../index-sdOMz8GW.js";
import { ListChecks as b } from "lucide-react";
import "react-router-dom";
import "react-dom";
const k = () => {
  const [a, r] = u(null), d = [
    {
      icon: "https://i.pravatar.cc/80?img=1",
      name: "CryptoPunks",
      value: "crypto-punks"
    },
    {
      icon: "https://i.pravatar.cc/80?img=5",
      name: "Bored Ape Yacht Club",
      value: "bayc"
    },
    { icon: "https://i.pravatar.cc/80?img=12", name: "Azuki", value: "azuki" },
    {
      icon: "https://i.pravatar.cc/80?img=20",
      name: "Doodles",
      value: "doodles"
    },
    {
      icon: "https://i.pravatar.cc/80?img=25",
      name: "CloneX",
      value: "clonex"
    },
    {
      icon: "https://i.pravatar.cc/80?img=30",
      name: "Moonbirds",
      value: "moonbirds"
    },
    {
      icon: "https://i.pravatar.cc/80?img=35",
      name: "Pudgy Penguins",
      value: "pudgy-penguins"
    },
    {
      icon: "https://i.pravatar.cc/80?img=40",
      name: "World of Women",
      value: "wow"
    }
  ], c = [
    {
      icon: "https://i.pravatar.cc/80?img=50",
      name: "Art Blocks",
      value: "art-blocks"
    },
    { icon: "https://i.pravatar.cc/80?img=55", name: "Nouns", value: "nouns" },
    { icon: "https://i.pravatar.cc/80?img=60", name: "Loot", value: "loot" }
  ];
  return /* @__PURE__ */ l(p, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "CollectionSelectList",
        description: "A searchable list with keyboard navigation for selecting NFT collections. Supports filtering, highlight, and ARIA roles.",
        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-emerald-500 via-green-500 to-lime-500 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50", children: /* @__PURE__ */ e(b, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ l("div", { className: "space-y-3", children: [
        /* @__PURE__ */ e(n, { tag: "h5", children: "Full Collection (8 items)" }),
        a && /* @__PURE__ */ l("div", { className: "text-xs text-brand font-medium bg-brand/10 rounded-lg px-3 py-1.5 inline-block", children: [
          "Selected: ",
          a
        ] }),
        /* @__PURE__ */ e(
          t,
          {
            collectionList: d,
            onSelect: r
          }
        )
      ] }),
      /* @__PURE__ */ l("div", { className: "space-y-3", children: [
        /* @__PURE__ */ e(n, { tag: "h5", children: "Short List + Custom Placeholder" }),
        /* @__PURE__ */ e(
          t,
          {
            collectionList: c,
            onSelect: (o) => console.log("Selected:", o),
            placeholder: "Find a collection...",
            noResultsMessage: "No matching collections"
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      g,
      {
        componentName: "CollectionSelectList",
        defaultValues: {
          placeholder: "Search collections...",
          noResultsMessage: "No collections found"
        },
        controlOverrides: [
          {
            name: "placeholder",
            type: "text",
            description: "Placeholder text for the search input"
          },
          {
            name: "noResultsMessage",
            type: "text",
            description: "Message shown when no results match"
          }
        ],
        includeProps: ["placeholder", "noResultsMessage"],
        children: (o) => /* @__PURE__ */ e("div", { className: "w-full max-w-md", children: /* @__PURE__ */ e(
          t,
          {
            collectionList: c,
            onSelect: (m) => console.log("Selected:", m),
            placeholder: o.placeholder,
            noResultsMessage: o.noResultsMessage
          }
        ) })
      }
    ),
    /* @__PURE__ */ e(v, { componentName: "CollectionSelectList" }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      f,
      {
        language: "tsx",
        code: `import { CollectionSelectList } from '@e-burgos/tucu-ui';

const collections = [
  { icon: '/avatars/punks.jpg', name: 'CryptoPunks', value: 'crypto-punks' },
  { icon: '/avatars/bayc.jpg', name: 'Bored Ape Yacht Club', value: 'bayc' },
  { icon: '/avatars/azuki.jpg', name: 'Azuki', value: 'azuki' },
  { icon: '/avatars/doodles.jpg', name: 'Doodles', value: 'doodles' },
];

<CollectionSelectList
  collectionList={collections}
  onSelect={(value) => console.log('Selected:', value)}
  placeholder="Search collections..."
  noResultsMessage="No collections found"
/>`
      }
    ) }) }) })
  ] });
};
export {
  k as default
};
