Merge branch 'main' into tailwind-ts

.changeset/wet-eagles-leave.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": patch
+---
+
+update zod imports

.github/workflows/issue-stale.yml

@@ -0,0 +1,25 @@
+# Adapted from vercel/next.js
+name: Issue Stale
+on:
+  workflow_dispatch:
+  schedule:
+    # This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_*
+    - cron: "40 23 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'shadcn-ui'
+    steps:
+      - uses: actions/stale@v4
+        id: stale-no-repro
+        name: "Close stale issues with no reproduction"
+        with:
+          repo-token: ${{ secrets.STALE_TOKEN }}
+          close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you."
+          days-before-issue-close: 1
+          days-before-issue-stale: 15
+          days-before-pr-close: -1
+          days-before-pr-stale: -1
+          exempt-issue-labels: "roadmap,next,bug"
+          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close

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/forms/account/account-form.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { format } from "date-fns"
 import { useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"

apps/www/app/examples/forms/appearance/appearance-form.tsx

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { ChevronDownIcon } from "@radix-ui/react-icons"
 import { useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/registry/new-york/ui/button"
@@ -67,7 +67,7 @@ export function AppearanceForm() {
                   <select
                     className={cn(
                       buttonVariants({ variant: "outline" }),
-                      "w-[200px] appearance-none bg-transparent font-normal"
+                      "w-[200px] appearance-none font-normal"
                     )}
                     {...field}
                   >

apps/www/app/examples/forms/display/display-form.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Checkbox } from "@/registry/new-york/ui/checkbox"

apps/www/app/examples/forms/notifications/notifications-form.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Checkbox } from "@/registry/new-york/ui/checkbox"

apps/www/app/examples/forms/profile-form.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useFieldArray, useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"

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/form.mdx

@@ -128,7 +128,7 @@ Define the shape of your form using a Zod schema. You can read more about using
 ```tsx showLineNumbers {3,5-7}
 "use client"
 
-import * as z from "zod"
+import { z } from "zod"
 
 const formSchema = z.object({
   username: z.string().min(2).max(50),
@@ -144,7 +144,7 @@ Use the `useForm` hook from `react-hook-form` to create a form.
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 const formSchema = z.object({
   username: z.string().min(2, {
@@ -181,7 +181,7 @@ We can now use the `<Form />` components to build our form.
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import * as z from "zod"
+import { z } from "zod"
 
 import { Button } from "@/components/ui/button"
 import {

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>
   )
 }
 ```