update import paths and enhance configuration

apps/web/tsconfig.json

@@ -26,7 +26,6 @@
 		".react-router/types/**/*",
 		"tailwind.config.ts",
 		"vite.config.ts",
-		"postcss.config.mjs",
 		"src/**/*",
 		"src/.server/**/*"
 	],

packages/ui/components.json

@@ -11,8 +11,9 @@
 		"prefix": ""
 	},
 	"aliases": {
-		"components": "src/components",
-		"ui": "src/ui",
-		"utils": "src/lib/utils"
+		"components": "#/components",
+		"ui": "#ui",
+		"utils": "#lib/utils",
+		"hooks": "#hooks"
 	}
 }

packages/ui/package.json

@@ -54,8 +54,7 @@
 		"tailwindcss": "4.0.0-beta.7",
 		"tailwindcss-animate": "1.0.7",
 		"typescript-eslint": "8.18.0",
-		"vite": "6.0.3",
-		"vite-tsconfig-paths": "5.1.4"
+		"vite": "6.0.3"
 	},
 	"engines": {
 		"node": ">=22.10"
@@ -66,6 +65,9 @@
 		"./ui/*": "./src/ui/*",
 		"./hooks/*": "./src/hooks/*"
 	},
+	"imports": {
+		"#*": "./src/*"
+	},
 	"name": "@suddenlygiovanni/ui",
 	"packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c",
 	"peerDependencies": {

packages/ui/src/components/accordion/accordion.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta } from '@storybook/react'
 import { type ReactElement, useEffect, useRef, useState } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 import {
 	Accordion,
 	AccordionContent,
 	AccordionHeader,
 	AccordionItem,
 	AccordionTrigger,
-} from '../../ui/accordion.tsx'
+} from '#ui/accordion.tsx'
 
 const meta = {
 	component: Accordion,

packages/ui/src/components/badge/badge.stories.tsx

@@ -1,7 +1,7 @@
 import { CheckIcon } from '@radix-ui/react-icons'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Badge } from '../../ui/badge.tsx'
+import { Badge } from '#ui/badge.tsx'
 
 const meta = {
 	component: Badge,

packages/ui/src/components/button/button.stories.tsx

@@ -1,7 +1,7 @@
 import { ChevronRightIcon, EnvelopeOpenIcon, ReloadIcon } from '@radix-ui/react-icons'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Button } from '../../ui/button.tsx'
