@carefully-built/cli 0.1.0 → 0.1.2

package/registry/ui/responsive-sheet/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/overlays/responsive-sheet.layouts.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import type { SheetOutsideInteractionGuard } from '@/components/ui/responsive-sheet';
+import type { ResponsiveSheetClassNames } from '@/components/ui/responsive-sheet';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { cn } from '@/lib/utils';
+
+interface SheetDescriptionBlockProps {
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+function SheetDescriptionBlock({
+  title,
+  description,
+  classes,
+}: SheetDescriptionBlockProps): React.ReactElement {
+  return (
+    <>
+      <SheetTitle className={classes?.title}>{title}</SheetTitle>
+      {description ? (
+        <SheetDescription className={classes?.description}>{description}</SheetDescription>
+      ) : null}
+    </>
+  );
+}
+
+interface SharedSheetLayoutProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly modal: boolean;
+  readonly outsideInteractionGuard?: SheetOutsideInteractionGuard;
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children: ReactNode;
+  readonly footer: ReactNode;
+  readonly mobileDrawerContentClassName?: string;
+  readonly contentClassName?: string;
+  readonly footerClassName?: string;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+function shouldPreventOutsideInteraction(
+  target: EventTarget | null,
+  guard?: SheetOutsideInteractionGuard,
+): boolean {
+  const element =
+    target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+
+  if (!element) {
+    return false;
+  }
+
+  if (element.closest('[data-searchable-select-content]')) {
+    return true;
+  }
+
+  return guard?.selectors.some((selector) => element.closest(selector)) ?? false;
+}
+
+type MobileSheetLayoutProps = SharedSheetLayoutProps;
+
+export function MobileSheetLayout({
+  open,
+  onOpenChange,
+  modal,
+  outsideInteractionGuard,
+  title,
+  description,
+  children,
+  footer,
+  mobileDrawerContentClassName,
+  contentClassName,
+  footerClassName,
+  classes,
+}: MobileSheetLayoutProps): React.ReactElement {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} modal={modal}>
+      <DrawerContent
+        aria-describedby={description ? undefined : 'responsive-sheet-description-empty'}
+        className={cn(
+          'px-4 pb-[calc(env(safe-area-inset-bottom)+20px)]',
+          mobileDrawerContentClassName,
+          classes?.mobileContent,
+        )}
+        onInteractOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+        onPointerDownOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <DrawerHeader className={cn('px-0 pb-4', classes?.header)}>
+          <DrawerTitle className={classes?.title}>{title}</DrawerTitle>
+          {description ? (
+            <DrawerDescription className={classes?.description}>{description}</DrawerDescription>
+          ) : (
+            <DrawerDescription id="responsive-sheet-description-empty" className="sr-only">
+              Dialog
+            </DrawerDescription>
+          )}
+        </DrawerHeader>
+        <div className="flex min-h-0 flex-1 flex-col gap-4">
+          <div
+            className={cn(
+              '-mx-1 flex-1 overflow-y-auto px-1 pb-3 [scrollbar-gutter:stable]',
+              contentClassName,
+              classes?.body,
+            )}
+          >
+            {children}
+          </div>
+          {footer ? (
+            <div className={cn('shrink-0 border-t pt-4 pb-3', footerClassName, classes?.footer)}>
+              {footer}
+            </div>
+          ) : null}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+interface DesktopSheetLayoutProps extends SharedSheetLayoutProps {
+  readonly width: number;
+}
+
+export function DesktopSheetLayout({
+  open,
+  onOpenChange,
+  modal,
+  outsideInteractionGuard,
+  title,
+  description,
+  children,
+  footer,
+  width,
+  contentClassName,
+  footerClassName,
+  classes,
+}: DesktopSheetLayoutProps): React.ReactElement {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange} modal={modal}>
+      <SheetContent
+        aria-describedby={description ? undefined : 'responsive-sheet-description-empty'}
+        style={{ width: `${String(width)}px`, maxWidth: '85vw' }}
+        className={cn('flex flex-col gap-0 p-0', classes?.desktopContent)}
+        onInteractOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+        onPointerDownOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <SheetHeader className={cn('border-b px-4 py-4', classes?.header)}>
+          <SheetDescriptionBlock title={title} description={description} classes={classes} />
+        </SheetHeader>
+        {description ? null : (
+          <SheetDescription id="responsive-sheet-description-empty" className="sr-only">
+            Dialog
+          </SheetDescription>
+        )}
+        <div className="flex min-h-0 flex-1 flex-col">
+          <div
+            className={cn(
+              'flex-1 overflow-x-visible overflow-y-auto px-4 pt-4 pb-6 [scrollbar-gutter:stable]',
+              contentClassName,
+              classes?.body,
+            )}
+          >
+            {children}
+          </div>
+          {footer ? (
+            <div className={cn('border-t px-4 py-4', footerClassName, classes?.footer)}>
+              {footer}
+            </div>
+          ) : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/registry/ui/responsive-sheet/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]);
+}

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

