chore(release): version packages (#5709 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Revert "feat: remove npm flags" (#5707 )
2026-06-19 22:01:33 +00:00 · 2024-11-04 17:25:59 +04:00 · 2024-11-04 17:14:08 +04:00 · 2024-11-03 19:27:28 +04:00 · 2024-11-03 14:37:08 +04:00 · 2024-11-03 14:35:04 +04:00
40 changed files with 181 additions and 151 deletions
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -89,7 +89,7 @@ export default async function DocPage({ params }: DocPageProps) {

  return (
    <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-      <div className="mx-auto w-full min-w-0">
+      <div className="mx-auto w-full min-w-0 max-w-3xl">
        <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
          <div className="truncate">Docs</div>
          <ChevronRightIcon className="h-3.5 w-3.5" />
@@ -137,7 +137,7 @@ export default async function DocPage({ params }: DocPageProps) {
        <DocsPager doc={doc} />
      </div>
      <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] pt-4">
+        <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
          <ScrollArea className="h-full pb-10">
            {doc.toc && <DashboardTableOfContents toc={toc} />}
            <OpenInV0Cta className="mt-6 max-w-[80%]" />
--- a/apps/www/app/(app)/docs/layout.tsx
+++ b/apps/www/app/(app)/docs/layout.tsx
@@ -8,7 +8,7 @@ interface DocsLayoutProps {

 export default function DocsLayout({ children }: DocsLayoutProps) {
  return (
-    <div className="border-b">
+    <div className="border-b border-border/40 dark:border-border">
      <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
          <ScrollArea className="h-full py-6 pr-6 lg:py-8">
--- a/apps/www/app/(app)/examples/cards/components/share-document.tsx
+++ b/apps/www/app/(app)/examples/cards/components/share-document.tsx
@@ -41,7 +41,7 @@ export function DemoShareDocument() {
        </div>
        <Separator className="my-4" />
        <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="text-sm font-medium">People with access</div>
          <div className="grid gap-6">
            <div className="flex items-center justify-between space-x-4">
              <div className="flex items-center space-x-4">
--- a/apps/www/app/(app)/layout.tsx
+++ b/apps/www/app/(app)/layout.tsx
@@ -7,10 +7,10 @@ interface AppLayoutProps {

 export default function AppLayout({ children }: AppLayoutProps) {
  return (
-    <>
+    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
      <SiteHeader />
      <main className="flex-1">{children}</main>
      <SiteFooter />
-    </>
+    </div>
  )
 }
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -21,7 +21,7 @@ export default function IndexPage() {
        <PageHeaderHeading>Build your component library</PageHeaderHeading>
        <PageHeaderDescription>
          Beautifully designed components that you can copy and paste into your
-          apps.
+          apps. Made with Tailwind CSS. Open source.
        </PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
--- a/apps/www/components/examples-nav.tsx
+++ b/apps/www/components/examples-nav.tsx
@@ -10,7 +10,7 @@ import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 const examples = [
  {
    name: "Examples",
-    href: "/",
+    href: "/examples/cards",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
  },
  {
@@ -23,11 +23,6 @@ const examples = [
    href: "/examples/dashboard",
    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
  },
-  {
-    name: "Cards",
-    href: "/examples/cards",
-    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
-  },
  {
    name: "Tasks",
    href: "/examples/tasks",
--- a/apps/www/components/mobile-nav.tsx
+++ b/apps/www/components/mobile-nav.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
-import { ViewVerticalIcon } from "@radix-ui/react-icons"
+import { MenuIcon } from "lucide-react"

 import { docsConfig } from "@/config/docs"
 import { siteConfig } from "@/config/site"
@@ -21,36 +21,21 @@ export function MobileNav() {
      <SheetTrigger asChild>
        <Button
          variant="ghost"
-          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="-ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
        >
          <svg
-            strokeWidth="1.5"
-            viewBox="0 0 24 24"
-            fill="none"
            xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+            className="size-6"
          >
            <path
-              d="M3 5H11"
-              stroke="currentColor"
-              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 12H16"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 19H21"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
+              d="M3.75 9h16.5m-16.5 6.75h16.5"
+            />
          </svg>
          <span className="sr-only">Toggle Menu</span>
        </Button>
--- a/apps/www/components/mode-toggle.tsx
+++ b/apps/www/components/mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { MoonIcon, SunIcon } from "lucide-react"
 import { useTheme } from "next-themes"

 import { Button } from "@/registry/new-york/ui/button"
--- a/apps/www/components/pager.tsx
+++ b/apps/www/components/pager.tsx
@@ -4,8 +4,7 @@ import { Doc } from "contentlayer/generated"
 import { NavItem, NavItemWithChildren } from "types/nav"

 import { docsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"

 interface DocsPagerProps {
  doc: Doc
@@ -21,22 +20,20 @@ export function DocsPager({ doc }: DocsPagerProps) {
  return (
    <div className="flex flex-row items-center justify-between">
      {pager?.prev?.href && (
-        <Link
-          href={pager.prev.href}
-          className={buttonVariants({ variant: "outline" })}
-        >
-          <ChevronLeftIcon className="mr-2 h-4 w-4" />
-          {pager.prev.title}
-        </Link>
+        <Button variant="ghost" asChild>
+          <Link href={pager.prev.href}>
+            <ChevronLeftIcon />
+            {pager.prev.title}
+          </Link>
+        </Button>
      )}
      {pager?.next?.href && (
-        <Link
-          href={pager.next.href}
-          className={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
-        >
-          {pager.next.title}
-          <ChevronRightIcon className="ml-2 h-4 w-4" />
-        </Link>
+        <Button variant="ghost" className="ml-auto" asChild>
+          <Link href={pager.next.href}>
+            {pager.next.title}
+            <ChevronRightIcon />
+          </Link>
+        </Button>
      )}
    </div>
  )
--- a/apps/www/components/site-header.tsx
+++ b/apps/www/components/site-header.tsx
@@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button"

 export function SiteHeader() {
  return (
-    <header className="sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border">
      <div className="container flex h-14 max-w-screen-2xl items-center">
        <MainNav />
        <MobileNav />
--- a/apps/www/content/docs/cli.mdx
+++ b/apps/www/content/docs/cli.mdx
@@ -85,6 +85,7 @@ Options:
  -y, --yes          skip confirmation prompt. (default: false)
  -o, --overwrite    overwrite existing files. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -a, --all          add all available components. (default: false)
  -p, --path <path>  the path to add the component to.
  -h, --help         display help for command
 ```
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -88,3 +88,14 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 ### Form

 <ComponentPreview name="calendar-form" />
+
+## Changelog
+
+### 11-03-2024 day_outside color
+
+- Changed the color of the `day_outside` class to the following to improve contrast:
+
+  ```tsx showLineNumbers title="calendar.tsx"
+  "day_outside:
+        "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+  ```
--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -72,3 +72,35 @@ import {
  name="card-demo"
  description="A card showing notifications settings."
 />
+
+## Changelog
+
+### 11-03-2024 a11y for title and description
+
+- Changed the `CardTitle` and `CardDescription` components to use `div` instead of `h3` and `p` to improve accessibility.
+
+```tsx showLineNumbers title="card.tsx"
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+```
--- a/apps/www/content/docs/components/chart.mdx
+++ b/apps/www/content/docs/components/chart.mdx
@@ -4,6 +4,12 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
 component: true
 ---

+<Callout className="mb-6">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <ComponentPreview
  name="chart-bar-interactive"
  className="-mt-4 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview>div]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px]"
@@ -45,6 +51,12 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When

 ## Installation

+<Callout className="mt-4">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <Tabs defaultValue="cli">

 <TabsList>
@@ -83,27 +95,6 @@ npx shadcn@latest add chart
 }
 ```

-<Step>
-  To use recharts with React 19 and Next.js 15, you will need to override the
-  `react-is` dependency.{" "}
-</Step>
-
-Add the following to your `package.json`
-
-```json title="package.json"
-"overrides": {
-  "react-is": "^19.0.0-rc-69d4b800-20241021"
-}
-```
-
-Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
-
-<Step>Run `npm install`</Step>
-
-```bash
-npm install
-```
-
 </Steps>

 </TabsContent>
@@ -144,27 +135,6 @@ npm install recharts
 }
 ```

-<Step>
-  To use recharts with React 19 and Next.js 15, you will need to override the
-  `react-is` dependency.{" "}
-</Step>
-
-Add the following to your `package.json`
-
-```json title="package.json"
-"overrides": {
-  "react-is": "^19.0.0-rc-69d4b800-20241021"
-}
-```
-
-Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
-
-<Step>Run `npm install`</Step>
-
-```bash
-npm install
-```
-
 </Steps>

 </TabsContent>
--- a/apps/www/content/docs/react-19.mdx
+++ b/apps/www/content/docs/react-19.mdx
@@ -3,9 +3,7 @@ title: Next.js 15 + React 19
 description: Using shadcn/ui with Next.js 15 and React 19.
 ---

-**shadcn/ui is now fully compatible with React 19!**
-
-<Callout className="mt-6">
+<Callout>
  **The following guide applies to any framework that supports React 19**. I
  titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
  15 find it. We are working with package maintainers to help upgrade to React
@@ -144,7 +142,7 @@ To make it easy for you track the progress of the upgrade, I've created a table
 | [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
 | [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
 | [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
-| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | ✅     |                                                             |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | 🚧     | See [PR #194](https://github.com/radix-ui/icons/pull/194)   |
 | [cmdk](https://www.npmjs.com/package/cmdk)                                         | ✅     |                                                             |

 If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
--- a/apps/www/public/favicon-16x16.png
+++ b/apps/www/public/favicon-16x16.png
--- a/apps/www/public/favicon-32x32.png
+++ b/apps/www/public/favicon-32x32.png
--- a/apps/www/public/favicon.ico
+++ b/apps/www/public/favicon.ico
--- a/apps/www/public/r/styles/default/calendar.json
+++ b/apps/www/public/r/styles/default/calendar.json
@@ -11,7 +11,7 @@
  "files": [
    {
      "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/default/card.json
+++ b/apps/www/public/r/styles/default/card.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/new-york/accordion.json
+++ b/apps/www/public/r/styles/new-york/accordion.json
@@ -7,7 +7,7 @@
  "files": [
    {
      "path": "ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/new-york/calendar.json
+++ b/apps/www/public/r/styles/new-york/calendar.json
@@ -11,7 +11,7 @@
  "files": [
    {
      "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/public/r/styles/new-york/card.json
+++ b/apps/www/public/r/styles/new-york/card.json
@@ -4,7 +4,7 @@
  "files": [
    {
      "path": "ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
      "type": "registry:ui",
      "target": ""
    }
--- a/apps/www/registry/default/example/cards/share.tsx
+++ b/apps/www/registry/default/example/cards/share.tsx
@@ -49,7 +49,7 @@ export function CardsShare() {
        </div>
        <Separator className="my-4" />
        <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="text-sm font-medium">People with access</div>
          <div className="grid gap-6">
            <div className="flex items-center justify-between space-x-4">
              <div className="flex items-center space-x-4">
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -46,7 +46,7 @@ function Calendar({
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
--- a/apps/www/registry/default/ui/card.tsx
+++ b/apps/www/registry/default/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"

 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
@@ -45,10 +45,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"

 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
--- a/apps/www/registry/new-york/example/cards/activity-goal.tsx
+++ b/apps/www/registry/new-york/example/cards/activity-goal.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
+import { MinusIcon, PlusIcon } from "lucide-react"
 import { useTheme } from "next-themes"
 import { Bar, BarChart, ResponsiveContainer } from "recharts"

@@ -87,7 +87,7 @@ export function CardsActivityGoal() {
            onClick={() => onClick(-10)}
            disabled={goal <= 200}
          >
-            <MinusIcon className="h-4 w-4" />
+            <MinusIcon />
            <span className="sr-only">Decrease</span>
          </Button>
          <div className="flex-1 text-center">
@@ -103,7 +103,7 @@ export function CardsActivityGoal() {
            onClick={() => onClick(10)}
            disabled={goal >= 400}
          >
-            <PlusIcon className="h-4 w-4" />
+            <PlusIcon />
            <span className="sr-only">Increase</span>
          </Button>
        </div>
--- a/apps/www/registry/new-york/example/cards/chat.tsx
+++ b/apps/www/registry/new-york/example/cards/chat.tsx
@@ -1,7 +1,7 @@
 "use client"

 import * as React from "react"
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons"
+import { CheckIcon, PlusIcon, SendIcon } from "lucide-react"

 import { cn } from "@/lib/utils"
 import {
@@ -118,7 +118,7 @@ export function CardsChat() {
                  className="ml-auto rounded-full"
                  onClick={() => setOpen(true)}
                >
-                  <PlusIcon className="h-4 w-4" />
+                  <PlusIcon />
                  <span className="sr-only">New message</span>
                </Button>
              </TooltipTrigger>
@@ -168,7 +168,7 @@ export function CardsChat() {
              onChange={(event) => setInput(event.target.value)}
            />
            <Button type="submit" size="icon" disabled={inputLength === 0}>
-              <PaperPlaneIcon className="h-4 w-4" />
+              <SendIcon className="h-4 w-4" />
              <span className="sr-only">Send</span>
            </Button>
          </form>
--- a/apps/www/registry/new-york/example/cards/data-table.tsx
+++ b/apps/www/registry/new-york/example/cards/data-table.tsx
@@ -1,11 +1,6 @@
 "use client"

 import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
 import {
  ColumnDef,
  ColumnFiltersState,
@@ -18,6 +13,7 @@ import {
  getSortedRowModel,
  useReactTable,
 } from "@tanstack/react-table"
+import { ChevronsUpDownIcon, MoreHorizontalIcon } from "lucide-react"

 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -66,12 +62,6 @@ const data: Payment[] = [
    status: "processing",
    email: "Monserrat44@gmail.com",
  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
  {
    id: "bhqecj4p",
    amount: 721,
@@ -126,7 +116,7 @@ export const columns: ColumnDef<Payment>[] = [
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Email
-          <CaretSortIcon className="ml-2 h-4 w-4" />
+          <ChevronsUpDownIcon className="size-3" />
        </Button>
      )
    },
@@ -158,7 +148,7 @@ export const columns: ColumnDef<Payment>[] = [
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
-              <DotsHorizontalIcon className="h-4 w-4" />
+              <MoreHorizontalIcon />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
@@ -209,7 +199,7 @@ export function CardsDataTable() {
  return (
    <Card>
      <CardHeader>
-        <CardTitle>Payments</CardTitle>
+        <CardTitle className="text-xl">Payments</CardTitle>
        <CardDescription>Manage your payments.</CardDescription>
      </CardHeader>
      <CardContent>
@@ -225,7 +215,7 @@ export function CardsDataTable() {
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="ml-auto">
-                Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
+                Columns <ChevronsUpDownIcon />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
--- a/apps/www/registry/new-york/example/cards/report-issue.tsx
+++ b/apps/www/registry/new-york/example/cards/report-issue.tsx
@@ -82,8 +82,10 @@ export function CardsReportIssue() {
        </div>
      </CardContent>
      <CardFooter className="justify-between space-x-2">
-        <Button variant="ghost">Cancel</Button>
-        <Button>Submit</Button>
+        <Button variant="ghost" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">Submit</Button>
      </CardFooter>
    </Card>
  )
--- a/apps/www/registry/new-york/example/cards/share.tsx
+++ b/apps/www/registry/new-york/example/cards/share.tsx
@@ -47,7 +47,7 @@ export function CardsShare() {
        </div>
        <Separator className="my-4" />
        <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="text-sm font-medium">People with access</div>
          <div className="grid gap-6">
            <div className="flex items-center justify-between space-x-4">
              <div className="flex items-center space-x-4">
--- a/apps/www/registry/new-york/example/cards/stats.tsx
+++ b/apps/www/registry/new-york/example/cards/stats.tsx
@@ -61,7 +61,7 @@ export function CardsStats() {
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
        </CardHeader>
-        <CardContent>
+        <CardContent className="pb-0">
          <div className="text-2xl font-bold">$15,231.89</div>
          <p className="text-xs text-muted-foreground">
            +20.1% from last month
--- a/apps/www/registry/new-york/example/cards/team-members.tsx
+++ b/apps/www/registry/new-york/example/cards/team-members.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDownIcon } from "lucide-react"

 import {
  Avatar,
--- a/apps/www/registry/new-york/ui/accordion.tsx
+++ b/apps/www/registry/new-york/ui/accordion.tsx
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -52,7 +52,7 @@ function Calendar({
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
-          "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
--- a/apps/www/registry/new-york/ui/card.tsx
+++ b/apps/www/registry/new-york/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"

 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
    ref={ref}
    className={cn("font-semibold leading-none tracking-tight", className)}
    {...props}
@@ -42,10 +42,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"

 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
--- a/packages/shadcn/CHANGELOG.md
+++ b/packages/shadcn/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @shadcn/ui

+## 2.1.5
+
+### Patch Changes
+
+- [#5707](https://github.com/shadcn-ui/ui/pull/5707) [`cdfecd1`](https://github.com/shadcn-ui/ui/commit/cdfecd1d97af2b4d9de330927edd9fd2eef1234e) Thanks [@shadcn](https://github.com/shadcn)! - temporarily bring back npm flag
+
 ## 2.1.4

 ### Patch Changes
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -1,6 +1,6 @@
 {
  "name": "shadcn",
-  "version": "2.1.4",
+  "version": "2.1.5",
  "description": "Add components to your apps.",
  "publishConfig": {
    "access": "public"
--- a/packages/shadcn/src/utils/updaters/update-dependencies.ts
+++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts
@@ -1,8 +1,11 @@
 import { Config } from "@/src/utils/get-config"
+import { getPackageInfo } from "@/src/utils/get-package-info"
 import { getPackageManager } from "@/src/utils/get-package-manager"
+import { logger } from "@/src/utils/logger"
 import { RegistryItem } from "@/src/utils/registry/schema"
 import { spinner } from "@/src/utils/spinner"
 import { execa } from "execa"
+import prompts from "prompts"

 export async function updateDependencies(
  dependencies: RegistryItem["dependencies"],
@@ -26,12 +29,52 @@ export async function updateDependencies(
  })?.start()
  const packageManager = await getPackageManager(config.resolvedPaths.cwd)

+  // Offer to use --force or --legacy-peer-deps if using React 19 with npm.
+  let flag = ""
+  if (isUsingReact19(config) && packageManager === "npm") {
+    dependenciesSpinner.stopAndPersist()
+    logger.warn(
+      "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).\n"
+    )
+    const confirmation = await prompts([
+      {
+        type: "select",
+        name: "flag",
+        message: "How would you like to proceed?",
+        choices: [
+          { title: "Use --force", value: "force" },
+          { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" },
+        ],
+      },
+    ])
+
+    if (confirmation) {
+      flag = confirmation.flag
+    }
+  }
+
+  dependenciesSpinner?.start()
+
  await execa(
    packageManager,
-    [packageManager === "npm" ? "install" : "add", ...dependencies],
+    [
+      packageManager === "npm" ? "install" : "add",
+      ...(packageManager === "npm" && flag ? [`--${flag}`] : []),
+      ...dependencies,
+    ],
    {
      cwd: config.resolvedPaths.cwd,
    }
  )
  dependenciesSpinner?.succeed()
 }
+
+function isUsingReact19(config: Config) {
+  const packageInfo = getPackageInfo(config.resolvedPaths.cwd)
+
+  if (!packageInfo?.dependencies?.react) {
+    return false
+  }
+
+  return /^(?:\^|~)?19(?:\.\d+)*(?:-.*)?$/.test(packageInfo.dependencies.react)
+}
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -9,7 +9,7 @@ module.exports = {
      center: true,
      padding: "2rem",
      screens: {
-        "2xl": "1400px",
+        "2xl": "1536px",
      },
    },
    extend: {
Author	SHA1	Message	Date
github-actions[bot]	e24e51a2fa	chore(release): version packages (#5709 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-11-04 17:25:59 +04:00
shadcn	cdfecd1d97	Revert "feat: remove npm flags" (#5707 ) * Revert "feat: remove npm flags (#5686)" This reverts commit `4ff64ba818`. * chore: temporarily bring back flag	2024-11-04 17:14:08 +04:00
manfromexistence04	2c043e709f	fix: svg props casing to camelCase (#5691 )	2024-11-03 19:27:28 +04:00
Ghribi Ouassim	aed19aa911	docs(www): added --all option to add command in cli docs page (#5591 )	2024-11-03 14:37:08 +04:00
shadcn	9e35d229ae	feat: www updates (#5688 ) * feat: www updates * fix: lint	2024-11-03 14:35:04 +04:00
shadcn	db1975ef4d	Merge branch 'main' of github.com:shadcn-ui/ui	2024-11-03 13:27:19 +04:00
shadcn	961e0b62d7	fix: a11y for card and calendar	2024-11-03 13:27:10 +04:00