62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T11b7,import { MotionProvider, type MotionPreference, } from "@/registry/cobalt/components/theme-provider/motion-provider"; import { useId, useRef, useState } from "react"; import { Input } from "@/registry/cobalt/ui/input/input"; import { Label } from "@/registry/cobalt/ui/label/label"; import { Button } from "@/registry/cobalt/ui/button/button"; import { useListMotion } from "@/registry/cobalt/components/theme-provider/motion-layout"; import { useDesignMotion } from "@/registry/cobalt/components/theme-provider/motion-provider"; export type FileUploadProps = { label: string; motion?: MotionPreference; accept?: string; multiple?: boolean; maxSize?: number; disabled?: boolean; onFilesChange?: (files: File[]) => void; onUpload?: (files: File[]) => Promise; }; export function acceptsFile(file: File, accept?: string) { return ( !accept || accept.split(",").some((rule) => { const r = rule.trim().toLowerCase(); return r.startsWith(".") ? file.name.toLowerCase().endsWith(r) : r.endsWith("/*") ? file.type.startsWith(r.slice(0, -1)) : file.type === r; }) ); } export function FileUpload({ label, accept, multiple = false, maxSize = 10 * 1024 * 1024, disabled, onFilesChange, onUpload, motion = "inherit", }: FileUploadProps) { const id = useId(); const [files, setFiles] = useState([]); const [errors, setErrors] = useState([]); const [state, setState] = useState<"idle" | "uploading" | "success" | "error">("idle"); const busy = useRef(false); const effective = useDesignMotion(motion); const motionRef = useListMotion( motion, JSON.stringify(files.map((file) => [file.name, file.size])), "li", ); async function upload() { if (!onUpload || busy.current || !files.length) return; busy.current = true; setState("uploading"); try { await onUpload(files); setState("success"); } catch { setState("error"); } finally { busy.current = false; } } return (

{label} 0 || undefined} onChange={(e) => { const incoming = Array.from(e.target.files ?? []); const valid: File[] = []; const messages: string[] = []; for (const file of incoming) { if (file.size > maxSize) messages.push(`${file.name}：サイズの上限を超えています。`); else if (!acceptsFile(file, accept)) messages.push(`${file.name}：対応していない形式です。`); else valid.push(file); } setFiles(valid); setErrors(messages); setState("idle"); onFilesChange?.(valid); e.target.value = ""; }} />

上限{Math.round((maxSize / 1024 / 1024) * 10) / 10}MB{accept ? `、形式：${accept}` : ""}

{files.length > 0 && (

{file.name}

)}

{errors.map((message) => (

{message}

))} {state === "error" && (

送信できませんでした。選択したファイルを保持しています。

)} {state === "success" && (

送信しました。

)}

{onUpload && ( )}

); } 61:["$","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":[null,["$","$L62",null,{"namespace":"@yukihi","registryDependencies":["@yukihi/cobalt-button","@yukihi/cobalt-design-system-styles","@yukihi/cobalt-input","@yukihi/cobalt-label","@yukihi/cobalt-theme-provider"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/cobalt/ui/file-upload/file-upload.tsx","content":"$64","type":"registry:ui","target":"@ui/file-upload.tsx"}],"className":"h-[70svh] min-h-80"}]]}]