+import { Button } from '#ui/button.tsx'
 import { T } from '../typography/typography.tsx'
 
 const meta = {

packages/ui/src/components/card/card.stories.tsx

@@ -1,10 +1,11 @@
 import { BellIcon, CheckIcon } from '@radix-ui/react-icons'
 import type { Meta } from '@storybook/react'
 import { type ComponentProps, type ReactElement, useRef } from 'react'
-import { clsx } from 'src/lib/utils.ts'
-import { Button } from '../../ui/button.tsx'
-import { Card } from '../../ui/card.tsx'
-import { Switch } from '../../ui/switch.tsx'
+
+import { clsx } from '#lib/utils.ts'
+import { Button } from '#ui/button.tsx'
+import { Card } from '#ui/card.tsx'
+import { Switch } from '#ui/switch.tsx'
 
 const meta = {
 	component: Card.Root,

packages/ui/src/components/collapsible/collapsible.stories.tsx

@@ -2,9 +2,9 @@ import { CaretSortIcon } from '@radix-ui/react-icons'
 import type { Meta } from '@storybook/react'
 import { type ReactElement, useState } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
-import { Button } from '../../ui/button.tsx'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../ui/collapsible.tsx'
+import { clsx } from '#lib/utils.ts'
+import { Button } from '#ui/button.tsx'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '#ui/collapsible.tsx'
 
 const rootClass = clsx('sans max-w-[20em]')
 

packages/ui/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -2,7 +2,7 @@ import type { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-men
 import type { Meta, StoryFn } from '@storybook/react'
 import { useCallback, useState } from 'react'
 
-import { Button } from '../../ui/button.tsx'
+import { Button } from '#ui/button.tsx'
 import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
@@ -19,7 +19,7 @@ import {
 	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
 	DropdownMenuTrigger,
-} from '../../ui/dropdown-menu.tsx'
+} from '#ui/dropdown-menu.tsx'
 
 const meta: Meta = {
 	component: DropdownMenu,

packages/ui/src/components/layout/layout.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const bodyName = 'Body'
 const Body: FC<ComponentPropsWithRef<'body'> & { asChild?: boolean }> = ({

packages/ui/src/components/mode-toggle/mode-toggle.tsx

@@ -1,14 +1,14 @@
 import { type ReactNode, memo, useMemo } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
-import { Button } from '../../ui/button.tsx'
+import { Icons } from '#components/icons/icons.tsx'
+import { clsx } from '#lib/utils.ts'
+import { Button } from '#ui/button.tsx'
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuTrigger,
-} from '../../ui/dropdown-menu.tsx'
-import { Icons } from '../icons/icons.tsx'
+} from '#ui/dropdown-menu.tsx'
 
 export type Theme = 'dark' | 'light'
 

packages/ui/src/components/navigation-menu-toggle/hamburger-icon.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, ReactElement } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const baseClasses = clsx('absolute h-0.5 w-6 transition-all duration-250 ease-in-out')
 

packages/ui/src/components/navigation-menu-toggle/navigation-menu-toggle.tsx

@@ -2,7 +2,7 @@ import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
 import type { ReactElement } from 'react'
 import { ToggleButton, type ToggleButtonProps, composeRenderProps } from 'react-aria-components'
 
-import { clsx, tv } from '../../lib/utils.ts'
+import { clsx, tv } from '#lib/utils.ts'
 import { HamburgerIcon } from './hamburger-icon.tsx'
 
 const styles = tv({

packages/ui/src/components/navigation-menu/navigation-menu.stories.tsx

@@ -3,7 +3,8 @@ import type { ComponentPropsWithoutRef, ElementRef, ReactElement } from 'react'
 import { forwardRef } from 'react'
 import { Link } from 'react-router'
 
-import { clsx } from '../../lib/utils.ts'
+import { Icons } from '#components/icons/icons.tsx'
+import { clsx } from '#lib/utils.ts'
 import {
 	NavigationMenu,
 	NavigationMenuContent,
@@ -12,8 +13,7 @@ import {
 	NavigationMenuList,
 	NavigationMenuTrigger,
 	navigationMenuTriggerStyle,
-} from '../../ui/navigation-menu.tsx'
-import { Icons } from '../icons/icons.tsx'
+} from '#ui/navigation-menu.tsx'
 
 const meta: Meta = {
 	component: NavigationMenu,

packages/ui/src/components/placeholder/placeholder.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const name = 'Placeholder'
 export const Placeholder: FC<ComponentPropsWithRef<'div'>> = ({

packages/ui/src/components/skeleton/skeleton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react'
 
-import { Skeleton } from '../../ui/skeleton.tsx'
+import { Skeleton } from '#ui/skeleton.tsx'
 
 const meta = {
 	component: Skeleton,

packages/ui/src/components/social/social.tsx

@@ -1,7 +1,7 @@
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
 import type { JSX, ReactElement } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 import { SocialIcon } from './social-icon.tsx'
 
 function SocialLink({ className, children, ...props }: JSX.IntrinsicElements['a']): ReactElement {

packages/ui/src/components/suddenly-giovanni/suddenly-giovanni.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import { Link, type LinkProps } from 'react-router'
 
-import { clsx } from '../../lib/utils.ts'
-import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar.tsx'
-import { Skeleton } from '../../ui/skeleton.tsx'
+import { clsx } from '#lib/utils.ts'
+import { Avatar, AvatarFallback, AvatarImage } from '#ui/avatar.tsx'
+import { Skeleton } from '#ui/skeleton.tsx'
 
 export function SuddenlyGiovanni({
 	className,

packages/ui/src/components/typography/a.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const A: FC<ComponentPropsWithRef<'a'>> = ({ className, children, ref, ...props }) => (
 	<a

packages/ui/src/components/typography/blockquote.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Blockquote: FC<ComponentPropsWithRef<'blockquote'>> = ({
 	className,

packages/ui/src/components/typography/code.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Code: FC<ComponentPropsWithRef<'code'>> = ({ className, children, ref, ...props }) => (
 	<code

packages/ui/src/components/typography/h1.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const H1: FC<ComponentPropsWithRef<'h1'>> = ({ className, children, ref, ...props }) => (
 	<h1

packages/ui/src/components/typography/h2.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const H2: FC<ComponentPropsWithRef<'h2'>> = ({ className, children, ref, ...props }) => (
 	<h2

packages/ui/src/components/typography/h3.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const H3: FC<ComponentPropsWithRef<'h3'>> = ({ className, children, ref, ...props }) => (
 	<h3

packages/ui/src/components/typography/h4.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const H4: FC<ComponentPropsWithRef<'h4'>> = ({ className, children, ref, ...props }) => (
 	<h4

packages/ui/src/components/typography/large.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Large: FC<ComponentPropsWithRef<'div'>> = ({ className, children, ref, ...props }) => (
 	<div

packages/ui/src/components/typography/lead.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Lead: FC<ComponentPropsWithRef<'h1'>> = ({ className, children, ref, ...props }) => (
 	<h1

packages/ui/src/components/typography/muted.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Muted: FC<ComponentPropsWithRef<'p'>> = ({ className, children, ref, ...props }) => (
 	<p

packages/ui/src/components/typography/p.tsx

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef, FC } from 'react'
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const P: FC<ComponentPropsWithRef<'p'>> = ({ className, children, ref, ...props }) => (
 	<p

packages/ui/src/components/typography/prose.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react'
 import type { ReactElement } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const meta = {
 	title: 'components/typography/Prose',

packages/ui/src/components/typography/small.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Small: FC<ComponentPropsWithRef<'small'>> = ({
 	className,

packages/ui/src/components/typography/table.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Tr: FC<ComponentPropsWithRef<'tr'>> = ({ className, children, ref, ...props }) => (
 	<tr

packages/ui/src/components/typography/ul.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 export const Ul: FC<ComponentPropsWithRef<'ul'>> = ({ className, children, ref, ...props }) => (
 	<ul

packages/ui/src/ui/accordion.tsx

@@ -2,7 +2,7 @@ import { Content, Header, Item, Root, Trigger } from '@radix-ui/react-accordion'
 import { ChevronDownIcon } from '@radix-ui/react-icons'
 import type { ComponentPropsWithRef, CustomComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const Accordion = Root
 Accordion.displayName = Root.displayName

packages/ui/src/ui/avatar.tsx

@@ -1,7 +1,7 @@
 import { Fallback, Image, Root } from '@radix-ui/react-avatar'
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const Avatar: FC<ComponentPropsWithRef<typeof Root>> = ({ className, ref, ...props }) => (
 	<Root

packages/ui/src/ui/badge.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { type VariantProps, clsx, cva } from '../lib/utils.ts'
+import { type VariantProps, clsx, cva } from '#lib/utils.ts'
 
 export const badgeVariants = cva(
 	'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',

packages/ui/src/ui/button.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import type { ComponentPropsWithRef, FC } from 'react'
 
-import { type VariantProps, clsx, cva } from '../lib/utils.ts'
+import { type VariantProps, clsx, cva } from '#lib/utils.ts'
 
 const buttonVariants = cva(
 	clsx(

packages/ui/src/ui/card.tsx

@@ -1,6 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import type { ComponentPropsWithRef, FC } from 'react'
-import { clsx } from '../lib/utils.ts'
+
+import { clsx } from '#lib/utils.ts'
 
 const Root: FC<ComponentPropsWithRef<'div'> & { asChild?: boolean }> = ({
 	className,

packages/ui/src/ui/dropdown-menu.tsx

@@ -18,7 +18,7 @@ import {
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons'
 import type { ComponentPropsWithRef, CustomComponentPropsWithRef, FC } from 'react'
 
-import { clsx } from '../lib/utils.ts'
+import { clsx } from '#lib/utils.ts'
 
 const DropdownMenu = Root
 const DropdownMenuTrigger = Trigger