style(ui): use named imports to satisfy import-x lint rules

- Replace default clsx import with named import
- Use named React imports instead of React.* member access
- Fix @/types import mixing value and type-only specifiers
- Apply import ordering from the flat ESLint config

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

ui/app/(prowler)/scans/page.tsx

@@ -3,13 +3,13 @@ import { Suspense } from "react";
 import { getAllProviders } from "@/actions/providers";
 import { getScans } from "@/actions/scans";
 import { auth } from "@/auth.config";
+import { ScansPageShell } from "@/components/scans/scans-page-shell";
+import { ScansProvidersEmptyState } from "@/components/scans/scans-providers-empty-state";
 import {
   getScanJobsTab,
   getScanJobsTabFilters,
   getScanJobsUserFilters,
 } from "@/components/scans/scans.utils";
-import { ScansPageShell } from "@/components/scans/scans-page-shell";
-import { ScansProvidersEmptyState } from "@/components/scans/scans-providers-empty-state";
 import { SkeletonTableScans } from "@/components/scans/table";
 import { ScanJobsTable } from "@/components/scans/table/scan-jobs-table";
 import { ContentLayout } from "@/components/ui";

ui/components/ThemeSwitch.tsx

@@ -4,9 +4,9 @@ import type { SwitchProps } from "@heroui/switch";
 import { useSwitch } from "@heroui/switch";
 import { useIsSSR } from "@react-aria/ssr";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { useTheme } from "next-themes";
-import React, { FC } from "react";
+import { FC } from "react";
 
 import {
   Tooltip,

ui/components/invitations/workflow/vertical-steps.tsx

@@ -3,17 +3,16 @@
 import { cn } from "@heroui/theme";
 import { useControlledState } from "@react-stately/utils";
 import { domAnimation, LazyMotion, m } from "framer-motion";
-import type { ComponentProps } from "react";
-import React from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { forwardRef, useMemo } from "react";
 
 export type VerticalStepProps = {
   className?: string;
-  description?: React.ReactNode;
-  title?: React.ReactNode;
+  description?: ReactNode;
+  title?: ReactNode;
 };
 
-export interface VerticalStepsProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
+export interface VerticalStepsProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * An array of steps.
    *
@@ -88,10 +87,7 @@ function CheckIcon(props: ComponentProps<"svg">) {
   );
 }
 
-export const VerticalSteps = React.forwardRef<
-  HTMLButtonElement,
-  VerticalStepsProps
->(
+export const VerticalSteps = forwardRef<HTMLButtonElement, VerticalStepsProps>(
   (
     {
       color = "primary",
@@ -112,7 +108,7 @@ export const VerticalSteps = React.forwardRef<
       onStepChange,
     );
 
-    const colors = React.useMemo(() => {
+    const colors = useMemo(() => {
       let userColor;
       let fgColor;
 

ui/components/roles/workflow/forms/add-role-form.tsx

@@ -4,7 +4,7 @@ import { Checkbox } from "@heroui/checkbox";
 import { Divider } from "@heroui/divider";
 import { Tooltip } from "@heroui/tooltip";
 import { zodResolver } from "@hookform/resolvers/zod";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { InfoIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";

ui/components/roles/workflow/vertical-steps.tsx

@@ -3,17 +3,16 @@
 import { cn } from "@heroui/theme";
 import { useControlledState } from "@react-stately/utils";
 import { domAnimation, LazyMotion, m } from "framer-motion";
-import type { ComponentProps } from "react";
-import React from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { forwardRef, useMemo } from "react";
 
 export type VerticalStepProps = {
   className?: string;
-  description?: React.ReactNode;
-  title?: React.ReactNode;
+  description?: ReactNode;
+  title?: ReactNode;
 };
 
-export interface VerticalStepsProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
+export interface VerticalStepsProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * An array of steps.
    *
@@ -88,10 +87,7 @@ function CheckIcon(props: ComponentProps<"svg">) {
   );
 }
 
-export const VerticalSteps = React.forwardRef<
-  HTMLButtonElement,
-  VerticalStepsProps
->(
+export const VerticalSteps = forwardRef<HTMLButtonElement, VerticalStepsProps>(
   (
     {
       color = "primary",
@@ -112,7 +108,7 @@ export const VerticalSteps = React.forwardRef<
       onStepChange,
     );
 
-    const colors = React.useMemo(() => {
+    const colors = useMemo(() => {
       let userColor;
       let fgColor;
 

ui/components/scans/table/scan-jobs-columns.test.tsx

@@ -2,7 +2,7 @@ import type { CellContext, HeaderContext } from "@tanstack/react-table";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
-import type { ScanProps } from "@/types";
+import { type ScanProps, SCAN_JOBS_TAB, type ScanJobsTab } from "@/types";
 
 vi.mock("@/components/shadcn", () => ({
   Badge: ({ children }: { children: React.ReactNode }) => (
@@ -51,8 +51,6 @@ vi.mock("./scan-jobs-row-actions", () => ({
   ScanJobsRowActions: () => <button type="button" />,
 }));
 
-import { SCAN_JOBS_TAB, type ScanJobsTab } from "@/types";
-
 import { getScanJobsColumns } from "./scan-jobs-columns";
 
 const getColumnIds = (tab: ScanJobsTab) =>

ui/components/scans/table/scan-jobs-columns.tsx

@@ -8,6 +8,7 @@ import { StatusBadge } from "@/components/ui/table/status-badge";
 import { SCAN_JOBS_TAB, type ScanJobsTab, type ScanProps } from "@/types";
 
 import { formatScanDuration } from "../scans.utils";
+
 import {
   AccountCell,
   ProgressCell,

ui/components/scans/table/scan-jobs-table.tsx

@@ -5,6 +5,7 @@ import type { MetaDataProps, ScanJobsTab, ScanProps } from "@/types";
 
 import { AutoRefresh } from "../auto-refresh";
 import { NoScansEmptyState } from "../no-scans-empty-state";
+
 import { getScanJobsColumns } from "./scan-jobs-columns";
 
 interface ScanJobsTableProps {

ui/components/ui/accordion/Accordion.tsx

@@ -3,7 +3,7 @@
 import { Accordion as NextUIAccordion, AccordionItem } from "@heroui/accordion";
 import type { Selection } from "@react-types/shared";
 import { ChevronDown } from "lucide-react";
-import React, { ReactNode, useCallback, useMemo, useState } from "react";
+import { Children, ReactNode, useCallback, useMemo, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -42,7 +42,7 @@ const AccordionContent = ({
 }) => {
   // Normalize possible array content to automatically assign stable keys
   const normalizedContent = Array.isArray(content)
-    ? React.Children.toArray(content)
+    ? Children.toArray(content)
     : content;
 
   return (

ui/components/ui/action-card/ActionCard.tsx

@@ -3,7 +3,7 @@
 import type { CardProps } from "@heroui/card";
 import { Card, CardBody } from "@heroui/card";
 import { Icon } from "@iconify/react";
-import React from "react";
+import { forwardRef, useMemo } from "react";
 
 import { cn } from "@/lib";
 
@@ -14,9 +14,9 @@ export type ActionCardProps = CardProps & {
   description: string;
 };
 
-export const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
+export const ActionCard = forwardRef<HTMLDivElement, ActionCardProps>(
   ({ color, title, icon, description, children, className, ...props }, ref) => {
-    const colors = React.useMemo(() => {
+    const colors = useMemo(() => {
       switch (color) {
         case "success":
           return {

ui/components/ui/sidebar/sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Link from "next/link";
 
 import { ProwlerShort, ProwlerExtended } from "@/components/icons";