main 🧊 update demos and sidebars

Author: debabin

packages/core/src/hooks/useAudio/useAudio.demo.tsx

@@ -97,7 +97,7 @@ const Demo = () => {
     <section className='flex flex-col items-center gap-5 p-4'>
       <svg className='w-64' viewBox={`0 0 ${BOARD_SIZE} ${BOARD_SIZE}`}>
         {[CELL_SIZE, CELL_SIZE * 2].map((position) => (
-          <g key={position} className='text-border'>
+          <g key={position} className='text-muted-foreground'>
             <line
               stroke='currentColor'
               strokeLinecap='round'
@@ -189,7 +189,7 @@ const Demo = () => {
         ))}
       </svg>
 
-      <div className='flex items-center gap-3 text-sm'>
+      <div className='flex min-h-9 items-center gap-3 text-sm'>
         {!result && (
           <p className='text-muted-foreground flex items-center gap-1.5'>
             <PlayerIcon player={current} /> to move

packages/core/src/hooks/useBrowserLocation/useBrowserLocation.demo.tsx

@@ -69,32 +69,33 @@ const Demo = () => {
               const isSelected = selectedMethod === method.id;
 
               return (
-                <div
+                <label
                   key={method.id}
-                  className='hover:bg-muted/50 data-[selected=true]:border-primary data-[selected=true]:bg-muted/50 flex cursor-pointer items-center gap-3 rounded-xl border p-4 text-left transition-colors'
-                  data-selected={isSelected}
-                  role='button'
-                  tabIndex={0}
-                  onClick={() => onPaymentMethodChange(method.id)}
+                  className='border-border hover:bg-muted/50 has-[:checked]:border-foreground/30 has-[:checked]:bg-muted/50 relative flex cursor-pointer items-center gap-3 rounded-xl border p-4 text-left transition-colors'
                 >
-                  <div className='flex size-10 items-center justify-center rounded-full border'>
+                  <input
+                    checked={isSelected}
+                    className='absolute! top-4 right-4'
+                    name='method'
+                    type='radio'
+                    onChange={() => onPaymentMethodChange(method.id)}
+                  />
+
+                  <div className='bg-card flex size-10 items-center justify-center rounded-full border'>
                     <Icon className='size-4' />
                   </div>
 
                   <span className='flex flex-1 flex-col gap-1'>
                     <span className='text-sm'>{method.title}</span>
                     <span className='text-muted-foreground text-xs'>{method.description}</span>
                   </span>
-
-                  {isSelected && <CheckIcon className='size-4' />}
-                </div>
+                </label>
               );
             })}
           </div>
 
           <div className='relative'>
             <AtSignIcon className='pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 opacity-50' />
-
             <input
               className='pl-8!'
               placeholder='you@example.com'

packages/core/src/hooks/useDropZone/useDropZone.demo.tsx

@@ -119,7 +119,7 @@ const Demo = () => {
               <div className='flex min-w-0 flex-1 flex-col leading-tight'>
                 <span className='truncate text-xs font-medium text-white'>{file.name}</span>
                 <span className='text-[10px] text-white/70 tabular-nums'>
-                  {formatSize(file.size)} · {file.type.replace('image/', '').toUpperCase()}
+                  {formatSize(file.size)} - {file.type.replace('image/', '').toUpperCase()}
                 </span>
               </div>
             </div>
@@ -128,12 +128,12 @@ const Demo = () => {
           <button
             aria-label='Remove'
             className='absolute top-2 right-2'
-            data-size='icon-sm'
+            data-size='icon'
             data-variant='secondary'
             type='button'
             onClick={onRemove}
           >
-            <XIcon className='size-3.5' />
+            <XIcon className='size-4' />
           </button>
         </div>
       )}

packages/core/src/hooks/useFavicon/useFavicon.demo.tsx

@@ -50,17 +50,6 @@ const Demo = () => {
           );
         })}
       </div>
-
-      <div className='border-border bg-muted/30 flex items-center gap-2 rounded-lg border px-3 py-2'>
-        <img
-          alt='Current favicon'
-          className='size-4 shrink-0 object-contain'
-          src={favicon.href ?? FAVICONS[0].url}
-        />
-        <span className='text-muted-foreground truncate font-mono text-[10px]'>
-          {favicon.href ?? 'default'}
-        </span>
-      </div>
     </section>
   );
 };

packages/core/src/hooks/useFocusTrap/useFocusTrap.demo.tsx

@@ -1,7 +1,7 @@
 import type { SubmitEvent } from 'react';
 
 import { useField, useFocusTrap } from '@siberiacancode/reactuse';
