chore: shadcn/ui component updates (batch)

client/components/ui/Skeleton.jsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-const Skeleton = React.forwardRef(({ className, variant = 'line', ...props }, ref) => {
+function Skeleton({ className, variant = 'line', ref, ...props }) {
   const variants = {
     line: 'h-4 w-full rounded-md',
     circle: 'h-10 w-10 rounded-full',
@@ -21,7 +20,6 @@ const Skeleton = React.forwardRef(({ className, variant = 'line', ...props }, re
       {...props}
     />
   );
-});
+}
-Skeleton.displayName = 'Skeleton';
 
 export { Skeleton };

client/components/ui/badge.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 

client/components/ui/button.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
@@ -29,7 +28,7 @@ const buttonVariants = cva(
   }
 );
 
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+function Button({ className, variant, size, asChild = false, ref, ...props }) {
   const Comp = asChild ? Slot : 'button';
   return (
     <Comp
@@ -38,7 +37,6 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, ..
       {...props}
     />
   );
-});
+}
-Button.displayName = 'Button';
 
 export { Button, buttonVariants };

client/components/ui/card.jsx

@@ -1,58 +1,63 @@
-import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-const Card = React.forwardRef(({ className, ...props }, ref) => (
+function Card({ className, ref, ...props }) {
+  return (
     <div
       ref={ref}
       className={cn('rounded-2xl border border-border/80 bg-card/95 text-card-foreground shadow-sm shadow-black/10 transition-shadow hover:shadow-md hover:shadow-black/10', className)}
       {...props}
     />
-));
+  );
-Card.displayName = 'Card';
+}
 
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+function CardHeader({ className, ref, ...props }) {
+  return (
     <div
       ref={ref}
       className={cn('flex flex-col space-y-1.5 p-6', className)}
       {...props}
     />
-));
+  );
-CardHeader.displayName = 'CardHeader';
+}
 
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+function CardTitle({ className, ref, ...props }) {
+  return (
     <div
       ref={ref}
       className={cn('font-semibold leading-tight text-foreground', className)}
       {...props}
     />
-));
+  );
-CardTitle.displayName = 'CardTitle';
+}
 
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+function CardDescription({ className, ref, ...props }) {
+  return (
     <div
       ref={ref}
       className={cn('text-sm font-medium leading-relaxed text-muted-foreground', className)}
       {...props}
     />
-));
+  );
-CardDescription.displayName = 'CardDescription';
+}
 
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+function CardContent({ className, ref, ...props }) {
+  return (
     <div
       ref={ref}
       className={cn('p-6 pt-0', className)}
       {...props}
     />
-));
+  );
-CardContent.displayName = 'CardContent';
+}
 
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+function CardFooter({ className, ref, ...props }) {
+  return (
     <div
       ref={ref}
       className={cn('flex items-center p-6 pt-0', className)}
       {...props}
     />
-));
+  );
-CardFooter.displayName = 'CardFooter';
+}
 
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

client/components/ui/checkbox.jsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+function Checkbox({ className, ref, ...props }) {
+  return (
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
@@ -18,7 +18,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
         <Check className="h-4 w-4" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-));
+  );
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+}
 
 export { Checkbox };

client/components/ui/collapsible.jsx

@@ -1,17 +1,16 @@
-import * as React from 'react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
 const Collapsible = CollapsiblePrimitive.Root;
-
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = React.forwardRef(({ className, ...props }, ref) => (
+function CollapsibleContent({ ref, ...props }) {
+  return (
     <CollapsiblePrimitive.Content
       ref={ref}
       className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
       {...props}
     />
-));
+  );
-CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;
+}
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

client/components/ui/dialog.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -8,7 +7,8 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+function DialogOverlay({ className, ref, ...props }) {
+  return (
     <DialogPrimitive.Overlay
       ref={ref}
       className={cn(
@@ -17,10 +17,11 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+}
 
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+function DialogContent({ className, children, ref, ...props }) {
+  return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
@@ -40,42 +41,46 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
-));
+  );
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+}
 
