import{g as y,x as c}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
\`btu-upload-item\` renders a single file's state inside a \`btu-upload\` file list. It is an **internal sub-component** — consumers should not create, query, or modify items directly. All interaction goes through \`btu-upload\` methods (\`setFileProgress\`, \`setFileStatus\`, \`setFileSymbol\`, \`removeFile\`).

These stories exist for design documentation and visual QA of each status state in isolation. In practice, items are always created, configured, and destroyed by their parent \`btu-upload\`.

<h3>Visual States:</h3>
<ul>
  <li><strong>Uploading / Pending</strong> — gray-300 border, progress bar visible, trash button</li>
  <li><strong>Complete</strong> — primary-500 border, progress at 100%, green checkmark badge</li>
  <li><strong>Error</strong> — error-25 background, error-300 border, "Upload failed…" text, original filename, "Try again" link, trash button</li>
</ul>

<h3>Icon Resolution:</h3>
<p>Icons auto-resolve from MIME type: <code>image/*</code> → <code>image</code>, <code>video/*</code> → <code>film</code>, document types → <code>file</code>, fallback → <code>upload-cloud</code>. Overridable per-file via <code>btu-upload.setFileSymbol(id, symbol)</code>.</p>

<h3>Internal Events:</h3>
<ul>
  <li><code>btu-upload-item-remove</code> — bubbles to parent \`btu-upload\`, which surfaces it as the public <code>btu-upload-file-removed</code> event</li>
  <li><code>btu-upload-item-retry</code> — bubbles to parent \`btu-upload\`, which surfaces it as the public <code>btu-upload-file-retry</code> event</li>
</ul>
        `}},actions:{handles:b},controls:{expanded:!0}},args:{...f},argTypes:{...h}},t={render:()=>e({name:"quarterly-report.pdf",mimeType:"application/pdf",size:16e6,status:"uploading",progress:40}),parameters:{docs:{description:{story:"The default in-progress state — gray border, linear progress bar with percentage label, and a trash button for cancelling."}}}},s={render:()=>e({name:"draft-notes.txt",mimeType:"text/plain",size:2400,status:"pending",progress:0}),parameters:{docs:{description:{story:"Rendered immediately after a file is added, before the consumer has started transferring. Visually identical to the uploading state at 0%."}}}},o={render:()=>e({name:"photo-vacation.jpg",mimeType:"image/jpeg",size:42e5,status:"complete",progress:100}),parameters:{docs:{description:{story:'Success state — primary-500 border, gray progress track, and a success-tinted emphasize icon with a one-shot pulse animation. Consumer triggers via `setFileStatus(id, "complete")`.'}}}},a={render:()=>e({name:"intro-video.mp4",mimeType:"video/mp4",size:208e6,status:"error",errorMessage:"Upload failed — server returned 503"}),parameters:{docs:{description:{story:'Error state — error-tinted background and border, error icon color, plus a "Try again" link that fires `btu-upload-item-retry` (surfaced as `btu-upload-file-retry` by the parent).'}}}},n={render:()=>c`
    <div class="flex flex-col gap-4">
      ${e({name:"uploading.pdf",mimeType:"application/pdf",size:24e5,status:"uploading",progress:62})}
      ${e({name:"complete.jpg",mimeType:"image/jpeg",size:11e5,status:"complete",progress:100})}
      ${e({name:"failed.mp4",mimeType:"video/mp4",size:64e6,status:"error",errorMessage:"Upload failed — network unreachable"})}
    </div>
  `,parameters:{docs:{description:{story:"Side-by-side comparison of the three terminal states: uploading, complete, error."}}}},i={render:()=>c`
    <div class="flex flex-col gap-4">
      ${e({name:"photo.jpg",mimeType:"image/jpeg",size:84e4,status:"uploading",progress:30})}
      ${e({name:"clip.mp4",mimeType:"video/mp4",size:32e6,status:"uploading",progress:30})}
      ${e({name:"contract.pdf",mimeType:"application/pdf",size:12e5,status:"uploading",progress:30})}
      ${e({name:"binary.bin",mimeType:"application/octet-stream",size:5e6,status:"uploading",progress:30})}
    </div>
  `,parameters:{docs:{description:{story:"Icon auto-resolution by MIME type: `image/*` → `image`, `video/*` → `film`, document types → `file`, everything else → `upload-cloud`."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  render: () => renderMockItem({
    name: 'quarterly-report.pdf',
    mimeType: 'application/pdf',
    size: 16_000_000,
    status: 'uploading',
    progress: 40
  }),
  parameters: {
    docs: {
      description: {
        story: 'The default in-progress state — gray border, linear progress bar with percentage label, and a trash button for cancelling.'
      }
    }
  }
}`,...t.parameters?.docs?.source},description:{story:"An upload item mid-transfer with a visible progress bar and remove button.",...t.parameters?.docs?.description}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => renderMockItem({
    name: 'draft-notes.txt',
    mimeType: 'text/plain',
    size: 2400,
    status: 'pending',
    progress: 0
  }),
  parameters: {
    docs: {
      description: {
        story: 'Rendered immediately after a file is added, before the consumer has started transferring. Visually identical to the uploading state at 0%.'
      }
    }
  }
}`,...s.parameters?.docs?.source},description:{story:"A freshly-added item awaiting its first progress update.",...s.parameters?.docs?.description}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  render: () => renderMockItem({
    name: 'photo-vacation.jpg',
    mimeType: 'image/jpeg',
    size: 4_200_000,
    status: 'complete',
    progress: 100
  }),
  parameters: {
    docs: {
      description: {
        story: 'Success state — primary-500 border, gray progress track, and a success-tinted emphasize icon with a one-shot pulse animation. Consumer triggers via \`setFileStatus(id, "complete")\`.'
      }
    }
  }
}`,...o.parameters?.docs?.source},description:{story:"A finished upload — 100% progress with a green checkmark badge.",...o.parameters?.docs?.description}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  render: () => renderMockItem({
    name: 'intro-video.mp4',
    mimeType: 'video/mp4',
    size: 208_000_000,
    status: 'error',
    errorMessage: 'Upload failed — server returned 503'
  }),
  parameters: {
    docs: {
      description: {
        story: 'Error state — error-tinted background and border, error icon color, plus a "Try again" link that fires \`btu-upload-item-retry\` (surfaced as \`btu-upload-file-retry\` by the parent).'
      }
    }
  }
}`,...a.parameters?.docs?.source},description:{story:'A failed upload with error message and "Try again" link.',...a.parameters?.docs?.description}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex flex-col gap-4">
      \${renderMockItem({
    name: 'uploading.pdf',
    mimeType: 'application/pdf',
    size: 2_400_000,
    status: 'uploading',
    progress: 62
  })}
      \${renderMockItem({
    name: 'complete.jpg',
    mimeType: 'image/jpeg',
    size: 1_100_000,
    status: 'complete',
    progress: 100
  })}
      \${renderMockItem({
    name: 'failed.mp4',
    mimeType: 'video/mp4',
    size: 64_000_000,
    status: 'error',
    errorMessage: 'Upload failed — network unreachable'
  })}
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Side-by-side comparison of the three terminal states: uploading, complete, error.'
      }
    }
  }
}`,...n.parameters?.docs?.source},description:{story:"Each status rendered side by side for visual comparison.",...n.parameters?.docs?.description}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex flex-col gap-4">
      \${renderMockItem({
    name: 'photo.jpg',
    mimeType: 'image/jpeg',
    size: 840_000,
    status: 'uploading',
    progress: 30
  })}
      \${renderMockItem({
    name: 'clip.mp4',
    mimeType: 'video/mp4',
    size: 32_000_000,
    status: 'uploading',
    progress: 30
  })}
      \${renderMockItem({
    name: 'contract.pdf',
    mimeType: 'application/pdf',
    size: 1_200_000,
    status: 'uploading',
    progress: 30
  })}
      \${renderMockItem({
    name: 'binary.bin',
    mimeType: 'application/octet-stream',
    size: 5_000_000,
    status: 'uploading',
    progress: 30
  })}
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Icon auto-resolution by MIME type: \`image/*\` → \`image\`, \`video/*\` → \`film\`, document types → \`file\`, everything else → \`upload-cloud\`.'
      }
    }
  }
}`,...i.parameters?.docs?.source},description:{story:"One item per MIME-to-icon mapping to verify `resolveFileSymbol()` output.",...i.parameters?.docs?.description}}};const z=["Uploading","Pending","Complete","Error","AllStates","IconVariants"];export{n as AllStates,o as Complete,a as Error,i as IconVariants,s as Pending,t as Uploading,z as __namedExportsOrder,k as default};
