Merge branch 'main' into yash/ref-constructor-params

Author: kumaryash90

.changeset/curly-cycles-hammer.md

@@ -25,8 +25,8 @@
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
-    "@emotion/react": "11.13.5",
-    "@emotion/styled": "11.13.5",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
@@ -61,7 +61,7 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "flat": "^6.0.1",
-    "framer-motion": "11.13.1",
+    "framer-motion": "11.13.3",
     "fuse.js": "7.0.0",
     "input-otp": "^1.4.1",
     "ioredis": "^5.4.1",
@@ -88,8 +88,8 @@
     "recharts": "^2.13.3",
     "remark-gfm": "^4.0.0",
     "server-only": "^0.0.1",
-    "shiki": "1.24.0",
-    "sonner": "^1.7.0",
+    "shiki": "1.24.1",
+    "sonner": "^1.7.1",
     "spdx-correct": "^3.2.0",
     "swagger-ui-react": "^5.18.2",
     "tailwind-merge": "^2.5.5",
@@ -104,7 +104,7 @@
     "@chromatic-com/storybook": "3.2.2",
     "@next/bundle-analyzer": "15.0.4",
     "@next/eslint-plugin-next": "15.0.4",
-    "@playwright/test": "1.49.0",
+    "@playwright/test": "1.49.1",
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-interactions": "8.4.7",
     "@storybook/addon-links": "8.4.7",
@@ -120,7 +120,7 @@
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
     "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
     "@types/swagger-ui-react": "^4.18.3",

.changeset/dirty-goats-invent.md

@@ -39,7 +39,7 @@
     "react-dom": "19.0.0",
     "react-pick-color": "^2.0.0",
     "server-only": "^0.0.1",
-    "shiki": "1.24.0",
+    "shiki": "1.24.1",
     "tailwind-merge": "^2.5.5",
     "thirdweb": "workspace:*",
     "timeago.js": "^4.0.2",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@types/node": "22.10.1",
     "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "eslint": "8.57.0",
     "eslint-config-next": "15.0.4",
     "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",

.changeset/fair-plants-pretend.md

@@ -0,0 +1,56 @@
+import { APIHeader } from "@/components/blocks/APIHeader";
+import {
+  NftCardDemo,
+  NftDescriptionBasic,
+  NftMediaBasic,
+  NftMediaOverride,
+  NftNameBasic,
+} from "@/components/headless-ui/nft-examples";
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "NFT Components",
+  description:
+    "Elevate your NFT marketplace with our React headless UI components, engineered for seamless digital asset transactions. These customizable, zero-styling components simplify NFT interactions while giving developers complete freedom to craft their perfect user interface.",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <main className="container px-0 pb-20">
+        <APIHeader
+          title="NFT Components"
+          description={
+            <>
+              Elevate your NFT applications with our React headless UI
+              components, engineered for seamless digital asset transactions.
+              These customizable, zero-styling components simplify NFT
+              interactions while giving developers complete freedom to craft
+              their perfect user interface.
+            </>
+          }
+          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
+          heroLink="/headless-ui-header.png"
+        />
+        <section className="space-y-8">
+          <NftMediaBasic />
+        </section>
+        <section className="space-y-8">
+          <NftMediaOverride />
+        </section>
+        <section className="space-y-8">
+          <NftNameBasic />
+        </section>
+        <section className="space-y-8">
+          <NftDescriptionBasic />
+        </section>
+        <section className="space-y-8">
+          <NftCardDemo />
+        </section>
+      </main>
+    </ThirdwebProvider>
+  );
+}