feat: Update shadcn ui 4

.github/workflows/build-lint-test.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 10.18.3
+          version: 11.1.3
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/bump_publish.yml

@@ -52,7 +52,7 @@ jobs:
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 10.18.3
+          version: 11.1.3
 
       - name: Install Node.js
         uses: actions/setup-node@v4

apps/api/package.json

@@ -15,11 +15,11 @@
   },
   "dependencies": {
     "@hono/zod-openapi": "^1.3.0",
-    "@hono/zod-validator": "^0.7.6",
+    "@hono/zod-validator": "^0.8.0",
     "@vitnode/core": "workspace:*",
     "drizzle-kit": "^0.31.10",
     "drizzle-orm": "^0.45.2",
-    "hono": "^4.12.16",
+    "hono": "^4.12.21",
     "next-intl": "^4.11.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
@@ -36,9 +36,9 @@
     "@vitnode/nodemailer": "workspace:*",
     "dotenv": "^17.4.2",
     "eslint": "^10.2.1",
-    "react-email": "^6.0.5",
+    "react-email": "^6.1.5",
     "tsc-alias": "^1.8.16",
-    "tsx": "^4.21.0",
+    "tsx": "^4.22.3",
     "typescript": "^6.0.3"
   }
 }

apps/api/src/locales/@vitnode/core/en.json

