4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2045,"use client"; import { Button } from "@repo/shadcn-ui/components/ui/button"; import { CropIcon, RotateCcwIcon } from "lucide-react"; import { Slot } from "radix-ui"; import { type ComponentProps, type CSSProperties, createContext, type MouseEvent, type ReactNode, type RefObject, type SyntheticEvent, useCallback, useContext, useEffect, useRef, useState, } from "react"; import ReactCrop, { centerCrop, makeAspectCrop, type PercentCrop, type PixelCrop, type ReactCropProps, } from "react-image-crop"; import { cn } from "@/lib/utils"; import "react-image-crop/dist/ReactCrop.css"; const centerAspectCrop = ( mediaWidth: number, mediaHeight: number, aspect: number | undefined ): PercentCrop => centerCrop( aspect ? makeAspectCrop( { unit: "%", width: 90, }, aspect, mediaWidth, mediaHeight ) : { x: 0, y: 0, width: 90, height: 90, unit: "%" }, mediaWidth, mediaHeight ); const getCroppedPngImage = async ( imageSrc: HTMLImageElement, scaleFactor: number, pixelCrop: PixelCrop, maxImageSize: number ): Promise => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); if (!ctx) { throw new Error("Context is null, this should never happen."); } const scaleX = imageSrc.naturalWidth / imageSrc.width; const scaleY = imageSrc.naturalHeight / imageSrc.height; ctx.imageSmoothingEnabled = false; canvas.width = pixelCrop.width; canvas.height = pixelCrop.height; ctx.drawImage( imageSrc, pixelCrop.x * scaleX, pixelCrop.y * scaleY, pixelCrop.width * scaleX, pixelCrop.height * scaleY, 0, 0, canvas.width, canvas.height ); const croppedImageUrl = canvas.toDataURL("image/png"); const response = await fetch(croppedImageUrl); const blob = await response.blob(); if (blob.size > maxImageSize) { return await getCroppedPngImage( imageSrc, scaleFactor * 0.9, pixelCrop, maxImageSize ); } return croppedImageUrl; }; type ImageCropContextType = { file: File; maxImageSize: number; imgSrc: string; crop: PercentCrop | undefined; completedCrop: PixelCrop | null; imgRef: RefObject; onCrop?: (croppedImage: string) => void; reactCropProps: Omit; handleChange: (pixelCrop: PixelCrop, percentCrop: PercentCrop) => void; handleComplete: ( pixelCrop: PixelCrop, percentCrop: PercentCrop ) => Promise; onImageLoad: (e: SyntheticEvent) => void; applyCrop: () => Promise; resetCrop: () => void; }; const ImageCropContext = createContext(null); const useImageCrop = () => { const context = useContext(ImageCropContext); if (!context) { throw new Error("ImageCrop components must be used within ImageCrop"); } return context; }; export type ImageCropProps = { file: File; maxImageSize?: number; onCrop?: (croppedImage: string) => void; children: ReactNode; onChange?: ReactCropProps["onChange"]; onComplete?: ReactCropProps["onComplete"]; } & Omit; export const ImageCrop = ({ file, maxImageSize = 1024 * 1024 * 5, onCrop, children, onChange, onComplete, ...reactCropProps }: ImageCropProps) => { const imgRef = useRef(null); const [imgSrc, setImgSrc] = useState(""); const [crop, setCrop] = useState(); const [completedCrop, setCompletedCrop] = useState(null); const [initialCrop, setInitialCrop] = useState(); useEffect(() => { const reader = new FileReader(); reader.addEventListener("load", () => setImgSrc(reader.result?.toString() || "") ); reader.readAsDataURL(file); }, [file]); const onImageLoad = useCallback( (e: SyntheticEvent) => { const { width, height } = e.currentTarget; const newCrop = centerAspectCrop(width, height, reactCropProps.aspect); setCrop(newCrop); setInitialCrop(newCrop); }, [reactCropProps.aspect] ); const handleChange = (pixelCrop: PixelCrop, percentCrop: PercentCrop) => { setCrop(percentCrop); onChange?.(pixelCrop, percentCrop); }; // biome-ignore lint/suspicious/useAwait: "onComplete is async" const handleComplete = async ( pixelCrop: PixelCrop, percentCrop: PercentCrop ) => { setCompletedCrop(pixelCrop); onComplete?.(pixelCrop, percentCrop); }; const applyCrop = async () => { if (!(imgRef.current && completedCrop)) { return; } const croppedImage = await getCroppedPngImage( imgRef.current, 1, completedCrop, maxImageSize ); onCrop?.(croppedImage); }; const resetCrop = () => { if (initialCrop) { setCrop(initialCrop); setCompletedCrop(null); } }; const contextValue: ImageCropContextType = { file, maxImageSize, imgSrc, crop, completedCrop, imgRef, onCrop, reactCropProps, handleChange, handleComplete, onImageLoad, applyCrop, resetCrop, }; return ( {children} ); }; export type ImageCropContentProps = { style?: CSSProperties; className?: string; }; export const ImageCropContent = ({ style, className, }: ImageCropContentProps) => { const { imgSrc, crop, handleChange, handleComplete, onImageLoad, imgRef, reactCropProps, } = useImageCrop(); const shadcnStyle = { "--rc-border-color": "var(--color-border)", "--rc-focus-color": "var(--color-primary)", } as CSSProperties; return ( {imgSrc && ( crop

)} ); }; export type ImageCropApplyProps = ComponentProps<"button"> & { asChild?: boolean; }; export const ImageCropApply = ({ asChild = false, children, onClick, ...props }: ImageCropApplyProps) => { const { applyCrop } = useImageCrop(); const handleClick = async (e: MouseEvent) => { await applyCrop(); onClick?.(e); }; if (asChild) { return ( {children} ); } return ( ); }; export type ImageCropResetProps = ComponentProps<"button"> & { asChild?: boolean; }; export const ImageCropReset = ({ asChild = false, children, onClick, ...props }: ImageCropResetProps) => { const { resetCrop } = useImageCrop(); const handleClick = (e: MouseEvent) => { resetCrop(); onClick?.(e); }; if (asChild) { return ( {children} ); } return ( ); }; // Keep the original Cropper component for backward compatibility export type CropperProps = Omit & { file: File; maxImageSize?: number; onCrop?: (croppedImage: string) => void; onChange?: ReactCropProps["onChange"]; }; export const Cropper = ({ onChange, onComplete, onCrop, style, className, file, maxImageSize, ...props }: CropperProps) => ( ); 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}],["$","li","react-image-crop",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-image-crop","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-image-crop"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/image-crop/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]