@1d1s/design-system 2.4.1 → 2.5.0

package/dist/components/ImagePicker/ImagePicker.d.ts

@@ -12,6 +12,13 @@ export interface ImagePickerProps {
     placeholderSubtitle?: string;
     /** 하단 도움말 텍스트 (기본값: "JPG, PNG, GIF 파일을 업로드할 수 있습니다.") */
     helperText?: string;
+    /**
+     * 허용 MIME 타입 목록. OS 파일 선택창 필터(accept)와 실제 검증(드래그
+     * 드롭 포함)에 모두 사용된다. 기본값은 JPG·PNG·GIF (webp/svg 등 차단).
+     */
+    acceptedTypes?: string[];
+    /** 허용되지 않은 타입 선택 시 호출 (기본: 무시) — 토스트 등 피드백용 */
+    onInvalidFile?: (file: File) => void;
     /** 선택 해제 버튼 텍스트 (기본값: "선택 해제") */
     clearLabel?: string;
     /**
@@ -47,4 +54,4 @@ export interface ImagePickerProps {
  * />
  * ```
  */
-export declare function ImagePicker({ previewUrl, onSelectFile, onClear, placeholderTitle, placeholderSubtitle, helperText, clearLabel, dropZoneClassName, className, }: ImagePickerProps): React.ReactElement;
+export declare function ImagePicker({ previewUrl, onSelectFile, onClear, placeholderTitle, placeholderSubtitle, helperText, acceptedTypes, onInvalidFile, clearLabel, dropZoneClassName, className, }: ImagePickerProps): React.ReactElement;

package/dist/index.es.js

@@ -213,14 +213,14 @@ return n("div",{className:pn("flex w-full flex-col gap-2",d),...u,children:[v.ma
 return e("div",{"data-slot":"heatmap",role:v?void 0:"img",className:pn("w-full",p),style:{display:"grid",gridTemplateRows:`repeat(${r}, 1fr)`,gridAutoFlow:"column",gridAutoColumns:"1fr",gap:i},...m,children:b.slice(0,g).map((t,n)=>{const r=Math.max(0,Math.min(4,Math.round(t)));return v?/* @__PURE__ */e(Bu,{index:n,level:r,color:h[r],cellRadius:l,ariaLabel:s?.(n,r),selected:y===n,onSelect:w,renderCellTooltip:c,renderCellActions:d,onCellClick:u,onCellHover:f},n):/* @__PURE__ */e("div",{"aria-label":s?.(n,r),style:{aspectRatio:"1",borderRadius:l,background:h[r]}},n)})})}const Bu=C.memo(({index:t,level:r,color:o,cellRadius:a,ariaLabel:i,selected:l,onSelect:s,renderCellTooltip:c,renderCellActions:d,onCellClick:u,onCellHover:f})=>{const[p,m]=C.useState(!1),h=C.useRef(null),g=C.useRef(!1),b=C.useRef(!1),v={index:t,level:r};C.useEffect(()=>{l||m(!1)},[l]);const y=()=>{null!==h.current&&(clearTimeout(h.current),h.current=null)};/* @__PURE__ */
 return n(Xd,{open:p,onOpenChange(e){if(!e){if(g.current)return void(g.current=!1);m(!1),l&&s(null),b.current=!0,setTimeout(()=>{b.current=!1},200)}},children:[
 /* @__PURE__ */e(Zd,{asChild:!0,children:/* @__PURE__ */e("button",{type:"button","aria-label":i,className:pn("cursor-pointer transition-[box-shadow,transform] duration-150 ease-out","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-800 focus-visible:ring-offset-1",l&&"ring-2 ring-gray-800 ring-offset-1"),style:{aspectRatio:"1",borderRadius:a,background:o,border:"none",padding:0},onMouseEnter(){y(),f?.(v),l||b.current||m(!0)},onMouseLeave(){f?.(null),l||(h.current=setTimeout(()=>m(!1),80))},onClick(){y(),l?(s(null),m(!1),b.current=!0,setTimeout(()=>{b.current=!1},200)):(g.current=!0,s(t),m(!0),u?.(v))}})}),
-/* @__PURE__ */e(Jd,{children:/* @__PURE__ */n(eu,{side:"top",sideOffset:4,onOpenAutoFocus(e){return e.preventDefault()},onMouseEnter:y,onMouseLeave(){l||m(!1)},className:pn("z-50 min-w-[120px] rounded-2 bg-gray-900 px-3 py-2 text-xs text-white shadow-default","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95","data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2"),children:[c?/* @__PURE__ */e("div",{className:"whitespace-nowrap text-xs",children:c(v)}):null,l&&d?/* @__PURE__ */e("div",{className:"mt-2",children:d(v)}):null]})})]})});function ju({previewUrl:t,onSelectFile:r,onClear:o,placeholderTitle:a="썸네일 영역을 클릭해 이미지를 선택하세요.",placeholderSubtitle:i="또는 이미지를 드래그해서 놓아주세요.",helperText:l="JPG, PNG, GIF 파일을 업로드할 수 있습니다.",clearLabel:s="선택 해제",dropZoneClassName:c="min-h-[220px] flex-1 lg:min-h-[440px]",className:d}){const u=k(null),[f,p]=N(!1),[m,h]=N(null),g=Boolean(t)&&m!==t,b=Boolean(t),v=()=>{u.current?.click()},y=e=>{e&&e.type.startsWith("image/")&&(h(null),r(e))};/* @__PURE__ */
-return n("div",{className:pn("flex h-full flex-col rounded-4 border border-gray-200 bg-white p-4",d),children:[
-/* @__PURE__ */n("div",{role:"button",tabIndex:0,"aria-label":"썸네일 이미지 선택",className:pn("relative flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-3 border bg-gray-100 transition outline-none","focus-visible:ring-2 focus-visible:ring-brand/30 focus-visible:ring-offset-2",c,f?"border-main-700 ring-3 ring-main-300":"border-gray-200 hover:border-gray-300"),onClick:v,onKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v())},onDragEnter(e){e.preventDefault(),p(!0)},onDragOver(e){e.preventDefault(),f||p(!0)},onDragLeave(e){e.preventDefault(),p(!1)},onDrop(e){e.preventDefault(),p(!1),y(e.dataTransfer.files?.[0]??null)},children:[g?/* @__PURE__ */e("img",{src:t,alt:"썸네일 미리보기",className:"absolute inset-0 h-full w-full object-cover",onError(){return h(t??null)}}):/* @__PURE__ */n("div",{className:"flex flex-col items-center gap-2 px-4 text-center",children:[
+/* @__PURE__ */e(Jd,{children:/* @__PURE__ */n(eu,{side:"top",sideOffset:4,onOpenAutoFocus(e){return e.preventDefault()},onMouseEnter:y,onMouseLeave(){l||m(!1)},className:pn("z-50 min-w-[120px] rounded-2 bg-gray-900 px-3 py-2 text-xs text-white shadow-default","animate-in fade-in-0 zoom-in-95","data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95","data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2"),children:[c?/* @__PURE__ */e("div",{className:"whitespace-nowrap text-xs",children:c(v)}):null,l&&d?/* @__PURE__ */e("div",{className:"mt-2",children:d(v)}):null]})})]})});function ju({previewUrl:t,onSelectFile:r,onClear:o,placeholderTitle:a="썸네일 영역을 클릭해 이미지를 선택하세요.",placeholderSubtitle:i="또는 이미지를 드래그해서 놓아주세요.",helperText:l="JPG, PNG, GIF 파일을 업로드할 수 있습니다.",acceptedTypes:s=["image/jpeg","image/png","image/gif"],onInvalidFile:c,clearLabel:d="선택 해제",dropZoneClassName:u="min-h-[220px] flex-1 lg:min-h-[440px]",className:f}){const p=k(null),[m,h]=N(!1),[g,b]=N(null),v=Boolean(t)&&g!==t,y=Boolean(t),w=()=>{p.current?.click()},x=e=>{e&&(s.includes(e.type)?(b(null),r(e)):c?.(e))};/* @__PURE__ */
+return n("div",{className:pn("flex h-full flex-col rounded-4 border border-gray-200 bg-white p-4",f),children:[
+/* @__PURE__ */n("div",{role:"button",tabIndex:0,"aria-label":"썸네일 이미지 선택",className:pn("relative flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-3 border bg-gray-100 transition outline-none","focus-visible:ring-2 focus-visible:ring-brand/30 focus-visible:ring-offset-2",u,m?"border-main-700 ring-3 ring-main-300":"border-gray-200 hover:border-gray-300"),onClick:w,onKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),w())},onDragEnter(e){e.preventDefault(),h(!0)},onDragOver(e){e.preventDefault(),m||h(!0)},onDragLeave(e){e.preventDefault(),h(!1)},onDrop(e){e.preventDefault(),h(!1),x(e.dataTransfer.files?.[0]??null)},children:[v?/* @__PURE__ */e("img",{src:t,alt:"썸네일 미리보기",className:"absolute inset-0 h-full w-full object-cover",onError(){return b(t??null)}}):/* @__PURE__ */n("div",{className:"flex flex-col items-center gap-2 px-4 text-center",children:[
 /* @__PURE__ */e(On,{size:"body2",weight:"medium",className:"text-gray-700",children:a}),
 /* @__PURE__ */e(On,{size:"caption1",weight:"regular",className:"text-gray-500",children:i})]}),
-/* @__PURE__ */e("input",{ref:u,type:"file",accept:"image/*",onChange(e){y(e.target.files?.[0]??null),e.target.value=""},className:"hidden"})]}),
+/* @__PURE__ */e("input",{ref:p,type:"file",accept:s.join(","),onChange(e){x(e.target.files?.[0]??null),e.target.value=""},className:"hidden"})]}),
 /* @__PURE__ */n("div",{className:"mt-4 flex items-center justify-between gap-3",children:[
-/* @__PURE__ */e(On,{size:"caption1",weight:"regular",className:"text-gray-500",children:l}),b&&o?/* @__PURE__ */e(Wn,{type:"button",variant:"secondary",size:"sm",className:"shrink-0",onClick:o,children:s}):null]})]})}function Hu({className:t,logoSize:n="md"}){/* @__PURE__ */
+/* @__PURE__ */e(On,{size:"caption1",weight:"regular",className:"text-gray-500",children:l}),y&&o?/* @__PURE__ */e(Wn,{type:"button",variant:"secondary",size:"sm",className:"shrink-0",onClick:o,children:d}):null]})]})}function Hu({className:t,logoSize:n="md"}){/* @__PURE__ */
 return e("div",{className:pn("flex items-center justify-center bg-brand-soft",t),children:/* @__PURE__ */e(Gn,{className:pn("text-main-500 animate-float",{sm:"w-4 h-6",md:"w-6 h-10",lg:"w-8 h-14"}[n])})})}function Yu(){/* @__PURE__ */
 return n("div",{className:"flex items-end gap-2",children:[
 /* @__PURE__ */e(Gn,{width:24,height:40,className:"text-gray-300"}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1d1s/design-system",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",