@@ -1,6 +1,15 @@
 {
   "core": {
     "global": {
+      "close": "Close",
+      "confirm": "Confirm",
+      "previous": "Previous",
+      "next": "Next",
+      "current_page": "Current page",
+      "go_to_page": "Go to page",
+      "previous_page": "Previous page",
+      "next_page": "Next page",
+      "remove": "Remove",
       "editor": {
         "undo": "Undo",
         "redo": "Redo",

apps/docs/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "base-nova",
+  "style": "radix-vega",
   "rsc": true,
   "tsx": true,
   "tailwind": {

apps/docs/content/docs/dev/email/components/button.mdx

@@ -5,15 +5,15 @@ description: A button or link component for emails.
 
 ## Preview
 
-import { ImgDocs } from '@/components/fumadocs/img';
-import buttonPreviewImg from './button-preview.png';
+import { ImgDocs } from "@/components/fumadocs/img";
+import buttonPreviewImg from "./button-preview.png";
 
 <ImgDocs src={buttonPreviewImg} alt="Buttons Preview" />
 
 ## Usage
 
 ```ts
-import { EmailButton } from '@vitnode/core/emails/ui/button';
+import { EmailButton } from "@vitnode/core/emails/ui/button";
 ```
 
 ```tsx
@@ -22,24 +22,24 @@ import { EmailButton } from '@vitnode/core/emails/ui/button';
 
 ## Props
 
-import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { TypeTable } from "fumadocs-ui/components/type-table";
 
 <TypeTable
   type={{
     variant: {
-      description: 'The variant of the button.',
-      type: 'default | secondary | outline | ghost | link | destructive | destructiveGhost',
-      default: 'default',
+      description: "The variant of the button.",
+      type: "default | secondary | outline | ghost | link | destructive | destructiveGhost",
+      default: "default",
     },
     size: {
-      description: 'The size of the button.',
-      type: 'default | sm | lg',
-      default: 'default',
+      description: "The size of the button.",
+      type: "default | sm | lg",
+      default: "default",
     },
     href: {
-      description: 'The URL the button links to.',
-      type: 'string',
-      default: '',
+      description: "The URL the button links to.",
+      type: "string",
+      default: "",
     },
   }}
 />

apps/docs/content/docs/ui/auto-form.mdx

@@ -15,6 +15,8 @@ import { AutoFormCheckbox } from "@vitnode/core/components/form/fields/checkbox"
 import { AutoFormInput } from "@vitnode/core/components/form/fields/input";
 import { AutoFormSelect } from "@vitnode/core/components/form/fields/select";
 import { AutoFormTextarea } from "@vitnode/core/components/form/fields/textarea";
+import { InputGroupAddon } from "@vitnode/core/components/ui/input-group";
+import { Search } from "lucide-react";
 import { z } from "zod";
 ```
 
@@ -29,6 +31,7 @@ const formSchema = z.object({
     message: "You must accept the terms and conditions",
   }),
   description: z.string().min(10, "Description must be at least 10 characters"),
+  search: z.string().optional(),
 });
 ```
 
@@ -84,6 +87,17 @@ const formSchema = z.object({
         />
       ),
     },
+    {
+      id: "search",
+      component: props => (
+        <AutoFormInput {...props} placeholder="Search..." label="Search">
+          <InputGroupAddon>
+            <Search />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+        </AutoFormInput>
+      ),
+    },
   ]}
   formSchema={formSchema}
 />

apps/docs/content/docs/ui/button.mdx

@@ -10,8 +10,8 @@ description: A button component for triggering actions in your application.
 ## Usage
 
 ```ts
-import { Home } from 'lucide-react';
-import { Button } from '@vitnode/core/components/ui/button';
+import { Home } from "lucide-react";
+import { Button } from "@vitnode/core/components/ui/button";
 ```
 
 ```tsx
@@ -23,19 +23,19 @@ import { Button } from '@vitnode/core/components/ui/button';
 
 ## Props
 
-import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { TypeTable } from "fumadocs-ui/components/type-table";
 
 <TypeTable
   type={{
     variant: {
-      description: 'The variant of the button.',
-      type: 'default | secondary | outline | ghost | link | destructive| destructiveGhost',
-      default: 'default',
+      description: "The variant of the button.",
+      type: "default | secondary | outline | ghost | link | destructive",
+      default: "default",
     },
     size: {
-      description: 'The size of the button.',
-      type: 'default | sm | lg | icon',
-      default: 'default',
+      description: "The size of the button.",
+      type: "default | sm | lg | icon",
+      default: "default",
     },
   }}
 />

apps/docs/content/docs/ui/input-group.mdx

@@ -0,0 +1,113 @@
+---
+title: Input Group
+description: Component used for grouping related input fields together
+---
+
+## Preview
+
+<Preview name="input-group" />
+
+## Usage
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs items={['Auto Form', 'Manual']}>
+  <Tab value="Auto Form">
+```ts
+import { z } from 'zod';
+import { AutoForm } from '@vitnode/core/components/form/auto-form';
+import { AutoFormInput } from '@vitnode/core/components/form/fields/input';
+import { AutoFormTextarea } from '@vitnode/core/components/form/fields/textarea';
+import { InputGroupAddon, InputGroupText } from "@vitnode/core/components/ui/input-group";
+```
+
+```ts
+const formSchema = z.object({
+  search: z.string().min(1, "Search is required"),
+  description: z
+    .string()
+    .max(500, "Description must be less than 500 characters"),
+});
+```
+
+```tsx
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: "search",
+      component: props => (
+        <AutoFormInput {...props} placeholder="Search..." label="Search">
+          <InputGroupAddon>
+            <Search />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+        </AutoFormInput>
+      ),
+    },
+    {
+      id: "description",
+      component: props => (
+        <AutoFormTextarea
+          {...props}
+          className="min-h-24 resize-none"
+          placeholder="I'm having an issue with the login button on mobile."
+          rows={6}
+        >
+          <InputGroupAddon align="block-end">
+            <InputGroupText className="tabular-nums">
+              {props.field.value?.toString().length ?? 0} of 500 characters
+            </InputGroupText>
+          </InputGroupAddon>
+        </AutoFormTextarea>
+      ),
+    },
+  ]}
+/>
+```
+
+  </Tab>
+
+  <Tab value="Manual">
+```ts
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@vitnode/core/components/ui/input-group";
+import { Search } from "lucide-react";
+```
+
+```tsx
+<div className="flex flex-col gap-8">
+  <InputGroup className="max-w-xs">
+    <InputGroupInput placeholder="Search..." />
+    <InputGroupAddon>
+      <Search />
+    </InputGroupAddon>
+    <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+  </InputGroup>
+
+  <InputGroup>
+    <InputGroupTextarea
+      className="min-h-24 resize-none"
+      placeholder="I'm having an issue with the login button on mobile."
+      rows={6}
+    />
+    <InputGroupAddon align="block-end">
+      <InputGroupText className="tabular-nums">
+        0 of 500 characters
+      </InputGroupText>
+    </InputGroupAddon>
+  </InputGroup>
+</div>
+```
+
+  </Tab>
+</Tabs>
+
+## API Reference
+
+[Shadcn UI - Input Group](https://ui.shadcn.com/docs/components/radix/input-group#api-reference)

apps/docs/content/docs/ui/meta.json

@@ -18,6 +18,7 @@
     "combobox-async",
     "combobox",
     "input",
+    "input-group",
     "radio-group",
     "select",
     "switch",

apps/docs/package.json

@@ -23,15 +23,15 @@
   },
   "dependencies": {
     "@hono/zod-openapi": "^1.3.0",
-    "@hono/zod-validator": "^0.7.6",
+    "@hono/zod-validator": "^0.8.0",
     "@vitnode/blog": "workspace:*",
     "@vitnode/core": "workspace:*",
     "drizzle-kit": "^0.31.10",
     "drizzle-orm": "^0.45.2",
     "fumadocs-core": "^16.8.5",
-    "fumadocs-mdx": "^14.3.2",
+    "fumadocs-mdx": "^15.0.6",
     "fumadocs-ui": "^16.8.5",
-    "hono": "^4.12.16",
+    "hono": "^4.12.21",
     "lucide-react": "^1.14.0",
     "motion": "^12.38.0",
     "next": "^16.2.4",
@@ -41,6 +41,7 @@
     "react-dom": "^19.2.5",
     "react-hook-form": "^7.74.0",
     "react-use": "^17.6.0",
+    "shadcn": "^4.7.0",
     "sonner": "^2.0.7"
   },
   "devDependencies": {
@@ -60,7 +61,7 @@
     "class-variance-authority": "^0.7.1",
     "eslint": "^10.2.1",
     "postcss": "^8.5.12",
-    "react-email": "^6.0.5",
+    "react-email": "^6.1.5",
     "shiki": "^4.0.2",
     "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.4.0",