Updated UI package to work with the new Shadcn CLI (#59)

Updated UI package to work with the new Shadcn CLI

packages/ui/README.md

@@ -12,13 +12,11 @@ This package define two sets of components:
 To install a Shadcn UI component, you can use the following command in the root of the repository:
 
 ```bash
-npx shadcn-ui@latest add <component> --path=packages/ui/src/shadcn
+npx shadcn@latest add <component> -c packages/ui
 ```
 
 For example, to install the `Button` component, you can use the following command:
 
 ```bash
-npx shadcn-ui@latest add button --path=packages/ui/src/shadcn
-```
-
-We pass the `--path` flag to specify the path where the component should be installed.
+npx shadcn-ui@latest add button -c packages/ui
+```

packages/ui/components.json

@@ -4,14 +4,17 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "app/globals.css",
+    "config": "./tailwind.config.ts",
+    "css": "../../apps/web/styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""
   },
   "aliases": {
-    "components": "@kit/ui",
-    "utils": "@kit/ui/utils"
+    "components": "~components",
+    "utils": "~utils",
+    "lib": "~lib",
+    "hooks": "~hooks",
+    "ui": "~ui"
   }
-}
+}

packages/ui/package.json

@@ -34,7 +34,8 @@
     "lucide-react": "^0.438.0",
     "react-top-loading-bar": "2.3.1",
     "recharts": "^2.12.7",
-    "tailwind-merge": "^2.5.2"
+    "tailwind-merge": "^2.5.2",
+    "vaul": "^0.9.1"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
@@ -103,7 +104,7 @@
     "./switch": "./src/shadcn/switch.tsx",
     "./breadcrumb": "./src/shadcn/breadcrumb.tsx",
     "./chart": "./src/shadcn/chart.tsx",
-    "./utils": "./src/utils/index.ts",
+    "./utils": "./src/lib/utils/index.ts",
     "./if": "./src/makerkit/if.tsx",
     "./trans": "./src/makerkit/trans.tsx",
     "./divider": "./src/makerkit/divider.tsx",

packages/ui/src/makerkit/bordered-navigation-menu.tsx

@@ -3,13 +3,13 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+import { cn, isRouteActive } from '../lib/utils';
 import { Button } from '../shadcn/button';
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
 } from '../shadcn/navigation-menu';
-import { cn, isRouteActive } from '../utils';
 import { Trans } from './trans';
 
 export function BorderedNavigationMenu(props: React.PropsWithChildren) {

packages/ui/src/makerkit/card-button.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { ChevronRight } from 'lucide-react';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 export const CardButton = React.forwardRef<
   HTMLButtonElement,

packages/ui/src/makerkit/divider.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 export function Divider(props: { className?: string }) {
   return <div className={cn('h-[1px] w-full bg-border', props.className)} />;

packages/ui/src/makerkit/empty-state.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { cn } from '../lib/utils';
 import { Button } from '../shadcn/button';
-import { cn } from '../utils';
 
 const EmptyStateHeading = React.forwardRef<
   HTMLHeadingElement,

packages/ui/src/makerkit/image-upload-input.tsx

@@ -7,9 +7,9 @@ import Image from 'next/image';
 
 import { UploadCloud, X } from 'lucide-react';
 
+import { cn } from '../lib/utils';
 import { Button } from '../shadcn/button';
 import { Label } from '../shadcn/label';
-import { cn } from '../utils';
 import { If } from './if';
 
 type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {

packages/ui/src/makerkit/loading-overlay.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 import { Spinner } from './spinner';
 
 export function LoadingOverlay({

packages/ui/src/makerkit/marketing/cta-button.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
+import { cn } from '../../lib/utils';
 import { Button } from '../../shadcn/button';
-import { cn } from '../../utils';
 
 export const CtaButton = forwardRef<
   HTMLButtonElement,

packages/ui/src/makerkit/marketing/feature-card.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 
+import { cn } from '../../lib/utils';
 import {
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from '../../shadcn/card';
-import { cn } from '../../utils';
 
 interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
   label: string;

packages/ui/src/makerkit/marketing/feature-grid.tsx

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

packages/ui/src/makerkit/marketing/feature-showcase.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 
 interface FeatureShowcaseProps extends React.HTMLAttributes<HTMLDivElement> {
   heading: React.ReactNode;

packages/ui/src/makerkit/marketing/footer.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 
 interface FooterSection {
   heading: React.ReactNode;

packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 
 export const GradientSecondaryText = forwardRef<
   HTMLSpanElement,

packages/ui/src/makerkit/marketing/gradient-text.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 
 export const GradientText = forwardRef<
   HTMLSpanElement,

packages/ui/src/makerkit/marketing/header.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   logo?: React.ReactNode;

packages/ui/src/makerkit/marketing/hero-title.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 
 export const HeroTitle = forwardRef<
   HTMLHeadingElement,

packages/ui/src/makerkit/marketing/hero.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
+import { cn } from '../../lib/utils';
 import { Heading } from '../../shadcn/heading';
-import { cn } from '../../utils';
 import { HeroTitle } from './hero-title';
 
 interface HeroProps {

packages/ui/src/makerkit/marketing/newsletter-signup-container.tsx

@@ -2,9 +2,9 @@
 
 import { useCallback, useState } from 'react';
 
+import { cn } from '../../lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '../../shadcn/alert';
 import { Heading } from '../../shadcn/heading';
-import { cn } from '../../utils';
 import { Spinner } from '../spinner';
 import { NewsletterSignup } from './newsletter-signup';
 

packages/ui/src/makerkit/marketing/newsletter-signup.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { cn } from '../../lib/utils';
 import { Button } from '../../shadcn/button';
 import {
   Form,
@@ -13,7 +14,6 @@ import {
   FormMessage,
 } from '../../shadcn/form';
 import { Input } from '../../shadcn/input';
-import { cn } from '../../utils';
 
 const NewsletterFormSchema = z.object({
   email: z.string().email('Please enter a valid email address'),

packages/ui/src/makerkit/marketing/pill.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
-import { cn } from '../../utils';
+import { cn } from '../../lib/utils';
 import { GradientSecondaryText } from './gradient-secondary-text';
 
 export const Pill = forwardRef<

packages/ui/src/makerkit/marketing/secondary-hero.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
+import { cn } from '../../lib/utils';
 import { Heading } from '../../shadcn/heading';
-import { cn } from '../../utils';
 
 interface SecondaryHeroProps extends React.HTMLAttributes<HTMLDivElement> {
   pill?: React.ReactNode;

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

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import { Computer, Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
+import { cn } from '../lib/utils';
 import { Button } from '../shadcn/button';
 import {
   DropdownMenu,
@@ -16,7 +17,6 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '../shadcn/dropdown-menu';
-import { cn } from '../utils';
 import { Trans } from './trans';
 
 const MODES = ['light', 'dark', 'system'];

packages/ui/src/makerkit/multi-step-form.tsx

@@ -16,7 +16,7 @@ import { useMutation } from '@tanstack/react-query';
 import { Path, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 interface MultiStepFormProps<T extends z.ZodType> {
   schema: T;

packages/ui/src/makerkit/page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
 

packages/ui/src/makerkit/profile-avatar.tsx

@@ -1,5 +1,5 @@
+import { cn } from '../lib/utils';
 import { Avatar, AvatarFallback, AvatarImage } from '../shadcn/avatar';
-import { cn } from '../utils';
 
 type SessionProps = {
   displayName: string | null;

packages/ui/src/makerkit/sidebar.tsx

@@ -9,6 +9,7 @@ import { cva } from 'class-variance-authority';
 import { ChevronDown } from 'lucide-react';
 import { z } from 'zod';
 
+import { cn, isRouteActive } from '../lib/utils';
 import { Button } from '../shadcn/button';
 import {
   Tooltip,
@@ -16,7 +17,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '../shadcn/tooltip';
-import { cn, isRouteActive } from '../utils';
 import { SidebarContext } from './context/sidebar.context';
 import { If } from './if';
 import type { NavigationConfigSchema } from './navigation-config.schema';

packages/ui/src/makerkit/spinner.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 export function Spinner(
   props: React.PropsWithChildren<{

packages/ui/src/makerkit/stepper.tsx

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 
 import { cva } from 'class-variance-authority';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 import { If } from './if';
 import { Trans } from './trans';
 

packages/ui/src/shadcn/accordion.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 const Accordion = AccordionPrimitive.Root;
 

packages/ui/src/shadcn/alert-dialog.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 import { buttonVariants } from './button';
 
 const AlertDialog = AlertDialogPrimitive.Root;

packages/ui/src/shadcn/alert.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { type VariantProps, cva } from 'class-variance-authority';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 const alertVariants = cva(
   'relative w-full bg-gradient-to-r 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',

packages/ui/src/shadcn/avatar.tsx

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

packages/ui/src/shadcn/badge.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { type VariantProps, cva } from 'class-variance-authority';
 
-import { cn } from '../utils/cn';
+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',

packages/ui/src/shadcn/breadcrumb.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { Slot } from '@radix-ui/react-slot';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

packages/ui/src/shadcn/button.tsx

@@ -4,7 +4,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap 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',

packages/ui/src/shadcn/calendar.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 import { buttonVariants } from './button';
 
 export type { DateRange } from 'react-day-picker';

packages/ui/src/shadcn/card.tsx

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

packages/ui/src/shadcn/chart.tsx

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

packages/ui/src/shadcn/checkbox.tsx

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

packages/ui/src/shadcn/command.tsx

@@ -6,7 +6,7 @@ import { type DialogProps } from '@radix-ui/react-dialog';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 import { Dialog, DialogContent } from './dialog';
 
 const Command = React.forwardRef<

packages/ui/src/shadcn/dialog.tsx

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

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

@@ -9,7 +9,7 @@ import {
   DotFilledIcon,
 } from '@radix-ui/react-icons';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

packages/ui/src/shadcn/form.tsx

@@ -7,8 +7,8 @@ import { Slot } from '@radix-ui/react-slot';
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 
+import { cn } from '../lib/utils';
 import { Trans } from '../makerkit/trans';
-import { cn } from '../utils';
 import { Label } from './label';
 
 const Form = FormProvider;

packages/ui/src/shadcn/heading.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
 

packages/ui/src/shadcn/index.ts

@@ -1 +1 @@
-export { cn } from '../utils/cn';
+export { cn } from '../lib/utils';

packages/ui/src/shadcn/input-otp.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { DashIcon } from '@radix-ui/react-icons';
 import { OTPInput, OTPInputContext } from 'input-otp';
 
-import { cn } from '../utils';
+import { cn } from '../lib/utils';
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,

packages/ui/src/shadcn/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 

packages/ui/src/shadcn/label.tsx

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

packages/ui/src/shadcn/navigation-menu.tsx

@@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@radix-ui/react-icons';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

packages/ui/src/shadcn/popover.tsx

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

packages/ui/src/shadcn/radio-group.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { CheckIcon } from '@radix-ui/react-icons';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,

packages/ui/src/shadcn/scroll-area.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,

packages/ui/src/shadcn/select.tsx

@@ -10,7 +10,7 @@ import {
 } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const Select = SelectPrimitive.Root;
 

packages/ui/src/shadcn/separator.tsx

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

packages/ui/src/shadcn/sheet.tsx

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const Sheet = SheetPrimitive.Root;
 

packages/ui/src/shadcn/switch.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from '@kit/ui/utils';
+import { cn } from '../lib/utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

packages/ui/src/shadcn/table.tsx

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

packages/ui/src/shadcn/tabs.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const Tabs = TabsPrimitive.Root;
 

packages/ui/src/shadcn/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 

packages/ui/src/shadcn/tooltip.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from '../utils/cn';
+import { cn } from '../lib/utils';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

packages/ui/tsconfig.json

@@ -1,8 +1,15 @@
 {
   "extends": "@kit/tsconfig/base.json",
   "compilerOptions": {
-    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
+    "paths": {
+      "~/components": ["./src/shadcn/*"],
+      "~/utils": ["./src/lib/utils"],
+      "~/lib/*": ["./src/lib/*"],
+      "~/hooks": ["./src/hooks"],
+      "~/ui": ["./src/shadcn/*"]
+    }
   },
   "include": ["*.ts", "src"],
   "exclude": ["node_modules"]
-}
+}

pnpm-lock.yaml

@@ -1257,6 +1257,9 @@ importers:
       tailwind-merge:
         specifier: ^2.5.2
         version: 2.5.2
+      vaul:
+        specifier: ^0.9.1
+        version: 0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@kit/eslint-config':
         specifier: workspace:*
@@ -7631,6 +7634,12 @@ packages:
     resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  vaul@0.9.1:
+    resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==}
+    peerDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1
+
   vercel-email@0.0.6:
     resolution: {integrity: sha512-lpELZ8/B6qyLMUOzmvZiU5evo1Hv5jfSpI/rrzny5UYfOAUKFYycraXNT+fT/cC6ewUKQVJDg8/v3LwyX3cCzA==}
 
@@ -15520,6 +15529,15 @@ snapshots:
 
   validate-npm-package-name@5.0.1: {}
 
+  vaul@0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vercel-email@0.0.6: {}
 
   vfile-message@4.0.2: