feat(web): собрать экраны из блоков ReUI PRO

Подключить stats-12, card-12, settings-3 и empty-state-12 к оболочке, спискам, карточкам и настройкам, чтобы метрики и пустые состояния шли из одних блоков.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/ui/src/components/button-group.tsx

@@ -1,8 +1,8 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
+
 import { Separator } from "@cfdm/ui/components/separator"
 
 const buttonGroupVariants = cva(

packages/ui/src/components/button.tsx

@@ -1,6 +1,5 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
 
 const buttonVariants = cva(

packages/ui/src/components/dropdown-menu.tsx

@@ -1,6 +1,7 @@
+"use client"
+
 import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
-
 import { cn } from "@cfdm/ui/lib/utils"
 import { ChevronRightIcon, CheckIcon } from "lucide-react"
 

packages/ui/src/components/empty.tsx

@@ -1,5 +1,4 @@
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {

packages/ui/src/components/field.tsx

@@ -1,9 +1,7 @@
-"use client"
-
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
+
 import { Label } from "@cfdm/ui/components/label"
 import { Separator } from "@cfdm/ui/components/separator"
 
@@ -106,7 +104,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}

packages/ui/src/components/input-group.tsx

@@ -1,7 +1,9 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
+
 import { Button } from "@cfdm/ui/components/button"
 import { Input } from "@cfdm/ui/components/input"
 import { Textarea } from "@cfdm/ui/components/textarea"

packages/ui/src/components/input.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import { Input as InputPrimitive } from "@base-ui/react/input"
-
 import { cn } from "@cfdm/ui/lib/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {

packages/ui/src/components/item.tsx

@@ -2,8 +2,8 @@ import * as React from "react"
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
+
 import { Separator } from "@cfdm/ui/components/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {

packages/ui/src/components/label.tsx

@@ -1,5 +1,6 @@
-import * as React from "react"
+"use client"
 
+import * as React from "react"
 import { cn } from "@cfdm/ui/lib/utils"
 
 function Label({ className, ...props }: React.ComponentProps<"label">) {

packages/ui/src/components/select.tsx

@@ -1,8 +1,5 @@
-"use client"
-
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
-
 import { cn } from "@cfdm/ui/lib/utils"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 

packages/ui/src/components/separator.tsx

@@ -1,5 +1,4 @@
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
-
 import { cn } from "@cfdm/ui/lib/utils"
 
 function Separator({

packages/ui/src/components/switch.tsx

@@ -1,5 +1,6 @@
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+"use client"
 
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
 import { cn } from "@cfdm/ui/lib/utils"
 
 function Switch({
@@ -14,7 +15,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}

packages/ui/src/components/textarea.tsx

@@ -1,5 +1,4 @@
 import * as React from "react"
-
 import { cn } from "@cfdm/ui/lib/utils"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {

packages/ui/src/components/toggle-group.tsx

@@ -1,11 +1,9 @@
-"use client"
-
 import * as React from "react"
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
 import { type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
+
 import { toggleVariants } from "@cfdm/ui/components/toggle"
 
 const ToggleGroupContext = React.createContext<

packages/ui/src/components/toggle.tsx

@@ -1,6 +1,5 @@
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@cfdm/ui/lib/utils"
 
 const toggleVariants = cva(