diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index e23e3ec..3c6cddb 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -6,32 +6,30 @@ import { Providers } from '@/components/providers'; import { Metadata } from 'next'; const fontSans = Geist({ - subsets: ['latin'], - variable: '--font-sans', + subsets: ['latin'], + variable: '--font-sans', }); const fontMono = Geist_Mono({ - subsets: ['latin'], - variable: '--font-mono', + subsets: ['latin'], + variable: '--font-mono', }); export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + title: 'Create Next App', + description: 'Generated by create next app', }; export default function RootLayout({ - children, + children, }: Readonly<{ - children: React.ReactNode; + children: React.ReactNode; }>) { - return ( - - - {children} - - - ); + return ( + + + {children} + + + ); } diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index f2a484b..d520aae 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,121 +1,115 @@ import { ModeToggle } from '@/components/mode-toggle'; import { Button, buttonVariants } from '@workspace/ui/components/button'; +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from '@workspace/ui/components/dropdown-menu'; import { cn } from '@workspace/ui/lib/utils'; +import { ChevronDownIcon } from 'lucide-react'; import Image from 'next/image'; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{' '} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
+ return ( +
+
+ Next.js logo +
    +
  1. + Get started by editing{' '} + app/page.tsx. +
    2. +
  2. Save and see your changes instantly.
    3. +
-

- All the buttons are from the ui package. The auto complete - works as well. -

+

+ All the buttons are from the ui package. The auto complete works as well. +

- 
-          {`import { Button, buttonVariants } from '@workspace/ui/components/button';
+				
+					{`import { Button, buttonVariants } from '@workspace/ui/components/button';
 import { cn } from '@workspace/ui/lib/utils';`}
-        

+
- + - + - -
- -
- ); + + + + + + Item 1 + Item 2 + Item 3 + Item 3 + + Item 3 + + Item 3.1 + Item 3.2 + + + + + +
+ + Vercel logomark + Deploy now + + + Read our docs + +
+
+ +
+ ); } diff --git a/apps/web/components/mode-toggle.tsx b/apps/web/components/mode-toggle.tsx index e560a38..95521d9 100644 --- a/apps/web/components/mode-toggle.tsx +++ b/apps/web/components/mode-toggle.tsx @@ -6,35 +6,29 @@ import { useTheme } from 'next-themes'; import { Button } from '@workspace/ui/components/button'; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, } from '@workspace/ui/components/dropdown-menu'; export function ModeToggle() { - const { setTheme } = useTheme(); + const { setTheme } = useTheme(); - return ( - - - - - - setTheme('light')}> - Light - - setTheme('dark')}> - Dark - - setTheme('system')}> - System - - - - ); + return ( + + + + + + setTheme('light')}>Light + setTheme('dark')}>Dark + setTheme('system')}>System + + + ); } diff --git a/apps/web/components/providers.tsx b/apps/web/components/providers.tsx index d94d4f5..49ecbf4 100644 --- a/apps/web/components/providers.tsx +++ b/apps/web/components/providers.tsx @@ -4,15 +4,15 @@ import * as React from 'react'; import { ThemeProvider as NextThemesProvider } from 'next-themes'; export function Providers({ children }: { children: React.ReactNode }) { - return ( - - {children} - - ); + return ( + + {children} + + ); } diff --git a/apps/web/package.json b/apps/web/package.json index a49ef75..59a7ee1 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@workspace/ui": "workspace:*", - "lucide-react": "0.475.0", + "lucide-react": "0.477.0", "next-themes": "^0.4.4", "next": "15.2.0", "react": "19.0.0", diff --git a/packages/ui/package.json b/packages/ui/package.json index f57e444..af77476 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -17,7 +17,6 @@ "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-slot": "^1.1.2", "clsx": "^2.1.1", - "lucide-react": "0.475.0", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^3.0.1", @@ -33,6 +32,7 @@ "@workspace/eslint-config": "workspace:*", "@workspace/typescript-config": "workspace:*", "class-variance-authority": "^0.7.1", + "lucide-react": "0.477.0", "tailwindcss": "^4", "typescript": "^5" } diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx index cc77445..e6a7169 100644 --- a/packages/ui/src/components/button.tsx +++ b/packages/ui/src/components/button.tsx @@ -5,54 +5,44 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@workspace/ui/lib/utils'; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0", - { - variants: { - variant: { - default: - 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90', - destructive: - 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90', - outline: - 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground', - secondary: - 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', - }, - size: { - default: 'h-9 px-4 py-2 has-[>svg]:px-3', - sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5', - lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', - icon: 'size-9', - }, - }, - defaultVariants: { - variant: 'default', - size: 'default', - }, - }, + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0", + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90', + destructive: 'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90', + outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', + }, + size: { + default: 'h-9 px-4 py-2 has-[>svg]:px-3', + sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5', + lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', + icon: 'size-9', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, ); function Button({ - className, - variant, - size, - asChild = false, - ...props + className, + variant, + size, + asChild = false, + ...props }: React.ComponentProps<'button'> & - VariantProps & { - asChild?: boolean; - }) { - const Comp = asChild ? Slot : 'button'; + VariantProps & { + asChild?: boolean; + }) { + const Comp = asChild ? Slot : 'button'; - return ( - - ); + return ; } export { Button, buttonVariants }; diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx index 293cfa8..d9b3830 100644 --- a/packages/ui/src/components/dropdown-menu.tsx +++ b/packages/ui/src/components/dropdown-menu.tsx @@ -6,252 +6,214 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; import { cn } from '@workspace/ui/lib/utils'; -function DropdownMenu({ - ...props -}: React.ComponentProps) { - return ; +function DropdownMenu({ ...props }: React.ComponentProps) { + return ; } -function DropdownMenuPortal({ - ...props -}: React.ComponentProps) { - return ( - - ); +function DropdownMenuPortal({ ...props }: React.ComponentProps) { + return ; } -function DropdownMenuTrigger({ - ...props -}: React.ComponentProps) { - return ( - - ); +function DropdownMenuTrigger({ ...props }: React.ComponentProps) { + return ; } function DropdownMenuContent({ - className, - sideOffset = 4, - ...props + className, + sideOffset = 4, + ...props }: React.ComponentProps) { - return ( - - - - ); + return ( + + + + ); } -function DropdownMenuGroup({ - ...props -}: React.ComponentProps) { - return ( - - ); +function DropdownMenuGroup({ ...props }: React.ComponentProps) { + return ; } function DropdownMenuItem({ - className, - inset, - variant = 'default', - ...props + className, + inset, + variant = 'default', + ...props }: React.ComponentProps & { - inset?: boolean; - variant?: 'default' | 'destructive'; + inset?: boolean; + variant?: 'default' | 'destructive'; }) { - return ( - - ); + return ( + + ); } function DropdownMenuCheckboxItem({ - className, - children, - checked, - ...props + className, + children, + checked, + ...props }: React.ComponentProps) { - return ( - - - - - - - {children} - - ); + return ( + + + + + + + {children} + + ); } -function DropdownMenuRadioGroup({ - ...props -}: React.ComponentProps) { - return ( - - ); +function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { + return ; } function DropdownMenuRadioItem({ - className, - children, - ...props + className, + children, + ...props }: React.ComponentProps) { - return ( - - - - - - - {children} - - ); + return ( + + + + + + + {children} + + ); } function DropdownMenuLabel({ - className, - inset, - ...props + className, + inset, + ...props }: React.ComponentProps & { - inset?: boolean; + inset?: boolean; }) { - return ( - - ); + return ( + + ); } -function DropdownMenuSeparator({ - className, - ...props -}: React.ComponentProps) { - return ( - - ); +function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { + return ( + + ); } -function DropdownMenuShortcut({ - className, - ...props -}: React.ComponentProps<'span'>) { - return ( - - ); +function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) { + return ( + + ); } -function DropdownMenuSub({ - ...props -}: React.ComponentProps) { - return ; +function DropdownMenuSub({ ...props }: React.ComponentProps) { + return ; } function DropdownMenuSubTrigger({ - className, - inset, - children, - ...props + className, + inset, + children, + ...props }: React.ComponentProps & { - inset?: boolean; + inset?: boolean; }) { - return ( - - {children} - - - ); + return ( + + {children} + + + ); } function DropdownMenuSubContent({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( - - ); + return ( + + ); } export { - DropdownMenu, - DropdownMenuPortal, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuLabel, - DropdownMenuItem, - DropdownMenuCheckboxItem, - DropdownMenuRadioGroup, - DropdownMenuRadioItem, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuSub, - DropdownMenuSubTrigger, - DropdownMenuSubContent, + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, }; diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts index 2819a83..7637fb9 100644 --- a/packages/ui/src/lib/utils.ts +++ b/packages/ui/src/lib/utils.ts @@ -2,5 +2,5 @@ import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return twMerge(clsx(inputs)); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de116d7..a4ed8e6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,8 +30,8 @@ importers: specifier: workspace:* version: link:../../packages/ui lucide-react: - specifier: 0.475.0 - version: 0.475.0(react@19.0.0) + specifier: 0.477.0 + version: 0.477.0(react@19.0.0) next: specifier: 15.2.0 version: 15.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -122,9 +122,6 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 - lucide-react: - specifier: 0.475.0 - version: 0.475.0(react@19.0.0) react: specifier: ^19.0.0 version: 19.0.0 @@ -165,6 +162,9 @@ importers: class-variance-authority: specifier: ^0.7.1 version: 0.7.1 + lucide-react: + specifier: 0.477.0 + version: 0.477.0(react@19.0.0) tailwindcss: specifier: ^4 version: 4.0.6 @@ -1855,8 +1855,8 @@ packages: resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==} engines: {node: '>=12'} - lucide-react@0.475.0: - resolution: {integrity: sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==} + lucide-react@0.477.0: + resolution: {integrity: sha512-yCf7aYxerFZAbd8jHJxjwe1j7jEMPptjnaOqdYeirFnEy85cNR3/L+o0I875CYFYya+eEVzZSbNuRk8BZPDpVw==} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -4475,7 +4475,7 @@ snapshots: lru-cache@7.18.3: {} - lucide-react@0.475.0(react@19.0.0): + lucide-react@0.477.0(react@19.0.0): dependencies: react: 19.0.0