main 🧊 add new demo

Author: debabin

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

@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import { useActiveElement } from '@siberiacancode/reactuse';
 import { AtSignIcon } from 'lucide-react';

packages/newdocs/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/newdocs/styles/global.css

@@ -518,6 +518,16 @@
   @apply text-sm font-semibold tracking-tight;
 }
 
+.demo-ui input {
+  @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;
+  @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+  @apply disabled:bg-input/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
+  @apply aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3;
+  @apply dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 md:text-sm;
+}
+
 .demo-ui textarea {
   @apply border-input flex min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none;
   @apply placeholder:text-muted-foreground;
@@ -574,11 +584,6 @@
   @apply flex-1 text-sm outline-none;
 }
 
-.demo-ui label {
-  @apply flex items-center gap-2 text-sm leading-none font-medium select-none;
-  @apply has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50;
-}
-
 .demo-ui input[type='checkbox'][role='switch'] {
   position: relative;
   display: inline-block;