@hogoshi/ui 0.0.0-stage → 0.1.1

package/src/components/chart.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import {
+  Area,
+  AreaChart as AreaRoot,
+  Bar,
+  BarChart as BarRoot,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart as LineRoot,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { cn } from "../lib/cn";
+
+export type ChartConfig = Record<string, { label: string; color?: string }>;
+
+type Row = Record<string, string | number>;
+type Format = (value: number) => string;
+
+const compact = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
+const formatValue: Format = (value) => compact.format(value);
+const series = (key: string) => `var(--series-${key})`;
+
+const axis = {
+  axisLine: false,
+  tickLine: false,
+  tickMargin: 8,
+  tick: { fill: "var(--fg-subtle)", fontSize: 12 },
+} as const;
+
+const margin = { top: 8, right: 8, bottom: 0, left: 0 };
+
+function seriesVars(config: ChartConfig) {
+  return Object.fromEntries(
+    Object.entries(config).map(([key, item], index) => [`--series-${key}`, item.color ?? `var(--chart-${(index % 6) + 1})`]),
+  ) as CSSProperties;
+}
+
+function Dot({ name }: { name: string }) {
+  return <span className="size-2 shrink-0 rounded-full" style={{ background: series(name) }} />;
+}
+
+const ChartCursor = createContext<{ x: number; y: number } | null>(null);
+
+function TooltipCard({
+  active,
+  payload,
+  label,
+  config,
+  format,
+}: { active?: boolean; payload?: ReadonlyArray<{ name?: string | number; value?: string | number }>; label?: string | number; config: ChartConfig; format: Format }) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="bg-bg-elevated/60 border-border grid min-w-36 gap-1.5 rounded-[var(--radius-md)] border px-3 py-2 text-xs shadow-[var(--shadow-md)] backdrop-blur-2xl">
+      {label !== undefined && label !== "" ? <p className="text-fg font-medium">{label}</p> : null}
+      {payload.map((item) => {
+        const name = String(item.name);
+        return (
+          <div key={name} className="flex items-center gap-2">
+            <Dot name={name} />
+            <span className="text-fg-muted">{config[name]?.label ?? name}</span>
+            <span className="text-fg ml-auto pl-3 font-medium tabular-nums">{format(Number(item.value))}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ChartLegend({ config, className }: { config: ChartConfig; className?: string }) {
+  return (
+    <div className={cn("text-fg-muted flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs", className)}>
+      {Object.entries(config).map(([key, item]) => (
+        <span key={key} className="flex items-center gap-1.5">
+          <Dot name={key} />
+          {item.label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function ChartContainer({
+  config,
+  legend = false,
+  className,
+  overlay,
+  children,
+}: {
+  config: ChartConfig;
+  legend?: boolean;
+  className?: string;
+  overlay?: ReactNode;
+  children: ReactElement;
+}) {
+  const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null);
+  const frame = useRef(0);
+  const pending = useRef({ x: 0, y: 0 });
+
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+
+  const track = (event: PointerEvent<HTMLDivElement>) => {
+    const plot = event.currentTarget;
+    const root = plot.querySelector(".recharts-wrapper") ?? plot;
+    const box = root.getBoundingClientRect();
+    const tip = plot.querySelector(".recharts-tooltip-wrapper") as HTMLElement | null;
+    const tw = Math.max(tip?.offsetWidth ?? 0, 148);
+    const th = Math.max(tip?.offsetHeight ?? 0, 52);
+    const gap = 12;
+    const cx = event.clientX - box.left;
+    const cy = event.clientY - box.top;
+    let x = cx + gap;
+    let y = cy + gap;
+    if (x + tw > box.width) x = cx - tw - gap;
+    if (y + th > box.height) y = cy - th - gap;
+    pending.current = {
+      x: Math.min(Math.max(0, x), Math.max(0, box.width - tw)),
+      y: Math.min(Math.max(0, y), Math.max(0, box.height - th)),
+    };
+    if (frame.current) return;
+    frame.current = requestAnimationFrame(() => {
+      frame.current = 0;
+      setCursor({ ...pending.current });
+    });
+  };
+
+  return (
+    <ChartCursor.Provider value={cursor}>
+      <div style={seriesVars(config)} className="grid w-full gap-3">
+        <div
+          className={cn(
+            "hogoshi-chart relative h-64 w-full text-xs select-none outline-none [&_*]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none",
+            className,
+          )}
+          onMouseDown={(event) => event.preventDefault()}
+          onPointerEnter={track}
+          onPointerMove={track}
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            {children}
+          </ResponsiveContainer>
+          {overlay}
+        </div>
+        {legend ? <ChartLegend config={config} /> : null}
+      </div>
+    </ChartCursor.Provider>
+  );
+}
+
+export interface CartesianChartProps {
+  data: Row[];
+  index: string;
+  config: ChartConfig;
+  stacked?: boolean;
+  legend?: boolean;
+  grid?: boolean;
+  valueFormatter?: Format;
+  className?: string;
+}
+
+function ChartTooltip({ config, format, cursor }: { config: ChartConfig; format: Format; cursor: object | false }) {
+  const pos = useContext(ChartCursor);
+  const [smooth, setSmooth] = useState(false);
+
+  useEffect(() => {
+    if (!pos || smooth) return;
+    const id = requestAnimationFrame(() => setSmooth(true));
+    return () => cancelAnimationFrame(id);
+  }, [pos, smooth]);
+
+  return (
+    <Tooltip
+      cursor={cursor}
+      isAnimationActive={false}
+      allowEscapeViewBox={{ x: true, y: true }}
+      wrapperStyle={
+        pos
+          ? {
+              transform: `translate(${pos.x}px, ${pos.y}px)`,
+              transition: smooth ? "transform var(--motion-duration) var(--motion-ease)" : "none",
+            }
+          : { transition: "none" }
+      }
+      content={({ active, payload, label }) => (
+        <TooltipCard
+          active={active}
+          payload={payload?.map((item) => ({ name: item.name, value: Array.isArray(item.value) ? item.value[0] : item.value }))}
+          label={typeof label === "object" ? undefined : label}
+          config={config}
+          format={format}
+        />
+      )}
+    />
+  );
+}
+
+function Axes({ index, format, grid }: { index: string; format: Format; grid: boolean }) {
+  return [
+    grid ? <CartesianGrid key="grid" vertical={false} stroke="var(--border)" strokeDasharray="3 3" /> : null,
+    <XAxis key="x" dataKey={index} minTickGap={24} {...axis} />,
+    <YAxis key="y" width={40} tickFormatter={format} {...axis} />,
+  ];
+}
+
+export function AreaChart({ data, index, config, stacked, legend, grid = true, valueFormatter = formatValue, className }: CartesianChartProps) {
+  const id = useId().replaceAll(":", "");
+  const keys = Object.keys(config);
+  return (
+    <ChartContainer config={config} legend={legend} className={className}>
+      <AreaRoot data={data} margin={margin}>
+        <defs>
+          {keys.map((key) => (
+            <linearGradient key={key} id={`${id}-${key}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={series(key)} stopOpacity={0.32} />
+              <stop offset="100%" stopColor={series(key)} stopOpacity={0} />
+            </linearGradient>
+          ))}
+        </defs>
+        {Axes({ index, format: valueFormatter, grid })}
+        <ChartTooltip config={config} format={valueFormatter} cursor={{ stroke: "var(--border-strong)" }} />
+        {keys.map((key) => (
+          <Area
+            key={key}
+            name={key}
+            dataKey={key}
+            type="monotone"
+            stackId={stacked ? "stack" : undefined}
+            stroke={series(key)}
+            strokeWidth={2}
+            fill={`url(#${id}-${key})`}
+            activeDot={{ r: 4, strokeWidth: 0 }}
+          />
+        ))}
+      </AreaRoot>
+    </ChartContainer>
+  );
+}
+
+export function BarChart({
+  data,
+  index,
+  config,
+  stacked,
+  legend,
+  grid = true,
+  valueFormatter = formatValue,
+  className,
+}: CartesianChartProps) {
+  const keys = Object.keys(config);
+  return (
+    <ChartContainer config={config} legend={legend} className={className}>
+      <BarRoot data={data} margin={margin} barGap={4}>
+        {Axes({ index, format: valueFormatter, grid })}
+        <ChartTooltip config={config} format={valueFormatter} cursor={{ fill: "var(--bg-subtle)" }} />
+        {keys.map((key, at) => (
+          <Bar
+            key={key}
+            name={key}
+            dataKey={key}
+            fill={series(key)}
+            maxBarSize={36}
+            stackId={stacked ? "stack" : undefined}
+            radius={!stacked || at === keys.length - 1 ? [6, 6, 0, 0] : 0}
+          />
+        ))}
+      </BarRoot>
+    </ChartContainer>
+  );
+}
+
+export function LineChart({ data, index, config, legend, grid = true, valueFormatter = formatValue, className }: Omit<CartesianChartProps, "stacked">) {
+  const keys = Object.keys(config);
+  return (
+    <ChartContainer config={config} legend={legend} className={className}>
+      <LineRoot data={data} margin={margin}>
+        {Axes({ index, format: valueFormatter, grid })}
+        <ChartTooltip config={config} format={valueFormatter} cursor={{ stroke: "var(--border-strong)" }} />
+        {keys.map((key) => (
+          <Line
+            key={key}
+            name={key}
+            dataKey={key}
+            type="monotone"
+            stroke={series(key)}
+            strokeWidth={2}
+            dot={false}
+            activeDot={{ r: 4, strokeWidth: 0 }}
+          />
+        ))}
+      </LineRoot>
+    </ChartContainer>
+  );
+}
+
+export function DonutChart({
+  data,
+  nameKey,
+  valueKey,
+  config,
+  label,
+  legend = true,
+  valueFormatter = formatValue,
+  className,
+}: {
+  data: Row[];
+  nameKey: string;
+  valueKey: string;
+  config: ChartConfig;
+  label?: ReactNode;
+  legend?: boolean;
+  valueFormatter?: Format;
+  className?: string;
+}) {
+  const total = data.reduce((sum, row) => sum + Number(row[valueKey]), 0);
+  return (
+    <ChartContainer
+      config={config}
+      legend={legend}
+      className={cn("h-56", className)}
+      overlay={
+        <div className="hogoshi-chart-label pointer-events-none absolute inset-0 grid place-content-center text-center">
+          <span className="text-fg text-2xl font-semibold tabular-nums">{valueFormatter(total)}</span>
+          {label ? <span className="text-fg-muted text-xs">{label}</span> : null}
+        </div>
+      }
+    >
+      <PieChart>
+        <ChartTooltip config={config} format={valueFormatter} cursor={false} />
+        <Pie data={data} dataKey={valueKey} nameKey={nameKey} innerRadius="70%" outerRadius="100%" paddingAngle={2} cornerRadius={6} stroke="none">
+          {data.map((row) => (
+            <Cell key={String(row[nameKey])} fill={series(String(row[nameKey]))} />
+          ))}
+        </Pie>
+      </PieChart>
+    </ChartContainer>
+  );
+}
+
+export function Sparkline({
+  data,
+  dataKey,
+  color = "var(--chart-1)",
+  className,
+}: {
+  data: Row[];
+  dataKey: string;
+  color?: string;
+  className?: string;
+}) {
+  const id = useId().replaceAll(":", "");
+  return (
+    <div
+      className={cn("h-10 w-full select-none outline-none [&_svg]:outline-none", className)}
+      onMouseDown={(event) => event.preventDefault()}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaRoot data={data} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
+          <defs>
+            <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity={0.3} />
+              <stop offset="100%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <Area dataKey={dataKey} type="monotone" stroke={color} strokeWidth={1.5} fill={`url(#${id})`} isAnimationActive={false} />
+        </AreaRoot>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Tick02Icon } from "@hugeicons-pro/core-solid-rounded";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+
+export function Checkbox({ className, ...props }: ComponentProps<typeof BaseCheckbox.Root>) {
+  return (
+    <BaseCheckbox.Root
+      className={cn(
+        "border-border bg-bg-elevated text-accent-fg hover:border-border-strong flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[min(4px,var(--radius-sm))] border transition-colors duration-[var(--motion-duration)] outline-none",
+        "focus-visible:ring-ring focus-visible:ring-2",
+        "data-[checked]:border-accent data-[checked]:bg-accent data-[checked]:hover:bg-accent-hover",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:border-border",
+        className,
+      )}
+      {...props}
+    >
+      <BaseCheckbox.Indicator className="flex scale-100 items-center justify-center transition-transform duration-[var(--motion-duration)] data-[ending-style]:scale-0 data-[starting-style]:scale-0">
+        <Icon icon={Tick02Icon} size={12} />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+}

package/src/components/code-block.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import json from "highlight.js/lib/languages/json";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import { Copy01Icon, Tick02Icon } from "@hugeicons-pro/core-stroke-rounded";
+import { highlightJsx } from "../lib/jsx-highlight";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("ts", typescript);
+hljs.registerLanguage("tsx", xml);
+hljs.registerLanguage("jsx", xml);
+hljs.registerLanguage("javascript", typescript);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("html", xml);
+
+const languages = ["typescript", "ts", "tsx", "jsx", "javascript", "json", "bash", "html"] as const;
+const known = new Set<string>(languages);
+const jsxLanguages = new Set(["tsx", "jsx"]);
+
+const labels: Record<string, string> = {
+  typescript: "TS",
+  ts: "TS",
+  tsx: "TSX",
+  jsx: "JSX",
+  javascript: "JS",
+  json: "JSON",
+  bash: "Shell",
+  html: "HTML",
+  text: "Text",
+};
+
+function guess(code: string) {
+  const trimmed = code.trim();
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) return "json";
+  if (/^(pnpm|npm|yarn|bun|git|cd|ls|echo)\b/.test(trimmed) || trimmed.startsWith("$")) return "bash";
+  if (trimmed.includes("</") || trimmed.includes("/>")) return "tsx";
+  return null;
+}
+
+function highlight(code: string, language?: string) {
+  const hinted = language && language !== "auto" && known.has(language) ? language : guess(code);
+  if (hinted && jsxLanguages.has(hinted)) return { id: hinted, html: highlightJsx(code) };
+  if (hinted) return { id: hinted, html: hljs.highlight(code, { language: hinted, ignoreIllegals: true }).value };
+  const result = hljs.highlightAuto(code, [...languages]);
+  const id = result.language && known.has(result.language) ? result.language : "text";
+  return { id, html: id === "text" ? code.replaceAll("&", "&amp;").replaceAll("<", "&lt;") : result.value };
+}
+
+export function CodeBlock({
+  code,
+  language = "auto",
+  variant = "full",
+  showLanguage = true,
+  className,
+}: {
+  code: string;
+  language?: string;
+  variant?: "full" | "snippet";
+  showLanguage?: boolean;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  if (variant === "snippet") {
+    return (
+      <div className={cn("bg-bg-subtle flex max-w-full overflow-hidden rounded-[var(--radius-md)]", className)}>
+        <span className="bg-fg-subtle/35 w-1 shrink-0" />
+        <pre className="max-h-28 min-w-0 flex-1 overflow-auto px-3 py-2 font-mono text-xs whitespace-pre">{code}</pre>
+      </div>
+    );
+  }
+
+  const painted = highlight(code, language);
+  const copy = () => {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    });
+  };
+
+  return (
+    <div className={cn("border-border bg-bg-subtle relative w-full min-w-0 max-w-full overflow-hidden rounded-[var(--radius-md)] border", className)}>
+      <div className="absolute top-2 right-2 flex items-center gap-1.5">
+        {showLanguage ? <span className="text-fg-subtle text-[10px] font-medium tracking-wide uppercase">{labels[painted.id] ?? painted.id}</span> : null}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                aria-label={copied ? "Copied" : "Copy"}
+                className="text-fg-muted hover:bg-bg-muted hover:text-fg inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)]"
+                onClick={copy}
+              />
+            }
+          >
+            <Icon
+              icon={copied ? Tick02Icon : Copy01Icon}
+              variant="stroke"
+              size={14}
+              className={copied ? "text-success origin-center animate-[check-pop_var(--motion-duration)_var(--motion-ease)]" : undefined}
+            />
+          </TooltipTrigger>
+          <TooltipContent>{copied ? "Copied" : "Copy"}</TooltipContent>
+        </Tooltip>
+      </div>
+      <pre className="hogoshi-code w-full min-w-0 max-w-full p-4 pr-24 font-mono text-xs wrap-anywhere whitespace-pre-wrap">
+        <code className="wrap-anywhere whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: painted.html }} />
+      </pre>
+    </div>
+  );
+}

package/src/components/collapsible.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+export const Collapsible = BaseCollapsible.Root;
+
+export function CollapsibleTrigger({ className, ...props }: ComponentProps<typeof BaseCollapsible.Trigger>) {
+  return (
+    <BaseCollapsible.Trigger
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-1 rounded-[var(--radius-sm)] text-left outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CollapsiblePanel({ className, ...props }: ComponentProps<typeof BaseCollapsible.Panel>) {
+  return (
+    <BaseCollapsible.Panel
+      className={cn(
+        "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-[var(--motion-duration)] ease-[var(--motion-ease)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/command.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { useState, type ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Glide } from "./glide";
+import { SearchChrome, searchControlClass } from "./input";
+import { Kbd } from "./kbd";
+
+export function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn("text-fg flex h-full min-h-0 w-full flex-col overflow-hidden bg-transparent", className)}
+      {...props}
+    />
+  );
+}
+
+export function CommandDialog({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof CommandPrimitive.Dialog>) {
+  return (
+    <CommandPrimitive.Dialog
+      overlayClassName="hogoshi-command-overlay fixed inset-0 z-[var(--z-overlay)] bg-transparent backdrop-blur-2xl"
+      contentClassName="hogoshi-command border-border bg-bg-elevated/70 fixed top-[12vh] left-1/2 z-[var(--z-modal)] flex max-h-[min(32rem,calc(100dvh-8rem-var(--safe-bottom)))] w-[calc(100vw-2rem)] max-w-xl flex-col overflow-hidden rounded-[var(--radius-lg)] border shadow-[var(--shadow-lg)] backdrop-blur-xl outline-none"
+      className={cn("flex flex-col", className)}
+      {...props}
+    >
+      {children}
+    </CommandPrimitive.Dialog>
+  );
+}
+
+export function CommandInput({ className, value, onValueChange, ...props }: ComponentProps<typeof CommandPrimitive.Input>) {
+  const [query, setQuery] = useState(value ?? "");
+  const shown = value !== undefined ? value : query;
+  const change = (next: string) => {
+    setQuery(next);
+    onValueChange?.(next);
+  };
+  return (
+    <div className="border-border border-b px-2 py-2">
+      <SearchChrome value={shown} onClear={() => change("")}>
+        <CommandPrimitive.Input
+          {...props}
+          value={shown}
+          onValueChange={change}
+          className={cn(
+            searchControlClass,
+            "border-0 bg-transparent shadow-none hover:border-transparent focus-visible:border-transparent focus-visible:ring-0",
+            className,
+          )}
+        />
+      </SearchChrome>
+    </div>
+  );
+}
+
+export function CommandList({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={cn(
+        "relative max-h-[min(24rem,calc(100dvh-14rem))] touch-pan-y overflow-y-auto overscroll-contain p-1",
+        className,
+      )}
+      onTouchMove={(event) => event.stopPropagation()}
+      {...props}
+    >
+      <Glide selector="[cmdk-item][data-selected=true]" />
+      {children}
+    </CommandPrimitive.List>
+  );
+}
+
+export function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty className={cn("text-fg-muted py-6 text-center text-sm", className)} {...props} />;
+}
+
+export function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={cn(
+        "text-fg p-1 [&_[cmdk-group-heading]]:text-fg-subtle [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:uppercase",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-[var(--radius-sm)] px-2 py-2 text-sm outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CommandShortcut({ className, children, ...props }: ComponentProps<"span">) {
+  return (
+    <span className={cn("text-fg-muted ml-auto text-xs", className)} {...props}>
+      <Kbd>{children}</Kbd>
+    </span>
+  );
+}