@carefully-built/cli 0.1.1 → 0.1.2

package/registry/ui/file-dropzone/primitives/file-dropzone.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import { Check, FileText, Upload, X } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface FileDropzoneProps {
+  readonly accept?: string;
+  readonly browseLabel?: string;
+  readonly browseButtonClassName?: string;
+  readonly className?: string;
+  readonly currentPreviewUrl?: string | null;
+  readonly disabled?: boolean;
+  readonly emptyIcon?: React.ReactNode;
+  readonly helperText?: string;
+  readonly footerText?: string | null;
+  readonly inputClassName?: string;
+  readonly multiple?: boolean;
+  readonly onFileSelect: (file: File) => void;
+  readonly onFilesSelect?: (files: File[]) => void;
+  readonly onRemove?: () => void;
+  readonly previewAlt: string;
+  readonly title?: string;
+}
+
+function formatFileSize(size: number): string {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+
+  if (size < 1024 * 1024) {
+    return `${Math.round(size / 1024)} KB`;
+  }
+
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function getFileTypeLabel(file: File): string {
+  return file.type || file.name.split('.').pop()?.toUpperCase() || 'File';
+}
+
+export function FileDropzone({
+  accept,
+  browseLabel = 'Esplora',
+  browseButtonClassName,
+  className,
+  currentPreviewUrl = null,
+  disabled = false,
+  emptyIcon,
+  helperText,
+  footerText = 'Drag a file here or click the box to select one.',
+  inputClassName,
+  multiple = false,
+  onFileSelect,
+  onFilesSelect,
+  onRemove,
+  previewAlt,
+  title = 'Lascia qui o esplora file',
+}: FileDropzoneProps): React.ReactElement {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const hasSelectedFiles = selectedFiles.length > 0;
+
+  const openFilePicker = (): void => {
+    if (disabled) {
+      return;
+    }
+
+    inputRef.current?.click();
+  };
+
+  const handleFileSelection = (files: FileList | File[] | null | undefined): void => {
+    const selectedFiles = Array.from(files ?? []);
+    if (selectedFiles.length === 0 || disabled) {
+      return;
+    }
+
+    setSelectedFiles(selectedFiles);
+
+    if (multiple && onFilesSelect) {
+      onFilesSelect(selectedFiles);
+      return;
+    }
+
+    const firstFile = selectedFiles[0];
+    if (firstFile) {
+      onFileSelect(firstFile);
+    }
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    handleFileSelection(event.target.files);
+    event.target.value = '';
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+    handleFileSelection(event.dataTransfer.files);
+  };
+
+  const handleRemove = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    event.stopPropagation();
+    setSelectedFiles([]);
+    onRemove?.();
+  };
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        className="hidden"
+        onChange={handleInputChange}
+        disabled={disabled}
+      />
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled}
+        onClick={openFilePicker}
+        onKeyDown={(event): void => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openFilePicker();
+          }
+        }}
+        onDragEnter={(event): void => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (!disabled) {
+            setIsDragging(true);
+          }
+        }}
+        onDragOver={(event): void => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (!disabled) {
+            setIsDragging(true);
+          }
+        }}
+        onDragLeave={(event): void => {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsDragging(false);
+        }}
+        onDrop={handleDrop}
+        className={cn(
+          'bg-muted/30 relative flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed px-6 py-5 text-center transition-colors outline-none',
+          'border-primary/60 hover:bg-muted/50 focus-visible:ring-primary/20 focus-visible:ring-2',
+          isDragging && 'bg-muted/60',
+          disabled && 'cursor-not-allowed opacity-60',
+          className,
+        )}
+      >
+        {currentPreviewUrl ? (
+          <div className="bg-background relative flex min-h-40 w-full items-center justify-center overflow-hidden rounded-md">
+            <img src={currentPreviewUrl} alt={previewAlt} className="size-full object-contain" />
+            {onRemove ? (
+              <Button
+                type="button"
+                variant="destructive"
+                size="icon-xs"
+                className="absolute top-2 right-2 z-10"
+                onClick={handleRemove}
+                disabled={disabled}
+              >
+                <X className="size-3.5" />
+              </Button>
+            ) : null}
+            {hasSelectedFiles ? (
+              <div className="bg-background/95 absolute right-2 bottom-2 left-2 rounded-md border px-3 py-2 text-left shadow-sm backdrop-blur">
+                <p className="truncate text-sm font-medium">{selectedFiles[0]?.name}</p>
+                {selectedFiles[0] ? (
+                  <p className="text-muted-foreground text-xs">
+                    {getFileTypeLabel(selectedFiles[0])} | {formatFileSize(selectedFiles[0].size)}
+                  </p>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <>
+            <div className="text-primary mb-2 flex items-center justify-center">
+              {emptyIcon ?? <Upload className="size-5" />}
+            </div>
+            <div className="space-y-0.5">
+              <p className="text-foreground text-base font-medium">{title}</p>
+              {helperText ? <p className="text-muted-foreground text-sm">{helperText}</p> : null}
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              className={cn('mt-4 shadow-[0px_1px_1px_rgba(5,32,81,0.05)]', browseButtonClassName)}
+              onClick={(event): void => {
+                event.stopPropagation();
+                openFilePicker();
+              }}
+              disabled={disabled}
+            >
+              {browseLabel}
+            </Button>
+            {hasSelectedFiles ? (
+              <div className="mt-4 w-full space-y-2">
+                {selectedFiles.map((file) => (
+                  <div
+                    key={`${file.name}-${file.size}-${file.lastModified}`}
+                    className="bg-background flex min-w-0 items-center gap-3 rounded-md border px-3 py-2 text-left"
+                  >
+                    <FileText className="text-muted-foreground size-4 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-medium">{file.name}</p>
+                      <p className="text-muted-foreground text-xs">
+                        {getFileTypeLabel(file)} | {formatFileSize(file.size)}
+                      </p>
+                    </div>
+                    <Check className="text-primary size-4 shrink-0" />
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+      {footerText ? (
+        <p className={cn('text-muted-foreground mt-2 text-xs', inputClassName)}>{footerText}</p>
+      ) : null}
+    </>
+  );
+}

package/registry/ui/file-dropzone/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/help-info-button/manifest.json

@@ -0,0 +1,72 @@
+{
+  "name": "help-info-button",
+  "description": "Editable source registry entry for help-info-button.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "HelpInfoButton",
+    "HelpInfoButtonProps"
+  ],
+  "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": "overlays/responsive-sheet.layouts.tsx",
+      "target": "components/ui/responsive-sheet.layouts.tsx"
+    },
+    {
+      "source": "overlays/responsive-sheet.shortcuts.ts",
+      "target": "components/ui/responsive-sheet.shortcuts.ts"
+    },
+    {
+      "source": "overlays/responsive-sheet.tsx",
+      "target": "components/ui/responsive-sheet.tsx"
+    },
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "primitives/drawer.tsx",
+      "target": "components/ui/drawer.tsx"
+    },
+    {
+      "source": "primitives/help-info-button.tsx",
+      "target": "components/ui/help-info-button.tsx"
+    },
+    {
+      "source": "primitives/keyboard-shortcut-hint.tsx",
+      "target": "components/ui/keyboard-shortcut-hint.tsx"
+    },
+    {
+      "source": "primitives/sheet.tsx",
+      "target": "components/ui/sheet.tsx"
+    },
+    {
+      "source": "primitives/tooltip.tsx",
+      "target": "components/ui/tooltip.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    },
+    {
+      "source": "utils/use-media-query.ts",
+      "target": "components/ui/use-media-query.ts"
+    }
+  ]
+}

package/registry/ui/help-info-button/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/help-info-button/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>
+  );
+}