feat: Add Self-Contained Kbd Component with Search Bar Demo (#217)

* Add self-contained Spinner component and integrate into components data

* Add self-contained Kbd component with integrated search bar demo and components data entry

* Rename Kbd component entry to 'Keyboard Shortcut' for consistency with naming conventions

---------

Co-authored-by: Vinay Nagesh Madival <you@example.com>
Co-authored-by: Vinay Nagesh Madival <[email protected]>

Author: VINAYMADIVAL

src/components/ui/kbd.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type KbdProps = React.ComponentProps<"kbd">;
+
+const KbdInner = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref}
+        {...props}
+        className={cn(
+          "inline-flex items-center rounded-md border border-border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground",
+          className
+        )}
+      >
+        {children}
+      </kbd>
+    );
+  }
+);
+KbdInner.displayName = "Kbd";
+const KbdPreview: React.FC = () => {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const [focused, setFocused] = React.useState(false);
+
+  // handle global shortcut (Ctrl/Cmd + K)
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      // normalize key + modifier check
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
+        // prevent browser default (may be browser-specific in some edge cases)
+        e.preventDefault();
+        inputRef.current?.focus();
+        setFocused(true);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <div className="w-full max-w-xs">
+      <div className="relative">
+        <input
+          ref={inputRef}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          aria-label="Search"
+          placeholder="Search..."
+          className="w-full rounded-md border border-border bg-input px-3 py-2 pl-8 pr-28 text-sm placeholder:text-muted-foreground focus:outline-none"
+        />
+
+        {/* left search icon (inside the bar) */}
+        <div className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            className="size-4 opacity-80"
+            aria-hidden="true"
+            width="16"
+            height="16"
+          >
+            <path
+              d="M21 21l-4.35-4.35"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+            <circle
+              cx="11"
+              cy="11"
+              r="6"
+              stroke="currentColor"
+              strokeWidth="2"
+              fill="none"
+            />
+          </svg>
+        </div>
+        {!focused && (
+          <div
+            onMouseDown={(e) => {
+              // ensure click focuses input (use mousedown to avoid losing focus)
+              e.preventDefault();
+              inputRef.current?.focus();
+              setFocused(true);
+            }}
+            className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2"
+            aria-hidden
+          >
+            <KbdInner>⌘</KbdInner>
+            <KbdInner>K</KbdInner>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Expose Preview as a static property so data file only imports { Kbd }
+type KbdComponentType = typeof KbdInner & { Preview: React.FC };
+
+const Kbd = KbdInner as KbdComponentType;
+Kbd.Preview = KbdPreview;
+
+export { Kbd };

src/data/components.tsx

@@ -91,6 +91,8 @@ import {
 
 import { Spinner } from "@/components/ui/spinner";
 
+import { Kbd } from "@/components/ui/kbd";
+
 export const componentsData = [
   {
     id: "button",
@@ -1979,7 +1981,7 @@ export function CollapsibleDemo() {
       </div>
     </div>
   ),
-  code: `import { Spinner } from "@/components/Spinner"
+  code: `import { Spinner } from "@/components/ui/spinner"
 
 export function SpinnerDemo() {
   return (
@@ -1998,4 +2000,71 @@ export function SpinnerDemo() {
       { name: "label", type: "string", description: "Accessible label for screen readers.", default: "Loading" },
     ],
   },
+  {
+  id: "keyboard-shortcut",
+  title: "Keyboard Shortcut",
+  description: "A small self-contained keyboard key element for displaying shortcuts.",
+  category: "Display",
+  preview: <Kbd.Preview />,
+  code: `import { Kbd } from "@/components/ui/kbd"
+
+export function KbdDemo() {
+  return (
+    <div className="w-full max-w-xs">
+      <div className="relative">
+        <input
+          aria-label="Search"
+          placeholder="Search..."
+          className="w-full rounded-md border border-border bg-input px-3 py-2 pl-8 pr-28 text-sm placeholder:text-muted-foreground focus:outline-none"
+        />
+        <div className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            className="size-4 opacity-80"
+            aria-hidden="true"
+            width="16"
+            height="16"
+          >
+            <path
+              d="M21 21l-4.35-4.35"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+            <circle
+              cx="11"
+              cy="11"
+              r="6"
+              stroke="currentColor"
+              strokeWidth="2"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2">
+          <Kbd>Ctrl</Kbd>
+          <Kbd>K</Kbd>
+        </div>
+      </div>
+    </div>
+  )
+}`,
+  propsData: [
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Content inside the Kbd element (e.g., key label).",
+      required: true,
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional classes to customize appearance.",
+      default: '""',
+      },
+    ],
+  },
 ];