@swift-rust/ui 0.2.0 → 0.6.0

package/registry/components/dialog.tsx

@@ -61,7 +61,7 @@ export function DialogContent({
       role="dialog"
       aria-modal
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-[var(--ui-border)] bg-[var(--ui-surface)] p-6 shadow-lg rounded-xl",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-background p-6 shadow-lg rounded-xl",
         className,
       )}
       {...props}
@@ -84,7 +84,7 @@ export function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHe
 }
 
 export function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn("text-sm text-[var(--ui-fg-muted)]", className)} {...props} />;
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
 }
 
 export function DialogTrigger({

package/registry/components/direction.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export type Direction = "ltr" | "rtl";
+
+const DirectionContext = React.createContext<Direction>("ltr");
+
+export function DirectionProvider({ dir, children }: { dir: Direction; children: React.ReactNode }) {
+  return (
+    <DirectionContext.Provider value={dir}>
+      <div dir={dir}>{children}</div>
+    </DirectionContext.Provider>
+  );
+}
+
+export function useDirection(): Direction {
+  return React.useContext(DirectionContext);
+}

package/registry/components/drawer.tsx

@@ -0,0 +1,77 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const DrawerContext = React.createContext<{ open: boolean; setOpen: (v: boolean) => void } | null>(null);
+
+export function Drawer({
+  open: controlled,
+  onOpenChange,
+  children,
+}: {
+  open?: boolean;
+  onOpenChange?: (v: boolean) => void;
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(false);
+  const open = controlled ?? internal;
+  const setOpen = (v: boolean) => {
+    if (controlled === undefined) setInternal(v);
+    onOpenChange?.(v);
+  };
+  return <DrawerContext.Provider value={{ open, setOpen }}>{children}</DrawerContext.Provider>;
+}
+
+export function DrawerTrigger({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) {
+  const ctx = React.useContext(DrawerContext);
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+      onClick: () => ctx?.setOpen(true),
+    });
+  }
+  return <button type="button" onClick={() => ctx?.setOpen(true)}>{children}</button>;
+}
+
+export function DrawerContent({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(DrawerContext);
+  if (!ctx?.open) return null;
+  return (
+    <>
+      <div className="fixed inset-0 z-50 bg-black/60" onClick={() => ctx.setOpen(false)} aria-hidden />
+      <div
+        role="dialog"
+        aria-modal
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-[85vh] w-full max-w-lg flex-col gap-4 rounded-t-2xl border border-border bg-background p-6 shadow-lg",
+          className,
+        )}
+      >
+        <div className="mx-auto h-1.5 w-12 rounded-full bg-muted" />
+        {children}
+      </div>
+    </>
+  );
+}
+
+export function DrawerClose({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) {
+  const ctx = React.useContext(DrawerContext);
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+      onClick: () => ctx?.setOpen(false),
+    });
+  }
+  return <button type="button" onClick={() => ctx?.setOpen(false)}>{children}</button>;
+}
+
+export function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)} {...props} />;
+}
+export function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mt-auto flex flex-col gap-2", className)} {...props} />;
+}
+export function DrawerTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("text-lg font-semibold", className)} {...props} />;
+}
+export function DrawerDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}

package/registry/components/dropdown-menu.tsx

