run prettier

Author: RobinMalfait

playgrounds/react/components/button.tsx

@@ -12,7 +12,7 @@ export let Button = forwardRef<
     ref={ref}
     type="button"
     className={classNames(
-      'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-hidden',
+      'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 focus:outline-hidden flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100',
       className
     )}
     {...props}

playgrounds/react/pages/combinations/form.tsx

@@ -46,7 +46,7 @@ export default function App() {
                   name="notifications"
                   className={({ checked }) =>
                     classNames(
-                      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                      'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                       checked ? 'bg-blue-600' : 'bg-gray-200'
                     )
                   }
@@ -72,7 +72,7 @@ export default function App() {
                   value="apple"
                   className={({ checked }) =>
                     classNames(
-                      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                      'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                       checked ? 'bg-blue-600' : 'bg-gray-200'
                     )
                   }
@@ -95,7 +95,7 @@ export default function App() {
                   value="banana"
                   className={({ checked }) =>
                     classNames(
-                      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                      'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                       checked ? 'bg-blue-600' : 'bg-gray-200'
                     )
                   }
@@ -122,7 +122,7 @@ export default function App() {
                       value={size}
                       className={({ active }) =>
                         classNames(
-                          'relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                          'focus:outline-hidden relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
                           active ? 'z-10 border-blue-200 bg-blue-50' : 'border-gray-200'
                         )
                       }
@@ -191,7 +191,7 @@ export default function App() {
                       </Listbox.Button>
 
                       <div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg">
-                        <Listbox.Options className="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5">
+                        <Listbox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
                           {people.map((person) => (
                             <Listbox.Option
                               key={person.id}
@@ -260,7 +260,7 @@ export default function App() {
                       <div className="flex w-full flex-col">
                         <Combobox.Input
                           onChange={(e) => setQuery(e.target.value)}
-                          className="w-full rounded-sm rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-xs focus:border-gray-300 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                          className="shadow-xs focus:outline-hidden w-full rounded-md rounded-sm border-gray-300 bg-clip-padding px-3 py-1 focus:border-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                           placeholder="Search users..."
                         />
                         <div
@@ -335,13 +335,13 @@ export default function App() {
         </div>
 
         <div className="space-x-4">
-          <button className="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-xs hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
+          <button className="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5">
             Submit
           </button>
 
           <button
             type="reset"
-            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 shadow-xs hover:text-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
+            className="shadow-xs focus:outline-hidden rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium leading-6 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:text-sm sm:leading-5"
           >
             Reset
           </button>

playgrounds/react/pages/combobox/combobox-countries.tsx

@@ -48,10 +48,10 @@ export default function Home() {
             </Combobox.Label>
 
             <div className="relative">
-              <span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-xs">
+              <span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
                 <Combobox.Input
                   onChange={(e) => setQuery(e.target.value)}
-                  className="border-none px-3 py-1 outline-hidden"
+                  className="outline-hidden border-none px-3 py-1"
                 />
                 <Combobox.Button as={Button}>
                   <span className="pointer-events-none flex items-center px-2">
@@ -75,15 +75,15 @@ export default function Home() {
               <Combobox.Options
                 transition
                 anchor="bottom start"
-                className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-1000 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] focus:outline-hidden data-closed:opacity-0 sm:text-sm sm:leading-5"
+                className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-1000 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
               >
                 {countries.map((country) => (
                   <Combobox.Option
                     key={country}
                     value={country}
                     className={({ active }) => {
                       return classNames(
-                        'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-hidden',
+                        'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
                         active ? 'bg-indigo-600 text-white' : 'text-gray-900'
                       )
                     }}

playgrounds/react/pages/combobox/combobox-open-on-focus.tsx

@@ -62,10 +62,10 @@ export default function Home() {
             </Combobox.Label>
 
             <div className="relative">
-              <span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-xs">
+              <span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
                 <Combobox.Input
                   onChange={(e) => setQuery(e.target.value)}
-                  className="border-none px-3 py-1 outline-hidden"
+                  className="outline-hidden border-none px-3 py-1"
                 />
                 <Combobox.Button as={Button}>
                   <span className="pointer-events-none flex items-center px-2">
@@ -87,14 +87,14 @@ export default function Home() {
               </span>
 
               <div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
-                <Combobox.Options className="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5">
+                <Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
                   {people.map((name) => (
                     <Combobox.Option
                       key={name}
                       value={name}
                       className={({ active }) => {
                         return classNames(
-                          'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-hidden',
+                          'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
                           active ? 'bg-indigo-600 text-white' : 'text-gray-900'
                         )
                       }}

playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx

@@ -83,11 +83,11 @@ export default function Home() {
         </Combobox.Label>
 
         <div className="relative">
-          <span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-xs">
+          <span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
             <Combobox.Input
               onChange={(e) => setQuery(e.target.value)}
               displayValue={(option: Option | null) => option?.name ?? ''}
-              className="border-none px-3 py-1 outline-hidden"
+              className="outline-hidden border-none px-3 py-1"
             />
             <Combobox.Button as={Button}>
               <span className="pointer-events-none flex items-center px-2">
@@ -116,7 +116,7 @@ export default function Home() {
               static={filtered.length === 0}
               ref={optionsRef}
               className={classNames(
-                'shadow-2xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5',
+                'shadow-2xs focus:outline-hidden max-h-60 rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5',
                 filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
               )}
             >
@@ -130,7 +130,7 @@ export default function Home() {
                         disabled
                         // Note: Do NOT use `null` for the `value`
                         value={option ?? emptyOption.current}
-                        className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-hidden"
+                        className="focus:outline-hidden relative w-full cursor-default select-none px-3 py-2 text-center"
                       >
                         <div className="relative grid h-full grid-cols-1 grid-rows-1">
                           <div className="absolute inset-0">
@@ -155,7 +155,7 @@ export default function Home() {
                             <button
                               id="add_person"
                               type="button"
-                              className="rounded-sm bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                              className="focus:outline-hidden rounded-sm bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                               onClick={() => {
                                 let person = { name: query, disabled: false }
                                 setList((list) => [...list, person])
@@ -177,7 +177,7 @@ export default function Home() {
                       value={option}
                       className={({ active }) => {
                         return classNames(
-                          'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-hidden',
+                          'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
                           active ? 'bg-indigo-600 text-white' : 'text-gray-900'
                         )
                       }}

playgrounds/react/pages/combobox/combobox-virtualized.tsx

@@ -80,10 +80,10 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
             </Combobox.Label>
 
             <div className="relative">
-              <span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-xs">
+              <span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
                 <Combobox.Input
                   onChange={(e) => setQuery(e.target.value)}
-                  className="border-none px-3 py-1 outline-hidden"
+                  className="outline-hidden border-none px-3 py-1"
                 />
                 <Combobox.Button as={Button}>
                   <span className="pointer-events-none flex items-center px-2">
@@ -108,15 +108,15 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
                 <Combobox.Options
                   transition
                   anchor="bottom start"
-                  className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] focus:outline-hidden data-closed:opacity-0 sm:text-sm sm:leading-5"
+                  className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
                 >
                   {({ option }) => {
                     return (
                       <Combobox.Option
                         value={option}
                         className={({ active }) => {
                           return classNames(
-                            'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-hidden',
+                            'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
                             active ? 'bg-indigo-600 text-white' : 'text-gray-900'
                           )
                         }}
@@ -157,7 +157,7 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
                 <Combobox.Options
                   transition
                   anchor="bottom start"
-                  className="w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] focus:outline-hidden data-closed:opacity-0 sm:text-sm sm:leading-5"
+                  className="focus:outline-hidden data-closed:opacity-0 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md bg-white py-1 text-base leading-6 shadow-lg transition duration-300 [--anchor-gap:--spacing(1)] [--anchor-max-height:--spacing(60)] sm:text-sm sm:leading-5"
                 >
                   {timezones.map((timezone, idx) => {
                     return (
@@ -167,7 +167,7 @@ function Example({ virtual = true, data, initial }: { virtual?: boolean; data; i
                         value={timezone}
                         className={({ active }) => {
                           return classNames(
-                            'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-hidden',
+                            'focus:outline-hidden relative w-full cursor-default select-none py-2 pl-3 pr-9',
                             active ? 'bg-indigo-600 text-white' : 'text-gray-900'
                           )
                         }}

playgrounds/react/pages/combobox/combobox-with-pure-tailwind.tsx

@@ -60,10 +60,10 @@ export default function Home() {
             </Combobox.Label>
 
             <div className="relative">
-              <span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-xs">
+              <span className="shadow-xs relative inline-flex flex-row overflow-hidden rounded-md border">
                 <Combobox.Input
                   onChange={(e) => setQuery(e.target.value)}
-                  className="border-none px-3 py-1 outline-hidden"
+                  className="outline-hidden border-none px-3 py-1"
                 />
                 <Combobox.Button as={Button}>
                   <span className="pointer-events-none flex items-center px-2">
@@ -85,14 +85,14 @@ export default function Home() {
               </span>
 
               <div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
-                <Combobox.Options className="shadow-2xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-hidden sm:text-sm sm:leading-5">
+                <Combobox.Options className="shadow-2xs focus:outline-hidden max-h-60 overflow-auto rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5">
                   {people.map((name) => (
                     <Combobox.Option
                       key={name}
                       value={name}
                       className={({ active }) => {
                         return classNames(
-                          'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-hidden',
+                          'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9',
                           active ? 'bg-indigo-600 text-white' : 'text-gray-900'
                         )
                       }}