@poodle-kit/ui 0.1.0 → 0.3.0

package/dist/image-uploader-BFvQ4s0a.d.mts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/** 서버에서 받은 기존 이미지 */
+interface ExistingImage {
+    id: number | string;
+    url: string;
+    /** 이미지 순서 (정렬에 사용) */
+    sequence?: number;
+}
+/** 새로 선택한 파일 (미리보기 포함) */
+interface NewImageFile {
+    file: File;
+    /** `URL.createObjectURL()` 로 생성된 미리보기 URL */
+    preview: string;
+    /** React key / 삭제 식별자 */
+    id: string;
+}
+/** 유효성 검사 에러 Union 타입 */
+type ImageUploaderError = {
+    type: 'MAX_IMAGES';
+    message: string;
+    maxImages: number;
+} | {
+    type: 'MAX_SIZE';
+    message: string;
+    maxSizeMb: number;
+    file: File;
+} | {
+    type: 'INVALID_TYPE';
+    message: string;
+    file: File;
+    accept: string;
+};
+interface UseImageUploaderOptions {
+    /** 수정 모드에서 서버 이미지를 전달해요 */
+    initialImages?: ExistingImage[];
+    /** 최대 업로드 가능 이미지 수 (기본값: 4) */
+    maxImages?: number;
+    /** 파일 1개의 최대 크기 (MB). 미설정 시 제한 없음 */
+    maxSizeMb?: number;
+    /** 허용할 파일 형식 (기본값: 'image/*') */
+    accept?: string;
+    /** 현재 선택된 전체 File[] 배열이 변경될 때 호출돼요 */
+    onFileSelect?: (files: File[]) => void;
+    /** 기존 이미지가 삭제될 때 삭제된 id 배열을 전달해요 */
+    onDeleteExisting?: (deletedIds: Array<number | string>) => void;
+    /** 유효성 검사 실패 시 호출돼요 (toast 등 직접 처리) */
+    onError?: (error: ImageUploaderError) => void;
+}
+interface UseImageUploaderReturn {
+    /** 삭제되지 않은 기존 이미지 */
+    existingImages: ExistingImage[];
+    /** 새로 선택한 이미지 (미리보기 포함) */
+    newImages: NewImageFile[];
+    /** 기존 + 새 이미지 합산 개수 */
+    totalCount: number;
+    /** 드래그 활성 여부 */
+    isDragActive: boolean;
+    /** 파일 input 요소의 ref */
+    inputRef: react__default.RefObject<HTMLInputElement>;
+    /** 파일 선택 다이얼로그 열기 */
+    openFilePicker: () => void;
+    /** 기존 이미지 삭제 */
+    removeExisting: (id: number | string) => void;
+    /** 새로 선택한 이미지 삭제 */
+    removeNew: (id: string) => void;
+    /** drop zone에 spread할 drag 이벤트 핸들러 */
+    dragHandlers: {
+        onDragOver: react__default.DragEventHandler;
+        onDragLeave: react__default.DragEventHandler;
+        onDrop: react__default.DragEventHandler;
+    };
+    /** file input에 spread할 props */
+    inputProps: {
+        onChange: react__default.ChangeEventHandler<HTMLInputElement>;
+        accept: string;
+        multiple: boolean;
+    };
+}
+declare function useImageUploader({ initialImages, maxImages, maxSizeMb, accept, onFileSelect, onDeleteExisting, onError, }: UseImageUploaderOptions): UseImageUploaderReturn;
+
+declare const imageUploaderVariants: (props?: ({
+    layout?: "grid" | "row" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ImageUploaderProps extends UseImageUploaderOptions, VariantProps<typeof imageUploaderVariants> {
+    className?: string;
+    /** true이면 모든 인터랙션을 비활성화해요 */
+    disabled?: boolean;
+    /**
+     * 이미지 추가 버튼의 내용을 교체할 수 있어요.
+     * 기본값은 + 아이콘과 현재/최대 개수를 표시해요.
+     */
+    placeholder?: ReactNode;
+}
+declare const ImageUploader: react.ForwardRefExoticComponent<ImageUploaderProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ExistingImage as E, ImageUploader as I, type NewImageFile as N, type UseImageUploaderOptions as U, type ImageUploaderError as a, type ImageUploaderProps as b, type UseImageUploaderReturn as c, imageUploaderVariants as i, useImageUploader as u };

package/dist/image-uploader-BFvQ4s0a.d.ts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/** 서버에서 받은 기존 이미지 */
+interface ExistingImage {
+    id: number | string;
+    url: string;
+    /** 이미지 순서 (정렬에 사용) */
+    sequence?: number;
+}
+/** 새로 선택한 파일 (미리보기 포함) */
+interface NewImageFile {
+    file: File;
+    /** `URL.createObjectURL()` 로 생성된 미리보기 URL */
+    preview: string;
+    /** React key / 삭제 식별자 */
+    id: string;
+}
+/** 유효성 검사 에러 Union 타입 */
+type ImageUploaderError = {
+    type: 'MAX_IMAGES';
+    message: string;
+    maxImages: number;
+} | {
+    type: 'MAX_SIZE';
+    message: string;
+    maxSizeMb: number;
+    file: File;
+} | {
+    type: 'INVALID_TYPE';
+    message: string;
+    file: File;
+    accept: string;
+};
+interface UseImageUploaderOptions {
+    /** 수정 모드에서 서버 이미지를 전달해요 */
+    initialImages?: ExistingImage[];
+    /** 최대 업로드 가능 이미지 수 (기본값: 4) */
+    maxImages?: number;
+    /** 파일 1개의 최대 크기 (MB). 미설정 시 제한 없음 */
+    maxSizeMb?: number;
+    /** 허용할 파일 형식 (기본값: 'image/*') */
+    accept?: string;
+    /** 현재 선택된 전체 File[] 배열이 변경될 때 호출돼요 */
+    onFileSelect?: (files: File[]) => void;
+    /** 기존 이미지가 삭제될 때 삭제된 id 배열을 전달해요 */
+    onDeleteExisting?: (deletedIds: Array<number | string>) => void;
+    /** 유효성 검사 실패 시 호출돼요 (toast 등 직접 처리) */
+    onError?: (error: ImageUploaderError) => void;
+}
+interface UseImageUploaderReturn {
+    /** 삭제되지 않은 기존 이미지 */
+    existingImages: ExistingImage[];
+    /** 새로 선택한 이미지 (미리보기 포함) */
+    newImages: NewImageFile[];
+    /** 기존 + 새 이미지 합산 개수 */
+    totalCount: number;
+    /** 드래그 활성 여부 */
+    isDragActive: boolean;
+    /** 파일 input 요소의 ref */
+    inputRef: react__default.RefObject<HTMLInputElement>;
+    /** 파일 선택 다이얼로그 열기 */
+    openFilePicker: () => void;
+    /** 기존 이미지 삭제 */
+    removeExisting: (id: number | string) => void;
+    /** 새로 선택한 이미지 삭제 */
+    removeNew: (id: string) => void;
+    /** drop zone에 spread할 drag 이벤트 핸들러 */
+    dragHandlers: {
+        onDragOver: react__default.DragEventHandler;
+        onDragLeave: react__default.DragEventHandler;
+        onDrop: react__default.DragEventHandler;
+    };
+    /** file input에 spread할 props */
+    inputProps: {
+        onChange: react__default.ChangeEventHandler<HTMLInputElement>;
+        accept: string;
+        multiple: boolean;
+    };
+}
+declare function useImageUploader({ initialImages, maxImages, maxSizeMb, accept, onFileSelect, onDeleteExisting, onError, }: UseImageUploaderOptions): UseImageUploaderReturn;
+
+declare const imageUploaderVariants: (props?: ({
+    layout?: "grid" | "row" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ImageUploaderProps extends UseImageUploaderOptions, VariantProps<typeof imageUploaderVariants> {
+    className?: string;
+    /** true이면 모든 인터랙션을 비활성화해요 */
+    disabled?: boolean;
+    /**
+     * 이미지 추가 버튼의 내용을 교체할 수 있어요.
+     * 기본값은 + 아이콘과 현재/최대 개수를 표시해요.
+     */
+    placeholder?: ReactNode;
+}
+declare const ImageUploader: react.ForwardRefExoticComponent<ImageUploaderProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ExistingImage as E, ImageUploader as I, type NewImageFile as N, type UseImageUploaderOptions as U, type ImageUploaderError as a, type ImageUploaderProps as b, type UseImageUploaderReturn as c, imageUploaderVariants as i, useImageUploader as u };