@nuralyui/file-upload 0.0.12 → 0.0.13

package/bundle.js

@@ -280,7 +280,7 @@ import{css as i,LitElement as e,html as t}from"lit";import{property as o,state a
     font-size: 16px;
   }
 }
-`,l={isImageFile:i=>i.type.startsWith("image/"),formatFileSize(i){if(0===i)return"0 B";const e=Math.floor(Math.log(i)/Math.log(1024));return parseFloat((i/Math.pow(1024,e)).toFixed(2))+" "+["B","KB","MB","GB","TB"][e]},createFilePreview:i=>new Promise((e=>{const t=new FileReader;t.onload=i=>{var t;e(null===(t=i.target)||void 0===t?void 0:t.result)},t.readAsDataURL(i)}))};var a=function(i,e,t,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o,l=i.length-1;l>=0;l--)(s=i[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},d=function(i,e,t,o){return new(t||(t=Promise))((function(s,r){function n(i){try{a(o.next(i))}catch(i){r(i)}}function l(i){try{a(o.throw(i))}catch(i){r(i)}}function a(i){var e;i.done?s(i.value):(e=i.value,e instanceof t?e:new t((function(i){i(e)}))).then(n,l)}a((o=o.apply(i,e||[])).next())}))};let h=class extends e{constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=i=>{i.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=i=>{i.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=i=>{i.target===this||this.contains(i.target)||(i.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=i=>{i.preventDefault();const e=i.composedPath().includes(this);this.isDragOver=!!e},this._onDrop=i=>{var e;i.preventDefault(),i.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(e=i.dataTransfer)||void 0===e?void 0:e.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:i.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:i.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(i.dataTransfer.files))},this._onClick=()=>{var i;null===(i=this.inputElement)||void 0===i||i.click()},this._onChange=i=>{const e=i.target;e.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.files,bubbles:!0,composed:!0})),this._handleFiles(e.files),e.value="")}}connectedCallback(){super.connectedCallback(),this.drag&&(document.addEventListener("dragenter",this._onDocumentDragEnter),document.addEventListener("dragleave",this._onDocumentDragLeave),document.addEventListener("drop",this._onDocumentDrop),document.addEventListener("dragover",this._onDocumentDragOver))}disconnectedCallback(){super.disconnectedCallback(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(i){var e;super.firstUpdated(i),this.inputElement=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="file"]'))||null}_handleFiles(i){return d(this,void 0,void 0,(function*(){if(this.multiple&&this.limit>0&&this.fileList.length+i.length>this.limit)return void this._dispatchEvent("exceed",{files:i});if(!this.multiple&&i.length>0){const e=i[i.length-1];this.previewImage&&this.fileList.some((i=>i.url===this.previewImage))&&(this.previewImage=null);const t=[...this.fileList];for(const i of t)this._dispatchEvent("remove",{file:i});this.fileList=[];const o=l.isImageFile(e),s={name:e.name,size:l.formatFileSize(e.size),raw:e,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(s.url=yield l.createFilePreview(e)),this.fileList=[s],this.requestUpdate(),void this._dispatchEvent("select",{files:[s],fileList:this.fileList})}const e=[];for(const t of Array.from(i)){const i=l.isImageFile(t),o={name:t.name,size:l.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:i};this.preview&&this.generatePreviewOnUpload&&i&&(o.url=yield l.createFilePreview(t)),this.fileList=[...this.fileList,o],e.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:e,fileList:this.fileList})}))}updateFileStatus(i,e,t){const o=this.fileList.find((e=>e.uid===i));o&&(o.status=e,void 0!==t&&(o.percentage=t),this._updateFile(o))}_updateFile(i){this.fileList=this.fileList.map((e=>e.uid===i.uid?i:e)),this.requestUpdate()}_removeFile(i){const e=this.fileList.find((e=>e.uid===i));this.fileList=this.fileList.filter((e=>e.uid!==i)),e&&this._dispatchEvent("remove",{file:e}),this.requestUpdate()}_dispatchEvent(i,e){this.dispatchEvent(new CustomEvent(`file-${i}`,{detail:e,bubbles:!0,composed:!0}))}_showPreview(i){this.previewImage=i}_closePreview(){this.previewImage=null}render(){return t`
+`,l={isImageFile:i=>i.type.startsWith("image/"),formatFileSize(i){if(0===i)return"0 B";const e=Math.floor(Math.log(i)/Math.log(1024));return parseFloat((i/Math.pow(1024,e)).toFixed(2))+" "+["B","KB","MB","GB","TB"][e]},createFilePreview:i=>new Promise(e=>{const t=new FileReader;t.onload=i=>{var t;e(null===(t=i.target)||void 0===t?void 0:t.result)},t.readAsDataURL(i)})};var a=function(i,e,t,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o,l=i.length-1;l>=0;l--)(s=i[l])&&(n=(r<3?s(n):r>3?s(e,t,n):s(e,t))||n);return r>3&&n&&Object.defineProperty(e,t,n),n},d=function(i,e,t,o){return new(t||(t=Promise))(function(s,r){function n(i){try{a(o.next(i))}catch(i){r(i)}}function l(i){try{a(o.throw(i))}catch(i){r(i)}}function a(i){var e;i.done?s(i.value):(e=i.value,e instanceof t?e:new t(function(i){i(e)})).then(n,l)}a((o=o.apply(i,e||[])).next())})};let h=class extends e{constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=i=>{i.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=i=>{i.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=i=>{i.target===this||this.contains(i.target)||(i.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=i=>{i.preventDefault();const e=i.composedPath().includes(this);this.isDragOver=!!e},this._onDrop=i=>{var e;i.preventDefault(),i.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(e=i.dataTransfer)||void 0===e?void 0:e.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:i.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:i.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(i.dataTransfer.files))},this._onClick=()=>{var i;null===(i=this.inputElement)||void 0===i||i.click()},this._onChange=i=>{const e=i.target;e.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.files,bubbles:!0,composed:!0})),this._handleFiles(e.files),e.value="")}}connectedCallback(){super.connectedCallback(),this.drag&&(document.addEventListener("dragenter",this._onDocumentDragEnter),document.addEventListener("dragleave",this._onDocumentDragLeave),document.addEventListener("drop",this._onDocumentDrop),document.addEventListener("dragover",this._onDocumentDragOver))}disconnectedCallback(){super.disconnectedCallback(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(i){var e;super.firstUpdated(i),this.inputElement=(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="file"]'))||null}_handleFiles(i){return d(this,void 0,void 0,function*(){if(this.multiple&&this.limit>0&&this.fileList.length+i.length>this.limit)return void this._dispatchEvent("exceed",{files:i});if(!this.multiple&&i.length>0){const e=i[i.length-1];this.previewImage&&this.fileList.some(i=>i.url===this.previewImage)&&(this.previewImage=null);const t=[...this.fileList];for(const i of t)this._dispatchEvent("remove",{file:i});this.fileList=[];const o=l.isImageFile(e),s={name:e.name,size:l.formatFileSize(e.size),raw:e,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(s.url=yield l.createFilePreview(e)),this.fileList=[s],this.requestUpdate(),void this._dispatchEvent("select",{files:[s],fileList:this.fileList})}const e=[];for(const t of Array.from(i)){const i=l.isImageFile(t),o={name:t.name,size:l.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:i};this.preview&&this.generatePreviewOnUpload&&i&&(o.url=yield l.createFilePreview(t)),this.fileList=[...this.fileList,o],e.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:e,fileList:this.fileList})})}updateFileStatus(i,e,t){const o=this.fileList.find(e=>e.uid===i);o&&(o.status=e,void 0!==t&&(o.percentage=t),this._updateFile(o))}_updateFile(i){this.fileList=this.fileList.map(e=>e.uid===i.uid?i:e),this.requestUpdate()}_removeFile(i){const e=this.fileList.find(e=>e.uid===i);this.fileList=this.fileList.filter(e=>e.uid!==i),e&&this._dispatchEvent("remove",{file:e}),this.requestUpdate()}_dispatchEvent(i,e){this.dispatchEvent(new CustomEvent(`file-${i}`,{detail:e,bubbles:!0,composed:!0}))}_showPreview(i){this.previewImage=i}_closePreview(){this.previewImage=null}render(){return t`
       <div class="upload" @drop=${this._onDrop} @dragover=${i=>i.preventDefault()}>
         <input 
           type="file" 