@@ -0,0 +1,132 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { SheetActionFooter } from '@/components/ui/responsive-sheet.footer';
+import { DesktopSheetLayout, MobileSheetLayout } from '@/components/ui/responsive-sheet.layouts';
+import {
+  useDesktopConfirmShortcut,
+  useDesktopShortcutModifierLabel,
+} from '@/components/ui/responsive-sheet.shortcuts';
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/components/ui/use-media-query';
+
+export interface SheetOutsideInteractionGuard {
+  readonly selectors: readonly string[];
+}
+
+export interface ResponsiveSheetClassNames {
+  readonly desktopContent?: string;
+  readonly mobileContent?: string;
+  readonly header?: string;
+  readonly body?: string;
+  readonly footer?: string;
+  readonly title?: string;
+  readonly description?: string;
+}
+
+export interface ResponsiveSheetProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children: ReactNode;
+  readonly footer?: ReactNode;
+  readonly onCancel?: () => void;
+  readonly cancelLabel?: ReactNode;
+  readonly onConfirm?: () => void;
+  readonly confirmLabel?: ReactNode;
+  readonly confirmDisabled?: boolean;
+  readonly confirmLoading?: boolean;
+  readonly width?: number;
+  readonly modal?: boolean;
+  readonly outsideInteractionGuard?: SheetOutsideInteractionGuard;
+  readonly enableDesktopConfirmShortcut?: boolean;
+  readonly mobileDrawerContentClassName?: string;
+  readonly className?: string;
+  readonly contentClassName?: string;
+  readonly footerClassName?: string;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+export function ResponsiveSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  onCancel,
+  cancelLabel = 'Cancel',
+  onConfirm,
+  confirmLabel = 'Save',
+  confirmDisabled = false,
+  confirmLoading = false,
+  width = 550,
+  modal = true,
+  outsideInteractionGuard,
+  enableDesktopConfirmShortcut = true,
+  mobileDrawerContentClassName,
+  className,
+  contentClassName,
+  footerClassName,
+  classes,
+}: ResponsiveSheetProps): React.ReactElement {
+  const isMobile = useIsMobile();
+  const desktopConfirmShortcutEnabled =
+    !isMobile && enableDesktopConfirmShortcut && Boolean(onConfirm);
+  const desktopModifierLabel = useDesktopShortcutModifierLabel(desktopConfirmShortcutEnabled);
+
+  useDesktopConfirmShortcut({
+    open,
+    enabled: desktopConfirmShortcutEnabled,
+    confirmDisabled,
+    confirmLoading,
+    onConfirm: onConfirm
+      ? () => {
+          onConfirm();
+        }
+      : undefined,
+  });
+
+  const resolvedFooter = (
+    <SheetActionFooter
+      footer={footer}
+      onCancel={onCancel}
+      cancelLabel={cancelLabel}
+      onConfirm={onConfirm}
+      confirmLabel={confirmLabel}
+      confirmDisabled={confirmDisabled}
+      confirmLoading={confirmLoading}
+      desktopConfirmShortcutEnabled={desktopConfirmShortcutEnabled}
+      desktopModifierLabel={desktopModifierLabel}
+    />
+  );
+  const hasFooter = [footer, onCancel, onConfirm].some(
+    (value) => value !== null && value !== undefined,
+  );
+  const sharedLayoutProps = {
+    open,
+    onOpenChange,
+    modal,
+    outsideInteractionGuard,
+    title,
+    description,
+    footer: hasFooter ? resolvedFooter : null,
+    children,
+    contentClassName,
+    footerClassName,
+    mobileDrawerContentClassName,
+    classes: {
+      ...classes,
+      desktopContent: cn(className, classes?.desktopContent),
+      mobileContent: cn(className, mobileDrawerContentClassName, classes?.mobileContent),
+    },
+  };
+
+  return isMobile ? (
+    <MobileSheetLayout {...sharedLayoutProps} />
+  ) : (
+    <DesktopSheetLayout {...sharedLayoutProps} width={width} />
+  );
+}

package/registry/ui/responsive-sheet/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 };