@@ -59,7 +59,7 @@ export function DropdownMenuContent({
     <div
       role="menu"
       className={cn(
-        "absolute z-50 mt-1 min-w-[10rem] overflow-hidden rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] p-1 text-[var(--ui-fg)] shadow-md",
+        "absolute z-50 mt-1 min-w-[10rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-foreground shadow-md",
         align === "end" && "right-0",
         align === "center" && "left-1/2 -translate-x-1/2",
         className,
@@ -78,8 +78,8 @@ export function DropdownMenuItem({
     <div
       role="menuitem"
       className={cn(
-        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
-        "hover:bg-[var(--ui-surface-2)] focus:bg-[var(--ui-surface-2)]",
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors",
+        "hover:bg-muted focus:bg-muted",
         className,
       )}
       {...props}
@@ -88,9 +88,9 @@ export function DropdownMenuItem({
 }
 
 export function DropdownMenuSeparator() {
-  return <div className="my-1 h-px bg-[var(--ui-border)]" />;
+  return <div className="my-1 h-px bg-border" />;
 }
 
 export function DropdownMenuLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("px-2 py-1.5 text-xs font-semibold text-[var(--ui-fg-subtle)]", className)} {...props} />;
+  return <div className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)} {...props} />;
 }

package/registry/components/empty.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border p-10 text-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function EmptyMedia({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("text-base font-semibold", className)} {...props} />;
+}
+
+export function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("max-w-sm text-sm text-muted-foreground", className)} {...props} />;
+}

package/registry/components/field.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Field({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5", className)} {...props} />;
+}
+
+export function FieldLabel({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn("text-sm font-medium leading-none text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function FieldDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-xs text-muted-foreground", className)} {...props} />;
+}
+
+export function FieldError({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-xs font-medium text-destructive", className)} {...props} />;
+}
+
+export function FieldGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-4", className)} {...props} />;
+}

package/registry/components/file-upload.tsx

@@ -0,0 +1,116 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface UploadFile {
+  id: number;
+  name: string;
+  size: number;
+  progress: number;
+}
+
+function formatSize(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function FileUpload({
+  multiple = true,
+  accept,
+  onFiles,
+  className,
+}: {
+  multiple?: boolean;
+  accept?: string;
+  onFiles?: (files: File[]) => void;
+  className?: string;
+}) {
+  const [dragging, setDragging] = React.useState(false);
+  const [files, setFiles] = React.useState<UploadFile[]>([]);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const counter = React.useRef(0);
+
+  const add = (list: FileList | null) => {
+    if (!list) return;
+    const arr = Array.from(list);
+    onFiles?.(arr);
+    const mapped = arr.map((f) => ({ id: ++counter.current, name: f.name, size: f.size, progress: 0 }));
+    setFiles((prev) => (multiple ? [...prev, ...mapped] : mapped));
+    // simulate upload progress
+    for (const m of mapped) {
+      let p = 0;
+      const tick = setInterval(() => {
+        p += Math.random() * 25 + 10;
+        setFiles((prev) => prev.map((x) => (x.id === m.id ? { ...x, progress: Math.min(100, p) } : x)));
+        if (p >= 100) clearInterval(tick);
+      }, 220);
+    }
+  };
+
+  return (
+    <div className={cn("flex w-full max-w-md flex-col gap-3", className)}>
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setDragging(true);
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragging(false);
+          add(e.dataTransfer.files);
+        }}
+        className={cn(
+          "flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 text-center transition-colors",
+          dragging ? "border-primary bg-primary/5" : "border-border hover:border-border-strong hover:bg-muted/50",
+        )}
+      >
+        <svg viewBox="0 0 24 24" className="size-7 text-muted-foreground" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden>
+          <path d="M12 16V4M7 9l5-5 5 5" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2" strokeLinecap="round" />
+        </svg>
+        <span className="text-sm font-medium">Drag & drop or click to upload</span>
+        <span className="text-xs text-muted-foreground">{accept ?? "Any file"}{multiple ? " · multiple" : ""}</span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        accept={accept}
+        className="hidden"
+        onChange={(e) => add(e.target.files)}
+      />
+      {files.length > 0 && (
+        <ul className="flex flex-col gap-2">
+          {files.map((f) => (
+            <li key={f.id} className="flex items-center gap-3 rounded-lg border border-border bg-card p-2.5">
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="truncate text-sm font-medium">{f.name}</span>
+                  <span className="shrink-0 text-xs text-muted-foreground">{formatSize(f.size)}</span>
+                </div>
+                <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-secondary">
+                  <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${f.progress}%` }} />
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setFiles((prev) => prev.filter((x) => x.id !== f.id))}
+                aria-label="Remove"
+                className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+              >
+                <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><path d="M18 6 6 18M6 6l12 12" strokeLinecap="round" /></svg>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/registry/components/form.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -19,10 +18,10 @@ export function FormField({
 }) {
   return (
     <div className="space-y-1.5">
-      {label ? <label className="text-sm font-medium text-[var(--ui-fg)]">{label}</label> : null}
+      {label ? <label className="text-sm font-medium text-foreground">{label}</label> : null}
       {children}
-      {description && !error ? <p className="text-xs text-[var(--ui-fg-muted)]">{description}</p> : null}
-      {error ? <p className="text-xs text-[var(--ui-danger)]">{error}</p> : null}
+      {description && !error ? <p className="text-xs text-muted-foreground">{description}</p> : null}
+      {error ? <p className="text-xs text-destructive">{error}</p> : null}
     </div>
   );
 }

package/registry/components/hover-card.tsx

@@ -0,0 +1,59 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const HoverCardContext = React.createContext<{
+  open: boolean;
+  show: () => void;
+  hide: () => void;
+} | null>(null);
+
+export function HoverCard({ children, openDelay = 200 }: { children: React.ReactNode; openDelay?: number }) {
+  const [open, setOpen] = React.useState(false);
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const show = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), openDelay);
+  };
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setOpen(false);
+  };
+  return (
+    <HoverCardContext.Provider value={{ open, show, hide }}>
+      <span className="relative inline-block" onMouseEnter={show} onMouseLeave={hide}>
+        {children}
+      </span>
+    </HoverCardContext.Provider>
+  );
+}
+
+export function HoverCardTrigger({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) {
+  if (asChild) return <>{children}</>;
+  return <span className="cursor-default">{children}</span>;
+}
+
+export function HoverCardContent({
+  className,
+  children,
+  align = "center",
+}: {
+  className?: string;
+  children: React.ReactNode;
+  align?: "start" | "center" | "end";
+}) {
+  const ctx = React.useContext(HoverCardContext);
+  if (!ctx?.open) return null;
+  return (
+    <div
+      className={cn(
+        "absolute top-full z-50 mt-2 w-64 rounded-lg border border-border bg-popover p-4 text-sm text-popover-foreground shadow-md",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        align === "end" && "right-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/registry/components/input-group.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// A row that fuses addons (icons, text, buttons) with an input into one control.
+export function InputGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex h-9 w-full items-center rounded-lg border border-input bg-background text-sm shadow-xs transition-[color,box-shadow]",
+        "focus-within:ring-2 focus-within:ring-ring/50",
+        "[&>input]:h-full [&>input]:min-w-0 [&>input]:flex-1 [&>input]:border-0 [&>input]:bg-transparent [&>input]:px-3 [&>input]:outline-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function InputGroupAddon({
+  className,
+  align = "start",
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "end" }) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 px-2.5 text-muted-foreground [&_svg]:size-4",
+        align === "end" ? "order-last" : "",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/registry/components/input-otp.tsx

@@ -0,0 +1,50 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function InputOTP({
+  length = 6,
+  value: controlled,
+  defaultValue = "",
+  onChange,
+  className,
+}: {
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (v: string) => void;
+  className?: string;
+}) {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = controlled ?? internal;
+  const refs = React.useRef<Array<HTMLInputElement | null>>([]);
+
+  const setChar = (i: number, char: string) => {
+    const next = (value.slice(0, i) + char + value.slice(i + 1)).slice(0, length);
+    if (controlled === undefined) setInternal(next);
+    onChange?.(next);
+    if (char && i < length - 1) refs.current[i + 1]?.focus();
+  };
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      {Array.from({ length }).map((_, i) => (
+        <input
+          // eslint-disable-next-line react/no-array-index-key
+          key={i}
+          ref={(el) => {
+            refs.current[i] = el;
+          }}
+          inputMode="numeric"
+          maxLength={1}
+          value={value[i] ?? ""}
+          onChange={(e) => setChar(i, e.target.value.replace(/\D/g, "").slice(-1))}
+          onKeyDown={(e) => {
+            if (e.key === "Backspace" && !value[i] && i > 0) refs.current[i - 1]?.focus();
+          }}
+          className="size-10 rounded-lg border border-input bg-background text-center text-lg font-medium shadow-xs focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50"
+        />
+      ))}
+    </div>
+  );
+}

package/registry/components/input.tsx

@@ -1,19 +1,83 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+/**
+ * swift-rust ui · Input
+ *
+ * variant — default, outline, secondary, ghost, destructive
+ * size    — xs, sm, default, md, lg   (the native `size` attribute is dropped)
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ */
+
+export type InputVariant = "default" | "outline" | "secondary" | "ghost" | "destructive";
+export type InputSize = "default" | "xs" | "sm" | "md" | "lg";
+export type InputDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<InputVariant, string> = {
+  default: "border border-input bg-background",
+  outline: "border-2 border-input bg-transparent",
+  secondary: "border border-transparent bg-secondary",
+  ghost: "border border-transparent bg-transparent hover:bg-secondary/50",
+  destructive:
+    "border border-destructive text-destructive placeholder:text-destructive/60 focus-visible:ring-destructive/40",
+};
+
+const SIZES: Record<InputSize, string> = {
+  default: "h-9 px-3 py-1 text-sm",
+  xs: "h-7 rounded-md px-2 text-xs",
+  sm: "h-8 px-2.5 text-xs",
+  md: "h-9 px-3 py-1 text-sm",
+  lg: "h-10 px-4 text-base",
+};
+
+const DESIGNS: Record<InputDesign, string> = {
+  flat: "shadow-xs",
+  soft: "rounded-xl border-transparent bg-secondary shadow-none",
+  // A field reads "deep" when it looks recessed: a darker top edge + a top→down
+  // shading gradient sink the surface in (no inset shadow).
+  "3d": "border-t-2 border-t-black/15 bg-linear-to-b from-black/[0.06] to-transparent dark:border-t-black/40",
+  // Liquid glass field: blur + saturation, translucent sheen, bright rim.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 placeholder:text-foreground/50 " +
+    "bg-linear-to-br from-white/30 to-white/5 " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:to-transparent",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[inset_3px_3px_6px_rgba(0,0,0,0.12),inset_-3px_-3px_6px_rgba(255,255,255,0.7)] " +
+    "dark:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.6),inset_-3px_-3px_6px_rgba(255,255,255,0.05)]",
+  brutal:
+    "rounded-none border-2 border-foreground shadow-[3px_3px_0_0_var(--color-foreground)] " +
+    "focus-visible:shadow-[1px_1px_0_0_var(--color-foreground)] focus-visible:ring-0",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-background),var(--color-background))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box]",
+};
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  variant?: InputVariant;
+  size?: InputSize;
+  design?: InputDesign;
+}
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type = "text", ...props }, ref) => (
+  (
+    { className, type = "text", variant = "default", size = "default", design = "flat", ...props },
+    ref,
+  ) => (
     <input
       type={type}
       ref={ref}
       className={cn(
-        "flex h-9 w-full rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 py-1 text-sm shadow-sm",
-        "placeholder:text-[var(--ui-fg-subtle)]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)] focus-visible:ring-offset-1",
-        "disabled:cursor-not-allowed disabled:opacity-50",
+        "flex w-full min-w-0 rounded-lg text-foreground transition-[color,box-shadow,background-color]",
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        VARIANTS[variant],
+        SIZES[size],
+        DESIGNS[design],
         className,
       )}
       {...props}

package/registry/components/item.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Item({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ItemMedia({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ItemContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex min-w-0 flex-1 flex-col gap-0.5", className)} {...props} />;
+}
+
+export function ItemTitle({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("truncate text-sm font-medium leading-none", className)} {...props} />;
+}
+
+export function ItemDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("truncate text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function ItemActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("ml-auto flex shrink-0 items-center gap-1", className)} {...props} />;
+}

package/registry/components/kbd.tsx

@@ -1,13 +1,12 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const Kbd = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+export const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
   ({ className, ...props }, ref) => (
-    <span
+    <kbd
       ref={ref}
       className={cn(
-        "inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-strong)] bg-[var(--ui-surface-2)] px-1.5 font-mono text-[0.6875rem] font-medium",
+        "inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[0.6875rem] font-medium text-muted-foreground",
         className,
       )}
       {...props}