Merge pull request #3805 from udecode/sync-shadcn2

Sync shadcn

.eslintrc.cjs

@@ -36,6 +36,14 @@ module.exports = {
     '**/scripts/*.mts',
   ],
   overrides: [
+    {
+      files: ['**/registry/default/**/*'],
+      rules: {
+        'jsx-a11y/iframe-has-title': 'off',
+        'jsx-a11y/media-has-caption': 'off',
+        'react/jsx-no-comment-textnodes': 'off',
+      },
+    },
     {
       files: ['*.ts', '*.tsx', '*.mts'],
       parserOptions: {

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

@@ -11,6 +11,14 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## November 2024 #16
 
+### November 21 #16.8
+
+Shadcn sync:
+
+- `input`: add `text-base md:text-sm`
+- `textarea`: add `text-base md:text-sm`
+- `editor`(`ai`, `aiChat` variants): add `text-base md:text-sm`
+
 ### November 14 #16.7
 
 - `toolbar`: Add `ToolbarSplitButton`, `ToolbarSplitButtonPrimary`, `ToolbarSplitButtonSecondary`

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

@@ -32,6 +32,7 @@ Options:
   -f, --force       force overwrite of existing components.json. (default: false)
   -y, --yes         skip confirmation prompt. (default: false)
   -c, --cwd <cwd>   the working directory. defaults to the current directory.
+  -a, --all         add all available components. (default: false)
   -n, --name <name> registry name. (default: plate)
   -s, --silent      mute output (default: false)
   --src-dir         use the src directory when creating a new project (default: false)
@@ -118,20 +119,21 @@ Here's an example `components.json` file configured for [shadcn/ui](https://ui.s
   "style": "default",
   "rsc": true,
   "tsx": true,
-  "aliases": {
-    "components": "@/components",
-    "hooks": "@/hooks",
-    "lib": "@/lib",
-    "ui": "@/components/ui",
-    "utils": "@/lib/utils"
-  },
   "tailwind": {
     "baseColor": "slate",
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "cssVariables": true,
     "prefix": ""
   },
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils"
+  },
+  "iconLibrary": "lucide",
   "registries": {
     "plate": {
       "aliases": {

apps/www/content/docs/components/dark-mode/next.mdx

@@ -22,9 +22,11 @@ npm install next-themes
 
 import * as React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { type ThemeProviderProps } from 'next-themes/dist/types';
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
 ```

apps/www/content/docs/components/installation/manual.mdx

@@ -21,6 +21,8 @@ npm install slate slate-dom slate-react slate-history slate-hyperscript @udecode
 
 ### Configure path aliases
 
+Configure the path aliases in your `tsconfig.json` file.
+
 ```json {3-6} title="tsconfig.json"
 {
   "compilerOptions": {
@@ -42,28 +44,29 @@ npm install slate slate-dom slate-react slate-history slate-hyperscript @udecode
 
 ### Configure components.json
 
-Create [components.json](/docs/components/components-json) at the root of your project, then add the following:
+Create a [components.json](/docs/components/components-json) in the root of your project.
 
 ```json
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "default",
   "rsc": true,
   "tsx": true,
-  "aliases": {
-    "components": "@/components",
-    "hooks": "@/hooks",
-    "lib": "@/lib",
-    "ui": "@/components/ui",
-    "utils": "@/lib/utils"
-  },
   "tailwind": {
     "baseColor": "slate",
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "cssVariables": true,
     "prefix": ""
   },
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils"
+  },
+  "iconLibrary": "lucide",
   "registries": {
     "plate": {
       "aliases": {

apps/www/next.config.ts

@@ -26,6 +26,10 @@ const nextConfig = async (phase: string) => {
       ],
     },
 
+    outputFileTracingIncludes: {
+      '/blocks/*': ['./registry/**/*'],
+    },
+
     // Configure domains to allow for optimized image loading.
     // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mod
     reactStrictMode: true,

apps/www/package.json

@@ -144,7 +144,7 @@
     "match-sorter": "6.3.4",
     "next": "15.0.3",
     "next-contentlayer2": "^0.4.6",
-    "next-themes": "^0.3.0",
+    "next-themes": "^0.4.3",
     "nuqs": "^2.0.3",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
@@ -175,7 +175,7 @@
     "unist-util-visit": "^5.0.0",
     "uploadthing": "7.2.0",
     "use-file-picker": "2.1.2",
-    "vaul": "0.9.0"
+    "vaul": "1.1.1"
   },
   "devDependencies": {
     "@shikijs/compat": "^1.17.5",

apps/www/public/r/icons/index.json

@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}

apps/www/public/r/styles/default/basic-elements-demo.json

@@ -16,7 +16,7 @@
       "type": "registry:example"
     },
     {
-      "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n  <fragment>\n    <hh2>Blocks</hh2>\n    <hp>\n      Easily create headings of various levels, from H1 to H6, to structure your\n      content and make it more organized.\n    </hp>\n    <hblockquote>\n      Create blockquotes to emphasize important information or highlight quotes\n      from external sources.\n    </hblockquote>\n    <hcodeblock lang=\"javascript\">\n      {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}\n      <hcodeline>// Use code blocks to showcase code snippets</hcodeline>\n      <hcodeline>{`function greet() {`}</hcodeline>\n      <hcodeline>{`  console.info('Hello World!');`}</hcodeline>\n      <hcodeline>{`}`}</hcodeline>\n    </hcodeblock>\n  </fragment>\n);\n",
+      "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n  <fragment>\n    <hh2>Blocks</hh2>\n    <hp>\n      Easily create headings of various levels, from H1 to H6, to structure your\n      content and make it more organized.\n    </hp>\n    <hblockquote>\n      Create blockquotes to emphasize important information or highlight quotes\n      from external sources.\n    </hblockquote>\n    <hcodeblock lang=\"javascript\">\n      <hcodeline>// Use code blocks to showcase code snippets</hcodeline>\n      <hcodeline>{`function greet() {`}</hcodeline>\n      <hcodeline>{`  console.info('Hello World!');`}</hcodeline>\n      <hcodeline>{`}`}</hcodeline>\n    </hcodeblock>\n  </fragment>\n);\n",
       "path": "example/values/basic-elements-value.tsx",
       "target": "components/basic-elements-value.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/basic-nodes-demo.json

@@ -26,7 +26,7 @@
       "type": "registry:example"
     },
     {
-      "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n  <fragment>\n    <hh2>Blocks</hh2>\n    <hp>\n      Easily create headings of various levels, from H1 to H6, to structure your\n      content and make it more organized.\n    </hp>\n    <hblockquote>\n      Create blockquotes to emphasize important information or highlight quotes\n      from external sources.\n    </hblockquote>\n    <hcodeblock lang=\"javascript\">\n      {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}\n      <hcodeline>// Use code blocks to showcase code snippets</hcodeline>\n      <hcodeline>{`function greet() {`}</hcodeline>\n      <hcodeline>{`  console.info('Hello World!');`}</hcodeline>\n      <hcodeline>{`}`}</hcodeline>\n    </hcodeblock>\n  </fragment>\n);\n",
+      "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n  <fragment>\n    <hh2>Blocks</hh2>\n    <hp>\n      Easily create headings of various levels, from H1 to H6, to structure your\n      content and make it more organized.\n    </hp>\n    <hblockquote>\n      Create blockquotes to emphasize important information or highlight quotes\n      from external sources.\n    </hblockquote>\n    <hcodeblock lang=\"javascript\">\n      <hcodeline>// Use code blocks to showcase code snippets</hcodeline>\n      <hcodeline>{`function greet() {`}</hcodeline>\n      <hcodeline>{`  console.info('Hello World!');`}</hcodeline>\n      <hcodeline>{`}`}</hcodeline>\n    </hcodeblock>\n  </fragment>\n);\n",
       "path": "example/values/basic-elements-value.tsx",
       "target": "components/basic-elements-value.tsx",
       "type": "registry:example"

apps/www/public/r/styles/default/button.json

@@ -10,7 +10,7 @@
   },
   "files": [
     {
-      "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      isMenu: {\n        true: 'w-full cursor-pointer justify-start',\n      },\n      size: {\n        icon: 'size-[28px] rounded-md px-1.5',\n        lg: 'h-10 rounded-md px-4',\n        md: 'h-8 px-3 text-sm',\n        none: '',\n        sm: 'h-[28px] rounded-md px-2.5',\n        xs: 'h-8 rounded-md px-3 text-xs',\n      },\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        inlineLink: 'text-base text-primary underline underline-offset-4',\n        link: 'text-primary underline-offset-4 hover:underline',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      },\n    },\n  }\n);\n\nexport const Button = withRef<\n  'button',\n  {\n    asChild?: boolean;\n  } & VariantProps<typeof buttonVariants>\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(buttonVariants({ className, isMenu, size, variant }))}\n      {...props}\n    />\n  );\n});\n",
+      "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    defaultVariants: {\n      size: 'sm',\n      variant: 'default',\n    },\n    variants: {\n      isMenu: {\n        true: 'w-full cursor-pointer justify-start',\n      },\n      size: {\n        icon: 'size-[28px] rounded-md px-1.5',\n        lg: 'h-9 rounded-md px-4',\n        md: 'h-8 px-3 text-sm',\n        none: '',\n        sm: 'h-[28px] rounded-md px-2.5',\n        xs: 'h-8 rounded-md px-3 text-xs',\n      },\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        inlineLink: 'text-base text-primary underline underline-offset-4',\n        link: 'text-primary underline-offset-4 hover:underline',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n      },\n    },\n  }\n);\n\nexport const Button = withRef<\n  'button',\n  {\n    asChild?: boolean;\n  } & VariantProps<typeof buttonVariants>\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(buttonVariants({ className, isMenu, size, variant }))}\n      {...props}\n    />\n  );\n});\n",
       "path": "plate-ui/button.tsx",
       "target": "components/plate-ui/button.tsx",
       "type": "registry:ui"