@1d1s/design-system 2.5.0 → 2.7.0

package/dist/components/ThumbnailPicker/ThumbnailPicker.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+export interface ThumbnailPickerProps {
+    /** 현재 미리보기 이미지 URL 목록 (순서 유지, blob:/data:/https: 모두 가능) */
+    previews: string[];
+    /** 파일 추가 선택 시 호출 — 여러 장 선택 가능, 남은 슬롯 수만큼 잘라 전달 */
+    onSelectFiles: (files: File[]) => void;
+    /** 특정 인덱스의 이미지를 제거할 때 호출 */
+    onRemove: (index: number) => void;
+    /**
+     * 최대 업로드 장수. 기본값은 무제한.
+     * `1` 로 주면 단일 업로드(첫 장 선택 후 추가 타일 숨김)로 동작한다.
+     */
+    max?: number;
+    /** 정사각형 한 변 크기(px). 기본값 150. */
+    size?: number;
+    /**
+     * 허용 MIME 타입. OS 파일 선택창 필터(accept)와 실제 검증(드래그 드롭
+     * 포함)에 모두 사용된다. 기본값 JPG·PNG·GIF (webp/svg 등 차단).
+     */
+    acceptedTypes?: string[];
+    /** 허용되지 않은 타입 선택 시 호출 (기본: 무시) — 토스트 등 피드백용 */
+    onInvalidFile?: (file: File) => void;
+    /** 하단 도움말 텍스트. 기본값 "JPG, PNG, GIF 파일을 업로드할 수 있습니다." */
+    helperText?: string;
+    /** 추가 타일 라벨. 기본값 "사진 추가". */
+    addLabel?: string;
+    /**
+     * 대표 이미지 인덱스. `onSelectPrimary` 와 함께 줄 때만 동작한다.
+     * 지정된 타일에 강조 테두리와 대표 뱃지를 표시한다. `undefined`/`-1`
+     * 이면 대표 없음.
+     */
+    primaryIndex?: number;
+    /**
+     * 타일을 클릭해 대표로 지정할 때 호출. 이 콜백을 주면 각 이미지 타일이
+     * 클릭 가능해진다(제거 버튼과 별개). 미지정이면 대표 선택 UI 비활성.
+     */
+    onSelectPrimary?: (index: number) => void;
+    /** 대표 뱃지 라벨. 기본값 "대표". */
+    primaryLabel?: string;
+    /** 전체 비활성화 여부 */
+    disabled?: boolean;
+    /** 추가 className (바깥 래퍼) */
+    className?: string;
+}
+/**
+ * ThumbnailPicker
+ * 정사각형 썸네일 형태의 이미지 선택 컴포넌트. 단일·다중 업로드를 모두 지원한다.
+ *
+ * - `max` 미지정: 무제한 다중 업로드
+ * - `max={1}`: 단일 업로드
+ *
+ * 클릭 또는 드래그 앤 드롭으로 이미지를 추가하고, 각 썸네일의 제거 버튼으로
+ * 개별 삭제한다. 상태(어떤 이미지가 선택됐는지)는 소비처가 소유한다.
+ *
+ * @example
+ * ```tsx
+ * // 다중
+ * <ThumbnailPicker
+ *   previews={urls}
+ *   onSelectFiles={(files) => addFiles(files)}
+ *   onRemove={(i) => removeAt(i)}
+ * />
+ * // 단일
+ * <ThumbnailPicker max={1} previews={url ? [url] : []} ... />
+ * ```
+ */
+export declare function ThumbnailPicker({ previews, onSelectFiles, onRemove, max, size, acceptedTypes, onInvalidFile, helperText, addLabel, primaryIndex, onSelectPrimary, primaryLabel, disabled, className, }: ThumbnailPickerProps): React.ReactElement;

package/dist/components/ThumbnailPicker/index.d.ts

@@ -0,0 +1 @@
+export * from './ThumbnailPicker';

package/dist/components/index.d.ts

@@ -42,6 +42,7 @@ export * from './Tabs';
 export * from './Tag';
 export * from './Text';
 export * from './TextField';
+export * from './ThumbnailPicker';
 export * from './Toast';
 export * from './Toggle';
 export * from './ToggleGroup';