fix: broken ts and shadcdn paths

components.json

@@ -10,7 +10,7 @@
     "cssVariables": true
   },
   "aliases": {
-    "components": "src/components",
+    "components": "@/components",
-    "utils": "src/lib/utils"
+    "utils": "@/lib/utils"
   }
 }

src/app/inventory/page.tsx

@@ -27,7 +27,7 @@ import {
 } from '@/components/ui/command'
 import { CaretSortIcon } from '@radix-ui/react-icons'
 import { cn } from '@/lib/utils'
-import { Textarea } from '@spejstore-ui/components/ui/textarea'
+import { Textarea } from '@/components/ui/textarea'
 
 function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
   return (

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { ModeToggle } from '@spejstore-ui/components/ModeToggle'
+import { ModeToggle } from '@//components/ModeToggle'
 import Link from 'next/link'
 import Image from 'next/image'
 

src/components/ui/button.tsx

@@ -1,34 +1,37 @@
-import * as React from 'react'
+import * as React from "react"
-import { Slot } from '@radix-ui/react-slot'
+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 'src/lib/utils'
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default:
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary:
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        link: 'text-primary underline-offset-4 hover:underline',
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: "h-9 px-4 py-2",
-        sm: 'h-8 rounded-md px-3 text-xs',
+        sm: "h-8 rounded-md px-3 text-xs",
-        lg: 'h-10 rounded-md px-8',
+        lg: "h-10 rounded-md px-8",
-        icon: 'h-9 w-9',
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
-      size: 'default',
+      size: "default",
     },
-  },
+  }
 )
 
 export interface ButtonProps
@@ -39,12 +42,16 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
+    const Comp = asChild ? Slot : "button"
     return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
     )
-  },
+  }
 )
-Button.displayName = 'Button'
+Button.displayName = "Button"
 
 export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -1,6 +1,6 @@
+import { cn } from '@/lib/utils'
 import * as React from 'react'
 
-import { cn } from 'src/lib/utils'
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

src/components/ui/command.tsx

@@ -5,8 +5,8 @@ import { DialogProps } from '@radix-ui/react-dialog'
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
 import { Command as CommandPrimitive } from 'cmdk'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
-import { Dialog, DialogContent } from 'src/components/ui/dialog'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -23,7 +23,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
+interface CommandDialogProps extends DialogProps { }
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (

src/components/ui/dialog.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { Cross2Icon } from '@radix-ui/react-icons'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
 const Dialog = DialogPrimitive.Root
 

src/components/ui/dropdown-menu.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 

src/components/ui/form.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from "react"
-import * as LabelPrimitive from '@radix-ui/react-label'
+import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from '@radix-ui/react-slot'
+import { Slot } from "@radix-ui/react-slot"
 import {
   Controller,
   ControllerProps,
@@ -8,25 +8,27 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from 'react-hook-form'
+} from "react-hook-form"
 
-import { cn } from 'src/lib/utils'
+import { cn } from "@/lib/utils"
-import { Label } from 'src/components/ui/label'
+import { Label } from "@/components/ui/label"
 
 const Form = FormProvider
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
   name: TName
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -45,7 +47,7 @@ const useFormField = () => {
   const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
+    throw new Error("useFormField should be used within <FormField>")
   }
 
   const { id } = itemContext
@@ -64,20 +66,23 @@ type FormItemContextValue = {
   id: string
 }
 
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+const FormItemContext = React.createContext<FormItemContextValue>(
-
+  {} as FormItemContextValue
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId()
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn('space-y-2', className)} {...props} />
-      </FormItemContext.Provider>
-    )
-  },
 )
-FormItem.displayName = 'FormItem'
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -88,13 +93,13 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && 'text-destructive', className)}
+      className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
   )
 })
-FormLabel.displayName = 'FormLabel'
+FormLabel.displayName = "FormLabel"
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
@@ -106,13 +111,17 @@ const FormControl = React.forwardRef<
     <Slot
       ref={ref}
       id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
       aria-invalid={!!error}
       {...props}
     />
   )
 })
-FormControl.displayName = 'FormControl'
+FormControl.displayName = "FormControl"
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -124,12 +133,12 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-[0.8rem] text-muted-foreground', className)}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
   )
 })
-FormDescription.displayName = 'FormDescription'
+FormDescription.displayName = "FormDescription"
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
@@ -146,14 +155,14 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
       {...props}
     >
       {body}
     </p>
   )
 })
-FormMessage.displayName = 'FormMessage'
+FormMessage.displayName = "FormMessage"
 
 export {
   useFormField,

src/components/ui/input.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

src/components/ui/label.tsx

@@ -1,20 +1,25 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
-import * as LabelPrimitive from '@radix-ui/react-label'
+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 { cn } from 'src/lib/utils'
+import { cn } from "@/lib/utils"
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
 ))
 Label.displayName = LabelPrimitive.Root.displayName
 

src/components/ui/popover.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
 const Popover = PopoverPrimitive.Root
 

src/components/ui/select.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
 import * as SelectPrimitive from '@radix-ui/react-select'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
 const Select = SelectPrimitive.Root
 
@@ -42,7 +42,7 @@ const SelectContent = React.forwardRef<
       className={cn(
         'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
       )}
       position={position}
@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           'p-1',
           position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+          'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
         )}
       >
         {children}

src/components/ui/separator.tsx

@@ -1,26 +1,31 @@
-'use client'
+"use client"
 
-import * as React from 'react'
+import * as React from "react"
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from 'src/lib/utils'
+import { cn } from "@/lib/utils"
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+>(
-  <SeparatorPrimitive.Root
+  (
-    ref={ref}
+    { className, orientation = "horizontal", decorative = true, ...props },
-    decorative={decorative}
+    ref
-    orientation={orientation}
+  ) => (
-    className={cn(
+    <SeparatorPrimitive.Root
-      'shrink-0 bg-border',
+      ref={ref}
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      decorative={decorative}
-      className,
+      orientation={orientation}
-    )}
+      className={cn(
-    {...props}
+        "shrink-0 bg-border",
-  />
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-))
+        className
+      )}
+      {...props}
+    />
+  )
+)
 Separator.displayName = SeparatorPrimitive.Root.displayName
 
 export { Separator }

src/components/ui/textarea.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {

src/components/ui/toast.tsx

@@ -3,7 +3,7 @@ import { Cross2Icon } from '@radix-ui/react-icons'
 import * as ToastPrimitives from '@radix-ui/react-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from 'src/lib/utils'
+import { cn } from '@/lib/utils'
 
 const ToastProvider = ToastPrimitives.Provider
 

src/components/ui/toaster.tsx

@@ -7,8 +7,8 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from 'src/components/ui/toast'
+} from '@/components/ui/toast'
-import { useToast } from 'src/components/ui/use-toast'
+import { useToast } from '@/components/ui/use-toast'
 
 export function Toaster() {
   const { toasts } = useToast()

tsconfig.json

@@ -20,10 +20,8 @@
       }
     ],
     "paths": {
-      "@spejstore-ui/*": ["./src/*"],
+      "@/*": ["./src/*"],
-      "@/components/*": ["./src/components/*"],
+      "@/components/*": ["./src/components/*"]
-      "@/utils": ["./src/lib/utils"],
-      "@/lib/utils": ["./src/lib/utils"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],