-import { ChevronDownIcon, MailIcon, XIcon } from 'lucide-react';
+import { AtSignIcon, ChevronDownIcon, XIcon } from 'lucide-react';
 
 const ROLES = [
   { value: 'viewer', label: 'Viewer' },
@@ -51,7 +51,7 @@ const Demo = () => {
               Email
             </label>
             <div className='relative'>
-              <MailIcon className='text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 size-3.5 -translate-y-1/2' />
+              <AtSignIcon className='text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2' />
               <input
                 data-autofocus
                 className='pl-9!'

packages/core/src/hooks/useKeyPress/useKeyPress.demo.tsx

@@ -1,5 +1,5 @@
 import { useAsync, useKeyPress } from '@siberiacancode/reactuse';
-import { ChevronLeftIcon, ChevronRightIcon, Loader2Icon } from 'lucide-react';
+import { HeartIcon, Loader2Icon, XIcon } from 'lucide-react';
 import { useState } from 'react';
 
 interface Pokemon {
@@ -27,7 +27,6 @@ const fetchPokemon = async (id: number) => {
 
 const Demo = () => {
   const [id, setId] = useState(randomId);
-
   const pokemonAsync = useAsync(() => fetchPokemon(id), [id]);
 
   const onNext = () => setId(randomId());
@@ -43,8 +42,8 @@ const Demo = () => {
   const loading = !pokemonAsync.data;
 
   return (
-    <section className='flex w-full max-w-xs flex-col items-center gap-3 p-4'>
-      <div className='border-border bg-card relative h-[370px] w-full overflow-hidden rounded-2xl border shadow-lg'>
+    <section className='flex w-full max-w-[280px] flex-col items-center gap-3 p-4'>
+      <div className='border-border bg-card relative aspect-[3/4] w-full overflow-hidden rounded-2xl border shadow-lg'>
         <div className='absolute inset-0 flex items-center justify-center'>
           {loading && <Loader2Icon className='text-muted-foreground size-8 animate-spin' />}
           {!loading && pokemonAsync.data && (
@@ -88,32 +87,30 @@ const Demo = () => {
                 ))}
               </div>
             </div>
+
+            <button
+              aria-label='Pass'
+              className='absolute bottom-4 left-4 flex size-11 items-center justify-center rounded-full bg-white text-neutral-900 shadow-lg transition-transform hover:scale-110'
+              data-variant='unstyled'
+              type='button'
+              onClick={onNext}
+            >
+              <XIcon className='size-5' strokeWidth={2.5} />
+            </button>
+
+            <button
+              aria-label='Like'
+              className='text-destructive absolute right-4 bottom-4 flex size-11 items-center justify-center rounded-full bg-white shadow-lg transition-transform hover:scale-110'
+              data-variant='unstyled'
+              type='button'
+              onClick={onNext}
+            >
+              <HeartIcon className='size-5' fill='currentColor' />
+            </button>
           </>
         )}
       </div>
 
-      <div className='flex w-full items-stretch gap-2'>
-        <button
-          aria-label='Pass'
-          className='flex-1'
-          data-variant='secondary'
-          type='button'
-          onClick={onNext}
-        >
-          <ChevronLeftIcon className='size-5' />
-        </button>
-
-        <button
-          aria-label='Like'
-          className='flex-1'
-          data-variant='secondary'
-          type='button'
-          onClick={onNext}
-        >
-          <ChevronRightIcon className='size-5' />
-        </button>
-      </div>
-
       <span className='text-muted-foreground text-[10px]'>Use ← → keys to swipe</span>
     </section>
   );

packages/core/src/hooks/useLogger/useLogger.demo.tsx

@@ -49,8 +49,8 @@ const Demo = () => {
 
   return (
     <section className='flex w-full max-w-md flex-col gap-3 p-4'>
-      <div className='border-border bg-card flex h-[220px] flex-col rounded-lg border shadow-sm'>
-        <div className='border-border flex items-center justify-between border-b px-3 py-2'>
+      <div className='bg-muted/20 flex h-[220px] flex-col rounded-lg'>
+        <div className='flex items-center justify-between px-1 py-2'>
           <span className='text-foreground text-[10px] font-semibold tracking-wider uppercase'>
             Console
           </span>
@@ -70,7 +70,7 @@ const Demo = () => {
           </div>
         </div>
 
-        <div ref={scrollRef} className='no-scrollbar flex-1 overflow-y-auto px-3 py-2'>
+        <div ref={scrollRef} className='no-scrollbar flex-1 overflow-y-auto px-1 py-2'>
           {logs.map((entry) => (
             <div
               key={entry.id}