@@ -311,7 +311,7 @@ import{css as i,LitElement as e,html as t}from"lit";import{property as o,state a
         `}
 
         <div class="file-list">
-          ${this.fileList.map((i=>t`
+          ${this.fileList.map(i=>t`
             <div class="file-item">
               ${i.isImage?t`
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -371,7 +371,7 @@ import{css as i,LitElement as e,html as t}from"lit";import{property as o,state a
                 />
               </div>
             `:""}
-          `))}
+          `)}
         </div>
 
         ${this.previewImage?t`

package/file-upload.component.d.ts

@@ -1,6 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import { UploadFile } from './types.js';
-export declare class FileUpload extends LitElement {
+declare const FileUpload_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+export declare class FileUpload extends FileUpload_base {
     static styles: import("lit").CSSResult;
     accept: string;
     multiple: boolean;
@@ -16,6 +17,8 @@ export declare class FileUpload extends LitElement {
     dragCounter: number;
     previewImage: string | null;
     connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _updateThemeAttribute;
     disconnectedCallback(): void;
     firstUpdated(_changedProperties: PropertyValues): void;
     private _onDocumentDragEnter;
@@ -32,6 +35,7 @@ export declare class FileUpload extends LitElement {
     private _dispatchEvent;
     private _showPreview;
     private _closePreview;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
+export {};
 //# sourceMappingURL=file-upload.component.d.ts.map

package/file-upload.component.js

@@ -17,7 +17,8 @@ import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './styles.js';
 import { fileUtils } from './utils.js';
-let FileUpload = class FileUpload extends LitElement {
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.accept = '';
@@ -108,6 +109,7 @@ let FileUpload = class FileUpload extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this._updateThemeAttribute();
         if (this.drag) {
             document.addEventListener('dragenter', this._onDocumentDragEnter);
             document.addEventListener('dragleave', this._onDocumentDragLeave);
@@ -115,6 +117,20 @@ let FileUpload = class FileUpload extends LitElement {
             document.addEventListener('dragover', this._onDocumentDragOver);
         }
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this._updateThemeAttribute();
+    }
+    _updateThemeAttribute() {
+        // Use explicitTheme from mixin - only data-theme attribute, no system preference fallback
+        const theme = this.explicitTheme;
+        if (theme) {
+            this.setAttribute('data-theme', theme);
+        }
+        else {
+            this.removeAttribute('data-theme');
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.drag) {

package/file-upload.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.component.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { UploadFile } from './types.js';\nimport { styles } from './styles.js';\nimport { fileUtils } from './utils.js';\n\n@customElement('nr-file-upload')\nexport class FileUpload extends LitElement {\n  static override styles = styles;\n\n  @property({ type: String }) accept: string = '';\n  @property({ type: Boolean }) multiple: boolean = false;\n  @property({ type: Boolean }) drag: boolean = true;\n  @property({ type: String }) tip: string = '';\n  @property({ type: Number }) limit: number = 0;\n  @property({ type: Boolean }) preview: boolean = true;\n  @property({ type: Boolean }) generatePreviewOnUpload: boolean = false;\n\n  @state() fileList: UploadFile[] = [];\n  @state() isDragOver: boolean = false;\n  @state() showDragArea: boolean = false;\n  @state() inputElement: HTMLInputElement | null = null;\n  @state() dragCounter: number = 0;\n  @state() previewImage: string | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.drag) {\n      document.addEventListener('dragenter', this._onDocumentDragEnter);\n      document.addEventListener('dragleave', this._onDocumentDragLeave);\n      document.addEventListener('drop', this._onDocumentDrop);\n      document.addEventListener('dragover', this._onDocumentDragOver);\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.drag) {\n      document.removeEventListener('dragenter', this._onDocumentDragEnter);\n      document.removeEventListener('dragleave', this._onDocumentDragLeave);\n      document.removeEventListener('drop', this._onDocumentDrop);\n      document.removeEventListener('dragover', this._onDocumentDragOver);\n    }\n  }\n\n  override firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n    this.inputElement = this.shadowRoot?.querySelector('input[type=\"file\"]') || null;\n  }\n\n  private _onDocumentDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragCounter++;\n    \n    if (this.dragCounter === 1) {\n      this.showDragArea = true;\n    }\n  };\n\n  private _onDocumentDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragCounter--;\n    \n    if (this.dragCounter === 0) {\n      this.showDragArea = false;\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDocumentDrop = (e: DragEvent) => {\n    if (e.target !== this && !this.contains(e.target as Node)) {\n      e.preventDefault();\n      this.dragCounter = 0;\n      this.showDragArea = false;\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDocumentDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    \n    // Determine if the drag is over our component\n    const path = e.composedPath();\n    const isOverComponent = path.includes(this);\n    \n    if (isOverComponent) {\n      this.isDragOver = true;\n    } else {\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    this.dragCounter = 0;\n    this.isDragOver = false;\n    this.showDragArea = false;\n\n    if (e.dataTransfer?.files) {\n      this.dispatchEvent(\n        new CustomEvent(`files-changed`, {\n          detail: e.dataTransfer.files,\n          bubbles: true,\n          composed: true\n        })\n      );\n      \n      this.dispatchEvent(\n        new CustomEvent(`file-drop`, {\n          detail: { files: e.dataTransfer.files },\n          bubbles: true,\n          composed: true\n        })\n      );\n      \n      this._handleFiles(e.dataTransfer.files);\n    }\n  };\n\n  private _onClick = () => {\n    this.inputElement?.click();\n  };\n\n  private _onChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    if (target.files) {\n      this.dispatchEvent(\n        new CustomEvent(`files-changed`, {\n          detail: target.files,\n          bubbles: true,\n          composed: true\n        }\n      ));\n      \n      this._handleFiles(target.files);\n      target.value = ''; \n    }\n  };\n\n  private async _handleFiles(files: FileList) {\n    // Early check for multiple mode\n    if (this.multiple && this.limit > 0 && this.fileList.length + files.length > this.limit) {\n      this._dispatchEvent('exceed', { files });\n      return;\n    }\n    \n    // If not multiple, keep only the last file\n    if (!this.multiple && files.length > 0) {\n      // Get the last file from the FileList\n      const lastFile = files[files.length - 1];\n      \n      // If preview modal is showing a preview from a file that's being replaced, close it\n      if (this.previewImage && this.fileList.some(file => file.url === this.previewImage)) {\n        this.previewImage = null;\n      }\n      \n      // If there are existing files, dispatch remove events for each one\n      const oldFiles = [...this.fileList];\n      for (const file of oldFiles) {\n        this._dispatchEvent('remove', { file });\n      }\n      \n      // Clear the file list\n      this.fileList = [];\n      \n      // Process only the last file\n      const isImage = fileUtils.isImageFile(lastFile);\n      const fileObj: UploadFile = {\n        name: lastFile.name,\n        size: fileUtils.formatFileSize(lastFile.size),\n        raw: lastFile,\n        status: 'ready',\n        percentage: 0,\n        uid: Date.now() + Math.random().toString(36).substring(2),\n        isImage\n      };\n\n      if (this.preview && this.generatePreviewOnUpload && isImage) {\n        fileObj.url = await fileUtils.createFilePreview(lastFile);\n      }\n\n      this.fileList = [fileObj];\n      \n      this.requestUpdate();\n\n      // Emit file-selected event with the new file\n      this._dispatchEvent('select', { files: [fileObj], fileList: this.fileList });\n      \n      return;\n    }\n\n    // For multiple mode, process all files\n    const newFiles: UploadFile[] = [];\n\n    for (const file of Array.from(files)) {\n      const isImage = fileUtils.isImageFile(file);\n      const fileObj: UploadFile = {\n        name: file.name,\n        size: fileUtils.formatFileSize(file.size),\n        raw: file,\n        status: 'ready',\n        percentage: 0,\n        uid: Date.now() + Math.random().toString(36).substring(2),\n        isImage\n      };\n\n      if (this.preview && this.generatePreviewOnUpload && isImage) {\n        fileObj.url = await fileUtils.createFilePreview(file);\n      }\n\n      this.fileList = [...this.fileList, fileObj];\n      newFiles.push(fileObj);\n    }\n\n    this.requestUpdate();\n\n    // Emit file-selected event with the new files\n    this._dispatchEvent('select', { files: newFiles, fileList: this.fileList });\n  }\n\n  public updateFileStatus(uid: string, status: 'ready' | 'uploading' | 'success' | 'error', percentage?: number) {\n    const file = this.fileList.find(f => f.uid === uid);\n    \n    if (file) {\n      file.status = status;\n      if (percentage !== undefined) {\n        file.percentage = percentage;\n      }\n      this._updateFile(file);\n    }\n  }\n\n  private _updateFile(updatedFile: UploadFile) {\n    this.fileList = this.fileList.map(file =>\n      file.uid === updatedFile.uid ? updatedFile : file\n    );\n    this.requestUpdate();\n  }\n\n  private _removeFile(uid: string) {\n    const file = this.fileList.find(file => file.uid === uid);\n    this.fileList = this.fileList.filter(file => file.uid !== uid);\n    if (file) {\n      this._dispatchEvent('remove', { file });\n    }\n    this.requestUpdate();\n  }\n\n  private _dispatchEvent(name: string, data: any) {\n    this.dispatchEvent(new CustomEvent(`file-${name}`, {\n      detail: data,\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private _showPreview(url: string) {\n    this.previewImage = url;\n  }\n\n  private _closePreview() {\n    this.previewImage = null;\n  }\n\n  override render() {\n    return html`\n      <div class=\"upload\" @drop=${this._onDrop} @dragover=${(e: DragEvent) => e.preventDefault()}>\n        <input \n          type=\"file\" \n          class=\"hidden\" \n          accept=${this.accept}\n          ?multiple=${this.multiple}\n          @change=${this._onChange}\n        />\n\n        ${this.showDragArea ? html`\n          <div \n            class=\"upload-dragger ${this.isDragOver ? 'is-dragover' : ''}\" \n            @click=${this._onClick}\n          >\n            <div class=\"upload-icon\">\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                <polyline points=\"17 8 12 3 7 8\"></polyline>\n                <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n              </svg>\n            </div>\n            <div class=\"upload-text\">Drop file here or click to upload</div>\n            ${this.tip ? html`<div class=\"upload-tip\">${this.tip}</div>` : ''}\n          </div>\n        ` : html`\n        <nr-button  @click=${this._onClick}>Upload File</nr-button>\n          ${this.tip ? html`<div class=\"upload-tip\">${this.tip}</div>` : ''}\n        `}\n\n        <div class=\"file-list\">\n          ${this.fileList.map(file => html`\n            <div class=\"file-item\">\n              ${file.isImage ? html`\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n                  <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n                  <polyline points=\"21 15 16 10 5 21\"></polyline>\n                </svg>\n              ` : html`\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n                  <polyline points=\"14 2 14 8 20 8\"></polyline>\n                </svg>\n              `}\n              <div class=\"file-name\">${file.name}</div>\n              <div class=\"file-size\">${file.size}</div>\n              <div class=\"file-status\">\n                ${file.status === 'success' ? html`\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#67c23a\" stroke-width=\"2\">\n                    <polyline points=\"20 6 9 17 4 12\"></polyline>\n                  </svg>\n                ` : file.status === 'error' ? html`\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f56c6c\" stroke-width=\"2\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                ` : file.status === 'uploading' ? html`${file.percentage}%` : ''}\n              </div>\n              <div class=\"file-actions\">\n                ${file.isImage && file.url ? html`\n                  <button class=\"preview-icon\" @click=${() => this._showPreview(file.url!)}>\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                      <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                    </svg>\n                  </button>\n                ` : ''}\n                <button @click=${() => this._removeFile(file.uid)}>\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                </button>\n              </div>\n              ${file.status === 'uploading' ? html`\n                <div class=\"progress-bar\">\n                  <div class=\"progress-inner\" style=\"width: ${file.percentage}%\"></div>\n                </div>\n              ` : ''}\n            </div>\n            ${this.preview && file.isImage && file.url ? html`\n              <div class=\"file-preview\">\n                <img \n                  class=\"image-preview\" \n                  src=\"${file.url}\" \n                  alt=\"${file.name}\" \n                  @click=${() => this._showPreview(file.url!)}\n                />\n              </div>\n            ` : ''}\n          `)}\n        </div>\n\n        ${this.previewImage ? html`\n          <div class=\"preview-modal\" @click=${this._closePreview}>\n            <button class=\"preview-close\">×</button>\n            <img src=\"${this.previewImage}\" alt=\"Preview\" />\n          </div>\n        ` : ''}\n      </div>\n    `;\n  }\n}"]}
+{"version":3,"file":"file-upload.component.js","sourceRoot":"","sources":["../../../../src/components/file-upload/file-upload.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { UploadFile } from './types.js';\nimport { styles } from './styles.js';\nimport { fileUtils } from './utils.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n@customElement('nr-file-upload')\nexport class FileUpload extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  @property({ type: String }) accept: string = '';\n  @property({ type: Boolean }) multiple: boolean = false;\n  @property({ type: Boolean }) drag: boolean = true;\n  @property({ type: String }) tip: string = '';\n  @property({ type: Number }) limit: number = 0;\n  @property({ type: Boolean }) preview: boolean = true;\n  @property({ type: Boolean }) generatePreviewOnUpload: boolean = false;\n\n  @state() fileList: UploadFile[] = [];\n  @state() isDragOver: boolean = false;\n  @state() showDragArea: boolean = false;\n  @state() inputElement: HTMLInputElement | null = null;\n  @state() dragCounter: number = 0;\n  @state() previewImage: string | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._updateThemeAttribute();\n    if (this.drag) {\n      document.addEventListener('dragenter', this._onDocumentDragEnter);\n      document.addEventListener('dragleave', this._onDocumentDragLeave);\n      document.addEventListener('drop', this._onDocumentDrop);\n      document.addEventListener('dragover', this._onDocumentDragOver);\n    }\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    this._updateThemeAttribute();\n  }\n\n  private _updateThemeAttribute() {\n    // Use explicitTheme from mixin - only data-theme attribute, no system preference fallback\n    const theme = this.explicitTheme;\n\n    if (theme) {\n      this.setAttribute('data-theme', theme);\n    } else {\n      this.removeAttribute('data-theme');\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.drag) {\n      document.removeEventListener('dragenter', this._onDocumentDragEnter);\n      document.removeEventListener('dragleave', this._onDocumentDragLeave);\n      document.removeEventListener('drop', this._onDocumentDrop);\n      document.removeEventListener('dragover', this._onDocumentDragOver);\n    }\n  }\n\n  override firstUpdated(_changedProperties: PropertyValues) {\n    super.firstUpdated(_changedProperties);\n    this.inputElement = this.shadowRoot?.querySelector('input[type=\"file\"]') || null;\n  }\n\n  private _onDocumentDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragCounter++;\n    \n    if (this.dragCounter === 1) {\n      this.showDragArea = true;\n    }\n  };\n\n  private _onDocumentDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragCounter--;\n    \n    if (this.dragCounter === 0) {\n      this.showDragArea = false;\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDocumentDrop = (e: DragEvent) => {\n    if (e.target !== this && !this.contains(e.target as Node)) {\n      e.preventDefault();\n      this.dragCounter = 0;\n      this.showDragArea = false;\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDocumentDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    \n    // Determine if the drag is over our component\n    const path = e.composedPath();\n    const isOverComponent = path.includes(this);\n    \n    if (isOverComponent) {\n      this.isDragOver = true;\n    } else {\n      this.isDragOver = false;\n    }\n  };\n\n  private _onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    \n    this.dragCounter = 0;\n    this.isDragOver = false;\n    this.showDragArea = false;\n\n    if (e.dataTransfer?.files) {\n      this.dispatchEvent(\n        new CustomEvent(`files-changed`, {\n          detail: e.dataTransfer.files,\n          bubbles: true,\n          composed: true\n        })\n      );\n      \n      this.dispatchEvent(\n        new CustomEvent(`file-drop`, {\n          detail: { files: e.dataTransfer.files },\n          bubbles: true,\n          composed: true\n        })\n      );\n      \n      this._handleFiles(e.dataTransfer.files);\n    }\n  };\n\n  private _onClick = () => {\n    this.inputElement?.click();\n  };\n\n  private _onChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    if (target.files) {\n      this.dispatchEvent(\n        new CustomEvent(`files-changed`, {\n          detail: target.files,\n          bubbles: true,\n          composed: true\n        }\n      ));\n      \n      this._handleFiles(target.files);\n      target.value = ''; \n    }\n  };\n\n  private async _handleFiles(files: FileList) {\n    // Early check for multiple mode\n    if (this.multiple && this.limit > 0 && this.fileList.length + files.length > this.limit) {\n      this._dispatchEvent('exceed', { files });\n      return;\n    }\n    \n    // If not multiple, keep only the last file\n    if (!this.multiple && files.length > 0) {\n      // Get the last file from the FileList\n      const lastFile = files[files.length - 1];\n      \n      // If preview modal is showing a preview from a file that's being replaced, close it\n      if (this.previewImage && this.fileList.some(file => file.url === this.previewImage)) {\n        this.previewImage = null;\n      }\n      \n      // If there are existing files, dispatch remove events for each one\n      const oldFiles = [...this.fileList];\n      for (const file of oldFiles) {\n        this._dispatchEvent('remove', { file });\n      }\n      \n      // Clear the file list\n      this.fileList = [];\n      \n      // Process only the last file\n      const isImage = fileUtils.isImageFile(lastFile);\n      const fileObj: UploadFile = {\n        name: lastFile.name,\n        size: fileUtils.formatFileSize(lastFile.size),\n        raw: lastFile,\n        status: 'ready',\n        percentage: 0,\n        uid: Date.now() + Math.random().toString(36).substring(2),\n        isImage\n      };\n\n      if (this.preview && this.generatePreviewOnUpload && isImage) {\n        fileObj.url = await fileUtils.createFilePreview(lastFile);\n      }\n\n      this.fileList = [fileObj];\n      \n      this.requestUpdate();\n\n      // Emit file-selected event with the new file\n      this._dispatchEvent('select', { files: [fileObj], fileList: this.fileList });\n      \n      return;\n    }\n\n    // For multiple mode, process all files\n    const newFiles: UploadFile[] = [];\n\n    for (const file of Array.from(files)) {\n      const isImage = fileUtils.isImageFile(file);\n      const fileObj: UploadFile = {\n        name: file.name,\n        size: fileUtils.formatFileSize(file.size),\n        raw: file,\n        status: 'ready',\n        percentage: 0,\n        uid: Date.now() + Math.random().toString(36).substring(2),\n        isImage\n      };\n\n      if (this.preview && this.generatePreviewOnUpload && isImage) {\n        fileObj.url = await fileUtils.createFilePreview(file);\n      }\n\n      this.fileList = [...this.fileList, fileObj];\n      newFiles.push(fileObj);\n    }\n\n    this.requestUpdate();\n\n    // Emit file-selected event with the new files\n    this._dispatchEvent('select', { files: newFiles, fileList: this.fileList });\n  }\n\n  public updateFileStatus(uid: string, status: 'ready' | 'uploading' | 'success' | 'error', percentage?: number) {\n    const file = this.fileList.find(f => f.uid === uid);\n    \n    if (file) {\n      file.status = status;\n      if (percentage !== undefined) {\n        file.percentage = percentage;\n      }\n      this._updateFile(file);\n    }\n  }\n\n  private _updateFile(updatedFile: UploadFile) {\n    this.fileList = this.fileList.map(file =>\n      file.uid === updatedFile.uid ? updatedFile : file\n    );\n    this.requestUpdate();\n  }\n\n  private _removeFile(uid: string) {\n    const file = this.fileList.find(file => file.uid === uid);\n    this.fileList = this.fileList.filter(file => file.uid !== uid);\n    if (file) {\n      this._dispatchEvent('remove', { file });\n    }\n    this.requestUpdate();\n  }\n\n  private _dispatchEvent(name: string, data: any) {\n    this.dispatchEvent(new CustomEvent(`file-${name}`, {\n      detail: data,\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  private _showPreview(url: string) {\n    this.previewImage = url;\n  }\n\n  private _closePreview() {\n    this.previewImage = null;\n  }\n\n  override render() {\n    return html`\n      <div class=\"upload\" @drop=${this._onDrop} @dragover=${(e: DragEvent) => e.preventDefault()}>\n        <input \n          type=\"file\" \n          class=\"hidden\" \n          accept=${this.accept}\n          ?multiple=${this.multiple}\n          @change=${this._onChange}\n        />\n\n        ${this.showDragArea ? html`\n          <div \n            class=\"upload-dragger ${this.isDragOver ? 'is-dragover' : ''}\" \n            @click=${this._onClick}\n          >\n            <div class=\"upload-icon\">\n              <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>\n                <polyline points=\"17 8 12 3 7 8\"></polyline>\n                <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"></line>\n              </svg>\n            </div>\n            <div class=\"upload-text\">Drop file here or click to upload</div>\n            ${this.tip ? html`<div class=\"upload-tip\">${this.tip}</div>` : ''}\n          </div>\n        ` : html`\n        <nr-button  @click=${this._onClick}>Upload File</nr-button>\n          ${this.tip ? html`<div class=\"upload-tip\">${this.tip}</div>` : ''}\n        `}\n\n        <div class=\"file-list\">\n          ${this.fileList.map(file => html`\n            <div class=\"file-item\">\n              ${file.isImage ? html`\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n                  <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n                  <polyline points=\"21 15 16 10 5 21\"></polyline>\n                </svg>\n              ` : html`\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>\n                  <polyline points=\"14 2 14 8 20 8\"></polyline>\n                </svg>\n              `}\n              <div class=\"file-name\">${file.name}</div>\n              <div class=\"file-size\">${file.size}</div>\n              <div class=\"file-status\">\n                ${file.status === 'success' ? html`\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#67c23a\" stroke-width=\"2\">\n                    <polyline points=\"20 6 9 17 4 12\"></polyline>\n                  </svg>\n                ` : file.status === 'error' ? html`\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f56c6c\" stroke-width=\"2\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                ` : file.status === 'uploading' ? html`${file.percentage}%` : ''}\n              </div>\n              <div class=\"file-actions\">\n                ${file.isImage && file.url ? html`\n                  <button class=\"preview-icon\" @click=${() => this._showPreview(file.url!)}>\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\n                      <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n                    </svg>\n                  </button>\n                ` : ''}\n                <button @click=${() => this._removeFile(file.uid)}>\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                  </svg>\n                </button>\n              </div>\n              ${file.status === 'uploading' ? html`\n                <div class=\"progress-bar\">\n                  <div class=\"progress-inner\" style=\"width: ${file.percentage}%\"></div>\n                </div>\n              ` : ''}\n            </div>\n            ${this.preview && file.isImage && file.url ? html`\n              <div class=\"file-preview\">\n                <img \n                  class=\"image-preview\" \n                  src=\"${file.url}\" \n                  alt=\"${file.name}\" \n                  @click=${() => this._showPreview(file.url!)}\n                />\n              </div>\n            ` : ''}\n          `)}\n        </div>\n\n        ${this.previewImage ? html`\n          <div class=\"preview-modal\" @click=${this._closePreview}>\n            <button class=\"preview-close\">×</button>\n            <img src=\"${this.previewImage}\" alt=\"Preview\" />\n          </div>\n        ` : ''}\n      </div>\n    `;\n  }\n}"]}

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/file-upload/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA","sourcesContent":["export * from './file-upload.component.js'"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/file-upload/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA","sourcesContent":["export * from './file-upload.component.js'"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/file-upload",
-    "version": "0.0.12",
+    "version": "0.0.13",
     "description": "",
     "main": "index.js",
     "type": "module",

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/file-upload/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,UAAU,EAAE,aAAa;QACzB,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,cAAc;KAC5B;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { FileUpload } from './file-upload.component.js';\n\nexport const HyFileUpload = createComponent({\n  tagName: 'nr-file-upload',\n  elementClass: FileUpload,\n  react: React,\n  events: {\n    fileChange: 'file-change',\n    uploadComplete: 'upload-complete',\n    uploadError: 'upload-error',\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/file-upload/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,UAAU,EAAE,aAAa;QACzB,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,cAAc;KAC5B;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { FileUpload } from './file-upload.component.js';\n\nexport const HyFileUpload = createComponent({\n  tagName: 'nr-file-upload',\n  elementClass: FileUpload,\n  react: React,\n  events: {\n    fileChange: 'file-change',\n    uploadComplete: 'upload-complete',\n    uploadError: 'upload-error',\n  },\n});\n"]}

package/styles.js

@@ -2,15 +2,15 @@ import { css } from 'lit';
 export const styles = css `
 :host {
   display: block;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
 }
 .upload {
   width: 100%;
 }
 .upload-dragger {
-  background-color: #f8f9fa;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
+  background-color: var(--nuraly-color-surface, #f8f9fa);
+  border: 1px dashed var(--nuraly-color-border, #d9d9d9);
+  border-radius: var(--nuraly-border-radius-md, 6px);
   box-sizing: border-box;
   width: 100%;
   height: 180px;
@@ -18,48 +18,48 @@ export const styles = css `
   cursor: pointer;
   position: relative;
   overflow: hidden;
-  transition: border-color 0.3s;
+  transition: border-color var(--nuraly-transition-normal, 0.3s);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .upload-dragger:hover {
-  border-color: #409eff;
+  border-color: var(--nuraly-color-primary, #409eff);
 }
 .upload-dragger.is-dragover {
-  background-color: rgba(64, 158, 255, 0.06);
-  border-color: #409eff;
+  background-color: var(--nuraly-color-background-hover, rgba(64, 158, 255, 0.06));
+  border-color: var(--nuraly-color-primary, #409eff);
 }
 .upload-icon {
   font-size: 28px;
-  color: #c0c4cc;
+  color: var(--nuraly-color-text-tertiary, #c0c4cc);
   margin-bottom: 8px;
 }
 .upload-text {
-  color: #606266;
-  font-size: 14px;
+  color: var(--nuraly-color-text-secondary, #606266);
+  font-size: var(--nuraly-font-size-02, 14px);
   text-align: center;
   padding: 0 12px;
 }
 .upload-tip {
-  font-size: 12px;
-  color: #909399;
+  font-size: var(--nuraly-font-size-01, 12px);
+  color: var(--nuraly-color-text-tertiary, #909399);
   margin-top: 7px;
   padding: 0 12px;
 }
 .upload-button {
   padding: 8px 16px;
-  background-color: #409eff;
-  color: white;
+  background-color: var(--nuraly-color-primary, #409eff);
+  color: var(--nuraly-color-text-on-color, white);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--nuraly-border-radius-sm, 4px);
   cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
+  font-size: var(--nuraly-font-size-02, 14px);
+  transition: background-color var(--nuraly-transition-normal, 0.3s);
 }
 .upload-button:hover {
-  background-color: #66b1ff;
+  background-color: var(--nuraly-color-primary-hover, #66b1ff);
 }
 .file-list {
   margin-top: 10px;
@@ -69,36 +69,36 @@ export const styles = css `
   display: flex;
   align-items: center;
   margin-bottom: 8px;
-  transition: all 0.3s;
+  transition: all var(--nuraly-transition-normal, 0.3s);
   padding: 8px;
-  border-radius: 4px;
-  gap: 8px; 
+  border-radius: var(--nuraly-border-radius-sm, 4px);
+  gap: 8px;
   width: 100%;
   box-sizing: border-box;
-  min-width: 0; 
+  min-width: 0;
   flex-wrap: nowrap;
   overflow: hidden;
   max-width: 100%;
 }
 .file-item:hover {
-  background-color: #f8f9fa;
+  background-color: var(--nuraly-color-surface-hover, #f8f9fa);
 }
 .file-name {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #606266;
-  min-width: 0; 
+  color: var(--nuraly-color-text-secondary, #606266);
+  min-width: 0;
   max-width: 100%;
-  word-break: break-all; 
+  word-break: break-all;
   width: 0;
 }
 .file-size {
-  color: #909399;
-  font-size: 12px;
+  color: var(--nuraly-color-text-tertiary, #909399);
+  font-size: var(--nuraly-font-size-01, 12px);
   flex-shrink: 0;
-  margin-left: 8px; 
+  margin-left: 8px;
   white-space: nowrap;
 }
 .file-status {
@@ -116,17 +116,105 @@ export const styles = css `
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: #909399;
+  color: var(--nuraly-color-text-tertiary, #909399);
 }
 .file-actions button:hover {
-  color: #409eff;
+  color: var(--nuraly-color-primary, #409eff);
+}
+
+/* Dark theme support - using data-theme attribute */
+/* Support both :host-context (ancestor) and :host (direct) patterns */
+
+/* Upload dragger - dark theme */
+:host-context([data-theme*="dark"]) .upload-dragger,
+:host([data-theme*="dark"]) .upload-dragger {
+  background-color: var(--nuraly-color-layer-01, #262626);
+  border-color: var(--nuraly-color-border-subtle, #525252);
+}
+:host-context([data-theme*="dark"]) .upload-dragger:hover,
+:host([data-theme*="dark"]) .upload-dragger:hover {
+  border-color: var(--nuraly-color-button-primary, #78a9ff);
+}
+:host-context([data-theme*="dark"]) .upload-dragger.is-dragover,
+:host([data-theme*="dark"]) .upload-dragger.is-dragover {
+  background-color: rgba(120, 169, 255, 0.1);
+  border-color: var(--nuraly-color-button-primary, #78a9ff);
+}
+
+/* Upload icon - dark theme */
+:host-context([data-theme*="dark"]) .upload-icon,
+:host([data-theme*="dark"]) .upload-icon {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* Upload text - dark theme */
+:host-context([data-theme*="dark"]) .upload-text,
+:host([data-theme*="dark"]) .upload-text {
+  color: var(--nuraly-color-text-primary, #f4f4f4);
+}
+
+/* Upload tip - dark theme */
+:host-context([data-theme*="dark"]) .upload-tip,
+:host([data-theme*="dark"]) .upload-tip {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* File item - dark theme */
+:host-context([data-theme*="dark"]) .file-item,
+:host([data-theme*="dark"]) .file-item {
+  background-color: var(--nuraly-color-layer-01, #262626);
+  border-radius: var(--nuraly-border-radius-sm, 4px);
+}
+:host-context([data-theme*="dark"]) .file-item:hover,
+:host([data-theme*="dark"]) .file-item:hover {
+  background-color: var(--nuraly-color-layer-hover-01, #393939);
+}
+
+/* File name - dark theme */
+:host-context([data-theme*="dark"]) .file-name,
+:host([data-theme*="dark"]) .file-name {
+  color: var(--nuraly-color-text-primary, #f4f4f4);
+}
+
+/* File size - dark theme */
+:host-context([data-theme*="dark"]) .file-size,
+:host([data-theme*="dark"]) .file-size {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* File actions - dark theme */
+:host-context([data-theme*="dark"]) .file-actions button,
+:host([data-theme*="dark"]) .file-actions button {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+:host-context([data-theme*="dark"]) .file-actions button:hover,
+:host([data-theme*="dark"]) .file-actions button:hover {
+  color: var(--nuraly-color-button-primary, #78a9ff);
+}
+
+/* File item SVG icons - dark theme */
+:host-context([data-theme*="dark"]) .file-item > svg,
+:host([data-theme*="dark"]) .file-item > svg {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* Progress bar - dark theme */
+:host-context([data-theme*="dark"]) .progress-bar,
+:host([data-theme*="dark"]) .progress-bar {
+  background-color: var(--nuraly-color-border-subtle, #525252);
+}
+
+/* Preview modal - dark theme */
+:host-context([data-theme*="dark"]) .preview-modal,
+:host([data-theme*="dark"]) .preview-modal {
+  background-color: rgba(0, 0, 0, 0.85);
 }
 
 /* Progress bar styles - fixed to ensure full width */
 .progress-bar {
   height: 2px;
   width: 100%;
-  background-color: #e6e6e6;
+  background-color: var(--nuraly-color-border, #e6e6e6);
   margin-top: 4px;
   position: relative;
   border-radius: 2px;
@@ -134,7 +222,7 @@ export const styles = css `
 }
 .progress-inner {
   height: 100%;
-  background-color: #409eff;
+  background-color: var(--nuraly-color-primary, #409eff);
   position: absolute;
   left: 0;
   top: 0;
@@ -146,21 +234,21 @@ export const styles = css `
   position: absolute;
   right: 0;
   top: -18px;
-  font-size: 12px;
-  color: #409eff;
+  font-size: var(--nuraly-font-size-01, 12px);
+  color: var(--nuraly-color-primary, #409eff);
 }
 
 .hidden {
   display: none;
 }
 .success {
-  color: #67c23a;
+  color: var(--nuraly-color-success, #67c23a);
 }
 .error {
-  color: #f56c6c;
+  color: var(--nuraly-color-danger, #f56c6c);
 }
 .icon-delete {
-  color: #f56c6c;
+  color: var(--nuraly-color-danger, #f56c6c);
 }
 .file-preview {
   width: 100%;
@@ -170,7 +258,7 @@ export const styles = css `
   display: block;
   max-width: 100%;
   max-height: 200px;
-  border-radius: 4px;
+  border-radius: var(--nuraly-border-radius-sm, 4px);
   object-fit: contain;
   cursor: zoom-in;
 }
@@ -180,11 +268,11 @@ export const styles = css `
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--nuraly-color-background-overlay, rgba(0, 0, 0, 0.7));
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: var(--nuraly-z-modal, 1000);
 }
 .preview-modal img {
   max-width: 90%;
@@ -195,7 +283,7 @@ export const styles = css `
   position: absolute;
   top: 20px;
   right: 20px;
-  color: white;
+  color: var(--nuraly-color-text-inverse, white);
   font-size: 30px;
   background: none;
   border: none;
@@ -203,7 +291,7 @@ export const styles = css `
 }
 .preview-icon {
   padding: 4px;
-  color: #409eff;
+  color: var(--nuraly-color-primary, #409eff);
   cursor: zoom-in;
 }
 
@@ -218,26 +306,26 @@ export const styles = css `
 @media (max-width: 600px) {
   .upload-dragger {
     height: 140px;
-    padding: 12px;
+    padding: var(--nuraly-spacing-04, 12px);
   }
   .upload-icon {
     font-size: 24px;
   }
   .upload-text,
   .upload-tip {
-    font-size: 13px;
+    font-size: var(--nuraly-font-size-01, 13px);
   }
   .file-item {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-template-areas: 
+    grid-template-areas:
       "icon filename"
       "size status"
       "progress progress"
       "actions actions";
     gap: 4px 8px;
     align-items: center;
-    padding: 8px;
+    padding: var(--nuraly-spacing-03, 8px);
     width: 100%;
     box-sizing: border-box;
     overflow: hidden; /* Hide content that overflows */
@@ -278,7 +366,7 @@ export const styles = css `
   }
   .upload-button {
     width: 100%;
-    font-size: 16px;
+    font-size: var(--nuraly-font-size-03, 16px);
   }
 }
 `;

package/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/file-upload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0RxB,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`\n:host {\n  display: block;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n}\n.upload {\n  width: 100%;\n}\n.upload-dragger {\n  background-color: #f8f9fa;\n  border: 1px dashed #d9d9d9;\n  border-radius: 6px;\n  box-sizing: border-box;\n  width: 100%;\n  height: 180px;\n  text-align: center;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: border-color 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.upload-dragger:hover {\n  border-color: #409eff;\n}\n.upload-dragger.is-dragover {\n  background-color: rgba(64, 158, 255, 0.06);\n  border-color: #409eff;\n}\n.upload-icon {\n  font-size: 28px;\n  color: #c0c4cc;\n  margin-bottom: 8px;\n}\n.upload-text {\n  color: #606266;\n  font-size: 14px;\n  text-align: center;\n  padding: 0 12px;\n}\n.upload-tip {\n  font-size: 12px;\n  color: #909399;\n  margin-top: 7px;\n  padding: 0 12px;\n}\n.upload-button {\n  padding: 8px 16px;\n  background-color: #409eff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  transition: background-color 0.3s;\n}\n.upload-button:hover {\n  background-color: #66b1ff;\n}\n.file-list {\n  margin-top: 10px;\n  width: 100%;\n}\n.file-item {\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n  transition: all 0.3s;\n  padding: 8px;\n  border-radius: 4px;\n  gap: 8px; \n  width: 100%;\n  box-sizing: border-box;\n  min-width: 0; \n  flex-wrap: nowrap;\n  overflow: hidden;\n  max-width: 100%;\n}\n.file-item:hover {\n  background-color: #f8f9fa;\n}\n.file-name {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: #606266;\n  min-width: 0; \n  max-width: 100%;\n  word-break: break-all; \n  width: 0;\n}\n.file-size {\n  color: #909399;\n  font-size: 12px;\n  flex-shrink: 0;\n  margin-left: 8px; \n  white-space: nowrap;\n}\n.file-status {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.file-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0; /* Prevent shrinking */\n}\n.file-actions button {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: #909399;\n}\n.file-actions button:hover {\n  color: #409eff;\n}\n\n/* Progress bar styles - fixed to ensure full width */\n.progress-bar {\n  height: 2px;\n  width: 100%;\n  background-color: #e6e6e6;\n  margin-top: 4px;\n  position: relative;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.progress-inner {\n  height: 100%;\n  background-color: #409eff;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transition: width 0.3s ease;\n}\n\n/* Progress percentage indicator */\n.progress-percentage {\n  position: absolute;\n  right: 0;\n  top: -18px;\n  font-size: 12px;\n  color: #409eff;\n}\n\n.hidden {\n  display: none;\n}\n.success {\n  color: #67c23a;\n}\n.error {\n  color: #f56c6c;\n}\n.icon-delete {\n  color: #f56c6c;\n}\n.file-preview {\n  width: 100%;\n  margin-top: 4px;\n}\n.image-preview {\n  display: block;\n  max-width: 100%;\n  max-height: 200px;\n  border-radius: 4px;\n  object-fit: contain;\n  cursor: zoom-in;\n}\n.preview-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n.preview-modal img {\n  max-width: 90%;\n  max-height: 90%;\n  object-fit: contain;\n}\n.preview-close {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  color: white;\n  font-size: 30px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.preview-icon {\n  padding: 4px;\n  color: #409eff;\n  cursor: zoom-in;\n}\n\n/* File item container with progress bar */\n.file-container {\n  width: 100%;\n  position: relative;\n  overflow: hidden; /* Prevent child overflow */\n}\n\n/* Responsive styles */\n@media (max-width: 600px) {\n  .upload-dragger {\n    height: 140px;\n    padding: 12px;\n  }\n  .upload-icon {\n    font-size: 24px;\n  }\n  .upload-text,\n  .upload-tip {\n    font-size: 13px;\n  }\n  .file-item {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas: \n      \"icon filename\"\n      \"size status\"\n      \"progress progress\"\n      \"actions actions\";\n    gap: 4px 8px;\n    align-items: center;\n    padding: 8px;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden; /* Hide content that overflows */\n  }\n  .file-item > svg:first-child {\n    grid-area: icon;\n    align-self: start;\n  }\n  .file-name {\n    grid-area: filename;\n    margin: 0;\n    padding: 2px 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 0; /* Force shrinking to minimum width */\n    max-width: 100%; /* Ensure it doesn't exceed its container */\n    word-break: break-all; /* Break extremely long words if necessary */\n    flex: 1; /* Take available space */\n  }\n  .file-size {\n    grid-area: size;\n    margin: 0;\n  }\n  .file-status {\n    grid-area: status;\n    justify-self: end;\n  }\n  .progress-bar {\n    grid-area: progress;\n    width: 100%;\n  }\n  .file-actions {\n    grid-area: actions;\n    margin: 4px 0 0 0;\n    justify-content: flex-end;\n    width: 100%;\n  }\n  .upload-button {\n    width: 100%;\n    font-size: 16px;\n  }\n}\n`;"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/file-upload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkXxB,CAAC","sourcesContent":["import { css } from 'lit';\nexport const styles = css`\n:host {\n  display: block;\n  font-family: var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);\n}\n.upload {\n  width: 100%;\n}\n.upload-dragger {\n  background-color: var(--nuraly-color-surface, #f8f9fa);\n  border: 1px dashed var(--nuraly-color-border, #d9d9d9);\n  border-radius: var(--nuraly-border-radius-md, 6px);\n  box-sizing: border-box;\n  width: 100%;\n  height: 180px;\n  text-align: center;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: border-color var(--nuraly-transition-normal, 0.3s);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.upload-dragger:hover {\n  border-color: var(--nuraly-color-primary, #409eff);\n}\n.upload-dragger.is-dragover {\n  background-color: var(--nuraly-color-background-hover, rgba(64, 158, 255, 0.06));\n  border-color: var(--nuraly-color-primary, #409eff);\n}\n.upload-icon {\n  font-size: 28px;\n  color: var(--nuraly-color-text-tertiary, #c0c4cc);\n  margin-bottom: 8px;\n}\n.upload-text {\n  color: var(--nuraly-color-text-secondary, #606266);\n  font-size: var(--nuraly-font-size-02, 14px);\n  text-align: center;\n  padding: 0 12px;\n}\n.upload-tip {\n  font-size: var(--nuraly-font-size-01, 12px);\n  color: var(--nuraly-color-text-tertiary, #909399);\n  margin-top: 7px;\n  padding: 0 12px;\n}\n.upload-button {\n  padding: 8px 16px;\n  background-color: var(--nuraly-color-primary, #409eff);\n  color: var(--nuraly-color-text-on-color, white);\n  border: none;\n  border-radius: var(--nuraly-border-radius-sm, 4px);\n  cursor: pointer;\n  font-size: var(--nuraly-font-size-02, 14px);\n  transition: background-color var(--nuraly-transition-normal, 0.3s);\n}\n.upload-button:hover {\n  background-color: var(--nuraly-color-primary-hover, #66b1ff);\n}\n.file-list {\n  margin-top: 10px;\n  width: 100%;\n}\n.file-item {\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px;\n  transition: all var(--nuraly-transition-normal, 0.3s);\n  padding: 8px;\n  border-radius: var(--nuraly-border-radius-sm, 4px);\n  gap: 8px;\n  width: 100%;\n  box-sizing: border-box;\n  min-width: 0;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  max-width: 100%;\n}\n.file-item:hover {\n  background-color: var(--nuraly-color-surface-hover, #f8f9fa);\n}\n.file-name {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--nuraly-color-text-secondary, #606266);\n  min-width: 0;\n  max-width: 100%;\n  word-break: break-all;\n  width: 0;\n}\n.file-size {\n  color: var(--nuraly-color-text-tertiary, #909399);\n  font-size: var(--nuraly-font-size-01, 12px);\n  flex-shrink: 0;\n  margin-left: 8px;\n  white-space: nowrap;\n}\n.file-status {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.file-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0; /* Prevent shrinking */\n}\n.file-actions button {\n  background: none;\n  border: none;\n  padding: 4px;\n  cursor: pointer;\n  color: var(--nuraly-color-text-tertiary, #909399);\n}\n.file-actions button:hover {\n  color: var(--nuraly-color-primary, #409eff);\n}\n\n/* Dark theme support - using data-theme attribute */\n/* Support both :host-context (ancestor) and :host (direct) patterns */\n\n/* Upload dragger - dark theme */\n:host-context([data-theme*=\"dark\"]) .upload-dragger,\n:host([data-theme*=\"dark\"]) .upload-dragger {\n  background-color: var(--nuraly-color-layer-01, #262626);\n  border-color: var(--nuraly-color-border-subtle, #525252);\n}\n:host-context([data-theme*=\"dark\"]) .upload-dragger:hover,\n:host([data-theme*=\"dark\"]) .upload-dragger:hover {\n  border-color: var(--nuraly-color-button-primary, #78a9ff);\n}\n:host-context([data-theme*=\"dark\"]) .upload-dragger.is-dragover,\n:host([data-theme*=\"dark\"]) .upload-dragger.is-dragover {\n  background-color: rgba(120, 169, 255, 0.1);\n  border-color: var(--nuraly-color-button-primary, #78a9ff);\n}\n\n/* Upload icon - dark theme */\n:host-context([data-theme*=\"dark\"]) .upload-icon,\n:host([data-theme*=\"dark\"]) .upload-icon {\n  color: var(--nuraly-color-text-secondary, #8d8d8d);\n}\n\n/* Upload text - dark theme */\n:host-context([data-theme*=\"dark\"]) .upload-text,\n:host([data-theme*=\"dark\"]) .upload-text {\n  color: var(--nuraly-color-text-primary, #f4f4f4);\n}\n\n/* Upload tip - dark theme */\n:host-context([data-theme*=\"dark\"]) .upload-tip,\n:host([data-theme*=\"dark\"]) .upload-tip {\n  color: var(--nuraly-color-text-secondary, #8d8d8d);\n}\n\n/* File item - dark theme */\n:host-context([data-theme*=\"dark\"]) .file-item,\n:host([data-theme*=\"dark\"]) .file-item {\n  background-color: var(--nuraly-color-layer-01, #262626);\n  border-radius: var(--nuraly-border-radius-sm, 4px);\n}\n:host-context([data-theme*=\"dark\"]) .file-item:hover,\n:host([data-theme*=\"dark\"]) .file-item:hover {\n  background-color: var(--nuraly-color-layer-hover-01, #393939);\n}\n\n/* File name - dark theme */\n:host-context([data-theme*=\"dark\"]) .file-name,\n:host([data-theme*=\"dark\"]) .file-name {\n  color: var(--nuraly-color-text-primary, #f4f4f4);\n}\n\n/* File size - dark theme */\n:host-context([data-theme*=\"dark\"]) .file-size,\n:host([data-theme*=\"dark\"]) .file-size {\n  color: var(--nuraly-color-text-secondary, #8d8d8d);\n}\n\n/* File actions - dark theme */\n:host-context([data-theme*=\"dark\"]) .file-actions button,\n:host([data-theme*=\"dark\"]) .file-actions button {\n  color: var(--nuraly-color-text-secondary, #8d8d8d);\n}\n:host-context([data-theme*=\"dark\"]) .file-actions button:hover,\n:host([data-theme*=\"dark\"]) .file-actions button:hover {\n  color: var(--nuraly-color-button-primary, #78a9ff);\n}\n\n/* File item SVG icons - dark theme */\n:host-context([data-theme*=\"dark\"]) .file-item > svg,\n:host([data-theme*=\"dark\"]) .file-item > svg {\n  color: var(--nuraly-color-text-secondary, #8d8d8d);\n}\n\n/* Progress bar - dark theme */\n:host-context([data-theme*=\"dark\"]) .progress-bar,\n:host([data-theme*=\"dark\"]) .progress-bar {\n  background-color: var(--nuraly-color-border-subtle, #525252);\n}\n\n/* Preview modal - dark theme */\n:host-context([data-theme*=\"dark\"]) .preview-modal,\n:host([data-theme*=\"dark\"]) .preview-modal {\n  background-color: rgba(0, 0, 0, 0.85);\n}\n\n/* Progress bar styles - fixed to ensure full width */\n.progress-bar {\n  height: 2px;\n  width: 100%;\n  background-color: var(--nuraly-color-border, #e6e6e6);\n  margin-top: 4px;\n  position: relative;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.progress-inner {\n  height: 100%;\n  background-color: var(--nuraly-color-primary, #409eff);\n  position: absolute;\n  left: 0;\n  top: 0;\n  transition: width 0.3s ease;\n}\n\n/* Progress percentage indicator */\n.progress-percentage {\n  position: absolute;\n  right: 0;\n  top: -18px;\n  font-size: var(--nuraly-font-size-01, 12px);\n  color: var(--nuraly-color-primary, #409eff);\n}\n\n.hidden {\n  display: none;\n}\n.success {\n  color: var(--nuraly-color-success, #67c23a);\n}\n.error {\n  color: var(--nuraly-color-danger, #f56c6c);\n}\n.icon-delete {\n  color: var(--nuraly-color-danger, #f56c6c);\n}\n.file-preview {\n  width: 100%;\n  margin-top: 4px;\n}\n.image-preview {\n  display: block;\n  max-width: 100%;\n  max-height: 200px;\n  border-radius: var(--nuraly-border-radius-sm, 4px);\n  object-fit: contain;\n  cursor: zoom-in;\n}\n.preview-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--nuraly-color-background-overlay, rgba(0, 0, 0, 0.7));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: var(--nuraly-z-modal, 1000);\n}\n.preview-modal img {\n  max-width: 90%;\n  max-height: 90%;\n  object-fit: contain;\n}\n.preview-close {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  color: var(--nuraly-color-text-inverse, white);\n  font-size: 30px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.preview-icon {\n  padding: 4px;\n  color: var(--nuraly-color-primary, #409eff);\n  cursor: zoom-in;\n}\n\n/* File item container with progress bar */\n.file-container {\n  width: 100%;\n  position: relative;\n  overflow: hidden; /* Prevent child overflow */\n}\n\n/* Responsive styles */\n@media (max-width: 600px) {\n  .upload-dragger {\n    height: 140px;\n    padding: var(--nuraly-spacing-04, 12px);\n  }\n  .upload-icon {\n    font-size: 24px;\n  }\n  .upload-text,\n  .upload-tip {\n    font-size: var(--nuraly-font-size-01, 13px);\n  }\n  .file-item {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas:\n      \"icon filename\"\n      \"size status\"\n      \"progress progress\"\n      \"actions actions\";\n    gap: 4px 8px;\n    align-items: center;\n    padding: var(--nuraly-spacing-03, 8px);\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden; /* Hide content that overflows */\n  }\n  .file-item > svg:first-child {\n    grid-area: icon;\n    align-self: start;\n  }\n  .file-name {\n    grid-area: filename;\n    margin: 0;\n    padding: 2px 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 0; /* Force shrinking to minimum width */\n    max-width: 100%; /* Ensure it doesn't exceed its container */\n    word-break: break-all; /* Break extremely long words if necessary */\n    flex: 1; /* Take available space */\n  }\n  .file-size {\n    grid-area: size;\n    margin: 0;\n  }\n  .file-status {\n    grid-area: status;\n    justify-self: end;\n  }\n  .progress-bar {\n    grid-area: progress;\n    width: 100%;\n  }\n  .file-actions {\n    grid-area: actions;\n    margin: 4px 0 0 0;\n    justify-content: flex-end;\n    width: 100%;\n  }\n  .upload-button {\n    width: 100%;\n    font-size: var(--nuraly-font-size-03, 16px);\n  }\n}\n`;"]}

package/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/file-upload/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface UploadFile {\n    name: string;\n    size: string;\n    raw: File;\n    status: 'ready' | 'uploading' | 'success' | 'error';\n    percentage: number;\n    uid: string;\n    url?: string; // URL for preview\n    isImage?: boolean; // Flag for image files\n  }"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/file-upload/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface UploadFile {\n    name: string;\n    size: string;\n    raw: File;\n    status: 'ready' | 'uploading' | 'success' | 'error';\n    percentage: number;\n    uid: string;\n    url?: string; // URL for preview\n    isImage?: boolean; // Flag for image files\n  }"]}

package/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/file-upload/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,WAAW,CAAC,IAAU;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,cAAc,CAAC,KAAa;QAC1B,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC9B,MAAM,CAAC,GAAG,IAAI,CAAC;QACf,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5C,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACpD,OAAO,UAAU,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED,iBAAiB,CAAC,IAAU;QAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAChC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;;gBACpB,OAAO,CAAC,MAAA,CAAC,CAAC,MAAM,0CAAE,MAAgB,CAAC,CAAC;YACtC,CAAC,CAAC;YACF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAC","sourcesContent":["export const fileUtils = {\n    isImageFile(file: File): boolean {\n      return file.type.startsWith('image/');\n    },\n  \n    formatFileSize(bytes: number): string {\n      if (bytes === 0) return '0 B';\n      const k = 1024;\n      const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n      const i = Math.floor(Math.log(bytes) / Math.log(k));\n      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n    },\n  \n    createFilePreview(file: File): Promise<string> {\n      return new Promise((resolve) => {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n          resolve(e.target?.result as string);\n        };\n        reader.readAsDataURL(file);\n      });\n    }\n  };"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/file-upload/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,WAAW,CAAC,IAAU;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,cAAc,CAAC,KAAa;QAC1B,IAAI,KAAK,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC9B,MAAM,CAAC,GAAG,IAAI,CAAC;QACf,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5C,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACpD,OAAO,UAAU,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED,iBAAiB,CAAC,IAAU;QAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAChC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE;;gBACpB,OAAO,CAAC,MAAA,CAAC,CAAC,MAAM,0CAAE,MAAgB,CAAC,CAAC;YACtC,CAAC,CAAC;YACF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAC","sourcesContent":["export const fileUtils = {\n    isImageFile(file: File): boolean {\n      return file.type.startsWith('image/');\n    },\n  \n    formatFileSize(bytes: number): string {\n      if (bytes === 0) return '0 B';\n      const k = 1024;\n      const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n      const i = Math.floor(Math.log(bytes) / Math.log(k));\n      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n    },\n  \n    createFilePreview(file: File): Promise<string> {\n      return new Promise((resolve) => {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n          resolve(e.target?.result as string);\n        };\n        reader.readAsDataURL(file);\n      });\n    }\n  };"]}