"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),s=require("../index-DEZRGktf.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const r=()=>{const[i,o]=n.useState({icon:e.jsx(s.Bitcoin,{className:"w-6 h-6"}),code:"BTC",name:"Bitcoin",price:45e3}),t=[{icon:e.jsx(s.Bitcoin,{className:"w-6 h-6"}),code:"BTC",name:"Bitcoin",price:45e3},{icon:e.jsx(s.Ethereum,{className:"w-6 h-6"}),code:"ETH",name:"Ethereum",price:3e3},{icon:e.jsx(s.Tether,{className:"w-6 h-6"}),code:"USDT",name:"Tether",price:1}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"CoinListBox",description:"Dropdown listbox component for selecting cryptocurrencies with icons and names. Supports disabled state and custom styling.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50",children:e.jsx(a.List,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(s.CardContainer,{className:"",children:e.jsx(s.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic ListBox"}),e.jsx(s.CoinListBox,{coins:t,selectedCoin:i,setSelectedCoin:o,className:"z-50"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(s.CoinListBox,{coins:t,selectedCoin:i,setSelectedCoin:o,disabled:!0})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"CoinListBox",defaultValues:{disabled:!1},controlOverrides:[{name:"disabled",type:"boolean",description:"Disables the listbox interaction"}],includeProps:["disabled"],children:c=>e.jsx("div",{className:"w-full max-w-sm",children:e.jsx(s.CoinListBox,{coins:t,selectedCoin:i,setSelectedCoin:o,disabled:c.disabled})})}),e.jsx(s.AutoPropsTable,{componentName:"CoinListBox"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { CoinListBox } from '@e-burgos/tucu-ui';

const coins = [
  {
    icon: <Bitcoin />,
    code: 'BTC',
    name: 'Bitcoin',
    price: 45000,
  },
  {
    icon: <Ethereum />,
    code: 'ETH',
    name: 'Ethereum',
    price: 3000,
  },
];

const [selectedCoin, setSelectedCoin] = useState(coins[0]);

<CoinListBox
  coins={coins}
  selectedCoin={selectedCoin}
  setSelectedCoin={setSelectedCoin}
/>`})})})})]})};exports.default=r;
