Merge branch 'main' into feat/otp-input

apps/www/app/examples/authentication/components/user-auth-form.tsx

@@ -64,7 +64,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
         ) : (
           <Icons.gitHub className="mr-2 h-4 w-4" />
         )}{" "}
-        Github
+        GitHub
       </Button>
     </div>
   )

apps/www/app/examples/mail/components/account-switcher.tsx

@@ -32,9 +32,9 @@ export function AccountSwitcher({
     <Select defaultValue={selectedAccount} onValueChange={setSelectedAccount}>
       <SelectTrigger
         className={cn(
-          "flex flex-1 items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+          "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
           isCollapsed &&
-            "flex h-8 w-8 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden"
+            "flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden"
         )}
         aria-label="Select account"
       >

apps/www/app/examples/mail/components/mail-display.tsx

@@ -236,7 +236,11 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                     <Switch id="mute" aria-label="Mute thread" /> Mute this
                     thread
                   </Label>
-                  <Button size="sm" className="ml-auto">
+                  <Button
+                    onClick={(e) => e.preventDefault()}
+                    size="sm"
+                    className="ml-auto"
+                  >
                     Send
                   </Button>
                 </div>

apps/www/app/examples/mail/components/mail.tsx

@@ -78,30 +78,12 @@ export function Mail({
               collapsed
             )}`
           }}
-          className={cn(isCollapsed && "transition-all duration-300 ease-in-out")}
+          className={cn(isCollapsed && "min-w-[50px] transition-all duration-300 ease-in-out")}
         >
-          <div className="flex items-center p-2">
-            <div
-            className="w-full"
-              // className={cn("w-full flex-1", isCollapsed ? "w-full" : "w-[80%]")}
-            >
-              <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
-            </div>
+          <div className={cn("flex h-[52px] items-center justify-center", isCollapsed ? 'h-[52px]': 'px-2')}>
+            <AccountSwitcher isCollapsed={isCollapsed} accounts={accounts} />
           </div>
           <Separator />
-          <div className={cn(isCollapsed ? "block" : "hidden")}>
-            <Nav
-              isCollapsed={isCollapsed}
-              links={[
-                {
-                  title: "Compose",
-                  label: "",
-                  icon: PenBox,
-                  variant: "ghost",
-                },
-              ]}
-            />
-          </div>
           <Nav
             isCollapsed={isCollapsed}
             links={[

apps/www/app/examples/mail/components/nav.tsx

@@ -27,7 +27,7 @@ export function Nav({ links, isCollapsed }: NavProps) {
       data-collapsed={isCollapsed}
       className="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2"
     >
-      <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:px-2">
+      <nav className="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
         {links.map((link, index) =>
           isCollapsed ? (
             <Tooltip key={index} delayDuration={0}>
@@ -36,9 +36,9 @@ export function Nav({ links, isCollapsed }: NavProps) {
                   href="#"
                   className={cn(
                     buttonVariants({ variant: link.variant, size: "icon" }),
-                    "h-8 w-8",
+                    "h-9 w-9",
                     link.variant === "default" &&
-                      "dark:bg-muted dark:text-muted-foreground"
+                      "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
                   )}
                 >
                   <link.icon className="h-4 w-4" />
@@ -60,7 +60,8 @@ export function Nav({ links, isCollapsed }: NavProps) {
               href="#"
               className={cn(
                 buttonVariants({ variant: link.variant, size: "sm" }),
-                link.variant === "default" && "dark:bg-muted dark:text-white",
+                link.variant === "default" &&
+                  "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
                 "justify-start"
               )}
             >

apps/www/app/examples/playground/components/preset-actions.tsx

@@ -95,7 +95,7 @@ export function PresetActions() {
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
             <AlertDialogDescription>
               This action cannot be undone. This preset will no longer be
               accessible by you or others you&apos;ve shared it with.

apps/www/app/examples/playground/data/models.ts

@@ -36,7 +36,7 @@ export const models: Model<ModelType>[] = [
     strengths: "Moderate classification, semantic search",
   },
   {
-    id: " be638fb1-973b-4471-a49c-290325085802",
+    id: "be638fb1-973b-4471-a49c-290325085802",
     name: "text-ada-001",
     description:
       "Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.",

apps/www/components/command-menu.tsx

@@ -32,7 +32,16 @@ export function CommandMenu({ ...props }: DialogProps) {
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
         e.preventDefault()
         setOpen((open) => !open)
       }

apps/www/components/mobile-nav.tsx

@@ -94,6 +94,11 @@ export function MobileNav() {
                             className="text-muted-foreground"
                           >
                             {item.title}
+                            {item.label && (
+                              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                                {item.label}
+                              </span>
+                            )}
                           </MobileLink>
                         ) : (
                           item.title

apps/www/content/docs/components-json.mdx

@@ -173,3 +173,17 @@ Import alias for your components.
   }
 }
 ```
+
+### aliases.ui
+
+Import alias for `ui` components.
+
+The CLI will use the `aliases.ui` value to determine where to place your `ui` components. Use this config if you want to customize the installation directory for your `ui` components.
+
+```json title="components.json"
+{
+  "aliases": {
+    "ui": "@/app/ui"
+  }
+}
+```

apps/www/content/docs/components/carousel.mdx

@@ -61,7 +61,7 @@ import {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/registry/new-york/ui/carousel"
+} from "@/components/ui/carousel"
 ```
 
 ```tsx

apps/www/content/docs/components/dialog.mdx

@@ -66,7 +66,7 @@ import {
   <DialogTrigger>Open</DialogTrigger>
   <DialogContent>
     <DialogHeader>
-      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
       <DialogDescription>
         This action cannot be undone. This will permanently delete your account
         and remove your data from our servers.
@@ -103,7 +103,7 @@ To activate the `Dialog` component from within a `Context Menu` or `Dropdown Men
   </ContextMenu>
   <DialogContent>
     <DialogHeader>
-      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
       <DialogDescription>
         This action cannot be undone. Are you sure you want to permanently
         delete this file from our servers?

apps/www/content/docs/components/drawer.mdx

@@ -1,6 +1,6 @@
 ---
 title: Drawer
-description: An drawer component for React.
+description: A drawer component for React.
 component: true
 links:
   doc: https://github.com/emilkowalski/vaul
@@ -58,6 +58,7 @@ import {
   DrawerClose,
   DrawerContent,
   DrawerDescription,
+  DrawerFooter,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
@@ -69,7 +70,7 @@ import {
   <DrawerTrigger>Open</DrawerTrigger>
   <DrawerContent>
     <DrawerHeader>
-      <DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
+      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
       <DrawerDescription>This action cannot be undone.</DrawerDescription>
     </DrawerHeader>
     <DrawerFooter>

apps/www/content/docs/components/pagination.mdx

@@ -49,7 +49,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/resizable"
+} from "@/components/ui/pagination"
 ```
 
 ```tsx
@@ -78,7 +78,7 @@ By default the `<PaginationLink />` component will render an `<a />` tag.
 To use the Next.js `<Link />` component, make the following updates to `pagination.tsx`.
 
 ```diff showLineNumbers /typeof Link/ {1}
-+ import { Link } from "next/link"
++ import Link from "next/link"
 
 - type PaginationLinkProps = ... & React.ComponentProps<"a">
 + type PaginationLinkProps = ... & React.ComponentProps<typeof Link>

apps/www/content/docs/components/resizable.mdx

@@ -62,11 +62,11 @@ import {
 ```
 
 ```tsx
-<ResizableGroup direction="horizontal">
+<ResizablePanelGroup direction="horizontal">
   <ResizablePanel>One</ResizablePanel>
   <ResizableHandle />
   <ResizablePanel>Two</ResizablePanel>
-</ResizableGroup>
+</ResizablePanelGroup>
 ```
 
 ## Examples
@@ -86,11 +86,11 @@ import {
 
 export default function Example() {
   return (
-    <ResizableGroup direction="vertical">
+    <ResizablePanelGroup direction="vertical">
       <ResizablePanel>One</ResizablePanel>
       <ResizableHandle />
       <ResizablePanel>Two</ResizablePanel>
-    </ResizableGroup>
+    </ResizablePanelGroup>
   )
 }
 ```
@@ -110,11 +110,11 @@ import {
 
 export default function Example() {
   return (
-    <ResizableGroup direction="vertical">
+    <ResizablePanelGroup direction="horizontal">
       <ResizablePanel>One</ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel>Two</ResizablePanel>
-    </ResizableGroup>
+    </ResizablePanelGroup>
   )
 }
 ```

apps/www/content/docs/components/sheet.mdx

@@ -65,7 +65,7 @@ import {
   <SheetTrigger>Open</SheetTrigger>
   <SheetContent>
     <SheetHeader>
-      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
       <SheetDescription>
         This action cannot be undone. This will permanently delete your account
         and remove your data from our servers.
@@ -92,7 +92,7 @@ You can adjust the size of the sheet using CSS classes:
   <SheetTrigger>Open</SheetTrigger>
   <SheetContent className="w-[400px] sm:w-[540px]">
     <SheetHeader>
-      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
       <SheetDescription>
         This action cannot be undone. This will permanently delete your account
         and remove your data from our servers.

apps/www/content/docs/installation/next.mdx

@@ -31,6 +31,7 @@ Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › app/globals.css
 Do you want to use CSS variables for colors? › no / yes
+Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components
 Configure the import alias for utils: › @/lib/utils