); }`,we={"/App.jsx":ye,"/data.js":Ie},d={...we};var ke=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Ae=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,Ce={"/App.jsx":Ae,"/data.js":ke},h={...Ce};var Le=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,qe=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,je={"/App.jsx":qe,"/data.js":Le},f={...je};var Ne=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Te=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,De={"/App.jsx":Te,"/data.js":Ne},v={...De};var Me=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,ze=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,We={"/App.jsx":ze,"/data.js":Me},g={...We};var Ee=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Pe=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const sizes = ["sm", "md", "lg"]; return (

{sizes.map((size) => (

))}

); }`,Ve={"/App.jsx":Pe,"/data.js":Ee},x={...Ve};var Re=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Oe=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const colors = [ "default", "primary", "secondary", "success", "warning", "danger", ]; return (

{colors.map((color) => ( ))}

); }`,Ze={"/App.jsx":Oe,"/data.js":Re},b={...Ze};var He=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Be=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const variants = ["flat", "bordered", "underlined", "faded"]; return (

{variants.map((variant) => (

))}

); }`,Fe={"/App.jsx":Be,"/data.js":He},S={...Fe};var Ke=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Ge=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const radius = [ "full", "lg", "md", "sm", "none", ]; return (

{radius.map((r) => ( ))}

); }`,Ue={"/App.jsx":Ge,"/data.js":Ke},I={...Ue};var Je=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,_e=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const placements = [ "inside", "outside", "outside-left", ]; return (

Without placeholder

{placements.map((placement) => ( ))}

With placeholder

{placements.map((placement) => ( ))}

); }`,Qe={"/App.jsx":_e,"/data.js":Je},y={...Qe};var $e=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Ye=`export const PetIcon = (props) => ( );`,Xe=`import {Select, SelectItem} from "@nextui-org/react"; import {PetIcon} from "./PetIcon"; import {animals} from "./data"; export default function App() { return ( ); }`,ea={"/App.jsx":Xe,"/PetIcon.jsx":Ye,"/data.js":$e},w={...ea};var aa=`import {Select, SelectItem, Avatar} from "@nextui-org/react"; export default function App() { return ( ); }`,ta={"/App.jsx":aa},k={...ta};var ia=`export type Pokemon = { name: string; url: string; }; export type UsePokemonListProps = { /** Delay to wait before fetching more items */ fetchDelay?: number; }; export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { const [items, setItems] = React.useState([]); const [hasMore, setHasMore] = React.useState(true); const [isLoading, setIsLoading] = React.useState(false); const [offset, setOffset] = React.useState(0); const limit = 10; // Number of items per page, adjust as necessary const loadPokemon = async (currentOffset: number) => { const controller = new AbortController(); const {signal} = controller; try { setIsLoading(true); if (offset > 0) { // Delay to simulate network latency await new Promise((resolve) => setTimeout(resolve, fetchDelay)); } let res = await fetch( \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, {signal}, ); if (!res.ok) { throw new Error("Network response was not ok"); } let json = await res.json(); setHasMore(json.next !== null); // Append new results to existing ones setItems((prevItems) => [...prevItems, ...json.results]); } catch (error) { if (error.name === "AbortError") { console.log("Fetch aborted"); } else { console.error("There was an error with the fetch operation:", error); } } finally { setIsLoading(false); } }; React.useEffect(() => { loadPokemon(offset); }, []); const onLoadMore = () => { const newOffset = offset + limit; setOffset(newOffset); loadPokemon(newOffset); }; return { items, hasMore, isLoading, onLoadMore, }; } `,la=`export function usePokemonList({fetchDelay = 0} = {}) { const [items, setItems] = React.useState([]); const [hasMore, setHasMore] = React.useState(true); const [isLoading, setIsLoading] = React.useState(false); const [offset, setOffset] = React.useState(0); const limit = 10; // Number of items per page, adjust as necessary const loadPokemon = async (currentOffset) => { const controller = new AbortController(); const {signal} = controller; try { setIsLoading(true); if (offset > 0) { // Delay to simulate network latency await new Promise((resolve) => setTimeout(resolve, fetchDelay)); } let res = await fetch( \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, {signal}, ); if (!res.ok) { throw new Error("Network response was not ok"); } let json = await res.json(); setHasMore(json.next !== null); // Append new results to existing ones setItems((prevItems) => [...prevItems, ...json.results]); } catch (error) { if (error.name === "AbortError") { console.log("Fetch aborted"); } else { console.error("There was an error with the fetch operation:", error); } } finally { setIsLoading(false); } }; React.useEffect(() => { loadPokemon(offset); }, []); const onLoadMore = () => { const newOffset = offset + limit; setOffset(newOffset); loadPokemon(newOffset); }; return { items, hasMore, isLoading, onLoadMore, }; };`,A=`import {Select, SelectItem} from "@nextui-org/react"; import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; import {usePokemonList} from "./usePokemonList"; export default function App() { const [isOpen, setIsOpen] = React.useState(false); const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); const [, scrollerRef] = useInfiniteScroll({ hasMore, isEnabled: isOpen, shouldUseLoader: false, // We don't want to show the loader at the bottom of the list onLoadMore, }); return ( ); }`,oa={"/App.jsx":A,"/usePokemonList.js":la},na={"/App.tsx":A,"/usePokemonList.ts":ia},C={...oa,...na};var ra=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,sa=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,ca={"/App.jsx":sa,"/data.js":ra},L={...ca};var ma=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,pa=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,ua={"/App.jsx":pa,"/data.js":ma},q={...ua};var da=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,ha=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [value, setValue] = React.useState(new Set([])); const [touched, setTouched] = React.useState(false); const isValid = value.has("cat"); return ( ); }`,fa={"/App.jsx":ha,"/data.js":da},j={...fa};var N=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,va=`import {Select, SelectItem, Selection} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [value, setValue] = React.useState(new Set([])); return (

Selected: {value}

); }`,ga=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [value, setValue] = React.useState(new Set([])); return (

Selected: {value}

); }`,xa={"/App.jsx":ga,"/data.js":N},ba={"/App.tsx":va,"/data.js":N},T={...xa,...ba};var D=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Sa=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [value, setValue] = React.useState(new Set([])); const handleSelectionChange = (e) => { setValue(new Set([e.target.value])); }; return (

Selected: {value}

); }`,Ia=`import {Select, SelectItem, Selection} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [value, setValue] = React.useState(new Set([])); const handleSelectionChange = (e: React.ChangeEvent) => { setValue(new Set([e.target.value])); }; return (

Selected: {value}

); }`,ya={"/App.jsx":Sa,"/data.js":D},wa={"/App.tsx":Ia,"/data.js":D},M={...ya,...wa};var ka=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Aa=`import {Select, SelectItem, Button} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [isOpen, setIsOpen] = React.useState(false); return (

); }`,Ca={"/App.jsx":Aa,"/data.js":ka},z={...Ca};var La=`export const users = [ { id: 1, name: "Tony Reichert", role: "CEO", team: "Management", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", email: "tony.reichert@example.com", }, { id: 2, name: "Zoey Lang", role: "Tech Lead", team: "Development", status: "paused", age: "25", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", email: "zoey.lang@example.com", }, { id: 3, name: "Jane Fisher", role: "Sr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", email: "jane.fisher@example.com", }, { id: 4, name: "William Howard", role: "C.M.", team: "Marketing", status: "vacation", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", email: "william.howard@example.com", }, { id: 5, name: "Kristen Copper", role: "S. Manager", team: "Sales", status: "active", age: "24", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", email: "kristen.cooper@example.com", }, { id: 6, name: "Brian Kim", role: "P. Manager", team: "Management", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", status: "Active", }, { id: 7, name: "Michael Hunt", role: "Designer", team: "Design", status: "paused", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", email: "michael.hunt@example.com", }, { id: 8, name: "Samantha Brooks", role: "HR Manager", team: "HR", status: "active", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", email: "samantha.brooks@example.com", }, { id: 9, name: "Frank Harrison", role: "F. Manager", team: "Finance", status: "vacation", age: "33", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", email: "frank.harrison@example.com", }, { id: 10, name: "Emma Adams", role: "Ops Manager", team: "Operations", status: "active", age: "35", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", email: "emma.adams@example.com", }, { id: 11, name: "Brandon Stevens", role: "Jr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", email: "brandon.stevens@example.com", }, { id: 12, name: "Megan Richards", role: "P. Manager", team: "Product", status: "paused", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", email: "megan.richards@example.com", }, { id: 13, name: "Oliver Scott", role: "S. Manager", team: "Security", status: "active", age: "37", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", email: "oliver.scott@example.com", }, { id: 14, name: "Grace Allen", role: "M. Specialist", team: "Marketing", status: "active", age: "30", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", email: "grace.allen@example.com", }, { id: 15, name: "Noah Carter", role: "IT Specialist", team: "I. Technology", status: "paused", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", email: "noah.carter@example.com", }, { id: 16, name: "Ava Perez", role: "Manager", team: "Sales", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", email: "ava.perez@example.com", }, { id: 17, name: "Liam Johnson", role: "Data Analyst", team: "Analysis", status: "active", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", email: "liam.johnson@example.com", }, { id: 18, name: "Sophia Taylor", role: "QA Analyst", team: "Testing", status: "active", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", email: "sophia.taylor@example.com", }, { id: 19, name: "Lucas Harris", role: "Administrator", team: "Information Technology", status: "paused", age: "32", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", email: "lucas.harris@example.com", }, { id: 20, name: "Mia Robinson", role: "Coordinator", team: "Operations", status: "active", age: "26", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", email: "mia.robinson@example.com", }, ];`,qa=`import {Select, SelectItem, Avatar} from "@nextui-org/react"; import {users} from "./data"; export default function App() { return ( ); }`,ja={"/App.jsx":qa,"/data.js":La},W={...ja};var E=`export const users = [ { id: 1, name: "Tony Reichert", role: "CEO", team: "Management", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", email: "tony.reichert@example.com", }, { id: 2, name: "Zoey Lang", role: "Tech Lead", team: "Development", status: "paused", age: "25", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", email: "zoey.lang@example.com", }, { id: 3, name: "Jane Fisher", role: "Sr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", email: "jane.fisher@example.com", }, { id: 4, name: "William Howard", role: "C.M.", team: "Marketing", status: "vacation", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", email: "william.howard@example.com", }, { id: 5, name: "Kristen Copper", role: "S. Manager", team: "Sales", status: "active", age: "24", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", email: "kristen.cooper@example.com", }, { id: 6, name: "Brian Kim", role: "P. Manager", team: "Management", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", status: "Active", }, { id: 7, name: "Michael Hunt", role: "Designer", team: "Design", status: "paused", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", email: "michael.hunt@example.com", }, { id: 8, name: "Samantha Brooks", role: "HR Manager", team: "HR", status: "active", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", email: "samantha.brooks@example.com", }, { id: 9, name: "Frank Harrison", role: "F. Manager", team: "Finance", status: "vacation", age: "33", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", email: "frank.harrison@example.com", }, { id: 10, name: "Emma Adams", role: "Ops Manager", team: "Operations", status: "active", age: "35", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", email: "emma.adams@example.com", }, { id: 11, name: "Brandon Stevens", role: "Jr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", email: "brandon.stevens@example.com", }, { id: 12, name: "Megan Richards", role: "P. Manager", team: "Product", status: "paused", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", email: "megan.richards@example.com", }, { id: 13, name: "Oliver Scott", role: "S. Manager", team: "Security", status: "active", age: "37", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", email: "oliver.scott@example.com", }, { id: 14, name: "Grace Allen", role: "M. Specialist", team: "Marketing", status: "active", age: "30", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", email: "grace.allen@example.com", }, { id: 15, name: "Noah Carter", role: "IT Specialist", team: "I. Technology", status: "paused", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", email: "noah.carter@example.com", }, { id: 16, name: "Ava Perez", role: "Manager", team: "Sales", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", email: "ava.perez@example.com", }, { id: 17, name: "Liam Johnson", role: "Data Analyst", team: "Analysis", status: "active", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", email: "liam.johnson@example.com", }, { id: 18, name: "Sophia Taylor", role: "QA Analyst", team: "Testing", status: "active", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", email: "sophia.taylor@example.com", }, { id: 19, name: "Lucas Harris", role: "Administrator", team: "Information Technology", status: "paused", age: "32", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", email: "lucas.harris@example.com", }, { id: 20, name: "Mia Robinson", role: "Coordinator", team: "Operations", status: "active", age: "26", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", email: "mia.robinson@example.com", }, ];`,Na=`import {Select, SelectItem, Avatar} from "@nextui-org/react"; import {users} from "./data"; export default function App() { return ( ); }`,Ta=`import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react"; import {users} from "./data"; type User = { id: number; name: string; role: string; team: string; status: string; age: string; avatar: string; email: string; }; export default function App() { return ( ); }`,Da={"/App.jsx":Na,"/data.js":E},Ma={"/App.tsx":Ta,"/data.ts":E},P={...Da,...Ma};var za=`import {Select, SelectItem, SelectSection} from "@nextui-org/react"; export default function App() { return ( ); }`,Wa={"/App.jsx":za},V={...Wa};var Ea=`import {Select, SelectItem, SelectSection} from "@nextui-org/react"; export default function App() { const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; return ( ); }`,Pa={"/App.jsx":Ea},R={...Pa};var Va=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Ra=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { return ( ); }`,Oa={"/App.jsx":Ra,"/data.js":Va},O={...Oa};var Z=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Za=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [values, setValues] = React.useState(new Set(["cat", "dog"])); return (

