@carefully-built/cli 0.1.1 → 0.1.2

package/registry/ui/responsive-sheet/primitives/drawer.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 backdrop-blur-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'bg-background group/drawer-content fixed z-50 flex h-auto flex-col overflow-visible text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground text-base font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+};

package/registry/ui/responsive-sheet/primitives/keyboard-shortcut-hint.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Command } from 'lucide-react';
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export function KeyboardKeycap({
+  children,
+  className,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <span
+      className={cn(
+        'inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] border px-1 text-[9px] font-semibold leading-none',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ShortcutModifierKeycap({
+  modifierLabel,
+  className,
+}: {
+  readonly modifierLabel: string;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <KeyboardKeycap className={className}>
+      {modifierLabel === 'Cmd' ? <Command className="size-[10px]" /> : 'Ctrl'}
+    </KeyboardKeycap>
+  );
+}

package/registry/ui/responsive-sheet/primitives/sheet.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 backdrop-blur-xs duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          'bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 overflow-visible bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:rounded-r-xl data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:rounded-l-xl data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+              <X className="size-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        ) : null}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground text-base font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle };

package/registry/ui/responsive-sheet/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/responsive-sheet/utils/use-media-query.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string, defaultValue = false): boolean {
+  const [matches, setMatches] = useState(defaultValue);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    const handleChange = (): void => {
+      setMatches(mediaQuery.matches);
+    };
+
+    handleChange();
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export function useIsMobile(maxWidth = 767): boolean {
+  return useMediaQuery(`(max-width: ${String(maxWidth)}px)`);
+}

package/registry/ui/responsive-sheet.footer/manifest.json

@@ -0,0 +1,40 @@
+{
+  "name": "responsive-sheet.footer",
+  "description": "Editable source registry entry for responsive-sheet.footer.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "DesktopConfirmShortcutHint",
+    "SheetActionFooter"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "overlays/responsive-sheet.footer.tsx",
+      "target": "components/ui/responsive-sheet.footer.tsx"
+    },
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "primitives/keyboard-shortcut-hint.tsx",
+      "target": "components/ui/keyboard-shortcut-hint.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/responsive-sheet.footer/overlays/responsive-sheet.footer.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { CornerDownLeft } from 'lucide-react';
+
+import type { ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { KeyboardKeycap, ShortcutModifierKeycap } from '@/components/ui/keyboard-shortcut-hint';
+
+export function DesktopConfirmShortcutHint({
+  desktopModifierLabel,
+}: {
+  readonly desktopModifierLabel: string;
+}): React.ReactElement {
+  const keycapClassName = 'border-primary-foreground/20 bg-primary-foreground/10';
+
+  return (
+    <span className="text-primary-foreground/70 inline-flex items-center gap-1">
+      <ShortcutModifierKeycap modifierLabel={desktopModifierLabel} className={keycapClassName} />
+      <KeyboardKeycap className={keycapClassName}>
+        <CornerDownLeft className="size-[10px]" />
+      </KeyboardKeycap>
+    </span>
+  );
+}
+
+interface SheetActionFooterProps {
+  readonly footer?: ReactNode;
+  readonly onCancel?: () => void;
+  readonly cancelLabel: ReactNode;
+  readonly onConfirm?: () => void;
+  readonly confirmLabel: ReactNode;
+  readonly confirmDisabled: boolean;
+  readonly confirmLoading: boolean;
+  readonly desktopConfirmShortcutEnabled?: boolean;
+  readonly desktopModifierLabel?: string | null;
+}
+
+export function SheetActionFooter({
+  footer,
+  onCancel,
+  cancelLabel,
+  onConfirm,
+  confirmLabel,
+  confirmDisabled,
+  confirmLoading,
+  desktopConfirmShortcutEnabled = false,
+  desktopModifierLabel = null,
+}: SheetActionFooterProps): React.ReactNode {
+  if (footer) return footer;
+
+  if (!onCancel && !onConfirm) return null;
+
+  const actionCount = Number(Boolean(onCancel)) + Number(Boolean(onConfirm));
+  const footerButtonClassName = actionCount === 1 ? 'w-full' : 'min-w-0 flex-1';
+
+  return (
+    <div className="flex w-full flex-nowrap items-center gap-2">
+      {onCancel ? (
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          className={footerButtonClassName}
+        >
+          {cancelLabel}
+        </Button>
+      ) : null}
+      {onConfirm ? (
+        <Button
+          type="button"
+          onClick={onConfirm}
+          disabled={confirmDisabled}
+          className={`${footerButtonClassName} relative`}
+        >
+          <span className="inline-flex w-full items-center justify-center">
+            <span>{confirmLoading ? 'Saving...' : confirmLabel}</span>
+            {desktopConfirmShortcutEnabled && desktopModifierLabel ? (
+              <span className="absolute top-1/2 right-2 -translate-y-1/2">
+                <DesktopConfirmShortcutHint desktopModifierLabel={desktopModifierLabel} />
+              </span>
+            ) : null}
+          </span>
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/registry/ui/responsive-sheet.footer/primitives/button.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariant =
+  | "default"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  readonly asChild?: boolean;
+  readonly size?: ButtonSize;
+  readonly variant?: ButtonVariant;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };

package/registry/ui/responsive-sheet.footer/primitives/keyboard-shortcut-hint.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Command } from 'lucide-react';
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export function KeyboardKeycap({
+  children,
+  className,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <span
+      className={cn(
+        'inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] border px-1 text-[9px] font-semibold leading-none',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ShortcutModifierKeycap({
+  modifierLabel,
+  className,
+}: {
+  readonly modifierLabel: string;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <KeyboardKeycap className={className}>
+      {modifierLabel === 'Cmd' ? <Command className="size-[10px]" /> : 'Ctrl'}
+    </KeyboardKeycap>
+  );
+}

package/registry/ui/responsive-sheet.footer/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/responsive-sheet.shortcuts/manifest.json

@@ -0,0 +1,34 @@
+{
+  "name": "responsive-sheet.shortcuts",
+  "description": "Editable source registry entry for responsive-sheet.shortcuts.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "getDesktopShortcutModifierLabel",
+    "isAllowedConfirmShortcutEvent",
+    "useDesktopConfirmShortcut",
+    "useDesktopShortcutModifierLabel"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "overlays/responsive-sheet.shortcuts.ts",
+      "target": "components/ui/responsive-sheet.shortcuts.ts"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/responsive-sheet.shortcuts/overlays/responsive-sheet.shortcuts.ts

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+
+interface NavigatorWithUserAgentData extends Navigator {
+  readonly userAgentData?: {
+    readonly platform?: string;
+  };
+}
+
+export function getDesktopShortcutModifierLabel(): string {
+  if (typeof navigator === "undefined") {
+    return "Ctrl";
+  }
+
+  const navigatorWithUserAgentData = navigator as NavigatorWithUserAgentData;
+  const platform =
+    navigatorWithUserAgentData.userAgentData?.platform ?? navigator.userAgent;
+
+  return /Mac|iPhone|iPad|iPod/i.test(platform) ? "Cmd" : "Ctrl";
+}
+
+export function isAllowedConfirmShortcutEvent(
+  event: KeyboardEvent,
+  desktopModifierLabel: string,
+): boolean {
+  if (event.key !== "Enter" || event.repeat || event.isComposing) {
+    return false;
+  }
+
+  const expectsMetaKey = desktopModifierLabel === "Cmd";
+  const usedExpectedModifier = expectsMetaKey ? event.metaKey : event.ctrlKey;
+  const usedOtherModifier = expectsMetaKey ? event.ctrlKey : event.metaKey;
+  const usedShiftModifier = event.shiftKey;
+  const usedAltModifier = event.altKey;
+
+  if (
+    !usedExpectedModifier ||
+    usedOtherModifier ||
+    usedShiftModifier ||
+    usedAltModifier
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function useDesktopShortcutModifierLabel(
+  enabled: boolean,
+): string | null {
+  const [desktopModifierLabel, setDesktopModifierLabel] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      setDesktopModifierLabel(null);
+      return;
+    }
+
+    setDesktopModifierLabel(getDesktopShortcutModifierLabel());
+  }, [enabled]);
+
+  return desktopModifierLabel;
+}
+
+interface UseDesktopConfirmShortcutOptions {
+  readonly open: boolean;
+  readonly enabled: boolean;
+  readonly confirmDisabled: boolean;
+  readonly confirmLoading: boolean;
+  readonly onConfirm?: () => void;
+}
+
+export function useDesktopConfirmShortcut({
+  open,
+  enabled,
+  confirmDisabled,
+  confirmLoading,
+  onConfirm,
+}: UseDesktopConfirmShortcutOptions): void {
+  useEffect(() => {
+    if (!open || !enabled || !onConfirm || confirmDisabled || confirmLoading) {
+      return;
+    }
+
+    const desktopModifierLabel = getDesktopShortcutModifierLabel();
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (!isAllowedConfirmShortcutEvent(event, desktopModifierLabel)) {
+        return;
+      }
+
+      event.preventDefault();
+      onConfirm();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [confirmDisabled, confirmLoading, enabled, onConfirm, open]);
+}