main 🧊 add new demos

Author: debabin

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

@@ -1,3 +1,5 @@
+import type { SubmitEvent } from 'react';
+
 import { useList } from '@siberiacancode/reactuse';
 import { CheckIcon, XIcon } from 'lucide-react';
 import { useState } from 'react';
@@ -19,7 +21,8 @@ const Demo = () => {
 
   const [value, setValue] = useState('');
 
-  const onAdd = () => {
+  const onSubmit = (event: SubmitEvent<HTMLFormElement>) => {
+    event.preventDefault();
     const text = value.trim();
     if (!text) return;
     todos.push({ id: crypto.randomUUID(), text, done: false });
@@ -36,26 +39,25 @@ const Demo = () => {
     <section className='flex w-full max-w-sm flex-col gap-3 p-4'>
       <h2 className='text-foreground text-sm font-semibold'>Today's tasks</h2>
 
-      <div className='flex items-center gap-2'>
-        <input
-          className='border-border bg-card text-foreground placeholder:text-muted-foreground flex-1 rounded-md border px-3 py-2 text-sm outline-none'
-          placeholder='What needs to be done?'
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') onAdd();
-          }}
-        />
-        <button disabled={!value.trim()} type='button' onClick={onAdd}>
-          Add
-        </button>
-      </div>
+      <form onSubmit={onSubmit}>
+        <div className='flex items-center gap-2'>
+          <input
+            className='border-border bg-card text-foreground placeholder:text-muted-foreground flex-1 rounded-md border px-3 py-2 text-sm outline-none'
+            placeholder='What needs to be done?'
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+          />
+          <button disabled={!value.trim()} type='submit'>
+            Add
+          </button>
+        </div>
+      </form>
 
       <div className='flex flex-col'>
         {todos.value.map((todo, index) => (
           <div
             key={todo.id}
-            className='group hover:bg-muted/40 -mx-2 flex items-center gap-3 rounded-md px-2 py-2 transition-colors'
+            className='group hover:bg-muted/40 -mx-2 flex items-center gap-3 rounded-md px-1 py-2 transition-colors'
           >
             <label className='flex shrink-0 cursor-pointer items-center'>
               <input
@@ -84,7 +86,7 @@ const Demo = () => {
 
             <button
               aria-label='Remove'
-              className='rounded-full! opacity-0 transition-opacity group-hover:opacity-100'
+              className='opacity-0 transition-opacity group-hover:opacity-100'
               data-size='icon'
               data-variant='ghost'
               type='button'
@@ -97,9 +99,8 @@ const Demo = () => {
       </div>
 
       <span className='text-muted-foreground px-1 text-[10px]'>
-        {remaining === 0
-          ? 'All done — nice work ✨'
-          : `${remaining} ${remaining === 1 ? 'task' : 'tasks'} left`}
+        {!remaining && 'All done — nice work ✨'}
+        {remaining && `${remaining} ${remaining === 1 ? 'task' : 'tasks'} left`}
       </span>
     </section>
   );

packages/newdocs/content/functions/hooks/useList.meta.json

@@ -1,5 +1,7 @@
 'use client'
 
+import type { SubmitEvent } from 'react';
+
 import { useList } from '@siberiacancode/reactuse';
 import { CheckIcon, XIcon } from 'lucide-react';
 import { useState } from 'react';
@@ -21,7 +23,8 @@ const Demo = () => {
 
   const [value, setValue] = useState('');
 
-  const onAdd = () => {
+  const onSubmit = (event: SubmitEvent<HTMLFormElement>) => {
+    event.preventDefault();
     const text = value.trim();
     if (!text) return;
     todos.push({ id: crypto.randomUUID(), text, done: false });
@@ -38,26 +41,25 @@ const Demo = () => {
     <section className='flex w-full max-w-sm flex-col gap-3 p-4'>
       <h2 className='text-foreground text-sm font-semibold'>Today's tasks</h2>
 
-      <div className='flex items-center gap-2'>
-        <input
-          className='border-border bg-card text-foreground placeholder:text-muted-foreground flex-1 rounded-md border px-3 py-2 text-sm outline-none'
-          placeholder='What needs to be done?'
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') onAdd();
-          }}
-        />
-        <button disabled={!value.trim()} type='button' onClick={onAdd}>
-          Add
-        </button>
-      </div>
+      <form onSubmit={onSubmit}>
+        <div className='flex items-center gap-2'>
+          <input
+            className='border-border bg-card text-foreground placeholder:text-muted-foreground flex-1 rounded-md border px-3 py-2 text-sm outline-none'
+            placeholder='What needs to be done?'
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+          />
+          <button disabled={!value.trim()} type='submit'>
+            Add
+          </button>
+        </div>
+      </form>
 
       <div className='flex flex-col'>
         {todos.value.map((todo, index) => (
           <div
             key={todo.id}
-            className='group hover:bg-muted/40 -mx-2 flex items-center gap-3 rounded-md px-2 py-2 transition-colors'
+            className='group hover:bg-muted/40 -mx-2 flex items-center gap-3 rounded-md px-1 py-2 transition-colors'
           >
             <label className='flex shrink-0 cursor-pointer items-center'>
               <input
@@ -86,7 +88,7 @@ const Demo = () => {
 
             <button
               aria-label='Remove'
-              className='rounded-full! opacity-0 transition-opacity group-hover:opacity-100'
+              className='opacity-0 transition-opacity group-hover:opacity-100'
               data-size='icon'
               data-variant='ghost'
               type='button'
@@ -99,9 +101,8 @@ const Demo = () => {
       </div>
 
       <span className='text-muted-foreground px-1 text-[10px]'>
-        {remaining === 0
-          ? 'All done — nice work ✨'
-          : `${remaining} ${remaining === 1 ? 'task' : 'tasks'} left`}
+        {!remaining && 'All done — nice work ✨'}
+        {remaining && `${remaining} ${remaining === 1 ? 'task' : 'tasks'} left`}
       </span>
     </section>
   );

packages/newdocs/generated/demos/hooks/useList.demo.tsx

@@ -518,7 +518,7 @@
   @apply text-sm font-semibold tracking-tight;
 }
 
-.demo-ui input {
+.demo-ui input:not([type='checkbox']):not([type='radio']):not([type='range']) {
   @apply border-input h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none;
   @apply file:text-foreground file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium;
   @apply placeholder:text-muted-foreground;
@@ -540,7 +540,7 @@
 .demo-ui button {
   @apply inline-flex shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none;
   @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
-  @apply active:not-aria-[haspopup]:translate-y-px;
+  @apply active:not-aria-[haspopup]:[translate:0_1px];
   @apply disabled:pointer-events-none disabled:opacity-50;
   @apply aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 aria-invalid:ring-3;
 }