@playfast/reform-better-hub-ui-primitives 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform-better-hub-ui-primitives",
   "playbook": "./playbook",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "React UI primitives adapted from better-hub by Better Auth (https://github.com/better-auth/better-hub). Full credit to the Better Auth team.",
   "keywords": [
@@ -34,7 +34,7 @@
     "./*": "./src/*.tsx"
   },
   "files": [
-    "dist",
+    "src",
     "README.md"
   ],
   "scripts": {

package/src/components/agent-icon.tsx

@@ -0,0 +1,21 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/agent-icon.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+
+export function AgentIcon({ className }: { className?: string }): React.JSX.Element {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="1em"
+			height="1em"
+			viewBox="0 0 28 28"
+			className={className}
+		>
+			<path
+				fill="currentColor"
+				d="M10.06 18.701a1.628 1.628 0 0 0 2.43-.676l.77-2.34a3.82 3.82 0 0 1 2.416-2.418l2.238-.727a1.6 1.6 0 0 0 .786-.595a1.62 1.62 0 0 0-.849-2.489l-2.215-.72a3.82 3.82 0 0 1-2.42-2.414l-.727-2.237a1.62 1.62 0 0 0-.594-.785a1.655 1.655 0 0 0-1.879 0a1.63 1.63 0 0 0-.6.8L8.68 6.365a3.82 3.82 0 0 1-2.359 2.37l-2.24.726a1.626 1.626 0 0 0 .02 3.073l2.216.72a3.86 3.86 0 0 1 1.816 1.286c.266.343.471.728.606 1.14l.728 2.234c.112.318.32.593.595.787m-3.273-6.873l-2.22-.72s-.085-.038-.085-.108a.14.14 0 0 1 .084-.115L6.8 10.16a5.34 5.34 0 0 0 3.32-3.375l.721-2.219s.043-.084.114-.084s.113.084.113.084l.723 2.223a5.32 5.32 0 0 0 3.377 3.372l2.27.735a.13.13 0 0 1 .078.11a.15.15 0 0 1-.083.113l-2.225.722a5.32 5.32 0 0 0-3.374 3.374l-.715 2.2a.11.11 0 0 1-.115.093c-.104 0-.118-.075-.118-.075l-.723-2.22a5.32 5.32 0 0 0-3.376-3.385m13.017 12.954A1.2 1.2 0 0 0 20.5 25a1.2 1.2 0 0 0 .692-.216a1.2 1.2 0 0 0 .446-.6l.372-1.143a1.61 1.61 0 0 1 1.017-1.02l1.166-.378A1.21 1.21 0 0 0 25 20.505a1.2 1.2 0 0 0-.844-1.146l-1.144-.37a1.61 1.61 0 0 1-1.02-1.018l-.38-1.163a1.2 1.2 0 0 0-2.274.016l-.374 1.146a1.61 1.61 0 0 1-.993 1.017l-1.166.378a1.21 1.21 0 0 0-.807 1.139a1.2 1.2 0 0 0 .823 1.138l1.144.372a1.6 1.6 0 0 1 1.02 1.023l.379 1.163a1.2 1.2 0 0 0 .44.582m-1.371-4.194l-.27-.088l.283-.096a3.12 3.12 0 0 0 1.943-1.974l.088-.27l.089.272a3.11 3.11 0 0 0 1.974 1.975l.293.1l-.271.087a3.12 3.12 0 0 0-1.974 1.977l-.088.27l-.088-.272a3.12 3.12 0 0 0-1.98-1.98"
+			/>
+		</svg>
+	);
+}

package/src/components/badge.tsx

