@djangocfg/ui-core 2.1.41 → 2.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.41",
+  "version": "2.1.43",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -102,7 +102,7 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.41",
+    "@djangocfg/typescript-config": "^2.1.43",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/@old/calendar.tsx

@@ -1,15 +1,11 @@
 "use client"
 
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
-import { cn } from "../../lib/utils"
-import { Button, buttonVariants } from "../../components/button"
+import { Button, buttonVariants } from '../../components/button';
+import { cn } from '../../lib/utils';
 
 function Calendar({
   className,

package/src/components/@old/date-picker.tsx

@@ -1,14 +1,15 @@
 'use client'
 
-import * as React from 'react'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import type { SelectSingleEventHandler } from 'react-day-picker'
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from '../../components/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover';
+import { cn } from '../../lib/utils';
+import { Calendar } from './calendar';
 
-import { cn } from '../../lib/utils'
-import { Button } from '../../components/button'
-import { Calendar } from './calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover'
+import type { SelectSingleEventHandler } from 'react-day-picker'
 
 // =============================================================================
 // DatePicker - Single date selection with popover

package/src/components/accordion.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { cn } from "../lib/utils"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 const Accordion = AccordionPrimitive.Root
 

package/src/components/alert-dialog.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
-import { buttonVariants } from "./button"
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '../lib/utils';
+import { buttonVariants } from './button';
 
 const AlertDialog = AlertDialogPrimitive.Root
 

package/src/components/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

package/src/components/aspect-ratio.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 
 const AspectRatio = AspectRatioPrimitive.Root
 

package/src/components/avatar.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

package/src/components/badge.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",

package/src/components/button-group.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "../lib/utils"
-import { Separator } from "./separator"
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../lib/utils';
+import { Separator } from './separator';
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",

package/src/components/button.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Loader2 } from "lucide-react"
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

package/src/components/calendar/calendar.tsx

@@ -1,15 +1,11 @@
 "use client"
 
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
 
-import { cn } from "../../lib/utils"
-import { Button, buttonVariants } from "../button"
+import { cn } from '../../lib/utils';
+import { Button, buttonVariants } from '../button';
 
 function Calendar({
   className,

package/src/components/calendar/date-picker.tsx

@@ -1,14 +1,15 @@
 'use client'
 
-import * as React from 'react'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import type { SelectSingleEventHandler, DateRange as RDPDateRange } from 'react-day-picker'
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Calendar } from './calendar';
 
-import { cn } from '../../lib/utils'
-import { Button } from '../button'
-import { Calendar } from './calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import type { SelectSingleEventHandler, DateRange as RDPDateRange } from 'react-day-picker'
 
 // =============================================================================
 // DatePicker - Single date selection with popover

package/src/components/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,

package/src/components/carousel.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import * as React from 'react';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

package/src/components/chart.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const

package/src/components/checkbox.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { cn } from "../lib/utils"
-import { CheckIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

package/src/components/collapsible.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
 const Collapsible = CollapsiblePrimitive.Root
 

package/src/components/combobox.tsx

@@ -1,22 +1,14 @@
 "use client"
 
-import * as React from "react"
-import { Check, ChevronsUpDown } from "lucide-react"
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "./command"
+import { Check, ChevronsUpDown } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "./popover"
+    Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 export interface ComboboxOption {
   value: string

package/src/components/command.tsx

@@ -1,11 +1,13 @@
 "use client"
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { cn } from "../lib/utils"
-import { Dialog, DialogContent } from "./dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+
+import { DialogProps} from '@radix-ui/react-dialog';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
+import { Dialog, DialogContent } from './dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

package/src/components/context-menu.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { cn } from "../lib/utils"
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 const ContextMenu = ContextMenuPrimitive.Root
 

package/src/components/copy.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import * as React from 'react'
-import { Check, Copy } from 'lucide-react'
-import { cn } from '../lib/utils'
-import { Button } from './button'
+import { Check, Copy } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
 
 // =============================================================================
 // CopyButton - Copy button with icon feedback

package/src/components/dialog.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { cn } from "../lib/utils"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 const Dialog = DialogPrimitive.Root
 

package/src/components/drawer.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const Drawer = ({
   shouldScaleBackground = true,

package/src/components/empty.tsx

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

package/src/components/field.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useMemo } from 'react';
 
-import { cn } from "../lib/utils"
-import { Label } from "./label"
-import { Separator } from "./separator"
+import { cn } from '../lib/utils';
+import { Label } from './label';
+import { Separator } from './separator';
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (

package/src/components/form.tsx

@@ -1,19 +1,15 @@
 "use client"
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from 'react';
 import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "../lib/utils"
-import { Label } from "./label"
+    Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext
+} from 'react-hook-form';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../lib/utils';
+import { Label } from './label';
 
 const Form = FormProvider
 

package/src/components/hover-card.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+
+import { cn } from '../lib/utils';
 
 const HoverCard = HoverCardPrimitive.Root
 

package/src/components/image-with-fallback.tsx

@@ -4,10 +4,11 @@
  * Advanced image component with loading states, error handling, and customizable fallbacks
  */
 
+import { Car, ImageIcon, MapPin, Package, User } from 'lucide-react';
 import React, { forwardRef } from 'react';
-import { Car, ImageIcon, User, Package, MapPin } from 'lucide-react';
-import { cn } from '../lib/utils';
+
 import { useImageLoader } from '../hooks/useImageLoader';
+import { cn } from '../lib/utils';
 
 export interface ImageWithFallbackProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onLoad' | 'onError'> {
   src?: string;

package/src/components/input-group.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Input } from "./input"
-import { Textarea } from "./textarea"
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Input } from './input';
+import { Textarea } from './textarea';
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/input-otp.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import { OTPInput, OTPInputContext, type OTPInputProps as BaseOTPInputProps } from "input-otp"
-import { cn } from "../lib/utils"
-import { MinusIcon } from "@radix-ui/react-icons"
+import { OTPInput, OTPInputContext, OTPInputProps as BaseOTPInputProps} from 'input-otp';
+import * as React from 'react';
+
+import { MinusIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 type ChildrenBranch = Extract<BaseOTPInputProps, { render?: never }>;
 type InputOTPProps = Omit<ChildrenBranch, 'className' | 'containerClassName'> & {

package/src/components/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {

package/src/components/item.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
-import { Separator } from "./separator"
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../lib/utils';
+import { Separator } from './separator';
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/components/kbd.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 type KbdSize = "xs" | "sm" | "default" | "lg";
 

package/src/components/label.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '../lib/utils';
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"

package/src/components/multi-select.tsx

@@ -1,23 +1,15 @@
 "use client"
 
-import * as React from "react"
-import { Check, ChevronsUpDown, X } from "lucide-react"
-import { cn } from "../lib/utils"
-import { Button } from "./button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "./command"
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import { Badge } from './badge';
+import { Button } from './button';
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "./popover"
-import { Badge } from "./badge"
+    Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
+} from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
 export interface MultiSelectOption {
   value: string

package/src/components/og-image.tsx

@@ -1,8 +1,11 @@
 'use client'
 
-import * as React from 'react'
-import { generateOgImageUrl, type OgImageUrlParams, type GenerateOgImageUrlOptions } from '../lib/og-image'
-import { cn } from '../lib/utils'
+import * as React from 'react';
+
+import {
+    generateOgImageUrl, type GenerateOgImageUrlOptions, type OgImageUrlParams
+} from '../lib/og-image';
+import { cn } from '../lib/utils';
 
 export interface OgImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** OG Image parameters */

package/src/components/popover.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '../lib/utils';
 
 const Popover = PopoverPrimitive.Root
 

package/src/components/preloader.tsx

@@ -7,8 +7,9 @@
 
 'use client';
 
-import React from 'react';
 import { Loader2 } from 'lucide-react';
+import React from 'react';
+
 import { cn } from '../lib/utils';
 import { Spinner } from './spinner';
 

package/src/components/progress.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../lib/utils';
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,

package/src/components/radio-group.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "../lib/utils"
-import { DotFilledIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+
+import { DotFilledIcon } from '@radix-ui/react-icons';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../lib/utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,

package/src/components/resizable.tsx

@@ -1,9 +1,10 @@
 "use client"
-import * as React from "react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from "../lib/utils"
-import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import { DragHandleDots2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 // Context to share dragging state across panel group
 const ResizableDraggingContext = React.createContext<{

package/src/components/scroll-area.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '../lib/utils';
 
 /**
  * ScrollArea imperative handle for programmatic control

package/src/components/select.tsx

@@ -1,9 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { cn } from "../lib/utils"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
+import * as React from 'react';
+
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '../lib/utils';
 
 const Select = SelectPrimitive.Root
 

package/src/components/separator.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../lib/utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

package/src/components/sheet.tsx

@@ -1,10 +1,12 @@
 "use client"
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../lib/utils"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
 
 const Sheet = SheetPrimitive.Root
 

package/src/components/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 function Skeleton({
   className,

package/src/components/slider.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+import { cn } from '../lib/utils';
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,

package/src/components/spinner.tsx

@@ -1,6 +1,6 @@
-import { Loader2Icon } from "lucide-react"
+import { Loader2Icon } from 'lucide-react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (

package/src/components/switch.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '../lib/utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

package/src/components/table.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,

package/src/components/tabs.tsx

@@ -1,20 +1,15 @@
 "use client"
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { Menu } from "lucide-react"
-
-import { cn } from "../lib/utils"
-import { useIsMobile } from "../hooks"
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./sheet"
-import { Button } from "./button"
-import { ScrollArea, ScrollBar } from "./scroll-area"
+import { Menu } from 'lucide-react';
+import * as React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { useIsMobile } from '../hooks';
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { ScrollArea, ScrollBar } from './scroll-area';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Tabs Root with Mobile Sheet Support

package/src/components/textarea.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import { cn } from '../lib/utils';
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,

package/src/components/toast.tsx

@@ -4,9 +4,10 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '../lib/utils';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
+import { cn } from '../lib/utils';
+
 const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<

package/src/components/toaster.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { useEffect, useState } from 'react';
-import { useToast } from '../hooks/useToast';
 
+import { useToast } from '../hooks/useToast';
 import {
     Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport
 } from './toast';

package/src/components/toggle-group.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
-import { toggleVariants } from "./toggle"
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+
+import { cn } from '../lib/utils';
+import { toggleVariants } from './toggle';
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

package/src/components/toggle.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+
+import { cn } from '../lib/utils';
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

package/src/components/token-icon.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import * as React from "react"
-import { cn } from "../lib/utils"
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
 
 export interface TokenIconProps extends React.HTMLAttributes<HTMLDivElement> {
   symbol: string
@@ -131,6 +132,10 @@ export function TokenIcon({
     }
   }, [symbol])
 
+  // Pre-compute fallback values
+  const fallbackFontSize = Math.max(8, size * 0.4)
+  const truncatedSymbol = symbol?.slice(0, 3) || '?'
+
   return (
     <div
       className={cn("inline-flex items-center justify-center flex-shrink-0", className)}
@@ -146,9 +151,9 @@ export function TokenIcon({
         // Fallback: show symbol as text
         <span
           className="text-muted-foreground font-medium uppercase"
-          style={{ fontSize: Math.max(8, size * 0.4) }}
+          style={{ fontSize: fallbackFontSize }}
         >
-          {symbol?.slice(0, 3) || '?'}
+          {truncatedSymbol}
         </span>
       )}
     </div>

package/src/components/tooltip-provider-safe.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from 'react';
+
 import { TooltipProvider as RadixTooltipProvider } from '@radix-ui/react-tooltip';
 
 interface SafeTooltipProviderProps {

package/src/components/tooltip.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react';
 
-import { cn } from "../lib/utils"
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../lib/utils';
 
 const TooltipProvider = TooltipPrimitive.Provider
 

package/src/hooks/useDebounce.ts

@@ -6,7 +6,7 @@
 
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export function useDebounce<T>(value: T, delay: number = 300): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);

package/src/hooks/useImageLoader.ts

@@ -6,7 +6,7 @@
 
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export interface ImageLoaderState {
   isLoading: boolean;

package/src/hooks/useMediaQuery.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 /**
  * Hook to check if a media query matches

package/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { type ClassValue, clsx } from 'clsx';
+import { ClassValue, clsx} from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {