62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
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(--ui-panel-radius)] border border-[var(--ui-panel-border)]",
|
|
"bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] [border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
|
|
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(--ui-panel-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 commandLoadingVariants = cva([
|
|
"px-4 py-8 text-sm text-[var(--color-muted-foreground)]"
|
|
]);
|
|
|
|
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-[var(--ui-control-radius)] 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(--ui-control-bg)] 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)]"
|
|
]);
|
|
|
|
export const commandFooterVariants = cva([
|
|
"border-t border-[var(--ui-panel-border)] bg-[color-mix(in_oklch,var(--ui-panel-bg)_94%,var(--color-background))] px-4 py-3"
|
|
]);
|