@@ -0,0 +1,54 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/badge.tsx). Full credit to the Better Auth team.
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+import { Slot } from "radix-ui";
+
+import { cn } from "../foundation/cn";
+
+const badgeVariants: (
+	props?:
+		| ({
+				variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+		  } & ClassProp)
+		| undefined,
+) => string = cva(
+	"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+				outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 [a&]:hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Badge({
+	className,
+	variant = "default",
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }): React.JSX.Element {
+	const Comp = asChild ? Slot.Root : "span";
+
+	return (
+		<Comp
+			data-slot="badge"
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -0,0 +1,72 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/button.tsx). Full credit to the Better Auth team.
+import { Slot } from "@radix-ui/react-slot";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+import type * as React from "react";
+import { cn } from "../foundation/cn";
+
+const buttonVariants: (
+	props?:
+		| ({
+				variant?:
+					| "default"
+					| "destructive"
+					| "outline"
+					| "secondary"
+					| "ghost"
+					| "link"
+					| null
+					| undefined;
+				size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+		  } & ClassProp)
+		| undefined,
+) => string = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90",
+				outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}): React.JSX.Element {
+	const Comp = asChild ? Slot : "button";
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

package/src/components/combobox.tsx

@@ -0,0 +1,290 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/combobox.tsx). Full credit to the Better Auth team.
+
+import * as React from 'react'
+import { Combobox as ComboboxPrimitive } from '@base-ui/react'
+import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
+
+import { cn } from '../foundation/cn'
+import { Button } from './button'
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+} from './input-group'
+
+const Combobox: typeof ComboboxPrimitive.Root = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element {
+	return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Trigger
+			data-slot="combobox-trigger"
+			className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon
+				data-slot="combobox-trigger-icon"
+				className="pointer-events-none size-4 text-muted-foreground"
+			/>
+		</ComboboxPrimitive.Trigger>
+	)
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Clear
+			data-slot="combobox-clear"
+			render={<InputGroupButton variant="ghost" size="icon-xs" />}
+			className={cn(className)}
+			{...props}
+		>
+			<XIcon className="pointer-events-none" />
+		</ComboboxPrimitive.Clear>
+	)
+}
+
+function ComboboxInput({
+	className,
+	children,
+	disabled = false,
+	showTrigger = true,
+	showClear = false,
+	...props
+}: ComboboxPrimitive.Input.Props & {
+	showTrigger?: boolean
+	showClear?: boolean
+}): React.JSX.Element {
+	return (
+		<InputGroup className={cn('w-auto', className)}>
+			<ComboboxPrimitive.Input
+				render={<InputGroupInput disabled={disabled} />}
+				{...props}
+			/>
+			<InputGroupAddon align="inline-end">
+				{showTrigger && (
+					<InputGroupButton
+						size="icon-xs"
+						variant="ghost"
+						asChild
+						data-slot="input-group-button"
+						className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+						disabled={disabled}
+					>
+						<ComboboxTrigger />
+					</InputGroupButton>
+				)}
+				{showClear && <ComboboxClear disabled={disabled} />}
+			</InputGroupAddon>
+			{children}
+		</InputGroup>
+	)
+}
+
+function ComboboxContent({
+	className,
+	side = 'bottom',
+	sideOffset = 6,
+	align = 'start',
+	alignOffset = 0,
+	anchor,
+	...props
+}: ComboboxPrimitive.Popup.Props &
+	Pick<
+		ComboboxPrimitive.Positioner.Props,
+		'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
+	>): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Portal>
+			<ComboboxPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				className="isolate z-50"
+			>
+				<ComboboxPrimitive.Popup
+					data-slot="combobox-content"
+					data-chips={!!anchor}
+					className={cn(
+						"group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-card text-card-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+						className,
+					)}
+					{...props}
+				/>
+			</ComboboxPrimitive.Positioner>
+		</ComboboxPrimitive.Portal>
+	)
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.List
+			data-slot="combobox-list"
+			className={cn(
+				'max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Item
+			data-slot="combobox-item"
+			className={cn(
+				"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ComboboxPrimitive.ItemIndicator
+				data-slot="combobox-item-indicator"
+				render={
+					<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+				}
+			>
+				<CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
+			</ComboboxPrimitive.ItemIndicator>
+		</ComboboxPrimitive.Item>
+	)
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Group
+			data-slot="combobox-group"
+			className={cn(className)}
+			{...props}
+		/>
+	)
+}
+
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.GroupLabel
+			data-slot="combobox-label"
+			className={cn(
+				'px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element {
+	return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Empty
+			data-slot="combobox-empty"
+			className={cn(
+				'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Separator
+			data-slot="combobox-separator"
+			className={cn('-mx-1 my-1 h-px bg-border', className)}
+			{...props}
+		/>
+	)
+}
+
+function ComboboxChips({
+	className,
+	...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Chips
+			data-slot="combobox-chips"
+			className={cn(
+				'flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function ComboboxChip({
+	className,
+	children,
+	showRemove = true,
+	...props
+}: ComboboxPrimitive.Chip.Props & {
+	showRemove?: boolean
+}): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Chip
+			data-slot="combobox-chip"
+			className={cn(
+				'flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showRemove && (
+				<ComboboxPrimitive.ChipRemove
+					render={<Button variant="ghost" size="icon" />}
+					className="-ml-1 opacity-50 hover:opacity-100"
+					data-slot="combobox-chip-remove"
+				>
+					<XIcon className="pointer-events-none" />
+				</ComboboxPrimitive.ChipRemove>
+			)}
+		</ComboboxPrimitive.Chip>
+	)
+}
+
+function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element {
+	return (
+		<ComboboxPrimitive.Input
+			data-slot="combobox-chip-input"
+			className={cn('min-w-16 flex-1 outline-none', className)}
+			{...props}
+		/>
+	)
+}
+
+function useComboboxAnchor(): React.RefObject<HTMLDivElement | null> {
+	return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+	Combobox,
+	ComboboxInput,
+	ComboboxContent,
+	ComboboxList,
+	ComboboxItem,
+	ComboboxGroup,
+	ComboboxLabel,
+	ComboboxCollection,
+	ComboboxEmpty,
+	ComboboxSeparator,
+	ComboboxChips,
+	ComboboxChip,
+	ComboboxChipsInput,
+	ComboboxTrigger,
+	ComboboxValue,
+	useComboboxAnchor,
+}

package/src/components/command.tsx

@@ -0,0 +1,170 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/command.tsx). Full credit to the Better Auth team.
+
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "./dialog";
+import { cn } from "../foundation/cn";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"bg-background text-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+}): React.JSX.Element {
+	return (
+		<Dialog {...props}>
+			<DialogContent
+				className={cn("overflow-hidden p-0", className)}
+				showCloseButton={showCloseButton}
+			>
+				<DialogHeader className="sr-only">
+					<DialogTitle>{title}</DialogTitle>
+					<DialogDescription>{description}</DialogDescription>
+				</DialogHeader>
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"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",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn(
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};