From c4ccdf55cbc832116e56eba9435392727d16a16f Mon Sep 17 00:00:00 2001
From: junwen-k <40173716+junwen-k@users.noreply.github.com>
Date: Sat, 18 Jul 2026 16:14:56 +0800
Subject: [PATCH] fix(registry): sync emoji picker and date picker popups with
 nova styling

Emoji picker search now uses the boxed InputGroup recipe from the nova
command palette, and the date picker popup swaps its border for the
nova ring treatment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/v4/registry.json                         |  2 +-
 .../src/registry/new-york/ui/date-picker.tsx  |  2 +-
 .../src/registry/new-york/ui/emoji-picker.tsx | 21 ++++++++++++-------
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/v4/registry.json b/apps/v4/registry.json
index 875675f..dff5b37 100644
--- a/apps/v4/registry.json
+++ b/apps/v4/registry.json
@@ -51,7 +51,7 @@
       "title": "Emoji Picker",
       "description": "A emoji picker is a component that allows users to select an emoji from a list of emojis.",
       "dependencies": ["@base-ui/react", "frimousse"],
-      "registryDependencies": ["button", "popover"],
+      "registryDependencies": ["button", "input-group", "popover"],
       "files": [
         {
           "path": "src/registry/new-york/ui/emoji-picker.tsx",
diff --git a/apps/v4/src/registry/new-york/ui/date-picker.tsx b/apps/v4/src/registry/new-york/ui/date-picker.tsx
index f3a5685..bf0a87a 100644
--- a/apps/v4/src/registry/new-york/ui/date-picker.tsx
+++ b/apps/v4/src/registry/new-york/ui/date-picker.tsx
@@ -218,7 +218,7 @@ function DatePickerContent({
         <DatePickerPrimitive.Content
           data-slot="date-picker-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 w-auto origin-(--transform-origin) overflow-hidden rounded-md border p-0 shadow-md outline-hidden",
+            "bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 w-auto origin-(--transform-origin) overflow-hidden rounded-lg p-0 shadow-md ring-1 outline-hidden duration-100",
             className,
           )}
           {...props}
diff --git a/apps/v4/src/registry/new-york/ui/emoji-picker.tsx b/apps/v4/src/registry/new-york/ui/emoji-picker.tsx
index fae65f1..d780d23 100644
--- a/apps/v4/src/registry/new-york/ui/emoji-picker.tsx
+++ b/apps/v4/src/registry/new-york/ui/emoji-picker.tsx
@@ -15,6 +15,7 @@ import { LoaderIcon, SearchIcon } from "lucide-react";
 import * as React from "react";
 
 import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
 import {
   Popover,
   PopoverContent,
@@ -30,7 +31,7 @@ function EmojiPicker({
     <EmojiPickerPrimitive.Root
       data-slot="emoji-picker"
       className={cn(
-        "bg-popover text-popover-foreground isolate flex h-full w-fit flex-col overflow-hidden rounded-md",
+        "bg-popover text-popover-foreground isolate flex h-full w-fit flex-col overflow-hidden rounded-lg",
         className,
       )}
       {...props}
@@ -45,14 +46,18 @@ function EmojiPickerSearch({
   return (
     <div
       data-slot="emoji-picker-search-wrapper"
-      className={cn("flex h-9 items-center gap-2 border-b px-3", className)}
+      className={cn("p-1 pb-0", className)}
     >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <EmojiPickerPrimitive.Search
-        data-slot="emoji-picker-search"
-        className="placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
-        {...props}
-      />
+      <InputGroup className="border-input/30 bg-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <EmojiPickerPrimitive.Search
+          data-slot="emoji-picker-search"
+          className="placeholder:text-muted-foreground w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
     </div>
   );
 }