+
+ Trigger
+
+ alice
+ bob
+ charlie
+
+
+
+
+ Trigger
+
+ alice
+ bob
+ charlie
+
+
+
+ )
+
+ let [button1, button2] = getComboboxButtons()
+
+ // Click the first combobox button
+ await click(button1)
+ expect(getComboboxes()).toHaveLength(1) // Only 1 combobox should be visible
+
+ // Verify that the first input is focused
+ assertActiveElement(getComboboxInputs()[0])
+
+ // Click the second combobox button
+ await click(button2)
+
+ expect(getComboboxes()).toHaveLength(1) // Only 1 combobox should be visible
+
+ // Verify that the first input is focused
+ assertActiveElement(getComboboxInputs()[1])
+ })
+ )
+
+ it(
+ 'should be possible to click outside of the combobox which should close the combobox (even if we press the combobox button)',
+ suppressConsoleLogs(async () => {
+ render(
+
+
+ Trigger
+
+ alice
+ bob
+ charlie
+
+
+
+
+
+ )
+
+ // Click the combobox button
+ await click(getComboboxButton())
+
+ // Ensure the combobox is open
+ assertComboboxList({ state: ComboboxState.Visible })
+
+ // Click the span inside the button
+ await click(getByText('Next'))
+
+ // Ensure the combobox is closed
+ assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+ // Ensure the outside button is focused
+ assertActiveElement(document.getElementById('btn'))
+
+ // Ensure that the focus button only got focus once (first click)
+ expect(focusFn).toHaveBeenCalledTimes(1)
+ })
+ )
+
+ it(
+ 'should be possible to hover an option and make it active',
+ suppressConsoleLogs(async () => {
+ render(
+
+
+ Trigger
+
+ alice
+ bob
+ charlie
+
+
+
+
+ Trigger
+
+ alice
+ bob
+ charlie
+
+
+
+ `,
+ setup: () => ({ value: ref(null) }),
+ })
+
+ let [button1, button2] = getComboboxButtons()
+
+ // Click the first combobox button
+ await click(button1)
+ expect(getComboboxes()).toHaveLength(1) // Only 1 combobox should be visible
+
+ // Verify that the first input is focused
+ assertActiveElement(getComboboxInputs()[0])
+
+ // Click the second combobox button
+ await click(button2)
+
+ expect(getComboboxes()).toHaveLength(1) // Only 1 combobox should be visible
+
+ // Verify that the first input is focused
+ assertActiveElement(getComboboxInputs()[1])
+ })
+ )
+
+ it(
+ 'should be possible to click outside of the combobox which should close the combobox (even if we press the combobox button)',
+ suppressConsoleLogs(async () => {
+ renderTemplate({
+ template: html`
+
+
+ Trigger
+
+ alice
+ bob
+ charlie
+
+
+
+
+
+ `,
+ setup: () => ({ value: ref('test'), focusFn }),
+ })
+
+ // Click the combobox button
+ await click(getComboboxButton())
+
+ // Ensure the combobox is open
+ assertComboboxList({ state: ComboboxState.Visible })
+
+ // Click the span inside the button
+ await click(getByText('Next'))
+
+ // Ensure the combobox is closed
+ assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+ // Ensure the outside button is focused
+ assertActiveElement(document.getElementById('btn'))
+
+ // Ensure that the focus button only got focus once (first click)
+ expect(focusFn).toHaveBeenCalledTimes(1)
+ })
+ )
+
+ it(
+ 'should be possible to hover an option and make it active',
+ suppressConsoleLogs(async () => {
+ renderTemplate({
+ template: html`
+
+ {keys
+ .slice()
+ .reverse()
+ .join(' ')}
+
+ )
+}
+
+function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function Logo({ className }) {
+ return (
+
+ )
+}
+
+export default MyApp
diff --git a/packages/playground-react/pages/_error.tsx b/packages/playground-react/pages/_error.tsx
new file mode 100644
index 0000000..21c1a8a
--- /dev/null
+++ b/packages/playground-react/pages/_error.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import ErrorPage from 'next/error'
+import Head from 'next/head'
+import Link from 'next/link'
+
+import { ExamplesType, resolveAllExamples } from '../utils/resolve-all-examples'
+
+function NextLink(props: React.ComponentProps<'a'>) {
+ let { href, children, ...rest } = props
+ return (
+
+ {children}
+
+ )
+}
+
+export async function getStaticProps() {
+ return {
+ props: {
+ examples: await resolveAllExamples('pages'),
+ },
+ }
+}
+
+export default function Page(props: { examples: false | ExamplesType[] }) {
+ if (props.examples === false) {
+ return
+
+
+ )
+}
+
+export function Examples(props: { examples: ExamplesType[] }) {
+ return (
+
+
+ Examples
+-
+ {props.examples.map(example => (
+
-
+ {example.children ? (
+
{example.name}
+ ) : ( ++ {example.name} + + )} + {example.children &&} +
+ ))}
+
+
+ )
+}
diff --git a/packages/playground-react/pages/combobox/command-palette-with-groups.tsx b/packages/playground-react/pages/combobox/command-palette-with-groups.tsx
new file mode 100644
index 0000000..ee432ca
--- /dev/null
+++ b/packages/playground-react/pages/combobox/command-palette-with-groups.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect, Fragment } from 'react'
+import { Combobox } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+
+let everybody = [
+ { id: 1, img: 'https://github.com/adamwathan.png', name: 'Adam Wathan' },
+ { id: 2, img: 'https://github.com/sschoger.png', name: 'Steve Schoger' },
+ { id: 3, img: 'https://github.com/bradlc.png', name: 'Brad Cornes' },
+ { id: 4, img: 'https://github.com/simonswiss.png', name: 'Simon Vrachliotis' },
+ { id: 5, img: 'https://github.com/robinmalfait.png', name: 'Robin Malfait' },
+ {
+ id: 6,
+ img: 'https://pbs.twimg.com/profile_images/1478879681491394569/eV2PyCnm_400x400.jpg',
+ name: 'James McDonald',
+ },
+ { id: 7, img: 'https://github.com/reinink.png', name: 'Jonathan Reinink' },
+ { id: 8, img: 'https://github.com/thecrypticace.png', name: 'Jordan Pittman' },
+]
+
+export default function Home() {
+ let [query, setQuery] = useState('')
+ let [activePerson, setActivePerson] = useState(everybody[2])
+
+ function setPerson(person) {
+ setActivePerson(person)
+ setQuery(person.name ?? '')
+ }
+
+ // Choose a random person on mount
+ useEffect(() => {
+ setPerson(everybody[Math.floor(Math.random() * everybody.length)])
+ }, [])
+
+ let people =
+ query === ''
+ ? everybody
+ : everybody.filter(person => person.name.toLowerCase().includes(query.toLowerCase()))
+
+ let groups = people.reduce((groups, person) => {
+ let lastNameLetter = person.name.split(' ')[1][0]
+
+ groups.set(lastNameLetter, [...(groups.get(lastNameLetter) || []), person])
+
+ return groups
+ }, new Map())
+
+ return (
+
+
+ Selected person: {activePerson}
+
+ {
+ setActivePerson(value)
+ }}
+ as="div"
+ >
+
+ Assigned to
+
+
+
+
+
+
+ setQuery(e.target.value)}
+ className="border-none outline-none px-3 py-1"
+ />
+
+
+
+
+
+
+
+
+
+
+ {people.map(name => (
+ {
+ return classNames(
+ 'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900'
+ )
+ }}
+ >
+ {({ active, selected }) => (
+ <>
+
+ {name}
+
+ {selected && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/combobox/command-palette.tsx b/packages/playground-react/pages/combobox/command-palette.tsx
new file mode 100644
index 0000000..f68ba92
--- /dev/null
+++ b/packages/playground-react/pages/combobox/command-palette.tsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react'
+import { Combobox } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+
+let everybody = [
+ { id: 1, img: 'https://github.com/adamwathan.png', name: 'Adam Wathan' },
+ { id: 2, img: 'https://github.com/sschoger.png', name: 'Steve Schoger' },
+ { id: 3, img: 'https://github.com/bradlc.png', name: 'Brad Cornes' },
+ { id: 4, img: 'https://github.com/simonswiss.png', name: 'Simon Vrachliotis' },
+ { id: 5, img: 'https://github.com/robinmalfait.png', name: 'Robin Malfait' },
+ {
+ id: 6,
+ img: 'https://pbs.twimg.com/profile_images/1478879681491394569/eV2PyCnm_400x400.jpg',
+ name: 'James McDonald',
+ },
+ { id: 7, img: 'https://github.com/reinink.png', name: 'Jonathan Reinink' },
+ { id: 8, img: 'https://github.com/thecrypticace.png', name: 'Jordan Pittman' },
+]
+
+export default function Home() {
+ let [query, setQuery] = useState('')
+ let [activePerson, setActivePerson] = useState(everybody[2])
+
+ // Choose a random person on mount
+ useEffect(() => {
+ setActivePerson(everybody[Math.floor(Math.random() * everybody.length)])
+ }, [])
+
+ let people =
+ query === ''
+ ? everybody
+ : everybody.filter(person => person.name.toLowerCase().includes(query.toLowerCase()))
+
+ return (
+
+
+
+ setPerson(person)}
+ className="bg-white w-full shadow-sm border border-black/5 bg-clip-padding rounded overflow-hidden"
+ >
+ {({ activeOption }) => {
+ return (
+
+
+
+ setQuery(e.target.value)}
+ className="border-none outline-none px-3 py-1 bg-none rounded-none w-full"
+ placeholder="Search users…"
+ displayValue={item => item?.name}
+ />
+
+ )
+ }}
+
+
+ {Array.from(groups.entries())
+ .sort(([letterA], [letterZ]) => letterA.localeCompare(letterZ))
+ .map(([letter, people]) => (
+
+ {
+ return classNames(
+ 'flex relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none space-x-4',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900'
+ )
+ }}
+ >
+ {({ active, selected }) => (
+ <>
+ 
+
+ {person.name}
+
+ {active && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+ ))}
+
+
+ {people.length === 0 ? (
+
+ {letter}
+ {people.map(person => (
+ No person selected
+ ) : activeOption === null ? null : (
+
+
+ )}
+
+
+
+ 
+
+ {activeOption.name}
+ Obviously cool person
+
+
+ )
+}
diff --git a/packages/playground-react/pages/dialog/dialog.tsx b/packages/playground-react/pages/dialog/dialog.tsx
new file mode 100644
index 0000000..7187c97
--- /dev/null
+++ b/packages/playground-react/pages/dialog/dialog.tsx
@@ -0,0 +1,238 @@
+import React, { useState, Fragment } from 'react'
+import { Dialog, Menu, Portal, Transition } from '@headlessui/react'
+import { usePopper } from '../../utils/hooks/use-popper'
+import { classNames } from '../../utils/class-names'
+
+function resolveClass({ active, disabled }) {
+ return classNames(
+ 'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
+ active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+ disabled && 'cursor-not-allowed opacity-50'
+ )
+}
+
+function Nested({ onClose, level = 0 }) {
+ let [showChild, setShowChild] = useState(false)
+
+ return (
+ <>
+
+
+ )
+}
+
+export default function Home() {
+ let [isOpen, setIsOpen] = useState(false)
+ let [nested, setNested] = useState(false)
+
+ let [trigger, container] = usePopper({
+ placement: 'bottom-end',
+ strategy: 'fixed',
+ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
+ })
+
+ return (
+ <>
+
+
+
+ {nested &&
+
+
+ setActivePerson(person)}
+ className="bg-white w-full shadow-sm border border-black/5 bg-clip-padding rounded overflow-hidden"
+ >
+ {({ activeOption, open }) => {
+ return (
+
+
+
+ setQuery(e.target.value)}
+ className="border-none outline-none px-3 py-1 rounded-none w-full"
+ placeholder="Search users…"
+ displayValue={item => item?.name}
+ />
+
+ )
+ }}
+
+
+ {people.map(person => (
+ {
+ return classNames(
+ 'flex relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none space-x-4',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900'
+ )
+ }}
+ >
+ {({ active, selected }) => (
+ <>
+
+
+ {person.name}
+
+ {active && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+
+ {people.length === 0 ? (
+
+ No person selected
+ ) : activeOption === null ? null : (
+
+
+ )}
+
+
+
+
+
+ {activeOption.name}
+ Obviously cool person
+
+
+ )
+}
diff --git a/packages/playground-react/pages/listbox/listbox-with-pure-tailwind.tsx b/packages/playground-react/pages/listbox/listbox-with-pure-tailwind.tsx
new file mode 100644
index 0000000..f7f632f
--- /dev/null
+++ b/packages/playground-react/pages/listbox/listbox-with-pure-tailwind.tsx
@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react'
+import { Listbox } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+
+let people = [
+ 'Wade Cooper',
+ 'Arlene Mccoy',
+ 'Devon Webb',
+ 'Tom Cook',
+ 'Tanya Fox',
+ 'Hellen Schmidt',
+ 'Caroline Schultz',
+ 'Mason Heaney',
+ 'Claudie Smitham',
+ 'Emil Schaefer',
+]
+
+export default function Home() {
+ let [active, setActivePerson] = useState(people[2])
+
+ // Choose a random person on mount
+ useEffect(() => {
+ setActivePerson(people[Math.floor(Math.random() * people.length)])
+ }, [])
+
+ return (
+
+
+ Trigger
+
+
+ Content
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/listbox/multiple-elements.tsx b/packages/playground-react/pages/listbox/multiple-elements.tsx
new file mode 100644
index 0000000..b68eb75
--- /dev/null
+++ b/packages/playground-react/pages/listbox/multiple-elements.tsx
@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react'
+import { Listbox } from '@headlessui/react'
+import { classNames } from '../../utils/class-names'
+
+let people = [
+ 'Wade Cooper',
+ 'Arlene Mccoy',
+ 'Devon Webb',
+ 'Tom Cook',
+ 'Tanya Fox',
+ 'Hellen Schmidt',
+ 'Caroline Schultz',
+ 'Mason Heaney',
+ 'Claudie Smitham',
+ 'Emil Schaefer',
+]
+
+export default function Home() {
+ return (
+
+
+
+ {
+ console.log('value:', value)
+ setActivePerson(value)
+ }}
+ >
+
+ Assigned to
+
+
+
+
+
+
+
+ {active}
+
+
+
+
+
+
+
+
+
+ {people.map(name => (
+ {
+ return classNames(
+ 'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900'
+ )
+ }}
+ >
+ {({ active, selected }) => (
+ <>
+
+ {name}
+
+ {selected && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+
+
+
+ )
+}
+
+function PeopleList() {
+ let [active, setActivePerson] = useState(people[2])
+
+ // Choose a random person on mount
+ useEffect(() => {
+ setActivePerson(people[Math.floor(Math.random() * people.length)])
+ }, [])
+
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/menu/menu-with-framer-motion.tsx b/packages/playground-react/pages/menu/menu-with-framer-motion.tsx
new file mode 100644
index 0000000..c146740
--- /dev/null
+++ b/packages/playground-react/pages/menu/menu-with-framer-motion.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import Link from 'next/link'
+import { Menu } from '@headlessui/react'
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ return (
+
+ {
+ console.log('value:', value)
+ setActivePerson(value)
+ }}
+ >
+
+ Assigned to
+
+
+
+
+
+
+
+ {active}
+
+
+
+
+
+
+
+
+
+ {people.map(name => (
+ {
+ return classNames(
+ 'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900'
+ )
+ }}
+ >
+ {({ active, selected }) => (
+ <>
+
+ {name}
+
+ {selected && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+
+
+
+ )
+}
+
+function NextLink(props: React.ComponentProps<'a'>) {
+ let { href, children, ...rest } = props
+ return (
+
+ {children}
+
+ )
+}
+
+function SignOutButton(props) {
+ return (
+
+ )
+}
+
+function Item(props: React.ComponentProps
+
+
+
+
+ )
+}
+
+function Portal(props: { children: ReactNode }) {
+ let { children } = props
+ let [mounted, setMounted] = useState(false)
+
+ useEffect(() => setMounted(true), [])
+
+ if (!mounted) return null
+ return createPortal(children, document.body)
+}
diff --git a/packages/playground-react/pages/menu/menu-with-transition-and-popper.tsx b/packages/playground-react/pages/menu/menu-with-transition-and-popper.tsx
new file mode 100644
index 0000000..c801431
--- /dev/null
+++ b/packages/playground-react/pages/menu/menu-with-transition-and-popper.tsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import { Menu, Transition } from '@headlessui/react'
+
+import { usePopper } from '../../utils/hooks/use-popper'
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ let [trigger, container] = usePopper({
+ placement: 'bottom-end',
+ strategy: 'fixed',
+ modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
+ })
+
+ function resolveClass({ active, disabled }) {
+ return classNames(
+ 'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
+ active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+ disabled && 'cursor-not-allowed opacity-50'
+ )
+ }
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/menu/menu-with-transition.tsx b/packages/playground-react/pages/menu/menu-with-transition.tsx
new file mode 100644
index 0000000..950d651
--- /dev/null
+++ b/packages/playground-react/pages/menu/menu-with-transition.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { Menu, Transition } from '@headlessui/react'
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ function resolveClass({ active, disabled }) {
+ return classNames(
+ 'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
+ active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+ disabled && 'cursor-not-allowed opacity-50'
+ )
+ }
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/menu/menu.tsx b/packages/playground-react/pages/menu/menu.tsx
new file mode 100644
index 0000000..acade92
--- /dev/null
+++ b/packages/playground-react/pages/menu/menu.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { Menu } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ return (
+
+
+
+
+
+ )
+}
+
+function CustomMenuItem(props: React.ComponentProps
+
+
+
+
+ )
+}
+
+function Dropdown() {
+ function resolveClass({ active, disabled }) {
+ return classNames(
+ 'block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50'
+ )
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/popover/popover.tsx b/packages/playground-react/pages/popover/popover.tsx
new file mode 100644
index 0000000..c11be5e
--- /dev/null
+++ b/packages/playground-react/pages/popover/popover.tsx
@@ -0,0 +1,116 @@
+import React, { forwardRef, Fragment } from 'react'
+import { Popover, Portal, Transition } from '@headlessui/react'
+import { usePopper } from '../../utils/hooks/use-popper'
+
+let Button = forwardRef(
+ (props: React.ComponentProps<'button'>, ref: React.MutableRefObject
+
+
+
+
+
+
+
+
+ Normal
+
+
+ {links.map((link, i) => (
+
+ Normal - {link}
+
+ ))}
+
+
+
+
+
+
+ {links.map((link, i) => (
+ Focus - {link}
+ ))}
+
+
+
+
+
+
+
+ {links.map(link => (
+ Portal - {link}
+ ))}
+
+
+
+
+
+
+
+
+ {links.map(link => (
+ Focus in Portal - {link}
+ ))}
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/radio-group/radio-group.tsx b/packages/playground-react/pages/radio-group/radio-group.tsx
new file mode 100644
index 0000000..e92c54f
--- /dev/null
+++ b/packages/playground-react/pages/radio-group/radio-group.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { RadioGroup } from '@headlessui/react'
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ let access = [
+ {
+ id: 'access-1',
+ name: 'Public access',
+ description: 'This project would be available to anyone who has the link',
+ },
+ {
+ id: 'access-2',
+ name: 'Private to Project Members',
+ description: 'Only members of this project would be able to access',
+ },
+ {
+ id: 'access-3',
+ name: 'Private to you',
+ description: 'You are the only one able to access this project',
+ },
+ ]
+ let [active, setActive] = useState()
+
+ return (
+
+ )
+}
diff --git a/packages/playground-react/pages/switch/switch-with-pure-tailwind.tsx b/packages/playground-react/pages/switch/switch-with-pure-tailwind.tsx
new file mode 100644
index 0000000..65cb003
--- /dev/null
+++ b/packages/playground-react/pages/switch/switch-with-pure-tailwind.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { Switch } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ let [state, setState] = useState(false)
+
+ return (
+
+
+ Enable notifications
+
+
+ classNames(
+ 'relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200',
+ checked ? 'bg-indigo-600' : 'bg-gray-200'
+ )
+ }
+ >
+ {({ checked }) => (
+ <>
+
+
+ )}
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/tabs/tabs-with-pure-tailwind.tsx b/packages/playground-react/pages/tabs/tabs-with-pure-tailwind.tsx
new file mode 100644
index 0000000..beac2e2
--- /dev/null
+++ b/packages/playground-react/pages/tabs/tabs-with-pure-tailwind.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import { Tab, Switch } from '@headlessui/react'
+
+import { classNames } from '../../utils/class-names'
+
+export default function Home() {
+ let tabs = [
+ { name: 'My Account', content: 'Tab content for my account' },
+ { name: 'Company', content: 'Tab content for company', disabled: true },
+ { name: 'Team Members', content: 'Tab content for team members' },
+ { name: 'Billing', content: 'Tab content for billing' },
+ ]
+
+ let [manual, setManual] = useState(false)
+
+ return (
+
+
+ Manual keyboard activation
+
+
+ classNames(
+ 'relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200',
+ checked ? 'bg-indigo-600' : 'bg-gray-200'
+ )
+ }
+ >
+ {({ checked }) => (
+
+ )}
+
+
+
+
+
+ {tabs.map((tab, tabIdx) => (
+
+ classNames(
+ selected ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700',
+ tabIdx === 0 ? 'rounded-l-lg' : '',
+ tabIdx === tabs.length - 1 ? 'rounded-r-lg' : '',
+ tab.disabled && 'opacity-50',
+ 'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10'
+ )
+ }
+ >
+ {({ selected }) => (
+ <>
+ {tab.name}
+ {tab.disabled && (disabled)}
+
+
+ )}
+
+ ))}
+
+
+
+ {tabs.map(tab => (
+
+ {tab.content}
+
+ ))}
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/transitions/component-examples/dropdown.tsx b/packages/playground-react/pages/transitions/component-examples/dropdown.tsx
new file mode 100644
index 0000000..e391543
--- /dev/null
+++ b/packages/playground-react/pages/transitions/component-examples/dropdown.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import Head from 'next/head'
+import { Transition } from '@headlessui/react'
+
+export default function Home() {
+ return (
+ <>
+
+
+
+
+ )
+}
+
+function Dropdown() {
+ let [isOpen, setIsOpen] = useState(false)
+
+ return (
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/transitions/component-examples/modal.tsx b/packages/playground-react/pages/transitions/component-examples/modal.tsx
new file mode 100644
index 0000000..cd03991
--- /dev/null
+++ b/packages/playground-react/pages/transitions/component-examples/modal.tsx
@@ -0,0 +1,168 @@
+import React, { useRef, useState } from 'react'
+import { Transition } from '@headlessui/react'
+
+export default function Home() {
+ let [isOpen, setIsOpen] = useState(false)
+ function toggle() {
+ setIsOpen(v => !v)
+ }
+
+ let [email, setEmail] = useState('')
+ let [events, setEvents] = useState([])
+ let inputRef = useRef(null)
+
+ function addEvent(name) {
+ setEvents(existing => [...existing, `${new Date().toJSON()} - ${name}`])
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {
+ addEvent('Before enter')
+ }}
+ afterEnter={() => {
+ inputRef.current.focus()
+ addEvent('After enter')
+ }}
+ beforeLeave={() => {
+ addEvent('Before leave (before confirm)')
+ window.confirm('Are you sure?')
+ addEvent('Before leave (after confirm)')
+ }}
+ afterLeave={() => {
+ addEvent('After leave (before alert)')
+ window.alert('Consider it done!')
+ addEvent('After leave (after alert)')
+ setEmail('')
+ }}
+ >
+
+
+ )
+}
diff --git a/packages/playground-react/pages/transitions/component-examples/nested/hidden.tsx b/packages/playground-react/pages/transitions/component-examples/nested/hidden.tsx
new file mode 100644
index 0000000..989f266
--- /dev/null
+++ b/packages/playground-react/pages/transitions/component-examples/nested/hidden.tsx
@@ -0,0 +1,60 @@
+import React, { useState, ReactNode } from 'react'
+import { Transition } from '@headlessui/react'
+
+export default function Home() {
+ let [isOpen, setIsOpen] = useState(true)
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ -
+
- + {event} + + ))} +
Events:
+ {events.map((event, i) => ( +
+
+
+ {/* This element is to trick the browser into centering the modal contents. */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Heroicon name: exclamation */}
+
+
+
+
+ + Deactivate account +
+
+
+ + Are you sure you want to deactivate your account? All of your data will be + permanently removed. This action cannot be undone. +
+
+
+
+
+
+
+ setEmail(event.target.value)}
+ id="email"
+ className="block w-full px-3 form-input sm:text-sm sm:leading-5"
+ placeholder="name@example.com"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function Box({ children }: { children?: ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a box
+ {children}
+
+
+
+
+ )
+}
+
+function Box({ children }: { children?: ReactNode }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a box
+ {children}
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/transitions/full-page-examples/full-page-transition.tsx b/packages/playground-react/pages/transitions/full-page-examples/full-page-transition.tsx
new file mode 100644
index 0000000..49cc646
--- /dev/null
+++ b/packages/playground-react/pages/transitions/full-page-examples/full-page-transition.tsx
@@ -0,0 +1,181 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Head from 'next/head'
+import { Transition } from '@headlessui/react'
+
+import { classNames } from '../../../utils/class-names'
+import { match } from '../../../utils/match'
+
+export default function Shell() {
+ return (
+ <>
+
+
+
+
+
+
+
+ Contents to show and hide
+
+
+
+
+
+ )
+}
+
+function usePrevious
+
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/pages/transitions/full-page-examples/layout-with-sidebar.tsx b/packages/playground-react/pages/transitions/full-page-examples/layout-with-sidebar.tsx
new file mode 100644
index 0000000..0cc33e0
--- /dev/null
+++ b/packages/playground-react/pages/transitions/full-page-examples/layout-with-sidebar.tsx
@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react'
+import Head from 'next/head'
+import { Transition } from '@headlessui/react'
+
+export default function App() {
+ let [mobileOpen, setMobileOpen] = useState(false)
+
+ useEffect(() => {
+ function handleEscape(event) {
+ if (!mobileOpen) return
+
+ if (event.key === 'Escape') {
+ setMobileOpen(false)
+ }
+ }
+
+ document.addEventListener('keyup', handleEscape)
+ return () => document.removeEventListener('keyup', handleEscape)
+ }, [mobileOpen])
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ + {pages[activePage]} +
+
+
+
+
+
+ {pages.map((page, i) => (
+
+ {page} page content
+
+ ))}
+
+
+ {/* Off-canvas menu for mobile */}
+
+ {/* Off-canvas menu overlay, show/hide based on off-canvas menu state. */}
+
+ {() => (
+
+): [RefCallback, RefCallback] {
+ let reference = useRef(null)
+ let popper = useRef(null)
+
+ let cleanupCallback = useRef(() => {})
+
+ let instantiatePopper = useCallback(() => {
+ if (!reference.current) return
+ if (!popper.current) return
+
+ if (cleanupCallback.current) cleanupCallback.current()
+
+ cleanupCallback.current = createPopper(reference.current, popper.current, options).destroy
+ }, [reference, popper, cleanupCallback, options])
+
+ return useMemo(
+ () => [
+ referenceDomNode => {
+ reference.current = referenceDomNode
+ instantiatePopper()
+ },
+ popperDomNode => {
+ popper.current = popperDomNode
+ instantiatePopper()
+ },
+ ],
+ [reference, popper, instantiatePopper]
+ )
+}
diff --git a/packages/playground-react/utils/match.ts b/packages/playground-react/utils/match.ts
new file mode 100644
index 0000000..80496d1
--- /dev/null
+++ b/packages/playground-react/utils/match.ts
@@ -0,0 +1,20 @@
+export function match(
+ value: TValue,
+ lookup: Record TReturnValue)>,
+ ...args: any[]
+): TReturnValue {
+ if (value in lookup) {
+ let returnValue = lookup[value]
+ return typeof returnValue === 'function' ? returnValue(...args) : returnValue
+ }
+
+ let error = new Error(
+ `Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(
+ lookup
+ )
+ .map(key => `"${key}"`)
+ .join(', ')}.`
+ )
+ if (Error.captureStackTrace) Error.captureStackTrace(error, match)
+ throw error
+}
diff --git a/packages/playground-react/utils/resolve-all-examples.ts b/packages/playground-react/utils/resolve-all-examples.ts
new file mode 100644
index 0000000..328da90
--- /dev/null
+++ b/packages/playground-react/utils/resolve-all-examples.ts
@@ -0,0 +1,50 @@
+import fs from 'fs'
+import path from 'path'
+export type ExamplesType = {
+ name: string
+ path: string
+ children?: ExamplesType[]
+}
+
+export async function resolveAllExamples(...paths: string[]) {
+ let base = path.resolve(process.cwd(), ...paths)
+
+ if (!fs.existsSync(base)) {
+ return false
+ }
+
+ let files = await fs.promises.readdir(base, { withFileTypes: true })
+ let items: ExamplesType[] = []
+
+ for (let file of files) {
+ if (file.name === '.DS_Store') {
+ continue
+ }
+
+ // Skip reserved filenames from Next. E.g.: _app.tsx, _error.tsx
+ if (file.name.startsWith('_')) {
+ continue
+ }
+
+ let bucket: ExamplesType = {
+ name: file.name.replace(/-/g, ' ').replace(/\.tsx?/g, ''),
+ path: [...paths, file.name]
+ .join('/')
+ .replace(/^pages/, '')
+ .replace(/\.tsx?/g, '')
+ .replace(/\/+/g, '/'),
+ }
+
+ if (file.isDirectory()) {
+ let children = await resolveAllExamples(...paths, file.name)
+
+ if (children) {
+ bucket.children = children
+ }
+ }
+
+ items.push(bucket)
+ }
+
+ return items
+}
diff --git a/yarn.lock b/yarn.lock
index c693813..0739cde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -195,6 +195,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+"@babel/helper-plugin-utils@^7.14.5":
+ version "7.16.7"
+ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+ integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
"@babel/helper-regex@^7.10.4":
version "7.10.5"
resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
@@ -244,7 +249,7 @@
dependencies:
"@babel/types" "^7.11.0"
-"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.16.7":
+"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.16.7":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
@@ -443,6 +448,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
+"@babel/plugin-syntax-jsx@7.14.5":
+ version "7.14.5"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+ integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.14.5"
+
"@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
version "7.10.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -874,6 +886,14 @@
globals "^11.1.0"
lodash "^4.17.19"
+"@babel/types@7.15.0":
+ version "7.15.0"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
+ integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
+ dependencies:
+ "@babel/helper-validator-identifier" "^7.14.9"
+ to-fast-properties "^2.0.0"
+
"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
version "7.11.5"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
@@ -904,6 +924,18 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
+"@emotion/is-prop-valid@^0.8.2":
+ version "0.8.8"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+ integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+ dependencies:
+ "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+ version "0.7.4"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+ integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
"@istanbuljs/load-nyc-config@^1.0.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1099,6 +1131,76 @@
"@types/yargs" "^15.0.0"
chalk "^4.0.0"
+"@next/env@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.8.tgz#a32ca0a97d464307f2e6ff106ce09b19aac108cf"
+ integrity sha512-Wa0gOeioB9PHap9wtZDZEhgOSE3/+qE/UALWjJHuNvH4J3oE+13EjVOiEsr1JcPCXUN8ESQE+phDKlo6qJ8P9g==
+
+"@next/react-refresh-utils@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-12.0.8.tgz#481760a95ef442abd091663db6582d4dc1b31f06"
+ integrity sha512-Bq4T/aOOFQUkCF9b8k9x+HpjOevu65ZPxsYJOpgEtBuJyvb+sZREtDDLKb/RtjUeLMrWrsGD0aLteyFFtiS8Og==
+
+"@next/swc-android-arm64@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.0.8.tgz#f8dc9663da367a75982730cac058339fb310d79a"
+ integrity sha512-BiXMcOZNnXSIXv+FQvbRgbMb+iYayLX/Sb2MwR0wja+eMs46BY1x/ssXDwUBADP1M8YtrGTlSPHZqUiCU94+Mg==
+
+"@next/swc-darwin-arm64@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.8.tgz#d6aced7d0a04815dd1324e7982accb3de6a643e8"
+ integrity sha512-6EGMmvcIwPpwt0/iqLbXDGx6oKHAXzbowyyVXK8cqmIvhoghRFjqfiNGBs+ar6wEBGt68zhwn/77vE3iQWoFJw==
+
+"@next/swc-darwin-x64@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.8.tgz#f4fe58d2ed852538410b15a0c80d78908050c716"
+ integrity sha512-todxgQOGP/ucz5UH2kKR3XGDdkWmWr0VZAAbzgTbiFm45Ol4ih602k2nNR3xSbza9IqNhxNuUVsMpBgeo19CFQ==
+
+"@next/swc-linux-arm-gnueabihf@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.8.tgz#2c02d824fb46e8c6094d7e758c5d7e965070f574"
+ integrity sha512-KULmdrfI+DJxBuhEyV47MQllB/WpC3P2xbwhHezxL/LkC2nkz5SbV4k432qpx2ebjIRf9SjdQ5Oz1FjD8Urayw==
+
+"@next/swc-linux-arm64-gnu@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.8.tgz#fc32caf3373b299558ede1d889e8555b9ba10ffb"
+ integrity sha512-1XO87wgIVPvt5fx5i8CqdhksRdcpqyzCOLW4KrE0f9pUCIT04EbsFiKdmsH9c73aqjNZMnCMXpbV+cn4hN8x1w==
+
+"@next/swc-linux-arm64-musl@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.8.tgz#c2d3d7bc2c34da81412b74bdd6e11d0615ae1886"
+ integrity sha512-NStRZEy/rkk2G18Yhc/Jzi1Q2Dv+zH176oO8479zlDQ5syRfc6AvRHVV4iNRc8Pai58If83r/nOJkwFgGwkKLw==
+
+"@next/swc-linux-x64-gnu@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.8.tgz#029d84f856801b818e5525ab1406f2446821d48c"
+ integrity sha512-rHxTGtTEDFsdT9/VjewzxE19S7W1NE+aZpm4TwbT1pSNGK9KQxQGcXjqoHMeB+VZCFknzNEoIU/vydbjZMlAuw==
+
+"@next/swc-linux-x64-musl@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.8.tgz#db572da90ab3bce0bc58595c6b8c2d32ec64a2d3"
+ integrity sha512-1F4kuFRQE10GSx7LMSvRmjMXFGpxT30g8rZzq9r/p/WKdErA4WB4uxaKEX0P8AINfuN63i4luKdR+LoacgBhYw==
+
+"@next/swc-win32-arm64-msvc@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.8.tgz#f33e2e56a96489935f87c6dd28f79a7b7ed3778f"
+ integrity sha512-QuRe49jqCV61TysGopC1P0HPqFAMZMWe1nbIQLyOkDLkULmZR8N2eYZq7fwqvZE5YwhMmJA/grwWFVBqSEh5Kg==
+
+"@next/swc-win32-ia32-msvc@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.8.tgz#0f6c7f3e50fc1a4752aed5c862f53c86ce77e3b8"
+ integrity sha512-0RV3/julybJr1IlPCowIWrJJZyAl+sOakJEM15y1NOOsbwTQ5eKZZXSi+7e23TN4wmy5HwNvn2dKzgOEVJ+jbA==
+
+"@next/swc-win32-x64-msvc@12.0.8":
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.8.tgz#eae6d4c94dc8aae8ba177e2de02080339d0d4563"
+ integrity sha512-tTga6OFfO2JS+Yt5hdryng259c/tzNgSWkdiU2E+RBHiysAIOta57n4PJ8iPahOSqEqjaToPI76wM+o441GaNQ==
+
+"@popperjs/core@^2.6.0":
+ version "2.11.2"
+ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
+ integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
+
"@rollup/plugin-babel@^5.1.0":
version "5.2.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz#20fc8f8864dc0eaa1c5578408459606808f72924"
@@ -1936,6 +2038,11 @@ bcrypt-pbkdf@^1.0.0:
dependencies:
tweetnacl "^0.14.3"
+big.js@^5.2.2:
+ version "5.2.2"
+ resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+ integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2048,6 +2155,11 @@ caniuse-lite@^1.0.30001131:
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz"
integrity sha512-xJJqzyd+7GCJXkcoBiQ1GuxEiOBCLQ0aVW9HMekifZsAVGdj5eJ4mFB9fEhSHipq9IOk/QXFJUiIr9lZT+EsGw==
+caniuse-lite@^1.0.30001283:
+ version "1.0.30001300"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz#11ab6c57d3eb6f964cba950401fd00a146786468"
+ integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==
+
capture-exit@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -2211,6 +2323,11 @@ color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+colorette@^1.2.2:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
+ integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
+
colorette@^2.0.16:
version "2.0.16"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
@@ -2280,7 +2397,7 @@ contains-path@^0.1.0:
resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -2603,6 +2720,11 @@ emoji-regex@^9.2.2:
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+emojis-list@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+ integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
end-of-stream@^1.1.0:
version "1.4.4"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -3221,6 +3343,26 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
+framer-motion@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.0.0.tgz#08e44c42b67c967774a197b3994f8475cd486c32"
+ integrity sha512-wVI+hVRkvQeWSvkxk8z5bTg+jBs9vfEZOist2s0e9tQzZvt+OBuAoAcvCvl+ADmFd4ncC2934vkwiJPZ8nSvMg==
+ dependencies:
+ framesync "6.0.1"
+ hey-listen "^1.0.8"
+ popmotion "11.0.3"
+ style-value-types "5.0.0"
+ tslib "^2.1.0"
+ optionalDependencies:
+ "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+ integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+ dependencies:
+ tslib "^2.1.0"
+
fs-extra@8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3440,6 +3582,11 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"
+hey-listen@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+ integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
hosted-git-info@^2.1.4:
version "2.8.8"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -3551,7 +3698,7 @@ inflight@^1.0.4:
once "^1.3.0"
wrappy "1"
-inherits@2, inherits@^2.0.4:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -4383,6 +4530,15 @@ jest-watcher@^25.2.4, jest-watcher@^25.5.0:
jest-util "^25.5.0"
string-length "^3.1.0"
+jest-worker@27.0.0-next.5:
+ version "27.0.0-next.5"
+ resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28"
+ integrity sha512-mk0umAQ5lT+CaOJ+Qp01N6kz48sJG2kr2n1rX0koqKf6FIygQV0qLOdN9SCYID4IVeSigDOcPeGLozdMLYfb5g==
+ dependencies:
+ "@types/node" "*"
+ merge-stream "^2.0.0"
+ supports-color "^8.0.0"
+
jest-worker@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
@@ -4679,6 +4835,15 @@ load-json-file@^2.0.0:
pify "^2.0.0"
strip-bom "^3.0.0"
+loader-utils@1.2.3:
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+ integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+ dependencies:
+ big.js "^5.2.2"
+ emojis-list "^2.0.0"
+ json5 "^1.0.1"
+
locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -4943,6 +5108,11 @@ mute-stream@0.0.8:
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+nanoid@^3.1.23:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
+ integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
+
nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -4965,6 +5135,35 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+next@^12.0.8:
+ version "12.0.8"
+ resolved "https://registry.yarnpkg.com/next/-/next-12.0.8.tgz#29138f7cdd045e4bbba466af45bf430e769634b4"
+ integrity sha512-g5c1Kuh1F8tSXJn2rVvzYBzqe9EXaR6+rY3/KrQ7y0D9FueRLfHI35wM0DRadDcPSc3+vncspfhYH3jnYE/KjA==
+ dependencies:
+ "@next/env" "12.0.8"
+ "@next/react-refresh-utils" "12.0.8"
+ caniuse-lite "^1.0.30001283"
+ jest-worker "27.0.0-next.5"
+ node-fetch "2.6.1"
+ postcss "8.2.15"
+ react-is "17.0.2"
+ react-refresh "0.8.3"
+ stream-browserify "3.0.0"
+ styled-jsx "5.0.0-beta.6"
+ use-subscription "1.5.1"
+ optionalDependencies:
+ "@next/swc-android-arm64" "12.0.8"
+ "@next/swc-darwin-arm64" "12.0.8"
+ "@next/swc-darwin-x64" "12.0.8"
+ "@next/swc-linux-arm-gnueabihf" "12.0.8"
+ "@next/swc-linux-arm64-gnu" "12.0.8"
+ "@next/swc-linux-arm64-musl" "12.0.8"
+ "@next/swc-linux-x64-gnu" "12.0.8"
+ "@next/swc-linux-x64-musl" "12.0.8"
+ "@next/swc-win32-arm64-msvc" "12.0.8"
+ "@next/swc-win32-ia32-msvc" "12.0.8"
+ "@next/swc-win32-x64-msvc" "12.0.8"
+
nice-try@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -4978,6 +5177,11 @@ no-case@^3.0.3:
lower-case "^2.0.1"
tslib "^1.10.0"
+node-fetch@2.6.1:
+ version "2.6.1"
+ resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+ integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
node-int64@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -5414,11 +5618,30 @@ pn@^1.1.0:
resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
+popmotion@11.0.3:
+ version "11.0.3"
+ resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+ integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+ dependencies:
+ framesync "6.0.1"
+ hey-listen "^1.0.8"
+ style-value-types "5.0.0"
+ tslib "^2.1.0"
+
posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+postcss@8.2.15:
+ version "8.2.15"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
+ integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
+ dependencies:
+ colorette "^1.2.2"
+ nanoid "^3.1.23"
+ source-map "^0.6.1"
+
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5556,7 +5779,7 @@ randombytes@^2.1.0:
dependencies:
safe-buffer "^5.1.0"
-react-dom@^16.14.0:
+react-dom@16.14.0, react-dom@^16.14.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
@@ -5566,17 +5789,22 @@ react-dom@^16.14.0:
prop-types "^15.6.2"
scheduler "^0.19.1"
+react-is@17.0.2, react-is@^17.0.1:
+ version "17.0.2"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+ integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
react-is@^16.12.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-react-is@^17.0.1:
- version "17.0.2"
- resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
- integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+react-refresh@0.8.3:
+ version "0.8.3"
+ resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
+ integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
-react@^16.14.0:
+react@16.14.0, react@^16.14.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -5621,6 +5849,15 @@ read-pkg@^5.2.0:
parse-json "^5.0.0"
type-fest "^0.6.0"
+readable-stream@^3.5.0:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+ integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+ dependencies:
+ inherits "^2.0.3"
+ string_decoder "^1.1.1"
+ util-deprecate "^1.0.1"
+
realpath-native@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"
@@ -5938,7 +6175,7 @@ sade@^1.4.2:
dependencies:
mri "^1.1.0"
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
version "5.2.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -6219,6 +6456,11 @@ source-map-url@^0.4.0:
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
+source-map@0.7.3, source-map@^0.7.3:
+ version "0.7.3"
+ resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+ integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
source-map@^0.5.0, source-map@^0.5.6:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -6229,11 +6471,6 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-source-map@^0.7.3:
- version "0.7.3"
- resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
- integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
sourcemap-codec@^1.4.4:
version "1.4.8"
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -6317,11 +6554,24 @@ stealthy-require@^1.1.1:
resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+stream-browserify@3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"
+ integrity sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==
+ dependencies:
+ inherits "~2.0.4"
+ readable-stream "^3.5.0"
+
string-argv@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+string-hash@1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+ integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
+
string-length@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
@@ -6393,6 +6643,13 @@ string.prototype.trimstart@^1.0.1:
define-properties "^1.1.3"
es-abstract "^1.17.5"
+string_decoder@^1.1.1:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+ integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+ dependencies:
+ safe-buffer "~5.2.0"
+
strip-ansi@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
@@ -6453,6 +6710,38 @@ strip-json-comments@^3.0.1:
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+style-value-types@5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+ integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+ dependencies:
+ hey-listen "^1.0.8"
+ tslib "^2.1.0"
+
+styled-jsx@5.0.0-beta.6:
+ version "5.0.0-beta.6"
+ resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.6.tgz#666552f8831a06f80c9084a47afc4b32b0c9f461"
+ integrity sha512-b1cM7Xyp2r1lsNpvoZ6wmTI8qxD0557vH2feHakNU8LMkzfJDgTQMul6O7sSYY0GxQ73pKEN69hCDp71w6Q0nA==
+ dependencies:
+ "@babel/plugin-syntax-jsx" "7.14.5"
+ "@babel/types" "7.15.0"
+ convert-source-map "1.7.0"
+ loader-utils "1.2.3"
+ source-map "0.7.3"
+ string-hash "1.1.3"
+ stylis "3.5.4"
+ stylis-rule-sheet "0.0.10"
+
+stylis-rule-sheet@0.0.10:
+ version "0.0.10"
+ resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+ integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@3.5.4:
+ version "3.5.4"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+ integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
supports-color@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6474,6 +6763,13 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
+supports-color@^8.0.0:
+ version "8.1.1"
+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+ integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+ dependencies:
+ has-flag "^4.0.0"
+
supports-color@^9.2.1:
version "9.2.1"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891"
@@ -6863,11 +7159,23 @@ urix@^0.1.0:
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+use-subscription@1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
+ integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
+ dependencies:
+ object-assign "^4.1.1"
+
use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+util-deprecate@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+ integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
uuid@^3.3.2:
version "3.4.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+
+
+
+
+ )
+}
diff --git a/packages/playground-react/public/favicon.ico b/packages/playground-react/public/favicon.ico
new file mode 100644
index 0000000..e69de29
diff --git a/packages/playground-react/tsconfig.json b/packages/playground-react/tsconfig.json
new file mode 100644
index 0000000..6db37c0
--- /dev/null
+++ b/packages/playground-react/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/packages/playground-react/utils/class-names.ts b/packages/playground-react/utils/class-names.ts
new file mode 100644
index 0000000..159b03c
--- /dev/null
+++ b/packages/playground-react/utils/class-names.ts
@@ -0,0 +1,3 @@
+export function classNames(...classes: (false | null | undefined | string)[]): string {
+ return classes.filter(Boolean).join(' ')
+}
diff --git a/packages/playground-react/utils/hooks/use-popper.ts b/packages/playground-react/utils/hooks/use-popper.ts
new file mode 100644
index 0000000..4d10885
--- /dev/null
+++ b/packages/playground-react/utils/hooks/use-popper.ts
@@ -0,0 +1,37 @@
+import { RefCallback, useRef, useCallback, useMemo } from 'react'
+import { createPopper, Options } from '@popperjs/core'
+
+/**
+ * Example implementation to use Popper: https://popper.js.org/
+ */
+export function usePopper(
+ options?: Partial setMobileOpen(false)}
+ className="absolute inset-0 opacity-75 bg-cool-gray-600"
+ />
+
+ )}
+
+
+ {/* Off-canvas menu, show/hide based on off-canvas menu state. */}
+
+ setMobileOpen(false)}
+ >
+
+
+
+
+ 
+
+
+
+ {/* Dummy element to force sidebar to shrink to fit close icon */}
+
+
+
+ {/* Static sidebar for desktop */}
+
+
+
+ {/* Sidebar component, swap this element with another sidebar if you like */}
+
+
+
+
+
+
+
+
+
+ {/* Replace with your content */}
+
+ {/* /End replace */}
+
+
+
+
+ {/* Search bar */}
+
+
+
+
+
+
+