Selected: {Array.from(values).join(", ")}

); }`,Ha=`import {Select, SelectItem, Selection} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [values, setValues] = React.useState(new Set(["cat", "dog"])); return (

Selected: {Array.from(values).join(", ")}

); }`,Ba={"/App.jsx":Za,"/data.js":Z},Fa={"/App.tsx":Ha,"/data.ts":Z},H={...Ba,...Fa};var B=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,Ka=`import {Select, SelectItem} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [values, setValues] = React.useState(new Set([])); const handleSelectionChange = (e) => { setValues(new Set(e.target.value.split(","))); }; return (

Selected: {Array.from(values).join(", ")}

); }`,Ga=`import {Select, SelectItem, Selection} from "@nextui-org/react"; import {animals} from "./data"; export default function App() { const [values, setValues] = React.useState(new Set([])); const handleSelectionChange = (e: React.ChangeEvent) => { setValues(new Set(e.target.value.split(","))); }; return (

Selected: {Array.from(values).join(", ")}

); }`,Ua={"/App.jsx":Ka,"/data.js":B},Ja={"/App.tsx":Ga,"/data.ts":B},F={...Ua,...Ja};var K=`export const users = [ { id: 1, name: "Tony Reichert", role: "CEO", team: "Management", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", email: "tony.reichert@example.com", }, { id: 2, name: "Zoey Lang", role: "Tech Lead", team: "Development", status: "paused", age: "25", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", email: "zoey.lang@example.com", }, { id: 3, name: "Jane Fisher", role: "Sr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", email: "jane.fisher@example.com", }, { id: 4, name: "William Howard", role: "C.M.", team: "Marketing", status: "vacation", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", email: "william.howard@example.com", }, { id: 5, name: "Kristen Copper", role: "S. Manager", team: "Sales", status: "active", age: "24", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", email: "kristen.cooper@example.com", }, { id: 6, name: "Brian Kim", role: "P. Manager", team: "Management", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", status: "Active", }, { id: 7, name: "Michael Hunt", role: "Designer", team: "Design", status: "paused", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", email: "michael.hunt@example.com", }, { id: 8, name: "Samantha Brooks", role: "HR Manager", team: "HR", status: "active", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", email: "samantha.brooks@example.com", }, { id: 9, name: "Frank Harrison", role: "F. Manager", team: "Finance", status: "vacation", age: "33", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", email: "frank.harrison@example.com", }, { id: 10, name: "Emma Adams", role: "Ops Manager", team: "Operations", status: "active", age: "35", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", email: "emma.adams@example.com", }, { id: 11, name: "Brandon Stevens", role: "Jr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", email: "brandon.stevens@example.com", }, { id: 12, name: "Megan Richards", role: "P. Manager", team: "Product", status: "paused", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", email: "megan.richards@example.com", }, { id: 13, name: "Oliver Scott", role: "S. Manager", team: "Security", status: "active", age: "37", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", email: "oliver.scott@example.com", }, { id: 14, name: "Grace Allen", role: "M. Specialist", team: "Marketing", status: "active", age: "30", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", email: "grace.allen@example.com", }, { id: 15, name: "Noah Carter", role: "IT Specialist", team: "I. Technology", status: "paused", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", email: "noah.carter@example.com", }, { id: 16, name: "Ava Perez", role: "Manager", team: "Sales", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", email: "ava.perez@example.com", }, { id: 17, name: "Liam Johnson", role: "Data Analyst", team: "Analysis", status: "active", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", email: "liam.johnson@example.com", }, { id: 18, name: "Sophia Taylor", role: "QA Analyst", team: "Testing", status: "active", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", email: "sophia.taylor@example.com", }, { id: 19, name: "Lucas Harris", role: "Administrator", team: "Information Technology", status: "paused", age: "32", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", email: "lucas.harris@example.com", }, { id: 20, name: "Mia Robinson", role: "Coordinator", team: "Operations", status: "active", age: "26", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", email: "mia.robinson@example.com", }, ];`,_a=`import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react"; import {users} from "./data"; export default function App() { return ( ); }`,Qa=`import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react"; import {users} from "./data"; type User = { id: number; name: string; role: string; team: string; status: string; age: string; avatar: string; email: string; }; export default function App() { return ( ); }`,$a={"/App.jsx":_a,"/data.js":K},Ya={"/App.tsx":Qa,"/data.js":K},G={...$a,...Ya};var Xa=`export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {label: "Dog", value: "dog", description: "The most popular pet in the world"}, {label: "Elephant", value: "elephant", description: "The largest land animal"}, {label: "Lion", value: "lion", description: "The king of the jungle"}, {label: "Tiger", value: "tiger", description: "The largest cat species"}, {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, { label: "Dolphin", value: "dolphin", description: "A widely distributed and diverse group of aquatic mammals", }, {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {label: "Zebra", value: "zebra", description: "A several species of African equids"}, { label: "Shark", value: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", value: "whale", description: "Diverse group of fully aquatic placental marine mammals", }, {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ];`,et=`export const SelectorIcon = (props) => ( );`,at=`import {Select, SelectItem} from "@nextui-org/react"; import {SelectorIcon} from "./SelectorIcon"; import {animals} from "./data"; export default function App() { return ( ); }`,tt={"/App.jsx":at,"/data.js":Xa,"/SelectorIcon.jsx":et},U={...tt};var it=`export const users = [ { id: 1, name: "Tony Reichert", role: "CEO", team: "Management", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", email: "tony.reichert@example.com", }, { id: 2, name: "Zoey Lang", role: "Tech Lead", team: "Development", status: "paused", age: "25", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", email: "zoey.lang@example.com", }, { id: 3, name: "Jane Fisher", role: "Sr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", email: "jane.fisher@example.com", }, { id: 4, name: "William Howard", role: "C.M.", team: "Marketing", status: "vacation", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", email: "william.howard@example.com", }, { id: 5, name: "Kristen Copper", role: "S. Manager", team: "Sales", status: "active", age: "24", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", email: "kristen.cooper@example.com", }, { id: 6, name: "Brian Kim", role: "P. Manager", team: "Management", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", email: "brian.kim@example.com", status: "Active", }, { id: 7, name: "Michael Hunt", role: "Designer", team: "Design", status: "paused", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", email: "michael.hunt@example.com", }, { id: 8, name: "Samantha Brooks", role: "HR Manager", team: "HR", status: "active", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", email: "samantha.brooks@example.com", }, { id: 9, name: "Frank Harrison", role: "F. Manager", team: "Finance", status: "vacation", age: "33", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", email: "frank.harrison@example.com", }, { id: 10, name: "Emma Adams", role: "Ops Manager", team: "Operations", status: "active", age: "35", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", email: "emma.adams@example.com", }, { id: 11, name: "Brandon Stevens", role: "Jr. Dev", team: "Development", status: "active", age: "22", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", email: "brandon.stevens@example.com", }, { id: 12, name: "Megan Richards", role: "P. Manager", team: "Product", status: "paused", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", email: "megan.richards@example.com", }, { id: 13, name: "Oliver Scott", role: "S. Manager", team: "Security", status: "active", age: "37", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", email: "oliver.scott@example.com", }, { id: 14, name: "Grace Allen", role: "M. Specialist", team: "Marketing", status: "active", age: "30", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", email: "grace.allen@example.com", }, { id: 15, name: "Noah Carter", role: "IT Specialist", team: "I. Technology", status: "paused", age: "31", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", email: "noah.carter@example.com", }, { id: 16, name: "Ava Perez", role: "Manager", team: "Sales", status: "active", age: "29", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", email: "ava.perez@example.com", }, { id: 17, name: "Liam Johnson", role: "Data Analyst", team: "Analysis", status: "active", age: "28", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", email: "liam.johnson@example.com", }, { id: 18, name: "Sophia Taylor", role: "QA Analyst", team: "Testing", status: "active", age: "27", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", email: "sophia.taylor@example.com", }, { id: 19, name: "Lucas Harris", role: "Administrator", team: "Information Technology", status: "paused", age: "32", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", email: "lucas.harris@example.com", }, { id: 20, name: "Mia Robinson", role: "Coordinator", team: "Operations", status: "active", age: "26", avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", email: "mia.robinson@example.com", }, ];`,lt=`import {Select, SelectItem, Avatar} from "@nextui-org/react"; import {users} from "./data"; export default function App() { return ( ); }`,ot={"/App.jsx":lt,"/data.js":it},J={...ot};var o={usage:d,dynamic:h,disabled:f,disabledItems:v,required:g,sizes:x,colors:b,variants:S,radius:I,labelPlacements:y,asyncLoadingItems:C,description:q,startContent:w,itemStartContent:k,withoutScrollShadow:L,errorMessage:j,singleControlled:T,singleControlledOnChange:M,openState:z,customItems:W,customRenderValue:P,sections:V,customSectionsStyle:R,multiple:O,multipleControlled:H,multipleControlledOnChange:F,multipleWithChips:G,customSelectorIcon:U,customStyles:J};var nt=`const ListboxWrapper = ({children}) => (

{children}

);`,rt=`import {Listbox, ListboxItem} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; export default function App() { return ( alert(key)} > New file Copy link Edit file Delete file ); }`,st={"/App.jsx":rt,"/ListboxWrapper.jsx":nt},_={...st};var ct=`const ListboxWrapper = ({children}) => (

{children}

);`,mt=`import {Listbox, ListboxItem} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; export default function App() { const items = [ { key: "new", label: "New file", }, { key: "copy", label: "Copy link", }, { key: "edit", label: "Edit file", }, { key: "delete", label: "Delete file", } ]; return ( alert(key)} > {(item) => ( {item.label} )} ); }`,pt={"/App.jsx":mt,"/ListboxWrapper.jsx":ct},Q={...pt};var ut=`const ListboxWrapper = ({children}) => (

{children}

);`,dt=`import {Listbox, ListboxItem} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; export default function App() { return ( alert(key)} > New file Copy link Edit file Delete file ); }`,ht={"/App.jsx":dt,"/ListboxWrapper.jsx":ut},$={...ht};var ft=`const ListboxWrapper = ({children}) => (

{children}

);`,vt=`import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; export default function App() { const [selectedVariant, setSelectedVariant] = React.useState("solid") const [selectedColor, setSelectedColor] = React.useState("default") const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; return (

New file Copy link Edit file Delete file

{variants.map((variant) => ( {variant} ))} {colors.map((color) => ( {color} ))}

); }`,gt={"/App.jsx":vt,"/ListboxWrapper.jsx":ft},Y={...gt};var xt=`export const ListboxWrapper = ({children}) => (

{children}

);`,bt=`import {Listbox, ListboxItem} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; export default function App() { const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); const selectedValue = React.useMemo( () => Array.from(selectedKeys).join(", "), [selectedKeys] ); return (

Text Number Date Single Date Iteration

Selected value: {selectedValue}

); }`,St={"/App.jsx":bt,"/ListboxWrapper.jsx":xt},X={...St};var It=`const ListboxWrapper = ({children}) => (

{children}

);`,yt=`import {Listbox, ListboxItem} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; export default function App() { const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); const selectedValue = React.useMemo( () => Array.from(selectedKeys).join(", "), [selectedKeys] ); return (

Text Number Date Single Date Iteration

Selected value: {selectedValue}

); }`,wt={"/App.jsx":yt,"/ListboxWrapper.jsx":It},ee={...wt};var kt=`export const AddNoteIcon = (props) => ( );`,At=`export const CopyDocumentIcon = (props) => ( );`,Ct=`export const EditDocumentIcon = (props) => ( );`,Lt=`export const DeleteDocumentIcon = (props) => ( );`,qt=`const ListboxWrapper = ({children}) => (

{children}

);`,jt=`import {Listbox, ListboxItem, cn} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; import {AddNoteIcon} from "./AddNoteIcon.jsx"; import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; export default function App() { const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; return ( } > New file } > Copy link } > Edit file } > Delete file ); }`,Nt={"/App.jsx":jt,"/ListboxWrapper.jsx":qt,"/AddNoteIcon.jsx":kt,"/CopyDocumentIcon.jsx":At,"/EditDocumentIcon.jsx":Ct,"/DeleteDocumentIcon.jsx":Lt},ae={...Nt};var Tt=`export const AddNoteIcon = (props) => ( );`,Dt=`export const CopyDocumentIcon = (props) => ( );`,Mt=`export const EditDocumentIcon = (props) => ( );`,zt=`export const DeleteDocumentIcon = (props) => ( );`,Wt=`const ListboxWrapper = ({children}) => (

{children}

);`,Et=`import {Listbox, ListboxItem, cn} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; import {AddNoteIcon} from "./AddNoteIcon.jsx"; import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; export default function App() { const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; return ( } > New file } > Copy link } > Edit file } > Delete file ); }`,Pt={"/App.jsx":Et,"/ListboxWrapper.jsx":Wt,"/AddNoteIcon.jsx":Tt,"/CopyDocumentIcon.jsx":Dt,"/EditDocumentIcon.jsx":Mt,"/DeleteDocumentIcon.jsx":zt},te={...Pt};var Vt=`export const AddNoteIcon = (props) => ( );`,Rt=`export const CopyDocumentIcon = (props) => ( );`,Ot=`export const EditDocumentIcon = (props) => ( );`,Zt=`export const DeleteDocumentIcon = (props) => ( );`,Ht=`const ListboxWrapper = ({children}) => (

{children}

);`,Bt=`import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react"; import {ListboxWrapper} from "./ListboxWrapper"; import {AddNoteIcon} from "./AddNoteIcon.jsx"; import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; export default function App() { const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; return ( } > New file } > Copy link } > Edit file } > Delete file ); }`,Ft={"/App.jsx":Bt,"/ListboxWrapper.jsx":Ht,"/AddNoteIcon.jsx":Vt,"/CopyDocumentIcon.jsx":Rt,"/EditDocumentIcon.jsx":Ot,"/DeleteDocumentIcon.jsx":Zt},ie={...Ft};var Kt=`export const BugIcon = (props) => ( ); `,Gt=`export const PullRequestIcon = (props) => ( );`,Ut=`export const ChatIcon = (props) => ( );`,Jt=`export const PlayCircleIcon = (props) => ( );`,_t=`export const LayoutIcon = (props) => ( );`,Qt=`export const TagIcon = (props) => ( );`,$t=`export const UsersIcon = (props) => ( );`,Yt=`export const WatchersIcons = (props) => ( );`,Xt=`export const BookIcon = (props) => ( );`,ei=`export const ChevronRightIcon = (props) => ( );`,ai=`import {cn} from "@nextui-org/react"; const IconWrapper = ({children, className}) => (

{children}

);`,ti=`const ItemCounter = ({number}) => (

{number}

);`,ii=`import {Listbox, ListboxItem} from "@nextui-org/react"; import {IconWrapper} from "./IconWrapper"; import {ItemCounter} from "./ItemCounter"; import {BugIcon} from "./BugIcon"; import {PullRequestIcon} from "./PullRequestIcon"; import {ChatIcon} from "./ChatIcon"; import {PlayCircleIcon} from "./PlayCircleIcon"; import {LayoutIcon} from "./LayoutIcon"; import {TagIcon} from "./TagIcon"; import {UsersIcon} from "./UsersIcon"; import {WatchersIcon} from "./WatchersIcon"; import {BookIcon} from "./BookIcon"; import {ChevronRightIcon} from "./ChevronRightIcon"; export default function App() { return ( alert(key)} className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium" itemClasses={{ base: "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80", }} > } startContent={ } > Issues } startContent={ } > Pull Requests } startContent={ } > Discussions } startContent={ } > Actions } startContent={ } > Projects } startContent={ } textValue="Releases" >

Releases

@nextui-org/react@2.0.10

49 minutes ago Latest

} startContent={ } > Contributors } startContent={ } > Watchers MIT} startContent={ } > License ); }`,li={"/App.jsx":ii,"/IconWrapper.jsx":ai,"/ItemCounter.jsx":ti,"/BugIcon.jsx":Kt,"/PullRequestIcon.jsx":Gt,"/ChatIcon.jsx":Ut,"/PlayCircleIcon.jsx":Jt,"/LayoutIcon.jsx":_t,"/TagIcon.jsx":Qt,"/UsersIcon.jsx":$t,"/WatchersIcons.jsx":Yt,"/BookIcon.jsx":Xt,"/ChevronRightIcon.jsx":ei},le={...li};var s={usage:_,dynamic:Q,disabledKeys:$,variants:Y,singleSelection:X,multipleSelection:ee,icons:ae,description:te,sections:ie,customStyles:le};var oi=`export const Content = () => (

Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.

Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.

Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.

Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.

Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.

Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.

NextUI Latest Updates

All the latest news about NextUI.