chore(release): version packages (#2420)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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/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/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/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

@@ -70,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/resizable.mdx

@@ -110,7 +110,7 @@ import {
 
 export default function Example() {
   return (
-    <ResizablePanelGroup direction="vertical">
+    <ResizablePanelGroup direction="horizontal">
       <ResizablePanel>One</ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel>Two</ResizablePanel>

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

apps/www/public/registry/styles/default/resizable.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "resizable.tsx",
-      "content": "import { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/new-york/resizable.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "resizable.tsx",
-      "content": "import { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
+      "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
     }
   ],
   "type": "components:ui"

apps/www/registry/default/example/toggle-demo.tsx

@@ -4,7 +4,7 @@ import { Toggle } from "@/registry/default/ui/toggle"
 
 export default function ToggleDemo() {
   return (
-    <Toggle aria-label="Toggle italic">
+    <Toggle aria-label="Toggle bold">
       <Bold className="h-4 w-4" />
     </Toggle>
   )

apps/www/registry/default/example/toggle-disabled.tsx

@@ -4,7 +4,7 @@ import { Toggle } from "@/registry/default/ui/toggle"
 
 export default function ToggleDisabled() {
   return (
-    <Toggle aria-label="Toggle italic" disabled>
+    <Toggle aria-label="Toggle underline" disabled>
       <Underline className="h-4 w-4" />
     </Toggle>
   )

apps/www/registry/default/example/toggle-group-demo.tsx

@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
         <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>

apps/www/registry/default/example/toggle-group-disabled.tsx

@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
         <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>

apps/www/registry/default/example/toggle-group-lg.tsx

@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
         <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>

apps/www/registry/default/example/toggle-group-outline.tsx

@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
         <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>

apps/www/registry/default/example/toggle-group-single.tsx

@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
         <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>

apps/www/registry/default/example/toggle-group-sm.tsx

@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
       <ToggleGroupItem value="italic" aria-label="Toggle italic">
         <Italic className="h-4 w-4" />
       </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
         <Underline className="h-4 w-4" />
       </ToggleGroupItem>
     </ToggleGroup>

apps/www/registry/default/example/typography-large.tsx

@@ -1,5 +1,3 @@
 export default function TypographyLarge() {
-  return (
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
-    <div className="text-lg font-semibold">Are you sure absolutely sure?</div>
-  )
 }

apps/www/registry/default/ui/carousel.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import useEmblaCarousel, {
   type EmblaCarouselType as CarouselApi,

apps/www/registry/default/ui/resizable.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 

apps/www/registry/new-york/example/cards/create-account.tsx

@@ -26,7 +26,7 @@ export function CardsCreateAccount() {
         <div className="grid grid-cols-2 gap-6">
           <Button variant="outline">
             <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
+            GitHub
           </Button>
           <Button variant="outline">
             <Icons.google className="mr-2 h-4 w-4" />

apps/www/registry/new-york/example/typography-large.tsx

@@ -1,5 +1,3 @@
 export default function TypographyLarge() {
-  return (
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
-    <div className="text-lg font-semibold">Are you sure absolutely sure?</div>
-  )
 }

apps/www/registry/new-york/ui/carousel.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
 import useEmblaCarousel, {

apps/www/registry/new-york/ui/resizable.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { DragHandleDots2Icon } from "@radix-ui/react-icons"
 import * as ResizablePrimitive from "react-resizable-panels"
 

apps/www/registry/registry.ts

@@ -60,6 +60,7 @@ const ui: Registry = [
     files: ["ui/carousel.tsx"],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
+    devDependencies: ["embla-carousel"],
   },
   {
     name: "checkbox",

apps/www/registry/schema.ts

@@ -4,6 +4,7 @@ export const registrySchema = z.array(
   z.object({
     name: z.string(),
     dependencies: z.array(z.string()).optional(),
+    devDependencies: z.array(z.string()).optional(),
     registryDependencies: z.array(z.string()).optional(),
     files: z.array(z.string()),
     type: z.enum([

packages/cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @shadcn/ui
 
+## 0.7.0
+
+### Minor Changes
+
+- [#2419](https://github.com/shadcn-ui/ui/pull/2419) [`7640ef7`](https://github.com/shadcn-ui/ui/commit/7640ef7bbc5fea280a8b5227a2455bb840478573) Thanks [@shadcn](https://github.com/shadcn)! - add support for devDependencies
+
 ## 0.6.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"

packages/cli/src/commands/add.ts

@@ -180,9 +180,10 @@ export const add = new Command()
           await fs.writeFile(filePath, content)
         }
 
+        const packageManager = await getPackageManager(cwd)
+
         // Install dependencies.
         if (item.dependencies?.length) {
-          const packageManager = await getPackageManager(cwd)
           await execa(
             packageManager,
             [
@@ -194,6 +195,21 @@ export const add = new Command()
             }
           )
         }
+
+        // Install devDependencies.
+        if (item.devDependencies?.length) {
+          await execa(
+            packageManager,
+            [
+              packageManager === "npm" ? "install" : "add",
+              "-D",
+              ...item.devDependencies,
+            ],
+            {
+              cwd,
+            }
+          )
+        }
       }
       spinner.succeed(`Done.`)
     } catch (error) {

packages/cli/src/utils/registry/schema.ts

@@ -4,6 +4,7 @@ import * as z from "zod"
 export const registryItemSchema = z.object({
   name: z.string(),
   dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
   registryDependencies: z.array(z.string()).optional(),
   files: z.array(z.string()),
   type: z.enum(["components:ui", "components:component", "components:example"]),