fix: fix imports and small refactoring

Author: iatopilskii

packages/canary/src/components/toast.tsx

@@ -40,12 +40,9 @@ export * from './components/switch'
 export * from './components/table'
 export * from './components/tabs'
 export * from './components/text'
-export * from './components/toast'
-// export * from './components/toaster' Duplicate with sooner! Use sooner's Toaster instead
 export * from './components/toggle-group'
 export * from './components/toggle'
 export * from './components/tooltip'
-export * from './components/use-toast'
 export * from './lib/utils'
 export * from './lib/CanaryOutletFactory'
 export * from './components/treeview'

packages/canary/src/components/toaster.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react'
+import { ReactNode } from 'react'
 
 import { cn } from '@utils/cn'
 
 interface ButtonGroupProps {
-  children: React.ReactNode
+  children: ReactNode
   direction?: 'horizontal' | 'vertical'
   className?: string
   spacing?: string

packages/canary/src/components/use-toast.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 import { CanaryOutletFactory, CanaryOutletName } from '@utils/CanaryOutletFactory'
@@ -12,11 +12,11 @@ const buttonVariants = cva(
       variant: {
         default:
           'bg-background-5 text-foreground-6 hover:bg-background-10 disabled:bg-background-6 disabled:text-foreground-9',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
         outline:
-          'border border-borders-2 bg-transparent text-foreground-2 hover:border-borders-6 hover:text-foreground-8',
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-        tertiary: 'bg-tertiary text-secondary-foreground shadow-sm hover:bg-tertiary/80',
+          'border-borders-2 text-foreground-2 hover:border-borders-6 hover:text-foreground-8 border bg-transparent',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+        tertiary: 'bg-tertiary text-secondary-foreground hover:bg-tertiary/80 shadow-sm',
         ghost: 'hover:bg-background-12 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         link_accent: 'text-foreground-accent underline-offset-4 hover:underline',
@@ -65,17 +65,15 @@ const buttonVariants = cva(
   }
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
   loading?: boolean
-  spinner?: React.ReactNode
-  dropdown?: React.ReactNode
+  spinner?: ReactNode
+  dropdown?: ReactNode
   gradientType?: string
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,

packages/canary/src/index.ts

@@ -1,29 +1,29 @@
-import * as React from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { cn } from '@utils/cn'
 
 import { Icon } from './icon'
 import { Label } from './label'
 
-interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
   label?: string
 }
 
-const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
   ({ className, label, ...props }, ref) => (
     <div className={cn('flex gap-x-2.5', className)}>
       <CheckboxPrimitive.Root
         ref={ref}
-        className="peer size-4 shrink-0 rounded-sm border border-icons-1 shadow hover:border-icons-3 disabled:cursor-not-allowed disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+        className="border-icons-1 hover:border-icons-3 disabled:border-icons-4 data-[state=checked]:border-icons-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow disabled:cursor-not-allowed"
         {...props}
       >
         <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
           <Icon className="h-1.5 w-2" name="checkbox" width={8} height={6} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
       {label && (
-        <Label className="font-normal leading-tight tracking-tight text-foreground-1" htmlFor={props.id}>
+        <Label className="leading-tight" theme="foreground-1" htmlFor={props.id}>
           {label}
         </Label>
       )}