-const DialogHeader = ({ className, ...props }) => (
+function DialogHeader({ className, ...props }) {
+  return (
     <div
       className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
       {...props}
     />
   );
-DialogHeader.displayName = 'DialogHeader';
+}
 
-const DialogFooter = ({ className, ...props }) => (
+function DialogFooter({ className, ...props }) {
+  return (
     <div
       className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
       {...props}
     />
   );
-DialogFooter.displayName = 'DialogFooter';
+}
 
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+function DialogTitle({ className, ref, ...props }) {
+  return (
     <DialogPrimitive.Title
       ref={ref}
       className={cn('text-lg font-semibold leading-none tracking-tight', className)}
       {...props}
     />
-));
+  );
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+}
 
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+function DialogDescription({ className, ref, ...props }) {
+  return (
     <DialogPrimitive.Description
       ref={ref}
       className={cn('text-sm text-muted-foreground', className)}
       {...props}
     />
-));
+  );
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+}
 
 export {
   Dialog,

client/components/ui/input.jsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+function Input({ className, type, ref, ...props }) {
   return (
     <input
       type={type}
@@ -13,7 +12,6 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
       {...props}
     />
   );
-});
+}
-Input.displayName = 'Input';
 
 export { Input };

client/components/ui/label.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
@@ -7,13 +6,14 @@ const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 );
 
-const Label = React.forwardRef(({ className, ...props }, ref) => (
+function Label({ className, ref, ...props }) {
+  return (
     <LabelPrimitive.Root
       ref={ref}
       className={cn(labelVariants(), className)}
       {...props}
     />
-));
+  );
-Label.displayName = LabelPrimitive.Root.displayName;
+}
 
 export { Label };

client/components/ui/select.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -7,7 +6,8 @@ const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+function SelectTrigger({ className, children, ref, ...props }) {
+  return (
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -23,10 +23,11 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
         <ChevronDown className="h-4 w-4 text-muted-foreground" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-));
+  );
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+}
 
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+function SelectScrollUpButton({ className, ref, ...props }) {
+  return (
     <SelectPrimitive.ScrollUpButton
       ref={ref}
       className={cn('flex cursor-default items-center justify-center py-1', className)}
@@ -34,10 +35,11 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
     >
       <ChevronUp className="h-4 w-4" />
     </SelectPrimitive.ScrollUpButton>
-));
+  );
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+}
 
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+function SelectScrollDownButton({ className, ref, ...props }) {
+  return (
     <SelectPrimitive.ScrollDownButton
       ref={ref}
       className={cn('flex cursor-default items-center justify-center py-1', className)}
@@ -45,10 +47,11 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
     >
       <ChevronDown className="h-4 w-4" />
     </SelectPrimitive.ScrollDownButton>
-));
+  );
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+}
 
-const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (
+function SelectContent({ className, children, position = 'popper', ref, ...props }) {
+  return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         ref={ref}
@@ -76,19 +79,21 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-));
+  );
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+}
 
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+function SelectLabel({ className, ref, ...props }) {
+  return (
     <SelectPrimitive.Label
       ref={ref}
       className={cn('px-2 py-1.5 text-sm font-semibold', className)}
       {...props}
     />
-));
+  );
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+}
 
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+function SelectItem({ className, children, ref, ...props }) {
+  return (
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
@@ -105,18 +110,19 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-));
+  );
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+}
 
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+function SelectSeparator({ className, ref, ...props }) {
+  return (
     <SelectPrimitive.Separator
       ref={ref}
       className={cn('-mx-1 my-1 h-px bg-muted', className)}
       role="separator"
       {...props}
     />
-));
+  );
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+}
 
 export {
   Select,

client/components/ui/separator.jsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { cn } from '@/lib/utils';
 
-const Separator = React.forwardRef(
+function Separator({ className, orientation = 'horizontal', decorative = true, ref, ...props }) {
-  ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  return (
     <SeparatorPrimitive.Root
       ref={ref}
       decorative={decorative}
@@ -15,8 +14,7 @@ const Separator = React.forwardRef(
       )}
       {...props}
     />
-  )
   );
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+}
 
 export { Separator };

