feat: add command and combobox components

2026-03-19 18:16:50 +08:00
parent b7d17383bf
commit 71ebb010b9
12 changed files with 1318 additions and 0 deletions
@@ -0,0 +1,53 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const commandVariants = cva([
+  "flex h-full w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)]",
+  "bg-[var(--color-card)] text-[var(--color-card-foreground)] shadow-[var(--shadow-sm)]",
+  getMotionRecipeClassNames("transition", "ring")
+]);
+
+export const commandDialogContentVariants = cva([
+  "gap-0 overflow-hidden p-0 sm:max-w-[40rem]",
+  "[&>[data-slot=root]]:rounded-none [&>[data-slot=root]]:border-none [&>[data-slot=root]]:shadow-none"
+]);
+
+export const commandInputWrapperVariants = cva([
+  "flex items-center gap-3 border-b border-[var(--color-border)] px-4"
+]);
+
+export const commandInputVariants = cva([
+  "flex h-12 w-full bg-transparent text-sm outline-none",
+  "placeholder:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed disabled:opacity-50"
+]);
+
+export const commandListVariants = cva([
+  "max-h-[22rem] overflow-y-auto overflow-x-hidden p-2"
+]);
+
+export const commandEmptyVariants = cva([
+  "py-10 text-center text-sm text-[var(--color-muted-foreground)]"
+]);
+
+export const commandGroupVariants = cva([
+  "overflow-hidden p-1 text-[var(--color-foreground)]",
+  "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
+  "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+  "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[var(--tracking-caps)]",
+  "[&_[cmdk-group-heading]]:text-[var(--color-muted-foreground)]"
+]);
+
+export const commandItemVariants = cva([
+  "relative flex cursor-default select-none items-center gap-3 rounded-[calc(var(--radius-sm)-4px)] px-3 py-2 text-sm outline-none",
+  "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
+  "data-[selected=true]:bg-[var(--color-surface)] data-[selected=true]:text-[var(--color-foreground)]",
+  "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45"
+]);
+
+export const commandSeparatorVariants = cva([
+  "-mx-1 my-1 h-px bg-[var(--color-border)]"
+]);
+
+export const commandShortcutVariants = cva([
+  "ml-auto text-[0.7rem] uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
+]);