client/components/ui/table.jsx

@@ -1,8 +1,7 @@
-
-import * as React from 'react';
 import { cn } from '@/lib/utils';
 
-const Table = React.forwardRef(({ className, ...props }, ref) => (
+function Table({ className, ref, ...props }) {
+  return (
     <div className="relative w-full overflow-auto">
       <table
         ref={ref}
@@ -14,10 +13,11 @@ const Table = React.forwardRef(({ className, ...props }, ref) => (
         {...props}
       />
     </div>
-));
+  );
-Table.displayName = 'Table';
+}
 
-const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+function TableHeader({ className, ref, ...props }) {
+  return (
     <thead
       ref={ref}
       className={cn(
@@ -26,10 +26,11 @@ const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableHeader.displayName = 'TableHeader';
+}
 
-const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+function TableBody({ className, ref, ...props }) {
+  return (
     <tbody
       ref={ref}
       className={cn(
@@ -38,10 +39,11 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableBody.displayName = 'TableBody';
+}
 
-const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+function TableFooter({ className, ref, ...props }) {
+  return (
     <tfoot
       ref={ref}
       className={cn(
@@ -51,10 +53,11 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableFooter.displayName = 'TableFooter';
+}
 
-const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+function TableRow({ className, ref, ...props }) {
+  return (
     <tr
       ref={ref}
       className={cn(
@@ -66,10 +69,11 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableRow.displayName = 'TableRow';
+}
 
-const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+function TableHead({ className, ref, ...props }) {
+  return (
     <th
       ref={ref}
       className={cn(
@@ -82,10 +86,11 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableHead.displayName = 'TableHead';
+}
 
-const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+function TableCell({ className, ref, ...props }) {
+  return (
     <td
       ref={ref}
       className={cn(
@@ -97,10 +102,11 @@ const TableCell = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableCell.displayName = 'TableCell';
+}
 
-const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+function TableCaption({ className, ref, ...props }) {
+  return (
     <caption
       ref={ref}
       className={cn(
@@ -109,8 +115,8 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TableCaption.displayName = 'TableCaption';
+}
 
 export {
   Table,

client/components/ui/tabs.jsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cn } from '@/lib/utils';
 
 const Tabs = TabsPrimitive.Root;
 
-const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+function TabsList({ className, ref, ...props }) {
+  return (
     <TabsPrimitive.List
       ref={ref}
       className={cn(
@@ -13,10 +13,11 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TabsList.displayName = TabsPrimitive.List.displayName;
+}
 
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+function TabsTrigger({ className, ref, ...props }) {
+  return (
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -25,10 +26,11 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+}
 
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+function TabsContent({ className, ref, ...props }) {
+  return (
     <TabsPrimitive.Content
       ref={ref}
       className={cn(
@@ -37,7 +39,7 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
       )}
       {...props}
     />
-));
+  );
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+}
 
 export { Tabs, TabsList, TabsTrigger, TabsContent };

client/components/ui/theme-toggle.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Sun, Moon } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -9,7 +8,8 @@ import { useTheme } from '@/contexts/ThemeContext';
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => (
+function DropdownMenuContent({ className, sideOffset = 6, ref, ...props }) {
+  return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         ref={ref}
@@ -25,10 +25,11 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...pr
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-));
+  );
-DropdownMenuContent.displayName = 'DropdownMenuContent';
+}
 
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+function DropdownMenuItem({ className, inset, ref, ...props }) {
+  return (
     <DropdownMenuPrimitive.Item
       ref={ref}
       className={cn(
@@ -40,8 +41,8 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
       )}
       {...props}
     />
-));
+  );
-DropdownMenuItem.displayName = 'DropdownMenuItem';
+}
 
 /* ── Theme options config ───────────────────────────────────── */
 

client/components/ui/tooltip.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from '@/lib/utils';
 
@@ -6,7 +5,8 @@ const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+function TooltipContent({ className, sideOffset = 4, ref, ...props }) {
+  return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         ref={ref}
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
         {...props}
       />
     </TooltipPrimitive.Portal>
-));
+  );
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };